/* =========================================================
   Assam Land Record App — Design System
   Signature: document-style "record card" with a stamped corner
   accent, deep teal-slate + terracotta palette (land/earth tone,
   deliberately distinct from any government emblem colors).
   Full light/dark/system theme support via [data-theme].
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:        #F5F3EE;
  --surface:   #FFFFFF;
  --surface-2: #ECE8DE;
  --ink:       #1E2624;
  --ink-muted: #62706C;
  --primary:      #1F4B4C;
  --primary-dark: #123030;
  --primary-tint: #DCEAE9;
  --accent:      #C9793A;
  --accent-dark: #9C5A22;
  --accent-tint: #F5E1CE;
  --danger:  #B5432E; --danger-tint: #F6DFD9;
  --warn:    #B4791E; --warn-tint:   #F6E7C9;
  --ok:      #237A4E; --ok-tint:     #DCF0E3;
  --line:    #E1DDD1;
  --shadow-1: 0 1px 2px rgba(18,48,48,0.08), 0 1px 1px rgba(18,48,48,0.06);
  --shadow-2: 0 4px 16px rgba(18,48,48,0.14);
  --shadow-3: 0 12px 32px rgba(18,48,48,0.20);
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px;
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme="dark"]{
  --bg:        #121615;
  --surface:   #1B211F;
  --surface-2: #232A28;
  --ink:       #EDEFEC;
  --ink-muted: #9AA6A1;
  --primary:      #4C9C93;
  --primary-dark: #7BC2B8;
  --primary-tint: #1E3634;
  --accent:      #E0A15F;
  --accent-dark: #F0BE8A;
  --accent-tint: #3A2C1C;
  --danger:  #E58775; --danger-tint: #3A2320;
  --warn:    #E3B65E;  --warn-tint:   #3A301C;
  --ok:      #6FCB9A;  --ok-tint:     #1B3527;
  --line:    #2E3634;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
  transition:background .2s ease, color .2s ease;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
:focus-visible{outline:2.5px solid var(--accent-dark); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* ---------- App shell ---------- */
.app-shell{
  max-width:480px; margin:0 auto; min-height:100vh; background:var(--bg);
  position:relative; display:flex; flex-direction:column; box-shadow:0 0 60px rgba(18,48,48,0.10);
}
@media (min-width:481px){
  body{background:linear-gradient(180deg,#EAE7DE,#DDD8CB);}
  [data-theme="dark"] body{background:linear-gradient(180deg,#0D100F,#080a09);}
  .app-shell{margin-top:18px; margin-bottom:18px; border-radius:28px; overflow:hidden; min-height:calc(100vh - 36px);}
}

/* ---------- Top App Bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30; background:var(--primary); color:#fff;
  padding:14px 18px calc(14px + env(safe-area-inset-top,0)) 18px;
  padding-top:calc(14px + env(safe-area-inset-top,0));
  display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-2);
}
.topbar .back-btn, .topbar .icon-btn{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.14); border:none; color:#fff; cursor:pointer; flex:none;
}
.topbar .back-btn:active, .topbar .icon-btn:active{background:rgba(255,255,255,0.28);}
.topbar h1{font-family:var(--font-display); font-size:17px; font-weight:700; margin:0; letter-spacing:.1px; flex:1; line-height:1.25;}
.topbar .eyebrow{display:block; font-family:var(--font-body); font-weight:500; font-size:11px; opacity:.78; letter-spacing:.4px; text-transform:uppercase;}
.topbar .brand-mark{width:34px; height:34px; border-radius:10px; background:var(--accent); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; flex:none;}
.topbar .lang-switch{display:flex; background:rgba(255,255,255,.14); border-radius:999px; padding:3px; flex:none;}
.topbar .lang-switch a{padding:5px 9px; border-radius:999px; font-size:10.5px; font-weight:700; color:rgba(255,255,255,.75);}
.topbar .lang-switch a.active{background:#fff; color:var(--primary-dark);}

/* ---------- Content ---------- */
.content{flex:1; padding:16px 16px 24px; padding-bottom:calc(96px + env(safe-area-inset-bottom,0));}

/* ---------- Disclaimer banner (persistent, non-dismissible on-page) ---------- */
.disclaimer-banner{
  background:var(--warn-tint); border:1px solid var(--warn); color:var(--ink);
  border-radius:14px; padding:12px 14px; font-size:11.5px; line-height:1.55; margin-bottom:16px;
  display:flex; gap:10px; align-items:flex-start;
}
.disclaimer-banner svg{flex:none; color:var(--warn); margin-top:1px;}

/* ---------- Disclaimer modal (first-visit) ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(10,15,14,.55); z-index:100; display:flex; align-items:flex-end; justify-content:center;}
.modal-overlay.hidden{display:none;}
.modal-sheet{background:var(--surface); border-radius:22px 22px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom,0)); max-width:480px; width:100%; box-shadow:var(--shadow-3);}
@media (min-width:481px){ .modal-overlay{align-items:center;} .modal-sheet{border-radius:22px;} }
.modal-sheet .modal-icon{width:44px; height:44px; border-radius:12px; background:var(--warn-tint); color:var(--warn); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.modal-sheet h3{font-family:var(--font-display); font-size:16px; margin:0 0 8px;}
.modal-sheet p{font-size:13px; line-height:1.6; color:var(--ink-muted); margin:0 0 18px;}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(155deg,var(--primary) 0%, #163C3D 55%, #0F2C2C 100%);
  color:#fff; border-radius:var(--radius-lg); padding:22px 20px 20px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-2);
}
.hero::after{content:""; position:absolute; right:-30px; top:-30px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(201,121,58,.35),transparent 70%);}
.hero .kicker{font-size:11.5px; text-transform:uppercase; letter-spacing:1px; color:var(--accent-tint); opacity:.9; font-weight:600;}
.hero h2{font-family:var(--font-display); font-size:20px; line-height:1.32; margin:6px 0 8px; font-weight:800;}
.hero p{font-size:13px; line-height:1.55; margin:0; color:#D9E4E2; max-width:36ch;}

/* ---------- Section headers ---------- */
.section-title{display:flex; align-items:baseline; justify-content:space-between; margin:22px 2px 10px;}
.section-title h3{font-family:var(--font-display); font-size:15px; font-weight:800; margin:0; color:var(--ink);}
.section-title a, .section-title span{font-size:11.5px; color:var(--ink-muted); font-weight:600;}

/* ---------- Grid cards (services / tools) ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.rec-card{
  background:var(--surface); border-radius:var(--radius-md); padding:14px; box-shadow:var(--shadow-1);
  border:1px solid var(--line); display:flex; flex-direction:column; gap:10px; position:relative;
}
.rec-card:active{transform:scale(.97);}
.rec-card .icon{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--primary-tint); color:var(--primary);}
.rec-card .icon.amber{background:var(--accent-tint); color:var(--accent-dark);}
.rec-card h4{font-family:var(--font-display); font-size:13px; font-weight:700; margin:0; line-height:1.3;}
.rec-card p{font-size:10.5px; color:var(--ink-muted); margin:0; line-height:1.4;}

/* ---------- List rows (More menu, Bookmarks, Activity) ---------- */
.list-panel{background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-1); border:1px solid var(--line); overflow:hidden;}
.list-row{display:flex; align-items:center; gap:12px; padding:13px 14px; border-bottom:1px solid var(--line); position:relative;}
.list-row:last-child{border-bottom:none;}
.list-row .row-ic{width:34px; height:34px; border-radius:10px; background:var(--primary-tint); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:none;}
.list-row .row-ic.amber{background:var(--accent-tint); color:var(--accent-dark);}
.list-row .row-ic.danger{background:var(--danger-tint); color:var(--danger);}
.list-row .row-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.list-row .row-title{font-size:13px; font-weight:600; color:var(--ink); display:block;}
.list-row .row-sub{font-size:10.5px; color:var(--ink-muted); margin-top:1px; display:block;}
.list-row .row-chevron{color:var(--ink-muted); flex:none;}
.list-row button.row-action{background:none; border:none; color:var(--ink-muted); cursor:pointer; flex:none;}

/* ---------- Panels & forms ---------- */
.panel{background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-1); border:1px solid var(--line); padding:16px; margin-bottom:14px;}
.panel h4{font-family:var(--font-display); font-size:13px; font-weight:700; margin:0 0 10px; color:var(--ink);}
.panel p{font-size:13px; line-height:1.65; color:var(--ink-muted); margin:0;}
.field{margin-bottom:14px;}
.field label{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.field label .unit-tag{font-size:10px; font-weight:500; color:var(--ink-muted); font-family:var(--font-mono);}
.field input[type=number], .field input[type=text], .field select{
  width:100%; padding:11px 13px; border-radius:12px; border:1.6px solid var(--line);
  background:var(--bg); font-size:14.5px; font-family:var(--font-mono); color:var(--ink);
}
.field input:focus, .field select:focus{border-color:var(--primary); outline:none;}
.seg{display:flex; background:var(--surface-2); border-radius:12px; padding:3px; gap:3px;}
.seg button{flex:1; border:none; background:transparent; padding:9px 6px; border-radius:9px; font-size:11.5px; font-weight:600; color:var(--ink-muted); cursor:pointer;}
.seg button.active{background:var(--surface); color:var(--primary); box-shadow:var(--shadow-1);}

.btn-primary{width:100%; padding:14px; border:none; border-radius:14px; background:var(--primary); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; cursor:pointer; box-shadow:var(--shadow-2); display:flex; align-items:center; justify-content:center; gap:8px;}
.btn-primary:active{background:var(--primary-dark);}
.btn-gold{background:var(--accent); color:#fff;}
.btn-gold:active{background:var(--accent-dark);}
.btn-ghost{width:100%; padding:12px; border-radius:14px; border:1.6px solid var(--line); background:transparent; color:var(--ink); font-weight:600; font-size:13px; cursor:pointer; text-align:center;}
.btn-row{display:flex; gap:10px; margin-top:4px;}
.btn-row .btn-primary, .btn-row .btn-ghost{flex:1;}

/* ---------- Result dial (calculators) ---------- */
.result-block{margin-top:16px; text-align:center;}
.dial-wrap{position:relative; width:180px; height:180px; margin:0 auto 14px;}
.dial-wrap svg{width:100%; height:100%; display:block;}
.dial-track{fill:none; stroke:var(--surface-2); stroke-width:14; stroke-linecap:round;}
.dial-progress{fill:none; stroke:var(--accent); stroke-width:14; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);}
.dial-center{position:absolute; top:14px; right:14px; bottom:14px; left:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; text-align:center; padding:0 6px;}
.dial-center .value{font-family:var(--font-mono); font-weight:700; font-size:24px; color:var(--primary); line-height:1.15; max-width:100%; word-break:break-word;}
.dial-center .unit{font-size:10.5px; color:var(--ink-muted); margin-top:2px; font-weight:600;}
.result-label{font-size:11px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.6px; font-weight:600; margin-top:6px;}
.result-note{font-size:12px; color:var(--ink); margin-top:10px; background:var(--surface-2); border-radius:10px; padding:10px 12px; line-height:1.5;}
.result-secondary{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.result-secondary .mini{background:var(--surface-2); border-radius:12px; padding:10px; text-align:left;}
.result-secondary .mini b{display:block; font-family:var(--font-mono); font-size:14px; color:var(--primary);}
.result-secondary .mini span{font-size:10px; color:var(--ink-muted);}

/* ---------- Steps (How to Use) ---------- */
.step-item{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
.step-item:last-child{border-bottom:none;}
.step-num{width:26px; height:26px; border-radius:50%; background:var(--primary-tint); color:var(--primary); font-family:var(--font-mono); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; flex:none;}
.step-body h5{font-size:12.5px; font-weight:700; margin:0 0 3px;}
.step-body p{font-size:12px; color:var(--ink-muted); margin:0; line-height:1.55;}

/* ---------- Documents list ---------- */
.doc-item{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px;}
.doc-item:last-child{border-bottom:none;}
.doc-item svg{flex:none; color:var(--ok); margin-top:2px;}

/* ---------- FAQ accordion ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:last-child{border-bottom:none;}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; cursor:pointer; font-size:12.5px; font-weight:600;}
.faq-q svg{flex:none; transition:transform .2s; color:var(--ink-muted); transform:rotate(90deg);}
.faq-item.open .faq-q svg{transform:rotate(-90deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{font-size:12px; color:var(--ink-muted); line-height:1.6; margin:0 0 12px;}

/* ---------- Official link CTA ---------- */
.official-cta{background:var(--primary-tint); border:1px solid var(--primary); border-radius:14px; padding:14px; margin-bottom:16px;}
.official-cta .label{font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; color:var(--primary); margin-bottom:4px;}
.official-cta .url{font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); word-break:break-all; margin-bottom:12px;}

/* ---------- Bottom Navigation ---------- */
.bottom-nav{position:fixed; left:0; right:0; bottom:0; z-index:40; max-width:480px; margin:0 auto; background:var(--surface); border-top:1px solid var(--line); display:flex; padding:8px 6px calc(8px + env(safe-area-inset-bottom,0)); box-shadow:0 -4px 18px rgba(18,48,48,0.10);}
.bottom-nav a{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 2px; border-radius:12px; color:var(--ink-muted); font-size:10px; font-weight:600;}
.bottom-nav a.active{color:var(--primary);}
.bottom-nav a.active .nav-ic{background:var(--primary-tint);}
.nav-ic{width:38px; height:26px; border-radius:13px; display:flex; align-items:center; justify-content:center;}

/* ---------- Bookmark star toggle ---------- */
.bookmark-btn{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-muted); cursor:pointer; box-shadow:var(--shadow-1);}
.bookmark-btn.saved{color:var(--accent); border-color:var(--accent);}

/* ---------- Empty state ---------- */
.empty-state{text-align:center; padding:40px 20px; color:var(--ink-muted);}
.empty-state svg{margin-bottom:12px; opacity:.5;}
.empty-state p{font-size:13px; line-height:1.6;}

/* ---------- Toggle switch (theme) ---------- */
.toggle-group{display:flex; background:var(--surface-2); border-radius:12px; padding:3px; gap:3px;}
.toggle-group button{flex:1; border:none; background:transparent; padding:10px 6px; border-radius:9px; font-size:12px; font-weight:600; color:var(--ink-muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;}
.toggle-group button.active{background:var(--surface); color:var(--primary); box-shadow:var(--shadow-1);}

/* ---------- Misc ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; background:var(--primary-tint); color:var(--primary); font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px;}
.footer-note{text-align:center; font-size:11px; color:var(--ink-muted); margin-top:20px; line-height:1.6;}
.footer-note a{color:var(--primary); font-weight:600;}
.toast{position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:999px; font-size:12px; font-weight:600; z-index:200; box-shadow:var(--shadow-2); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}
::selection{background:var(--accent-tint);}

/* ---------- Ads Placement ---------- */
.ad-container {
    width: 100%;
    margin: 12px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-height: 50px;
    background: transparent;
    text-align: center;
}
.ad-banner-top { margin-top: 8px; margin-bottom: 12px; }
.ad-banner-bottom { margin-top: 16px; margin-bottom: 16px; }
.ad-banner-incontent { margin: 16px 0; }