.account-shell{display:block;height:100%;overflow:auto;padding-left:var(--rail-width,52px)}
.account-main{max-width:1440px;margin:0 auto;padding:32px clamp(20px,4vw,64px);min-height:100%}
.account-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}
.account-heading h1{font-size:24px;margin:0}.account-action{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;text-decoration:none;border-radius:4px;font-weight:500}.account-action.primary{background:var(--accent);color:white}
.account-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}.account-toolbar .library-search{display:flex;gap:8px;align-items:center;flex:1;max-width:520px}.account-toolbar input{width:100%}.account-toolbar svg{width:20px;height:20px}.account-toolbar select{min-height:38px}
.account-empty{max-width:680px;margin:clamp(40px,12vh,150px) auto;text-align:center;padding:24px}.account-empty h2{font-size:26px;margin:18px 0 12px}.account-empty p{color:var(--muted);line-height:1.7;max-width:460px;margin:0 auto 24px}.account-empty-icon{margin:auto;color:var(--accent);width:48px}.account-empty-icon svg{width:48px;height:48px}.account-empty .empty-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.account-review-row{display:flex;align-items:center;gap:20px;padding:20px 4px;border-bottom:1px solid var(--line)}.account-review-description{flex:1;min-width:160px}.account-review-description h2{font-size:16px;margin:0 0 8px}.account-review-description p,.account-review-description small{margin:0;color:var(--muted);line-height:1.6}.review-row-icon svg{width:26px;height:26px;color:var(--accent)}.account-review-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.account-review-actions button{color:var(--accent)}
/* Flat off-canvas account panel. Profile, offline storage, data and sessions have distinct groups. */
.account-shade{place-items:stretch end;background:#0007}
.account-panel{border-radius:0!important;height:100%;max-height:100%!important;overflow:auto;width:min(440px,100vw)!important;padding:0!important;box-shadow:none!important;background:var(--panel);border:0;border-left:1px solid var(--line);scrollbar-gutter:stable}
.account-panel-header{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px;background:var(--panel);border-bottom:1px solid var(--line)}
.account-panel-header h2{font-size:20px;margin:0;line-height:1.4}
.account-panel-header p{font-size:12px;color:var(--muted);margin:4px 0 0}
.account-panel .account-close{flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:0;margin:-4px -8px 0 0;font-size:24px;border-radius:50%;color:var(--muted)}
.account-close:hover{background:var(--surface);color:var(--text)}
.account-panel-body{padding:0 24px 24px}
.account-panel .account-section{padding:22px 0;border-top:1px solid var(--line);margin:0}
.account-panel .account-profile-section{border-top:0}
.account-panel .account-section h3{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;margin:0 0 16px}
.account-section h3 svg{width:18px;height:18px;color:var(--muted)}
.account-panel .account-section p{font-size:13px;line-height:1.6;margin:8px 0 12px}
.account-panel .account-section .account-hint{font-size:12px;color:var(--muted);line-height:1.55;margin:12px 0 0}
.account-panel form{display:grid;gap:18px;margin:0}
.account-panel .account-name{display:grid;gap:7px;margin:0;font-size:12px;color:var(--muted)}
.account-panel .account-name input{width:100%;height:40px;margin:0;color:var(--text);font-size:14px;padding:9px 12px;border-radius:4px}
.account-email>span{font-size:12px;color:var(--muted)}
.account-panel .account-email p{margin:5px 0 4px;font-size:14px;overflow-wrap:anywhere}
.account-email small{display:block;font-size:11px;line-height:1.5;color:var(--muted)}
.account-panel .account-notification{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;font-size:13px}
.account-notification strong{display:block;font-size:13px;font-weight:500}
.account-notification small{display:block;font-size:11px;color:var(--muted);line-height:1.5;margin-top:3px}
.account-panel .account-notification input{display:block;flex:0 0 34px;width:34px;height:20px;margin:0;appearance:none;border-radius:12px;background:var(--surface);border:1px solid var(--muted);padding:0;position:relative;cursor:pointer}
.account-notification input:before{content:"";position:absolute;width:12px;height:12px;left:3px;top:3px;border-radius:50%;background:var(--muted);transition:transform .15s ease}
.account-notification input:checked{background:var(--accent);border-color:var(--accent)}
.account-notification input:checked:before{background:white;transform:translateX(14px)}
.account-form-actions{display:flex;justify-content:flex-end}
.account-form-actions button{min-height:38px;padding:9px 16px;border-radius:4px;font-size:13px}
.account-panel .account-secondary-action{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:4px;color:var(--accent);font-size:13px}
.account-secondary-action svg{width:16px;height:16px}
.account-panel .account-storage{font-size:13px;margin:0 0 12px;color:var(--muted)}
.account-export-status{display:grid;justify-items:start;gap:8px;margin-top:16px;font-size:12px}
.account-export-status progress{width:100%;height:4px;accent-color:var(--accent)}
.account-export-status small{color:var(--muted)}
.account-panel .account-session-actions>button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border-radius:4px;padding:10px 0;margin:0;min-height:48px}
.account-session-actions>button>span:first-child{display:flex;flex:0 0 20px;justify-content:center;color:var(--muted)}
.account-session-actions svg{width:18px;height:18px}
.account-session-actions small{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:3px}
.account-panel .account-feedback{padding:12px 0;margin:0;color:var(--accent);font-size:13px;line-height:1.6}
@media(prefers-reduced-motion:reduce){.account-notification input:before{transition:none}}
.account-loading{padding:48px 0;color:var(--muted)}
@media(max-width:700px){.account-main{padding:24px 16px}.account-heading{align-items:flex-start;flex-direction:column}.account-review-row{gap:12px;flex-wrap:wrap}.account-review-actions{width:100%;padding-left:36px}.account-toolbar{gap:8px}.account-toolbar .library-search{flex-basis:100%}.account-empty{padding:12px;margin-top:50px}}

.import-status{min-height:40px}.import-status p{margin:0 0 8px}.import-progress{position:relative;height:4px;border-radius:2px;background:var(--line);overflow:hidden}.import-progress span{display:block;height:100%;background:var(--accent);transition:width .2s linear}
.import-progress.indeterminate span{position:absolute;width:40%!important;animation:import-indeterminate 1.2s ease-in-out infinite}@keyframes import-indeterminate{0%{left:-40%}100%{left:100%}}@media(prefers-reduced-motion:reduce){.import-progress.indeterminate span{animation:none;width:100%!important;opacity:.6}}

/* Account settings use a single flat surface; tabs keep personal details and data tasks focused. */
.account-tabs{display:flex;padding:0 24px;border-bottom:1px solid var(--line);gap:24px}
.account-tabs [role=tab]{border-radius:0;padding:16px 0 12px;border-bottom:2px solid transparent;color:var(--muted);font-size:13px}
.account-tabs [aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}
.account-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.account-details-heading{display:flex;align-items:center;justify-content:space-between;padding-top:20px}
.account-details-heading h3{font-size:14px;margin:0}
.account-details-heading button,.account-security button{font-size:12px;color:var(--accent);padding:8px 0}
.account-name-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.account-name-fields input{min-width:0}
.account-security{border-top:1px solid var(--line);padding-top:12px}
.account-security .account-hint{color:var(--muted);font-size:12px;line-height:1.6}
.account-profile-section .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:360px){.account-name-fields{grid-template-columns:1fr}}

.mobile-account-brand,.mobile-editor-hint,.mobile-account-tools{display:none}
@media(max-width:720px),(orientation:landscape) and (max-height:600px) and (max-width:1200px){
 .account-shell .account-main{padding:20px 16px 24px;min-width:0;box-sizing:border-box}
 .mobile-account-brand{display:block;width:145px;margin:0 0 22px}
 .mobile-account-brand img{display:block;width:100%;height:auto}
 .account-shell .account-heading{margin-bottom:16px;padding-bottom:16px}
 .account-shell .account-heading>div{display:none}
 .mobile-editor-hint{display:block;color:var(--muted);font-size:12px;line-height:1.6;margin:0 0 20px}
 .account-shell .account-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .account-shell .account-toolbar .library-search{grid-column:1/-1;max-width:none;width:auto}
 .account-shell .account-toolbar select{min-width:0;width:100%;min-height:44px}
 .account-shell .account-toolbar>button{grid-column:1/-1;justify-self:end;min-height:44px}
 .account-shell .account-review-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
 .account-shell .recording-card{width:100%;max-width:none;min-width:0}
 .account-shell .recording-preview-controls{display:none}
 .account-shell .account-empty .empty-cta>a[href="/workspace/new"],.account-shell .account-empty .empty-cta>button{display:none}
 .mobile-account-tools{display:grid;gap:4px;padding:20px 0;border-top:1px solid var(--line)}
 .mobile-account-tools h3{font-size:14px;margin:0 0 10px}
 .mobile-account-tools button{display:flex;align-items:center;gap:12px;text-align:left;min-height:44px;padding:8px 0;font-size:13px}
 .mobile-account-tools svg{width:20px;height:20px;color:var(--muted)}
 .mobile-account-tools small{margin-left:auto;color:var(--muted);font-size:11px}
 .account-shade{z-index:60}
 .account-panel input,.account-panel textarea{font-size:16px!important}
}

/* A native file input covers the welcome area for keyboard, click and OS file drops.
   Video bytes stay in the browser; the server owns authorization and upload quotas. */
.account-coach-welcome {padding:0;}
.account-upload-target {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;min-height:350px;padding:42px 24px;border:1px dashed var(--line);border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s;}
.account-upload-target:hover,.account-upload-target:focus-within {border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent);}
.account-upload-target input {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;}
.account-upload-target:has(input:disabled) {opacity:.7;}
.account-upload-target h2,.account-upload-target p {margin:0;}
.account-upload-target small {color:var(--muted);font-size:12px;line-height:1.6;}
.account-upload-button {padding:12px 20px;border-radius:5px;}
.account-role {display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);margin:4px 0 18px;font-size:13px;}
.account-role span {color:var(--muted);}
.account-role strong {font-weight:500;}
.account-subscription-facts {display:grid;grid-template-columns:1fr auto;gap:18px;margin:24px 0;font-size:13px;}
.account-subscription-facts dt {color:var(--muted);}
.account-subscription-facts dd {margin:0;font-weight:600;}

/* Flat subscription summary: one usage indicator and two clear benefits. */
.subscription-heading {position:relative;padding:4px 0 22px;border-bottom:1px solid var(--line);}
.subscription-eyebrow {display:block;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--muted);margin-bottom:8px;}
.account-panel .subscription-heading h3 {font-size:28px;margin:0;color:var(--text);}
.subscription-role {position:absolute;right:0;bottom:24px;color:var(--accent);font-size:12px;}
.subscription-usage {display:grid;gap:12px;padding:26px 0;}
.subscription-usage strong {font-size:26px;color:var(--accent);}
.subscription-usage strong span {font-size:14px;font-weight:400;color:var(--text);}
.subscription-usage>span {font-size:12px;color:var(--muted);}
.subscription-usage progress {width:100%;height:6px;border:0;border-radius:4px;overflow:hidden;background:var(--line);accent-color:var(--accent);}
.subscription-usage progress::-webkit-progress-bar {background:var(--line);}
.subscription-usage progress::-webkit-progress-value {background:linear-gradient(90deg,#9473fa,#409bff);}
.subscription-benefits {display:grid;gap:22px;padding:0 0 26px;margin-bottom:20px;border-bottom:1px solid var(--line);}
.subscription-benefits>div {display:flex;gap:14px;align-items:center;}
.subscription-benefits svg {width:22px;height:22px;color:var(--accent);}
.subscription-benefits span {display:grid;gap:5px;font-size:11px;color:var(--muted);}
.subscription-benefits strong {font-size:14px;font-weight:500;color:var(--text);}

.account-review-groups {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,252px),1fr));gap:24px;}
.account-review-group:has(.account-set-heading) {grid-column:1/-1;}
.account-review-group {min-width:0;}
.account-set-heading {display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:0 0 12px;margin-bottom:14px;}
.account-set-heading svg {width:22px;height:22px;color:var(--accent);}
.account-set-heading h2 {font-size:17px;margin:0 0 4px;}
.account-set-heading span,.account-game-number {font-size:12px;color:var(--muted);}
.account-game-number {margin:0 0 8px;}
.account-set-filter {display:flex;align-items:center;gap:16px;margin-bottom:18px;font-size:13px;}

.account-review-group>.account-review-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,252px),1fr));gap:22px;}