:root{font-family:system-ui,-apple-system,"Noto Sans CJK SC","Microsoft YaHei",sans-serif;color:#233d38;background:#f7f7f1;font-size:17px;line-height:1.6}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:24px;justify-content:space-between;padding:24px 5%;border-bottom:1px solid #e1e7dd;background:#fff}.brand{font-size:25px;font-weight:750;color:#205f4d;text-decoration:none}.brand span{display:block;font-size:12px;font-weight:400;color:#738078}.privacy{font-size:13px;background:#eaf3e9;color:#356043;border-radius:20px;padding:8px 16px}main{max-width:1180px;margin:auto;padding:36px 26px}h1{font-size:clamp(32px,4vw,52px);line-height:1.25;letter-spacing:-1px;margin:12px 0 24px}h2{margin:15px 0 25px;font-size:26px}.eyebrow{color:#58826b;font-weight:600;font-size:14px}.welcome{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center;min-height:65vh}.intro{color:#6a786e}.card{background:white;border:1px solid #e1e6dc;border-radius:22px;padding:30px;box-shadow:0 10px 35px #29482e06}.principles{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.principles span{border:1px solid #d9e2d5;border-radius:20px;padding:6px 12px;font-size:13px}.tabs{display:flex;gap:10px;margin-bottom:20px}.tabs button{flex:1;border:none;background:#f3f5ef}.tabs .selected{background:#e1eee3;color:#205f4d}label{display:block;font-size:15px;margin:14px 0;color:#4c6257}input,select{display:block;width:100%;font:inherit;border:1px solid #ced9cf;background:#fcfdfb;border-radius:10px;padding:11px;margin-top:6px;color:#253c33}input:focus,select:focus,button:focus-visible{outline:3px solid #9bc0a5;outline-offset:2px}button{cursor:pointer;font:inherit;border:1px solid #cbd8cc;border-radius:10px;background:white;color:#294d3c;padding:10px 16px}button:hover{background:#edf4ea}button:disabled{opacity:.5;cursor:wait}.primary{background:#28634d;color:white;border-color:#28634d}.primary:hover{background:#194f3c}.authcard .primary{width:100%;margin-top:15px}.hint{font-size:13px;color:#758279}.workspace-title{display:flex;justify-content:space-between;align-items:center;gap:20px}.workspace-title h1{margin:6px 0 10px}.workspace-title>label{min-width:210px}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}.toolbar button{font-size:14px}.members{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.member{display:flex;align-items:center;flex-direction:column;padding:28px;text-align:center;border:1px solid #e0e5da;border-radius:20px;background:#fff}.avatar{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#e2efe4;font-size:28px;color:#376c4d}.member.elder .avatar{background:#fff0d5;color:#906a32}.member.parent .avatar{background:#e7ecf8;color:#526999}.member h2{font-size:22px;margin:14px 0 4px}.member p{font-size:14px;color:#738178;margin:0 0 16px}.next{margin-top:30px;background:#eff3e9}.next p{margin:6px 0 0;color:#6b796a;font-size:15px}#notice:not(:empty){background:#fff3d6;border:1px solid #e9d8a6;border-radius:12px;padding:12px 18px;margin-bottom:24px;white-space:pre-wrap;overflow-wrap:anywhere}#editor{max-width:740px;margin:10px auto}.back{border:none;padding-left:0}.check{display:flex;align-items:center;gap:10px}.check input{width:auto;margin:0}.token{word-break:break-all;background:#f0f3ec;padding:15px;border-radius:12px}footer{text-align:center;font-size:12px;color:#809081;margin-top:50px}[hidden]{display:none!important}@media(max-width:720px){header{padding:18px;flex-wrap:wrap;gap:10px}.brand span{display:none}.privacy{font-size:11px}.welcome{grid-template-columns:1fr;gap:28px}.workspace-title{display:block}.card{padding:22px}main{padding:22px 18px}.members{grid-template-columns:repeat(2,minmax(0,1fr))}.member{padding:22px 10px}.toolbar button{flex:1;min-width:130px}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}

/* Sidebar history panel */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;background:#f5f7f4;border-right:1px solid #e0e5da;z-index:100;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .2s ease}
.sidebar.open{transform:translateX(0)}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid #e8ece5}
.sidebar-header h2{margin:0;font-size:16px;color:#2c4a35}
.sidebar-header button{width:32px;height:32px;border:1px solid #c8d3c4;border-radius:8px;background:#fff;font-size:18px;cursor:pointer;color:#58826b}
.sidebar-header button:hover{background:#eef1ec}
.sidebar-list{flex:1;overflow-y:auto;padding:8px 0}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 18px;cursor:pointer;border:none;background:none;width:100%;text-align:left;font-size:14px;color:#3d5a45;border-left:3px solid transparent;transition:all .15s}
.sidebar-item:hover{background:#eef1ec;border-left-color:#a8c5a0}
.sidebar-item.active{background:#e4eae3;border-left-color:#58826b;font-weight:600}
.sidebar-item .item-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-item .item-time{font-size:11px;color:#8a9a88;white-space:nowrap}
.sidebar-item .item-delete{width:24px;height:24px;border:none;background:none;cursor:pointer;color:#c47a7a;font-size:14px;border-radius:4px;opacity:0;transition:opacity .15s}
.sidebar-item:hover .item-delete{opacity:1}
.sidebar-item .item-delete:hover{background:#f5eaea}
.sidebar-footer{padding:12px 18px;border-top:1px solid #e8ece5}
.sidebar-footer button{width:100%;padding:10px;border:1px solid #c8d3c4;border-radius:8px;background:#fff;cursor:pointer;color:#58826b;font-size:14px}
.sidebar-footer button:hover{background:#eef1ec}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.15);z-index:99;display:none}
.sidebar-overlay.show{display:block}

/* ── Vocabulary (Phase 9) ─────────────────────────────────────── */
.vocab-word-list,.vocab-phrase-list{display:grid;gap:12px}
.vocab-card{border:1px solid #e0e5da;border-radius:14px;padding:16px 18px;background:#fff;display:flex;flex-direction:column;gap:6px}
.vocab-badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px;color:#fff}
.level-1{background:#c47a7a}.level-2{background:#e6a847}.level-3{background:#d4b84a}.level-4{background:#7ab85c}.level-5{background:#376c4d}
.vocab-word-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vocab-phonetic{font-size:14px;color:#738078}
.vocab-pos{font-size:13px;color:#58826b;font-style:italic}
.vocab-meaning{margin:0;color:#233d38}
.vocab-example{margin:0;font-size:14px;color:#58826b;font-style:italic}
.vocab-actions{display:flex;gap:6px;margin-top:4px}
.vocab-actions button{font-size:13px;padding:6px 10px}
.vocab-form{display:grid;gap:10px}
.vocab-field{display:flex;flex-direction:column;gap:4px}
.vocab-field label{display:flex;flex-direction:column;gap:4px;font-size:15px;margin:0}
.vocab-field input,.vocab-field select{margin-top:0}
.vocab-quiz-word{font-size:32px;margin:0}
.vocab-quiz-meaning{font-size:18px;margin:12px 0 20px;color:#58826b}
.vocab-stats{padding:12px 16px;background:#eff3e9;border-radius:10px;margin:12px 0;font-size:14px}
.vocab-quiz-result-list{display:grid;gap:6px;margin:12px 0}
.vocab-quiz-item{padding:8px 12px;border:1px solid #e0e5da;border-radius:8px;font-size:14px}

/* ── Diagnostics (Phase 10) ──────────────────────────────────── */
.diag-section{margin-bottom:20px}
.diag-table{width:100%;border-collapse:collapse;margin:8px 0 16px}
.diag-table td{padding:8px 12px;border-bottom:1px solid #e8ece5;vertical-align:top}
.diag-table .label{width:120px;color:#58826b;font-weight:600;white-space:nowrap}
.diag-table .ok{color:#2d7a3f}
.diag-table .warn{color:#a07a1a}
.diag-table .error{color:#c44}
.diag-deps{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 16px}
.dep-tag{font-size:12px;background:#eff3e9;border:1px solid #d9e2d5;border-radius:8px;padding:3px 10px;color:#3d5a45}
.diag-warnings{background:#fff8e1;border:1px solid #e9d8a6;border-radius:12px;padding:12px 16px;margin:8px 0 16px}
.diag-warnings ul{margin:0;padding-left:20px}
.diag-warnings li{margin:4px 0;font-size:14px;color:#7a6a1a}
.errors-table td{padding:6px 12px}
.errors-table pre{margin:0;font-size:12px;color:#758279;white-space:pre-wrap}