:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark;--ink:#e4ebe6;--muted:#a2afa7;--line:#303b35;--green:#78ad8d;--green-dark:#649a79;--paper:#171d19}
button{font-family:inherit}
.theme-button{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--muted);padding:7px 9px;font:11px var(--sans);cursor:pointer;margin-right:8px}
.theme-button:hover{border-color:var(--green);color:var(--green)}
.subject-nav{display:flex;align-items:center;gap:7px;padding:20px 0 0;overflow-x:auto;scrollbar-width:none}
.subject-nav::-webkit-scrollbar{display:none}
.subject-tab,.subject-add{white-space:nowrap;border:1px solid transparent;border-radius:6px;background:transparent;padding:8px 13px;color:var(--muted);font:500 12px var(--sans);cursor:pointer;transition:.16s}
.subject-tab:hover,.subject-add:hover{background:#edf3ee;color:var(--green)}
.subject-tab.active{background:var(--green);color:#fff}
.subject-add{border:1px dashed #cbd5ce;padding:7px 11px}
.subject-add span{font-size:17px;vertical-align:-1px;margin-right:4px}
.note-card{width:100%;text-align:left;color:inherit;font-family:inherit;cursor:pointer}
.note-card{position:relative;display:block;padding:0;overflow:hidden}
.card-open{display:flex;flex-direction:column;align-items:stretch;text-align:left;width:100%;height:100%;min-height:175px;padding:19px 42px 16px 18px;border:0;background:transparent;color:inherit;cursor:pointer}
.card-open:focus-visible{outline:3px solid #8caf98;outline-offset:-3px;border-radius:8px}
.card-open .card-bottom{margin-top:auto}
.delete-note,.delete-subject{border:0;background:transparent;color:#9ba69f;cursor:pointer;font-size:20px;line-height:1;display:grid;place-items:center}
.delete-note{position:absolute;right:12px;top:13px;width:27px;height:27px;border-radius:5px;opacity:.55}
.delete-note:hover,.delete-subject:hover{background:#f8e9e8;color:#b94e46;opacity:1}
.subject-item{position:relative;display:inline-flex;align-items:center}
.subject-item .subject-tab{padding-right:29px}
.delete-subject{position:absolute;right:5px;top:50%;transform:translateY(-50%);height:22px;width:22px;border-radius:4px;font-size:17px;opacity:.55}
.subject-item:hover .delete-subject,.delete-subject:focus-visible{opacity:1}
.note-card:focus-visible,.subject-tab:focus-visible,.subject-add:focus-visible,.theme-button:focus-visible{outline:3px solid #8caf98;outline-offset:2px}
.note-title{font:600 14px/1.45 var(--display);letter-spacing:-.25px;margin:0 0 8px;color:var(--ink)}
.note-preview{font:12px/1.65 var(--sans);color:var(--muted);margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
[data-theme="dark"] .search-wrap,[data-theme="dark"] .note-card,[data-theme="dark"] .dialog,[data-theme="dark"] .reader-panel{background:#202923;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .search-wrap input,[data-theme="dark"] .dialog input,[data-theme="dark"] .dialog textarea{color:var(--ink);background:#1a211c;border-color:#3b4940}
[data-theme="dark"] .search-wrap input::placeholder,[data-theme="dark"] .dialog input::placeholder,[data-theme="dark"] .dialog textarea::placeholder{color:#77847b}
[data-theme="dark"] .note-card h3,[data-theme="dark"] .note-title,[data-theme="dark"] .section-heading h2,[data-theme="dark"] .empty-state h3{color:var(--ink)}
[data-theme="dark"] .note-mark,[data-theme="dark"] .count-pill{background:#29382e;color:#9fc5aa}
[data-theme="dark"] .card-bottom{border-color:#303b35}
[data-theme="dark"] .subject-tab:hover,[data-theme="dark"] .subject-add:hover{background:#29382e}
[data-theme="dark"] .subject-tab.active{background:var(--green);color:#142019}
[data-theme="dark"] .subject-add{border-color:#48574d}
[data-theme="dark"] .delete-note:hover,[data-theme="dark"] .delete-subject:hover{background:#482d2b;color:#f08a80}
[data-theme="dark"] .modal-backdrop{background:#080d0abf}
.reader-backdrop{position:fixed;inset:0;z-index:8;background:#111a15c7;display:grid;place-items:center;padding:28px;backdrop-filter:blur(5px)}
.reader-backdrop[hidden]{display:none}
.reader-panel{width:min(100%,900px);height:min(100%,800px);background:#fff;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 26px 90px #07100a66;animation:appear .2s ease}
.reader-toolbar{height:62px;min-height:62px;padding:0 25px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.reader-kicker{font:10px var(--mono);letter-spacing:1px;color:var(--muted)}
.reader-close{position:static;font-size:28px}
.reader-content{overflow:auto;padding:64px clamp(28px,9vw,95px) 80px}
.reader-content .eyebrow{margin-bottom:13px}
.reader-content h2{font:700 clamp(28px,4vw,40px)/1.2 var(--display);letter-spacing:-1.3px;margin:0;color:var(--ink);max-width:700px}
.reader-meta{margin:17px 0 34px;color:var(--muted);font:11px var(--mono);padding-bottom:22px;border-bottom:1px solid var(--line)}
.reader-answer{font:15px/1.9 var(--sans);color:var(--ink);white-space:normal;max-width:700px}
.reader-answer p{margin:0 0 17px}
.reader-answer ul{padding-left:23px;margin:0 0 17px}
.reader-answer li{padding-left:4px;margin:5px 0}
.reader-answer code{font:.9em var(--mono);padding:3px 6px;border-radius:4px;background:#edf3ee;color:var(--green-dark)}
.reader-answer strong{font-weight:700}
[data-theme="dark"] .reader-answer code{background:#2d3b32;color:#a5ceaf}
.load-error{color:#b84b43;font-size:13px}
@media(max-width:520px){.theme-button span{display:none}.theme-button{padding:7px 8px}.subject-nav{padding-top:14px}.reader-backdrop{padding:9px}.reader-panel{height:100%;border-radius:9px}.reader-toolbar{padding:0 17px}.reader-content{padding:42px 24px 55px}.reader-meta{margin-bottom:25px}}
.intro-actions{display:flex;align-items:center;gap:9px}
.study-button{border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--green);font:600 13px var(--sans);padding:11px 15px;display:flex;gap:8px;align-items:center;cursor:pointer;transition:.18s}
.study-button:hover:not(:disabled){border-color:var(--green);background:#eff5f0}
.study-button:disabled{opacity:.45;cursor:not-allowed}
.editor-toolbar{display:flex;align-items:center;gap:5px;margin:-10px 0 8px}
.editor-toolbar button{min-width:29px;height:27px;padding:0 7px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);font:11px var(--mono);cursor:pointer}
.editor-toolbar button:hover{border-color:#9db9a5;color:var(--green)}
.editor-toolbar button:first-child{font-weight:700}
.editor-toolbar span{margin-left:auto;color:var(--muted);font:9px var(--mono)}
.editor-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:0}
.editor-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);padding:8px 11px 7px;font:11px var(--sans);cursor:pointer}
.editor-tabs button.active{border-color:var(--green);color:var(--green)}
.dialog .editor-tabs+textarea{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.answer-preview{min-height:154px;max-height:270px;overflow:auto;border:1px solid #e3e9e4;border-top:0;border-radius:0 0 6px 6px;padding:12px;font:12px/1.65 var(--sans);color:var(--ink);margin-bottom:18px}
.answer-preview[hidden]{display:none}
.answer-preview p{margin:0 0 10px}
.answer-preview ul{padding-left:20px;margin:0 0 10px}
.answer-preview h3{font:600 14px var(--display);margin:8px 0}
.answer-preview pre,.reader-answer pre,.study-answer pre{overflow:auto;background:#f1f4f2;padding:12px;border-radius:6px;font:12px/1.6 var(--mono);white-space:pre}
.reader-answer pre code,.study-answer pre code{background:none;padding:0;color:inherit}
.study-panel{width:min(100%,760px);max-height:min(92vh,850px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 26px 90px #07100a66;animation:appear .2s ease}
.study-content{padding:clamp(25px,6vw,55px) clamp(24px,8vw,70px) 35px}
.study-progress-row{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font:10px var(--mono);letter-spacing:.5px}
.study-progress{height:4px;background:#edf1ee;border-radius:4px;margin:11px 0 39px;overflow:hidden}
.study-progress span{display:block;height:100%;border-radius:4px;background:var(--green);transition:width .2s}
.study-content .eyebrow{margin-bottom:7px}
.study-prompt{font:11px var(--mono);color:var(--muted);margin:0 0 9px}
.study-content h2{font:700 clamp(24px,4vw,34px)/1.3 var(--display);letter-spacing:-.8px;color:var(--ink);margin:0 0 24px}
.reveal-button{border:1px solid #a9c0ae;border-radius:6px;background:#f4f8f5;color:var(--green-dark);font:600 12px var(--sans);padding:10px 14px;cursor:pointer}
.reveal-button:hover{background:#e9f2eb}
.study-answer{border-top:1px solid var(--line);padding-top:20px;margin-bottom:20px;color:var(--ink);font:14px/1.85 var(--sans)}
.study-answer[hidden],.reveal-button[hidden],.review-button[hidden]{display:none}
.study-answer p{margin:0 0 13px}
.study-actions{display:flex;align-items:center;gap:9px;margin-top:18px}
.study-actions[hidden]{display:none}
.study-actions .submit-button{width:auto;min-width:125px}
.review-button{border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);font:11px var(--sans);padding:11px 13px;cursor:pointer}
.study-navigation{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:29px;padding-top:18px}
.study-navigation button{border:0;background:transparent;color:var(--muted);font:11px var(--sans);padding:7px;cursor:pointer}
.study-navigation button:hover:not(:disabled){color:var(--green)}
.study-navigation button:disabled{opacity:.35;cursor:not-allowed}
[data-theme="dark"] .study-panel{background:#202923;border-color:var(--line)}
[data-theme="dark"] .study-button:hover:not(:disabled),[data-theme="dark"] .reveal-button{background:#29382e;color:#a5ceaf}
[data-theme="dark"] .editor-toolbar button,[data-theme="dark"] .answer-preview{background:#1a211c;border-color:#3b4940;color:var(--ink)}
[data-theme="dark"] .answer-preview pre,[data-theme="dark"] .reader-answer pre,[data-theme="dark"] .study-answer pre{background:#151b17}
[data-theme="dark"] .study-progress{background:#39443d}
@media(max-width:520px){.intro-actions{width:100%}.intro-actions .add-button,.intro-actions .study-button{flex:1;justify-content:center;padding-left:10px;padding-right:10px}.editor-toolbar span{font-size:8px}.study-panel{max-height:100%;border-radius:9px}.study-navigation button{font-size:10px;padding:7px 4px}.study-content{padding:28px 22px 24px}}
.import-guide-link{color:var(--green);font-size:12px;text-decoration:none;white-space:nowrap}.import-guide-link:hover{text-decoration:underline}.import-guide-shell{padding-bottom:64px}.import-guide{max-width:780px;margin:0 auto;padding:64px 0 20px}.import-guide h1{font:700 clamp(34px,5vw,46px)/1.1 var(--display);letter-spacing:-1.8px;margin:0}.import-guide-lead{font:15px/1.8 var(--sans);color:var(--muted);margin:17px 0 43px}.import-guide code{font:.92em var(--mono);background:#eff4f0;color:var(--green-dark);padding:2px 5px;border-radius:4px}.guide-section{border-top:1px solid var(--line);padding:26px 0 30px}.guide-section h2{font:700 20px var(--display);letter-spacing:-.4px;margin:0 0 10px}.guide-section>p,.guide-section li{font:13px/1.8 var(--sans);color:var(--muted)}.guide-section>p{margin:0 0 16px}.schema-code{overflow:auto;background:#f3f6f4;border:1px solid var(--line);border-radius:8px;padding:17px 19px;color:var(--ink);font:12px/1.75 var(--mono);white-space:pre;margin:17px 0 22px}.schema-code code{background:none;padding:0;color:inherit;border-radius:0}.field-list{margin:0}.field-list>div{display:grid;grid-template-columns:120px 1fr;gap:12px;border-bottom:1px solid var(--line);padding:11px 0}.field-list>div:last-child{border-bottom:0}.field-list dt{font:12px var(--mono);color:var(--ink)}.field-list dd{font:12px/1.65 var(--sans);color:var(--muted);margin:0}.guide-section ol{padding-left:22px}.guide-section li{padding-left:5px;margin:5px 0}.guide-tip{margin-top:19px!important;padding:13px 15px;border-left:3px solid var(--green);background:#f1f6f2;border-radius:0 6px 6px 0}.guide-tip code{white-space:nowrap}[data-theme="dark"] .import-guide code{background:#29382e;color:#a5ceaf}[data-theme="dark"] .schema-code{background:#1c241f;border-color:var(--line)}[data-theme="dark"] .guide-tip{background:#202923}@media(max-width:520px){.import-guide{padding-top:43px}.import-guide-lead{font-size:14px;margin-bottom:31px}.field-list>div{grid-template-columns:90px 1fr;gap:8px}.field-list dd{font-size:11px}.schema-code{font-size:10px;padding:14px}.topbar-right .import-guide-link{font-size:11px}}
.edit-note{position:absolute;right:43px;top:13px;width:27px;height:27px;border:0;border-radius:5px;background:transparent;color:#839188;cursor:pointer;opacity:.72}.edit-note:hover{background:#edf4ef;color:var(--green);opacity:1}.delete-note{right:12px}[data-theme="dark"] .edit-note:hover{background:#29382e;color:#a5ceaf}
.html-library{max-width:1000px;margin:0 auto;padding:64px 0 35px}.html-library h1{font:700 clamp(34px,5vw,46px)/1.1 var(--display);letter-spacing:-1.8px;margin:0}.html-file-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.html-file-card{min-height:190px;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;transition:transform .18s,border-color .18s,box-shadow .18s}.html-file-card:hover{transform:translateY(-2px);border-color:#b9cbbf;box-shadow:0 6px 18px #253a2d0a}.html-file-icon{display:grid;place-items:center;width:34px;height:34px;margin-bottom:16px;border-radius:7px;background:#eff4f0;color:var(--green);font:11px var(--mono)}.html-file-title{font:600 14px/1.45 var(--display)}.html-file-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px;color:var(--muted);font:10px var(--mono)}.html-file-open{margin-top:auto;padding-top:14px;color:var(--green);font:11px var(--sans)}[data-theme="dark"] .html-file-icon{background:#29382e;color:#a5ceaf}@media(max-width:750px){.html-file-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.html-library{padding-top:43px}.html-file-grid{grid-template-columns:1fr}.html-file-card{min-height:165px}}
.subject-dropdown{display:contents}.mobile-nav-toggle{display:none}
@media(max-width:700px){.subject-nav{position:relative;display:flex;overflow:visible;padding:12px 0 0}.mobile-nav-toggle{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:500 12px var(--sans);cursor:pointer}.mobile-nav-toggle:focus-visible{outline:3px solid #8caf98;outline-offset:2px}.mobile-nav-icon{width:15px;display:grid;gap:3px}.mobile-nav-icon i{height:1.5px;width:15px;border-radius:2px;background:currentColor}.subject-dropdown{display:none;position:absolute;top:calc(100% + 7px);left:0;z-index:7;min-width:min(100%,340px);max-height:65vh;overflow:auto;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 32px #10201624}.subject-dropdown.open{display:flex;flex-direction:column;align-items:stretch;gap:3px}.subject-dropdown .subject-item{width:100%;justify-content:space-between}.subject-dropdown .subject-tab{width:100%;padding:10px 34px 10px 12px;text-align:left}.subject-dropdown .subject-add{width:100%;padding:10px 12px;text-align:left}.subject-dropdown .delete-subject{right:5px}.subject-dropdown .subject-item+.subject-item{border-top:1px solid var(--line)}[data-theme="dark"] .subject-dropdown{box-shadow:0 14px 32px #0008}}
.dropdown-page-links{display:none}
@media(max-width:700px){.topbar-right>.import-guide-link{display:none}.dropdown-page-links{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:5px;padding-top:5px}.dropdown-page-link{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:5px;color:var(--green);font:500 12px var(--sans);text-decoration:none}.dropdown-page-link:hover{background:#edf3ee}[data-theme="dark"] .dropdown-page-link:hover{background:#29382e}}


/* Backup and restore controls */
.backup-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 0 0}
.backup-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.backup-button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:8px 11px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:500 11px var(--sans);cursor:pointer}
.backup-button:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.backup-button.primary{background:var(--green);border-color:var(--green);color:#fff}
.backup-button:disabled{opacity:.6;cursor:wait}
.backup-file-input{display:none}
.backup-help,.backup-message{margin:0;color:var(--muted);font:11px/1.5 var(--sans)}
.backup-message{flex-basis:100%;color:var(--green);overflow-wrap:anywhere}
@media(max-width:700px){.backup-toolbar{align-items:flex-start;padding-top:12px}.backup-help{flex-basis:100%}.backup-actions{width:100%}.backup-button{flex:1}}


/* Home hub and dedicated settings page */
.hub-shell{padding-bottom:8px}
.hub-hero{padding:76px 0 46px;max-width:700px}
.hub-hero h1,.settings-heading h1{font:800 clamp(38px,6vw,58px)/1.08 var(--display);letter-spacing:-2.5px;margin:0;color:var(--ink)}
.hub-hero h1 span{color:var(--green)}
.hub-lead{max-width:570px;color:var(--muted);font:14px/1.8 var(--sans);margin:16px 0 0}
.hub-primary{display:inline-flex;text-decoration:none;margin-top:25px;padding:12px 18px}
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:0 0 64px}
.hub-card{min-height:218px;display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:24px 25px;color:var(--ink);transition:border-color .18s,transform .18s,box-shadow .18s}
.hub-card:hover{border-color:#a9c4b0;transform:translateY(-2px);box-shadow:0 10px 28px #20392a0b}
.hub-card-featured{background:linear-gradient(135deg,#f1f6f2 0%,var(--paper) 72%);border-color:#d6e3d9}
.hub-card-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#e6efe8;color:var(--green);font-size:19px;margin-bottom:20px}
.hub-card-kicker{font:10px var(--mono);letter-spacing:1px;color:var(--muted)}
.hub-card h2{font:700 20px var(--display);letter-spacing:-.6px;margin:9px 0 7px}
.hub-card h2 span{font-size:13px;color:var(--green);margin-left:3px}
.hub-card p{font:12px/1.75 var(--sans);color:var(--muted);margin:0 0 20px;max-width:420px}
.hub-card-link{display:flex;gap:10px;align-items:center;color:var(--green);font:600 11px var(--sans);margin-top:auto}
.settings-heading{padding:52px 0 31px;border-bottom:1px solid var(--line)}
.settings-heading .hub-lead{margin-top:12px}
.settings-section{padding:30px 0 33px;border-bottom:1px solid var(--line)}
.settings-section-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.settings-section-title .eyebrow,.settings-appearance .eyebrow{margin-bottom:8px}
.settings-section-title h2,.settings-appearance h2{font:700 21px var(--display);letter-spacing:-.6px;margin:0}
.settings-count{font:10px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:6px 9px}
.settings-add-form{display:flex;gap:9px;max-width:650px;margin-bottom:14px}
.settings-add-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);font:12px var(--sans);padding:11px 13px;outline-color:var(--green)}
.settings-add-form .add-button{white-space:nowrap}
.settings-subject-list{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.settings-subject-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line)}
.settings-subject-row:last-child{border-bottom:0}
.settings-subject-mark{width:33px;height:33px;flex:none;display:grid;place-items:center;border-radius:7px;background:#edf4ef;color:var(--green)}
.settings-subject-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.settings-subject-info strong{font:600 12px var(--sans);color:var(--ink)}
.settings-subject-info span{font:10px var(--mono);color:var(--muted);overflow-wrap:anywhere}
.settings-open-link{font:11px var(--sans);color:var(--green);text-decoration:none;white-space:nowrap}
.settings-open-link:hover{text-decoration:underline}
.settings-delete-button{border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--muted);font:10px var(--sans);padding:7px 9px;cursor:pointer}
.settings-delete-button:hover{border-color:#d6a6a1;color:#b94e46}
.settings-copy,.settings-muted{font:12px/1.75 var(--sans);color:var(--muted);max-width:650px}
.settings-copy{margin:0 0 16px}
.settings-muted{font-size:10px;margin:12px 0 0}
.settings-backup-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.settings-secondary-button{min-height:38px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--ink);padding:10px 14px;font:600 12px var(--sans);cursor:pointer}
.settings-secondary-button:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.settings-secondary-button:disabled{opacity:.6;cursor:wait}
.settings-message{font:11px/1.7 var(--sans);color:var(--green);overflow-wrap:anywhere;margin:12px 0 0}
.settings-error{color:#b84b43}
.settings-appearance{display:flex;align-items:center;justify-content:space-between;gap:24px}
.settings-appearance .settings-copy{margin:8px 0 0}
.settings-theme-switch{display:flex;gap:5px;padding:4px;border:1px solid var(--line);border-radius:8px}
.settings-theme-switch button{border:0;border-radius:5px;background:transparent;color:var(--muted);font:11px var(--sans);padding:9px 12px;cursor:pointer;white-space:nowrap}
.settings-theme-switch button.selected{background:var(--green);color:white}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[data-theme="dark"] .hub-card-featured{background:linear-gradient(135deg,#202d24 0%,var(--paper) 72%);border-color:#34463a}
[data-theme="dark"] .hub-card-icon,[data-theme="dark"] .settings-subject-mark{background:#29382e;color:#a5ceaf}
[data-theme="dark"] .settings-add-form input{background:#1a211c;border-color:#3b4940}
[data-theme="dark"] .settings-theme-switch button.selected{color:#142019}
@media(max-width:700px){
 .hub-hero{padding:52px 0 33px}
 .hub-grid{gap:10px;padding-bottom:45px}
 .hub-card{padding:18px;min-height:230px}
 .hub-card h2{font-size:17px}
 .settings-heading{padding:40px 0 25px}
 .settings-subject-row{gap:9px;padding:12px 10px;flex-wrap:wrap}
 .settings-subject-info{min-width:calc(100% - 55px);flex:1}
 .settings-open-link{margin-left:42px}
 .settings-appearance{align-items:flex-start;flex-direction:column}
 .topbar-right>.import-guide-link{display:none}
}
@media(max-width:480px){
 .hub-grid{grid-template-columns:1fr}
 .hub-card{min-height:195px}
 .hub-hero h1,.settings-heading h1{letter-spacing:-1.7px}
 .settings-add-form{align-items:stretch;flex-direction:column}
 .settings-add-form .add-button{justify-content:center}
 .settings-backup-actions{align-items:stretch;flex-direction:column}
 .settings-backup-actions>*{justify-content:center;width:100%}
 .settings-open-link{margin-left:42px}
 .settings-delete-button{margin-left:auto}
 .settings-subject-info span{font-size:9px}
 .topbar-right{gap:5px}
}


/* Phase 7: keyboard accessibility, reduced motion, and small-screen usability */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--green, #3e7653);
  outline-offset: 3px;
}

:where(button, input, textarea, select) {
  font: inherit;
}

button:disabled,
button[aria-disabled="true"] {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

.dialog {
  max-height: min(88dvh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-backdrop {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.settings-error,
.form-error,
.page-error,
.settings-message {
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 700px) {
  .topbar {
    height: auto;
    min-height: 76px;
    padding: 14px 0;
    align-items: flex-start;
    gap: 12px;
  }

  .topbar-right {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
  }

  .topbar-right > .status-dot,
  .topbar-right > span:not(.status-dot) {
    display: none;
  }

  .theme-button {
    min-height: 36px;
  }

  .edit-note,
  .delete-note,
  .settings-delete-button,
  .close-button {
    touch-action: manipulation;
  }

  .dialog {
    width: min(100%, 470px);
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-right {
    justify-content: flex-start;
  }

  .topbar-right > .import-guide-link {
    display: inline-flex;
  }

  .topbar-right .theme-button span {
    display: inline;
  }

  .stats {
    height: auto;
    min-height: 68px;
    padding: 12px 0;
    flex-wrap: wrap;
  }

  .stat-spacer {
    display: none;
  }

  .search-wrap {
    order: 5;
    width: 100%;
    flex-basis: 100%;
  }

  .settings-subject-row {
    align-items: flex-start;
  }

  .settings-open-link {
    margin-left: 0;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
  }
}


/* Phase 13: editor usability on small screens */
@media (max-width: 520px) {
  .modal-backdrop { align-items: end; padding: 8px; }
  .dialog { width: 100%; max-height: 92dvh; padding: 22px 16px max(18px, env(safe-area-inset-bottom)); border-radius: 12px 12px 8px 8px; }
  .dialog input, .dialog textarea { font-size: 16px; }
  .dialog textarea { min-height: 34dvh; resize: vertical; }
  .editor-toolbar { flex-wrap: wrap; gap: 7px; margin-top: 2px; }
  .editor-toolbar button { min-height: 38px; min-width: 38px; }
  .editor-toolbar span { margin-left: 0; }
  .editor-toolbar .draft-status { flex-basis: 100%; }
  .editor-tabs button { min-height: 40px; padding-inline: 16px; }
  .history-button, .revision-history button { min-height: 38px; }
  .submit-button { min-height: 44px; width: 100%; justify-content: center; }
}


/* Phase 14: note organization controls */
.note-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.filter-chip, .clear-filters, .tag-filter select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  padding: 6px 10px;
  font: 11px var(--sans);
}
.filter-chip { cursor: pointer; }
.filter-chip.active, .metadata-action.selected {
  color: var(--green);
  border-color: var(--green);
  background: #edf4ef;
}
.clear-filters { cursor: pointer; color: var(--muted); }
.tag-filter { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 11px var(--sans); }
.tag-filter select { padding: 5px 8px; }
.note-badges { display: flex; gap: 7px; color: var(--green); }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tag-chip { display: inline-flex; align-items: center; border-radius: 4px; padding: 3px 6px; background: #edf3ee; color: #456d51; font: 10px var(--mono); }
.metadata-action {
  position: absolute;
  right: 42px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
}
.metadata-action + .metadata-action { right: 76px; }
.note-metadata-fields { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0 18px; }
.note-metadata-fields label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 12px var(--sans); }
.note-metadata-fields input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.field-hint { margin-left: 6px; color: var(--muted); font-size: 10px; font-weight: 400; }
[data-theme="dark"] .filter-chip.active,
[data-theme="dark"] .metadata-action.selected { background: #29382e; }
[data-theme="dark"] .tag-chip { background: #29382e; color: #a5ceaf; }
@media (max-width: 520px) {
  .note-filters { gap: 6px; }
  .filter-chip, .clear-filters, .tag-filter select { min-height: 38px; }
  .metadata-action { bottom: 9px; }
  .note-metadata-fields { gap: 12px; }
}


/* Phase 15: cross-subject search */
.global-search-toggle{min-height:36px;padding:7px 11px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--muted);font:11px var(--sans);cursor:pointer}
.global-search-toggle.active{border-color:var(--green);background:#edf4ef;color:var(--green)}
.note-subject-label{margin-left:8px;color:var(--muted);font:10px var(--sans);overflow-wrap:anywhere}
.search-limit-note{margin:12px 0;color:var(--muted);font:11px var(--sans)}
[data-theme="dark"] .global-search-toggle.active{background:#29382e;color:#a5ceaf}
@media(max-width:650px){.global-search-toggle{min-height:40px}.stats{flex-wrap:wrap}.stats .search-wrap{order:5;flex-basis:100%;width:100%}}


/* Phase 16: note pagination and sorting */
.sort-control{display:flex;align-items:center;gap:8px;color:var(--muted);font:11px var(--sans)}
.sort-control select{max-width:170px;min-height:34px;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:11px var(--sans)}
.pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:24px 0 6px;padding-top:16px;border-top:1px solid var(--line)}
.pagination-summary{color:var(--muted);font:11px var(--sans)}
.pagination-actions{display:flex;align-items:center;gap:12px;color:var(--muted);font:11px var(--sans)}
.pagination-actions button{min-height:36px;padding:7px 11px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:11px var(--sans);cursor:pointer}
.pagination-actions button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:520px){.sort-control{width:100%;justify-content:space-between;margin-top:10px}.sort-control select{flex:1;max-width:none;min-height:40px}.pagination{align-items:stretch}.pagination-summary{text-align:center;width:100%}.pagination-actions{justify-content:space-between;gap:8px}.pagination-actions button{min-height:40px}}


/* Phase 17: wikilink relationships and backlinks */
.note-links-section {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.note-links-section h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font: 600 12px var(--sans);
  letter-spacing: .04em;
}
.note-links-section p {
  margin: 0;
  color: var(--muted);
  font: 12px/1.65 var(--sans);
}
.note-links-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.note-links-section li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  font: 12px var(--sans);
  cursor: pointer;
}
.note-links-section li button span {
  color: var(--green);
  flex: 0 0 auto;
}
.note-links-section li button:hover {
  border-color: var(--green);
}
.note-links-section code {
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--soft);
  font-size: 11px;
}


/* Phase 18: spaced repetition review */
.secondary-study-button {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
}
.review-ratings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.review-ratings button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 58px;
  padding: 8px 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font: 600 12px var(--sans);
  cursor: pointer;
}
.review-ratings button small {
  color: var(--muted);
  font: 10px var(--sans);
  font-weight: 400;
}
.review-ratings .rating-again { border-color: #d88e8e; }
.review-ratings .rating-hard { border-color: #d8b47a; }
.review-ratings .rating-good { border-color: #8eb99a; }
.review-ratings .rating-easy { border-color: #82a9ca; }
.review-ratings button:hover { transform: translateY(-1px); }
@media (max-width: 520px) {
  .review-ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .review-ratings button { min-height: 54px; }
  .intro-actions { flex-wrap: wrap; }
  .intro-actions .study-button { flex: 1 1 100%; }
}


/* Offline status and synchronization */
.sync-status{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font:10px var(--mono);white-space:nowrap}.sync-status-dot{width:6px;height:6px;border-radius:50%;background:#6db58b}.sync-status.offline{border-color:#e6c98d;color:#8b6728}.sync-status.offline .sync-status-dot{background:#d69b38}.sync-status.error{border-color:#e8b6b2;color:#a43c34}.sync-status.error .sync-status-dot{background:#c54e46}@media(max-width:760px){.sync-status{font-size:9px;padding:4px 6px}}

.sync-status.error{max-width:180px;overflow:hidden;text-overflow:ellipsis}