:root{--bg:#05070B;--bg2:#090D14;--s1:#10151F;--s2:#151C29;--s3:#1B2433;--bd:#283548;--bda:#3D75FF;--tx:#F4F7FC;--tx2:#9AA8BC;--tx3:#68778D;--blue:#1769FF;--neon:#00A8FF;--cyan:#32D9FF;--silver:#D7E0ED;--white:#F8FAFF;--danger:#FF4D64;--ok:#35D49A;--grad:linear-gradient(115deg,#1769FF 0%,#00A8FF 55%,#32D9FF 100%);--r:14px;--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px);color-scheme:dark}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--tx);font:.9375rem/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
body.noscroll{overflow:hidden}
a{color:var(--neon);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:8px}
h1,h2,h3{font-weight:650;letter-spacing:-.01em;line-height:1.25}
.muted{color:var(--tx2)}.dim{color:var(--tx3);font-size:0.8125rem}.sm{font-size:0.8125rem}
.ic{flex:none;display:block}
.row{display:flex;align-items:center}.row.end{justify-content:flex-end}.gap{gap:10px}.between{justify-content:space-between}.grow{flex:1;min-width:0}
.col{display:flex;flex-direction:column;gap:12px}
.hide{display:none!important}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm{display:inline-flex;align-items:center;gap:5px;max-width:100%;vertical-align:middle}
.vbadge{flex:none;filter:drop-shadow(0 0 4px rgba(0,168,255,.45))}
.av{position:relative;flex:none;display:inline-grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--s3),var(--s1));border:1px solid var(--bd);color:var(--silver);font-weight:600;overflow:hidden}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* tombol & form */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:12px;font-weight:600;border:1px solid var(--bd);background:var(--s2);transition:border-color .15s,transform .1s,box-shadow .15s}
.btn:hover{border-color:var(--bda)}.btn:active{transform:scale(.98)}
.btn.primary{background:var(--grad);border:0;color:#fff;box-shadow:0 6px 24px -6px rgba(0,168,255,.55);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.btn.ghost{background:transparent}.btn.danger{background:rgba(255,77,100,.12);border-color:rgba(255,77,100,.5);color:var(--danger)}
.btn.sm{min-height:34px;padding:0 12px;font-size:0.8125rem;border-radius:10px}.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.ibtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--silver);position:relative}
.ibtn:hover{background:var(--s2)}
.badge-n{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--grad);color:#fff;font-size:max(0.6875rem,11px);font-weight:700;display:grid;place-items:center}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:0.8125rem;color:var(--tx2);font-weight:500}
.inp{width:100%;min-height:46px;padding:10px 14px;background:var(--s1);border:1px solid var(--bd);border-radius:12px;outline:none;transition:border-color .15s}
.inp:focus{border-color:var(--bda);box-shadow:0 0 0 3px rgba(61,117,255,.2)}
textarea.inp{resize:vertical;min-height:80px}
.pw{position:relative}.pw .inp{padding-right:48px}.pw button{position:absolute;right:4px;top:3px;color:var(--tx2)}
.hint{font-size:0.75rem;color:var(--tx3)}.err{color:var(--danger);font-size:0.8125rem;min-height:18px}.ok{color:var(--ok)}
.alert{padding:12px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--s1);font-size:0.875rem;color:var(--tx2)}
.alert.warn{border-color:rgba(255,77,100,.4);background:rgba(255,77,100,.08);color:#ffb3be}
.alert.info{border-color:rgba(0,168,255,.4);background:rgba(0,168,255,.08);color:var(--silver)}
.card{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);padding:16px}
.switch{position:relative;width:46px;height:26px;border-radius:13px;background:var(--s3);border:1px solid var(--bd);flex:none;transition:.2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--silver);transition:.2s}
.switch[aria-checked=true]{background:var(--blue);border-color:var(--neon)}.switch[aria-checked=true]::after{left:23px;background:#fff}
/* toast & modal */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--sb));z-index:200;display:flex;flex-direction:column;gap:8px;width:min(92vw,420px);pointer-events:none}
.toast{padding:12px 16px;border-radius:12px;background:var(--s3);border:1px solid var(--bd);box-shadow:0 10px 30px rgba(0,0,0,.5);animation:up .25s;font-size:0.875rem}
.toast.success{border-color:var(--ok)}.toast.error{border-color:var(--danger)}.toast.out{opacity:0;transition:.25s}
@keyframes up{from{transform:translateY(10px);opacity:0}}
.modal-back{position:fixed;inset:0;z-index:100;background:rgba(2,4,8,.72);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.modal-back.sheet{align-items:end}
.modal{width:min(100%,440px);max-height:88dvh;display:flex;flex-direction:column;background:var(--s3);border:1px solid var(--bd);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:up .2s}
.modal.wide{width:min(100%,640px)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 6px 20px}.modal-h h2{font-size:1.125rem}
.modal-b{padding:10px 20px 20px;overflow:auto}
/* layout aplikasi */
.app{display:flex;min-height:100dvh}
.side{display:none}
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:rgba(9,13,20,.94);backdrop-filter:blur(14px);border-top:1px solid var(--bd);padding-bottom:var(--sb)}
.bottom a,.side a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;color:var(--tx3);font-size:max(0.6875rem,11px);font-weight:500;position:relative}
.bottom a.on,.side a.on{color:var(--neon)}
.bottom a.on::before{content:"";position:absolute;top:-1px;left:25%;right:25%;height:2px;background:var(--grad);box-shadow:0 0 10px var(--neon)}
.main{flex:1;min-width:0;height:100dvh;overflow-y:auto;padding-bottom:calc(66px + var(--sb))}
.page{max-width:720px;margin:0 auto;padding:calc(18px + var(--st)) 16px 28px}
.page>h1{font-size:1.5rem;margin-bottom:16px}
@media(min-width:900px){
 .side{display:flex;flex-direction:column;align-items:center;gap:22px;width:88px;padding:18px 0;background:var(--bg2);border-right:1px solid var(--bd);position:sticky;top:0;height:100dvh}
 .side nav{display:flex;flex-direction:column;gap:6px;width:100%}
 .side a{flex:none;padding:10px 0;margin:0 8px;border-radius:12px}.side a:hover{background:var(--s2)}
 .side a.on{background:var(--s2);box-shadow:inset 3px 0 0 var(--neon)}
 .side a.adm{margin-top:12px;color:var(--cyan)}
 .bottom{display:none}.main{padding-bottom:0}#toasts{bottom:24px}
}
/* chat */
.chat-layout{display:grid;grid-template-columns:1fr;height:100%}
.conv-pane{display:flex;flex-direction:column;min-height:0;height:100%;border-right:1px solid var(--bd);background:var(--bg)}
.thread-pane{display:none;flex-direction:column;min-height:0;height:100%;background:var(--bg2)}
.chat-layout.open .conv-pane{display:none}.chat-layout.open .thread-pane{display:flex}
body.in-conv .bottom{display:none}body.in-conv .main{padding-bottom:0}
@media(min-width:900px){.chat-layout{grid-template-columns:370px 1fr}.chat-layout.open .conv-pane,.thread-pane{display:flex}.thread-pane .back{display:none}}
.pane-head{display:flex;align-items:center;gap:8px;padding:calc(12px + var(--st)) 12px 8px 16px}.pane-head h1{font-size:1.375rem;flex:1}
.pane-head img{width:30px;height:30px}
.searchbar{position:relative;margin:4px 14px 10px}.searchbar .ic{position:absolute;left:13px;top:13px;color:var(--tx3)}.searchbar .inp{padding-left:42px;border-radius:24px}
.tabs{display:flex;gap:8px;padding:0 14px 10px;overflow-x:auto}
.tab{padding:7px 16px;border-radius:20px;border:1px solid var(--bd);color:var(--tx2);font-size:0.875rem;white-space:nowrap}
.tab[aria-selected=true]{background:var(--s3);border-color:var(--bda);color:var(--white)}
.list{flex:1;overflow-y:auto;padding:0 8px 90px}
.item{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border-radius:14px;text-align:left}
.item:hover,.item.on{background:var(--s2)}
.item .t{display:flex;justify-content:space-between;gap:8px;font-weight:600}.item .p{color:var(--tx2);font-size:0.875rem}
.item .when{font-size:0.75rem;color:var(--tx3);font-weight:400;flex:none}
.unread{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--grad);font-size:0.75rem;font-weight:700;display:grid;place-items:center;color:#fff}
.empty{text-align:center;padding:48px 24px;color:var(--tx2)}.empty .ic{margin:0 auto 12px;color:var(--tx3)}.empty h3{color:var(--tx);margin-bottom:6px}
.fab{position:absolute;right:18px;bottom:18px;width:54px;height:54px;border-radius:18px;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 8px 28px -4px rgba(0,168,255,.6)}
.conv-pane{position:relative}
body:not(.in-conv) .fab{bottom:calc(82px + var(--sb))}
@media(min-width:900px){.fab{bottom:20px!important}}
.thead{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--st)) 10px 10px 6px;border-bottom:1px solid var(--bd);background:var(--s1)}
.thead .sub{font-size:0.75rem;color:var(--tx3)}
.msgs{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:4px}
.day{align-self:center;margin:10px 0 6px;padding:3px 12px;border-radius:12px;background:var(--s2);color:var(--tx3);font-size:0.75rem}
.msg{max-width:min(78%,520px);padding:8px 12px 6px;border-radius:16px;background:var(--s3);border:1px solid var(--bd);word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap;text-align:left}
.msg.in{align-self:flex-start;border-bottom-left-radius:5px}
.msg.out{align-self:flex-end;border-bottom-right-radius:5px;background:linear-gradient(135deg,#123a8f,#0b5d9e);border-color:#1f5fc9}
.msg .who{font-size:0.75rem;font-weight:600;color:var(--cyan);margin-bottom:2px}
.msg .meta{display:block;text-align:right;font-size:max(0.6875rem,11px);color:rgba(244,247,252,.55);margin-top:2px;white-space:normal}
.msg.gone{font-style:italic;color:var(--tx3);background:transparent}
.msg.failed{border-color:var(--danger)}.msg.sending{opacity:.65}
.composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(10px + var(--sb));border-top:1px solid var(--bd);background:var(--s1)}
.composer textarea{flex:1;max-height:140px;min-height:44px;resize:none;border-radius:22px;padding:10px 16px}
.send{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;flex:none}
.send:disabled{opacity:.4}
.older{align-self:center;margin-bottom:6px}
/* profil */
/* (cover/banner: lihat bagian "Banner profil" di akhir berkas) */
.pcard{border:1px solid var(--bd);border-radius:var(--r);background:var(--s1);text-align:center;padding-bottom:18px;margin-bottom:22px}
.pid{font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--silver);display:inline-flex;gap:8px;align-items:center}
.sec{font-size:0.75rem;font-weight:600;color:var(--tx3);letter-spacing:.06em;text-transform:uppercase;margin:22px 4px 8px}
.setrow{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1px solid var(--bd);border-radius:var(--r);background:var(--s1);margin-bottom:8px;text-align:left}
.setrow:hover{border-color:var(--bda)}.setrow .ic:first-child{color:var(--neon)}.setrow.danger{border-color:rgba(255,77,100,.4);background:rgba(255,77,100,.06)}.setrow.danger .ic:first-child{color:var(--danger)}
.setrow b{display:block;font-weight:600}.setrow small{color:var(--tx2);font-size:0.8125rem}
/* story */
.stories{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px}
.sbtn{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;flex:none;font-size:0.75rem;color:var(--tx2)}
.ring{padding:3px;border-radius:50%;background:var(--grad)}.ring.seen{background:var(--bd)}.ring.none{background:transparent;border:1px dashed var(--bd)}
.ring .av{border:2px solid var(--bg)}
.viewer{position:fixed;inset:0;z-index:150;background:#000;display:flex;flex-direction:column;align-items:center}
.viewer .stage{flex:1;width:min(100%,480px);position:relative;display:grid;place-items:center;text-align:center;padding:60px 28px;font-size:1.5rem;font-weight:600;line-height:1.35;overflow:hidden}
.viewer .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.viewer .cap{position:relative;text-shadow:0 2px 12px #000;white-space:pre-wrap;overflow-wrap:anywhere}
.bars{position:absolute;top:calc(10px + var(--st));left:12px;right:12px;display:flex;gap:4px;z-index:2}
.bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}.bars i b{display:block;height:100%;width:0;background:#fff}
.vtop{position:absolute;top:calc(24px + var(--st));left:12px;right:12px;z-index:3;display:flex;align-items:center;gap:10px;text-shadow:0 1px 6px #000}
.vtap{position:absolute;top:70px;bottom:70px;width:35%;z-index:2}.vtap.l{left:0}.vtap.r{right:0}
.vfoot{position:absolute;bottom:calc(14px + var(--sb));left:0;right:0;z-index:3;display:flex;justify-content:center;gap:10px}
.sbg0{background:linear-gradient(135deg,#0a2a6b,#1769FF)}.sbg1{background:linear-gradient(135deg,#05070B,#1B2433)}.sbg2{background:linear-gradient(135deg,#006b9e,#32D9FF)}.sbg3{background:linear-gradient(135deg,#1B2433,#3D75FF)}.sbg4{background:linear-gradient(135deg,#0b3d3a,#35D49A)}.sbg5{background:linear-gradient(135deg,#4a1220,#FF4D64)}
.swatches{display:flex;gap:8px;margin-bottom:14px}.swatches button{width:34px;height:34px;border-radius:50%;border:2px solid transparent}.swatches button[aria-pressed=true]{border-color:#fff}
/* landing */
.land{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:calc(32px + var(--st)) 20px 24px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 18%,rgba(23,105,255,.22),transparent 55%),var(--bg)}
.land::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(61,117,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(61,117,255,.09) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%)}
.land>*{position:relative;max-width:560px;width:100%}
.hero-logo{width:min(64vw,260px);margin:0 auto;display:block;filter:drop-shadow(0 0 36px rgba(0,168,255,.45));animation:fl 6s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-6px)}}
.tag{text-align:center;font-size:0.75rem;letter-spacing:.28em;color:var(--cyan);font-weight:600;margin-top:4px}
.land h1{text-align:center;font-size:clamp(26px,6vw,34px);margin:10px 0 10px}
.land .lead{text-align:center;color:var(--tx2);margin-bottom:24px}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0}
.feat{display:flex;gap:10px;align-items:center;padding:14px;border:1px solid var(--bd);border-radius:var(--r);background:rgba(16,21,31,.8);font-size:0.875rem}.feat .ic{color:var(--neon)}
.foot{margin-top:auto;padding-top:20px;text-align:center;font-size:0.8125rem;color:var(--tx3)}.foot a{color:var(--tx2);text-decoration:underline}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* admin */
.adm-wrap{display:flex;min-height:100dvh;flex-direction:column}
.adm-side{background:var(--bg2);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:6px;overflow-x:auto;padding:calc(8px + var(--st)) 10px 8px}
.adm-side .brand{display:flex;align-items:center;gap:8px;font-weight:700;margin-right:8px;flex:none}.adm-side .brand img{width:30px}
.adm-side button,.adm-side a.back{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;color:var(--tx2);white-space:nowrap;font-weight:500}
.adm-side button[aria-current=true]{background:var(--s3);color:var(--white);box-shadow:inset 0 -2px 0 var(--neon)}
.adm-main{flex:1;padding:18px 16px 40px;max-width:1100px;width:100%;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat{padding:16px;border:1px solid var(--bd);border-radius:var(--r);background:var(--s1)}.stat b{display:block;font-size:1.75rem;font-variant-numeric:tabular-nums}.stat span{color:var(--tx2);font-size:0.8125rem}
.tbl{display:flex;flex-direction:column;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.tr{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--bd);background:var(--s1);flex-wrap:wrap}.tr:last-child{border:0}
.pill{display:inline-block;padding:2px 10px;border-radius:10px;font-size:0.75rem;border:1px solid var(--bd);color:var(--tx2)}.pill.bad{color:var(--danger);border-color:rgba(255,77,100,.5)}.pill.good{color:var(--ok);border-color:rgba(53,212,154,.5)}
@media(min-width:900px){.adm-wrap{flex-direction:row}.adm-side{flex-direction:column;align-items:stretch;width:230px;border-bottom:0;border-right:1px solid var(--bd);padding:20px 12px;position:sticky;top:0;height:100dvh;overflow:visible}.adm-side .brand{margin-bottom:14px}}
.legal{max-width:720px;margin:0 auto;padding:calc(28px + var(--st)) 20px 60px}.legal h2{margin:26px 0 8px;font-size:1.125rem}.legal p,.legal li{color:var(--tx2);margin-bottom:8px}.legal ul{padding-left:20px}

/* ===== v2: tampilan modern, transisi halaman, skeleton ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .14s ease both}::view-transition-new(root){animation:vt-in .22s ease both}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
.bottom{view-transition-name:bnav;background:rgba(9,13,20,.82);backdrop-filter:blur(18px) saturate(1.4)}.side{view-transition-name:snav}
.bottom a.on .ic,.side a.on .ic{filter:drop-shadow(0 0 6px rgba(0,168,255,.7))}
.skel-list{display:grid;gap:12px}.skel-list i{height:76px;border-radius:16px;background:linear-gradient(100deg,var(--s1) 30%,var(--s2) 50%,var(--s1) 70%) 0 0/200% 100%;animation:shim 1.2s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.modal-back.sheet{padding:0}.modal-back.sheet .modal{width:min(100%,520px);border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:var(--sb);animation:sheet .26s cubic-bezier(.2,.9,.3,1)}
@keyframes sheet{from{transform:translateY(40px);opacity:0}}
.viewer~.modal-back{z-index:200}
/* pembaruan */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}.shead h2{font-size:1.25rem}
.live{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:20px;background:var(--s1);border:1px solid var(--bd);font-size:0.75rem;font-weight:600;color:var(--tx3)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--tx3)}
.live.on{color:var(--ok);border-color:rgba(53,212,154,.35);background:rgba(53,212,154,.08)}.live.on i{background:var(--ok);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(53,212,154,.6)}70%,100%{box-shadow:0 0 0 7px rgba(53,212,154,0)}}
.srail{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x proximity;scrollbar-width:none}.srail::-webkit-scrollbar{display:none}
.scard{position:relative;flex:none;width:118px;height:190px;border-radius:20px;overflow:hidden;scroll-snap-align:start;background-color:var(--s2);border:1px solid var(--bd);text-align:left;color:#fff;isolation:isolate;transition:transform .18s,box-shadow .18s,border-color .18s,opacity .18s}
.scard:hover{transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(0,168,255,.55);border-color:var(--bda)}.scard:active{transform:scale(.97)}
.scard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.scard .sk{position:absolute;inset:0;z-index:-2;background:linear-gradient(100deg,var(--s2) 30%,var(--s3) 50%,var(--s2) 70%) 0 0/200% 100%;animation:shim 1.2s linear infinite}
.sc-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 38%,rgba(0,0,0,.72))}
.sc-txt{position:absolute;inset:50px 12px 56px;display:grid;place-items:center;text-align:center;font-weight:650;font-size:0.875rem;line-height:1.3;overflow:hidden;z-index:-1;text-shadow:0 2px 8px rgba(0,0,0,.4);overflow-wrap:anywhere}
.sc-av{position:absolute;top:10px;left:10px}.sc-av.ring{padding:2px}
.sc-n{position:absolute;top:12px;right:10px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);font-size:0.75rem;font-weight:700;display:grid;place-items:center}
.sc-plus{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--grad);border:2px solid rgba(0,0,0,.35)}
.sc-meta{position:absolute;left:10px;right:44px;bottom:10px;display:flex;flex-direction:column}.sc-meta b{font-size:0.8125rem}.sc-meta small{font-size:max(0.6875rem,11px);opacity:.8}
.scard.seen{opacity:.8}.scard.seen:hover{opacity:1}
.scard.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border-style:dashed;background:radial-gradient(circle at 50% 30%,rgba(23,105,255,.3),transparent 70%),var(--s1);color:var(--tx)}
.add-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--grad);box-shadow:0 8px 24px -6px rgba(0,168,255,.7)}
.scard.add b{font-size:0.8125rem}.scard.add small{color:var(--tx2);font-size:max(0.6875rem,11px)}
.sempty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:30px 20px;margin-top:4px;border-radius:20px;border:1px solid var(--bd);background:radial-gradient(ellipse at 50% 0,rgba(23,105,255,.16),transparent 70%),var(--s1);color:var(--tx2)}
.sempty .ic{color:var(--neon)}.sempty h3{color:var(--tx)}
.ssec{font-size:1rem;margin:26px 2px 10px}.soon{display:flex;gap:14px;align-items:flex-start;border-radius:18px}.soon .ic{color:var(--neon);margin-top:2px}
.sfab{position:fixed;right:18px;bottom:calc(84px + var(--sb));width:56px;height:56px;border-radius:18px;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px -8px rgba(0,168,255,.7);z-index:40;transition:transform .15s}
.sfab:active{transform:scale(.92)}body.noscroll .sfab{display:none}@media(min-width:900px){.sfab{bottom:24px;right:28px}}
/* penampil story */
.viewer{animation:vin .2s ease}@keyframes vin{from{opacity:0;transform:scale(.97)}}
.viewer .stage{touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .2s,opacity .2s}
@media(min-width:600px){.viewer .stage{flex:none;height:min(calc(100dvh - 32px),860px);margin:auto;border-radius:22px}}
.vblur{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(36px) brightness(.55);z-index:0}
.viewer .stage img{z-index:1}.vshade{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 22%,transparent 70%,rgba(0,0,0,.55))}
.stage[class*=sbg]::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.2),transparent 45%)}
.viewer .cap{z-index:2}.viewer .cap.on-img{position:absolute;left:16px;right:16px;bottom:calc(84px + var(--sb));font-size:1.062rem;font-weight:500;text-align:left;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);padding:10px 14px;border-radius:14px}
.bars{z-index:3}.bars i b.run{animation:fill 5s linear forwards}.bars i b.full{width:100%}.viewer.paused .bars b.run{animation-play-state:paused}
@keyframes fill{to{width:100%}}.vtop,.vfoot{z-index:4}.vtap{z-index:3}
.btn.glass{background:rgba(0,0,0,.45);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.18);color:#fff}.btn.glass.danger{color:#ff8191}
.spin.big{width:34px;height:34px;border-width:3px;z-index:2}
.vrow{display:flex;align-items:center;gap:12px;padding:8px 2px}
/* komposer story */
.modal.scmp{background:linear-gradient(180deg,var(--s3),var(--s2));border-top-left-radius:26px;border-top-right-radius:26px}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:4px;margin-bottom:14px}
.seg button{position:relative;z-index:1;min-height:40px;border-radius:10px;font-weight:600;color:var(--tx2);transition:color .2s}.seg button[aria-selected=true]{color:#fff}
.seg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:var(--grad);box-shadow:0 6px 18px -6px rgba(0,168,255,.7);transition:transform .25s cubic-bezier(.3,.8,.3,1)}.seg[data-mode=image] .seg-ind{transform:translateX(100%)}
.cmp-prev{position:relative;height:210px;border-radius:20px;overflow:hidden;display:grid;place-items:center;text-align:center;padding:18px;margin-bottom:12px;border:1px solid rgba(255,255,255,.08);transition:background .25s}
.cmp-prev .pv-text{position:relative;z-index:1;font-weight:650;line-height:1.3;overflow-wrap:anywhere;white-space:pre-wrap;max-height:100%;overflow:hidden;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.pv-text.ph{opacity:.55}.pv-text.cap-on{position:absolute;left:12px;right:12px;bottom:12px;font-size:0.875rem!important;font-weight:500;background:rgba(0,0,0,.5);padding:8px 12px;border-radius:12px;max-height:60%}
.cmp-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;background:var(--s1);border:1.5px dashed var(--bd);border-radius:20px;color:var(--tx2);transition:border-color .15s,background .15s}
.drop:hover{border-color:var(--bda);background:rgba(23,105,255,.08)}.drop .ic{color:var(--neon)}.drop b{color:var(--tx)}.drop small{font-size:0.75rem}
.cmp .swatches{gap:10px;margin-bottom:12px;justify-content:center}.cmp .swatches button{width:36px;height:36px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35);transition:transform .15s}.cmp .swatches button[aria-pressed=true]{border-color:#fff;transform:scale(1.14)}
.tarea{position:relative}.tarea textarea{padding-bottom:26px;min-height:92px}.cnt{position:absolute;right:12px;bottom:8px;font-size:max(0.6875rem,11px);color:var(--tx3)}
.vis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.vis button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;border:1px solid var(--bd);background:var(--s1);font-size:0.75rem;color:var(--tx2);transition:border-color .15s,background .15s,color .15s,box-shadow .15s}
.vis button[aria-checked=true]{border-color:var(--bda);color:#fff;background:rgba(23,105,255,.16);box-shadow:0 0 0 3px rgba(61,117,255,.15)}
.cmp .err{margin-bottom:8px}.btn.primary:disabled{filter:saturate(.4);box-shadow:none}
/* perbaikan lebar modal & kartu */
.modal-back{grid-template-columns:minmax(0,1fr)}.modal{min-width:0}.modal-b{min-width:0}.cmp-prev .pv-text{max-width:100%}
.sc-meta{right:10px}.sc-plus~.sc-meta{right:44px}
/* story video & komposer 3 mode */
.seg{grid-template-columns:repeat(3,1fr)}.seg-ind{width:calc((100% - 8px)/3);transform:translateX(calc(var(--i,0)*100%))}
.sc-play{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);padding-left:2px}
.sc-dur{position:absolute;right:10px;top:46px;font-size:max(0.6875rem,11px);font-weight:700;padding:2px 7px;border-radius:9px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.viewer .stage video.vvid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;background:transparent}
.cmp-prev video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-dur{position:absolute;left:12px;top:12px;z-index:3;font-size:0.75rem;font-weight:700;padding:3px 9px;border-radius:10px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.pv-rm{position:absolute;right:10px;top:10px;z-index:3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff}
.upl{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}.upl-bar{height:8px;border-radius:6px;background:var(--s1);border:1px solid var(--bd);overflow:hidden}
.upl-bar i{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 12px rgba(0,168,255,.7);transition:width .15s linear}.upl span{font-size:0.75rem;color:var(--tx2)}
/* poles akhir */
.vtop{text-align:left}.vtop .grow{text-align:left}
.stat{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--s2),var(--s1));border-color:rgba(61,117,255,.28)}
.stat::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--grad);opacity:.8}
.stat b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- fitur baru: media chat, saluran, undangan, about, telepon segera hadir ---- */
.mm{margin:-2px -4px 6px;min-width:180px;max-width:min(320px,100%)}.mm img,.mm video{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:10px;background:var(--s2);cursor:zoom-in}.mm video{cursor:default}
.mm .sk{display:block;height:180px;border-radius:10px;background:var(--s2)}
.lbx{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:16px}.lbx img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}.lbx .ibtn{position:absolute;top:calc(12px + var(--st));right:12px;color:#fff}
.chlist{display:flex;flex-direction:column;margin:8px 0}.chlist .item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 6px;text-align:left;border-radius:12px;background:none;border:0;color:inherit;font:inherit;cursor:pointer}.chlist .item .grow{min-width:0;display:flex;flex-direction:column;gap:2px}
.rk{width:18px;text-align:center;color:var(--tx3);font-weight:600;font-size:0.8125rem}
.chv{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;padding-top:var(--st)}.chv .msgs{flex:1;overflow:auto}.chv .thead{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--bd)}
.ro{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px calc(12px) calc(14px + var(--sb));color:var(--tx2);font-size:0.875rem;border-top:1px solid var(--bd);background:var(--s1)}
.jcard{width:100%;max-width:380px;margin:18px auto;padding:24px;border:1px solid var(--bd);border-radius:20px;background:var(--s1);text-align:center}.jcard h2{margin:6px 0;display:flex;gap:6px;align-items:center;justify-content:center}.jav{display:flex;justify-content:center;margin-bottom:10px}
.abt{max-width:760px;margin:0 auto;padding:calc(32px + var(--st)) 20px calc(40px + var(--sb));text-align:center}.abt h1{margin:6px 0 10px}.abt h2{margin:34px 0 14px;text-align:left}.abt .lead{color:var(--tx2);line-height:1.6}
.agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;text-align:left}.acard{padding:16px;border:1px solid var(--bd);border-radius:16px;background:var(--s1)}.acard b{display:block;margin:6px 0 4px}.acard p{color:var(--tx2);font-size:0.875rem;line-height:1.5;margin:0}.soonc{text-align:left}
.soon-hero{text-align:center;padding:26px 12px 22px;display:flex;flex-direction:column;align-items:center;gap:10px}.soon-hero .pulse{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:var(--s2);color:var(--cyan);box-shadow:0 0 0 0 rgba(0,168,255,.45);animation:pl 2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 22px rgba(0,168,255,0)}100%{box-shadow:0 0 0 0 rgba(0,168,255,0)}}@media (prefers-reduced-motion:reduce){.soon-hero .pulse{animation:none}}

/* ---- polesan responsif & tampilan profesional ---- */
:where(img,video){max-width:100%}
.page{width:100%}
@media(min-width:600px){.page{padding-inline:24px}.abt{padding-inline:28px}.agrid{grid-template-columns:repeat(2,1fr)}.jcard{padding:32px}}
@media(min-width:900px){
  .page{max-width:860px;padding-top:32px}.page>h1{font-size:1.75rem}
  .agrid{grid-template-columns:repeat(3,1fr)}.abt h1{font-size:2.75rem}.abt .lead{font-size:1.125rem;max-width:620px;margin-inline:auto}
  .chv{left:88px;background:rgba(2,4,8,.72);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:24px}
  .chv>*{width:min(100%,720px);background:var(--bg2);border-inline:1px solid var(--bd)}
  .chv>header{border-radius:18px 18px 0 0;border-top:1px solid var(--bd)}.chv>.msgs{max-height:calc(100dvh - 190px);flex:1 1 auto}
  .chv>.composer,.chv>.ro{border-radius:0 0 18px 18px;border-bottom:1px solid var(--bd)}
  .mm{max-width:380px}
}
@media(min-width:1280px){.page{max-width:960px}.chlist{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}}
.acard,.jcard,.card{transition:transform .2s,border-color .2s,box-shadow .2s}
.acard:hover{transform:translateY(-2px);border-color:var(--bda);box-shadow:0 14px 34px -18px rgba(0,168,255,.5)}
.chlist .item{transition:background .15s}.chlist .item:hover{background:var(--s2)}
.msg .mm+.meta{display:block}
.srail{scroll-snap-type:x proximity}.scard{scroll-snap-align:start}
@media(max-width:380px){.btn.sm{padding:0 9px}.jcard{padding:18px}.abt h1{font-size:1.75rem}.mm{min-width:150px}}
@media(max-height:520px) and (orientation:landscape){.chv .msgs{min-height:120px}.soon-hero{padding:10px}}

/* ---- Perbaikan area ketuk Saluran ---- */
#chan{padding-bottom:116px}
.chhead,.chhead2{gap:10px}.chhead{margin-top:6px}.chhead2{margin-top:22px}.chhead .btn{min-height:44px;padding:0 16px}
.chlist .item{min-height:68px;padding:12px 8px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,168,255,.18);user-select:none;-webkit-user-select:none}
.chlist .item:active{background:var(--s2)}
.chlist .item.tap{cursor:pointer}
.chlist .item .btn{flex:none;min-height:42px;min-width:80px;position:relative;z-index:1}
.chlist .item .t{align-items:center;justify-content:flex-start}
.pill-new{margin-left:8px;padding:1px 8px;border-radius:10px;font-size:max(0.6875rem,11px);font-weight:700;background:var(--grad);color:#fff}
.chv .ibtn{width:44px;height:44px}
.chv~.modal-back{z-index:260}
#toasts{z-index:400}

/* ================= Saluran v2: modern, responsif, mudah diketuk ================= */
.chs{margin-top:6px}
.chs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 12px}
.chs-head.sp{margin-top:32px}.chs-head h2{font-size:1.188rem;margin:0}.chs-head p{margin:2px 0 0;font-size:0.8125rem}
.chs-head .btn{min-height:46px;padding:0 18px;flex:none}
.chav{width:var(--s,48px);height:var(--s,48px);flex:none;border-radius:32%;display:grid;place-items:center;font-weight:700;font-size:calc(var(--s,48px)*.42);color:#fff;background:linear-gradient(135deg,hsl(var(--h) 85% 58%),hsl(calc(var(--h) + 45) 80% 42%));box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 8px 20px -10px hsl(var(--h) 90% 55%)}
.clist{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.crow,.ccard{display:flex;align-items:stretch;background:var(--s1);border:1px solid var(--bd);border-radius:20px;overflow:hidden;transition:border-color .15s,background .15s,box-shadow .15s}
.crow:hover,.ccard:hover{border-color:var(--bda);background:var(--s2);box-shadow:0 10px 28px -18px rgba(0,168,255,.7)}
.cmain{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:14px;min-height:80px;text-align:left;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,168,255,.2)}
.cmain:active{background:rgba(0,168,255,.1)}.cmain:focus-visible{outline:2px solid var(--neon);outline-offset:-2px}
.cbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ctop{display:flex;align-items:center;gap:8px;font-weight:650;font-size:0.9688rem}
.ctop time{margin-left:auto;font-size:0.75rem;color:var(--tx3);font-weight:400;flex:none}
.cn{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cn .vbadge{margin-left:5px;vertical-align:-2px}
.cbot{display:flex;align-items:center;gap:8px}.csub{flex:1;min-width:0;color:var(--tx2);font-size:0.875rem}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.cmeta{display:flex;align-items:center;gap:6px;font-size:0.7812rem;color:var(--tx3)}
.cfol{align-self:center;flex:none;margin-right:14px;min-height:44px;min-width:84px;touch-action:manipulation}
.csearch{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:0 14px;min-height:50px;border:1px solid var(--bd);border-radius:16px;background:var(--s1);color:var(--tx3);transition:border-color .15s,box-shadow .15s}
.csearch:focus-within{border-color:var(--bda);box-shadow:0 0 0 3px rgba(61,117,255,.2)}
.csearch input{flex:1;min-width:0;min-height:46px;background:none;border:0;outline:0;color:var(--tx);font:inherit;font-size:1rem}
.cempty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:28px 18px;border:1px dashed var(--bd);border-radius:22px;color:var(--tx2)}
.cempty .ico{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;background:var(--s2);color:var(--neon);margin-bottom:4px}
.cempty b{color:var(--tx);font-size:1rem}.cempty p{margin:0;font-size:0.875rem;max-width:34ch}.cempty .btn{margin-top:12px}
.pill-new{padding:1px 9px;border-radius:10px;font-size:max(0.6875rem,11px);font-weight:700;background:var(--grad);color:#fff;flex:none}
.btn.lg{min-height:52px;font-size:1rem}
@media(min-width:640px){.clist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.cmain{padding:12px;gap:10px}.cfol{min-width:72px;margin-right:10px}.chs-head .btn{padding:0 14px}}

/* profil saluran */
.chp{position:fixed;inset:0;z-index:220;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.chp-card{min-height:100%;max-width:580px;margin:0 auto;display:flex;flex-direction:column;background:var(--bg)}
.chp-cover{height:150px;flex:none;padding:calc(10px + var(--st)) 10px 0;display:flex;justify-content:space-between;align-items:flex-start;background:radial-gradient(120% 160% at 15% 0,hsl(var(--h) 85% 52%/.8),transparent 62%),linear-gradient(135deg,hsl(var(--h) 65% 24%),hsl(calc(var(--h) + 50) 65% 12%))}
.ibtn.glass{width:46px;height:46px;background:rgba(5,7,11,.5);backdrop-filter:blur(10px);color:#fff;touch-action:manipulation}
.chp-main{flex:1;padding:0 18px 120px;margin-top:-50px;text-align:center}
.chp-av{display:flex;justify-content:center}.chp-av .chav{border:4px solid var(--bg)}
.chp-name{font-size:1.5rem;margin:12px 0 2px;display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;overflow-wrap:anywhere}
.chp-sub{color:var(--tx2);margin:0 0 18px}
.chp-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-bottom:16px}
.act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:74px;border:1px solid var(--bd);border-radius:18px;background:var(--s1);color:var(--neon);font-size:0.8125rem;font-weight:600;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,168,255,.2)}
.act span{color:var(--tx)}.act:hover{border-color:var(--bda)}.act:active{background:var(--s2)}
.act.pri{background:var(--grad);border-color:transparent;color:#fff}.act.pri span{color:#fff}
.chp-box{text-align:left;border:1px solid var(--bd);border-radius:20px;background:var(--s1);padding:4px 16px;margin-bottom:14px}
.chp-box h3{font-size:0.75rem;color:var(--tx3);font-weight:650;text-transform:uppercase;letter-spacing:.07em;margin:14px 0 6px}
.chp-box>p{margin:0 0 14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.irow{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--bd)}.chp-box h3+.irow{border-top:0}
.irow .ic{color:var(--neon);flex:none}.irow>span{min-width:0;overflow-wrap:anywhere}.irow small{display:block;color:var(--tx3);font-size:0.75rem;margin-bottom:1px}
.chp-danger{width:100%;justify-content:flex-start;min-height:54px;padding:0 18px;border-radius:16px;margin-bottom:10px}
.chp-cta{position:sticky;bottom:0;padding:16px 18px calc(16px + var(--sb));background:linear-gradient(180deg,transparent,var(--bg) 38%)}
@media(min-width:700px){.chp{background:rgba(2,4,8,.74);backdrop-filter:blur(6px)}.chp-card{min-height:0;margin:5vh auto;border-radius:26px;overflow:hidden;border:1px solid var(--bd);box-shadow:0 40px 90px -24px #000}.chp-cover{height:170px}.chp-main{padding-bottom:28px}.chp-cta{position:static;padding:0 18px 22px;background:none}}

/* tampilan kiriman saluran */
.chv .thead.chh{position:sticky;top:0;z-index:2;padding:8px 10px;gap:6px;background:rgba(16,21,31,.88);backdrop-filter:blur(14px)}
.chh-id{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:54px;padding:4px 8px;border-radius:16px;text-align:left;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,168,255,.2)}
.chh-id:hover,.chh-id:active{background:var(--s2)}.chh-id .t1{display:block;font-weight:650}.chh-id .sub{display:block;font-size:0.75rem;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chv .msgs{padding:16px 14px 12px;gap:12px;background:radial-gradient(90% 45% at 50% 0,rgba(23,105,255,.09),transparent)}
.post{align-self:flex-start;width:fit-content;min-width:150px;max-width:min(100%,560px);padding:12px 14px 6px;background:var(--s1);border:1px solid var(--bd);border-radius:6px 20px 20px 20px;box-shadow:0 10px 26px -18px #000}
.post .ptext{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.post .mm{margin:-4px -6px 8px}
.post footer{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;min-height:28px;color:var(--tx3);font-size:0.75rem}
.post .pm{width:44px;height:44px;margin:-8px -10px -8px 0;display:grid;place-items:center;border-radius:14px;color:var(--tx3);touch-action:manipulation}
.post .pm:hover,.post .pm:active{color:var(--danger);background:var(--s2)}
.post.gone{min-width:0;padding:8px 14px;color:var(--tx3);font-style:italic}
.chv .day{align-self:center;margin:6px 0 0}
.chv .composer .ibtn,.chv .thead .ibtn{width:46px;height:46px}
.chp~.modal-back,.chv~.modal-back{z-index:260}
@media(min-width:900px){.chs-head h2{font-size:1.312rem}.cmain{padding:16px}}
@media (prefers-reduced-motion:reduce){.crow,.ccard,.csearch{transition:none}}

/* ---- Profil saluran lengkap ---- */
.chp-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 18px}
.pl{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:0.7812rem;font-weight:600;background:var(--s2);color:var(--tx2);border:1px solid var(--bd)}
.pl .ic{flex:none}.pl.pri{background:rgba(0,168,255,.14);color:var(--cyan);border-color:rgba(0,168,255,.42)}.pl.ok{background:rgba(53,212,154,.12);color:var(--ok);border-color:rgba(53,212,154,.42)}
.chp-det{text-align:left}
.chp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.chp-stats>div{padding:14px 8px;border:1px solid var(--bd);border-radius:18px;background:var(--s1);text-align:center}
.chp-stats b{display:block;font-size:1.312rem;line-height:1.2;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.chp-stats span{font-size:0.75rem;color:var(--tx3)}
.pdesc.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.more{display:inline-block;margin:-6px 0 8px;min-height:44px;padding:0 4px;color:var(--neon);font-weight:600;touch-action:manipulation}
.pgal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:4px 0 14px}
.pgal .mm{margin:0;min-width:0;max-width:none;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--s2)}
.pgal .mm img,.pgal .mm video{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:12px}.pgal .mm .sk{height:100%}
.lnk{display:flex;gap:8px;margin:0 0 14px}.lnk .inp{flex:1;min-width:0;font-size:0.875rem}.lnk .btn{flex:none;min-height:46px;padding:0 16px}
.orow{display:flex;align-items:center;gap:12px;padding:4px 0 14px}
@media(min-width:1000px){
  .chp-card{max-width:980px}
  .chp-main{display:grid;grid-template-columns:320px minmax(0,1fr);gap:30px;align-items:start;text-align:left;padding:0 30px 32px}
  .chp-id{position:sticky;top:12px}.chp-av{justify-content:flex-start}.chp-name,.chp-pills{justify-content:flex-start}
  .chp-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.chp-det{padding-top:64px}
  .pgal{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:380px){.chp-stats b{font-size:1.125rem}.lnk{flex-direction:column}.lnk .btn{width:100%}}

/* ---- Foto saluran & posisi kiriman ---- */
.chav{position:relative;overflow:hidden}.chav b{font-weight:700;line-height:1}
.chav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--s2)}
.avw{position:relative;display:inline-block}
.avcam{position:absolute;right:-8px;bottom:-8px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--grad);border:3px solid var(--bg);touch-action:manipulation;box-shadow:0 6px 16px -4px rgba(0,168,255,.7)}
.avcam:active{transform:scale(.92)}
.avpick{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.avbtn{width:76px;height:76px;flex:none;border-radius:32%;border:1.5px dashed var(--bda);background:var(--s2);color:var(--neon);overflow:hidden;display:grid;place-items:center;touch-action:manipulation}
.avbtn #cpv{display:grid;place-items:center;width:100%;height:100%}.avbtn img{width:100%;height:100%;object-fit:cover}
.post.in{align-self:flex-start}
.post.out{align-self:flex-end;background:var(--grad);border-color:transparent;border-radius:20px 6px 20px 20px;color:#fff;box-shadow:0 14px 30px -16px rgba(0,168,255,.85)}
.post.out footer{color:rgba(255,255,255,.8)}
.post.out .pm{color:rgba(255,255,255,.85)}.post.out .pm:hover,.post.out .pm:active{color:#fff;background:rgba(255,255,255,.2)}
.post.gone.out{background:var(--s1);border:1px dashed var(--bd);color:var(--tx3);box-shadow:none}

/* ===== Fitur baru: centang pesan, kutipan story, pesan sistem ===== */
.tick{display:inline-flex;vertical-align:-3px;margin-left:4px;color:var(--tx3)}
.tick.read{color:var(--cyan)}
.msg.out .tick{color:rgba(255,255,255,.65)}.msg.out .tick.read{color:#7FF0FF}
.seen-n{font-size:max(0.6875rem,11px);margin-left:3px;opacity:.8;cursor:pointer}
.sysmsg{align-self:center;max-width:86%;text-align:center;font-size:0.7812rem;color:var(--tx2);background:var(--s1);border:1px solid var(--bd);border-radius:999px;padding:5px 12px;margin:6px 0;display:flex;gap:6px;align-items:center}
.sq{display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.22);border-left:3px solid var(--cyan);border-radius:10px;padding:8px;margin-bottom:6px;min-width:210px}
.sq img,.sq-t{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;display:grid;place-items:center}
.sq-t.gone{background:var(--s3);color:var(--tx3)}
.sq small{display:block;opacity:.8}.sq b{font-size:0.8125rem}.sq.off{opacity:.75}
.sq-b{width:44px;height:44px;border-radius:8px;background:var(--s3)}
.vreply{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;gap:8px;align-items:center;padding:10px 12px calc(10px + var(--sb));background:linear-gradient(transparent,rgba(0,0,0,.7))}
.vreply .inp{flex:1;border-radius:999px;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.3);color:#fff}
.rp-tag{display:inline-flex;gap:4px;align-items:center;font-size:max(0.7188rem,11.5px);color:var(--cyan);margin-left:8px}
.rpt{display:flex;gap:10px;align-items:flex-start;margin:12px 2px 4px;font-size:0.875rem}
.rpt small{display:block;color:var(--tx3);font-size:0.75rem}.rpt.off{opacity:.5}
.rpt input{width:20px;height:20px;accent-color:#1769FF;margin-top:2px}
.evid{display:block;margin-top:4px;padding:6px 8px;border-left:3px solid var(--danger);background:var(--s1);font-size:0.8125rem;border-radius:6px}
.csearch{display:flex;align-items:center;gap:8px;background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:0 12px;min-height:44px}
.csearch input{flex:1;background:none;border:0;outline:0;min-width:0}
.crow2{padding:8px 2px;border-bottom:1px solid var(--bd)}.on-now{color:var(--ok)}
.opt{display:block;text-align:left;width:100%;padding:14px;border:1px solid var(--bd);border-radius:14px;background:var(--s1)}
.opt.on{border-color:var(--bda);box-shadow:0 0 0 1px var(--bda) inset}.opt small{display:block;color:var(--tx2);margin-top:4px}


/* ===== Dropdown kustom (pengganti popup <select> bawaan) ===== */
.dd{position:relative;display:block;min-width:0}.dd-native{display:none!important}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;font-weight:500;padding-right:12px}
.dd-btn .ic{color:var(--tx3);transition:transform .2s}.dd-btn[aria-expanded=true]{border-color:var(--bda);box-shadow:0 0 0 3px rgba(61,117,255,.2)}.dd-btn[aria-expanded=true] .ic{transform:rotate(180deg);color:var(--cyan)}
.dd-btn:disabled{opacity:.5;cursor:not-allowed}
.dd-back{position:fixed;inset:0;z-index:400}.dd-back.m{background:rgba(2,4,8,.6);backdrop-filter:blur(3px);animation:ddfade .18s}
.dd-pop{position:fixed;z-index:401;background:var(--s2);border:1px solid var(--bd);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset;overflow:hidden;display:flex;flex-direction:column;animation:ddpop .16s cubic-bezier(.2,.9,.3,1);transform-origin:top left}
.dd-list{overflow:auto;padding:6px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain}
.dd-o{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:11px;font-weight:500;color:var(--tx);transition:background .12s}
.dd-o:hover,.dd-o:focus-visible{background:var(--s3);outline:0}
.dd-o .dd-c{opacity:0;color:var(--cyan);display:grid;place-items:center;width:24px;height:24px;border-radius:50%}
.dd-o[aria-selected=true]{background:linear-gradient(90deg,rgba(23,105,255,.22),rgba(50,217,255,.08));color:#fff}
.dd-o[aria-selected=true] .dd-c{opacity:1;background:rgba(50,217,255,.16)}
.dd-pop.sheet{left:0;right:0;bottom:0;top:auto;max-height:78dvh;border-radius:24px 24px 0 0;border-bottom:0;padding-bottom:var(--sb);animation:ddsheet .26s cubic-bezier(.2,.9,.3,1);transform-origin:bottom}
.dd-h{position:relative;display:flex;align-items:center;justify-content:space-between;padding:18px 14px 6px 20px}
.dd-h b{font-size:1.062rem;font-weight:650}.dd-grip{position:absolute;top:8px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:4px;background:var(--bd)}
.dd-pop.sheet .dd-o{padding:15px 16px;font-size:1rem}
@keyframes ddfade{from{opacity:0}}@keyframes ddpop{from{opacity:0;transform:translateY(-6px) scale(.97)}}@keyframes ddsheet{from{transform:translateY(100%)}}

/* ===== Layar profil penuh ===== */
.pscreen{position:fixed;inset:0;z-index:120;background:var(--bg);display:flex;flex-direction:column;animation:psin .28s cubic-bezier(.2,.9,.3,1)}
.pscreen.out{animation:psout .18s ease-in forwards}
@keyframes psin{from{transform:translateY(28px);opacity:0}}@keyframes psout{to{transform:translateY(20px);opacity:0}}
.ps-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:8px;padding:calc(10px + var(--st)) 12px 10px}
.ps-top h2{font-size:1rem;opacity:0;transition:opacity .2s}
.ps-top .ibtn{background:rgba(0,0,0,.35);backdrop-filter:blur(8px);color:#fff}
.ps-scroll{flex:1;overflow:auto;overscroll-behavior:contain;padding-bottom:calc(28px + var(--sb))}
.ps-hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(76px + var(--st)) 20px 22px;overflow:hidden;isolation:isolate}
.ps-bg{position:absolute;inset:-30px;z-index:-2;background:var(--grad) center/cover;filter:blur(34px) saturate(1.4);opacity:.55;transform:scale(1.2)}
.ps-fade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.25),var(--bg) 96%)}
.ps-av{border-radius:50%;padding:4px;background:var(--grad);box-shadow:0 14px 44px rgba(0,120,255,.35);cursor:default;display:block;line-height:0}
.ps-av.has{cursor:zoom-in}.ps-av .av{border:4px solid var(--bg)}
.ps-hero h1{font-size:clamp(22px,6vw,28px);margin:16px 0 2px}
.ps-user{color:var(--tx2)}
.ps-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--s2);border:1px solid var(--bd);font-size:0.8125rem;color:var(--tx2)}
button.chip:hover{border-color:var(--bda);color:var(--tx)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--tx3)}.chip.live{color:var(--ok)}.chip.live i{background:var(--ok);box-shadow:0 0 0 3px rgba(53,212,154,.25)}
.ps-quick{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.qa{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:78px;color:var(--tx)}
.qa span{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--s2);border:1px solid var(--bd);transition:transform .15s,background .15s,border-color .15s}
.qa:hover span,.qa:focus-visible span{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-2px)}
.qa small{font-size:0.7812rem;color:var(--tx2)}
.ps-card{width:min(100%,640px);margin:12px auto 0;padding:16px 18px;background:var(--s1);border:1px solid var(--bd);border-radius:20px}
.ps-card h3{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.ps-card p{line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ps-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--bd)}.ps-row:first-of-type{border-top:0}.ps-row span{color:var(--tx2)}
.ps-mem{display:flex;flex-direction:column;gap:12px}
.ps-danger{padding:6px}.ps-d{display:flex;align-items:center;gap:12px;width:100%;padding:14px 12px;border-radius:14px;color:var(--danger);font-weight:600;text-align:left}.ps-d:hover{background:rgba(255,77,100,.1)}
@media(min-width:900px){.ps-hero{padding-top:calc(90px + var(--st))}}

/* ===== Halaman undangan ===== */
.inv-logo{width:min(34vw,120px)!important;margin-bottom:6px}
.inv{--h:215;width:100%;max-width:440px;margin:14px auto;background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--bd);border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset;animation:invin .5s cubic-bezier(.2,.9,.3,1)}
@keyframes invin{from{opacity:0;transform:translateY(18px) scale(.98)}}
.inv-banner{position:relative;height:112px;background:radial-gradient(circle at 20% 30%,hsl(var(--h) 90% 62% / .9),transparent 60%),radial-gradient(circle at 85% 70%,hsl(calc(var(--h) + 50) 90% 55% / .85),transparent 60%),linear-gradient(135deg,hsl(var(--h) 80% 30%),hsl(calc(var(--h) + 60) 80% 22%))}
.inv-banner::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.inv-pill{position:absolute;top:14px;left:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:0.75rem;font-weight:600;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.32);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25)}
.inv-body{padding:0 24px 22px;text-align:center}
.inv-av{width:96px;height:96px;margin:-48px auto 0;border-radius:30px;display:grid;place-items:center;position:relative;background:linear-gradient(135deg,hsl(var(--h) 85% 58%),hsl(calc(var(--h) + 55) 85% 45%));border:5px solid var(--s2);box-shadow:0 14px 34px hsl(var(--h) 80% 40% / .5);transform:rotate(-4deg)}
.inv-av b{font-size:2.625rem;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3);transform:rotate(4deg)}
.inv-name{display:flex;align-items:center;justify-content:center;gap:8px;font-size:clamp(24px,6.5vw,30px);margin:16px 0 12px;word-break:break-word}
.inv-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.inv-stats span{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;font-size:0.8438rem;color:var(--tx2);background:var(--bg2);border:1px solid var(--bd)}.inv-stats b{color:var(--tx)}.inv-stats .ok{color:var(--ok);border-color:rgba(53,212,154,.4)}
.inv-desc{margin:16px 0 0;padding:12px 14px;border-radius:14px;background:var(--bg2);border:1px solid var(--bd);color:var(--tx2);text-align:left;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.inv-perks{list-style:none;padding:0;margin:18px 0 20px;display:flex;flex-direction:column;gap:12px;text-align:left}
.inv-perks li{display:flex;gap:12px;align-items:center}
.inv-perks li>span{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--cyan);background:rgba(50,217,255,.1);border:1px solid rgba(50,217,255,.25)}
.inv-perks b{display:block;font-size:0.9062rem}.inv-perks small{color:var(--tx3);font-size:0.8125rem}
.inv .btn.lg{min-height:54px;font-size:1.031rem;border-radius:16px;box-shadow:0 12px 30px rgba(0,140,255,.35)}
.inv-share{display:flex;justify-content:center;gap:8px;margin-top:12px}
.inv-trust{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:16px;font-size:0.75rem;color:var(--tx3);text-align:center}
.inv-state{padding:40px 26px 30px;text-align:center}.inv-state h2{margin:14px 0 6px}
.inv-sico{width:68px;height:68px;border-radius:22px;margin:0 auto;display:grid;place-items:center;color:var(--cyan);background:rgba(50,217,255,.1);border:1px solid rgba(50,217,255,.3)}
.sk-b{background:linear-gradient(110deg,var(--s2) 30%,var(--s3) 50%,var(--s2) 70%);background-size:200% 100%;animation:skl 1.3s linear infinite}
.inv .sk,.sk-l,.sk-btn{display:block;background:linear-gradient(110deg,var(--s2) 30%,var(--s3) 50%,var(--s2) 70%);background-size:200% 100%;animation:skl 1.3s linear infinite;border-radius:12px;margin:12px auto 0}
.inv .inv-av.sk{border-radius:30px;transform:none}.sk-l{height:16px}.sk-l.w60{width:60%}.sk-l.w40{width:40%}.sk-l.w90{width:90%}.sk-btn{height:54px;width:100%;margin-top:22px;border-radius:16px}
@keyframes skl{to{background-position:-200% 0}}

/* ===== Pemilih tema ===== */
.themes{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 14px;margin:0 -2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.themes::-webkit-scrollbar{display:none}
.tcard{flex:0 0 min(74%,230px);scroll-snap-align:center;display:flex;flex-direction:column;gap:12px;padding:12px;text-align:left;border-radius:22px;background:var(--s1);border:1px solid var(--bd);position:relative;transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s,border-color .25s}
.tcard:hover{transform:translateY(-4px)}
.tcard[aria-checked=true]{border-color:transparent;background:linear-gradient(var(--s1),var(--s1)) padding-box,var(--grad) border-box;border:2px solid transparent;box-shadow:0 14px 40px rgba(0,140,255,.3)}
.tphone{display:flex;flex-direction:column;gap:7px;height:178px;padding:10px;border-radius:16px;overflow:hidden;position:relative;isolation:isolate;transition:transform .3s}
.tcard:hover .tphone{transform:scale(1.03) rotate(-.6deg)}
.tbar{display:flex;align-items:center;gap:6px;padding-bottom:7px}.tav{width:18px;height:18px;border-radius:50%}.tl{height:6px;width:38%;border-radius:4px}.tl.s{width:18%;margin-left:auto}
.tbody{flex:1;display:flex;flex-direction:column;gap:7px;justify-content:center}
.tb{height:22px;width:62%;border-radius:12px}.tb.s{height:16px;width:40%}.tb.out{align-self:flex-end}
.tin{display:flex;gap:6px;align-items:center;height:22px}.tin i{flex:1;height:100%;border-radius:12px}.tin b{width:22px;height:22px;border-radius:50%}
.tmeta{display:flex;flex-direction:column;gap:3px;padding:0 4px 4px}
.tname{display:flex;align-items:center;justify-content:space-between}.tname b{font-size:0.9688rem}
.tchk{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.tcard[aria-checked=true] .tchk{transform:scale(1)}
.tmeta small{color:var(--tx3);font-size:0.7812rem;line-height:1.4;min-height:35px}
.tdots{display:flex;gap:5px;margin-top:4px}.tdots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--s1);box-shadow:0 0 0 1px var(--bd)}
/* pratinjau per tema (palet tetap, tidak ikut tema aktif) */
.th-orvix .tphone{background:radial-gradient(120px 80px at 90% 0,rgba(23,105,255,.35),transparent),#05070B}
.th-orvix .tav{background:linear-gradient(135deg,#1769FF,#32D9FF)}.th-orvix .tl{background:#283548}.th-orvix .tb.in{background:#151C29}.th-orvix .tb.out{background:linear-gradient(115deg,#1769FF,#00A8FF)}
.th-orvix .tin i{background:#151C29}.th-orvix .tin b{background:linear-gradient(135deg,#1769FF,#32D9FF)}
.th-orvix .tdots i:nth-child(1){background:#05070B}.th-orvix .tdots i:nth-child(2){background:#1769FF}.th-orvix .tdots i:nth-child(3){background:#32D9FF}.th-orvix .tdots i:nth-child(4){background:#F4F7FC}
@media(min-width:640px){.themes{overflow:visible;flex-wrap:nowrap}.tcard{flex:1 1 0;min-width:0}}
.theme-fade,.theme-fade *{transition:background-color .35s,color .35s,border-color .35s,box-shadow .35s!important}
@media(prefers-reduced-motion:reduce){.tcard,.tphone,.pscreen,.inv,.dd-pop{animation:none!important;transition:none!important}}


/* =====================================================================
   BANNER PROFIL, EDITOR CROP, ANIMASI TEMA
   ===================================================================== */

/* ---------- Banner profil (kartu profil sendiri) ---------- */
.cover{position:relative;aspect-ratio:3/1;min-height:112px;max-height:270px;overflow:hidden;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(120deg,#05070B 0%,#0a2a6b 55%,#1769FF 100%);isolation:isolate}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:0;transform:scale(1.07);transition:opacity .7s ease,transform 1.5s cubic-bezier(.2,.8,.2,1)}
.cover-img.in{opacity:1;transform:none}
.cover.has::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 32%,transparent 62%,rgba(0,0,0,.38));pointer-events:none}
.cover-fx{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(120,200,255,.2) 50%,transparent 65%);transform:translateX(-100%);animation:sweep 7s ease-in-out 1s infinite}
.cover.has .cover-fx{display:none}
@keyframes sweep{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.cover-act{position:absolute;right:10px;top:10px;display:flex;gap:8px;z-index:2}
.cover-act .ibtn{background:rgba(5,7,11,.62);backdrop-filter:blur(8px);color:#fff;transition:transform .15s,background .15s}
.cover-act .ibtn:hover{background:rgba(5,7,11,.85);transform:translateY(-1px)}
.cover-add{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;border:1.5px dashed rgba(255,255,255,.5);background:rgba(5,7,11,.32);backdrop-filter:blur(6px);color:#fff;font-weight:600;font-size:0.875rem;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
.cover-add:hover{background:rgba(5,7,11,.6);border-style:solid;border-color:#fff;transform:translate(-50%,-52%)}
.pcard .avw{display:block;width:max-content;margin:-48px auto 0;isolation:isolate}
.pcard .avw .av{border:3px solid var(--blue);box-shadow:0 0 0 4px var(--s1),0 0 24px rgba(0,168,255,.35)}
.pcard .avcam{width:34px;height:34px;right:-2px;bottom:-2px;border:3px solid var(--s1)}
.pcard .avw::before{content:"";position:absolute;inset:-7px;border-radius:50%;z-index:-1;background:conic-gradient(from 0deg,#1769FF,#32D9FF,#7B5CFF,#1769FF);filter:blur(11px);opacity:.5;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Banner di layar profil teman ---------- */
.ps-hero{--bh:clamp(150px,30vw,230px)}
.ps-hero.has-banner{padding-top:calc(var(--bh) + var(--st) - 64px)}
.ps-banner{position:absolute;left:0;right:0;top:0;height:calc(var(--bh) + var(--st));z-index:-1;overflow:hidden}
.ps-banner img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .7s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
.ps-banner img.in{opacity:1;transform:none}
.ps-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 38%,var(--bg) 100%)}
.ps-hero.has-banner .ps-bg,.ps-hero.has-banner .ps-fade{display:none}

/* ---------- Editor crop ---------- */
.crop-modal{width:min(100%,640px)}
.crop{display:flex;flex-direction:column;gap:12px}
.crop-stage{--ar:1;position:relative;width:min(100%,calc(56dvh*var(--ar)));margin:0 auto;border-radius:14px;overflow:hidden;background:#000;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;border:1px solid var(--bd)}
.crop-stage.round{width:min(100%,360px,calc(56dvh*var(--ar)))}
.crop-stage.drag{cursor:grabbing}
.crop-stage canvas{display:block;width:100%;height:100%}
.crop-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px);background-size:33.333% 33.333%;opacity:0;transition:opacity .2s}
.crop-stage.drag .crop-grid{opacity:1}
.crop-stage.round::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 999px rgba(0,0,0,.58);pointer-events:none}
.crop-hint{font-size:0.8125rem;color:var(--tx2);text-align:center;margin:0}
.crop-zoom{display:flex;align-items:center;gap:6px}.crop-zoom input{flex:1;min-width:0;accent-color:var(--blue);height:32px}
.crop-act{flex-wrap:nowrap;gap:8px}.crop-act .btn{min-height:44px;padding:0 14px;flex:none}
.crop-act [data-reset]{margin-right:auto;padding:0 8px}.crop-act [data-ok]{padding:0 22px}

/* ---------- Animasi masuk halaman (per tema) ---------- */
:root{--enter:rise}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes pop{0%{opacity:0;transform:translate(-10px,10px)}55%{opacity:1;transform:translate(2px,-2px)}100%{transform:none}}
@keyframes blurin{from{opacity:0;transform:translateY(12px) scale(.985);filter:blur(10px)}}
.stagger>*{animation:var(--enter) .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*55ms)}

/* ---------- Pergantian tema: menyebar dari titik klik (View Transitions) ---------- */
html.theme-vt::view-transition-old(root),html.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-vt::view-transition-new(root){z-index:2}
html.theme-vt .bottom,html.theme-vt .side{view-transition-name:none}

/* ---------- Kilau tombol utama (semua tema) ---------- */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-130%)}
.btn.primary:hover::after{animation:sheen .8s ease}
@keyframes sheen{to{transform:translateX(130%)}}
.setrow,.chip,.qa span{transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s,background .2s}

/* ---------- Latar ambient ---------- */
body::before{content:"";position:fixed;z-index:-1;pointer-events:none;inset:0}
:root:not([data-theme]) body::before{inset:-25%;background:radial-gradient(38% 34% at 16% 10%,rgba(23,105,255,.17),transparent 70%),radial-gradient(34% 30% at 88% 90%,rgba(50,217,255,.10),transparent 70%),radial-gradient(26% 24% at 80% 12%,rgba(123,92,255,.08),transparent 70%);animation:ambient 28s ease-in-out infinite alternate;will-change:transform}
@keyframes ambient{to{transform:translate3d(4%,3%,0) scale(1.1) rotate(2deg)}}
:root:not([data-theme]) .setrow:hover{transform:translateY(-1px);box-shadow:0 12px 28px -18px rgba(0,168,255,.6)}
:root:not([data-theme]) .bottom a.on::before,:root:not([data-theme]) .side a.on{animation:navglow 3.2s ease-in-out infinite}
@keyframes navglow{50%{box-shadow:0 0 16px var(--neon)}}
:root:not([data-theme]) .side a.on{box-shadow:inset 3px 0 0 var(--neon)}
@keyframes navglow-side{50%{box-shadow:inset 3px 0 0 var(--neon),0 0 18px -4px var(--neon)}}
:root:not([data-theme]) .side a.on{animation-name:navglow-side}
:root:not([data-theme]) .tcard[aria-checked=true] .tphone{animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-4px)}}


/* =====================================================================
   TEMA NEO BRUTALISM — arang gelap, border tebal, bayangan keras
   Tidak ada permukaan putih/krem terang; kontras datang dari garis dan blok warna.
   ===================================================================== */
:root[data-theme=brutal]{--bg:#18171E;--bg2:#121117;--s1:#23212C;--s2:#2D2A39;--s3:#383447;--bd:#4B4760;--bda:#FFC53D;--ink:#E8E0CC;--sh:#07060B;--acc:#FFC53D;--tx:#F1ECDD;--tx2:#C5BFAE;--tx3:#8F8A9C;--blue:#5B7BFF;--neon:#FFC53D;--cyan:#FFC53D;--silver:#F1ECDD;--white:#FFFDF5;--danger:#FF6E61;--ok:#52E0A0;--grad:#5B7BFF;--r:8px;--enter:pop;color-scheme:dark}
[data-theme=brutal] body{background:var(--bg)}
[data-theme=brutal] body::before{inset:-44px;background-image:radial-gradient(rgba(241,236,221,.085) 1.6px,transparent 1.9px);background-size:22px 22px;animation:dots 16s linear infinite}
@keyframes dots{to{transform:translate(22px,22px)}}
[data-theme=brutal] ::selection{background:var(--acc);color:#111}
[data-theme=brutal] p a,[data-theme=brutal] .foot a,[data-theme=brutal] .legal a{text-decoration:underline;text-underline-offset:3px}
[data-theme=brutal] h1,[data-theme=brutal] h2,[data-theme=brutal] h3{letter-spacing:-.02em;font-weight:800}

/* permukaan utama: garis krem tebal + bayangan keras */
[data-theme=brutal] .pcard,[data-theme=brutal] .modal,[data-theme=brutal] .stat,[data-theme=brutal] .jcard,[data-theme=brutal] .inv,[data-theme=brutal] .ps-card,[data-theme=brutal] .chp-box,[data-theme=brutal] .dd-pop,[data-theme=brutal] .toast{border:2px solid var(--ink);border-radius:var(--r);background:var(--s1)}
[data-theme=brutal] .pcard{box-shadow:7px 7px 0 var(--acc)}
[data-theme=brutal] .modal,[data-theme=brutal] .dd-pop,[data-theme=brutal] .inv{box-shadow:8px 8px 0 #000}
[data-theme=brutal] .stat,[data-theme=brutal] .jcard,[data-theme=brutal] .ps-card,[data-theme=brutal] .chp-box,[data-theme=brutal] .toast{box-shadow:5px 5px 0 #000}
/* permukaan sekunder: garis lebih redup agar halaman tidak ramai */
[data-theme=brutal] .card,[data-theme=brutal] .setrow,[data-theme=brutal] .opt,[data-theme=brutal] .sysmsg,[data-theme=brutal] .csearch,[data-theme=brutal] .acard,[data-theme=brutal] .ccard,[data-theme=brutal] .crow,[data-theme=brutal] .chp-stats>div,[data-theme=brutal] .act,[data-theme=brutal] .chip,[data-theme=brutal] .alert,[data-theme=brutal] .cempty,[data-theme=brutal] .tbl{border:2px solid var(--bd);border-radius:var(--r);box-shadow:4px 4px 0 #000}
[data-theme=brutal] .setrow:hover,[data-theme=brutal] .opt:hover,[data-theme=brutal] .crow:hover,[data-theme=brutal] .ccard:hover,[data-theme=brutal] .acard:hover,[data-theme=brutal] .act:hover{border-color:var(--ink);background:var(--s2);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--acc)}
[data-theme=brutal] .setrow,[data-theme=brutal] .crow,[data-theme=brutal] .ccard,[data-theme=brutal] .acard{transition:transform .14s steps(3),box-shadow .14s steps(3),border-color .14s,background .14s}
[data-theme=brutal] .setrow:active,[data-theme=brutal] .opt:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
[data-theme=brutal] .setrow.danger{border-color:var(--danger);background:rgba(255,110,97,.08)}
[data-theme=brutal] .setrow.danger:hover{box-shadow:6px 6px 0 var(--danger);border-color:var(--danger)}
[data-theme=brutal] .setrow .ic:first-child{color:var(--acc)}[data-theme=brutal] .setrow.danger .ic:first-child{color:var(--danger)}
[data-theme=brutal] .alert.warn{border-color:var(--danger)}[data-theme=brutal] .alert.info{border-color:var(--acc)}

/* label bagian: stiker kuning miring */
[data-theme=brutal] .sec{display:inline-block;margin:26px 4px 12px;padding:4px 12px;background:var(--acc);color:#111;border:2px solid #000;border-radius:4px;box-shadow:3px 3px 0 #000;transform:rotate(-1.4deg);font-weight:800;letter-spacing:.1em}
[data-theme=brutal] .pcard .sec{display:block;width:max-content;margin:14px auto 6px!important}
[data-theme=brutal] .page>h1{display:inline-block;position:relative;z-index:0}
[data-theme=brutal] .page>h1::after{content:"";position:absolute;left:-4px;right:-8px;bottom:2px;height:12px;background:var(--acc);opacity:.9;z-index:-1;transform:skewX(-14deg);transform-origin:left;animation:mark .6s steps(8) .15s both}
@keyframes mark{from{transform:skewX(-14deg) scaleX(0)}}
[data-theme=brutal] .page>h1{color:var(--tx)}

/* tombol */
[data-theme=brutal] .btn{background:var(--s2);color:var(--tx);border:2px solid var(--ink);border-radius:var(--r);font-weight:800;box-shadow:3px 3px 0 #000;transition:transform .12s steps(3),box-shadow .12s steps(3),background .12s}
[data-theme=brutal] .btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000;border-color:var(--ink);background:var(--s3)}
[data-theme=brutal] .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 #000}
[data-theme=brutal] .btn.primary,[data-theme=brutal] .send{background:var(--blue);color:#fff;text-shadow:none;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--acc)}
[data-theme=brutal] .btn.primary:hover{box-shadow:6px 6px 0 var(--acc);background:#6C8AFF}
[data-theme=brutal] .btn.primary:active{box-shadow:0 0 0 var(--acc)}
[data-theme=brutal] .btn.primary::after{display:none}
[data-theme=brutal] .btn.danger{background:rgba(255,110,97,.14);color:var(--danger);border-color:var(--danger)}
[data-theme=brutal] .btn.ghost{background:transparent;box-shadow:none}
[data-theme=brutal] .ibtn:hover{background:var(--s3)}
[data-theme=brutal] .fab,[data-theme=brutal] .sfab,[data-theme=brutal] .act.pri{background:var(--acc);color:#111;border:2px solid #000;box-shadow:4px 4px 0 #000;border-radius:10px}
[data-theme=brutal] .act.pri span{color:#111}
[data-theme=brutal] .avcam{background:var(--acc);color:#111;border:2px solid #000;box-shadow:2px 2px 0 #000}
[data-theme=brutal] .add-ic,[data-theme=brutal] .sc-plus{background:var(--acc);color:#111;box-shadow:3px 3px 0 #000;border:2px solid #000}

/* input & saklar */
[data-theme=brutal] .inp{background:var(--bg2);border:2px solid var(--ink);border-radius:var(--r);color:var(--tx)}
[data-theme=brutal] .inp:focus,[data-theme=brutal] .csearch:focus-within{border-color:var(--acc);box-shadow:4px 4px 0 var(--acc);outline:0}
[data-theme=brutal] .switch{background:var(--bg2);border:2px solid var(--ink);border-radius:8px;width:50px}
[data-theme=brutal] .switch::after{border-radius:4px;background:var(--ink);top:3px}
[data-theme=brutal] .switch[aria-checked=true]{background:var(--acc);border-color:#000}
[data-theme=brutal] .switch[aria-checked=true]::after{left:27px;background:#111}
[data-theme=brutal] .seg{border:2px solid var(--ink);border-radius:var(--r);background:var(--bg2)}
[data-theme=brutal] .seg-ind{background:var(--acc);border-radius:5px;box-shadow:none}[data-theme=brutal] .seg button[aria-selected=true]{color:#111}

/* navigasi */
[data-theme=brutal] .bottom{background:var(--bg2);backdrop-filter:none;border-top:3px solid var(--ink)}
[data-theme=brutal] .bottom::after{content:"";position:absolute;left:0;right:0;top:-10px;height:6px;background:repeating-linear-gradient(135deg,var(--acc) 0 8px,#000 8px 16px);opacity:.9;pointer-events:none}
[data-theme=brutal] .side{background:var(--bg2);border-right:3px solid var(--ink)}
[data-theme=brutal] .bottom a,[data-theme=brutal] .side a{font-weight:700}
[data-theme=brutal] .bottom a.on,[data-theme=brutal] .side a.on{background:var(--acc);color:#111;border:2px solid #000;border-radius:10px;box-shadow:3px 3px 0 #000;transform:translateY(-3px);animation:none}
[data-theme=brutal] .side a.on{transform:none;box-shadow:3px 3px 0 #000}
[data-theme=brutal] .bottom a.on{margin:4px 6px;padding:6px 0 5px}
[data-theme=brutal] .bottom a.on::before{display:none}
[data-theme=brutal] .bottom a.on .ic,[data-theme=brutal] .side a.on .ic{filter:none}
[data-theme=brutal] .side a:hover{background:var(--s2)}
[data-theme=brutal] .pane-head,[data-theme=brutal] .thead,[data-theme=brutal] .composer,[data-theme=brutal] .chv .thead.chh{background:var(--bg2);border-color:var(--ink);backdrop-filter:none}
[data-theme=brutal] .thead,[data-theme=brutal] .chv .thead.chh{border-bottom:3px solid var(--ink)}[data-theme=brutal] .composer{border-top:3px solid var(--ink)}
[data-theme=brutal] .conv-pane{background:var(--bg);border-right:3px solid var(--ink)}
[data-theme=brutal] .thread-pane{background:var(--bg2)}
[data-theme=brutal] .tab{border:2px solid var(--bd);font-weight:700;border-radius:8px}
[data-theme=brutal] .tab[aria-selected=true]{background:var(--acc);color:#111;border-color:#000;box-shadow:3px 3px 0 #000}

/* daftar & chat */
[data-theme=brutal] .item{border-radius:var(--r);border:2px solid transparent}
[data-theme=brutal] .item:hover,[data-theme=brutal] .item.on{background:var(--s2);border-color:var(--ink)}
[data-theme=brutal] .unread,[data-theme=brutal] .badge-n,[data-theme=brutal] .pill-new{background:var(--acc);color:#111;border:2px solid #000;box-shadow:2px 2px 0 #000}
[data-theme=brutal] .msg,[data-theme=brutal] .post{border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 #000;color:var(--tx)}
[data-theme=brutal] .msg.in,[data-theme=brutal] .post{background:var(--s2)}
[data-theme=brutal] .msg.out,[data-theme=brutal] .post.out{background:var(--blue);color:#fff;border-color:var(--ink)}
[data-theme=brutal] .msg .meta,[data-theme=brutal] .post footer{color:rgba(255,255,255,.7)}
[data-theme=brutal] .msg.in .meta{color:var(--tx3)}
[data-theme=brutal] .msg.out .tick,[data-theme=brutal] .msg.out .tick.read{color:#fff}[data-theme=brutal] .msg.out .tick.read{color:var(--acc)}
[data-theme=brutal] .msg.gone,[data-theme=brutal] .post.gone{box-shadow:none;border-style:dashed;background:transparent}
[data-theme=brutal] .msg .who{color:var(--acc);font-weight:800}
[data-theme=brutal] .day{background:var(--s3);color:var(--tx);border:2px solid var(--bd);border-radius:6px;font-weight:700}
[data-theme=brutal] .sq{background:var(--bg2);border:2px solid var(--bd);border-left:6px solid var(--acc);border-radius:6px}
[data-theme=brutal] .live,[data-theme=brutal] .pl,[data-theme=brutal] .pill{border:2px solid var(--bd);border-radius:6px}
[data-theme=brutal] .vbadge{filter:none}
[data-theme=brutal] .av{border:2px solid var(--ink);background:var(--s3)}
[data-theme=brutal] .ring{background:var(--acc)}[data-theme=brutal] .ring .av{border-color:#000}
[data-theme=brutal] .stat b,[data-theme=brutal] .chp-stats b{background:none;color:var(--acc);-webkit-text-fill-color:currentColor}
[data-theme=brutal] .stat::before{background:var(--acc)}

/* modal, toast, dropdown */
[data-theme=brutal] .modal-back{background:rgba(5,4,8,.72);backdrop-filter:none}
[data-theme=brutal] .modal{animation:modalpop .28s steps(5) both}
@keyframes modalpop{from{opacity:0;transform:translate(-12px,12px)}}
[data-theme=brutal] .modal-h{border-bottom:2px solid var(--bd)}
[data-theme=brutal] .toast{background:var(--s2);animation:toastpop .3s steps(5) both}
@keyframes toastpop{from{opacity:0;transform:translateY(14px) rotate(-1deg)}}
[data-theme=brutal] .toast.success{border-color:var(--ok);box-shadow:5px 5px 0 var(--ok)}[data-theme=brutal] .toast.error{border-color:var(--danger);box-shadow:5px 5px 0 var(--danger)}
[data-theme=brutal] .dd-back.m{background:rgba(5,4,8,.72);backdrop-filter:none}
[data-theme=brutal] .dd-pop{background:var(--s1);border-radius:10px}
[data-theme=brutal] .dd-o{font-weight:700;border-radius:6px}[data-theme=brutal] .dd-o:hover,[data-theme=brutal] .dd-o:focus-visible{background:var(--s3)}
[data-theme=brutal] .dd-o[aria-selected=true]{background:var(--acc);color:#111}[data-theme=brutal] .dd-o .dd-c,[data-theme=brutal] .dd-o[aria-selected=true] .dd-c{color:#111;background:none}
[data-theme=brutal] .dd-pop.sheet{border-radius:14px 14px 0 0;box-shadow:0 -6px 0 #000}[data-theme=brutal] .dd-grip{background:var(--ink)}
[data-theme=brutal] .dd-btn[aria-expanded=true]{border-color:var(--acc);box-shadow:4px 4px 0 var(--acc)}

/* profil: banner, avatar, layar profil */
[data-theme=brutal] .cover{border-radius:6px 6px 0 0;border-bottom:3px solid var(--ink);background:repeating-linear-gradient(135deg,#4767F0 0 16px,#5575FF 16px 32px)}
[data-theme=brutal] .cover-fx{display:none}
[data-theme=brutal] .cover.has::after{display:none}
[data-theme=brutal] .cover-act .ibtn{background:var(--acc);color:#111;border:2px solid #000;border-radius:8px;box-shadow:2px 2px 0 #000;backdrop-filter:none}
[data-theme=brutal] .cover-add{background:var(--acc);color:#111;border:2px solid #000;border-radius:8px;box-shadow:4px 4px 0 #000;backdrop-filter:none;font-weight:800}
[data-theme=brutal] .cover-add:hover{transform:translate(-50%,-50%) translate(-2px,-2px);box-shadow:6px 6px 0 #000;background:#FFD25E}
[data-theme=brutal] .pcard .avw::before{inset:auto;left:7px;top:7px;width:100%;height:100%;border-radius:50%;background:#000;filter:none;opacity:1;animation:none}
[data-theme=brutal] .pcard .avw .av{border:3px solid var(--ink);box-shadow:none}
[data-theme=brutal] .pcard .pid{color:var(--acc);font-weight:700}
[data-theme=brutal] .ps-bg{opacity:1;filter:none;background:var(--blue);background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.14) 0 14px,transparent 14px 28px)}
[data-theme=brutal] .ps-fade{background:linear-gradient(180deg,transparent 60%,var(--bg))}
[data-theme=brutal] .ps-banner::after{background:linear-gradient(180deg,transparent 60%,var(--bg))}
[data-theme=brutal] .ps-av{background:var(--acc);box-shadow:6px 6px 0 #000;border:2px solid #000}[data-theme=brutal] .ps-av .av{border-color:#000}
[data-theme=brutal] .ps-top .ibtn{background:var(--acc);color:#111;border:2px solid #000;border-radius:8px;box-shadow:3px 3px 0 #000;backdrop-filter:none}
[data-theme=brutal] .ps-card h3,[data-theme=brutal] .chp-box h3{color:var(--acc)}
[data-theme=brutal] .qa span{background:var(--s2);border:2px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 #000}
[data-theme=brutal] .qa:hover span{background:var(--acc);color:#111;border-color:#000;transform:translate(-2px,-2px);box-shadow:5px 5px 0 #000}
[data-theme=brutal] .chip.live{color:var(--ok)}
[data-theme=brutal] .ps-d:hover{background:rgba(255,110,97,.12)}
[data-theme=brutal] .pscreen{animation-timing-function:steps(6)}
[data-theme=brutal] .inv-banner{background:var(--blue);background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.14) 0 14px,transparent 14px 28px);border-bottom:3px solid var(--ink)}[data-theme=brutal] .inv-banner::after{display:none}
[data-theme=brutal] .inv-av{border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 #000;background:var(--acc)}[data-theme=brutal] .inv-av b{color:#111;text-shadow:none}
[data-theme=brutal] .inv-stats span,[data-theme=brutal] .inv-desc{background:var(--bg2);border:2px solid var(--bd);border-radius:6px}
[data-theme=brutal] .chp-cover{background:repeating-linear-gradient(135deg,#4767F0 0 16px,#5575FF 16px 32px);border-bottom:3px solid var(--ink)}
[data-theme=brutal] .chav{border-radius:12px;box-shadow:inset 0 0 0 2px #000,3px 3px 0 #000}
[data-theme=brutal] .skel-list i,[data-theme=brutal] .sk-b{border-radius:8px;border:2px solid var(--bd)}

/* pemilih tema */
[data-theme=brutal] .tcard{background:var(--s1);border:2px solid var(--bd);border-radius:12px;box-shadow:5px 5px 0 #000;transition:transform .14s steps(3),box-shadow .14s steps(3),border-color .14s}
[data-theme=brutal] .tcard:hover{transform:translate(-2px,-2px);border-color:var(--ink);box-shadow:7px 7px 0 #000}
[data-theme=brutal] .tcard[aria-checked=true]{background:var(--s2);border:2px solid var(--acc);box-shadow:7px 7px 0 var(--acc)}
[data-theme=brutal] .tchk{background:var(--acc);color:#111;border:2px solid #000;border-radius:6px}
[data-theme=brutal] .tmeta small{color:var(--tx2)}[data-theme=brutal] .tdots i{border-color:var(--s1)}

/* =====================================================================
   TEMA GLASSMORPHISM — kaca gelap buram di atas aurora yang bergerak pelan
   Panel diwarnai gelap (bukan putih) supaya teks nyaman dibaca dan tidak silau.
   ===================================================================== */
:root[data-theme=glass]{--bg:#080B16;--bg2:#0C1122;--s1:rgba(255,255,255,.045);--s2:rgba(255,255,255,.07);--s3:rgba(255,255,255,.105);--bd:rgba(255,255,255,.10);--bda:#7C9DFF;--tx:#E8ECF8;--tx2:#AEB8D6;--tx3:#7E8AAD;--blue:#4F6BFF;--neon:#8DB0FF;--cyan:#7DDCF2;--silver:#DCE2F4;--white:#F3F6FF;--ok:#4FD6A5;--danger:#FF7088;--grad:linear-gradient(120deg,#4F6BFF 0%,#7B5CFF 60%,#3FB4E6 100%);--glass:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.028));--enter:blurin;color-scheme:dark}
[data-theme=glass] body{background:var(--bg)}
[data-theme=glass] body::before{inset:-30%;background:radial-gradient(34% 30% at 20% 18%,rgba(79,107,255,.30),transparent 70%),radial-gradient(30% 28% at 82% 14%,rgba(139,92,246,.24),transparent 70%),radial-gradient(34% 30% at 70% 86%,rgba(34,190,220,.17),transparent 70%),radial-gradient(26% 24% at 14% 82%,rgba(236,72,153,.11),transparent 70%);animation:aurora 26s ease-in-out infinite alternate;will-change:transform}
@keyframes aurora{0%{transform:translate3d(0,0,0) rotate(0) scale(1)}50%{transform:translate3d(3%,-2%,0) rotate(3deg) scale(1.07)}100%{transform:translate3d(-3%,3%,0) rotate(-3deg) scale(1.12)}}
[data-theme=glass] ::selection{background:rgba(125,157,255,.4)}

/* panel besar: kaca dengan blur */
[data-theme=glass] .pcard,[data-theme=glass] .modal,[data-theme=glass] .jcard,[data-theme=glass] .inv,[data-theme=glass] .ps-card,[data-theme=glass] .chp-box,[data-theme=glass] .toast,[data-theme=glass] .dd-pop,[data-theme=glass] .stat{background:var(--glass);border:1px solid var(--bd);border-radius:20px;-webkit-backdrop-filter:blur(20px) saturate(135%);backdrop-filter:blur(20px) saturate(135%);box-shadow:0 18px 44px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09)}
[data-theme=glass] .modal{background:linear-gradient(160deg,rgba(28,36,66,.82),rgba(14,19,38,.88));border-radius:22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme=glass] .dd-pop{background:linear-gradient(160deg,rgba(28,36,66,.86),rgba(14,19,38,.9))}
/* baris & kartu kecil: gradien kaca tanpa blur (hemat tenaga di HP) */
[data-theme=glass] .card,[data-theme=glass] .setrow,[data-theme=glass] .opt,[data-theme=glass] .sysmsg,[data-theme=glass] .csearch,[data-theme=glass] .acard,[data-theme=glass] .ccard,[data-theme=glass] .crow,[data-theme=glass] .chp-stats>div,[data-theme=glass] .act,[data-theme=glass] .chip,[data-theme=glass] .alert,[data-theme=glass] .cempty,[data-theme=glass] .tbl,[data-theme=glass] .inp{background:var(--glass);border:1px solid var(--bd);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
[data-theme=glass] .setrow{box-shadow:0 8px 24px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);position:relative;overflow:hidden}
[data-theme=glass] .setrow::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%);transform:translateX(-120%);transition:none}
[data-theme=glass] .setrow:hover{border-color:rgba(141,176,255,.45);transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(79,107,255,.55),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme=glass] .setrow:hover::after{animation:glint .9s ease}
@keyframes glint{to{transform:translateX(120%)}}
[data-theme=glass] .setrow.danger{background:linear-gradient(160deg,rgba(255,112,136,.12),rgba(255,112,136,.04));border-color:rgba(255,112,136,.3)}
[data-theme=glass] .setrow .ic:first-child{color:var(--neon)}[data-theme=glass] .setrow.danger .ic:first-child{color:var(--danger)}
[data-theme=glass] .inp:focus,[data-theme=glass] .csearch:focus-within{border-color:rgba(141,176,255,.6);box-shadow:0 0 0 3px rgba(79,107,255,.22)}
[data-theme=glass] .pcard{position:relative}
[data-theme=glass] .pcard::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(135deg,rgba(141,176,255,.6),rgba(255,255,255,.04) 42%,rgba(176,124,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
[data-theme=glass] .sec{color:var(--tx3);letter-spacing:.14em}

/* tombol */
[data-theme=glass] .btn{background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme=glass] .btn:hover{border-color:rgba(141,176,255,.5);background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.06))}
[data-theme=glass] .btn.primary,[data-theme=glass] .send,[data-theme=glass] .fab,[data-theme=glass] .sfab{background:var(--grad);border:1px solid rgba(255,255,255,.24);box-shadow:0 10px 30px -10px rgba(99,102,241,.7),inset 0 1px 0 rgba(255,255,255,.25)}
[data-theme=glass] .btn.danger{background:rgba(255,112,136,.12);border-color:rgba(255,112,136,.4)}
[data-theme=glass] .btn.ghost{background:transparent;box-shadow:none}
[data-theme=glass] .switch{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
[data-theme=glass] .switch[aria-checked=true]{background:var(--grad);border-color:rgba(255,255,255,.3);box-shadow:0 0 14px -2px rgba(99,102,241,.8)}
[data-theme=glass] .seg-ind{background:var(--grad)}
[data-theme=glass] .tab[aria-selected=true]{background:rgba(255,255,255,.11);border-color:rgba(141,176,255,.5)}

/* navigasi & chat */
[data-theme=glass] .bottom,[data-theme=glass] .side,[data-theme=glass] .pane-head,[data-theme=glass] .thead,[data-theme=glass] .composer,[data-theme=glass] .chv .thead.chh{background:rgba(10,14,28,.62);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);border-color:rgba(255,255,255,.08)}
[data-theme=glass] .conv-pane{background:rgba(8,11,22,.35);border-right-color:rgba(255,255,255,.08)}
[data-theme=glass] .thread-pane{background:transparent}
[data-theme=glass] .bottom a.on::before{background:var(--grad);box-shadow:0 0 14px rgba(125,157,255,.9)}
[data-theme=glass] .side a.on{background:rgba(255,255,255,.08);box-shadow:inset 3px 0 0 #8DB0FF,0 0 24px -8px rgba(79,107,255,.8);border-radius:14px}
[data-theme=glass] .item:hover,[data-theme=glass] .item.on{background:rgba(255,255,255,.07)}
[data-theme=glass] .msg.in,[data-theme=glass] .post{background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.1)}
[data-theme=glass] .msg.out,[data-theme=glass] .post.out{background:linear-gradient(135deg,rgba(79,107,255,.78),rgba(123,92,255,.62));border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 26px -14px rgba(99,102,241,.8)}
[data-theme=glass] .sq{background:rgba(0,0,0,.25);border-left-color:#8DB0FF}
[data-theme=glass] .day{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
[data-theme=glass] .unread,[data-theme=glass] .badge-n,[data-theme=glass] .pill-new{background:var(--grad)}
[data-theme=glass] .modal-back{background:rgba(4,6,14,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
[data-theme=glass] .modal{animation:glassin .4s cubic-bezier(.2,.9,.3,1) both}
@keyframes glassin{from{opacity:0;transform:translateY(18px) scale(.97);filter:blur(8px)}}
[data-theme=glass] .dd-o:hover,[data-theme=glass] .dd-o:focus-visible{background:rgba(255,255,255,.09)}
[data-theme=glass] .dd-o[aria-selected=true]{background:linear-gradient(90deg,rgba(79,107,255,.3),rgba(123,92,255,.12))}
[data-theme=glass] .av{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08)}
[data-theme=glass] .vbadge{filter:drop-shadow(0 0 5px rgba(79,107,255,.6))}
[data-theme=glass] .stat b,[data-theme=glass] .chp-stats b{background:var(--grad);-webkit-background-clip:text;background-clip:text}

/* profil */
[data-theme=glass] .cover{border-radius:19px 19px 0 0;background:linear-gradient(120deg,#1B2A66,#4B33A8 55%,#1E7FB8);background-size:200% 200%;animation:gradshift 14s ease-in-out infinite alternate}
@keyframes gradshift{to{background-position:100% 100%}}
[data-theme=glass] .cover-fx{background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%)}
[data-theme=glass] .cover-add{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
[data-theme=glass] .pcard .avw::before{background:conic-gradient(from 0deg,#4F6BFF,#7B5CFF,#3FB4E6,#EC4899,#4F6BFF);opacity:.55;filter:blur(13px)}
[data-theme=glass] .pcard .avw .av{border:3px solid rgba(255,255,255,.35);box-shadow:0 0 0 4px rgba(12,17,34,.8)}
[data-theme=glass] .pcard .avcam{border-color:#0C1122}
[data-theme=glass] .ps-bg{opacity:.5}
[data-theme=glass] .ps-av{background:conic-gradient(from 0deg,#4F6BFF,#7B5CFF,#3FB4E6,#4F6BFF);box-shadow:0 14px 50px -8px rgba(99,102,241,.6)}
[data-theme=glass] .qa span{background:var(--glass);border:1px solid var(--bd);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
[data-theme=glass] .qa:hover span{background:var(--grad);border-color:rgba(255,255,255,.3)}
[data-theme=glass] .ps-card h3,[data-theme=glass] .chp-box h3{color:var(--cyan)}
[data-theme=glass] .inv-banner{background:radial-gradient(circle at 20% 30%,rgba(79,107,255,.75),transparent 60%),radial-gradient(circle at 85% 70%,rgba(123,92,255,.65),transparent 60%),#10173A}
[data-theme=glass] .inv-stats span,[data-theme=glass] .inv-desc{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
[data-theme=glass] .crop-stage{border-color:rgba(255,255,255,.18)}

/* pemilih tema */
[data-theme=glass] .tcard{background:var(--glass);border:1px solid var(--bd);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
[data-theme=glass] .tcard:hover{border-color:rgba(141,176,255,.45);box-shadow:0 18px 40px -20px rgba(79,107,255,.6),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme=glass] .tcard[aria-checked=true]{background:linear-gradient(160deg,rgba(79,107,255,.2),rgba(123,92,255,.08));border:1px solid rgba(141,176,255,.7);box-shadow:0 18px 44px -18px rgba(99,102,241,.7),inset 0 1px 0 rgba(255,255,255,.14)}
[data-theme=glass] .tchk{background:var(--grad)}


/* =====================================================================
   PRATINJAU TEMA (kartu pemilih; palet tetap, tidak ikut tema aktif)
   ===================================================================== */
.th-brutal .tphone{background:#18171E;border:2px solid #E8E0CC;box-shadow:4px 4px 0 #FFC53D;background-image:radial-gradient(rgba(241,236,221,.12) 1.2px,transparent 1.5px);background-size:12px 12px}
.th-brutal .tav{background:#FFC53D;border:2px solid #000;border-radius:5px}.th-brutal .tl{background:#E8E0CC;border-radius:2px}
.th-brutal .tbar{border-bottom:2px solid #E8E0CC;background:#121117;margin:-10px -10px 0;padding:8px 10px}
.th-brutal .tb,.th-brutal .tin i,.th-brutal .tin b{border:2px solid #000;box-shadow:2px 2px 0 #000;border-radius:5px}
.th-brutal .tb.in{background:#2D2A39;border-color:#4B4760}.th-brutal .tb.out{background:#5B7BFF;border-color:#E8E0CC}
.th-brutal .tin i{background:#23212C;border-color:#4B4760}.th-brutal .tin b{background:#FFC53D;border-radius:5px}
.th-brutal .tdots i:nth-child(1){background:#18171E}.th-brutal .tdots i:nth-child(2){background:#FFC53D}.th-brutal .tdots i:nth-child(3){background:#5B7BFF}.th-brutal .tdots i:nth-child(4){background:#E8E0CC}
.th-brutal:hover .tb.out{animation:tbpop .5s steps(5) both}.th-brutal:hover .tb.in{animation:tbpop .5s steps(5) .1s both}
@keyframes tbpop{50%{transform:translate(3px,-3px)}}
.th-glass .tphone{background:radial-gradient(90px 90px at 15% 20%,rgba(79,107,255,.75),transparent 70%),radial-gradient(100px 100px at 90% 30%,rgba(139,92,246,.6),transparent 70%),radial-gradient(100px 100px at 50% 110%,rgba(34,190,220,.5),transparent 70%),#080B16}
.th-glass .tav,.th-glass .tl,.th-glass .tb,.th-glass .tin i{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.th-glass .tb.out{background:linear-gradient(135deg,rgba(79,107,255,.8),rgba(123,92,255,.65))}.th-glass .tin b{background:linear-gradient(135deg,#4F6BFF,#3FB4E6)}
.th-glass .tdots i:nth-child(1){background:#4F6BFF}.th-glass .tdots i:nth-child(2){background:#7B5CFF}.th-glass .tdots i:nth-child(3){background:#3FB4E6}.th-glass .tdots i:nth-child(4){background:rgba(255,255,255,.7)}
.th-glass .tphone::before{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(40% 40% at 30% 30%,rgba(236,72,153,.35),transparent 70%);animation:aurora 9s ease-in-out infinite alternate}
.th-orvix .tphone::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(50,217,255,.14),transparent);transform:translateY(-100%);animation:scan 4.5s ease-in-out infinite}
@keyframes scan{to{transform:translateY(260%)}}

/* ================= Profil v2: modern & profesional ================= */
/* Centang biru: ikut ukuran teks (responsif), sejajar, dan bisa diketuk */
.nm>.vbadge,.nm>.vb-t{width:1.12em;height:1.12em;flex:none;vertical-align:-.18em;margin-left:.28em}
.nm>.vb-t>.vbadge{width:100%;height:100%;margin:0;pointer-events:none}
.vb-t{position:relative;display:inline-grid;place-items:center;border-radius:50%;cursor:pointer;transition:transform .18s cubic-bezier(.2,.9,.3,1.4),filter .18s}
.vb-t::after{content:"";position:absolute;inset:-10px}   /* area sentuh min. ~44px walau ikon kecil */
.vb-t:hover{transform:scale(1.12)}.vb-t:active{transform:scale(.86)}
.vb-t:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.vinfo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:6px 6px 14px}
.vinfo-ic{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,rgba(0,168,255,.22),transparent 70%);animation:vpop .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes vpop{from{transform:scale(.6);opacity:0}}

/* Layar profil */
.ps-hero{display:block;width:min(100%,760px);margin:0 auto;padding:0!important;overflow:visible;text-align:center;isolation:auto}
.ps-cover{position:relative;aspect-ratio:3/1;min-height:calc(148px + var(--st));max-height:300px;overflow:hidden;background:linear-gradient(120deg,#05070B 0%,#0a2a6b 55%,#1769FF 100%);isolation:isolate}
.ps-cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 42%)}   /* hanya melindungi tombol kembali, bagian bawah banner tetap jelas */
.ps-cover.has{cursor:zoom-in}
.ps-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .6s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.ps-cover img.in{opacity:1;transform:none}
.ps-cover .ps-bg{inset:-20px;opacity:.7}
.ps-id{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:0 18px 6px;margin-top:-62px}
.ps-av{box-shadow:0 0 0 5px var(--bg),0 12px 34px rgba(0,120,255,.35);transition:transform .2s}
.ps-av.has:active{transform:scale(.97)}
.ps-hero h1{display:block;max-width:100%;font-size:clamp(22px,6.4vw,28px);margin:14px 0 2px;line-height:1.2}
.ps-hero h1 .nm{display:inline-flex;align-items:center;justify-content:center;max-width:100%;word-break:break-word}
.ps-user{color:var(--tx2);font-size:0.9375rem}
.ps-chips{margin-top:14px}
.ps-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;width:min(100%,560px);margin-top:20px}
.qa{min-width:0;padding:14px 8px 12px;border-radius:18px;background:var(--s1);border:1px solid var(--bd);gap:8px;transition:transform .15s,border-color .15s,background .15s}
.qa span{width:42px;height:42px;background:rgba(23,105,255,.16);border:0;color:var(--cyan)}
.qa:hover,.qa:focus-visible{border-color:var(--bda)}.qa:active{transform:scale(.97)}
.qa:hover span,.qa:focus-visible span{transform:none}
.qa small{font-weight:600;color:var(--tx);line-height:1.2}
.ps-card{margin-top:14px;border-radius:22px;box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
.ps-card h3{display:flex;align-items:center;gap:8px}
.ps-card h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bd),transparent)}
.ps-row{align-items:center}.ps-row b{font-weight:600;text-align:right;word-break:break-word}
.ps-k{display:inline-flex;align-items:center;gap:10px}.ps-k .ic{color:var(--tx3)}
@media(min-width:800px){.ps-cover{border-radius:0 0 28px 28px}.ps-id{margin-top:-70px}}
@media(prefers-reduced-motion:reduce){.vb-t,.vinfo-ic,.ps-cover img{animation:none;transition:none}}

/* Profil sendiri */
.pcard h2{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
.pcard h2 .nm{display:inline-flex;align-items:center;max-width:100%;word-break:break-word}
.pcard{overflow:hidden;box-shadow:0 14px 40px -22px rgba(0,0,0,.8)}
.cover.has::after{background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 38%)}

/* Tema */
[data-theme=brutal] .ps-cover{border-bottom:3px solid var(--ink);background:repeating-linear-gradient(135deg,#4767F0 0 16px,#5575FF 16px 32px)}
[data-theme=brutal] .ps-cover::after{background:none}
[data-theme=brutal] .ps-av{box-shadow:6px 6px 0 #000}
[data-theme=brutal] .qa{border:2px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 #000}
[data-theme=brutal] .qa span{background:var(--acc);color:#111;border:2px solid #000;border-radius:10px}
[data-theme=brutal] .qa:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #000}
[data-theme=glass] .ps-cover{background:linear-gradient(120deg,#1B2A66,#4B33A8 55%,#1E7FB8)}
[data-theme=glass] .qa{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ===== Perbaikan responsif: tinggi banner tidak lagi memaksa lebar (aspect-ratio + min-height) ===== */
.pscreen{overflow:hidden;max-width:100vw}
.ps-scroll{overflow-x:hidden;min-width:0}
.ps-hero{min-width:0;max-width:100%;overflow-x:clip}
.ps-cover{aspect-ratio:auto;min-height:0;max-height:none;width:100%;height:clamp(132px,calc(min(100vw,760px)/3),260px)}
.ps-id{min-width:0;max-width:100%}
.ps-card{width:calc(100% - 28px);max-width:640px;min-width:0}
.ps-quick{max-width:100%}
.ps-chips{max-width:100%}
.ps-row b{min-width:0}
/* Profil sendiri */
.pcard{min-width:0;max-width:100%}
.cover{aspect-ratio:auto;min-height:0;width:100%;height:clamp(112px,calc(min(100vw,720px)/3),240px)}
@media(min-width:800px){.ps-cover{border-radius:0 0 28px 28px}}

/* ===== Sistem badge ===== */
.bset{display:inline-flex;align-items:center;gap:.2em;margin-left:.3em;flex:none;vertical-align:-.2em}
.bset:empty{display:none}
.bset .vbadge{width:1.12em;height:1.12em;display:block;filter:drop-shadow(0 0 3px rgba(0,0,0,.35))}
.bset .vb-t,.bset .vb-s{width:1.12em;height:1.12em;flex:none;margin:0;display:inline-grid;place-items:center}
.vb-t>.vbadge,.vb-s>.vbadge{pointer-events:none}
.ps-hero h1 .bset{margin-left:.35em}.ps-hero h1 .bset .vb-t{width:1.05em;height:1.05em}
.vinfo-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;font-weight:700;font-size:0.875rem;color:var(--bc);background:color-mix(in srgb,var(--bc) 16%,transparent);border:1px solid color-mix(in srgb,var(--bc) 45%,transparent)}
.vinfo-tag i{width:9px;height:9px;border-radius:50%;background:var(--bc)}
.vinfo-ic{background:radial-gradient(circle,color-mix(in srgb,var(--bc) 28%,transparent),transparent 70%)}
.vinfo-x{color:var(--bc);font-weight:600;font-size:0.875rem}
[data-theme=brutal] .vinfo-tag{border:2px solid #000;border-radius:8px;box-shadow:3px 3px 0 #000;background:var(--s2)}

/* ================= Palet kalem & natural (menimpa warna terang sebelumnya) ================= */
:root{--bg:#0D1114;--bg2:#11161A;--s1:#161C21;--s2:#1C242A;--s3:#242E36;--bd:#2D3943;--bda:#6C93BF;--tx:#E6EBEF;--tx2:#9AA7B2;--tx3:#6D7B87;--blue:#4C7BB0;--neon:#78A2CC;--cyan:#8FBFCB;--silver:#CBD4DC;--white:#F1F4F6;--danger:#D9707C;--ok:#6FB89A;--grad:linear-gradient(115deg,#4C7BB0 0%,#5E93B8 55%,#7FB3C2 100%)}
:root:not([data-theme]) body::before{background:radial-gradient(38% 34% at 16% 10%,rgba(76,123,176,.10),transparent 70%),radial-gradient(34% 30% at 88% 90%,rgba(127,179,194,.06),transparent 70%),radial-gradient(26% 24% at 80% 12%,rgba(130,120,170,.04),transparent 70%)}
.inp:focus,.dd-btn[aria-expanded=true],.csearch:focus-within{box-shadow:0 0 0 3px rgba(108,147,191,.18)}
.scard:hover,.acard:hover,.crow:hover,.ccard:hover{box-shadow:0 12px 28px -20px rgba(0,0,0,.8)}
:root:not([data-theme]) .setrow:hover{box-shadow:0 12px 28px -20px rgba(0,0,0,.8)}
.qa span,.drop:hover,.vis button[aria-checked=true]{background:rgba(108,147,191,.14)}
.pl.pri{background:rgba(108,147,191,.14);border-color:rgba(108,147,191,.4)}
.ps-av{box-shadow:0 0 0 5px var(--bg),0 12px 30px rgba(0,0,0,.45)}
.ps-cover{background:linear-gradient(120deg,#0F161C 0%,#233447 55%,#3C5B78 100%)}
.inv-perks li>span,.inv-sico{background:rgba(143,191,203,.09);border-color:rgba(143,191,203,.24)}

/* Brutal: arang hangat + emas pasir (bukan kuning terang) */
:root[data-theme=brutal]{--bg:#1A1917;--bg2:#141311;--s1:#23211E;--s2:#2C2926;--s3:#36322E;--bd:#4A453E;--bda:#C9A86A;--ink:#D9D2C2;--sh:#0A0908;--acc:#C9A86A;--tx:#ECE6D8;--tx2:#B9B2A2;--tx3:#8A8478;--blue:#6F86B8;--neon:#C9A86A;--cyan:#C9A86A;--silver:#ECE6D8;--white:#F6F1E4;--danger:#D9776B;--ok:#78B596;--grad:#6F86B8}
[data-theme=brutal] .ps-cover{background:repeating-linear-gradient(135deg,#34415F 0 16px,#3B4A6B 16px 32px)}

/* Glass: aurora diredam, nuansa biru keabu-abuan */
:root[data-theme=glass]{--bg:#0B1015;--bg2:#0F151B;--bda:#8FA6C8;--tx:#E6EAF1;--tx2:#A5B0C3;--tx3:#78849A;--blue:#5A74A8;--neon:#9DB4D4;--cyan:#93C3CE;--silver:#D3DAE6;--white:#F1F4F9;--ok:#78BFA1;--danger:#D9798A;--grad:linear-gradient(120deg,#5A74A8 0%,#7466A0 60%,#5499AE 100%)}
[data-theme=glass] body::before{background:radial-gradient(34% 30% at 20% 18%,rgba(90,116,168,.15),transparent 70%),radial-gradient(30% 28% at 82% 14%,rgba(116,102,160,.11),transparent 70%),radial-gradient(34% 30% at 70% 86%,rgba(84,153,174,.09),transparent 70%)}
[data-theme=glass] .ps-cover{background:linear-gradient(120deg,#18222E,#2E3A52 55%,#3F5C6E)}

/* ================= Wallpaper chat ================= */
.msgs,.wp-prev,.wp-sw{background-color:var(--wp-bg,var(--bg));background-image:linear-gradient(rgba(var(--wp-ov,0,0,0),var(--wp-a,0)),rgba(var(--wp-ov,0,0,0),var(--wp-a,0))),var(--wp-img,none);background-size:auto,var(--wp-size,cover);background-position:0 0,center;background-repeat:repeat,var(--wp-rep,no-repeat)}
.wp-prev{display:flex;flex-direction:column;gap:8px;justify-content:center;min-height:150px;padding:16px;border-radius:16px;border:1px solid var(--bd);overflow:hidden;flex:none}
.wp-b{max-width:80%;padding:8px 12px;border-radius:12px;font-size:0.875rem;line-height:1.35}
.wp-b.in{align-self:flex-start;background:var(--s2);color:var(--tx)}.wp-b.out{align-self:flex-end;background:var(--blue);color:#fff}
.wp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;margin-top:14px}
.wp-t{display:flex;flex-direction:column;gap:6px;align-items:center;padding:6px;border-radius:14px;background:var(--s1);border:2px solid var(--bd);color:var(--tx2);cursor:pointer;min-width:0}
.wp-t[aria-checked=true]{border-color:var(--bda);color:var(--tx)}
.wp-sw{display:block;width:100%;aspect-ratio:3/4;border-radius:9px;border:1px solid var(--bd)}
.wp-t small{font-size:0.75rem;font-weight:600}
input[type=range]{accent-color:var(--bda);height:32px}

/* ================= Neo Brutalism terang (gaya AM Premify) ================= */
:root[data-theme=brutal]{--bg:#FFF6DC;--bg2:#FFEFC2;--s1:#FFFFFF;--s2:#FFF3C9;--s3:#FFE48F;--bd:#111111;--bda:#111111;--ink:#111111;--sh:#111111;--acc:#FFD43B;--tx:#111111;--tx2:#3D3A33;--tx3:#6B665A;--blue:#4DA3FF;--neon:#111111;--cyan:#111111;--silver:#111111;--white:#111111;--danger:#E5483B;--ok:#16A36A;--grad:#4DA3FF;--r:12px;color-scheme:light}
[data-theme=brutal] body{background-color:var(--bg);background-image:linear-gradient(rgba(17,17,17,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.07) 1px,transparent 1px);background-size:30px 30px;color:var(--tx)}
[data-theme=brutal] body::before{inset:0;animation:none;background-image:radial-gradient(circle at 10% 6%,rgba(255,143,177,.38) 0 80px,transparent 81px),radial-gradient(circle at 96% 34%,rgba(77,163,255,.30) 0 100px,transparent 101px),radial-gradient(circle at 4% 78%,rgba(123,224,160,.30) 0 90px,transparent 91px);background-size:auto}
[data-theme=brutal] .thead,[data-theme=brutal] .ps-top{background:var(--acc);border-bottom:3px solid #111;color:#111}
[data-theme=brutal] .side,[data-theme=brutal] .bottom{background:#fff;border-color:#111}
[data-theme=brutal] .bottom a,[data-theme=brutal] .side a{color:#111;font-weight:700}
[data-theme=brutal] .msg .meta,[data-theme=brutal] .post footer{color:var(--tx3)}
[data-theme=brutal] .msg.out .meta{color:rgba(255,255,255,.88)}
[data-theme=brutal] .msg.out{background:var(--blue);color:#111}
[data-theme=brutal] .btn.primary,[data-theme=brutal] .send{background:var(--blue);color:#111;box-shadow:4px 4px 0 #111}
[data-theme=brutal] .btn{background:#fff;color:#111}
[data-theme=brutal] .btn:hover{background:var(--s2)}
[data-theme=brutal] .btn.danger{background:#FFE1DD;color:#B3261E;border-color:#B3261E}
[data-theme=brutal] .setrow.danger{background:#FFE1DD}
[data-theme=brutal] .inp,[data-theme=brutal] input,[data-theme=brutal] textarea{background:#fff;color:#111;border:2px solid #111;border-radius:10px}
[data-theme=brutal] .inp:focus{box-shadow:4px 4px 0 #111;border-color:#111}
[data-theme=brutal] .modal,[data-theme=brutal] .dd-pop{background:#fff;color:#111;border:3px solid #111}
[data-theme=brutal] .sec,[data-theme=brutal] .ps-card h3,[data-theme=brutal] .tag,[data-theme=brutal] .pill,[data-theme=brutal] .chip{font-family:ui-monospace,"JetBrains Mono","Space Mono",Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
[data-theme=brutal] .chip,[data-theme=brutal] .pill{background:#fff;border:2px solid #111;box-shadow:2px 2px 0 #111;color:#111}
[data-theme=brutal] .chip.live i{background:var(--ok)}
[data-theme=brutal] .setrow .ic:first-child{color:#111}
[data-theme=brutal] .qa span{background:var(--acc)}
[data-theme=brutal] .qa:nth-child(2n) span{background:#FF8FB1}.qa:nth-child(3n) span{background:#7BE0A0}
[data-theme=brutal] .ps-av{background:var(--acc)}
[data-theme=brutal] .ps-cover{background:repeating-linear-gradient(135deg,#4DA3FF 0 16px,#6DB5FF 16px 32px);border-bottom:3px solid #111}
[data-theme=brutal] .ps-card h3::after{background:#111;height:2px}
[data-theme=brutal] .wp-t,[data-theme=brutal] .wp-prev{border:2px solid #111;box-shadow:3px 3px 0 #111}
[data-theme=brutal] .wp-t[aria-checked=true]{background:var(--acc);color:#111}
[data-theme=brutal] .wp-b{border:2px solid #111}
[data-theme=brutal] .wp-b.out{color:#111}
[data-theme=brutal] .vinfo-tag{background:#fff;color:#111}

/* ================= Tema v3: warna lebih hidup + animasi (menimpa palet kalem) ================= */
:root{--bg:#070B16;--bg2:#0B1222;--s1:#111A2E;--s2:#17223B;--s3:#1F2D4D;--bd:#27375C;--bda:#4F8CFF;--tx:#F2F5FC;--tx2:#A6B4CE;--tx3:#7586A8;--blue:#2F6BFF;--neon:#3EA8FF;--cyan:#4FD1E8;--silver:#D3DCEC;--white:#F6F8FD;--danger:#FF5C73;--ok:#3DD6A0;--grad:linear-gradient(115deg,#2F6BFF 0%,#6A5CFF 55%,#27C4E8 100%)}
:root:not([data-theme]) body::before{inset:-25%;background:radial-gradient(38% 34% at 16% 10%,rgba(47,107,255,.30),transparent 70%),radial-gradient(34% 30% at 88% 90%,rgba(39,196,232,.20),transparent 70%),radial-gradient(26% 24% at 80% 12%,rgba(106,92,255,.20),transparent 70%)}
:root:not([data-theme]) body::after{content:"";position:fixed;inset:-30%;z-index:-1;pointer-events:none;background:radial-gradient(22% 20% at 70% 32%,rgba(106,92,255,.18),transparent 70%),radial-gradient(24% 22% at 24% 82%,rgba(39,196,232,.14),transparent 70%)}
.inp:focus,.dd-btn[aria-expanded=true],.csearch:focus-within{box-shadow:0 0 0 3px rgba(79,140,255,.28)}
.scard:hover,.acard:hover,.crow:hover,.ccard:hover,:root:not([data-theme]) .setrow:hover{box-shadow:0 14px 34px -16px rgba(47,107,255,.55)}
.qa span,.drop:hover,.vis button[aria-checked=true]{background:rgba(79,140,255,.18)}
.pl.pri{background:rgba(79,140,255,.18);border-color:rgba(79,140,255,.5)}
.ps-av{box-shadow:0 0 0 5px var(--bg),0 14px 36px rgba(47,107,255,.45)}
.ps-cover{background:linear-gradient(120deg,#16225E 0%,#4338CA 55%,#1AA3D4 100%);background-size:200% 200%}
.inv-perks li>span,.inv-sico{background:rgba(79,209,232,.12);border-color:rgba(79,209,232,.35)}
:root[data-theme=glass]{--bg:#080B1C;--bg2:#0C1124;--bda:#8A9DFF;--tx:#EAEEFA;--tx2:#B0BADA;--tx3:#8290B4;--blue:#5B73FF;--neon:#8DB0FF;--cyan:#6FD8F0;--silver:#DCE2F4;--white:#F3F6FF;--ok:#4FD6A5;--danger:#FF7088;--grad:linear-gradient(120deg,#5B73FF 0%,#8B5CF6 60%,#3FB4E6 100%)}
[data-theme=glass] body::before{background:radial-gradient(34% 30% at 20% 18%,rgba(91,115,255,.34),transparent 70%),radial-gradient(30% 28% at 82% 14%,rgba(139,92,246,.28),transparent 70%),radial-gradient(34% 30% at 70% 86%,rgba(34,190,220,.20),transparent 70%),radial-gradient(26% 24% at 14% 82%,rgba(236,72,153,.13),transparent 70%)}
[data-theme=glass] .ps-cover{background:linear-gradient(120deg,#1E2A6E,#5B3FC4 55%,#2A8FC0);background-size:200% 200%}
/* Neo Brutalism: kuning, pink, biru dan hijau lebih pekat */
:root[data-theme=brutal]{--bg:#FFEFB0;--bg2:#FFE58A;--s1:#FFFFFF;--s2:#FFE27A;--s3:#FFD43B;--blue:#3D95FF;--danger:#E5352B;--ok:#0FA968}
[data-theme=brutal] body{background-image:linear-gradient(rgba(17,17,17,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.09) 1px,transparent 1px)}
[data-theme=brutal] body::before{background-image:radial-gradient(circle at 10% 8%,rgba(255,110,160,.6) 0 70px,transparent 71px),radial-gradient(circle at 94% 30%,rgba(61,149,255,.5) 0 90px,transparent 91px),radial-gradient(circle at 6% 80%,rgba(80,215,140,.5) 0 80px,transparent 81px)}
[data-theme=brutal] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#FF9F5A,#FF9F5A) 84% 8%/54px 54px no-repeat,linear-gradient(#7B5CFF,#7B5CFF) 8% 52%/36px 36px no-repeat,linear-gradient(#111,#111) 92% 72%/22px 22px no-repeat}
[data-theme=brutal] .ps-cover{background:repeating-linear-gradient(135deg,#3D95FF 0 16px,#63ADFF 16px 32px);background-size:auto}
[data-theme=brutal] .qa span{background:var(--acc)}
[data-theme=brutal] .qa:nth-child(2n) span{background:#FF7EAA}[data-theme=brutal] .qa:nth-child(3n) span{background:#5FDC97}

@keyframes ovup{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes ovflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes ovdrift{from{transform:translate3d(-3%,2%,0) rotate(0)}to{transform:translate3d(4%,-3%,0) rotate(8deg) scale(1.08)}}
@keyframes ovglow{50%{filter:drop-shadow(0 0 7px rgba(245,179,1,.95))}}
@keyframes ovping{0%{box-shadow:0 0 0 0 rgba(79,140,255,.6)}70%,100%{box-shadow:0 0 0 9px rgba(79,140,255,0)}}
@keyframes ovbob{50%{transform:translateY(-5px)}}
@keyframes ovwig{25%{transform:rotate(-1.6deg)}75%{transform:rotate(1.6deg)}}
@keyframes ovfloat{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(14px,-18px,0) rotate(6deg)}}
@keyframes ovstripe{to{background-position:22.63px 0}}
@keyframes ovbounce{40%{transform:translateY(-6px) scale(1.12)}}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-theme]) body::after{animation:ovdrift 34s ease-in-out infinite alternate;will-change:transform}
  [data-theme=brutal] body::before{animation:ovfloat 12s ease-in-out infinite alternate}
  [data-theme=brutal] body::after{animation:ovfloat 17s ease-in-out infinite alternate-reverse}
  .ps-cover{animation:ovflow 16s ease infinite}[data-theme=brutal] .ps-cover{animation:none}
  .ps-cover:not(.has)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.16) 50%,transparent 68%);transform:translateX(-100%);animation:sheen 5.5s ease-in-out infinite}
  .ps-card,.ps-quick .qa,.ps-chips>*,.wp-t,.pcard{animation:ovup .6s cubic-bezier(.2,.8,.2,1) backwards}
  .ps-quick .qa:nth-child(2){animation-delay:.07s}.ps-quick .qa:nth-child(3){animation-delay:.14s}.ps-quick .qa:nth-child(4){animation-delay:.21s}
  .ps-card:nth-of-type(1){animation-delay:.1s}.ps-card:nth-of-type(2){animation-delay:.18s}.ps-card:nth-of-type(3){animation-delay:.26s}
  .ps-av{position:relative;isolation:isolate}
  .ps-av::before{content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-1;background:conic-gradient(from 0deg,#4F8CFF,#8B5CF6,#27C4E8,#4F8CFF);animation:sp 7s linear infinite;opacity:.9}
  [data-theme=brutal] .ps-av::before{display:none}
  :root:not([data-theme]) .btn.primary,:root:not([data-theme]) .send,[data-theme=glass] .btn.primary,[data-theme=glass] .send{background-image:var(--grad);background-size:200% 200%;animation:ovflow 7s ease infinite}
  .vb-t[data-binfo=premium] .vbadge{animation:ovglow 2.8s ease-in-out infinite}
  .unread,.badge-n{animation:ovping 2.2s ease-out infinite}
  .qa:hover,.ps-card:hover,.tcard:hover{transform:translateY(-3px)}
  .item,.crow{transition:transform .18s,background .18s,border-color .18s}.item:hover{transform:translateX(3px)}
  .bottom a.on .ic{animation:ovbounce .5s ease}
  [data-theme=brutal] .fab,[data-theme=brutal] .sfab{animation:ovbob 2.6s ease-in-out infinite}
  [data-theme=brutal] .btn:hover,[data-theme=brutal] .qa:hover{animation:ovwig .35s ease}
  [data-theme=brutal] .bottom::after{background-size:22.63px 100%;animation:ovstripe 1.1s linear infinite}
  [data-theme=glass] .ps-card,[data-theme=glass] .qa{transition:border-color .3s,box-shadow .3s}
  [data-theme=glass] .ps-card:hover,[data-theme=glass] .qa:hover{border-color:rgba(138,157,255,.55);box-shadow:0 16px 40px -18px rgba(91,115,255,.6)}
}

/* Emoji gaya Apple */
img.emoji{display:inline-block;width:1.28em;height:1.28em;vertical-align:-.3em;margin:0 .03em;object-fit:contain;-webkit-user-drag:none;user-select:text;pointer-events:none}

/* ===== Kartu install PWA (Profil) ===== */
.inst{position:relative;overflow:hidden;margin-bottom:8px;padding:16px;border-radius:20px;border:1px solid var(--bd);background:radial-gradient(120% 140% at 100% 0%,rgba(0,168,255,.16),transparent 55%),var(--s1)}
.inst-top{display:flex;align-items:center;gap:14px}
.inst-top b{display:block;font-weight:700;font-size:1.0625rem}.inst-top small{display:block;color:var(--tx2);font-size:.8125rem;margin-top:2px}
.inst-ic{flex:none;width:56px;height:56px;border-radius:15px;overflow:hidden;background:var(--bg);border:1px solid var(--bd);box-shadow:0 8px 22px -10px rgba(0,168,255,.7)}
.inst-ic img{display:block;width:100%;height:100%;object-fit:cover}
.inst-ok{flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:.75rem;font-weight:600;color:var(--ok);background:rgba(53,212,154,.12);border:1px solid rgba(53,212,154,.42)}
.inst-pts{list-style:none;margin:14px 0 16px;padding:0;display:grid;gap:10px}
.inst-pts li{display:flex;align-items:center;gap:12px;font-size:.875rem;color:var(--tx)}
.inst-pts li .ic{flex:none;box-sizing:content-box;padding:7px;border-radius:50%;background:rgba(0,168,255,.14);color:var(--cyan)}
.inst-steps{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:10px}
.inst-steps li{display:flex;align-items:center;gap:12px;font-size:.875rem;color:var(--tx)}
.inst-steps i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 .75rem/1 Inter,system-ui,sans-serif;font-style:normal;background:var(--grad);color:#fff}
.inst-steps .ic{display:inline-block;vertical-align:-3px;color:var(--cyan)}
.inst-note{margin:12px 0 0;font-size:.8125rem;color:var(--tx2)}
.inst .btn.block{width:100%;justify-content:center;gap:8px}

/* ===== Pesan lanjutan Premium (terjadwal, pencarian) ===== */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px}
.chip-b{padding:7px 13px;min-height:36px;border-radius:999px;border:1px solid var(--bd);background:var(--s2);color:var(--tx);font-size:.8125rem;font-weight:500;cursor:pointer}
.chip-b:hover,.chip-b:focus-visible{border-color:var(--bda);outline:none}
.sl-r{margin-bottom:8px}.sl-t{margin:8px 0 2px;color:var(--tx);white-space:pre-wrap;overflow-wrap:anywhere;font-size:.875rem}
.sl-a{margin-top:10px;flex-wrap:wrap}
.sfil{margin:10px 0 4px;border:1px solid var(--bd);border-radius:12px;background:var(--s1)}
.sfil summary{padding:10px 14px;cursor:pointer;font-size:.8125rem;font-weight:600;color:var(--tx2);display:flex;gap:8px;align-items:center;list-style:none}
.sfil summary::-webkit-details-marker{display:none}
.sfil-g{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 14px}
.sfil-g label{display:grid;gap:5px;font-size:.75rem;color:var(--tx3)}
@media (max-width:420px){.sfil-g{grid-template-columns:1fr}}
.srch-r{display:grid;gap:4px;width:100%;text-align:left;margin-bottom:8px;cursor:pointer}
.srch-r:hover,.srch-r:focus-visible{border-color:var(--bda);outline:none}
.srch-t{color:var(--tx2);font-size:.875rem;overflow-wrap:anywhere}
.srch-t mark{background:rgba(0,168,255,.28);color:var(--tx);border-radius:4px;padding:0 2px}