.main-content {padding-bottom:75px}
.intro {padding:30px 0 20px}
.intro h1 {font-size:34px;line-height:1.35;letter-spacing:-1.3px;font-weight:850}
.intro h1 span {color:var(--accent);font-size:28px;font-weight:700;letter-spacing:0}
.intro p {color:var(--muted);font-size:14px;margin-top:8px;line-height:1.8}
.workspace {display:grid;gap:23px}
.editor-panel,.keyboard-panel,.guide-section,.faq-section {background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.editor-panel {padding:23px 27px 20px}
.panel-heading,.section-top {display:flex;justify-content:space-between;align-items:center;gap:15px}
.panel-heading h2,.section-top h2,.faq-section h2 {font-size:19px;font-weight:800;letter-spacing:-.7px}
.panel-heading p,.section-top p {color:var(--muted);font-size:12.5px;margin-top:4px}
.private-label {font-size:11px;color:#77907f;background:#eff8f1;border-radius:20px;padding:5px 10px;white-space:nowrap}
#chinese-editor {resize:vertical;display:block;width:100%;height:125px;min-height:110px;margin-top:15px;padding:16px 18px;background:#fbfcfe;border:1px solid #d9e0eb;border-radius:11px;color:#27364e;font-size:21px;line-height:1.75;outline:none}
#chinese-editor:focus {border-color:#7998d1;box-shadow:0 0 0 3px rgba(105,145,218,.1)}
#chinese-editor::placeholder {color:#abb4c3;font-size:15px;line-height:1.9}
.editor-footer {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.char-count {font-size:12px;color:#97a1b3;white-space:nowrap}
.editor-actions {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.button {display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:7px;border:1px solid var(--line);font-size:12px;font-weight:700;white-space:nowrap;transition:background .15s}
.button-ghost {color:#5b6881;background:#fff}.button-ghost:hover:not(:disabled) {background:#f2f6fa}
.button:disabled {opacity:.35;cursor:default}
.button-primary {background:var(--accent);border-color:var(--accent);color:#fff;padding:9px 16px}.button-primary:hover {background:var(--accent-darker)}
.keyboard-panel {padding:26px 27px 25px}
.script-label {color:#6980a0;background:#eff4fb;border-radius:20px;padding:5px 11px;font-size:11px;font-weight:700;white-space:nowrap}
.search-container {position:relative;display:flex;align-items:center;margin-top:17px}
.search-icon {position:absolute;left:14px;color:#909bb0;font-size:24px;line-height:1;pointer-events:none}
#chinese-search {display:block;width:100%;height:48px;border:1px solid #dfe5ed;border-radius:9px;padding:0 198px 0 42px;outline:none;background:#fff;font-size:13px}
#chinese-search:focus {border-color:#8aa7db;box-shadow:0 0 0 3px rgba(105,145,218,.08)}
#chinese-search::placeholder {color:#a7b0bf}
.search-hint {position:absolute;right:13px;font-size:11px;color:#a6afbc;pointer-events:none}
.tabs {display:flex;gap:7px;margin-top:19px;flex-wrap:wrap}
.tab {border:1px solid transparent;background:#f3f5f9;color:#727d92;font-size:12px;font-weight:700;border-radius:8px;padding:9px 13px}
.tab:hover {background:#e8edf5}.tab.active {color:#fff;background:#385da7}
.board-heading {display:flex;justify-content:space-between;align-items:center;margin:20px 0 11px;font-size:13px;font-weight:800;color:#52617a}
#result-count {color:#94a0b1;font-weight:500;font-size:12px}
.chinese-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.hanzi-key {min-width:0;min-height:86px;border:1px solid #e5eaf2;border-radius:10px;background:#fff;color:#26354d;padding:11px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;transition:background .12s,border-color .12s,transform .12s}
.hanzi-key:hover,.hanzi-key.selected {background:#f5f8ff;border-color:#a3b8e0}
.hanzi-key:active {transform:translateY(1px)}
.hanzi-letter {font-family:"Noto Sans CJK SC","Microsoft YaHei","PingFang SC","SimHei",sans-serif;font-size:24px;font-weight:500;line-height:1.4;word-break:break-all}
.hanzi-reading {font-size:11px;color:#637fa1;line-height:1.25}
.hanzi-meaning {color:#97a1b1;font-size:11px;line-height:1.3;overflow-wrap:anywhere}
.chinese-grid.symbol-mode,.chinese-grid.tone-mode {grid-template-columns:repeat(7,minmax(0,1fr))}
.chinese-grid.symbol-mode .hanzi-key,.chinese-grid.tone-mode .hanzi-key {min-height:71px}
.chinese-grid.symbol-mode .hanzi-letter,.chinese-grid.tone-mode .hanzi-letter {font-size:26px}
.chinese-grid.symbol-mode .hanzi-reading,.chinese-grid.tone-mode .hanzi-reading {display:none}
.empty-state {padding:35px 0;color:var(--muted);font-size:13px;text-align:center}
.board-tip {font-size:12px;color:#939bad;margin-top:16px;line-height:1.8}
.guide-section {padding:27px;margin-top:23px}
.guide-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:19px}
.guide-list>div {background:#f8fafd;border-radius:10px;padding:16px}
.guide-list strong {color:#344d7a;font-size:13px}.guide-list p {font-size:12px;color:#7a8597;line-height:1.8;margin-top:7px}
.dictionary-note {font-size:12px;color:#8792a4;line-height:1.75;margin-top:15px}
.faq-section {margin-top:23px;padding:27px}
.faq-list {margin-top:18px;display:grid;gap:9px}
details {border:1px solid #e6eaf1;border-radius:9px;overflow:hidden;background:#fff}
summary {list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-size:13px;font-weight:700}
summary::-webkit-details-marker {display:none}
summary:after {content:'+';font-size:20px;line-height:1;font-weight:400;color:#7c87a0}
details[open]>summary:after {content:'−'}
details[open]>summary {background:#fafbfe;border-bottom:1px solid var(--line)}
.faq-list details p {padding:14px 17px;color:#69758a;font-size:12.5px;line-height:1.8}
.toast {position:fixed;bottom:26px;left:50%;transform:translate(-50%,18px);background:#253047;color:#fff;border-radius:10px;padding:12px 17px;font-size:13px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:999;white-space:nowrap;max-width:calc(100vw - 30px);text-align:center}
.toast.visible {opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:680px) {
    .main-content {padding-bottom:40px}.intro {padding:20px 2px 15px}.intro h1 {font-size:27px}.intro h1 span {font-size:22px}.intro p {font-size:12.5px}.desktop-only {display:none}
    .editor-panel,.keyboard-panel,.guide-section,.faq-section {border-radius:13px}.editor-panel,.keyboard-panel {padding:20px 17px}
    .panel-heading,.section-top {align-items:flex-start;flex-wrap:wrap}.panel-heading h2,.section-top h2,.faq-section h2 {font-size:18px}
    .private-label {font-size:10px}#chinese-editor {font-size:19px;height:110px;min-height:100px;padding:13px}
    .editor-footer {align-items:flex-start}.editor-actions {gap:5px}.button {font-size:11px;padding:7px 9px}
    .editor-actions #undo-btn span,.editor-actions #redo-btn span {display:none}.button-primary {padding:8px 12px}
    .search-container {margin-top:16px}#chinese-search {padding-right:14px;font-size:12px}.search-hint {display:none}
    .tabs {gap:6px;margin-top:16px}.tab {font-size:11px;padding:7px 10px}.board-heading {margin-top:16px}
    .chinese-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.hanzi-key {min-height:82px;padding:10px 5px}.hanzi-letter {font-size:22px}.hanzi-reading,.hanzi-meaning {font-size:10px}
    .chinese-grid.symbol-mode,.chinese-grid.tone-mode {grid-template-columns:repeat(5,minmax(0,1fr))}
    .guide-section,.faq-section {padding:20px 17px;margin-top:17px}.guide-list {grid-template-columns:1fr;gap:8px}.guide-list>div {padding:12px 14px}
}
@media(max-width:360px) {.chinese-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.chinese-grid.symbol-mode,.chinese-grid.tone-mode {grid-template-columns:repeat(4,minmax(0,1fr))}.button {font-size:10px}}


[hidden] {display:none!important}
.ime-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:15px}
.toggle-label {display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:750;cursor:pointer;position:relative}
.toggle-label input {position:absolute;opacity:0;width:1px;height:1px}
.toggle-track {width:36px;height:21px;background:#c5ccd8;border-radius:30px;position:relative;transition:background .15s}
.toggle-track:before {content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.toggle-label input:checked+.toggle-track {background:#4b75c5}
.toggle-label input:checked+.toggle-track:before {transform:translateX(15px)}
.toggle-label input:focus-visible+.toggle-track {outline:3px solid #80a7ed;outline-offset:3px}
.ime-shortcut {color:#8793a5;font-size:11px}
.pinyin-candidates {background:#f7f9fe;border:1px solid #cedcf2;border-radius:10px;margin-top:9px;padding:10px 12px}
.pinyin-candidate-top {display:flex;justify-content:space-between;gap:12px;color:#8793a5;font-size:11px;margin-bottom:7px}
.pinyin-candidate-top strong {color:#385da7}
.pinyin-choice-list {display:flex;flex-wrap:wrap;gap:6px}
.pinyin-choice {display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #e0e7f3;border-radius:7px;padding:6px 8px;cursor:pointer}
.pinyin-choice:hover,.pinyin-choice.selected {border-color:#7c9dda;background:#edf3ff}
.pinyin-number {color:#9ba6b7;font-size:10px}
.pinyin-hanzi {color:#283f64;font-size:18px;font-family:"Noto Sans CJK SC","Microsoft YaHei","PingFang SC",sans-serif}
.pinyin-reading {color:#8492a6;font-size:10px}
@media(max-width:680px) {.ime-toolbar {margin-top:12px;gap:8px}.ime-shortcut {font-size:10px}.toggle-label {font-size:12px}.pinyin-candidate-top span:last-child {display:none}.pinyin-choice-list {gap:5px}.pinyin-choice {padding:6px}.pinyin-hanzi {font-size:16px}}