/* 紫福院さんちのデザインスタジオ — コアのスタイル */
:root {
  --bg0: #121118; --bg1: #18171f; --bg2: #201f2a; --bg3: #2a2935; --bg4: #363547;
  --line: #34334a; --text: #ebe9f5; --dim: #9b99b0; --faint: #6f6d85;
  --accent: #9a78ff; --accent2: #c7b3ff; --accent-bg: rgba(154,120,255,.17);
  --danger: #ff6b81; --ok: #5ee0a0; --warn: #ffc857;
  --pasteboard: #0f0e15; --ruler-bg: #1a1923; --ruler-fg: #8d8ba3;
  --font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg0: #e6e5ee; --bg1: #f3f2f8; --bg2: #ffffff; --bg3: #ebeaf3; --bg4: #d9d8e6;
  --line: #d0cfdf; --text: #25232f; --dim: #6a677d; --faint: #9a97ad;
  --accent: #7a52f0; --accent2: #5a35d0; --accent-bg: rgba(122,82,240,.12);
  --pasteboard: #cdccd9; --ruler-bg: #efeef5; --ruler-fg: #6a677d; color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg0); color: var(--text); font: 13px/1.45 var(--font); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
input, textarea { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; }
.spacer { flex: 1; }
.dim { color: var(--dim); }
.ico { display: block; }
.ico-wrap { display: inline-flex; align-items: center; justify-content: center; }
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ---- ヘッダー ---- */
#menubar { height: 40px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 8px; background: var(--bg1); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 7px; margin-right: 10px; white-space: nowrap; color: var(--dim); font-size: 12px; }
.brand b { color: var(--text); font-size: 13.5px; letter-spacing: .02em; }
.brand .logo { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #b79bff, #7a52f0); position: relative; display: inline-block; }
.brand .logo::after { content: ""; position: absolute; left: 5px; top: 4px; width: 10px; height: 12px; border-left: 2px solid #fff; border-right: 2px solid #fff; transform: skewX(-12deg); opacity: .0; }
#menus { display: flex; }
.m-btn { background: none; border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--text); white-space: nowrap; flex: none; }
#menubar.brand-short .brand .long { display: none; } #menubar.brand-min .brand b { display: none; }
#menubar > *, #hdr-right > * { flex-shrink: 0; } .hdr-btn, .mode-sw button { white-space: nowrap; }
.m-btn:hover, .m-btn.open { background: var(--bg3); }
#hdr-right { display: flex; align-items: center; gap: 6px; }
.hdr-btn { height: 28px; }
.hdr-btn.wide { gap: 6px; padding: 0 10px; color: var(--dim); }
.mode-sw { display: flex; background: var(--bg3); border-radius: 8px; padding: 2px; }
.mode-sw button { border: 0; background: none; padding: 3px 10px; border-radius: 6px; cursor: pointer; color: var(--dim); font-size: 12px; }
.mode-sw button.on { background: var(--accent); color: #fff; }
.dock-toggle { display: none !important; }

/* ---- オプションバー ---- */
#optionsbar { min-height: 42px; flex: none; display: flex; align-items: center; gap: 12px; padding: 4px 10px; background: var(--bg2); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
#optionsbar::-webkit-scrollbar { height: 6px; }
.ob-tool { display: flex; align-items: center; gap: 6px; padding-right: 12px; border-right: 1px solid var(--line); font-weight: 600; color: var(--accent2); flex: none; }
.ob-form { display: flex; align-items: center; gap: 14px; flex: none; }
.ob-extra { display: flex; align-items: center; gap: 8px; flex: none; }
.ob-help { color: var(--faint); font-size: 12px; padding-left: 12px; }
.ob-more { flex: none; } .ob-more.on { background: var(--accent-bg); color: var(--accent2); }
.ob-pop { z-index: 160; min-width: 300px; max-width: min(420px, 94vw); max-height: 70vh; overflow-y: auto; padding: 8px 14px; }
.ob-pop .f-chk { white-space: nowrap; }
.ob-pop .f-range { flex: 1; } .ob-pop input[type=range] { min-width: 90px; }

/* ---- メイン ---- */
#main { flex: 1; display: flex; min-height: 0; position: relative; }
#toolbox { width: 52px; flex: none; background: var(--bg1); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 2px; overflow-y: auto; overflow-x: hidden; }
#toolbox::-webkit-scrollbar { width: 0; }
.tb { width: 40px; height: 36px; flex: none; border: 0; border-radius: 9px; background: none; color: var(--dim); position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tb:hover { background: var(--bg3); color: var(--text); }
.tb.on { background: var(--accent-bg); color: var(--accent2); box-shadow: inset 0 0 0 1px var(--accent); }
.tb-tri { position: absolute; right: 3px; bottom: 3px; width: 0; height: 0; border: 3px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; opacity: .55; }
.tb-sep { width: 28px; height: 1px; background: var(--line); margin: 5px 0; flex: none; }
.tb-sec { width: 100%; flex: none; display: flex; align-items: center; gap: 3px; margin: 7px 0 1px; padding: 0 5px; box-sizing: border-box; font-size: 9.5px; letter-spacing: .02em; color: var(--dim); line-height: 1; white-space: nowrap; }
.tb-sec::before, .tb-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tb-sec:empty::after { display: none; }
.tb-sec.first { margin-top: 1px; }
.tb-act { color: var(--text); }
.tb-act.off { opacity: .32; cursor: default; }
.tb-act.off:hover { background: none; color: var(--dim); }
.tb-colors { position: relative; width: 40px; height: 44px; margin-top: auto; flex: none; }
.tb-colors .fgc, .tb-colors .bgc { position: absolute; width: 22px; height: 22px; border-radius: 5px; border: 2px solid var(--bg1); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; background: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#999 0 25%, #fff 0 50%) 0 0/8px 8px; }
.tb-colors .fgc { left: 3px; top: 2px; z-index: 2; } .tb-colors .bgc { left: 15px; top: 14px; }
.tb-colors .swp, .tb-colors .rst { position: absolute; border: 0; background: none; color: var(--dim); font-size: 9px; padding: 0; cursor: pointer; line-height: 1; }
.tb-colors .swp { right: 0; top: 0; } .tb-colors .rst { left: 0; bottom: 0; }
#workspace { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
#tabs { height: 34px; flex: none; display: flex; align-items: flex-end; gap: 2px; padding: 0 6px; background: var(--bg0); overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); }
#tabs::-webkit-scrollbar { height: 0; }
.tab { display: flex; align-items: center; gap: 6px; height: 29px; padding: 0 6px 0 12px; border-radius: 8px 8px 0 0; background: var(--bg1); color: var(--dim); cursor: pointer; max-width: 220px; flex: none; border: 1px solid var(--line); border-bottom: 0; }
.tab:hover { color: var(--text); }
.tab.on { background: var(--bg2); color: var(--text); box-shadow: inset 0 2px 0 var(--accent); }
.tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-x, .tab-add { border: 0; background: none; color: var(--dim); width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.tab-x:hover, .tab-add:hover { background: var(--bg4); color: var(--text); }
.tab-add { margin: 0 0 4px 4px; }
#stagewrap { flex: 1; min-height: 0; min-width: 0; overflow: hidden; display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: 20px minmax(0, 1fr); }
#stagewrap.no-rulers { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
#stagewrap.no-rulers #ruler-top, #stagewrap.no-rulers #ruler-left, #stagewrap.no-rulers #ruler-corner { display: none; }
#ruler-corner { background: var(--ruler-bg); grid-column: 1; grid-row: 1; }
#ruler-top { grid-column: 2; grid-row: 1; display: block; cursor: row-resize; min-width: 0; max-width: 100%; }
#ruler-left { grid-column: 1; grid-row: 2; display: block; cursor: col-resize; min-height: 0; max-height: 100%; }
#stage { grid-column: 2; grid-row: 2; position: relative; background: var(--pasteboard); overflow: hidden; min-width: 0; min-height: 0; }
#stage canvas { position: absolute; left: 0; top: 0; }
#stage, #stage canvas { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* ペン・指のドラッグをブラウザのスクロールに取られない（描画が途切れない）ようにする */
#empty { position: absolute; inset: 0; overflow: auto; display: flex; }
#dropzone { position: absolute; inset: 8px; border: 2px dashed var(--accent); border-radius: 16px; background: rgba(154,120,255,.14); display: none; align-items: center; justify-content: center; text-align: center; font-size: 18px; pointer-events: none; z-index: 5; color: var(--accent2); }
#dropzone.on { display: flex; }
#dropzone small { font-size: 12px; color: var(--dim); }
#statusbar { height: 28px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 10px; background: var(--bg1); border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; }
#st-xy { min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.st-zoom { display: flex; align-items: center; gap: 4px; }
.st-zoom input { width: 58px; }
#dock-resizer { width: 5px; flex: none; cursor: col-resize; background: var(--bg1); border-left: 1px solid var(--line); }
#dock-resizer:hover { background: var(--accent-bg); }
#dock { width: 300px; flex: none; background: var(--bg1); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; min-width: 0; }
.dock-hidden #dock, .dock-hidden #dock-resizer { display: none; }
.pf { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); min-height: 34px; flex: none; }
.pf-head { display: flex; align-items: center; background: var(--bg0); height: 32px; flex: none; }
.pf-tabs { display: flex; flex: 1; overflow: hidden; }
.pf-tab { display: flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--dim); padding: 0 11px; height: 32px; cursor: pointer; border-bottom: 2px solid transparent; font-size: 12.5px; white-space: nowrap; }
.pf-tab:hover { color: var(--text); }
.pf-tab.on { color: var(--text); border-bottom-color: var(--accent); background: var(--bg1); }
.pf-col { border: 0; background: none; color: var(--dim); width: 28px; height: 28px; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.pf-col:hover { background: var(--bg3); }
.pf.collapsed .pf-col .ico { transform: rotate(-90deg); }
.pf-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.pf.collapsed .pf-body { display: none; }
.pf-pane { min-height: 100%; }

/* ---- ボタン・入力 ---- */
.btn { border: 1px solid var(--line); background: var(--bg3); color: var(--text); border-radius: 7px; padding: 6px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center; font-size: 12.5px; }
.btn:hover { background: var(--bg4); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 3px 9px; font-size: 12px; border-radius: 6px; }
.btn.icon { padding: 3px; width: 24px; height: 24px; }
.btn.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent2); }
.btn:disabled, .btn.disabled { opacity: .4; pointer-events: none; }
input.txt, textarea.txt, select.sel, input.num { background: var(--bg0); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; font: inherit; font-size: 12.5px; min-width: 0; outline: none; }
input.txt:focus, textarea.txt:focus, select.sel:focus, input.num:focus { border-color: var(--accent); }
textarea.txt { width: 100%; resize: vertical; }
select.sel { padding: 4px 22px 4px 7px; max-width: 190px; }
input.num { width: 58px; text-align: right; -moz-appearance: textfield; }
input.num.wide { width: 74px; }
input.num::-webkit-inner-spin-button { opacity: .5; }
input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 18px; background: transparent; flex: 1; min-width: 70px; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--bg4) var(--p, 0%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; margin-top: -5px; box-shadow: 0 0 0 2px var(--accent), 0 1px 3px rgba(0,0,0,.4); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--bg4); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.unit { color: var(--faint); font-size: 11.5px; margin-left: 3px; }
.f-chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.f-color { width: 36px; height: 22px; border-radius: 5px; border: 1px solid var(--line); background: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#999 0 25%, #fff 0 50%) 0 0/8px 8px; cursor: pointer; padding: 0; flex: none; }
.f-range, .f-num, .f-angle { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.f-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.f-info { color: var(--dim); font-size: 12px; line-height: 1.5; }
.f-dial { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg0); position: relative; cursor: pointer; flex: none; }
.f-dial i { position: absolute; left: 50%; top: 50%; width: 50%; height: 2px; margin-top: -1px; background: var(--accent); transform-origin: 0 50%; }
.form .f-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.form .f-row > label { width: 86px; flex: none; color: var(--dim); font-size: 12.5px; }
.form .f-row > label.f-chk { width: auto; flex: 1; } /* チェック項目の文字が細い列に折り返されないように */
.form .f-row.wide { flex-direction: column; align-items: stretch; gap: 4px; }
.form .f-row.wide > label { width: auto; }
.form .f-sec { margin: 12px 0 4px; font-size: 11.5px; color: var(--accent2); font-weight: 600; letter-spacing: .04em; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.form .f-sep { height: 1px; background: var(--line); margin: 8px 0; }
.form.compact { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
.form.compact .f-row { margin: 0; flex: none; }
.form.compact .f-row > label { width: auto; }
.form.compact .f-sec { display: none; }
.form.compact .f-sep { width: 1px; height: 22px; margin: 0; }
.form.compact .f-range { flex: none; } .form.compact input[type=range] { width: 90px; flex: none; min-width: 60px; }
.form.compact .f-row.wide { flex-direction: row; align-items: center; }

/* ---- ダイアログ ---- */
.dlg-backdrop { position: fixed; inset: 0; background: rgba(6,5,12,.58); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 12px; }
.dlg { background: var(--bg2); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 24px 70px rgba(0,0,0,.55); max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.dlg.side { position: fixed; z-index: 90; max-height: 78vh; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.dlg-title { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--bg1); flex: none; }
.dlg-title span { flex: 1; }
.dlg-x { border: 0; background: none; color: var(--dim); cursor: pointer; border-radius: 6px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0; }
.dlg-x:hover { background: var(--bg4); color: var(--text); }
.dlg-body { padding: 14px 16px; overflow: auto; min-height: 0; }
.dlg-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); flex: none; background: var(--bg1); }
.dlg-btns:empty { display: none; }
.dlg-msg { margin: 0 0 8px; line-height: 1.6; white-space: pre-wrap; }
.dlg.palette .dlg-title { display: none; } .dlg.palette { margin-bottom: 28vh; }
.dlg.palette .dlg-body { padding: 10px; }
.pal-in { width: 100%; font-size: 15px; padding: 9px 12px; }
.pal-list { margin-top: 8px; max-height: 50vh; overflow: auto; }
.pal-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.pal-item.on { background: var(--accent-bg); }
.pal-item.disabled { opacity: .45; }
.pal-label { flex: none; } .pal-sub { flex: 1; color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-empty { padding: 20px; text-align: center; color: var(--dim); }
.busy { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(10,9,16,.35); color: #fff; font-size: 14px; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--accent2); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bar { height: 8px; background: var(--bg0); border-radius: 4px; overflow: hidden; } .bar-in { height: 100%; width: 0; background: var(--accent); transition: width .15s; }

/* ---- メニュー ---- */
.menu { position: fixed; z-index: 200; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 5px; min-width: 230px; box-shadow: 0 14px 44px rgba(0,0,0,.5); max-height: calc(100vh - 20px); overflow-y: auto; }
.menu-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.menu-item:hover { background: var(--accent-bg); }
.menu-item.disabled { opacity: .38; pointer-events: none; }
.mi-check { width: 16px; display: inline-flex; color: var(--accent2); } .mi-ico { width: 18px; display: inline-flex; color: var(--dim); }
.mi-label { flex: 1; } .mi-key { color: var(--faint); font-size: 11.5px; margin-left: 22px; } .mi-arrow { color: var(--dim); margin-left: 12px; }
.menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu-head { padding: 5px 8px; font-size: 11px; color: var(--faint); }
.popup { position: fixed; z-index: 150; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: 0 14px 44px rgba(0,0,0,.5); }
.cp { display: flex; flex-direction: column; gap: 8px; width: 220px; }
.cp canvas { display: block; border-radius: 6px; cursor: crosshair; touch-action: none; }
.cp-hue, .cp-alpha { cursor: pointer !important; }
.cp-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cp-row label { color: var(--faint); font-size: 11px; } .cp-row .num { width: 44px; padding: 3px 4px; } .cp-hex { width: 88px; font-family: ui-monospace, monospace; }
.cp-cur { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); flex: none; }
.cp-sw { display: flex; flex-wrap: wrap; gap: 4px; } .cp-sw .sw { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line); cursor: pointer; padding: 0; }
#toasts { position: fixed; bottom: 44px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; max-width: 92vw; }
.toast { background: var(--bg4); color: var(--text); border: 1px solid var(--line); padding: 8px 14px; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.45); font-size: 12.5px; animation: tin .2s ease; transition: opacity .3s, transform .3s; }
.toast.out { opacity: 0; transform: translateY(8px); } .toast.error { border-color: var(--danger); } .toast.ok { border-color: var(--ok); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }
#loading { position: fixed; inset: 0; z-index: 999; background: radial-gradient(circle at 50% 40%, #2a2146, #0f0e15 70%); display: flex; align-items: center; justify-content: center; transition: opacity .35s; color: #fff; }
#loading.off { opacity: 0; pointer-events: none; }
.ld-in { text-align: center; } .ld-logo { width: 54px; height: 54px; border-radius: 15px; background: linear-gradient(135deg, #b79bff, #7a52f0); margin: 0 auto 14px; box-shadow: 0 10px 30px rgba(122,82,240,.5); }
.ld-title { font-size: 18px; font-weight: 700; letter-spacing: .03em; } .ld-sub { color: #aaa; margin: 6px 0 14px; font-size: 12px; } .ld-in .spin { margin: 0 auto; }
::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; border: 2px solid transparent; } ::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 900px) {
  .brand .long, .hdr-btn.wide > span:not(.ico-wrap), .mode-sw button { font-size: 0; }
  .brand .long, .hdr-btn.wide > span:not(.ico-wrap) { display: none; }
  .mode-sw button { font-size: 11px; padding: 3px 7px; }
  .brand b { display: none; }
  #dock { position: fixed; right: 0; top: 40px; bottom: 28px; z-index: 60; transform: translateX(102%); transition: transform .2s; width: min(88vw, 340px) !important; box-shadow: -12px 0 40px rgba(0,0,0,.5); }
  .dock-open #dock { transform: none; } #dock-resizer { display: none; }
  .dock-toggle { display: inline-flex !important; }
  #toolbox { width: 46px; } .tb { width: 36px; }
  .m-btn { padding: 6px 7px; }
  #st-doc, .st-zoom .btn:not(:last-child) { display: none; }
}
/* 画面の高さが低いときは、ツールバーのボタンを少し詰めてスクロールしないようにする */
@media (max-height: 820px) { .tb { height: 32px; } #toolbox { gap: 1px; padding: 4px 0; } .tb-sec { margin-top: 4px; } .tb-colors { height: 40px; } }
@media (max-height: 700px) { .tb { height: 28px; } .tb-sec { margin-top: 2px; } .tb-colors { height: 34px; } }

/* ---- 作業モード（デザイン / イラスト）---- */
.ws-sw button { display: inline-flex; align-items: center; gap: 4px; }
.ws-sw button.on { background: linear-gradient(135deg, #7a52f0, #d0509b); }
html[data-ws="illust"] #menubar { box-shadow: inset 0 -2px 0 #d0509b; }
html[data-ws="illust"] #toolbox .tb.on { box-shadow: 0 0 0 1px #d0509b; }
@media (max-width: 900px) { .ws-sw button > span { display: none; } }