/* Reel Neon: static, code-rendered surfaces. No images, animation loops, or external fonts. */
:root {
  color-scheme:dark;
  --pink:#ff60bc;
  --cyan:#5be8d4;
  --gold:#e8c77c;
  --violet:#ac8cff;
  --glow-pink:#ff45b71c;
  --glow-cyan:#24cfce12;
  --forest:var(--pink);
  --forest-hover:#ff85ce;
  --lime:var(--cyan);
  --ink:#f1f0f7;
  --muted:#9a9caf;
  --line:#282936;
  --canvas:#090a12;
  --white:#12131d;
  --red:#ff8a98;
  --shadow:0 16px 50px #0006;
  font-family:"Segoe UI",Inter,Arial,sans-serif;
  background:var(--canvas);
  color:var(--ink);
}
body{background:var(--canvas)}
.pin-input{letter-spacing:5px;font-variant-numeric:tabular-nums}
.card-details{margin-top:22px;overflow:hidden}
.card-details>summary{cursor:pointer;list-style:none;margin:0;gap:15px;min-height:80px}
.card-details>summary::-webkit-details-marker{display:none}
.card-details>summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px}
.card-summary-title{display:flex;flex-direction:column;gap:6px}
.card-summary-title strong{font-size:16px;color:var(--ink)}
.card-summary-title small{font-size:11px;color:var(--muted)}
.card-summary-action{display:flex;align-items:center;gap:12px;color:var(--pink);font-size:12px;white-space:nowrap;margin-left:auto}
.details-chevron{width:18px;height:18px}
.card-details[open] .details-chevron{transform:rotate(90deg)}
.card-details:not([open])>summary{border-bottom:0}
.summary-panel{margin-top:0!important}
.review-count{background:#3a2338;color:#ffbedf;padding:2px 7px;border-radius:5px;font-variant-numeric:tabular-nums}
.employee-grid-heading,.employee-summary,.employee-grid-total{display:grid;grid-template-columns:minmax(190px,1.8fr) 65px minmax(100px,1fr) minmax(95px,1fr);gap:16px;align-items:center;padding:18px 24px}
.employee-grid-heading{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);background:#191721;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.employee-group+ .employee-group{border-top:1px solid var(--line)}
.employee-summary{cursor:pointer;list-style:none;font-size:13px;min-height:68px;padding-top:12px;padding-bottom:12px}
.employee-summary::-webkit-details-marker{display:none}
.employee-summary:hover{background:#ffffff03}
.employee-summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
.employee-identity{display:flex;align-items:center;gap:11px;min-width:0}
.employee-identity>span{min-width:0}
.employee-identity strong{font-size:13px;font-weight:600;white-space:normal}
.employee-identity .avatar{flex-shrink:0}
.employee-expand{display:flex;gap:5px;align-items:center;margin-top:6px;color:var(--pink);font-size:10px}
.employee-expand svg{width:12px;height:12px}
.employee-group[open]>.employee-summary .details-chevron{transform:rotate(90deg)}
.employee-paid{text-align:right;color:var(--cyan);font-weight:650}
.employee-grid-heading .employee-paid{color:var(--muted);font-weight:400}
.employee-grid-total{border-top:1px solid #594066;background:#261d32;color:#f4e0ff;font-size:13px}
.employee-grid-total .employee-paid{color:#f4e0ff}
.missing-count{display:block;font-size:10px;color:#b6a1b7;margin-top:4px}
.employee-card-detail{background:#10101a;border-top:1px solid #38303f;max-height:460px;overflow:auto;overscroll-behavior:contain}
.employee-card-detail .table-wrap table th:first-child,.employee-card-detail .table-wrap table td:first-child{display:none}
.employee-card-detail .mobile-card .employee-name,.employee-card-detail .mobile-card .avatar{display:none}
.employee-card-detail .mobile-cards{padding:10px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 5% 15%,var(--glow-pink),transparent 47%),radial-gradient(ellipse at 100% 85%,var(--glow-cyan),transparent 47%)}
::selection{background:#ff60bc40;color:#fff}
button:focus-visible,a:focus-visible{outline-color:var(--cyan)}
input:focus,select:focus,textarea:focus{outline-color:var(--pink)}
button:disabled{opacity:.45;box-shadow:none!important}
.btn{background:var(--pink);border-color:color-mix(in srgb,var(--pink),white 12%);color:#1c0c1a;font-weight:700;box-shadow:0 3px 18px var(--glow-pink);letter-spacing:.05px}
.btn:hover{background:color-mix(in srgb,var(--pink),white 15%);box-shadow:0 5px 25px var(--glow-pink)}
.btn.secondary{background:#191a27;border-color:#363343;color:#e6e4f0;box-shadow:none}
.btn.secondary:hover{background:#232132;border-color:color-mix(in srgb,var(--pink),transparent 45%)}
.btn.ghost{background:transparent;color:#c7c4d6;box-shadow:none}
.btn.ghost:hover{background:#242032;color:var(--pink)}
.btn.danger{color:#ff98a9;background:#341c27;border-color:#693247;box-shadow:none}
.btn.lime{background:var(--cyan);border-color:var(--cyan);color:#071e1b}
.icon-btn{background:#191a26;border-color:#30313f;color:#a6a6bc}
.icon-btn:hover{background:#262334;color:var(--pink)}
.text-link{color:var(--pink)}
.badge{color:var(--violet);background:#242036}
.badge.working{background:#13302c;color:var(--cyan)}
.badge.break{background:#342b1a;color:#ebc779}
.badge.off{background:#252632;color:#a9aabd}
.badge.alert{background:#3a202b;color:#ffa2b2}
.badge.manager{background:#29223f;color:#c0a7ff}
.badge.owner{background:#34273a;color:#f294d2}
.avatar.sage{background:#19332f;color:#86d6bc}
.avatar.blue{background:#1b2b40;color:#8bb8f4}
.avatar.peach{background:#392a29;color:#e6b499}
.avatar.lavender{background:#302341;color:#c3a0f0}
.avatar.gold{background:#3a301c;color:#e5c478}
.avatar.rose{background:#3c2435;color:#e8a0c3}
.avatar-group .avatar{border-color:#13141f}
.panel,.team-card,.stat-card{background:linear-gradient(135deg,#151620,#11121b);border-color:var(--line);box-shadow:0 6px 25px #00000016}
.panel-heading h2{color:#e9e7f2}
.error-box{background:#321c28;border-color:#643143;color:#ffafbe}
.notice{background:#222b25;border-color:#3a5042;color:#b8d2bb}
.empty svg{color:#78728d}
.toast{background:#251e32;border:1px solid #70506e;color:#f7e6f3;box-shadow:0 12px 50px #0009}
.loading-mark{border-top-color:var(--pink)}

/* A quiet casino-floor workspace. Color marks actions, not every piece of data. */
.sidebar{background:linear-gradient(180deg,#11111d,#0e0f18 65%,#171121);border-right:1px solid #2c2636}
.sidebar::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan));box-shadow:0 0 20px var(--glow-pink)}
.brand-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent}
.brand img{width:58px;height:44px;object-fit:contain;background:transparent;padding:0;border-radius:0;filter:none;mix-blend-mode:normal;flex-shrink:0}
.sidebar .brand{gap:9px;padding-left:0;padding-right:0}
.sidebar .brand img{width:48px;height:36px}
.sidebar .brand-name{font-size:14px}
.brand-name{font-size:15px;font-weight:750;letter-spacing:-.2px;color:#eeedf6}
.brand-description{color:#8e88a4;font-size:9px;letter-spacing:2.1px}
.nav-label{color:#76718c;letter-spacing:1.9px;font-size:9px}
.nav-link{color:#a3a0b8;border:1px solid transparent}
.nav-link:hover{background:#221b30;color:#eee7f7}
.nav-link.active{background:linear-gradient(90deg,#39203a,#241c30);border-color:#57304c;color:var(--pink);box-shadow:inset 3px 0 var(--pink)}
.sidebar-clock{background:#191624;border-color:#4c3551;color:#e1cee4}
.sidebar-clock:hover{background:#2a1e35;border-color:#865775}
.sidebar-demo{color:#9b8fa9}
.profile{border-color:#30283b}
.profile .avatar{background:#392139;color:#f6a3d2}
.profile-role{color:#91879f}
.profile button{color:#a99cba}
.workspace{background:radial-gradient(ellipse at 85% 0,var(--glow-pink),transparent 44%),var(--canvas)}
.workspace-top{background:#0d0e18e8;border-bottom-color:#282633}
.breadcrumb b{color:#dfd9ed}
.timezone-label,.top-date{color:#9a92aa}
.workspace-top .sync-status{margin-left:4px}
.page-heading h1{font-size:32px;letter-spacing:-1.15px;font-weight:700}
.page-heading .eyebrow{color:var(--pink);font-size:10px}
.page-heading p{color:#9693a8}
.period-picker{background:#15151f;border-color:#32303e}
.period-picker .period{color:#d8d3e7}
.current-week{color:var(--cyan)}
.stat-card{position:relative;overflow:hidden}
.stat-top{color:#a4a0b7}
.stat-value{color:#efedf7;font-weight:600}
.stat-value small{color:#8d88a2}
.stat-foot{color:#928ba2;font-size:10px}
.stat-icon{background:#272036;color:var(--violet)}
.stat-card:nth-child(3) .stat-icon{background:#302a1d;color:var(--gold)}
.stat-card:nth-child(4) .stat-icon{background:#2d1f2c;color:#f28db9}
.stat-card.featured{background:linear-gradient(125deg,#173331,#142124);border-color:#2e5953;box-shadow:inset 0 1px #5be8d415,0 8px 30px #0002}
.stat-card.featured::after{content:"";position:absolute;right:-40px;bottom:-45px;width:130px;height:130px;border:1px solid #60e0c919;border-radius:50%;box-shadow:0 0 0 20px #60e0c905,0 0 0 40px #60e0c903;pointer-events:none}
.stat-card.featured .stat-top{color:#a3c8c1}
.stat-card.featured .stat-icon{color:var(--cyan);background:#22443f}
.stat-card.featured .stat-value{color:#effff9}
.stat-card.featured .stat-value small{color:#a5bfb9}
.stat-card.featured .stat-foot{color:#95b8af}
.hours-chart .grid{stroke:#30303d}
.hours-chart text{fill:#9590a7}
.hours-chart .bar{fill:var(--violet)}
.hours-chart .bar.today{fill:var(--cyan)}
.chart-legend{color:#9890aa}
.legend-square{background:var(--violet)}
.on-clock-row{border-color:#272531}
.employee-secondary,.cell-secondary{color:#8e899e}
.on-clock-footer{color:var(--pink);background:#15121f}
thead{background:#17151f}
th{color:#9e96ad;border-color:#302c3a}
td{border-color:#272531}
tbody tr:hover{background:#1a1724}
.hours-cell{color:#e0d6ef}
.table-footer{color:#8f879f;background:#12111b}
.search svg{color:#9a8eab}
.team-card-head .icon-btn{color:#9788a7;background:transparent}
.team-card-meta{border-color:#302a39}
.team-card-bottom span{color:#a69aae}
.team-card-bottom .badge.working{color:var(--cyan)}
.activity-icon{background:#2b2039;color:var(--violet)}
.activity-reason{color:#afa3bd}
.activity-meta,.activity-item time{color:#94889f}
.fixed-zone{background:#191a27;border-color:#343042}
.fixed-zone svg{color:var(--cyan)}
.fixed-zone p{color:#9c94aa}
.settings-section>p,.settings-aside p{color:#a39aaf}
.settings-save{background:#16121e}
.mobile-card-data small{color:#9e92ae}
.mobile-card-data strong{color:#e0d6ef}

/* Employee clock: neon cabinet edges, slot-reel details, a real server clock. */
.clock-layout{position:relative;isolation:isolate;background:radial-gradient(ellipse at 8% 30%,var(--glow-pink),transparent 42%),radial-gradient(ellipse at 100% 85%,var(--glow-cyan),transparent 45%),var(--canvas);overflow:hidden}
.clock-layout::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.2;pointer-events:none;background-image:linear-gradient(#75618016 1px,transparent 1px),linear-gradient(90deg,#75618016 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(transparent,#000 20%,#000 75%,transparent)}
.clock-layout::after{content:"";position:absolute;left:-15%;right:-15%;bottom:-230px;height:370px;border:1px solid #8e61991c;border-radius:50%;box-shadow:0 -25px 0 -24px #8e61991c,0 -65px 0 -64px #8e61991c;pointer-events:none;z-index:-1}
.clock-header{padding-top:30px;padding-bottom:22px}
.clock-header .brand img{width:58px;height:44px}
.clock-header .brand-name{font-size:17px;color:#f2eaf7;font-weight:750}
.clock-header .brand-description{font-size:9px;color:#a195af}
.clock-header>.btn{font-weight:500;color:#c5b8d2;font-size:12px}
.clock-main{max-width:1140px;grid-template-columns:minmax(0,1fr) 420px;gap:100px;padding-top:25px;padding-bottom:55px}
.clock-hero{position:relative;padding-bottom:0}
.reel-emblem{display:flex;margin-bottom:23px;align-items:center;justify-content:center;width:170px;padding:0;background:transparent}
.reel-emblem img{width:100%;height:auto;display:block;background:transparent;padding:0;mix-blend-mode:normal}
.clock-hero .eyebrow{color:var(--gold);font-size:10px;letter-spacing:2.8px;margin-bottom:14px;font-weight:600}
.clock-hero h1{font-size:54px;font-weight:800;line-height:1.07;letter-spacing:-2.1px;color:#f1eaf5;text-transform:none;max-width:490px}
.clock-hero h1 span{color:var(--pink);text-shadow:0 0 26px var(--glow-pink)}
.clock-hero>p{color:#ada1b8;font-size:13px;line-height:1.9;max-width:355px;margin-top:18px}
.time-display{border:1px solid #325553;border-radius:15px;background:linear-gradient(115deg,#101f22d9,#10111add);padding:17px 22px 18px;margin-top:31px;max-width:390px;box-shadow:inset 0 1px #83e2d412,0 0 30px var(--glow-cyan)}
.time-display-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:2.1px;color:#87aaa6;font-weight:600;text-transform:uppercase}
.time-display-label span:last-child{color:var(--cyan)}
.live-clock{font-family:"Bahnschrift","Cascadia Code",Consolas,monospace;font-size:55px;letter-spacing:-1.7px;color:#d4fff6;font-weight:400;margin-top:8px;line-height:1.15;text-shadow:0 0 18px var(--glow-cyan)}
.live-clock .clock-seconds{font-size:.55em;color:var(--cyan);letter-spacing:0;margin-left:4px}
.live-clock small{font-family:"Segoe UI",sans-serif;font-size:12px;font-weight:600;color:#8baaa5;margin-left:12px;letter-spacing:1px}
.live-date{font-size:11px;color:#a0b6af;margin-top:8px}
.clock-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:11px;border-top:1px solid #24403c}
.clock-zone{font-size:9px;color:#8ea8a3;margin-top:0;letter-spacing:.1px;text-transform:none}
.clock-zone svg{width:13px;height:13px}
.sync-status{display:inline-flex;gap:6px;align-items:center;border:0;background:transparent;padding:0;color:var(--cyan);font-size:9px;font-weight:500;letter-spacing:.2px;white-space:nowrap}
.sync-status .dot{width:5px;height:5px;box-shadow:0 0 8px currentColor}
.sync-status[data-status="stale"],.sync-status[data-status="connecting"]{color:var(--gold)}
.sync-status[data-status="offline"]{color:#ffa3b1}
.clock-card{position:relative;background:linear-gradient(135deg,#1a1523 0,#14131e 35%,#10131c 100%);border:1px solid #594056;border-radius:22px;padding:35px 34px 28px;box-shadow:0 0 0 5px #ffffff02,0 22px 65px #0006,0 0 65px var(--glow-pink);min-height:0}
.clock-card::before{content:"";position:absolute;top:-1px;left:25px;right:25px;height:2px;border-radius:5px;background:linear-gradient(90deg,var(--pink),var(--gold),var(--cyan));box-shadow:0 0 15px var(--glow-pink)}
.clock-card::after{content:"";position:absolute;top:9px;left:28px;right:28px;height:3px;background:radial-gradient(circle,var(--gold) 1px,transparent 1.5px) 0 0/18px 3px;opacity:.45;pointer-events:none}
.clock-card h2{font-size:24px;font-weight:650;color:#f4eaf7;letter-spacing:-.5px}
.clock-card .intro{color:#aaa0b7;font-size:12px;margin-top:5px}
.pin-input{background:linear-gradient(#080c12,#0d111a);border:1px solid #3c364c;color:var(--cyan);box-shadow:inset 0 2px 12px #0009;height:64px;caret-color:var(--cyan);font-family:Consolas,monospace;border-radius:11px}
.pin-input::placeholder{color:#5e536d}
.pin-input:focus{border-color:var(--pink);outline-color:#ff60bc50}
.keypad{gap:10px;margin:22px 0}
.keypad button{background:linear-gradient(155deg,#252131,#1b1c29);border-color:#3b344a;color:#ebe1f1;font-size:23px;height:51px;font-weight:500;box-shadow:inset 0 1px #ffffff04,0 3px #080912;border-radius:9px}
.keypad button:hover{background:#33253d;border-color:var(--pink);color:#fff}
.keypad button:active{box-shadow:inset 0 2px 8px #0005;transform:translateY(1px)}
.keypad button.clear{color:#ac9db9;font-size:9px;letter-spacing:1.5px}
.keypad button svg{color:#ad9dba}
.clock-card .btn.full{min-height:50px;font-size:13px;border-radius:10px}
.clock-demo{color:#9c8fa8;font-size:10px;margin-top:18px}
.clock-demo button{color:var(--pink);font-size:10px}
.clock-footer{color:#8e819c;font-size:10px;padding-bottom:25px}
.local-pill{color:#9c8caa;font-size:9px;letter-spacing:1.3px}
.local-pill .dot{color:var(--gold)}
.edition-label{margin-left:18px;padding-left:18px;border-left:1px solid #3d2e45;color:var(--pink);font-size:9px;letter-spacing:1.2px;text-transform:uppercase}
.shift-status{background:#171e23;border-color:#30413d}
.shift-status strong{color:#e2e7e4}
.shift-status p{color:#8baba0}
.clock-stat small{color:#a092ad}
.clock-stat strong{color:#f4ecf9}
.clock-card .back-link button{color:#a698b2}
.session-note{color:#8d819a}
.success-mark{background:#173830;color:var(--cyan);box-shadow:0 0 30px var(--glow-cyan);border:1px solid #2e6a5b}
.success-time{color:var(--cyan)}
.success-view>p{color:#b2a4bb}
.employee-hours-row p{color:#a091ab}
.history-range{line-height:1.6;margin:0 0 14px}
.pay-weeks{display:grid;gap:9px;margin-bottom:20px;max-height:440px;overflow:auto;overscroll-behavior:contain}
.pay-week{border:1px solid #3c344a;border-radius:11px;background:#14131f}
.pay-week>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;padding:14px}
.pay-week>summary::-webkit-details-marker{display:none}
.pay-week>summary strong{font-size:12px;color:#ece3f2}
.pay-week>summary small{display:block;margin-top:5px;color:var(--muted);font-size:10px}
.pay-week-total{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--cyan);white-space:nowrap}
.pay-week[open] .details-chevron{transform:rotate(90deg)}
.pay-week-cards{padding:0 13px 10px;border-top:1px solid #302a3b}
.pay-week-cards .employee-hours-row{gap:12px}
.pay-week-cards .employee-hours-row>span{font-size:12px;white-space:nowrap}
.pay-week-empty{padding:14px 0}
.pay-week-foot{font-size:9px;color:var(--muted);line-height:1.6;padding:9px 0 0}

/* All remaining forms use the same dark surface, including native date pickers. */
input,select,textarea{background:#10111b;border-color:#3a3448;color:#ece4f3;accent-color:var(--pink)}
input::placeholder,textarea::placeholder{color:#80738f}
input:disabled,select:disabled{color:#a598b0;background:#191522}
label.field{color:#c1b4ce}
.field .help,.check-field small{color:#9788a2}
.check-field{color:#c3b6ce}
.check-field input{accent-color:var(--pink)}
dialog{background:#16131f;border-color:#514058;box-shadow:0 30px 100px #000b}
dialog::backdrop{background:#040409bd;backdrop-filter:blur(5px)}
.modal-head{background:#191421;border-color:#3b2b41}
.modal-head h2{color:#f1e6f7}
.modal-head p{color:#a395ae}
.form-actions,.break-editor{border-color:#352a3e}
.dst-options{color:#ae9abd}
.archive-detail{background:#21192b;border:1px solid #3a2945}
.permission-note{background:#241b2e;border:1px solid #42304e;color:#c0a9cc}
.device-code{background:#20172b;border-color:#7e4b80;color:var(--pink);text-shadow:0 0 17px var(--glow-pink)}
.pair-intro{color:#b2a2bc}
.theme-preview-field{margin-top:20px}
.theme-preview-field .help{font-weight:400}
.sync-help{font-size:10px;color:#a294ae;margin:11px 0 0;text-align:center}
.connection-warning{color:#ffd093!important}
.import-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(110deg,#251b30,#151a25);border:1px solid #45304e;border-radius:13px;padding:18px 20px;margin-bottom:22px}.import-banner strong{font-size:14px;color:#ead8f3}.import-banner p{font-size:11px;color:#b7a6c3;margin-top:4px}.import-banner .small{font-size:10px;color:#9c8da9}.import-banner .btn{font-size:11px;min-height:35px}.summary-panel{margin-top:23px}.summary-table tfoot td{font-weight:700;background:#261d32;border-top:1px solid #594066;color:#f4e0ff;padding-top:17px;padding-bottom:17px}.summary-table th:last-child,.summary-table td:last-child{text-align:right}.summary-table th:last-child,.summary-table td:last-child{padding-right:25px}.summary-table{min-width:450px}.summary-table .hours-cell{color:var(--cyan)}

/* Date-based accents only: the layout and interactions remain identical. */
:root[data-holiday="newyear"]{--pink:#e9c67e;--cyan:#bda2ff;--violet:#bd92f4;--glow-pink:#e9c67e1b;--glow-cyan:#a97eff15}
:root[data-holiday="valentine"]{--pink:#ff7db6;--cyan:#ffb7ce;--violet:#d78cde;--glow-pink:#ff397d24;--glow-cyan:#ff7aab0f}
:root[data-holiday="independence"]{--pink:#ff7f91;--cyan:#80c3ff;--violet:#a5abff;--glow-pink:#ff3a561b;--glow-cyan:#3899ff20}
:root[data-holiday="halloween"]{--pink:#c4ed7b;--cyan:#d7a3ff;--gold:#f3b45f;--violet:#b58ae7;--glow-pink:#b2e66c13;--glow-cyan:#ad5aff20}
:root[data-holiday="thanksgiving"]{--pink:#efb772;--cyan:#d5d08c;--violet:#d59b76;--glow-pink:#e39b521b;--glow-cyan:#ad7b4c12}
:root[data-holiday="christmas"]{--pink:#ff8199;--cyan:#75e6b1;--gold:#ebd09a;--violet:#e5a1bc;--glow-pink:#e63f6621;--glow-cyan:#53d39416}
:root:not([data-holiday="none"])[data-holiday] .clock-layout::before{background-image:radial-gradient(circle at 15px 15px,#bfaac152 1px,transparent 1.5px);background-size:53px 53px;opacity:.28}
@media(min-width:1600px){.clock-main{max-width:1230px;gap:120px}.clock-hero h1{font-size:62px}.live-clock{font-size:59px}}
@media(max-width:1180px){.clock-main{grid-template-columns:minmax(0,1fr) 390px;gap:50px}.clock-hero h1{font-size:47px}.live-clock{font-size:48px}.time-display{padding:17px 18px}.reel-emblem span{width:41px;height:51px;font-size:35px}}
@media(max-width:930px){.clock-main{grid-template-columns:minmax(0,1fr) 370px;gap:30px}.clock-hero h1{font-size:39px}.clock-card{padding:32px 27px 25px}.reel-emblem::after{display:none}.live-clock{font-size:42px}.clock-status-row{gap:8px}.clock-zone{font-size:8px}.sync-status{font-size:8px}.sidebar.open~.sidebar-scrim{background:#030308b8}}
@media(max-width:680px){
  .employee-grid-heading,.employee-summary,.employee-grid-total{grid-template-columns:minmax(0,1fr) 35px 74px;gap:8px;padding:15px 12px}
  .employee-worked{display:none}
  .employee-grid-heading{font-size:8px}
  .employee-identity{gap:8px}
  .employee-identity strong{font-size:12px}
  .employee-identity .avatar{width:27px;height:27px;font-size:10px}
  .employee-summary,.employee-grid-total{font-size:12px}
  .employee-expand{font-size:9px}
  .page-heading{flex-direction:column;align-items:stretch;gap:16px}
  .summary-table{min-width:0;width:100%}
  .summary-table th:nth-child(3),.summary-table td:nth-child(3){display:none}
  .summary-table th,.summary-table td{padding:13px 11px}
  .summary-table th:last-child,.summary-table td:last-child{padding-right:13px}
  .summary-table td:first-child{white-space:normal}
  .summary-table .person-cell{gap:8px}
  .summary-table .person-cell>div{min-width:0}
  .summary-table .person-cell strong{white-space:normal}
  .summary-table .avatar{width:27px;height:27px;font-size:10px;flex-shrink:0}
  .summary-table .cell-secondary{font-size:9px;white-space:normal}
  .card-summary-title strong{font-size:14px}
  .card-summary-action{gap:7px;font-size:10px}
  .page-heading h1{font-size:27px}
  .clock-header{padding:20px 20px 12px}
  .clock-header .brand-name{font-size:14px}
  .clock-header .brand-description{font-size:8px}
  .clock-header .brand img{width:54px;height:40px}
  .clock-header>.btn{font-size:10px;min-height:35px;padding:8px 10px}
  .clock-main{display:flex;gap:22px;padding:8px 20px 28px;max-width:440px}
  .clock-hero{width:100%}
  .clock-hero h1{display:block;font-size:24px;line-height:1.2;letter-spacing:-.7px;margin-bottom:12px}
  .clock-hero h1 br{display:none}
  .clock-hero h1 span::before{content:" "}
  .reel-emblem{display:none}
  .time-display{margin:0;max-width:none;padding:12px 18px 13px;text-align:center;border-color:#32514e;border-radius:13px}
  .time-display-label{font-size:7px;letter-spacing:1.7px}
  .live-clock{font-size:39px;margin-top:4px;letter-spacing:-1px}
  .live-clock small{font-size:10px;margin-left:9px}
  .live-date{font-size:10px;margin-top:5px}
  .clock-status-row{margin-top:10px;padding-top:9px}
  .clock-zone{font-size:8px}
  .sync-status{font-size:8px}
  .clock-card{padding:28px 25px 23px;border-radius:18px}
  .clock-card h2{font-size:23px}
  .clock-card .intro{font-size:11px}
  .pin-input{height:54px;margin-top:21px}
  .keypad{gap:9px;margin:18px 0}
  .keypad button{height:46px;font-size:21px}
  .clock-card .btn.full{min-height:47px;font-size:13px}
  .clock-demo{font-size:9px;margin-top:17px}
  .clock-footer{padding:0 20px 19px;font-size:9px}
  .local-pill{font-size:8px;letter-spacing:.8px}
  .edition-label{font-size:8px;margin-left:10px;padding-left:10px;letter-spacing:.6px}
  .workspace-top .sync-status{font-size:8px}
  .top-date{display:none}
}
@media(max-width:360px){.clock-header .brand-name{font-size:12px}.clock-header>.btn svg{display:none}.clock-card{padding-left:21px;padding-right:21px}.live-clock{font-size:35px}.clock-main{padding-left:15px;padding-right:15px}.clock-header{padding-left:15px;padding-right:15px}}

/* Approved blue clock panel, shared by desktop and mobile. */
.capacity-meter{display:block;width:100%;height:8px;accent-color:#56caf8;margin:8px 0 4px}
.usage-meter{margin:17px 0}.usage-meter>div{display:flex;justify-content:space-between;gap:10px;font-size:11px}.usage-meter small{font-size:10px;color:var(--muted)}
.purge-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.purge-dates input{min-width:0;width:100%}.purge-preview{border-top:1px solid #433248;padding-top:20px;margin-top:22px}.purge-preview h4{font-size:16px;margin-bottom:10px}.purge-preview form{margin-top:18px}.settings-aside select{max-width:100%}
.blue-clock{background:linear-gradient(110deg,#12395d 0%,#266b96 56%,#72d6ff 100%);border-color:#4db9ef;box-shadow:inset 0 1px #b2eaff40,0 0 30px #31bfff22}
.clock-readout{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:12px;align-items:center;margin-top:8px}
.clock-readout-copy{min-width:0}
.clock-logo{display:block;width:108px;height:auto;background:transparent;object-fit:contain}
.blue-clock .live-clock{font-size:52px;line-height:1.1;margin-top:0;white-space:nowrap;color:#e8f8ff}
.blue-clock .live-clock .clock-seconds{font-size:.52em;color:#9ae6ff;margin-left:2px}
.blue-clock .live-clock small{color:#bbd9f2;margin-left:8px;font-size:10px}
.blue-clock .live-date{color:#d3e7f8;white-space:nowrap;font-size:10px;margin-top:9px}
.blue-clock .time-display-label{color:#add8ef}
.blue-clock .time-display-label span:last-child{color:#10385b;font-weight:750}
.blue-clock .clock-status-row{border-top-color:#b8e5ff40;margin-top:11px}
.blue-clock .clock-zone{color:#c1e0f7}
.blue-clock .sync-status{color:#10365b;font-weight:700}
.blue-clock .sync-status[data-status="stale"]{color:#65350b}
@media(max-width:930px){.clock-readout{grid-template-columns:minmax(0,1fr) 95px;gap:9px}.clock-logo{width:95px}.blue-clock .live-clock{font-size:45px}}
@media(max-width:680px){
  .blue-clock{text-align:left;padding:13px 17px}
  .clock-readout{grid-template-columns:minmax(0,1fr) 88px;gap:10px;margin-top:7px}
  .clock-logo{width:88px}
  .blue-clock .live-clock{font-size:39px;letter-spacing:-1.5px}
  .blue-clock .live-date{font-size:9px;margin-top:7px}
  .blue-clock .clock-status-row{margin-top:9px;padding-top:8px}
  .blue-clock .live-clock small{font-size:9px;margin-left:6px}
}
@media(max-width:360px){.clock-readout{grid-template-columns:minmax(0,1fr) 76px;gap:6px}.clock-logo{width:76px}.blue-clock .live-clock{font-size:34px}.blue-clock .live-date{font-size:8px}}

/* Team PINs stay masked until an authorized person asks to view one. */
.team-pin-access{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);margin-top:16px;padding-top:10px}
.masked-team-pin{color:var(--muted);font-size:11px;white-space:nowrap}.masked-team-pin b{letter-spacing:3px;margin-left:7px;font-size:15px}
.team-pin-access .btn{font-size:11px;min-height:34px;padding:7px 10px}.team-pin-access .btn svg{width:15px;height:15px}
.pin-reveal-box{text-align:center;padding:22px 15px;border:1px solid var(--line);border-radius:14px;background:#0b101b}
.revealed-pin{font-size:clamp(25px,7vw,38px);font-weight:650;letter-spacing:.13em;color:var(--cyan,#55e5ee);margin:18px 0;overflow-wrap:anywhere}
.pin-reveal-box p{max-width:390px;margin:0 auto;line-height:1.7}
.activity-guards{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}.activity-guards h4{font-size:12px}.usage-guard-row{display:flex;justify-content:space-between;gap:16px;font-size:11px;margin:9px 0;color:var(--muted)}.usage-guard-row strong{color:var(--ink);font-variant-numeric:tabular-nums}.usage-guard-help summary{cursor:pointer;font-size:11px;color:var(--pink);margin-top:12px}
.activity-guards>summary{cursor:pointer;font-size:11px;color:var(--muted)}.usage-meter:first-of-type{margin-top:15px}