/* =========================================================
   WANGSA PILAR — LAYANAN PENGADUAN WARGA
   Tema: cerah, modern, bersih — putih/lavender + aksen warna-warni
   ========================================================= */
:root{
  --bg:#F6F7FB;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F1F3F9;
  --surface-hover:#E9EDF7;
  --ink:#1E2233;
  --ink-soft:#5B6178;
  --ink-faint:#9AA0B4;
  --gold:#C6A15B;
  --gold-soft:#E8D4A5;
  --gold-dark:#8C6A26;
  --emerald:#16A34A;
  --emerald-bg:rgba(22,163,74,0.12);
  --amber:#D97706;
  --amber-bg:rgba(217,119,6,0.12);
  --navy-acc:#3B82F6;
  --navy-bg:rgba(59,130,246,0.12);
  --brick:#EF4444;
  --brick-bg:rgba(239,68,68,0.12);
  --line:rgba(30,34,51,0.09);
  --line-soft:rgba(30,34,51,0.05);
  --radius:14px;
  --radius-sm:9px;
  --shadow-lg:0 24px 60px -20px rgba(30,34,51,0.18);
  --shadow-md:0 10px 30px -12px rgba(30,34,51,0.12);
  --shadow-gold:0 8px 22px -8px rgba(198,161,91,0.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  height:100%;
}
body{
  margin:0;
  min-width:320px; /* HP layar terkecil yang masih umum dipakai */
  overflow-x:hidden;
  background:
    radial-gradient(1100px 550px at 12% -10%, rgba(255,178,140,0.28), transparent 60%),
    radial-gradient(1000px 520px at 100% 0%, rgba(96,165,250,0.22), transparent 55%),
    radial-gradient(900px 500px at 50% 100%, rgba(52,211,153,0.14), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  min-height:100dvh; /* browser modern: hindari lompatan tinggi akibat address bar HP */
  /* Area aman iPhone/iPad bertakik (notch) & indikator home */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
h1,h2,h3,.display{
  font-family:'Playfair Display',serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;text-decoration:none;}
button{font-family:'Inter',sans-serif;cursor:pointer;-webkit-appearance:none;appearance:none;}
input,select,textarea{font-family:'Inter',sans-serif;}
input[type=text],input[type=tel],input[type=search],textarea{-webkit-appearance:none;appearance:none;border-radius:var(--radius-sm);}
img,video{max-width:100%;height:auto;}
button,[role="button"],.navbtn,.btn{touch-action:manipulation;} /* hilangkan delay 300ms tap di browser lama */
::selection{background:var(--gold-soft);color:#3A1A0C;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#D7DCEB;border-radius:10px;}

#app{min-height:100vh;display:flex;flex-direction:column;}

/* ---------------- Topbar ---------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(14px);
  position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;}
.brand-logo{height:40px;width:auto;display:block;border-radius:8px;}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(145deg,#E8D4A5,#C6A15B);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-weight:700;font-size:16px;
  box-shadow:var(--shadow-gold);
}
.brand-text .t1{font-family:'Playfair Display',serif;font-weight:600;font-size:17px;line-height:1.1;letter-spacing:.01em;}
.brand-text .t2{font-size:10.5px;color:var(--ink-faint);letter-spacing:.09em;text-transform:uppercase;margin-top:2px;}
.topnav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.topnav::-webkit-scrollbar{display:none;}
.navbtn{
  background:transparent;border:1px solid transparent;
  padding:9px 16px;border-radius:999px;
  font-size:13px;color:var(--ink-soft);font-weight:500;
  transition:all .18s ease;
  flex-shrink:0;white-space:nowrap;
}
.navbtn:hover{background:var(--surface-2);color:var(--ink);}
.navbtn.active{background:linear-gradient(120deg,#E8D4A5,#C6A15B);color:#fff;font-weight:600;}

main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:0 28px 70px;}

/* ---------------- Hero ---------------- */
.hero{
  padding:64px 0 8px;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:50px;align-items:center;
}
.hero .eyebrow{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);
  font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.hero .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--gold);display:inline-block;}
.hero h1{font-size:46px;line-height:1.12;color:var(--ink);}
.hero h1 em{color:var(--gold-dark);font-style:normal;}
.hero p.lead{font-size:16px;color:var(--ink-soft);line-height:1.7;margin-top:18px;max-width:48ch;}
.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}
.trust-row{display:flex;gap:26px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap;}
.trust-row .stat b{font-family:'Playfair Display',serif;font-size:24px;display:block;color:var(--gold-dark);}
.trust-row .stat span{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}

.btn{
  border-radius:999px;padding:13px 24px;font-size:14px;font-weight:600;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{transform:translateY(-2px);background:var(--surface-hover);}
.btn.gold{background:linear-gradient(120deg,#E8D4A5,#C6A15B);color:#fff;border:none;box-shadow:var(--shadow-gold);}
.btn.gold:hover{box-shadow:0 12px 30px -8px rgba(198,161,91,0.55);}
.btn.brick{background:linear-gradient(120deg,#F87171,#EF4444);color:#fff;border:none;}
.btn.secondary{background:#fff;color:var(--ink-soft);border:1px solid var(--line);}
.btn.secondary:hover{color:var(--ink);border-color:var(--gold);}
.btn.sm{padding:8px 16px;font-size:12.5px;}
.btn.block{width:100%;justify-content:center;}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}

/* Hero photo panel */
.hero-photo{
  position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.08) contrast(1.02);}
.hero-photo .caption{
  position:absolute;left:16px;right:16px;bottom:16px;
  background:rgba(20,22,35,0.72);backdrop-filter:blur(6px);
  color:#fff;padding:14px 16px;border-radius:12px;font-size:12.5px;line-height:1.55;
  border:1px solid rgba(255,255,255,0.1);
}
.hero-photo .caption b{font-family:'Playfair Display',serif;font-weight:600;display:block;font-size:15px;margin-bottom:3px;color:#FFC9A8;}

/* Kategori strip */
.kat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:44px 0 8px;}
.kat-tile{
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;background:var(--surface);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.kat-tile:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow-md);}
.kat-tile .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.kat-tile .ic svg{width:16px;height:16px;}
.kat-tile b{display:block;font-size:14.5px;margin-bottom:4px;color:var(--ink);}
.kat-tile span{font-size:12px;color:var(--ink-faint);line-height:1.5;display:block;}

/* Section headers */
.section-head{margin:58px 0 22px;}
.section-head .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:10px;}
.section-head .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--gold);display:inline-block;}
.section-head h2{font-size:28px;}
.section-head p{color:var(--ink-soft);font-size:14px;margin-top:8px;max-width:62ch;line-height:1.6;}

/* Kawasan cards */
.kawasan-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:56px;}
.kawasan-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;box-shadow:var(--shadow-md);}
.kawasan-card:hover{border-color:var(--gold);transform:translateY(-3px);}
.kawasan-card .ph{aspect-ratio:16/10;overflow:hidden;}
.kawasan-card .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.kawasan-card:hover .ph img{transform:scale(1.05);}
.kawasan-card .body{padding:20px 22px 22px;}
.kawasan-card .loc{font-size:11px;color:var(--gold-dark);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;font-weight:700;}
.kawasan-card h3{font-size:19px;margin-bottom:9px;}
.kawasan-card p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0 0 16px;}

/* Flowchart edukasi "Cara kerja sistem" */
.flow-chart{display:flex;align-items:stretch;gap:6px;margin-bottom:20px;}
.flow-step{
  flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 16px;text-align:center;box-shadow:var(--shadow-md);position:relative;
  transition:transform .18s ease, border-color .18s ease;
}
.flow-step:hover{transform:translateY(-3px);border-color:var(--gold);}
.flow-num{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:24px;height:24px;border-radius:50%;background:linear-gradient(120deg,#E8D4A5,#C6A15B);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-gold);
}
.flow-ic{width:40px;height:40px;border-radius:12px;background:#FFF3EC;color:var(--gold-dark);display:flex;align-items:center;justify-content:center;margin:10px auto 12px;}
.flow-ic svg{width:19px;height:19px;}
.flow-step b{display:block;font-size:13.5px;margin-bottom:6px;color:var(--ink);}
.flow-step span{font-size:11.5px;color:var(--ink-faint);line-height:1.5;display:block;}
.flow-arrow{flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gold);font-weight:700;width:20px;}

.sop-list{display:flex;flex-direction:column;gap:16px;}
.sop-item{display:flex;gap:14px;align-items:flex-start;}
.sop-n{
  width:26px;height:26px;border-radius:50%;background:linear-gradient(120deg,#E8D4A5,#C6A15B);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;
}
.sop-item b{display:block;font-size:13.5px;margin-bottom:4px;color:var(--ink);}
.sop-item p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0;}

.alert-banner{
  display:flex;align-items:center;gap:14px;background:var(--amber-bg);border:1px solid #FBBF24;
  border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:18px;font-size:13px;color:#92620A;
}
.alert-banner .alert-ic{font-size:22px;flex-shrink:0;}
.alert-banner b{color:#7A4D08;}

.tip-box{
  background:var(--navy-bg);border:1px solid rgba(59,130,246,0.25);border-radius:var(--radius-sm);
  padding:14px 18px;font-size:13px;color:#1e4f8f;line-height:1.6;margin-bottom:20px;
}
.tip-box b{color:var(--navy-acc);}

@media (max-width:900px){
  .flow-chart{flex-direction:column;align-items:stretch;gap:0;}
  .flow-step{padding:18px 20px;text-align:left;display:flex;align-items:center;gap:14px;}
  .flow-num{position:static;transform:none;flex-shrink:0;}
  .flow-ic{margin:0;flex-shrink:0;}
  .flow-text{flex:1;}
  .flow-step b{margin-bottom:3px;}
  .flow-arrow{width:auto;height:20px;transform:rotate(90deg);margin:-2px auto;}
}

/* Cards */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-md);
}
.card + .card{margin-top:20px;}
.section-title{font-size:23px;margin-bottom:6px;}
.section-sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:26px;line-height:1.55;}

/* Dashboard metrics */
.metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px;}
.metric-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-md);}
.metric-card .lbl{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px;}
.metric-card .num{font-family:'Playfair Display',serif;font-size:27px;font-weight:600;color:var(--ink);}
.metric-card.accent{background:linear-gradient(135deg,#FFF3EC,#FFE3D3);border-color:#FFD3B8;}
.metric-card.accent .num{color:var(--gold-dark);}

.pos svg{width:11px;height:11px;}

/* Forms */
.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px;}
.field .hint{font-size:12px;color:var(--ink-faint);margin-top:5px;line-height:1.5;}
.field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=password],.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:14px;background:var(--surface-2);color:var(--ink);transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);}
.field textarea{resize:vertical;min-height:100px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,161,91,0.15);background:#fff;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

/* category picker */
.kat-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.kat-pick label,.yn-opt{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 10px;text-align:center;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;background:var(--surface-2);
  transition:all .15s ease;
}
.kat-pick input,.yn-opt input{display:none;}
.kat-opt.sel,.yn-opt.sel{border-color:currentColor;background:var(--k-bg);color:var(--k-fg);}

/* Upload boxes (foto & video) */
.upload-box{
  border:1.5px dashed var(--line);border-radius:var(--radius-sm);padding:22px;text-align:center;
  color:var(--ink-faint);font-size:13px;cursor:pointer;transition:all .15s ease;background:var(--surface-2);
}
.upload-box:hover{border-color:var(--gold);color:var(--gold-dark);background:#FFF4EE;}

/* Email field — ikon + indikator validitas real-time */
.field-email{position:relative;}
.field-email input[type=email]{padding-left:42px;padding-right:38px;}
.field-email .email-ic{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--ink-faint);pointer-events:none;transition:color .15s ease;
}
.field-email .email-state{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;display:none;align-items:center;justify-content:center;pointer-events:none;
}
.field-email .email-state svg{width:14px;height:14px;}
.field-email.valid .email-ic{color:#4FA184;}
.field-email.valid .email-state{display:flex;color:#4FA184;}
.field-email.invalid .email-ic{color:var(--brick, #C0392B);}
.field-email.invalid .email-state{display:flex;color:var(--brick, #C0392B);}
.field-email.invalid input[type=email]{border-color:var(--brick, #C0392B);}
.upload-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;}
.thumb{position:relative;width:80px;height:80px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);background:#000;}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;}
.thumb .vidtag{position:absolute;bottom:3px;left:3px;background:rgba(0,0,0,.7);color:#fff;font-size:9px;padding:2px 5px;border-radius:4px;letter-spacing:.03em;}
.thumb .rm{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.65);color:#fff;border:none;width:19px;height:19px;border-radius:50%;font-size:11px;line-height:1;}

/* status badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;}
.b-diterima{background:var(--navy-bg);color:var(--navy-acc);}
.b-ditinjau{background:var(--amber-bg);color:var(--amber);}
.b-dikerjakan{background:rgba(198,161,91,0.16);color:var(--gold-dark);}
.b-selesai{background:var(--emerald-bg);color:var(--emerald);}
.b-ditolak{background:var(--brick-bg);color:var(--brick);}

.disclaimer-box{
  margin-top:12px;padding:16px 18px;border:1px solid #FBBF24;background:var(--amber-bg);
  border-radius:var(--radius-sm);font-size:12.8px;line-height:1.65;color:#92620A;
}
.disclaimer-box b{color:var(--gold-dark);}
.disclaimer-box label{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:12.5px;cursor:pointer;color:var(--ink-soft);}
.disclaimer-box input[type=checkbox]{margin-top:2px;flex-shrink:0;}
.duration-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--navy-bg);color:var(--navy-acc);}
.reject-box{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);}
.reject-box textarea{width:100%;min-height:66px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13px;resize:vertical;margin-bottom:10px;background:#fff;color:var(--ink);}

/* Road tracker */
.road-wrap{margin:30px 0 10px;}
.road{position:relative;height:6px;background:var(--surface-2);border-radius:3px;margin:0 20px;}
.road-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#E8D4A5,#C6A15B);border-radius:3px;transition:width .5s ease;}
.pos-row{display:flex;justify-content:space-between;margin:0 20px;position:relative;top:-10px;}
.pos{width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ink-faint);}
.pos.done{border-color:var(--gold);background:var(--gold);color:#fff;}
.pos.now{border-color:var(--gold);background:#fff;color:var(--gold-dark);box-shadow:0 0 0 4px rgba(198,161,91,0.18);}
.stage-labels{display:flex;justify-content:space-between;margin-top:12px;gap:8px;}
.stage-labels div{flex:1;text-align:center;font-size:11.5px;color:var(--ink-faint);}
.stage-labels div.on{color:var(--ink);font-weight:600;}
.stage-note{
  background:#FFF7F2;border-left:3px solid var(--gold);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:14px 16px;font-size:13.5px;color:var(--ink-soft);margin-top:20px;line-height:1.6;
}

/* chat */
.chat-box{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);padding:16px;max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:11px;}
.msg{max-width:78%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;}
.msg .who{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;opacity:.7;}
.msg.warga{align-self:flex-start;background:#fff;border:1px solid var(--line);}
.msg.petugas{align-self:flex-end;background:linear-gradient(120deg,#E8D4A5,#C6A15B);color:#fff;}
.chat-input-row{display:flex;gap:9px;margin-top:14px;}
.chat-input-row input{flex:1;}

/* table */
table.data{width:100%;border-collapse:collapse;font-size:13px;}
table.data th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);padding:9px 11px;border-bottom:1px solid var(--line);}
table.data td{padding:11px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
table.data tr:hover td{background:var(--surface-2);}
.row-click{cursor:pointer;}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;justify-content:space-between;}

/* Tab navigasi dasbor petugas — tetap berbentuk pill & bisa discroll
   horizontal di mobile, tidak ikut menumpuk penuh seperti filter. */
.petugas-tabs{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:22px;}
.petugas-tabs-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.petugas-tabs-scroll::-webkit-scrollbar{display:none;}
.petugas-tabs-scroll .navbtn{flex-shrink:0;white-space:nowrap;}
.petugas-tabs #btn-staff-logout{flex-shrink:0;}
@media (max-width:760px){
  .petugas-tabs{gap:8px;}
  .petugas-tabs-scroll .navbtn{padding:9px 14px;font-size:12px;min-height:36px;}
}
.toolbar .filters{display:flex;gap:8px;flex-wrap:wrap;}
.toolbar select{padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13px;background:var(--surface-2);color:var(--ink);}
.toolbar input[type=text]{padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13px;background:var(--surface-2);color:var(--ink);font-family:inherit;}

.empty{text-align:center;padding:56px 20px;color:var(--ink-faint);}

/* horizontal bar chart (statistik & arsip) */
.hbar-chart{display:flex;flex-direction:column;gap:12px;}
.hbar-row{display:flex;align-items:center;gap:12px;}
.hbar-label{width:130px;flex-shrink:0;font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hbar-track{flex:1;height:14px;background:var(--surface-2);border-radius:7px;overflow:hidden;}
.hbar-fill{height:100%;border-radius:7px;transition:width .4s ease;}
.hbar-value{width:56px;flex-shrink:0;text-align:right;font-size:12.5px;font-weight:600;color:var(--ink);}
@media (max-width:760px){
  .hbar-label{width:88px;font-size:11.5px;}
  .hbar-value{width:44px;font-size:11.5px;}
}
.empty .display{font-size:19px;color:var(--ink);margin-bottom:6px;}

.toast{
  position:fixed;bottom:24px;right:24px;background:#fff;color:var(--ink);border:1px solid var(--line);
  padding:14px 19px;border-radius:12px;font-size:13.5px;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:10px;z-index:999;max-width:360px;
  animation:toastin .25s ease;
  border-left:3px solid var(--gold);
}
@keyframes toastin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.notif-log{display:flex;flex-direction:column;gap:9px;margin-top:12px;}
.notif-item{display:flex;gap:10px;font-size:12.5px;color:var(--ink-soft);border-top:1px solid var(--line-soft);padding-top:9px;}
.notif-item .ch{font-weight:700;color:var(--navy-acc);}

.footer{border-top:1px solid var(--line);padding:26px 28px;text-align:center;font-size:12px;color:var(--ink-faint);}

.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:start;}
.photo-strip{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px;}
.photo-strip img,.photo-strip video{width:92px;height:92px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line);cursor:zoom-in;}
.photo-strip .vwrap{position:relative;}
.photo-strip .vwrap .vidtag{position:absolute;bottom:3px;left:3px;background:rgba(0,0,0,.7);color:#fff;font-size:9px;padding:2px 5px;border-radius:4px;}

.lookup-result{margin-top:22px;}
.ticket-hit{border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px 17px;margin-bottom:11px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);transition:border-color .15s ease, box-shadow .15s ease;}
.ticket-hit:hover{border-color:var(--gold);box-shadow:var(--shadow-md);}
.ticket-hit .id{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-faint);}

.pin-boxes{display:flex;gap:11px;margin:20px 0;}
.pin-boxes input{width:50px;height:58px;text-align:center;font-size:22px;border:1px solid var(--line);border-radius:var(--radius-sm);font-family:'JetBrains Mono',monospace;background:var(--surface-2);color:var(--ink);}

.lightbox{position:fixed;inset:0;background:rgba(15,17,26,.86);display:flex;align-items:center;justify-content:center;z-index:1000;padding:30px;}
.lightbox img,.lightbox video{max-width:92%;max-height:92%;border-radius:10px;box-shadow:var(--shadow-lg);}

.config-banner{background:var(--brick-bg);color:var(--brick);font-size:13px;padding:11px 28px;text-align:center;border-bottom:1px solid var(--line);}
.config-banner b{font-family:'JetBrains Mono',monospace;}
.proyek-tag{display:inline-block;font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--navy-bg);color:var(--navy-acc);}

.staff-login-wrap{
  position:relative;border-radius:22px;overflow:hidden;margin:40px auto 0;max-width:940px;
  min-height:440px;display:flex;align-items:stretch;border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.staff-login-wrap .bgimg{position:absolute;inset:0;}
.staff-login-wrap .bgimg img{width:100%;height:100%;object-fit:cover;}
.staff-login-wrap .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg, rgba(20,16,12,0.92) 0%, rgba(30,24,18,0.78) 42%, rgba(40,30,20,0.28) 100%);}
.staff-login-panel{position:relative;z-index:1;color:#fff;padding:48px;max-width:390px;display:flex;flex-direction:column;justify-content:center;}
.staff-logo-box{
  width:60px;height:60px;flex-shrink:0;align-self:flex-start;
  background:#fff;border-radius:14px;padding:9px;margin-bottom:22px;
  box-shadow:0 10px 26px -6px rgba(0,0,0,0.35);
  display:flex;align-items:center;justify-content:center;
}
.staff-logo-box img{width:100%;height:100%;object-fit:contain;display:block;}
.staff-login-panel .eyebrow{color:#FFC9A8;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:14px;}
.staff-login-panel h2{color:#fff;font-size:28px;margin-bottom:12px;}
.staff-login-panel p{color:rgba(255,255,255,0.72);font-size:13.5px;line-height:1.65;margin-bottom:26px;}
.staff-login-panel input{width:100%;text-align:center;letter-spacing:.4em;font-size:21px;padding:13px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.1);color:#fff;}
.staff-login-panel input::placeholder{color:rgba(255,255,255,0.4);}

@media (hover:none){
  .btn:hover{transform:none;}
  .kawasan-card:hover .ph img{transform:none;}
}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:32px;gap:28px;}
  .hero h1{font-size:30px;}
  .hero p.lead{font-size:14.5px;}
  .hero-photo{aspect-ratio:16/10;}
  .trust-row{gap:18px;}
  .grid2,.two-col,.upload-row{grid-template-columns:1fr;}
  .kat-pick{grid-template-columns:repeat(2,1fr);}
  .kat-strip{grid-template-columns:repeat(2,1fr);gap:10px;}
  .kawasan-grid{grid-template-columns:1fr;gap:16px;}
  .kawasan-card:hover .ph img{transform:none;}
  .metric-grid{grid-template-columns:repeat(2,1fr);}
  .staff-login-wrap{min-height:340px;border-radius:16px;}
  .staff-login-panel{padding:26px;max-width:100%;}
  .staff-login-panel h2{font-size:23px;}
  main{padding:0 16px 46px;}
  .topbar{padding:13px 16px;}
  .brand-logo{height:32px;}
  .brand-text .t1{font-size:15px;}
  .brand-text .t2{font-size:9.5px;}
  .topnav{gap:4px;}
  .navbtn{padding:9px 12px;font-size:12.5px;min-height:38px;}
  .card{padding:19px;}
  .section-head{margin:40px 0 18px;}
  .section-head h2{font-size:22px;}
  .chat-box{max-height:240px;}
  .msg{max-width:88%;}
  .photo-strip img,.photo-strip video{width:66px;height:66px;}
  .thumb{width:66px;height:66px;}
  .pin-boxes input{width:42px;height:50px;font-size:18px;}
  .toolbar{flex-direction:column;align-items:stretch;}
  .toolbar .filters{flex-direction:column;}
  .toolbar select{width:100%;}
  .toolbar input[type=text]{width:100%;}
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;}
  table.data{font-size:12px;min-width:680px;}
  .btn{min-height:44px;} /* target sentuh nyaman untuk semua HP */
  .btn.sm{min-height:38px;}
  /* Cegah Safari iOS otomatis zoom saat fokus ke input/select — syaratnya
     ukuran font kontrol form minimal 16px pada layar sentuh. */
  .field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=password],.field select,.field textarea,
  .toolbar select,.toolbar input[type=text],
  .chat-input-row input,.reject-box textarea{
    font-size:16px;
  }
}

/* ---------------- Tablet & iPad (potret/lanskap) ---------------- */
@media (min-width:761px) and (max-width:1024px){
  main{max-width:920px;padding:0 24px 60px;}
  .kat-strip{grid-template-columns:repeat(3,1fr);}
  .metric-grid{grid-template-columns:repeat(3,1fr);}
  .kawasan-grid{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:38px;}
  .card{padding:22px;}
  /* iPad Safari: input <16px tetap memicu zoom bila disentuh, sama seperti HP */
  .field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=password],.field select,.field textarea,
  .toolbar select,.toolbar input[type=text]{font-size:16px;}
}

/* ---------------- Desktop (laptop 13"-15" & monitor umum, mis. 1366×768,
   1280×800, 1440×900) ----------------
   Sebelumnya rentang ini (antara tablet ≤1024px dan "desktop lebar"
   ≥1440px) memakai ukuran teks & jarak yang sama seperti tampilan
   dasar/HP, padahal ini justru resolusi laptop/monitor paling umum —
   hasilnya teks & elemen terasa mepet dan kurang jelas dibaca di layar
   besar. Blok ini menaikkan keterbacaan (ukuran teks, padding, target
   klik) secara proporsional untuk seluruh rentang desktop; blok
   "Desktop lebar" di bawah menambah penyesuaian ekstra untuk layar
   yang lebih lega lagi (≥1440px), menimpa nilai di sini bila perlu. */
@media (min-width:1025px){
  body{font-size:15px;}
  main{max-width:1160px;padding:0 36px 80px;}

  /* Hero & judul section */
  .hero h1{font-size:48px;}
  .hero p.lead{font-size:16.5px;max-width:50ch;}
  .section-head h2{font-size:29px;}
  .section-head p{font-size:14.5px;}

  /* Kartu & konten umum */
  .card{padding:28px 30px;}
  .card + .card{margin-top:22px;}
  .section-title{font-size:24px;}
  .section-sub{font-size:14px;}
  .kat-tile b{font-size:15px;}
  .kat-tile span{font-size:12.5px;}
  .kawasan-card h3{font-size:20px;}
  .kawasan-card p{font-size:13.5px;}
  .flow-step b{font-size:14px;}
  .flow-step span{font-size:12px;}
  .sop-item b{font-size:14px;}
  .sop-item p{font-size:13px;}
  .stage-note{font-size:14px;padding:16px 18px;}

  /* Dasbor petugas: metrik, tabel, navigasi tab */
  .metric-card{padding:20px 22px;}
  .metric-card .num{font-size:28px;}
  .metric-card .lbl{font-size:11.5px;}
  table.data{font-size:13.5px;}
  table.data th{font-size:11px;padding:11px 13px;}
  table.data td{padding:13px;}
  .navbtn{font-size:13.5px;padding:10px 18px;}
  .petugas-tabs-scroll .navbtn{padding:10px 18px;font-size:13px;}
  .hbar-label{font-size:13px;width:150px;}
  .hbar-value{font-size:13px;}

  /* Form & tombol — target klik lebih nyaman & teks lebih jelas dengan mouse */
  .field label{font-size:13.5px;}
  .field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=password],.field select,.field textarea{
    font-size:14.5px;padding:13px 15px;
  }
  /* BUG (diperbaiki): aturan di atas menimpa padding-left/right khusus
     .field-email (dibuat untuk memberi ruang ikon amplop & tanda centang
     validasi di style dasar, baris ~297) dengan nilai generik 15px — di
     layar ≥1025px akibatnya tulisan yang diketik warga tampil TERTUTUP
     ikon amplop di kiri. Kembalikan ruangnya di sini, khusus untuk field
     email, konsisten dengan padding vertikal 13px di atas. */
  .field-email input[type=email]{padding:13px 38px 13px 42px;}
  .toolbar select,.toolbar input[type=text]{font-size:13.5px;padding:10px 13px;}
  .btn{font-size:14.5px;padding:14px 26px;}
  .btn.sm{font-size:13px;padding:9px 18px;}
  .upload-box{font-size:13.5px;padding:26px;}

  /* Chat & badge status */
  .chat-box{max-height:380px;padding:18px;}
  .msg{font-size:14px;}
  .badge{font-size:12px;padding:6px 13px;}
  .duration-pill{font-size:13px;}

  /* Promo pasang aplikasi di halaman awal */
  .pwa-promo{padding:24px 26px;}
  .pwa-promo-body b{font-size:16px;}
  .pwa-promo-body p{font-size:13.5px;}
  .pwa-promo-list li{font-size:13px;}
}

@media (max-width:420px){
  .hero h1{font-size:25px;}
  .kat-strip{grid-template-columns:1fr;}
  .metric-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .metric-card{padding:13px 15px;}
  .metric-card .num{font-size:22px;}
  .pos{width:20px;height:20px;}
  .stage-labels div{font-size:10.5px;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
  .brand-text .t2{display:none;}
  .topnav{gap:2px;}
  .navbtn{padding:8px 10px;font-size:11.5px;}
}

/* ---------------- Desktop lebar (laptop besar & monitor) ----------------
   Konten diberi ruang lebih luas, teks & elemen dasbor sedikit dibesarkan
   secara proporsional — bukan sekadar melebar penuh layar. */
@media (min-width:1440px){
  main{max-width:1280px;padding:0 44px 90px;}
  .hero{gap:70px;}
  .hero h1{font-size:52px;}
  .hero p.lead{font-size:17px;max-width:52ch;}
  .section-head h2{font-size:32px;}
  .section-head p{font-size:15px;}
  .card{padding:32px 34px;}
  .card + .card{margin-top:24px;}
  .metric-grid{gap:18px;}
  .metric-card{padding:22px 24px;}
  .metric-card .num{font-size:30px;}
  table.data{font-size:14px;}
  table.data th{font-size:11.5px;padding:12px 14px;}
  table.data td{padding:14px;}
  .petugas-tabs-scroll .navbtn{padding:11px 20px;font-size:13.5px;}
  .kat-strip{gap:18px;}
  .kawasan-grid{gap:28px;}
  .staff-login-wrap{max-width:1080px;min-height:480px;}
}
@media (min-width:1800px){
  main{max-width:1360px;}
}

/* =========================================================
   Surat Keterangan Penyelesaian — format formal seperti
   surat resmi perusahaan (dipakai untuk pratinjau di dasbor
   petugas, tampilan warga, maupun jendela cetak/PDF).
   Font tunggal serif formal (Times New Roman) dipakai di
   seluruh surat agar konsisten dan resmi, kop surat rata
   tengah, tanggal diletakkan di bawah judul surat, dan
   tanda tangan hanya menampilkan jabatan (bukan nama orang).
   ========================================================= */
.surat-letter{font-family:'Times New Roman',Times,serif;color:#1c1c1c;line-height:1.75;font-size:14px;}
.surat-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;}
.surat-logo{width:88px;height:auto;object-fit:contain;margin:0 auto 6px;display:block;}
.surat-org-name{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:20px;letter-spacing:.02em;color:#111;text-transform:uppercase;}
.surat-org-sub2{font-size:12.5px;color:#333;margin-top:2px;font-style:italic;}
.surat-org-addr{font-size:11.5px;color:#3a3a3a;margin-top:2px;font-family:'Times New Roman',Times,serif;line-height:1.5;text-align:center;}
.surat-hr-thick{height:3px;background:#2b2b2b;margin:14px 0 2px;}
.surat-hr-thin{height:1px;background:#2b2b2b;margin-bottom:30px;}
.surat-title{text-align:center;font-weight:700;font-size:16.5px;letter-spacing:.03em;text-decoration:underline;margin-bottom:6px;}
.surat-dateline{text-align:center;font-size:13px;color:#333;margin-bottom:22px;font-family:'Times New Roman',Times,serif;}
.surat-refblock{margin:0 auto 26px;border-collapse:collapse;font-family:'Times New Roman',Times,serif;font-size:13.5px;color:#333;}
.surat-refblock td{padding:1px 0;vertical-align:top;}
.surat-refblock td.lbl{font-weight:600;padding-right:8px;width:1%;white-space:nowrap;}
.surat-body p{margin:0 0 16px;text-align:justify;}
.surat-fields{border-collapse:collapse;margin:0 0 16px;}
.surat-fields td{padding:2px 0;font-size:13.5px;vertical-align:top;}
.surat-fields td.lbl{font-weight:700;padding-right:10px;white-space:nowrap;width:1%;}
.surat-sign{margin-top:36px;text-align:right;font-family:'Times New Roman',Times,serif;}
.surat-sign-hormat{font-size:13.5px;color:#1c1c1c;}
.surat-sign-org{font-size:13.5px;color:#1c1c1c;font-weight:600;margin-top:1px;}
.surat-sign-space{height:74px;position:relative;display:flex;align-items:flex-end;justify-content:flex-end;padding-bottom:4px;}
.surat-ttd{
  font-family:'Petit Formal Script','Brush Script MT',cursive;
  font-size:36px;line-height:1;color:#1a2440;
  transform:rotate(-3deg);transform-origin:bottom right;
  white-space:nowrap;
}
.surat-signature-image{display:block;width:165px;max-height:70px;object-fit:contain;object-position:right bottom;mix-blend-mode:multiply;}
.surat-sign-name{font-weight:700;text-decoration:underline;}
.surat-sign-role{font-size:11px;color:#666;margin-top:2px;font-family:'Times New Roman',Times,serif;}
.surat-sign-role2{font-size:13.5px;color:#111;margin-top:2px;font-weight:700;text-decoration:underline;letter-spacing:.03em;font-family:'Times New Roman',Times,serif;}
.surat-footer{
  margin-top:40px;padding-top:12px;border-top:1px solid #ccc;
  font-family:'Times New Roman',Times,serif;font-size:11px;color:#777;text-align:center;line-height:1.6;
}
.surat-footer-note{margin-top:6px;font-style:italic;color:#999;font-size:10.5px;}

.surat-preview-box{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:26px 30px;background:#fff;
  margin-bottom:14px;overflow-x:auto;
}
@media (max-width:600px){
  .surat-preview-box{padding:18px;}
  .surat-letter{font-size:12.5px;}
}
/* Kalender internal petugas */
/* ---------------------------------------------------------------
   Smart Calendar — kalender kerja petugas
   Memakai token warna brand yang sama dengan seluruh dasbor (bukan
   warna hardcode) supaya menyatu secara visual, ditambah insight chip
   & legenda warna agar lebih mudah dipahami sekilas pandang.
   --------------------------------------------------------------- */
.smart-calendar{margin-bottom:22px;}
.smart-calendar .toolbar{align-items:flex-start;}
.smart-calendar-title{display:flex;gap:14px;align-items:flex-start;}
.sc-ic{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;
  background:linear-gradient(145deg,#E8D4A5,#C6A15B);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  box-shadow:var(--shadow-gold);
}
.smart-calendar-title h3{font-size:19px;margin-bottom:4px;}
.smart-calendar-title .hint{max-width:52ch;}

/* Insight ringkas: mengubah angka mentah jadi kalimat siap tindak lanjut */
.cal-insights{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px;}
.cal-insight{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:999px;
  border:1px solid transparent;
}
.cal-insight.late{background:var(--brick-bg);color:var(--brick);border-color:rgba(239,68,68,0.25);}
.cal-insight.notarget{background:var(--amber-bg);color:var(--amber);border-color:rgba(217,119,6,0.25);}
.cal-insight.ok{background:var(--emerald-bg);color:var(--emerald);border-color:rgba(22,163,74,0.25);}

.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin:18px 0 14px;}
.cal-week{text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--ink-faint);text-transform:uppercase;padding:6px;}
.cal-week.weekend{color:var(--gold-dark);}
.cal-day{
  min-height:96px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  padding:10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cal-day:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--gold-soft);}
.cal-day.weekend{background:var(--surface-2);}
.cal-day.selected{outline:2px solid var(--gold);outline-offset:-1px;background:#FFF8EC;}
.cal-daynum{font-family:'Playfair Display',serif;font-weight:600;font-size:14px;color:var(--ink);}
.cal-day.today .cal-daynum{
  border-radius:50%;background:linear-gradient(145deg,#E8D4A5,#C6A15B);color:#fff;
  padding:1px 8px;box-shadow:var(--shadow-gold);
}
.cal-day small{font-size:9.5px;color:var(--ink-faint);}
.cal-tag{display:inline-block;border-radius:5px;background:var(--surface-2);color:var(--ink-soft);padding:2px 6px;font-size:10px;font-weight:600;}
.cal-tag.masuk{background:var(--navy-bg);color:var(--navy-acc);}
.cal-tag.target{background:var(--amber-bg);color:var(--amber);}
.cal-tag.selesai{background:var(--emerald-bg);color:var(--emerald);}

/* Legenda edukatif: menjelaskan arti warna/tag di atas supaya petugas
   baru langsung paham cara membaca kalender tanpa perlu bertanya. */
.cal-legend{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0 20px;padding-top:14px;border-top:1px solid var(--line-soft);}
.cal-legend-item{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft);}
.cal-legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--surface-2);}
.cal-legend-dot.masuk{background:var(--navy-acc);}
.cal-legend-dot.target{background:var(--amber);}
.cal-legend-dot.selesai{background:var(--emerald);}
.cal-legend-dot.proses{
  width:auto;height:auto;border-radius:0;background:none;color:var(--ink-faint);
  font-size:11px;line-height:1;
}

.cal-agenda{padding-top:6px;}
.cal-agenda-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.cal-agenda-head h4{font-size:15px;}
.cal-agenda-date{font-size:12.5px;color:var(--gold-dark);font-weight:600;}
.cal-event{
  display:flex;width:100%;gap:12px;align-items:center;text-align:left;
  padding:13px 6px;border:0;border-bottom:1px solid var(--line-soft);
  background:transparent;cursor:pointer;flex-wrap:wrap;border-radius:var(--radius-sm);
  transition:background .15s ease;
}
.cal-event:hover{background:var(--surface-2);}
.cal-empty{
  text-align:center;padding:26px 18px;color:var(--ink-faint);font-size:13px;line-height:1.6;
  background:var(--surface-2);border-radius:var(--radius-sm);
}
.video-error{display:block;font-size:11px;color:#a5362d;background:#fff;padding:8px;}
.thumb:has(.video-error){height:auto;min-height:90px;}
@media(max-width:650px){
  .cal-grid{gap:3px;}
  .cal-day{padding:5px;min-height:82px;border-radius:7px;}
  .cal-tag{font-size:8px;padding:2px 4px;}
  .smart-calendar{padding:16px;}
  .cal-day small{font-size:8px;}
  .smart-calendar .toolbar{flex-wrap:wrap;}
  #calendar-month{max-width:150px;}
  .cal-legend{gap:10px 14px;}
  .smart-calendar-title{gap:10px;}
  .sc-ic{width:32px;height:32px;font-size:15px;}
}
.pilar-assistant{width:min(760px,94vw);max-height:90dvh;padding:28px;border:1px solid #e3d8c5;border-radius:24px;background:#fffdf7;color:#3c493e;box-shadow:0 25px 90px #14251a55;margin:auto}.pilar-assistant::backdrop{background:#19352d99;backdrop-filter:blur(4px)}.assistant-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px;color:#68715f;cursor:pointer}.assistant-intro{display:flex;align-items:center;gap:18px}.pilar-mascot{width:150px;flex-shrink:0}.assistant-eyebrow{font-size:10px;letter-spacing:1.2px;color:#8b7961}.assistant-intro h2{font-size:25px;margin:7px 0 9px;color:#325847}.assistant-intro p{font-size:13px;line-height:1.7}.assistant-summary{display:flex;gap:9px;margin:20px 0;flex-wrap:wrap}.assistant-summary span{flex:1;min-width:120px;text-align:center;background:#f4eddf;border-radius:12px;padding:12px;font-size:12px}.assistant-summary b{display:block;font-size:24px;color:#39614f}.assistant-tasks{max-height:35dvh;overflow:auto;margin:12px 0 20px}.assistant-task{display:flex;gap:12px;text-align:left;width:100%;border:1px solid #e4e4d8;border-radius:12px;background:white;margin-bottom:8px;padding:14px;color:inherit;cursor:pointer}.assistant-task:hover{background:#f1f7ed}.assistant-task div{flex:1}.assistant-task b,.assistant-task small{display:block;margin-top:4px}.assistant-task p{font-size:12px;margin-top:7px;line-height:1.5;color:#69705e}.assistant-check{font-size:25px;color:#b7b88d}.assistant-priority{font-size:10px;border-radius:5px;background:#eaf0e0;padding:3px 6px}.assistant-priority.p0{background:#ffe1d9;color:#983d2e}.assistant-priority.p1{background:#fff0c4;color:#77570b}.assistant-priority.p2{background:#e0effb;color:#2e638b}.assistant-task small{font-size:10px;color:#777b70}.assistant-foot{text-align:center;font-size:10px;line-height:1.7;color:#8a8b7e;margin-top:12px}.assistant-empty{text-align:center;padding:28px;line-height:2;background:#f4f6e9;border-radius:12px}@media(max-width:550px){.pilar-assistant{padding:22px 15px}.assistant-intro{gap:6px}.pilar-mascot{width:95px}.assistant-intro h2{font-size:20px}.assistant-intro p{font-size:12px}.assistant-summary span{min-width:85px;padding:8px;font-size:10px}.assistant-eyebrow{font-size:8px}}
input[data-target]{display:block;margin-top:5px;border:1px solid #ddd8ca;border-radius:7px;padding:6px;background:#fff;color:#374d40;font:inherit;min-height:34px}

/* PWA: tombol mengambang "Pasang Aplikasi" (muncul otomatis saat
   browser mengizinkan instalasi — lihat assets/features.js). Diletakkan
   di kiri bawah supaya tidak bertabrakan dengan toast (kanan bawah). */
.pwa-install-btn{
  position:fixed;left:20px;bottom:20px;z-index:998;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:999px;border:none;
  background:linear-gradient(120deg,#E8D4A5,#C6A15B);color:#fff;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  box-shadow:var(--shadow-gold);cursor:pointer;
  animation:toastin .25s ease;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.pwa-install-btn:hover{box-shadow:0 12px 30px -8px rgba(198,161,91,0.55);}
.pwa-install-btn:disabled{opacity:.6;cursor:default;}
@media (max-width:760px){
  .pwa-install-btn{left:14px;bottom:14px;font-size:12.5px;padding:11px 17px;}
}

/* Promo "Pasang Aplikasi" di halaman awal — sengaja diletakkan di
   bagian bawah konten (setelah tips), bukan di atas dekat tombol aksi
   utama, supaya tidak mengganggu alur "Buat laporan"/"Lacak laporan".
   [hidden] dikendalikan lewat JS (lihat syncPwaPromo di features.js):
   hanya tampil kalau instalasi memang tersedia/relevan di browser. */
.pwa-promo{
  display:flex;gap:16px;align-items:flex-start;
  background:linear-gradient(135deg,#FFF8EC,#FFF3E4);
  border:1px solid var(--gold-soft);border-radius:var(--radius);
  padding:20px 22px;margin-top:22px;
}
.pwa-promo[hidden]{display:none;}
.pwa-promo-ic{font-size:30px;line-height:1;flex-shrink:0;margin-top:2px;}
.pwa-promo-body{flex:1;min-width:0;}
.pwa-promo-body b{display:block;font-size:15px;color:var(--ink);margin-bottom:5px;}
.pwa-promo-body p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0 0 10px;}
.pwa-promo-list{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;}
.pwa-promo-list li{font-size:12.5px;color:var(--ink-soft);line-height:1.5;padding-left:20px;position:relative;}
.pwa-promo-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold-dark);font-weight:700;}
@media (max-width:600px){
  .pwa-promo{padding:17px 18px;gap:12px;}
  .pwa-promo-list{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------
   Bubble mengambang Asisten Pilar — versi "diminimalkan" dari panel
   Asisten Pilar (lihat .pilar-assistant di atas). Muncul begitu panel
   ditutup, memakai maskot Pipi yang sama, diposisikan di pojok KANAN
   BAWAH layar (di atas .toast supaya tidak saling menimpa). Bertahan
   selama petugas login, di halaman mana pun.
   --------------------------------------------------------------- */
.assistant-bubble{
  position:fixed;right:24px;bottom:96px;z-index:900;
  width:64px;height:64px;padding:0;border-radius:50%;
  background:#fff5de;border:2px solid var(--gold-soft);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow-lg);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:assistantBubbleIn .35s cubic-bezier(.34,1.56,.64,1);
}
.assistant-bubble:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 34px -10px rgba(122,104,86,.4);}
.assistant-bubble:disabled{opacity:.65;cursor:default;transform:none;}
.assistant-bubble svg.pilar-mascot{width:42px;flex-shrink:0;display:block;}
.assistant-bubble-badge{
  position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;padding:0 5px;
  border-radius:999px;background:var(--amber);color:#fff;border:2px solid #fff;
  font-size:10.5px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.assistant-bubble-badge.late{background:var(--brick);animation:assistantBadgePulse 1.8s ease-in-out infinite;}
.assistant-bubble-badge.done{background:var(--emerald);}
@keyframes assistantBubbleIn{from{opacity:0;transform:scale(.4) translateY(24px);}to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes assistantBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45);}50%{box-shadow:0 0 0 6px rgba(239,68,68,0);}}
@media (max-width:760px){
  .assistant-bubble{width:56px;height:56px;right:16px;bottom:86px;}
  .assistant-bubble svg.pilar-mascot{width:36px;}
}
@media (prefers-reduced-motion:reduce){
  .assistant-bubble{animation:none;}
  .assistant-bubble-badge.late{animation:none;}
}