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

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --navy:#060B35; --navy-70:rgba(6,11,53,.7); --navy-40:rgba(6,11,53,.4); --navy-08:rgba(6,11,53,.08);
  --blue:#085CF0; --blue-mid:#588CFF; --sky:#B0E9FD; --ice:#E4F7FD; --white:#FFFFFF;
  --bg:#F7FAFF; --surface:#FFFFFF; --border:#E2EAF8; --border-mid:#C8D6F0;
  --text:#060B35; --text-2:#3B4A6B; --text-3:#7888AA;
  --ok:#16A34A; --ok-bg:#F0FDF4; --warn:#D97706; --warn-bg:#FFFBEB; --err:#DC2626; --err-bg:#FEF2F2;
  --grad:linear-gradient(135deg,#085CF0 0%,#588CFF 100%);
  --grad-navy:linear-gradient(160deg,#060B35 0%,#0D1A6E 100%);
  --nav-h:68px; --top-h:60px;
  --r:14px; --r-sm:10px; --r-lg:20px; --r-pill:999px;
  --sh:0 4px 16px rgba(6,11,53,.10); --sh-lg:0 8px 32px rgba(6,11,53,.14);
  --f:'Urbanist',sans-serif;
}

html{font-size:16px;-webkit-tap-highlight-color:transparent;}
body{font-family:var(--f);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
button,input,select,textarea{font-family:var(--f);}
.hidden{display:none!important;}

/* ── AUTH ── */
#auth-screen{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.5rem;background:var(--white);position:relative;overflow:hidden;
}
#auth-screen::before{content:'';position:absolute;width:600px;height:600px;background:var(--ice);border-radius:50%;top:-200px;right:-200px;pointer-events:none;}
#auth-screen::after{content:'';position:absolute;width:400px;height:400px;background:linear-gradient(135deg,#E4F7FD,#B0E9FD);border-radius:50%;bottom:-150px;left:-150px;opacity:.6;pointer-events:none;}

.auth-wrap{width:100%;max-width:400px;position:relative;z-index:1;animation:fadeUp .45s cubic-bezier(.16,1,.3,1);}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

.auth-logo-row{display:flex;align-items:center;gap:.625rem;margin-bottom:2.5rem;}
.auth-logo-lbl{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);padding-left:.625rem;border-left:1.5px solid var(--border-mid);}
.auth-h{font-size:1.75rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:.375rem;}
.auth-sub{font-size:.9rem;color:var(--text-3);font-weight:500;margin-bottom:1.75rem;}
.auth-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.875rem;box-shadow:var(--sh-lg);}
.auth-form{display:flex;flex-direction:column;gap:.875rem;}
.auth-foot{text-align:center;margin-top:1.25rem;font-size:.85rem;color:var(--text-3);font-weight:500;}
.auth-foot .lnk{color:var(--blue);font-weight:700;cursor:pointer;}
.auth-foot .lnk:hover{text-decoration:underline;}

/* ── APP SHELL ── */
#app-screen{min-height:100vh;display:flex;flex-direction:column;}

.topbar{height:var(--top-h);background:var(--white);border-bottom:1.5px solid var(--border);padding:0 1.25rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;}
.topbar-brand{display:flex;align-items:center;gap:.5rem;}
.topbar-tag{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:.2rem .5rem;background:var(--ice);border-radius:var(--r-pill);}
.topbar-right{display:flex;align-items:center;gap:.75rem;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(8,92,240,.3);}
.topbar-name{font-size:.85rem;font-weight:700;color:var(--navy);}
.icon-btn{width:36px;height:36px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--white);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.icon-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--ice);}

/* ── IDLE STICKY BANNER ── */
#idle-banner{
  display:none;
  position:sticky;top:var(--top-h);z-index:190;
  background:linear-gradient(135deg,#FFF3CD,#FFEAA0);
  border-bottom:2px solid #F59E0B;
  padding:.625rem 1.25rem;
  align-items:center;justify-content:space-between;gap:.75rem;
  animation:idlePulse 2s ease-in-out infinite;
}
#idle-banner.show{display:flex;}
@keyframes idlePulse{0%,100%{background:linear-gradient(135deg,#FFF3CD,#FFEAA0);}50%{background:linear-gradient(135deg,#FED7AA,#FDE68A);}}
.idle-banner-text{font-size:.82rem;font-weight:700;color:#92400E;display:flex;align-items:center;gap:.5rem;}
.idle-banner-dot{width:8px;height:8px;border-radius:50%;background:#F59E0B;animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}}

/* ── BOTTOM NAV ── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:var(--white);border-top:1.5px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom);z-index:200;}
.nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:none;background:none;cursor:pointer;color:var(--text-3);font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;position:relative;transition:color .15s;}
.nav-btn.active{color:var(--blue);}
.nav-btn.active svg{stroke:var(--blue);}
.nav-btn.active::after{content:'';position:absolute;top:0;left:25%;right:25%;height:3px;background:var(--blue);border-radius:0 0 3px 3px;}

/* ── TABS ── */
.tab{display:none;padding:1.25rem;padding-bottom:calc(var(--nav-h) + 1.5rem);overflow-y:auto;}
.tab.active{display:flex;flex-direction:column;gap:1rem;}
.tab-inner{max-width:520px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:1rem;}

/* ── FIELDS ── */
.field{display:flex;flex-direction:column;gap:.4rem;}
.label{font-size:.72rem;font-weight:700;color:var(--text-2);letter-spacing:.05em;text-transform:uppercase;}
.input{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--f);font-size:.9rem;font-weight:500;padding:.7rem .875rem;outline:none;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-appearance:none;}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,92,240,.10);background:var(--white);}
.input::placeholder{color:var(--border-mid);font-weight:400;}
.input--sm{padding:.55rem .75rem;font-size:.85rem;}
.input--num{width:80px;text-align:center;flex-shrink:0;}
select.input{cursor:pointer;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-family:var(--f);font-weight:700;font-size:.88rem;border:none;border-radius:var(--r-sm);cursor:pointer;padding:.72rem 1.25rem;transition:all .15s;-webkit-appearance:none;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 3px 12px rgba(8,92,240,.28);}
.btn-primary:hover{box-shadow:0 5px 20px rgba(8,92,240,.38);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);box-shadow:none;}
.btn-outline{background:var(--white);color:var(--blue);border:1.5px solid var(--blue);}
.btn-outline:hover{background:var(--ice);}
.btn-ghost{background:var(--navy-08);color:var(--navy);}
.btn-ghost:hover{background:rgba(6,11,53,.12);}
.btn-warn{background:#FEF3C7;color:#92400E;border:1.5px solid #F59E0B;}
.btn-warn:hover{background:#F59E0B;color:#fff;}
.btn-danger-soft{background:var(--err-bg);color:var(--err);border:1.5px solid rgba(220,38,38,.2);}
.btn-danger-soft:hover{background:var(--err);color:#fff;}
.btn-full{width:100%;}
.btn-sm{padding:.45rem .875rem;font-size:.78rem;}
.btn-xs{padding:.3rem .625rem;font-size:.72rem;}
.btn:disabled{opacity:.4;cursor:not-allowed!important;transform:none!important;box-shadow:none!important;}

/* ── GPS STRIP ── */
.gps-strip{display:flex;align-items:center;gap:.5rem;padding:.55rem .875rem;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-pill);font-size:.75rem;font-weight:600;color:var(--text-3);align-self:flex-start;}
.gps-dot{width:7px;height:7px;border-radius:50%;background:var(--border-mid);flex-shrink:0;transition:background .3s;}
.gps-dot.on{background:var(--ok);animation:gpsPulse 2s infinite;}
.gps-dot.err{background:var(--err);}
@keyframes gpsPulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ── HOME ── */
.greeting-row{display:flex;align-items:flex-start;justify-content:space-between;}
.greeting-lbl{font-size:.82rem;color:var(--text-3);font-weight:500;}
.greeting-name{font-size:1.5rem;font-weight:900;color:var(--navy);letter-spacing:-.02em;margin-top:.1rem;}
.greeting-date{font-size:.72rem;font-weight:700;color:var(--text-3);background:var(--bg);border:1.5px solid var(--border);padding:.35rem .75rem;border-radius:var(--r-pill);white-space:nowrap;}

.clock-hero{background:var(--grad-navy);border-radius:var(--r-lg);padding:1.75rem 1.5rem 1.5rem;position:relative;overflow:hidden;}
.clock-hero::before{content:'';position:absolute;width:260px;height:260px;border:60px solid rgba(180,210,255,.06);border-radius:50%;top:-80px;right:-80px;}
.clock-hero::after{content:'';position:absolute;width:160px;height:160px;border:40px solid rgba(180,210,255,.04);border-radius:50%;bottom:-40px;left:-40px;}
.clock-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;}
.clock-lbl{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.wm-tag{font-size:.7rem;font-weight:700;padding:.25rem .65rem;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.15);}
.clock-time{font-size:3.25rem;font-weight:900;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:.4rem;}
.clock-status{font-size:.8rem;font-weight:500;color:rgba(255,255,255,.55);margin-bottom:1rem;}
.timer-row{display:inline-flex;align-items:center;gap:.5rem;background:rgba(176,233,253,.12);border:1px solid rgba(176,233,253,.25);border-radius:var(--r-pill);padding:.3rem .875rem;margin-bottom:1.25rem;}
.timer-lbl{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);}
.timer-val{font-size:.9rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;}
.clock-btns{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}

.btn-ci{background:var(--grad);color:#fff;border:none;border-radius:var(--r-sm);padding:.85rem;font-family:var(--f);font-weight:800;font-size:.88rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.45rem;transition:all .15s;box-shadow:0 3px 12px rgba(8,92,240,.4);}
.btn-ci:hover{transform:translateY(-1px);box-shadow:0 5px 20px rgba(8,92,240,.5);}
.btn-ci:active{transform:translateY(0);}
.btn-ci:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-co{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.2);border-radius:var(--r-sm);padding:.85rem;font-family:var(--f);font-weight:800;font-size:.88rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.45rem;transition:all .15s;}
.btn-co:hover{background:rgba(220,38,38,.5);border-color:transparent;}
.btn-co:active{transform:scale(.98);}
.btn-co:disabled{opacity:.4;cursor:not-allowed;}

.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;}
.panel{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:1rem;}
.panel-lbl{font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:.75rem;}
.pill-stack{display:flex;flex-direction:column;gap:.4rem;}
.pill{width:100%;padding:.5rem .75rem;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text-2);font-family:var(--f);font-size:.8rem;font-weight:600;cursor:pointer;text-align:left;transition:all .15s;display:flex;align-items:center;gap:.4rem;}
.pill:hover{border-color:var(--blue);background:var(--ice);color:var(--navy);}
.pill.on{border-color:var(--blue);background:#EBF5FF;color:var(--blue);font-weight:700;}
.pill.on-wfh{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);}

.today-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;}
.strip-item{padding:.875rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;border-right:1.5px solid var(--border);}
.strip-item:last-child{border-right:none;}
.strip-val{font-size:.9rem;font-weight:800;color:var(--navy);}
.strip-val.hit{color:var(--ok);}
.strip-lbl{font-size:.6rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;}

/* Daily Summary Card */
.daily-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;}
.daily-card-head{padding:.875rem 1.125rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.daily-card-title{font-size:.78rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;}
.daily-task-list{padding:.875rem 1.125rem;display:flex;flex-direction:column;gap:.5rem;}
.daily-task{display:flex;align-items:center;gap:.625rem;font-size:.83rem;font-weight:600;color:var(--text-2);}
.daily-task.done{color:var(--ok);text-decoration:line-through;opacity:.7;}
.task-check{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border-mid);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.task-check.checked{background:var(--ok);border-color:var(--ok);}
.daily-empty{padding:1rem 1.125rem;font-size:.8rem;color:var(--text-3);font-weight:500;}

/* ── CARD (generic) ── */
.card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;}
.card-head{padding:1rem 1.25rem;border-bottom:1.5px solid var(--border);display:flex;align-items:center;gap:.75rem;}
.card-badge{font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .6rem;border-radius:var(--r-pill);}
.card-badge--blue{background:#EBF3FF;color:var(--blue);}
.card-badge--green{background:var(--ok-bg);color:var(--ok);}
.card-title{font-size:.9rem;font-weight:700;color:var(--navy);flex:1;}
.done-tag{font-size:.7rem;font-weight:700;color:var(--ok);background:var(--ok-bg);padding:.2rem .55rem;border-radius:var(--r-pill);}
.card-body{padding:1.25rem;display:flex;flex-direction:column;gap:1rem;}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;background:rgba(6,11,53,.5);z-index:500;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal-sheet{background:var(--white);border-radius:var(--r-lg) var(--r-lg) 0 0;width:100%;max-width:520px;padding:0;max-height:92vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);}
.modal-overlay.open .modal-sheet{transform:translateY(0);}
.modal-handle{width:40px;height:4px;background:var(--border-mid);border-radius:2px;margin:.875rem auto .5rem;flex-shrink:0;}
.modal-head{padding:.75rem 1.25rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.modal-title{font-size:1rem;font-weight:800;color:var(--navy);}
.modal-close{width:30px;height:30px;border:none;background:var(--navy-08);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:1rem;transition:background .15s;}
.modal-close:hover{background:var(--border-mid);}
.modal-body{padding:1.25rem;display:flex;flex-direction:column;gap:1rem;}

/* SOD Modal — task list input */
.task-input-row{display:flex;gap:.5rem;align-items:center;}
.task-input-row .input{flex:1;}
.task-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem;}
.task-item{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);}
.task-item-text{flex:1;font-size:.85rem;font-weight:600;color:var(--text);}
.task-item-del{background:none;border:none;cursor:pointer;color:var(--text-3);padding:.1rem;display:flex;align-items:center;transition:color .15s;}
.task-item-del:hover{color:var(--err);}
.task-empty{font-size:.8rem;color:var(--text-3);font-weight:500;text-align:center;padding:.75rem 0;}

/* EOD Modal — checklist + gamified progress */
.eod-progress-hero{background:var(--grad-navy);border-radius:var(--r);padding:1.25rem;text-align:center;margin-bottom:.25rem;}
.eod-progress-num{font-size:3rem;font-weight:900;color:#fff;line-height:1;font-variant-numeric:tabular-nums;}
.eod-progress-lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55);margin-top:.2rem;}
.eod-progress-bar-wrap{background:rgba(255,255,255,.15);border-radius:var(--r-pill);height:8px;margin-top:.875rem;overflow:hidden;}
.eod-progress-bar{height:100%;background:var(--grad);border-radius:var(--r-pill);transition:width .5s cubic-bezier(.16,1,.3,1);}
.eod-checklist{display:flex;flex-direction:column;gap:.5rem;}
.eod-check-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:all .2s;background:var(--white);}
.eod-check-item:hover{border-color:var(--blue);background:var(--ice);}
.eod-check-item.checked{border-color:var(--ok);background:var(--ok-bg);}
.eod-checkbox{width:20px;height:20px;border-radius:6px;border:2px solid var(--border-mid);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.eod-check-item.checked .eod-checkbox{background:var(--ok);border-color:var(--ok);}
.eod-check-text{font-size:.85rem;font-weight:600;color:var(--text);flex:1;transition:all .2s;}
.eod-check-item.checked .eod-check-text{color:var(--ok);text-decoration:line-through;opacity:.8;}

/* ── TASK MANAGEMENT TAB ── */
.sec-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;}
.sec-title{font-size:1rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;}
.sec-sub{font-size:.8rem;color:var(--text-3);font-weight:500;margin-top:.15rem;}

.task-section{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;}
.task-section-head{padding:.875rem 1.125rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.task-section-title{font-size:.75rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:.5rem;}
.task-count{background:var(--ice);color:var(--blue);font-size:.65rem;font-weight:800;padding:.15rem .5rem;border-radius:var(--r-pill);}
.task-rows{padding:.625rem;}
.task-row{display:flex;align-items:center;gap:.625rem;padding:.6rem .625rem;border-radius:var(--r-sm);transition:background .15s;}
.task-row:hover{background:var(--bg);}
.task-row-cb{width:18px;height:18px;border-radius:5px;border:2px solid var(--border-mid);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.task-row-cb.chk{background:var(--ok);border-color:var(--ok);}
.task-row-text{flex:1;font-size:.85rem;font-weight:600;color:var(--text);cursor:pointer;}
.task-row-text.done-text{color:var(--text-3);text-decoration:line-through;}
.task-row-type{font-size:.6rem;font-weight:700;padding:.15rem .45rem;border-radius:var(--r-pill);}
.type-sod{background:#EBF3FF;color:var(--blue);}
.type-mid{background:var(--warn-bg);color:var(--warn);}
.task-row-del{background:none;border:none;cursor:pointer;color:var(--text-3);padding:.2rem;display:flex;align-items:center;opacity:0;transition:opacity .15s;}
.task-row:hover .task-row-del{opacity:1;}
.task-row-del:hover{color:var(--err);}

.add-task-row{display:flex;gap:.5rem;padding:.75rem .625rem;border-top:1px solid var(--border);}
.add-task-row .input{flex:1;}

/* ── ANALYTICS TAB ── */
.highlight-cards{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;}
.hi-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:1.125rem 1.25rem;position:relative;overflow:hidden;}
.hi-card::before{content:'';position:absolute;width:80px;height:80px;border-radius:50%;top:-20px;right:-20px;opacity:.08;}
.hi-card.c-blue::before{background:var(--blue);}
.hi-card.c-green::before{background:var(--ok);}
.hi-card.c-sky::before{background:var(--sky);}
.hi-card.c-navy::before{background:var(--navy);}
.hi-icon{font-size:1.25rem;margin-bottom:.5rem;}
.hi-val{font-size:1.9rem;font-weight:900;letter-spacing:-.02em;line-height:1;}
.hi-card.c-blue .hi-val{color:var(--blue);}
.hi-card.c-green .hi-val{color:var(--ok);}
.hi-card.c-sky .hi-val{color:#0891B2;}
.hi-card.c-navy .hi-val{color:var(--navy);}
.hi-lbl{font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-top:.3rem;}

.week-table-wrap{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;}
.week-table-title{padding:.875rem 1.25rem;font-size:.72rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;border-bottom:1.5px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:space-between;}
.week-table{width:100%;border-collapse:collapse;font-size:.8rem;}
.week-table th{text-align:left;padding:.55rem 1rem;font-size:.65rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;background:var(--bg);}
.week-table td{padding:.7rem 1rem;border-top:1px solid var(--border);color:var(--text);font-weight:500;}
.week-table tr:hover td{background:var(--bg);}
.tag-hadir{background:var(--ok-bg);color:var(--ok);font-size:.65rem;font-weight:800;padding:.2rem .55rem;border-radius:var(--r-pill);}
.tag-absen{background:var(--err-bg);color:var(--err);font-size:.65rem;font-weight:800;padding:.2rem .55rem;border-radius:var(--r-pill);}

/* ── EXPORT TAB ── */
.export-block{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:1.25rem;display:flex;flex-direction:column;gap:1rem;}
.export-head{display:flex;align-items:flex-start;gap:.875rem;}
.export-icon{width:44px;height:44px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;}
.export-icon.blue{background:#EBF3FF;} .export-icon.green{background:var(--ok-bg);}
.export-title{font-size:.9rem;font-weight:800;color:var(--navy);margin-bottom:.2rem;}
.export-desc{font-size:.78rem;color:var(--text-3);font-weight:500;line-height:1.5;}
.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:.625rem;}
.webhook-block{background:var(--ice);border:1.5px solid rgba(8,92,240,.15);border-radius:var(--r);padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;}
.webhook-title{font-size:.8rem;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:.4rem;}
.webhook-desc{font-size:.75rem;color:var(--text-3);font-weight:500;line-height:1.5;}
.webhook-row{display:flex;gap:.5rem;}
.webhook-row .input{font-family:'Courier New',monospace;font-size:.78rem;}

/* ── PROGRESS ── */
.prog-row{display:flex;align-items:center;gap:.625rem;}
.prog-unit{font-size:.9rem;font-weight:700;color:var(--text-3);}
.prog-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;min-width:60px;}
.prog-fill{height:100%;background:var(--grad);border-radius:3px;width:0%;transition:width .3s;}

/* ── EMPTY ── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.5rem 1rem;text-align:center;color:var(--text-3);}
.empty-icon{font-size:2.5rem;margin-bottom:.875rem;opacity:.7;}
.empty-text{font-size:.85rem;font-weight:600;}
.empty-hint{font-size:.75rem;margin-top:.3rem;font-weight:400;}

/* ── TOAST ── */
#toast{position:fixed;bottom:calc(var(--nav-h) + .875rem);left:50%;transform:translateX(-50%) translateY(8px);background:var(--navy);color:#fff;font-size:.83rem;font-weight:700;padding:.75rem 1.375rem;border-radius:var(--r-pill);opacity:0;pointer-events:none;transition:all .22s cubic-bezier(.16,1,.3,1);z-index:999;max-width:320px;text-align:center;box-shadow:var(--sh-lg);white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.ok{background:var(--ok);} #toast.fail{background:var(--err);} #toast.warn{background:var(--warn);}

/* ── SCORE NOTE ── */
.score-hint{font-size:.72rem;color:var(--text-3);font-weight:500;}

@media(max-width:360px){
  .clock-time{font-size:2.75rem;}
  .grid2,.panel-grid,.highlight-cards{grid-template-columns:1fr;}
  .today-strip{grid-template-columns:repeat(2,1fr);}
  .today-strip .strip-item:nth-child(2){border-right:none;}
  .today-strip .strip-item:nth-child(3){border-top:1px solid var(--border);}
}
@media(min-width:600px){
  .clock-time{font-size:3.75rem;}
}

/* ── Filter mode buttons ── */
.filter-mode-btn { background:var(--bg); color:var(--text-3); border:1.5px solid var(--border); }
.filter-mode-btn.active { background:var(--ice); color:var(--blue); border-color:var(--blue); }
.filter-mode-btn:hover { background:var(--ice); color:var(--blue); }

/* ── Admin tab ── */
.admin-user-row { display:flex; align-items:center; gap:.875rem; padding:1rem 1.125rem; background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); }
.admin-user-av  { width:40px; height:40px; border-radius:50%; background:var(--grad); color:#fff; font-weight:800; font-size:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.admin-user-info { flex:1; min-width:0; }
.admin-user-name { font-size:.88rem; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:.4rem; }
.admin-user-meta { font-size:.75rem; color:var(--text-3); font-weight:500; margin-top:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-badge { font-size:.6rem; font-weight:800; background:var(--ice); color:var(--blue); padding:.15rem .45rem; border-radius:var(--r-pill); border:1px solid rgba(8,92,240,.2); }

/* ── CEO Role badge in topbar ── */
#tb-role-badge {
  background: linear-gradient(135deg,#060B35,#085CF0);
  color:#fff;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.1em;
  padding:.2rem .55rem;
  border-radius:var(--r-pill);
}

/* ── CEO activity table name cell ── */
.week-table td strong { color:var(--navy); }

/* ── DEV badge (pink!) ── */
#tb-role-badge.dev {
  background: linear-gradient(135deg,#EC4899,#F472B6) !important;
  color: #fff;
}