/* KiQHub Office — shell and shared components. Editors add docs.css / sheets.css / slides.css. */
:root {
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f3;
  --text: #1f2328;
  --text-2: #3b4148;
  --muted: #6b7280;
  --border: #e0e3e8;
  --border-strong: #c8ccd2;
  --hover: rgba(15, 23, 42, .06);
  --active: rgba(15, 23, 42, .10);
  --accent: #4C5BD4;
  --accent-2: #103f91;
  --accent-weak: #e8f0fb;
  --accent-text: #ffffff;
  --brand: #1e2a4a;
  --danger: #c42b1c;
  --ok: #0f7b3f;
  --warn: #b35c00;
  --radius: 6px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  --shadow-2: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-3: 0 16px 48px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);
  --topbar-h: 48px;
  --status-h: 26px;
  color-scheme: light;
}
html[data-theme=dark] {
  --bg: #1b1d21;
  --surface: #25282d;
  --surface-2: #2c3036;
  --surface-3: #33373e;
  --text: #e8eaed;
  --text-2: #c9cdd3;
  --muted: #9aa1ab;
  --border: #3a3f47;
  --border-strong: #4b515b;
  --hover: rgba(255,255,255,.07);
  --active: rgba(255,255,255,.12);
  --accent-weak: rgba(96, 153, 255, .16);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,.45);
  --shadow-3: 0 16px 48px rgba(0,0,0,.6);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 13.5px/1.4 var(--font-ui); color: var(--text); background: var(--bg); overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
.ico { flex: none; display: block; }
[hidden] { display: none !important; }

/* boot */
.boot { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--muted); }
.boot-mark { display: flex; gap: 6px; }
.boot-mark span { width: 18px; height: 24px; border-radius: 4px; animation: bootpulse 1.2s infinite ease-in-out; }
.boot-mark span:nth-child(1) { background: #F0643A; }
.boot-mark span:nth-child(2) { background: #0E9F6E; animation-delay: .15s; }
.boot-mark span:nth-child(3) { background: #3563E9; animation-delay: .3s; }
@keyframes bootpulse { 0%, 100% { transform: translateY(0); opacity: .6 } 50% { transform: translateY(-6px); opacity: 1 } }

/* ── app frame ───────────────────────────────────────────────────────────────────────────── */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 6px; background: var(--accent); color: #fff; position: relative; z-index: 30; }
.app[data-view=home] .topbar { background: linear-gradient(90deg, #1e2a4a, #2c3e6b); }
.topbar .k-icon-btn { color: #fff; }
.topbar .k-icon-btn:hover { background: rgba(255,255,255,.15); }
.tb-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 0 8px 0 2px; white-space: nowrap; cursor: pointer; border-radius: 6px; height: 36px; }
.tb-brand:hover { background: rgba(255,255,255,.12); }
.tb-brand img { width: 26px; height: 26px; border-radius: 7px; }
.tb-brand small { font-weight: 400; opacity: .8; }
.apptabs { display: flex; gap: 2px; background: rgba(0,0,0,.18); padding: 3px; border-radius: 9px; margin-left: 4px; }
.apptab { display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: rgba(255,255,255,.88); height: 32px; padding: 0 12px 0 8px; border-radius: 7px; font-weight: 500; white-space: nowrap; position: relative; }
.apptab:hover { background: rgba(255,255,255,.14); color: #fff; }
.apptab.on { background: #fff; color: var(--tab-color, #1f2328); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.apptab .appmark { width: 20px !important; height: 20px !important; border-radius: 5px !important; }
.apptab.on .appmark { box-shadow: none; }
.apptab .dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ffd24c; }
.apptab.on .dot { display: none; }
.tb-doc { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: 8px; }
.tb-title { background: transparent; border: 1px solid transparent; color: #fff; font-size: 14px; font-weight: 500; padding: 4px 8px; border-radius: 5px; max-width: 280px; min-width: 60px; text-overflow: ellipsis; }
.tb-title:hover { border-color: rgba(255,255,255,.35); }
.tb-title:focus { background: #fff; color: var(--text); outline: none; }
.tb-status { display: flex; align-items: center; gap: 5px; font-size: 12px; opacity: .9; white-space: nowrap; padding: 3px 7px; border-radius: 5px; cursor: default; }
.tb-status:hover { background: rgba(255,255,255,.12); }
.tb-status.offline { background: rgba(0,0,0,.22); }
.tb-spacer { flex: 1; min-width: 8px; }
.tb-search { position: relative; width: min(360px, 28vw); }
.tb-search input { width: 100%; height: 32px; border: 0; border-radius: 6px; padding: 0 10px 0 32px; background: rgba(255,255,255,.18); color: #fff; outline: none; transition: background .15s; }
.tb-search input::placeholder { color: rgba(255,255,255,.8); }
.tb-search input:focus { background: #fff; color: var(--text); }
.tb-search input:focus::placeholder { color: var(--muted); }
.tb-search .ico { position: absolute; left: 8px; top: 7px; color: rgba(255,255,255,.9); pointer-events: none; }
.tb-search:focus-within .ico { color: var(--muted); }
.tb-avatars { display: flex; align-items: center; padding: 0 4px; }
.tb-avatars .avatar { margin-left: -6px; border: 2px solid var(--accent); }
.tb-avatars .avatar:first-child { margin-left: 0; }
.tb-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; font-weight: 600; white-space: nowrap; }
.tb-btn:hover { background: rgba(255,255,255,.15); }
.tb-btn.solid { background: #fff; color: var(--accent); border-color: #fff; }
.tb-btn.solid:hover { background: #f1f4f9; }
.tb-btn.ai { background: linear-gradient(135deg, #7c3aed, #db2777); border-color: transparent; }
.tb-btn.ai:hover { filter: brightness(1.08); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; flex: none; background: #7C5CD6; user-select: none; }
.avatar.lg { width: 44px; height: 44px; font-size: 16px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10.5px; }
.tb-me { border: 0; padding: 0; background: none; border-radius: 50%; }
.tb-me .avatar { border: 2px solid rgba(255,255,255,.7); }

.ribbon-host { flex: none; position: relative; z-index: 20; }
.workspace { flex: 1; min-height: 0; display: flex; position: relative; }
.views { flex: 1; min-width: 0; position: relative; }
.view { position: absolute; inset: 0; display: none; }
.view.on { display: flex; }
.editor-host { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.statusbar { height: var(--status-h); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 10px; background: var(--surface-2); border-top: 1px solid var(--border); color: var(--text-2); font-size: 12px; user-select: none; }
.statusbar .sb-left, .statusbar .sb-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.statusbar .sb-left { flex: 1; overflow: hidden; white-space: nowrap; }
.sb-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sb-btn { border: 0; background: transparent; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; color: inherit; font-size: 12px; }
.sb-btn:hover { background: var(--hover); }
.sb-btn.on { background: var(--active); }
.sb-zoom { display: flex; align-items: center; gap: 4px; }
.sb-zoom input[type=range] { width: 110px; accent-color: var(--accent); }
.sb-zoom .pct { min-width: 40px; text-align: right; }

/* side panel */
.sidepanel { width: 360px; flex: none; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; position: relative; }
.sidepanel.wide { width: 420px; }
.sp-head { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--border); flex: none; }
.sp-head h3 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; display: flex; align-items: center; gap: 8px; }
.sp-tabs { display: flex; gap: 2px; }
.sp-tab { border: 0; background: transparent; padding: 6px 10px; border-radius: 5px; color: var(--muted); font-weight: 500; }
.sp-tab.on { background: var(--accent-weak); color: var(--accent); }
.sp-body { flex: 1; overflow: auto; min-height: 0; }
.sp-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }

/* ── buttons & inputs ────────────────────────────────────────────────────────────────────── */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 500; white-space: nowrap; }
.k-btn:hover { background: var(--surface-2); }
.k-btn:disabled { opacity: .5; cursor: default; }
.k-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.k-btn.primary:hover { background: var(--accent-2); }
.k-btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.k-btn.ghost { border-color: transparent; background: transparent; }
.k-btn.ghost:hover { background: var(--hover); }
.k-btn.sm { height: 26px; padding: 0 9px; font-size: 12.5px; }
.k-btn.lg { height: 40px; padding: 0 20px; font-size: 14.5px; }
.k-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 5px; color: var(--text-2); flex: none; }
.k-icon-btn:hover { background: var(--hover); }
.k-icon-btn.on { background: var(--active); }
.k-input { width: 100%; height: 32px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 10px; background: var(--surface); color: var(--text); outline: none; }
textarea.k-input { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.45; }
select.k-input { padding-right: 6px; }
.k-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }
.k-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.k-field > span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.k-field small { color: var(--muted); }
.k-field.half { display: inline-flex; width: calc(50% - 6px); }
.k-field.half + .k-field.half { margin-left: 12px; }
.k-check { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; cursor: pointer; }
.k-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.k-form { display: flex; flex-wrap: wrap; }
.k-form > * { width: 100%; }
.k-msg { margin: 0 0 8px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; }
.k-seg { display: inline-flex; background: var(--surface-3); border-radius: 7px; padding: 2px; gap: 2px; }
.k-seg button { border: 0; background: transparent; padding: 4px 10px; border-radius: 5px; display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); }
.k-seg button.on { background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); }
.k-spinner { display: inline-block; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: kspin .8s linear infinite; flex: none; }
@keyframes kspin { to { transform: rotate(360deg); } }
.k-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--text-2); }
.k-badge.accent { background: var(--accent-weak); color: var(--accent); }
.k-kbd { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); }
.k-drop { outline: 3px dashed var(--accent); outline-offset: -8px; }
.k-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.k-empty .ico { margin: 0 auto 10px; opacity: .6; }

/* tabs view */
.k-tabs-head { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.k-tabs-head button { border: 0; background: transparent; padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font-weight: 500; }
.k-tabs-head button.on { color: var(--accent); border-bottom-color: var(--accent); }

/* ── menus & popovers ────────────────────────────────────────────────────────────────────── */
.k-menu { position: fixed; z-index: 1000; min-width: 180px; max-width: 420px; max-height: calc(100vh - 16px); overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-2); padding: 4px; outline: none; animation: kpop .08s ease-out; }
@keyframes kpop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.k-menu-item { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 4px; border-radius: 5px; cursor: default; white-space: nowrap; user-select: none; width: 100%; border: 0; background: transparent; text-align: left; }
.k-menu-item.active, .k-menu-item:hover { background: var(--hover); }
.k-menu-item.disabled { opacity: .45; }
.k-menu-check { width: 18px; display: flex; justify-content: center; color: var(--accent); }
.k-menu-icon { width: 20px; display: flex; justify-content: center; color: var(--text-2); }
.k-menu-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--border-strong); margin: 0 2px; }
.k-menu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.k-menu-label small { display: block; font-size: 11.5px; color: var(--muted); margin-top: -2px; }
.k-menu-item:has(small) { height: auto; padding-top: 5px; padding-bottom: 5px; }
.k-menu-key { color: var(--muted); font-size: 12px; margin-left: 16px; }
.k-menu-sub { color: var(--muted); }
.k-menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.k-menu-header { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 6px 8px 3px; text-transform: none; }
.k-popover { padding: 8px; }
.k-colorpicker { width: 236px; }
.k-swatches { display: grid; grid-template-columns: repeat(10, 20px); gap: 2px; padding: 2px 4px 6px; }
.k-swatches.tints { gap: 0 2px; padding-top: 0; }
.k-swatch { width: 20px; height: 20px; border: 1px solid rgba(0,0,0,.12); border-radius: 2px; padding: 0; }
.k-swatches.tints .k-swatch { height: 16px; border-radius: 0; }
.k-swatch:hover { outline: 2px solid var(--accent); outline-offset: 0; z-index: 1; position: relative; }
.k-swatch.on { outline: 2px solid var(--text); }
.k-color-row, .k-color-auto { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 6px 8px; border-radius: 5px; text-align: left; cursor: pointer; }
.k-color-row:hover, .k-color-auto:hover { background: var(--hover); }
.k-color-auto .k-swatch { width: 16px; height: 16px; }
.k-color-input { width: 0; height: 0; opacity: 0; position: absolute; }

/* ── modal ───────────────────────────────────────────────────────────────────────────────── */
.k-modal-back { position: fixed; inset: 0; background: rgba(15, 20, 30, .38); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; animation: kfade .12s; }
@keyframes kfade { from { opacity: 0; } }
.k-modal { background: var(--surface); color: var(--text); border-radius: 10px; box-shadow: var(--shadow-3); max-width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; animation: kzoom .14s ease-out; }
@keyframes kzoom { from { transform: scale(.97); opacity: 0; } }
.k-modal-head { display: flex; align-items: center; padding: 14px 12px 6px 20px; }
.k-modal-head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; }
.k-modal-body { padding: 8px 20px 12px; overflow: auto; min-height: 0; }
.k-modal-body.nopad { padding: 0; }
.k-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; }

/* toasts & tips */
.k-toasts { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 1100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.k-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 560px; padding: 9px 8px 9px 12px; background: #2b2f36; color: #fff; border-radius: 8px; box-shadow: var(--shadow-3); animation: kup .18s ease-out; }
.k-toast.out { opacity: 0; transform: translateY(8px); transition: .25s; }
@keyframes kup { from { transform: translateY(10px); opacity: 0; } }
.k-toast-ico { color: #8ab4f8; display: flex; }
.k-toast.success .k-toast-ico { color: #6fd08c; }
.k-toast.error .k-toast-ico { color: #ff8a80; }
.k-toast.warn .k-toast-ico { color: #ffcf6e; }
.k-toast-msg { flex: 1; }
.k-toast .k-icon-btn { color: #cfd4da; width: 24px; height: 24px; }
.k-toast-act { border: 0; background: transparent; color: #8ab4f8; font-weight: 600; padding: 4px 8px; border-radius: 4px; }
.k-tip { position: fixed; z-index: 1200; max-width: 280px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-2); border-radius: 6px; padding: 7px 10px; font-size: 12px; pointer-events: none; display: none; }
.k-tip b { font-weight: 600; }
.k-tip p { margin: 4px 0 0; color: var(--text-2); }
/* help bubble: a tooltip with an explanation — a little rounder, with a soft accent edge */
.k-tip.help { max-width: 300px; border-radius: 12px; padding: 9px 12px 10px; border-left: 3px solid color-mix(in srgb, var(--accent, #4C5BD4) 70%, transparent); }
.k-tip .k-tip-hint { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; line-height: 1.4; }

/* ── ribbon ──────────────────────────────────────────────────────────────────────────────── */
.rb { background: var(--surface); border-bottom: 1px solid var(--border); user-select: none; }
.rb-tabs { display: flex; align-items: flex-end; height: 34px; padding: 0 8px; gap: 1px; overflow-x: auto; scrollbar-width: none; }
.rb-tabs::-webkit-scrollbar { display: none; }
.rb-tab { border: 0; background: transparent; height: 32px; padding: 0 11px; color: var(--text-2); position: relative; white-space: nowrap; border-radius: 5px 5px 0 0; font-size: 13.5px; }
.rb-tab:hover { background: var(--hover); color: var(--text); }
.rb-tab.on { color: var(--accent); font-weight: 600; }
.rb-tab.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 2px; background: var(--accent); }
.rb-file { color: var(--accent); font-weight: 600; }
.rb-file:hover { background: var(--accent-weak); }
.rb-ctx { display: flex; align-items: flex-end; position: relative; padding-top: 0; margin-left: 4px; }
.rb-ctx-label { display: none; }
.rb-tab.ctx { color: var(--ctx); }
.rb-tab.ctx::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ctx); opacity: .8; border-radius: 3px 3px 0 0; }
.rb-tab.ctx.on::after { background: var(--ctx); }
.rb-tabs-fill { flex: 1; }
.rb-collapse { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 5px; color: var(--muted); display: flex; align-items: center; justify-content: center; align-self: center; }
.rb-collapse:hover { background: var(--hover); }
.rb-body { display: flex; align-items: stretch; height: 94px; padding: 4px 6px 0; overflow: hidden; }
.rb.collapsed .rb-body { display: none; }
.rb.collapsed.peek .rb-body { display: flex; position: absolute; left: 0; right: 0; top: 34px; background: var(--surface); box-shadow: var(--shadow-2); z-index: 5; }
.rb-group { display: flex; flex-direction: column; padding: 0 5px; position: relative; flex: none; }
.rb-group + .rb-group::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 8px; width: 1px; background: var(--border); }
.rb-group-items { flex: 1; display: flex; align-items: flex-start; gap: 2px; padding-top: 2px; }
.rb-group-label { height: 20px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; position: relative; }
.rb-launcher { position: absolute; right: -4px; bottom: 3px; width: 16px; height: 16px; border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; border-radius: 3px; padding: 0; }
.rb-launcher:hover { background: var(--hover); }
.rb-btn { border: 0; background: transparent; color: var(--text); border-radius: 5px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; position: relative; }
.rb-btn:hover { background: var(--hover); }
.rb-btn.on { background: var(--accent-weak); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.rb-btn:disabled { opacity: .4; cursor: default; background: transparent; }
.rb-btn.large { flex-direction: column; justify-content: flex-start; height: 70px; min-width: 50px; padding: 4px 6px 2px; gap: 3px; }
.rb-btn.large .rb-label { font-size: 12px; line-height: 1.15; text-align: center; white-space: normal; max-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rb-btn.large .rb-ico { color: var(--accent); }
.rb-btn.small { height: 23px; padding: 0 5px; font-size: 12.5px; }
.rb-btn.icon { width: 26px; height: 24px; justify-content: center; padding: 0; }
.rb-btn .rb-ico { display: flex; position: relative; }
.rb-btn .rb-caret { opacity: .7; margin-left: -1px; }
.rb-btn.has-menu.small { padding-right: 3px; }
.rb-split { display: inline-flex; border-radius: 5px; }
.rb-split:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.rb-split .rb-btn { border-radius: 5px 0 0 5px; }
.rb-split-arrow { border: 0; background: transparent; border-radius: 0 5px 5px 0; width: 14px; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--text-2); }
.rb-split-arrow:hover { background: var(--hover); }
.rb-split.large { flex-direction: column; }
.rb-split.large .rb-btn { border-radius: 5px 5px 0 0; height: 50px; }
.rb-split.large .rb-split-arrow { width: auto; height: 18px; border-radius: 0 0 5px 5px; }
.rb-split.disabled { opacity: .4; pointer-events: none; }
.rb-stack { display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.rb-row { display: flex; align-items: center; gap: 1px; }
.rb-col { display: flex; flex-direction: column; gap: 1px; }
.rb-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 3px; }
.rb-text { font-size: 12px; color: var(--muted); padding: 0 4px; }
.rb-select { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 4px; height: 25px; background: var(--surface); }
.rb-select:hover { border-color: var(--muted); }
.rb-select-input { border: 0; background: transparent; height: 23px; padding: 0 4px 0 6px; font-size: 12.5px; outline: none; cursor: default; min-width: 0; text-overflow: ellipsis; }
.rb-select.editable .rb-select-input { cursor: text; }
.rb-select-arrow { border: 0; background: transparent; width: 18px; height: 23px; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--text-2); }
.rb-select-menu { max-height: 420px; }
.rb-color-ico { flex-direction: column; align-items: center; }
.rb-colorbar { display: block; width: 16px; height: 4px; margin-top: -3px; border-radius: 1px; }
.rb-btn.large .rb-colorbar { width: 26px; height: 5px; }
.rb-colorbar.none { box-shadow: inset 0 0 0 1px var(--border-strong); }
.rb-numwrap { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); height: 25px; }
.rb-num { height: 23px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 4px; background: var(--surface); font-size: 12.5px; }
.rb-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; height: 25px; padding: 0 4px; border-radius: 4px; }
.rb-check:hover { background: var(--hover); }
.rb-check input { accent-color: var(--accent); margin: 0; }
.rb-gallery { display: flex; height: calc(var(--gh, 56px) + 5px); max-height: 72px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); width: 330px; align-self: flex-start; margin-top: 1px; }
.rb-gallery.wide { width: 440px; }
.rb-gallery-items { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; overflow: hidden; gap: 3px 2px; padding: 2px; scroll-behavior: smooth; }
.rb-gallery-item { width: var(--gw); height: var(--gh); flex: none; border: 1px solid transparent; background: transparent; border-radius: 4px; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rb-gallery-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.rb-gallery-item.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rb-gallery-side { display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.rb-gallery-nav { flex: 1; width: 16px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--text-2); }
.rb-gallery-nav:hover { background: var(--hover); }
.rb-gallery-popover { max-width: min(640px, 96vw); }
.rb-gallery-pop { display: grid; grid-template-columns: repeat(auto-fill, var(--gw)); gap: 4px; width: min(600px, 90vw); max-height: 420px; overflow: auto; padding: 2px; }
.rb-gallery-extra { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 4px; }
.rb-pop .rb-group-items { display: flex; gap: 2px; padding: 4px; }
.rb-collapsed .rb-group-items { display: none; }

/* ── home ────────────────────────────────────────────────────────────────────────────────── */
.home { flex: 1; display: flex; min-width: 0; background: var(--bg); }
.home-nav { width: 232px; flex: none; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); background: var(--surface); overflow: auto; }
.home-nav button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; height: 36px; padding: 0 10px; border-radius: 7px; color: var(--text-2); text-align: left; font-weight: 500; }
.home-nav button:hover { background: var(--hover); }
.home-nav button.on { background: var(--accent-weak); color: var(--accent); }
.home-nav .k-badge { margin-left: auto; }
.home-nav hr { border: 0; border-top: 1px solid var(--border); margin: 10px 4px; width: auto; }
.home-nav .nav-h { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 8px 10px 4px; }
.home-nav .storage { margin-top: auto; padding: 10px; font-size: 12px; color: var(--muted); }
.home-nav .storage .bar { height: 5px; background: var(--surface-3); border-radius: 3px; margin: 6px 0; overflow: hidden; }
.home-nav .storage .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.home-main { flex: 1; min-width: 0; overflow: auto; padding: 24px 32px 60px; }
.home-main h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.home-main .sub { color: var(--muted); margin: 0 0 20px; }
.home-section { margin-bottom: 28px; }
.home-section > h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.home-section > h2 .k-btn { margin-left: auto; }
.new-row { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 8px; }
.new-card { flex: none; width: 150px; border: 0; background: transparent; padding: 0; text-align: left; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.new-card .thumb { width: 150px; height: 108px; flex: none; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; transition: transform .12s, box-shadow .12s; }
.new-card:hover .thumb { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.new-card .name { font-weight: 500; margin-top: 7px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.new-card .desc { font-size: 11.5px; color: var(--muted); }
.new-card.blank .thumb { background: var(--surface); }
.new-card .ai-badge { position: absolute; top: 6px; right: 6px; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.tpl-art { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 10px 12px; gap: 5px; }
.tpl-art i { display: block; height: 5px; border-radius: 3px; background: var(--surface-3); }
.home-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.home-toolbar .k-input { max-width: 320px; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px; }
.file-card { border: 1px solid var(--border); background: var(--surface); border-radius: 9px; overflow: hidden; cursor: pointer; position: relative; transition: box-shadow .12s, border-color .12s; }
.file-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.file-card .fc-thumb { height: 116px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); overflow: hidden; }
.file-card .fc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.file-card .fc-meta { padding: 9px 10px; display: flex; gap: 9px; align-items: flex-start; }
.file-card .fc-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card .fc-sub { font-size: 11.5px; color: var(--muted); display: flex; gap: 5px; align-items: center; }
.file-card .fc-menu { position: absolute; top: 6px; right: 6px; background: var(--surface); box-shadow: var(--shadow-1); opacity: 0; }
.file-card:hover .fc-menu { opacity: 1; }
.file-card .fc-star { position: absolute; top: 6px; left: 6px; color: #f5b400; }
.file-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.file-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; cursor: default; }
.file-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.file-table tr:last-child td { border-bottom: 0; }
.file-table tbody tr { cursor: pointer; }
.file-table tbody tr:hover { background: var(--surface-2); }
.file-table .ft-name { display: flex; align-items: center; gap: 10px; max-width: 480px; }
.file-table .ft-name span { overflow: hidden; text-overflow: ellipsis; }
.file-table .muted { color: var(--muted); }
.file-table .ft-actions { text-align: right; width: 40px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 6px; border-radius: 9px; background: var(--surface-3); color: var(--text-2); }
.chip.offline { background: #fff3d6; color: #8a5a00; }
html[data-theme=dark] .chip.offline { background: rgba(255,200,80,.15); color: #ffcf6e; }
.import-box { border: 2px dashed var(--border-strong); border-radius: 10px; padding: 18px; display: flex; align-items: center; gap: 16px; background: var(--surface); color: var(--text-2); }
.import-box .fmts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.import-box .fmt { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; color: #fff; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.person-row:last-child { border-bottom: 0; }
.person-row .pr-main { flex: 1; min-width: 0; }
.person-row .pr-main b { font-weight: 600; display: block; }
.person-row .pr-main small { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: var(--accent-weak); color: var(--text); margin-bottom: 18px; }
.banner.warn { background: #fff6e0; }
html[data-theme=dark] .banner.warn { background: rgba(255,190,60,.12); }
.banner .grow { flex: 1; }

/* ── backstage (File tab) ────────────────────────────────────────────────────────────────── */
.backstage { position: absolute; left: 0; right: 0; bottom: 0; top: var(--topbar-h); z-index: 40; display: flex; background: var(--surface); animation: kslide .16s ease-out; }
@keyframes kslide { from { transform: translateX(-12px); opacity: 0; } }
.bs-nav { width: 220px; flex: none; background: var(--accent); color: #fff; display: flex; flex-direction: column; padding: 10px 0; overflow: auto; }
.bs-nav button { border: 0; background: transparent; color: #fff; text-align: left; height: 40px; padding: 0 22px; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.bs-nav button:hover { background: rgba(255,255,255,.14); }
.bs-nav button.on { background: rgba(0,0,0,.2); font-weight: 600; }
.bs-nav hr { border: 0; border-top: 1px solid rgba(255,255,255,.25); margin: 8px 18px; }
.bs-nav .bs-back { height: 48px; }
.bs-main { flex: 1; overflow: auto; padding: 32px 44px; min-width: 0; }
.bs-main h1 { font-size: 26px; font-weight: 300; margin: 0 0 22px; }
.bs-main h2 { font-size: 15px; font-weight: 600; margin: 24px 0 10px; }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.bs-tile { display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--border); background: var(--surface); padding: 12px 14px; border-radius: 9px; }
.bs-tile:hover { border-color: var(--accent); background: var(--accent-weak); }
.bs-tile b { display: block; font-weight: 600; }
.bs-tile small { color: var(--muted); }
.bs-info { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; max-width: 640px; }
.bs-info dt { color: var(--muted); }
.bs-info dd { margin: 0; }

/* ── AI panel ────────────────────────────────────────────────────────────────────────────── */
.ai-panel { display: flex; flex-direction: column; height: 100%; }
.ai-msgs { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ai-hello { text-align: center; padding: 18px 8px 4px; color: var(--text-2); }
.ai-hello .spark { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #7c3aed, #db2777); }
.ai-hello h4 { margin: 0 0 4px; font-size: 15px; color: var(--text); }
.ai-sugg { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ai-sugg button { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 8px 10px; text-align: left; color: var(--text); display: flex; gap: 8px; align-items: center; }
.ai-sugg button:hover { border-color: #a78bfa; background: rgba(124,58,237,.06); }
.ai-msg { border-radius: 10px; padding: 9px 12px; max-width: 100%; line-height: 1.5; overflow-wrap: anywhere; }
.ai-msg.user { align-self: flex-end; background: var(--accent-weak); color: var(--text); max-width: 88%; white-space: pre-wrap; }
.ai-msg.bot { background: var(--surface-2); border: 1px solid var(--border); }
.ai-msg.bot p { margin: 0 0 8px; }
.ai-msg.bot p:last-child { margin-bottom: 0; }
.ai-msg.bot ul, .ai-msg.bot ol { margin: 4px 0 8px; padding-left: 20px; }
.ai-msg.bot table { border-collapse: collapse; font-size: 12.5px; margin: 6px 0; }
.ai-msg.bot td, .ai-msg.bot th { border: 1px solid var(--border); padding: 3px 6px; }
.ai-msg.bot pre { background: var(--surface-3); padding: 8px; border-radius: 6px; overflow: auto; }
.ai-msg.err { background: #fdecea; color: #8c1d18; border: 1px solid #f5c2bd; }
.ai-pic { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-3); margin-bottom: 8px; }
.ai-pic-wait { display: flex; align-items: center; gap: 10px; color: var(--muted); }
html[data-theme=dark] .ai-msg.err { background: rgba(255,90,80,.12); color: #ffb4ab; border-color: rgba(255,90,80,.3); }
.ai-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ai-input { border-top: 1px solid var(--border); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.ai-input textarea { width: 100%; resize: none; border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 42px 9px 11px; min-height: 42px; max-height: 160px; background: var(--surface); outline: none; line-height: 1.4; }
.ai-input textarea:focus { border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,.18); }
.ai-input .send { position: absolute; right: 6px; bottom: 7px; }
.ai-input .row { position: relative; }
.ai-input .ai-foot { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; }
.ai-typing { display: inline-flex; gap: 3px; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; animation: bootpulse 1s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }

/* comments panel */
.cm-list { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.cm-thread { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 10px 12px; cursor: pointer; }
.cm-thread.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cm-thread.resolved { opacity: .65; }
.cm-quote { font-size: 12px; color: var(--muted); border-left: 3px solid #f5b400; padding-left: 8px; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-item { display: flex; gap: 8px; margin-top: 8px; }
.cm-item:first-of-type { margin-top: 0; }
.cm-body { flex: 1; min-width: 0; }
.cm-body .who { font-weight: 600; font-size: 12.5px; }
.cm-body .when { font-size: 11px; color: var(--muted); margin-left: 6px; font-weight: 400; }
.cm-body .txt { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.cm-reply { margin-top: 8px; display: flex; gap: 6px; }
.cm-reply textarea { flex: 1; min-height: 32px; }
.cm-new { padding: 10px; border-bottom: 1px solid var(--border); }

/* share dialog */
.share-add { display: flex; gap: 8px; margin-bottom: 14px; position: relative; }
.share-add .k-input { flex: 1; }
.share-people { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; }
.share-link { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: var(--surface-2); }
.share-link .grow { flex: 1; min-width: 0; }
.share-link b { display: block; }
.share-link small { color: var(--muted); }
.sugg-list { position: absolute; top: 34px; left: 0; right: 0; z-index: 3; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-2); max-height: 220px; overflow: auto; }
.sugg-list button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 7px 10px; text-align: left; }
.sugg-list button:hover, .sugg-list button.on { background: var(--hover); }

/* auth */
.auth-wrap { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 20% 0%, rgba(24,90,189,.35), transparent), radial-gradient(900px 500px at 100% 100%, rgba(196,62,28,.28), transparent), linear-gradient(160deg, #0f1629, #1e2a4a); padding: 20px; overflow: auto; }
.auth-card { width: 420px; max-width: 100%; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-3); padding: 30px 30px 24px; }
.auth-card .logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.auth-card .logo img { width: 36px; height: 36px; border-radius: 9px; }
.auth-card p.lead { color: var(--muted); margin: 0 0 20px; }
.auth-card .k-btn.primary { width: 100%; height: 40px; }
.auth-card .alt { text-align: center; margin-top: 14px; color: var(--muted); font-size: 12.5px; }
.auth-card .alt button { border: 0; background: none; color: var(--accent); font-weight: 600; padding: 0; }
.auth-card .alt a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-card .alt a:hover { text-decoration: underline; }
.auth-card .err { color: var(--danger); font-size: 12.5px; min-height: 18px; margin: -4px 0 8px; }
.auth-card .local { width: 100%; margin-top: 10px; white-space: normal; height: auto; min-height: 34px; line-height: 1.3; font-size: 12.5px; }
.auth-card .reason { display: flex; gap: 8px; align-items: flex-start; background: var(--accent-weak); color: var(--text); border-radius: 10px; padding: 10px 12px; margin: 0 0 16px; font-size: 13px; line-height: 1.4; }
.auth-card .reason svg { flex: none; color: var(--accent); margin-top: 1px; }
.auth-apps { display: flex; gap: 8px; margin: 0 0 18px; }
.auth-apps > span { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); background: var(--surface-2); padding: 6px 8px; border-radius: 8px; }
/* KiQ ID sign-in */
.auth-card a.auth-kiqid { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; font-size: 14.5px; text-decoration: none; }
.auth-kiqid-mark { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff;
  background: linear-gradient(155deg, #6d8bff, #3563e9 55%, #2447b8); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.25); }
.auth-idps { display: grid; gap: 8px; margin-top: 8px; }
.auth-social { margin: 14px 0 4px; }
.auth-or { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 12.5px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-card a.auth-idp { display: flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 16px; font-size: 14.5px; font-weight: 600; text-decoration: none; border-radius: 10px; box-sizing: border-box; }
.auth-idp-mark { width: 18px; height: 18px; flex: none; }
.auth-card a.auth-idp-apple { background: #000; color: #fff; border: 1px solid #000; }
.auth-card a.auth-idp-apple:hover { background: #1d1d1f; }
.auth-card a.auth-idp-google { background: #fff; color: #1f1f1f; border: 1px solid #747775; }
.auth-card a.auth-idp-google:hover { background: #f8f9fa; }
[data-theme="dark"] .auth-card a.auth-idp-apple { background: #fff; color: #000; border-color: #fff; }
.auth-points { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.auth-points li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; }
.auth-points li .ico { flex: none; color: var(--accent); margin-top: 1px; }
.auth-older { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.auth-older summary { cursor: pointer; font-size: 12.5px; color: var(--muted); text-align: center; list-style: none; }
.auth-older summary::-webkit-details-marker { display: none; }
.auth-older[open] summary { margin-bottom: 12px; color: var(--text-2); }
.auth-older .k-btn { width: 100%; height: 38px; }
.auth-card .auth-small { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 10px 0 0; }
.auth-card .auth-title { font-size: 17px; margin: 14px 0 6px; }
.auth-card .auth-title + p.lead { margin-bottom: 6px; }
.auth-card .auth-email { font-weight: 600; margin: 0 0 4px; word-break: break-all; }
.auth-card form .auth-small + .k-field, .auth-card .auth-email + .auth-small { margin-bottom: 14px; }

/* search results */
.search-pop { width: min(460px, 90vw); }
.search-pop .k-menu-item { height: 34px; }

/* presence cursors (shared) */
.remote-label { position: absolute; font: 600 11px/1 var(--font-ui); color: #fff; padding: 3px 5px; border-radius: 4px 4px 4px 0; white-space: nowrap; pointer-events: none; z-index: 5; transform: translateY(-100%); }

/* scrollbars */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: rgba(120,128,140,.35); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(120,128,140,.55); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

@media (max-width: 1100px) {
  .tb-search { width: 200px; }
  .apptab span.lbl { display: none; }
  .apptab { padding: 0 8px; }
}
@media (max-width: 760px) {
  .tb-search, .tb-brand small, .tb-brand span, .tb-status span, .tb-btn span, .tb-avatars { display: none; }
  .tb-btn { padding: 0 9px; }
  .apptabs { margin-left: 0; }
  .apptab { padding: 0 7px; }
  .topbar { gap: 4px; padding: 0 6px; }
  .home-nav { display: none; }
  .home-main { padding: 16px; overflow-x: hidden; }
  .import-box { flex-direction: column; align-items: flex-start; }
  .file-table th:nth-child(n+3), .file-table td:nth-child(n+3):not(.ft-actions) { display: none; }
  .sidepanel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 25; width: min(360px, 100vw); box-shadow: var(--shadow-3); }
  .tb-title { max-width: 110px; }
  .statusbar .sb-left .sb-item:nth-child(n+3) { display: none; }
  .rb-body { overflow-x: auto; }
}
@media print {
  body { overflow: visible; background: #fff; }
  .app { position: static; }
  .topbar, .ribbon-host, .statusbar, .sidepanel, .k-toasts { display: none !important; }
}

/* ── picture editor (core/picedit.js) ── */
.ico.flip-x { transform: scaleX(-1); }
.pe { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 16px; }
.pe-modal .k-modal-body { overflow-x: hidden; }
.pe-left { display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 10px; min-height: 460px; padding: 12px; overflow: hidden; }
.pe-stage { position: relative; overflow: hidden; flex: none; box-shadow: var(--shadow-1);
  background: repeating-conic-gradient(#d5dae1 0% 25%, #ffffff 0% 50%) 0 0 / 16px 16px; }
.pe-canvas { display: block; }
.pe-stage.picking .pe-canvas { cursor: crosshair; }
.pe-dim { position: absolute; background: rgba(15, 22, 41, .55); pointer-events: none; }
.pe-crop { position: absolute; pointer-events: none; touch-action: none; }
.pe-crop.active { outline: 1px solid rgba(255, 255, 255, .95);
  background-image: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)),
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45));
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px; background-position: 33.33% 0, 66.67% 0, 0 33.33%, 0 66.67%; background-repeat: no-repeat; }
.pe-crop.active { pointer-events: auto; cursor: move; }  /* frame + thirds grid only while cropping */
.pe-h { position: absolute; width: 12px; height: 12px; background: #fff; border: 1.5px solid var(--accent); border-radius: 3px; display: none; }
.pe-crop.active .pe-h { display: block; }
.pe-h.nw { left: -7px; top: -7px; cursor: nwse-resize; } .pe-h.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.pe-h.ne { right: -7px; top: -7px; cursor: nesw-resize; } .pe-h.sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.pe-h.n { left: calc(50% - 6px); top: -7px; cursor: ns-resize; } .pe-h.s { left: calc(50% - 6px); bottom: -7px; cursor: ns-resize; }
.pe-h.w { top: calc(50% - 6px); left: -7px; cursor: ew-resize; } .pe-h.e { top: calc(50% - 6px); right: -7px; cursor: ew-resize; }
.pe-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pe-right .k-seg { width: 100%; }
.pe-right .k-seg button { flex: 1; min-width: 0; padding: 0 6px; font-size: 12.5px; white-space: nowrap; }
.pe-panel { display: flex; flex-direction: column; gap: 12px; }
.pe-panel > .k-btn { justify-content: flex-start; }
.pe-panel > .k-btn.on { border-color: var(--accent); background: var(--accent-weak); }
.pe-sec h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.pe-aspects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pe-aspects button { height: 30px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; font-size: 12px; cursor: pointer; }
.pe-aspects button:hover { background: var(--hover); }
.pe-aspects button.on { border-color: var(--accent); background: var(--accent-weak); font-weight: 600; }
.pe-row { display: flex; gap: 6px; }
.pe-slider { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; margin-bottom: 8px; }
.pe-slider > span { display: flex; justify-content: space-between; }
.pe-slider b { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pe-slider input[type=range] { width: 100%; accent-color: var(--accent); }
.pe-info { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.45; }
.pe-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 760px) { .pe { grid-template-columns: 1fr; } .pe-left { min-height: 240px; } }

/* ── KeyTips (core/keytips.js) ── */
.kt-layer { position: fixed; inset: 0; pointer-events: none; z-index: 950; }
.kt { position: absolute; transform: translateX(-50%); min-width: 17px; padding: 1px 5px; border-radius: 4px; background: #262a33; color: #fff;
  font: 600 11px/15px var(--font-ui); text-align: center; letter-spacing: .03em; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); white-space: nowrap; }
.kt b { font-weight: 600; opacity: .45; }
.kt.off { display: none; }
html[data-theme=dark] .kt { background: #f2f4f7; color: #111; }

/* ── saving turned off (no account / no active plan) ── */
.save-bar { display: flex; align-items: center; gap: 10px; padding: 7px 14px; font-size: 13px; background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  color: color-mix(in srgb, var(--warn) 75%, var(--text)); border-bottom: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); flex: none; position: relative; z-index: 5; }
.save-bar span { flex: 1; min-width: 0; }
.save-bar .k-btn { text-decoration: none; }
html[data-skin=glass] .save-bar, html[data-skin=studio] .save-bar { margin: 8px 10px 0; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
/* note for files opened from Pages / Keynote / Numbers (shell.renderNoteBar) */
.note-bar { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--text); border-bottom-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.note-bar > .ico { color: var(--accent); flex: none; }
html[data-skin=glass] .note-bar, html[data-skin=studio] .note-bar { border-color: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ── File › Save As (core/saveas.js) ── */
.sa { max-width: 720px; display: grid; gap: 8px; }
.sa-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-2); margin-top: 10px; }
.sa-namebox { display: flex; align-items: center; gap: 8px; }
.sa-namebox .k-input { flex: 1; min-width: 0; max-width: 460px; font-size: 15px; padding: 8px 12px; }
.sa-ext { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.sa-formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.sa-fmt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.sa-fmt:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.sa-fmt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.sa-fmt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sa-badge { flex: none; min-width: 58px; padding: 5px 6px; border-radius: 7px; text-align: center; font: 700 10.5px/1 var(--font, inherit); letter-spacing: .04em; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(15,23,42,.18); }
.sa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-txt b { font-weight: 600; font-size: 13.5px; }
.sa-txt small { color: var(--muted); font-size: 12px; }
.sa-fmt.off { background: var(--surface-2); }
.sa-fmt.off .sa-badge { background: var(--muted); box-shadow: none; opacity: .75; }
.sa-fmt.off .sa-txt b { color: var(--text-2); }
.sa-detail { display: grid; gap: 6px; min-height: 8px; margin-top: 6px; }
.sa-detail p { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.sa-detail p > .ico { flex: none; margin-top: 1px; }
.sa-ok > .ico { color: var(--ok, #16a34a); }
.sa-warn > .ico { color: var(--warn); }
.sa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sa-note { display: flex; gap: 10px; align-items: flex-start; max-width: 720px; padding: 12px 14px; margin: -6px 0 18px; border-radius: 12px; font-size: 13.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.sa-note p { margin: 0; }
.sa-note > .ico { color: var(--accent); flex: none; margin-top: 1px; }
.sa-foot { max-width: 720px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sa-foot .k-msg { margin: 0; flex: 1 1 320px; }
@media (max-width: 640px) { .sa-formats { grid-template-columns: 1fr; } .bs-main { padding: 20px 16px; } }

/* ── install app & work offline (core/install.js) ── */
.inst { display: flex; flex-direction: column; gap: 12px; }
.inst-card { display: flex; gap: 14px; padding: 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.inst-mark { flex: none; width: 48px; display: flex; justify-content: center; padding-top: 2px; }
.inst-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), color-mix(in srgb, var(--accent) 6%, var(--surface))); color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.inst-text { flex: 1; min-width: 0; }
.inst-text b { font-size: 14.5px; }
.inst-text p { margin: 3px 0 10px; color: var(--text-2); line-height: 1.45; }
.inst-action { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.inst-action .k-check { margin: 0; }
.inst-steps { margin: 0; color: var(--text-2); font-size: 12.5px; background: var(--surface); padding: 8px 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--border); }
.inst-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; }
.inst-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.inst-switch { position: absolute; opacity: 0; width: 1px; height: 1px; }
.inst-knob { width: 40px; height: 23px; border-radius: 12px; background: var(--border-strong); position: relative; transition: background .2s; flex: none; }
.inst-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.inst-switch:checked + .inst-knob { background: var(--ok); }
.inst-switch:checked + .inst-knob::after { transform: translateX(17px); }
.inst-switch:focus-visible + .inst-knob { outline: 2px solid var(--accent); outline-offset: 2px; }
.inst-bar { width: 100%; height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.inst-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); transition: width .2s; }
.inst-status { font-size: 12.5px; color: var(--muted); }
.inst-note { color: var(--muted); font-size: 11.5px; }

.avatar.anon { background: rgba(255, 255, 255, .25); color: #fff; }

/* ── Storage & AI (core/usage.js) ── */
.us { display: grid; gap: 14px; }
.us-loading { display: flex; justify-content: center; padding: 20px; }
.us-sec { display: grid; gap: 7px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.us-head { display: flex; align-items: center; gap: 8px; }
.us-head b { font-weight: 600; }
.us-num { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }
.us-meter { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.us-meter span { display: block; height: 100%; border-radius: inherit; min-width: 3px; }
.us-meter.full span { background: var(--warn) !important; }
.us-muted { color: var(--muted); font-size: 12px; line-height: 1.45; }
.us-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.us-own { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.us-own > .ico { color: var(--ok); }
.us-form { display: grid; gap: 9px; margin-top: 4px; }
.us-seg { justify-self: start; flex-wrap: wrap; }
.us-form .k-field[hidden] { display: none; }

/* Account menu › Your plan & people (core/plan.js) */
.pl-list { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 5px; font-size: 13.5px; }
.pl-list li { display: flex; gap: 8px; align-items: flex-start; }
.pl-list .ico { color: var(--t-green, #1f9d55); flex: none; margin-top: 2px; }
.pl-row { display: flex; gap: 8px; align-items: center; }
.pl-row .k-input { flex: 1; min-width: 0; }
.pl-domain { font-weight: 600; color: var(--text-2); }
.pl-state[data-ok="1"] { color: var(--t-green, #1f9d55); }
.pl-state[data-ok="0"] { color: var(--danger); }
.pl-person { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.pl-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(160deg, #7c86ea, #4C5BD4); }
.pl-person-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pl-person-txt small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.pl-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.pl-dl dt { color: var(--muted); }
.pl-dl dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.pl > .us-sec > div > .k-btn + .k-btn { margin-left: 6px; }
/* sign-up: the code, and personal / school / business */
.auth-code { font: 600 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 6px; text-align: center; }
.auth-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.auth-use { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.auth-use:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.auth-use.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-weak); }
.auth-use small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.auth-use .ico { color: var(--accent); }
@media (max-width: 480px) { .auth-uses { grid-template-columns: 1fr; } }
.pl-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-plan { display: grid; gap: 4px; align-content: start; padding: 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.pl-plan.on { box-shadow: inset 0 0 0 2px var(--accent); }
.pl-price { font-size: 20px; font-weight: 700; }
.pl-price small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.pl-plan .k-btn { justify-self: start; margin-top: 4px; }
.pl-period { margin-left: auto; display: flex; gap: 4px; }
@media (max-width: 560px) { .pl-plans { grid-template-columns: 1fr; } }

/* ── Home › Biz tools (core/biztools.js) ─────────────────────────────────────────────────────────────────────────── */
.biz-head { margin-bottom: 8px; }
.biz-head h1 { margin: 6px 0 4px; }
.biz-head .muted { margin: 0; color: var(--muted); max-width: 720px; }
.biz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.biz-tile { display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.biz-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.biz-tile-ic { flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-weak); }
.biz-tile-txt { flex: 1; display: grid; gap: 3px; }
.biz-tile-txt b { font-size: 15.5px; }
.biz-tile-txt small { color: var(--muted); line-height: 1.4; }
.biz-editor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; margin-top: 14px; }
.biz-form { display: grid; gap: 14px; }
.biz-group { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px 14px; }
.biz-group h3 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin: 2px 0 8px; }
.biz-row { display: grid; grid-template-columns: 20px 190px minmax(0, 1fr); align-items: center; gap: 10px; padding: 4px 0; }
.biz-row.tall { align-items: start; }
.biz-row.tall .biz-label { padding-top: 7px; }
.biz-row input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.biz-label { font-size: 13.5px; color: var(--text); }
.biz-pic { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.biz-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #8a5a00; background: #fff7e0; border: 1px solid #f3dd9b; border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
.biz-colors { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.biz-color { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.biz-color input { width: 36px; height: 28px; border: 1px solid var(--border); border-radius: 8px; padding: 0; background: none; }
.biz-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.biz-preset { width: 40px; height: 30px; border-radius: 9px; border: 1px solid rgba(0,0,0,.15); font-weight: 700; cursor: pointer; }
.biz-side { position: sticky; top: 12px; display: grid; gap: 14px; }
.biz-card { border-radius: 16px; padding: 16px 18px 18px; min-height: 440px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 16px 36px rgba(15, 25, 50, .25); }
.biz-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 44px; }
.biz-card-logo { max-width: 160px; max-height: 44px; object-fit: contain; object-position: left center; }
.biz-card-logotext { font-size: 16px; }
.biz-card-photo { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.biz-card-name { font-size: 25px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.biz-card-row { display: flex; gap: 22px; flex-wrap: wrap; min-height: 10px; }
.biz-card-row > div { display: grid; gap: 1px; min-width: 0; }
.biz-card-row small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.biz-card-row span { font-size: 14.5px; overflow-wrap: anywhere; }
.biz-card-qr { margin-top: auto; align-self: center; background: #fff; color: #333; border-radius: 10px; padding: 10px 10px 6px; display: grid; justify-items: center; gap: 4px; min-width: 170px; }
.biz-card-qr canvas { width: 150px; height: 150px; image-rendering: pixelated; }
.biz-card-qr > span { width: 150px; height: 150px; display: grid; place-items: center; text-align: center; font-size: 12.5px; color: #666; }
.biz-card-qr small { font-size: 11px; color: #555; }
.biz-actions { display: grid; gap: 10px; }
.biz-wallet-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 12px; background: #000; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.biz-wallet-btn.disabled { opacity: .45; pointer-events: none; }
.biz-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.biz-note { display: flex; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 0; }
.biz-small { font-size: 12px; margin: 0; }
.biz-savebar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 0; margin-top: 14px; background: linear-gradient(to top, var(--bg, #f6f7fb) 70%, transparent); }
.biz-qr-modal { display: grid; justify-items: center; gap: 10px; }
.biz-qr-big { width: 300px; height: 300px; image-rendering: pixelated; }
@media (max-width: 1000px) { .biz-editor { grid-template-columns: 1fr; } .biz-side { position: static; order: -1; } }
@media (max-width: 560px) { .biz-row { grid-template-columns: 20px minmax(0, 1fr); } .biz-row .k-input, .biz-row .biz-pic { grid-column: 2; } }
.biz-btns a.k-btn { text-decoration: none; }
/* Biz tools › card designs (core/cardart.js) */
.biz-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 10px; }
.biz-design { position: relative; display: grid; gap: 5px; padding: 5px 5px 6px; border-radius: 12px; border: 2px solid transparent; background: var(--surface-2); cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.biz-design canvas { width: 100%; height: auto; aspect-ratio: 300 / 98; border-radius: 8px; display: block; }
.biz-design small { font-size: 12px; padding: 0 3px; }
.biz-design:hover { border-color: var(--border); }
.biz-design.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.biz-design-up { position: absolute; top: 5px; left: 5px; right: 5px; aspect-ratio: 300 / 98; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
.biz-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 4px 0 8px; }
.biz-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.biz-sub { font-size: 13px; margin: 14px 0 0; color: var(--muted); font-weight: 600; }
.biz-card.store { padding-left: 0; padding-right: 0; }
.biz-card.store > :not(.biz-strip) { padding-left: 18px; padding-right: 18px; }
.biz-strip { position: relative; }
.biz-strip-img { display: block; width: 100%; height: auto; aspect-ratio: 750 / 246; }
.biz-strip .biz-card-name { position: absolute; left: 18px; bottom: 12px; right: 18px; font-size: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, .18); }
.biz-strip.with-photo .biz-card-name { right: 34%; }
.biz-card.store .biz-card-qr { margin-left: auto; margin-right: auto; }
/* Biz tools: every section folds away (details/summary) */
details.biz-group { padding: 0; }
details.biz-group > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; font-weight: 600; font-size: 14.5px; border-radius: 14px; user-select: none; }
details.biz-group > summary::-webkit-details-marker { display: none; }
details.biz-group > summary:hover { background: var(--surface-2); }
details.biz-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.biz-group-title { flex: 1; }
.biz-count { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.biz-chev { display: inline-flex; color: var(--muted); transition: transform .15s ease; }
details.biz-group[open] > summary .biz-chev { transform: rotate(90deg); }
details.biz-group[open] > summary { border-bottom: 1px solid var(--border); border-radius: 14px 14px 0 0; margin-bottom: 6px; }
details.biz-group > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.biz-group > :last-child { margin-bottom: 14px; }
.biz-form { gap: 10px; }