/* Spinly polish layer: design tokens, collapsible navigation, motion, and refined surfaces.
   Loaded last so it refines style.css, studio.css, typography.css and branding.css. */

/* ---------- Tokens ---------- */
:root {
  --pri: #167d73;
  --pri-2: #0e5f58;
  --acc: #f58b58;
  --side-a: #15393f;
  --side-b: #0a2227;
  --purple: var(--pri);
  --pri-soft: color-mix(in srgb, var(--pri) 9%, #fff);
  --pri-glow: color-mix(in srgb, var(--pri) 40%, transparent);
  --acc-glow: color-mix(in srgb, var(--acc) 40%, transparent);
  --pri-text: var(--pri);
  --border: rgba(21, 60, 58, 0.1);
  --surface: rgba(255, 255, 255, 0.74);
  --surface-solid: #fff;
  --sh-sm: 0 1px 2px rgba(16, 44, 42, 0.05), 0 2px 8px rgba(16, 44, 42, 0.04);
  --sh-md: 0 2px 4px rgba(16, 44, 42, 0.04), 0 14px 34px -10px rgba(16, 44, 42, 0.14);
  --sh-lg: 0 28px 80px -14px rgba(10, 34, 32, 0.32);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wheel-scale: 1;
  --wheel-size: clamp(250px, calc((100vh - 500px) * var(--wheel-scale)), 640px);
}
html[data-accent="ocean"] { --pri: #2563eb; --pri-2: #1741b3; --acc: #f5a524; --side-a: #15294f; --side-b: #0a1530; }
html[data-accent="violet"] { --pri: #7549f0; --pri-2: #5530c9; --acc: #ff7ab6; --side-a: #261b52; --side-b: #130d30; }
html[data-accent="rose"] { --pri: #d6336c; --pri-2: #a8204f; --acc: #ffb347; --side-a: #431631; --side-b: #260a1c; }
html[data-accent="coral"] { --pri: #d9532b; --pri-2: #aa3a17; --acc: #14b8a6; --side-a: #3d2117; --side-b: #230f09; }
body.dark {
  --pri-soft: color-mix(in srgb, var(--pri) 24%, #1c3235);
  --pri-text: color-mix(in srgb, var(--pri) 42%, #fff);
  --border: rgba(255, 255, 255, 0.09);
  --surface: rgba(28, 50, 53, 0.72);
  --surface-solid: #1c3235;
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md: 0 14px 34px -10px rgba(0, 0, 0, 0.5);
  --sh-lg: 0 28px 80px -14px rgba(0, 0, 0, 0.7);
}
body { --sidebar: 248px; --sidebar-w: 248px; --bg: #f3f6f7; }
body.dark { --bg: #122325; }
body.nav-collapsed { --sidebar: 84px; --sidebar-w: 84px; }
@media (max-width: 1050px) {
  body, body.nav-collapsed { --sidebar: 0px; --sidebar-w: min(300px, 86vw); }
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
::selection { background: var(--pri-glow); }

/* ---------- Icons ---------- */
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -0.2em; }

/* ---------- Ambient background ---------- */
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; will-change: transform; }
body::before { width: 720px; height: 720px; right: -200px; top: -260px; background: radial-gradient(circle, color-mix(in srgb, var(--pri) 20%, transparent), transparent 68%); animation: drift 26s ease-in-out infinite alternate; }
body::after { width: 640px; height: 640px; left: 10%; bottom: -320px; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 18%, transparent), transparent 68%); animation: drift 32s ease-in-out infinite alternate-reverse; }
body.dark::before { opacity: 0.55; }
body.dark::after { opacity: 0.4; }
.stream-view::before, .stream-view::after { display: none; }
@keyframes drift { to { transform: translate3d(-70px, 60px, 0) scale(1.12); } }

/* ---------- Sidebar ---------- */
#sidebar {
  width: var(--sidebar-w);
  padding: 20px 14px 14px;
  background: linear-gradient(185deg, var(--side-a), var(--side-b));
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 40;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  transition: width 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s;
}
#sidebar::-webkit-scrollbar { display: none; }
#sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 260px at 0% 0%, rgba(255, 255, 255, 0.07), transparent 70%); }
#sidebar > * { position: relative; }
#sidebar .sidebar-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
#sidebar .brand { padding: 0 6px; font-size: 31px; gap: 8px; color: #fff; white-space: nowrap; overflow: hidden; }
#sidebar .brand > span:last-child { margin-left: -9px; }
#sidebar .brand-mark { background: linear-gradient(145deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #ffd9a8)); width: 40px; height: 40px; border-radius: 13px; font-size: 27px; flex-shrink: 0; box-shadow: 0 6px 16px -4px var(--acc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: transform 0.6s var(--spring); }
#sidebar .brand:hover .brand-mark { transform: rotate(120deg) scale(1.06); }
#sidebar .brand-word, #sidebar .brand-dot { transition: opacity 0.25s, max-width 0.4s var(--ease); max-width: 160px; }
#sidebar .brand-dot { color: var(--acc); }
#sidebar .drawer-close { display: none; width: 38px; height: 38px; border-radius: 12px; color: #cfe0e0; place-items: center; font-size: 18px; }
#sidebar .drawer-close:hover { background: rgba(255, 255, 255, 0.1); }

#sidebar .workspace-label { margin: 22px 0 18px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); gap: 10px; white-space: nowrap; transition: background 0.2s, padding 0.3s; cursor: default; }
#sidebar .workspace-label:hover { background: rgba(255, 255, 255, 0.09); }
#sidebar .workspace-avatar { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); color: #ffd7b5; font-weight: 700; flex-shrink: 0; overflow: hidden; }
#sidebar .workspace-label > div { overflow: hidden; text-overflow: ellipsis; font-weight: 600; transition: opacity 0.25s, max-width 0.4s var(--ease); max-width: 160px; }
#sidebar .workspace-label small { font-weight: 400; color: #9fbcbe; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
#sidebar .workspace-label > span:last-child { color: #8fb0b2; transition: opacity 0.2s; }

#sidebar .nav-label { display: flex; align-items: center; justify-content: space-between; height: 22px; margin: 14px 8px 6px; font-size: 11px; letter-spacing: 1.6px; color: #86a9ac; transition: margin 0.3s, height 0.3s; }
#sidebar .nav-label > span.nl-text { font-size: 11px; color: inherit; font-weight: 700; white-space: nowrap; }
#sidebar .side-new { width: 24px; height: 24px; border-radius: 8px; color: #bcd3d4; display: grid; place-items: center; font-size: 14px; }
#sidebar .side-new:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: rotate(90deg); }
#sidebar .side-nav { gap: 3px; margin: 0; }
#sidebar .side-nav button { position: relative; font-size: 14px; font-weight: 500; padding: 11px 12px; gap: 0; border-radius: 12px; color: #b3cccd; white-space: nowrap; min-height: 44px; overflow: hidden; transition: background 0.25s, color 0.25s, transform 0.35s var(--ease), padding 0.3s; animation: slideIn 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
#sidebar .side-nav button .ni { width: 22px; height: 22px; font-size: 20px; display: grid; place-items: center; color: #8fb2b4; flex-shrink: 0; transition: color 0.25s, transform 0.4s var(--spring); }
#sidebar .side-nav button .nav-text { padding-left: 13px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.25s 0.05s, max-width 0.4s var(--ease), padding 0.3s; }
#sidebar .side-nav button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; transform: translateX(3px); }
#sidebar .side-nav button:hover .ni { color: var(--acc); transform: scale(1.12); }
#sidebar .side-nav button.selected { color: #fff; background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
#sidebar .side-nav button.selected .ni { color: var(--acc); }
#sidebar .side-nav button.selected::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--acc); box-shadow: 0 0 12px var(--acc); animation: grow 0.6s var(--spring) both; }
#sidebar .tool-count { margin-left: auto; font-size: 11px; padding: 2px 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); color: #d6e6e6; border: 0; transition: opacity 0.2s; }
#sidebar .nav-tag { display: none; }

#sidebar .side-wheels { display: flex; flex-direction: column; gap: 2px; max-height: 138px; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
#sidebar .side-wheel { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; color: #a9c3c5; text-align: left; white-space: nowrap; transition: background 0.2s, color 0.2s, transform 0.3s var(--ease); animation: slideIn 0.5s var(--ease) both; }
#sidebar .side-wheel:hover { background: rgba(255, 255, 255, 0.08); color: #fff; transform: translateX(3px); }
#sidebar .side-wheel.on { color: #fff; background: rgba(255, 255, 255, 0.08); }
#sidebar .side-wheel .dot { width: 8px; height: 8px; border-radius: 50%; background: #5f8588; flex-shrink: 0; }
#sidebar .side-wheel.on .dot { background: var(--acc); box-shadow: 0 0 0 0 var(--acc-glow); animation: ping 2.4s ease-out infinite; }
#sidebar .side-wheel .t { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#sidebar .side-wheel .n { font-size: 11px; color: #7fa0a3; }

#sidebar .sidebar-bottom { padding-top: 14px; margin-top: auto; font-size: 14px; }
#sidebar .tip-card { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); border-radius: 16px; padding: 14px 15px; margin-bottom: 12px; transition: opacity 0.25s, transform 0.3s var(--ease); }
#sidebar .tip-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%); transform: translateX(-120%); animation: shine 6s ease-in-out infinite 2s; pointer-events: none; }
#sidebar .tip-card p { font-size: 16px; line-height: 1.4; margin: 8px 0; }
#sidebar .tip-card button:hover { background: none; color: #fff; }
#sidebar .help-link { position: relative; min-height: 44px; padding: 10px 12px; border-radius: 12px; gap: 0; color: #b3cccd; display: flex; align-items: center; white-space: nowrap; overflow: hidden; width: 100%; }
#sidebar .help-link .ni { width: 22px; height: 22px; display: grid; place-items: center; font-size: 20px; color: #8fb2b4; }
#sidebar .help-link .nav-text { padding-left: 13px; font-size: 14px; max-width: 170px; transition: opacity 0.25s, max-width 0.4s var(--ease); }
#sidebar .help-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
#sidebar .help-link kbd { margin-left: auto; transition: opacity 0.2s; }
#sidebar .sidebar-status { margin-top: 10px; padding: 14px 8px 0; font-size: 12px; color: #86a9ac; white-space: nowrap; overflow: hidden; }
#sidebar .sidebar-status i { width: 7px; height: 7px; background: #5fd3a2; flex-shrink: 0; animation: ping 2.6s ease-out infinite; box-shadow: 0 0 0 0 rgba(95, 211, 162, 0.5); }
#sidebar .sidebar-status .nav-text { transition: opacity 0.25s, max-width 0.4s var(--ease); max-width: 140px; overflow: hidden; }
#sidebar .sidebar-status .ver { margin-left: auto; color: #6c8f92; transition: opacity 0.2s; }

/* Rail (collapsed desktop) */
@media (min-width: 1051px) {
  body.nav-collapsed #sidebar { padding-left: 12px; padding-right: 12px; }
  body.nav-collapsed #sidebar .brand-word, body.nav-collapsed #sidebar .brand-dot { opacity: 0; max-width: 0; }
  body.nav-collapsed #sidebar .brand { padding: 0; gap: 0; justify-content: center; width: 100%; }
  body.nav-collapsed #sidebar .brand > span:last-child { margin-left: 0; }
  body.nav-collapsed #sidebar .workspace-label { padding: 7px; justify-content: center; gap: 0; }
  body.nav-collapsed #sidebar .workspace-label > div, body.nav-collapsed #sidebar .workspace-label > span:last-child { opacity: 0; max-width: 0; padding: 0; position: absolute; pointer-events: none; }
  body.nav-collapsed #sidebar .nav-label { height: 1px; margin: 16px 16px; background: rgba(255, 255, 255, 0.1); }
  body.nav-collapsed #sidebar .nav-label > * { display: none; }
  body.nav-collapsed #sidebar .side-nav button { justify-content: center; padding: 11px 0; }
  body.nav-collapsed #sidebar .side-nav button .nav-text, body.nav-collapsed #sidebar .help-link .nav-text, body.nav-collapsed #sidebar .sidebar-status .nav-text { opacity: 0; max-width: 0; padding-left: 0; }
  body.nav-collapsed #sidebar .tool-count, body.nav-collapsed #sidebar .help-link kbd, body.nav-collapsed #sidebar .sidebar-status .ver { opacity: 0; position: absolute; pointer-events: none; }
  body.nav-collapsed #sidebar .tip-card, body.nav-collapsed #sidebar .side-wheels-wrap { display: none; }
  body.nav-collapsed #sidebar .help-link { justify-content: center; padding: 10px 0; }
  body.nav-collapsed #sidebar .sidebar-status { justify-content: center; }
  body.nav-collapsed #sidebar .side-nav button:hover { transform: none; }
}

/* Edge handle, scrim, tooltip */
.nav-edge { position: fixed; z-index: 45; top: 28px; left: calc(var(--sidebar-w) - 15px); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: var(--ink); background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--sh-md); transition: left 0.4s var(--ease), transform 0.3s var(--spring), background 0.2s, opacity 0.2s; opacity: 0; }
.nav-edge .i { transition: transform 0.4s var(--ease); }
#sidebar:hover ~ .nav-edge, .nav-edge:hover, .nav-edge:focus-visible, body.nav-collapsed .nav-edge { opacity: 1; }
.nav-edge:hover { background: var(--pri); color: #fff; transform: scale(1.12); }
body.nav-collapsed .nav-edge .i { transform: rotate(180deg); }
.nav-scrim { position: fixed; inset: 0; z-index: 38; background: rgba(6, 22, 24, 0.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.35s; }
.nav-scrim.show { opacity: 1; }
.nav-tip { position: fixed; z-index: 70; padding: 7px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: #fff; background: #0b2428; box-shadow: var(--sh-md); pointer-events: none; transform: translateY(-50%); white-space: nowrap; animation: tipIn 0.2s var(--ease); }
.nav-tip::before { content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; background: inherit; transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
.tabbar { display: none; }

/* Drawer (tablet and phone) */
@media (max-width: 1050px) {
  #sidebar { transform: translateX(-104%); width: var(--sidebar-w); top: 0; bottom: 0; height: auto; right: auto; flex-direction: column; padding: 20px 14px 14px; border-top: 0; }
  body.nav-open #sidebar { transform: none; box-shadow: 24px 0 70px rgba(0, 0, 0, 0.4); }
  #sidebar .drawer-close { display: grid; }
  .nav-edge { display: none; }
  #sidebar > .side-nav, #sidebar nav.side-nav { display: flex; flex: none; flex-direction: column; margin: 0; gap: 3px; justify-content: flex-start; align-items: stretch; }
  #sidebar .sidebar-bottom { display: block; }
  #sidebar .workspace-label { display: flex; }
  #sidebar .nav-label { display: flex; }
  #sidebar .sidebar-status { display: flex; }
  #sidebar .side-nav button, #sidebar nav.side-nav button { flex-direction: row; justify-content: flex-start; padding: 11px 12px; font-size: 14px; min-height: 46px; }
  #sidebar nav.side-nav button > span.nav-text, #sidebar .side-nav button > span.tool-count { display: inline; }
  #sidebar nav.side-nav button.selected { background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)); color: #fff; }
  #sidebar .tip-card { display: block; }
  #sidebar .side-nav button > span.ni { display: grid; width: 22px; font-size: 20px; }
  body.nav-open { overflow: hidden; }
  .tabbar { display: none; }
}
@media (max-width: 520px) {
  .tabbar { display: flex; position: fixed; z-index: 30; left: 10px; right: 10px; bottom: 10px; padding: 6px; border-radius: 22px; background: color-mix(in srgb, var(--surface-solid) 86%, transparent); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid var(--border); box-shadow: var(--sh-lg); justify-content: space-around; }
  .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: 16px; font-size: 10.5px; font-weight: 600; color: var(--muted); position: relative; }
  .tabbar button .i { font-size: 21px; transition: transform 0.35s var(--spring); }
  .tabbar button.on { color: var(--pri-text); background: var(--pri-soft); }
  .tabbar button.on .i { transform: translateY(-2px) scale(1.1); }
  .tabbar button:active .i { transform: scale(0.85); }
  main { padding-bottom: 110px !important; }
}

/* ---------- Header ---------- */
body header.app-header { position: sticky; top: 0; z-index: 30; height: 68px; padding: 0 28px; gap: 14px; background: color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid var(--border); margin-left: var(--sidebar); transition: box-shadow 0.3s; }
body.scrolled header.app-header { box-shadow: 0 8px 30px -14px rgba(10, 34, 32, 0.28); }
body main { margin-left: var(--sidebar); }
body.nav-animating main, body.nav-animating header.app-header { transition: margin-left 0.4s var(--ease), box-shadow 0.3s; }
.nav-toggle { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; color: var(--ink); border: 1px solid var(--border); background: var(--surface-solid); box-shadow: var(--sh-sm); }
.nav-toggle:hover { background: var(--pri-soft); color: var(--pri-text); transform: translateY(-1px); }
.nav-toggle:active { transform: scale(0.92); }
.nav-toggle .bars { position: relative; width: 18px; height: 14px; display: block; }
.nav-toggle .bars i { position: absolute; left: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.4s var(--spring), width 0.3s var(--ease), top 0.3s var(--ease), opacity 0.2s; }
.nav-toggle .bars i:nth-child(1) { top: 0; width: 18px; }
.nav-toggle .bars i:nth-child(2) { top: 6px; width: 12px; }
.nav-toggle .bars i:nth-child(3) { top: 12px; width: 18px; }
body.nav-collapsed .nav-toggle .bars i:nth-child(2) { width: 18px; }
body.nav-open .nav-toggle .bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.nav-open .nav-toggle .bars i:nth-child(2) { opacity: 0; transform: translateX(-8px); }
body.nav-open .nav-toggle .bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.breadcrumb strong { font-weight: 700; }
.command-search { border-radius: 14px; padding: 10px 14px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--sh-sm); transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s var(--ease); min-width: 260px; }
.command-search:hover { border-color: var(--pri-glow); box-shadow: 0 0 0 4px var(--pri-glow), var(--sh-sm); transform: translateY(-1px); background: var(--surface-solid); }
.command-search > .i { font-size: 17px; color: var(--pri-text); }
.header-actions { gap: 6px; }
.header-actions > button { border-radius: 12px; }
.icon-btn { width: 42px; height: 42px; padding: 0 !important; display: grid; place-items: center; font-size: 19px !important; color: var(--muted) !important; border-radius: 13px; }
.icon-btn:hover { background: var(--pri-soft); color: var(--pri-text) !important; }
#theme .i-sun { display: none; }
body.dark #theme .i-moon { display: none; }
body.dark #theme .i-sun { display: block; }
#theme .i { animation: iconSpin 0.6s var(--spring); }
#account-button { border-radius: 12px !important; padding: 10px 12px !important; font-weight: 600; }
#account-button:hover { background: var(--pri-soft); }
body .primary, body .header-actions > .primary { position: relative; display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--pri), var(--pri-2)); color: #fff; font-weight: 600; box-shadow: 0 8px 20px -8px var(--pri-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
body .primary:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--pri) 88%, #fff), var(--pri)); transform: translateY(-1px); }
body .primary:active { transform: translateY(0) scale(0.97); }

/* ---------- Compact hero + feature bar ---------- */
body main { max-width: 1640px; padding: 22px 30px 0; }
body .intro { gap: 16px; margin-bottom: 14px; flex-wrap: wrap; align-items: flex-end; animation: rise 0.8s var(--ease) both; }
.intro .eyebrow { font-size: 11px; color: var(--pri-text); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.intro .eyebrow span { background: var(--acc); border-radius: 50%; width: 7px; height: 7px; margin: 0; animation: ping 2.4s ease-out infinite; box-shadow: 0 0 0 0 var(--acc-glow); }
body .intro h1 { font-size: clamp(25px, 2.5vw, 34px); margin: 4px 0 2px; letter-spacing: -1.2px; }
.intro h1 em { font-style: normal; background: linear-gradient(100deg, var(--pri), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: sheen 6s ease-in-out infinite alternate; }
.intro h1 em::after, .intro h1 span::after { display: none; }
.intro p { margin: 2px 0 0; }
.intro-note { display: none !important; }
.intro .cloud-toolbar { margin: 0 0 0 auto; display: flex; align-items: center; gap: 10px; min-height: 0; flex-wrap: nowrap; }
.cloud-toolbar #db-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 99px; background: var(--pri-soft); color: var(--pri-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cloud-toolbar #db-status:before { content: ""; width: 7px; height: 7px; border-radius: 50%; margin: 0; background: #34c38f; box-shadow: 0 0 0 0 rgba(52, 195, 143, 0.5); animation: ping 2.6s ease-out infinite; font-size: 0; }
.cloud-toolbar > button { border-radius: 12px; border: 1px solid var(--border); background: var(--surface-solid); color: var(--pri-text); font-weight: 600; padding: 8px 14px; font-size: 12.5px; box-shadow: var(--sh-sm); white-space: nowrap; }
.cloud-toolbar > button:hover { border-color: var(--pri); background: var(--pri-soft); transform: translateY(-1px); }

body .top-features { padding: 6px; margin: 0 0 12px; gap: 2px; border-radius: 18px; background: var(--surface); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: var(--sh-sm); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; animation: rise 0.8s var(--ease) 0.08s both; }
.top-features::-webkit-scrollbar { display: none; }
body .top-features > button { padding: 9px 13px; border-radius: 12px; font-weight: 600; transition: background 0.2s, transform 0.3s var(--ease), color 0.2s; flex-shrink: 0; }
body .top-features > button:hover { background: var(--pri-soft); color: var(--pri-text); transform: translateY(-1px); }
body .top-features .feature-icon { display: grid; place-items: center; font-size: 17px; color: var(--pri-text); transition: transform 0.4s var(--spring); }
body .top-features > button:hover .feature-icon { transform: scale(1.18) rotate(-6deg); }
body .top-features > button:last-child { margin-left: auto; color: #fff; background: linear-gradient(135deg, var(--pri), var(--pri-2)); box-shadow: 0 8px 18px -8px var(--pri-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
body .top-features > button:last-child .feature-icon { color: #fff; }
body .top-features > button:last-child:hover { color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--pri) 86%, #fff), var(--pri)); }

body .session-bar { margin: 0 0 12px; padding: 0; border: 0; gap: 8px; animation: rise 0.8s var(--ease) 0.14s both; }
body .session-tab { border-radius: 12px; padding: 8px 14px; font-weight: 600; transition: background 0.25s, transform 0.3s var(--ease), box-shadow 0.25s; }
body .session-tab:hover { background: var(--surface-solid); transform: translateY(-1px); }
body .session-tab.active { background: var(--surface-solid); color: var(--pri-text); border-color: var(--border); box-shadow: var(--sh-sm); }
body .session-tab .tab-dot { background: var(--acc); }
body .session-bar > button { border-radius: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
body .session-bar > button:hover { background: var(--pri-soft); color: var(--pri-text); }
body #session-tabs::-webkit-scrollbar { display: none; }

/* ---------- Wheel card ---------- */
body .workspace { gap: 18px; }
body .wheel-card, body .entry-card { border-radius: 24px; border: 1px solid var(--border); background: var(--surface-solid); box-shadow: var(--sh-md); }
body .wheel-card { animation: rise 0.9s var(--ease) 0.2s both; }
body .entry-card { animation: rise 0.9s var(--ease) 0.28s both; }
body .wheel-card:before { inset: 70px 0 100px; opacity: 0.6; }
body .company-bar { padding: 10px 16px; gap: 12px; flex-wrap: nowrap; background: linear-gradient(100deg, var(--pri-soft), transparent 80%); border-bottom: 1px solid var(--border); }
body .company-logo-slot { width: 46px; min-height: 46px; height: 46px; border-radius: 13px; border-color: var(--pri-glow); transition: transform 0.35s var(--spring), border-color 0.2s; padding: 3px; }
body .company-logo-slot:hover { transform: scale(1.06) rotate(-3deg); border-color: var(--pri); background: var(--surface-solid); }
body .company-logo-slot small { display: none; }
body .company-logo-slot img { width: 38px; height: 38px; }
body .logo-placeholder { font-size: 22px; }
body .company-info > button { font-size: 15px; color: var(--pri-text); }
body .company-info p { margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .brand-options { border-radius: 11px; font-weight: 600; color: var(--pri-text); background: var(--surface-solid); }
body .brand-options:hover { border-color: var(--pri); }
body .wheel-toolbar { padding: 12px 16px 0; }
.wheel-name .small-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--pri-soft); color: var(--pri-text); font-size: 17px; }
body .wheel-name button { font-weight: 700; font-size: 16px; }
.wheel-badge { display: inline-flex !important; align-items: center; gap: 6px; background: var(--pri-soft); color: var(--pri-text); border-radius: 99px; padding: 4px 10px; font-weight: 700; }
.wheel-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34c38f; animation: ping 2.2s ease-out infinite; box-shadow: 0 0 0 0 rgba(52, 195, 143, 0.5); }
body .wheel-toolbar > div:last-child { gap: 2px; }
body .wheel-toolbar > div:last-child button { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; color: var(--muted); }
body .wheel-toolbar > div:last-child button:hover { background: var(--pri-soft); color: var(--pri-text); transform: translateY(-1px); }
body .wheel-caption { padding: 0 16px 0 58px; }
body #current-wheel-style { font-weight: 600; }

body .wheel-stage { position: relative; height: calc(var(--wheel-size) + 64px); min-height: 0; flex: none; padding: 0; display: flex; align-items: center; justify-content: center; }
body .wheel-stage::before { content: ""; position: absolute; width: calc(var(--wheel-size) * 1.45); height: calc(var(--wheel-size) * 1.45); border-radius: 50%; background: radial-gradient(circle, var(--pri-glow), transparent 62%); opacity: 0.55; animation: breathe 5s ease-in-out infinite; pointer-events: none; }
body .wheel-wrap { width: var(--wheel-size); height: var(--wheel-size); filter: none; transition: transform 0.5s var(--spring); }
body .wheel-wrap.landed { animation: landed 0.9s var(--spring); }
body #wheel { border: 7px solid #fff; outline: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 0 11px rgba(255, 255, 255, 0.5), 0 24px 50px -16px var(--pri-glow), 0 10px 24px -10px rgba(10, 34, 32, 0.35); transition: box-shadow 0.5s; }
body.dark #wheel { border-color: #2a4548; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 11px rgba(255, 255, 255, 0.05), 0 24px 60px -16px var(--pri-glow); }
.is-spinning #wheel { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 0 11px var(--pri-glow), 0 0 70px 6px var(--pri-glow); }
body .orbit { width: calc(var(--wheel-size) * 1.15); height: calc(var(--wheel-size) * 1.15); border-color: color-mix(in srgb, var(--pri) 22%, transparent); animation: rotate 90s linear infinite; }
body .orbit-two { width: calc(var(--wheel-size) * 1.3); height: calc(var(--wheel-size) * 1.3); border-color: color-mix(in srgb, var(--pri) 12%, transparent); animation-duration: 140s; animation-direction: reverse; }
.is-spinning .orbit { animation-duration: 6s; border-color: var(--pri-glow); }
.is-spinning .orbit-two { animation-duration: 9s; }
body .spark { animation: float 5s ease-in-out infinite; }
body .spark-two { animation-delay: -1.7s; color: var(--pri); opacity: 0.7; }
body .spark-three { animation-delay: -3.1s; }
body .spark-one { color: var(--acc); }
@media (max-width: 760px) { body .spark { display: none; } }
body .pointer { transform-origin: 100% 50%; border-right-color: #0f2c30; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); z-index: 5; }
body.dark .pointer { border-right-color: #e9f3ef; }
body #center-spin { width: calc(var(--wheel-size) * 0.24); height: calc(var(--wheel-size) * 0.24); min-width: 62px; min-height: 62px; border: 6px solid rgba(255, 255, 255, 0.9); background: radial-gradient(circle at 35% 30%, #fff, #e9f1f0); font-size: clamp(12px, calc(var(--wheel-size) * 0.04), 16px); box-shadow: 0 6px 22px rgba(10, 34, 32, 0.3), inset 0 -3px 8px rgba(10, 34, 32, 0.08); transition: transform 0.35s var(--spring), box-shadow 0.3s; }
body.dark #center-spin { background: radial-gradient(circle at 35% 30%, #e9f3ef, #bcd0cc); color: #12302f; }
body #center-spin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--pri); opacity: 0; animation: ring 2.8s ease-out infinite; pointer-events: none; }
body #center-spin:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 8px 28px var(--pri-glow); background-color: #fff; }
body #center-spin:active:not(:disabled) { transform: translate(-50%, -50%) scale(0.94); }
body #center-spin:disabled { opacity: 1; cursor: progress; }
.is-spinning #center-spin::after { animation-duration: 0.9s; }
body #center-spin span { color: var(--pri); }

body .spin-controls { margin: 4px 0 12px; display: flex; flex-direction: column; align-items: center; }
body .spin-button { position: relative; overflow: hidden; min-width: 250px; padding: 15px 30px; border-radius: 16px; font-size: 16px; font-weight: 700; letter-spacing: 0.2px; background: linear-gradient(135deg, var(--pri), var(--pri-2)); box-shadow: 0 14px 28px -10px var(--pri-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 0.35s var(--spring), box-shadow 0.3s, filter 0.3s; }
body .spin-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.32) 50%, transparent 75%); transform: translateX(-130%); }
body .spin-button:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 20px 34px -10px var(--pri-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3); background: linear-gradient(135deg, color-mix(in srgb, var(--pri) 90%, #fff), var(--pri-2)); }
body .spin-button:hover:not(:disabled)::before { animation: sweep 0.9s var(--ease); }
body .spin-button:active:not(:disabled) { transform: translateY(0) scale(0.97); }
body .spin-button:not(:disabled):not(:hover) { animation: nudge 5s ease-in-out infinite 3s; }
body .spin-button span { display: inline-block; transition: transform 0.35s var(--spring); }
body .spin-button:hover span { transform: translate(4px, -4px); }
body .spin-button:disabled { opacity: 1; filter: saturate(0.85); cursor: progress; }
.is-spinning .spin-button { animation: glowPulse 1.1s ease-in-out infinite; }
.is-spinning .spin-button::before { animation: sweep 1.4s linear infinite; }
body .spin-controls p { margin: 9px 0 0; }
body .spin-controls kbd, body kbd { border-radius: 6px; background: var(--surface-solid); border: 1px solid var(--border); border-bottom-width: 2px; font-family: inherit; padding: 1px 6px; }

.recent-winners { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; min-height: 40px; }
.recent-winners::-webkit-scrollbar { display: none; }
.recent-winners[hidden] { display: none; }
.rw-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: var(--muted); text-transform: uppercase; flex-shrink: 0; }
.rw-label .i { color: var(--acc); }
.rw-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--pri-soft); border: 1px solid transparent; max-width: 150px; flex-shrink: 0; transition: transform 0.3s var(--spring), border-color 0.2s; }
.rw-chip:hover { transform: translateY(-2px); border-color: var(--pri-glow); background: var(--pri-soft); }
.rw-chip .d { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rw-chip .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-chip:first-of-type { box-shadow: 0 0 0 2px var(--pri-glow); }
.rw-chip.fresh { animation: chipIn 0.8s var(--spring); }

body .wheel-footer { padding: 12px 18px; border-top: 1px solid var(--border); }
body .wheel-footer i { background: #34c38f; }
body .palette-mini button { transition: transform 0.3s var(--spring); }
body .palette-mini button:hover { transform: scale(1.5); }

/* ---------- Entries card ---------- */
body .tabs { border-bottom: 1px solid var(--border); }
body .tabs button { position: relative; font-weight: 700; transition: color 0.2s; display: inline-flex; align-items: center; gap: 6px; }
body .tabs button.active { color: var(--pri-text); border-bottom: 0; }
body .tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--pri), var(--acc)); animation: grow 0.5s var(--spring) both; transform-origin: center; }
body .tabs b { background: var(--pri-soft); color: var(--pri-text); border-radius: 99px; padding: 2px 8px; transition: transform 0.3s var(--spring); }
body .tabs button:hover b { transform: scale(1.12); }
body .panel-heading h2 { font-size: 18px; letter-spacing: -0.4px; }
body .panel-heading button, body .entry-actions button, body .list-tools button { border-radius: 11px; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s, transform 0.3s var(--ease), border-color 0.2s, color 0.2s; }
body .panel-heading button:hover, body .entry-actions button:hover, body .list-tools button:hover { background: var(--pri-soft); color: var(--pri-text); border-color: var(--pri-glow); transform: translateY(-1px); }
body .list-tools button { display: grid; place-items: center; }
body .list-tools input, body #new-entry { border-radius: 12px; transition: box-shadow 0.25s, border-color 0.25s; }
body .list-tools input:focus, body #new-entry:focus { border-color: var(--pri); box-shadow: 0 0 0 4px var(--pri-glow); }
body #add-form .primary { border-radius: 12px; width: 46px; font-size: 22px; display: grid; place-items: center; }
body #add-form .primary:hover { transform: rotate(90deg) scale(1.06); }
body .entry { border-radius: 12px; transition: background 0.2s, transform 0.3s var(--ease); }
body .entry:hover { background: var(--pri-soft); transform: translateX(2px); }
body .mode-box { border-radius: 16px; border-color: var(--border); background: linear-gradient(100deg, var(--pri-soft), transparent); }
body .mode-symbol { transition: transform 0.6s var(--ease); }
body .mode-box:hover .mode-symbol { transform: rotate(180deg); }
.autosave span { display: inline-block; color: #34c38f; animation: pop 0.6s var(--spring) both; }
body .toggle input:checked { background: var(--pri); }
body .field input[type="range"], body input[type="checkbox"], body input[type="range"] { accent-color: var(--pri); }

body .advanced-tools { gap: 8px; margin: 14px 0 0; }
body .advanced-tools button { border-radius: 99px; border: 1px solid var(--border); background: var(--surface-solid); padding: 8px 14px; box-shadow: var(--sh-sm); transition: transform 0.3s var(--spring), border-color 0.2s, background 0.2s; }
body .advanced-tools button:hover { transform: translateY(-3px); border-color: var(--pri-glow); background: var(--pri-soft); }

/* ---------- Stats ---------- */
body .quick-insights { border: 0; padding: 0; margin: 16px 0 6px; gap: 12px; flex-wrap: wrap; animation: rise 0.9s var(--ease) 0.36s both; }
body .quick-insights > div { display: flex; align-items: center; gap: 10px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 16px; padding: 11px 16px; box-shadow: var(--sh-sm); transition: transform 0.35s var(--spring), box-shadow 0.3s; }
body .quick-insights > div:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
body .quick-insights > div > span { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--pri-soft); color: var(--pri-text); font-size: 17px; transition: transform 0.5s var(--spring); }
body .quick-insights > div:hover > span { transform: rotate(-12deg) scale(1.12); }
body .quick-insights strong { font-size: 20px; font-variant-numeric: tabular-nums; }
body .quick-insights > button { margin-left: auto; font-weight: 600; color: var(--pri-text); border-radius: 12px; padding: 8px 12px; }
body .quick-insights > button:hover { background: var(--pri-soft); }

/* ---------- Templates ---------- */
body .templates { animation: rise 0.9s var(--ease) 0.42s both; }
body .template-grid { gap: 14px; }
body .template-grid > button { position: relative; overflow: hidden; border-radius: 20px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--sh-sm); transition: transform 0.45s var(--spring), box-shadow 0.35s, border-color 0.25s; }
body .template-grid > button::after { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -70px; border-radius: 50%; background: radial-gradient(circle, var(--pri-glow), transparent 70%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
body .template-grid > button:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--sh-md); border-color: var(--pri-glow); background: var(--surface-solid); }
body .template-grid > button:hover::after { opacity: 0.7; }
body .template-grid > button .template-icon { transition: transform 0.5s var(--spring); }
body .template-grid > button:hover .template-icon { transform: rotate(-10deg) scale(1.15); }
body .template-grid > button > span:last-child { transition: transform 0.4s var(--spring), color 0.2s; }
body .template-grid > button:hover > span:last-child { transform: translate(4px, -4px); color: var(--pri); }
body .section-heading > button { font-weight: 600; color: var(--pri-text); border-radius: 12px; padding: 8px 12px; }
body .section-heading > button:hover { background: var(--pri-soft); }
body footer { border-top: 1px solid var(--border); }

/* ---------- Dialogs, winner, toast ---------- */
body dialog { border-radius: 26px; border: 1px solid var(--border); box-shadow: var(--sh-lg); background: var(--surface-solid); }
body dialog[open] { animation: dialogIn 0.5s var(--spring); }
body dialog[open]::backdrop { animation: fade 0.35s ease both; background: rgba(6, 28, 30, 0.5); backdrop-filter: blur(8px) saturate(1.2); }
body .dialog-top button { transition: transform 0.4s var(--spring), background 0.2s; }
body .dialog-top button:hover { transform: rotate(90deg); background: var(--pri-soft); }
body .dialog-actions button, body .soft-button { border-radius: 12px; font-weight: 600; transition: transform 0.3s var(--spring), border-color 0.2s, background 0.2s; }
body .dialog-actions button:hover, body .soft-button:hover { transform: translateY(-2px); border-color: var(--pri-glow); background: var(--pri-soft); }
body .dialog-actions button.primary:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--pri) 88%, #fff), var(--pri)); }
.winner { position: relative; isolation: isolate; }
.winner::before { content: ""; position: absolute; left: 50%; top: 22px; width: 340px; height: 340px; margin-left: -170px; z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--pri-glow), transparent 22%, var(--acc-glow), transparent 48%, var(--pri-glow), transparent 72%, var(--acc-glow), transparent); -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); animation: rotate 9s linear infinite; opacity: 0.8; }
.winner .winner-icon { font-size: 58px; display: inline-block; animation: popSpin 1s var(--spring) both; filter: drop-shadow(0 6px 14px var(--acc-glow)); }
.winner h3 { background: linear-gradient(95deg, var(--pri), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: winnerIn 0.8s var(--spring) 0.15s both; letter-spacing: -1px; }
.winner img { border-radius: 18px; animation: winnerIn 0.8s var(--spring) 0.1s both; }
.winner p { animation: rise 0.7s var(--ease) 0.4s both; }
body #toast { display: flex; align-items: center; gap: 10px; bottom: 28px; padding: 12px 20px 12px 14px; border-radius: 16px; font-size: 13.5px; font-weight: 500; background: #0d2a2e; color: #eaf5f3; box-shadow: var(--sh-lg); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.5s var(--spring), opacity 0.3s; opacity: 0; text-align: left; }
body #toast.show { opacity: 1; }
body #toast::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pri); color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* ---------- Appearance popover ---------- */
.pop { position: fixed; z-index: 60; width: 296px; max-width: calc(100vw - 24px); padding: 16px; border-radius: 22px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--sh-lg); transform-origin: top right; animation: popIn 0.35s var(--spring); color: var(--ink); }
.pop h3 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.pop h3 .i { color: var(--pri-text); }
.pop .lbl { display: flex; justify-content: space-between; margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: 13px; background: var(--pri-soft); }
.seg button { padding: 8px 4px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.3s var(--spring); }
.seg button:hover { background: transparent; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface-solid); color: var(--pri-text); box-shadow: var(--sh-sm); transform: scale(1.03); }
.swatches { display: flex; gap: 10px; }
.sw { width: 34px; height: 34px; border-radius: 50%; position: relative; background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 14px -6px var(--c); transition: transform 0.35s var(--spring); }
.sw:hover { transform: scale(1.15); background: linear-gradient(135deg, var(--c), var(--c2)); }
.sw[aria-pressed="true"]::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--c); animation: pop 0.4s var(--spring); }
.sw[aria-pressed="true"]::before { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; }
.pop .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13px; font-weight: 600; }
.pop .row small { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; font-size: 11.5px; }
.switch { appearance: none; width: 40px; height: 24px; border-radius: 99px; background: var(--border); position: relative; cursor: pointer; margin: 0; border: 0; flex-shrink: 0; transition: background 0.25s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: transform 0.35s var(--spring); }
.switch:checked { background: var(--pri); }
.switch:checked::after { transform: translateX(16px); }
.kbd-list { display: grid; gap: 4px; margin-top: 8px; }
.kbd-list div { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; }
.kbd-list div:nth-child(odd) { background: var(--pri-soft); }
.kbd-list span { display: flex; gap: 4px; }

/* Ripple */
.rip { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, 0.45); transform: scale(0); animation: ripple 0.65s ease-out forwards; }

/* Modes that hide navigation */
.presentation .nav-edge, .stream-view .nav-edge, .presentation .nav-toggle, .stream-view .nav-toggle, .stream-view .tabbar, .presentation .tabbar, .stream-view .nav-scrim, .presentation .nav-scrim { display: none !important; }
body.presentation, body.stream-view { --sidebar: 0px; }
body.presentation { --wheel-size: min(70vh, 720px); }
body.focus-editor { --wheel-size: 390px; }
.stream-view .recent-winners, .stream-view .spin-controls p { display: none; }

/* ---------- Responsive refinements ---------- */
@media (max-width: 1250px) {
  .command-search { display: flex !important; min-width: 0; }
  .command-search kbd { display: none; }
  body header.app-header { padding: 0 20px; }
}
@media (max-width: 960px) { .command-search { padding: 10px 12px; font-size: 0; gap: 0; } .command-search > .i { font-size: 18px; } }
@media (max-width: 840px) {
  body main { padding: 18px 18px 0; }
  body .intro .cloud-toolbar { margin-left: 0; width: 100%; justify-content: space-between; }
  :root { --wheel-size: calc(clamp(240px, 78vw, 440px) * var(--wheel-scale)); }
  body .quick-insights > div { flex: 1; min-width: 150px; }
}
@media (max-width: 520px) {
  body header.app-header { height: 62px; padding: 0 12px; gap: 8px; }
  .breadcrumb strong { display: none; }
  .header-actions > .primary > span { display: none; }
  .header-actions > .primary { padding: 10px 12px; }
  #account-button { max-width: 64px; }
  body main { padding: 16px 14px 0; }
  body .top-features { display: flex !important; grid-template-columns: none; }
  body .top-features > button { white-space: nowrap; min-height: 0; }
  body .top-features > button:last-child { margin-left: 8px; }
  :root { --wheel-size: calc(min(78vw, 360px) * var(--wheel-scale)); }
  body .company-bar { flex-wrap: wrap; }
  body .brand-options { margin-left: auto; }
  body .quick-insights > div { min-width: 0; padding: 10px 12px; }
  body .quick-insights strong { font-size: 17px; }
  body .quick-insights small { max-width: none; }
  body #toast { bottom: 100px; max-width: 92%; }
}
@media (max-height: 860px) and (min-width: 841px) {
  .intro p, .spin-controls p { display: none; }
  body .intro { margin-bottom: 10px; }
  body .wheel-stage { height: calc(var(--wheel-size) + 44px); }
}

/* ---------- Keyframes ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-14px); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.9) translateY(-8px); } }
@keyframes tipIn { from { opacity: 0; margin-left: -6px; } }
@keyframes dialogIn { from { opacity: 0; transform: translateY(28px) scale(0.94); } }
@keyframes popSpin { 0% { transform: scale(0) rotate(-200deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes winnerIn { from { opacity: 0; transform: scale(0.6) translateY(16px); } }
@keyframes chipIn { 0% { transform: scale(0) translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes iconSpin { from { transform: rotate(-90deg) scale(0.4); opacity: 0; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--ping, rgba(52, 195, 143, 0.45)); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes sheen { to { background-position: 100% 0; } }
@keyframes sweep { to { transform: translateX(130%); } }
@keyframes nudge { 0%, 88%, 100% { transform: none; } 92% { transform: translateY(-4px); } 96% { transform: translateY(0); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 14px 28px -10px var(--pri-glow), 0 0 0 0 var(--pri-glow); } 50% { box-shadow: 0 14px 36px -6px var(--pri-glow), 0 0 0 10px transparent; } }
@keyframes ring { 0% { transform: scale(0.85); opacity: 0.6; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(0.94); opacity: 0.4; } 50% { transform: scale(1.04); opacity: 0.7; } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(16deg); } }
@keyframes landed { 0% { transform: scale(1); } 35% { transform: scale(1.045); } 100% { transform: scale(1); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes pointerTick { 0% { transform: rotate(0); } 35% { transform: rotate(-17deg); } 100% { transform: rotate(0); } }

/* Calm motion (user setting) and OS reduced-motion */
html.calm *, html.calm *::before, html.calm *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.nav-boot *, .nav-boot *::before, .nav-boot *::after { transition: none !important; }

/* ---------- Fit-the-fold tuning ---------- */
:root { --wheel-size: clamp(250px, calc((100vh - 520px) * var(--wheel-scale)), 640px); }
body header.app-header { height: 62px; }
body main { padding-top: 16px; }
body .company-bar { padding: 8px 14px; }
body .company-logo-slot { width: 42px; min-height: 42px; height: 42px; }
body .wheel-stage { height: calc(var(--wheel-size) + 44px); }
@media (max-height: 1100px) and (min-width: 841px) {
  .intro p, .wheel-caption, #current-wheel-style { display: none !important; }
  body .intro { margin-bottom: 10px; }
  body .wheel-toolbar { padding-top: 10px; }
  body .spin-controls p { display: none; }
  body .spin-controls { margin: 0 0 10px; }
  body .wheel-footer { padding: 9px 18px; min-height: 0; }
}
@media (max-width: 840px) {
  .command-search { display: none !important; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 520px) {
  .breadcrumb { display: none; }
  body .intro .cloud-toolbar { flex-wrap: wrap; gap: 8px; }
  body .intro h1 { max-width: none; font-size: 26px; }
  body .intro p { display: none; }
}

/* Drawer: restore labels and brand hidden by the legacy tablet/phone rules */
@media (max-width: 1050px) {
  #sidebar .side-nav button > span.nav-text, #sidebar .side-nav button > span.tool-count { display: inline; }
  #sidebar .side-nav button > span.nav-text { opacity: 1; max-width: 170px; }
  #sidebar .brand { font-size: 31px; justify-content: flex-start; gap: 8px; padding: 0 6px; }
  #sidebar .brand > span:last-child { display: inline; }
  #sidebar .brand-mark { font-size: 27px; }
}

/* Header never overflows on phones */
@media (max-width: 520px) {
  body header.app-header { min-width: 0; overflow: hidden; }
  body header.app-header .header-actions { min-width: 0; flex-shrink: 1; }
  body header.app-header .header-actions > button[data-action="share"] > span { display: none; }
  body header.app-header .header-actions > button[data-action="share"] { padding: 10px 12px; }
  body header.app-header #account-button { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 380px) { body header.app-header #appearance { display: none; } }

/* Phone: keep every row inside the viewport */
@media (max-width: 520px) {
  body .wheel-badge, body .wheel-badge::before { display: none !important; }
  body .wheel-name { flex: 1; min-width: 0; }
  body .wheel-name button { max-width: 100%; }
  body .company-info { flex: 1 1 140px; min-width: 0; }
  body .intro { min-width: 0; }
  body .intro .cloud-toolbar { width: 100%; min-width: 0; margin-left: 0; justify-content: flex-start; }
  body .cloud-toolbar #db-status { white-space: normal; max-width: 100%; }
}