*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bar);color:var(--fg);font:14px/1.5 var(--font)}
.ms{font-family:'Material Symbols Outlined';font-size:20px;line-height:1;font-weight:normal;font-style:normal;display:inline-block;vertical-align:middle;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:var(--r-sm);min-height:28px;padding:0 6px}
button:hover{background:var(--hover)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent)}
button.primary{background:var(--accent);color:var(--accent-fg);padding:0 16px;min-height:36px;border-radius:18px}
button.primary:disabled{background:var(--active);color:var(--fg-dim);cursor:not-allowed}
input,select,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 8px}

#app{height:100%;max-width:100%;margin:0 auto;display:flex;flex-direction:column;background:var(--bg)}
#app.w-tablet{max-width:820px}#app.w-phone{max-width:390px}
#main{flex:1;display:flex;min-height:0}

/* アクティビティバー（幅48px=VSCode同等、MD3風の丸いインジケーター） */
#activity{width:48px;background:var(--bar);display:flex;flex-direction:column;align-items:center;padding:4px 0;gap:2px;flex:none}
#activity .sp{flex:1}
.act{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--fg-dim)}
.act.on{background:var(--pill);color:var(--fg)}
.act .dot{position:absolute;top:4px;right:4px;font-size:12px;color:var(--accent);background:var(--bar);border-radius:50%}

/* 左領域 */
#left{width:240px;min-width:160px;max-width:60vw;background:var(--side);border-right:1px solid var(--border);display:flex;flex-direction:column;resize:horizontal;overflow:auto;flex:none}
.lp{display:none;flex-direction:column;min-height:0;flex:1}.lp.on{display:flex}
.lp h2{margin:0;padding:8px 12px 4px;font-size:12px;font-weight:600;letter-spacing:.04em}
.lp .sync{height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:slide 1.2s linear infinite}
@keyframes slide{from{background-position:-40% 0}to{background-position:140% 0}}
@media(prefers-reduced-motion:reduce){.lp .sync{animation:none}}
.lp .body{overflow:auto;flex:1;padding:2px 0}
.row{display:flex;align-items:center;gap:4px;padding:0 6px 0 8px;min-height:28px;cursor:pointer}
.row:hover{background:var(--hover)}.row.sel{background:var(--active)}
.row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .ms{font-size:18px}.row.dim{color:var(--fg-dim)}.row .acts{display:flex;margin-left:auto}
.row .acts button{min-height:24px;padding:0 2px}
.row.hidden-file{opacity:.55}
.note{padding:8px 12px;color:var(--fg-dim);font-size:13px}
.field{display:flex;flex-direction:column;gap:4px;padding:4px 12px}.field input{width:100%}

/* ワークベンチ：上2 + 下1 */
#bench{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
#top{flex:1;display:flex;min-height:0}
.group{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--editor)}
.group+.group{border-left:1px solid var(--border)}
#g3{flex:none;height:35%;border-top:1px solid var(--border)}
.group[hidden]{display:none}
.tabs{display:flex;background:var(--side);overflow-x:auto;min-height:36px;align-items:stretch}
.tab{display:flex;align-items:center;gap:4px;padding:0 8px;border-right:1px solid var(--border);cursor:pointer;white-space:nowrap;color:var(--fg-dim)}
.tab.on{background:var(--editor);color:var(--fg);box-shadow:inset 0 2px var(--accent)}
.tab .x{min-height:24px;padding:0 2px}.tab .ms{font-size:16px}
.tabs .tools{margin-left:auto;display:flex;align-items:center;padding-right:4px}
.crumb{padding:2px 12px;color:var(--fg-dim);font-size:13px;border-bottom:1px solid var(--border)}
.pane{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.pane textarea{flex:1;border:0;border-radius:0;resize:none;font:14px/1.6 var(--mono);padding:8px 8px 8px 12px;outline:0;tab-size:2}
.pane iframe,.pane .md{flex:1;border:0;background:#fff;color:#222;overflow:auto;padding:0}
.pane .md{padding:12px 16px}
.banner{background:var(--active);padding:4px 12px;font-size:13px;color:var(--warn)}
.empty{margin:auto;color:var(--fg-dim);text-align:center}
.group.dropping{outline:2px dashed var(--accent);outline-offset:-2px}

/* ホーム：タブの上に重ねる */
#home{position:absolute;inset:0;background:var(--editor);z-index:5;overflow:auto;padding:20px}
#home[hidden]{display:none}
#home h1{font-size:20px;margin:0 0 12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{background:var(--side);border:1px solid var(--border);border-radius:var(--r);padding:12px}
.card h3{margin:0 0 6px;font-size:14px}

/* 使用量ゲージ */
.gauge{display:flex;height:14px;margin:4px 12px;border-radius:7px;overflow:hidden;background:var(--active)}
.gauge i{display:block;height:100%;position:relative}
.gauge i:hover::after{content:attr(data-tip);position:absolute;top:18px;left:0;background:var(--bar);border:1px solid var(--border);padding:2px 6px;border-radius:4px;white-space:nowrap;z-index:9;font-style:normal;font-size:12px}
.gauge.warn{outline:1px solid var(--warn)}.gauge.danger{outline:1px solid var(--danger)}
.rank{display:flex;gap:6px;padding:2px 12px;font-size:13px;align-items:center}.rank b{margin-left:auto;font-weight:400;color:var(--fg-dim)}
.sw{width:10px;height:10px;border-radius:3px;flex:none}

/* ステータスバー（右から：接続→プレビュー→処理） */
#status{display:flex;align-items:center;background:var(--accent);color:var(--accent-fg);min-height:26px;font-size:13px;padding:0 6px;gap:12px;flex:none}
#status .ms{font-size:16px}#status .right{margin-left:auto;display:flex;gap:12px;align-items:center}
#status button{min-height:22px;padding:0 6px;color:inherit}#status button:hover{background:rgba(255,255,255,.2)}
#status .s-low{overflow:hidden;white-space:nowrap}

/* ダイアログ（MD3風） */
dialog{border:0;border-radius:24px;background:var(--side);color:var(--fg);padding:24px;min-width:min(340px,90vw);box-shadow:0 8px 32px #0008}
dialog::backdrop{background:#0008}
dialog h3{margin:0 0 12px;font-size:20px;font-weight:500}
dialog .btns{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
dialog input{width:100%}
dialog .btns button{min-height:40px;padding:0 16px;border-radius:20px}

/* モック操作 */
#mockbtn{position:fixed;top:6px;right:6px;z-index:50;background:var(--bar);border:1px solid var(--border);border-radius:20px}
#mockmenu{position:fixed;top:44px;right:6px;z-index:50;background:var(--side);border:1px solid var(--border);border-radius:var(--r);padding:10px;display:grid;gap:6px}
#mockmenu[hidden]{display:none}
#toast{position:fixed;left:50%;bottom:48px;transform:translateX(-50%);background:var(--bar);border:1px solid var(--border);border-radius:var(--r);padding:8px 14px;z-index:60}
#toast[hidden]{display:none}

/* スマホ：下部ナビ（左領域/右領域の切替のみ） */
#bnav{display:none}
#app.w-phone #left{width:calc(100% - 48px);max-width:none;resize:none}
#app.w-phone[data-view=right] #left,#app.w-phone[data-view=left] #bench{display:none}
#app.w-phone #top{flex-direction:column}
#app.w-phone #bnav{display:flex;min-height:56px;background:var(--bar);border-top:1px solid var(--border);justify-content:space-around;align-items:center}
#app.w-phone #bnav button{min-height:44px;min-width:44px;display:flex;flex-direction:column;align-items:center;font-size:12px}
#app.w-phone button,#app.w-phone .row{min-height:44px}

/* 独立画面 */
#screens{position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto}
.scr{min-height:100%;display:grid;place-items:center;padding:56px 16px 16px}.scr[hidden]{display:none}
.box{width:min(420px,100%);background:var(--side);border:1px solid var(--border);border-radius:24px;padding:24px;text-align:center}
.box h1{font-size:20px;margin:0 0 12px}.big{font-size:120px!important}.code{font:600 40px var(--mono);letter-spacing:.1em;margin:16px 0}
.seg{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:12px}.seg button{border:1px solid var(--border);border-radius:16px;padding:0 12px;min-height:36px}.seg button.on{background:var(--pill)}
.msg{color:var(--fg-dim);min-height:22px}.msg.err{color:var(--danger)}.msg.ok{color:var(--ok)}
.btns2{display:flex;gap:8px;justify-content:center;margin:12px 0}.btns2 button{min-height:44px}.big-in{width:100%;font:24px var(--mono);text-align:center;min-height:48px}
#d-app h4{margin:12px 0 4px}#d-app .btns{flex-wrap:wrap}
/* 状態：読込中（スケルトン）/ エラー */
.skel .body,.skel #tree{animation:pulse 1s infinite alternate;opacity:.4;pointer-events:none}@keyframes pulse{to{opacity:.15}}
.errbar{background:var(--danger);color:#fff;padding:4px 12px;font-size:13px}

/* 管理・設定ページ（右エリア） */
.adm{padding:16px;overflow:auto;flex:1}.adm h2{margin:0 0 12px;font-size:18px}.adm h3{font-size:15px;margin:16px 0 6px}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border)}.tbl th{color:var(--fg-dim);font-weight:500;cursor:pointer}
.badge{display:inline-block;border:1px solid var(--border);border-radius:10px;padding:0 8px;font-size:13px}
.badge.b-warn{color:var(--warn);border-color:var(--warn)}.badge.b-ok{color:var(--ok);border-color:var(--ok)}.badge.b-ng{color:var(--danger);border-color:var(--danger)}
.bar{height:12px;border-radius:6px;background:var(--accent);min-width:2px}.adm .tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.adm .err{color:var(--danger);font-size:13px}.adm button.o{border:1px solid var(--border);padding:0 10px}
#app.w-phone .tbl thead{display:none}#app.w-phone .tbl tr{display:block;border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;padding:4px}
#app.w-phone .tbl td{display:flex;justify-content:space-between;border:0}#app.w-phone .tbl td::before{content:attr(data-l);color:var(--fg-dim)}

/* コードエディター：色付き<pre>の上に透明な<textarea>を重ねる */
.ed{flex:1;display:flex;min-height:0;font:14px/1.6 var(--mono)}
.gut{width:48px;flex:none;overflow:hidden;text-align:right;color:var(--fg-dim);padding:8px 8px 8px 0;white-space:pre;user-select:none;background:var(--editor)}
.ov{position:relative;flex:1;min-width:0}
.ed pre.hl,.ed textarea.in{position:absolute;inset:0;margin:0;padding:8px 12px 8px 4px;font:inherit;line-height:inherit;white-space:pre;tab-size:2;letter-spacing:0;border:0;border-radius:0;overflow:auto;width:100%;height:100%}
.ed pre.hl{overflow:hidden;pointer-events:none;color:var(--fg)}.ed pre.hl code{background:none;padding:0;font:inherit;display:block}
.ed textarea.in{background:transparent;color:transparent;caret-color:var(--fg);resize:none;outline:0;z-index:1}
.ed textarea.in::selection{background:var(--pill);color:transparent}

/* ===== v2：タッチ操作向けの余白、固定ツールボタン、新UI ===== */
[hidden]{display:none!important}
:root{--row:36px}
[data-density=compact]{--row:30px}[data-density=relaxed]{--row:44px}
#app.w-tablet,#app.w-phone{--row:44px}
@media (pointer:coarse){:root{--row:44px}}
button{min-height:calc(var(--row) - 4px);padding:0 10px}
input,select,textarea{min-height:calc(var(--row) - 4px);padding:4px 10px}
.row{min-height:var(--row);gap:8px;padding:0 10px 0 12px}
.row .acts button{min-height:calc(var(--row) - 6px);min-width:calc(var(--row) - 6px);padding:0 4px}
#activity{width:56px;padding:6px 0;gap:6px}
.act{width:44px;height:44px;border-radius:14px}
.act .dot{top:6px;right:6px}
.lp h2{padding:12px 14px 8px;font-size:13px}
.note{padding:8px 14px}.field{padding:6px 14px;gap:8px}
.adm{padding:20px}.adm .tools{gap:10px}.tbl th,.tbl td{padding:10px}
.seg button{min-height:44px}
dialog .btns button{min-height:44px}
/* タブ：スクロールするのはタブ列のみ。右のボタンは常時表示 */
.tabs{overflow:visible;min-height:var(--row)}
.tabs .ts{display:flex;flex:1;min-width:0;overflow-x:auto}
.tab{flex:none;min-height:var(--row);padding:0 8px 0 14px;gap:8px}
.tab .x{min-height:calc(var(--row) - 8px);min-width:28px;padding:0 2px}
.tabs .tools{margin-left:0;flex:none;display:flex;align-items:center;border-left:1px solid var(--border);padding:0 6px;gap:4px;background:var(--side)}
.dirty{width:10px;height:10px;border-radius:50%;background:#fff;border:1px solid var(--fg-dim);flex:none}
/* ログイン状態 */
#app.out .act:not([data-p=home]){display:none}
#app.out .only-in,#app:not(.out) .only-out{display:none!important}
.card[data-login]{cursor:pointer}.card[data-login]:hover{background:var(--hover)}
/* 利用状況：縦の積み上げ */
.uv{margin:8px 14px 12px;position:relative}.uv svg{display:block}.uv text{fill:var(--fg);font-size:14px}.uv .sub{fill:var(--fg-dim)}
.uv .seg1{cursor:pointer;stroke:var(--side);stroke-width:1}.uv .seg1:hover{opacity:.8}
#u-tip{position:fixed;z-index:70;background:var(--bar);color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:14px;max-width:300px;pointer-events:none;box-shadow:0 4px 16px #0006}
#u-tip b{display:block;margin-bottom:4px}#u-tip div{display:flex;justify-content:space-between;gap:16px}#u-tip .rest{color:var(--fg-dim);display:block;margin-top:4px}
details.ud{border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px}
details.ud summary{padding:12px;cursor:pointer;display:flex;gap:8px;align-items:center}details.ud summary b{margin-left:auto}
details.ud .tbl{width:calc(100% - 24px);margin:0 12px 10px}
/* 設定 */
.setrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.setrow small{display:block;color:var(--fg-dim)}
/* エディターの文字設定・折り返し・行番号 */
.ed{font:var(--ed-font,14px)/var(--ed-lh,1.6) var(--mono)}
.ed pre.hl,.ed textarea.in{tab-size:var(--tab,2)}
#app.wrap .ed pre.hl,#app.wrap .ed textarea.in{white-space:pre-wrap;word-break:break-all}#app.wrap .gut,#app.nogut .gut{display:none}
/* スマホ下ナビ：戻る 進む | メニュー | エディター プレビュー */
#app.w-phone #status{display:none}
#bnav .sep{width:1px;height:24px;background:var(--border);flex:none}
#app.w-phone #bnav{min-height:60px;gap:0}
#app.w-phone #bnav button{position:relative;flex:1.2;min-height:52px;font-size:14px;gap:2px;justify-content:center}
#app.w-phone #bnav #bn-back,#app.w-phone #bnav #bn-fwd{flex:.8}
#bnav .red{position:absolute;top:4px;left:calc(50% + 12px);width:10px;height:10px;border-radius:50%;background:#f14c4c}