/* ============================================================
   MPFSTS Mobile Apps — Design System
   TWO distinct app identities, both different from the web portal:

   1. .app-mpfsts  → "MPFSTS किसान" app (farmers + field officers)
        Warm, friendly, high-contrast, oversized touch targets,
        rounded 20px cards, bottom tab bar, illustration-led.
        For low-literacy farmers: big Hindi type, icons + voice.

   2. .app-kisan   → "MP किसान" app (Geo-tagging by SHDO / Vendor)
        Dark field-utility theme, map & camera first, GPS readouts,
        monospace coordinates, offline queue. Tool, not a brochure.
   ============================================================ */

:root{
  --font-app:'Noto Sans Devanagari','Nirmala UI',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --mono-app:'Cascadia Mono',Consolas,monospace;
}

body.apps{
  margin:0;font-family:var(--font-app);
  background:#111820;
  background-image:radial-gradient(circle at 12% 8%,#1D2A38 0,transparent 42%),
                   radial-gradient(circle at 88% 92%,#16302A 0,transparent 45%);
  color:#E8EEF5;min-height:100vh;
}

/* ---------- Showroom chrome (the page that holds the phones) ---------- */
.showroom{max-width:1620px;margin:0 auto;padding:22px 20px 70px}
.showroom-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.showroom-head .logo{
  width:54px;height:54px;flex:none;display:block;border-radius:50%;
  background:#fff;object-fit:contain;box-shadow:0 0 0 1px #2C3F52, 0 3px 10px rgba(0,0,0,.4)
}
.showroom-head h1{margin:0;font-size:1.32rem;font-weight:800;letter-spacing:-.2px}
.showroom-head p{margin:2px 0 0;color:#93A3B5;font-size:.85rem}
.showroom-head .right{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.sr-note{background:#18222E;border:1px solid #263444;border-radius:12px;padding:13px 16px;color:#A9B8C9;font-size:.83rem;margin:16px 0 22px;border-left:3px solid #2FA05F}
.sr-sect{margin:34px 0 14px;display:flex;align-items:center;gap:12px}
.sr-sect h2{margin:0;font-size:1.02rem;font-weight:800;color:#fff}
.sr-sect .ln{flex:1;height:1px;background:#283848}
.sr-sect .tag{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;background:#20303F;color:#8FA6BC;padding:3px 10px;border-radius:999px}

.phones{display:flex;gap:26px;flex-wrap:wrap}
.phone-wrap{width:330px;flex:none}
.phone-cap{font-size:.79rem;color:#9DB0C4;margin-bottom:9px;display:flex;align-items:center;gap:7px}
.phone-cap b{color:#fff;font-size:.85rem}
.phone-cap .n{background:#2FA05F;color:#04140B;width:21px;height:21px;border-radius:6px;display:grid;place-items:center;font-size:.7rem;font-weight:800;flex:none}

/* ---------- Device frame ---------- */
.phone{
  width:330px;height:686px;border-radius:40px;padding:11px;
  background:linear-gradient(160deg,#3A4552,#1A222C);
  box-shadow:0 22px 50px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.09);
  position:relative
}
.phone::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:16px;width:112px;height:4px;border-radius:999px;background:rgba(255,255,255,.35)}
.screenbox{
  width:100%;height:100%;border-radius:30px;overflow:hidden;position:relative;
  display:flex;flex-direction:column
}
.statusbar{
  height:30px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;font-size:.7rem;font-weight:700;flex:none;letter-spacing:.2px
}
.statusbar .ic{display:flex;gap:5px;align-items:center;font-size:.66rem}
.appbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.appbody::-webkit-scrollbar{width:0}

/* ============================================================
   THEME 1 — MPFSTS किसान app (farmer / field officer)
   ============================================================ */
.app-mpfsts{background:#F6F8F4;color:#17251C}
.app-mpfsts .statusbar{background:#136B3A;color:#fff}
.app-mpfsts .appbar{
  background:linear-gradient(160deg,#136B3A,#1E8C4F);color:#fff;padding:12px 16px 18px;flex:none;
  border-radius:0 0 22px 22px
}
.app-mpfsts .appbar .top{display:flex;align-items:center;gap:11px}
.app-mpfsts .appbar .av{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:1.15rem;flex:none}
.app-mpfsts .appbar h2{margin:0;font-size:1rem;font-weight:800;line-height:1.25}
.app-mpfsts .appbar small{font-size:.72rem;opacity:.9}
.app-mpfsts .appbar .icons{margin-left:auto;display:flex;gap:8px;align-items:center}
.app-mpfsts .appbar .ib{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:.95rem;position:relative}
.app-mpfsts .appbar .ib .dotn{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;background:#FFB03A;border:2px solid #157140}
.app-mpfsts .appbar .back{width:32px;height:32px;border-radius:11px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none;font-size:1rem}

.app-mpfsts .pad{padding:14px 15px}
.app-mpfsts .mcard{background:#fff;border-radius:20px;padding:15px;box-shadow:0 3px 12px rgba(19,107,58,.09);border:1px solid #E6EFE8}
.app-mpfsts .mcard.flat{box-shadow:none}
.app-mpfsts .sect-t{font-size:.86rem;font-weight:800;margin:16px 0 9px;display:flex;align-items:center;gap:8px;color:#17251C}
.app-mpfsts .sect-t .more{margin-left:auto;font-size:.74rem;color:#1E8C4F;font-weight:700}

/* Big friendly action grid — the core farmer navigation */
.app-mpfsts .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.app-mpfsts .tile{
  background:#fff;border-radius:18px;padding:13px 8px;text-align:center;border:1px solid #E6EFE8;
  box-shadow:0 2px 8px rgba(19,107,58,.07)
}
.app-mpfsts .tile .ic{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;margin:0 auto 8px;font-size:1.35rem
}
.app-mpfsts .tile b{font-size:.72rem;font-weight:700;line-height:1.3;display:block;color:#1B2A21}
.ic-g{background:#E4F5EA;color:#136B3A} .ic-o{background:#FFF0E0;color:#D2691E}
.ic-b{background:#E4EFFB;color:#1B6EC2} .ic-p{background:#F0E9FC;color:#6D3BD1}
.ic-y{background:#FDF4DC;color:#A67C0A} .ic-r{background:#FCE9E7;color:#C0392B}
.ic-t{background:#DFF4F2;color:#0E7C72}

.app-mpfsts .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.app-mpfsts .stat{background:#fff;border:1px solid #E6EFE8;border-radius:16px;padding:11px 9px;text-align:center}
.app-mpfsts .stat b{display:block;font-size:1.22rem;font-weight:800;color:#136B3A;line-height:1.1}
.app-mpfsts .stat span{font-size:.66rem;color:#5C6D62;font-weight:600}

.app-mpfsts .listitem{display:flex;gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid #EDF2EE}
.app-mpfsts .listitem:last-child{border-bottom:0}
.app-mpfsts .listitem .ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:1.05rem;flex:none}
.app-mpfsts .listitem b{font-size:.83rem;display:block;line-height:1.3}
.app-mpfsts .listitem small{font-size:.71rem;color:#6B7C71}
.app-mpfsts .listitem .go{margin-left:auto;color:#9AA9A0;font-size:1rem}

.app-mpfsts .chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.68rem;font-weight:800}
.c-ok{background:#E4F5EA;color:#136B3A} .c-warn{background:#FDF4DC;color:#A67C0A}
.c-rej{background:#FCE9E7;color:#C0392B} .c-info{background:#E4EFFB;color:#1B6EC2}
.c-ai{background:#F0E9FC;color:#6D3BD1} .c-neutral{background:#EEF1EF;color:#5C6D62}

.app-mpfsts .bigbtn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:linear-gradient(135deg,#136B3A,#1E8C4F);color:#fff;border:0;border-radius:16px;
  padding:15px;font-size:.95rem;font-weight:800;font-family:var(--font-app);box-shadow:0 5px 14px rgba(19,107,58,.3)
}
.app-mpfsts .bigbtn.o{background:linear-gradient(135deg,#D2691E,#E8862F);box-shadow:0 5px 14px rgba(210,105,30,.3)}
.app-mpfsts .bigbtn.ghost{background:#fff;color:#136B3A;border:2px solid #136B3A;box-shadow:none}
.app-mpfsts .bigbtn.ai{background:linear-gradient(135deg,#6D3BD1,#8B5CF6);box-shadow:0 5px 14px rgba(109,59,209,.3)}

/* Voice-first control — critical for low-literacy farmers */
.app-mpfsts .voice{
  display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#FFF3E4,#FFE8CC);
  border:1.5px dashed #E8862F;border-radius:18px;padding:13px 15px
}
.app-mpfsts .voice .mic{
  width:48px;height:48px;border-radius:50%;background:#E8862F;color:#fff;display:grid;place-items:center;
  font-size:1.35rem;flex:none;box-shadow:0 0 0 6px rgba(232,134,47,.18)
}
.app-mpfsts .voice b{font-size:.83rem;display:block}
.app-mpfsts .voice small{font-size:.71rem;color:#7A5A32}

.app-mpfsts .aibox{
  background:linear-gradient(160deg,#F3EDFE,#FBFAFF);border:1px solid #DFD2F7;border-radius:20px;padding:14px
}
.app-mpfsts .aibox .hd{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.app-mpfsts .aibox .hd b{font-size:.83rem;color:#552CA8}
.app-mpfsts .aitag{background:#6D3BD1;color:#fff;font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:999px;letter-spacing:.4px}

.app-mpfsts .steps{display:flex;gap:0;margin:4px 0}
.app-mpfsts .steps .s{flex:1;text-align:center;position:relative}
.app-mpfsts .steps .s::before{content:"";position:absolute;top:12px;left:-50%;width:100%;height:3px;background:#DCE5DE}
.app-mpfsts .steps .s:first-child::before{display:none}
.app-mpfsts .steps .s i{width:25px;height:25px;border-radius:50%;background:#DCE5DE;color:#7A8A80;display:grid;place-items:center;margin:0 auto 5px;font-size:.66rem;font-weight:800;position:relative;z-index:1;font-style:normal}
.app-mpfsts .steps .s span{font-size:.6rem;color:#6B7C71;font-weight:700;display:block;line-height:1.25}
.app-mpfsts .steps .s.done i{background:#136B3A;color:#fff} .app-mpfsts .steps .s.done::before{background:#136B3A}
.app-mpfsts .steps .s.now i{background:#E8862F;color:#fff;box-shadow:0 0 0 4px #FFE8CC}

/* Bottom tab bar */
.app-mpfsts .tabbar{
  flex:none;background:#fff;border-top:1px solid #E1E9E3;display:grid;grid-template-columns:repeat(5,1fr);
  padding:7px 4px 10px
}
.app-mpfsts .tabbar a{text-align:center;color:#8A9A90;text-decoration:none;font-size:.6rem;font-weight:700}
.app-mpfsts .tabbar a i{display:block;font-size:1.15rem;font-style:normal;margin-bottom:2px}
.app-mpfsts .tabbar a.on{color:#136B3A}
.app-mpfsts .tabbar a.fab i{
  width:46px;height:46px;margin:-19px auto 2px;border-radius:16px;background:linear-gradient(135deg,#136B3A,#1E8C4F);
  color:#fff;display:grid;place-items:center;box-shadow:0 5px 14px rgba(19,107,58,.35)
}

.app-mpfsts .field-m{margin-bottom:13px}
.app-mpfsts .field-m label{display:block;font-size:.76rem;font-weight:800;margin-bottom:5px;color:#3A4A40}
.app-mpfsts .inp-m{width:100%;padding:13px 14px;border:1.5px solid #DCE5DE;border-radius:14px;font-family:var(--font-app);font-size:.88rem;background:#fff;color:#17251C}
.app-mpfsts .otp-m{display:flex;gap:8px;justify-content:space-between}
.app-mpfsts .otp-m i{flex:1;height:52px;border:1.5px solid #DCE5DE;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:1.25rem;font-weight:800;font-style:normal;font-family:var(--mono-app)}
.app-mpfsts .otp-m i.f{border-color:#136B3A;box-shadow:0 0 0 3px #E4F5EA}

/* ============================================================
   THEME 2 — MP किसान app (Geo-tagging: SHDO & Vendor)
   Dark field-utility. Map/camera first.
   ============================================================ */
.app-kisan{background:#0D141C;color:#DCE6F0}
.app-kisan .statusbar{background:#070C12;color:#8FA6BC}
.app-kisan .appbar{
  background:#111B25;border-bottom:1px solid #1F2D3B;padding:12px 15px;flex:none;
  display:flex;align-items:center;gap:11px
}
.app-kisan .appbar .back{width:32px;height:32px;border-radius:9px;background:#1B2836;display:grid;place-items:center;flex:none;color:#8FA6BC}
.app-kisan .appbar h2{margin:0;font-size:.94rem;font-weight:800;color:#fff;line-height:1.25}
.app-kisan .appbar small{font-size:.68rem;color:#7E93A9;font-family:var(--mono-app)}
.app-kisan .appbar .right{margin-left:auto;display:flex;gap:7px;align-items:center}

.app-kisan .pad{padding:13px 14px}
.app-kisan .kcard{background:#141F2B;border:1px solid #22303F;border-radius:12px;padding:13px}
.app-kisan .kcard.warn{border-color:#5C4416;background:#1D1A12}
.app-kisan .kcard.ok{border-color:#1C5238;background:#0F1E17}
.app-kisan .khd{font-size:.68rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#6F87A0;margin:16px 0 8px;display:flex;align-items:center;gap:9px}
.app-kisan .khd .ln{flex:1;height:1px;background:#22303F}

/* GPS / telemetry readout — the signature element of this app */
.app-kisan .gps{
  background:#0A1119;border:1px solid #1D4D3C;border-radius:12px;padding:11px 13px;font-family:var(--mono-app)
}
.app-kisan .gps .r{display:flex;justify-content:space-between;font-size:.72rem;padding:2px 0}
.app-kisan .gps .r span{color:#6F87A0}
.app-kisan .gps .r b{color:#3DD68C;font-weight:700}
.app-kisan .gps .lock{display:flex;align-items:center;gap:7px;font-size:.7rem;color:#3DD68C;margin-bottom:7px;font-family:var(--font-app);font-weight:700}
.app-kisan .gps .lock i{width:7px;height:7px;border-radius:50%;background:#3DD68C;box-shadow:0 0 0 4px rgba(61,214,140,.18);font-style:normal}

/* Map viewport */
.app-kisan .map{
  height:186px;border-radius:12px;border:1px solid #22303F;position:relative;overflow:hidden;
  background:
    linear-gradient(0deg,rgba(13,20,28,.55),rgba(13,20,28,.2)),
    repeating-linear-gradient(0deg,#16232F 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,#16232F 0 1px,transparent 1px 26px),
    radial-gradient(circle at 34% 42%,#1E4231 0,transparent 46%),
    radial-gradient(circle at 72% 66%,#243A2C 0,transparent 40%),
    #101A24
}
.app-kisan .map .plot{
  position:absolute;left:26%;top:28%;width:46%;height:42%;
  border:2px dashed #3DD68C;background:rgba(61,214,140,.13);border-radius:5px
}
.app-kisan .map .pin{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-100%);
  color:#FF7A45;font-size:1.5rem;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))
}
.app-kisan .map .scale{position:absolute;left:10px;bottom:9px;font-family:var(--mono-app);font-size:.62rem;color:#8FA6BC;background:rgba(7,12,18,.75);padding:2px 7px;border-radius:5px}
.app-kisan .map .layers{position:absolute;right:9px;top:9px;display:flex;flex-direction:column;gap:6px}
.app-kisan .map .layers i{width:30px;height:30px;border-radius:8px;background:rgba(7,12,18,.8);border:1px solid #26374A;display:grid;place-items:center;font-style:normal;font-size:.85rem;color:#B7C9DB}

/* Camera capture slots */
.app-kisan .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.app-kisan .shot{
  aspect-ratio:3/4;border-radius:11px;border:1.5px dashed #2C3F52;background:#101A24;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:#6F87A0;font-size:.64rem;text-align:center;padding:6px;position:relative;overflow:hidden
}
.app-kisan .shot .cam{font-size:1.25rem;color:#54708A}
.app-kisan .shot.filled{
  border-style:solid;border-color:#1C5238;
  background:linear-gradient(160deg,#1B3D2C,#152A20);color:#9FD9BB
}
.app-kisan .shot.filled .ok{position:absolute;top:5px;right:5px;width:17px;height:17px;border-radius:50%;background:#3DD68C;color:#06180E;display:grid;place-items:center;font-size:.62rem;font-weight:800}
.app-kisan .shot .stamp{position:absolute;left:0;right:0;bottom:0;background:rgba(7,12,18,.85);font-family:var(--mono-app);font-size:.53rem;padding:2px 4px;color:#8FD9B4}

.app-kisan .kbtn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:#1F8A5B;color:#fff;border:0;border-radius:11px;padding:14px;
  font-size:.9rem;font-weight:800;font-family:var(--font-app)
}
.app-kisan .kbtn.amber{background:#C77A1A} .app-kisan .kbtn.red{background:#B33B2E}
.app-kisan .kbtn.ghost{background:transparent;border:1.5px solid #2C3F52;color:#B7C9DB}
.app-kisan .kbtn.ai{background:#6D3BD1}

.app-kisan .krow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #1C2733}
.app-kisan .krow:last-child{border-bottom:0}
.app-kisan .krow .ic{width:36px;height:36px;border-radius:10px;background:#1B2836;display:grid;place-items:center;flex:none;font-size:.95rem;color:#8FA6BC}
.app-kisan .krow b{font-size:.81rem;display:block;color:#E6EEF6;line-height:1.3}
.app-kisan .krow small{font-size:.68rem;color:#7E93A9;font-family:var(--mono-app)}
.app-kisan .krow .go{margin-left:auto;color:#54708A}

.app-kisan .kchip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:6px;font-size:.65rem;font-weight:800}
.k-ok{background:#12301F;color:#3DD68C;border:1px solid #1C5238}
.k-warn{background:#2A2210;color:#E5B451;border:1px solid #5C4416}
.k-err{background:#2C1614;color:#F08579;border:1px solid #5E2A24}
.k-off{background:#1B2836;color:#8FA6BC;border:1px solid #2C3F52}
.k-ai{background:#1E1633;color:#B79BF5;border:1px solid #3B2C60}

.app-kisan .queue{background:#131D28;border:1px solid #22303F;border-radius:11px;overflow:hidden}
.app-kisan .queue .q{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #1C2733;font-size:.76rem}
.app-kisan .queue .q:last-child{border-bottom:0}
.app-kisan .queue .q .n{width:22px;height:22px;border-radius:6px;background:#1B2836;display:grid;place-items:center;font-family:var(--mono-app);font-size:.66rem;flex:none;color:#8FA6BC}

.app-kisan .tabbar{
  flex:none;background:#0B131B;border-top:1px solid #1F2D3B;display:grid;grid-template-columns:repeat(4,1fr);padding:8px 4px 11px
}
.app-kisan .tabbar a{text-align:center;color:#617A93;text-decoration:none;font-size:.6rem;font-weight:700}
.app-kisan .tabbar a i{display:block;font-size:1.1rem;font-style:normal;margin-bottom:2px}
.app-kisan .tabbar a.on{color:#3DD68C}

.app-kisan .field-k{margin-bottom:12px}
.app-kisan .field-k label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#7E93A9;margin-bottom:5px}
.app-kisan .inp-k{width:100%;padding:12px 13px;border:1px solid #2C3F52;border-radius:10px;background:#0F1922;color:#E6EEF6;font-family:var(--font-app);font-size:.86rem}

/* Shared: bilingual toggle inside the phone */
.applang{display:inline-flex;border-radius:999px;overflow:hidden;font-size:.66rem;font-weight:800}
.applang button{border:0;padding:4px 11px;font-family:var(--font-app);font-weight:800;font-size:.66rem;cursor:pointer;background:rgba(255,255,255,.16);color:#fff}
.applang button.on{background:#fff;color:#136B3A}
.app-kisan .applang button{background:#1B2836;color:#8FA6BC}
.app-kisan .applang button.on{background:#3DD68C;color:#06180E}

/* Showroom-level language switch */
.sr-lang{display:inline-flex;border:1px solid #2C3F52;border-radius:999px;overflow:hidden;background:#141F2B}
.sr-lang button{border:0;background:transparent;color:#8FA6BC;padding:7px 15px;font-family:var(--font-app);font-weight:800;font-size:.8rem;cursor:pointer}
.sr-lang button[aria-pressed="true"]{background:#2FA05F;color:#04140B}
.sr-btn{border:1px solid #2C3F52;background:#141F2B;color:#B7C9DB;border-radius:9px;padding:8px 14px;font-family:var(--font-app);font-weight:700;font-size:.8rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.sr-btn:hover{background:#1B2836;color:#fff;text-decoration:none}