/* KPC Time — app.css
   رنگ‌ها و مقیاس‌ها به app/tokens.css منتقل شده‌اند. مقدار خام اینجا اضافه نکنید. */


*{box-sizing:border-box;min-width:0}html,body{margin:0;width:100%;max-width:100%;overflow-x:hidden}body{background:radial-gradient(circle at 0 0,rgba(47,109,246,.12),transparent 30%),linear-gradient(180deg,var(--c-white),var(--c-blue-50));color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;-webkit-text-size-adjust:100%;min-height:100vh}
button,input,select,textarea{font:inherit}button{cursor:pointer}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.identity{display:flex;gap:10px;align-items:center}.avatar{width:46px;height:46px;border-radius:var(--r-3);display:grid;place-items:center;color:var(--c-white);font-weight:800;background:linear-gradient(145deg,#111827,#334155)}.identity h1{font-size:var(--fs-2xl);margin:0}.identity p{margin:3px 0 0;color:var(--muted);font-size:var(--fs-md)}
#app{width:100%;max-width:560px;margin:auto;padding:14px 12px calc(140px + env(safe-area-inset-bottom))}.top-actions{display:flex;gap:7px}.theme-switch,.icon-button{height:43px;border:1px solid var(--line);border-radius:15px;background:var(--c-white);color:var(--text)}.theme-switch{padding:0 11px;display:flex;align-items:center;gap:6px;font-size:var(--fs-md);font-weight:700}.icon-button{width:43px}
.view{display:none}.view.active{display:block}.status-card{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:14px;padding:18px;border-radius:var(--r-5);background:linear-gradient(145deg,var(--c-white),var(--c-blue-50));box-shadow:var(--shadow)}.eyebrow{font-size:var(--fs-md);color:var(--muted)}.eyebrow.light{color:#cbd5e1}.status-copy h2{font-size:29px;margin:6px 0 7px}.status-copy p{margin:0;color:#475569}.shift-badge{display:inline-block;margin-top:8px;padding:4px 9px;border-radius:var(--r-pill);background:var(--c-blue-50);color:var(--blue);font-size:var(--fs-sm);font-weight:700}.progress-ring{width:110px;height:110px;border-radius:var(--r-circle);display:grid;place-items:center;background:conic-gradient(var(--state-color) var(--angle),var(--c-blue-50) 0);position:relative}.progress-ring:before{content:"";position:absolute;inset:9px;border-radius:var(--r-circle);background:var(--surface)}.progress-ring div{position:relative;text-align:center}.progress-ring small{display:block;color:var(--muted);font-size:var(--fs-sm)}.progress-ring strong{font-size:27px}.status-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.status-metrics div{background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-3);padding:10px 5px;text-align:center}.status-metrics span{display:block;color:var(--muted);font-size:var(--fs-xs)}.status-metrics b{display:block;margin-top:5px;font-size:16px}
.panel{margin-top:13px;padding:15px;border-radius:24px;background:var(--card);box-shadow:var(--shadow)}.section-title-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.section-title-row h2,.section-title-row h3{margin:0}.muted{color:var(--muted);font-size:var(--fs-md)}.route-card{margin-top:13px;padding:15px;border-radius:23px;background:linear-gradient(145deg,#10213a,#142d4d);color:var(--c-white)}.route{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.route div{text-align:center}.route span{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.1);display:grid;place-items:center;margin:auto;font-size:var(--fs-3xl)}.route b{display:block;margin-top:7px}.route i{height:2px;flex:1;margin:0 12px;background:linear-gradient(90deg,#4da3ff,#8bd3ff)}
.calendar-head{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:8px;text-align:center}.calendar-head h2{margin:0}.calendar-head p{margin:3px 0 0;color:var(--muted);font-size:var(--fs-sm)}.month-nav{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:20px}.today-link,.text-button{border:0;background:transparent;color:var(--blue)}.week-row,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.week-row{margin:14px 0 6px}.week-row span{text-align:center;color:var(--c-slate-400);font-size:var(--fs-xs)}.day-cell{aspect-ratio:1/1;border-radius:14px;background:#f8fafc;border:1px solid transparent;position:relative;overflow:hidden}.day-cell.empty{background:transparent}.day-cell button{width:100%;height:100%;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center}.day-cell .num{font-weight:700}.day-cell .mark{width:6px;height:6px;border-radius:var(--r-circle);margin-top:6px}.day-cell.work .mark{background:var(--blue)}.day-cell.rest .mark{background:var(--green)}.day-cell.travel .mark{background:var(--amber)}.day-cell.today{border-color:#111827;background:var(--c-white)}.day-cell.has-note:after{content:"";position:absolute;top:4px;left:4px;width:6px;height:6px;border-radius:var(--r-circle);background:var(--purple)}.day-cell.holiday-work{border:2px solid var(--red);background:#fff1f2}.day-cell.holiday-work .num{color:#be123c}.holiday-work-badge{position:absolute;bottom:2px;right:50%;transform:translateX(50%);background:var(--red);color:var(--c-white);font-size:6px;padding:1px 3px;border-radius:var(--r-pill);white-space:nowrap}.holiday-label{position:absolute;right:3px;bottom:2px;font-size:7px;color:#dc2626}.legend{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:var(--fs-sm)}.dot{display:inline-block;width:8px;height:8px;border-radius:var(--r-circle);margin-left:4px}.blue{background:var(--blue)}.green{background:var(--green)}.amber{background:var(--amber)}.red{background:var(--red)}.purple{background:var(--purple)}
.primary,.secondary,.danger{border:0;border-radius:14px;padding:11px 14px}.primary{background:var(--blue);color:var(--c-white)}.secondary{background:var(--c-blue-50);color:var(--blue)}.danger{background:#fee2e2;color:#b91c1c}.small{padding:8px 11px}.full{width:100%;margin-top:12px}.filters,.backup-actions{display:grid;gap:8px;margin-top:12px}.event-list,.notes-list{display:grid;gap:9px;margin-top:12px}.event-item,.note-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}.event-icon,.note-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--c-blue-50)}.event-item small,.note-item small{color:var(--muted)}select,input,textarea{width:100%;padding:11px;border-radius:13px;border:1px solid var(--c-slate-200);background:var(--surface);color:var(--text);outline:none}label{display:block;color:var(--muted);font-size:var(--fs-md);margin:10px 0 5px}.form-grid{display:grid;gap:10px}.form-grid.two,.date-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.date-grid{grid-template-columns:repeat(3,1fr)}
.report-controls{display:flex;gap:6px;flex-wrap:wrap}.report-controls select{width:auto}.report-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}.report-card{padding:14px;border-radius:17px;background:var(--surface);border:1px solid var(--line)}.report-card span{display:block;color:var(--muted);font-size:var(--fs-sm)}.report-card b{display:block;font-size:22px;margin-top:6px}.report-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.month-bars{display:grid;grid-template-columns:repeat(12,1fr);align-items:end;gap:4px;height:150px}.month-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}.month-bar i{width:100%;max-width:18px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--blue),#8ab2ff);min-height:3px}.month-bar span{font-size:var(--fs-2xs);color:var(--muted);margin-top:5px}
.checklist{display:grid;gap:8px;margin-top:12px}.check-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.check-item input{width:auto}.check-item.done span{text-decoration:line-through;color:var(--muted)}.check-item button{margin-right:auto;border:0;background:transparent;color:var(--red)}.checklist-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}
.about-button{width:100%;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);color:var(--text);padding:11px 12px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:right}.about-logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--c-blue-600),var(--c-cyan-500));color:var(--c-white);font-size:20px}.about-button small{display:block;color:var(--muted)}.about-button i{font-style:normal;font-size:22px}.about-hero{text-align:center}.about-big-logo{width:76px;height:76px;margin:auto;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,var(--c-blue-600),var(--c-cyan-500));color:var(--c-white);font-size:34px}.version-chip{display:inline-block;padding:5px 10px;border-radius:var(--r-pill);background:var(--c-blue-50);color:var(--blue)}.about-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.about-info div{padding:11px;border:1px solid var(--line);border-radius:14px;text-align:center}.about-contact{display:grid;gap:8px;margin-top:12px}.about-contact a{padding:11px;border-radius:14px;background:var(--c-slate-50);text-decoration:none;color:var(--text);text-align:center}.support-link{display:block;text-decoration:none;text-align:center}
.bottom-nav{position:fixed;z-index:20;right:50%;transform:translateX(50%);bottom:calc(10px + env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:536px;background:var(--surface-nav);border:1px solid var(--c-white);border-radius:var(--r-4);padding:7px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;box-shadow:0 18px 50px rgba(41,61,90,.16)}.tab{border:0;background:transparent;border-radius:14px;padding:8px 2px;color:#7c8798;font-size:var(--fs-2xs)}.tab span{display:block;font-size:17px}.tab.active{background:#edf3ff;color:var(--brand-ink)}.persistent-footer{position:fixed;z-index:19;right:50%;transform:translateX(50%);bottom:calc(82px + env(safe-area-inset-bottom));width:calc(100% - 34px);max-width:516px;padding:7px 10px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface-nav);color:var(--muted);font-size:var(--fs-xs)}.persistent-footer i{width:3px;height:3px;border-radius:var(--r-circle);background:var(--c-slate-400)}.persistent-footer b{color:var(--text)}
.modal{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;background:rgba(15,23,42,.35);z-index:40;padding:12px}.modal.open{display:flex}.modal-card{width:100%;max-width:560px;background:var(--surface);border-radius:27px 27px 20px 20px;padding:18px;max-height:92vh;overflow:auto}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head button{width:38px;height:38px;border:0;border-radius:var(--r-2)}.range-toggle{display:flex;align-items:center;gap:8px}.range-toggle input{width:auto}.toast{position:fixed;right:50%;bottom:145px;transform:translateX(50%) translateY(15px);background:#111827;color:var(--c-white);border-radius:13px;padding:10px 15px;opacity:0;pointer-events:none;transition:.2s;z-index:60}.toast.show{opacity:1;transform:translateX(50%)}.empty-state{text-align:center;color:var(--muted);padding:25px 10px}
body.dark{--bg:#07111f;--card:rgba(13,26,43,.94);--text:#f8fafc;--muted:var(--c-slate-400);--line:rgba(255,255,255,.09);background:linear-gradient(180deg,#07111f,#0b1524)}body.dark .status-card,body.dark .panel,body.dark .event-item,body.dark .note-item,body.dark .check-item,body.dark .report-card,body.dark .about-button,body.dark input,body.dark select,body.dark textarea,body.dark .modal-card,body.dark .month-nav,body.dark .theme-switch{background:#0d1a2b;color:var(--text);border-color:var(--line)}body.dark .day-cell{background:#112033}body.dark .day-cell.today{background:#16263d;border-color:var(--c-white)}body.dark .tab.active{background:#16325a;}body.dark .about-contact a{background:#132238;color:var(--text)}
@media(max-width:390px){#app{padding:10px 8px calc(140px + env(safe-area-inset-bottom))}.status-card{grid-template-columns:minmax(0,1fr) 94px;padding:16px 13px}.progress-ring{width:94px;height:94px}.status-copy h2{font-size:25px}.panel{padding:12px 9px}.week-row,.calendar-grid{gap:3px}.day-cell{border-radius:11px}.theme-switch{padding:0 8px;font-size:var(--fs-sm)}.persistent-footer{width:calc(100% - 22px);font-size:var(--fs-2xs)}}
@media print{.topbar,.bottom-nav,.persistent-footer,.report-actions{display:none!important}.view{display:none!important}#reportView{display:block!important}body{background:var(--c-white)!important}}


/* ===== KPC Time v2.1.0 Weather Card ===== */
.weather-card{
  margin-top:13px;
  padding:16px;
  border-radius:24px;
  color:var(--c-white);
  background:
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.16),transparent 26%),
    linear-gradient(145deg,#0f5ca8,#123d73);
  box-shadow:0 18px 44px rgba(15,92,168,.24);
  overflow:hidden;
}
.weather-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.weather-head h3{margin:4px 0 0;font-size:19px}
.weather-refresh{
  width:42px;height:42px;border:1px solid rgba(255,255,255,.2);
  border-radius:14px;background:rgba(255,255,255,.11);color:var(--c-white);font-size:var(--fs-3xl)
}
.weather-refresh.loading{animation:weatherSpin .8s linear infinite}
@keyframes weatherSpin{to{transform:rotate(360deg)}}
.weather-main{
  display:grid;grid-template-columns:58px auto minmax(0,1fr);
  align-items:center;gap:10px;margin-top:15px
}
.weather-icon{
  width:58px;height:58px;border-radius:18px;
  display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:30px
}
.weather-temp{display:flex;align-items:flex-start;direction:ltr}
.weather-temp strong{font-size:42px;line-height:1;font-weight:800}
.weather-temp span{font-size:var(--fs-xl);margin-top:4px;color:#dbeafe}
.weather-condition{text-align:right}
.weather-condition b{display:block;font-size:var(--fs-xl)}
.weather-condition small{display:block;margin-top:5px;color:#c7ddf6;font-size:var(--fs-xs)}
.weather-details{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px
}
.weather-details div{
  padding:9px 5px;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.09)
}
.weather-details span{display:block;color:#c7ddf6;font-size:var(--fs-2xs)}
.weather-details b{display:block;margin-top:5px;font-size:var(--fs-md)}
.weather-alert{
  margin-top:10px;padding:9px 11px;border-radius:13px;
  background:rgba(251,146,60,.18);border:1px solid rgba(253,186,116,.28);
  color:#ffedd5;font-size:var(--fs-sm)
}
.weather-error{
  margin-top:11px;padding:10px;border-radius:13px;
  background:rgba(127,29,29,.22);color:#fee2e2;font-size:var(--fs-sm);line-height:1.8
}
body.dark .weather-card{
  background:
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.09),transparent 26%),
    linear-gradient(145deg,#0b3762,#102844)
}
@media(max-width:390px){
  .weather-card{padding:14px 12px}
  .weather-main{grid-template-columns:52px auto minmax(0,1fr);gap:8px}
  .weather-icon{width:52px;height:52px;font-size:27px}
  .weather-temp strong{font-size:37px}
  .weather-details{gap:5px}
  .weather-details b{font-size:var(--fs-sm)}
}


/* ===== KPC Time v2.2.0 Rotation Shift ===== */
.rotation-current{
  display:inline-flex;
  align-items:center;
  margin-top:7px;
  margin-right:5px;
  padding:4px 9px;
  border-radius:var(--r-pill);
  font-size:var(--fs-sm);
  font-weight:800;
}
.rotation-current.night{
  background:#312e81;
  color:#e0e7ff;
}
.rotation-current.day{
  background:#fef3c7;
  color:#92400e;
}
.rotation-segments{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.rotation-segment{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 100px;
  align-items:center;
  gap:8px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
.rotation-segment span{
  color:var(--muted);
  font-size:var(--fs-sm);
}
.rotation-work-only{
  display:flex!important;
  align-items:center;
  gap:8px;
  color:var(--text)!important;
  margin-top:12px!important;
}
.rotation-work-only input{width:auto}
.night-dot{background:#4f46e5}
.day-dot{background:var(--c-amber-500)}
.day-cell.rotation-night{
  box-shadow:inset 0 0 0 2px rgba(79,70,229,.55);
}
.day-cell.rotation-day{
  box-shadow:inset 0 0 0 2px rgba(245,158,11,.55);
}
.day-cell.holiday-work.rotation-night,
.day-cell.holiday-work.rotation-day{
  box-shadow:none;
}
.rotation-badge{
  position:absolute;
  top:3px;
  right:3px;
  min-width:18px;
  height:15px;
  padding:0 4px;
  border-radius:var(--r-pill);
  display:grid;
  place-items:center;
  font-size:7px;
  font-weight:900;
  z-index:6;
}
.rotation-badge.night{
  background:#4f46e5;
  color:var(--c-white);
}
.rotation-badge.day{
  background:var(--c-amber-500);
  color:var(--c-white);
}
.day-cell.has-note .rotation-badge{
  right:auto;
  left:13px;
}
body.dark .rotation-segment{
  border-color:var(--line);
}
body.dark .day-cell.rotation-night{
  box-shadow:inset 0 0 0 2px rgba(129,140,248,.8);
}
body.dark .day-cell.rotation-day{
  box-shadow:inset 0 0 0 2px rgba(251,191,36,.8);
}
@media(max-width:390px){
  .rotation-segment{
    grid-template-columns:50px minmax(0,1fr) 82px;
    gap:5px;
    padding:7px;
  }
  .rotation-badge{
    top:2px;
    right:2px;
    font-size:6px;
    min-width:16px;
    height:13px;
  }
}


/* ===== KPC Time v2.3.0 Onboarding ===== */
.onboarding{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:
    radial-gradient(circle at 10% 10%,rgba(37,99,235,.24),transparent 30%),
    rgba(7,17,31,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.onboarding.open{display:flex}
.onboarding-card{
  width:100%;
  max-width:500px;
  max-height:94vh;
  overflow:auto;
  padding:20px;
  border-radius:var(--r-5);
  background:var(--surface);
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}
.onboarding-progress{
  height:6px;
  margin-bottom:20px;
  border-radius:var(--r-pill);
  overflow:hidden;
  background:var(--c-slate-200);
}
.onboarding-progress i{
  display:block;
  width:16.666%;
  height:100%;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--c-blue-600),var(--c-cyan-500));
  transition:width .25s ease;
}
.onboarding-step{display:none}
.onboarding-step.active{display:block;animation:onboardingIn .22s ease}
@keyframes onboardingIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.onboarding-icon{
  width:68px;
  height:68px;
  margin:0 auto 12px;
  border-radius:var(--r-4);
  display:grid;
  place-items:center;
  background:var(--c-blue-50);
  font-size:31px;
}
.onboarding-step h2{
  margin:0;
  text-align:center;
  font-size:var(--fs-4xl);
}
.onboarding-step>p{
  margin:8px 0 18px;
  text-align:center;
  color:var(--muted);
  line-height:1.9;
}
.onboarding-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:20px;
}
.onboarding-actions button:only-child{grid-column:1/-1}
.onboarding-summary{
  display:grid;
  gap:8px;
  padding:14px;
  border-radius:var(--r-3);
  background:#f8fafc;
}
.onboarding-summary div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding-bottom:7px;
  border-bottom:1px solid var(--c-slate-200);
}
.onboarding-summary div:last-child{border-bottom:0;padding-bottom:0}
.onboarding-summary span{color:var(--muted)}
body.dark .onboarding-card{
  color:var(--text);
}
body.dark .onboarding-icon,
body.dark .onboarding-summary{
  background:#132238;
}
body.dark .onboarding-summary div{border-color:var(--line)}
@media(max-width:390px){
  .onboarding{padding:8px}
  .onboarding-card{padding:16px 13px;border-radius:24px}
  .onboarding-step h2{font-size:var(--fs-3xl)}
}


/* ===== KPC Time v2.3.1 Dark Contrast + Logo ===== */
.logo-avatar{
  overflow:hidden;
  padding:0;
  background:transparent!important;
  box-shadow:0 10px 26px rgba(37,99,235,.22);
}
.logo-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.about-logo,
.about-big-logo{
  overflow:hidden;
  padding:0!important;
  background:transparent!important;
}
.about-logo img,
.about-big-logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Explicit dark-mode contrast for today's status card */
body.dark .status-card{
  background:
    radial-gradient(circle at 85% 12%,rgba(96,165,250,.12),transparent 25%),
    linear-gradient(145deg,#0f1d30,#111f34)!important;
  color:#f8fafc!important;
  border:1px solid rgba(255,255,255,.08);
}
body.dark .status-card .status-copy,
body.dark .status-card .status-copy h2,
body.dark .status-card .status-copy p,
body.dark .status-card .eyebrow,
body.dark .status-card .shift-badge,
body.dark .status-card .rotation-current,
body.dark .status-card .progress-ring strong,
body.dark .status-card .progress-ring small,
body.dark .status-card .status-metrics span,
body.dark .status-card .status-metrics b{
  color:#f8fafc!important;
}
body.dark .status-card .eyebrow,
body.dark .status-card .progress-ring small,
body.dark .status-card .status-metrics span{
  color:#a8b5c7!important;
}
body.dark .status-card .status-copy p{
  color:#dbe7f5!important;
}
body.dark .status-card .shift-badge{
  background:#17345f!important;
  color:#bfdbfe!important;
  border:1px solid rgba(147,197,253,.15);
}
body.dark .status-card .status-metrics div{
  background:#132238!important;
  border-color:rgba(255,255,255,.08)!important;
}
body.dark .status-card .progress-ring{
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.18));
}
body.dark .status-card .progress-ring:before{
  background:#132238!important;
}
body.dark .status-card .rotation-current.night{
  background:#312e81!important;
  color:#e0e7ff!important;
}
body.dark .status-card .rotation-current.day{
  background:#4a3210!important;
  color:#fde68a!important;
}


/* ===== KPC Time v2.3.2 Official Logo ===== */
.logo-avatar{
  width:48px;
  height:48px;
  border-radius:var(--r-3);
  overflow:hidden;
  background:var(--c-white)!important;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 28px rgba(15,92,168,.22);
}
.logo-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.about-logo,
.about-big-logo{
  overflow:hidden;
  background:var(--c-white)!important;
  padding:0!important;
}
.about-logo img,
.about-big-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
body.dark .logo-avatar,
body.dark .about-logo,
body.dark .about-big-logo{
  background:var(--c-white)!important;
  border-color:rgba(255,255,255,.10);
}


/* ===== KPC Time v2.3.3 Final Mobile Calendar + Logo Fix ===== */
.logo-avatar{
  width:52px!important;
  height:52px!important;
  border-radius:17px!important;
  padding:3px!important;
  background:var(--c-white)!important;
  overflow:hidden!important;
}
.logo-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
}
.about-logo img,
.about-big-logo img{
  object-fit:contain!important;
  object-position:center!important;
}

/* Calendar cells: exact centering and stronger legibility */
.calendar-grid{
  align-items:stretch;
}
.day-cell{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  overflow:hidden!important;
}
.day-cell button{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
}
.day-cell .num{
  display:block!important;
  width:100%!important;
  text-align:center!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:800!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
.day-cell .mark{
  flex:0 0 auto!important;
  margin-top:7px!important;
}
.day-cell.today .num{
  font-weight:900!important;
}
.rotation-badge{
  top:3px!important;
  right:3px!important;
}
.holiday-work-badge{
  bottom:2px!important;
  right:50%!important;
  transform:translateX(50%)!important;
}
.holiday-label{
  right:50%!important;
  transform:translateX(50%)!important;
  bottom:2px!important;
  max-width:92%!important;
  text-align:center!important;
}

@media(max-width:390px){
  .week-row,
  .calendar-grid{
    gap:4px!important;
  }
  .day-cell{
    aspect-ratio:1/1!important;
    border-radius:var(--r-2)!important;
  }
  .day-cell .num{
    font-size:17px!important;
  }
  .day-cell .mark{
    width:7px!important;
    height:7px!important;
    margin-top:6px!important;
  }
  .rotation-badge{
    font-size:6.5px!important;
    min-width:17px!important;
    height:14px!important;
  }
  .holiday-work-badge,
  .holiday-label{
    font-size:6.5px!important;
  }
}

@media(max-width:340px){
  .day-cell .num{
    font-size:var(--fs-xl)!important;
  }
}


/* ===== KPC Time v2.3.4 Definitive Mobile Number Fix ===== */

/* iOS Safari can apply its own button text color unless explicitly reset */
.calendar-grid .day-cell button{
  -webkit-appearance:none!important;
  appearance:none!important;
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  opacity:1!important;
  font-family:Tahoma,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  text-decoration:none!important;
  border:none!important;
  outline:none!important;
  background:transparent!important;
  touch-action:manipulation;
}

/* The day number itself must always be above marks and badges */
.calendar-grid .day-cell .num{
  position:relative!important;
  z-index:4!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:auto!important;
  min-height:22px!important;
  color:var(--c-slate-900)!important;
  -webkit-text-fill-color:var(--c-slate-900)!important;
  opacity:1!important;
  visibility:visible!important;
  font-family:Tahoma,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:19px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:0!important;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  margin:0!important;
  padding:0!important;
}

/* Dark theme */

body.dark .calendar-grid .day-cell .num{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
}

/* Specific state colors should remain readable */
.calendar-grid .day-cell.holiday-work .num{
  color:#be123c!important;
  -webkit-text-fill-color:#be123c!important;
}
body.dark .calendar-grid .day-cell.holiday-work .num{
  color:var(--c-rose-200)!important;
  -webkit-text-fill-color:var(--c-rose-200)!important;
}

/* Make cell height predictable instead of depending only on aspect-ratio */
.calendar-grid .day-cell{
  min-height:46px!important;
  aspect-ratio:1 / 1!important;
}
.calendar-grid .day-cell button{
  min-height:46px!important;
}

/* Keep dots below the number without pushing it off-center */
.calendar-grid .day-cell .mark{
  position:relative!important;
  z-index:3!important;
  display:block!important;
  margin:5px auto 0!important;
}

/* Empty cells should never show browser button artifacts */
.calendar-grid .day-cell.empty{
  min-height:46px!important;
  border-color:transparent!important;
}

/* Mobile-first sizing */
@media(max-width:430px){
  .calendar-grid{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:4px!important;
  }
  .calendar-grid .day-cell,
  .calendar-grid .day-cell button{
    min-height:45px!important;
  }
  .calendar-grid .day-cell .num{
    font-size:var(--fs-2xl)!important;
    min-height:21px!important;
  }
}

@media(max-width:390px){
  .calendar-grid .day-cell,
  .calendar-grid .day-cell button{
    min-height:43px!important;
  }
  .calendar-grid .day-cell .num{
    font-size:var(--fs-2xl)!important;
  }
}

@media(max-width:350px){
  .calendar-grid{
    gap:3px!important;
  }
  .calendar-grid .day-cell,
  .calendar-grid .day-cell button{
    min-height:39px!important;
  }
  .calendar-grid .day-cell .num{
    font-size:16px!important;
  }
}

/* Prevent badges from covering the central number */
.calendar-grid .rotation-badge{
  z-index:7!important;
  top:2px!important;
  right:2px!important;
}
.calendar-grid .holiday-work-badge,
.calendar-grid .holiday-label{
  z-index:6!important;
  bottom:1px!important;
}


/* ===== KPC Time v2.3.5 Font + Install Icon Fix ===== */
button,.button,.primary,.secondary,.danger,.file-label,.file-label-text,input,select,textarea{
  font-family:Tahoma,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-style:normal!important;letter-spacing:0!important;
}
.file-label{width:100%;min-height:44px;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:11px 14px!important;border-radius:14px!important;cursor:pointer;line-height:1.4!important;font-size:14px!important;font-weight:500!important;color:var(--brand-ink)!important;-webkit-text-fill-color:var(--brand-ink)!important;-webkit-appearance:none!important;appearance:none!important}
.file-label-text{display:block;width:100%;text-align:center;font:inherit!important;color:inherit!important;-webkit-text-fill-color:inherit!important}
body.dark .file-label{background:#16325a!important;border-color:rgba(255,255,255,.08)!important}
.install-button{display:grid;place-items:center;color:var(--c-slate-900)!important;-webkit-text-fill-color:var(--c-slate-900)!important;background:var(--c-white)!important;border:1px solid var(--line)!important;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.install-button[hidden]{display:none!important}
.install-glyph{display:block;color:currentColor!important;-webkit-text-fill-color:currentColor!important;font-family:Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:var(--fs-4xl)!important;font-weight:700!important;line-height:1!important;transform:translateY(-1px)}
body.dark .install-button{color:#f8fafc!important;-webkit-text-fill-color:#f8fafc!important;background:#132238!important;border-color:rgba(255,255,255,.09)!important}
body.dark .install-glyph{color:#f8fafc!important;-webkit-text-fill-color:#f8fafc!important}
@media(max-width:390px){.file-label{font-size:var(--fs-lg)!important}.install-glyph{font-size:22px!important}}

/* ===== KPC Time v2.4.0 Local Font Selector ===== */
@font-face{font-family:"KPC-IRANSans";src:url("./fonts/iran2.woff") format("woff");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"KPC-IRANYekan";src:url("./fonts/iranyekan.woff") format("woff");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"KPC-Time";src:url("./fonts/iran1.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}

html[data-text-font="system"]{--text-font:Tahoma,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html[data-text-font="iransans"]{--text-font:"KPC-IRANSans",Tahoma,Arial,sans-serif}
html[data-text-font="iranyekan"]{--text-font:"KPC-IRANYekan",Tahoma,Arial,sans-serif}
html[data-number-font="same"]{--number-font:var(--text-font)}
html[data-number-font="system"]{--number-font:Tahoma,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html[data-number-font="iransans"]{--number-font:"KPC-IRANSans",Tahoma,Arial,sans-serif}
html[data-number-font="iranyekan"]{--number-font:"KPC-IRANYekan",Tahoma,Arial,sans-serif}
html[data-number-font="time"]{--number-font:"KPC-Time",var(--text-font)}
body,button,input,select,textarea,label,.file-label,.file-label-text{font-family:var(--text-font)!important}
.day-cell .num,.progress-ring strong,.status-metrics b,.weather-temp strong,.report-card b,.month-bar span,#cycleDay,#remainingDays,#periodStart,#periodEnd,#routeDate{font-family:var(--number-font)!important}


/* ===== KPC Time v2.5.0 Official Iran Holidays ===== */
.official-calendar-info{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:11px;margin:10px 0 14px;padding:12px;border-radius:var(--r-3);background:#fff7ed;border:1px solid #fed7aa}
.official-calendar-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#ffedd5;font-size:23px}
.official-calendar-info b,.official-calendar-info span,.official-calendar-info small{display:block}
.official-calendar-info b{color:var(--info-ink);font-size:var(--fs-lg)}
.official-calendar-info span{margin-top:3px;color:#c2410c;font-size:var(--fs-sm)}
.official-calendar-info small{margin-top:4px;color:var(--info-ink);font-size:var(--fs-2xs);line-height:1.7}
.day-cell.official-holiday{background:#fff1f2!important;border-color:rgba(225,29,72,.38)!important}
.day-cell.official-holiday .num{color:#be123c!important;-webkit-text-fill-color:#be123c!important}
.official-holiday-badge{position:absolute;z-index:6;left:50%;bottom:2px;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:13px;padding:0 4px;border-radius:var(--r-pill);background:var(--c-rose-600);color:var(--c-white)!important;-webkit-text-fill-color:var(--c-white)!important;font-size:6px;font-weight:800;line-height:1;white-space:nowrap}
.day-cell.official-holiday.holiday-work .official-holiday-badge{display:none}
.selected-holiday-info{margin:10px 0 12px;padding:11px 12px;border-radius:14px;background:#fff1f2;border:1px solid var(--c-rose-200)}
.selected-holiday-info span{display:block;color:var(--c-rose-600);font-size:var(--fs-xs);font-weight:800}
.selected-holiday-info b{display:block;margin-top:5px;color:#9f1239;font-size:var(--fs-lg);line-height:1.8}
body.dark .official-calendar-info{background:#321923;border-color:#6b2339}
body.dark .official-calendar-icon{background:#4c1d2c}
body.dark .official-calendar-info b,body.dark .official-calendar-info span,body.dark .official-calendar-info small{color:var(--c-rose-200)}
body.dark .day-cell.official-holiday{background:#321923!important;border-color:#9f3657!important}
body.dark .day-cell.official-holiday .num{color:var(--c-rose-200)!important;-webkit-text-fill-color:var(--c-rose-200)!important}
body.dark .selected-holiday-info{background:#321923;border-color:#6b2339}
body.dark .selected-holiday-info span,body.dark .selected-holiday-info b{color:var(--c-rose-200)}
@media(max-width:390px){.official-holiday-badge{min-width:23px;height:12px;font-size:5.5px}}


/* ===== KPC Time v2.5.1 Clean Settings + Yekan Default ===== */
.settings-section-title{
  margin:28px 0 12px!important;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(90deg,rgba(47,109,246,.10),rgba(6,182,212,.06));
  border:1px solid rgba(47,109,246,.12);
  color:var(--text);
  font-size:var(--fs-2xl)!important;
  font-weight:800!important;
}
body.dark .settings-section-title{
  background:linear-gradient(90deg,rgba(59,130,246,.16),rgba(6,182,212,.08));
  border-color:rgba(147,197,253,.12);
}


/* ===== KPC Time 3.0 Alpha: Four Main User Paths ===== */

body{background:linear-gradient(180deg,var(--c-slate-50) 0,var(--c-blue-50) 100%);color:var(--ink)}
body.dark{--surface:#111f31;--surface-2:#0c1827;--nav:#101d2e;--accent:#60a5fa;--accent-soft:#172f50;--ink:var(--c-slate-50);background:linear-gradient(180deg,#07111e,#0b1625)}
.topbar{position:sticky;top:0;z-index:30;padding-top:max(12px,env(safe-area-inset-top));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.identity h1{font-size:var(--fs-2xl)}.identity p{font-size:var(--fs-sm)}.top-actions{gap:7px}.header-icon{width:42px;height:42px;border-radius:14px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 18px rgba(15,35,60,.06)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main{max-width:760px;padding-bottom:140px}.view{animation:viewEnter .28s ease}@keyframes viewEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.page-intro{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 2px 14px}.page-intro h2{margin:3px 0 0;font-size:var(--fs-4xl);letter-spacing:-.4px}.page-kicker{font-size:var(--fs-xs);font-weight:800;color:var(--accent)}
.mini-action{border:0;border-radius:13px;padding:9px 13px;background:var(--accent-soft);color:var(--accent);font-weight:800;font-family:inherit}
.today-shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px}.today-shortcuts button{border:1px solid var(--line);border-radius:17px;background:var(--surface);min-height:70px;display:grid;place-items:center;align-content:center;gap:5px;color:var(--ink);font-family:inherit;box-shadow:0 8px 24px rgba(19,49,84,.05)}.today-shortcuts span{font-size:20px;color:var(--accent)}.today-shortcuts b{font-size:var(--fs-xs)}
.status-card,.panel,.weather-card,.route-card{border-radius:var(--radius-xl)!important;box-shadow:var(--shadow-soft)!important;border:1px solid color-mix(in srgb,var(--line) 75%,transparent)!important}.status-card{background:linear-gradient(145deg,#0f315d,#145c9c)!important}.home-calendar{margin-top:13px}.calendar-main{padding-bottom:18px}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}.quick-grid button{min-height:112px;text-align:right;border:1px solid var(--line);border-radius:var(--r-4);background:var(--surface);color:var(--ink);padding:16px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:11px;box-shadow:var(--shadow-soft);font-family:inherit}.quick-grid button>span{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--accent-soft);color:var(--accent);font-size:20px}.quick-grid b{align-self:end;font-size:14px}.quick-grid small{align-self:start;color:var(--muted);font-size:var(--fs-2xs);margin-top:4px}.records-panel{margin-top:4px}
.month-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.month-summary div{padding:12px 6px;border:1px solid var(--line);border-radius:17px;background:var(--surface);text-align:center;box-shadow:0 7px 22px rgba(15,40,70,.04)}.month-summary span{display:block;color:var(--muted);font-size:8px}.month-summary b{display:block;margin-top:5px;font-size:var(--fs-xl)}
.settings-section-title{margin-top:25px!important;padding-top:17px;border-top:1px solid var(--line)}.settings-panel{overflow:visible}.report-main{min-height:360px}
.persistent-footer{bottom:92px!important;opacity:.72}.bottom-nav.four-paths{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));height:74px;border-radius:24px;padding:8px;background:color-mix(in srgb,var(--nav) 94%,transparent);box-shadow:0 18px 48px rgba(5,22,44,.18);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.four-paths .tab{border-radius:var(--r-3);gap:3px}.four-paths .tab span{font-size:20px}.four-paths .tab b{font-size:var(--fs-2xs)}.four-paths .tab.active{background:var(--accent-soft);color:var(--accent)}.four-paths .quick-tab{position:relative}.four-paths .quick-tab span{width:40px;height:40px;border-radius:14px;background:var(--accent);color:var(--c-white);display:grid;place-items:center;margin-top:-17px;box-shadow:0 9px 22px rgba(23,105,224,.28)}.four-paths .quick-tab.active span{background:var(--accent)}
@media(max-width:430px){main{padding-left:12px;padding-right:12px}.page-intro h2{font-size:var(--fs-3xl)}.today-shortcuts{gap:6px}.today-shortcuts button{min-height:64px;border-radius:15px}.today-shortcuts b{font-size:var(--fs-2xs)}.quick-grid{gap:8px}.quick-grid button{min-height:104px;padding:13px}.month-summary{gap:5px}.month-summary div{padding:10px 3px}.persistent-footer{font-size:7px!important}.bottom-nav.four-paths{left:8px;right:8px}}


/* ===== KPC Time 3.0 Alpha 2 — Mobile Layout Repair ===== */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

body{
  margin:0!important;
}

#app,
main,
.view,
.panel,
.status-card,
.settings-panel{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

main{
  width:100%!important;
  margin:0 auto!important;
  padding-bottom:calc(116px + env(safe-area-inset-bottom))!important;
}

/* Remove inherited five-tab positioning rules */
.bottom-nav.four-paths{
  right:auto!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:calc(100% - 24px)!important;
  max-width:536px!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  height:auto!important;
  min-height:74px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

.bottom-nav.four-paths .tab{
  min-width:0!important;
  width:100%!important;
  padding:8px 2px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

.bottom-nav.four-paths .tab b{
  display:block!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Footer version should not float on top of long forms on mobile */
.persistent-footer{
  right:auto!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:calc(100% - 34px)!important;
  max-width:516px!important;
  box-sizing:border-box!important;
}

.settings-panel{
  overflow:hidden!important;
}

.settings-panel input,
.settings-panel select,
.settings-panel textarea,
.settings-panel button,
.settings-panel label{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

.date-grid,
.form-grid,
.form-grid.two{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

.date-grid > *,
.form-grid > *{
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
}

@media(max-width:600px){
  .persistent-footer{
    display:none!important;
  }

  main{
    padding-left:12px!important;
    padding-right:12px!important;
    padding-bottom:calc(104px + env(safe-area-inset-bottom))!important;
  }

  .bottom-nav.four-paths{
    width:calc(100% - 16px)!important;
    left:50%!important;
    right:auto!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    border-radius:var(--r-4)!important;
    padding:7px!important;
  }

  .four-paths .quick-tab span{
    margin-top:-13px!important;
  }

  .settings-section-title{
    margin-top:22px!important;
  }

  .date-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }

  .form-grid.two{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
}

@media(max-width:360px){
  main{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .bottom-nav.four-paths{
    width:calc(100% - 12px)!important;
    padding:6px 4px!important;
  }

  .bottom-nav.four-paths .tab b{
    font-size:8px!important;
  }

  .bottom-nav.four-paths .tab span{
    font-size:var(--fs-2xl)!important;
  }
}


/* ===== KPC Time 3.0 Alpha 3 — Calendar controls and summary ===== */
.calendar-page-intro{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  text-align:center!important;
  margin-bottom:18px!important;
}
.calendar-intro-copy{
  text-align:center!important;
}
.calendar-today-button{
  min-width:158px;
  min-height:48px;
  padding:10px 18px;
  border:1px solid rgba(37,99,235,.16);
  border-radius:var(--r-3);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--c-blue-50);
  color:var(--c-blue-600);
  -webkit-text-fill-color:var(--c-blue-600);
  font-family:var(--app-font)!important;
  box-shadow:0 8px 22px rgba(37,99,235,.10);
}
.calendar-today-button span{
  font-size:20px;
  line-height:1;
}
.calendar-today-button b{
  font-size:var(--fs-lg);
  font-weight:800;
  white-space:nowrap;
}
.calendar-today-button:active{
  transform:scale(.98);
}

.month-summary{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
  margin-top:14px!important;
}
.month-summary>div{
  min-width:0!important;
  min-height:92px!important;
  padding:12px 6px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:18px!important;
  background:var(--card)!important;
  border:1px solid var(--line)!important;
  box-sizing:border-box!important;
}
.month-summary span{
  display:block!important;
  color:var(--muted)!important;
  font-size:var(--fs-xs)!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.month-summary b{
  display:block!important;
  margin-top:9px!important;
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  font-size:23px!important;
  line-height:1!important;
  font-weight:900!important;
  text-align:center!important;
}

body.dark .calendar-today-button{
  background:#17345f!important;
  border-color:rgba(147,197,253,.16)!important;
  color:#bfdbfe!important;
  -webkit-text-fill-color:#bfdbfe!important;
}

@media(max-width:390px){
  .month-summary{
    gap:7px!important;
  }
  .month-summary>div{
    min-height:84px!important;
    padding:10px 3px!important;
    border-radius:var(--r-3)!important;
  }
  .month-summary span{
    font-size:8px!important;
  }
  .month-summary b{
    font-size:var(--fs-3xl)!important;
  }
}


/* ===== KPC Time 3.0 Alpha 4 — Stability and readability ===== */

/* Light theme status card has a dark gradient, so its primary text must be light. */
body:not(.dark) .status-card .eyebrow{
  color:#cfe2f7!important;
  -webkit-text-fill-color:#cfe2f7!important;
}
body:not(.dark) .status-card .status-copy h2{
  color:var(--c-white)!important;
  -webkit-text-fill-color:var(--c-white)!important;
}
body:not(.dark) .status-card .status-copy p{
  color:var(--c-blue-50)!important;
  -webkit-text-fill-color:var(--c-blue-50)!important;
}
body:not(.dark) .status-card .shift-badge{
  color:#dbeafe!important;
  -webkit-text-fill-color:#dbeafe!important;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
body:not(.dark) .status-card .progress-ring small{
  color:var(--c-slate-500)!important;
  -webkit-text-fill-color:var(--c-slate-500)!important;
}
body:not(.dark) .status-card .progress-ring strong{
  color:var(--c-slate-900)!important;
  -webkit-text-fill-color:var(--c-slate-900)!important;
}

/* Safari renders the file-upload label differently from buttons unless every metric is explicit. */
.backup-actions{
  align-items:stretch!important;
}
.backup-actions > .secondary,
.backup-actions > .file-label{
  width:100%!important;
  min-height:46px!important;
  height:46px!important;
  margin:0!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:14px!important;
  box-sizing:border-box!important;
  font-family:var(--text-font)!important;
  font-size:var(--fs-lg)!important;
  font-weight:500!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-align:center!important;
  color:var(--brand-ink)!important;
  -webkit-text-fill-color:var(--brand-ink)!important;
  background:var(--brand-soft)!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
.backup-actions .file-label-text{
  width:auto!important;
  display:inline!important;
  margin:0!important;
  padding:0!important;
  font-family:inherit!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:inherit!important;
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
}


/* Make month summary values unmistakably visible. */
.month-summary b{
  opacity:1!important;
  visibility:visible!important;
  color:var(--c-slate-900)!important;
  -webkit-text-fill-color:var(--c-slate-900)!important;
}
body.dark .month-summary b{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
}


/* ===== KPC Time 3.0 Alpha 5 — Cleaner Home + Rotation Symbols ===== */

/* Home calendar today button */
.home-calendar .calendar-head > div{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
}
.home-today-button{
  min-width:150px!important;
  min-height:44px!important;
  margin:0 auto!important;
}
.home-today-button span{
  font-size:19px!important;
}
.home-today-button b{
  font-size:var(--fs-md)!important;
}

/* Remove any leftover duplicate quick actions if old markup remains */
.home-quick-actions,
.quick-actions-panel,
.quick-actions-grid,
.quick-actions{
  display:none!important;
}

/* Rotation indicators use symbols, not words */
.rotation-badge{
  width:20px!important;
  min-width:20px!important;
  height:20px!important;
  padding:0!important;
  border-radius:var(--r-circle)!important;
  display:grid!important;
  place-items:center!important;
  font-family:Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:var(--fs-lg)!important;
  font-weight:900!important;
  line-height:1!important;
  top:3px!important;
  right:3px!important;
  box-shadow:0 4px 10px rgba(15,23,42,.14)!important;
}
.rotation-badge.day{
  background:#fff7d6!important;
  color:#d97706!important;
  -webkit-text-fill-color:#d97706!important;
  border:1px solid rgba(245,158,11,.28)!important;
}
.rotation-badge.night{
  background:#eef2ff!important;
  color:#4338ca!important;
  -webkit-text-fill-color:var(--night-ink)!important;
  border:1px solid rgba(79,70,229,.24)!important;
}
body.dark .rotation-badge.day{
  background:#4a3210!important;
  color:#fde68a!important;
  -webkit-text-fill-color:#fde68a!important;
  border-color:rgba(251,191,36,.28)!important;
}
body.dark .rotation-badge.night{
  background:#25215f!important;
  color:#c7d2fe!important;
  border-color:rgba(129,140,248,.3)!important;
}

/* Keep day number fully visible */
.day-cell .num{
  position:relative!important;
  z-index:4!important;
}
.day-cell.has-note .rotation-badge{
  right:3px!important;
  left:auto!important;
}

@media(max-width:390px){
  .rotation-badge{
    width:18px!important;
    min-width:18px!important;
    height:18px!important;
    font-size:var(--fs-md)!important;
    top:2px!important;
    right:2px!important;
  }
  .home-today-button{
    min-width:142px!important;
    min-height:42px!important;
  }
}


/* ===== KPC Time 3.0 Alpha 6 — Dashboard cleanup ===== */

/* Permanently remove legacy duplicate shortcut containers */
.dashboard-shortcuts,
.today-shortcuts,
.quick-cards,
.shortcut-grid,
.home-actions,
.home-quick-actions,
.quick-actions-panel,
.quick-actions-grid,
.quick-actions,
.quick-add,
.dashboard-add{
  display:none!important;
}

/* Compact dashboard intro after removing shortcut cards */
#todayView .page-intro,
.today-view .page-intro{
  margin-bottom:14px!important;
}
#todayView .page-intro h2,
.today-view .page-intro h2{
  margin-bottom:0!important;
}

/* Bottom navigation: all four items must share the same vertical baseline */
.bottom-nav.four-paths{
  align-items:stretch!important;
}
.bottom-nav.four-paths .tab,
.bottom-nav.four-paths .quick-tab{
  height:64px!important;
  min-height:64px!important;
  margin:0!important;
  padding:7px 2px!important;
  transform:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  box-sizing:border-box!important;
}
.bottom-nav.four-paths .quick-tab span{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:25px!important;
  line-height:1!important;
  color:var(--c-blue-600)!important;
  -webkit-text-fill-color:var(--c-blue-600)!important;
}
.bottom-nav.four-paths .quick-tab b{
  margin:0!important;
  transform:none!important;
}
.bottom-nav.four-paths .quick-tab.active{
  background:var(--c-blue-50)!important;
  border-radius:17px!important;
}
body.dark .bottom-nav.four-paths .quick-tab.active{
  background:#17345f!important;
}
body.dark .bottom-nav.four-paths .quick-tab span{
  color:#93c5fd!important;
  -webkit-text-fill-color:#93c5fd!important;
}

@media(max-width:390px){
  .bottom-nav.four-paths .tab,
  .bottom-nav.four-paths .quick-tab{
    height:60px!important;
    min-height:60px!important;
    padding:6px 1px!important;
  }
  .bottom-nav.four-paths .quick-tab span{
    font-size:23px!important;
  }
}


/* ===== KPC Time 3.0 Alpha 7 — final visual polish ===== */

/* Rotation symbol: bottom-right, compact, never covering the day number */
.calendar-grid .rotation-badge,
.home-calendar .rotation-badge{
  position:absolute!important;
  top:auto!important;
  right:4px!important;
  bottom:4px!important;
  left:auto!important;
  width:15px!important;
  min-width:15px!important;
  height:15px!important;
  padding:0!important;
  border-radius:var(--r-circle)!important;
  display:grid!important;
  place-items:center!important;
  font-size:var(--fs-xs)!important;
  line-height:1!important;
  z-index:8!important;
  box-shadow:none!important;
}
.calendar-grid .rotation-badge.day,
.home-calendar .rotation-badge.day{
  background:var(--work-soft)!important;
  color:var(--work-ink)!important;
  -webkit-text-fill-color:var(--work-ink)!important;
  border:1px solid rgba(245,158,11,.28)!important;
}
.calendar-grid .rotation-badge.night,
.home-calendar .rotation-badge.night{
  background:var(--night-soft)!important;
  color:var(--night-ink)!important;
  -webkit-text-fill-color:var(--night-ink)!important;
  border:1px solid rgba(79,70,229,.22)!important;
}



/* Avoid collision with status dot and holiday badges */
.day-cell .mark{
  margin-top:5px!important;
}
.day-cell.official-holiday .rotation-badge,
.day-cell.holiday-work .rotation-badge{
  bottom:18px!important;
}
.day-cell.has-note .rotation-badge{
  right:4px!important;
  left:auto!important;
}

/* Uniform typography for all settings action buttons */
#restartOnboardingBtn,
#exportBtn,
#shareConfigBtn,
.backup-actions .secondary,
.backup-actions .file-label,
.backup-actions .file-label-text{
  font-family:var(--text-font)!important;
  font-size:var(--fs-lg)!important;
  font-weight:500!important;
  font-style:normal!important;
  letter-spacing:0!important;
  line-height:1.35!important;
  -webkit-font-smoothing:antialiased;
}
#restartOnboardingBtn{
  min-height:46px!important;
  height:46px!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

/* Long Persian restore label should remain centered and readable */
.backup-actions .file-label{
  min-height:48px!important;
  height:auto!important;
  padding:10px 12px!important;
}
.backup-actions .file-label-text{
  white-space:normal!important;
  text-align:center!important;
}

/* Better spacing for backup section */
.backup-actions{
  gap:9px!important;
}

@media(max-width:390px){
  .calendar-grid .rotation-badge,
  .home-calendar .rotation-badge{
    width:14px!important;
    min-width:14px!important;
    height:14px!important;
    right:3px!important;
    bottom:3px!important;
    font-size:var(--fs-2xs)!important;
  }
  .day-cell.official-holiday .rotation-badge,
  .day-cell.holiday-work .rotation-badge{
    bottom:16px!important;
  }
  #restartOnboardingBtn,
  #exportBtn,
  #shareConfigBtn,
  .backup-actions .file-label,
  .backup-actions .file-label-text{
    font-size:var(--fs-md)!important;
  }
}


/* ===== KPC Time 3.0 Alpha 8 — rotation icon fixed position + clean onboarding ===== */

/* Fixed and identical location: vertically centered on the left side of every day cell */
.calendar-grid .rotation-badge,
.home-calendar .rotation-badge{
  position:absolute!important;
  top:50%!important;
  left:4px!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:16px!important;
  min-width:16px!important;
  height:16px!important;
  padding:0!important;
  margin:0!important;
  border-radius:var(--r-circle)!important;
  display:grid!important;
  place-items:center!important;
  font-size:var(--fs-xs)!important;
  line-height:1!important;
  z-index:8!important;
  box-shadow:none!important;
}

/* State-specific rules must not move the rotation icon */
.day-cell.official-holiday .rotation-badge,
.day-cell.holiday-work .rotation-badge,
.day-cell.has-note .rotation-badge{
  top:50%!important;
  left:4px!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
}

/* Give day number a little safe room from the icon */
.day-cell .num{
  padding-left:17px!important;
  padding-right:2px!important;
  box-sizing:border-box!important;
}

/* Placeholder styling */
.onboarding input::placeholder{
  color:var(--c-slate-400)!important;
  opacity:1!important;
  font-weight:400!important;
}
body.dark .onboarding input::placeholder{
  color:var(--c-slate-500)!important;
}

/* Safari-specific placeholder behavior */
.onboarding input::-webkit-input-placeholder{
  color:var(--c-slate-400)!important;
  opacity:1!important;
}
body.dark .onboarding input::-webkit-input-placeholder{
  color:var(--c-slate-500)!important;
}

@media(max-width:390px){
  .calendar-grid .rotation-badge,
  .home-calendar .rotation-badge{
    width:15px!important;
    min-width:15px!important;
    height:15px!important;
    left:3px!important;
    font-size:var(--fs-2xs)!important;
  }
  .day-cell.official-holiday .rotation-badge,
  .day-cell.holiday-work .rotation-badge,
  .day-cell.has-note .rotation-badge{
    left:3px!important;
  }
  .day-cell .num{
    padding-left:15px!important;
  }
}


/* ===== KPC Time 3.0 Alpha 9 — final rotation icon layout ===== */

/* Keep icon at a fixed visual anchor on the far left */
.calendar-grid .rotation-badge,
.home-calendar .rotation-badge{
  position:absolute!important;
  top:50%!important;
  left:2px!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:12px!important;
  min-width:12px!important;
  height:12px!important;
  padding:0!important;
  margin:0!important;
  border-radius:var(--r-circle)!important;
  display:grid!important;
  place-items:center!important;
  font-size:8px!important;
  line-height:1!important;
  z-index:9!important;
  box-shadow:none!important;
  pointer-events:none!important;
}

/* Prevent all state selectors from moving the icon */
.day-cell.official-holiday .rotation-badge,
.day-cell.holiday-work .rotation-badge,
.day-cell.has-note .rotation-badge{
  top:50%!important;
  left:2px!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
}

/* Move the day number slightly right while preserving vertical centering */
.calendar-grid .day-cell .num,
.home-calendar .day-cell .num{
  width:100%!important;
  padding:0!important;
  text-align:center!important;
  transform:translateX(5px)!important;
  box-sizing:border-box!important;
}

/* Keep dot and labels centered independently */
.calendar-grid .day-cell .mark,
.home-calendar .day-cell .mark{
  transform:none!important;
}

@media(max-width:390px){
  .calendar-grid .rotation-badge,
  .home-calendar .rotation-badge{
    width:11px!important;
    min-width:11px!important;
    height:11px!important;
    left:1px!important;
    font-size:7px!important;
  }

  .day-cell.official-holiday .rotation-badge,
  .day-cell.holiday-work .rotation-badge,
  .day-cell.has-note .rotation-badge{
    left:1px!important;
  }

  .calendar-grid .day-cell .num,
  .home-calendar .day-cell .num{
    transform:translateX(4px)!important;
  }
}


/* ===== KPC Time 3.0 Alpha 10 — Responsive mobile/tablet/desktop ===== */

/* Base safety */
html,body{
  width:100%;
  min-height:100%;
  overflow-x:hidden!important;
}
#app,main,.view,.panel,.status-card,.weather-card,.route-card{
  box-sizing:border-box!important;
  min-width:0!important;
}

/* Mobile remains the default layout */
#app{
  width:100%!important;
  margin-inline:auto!important;
}

/* Tablet */
@media(min-width:768px) and (max-width:1199px){
  #app{
    max-width:900px!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }

  main{
    max-width:900px!important;
    margin-inline:auto!important;
  }

  .status-card{
    grid-template-columns:minmax(0,1fr) 132px!important;
    padding:24px!important;
  }

  .progress-ring{
    width:132px!important;
    height:132px!important;
  }

  .calendar-main,
  .home-calendar{
    max-width:820px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .weather-card,
  .route-card{
    max-width:820px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .bottom-nav.four-paths{
    max-width:720px!important;
  }
}

/* Desktop / Laptop */
@media(min-width:1200px){
  body{
    background:
      radial-gradient(circle at 10% 0%,rgba(37,99,235,.08),transparent 30%),
      linear-gradient(180deg,var(--bg),var(--bg))!important;
  }

  #app{
    max-width:1120px!important;
    padding:24px 28px 44px!important;
    margin-inline:auto!important;
  }

  main{
    width:100%!important;
    max-width:1120px!important;
    margin-inline:auto!important;
    padding:0!important;
  }

  .topbar{
    max-width:1040px!important;
    margin:0 auto 22px!important;
  }

  .view{
    max-width:1040px!important;
    margin-inline:auto!important;
  }

  /* Cards stop stretching across the full monitor */
  .status-card{
    max-width:1040px!important;
    margin-inline:auto!important;
    grid-template-columns:minmax(0,1fr) 150px!important;
    gap:22px!important;
    padding:26px 28px!important;
    border-radius:30px!important;
  }

  .status-copy h2{
    font-size:36px!important;
  }

  .progress-ring{
    width:150px!important;
    height:150px!important;
  }

  .status-metrics{
    gap:14px!important;
  }

  .status-metrics div{
    min-height:78px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  /* Calendar has a readable maximum width */
  .calendar-main,
  .home-calendar{
    width:100%!important;
    max-width:860px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:24px!important;
  }

  .calendar-grid{
    max-width:780px!important;
    margin-inline:auto!important;
    gap:8px!important;
  }

  .week-row{
    max-width:780px!important;
    margin-inline:auto!important;
    gap:8px!important;
  }

  .day-cell{
    min-height:74px!important;
    border-radius:var(--r-3)!important;
  }

  .day-cell .num{
    font-size:22px!important;
  }

  .month-summary{
    max-width:860px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .month-summary>div{
    min-height:110px!important;
  }

  /* Weather and secondary content */
  .weather-card,
  .route-card,
  .panel:not(.calendar-main):not(.home-calendar){
    max-width:860px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Forms become comfortable but not too wide */
  .settings-panel,
  #settingsView .panel{
    max-width:860px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .form-grid.two{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }

  /* Desktop navigation becomes a compact vertical side rail */
  .bottom-nav.four-paths{
    position:fixed!important;
    left:24px!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:96px!important;
    max-width:none!important;
    min-height:350px!important;
    height:auto!important;
    padding:10px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(4,1fr)!important;
    gap:8px!important;
    border-radius:26px!important;
    z-index:30!important;
  }

  .bottom-nav.four-paths .tab,
  .bottom-nav.four-paths .quick-tab{
    width:100%!important;
    height:76px!important;
    min-height:76px!important;
    padding:9px 4px!important;
    border-radius:18px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
  }

  .bottom-nav.four-paths .tab span,
  .bottom-nav.four-paths .quick-tab span{
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
    border-radius:0!important;
    font-size:23px!important;
    color:inherit!important;
    -webkit-text-fill-color:currentColor!important;
  }

  .bottom-nav.four-paths .tab b{
    font-size:var(--fs-xs)!important;
  }

  .bottom-nav.four-paths .tab.active,
  .bottom-nav.four-paths .quick-tab.active{
    background:var(--accent-soft)!important;
    color:var(--accent)!important;
  }

  /* Floating footer is unnecessary on desktop */
  .persistent-footer{
    display:none!important;
  }

  /* Avoid content sitting behind the side rail */
  @supports(padding:max(0px)){
    body{
      padding-left:0!important;
    }
  }
}

/* Very large monitors: keep the app human-sized */
@media(min-width:1600px){
  #app,main{
    max-width:1180px!important;
  }

  .view,.topbar,.status-card{
    max-width:1080px!important;
  }
}


/* ===== KPC Time 3.0 Alpha 11 — Optional rotation UI ===== */

/* Hidden by default until JavaScript confirms rotation is enabled */
.rotation-legend-item{
  display:none!important;
}

/* Show rotation legend only for rotating-shift users */
html.rotation-enabled .rotation-legend-item{
  display:inline-flex!important;
}

/* Non-rotation users should see no rotation symbol or colored outline at all */
html.rotation-disabled .rotation-badge,
html.rotation-disabled .rotation-current{
  display:none!important;
}

html.rotation-disabled .day-cell.rotation-night,
html.rotation-disabled .day-cell.rotation-day{
  box-shadow:none!important;
  border-color:var(--line)!important;
}

/* Restore normal state border/background priorities for non-rotation users */
html.rotation-disabled .day-cell.work{
  border-color:transparent!important;
}
html.rotation-disabled .day-cell.rest{
  border-color:transparent!important;
}
html.rotation-disabled .day-cell.travel{
  border-color:rgba(245,158,11,.35)!important;
}
html.rotation-disabled .day-cell.today{
  border-color:#111827!important;
}
html.rotation-disabled .day-cell.official-holiday{
  border-color:rgba(225,29,72,.38)!important;
}
html.rotation-disabled .day-cell.holiday-work{
  border-color:var(--c-rose-600)!important;
}

/* Enabled users keep all rotation-specific visuals */
html.rotation-enabled .rotation-badge{
  display:grid!important;
}

@media(min-width:1200px){
  html.rotation-disabled .day-cell.rotation-night,
  html.rotation-disabled .day-cell.rotation-day{
    box-shadow:none!important;
  }
}


/* ===== KPC Time 3.0 Alpha 12 — subtle holiday styling ===== */

/*
  Holidays and holiday-work days keep their text badges,
  but no longer receive a red frame or red background.
*/
.day-cell.official-holiday,
.day-cell.holiday-work{
  background:#f8fafc!important;
  border-width:1px!important;
  border-color:transparent!important;
}

.day-cell.official-holiday .num,
.day-cell.holiday-work .num{
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
}

/* Today must remain visually identifiable even when it is a holiday */
.day-cell.today.official-holiday,
.day-cell.today.holiday-work{
  background:var(--c-white)!important;
  border-color:#111827!important;
}

/* Dark theme */
body.dark .day-cell.official-holiday,
body.dark .day-cell.holiday-work{
  background:#112033!important;
  border-color:transparent!important;
}

body.dark .day-cell.official-holiday .num,
body.dark .day-cell.holiday-work .num{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
}

body.dark .day-cell.today.official-holiday,
body.dark .day-cell.today.holiday-work{
  background:#16263d!important;
  border-color:var(--c-white)!important;
}

/* Preserve optional rotation outline without restoring the red holiday frame */
html.rotation-enabled .day-cell.official-holiday.rotation-night,
html.rotation-enabled .day-cell.holiday-work.rotation-night{
  box-shadow:inset 0 0 0 2px rgba(79,70,229,.55)!important;
}
html.rotation-enabled .day-cell.official-holiday.rotation-day,
html.rotation-enabled .day-cell.holiday-work.rotation-day{
  box-shadow:inset 0 0 0 2px rgba(245,158,11,.55)!important;
}

body.dark html.rotation-enabled .day-cell.official-holiday.rotation-night,
body.dark html.rotation-enabled .day-cell.holiday-work.rotation-night{
  box-shadow:inset 0 0 0 2px rgba(129,140,248,.8)!important;
}
body.dark html.rotation-enabled .day-cell.official-holiday.rotation-day,
body.dark html.rotation-enabled .day-cell.holiday-work.rotation-day{
  box-shadow:inset 0 0 0 2px rgba(251,191,36,.8)!important;
}


/* =========================================================
   KPC Time 3.0 Stable — Final calendar visual language
   Work = blue border, Rest = green border.
   No day/night icons or rotation-specific outlines.
   ========================================================= */

/* Neutral cells */
.day-cell{
  border:1.5px solid transparent!important;
  box-shadow:none!important;
}

/* Work/rest are communicated only by the border */
.day-cell.work{
  background:var(--surface-raised)!important;
  border-color:#3478f6!important;
  box-shadow:none!important;
}
.day-cell.rest{
  background:var(--card)!important;
  border-color:#35b96b!important;
  box-shadow:none!important;
}

/* Remove work/rest status dots because the border is sufficient */
.day-cell.work .mark,
.day-cell.rest .mark{
  display:none!important;
}

/* Transition remains distinguishable */
.day-cell.travel{
  background:var(--card)!important;
  border-color:var(--c-amber-500)!important;
}
.day-cell.travel .mark{
  display:block!important;
  background:var(--c-amber-500)!important;
}

/* Rotation day/night must not alter calendar appearance */
.day-cell.rotation-day,
.day-cell.rotation-night,
html.rotation-enabled .day-cell.rotation-day,
html.rotation-enabled .day-cell.rotation-night{
  box-shadow:none!important;
}
.rotation-badge,
.rotation-legend-item{
  display:none!important;
}

/* Holidays: text only, no red frame or filled pill */
.day-cell.official-holiday,
.day-cell.holiday-work{
  background:var(--card)!important;
}

/* Preserve the work/rest border beneath holiday state */
.day-cell.work.official-holiday,
.day-cell.work.holiday-work{
  border-color:#3478f6!important;
}
.day-cell.rest.official-holiday,
.day-cell.rest.holiday-work{
  border-color:#35b96b!important;
}
.day-cell.travel.official-holiday,
.day-cell.travel.holiday-work{
  border-color:var(--c-amber-500)!important;
}

.day-cell.official-holiday .num,
.day-cell.holiday-work .num{
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
}

.official-holiday-badge,
.holiday-work-badge{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:3px!important;
  transform:translateX(-50%)!important;
  width:max-content!important;
  min-width:0!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--c-rose-600)!important;
  -webkit-text-fill-color:var(--c-rose-600)!important;
  font-family:var(--text-font)!important;
  font-size:7px!important;
  font-weight:700!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}

/* Current day always has a clear black/white outline */
.day-cell.today,
.day-cell.today.work,
.day-cell.today.rest,
.day-cell.today.travel,
.day-cell.today.official-holiday,
.day-cell.today.holiday-work{
  border-color:#111827!important;
  box-shadow:0 0 0 1px #111827!important;
}
body.dark .day-cell.today,
body.dark .day-cell.today.work,
body.dark .day-cell.today.rest,
body.dark .day-cell.today.travel,
body.dark .day-cell.today.official-holiday,
body.dark .day-cell.today.holiday-work{
  border-color:#f8fafc!important;
  box-shadow:0 0 0 1px #f8fafc!important;
}

/* Note indicator remains available */
.day-cell.has-note:after{
  z-index:9!important;
}

/* Final legend uses outlined squares */
.final-calendar-legend{
  align-items:center!important;
}
.legend-box{
  display:inline-block;
  width:13px;
  height:13px;
  margin-left:5px;
  border-radius:4px;
  background:transparent;
  vertical-align:-2px;
}
.work-box{border:1.5px solid #3478f6}
.rest-box{border:1.5px solid #35b96b}

/* Dark mode */
body.dark .day-cell.work,
body.dark .day-cell.rest,
body.dark .day-cell.travel,
body.dark .day-cell.official-holiday,
body.dark .day-cell.holiday-work{
  background:#112033!important;
}
body.dark .day-cell.work{border-color:#60a5fa!important}
body.dark .day-cell.rest{border-color:#4ade80!important}
body.dark .day-cell.travel{border-color:#fbbf24!important}
body.dark .official-holiday-badge,
body.dark .holiday-work-badge{
  color:#fda4af!important;
  -webkit-text-fill-color:#fda4af!important;
}
body.dark .work-box{border-color:#60a5fa}
body.dark .rest-box{border-color:#4ade80}

@media(max-width:390px){
  .official-holiday-badge,
  .holiday-work-badge{
    font-size:6px!important;
    bottom:2px!important;
  }
  .legend-box{
    width:11px;
    height:11px;
  }
}


/* =========================================================
   KPC Time 3.0.2 Stable — rotating shift colors
   Day shift = yellow, Night shift = light blue.
   No sun/moon icons.
   ========================================================= */

/* Rotation legend hidden until rotation is enabled */
.rotation-legend-item{
  display:none!important;
}
html.rotation-enabled .rotation-legend-item{
  display:inline-flex!important;
}
html.rotation-enabled .normal-work-legend{
  display:none!important;
}
html.rotation-disabled .normal-work-legend{
  display:inline-flex!important;
}

/* Rotation colors override the normal blue work border */
html.rotation-enabled .day-cell.rotation-day{
  border-color:var(--c-yellow-500)!important;
  box-shadow:none!important;
}
html.rotation-enabled .day-cell.rotation-night{
  border-color:#79b8ff!important;
  box-shadow:none!important;
}

/* Rest remains green even if rotation configuration is active */
html.rotation-enabled .day-cell.rest{
  border-color:#35b96b!important;
}

/* Transition stays orange */
html.rotation-enabled .day-cell.travel{
  border-color:var(--c-amber-500)!important;
}

/* Current day remains dominant */
html.rotation-enabled .day-cell.today,
html.rotation-enabled .day-cell.today.rotation-day,
html.rotation-enabled .day-cell.today.rotation-night{
  border-color:#111827!important;
  box-shadow:0 0 0 1px #111827!important;
}

/* No symbolic rotation badges anywhere in calendar */
.rotation-badge{
  display:none!important;
}

/* Legend boxes */
.day-shift-box{
  border:1.5px solid var(--c-yellow-500)!important;
}
.night-shift-box{
  border:1.5px solid #79b8ff!important;
}

/* Dark mode */
body.dark html.rotation-enabled .day-cell.rotation-day{
  border-color:#facc15!important;
}
body.dark html.rotation-enabled .day-cell.rotation-night{
  border-color:#93c5fd!important;
}
body.dark html.rotation-enabled .day-cell.today,
body.dark html.rotation-enabled .day-cell.today.rotation-day,
body.dark html.rotation-enabled .day-cell.today.rotation-night{
  border-color:#f8fafc!important;
  box-shadow:0 0 0 1px #f8fafc!important;
}
body.dark .day-shift-box{
  border-color:#facc15!important;
}
body.dark .night-shift-box{
  border-color:#93c5fd!important;
}


/* =========================================================
   KPC Time 3.0.3 Stable — calendar state precedence
   ========================================================= */

/* Base state colors */
html.rotation-disabled .day-cell.work,
html:not(.rotation-enabled) .day-cell.work{
  border:1.5px solid #3478f6!important;
  background:var(--card)!important;
}

.day-cell.rest{
  border:1.5px solid #35b96b!important;
  background:var(--card)!important;
}

.day-cell.travel{
  border:1.5px solid var(--c-amber-500)!important;
  background:var(--card)!important;
}

/* Rotating workers */
html.rotation-enabled .day-cell.work.rotation-day{
  border:1.5px solid var(--c-yellow-500)!important;
  background:var(--card)!important;
}

html.rotation-enabled .day-cell.work.rotation-night{
  border:1.5px solid #79b8ff!important;
  background:var(--card)!important;
}

html.rotation-enabled .day-cell.rest{
  border:1.5px solid #35b96b!important;
}

html.rotation-enabled .day-cell.travel{
  border:1.5px solid var(--c-amber-500)!important;
}

/* Holidays never change the work/rest/rotation border */
.day-cell.official-holiday,
.day-cell.holiday-work{
  background:var(--card)!important;
  box-shadow:none!important;
}

.day-cell.work.official-holiday,
.day-cell.work.holiday-work{
  border-color:#3478f6!important;
}

.day-cell.rest.official-holiday,
.day-cell.rest.holiday-work{
  border-color:#35b96b!important;
}

.day-cell.travel.official-holiday,
.day-cell.travel.holiday-work{
  border-color:var(--c-amber-500)!important;
}

html.rotation-enabled .day-cell.work.rotation-day.official-holiday,
html.rotation-enabled .day-cell.work.rotation-day.holiday-work{
  border-color:var(--c-yellow-500)!important;
}

html.rotation-enabled .day-cell.work.rotation-night.official-holiday,
html.rotation-enabled .day-cell.work.rotation-night.holiday-work{
  border-color:#79b8ff!important;
}

/* Holiday labels: text only, no red frame/background */
.official-holiday-badge,
.holiday-work-badge{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  color:var(--c-rose-600)!important;
  -webkit-text-fill-color:var(--c-rose-600)!important;
}

/* Holiday number itself stays normal */
.day-cell.official-holiday .num,
.day-cell.holiday-work .num{
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
}

/* Today always wins */
.day-cell.today,
.day-cell.today.work,
.day-cell.today.rest,
.day-cell.today.travel,
html.rotation-enabled .day-cell.today.rotation-day,
html.rotation-enabled .day-cell.today.rotation-night{
  border-color:#111827!important;
  box-shadow:0 0 0 1px #111827!important;
}

/* Dark theme */
body.dark html.rotation-disabled .day-cell.work,
body.dark html:not(.rotation-enabled) .day-cell.work{
  border-color:#60a5fa!important;
}

body.dark .day-cell.rest{
  border-color:#4ade80!important;
}

body.dark html.rotation-enabled .day-cell.work.rotation-day{
  border-color:#facc15!important;
}

body.dark html.rotation-enabled .day-cell.work.rotation-night{
  border-color:#93c5fd!important;
}

body.dark .official-holiday-badge,
body.dark .holiday-work-badge{
  color:#fda4af!important;
  -webkit-text-fill-color:#fda4af!important;
}

body.dark .day-cell.today,
body.dark html.rotation-enabled .day-cell.today.rotation-day,
body.dark html.rotation-enabled .day-cell.today.rotation-night{
  border-color:#f8fafc!important;
  box-shadow:0 0 0 1px #f8fafc!important;
}


/* =========================================================
   KPC Time 3.0.4 Stable
   Work: blue dot + yellow border
   Rest: green dot + no border
   Rotation day: blue dot + yellow border
   Rotation night: blue dot + light-blue border
   ========================================================= */

/* Neutral reset for ordinary calendar cells */
.day-cell{
  box-shadow:none!important;
}

/* Ordinary shift pattern */
html.rotation-disabled .day-cell.work,
html:not(.rotation-enabled) .day-cell.work{
  border:1.5px solid var(--c-yellow-500)!important;
  background:var(--card)!important;
}

html.rotation-disabled .day-cell.rest,
html:not(.rotation-enabled) .day-cell.rest{
  border-color:transparent!important;
  background:var(--card)!important;
}

/* Rotating shift pattern */
html.rotation-enabled .day-cell.work.rotation-day{
  border:1.5px solid var(--c-yellow-500)!important;
  background:var(--card)!important;
}

html.rotation-enabled .day-cell.work.rotation-night{
  border:1.5px solid #79b8ff!important;
  background:var(--card)!important;
}

html.rotation-enabled .day-cell.rest{
  border-color:transparent!important;
  background:var(--card)!important;
}

/* Work/rest dots */
.day-cell.work .mark{
  display:block!important;
  width:7px!important;
  height:7px!important;
  margin:5px auto 0!important;
  border-radius:var(--r-circle)!important;
  background:#3478f6!important;
}

.day-cell.rest .mark{
  display:block!important;
  width:7px!important;
  height:7px!important;
  margin:5px auto 0!important;
  border-radius:var(--r-circle)!important;
  background:#22b573!important;
}

/* Transition remains orange */
.day-cell.travel{
  border:1.5px solid var(--c-amber-500)!important;
}
.day-cell.travel .mark{
  display:block!important;
  background:var(--c-amber-500)!important;
}

/* Holidays keep the underlying day-state style */
.day-cell.work.official-holiday,
.day-cell.work.holiday-work{
  border-color:var(--c-yellow-500)!important;
}

html.rotation-enabled .day-cell.work.rotation-night.official-holiday,
html.rotation-enabled .day-cell.work.rotation-night.holiday-work{
  border-color:#79b8ff!important;
}

.day-cell.rest.official-holiday,
.day-cell.rest.holiday-work{
  border-color:transparent!important;
}

.day-cell.travel.official-holiday,
.day-cell.travel.holiday-work{
  border-color:var(--c-amber-500)!important;
}

/* Holiday labels stay plain red text */
.official-holiday-badge,
.holiday-work-badge{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  color:var(--c-rose-600)!important;
  -webkit-text-fill-color:var(--c-rose-600)!important;
}

/* Today always overrides all state borders */
.day-cell.today,
.day-cell.today.work,
.day-cell.today.rest,
.day-cell.today.travel,
html.rotation-enabled .day-cell.today.rotation-day,
html.rotation-enabled .day-cell.today.rotation-night{
  border-color:#111827!important;
  box-shadow:0 0 0 1px #111827!important;
}

/* Adaptive legends */
.rotation-legend-item{
  display:none!important;
}
html.rotation-enabled .rotation-legend-item{
  display:inline-flex!important;
}
html.rotation-enabled .normal-work-legend{
  display:none!important;
}
html.rotation-disabled .normal-work-legend,
html:not(.rotation-enabled) .normal-work-legend{
  display:inline-flex!important;
}

.legend-combo{
  position:relative;
  display:inline-block;
  width:15px;
  height:15px;
  margin-left:5px;
  border-radius:4px;
  background:transparent;
  vertical-align:-3px;
}
.legend-combo>i{
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  border-radius:var(--r-circle);
  background:#3478f6;
  transform:translate(-50%,-50%);
}
.work-combo,
.day-combo{
  border:1.5px solid var(--c-yellow-500);
}
.night-combo{
  border:1.5px solid #79b8ff;
}

/* Dark theme */
body.dark html.rotation-disabled .day-cell.work,
body.dark html:not(.rotation-enabled) .day-cell.work,
body.dark html.rotation-enabled .day-cell.work.rotation-day{
  border-color:#facc15!important;
}

body.dark html.rotation-enabled .day-cell.work.rotation-night{
  border-color:#93c5fd!important;
}

body.dark .day-cell.work .mark{
  background:#60a5fa!important;
}

body.dark .day-cell.rest .mark{
  background:#4ade80!important;
}

body.dark .work-combo,
body.dark .day-combo{
  border-color:#facc15;
}

body.dark .night-combo{
  border-color:#93c5fd;
}

body.dark .legend-combo>i{
  background:#60a5fa;
}

body.dark .day-cell.today,
body.dark html.rotation-enabled .day-cell.today.rotation-day,
body.dark html.rotation-enabled .day-cell.today.rotation-night{
  border-color:#f8fafc!important;
  box-shadow:0 0 0 1px #f8fafc!important;
}

@media(max-width:390px){
  .day-cell.work .mark,
  .day-cell.rest .mark{
    width:6px!important;
    height:6px!important;
    margin-top:4px!important;
  }

  .legend-combo{
    width:13px;
    height:13px;
  }
}


/* KPC Time 3.1 - Smart multi-month plan builder */
.calendar-intro-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.smart-plan-button{white-space:nowrap}.plan-builder{margin-bottom:14px;border:1px solid color-mix(in srgb,var(--blue) 28%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 5%,var(--card)),var(--card))}.plan-builder-head{align-items:flex-start}.plan-builder-head .icon-button{font-size:var(--fs-4xl)}.plan-steps{display:flex;align-items:center;justify-content:center;margin:16px 0}.plan-step{display:flex;align-items:center;gap:6px;white-space:nowrap}.plan-step span{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-circle);background:var(--blue);color:var(--c-white);font-weight:800}.plan-step b{font-size:var(--fs-lg)}.plan-line{height:2px;min-width:28px;flex:1;max-width:70px;background:color-mix(in srgb,var(--blue) 25%,var(--line));margin:0 8px}.plan-form{margin-bottom:12px}.plan-custom-row{margin:0 0 12px}.plan-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:16px 0;padding:12px;border-radius:14px;background:var(--soft)}.plan-preview>div{display:flex;flex-direction:column;gap:4px;padding:9px;background:var(--card);border:1px solid var(--line);border-radius:11px}.plan-preview span{font-size:var(--fs-md);color:var(--muted)}.plan-preview b{font-size:var(--fs-lg);line-height:1.7}.plan-preview.error{display:block;color:#be123c;background:#fff1f2;border:1px solid var(--c-rose-200)}.plan-actions{display:flex;gap:10px}.plan-actions button{flex:1}.dark .plan-preview.error{color:var(--c-rose-200);background:#4c0519;border-color:#881337}@media(max-width:560px){.calendar-page-intro{align-items:flex-start}.calendar-intro-actions{width:100%;justify-content:space-between}.smart-plan-button,.calendar-today-button{flex:1;justify-content:center}.plan-preview{grid-template-columns:1fr}.plan-step b{display:none}.plan-line{min-width:18px}.plan-actions{position:sticky;bottom:76px;background:var(--card);padding-top:8px;z-index:2}}

.generated-plan-status{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid rgba(34,197,94,.28);background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(59,130,246,.06));margin-bottom:14px}.generated-plan-status[hidden]{display:none}.generated-plan-status h3{margin:4px 0}.generated-plan-status b{display:block;margin-top:8px}.danger-soft{border-color:rgba(239,68,68,.28)!important;color:#b91c1c!important;background:rgba(239,68,68,.06)!important}@media(max-width:640px){.generated-plan-status{align-items:stretch;flex-direction:column}.generated-plan-status button{width:100%}}

/* 3.2 independent colleague annual planner */
.colleague-planner{margin-top:14px;border:1px solid color-mix(in srgb,var(--blue) 22%,var(--line))}.colleague-actions{margin-top:14px}.colleague-plans-list{display:grid;gap:10px;margin-top:16px}.colleague-empty{text-align:center;padding:18px}.colleague-plan-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.colleague-plan-card h3{margin:4px 0}.colleague-plan-card p,.colleague-plan-card small{margin:0;color:var(--muted)}.colleague-card-actions{display:flex;gap:7px;flex-wrap:wrap}.colleague-custom[hidden]{display:none}@media(max-width:650px){.colleague-plan-card{align-items:stretch;flex-direction:column}.colleague-card-actions button{flex:1}}
.planner-help{margin:10px 0 16px;padding:12px 14px;border-radius:var(--r-2);background:color-mix(in srgb,var(--blue) 8%,var(--soft));color:var(--muted);line-height:1.8}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:650px){.form-grid.three{grid-template-columns:1fr}}

body.onboarding-active{overflow:hidden!important;touch-action:none}
body.onboarding-active .onboarding-card{touch-action:auto}

/* 3.3 Shift planner */
.shift-planner{overflow:hidden}.planner-title-row{align-items:flex-start}.planner-owner-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 16px;padding:5px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.planner-owner-tabs button{border:0;border-radius:10px;padding:11px;background:transparent;color:var(--muted);font:inherit;font-weight:700}.planner-owner-tabs button.active{background:var(--card);color:var(--blue);box-shadow:0 3px 12px rgba(15,40,80,.08)}.planner-help{display:grid;gap:3px}.planner-help b{color:var(--text)}.planner-note{margin-top:8px;color:var(--muted);font-size:.84rem}.plan-range-chip{display:inline-flex;padding:5px 9px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--blue) 10%,var(--card));color:var(--blue);font-size:.78rem;font-weight:700}.plan-card-main{min-width:0}.plan-mini-summary{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.plan-mini-summary i{font-style:normal;font-size:.76rem;padding:4px 7px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);color:var(--muted)}@media(max-width:650px){.planner-owner-tabs{position:sticky;top:0;z-index:2}.shift-planner .form-grid.two{grid-template-columns:1fr}.colleague-actions .primary{width:100%}}

.field-hint{display:block;margin-top:6px;font-size:var(--fs-sm);color:var(--muted)}
#colleagueMonthLabel.annual-locked select{opacity:.65;background:var(--c-slate-50);pointer-events:none}
#colleagueMonthLabel:not(.annual-locked) .field-hint{display:none}


/* v3.4 Smart Calendar */
.smart-timeline{overflow:hidden}.smart-timeline-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.smart-timeline-head h3{margin:4px 0 0}.smart-timeline-head>b{font-size:14px;color:var(--blue)}
.timeline-track{height:10px;border-radius:var(--r-pill);background:var(--soft,#edf2f8);overflow:hidden;margin-top:14px}.timeline-track>i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--blue),#46b5c9);transition:width .35s ease}
.next-days{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.next-day-card{border:1px solid var(--line);border-radius:14px;padding:10px 8px;text-align:center;background:var(--card)}.next-day-card span{display:block;font-size:var(--fs-sm);color:var(--muted);margin-bottom:5px}.next-day-card b{font-size:var(--fs-lg)}.next-day-card.work b,.next-day-card.day b{color:#9a6b00}.next-day-card.night b{color:var(--c-blue-600)}.next-day-card.rest b{color:#159447}
.day-detail-card{max-width:460px}.day-detail-status{display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;background:var(--soft);margin:12px 0}.day-detail-status>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--c-white);font-size:var(--fs-4xl)}.day-detail-status b,.day-detail-status small{display:block}.day-detail-status small{margin-top:4px;color:var(--muted)}.day-detail-progress{padding:2px 2px 14px}.day-detail-progress>div:first-child{display:flex;justify-content:space-between;font-size:var(--fs-md)}.day-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.day-detail-grid>div{border:1px solid var(--line);border-radius:14px;padding:11px}.day-detail-grid span,.day-detail-grid b{display:block}.day-detail-grid span{font-size:var(--fs-sm);color:var(--muted);margin-bottom:4px}.day-detail-note-list{display:grid;gap:7px;margin:12px 0}.day-detail-note{border:1px solid var(--line);border-radius:var(--r-2);padding:9px 11px;font-size:var(--fs-md)}.day-detail-note b{display:block;margin-bottom:3px}.day-detail-note small{color:var(--muted)}
@media(max-width:420px){.next-days{gap:6px}.next-day-card{padding:9px 5px}.day-detail-grid{grid-template-columns:1fr}}


/* KPC Time 4.0 Personal Dashboard — quiet power, clear output */
.output-page-intro{align-items:flex-start}.output-page-intro p{margin:.35rem 0 0;max-width:620px}.output-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:18px;align-items:center;padding:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 10%,var(--card)),var(--card) 52%,color-mix(in srgb,#14b8a6 7%,var(--card)));border-color:color-mix(in srgb,var(--blue) 22%,var(--line))}.output-hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:var(--r-circle);left:-70px;top:-85px;background:color-mix(in srgb,var(--blue) 10%,transparent);pointer-events:none}.output-badge{display:inline-flex;padding:5px 10px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--blue) 10%,var(--card));color:var(--blue);font-size:.72rem;font-weight:800;letter-spacing:.2px}.output-hero-copy h3{font-size:1.25rem;margin:10px 0 5px}.output-hero-copy p{margin:0;color:var(--muted)}.output-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.output-action-card{display:grid;gap:4px;text-align:right;border:1px solid var(--line);border-radius:17px;padding:14px;background:color-mix(in srgb,var(--card) 90%,transparent);color:var(--text);font:inherit;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.output-action-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 40%,var(--line));box-shadow:0 10px 24px rgba(15,40,80,.08)}.output-action-card span{font-size:1.4rem}.output-action-card b{font-size:.9rem}.output-action-card small{color:var(--muted);font-size:.72rem}.compact-report{margin-top:14px}.shift-planner{scroll-margin-top:90px}.report-theme-field{grid-column:1/-1}.field-label{display:block;margin-bottom:8px;font-size:.83rem;font-weight:700;color:var(--text)}.theme-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.theme-choice{display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:right;border:1px solid var(--line);border-radius:var(--r-3);padding:10px;background:var(--card);color:var(--text);font:inherit;transition:.18s ease}.theme-choice:hover{transform:translateY(-1px)}.theme-choice.active{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 12%,transparent)}.theme-choice strong{font-size:.86rem}.theme-choice small{color:var(--muted);font-size:.7rem}.theme-preview{grid-row:1/3;display:block;position:relative;width:58px;height:44px;border-radius:9px;overflow:hidden;border:1px solid var(--c-slate-200);background:var(--c-white)}.theme-preview i,.theme-preview b,.theme-preview em{position:absolute;display:block}.corporate-preview i{inset:0 0 auto;height:13px;background:#173f70}.corporate-preview b{top:18px;right:6px;width:31px;height:4px;border-radius:4px;background:#264d79}.corporate-preview em{bottom:5px;right:6px;width:45px;height:13px;border-radius:4px;background:repeating-linear-gradient(90deg,#e8eef5 0 12px,var(--c-white) 12px 15px)}.minimal-preview{border-color:#999}.minimal-preview i{top:7px;right:6px;width:43px;height:2px;background:#111}.minimal-preview b{top:15px;right:6px;width:25px;height:3px;background:#555}.minimal-preview em{bottom:6px;right:6px;width:45px;height:15px;background:repeating-linear-gradient(90deg,var(--c-white) 0 12px,#ddd 12px 13px);border-top:1px solid #aaa;border-bottom:1px solid #aaa}.colorful-preview{background:linear-gradient(145deg,#f5f3ff,#ecfeff)}.colorful-preview i{inset:0 0 auto;height:14px;background:linear-gradient(90deg,#7c3aed,var(--c-blue-600),var(--c-cyan-500))}.colorful-preview b{top:19px;right:6px;width:31px;height:5px;border-radius:5px;background:#7c3aed}.colorful-preview em{bottom:5px;right:6px;width:45px;height:13px;border-radius:5px;background:linear-gradient(90deg,#fde68a 0 31%,#bfdbfe 31% 64%,#bbf7d0 64%)}.colleague-plan-card{position:relative;overflow:hidden}.colleague-plan-card:before{content:"";position:absolute;right:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--blue),#14b8a6)}.colleague-card-actions button{min-height:38px}.dark .output-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 15%,var(--card)),var(--card))}.dark .theme-preview{filter:saturate(.92)}
@media(max-width:760px){.output-hero{grid-template-columns:1fr}.output-hero-actions{grid-template-columns:1fr 1fr}.theme-choice-grid{grid-template-columns:1fr}.theme-choice{grid-template-columns:64px 1fr}.report-theme-field{grid-column:auto}}
@media(max-width:420px){.output-hero{padding:17px}.output-hero-actions{grid-template-columns:1fr}.output-action-card{grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px}.output-action-card span{grid-row:1/3}.theme-choice-grid{gap:7px}}


/* ===== KPC Time v4.2.0 — UI Polish =====
   Keep status indicators away from Friday/holiday labels. */
.calendar-grid .day-cell .mark,
.home-calendar .day-cell .mark{
  position:absolute!important;
  top:5px!important;
  left:5px!important;
  right:auto!important;
  bottom:auto!important;
  width:7px!important;
  height:7px!important;
  margin:0!important;
  border-radius:var(--r-circle)!important;
  z-index:12!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--card) 86%,transparent)!important;
  pointer-events:none!important;
}

/* Keep an optional rotation marker beside the state dot, never over text. */
.calendar-grid .rotation-badge,
.home-calendar .rotation-badge{
  top:4px!important;
  left:15px!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:0!important;
  z-index:13!important;
}
.day-cell.official-holiday .rotation-badge,
.day-cell.holiday-work .rotation-badge,
.day-cell.has-note .rotation-badge{
  top:4px!important;
  left:15px!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
}

/* Note indicator gets its own top-right corner. */
.calendar-grid .day-cell.has-note:after,
.home-calendar .day-cell.has-note:after{
  top:5px!important;
  right:5px!important;
  left:auto!important;
  bottom:auto!important;
  z-index:12!important;
}

/* Central content no longer needs artificial side padding. */
.calendar-grid .day-cell .num,
.home-calendar .day-cell .num{
  padding-left:2px!important;
  padding-right:2px!important;
}

/* Labels remain at the bottom with a clear safe zone. */
.calendar-grid .official-holiday-badge,
.calendar-grid .holiday-work-badge,
.calendar-grid .holiday-label,
.home-calendar .official-holiday-badge,
.home-calendar .holiday-work-badge,
.home-calendar .holiday-label{
  max-width:calc(100% - 6px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  z-index:9!important;
}

@media(max-width:390px){
  .calendar-grid .day-cell .mark,
  .home-calendar .day-cell .mark{
    top:4px!important;
    left:4px!important;
    width:6px!important;
    height:6px!important;
  }
  .calendar-grid .rotation-badge,
  .home-calendar .rotation-badge,
  .day-cell.official-holiday .rotation-badge,
  .day-cell.holiday-work .rotation-badge,
  .day-cell.has-note .rotation-badge{
    top:3px!important;
    left:13px!important;
  }
}
\n\n/* KPC Time 4.2.0 — Personal Dashboard */\n.personal-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:16px;margin:16px 0}.dashboard-summary-card,.dashboard-reminder-card{margin:0}.dashboard-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.dashboard-card-head h3{margin:4px 0 0;font-size:1.05rem}.dashboard-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.dashboard-stat{position:relative;overflow:hidden;min-height:82px;padding:14px 12px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface) 93%,transparent);display:flex;flex-direction:column;justify-content:space-between}.dashboard-stat:before{content:"";position:absolute;inset-inline-start:0;top:14px;bottom:14px;width:4px;border-radius:4px;background:var(--muted)}.dashboard-stat span{font-size:.76rem;color:var(--muted);font-weight:700}.dashboard-stat b{font-size:1.45rem;line-height:1}.dashboard-stat.work:before{background:var(--blue)}.dashboard-stat.day:before{background:var(--c-yellow-500)}.dashboard-stat.night:before{background:var(--c-blue-600)}.dashboard-stat.rest:before{background:var(--green)}.dashboard-stat.holiday:before{background:#ef4444}.dashboard-reminder-content{min-height:102px;display:flex;align-items:center}.dashboard-reminder-content>div:not(.dashboard-reminder-empty){display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;width:100%}.dashboard-reminder-icon{width:48px;height:48px;border-radius:var(--r-3);background:color-mix(in srgb,var(--blue) 12%,var(--surface));display:grid;place-items:center;font-size:1.3rem}.dashboard-reminder-content b,.dashboard-reminder-content span,.dashboard-reminder-content small{display:block}.dashboard-reminder-content span{margin-top:4px;color:var(--blue);font-weight:800;font-size:.78rem}.dashboard-reminder-content small{margin-top:6px;color:var(--muted);line-height:1.7}.dashboard-reminder-empty{display:flex;align-items:center;gap:12px;color:var(--muted)}.dashboard-reminder-empty>span{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:color-mix(in srgb,var(--green) 13%,var(--surface));color:var(--green);font-weight:900}.dashboard-reminder-empty b{color:var(--text)}@media(max-width:900px){.personal-dashboard-grid{grid-template-columns:1fr}.dashboard-stat-grid{grid-template-columns:repeat(5,minmax(92px,1fr));overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.dashboard-stat-grid::-webkit-scrollbar{display:none}}@media(max-width:560px){.personal-dashboard-grid{gap:12px;margin:12px 0}.dashboard-stat{min-height:76px;border-radius:var(--r-3)}.dashboard-stat b{font-size:1.3rem}}\n

/* KPC Time 4.2.1 — dashboard refinement */
.personal-dashboard-grid{grid-template-columns:1fr}
.dashboard-stat[hidden]{display:none!important}
.output-hero-actions{grid-template-columns:minmax(0,1fr)}


/* KPC Time 4.3.0 — report identity */
.dashboard-stat-grid.is-standard{
  grid-template-columns:repeat(3,minmax(130px,190px));
  justify-content:center;
  align-items:stretch;
  max-width:680px;
  margin-inline:auto;
}
.dashboard-stat-grid.is-rotation{
  grid-template-columns:repeat(4,minmax(110px,1fr));
  justify-content:center;
}
.dashboard-stat-grid.is-standard .dashboard-stat{
  min-height:94px;
  text-align:center;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.dashboard-stat-grid.is-standard .dashboard-stat:before{
  inset-inline-start:50%;
  transform:translateX(50%);
  top:auto;
  bottom:0;
  width:46%;
  height:4px;
}
.dashboard-stat-grid.is-standard .dashboard-stat b{font-size:1.7rem}
@media(max-width:560px){
  .dashboard-stat-grid.is-standard{
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    overflow:visible;
  }
  .dashboard-stat-grid.is-standard .dashboard-stat{
    min-width:0;
    min-height:88px;
    padding:12px 6px;
  }
  .dashboard-stat-grid.is-standard .dashboard-stat span{font-size:.68rem}
}

/* Report identity badges — v4.3.0 */
.plan-card-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px}.plan-theme-chip{display:inline-flex;align-items:center;padding:5px 9px;border-radius:var(--r-pill);font-size:.74rem;font-weight:800;border:1px solid transparent}.plan-theme-chip.corporate{background:#e8f0fa;color:#123b6d;border-color:#bfd0e4}.plan-theme-chip.minimal{background:#f5f5f5;color:#222;border-color:#b8b8b8}.plan-theme-chip.colorful{background:linear-gradient(90deg,#ede9fe,#cffafe);color:#5b21b6;border-color:#c4b5fd}.colleague-plan-card.theme-corporate:before{background:linear-gradient(#123b6d,#1d5a96)}.colleague-plan-card.theme-minimal:before{background:#404040}.colleague-plan-card.theme-colorful:before{background:linear-gradient(#7c3aed,var(--c-cyan-500))}

/* Account experience — v4.8.0 */
.account-gate{position:fixed;inset:0;z-index:25000;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(145deg,rgba(8,18,38,.82),rgba(24,58,111,.72));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.account-gate[hidden]{display:none!important}
.account-card{position:relative;width:min(430px,100%);max-height:calc(100dvh - 30px);overflow:auto;overscroll-behavior:contain;background:var(--c-white);border:1px solid rgba(148,163,184,.25);border-radius:var(--r-5);padding:24px;box-shadow:0 32px 100px rgba(2,8,23,.42)}
.account-brand{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:20px;text-align:right}.account-brand img{width:58px;height:58px;border-radius:17px;box-shadow:0 10px 25px rgba(37,99,235,.2)}.account-brand div{display:flex;flex-direction:column}.account-brand b{font-size:var(--fs-3xl)}.account-brand span{color:var(--c-slate-500);font-size:var(--fs-md);margin-top:3px}
.account-screen[hidden]{display:none!important}.account-screen{position:relative;animation:accountFade .22s ease both}.account-screen-head{text-align:center;margin-bottom:20px}.account-screen-head>span{display:inline-flex;padding:5px 10px;border-radius:var(--r-pill);background:var(--c-blue-50);color:var(--c-blue-600);font-size:var(--fs-sm);font-weight:800;margin-bottom:8px}.account-screen-head h2{margin:0;color:#172b4d;font-size:25px}.account-screen-head p{margin:8px auto 0;max-width:330px;color:#70809a;font-size:var(--fs-md);line-height:1.9}
.account-form{display:grid;gap:13px}.account-form label{display:grid;gap:7px;color:#334155;font-size:var(--fs-lg);font-weight:800}.account-form input{box-sizing:border-box;width:100%;border:1px solid #d9e2ef;border-radius:14px;padding:13px 14px;font:inherit;background:var(--c-white);outline:none;transition:.18s}.account-form input:focus{border-color:#4f8cff;box-shadow:0 0 0 4px rgba(79,140,255,.12);background:var(--c-white)}.account-submit{margin-top:5px;min-height:48px;border-radius:15px}
.account-switch{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:17px;padding-top:15px;border-top:1px solid var(--c-slate-50);color:var(--c-slate-500);font-size:var(--fs-md)}.account-switch button{border:0;background:transparent;color:var(--c-blue-600);font:inherit;font-weight:900;padding:5px;cursor:pointer}.account-back{position:absolute;top:-4px;inset-inline-start:0;width:36px;height:36px;border:0;border-radius:var(--r-2);background:var(--c-slate-50);color:#31527f;font:inherit;font-size:20px;cursor:pointer}
.account-message{min-height:21px;margin:11px 0 0;text-align:center;font-size:var(--fs-md);color:#dc2626}.account-message.success{color:#15803d}.account-offline{display:block;width:100%;margin-top:3px;border:0;background:transparent;color:var(--c-slate-500);padding:9px;font:inherit;cursor:pointer}.account-privacy{display:block;color:var(--c-slate-400);font-size:10.5px;line-height:1.8;text-align:center;border-top:1px solid var(--c-slate-50);padding-top:11px}
.account-settings-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--c-slate-200);border-radius:var(--r-3);background:var(--c-white)}.account-settings-card>div{display:flex;flex-direction:column;gap:4px}.account-settings-card span{font-size:var(--fs-md);color:var(--c-slate-500)}.account-settings-card b{font-size:14px}.account-settings-card button{white-space:nowrap}
@keyframes accountFade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:520px){.account-gate{padding:12px;align-items:center}.account-card{padding:20px 17px;border-radius:24px;max-height:calc(100dvh - 24px)}.account-brand{margin-bottom:16px}.account-brand img{width:52px;height:52px}.account-screen-head h2{font-size:23px}.account-screen-head p{font-size:11.5px}.account-form{gap:11px}.account-form input{padding:12px 13px}.account-settings-card{align-items:stretch;flex-direction:column}.account-settings-card button{width:100%}}
@media(max-height:680px){.account-card{max-height:calc(100dvh - 14px);padding-top:15px;padding-bottom:15px}.account-brand{margin-bottom:12px}.account-brand img{width:44px;height:44px}.account-screen-head{margin-bottom:13px}.account-screen-head p{display:none}.account-form{gap:9px}.account-form input{padding:10px 12px}.account-switch{margin-top:11px;padding-top:10px}.account-privacy{display:none}}

/* KPC Time 4.8.0 — rotation dashboard responsive fix */
.dashboard-stat-grid.is-rotation{
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;
  max-width:820px;
  margin-inline:auto;
  overflow:visible;
}
.dashboard-stat-grid.is-rotation .dashboard-stat{
  min-width:0;
  min-height:94px;
  text-align:center;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 8px;
}
.dashboard-stat-grid.is-rotation .dashboard-stat:before{
  inset-inline-start:50%;
  transform:translateX(50%);
  top:auto;
  bottom:0;
  width:46%;
  height:4px;
}
.dashboard-stat-grid.is-rotation .dashboard-stat b{font-size:1.7rem}
@media(max-width:700px){
  .dashboard-stat-grid.is-rotation{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    overflow:visible;
    padding-bottom:0;
  }
  .dashboard-stat-grid.is-rotation .dashboard-stat{
    min-height:88px;
    border-radius:17px;
    padding:12px 8px;
  }
  .dashboard-stat-grid.is-rotation .dashboard-stat span{font-size:.72rem}
  .dashboard-stat-grid.is-rotation .dashboard-stat b{font-size:1.55rem}
}
@media(max-width:360px){
  .dashboard-stat-grid.is-rotation{gap:7px}
  .dashboard-stat-grid.is-rotation .dashboard-stat{min-height:82px;padding:10px 5px}
}


/* Server announcements v4.8.0 */
.kpc-announcement-host{width:min(1180px,calc(100% - 24px));margin:12px auto 0;position:relative;z-index:40}.kpc-announcement{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid #bfdbfe;border-radius:18px;background:linear-gradient(135deg,#eff6ff,var(--c-white));box-shadow:0 12px 30px rgba(30,64,175,.10);color:#17325c}.kpc-announcement small{display:block;color:var(--c-blue-600);font-size:var(--fs-sm);font-weight:800;margin-bottom:4px}.kpc-announcement strong{display:block;font-size:var(--fs-xl)}.kpc-announcement p{margin:5px 0 0;font-size:var(--fs-lg);line-height:1.8;color:#475569}.kpc-announcement button{border:0;background:#dbeafe;color:#1d4ed8;width:30px;height:30px;border-radius:var(--r-circle);font-size:20px;line-height:1;cursor:pointer;flex:0 0 auto}@media(max-width:600px){.kpc-announcement-host{margin-top:8px}.kpc-announcement{padding:13px 14px;border-radius:15px}.kpc-announcement p{font-size:var(--fs-md)}}


/* v5.1 Sync & Reliability */
.sync-settings-card{border:1px solid var(--line,var(--c-slate-200));border-radius:18px;padding:16px;background:linear-gradient(180deg,rgba(37,99,235,.05),rgba(255,255,255,.7));display:grid;gap:14px}.dark .sync-settings-card{background:linear-gradient(180deg,rgba(59,130,246,.12),rgba(7,17,31,.65))}.sync-state-line{display:flex;align-items:center;gap:11px}.sync-state-line>div{display:grid;gap:3px}.sync-state-line small{color:var(--muted,var(--c-slate-500))}.sync-dot{width:12px;height:12px;border-radius:var(--r-pill);background:var(--c-slate-400);box-shadow:0 0 0 5px rgba(148,163,184,.14);flex:0 0 auto}.sync-dot[data-state="synced"]{background:#16a34a;box-shadow:0 0 0 5px rgba(22,163,74,.14)}.sync-dot[data-state="pending"]{background:var(--c-amber-500);box-shadow:0 0 0 5px rgba(245,158,11,.14)}.sync-dot[data-state="syncing"]{background:var(--c-blue-600);box-shadow:0 0 0 5px rgba(37,99,235,.14);animation:syncPulse 1s infinite}.sync-dot[data-state="error"]{background:#dc2626;box-shadow:0 0 0 5px rgba(220,38,38,.14)}.sync-dot[data-state="offline"]{background:var(--c-slate-500);box-shadow:0 0 0 5px rgba(100,116,139,.14)}@keyframes syncPulse{50%{transform:scale(.72);opacity:.7}}.sync-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.sync-help{margin:0}.devices-box{border-top:1px solid var(--line,var(--c-slate-200));padding-top:12px}.devices-box summary{cursor:pointer;font-weight:800}.devices-list{display:grid;gap:8px;margin-top:10px}.device-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line,var(--c-slate-200));border-radius:13px;padding:10px 12px;background:rgba(255,255,255,.65)}.dark .device-row{background:rgba(15,23,42,.55)}.device-info{display:grid;gap:2px;min-width:0}.device-info b,.device-info small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-info small{color:var(--muted,var(--c-slate-500))}.device-current{font-size:var(--fs-sm);background:#dcfce7;color:#166534;border-radius:99px;padding:3px 7px}.device-revoke{border:0;background:#fee2e2;color:#991b1b;border-radius:10px;padding:7px 9px;font:inherit;cursor:pointer}@media(max-width:520px){.sync-actions-grid{grid-template-columns:1fr}.device-row{align-items:flex-start}}


/* v6.4 Account Center */
.account-center{margin-top:14px;padding:18px;border:1px solid var(--line,var(--c-slate-200));border-radius:var(--r-4);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,250,255,.96))}
.account-center h4{margin:0 0 14px;font-size:var(--fs-2xl)}.account-center-form{display:grid;gap:12px}.account-password-box{margin-top:16px;border-top:1px solid var(--line,var(--c-slate-200));padding-top:14px}.account-password-box summary{cursor:pointer;font-weight:700;margin-bottom:12px}.dark .account-center{background:rgba(10,27,45,.75)}
@media(max-width:640px){.account-center .form-grid.two{grid-template-columns:1fr}}

/* ===== KPC Time v7.1.0 — Premium Application Header ===== */
.premium-topbar{
  isolation:isolate;
  min-height:92px;
  padding:14px 16px!important;
  margin:0 auto 18px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:25px!important;
  background:
    linear-gradient(118deg,rgba(255,255,255,.97),rgba(246,250,255,.94))!important;
  box-shadow:
    0 18px 42px rgba(25,54,91,.10),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
  overflow:hidden;
}
.premium-topbar::after{
  content:"";
  position:absolute;
  inset:auto 20px 0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,transparent,var(--c-blue-600) 20%,var(--c-cyan-500) 78%,transparent);
  opacity:.86;
}
.topbar-glow{
  position:absolute;
  z-index:-1;
  width:190px;
  height:190px;
  top:-116px;
  right:-36px;
  border-radius:var(--r-circle);
  background:radial-gradient(circle,rgba(37,99,235,.18),rgba(6,182,212,.06) 48%,transparent 70%);
  pointer-events:none;
}
.premium-identity{gap:13px!important;position:relative;z-index:1}
.premium-logo{
  width:58px!important;
  height:58px!important;
  flex:0 0 58px;
  padding:5px!important;
  border-radius:19px!important;
  background:linear-gradient(145deg,#0b2346,#1168b2)!important;
  border:1px solid rgba(255,255,255,.85)!important;
  box-shadow:0 10px 25px rgba(21,86,157,.24),inset 0 0 0 1px rgba(255,255,255,.14)!important;
}
.premium-logo img{width:100%!important;height:100%!important;border-radius:14px!important;object-fit:cover}
.identity-copy{display:grid;gap:2px}
.identity-meta{display:flex;align-items:center;gap:6px;margin-bottom:2px;flex-wrap:wrap}
.header-brand-chip,.header-live-chip{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  border-radius:var(--r-pill);
  font-size:var(--fs-2xs);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.header-brand-chip{background:var(--c-blue-50);color:#1769e0;border:1px solid rgba(23,105,224,.10);direction:ltr}
.header-live-chip{background:#ecfdf5;color:#15803d;border:1px solid rgba(22,163,74,.12)}
.header-live-chip i{width:6px;height:6px;margin-left:5px;border-radius:var(--r-circle);background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.10)}
.premium-topbar .identity h1{
  margin:1px 0 0!important;
  font-size:20px!important;
  line-height:1.45;
  font-weight:900!important;
  letter-spacing:-.35px;
  color:var(--ink)!important;
}
.premium-topbar .identity p{margin:1px 0 0!important;font-size:var(--fs-sm)!important;color:var(--muted)!important;font-weight:600}
.premium-actions{position:relative;z-index:1;gap:8px!important;direction:ltr}
.premium-actions .header-icon,.premium-actions .install-button{
  width:44px!important;
  height:44px!important;
  border-radius:15px!important;
  background:var(--surface-glass)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  color:var(--ink-on-glass)!important;
  box-shadow:0 8px 20px rgba(22,45,80,.07)!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.premium-actions .header-icon:hover,.premium-actions .install-button:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(22,45,80,.12)!important;background:var(--c-white)!important}
body.dark .premium-topbar{
  border-color:rgba(255,255,255,.08)!important;
  background:linear-gradient(118deg,rgba(13,28,47,.98),rgba(9,22,38,.96))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body.dark .header-brand-chip{background:rgba(59,130,246,.15);color:#bfdbfe;border-color:rgba(147,197,253,.12)}
body.dark .header-live-chip{background:rgba(34,197,94,.10);color:#86efac;border-color:rgba(134,239,172,.10)}
body.dark .premium-actions .header-icon,body.dark .premium-actions .install-button{border-color:rgba(255,255,255,.08)!important}
@media(max-width:560px){
  .premium-topbar{min-height:82px;padding:11px 12px!important;border-radius:21px!important;margin-bottom:15px!important}
  .premium-logo{width:50px!important;height:50px!important;flex-basis:50px;border-radius:17px!important}
  .premium-topbar .identity h1{font-size:16px!important;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .premium-topbar .identity p{font-size:var(--fs-2xs)!important}
  .header-brand-chip,.header-live-chip{font-size:7.5px;min-height:19px;padding:3px 6px}
  .premium-actions{gap:5px!important}
  .premium-actions .header-icon,.premium-actions .install-button{width:39px!important;height:39px!important;border-radius:13px!important}
}
@media(max-width:390px){
  .header-live-chip{display:none}
  .premium-topbar{padding-inline:10px!important}
  .premium-identity{gap:8px!important}
  .premium-logo{width:46px!important;height:46px!important;flex-basis:46px}
  .premium-topbar .identity h1{max-width:150px;font-size:var(--fs-xl)!important}
}

/* Registration shift wizard — v7.2.1 */
.register-progress{display:flex;align-items:flex-start;justify-content:center;gap:8px;margin:0 0 20px}.register-progress>span{display:grid;justify-items:center;gap:5px;color:var(--c-slate-400);font-size:var(--fs-xs);font-weight:800;min-width:54px}.register-progress>span b{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-circle);background:var(--c-slate-50);color:var(--c-slate-500);border:1px solid var(--c-slate-200);transition:.2s}.register-progress>span.active{color:var(--c-blue-600)}.register-progress>span.active b{color:var(--c-white);background:linear-gradient(135deg,var(--c-blue-600),var(--c-cyan-500));border-color:transparent;box-shadow:0 7px 18px rgba(37,99,235,.23)}.register-progress>i{width:44px;height:2px;background:#e5eaf1;margin-top:15px;border-radius:99px}.register-step[hidden]{display:none!important}.register-step{display:grid;gap:13px;animation:accountFade .22s ease both}.account-two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.account-form select{box-sizing:border-box;width:100%;border:1px solid #d9e2ef;border-radius:14px;padding:13px 14px;font:inherit;background:var(--c-white);color:#26364f;outline:none;transition:.18s}.account-form select:focus{border-color:#4f8cff;box-shadow:0 0 0 4px rgba(79,140,255,.12);background:var(--c-white)}.register-note{padding:12px 14px;border-radius:14px;background:#eff7ff;border:1px solid #cfe4ff;color:#335b87;font-size:11.5px;line-height:1.8}.register-actions{display:flex;gap:10px;margin-top:5px}.register-actions button{flex:1;min-height:48px;border-radius:15px}.register-shift-preview{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px;border-radius:17px;background:linear-gradient(145deg,#f3f8ff,var(--c-white));border:1px solid #d9e8fb;color:#334155}.register-shift-preview>span,.register-shift-preview>b{grid-column:1/-1}.register-shift-preview>span{color:var(--c-slate-500);font-size:var(--fs-sm)}.register-shift-preview>b{font-size:16px;color:#164e91}.register-shift-preview>div{display:grid;gap:3px;padding:9px 10px;background:var(--c-white);border-radius:var(--r-2);border:1px solid #e6edf6}.register-shift-preview small{color:#7b8aa0;font-size:var(--fs-xs)}.register-shift-preview strong{font-size:11.5px;line-height:1.7}.account-date-grid{direction:ltr}.account-date-grid input{text-align:center}.dark .register-note{background:#112a46;border-color:#264a72;color:#c7dcf4}.dark .register-shift-preview{background:linear-gradient(145deg,#10243d,#142a46);border-color:#294765;color:#dce8f7}.dark .register-shift-preview>b{color:#7eb7ff}.dark .register-shift-preview>div{background:#0e2037;border-color:#29415e}.dark .account-form select{background:#10243b;border-color:#2b4665;color:#e6edf7}
@media(max-width:520px){.account-two-cols{grid-template-columns:1fr}.register-progress{gap:3px}.register-progress>i{width:24px}.register-shift-preview{grid-template-columns:1fr}.register-actions{position:sticky;bottom:-20px;background:linear-gradient(transparent,var(--c-white) 25%);padding-top:16px;padding-bottom:2px}.dark .register-actions{background:linear-gradient(transparent,#101d30 25%)}}

/* v7.2.1 unified account settings */
.unified-account-center{display:block!important;margin:12px 0 22px}.unified-account-center[hidden]{display:block!important}.unified-account-center .account-center-form{margin-top:0}.account-mobile-field[hidden],#accountPasswordBox[hidden]{display:none!important}.kpc-announcement-host{display:grid;gap:8px}


/* KPC Time v8.1.0 — separated personal and shift settings */
.settings-group-card{margin:12px 0 22px;padding:18px;border:1px solid var(--line);border-radius:var(--r-4);background:linear-gradient(145deg,var(--card),rgba(248,251,255,.92));box-shadow:0 12px 30px rgba(23,55,96,.05)}.settings-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.settings-group-head>div{display:flex;flex-direction:column;gap:4px}.settings-group-head b{font-size:16px}.settings-group-head span{font-size:var(--fs-md);color:var(--muted)}.settings-group-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#e9f2ff,#dfeaff);font-size:20px}.shift-choice-area,.shift-custom-area{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:17px;background:var(--surface-veil)}.settings-shift-preview{display:flex;flex-direction:column;gap:5px;margin:14px 0;padding:15px;border-radius:17px;background:linear-gradient(135deg,#eaf3ff,#f5fbff);border:1px solid #d6e6fb}.settings-shift-preview span{font-size:var(--fs-sm);color:#6680a4}.settings-shift-preview b{font-size:var(--fs-xl);color:#174c94}.settings-shift-preview small{color:var(--c-slate-500)}.shift-profile-card [hidden]{display:none!important}.personal-profile-card .account-settings-card{margin-bottom:14px}body.dark .settings-group-card{background:linear-gradient(145deg,#0f2138,#112842)}body.dark .settings-shift-preview{background:linear-gradient(135deg,#102d51,#12345b);border-color:#224c7d}
@media(max-width:620px){.settings-group-card{padding:14px;border-radius:18px}.settings-group-head b{font-size:var(--fs-xl)}}


/* v8.2 Web Push settings */
.push-settings-card{display:grid;gap:16px}.push-status-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line,#dbe4ef);border-radius:18px;background:rgba(255,255,255,.48)}.push-status-row>div{display:grid;gap:4px}.push-status-row small{color:var(--muted,var(--c-slate-500))}.push-preferences{margin-top:2px}.push-settings-card .sync-actions-grid{margin-top:0}.push-settings-card button:disabled{opacity:.55;cursor:not-allowed}

/* v9.0.0 — device-aware PWA installation and notification guide */
.pwa-install-guide{display:grid;gap:13px;padding:15px;border:1px solid var(--line,#dbe4ef);border-radius:18px;background:linear-gradient(135deg,rgba(49,116,211,.08),rgba(255,255,255,.45))}.pwa-install-guide-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.pwa-install-guide-head>div{display:grid;gap:4px}.pwa-install-guide-head small{color:var(--muted)}.pwa-install-guide-head>span{font-size:28px}.pwa-guide-steps{margin:0;padding:0 22px 0 0;display:grid;gap:8px;color:var(--text)}.pwa-guide-steps li{line-height:1.8}.pwa-guide-steps li::marker{font-weight:900;color:var(--primary,#246ac7)}@media(max-width:620px){.pwa-install-guide .sync-actions-grid{grid-template-columns:1fr}}


/* v9.2.0 push diagnostics panel */
.push-diagnostics{
  margin-top:12px;padding:12px 14px;border-radius:14px;
  background:var(--surface-2,#f1f5f9);border:1px solid var(--border,#e2e8f0);
  font-family:inherit;font-size:.82rem;line-height:2;color:var(--text,#0f172a);
  white-space:pre-wrap;word-break:break-word;direction:rtl;text-align:right;
}