/* Nuru Craft Clock-in — light "SaaS dashboard" theme in navy blue.
   Inspired by a modern invoices dashboard: airy light bg, big rounded soft
   cards, a floating dark pill navbar, and a dark navy feature panel with nested
   sub-cards. Space Grotesk / Inter / JetBrains Mono. Respects reduced-motion. */
:root {
  color-scheme: light;

  --bg:        #EDF0F7;   /* airy cool light */
  --bg-2:      #F5F7FC;
  --surface:   #FFFFFF;
  --surface-2: #F6F8FD;
  --line:      #E7EBF4;
  --line-2:    #D8DEEC;

  --ink:   #131A2E;       /* near-navy text */
  --ink-2: #5A6379;
  --ink-3: #97A0B5;

  /* navy blue system (replaces the reference purple) */
  --navy:        #1E3A8A;
  --navy-bright: #2946C8;   /* interactive / CTA */
  --navy-hi:     #3B5BE0;
  --navy-soft:   #E9EEFB;   /* selected tint */
  --navy-ink:    #16224A;

  /* dark feature panel */
  --panel:   #141C36;
  --panel-2: #202B4E;      /* nested sub-card */
  --panel-3: #2A3763;
  --on-panel:   #EAEEFA;
  --on-panel-2: #9AA6C9;

  --ok:  #17A34A; --ok-bg: #E4F6EA;
  --warn:#C4780A; --warn-bg:#FBEECF;
  --off: #6B7488; --off-bg: #EDF0F6;
  --danger:#DC2626; --danger-bg:#FCE7E7;

  --radius:  22px; --radius-md: 16px; --radius-sm: 12px;
  --shadow:  0 2px 6px rgba(30,58,138,.05), 0 18px 40px -20px rgba(30,58,138,.22);
  --shadow-sm: 0 1px 3px rgba(30,58,138,.06), 0 8px 20px -16px rgba(30,58,138,.2);
  --shadow-nav: 0 10px 30px -8px rgba(20,28,54,.5);
  --tap: 48px;

  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --display: 'Plus Jakarta Sans', var(--sans);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans); color: var(--ink); line-height: 1.55;
  background:
    radial-gradient(900px 500px at 92% -10%, rgba(41,70,200,.10), transparent 60%),
    radial-gradient(760px 520px at -8% 110%, rgba(30,58,138,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 26px 24px 80px; }
.row { display: flex; align-items: center; } .spread { justify-content: space-between; }
.gap-sm{gap:8px}.gap{gap:14px}.gap-lg{gap:22px}
.stack { display: flex; flex-direction: column; }

/* brand */
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center;
  color: #fff; font-family: var(--display); font-weight: 700; font-size: .95rem;
  background: linear-gradient(150deg, var(--navy-hi), var(--navy)); box-shadow: 0 8px 20px -8px rgba(41,70,200,.6); }
.brand .name { font-family: var(--display); font-weight: 600; }
.brand .sub { font-size: .8rem; color: var(--ink-3); }

/* floating dark pill navbar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.navpill { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px;
  background: var(--panel); box-shadow: var(--shadow-nav); }
.navpill a { padding: 9px 16px; border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--on-panel-2);
  transition: background .15s, color .15s; }
.navpill a:hover { color: #fff; }
.navpill a.active { background: var(--navy-bright); color: #fff; box-shadow: 0 6px 16px -6px rgba(41,70,200,.8); }

/* buttons */
.btn { --b: var(--surface); --fg: var(--ink); --bd: var(--line-2); --gl: var(--shadow-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap);
  padding: 0 20px; border-radius: 13px; background: var(--b); color: var(--fg); border: 1px solid var(--bd);
  font: inherit; font-weight: 600; box-shadow: var(--gl); transition: transform .12s, filter .15s, box-shadow .2s;
  touch-action: manipulation; user-select: none; }
.btn:hover { filter: brightness(.99); transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; }
.btn:focus-visible { outline: 2px solid var(--navy-bright); outline-offset: 2px; }
.btn-primary { --b: linear-gradient(150deg, var(--navy-hi), var(--navy-bright)); --fg:#fff; --bd: transparent; --gl: 0 10px 26px -10px rgba(41,70,200,.7); }
.btn-danger  { --b: linear-gradient(150deg, #EF4444, #DC2626); --fg:#fff; --bd: transparent; --gl: 0 10px 26px -10px rgba(220,38,38,.6); }
.btn-amber   { --b: linear-gradient(150deg, #F59E0B, #D97706); --fg:#fff; --bd: transparent; --gl: 0 10px 26px -10px rgba(217,119,6,.55); }
.btn-ghost   { --b: transparent; --gl: none; }
.btn-lg { min-height: 58px; font-size: 1.03rem; border-radius: 16px; }
.btn-block { width: 100%; }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; }

/* stat tiles with mini charts */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; min-height: 128px; }
.stat .top { display: flex; align-items: center; justify-content: space-between; }
.stat .l { font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.stat .badge { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--navy-bright); background: var(--navy-soft); }
.stat .n { font-family: var(--mono); font-weight: 700; font-size: 2.3rem; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.stat .spark { margin-top: auto; height: 34px; width: 100%; }
.stat--onsite .n{color:var(--ok)} .stat--break .n{color:var(--warn)} .stat--off .n{color:var(--off)}

/* status pill */
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.pill::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--on_site { color: var(--ok); background: var(--ok-bg); }
.pill--on_break { color: var(--warn); background: var(--warn-bg); }
.pill--off { color: var(--off); background: var(--off-bg); }

/* avatars */
.avatar { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
  font-family: var(--display); font-weight: 600; color: var(--navy-bright); background: var(--navy-soft); font-size: .9rem; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* people list */
.section-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3); font-weight: 700; margin: 26px 2px 13px; }
.people { display: flex; flex-direction: column; gap: 11px; }
.person { display: flex; align-items: center; gap: 13px; padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.person .who { flex: 1; min-width: 0; } .person .who .nm { font-weight: 600; }
.person .who .jt { font-size: .82rem; color: var(--ink-3); }
a.person { transition: transform .12s, border-color .15s; }
a.person:hover { border-color: var(--navy-bright); transform: translateY(-1px); }
a.person:active { transform: scale(.99); }

/* table */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; padding: 6px 12px; }
.table td { padding: 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.table tr:first-child td { border-top: none; }

/* geofence badge */
.geo { display: inline-flex; align-items: center; gap: 6px; font-size: .77rem; font-weight: 600; padding: 3px 10px; border-radius: 8px; }
.geo--in { color: var(--ok); background: var(--ok-bg); }
.geo--out { color: var(--danger); background: var(--danger-bg); }
.geo--none { color: var(--ink-3); background: var(--off-bg); }

/* activity feed */
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed li { display: flex; gap: 11px; align-items: center; padding: 11px 2px; border-top: 1px solid var(--line); }
.feed li:first-child { border-top: none; }
.feed .tk { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: .8rem; }
.tk--in{background:var(--ok-bg);color:var(--ok)} .tk--out{background:var(--danger-bg);color:var(--danger)}
.tk--break_start{background:var(--warn-bg);color:var(--warn)} .tk--break_end{background:var(--ok-bg);color:var(--ok)}
.feed .ft { margin-left: auto; color: var(--ink-3); font-size: .82rem; font-family: var(--mono); }

/* DARK FEATURE PANEL (navy) with nested sub-cards */
.panel-dark { position: relative; overflow: hidden; border-radius: var(--radius); padding: 24px;
  background: radial-gradient(600px 240px at 100% 0, rgba(59,91,224,.35), transparent 60%), var(--panel);
  color: var(--on-panel); box-shadow: 0 24px 50px -24px rgba(20,28,54,.6); }
.panel-dark h3 { color: #fff; }
.panel-dark .sub { color: var(--on-panel-2); }
.subgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 16px; }
.subcard { background: var(--panel-2); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-sm); padding: 15px 16px; }
.subcard.hl { background: linear-gradient(160deg, var(--navy-hi), var(--navy-bright)); }
.subcard .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--on-panel-2); font-weight: 600; }
.subcard.hl .k { color: rgba(255,255,255,.8); }
.subcard .v { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; color: #fff; margin-top: 6px; letter-spacing: -.02em; }

/* phone */
.phone { max-width: 440px; margin: 0 auto; min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; }
.phone .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* greeting app bar */
.appbar { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.appbar .pfp { width: 46px; height: 46px; border-radius: 14px; flex: none; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy-hi), var(--navy)); color: #fff; font-family: var(--display); font-weight: 700; }
.appbar .pfp img { width: 100%; height: 100%; object-fit: cover; }
.appbar .greet { flex: 1; min-width: 0; }
.appbar .greet .hi { font-size: .82rem; color: var(--ink-3); font-weight: 500; }
.appbar .greet .who { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.iconbtn { width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--surface);
  display: grid; place-items: center; color: var(--ink-2); box-shadow: var(--shadow-sm); }

/* week calendar strip */
.calendar { display: flex; gap: 9px; overflow-x: auto; padding: 4px 2px 6px; margin: 14px -2px 0; scrollbar-width: none; }
.calendar::-webkit-scrollbar { display: none; }
.day { flex: none; width: 52px; padding: 11px 0 9px; border-radius: 16px; text-align: center; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.day .wd { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.day .dd { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; margin-top: 3px; color: var(--ink); }
.day .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--navy-bright); margin: 5px auto 0; opacity: .55; }
.day.today { background: linear-gradient(160deg, var(--navy-hi), var(--navy-bright)); border-color: transparent;
  box-shadow: 0 10px 22px -8px rgba(41,70,200,.65); }
.day.today .wd { color: rgba(255,255,255,.8); } .day.today .dd { color: #fff; } .day.today .dot { background: #fff; opacity: 1; }

/* mobile hero card (navy, with decorative shapes) */
.mhero { position: relative; overflow: hidden; margin-top: 16px; padding: 22px; border-radius: 24px; color: #fff;
  background: radial-gradient(340px 200px at 108% -20%, rgba(139,163,247,.55), transparent 60%),
              linear-gradient(150deg, var(--navy-hi), var(--navy)); box-shadow: 0 22px 44px -22px rgba(30,58,138,.75); }
.mhero .blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; }
.mhero .blob.a { width: 120px; height: 120px; right: -30px; top: -34px; background: rgba(255,255,255,.16); }
.mhero .blob.b { width: 70px; height: 70px; right: 54px; bottom: -30px; background: rgba(139,163,247,.5); }
.mhero .eyebrow { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.72); font-weight: 700; }
.mhero .big { font-family: var(--display); font-weight: 800; font-size: 1.75rem; letter-spacing: -.02em; margin-top: 6px; }
.mhero .sub { color: rgba(255,255,255,.8); font-size: .9rem; margin-top: 4px; position: relative; }
.mhero .chips { display: flex; gap: 8px; margin-top: 16px; position: relative; }
.mhero .chip { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.16); padding: 7px 13px; border-radius: 12px;
  font-size: .84rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.mhero .chip .num { color: #fff; }

/* bottom tab bar */
.tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom));
  width: min(420px, calc(100% - 28px)); display: flex; justify-content: space-around; align-items: center;
  padding: 9px; border-radius: 24px; background: var(--panel); box-shadow: var(--shadow-nav); z-index: 50; }
.tabbar a { width: 52px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: var(--on-panel-2); transition: color .15s, background .15s; }
.tabbar a:hover { color: #fff; }
.tabbar a.active { color: #fff; background: var(--navy-bright); box-shadow: 0 8px 18px -6px rgba(41,70,200,.8); }

/* camera */
.camera { position: relative; aspect-ratio: 3/4; width: 100%; border-radius: 20px; overflow: hidden;
  background: #0b1020; display: grid; place-items: center; border: 1px solid var(--line-2); }
.camera video, .camera canvas, .camera img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera .hint { position: absolute; color: #9aa6c9; font-size: .85rem; text-align: center; padding: 0 24px; }
.camera .ring { position: absolute; inset: 14px; border: 2px dashed rgba(59,91,224,.5); border-radius: 16px; pointer-events: none; }
.shot { position: absolute; right: 12px; bottom: 12px; background: rgba(23,163,74,.95); color: #fff; padding: 5px 12px; border-radius: 9px; font-size: .78rem; font-weight: 700; }

/* clock hero */
.hero { text-align: center; padding: 26px 18px; }
.hero .nm { font-family: var(--display); font-size: 1.45rem; font-weight: 600; }
.hero .jt { color: var(--ink-3); }
.hero .clock { font-family: var(--mono); font-size: 3.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-top: 8px; color: var(--navy-bright); }
.hero .clock small { font-size: .9rem; color: var(--ink-3); font-weight: 500; }
.hero .clock-label { color: var(--ink-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .11em; margin-top: 6px; }

/* form */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.field label { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.field input { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); font: inherit; color: var(--ink); }
.field input:focus { outline: 2px solid var(--navy-bright); outline-offset: 1px; border-color: transparent; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* landing */
.hero-land { text-align: center; padding: 46px 10px 8px; }
.hero-land h1 { font-size: 2.8rem; letter-spacing: -.03em; line-height: 1.04; color: var(--navy-ink); }
.hero-land h1 .acc { color: var(--navy-bright); }
.hero-land p { color: var(--ink-2); max-width: 48ch; margin: 14px auto 0; }
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.pick { display: block; padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); transition: transform .18s, border-color .18s; }
.pick:hover { transform: translateY(-4px); border-color: var(--navy-bright); }
.pick .ic { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 16px; background: var(--navy-soft); color: var(--navy-bright); }
.pick h3 { font-size: 1.28rem; } .pick p { color: var(--ink-2); margin: 7px 0 0; font-size: .94rem; }
.pick .go { margin-top: 16px; color: var(--navy-bright); font-weight: 700; }

.geopanel { display: flex; align-items: center; gap: 16px; }
.geomap { width: 116px; height: 116px; flex: none; }
.note { margin-top: 30px; font-size: .82rem; color: var(--ink-3); text-align: center; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; margin: 26px 2px 4px; }
.pagehead h1 { font-size: 1.9rem; } .pagehead .sub { color: var(--ink-3); font-size: .9rem; margin-top: 4px; }
.board-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; margin-top: 20px; align-items: start; }

/* ============ ENTERPRISE DASHBOARD ============ */
.dash{display:grid;grid-template-columns:74px 1fr;min-height:100vh;background:var(--bg)}
.side{background:#0e1730;display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:8px;position:sticky;top:0;height:100vh}
.side .slogo{width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;margin-bottom:14px;overflow:hidden}
.side .slogo img{width:34px;height:34px;object-fit:contain}
.side a{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#8496bd;transition:.15s}
.side a:hover{color:#fff;background:rgba(255,255,255,.06)}
.side a.on{color:#fff;background:linear-gradient(160deg,var(--navy-bright),var(--navy));box-shadow:0 8px 18px -6px rgba(41,70,200,.7)}
.side .sp{margin-top:auto}
.main{padding:22px clamp(16px,2.4vw,32px) 48px;min-width:0}
.dtop{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.dtop .ttl{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.dtop .sub{color:var(--ink-3);font-size:.85rem}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 14px;height:44px;color:var(--ink-3);box-shadow:var(--shadow-sm)}
.search input{border:0;outline:0;background:transparent;font:inherit;color:var(--ink);width:100%}
.tbtn{width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);position:relative;box-shadow:var(--shadow-sm)}
.tbtn .badge{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}
.me{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 6px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}

.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:var(--shadow-sm)}
.kpi .kl{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700}
.kpi .kn{font-family:var(--mono);font-size:1.65rem;font-weight:700;margin-top:8px;letter-spacing:-.02em}
.kpi .kt{font-size:.73rem;margin-top:3px;color:var(--ink-3)}
.kpi.good .kn{color:var(--ok)} .kpi.warn .kn{color:var(--warn)} .kpi.bad .kn{color:var(--danger)} .kpi.accent .kn{color:var(--navy-bright)}

.dgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
.dcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.wchart{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:10px}
.wbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.wbar .bar{width:100%;max-width:34px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--navy-bright),var(--navy-hi));transform-origin:bottom;transform:scaleY(0);box-shadow:0 6px 14px -6px rgba(41,70,200,.55)}
.wbar.today .bar{background:linear-gradient(180deg,#22c55e,#16a34a);box-shadow:0 6px 14px -6px rgba(34,197,94,.55)}
.wbar .wl{font-size:.72rem;color:var(--ink-3);font-weight:600}
.wbar .wv{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);font-weight:700}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .dow{font-size:.64rem;text-transform:uppercase;color:var(--ink-3);font-weight:700;text-align:center;padding-bottom:2px}
.cd{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.82rem;font-weight:600;background:var(--surface-2);border:1px solid transparent;color:var(--ink-2)}
.cd.out{opacity:.3} .cd.today{background:linear-gradient(160deg,var(--navy-bright),var(--navy));color:#fff}
.cd .pd{display:flex;gap:2px;height:5px}.cd .pd i{width:4px;height:4px;border-radius:50%;background:var(--ok)}
.cd.today .pd i{background:#fff}

.alist{display:flex;flex-direction:column}
.alrt{display:flex;gap:11px;align-items:center;padding:11px 2px;border-top:1px solid var(--line)}
.alrt:first-child{border-top:0}
.alrt .ai{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:.8rem}
.ai.offsite{background:var(--danger-bg);color:var(--danger)} .ai.absent{background:var(--off-bg);color:var(--off)}
.alrt .aw{flex:1;min-width:0}.alrt .aw b{font-weight:650}.alrt .aw span{color:var(--ink-3);font-size:.85rem}

@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}.dgrid{grid-template-columns:1fr}}
@media(max-width:680px){.dash{grid-template-columns:1fr}.side{position:fixed;bottom:0;top:auto;left:0;right:0;height:auto;flex-direction:row;justify-content:space-around;width:100%;z-index:50;padding:8px}.side .slogo,.side .sp{display:none}.main{padding-bottom:80px}.kpis{grid-template-columns:1fr 1fr}}

@media (max-width: 820px){ .stats{grid-template-columns:1fr 1fr} .subgrid{grid-template-columns:1fr 1fr} }
@media (max-width: 760px){ .picks{grid-template-columns:1fr} .board-grid{grid-template-columns:1fr} .navpill{display:none} .hero-land h1{font-size:2.1rem} }
/* ============ GREEN ENTERPRISE DASHBOARD ============ */
.gboard{--gg:#2f6b45;--gg-d:#1f7a49;--gg-soft:#e7f6ec;--g-bg:#e8ece7;--g-panel:#fff;--g-ink:#12211a;--g-ink2:#657a6f;--g-ink3:#9baba1;--g-line:#eef1ee;--g-dark:#10261b;--g-rad:24px;--g-rad2:16px;--g-sh:0 1px 2px rgba(16,40,30,.05),0 20px 44px -26px rgba(16,40,30,.30);
  font-family:'Calibri','Segoe UI',system-ui,sans-serif;background:var(--g-bg);color:var(--g-ink);min-height:100vh;padding:20px}
.gshell{display:grid;grid-template-columns:250px 1fr;gap:20px;max-width:1500px;margin:0 auto}
.gside{background:var(--g-dark);border-radius:26px;padding:20px 15px;display:flex;flex-direction:column;color:#bcd0c4;position:sticky;top:20px;height:calc(100vh - 40px)}
.gws{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.06);border-radius:16px;padding:9px 11px}
.gws .wl{width:36px;height:36px;border-radius:11px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none}
.gws .wl img{width:27px;height:27px;object-fit:contain}
.gws .wt{flex:1;min-width:0}.gws .wt b{color:#fff;font-weight:700;font-size:.95rem;display:block}.gws .wt span{font-size:.75rem;color:#84a091}
.gsearch{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);border-radius:13px;padding:0 12px;height:42px;color:#8aa596;margin:14px 0}
.gsearch input{background:transparent;border:0;outline:0;color:#dcece3;font:inherit;width:100%}
.gnav-l{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#5f7c6d;font-weight:700;margin:6px 6px 8px}
.gnav{display:flex;flex-direction:column;gap:3px}
.gnav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;color:#a2b8ab;font-weight:500;font-size:.94rem;transition:.15s}
.gnav a:hover{background:rgba(255,255,255,.05);color:#fff}
.gnav a.on{background:var(--gg);color:#04140b;font-weight:700;box-shadow:0 10px 20px -8px rgba(47,191,107,.7)}
.gnav a .bdg{margin-left:auto;background:rgba(255,255,255,.14);color:#fff;font-size:.7rem;font-weight:700;padding:1px 8px;border-radius:8px}
.guser{margin-top:auto;display:flex;align-items:center;gap:11px;padding-top:15px;border-top:1px solid rgba(255,255,255,.08)}
.guser .av{width:40px;height:40px;border-radius:12px;background:linear-gradient(150deg,var(--gg),var(--gg-d));display:grid;place-items:center;color:#04140b;font-weight:700;flex:none}
.guser .ut b{color:#fff;font-size:.9rem;display:block}.guser .ut span{font-size:.75rem;color:#84a091}
.gmain{min-width:0;display:flex;flex-direction:column;gap:18px}
.gtop{display:flex;align-items:center;gap:14px}
.gtop .th{flex:1}.gtop .th h1{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}.gtop .th p{color:var(--g-ink2);font-size:.88rem;margin-top:2px}
.gbtn{background:var(--gg);color:#04140b;border:0;border-radius:14px;padding:0 18px;height:46px;font:inherit;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 20px -8px rgba(47,191,107,.6)}
.gbtn.ghost{background:#fff;color:var(--g-ink);box-shadow:var(--g-sh)}
.gicon{width:46px;height:46px;border-radius:13px;background:#fff;display:grid;place-items:center;color:var(--g-ink2);box-shadow:var(--g-sh);position:relative;flex:none}
.gicon .bd{position:absolute;top:10px;right:11px;width:7px;height:7px;border-radius:50%;background:#ef5b5b;border:2px solid #fff}
.gcard{background:var(--g-panel);border-radius:var(--g-rad);padding:22px;box-shadow:var(--g-sh)}
.gcard.dark{background:var(--g-dark);color:#eafff2}
.gcard h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.gcard .cmeta{color:var(--g-ink3);font-size:.82rem}.gcard.dark .cmeta{color:#8fb0a0}
.gstats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gstat .top{display:flex;align-items:center;justify-content:space-between}
.gstat .ic{width:40px;height:40px;border-radius:12px;background:var(--gg-soft);color:var(--gg-d);display:grid;place-items:center}
.gcard.dark .gstat .ic{background:rgba(255,255,255,.1);color:#8ff0b8}
.gstat .n{font-size:2.3rem;font-weight:800;letter-spacing:-.025em;margin-top:16px}
.gstat .l{color:var(--g-ink2);font-size:.85rem;margin-top:2px}.gcard.dark .gstat .l{color:#9fc0b0}
.gtrend{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;color:var(--gg-d);background:var(--gg-soft);padding:3px 9px;border-radius:9px}
.grid-2{display:grid;grid-template-columns:1.9fr 1fr;gap:18px;align-items:stretch}
.grid-3{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.gchart{display:flex;align-items:flex-end;gap:9px;height:210px;margin-top:18px}
.gcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end}
.gcol .track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.gcol .bar{width:70%;max-width:30px;border-radius:8px;background:#d8e9dd;transform-origin:bottom;transform:scaleY(0)}
.gcol.hi .bar{background:linear-gradient(180deg,var(--gg),var(--gg-d))}
.gcol .lbl{font-size:.74rem;color:var(--g-ink3);font-weight:600}.gcol .val{font-size:.74rem;color:var(--g-ink2);font-weight:700}
.gbig .n{font-size:3.4rem;font-weight:800;letter-spacing:-.03em;line-height:1}.gbig .u{font-size:1rem;color:var(--g-ink3);font-weight:600}
.grow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--g-line)}
.grow .ic{width:38px;height:38px;border-radius:11px;background:var(--gg-soft);color:var(--gg-d);display:grid;place-items:center;flex:none}
.grow .t{flex:1}.grow .t b{font-weight:700}.grow .t span{color:var(--g-ink3);font-size:.8rem;display:block}.grow .v{font-weight:800}
.gtable{width:100%;border-collapse:separate;border-spacing:0}
.gtable th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--g-ink3);font-weight:700;padding:6px 14px}
.gtable td{padding:11px 14px;border-top:1px solid var(--g-line)}
.gtable tr:hover td{background:#f6faf7}
.gav{width:40px;height:40px;border-radius:12px;overflow:hidden;background:var(--gg-soft);color:var(--gg-d);display:grid;place-items:center;font-weight:700}
.gav img{width:100%;height:100%;object-fit:cover}
.gpill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.78rem;font-weight:700}
.gpill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.gpill.on_site{color:var(--gg-d);background:var(--gg-soft)}.gpill.on_break{color:#b7791f;background:#fdf3d7}.gpill.off{color:#7a8a80;background:#eef1ee}
.gmeter{width:74px;height:7px;border-radius:4px;background:var(--g-line);overflow:hidden;display:inline-block;vertical-align:middle}
.gmeter i{display:block;height:100%;background:var(--gg);border-radius:4px}
.gcal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:12px}
.gcal .dw{font-size:.64rem;text-transform:uppercase;color:var(--g-ink3);font-weight:700;text-align:center}
.gcd{aspect-ratio:1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.82rem;font-weight:600;background:#f4f7f4;color:var(--g-ink2)}
.gcd.out{opacity:.3}.gcd.today{background:linear-gradient(150deg,var(--gg),var(--gg-d));color:#fff}
.gcd .pd{display:flex;gap:2px;height:5px}.gcd .pd i{width:4px;height:4px;border-radius:50%;background:var(--gg)}.gcd.today .pd i{background:#fff}
.galist,.gfeed{display:flex;flex-direction:column;margin-top:6px}
.galrt,.gfeed .it{display:flex;gap:11px;align-items:center;padding:11px 0;border-top:1px solid var(--g-line)}
.galrt:first-child,.gfeed .it:first-child{border-top:0}
.galrt .ic,.gfeed .tk{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;font-weight:700;font-size:.8rem}
.galrt .ic.offsite{background:#fde7e7;color:#d64545}.galrt .ic.absent{background:#eef1ee;color:#7a8a80}
.galrt .t{flex:1;min-width:0}.galrt .t b{font-weight:700}.galrt .t span{color:var(--g-ink3);font-size:.82rem}.galrt .tm,.gfeed .tm{color:var(--g-ink3);font-size:.8rem;font-weight:600}
.tkin{background:var(--gg-soft);color:var(--gg-d)}.tkout{background:#fde7e7;color:#d64545}.tkbrk{background:#fdf3d7;color:#b7791f}
.gfeed .tm{margin-left:auto}
.gmap{width:100%;border-radius:16px;overflow:hidden;height:220px;background:#eaf1ec}
/* admin management: topbar, forms, actions */
.gtopbar{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.gtopbar .th{flex:1}.gtopbar h1{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}.gtopbar .sub{color:#657a6f;font-size:.86rem;margin-top:2px}
.gfield{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.gfield label{font-size:.8rem;font-weight:700;color:#4a5a52}
.gfield input,.gfield select{height:46px;padding:0 13px;border-radius:12px;border:1px solid #dfe6df;background:#fff;font:inherit;color:#12211a}
.gfield input:focus,.gfield select:focus{outline:2px solid #2f6b45;border-color:transparent}
.grid2f{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gaction{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;font-size:.82rem;font-weight:700;text-decoration:none;border:1px solid #e2e8e2;background:#fff;color:#12211a;cursor:pointer}
.gaction:hover{border-color:#2f6b45}
.gaction.danger{color:#c0392b;border-color:#f2c9c9}.gaction.danger:hover{border-color:#c0392b}
.gnote{background:#e7f6ec;color:#1f7a49;border-radius:12px;padding:10px 14px;font-weight:700;margin-bottom:16px;font-size:.9rem}
.seg{display:inline-flex;background:#eef1ee;border-radius:12px;padding:4px}
.seg a{padding:7px 16px;border-radius:9px;font-weight:700;font-size:.88rem;color:#657a6f;text-decoration:none}
.seg a.on{background:#fff;color:#12211a;box-shadow:0 1px 3px rgba(16,40,30,.1)}
@media(max-width:1080px){.gshell{grid-template-columns:1fr}.gside{position:static;height:auto}.gstats{grid-template-columns:1fr 1fr}.grid-2,.grid-3{grid-template-columns:1fr}.grid2f{grid-template-columns:1fr}}

/* ============ WORKER PHONE — green language to match the admin dashboard ============ */
.phone, .tabbar{ --navy:#0f2a1e; --navy-hi:#17402a; --navy-bright:#2f6b45; --navy-soft:#e7f6ec; --navy-ink:#12211a; --panel:#0f2a1e; }
.phone{ background:#e6e8ea; font-family:'Plus Jakarta Sans','Helvetica Neue',Helvetica,sans-serif; }
.phone .appbar .greet .who, .phone h2, .hero .nm{ font-family:'Calibri','Segoe UI',system-ui,sans-serif; }
.phone .btn-primary{ background:linear-gradient(160deg,#2f6b45,#1f7a49); color:#04140b; }
.phone .appbar .pfp{ background:linear-gradient(150deg,#17402a,#0f2a1e); }
.phone .mhero{ background:radial-gradient(340px 200px at 108% -20%, rgba(140,240,180,.38), transparent 60%), linear-gradient(150deg,#17402a,#0f2a1e); box-shadow:0 22px 44px -22px rgba(15,42,30,.7); }
.phone .hero .clock{ color:#1f7a49; }
.phone .camera .ring{ border-color:rgba(47,191,107,.55); }
.phone .field input:focus{ outline-color:#2f6b45; }
.tabbar a.active{ background:#2f6b45; color:#04140b; box-shadow:0 8px 18px -6px rgba(47,191,107,.7); }

/* ============ FACE SCAN OVERLAY ============ */
.scan{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(8,20,14,.58);backdrop-filter:blur(2px);border-radius:inherit;z-index:6}
.scanframe{position:relative;width:150px;height:190px;border-radius:50%/45%;border:2px solid rgba(47,191,107,.9);box-shadow:0 0 0 4px rgba(47,191,107,.15),0 0 34px rgba(47,191,107,.4);overflow:hidden}
.scanline{position:absolute;left:0;right:0;top:6%;height:3px;background:linear-gradient(90deg,transparent,#3ee07f,transparent);box-shadow:0 0 12px #3ee07f;animation:scanmove 1.6s ease-in-out infinite}
@keyframes scanmove{0%{top:6%}50%{top:92%}100%{top:6%}}
.scaninstr{color:#eafff2;font-weight:700;font-size:1.05rem;text-align:center;font-family:var(--display,'Calibri',sans-serif);max-width:80%}
.scandots{display:flex;gap:8px}
.scandots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3)}
.scandots i.on{background:#3ee07f;box-shadow:0 0 10px #3ee07f}
.scandots i.doing{background:#fff;animation:scanpulse 1s ease-in-out infinite}
@keyframes scanpulse{50%{opacity:.35}}
.scan.matching .scanframe{border-color:#7dd3fc;box-shadow:0 0 0 4px rgba(125,211,252,.15),0 0 34px rgba(125,211,252,.4)}
.scan.matching .scanline{background:linear-gradient(90deg,transparent,#7dd3fc,transparent);box-shadow:0 0 12px #7dd3fc}

/* ============ FACE ID-STYLE SCANNER (fs-*) ============
   Always visible while the camera is live — the system is already looking,
   which is most of what makes Face ID feel effortless. */
.fscam{position:relative;width:100%;aspect-ratio:4/5;max-height:46vh;border-radius:26px;overflow:hidden;
  background:#0a1a12;border:1px solid rgba(255,255,255,.06);
  box-shadow:0 26px 50px -28px rgba(6,24,15,.85)}
/* Front camera is shown mirrored, the way every selfie view does it — an
   un-mirrored preview makes your own movements feel inverted. */
.fscam video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
.fscam .fsveil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 42%,transparent 38%,rgba(6,20,13,.55) 78%);pointer-events:none}

.fs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.fsovalwrap{position:relative;width:min(58%,190px);aspect-ratio:4/5}
.fsring{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);overflow:visible}
.fsring .trk{fill:none;stroke:rgba(255,255,255,.16);stroke-width:3}
.fsring .bar{fill:none;stroke:#3ee07f;stroke-width:3.5;stroke-linecap:round;
  transition:stroke .35s ease, opacity .3s ease;filter:drop-shadow(0 0 6px rgba(62,224,127,.55))}
.fsoval{position:absolute;inset:0;border-radius:50%/44%;border:1.5px solid rgba(255,255,255,.30);
  transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}
.fsglow{position:absolute;inset:-2px;border-radius:50%/44%;opacity:0;transition:opacity .35s ease;
  box-shadow:0 0 0 3px rgba(62,224,127,.12),0 0 44px rgba(62,224,127,.42)}
.fscheck{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.8);
  transition:opacity .3s ease,transform .45s cubic-bezier(.2,1.4,.4,1)}
.fscheck svg{width:46%;height:46%}
.fscheck path{stroke:#3ee07f;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:34;stroke-dashoffset:34;transition:stroke-dashoffset .34s ease .06s}

.fsstatus{min-height:22px;color:#eafff2;font-weight:600;font-size:.95rem;text-align:center;
  padding:0 22px;text-shadow:0 2px 10px rgba(0,0,0,.6);transition:opacity .25s ease}
.fsbadge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:7px;
  background:rgba(6,20,13,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.10);
  border-radius:999px;padding:6px 12px;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:#bfe8d0;text-transform:uppercase}
.fsbadge i{width:7px;height:7px;border-radius:50%;background:#8b9b91;display:block;transition:background .3s}

/* --- states --- */
.fs[data-s="searching"] .fsoval,.fs[data-s="warming"] .fsoval,.fs[data-s="cam_wait"] .fsoval{
  border-color:rgba(255,255,255,.22);animation:fsbreathe 2.6s ease-in-out infinite}
.fs[data-s="acquiring"] .fsoval{border-color:rgba(62,224,127,.65)}
.fs[data-s="nudge"] .fsoval,.fs[data-s="challenge"] .fsoval{border-color:rgba(245,193,94,.85)}
.fs[data-s="nudge"] .bar,.fs[data-s="challenge"] .bar{stroke:#f5c15e}
.fs[data-s="challenge"] .fsoval{animation:fspulse 1.1s ease-in-out infinite}
.fs[data-s="ready"] .fsoval{border-color:#3ee07f;transform:scale(1.02)}
.fs[data-s="ready"] .fsglow{opacity:1}
.fs[data-s="ready"] .fsbadge i,.fs[data-s="ok"] .fsbadge i{background:#3ee07f;box-shadow:0 0 9px #3ee07f}
.fs[data-s="sending"] .bar{stroke:#7dd3fc}
.fs[data-s="sending"] .fsoval{border-color:#7dd3fc}
.fs[data-s="sending"] .fsring{animation:fsspin 1s linear infinite}
.fs[data-s="ok"] .fsoval{border-color:#3ee07f}
.fs[data-s="ok"] .fsglow{opacity:1}
.fs[data-s="ok"] .fscheck{opacity:1;transform:scale(1)}
.fs[data-s="ok"] .fscheck path{stroke-dashoffset:0}
.fs[data-s="err"] .fsoval{border-color:#ef8b7d}
.fs[data-s="err"] .bar{stroke:#ef8b7d}
.fs[data-s="err"] .fsovalwrap{animation:fsshake .42s ease}
@keyframes fsbreathe{50%{opacity:.5}}
@keyframes fspulse{50%{box-shadow:0 0 0 6px rgba(245,193,94,.14)}}
@keyframes fsspin{to{transform:rotate(360deg)}}
@keyframes fsshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion: reduce){
  .fsoval,.fsring,.fsovalwrap{animation:none!important}
  .fsring .bar{transition:none}
}

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

/* ============ WORKER APP — TRUE PHONE FIT ============ */
/* Never allow sideways scroll (the usual cause of a "zoomed-out" phone view). */
html, body { overflow-x: hidden; max-width: 100%; }
.phone { width: 100%; }
/* iOS Safari mis-scales background-attachment:fixed — turn it off on touch devices. */
@media (hover: none) and (pointer: coarse) { body { background-attachment: scroll; } }

/* Real phones (≤480px): edge-to-edge, tightened spacing so nothing overflows. */
@media (max-width: 480px) {
  .phone {
    max-width: none;
    padding-left: 16px; padding-right: 16px;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }
  .mhero { padding: 20px; border-radius: 22px; margin-top: 14px; }
  .mhero .big { font-size: 1.5rem; }
  .mhero .sub { font-size: .86rem; }
  .mhero .chips { flex-wrap: wrap; }
  .appbar .greet .who { font-size: 1.05rem; }
  .appbar .greet .hi { font-size: .8rem; }
  .tabbar { width: calc(100% - 24px); }
  .camera { aspect-ratio: 4 / 3; }          /* shorter so buttons stay above the fold */
  .section-label { margin: 20px 2px 11px; }
  .person { padding: 11px 13px; }
}
/* Small phones (≤360px, e.g. SE / older Androids). */
@media (max-width: 360px) {
  .mhero .big { font-size: 1.32rem; }
  .day { width: 44px; }
  .btn-lg { font-size: .95rem; }
}