:root{
  --p:#1c7b6e;--p-dk:#145c52;--p-lt:#e6f4f2;--p-fg:#fff;
  --s:#f59e0b;--s-lt:rgba(245,158,11,.14);
  --ok:#1f8a5e;--ok-lt:rgba(31,138,94,.12);
  --wa:#d97706;--wa-lt:rgba(217,119,6,.12);
  --in:#2563eb;--in-lt:rgba(37,99,235,.1);
  --er:#dc2626;--er-lt:rgba(220,38,38,.1);
  --go:#f59e0b;--go-lt:rgba(245,158,11,.14);
  --bg:#f4f7fb;--card:#fff;--tx:#0d1e26;--mu:#64748b;
  --bd:#e2e8f0;--sf:#edf1f6;--ac:#e6f4f2;
  --gh:linear-gradient(135deg,#0f3830 0%,#1c6b5e 100%);
  --gp:linear-gradient(135deg,#145c52 0%,#1c7b6e 100%);
  --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh2:0 10px 25px -5px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
  --sh3:0 20px 50px -12px rgba(0,0,0,.15);
  --r:.75rem;--rs:.5rem;--rl:1rem;
  --fh:'Plus Jakarta Sans',system-ui,sans-serif;
  --fb:'DM Sans',system-ui,sans-serif;
  --nh:65px;
}
[data-theme=dark]{
  --p:#2aaa97;--p-lt:#1a3d38;
  --bg:#080e12;--card:#0d1e26;--tx:#dde8ee;--mu:#6d8ea0;
  --bd:#162637;--sf:#0e1e28;--ac:#162f2c;
  --gh:linear-gradient(135deg,#040c10 0%,#0e3830 100%);
  --gp:linear-gradient(135deg,#0e3830 0%,#1e6058 100%);
  --sh:0 1px 3px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.2);
  --sh2:0 10px 25px -5px rgba(0,0,0,.35),0 4px 6px -2px rgba(0,0,0,.2);
}
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--fb);background:var(--bg);color:var(--tx);min-height:100vh;margin:0;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
h1,h2,h3,h4,h5,h6{font-family:var(--fh)}
a{text-decoration:none}
#app{min-height:100vh;display:flex;flex-direction:column}
#pg{flex:1;padding-bottom:var(--nh)}
.pgc{max-width:960px;margin:0 auto;padding:20px 16px}
.fade-in{animation:fin .38s ease-out both}
@keyframes fin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── GLOBAL LOADER (Phase 4) ────────────────────────────────────────── */
#global-loader{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;
  background:var(--p);transform:scaleX(0);transform-origin:left;
  transition:transform .6s ease,opacity .3s;opacity:0;pointer-events:none;
}
#global-loader.visible{opacity:1;animation:loader-anim 1.2s ease-in-out infinite}
@keyframes loader-anim{
  0%{transform:scaleX(0) translateX(0)}
  50%{transform:scaleX(.6) translateX(60%)}
  100%{transform:scaleX(0) translateX(200%)}
}

/* ── SKELETON SCREENS (Phase 4) ─────────────────────────────────────── */
.skel-card{background:var(--card);border-radius:var(--r);border:1px solid var(--bd);padding:16px;display:flex;flex-direction:column;gap:14px}
.skel-row{display:flex;align-items:center;gap:12px}
.skel-lines{flex:1;display:flex;flex-direction:column;gap:6px}
.skel{background:var(--bd);border-radius:6px;animation:skel-pulse 1.5s ease-in-out infinite}
.skel-ic{width:44px;height:44px;border-radius:12px;flex-shrink:0}
.skel-t{height:14px;width:70%}
.skel-s{height:11px;width:45%}
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── FIELD VALIDATION (Phase 4) ─────────────────────────────────────── */
.field-err{font-size:12px;color:var(--er);margin:4px 0 0;min-height:16px}
.input-error{border-color:var(--er)!important;box-shadow:0 0 0 3px rgba(220,38,38,.12)!important}

/* ── HEADER ─────────────────────────────────────────────────────────── */
.mhdr{background:var(--gh);position:sticky;top:0;z-index:90}
.mhdr .hi{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;max-width:960px;margin:0 auto}
.hbrand{display:flex;align-items:center;gap:11px}
.hbrand-ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0}
.hbrand-tx h1{font-size:16px;font-weight:700;color:#fff;margin:0;line-height:1.2}
.hbrand-tx p{font-size:11px;color:rgba(255,255,255,.68);margin:0}
.hbtns{display:flex;gap:2px}
.hbtn{width:38px;height:38px;border-radius:10px;border:none;background:rgba(255,255,255,.13);color:rgba(255,255,255,.82);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:background .2s,color .2s;position:relative}
.hbtn:hover{background:rgba(255,255,255,.22);color:#fff}
.hbtn:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.hbtn.dropdown-toggle::after{display:none!important}
.nd{position:absolute;top:5px;right:5px;width:16px;height:16px;border-radius:50%;background:#ef4444;font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.back-btn{width:38px;height:38px;border-radius:10px;border:none;background:rgba(255,255,255,.13);color:rgba(255,255,255,.82);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;flex-shrink:0;transition:background .2s}
.back-btn:hover{background:rgba(255,255,255,.22)}
.back-btn:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.dd-menu{border-radius:12px!important;border:1px solid var(--bd)!important;background:var(--card)!important;box-shadow:var(--sh2)!important;padding:4px!important;min-width:160px}
.dd-it{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:9px;font-size:13.5px;font-family:var(--fb);color:var(--tx)!important;cursor:pointer;transition:background .15s}
.dd-it:hover{background:var(--ac)!important}
.dd-it:focus-visible{background:var(--ac)!important;outline:none}
.dd-it i{font-size:15px;color:var(--mu)}
.dd-it-er{color:var(--er)!important}
.dd-it-er i{color:var(--er)!important}
.dd-it-er:hover{background:var(--er-lt)!important}

/* ── BOTTOM NAV ──────────────────────────────────────────────────────── */
#bnav{position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--card);border-top:1px solid var(--bd);height:var(--nh);display:flex;align-items:stretch;padding:0 6px;box-shadow:0 -2px 14px rgba(0,0,0,.07)}
.nit{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;border:none;background:none;color:var(--mu);font-family:var(--fb);cursor:pointer;transition:color .2s;border-radius:12px;min-height:44px;min-width:44px}
.nit i{font-size:21px}
.nit span{font-size:10px;font-weight:500}
.nit.active{color:var(--p)}
.nit::after{content:'';display:block;width:0;height:2.5px;border-radius:2px;background:var(--p);margin-top:2px;transition:width .22s}
.nit.active::after{width:18px}
.nit:focus-visible{outline:2px solid var(--p);outline-offset:-2px}

/* ── CARDS ───────────────────────────────────────────────────────────── */
.mc{background:var(--card);border-radius:var(--r);border:1px solid var(--bd);box-shadow:var(--sh);overflow:hidden}
.scard{background:var(--card);border-radius:var(--r);border:1px solid var(--bd);box-shadow:var(--sh);padding:18px;cursor:pointer;transition:box-shadow .25s,transform .2s}
.scard:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.scard:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.sg{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.sg{grid-template-columns:1fr 1fr}}

/* ── ICON BOXES ─────────────────────────────────────────────────────── */
.ib{display:flex;align-items:center;justify-content:center;border-radius:12px;flex-shrink:0;font-size:18px}
.ib-sm{width:36px;height:36px;border-radius:10px;font-size:15px}
.ib-md{width:44px;height:44px}
.ib-lg{width:56px;height:56px;font-size:24px;border-radius:16px}
.ib-xl{width:72px;height:72px;font-size:30px;border-radius:20px}
.ic-p{background:var(--p-lt);color:var(--p)}
.ic-ok{background:var(--ok-lt);color:var(--ok)}
.ic-wa{background:var(--wa-lt);color:var(--wa)}
.ic-in{background:var(--in-lt);color:var(--in)}
.ic-er{background:var(--er-lt);color:var(--er)}
.ic-go{background:var(--go-lt);color:var(--go)}
.ic-s{background:var(--s-lt);color:var(--s)}
.ic-mu{background:var(--sf);color:var(--mu)}

/* ── BADGES ─────────────────────────────────────────────────────────── */
.sbadge{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:600;margin-top:4px}
.sb-wa{background:var(--wa-lt);color:var(--wa)}
.sb-ok{background:var(--ok-lt);color:var(--ok)}
.sb-er{background:var(--er-lt);color:var(--er)}
.sb-p{background:var(--p-lt);color:var(--p)}

/* ── COLLAPSIBLE ─────────────────────────────────────────────────────── */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;padding:3px 0 7px}
.sec-hdr-l{display:flex;align-items:center;gap:8px}
.sec-hdr h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);margin:0}
.cbdg{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--p-lt);color:var(--p);font-size:11px;font-weight:700}
.chev{color:var(--mu);font-size:13px;transition:transform .22s ease}
.chev.rot{transform:rotate(180deg)}
.coll-body{overflow:hidden;transition:max-height .32s ease}
.sec-toggle-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.sec-toggle-btn:focus-visible{outline:2px solid var(--p);outline-offset:2px}

/* ── FORMS ───────────────────────────────────────────────────────────── */
.minput{width:100%;height:48px;border-radius:var(--rs);border:1.5px solid var(--bd);background:var(--card);color:var(--tx);padding:0 16px;font-size:15px;font-family:var(--fb);outline:none;transition:border-color .2s,box-shadow .2s}
.minput:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(28,123,110,.16)}
.minput::placeholder{color:var(--mu)}
.minput.ipl{padding-left:42px}
.minput.ipr{padding-right:42px}
.msel{width:100%;height:44px;border-radius:var(--rs);border:1.5px solid var(--bd);background:var(--card);color:var(--tx);padding:0 12px;font-size:14px;font-family:var(--fb);outline:none;cursor:pointer;transition:border-color .2s}
.msel:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(28,123,110,.16)}
.mtxt{width:100%;border-radius:var(--rs);border:1.5px solid var(--bd);background:var(--card);color:var(--tx);padding:12px 16px;font-size:14px;font-family:var(--fb);resize:none;outline:none;transition:border-color .2s}
.mtxt:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(28,123,110,.16)}
.mtxt::placeholder{color:var(--mu)}
.iwrap{position:relative}
.ii-l{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mu);font-size:15px;pointer-events:none}
.ii-r{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--mu);font-size:15px;background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;min-width:32px;min-height:32px}
.ii-r:focus-visible{outline:2px solid var(--p)}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.mbtn{display:flex;align-items:center;justify-content:center;gap:7px;height:48px;width:100%;padding:0 24px;border-radius:var(--rs);border:none;background:var(--gp);color:#fff;font-size:15px;font-weight:600;font-family:var(--fb);cursor:pointer;transition:opacity .2s,transform .15s}
.mbtn:hover{opacity:.9}
.mbtn:active{transform:scale(.98)}
.mbtn:disabled{opacity:.5;cursor:not-allowed}
.mbtn:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.mbtn-out{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 18px;border-radius:var(--rs);border:1.5px solid var(--bd);background:transparent;color:var(--tx);font-size:13.5px;font-weight:500;font-family:var(--fb);cursor:pointer;transition:all .2s;min-height:44px}
.mbtn-out:hover{border-color:var(--p);color:var(--p)}
.mbtn-out:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.mbtn-sm{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 14px;border-radius:9px;border:none;cursor:pointer;font-size:12.5px;font-weight:600;font-family:var(--fb);transition:opacity .2s;min-height:44px}
.mbtn-sm:hover{opacity:.88}
.mbtn-sm:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.bsm-ok{background:var(--ok);color:#fff}
.bsm-er{background:var(--er);color:#fff}
.bsm-p{background:var(--p);color:#fff}
.bsm-sf{background:var(--sf);color:var(--tx)}
.mbtn-dash{width:100%;height:44px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--rs);border:1.5px dashed var(--bd);background:transparent;color:var(--mu);font-size:13px;font-weight:500;font-family:var(--fb);cursor:pointer;transition:all .2s}
.mbtn-dash:hover{border-color:var(--p);color:var(--p);background:var(--p-lt)}
.ibtn{width:44px;height:44px;border-radius:10px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s;flex-shrink:0}
.ibtn-mu{background:var(--sf);color:var(--mu)}
.ibtn-mu:hover{background:var(--p-lt);color:var(--p)}
.ibtn-ok{background:var(--ok-lt);color:var(--ok)}
.ibtn-ok:hover{background:var(--ok);color:#fff}
.ibtn-er{background:var(--er-lt);color:var(--er)}
.ibtn:focus-visible{outline:2px solid var(--p);outline-offset:2px}

/* ── MODAL ───────────────────────────────────────────────────────────── */
.movl{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .22s}
.movl.show{opacity:1;pointer-events:all}
/* Prevent modal overflow on mobile (Phase 4) */
.mdlg{background:var(--card);border-radius:var(--rl);width:100%;max-width:480px;max-height:min(88vh,600px);overflow-y:auto;box-shadow:var(--sh3);transform:scale(.95) translateY(12px);transition:transform .22s;-webkit-overflow-scrolling:touch}
.movl.show .mdlg{transform:none}
.m-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 20px 0}
.m-title{font-size:17px;font-weight:700;font-family:var(--fh);color:var(--tx);margin:0}
.m-sub{font-size:13px;color:var(--mu);margin:5px 0 0}
.m-cls{width:36px;height:36px;border-radius:8px;border:none;background:var(--sf);color:var(--mu);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s;flex-shrink:0}
.m-cls:hover{background:var(--p-lt);color:var(--p)}
.m-cls:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.m-body{padding:16px 20px 20px}
.m-foot{padding:0 20px 20px;display:flex;gap:8px;justify-content:flex-end}
.frow{padding:12px 16px;border-bottom:1px solid var(--bd)}
.frow:last-child{border-bottom:none}
.flbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);margin-bottom:3px}
.fval{font-size:14px;font-weight:500;color:var(--tx)}

/* ── TOAST ───────────────────────────────────────────────────────────── */
#tc{position:fixed;bottom:calc(var(--nh) + 16px);left:50%;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:calc(100% - 32px);max-width:360px}
.mtoast{background:var(--card);border:1px solid var(--bd);border-radius:13px;padding:12px 16px;box-shadow:var(--sh3);display:flex;align-items:center;gap:10px;width:100%;pointer-events:all;animation:tin .28s ease both}
@keyframes tin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.mtoast .tt{font-size:13px;font-weight:600;color:var(--tx);flex:1}
.mtoast .ts{font-size:11px;color:var(--mu);display:block;margin-top:1px}

/* ── SUB WARNING ─────────────────────────────────────────────────────── */
.subw{max-width:960px;margin:12px auto 0;padding:0 16px}
.subw-in{background:rgba(217,119,6,.1);border:1px solid rgba(217,119,6,.28);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:8px}
.subw-in i{color:var(--wa);font-size:14px;flex-shrink:0}
.subw-in p{font-size:12px;font-weight:500;color:var(--wa);margin:0}

/* ── MEMBER FOOTER ───────────────────────────────────────────────────── */
.mfoot{text-align:center;padding:16px 16px 8px}
.mfoot p{font-size:11px;color:var(--mu);margin:0 0 5px}

/* ── CONTACT CARD ────────────────────────────────────────────────────── */
.ccard{background:var(--card);border-radius:var(--r);border:1px solid var(--bd);box-shadow:var(--sh);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ── TAB SWITCHER ────────────────────────────────────────────────────── */
.tab-sw{background:var(--card);border-radius:var(--r);border:1px solid var(--bd);box-shadow:var(--sh);padding:4px;display:flex;gap:4px}
.tab-btn{flex:1;height:38px;border-radius:8px;border:none;background:transparent;color:var(--mu);font-size:12.5px;font-weight:500;font-family:var(--fb);cursor:pointer;transition:all .2s;min-height:44px}
.tab-btn.active{background:var(--p);color:#fff}
.tab-btn:focus-visible{outline:2px solid var(--p);outline-offset:2px}

/* ── NOTIFICATIONS ───────────────────────────────────────────────────── */
.ncard{background:var(--card);border-radius:var(--r);border:1px solid var(--bd);box-shadow:var(--sh);padding:14px;display:flex;gap:12px}
.ncard.unread{border-left:3px solid var(--p)}

/* ── SETTINGS ROW ────────────────────────────────────────────────────── */
.srow{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bd);cursor:pointer;transition:background .15s;min-height:56px}
.srow:last-child{border-bottom:none}
.srow:hover{background:var(--sf)}
.srow:focus-visible{background:var(--sf);outline:2px solid var(--p);outline-offset:-2px}
.srow-l{display:flex;align-items:center;gap:13px}
.srow-tx p{font-size:13px;color:var(--mu);margin:1px 0 0}
.tog{position:relative;width:44px;height:24px;flex-shrink:0}
.tog input{opacity:0;width:0;height:0;position:absolute}
.togs{position:absolute;inset:0;background:var(--bd);border-radius:12px;cursor:pointer;transition:background .3s}
.togs::before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .3s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
input:checked+.togs{background:var(--p)}
input:checked+.togs::before{transform:translateX(20px)}
.tog input:focus-visible+.togs{outline:2px solid var(--p);outline-offset:2px;border-radius:12px}

/* ── MODULE ROW ──────────────────────────────────────────────────────── */
.modrow{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bd)}
.modrow:last-child{border-bottom:none}
.modrow-l{display:flex;align-items:center;gap:12px}

/* ── PROFILE AVATAR ──────────────────────────────────────────────────── */
.pavt{width:56px;height:56px;border-radius:50%;background:var(--gp);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;font-family:var(--fh);flex-shrink:0}

/* ── SOCIAL / PRODUCT GRID ───────────────────────────────────────────── */
.social-g,.prod-g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.social-it,.prod-it{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;border-radius:14px;background:var(--sf);text-decoration:none;cursor:pointer;transition:all .2s;min-height:44px}
.social-it:hover,.prod-it:hover{background:var(--ac);transform:translateY(-2px)}
.social-it:focus-visible,.prod-it:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.social-it i{font-size:20px}
.social-it span,.prod-it span{font-size:11px;font-weight:500;color:var(--mu);text-align:center;line-height:1.3}
.prod-em{font-size:28px}
.prod-it span{color:var(--tx)}

/* ── STARS ───────────────────────────────────────────────────────────── */
.stars{display:flex;justify-content:center;gap:6px}
.star-b{background:none;border:none;cursor:pointer;font-size:30px;color:#d1d5db;padding:4px;transition:all .2s;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.star-b.on{color:#fbbf24}
.star-b:hover{transform:scale(1.12)}
.star-b:focus-visible{outline:2px solid var(--p);outline-offset:2px;border-radius:6px}

/* ── QR ──────────────────────────────────────────────────────────────── */
.qr-wrap{background:#fff;border-radius:14px;padding:14px;display:inline-block;border:1px solid #e2e8f0}
.qr-val{background:var(--sf);border-radius:8px;padding:8px 14px;font-family:monospace;font-size:12px;color:var(--mu);word-break:break-all;text-align:center}

/* ── LOGIN ───────────────────────────────────────────────────────────── */
.login-pg{min-height:100vh;display:flex}
.login-l{display:none;flex:1;background:var(--gh);align-items:center;justify-content:center;padding:48px}
@media(min-width:992px){.login-l{display:flex}.login-r{flex:1}}
.login-r{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 16px}
.login-wrap{width:100%;max-width:380px}

/* ── SPLASH ──────────────────────────────────────────────────────────── */
.splash-pg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:24px 16px}
.splash-card{background:var(--card);border-radius:22px;padding:40px 28px;width:100%;max-width:400px;box-shadow:var(--sh3);border:1px solid var(--bd)}
.splash-ic{width:72px;height:72px;border-radius:20px;background:var(--gp);display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;margin:0 auto 22px;box-shadow:0 8px 22px rgba(28,123,110,.28)}

/* ── ADMIN ───────────────────────────────────────────────────────────── */
.asumm{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.asum-c{background:var(--card);border-radius:var(--r);border:1px solid var(--bd);box-shadow:var(--sh);padding:16px}

/* ── FILE UPLOAD ─────────────────────────────────────────────────────── */
.fupload{border:1.5px dashed var(--bd);border-radius:var(--rs);padding:16px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .2s}
.fupload:hover{border-color:var(--p);background:var(--ac)}

/* ── LICENSE ─────────────────────────────────────────────────────────── */
.lic-ok{border-left:4px solid var(--ok)}
.lic-er{border-left:4px solid var(--er)}

/* ── INFO ROW ────────────────────────────────────────────────────────── */
.irow{display:flex;align-items:center;gap:13px;padding:14px 16px;border-bottom:1px solid var(--bd)}
.irow:last-child{border-bottom:none}

/* ── ALERT ───────────────────────────────────────────────────────────── */
.alert-e{background:var(--er-lt);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--er)}
.sec-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mu);margin:0 0 10px}
.tx-p{color:var(--p)}.tx-mu{color:var(--mu)}.tx-ok{color:var(--ok)}.tx-er{color:var(--er)}.tx-wa{color:var(--wa)}
.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}

/* ── ACCESSIBILITY ───────────────────────────────────────────────────── */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Smooth page transitions (Phase 4) */
#pg{transition:opacity .15s ease}
#pg.transitioning{opacity:0}

::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--bd);border-radius:4px}

/* ── BOOT SPINNER (shown during config load) ─────────────────────────── */
.boot-spinner{
  width:28px;height:28px;border:3px solid var(--bd);
  border-top-color:var(--p);border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.95)}}