@charset "UTF-8";
/* =====================================================================
   Polity+ design tokens — derived from the Polity+ mark: a deep navy
   badge, a teal→green→amber→blue "collaboration ring", and a vivid
   green "+" at the centre. Navy anchors the whole app; teal/green/
   amber/blue are the four accent hues pulled straight off the ring;
   green (the "+") is promoted to the app's primary call-to-action
   color. Every screen/component below draws from this one palette —
   nothing is colored ad hoc.
   ===================================================================== */
:root{
  --bg:#F2F4F9;
  --surface:#FFFFFF;
  --surface-2:#E7EAF2;
  --ink:#0E1526;
  --ink-soft:#4B546A;
  --ink-faint:#838CA0;
  --line:#DCE0EA;

  --primary:#101B33;
  --primary-soft:#DEE3EE;
  --secondary:#0D9488;
  --secondary-soft:#D7F0EC;
  --tertiary:#EA7F1D;
  --tertiary-soft:#FBE3C8;
  --accent:#189A54;
  --accent-soft:#D9F0E1;
  --saffron:#FF6A00;
  --saffron-soft:#FFE1C2;
  --info:#2563EB;
  --info-soft:#DCE7FC;
  --success:#1F7A43;
  --success-soft:#DAEEE1;
  --warning:#B5690A;
  --warning-soft:#F5E2C9;
  --critical:#B3261E;
  --critical-soft:#F3D9D7;

  --body-font:"Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-font:"Poppins", "Segoe UI", Roboto, sans-serif;
  --mono: Consolas, "SF Mono", ui-monospace, monospace;

  --primary-grad: linear-gradient(135deg, #0A1223 0%, var(--primary) 55%, #1D3057 100%);
  --accent-grad: linear-gradient(135deg, #0D9488 0%, #1FAE5D 100%);
  --brand-ring-grad: conic-gradient(from 210deg, #0D9488, #1FAE5D, #EA7F1D, #2563EB, #0D9488);
  --brand-arc-grad: linear-gradient(120deg, #0D9488 0%, #1FAE5D 32%, #EA7F1D 66%, #2563EB 100%);
  --void-grad: radial-gradient(ellipse at top, #2C4A63 0%, #16212F 55%, #090C12 100%);

  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:22px;
  --radius-pill:100px;

  --shadow-1: 0 1px 2px rgba(9,14,28,.05), 0 1px 3px rgba(9,14,28,.05);
  --shadow-2: 0 2px 8px rgba(9,14,28,.07), 0 1px 2px rgba(9,14,28,.05);
  --shadow-3: 0 8px 24px rgba(9,14,28,.14);
  --shadow-4: 0 18px 44px rgba(9,14,28,.24);
  /* kept for any old references */
  --shadow-card: var(--shadow-1);
  --shadow-pop: var(--shadow-3);
}

/* ---------- Dark theme — same tokens, night values. Toggled by setting
   data-theme="dark" on <html> (see app.js theme-toggle wiring); also
   respected automatically on first visit via prefers-color-scheme. ---------- */
:root[data-theme="dark"]{
  --bg:#0A0F1C;
  --surface:#121A2C;
  --surface-2:#1A2438;
  --ink:#EAEDF6;
  --ink-soft:#B6BFD4;
  --ink-faint:#7D879E;
  --line:#26314A;

  --primary:#5578B5;
  --primary-soft:#1B2740;
  --secondary:#2DD4BF;
  --secondary-soft:#0F332F;
  --tertiary:#FB923C;
  --tertiary-soft:#3A2716;
  --accent:#34D399;
  --accent-soft:#103324;
  --saffron:#FF9F45;
  --saffron-soft:#4A2A12;
  --info:#60A5FA;
  --info-soft:#152640;
  --success:#4ADE80;
  --success-soft:#123320;
  --warning:#FBBF24;
  --warning-soft:#3A2C0F;
  --critical:#F3766E;
  --critical-soft:#3A1616;

  --primary-grad: linear-gradient(135deg, #060A14 0%, #131F38 55%, #223860 100%);
  --accent-grad: linear-gradient(135deg, #0D9488 0%, #22C57F 100%);
  --void-grad: radial-gradient(ellipse at top, #0E1A2C 0%, #070A12 55%, #030407 100%);

  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 2px 10px rgba(0,0,0,.4);
  --shadow-3: 0 10px 28px rgba(0,0,0,.5);
  --shadow-4: 0 20px 48px rgba(0,0,0,.6);
  --shadow-card: var(--shadow-1);
  --shadow-pop: var(--shadow-3);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--void-grad);
  font-family:var(--body-font);
  color:var(--ink);
  display:flex;
  justify-content:center;
  min-height:100vh;
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ---------- Motion: subtle, purposeful, and automatic on every re-render
   (this app rebuilds screen HTML via innerHTML, so any element carrying
   these classes replays its entrance animation each time it's redrawn —
   no JS changes needed anywhere else in the app). ---------- */
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fabPulse{ 0%,100%{ box-shadow:0 3px 10px rgba(0,0,0,.28), 0 0 0 0 rgba(24,154,84,.35); } 50%{ box-shadow:0 3px 10px rgba(0,0,0,.28), 0 0 0 7px rgba(24,154,84,0); } }
@keyframes logoPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(13,148,136,.35); } 50%{ box-shadow:0 0 0 10px rgba(13,148,136,0); } }
@keyframes brandSpin{ to{ transform:rotate(360deg); } }
@keyframes successPop{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.12); opacity:1; } 100%{ transform:scale(1); } }
@keyframes thinkingBounce{ 0%,80%,100%{ transform:translateY(0); opacity:.5; } 40%{ transform:translateY(-4px); opacity:1; } }

/* Author rules like `display:flex` beat the browser's built-in [hidden] rule,
   which left the Offline and Install banners permanently visible. One
   global rule makes the hidden attribute always win. */
[hidden]{ display:none !important; }

button{font-family:inherit;}
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* Phone frame */
.phone{
  width:100%;
  max-width:none;
  min-height:100vh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.35);
}

.topbar{
  background:var(--primary-grad);
  color:#EEF1F8;
  padding:14px 18px 13px;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky; top:0; z-index:20;
}
.topbar-brand{ display:flex; align-items:center; gap:9px; }
.topbar-logo{
  width:28px; height:28px; border-radius:50%;
  object-fit:cover; display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.topbar-logo[hidden]{ display:none; }
.topbar-title{
  font-family:var(--display-font);
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:.005em;
}
.lang-switch{
  background:rgba(255,255,255,.08);
  color:#EEF1F8;
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-xs);
  font-family:var(--mono);
  font-size:12px;
  padding:5px 8px;
}
.lang-switch option{color:var(--ink);}

.topbar-actions{ display:flex; align-items:center; gap:8px; position:relative; }
.icon-btn{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-xs);
  color:#EEF1F8;
  width:30px; height:30px;
  font-size:14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s ease, transform .12s ease;
}
.icon-btn:hover{ background:rgba(255,255,255,.16); }
.icon-btn:active{ transform:scale(.92); }
.icon-btn[hidden]{ display:none; }

.account-panel{
  position:absolute; top:56px; right:16px; z-index:30;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-3);
  padding:14px 16px;
  width:266px;
  animation:fadeInUp .18s ease both;
}
.account-panel .name{ font-weight:700; font-size:14.5px; }
.account-panel .role{ font-size:12px; color:var(--ink-faint); margin:2px 0 12px; }
.account-panel .btn{ margin-top:6px; }

.offline-banner{
  background:var(--warning-soft);
  color:var(--warning);
  font-family:var(--mono);
  font-size:12px;
  padding:7px 16px;
  display:flex;
  align-items:center;
  gap:8px;
}
.offline-banner .dot{width:7px;height:7px;border-radius:50%;background:var(--warning);}

.install-banner{
  background:var(--secondary-soft);
  color:var(--secondary);
  font-size:13px;
  font-weight:600;
  padding:9px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.install-banner-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.install-banner-actions button{
  border:none; cursor:pointer; font-family:var(--body-font);
}
#installBannerBtn{
  background:var(--secondary); color:#fff;
  font-size:12.5px; font-weight:700;
  padding:6px 14px; border-radius:99px;
}
#installBannerDismiss{
  background:transparent; color:var(--secondary);
  font-size:14px; padding:4px 6px; opacity:.7;
}

.screen-area{
  flex:1;
  overflow-y:auto;
  padding:18px 16px 96px;
}

/* Bottom nav */
.bottomnav{
  position:sticky; bottom:0;
  background:var(--surface);
  border-top:1px solid var(--line);
  display:flex;
  z-index:20;
}
.nav-btn{
  flex:1;
  background:none;
  border:none;
  padding:9px 4px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:var(--saffron);
  cursor:pointer;
  font-size:11px;
  border-radius:var(--radius-sm);
  transition:color .15s ease, background .15s ease;
}
.nav-btn svg{width:22px; height:22px; fill:currentColor;}
.nav-btn.active{background:var(--saffron-soft);}

/* Generic layout helpers */
.stack{display:flex; flex-direction:column; gap:12px;}
.row{display:flex; gap:10px; align-items:center;}
.row.between{justify-content:space-between;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

h1.page-title{
  font-family:var(--display-font);
  font-weight:600;
  font-size:1.4rem;
  margin:0 0 4px;
  color:var(--ink);
}
p.page-sub{margin:0 0 18px; color:var(--ink-soft); font-size:13.5px;}

/* Cards */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 16px;
  box-shadow:var(--shadow-1);
  animation:fadeInUp .3s ease both;
  transition:box-shadow .18s ease, transform .18s ease;
}
.card:active{ transform:scale(.99); }
.card + .card{margin-top:10px;}
.card h3{margin:0 0 8px; font-size:.98rem; font-family:var(--display-font); font-weight:600; color:var(--primary);}

/* Dashboard widgets */
.widget-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--secondary);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  box-shadow:var(--shadow-1);
  animation:fadeInUp .3s ease both;
}
.stat .num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.6rem; font-weight:700; color:var(--primary); line-height:1;}
.stat .label{font-size:11.5px; color:var(--ink-soft); margin-top:4px; text-transform:uppercase; letter-spacing:.03em; font-family:var(--mono);}
.stat.accent{border-left-color:var(--accent);}
.stat.accent .num{color:var(--accent);}

.progress-track{
  width:100%; height:8px; border-radius:var(--radius-pill);
  background:var(--surface-2, #EEE); overflow:hidden;
}
.progress-fill{
  height:100%; border-radius:var(--radius-pill);
  background:var(--success);
  transition:width .2s ease;
}

.list-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--line);
  cursor:pointer;
  transition:background .15s ease;
}
.list-item:last-child{border-bottom:none;}
.list-item:hover{background:rgba(16,27,51,.03);}
.list-item:active{background:rgba(16,27,51,.06);}
.li-main .name{font-weight:600; font-size:14.5px;}
.li-main .sub{font-size:12.5px; color:var(--ink-faint); margin-top:2px;}

.pill{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 9px; border-radius:var(--radius-pill); white-space:nowrap;
}
.pill.success{background:var(--success-soft); color:var(--success);}
.pill.warning{background:var(--warning-soft); color:var(--warning);}
.pill.critical{background:var(--critical-soft); color:var(--critical);}
.pill.info{background:var(--info-soft); color:var(--info);}
.pill.neutral{background:var(--primary-soft); color:var(--primary);}

/* Forms */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label{
  font-family:var(--display-font); font-size:13px; font-weight:600;
  color:var(--ink); letter-spacing:.01em;
}
.field label .req{ color:var(--tertiary); font-weight:700; margin-left:2px; }
.field input, .field select, .field textarea{
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 13px;
  font-size:14.5px;
  font-family:inherit;
  background:var(--surface);
  color:var(--ink);
  width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--secondary);
  box-shadow:0 0 0 3px var(--secondary-soft);
  outline:none;
}
.field textarea{resize:vertical; min-height:70px;}

/* Location picker — closed-state summary rows (state/district/taluka/village) */
.loc-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-1);
}
.loc-row{
  position:relative;
  display:flex; align-items:center; gap:14px; padding:15px 16px 15px 18px;
  border-bottom:1px solid var(--line);
  transition:background .15s ease;
}
.loc-row:last-child{ border-bottom:none; }
.loc-row::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--line);
}
.loc-row.filled::before{ background:var(--accent); }
.loc-row-icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:var(--surface-2); filter:grayscale(.5); opacity:.7;
  transition:background .15s ease, filter .15s ease, opacity .15s ease;
}
.loc-row.filled .loc-row-icon{ background:var(--accent-soft); filter:none; opacity:1; }
.loc-row-text{ flex:1; min-width:0; }
.loc-row-cap{
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.06em;
}
.loc-row-val{
  font-size:15.5px; color:var(--ink-faint); margin-top:3px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.loc-row.filled .loc-row-val{ color:var(--ink); font-weight:700; }
.loc-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%; margin-right:3px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  vertical-align:-3px;
}
.loc-row-btn{
  flex:0 0 auto; border:1.5px solid var(--line); background:var(--surface);
  color:var(--ink-soft); border-radius:var(--radius-pill);
  font-size:13px; font-weight:700; padding:8px 16px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.loc-row-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); }
.loc-row-btn:active{ transform:scale(.96); }
.loc-row-btn.cta{
  background:var(--accent-grad); color:#fff; border-color:transparent;
  box-shadow:0 2px 8px rgba(24,154,84,.3);
}
.field-mic{
  position:relative;
}
.field-mic .mic-btn{
  position:absolute; right:6px; top:29px;
  background:var(--primary-soft); border:none; border-radius:var(--radius-xs);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:var(--primary); cursor:pointer;
}
.field-mic input, .field-mic textarea{padding-right:44px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:var(--radius-sm); padding:12px 18px;
  font-size:14.5px; font-weight:600; cursor:pointer;
  font-family:inherit;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn.primary{background:var(--primary-grad); color:#fff; box-shadow:0 2px 8px rgba(16,27,51,.3);}
.btn.accent{background:var(--accent-grad); color:#fff; box-shadow:0 2px 8px rgba(24,154,84,.3);}
.btn.ghost{background:var(--surface); color:var(--ink-soft); border:1px solid var(--line);}
.btn.block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn:not(:disabled):hover{ filter:brightness(1.06); }
.btn:not(:disabled):active{ transform:scale(.96); }

/* The main "add" button: the green "+" circle, centred and pinned to the SCREEN (not the page), so
   it is always visible above the bottom bar however long the list is. */
.fab{
  position:fixed; left:50%; bottom:78px; transform:translateX(-50%);
  width:52px; height:52px; border-radius:50%;
  background:var(--accent-grad); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.28), 0 0 0 0 rgba(24,154,84,.35);
  font-size:26px; cursor:pointer; z-index:15;
  transition:transform .15s ease;
  animation:fabPulse 2.8s ease-in-out infinite;
}
.fab:hover{ transform:translateX(-50%) translateY(-2px) scale(1.04); }
.fab:active{ transform:translateX(-50%) scale(.94); }
/* Empty list: the + sits right under the "nothing here yet" card (centred) instead of at the bottom. */
.fab.fab-inline{ position:static; transform:none; margin:18px auto 0; }
.fab.fab-inline:hover{ transform:translateY(-2px) scale(1.04); }
.fab.fab-inline:active{ transform:scale(.94); }

.search-bar{
  display:flex; gap:8px; margin-bottom:12px;
  position:relative;
}
.search-bar input{
  flex:1; padding-left:38px !important;
  background-image:none;
}
.search-bar::before{
  content:"🔍"; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:15px; opacity:.55; pointer-events:none; z-index:1;
}
.chip-row{display:flex; gap:8px; overflow-x:auto; margin-bottom:16px; padding-bottom:3px;}
.chip{
  flex:0 0 auto; font-size:13.5px; font-weight:600; font-family:var(--display-font);
  padding:8px 15px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer;
  white-space:nowrap; box-shadow:var(--shadow-1);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.chip:hover{ border-color:var(--secondary); color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-2); }
.chip:active{ transform:scale(.95); }
.chip.active{
  background:var(--accent-grad); border-color:transparent; color:#fff;
  box-shadow:0 3px 10px rgba(24,154,84,.35);
}
.chip.active:hover{ border-color:transparent; color:#fff; }

.diary-clamp{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

.empty-state{
  text-align:center; padding:40px 20px; color:var(--ink-faint);
}
.empty-state .icon{
  font-size:28px; width:60px; height:60px; line-height:60px;
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
  margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
}

/* Branded loading spinner — conic gradient ring pulled from the logo's
   teal/green/amber/blue collaboration ring. */
.spinner{
  width:34px; height:34px; border-radius:50%;
  background:var(--brand-ring-grad);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation:brandSpin .9s linear infinite;
}
.spinner.small{ width:18px; height:18px; }

/* "AI is thinking" dots — reuses the brand accent hues */
.ai-thinking{ display:inline-flex; align-items:center; gap:4px; }
.ai-thinking span{
  width:6px; height:6px; border-radius:50%;
  background:var(--secondary);
  animation:thinkingBounce 1.1s ease-in-out infinite;
}
.ai-thinking span:nth-child(2){ background:var(--accent); animation-delay:.15s; }
.ai-thinking span:nth-child(3){ background:var(--tertiary); animation-delay:.3s; }

.success-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); font-size:28px;
  animation:successPop .4s cubic-bezier(.2,1.4,.4,1) both;
}

/* Login screen */
.login-wrap{
  min-height:calc(100vh - 60px);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:20px;
  text-align:center;
}
.login-logo{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  margin-bottom:14px; animation:logoPulse 2.6s ease-in-out infinite;
}
.login-logo[hidden]{ display:none; }
.login-wrap h1{font-family:var(--display-font); font-weight:600; font-size:1.9rem; color:var(--primary); margin:0 0 6px;}
.login-wrap .tagline{
  font-family:var(--display-font); font-weight:600; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--secondary); margin:0 0 10px;
}
.login-wrap p{color:var(--ink-soft); margin:0 0 28px; max-width:280px;}

.login-logo-wrap{
  position:relative; width:84px; height:84px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.login-logo-wrap::before{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  background:var(--brand-ring-grad); opacity:.32; filter:blur(7px);
  animation:brandSpin 9s linear infinite;
}
.login-logo-wrap .login-logo{ position:relative; z-index:1; margin-bottom:0; }
.login-logo-wrap[hidden]{ display:none; }

/* Front-door account-type cards — bigger, colorful, tappable */
.role-grid{display:flex; flex-direction:column; gap:14px; width:100%; max-width:340px;}
.role-btn{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px; text-align:left; font:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:16px 18px; cursor:pointer; color:var(--ink);
  box-shadow:var(--shadow-1);
  animation:fadeInUp .35s ease both;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.role-btn::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:var(--role-color, var(--secondary));
}
.role-btn:nth-child(2){ animation-delay:.08s; }
.role-btn:hover{ border-color:var(--role-color, var(--secondary)); box-shadow:var(--shadow-3); transform:translateY(-2px); }
.role-btn:active{ transform:translateY(0) scale(.99); }
.role-btn .emoji{
  flex:0 0 auto; width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:23px;
  background:var(--role-soft, var(--secondary-soft)); color:var(--role-color, var(--secondary));
}
.role-btn .label{ flex:1; font-family:var(--display-font); font-weight:600; font-size:1.02rem; }
.role-btn .arrow{ flex:0 0 auto; font-size:18px; color:var(--ink-faint); transition:transform .18s ease, color .18s ease; }
.role-btn:hover .arrow{ transform:translateX(3px); color:var(--role-color, var(--secondary)); }
.role-btn.leadership{ --role-color:var(--secondary); --role-soft:var(--secondary-soft); }
.role-btn.citizen{ --role-color:var(--tertiary); --role-soft:var(--tertiary-soft); }

/* Action tile — the same icon-badge/label/arrow "tappable row" recipe as
   the account-type cards above, reused wherever a single prominent action
   sits inline in a normal screen (e.g. "Add Voter List") instead of being
   its own dedicated hero screen. Same ingredients, different context —
   this is what keeps the app feeling like one product. */
.action-tile{
  position:relative; overflow:hidden; width:100%;
  display:flex; align-items:center; gap:14px; text-align:left; font:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:14px 16px; cursor:pointer; color:var(--ink);
  box-shadow:var(--shadow-1); margin-bottom:12px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.action-tile::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--info);
}
.action-tile:hover{ border-color:var(--info); box-shadow:var(--shadow-2); transform:translateY(-1px); }
.action-tile:active{ transform:translateY(0) scale(.99); }
.action-tile-icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  background:var(--info-soft); color:var(--info);
}
.action-tile-label{ flex:1; font-family:var(--display-font); font-weight:600; font-size:.95rem; }
.action-tile-arrow{ flex:0 0 auto; font-size:16px; color:var(--ink-faint); transition:transform .18s ease, color .18s ease; }
.action-tile:hover .action-tile-arrow{ transform:translateX(3px); color:var(--info); }

/* Detail sheet */
.detail-header{
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.back-btn{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xs);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--ink-soft); font-size:18px;
}
.avatar{
  width:44px; height:44px; border-radius:50%;
  background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; font-family:var(--display-font);
}

.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px; margin-top:8px;}
.kv .k{color:var(--ink-faint); font-size:12px; text-transform:uppercase; letter-spacing:.03em; font-family:var(--mono); padding-top:2px;}
.kv .v{color:var(--ink);}

.section-title{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); margin:20px 0 8px;
}

.toast{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:var(--radius-pill);
  font-size:13px; z-index:100; opacity:0; pointer-events:none;
  transition:opacity .18s ease;
  max-width:90%;
  text-align:center;
}
.toast.show{opacity:1;}

/* Live camera capture overlay */
.camera-modal{
  position:fixed; inset:0; z-index:200;
  background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.camera-modal[hidden]{ display:none; }
.camera-modal video{
  width:100%; max-height:70vh; object-fit:contain; background:#000;
}
.camera-error{
  color:#F3C9C6; font-size:13.5px; text-align:center; padding:0 20px; max-width:340px;
}
.camera-controls{
  display:flex; gap:14px; padding:20px; width:100%; max-width:340px;
}

.onboarding-modal{
  position:fixed; inset:0; z-index:210;
  background:rgba(14,21,38,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.onboarding-modal[hidden]{ display:none; }
.onboarding-card{
  position:relative;
  background:var(--surface);
  border-radius:16px;
  padding:32px 24px 24px;
  max-width:340px; width:100%;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.onboarding-skip{
  position:absolute; top:10px; right:10px;
  border:none; background:transparent; color:var(--ink-faint);
  font-size:16px; cursor:pointer; padding:6px;
}
.onboarding-icon{ font-size:44px; margin-bottom:10px; }
.onboarding-title{ font-family:var(--display-font); font-size:19px; margin:0 0 8px; color:var(--ink); }
.onboarding-body{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 18px; }
.onboarding-dots{ display:flex; justify-content:center; gap:6px; margin-bottom:18px; }
.onboarding-dot{ width:6px; height:6px; border-radius:50%; background:var(--line); }
.onboarding-dot.active{ background:var(--secondary); width:16px; border-radius:3px; }
.camera-controls .btn{ flex:1; }
.camera-switch-btn{
  position:absolute; top:16px; right:16px; z-index:1;
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:19px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
}
.camera-switch-btn:hover{ background:rgba(0,0,0,.65); }
.camera-switch-btn[hidden]{ display:none; }

/* ---------- Family head / schemes ---------- */
.head-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--primary-soft);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  margin-bottom:6px;
}
.head-row .row{ flex:1; }
.head-row .avatar{ background:var(--primary); color:#fff; }
.head-badge{
  font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--primary); font-weight:700;
}
.icon-btn-small{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xs);
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; color:var(--ink-soft); flex:0 0 auto;
}
.icon-btn-small:hover{ border-color:var(--secondary); color:var(--secondary); }
.head-row .icon-btn-small{ background:rgba(255,255,255,.5); }
.scheme-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--line);
}
.scheme-row:last-child{ border-bottom:none; }
.scheme-row .name{ font-size:13.5px; font-weight:600; }

/* ---------- Work / Facebook post ---------- */
.fb-post-card{
  background:var(--primary); color:#EAF1FA;
  border-radius:var(--radius-md); padding:14px 16px; margin-top:12px;
}
.fb-post-card .fb-caption{ font-size:13.5px; line-height:1.5; margin:0 0 12px; }
.fb-post-card .fb-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:#7FCFC2; margin-bottom:6px; display:block;
}
.fb-post-card .fb-caption-input{
  width:100%; box-sizing:border-box; resize:vertical;
  background:#EAF1FA; color:var(--primary); border:1px solid #2c4a70;
  border-radius:var(--radius-xs); padding:10px 12px; font-size:13.5px; font-family:inherit; line-height:1.5;
}
.fb-post-card .icon-btn-small{ background:rgba(255,255,255,.12); }

/* ---------- Administration ---------- */
.official-row{
  padding:10px 0; border-bottom:1px solid var(--line);
}
.official-row:last-child{ border-bottom:none; }
.official-row .dept{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; }
.official-row a{ color:var(--secondary); text-decoration:none; font-size:13px; }