@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

html,
body,
input,
textarea,
select,
button{
    font-family:'Open Sans',sans-serif;
}
/* ── RESET & TOKENS ── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --blue:#1D6EFF;--blue-d:#1456CC;--blue-xl:#EAF1FF;--blue-l:#D0E2FF;
  --ink:#0F172A;--ink2:#334155;--ink3:#64748B;--ink4:#94A3B8;
  --bg:#F8FAFC;--bg2:#F1F5F9;--card:#FFFFFF;
  --border:#E2E8F0;--border2:#CBD5E1;
  --green:#059669;--gbg:#ECFDF5;--gborder:#A7F3D0;
  --red:#DC2626;--rbg:#FEF2F2;--rborder:#FECACA;
  --amber:#D97706;--abg:#FFFBEB;--aborder:#FDE68A;
  --r:12px;--r2:8px;--r3:16px;
  --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh2:0 4px 16px rgba(29,110,255,.12),0 2px 6px rgba(0,0,0,.06);
  --sh3:0 8px 32px rgba(29,110,255,.16);
}
html,body{height:100%;font-family:"Plus Jakarta Sans",sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;}

/* ── LOADING ── */
#splash{position:fixed;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:9999;}
.splash-icon{width:64px;height:64px;border-radius:18px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 8px 24px rgba(29,110,255,.35);}
.splash-spin{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;}
.splash-txt{font-size:13px;color:var(--ink3);font-weight:500;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* ── PAGES ── */
.page{display:flex;min-height:100dvh;}
.page.active{display:flex;flex-direction:column;animation:fadeIn .2s ease;}

/* ── LOGIN ── */
#pg-login{
  background:linear-gradient(180deg,#EAF1FF 0%,#fff 60%);
  align-items:center;justify-content:center;padding:20px;
  position:relative;overflow:hidden;
}
#pg-login::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(29,110,255,.1),transparent 70%);
  top:-100px;right:-80px;pointer-events:none;}
.login-wrap{width:100%;max-width:380px;}
.login-brand{text-align:center;margin-bottom:28px;animation:fadeUp .5s ease both;}
.login-icon{width:68px;height:68px;border-radius:20px;background:var(--blue);margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-size:30px;
  box-shadow:0 10px 30px rgba(29,110,255,.35);}
.login-brand h1{font-size:24px;font-weight:800;color:var(--ink);}
.login-brand p{font-size:13px;color:var(--ink3);margin-top:4px;font-weight:500;}
.login-card{background:var(--card);border-radius:20px;padding:24px;box-shadow:var(--sh3);border:1px solid var(--border);animation:fadeUp .5s ease .1s both;}
.login-card h2{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:20px;}
.fl{margin-bottom:14px;}
.fl label{font-size:12px;font-weight:700;color:var(--ink2);display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;}
.fl select,.fl input{width:100%;padding:12px 14px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r2);
  color:var(--ink);font-family:inherit;font-size:15px;outline:none;transition:border .15s,box-shadow .15s;-webkit-appearance:none;}
.fl select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231D6EFF' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;}
.fl select:focus,.fl input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,110,255,.12);background:#fff;}
.fl select option{background:#fff;color:var(--ink);}
.btn-lg{width:100%;padding:14px;background:var(--blue);color:#fff;font-family:inherit;font-size:15px;font-weight:700;
  border:none;border-radius:var(--r2);cursor:pointer;box-shadow:0 4px 14px rgba(29,110,255,.35);
  transition:transform .15s,box-shadow .15s;}
.btn-lg:active{transform:scale(.98);}
.login-hint{font-size:12px;color:var(--ink4);text-align:center;margin-top:12px;}

a{
    text-decoration:none;
}
/* ── APP SHELL ── */
#pg-app{flex-direction:column;padding-bottom:72px;}

/* Top bar */
.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 16px;height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.topbar-brand{font-size:16px;font-weight:800;color:var(--ink);}
.topbar-brand span{color:var(--blue);}
.topbar-right{display:flex;align-items:center;gap:8px;}
.topbar-user{
  font-size:13px;font-weight:700;color:var(--blue);
  background:var(--blue-xl);padding:5px 12px;border-radius:100px;
}
.btn-icon{
  width:36px;height:36px;border-radius:10px;background:var(--bg2);
  border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;transition:all .15s;
}
.btn-icon:active{background:var(--blue-xl);border-color:var(--blue);}

/* Content area */
.main{padding:16px;max-width:600px;margin:0 auto;width:100%;}

/* Bottom nav */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  display:flex;align-items:stretch;height:72px;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.bnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;cursor:pointer;border:none;background:none;
  font-family:inherit;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.bnav-item .bni{font-size:20px;line-height:1;transition:transform .15s;}
.bnav-item .bnl{font-size:10px;font-weight:600;color:var(--ink4);transition:color .15s;}
.bnav-item.active .bni{transform:scale(1.1);}
.bnav-item.active .bnl{color:var(--blue);}
.bnav-dot{width:4px;height:4px;border-radius:50%;background:var(--blue);position:absolute;bottom:6px;display:none;}
.bnav-item.active .bnav-dot{display:block;}

/* Modules */
.mod{display:none;}
.mod.active{display:block;animation:fadeUp .2s ease;}

/* ── COMPONENTS ── */
/* Section header */
.sec-hd{margin-bottom:16px;}
.sec-eyebrow{font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;}
.sec-title{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.3px;}
.sec-sub{font-size:13px;color:var(--ink3);margin-top:3px;font-weight:500;}

.member-card-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

.member-card-link > div{
    transition:.2s;
    cursor:pointer;
}

.member-card-link:hover > div{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(37,99,235,.12);
    border-color:#93c5fd;
}

/* Card */
.card{background:var(--card);border-radius:var(--r3);border:1.5px solid var(--border);box-shadow:var(--sh);overflow:hidden;}
.card+.card{margin-top:12px;}
.card-head{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.card-title{font-size:14px;font-weight:700;color:var(--ink);}
.card-body{padding:16px;}

/* KPI grid */
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;}
.kpi-card{background:var(--card);border-radius:var(--r2);border:1.5px solid var(--border);padding:14px;box-shadow:var(--sh);}
.kpi-card .kv{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.5px;margin-top:8px;}
.kpi-card .kl{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;}
.kpi-card .ki{font-size:20px;margin-bottom:4px;}
.kpi-card.blue{border-top:3px solid var(--blue);}
.kpi-card.green{border-top:3px solid var(--green);}
.kpi-card.red{border-top:3px solid var(--red);}
.kpi-card.amber{border-top:3px solid var(--amber);}

/* Progress bar */
.prog-wrap{margin-bottom:12px;}
.prog-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.prog-name{font-size:13px;font-weight:600;color:var(--ink2);}
.prog-pct{font-size:13px;font-weight:800;font-family:"JetBrains Mono",monospace;}
.prog-bar{height:8px;background:var(--bg2);border-radius:4px;overflow:hidden;}
.prog-fill{height:100%;border-radius:4px;transition:width 1s ease;}

/* Status pill */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;}
.pill.green{background:var(--gbg);color:var(--green);}
.pill.red{background:var(--rbg);color:var(--red);}
.pill.amber{background:var(--abg);color:var(--amber);}
.pill.blue{background:var(--blue-xl);color:var(--blue);}

/* Form */
.form-row{margin-bottom:14px;}
.form-row label{font-size:12px;font-weight:700;color:var(--ink2);display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;}
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:12px 14px;background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--r2);color:var(--ink);font-family:inherit;font-size:15px;
  outline:none;transition:border .15s,box-shadow .15s;-webkit-appearance:none;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,110,255,.1);background:#fff;
}
.form-row textarea{resize:vertical;min-height:80px;line-height:1.5;}
.form-row input[readonly]{background:var(--blue-xl);color:var(--blue);font-family:"JetBrains Mono",monospace;font-size:13px;border-color:var(--blue-l);}
.form-row select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231D6EFF' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;}
.form-row select option{background:#fff;}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.form-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}

/* Buttons */
.btn{padding:12px 20px;border-radius:var(--r2);border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;transition:all .15s;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 3px 12px rgba(29,110,255,.3);}
.btn-secondary{background:var(--bg2);color:var(--ink2);border:1.5px solid var(--border2);}
.btn-secondary:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-xl);}
.btn-danger{background:var(--rbg);color:var(--red);border:1.5px solid var(--rborder);}
.btn-full{width:100%;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}

/* Team/division selector */
.team-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;scrollbar-width:none;}
.team-tabs::-webkit-scrollbar{display:none;}
.team-tab{flex-shrink:0;padding:7px 14px;border-radius:100px;font-size:13px;font-weight:700;
  border:1.5px solid var(--border);background:var(--card);color:var(--ink3);cursor:pointer;
  transition:all .15s;white-space:nowrap;}
.team-tab.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 3px 10px rgba(29,110,255,.3);}

/* Metric chips */
.metric-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;}
.metric-chip{flex:1;min-width:80px;background:var(--blue-xl);border:1.5px solid var(--blue-l);
  border-radius:var(--r2);padding:10px 12px;}
.mc-label{font-size:10px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;}
.mc-val{font-size:17px;font-weight:800;color:var(--blue);letter-spacing:-.3px;}

/* Notification banner */
.banner{padding:12px 14px;border-radius:var(--r2);font-size:13px;font-weight:600;margin-bottom:14px;display:flex;gap:8px;align-items:flex-start;}
.banner.warn{background:var(--abg);border:1px solid var(--aborder);color:var(--amber);}
.banner.info{background:var(--blue-xl);border:1px solid var(--blue-l);color:var(--blue);}
.banner.danger{background:var(--rbg);border:1px solid var(--rborder);color:var(--red);}
.banner.success{background:var(--gbg);border:1px solid var(--gborder);color:var(--green);}

/* Modal overlay */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:500;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease;}
.modal-sheet{background:var(--card);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:92dvh;overflow-y:auto;padding:20px;animation:slideUp .25s ease;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal-drag{width:40px;height:4px;background:var(--border2);border-radius:2px;margin:0 auto 16px;}
.modal-title{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:4px;}
.modal-sub{font-size:13px;color:var(--ink3);margin-bottom:20px;font-weight:500;}

/* Report output */
.report-out{background:var(--blue-xl);border:1.5px solid var(--blue-l);border-radius:var(--r3);padding:16px;margin-top:14px;display:none;}
.report-out.show{display:block;animation:fadeUp .3s ease;}
.report-sec{margin-bottom:12px;}
.report-sec-title{font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;}
.report-sec-body{font-size:12px;color:var(--ink2);line-height:1.7;font-family:"JetBrains Mono",monospace;background:#fff;padding:10px;border-radius:8px;border:1px solid var(--border);}

/* Toast */
.toast-container{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;gap:8px;min-width:280px;max-width:calc(100vw - 32px);}
.toast{background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:fadeUp .2s ease;}
.toast.success{background:var(--green);}
.toast.error{background:var(--red);}

/* List row */
.list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px solid var(--border);}
.list-row:last-child{border-bottom:none;}
.lr-left{flex:1;min-width:0;}
.lr-name{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.lr-sub{font-size:12px;color:var(--ink3);font-weight:500;}
.lr-right{text-align:right;flex-shrink:0;}
.lr-val{font-size:15px;font-weight:800;color:var(--blue);font-family:"JetBrains Mono",monospace;}
.lr-time{font-size:11px;color:var(--ink4);margin-top:2px;}

/* Big score card */
.score-hero{
  background:linear-gradient(135deg,var(--blue),var(--blue-d));
  border-radius:var(--r3);padding:20px;color:#fff;margin-bottom:16px;
  box-shadow:0 8px 28px rgba(29,110,255,.35);
}
.sh-name{font-size:22px;font-weight:800;margin-bottom:4px;}
.sh-role{font-size:13px;opacity:.75;font-weight:500;margin-bottom:18px;}
.sh-pct{font-size:52px;font-weight:800;letter-spacing:-2px;line-height:1;}
.sh-pct-sub{font-size:13px;opacity:.75;margin-bottom:14px;}
.sh-bar{height:10px;background:rgba(255,255,255,.25);border-radius:5px;overflow:hidden;margin-bottom:16px;}
.sh-bar-fill{height:100%;background:#fff;border-radius:5px;transition:width 1s ease;}
.sh-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.sh-stat{background:rgba(255,255,255,.15);border-radius:8px;padding:10px;text-align:center;}
.sh-stat .v{font-size:15px;font-weight:800;}
.sh-stat .l{font-size:10px;opacity:.7;text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}

/* Reward/punishment cards */
.rp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.rp-card{border-radius:var(--r2);padding:14px;}
.rp-card.reward{background:var(--gbg);border:1.5px solid var(--gborder);}
.rp-card.punish{background:var(--rbg);border:1.5px solid var(--rborder);}
.rp-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.rp-card.reward .rp-title{color:var(--green);}
.rp-card.punish .rp-title{color:var(--red);}
.rp-text{font-size:12px;font-weight:600;color:var(--ink);line-height:1.4;}

/* Admin tabs */
.admin-tabs{display:flex;gap:0;background:var(--bg2);border-radius:var(--r2);padding:3px;margin-bottom:16px;}
.admin-tab{flex:1;padding:9px 8px;border-radius:7px;font-size:12px;font-weight:700;text-align:center;cursor:pointer;border:none;background:none;color:var(--ink3);transition:all .15s;font-family:inherit;}
.admin-tab.active{background:var(--card);color:var(--blue);box-shadow:var(--sh);}

/* Member card admin */
.member-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh);margin-bottom:10px;}
.mc-header{padding:14px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);}
.mc-avatar{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mc-info{flex:1;}
.mc-name{font-size:15px;font-weight:800;color:var(--ink);}
.mc-role{font-size:12px;color:var(--ink3);margin-top:2px;font-weight:500;}
.mc-pin{font-family:"JetBrains Mono",monospace;font-size:18px;font-weight:700;color:var(--blue);background:var(--blue-xl);padding:3px 10px;border-radius:6px;}
.mc-body{padding:14px 16px;}
.mc-score-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.mc-score-label{font-size:12px;color:var(--ink3);font-weight:600;}
.mc-score-pct{font-size:14px;font-weight:800;margin-left:auto;}

/* Table */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{padding:9px 10px;text-align:left;font-size:11px;font-weight:700;color:#fff;background:var(--blue);text-transform:uppercase;letter-spacing:.06em;}
.tbl td{padding:10px;border-bottom:1px solid var(--border);color:var(--ink2);font-weight:500;vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:nth-child(even) td{background:var(--bg);}
.tbl-wrap{overflow-x:auto;border-radius:var(--r2);border:1.5px solid var(--border);box-shadow:var(--sh);}

/* History cards */
.hist-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r2);padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh);}
.hist-card:active{border-color:var(--blue);background:var(--blue-xl);}
.hc-icon{width:40px;height:40px;border-radius:10px;background:var(--blue-xl);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.hc-info{flex:1;min-width:0;}
.hc-team{font-size:13px;font-weight:700;color:var(--ink);}
.hc-brand{font-size:11px;color:var(--ink3);margin-top:2px;font-weight:500;}
.hc-right{text-align:right;flex-shrink:0;}
.hc-val{font-size:15px;font-weight:800;color:var(--blue);font-family:"JetBrains Mono",monospace;}
.hc-date{font-size:11px;color:var(--ink4);margin-top:2px;}

/* Month nav */
.month-nav{display:flex;align-items:center;gap:0;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:16px;box-shadow:var(--sh);}
.mnav-btn{padding:10px 16px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink3);transition:all .15s;}
.mnav-btn:active{background:var(--blue-xl);color:var(--blue);}
.mnav-label{flex:1;text-align:center;font-size:14px;font-weight:700;color:var(--ink);}
.mnav-sub{font-size:11px;color:var(--ink3);font-weight:500;}

/* Brand selector */
.brand-sel{display:flex;gap:6px;margin-bottom:14px;}
.brand-btn{flex:1;padding:9px 6px;border-radius:var(--r2);border:1.5px solid var(--border);background:var(--card);font-size:12px;font-weight:700;cursor:pointer;text-align:center;color:var(--ink3);transition:all .15s;}
.brand-btn.active{background:var(--blue-xl);border-color:var(--blue);color:var(--blue);}

/* Entry item in report list */
.entry-item{padding:12px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.entry-item:last-child{border-bottom:none;}
.entry-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0;}
.entry-label{font-size:13px;color:var(--ink2);font-weight:500;flex:1;}
.entry-val{font-size:13px;font-weight:700;color:var(--ink);font-family:"JetBrains Mono",monospace;}

/* Responsive */
@media(min-width:600px){
  .main{padding:20px;}
  .kpi-grid{grid-template-columns:repeat(4,1fr);}
  .modal-overlay{align-items:center;}
  .modal-sheet{border-radius:20px;max-height:85dvh;margin:16px;}
}

/* ── DASHBOARD BRAND CARDS ── */
.brand-kpi-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r3);overflow:hidden;margin-bottom:12px;box-shadow:var(--sh);}
.bkc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;}
.bkc-brand{display:flex;align-items:center;gap:10px;}
.bkc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.bkc-name{font-size:15px;font-weight:800;color:var(--ink);}
.bkc-ratio{font-size:22px;font-weight:800;letter-spacing:-.5px;}
.bkc-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:1px solid var(--border);}
.bkc-metric{padding:12px 14px;border-right:1px solid var(--border);}
.bkc-metric:last-child{border-right:none;}
.bkc-metric .bm-lbl{font-size:10px;font-weight:700;color:var(--ink4);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.bkc-metric .bm-val{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.3px;}
.bkc-metric .bm-sub{font-size:10px;font-weight:500;margin-top:2px;}
.bkc-progress{padding:0 16px 14px;}
.bkc-prog-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.bkc-prog-bar{height:8px;background:var(--bg2);border-radius:4px;overflow:hidden;}
.bkc-prog-fill{height:100%;border-radius:4px;transition:width .8s ease;}
.gap-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;}
.gap-chip.behind{background:var(--rbg);color:var(--red);}
.gap-chip.ahead{background:var(--gbg);color:var(--green);}
.gap-chip.on-track{background:var(--abg);color:var(--amber);}
.filter-row{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
.filter-chip{padding:7px 14px;border-radius:100px;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:var(--card);color:var(--ink3);cursor:pointer;white-space:nowrap;transition:all .15s;}
.filter-chip.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.date-input-sm{padding:7px 12px;border-radius:100px;font-size:12px;font-weight:600;border:1.5px solid var(--border);background:var(--card);color:var(--ink2);font-family:inherit;outline:none;cursor:pointer;}

/* ── TEAM BREAKDOWN CARDS ── */
.tb-section{margin-bottom:20px;}
.tb-section-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:0 2px;}
.tb-person-dot{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tb-person-name{font-size:14px;font-weight:800;color:var(--ink);}
.tb-person-role{font-size:11px;color:var(--ink3);font-weight:500;margin-top:1px;}
.tb-job-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r2);padding:14px;margin-bottom:8px;box-shadow:var(--sh);}
.tb-job-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.tb-job-label{display:flex;align-items:center;gap:8px;}
.tb-job-icon{font-size:18px;}
.tb-job-name{font-size:13px;font-weight:700;color:var(--ink);}
.tb-job-brand{font-size:11px;font-weight:600;padding:3px 8px;border-radius:100px;margin-left:4px;}
.tb-stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px;}
.tb-stat{text-align:center;padding:8px 4px;background:var(--bg);border-radius:8px;}
.tb-stat .ts-val{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.3px;}
.tb-stat .ts-lbl{font-size:9px;font-weight:700;color:var(--ink4);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}
.tb-mini-bar{height:6px;background:var(--bg2);border-radius:3px;overflow:hidden;margin-bottom:6px;}
.tb-mini-fill{height:100%;border-radius:3px;transition:width .8s ease;}
.tb-gap-row{display:flex;align-items:center;justify-content:space-between;}

/* ── UNIFIED LAPORAN PAGE ── */
.laporan-header{background:linear-gradient(135deg,var(--blue),var(--blue-d));border-radius:var(--r3);padding:18px;margin-bottom:16px;color:#fff;box-shadow:var(--sh2);}
.lh-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.lh-title{font-size:18px;font-weight:800;}
.lh-sub{font-size:12px;opacity:.75;margin-top:2px;}
.lh-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;}
.lh-stat{background:rgba(255,255,255,.15);border-radius:8px;padding:9px;text-align:center;}
.lhs-v{font-size:15px;font-weight:800;}
.lhs-l{font-size:9px;opacity:.7;text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}
.job-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;padding:2px 0;}
.job-pill{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:100px;border:2px solid var(--border);background:var(--card);cursor:pointer;transition:all .18s;font-size:13px;font-weight:700;color:var(--ink2);box-shadow:var(--sh);}
.job-pill .jp-icon{font-size:16px;}
.job-pill .jp-brand{font-size:10px;font-weight:600;padding:2px 7px;border-radius:100px;margin-left:2px;}
.job-pill:active{transform:scale(.97);}
.job-pill.done{border-color:var(--green);background:var(--gbg);}
.riwayat-section{margin-top:4px;}
.rw-month-nav{display:flex;align-items:center;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:14px;box-shadow:var(--sh);}
.rw-mnav-btn{padding:10px 14px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink3);}
.rw-mnav-btn:active{background:var(--blue-xl);color:var(--blue);}
.rw-mnav-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0;}
.report-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r3);padding:0;margin-bottom:10px;box-shadow:var(--sh);overflow:hidden;cursor:pointer;}
.report-card:active{border-color:var(--blue);}
.rc-body{display:flex;align-items:center;gap:12px;padding:14px;}
.rc-donut{flex-shrink:0;}
.rc-info{flex:1;min-width:0;}
.rc-team{font-size:14px;font-weight:800;color:var(--ink);}
.rc-meta{font-size:11px;color:var(--ink3);margin-top:2px;}
.rc-right{text-align:right;flex-shrink:0;}
.rc-rev{font-size:15px;font-weight:800;color:var(--blue);font-family:'JetBrains Mono',monospace;}
.rc-spend{font-size:11px;color:var(--ink4);margin-top:2px;}
.rc-bar{height:3px;background:var(--bg2);}
.rc-bar-fill{height:100%;transition:width .8s ease;}
.day-label{font-size:11px;font-weight:700;color:var(--ink4);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px;}

/* ── REKAP PAGE ── */
.member-rekap-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r3);padding:0;margin-bottom:12px;box-shadow:var(--sh);overflow:hidden;cursor:pointer;transition:all .18s;}
.member-rekap-card:active{border-color:var(--blue);}
.mrc-body{display:flex;align-items:center;gap:14px;padding:16px;}
.mrc-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mrc-info{flex:1;min-width:0;}
.mrc-name{font-size:16px;font-weight:800;color:var(--ink);}
.mrc-role{font-size:11px;color:var(--ink3);margin-top:2px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mrc-right{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;}
.mrc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border);}
.mrc-stat{padding:10px 12px;text-align:center;border-right:1px solid var(--border);}
.mrc-stat:last-child{border-right:none;}
.mrc-stat .msv{font-size:14px;font-weight:800;color:var(--ink);}
.mrc-stat .msl{font-size:9px;font-weight:700;color:var(--ink4);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}
.mrc-bar{height:4px;background:var(--bg2);}
.mrc-bar-fill{height:100%;transition:width .8s ease;}
.rdm-header{background:linear-gradient(135deg,var(--blue),var(--blue-d));padding:20px;color:#fff;border-radius:var(--r3) var(--r3) 0 0;margin:-20px -20px 20px;}
.rdm-avatar{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.rdm-name{font-size:22px;font-weight:800;margin-bottom:3px;}
.rdm-role{font-size:13px;opacity:.8;font-weight:500;}
.rdm-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
.rdm-kpi-item{background:rgba(255,255,255,.15);border-radius:8px;padding:10px;text-align:center;}
.rdm-kpi-item .dkv{font-size:16px;font-weight:800;}
.rdm-kpi-item .dkl{font-size:9px;opacity:.7;text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}
.rdm-job-card{background:var(--bg);border-radius:var(--r2);padding:14px;margin-bottom:10px;border:1.5px solid var(--border);}
.rdm-job-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.rdm-prog{height:7px;background:var(--bg2);border-radius:4px;overflow:hidden;margin-bottom:8px;}
.rdm-prog-fill{height:100%;border-radius:4px;transition:width .9s ease;}
.rdm-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.rdm-metric{background:var(--card);border-radius:7px;padding:9px;text-align:center;border:1px solid var(--border);}
.rdm-metric .dmv{font-size:13px;font-weight:800;color:var(--ink);}
.rdm-metric .dml{font-size:9px;color:var(--ink4);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;font-weight:700;}

/* Admin tabs */
.admin-tabs{display:flex;gap:0;background:var(--bg2);border-radius:var(--r2);padding:3px;margin-bottom:16px;}
.admin-tab{flex:1;padding:9px 8px;border-radius:7px;font-size:12px;font-weight:700;text-align:center;cursor:pointer;border:none;background:none;color:var(--ink3);transition:all .15s;font-family:inherit;}
.admin-tab.active{background:var(--card);color:var(--blue);box-shadow:var(--sh);}
.member-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh);margin-bottom:10px;}
.mc-header{padding:14px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);}
.mc-avatar{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mc-info{flex:1;}
.mc-name{font-size:15px;font-weight:800;color:var(--ink);}
.mc-role{font-size:12px;color:var(--ink3);margin-top:2px;font-weight:500;}
.mc-pin{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:var(--blue);background:var(--blue-xl);padding:3px 10px;border-radius:6px;}
.mc-body{padding:14px 16px;}
.mc-score-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}

/* field-row for input modal */
.field-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.field-row:last-child{border-bottom:none;}
.field-row .fr-label{flex:1;font-size:13px;font-weight:600;color:var(--ink2);}
.field-row .fr-unit{font-size:11px;font-weight:700;color:var(--ink4);width:28px;text-align:right;flex-shrink:0;}
.field-row input,.field-row select{width:130px;padding:10px 12px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r2);font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);text-align:right;outline:none;flex-shrink:0;}
.field-row input:focus,.field-row select:focus{border-color:var(--blue);background:#fff;}
.field-row select{text-align:left;}

@media(min-width:600px){
  .main{padding:20px;}
  .kpi-grid{grid-template-columns:repeat(4,1fr);}
  .modal-overlay{align-items:center;}
  .modal-sheet{border-radius:20px;max-height:85dvh;margin:16px;}
}


/* ── RP TIER ROWS ── */
.rp-tier-row{transition:border-color .15s;}
.rp-tier-row:hover{border-color:var(--blue-l);}