/* ═══════════════════════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════════════════════ */
:root {
  --purple-dark: #3d2463;
  --purple: #5c3993;
  --navy: #2c3c91;
  --teal: #3b99b8;
  --sky: #4ac2c8;
  --text-dim: rgba(255,255,255,0.55);
  --text-mid: rgba(255,255,255,0.75);
  --success: #27ae60;
  --warning: #f39c12;
  --danger: #e74c3c;
  --card: rgba(255,255,255,0.07);
  --card-border: rgba(255,255,255,0.11);
  --input-bg: rgba(255,255,255,0.08);
  --input-border: rgba(255,255,255,0.18);
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
body {
  font-family:'Biryani',sans-serif;
  background:linear-gradient(160deg,#1e6478 0%,#213d7a 25%,#2c3c91 55%,#5c3993 80%,#3d2463 100%);
  background-attachment:fixed; min-height:100vh; color:#fff;
  -webkit-font-smoothing:antialiased;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.15;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════
   SCREEN MANAGEMENT
═══════════════════════════════════════════════════════ */
.screen { display:none; position:relative; z-index:1; }
.screen.active { display:block; }
#loginScreen.active, #locationScreen.active, #pendingScreen.active { display:flex; }

/* ═══════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════ */
#loginScreen { min-height:100vh; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.login-logo { display:flex; flex-direction:column; align-items:center; margin-bottom:44px; animation:fadeDown 0.6s ease both; }
.logo-circle {
  width:88px; height:88px; border-radius:50%;
  background:linear-gradient(135deg,var(--sky),var(--navy));
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:900; color:white; letter-spacing:1px;
  margin-bottom:16px; box-shadow:0 8px 32px rgba(74,194,200,0.4);
  border:2px solid rgba(255,255,255,0.2);
}
.login-brand { font-size:26px; font-weight:800; color:white; }
.login-tagline { font-size:11px; font-weight:600; color:var(--sky); letter-spacing:2px; text-transform:uppercase; margin-top:4px; }
.login-card {
  background:rgba(255,255,255,0.08); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.15); border-radius:24px;
  padding:40px 32px; width:100%; max-width:400px;
  animation:fadeUp 0.6s ease 0.2s both;
}
.login-card h2 { font-size:20px; font-weight:800; color:white; margin-bottom:8px; text-align:center; }
.login-card > p { font-size:13px; color:var(--text-dim); text-align:center; margin-bottom:28px; }
.form-g { margin-bottom:16px; }
.form-g label { display:block; font-size:11px; font-weight:700; color:var(--sky); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.f-input {
  width:100%; background:var(--input-bg); border:1px solid var(--input-border);
  border-radius:12px; padding:14px 18px; font-family:'Biryani',sans-serif;
  font-size:15px; color:white; transition:all 0.2s; -webkit-appearance:none;
}
.f-input::placeholder { color:rgba(255,255,255,0.3); }
.f-input:focus { outline:none; border-color:var(--sky); background:rgba(255,255,255,0.13); }
.f-select {
  width:100%; background:var(--input-bg); border:1px solid var(--input-border);
  border-radius:12px; padding:14px 18px; font-family:'Biryani',sans-serif;
  font-size:15px; color:white; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234ac2c8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; padding-right:44px;
}
.f-select option { background:#2c3c91; color:white; }
.f-select:focus { outline:none; border-color:var(--sky); }
.btn-pill {
  width:100%; background:linear-gradient(135deg,var(--purple),var(--sky));
  border:none; border-radius:50px; padding:16px 32px;
  font-family:'Biryani',sans-serif; font-size:15px; font-weight:800;
  color:white; cursor:pointer; transition:all 0.2s; letter-spacing:0.5px;
  box-shadow:0 4px 20px rgba(92,57,147,0.45); margin-top:8px;
}
.btn-pill:hover { opacity:0.9; transform:translateY(-1px); }
.btn-pill:active { transform:translateY(0); }
.btn-pill.sec { background:rgba(255,255,255,0.1); box-shadow:none; border:1px solid rgba(255,255,255,0.2); }
.login-demo { font-size:11px; color:var(--text-dim); text-align:center; margin-top:20px; }
#loginError { color:#f87171; font-size:12px; font-weight:700; margin-bottom:12px; }
#locationScreen, #pendingScreen { min-height:100vh; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.loc-pick-btn { width:100%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; transition:all 0.15s; font-family:'Biryani',sans-serif; }
.loc-pick-btn:hover { background:rgba(74,194,200,0.12); border-color:rgba(74,194,200,0.4); }
.loc-pick-btn:disabled { opacity:0.5; cursor:default; }
.loc-pick-name { font-size:14px; font-weight:700; color:white; }
.loc-pick-arrow { font-size:16px; color:var(--sky); }
.demo-cred-btn { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:12px 14px; text-align:left; cursor:pointer; font-family:'Biryani',sans-serif; transition:all 0.15s; }
.demo-cred-btn:hover { background:rgba(74,194,200,0.1); border-color:rgba(74,194,200,0.35); }

/* ═══════════════════════════════════════════════════════
   SHARED APP HEADER
═══════════════════════════════════════════════════════ */
.app-header {
  background:rgba(0,0,0,0.22); backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.09);
  padding:12px 20px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
}
.h-logo { display:flex; align-items:center; gap:10px; }
.h-logo-circle {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--sky),var(--navy));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; border:1px solid rgba(255,255,255,0.2); flex-shrink:0;
}
.h-brand { font-size:14px; font-weight:800; }
.h-sub { font-size:9px; color:var(--sky); font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.h-right { display:flex; align-items:center; gap:8px; }
.role-badge {
  background:rgba(74,194,200,0.18); border:1px solid rgba(74,194,200,0.35);
  border-radius:20px; padding:4px 12px; font-size:10px; font-weight:800;
  color:var(--sky); text-transform:uppercase; letter-spacing:0.5px;
}
.h-avatar {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--navy));
  border:2px solid rgba(255,255,255,0.28);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900;
}
.btn-logout {
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.18);
  border-radius:20px; padding:6px 14px; font-family:'Biryani',sans-serif;
  font-size:11px; font-weight:700; color:rgba(255,255,255,0.75); cursor:pointer; transition:all 0.2s;
}
.btn-logout:hover { background:rgba(255,255,255,0.16); }
.btn-role-switch {
  background:rgba(74,194,200,0.18); border:1px solid rgba(74,194,200,0.5);
  border-radius:20px; padding:6px 14px; font-family:'Biryani',sans-serif;
  font-size:11px; font-weight:700; color:#4ac2c8; cursor:pointer; transition:all 0.2s; margin-right:8px;
}
.btn-role-switch:hover { background:rgba(74,194,200,0.32); }
.btn-back {
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.18);
  border-radius:20px; padding:7px 16px; font-family:'Biryani',sans-serif;
  font-size:11px; font-weight:700; color:rgba(255,255,255,0.75); cursor:pointer; transition:all 0.2s;
}
.btn-back:hover { background:rgba(255,255,255,0.16); }

/* ═══════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════ */
.mc { padding:20px 16px; max-width:720px; margin:0 auto; }
.mc.wide { max-width:960px; }
.has-bnav { padding-bottom:80px; }
.pg-title { font-size:22px; font-weight:900; color:white; margin-bottom:6px; line-height:1.2; }
.pg-sub { font-size:13px; color:var(--text-dim); margin-bottom:24px; line-height:1.5; }
.sec-label {
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:2px;
  color:var(--sky); margin-bottom:12px; margin-top:24px;
  display:flex; align-items:center; gap:8px;
}
.sec-label::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.1); }
.info-tag {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(74,194,200,0.14); border:1px solid rgba(74,194,200,0.28);
  border-radius:50px; padding:4px 12px; font-size:10px; font-weight:800;
  color:var(--sky); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:16px;
}
.highlight { background:rgba(74,194,200,0.1); border:1px solid rgba(74,194,200,0.28); border-radius:12px; padding:14px 16px; margin:12px 0; font-size:13px; color:rgba(255,255,255,0.85); line-height:1.5; }
.highlight strong { color:var(--sky); }
.highlight.warn { background:rgba(231,76,60,0.1); border-color:rgba(231,76,60,0.3); }
.highlight.ok { background:rgba(39,174,96,0.1); border-color:rgba(39,174,96,0.28); }

/* ═══════════════════════════════════════════════════════
   GLASS CARDS
═══════════════════════════════════════════════════════ */
.gc { background:var(--card); backdrop-filter:blur(12px); border:1px solid var(--card-border); border-radius:18px; padding:20px; margin-bottom:16px; }
.gc-hdr { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--sky); margin-bottom:16px; display:flex; align-items:center; gap:8px; }

/* ═══════════════════════════════════════════════════════
   METRICS
═══════════════════════════════════════════════════════ */
.m-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.m-row.two { grid-template-columns:repeat(2,1fr); }
.m-row.four { grid-template-columns:repeat(2,1fr); }
.m-row.five { grid-template-columns:repeat(5,1fr); }
.mbox { background:rgba(0,0,0,0.2); border-radius:12px; padding:14px 10px; text-align:center; border:1px solid rgba(255,255,255,0.07); }
.mbox .mv { font-size:24px; font-weight:900; color:var(--sky); line-height:1; margin-bottom:4px; }
.mbox .mv.gold { color:#ffd700; }
.mbox .mv.green { color:#4ade80; }
.mbox .mv.red { color:#f87171; }
.mbox .mv.white { color:white; }
.mbox .ml { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-dim); }

/* ═══════════════════════════════════════════════════════
   INPUTS
═══════════════════════════════════════════════════════ */
.ig { margin-bottom:14px; }
.ilbl { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-mid); margin-bottom:8px; min-height:32px; }
.ifield {
  width:100%; background:var(--input-bg); border:1px solid var(--input-border);
  border-radius:12px; padding:13px 16px; font-family:'Biryani',sans-serif;
  font-size:16px; color:white; transition:all 0.2s; -webkit-appearance:none;
}
.ifield::placeholder { color:rgba(255,255,255,0.28); }
.ifield:focus { outline:none; border-color:var(--sky); background:rgba(255,255,255,0.13); }
.irow { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.irow.three { grid-template-columns:1fr 1fr 1fr; }
textarea.ifield { resize:vertical; min-height:80px; line-height:1.5; font-size:14px; }

/* ═══════════════════════════════════════════════════════
   RANGE PILLS (kept for chart pills outside step1)
═══════════════════════════════════════════════════════ */
.rpills { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.rpill { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); border-radius:50px; padding:8px 16px; font-family:'Biryani',sans-serif; font-size:12px; font-weight:700; color:rgba(255,255,255,0.55); cursor:pointer; transition:all 0.2s; }
.rpill.active { background:var(--sky); border-color:var(--sky); color:white; box-shadow:0 2px 12px rgba(74,194,200,0.35); }

/* ═══════════════════════════════════════════════════════
   DATE RANGE PICKER
═══════════════════════════════════════════════════════ */
.date-range-picker { margin-bottom:16px; }
.date-range-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.date-field { display:flex; flex-direction:column; gap:4px; }
.date-lbl { font-size:10px; font-weight:700; color:var(--sky); text-transform:uppercase; letter-spacing:1px; }
.date-inp { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:7px 10px; font-family:'Biryani',sans-serif; font-size:13px; color:white; cursor:pointer; }
.date-inp:focus { outline:none; border-color:var(--sky); box-shadow:0 0 0 2px rgba(74,194,200,0.2); }
.date-inp::-webkit-calendar-picker-indicator { filter:invert(0.7); cursor:pointer; }
.range-hint { font-size:11px; color:var(--text-dim); font-style:italic; margin:0; }

/* ═══════════════════════════════════════════════════════
   METRIC BOX STATES (loading skeleton / error)
═══════════════════════════════════════════════════════ */
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.mv.skel {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
  color: transparent;
  min-width: 36px;
  display: inline-block;
}
.mv.mv-cycling { color: rgba(74,194,200,0.45); transition: none; }
.conv-error { display:flex; align-items:center; gap:10px; margin:4px 0 10px; font-size:12px; color:rgba(255,160,80,0.85); }
.conv-retry { background:rgba(255,160,80,0.12); border:1px solid rgba(255,160,80,0.35); border-radius:20px; color:rgba(255,160,80,0.9); font-family:'Biryani',sans-serif; font-size:11px; font-weight:700; padding:5px 14px; cursor:pointer; transition:background 0.2s; }
.conv-retry:hover { background:rgba(255,160,80,0.25); }

/* ═══════════════════════════════════════════════════════
   EQUATION
═══════════════════════════════════════════════════════ */
.eq-bar { background:rgba(0,0,0,0.22); border-radius:14px; padding:18px 16px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:16px 0; border:1px solid rgba(255,255,255,0.07); }
.eqp { text-align:center; }
.eqv { font-size:28px; font-weight:900; color:var(--sky); line-height:1; }
.eqv.res { color:#ffd700; }
.eql { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-dim); margin-top:4px; }
.eqop { font-size:22px; font-weight:900; color:rgba(255,255,255,0.28); margin-top:-8px; }

/* ═══════════════════════════════════════════════════════
   DIAG BUTTONS
═══════════════════════════════════════════════════════ */
.dbtns { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.dbtn { background:rgba(255,255,255,0.07); border:2px solid rgba(255,255,255,0.18); border-radius:14px; padding:18px 16px; font-family:'Biryani',sans-serif; font-size:14px; font-weight:800; color:rgba(255,255,255,0.65); cursor:pointer; transition:all 0.2s; text-align:center; }
.dbtn .di { font-size:24px; display:block; margin-bottom:8px; }
.dbtn:hover { background:rgba(255,255,255,0.12); }
.dbtn.sel-y { background:rgba(39,174,96,0.18); border-color:#27ae60; color:#4ade80; }
.dbtn.sel-n { background:rgba(231,76,60,0.18); border-color:#e74c3c; color:#f87171; }
.dbtn.sel-w { background:rgba(251,191,36,0.14); border-color:#f59e0b; color:#fbbf24; }

/* ═══════════════════════════════════════════════════════
   FOCUS OPTIONS
═══════════════════════════════════════════════════════ */
.fopts { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.fopt { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.13); border-radius:14px; padding:16px 18px; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:14px; }
.fopt:hover { background:rgba(255,255,255,0.11); }
.fopt.sel { background:rgba(74,194,200,0.14); border-color:var(--sky); }
.fopt-icon { font-size:24px; flex-shrink:0; }
.fopt-text h4 { font-size:14px; font-weight:800; color:white; margin-bottom:2px; }
.fopt-text p { font-size:12px; color:var(--text-dim); }

/* ═══════════════════════════════════════════════════════
   FUNNEL TABLE
═══════════════════════════════════════════════════════ */
.ftable { width:100%; border-collapse:collapse; margin-bottom:16px; }
.ftable th { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--sky); padding:8px 10px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.09); }
.ftable td { padding:10px; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.05); }
.ftable td:first-child { color:var(--text-mid); font-weight:600; }
.cbar-w { background:rgba(0,0,0,0.2); border-radius:4px; height:6px; width:100%; overflow:hidden; }
.cbar-f { height:100%; border-radius:4px; }
.above { background:linear-gradient(to right,#27ae60,#4ade80); }
.below { background:linear-gradient(to right,#e74c3c,#f87171); }
.sbadge { display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,0.2); border-radius:6px; padding:2px 7px; font-size:10px; font-weight:700; color:var(--text-dim); }
.sbadge.up { color:#4ade80; }
.sbadge.dn { color:#f87171; }

/* ═══════════════════════════════════════════════════════
   ACTIONS BUILDER
═══════════════════════════════════════════════════════ */
.acat { margin-bottom:16px; }
.acat-hdr { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--sky); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.aitem { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.05); border-radius:10px; padding:11px 14px; margin-bottom:8px; border:1px solid rgba(255,255,255,0.07); }
.aitem input[type="text"] { flex:1; background:none; border:none; font-family:'Biryani',sans-serif; font-size:14px; color:white; outline:none; }
.aitem input[type="text"]::placeholder { color:rgba(255,255,255,0.28); }
.a-rm { background:none; border:none; color:rgba(255,255,255,0.28); font-size:18px; cursor:pointer; }
.btn-add { background:none; border:1px dashed rgba(255,255,255,0.18); border-radius:10px; padding:10px; width:100%; font-family:'Biryani',sans-serif; font-size:12px; font-weight:700; color:rgba(255,255,255,0.38); cursor:pointer; transition:all 0.2s; text-align:center; }
.btn-add:hover { border-color:var(--sky); color:var(--sky); }
.aitem-prev { margin-bottom:8px; }
.prev-act-sel { width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:10px; padding:10px 14px; font-family:'Biryani',sans-serif; font-size:12px; font-weight:700; color:rgba(255,255,255,0.55); cursor:pointer; outline:none; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; }
.prev-act-sel option { background:#1a1a2e; color:white; font-weight:400; }
.prev-act-sel:hover { border-color:var(--sky); color:var(--sky); }

/* ═══════════════════════════════════════════════════════
   CHECKLIST
═══════════════════════════════════════════════════════ */
.citem { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.05); border-radius:10px; padding:12px 14px; margin-bottom:8px; border:1px solid rgba(255,255,255,0.07); cursor:pointer; transition:all 0.2s; }
.citem.ck { background:rgba(39,174,96,0.09); border-color:rgba(39,174,96,0.26); }
.cbox { width:22px; height:22px; border-radius:6px; border:2px solid rgba(255,255,255,0.28); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; transition:all 0.2s; }
.citem.ck .cbox { background:var(--success); border-color:var(--success); }
.ctxt { font-size:13px; color:rgba(255,255,255,0.8); flex:1; }
.citem.ck .ctxt { text-decoration:line-through; color:rgba(255,255,255,0.38); }
.ctag { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; background:rgba(74,194,200,0.18); color:var(--sky); border-radius:4px; padding:2px 6px; }

/* ═══════════════════════════════════════════════════════
   STEP TABS & PROGRESS
═══════════════════════════════════════════════════════ */
.stabs { display:flex; background:rgba(0,0,0,0.14); border-bottom:1px solid rgba(255,255,255,0.07); overflow-x:auto; scrollbar-width:none; }
.stabs::-webkit-scrollbar { display:none; }
.stab { flex:1; padding:12px 14px; font-family:'Biryani',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:rgba(255,255,255,0.38); background:none; border:none; cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; transition:all 0.2s; }
.stab.active { color:var(--sky); border-bottom-color:var(--sky); }
.stab.locked { opacity:0.3; cursor:not-allowed; }
.pbar-w { background:rgba(0,0,0,0.14); padding:14px 20px; display:flex; align-items:center; }
.pstep { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.pstep::after { content:''; position:absolute; top:13px; left:50%; right:-50%; height:2px; background:rgba(255,255,255,0.18); z-index:0; }
.pstep:last-child::after { display:none; }
.pcirc { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.13); border:2px solid rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:rgba(255,255,255,0.45); position:relative; z-index:1; transition:all 0.3s; }
.pstep.active .pcirc { background:var(--sky); border-color:var(--sky); color:white; box-shadow:0 0 14px rgba(74,194,200,0.45); }
.pstep.done .pcirc { background:var(--success); border-color:var(--success); color:white; }
.pstep.locked .pcirc { opacity:0.35; }
.plbl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:rgba(255,255,255,0.38); text-align:center; line-height:1.2; }
.pstep.active .plbl { color:var(--sky); }
.pstep.done .plbl { color:rgba(255,255,255,0.65); }

/* ═══════════════════════════════════════════════════════
   REFLECTION
═══════════════════════════════════════════════════════ */
.rgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.rbox { border-radius:12px; padding:14px; }
.rbox.pos { background:rgba(39,174,96,0.09); border:1px solid rgba(39,174,96,0.2); }
.rbox.imp { background:rgba(243,156,18,0.09); border:1px solid rgba(243,156,18,0.2); }
.rbox label { display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.rbox.pos label { color:#4ade80; }
.rbox.imp label { color:#fbbf24; }
.rbox textarea { width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); border-radius:8px; padding:10px; font-family:'Biryani',sans-serif; font-size:13px; color:white; resize:none; min-height:70px; }
.rbox textarea:focus { outline:none; border-color:var(--sky); }
.rbox textarea::placeholder { color:rgba(255,255,255,0.22); }

/* ═══════════════════════════════════════════════════════
   REVIEW TABLE
═══════════════════════════════════════════════════════ */
.rtable { width:100%; border-collapse:collapse; margin-bottom:16px; }
.rtable th { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--sky); padding:8px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.09); }
.rtable td { padding:11px 12px; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.05); }
.rtable .cm { color:var(--text-mid); font-weight:600; }
.rtable .cg { color:rgba(255,255,255,0.45); }
.rtable .ca input { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:7px 10px; font-family:'Biryani',sans-serif; font-size:14px; font-weight:700; color:white; width:78px; }
.rtable .ca input:focus { outline:none; border-color:var(--sky); }
.tick { color:#4ade80; font-size:17px; }
.cross { color:#f87171; font-size:17px; }

/* ═══════════════════════════════════════════════════════
   SUBMIT / BUTTONS
═══════════════════════════════════════════════════════ */
.srow { display:flex; gap:12px; margin-top:24px; margin-bottom:8px; }
.sbtn { flex:1; background:linear-gradient(135deg,var(--purple),var(--sky)); border:none; border-radius:50px; padding:16px; font-family:'Biryani',sans-serif; font-size:14px; font-weight:800; color:white; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 18px rgba(74,194,200,0.32); text-align:center; }
.sbtn:hover { opacity:0.9; transform:translateY(-1px); }
.sbtn:active { transform:translateY(0); }
.sbtn.sec { background:rgba(255,255,255,0.09); box-shadow:none; border:1px solid rgba(255,255,255,0.18); flex:0 0 auto; padding:16px 18px; }
.pivot-sec { background:rgba(243,156,18,0.09); border:1px solid rgba(243,156,18,0.28); border-radius:14px; padding:18px; margin:16px 0; }
.pivot-sec h4 { font-size:13px; font-weight:800; color:#fbbf24; text-transform:uppercase; margin-bottom:12px; }
.focus-res { background:linear-gradient(135deg,rgba(92,57,147,0.28),rgba(44,60,145,0.28)); border:1px solid rgba(74,194,200,0.38); border-radius:16px; padding:20px; text-align:center; margin:16px 0; }
.focus-res .frl { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--sky); margin-bottom:8px; }
.focus-res .fra { font-size:26px; font-weight:900; color:white; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.focus-res .frd { font-size:12px; color:var(--text-dim); }
.waived { display:inline-block; background:rgba(243,156,18,0.18); border:1px solid rgba(243,156,18,0.38); border-radius:50px; padding:4px 12px; font-size:10px; font-weight:800; color:#fbbf24; text-transform:uppercase; letter-spacing:0.5px; }

/* ═══════════════════════════════════════════════════════
   BOTTOM NAV
═══════════════════════════════════════════════════════ */
.bnav { position:fixed; bottom:0; left:0; right:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(20px); border-top:1px solid rgba(255,255,255,0.09); display:flex; padding:8px 0; z-index:90; }
.ni { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; cursor:pointer; background:none; border:none; font-family:'Biryani',sans-serif; }
.ni-icon { font-size:20px; }
.ni-icon svg { width:38px; height:38px; overflow:visible; display:block; }
.ni-lbl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:rgba(255,255,255,0.55); }
.ni.active .ni-lbl { color:var(--sky); font-weight:800; }
.ni { position:relative; }
.ni-badge { position:absolute; top:4px; right:calc(50% - 18px); min-width:16px; height:16px; padding:0 4px; background:#f87171; border-radius:8px; font-size:9px; font-weight:800; color:#fff; display:none; align-items:center; justify-content:center; line-height:1; }

/* ═══════════════════════════════════════════════════════
   STEP CONTENT
═══════════════════════════════════════════════════════ */
.sc { display:none; }
.sc.active { display:block; animation:fadeIn 0.3s ease both; }

/* ═══════════════════════════════════════════════════════
   CHARTS
═══════════════════════════════════════════════════════ */
.chart-wrap { background:rgba(0,0,0,0.2); border-radius:16px; padding:20px; margin-bottom:16px; border:1px solid rgba(255,255,255,0.07); }
.chart-t { font-size:13px; font-weight:800; color:white; margin-bottom:4px; }
.chart-s { font-size:11px; color:var(--text-dim); margin-bottom:16px; }
canvas { display:block; width:100% !important; }

/* ═══════════════════════════════════════════════════════
   TEAM LEADER STYLES
═══════════════════════════════════════════════════════ */
#tlLanding { min-height:calc(100vh - 64px); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:32px 24px; }
.tl-greet { font-size:13px; color:var(--sky); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; text-align:center; }
.tl-name { font-size:28px; font-weight:900; color:white; text-align:center; margin-bottom:6px; }
.tl-sub { font-size:13px; color:var(--text-dim); text-align:center; margin-bottom:40px; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; max-width:460px; }
.choice-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.13); border-radius:20px; padding:28px 18px; cursor:pointer; transition:all 0.2s; display:flex; flex-direction:column; align-items:center; gap:12px; font-family:'Biryani',sans-serif; text-align:center; }
.choice-btn:hover { background:rgba(255,255,255,0.11); border-color:var(--sky); transform:translateY(-2px); }
.choice-btn:active { transform:translateY(0); }
.choice-btn.hi { border-color:rgba(74,194,200,0.38); background:rgba(74,194,200,0.09); }
.choice-icon { font-size:36px; }
.choice-icon svg { width:48px; height:48px; overflow:visible; display:block; margin:0 auto; }
.choice-title { font-size:15px; font-weight:900; color:white; }
.choice-desc { font-size:11px; color:var(--text-dim); line-height:1.4; }
.tl-nav { background:rgba(0,0,0,0.14); border-bottom:1px solid rgba(255,255,255,0.07); display:flex; }
.tl-nb { flex:1; padding:12px 14px; font-family:'Biryani',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:rgba(255,255,255,0.38); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s; }
.tl-nb.active { color:var(--sky); border-bottom-color:var(--sky); }

/* Team stats bar */
.tsbar { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.tsc { background:rgba(0,0,0,0.2); border-radius:12px; padding:14px 10px; text-align:center; border:1px solid rgba(255,255,255,0.07); }
.tsc-v { font-size:22px; font-weight:900; color:var(--sky); line-height:1; margin-bottom:4px; }
.tsc-l { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-dim); }

/* FR cards */
.fr-card { background:var(--card); border:1px solid var(--card-border); border-radius:16px; margin-bottom:12px; overflow:hidden; transition:all 0.2s; }
.fr-hdr { padding:16px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; }
.fr-hdr:hover { background:rgba(255,255,255,0.03); }
.fr-av { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--navy)); border:2px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; flex-shrink:0; }
.fr-inf { flex:1; }
.fr-n { font-size:15px; font-weight:800; color:white; margin-bottom:3px; }
.fr-m { font-size:11px; color:var(--text-dim); }
.fr-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:5px; }
.sdot { display:inline-flex; align-items:center; gap:4px; border-radius:20px; padding:3px 9px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; }
.sdot.sub { background:rgba(74,194,200,0.18); color:var(--sky); border:1px solid rgba(74,194,200,0.28); }
.sdot.pend { background:rgba(243,156,18,0.14); color:#fbbf24; border:1px solid rgba(243,156,18,0.28); }
.sdot.done { background:rgba(39,174,96,0.14); color:#4ade80; border:1px solid rgba(39,174,96,0.28); }
.fr-chev { color:rgba(255,255,255,0.28); font-size:16px; transition:transform 0.2s; }
.fr-card.exp .fr-chev { transform:rotate(90deg); }
.fr-body { display:none; border-top:1px solid rgba(255,255,255,0.07); }
.fr-card.exp .fr-body { display:block; }
.fr-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,0.07); }
.fr-tab { flex:1; padding:10px 8px; font-family:'Biryani',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:rgba(255,255,255,0.38); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s; }
.fr-tab.active { color:var(--sky); border-bottom-color:var(--sky); }
.fr-tc { padding:18px; display:none; }
.fr-tc.active { display:block; }
.gsr { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:13px; }
.gsr:last-child { border-bottom:none; }
.gsr-l { color:var(--text-dim); }
.gsr-v { font-weight:800; color:white; }
.focus-badge { display:inline-block; background:rgba(74,194,200,0.14); border:1px solid rgba(74,194,200,0.28); border-radius:8px; padding:4px 11px; font-size:11px; font-weight:800; color:var(--sky); }

/* TL notes */
.tl-nota { width:100%; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.11); border-radius:12px; padding:14px; font-family:'Biryani',sans-serif; font-size:14px; color:white; resize:none; min-height:90px; line-height:1.6; }
.tl-nota:focus { outline:none; border-color:var(--sky); }
.tl-nota::placeholder { color:rgba(255,255,255,0.22); }
.tl-ap { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.04); border-radius:10px; padding:11px 14px; margin-bottom:8px; border:1px solid rgba(255,255,255,0.07); }
.tl-apck { width:22px; height:22px; border-radius:6px; border:2px solid rgba(255,255,255,0.28); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; transition:all 0.2s; }
.tl-apck.dn { background:var(--success); border-color:var(--success); }
.tl-api { flex:1; background:none; border:none; font-family:'Biryani',sans-serif; font-size:13px; color:white; outline:none; }
.tl-api::placeholder { color:rgba(255,255,255,0.28); }
.tl-api.dn { text-decoration:line-through; color:rgba(255,255,255,0.38); }
.tl-aprm { background:none; border:none; color:rgba(255,255,255,0.28); font-size:16px; cursor:pointer; }
.btn-savenote { background:rgba(74,194,200,0.18); border:1px solid rgba(74,194,200,0.35); border-radius:50px; padding:10px 22px; font-family:'Biryani',sans-serif; font-size:12px; font-weight:800; color:var(--sky); cursor:pointer; transition:all 0.2s; margin-top:12px; }
.btn-savenote:hover { background:rgba(74,194,200,0.28); }
.no-sub { background:rgba(0,0,0,0.14); border-radius:12px; padding:20px; text-align:center; color:var(--text-dim); font-size:13px; }
.no-sub .nsi { font-size:28px; margin-bottom:8px; }

/* Mid-week compare boxes */
.mwgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.mwbox { background:rgba(0,0,0,0.2); border-radius:10px; padding:12px 8px; text-align:center; border:1px solid rgba(255,255,255,0.07); }
.mwbox .mwl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-dim); margin-bottom:6px; }
.mwbox .mwv { font-size:18px; font-weight:900; color:var(--sky); }
.mwbox .mwg { font-size:10px; color:var(--text-dim); margin-top:2px; }
.mwbox.on { border-color:rgba(39,174,96,0.38); }
.mwbox.off { border-color:rgba(231,76,60,0.28); }
.mwbox.on .mwv { color:#4ade80; }
.mwbox.off .mwv { color:#f87171; }

/* Skill focus grid */
.form-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; align-items: end; }
@media(max-width:700px){ .form-grid-3 { grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .form-grid-3 { grid-template-columns:1fr; } }
/* Skill focus read-only display tiles */
.sf-ro { background:rgba(0,0,0,0.18); border-radius:10px; padding:12px 14px; }
.sf-ro-lbl { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); margin-bottom:4px; }
.sf-ro-val { font-size:15px; font-weight:700; color:white; min-height:20px; }
/* Outcome toggle buttons */
.outcome-btns { display:flex; gap:10px; }
.outcome-btn { flex:1; padding:12px 8px; border-radius:12px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.07); font-family:'Biryani',sans-serif; font-size:12px; font-weight:800; color:rgba(255,255,255,0.65); cursor:pointer; transition:all 0.2s; text-align:center; }
.outcome-btn:hover { background:rgba(255,255,255,0.13); }
.outcome-btn.sel-improved { background:rgba(39,174,96,0.22); border-color:rgba(39,174,96,0.5); color:#4ade80; }
.outcome-btn.sel-same { background:rgba(243,156,18,0.22); border-color:rgba(243,156,18,0.5); color:#fbbf24; }
.outcome-btn.sel-declined { background:rgba(231,76,60,0.22); border-color:rgba(231,76,60,0.5); color:#f87171; }
/* 13-week progress tracker tiles */
.ph-tracker { display:flex; flex-wrap:wrap; gap:7px; }
.ph-tile { flex:0 0 calc(20% - 6px); min-width:48px; border-radius:10px; padding:10px 6px; text-align:center; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); overflow:hidden; }
.ph-tile.ph-improved { background:rgba(39,174,96,0.14); border-color:rgba(39,174,96,0.35); }
.ph-tile.ph-same { background:rgba(243,156,18,0.14); border-color:rgba(243,156,18,0.35); }
.ph-tile.ph-declined { background:rgba(231,76,60,0.14); border-color:rgba(231,76,60,0.35); }
.ph-wk { font-size:8px; font-weight:700; text-transform:uppercase; color:var(--text-dim); letter-spacing:0.3px; margin-bottom:3px; }
.ph-area { font-size:8px; font-weight:600; color:rgba(255,255,255,0.6); margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-badge { font-size:9px; font-weight:800; }
.ph-tile.ph-improved .ph-badge { color:#4ade80; }
.ph-tile.ph-same .ph-badge { color:#fbbf24; }
.ph-tile.ph-declined .ph-badge { color:#f87171; }
.ph-tile.ph-empty .ph-badge { color:var(--text-dim); }

/* Pagination compare for progress */
.pcbox { background:rgba(0,0,0,0.2); border-radius:12px; padding:14px; border:1px solid rgba(255,255,255,0.07); }
.pclbl { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); margin-bottom:6px; }
.pcvs { display:flex; align-items:baseline; gap:6px; }
.pca { font-size:22px; font-weight:900; color:var(--sky); }
.pcg { font-size:12px; color:var(--text-dim); }
.pcgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }

/* ═══════════════════════════════════════════════════════
   OVERVIEW MANAGER STYLES
═══════════════════════════════════════════════════════ */
.om-nav { background:rgba(0,0,0,0.14); border-bottom:1px solid rgba(255,255,255,0.07); display:flex; overflow-x:auto; scrollbar-width:none; }
.om-nav::-webkit-scrollbar { display:none; }
.om-nb { flex:1; padding:12px 14px; font-family:'Biryani',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:rgba(255,255,255,0.38); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s; white-space:nowrap; }
.om-nb.active { color:var(--sky); border-bottom-color:var(--sky); }
.tl-row { background:var(--card); border:1px solid var(--card-border); border-radius:16px; margin-bottom:12px; overflow:hidden; }
.tl-row-body { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tl-row-hdr { padding:16px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; }
.tl-row-hdr:hover { background:rgba(255,255,255,0.03); }
.tl-row-body { display:none; border-top:1px solid rgba(255,255,255,0.07); }
.tl-row.exp .tl-row-body { display:block; }
.tl-row.exp .fr-chev { transform:rotate(90deg); }

/* ═══════════════════════════════════════════════════════
   COMPANY MANAGER STYLES
═══════════════════════════════════════════════════════ */
.loc-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-bottom:24px; }
.loc-card { background:var(--card); border:1px solid var(--card-border); border-radius:16px; overflow:hidden; cursor:pointer; transition:all 0.2s; }
.loc-card:hover { transform:translateY(-3px); border-color:rgba(74,194,200,0.4); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.loc-card-hdr { padding:18px; background:rgba(0,0,0,0.18); }
.loc-card-name { font-size:16px; font-weight:900; color:white; margin-bottom:4px; }
.loc-card-meta { font-size:11px; color:var(--text-dim); }
.loc-card-stats { padding:16px 18px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lcs { text-align:center; }
.lcs-v { font-size:20px; font-weight:900; color:var(--sky); line-height:1; margin-bottom:3px; }
.lcs-l { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-dim); }
.loc-selected-indicator { display:none; position:absolute; top:12px; right:12px; width:10px; height:10px; border-radius:50%; background:var(--sky); }
.ot-fill-bar { display:flex; align-items:center; gap:8px; background:rgba(74,194,200,0.07); border:1px solid rgba(74,194,200,0.22); border-radius:10px; padding:11px 14px; margin-bottom:14px; flex-wrap:wrap; }
.ot-fill-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--sky); white-space:nowrap; }
.ot-fill-date { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:white; border-radius:8px; padding:6px 8px; font-size:12px; font-family:'Biryani',sans-serif; width:118px; flex-shrink:0; }
.ot-fill-date::-webkit-calendar-picker-indicator { filter:invert(1) opacity(0.55); cursor:pointer; }
.ot-fill-date:focus { outline:none; border-color:var(--sky); }
.ot-fill-to { font-size:11px; color:var(--text-dim); font-weight:700; white-space:nowrap; }
.ot-fill-btn { background:rgba(74,194,200,0.14); border:1px solid rgba(74,194,200,0.4); color:var(--sky); border-radius:8px; padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background 0.15s; margin-left:auto; }
.ot-fill-btn:hover { background:rgba(74,194,200,0.26); }
.ot-fill-preview { font-size:11px; color:var(--text-dim); margin-bottom:14px; padding:0 2px; min-height:16px; }
.ifield[readonly] { opacity:0.7; cursor:default; pointer-events:none; border-color:rgba(255,255,255,0.08); }
input[readonly][type=number]::-webkit-inner-spin-button,
input[readonly][type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[readonly][type=number] { -moz-appearance:textfield; appearance:textfield; }
.loc-detail { background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:24px; margin-bottom:16px; }
.loc-detail-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.loc-detail-hdr h2 { font-size:20px; font-weight:900; color:white; }
.cmp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmp-table { width:100%; border-collapse:collapse; min-width:600px; }
.cmp-table th { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--sky); padding:10px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.09); }
.cmp-table td { padding:12px; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.05); }
.cmp-table tr:last-child td { border-bottom:none; }
.cmp-table .cmp-loc { font-weight:800; color:white; }
.cmp-table .cmp-val { font-weight:700; color:var(--sky); font-family:'Biryani',sans-serif; }
.cmp-table .cmp-std { color:rgba(255,255,255,0.45); }
.bar-inline-w { background:rgba(0,0,0,0.25); border-radius:4px; height:6px; overflow:hidden; margin-top:6px; }
.bar-inline-f { height:100%; border-radius:4px; background:linear-gradient(to right,var(--sky),var(--teal)); }

/* ═══════════════════════════════════════════════════════
   COMING SOON
═══════════════════════════════════════════════════════ */
.cs-wrap { text-align:center; padding:60px 24px; }
.cs-icon { font-size:56px; margin-bottom:20px; }
.cs-wrap h2 { font-size:24px; font-weight:900; color:white; margin-bottom:8px; }
.cs-wrap p { font-size:14px; color:var(--text-dim); margin-bottom:32px; }

/* ═══════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════ */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); background:rgba(0,0,0,0.88); backdrop-filter:blur(20px); border:1px solid rgba(74,194,200,0.4); color:white; border-radius:50px; padding:14px 24px; font-family:'Biryani',sans-serif; font-size:13px; font-weight:700; z-index:9999; transition:transform 0.3s ease; white-space:nowrap; }
.toast.show { transform:translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════ */
@keyframes fadeDown { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes om-spin { to { transform: rotate(360deg); } }
.om-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(74,194,200,0.18);
  border-top-color: #4ac2c8;
  border-radius: 50%;
  animation: om-spin 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media(max-width:520px) {
  .choice-grid { grid-template-columns:1fr 1fr; }
  .tsbar { grid-template-columns:repeat(2,1fr); }
  .rgrid { grid-template-columns:1fr; }
  .dbtns { grid-template-columns:1fr; }
  .mwgrid { grid-template-columns:1fr 1fr; }
  .loc-cards { grid-template-columns:1fr; }
  .m-row.five { grid-template-columns:repeat(3,1fr); }
  .irow.three { grid-template-columns:1fr 1fr; }
}
.hidden { display:none !important; }

/* ═══════════════════════════════════════════════════════
   USER PICKER
═══════════════════════════════════════════════════════ */
.upick-group { margin-bottom:20px; }
.upick-label { font-size:10px; font-weight:700; color:var(--sky); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px; display:block; }
.upick-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ucard {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.07); border:1.5px solid rgba(255,255,255,0.12);
  border-radius:12px; padding:10px 12px; cursor:pointer; transition:all 0.18s; text-align:left;
}
.ucard:hover { background:rgba(255,255,255,0.13); border-color:rgba(74,194,200,0.4); }
.ucard.sel { background:rgba(74,194,200,0.18); border-color:var(--sky); box-shadow:0 0 0 2px rgba(74,194,200,0.3); }
.ucard-ini {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--sky),var(--navy));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; color:white;
}
.ucard-info { flex:1; min-width:0; }
.ucard-name { font-size:12px; font-weight:700; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ucard-role { font-size:10px; color:var(--text-dim); margin-top:1px; }

/* ─── Entry Modal ─────────────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.72); z-index:1000; display:flex; align-items:flex-end; justify-content:center; }
.modal-overlay.hidden { display:none !important; }
.modal-box { background:#161628; border:1px solid rgba(255,255,255,0.12); border-radius:20px 20px 0 0; padding:28px 20px 36px; width:100%; max-width:480px; max-height:88vh; overflow-y:auto; }
.modal-title { font-size:18px; font-weight:800; color:#fff; margin-bottom:6px; }
.modal-sub { font-size:12px; color:var(--text-dim); margin-bottom:22px; line-height:1.5; }
.modal-sect { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-mid); margin:20px 0 6px; }
.modal-help { font-size:11px; color:var(--text-dim); margin-bottom:14px; }
.modal-err { color:#f87171; font-size:12px; margin:10px 0 4px; padding:8px 12px; background:rgba(248,113,113,0.1); border-radius:8px; }
.modal-actions { display:flex; gap:10px; margin-top:22px; }
.modal-funnel-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.modal-funnel-lbl { flex:1; font-size:12px; color:var(--text-mid); font-weight:600; line-height:1.4; }
.modal-funnel-inp { width:64px; padding:8px; border-radius:10px; border:1px solid var(--input-border); background:var(--input-bg); color:#fff; font-family:'Biryani',sans-serif; font-size:15px; font-weight:700; text-align:center; }
.modal-funnel-inp:focus { outline:none; border-color:var(--sky); }
.modal-funnel-pct { font-size:13px; color:var(--text-dim); width:14px; }