:root{color-scheme:dark;--bg:#10121c;--panel:#1a1e2d;--border:#33384c;--text:#f1f2f8;--muted:#a6acc0;--accent:#a38bff;--green:#48d2a2;--bad:#ff808a}body.light{color-scheme:light;--bg:#f5f5fa;--panel:#fff;--border:#dfe1ed;--text:#25273a;--muted:#686c7d;--accent:#6e50d8;--green:#168965;--bad:#be303f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px system-ui,Segoe UI,Arial,sans-serif;min-width:300px}header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 8px}.brand{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:1.1px}.brand span{color:var(--muted)}h1{margin:3px 0 0;font-size:23px}h2{font-size:14px;margin:0 0 12px}button,select,input,textarea{font:inherit}button{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:#111020;font-weight:700}button:disabled{opacity:.4;cursor:not-allowed}input,select,textarea{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px;width:100%}textarea{resize:vertical;line-height:1.55}.toolbar{display:flex;gap:6px;padding:6px 14px 12px}.toolbar select{flex:1;min-width:0}.toolbar button{padding:7px}nav{display:flex;gap:3px;padding:0 12px;border-bottom:1px solid var(--border)}nav button{flex:1;font-size:11px;border:0;border-bottom:2px solid transparent;border-radius:0;padding:10px 3px;background:transparent;color:var(--muted)}nav button.selected{border-color:var(--accent);color:var(--text);font-weight:700}main{padding:14px 12px 36px}.card{background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:14px;margin-bottom:12px}.split{display:grid;grid-template-columns:1fr 1fr;gap:10px}label{font-size:11px;color:var(--muted);font-weight:700}label input{margin-top:6px;font-size:14px}.progress-label,.split-title{display:flex;justify-content:space-between;align-items:center;gap:8px}.progress-label{margin:18px 0 8px}.progress-label span,.hint{color:var(--muted);font-size:11px}.hint{line-height:1.5}.track{height:9px;background:var(--bg);border-radius:20px;overflow:hidden}.track div{height:100%;width:0;background:var(--accent);transition:width .2s}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}.metrics>div{background:var(--bg);border-radius:8px;padding:10px 6px;text-align:center}.metrics strong{display:block;font-size:16px}.metrics small{color:var(--muted);font-size:10px}.buttons{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.buttons button{flex:1}#notice{margin:0 14px;color:var(--green);font-size:11px;min-height:0}#notice:not(:empty){padding:6px 0}#errors{color:var(--bad);font-size:11px;white-space:pre-wrap;margin-top:8px}.person{border-top:1px solid var(--border);padding:12px 0}.person:first-child{border:0}.person-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.person-name{font-weight:700;overflow-wrap:anywhere}.person-meta{color:var(--muted);font-size:11px;margin:5px 0}.person input{margin-top:6px}.paid{color:var(--green);font-weight:700}.wraptext{line-height:1.7;overflow-wrap:anywhere}.spotrows{max-height:440px;overflow:auto;margin-top:12px}.spotrow{display:grid;grid-template-columns:50px 1fr;padding:6px 8px;border-bottom:1px solid var(--border)}.spotrow span:first-child{color:var(--muted)}.scanitem{display:flex;align-items:flex-start;gap:8px;border-top:1px solid var(--border);padding:8px 0}.scanitem input{width:auto;margin-top:3px}.scanitem div{overflow-wrap:anywhere}footer{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--border);display:flex;justify-content:space-between;padding:9px 14px;color:var(--muted);font-size:10px}code{color:var(--accent)}

.person-paid{background:rgba(72,210,162,.09);border-left:3px solid var(--green);padding-left:10px;padding-right:8px;border-radius:7px}.person-paid .person-name{color:var(--green)}body.light .person-paid{background:rgba(22,137,101,.09)}

.brand{display:flex;align-items:center;gap:5px}.brand-icon{width:17px;height:17px;object-fit:contain}.delete-button{display:flex;align-items:center;justify-content:center;min-width:29px}.delete-button:hover{color:var(--bad);border-color:var(--bad)}

/* V1.3.0 visual polish based on the approved reference */
:root{--bg:#101420;--panel:#1c2232;--border:#354056;--text:#f5f6fc;--muted:#b3bed7;--accent:#aa8aff;--green:#48d2a2}
body{background:radial-gradient(ellipse at 30% 0%,rgba(36,45,72,.23),transparent 58%),var(--bg);font-size:13px}
header{padding:18px 17px 12px;align-items:center;gap:10px}
.header-identity{display:flex;align-items:center;gap:10px;min-width:0}.header-logo{width:48px;height:48px;object-fit:contain;flex:none}
.brand{font-size:11px;letter-spacing:1.5px;color:var(--accent)}h1{font-size:25px;line-height:1.1;margin:4px 0 0;white-space:nowrap}
.header-actions{display:flex;gap:6px;align-items:center}.header-actions button{height:34px;width:34px;padding:4px;font-size:18px;border-radius:10px;background:#1b2232;display:flex;align-items:center;justify-content:center}.header-actions .delete-button{color:#ff6478;border-color:#703a50}
.toolbar{padding:8px 17px 15px}.toolbar select{min-height:43px;padding:10px 13px;background:#121824}
nav{padding:0 14px}nav button{font-size:12px;padding:13px 4px}
main{padding:18px 14px 42px}.card{padding:17px;margin-bottom:13px;border-radius:14px;background:linear-gradient(135deg,#1d2436,#1b2130)}
h2{font-size:15px;margin-bottom:13px}.hint{font-size:12px;line-height:1.65}label{font-size:12px}label input{font-size:16px;font-weight:650;padding:11px 12px}
.progress-label{margin:23px 0 10px}.track{height:10px}.metrics{gap:9px;margin-top:17px}.metrics>div{padding:13px 4px}.metrics strong{font-size:19px}.metrics small{font-size:11px}
textarea{font-size:13px;line-height:1.65;padding:11px;min-height:180px}button.primary{min-height:40px;border-radius:9px}
footer{padding:12px 16px;align-items:center;min-height:66px;background:var(--bg)}.footer-brand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650}.footer-brand img{width:26px;height:26px;object-fit:contain}.footer-brand small{font-size:11px;color:var(--muted);font-weight:400}.footer-status{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:11px}
@media(max-width:420px){header{padding:14px 11px 8px}.header-logo{width:35px;height:35px}.header-identity{gap:6px}.brand{font-size:9px}h1{font-size:19px}.header-actions{gap:3px}.header-actions button{width:27px;height:30px;font-size:15px}.toolbar{padding:7px 12px 12px}main{padding:13px 10px 35px}}
body.light{--bg:#f5f5fa;--panel:#fff;--border:#dfe1ed;--text:#25273a;--muted:#686c7d;--accent:#6e50d8}
body.light .toolbar select,body.light .header-actions button{background:#fff}

/* Activation gate */
.license-gate{position:fixed;inset:0;z-index:9999;background:#0d101b;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;color:#f5f5ff}
.license-gate[hidden],#activationForm[hidden]{display:none!important}
.license-card{width:100%;max-width:440px;background:#1b2030;border:1px solid #363f5b;border-radius:16px;padding:24px;text-align:center;box-sizing:border-box}
.license-logo{width:65px;height:65px;object-fit:contain}.license-card h2{font-size:22px;margin:10px 0}.license-card p{color:#c0c8e5;line-height:1.5}
.license-card label{display:block;text-align:left;margin:18px 0 10px;color:#dce2ff}.license-card input{width:100%;margin-top:8px;box-sizing:border-box}
.license-card button{margin:8px 0;width:100%;min-height:42px}.license-card .license-note{font-size:12px;margin-top:18px}

.license-feedback{min-height:1.4em;color:#b9a6ff;font-size:12px;line-height:1.5;margin:9px 0 0;text-align:center}

/* V1.4.2: toolbar colors and first paid claim indicator */
.header-actions #new{color:#48d2a2;border-color:rgba(72,210,162,.42)}
.header-actions #rename{color:#f4c95d;border-color:rgba(244,201,93,.42)}
.person.person-paid:first-child{border-left:3px solid var(--green)}
#raw::placeholder{color:var(--muted);opacity:.72;white-space:pre-line}

/* Release update banner */
.update-banner{margin:0 14px 8px;padding:12px 14px;background:var(--panel);border:1px solid var(--accent);border-radius:11px}.update-banner[hidden]{display:none!important}.update-heading{font-weight:750}.update-heading strong{color:var(--accent)}#updateNotes{color:var(--muted);font-size:12px;line-height:1.5;white-space:pre-line;margin:9px 0}.update-actions{display:flex;gap:8px}.update-actions button:first-child{flex:1}#updateFeedback{color:var(--green);font-size:11px;min-height:0;margin:8px 0 0}

.license-remaining{margin:0 14px 12px;padding:9px 12px;border:1px solid #3b4562;background:#181f32;border-radius:10px;color:#c9c4fa;font-size:12px}.license-remaining[hidden]{display:none!important}

/* V1.4.7: keep remaining access in the footer between brand and version. */
footer{gap:8px}footer .footer-brand,footer .footer-status{flex:0 0 auto}footer .license-remaining{flex:1 1 auto;min-width:0;margin:0;padding:0;border:0;background:transparent;border-radius:0;color:var(--green);font-size:10px;line-height:1.35;text-align:center;overflow-wrap:anywhere}footer .license-remaining[hidden]{display:none!important}

/* License status: descriptive two-line footer label. */
footer .license-remaining{white-space:pre-line;color:var(--green);font-size:10px;line-height:1.4}

/* V1.4.9 — fully coherent light palette. Keep dark theme unchanged. */
body.light{color-scheme:light;--bg:#f5f6fc;--panel:#ffffff;--border:#d7ddeb;--text:#19233b;--muted:#52617a;--accent:#7650d9;--green:#087e5b;--bad:#b42c4a;background:radial-gradient(ellipse at 30% 0%,rgba(166,149,232,.13),transparent 62%),var(--bg);color:var(--text)}
body.light .card{background:linear-gradient(135deg,#fff,#f9faff);border-color:var(--border);box-shadow:0 2px 10px rgba(25,35,59,.035)}
body.light .header-actions button,body.light .toolbar select{background:#fff;color:var(--text);border-color:#cfd6e6}
body.light .header-actions #new{color:#087e5b;border-color:#9ed8c4;background:#f1fcf7}
body.light .header-actions #rename{color:#966600;border-color:#ebd08c;background:#fff9e8}
body.light .header-actions .delete-button{color:#bd3653;border-color:#e9b9c5;background:#fff4f6}
body.light input,body.light select,body.light textarea{background:#fff;color:var(--text);border-color:#c8d1e2}
body.light input:focus,body.light select:focus,body.light textarea:focus{outline:2px solid rgba(118,80,217,.2);border-color:var(--accent)}
body.light input::placeholder,body.light textarea::placeholder{color:#64718a;opacity:1}
body.light label,body.light h2,body.light .progress-label,body.light .progress-label strong,body.light .split-title{color:var(--text)}
body.light .progress-label span,body.light .hint,body.light .person-meta,body.light .metrics small{color:var(--muted)}
body.light .track{background:#e4e7f2}
body.light .metrics>div{background:#f0f2fa;border:1px solid #e1e5f0}
body.light .metrics strong{color:#18233c}
body.light button:not(.primary){color:var(--text)}
body.light button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
body.light nav button{color:#5c6680}body.light nav button.selected{color:#36216e;border-color:var(--accent)}
body.light .person-paid{background:#eaf8f1;border-left-color:var(--green)}
body.light .person-paid .person-name,body.light .paid{color:var(--green)}
body.light .update-banner{background:#f7f3ff;border-color:#b9a5ed}body.light #updateNotes{color:#4c5370}
body.light footer{background:#f9faff;border-top-color:var(--border)}
body.light footer .license-remaining{color:var(--green)}
body.light .spotrow{border-bottom-color:var(--border)}

/* V1.5.0: anchor footer at the viewport bottom on short tabs while keeping it visible on long tabs. */
html{min-height:100%;}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
body>header,body>.toolbar,body>#notice,body>#updateBanner,body>nav{flex-shrink:0;}
body>main{flex:1 0 auto;}
body>footer{flex-shrink:0;position:sticky;bottom:0;z-index:5;}


/* V1.5.1 — readability improvements in both themes. */
body{font-size:14px;line-height:1.5}
nav button{font-size:13px;line-height:1.3}
h2{font-size:16px;line-height:1.35}
label{font-size:13px;line-height:1.45}
.hint{font-size:13px;line-height:1.6}
.progress-label span,.split-title .hint{font-size:13px}
.metrics small{font-size:12px;line-height:1.45}
.person-name{font-size:14px}
.person-meta{font-size:13px;line-height:1.5}
.person input{font-size:14px}
.spotrow{font-size:14px;line-height:1.5;padding:8px 9px}
.wraptext{font-size:14px;line-height:1.7}
textarea{font-size:14px;line-height:1.6}
#notice,#errors{font-size:13px;line-height:1.5}
#updateNotes{font-size:13px;line-height:1.55}
#updateFeedback{font-size:12px}
footer .license-remaining{font-size:12px;line-height:1.35}
.footer-status{font-size:12px;line-height:1.4}
.footer-brand small{font-size:12px}
footer{font-size:12px}
@media(max-width:360px){footer{padding:10px 9px;gap:5px}.footer-brand{gap:5px;font-size:11px}.footer-brand img{width:22px;height:22px}footer .license-remaining{font-size:11px}.footer-status{font-size:11px}nav button{font-size:12px}}

/* V1.5.2 — render Unicode emoji with a Windows color-emoji font instead of
   inheriting a text-only face. Does not alter stored claim names. */
.emoji-glyph{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-variant-emoji:emoji;font-weight:400;white-space:nowrap;vertical-align:-0.06em;line-height:1.2}
.person-name .emoji-glyph,.spotrow .emoji-glyph,#tags .emoji-glyph{font-size:1.16em}
.spotrow span:last-child{min-width:0;overflow-wrap:anywhere}
/* Give the numbered list most of the usable vertical space while allowing
   the rest of the panel and its anchored footer to stay accessible. */
#spots .spotrows{height:clamp(300px,calc(100dvh - 360px),1000px);max-height:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
@media(max-height:610px){#spots .spotrows{height:clamp(180px,calc(100dvh - 320px),450px)}}

/* V1.5.5: compact, locally generated progress image */
.snapshot-launch{margin-top:14px}.snapshot-launch button{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:600;color:var(--text, #f8fafc);border:1px solid var(--border, #374151);background:transparent;padding:10px 12px;border-radius:9px;cursor:pointer}.snapshot-launch button svg{flex:none;color:currentColor}.snapshot-launch button:hover{background:rgba(167,139,250,.1);border-color:#a78bfa}
.snapshot-overlay[hidden]{display:none!important}.snapshot-overlay{position:fixed;inset:0;background:rgba(3,6,17,.76);z-index:50;display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto}
.snapshot-modal{background:var(--card,#1b2233);border:1px solid var(--border,#38445c);border-radius:14px;padding:16px;width:min(100%,520px);max-height:95dvh;overflow:auto;color:var(--text,#f5f5ff);box-shadow:0 12px 35px #0008}
.snapshot-modal label{display:block;margin:10px 0}.snapshot-modal label input{width:100%;margin-top:6px}.snapshot-modal canvas{display:block;width:100%;height:auto;border-radius:10px;border:1px solid #39465b;background:#111827}.snapshot-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.snapshot-actions button{flex:1 1 125px}.snapshot-modal #snapshotFeedback{min-height:18px;margin-bottom:0}.snapshot-modal #snapshotWarning{margin:8px 0 0}
body.light .snapshot-modal{background:#fff;color:#18233c}

/* V1.5.7: unobtrusive snapshot action beside the percentage, no extra dashboard row */
.progress-tools{display:flex;align-items:center;gap:8px;flex:none}
.progress-tools #percent{white-space:nowrap}
.snapshot-icon-button{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);line-height:1}
.snapshot-icon-button svg{display:block;flex:none}
.snapshot-icon-button:hover,.snapshot-icon-button:focus-visible{border-color:var(--accent);background:rgba(163,139,255,.12)}

/* Mobile PWA layout, independent from desktop extension */
html,body{width:100%;min-width:0;max-width:100%;margin:0;overflow-x:hidden}
body{min-height:100dvh;box-sizing:border-box;padding-bottom:calc(90px + env(safe-area-inset-bottom))}
header,.toolbar,nav,main,footer{box-sizing:border-box;width:100%;max-width:100%}
header{padding-top:calc(14px + env(safe-area-inset-top))}
main{overflow:visible}
.card{max-width:100%;box-sizing:border-box}
textarea,input,select{font-size:16px!important;max-width:100%;box-sizing:border-box}
textarea{min-height:210px}
button{touch-action:manipulation}
footer{position:fixed;bottom:0;left:0;right:0;padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:20}
#spots .spotrows{height:clamp(280px,52dvh,700px)}
.snapshot-overlay{padding:12px 10px calc(12px + env(safe-area-inset-bottom))}
.snapshot-modal{max-height:90dvh}
@media(max-width:430px){header{gap:8px}.header-actions{gap:4px}.header-actions button{min-width:34px} .split{gap:8px} .snapshot-actions button{flex:1 1 100%}}

/* Honor hidden even when generic button layout styles are active. */
.snapshot-actions button[hidden]{display:none!important}

/* Auth gate deliberately sits outside the application shell. */
[hidden]{display:none!important}
.auth-gate{min-height:100dvh;display:grid;place-items:center;padding:20px;background:#0f1422;color:#eef0ff}
.auth-card{width:min(100%,430px);padding:30px;background:#1b2334;border:1px solid #39445e;border-radius:20px;box-shadow:0 20px 70px #0005}
.auth-card h1{margin:10px 0}.auth-card p{line-height:1.5;color:#b7c1d5}.auth-card input{display:block;width:100%;margin:10px 0 15px;padding:13px;background:#101626;color:white;border:1px solid #46516b;border-radius:10px}
.auth-card button{padding:12px 16px;margin:5px 6px 5px 0}.auth-card .primary{background:#a78bfa;color:#141026}
#authMessage{min-height:24px;overflow-wrap:anywhere}

.auth-mode-hint{font-size:.86rem;margin-top:6px}
.footer-signout{background:transparent;color:inherit;border:1px solid #64748b;border-radius:7px;padding:5px 9px;cursor:pointer;font-size:12px}

/* Web v0.3.3: compact one-row footer with centered live license expiration. */
body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
main{padding-bottom:18px}
footer.compact-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,1.15fr) minmax(0,1fr);align-items:center;column-gap:7px;min-height:0;padding:6px 10px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--bg)}
.compact-footer .footer-brand{display:flex;align-items:center;gap:5px;min-width:0;font-size:11px;line-height:1.12}
.compact-footer .footer-brand img{width:23px;height:23px;flex:none}
.compact-footer .footer-brand span{display:flex;flex-direction:column;white-space:nowrap}
.compact-footer .footer-brand small{font-size:9px;font-weight:400}
.compact-footer .footer-license{font-size:11px;font-weight:650;text-align:center;line-height:1.2;min-width:0;color:var(--green);overflow-wrap:break-word}
.compact-footer .footer-status{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:6px;min-width:0;font-size:10px;line-height:1.2}
.compact-footer #saved{display:none}
.compact-footer .footer-signout{font-size:11px;padding:5px 7px;white-space:nowrap}
@media(min-width:640px){.compact-footer #saved{display:inline}}

/* Web v0.3.4 — cosmetic-only mobile alignment polish. */
/* Native select arrow: reserve an even, visible right-side inset. */
.toolbar select#waffle{padding-inline-start:16px;padding-inline-end:36px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3bed7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px}
body.light .toolbar select#waffle{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6680' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
/* Consistent horizontal rhythm for selector, tabs, and content cards. */
.toolbar{padding-inline:14px}
nav{padding-inline:14px}
main{padding-inline:14px}
/* Keep progress percentage and camera aligned on the same baseline. */
.progress-tools{gap:9px;align-items:center}
.progress-tools #percent{display:inline-flex;align-items:center;line-height:30px}
.snapshot-icon-button{width:30px;height:30px;border-radius:9px}
.metrics small{color:var(--muted);font-weight:500}
@media(max-width:430px){.toolbar{padding-inline:12px}nav{padding-inline:12px}main{padding-inline:12px}.toolbar select#waffle{padding-inline-start:15px;padding-inline-end:38px;background-position:right 16px center}}
/* Maintain the compact footer with OS navigation-safe padding. */
footer.compact-footer{padding-bottom:calc(6px + env(safe-area-inset-bottom))}

/* v0.3.5: never flash the sign-in form while restoring a saved session. */
.auth-boot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:#b7c1d5;font-size:14px;min-height:200px}
.auth-boot strong{font-size:23px;color:#eef0ff}
.auth-boot-spinner{width:24px;height:24px;border:3px solid #46516b;border-top-color:#a78bfa;border-radius:50%;animation:auth-boot-spin .8s linear infinite}
@keyframes auth-boot-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.auth-boot-spinner{animation:none;border-top-color:#a78bfa}}


/* V0.4.1: GiveawayGG-inspired DESKTOP ONLY. Mobile/tablet CSS above is unchanged. */
.desktop-intro,.desktop-card-heading{display:none}
@media(min-width:1024px){
 body{font-size:14px}
 #appShell{min-height:100dvh}
 #appShell>header,#appShell>.toolbar,#appShell>nav,#appShell>main,#appShell>#notice,#appShell>.desktop-intro{width:min(calc(100% - 64px),1020px);margin-inline:auto}
 #appShell>header{padding:21px 0 13px}
 .header-logo{width:46px;height:46px}.header-identity{gap:11px}.brand{font-size:10px;letter-spacing:1.7px}h1{font-size:24px}
 .header-actions{gap:8px}.header-actions button{width:38px;height:38px;border-radius:10px;font-size:19px}
 #appShell>.toolbar{padding:0 0 18px}.toolbar select#waffle{height:44px;max-width:none;padding-inline:15px 44px;background-position:right 18px center;font-size:14px;border-radius:10px}
 #appShell>.desktop-intro{display:block;padding:13px 0 17px}
 .desktop-eyebrow{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:1.8px}
 .desktop-intro-row{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:6px 0 18px}
 .desktop-intro h2{font-size:22px;margin:0 0 4px}.desktop-intro p{font-size:13px;color:var(--muted);margin:0}
 .desktop-save-note{color:var(--green);font-size:12px;white-space:nowrap}
 .desktop-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
 .desktop-steps>div{display:flex;align-items:center;gap:11px;border:1px solid var(--border);border-radius:12px;padding:15px 13px;background:var(--panel)}
 .desktop-steps span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(170,138,255,.13);color:var(--accent);font-size:12px;font-weight:800;flex-shrink:0}
 .desktop-steps strong{font-size:12px;line-height:1.35}
 #appShell>nav{justify-content:flex-start;gap:3px;padding:0;border-bottom:1px solid var(--border)}
 nav button{flex:0 0 auto;min-width:136px;padding:13px 20px;font-size:13px;border-bottom-width:3px}nav button:hover{color:var(--text)}
 #appShell>main{padding:23px 0 85px}
 .card{padding:24px;border-radius:15px;margin-bottom:22px;box-shadow:0 8px 24px rgba(0,0,0,.055)}
 .card h2{font-size:16px;margin-bottom:12px}.hint{font-size:12px;line-height:1.65}label{font-size:12px}label input{font-size:14px;padding:11px;margin-top:7px}
 #claims:not([hidden]){display:flex;flex-direction:column;gap:0}
 #claims>.card{width:100%;min-width:0}
 #claims>.desktop-editor-card{order:1}#claims>.desktop-progress-card{order:2}
 .desktop-card-heading{display:flex;align-items:center;gap:12px;margin-bottom:19px}
 .desktop-card-heading h2{margin:0 0 3px;font-size:17px}.desktop-card-heading p{margin:0;color:var(--muted);font-size:12px}
 .desktop-section-icon{display:grid;place-items:center;width:38px;height:38px;background:rgba(170,138,255,.13);border-radius:11px;color:var(--accent);font-size:21px;flex-shrink:0}
 .mobile-claims-heading{display:none}
 #claims .split{max-width:620px;gap:14px;margin-bottom:17px}
 #claims #raw{min-height:190px;height:clamp(190px,28vh,320px);font-size:14px;line-height:1.55;padding:14px}
 #claims .buttons{margin-top:13px}#claims #parse{flex:0 0 auto;min-width:200px;min-height:42px;padding-inline:22px}
 #claims .progress-label{margin:17px 0 12px;font-size:16px}#claims .track{height:11px}
 #claims .metrics{gap:12px;margin-top:20px;grid-template-columns:repeat(3,1fr)}
 #claims .metrics>div{padding:20px 12px;border-radius:11px;border:1px solid var(--border)}
 #claims .metrics strong{font-size:23px}#claims .metrics small{font-size:12px;display:block;margin-top:5px}
 #participants:not([hidden]){display:flex;flex-direction:column;gap:0}
 #participants>.card{width:100%}#participants #people{max-width:100%}
 #participants .person{padding:14px 0}
 #spots>.card,#settings>.card{max-width:100%}
 #spots .spotrows{max-height:min(58vh,560px)}
 .compact-footer{padding-inline:max(24px,calc((100vw - 1020px)/2))!important}
 .compact-footer .footer-brand,.compact-footer .footer-license{font-size:12px}
 #snapshotDialog .snapshot-modal{max-width:min(94vw,780px)}
}
@media(min-width:1024px) and (max-width:1130px){.desktop-steps>div{padding:12px 9px;gap:7px}.desktop-steps strong{font-size:11px}}

/* V0.4.2 — desktop-only density, information hierarchy and participant spacing. */
@media(min-width:1024px){
 #appShell>header,#appShell>.toolbar,#appShell>nav,#appShell>main,#appShell>#notice{width:min(calc(100% - 48px),1120px)}
 #appShell>header{padding:12px 0 8px}
 .header-logo{width:40px;height:40px}h1{font-size:22px}
 .header-actions button{width:35px;height:35px}
 #appShell>.toolbar{padding:0 0 7px}
 .toolbar select#waffle{height:40px}
 nav button{padding:10px 17px;min-width:122px}
 #appShell>main{padding:13px 0 60px}
 .card{padding:18px 20px;margin-bottom:13px;border-radius:13px}
 .card h2{margin-bottom:8px}
 #claims>.desktop-progress-card{order:1}
 #claims>.desktop-editor-card{order:2}
 .desktop-card-heading{margin-bottom:11px;gap:9px}
 .desktop-card-heading h2{font-size:15px}
 .desktop-card-heading p{display:none}
 .desktop-section-icon{width:29px;height:29px;font-size:16px;border-radius:8px}
 #claims .split{max-width:100%;grid-template-columns:repeat(2,minmax(0,260px));gap:12px;margin-bottom:10px}
 #claims label input{margin-top:5px;padding:8px 10px}
 #claims .progress-label{margin:10px 0 8px;font-size:14px}
 #claims .track{height:9px}
 #claims .metrics{margin-top:12px;gap:10px}
 #claims .metrics>div{padding:11px 10px}
 #claims .metrics strong{font-size:20px}
 #claims .metrics small{margin-top:2px}
 #claims .hint{margin:6px 0 10px;line-height:1.4}
 #claims #raw{height:clamp(150px,23vh,245px);min-height:150px;padding:11px 13px}
 #claims .buttons{margin-top:10px}
 #claims #parse{min-height:37px}
 #participants .person{padding:13px 15px;margin:6px 0;border-radius:9px}
 #participants .person.person-paid{padding:13px 15px;border-left-width:3px}
 #participants .person-head{gap:16px}
 #participants .person-head button{margin-left:auto;flex-shrink:0}
 #participants .person input{margin-top:6px}
 #participants>.card{padding:19px 21px}
 #participants .hint{margin:7px 0 12px}
 #spots .spotrows{max-height:min(64vh,650px)}
 .compact-footer{padding-inline:max(24px,calc((100vw - 1120px)/2))!important}
}

/* V0.4.3 — Desktop-only document height fix, shared by every tab.
   Keep the footer visible without creating a phantom scroll area.
   Do not alter mobile layout or suppress scrolling of genuinely long pages. */
@media (min-width:1024px){
  body{padding-bottom:0;min-height:100dvh}
  #appShell:not([hidden]){
    display:flex;
    flex-direction:column;
    min-height:100dvh;
    height:auto;
    padding-bottom:48px; /* fixed footer clearance, accounted for in min-height */
    box-sizing:border-box;
  }
  #appShell>header,#appShell>.toolbar,#appShell>nav{flex-shrink:0}
  #appShell>main{
    flex:1 0 auto;
    min-height:0;
    padding-bottom:0;
  }
  #appShell>main .card:last-child{margin-bottom:0}
  #appShell>footer.compact-footer{position:fixed;bottom:0;left:0;right:0}
}

/* V0.4.4 — use available desktop viewport height without page-level phantom scrolling.
   The claims editor and numbered list retain their own scrollbars. Mobile untouched. */
@media (min-width:1024px) and (min-height:650px){
  #claims #raw{height:clamp(150px,calc(100dvh - 620px),560px);min-height:150px}
  #spots .spotrows{height:clamp(280px,calc(100dvh - 370px),850px);max-height:none}
}

/* V0.4.5: Fit desktop Claims and Spot List to the REAL available viewport.
   Flex sizing eliminates page scrolling caused by hard-coded viewport offsets.
   Long Participants pages and mobile keep their existing scrolling behavior. */
@media (min-width:1024px) {
  html:has(#appShell:not([hidden]) #claims:not([hidden])),
  html:has(#appShell:not([hidden]) #spots:not([hidden])),
  body:has(#appShell:not([hidden]) #claims:not([hidden])),
  body:has(#appShell:not([hidden]) #spots:not([hidden])) {
    height:100%;
    overflow-y:hidden;
  }
  #appShell:not([hidden]):has(#claims:not([hidden])),
  #appShell:not([hidden]):has(#spots:not([hidden])) {
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  #appShell:has(#claims:not([hidden])) > main,
  #appShell:has(#spots:not([hidden])) > main {
    flex:1 1 0;
    min-height:0;
    overflow:hidden;
    padding-top:12px;
    padding-bottom:8px;
  }
  #claims:not([hidden]),#spots:not([hidden]){
    height:100%;
    min-height:0;
  }
  #claims:not([hidden]){
    display:flex;
    flex-direction:column;
  }
  #claims>.desktop-progress-card{
    flex:0 0 auto;
    margin-bottom:12px;
  }
  #claims>.desktop-editor-card{
    flex:1 1 0;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  #claims #raw{
    flex:1 1 0;
    height:auto;
    min-height:0;
    max-height:none;
    resize:none;
    overflow-y:auto;
  }
  #claims .desktop-editor-card>.buttons,
  #claims .desktop-editor-card>.desktop-card-heading,
  #claims .desktop-editor-card>.hint{
    flex-shrink:0;
  }
  #spots:not([hidden])>.card{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  #spots .spotrows{
    flex:1 1 0;
    height:auto;
    min-height:0;
    max-height:none;
    overflow-y:auto;
  }
  #spots .split-title,#spots .buttons,#spots .hint{
    flex-shrink:0;
  }
  #claims .desktop-card-heading{gap:0}
}

/* V0.4.6: Desktop uses the exact mobile base background without the wide-screen navy gradient. */
@media (min-width:1024px){body:not(.light){background:var(--bg)}}