/* Fonts loaded via in for better performance */ /* ── ANDROID CROSS-DEVICE OVERFLOW GUARD ── Prevents Android Chrome from auto-zooming the viewport when any child element is wider than the screen. iOS Safari handles overflow gracefully; Android does not — this keeps rendering uniform. */ html, body { overflow-x: hidden; max-width: 100vw; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; } img, video, canvas, svg, iframe { max-width: 100%; height: auto; } table { max-width: 100%; } pre, code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } /* ── GLOBAL ───────────────────────────────────── */ :root{ --navy:#1C2951;--navy-deep:#111c3a;--navy-mid:#243563;--navy-lt:#2e4580; --emerald:#00875A;--emerald-lt:#00A36C;--emerald-bg:#E6F5EF; --bronze:#B8872C;--bronze-lt:#D4A33A;--bronze-pale:#FDF5E0;--bronze-bdr:#C99B3A; --saffron:#CD7F32;--saffron-lt:#D4943A;--gold:#F5C518; --white:#fff;--border:#8FA3C0;--inp-bg:#FEFAE8;--inp-bdr:#C99B3A; --calc-bg:#E8F5EE;--calc-fg:#006644;--fin-bg:#EAF0FB;--fin-fg:#1C2951; --tot-bg:#F9F5DF;--bal-bg:#E6EEFF;--sun-bg:#FFF0ED;--sun-fg:#C0392B; --gray100:#F7F7F7;--gray200:#EBEBEB;--gray400:#9A9A9A;--gray600:#5A5A5A; --danger:#E53E3E;--success:#38A169; } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Noto Sans Devanagari','Mangal','Arial Unicode MS',Arial,sans-serif;background:#EEF2F8;color:#1a1a2e;font-size:12px;line-height:1.4} /* ── SCREEN SYSTEM ────────────────────────────── */ .screen{display:none} .screen.active{display:block} #app-wrap{display:none;flex-direction:column;min-height:100vh} #app-wrap.active{display:flex} #admin-wrap{display:none;flex-direction:column;min-height:100vh} #admin-wrap.active{display:flex;flex-direction:column} /* ══════════════════════════════════════════════ LANDING PAGE ══════════════════════════════════════════════ */ #landing{ min-height:100vh; background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,var(--navy-mid) 100%); display:flex;flex-direction:column;align-items:center;justify-content:center; padding:40px 20px; position:relative;overflow:hidden; } #landing::before{content:'';position:absolute;top:-120px;left:-120px;width:500px;height:500px; background:radial-gradient(circle,rgba(205,127,50,.12) 0%,transparent 70%);border-radius:50%;pointer-events:none} #landing::after{content:'';position:absolute;bottom:-100px;right:-100px;width:400px;height:400px; background:radial-gradient(circle,rgba(0,135,90,.1) 0%,transparent 70%);border-radius:50%;pointer-events:none} .land-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1); border-radius:20px;padding:40px 36px;max-width:520px;width:100%;text-align:center; backdrop-filter:blur(10px);position:relative;z-index:2;box-shadow:0 20px 60px rgba(0,0,0,.4)} .land-emblem{width:120px;height:120px;border-radius:50%; background:rgba(255,255,255,.95); display:flex;align-items:center;justify-content:center;margin:0 auto 16px; box-shadow:0 0 40px rgba(205,127,50,.5),0 4px 20px rgba(0,0,0,.3);overflow:hidden;padding:8px} .land-emblem img{width:100%;height:100%;object-fit:contain} .land-title{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:38px;font-weight:800;letter-spacing:3px; background:linear-gradient(135deg,var(--saffron-lt),var(--gold)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .land-sub{color:rgba(255,255,255,.55);font-size:11px;letter-spacing:4px;text-transform:uppercase;margin-top:6px} .land-desc{color:rgba(255,255,255,.7);font-size:13px;line-height:1.8;margin:20px 0; border-top:1px solid rgba(255,255,255,.1);padding-top:20px} .land-price{display:inline-flex;align-items:center;gap:8px; background:linear-gradient(135deg,var(--saffron),var(--gold)); border-radius:20px;padding:7px 20px;color:#fff;font-weight:700;font-size:13px;margin-bottom:24px} .land-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .lbtn{padding:11px 26px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:700; cursor:pointer;border:none;transition:all .2s;display:flex;align-items:center;gap:6px} .lbtn-primary{background:linear-gradient(135deg,var(--saffron),var(--saffron-lt));color:#fff; box-shadow:0 4px 20px rgba(205,127,50,.4)} .lbtn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(205,127,50,.5)} .lbtn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)} .lbtn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff} .lbtn-gray{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2);font-size:11px;padding:9px 18px} .lbtn-gray:hover{background:rgba(255,255,255,.18)} .land-features{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:24px; border-top:1px solid rgba(255,255,255,.1);padding-top:20px} .feat{color:rgba(255,255,255,.6);font-size:11px;display:flex;align-items:center;gap:5px} .feat::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--saffron);flex-shrink:0} /* ══════════════════════════════════════════════ MODAL ══════════════════════════════════════════════ */ .overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000; display:none;align-items:center;justify-content:center;padding:16px} .overlay.open{display:flex} .modal{background:#fff;border-radius:14px;width:100%;max-width:540px; max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)} .mhdr{padding:22px 24px 0;display:flex;align-items:center;justify-content:space-between} .mtitle{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:20px;font-weight:700;color:var(--navy)} .mclose{background:none;border:none;font-size:22px;cursor:pointer;color:var(--gray400); width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%} .mclose:hover{background:var(--gray100);color:var(--navy)} .mbody{padding:20px 24px 26px} .fsec{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:13px;font-weight:700;color:var(--saffron); margin:18px 0 10px;padding-bottom:7px;border-bottom:2px solid var(--gray100)} .fg{margin-bottom:13px} .fl{display:block;font-size:11px;font-weight:700;color:var(--gray600); text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px} .fi{width:100%;padding:9px 12px;border:2px solid var(--gray200);border-radius:7px; font-family:inherit;font-size:13px;color:var(--navy);outline:none;transition:border .2s} .fi:focus{border-color:var(--saffron)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:10px} .trial-note{background:#f0fdf4;border:1px solid #86efac;border-radius:7px; padding:9px 13px;font-size:12px;color:#166534;text-align:center;margin-bottom:14px} .fbtn{width:100%;padding:12px;border:none;border-radius:8px;font-family:inherit; font-size:14px;font-weight:700;cursor:pointer;margin-top:6px;transition:all .2s} .fbtn-p{background:linear-gradient(135deg,var(--saffron),var(--saffron-lt));color:#fff; box-shadow:0 4px 16px rgba(205,127,50,.35)} .fbtn-p:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(205,127,50,.45)} .fbtn-g{background:linear-gradient(135deg,var(--emerald),var(--emerald-lt));color:#fff} .note-link{text-align:center;margin-top:12px;font-size:11px;color:var(--gray400)} .note-link a{color:var(--saffron);font-weight:700;cursor:pointer;text-decoration:none} /* UPI box */ .upi-box{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:2px solid #7dd3fc; border-radius:10px;padding:18px;text-align:center;margin:12px 0} .upi-lbl{font-weight:700;color:var(--navy);margin-bottom:6px;font-size:13px} .upi-id{font-size:22px;font-weight:800;color:var(--saffron);letter-spacing:1px} .upi-amt{font-size:12px;color:var(--gray600);margin-top:5px} .upi-inst{font-size:11px;color:var(--gray400);margin-top:9px;line-height:1.7} /* ══════════════════════════════════════════════ APP — TOP HEADER ══════════════════════════════════════════════ */ #app-header{ background:linear-gradient(90deg,var(--navy-deep) 0%,var(--navy) 60%,var(--navy-mid) 100%); padding:0 16px;display:flex;align-items:center;height:54px; position:sticky;top:0;z-index:200;box-shadow:0 2px 14px rgba(0,0,0,.35);flex-shrink:0 } .ah-logo{display:flex;align-items:center;gap:8px;white-space:nowrap} .ah-logo img{height:36px;width:auto;border-radius:50%;background:#fff;padding:2px} .ah-logo-text{font-family:'Noto Serif Devanagari',Georgia,serif;font-weight:800;font-size:19px;letter-spacing:2px; background:linear-gradient(135deg,var(--saffron-lt),var(--gold)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .ah-school{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.2); display:flex;flex-direction:column;overflow:hidden} .ah-sname{color:#fff;font-size:12px;font-weight:600;line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px} .ah-udise{color:var(--bronze-lt);font-size:10px;letter-spacing:.8px} .ah-spacer{flex:1} .ah-dist-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.3px;border:1.5px solid;white-space:nowrap;cursor:default;transition:all .2s} .ah-dist-badge.synced{background:rgba(0,135,90,.18);border-color:#00A36C;color:#90FFD0} .ah-dist-badge.unsynced{background:rgba(229,62,62,.15);border-color:#E53E3E;color:#FFB3B3} .ah-dist-badge .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .ah-dist-badge.synced .dot{background:#00A36C;box-shadow:0 0 6px #00A36C} .ah-dist-badge.unsynced .dot{background:#E53E3E;box-shadow:0 0 6px #E53E3E} /* District filter buttons */ .dist-fbtn{padding:4px 12px;border-radius:20px;border:1.5px solid var(--gray200);background:#fff;color:var(--navy);font-size:10.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s} .dist-fbtn:hover{border-color:var(--saffron);color:var(--saffron)} .dist-fbtn.active{background:var(--navy);color:#fff;border-color:var(--navy)} /* District status grid in control panel */ .dist-status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:8px;margin-top:4px} .dist-status-item{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:7px;border:1.5px solid;font-size:11.5px;font-weight:600} .dist-status-item.ds-ok{background:#E6F5EF;border-color:#00A36C;color:#006644} .dist-status-item.ds-no{background:#FFF0F0;border-color:#F9BBBB;color:#9B1C1C} .dist-status-item .ds-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0} .dist-status-item.ds-ok .ds-dot{background:#00A36C} .dist-status-item.ds-no .ds-dot{background:#E53E3E} .ah-right{display:flex;align-items:center;gap:7px} .ah-ibtn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15); border-radius:6px;padding:6px 11px;color:#fff;font-size:11px;cursor:pointer; display:flex;align-items:center;gap:5px;font-family:inherit;font-weight:600;transition:all .2s} .ah-ibtn:hover{background:rgba(255,255,255,.16)} .ah-ibtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0} .ah-pbtn{background:linear-gradient(135deg,var(--saffron),var(--saffron-lt));border:none; border-radius:6px;padding:6px 13px;color:#fff;font-size:11px;cursor:pointer; display:flex;align-items:center;gap:5px;font-family:inherit;font-weight:700} .ah-pbtn:hover{opacity:.9} /* ── MONTH ROW ──────────────────────────────── */ #month-row{background:#fff;padding:7px 16px;display:flex;align-items:center;gap:12px; border-bottom:1px solid var(--gray200);flex-wrap:wrap;flex-shrink:0} .mr-lbl{font-size:11px;font-weight:700;color:var(--gray600);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap} .mr-sel{padding:5px 10px;border:2px solid var(--gray200);border-radius:6px; font-family:inherit;font-size:12px;color:var(--navy);cursor:pointer;outline:none} .mr-sel:focus{border-color:var(--saffron)} .mr-badge{background:var(--emerald-bg);color:var(--emerald);font-size:10px;font-weight:700; padding:3px 10px;border-radius:20px;border:1px solid var(--emerald-lt)} /* ── DASHBOARD WRAP ─────────────────────────── */ #dashboard-host{flex:1;overflow-x:auto;overflow-y:auto;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;scroll-padding-top:44px} #dashboard-host th.sth{background:var(--navy-lt)!important;font-size:9.5px;position:sticky;top:0;z-index:20} #dashboard-host th.fth{background:var(--emerald)!important;font-size:9.5px;position:sticky;top:0;z-index:20} /* ── FOOTER ─────────────────────────────────── */ #app-footer{background:#fff;border-top:1px solid var(--gray200); padding:8px 16px;display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:8px;flex-shrink:0} .foot-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .foot-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .wa-btn{background:#25D366;color:#fff;border:none;border-radius:6px; padding:7px 14px;display:flex;align-items:center;gap:6px; font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none} .wa-btn:hover{opacity:.9} .foot-copy{font-size:10px;color:var(--gray400)} /* ══════════════════════════════════════════════ PROFILE SIDEBAR ══════════════════════════════════════════════ */ .sb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:none} .sb-overlay.open{display:block} .sidebar{position:fixed;top:0;right:-420px;bottom:0;width:380px;background:#fff; z-index:501;transition:right .3s ease;box-shadow:-6px 0 30px rgba(0,0,0,.2); display:flex;flex-direction:column;overflow:hidden} .sidebar.open{right:0} .sb-hdr{background:linear-gradient(135deg,var(--navy),var(--navy-mid));padding:20px 18px 16px} .sb-hdr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .sb-htitle{font-family:'Noto Serif Devanagari',Georgia,serif;color:#fff;font-size:17px;font-weight:700} .sb-close{background:none;border:none;color:rgba(255,255,255,.6);font-size:22px;cursor:pointer;line-height:1} .sb-close:hover{color:#fff} .sb-avatar{width:52px;height:52px;border-radius:50%; background:linear-gradient(135deg,var(--saffron),var(--gold)); display:flex;align-items:center;justify-content:center; font-family:'Noto Serif Devanagari',Georgia,serif;font-size:22px;font-weight:800;color:#fff;margin-bottom:8px} .sb-uname{color:#fff;font-weight:700;font-size:14px} .sb-uschool{color:rgba(255,255,255,.55);font-size:11px} .sb-body{flex:1;overflow-y:auto;padding:16px} .sb-sec{margin-bottom:20px} .sb-seclbl{font-size:10px;font-weight:700;color:var(--gray400);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px} .irow{display:flex;justify-content:space-between;align-items:flex-start; padding:8px 0;border-bottom:1px solid var(--gray100);gap:10px} .irow:last-child{border-bottom:none} .ikey{font-size:12px;color:var(--gray600);flex-shrink:0} .ival{font-size:12px;color:var(--navy);font-weight:600;text-align:right} .sub-box{border-radius:10px;padding:13px;margin-bottom:13px;border:1.5px solid} .sub-box.active-sub{background:#f0fdf4;border-color:#86efac} .sub-box.trial{background:#fffbeb;border-color:#fcd34d} .sub-box.expired{background:#fef2f2;border-color:#fca5a5} .sub-days{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:26px;font-weight:800} .sub-days.c-green{color:var(--success)} .sub-days.c-amber{color:#d97706} .sub-days.c-red{color:var(--danger)} .sub-note{font-size:11px;color:var(--gray600);margin-top:3px} .txn-item{background:var(--gray100);border-radius:7px;padding:9px 11px; margin-bottom:7px;display:flex;justify-content:space-between;align-items:center} .txn-date{font-size:10px;color:var(--gray400)} .txn-desc{font-size:12px;font-weight:600;color:var(--navy)} .txn-amt{font-size:14px;font-weight:800;color:var(--success)} .sb-renew{width:100%;padding:10px;border:none;border-radius:7px; background:linear-gradient(135deg,var(--saffron),var(--saffron-lt));color:#fff; font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:10px} .sb-renew:hover{opacity:.9} .sb-logout{width:100%;padding:9px;border:2px solid var(--gray200);border-radius:7px; background:#fff;color:var(--gray600);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer} .sb-logout:hover{background:var(--gray100)} /* ══════════════════════════════════════════════ DASHBOARD (from uploaded code — preserved) ══════════════════════════════════════════════ */ #dashboard-host .hdr{background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,var(--navy-mid) 100%);color:#fff;box-shadow:0 3px 14px rgba(0,0,0,.45)} #dashboard-host .hdr-top{display:flex;align-items:center;justify-content:space-between;padding:9px 18px 7px;border-bottom:2.5px solid var(--bronze)} #dashboard-host .hdr-title{font-size:15px;font-weight:700;letter-spacing:.3px} #dashboard-host .hdr-sub{font-size:10.5px;color:var(--bronze-lt);margin-top:2px;font-weight:500} #dashboard-host .hdr-badge{background:var(--bronze);color:var(--navy-deep);font-size:10px;font-weight:700;padding:4px 13px;border-radius:20px;letter-spacing:.4px;white-space:nowrap} #dashboard-host .sbar{background:var(--navy-mid);padding:6px 18px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center} #dashboard-host .sbl{font-size:10.5px;color:var(--bronze-lt);white-space:nowrap} #dashboard-host .sbar input{background:rgba(255,255,255,.12);border:1px solid rgba(184,135,44,.5);color:#fff;padding:3px 9px;border-radius:3px;font-family:inherit;font-size:11px;min-width:150px} #dashboard-host .sbar input::placeholder{color:rgba(255,255,255,.4)} #dashboard-host .chip{background:rgba(0,135,90,.25);border:1px solid var(--emerald);color:#90FFCE;padding:3px 10px;border-radius:3px;font-size:11px;font-weight:600} #dashboard-host .tabs{background:var(--navy-deep);display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:3px solid var(--bronze)} #dashboard-host .tabs::-webkit-scrollbar{display:none} #dashboard-host .tabs button{background:transparent;border:none;border-right:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.6);padding:9px 18px;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:500;white-space:nowrap;transition:all .2s} #dashboard-host .tabs button.active{background:var(--bronze);color:var(--navy-deep);font-weight:700} #dashboard-host .tabs button:hover:not(.active){background:rgba(184,135,44,.15);color:var(--bronze-lt)} #dashboard-host .actbar{background:var(--bronze-pale);border-bottom:1px solid var(--bronze-bdr);padding:5px 14px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center} #dashboard-host .warn{font-size:10.5px;font-weight:700;color:#7A3500} #dashboard-host .leg{display:flex;align-items:center;gap:5px;font-size:10px;color:#444} #dashboard-host .legbox{width:13px;height:13px;border-radius:2px;border:1px solid #aaa;flex-shrink:0} #dashboard-host .abtns{margin-left:auto;display:flex;gap:6px} #dashboard-host .btn{padding:5px 13px;border:none;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;transition:all .2s} #dashboard-host .btn:hover{opacity:.85;transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.2)} #dashboard-host .bn{background:var(--navy);color:#fff} #dashboard-host .be{background:var(--emerald);color:#fff} #dashboard-host .bb{background:var(--bronze);color:var(--navy-deep)} #dashboard-host .bo{background:#fff;color:var(--navy);border:1.5px solid var(--navy)} #dashboard-host .tpane{display:none} #dashboard-host .tpane.active{display:block} #dashboard-host .twrap{overflow:visible;padding:8px 8px 24px} #dashboard-host .stitle{background:var(--navy);color:#fff;text-align:center;padding:6px 12px;font-size:12.5px;font-weight:700;border-radius:4px 4px 0 0;border-bottom:2.5px solid var(--bronze);margin-bottom:0} #dashboard-host .stitle2{background:var(--emerald);color:#fff;text-align:center;padding:5px 12px;font-size:12px;font-weight:700;border-radius:4px 4px 0 0;border-bottom:2.5px solid var(--bronze);margin-top:16px} #dashboard-host table{border-collapse:collapse;font-size:11px;white-space:nowrap;background:#fff;width:100%} #dashboard-host th,#dashboard-host td{border:1px solid var(--border);padding:3px 5px;text-align:center;min-width:28px} #dashboard-host th{background:var(--navy);color:#fff;font-weight:600;font-size:10px;position:sticky;top:0;z-index:20} #dashboard-host tr.srow td{background:var(--sun-bg);color:var(--sun-fg);font-style:italic} #dashboard-host tr.orow td{background:#FFF8EE} #dashboard-host tr.trow td{background:var(--tot-bg);font-weight:700;border-top:2px solid var(--bronze)} #dashboard-host tr.crow td{background:#F0F7EE;font-weight:700;border-top:2px solid var(--emerald)} #dashboard-host tr.brow td{background:var(--bal-bg);font-weight:600;border-top:2px solid var(--navy-lt)} #dashboard-host tr.nrow td{background:#FCEFD9;font-weight:600;border-top:2px solid #C97A2B} #dashboard-host tr.wrow td{background:var(--navy-deep);color:var(--bronze-lt);font-weight:700;font-size:10px;padding:2px 6px} #dashboard-host td.ic{background:var(--inp-bg);border-color:var(--inp-bdr)!important} #dashboard-host td.cc{background:var(--calc-bg);color:var(--calc-fg)} #dashboard-host td.fc{background:var(--fin-bg);color:var(--fin-fg);font-weight:600} #dashboard-host td.bc{background:var(--bal-bg);color:var(--navy)} #dashboard-host td.lc{text-align:left;font-weight:600;background:#F0F2FA;padding-left:8px} #dashboard-host td.zc{color:#ccc} #dashboard-host input[type=number],#dashboard-host input[type=text]{width:100%;border:none;background:transparent;text-align:center;font-family:inherit;font-size:11px;outline:none;padding:0;color:#1a1a2e} #dashboard-host input.ri{text-align:left;font-size:10px;color:#555} #dashboard-host .sfooter{background:var(--navy);color:#fff;padding:7px 18px;display:flex;flex-wrap:wrap;gap:14px;font-size:11px;border-top:2.5px solid var(--bronze)} #dashboard-host .sfooter strong{color:var(--bronze-lt)} #dashboard-host .toast{position:fixed;bottom:22px;right:22px;background:var(--emerald);color:#fff;padding:10px 20px;border-radius:6px;font-size:12px;font-weight:700;opacity:0;transition:opacity .3s;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3)} #dashboard-host .toast.show{opacity:1} /* ── COLLAPSED MODE ── orow (मागील शिल्लक / प्राप्त / लोकसहभाग) + trow (एकूण) stay fully visible. cc / fc / bc hidden ONLY on regular day rows, crow and brow rows. ── */ #dashboard-host.dash-collapsed tr:not(.orow):not(.trow):not(.wrow):not(.srow) td.cc { display:none } #dashboard-host.dash-collapsed tr:not(.orow):not(.trow):not(.wrow):not(.srow) td.fc { display:none } #dashboard-host.dash-collapsed tr:not(.orow):not(.trow):not(.wrow):not(.srow) td.bc { display:none } /* crow (शिजवलेला एकूण) and brow (शिल्लक) are purely calculated — hide entirely */ #dashboard-host.dash-collapsed tr.crow, #dashboard-host.dash-collapsed tr.brow, #dashboard-host.dash-collapsed tr.nrow { display:none } /* Compact banner when collapsed */ #dashboard-host.dash-collapsed .calc-hint { display:flex!important } #dashboard-host .calc-hint { display:none; background:#FFF8E1; border:1px solid #F9A825; border-radius:6px; padding:5px 12px; font-size:11px; color:#6D4C00; align-items:center; gap:6px; margin-left:8px } /* ══════════════════════════════════════════════ SIMPLE VIEW (सोपे दृश्य) — single-number daily entry ══════════════════════════════════════════════ */ #dashboard-host.simple-mode #grid-root{display:none!important} #dashboard-host:not(.simple-mode) #sv-root{display:none} #sv-root{padding:18px 16px 120px;max-width:720px;margin:0 auto;width:100%;box-sizing:border-box} .sv-hdr{text-align:center;margin-bottom:18px} .sv-title{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:26px;font-weight:800;color:var(--navy);letter-spacing:.3px;margin-bottom:4px} .sv-date{font-size:13px;color:var(--gray600);font-weight:600} .sv-cards{display:flex;flex-direction:column;gap:14px;margin-bottom:18px} .sv-card{background:#fff;border:1.5px solid var(--bronze-bdr);border-radius:16px;padding:18px 16px;box-shadow:0 3px 14px rgba(28,41,81,.08)} .sv-card[data-sk=s2]{border-color:rgba(15,120,80,.35);background:linear-gradient(180deg,#fff 0%,#f3fbf7 100%)} .sv-card-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap} .sv-card-label{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:17px;font-weight:800;color:var(--navy)} .sv-pat-chip{background:var(--bronze-pale);border:1.5px solid var(--bronze-bdr);color:#8a5a11; font-family:inherit;font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;cursor:pointer; display:inline-flex;align-items:center;gap:6px} .sv-pat-chip:hover{background:#fff3d9} .sv-pat-chip b{color:var(--navy);font-size:13px} .sv-stepper{display:flex;align-items:center;gap:10px;justify-content:center;margin:6px 0 8px} .sv-step{width:56px;height:56px;border-radius:14px;border:none;cursor:pointer;font-family:inherit; font-size:28px;font-weight:800;transition:all .15s;user-select:none;display:flex;align-items:center;justify-content:center} .sv-step:active{transform:scale(.94)} .sv-minus{background:#fef2f2;color:#991b1b;border:1.5px solid #fecaca} .sv-minus:hover{background:#fee2e2} .sv-plus{background:#ecfdf5;color:#065f46;border:1.5px solid #a7f3d0} .sv-plus:hover{background:#d1fae5} .sv-num{flex:1;max-width:160px;height:72px;text-align:center;border:2px solid var(--bronze-bdr); border-radius:14px;background:#fff8f0;color:var(--navy); font-family:'Noto Serif Devanagari',Georgia,serif;font-size:42px;font-weight:800;outline:none; padding:0;min-width:0;-moz-appearance:textfield} .sv-num::-webkit-outer-spin-button,.sv-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .sv-num:focus{border-color:var(--saffron);background:#fff} .sv-hint{text-align:center;font-size:11.5px;color:var(--gray400);font-weight:600;margin-bottom:6px;letter-spacing:.3px} .sv-history{margin-top:10px;padding-top:10px;border-top:1px dashed var(--gray200)} .sv-hist-lbl{font-size:11px;color:var(--gray400);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px} .sv-hist-chips{display:flex;flex-wrap:wrap;gap:6px} .sv-hist-chip{background:#eef2f8;border:1px solid var(--gray200);color:var(--navy); font-family:inherit;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:14px;cursor:pointer} .sv-hist-chip:hover{background:#dbe4f0;border-color:var(--navy-lt)} .sv-hist-chip b{color:var(--saffron);font-weight:800} .sv-save-btn{width:100%;padding:17px 18px;background:linear-gradient(135deg,var(--emerald),#067a4d);color:#fff; border:none;border-radius:14px;font-family:'Noto Serif Devanagari',Georgia,serif;font-size:17px;font-weight:800;cursor:pointer; box-shadow:0 6px 18px rgba(15,120,80,.30);letter-spacing:.5px;transition:transform .1s} .sv-save-btn:active{transform:scale(.98)} .sv-save-btn:hover{box-shadow:0 8px 24px rgba(15,120,80,.42)} .sv-footer{display:flex;flex-direction:column;gap:8px;margin-top:18px} .sv-sec-btn{width:100%;padding:12px 14px;background:#fff;color:var(--navy);border:1.5px solid var(--gray200); border-radius:11px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.2px} .sv-sec-btn:hover{background:var(--gray100);border-color:var(--navy-lt)} .sv-pdf-btn{background:#fff3f0;color:#9b1c1c;border-color:#fad6cf} .sv-pdf-btn:hover{background:#ffe4db} .sv-holiday-card{background:linear-gradient(160deg,#fff8ed 0%,#fff3d9 100%); border:1.5px solid var(--bronze-bdr);border-radius:18px;padding:32px 22px;text-align:center;margin-bottom:18px} .sv-hol-icon{font-size:56px;margin-bottom:10px;line-height:1} .sv-hol-title{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:26px;font-weight:800;color:#8a4d00;margin-bottom:4px} .sv-hol-sub{font-size:14px;color:#a86417;margin-bottom:14px;font-weight:600} .sv-hol-detail{display:inline-block;background:#fff;border:1px solid var(--bronze-bdr);padding:7px 14px; border-radius:20px;font-size:12px;color:var(--navy);font-weight:600} .sv-back-float{position:sticky;top:4px;z-index:50;display:flex;justify-content:flex-end;padding:6px 10px 0;pointer-events:none} #dashboard-host.simple-mode .sv-back-float{display:none} .sv-back-btn-in-grid{pointer-events:auto;display:inline-flex;align-items:center;gap:7px; background:linear-gradient(135deg,#F58C28 0%,#E0700D 100%);color:#fff; border:2px solid rgba(255,255,255,.85);border-radius:26px; padding:9px 20px;font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:.2px;cursor:pointer; box-shadow:0 5px 16px rgba(224,112,13,.45),inset 0 1px 0 rgba(255,255,255,.25); transition:transform .12s ease,box-shadow .12s ease} .sv-back-btn-in-grid:hover{background:linear-gradient(135deg,#E0700D 0%,#C96208 100%);transform:translateY(-1px); box-shadow:0 7px 20px rgba(224,112,13,.55),inset 0 1px 0 rgba(255,255,255,.25)} .sv-back-btn-in-grid:active{transform:translateY(0) scale(.97)} @media(max-width:480px){ #sv-root{padding:14px 12px 120px} .sv-title{font-size:22px} .sv-card{padding:15px 13px;border-radius:14px} .sv-step{width:50px;height:50px;font-size:24px} .sv-num{height:62px;font-size:34px;max-width:130px} .sv-save-btn{padding:15px;font-size:16px} } /* ── GROUP DROPDOWN + NESTED SUB-CARDS (redesigned keyboard-first UI) ── */ .sv-group{background:#fff;border:2px solid var(--bronze-bdr);border-radius:16px; box-shadow:0 3px 14px rgba(28,41,81,.08);overflow:hidden;margin-bottom:14px} .sv-group[data-sk=s2]{border-color:rgba(15,120,80,.45)} .sv-group-hdr{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer; background:linear-gradient(180deg,#fff8ed 0%,#fff3d9 100%);user-select:none;transition:background .15s} .sv-group[data-sk=s2] .sv-group-hdr{background:linear-gradient(180deg,#f1fbf5 0%,#e1f4ea 100%)} .sv-group-hdr:hover{filter:brightness(0.97)} .sv-group-title{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:18px;font-weight:800;color:var(--navy); flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .sv-group-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .sv-group-chev{font-size:20px;color:var(--navy);transition:transform .2s;line-height:1;flex-shrink:0} .sv-group.open .sv-group-chev{transform:rotate(180deg)} .sv-group-body{display:none;padding:14px 14px 18px;background:#fcfcfd;border-top:1px dashed var(--gray200)} .sv-group.open .sv-group-body{display:block} .sv-badges{display:flex;gap:5px;flex-wrap:wrap} .sv-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:12px;letter-spacing:.2px; display:inline-flex;align-items:center;gap:3px;line-height:1.1} .sv-badge.ok{background:#d1fae5;color:#065f46;border:1px solid #86efac} .sv-badge.warn{background:#fef3c7;color:#8a5a11;border:1px solid #fbbf24} .sv-badge.err{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5} .sv-sub{border:1px solid var(--gray200);border-radius:11px;background:#fff;margin-bottom:10px;overflow:hidden} .sv-sub-hdr{display:flex;align-items:center;gap:8px;padding:11px 13px;cursor:pointer;user-select:none; background:#fafbfd;transition:background .15s} .sv-sub-hdr:hover{background:#f1f4f9} .sv-sub-title{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:14px;font-weight:800;color:var(--navy);flex:1;min-width:0} .sv-sub-chev{font-size:14px;color:var(--gray400);transition:transform .2s} .sv-sub.open .sv-sub-chev{transform:rotate(180deg)} .sv-sub-body{display:none;padding:12px 13px 14px;background:#fff;border-top:1px dashed var(--gray200)} .sv-sub.open .sv-sub-body{display:block} .sv-sub-hint{font-size:11px;color:var(--gray600);margin-bottom:10px;line-height:1.5;background:#f8f9fc; border-left:3px solid var(--navy-lt);padding:6px 9px;border-radius:4px} /* daily sub-card — single-row fields (label + number) */ .sv-field{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap} .sv-field-lbl{flex:1;font-size:13px;font-weight:700;color:var(--navy);min-width:120px} .sv-field-lbl small{display:block;font-size:10.5px;font-weight:500;color:var(--gray600);margin-top:1px} .sv-field-inp{flex-shrink:0;width:130px;height:42px;text-align:center;border:1.5px solid var(--bronze-bdr); border-radius:9px;background:var(--inp-bg);color:var(--navy); font-family:inherit;font-size:16px;font-weight:700;outline:none;padding:0 8px; -moz-appearance:textfield} .sv-field-inp::-webkit-outer-spin-button,.sv-field-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .sv-field-inp:focus{border-color:var(--saffron);background:#fff;box-shadow:0 0 0 3px rgba(245,140,40,.15)} .sv-field-inp.txt{text-align:left;font-size:13px;font-weight:500;width:100%;max-width:280px} /* grouped ingredient rows inside monthly sub-cards */ .sv-ing-grp{margin-bottom:12px} .sv-ing-grp-ttl{font-size:11px;font-weight:800;color:var(--saffron);text-transform:uppercase; letter-spacing:.8px;margin-bottom:6px;padding-bottom:4px;border-bottom:1.5px dashed var(--bronze-bdr); display:flex;align-items:center;gap:6px} .sv-ing-grp-ttl .sv-ing-grp-count{color:var(--gray400);font-weight:600;letter-spacing:.2px;font-size:10.5px} .sv-ing-row{display:grid;grid-template-columns:1fr 110px;gap:8px;align-items:center; padding:6px 0;border-bottom:1px solid #f2f4f8} .sv-ing-row:last-child{border-bottom:none} .sv-ing-name{font-size:12.5px;font-weight:600;color:var(--navy);display:flex;flex-direction:column;min-width:0} .sv-ing-unit{font-size:10px;color:var(--gray400);font-weight:500} .sv-ing-prev{font-size:10px;color:#8a5a11;font-style:italic;margin-top:1px;font-weight:500} .sv-ing-inp{width:100%;height:36px;text-align:center;border:1.3px solid var(--bronze-bdr);border-radius:7px; background:var(--inp-bg);color:var(--navy);font-family:inherit;font-size:14px;font-weight:700;outline:none; padding:0 6px;-moz-appearance:textfield} .sv-ing-inp::-webkit-outer-spin-button,.sv-ing-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .sv-ing-inp:focus{border-color:var(--saffron);background:#fff;box-shadow:0 0 0 2px rgba(245,140,40,.12)} /* action buttons inside monthly sub-cards */ .sv-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .sv-act-btn{background:#f0fdf4;color:#065f46;border:1px solid #86efac;border-radius:9px; padding:8px 13px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer; display:inline-flex;align-items:center;gap:5px} .sv-act-btn:hover{background:#d1fae5} .sv-act-btn.zero{background:#fef3c7;color:#8a5a11;border-color:#fbbf24} .sv-act-btn.zero:hover{background:#fde68a} /* live material-status chip inside group body */ .sv-mat-chip{background:linear-gradient(180deg,#eef2ff 0%,#dbe4fa 100%); border:1.5px solid var(--navy-lt);border-radius:12px;padding:11px 13px;margin:10px 0 4px; font-size:12px;color:var(--navy);line-height:1.7;font-weight:600} .sv-mat-chip .sv-mat-ttl{font-family:'Noto Serif Devanagari',Georgia,serif;font-weight:800;color:var(--navy); font-size:12.5px;margin-bottom:4px;display:flex;align-items:center;gap:5px} .sv-mat-chip .sv-mat-line{display:flex;flex-wrap:wrap;gap:4px 12px} .sv-mat-chip b{color:var(--saffron);font-weight:700} .sv-mat-chip strong{color:var(--emerald);font-weight:800} .sv-group .sv-save-btn{margin-top:6px;padding:14px 16px;font-size:15px} @media(max-width:480px){ .sv-group-title{font-size:16px} .sv-field-inp{width:110px;height:40px;font-size:15px} .sv-field-lbl{min-width:100px;font-size:12.5px} .sv-ing-row{grid-template-columns:1fr 90px} .sv-ing-inp{height:34px;font-size:13px} .sv-sub-title{font-size:13px} } /* ══════════════════════════════════════════════ ADMIN PANEL ══════════════════════════════════════════════ */ .adm-hdr{background:linear-gradient(135deg,var(--navy-deep),#1a1a2e); padding:12px 22px;display:flex;align-items:center;gap:14px;flex-shrink:0} .adm-logo{display:flex;align-items:center;gap:8px} .adm-logo img{height:34px;width:auto;border-radius:50%;background:#fff;padding:2px} .adm-logo-text{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:18px;font-weight:800;color:var(--gold);letter-spacing:2px} .adm-badge{background:var(--danger);color:#fff;font-size:9px;font-weight:700; padding:3px 8px;border-radius:20px;letter-spacing:1px;text-transform:uppercase} .adm-logout{margin-left:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2); color:#fff;border-radius:6px;padding:6px 14px;cursor:pointer;font-family:inherit;font-size:11px} .adm-logout:hover{background:rgba(255,255,255,.2)} .adm-nav{background:#fff;padding:0 22px;display:flex;border-bottom:2px solid var(--gray200);overflow-x:auto;flex-shrink:0} .adm-ni{padding:12px 18px;font-size:13px;font-weight:600;cursor:pointer; border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap; color:var(--gray600);transition:all .2s} .adm-ni.active{color:var(--saffron);border-bottom-color:var(--saffron)} .adm-ni:hover{color:var(--navy)} .adm-body{flex:1;overflow-y:auto;padding:20px;background:var(--gray100)} .adm-sec{display:none} .adm-sec.active{display:block} .adm-card{background:#fff;border-radius:10px;box-shadow:0 1px 8px rgba(0,0,0,.07);margin-bottom:16px;overflow:hidden} .adm-ch{padding:13px 18px;background:var(--gray100);border-bottom:1px solid var(--gray200); display:flex;align-items:center;justify-content:space-between} .adm-ct{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:15px;font-weight:700;color:var(--navy)} .adm-cb{padding:16px 18px} .stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:13px;margin-bottom:16px} .stat-c{background:#fff;border-radius:10px;padding:14px 18px;box-shadow:0 1px 8px rgba(0,0,0,.07);border-left:4px solid} .stat-c:nth-child(1){border-left-color:var(--saffron)} .stat-c:nth-child(2){border-left-color:var(--emerald)} .stat-c:nth-child(3){border-left-color:#7c3aed} .stat-c:nth-child(4){border-left-color:var(--gold)} .stat-n{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:28px;font-weight:800;color:var(--navy)} .stat-l{font-size:10px;color:var(--gray400);text-transform:uppercase;letter-spacing:.5px;margin-top:2px} .ut-wrap{overflow-x:auto} .utbl{width:100%;border-collapse:collapse;font-size:12px} .utbl th{background:var(--navy);color:#fff;padding:9px 11px;text-align:left;white-space:nowrap;font-size:11px;font-weight:600} .utbl td{padding:9px 11px;border-bottom:1px solid var(--gray100);vertical-align:middle} .utbl tr:hover td{background:#fff8f0} .sbadge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px} .sb-active{background:#dcfce7;color:#166534} .sb-trial{background:#fef3c7;color:#92400e} .sb-expired{background:#fee2e2;color:#991b1b} .sb-blocked{background:#f3f4f6;color:#4b5563} .act-btns{display:flex;gap:5px} .sm-btn{padding:4px 10px;border:none;border-radius:5px;font-family:inherit;font-size:10px;font-weight:700;cursor:pointer} .sm-green{background:#dcfce7;color:#166534} .sm-red{background:#fee2e2;color:#991b1b} .sm-amber{background:#fef3c7;color:#92400e} .sm-gray{background:var(--gray200);color:var(--gray600)} .upload-zone{border:3px dashed var(--gray200);border-radius:10px;padding:36px 20px; text-align:center;cursor:pointer;transition:all .2s;background:var(--gray100)} .upload-zone:hover{border-color:var(--saffron);background:#fff8f0} .uz-icon{font-size:36px;margin-bottom:10px} .uz-t{font-size:14px;font-weight:600;color:var(--navy)} .uz-s{font-size:12px;color:var(--gray400);margin-top:4px} .formula-ed{background:#0d1117;border-radius:7px;padding:14px; font-family:'IBM Plex Mono','Courier New',monospace;font-size:12px;color:#e6edf3; min-height:180px;border:1px solid #30363d;width:100%;resize:vertical;outline:none} .formula-ed:focus{border-color:var(--saffron)} /* ── Month Config List ── */ .cfg-list-wrap{display:flex;flex-direction:column;gap:7px} .cfg-item{background:var(--gray100);border-radius:8px;padding:10px 13px; display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--gray200)} .cfg-item.has-cfg{background:#f0fdf4;border-color:#86efac} .cfg-mbadge{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:14px;font-weight:700;color:var(--navy)} .cfg-meta{font-size:10px;color:var(--gray600);margin-top:2px;line-height:1.5} .cfg-del{background:var(--danger);color:#fff;border:none;border-radius:5px; padding:4px 9px;font-size:10px;font-weight:700;cursor:pointer;flex-shrink:0} .cfg-del:hover{opacity:.85} /* ── Preview table ── */ .prev-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:8px} .prev-table th{background:var(--navy);color:#fff;padding:5px 8px;text-align:left;font-size:10px} .prev-table td{padding:4px 8px;border-bottom:1px solid var(--gray100);color:var(--navy)} .prev-table tr:nth-child(even) td{background:var(--gray100)} .prev-section{font-size:11px;font-weight:700;color:var(--saffron); margin:10px 0 5px;text-transform:uppercase;letter-spacing:.5px} .prev-note{background:#fffbeb;border:1px solid #fcd34d;border-radius:6px; padding:7px 11px;font-size:11px;color:#92400e;margin-bottom:8px;line-height:1.6} .xl-status-ok{color:var(--success);font-weight:700} .xl-status-err{color:var(--danger);font-weight:700} /* ── Mobile cfg ── */ @media(max-width:600px){ .cfg-item{flex-wrap:wrap;gap:6px} .cfg-mbadge{font-size:13px} .prev-table{font-size:10px} .prev-table th,.prev-table td{padding:3px 6px} } .adm-search{padding:6px 11px;border:2px solid var(--gray200);border-radius:6px; font-family:inherit;font-size:12px;color:var(--navy);outline:none;max-width:200px} .adm-search:focus{border-color:var(--saffron)} .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .adm-btn{padding:8px 16px;border:none;border-radius:6px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer} .adm-btn-p{background:linear-gradient(135deg,var(--saffron),var(--saffron-lt));color:#fff} .adm-btn-g{background:linear-gradient(135deg,var(--emerald),var(--emerald-lt));color:#fff} .adm-btn-gray{background:var(--gray200);color:var(--gray600)} .adm-btn-red{background:linear-gradient(135deg,#E53E3E,#C53030);color:#fff;border:none} /* ══ UI CONTROL ════════════════════════════════ */ .ui-color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .ui-color-item{background:var(--gray100);border-radius:8px;padding:12px 14px;border:1.5px solid var(--gray200)} .color-pick{width:40px;height:36px;padding:2px;border:2px solid var(--gray200);border-radius:6px;cursor:pointer;flex-shrink:0} .color-hex{font-family:'IBM Plex Mono','Courier New',monospace!important;font-size:12px!important;text-transform:uppercase} .theme-preset{padding:8px 16px;border:none;border-radius:20px;color:#fff;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;opacity:.9;letter-spacing:.3px} .theme-preset:hover{opacity:1;transform:scale(1.03)} .font-slider{width:100%;height:6px;appearance:none;background:var(--gray200);border-radius:3px;outline:none;cursor:pointer;margin-top:6px} .font-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--saffron);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2)} /* ══ FEATURE CONTROL ════════════════════════════ */ .feat-ctrl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px} .feat-ctrl-item{background:var(--gray100);border-radius:9px;padding:13px 16px;border:1.5px solid var(--gray200);display:flex;align-items:flex-start;gap:12px} .feat-ctrl-item.feat-on{background:#f0fdf4;border-color:#86efac} .feat-ctrl-item.feat-off{background:#fef2f2;border-color:#fca5a5} .feat-ctrl-icon{font-size:22px;flex-shrink:0;margin-top:1px} .feat-ctrl-info{flex:1;min-width:0} .feat-ctrl-name{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:2px} .feat-ctrl-desc{font-size:11px;color:var(--gray600);line-height:1.5} .toggle-wrap{flex-shrink:0;display:flex;align-items:center;gap:6px} .toggle-switch{position:relative;display:inline-block;width:44px;height:24px} .toggle-switch input{opacity:0;width:0;height:0} .toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--gray400);border-radius:24px;transition:.3s} .toggle-slider:before{position:absolute;content:'';height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s} .toggle-switch input:checked+.toggle-slider{background:var(--emerald)} .toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px)} .toggle-lbl{font-size:10px;font-weight:700;color:var(--gray600);text-transform:uppercase;letter-spacing:.4px;min-width:28px} /* ══ CONTENT EDITOR ════════════════════════════ */ #content-preview{transition:all .3s} /* ══ RECIPE EDITOR (Admin पाककृती Tab) ════════ */ .recipe-day-card{border:1px solid var(--gray200);border-radius:9px;margin-bottom:8px;overflow:hidden} .rdc-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--gray100);cursor:pointer;gap:10px;transition:background .15s} .rdc-header:hover{background:#EEF2F8} .rdc-day{background:var(--navy);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;flex-shrink:0} .rdc-toggle{font-size:12px;color:var(--gray400);flex-shrink:0;transition:transform .2s} .rdc-toggle.open{transform:rotate(180deg)} .rdc-name-input{border:1.5px dashed var(--inp-bdr)!important;background:var(--inp-bg)!important;font-weight:700!important;color:var(--navy)!important} .rdc-body{padding:0 14px 12px;background:#fff} .recipe-ing-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:11.5px} .recipe-ing-table th{background:var(--navy);color:#fff;padding:5px 8px;text-align:center;font-size:10.5px;font-weight:700} .recipe-ing-table th:first-child{text-align:left} .recipe-ing-table td{padding:3px 6px;border-bottom:1px solid var(--gray100)} .recipe-ing-table tr:last-child td{border-bottom:none} .recipe-ing-table tr:hover td{background:var(--emerald-bg)} .recipe-ing-input{width:82px;padding:3px 6px;border:1.5px solid var(--gray200);border-radius:5px;font-family:inherit;font-size:11.5px;text-align:right;outline:none;background:var(--inp-bg)} .recipe-ing-input:focus{border-color:var(--saffron)} .recipe-info-bar{background:#EAF0FB;border:1px solid #93C5FD;border-radius:7px;padding:9px 13px;font-size:11.5px;color:var(--navy);line-height:1.8;margin-bottom:12px} /* ══ PAYMENT DETAILS ADMIN TAB ═══════════════ */ .pay-qr-preview{width:160px;height:160px;border:3px solid var(--emerald-lt);border-radius:10px; object-fit:contain;background:#fff;display:block;margin:8px 0;cursor:pointer} .pay-qr-placeholder{width:160px;height:160px;border:3px dashed var(--gray200);border-radius:10px; display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px; background:var(--gray100);cursor:pointer;transition:all .2s;margin:8px 0} .pay-qr-placeholder:hover{border-color:var(--saffron);background:#fff8f0} .pay-modal-msg{border-radius:8px;padding:11px 14px;font-size:12px;line-height:1.7;margin-bottom:12px;font-weight:600} .pay-modal-msg.info{background:#EAF5FF;border:1.5px solid #7EC8F6;color:#0055AA} .pay-modal-msg.warn{background:#FFF8E6;border:1.5px solid #FCD34D;color:#92400E} .pay-bank-box{background:var(--gray100);border:1.5px solid var(--gray200);border-radius:9px;padding:12px 14px;margin-bottom:12px} .pay-bank-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px dashed var(--gray200);gap:8px} .pay-bank-row:last-child{border-bottom:none;padding-bottom:0} .pay-bank-key{font-size:11px;color:var(--gray600);flex-shrink:0} .pay-bank-val{font-size:12px;font-weight:700;color:var(--navy);text-align:right;word-break:break-all} .pay-copy-btn{background:none;border:1.5px solid var(--gray200);border-radius:5px; padding:2px 8px;font-size:10px;font-weight:700;color:var(--navy);cursor:pointer; flex-shrink:0;transition:all .15s;font-family:inherit} .pay-copy-btn:hover{border-color:var(--saffron);color:var(--saffron)} .upi-id-row{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:4px} .pay-bank-toggle{background:none;border:1.5px solid var(--gray200);border-radius:7px; padding:8px 14px;font-size:12px;font-weight:700;color:var(--gray600);cursor:pointer; width:100%;text-align:left;font-family:inherit;display:flex;justify-content:space-between; align-items:center;transition:all .15s;margin-bottom:6px} .pay-bank-toggle:hover{border-color:var(--navy);color:var(--navy)} .pay-bank-toggle.open{border-color:var(--navy);color:var(--navy);background:var(--gray100)} /* ── TOAST ──────────────────────────────────── */ #toaster{position:fixed;top:70px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:7px} .tst{background:var(--navy);color:#fff;padding:10px 16px;border-radius:7px;font-size:12px;font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,.25);display:flex;align-items:center;gap:7px;min-width:220px; animation:tsIn .3s ease} .tst.ok{background:var(--success)}.tst.err{background:var(--danger)} @keyframes tsIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}} @keyframes tsOut{from{opacity:1}to{opacity:0;transform:translateX(120%)}} /* ── PDF / PRINT STYLES ─────────────────────── */ .pdf-header{display:none} @media print{ body *{visibility:hidden} #psh-printarea,#psh-printarea *{visibility:visible} #psh-printarea{position:absolute;left:0;top:0;width:100%} @page{size:A3 landscape;margin:8mm} } /* PDF Export Modal Options */ .pdf-opt-btn{width:100%;padding:11px 14px;border:2px solid var(--gray200);border-radius:8px; background:#fff;color:var(--navy);font-family:inherit;font-size:13px;font-weight:700; cursor:pointer;margin-bottom:9px;display:flex;align-items:center;gap:10px;transition:all .2s;text-align:left} .pdf-opt-btn:hover{border-color:var(--saffron);background:#fff8f0;color:var(--saffron)} .pdf-opt-btn.all-btn{background:linear-gradient(135deg,var(--navy),var(--navy-mid));color:#fff;border-color:var(--navy)} .pdf-opt-btn.all-btn:hover{opacity:.9} .pdf-fmt-toggle{display:flex;gap:8px;margin-bottom:14px} .pdf-fmt-btn{flex:1;padding:7px 10px;border:2px solid var(--gray200);border-radius:7px;background:#fff;color:var(--gray600);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .15s} .pdf-fmt-btn:hover{border-color:var(--saffron);background:#fff8f0;color:var(--saffron)} .pdf-fmt-btn.active{border-color:var(--navy);background:var(--navy);color:#fff} /* Style pill accents — Modern Minimal goes green when active, Heritage goes pure black */ #style-btn-modern.active{border-color:#2f7d4f;background:#2f7d4f;color:#fff} #style-btn-heritage.active{border-color:#111;background:#111;color:#fff} /* Disabled state for format-dependent PDF buttons (s1, s2, all) — must pick a style pill first */ .pdf-opt-btn:disabled,.pdf-opt-btn[disabled]{opacity:.42;cursor:not-allowed;pointer-events:none;filter:grayscale(.55)} .pdf-opt-btn:disabled:hover,.pdf-opt-btn[disabled]:hover{border-color:var(--gray200);background:#fff;color:var(--navy)} .pdf-opt-btn.all-btn:disabled,.pdf-opt-btn.all-btn[disabled]{background:#9aa3b2;border-color:#9aa3b2;color:#fff} .pdf-fmt-btn .fmt-label{font-size:13px;font-weight:800} .pdf-fmt-btn .fmt-sub{font-size:9px;opacity:.75;font-weight:400} .pdf-opt-icon{font-size:20px;flex-shrink:0} .pdf-opt-text{display:flex;flex-direction:column;gap:2px} .pdf-opt-main{font-size:13px;font-weight:700} .pdf-opt-sub{font-size:10px;font-weight:400;opacity:.7} /* ══════════════════════════════════════════════ MOBILE-FIRST RESPONSIVE — COMPREHENSIVE ══════════════════════════════════════════════ */ /* ── Touch target helpers ── */ button,select,input,a{-webkit-tap-highlight-color:transparent} /* ── LANDING — mobile ── */ @media(max-width:600px){ #landing{padding:24px 14px} .land-card{padding:28px 20px;border-radius:16px} .land-emblem{width:96px;height:96px;margin-bottom:12px} .land-title{font-size:26px;letter-spacing:2px} .land-sub{font-size:10px;letter-spacing:3px} .land-desc{font-size:12px;margin:16px 0} .land-price{font-size:12px;padding:6px 16px} .land-btns{flex-direction:column;gap:9px;width:100%} .lbtn{width:100%;justify-content:center;padding:13px 20px;font-size:14px;border-radius:10px} .land-features{gap:10px;margin-top:18px;padding-top:16px} .feat{font-size:10px} } /* ── MODALS — mobile ── */ @media(max-width:600px){ .overlay{padding:0;align-items:flex-end} .modal{border-radius:20px 20px 0 0;max-height:92vh;max-width:100%!important;width:100%} .mhdr{padding:18px 18px 0} .mtitle{font-size:17px} .mbody{padding:16px 18px 30px} .frow{grid-template-columns:1fr} .fi{font-size:16px!important;padding:11px 13px} /* prevent iOS zoom */ .fbtn{padding:14px;font-size:15px;border-radius:10px} .fsec{font-size:12px;margin:14px 0 8px} .fg{margin-bottom:11px} .fl{font-size:10px} .trial-note{font-size:11px;padding:8px 12px} .upi-id{font-size:18px} } /* ── APP HEADER — mobile ── */ @media(max-width:600px){ #app-header{height:auto;padding:8px 12px;flex-wrap:wrap;gap:8px} .ah-logo img{height:30px} .ah-logo-text{font-size:16px;letter-spacing:1.5px} .ah-school{display:none} .ah-right{gap:5px;flex-wrap:wrap} .ah-ibtn{padding:7px 10px;font-size:10px;gap:4px;border-radius:8px} .ah-ibtn svg{width:13px;height:13px} .ah-ibtn span,.ah-ibtn{/* keep text visible */} .ah-pbtn{padding:7px 11px;font-size:10px;gap:4px;border-radius:8px} } /* ── MONTH ROW — mobile ── */ @media(max-width:600px){ #month-row{padding:8px 12px;gap:8px} .mr-lbl{font-size:10px} .mr-sel{padding:6px 8px;font-size:12px;border-radius:8px;flex:1;min-width:0} .mr-badge{font-size:9px;padding:3px 9px;border-radius:16px} } /* ── PROFILE SIDEBAR — mobile ── */ @media(max-width:600px){ .sidebar{width:100%;right:-100%;border-radius:0} .sidebar.open{right:0} .sb-hdr{padding:16px 16px 14px} .sb-htitle{font-size:15px} .sb-avatar{width:46px;height:46px;font-size:18px} .sb-uname{font-size:13px} .sb-body{padding:14px} .sub-days{font-size:22px} .sb-renew,.sb-logout{padding:12px;font-size:14px;border-radius:10px} .ikey,.ival{font-size:11px} .txn-item{padding:8px 10px} .txn-desc{font-size:11px} .txn-amt{font-size:13px} } /* ── FOOTER — mobile ── */ @media(max-width:600px){ #app-footer{padding:8px 12px;gap:6px} .foot-left{gap:6px} .foot-right{gap:8px} .wa-btn{padding:8px 13px;font-size:11px;border-radius:8px} .foot-copy{font-size:9px} } /* ── ADMIN PANEL — mobile ── */ @media(max-width:600px){ .adm-hdr{padding:10px 14px;gap:10px} .adm-logo img{height:28px} .adm-logo-text{font-size:15px} .adm-nav{padding:0 10px} .adm-ni{padding:10px 13px;font-size:12px} .adm-body{padding:12px} .stats-grid{grid-template-columns:1fr 1fr;gap:9px} .stat-n{font-size:22px} .stat-l{font-size:9px} .stat-c{padding:11px 13px} .adm-ch{padding:11px 14px} .adm-ct{font-size:13px} .adm-cb{padding:13px 14px} .row2{grid-template-columns:1fr} .adm-btn{padding:10px 14px;font-size:12px;border-radius:8px} .adm-search{max-width:140px;font-size:12px} /* User table on mobile — make it card-based */ .ut-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .utbl{min-width:700px} .utbl th,.utbl td{padding:7px 8px;font-size:11px} .act-btns{flex-wrap:wrap;gap:4px} .sm-btn{padding:5px 8px;font-size:9px;border-radius:5px} } /* ── DASHBOARD TABS — mobile ── */ @media(max-width:600px){ #dashboard-host .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} #dashboard-host .tabs::-webkit-scrollbar{display:none} #dashboard-host .tabs button{padding:9px 14px;font-size:11px;flex-shrink:0} #dashboard-host .actbar{padding:5px 10px;gap:5px 10px} #dashboard-host .abtns{margin-left:0;width:100%;justify-content:flex-start;gap:5px;flex-wrap:wrap} #dashboard-host .btn{padding:6px 11px;font-size:10.5px;border-radius:6px} #dashboard-host .warn{font-size:10px} #dashboard-host .leg{font-size:9px;gap:4px} #dashboard-host .legbox{width:11px;height:11px} #dashboard-host .twrap{padding:6px 6px 18px} #dashboard-host table{font-size:10px} #dashboard-host th,#dashboard-host td{padding:2.5px 3px;font-size:9.5px} #dashboard-host .hdr-title{font-size:13px} #dashboard-host .hdr-sub{font-size:10px} #dashboard-host .sfooter{padding:6px 10px;gap:8px;font-size:10px} #dashboard-host .hdr-top{padding:8px 12px 6px;flex-wrap:wrap;gap:5px} #dashboard-host .sbar{padding:5px 12px;gap:5px 10px} #dashboard-host .sbar input{min-width:120px;font-size:11px} #dashboard-host .calc-hint{font-size:10px;padding:4px 10px} #dashboard-host .stitle,#dashboard-host .stitle2{font-size:11px;padding:5px 10px} } /* ── PDF EXPORT MODAL — mobile ── */ @media(max-width:600px){ .pdf-opt-btn{padding:10px 12px;font-size:12px;margin-bottom:7px;border-radius:10px} .pdf-opt-icon{font-size:17px} .pdf-opt-main{font-size:12px} .pdf-opt-sub{font-size:9px} } /* ── TOAST — mobile ── */ @media(max-width:600px){ #toaster{top:auto;bottom:80px;right:12px;left:12px} .tst{min-width:0;width:100%;font-size:12px;padding:10px 14px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.3)} } /* ── GENERAL MOBILE SMOOTHNESS ── */ @media(max-width:600px){ html{-webkit-text-size-adjust:100%} body{overflow-x:hidden} /* Bigger tap zones */ .ah-ibtn,.ah-pbtn,.lbtn,.fbtn,.adm-btn,.sm-btn,.wa-btn{min-height:38px} /* Smooth scroll */ #dashboard-host,.ut-wrap,.modal,.sb-body{-webkit-overflow-scrolling:touch} /* Prevent pinch issues on form inputs */ select{font-size:16px!important} } /* ── ULTRA SMALL: hide button text, show icon only ── */ @media(max-width:400px){ .btn-label{display:none} .ah-ibtn{padding:8px 9px} .ah-pbtn{padding:8px 9px} .ah-logo img{height:26px} .ah-logo-text{font-size:14px;letter-spacing:1px} } /* ══════════════════════════════════════════════ ABHIPRAY DYA — FEEDBACK FEATURE ══════════════════════════════════════════════ */ .abhi-btn{ background:linear-gradient(135deg,#4A3FA0,#6C63FF);color:#fff;border:none;border-radius:6px; padding:7px 14px;display:flex;align-items:center;gap:6px; font-family:inherit;font-size:12px;font-weight:700;cursor:pointer; } .abhi-btn:hover{opacity:.9;transform:translateY(-1px)} .abhi-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px} .abhi-type-btn{ display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 10px; border:2px solid var(--gray200);border-radius:10px;cursor:pointer;background:#fff; font-family:inherit;font-size:12px;font-weight:600;color:var(--navy);transition:all .2s;text-align:center; } .abhi-type-btn:hover{border-color:#6C63FF;background:#f3f2ff} .abhi-type-btn.selected{border-color:#6C63FF;background:#f3f2ff;color:#4A3FA0} .abhi-type-icon{font-size:22px} /* Admin feedback tab */ .fb-card{background:#fff;border-radius:10px;border:1.5px solid var(--gray200);margin-bottom:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06)} .fb-card-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--gray100);gap:10px} .fb-card-meta{font-size:10px;color:var(--gray400);margin-top:3px} .fb-card-type{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700} .fb-type-suggestion{background:#EDE9FE;color:#5B21B6} .fb-type-bug{background:#FEE2E2;color:#991B1B} .fb-type-feature{background:#DCFCE7;color:#166534} .fb-type-office{background:#FEF3C7;color:#92400E} .fb-card-body{padding:12px 16px;font-size:12.5px;color:var(--navy);line-height:1.7} .fb-card-reply{background:#EEF2F8;border-top:1px solid var(--gray200);padding:12px 16px} .fb-reply-box{width:100%;padding:8px 10px;border:2px solid var(--gray200);border-radius:7px;font-family:inherit;font-size:12px;color:var(--navy);outline:none;resize:vertical;min-height:60px;transition:border .2s} .fb-reply-box:focus{border-color:#6C63FF} .fb-status-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;flex-shrink:0} .fb-status-pending{background:#FEF3C7;color:#92400E} .fb-status-resolved{background:#DCFCE7;color:#166534} .adm-fb-filters{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--gray200);align-items:center} .adm-fb-filters select{padding:6px 10px;border:2px solid var(--gray200);border-radius:7px;font-family:inherit;font-size:12px;color:var(--navy);outline:none} .adm-fb-filters select:focus{border-color:#6C63FF} .fb-empty{text-align:center;padding:40px 20px;color:var(--gray400);font-size:13px} @media(max-width:600px){ .abhi-type-grid{grid-template-columns:1fr 1fr;gap:8px} .abhi-type-btn{padding:10px 8px;font-size:11px} .abhi-type-icon{font-size:18px} .abhi-btn{padding:8px 13px;font-size:11px;border-radius:8px} } /* Sidebar feedback cards */ .sb-fb-item{border-radius:8px;border:1.5px solid var(--gray200);padding:10px 12px;margin-bottom:9px;background:#fafafa} .sb-fb-item.has-reply{border-color:#6C63FF;background:#f3f2ff} .sb-fb-item.resolved{border-color:#86efac;background:#f0fdf4} .sb-fb-type{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;padding:1px 7px;border-radius:20px;margin-bottom:5px} .sb-fb-msg{font-size:11.5px;color:var(--navy);line-height:1.6;margin-bottom:6px} .sb-fb-date{font-size:9.5px;color:var(--gray400)} .sb-fb-reply-box{background:#fff;border:1px solid #86efac;border-radius:6px;padding:8px 10px;margin-top:7px;font-size:11px;color:#166534;line-height:1.6} .sb-fb-reply-label{font-size:9px;font-weight:700;color:#166534;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px} /* Admin accordion school cards */ .fb-school-card{background:#fff;border-radius:10px;border:1.5px solid var(--gray200);margin-bottom:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06)} .fb-school-hdr{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;cursor:pointer;user-select:none;transition:background .15s;gap:10px} .fb-school-hdr:hover{background:#f8f6ff} .fb-school-hdr.open{background:#f3f2ff;border-bottom:1px solid #c4b5fd} .fb-school-name{font-weight:700;font-size:13px;color:var(--navy)} .fb-school-meta{font-size:10px;color:var(--gray400);margin-top:2px} .fb-school-counts{display:flex;gap:5px;align-items:center;flex-shrink:0;flex-wrap:wrap} .fb-school-arrow{font-size:11px;color:var(--gray400);transition:transform .2s;flex-shrink:0} .fb-school-hdr.open .fb-school-arrow{transform:rotate(180deg)} .fb-school-body{display:none;border-top:1px solid var(--gray100);padding:12px 14px;background:#fafafa} .fb-school-body.open{display:block} /* User modal reply cards */ .abhi-reply-card{border-radius:9px;border:1.5px solid var(--gray200);margin-bottom:12px;overflow:hidden;background:#fff} .abhi-reply-card.has-reply{border-color:#6C63FF} .abhi-reply-card.resolved{border-color:#86efac} .abhi-reply-card-hdr{padding:10px 13px;border-bottom:1px solid var(--gray100);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .abhi-reply-card-msg{padding:10px 13px;font-size:12px;color:var(--navy);line-height:1.7} .abhi-reply-card-admin{padding:9px 13px;background:#f0fdf4;border-top:1px solid #bbf7d0;font-size:11.5px;color:#166534;line-height:1.7} .abhi-reply-card-pending{padding:8px 13px;background:#fffbeb;border-top:1px solid #fde68a;font-size:11px;color:#92400e;font-style:italic} /* ══════════════════════════════════════════════ MODULE SELECTOR PAGE ══════════════════════════════════════════════ */ #module-select{ min-height:100vh;display:none;flex-direction:column;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,var(--navy-mid) 100%); padding:40px 20px;position:relative;overflow:hidden; } #module-select.active{display:flex} #module-select::before{content:'';position:absolute;top:-120px;left:-120px;width:500px;height:500px; background:radial-gradient(circle,rgba(205,127,50,.12) 0%,transparent 70%);border-radius:50%;pointer-events:none} #module-select::after{content:'';position:absolute;bottom:-100px;right:-100px;width:400px;height:400px; background:radial-gradient(circle,rgba(0,135,90,.1) 0%,transparent 70%);border-radius:50%;pointer-events:none} .ms-header{text-align:center;margin-bottom:40px;position:relative;z-index:2} .ms-logo{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:32px;font-weight:800;letter-spacing:3px; background:linear-gradient(135deg,var(--saffron-lt),var(--gold)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .ms-subtitle{color:rgba(255,255,255,.55);font-size:11px;letter-spacing:4px;text-transform:uppercase;margin-top:4px} .ms-school-name{color:rgba(255,255,255,.8);font-size:14px;font-weight:600;margin-top:12px} .ms-welcome{color:rgba(255,255,255,.5);font-size:12px;margin-top:4px} .ms-cards{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;max-width:900px;width:100%;position:relative;z-index:2} .ms-card{ background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12); border-radius:20px;padding:36px 32px;flex:1;min-width:280px;max-width:380px; cursor:pointer;transition:all .3s;text-align:center;backdrop-filter:blur(10px); position:relative;overflow:hidden; } .ms-card:hover{background:rgba(255,255,255,.11);border-color:rgba(205,127,50,.5);transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.4)} .ms-card-icon{font-size:52px;margin-bottom:16px;display:block} .ms-card-icon-img{width:78px;height:78px;object-fit:contain;margin:0 auto 16px;display:block;border-radius:14px;background:#fff;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.18)} .ms-card-title{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:17px;font-weight:800;color:#fff;margin-bottom:8px;line-height:1.4} .ms-card-sub{color:rgba(255,255,255,.5);font-size:11px;line-height:1.7} .ms-card-badge{ display:inline-block;margin-top:20px;padding:7px 22px;border-radius:20px; font-size:12px;font-weight:700; } .ms-card-badge.saffron{background:linear-gradient(135deg,var(--saffron),var(--saffron-lt));color:#fff} .ms-card-badge.emerald{background:linear-gradient(135deg,var(--emerald),var(--emerald-lt));color:#fff} .ms-logout-link{margin-top:28px;color:rgba(255,255,255,.35);font-size:11px;cursor:pointer;position:relative;z-index:2} .ms-logout-link:hover{color:rgba(255,255,255,.65)} @media(max-width:600px){ .ms-cards{gap:16px} .ms-card{padding:28px 22px;min-width:240px} .ms-card-icon{font-size:42px} .ms-card-icon-img{width:64px;height:64px;padding:5px} .ms-card-title{font-size:15px} .ms-logo{font-size:24px} } /* ══ FEATURE ADDITIONS ═══════════════════════ */ /* 1. Subscription expiry warning banner */ #expiry-warning-banner{ display:none;background:linear-gradient(90deg,#7c2d12,#b45309); color:#fff;padding:9px 16px;font-size:12px;font-weight:600; align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0; border-bottom:2px solid #fbbf24; } #expiry-warning-banner.show{display:flex} #expiry-warning-banner .ewb-msg{flex:1;min-width:180px} #expiry-warning-banner .ewb-renew{background:#fbbf24;color:#1c1917;border:none; border-radius:5px;padding:4px 12px;font-family:inherit;font-size:11px; font-weight:700;cursor:pointer;white-space:nowrap} #expiry-warning-banner .ewb-renew:hover{background:#fde68a} #expiry-warning-banner .ewb-close{background:none;border:none;color:rgba(255,255,255,.6); font-size:18px;cursor:pointer;line-height:1;padding:0 2px;margin-left:auto} #expiry-warning-banner .ewb-close:hover{color:#fff} /* 4. Broadcast message banner */ #broadcast-banner{ display:none;background:linear-gradient(90deg,#1e3a5f,#1C2951); color:#fff;padding:9px 16px;font-size:12px; align-items:flex-start;gap:10px;flex-wrap:wrap;flex-shrink:0; border-bottom:2px solid var(--saffron); } #broadcast-banner.show{display:flex} .bcb-icon{font-size:16px;flex-shrink:0;margin-top:1px} .bcb-msg{flex:1;line-height:1.6;min-width:180px} .bcb-close{background:none;border:none;color:rgba(255,255,255,.55); font-size:18px;cursor:pointer;line-height:1;padding:0;margin-left:auto;flex-shrink:0} .bcb-close:hover{color:#fff} /* 6. Offline indicator banner */ #offline-banner{ position:fixed;bottom:0;left:0;right:0;z-index:9000; background:linear-gradient(90deg,#1f2937,#374151);color:#fff; padding:8px 16px;font-size:12px;font-weight:600; display:none;align-items:center;justify-content:center;gap:10px; border-top:2px solid #6b7280;box-shadow:0 -4px 20px rgba(0,0,0,.4); } #offline-banner.show{display:flex} #offline-banner .ob-dot{width:8px;height:8px;border-radius:50%; background:#ef4444;flex-shrink:0;animation:obPulse 1.4s infinite} @keyframes obPulse{0%,100%{opacity:1}50%{opacity:.35}} #offline-banner .ob-msg{flex:1;text-align:center} /* 3. Undo save toast button */ .undo-toast-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5); color:#fff;border-radius:4px;padding:3px 10px;font-family:inherit;font-size:11px; cursor:pointer;margin-left:8px;font-weight:700} .undo-toast-btn:hover{background:rgba(255,255,255,.35)} /* 7. Audit log tab */ #t-audit .audit-row{display:flex;align-items:flex-start;gap:12px; padding:9px 14px;border-bottom:1px solid var(--gray100);font-size:11.5px} #t-audit .audit-row:last-child{border-bottom:none} #t-audit .audit-row:hover{background:#fafafa} #t-audit .audit-time{color:var(--gray400);font-size:10.5px;white-space:nowrap;flex-shrink:0;min-width:110px} #t-audit .audit-who{font-weight:700;color:var(--navy);flex-shrink:0;min-width:100px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px} #t-audit .audit-action{color:var(--gray600);flex:1} #t-audit .audit-filters{display:flex;gap:8px;flex-wrap:wrap; padding:10px 14px;border-bottom:1px solid var(--gray200);align-items:center} #t-audit .audit-filters select{padding:5px 9px;border:1.5px solid var(--gray200); border-radius:6px;font-family:inherit;font-size:11.5px;color:var(--navy);outline:none} #t-audit .audit-filters select:focus{border-color:var(--saffron)} .audit-empty{text-align:center;color:var(--gray400);padding:30px;font-size:13px} /* Admin broadcast card inputs */ #adm-broadcast-text{width:100%;padding:9px 12px;border:2px solid var(--gray200); border-radius:7px;font-family:inherit;font-size:13px;color:var(--navy); outline:none;transition:border .2s;resize:vertical;min-height:68px} #adm-broadcast-text:focus{border-color:var(--saffron)} /* Excel calendar preview */ .xl-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px} .xl-cal-hdr{text-align:center;font-size:9px;font-weight:700;color:var(--gray600); padding:3px 0;text-transform:uppercase;letter-spacing:.3px} .xl-cal-day{border-radius:5px;padding:4px 3px;text-align:center;font-size:10px; font-weight:600;min-height:28px;display:flex;align-items:center;justify-content:center} .xl-cal-day.cd-empty{background:var(--gray100);color:var(--gray400)} .xl-cal-day.cd-work{background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd} .xl-cal-day.cd-holiday{background:#fef3c7;color:#92400e;border:1px solid #fcd34d} .xl-cal-day.cd-sun{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5} .xl-cal-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:10.5px} .xl-cal-legend span{display:inline-flex;align-items:center;gap:5px} .xl-cal-legend .lsq{width:12px;height:12px;border-radius:3px;flex-shrink:0} /* ═══════════════════════════════════════════════════════════════════ MOBILE RESPONSIVE OVERRIDES — appended 2026-04-20 ------------------------------------------------------------------- Mobile-first fixes (Poshantara user app). CSS-ONLY. No HTML, no JS, no selector renames. Dashboard engine (#dashboard-host) is explicitly NOT altered — its existing rules keep their specificity and remain untouched. ═══════════════════════════════════════════════════════════════════ */ /* ---- Universal: prevent iOS Safari auto-zoom on focus (applies everywhere except inside #dashboard-host) ---- */ @media (max-width:767px){ body :not(#dashboard-host) > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body :not(#dashboard-host) > select, body :not(#dashboard-host) > textarea, body input.fi, body select.fi, body textarea.fi, body input.mr-sel, body select.mr-sel{ font-size:16px!important; } } /* ---- Phones & small tablets ---- */ @media (max-width:767px){ /* Base readability */ body{font-size:14px;line-height:1.5} /* Landing page */ #landing{padding:28px 16px} .land-card{padding:30px 22px;border-radius:16px} .land-emblem{width:96px;height:96px;margin-bottom:14px} .land-title{font-size:30px;letter-spacing:2px} .land-sub{font-size:10.5px;letter-spacing:3px} .land-desc{font-size:13px;line-height:1.7;margin:18px 0;padding-top:18px} .land-price{font-size:13px;padding:8px 18px} .land-btns{flex-direction:column;gap:10px;align-items:stretch} .lbtn{width:100%;justify-content:center;padding:14px 22px;font-size:14px;min-height:48px} .lbtn-gray{padding:12px 18px;font-size:12px;min-height:44px} .land-features{gap:10px 14px;margin-top:20px;padding-top:18px} .feat{font-size:11.5px} /* Modals — slide from bottom, full width, sticky header */ .overlay{padding:0;align-items:flex-end} .modal{border-radius:16px 16px 0 0;max-width:100%!important;width:100%; max-height:95vh;box-shadow:0 -8px 30px rgba(0,0,0,.35)} .mhdr{padding:16px 18px 8px;position:sticky;top:0;background:#fff;z-index:3; border-bottom:1px solid var(--gray100)} .mbody{padding:14px 18px 26px} .mtitle{font-size:18px} .mclose{width:38px;height:38px;font-size:24px} /* Forms: single column, touch-friendly inputs */ .frow{grid-template-columns:1fr;gap:8px} .fg{margin-bottom:14px} .fl{font-size:12px;margin-bottom:6px;letter-spacing:.4px} .fi{padding:12px 14px;border-radius:8px;min-height:46px} .fbtn{padding:14px;font-size:15px;min-height:50px;border-radius:10px} .fsec{font-size:14px;margin:18px 0 10px} .trial-note{font-size:12.5px;padding:10px 14px} /* UPI payment box */ .upi-box{padding:16px} .upi-id{font-size:19px;letter-spacing:.5px;word-break:break-all} .upi-amt,.upi-lbl{font-size:12.5px} .upi-inst{font-size:11.5px;line-height:1.6} /* App header: compact, grows when buttons wrap (prevents overlap with month row) */ #app-header{height:auto!important;min-height:54px;padding:6px 10px; flex-wrap:wrap;row-gap:6px;align-items:center} .ah-logo{gap:7px;flex-shrink:0} .ah-logo img{height:30px} .ah-logo-text{font-size:15px;letter-spacing:1.2px} .ah-school{margin-left:8px;padding-left:8px;min-width:0;flex:1 1 auto} .ah-sname{font-size:11px;max-width:100%} .ah-udise{font-size:9.5px} .ah-spacer{flex:0 0 0!important} .ah-right{gap:5px;flex-wrap:wrap;justify-content:flex-end;flex:1 1 auto;min-width:0} .ah-ibtn,.ah-pbtn{padding:7px 9px;font-size:10.5px;min-height:34px;gap:4px;border-radius:7px} .ah-ibtn svg{width:13px;height:13px} .ah-dist-badge{font-size:9.5px;padding:3px 8px;flex-shrink:0} .dist-status-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} /* Month row */ #month-row{padding:9px 12px;gap:10px} .mr-lbl{font-size:11px} .mr-sel{padding:9px 10px;min-height:42px} /* Sidebar — full-screen drawer on phones */ .sidebar{width:92vw;max-width:420px;right:-100vw} .sidebar.open{right:0} .sb-hdr{padding:18px 16px 14px} .sb-htitle{font-size:16px} .sb-close{width:38px;height:38px;font-size:26px;display:flex;align-items:center;justify-content:center} .sb-body{padding:14px} .ikey,.ival{font-size:13px} .sub-days{font-size:24px} .txn-amt{font-size:13px} .txn-desc{font-size:12px} /* Toast / alerts — bottom full-width on phones */ #toaster{top:auto!important;bottom:16px!important;left:12px!important;right:12px!important; flex-direction:column-reverse} .tst{min-width:0;width:100%;font-size:13px;padding:12px 14px; border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.35)} /* Footer */ #app-footer{padding:10px 12px;gap:8px} .wa-btn{padding:11px 15px;font-size:13px;min-height:42px} .foot-copy{font-size:9.5px} /* Offline banner */ #offline-banner{font-size:12.5px;line-height:1.5;padding:8px 12px} /* District filter buttons — comfortable tap size */ .dist-fbtn{padding:7px 14px;font-size:11.5px;min-height:38px} /* Scroll smoothness on tappable scroll zones */ .modal,.sb-body,.overlay{-webkit-overflow-scrolling:touch} /* Minimum touch targets — OUTSIDE the dashboard engine */ body :not(#dashboard-host) > button, body :not(#dashboard-host) .lbtn, body :not(#dashboard-host) .fbtn, body :not(#dashboard-host) .ah-ibtn, body :not(#dashboard-host) .ah-pbtn, body :not(#dashboard-host) .wa-btn{min-height:40px} } /* ---- Very small phones (≤400px wide) ---- */ @media (max-width:440px){ body{font-size:13.5px} .land-title{font-size:26px;letter-spacing:1.5px} .land-emblem{width:84px;height:84px} .land-card{padding:26px 18px} #app-header{padding:5px 8px} .ah-school{display:none} .ah-logo-text{font-size:14px;letter-spacing:1px} .ah-logo img{height:28px} .ah-ibtn,.ah-pbtn{padding:6px 8px;font-size:10px;min-height:32px} .ah-ibtn svg{width:12px;height:12px} .ah-dist-badge{font-size:9px;padding:2px 7px} .mtitle{font-size:17px} .mhdr{padding:14px 16px 6px} .mbody{padding:12px 16px 22px} .sidebar{width:100vw;max-width:none} .dist-status-grid{grid-template-columns:1fr} } /* ---- Tablet transition (768-1023px) ---- */ @media (min-width:768px) and (max-width:1023px){ body{font-size:13px} .ah-sname{max-width:180px} .frow{gap:12px} } /* End mobile responsive overrides */ /* ══════════════════════════════════════════════ SIMPLIFIED VIEW — FONT SIZE ADJUSTER Scoped exclusively to #sv-root. Does NOT affect the engine dashboard, header, footer, modals, or any other part of the site. ══════════════════════════════════════════════ */ /* ── Control bar (अ / अ+ / अ++) ── */ .sv-fs-bar { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; } .sv-fs-btn { min-width: 40px; height: 36px; border-radius: 20px; border: 1.5px solid var(--bronze-bdr); background: #fff; color: var(--navy); font-family: 'Noto Serif Devanagari', Georgia, serif; font-weight: 800; cursor: pointer; padding: 0 12px; font-size: 13px; transition: all .15s; box-shadow: 0 1px 4px rgba(0,0,0,.08); -webkit-tap-highlight-color: transparent; } .sv-fs-btn.sv-fs-on { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 2px 8px rgba(28,41,81,.3); } .sv-fs-btn:active { transform: scale(.88); } /* ── LARGE (+22%) — #sv-root.dfs-l ── */ #sv-root.dfs-l .sv-title { font-size: 32px; } #sv-root.dfs-l .sv-date { font-size: 16px; } #sv-root.dfs-l .sv-card-label { font-size: 21px; } #sv-root.dfs-l .sv-pat-chip b { font-size: 16px; } #sv-root.dfs-l .sv-hint { font-size: 14px; } #sv-root.dfs-l .sv-hist-lbl { font-size: 13px; } #sv-root.dfs-l .sv-hist-chip { font-size: 13px; } #sv-root.dfs-l .sv-step { font-size: 34px; width: 66px; height: 66px; border-radius: 16px; } #sv-root.dfs-l .sv-num { font-size: 50px; height: 84px; } #sv-root.dfs-l .sv-save-btn { font-size: 17px; padding: 19px 18px; } #sv-root.dfs-l .sv-group-title { font-size: 22px; } #sv-root.dfs-l .sv-group-chev { font-size: 24px; } #sv-root.dfs-l .sv-badge { font-size: 13px; padding: 4px 11px; } #sv-root.dfs-l .sv-sub-title { font-size: 17px; } #sv-root.dfs-l .sv-sub-chev { font-size: 17px; } #sv-root.dfs-l .sv-sub-hint { font-size: 13px; } #sv-root.dfs-l .sv-field-lbl { font-size: 16px; } #sv-root.dfs-l .sv-field-lbl small { font-size: 13px; } #sv-root.dfs-l .sv-field-inp { font-size: 19px; height: 50px; width: 150px; } #sv-root.dfs-l .sv-field-inp.txt { font-size: 16px; } #sv-root.dfs-l .sv-ing-grp-ttl { font-size: 13.5px; } #sv-root.dfs-l .sv-ing-name { font-size: 15px; } #sv-root.dfs-l .sv-ing-unit { font-size: 12px; } #sv-root.dfs-l .sv-ing-prev { font-size: 12px; } #sv-root.dfs-l .sv-ing-inp { font-size: 17px; height: 42px; } #sv-root.dfs-l .sv-group .sv-save-btn { font-size: 18px; } #sv-root.dfs-l .sv-hol-title { font-size: 32px; } #sv-root.dfs-l .sv-hol-sub { font-size: 17px; } #sv-root.dfs-l .sv-sec-btn { font-size: 16px; padding: 14px; } /* ── EXTRA LARGE (+44%) — #sv-root.dfs-xl ── */ #sv-root.dfs-xl .sv-title { font-size: 38px; } #sv-root.dfs-xl .sv-date { font-size: 19px; } #sv-root.dfs-xl .sv-card-label { font-size: 25px; } #sv-root.dfs-xl .sv-pat-chip b { font-size: 19px; } #sv-root.dfs-xl .sv-hint { font-size: 16px; } #sv-root.dfs-xl .sv-hist-lbl { font-size: 15px; } #sv-root.dfs-xl .sv-hist-chip { font-size: 15px; } #sv-root.dfs-xl .sv-step { font-size: 40px; width: 76px; height: 76px; border-radius: 18px; } #sv-root.dfs-xl .sv-num { font-size: 58px; height: 96px; max-width: 180px; } #sv-root.dfs-xl .sv-save-btn { font-size: 20px; padding: 21px 18px; } #sv-root.dfs-xl .sv-group-title { font-size: 26px; } #sv-root.dfs-xl .sv-group-chev { font-size: 28px; } #sv-root.dfs-xl .sv-badge { font-size: 15px; padding: 5px 13px; } #sv-root.dfs-xl .sv-sub-title { font-size: 20px; } #sv-root.dfs-xl .sv-sub-chev { font-size: 20px; } #sv-root.dfs-xl .sv-sub-hint { font-size: 15px; } #sv-root.dfs-xl .sv-field-lbl { font-size: 19px; } #sv-root.dfs-xl .sv-field-lbl small { font-size: 15px; } #sv-root.dfs-xl .sv-field-inp { font-size: 22px; height: 58px; width: 170px; } #sv-root.dfs-xl .sv-field-inp.txt { font-size: 19px; } #sv-root.dfs-xl .sv-ing-grp-ttl { font-size: 16px; } #sv-root.dfs-xl .sv-ing-name { font-size: 18px; } #sv-root.dfs-xl .sv-ing-unit { font-size: 14px; } #sv-root.dfs-xl .sv-ing-prev { font-size: 14px; } #sv-root.dfs-xl .sv-ing-inp { font-size: 20px; height: 48px; } #sv-root.dfs-xl .sv-group .sv-save-btn { font-size: 21px; } #sv-root.dfs-xl .sv-hol-title { font-size: 38px; } #sv-root.dfs-xl .sv-hol-sub { font-size: 20px; } #sv-root.dfs-xl .sv-sec-btn { font-size: 19px; padding: 16px; } /* ── Backfill (मागील दिवसाची नोंद): tappable date, banner, day picker ── */ .sv-date-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px dashed #B9C4D8;border-radius:9px;padding:7px 14px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--gray600);font-weight:600;line-height:1.3} .sv-date-btn:hover{border-color:var(--navy);color:var(--navy)} .sv-date-btn:active{transform:scale(.97)} .sv-date-cal{font-size:15px;line-height:1} .sv-bf-banner{max-width:560px;margin:0 auto 16px;background:#FFF8E6;border:1.5px solid #E8B339;border-radius:11px;padding:12px 14px;text-align:center} .sv-bf-txt{font-size:13.5px;color:#7A5200;font-weight:600;line-height:1.55} .sv-bf-txt b{color:#5C3D00} .sv-bf-back{margin-top:9px;background:#fff;border:1.5px solid #E8B339;color:#7A5200;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer} .sv-bf-back:active{transform:scale(.97)} .sv-dp-ovl{position:fixed;inset:0;background:rgba(17,28,58,.5);z-index:99990;display:flex;align-items:center;justify-content:center;padding:18px} .sv-dp-card{background:#fff;border-radius:14px;width:100%;max-width:430px;max-height:86vh;overflow:auto;padding:20px 18px;box-shadow:0 18px 50px rgba(17,28,58,.35)} .sv-dp-ttl{font-family:'Noto Serif Devanagari',Georgia,serif;font-size:17px;font-weight:800;color:var(--navy);text-align:center;margin-bottom:4px} .sv-dp-sub{font-size:12px;color:var(--gray600);text-align:center;margin-bottom:14px} .sv-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:14px} .sv-dp-chip{min-height:42px;border-radius:9px;border:1.5px solid var(--gray200);background:#fff;font-size:15px;font-weight:700;color:#33415C;cursor:pointer;font-family:inherit} .sv-dp-chip.done{background:#D6EBFB;border-color:#3E97DD;color:#0B5394} .sv-dp-chip.miss{background:#FFF8E6;border-color:#E8B339;color:#7A5200} .sv-dp-chip.hol{background:var(--gray100);border-color:var(--gray200);color:var(--gray400)} .sv-dp-chip.today{background:var(--emerald-bg);border-color:var(--emerald);color:var(--emerald);box-shadow:inset 0 0 0 1px var(--emerald)} .sv-dp-chip.sel{outline:2.5px solid var(--navy);outline-offset:1px} .sv-dp-chip:active{transform:scale(.94)} .sv-dp-leg{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;font-size:11.5px;color:var(--gray600);margin-bottom:14px} .sv-dp-leg span{display:inline-flex;align-items:center;gap:5px} .sv-dp-dot{width:12px;height:12px;border-radius:4px;display:inline-block;border:1.5px solid var(--gray200);background:#fff} .sv-dp-dot.today{background:var(--emerald-bg);border-color:var(--emerald)} .sv-dp-dot.miss{background:#FFF8E6;border-color:#E8B339} .sv-dp-dot.done{background:#D6EBFB;border-color:#3E97DD} .sv-dp-dot.hol{background:var(--gray100);border-color:var(--gray200)} .sv-dp-close{margin-top:0} #sv-root.dfs-l .sv-date-btn{font-size:16px} #sv-root.dfs-xl .sv-date-btn{font-size:19px} #sv-root.dfs-l .sv-bf-txt{font-size:16px} #sv-root.dfs-xl .sv-bf-txt{font-size:19px} #sv-root.dfs-l .sv-bf-back{font-size:16px} #sv-root.dfs-xl .sv-bf-back{font-size:19px}