/* KiQHub Office designs ("skins"). Same familiar layout (app tabs, command tabs, grouped commands), our own look:
   glass  — default: light translucent chrome, floating rounded command deck, pill tabs, soft backdrop
   soft   — solid warm surfaces, each command group on its own soft tile, accent stripe; no blur
   studio — dark graphite glass (turns the dark theme on); documents stay on white paper
   Selected with html[data-skin]; icons are painted by icons.css. */

html[data-skin] { --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
html[data-skin] body { font-size: 13px; letter-spacing: -0.003em; }

/* ════════════════════════════════════════ GLASS ════════════════════════════════════════ */
html[data-skin=glass] {
  --bg: #eef1f6;
  --radius: 9px;
  --glass: rgba(255, 255, 255, .64);
  --glass-strong: rgba(255, 255, 255, .80);
  --glass-rim: rgba(255, 255, 255, .78);
  --glass-edge: rgba(15, 23, 42, .08);
  --glass-blur: saturate(1.7) blur(22px);
  --shadow-2: 0 8px 24px rgba(30, 41, 59, .10), 0 1px 3px rgba(30, 41, 59, .06);
  --shadow-3: 0 24px 60px rgba(30, 41, 59, .20), 0 4px 14px rgba(30, 41, 59, .08);
}
html[data-skin=glass] .app {
  background:
    radial-gradient(1100px 520px at 0% -8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(900px 560px at 100% -4%, rgba(168, 85, 247, .10), transparent 58%),
    radial-gradient(700px 500px at 60% 110%, rgba(56, 189, 248, .10), transparent 60%),
    linear-gradient(180deg, #f4f6fb 0%, #e9edf5 100%);
}
/* top bar: light glass, app colour only as accents */
html[data-skin=glass] .topbar {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--text); border-bottom: 1px solid var(--glass-edge); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .55);
  position: relative; z-index: 6;
}
html[data-skin=glass] .topbar .k-icon-btn { color: var(--text-2); }
html[data-skin=glass] .topbar .k-icon-btn:hover, html[data-skin=glass] .tb-brand:hover, html[data-skin=glass] .tb-status:hover { background: rgba(15, 23, 42, .06); }
html[data-skin=glass] .tb-brand small { color: var(--muted); opacity: 1; }
html[data-skin=glass] .apptabs { background: rgba(15, 23, 42, .045); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05); border-radius: 12px; padding: 3px; }
html[data-skin=glass] .apptab { color: var(--text-2); border-radius: 9px; }
html[data-skin=glass] .apptab:hover { background: rgba(255, 255, 255, .7); color: var(--text); }
html[data-skin=glass] .apptab.on { background: #fff; color: var(--tab-color); font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px color-mix(in srgb, var(--tab-color) 22%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .9); }
html[data-skin=glass] .tb-title { color: var(--text); }
html[data-skin=glass] .tb-title:hover { border-color: var(--border-strong); }
html[data-skin=glass] .tb-title:focus { background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
html[data-skin=glass] .tb-status { color: var(--text-2); opacity: 1; }
html[data-skin=glass] .tb-status.offline { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
html[data-skin=glass] .tb-search input { background: rgba(15, 23, 42, .05); color: var(--text); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); border-radius: 10px; }
html[data-skin=glass] .tb-search input::placeholder { color: var(--muted); }
html[data-skin=glass] .tb-search input:focus { background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
html[data-skin=glass] .tb-search .ico { color: var(--muted); }
html[data-skin=glass] .tb-btn { border-color: rgba(15, 23, 42, .10); background: rgba(255, 255, 255, .7); color: var(--text); border-radius: 10px; }
html[data-skin=glass] .tb-btn:hover { background: #fff; }
html[data-skin=glass] .tb-btn.solid { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
html[data-skin=glass] .tb-btn.solid:hover { background: var(--accent-2); }
html[data-skin=glass] .tb-btn.ai { color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(124, 58, 237, .30); }
html[data-skin=glass] .tb-me .avatar, html[data-skin=glass] .tb-avatars .avatar { border-color: #fff; }

/* command deck (ribbon): a floating glass card */
html[data-skin=glass] .rb {
  margin: 8px 10px 0; border-radius: 16px; background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim); box-shadow: 0 10px 30px rgba(30, 41, 59, .08), 0 1px 2px rgba(30, 41, 59, .06), inset 0 1px 0 rgba(255, 255, 255, .95);
  position: relative; z-index: 4;
}
html[data-skin=glass] .rb-tabs { height: 40px; align-items: center; padding: 6px 8px 0; gap: 2px; }
html[data-skin=glass] .rb-tab { height: 29px; border-radius: 999px; padding: 0 13px; font-size: 13px; color: var(--text-2); }
html[data-skin=glass] .rb-tab:hover { background: rgba(15, 23, 42, .05); }
html[data-skin=glass] .rb-tab.on { background: color-mix(in srgb, var(--accent) 12%, #fff); color: color-mix(in srgb, var(--accent) 82%, #000); font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent), 0 1px 2px rgba(15, 23, 42, .05); }
html[data-skin=glass] .rb-tab.on::after, html[data-skin=glass] .rb-tab.ctx::before { display: none; }
html[data-skin=glass] .rb-file { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); color: #fff; font-weight: 600; margin-right: 6px;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
html[data-skin=glass] .rb-file:hover { background: var(--accent); filter: brightness(1.05); }
html[data-skin=glass] .rb-tab.ctx { color: color-mix(in srgb, var(--ctx) 85%, #000); }
html[data-skin=glass] .rb-tab.ctx.on { background: color-mix(in srgb, var(--ctx) 13%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ctx) 30%, transparent); }
html[data-skin=glass] .rb-ctx { align-items: center; }
html[data-skin=glass] .rb-collapse { border-radius: 999px; }
html[data-skin=glass] .rb-body { height: 98px; padding: 5px 8px 2px; }
html[data-skin=glass] .rb.collapsed.peek .rb-body { top: 40px; border-radius: 0 0 16px 16px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
html[data-skin=glass] .rb-group + .rb-group::before { background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .10) 20%, rgba(15, 23, 42, .10) 80%, transparent); }
html[data-skin=glass] .rb-group-label { font-size: 10.5px; letter-spacing: .03em; color: color-mix(in srgb, var(--muted) 85%, transparent); }
html[data-skin=glass] .rb-btn { border-radius: 10px; }
html[data-skin=glass] .rb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .95); box-shadow: 0 1px 3px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(15, 23, 42, .05); }
html[data-skin=glass] .rb-btn.on { background: color-mix(in srgb, var(--accent) 13%, #fff); color: color-mix(in srgb, var(--accent) 85%, #000);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
html[data-skin=glass] .rb-btn.large { height: 72px; padding-top: 5px; }
html[data-skin=glass] .rb-btn.large .rb-ico { color: var(--text); }
html[data-skin=glass] .rb-split { border-radius: 10px; }
html[data-skin=glass] .rb-split .rb-btn { border-radius: 10px 0 0 10px; }
html[data-skin=glass] .rb-split-arrow { border-radius: 0 10px 10px 0; }
html[data-skin=glass] .rb-split.large .rb-btn { border-radius: 10px 10px 0 0; }
html[data-skin=glass] .rb-split.large .rb-split-arrow { border-radius: 0 0 10px 10px; }
html[data-skin=glass] .rb-select, html[data-skin=glass] .rb-num { border-radius: 8px; background: rgba(255, 255, 255, .85); border-color: rgba(15, 23, 42, .12); }
html[data-skin=glass] .rb-gallery { border-radius: 12px; background: rgba(255, 255, 255, .7); border-color: rgba(15, 23, 42, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }

/* status bar, side panels, home, menus, dialogs */
html[data-skin=glass] .statusbar { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-edge); }
html[data-skin=glass] .sidepanel { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-left: 1px solid var(--glass-edge); }
html[data-skin=glass] .home { background: transparent; }
html[data-skin=glass] .home-nav { background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-right: 1px solid rgba(255, 255, 255, .6); }
html[data-skin=glass] .home-nav button { border-radius: 10px; }
html[data-skin=glass] .home-nav button.on { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
html[data-skin=glass] .new-card, html[data-skin=glass] .file-card, html[data-skin=glass] .card, html[data-skin=glass] .banner, html[data-skin=glass] .bs-tile {
  background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim); border-radius: 14px; box-shadow: 0 6px 18px rgba(30, 41, 59, .06), inset 0 1px 0 rgba(255, 255, 255, .9); }
html[data-skin=glass] .new-card:hover, html[data-skin=glass] .file-card:hover, html[data-skin=glass] .bs-tile:hover { background: #fff; box-shadow: 0 10px 26px rgba(30, 41, 59, .10); }
html[data-skin=glass] .file-table { background: var(--glass-strong); border-radius: 14px; }
html[data-skin=glass] .backstage { background: transparent; }
html[data-skin=glass] .bs-nav { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent-2)); }
html[data-skin=glass] .bs-main { background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }   /* readable over a busy grid */
html[data-skin=glass] .k-menu {
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.8) blur(26px); backdrop-filter: saturate(1.8) blur(26px);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 13px; box-shadow: 0 18px 44px rgba(15, 23, 42, .16), 0 0 0 1px rgba(15, 23, 42, .06); }
html[data-skin=glass] .k-menu-item { border-radius: 8px; }
html[data-skin=glass] .k-menu-item.active, html[data-skin=glass] .k-menu-item:hover { background: color-mix(in srgb, var(--accent) 11%, transparent); }
html[data-skin=glass] .k-modal-back { background: rgba(15, 20, 30, .26); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-skin=glass] .k-modal { border-radius: 18px; background: rgba(255, 255, 255, .965); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .85); }
html[data-skin=glass] .k-toast { border-radius: 14px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
html[data-skin=glass] .k-btn { border-radius: 10px; }
html[data-skin=glass] .k-btn.primary { box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
html[data-skin=glass] .k-input { border-radius: 10px; }
html[data-skin=glass] .k-seg { border-radius: 10px; }
html[data-skin=glass] .k-seg button { border-radius: 8px; }
/* editors sit on the glass backdrop */
html[data-skin=glass] .dx-root { background: transparent; }
html[data-skin=glass] .sx-host { background: transparent; }

/* ════════════════════════════════════════ SOFT ═════════════════════════════════════════ */
html[data-skin=soft] {
  --bg: #f4f2ee; --surface: #fffdfa; --surface-2: #faf7f2; --surface-3: #f0ece5;
  --border: #e8e2d8; --border-strong: #d7cfc2; --text: #25221e; --text-2: #4a453e; --muted: #857d72;
  --hover: rgba(60, 45, 20, .06); --active: rgba(60, 45, 20, .10);
  --radius: 10px;
  --shadow-2: 0 8px 22px rgba(60, 45, 20, .10), 0 1px 3px rgba(60, 45, 20, .06);
  --shadow-3: 0 22px 56px rgba(60, 45, 20, .18), 0 4px 12px rgba(60, 45, 20, .08);
}
html[data-skin=soft] .app { background: var(--bg); }
html[data-skin=soft] .topbar { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); box-shadow: inset 0 3px 0 var(--accent); }
html[data-skin=soft] .topbar .k-icon-btn { color: var(--text-2); }
html[data-skin=soft] .topbar .k-icon-btn:hover, html[data-skin=soft] .tb-brand:hover, html[data-skin=soft] .tb-status:hover { background: var(--hover); }
html[data-skin=soft] .tb-brand small { color: var(--muted); opacity: 1; }
html[data-skin=soft] .apptabs { background: var(--surface-3); border-radius: 12px; }
html[data-skin=soft] .apptab { color: var(--text-2); border-radius: 9px; }
html[data-skin=soft] .apptab:hover { background: rgba(255, 255, 255, .7); color: var(--text); }
html[data-skin=soft] .apptab.on { background: var(--surface); color: var(--tab-color); font-weight: 600; box-shadow: 0 1px 3px rgba(60, 45, 20, .12); }
html[data-skin=soft] .tb-title { color: var(--text); }
html[data-skin=soft] .tb-title:hover { border-color: var(--border-strong); }
html[data-skin=soft] .tb-title:focus { background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
html[data-skin=soft] .tb-status { color: var(--text-2); opacity: 1; }
html[data-skin=soft] .tb-status.offline { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
html[data-skin=soft] .tb-search input { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); border-radius: 10px; }
html[data-skin=soft] .tb-search input::placeholder, html[data-skin=soft] .tb-search .ico { color: var(--muted); }
html[data-skin=soft] .tb-search input:focus { background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
html[data-skin=soft] .tb-btn { border-color: var(--border-strong); background: var(--surface); color: var(--text); border-radius: 10px; }
html[data-skin=soft] .tb-btn:hover { background: var(--surface-2); }
html[data-skin=soft] .tb-btn.solid { background: var(--accent); border-color: transparent; color: #fff; }
html[data-skin=soft] .tb-btn.ai { color: #fff; border-color: transparent; }
html[data-skin=soft] .tb-me .avatar, html[data-skin=soft] .tb-avatars .avatar { border-color: var(--surface); }
html[data-skin=soft] .rb { background: var(--bg); border-bottom: 1px solid var(--border); }
html[data-skin=soft] .rb-tabs { height: 38px; align-items: flex-end; padding: 0 10px; gap: 3px; }
html[data-skin=soft] .rb-tab { height: 31px; border-radius: 10px 10px 0 0; padding: 0 14px; color: var(--text-2); }
html[data-skin=soft] .rb-tab.on { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 -1px 0 var(--border), -1px 0 0 var(--border), 1px 0 0 var(--border); }
html[data-skin=soft] .rb-tab.on::after { left: 14px; right: 14px; top: 0; bottom: auto; height: 2px; }
html[data-skin=soft] .rb-tab.ctx::before { display: none; }
html[data-skin=soft] .rb-file { background: var(--accent); color: #fff; border-radius: 10px; height: 27px; margin: 0 6px 3px 0; }
html[data-skin=soft] .rb-file:hover { background: var(--accent-2); }
html[data-skin=soft] .rb-body { background: var(--surface); height: 100px; padding: 6px 6px 5px; gap: 4px; border-top: 1px solid var(--border); margin-top: -1px; }
html[data-skin=soft] .rb.collapsed.peek .rb-body { top: 38px; }
html[data-skin=soft] .rb-group { background: var(--surface-2); border-radius: 12px; padding: 1px 3px 0; box-shadow: inset 0 0 0 1px var(--border); }
html[data-skin=soft] .rb-group + .rb-group::before { display: none; }
html[data-skin=soft] .rb-group-label { font-size: 10.5px; color: var(--muted); }
html[data-skin=soft] .rb-btn { border-radius: 9px; }
html[data-skin=soft] .rb-btn:hover:not(:disabled) { background: var(--surface); box-shadow: 0 1px 2px rgba(60, 45, 20, .10); }
html[data-skin=soft] .rb-btn.on { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
html[data-skin=soft] .rb-btn.large { height: 68px; }
html[data-skin=soft] .rb-btn.large .rb-ico { color: var(--text); }
html[data-skin=soft] .rb-select, html[data-skin=soft] .rb-num { border-radius: 8px; background: var(--surface); }
html[data-skin=soft] .rb-gallery { border-radius: 10px; background: var(--surface); }
html[data-skin=soft] .statusbar { background: var(--surface); }
html[data-skin=soft] .home-nav button { border-radius: 10px; }
html[data-skin=soft] .new-card, html[data-skin=soft] .file-card, html[data-skin=soft] .card, html[data-skin=soft] .bs-tile, html[data-skin=soft] .banner { border-radius: 14px; }
html[data-skin=soft] .k-menu { border-radius: 12px; box-shadow: var(--shadow-2), 0 0 0 1px var(--border); }
html[data-skin=soft] .k-menu-item { border-radius: 8px; }
html[data-skin=soft] .k-modal { border-radius: 18px; }
html[data-skin=soft] .k-btn, html[data-skin=soft] .k-input { border-radius: 10px; }
html[data-skin=soft] .k-toast { border-radius: 12px; }
html[data-skin=soft] .dx-root { background: #ece8e1; }

/* ════════════════════════════════════════ STUDIO ═══════════════════════════════════════ */
/* studio also sets data-theme=dark (see applyTheme), so the dark variables and every editor's dark styles apply */
html[data-skin=studio] {
  --bg: #121419; --surface: #1c1f26; --surface-2: #22262e; --surface-3: #2a2f38;
  --border: #30353f; --border-strong: #3d4450;
  --glass: rgba(26, 29, 36, .70); --glass-strong: rgba(30, 33, 41, .82);
  --glass-blur: saturate(1.5) blur(22px);
  --radius: 9px;
}
html[data-skin=studio] .app {
  background:
    radial-gradient(1000px 520px at 0% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(168, 85, 247, .14), transparent 58%),
    linear-gradient(180deg, #15171c, #0f1115);
}
html[data-skin=studio] .topbar { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: #eceef2;
  border-bottom: 1px solid rgba(255, 255, 255, .06); position: relative; z-index: 6; }
html[data-skin=studio] .topbar .k-icon-btn { color: #c9ced6; }
html[data-skin=studio] .apptabs { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); border-radius: 12px; }
html[data-skin=studio] .apptab { color: #b9bfc9; border-radius: 9px; }
html[data-skin=studio] .apptab:hover { background: rgba(255, 255, 255, .07); color: #fff; }
html[data-skin=studio] .apptab.on { background: rgba(255, 255, 255, .11); color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 0 18px color-mix(in srgb, var(--tab-color) 35%, transparent); }
html[data-skin=studio] .tb-search input { background: rgba(255, 255, 255, .07); border-radius: 10px; }
html[data-skin=studio] .tb-search input:focus { background: #2a2f38; color: #eceef2; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
html[data-skin=studio] .tb-search input:focus::placeholder { color: #8b93a1; }
html[data-skin=studio] .tb-btn { border-radius: 10px; border-color: rgba(255, 255, 255, .14); }
html[data-skin=studio] .tb-btn.solid { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); }
html[data-skin=studio] .tb-avatars .avatar, html[data-skin=studio] .tb-me .avatar { border-color: #2a2f38; }
html[data-skin=studio] .rb { margin: 8px 10px 0; border-radius: 16px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 14px 36px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05); position: relative; z-index: 4; }
html[data-skin=studio] .rb-tabs { height: 40px; align-items: center; padding: 6px 8px 0; gap: 2px; }
html[data-skin=studio] .rb-tab { height: 29px; border-radius: 999px; padding: 0 13px; color: #b9bfc9; }
html[data-skin=studio] .rb-tab:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html[data-skin=studio] .rb-tab.on { background: color-mix(in srgb, var(--accent) 26%, transparent); color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent); }
html[data-skin=studio] .rb-tab.on::after, html[data-skin=studio] .rb-tab.ctx::before { display: none; }
html[data-skin=studio] .rb-file { background: var(--accent); color: #fff; font-weight: 600; margin-right: 6px; }
html[data-skin=studio] .rb-body { height: 98px; padding: 5px 8px 2px; }
html[data-skin=studio] .rb.collapsed.peek .rb-body { top: 40px; border-radius: 0 0 16px 16px; background: #1e2128; }
html[data-skin=studio] .rb-group + .rb-group::before { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .09) 20%, rgba(255, 255, 255, .09) 80%, transparent); }
html[data-skin=studio] .rb-group-label { font-size: 10.5px; letter-spacing: .03em; }
html[data-skin=studio] .rb-btn { border-radius: 10px; }
html[data-skin=studio] .rb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
html[data-skin=studio] .rb-btn.on { background: color-mix(in srgb, var(--accent) 24%, transparent); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-skin=studio] .rb-btn.large { height: 72px; padding-top: 5px; }
html[data-skin=studio] .rb-btn.large .rb-ico { color: #eceef2; }
html[data-skin=studio] .rb-select, html[data-skin=studio] .rb-num, html[data-skin=studio] .rb-gallery { border-radius: 8px; }
html[data-skin=studio] .statusbar { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid rgba(255, 255, 255, .06); }
html[data-skin=studio] .home { background: transparent; }
html[data-skin=studio] .home-nav { background: rgba(26, 29, 36, .6); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
html[data-skin=studio] .new-card, html[data-skin=studio] .file-card, html[data-skin=studio] .card, html[data-skin=studio] .bs-tile, html[data-skin=studio] .banner {
  background: var(--glass-strong); border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; }
html[data-skin=studio] .k-menu { background: rgba(30, 33, 41, .95); -webkit-backdrop-filter: saturate(1.6) blur(26px); backdrop-filter: saturate(1.6) blur(26px);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 13px; }
html[data-skin=studio] .k-menu-item { border-radius: 8px; }
html[data-skin=studio] .k-modal { border-radius: 18px; background: rgba(30, 33, 41, .94); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, .08); }
html[data-skin=studio] .k-modal-back { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-skin=studio] .k-btn, html[data-skin=studio] .k-input { border-radius: 10px; }
html[data-skin=studio] .k-toast { border-radius: 14px; }
html[data-skin=studio] .dx-root { background: transparent; }

/* narrow screens: keep the deck flush so nothing is wasted */
@media (max-width: 760px) {
  html[data-skin=glass] .rb, html[data-skin=studio] .rb { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-skin=glass] .topbar, html[data-skin=glass] .rb, html[data-skin=glass] .k-menu, html[data-skin=glass] .k-modal { background: #fff; }
  html[data-skin=studio] .topbar, html[data-skin=studio] .rb, html[data-skin=studio] .k-menu, html[data-skin=studio] .k-modal { background: #1e2128; }
}

/* the KiQ AI button keeps its gradient in every design */
html[data-skin] .tb-btn.ai { background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; border-color: transparent; }
html[data-skin] .tb-btn.ai:hover { background: linear-gradient(135deg, #7c3aed, #db2777); filter: brightness(1.08); }

html[data-skin=glass] .avatar.anon, html[data-skin=soft] .avatar.anon { background: var(--surface-3); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); }
html[data-skin=studio] .avatar.anon { background: rgba(255, 255, 255, .10); color: #dfe3ea; }

/* glass sheen: a soft specular highlight along the top of floating surfaces (kept subtle). The surfaces use
   backdrop-filter, which makes them their own stacking context, so z-index -1 keeps the sheen behind the content. */
html[data-skin=glass] .rb::before, html[data-skin=studio] .rb::before,
html[data-skin=glass] .k-menu::before, html[data-skin=glass] .k-modal::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .12) 18%, rgba(255, 255, 255, 0) 42%);
}
html[data-skin=studio] .rb::before { background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, 0) 38%); }
html[data-skin=glass] .k-modal { position: relative; }
html[data-skin=glass] .apptab.on, html[data-skin=glass] .rb-tab.on { background-image: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); }