html,body{background:#f4f6fa;transition:background-color .2s, color .2s}
body.dark{background:#1a1d24;color:#e8eef7}
body.dark .card{background:#252a33;border-color:#3a3f48;color:#e8eef7}
body.dark .card-header{background:#2d333d;color:#e8eef7;border-color:#3a3f48}
body.dark .form-control,body.dark .form-select{background:#2a2f38;border-color:#3a3f48;color:#e8eef7}
body.dark .form-control:focus,body.dark .form-select:focus{background:#2a2f38;color:#e8eef7;border-color:#1F4E79}
body.dark .nav-tabs .nav-link{color:#9ec5e8}
body.dark .nav-tabs .nav-link.active{background:#1F4E79;color:#fff}
body.dark .btn-outline-secondary{color:#9ec5e8;border-color:#3a3f48}
body.dark .table{color:#e8eef7}
body.dark .help-content code{background:#2a2f38;color:#FFB300}
body.dark .help-content table th{background:#2d333d}
body.dark .help-content blockquote{background:#252a33}
body.dark .alert-info{background:#1a3a5c;color:#bfe1ff;border-color:#1F4E79}
body.dark pre{background:#0e1218 !important}
body.dark .symbol-bar{background:#252a33;border-top-color:#1F4E79}
body.dark .sb-tabs button{background:#2a2f38;border-color:#3a3f48;color:#e8eef7}
body.dark .sb-keys button{background:#2a2f38;border-color:#3a3f48;color:#e8eef7}
body.dark #geoproBoard{background:#252a33}

body{font-family:-apple-system,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif}
.nav-tabs .nav-link{white-space:nowrap;font-size:.9rem;color:#1F4E79}
.nav-tabs .nav-link.active{background:#1F4E79;color:#fff;border-color:#1F4E79}
.card{box-shadow:0 1px 3px rgba(0,0,0,.06);border-color:#e3e7ee}
.card-header{background:#eef2f7;font-weight:600}

.display-area{background:#0e2238;color:#e8eef7;border-radius:8px;padding:12px;min-height:90px}
.expr-render{color:#9ec5e8;font-size:1rem;min-height:1.4em}
.result-render{color:#fff;font-size:1.4rem;font-weight:600;text-align:right}

.keypad{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.keypad button{padding:.55rem .25rem;font-weight:600;border-radius:6px;border:1px solid #d0d7e2;background:#fff;font-size:.9rem}
.keypad .key-num{background:#fff}
.keypad .key-op{background:#dde9f6;color:#1F4E79}
.keypad .key-fn{background:#1F4E79;color:#fff;border-color:#1F4E79;font-size:.8rem}
.keypad .key-ctrl{background:#0e2238;color:#fff;border-color:#0e2238}
.keypad button:active{transform:scale(.97)}

.history-item{cursor:pointer;border-bottom:1px dashed #d8dee8;padding:6px 4px;font-family:ui-monospace,Menlo,Monaco,monospace;font-size:.85rem}
.history-item:hover{background:#f0f5fb}

.mat-grid{display:inline-grid;gap:3px;margin-top:4px}
.mat-grid input{width:62px;text-align:center;padding:2px 4px;border:1px solid #d0d7e2;border-radius:4px;font-family:ui-monospace,Menlo,monospace;font-size:.85rem}

.sheet-table{border-collapse:collapse}
.sheet-table th,.sheet-table td{border:1px solid #d0d7e2;padding:0;min-width:70px;height:28px;text-align:center;background:#fff}
.sheet-table th{background:#eef2f7;font-weight:600}
.sheet-table input{width:100%;height:100%;border:none;padding:2px 4px;font-family:ui-monospace,Menlo,monospace;font-size:.85rem;background:transparent}
.sheet-table input:focus{outline:2px solid #1F4E79}
.sheet-table .row-head{background:#eef2f7;font-weight:600;cursor:default}

.func-row{display:flex;gap:4px;margin-top:4px}
.func-row input{flex:1}
.const-item{padding:6px 8px;border-bottom:1px dashed #e3e7ee;cursor:pointer;font-size:.85rem}
.const-item:hover{background:#f0f5fb}
.const-name{font-weight:600;color:#1F4E79}

@media (max-width:600px){
  .keypad{grid-template-columns:repeat(5,1fr)}
  .keypad button{font-size:.8rem;padding:.45rem .1rem}
}

/* 週期表 */
.ptable{display:grid;grid-template-columns:repeat(18,minmax(36px,1fr));gap:2px;font-size:.7rem}
.ptable .elem{aspect-ratio:1;border:1px solid #c8d0db;border-radius:4px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px;text-align:center;line-height:1}
.ptable .elem:hover{transform:scale(1.08);z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.ptable .elem .z{font-size:.55rem;color:#666}
.ptable .elem .sym{font-weight:700;font-size:.95rem}
.ptable .elem.cat-noble{background:#ffe4b5}
.ptable .elem.cat-alkali{background:#ffcccb}
.ptable .elem.cat-alkaline{background:#ffd9b3}
.ptable .elem.cat-transition{background:#ffe6f0}
.ptable .elem.cat-postTM{background:#e0e0e0}
.ptable .elem.cat-metalloid{background:#e6ffd9}
.ptable .elem.cat-nonmetal{background:#cce6ff}
.ptable .elem.cat-halogen{background:#d9f2ff}
.ptable .elem.cat-lanthanide{background:#ffe6cc}
.ptable .elem.cat-actinide{background:#ffd9cc}
.ptable .empty{visibility:hidden}

/* eActivity */
.ea-preview{max-height:600px;overflow:auto;padding:8px;background:#fff;border:1px solid #d0d7e2;border-radius:4px}
.ea-preview .calc-block{background:#0e2238;color:#9ec5e8;padding:8px;border-radius:6px;margin:8px 0;font-family:ui-monospace,Menlo,monospace;font-size:.85rem}
.ea-preview .calc-block .res{color:#fff;font-weight:600}

#qrBox img, #qrBox canvas{margin-top:6px}

.rpn-stack{background:#0e2238;color:#e8eef7;border-radius:8px;padding:10px;min-height:160px;font-family:ui-monospace,Menlo,monospace}
.rpn-row{display:flex;gap:10px;padding:3px 0;border-bottom:1px dashed #2a3a55}
.rpn-row:last-child{border-bottom:none;color:#fff;font-weight:700;font-size:1.1em}
.rpn-lvl{color:#7da9d6;width:30px}
.rpn-val{flex:1;text-align:right}

.step-output{font-family:ui-monospace,Menlo,monospace;font-size:.92rem}
.step-output .step{padding:8px 10px;margin:6px 0;border-left:4px solid #1F4E79;background:#f4f7fb;border-radius:0 6px 6px 0}
.step-output .step .num{display:inline-block;background:#1F4E79;color:#fff;border-radius:50%;width:22px;height:22px;text-align:center;line-height:22px;font-size:.78rem;margin-right:8px;font-weight:700}
.step-output .step .why{color:#666;font-size:.82rem;margin-top:3px}
.step-output .step .math{padding-left:30px}
.step-output .ans{padding:10px;background:#e6f3ee;border:2px solid #2CA02C;border-radius:6px;margin-top:8px;font-weight:700}
.step-output .err{padding:8px;background:#fde2e2;border-left:4px solid #d62728;color:#a01;border-radius:0 6px 6px 0}

.geopro-tool.active{background:#1F4E79;color:#fff;border-color:#1F4E79}
#geoproBoard{background:#fff;border:1px solid #d0d7e2;border-radius:6px}

#validOut .test{padding:6px 10px;margin:3px 0;border-left:3px solid;border-radius:0 4px 4px 0}
#validOut .test.pass{border-color:#2CA02C;background:#e6f3ee}
#validOut .test.fail{border-color:#D62728;background:#fde2e2}
#validOut .test .name{font-weight:700}
#validOut .test .detail{color:#555;font-size:.85rem}

/* 說明書 */
.help-toc{max-height:75vh;overflow:auto;font-size:.85rem}
.help-toc a{display:block;padding:3px 6px;border-radius:3px;color:#1F4E79;text-decoration:none;cursor:pointer;line-height:1.4}
.help-toc a:hover,.help-toc a.active{background:#eef2f7;text-decoration:none}
.help-toc .lvl2{padding-left:18px;font-size:.78rem;color:#555}
.help-content{font-size:.95rem;line-height:1.7}
.help-content h2{color:#1F4E79;border-bottom:2px solid #1F4E79;padding-bottom:4px;margin-top:24px;font-size:1.4rem}
.help-content h3{color:#0e2238;margin-top:18px;font-size:1.1rem}
.help-content h4{color:#444;font-size:1rem;margin-top:12px}
.help-content code{background:#f4f6fa;padding:1px 5px;border-radius:3px;color:#D32F2F;font-family:ui-monospace,Menlo,monospace;font-size:.88em}
.help-content pre{background:#0e2238;color:#e8eef7;padding:10px;border-radius:6px;overflow:auto;font-size:.85rem}
.help-content table{border-collapse:collapse;width:100%;margin:8px 0;font-size:.9em}
.help-content th,.help-content td{border:1px solid #d0d7e2;padding:5px 8px}
.help-content th{background:#eef2f7}
.help-content blockquote{border-left:4px solid #1F4E79;padding:6px 12px;background:#f4f7fb;margin:8px 0;border-radius:0 6px 6px 0}
.help-content .tag{display:inline-block;background:#1F4E79;color:#fff;padding:2px 8px;border-radius:10px;font-size:.75rem;margin-right:4px}
.help-content .tag.adv{background:#D32F2F}
.help-content .tag.std{background:#2CA02C}
.help-content .tip{background:#fff8e1;border-left:4px solid #FFB300;padding:8px 12px;border-radius:0 6px 6px 0;margin:8px 0}

/* 全域符號工具列 */
.symbol-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:2px solid #1F4E79;box-shadow:0 -4px 12px rgba(0,0,0,.15);z-index:1050;max-height:38vh;overflow:auto}
.sb-tabs{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid #e3e7ee;flex-wrap:wrap}
.sb-tabs button{padding:4px 10px;border:1px solid #d0d7e2;background:#f4f6fa;border-radius:14px;font-size:.8rem;cursor:pointer}
.sb-tabs button.active{background:#1F4E79;color:#fff;border-color:#1F4E79}
.sb-tabs button#sbClose{margin-left:auto;background:#fff;border-color:#d0d7e2;color:#666;font-weight:700;font-size:1rem;padding:0 10px}
.sb-keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px;padding:8px}
.sb-keys button{padding:8px 4px;border:1px solid #d0d7e2;background:#fff;border-radius:6px;font-size:.95rem;cursor:pointer;font-family:ui-monospace,Menlo,monospace}
.sb-keys button:hover{background:#eef2f7;border-color:#1F4E79}
.sb-keys button:active{transform:scale(.95)}

/* 通用：math-input 旁的小符號按鈕 */
.math-input-wrap{position:relative}
.math-input-wrap .sym-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:#1F4E79;color:#fff;border:none;border-radius:4px;padding:2px 8px;font-size:.75rem;cursor:pointer;z-index:1}

/* 鍵盤新樣式 */
.keypad{grid-template-columns:repeat(6,1fr)}
.keypad .key-shift{background:#FFB300;color:#000;border-color:#FFB300}
.keypad .key-alpha{background:#D32F2F;color:#fff;border-color:#D32F2F}
.keypad .key-alpha-var{background:#fff;color:#D32F2F;border:1px dashed #D32F2F}
.keypad.shift-on .key-fn{outline:2px solid #FFB300}
.keypad.alpha-on .key-alpha-var{background:#FFEBEE}
@media (max-width:600px){
  .keypad{grid-template-columns:repeat(6,1fr)}
  .keypad button{font-size:.7rem;padding:.4rem .05rem}
}