@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');
:root {
  --bg:#f5f5f7; --surface:#ffffff; --surface2:#f7f7f9; --border:rgba(0,0,0,0.07);

  --text:#1d1d1f; --muted:#6e6e73; --muted2:#86868b;

  /* Buttons / interactive elements: brand-green family */
  --accent:#15915b; --accent-2:#0e7a4a; --accent-light:#e7f8ef; --accent-dim:rgba(21,145,91,0.16);

  /* KPI / headline stat cards: a distinct violet family, kept apart from the button green */
  --kpi:#6d28d9; --kpi-light:#f5f0ff; --kpi-dim:rgba(109,40,217,0.14);

  --green:#1e8e3e; --green-bg:#eefaf0; --green-dim:rgba(30,142,62,0.12);
  --red:#e0333f; --red-bg:#fef1f2; --red-dim:rgba(224,51,63,0.1);
  --amber:#b4650a; --amber-bg:#fff8ec; --amber-dim:rgba(180,101,10,0.12);
  --purple:#7c3aed; --purple-bg:#f7f3ff;

  --sk:#b4650a; --sk-bg:#fff8ec; --titans:#0058b0; --titans-bg:#eef4ff; --indians:#1e8e3e; --indians-bg:#eefaf0;
  --sunrise:#c0186b; --sunrise-bg:#fef1f7; --capital:#6931c9; --capital-bg:#f6f2fe;

  --track:rgba(118,118,128,0.12);

  --shadow:0 1px 2px rgba(0,0,0,0.04),0 1px 1px rgba(0,0,0,0.02);
  --shadow-md:0 2px 10px rgba(0,0,0,0.05),0 12px 28px -10px rgba(0,0,0,0.14);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.08),0 30px 60px -16px rgba(0,0,0,0.28);
  --ease:cubic-bezier(.25,.46,.45,.94);
  --radius:18px; --radius-sm:11px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.55;letter-spacing:-.1px;}

/* STICKY TOP — header + month tabs + subtabs + filters travel together and stay
   pinned while the table/cards below scroll underneath them. */
#stickyTop{position:sticky;top:0;z-index:200;background:#fff;}

/* HEADER — brand gradient bar (green anchoring into blue), like the Agrosaf platform chrome */
.header{background:linear-gradient(100deg,#0e7a4a 0%,#159168 38%,#0f8a8f 68%,#1668c9 100%);
  border-bottom:1px solid rgba(0,0,0,.06);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 4px 18px -6px rgba(14,122,74,.35);}
.header h1{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.4px;text-shadow:0 1px 2px rgba(0,0,0,.1);}
.header p{color:rgba(255,255,255,.82);font-size:12px;margin-top:2px;letter-spacing:-.1px;}
.header-right{display:flex;align-items:center;gap:10px;}
.live-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(1.25);}}
.badge-live{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3);padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:6px;backdrop-filter:blur(6px);}

/* TABS — Apple segmented control: a soft green-tinted track with a floating white pill for the active item.
   Solid (no transparency/blur) so scrolled content underneath never shows through the sticky bar. */
.tabs-wrap{background:#eaf7f0;border-bottom:1px solid var(--border);}
.month-tabs{display:flex;padding:3px;gap:2px;background:var(--track);border-radius:12px;width:fit-content;margin:12px 28px;overflow-x:auto;max-width:calc(100% - 56px);}
.tab-btn{padding:8px 16px;cursor:pointer;color:var(--muted);font-weight:500;font-size:12.5px;border-radius:9px;transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);white-space:nowrap;background:none;border:none;font-family:inherit;letter-spacing:-.1px;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--text);background:#fff;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.06);}

/* SUBTABS */
.subtabs{background:var(--surface2);border-bottom:1px solid var(--border);padding:10px 28px;display:flex;gap:3px;align-items:center;}
.subtab{padding:8px 16px;cursor:pointer;font-size:12px;font-weight:500;border-radius:9px;border:none;color:var(--muted);transition:all .22s var(--ease);background:none;font-family:inherit;letter-spacing:-.1px;}
.subtab:hover{background:rgba(0,0,0,.03);color:var(--text);}
.subtab.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px -4px var(--accent-dim);}

/* FILTERS */
.filters{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 28px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.filter-label{color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;}
select,.search-in{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:8px 13px;border-radius:var(--radius-sm);font-size:12px;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;cursor:pointer;}
select:focus,.search-in:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim);}
.search-in{min-width:200px;}
.filter-chip{padding:7px 15px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);cursor:pointer;font-size:12px;font-family:inherit;font-weight:500;transition:all .2s var(--ease);}
.filter-chip:hover,.filter-chip.active{background:var(--accent-light);color:var(--accent);border-color:transparent;}

/* MAIN */
.main{padding:26px 28px;}

/* SUMMARY CARDS — soft tinted-glass widgets */
.summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-bottom:24px;}
.s-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:19px 20px;box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .35s var(--ease),transform .35s var(--ease);position:relative;overflow:hidden;}
.s-card::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;}
.s-card.sk::before{background:linear-gradient(160deg,var(--sk-bg) 0%,transparent 55%);}
.s-card.titans::before{background:linear-gradient(160deg,var(--titans-bg) 0%,transparent 55%);}
.s-card.indians::before{background:linear-gradient(160deg,var(--indians-bg) 0%,transparent 55%);}
.s-card.sunrise::before{background:linear-gradient(160deg,var(--sunrise-bg) 0%,transparent 55%);}
.s-card.capital::before{background:linear-gradient(160deg,var(--capital-bg) 0%,transparent 55%);}
.s-card.total::before{background:linear-gradient(160deg,var(--kpi-light) 0%,transparent 55%);}
.s-card.crm::before{background:linear-gradient(160deg,#e3f6fc 0%,transparent 55%);}
.s-card.brm::before{background:linear-gradient(160deg,#e0f7f2 0%,transparent 55%);}
.s-card::after{content:'';position:absolute;top:0;left:0;width:100%;height:3px;}
.s-card.sk::after{background:var(--sk);}
.s-card.titans::after{background:var(--titans);}
.s-card.indians::after{background:var(--indians);}
.s-card.sunrise::after{background:var(--sunrise);}
.s-card.capital::after{background:var(--capital);}
.s-card.total::after{background:var(--kpi);}
.s-card.crm::after{background:#0891b2;}
.s-card.brm::after{background:#0f766e;}
.s-card>*{position:relative;}
.s-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.s-card.active-card{box-shadow:0 0 0 3px var(--accent-dim),var(--shadow-md);}
.s-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;}
.s-value{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;color:var(--text);line-height:1;letter-spacing:-.4px;}
.s-meta{margin-top:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.s-pct{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;}
.pct-great{background:var(--green-bg);color:var(--green);}
.pct-good{background:var(--amber-bg);color:var(--amber);}
.pct-bad{background:var(--red-bg);color:var(--red);}
.s-sub{font-size:11px;color:var(--muted2);}
.s-behind{font-size:10px;color:var(--red);font-weight:500;}

/* POPUP MODAL — frosted, floating, generous radius */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(20,20,24,.42);z-index:1000;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.modal-overlay.show{display:flex;align-items:center;justify-content:center;animation:modalFade .25s var(--ease);}
@keyframes modalFade{from{opacity:0;}to{opacity:1;}}
.modal{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border-radius:22px;box-shadow:var(--shadow-lg);width:min(700px,95vw);max-height:85vh;overflow:hidden;display:flex;flex-direction:column;animation:modalPop .3s var(--ease);}
@keyframes modalPop{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal-header{padding:22px 26px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;}
.modal-header h2{font-size:18px;font-weight:700;letter-spacing:-.3px;}
.modal-header p{font-size:12px;color:var(--muted);margin-top:2px;}
.modal-close{background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:6px 12px;cursor:pointer;font-size:13px;color:var(--muted);transition:all .2s;font-family:inherit;}
.modal-close:hover{color:var(--red);background:var(--red-bg);}
.modal-body{padding:26px;overflow-y:auto;flex:1;}
.modal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
.modal-stat{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:14px;}
.modal-stat .ms-label{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:600;margin-bottom:4px;letter-spacing:.5px;}
.modal-stat .ms-val{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:700;}
.modal-stat .ms-val.good{color:var(--green);}
.modal-stat .ms-val.bad{color:var(--red);}
.modal-progress{margin-bottom:20px;}
.modal-progress .label{font-size:12px;color:var(--muted);margin-bottom:6px;display:flex;justify-content:space-between;}
.prog-bar{height:8px;background:var(--track);border-radius:5px;overflow:hidden;}
.prog-fill{height:100%;border-radius:5px;transition:width .6s var(--ease);}
.modal-execs h3{font-size:13px;font-weight:600;margin-bottom:12px;color:var(--text);}
.exec-pill{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;background:var(--surface2);border:1px solid var(--border);border-radius:13px;margin-bottom:8px;transition:background .15s;}
.exec-pill:hover{background:#fff;box-shadow:var(--shadow);}
.exec-pill .ep-name{font-family:'Outfit',sans-serif;font-weight:600;font-size:13px;letter-spacing:.1px;}
.exec-pill .ep-val{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--green);font-weight:600;}
.exec-pill .ep-pct{font-size:11px;padding:2px 7px;border-radius:10px;margin-left:8px;}

/* SECTION TITLE */
.sec-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:9px;letter-spacing:-.2px;}
.sec-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.sec-sub{font-size:12px;color:var(--muted);font-weight:400;margin-left:auto;}

/* TABLE CARD */
.tbl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:24px;}
.tbl-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.tbl-title{font-weight:700;font-size:13.5px;letter-spacing:-.2px;}
.tbl-count{font-size:11px;color:var(--muted);background:var(--surface2);padding:3px 10px;border-radius:10px;border:1px solid var(--border);}
.tbl-scroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
th{background:transparent;padding:12px 14px;text-align:left;font-size:10.5px;font-weight:600;color:var(--muted2);text-transform:uppercase;letter-spacing:.7px;cursor:pointer;user-select:none;white-space:nowrap;border-bottom:1px solid var(--border);}
th:hover{color:var(--accent);}
th.sorted{color:var(--accent);}
td{padding:13px 14px;border-bottom:1px solid rgba(0,0,0,.045);font-size:13px;white-space:nowrap;}
tr:last-child td{border-bottom:none;}
tr{transition:background .12s;}
tr:hover td{background:rgba(21,145,91,.035);}
.n-cell{font-family:'Outfit',sans-serif;font-weight:600;color:var(--text);letter-spacing:.1px;}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;}
.t-val{color:var(--muted);}
.a-val{color:var(--green);font-weight:600;}
.b-val{color:var(--red);font-weight:500;}
.rank-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted2);font-weight:600;}
.rank-1{color:#b4650a;}
.rank-2{color:#6e6e73;}
.rank-3{color:#93673b;}

/* PROGRESS */
.prog-wrap{display:flex;align-items:center;gap:8px;min-width:140px;}
.prog-mini{flex:1;height:6px;background:var(--track);border-radius:3px;overflow:hidden;}
.prog-mini-fill{height:100%;border-radius:3px;}
.prog-pct{font-family:'JetBrains Mono',monospace;font-size:11px;min-width:36px;text-align:right;font-weight:600;}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:12px;font-size:11px;font-weight:600;}
.b-sk{background:var(--sk-bg);color:var(--sk);}
.b-titans{background:var(--titans-bg);color:var(--titans);}
.b-indians{background:var(--indians-bg);color:var(--indians);}
.b-sunrise{background:var(--sunrise-bg);color:var(--sunrise);}
.b-capital{background:var(--capital-bg);color:var(--capital);}
.b-kam{background:var(--purple-bg);color:var(--purple);}
.b-crm{background:#e3f6fc;color:#0369a1;}
.b-brm{background:#d9f5ef;color:#0f766e;}
.status{padding:3px 9px;border-radius:10px;font-size:11px;font-weight:600;}
.st-star{background:var(--purple-bg);color:var(--purple);}
.st-grow{background:var(--green-bg);color:var(--green);}
.st-mod{background:var(--amber-bg);color:var(--amber);}
.st-back{background:var(--red-bg);color:var(--red);}
.st-crm{background:#e3f6fc;color:#0369a1;}
.st-brm{background:#d9f5ef;color:#0f766e;}

/* CHARTS */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);}
.chart-card h3{font-size:13.5px;font-weight:700;margin-bottom:15px;color:var(--text);letter-spacing:-.2px;}
.bar-chart-v{display:flex;flex-direction:column;gap:14px;}
.bcv-row{display:flex;flex-direction:column;gap:5px;}
.bcv-head{display:flex;justify-content:space-between;font-size:12px;}
.bcv-name{font-family:'Outfit',sans-serif;color:var(--text);font-weight:600;letter-spacing:.1px;}
.bcv-val{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:11px;}
.bcv-track{height:7px;background:var(--track);border-radius:4px;overflow:hidden;position:relative;}
.bcv-target-line{position:absolute;top:0;height:100%;background:rgba(0,0,0,.1);}
.bcv-fill{position:absolute;top:0;left:0;height:100%;border-radius:4px;transition:width .7s var(--ease);}

/* COMPARE TABLE */
.trend-up{color:var(--green);font-weight:600;}
.trend-dn{color:var(--red);font-weight:600;}

/* PAGINATION */
.pag{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:14px 18px;border-top:1px solid var(--border);}
.page-btn{min-width:30px;height:30px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;font-size:12px;font-family:inherit;display:flex;align-items:center;justify-content:center;transition:all .18s var(--ease);padding:0 8px;}
.page-btn:hover{background:var(--accent-light);color:var(--accent);}
.page-btn.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px -4px var(--accent-dim);}
.page-btn:disabled{opacity:.35;cursor:not-allowed;}
.page-info{font-size:11px;color:var(--muted);margin-right:6px;}
.hidden{display:none!important;}
@media(max-width:900px){.main{padding:14px;}.header{padding:14px;}.filters{padding:10px 14px;}.charts-row{grid-template-columns:1fr;}.summary-grid{grid-template-columns:repeat(2,1fr);}.month-tabs{margin:10px 14px;}.modal-stats{grid-template-columns:repeat(2,1fr);}}

/* INLINE QUICK FILTERS */
.inline-filters{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface2);display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.if-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.if-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted2);white-space:nowrap;min-width:36px;}
.if-chips{display:flex;gap:4px;flex-wrap:wrap;}
.if-chip{padding:5px 12px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;font-size:11px;font-weight:500;font-family:inherit;transition:all .18s var(--ease);white-space:nowrap;}
.if-chip:hover{background:var(--accent-light);color:var(--accent);border-color:transparent;}
.if-chip.active{background:var(--accent);color:#fff;border-color:transparent;font-weight:600;}
.if-chip.sk-chip.active{background:var(--sk);}
.if-chip.tt-chip.active{background:var(--titans);}
.if-chip.in-chip.active{background:var(--indians);}
.if-chip.sr-chip.active{background:var(--sunrise);}
.if-chip.cap-chip.active{background:var(--capital);}
.if-chip.kam-chip.active{background:var(--purple);}
.if-chip.crm-chip.active{background:#0891b2;}
.if-chip.brm-chip.active{background:#0f766e;}
.if-chip.star-chip.active{background:#a16207;}
.if-chip.grow-chip.active{background:var(--green);}
.if-chip.mod-chip.active{background:var(--amber);}
.if-chip.back-chip.active{background:var(--red);}
.if-sep{width:1px;height:28px;background:var(--border);flex-shrink:0;}
.if-reset{padding:5px 13px;border-radius:14px;border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer;font-size:11px;font-family:inherit;transition:all .18s;}
.if-reset:hover{border-color:transparent;background:var(--red-bg);color:var(--red);}


.edit-field{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.edit-field label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.edit-field input{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:9px 13px;border-radius:11px;font-size:13px;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;}
.edit-field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim);}
.edit-save-btn{background:var(--accent);color:#fff;border:none;padding:11px 26px;border-radius:980px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s var(--ease);box-shadow:0 6px 16px -6px var(--accent-dim);}
.edit-save-btn:hover{background:var(--accent-2);transform:translateY(-1px);}
.edit-save-btn:active{transform:scale(.97);}
.edit-cancel-btn{background:var(--surface2);color:var(--muted);border:1px solid var(--border);padding:11px 22px;border-radius:980px;font-size:13px;cursor:pointer;font-family:inherit;margin-left:8px;transition:all .15s;}
.edit-cancel-btn:hover{color:var(--text);background:#eee;}
.insight-card-click{cursor:pointer;transition:all .3s var(--ease);}
.insight-card-click:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.exec-row-click{cursor:pointer;}
.exec-row-click:hover td{background:rgba(21,145,91,.045);}

/* LOGIN OVERLAY */
#loginOverlay{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background-color:#0b2a1c;
  background-image:linear-gradient(160deg,rgba(9,38,26,.6),rgba(6,32,22,.68)),url('office.jpg');
  background-size:cover,contain;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;}
#loginOverlay::before{content:'';position:absolute;inset:0;backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);}
#loginOverlay.unlocking{animation:loginFadeOut .35s ease forwards;}
@keyframes loginFadeOut{to{opacity:0;transform:scale(1.02);}}

.login-card{position:relative;z-index:1;background:rgba(20,63,45,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);border-radius:22px;box-shadow:0 25px 60px -15px rgba(0,0,0,.55);
  padding:34px 34px 30px;width:min(340px,90vw);text-align:center;
  animation:loginCardIn .5s cubic-bezier(.2,.9,.3,1.2);}
@keyframes loginCardIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.login-card.shake{animation:loginShake .4s ease;}
@keyframes loginShake{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(4px);}30%,50%,70%{transform:translateX(-8px);}40%,60%{transform:translateX(8px);}}

.login-logo{width:150px;margin:0 auto 18px;border-radius:16px;background:#fff;padding:10px 14px;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);}
.login-logo img{display:block;width:100%;height:auto;}
.login-card h1{font-size:19px;font-weight:700;margin-bottom:4px;letter-spacing:.3px;color:#fff;}
.login-card p{font-size:12px;color:rgba(255,255,255,.7);margin-bottom:20px;}

.pin-dots{display:flex;gap:14px;justify-content:center;margin-bottom:10px;}
.pin-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);transition:background .15s,transform .15s;}
.pin-dot.filled{background:#fff;border-color:#fff;transform:scale(1.1);}

#loginError{display:none;color:#fca5a5;font-size:12px;margin-bottom:8px;}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;}
.key{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:12px;
  font-size:18px;font-weight:600;font-family:inherit;padding:14px 0;cursor:pointer;transition:background .15s,transform .1s;}
.key:hover{background:rgba(255,255,255,.16);}
.key:active{transform:scale(.94);}
.key-back{font-size:16px;}