:root{--bg:#f5f6f4;--surface:#fff;--ink:#172c2a;--muted:#586c68;--line:#d8e1dd;--accent:#126b59;--accent-hover:#0a5445;--tint:#eaf4ed;--blue:#276da5;--warn:#81510c;--warn-bg:#fff7e7;--loss:#a54146;--radius:16px;--shadow:0 8px 32px #162c2910;--focus:#387cba;color-scheme:light;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);font-size:16px}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,summary,select,label:has(input[type=radio]){cursor:pointer;touch-action:manipulation}button{min-height:44px;border:0;border-radius:9px;padding:10px 16px;transition:background .18s,color .18s;white-space:normal}button:disabled{opacity:.55;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button:active{filter:brightness(.94)}svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,p{margin:0}h1{font-size:clamp(28px,3.5vw,40px);line-height:1.3;letter-spacing:-1.2px;font-weight:750}h2{font-size:25px;line-height:1.5}h3{font-size:16px}strong{font-weight:650}[hidden]{display:none!important}.skip{position:absolute;top:-100px;left:15px;background:var(--surface);padding:12px;z-index:5}.skip:focus{top:10px}.site-header{max-width:1300px;margin:auto;padding:24px 40px;display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.brand strong{font-size:22px;letter-spacing:1px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ink);color:white}.brand-mark svg{width:23px;height:23px}.version{font-size:10px;letter-spacing:2px;color:var(--muted);margin-left:7px}.privacy-badge{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--accent);font-weight:600}.privacy-badge>span{width:6px;height:6px;background:var(--accent);border-radius:50%}.container{max-width:1220px;margin:auto;padding:40px 32px 0}.intro{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:700;margin-bottom:10px}.subtitle{color:var(--muted);font-size:14px;line-height:1.8;margin-top:13px}.auth-card{border-left:1px solid var(--line);padding-left:26px;width:280px;flex-shrink:0;font-size:13px}.auth-heading{display:flex;align-items:center;gap:8px}.auth-dot{width:7px;height:7px;border-radius:50%;background:#82908d}.auth-dot.readable{background:#bc7d1e}.auth-dot.valid{background:var(--accent)}.auth-dot.error{background:var(--loss)}.auth-card p{font-size:12px;line-height:1.7;margin-top:5px;color:var(--muted)}.text-button{background:transparent;color:var(--accent);padding-left:0;padding-right:0;text-align:left;font-size:13px;min-height:44px}.text-button:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:4px}.query-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);padding:24px 28px}.query-top{display:grid;grid-template-columns:minmax(200px,1fr) 150px 190px;gap:20px;align-items:start}.field label{display:block;font-size:13px;font-weight:650;margin-bottom:9px}.field input{width:100%;height:50px;border:1px solid #bdcdc5;background:#fcfdfc;border-radius:8px;padding:10px 13px;color:var(--ink)}.id-field input{font-size:19px;letter-spacing:.25px}.field-help{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}.primary{display:flex;justify-content:center;align-items:center;gap:9px;background:var(--accent);color:white;font-weight:650;min-height:50px;margin-top:27px}.primary svg{width:20px;height:20px}.primary:hover{background:var(--accent-hover)}.query-bottom{display:flex;align-items:center;gap:24px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}.modes{padding:0;border:0;margin:0;display:flex;align-items:center;gap:15px}.modes legend{float:left;margin-right:15px;font-size:13px;line-height:44px}.segmented{display:flex;gap:4px;padding:4px;border-radius:10px;background:#f0f3f0}.segmented label{position:relative;min-width:76px}.segmented input{position:absolute;opacity:0;width:1px;height:1px}.segmented span{display:flex;align-items:center;justify-content:center;min-height:38px;padding:7px 18px;border-radius:7px;font-size:14px;color:var(--muted)}.segmented input:checked+span{background:white;box-shadow:0 1px 5px #152f2518;color:var(--accent);font-weight:700}.segmented input:focus-visible+span{outline:3px solid var(--focus);outline-offset:1px}.concurrency{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}.concurrency select{min-width:65px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:8px;color:var(--ink)}.quiet{background:transparent;color:var(--muted);font-size:13px;padding:8px 12px}.quiet:hover{background:#eaf0eb;color:var(--ink)}#clear{margin-left:auto}.error-message{background:#fff1f0;color:#8c2930;border:1px solid #ecc4c5;padding:13px 16px;border-radius:8px;margin-top:18px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}.secondary{background:var(--surface);border:1px solid #bbcfc4;color:var(--accent);font-size:13px;font-weight:600}.secondary:hover{background:var(--tint)}.loading-panel{display:flex;align-items:center;gap:17px;background:var(--tint);padding:24px;border-radius:var(--radius);margin:25px 0}.loading-panel p{font-size:13px;color:var(--muted);margin-top:5px}.loading-panel button{margin-left:auto}.spinner{width:25px;height:25px;border:3px solid #badaca;border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{max-width:620px;margin:55px auto 70px;text-align:center;padding:0 15px}.empty-mark{margin:0 auto 20px;background:#e8ede7;border:1px solid #d9e2d9;color:#6b8575;display:grid;place-items:center;width:82px;height:82px;border-radius:23px;transform:rotate(-4deg)}.empty-mark svg{width:43px;height:43px;transform:rotate(4deg)}.empty-state h2{font-size:19px}.empty-state>p{font-size:14px;line-height:1.9;color:var(--muted);margin:12px auto 20px;max-width:440px}.empty-notes{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}.empty-notes span:before{content:"·";margin-right:7px;color:var(--accent);font-weight:800}.result-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:34px 0 21px}.result-heading>div{min-width:0}.result-heading h2{overflow-wrap:anywhere}.result-heading button{flex-shrink:0}.result-meta{font-size:12px;color:var(--muted);line-height:1.9;margin-top:4px}.warning{background:var(--warn-bg);color:var(--warn);padding:15px 20px;line-height:1.8;font-size:13px;border-radius:10px;border:1px solid #e9d8b8;margin-bottom:20px}.stats{display:grid;grid-template-columns:1fr 1fr 1.5fr;border:1px solid var(--line);border-radius:13px;background:var(--surface);overflow:hidden}.stats>div{padding:22px 28px;border-right:1px solid var(--line)}.stats>div:last-child{border-right:none}.stats span{display:block;font-size:12px;color:var(--muted)}.stats strong{display:block;font-size:34px;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin:7px 0}.stats small{color:var(--muted);font-size:12px}.rank-stat strong{font-size:23px;margin:13px 0}.class-section{margin-top:25px}.class-section h3 span{font-weight:400;font-size:12px;margin-left:10px;color:var(--muted)}.class-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.class-filters button{border:1px solid var(--line);background:var(--surface);font-size:12px;color:var(--muted);padding:9px 14px;min-height:44px}.class-filters button[aria-pressed=true]{background:var(--tint);border-color:#93ba9f;color:var(--accent);font-weight:650}.match-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;margin-bottom:14px}.match-toolbar h3 span{font-size:12px;color:var(--muted);font-weight:400;margin-left:8px}.match-toolbar>div{display:flex;gap:8px}.matches{display:grid;gap:14px}.match{background:var(--surface);border:1px solid var(--line);border-radius:13px;overflow:hidden}.match-header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:15px 20px;border-bottom:1px solid var(--line);background:#fdfefd;font-size:13px}.outcome{background:var(--tint);color:var(--accent);padding:4px 9px;border-radius:5px;font-weight:650;font-size:12px;flex-shrink:0}.outcome.loss{background:#fbeeee;color:var(--loss)}.outcome.unknown{background:#edf0ef;color:var(--muted)}.match-header time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}.opponent-name{overflow-wrap:anywhere;min-width:0}.match-rank{font-size:12px;color:var(--muted);margin-left:auto;line-height:1.7;overflow-wrap:anywhere}.decks{display:grid;grid-template-columns:1fr 1fr}.deck{min-width:0;padding:16px 20px}.deck+.deck{border-left:1px solid var(--line)}.deck-title-row{display:flex;gap:10px;align-items:center;justify-content:space-between}.deck-label{font-size:10px;color:var(--muted);letter-spacing:1px}.deck-name{font-size:14px;font-weight:650;line-height:1.65;overflow-wrap:anywhere}.deck-class{font-size:12px;color:var(--accent);margin-top:4px}.copy-button{font-size:12px;background:#f0f5f1;color:var(--accent);padding:8px 11px;flex-shrink:0}.copy-button:disabled{cursor:not-allowed}.card-details>summary,.code-details>summary{font-size:12px;color:var(--muted);min-height:44px;padding:12px 0;line-height:20px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 9px;padding:2px 0 8px}.card-row{display:flex;align-items:center;gap:7px;min-width:0;min-height:33px;background:#f3f5f4;border-radius:5px;padding:4px 7px 4px 5px;font-size:12px}.mana{font-variant-numeric:tabular-nums;flex:0 0 24px;height:25px;position:relative;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;isolation:isolate}.mana:before{content:"";position:absolute;inset:3px;background:var(--blue);border:1px solid #6ba1d2;transform:rotate(45deg);border-radius:3px;z-index:-1}.card-row .card-name{overflow-wrap:anywhere;flex:1;min-width:0;line-height:1.45}.quantity{font-size:11px;flex-shrink:0;color:var(--muted)}.no-cards{font-size:12px;color:var(--muted);line-height:1.8;padding-bottom:12px}.code-details code{font-size:11px;overflow-wrap:anywhere;white-space:pre-wrap;display:block;background:#f1f4f1;padding:12px;border-radius:5px}.more-row{display:flex;justify-content:center;align-items:center;gap:14px;margin:25px 0;flex-wrap:wrap}.more-row span{font-size:12px;color:var(--muted)}footer{display:flex;align-items:center;gap:20px;justify-content:space-between;border-top:1px solid var(--line);margin-top:34px;padding:17px 0 23px}footer p{font-size:11px;color:var(--muted);line-height:1.8;max-width:780px}footer button{flex-shrink:0}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:20;background:var(--ink);color:white;padding:12px 20px;border-radius:10px;font-size:13px;box-shadow:var(--shadow);max-width:calc(100vw - 32px);overflow-wrap:anywhere}
@media(max-width:900px){.container{padding:30px 24px 0}.site-header{padding:20px 24px}.auth-card{width:235px;padding-left:20px}.query-top{grid-template-columns:minmax(0,1fr) 120px 165px;gap:14px}.query-panel{padding:22px}.query-bottom{gap:15px}.segmented label{min-width:66px}.segmented span{padding:7px 12px}.deck{padding:15px}.cards{grid-template-columns:1fr}.stats>div{padding:20px}.match-rank{width:100%;margin-left:0}}
@media(max-width:650px){.site-header{padding:16px}.brand strong{font-size:19px}.brand{gap:9px}.version{display:none}.privacy-badge{font-size:11px}.container{padding:25px 16px 0}.intro{display:block;margin-bottom:22px}.subtitle{font-size:13px;line-height:1.8}.auth-card{width:100%;border-left:0;border-top:1px solid var(--line);margin-top:19px;padding:15px 0 0;display:grid;grid-template-columns:1fr auto;gap:0 14px}.auth-card p{grid-column:1;max-width:320px}.auth-card button{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:12px}.query-panel{padding:18px 16px}.query-top{grid-template-columns:minmax(0,1fr) 90px;gap:12px}.id-field input{font-size:16px}.field input{padding:9px 10px}.count-field input{font-size:16px}.field-help{font-size:11px}.primary{grid-column:1 / -1;margin-top:4px;font-size:15px}.query-bottom{gap:12px;margin-top:16px;padding-top:14px}.modes{width:100%;justify-content:space-between;gap:8px}.modes legend{font-size:12px;margin-right:6px}.segmented{flex:1;justify-content:space-between}.segmented label{min-width:0;flex:1}.segmented span{min-height:44px}.concurrency{font-size:12px}.concurrency select{font-size:16px}.empty-state{margin:36px auto 42px;padding:0}.empty-state>p{font-size:13px}.empty-notes{gap:9px;font-size:10px}.empty-mark{width:68px;height:68px}.loading-panel{padding:20px 14px;gap:10px;flex-wrap:wrap}.loading-panel strong{font-size:14px}.loading-panel p{font-size:12px}.loading-panel button{margin-left:auto}.result-heading{align-items:flex-start;margin-top:25px;gap:12px}.result-heading h2{font-size:22px}.result-heading button{font-size:11px;padding:8px;max-width:118px}.stats{grid-template-columns:1fr 1fr}.stats>div{padding:17px}.stats>div:nth-child(2){border-right:none}.stats .rank-stat{grid-column:1/-1;border-top:1px solid var(--line);padding:15px 17px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.rank-stat strong{font-size:17px;margin:0}.rank-stat small{font-size:10px;flex-basis:100%}.stats strong{font-size:29px}.stats .rank-stat strong{font-size:17px}.class-section h3 span{display:block;margin:6px 0 0}.match-toolbar{display:block}.match-toolbar>div{margin-top:10px;justify-content:space-between}.match-toolbar .quiet{font-size:12px;padding:8px 9px}.match-header{padding:12px;gap:9px;font-size:12px}.match-header time{font-size:11px}.opponent-name{flex-basis:100%;font-size:13px}.match-rank{font-size:11px}.decks{grid-template-columns:1fr}.deck+.deck{border-left:0;border-top:1px solid var(--line)}.deck{padding:13px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.card-row{font-size:12px;padding-right:5px;gap:5px}.deck-name{font-size:13px}.mana{flex-basis:23px}.deck-class{font-size:11px}.card-details>summary{font-size:12px}.class-filters{gap:6px}.class-filters button{padding:8px 11px}footer{gap:14px;align-items:flex-start}footer p{font-size:10px}footer button{font-size:12px}.toast{bottom:max(15px,env(safe-area-inset-bottom))}}
.class-decks{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}#deck-count{font-size:14px;line-height:1.65;margin:0;overflow-wrap:anywhere}#deck-filter-note{font-size:12px;line-height:1.8;color:var(--muted);margin-top:6px}.deck-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:8px;margin-top:12px}.deck-filters button{position:relative;min-width:0;min-height:44px;line-height:1.65;text-align:left;overflow-wrap:anywhere;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:12px;padding:10px 12px 10px 30px}.deck-filters button:hover{background:var(--tint)}.deck-filters button[aria-pressed=true]{background:var(--tint);border-color:var(--accent);color:var(--accent);font-weight:650}.deck-filters button[aria-pressed=true]:before{content:"✓";position:absolute;left:10px;top:10px}.deck-filters button[data-kind=unknown]{color:var(--muted)}
.reader-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}.reader-actions .field-help{flex:1 1 240px;margin-top:0}.reader-status{font-size:12px;color:var(--accent);line-height:1.8;overflow-wrap:anywhere}.reader-status:not(:empty){margin-top:10px}.reader-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.reader-choices button{max-width:100%;text-align:left;overflow-wrap:anywhere;line-height:1.7}
@media(max-width:650px){.reader-actions .field-help{flex-basis:100%;margin-top:2px}.reader-actions>button{flex:1 1 110px}.reader-choices button{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.update-notice{margin-block:16px;overflow-wrap:anywhere}.update-notice p{margin:0;line-height:1.7}.update-notice button{margin-top:12px;min-height:44px;white-space:normal;text-align:left}#software-update button{min-height:44px;white-space:normal}
.job-settings input{width:140px;max-width:100%;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--surface);color:var(--ink);font-size:14px}.job-settings input[aria-invalid=true],#rank-days[aria-invalid=true]{border-color:var(--loss)}#rank-days{width:110px}
.view-nav{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}.view-nav button{background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:14px}.view-nav button[aria-pressed=true]{color:var(--accent);background:var(--tint);border-color:var(--accent);font-weight:650}.time-panel{border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:20px;background:var(--surface)}.time-controls,.job-settings{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.time-controls label,.job-settings label,.rank-heading>label{display:flex;align-items:center;gap:9px;font-size:13px;min-width:0}.time-controls input,.time-controls select,.job-settings select,.rank-heading select{min-height:44px;max-width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--surface);color:var(--ink);font-size:14px}.id-field{position:relative;min-width:0}.account-options{position:absolute;left:0;right:0;top:78px;z-index:10;max-height:310px;overflow-y:auto;background:var(--surface);border:1px solid #abc9b9;border-radius:10px;box-shadow:0 8px 24px #172c2a20}.account-options [role=option]{display:flex;flex-direction:column;gap:5px;padding:12px 14px;min-height:56px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.account-options [role=option]:last-child{border-bottom:0}.account-options [role=option]:hover,.account-options [aria-selected=true]{background:var(--tint)}.account-options span{font-size:12px;color:var(--muted)}#account-choice-status:empty{display:none}.rank-heading{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:16px}.rank-heading>div{flex:1;min-width:220px}.rank-list{display:grid;gap:10px;margin-top:16px}.rank-row{display:grid;grid-template-columns:105px minmax(0,1fr) auto;align-items:center;gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 20px;font-size:14px;overflow-wrap:anywhere}.rank-row>strong{color:var(--accent)}.rank-row>span{font-size:12px;color:var(--muted)}.job-settings{margin:16px 0}.job-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;margin-top:20px}.job-card>p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:10px;overflow-wrap:anywhere}.job-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.job-card p[role=status]{white-space:pre-line;color:var(--ink);background:var(--bg);padding:12px;border-radius:8px;font-variant-numeric:tabular-nums}
@media(max-width:650px){.job-settings input{width:100%;font-size:16px}}
@media(max-width:650px){.view-nav{gap:6px}.view-nav button{flex:1;font-size:13px;padding:10px 8px}.time-panel{padding:14px}.time-controls{width:100%;align-items:stretch}.time-controls label{flex-wrap:wrap}.time-controls input{width:100%;font-size:16px}.time-controls>div>label{width:100%}.rank-row{grid-template-columns:80px minmax(0,1fr);gap:10px;padding:14px;font-size:13px}.rank-row>button,.rank-row>span{grid-column:2;justify-self:start}.rank-heading>div{min-width:100%}.job-card{padding:16px}.job-settings label{flex:1 1 130px;flex-wrap:wrap}.job-settings select{width:100%}.job-actions .secondary{flex-basis:100%}.account-options{top:78px}}
[data-access-role="visitor"] .intro { grid-template-columns: 1fr; }
.reader-actions .new-query-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-size: 13px; text-align: center; }
.reader-actions #reader-auto[aria-pressed=true] { background: var(--tint); border-color: var(--accent); color: var(--accent); }
#parallel-help { margin-top: 12px; line-height: 1.8; }
@media(max-width:650px) { .reader-actions .new-query-link { flex: 1 1 110px; } }
.access-bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; align-items: center; }
.access-bar > div { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.access-bar > span { font-size: 13px; font-weight: 600; }
/* Visitor search shares the result renderer, with a compact search-only entry. */
[data-access-role="visitor"] .site-header { max-width: 1056px; padding: 18px 24px; }
[data-access-role="visitor"] .container:not(.access-container) { max-width: 1056px; padding: 20px 24px 40px; }
[data-access-role="visitor"] .access-bar { justify-content: flex-end; margin-bottom: 12px; }
[data-access-role="visitor"] .access-bar a { display: inline-flex; align-items: center; }
[data-access-role="visitor"] .intro { margin-bottom: 20px; }
[data-access-role="visitor"] h1 { font-size: clamp(24px, 3vw, 30px); }
[data-access-role="visitor"] #empty { margin: 0; padding: 0; }
[data-access-role="visitor"] .query-top { grid-template-columns: minmax(0, 1fr) 120px 180px; }
[data-access-role="visitor"] .query-bottom { gap: 12px; }
@media(max-width:650px) {
  [data-access-role="visitor"] .site-header { padding: 16px; }
  [data-access-role="visitor"] .container:not(.access-container) { padding: 12px 16px 28px; }
  [data-access-role="visitor"] .query-top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  [data-access-role="visitor"] .query-top .primary { margin-top: 0; width: 100%; }
  [data-access-role="visitor"] .query-bottom .modes { width: 100%; }
  [data-access-role="visitor"] .query-bottom .segmented { flex: 1; }
  [data-access-role="visitor"] .segmented label { flex: 1; min-width: 0; }
  [data-access-role="visitor"] .segmented span { padding: 7px 10px; }
}
.login-container { max-width: 620px; padding-top: 48px; }
.login-container .query-panel { margin-top: 24px; }
.login-container h1 { font-size: 30px; }
.login-container form { display: grid; gap: 12px; margin-top: 24px; }
.login-container input { width: 100%; min-height: 46px; }
.login-container .primary { min-height: 46px; }

/* Keep usage share distinct from win rate, including on small screens. */
.class-filters button { min-width: 0; max-width: 100%; text-align: left; line-height: 1.65; overflow-wrap: anywhere; }
.filter-record { display: block; margin-top: 3px; font-size: inherit; font-weight: 400; }
.deck-title-row > div { min-width: 0; }
.deck-record { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
/* Administrator failure history shares the existing light/green task style. */
#failure-history { min-width: 0; }
#failure-history summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 700; }
.failure-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.failure-controls label { display: grid; gap: 6px; min-width: 0; flex: 1 1 130px; }
.failure-controls label:first-child { flex-basis: 240px; }
.failure-controls input, .failure-controls select, .failure-controls button, .failure-pagination button { min-height: 44px; max-width: 100%; }
.failure-controls input, .failure-controls select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--surface); color: var(--ink); }
.failure-list article { padding: 14px 0; border-bottom: 1px solid #dce8df; min-width: 0; overflow-wrap: anywhere; }
.failure-list h4 { margin: 0 0 8px; }
.failure-list p { margin: 5px 0; }
.failure-pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
#failure-history summary:focus-visible { outline: 3px solid #2d7b55; outline-offset: 3px; }

/* Card details stay textual, with accessible click/tap targets. */
.cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
button.card-row { width: 100%; min-height: 44px; border: 1px solid transparent; text-align: left; color: var(--ink); cursor: pointer; touch-action: manipulation; }
button.card-row:hover { background: var(--tint); border-color: var(--line); }
button.card-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-info-dialog { position: fixed; z-index: 40; width: min(380px,calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); overflow-y: auto; box-shadow: 0 8px 28px rgb(15 30 25 / 22%); overflow-wrap: anywhere; }
.card-info-dialog[hidden] { display: none; }
.card-info-heading { display: flex; align-items: start; gap: 16px; justify-content: space-between; }
.card-info-heading h2 { min-width: 0; font-size: 23px; line-height: 1.5; }
.card-info-heading button { min-height: 44px; flex-shrink: 0; }
.card-info-facts { color: var(--accent); font-size: 13px; line-height: 1.9; margin-top: 12px; }
.card-info-effect { margin-top: 18px; padding: 16px; border-radius: 9px; background: var(--bg); font-size: 16px; line-height: 1.9; white-space: pre-wrap; }
.card-info-effect:empty { display: none; }
.card-info-flavor { font-size: 13px; line-height: 1.8; margin-top: 14px; color: var(--muted); white-space: pre-wrap; }
.card-info-status { font-size: 14px; line-height: 1.8; margin-top: 14px; }
.card-info-dialog .field-help { margin-top: 12px; font-size: 12px; line-height: 1.8; }
@media(max-width:650px) { .card-info-dialog { padding: 18px; }.card-info-heading h2 { font-size: 21px; } }
/* Lazy full-card render: image geometry never follows untrusted natural sizes. */
.card-info-image-frame { width: 100%; height: min(460px, 57dvh); aspect-ratio: 512 / 724; margin: 8px auto 0; display: grid; place-items: center; }
.card-info-image { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.card-info-dialog .card-info-status:empty { display: none; }
.modes{max-width:100%;min-width:0;flex-wrap:wrap}
.modes .segmented{min-width:0;flex-wrap:wrap}
.modes .segmented span{min-height:44px}
@media(max-width:650px){.modes{display:block}.modes legend{float:none;margin:0;line-height:28px}.modes .segmented{width:100%;justify-content:flex-start}.modes .segmented label{flex:1 1 64px;min-width:64px}.modes .segmented span{padding:7px 8px}}
body[data-access-role="visitor"] .version{display:inline-block}body[data-access-role="visitor"] .intro .empty-notes{justify-content:flex-start;margin-top:14px}body[data-access-role="visitor"] .access-container>.intro{margin-top:24px}.match-toolbar>div{flex-wrap:wrap}

/* Theme-independent controls and layout fixes; the original light style stays default. */
.site-header { flex-wrap: wrap; }
.brand { min-width: 0; }
.brand-description { display: block; font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: .08em; }
.theme-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; min-width: 0; max-width: 100%; }
.theme-controls label { color: var(--muted); font-size: 12px; }
.theme-controls select { font: inherit; font-size: 14px; min-height: 44px; max-width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.theme-toolbar { margin-bottom: 20px; }
.query-caption { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 20px; font-size: 14px; font-weight: 650; }
.query-caption > span:last-child { font-size: 12px; font-weight: 400; color: var(--muted); }
.query-notes { margin-top: 14px; border-top: 1px solid var(--line); }
.query-notes > summary { min-height: 44px; padding: 12px 0; color: var(--muted); font-size: 12px; }
.query-notes .field-help { margin: 6px 0 10px; }
.account-input { position: relative; min-width: 0; }
.account-input .account-options { top: calc(100% + 6px); }
.field-help, .reader-status, .empty-notes, .version, .deck-label { font-size: 12px; }
.segmented span { min-height: 44px; }
@media (max-width: 650px) {
  .site-header .theme-controls { flex-basis: 100%; }
  .theme-controls select { font-size: 16px; }
}

/* Tavern theme: shared by query, account and administration pages. Local assets only. */
:root[data-theme="dark"] {
  --bg: #101419;
  --surface: #191f27;
  --surface-raised: #222a34;
  --field: #131920;
  --ink: #eff1f4;
  --muted: #aab4c1;
  --line: #36414e;
  --accent: #e8bd79;
  --accent-hover: #f6d297;
  --on-accent: #231b10;
  --tint: #312a21;
  --success: #94dfb3;
  --success-bg: #1c342b;
  --loss: #ffb1b8;
  --loss-bg: #39252c;
  --warn: #f1ca8c;
  --warn-bg: #332b20;
  --radius: 18px;
  --focus: #88c8ff;
  --shadow: 0 12px 36px rgb(0 0 0 / 18%);
  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
:where(html[data-theme="dark"]) body { min-height: 100dvh; line-height: 1.5; background: radial-gradient(ellipse at 90% 0, #30271c 0, transparent 36rem), var(--bg); }
:where(html[data-theme="dark"]) ::selection { background: var(--accent); color: var(--on-accent); }
:where(html[data-theme="dark"]) a { color: var(--accent); text-underline-offset: 4px; }
:where(html[data-theme="dark"]) button, :where(html[data-theme="dark"]) a, :where(html[data-theme="dark"]) input, :where(html[data-theme="dark"]) select, :where(html[data-theme="dark"]) textarea, :where(html[data-theme="dark"]) summary { -webkit-tap-highlight-color: transparent; }
:where(html[data-theme="dark"]) button { border-radius: 10px; transition: background-color .18s, border-color .18s, color .18s; }
:where(html[data-theme="dark"]) button:disabled { cursor: not-allowed; }
:where(html[data-theme="dark"]) input:not([type=checkbox]):not([type=radio]), :where(html[data-theme="dark"]) select, :where(html[data-theme="dark"]) textarea {
  min-width: 0; max-width: 100%; min-height: 48px; padding: 11px 13px;
  color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 10px;
  accent-color: var(--accent);
}
:where(html[data-theme="dark"]) input::placeholder, :where(html[data-theme="dark"]) textarea::placeholder { color: var(--muted); opacity: .9; }
:where(html[data-theme="dark"]) input:hover, :where(html[data-theme="dark"]) select:hover, :where(html[data-theme="dark"]) textarea:hover { border-color: #687483; }
:where(html[data-theme="dark"]) input:focus, :where(html[data-theme="dark"]) select:focus, :where(html[data-theme="dark"]) textarea:focus { border-color: var(--accent); }
:where(html[data-theme="dark"]) input[type=checkbox] { accent-color: var(--accent); }
:where(html[data-theme="dark"]) h1 { letter-spacing: -.04em; font-weight: 750; font-size: clamp(30px, 3.4vw, 44px); }
:where(html[data-theme="dark"]) h2 { letter-spacing: -.02em; }
:where(html[data-theme="dark"]) .site-header, :where(html[data-theme="dark"]) body[data-access-role="visitor"] .site-header {
  max-width: 1280px; padding: 23px 32px; gap: 24px; border-bottom-color: var(--line);
}
:where(html[data-theme="dark"]) .brand { gap: 14px; min-width: 0; }
:where(html[data-theme="dark"]) .brand-mark { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid #8c7049; border-radius: 13px; color: var(--accent); background: var(--tint); }
:where(html[data-theme="dark"]) .brand strong { font-size: 18px; letter-spacing: .04em; line-height: 1.45; }
:where(html[data-theme="dark"]) .brand-description { display: block; font-size: 12px; letter-spacing: .08em; color: var(--muted); font-weight: 400; }
:where(html[data-theme="dark"]) .version { font-size: 12px; letter-spacing: .14em; padding-left: 16px; border-left: 1px solid var(--line); }
:where(html[data-theme="dark"]) .privacy-badge { color: var(--muted); font-size: 12px; }
:where(html[data-theme="dark"]) .privacy-badge > span { background: var(--success); }
:where(html[data-theme="dark"]) .container, :where(html[data-theme="dark"]) body[data-access-role="visitor"] .container:not(.access-container) { max-width: 1200px; padding: 24px 32px 32px; }
:where(html[data-theme="dark"]) .access-bar { margin-bottom: 26px; gap: 8px 24px; }
:where(html[data-theme="dark"]) .access-bar > span { font-size: 12px; color: var(--muted); letter-spacing: .06em; }
:where(html[data-theme="dark"]) .access-bar > div { gap: 8px 18px; }
:where(html[data-theme="dark"]) .access-bar .text-button { color: var(--muted); font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; }
:where(html[data-theme="dark"]) .access-bar .text-button:hover { color: var(--accent); }
:where(html[data-theme="dark"]) .intro { align-items: center; gap: 40px; margin: 8px 0 32px; }
:where(html[data-theme="dark"]) .intro > div:first-child { min-width: 0; }
:where(html[data-theme="dark"]) .eyebrow { font-size: 12px; letter-spacing: .15em; color: var(--accent); margin-bottom: 12px; }
:where(html[data-theme="dark"]) .subtitle { font-size: 14px; line-height: 1.85; margin-top: 14px; max-width: 670px; }
:where(html[data-theme="dark"]) .auth-card { width: 286px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
:where(html[data-theme="dark"]) .auth-card p { font-size: 12px; }
:where(html[data-theme="dark"]) .auth-card .text-button { min-height: 44px; }
:where(html[data-theme="dark"]) .auth-dot.valid { background: var(--success); }
:where(html[data-theme="dark"]) .view-nav { gap: 8px; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
:where(html[data-theme="dark"]) .view-nav button { padding: 10px 20px; border-color: transparent; background: transparent; font-size: 14px; }
:where(html[data-theme="dark"]) .view-nav button:hover { color: var(--ink); background: var(--surface-raised); }
:where(html[data-theme="dark"]) .view-nav button[aria-pressed=true] { border-color: #85704e; background: var(--tint); color: var(--accent); }
:where(html[data-theme="dark"]) .time-panel { padding: 14px 20px; background: var(--field); border-radius: 12px; }
:where(html[data-theme="dark"]) .time-panel .field-help { margin-top: 10px; }
:where(html[data-theme="dark"]) .query-panel { padding: 26px 28px; border-color: #46505c; box-shadow: var(--shadow); }
:where(html[data-theme="dark"]) #query-view > .query-panel { border-top: 2px solid var(--accent); }
:where(html[data-theme="dark"]) .query-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 14px; font-weight: 650; }
:where(html[data-theme="dark"]) .query-caption > span:last-child { color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: .1em; }
:where(html[data-theme="dark"]) .query-top { grid-template-columns: minmax(0, 1fr) 120px 190px; gap: 18px; }
:where(html[data-theme="dark"]) .field input { background: var(--field); border-color: var(--line); height: 52px; }
:where(html[data-theme="dark"]) .field label { color: var(--muted); margin-bottom: 10px; }
:where(html[data-theme="dark"]) .id-field input { font-size: 18px; }
:where(html[data-theme="dark"]) .field-help, :where(html[data-theme="dark"]) .reader-status, :where(html[data-theme="dark"]) .empty-notes { font-size: 12px; line-height: 1.8; }
:where(html[data-theme="dark"]) .primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 12px rgb(0 0 0 / 14%); min-height: 52px; margin-top: 29px; }
:where(html[data-theme="dark"]) .primary:hover { background: var(--accent-hover); }
:where(html[data-theme="dark"]) .secondary { color: var(--ink); border-color: #566373; background: var(--surface-raised); }
:where(html[data-theme="dark"]) .secondary:hover { color: var(--accent); border-color: var(--accent); background: var(--tint); }
:where(html[data-theme="dark"]) .quiet { color: var(--muted); }
:where(html[data-theme="dark"]) .quiet:hover { color: var(--ink); background: var(--surface-raised); }
:where(html[data-theme="dark"]) .query-bottom { margin-top: 20px; padding-top: 18px; gap: 18px; }
:where(html[data-theme="dark"]) .modes legend, :where(html[data-theme="dark"]) .concurrency { color: var(--muted); }
:where(html[data-theme="dark"]) .segmented { background: var(--field); border: 1px solid var(--line); padding: 4px; }
:where(html[data-theme="dark"]) .segmented input:checked + span { color: var(--accent); background: var(--surface-raised); box-shadow: 0 1px 3px #0004; }
:where(html[data-theme="dark"]) .segmented label:hover span { color: var(--ink); }
:where(html[data-theme="dark"]) .segmented span { min-height: 44px; }
:where(html[data-theme="dark"]) .reader-actions { gap: 10px; padding-top: 20px; margin-top: 20px; }
:where(html[data-theme="dark"]) .reader-actions > button, :where(html[data-theme="dark"]) .reader-actions .new-query-link { min-height: 46px; }
:where(html[data-theme="dark"]) .reader-actions #reader-auto { color: var(--accent); border-color: #85704e; }
:where(html[data-theme="dark"]) .reader-actions #reader-auto[aria-pressed=true] { color: var(--success); border-color: var(--success); background: var(--success-bg); }
:where(html[data-theme="dark"]) .reader-status { color: var(--muted); }
:where(html[data-theme="dark"]) .query-notes { margin-top: 14px; border-top: 1px solid var(--line); }
:where(html[data-theme="dark"]) .query-notes > summary { min-height: 44px; padding: 12px 0; font-size: 12px; color: var(--muted); }
:where(html[data-theme="dark"]) .query-notes[open] { padding-bottom: 4px; }
:where(html[data-theme="dark"]) .query-notes .field-help { margin: 6px 0 10px; }
:where(html[data-theme="dark"]) .error-message { background: var(--loss-bg); color: var(--loss); border-color: #77505a; }
:where(html[data-theme="dark"]) .warning { border-color: #7d6542; }
:where(html[data-theme="dark"]) .loading-panel { background: var(--surface); border: 1px solid #85704e; }
:where(html[data-theme="dark"]) .spinner { border-color: var(--line); border-top-color: var(--accent); }
:where(html[data-theme="dark"]) .empty-state { margin: 40px auto 48px; }
:where(html[data-theme="dark"]) .empty-mark { background: var(--surface); border-color: var(--line); color: var(--accent); width: 68px; height: 68px; border-radius: 16px; transform: none; }
:where(html[data-theme="dark"]) .empty-mark svg { transform: none; width: 34px; height: 34px; }
:where(html[data-theme="dark"]) .empty-state h2 { font-size: 18px; }
:where(html[data-theme="dark"]) .empty-notes { gap: 12px 20px; }
:where(html[data-theme="dark"]) .result-heading { margin-top: 36px; }
:where(html[data-theme="dark"]) .stats { background: var(--surface); border-radius: 16px; }
:where(html[data-theme="dark"]) .stats > div { padding: 24px 28px; }
:where(html[data-theme="dark"]) .stats strong { color: var(--ink); font-size: 36px; font-weight: 650; }
:where(html[data-theme="dark"]) .stats #stat-win-rate { color: var(--success); }
:where(html[data-theme="dark"]) .stats .rank-stat strong { color: var(--accent); font-size: 24px; }
:where(html[data-theme="dark"]) .class-filters button { border-color: var(--line); background: var(--surface); border-radius: 10px; padding: 10px 16px; }
:where(html[data-theme="dark"]) .class-filters button:hover { border-color: var(--accent); }
:where(html[data-theme="dark"]) .class-filters button[aria-pressed=true] { border-color: #85704e; }
:where(html[data-theme="dark"]) .match-toolbar .quiet { background: var(--surface); border: 1px solid var(--line); }
:where(html[data-theme="dark"]) .matches { gap: 18px; }
:where(html[data-theme="dark"]) .match { border-radius: 16px; border-color: var(--line); }
:where(html[data-theme="dark"]) .match-header { background: var(--field); padding: 16px 20px; }
:where(html[data-theme="dark"]) .outcome { color: var(--success); background: var(--success-bg); padding: 5px 10px; }
:where(html[data-theme="dark"]) .outcome.loss { color: var(--loss); background: var(--loss-bg); }
:where(html[data-theme="dark"]) .outcome.unknown { color: var(--muted); background: var(--surface-raised); }
:where(html[data-theme="dark"]) .deck { padding: 20px; }
:where(html[data-theme="dark"]) .deck-label { font-size: 12px; letter-spacing: .04em; }
:where(html[data-theme="dark"]) .deck-name { font-size: 14px; margin-top: 4px; }
:where(html[data-theme="dark"]) .deck-class { color: var(--accent); }
:where(html[data-theme="dark"]) .copy-button { background: var(--surface-raised); color: var(--accent); border: 1px solid var(--line); }
:where(html[data-theme="dark"]) .cards { gap: 6px; }
:where(html[data-theme="dark"]) .card-row { background: var(--surface-raised); border-radius: 6px; }
:where(html[data-theme="dark"]) button.card-row { border-color: #303b48; padding: 5px 8px; }
:where(html[data-theme="dark"]) button.card-row:hover { border-color: #8b7755; background: #30302a; }
:where(html[data-theme="dark"]) .quantity { color: var(--accent); }
:where(html[data-theme="dark"]) .code-details code { background: var(--field); color: var(--muted); border: 1px solid var(--line); }
:where(html[data-theme="dark"]) .account-input { position: relative; min-width: 0; }
:where(html[data-theme="dark"]) .account-input .account-options { top: calc(100% + 6px); border-color: #8b7755; box-shadow: 0 14px 36px #0006; }
:where(html[data-theme="dark"]) .rank-row { padding: 18px 22px; }
:where(html[data-theme="dark"]) .rank-row > strong { font-size: 20px; font-variant-numeric: tabular-nums; }
:where(html[data-theme="dark"]) .job-card, :where(html[data-theme="dark"]) .tracker-panel, :where(html[data-theme="dark"]) .research-panel { border-radius: var(--radius); }
:where(html[data-theme="dark"]) .job-card h3, :where(html[data-theme="dark"]) .tracker-panel h2 { color: var(--ink); }
:where(html[data-theme="dark"]) .failure-list article { border-color: var(--line); }
:where(html[data-theme="dark"]) #failure-history summary:focus-visible { outline-color: var(--focus); }
:where(html[data-theme="dark"]) .tracker-panel .tracker-field input, :where(html[data-theme="dark"]) .tracker-panel .tracker-field select { border-color: var(--line); background: var(--field); }
:where(html[data-theme="dark"]) .tracker-panel .tracker-start { margin-top: 0; }
:where(html[data-theme="dark"]) .tracker-alert { border-color: #85704e; }
:where(html[data-theme="dark"]) .research-actions .primary { margin-top: 0; }
:where(html[data-theme="dark"]) .sms-page .login-methods [aria-pressed=true] { color: var(--accent); border-color: var(--accent); background: var(--tint); }
:where(html[data-theme="dark"]) .sms-page .sms-feedback[data-error=true] { color: var(--loss); }
:where(html[data-theme="dark"]) .sms-page input[type=checkbox] { min-height: 18px; }
:where(html[data-theme="dark"]) .card-info-dialog { box-shadow: 0 18px 52px #0009; border-color: #687483; }
:where(html[data-theme="dark"]) .toast { color: var(--ink); background: var(--surface-raised); border: 1px solid var(--accent); }
:where(html[data-theme="dark"]) .login-container { max-width: 620px; padding-top: 64px; }
:where(html[data-theme="dark"]) .access-container { max-width: 1000px; padding-top: 44px; }
:where(html[data-theme="dark"]) .access-container .query-panel { border-color: var(--line); }
:where(html[data-theme="dark"]) .access-container .access-form input, :where(html[data-theme="dark"]) .access-container .access-form select, :where(html[data-theme="dark"]) .access-container .access-form textarea { background: var(--field); }
:where(html[data-theme="dark"]) .access-container .access-form .primary { margin-top: 8px; }
:where(html[data-theme="dark"]) .access-container #visitor-register-submit { background: var(--surface-raised); color: var(--accent); border: 1px solid #85704e; box-shadow: none; }
:where(html[data-theme="dark"]) body[data-access-role="visitor"] h1 { font-size: clamp(28px, 3.4vw, 40px); }
:where(html[data-theme="dark"]) body[data-access-role="visitor"] .intro { margin: 4px 0 28px; }
:where(html[data-theme="dark"]) body[data-access-role="visitor"] .intro .empty-notes { margin-top: 18px; }
:where(html[data-theme="dark"]) body[data-access-role="visitor"] .access-bar { margin-bottom: 22px; }
:where(html[data-theme="dark"]) footer { margin-top: 36px; padding: 24px 0 max(24px, env(safe-area-inset-bottom)); }
:where(html[data-theme="dark"]) footer p, :where(html[data-theme="dark"]) footer button { font-size: 12px; }

@media (max-width: 900px) {
  :where(html[data-theme="dark"]) .intro { gap: 24px; }
  :where(html[data-theme="dark"]) .auth-card { width: 246px; }
  :where(html[data-theme="dark"]) .query-top { grid-template-columns: minmax(0, 1fr) 105px 170px; gap: 14px; }
  :where(html[data-theme="dark"]) .reader-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :where(html[data-theme="dark"]) .reader-actions > button, :where(html[data-theme="dark"]) .reader-actions .new-query-link { min-width: 0; padding: 10px; }
  :where(html[data-theme="dark"]) .deck { padding: 16px; }
}
@media (max-width: 650px) {
  :where(html[data-theme="dark"]) .site-header, :where(html[data-theme="dark"]) body[data-access-role="visitor"] .site-header { padding: 18px 18px; flex-wrap: wrap; gap: 14px; }
  :where(html[data-theme="dark"]) .brand { gap: 10px; }
  :where(html[data-theme="dark"]) .brand strong { font-size: 17px; }
  :where(html[data-theme="dark"]) .version { display: inline-block; padding-left: 10px; margin-left: 0; letter-spacing: .07em; }
  :where(html[data-theme="dark"]) .privacy-badge { flex-basis: 100%; }
  :where(html[data-theme="dark"]) .container, :where(html[data-theme="dark"]) body[data-access-role="visitor"] .container:not(.access-container) { padding: 16px 16px max(24px, env(safe-area-inset-bottom)); }
  :where(html[data-theme="dark"]) .access-bar, :where(html[data-theme="dark"]) body[data-access-role="visitor"] .access-bar { margin-bottom: 20px; }
  :where(html[data-theme="dark"]) .access-bar > div { gap: 4px 14px; }
  :where(html[data-theme="dark"]) .intro, :where(html[data-theme="dark"]) body[data-access-role="visitor"] .intro { margin: 4px 0 24px; }
  :where(html[data-theme="dark"]) .eyebrow { font-size: 12px; letter-spacing: .09em; }
  :where(html[data-theme="dark"]) .subtitle { font-size: 14px; }
  :where(html[data-theme="dark"]) .auth-card { width: 100%; margin-top: 20px; padding: 16px; display: block; }
  :where(html[data-theme="dark"]) .auth-card button { margin-top: 4px; }
  :where(html[data-theme="dark"]) .view-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  :where(html[data-theme="dark"]) .view-nav button { min-width: 0; padding: 10px 6px; font-size: 13px; }
  :where(html[data-theme="dark"]) .time-panel { padding: 14px 16px; }
  :where(html[data-theme="dark"]) .query-panel { padding: 20px 16px; }
  :where(html[data-theme="dark"]) .query-caption { margin-bottom: 20px; }
  :where(html[data-theme="dark"]) .query-caption > span:last-child { letter-spacing: .03em; }
  :where(html[data-theme="dark"]) .query-top, :where(html[data-theme="dark"]) body[data-access-role="visitor"] .query-top { grid-template-columns: minmax(0, 1fr) 88px; gap: 14px 10px; }
  :where(html[data-theme="dark"]) .query-top > .primary { grid-column: 1 / -1; margin-top: 0; width: 100%; }
  :where(html[data-theme="dark"]) .field label { font-size: 12px; }
  :where(html[data-theme="dark"]) .id-field input, :where(html[data-theme="dark"]) input:not([type=radio]):not([type=checkbox]), :where(html[data-theme="dark"]) select { font-size: 16px; }
  :where(html[data-theme="dark"]) .field input { padding: 10px; }
  :where(html[data-theme="dark"]) .field-help, :where(html[data-theme="dark"]) .reader-status, :where(html[data-theme="dark"]) .empty-notes { font-size: 12px; }
  :where(html[data-theme="dark"]) .query-bottom { gap: 12px; }
  :where(html[data-theme="dark"]) .modes .segmented { width: 100%; }
  :where(html[data-theme="dark"]) .modes .segmented label { min-width: 64px; }
  :where(html[data-theme="dark"]) .reader-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :where(html[data-theme="dark"]) .reader-actions > button, :where(html[data-theme="dark"]) .reader-actions .new-query-link { width: 100%; font-size: 13px; }
  :where(html[data-theme="dark"]) .reader-status:not(:empty) { margin-top: 14px; }
  :where(html[data-theme="dark"]) .stats > div { padding: 18px; }
  :where(html[data-theme="dark"]) .stats strong { font-size: 32px; }
  :where(html[data-theme="dark"]) .stats .rank-stat strong { font-size: 19px; }
  :where(html[data-theme="dark"]) .rank-stat small, :where(html[data-theme="dark"]) .match-header time, :where(html[data-theme="dark"]) .match-rank, :where(html[data-theme="dark"]) .deck-class { font-size: 12px; }
  :where(html[data-theme="dark"]) .result-heading { flex-wrap: wrap; }
  :where(html[data-theme="dark"]) .result-heading button { max-width: 100%; font-size: 12px; }
  :where(html[data-theme="dark"]) .match-toolbar > div { justify-content: flex-start; }
  :where(html[data-theme="dark"]) .match-toolbar .quiet { font-size: 12px; }
  :where(html[data-theme="dark"]) .deck { padding: 16px 12px; }
  :where(html[data-theme="dark"]) .cards { gap: 6px; }
  :where(html[data-theme="dark"]) button.card-row { font-size: 12px; padding: 5px; }
  :where(html[data-theme="dark"]) .class-filters button { padding: 10px 12px; }
  :where(html[data-theme="dark"]) .empty-state { margin: 32px auto; }
  :where(html[data-theme="dark"]) .login-container, :where(html[data-theme="dark"]) .access-container { padding: 28px 16px; }
  :where(html[data-theme="dark"]) .access-container .query-panel { padding: 22px 18px; }
}
@media (max-width: 350px) {
  :where(html[data-theme="dark"]) .brand { flex-wrap: wrap; }
  :where(html[data-theme="dark"]) .version { border-left: 0; padding-left: 0; flex-basis: 100%; }
  :where(html[data-theme="dark"]) .query-top, :where(html[data-theme="dark"]) body[data-access-role="visitor"] .query-top { grid-template-columns: minmax(0, 1fr); }
  :where(html[data-theme="dark"]) .query-top .count-field input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  :where(html[data-theme="dark"]) *, :where(html[data-theme="dark"]) *::before, :where(html[data-theme="dark"]) *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}