/* ================================================================
   PSYCHOCORE 4.1 — style.css
   Theme: toxic green + deep purple · user-customizable colors
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Core palette — deep noir base */
  --bg:     #060a08;
  --bg2:    #0a1210;
  --bg3:    #101c17;
  --bg4:    #162420;
  --bg5:    #1c2e28;

  /* Glass surfaces */
  --glass:   rgba(255,255,255,.028);
  --glass2:  rgba(255,255,255,.055);
  --glass3:  rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.06);

  /* Borders */
  --border:  rgba(255,255,255,.06);
  --bord2:   rgba(255,255,255,.1);
  --bord3:   rgba(255,255,255,.16);

  /* Primary accent — toxic green (user-overridable) */
  --acc:    #22c55e;
  --acc2:   #4ade80;
  --acc3:   #86efac;
  --glow:   rgba(34,197,94,.3);
  --glow2:  rgba(34,197,94,.15);
  --asoft:  rgba(34,197,94,.1);
  --asoft2: rgba(34,197,94,.06);

  /* Secondary accent — purple (user-overridable) */
  --sec:    #8b5cf6;
  --sec2:   #a78bfa;
  --sglow:  rgba(139,92,246,.3);
  --ssoft:  rgba(139,92,246,.1);

  /* Semantic colors */
  --teal:  #2dd4bf;  --ts:  rgba(45,212,191,.1);   --tg: rgba(45,212,191,.25);
  --grn:   #22c55e;  --gs:  rgba(34,197,94,.1);     --gg: rgba(34,197,94,.25);
  --ylw:   #fbbf24;  --ys:  rgba(251,191,36,.1);    --yg: rgba(251,191,36,.25);
  --red:   #f43f5e;  --rs:  rgba(244,63,94,.1);     --rg: rgba(244,63,94,.25);
  --pink:  #ec4899;  --ps:  rgba(236,72,153,.1);    --pg: rgba(236,72,153,.25);
  --blue:  #3b82f6;  --bs2: rgba(59,130,246,.1);

  /* Typography */
  --txt:   #e8eaf6;
  --txt2:  #8890b4;
  --txt3:  #4a5178;
  --txt4:  #2e3452;

  /* Layout */
  --r:  14px;
  --r2: 10px;
  --r3: 7px;
  --sb: 250px;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --bounce: cubic-bezier(.34,1.56,.64,1);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:14.5px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth }
body {
  font-family:'Outfit',system-ui,sans-serif;
  background:var(--bg);
  color:var(--txt);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.5;
}

/* Ambient background glow */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60% 35% at 50% -8%, rgba(34,197,94,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 90%, rgba(139,92,246,.04) 0%, transparent 50%);
}

/* Noise texture overlay */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.015;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--bord2); border-radius:99px }
::-webkit-scrollbar-thumb:hover { background:var(--acc); box-shadow:0 0 8px var(--glow) }

/* Selection */
::selection { background:rgba(139,92,246,.3); color:#fff }

/* ── Typography ── */
h1 { font-size:1.6rem; font-weight:800; letter-spacing:-.03em; line-height:1.2 }
h2 { font-size:1.2rem; font-weight:700; letter-spacing:-.02em }
h3 { font-size:.92rem; font-weight:600 }
.t2 { color:var(--txt2) } .t3 { color:var(--txt3) } .t4 { color:var(--txt4) }
.xs { font-size:.72rem } .sm { font-size:.82rem }
.semi { font-weight:600 } .bold { font-weight:700 }
.mono { font-family:'JetBrains Mono',monospace }

/* ── Layout ── */
#main-app { display:flex; min-height:100vh; position:relative; z-index:1 }
.main {
  flex:1; padding:36px 44px; overflow-y:auto; max-width:1100px;
  animation:pageIn .4s var(--ease);
}

@keyframes pageIn {
  from { opacity:0; transform:translateY(8px) }
  to { opacity:1; transform:translateY(0) }
}

/* ── Sidebar ── */
.sidebar {
  width:var(--sb); height:100vh; position:sticky; top:0;
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; flex-shrink:0; overflow-y:auto; z-index:10;
  backdrop-filter:blur(20px);
}
.sidebar::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--acc), var(--sec), transparent);
  opacity:.4; z-index:1;
}
.sidebar::after {
  content:''; position:absolute; top:0; right:0; width:1px; height:100%;
  background:linear-gradient(180deg, var(--acc2) 0%, transparent 30%, transparent 70%, var(--sec2) 100%);
  opacity:.15;
}

/* Profile widget in sidebar */
.sb-prof {
  padding:16px 14px 14px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:all .2s var(--ease); position:relative;
}
.sb-prof:hover { background:var(--glass2) }
.sb-prof:active { transform:scale(.99) }

.sb-av {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--acc), var(--sec));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1rem; color:#fff;
  overflow:hidden; flex-shrink:0; position:relative;
  transition:all .25s var(--ease);
  box-shadow:0 0 0 0 var(--glow);
}
.sb-prof:hover .sb-av { box-shadow:0 0 0 3px var(--glow), 0 0 16px var(--glow2) }
.sb-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; position:absolute; inset:0 }
.sb-name {
  font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--txt); transition:color .2s var(--ease);
}
.sb-prof:hover .sb-name { color:var(--acc2) }
.sb-meta { display:flex; align-items:center; gap:6px; margin-top:3px }
.sb-lvl { font-size:.68rem; color:var(--txt3); font-weight:500 }

/* Nav */
.nl {
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt4); padding:14px 16px 6px;
}
.ni {
  display:flex; align-items:center; gap:9px; padding:9px 12px; margin:2px 8px;
  border-radius:var(--r2); font-size:.84rem; font-weight:500; color:var(--txt2);
  cursor:pointer; transition:all .18s var(--ease); user-select:none;
  text-decoration:none; position:relative;
}
.ni:hover { background:var(--glass2); color:var(--txt) }
.ni.on {
  background:var(--asoft); color:var(--txt);
  box-shadow:inset 0 0 20px var(--asoft2);
}
.ni.on::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:50%; background:var(--acc);
  border-radius:0 3px 3px 0; box-shadow:0 0 8px var(--glow);
}
.ni svg { flex-shrink:0; width:16px; height:16px; opacity:.5; transition:all .18s var(--ease) }
.ni.on svg, .ni:hover svg { color:var(--acc); opacity:1 }
.nb {
  margin-left:auto; padding:2px 7px; border-radius:99px;
  font-size:.62rem; font-weight:700; min-width:18px; text-align:center;
}

/* ── Tab content ── */
.tc { display:none; animation:tabIn .25s var(--ease) }
.tc.on { display:block }
@keyframes tabIn {
  from { opacity:0; transform:translateY(6px) }
  to { opacity:1; transform:translateY(0) }
}

/* ── Cards ── */
.card {
  background:var(--glass); border:1px solid var(--border); border-radius:var(--r);
  padding:22px; transition:all .2s var(--ease); position:relative;
}
.card:hover { border-color:var(--bord2); box-shadow:0 4px 24px rgba(0,0,0,.2) }
.card-dark {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--r);
  padding:20px; transition:all .2s var(--ease);
}
.card-dark:hover { border-color:var(--bord2) }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:.5rem 1rem; border-radius:var(--r2);
  font-size:.82rem; font-weight:600; cursor:pointer; border:none;
  transition:all .18s var(--ease); text-decoration:none; white-space:nowrap;
  font-family:inherit; position:relative; overflow:hidden;
}
.btn:active { transform:scale(.96) }

/* Primary */
.bp {
  background:var(--acc); color:#fff;
  box-shadow:0 2px 12px var(--glow), inset 0 1px 0 rgba(255,255,255,.15);
}
.bp:hover { box-shadow:0 4px 24px var(--glow), 0 0 40px var(--glow2); transform:translateY(-1px) }
.bp:active { transform:translateY(0) scale(.97) }

/* Secondary */
.bs {
  background:var(--glass2); color:var(--txt); border:1px solid var(--bord2);
  backdrop-filter:blur(8px);
}
.bs:hover { background:var(--bg4); border-color:var(--acc); box-shadow:0 0 16px var(--glow2) }

/* Ghost */
.bg { background:transparent; color:var(--txt2) }
.bg:hover { background:var(--glass2); color:var(--txt) }

/* Danger */
.bd { background:var(--rs); color:var(--red); border:1px solid rgba(244,63,94,.15) }
.bd:hover { background:rgba(244,63,94,.18); box-shadow:0 0 12px var(--rg) }

/* Teal */
.bt { background:var(--ts); color:var(--teal); border:1px solid rgba(45,212,191,.15) }
.bt:hover { background:rgba(45,212,191,.18); box-shadow:0 0 12px var(--tg) }

/* Yellow */
.by { background:var(--ys); color:var(--ylw); border:1px solid rgba(251,191,36,.15) }

/* Sizes */
.bsm { padding:.3rem .7rem; font-size:.76rem; border-radius:7px }
.bxs { padding:.22rem .55rem; font-size:.7rem; border-radius:6px }
.bfull { width:100% }

/* ── Inputs ── */
.inp {
  width:100%; padding:.55rem .85rem; background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r2); color:var(--txt); font-size:.84rem; font-family:inherit;
  transition:all .2s var(--ease); outline:none; resize:vertical;
}
.inp::placeholder { color:var(--txt3) }
.inp:focus {
  border-color:var(--acc); box-shadow:0 0 0 3px var(--asoft), 0 0 20px var(--glow2);
  background:var(--bg4);
}
textarea.inp { min-height:76px; line-height:1.6 }
select.inp { cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238890b4' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; padding-right:2rem;
}
input[type=file].inp { padding:.4rem .85rem; cursor:pointer }

/* ── Badges ── */
.b {
  display:inline-flex; align-items:center; padding:.12rem .55rem; border-radius:99px;
  font-size:.65rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.bg2 { background:rgba(255,255,255,.06); color:var(--txt2) }
.bv  { background:var(--asoft); color:var(--acc2) }
.bt2 { background:var(--ts); color:var(--teal) }
.bg3 { background:var(--gs); color:var(--grn) }
.by2 { background:var(--ys); color:var(--ylw) }
.br  { background:var(--rs); color:var(--red) }
.bpk { background:var(--ps); color:var(--pink) }

/* ── Modals ── */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:16px; backdrop-filter:blur(12px);
  animation:modalBgIn .2s var(--ease);
}
.modal.h { display:none }
@keyframes modalBgIn { from { opacity:0 } to { opacity:1 } }

.mbox {
  background:var(--bg2); border:1px solid var(--bord2); border-radius:var(--r);
  padding:28px; width:100%; max-width:460px;
  box-shadow:0 24px 64px rgba(0,0,0,.6), 0 0 80px rgba(139,92,246,.05);
  animation:modalIn .25s var(--bounce);
  max-height:90vh; overflow-y:auto; position:relative;
}
.mbox::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, var(--acc), transparent); opacity:.25;
}
.mw { max-width:640px }
.ml { max-width:840px }
@keyframes modalIn {
  from { opacity:0; transform:scale(.94) translateY(12px) }
  to { opacity:1; transform:scale(1) translateY(0) }
}

/* ── Loading Screen ── */
#ls {
  position:fixed; inset:0; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:9999; transition:opacity .4s var(--ease);
}
#ls.out { opacity:0; pointer-events:none }
.lr {
  width:40px; height:40px; border:2.5px solid var(--border); border-top-color:var(--acc);
  border-radius:50%; animation:spin .6s linear infinite;
  box-shadow:0 0 20px var(--glow);
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ── Toasts ── */
#tc {
  position:fixed; bottom:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:8px;
}
.toast {
  display:flex; align-items:center; gap:10px; padding:.65rem 1rem;
  background:var(--bg3); border:1px solid var(--bord2); border-radius:var(--r2);
  font-size:.82rem; font-weight:500; min-width:230px; max-width:340px;
  animation:toastIn .25s var(--bounce); transition:all .25s var(--ease);
  box-shadow:0 8px 28px rgba(0,0,0,.5), 0 0 1px rgba(255,255,255,.1);
  backdrop-filter:blur(16px);
}
.toast.s { border-color:rgba(34,197,94,.25) } .toast.s svg { color:var(--grn) }
.toast.e { border-color:rgba(244,63,94,.25) } .toast.e svg { color:var(--red) }
.toast.i svg { color:var(--acc) }
@keyframes toastIn {
  from { opacity:0; transform:translateX(60px) scale(.9) }
  to { opacity:1; transform:translateX(0) scale(1) }
}

/* ── Chat / Messages ── */
.msg-wrap { display:flex; flex-direction:column; align-items:flex-start; margin-bottom:10px }
.msg-wrap.me { align-items:flex-end }
.bubble {
  max-width:76%; padding:.6rem 1rem; border-radius:14px;
  font-size:.84rem; line-height:1.65; word-break:break-word; white-space:pre-wrap;
}
.bubble.ai {
  background:var(--bg3); border:1px solid var(--border); border-bottom-left-radius:4px;
}
.bubble.me2 {
  background:linear-gradient(135deg, var(--acc), #16a34a);
  color:#fff; border-bottom-right-radius:4px;
  box-shadow:0 4px 16px var(--glow);
}
.msg-name { font-size:.68rem; color:var(--txt3); margin-bottom:3px; padding:0 4px }

/* ── Program Cards ── */
.prog-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--r);
  padding:18px; margin-bottom:10px; cursor:pointer;
  transition:all .2s var(--ease); position:relative;
}
.prog-card:hover {
  border-color:var(--acc); background:var(--bg4);
  box-shadow:0 4px 20px rgba(0,0,0,.3), 0 0 20px var(--glow2);
  transform:translateY(-1px);
}
.prog-thumb {
  width:46px; height:46px; border-radius:var(--r2);
  background:linear-gradient(135deg, var(--acc), var(--sec));
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0;
  box-shadow:0 4px 12px var(--glow);
}

/* ── Stats ── */
.stat {
  background:var(--bg3); border:1px solid var(--border); border-radius:var(--r);
  padding:18px 22px; transition:all .2s var(--ease); position:relative; overflow:hidden;
}
.stat:hover { border-color:var(--bord2); transform:translateY(-2px) }
.stat::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--acc), var(--sec));
  opacity:.4; transition:opacity .2s;
}
.stat:hover::after { opacity:.8 }
.sv {
  font-size:2rem; font-weight:800; font-family:'JetBrains Mono',monospace;
  background:linear-gradient(135deg, var(--acc), var(--sec));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── Utility ── */
.f { display:flex } .fi { align-items:center } .fb { justify-content:space-between } .fw { flex-wrap:wrap }
.g2 { gap:8px } .g3 { gap:12px } .g4 { gap:16px }
.g2c { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.h { display:none!important }
.empty { text-align:center; padding:48px 20px; color:var(--txt3); font-size:.84rem }
.spin2 {
  width:22px; height:22px; border:2px solid var(--border); border-top-color:var(--acc);
  border-radius:50%; animation:spin .55s linear infinite; margin:0 auto;
}

/* Rank colors */
.rceo { color:var(--pink) }
.radm { color:var(--ylw) }
.rmod { color:var(--grn) }
.rvip { color:var(--teal) }
.rusr { color:var(--txt2) }

/* ── Profile Banner ── */
.prof-bg {
  height:130px; border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(135deg, var(--acc), #0a1a10, var(--sec));
  position:relative; overflow:hidden;
}
.prof-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(7,8,14,.4));
}
.prof-bg img { width:100%; height:100%; object-fit:cover }

/* ── File Row ── */
.frow {
  display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--border); transition:background .15s;
}
.frow:last-child { border-bottom:none }
.frow:hover { background:var(--glass) }
.fic {
  width:34px; height:34px; border-radius:8px; background:var(--bg4);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ── Inbox ── */
.ibx {
  background:var(--bg3); border:1px solid var(--bord2); border-radius:var(--r2);
  padding:14px 16px; margin-bottom:8px; color:var(--txt); transition:all .15s var(--ease);
}
.ibx:hover { background:var(--bg4) }
.ibx.pnd { border-left:3px solid var(--ylw) }
.ibx.apv { border-left:3px solid var(--grn) }
.ibx.rej { border-left:3px solid var(--red) }
.ibx .tt { font-size:.86rem; font-weight:600; margin-bottom:3px; color:var(--txt) }
.ibx .st { font-size:.76rem; color:var(--txt2) }

/* ── Progress ── */
.prg { height:5px; background:var(--border); border-radius:3px; overflow:hidden }
.prf {
  height:100%; background:linear-gradient(90deg, var(--acc), var(--sec));
  border-radius:3px; transition:width .15s var(--ease);
  box-shadow:0 0 10px var(--glow);
}

/* ── Friend Card ── */
.fr-card {
  display:flex; align-items:center; gap:10px; padding:11px 0;
  border-bottom:1px solid var(--border); transition:background .15s;
}
.fr-card:last-child { border-bottom:none }
.fr-card:hover { background:var(--glass) }

/* ── Channel messages ── */
#ch-msgs { flex:1; overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column }
.ch-date-sep {
  text-align:center; font-size:.68rem; color:var(--txt3); margin:10px 0; position:relative;
}
.ch-date-sep::before, .ch-date-sep::after {
  content:''; position:absolute; top:50%; width:40%; height:1px; background:var(--border);
}
.ch-date-sep::before { left:0 } .ch-date-sep::after { right:0 }

/* ── Discord card ── */
.dc-card {
  background:linear-gradient(135deg, #3b4bcf 0%, #5865f2 55%, #7289da 100%);
  border-radius:var(--r); padding:22px; margin-bottom:1.5rem;
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
}
.dc-card::before {
  content:''; position:absolute; top:-50%; right:-20%; width:200px; height:200px;
  background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
}
.dc-card a {
  display:block; text-align:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:white; font-weight:700; padding:.6rem; border-radius:8px;
  text-decoration:none; font-size:.84rem; transition:all .2s var(--ease);
  backdrop-filter:blur(4px);
}
.dc-card a:hover {
  background:rgba(255,255,255,.2);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  transform:translateY(-1px);
}

/* ── Logo text ── */
.logo-text {
  font-size:1.8rem; font-weight:900; letter-spacing:-.04em;
  background:linear-gradient(135deg, var(--acc), var(--sec));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.logo-text-sm {
  font-size:1.5rem; font-weight:900; letter-spacing:-.03em;
  background:linear-gradient(135deg, var(--acc), var(--sec));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── Sign-out button ── */
.signout-area {
  padding:.8rem; border-top:1px solid var(--border);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.2));
}

/* ── Responsive ── */
@media(max-width:768px) {
  .sidebar { width:56px }
  .sb-name, .sb-meta, .nl, .ni span:not(.nb) { display:none }
  .ni { justify-content:center; padding:10px 8px; margin:2px 4px }
  .main { padding:18px 16px }
  .g2c { grid-template-columns:1fr }
  h1 { font-size:1.3rem }
  .mbox { padding:20px }
  .stat { padding:14px }
  .sv { font-size:1.5rem }
}

@media(max-width:480px) {
  .main { padding:14px 12px }
  .mbox { padding:16px; border-radius:var(--r2) }
  .btn { padding:.4rem .7rem; font-size:.78rem }
}

/* ── Theme Customizer ── */
.theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px; margin-bottom: 16px;
}
.theme-swatch {
  height: 48px; border-radius: var(--r2); cursor: pointer;
  border: 2px solid transparent; transition: all .2s var(--ease);
  position: relative; overflow: hidden;
}
.theme-swatch:hover { transform: scale(1.05); border-color: rgba(255,255,255,.2) }
.theme-swatch.active { border-color: var(--acc); box-shadow: 0 0 16px var(--glow) }
.theme-swatch::after {
  content: attr(data-name); position: absolute; bottom: 3px; left: 0; right: 0;
  text-align: center; font-size: 9px; font-weight: 600; color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.color-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.color-row label {
  font-size: .82rem; font-weight: 500; color: var(--txt2); min-width: 100px;
}
.color-row input[type="color"] {
  width: 40px; height: 32px; border: 1px solid var(--bord2);
  border-radius: 6px; cursor: pointer; background: var(--bg3);
  padding: 2px;
}
.color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px }
.color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px }
.color-preview {
  width: 100%; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--acc), var(--sec));
  margin-bottom: 12px; border: 1px solid var(--bord2);
}