:root{
  --ink:#0F0C1B;
  --ink-soft:#7B2CBF;
  --paper:#F8F9FA;
  --card:#ffffff;
  --edge:#E4D6F5;
  --active:#7B2CBF;
  --break:#2D006B;
  --idle:#9B4DDB;

  --mint-100:#CFFCF6;
  --mint-200:#9FF9ED;
  --mint-300:#5FF5E1;
  --mint-400:#00F5D4;
  --mint-500:#00C7AC;

  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cond:"IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --body:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --display:"Archivo Black", "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;

  /* ---- worker app "Clean Marble" kit (scoped to #appScreen / .sheet only) ---- */
  --wk:"Poppins", var(--body);
  --wk-navy:#161922;
  --wk-green:#00AE0B;
  --wk-white:#FFFFFF;
  --wk-white-70:rgba(255,255,255,.7);
  --wk-white-60:rgba(255,255,255,.6);
  --wk-glass:rgba(255,255,255,.14);
  --wk-glass-border:rgba(255,255,255,.28);
  --wk-sheet-bg:rgba(16,18,24,.88);
  --wk-badge:rgba(0,0,0,.5);

  /* ---- "Shift Card" login screen kit (scoped to #loginScreen only) ---- */
  --sc-bg:#F2ECDD;
  --sc-card:#FFFFFF;
  --sc-input:#EAE2D2;
  --sc-green:#2F6844;
  --sc-green-dark:#1F4A30;
  --sc-badge:#8FA888;
  --sc-ink:#2B2B28;
  --sc-muted:#6B6558;
  --sc-footer:#A79E8C;
  --sc-serif:"Lora", Georgia, serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;min-height:100%}
body{
  background:#F8F9FA;
  color:var(--ink);font-family:var(--body);overscroll-behavior:none;-webkit-font-smoothing:antialiased;
}

/* ---------- worker app shell ---------- */
.app{
  display:flex;flex-direction:column;height:100dvh;width:min(100%,380px);max-width:380px;margin:0 auto;position:relative;
  color:var(--wk-white);
  background-color:var(--wk-navy);
  background-image:
    linear-gradient(90deg, rgba(13,15,20,.55), transparent 55%),
    url('bg-marble-mobile.webp');
  background-position:center;background-size:cover;background-repeat:no-repeat;
  animation:appIn .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes appIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- brand row (wordmark + username + sign out) ---------- */
.band{
  padding:calc(env(safe-area-inset-top) + 20px) 18px 8px;
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;
}
.band-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none;margin-left:auto}
.brand{min-width:0}
.brand-title{display:inline-block}
.brand-word{
  font-family:var(--wk);text-transform:uppercase;line-height:1;white-space:nowrap;
  font-size:clamp(26px,7vw,34px);letter-spacing:.01em;
}
.brand-word .ez{font-weight:700}
.brand-word .rest{font-weight:300;margin-left:.22em}
.brand-rule{width:100%;height:2px;background:var(--wk-white);margin:8px 0 14px;border-radius:1px}
.band-meta{
  font-family:var(--wk);font-weight:500;text-transform:uppercase;letter-spacing:.42em;
  font-size:15px;color:var(--wk-white);
}
.band-state{
  margin-top:5px;font-family:var(--wk);font-weight:400;text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:var(--wk-white-60);
}
.band-signout{
  flex:none;margin-top:2px;
  background:transparent;border:2px solid var(--wk-white);color:var(--wk-white);
  font-family:var(--wk);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 22px;border-radius:999px;cursor:pointer;transition:background .15s ease,transform .12s ease;
}
.band-signout:hover{background:rgba(255,255,255,.14)}
.band-signout:active{transform:scale(.97)}

/* ---------- ring timers ---------- */
.stage{flex:1;min-height:0;overflow:auto;padding:6px 16px 8px;display:flex;flex-direction:column;gap:14px}
.clock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:6px 0 2px}
.clock-panel{padding:6px 4px;text-align:center}
.ring{position:relative;width:100%;max-width:190px;aspect-ratio:1/1;margin:0 auto}
.ring-svg{width:100%;height:100%;overflow:visible}
.ring-track{fill:none;stroke:rgba(255,255,255,.9);stroke-width:9}
.ring-lap-fill{
  fill:none;stroke:rgba(0,174,11,.35);stroke-width:9;
  opacity:0;transition:opacity .4s ease,stroke .2s ease;
}
.ring-lap-fill.on{opacity:1}
.ring-progress{fill:none;stroke:var(--wk-green);stroke-width:9;stroke-linecap:butt;transition:stroke .2s ease}
.ring-svg marker path{fill:var(--wk-green);fill:context-stroke}
.band[data-s="ON_BREAK"] ~ .stage .ring-progress{stroke:rgba(255,255,255,.5)}
.band[data-s="ON_BREAK"] ~ .stage .ring-lap-fill{stroke:rgba(255,255,255,.25)}
.ring-center{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.ring-time{font-family:var(--wk);font-weight:500;font-variant-numeric:tabular-nums;color:var(--wk-white);display:inline-flex;align-items:flex-start}
.ring-main{font-size:clamp(22px,6vw,28px);letter-spacing:.01em}
.ring-sec{font-size:.5em;font-weight:400;margin-left:2px;line-height:1.6}
.clock-label{
  margin-top:12px;font-family:var(--wk);text-transform:uppercase;letter-spacing:.14em;
  font-size:13px;color:var(--wk-white);font-weight:500;
}
.clock-meta{margin-top:4px;font-family:var(--wk);font-size:11px;color:var(--wk-white-60);letter-spacing:.1em;text-transform:uppercase}
.shiftbar{
  display:flex;justify-content:center;gap:10px;align-items:baseline;
  padding-top:10px;
  font-family:var(--wk);font-size:12px;color:var(--wk-white-70);
  letter-spacing:.04em;min-height:22px;text-transform:uppercase;
}
.shiftbar b{font-weight:600;color:var(--wk-white);font-variant-numeric:tabular-nums}

/* ---------- punch card (glass panel) ---------- */
.right-stack{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;margin-top:-6px}
.card{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(4px) saturate(105%);-webkit-backdrop-filter:blur(4px) saturate(105%);
  border:1px solid var(--wk-glass-border);border-radius:22px;position:relative;padding:20px 20px 32px;flex:1;
}
.assign-card{flex:none}
.card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.35);margin-bottom:4px;
}
.card-head > span:first-child{
  font-family:var(--wk);font-weight:700;text-transform:uppercase;
  font-size:20px;line-height:1.15;letter-spacing:.01em;color:var(--wk-white);
}
.link{background:none;border:0;padding:4px 0;margin-top:2px;font:inherit;cursor:pointer;white-space:nowrap}
#appScreen .link,.sheet .link{
  font-family:var(--wk);letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:500;
  color:var(--wk-white-70);text-decoration:none;
}
#appScreen .link:hover,.sheet .link:hover{color:var(--wk-white)}
#loginScreen .link,#pendingScreen .link,#adminScreen .link{
  padding-left:12px;letter-spacing:inherit;text-transform:inherit;font-weight:inherit;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;
}
.punches{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.punches li{
  display:flex;gap:10px;align-items:baseline;padding:12px 14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;
  font-family:var(--wk);font-size:13px;
}
.punch-t{font-weight:600;font-variant-numeric:tabular-nums;color:var(--wk-white)}
.punch-k{
  font-family:var(--wk);text-transform:uppercase;letter-spacing:.1em;
  font-size:10px;font-weight:500;padding:4px 8px;
  border:1px solid rgba(255,255,255,.4);border-radius:999px;color:var(--wk-white-70);white-space:nowrap;
}
.punch-k.k-task{border-color:rgba(255,255,255,.9);color:var(--wk-white)}
.punch-k.k-break{border-color:rgba(255,255,255,.35);color:var(--wk-white-60)}
.punch-k.k-store{border-color:var(--wk-green);color:var(--wk-green)}
.punch-n{color:var(--wk-white-60);flex:1;text-align:right;font-size:12px}
.stamp-in{animation:stamp .22s cubic-bezier(.2,.9,.3,1.4)}
@keyframes stamp{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.empty{padding:20px 4px 24px;color:var(--wk-white-70);font-size:15px;line-height:1.6;text-align:center}
.empty-icon{
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  width:clamp(120px,32vw,180px);height:clamp(120px,32vw,180px);border-radius:50%;
  background:var(--wk-badge);color:var(--wk-white);
}
.empty-icon svg{width:38%;height:38%}

/* ---------- dock (clock-in / clock-out controls) ---------- */
.dock{padding:12px 16px 12px;display:flex;flex-direction:column;gap:12px;min-height:clamp(96px,22vh,132px);justify-content:flex-end}
.btn-icon{display:inline-flex;vertical-align:-3px;margin-right:8px}
.btn-icon svg{width:18px;height:18px}

/* ---------- bottom nav ---------- */
.bottom-nav{
  display:flex;justify-content:space-around;align-items:center;
  padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);
  background:rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.2);
}
.nav-btn{
  border:0;background:none;cursor:pointer;color:var(--wk-white-70);
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;transition:background .15s ease,color .15s ease;
}
.nav-btn svg{width:22px;height:22px}
.nav-btn:hover{color:var(--wk-white)}
.nav-btn.active{background:var(--wk-white);color:var(--wk-navy)}

.btn{
  width:100%;border:0;border-radius:16px;padding:18px 16px;position:relative;overflow:hidden;
  font-weight:500;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:transform .12s ease,opacity .15s ease,background .2s ease,box-shadow .2s ease;
}
.btn:active{transform:scale(.984)}
.btn-sm{padding:14px 12px;font-size:13px;letter-spacing:.1em}
.btn[disabled]{opacity:.34;cursor:not-allowed}

/* worker app + its sheets - "Clean Marble" kit */
#appScreen .btn,.sheet .btn{
  font-family:var(--wk);background:rgba(255,255,255,.12);color:var(--wk-white);border:1.5px solid rgba(255,255,255,.4);
}
#appScreen .btn-go,.sheet .btn-go{background:var(--wk-white);color:#12131a;box-shadow:0 12px 24px rgba(0,0,0,.28);border-color:transparent}
#appScreen .btn-break,.sheet .btn-break{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
#appScreen .btn-ghost,.sheet .btn-ghost{background:rgba(255,255,255,.1);color:var(--wk-white);border:1.5px solid rgba(255,255,255,.35)}
#appScreen .btn-wa,.sheet .btn-wa{background:var(--wk-green);color:#08210a;border-color:transparent;box-shadow:0 12px 22px rgba(0,174,11,.3)}

/* login / pending / admin - legacy palette, unchanged from before the redesign */
#loginScreen .btn,#pendingScreen .btn,#adminScreen .btn{
  font-family:var(--cond);font-weight:700;background:#2D006B;color:#fff;
}
#loginScreen .btn-go,#pendingScreen .btn-go,#adminScreen .btn-go{background:#00F5D4;color:var(--ink);box-shadow:0 12px 22px rgba(0,245,212,.35)}
#loginScreen .btn-ghost,#pendingScreen .btn-ghost,#adminScreen .btn-ghost{
  background:rgba(255,255,255,.65);color:var(--ink);border:1.5px solid rgba(255,255,255,.6);
  backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 8px 18px rgba(15,12,27,.08);
}
.row{display:flex;gap:10px}
.row .btn{flex:1}

@media (hover:hover){
  .btn:not([disabled]):hover{transform:translateY(-2px)}
  .btn-go:not([disabled]):hover{box-shadow:0 16px 30px rgba(0,0,0,.35)}
  .btn-ghost:not([disabled]):hover{background:rgba(255,255,255,.18)}
}

/* ---------- sheet (History / Profile / prompts) ---------- */
.scrim{position:fixed;inset:0;background:rgba(8,9,13,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--wk-sheet-bg);color:var(--wk-white);
  backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);
  border:1px solid rgba(255,255,255,.16);border-bottom:0;
  border-radius:20px 20px 0 0;transform:translateY(101%);
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
  max-width:380px;margin:0 auto;max-height:92dvh;overflow-y:auto;
  padding:10px 18px calc(env(safe-area-inset-bottom) + 18px);
  box-shadow:0 -20px 48px rgba(0,0,0,.4);
}
.sheet.on{transform:none}
.grab{width:38px;height:4px;border-radius:999px;background:rgba(255,255,255,.35);margin:6px auto 16px}
.sheet h2{font-family:var(--wk);text-transform:uppercase;letter-spacing:.02em;font-size:19px;margin:0 0 6px;font-weight:700;color:var(--wk-white)}
.sheet .hint{margin:0 0 18px;color:var(--wk-white-70);font-size:14px;line-height:1.45}
.req{color:#ff9d9d}

label.fld{display:block;margin-bottom:16px}
label.fld > span{
  display:block;font-family:var(--wk);text-transform:uppercase;letter-spacing:.12em;
  font-size:11px;font-weight:500;color:var(--wk-white-70);margin-bottom:8px;
}
input[type=text],select,textarea{
  width:100%;font-family:var(--wk);font-size:16px;padding:16px 14px;
  border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(255,255,255,.08);color:var(--wk-white);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
textarea{min-height:110px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.4)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--wk-white);outline-offset:2px}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.chip{
  border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:var(--wk-white);border-radius:999px;
  padding:12px 16px;font-family:var(--wk);font-weight:500;font-size:14px;
  letter-spacing:.02em;cursor:pointer;transition:transform .14s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.chip:hover{transform:translateY(-1px);background:rgba(255,255,255,.16)}
.chip[aria-pressed=true]{background:var(--wk-white);color:#12131a;border-color:transparent}
.chip[disabled]{opacity:.35;cursor:not-allowed}

.stars{display:flex;gap:8px;margin-bottom:8px}
.star{
  flex:1;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);border-radius:14px;padding:14px 0;
  cursor:pointer;font-family:var(--wk);font-size:18px;color:var(--wk-white);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.star:hover{border-color:var(--wk-white)}
.star[aria-pressed=true]{background:var(--wk-white);color:#12131a;border-color:transparent}

.preview{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:16px;
  margin-bottom:16px;font-family:var(--wk);font-size:12.5px;line-height:1.65;color:var(--wk-white-70);
  white-space:pre-wrap;word-break:break-word;
}
.tally{list-style:none;margin:0 0 18px;padding:0}
.tally li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.22);font-family:var(--wk);font-size:13px;color:var(--wk-white-70)}
.tally li b{font-weight:700;color:var(--wk-white)}

/* ---------- report charts ---------- */
.chart-wrap{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.donut{flex:none;width:96px;height:96px;border-radius:50%;position:relative}
.donut::after{
  content:"";position:absolute;inset:20px;border-radius:50%;
  background:var(--wk-navy);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.chart-legend{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.chart-legend li{display:flex;align-items:center;gap:8px;font-family:var(--wk);font-size:11.5px;color:var(--wk-white-70)}
.chart-swatch{flex:none;width:9px;height:9px;border-radius:3px}
.chart-legend .chart-bar-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--wk-white);font-weight:600}
.chart-legend .chart-bar-value{flex:none;white-space:nowrap}
.chart-bars{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.chart-bar-track{height:8px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
.chart-bar-fill{height:100%;border-radius:999px}

.hist{list-style:none;margin:0 0 18px;padding:0}
.hist li{border-bottom:1px solid rgba(255,255,255,.18);padding:14px 0;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.hist .h-c{font-family:var(--wk);font-weight:600;font-size:16px;letter-spacing:.02em;color:var(--wk-white)}
.hist .h-d{font-family:var(--wk);font-size:11.5px;color:var(--wk-white-60);margin-top:3px}
.hist .h-h{font-family:var(--wk);font-size:15px;font-weight:600;white-space:nowrap;color:var(--wk-white)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:rgba(15,17,23,.9);color:#fff;padding:13px 20px;border-radius:999px;
  font-family:var(--wk);letter-spacing:.06em;font-size:14px;font-weight:500;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  opacity:0;pointer-events:none;transition:.22s ease;z-index:80;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- desktop layout ---------- */
@media (min-width:1024px){
  body{padding:32px 16px}
  .app{
    display:grid;
    grid-template-columns:340px 1fr;
    grid-template-rows:auto auto auto auto auto;
    grid-template-areas:
      "band band"
      "clock card"
      "shiftbar card"
      "dock card"
      "nav .";
    column-gap:28px;row-gap:0;
    width:min(94vw,880px);max-width:880px;
    max-height:min(90vh,720px);
    margin:0 auto;
    border-radius:28px;overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,.4);
    background-image:
      linear-gradient(90deg, rgba(13,15,20,.55), transparent 55%),
      url('bg-marble.webp');
  }
  .band{grid-area:band;padding:32px 32px 8px}
  .stage{display:contents}
  .clock{grid-area:clock;padding:18px 24px 0}
  .shiftbar{grid-area:shiftbar;padding:0 24px 20px}
  .right-stack{grid-area:card;margin:24px 32px 18px 0;max-height:100%;min-height:0}
  .card{flex:1;height:auto;overflow-y:auto}
  .assign-card{overflow-y:visible}
  .dock{grid-area:dock;min-height:auto;padding:0 24px 18px}
  .bottom-nav{grid-area:nav;padding:10px 24px calc(env(safe-area-inset-bottom) + 10px);background:transparent;border-top:0;backdrop-filter:none;-webkit-backdrop-filter:none}

  .grab{display:none}
  .sheet{
    left:0;right:0;top:0;bottom:0;margin:auto;
    width:min(92vw,440px);height:max-content;max-height:86vh;
    border-radius:20px;
    transform:translateY(12px) scale(.98);opacity:0;pointer-events:none;
    transition:transform .22s ease,opacity .2s ease;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
    padding:22px 22px calc(env(safe-area-inset-bottom) + 22px);
  }
  .sheet.on{transform:none;opacity:1;pointer-events:auto}
}

/* ---------- fine details ---------- */
.stage,.card,.sheet{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.stage::-webkit-scrollbar,.card::-webkit-scrollbar,.sheet::-webkit-scrollbar{width:6px}
.stage::-webkit-scrollbar-thumb,.card::-webkit-scrollbar-thumb,.sheet::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:999px}
.stage::-webkit-scrollbar-track,.card::-webkit-scrollbar-track,.sheet::-webkit-scrollbar-track{background:transparent}

.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.app :focus-visible,.sheet :focus-visible{outline:2px solid var(--wk-white);outline-offset:3px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- login / admin (unchanged legacy palette) ---------- */
.hidden{display:none!important}
.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
  width:min(100%,360px);background:rgba(255,255,255,.75);
  backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);border-radius:26px;padding:28px 24px;
  box-shadow:0 30px 60px rgba(15,12,27,.18);
}
.login-card h1{font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:.01em;font-weight:400;margin:0 0 6px}
.login-card .hint{margin:0 0 20px}
.login-err{color:#b91c1c;font-size:13px;margin:-8px 0 14px;line-height:1.4}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand-logo{display:block;height:40px;width:auto;margin:0 0 18px}

/* ---------- login screen: "Shift Card" redesign (scoped, #loginScreen only) ---------- */
#loginScreen.login-wrap{background:var(--sc-bg);overflow-y:auto;padding:48px 24px}
#loginScreen .sc-col{width:min(100%,400px);margin:0 auto}
#loginScreen .sc-header{text-align:center;margin-bottom:28px}
#loginScreen .sc-icon{
  width:72px;height:72px;border-radius:20px;background:var(--sc-badge);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  box-shadow:0 12px 26px rgba(143,168,136,.4);
}
#loginScreen .sc-icon svg{width:32px;height:32px}
#loginScreen .sc-title{font-family:var(--sc-serif);font-weight:700;font-size:34px;color:var(--sc-green-dark);margin:0 0 10px;letter-spacing:.01em}
#loginScreen .sc-subtitle{font-family:var(--body);color:var(--sc-muted);font-size:15px;margin:0}

#loginScreen .login-card{
  width:auto;background:var(--sc-card);border:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-radius:26px;padding:32px 28px;box-shadow:0 20px 50px rgba(60,50,30,.1);
}
#loginScreen .login-err{text-align:center;margin:0 0 16px}

#loginScreen .sc-fld{display:block;margin-bottom:20px}
#loginScreen .sc-fld > span,#loginScreen .sc-fld-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--body);font-size:14px;color:var(--sc-ink);font-weight:500;margin-bottom:8px;
}
#loginScreen .sc-input-wrap{position:relative}
#loginScreen input[type=email],#loginScreen input[type=password]{
  width:100%;font-family:var(--body);font-size:15px;padding:15px 44px 15px 16px;
  border:1px solid transparent;border-radius:14px;background:var(--sc-input);color:var(--sc-ink);
}
#loginScreen input::placeholder{color:#A79E8C}
#loginScreen input:focus{outline:2px solid var(--sc-green);outline-offset:1px;background:#fff}
#loginScreen .sc-input-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#A79E8C;pointer-events:none}

#loginScreen .sc-link{background:none;border:0;padding:0;font-family:var(--body);font-size:13px;font-weight:600;color:var(--sc-green);cursor:pointer;text-decoration:none}
#loginScreen .sc-link:hover{text-decoration:underline}

#loginScreen .sc-check{display:flex;align-items:center;gap:10px;margin:4px 0 22px;cursor:pointer;font-family:var(--body);font-size:14px;color:var(--sc-ink)}
#loginScreen .sc-check input{position:absolute;opacity:0;width:18px;height:18px;margin:0}
#loginScreen .sc-check-box{
  width:18px;height:18px;border-radius:50%;border:1.5px solid #C9C1AE;flex:none;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease;
}
#loginScreen .sc-check input:checked + .sc-check-box{background:var(--sc-green);border-color:var(--sc-green)}
#loginScreen .sc-check input:checked + .sc-check-box::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
#loginScreen .sc-check input:focus-visible + .sc-check-box{outline:2px solid var(--sc-green);outline-offset:2px}

#loginScreen .sc-btn-go{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--sc-green);color:#fff;border:0;border-radius:16px;padding:17px 16px;
  font-family:var(--body);font-weight:600;font-size:16px;cursor:pointer;
  transition:transform .12s ease,background .2s ease;
}
#loginScreen .sc-btn-go:hover{background:var(--sc-green-dark)}
#loginScreen .sc-btn-go:active{transform:scale(.985)}
#loginScreen .sc-btn-go svg{width:18px;height:18px}
#loginScreen .sc-btn-go[disabled]{opacity:.5;cursor:not-allowed}

#loginScreen .sc-divider{display:flex;align-items:center;gap:14px;margin:26px 0 18px;color:#A79E8C;font-size:11px;letter-spacing:.14em;font-family:var(--body);font-weight:600}
#loginScreen .sc-divider::before,#loginScreen .sc-divider::after{content:"";flex:1;height:1px;background:#E4DECD}

#loginScreen .sc-btn-oauth{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--sc-input);color:var(--sc-ink);border:0;border-radius:14px;padding:14px 16px;
  font-family:var(--body);font-weight:600;font-size:15px;cursor:pointer;transition:background .15s ease;
}
#loginScreen .sc-btn-oauth:hover{background:#E2D9C4}
#loginScreen .sc-btn-oauth[disabled]{opacity:.5;cursor:not-allowed}
#loginScreen .sc-btn-oauth svg{width:20px;height:20px;flex:none}

#loginScreen .sc-switch{text-align:center;margin:24px 0 0;font-family:var(--body);font-size:14px;color:var(--sc-ink)}
#loginScreen .sc-link-strong{background:none;border:0;padding:0;font-family:var(--body);font-weight:700;font-size:14px;color:var(--sc-green);cursor:pointer}
#loginScreen .sc-link-strong:hover{text-decoration:underline}

#loginScreen .sc-footer{text-align:center;margin-top:36px}
#loginScreen .sc-footer-link{font-family:var(--body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sc-footer);text-decoration:none;margin:0 10px}
#loginScreen a.sc-footer-link:hover{color:var(--sc-green)}
#loginScreen .sc-copyright{margin:14px 0 0;font-size:12px;color:#C4BCA9;font-family:var(--body)}