:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --ink: #111827;
    --muted: #6b7280;
    --line: #dbe3ef;
    --primary: #0f766e;
    --primary-dark: #115e59;
    --danger: #b91c1c;
    --warning: #b45309;
    --success: #047857;
    --sidebar: #0f172a;
    --sidebar-soft: #1e293b;
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    --radius: 18px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
}

a { color: inherit; text-decoration: none; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 280px;
    background: linear-gradient(180deg, var(--sidebar), #111827);
    color: #fff;
    padding: 22px;
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 20;
}
.brand-block { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.brand-mark { width: 52px; height: 52px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: #14b8a6; color:#042f2e; font-weight: 900; letter-spacing: -0.04em; }
.brand-name { font-weight: 800; letter-spacing: -0.03em; }
.brand-subtitle { font-size: 12px; color: #cbd5e1; margin-top: 3px; }
.nav { display: grid; gap: 8px; }
.nav a { color: #dbeafe; padding: 12px 14px; border-radius: 14px; font-weight: 650; font-size: 14px; }
.nav a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sidebar-footer { margin-top: auto; color: #cbd5e1; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 16px; }
.small { font-size: 12px; color: inherit; }
.main { margin-left: 280px; flex: 1; min-width: 0; }
.topbar {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 32px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar h1 { margin: 0; font-size: 26px; letter-spacing: -0.04em; }
.topbar p { margin: 5px 0 0; color: var(--muted); }
.userbox { text-align: right; display:grid; gap:2px; }
.user-name { font-weight: 800; }
.user-role { font-size: 12px; color: var(--muted); }
.logout { font-size: 12px; color: var(--primary); font-weight: 800; }
.menu-toggle { display:none; border:0; background: var(--sidebar); color:#fff; border-radius: 12px; padding: 10px 12px; font-size: 20px; }
.content { padding: 32px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
}
.card h2, .card h3 { margin-top: 0; letter-spacing: -0.035em; }
.card p { color: var(--muted); }
.metric { font-size: 34px; font-weight: 900; letter-spacing: -0.06em; margin-top: 8px; }
.metric-label { color: var(--muted); font-weight: 700; }
.btn, button.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius: 13px;
    padding: 11px 16px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    cursor:pointer;
    min-height: 42px;
}
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background:#e2e8f0; color:#0f172a; }
.btn.danger { background: var(--danger); }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius: var(--radius); background:#fff; }
table { width:100%; border-collapse: collapse; min-width: 780px; }
th, td { padding: 13px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align: top; }
th { background:#f8fafc; color:#475569; font-size:12px; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom:0; }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-row { display:grid; gap:7px; }
.form-row.full { grid-column: 1 / -1; }
label { font-weight: 800; font-size: 13px; color:#334155; }
input, select, textarea {
    width:100%;
    border:1px solid var(--line);
    background:#fff;
    border-radius: 13px;
    padding: 11px 12px;
    font: inherit;
    color: var(--ink);
}
textarea { min-height: 90px; resize: vertical; }
.help-text { color: var(--muted); font-size: 12px; margin-top: 4px; }
.flash { border-radius: 14px; padding: 13px 16px; margin-bottom: 18px; font-weight: 750; border: 1px solid transparent; }
.flash-success { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.flash-error { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.flash-info { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
.badge { display:inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 900; background:#e2e8f0; color:#334155; }
.badge-active, .badge-valid { background:#dcfce7; color:#166534; }
.badge-trial { background:#dbeafe; color:#1e40af; }
.badge-suspended, .badge-inactive, .badge-flagged { background:#fef3c7; color:#92400e; }
.badge-cancelled, .badge-terminated, .badge-voided { background:#fee2e2; color:#991b1b; }
.hero {
    background: radial-gradient(circle at top left, rgba(20,184,166,.16), transparent 34%), linear-gradient(135deg, #fff, #f8fafc);
    border:1px solid var(--line);
    border-radius: 26px;
    padding: 30px;
    box-shadow: var(--shadow);
}
.hero h2 { margin:0 0 10px; font-size: 36px; letter-spacing: -0.06em; }
.hero p { max-width: 760px; color: var(--muted); font-size: 16px; }
.policy-list { display:grid; gap:10px; padding:0; list-style:none; }
.policy-list li { padding: 13px 14px; background:#f8fafc; border:1px solid var(--line); border-radius: 14px; font-weight:750; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:30px; background: radial-gradient(circle at 10% 20%, rgba(20,184,166,.14), transparent 28%), #f4f7fb; }
.login-card { width:min(460px, 100%); }
.install-wrapper { max-width: 980px; margin: 30px auto; padding: 20px; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#f1f5f9; border:1px solid #dbe3ef; border-radius: 10px; padding:2px 6px; }
@media (max-width: 960px) {
    .sidebar { transform: translateX(-100%); transition: .2s ease; }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .menu-toggle { display:inline-flex; }
    .topbar { align-items:flex-start; }
    .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr; }
    .userbox { display:none; }
    .content { padding: 20px; }
}

/* v0.1.1 Public SaaS / Trial / Demo UI */
.public-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 12%, rgba(20,184,166,.16), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(15,118,110,.12), transparent 24%),
        #f4f7fb;
}
.public-header {
    min-height: 82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding: 18px 34px;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
}
.public-brand { display:flex; align-items:center; gap:14px; }
.public-brand small { display:block; color: var(--muted); margin-top:2px; }
.public-nav { display:flex; align-items:center; gap:14px; font-weight:800; color:#334155; }
.public-main { max-width: 1180px; margin: 0 auto; padding: 52px 24px; }
.public-main.narrow { max-width: 880px; }
.public-hero { display:grid; grid-template-columns: 1.35fr .65fr; gap:24px; align-items:stretch; }
.public-hero h1 { margin:0 0 16px; font-size: clamp(38px, 5vw, 68px); line-height:.95; letter-spacing:-.075em; }
.public-hero p { color: var(--muted); font-size:18px; max-width:720px; }
.eyebrow { display:inline-flex; border:1px solid #99f6e4; color:#115e59; background:#f0fdfa; border-radius:999px; padding:7px 12px; font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
.public-panel { background:#0f172a; color:#fff; border-radius:28px; padding:26px; box-shadow: var(--shadow); }
.public-panel h2 { margin-top:0; letter-spacing:-.04em; }
.public-panel .check-list { color:#dbeafe; }
.check-list { display:grid; gap:12px; padding:0; list-style:none; margin: 18px 0 0; }
.check-list li { padding-left:30px; position:relative; font-weight:750; }
.check-list li:before { content:'✓'; position:absolute; left:0; top:-2px; width:22px; height:22px; border-radius:50%; background:#14b8a6; color:#042f2e; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; }
.public-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; margin-top:28px; }
.policy-box { background:#f8fafc; border:1px solid var(--line); border-radius:16px; padding:14px; }
.checkbox-line { display:flex; gap:10px; align-items:flex-start; line-height:1.4; }
.checkbox-line input { width:auto; margin-top:2px; }
@media (max-width: 860px) {
    .public-header { align-items:flex-start; flex-direction:column; padding:18px 22px; }
    .public-nav { flex-wrap:wrap; }
    .public-hero, .public-grid { grid-template-columns:1fr; }
}

/* v0.2.0 Non-Biometric Clock Terminal */
.badge-working { background:#dcfce7; color:#166534; }
.badge-on_break { background:#fef3c7; color:#92400e; }
.badge-out { background:#e2e8f0; color:#334155; }
.terminal-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 8%, rgba(20,184,166,.18), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(15,23,42,.10), transparent 24%),
        #f4f7fb;
    padding: 24px;
}
.terminal-shell { max-width: 980px; margin: 0 auto; }
.terminal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:20px;
}
.terminal-brand { background:#fff; border:1px solid var(--line); border-radius:22px; padding:14px 16px; box-shadow: var(--shadow); }
.terminal-policy { background:#ecfeff; color:#155e75; border:1px solid #a5f3fc; border-radius:999px; padding:10px 14px; font-weight:900; font-size:12px; }
.terminal-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:30px;
    box-shadow: var(--shadow);
    padding:26px;
}
.terminal-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:18px; }
.terminal-state {
    margin: 22px 0;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px 16px;
}
.terminal-state span { color:var(--muted); font-weight:800; }
.terminal-state strong { color:#0f766e; font-size:20px; letter-spacing:.04em; }
.terminal-state small { color:var(--muted); }
.terminal-actions { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:14px; }
.terminal-btn {
    min-height: 96px;
    border:0;
    border-radius:22px;
    font-weight:1000;
    font-size:18px;
    letter-spacing:-.02em;
    cursor:pointer;
    box-shadow: 0 14px 30px rgba(15,23,42,.12);
}
.terminal-btn:disabled { opacity:.34; cursor:not-allowed; box-shadow:none; filter:grayscale(1); }
.terminal-btn.clock-in { background:#14b8a6; color:#042f2e; }
.terminal-btn.clock-out { background:#0f172a; color:#fff; }
.terminal-btn.break-start { background:#f59e0b; color:#451a03; }
.terminal-btn.break-end { background:#dbeafe; color:#1e3a8a; }
.terminal-success {
    background:#ecfdf5;
    color:#064e3b;
    border:1px solid #a7f3d0;
    border-radius:30px;
    box-shadow: var(--shadow);
    padding:28px;
    margin-bottom:20px;
    text-align:center;
}
.terminal-success-label { font-weight:1000; text-transform:uppercase; letter-spacing:.08em; font-size:13px; }
.terminal-success h1 { margin:8px 0 4px; font-size: clamp(36px, 5vw, 58px); letter-spacing:-.06em; }
.terminal-flash { font-size:16px; }
.terminal-footer { text-align:center; color:var(--muted); margin:24px 0; font-weight:800; display:flex; align-items:center; justify-content:center; gap:10px; }
.terminal-footer a { color:#0f766e; text-decoration:none; }
@media (max-width: 860px) {
    .terminal-header { align-items:flex-start; flex-direction:column; }
    .terminal-grid, .terminal-actions { grid-template-columns:1fr; }
    .terminal-btn { min-height:76px; }
    .terminal-policy { border-radius:18px; }
}

/* v0.2.1 Locked Clock Terminal */
.terminal-context {
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:14px;
    margin:18px 0;
}
.terminal-context > div {
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:14px 16px;
    box-shadow:var(--shadow);
}
.terminal-context span {
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:4px;
}
.terminal-context strong {
    display:block;
    color:var(--ink);
    font-size:18px;
    line-height:1.15;
}
.single-terminal-grid { grid-template-columns:1fr; }
.terminal-setup-required h1 { margin-top:0; font-size: clamp(32px, 5vw, 56px); letter-spacing:-.05em; }
.admin-unlock-box {
    margin-top:18px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:14px 16px;
    box-shadow:var(--shadow);
}
.admin-unlock-box summary {
    cursor:pointer;
    font-weight:1000;
    color:#0f766e;
}
.admin-unlock-box form { margin-top:14px; }
@media (max-width: 760px) {
    .terminal-context { grid-template-columns:1fr; }
}

/* v0.2.2 PIN-only employee terminal */
.pin-terminal-card { text-align:center; max-width: 720px; margin: 0 auto; }
.pin-terminal-card h1 { margin: 0 0 8px; font-size: clamp(38px, 7vw, 70px); letter-spacing: -0.07em; }
.pin-entry-form { display:grid; gap:18px; max-width: 520px; margin: 20px auto 0; }
.pin-display {
    text-align:center;
    font-size: clamp(38px, 8vw, 76px);
    font-weight: 1000;
    letter-spacing: .18em;
    padding: 18px 20px;
    border-radius: 26px;
    background:#f8fafc;
}
.number-pad { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; }
.number-key {
    min-height: 82px;
    border:0;
    border-radius:24px;
    background:#e2e8f0;
    color:#0f172a;
    font-size:32px;
    font-weight:1000;
    cursor:pointer;
    box-shadow: 0 12px 24px rgba(15,23,42,.10);
}
.number-key:hover { transform: translateY(-1px); }
.key-muted { background:#f1f5f9; color:#475569; }
.key-submit { background:#0f766e; color:#fff; font-size:24px; }
.employee-profile-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:22px; }
.employee-profile-head h1 { margin:4px 0 2px; font-size: clamp(34px, 5vw, 58px); letter-spacing:-.06em; }
.state-pill { display:inline-flex; align-items:center; justify-content:center; min-width:150px; border-radius:999px; padding:12px 16px; font-weight:1000; box-shadow: 0 8px 22px rgba(15,23,42,.08); }
.state-out { background:#e2e8f0; color:#334155; }
.state-in { background:#dcfce7; color:#166534; }
.state-break { background:#fef3c7; color:#92400e; }
.employee-actions form { display:block; }
.employee-actions .terminal-btn { width:100%; }
.profile-tools { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin:22px 0; padding:14px; background:#f8fafc; border:1px solid var(--line); border-radius:18px; }
.clock-profile-grid { display:grid; grid-template-columns: 1.25fr .75fr; gap:18px; margin-top:18px; }
.compact-table table { min-width: 620px; }
.punch-list { display:grid; gap:10px; max-height: 420px; overflow:auto; padding-right:4px; }
.punch-item { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); background:#fff; border-radius:14px; padding:12px 13px; }
.punch-item span { color:var(--muted); font-size:13px; font-weight:750; }
@media (max-width: 860px) {
    .employee-profile-head { flex-direction:column; }
    .clock-profile-grid { grid-template-columns:1fr; }
    .number-key { min-height: 70px; }
}

/* v0.3.1 Admin manual/void + Toast-style dark tablet terminal */
.badge-manual { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
.badge-pin { background:#ecfeff; color:#155e75; border:1px solid #a5f3fc; }
.badge-voided { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.badge-valid { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.row-voided { opacity:.68; background:#fff1f2; }
.row-voided td { color:#7f1d1d; }
.actions-cell { display:flex; flex-wrap:wrap; gap:8px; }
.btn.danger, .danger { background:#b91c1c !important; color:#fff !important; }

.terminal-page {
    --toast-bg:#111315;
    --toast-panel:#1b1f22;
    --toast-panel-2:#24292d;
    --toast-line:#353b40;
    --toast-text:#f5f5f5;
    --toast-muted:#a8b0b7;
    --toast-accent:#ff6a00;
    --toast-success:#24c26a;
    --toast-danger:#ff4d4d;
    --toast-warning:#f5b544;
    background: radial-gradient(circle at top, #23272b 0, var(--toast-bg) 48%, #08090a 100%);
    color: var(--toast-text);
    min-height:100vh;
}
.terminal-page .terminal-shell { max-width:1120px; padding:22px; }
.terminal-page .terminal-header { color:var(--toast-text); }
.terminal-page .terminal-brand,
.terminal-page .terminal-policy,
.terminal-page .terminal-card,
.terminal-page .terminal-context > div,
.terminal-page .admin-unlock-box,
.terminal-page .profile-tools,
.terminal-page .punch-item {
    background: var(--toast-panel);
    border-color: var(--toast-line);
    color: var(--toast-text);
    box-shadow: 0 18px 48px rgba(0,0,0,.35);
}
.terminal-page .terminal-policy { background:#2b1b10; color:#ffbd7a; border-color:#704214; }
.terminal-page .terminal-context span,
.terminal-page .terminal-context strong,
.terminal-page .small,
.terminal-page .terminal-footer,
.terminal-page .punch-item span,
.terminal-page .employee-profile-head p { color:var(--toast-muted); }
.terminal-page .terminal-card h1,
.terminal-page .terminal-card h2,
.terminal-page .terminal-card h3,
.terminal-page .terminal-brand strong { color:var(--toast-text); }
.terminal-page .pin-display {
    background:#0d0f11;
    border:1px solid var(--toast-line);
    color:var(--toast-text);
    outline: none;
}
.terminal-page .number-key {
    background:var(--toast-panel-2);
    color:var(--toast-text);
    box-shadow: 0 10px 24px rgba(0,0,0,.30);
}
.terminal-page .number-key:active { transform: scale(.98); }
.terminal-page .key-muted { background:#191d20; color:var(--toast-muted); }
.terminal-page .key-submit { background:var(--toast-accent); color:#1d0b00; }
.terminal-page .terminal-actions { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.terminal-page .terminal-btn { min-height:112px; font-size:22px; border-radius:28px; }
.terminal-page .terminal-btn.clock-in { background:var(--toast-success); color:#03150b; }
.terminal-page .terminal-btn.clock-out { background:var(--toast-danger); color:#fff; }
.terminal-page .terminal-btn.break-start { background:var(--toast-warning); color:#211500; }
.terminal-page .terminal-btn.break-end { background:var(--toast-accent); color:#1d0b00; }
.terminal-page .state-out { background:#272d33; color:#d7dee5; }
.terminal-page .state-in { background:#10351f; color:#8ff0b8; }
.terminal-page .state-break { background:#3a2a0e; color:#ffd786; }
.terminal-page table { background:var(--toast-panel); color:var(--toast-text); }
.terminal-page th { background:#14171a; color:var(--toast-muted); }
.terminal-page td { border-color:var(--toast-line); }
.terminal-page .btn.secondary { background:#2a3035; color:var(--toast-text); border-color:var(--toast-line); }
.terminal-page .terminal-success { background:#0f2f1b; color:#b8f7ce; border-color:#1f7a43; }
@media (max-width: 760px) {
    .terminal-page .terminal-shell { padding:14px; }
    .terminal-page .number-key { min-height:78px; }
    .terminal-page .terminal-btn { min-height:96px; }
}

/* v0.3.2 terminal clock-out completion overlay */
.terminal-success-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: min(560px, calc(100vw - 32px));
    text-align: center;
    padding: 34px;
    border-radius: 32px;
    box-shadow: 0 40px 120px rgba(0,0,0,.55);
}
.terminal-success-modal::before {
    content: '';
    position: fixed;
    inset: -100vh;
    background: rgba(0,0,0,.58);
    z-index: -1;
}
.shift-complete-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0 14px;
}
.shift-complete-summary > div {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    padding: 18px;
}
.shift-complete-summary span {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--toast-muted, #a8b0b7);
    font-weight: 900;
}
.shift-complete-summary strong {
    display: block;
    margin-top: 6px;
    font-size: 34px;
    color: var(--toast-text, #f5f5f5);
}

/* v0.3.4 role menu + dashboard organization */
.sidebar {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}
.brand-block,
.sidebar-footer {
    flex: 0 0 auto;
}
.nav {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.28) transparent;
}
.nav::-webkit-scrollbar { width: 7px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 999px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav-link,
.nav a.nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    color: #dbeafe;
    padding: 11px 13px;
    border-radius: 13px;
    font-weight: 750;
    font-size: 14px;
    margin: 3px 0;
}
.nav-link:hover,
.nav-link.active {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.nav-link.active {
    box-shadow: inset 3px 0 0 #14b8a6;
}
.nav-group {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    margin: 9px 0;
    background: rgba(255,255,255,.035);
    overflow: hidden;
}
.nav-group summary {
    cursor: pointer;
    list-style: none;
    padding: 11px 13px;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .075em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group summary::after {
    content: '›';
    font-size: 18px;
    transform: rotate(0deg);
    transition: transform .16s ease;
    opacity: .75;
}
.nav-group[open] summary::after { transform: rotate(90deg); }
.nav-group-links {
    padding: 0 7px 8px;
}
.sidebar-footer {
    margin-top: 0;
}
.dashboard-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
}
.dashboard-hero .actions {
    justify-content: flex-end;
}
.dashboard-metrics .card {
    min-height: 128px;
}
.role-card .actions.stacked-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
}
.role-card .actions.stacked-actions .btn {
    width: 100%;
}
.badge-manual_admin { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
.badge-system_auto { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
@media (max-width: 960px) {
    .sidebar {
        height: 100vh;
        max-height: 100vh;
    }
    .dashboard-hero {
        display: grid;
        align-items: start;
    }
    .dashboard-hero .actions {
        justify-content: flex-start;
    }
}

/* v0.3.5 Production Terminal UX Lock + mobile overflow hardening */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; }
body { overflow-x: hidden; }
img, svg, canvas, video { max-width: 100%; }
.card, .panel, .table-wrap, .content, .main, .app-shell, .grid, .dashboard-hero, .clock-profile-grid {
    min-width: 0;
    max-width: 100%;
}
.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
table {
    max-width: 100%;
    border-collapse: collapse;
}
th, td {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}
.hours-summary,
.hours-summary-card,
.hours-summary-grid,
.hours-summary-table,
.employee-hours-summary,
.employee-hours-card,
.employee-hours-grid,
.clock-profile-grid,
.clock-profile-grid > *,
.compact-table,
.compact-table table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.hours-summary-grid,
.employee-hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 14px;
}
.hours-summary-table,
.employee-hours-summary table {
    table-layout: fixed;
}
@media (max-width: 700px) {
    .hours-summary-grid,
    .employee-hours-grid,
    .clock-profile-grid {
        grid-template-columns: 1fr !important;
    }
    .compact-table table,
    .hours-summary-table,
    .employee-hours-summary table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed;
        font-size: 12px;
    }
    .compact-table th,
    .compact-table td,
    .hours-summary-table th,
    .hours-summary-table td,
    .employee-hours-summary th,
    .employee-hours-summary td {
        padding: 9px 7px;
        overflow-wrap: anywhere;
    }
}

html:has(body.terminal-kiosk-page) {
    height: 100%;
    overflow: hidden;
    background: #050607;
}
body.terminal-page.terminal-kiosk-page {
    --kiosk-bg: #050607;
    --kiosk-card: #121619;
    --kiosk-card-2: #191f23;
    --kiosk-line: rgba(255,255,255,.12);
    --kiosk-text: #f6f8fa;
    --kiosk-muted: #9aa4ad;
    --kiosk-danger: #ff4d4d;
    --kiosk-success: #24c26a;
    --kiosk-warning: #f5a400;
    --kiosk-accent: #ff6a00;
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: radial-gradient(circle at top, #1d2328 0, #0b0d0f 45%, var(--kiosk-bg) 100%);
    color: var(--kiosk-text);
}
.terminal-kiosk-shell {
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(12px, 2.5svh, 24px);
    overflow: hidden;
}
.terminal-kiosk-card {
    width: min(480px, 100%);
    max-width: 100%;
    max-height: calc(100svh - clamp(24px, 5svh, 48px));
    overflow: hidden;
    border: 1px solid var(--kiosk-line);
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)), var(--kiosk-card);
    color: var(--kiosk-text);
    border-radius: clamp(22px, 4vw, 34px);
    padding: clamp(18px, 3.4svh, 30px);
    box-shadow: 0 34px 90px rgba(0,0,0,.54);
    text-align: center;
    display: grid;
    gap: clamp(12px, 2svh, 18px);
}
.terminal-mini-brand {
    color: var(--kiosk-muted);
    font-weight: 900;
    font-size: clamp(12px, 2.2vw, 14px);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.terminal-kiosk-card h1 {
    margin: 0;
    color: var(--kiosk-text) !important;
    font-size: clamp(26px, 6vw, 42px);
    line-height: 1;
    letter-spacing: -.05em;
}
.terminal-kiosk-card p {
    margin: 0;
    color: var(--kiosk-muted);
    font-weight: 750;
}
.terminal-message {
    width: 100%;
    border-radius: 16px;
    padding: 11px 13px;
    font-weight: 850;
    font-size: clamp(13px, 2.8vw, 15px);
    line-height: 1.25;
}
.terminal-message-error {
    background: rgba(255,77,77,.12);
    color: #ffd0d0;
    border: 1px solid rgba(255,77,77,.32);
}
.pin-mask-display {
    width: 100%;
    min-height: clamp(54px, 10svh, 72px);
    display: grid;
    place-items: center;
    border-radius: 22px;
    border: 1px solid var(--kiosk-line);
    background: rgba(0,0,0,.42);
    color: var(--kiosk-text);
    font-size: clamp(30px, 7vw, 46px);
    letter-spacing: .32em;
    font-weight: 1000;
    padding-left: .32em;
    user-select: none;
}
.kiosk-number-pad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.8svh, 12px);
    width: 100%;
    min-width: 0;
}
.kiosk-number-key {
    appearance: none;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: clamp(16px, 3vw, 24px);
    min-height: clamp(48px, 10.5svh, 72px);
    background: var(--kiosk-card-2);
    color: var(--kiosk-text);
    box-shadow: 0 14px 32px rgba(0,0,0,.32);
    font-size: clamp(21px, 5vw, 32px);
    font-weight: 1000;
    cursor: pointer;
    touch-action: manipulation;
}
.kiosk-number-key:active,
.kiosk-action-btn:active,
.kiosk-cancel-btn:active { transform: scale(.985); }
.kiosk-key-clear,
.kiosk-key-back {
    background: #232a2f;
    color: var(--kiosk-muted);
    font-size: clamp(14px, 3vw, 18px);
    letter-spacing: .01em;
}
.terminal-action-card {
    width: min(560px, 100%);
}
.terminal-action-card h1 {
    font-size: clamp(36px, 8vw, 56px);
}
.terminal-current-state {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 9px 15px;
    background: rgba(255,255,255,.08);
    color: var(--kiosk-muted);
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.kiosk-action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(10px, 2svh, 14px);
    width: 100%;
    min-width: 0;
}
.kiosk-action-form { margin: 0; }
.kiosk-action-btn {
    width: 100%;
    min-height: clamp(74px, 14svh, 112px);
    border: 0;
    border-radius: clamp(20px, 4vw, 30px);
    font-size: clamp(22px, 5vw, 34px);
    font-weight: 1000;
    letter-spacing: -.015em;
    cursor: pointer;
    touch-action: manipulation;
    color: #06110a;
    background: var(--kiosk-success);
    box-shadow: 0 18px 46px rgba(0,0,0,.38);
}
.kiosk-action-btn.clock-out { background: var(--kiosk-danger); color: #fff; }
.kiosk-action-btn.break-start { background: var(--kiosk-warning); color: #211500; }
.kiosk-action-btn.break-end { background: var(--kiosk-accent); color: #1d0b00; }
.kiosk-cancel-form { margin: 0; }
.kiosk-cancel-btn {
    width: 100%;
    min-height: clamp(42px, 7svh, 56px);
    border-radius: 18px;
    border: 1px solid var(--kiosk-line);
    background: rgba(255,255,255,.06);
    color: var(--kiosk-muted);
    font-weight: 950;
    cursor: pointer;
    touch-action: manipulation;
}
.terminal-confirm-card {
    width: min(520px, 100%);
}
.terminal-checkmark {
    justify-self: center;
    width: clamp(60px, 14vw, 84px);
    height: clamp(60px, 14vw, 84px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(36,194,106,.15);
    color: #8ff0b8;
    border: 1px solid rgba(36,194,106,.35);
    font-size: clamp(34px, 8vw, 52px);
    font-weight: 1000;
}
.terminal-confirm-time {
    font-size: clamp(28px, 7vw, 48px);
    color: var(--kiosk-text) !important;
    font-weight: 1000;
    letter-spacing: -.04em;
}
.terminal-shift-result {
    width: 100%;
    border-radius: 22px;
    padding: clamp(14px, 3svh, 22px);
    background: rgba(255,255,255,.08);
    border: 1px solid var(--kiosk-line);
}
.terminal-shift-result span {
    display: block;
    color: var(--kiosk-muted);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 12px;
    font-weight: 950;
}
.terminal-shift-result strong {
    display: block;
    margin-top: 5px;
    color: var(--kiosk-text);
    font-size: clamp(36px, 9vw, 60px);
    line-height: 1;
}
.terminal-auto-return {
    font-size: 13px;
}
@media (max-width: 420px), (max-height: 680px) {
    .terminal-kiosk-shell { padding: 10px; }
    .terminal-kiosk-card { gap: 10px; padding: 16px; border-radius: 22px; }
    .terminal-kiosk-card h1 { font-size: clamp(24px, 6vw, 34px); }
    .pin-mask-display { min-height: 50px; font-size: 28px; border-radius: 18px; }
    .kiosk-number-pad { gap: 8px; }
    .kiosk-number-key { min-height: 50px; border-radius: 16px; }
    .terminal-action-card h1 { font-size: clamp(32px, 8vw, 44px); }
    .kiosk-action-btn { min-height: 72px; }
}
@media (max-height: 560px) {
    .terminal-mini-brand { display: none; }
    .terminal-kiosk-card { padding: 12px; gap: 8px; }
    .kiosk-number-key { min-height: 44px; }
    .pin-mask-display { min-height: 46px; }
}

/* v0.3.6 Persistent Kiosk Lease */
.return-clock-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: var(--primary, #1a5b5b);
    color: #fff;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
}
.terminal-pairing-label {
    margin: -8px 0 14px;
    color: rgba(255,255,255,.62);
    font-size: .82rem;
    letter-spacing: .02em;
}
.paired-terminal-card { margin-bottom: 20px; }
.paired-terminal-card form { margin: 0; }