/* ════════════════════════════════════════
   Electricity Submeter Tracker v2.1
   All styles scoped under #est-app
════════════════════════════════════════ */

/* ── CSS Variables (Dark default) ── */
#est-app {
  --bg:      #0f1117;
  --surf:    #171b26;
  --surf2:   #1e2333;
  --brd:     rgba(255,255,255,0.09);
  --brd2:    rgba(255,255,255,0.16);
  --txt:     #f0f2f8;
  --muted:   #9ca3af;
  --hint:    #4b5563;
  --blue:    #3b82f6;
  --bluebg:  rgba(59,130,246,0.15);
  --bluetxt: #93c5fd;
  --teal:    #14b8a6;
  --tealbg:  rgba(20,184,166,0.15);
  --tealtxt: #5eead4;
  --green:   #22c55e;
  --greenbg: rgba(34,197,94,0.12);
  --greentxt:#86efac;
  --amber:   #f59e0b;
  --amberbg: rgba(245,158,11,0.12);
  --ambertxt:#fcd34d;
  --red:     #ef4444;
  --redbg:   rgba(239,68,68,0.12);
  --redtxt:  #fca5a5;
  --purp:    #8b5cf6;
  --purpbg:  rgba(139,92,246,0.15);
  --purptxt: #c4b5fd;
  --r:  10px;
  --rl: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  box-sizing: border-box;
}
#est-app *, #est-app *::before, #est-app *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ── White Theme ── */
#est-app.tw {
  --bg:      #f4f6fa;
  --surf:    #ffffff;
  --surf2:   #f0f2f8;
  --brd:     rgba(0,0,0,0.08);
  --brd2:    rgba(0,0,0,0.15);
  --txt:     #111827;
  --muted:   #4b5563;
  --hint:    #9ca3af;
  --blue:    #1d4ed8;
  --bluebg:  rgba(29,78,216,0.10);
  --bluetxt: #1e40af;
  --teal:    #0d9488;
  --tealbg:  rgba(13,148,136,0.10);
  --tealtxt: #0f766e;
  --green:   #16a34a;
  --greenbg: rgba(22,163,74,0.10);
  --greentxt:#15803d;
  --amber:   #d97706;
  --amberbg: rgba(217,119,6,0.10);
  --ambertxt:#92400e;
  --red:     #dc2626;
  --redbg:   rgba(220,38,38,0.10);
  --redtxt:  #991b1b;
  --purp:    #7c3aed;
  --purpbg:  rgba(124,58,237,0.10);
  --purptxt: #5b21b6;
}
#est-app.tw .est-hdr-title h1 {
  background: linear-gradient(90deg,#111827 50%,#1d4ed8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Overlay ── */
#est-app .ov { display:none; position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,0.75); align-items:center; justify-content:center; padding:1rem; }
#est-app .ov.show { display:flex; }

/* ── Login Box ── */
#est-app .login-box { background:var(--surf); border:1.5px solid var(--brd2); border-radius:var(--rl); padding:2.5rem 2rem; width:370px; text-align:center; }
#est-app .login-box .app-ico { width:56px; height:56px; background:var(--bluebg); border:1.5px solid var(--blue); border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; }
#est-app .login-box .app-ico svg { width:26px; height:26px; stroke:var(--blue); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#est-app .login-box h2 { font-size:21px; font-weight:800; color:var(--txt); margin-bottom:.3rem; }
#est-app .sub { font-size:14px; color:var(--muted); margin-bottom:1.5rem; }
#est-app .rtabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:1.25rem; }
#est-app .rtab { padding:10px 4px; border:1.5px solid var(--brd2); border-radius:var(--r); font-size:13px; font-weight:700; color:var(--muted); background:var(--surf2); cursor:pointer; font-family:inherit; line-height:1.4; transition:all .15s; }
#est-app .rtab svg { width:15px; height:15px; display:block; margin:0 auto 4px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#est-app .rtab.av { border-color:var(--purp); color:var(--purptxt); background:var(--purpbg); }
#est-app .rtab.au { border-color:var(--teal); color:var(--tealtxt); background:var(--tealbg); }
#est-app .rtab.as { border-color:var(--amber); color:var(--ambertxt); background:var(--amberbg); }
#est-app .pw-wrap { position:relative; margin-bottom:.75rem; }
#est-app .pw-wrap input { width:100%; padding:12px 44px 12px 14px; background:var(--surf2); border:1.5px solid var(--brd2); border-radius:var(--r); font-size:16px; color:var(--txt); font-family:inherit; }
#est-app .pw-wrap input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--bluebg); }
#est-app .eye { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--muted); padding:4px; display:flex; align-items:center; }
#est-app .eye svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#est-app .lerr { font-size:13px; color:var(--redtxt); min-height:20px; margin-top:.5rem; }

/* ── Modal Box ── */
#est-app .mbox { background:var(--surf); border:1.5px solid var(--brd2); border-radius:var(--rl); padding:2rem; width:390px; max-height:90vh; overflow-y:auto; }
#est-app .mbox h3 { font-size:18px; font-weight:800; color:var(--txt); margin-bottom:.3rem; }
#est-app .mbox .msub { font-size:14px; color:var(--muted); margin-bottom:1.5rem; }
#est-app .msec { border:1.5px solid var(--brd); border-radius:var(--r); padding:1.1rem; margin-bottom:.85rem; }
#est-app .msec .st { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.6rem; }
#est-app .pf { margin-bottom:8px; }
#est-app .pf label { font-size:13px; color:var(--muted); display:block; margin-bottom:4px; font-weight:600; }
#est-app .pf .pw-wrap input { font-size:15px; padding:9px 40px 9px 12px; }
#est-app .ferr { font-size:13px; min-height:18px; margin-top:5px; }
#est-app .str-wrap { margin-top:5px; height:4px; border-radius:2px; background:var(--hint); overflow:hidden; }
#est-app .str-bar { height:100%; width:0; transition:width .3s, background .3s; border-radius:2px; }
#est-app .sbtn { border:none; border-radius:var(--r); padding:10px; width:100%; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; margin-top:.75rem; }
#est-app .mlink { font-size:13px; color:var(--muted); cursor:pointer; text-decoration:underline; text-align:center; margin-top:1rem; }

/* ── Header ── */
#est-app .hdr { background:var(--surf); border-bottom:1.5px solid var(--brd); padding:.9rem 1.5rem; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:500; }
#est-app .hdr-logo { height:38px; max-width:140px; object-fit:contain; display:block; }
#est-app .hdr-ico { width:38px; height:38px; background:var(--bluebg); border:1.5px solid var(--blue); border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#est-app .hdr-ico svg { width:20px; height:20px; stroke:var(--blue); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#est-app .est-hdr-title h1 { font-size:18px; font-weight:800; letter-spacing:-.04em; background:linear-gradient(90deg,var(--txt) 55%,var(--bluetxt)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1.2; }
#est-app .est-hdr-title p { font-size:12px; color:var(--muted); margin-top:2px; }
#est-app .hdr-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
#est-app .themes { display:flex; align-items:center; gap:5px; padding:5px 10px; background:var(--surf2); border:1.5px solid var(--brd2); border-radius:24px; }
#est-app .dot { width:15px; height:15px; border-radius:50%; border:2px solid rgba(128,128,128,0.3); cursor:pointer; padding:0; transition:transform .15s; flex-shrink:0; }
#est-app .dot:hover { transform:scale(1.3); }
#est-app .dot.on { transform:scale(1.2); outline:2px solid var(--txt); outline-offset:2px; }
#est-app .rbadge { display:flex; align-items:center; gap:7px; padding:6px 14px; border-radius:var(--r); font-size:13px; font-weight:700; cursor:pointer; border:1.5px solid; user-select:none; }
#est-app .rbadge svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#est-app .rv { background:var(--purpbg); color:var(--purptxt); border-color:var(--purp); }
#est-app .ru { background:var(--tealbg); color:var(--tealtxt); border-color:var(--teal); }
#est-app .rs { background:var(--amberbg); color:var(--ambertxt); border-color:var(--amber); }
#est-app .login-btn { display:flex; align-items:center; gap:7px; padding:7px 16px; background:var(--bluebg); color:var(--bluetxt); border:1.5px solid var(--blue); border-radius:var(--r); font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; }
#est-app .login-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── Main ── */
#est-app .main { max-width:1000px; margin:0 auto; padding:1.75rem 1.5rem 5rem; }
#est-app .card { background:var(--surf); border:1.5px solid var(--brd); border-radius:var(--rl); padding:1.5rem 1.75rem; margin-bottom:1.1rem; }

/* Section headings */
#est-app .shead { display:flex; align-items:center; gap:14px; margin-bottom:1.5rem; }
#est-app .sico { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,0.25); }
#est-app .sico svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
#est-app .stitle { font-size:20px; font-weight:800; letter-spacing:-.035em; color:var(--txt); line-height:1.2; }
#est-app .ssub { font-size:13px; color:var(--muted); margin-top:3px; }
#est-app .ihead { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--bluetxt); padding:.7rem 0; margin:.6rem 0 .7rem; border-bottom:1.5px solid var(--brd); position:relative; }
#est-app .ihead::before { content:''; position:absolute; bottom:-2px; left:0; width:52px; height:2px; background:var(--blue); border-radius:2px; }
#est-app .ihead svg { width:15px; height:15px; stroke:var(--blue); flex-shrink:0; }

/* Grids */
#est-app .g2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#est-app .g4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }

/* Fields */
#est-app .f label { font-size:13px; color:var(--muted); display:block; margin-bottom:5px; font-weight:700; }
#est-app .f input { width:100%; background:var(--surf2); border:1.5px solid var(--brd2); border-radius:var(--r); padding:9px 13px; font-size:15px; font-family:inherit; color:var(--txt); }
#est-app .f input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--bluebg); }
#est-app .f input[readonly] { cursor:default; border-color:var(--brd); color:var(--muted); }
#est-app .f input::placeholder { color:var(--hint); }
#est-app .f .note { font-size:12px; color:var(--ambertxt); margin-top:4px; font-weight:500; line-height:1.4; }

/* Readings table */
#est-app .rhead { display:grid; grid-template-columns:105px repeat(6,minmax(0,1fr)); gap:10px; padding:0 0 8px; border-bottom:1.5px solid var(--brd); margin-bottom:6px; }
#est-app .rhead span { font-size:12px; color:var(--muted); font-weight:700; }
#est-app .rrow { display:grid; grid-template-columns:105px repeat(6,minmax(0,1fr)); gap:10px; align-items:center; padding:12px 0; border-bottom:1.5px solid var(--brd); }
#est-app .rrow:last-of-type { border-bottom:none; }
#est-app .ulbl { display:flex; flex-direction:column; gap:6px; }
#est-app .av { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; }
#est-app .avr { background:var(--bluebg); color:var(--bluetxt); border:1.5px solid var(--blue); }
#est-app .ava { background:var(--tealbg); color:var(--tealtxt); border:1.5px solid var(--teal); }
#est-app .uname { font-size:14px; font-weight:800; color:var(--txt); }
/* Auto-filled last reading fields */
#est-app input.ar { color:var(--bluetxt) !important; font-weight:700; font-family:monospace; background:var(--bluebg) !important; border-color:var(--blue) !important; }
#est-app input.aa { color:var(--tealtxt) !important; font-weight:700; font-family:monospace; background:var(--tealbg) !important; border-color:var(--teal) !important; }
#est-app input.ro { font-family:monospace; }
#est-app input.nr { color:var(--bluetxt) !important; font-weight:800 !important; font-family:monospace; }
#est-app input.na { color:var(--tealtxt) !important; font-weight:800 !important; font-family:monospace; }

/* Buttons */
#est-app .btn { background:var(--blue); color:#fff; border:none; border-radius:var(--r); padding:11px 24px; font-size:15px; font-weight:700; font-family:inherit; cursor:pointer; }
#est-app .btn:hover { opacity:.9; }
#est-app .btn:disabled { background:var(--hint); cursor:not-allowed; }
#est-app .btn2 { background:transparent; color:var(--muted); border:1.5px solid var(--brd2); border-radius:var(--r); padding:11px 20px; font-size:14px; font-family:inherit; cursor:pointer; }
#est-app .btn2:hover { background:var(--surf2); color:var(--txt); }
#est-app .brow { display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }
#est-app .w100 { width:100%; padding:12px; }

/* History */
#est-app .hh { display:flex; align-items:center; justify-content:space-between; margin:1.75rem 0 .85rem; gap:12px; }
#est-app .mb { background:var(--surf); border:1.5px solid var(--brd); border-radius:var(--rl); margin-bottom:.9rem; overflow:hidden; }
#est-app .mhdr { display:flex; justify-content:space-between; align-items:center; padding:.9rem 1.4rem; background:var(--surf2); border-bottom:1.5px solid var(--brd); }
#est-app .mtitle { font-size:16px; font-weight:800; color:var(--txt); }
#est-app .mmeta { font-size:12px; color:var(--muted); margin-top:3px; }
#est-app .nbadge { font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; background:var(--greenbg); color:var(--greentxt); border:1.5px solid var(--green); }
#est-app .ibar { display:flex; gap:1.25rem; flex-wrap:wrap; padding:.75rem 1.4rem; background:var(--greenbg); border-bottom:1.5px solid rgba(34,197,94,.2); font-size:13px; color:var(--greentxt); }
#est-app .ibar .i span { font-weight:800; font-family:monospace; }
#est-app .twrap { overflow-x:auto; }
#est-app .tbl { width:100%; border-collapse:collapse; font-size:14px; min-width:600px; }
#est-app .tbl thead th { background:rgba(128,128,128,.06); color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:10px 13px; text-align:left; border-bottom:1.5px solid var(--brd); }
#est-app .tbl tbody td { padding:11px 13px; border-bottom:1.5px solid var(--brd); color:var(--txt); }
#est-app .tbl tbody tr:last-child td { border-bottom:none; }
#est-app .tbl tbody tr.tr { background:var(--greenbg); }
#est-app .mono { font-family:monospace; }
#est-app .nr2 { color:var(--bluetxt); font-weight:800; font-family:monospace; }
#est-app .na2 { color:var(--tealtxt); font-weight:800; font-family:monospace; }
#est-app .nt2 { color:var(--greentxt); font-weight:800; font-family:monospace; }
#est-app .pill { display:inline-block; padding:3px 10px; border-radius:20px; font-size:13px; font-weight:700; }
#est-app .pr { background:var(--bluebg); color:var(--bluetxt); }
#est-app .pa { background:var(--tealbg); color:var(--tealtxt); }
#est-app .pt { background:var(--greenbg); color:var(--greentxt); }
#est-app .pg { background:rgba(128,128,128,.1); color:var(--muted); }
#est-app .ebtn, #est-app .dbtn { background:none; border:1.5px solid var(--brd); color:var(--muted); border-radius:7px; padding:5px 12px; font-size:13px; font-family:inherit; cursor:pointer; }
#est-app .ebtn:hover { background:var(--amberbg); color:var(--ambertxt); border-color:var(--amber); }
#est-app .dbtn:hover { background:var(--redbg); color:var(--redtxt); border-color:var(--red); }
#est-app .pbtn { background:var(--redbg); color:var(--redtxt); border:1.5px solid var(--red); border-radius:7px; padding:5px 12px; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
#est-app .pbtn svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Edit panel */
#est-app .ep { display:none; background:var(--surf2); border-top:1.5px solid var(--brd); padding:1.4rem; }
#est-app .ep.open { display:block; }
#est-app .ept { font-size:12px; font-weight:800; color:var(--ambertxt); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
#est-app .ef label { font-size:12px; color:var(--muted); display:block; margin-bottom:5px; font-weight:700; }
#est-app .ef input { width:100%; padding:8px 11px; border:1.5px solid var(--brd2); border-radius:var(--r); font-size:14px; background:var(--surf); color:var(--txt); font-family:monospace; }
#est-app .ef input:focus { outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--amberbg); }
#est-app .esbtn { background:var(--amber); color:#000; border:none; border-radius:var(--r); padding:9px 20px; font-size:14px; font-weight:800; font-family:inherit; cursor:pointer; }
#est-app .ecbtn { background:none; color:var(--muted); border:1.5px solid var(--brd2); border-radius:var(--r); padding:9px 16px; font-size:14px; font-family:inherit; cursor:pointer; }

/* Locked */
#est-app .locked { text-align:center; padding:3.5rem 1rem; border:2px dashed var(--brd2); border-radius:var(--rl); }
#est-app .locked svg { width:40px; height:40px; margin:0 auto 1.1rem; display:block; color:var(--hint); }
#est-app .ltitle { font-size:17px; font-weight:800; color:var(--muted); margin-bottom:.5rem; }
#est-app .lsub { font-size:14px; color:var(--hint); margin-bottom:1.4rem; }

/* Audit */
#est-app .alist { display:none; }
#est-app .alist.open { display:block; }
#est-app .ai { display:flex; align-items:flex-start; gap:13px; padding:10px 0; border-bottom:1.5px solid var(--brd); font-size:14px; }
#est-app .ai:last-child { border-bottom:none; }
#est-app .at { font-size:12px; color:var(--hint); font-family:monospace; white-space:nowrap; min-width:135px; }
#est-app .am { color:var(--muted); flex:1; }
#est-app .am strong { color:var(--txt); font-weight:700; }
#est-app .ab { font-size:12px; padding:3px 10px; border-radius:20px; white-space:nowrap; font-weight:700; }
#est-app .ab.edit { background:var(--amberbg); color:var(--ambertxt); }
#est-app .ab.save { background:var(--greenbg); color:var(--greentxt); }
#est-app .ab.delete { background:var(--redbg); color:var(--redtxt); }

/* Toast */
#est-app .toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(10px); background:var(--surf2); border:1.5px solid var(--brd2); border-radius:var(--r); padding:11px 22px; font-size:14px; font-weight:600; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; z-index:999999; white-space:nowrap; color:var(--txt); }
#est-app .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Loading */
#est-app .loading { text-align:center; padding:2.5rem; color:var(--muted); font-size:15px; border:2px dashed var(--brd2); border-radius:var(--rl); }

/* Responsive */
@media(max-width:680px){
  #est-app .main { padding:1rem 1rem 3.5rem; }
  #est-app .rhead { display:none; }
  #est-app .rrow { grid-template-columns:1fr 1fr; }
  #est-app .ulbl { grid-column:1/-1; flex-direction:row; align-items:center; border-bottom:1.5px solid var(--brd); padding-bottom:10px; margin-bottom:5px; }
  #est-app .g4 { grid-template-columns:1fr 1fr; }
  #est-app .themes { display:none; }
  #est-app .est-hdr-title h1 { font-size:15px; }
}

/* Print */
@media print {
  #est-app .ov, #est-app .brow, #est-app .ep, #est-app button,
  #est-app .rbadge, #est-app .hdr-right, #est-app .login-btn,
  #est-app #est-entry, #est-app #est-prev, #est-app .locked,
  #est-app #est-audit, #est-app .themes { display:none !important; }
  #est-app, body { background:#fff; color:#000; }
  #est-app .hdr { background:#fff; border-bottom:2px solid #e5e7eb; position:static; }
  #est-app .mb { break-inside:avoid; border:1px solid #e5e7eb; margin-bottom:1rem; }
  #est-app .mhdr { background:#f9fafb; border-bottom:1px solid #e5e7eb; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #est-app .mtitle { color:#111 !important; }
  #est-app .ibar { background:#f0fdf4 !important; color:#166534 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #est-app .tbl thead th { background:#f9fafb !important; color:#374151 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #est-app .tbl tbody td { color:#111; border-bottom:1px solid #e5e7eb; }
  #est-app .nr2 { color:#1d4ed8 !important; } #est-app .na2 { color:#0f766e !important; } #est-app .nt2 { color:#15803d !important; }
  #est-app #est-psingle { display:block; }
  .pi { display:flex; gap:1.5rem; flex-wrap:wrap; background:#f0fdf4; padding:.75rem 1rem; border-radius:6px; margin-bottom:1rem; font-size:12px; color:#166534; font-weight:700; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .ptbl { width:100%; border-collapse:collapse; margin-top:.5rem; }
  .ptbl th { background:#f9fafb; color:#374151; font-size:12px; text-transform:uppercase; padding:9px 11px; text-align:left; border-bottom:2px solid #e5e7eb; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .ptbl td { padding:10px 11px; border-bottom:1px solid #e5e7eb; color:#111; font-size:14px; }
}

/* ── Payment Section ── */
#est-app .pay-section { border-top:1.5px solid var(--brd); padding:1.25rem 1.4rem; background:var(--surf2); }
#est-app .pay-title { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--bluetxt); margin-bottom:1rem; }
#est-app .puser-block { margin-bottom:1rem; background:var(--surf); border:1.5px solid var(--brd); border-radius:var(--r); overflow:hidden; }
#est-app .puser-block:last-child { margin-bottom:0; }
#est-app .puser-hdr { display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; background:var(--surf2); border-bottom:1.5px solid var(--brd); flex-wrap:wrap; font-size:13px; }
#est-app .puname { font-size:14px; font-weight:800; color:var(--txt); min-width:50px; }
#est-app .pbill { color:var(--muted); }
#est-app .ppaid { color:var(--greentxt); font-weight:700; }
#est-app .prow { display:flex; align-items:center; gap:.75rem; padding:.6rem 1rem; border-bottom:1px solid var(--brd); flex-wrap:wrap; font-size:13px; }
#est-app .prow:last-of-type { border-bottom:none; }
#est-app .pdate { color:var(--muted); font-family:monospace; }
#est-app .pamt { font-weight:800; color:var(--txt); font-family:monospace; }
#est-app .pnote { font-size:12px; color:var(--hint); font-style:italic; }
#est-app .pacts { margin-left:auto; display:flex; gap:6px; }
#est-app .pbadge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; }
#est-app .pbadge.pend { background:var(--amberbg); color:var(--ambertxt); border:1px solid var(--amber); }
#est-app .pbadge.appr { background:var(--greenbg); color:var(--greentxt); border:1px solid var(--green); }
#est-app .apbtn { background:var(--greenbg); color:var(--greentxt); border:1.5px solid var(--green); border-radius:6px; padding:3px 10px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; }
#est-app .dpbtn { background:var(--redbg); color:var(--redtxt); border:1.5px solid var(--red); border-radius:6px; padding:3px 8px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; }
#est-app .padd { display:flex; gap:8px; padding:.75rem 1rem; background:var(--bluebg); border-top:1.5px dashed var(--blue); flex-wrap:wrap; align-items:center; }
#est-app .padd input[type="date"],
#est-app .padd input[type="number"],
#est-app .padd input[type="text"] { background:var(--surf); border:1.5px solid var(--brd2); border-radius:var(--r); padding:7px 11px; font-size:14px; color:var(--txt); font-family:inherit; }
#est-app .padd input[type="date"] { min-width:140px; }
#est-app .padd input[type="number"] { width:150px; }
#est-app .padd input[type="text"] { flex:1; min-width:120px; }
#est-app .padd input:focus { outline:none; border-color:var(--blue); }
#est-app .addpbtn { background:var(--blue); color:#fff; border:none; border-radius:var(--r); padding:7px 16px; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; white-space:nowrap; }
#est-app .psec-loading { padding:.75rem 1.4rem; font-size:13px; color:var(--hint); border-top:1.5px solid var(--brd); }

/* Lock button */
#est-app #entry-lock-btn { display:none; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--r); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; border:1.5px solid; transition:all .15s; }
#est-app #entry-lock-btn.btn { background:var(--greenbg); color:var(--greentxt); border-color:var(--green); }
#est-app #entry-lock-btn.btn2 { background:var(--redbg); color:var(--redtxt); border-color:var(--red); }

/* Lock/Unlock button in header */
#est-app .lbtn-unlock { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--r); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; background:var(--greenbg); color:var(--greentxt); border:1.5px solid var(--green); }
#est-app .lbtn-lock   { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--r); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; background:var(--redbg);   color:var(--redtxt);   border:1.5px solid var(--red); }

/* ── Super Control Panel ── */
#est-app .ctrl-item { background:var(--surf); border:1.5px solid var(--brd2); border-radius:var(--r); padding:.85rem 1rem; display:flex; flex-direction:column; gap:8px; }
#est-app .ctrl-label { font-size:13px; font-weight:700; color:var(--txt); }
#est-app .stoggle-on  { width:100%; padding:8px; border:none; border-radius:var(--r); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; background:var(--greenbg); color:var(--greentxt); border:1.5px solid var(--green); }
#est-app .stoggle-off { width:100%; padding:8px; border:none; border-radius:var(--r); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; background:var(--redbg);   color:var(--redtxt);   border:1.5px solid var(--red); }

/* ── Section overlay ── */
#est-app .sec-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.62); border-radius:var(--rl); z-index:10; flex-direction:column; align-items:center; justify-content:center; gap:10px; backdrop-filter:blur(4px); color:#fcd34d; }
#est-app .sec-overlay svg { stroke:#fcd34d; }
#est-app .sec-overlay p { font-size:16px; font-weight:800; color:#fcd34d; }