@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@700;900&display=swap');
:root{
  --navy:#0b1f3a;--navy2:#112747;--navy3:#1a3a6b;
  --gold:#c8a84b;--gold2:#d9bc6e;--gold4:#faf5e8;
  --white:#fff;--bg:#f2f5fb;--border:#e0e8f4;
  --t1:#0b1f3a;--t2:#3a506e;--t3:#7a90b0;--t4:#b8c8dc;
  --red:#c0392b;--green:#1a7a4a;--warn:#d97706;
  --sh1:0 2px 8px rgba(11,31,58,.08);--sh2:0 8px 28px rgba(11,31,58,.13);--sh3:0 18px 52px rgba(11,31,58,.18);
  --r1:8px;--r2:14px;--r3:20px;
  --sw:258px;--th:62px;
  --tr:all .22s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;font-size:14px;line-height:1.5}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--t4);border-radius:10px}

/* LOGIN */
#login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(ellipse at 25% 60%,rgba(200,168,75,.1) 0%,transparent 55%),linear-gradient(145deg,#060f1e 0%,var(--navy) 50%,#0d1a2e 100%);position:relative}
#login-wrap::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(200,168,75,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(200,168,75,.03) 1px,transparent 1px);background-size:50px 50px;pointer-events:none}
.lcard{background:var(--white);border-radius:var(--r3);width:100%;max-width:420px;box-shadow:var(--sh3),0 0 0 1px rgba(200,168,75,.15);overflow:hidden;position:relative;z-index:1;animation:popIn .45s cubic-bezier(.34,1.4,.64,1)}
@keyframes popIn{from{opacity:0;transform:translateY(36px) scale(.96)}to{opacity:1;transform:none}}
.lhead{background:var(--navy);padding:36px 36px 32px;text-align:center;position:relative;overflow:hidden}
.lhead::before{content:'';position:absolute;width:220px;height:220px;background:radial-gradient(circle,rgba(200,168,75,.12) 0%,transparent 70%);top:-60px;right:-40px;border-radius:50%}
.lhead::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:26px;background:var(--white);border-radius:26px 26px 0 0}
.lemb{width:74px;height:74px;background:transparent;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35);margin-bottom:14px;position:relative;z-index:1;overflow:hidden}
.lname{font-family:'Playfair Display',serif;font-size:32px;color:var(--white);letter-spacing:2px;position:relative;z-index:1}
.ltag{font-size:10px;color:var(--gold2);letter-spacing:2.5px;text-transform:uppercase;opacity:.85;margin-top:5px;position:relative;z-index:1}
.lbody{padding:28px 32px 32px}
.lbody h3{font-size:19px;font-weight:700;color:var(--navy);margin-bottom:4px}
.lbody>p{font-size:12px;color:var(--t3);margin-bottom:22px}
.lerr{display:none;align-items:center;gap:8px;background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.2);border-radius:var(--r1);padding:10px 13px;font-size:12px;color:var(--red);font-weight:600;margin-bottom:14px}
.lerr.show{display:flex;animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:11px;font-weight:700;color:var(--navy);margin-bottom:5px;text-transform:uppercase;letter-spacing:.6px}
.iwrap{position:relative}
.iwrap .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--t4);font-size:13px;pointer-events:none}
.iwrap input{width:100%;padding:11px 36px;border:1.5px solid var(--border);border-radius:var(--r1);font-size:13px;color:var(--t1);font-family:inherit;outline:none;transition:var(--tr);background:var(--bg)}
.iwrap input:focus{border-color:var(--navy);background:var(--white);box-shadow:0 0 0 3px rgba(11,31,58,.07)}
.ieye{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--t4);font-size:13px;padding:4px;transition:var(--tr)}
.ieye:hover{color:var(--navy)}
.btnlogin{width:100%;padding:13px;background:linear-gradient(135deg,var(--navy),var(--navy3));color:var(--white);border:none;border-radius:var(--r1);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:var(--tr);display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 16px rgba(11,31,58,.25)}
.btnlogin:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(11,31,58,.3)}
.btnlogin:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* APP */
#app{display:none;min-height:100vh}
#app.on{display:flex}

/* SIDEBAR */
.sb{width:var(--sw);min-height:100vh;background:var(--navy);position:fixed;left:0;top:0;bottom:0;display:flex;flex-direction:column;z-index:200}
.sb::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(200,168,75,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(200,168,75,.02) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.sb-brand{padding:20px 20px 16px;border-bottom:1px solid rgba(200,168,75,.14);position:relative;z-index:1}
.sb-row{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.sb-logo{width:38px;height:38px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.25);flex-shrink:0;overflow:hidden}
.sb-app{font-family:'Playfair Display',serif;font-size:20px;color:var(--white);letter-spacing:1px}
.sb-sub{font-size:9px;color:var(--gold2);letter-spacing:1.8px;text-transform:uppercase;opacity:.75;margin-left:48px}
.sb-user{margin:11px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(200,168,75,.1);border-radius:11px;padding:10px 12px;display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.sb-av{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.sb-av.ra{background:rgba(11,31,58,.3);color:var(--gold2)}
.sb-av.rs{background:rgba(26,122,74,.25);color:#6dda9a}
.sb-av.rk{background:rgba(200,168,75,.2);color:var(--gold2)}
.sb-un{font-size:12px;font-weight:700;color:var(--white)}
.sb-ur{font-size:10px;color:var(--gold2);opacity:.8}
.sb-nav{flex:1;padding:8px 0;overflow-y:auto;position:relative;z-index:1}
.sb-sec{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold2);opacity:.45;padding:11px 20px 4px}
.sb-it{display:flex;align-items:center;gap:10px;padding:10px 20px;color:rgba(255,255,255,.52);cursor:pointer;transition:var(--tr);border-left:3px solid transparent;font-size:13px;font-weight:500;user-select:none}
.sb-it:hover{color:var(--white);background:rgba(200,168,75,.07)}
.sb-it.active{color:#f0e0a8;background:rgba(200,168,75,.1);border-left-color:var(--gold)}
.sb-it i{width:16px;text-align:center;font-size:13px;flex-shrink:0}
.sb-badge{margin-left:auto;background:var(--gold);color:var(--navy);font-size:10px;font-weight:800;padding:1px 7px;border-radius:20px;min-width:20px;text-align:center}
.sb-it.locked{opacity:.28;cursor:not-allowed;pointer-events:none}
.sb-it.locked::after{content:'🔒';margin-left:auto;font-size:10px}
.sb-foot{padding:13px 14px;border-top:1px solid rgba(200,168,75,.1);position:relative;z-index:1}
.btn-out{width:100%;padding:9px;background:rgba(192,57,43,.12);color:#e57373;border:1px solid rgba(192,57,43,.2);border-radius:var(--r1);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--tr);display:flex;align-items:center;justify-content:center;gap:8px}
.btn-out:hover{background:var(--red);color:var(--white);border-color:var(--red)}

/* TOPBAR */
.topbar{position:fixed;top:0;left:var(--sw);right:0;height:var(--th);background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 26px;z-index:100;box-shadow:var(--sh1)}
.tb-title{font-size:17px;font-weight:700;color:var(--navy)}
.tb-right{display:flex;align-items:center;gap:10px}
.tb-date{font-size:11px;color:var(--t3);padding:5px 11px;background:var(--bg);border-radius:20px;border:1px solid var(--border)}
.apill{padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.4px}

/* MAIN */
.main{margin-left:var(--sw);padding-top:var(--th);min-height:100vh}
.page{display:none;padding:26px;animation:pgIn .22s ease}
.page.on{display:block}
@keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.sc{background:var(--white);border-radius:var(--r2);padding:20px;border:1px solid var(--border);box-shadow:var(--sh1);transition:var(--tr);position:relative;overflow:hidden}
.sc:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.sc::after{content:'';position:absolute;top:0;right:0;width:72px;height:72px;border-radius:0 0 0 72px;opacity:.06}
.sc.cn::after{background:var(--navy)}.sc.cg::after{background:var(--gold)}.sc.cs::after{background:var(--green)}.sc.cr::after{background:var(--red)}
.sc-ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:12px}
.sc.cn .sc-ic{background:rgba(11,31,58,.07);color:var(--navy)}.sc.cg .sc-ic{background:rgba(200,168,75,.1);color:#8a6a1a}.sc.cs .sc-ic{background:rgba(26,122,74,.08);color:var(--green)}.sc.cr .sc-ic{background:rgba(192,57,43,.08);color:var(--red)}
.sc-n{font-size:30px;font-weight:800;color:var(--navy);line-height:1;margin-bottom:3px}
.sc-l{font-size:11px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.dg{display:grid;grid-template-columns:3fr 2fr;gap:16px}

/* CARD */
.card{background:var(--white);border-radius:var(--r2);border:1px solid var(--border);box-shadow:var(--sh1);overflow:hidden}
.ch{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.ch h3{font-size:14px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:7px}
.ch h3 i{color:var(--gold)}
.cb{padding:18px 20px}

/* ACTIVITY */
.ai{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border)}
.ai:last-child{border-bottom:none}
.ai-ic{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.ai-nm{font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-m{font-size:11px;color:var(--t3);margin-top:1px}

/* SECTION HEADER */
.sh{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.sh h2{font-family:'Playfair Display',serif;font-size:24px;color:var(--navy)}
.sh p{font-size:12px;color:var(--t3);margin-top:3px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r1);font-size:12px;font-weight:600;cursor:pointer;transition:var(--tr);border:none;font-family:inherit;white-space:nowrap;line-height:1}
.btn-nv{background:var(--navy);color:var(--white);box-shadow:0 2px 8px rgba(11,31,58,.2)}
.btn-nv:hover{background:var(--navy2);transform:translateY(-1px);box-shadow:var(--sh2)}
.btn-gd{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);box-shadow:0 2px 8px rgba(200,168,75,.2)}
.btn-gd:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(200,168,75,.35)}
.btn-ol{background:transparent;border:1.5px solid var(--border);color:var(--t2)}
.btn-ol:hover{border-color:var(--navy);color:var(--navy);background:rgba(11,31,58,.03)}
.btn-dn{background:rgba(192,57,43,.08);color:var(--red);border:1px solid rgba(192,57,43,.2)}
.btn-dn:hover{background:var(--red);color:var(--white);border-color:var(--red)}
.btn-sm{padding:5px 11px;font-size:11px}

/* TABLE */
.tw{background:var(--white);border-radius:var(--r2);border:1px solid var(--border);box-shadow:var(--sh1);overflow:hidden}
.ttb{padding:13px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap}
.sf{display:flex;align-items:center;gap:6px;background:var(--bg);border-radius:var(--r1);padding:8px 12px;border:1.5px solid transparent;transition:var(--tr);min-width:200px}
.sf:focus-within{background:var(--white);border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,31,58,.06)}
.sf i{color:var(--t4);font-size:12px}
.sf input{border:none;background:transparent;font-size:12px;color:var(--t1);outline:none;font-family:inherit;width:100%}
.ti{font-size:11px;color:var(--t3)}
.dt{width:100%;border-collapse:collapse}
.dt thead tr{background:var(--bg)}
.dt th{padding:10px 16px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);border-bottom:1px solid var(--border);white-space:nowrap}
.dt td{padding:12px 16px;font-size:12px;border-bottom:1px solid var(--border);color:var(--t2);vertical-align:middle}
.dt tbody tr:last-child td{border-bottom:none}
.dt tbody tr:hover{background:rgba(11,31,58,.02)}
.fchip{display:inline-flex;align-items:center;gap:5px;color:var(--navy);font-weight:600;font-size:11px;text-decoration:none;padding:4px 9px;background:rgba(11,31,58,.06);border-radius:6px;transition:var(--tr)}
.fchip:hover{background:var(--navy);color:var(--white)}

/* PILLS */
.pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.p-nv{background:rgba(11,31,58,.08);color:var(--navy)}
.p-gd{background:var(--gold4);color:#7a5618}
.p-gn{background:rgba(26,122,74,.08);color:var(--green)}
.p-rd{background:rgba(192,57,43,.08);color:var(--red)}

/* TABS */
.tabs{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:11px;margin-bottom:18px;width:fit-content;border:1px solid var(--border)}
.tabb{padding:7px 18px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:var(--tr);color:var(--t3);border:none;background:transparent;font-family:inherit}
.tabb.active{background:var(--white);color:var(--navy);box-shadow:var(--sh1)}

/* KEGIATAN */
.kg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.kc{background:var(--white);border-radius:var(--r2);overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh1);transition:var(--tr)}
.kc:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.km{width:100%;height:168px;background:var(--bg);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.km img,.km video{width:100%;height:100%;object-fit:cover}
.kmb{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.65);color:#fff;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700;text-transform:uppercase}
.ki{padding:13px 15px}
.ki-d{font-size:10px;color:var(--gold);font-weight:700;letter-spacing:.4px;margin-bottom:4px;text-transform:uppercase}
.ki-t{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:4px;line-height:1.4}
.ki-p{font-size:11px;color:var(--t3);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ki-by{margin-top:6px;font-size:10px;color:var(--t4)}
.kf{padding:10px 15px;border-top:1px solid var(--border);display:flex;gap:6px}

/* USER CARDS */
.ug{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-top:20px}
.uc{background:var(--white);border-radius:var(--r2);border:1px solid var(--border);box-shadow:var(--sh1);padding:18px;transition:var(--tr);position:relative;overflow:hidden}
.uc:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.uc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.uc.ra::before{background:linear-gradient(90deg,var(--navy),var(--navy3))}
.uc.rs::before{background:linear-gradient(90deg,var(--green),#2da86a)}
.uc.rk::before{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.uc-h{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.uc-av{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.uc-av.ra{background:rgba(11,31,58,.07)}.uc-av.rs{background:rgba(26,122,74,.08)}.uc-av.rk{background:var(--gold4)}
.uc-nm{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:3px}
.uc-inf{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:13px}
.uc-il{font-size:10px;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;font-weight:600}
.uc-iv{font-size:12px;color:var(--t2);font-weight:500}
.uc-ac{display:flex;gap:6px}
.uc-prot{margin-top:9px;padding:7px 10px;background:var(--gold4);border:1px solid rgba(200,168,75,.25);border-radius:7px;font-size:11px;color:#7a5618;display:flex;align-items:center;gap:6px}

/* MODAL */
.ov{position:fixed;inset:0;background:rgba(6,15,30,.65);backdrop-filter:blur(5px);z-index:500;display:none;align-items:center;justify-content:center;padding:20px}
.ov.open{display:flex;animation:ovIn .18s ease}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--white);border-radius:var(--r3);width:100%;max-width:540px;max-height:92vh;overflow-y:auto;box-shadow:var(--sh3);animation:modIn .28s cubic-bezier(.34,1.4,.64,1)}
@keyframes modIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
.modal-sm{max-width:420px}
.mh{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--white);z-index:1}
.mh h3{font-size:16px;font-weight:700;color:var(--navy)}
.mcl{width:29px;height:29px;border-radius:7px;border:none;background:var(--bg);color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--tr);font-size:12px}
.mcl:hover{background:var(--red);color:var(--white)}
.mb{padding:20px 22px}
.mf{padding:13px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:7px}

/* FORM */
.ff{margin-bottom:14px}
.fl{display:block;font-size:11px;font-weight:700;color:var(--navy);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.fc{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--r1);font-size:13px;color:var(--t1);font-family:inherit;outline:none;transition:var(--tr);background:var(--white)}
.fc:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,31,58,.06)}
select.fc{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a90b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
textarea.fc{min-height:82px;resize:vertical}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fhint{font-size:11px;color:var(--t3);margin-top:4px}

/* FILE DROP */
.fdrop{border:2px dashed var(--border);border-radius:var(--r2);padding:22px 16px;text-align:center;cursor:pointer;transition:var(--tr);position:relative;overflow:hidden}
.fdrop:hover,.fdrop.over{border-color:var(--gold);background:var(--gold4)}
.fdrop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.fdi{font-size:26px;color:var(--gold);margin-bottom:7px}
.fdt{font-size:12px;color:var(--t3)}.fdt strong{color:var(--navy)}
.fdh{font-size:10px;color:var(--t4);margin-top:3px}
.fprev{display:none;align-items:center;gap:8px;background:var(--bg);border-radius:7px;padding:8px 11px;margin-top:8px;font-size:11px;border:1px solid var(--border)}
.fprev.show{display:flex}
.fprev i{color:var(--gold)}
.fp-nm{flex:1;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-rm{cursor:pointer;color:var(--red);flex-shrink:0}
.mthumb{display:none;margin-top:9px;border-radius:var(--r1);overflow:hidden;max-height:148px}
.mthumb.show{display:block}

/* DETAIL */
.df{margin-bottom:12px}
.dl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);margin-bottom:3px}
.dv{font-size:13px;color:var(--navy);font-weight:500}
.hr{height:1px;background:var(--border);margin:13px 0}

/* PW STRENGTH */
.pws{margin-top:5px}
.pwb{display:flex;gap:3px;margin-bottom:3px}
.pwb div{flex:1;height:3px;border-radius:2px;background:var(--border);transition:var(--tr)}
.pwb div.w{background:var(--red)}.pwb div.m{background:var(--warn)}.pwb div.s{background:var(--green)}
.pwl{font-size:10px;color:var(--t3)}

/* TOAST */
.twr{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:7px}
.toast{background:var(--white);border-radius:11px;padding:11px 14px;box-shadow:var(--sh3);display:flex;align-items:center;gap:9px;min-width:250px;max-width:330px;border-left:4px solid var(--green);animation:tIn .28s cubic-bezier(.34,1.4,.64,1)}
.toast.e{border-left-color:var(--red)}.toast.w{border-left-color:var(--warn)}
@keyframes tIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.toast i{font-size:15px}
.toast.ok i{color:var(--green)}.toast.e i{color:var(--red)}.toast.w i{color:var(--warn)}
.toast span{font-size:12px;font-weight:600;color:var(--navy);flex:1}

/* EMPTY */
.empty{text-align:center;padding:46px 20px}
.empty i{font-size:44px;color:var(--t4);margin-bottom:13px;display:block}
.empty h4{font-size:14px;color:var(--t3);font-weight:600;margin-bottom:4px}
.empty p{font-size:12px;color:var(--t4)}

/* RESPONSIVE */
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.dg{grid-template-columns:1fr}}
@media(max-width:860px){:root{--sw:56px}.sb-app,.sb-sub,.sb-sec,.sb-it span,.sb-badge,.sb-un,.sb-ur,.sb-foot span{display:none}.sb-user{justify-content:center}.sb-row{justify-content:center}.page{padding:14px}.fr{grid-template-columns:1fr}}
@media(max-width:580px){.stats{grid-template-columns:1fr 1fr}.ug{grid-template-columns:1fr}.tb-date{display:none}}