/* ================= NUConnect design system ================= */
:root{
  --green-950:#05281f;
  --green-900:#08352a;
  --green-800:#0b4436;
  --green-700:#0e5a45;
  --green-600:#137056;
  --green-500:#1c8b68;
  --green-300:#8fcbb6;
  --green-100:#e6f3ee;
  --green-50:#f1f8f5;
  --gold:#d9a441;
  --gold-700:#a9781f;
  --gold-100:#fbf0d7;
  --ink:#12211c;
  --ink-2:#33443d;
  --muted:#6f8179;
  --line:#e6ebe7;
  --bg:#f5f7f4;
  --card:#ffffff;
  --pink:#fdeef1; --pink-ink:#c2416a;
  --orange:#fdf1e3; --orange-ink:#b8742a;
  --blue:#e9f1fd; --blue-ink:#3568b3;
  --violet:#f0ecfd; --violet-ink:#6a51b8;
  --teal:#e6f5f2; --teal-ink:#1c8b7b;
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px;
  --sh-1:0 1px 2px rgba(10,40,30,.04), 0 8px 22px -18px rgba(10,40,30,.35);
  --sh-2:0 18px 44px -26px rgba(8,53,42,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
img{max-width:100%;display:block}
::selection{background:var(--green-100)}
.app-root{min-height:100vh}
.hidden{display:none!important}

/* ---------- generic ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px}
.sec-head h2{font-size:15.5px;font-weight:800;letter-spacing:-.2px;margin:0}
.sec-head a{font-size:12px;font-weight:700;color:var(--green-600);display:flex;align-items:center;gap:3px}
.muted{color:var(--muted)}
.tiny{font-size:11.5px}
.center{text-align:center}
.row{display:flex;align-items:center;gap:10px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stack{display:flex;flex-direction:column;gap:10px}
.grow{flex:1;min-width:0}
.mt8{margin-top:8px}.mt14{margin-top:14px}.mt20{margin-top:20px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;
  border-radius:999px;font-size:13.8px;font-weight:700;letter-spacing:-.1px;transition:transform .16s var(--ease),box-shadow .2s,background .2s}
.btn:active{transform:scale(.985)}
.btn-primary{background:linear-gradient(180deg,var(--green-700),var(--green-800));color:#fff;
  box-shadow:0 10px 24px -14px rgba(8,53,42,.9), inset 0 1px 0 rgba(255,255,255,.16)}
.btn-primary:hover{background:linear-gradient(180deg,var(--green-600),var(--green-700))}
.btn-gold{background:linear-gradient(180deg,#e6b455,var(--gold));color:#3a2a06;box-shadow:0 10px 22px -14px rgba(180,130,30,.8)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.btn-soft{background:var(--green-50);color:var(--green-700)}
.btn-block{width:100%}
.btn-sm{height:38px;font-size:12.2px;padding:0 14px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* fields */
.field{display:block;margin-bottom:12px}
.field>span.lbl{display:block;font-size:11.8px;font-weight:700;color:var(--ink-2);margin:0 0 6px 4px}
.input-wrap{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border:1px solid var(--line);
  border-radius:999px;background:#fbfcfb;transition:border-color .2s,box-shadow .2s,background .2s}
.input-wrap:focus-within{border-color:var(--green-500);background:#fff;box-shadow:0 0 0 4px rgba(28,139,104,.1)}
.input-wrap svg{flex:0 0 auto;color:#8ba197}
.input-wrap input,.input-wrap select{border:0;background:none;outline:none;width:100%;height:100%;font-size:13.6px;font-weight:500}
.input-wrap input::placeholder{color:#a9b8b1;font-weight:500}
.input-wrap .eye{border:0;background:none;color:#8ba197;display:grid;place-items:center;padding:4px}
textarea{width:100%;border:1px solid var(--line);background:#fbfcfb;border-radius:var(--r);padding:12px 14px;
  outline:none;resize:vertical;min-height:84px;font-size:13.4px;line-height:1.55}
textarea:focus{border-color:var(--green-500);background:#fff;box-shadow:0 0 0 4px rgba(28,139,104,.1)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;align-items:center;gap:8px;font-size:12.3px;color:var(--ink-2);font-weight:600}
.check input{width:17px;height:17px;accent-color:var(--green-700);border-radius:5px}
.hint{font-size:11.6px;color:var(--muted);margin-top:6px}
.err-msg{background:#fdeeec;color:#a5342a;border:1px solid #f3cfc8;border-radius:12px;padding:10px 12px;font-size:12.4px;font-weight:600;margin-bottom:10px}

/* ================= AUTH ================= */
.auth{min-height:100vh;background:#fff}
.auth-hero{position:relative;min-height:47vh;padding:22px 20px 46px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}
.auth-hero::before{content:"";position:absolute;inset:0;background:url('/img/masjid_dome_night_7.jpg') center 42%/cover no-repeat;transform:scale(1.02)}
.auth-hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(4,32,25,.82) 0%,rgba(4,36,28,.55) 34%,rgba(4,39,30,.72) 74%,rgba(4,45,35,.94) 100%)}
.auth-hero>*{position:relative;z-index:2}
.brand-line{display:flex;align-items:center;gap:10px}
.brand-mark{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.26);display:grid;place-items:center;color:#fff}
.brand-txt b{display:block;font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:1.1}
.brand-txt span{font-size:9.6px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:600}
.auth-headline{margin-top:auto;padding-top:26px}
.auth-headline h1{font-size:29px;line-height:1.16;font-weight:800;letter-spacing:-.9px;margin:0 0 10px;max-width:9.6em}
.auth-headline h1 em{font-style:normal;color:#f0c56b}
.auth-headline p{margin:0;font-size:12.6px;line-height:1.6;color:rgba(255,255,255,.78);max-width:30ch;font-weight:500}
.auth-card{position:relative;margin-top:-26px;background:#fff;border-radius:28px 28px 0 0;padding:22px 20px 30px;
  box-shadow:0 -18px 40px -30px rgba(4,40,30,.6);z-index:3}
.auth-card h2{font-size:18px;font-weight:800;letter-spacing:-.4px;margin:0 0 3px}
.auth-card .sub{font-size:12.2px;color:var(--muted);margin:0 0 16px}
.divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:#9aada5;font-size:11.5px;font-weight:600}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--line)}
.google-btn{width:100%;height:48px;border:1px solid var(--line);border-radius:999px;background:#fff;
  display:flex;align-items:center;justify-content:center;gap:10px;font-size:13.4px;font-weight:700;color:var(--ink-2)}
.google-btn:hover{background:#fafbfa}
.auth-portal{margin:14px 0 0;text-align:center;font-size:12px;font-weight:700}
.auth-portal a{color:var(--green);border-bottom:1px solid rgba(14,90,69,.25);padding-bottom:1px}
.auth-foot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;font-size:10.6px;color:#9aada5}
.auth-foot .sup{font-weight:600;color:#b3c1ba}
.auth-foot img{height:22px;opacity:.75;filter:grayscale(.2)}
.auth-alt{text-align:center;font-size:12.6px;color:var(--muted);margin-top:16px;font-weight:500}
.auth-alt a{color:var(--green-700);font-weight:800}

/* ================= SHELL ================= */
.shell{min-height:100vh;padding-bottom:96px}
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(230,235,231,.8);padding:12px 16px;display:flex;align-items:center;gap:12px}
.icon-btn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--ink-2);position:relative}
.icon-btn:hover{background:var(--green-50)}
.topbar .brand-mini{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}
.topbar .brand-mini b{font-size:14.6px;font-weight:800;letter-spacing:-.3px;color:var(--green-800)}
.dot-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:#e04a3f;color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}

.loc-row{display:flex;align-items:center;gap:10px;padding:14px 16px 6px}
.loc-pin{width:38px;height:38px;border-radius:12px;background:var(--green-50);color:var(--green-700);display:grid;place-items:center}
.loc-txt b{display:block;font-size:13.4px;font-weight:800;letter-spacing:-.2px;line-height:1.2}
.loc-txt span{font-size:11.2px;color:var(--muted);font-weight:500}
.loc-chev{color:#9aada5;display:grid;place-items:center}

.page{padding:0 16px 26px;animation:fade .28s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* banner */
.banner{position:relative;margin-top:12px;border-radius:18px;overflow:hidden;color:#fff;padding:18px 18px 18px 18px;
  min-height:112px;display:flex;align-items:center;background:var(--green-800)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(92deg,rgba(5,48,37,.95) 12%,rgba(8,64,49,.72) 58%,rgba(9,70,54,.35) 100%)}
.banner .bn-in{position:relative;z-index:2;display:flex;align-items:center;gap:12px;width:100%}
.banner h3{margin:0;font-size:15.4px;line-height:1.32;font-weight:800;letter-spacing:-.3px;max-width:12em}
.banner p{margin:4px 0 0;font-size:10.8px;color:rgba(255,255,255,.75);font-weight:600;letter-spacing:.02em}
.banner .bn-go{margin-left:auto;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;flex:0 0 auto}

/* menu grid */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;margin-top:18px}
.menu-tile{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:2px;
  border-radius:14px;transition:transform .16s var(--ease)}
.menu-tile:active{transform:scale(.95)}
.menu-ic{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;position:relative;
  box-shadow:inset 0 0 0 1px rgba(10,40,30,.04)}
.menu-tile span{font-size:10.6px;font-weight:700;line-height:1.28;color:var(--ink-2);letter-spacing:-.1px}
.menu-ic.g{background:var(--green-100);color:#137056}
.menu-ic.o{background:var(--orange);color:var(--orange-ink)}
.menu-ic.p{background:var(--pink);color:var(--pink-ink)}
.menu-ic.b{background:var(--blue);color:var(--blue-ink)}
.menu-ic.v{background:var(--violet);color:var(--violet-ink)}
.menu-ic.t{background:var(--teal);color:var(--teal-ink)}
.menu-ic.y{background:var(--gold-100);color:var(--gold-700)}

/* masjid card */
.masjid-hero{position:relative;border-radius:22px;overflow:hidden;height:210px;margin-top:14px;color:#fff}
.masjid-hero img{width:100%;height:100%;object-fit:cover}
.masjid-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,35,27,.05) 30%,rgba(4,35,27,.88) 100%)}
.masjid-hero .mh-in{position:absolute;left:0;right:0;bottom:0;padding:16px;z-index:2}
.masjid-hero h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.4px}
.masjid-hero .mh-meta{display:flex;align-items:center;gap:6px;font-size:11.4px;color:rgba(255,255,255,.8);margin-top:4px;font-weight:600}
.verified{display:inline-flex;align-items:center;gap:4px;background:rgba(28,139,104,.92);color:#fff;
  font-size:9.6px;font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.02em}

.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stat-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 10px;text-align:center}
.stat-box b{display:block;font-size:16px;font-weight:800;letter-spacing:-.4px;color:var(--green-800)}
.stat-box span{font-size:10px;color:var(--muted);font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11px;font-weight:700;color:var(--green-700);background:var(--green-50);border:1px solid #dbeee6;
  padding:6px 11px;border-radius:999px}
.chip.gold{background:var(--gold-100);border-color:#f2e0b8;color:var(--gold-700)}
.chip.grey{background:#f3f5f3;border-color:#e6ebe7;color:#5e716a}

/* news list */
.news-card{display:flex;gap:12px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh-1);transition:transform .16s var(--ease)}
.news-card:active{transform:scale(.99)}
.news-card img{width:92px;height:78px;border-radius:13px;object-fit:cover;flex:0 0 auto}
.news-card .nc-b{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.news-card h3{margin:0;font-size:12.8px;font-weight:800;line-height:1.35;letter-spacing:-.15px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card .nc-m{font-size:10.6px;color:var(--muted);font-weight:600}
.tag{font-size:9.4px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-700);
  background:var(--gold-100);padding:3px 7px;border-radius:6px;display:inline-block;width:fit-content}
.tag.news{color:var(--green-700);background:var(--green-100)}

/* kajian */
.kajian-card{display:flex;gap:12px;padding:12px;border:1px solid var(--line);background:#fff;border-radius:18px;box-shadow:var(--sh-1)}
.date-badge{flex:0 0 auto;width:52px;height:56px;border-radius:14px;background:linear-gradient(180deg,var(--green-100),#dcefe7);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--green-800)}
.date-badge b{font-size:17px;font-weight:800;line-height:1}
.date-badge span{font-size:9.2px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.kajian-card h3{margin:0 0 2px;font-size:12.9px;font-weight:800;line-height:1.35;letter-spacing:-.15px}
.kajian-card .k-meta{font-size:10.8px;color:var(--muted);font-weight:600;display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px}
.progress{height:5px;border-radius:99px;background:#eef2ef;overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;border-radius:99px;min-width:5px;background:linear-gradient(90deg,var(--green-500),var(--green-300))}

/* products */
.prod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prod{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;transition:transform .16s var(--ease)}
.prod:active{transform:scale(.985)}
.prod img{width:100%;aspect-ratio:1.15/1;object-fit:cover}
.prod .p-b{padding:10px 11px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.prod h4{margin:0;font-size:12.1px;font-weight:700;line-height:1.35;letter-spacing:-.1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:33px}
.prod .p-price{font-size:12.8px;font-weight:800;color:var(--green-700);margin-top:auto}
.prod .p-seller{font-size:10px;color:var(--muted);font-weight:600}

/* list rows */
.list{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-1)}
.list-row{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid #f0f3f1}
.list-row:last-child{border-bottom:0}
.list-row .lr-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--green-50);color:var(--green-700);flex:0 0 auto}
.list-row .lr-b{flex:1;min-width:0}
.list-row .lr-b b{display:block;font-size:12.8px;font-weight:700;letter-spacing:-.1px}
.list-row .lr-b span{font-size:10.9px;color:var(--muted);font-weight:600}
.list-row .lr-r{text-align:right;flex:0 0 auto}
.list-row .lr-r b{display:block;font-size:12.8px;font-weight:800;letter-spacing:-.2px}
.list-row .lr-r span{font-size:10.2px;font-weight:700;color:var(--green-600)}

/* status pill */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.6px;font-weight:800;padding:5px 10px;border-radius:999px;
  letter-spacing:.01em;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.8}
.p-wait{background:#fff8e8;color:#8a6212}
.p-ok{background:#ecf8f1;color:#116447}
.p-done{background:#eef2f9;color:#2a4b74}
.p-cancel{background:#fdf0ee;color:#a5342a}
.p-info{background:var(--green-100);color:var(--green-700)}

/* bottom nav */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px -20px rgba(8,53,42,.5)}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 0;color:#8ea29a;
  font-size:9.8px;font-weight:700;transition:color .2s}
.bn-item.on{color:var(--green-700)}
.bn-item.on .bn-ic{background:var(--green-100)}
.bn-ic{width:38px;height:26px;border-radius:9px;display:grid;place-items:center;transition:background .2s}

/* sub page header */
.sub-head{position:sticky;top:0;z-index:38;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  padding:12px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(230,235,231,.7)}
.sub-head h1{margin:0;font-size:15px;font-weight:800;letter-spacing:-.3px;flex:1;text-align:center;padding-right:38px}
.sub-head .icon-btn{margin-left:-6px}

/* booking / forms cards */
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--sh-1)}
.form-card h3{margin:0 0 12px;font-size:13.4px;font-weight:800;letter-spacing:-.2px}
.price-line{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px dashed var(--line);margin-top:12px}
.price-line b{font-size:15px;font-weight:800;color:var(--green-800);letter-spacing:-.3px}

/* success screen */
.success{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 20px}
.success .ok-circle{width:76px;height:76px;border-radius:50%;background:var(--green-100);color:var(--green-700);
  display:grid;place-items:center;margin-bottom:16px;box-shadow:0 0 0 12px rgba(28,139,104,.06)}
.success h2{margin:0 0 6px;font-size:18px;font-weight:800;letter-spacing:-.4px}
.success p{margin:0 0 4px;font-size:12.4px;color:var(--muted);font-weight:500;max-width:30ch}
.success .code{font-size:12.6px;font-weight:800;color:var(--green-800);background:var(--green-50);
  border:1px dashed #cfe6dc;padding:8px 14px;border-radius:10px;margin:12px 0 18px;letter-spacing:.04em}

/* profile */
.profile-card{display:flex;align-items:center;gap:14px;padding:18px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,var(--green-800),var(--green-600) 60%,#1d8f6b);position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.profile-card::after{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%)}
.avatar{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.4);
  display:grid;place-items:center;font-size:18px;font-weight:800;letter-spacing:-.5px;color:#fff;flex:0 0 auto}
.profile-card b{display:block;font-size:15px;font-weight:800;letter-spacing:-.3px}
.profile-card span{font-size:11.4px;color:rgba(255,255,255,.78);font-weight:600}
.profile-card .pc-edit{margin-left:auto;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  color:#fff;border-radius:999px;height:32px;padding:0 12px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px}

/* admin */
.admin-top{background:linear-gradient(160deg,var(--green-900),var(--green-700));color:#fff;padding:22px 18px 64px;border-radius:0 0 26px 26px;margin:-16px -16px 0}
.admin-top h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.4px}
.admin-top p{margin:4px 0 0;font-size:11.8px;color:rgba(255,255,255,.72);font-weight:600}
.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:-44px;padding:0 16px;position:relative;z-index:2}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;box-shadow:var(--sh-1)}
.kpi .k-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--green-50);color:var(--green-700);margin-bottom:8px}
.kpi .k-l{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.kpi .k-v{font-size:17px;font-weight:800;letter-spacing:-.5px;color:var(--ink);margin-top:2px}
.kpi .k-s{font-size:10.2px;color:var(--green-600);font-weight:700;margin-top:2px}
.bars{display:flex;align-items:flex-end;gap:5px;height:96px;padding:10px 4px 0}
.bars .bar{flex:1;border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,var(--green-500),var(--green-300));min-height:4px;position:relative}
.bars .bar:hover{filter:brightness(1.05)}
.donut{width:104px;height:104px;border-radius:50%;position:relative;flex:0 0 auto}
.donut::after{content:"";position:absolute;inset:16px;background:#fff;border-radius:50%}
.legend{display:flex;flex-direction:column;gap:8px;font-size:11px}
.legend .lg{display:flex;align-items:center;gap:7px;justify-content:space-between}
.legend .lg i{width:8px;height:8px;border-radius:3px;display:inline-block;margin-right:5px}

/* sheet / modal */
.sheet-root{position:fixed;inset:0;z-index:90;pointer-events:none}
.sheet-root.open{pointer-events:auto}
.sheet-backdrop{position:absolute;inset:0;background:rgba(6,32,25,.42);backdrop-filter:blur(3px);opacity:0;transition:opacity .24s}
.sheet-root.open .sheet-backdrop{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .3s var(--ease);max-height:88vh;overflow:auto}
.sheet-root.open .sheet{transform:none}
.sheet .grab{width:42px;height:4px;border-radius:99px;background:#e3e9e5;margin:4px auto 12px}
.sheet h3{margin:0 0 4px;font-size:15px;font-weight:800;letter-spacing:-.3px}
.sheet .sheet-sub{font-size:11.8px;color:var(--muted);margin:0 0 14px;font-weight:500}

/* toast */
.toast-wrap{position:fixed;left:0;right:0;top:14px;z-index:120;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:#0d2f26;color:#fff;font-size:12.4px;font-weight:600;padding:11px 16px;border-radius:999px;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);display:flex;align-items:center;gap:8px;max-width:88vw;
  animation:tin .26s var(--ease)}
.toast.ok{background:#0f5e48}
.toast.err{background:#8e2f27}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* empty state */
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .em-ic{width:56px;height:56px;border-radius:18px;background:var(--green-50);color:var(--green-600);
  display:grid;place-items:center;margin:0 auto 12px}
.empty b{display:block;font-size:13px;color:var(--ink-2);margin-bottom:3px}
.empty span{font-size:11.6px}

/* skeleton */
.sk{background:linear-gradient(90deg,#eef2ef 25%,#f7faf8 37%,#eef2ef 63%);background-size:400% 100%;
  animation:sh 1.2s ease-in-out infinite;border-radius:10px}
@keyframes sh{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ================= DESKTOP ================= */
.side-nav{display:none}
@media (min-width:900px){
  body{background:#eef2ee}
  .app-root{display:flex;min-height:100vh}
  .side-nav{display:flex;flex-direction:column;width:252px;flex:0 0 252px;background:linear-gradient(180deg,var(--green-900),var(--green-800) 55%,#0a4c3c);
    color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh;z-index:45}
  .side-nav .brand-line{margin-bottom:26px}
  .side-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;font-size:12.8px;
    font-weight:700;color:rgba(255,255,255,.72);transition:background .2s,color .2s;margin-bottom:2px}
  .side-link:hover{background:rgba(255,255,255,.08);color:#fff}
  .side-link.on{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  .side-nav .sn-sep{font-size:9.4px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);
    font-weight:800;margin:18px 12px 8px}
  .side-foot{margin-top:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
    border-radius:16px;padding:12px;font-size:10.8px;color:rgba(255,255,255,.7);line-height:1.5}
  .shell{padding-bottom:0;flex:1;min-width:0}
  .topbar{display:none}
  .loc-row{max-width:1000px;margin:0 auto;padding:24px 28px 0}
  .page{max-width:1000px;margin:0 auto;padding:0 28px 40px}
  .bottom-nav{display:none}
  .menu-grid{grid-template-columns:repeat(6,1fr);gap:16px 12px;margin-top:20px}
  .menu-ic{width:56px;height:56px}
  .menu-tile span{font-size:11.4px}
  .prod-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sub-head{max-width:1000px;margin:0 auto;border-radius:0 0 16px 16px}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-46%) scale(.97);width:520px;
    border-radius:22px;padding:11px 22px 22px;max-height:84vh}
  .sheet-root.open .sheet{transform:translate(-50%,-50%) scale(1)}
  .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1000px;margin:-44px auto 0;padding:0 28px}
  .admin-top{padding:26px 28px 66px;margin:0 -28px}
  .legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 26px}
  .legend .lg{justify-content:flex-start}
  .legend .lg b{margin-left:auto}
  .donut{width:132px;height:132px}
  .donut::after{inset:20px}
  .admin-top .at-in{max-width:1000px;margin:0 auto}
  .two-col{display:grid;grid-template-columns:1.35fr .95fr;gap:16px;align-items:start}
}

/* auth desktop */
@media (min-width:900px){
  .auth{display:grid;grid-template-columns:1.02fr .98fr;min-height:100vh;width:100%;background:#fff}
  .auth-hero{min-height:100vh;padding:36px 46px 40px;border-radius:0}
  .auth-hero::after{background:linear-gradient(160deg,rgba(4,32,25,.9),rgba(4,40,30,.55) 45%,rgba(4,42,32,.9))}
  .auth-headline h1{font-size:40px;letter-spacing:-1.4px;max-width:10em}
  .auth-headline p{font-size:13.6px;max-width:34ch}
  .auth-card{margin:0;box-shadow:none;border-radius:0;display:flex;flex-direction:column;justify-content:center;
    padding:40px 54px;max-width:none}
  .auth-card .auth-in{width:100%;max-width:368px;margin:0 auto}
  .auth-card h2{font-size:23px}
  .auth-card .sub{margin-bottom:20px}
  .auth-foot{justify-content:flex-start;margin-top:28px}
}
@media (max-width:360px){
  .menu-ic{width:46px;height:46px;border-radius:15px}
  .menu-tile span{font-size:9.8px}
  .auth-headline h1{font-size:26px}
}