/* Skins: per-user color + lighting on top of the light / dim / dark theme. html[data-skin="…"]. Default: kolot (purple + gold, from the logo). */
html { --gold: #f5b301; --gold-2: #f59e0b; --spot-a: rgba(109, 60, 240, .10); --spot-b: rgba(245, 179, 1, .08); }

/* soft studio lighting: two spotlights + a faint sound-wave line at the top of the page */
body { background: var(--bg); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 520px at 88% -8%, var(--spot-a), transparent 62%), radial-gradient(700px 420px at 4% -4%, var(--spot-b), transparent 60%), radial-gradient(600px 600px at 50% 120%, var(--spot-a), transparent 70%); }
body::after { content: ""; position: fixed; inset: 0 0 auto 0; height: 140px; pointer-events: none; z-index: 0; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='140' viewBox='0 0 600 140'%3E%3Cpath d='M0 70 Q 25 20 50 70 T 100 70 T 150 70 T 200 70 T 250 70 T 300 70 T 350 70 T 400 70 T 450 70 T 500 70 T 550 70 T 600 70' fill='none' stroke='%238b5cf6' stroke-opacity='.10' stroke-width='2'/%3E%3Cpath d='M0 80 Q 37 40 75 80 T 150 80 T 225 80 T 300 80 T 375 80 T 450 80 T 525 80 T 600 80' fill='none' stroke='%23f5b301' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E") repeat-x top center;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.app { position: relative; z-index: 1; }
.card, .side { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -18px color-mix(in srgb, var(--brand) 35%, transparent); }

/* logo */
.brand-logo { display: block; height: 40px; width: auto; max-width: 150px; object-fit: contain; }
.brand-logo.dark-only { display: none; }
html[data-theme="dim"] .brand-logo.light-only, html[data-theme="dark"] .brand-logo.light-only { display: none; }
html[data-theme="dim"] .brand-logo.dark-only, html[data-theme="dark"] .brand-logo.dark-only { display: block; }
.brand.with-logo { gap: 10px; align-items: center; }

/* ---------- skins */
html[data-skin="kolot"] { --brand: #6d3cf0; --brand-2: #f5b301; --brand-ink: #4c1fd1; --spot-a: rgba(109,60,240,.11); --spot-b: rgba(245,179,1,.10); }
html[data-skin="ocean"] { --brand: #0b84d8; --brand-2: #06b6d4; --brand-soft: #e3f3fd; --brand-ink: #075a96; --brand-line: #bfe3f9; --focus: rgba(11,132,216,.28); --spot-a: rgba(11,132,216,.11); --spot-b: rgba(6,182,212,.09); }
html[data-skin="sunset"] { --brand: #e8590c; --brand-2: #ec4899; --brand-soft: #fff0e6; --brand-ink: #b5440a; --brand-line: #ffd3b8; --focus: rgba(232,89,12,.26); --spot-a: rgba(232,89,12,.10); --spot-b: rgba(236,72,153,.08); }
html[data-skin="forest"] { --brand: #0f9f6e; --brand-2: #84cc16; --brand-soft: #e3f8ef; --brand-ink: #0a7350; --brand-line: #b9ecd6; --focus: rgba(15,159,110,.26); --spot-a: rgba(15,159,110,.10); --spot-b: rgba(132,204,22,.08); }
html[data-skin="rose"] { --brand: #db2777; --brand-2: #a855f7; --brand-soft: #fde8f2; --brand-ink: #a51d5a; --brand-line: #f9c6dd; --focus: rgba(219,39,119,.26); --spot-a: rgba(219,39,119,.10); --spot-b: rgba(168,85,247,.08); }
html[data-skin="graphite"] { --brand: #374151; --brand-2: #64748b; --brand-soft: #eef0f3; --brand-ink: #1f2937; --brand-line: #d6dae1; --focus: rgba(55,65,81,.25); --spot-a: rgba(55,65,81,.06); --spot-b: rgba(100,116,139,.06); }
html[data-skin="neon"] { --brand: #7c3aed; --brand-2: #22d3ee; --brand-soft: #f0eaff; --brand-ink: #5b21b6; --brand-line: #dccbff; --focus: rgba(34,211,238,.3); --spot-a: rgba(124,58,237,.14); --spot-b: rgba(34,211,238,.12); }
/* dim / dark: lighter accents so text stays readable */
html[data-skin="ocean"]:is([data-theme="dim"],[data-theme="dark"]) { --brand: #38a9f0; --brand-2: #22d3ee; --brand-soft: rgba(56,169,240,.18); --brand-ink: #a9dcfb; --brand-line: rgba(56,169,240,.42); --spot-a: rgba(56,169,240,.14); --spot-b: rgba(34,211,238,.10); }
html[data-skin="sunset"]:is([data-theme="dim"],[data-theme="dark"]) { --brand: #fb8a4c; --brand-2: #f472b6; --brand-soft: rgba(251,138,76,.18); --brand-ink: #ffc9a8; --brand-line: rgba(251,138,76,.42); --spot-a: rgba(251,138,76,.13); --spot-b: rgba(244,114,182,.10); }
html[data-skin="forest"]:is([data-theme="dim"],[data-theme="dark"]) { --brand: #34d399; --brand-2: #a3e635; --brand-soft: rgba(52,211,153,.16); --brand-ink: #a7f3d0; --brand-line: rgba(52,211,153,.4); --spot-a: rgba(52,211,153,.12); --spot-b: rgba(163,230,53,.08); }
html[data-skin="rose"]:is([data-theme="dim"],[data-theme="dark"]) { --brand: #f472b6; --brand-2: #c084fc; --brand-soft: rgba(244,114,182,.18); --brand-ink: #fbcfe8; --brand-line: rgba(244,114,182,.42); --spot-a: rgba(244,114,182,.13); --spot-b: rgba(192,132,252,.10); }
html[data-skin="graphite"]:is([data-theme="dim"],[data-theme="dark"]) { --brand: #94a3b8; --brand-2: #cbd5e1; --brand-soft: rgba(148,163,184,.16); --brand-ink: #e2e8f0; --brand-line: rgba(148,163,184,.4); --spot-a: rgba(148,163,184,.07); --spot-b: rgba(203,213,225,.05); }
html[data-skin="neon"]:is([data-theme="dim"],[data-theme="dark"]) { --brand: #a78bfa; --brand-2: #22d3ee; --brand-soft: rgba(167,139,250,.2); --brand-ink: #ddd6fe; --brand-line: rgba(34,211,238,.45); --spot-a: rgba(167,139,250,.18); --spot-b: rgba(34,211,238,.14); }
html[data-skin="kolot"]:is([data-theme="dim"],[data-theme="dark"]) { --brand-2: #fbbf24; --spot-a: rgba(139,92,246,.15); --spot-b: rgba(251,191,36,.10); }

/* skin picker swatches */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.skin-opt { border: 2px solid var(--line); border-radius: 14px; padding: 10px; background: var(--surface); cursor: pointer; text-align: center; font-weight: 600; color: var(--ink); }
.skin-opt.on { border-color: var(--brand); box-shadow: 0 0 0 4px var(--focus); }
.skin-sw { height: 34px; border-radius: 10px; margin-bottom: 8px; }

/* top-bar account button */
.me-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px 3px 4px; cursor: pointer; color: var(--ink); font-weight: 600; }
.me-btn .av-svg, .me-btn .avatar { border-radius: 50%; }
.av-svg { display: inline-block; vertical-align: middle; border-radius: 50%; flex: none; }

/* avatar designer */
.avd { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; }
.avd-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; position: sticky; top: 0; }
.avd-preview .av-svg { box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--brand) 60%, transparent); }
.avd-row { margin-bottom: 12px; }
.avd-lbl { font-weight: 700; font-size: .93rem; margin-bottom: 6px; color: var(--ink-2); }
.avd-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.avd-c { border: 2px solid transparent; background: var(--surface-2); border-radius: 12px; padding: 3px; cursor: pointer; line-height: 0; }
.avd-c.on { border-color: var(--brand); background: var(--brand-soft); }
.avd-sw { display: inline-block; width: 28px; height: 28px; border-radius: 50%; }
@media (max-width: 640px) { .avd { grid-template-columns: minmax(0, 1fr); } .avd-preview { position: static; } }

/* nav editor */
.nav-edit { list-style: none; margin: 0; padding: 0; }
.nav-edit li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; background: var(--surface); cursor: grab; }
.nav-edit li.off { opacity: .45; }
.nav-edit li.drag { opacity: .6; border-style: dashed; }
.nav-edit .grip { color: var(--ink-4); font-size: 1.1rem; }

.mt4 { margin-top: 4px; } .mt12 { margin-top: 12px; }
label.field > span { font-size: .9rem; color: var(--ink-3); font-weight: 600; }
@media (max-width: 720px) { .hide-sm { display: none; } }
/* permission grid */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.perm-grid label { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; }
.perm-grid label:hover { background: var(--surface-hover); }
.perm-grid label.over { background: var(--brand-soft); }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok, #10b981); display: inline-block; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #10b981) 25%, transparent); }