/* Three complete layouts; shared DOM keeps data, selection and handlers intact. */
[hidden]{display:none!important}
form input[type="checkbox"]{display:inline-block;width:auto;margin:0 8px;vertical-align:middle;accent-color:var(--accent)}
body{background:var(--bg);--bg:#0b1d25;--surface:#122830;--field:#193039;--line:#2a4048;--accent:#42c5b5;--selected:#203e43}
body[data-theme="night"]{--bg:#101923;--surface:#182430;--field:#22303d;--line:#33414e;--accent:#6bbdbf;--selected:#263d46}
body[data-theme="focus"]{--bg:#161e20;--surface:#202a2c;--field:#293336;--line:#3b4749;--accent:#74b5a4;--selected:#30413e}
.locker{background:var(--bg);box-shadow:none;border-radius:12px}
.accounts,.detail{background:var(--surface);border:0}
.search,.data-row{background:var(--field)}
.search{border-radius:8px;height:42px}
.search input::placeholder{color:var(--muted)}
.brand small,.detail-title small,nav button.active{color:var(--text)}
.brand small{font-size:12px;color:var(--muted)}
.primary:hover{background:var(--accent);filter:brightness(1.08)}
.side-bottom label{font-size:12px;color:var(--muted);padding-left:12px}
.side-bottom select{margin:0;min-height:44px;background:var(--surface)}
.detail-title button{min-width:44px;min-height:44px}
.security{border-top:1px solid var(--line)}
button{transition:background-color 120ms ease}
@media(prefers-reduced-motion:reduce){button{transition:none}}
.locker{width:min(1440px,calc(100vw - 40px));height:min(760px,calc(100dvh - 76px));min-height:560px}
.intro{display:none;padding:32px 24px;background:var(--surface)}
.intro h1{font-size:32px;line-height:1.35;margin:0 0 20px;text-wrap:balance}
.intro p{font-size:14px;color:var(--muted);line-height:1.8}
.intro span{display:block;margin-top:48px;color:var(--muted);font-size:12px}
.topbar{display:none;padding:18px 24px;align-items:center;gap:24px;border-bottom:1px solid var(--line)}
.topbar span{color:var(--muted);font-size:12px}
/* 1: branded introduction + category rail + list + generous detail. */
body[data-theme="teal"] .locker{grid-template-columns:190px 180px minmax(0,1fr)}
body[data-theme="teal"] .intro{display:block;grid-column:1;grid-row:1}
body[data-theme="teal"] aside{grid-column:2;grid-row:1;padding-top:28px}
body[data-theme="teal"] .workspace{grid-column:3;grid-row:1}
body[data-theme="teal"] .body{grid-template-columns:minmax(240px,.9fr) minmax(300px,1.1fr)}
/* 3: full-width toolbar, left navigation and spacious stacked cards. */
body[data-theme="night"] .locker{grid-template-columns:210px minmax(0,1fr);grid-template-rows:64px minmax(0,1fr)}
body[data-theme="night"] .topbar{display:flex;grid-column:1/-1;grid-row:1}
body[data-theme="night"] aside{grid-column:1;grid-row:2}
body[data-theme="night"] .workspace{grid-column:2;grid-row:2}
body[data-theme="night"] .account{margin-bottom:12px;background:var(--field);border-radius:10px;min-height:84px}
body[data-theme="night"] .account.selected{background:var(--selected)}
body[data-theme="night"] .detail{padding:28px}
body[data-theme="night"] .data-row{display:block;padding:16px;margin-bottom:14px}
body[data-theme="night"] .data-row label{display:block;width:auto;margin-bottom:10px}
/* 4: horizontal brand/navigation, category chips, wide tabular rows. */
body[data-theme="focus"] .locker{display:flex;flex-direction:column}
body[data-theme="focus"] aside{flex-direction:row;align-items:center;flex-wrap:wrap;gap:16px;padding:16px 22px;border-right:0;border-bottom:1px solid var(--line)}
body[data-theme="focus"] .brand{margin:0;margin-right:auto}
body[data-theme="focus"] .side-bottom{margin:0;display:flex;align-items:center;gap:10px}
body[data-theme="focus"] .side-bottom select{width:auto}
body[data-theme="focus"] nav{order:3;display:flex;flex-wrap:wrap;width:100%;gap:8px}
body[data-theme="focus"] nav button{padding:8px 12px;background:var(--surface);border-radius:20px}
body[data-theme="focus"] nav button.active{background:var(--selected)}
body[data-theme="focus"] nav button.active:before{display:none}
body[data-theme="focus"] .workspace{flex:1;min-height:0}
body[data-theme="focus"] .body{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)}
body[data-theme="focus"] .account{border-radius:0;border-bottom:1px solid var(--line);min-height:64px}
body[data-theme="focus"] .account>span:last-child{display:grid;grid-template-columns:minmax(100px,1fr) minmax(120px,1fr);gap:16px;flex:1;align-items:center;min-width:0}
body[data-theme="focus"] .account small{margin:0;max-width:none}
@media(max-width:1100px){body[data-theme="teal"] .locker{grid-template-columns:180px minmax(0,1fr)}body[data-theme="teal"] .intro{display:none}body[data-theme="teal"] aside{grid-column:1}body[data-theme="teal"] .workspace{grid-column:2}}
@media(max-width:900px){.locker{min-height:0;height:calc(100dvh - 100px)}body[data-theme] .body{grid-template-columns:1fr}body[data-theme="night"] .locker{grid-template-columns:170px minmax(0,1fr)}body[data-theme="focus"] .side-bottom{flex-wrap:wrap}body[data-theme="focus"] .account>span:last-child{display:block}body[data-theme="focus"] .account small{margin-top:4px}}
@media(max-width:600px){body{padding:8px}.locker{width:calc(100vw - 16px)}body[data-theme="teal"] .locker,body[data-theme="night"] .locker{display:flex;flex-direction:column}body[data-theme] aside{padding:12px;border-right:0;max-height:210px;overflow:auto}body[data-theme] nav{display:flex;flex-wrap:wrap;gap:4px}body[data-theme] .brand{margin:0 0 10px}body[data-theme] .side-bottom{display:flex;flex-wrap:wrap;margin-top:8px}body[data-theme] .side-bottom select{width:auto}body[data-theme] .workspace{flex:1;min-height:0}.preview{font-size:10px}.topbar{display:none!important}header{gap:8px}header button{padding:10px}.detail{padding:16px}}