/* ================= SKIN: GLASS (glassmorphism) ================= */
[data-skin=glass]{--bg:#E3ECF8;--panel:rgba(255,255,255,.38);--card:rgba(255,255,255,.5);--glass:rgba(255,255,255,.42);--line:rgba(255,255,255,.7);--in:rgba(255,255,255,.62);--out:linear-gradient(135deg,rgba(25,199,155,.86),rgba(14,165,183,.86));--out-text:#fff;--wall:transparent;--hover:rgba(255,255,255,.4);--active:rgba(255,255,255,.55);--shadow:0 20px 56px rgba(40,50,140,.24);--bshadow:0 4px 18px rgba(40,50,140,.12)}
[data-skin=glass][data-theme=dark]{--bg:#070B1A;--panel:rgba(255,255,255,.05);--card:rgba(255,255,255,.07);--glass:rgba(255,255,255,.07);--line:rgba(255,255,255,.14);--in:rgba(255,255,255,.1);--out:linear-gradient(135deg,rgba(46,230,166,.55),rgba(34,211,238,.5));--out-text:#fff;--hover:rgba(255,255,255,.06);--active:rgba(255,255,255,.12);--shadow:0 20px 60px rgba(0,0,0,.6);--bshadow:0 4px 18px rgba(0,0,0,.3)}
[data-skin=glass] body{background:radial-gradient(700px 520px at 8% 8%,#7DD3FC,transparent 62%),radial-gradient(760px 560px at 92% 18%,#C4B5FD,transparent 62%),radial-gradient(800px 600px at 45% 105%,#86EFAC,transparent 62%),#E3ECF8;background-attachment:fixed}
[data-skin=glass][data-theme=dark] body{background:radial-gradient(700px 520px at 8% 8%,rgba(56,189,248,.35),transparent 62%),radial-gradient(760px 560px at 92% 18%,rgba(139,92,246,.4),transparent 62%),radial-gradient(800px 600px at 45% 105%,rgba(16,185,129,.32),transparent 62%),#070B1A;background-attachment:fixed}
[data-skin=glass] .card,[data-skin=glass] .sheet,[data-skin=glass] .msg,[data-skin=glass] .inp,[data-skin=glass] .search input,[data-skin=glass] .chip,[data-skin=glass] .composer .box,[data-skin=glass] .row.on,[data-skin=glass] .skin,[data-skin=glass] .pk,[data-skin=glass] .tabs,[data-skin=glass] .seg,[data-skin=glass] .tobottom,[data-skin=glass] .scard{-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7)}
[data-skin=glass] .card,[data-skin=glass] .sheet,[data-skin=glass] .banner,[data-skin=glass] .dock{border-color:var(--line);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.55)}
[data-skin=glass] .sidebar{background:var(--panel)}
[data-skin=glass] .sheet-wrap{background:rgba(20,30,70,.35)}
[data-skin=glass] .card,[data-skin=glass] .sheet{border-radius:28px}[data-skin=glass] .row{border-radius:22px}
[data-skin=glass] .msg{border:1px solid rgba(255,255,255,.35)}
[data-skin=glass] .inp,[data-skin=glass] .search input{background:var(--card)}
/* ================= SKIN: NEO-BRUTALISM ================= */
[data-skin=neo]{--bw:3px;--bwm:2.5px;--shc:#111;--bg:#FFF4DC;--panel:#FFF4DC;--card:#fff;--text:#111;--muted:#4B4B4B;--line:#111;--accent:#E11D74;--accent2:#111;--grad:#FFD23F;--ring:#FF3D81;--out:#B6F23C;--out-text:#111;--in:#fff;--wall:#FFF4DC;--hover:#FFE7A0;--active:#FFD23F;--glass:#FFF4DC;--danger:#E11D48;--blue:#1D4ED8;--shadow:5px 5px 0 var(--shc);--bshadow:3px 3px 0 var(--shc);--glow:3px 3px 0 var(--shc);--dot:.2}
[data-skin=neo][data-theme=dark]{--shc:#FFD23F;--bg:#121212;--panel:#121212;--card:#1E1E1E;--text:#F7F2E7;--muted:#BDB7A8;--line:#F7F2E7;--accent:#FF6FA5;--grad:#FFD23F;--ring:#FF6FA5;--out:#2F7D32;--out-text:#fff;--in:#262626;--wall:#121212;--hover:#2A2A2A;--active:#3A3320;--glass:#121212;--blue:#7DB5FF}
[data-skin=neo] body{font-family:"Space Grotesk",Inter,system-ui,sans-serif;background:var(--bg);background-image:radial-gradient(rgba(128,128,128,.4) 1.3px,transparent 1.6px);background-size:22px 22px;background-attachment:fixed}
[data-skin=neo] *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
[data-skin=neo] .btn,[data-skin=neo] .chip.on,[data-skin=neo] .send,[data-skin=neo] .nudge button,[data-skin=neo] .dock a.active,[data-skin=neo] .tab.active,[data-skin=neo] .icon-btn.fill,[data-skin=neo] .vn-play,[data-skin=neo] .me-hero .ph>button,[data-skin=neo] .pane-empty .logo,[data-skin=neo] .auth-brand .logo{color:#111;border:var(--bw) solid #111;background:var(--grad)}
[data-skin=neo] .ub,[data-skin=neo] .tobottom b{color:#111;background:#FF3D81;border:2.5px solid #111;box-shadow:none}
[data-skin=neo] .badge{background:#FF3D81;color:#111;border:2.5px solid #111;box-shadow:none}
[data-skin=neo] .btn:hover{filter:none;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shc)}[data-skin=neo] .btn:active,[data-skin=neo] .send:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--shc)}
[data-skin=neo] .btn.ghost{background:var(--card);color:var(--text)}[data-skin=neo] .btn.red{background:#FF4D4D;color:#111}
[data-skin=neo] .card,[data-skin=neo] .sheet,[data-skin=neo] .banner,[data-skin=neo] .dock,[data-skin=neo] .scard,[data-skin=neo] .pk,[data-skin=neo] .skin{border:var(--bw) solid var(--line);box-shadow:var(--shadow);border-radius:14px}
[data-skin=neo] .dock{border-radius:20px;background:#fff}[data-skin=neo][data-theme=dark] .dock{background:#1E1E1E}
[data-skin=neo] .sheet{border-radius:18px 18px 0 0}[data-skin=neo] .sheet:before{background:var(--line)}
@media(min-width:700px){[data-skin=neo] .sheet{border-radius:18px}}
[data-skin=neo] .sidebar{background:var(--panel);border-right:var(--bw) solid var(--line)}
[data-skin=neo] .conv-head,[data-skin=neo] .composer,[data-skin=neo] .replybar,[data-skin=neo] .emoji,[data-skin=neo] .csearch,[data-skin=neo] .recbar,[data-skin=neo] .topbar{background:var(--glass);border-bottom:var(--bw) solid var(--line)}
[data-skin=neo] .composer{border-top:var(--bw) solid var(--line);border-bottom:0}
[data-skin=neo] .composer .box,[data-skin=neo] .inp,[data-skin=neo] .search input{border:var(--bw) solid var(--line);border-radius:12px;background:var(--card);box-shadow:3px 3px 0 var(--shc)}
[data-skin=neo] .inp:focus,[data-skin=neo] .search input:focus{box-shadow:0 0 0 var(--shc);transform:translate(2px,2px);background:#FFFBEA;color:#111}
[data-skin=neo] .row{border:var(--bw) solid transparent;border-radius:14px}[data-skin=neo] .row:hover{background:var(--hover)}[data-skin=neo] .row.on{background:var(--active);border-color:var(--line);box-shadow:var(--bshadow)}
[data-skin=neo] .row .nm,[data-skin=neo] .hello h1,[data-skin=neo] .page h1,[data-skin=neo] .sheet h3{font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
[data-skin=neo] .hello h1,[data-skin=neo] .page h1{-webkit-text-fill-color:initial;color:var(--text)}
[data-skin=neo] .grad-text{background:none;color:var(--text)}
[data-skin=neo] .msg{border-radius:12px;box-shadow:3px 3px 0 var(--shc)}[data-skin=neo] .msg.mine.first{border-top-right-radius:0}[data-skin=neo] .msg.theirs.first{border-top-left-radius:0}
[data-skin=neo] .day{background:#FFD23F;color:#111;border:2.5px solid #111;border-radius:8px;box-shadow:2px 2px 0 var(--shc)}[data-skin=neo] .day.unread{background:#FF3D81}
[data-skin=neo] .chip{background:var(--card);color:var(--text);border:var(--bw) solid var(--line);border-radius:10px;font-weight:700}[data-skin=neo] .chip.on{border-radius:10px;box-shadow:var(--bshadow)}
[data-skin=neo] .dock a{border:var(--bw) solid transparent;border-radius:14px;color:var(--text)}[data-skin=neo] .dock a.active{box-shadow:var(--bshadow)}
[data-skin=neo] .av{border:var(--bw) solid var(--line);box-shadow:2px 2px 0 var(--shc)}[data-skin=neo] .ring .av{box-shadow:none}[data-skin=neo] .ring{background:#FF3D81}[data-skin=neo] .ring.seen{background:#9C9C9C}
[data-skin=neo] .tabs,[data-skin=neo] .seg{border:var(--bw) solid var(--line);border-radius:12px;background:var(--card)}[data-skin=neo] .seg button,[data-skin=neo] .tab{border-radius:8px;color:var(--text);font-weight:700}[data-skin=neo] .seg button.on{background:#FFD23F;color:#111;box-shadow:none}
[data-skin=neo] .sw{border:var(--bw) solid var(--line);background:var(--card)}[data-skin=neo] .sw:after{background:#111;box-shadow:none}[data-skin=neo][data-theme=dark] .sw:after{background:#F7F2E7}[data-skin=neo] .sw:checked{background:#B6F23C}
[data-skin=neo] .auth-brand{background:#FFD23F;color:#111;border-right:var(--bw) solid #111}[data-skin=neo] .auth-brand:before,[data-skin=neo] .auth-brand:after{display:none}[data-skin=neo] .auth-brand li{background:#fff;border:var(--bw) solid #111;box-shadow:3px 3px 0 #111;-webkit-backdrop-filter:none}
[data-skin=neo] .auth-brand .logo{background:#FF3D81}
[data-skin=neo] .empty .ico,[data-skin=neo] .empty{border-color:var(--line)}[data-skin=neo] .empty .ico{background:#B6F23C;border:var(--bw) solid #111;box-shadow:3px 3px 0 #111;color:#111}
[data-skin=neo] .toast{background:#111;border:var(--bw) solid #FFD23F;border-radius:10px}[data-skin=neo] .lightbox img{border:var(--bw) solid #fff}
[data-skin=neo] .reacts{border:2px solid var(--line);box-shadow:none}
[data-skin=neo] .quote{border-left-width:6px;background:rgba(0,0,0,.06)}
[data-skin=neo] .nudge{background:#B6F23C;color:#111;border:var(--bw) solid #111;border-radius:12px;box-shadow:3px 3px 0 #111}
[data-skin=neo] .scard:after{background:linear-gradient(rgba(0,0,0,.3),transparent 40%,transparent 55%,rgba(0,0,0,.75))}
/* ================= SKIN: NEON (cyber, selalu gelap) ================= */
[data-skin=neon]{--bg:#05060F;--panel:rgba(10,13,32,.86);--card:#0C0F24;--text:#EAF6FF;--muted:#7C8DB5;--line:rgba(0,240,255,.22);--accent:#00F0FF;--grad:linear-gradient(135deg,#00F0FF,#B026FF);--ring:conic-gradient(#00F0FF,#B026FF,#FF2E93,#00F0FF);--out:linear-gradient(135deg,#5B21B6,#0E7490);--out-text:#fff;--in:#10142E;--wall:#05060F;--hover:rgba(0,240,255,.07);--active:rgba(0,240,255,.14);--glass:rgba(8,11,28,.88);--shadow:0 0 28px rgba(0,240,255,.2);--bshadow:0 0 0 1px rgba(0,240,255,.14);--glow:0 0 18px rgba(0,240,255,.5);--blue:#38BDF8;--dot:.06}
[data-skin=neon] body{background:radial-gradient(800px 500px at 0% 0%,rgba(176,38,255,.22),transparent 60%),radial-gradient(800px 500px at 100% 100%,rgba(0,240,255,.16),transparent 60%),#05060F;background-attachment:fixed}
[data-skin=neon] .hello h1,[data-skin=neon] .page h1{font-family:Orbitron,Inter,sans-serif;letter-spacing:.06em;text-shadow:0 0 14px rgba(0,240,255,.55)}
[data-skin=neon] .btn,[data-skin=neon] .send,[data-skin=neon] .chip.on,[data-skin=neon] .dock a.active,[data-skin=neon] .tab.active,[data-skin=neon] .icon-btn.fill{color:#05060F;font-weight:800}
[data-skin=neon] .card,[data-skin=neon] .sheet,[data-skin=neon] .dock,[data-skin=neon] .banner,[data-skin=neon] .inp,[data-skin=neon] .search input,[data-skin=neon] .composer .box{border:1px solid var(--line);box-shadow:var(--shadow)}
[data-skin=neon] .inp:focus,[data-skin=neon] .search input:focus{border-color:#00F0FF;box-shadow:0 0 0 3px rgba(0,240,255,.2),0 0 16px rgba(0,240,255,.35)}
[data-skin=neon] .msg{border:1px solid rgba(0,240,255,.18)}[data-skin=neon] .msg.mine{border-color:rgba(176,38,255,.5);box-shadow:0 0 14px rgba(176,38,255,.3)}
[data-skin=neon] .ub{color:#05060F}[data-skin=neon] .badge{background:#FF2E93;box-shadow:0 0 10px #FF2E93}
[data-skin=neon] .day{border:1px solid var(--line)}[data-skin=neon] .lockscr{background-color:#05060F}
/* ================= SKIN: PASTEL (lembut) ================= */
[data-skin=pastel]{--bg:#FFF5FA;--panel:rgba(255,255,255,.82);--card:#FFFFFF;--text:#3B2F4A;--muted:#8E7FA3;--line:rgba(139,92,246,.14);--accent:#C026D3;--grad:linear-gradient(135deg,#F9A8D4,#A5B4FC);--glow:0 8px 22px rgba(165,180,252,.55);--ring:conic-gradient(#F9A8D4,#A5B4FC,#99F6E4,#FDE68A,#F9A8D4);--out:linear-gradient(135deg,#FBCFE8,#C7D2FE);--out-text:#3B2F4A;--in:#FFFFFF;--wall:#FDF2F8;--hover:rgba(192,38,211,.06);--active:rgba(192,38,211,.1);--glass:rgba(255,255,255,.8);--shadow:0 12px 34px rgba(165,180,252,.35);--bshadow:0 2px 8px rgba(192,38,211,.08);--dot:.05}
[data-skin=pastel][data-theme=dark]{--bg:#1B1626;--panel:rgba(36,28,52,.86);--card:#261E36;--text:#F5E9FF;--muted:#A99BC0;--line:rgba(249,168,212,.16);--accent:#F9A8D4;--out:linear-gradient(135deg,#7E3A8E,#4F5BB5);--out-text:#fff;--in:#2D2440;--wall:#17121F;--glass:rgba(32,25,46,.86);--shadow:0 12px 34px rgba(0,0,0,.5)}
[data-skin=pastel] body{background:radial-gradient(800px 500px at 0% 0%,rgba(249,168,212,.4),transparent 60%),radial-gradient(800px 500px at 100% 100%,rgba(165,180,252,.4),transparent 60%),var(--bg);background-attachment:fixed}
[data-skin=pastel] .btn,[data-skin=pastel] .send,[data-skin=pastel] .chip.on,[data-skin=pastel] .dock a.active,[data-skin=pastel] .tab.active,[data-skin=pastel] .icon-btn.fill{color:#4A2F63}
[data-skin=pastel] .card,[data-skin=pastel] .sheet,[data-skin=pastel] .row,[data-skin=pastel] .msg{border-radius:24px}[data-skin=pastel] .dock{border-radius:34px}[data-skin=pastel] .msg{border-radius:20px}
[data-skin=pastel] .hello h1,[data-skin=pastel] .page h1{background:linear-gradient(135deg,#EC4899,#6366F1);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ================= SKIN: MONO (minimalis hitam-putih) ================= */
[data-skin=mono]{--bg:#FAFAFA;--panel:#FFFFFF;--card:#FFFFFF;--text:#111111;--muted:#6B6B6B;--line:#E4E4E4;--accent:#111111;--grad:#111111;--ring:#111111;--out:#111111;--out-text:#FFFFFF;--in:#F1F1F1;--wall:#FAFAFA;--hover:#F3F3F3;--active:#EAEAEA;--glass:rgba(255,255,255,.92);--shadow:0 6px 24px rgba(0,0,0,.1);--bshadow:none;--glow:none;--blue:#0A84FF;--dot:.04}
[data-skin=mono][data-theme=dark]{--bg:#0B0B0B;--panel:#111111;--card:#161616;--text:#F5F5F5;--muted:#9A9A9A;--line:#2A2A2A;--accent:#FFFFFF;--grad:#F5F5F5;--ring:#F5F5F5;--out:#F5F5F5;--out-text:#111111;--in:#1E1E1E;--wall:#0B0B0B;--hover:#1A1A1A;--active:#262626;--glass:rgba(17,17,17,.92)}
[data-skin=mono] body{background:var(--bg)}
[data-skin=mono] .btn,[data-skin=mono] .send,[data-skin=mono] .chip.on,[data-skin=mono] .dock a.active,[data-skin=mono] .tab.active,[data-skin=mono] .icon-btn.fill,[data-skin=mono] .ub,[data-skin=mono] .vn-play,[data-skin=mono] .lk-logo,[data-skin=mono] .pane-empty .logo{color:var(--bg);background:var(--grad)}
[data-skin=mono][data-theme=dark] .btn,[data-skin=mono][data-theme=dark] .send,[data-skin=mono][data-theme=dark] .chip.on,[data-skin=mono][data-theme=dark] .dock a.active,[data-skin=mono][data-theme=dark] .ub{color:#111}
[data-skin=mono] .card,[data-skin=mono] .sheet{border-radius:14px}[data-skin=mono] .msg{border-radius:12px;box-shadow:none}
[data-skin=mono] .hello h1,[data-skin=mono] .page h1{color:var(--text);background:none;-webkit-text-fill-color:initial;letter-spacing:-.04em}
[data-skin=mono] .grad-text{background:none;color:var(--text)}
[data-skin=mono] .badge{background:#111;color:#fff}[data-skin=mono][data-theme=dark] .badge{background:#fff;color:#111}