:root{--ink:#14161a;--ink2:#555b67;--ln:rgba(255,255,255,.55);--g:rgba(255,255,255,.16);--g2:rgba(255,255,255,.34);color-scheme:light}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);overflow-x:hidden}
body.pg-login{background:#0f1115;overflow:hidden}
body.pg-admin{background:#e9ebef}
[hidden]{display:none!important}
button{font-family:inherit}
.glass{background:var(--g);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border:1px solid var(--ln);box-shadow:0 18px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.7)}

/* ====== tombol bahasa bulat ====== */
.lang{position:relative}
.rb{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;padding:0;transition:transform .35s cubic-bezier(.3,1.5,.5,1),background .3s}
.rb:hover{transform:rotate(14deg) scale(1.08);background:var(--g2)}
.rb:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rb svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rb b{position:absolute;right:-5px;bottom:-5px;min-width:26px;height:24px;padding:0 5px;border-radius:12px;background:#fff;color:var(--ink);font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.lm{position:absolute;right:0;top:68px;min-width:210px;padding:8px;border-radius:22px;opacity:0;transform:translateY(-10px) scale(.94);transform-origin:top right;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,1.2,.4,1);z-index:30}
.lm.on{opacity:1;transform:none;pointer-events:auto}
.lm button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;background:transparent;color:#fff;border-radius:15px;font:600 14px 'Plus Jakarta Sans',sans-serif;cursor:pointer;text-align:left;transition:background .2s}
.lm button:hover,.lm button.on{background:var(--g2)}
.lm button i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}

/* ====== LOGIN ====== */
.scene{position:fixed;inset:0;overflow:hidden}
.bgp{position:absolute;inset:-4%;transition:transform .35s ease-out}
.bgp img{width:100%;height:100%;object-fit:cover;display:block;animation:kb 28s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.13) translate(-1%,1%)}}
.shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(0,0,0,.12),rgba(0,0,0,.66)),linear-gradient(180deg,rgba(0,0,0,.5),transparent 28%)}
.orb{position:absolute;border-radius:50%;filter:blur(55px);background:rgba(255,255,255,.55);opacity:.32;animation:drift 17s ease-in-out infinite alternate}
.o1{width:400px;height:400px;left:-110px;top:10%}.o2{width:320px;height:320px;right:-70px;bottom:6%;animation-delay:-8s}
@keyframes drift{to{transform:translate(80px,-50px) scale(1.25)}}
.big{position:absolute;left:0;right:0;top:50%;margin-top:-.52em;text-align:center;font-weight:800;line-height:.95;letter-spacing:-.04em;font-size:clamp(72px,19vw,320px);white-space:nowrap;pointer-events:none;transition:transform .35s ease-out;perspective:800px}
.big span{display:inline-block;color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.04) 92%);-webkit-background-clip:text;background-clip:text;animation:rise 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k)*80ms + .1s)}
@keyframes rise{from{opacity:0;transform:translateY(70px) rotateX(55deg);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
.top{position:fixed;z-index:20;top:max(16px,env(safe-area-inset-top,0px));left:max(18px,env(safe-area-inset-left,0px));right:max(18px,env(safe-area-inset-right,0px));display:flex;justify-content:space-between;align-items:center}
.back{display:flex;align-items:center;gap:10px;padding:7px 20px 7px 7px;border-radius:999px;color:#fff;text-decoration:none;font-size:13px;font-weight:600;transition:transform .25s,background .25s}
.back:hover{transform:translateX(-3px);background:var(--g2)}
.back:focus-visible{outline:2px solid #fff;outline-offset:3px}
.back img{width:40px;height:40px;object-fit:contain;background:rgba(255,255,255,.9);border-radius:50%;padding:4px}
.wrap{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:96px 18px 26px;overflow-y:auto}
.tilt{width:min(440px,100%);transition:transform .25s ease-out}
.shk.shake{animation:shake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-10px)}40%,60%{transform:translateX(10px)}}
.card{position:relative;padding:36px 34px 28px;border-radius:34px;overflow:hidden;color:var(--ink);background:rgba(255,255,255,.64);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(255,255,255,.85);box-shadow:0 40px 90px rgba(0,0,0,.4),inset 0 1px 0 #fff;animation:cardIn 1s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(50px) scale(.94);filter:blur(16px)}to{opacity:1;transform:none;filter:blur(0)}}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.8) 50%,transparent 62%);transform:translateX(-130%);animation:sheen 7s 1.6s infinite}
@keyframes sheen{0%{transform:translateX(-130%)}22%,100%{transform:translateX(130%)}}
.card.out{animation:cardOut .65s cubic-bezier(.6,0,.4,1) forwards}
@keyframes cardOut{to{opacity:0;transform:scale(.88) translateY(-20px);filter:blur(14px)}}
.st{animation:up .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.45s + var(--i)*90ms)}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.lgo{width:84px;height:84px;margin:0 auto 14px;border-radius:26px;display:grid;place-items:center;background:#fff;box-shadow:0 14px 34px rgba(20,22,26,.18);animation:spinIn 1.1s .3s cubic-bezier(.2,.9,.2,1) both}
.lgo img{width:62px;height:62px;object-fit:contain;animation:float 5s 1.5s ease-in-out infinite}
@keyframes spinIn{from{opacity:0;transform:rotateY(-200deg) scale(.4)}to{opacity:1;transform:none}}
@keyframes float{50%{transform:translateY(-4px) rotate(4deg)}}
h1{font-size:25px;line-height:1.2;font-weight:800;letter-spacing:-.01em;text-align:center}
.sub{margin:8px auto 24px;max-width:30ch;text-align:center;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.fld{position:relative;margin-bottom:16px}
.fld input{width:100%;height:58px;padding:22px 52px 6px 50px;border-radius:18px;border:1.5px solid rgba(255,255,255,.95);background:rgba(255,255,255,.72);font:500 15px 'Plus Jakarta Sans',sans-serif;color:var(--ink);outline:none;transition:border-color .3s,box-shadow .3s,background .3s}
.fld input:focus{background:#fff;border-color:#14161a;box-shadow:0 0 0 5px rgba(20,22,26,.1)}
.fld label{position:absolute;left:50px;top:19px;font-size:14.5px;color:var(--ink2);pointer-events:none;transform-origin:left top;transition:transform .3s cubic-bezier(.3,1,.4,1),color .3s}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label{transform:translateY(-12px) scale(.76);color:#14161a;font-weight:600}
.fld .ic{position:absolute;left:17px;top:17px;width:22px;height:22px;stroke:var(--ink2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s,transform .4s}
.fld input:focus~.ic{stroke:#14161a;transform:scale(1.12)}
.eye{position:absolute;right:10px;top:9px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink2);transition:background .2s,color .2s}
.eye:hover{background:rgba(20,22,26,.07);color:var(--ink)}
.eye:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.eye svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eye .sl{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .35s}
.eye.on .sl{stroke-dashoffset:0}
form.bad .fld input{border-color:#c0392b;box-shadow:0 0 0 5px rgba(192,57,43,.12)}
.caps{font-size:12.5px;color:#9a5b00;margin:-6px 4px 10px;display:flex;align-items:center;gap:6px}
.err{min-height:0;max-height:0;overflow:hidden;opacity:0;margin:0 4px;font-size:13px;line-height:1.5;font-weight:600;color:#b3261e;transition:max-height .4s,opacity .4s,margin .4s}
.err.on{max-height:80px;opacity:1;margin:-2px 4px 12px}
.go{position:relative;display:flex;align-items:center;justify-content:center;height:56px;width:100%;margin:6px auto 0;border:0;border-radius:999px;background:#14161a;color:#fff;font:700 15.5px 'Plus Jakarta Sans',sans-serif;letter-spacing:.01em;cursor:pointer;overflow:hidden;box-shadow:0 14px 30px rgba(20,22,26,.35);transition:width .5s cubic-bezier(.7,0,.2,1),background .4s,transform .25s,box-shadow .3s}
.go::before{content:"";position:absolute;inset:0;background:radial-gradient(130px circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .3s}
.go:hover::before{opacity:1}
.go:hover{transform:translateY(-2px);box-shadow:0 20px 38px rgba(20,22,26,.42)}
.go:active{transform:scale(.97)}
.go:focus-visible{outline:2px solid #14161a;outline-offset:4px}
.go .t{position:relative;transition:opacity .25s,transform .35s}
.go .sp{position:absolute;width:26px;height:26px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s;animation:spin .75s linear infinite}
.go .ck{position:absolute;width:28px;height:28px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.go.load,.go.ok{width:56px}
.go.load .t,.go.ok .t{opacity:0;transform:scale(.5)}
.go.load .sp{opacity:1;transform:none}
.go.ok{background:#1c9d6b;box-shadow:0 14px 34px rgba(28,157,107,.5)}
.go.ok .sp{opacity:0}
.go.ok .ck{animation:draw .55s .15s ease forwards}
.go:disabled{cursor:progress}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
.hint{margin-top:18px;text-align:center;font-size:12.5px;color:var(--ink2)}
.welcome{margin-top:12px;text-align:center;font-size:14px;font-weight:700;color:#1c9d6b;height:0;opacity:0;overflow:hidden;transition:height .4s,opacity .4s}
.welcome.on{height:22px;opacity:1}
.demo{margin:14px 0 0;padding:10px 14px;border-radius:14px;background:rgba(20,22,26,.06);font-size:12px;line-height:1.7;color:var(--ink2);text-align:center}
.demo b{color:var(--ink);cursor:pointer;font-weight:600}
.roles{display:flex;gap:10px;margin-top:16px;justify-content:center;flex-wrap:wrap;animation:up .8s 1.1s both}
.roles span{display:flex;flex-direction:column;gap:1px;padding:9px 16px;border-radius:16px;color:#fff;font-size:11.5px;line-height:1.4}
.roles b{font-size:12.5px}
.wipe{position:fixed;inset:0;z-index:60;background:#f4f5f7;pointer-events:none;clip-path:circle(0 at var(--x,50%) var(--y,50%))}
.wipe.on{animation:wipe .95s cubic-bezier(.7,0,.2,1) forwards}
.wipe.fade{animation:none;clip-path:none;opacity:0;transition:opacity .6s}
@keyframes wipe{to{clip-path:circle(150vmax at var(--x,50%) var(--y,50%))}}
@media (max-width:480px){.card{padding:30px 22px 24px;border-radius:28px}.back span{display:none}.back{padding:7px}}
@media (max-height:700px){.wrap{place-items:start center}}

/* ====== DASBOR ====== */
.dbg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.dbg img{width:100%;height:100%;object-fit:cover;filter:blur(34px) saturate(1.1);transform:scale(1.2)}
.dbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,246,249,.78),rgba(238,241,246,.93))}
.lt .glass{background:rgba(255,255,255,.55);border-color:#fff;box-shadow:0 14px 40px rgba(30,35,45,.1),inset 0 1px 0 #fff}
.hd{position:sticky;top:max(12px,env(safe-area-inset-top,0px));z-index:40;display:flex;align-items:center;gap:14px;max-width:1240px;margin:12px auto 0;padding:9px 12px 9px 12px;border-radius:999px;width:calc(100% - 28px)}
.hd .lg{display:flex;align-items:center;gap:12px;font-weight:800;font-size:15px;color:var(--ink);text-decoration:none}
.hd .lg:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:14px}
.hd .lg i{width:42px;height:42px;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(20,22,26,.12)}
.hd .lg img{width:30px;height:30px;object-fit:contain}
.hd .sp2{flex:1}
.lt .rb{color:var(--ink);width:46px;height:46px;background:rgba(255,255,255,.6);border:1px solid #fff}
.lt .rb:hover{background:#fff}
.lt .rb:focus-visible{outline-color:var(--ink)}
.lt .lm{top:60px;background:rgba(255,255,255,.9);box-shadow:0 20px 50px rgba(30,35,45,.2)}
.lt .lm button{color:var(--ink)}
.lt .lm button:hover,.lt .lm button.on{background:rgba(20,22,26,.07)}
.lt .lm button i{background:rgba(20,22,26,.08)}
.out{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;border:1px solid rgba(20,22,26,.2);background:#14161a;color:#fff;font:700 13.5px 'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:transform .25s,box-shadow .25s}
.out:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,22,26,.3)}
.out:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.out svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.main{max-width:1240px;margin:0 auto;padding:30px 16px 60px}
.hello{position:relative;padding:clamp(24px,4vw,44px);border-radius:32px;overflow:hidden;animation:up .8s both}
.hello h2{font-size:clamp(26px,3.6vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.hello p{margin-top:10px;color:var(--ink2);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid #fff;font-size:13px;font-weight:600}
.chip.role{background:#14161a;color:#fff;border-color:#14161a}
.chip .dot{width:8px;height:8px;border-radius:50%;background:#22c58b;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,139,.6)}70%,100%{box-shadow:0 0 0 8px rgba(34,197,139,0)}}
.sec2{margin:38px 0 14px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px}
.mod{position:relative;padding:22px;border-radius:24px;animation:up .7s both;animation-delay:calc(var(--i)*60ms + .2s);transition:transform .3s,box-shadow .3s}
.mod:hover{transform:translateY(-5px);box-shadow:0 24px 54px rgba(30,35,45,.16),inset 0 1px 0 #fff}
.mod .ib{width:50px;height:50px;border-radius:16px;background:#14161a;display:grid;place-items:center;margin-bottom:16px}
.mod .ib svg{width:25px;height:25px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mod h3{font-size:16.5px;line-height:1.3}
.mod p{margin-top:6px;font-size:13px;line-height:1.55;color:var(--ink2)}
.mod .tag{position:absolute;top:18px;right:18px;padding:4px 11px;border-radius:999px;background:rgba(20,22,26,.07);font-size:11px;font-weight:600;color:var(--ink2)}
.note{margin-top:34px;padding:18px 22px;border-radius:20px;font-size:13px;line-height:1.7;color:var(--ink2)}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,30px);padding:14px 24px;border-radius:999px;background:#14161a;color:#fff;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;z-index:80}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){.hd .lg span{display:none}.out span{display:none}.out{padding:0 14px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.big span,.card,.st,.lgo,.roles,.hello,.mod{opacity:1!important;transform:none!important;filter:none!important}}

/* ====== EDITOR KONTEN (CMS) ====== */
button.mod{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
button.mod:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mod .go2{position:absolute;right:20px;bottom:20px;width:34px;height:34px;border-radius:50%;background:rgba(20,22,26,.07);display:grid;place-items:center;transition:background .3s,transform .3s}
.mod .go2 svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mod:hover .go2{background:#14161a;transform:translateX(3px)}.mod:hover .go2 svg{stroke:#fff}
.mh{display:flex;align-items:center;gap:14px;margin-bottom:6px;animation:up .6s both}
.mh h2{font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-.01em}
.rb2{width:46px;height:46px;border-radius:50%;border:1px solid #fff;background:rgba(255,255,255,.7);display:grid;place-items:center;cursor:pointer;transition:transform .25s,background .25s;flex:none}
.rb2:hover{background:#fff;transform:translateX(-3px)}.rb2:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.rb2 svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mtabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 8px}
.mtabs button{border:1px solid #fff;background:rgba(255,255,255,.62);backdrop-filter:blur(12px);border-radius:999px;padding:10px 18px;font:600 13.5px 'Plus Jakarta Sans',sans-serif;color:var(--ink);cursor:pointer;transition:background .2s,transform .2s}
.mtabs button:hover{transform:translateY(-2px)}.mtabs button.on{background:#14161a;color:#fff}.mtabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mnote{font-size:13px;line-height:1.7;color:var(--ink2);margin:6px 2px 18px;max-width:78ch}
.rows{display:grid;gap:12px}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:12px 14px;border-radius:22px;animation:up .5s both;animation-delay:calc(var(--i,0)*35ms)}
.row.nt{grid-template-columns:1fr auto}
.th{width:84px;height:64px;border-radius:14px;overflow:hidden;background:rgba(20,22,26,.07);display:grid;place-items:center;flex:none}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th.vd{background:#14161a}.th.vd svg{width:24px;height:24px;fill:#fff}
.rbd{min-width:0}
.rt{font-size:15px;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs{font-size:13px;line-height:1.5;color:var(--ink2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ch{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;background:rgba(20,22,26,.07);font-size:11.5px;font-weight:600;color:var(--ink2)}
.ch.ok{background:rgba(28,157,107,.14);color:#12724d}.ch.warn{background:rgba(217,119,6,.15);color:#8a4b00}
.ra{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ib2{width:38px;height:38px;border-radius:50%;border:1px solid rgba(20,22,26,.12);background:rgba(255,255,255,.75);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s,border-color .2s;color:var(--ink);text-decoration:none}
.ib2:hover{background:#fff;transform:translateY(-2px)}.ib2:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ib2.dgr:hover{background:#b3261e;border-color:#b3261e;color:#fff}
.ib2 svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ib2[disabled]{opacity:.35;pointer-events:none}
.empty{padding:40px 20px;text-align:center;color:var(--ink2);font-size:14px;border-radius:22px}
.lt .out svg{width:18px;height:18px}
.b2{height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(20,22,26,.18);background:rgba(255,255,255,.8);font:700 13px 'Plus Jakarta Sans',sans-serif;color:var(--ink);cursor:pointer;transition:background .2s,transform .2s}
.b2:hover{background:#fff;transform:translateY(-1px)}.b2:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.out.dgr{background:#b3261e;border-color:#b3261e}
.out[disabled]{opacity:.6;cursor:progress}
dialog.dg{border:1px solid #fff;border-radius:28px;padding:26px 26px 22px;width:min(660px,calc(100% - 24px));max-height:calc(100svh - 24px);overflow:auto;background:rgba(250,251,253,.94);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:0 40px 90px rgba(0,0,0,.35);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif}
dialog.dg.wide{width:min(900px,calc(100% - 24px))}dialog.dg.sm{width:min(420px,calc(100% - 24px))}
dialog.dg::backdrop{background:rgba(14,16,20,.55);backdrop-filter:blur(8px)}
dialog.dg[open]{animation:dgin .35s cubic-bezier(.2,.9,.3,1)}
@keyframes dgin{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
dialog.dg h3{font-size:20px;font-weight:800;margin-bottom:16px}
.fl{margin-bottom:16px}
.fl>label,.fl>.lb{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.fl>label i,.fl>.lb i{color:#b3261e;font-style:normal;margin-left:3px}
.fl input[type=text],.fl input[type=number],.fl input[type=email],.fl input[type=url],.fl input[type=password],.fl input[type=datetime-local],.fl select,.fl textarea{width:100%;padding:12px 14px;border-radius:14px;border:1.5px solid rgba(20,22,26,.14);background:#fff;font:500 14.5px 'Plus Jakarta Sans',sans-serif;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.fl textarea{min-height:110px;resize:vertical;line-height:1.6}
.fl input:focus,.fl select:focus,.fl textarea:focus{border-color:#14161a;box-shadow:0 0 0 4px rgba(20,22,26,.09)}
.fl.bad input,.fl.bad select,.fl.bad textarea,.fl.bad .mw{border-color:#b3261e;box-shadow:0 0 0 4px rgba(179,38,30,.1)}
.fl .hn{font-size:12px;color:var(--ink2);margin-top:5px;line-height:1.5}
.sw{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;font-weight:600}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .tg{width:46px;height:27px;border-radius:99px;background:rgba(20,22,26,.2);position:relative;transition:background .25s;flex:none}
.sw .tg::after{content:"";position:absolute;left:3px;top:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .25s}
.sw input:checked+.tg{background:#1c9d6b}.sw input:checked+.tg::after{transform:translateX(19px)}
.sw input:focus-visible+.tg{outline:2px solid var(--ink);outline-offset:3px}
.mw{display:flex;gap:14px;align-items:center;padding:12px;border-radius:18px;border:1.5px dashed rgba(20,22,26,.22);background:rgba(255,255,255,.7);flex-wrap:wrap}
.mp{width:140px;height:92px;border-radius:12px;overflow:hidden;background:rgba(20,22,26,.07);display:grid;place-items:center;flex:none;color:var(--ink2);font-size:12px}
.mp img,.mp video{width:100%;height:100%;object-fit:cover;display:block}
.mb{display:flex;gap:8px;flex-wrap:wrap}
.gl{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-bottom:10px}
.gi{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#14161a}
.gi img,.gi video{width:100%;height:100%;object-fit:cover}
.gi .gx{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.92);cursor:pointer;font-size:15px;line-height:1;color:#b3261e}
.gi .gm{position:absolute;left:5px;bottom:5px;display:flex;gap:4px}
.gi .gm button{width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.92);cursor:pointer;font-size:12px}
.derr{color:#b3261e;font-size:13px;font-weight:600;min-height:0;margin:-4px 0 12px}
.dact{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.info{padding:14px 16px;border-radius:16px;background:rgba(20,22,26,.05);font-size:13.5px;line-height:1.7;margin-bottom:16px;white-space:pre-wrap;word-break:break-word}
.info b{display:block;font-size:12px;color:var(--ink2);font-weight:600;margin-top:6px}
.lh{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}.lh h3{margin:0}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;max-height:56svh;overflow:auto;padding:4px}
.li{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:3px solid transparent;cursor:pointer;background:#14161a;padding:0;transition:transform .2s,border-color .2s}
.li:hover{transform:translateY(-2px)}.li.sel{border-color:#1c9d6b}.li:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.li img,.li video{width:100%;height:100%;object-fit:cover;display:block}
.li .lt2{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;font-size:10.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .vb{position:absolute;top:6px;left:6px;padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.65);color:#fff;font-size:10.5px}
.toast.err{background:#b3261e}
@media (max-width:640px){.row{grid-template-columns:auto 1fr}.row .ra{grid-column:1/-1;justify-content:flex-start}.row.nt{grid-template-columns:1fr}.th{width:70px;height:56px}dialog.dg{padding:20px 16px}}

dialog.dg{margin:auto}
.fl>label.sw{display:flex;font-size:14px;margin:0}
.fl>label.sw span:last-child{line-height:1.4}

.mod p{padding-right:42px}