/* ══════════════════════════════════════════════
   KeplerOCR UI — デザインシステム
   --accent（青紫）= ブランド／操作／人の記録
   --spark（青緑） = AIが生成したもの
   status（good/warn/crit）は状態専用。系列色に流用しない
   ══════════════════════════════════════════════ */
:root {
  /* コンテンツ面：明るい寒色グレー */
  --ground:#F6F7FB; --surface:#FFFFFF; --surface-2:#F1F3F9; --surface-3:#E7EAF3;
  --ink:#1A1D2E; --ink-2:#454B63; --muted:#767D95; --faint:#A2A9BE;
  --hairline:#E8EAF2; --hairline-2:#D8DCE8;
  /* ブランド／操作 */
  --accent:#5B50E8; --accent-soft:#EEECFE; --bright:#8B82F0;
  /* AIが生成したもの（ブランド色と混同しないよう別色相） */
  --spark:#0E8FA8; --spark-soft:#E1F3F8;
  /* 状態専用 */
  --good:#15803D; --good-soft:#DCFCE7; --warn:#A16207; --warn-soft:#FEF3C7;
  --crit:#DC2626; --crit-soft:#FEE2E2;
  /* サイドバー：ライト／ダークいずれでも濃紺で固定（この設計の signature） */
  --nav-bg:#1A1F33; --nav-ink:#C6CBDC; --nav-ink-2:#8990A8;
  --nav-hover:#252B42; --nav-hairline:#2B3149; --nav-faint:#6B7391;
  --shadow:0 1px 2px rgba(26,29,46,.05), 0 10px 30px -16px rgba(26,29,46,.22);
  --shadow-lg:0 2px 4px rgba(26,29,46,.05), 0 26px 60px -28px rgba(26,29,46,.34);
  --f-body:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",YuGothic,Meiryo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-data:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono",Consolas,"Roboto Mono",monospace;
  --f-display:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:48px;
  --r-pill:3px; --r-ctl:4px; --r-card:5px; --r-shell:7px;
}
/* 既定はライト。OSのダーク設定には自動追従しない（業務画面は明るい面を正とする）。
   ダークは表示テーマで明示選択したときだけ適用する。 */
:root[data-theme="dark"]{
  --ground:#0E1220; --surface:#171C2D; --surface-2:#1E2439; --surface-3:#2A3149;
  --ink:#E9ECF6; --ink-2:#B8BFD4; --muted:#8A92AC; --faint:#6B7391;
  --hairline:#262D42; --hairline-2:#343C56;
  --accent:#8B82F0; --accent-soft:#242043; --bright:#A79FF6;
  --spark:#3FBBD4; --spark-soft:#0E2B34;
  --good:#4ADE80; --good-soft:#0F2E1C; --warn:#FBBF24; --warn-soft:#2E2308;
  --crit:#F87171; --crit-soft:#341418;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 34px -16px rgba(0,0,0,.72);
  --shadow-lg:0 2px 4px rgba(0,0,0,.45), 0 26px 60px -28px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-body);font-size:13px;line-height:1.7;
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-ctl)}
[hidden]{display:none!important}

/* ══════════ 1. ログイン ══════════ */
.auth{display:grid;height:100dvh;grid-template-columns:1.05fr .95fr}
.auth-brand{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,#171B2C 0%,#1E2440 55%,#252148 100%);
  color:#EDEFF8;padding:clamp(32px,5vw,64px);
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
}
.auth-brand .mark{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:21px;letter-spacing:-.02em;position:relative;z-index:1}
.auth-copy{position:relative;z-index:1;max-width:560px;display:flex;flex-direction:column;gap:20px}
.auth-copy h1{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(24px,3.1vw,40px);line-height:1.5;letter-spacing:.01em;margin:0;text-wrap:balance;
}
.auth-copy p{margin:0;font-size:14px;line-height:1.9;color:#AEB4CC;max-width:400px}
.auth-legend{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px 22px;
  font-family:var(--f-data);font-size:10.5px;letter-spacing:.05em;color:#949BB6;
}
.auth-legend span{display:inline-flex;align-items:center;gap:7px}
.auth-legend b{width:9px;height:9px;border-radius:2px;display:inline-block}
.auth-glow{
  position:absolute;width:640px;height:640px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(91,80,232,.26),transparent 62%);
  right:-190px;top:-180px;
}
.auth-glow.two{background:radial-gradient(circle,rgba(14,143,168,.20),transparent 62%);right:auto;top:auto;left:-230px;bottom:-260px;width:520px;height:520px}
.auth-form{background:var(--surface);display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,56px);overflow-y:auto}
.auth-card{width:100%;max-width:352px;display:flex;flex-direction:column;gap:var(--sp-5)}
.auth-card h2{margin:0;font-size:19px;font-weight:700;letter-spacing:.01em}
.auth-card .sub{margin:-12px 0 0;font-size:12.5px;color:var(--muted)}
.field-set{display:flex;flex-direction:column;gap:6px}
.field-set label{font-size:12px;font-weight:700;color:var(--ink-2)}
.field-set input{
  padding:10px 12px;border:1px solid var(--hairline-2);border-radius:var(--r-ctl);
  background:var(--surface);color:var(--ink);font-size:13.5px;width:100%;
}
.field-set input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.field-set input::placeholder{color:var(--faint)}
.auth-submit{
  padding:11px;border:1px solid var(--accent);border-radius:var(--r-ctl);background:var(--accent);
  color:#fff;font-weight:700;font-size:14px;cursor:pointer;width:100%;
}
.auth-submit:hover{filter:brightness(1.08)}
.auth-submit:disabled{opacity:.6;cursor:default}
.auth-hint{
  border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface-2);
  padding:11px 13px;font-size:11.5px;color:var(--muted);line-height:1.75;
}
.auth-hint b{color:var(--ink-2);font-family:var(--f-data);font-size:11px}
.auth-foot{font-size:11px;color:var(--faint);text-align:center}

/* ══════════ 2. アプリシェル ══════════ */
.app{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100dvh;--nav-w:236px;
  transition:grid-template-columns .18s ease}
/* 折り畳み時。中身が滲み出ないよう padding とスクロールも殺す */
.app.nav-collapsed{--nav-w:0px}
.app.nav-collapsed>.side{padding-left:0;padding-right:0;overflow:hidden}
.app.nav-collapsed>.side>*{visibility:hidden}

/* ハンバーガー。3本線は開状態で×に変形させて現在の状態が分かるようにする */
.navtoggle{
  flex:none;width:32px;height:32px;display:grid;place-content:center;gap:5px;
  background:none;border:1px solid transparent;border-radius:var(--r-ctl);cursor:pointer;padding:0;
}
.navtoggle:hover{background:var(--surface-2);border-color:var(--hairline-2)}
.navtoggle span{display:block;width:16px;height:1.5px;background:var(--ink-2);border-radius:1px;
  transition:transform .18s ease,opacity .18s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:39;border:0}
.workarea{display:grid;grid-template-rows:56px 1fr;min-height:0;min-width:0}
.topbar{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:0 var(--sp-6);background:var(--surface);border-bottom:1px solid var(--hairline);z-index:5;
}
.logo{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:-.015em;background:none;border:0;cursor:pointer;padding:0;color:#fff}
.crumb{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;min-width:0}
.crumb a{color:var(--muted);text-decoration:none;cursor:pointer;white-space:nowrap}
.crumb a:hover{color:var(--accent);text-decoration:underline}
.crumb b{color:var(--ink);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}
.av{
  width:24px;height:24px;border-radius:50%;background:var(--surface-3);color:var(--muted);
  display:grid;place-items:center;font-size:10px;font-family:var(--f-data);flex:none;
}
.side{background:var(--nav-bg);display:flex;flex-direction:column;gap:2px;padding:0 var(--sp-3) var(--sp-3);overflow-y:auto;min-height:0}
.side-top{height:56px;display:flex;align-items:center;flex:none;margin:0 calc(var(--sp-3) * -1) var(--sp-3);padding:0 var(--sp-5)}
.side a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:6px;color:var(--nav-ink);text-decoration:none;font-size:13px;cursor:pointer}
.side a:hover{background:var(--nav-hover);color:#fff}
.side a[aria-current="page"]{background:var(--accent);color:#fff;font-weight:700}
.side a.child{padding-left:40px;font-size:12.5px;color:var(--nav-ink-2)}
.side a.child:hover{color:#fff}
.side .grp{padding:var(--sp-5) 12px var(--sp-1);font-family:var(--f-data);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--nav-faint)}
.side svg{flex:none;opacity:.7}
.side a:hover svg,.side a[aria-current="page"] svg{opacity:1}
.side-foot{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--nav-hairline);display:flex;align-items:center;gap:9px;color:var(--nav-ink);font-size:12px;flex:none}
.side-foot .av{background:var(--accent);color:#fff}
.side-foot small{display:block;color:var(--nav-faint);font-size:10.5px}
.side-foot span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.main{overflow:auto;padding:var(--sp-6);min-height:0}
.main.flush{padding:0;overflow:hidden}
.page-h{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.page-h h1{margin:0;font-size:19px;font-weight:700;letter-spacing:.01em}
.page-h p{margin:0;font-size:12px;color:var(--muted)}
.page-h .act{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ── 素 ─────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:5px;padding:5px 11px;
  border:1px solid var(--hairline-2);border-radius:var(--r-ctl);background:var(--surface);
  font-size:12px;color:var(--ink-2);white-space:nowrap;cursor:pointer;
}
.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.45;cursor:default}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.btn.pri:hover:not(:disabled){filter:brightness(1.08);color:#fff}
.btn.ai{background:var(--spark);border-color:var(--spark);color:#fff;font-weight:700}
.btn.ai:hover:not(:disabled){filter:brightness(1.08);color:#fff}
.btn.danger:hover:not(:disabled){border-color:var(--crit);color:var(--crit)}
.btn.sm{padding:2px 8px;font-size:11px}
.sel,.inp{
  padding:5px 9px;border:1px solid var(--hairline-2);border-radius:var(--r-ctl);
  background:var(--surface);color:var(--ink);font-size:12px;
}
.sel{cursor:pointer;color:var(--ink-2)}
.inp::placeholder{color:var(--faint)}
.inp.grow{flex:1;min-width:160px}
textarea.inp{line-height:1.6;resize:vertical}
label.lbl{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted)}
label.lbl>span{font-weight:700;color:var(--ink-2);font-size:11.5px}
label.chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);cursor:pointer}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:var(--sp-3)}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:var(--sp-2);padding:9px 14px;border-bottom:1px solid var(--hairline);background:var(--surface-2)}
.card-h h2{margin:0;font-size:13px;font-weight:700}
.card-h .more{margin-left:auto;font-size:11.5px;color:var(--accent);cursor:pointer}
.card-b{padding:var(--sp-4)}
/* 幅が足りないときはセルを潰さず横スクロールさせる */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:12px}
th{
  text-align:left;padding:8px 10px;font-family:var(--f-data);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400;
  border-bottom:1px solid var(--hairline-2);white-space:nowrap;background:var(--surface);
  position:sticky;top:0;z-index:1;
}
td{padding:9px 10px;border-bottom:1px solid var(--hairline);vertical-align:top;line-height:1.6}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover td{background:var(--surface-2)}
td input.inp,td select.sel{width:100%;padding:3px 6px;font-size:11.5px}
.n{font-family:var(--f-data);font-variant-numeric:tabular-nums;white-space:nowrap}
.dim{color:var(--muted)}
.nm{font-weight:700}
.code{font-family:var(--f-data);font-size:10px;color:var(--muted);display:block}
.pill{
  display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:var(--r-pill);
  font-size:11px;line-height:1.6;white-space:nowrap;border:1px solid transparent;
}
.pill.ok{background:var(--good-soft);color:var(--good);border-color:var(--good)}
.pill.wait{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.pill.no{background:var(--crit-soft);color:var(--crit);border-color:var(--crit)}
.pill.mute{background:var(--surface-3);color:var(--muted);border-color:var(--hairline-2)}
.pill.ch{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.pill.ai{background:var(--spark-soft);color:var(--spark);border-color:var(--spark)}
.tag{display:inline-block;padding:1px 7px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2);font-size:11px;white-space:nowrap}
.ai-label{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--f-data);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--spark);
}
.ai-label::before{
  content:"";width:9px;height:9px;background:var(--spark);flex:none;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
.spark{color:var(--spark)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--hairline);margin-bottom:var(--sp-4);flex-wrap:wrap}
.tabs button{padding:7px 14px;border:0;border-bottom:2px solid transparent;background:none;font-size:12.5px;color:var(--muted);cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}

/* ── 統計タイル ── */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-2);margin-bottom:var(--sp-4)}
.kpi{border:1px solid var(--hairline);border-radius:var(--r-card);padding:10px 12px;background:var(--surface);display:flex;flex-direction:column;gap:1px}
.kpi .lb{font-size:11px;color:var(--muted)}
.kpi .vl{font-family:var(--f-data);font-size:22px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi .st{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--faint)}

/* ── レイアウト ── */
.split{display:grid;gap:var(--sp-4);align-items:start}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);align-items:start}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.row{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.note{font-size:11.5px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-3)}
.form-grid .full{grid-column:1/-1}
.drop{border:1px dashed var(--hairline-2);border-radius:var(--r-card);padding:var(--sp-10);text-align:center;color:var(--muted);font-size:12.5px;background:var(--surface-2)}
.empty{padding:var(--sp-10) var(--sp-4);text-align:center;color:var(--muted);font-size:12.5px}

/* ══════════ 3. 書類ワークスペース ══════════ */
.ws{display:grid;grid-template-columns:260px 6px 1fr 6px minmax(320px,1fr);height:100%;min-height:0}
.ws-list{border-right:1px solid var(--hairline);background:var(--surface);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ws-list-head{padding:var(--sp-3);border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:6px}
.ws-list-body{overflow-y:auto;min-height:0;flex:1}
.ws-item{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-bottom:1px solid var(--hairline);cursor:pointer}
.ws-item:hover{background:var(--surface-2)}
.ws-item[aria-current="true"]{background:var(--accent-soft)}
.ws-item .t{display:flex;align-items:baseline;gap:6px}
.ws-item .fn{font-size:12px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-item .mt{font-family:var(--f-data);font-size:10px;color:var(--muted);flex:none}
.grpline{padding:7px 11px 3px;font-family:var(--f-data);font-size:9.5px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;background:var(--surface-2)}
.resizer{background:var(--hairline);cursor:col-resize}
.resizer:hover{background:var(--accent)}
.viewer{overflow:auto;background:var(--surface-3);position:relative;min-width:0;display:flex;justify-content:center;align-items:flex-start;padding:var(--sp-4)}
.img-wrap{position:relative;flex:none;transform-origin:top center}
.img-wrap img{display:block;max-width:none;box-shadow:var(--shadow-lg);background:#fff}
.ov{position:absolute;inset:0;pointer-events:none}
.ov b{position:absolute;border:2px solid var(--accent);background:rgba(91,80,232,.12);border-radius:2px;display:block}
.ov b.hot{border-color:var(--crit);background:rgba(220,38,38,.16)}
.sel-layer{position:absolute;inset:0;cursor:crosshair;background:rgba(26,31,51,.06)}
.sel-box{position:absolute;border:2px dashed var(--spark);background:rgba(14,143,168,.12)}
.fields{overflow-y:auto;background:var(--surface);border-left:1px solid var(--hairline);padding:var(--sp-4);min-width:0}
.fld{display:grid;grid-template-columns:130px 1fr auto;gap:8px;align-items:start;padding:6px 0;border-bottom:1px solid var(--hairline)}
.fld>label{font-size:11.5px;color:var(--ink-2);font-weight:700;padding-top:5px;overflow-wrap:anywhere}
.fld .val{display:flex;flex-direction:column;gap:3px;min-width:0}
.fld .val input,.fld .val textarea{width:100%}
.fld.hot>label{color:var(--crit)}
.fld .meta{display:flex;gap:5px;align-items:center;flex-wrap:wrap;font-size:10.5px;color:var(--muted)}
.items-wrap{overflow-x:auto;margin-top:var(--sp-3)}
.items-wrap table{min-width:640px}

/* ══════════ 4. モーダル ══════════ */
.modal{position:fixed;inset:0;background:rgba(16,20,34,.5);display:grid;place-items:center;z-index:60;padding:var(--sp-4)}
.modal-card{background:var(--surface);border-radius:var(--r-shell);box-shadow:var(--shadow-lg);width:min(720px,100%);max-height:90vh;display:flex;flex-direction:column}
.modal-card.wide{width:min(1080px,100%)}
.modal-h{display:flex;align-items:center;gap:var(--sp-2);padding:12px 16px;border-bottom:1px solid var(--hairline)}
.modal-h h2{margin:0;font-size:14px;font-weight:700}
.modal-h .x{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;padding:0 4px}
.modal-b{padding:var(--sp-4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-3)}
.modal-f{display:flex;align-items:center;gap:var(--sp-2);padding:12px 16px;border-top:1px solid var(--hairline);background:var(--surface-2)}
.modal-f .spacer{margin-left:auto}

/* ══════════ 5. 通知・オーバーレイ ══════════ */
.toasts{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;gap:8px;max-width:380px}
.toast{
  background:var(--surface);border:1px solid var(--hairline-2);border-left:3px solid var(--accent);
  border-radius:var(--r-card);box-shadow:var(--shadow-lg);padding:10px 13px;font-size:12px;color:var(--ink-2);
}
.toast.ok{border-left-color:var(--good)}
.toast.err{border-left-color:var(--crit)}
.toast.warn{border-left-color:var(--warn)}
.busy{position:fixed;inset:0;background:rgba(16,20,34,.45);display:grid;place-items:center;z-index:90}
.busy-card{background:var(--surface);border-radius:var(--r-shell);box-shadow:var(--shadow-lg);padding:24px 32px;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:260px}
.spinner{width:28px;height:28px;border:3px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.busy-title{font-size:13px;font-weight:700}
.busy-sub{font-size:11.5px;color:var(--muted)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .ws{grid-template-columns:210px 6px 1fr 6px minmax(280px,1fr)}
}
@media (max-width:1024px){
  .auth{grid-template-columns:1fr}
  .auth-brand{display:none}
  /* 本文の幅を確保するため、狭い画面では常に列幅0。開いたときは本文に重ねる */
  .app{grid-template-columns:0 1fr}
  .app:not(.nav-collapsed)>.side{
    position:fixed;top:0;bottom:0;left:0;width:236px;z-index:40;
    padding:0 var(--sp-3) var(--sp-3);box-shadow:var(--shadow);
  }
  .grid2{grid-template-columns:1fr}
  .ws{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .ws .resizer{display:none}
}