select{font:inherit;border:1px solid #cfd9de;border-radius:10px;padding:13px 14px;background:#fff;color:var(--ink);outline:none}
select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(24,183,201,.13)}
.warning-box{background:#fff6db;border:1px solid #f0d58a;border-radius:12px;padding:14px 16px;color:#704a00;margin-bottom:18px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.locked{color:#087553;font-weight:750}
.backup-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:720px){.settings-grid{grid-template-columns:1fr}}
.logo-frame{display:grid;place-items:center;overflow:hidden;background:#fff;border:1px solid rgba(126,211,224,.55);box-shadow:0 5px 16px rgba(0,0,0,.13)}
.logo-frame img{display:block;width:100%;height:100%;object-fit:contain}
.logo-frame-small{width:48px;height:38px;border-radius:10px;flex:0 0 auto}
.logo-frame-setup{width:170px;height:123px;border-radius:18px;margin-bottom:24px}
.sidebar-brand .logo-frame-small{width:46px;height:35px}
@media(max-width:560px){.brand{gap:8px}.logo-frame-small{width:42px;height:33px}}
.idle-show{position:fixed;inset:0;z-index:1000;overflow:hidden;background:radial-gradient(circle at 50% 45%,#143f68 0,#0a223a 48%,#061725 100%);color:#fff;cursor:pointer;isolation:isolate}
.idle-show::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 46%,rgba(90,220,235,.08) 50%,transparent 54%);animation:beamSweep 12s ease-in-out infinite;z-index:-1}
.idle-glow{position:absolute;border-radius:50%;filter:blur(12px);opacity:.35;z-index:-1;animation:floatGlow 11s ease-in-out infinite alternate}
.idle-glow-one{width:42vw;height:42vw;left:-16vw;top:-20vw;background:#0db7cb}.idle-glow-two{width:34vw;height:34vw;right:-12vw;bottom:-18vw;background:#205de0;animation-delay:-5s}
.idle-top,.idle-footer{position:absolute;left:5vw;right:5vw;display:flex;align-items:center;justify-content:space-between;color:#a8c3d5;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase}.idle-top{top:4.5vh}.idle-footer{bottom:4.5vh}.idle-brand{color:#72dce7;font-weight:900;letter-spacing:.24em}
.idle-slides{height:100%;display:grid;place-items:center}.idle-slide{position:absolute;text-align:center;opacity:0;transform:translateY(24px) scale(.985);transition:opacity 1.2s ease,transform 1.2s ease;pointer-events:none;padding:8vw}.idle-slide.active{opacity:1;transform:none}.idle-slide h2{font-size:clamp(4rem,9vw,8.5rem);line-height:.95;letter-spacing:-.055em;margin:18px 0;color:#fff;font-weight:650}.idle-slide>p{font-size:clamp(1rem,1.6vw,1.35rem);color:#b9d0df}.idle-slide .idle-kicker{font-size:.78rem;color:#58d2df;letter-spacing:.25em;font-weight:800}.idle-logo{width:min(42vw,390px);aspect-ratio:903/654;border-radius:30px;overflow:hidden;background:#fff;margin:0 auto 26px;box-shadow:0 24px 90px rgba(0,0,0,.35),0 0 70px rgba(49,192,219,.18)}.idle-logo img{width:100%;height:100%;object-fit:contain;display:block}.idle-dots{display:flex;gap:9px}.idle-dots i{width:7px;height:7px;border-radius:50%;background:#49677d;transition:.5s}.idle-dots i.active{width:28px;border-radius:9px;background:#5fdae5}
@keyframes beamSweep{0%,15%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}@keyframes floatGlow{to{transform:translate(8vw,6vh) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.idle-show::before,.idle-glow{animation:none}.idle-slide{transition:none}}

/* Coastal Beacon theme */
:root{--navy:#071b37;--navy-2:#0c315d;--cyan:#2aa6df;--cyan-soft:#e7f6fd;--paper:#eef6fb;--ink:#142b43;--muted:#60758a;--line:#d4e4ef;--shadow:0 22px 65px rgba(4,34,67,.16)}
html,body{max-width:100%;overflow-x:hidden}body{background:radial-gradient(circle at 18% 12%,rgba(62,181,232,.15),transparent 34%),linear-gradient(145deg,#f9fcfe 0%,#e9f4fa 55%,#f4f9fc 100%)}
.topbar{background:linear-gradient(110deg,#06182f,#0a3560);border-bottom-color:#37b5e9;box-shadow:0 8px 30px rgba(4,28,54,.18)}
.clock-view{position:relative}
.clock-view::before{content:"";position:absolute;inset:7% 45% 18% 8%;border-radius:50%;background:radial-gradient(circle,rgba(56,177,225,.15),transparent 68%);filter:blur(18px);pointer-events:none}
.clock-panel,.on-shift-card{position:relative;z-index:1;min-width:0}.clock-panel{width:100%}
.clock-brand-logo{display:block;width:min(340px,calc(100vw - 40px));max-width:100%;height:auto;aspect-ratio:1280/853;object-fit:contain;margin:-34px auto 12px;filter:drop-shadow(0 12px 20px rgba(8,53,92,.12))}
.clock-panel h1{color:#092e57;text-shadow:0 3px 18px rgba(42,166,223,.12)}
.key{border-color:#cfe2ee;background:rgba(255,255,255,.86);box-shadow:0 8px 22px rgba(12,54,88,.08);backdrop-filter:blur(12px)}
.key:hover{background:#e5f6fd;border-color:#32aee2;box-shadow:0 10px 26px rgba(42,166,223,.18)}
.on-shift-card{background:linear-gradient(155deg,#09294b,#06182f);border:1px solid rgba(111,202,239,.22);box-shadow:0 25px 70px rgba(4,31,61,.25)}
.setup-card,.card,.stat{background:rgba(255,255,255,.91);backdrop-filter:blur(18px);border-color:rgba(165,202,224,.65)}
.logo-frame-setup{width:260px;height:180px;border:0;background:transparent;box-shadow:none;margin:0 auto 18px}
.idle-show{background:radial-gradient(circle at 50% 40%,#164f7d 0,#082b51 48%,#04162b 100%)}
.idle-logo{width:min(52vw,520px);aspect-ratio:1280/853;background:rgba(255,255,255,.96);border:1px solid rgba(124,212,246,.38);box-shadow:0 28px 100px rgba(0,0,0,.38),0 0 80px rgba(48,175,226,.22)}
.primary{background:linear-gradient(135deg,#42b9e7,#1a92d0);color:#041c37;box-shadow:0 8px 20px rgba(35,157,211,.22)}
.sidebar{background:linear-gradient(180deg,#071c38,#082c52)}
.brand>span:last-child{font-size:.88rem;white-space:nowrap}.sidebar-brand>span:last-child{font-size:.72rem;line-height:1.3;letter-spacing:.11em}
@media(max-width:900px){.clock-brand-logo{margin:0 auto 8px;height:145px}.clock-view::before{inset:2% 5% 48%}}
@media(max-width:560px){.topbar{gap:10px}.brand>span:last-child{display:none}.manager-link{padding-inline:4px;white-space:nowrap}.clock-brand-logo{width:min(290px,calc(100vw - 40px));height:auto;margin:0 auto 8px}.clock-view{width:100%;padding:22px 16px 30px}.clock-panel h1{font-size:clamp(3.5rem,18vw,4.2rem)}.clock-caption{margin-bottom:20px}}
.nav-count{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:7px;padding:0 6px;border-radius:999px;background:var(--cyan);color:var(--navy);font-size:.75rem;font-weight:900}.approval-actions{display:flex;gap:8px;flex-wrap:wrap}.approve-btn{color:var(--green)}.status-pill.denied{background:#fce8ea;color:var(--red)}
.keypad,.key,.clear-key{touch-action:manipulation;-webkit-user-select:none;user-select:none}.key{-webkit-tap-highlight-color:transparent}
.pin-actions{width:350px;max-width:100%;margin:14px auto 0;display:grid;grid-template-columns:1fr 2fr;gap:12px;align-items:stretch}.pin-actions .clear-key{margin:0;border:1px solid var(--line);border-radius:11px;background:#fff}.pin-submit:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}@media(max-width:560px){.pin-actions{width:290px}}
.punch-confirmation-dialog{width:min(92vw,460px);padding:0;border:0;border-radius:26px;background:transparent;box-shadow:0 28px 90px rgba(3,25,48,.35)}
.punch-confirmation-dialog::backdrop{background:rgba(3,18,34,.64);backdrop-filter:blur(8px)}
.punch-confirmation-card{margin:0;padding:36px 34px 30px;text-align:center;border:1px solid rgba(75,187,229,.4);border-radius:26px;background:linear-gradient(155deg,#fff 0%,#eef9fe 100%)}
.punch-confirmation-icon{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 20px;border-radius:50%;background:linear-gradient(135deg,#25c58b,#159b70);color:#fff;font-size:2.8rem;font-weight:900;box-shadow:0 12px 28px rgba(21,155,112,.28)}
.punch-confirmation-card h2{margin:5px 0 8px;color:#082d55;font-size:clamp(1.8rem,6vw,2.45rem)}
.punch-confirmation-action{margin:0;color:#087553;font-size:1.18rem;font-weight:850;text-transform:capitalize}
.punch-confirmation-action.clocked-out{color:#1568a0}
.punch-confirmation-time{display:block;margin:12px 0 26px;color:#0a2745;font-size:clamp(2.4rem,10vw,3.7rem);font-weight:800;letter-spacing:-.04em}
.punch-confirmation-card .primary{width:100%;font-size:1.05rem}
@media(max-width:560px){.punch-confirmation-card{padding:30px 24px 24px}.punch-confirmation-icon{width:68px;height:68px}}
.kiosk-lock-view{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:34px 18px}.kiosk-lock-view.hidden{display:none}.kiosk-lock-card{width:min(100%,520px);padding:30px 38px 36px;border:1px solid rgba(165,202,224,.75);border-radius:26px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);text-align:center}.kiosk-lock-card>img{display:block;width:210px;height:140px;object-fit:contain;margin:0 auto -8px}.kiosk-lock-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:18px;background:linear-gradient(145deg,#0a315b,#071b37);font-size:1.55rem;box-shadow:0 10px 24px rgba(5,37,70,.2)}.kiosk-lock-card h1{margin:6px 0 10px;color:#092e57;font-size:clamp(1.8rem,6vw,2.45rem)}.kiosk-lock-card .note{margin:0 auto 24px;max-width:410px;line-height:1.55}.kiosk-lock-card form{text-align:left}.kiosk-lock-card .primary{width:100%;margin-top:5px}@media(max-width:560px){.kiosk-lock-card{padding:24px 22px 28px}.kiosk-lock-card>img{width:180px;height:120px}}
@media(min-width:901px){
  .clock-view{height:calc(100dvh - 76px);min-height:0;overflow:hidden;grid-template-columns:minmax(380px,560px) 300px;gap:44px;padding:14px 40px}
  .clock-brand-logo{width:auto;height:clamp(92px,17vh,145px);aspect-ratio:auto;margin:0 auto 2px}
  .clock-panel .eyebrow{margin-bottom:4px}
  .clock-panel h1{font-size:clamp(3.6rem,10vh,5.4rem)}
  .clock-caption{margin:5px 0 10px}
  .pin-display{gap:15px;margin-bottom:10px}
  .pin-display i{width:12px;height:12px}
  .keypad{width:300px;gap:7px}
  .key{height:clamp(44px,7.5vh,58px);aspect-ratio:auto;border-radius:12px;font-size:1.3rem}
  .pin-actions{width:300px;margin-top:8px;gap:8px}
  .pin-actions .primary{padding:10px 14px}
  .status-message{min-height:24px;margin-top:5px}
  .on-shift-card{min-height:clamp(280px,55vh,360px);padding:21px}
}
@media(min-width:901px) and (max-height:650px){
  .clock-view{padding-block:8px}
  .clock-brand-logo{height:82px}
  .clock-panel h1{font-size:3.35rem}
  .clock-caption{font-size:.88rem}
  .key{height:40px}
  .on-shift-card{min-height:270px}
}
.topbar-actions{display:flex;align-items:center;gap:12px}.fullscreen-link{border:1px solid rgba(146,214,241,.5);border-radius:9px;background:rgba(255,255,255,.06);color:#dff5ff;padding:9px 13px;font-weight:750;cursor:pointer}.fullscreen-link:hover{background:rgba(55,181,233,.18);color:#fff}
@media(min-width:901px){
  .clock-view{grid-template-columns:minmax(520px,1fr) minmax(300px,360px);justify-content:stretch;gap:clamp(36px,5vw,80px);padding-inline:clamp(44px,7vw,120px)}
  .clock-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
  .clock-brand-logo{height:clamp(110px,19vh,170px)}
  .clock-panel h1{font-size:clamp(4.5rem,11vh,6.5rem)}
  .keypad,.pin-actions{width:clamp(320px,28vw,390px)}
  .key{height:clamp(48px,7.7vh,65px);font-size:1.45rem}
  .on-shift-card{width:100%;min-height:clamp(330px,68vh,560px);align-self:center}
  :fullscreen .topbar{display:none}
  :fullscreen .clock-view{height:100dvh;min-height:100dvh;padding-block:2vh}
}
@media(max-width:560px){.topbar-actions{gap:4px}.fullscreen-link{padding:8px;font-size:.8rem}.manager-link{font-size:.8rem}}
@media(min-width:901px) and (max-height:650px){.clock-brand-logo{height:82px}.clock-panel h1{font-size:3.35rem}.key{height:40px}.on-shift-card{min-height:270px}}
.filter-bar{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.filter-bar label{min-width:150px;flex:1}.filter-bar button{margin-bottom:1px}.compact-stats{grid-template-columns:repeat(3,1fr)}.status-pill.late{background:#fff0cf;color:#8a5600}.integration-card{display:flex;flex-direction:column;align-items:flex-start}.integration-head{display:flex;gap:14px;align-items:center;margin-bottom:22px}.integration-head h3{margin:0 0 4px}.integration-head p{margin:0}.gmail-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#ea4335,#fbbc04 48%,#34a853);color:#fff;font-size:1.4rem;font-weight:900}.backup-summary{display:flex;align-items:baseline;gap:9px;margin:18px 0}.backup-summary strong{font-size:2.2rem;color:var(--navy)}.backup-summary span{color:var(--muted)}.integration-card button,#createBackup+#backupData{margin-top:9px}@media(max-width:720px){.compact-stats{grid-template-columns:1fr}.filter-bar{align-items:stretch}.filter-bar label{min-width:100%}}

.manager-view,.dashboard,#dashboardContent,.card,.stat,.table-wrap{min-width:0;max-width:100%}
@media(max-width:900px){
  .manager-view{display:block;width:100%;max-width:100vw;overflow-x:hidden}
  .sidebar{width:100%;max-width:100vw;padding:8px 10px;overflow:hidden}
  .sidebar nav{width:100%;gap:4px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sidebar nav::-webkit-scrollbar{display:none}
  .nav-item{flex:0 0 auto;min-height:48px;padding:11px 14px;white-space:nowrap}
  .return-clock{position:static;margin:0 0 0 4px;background:#123a60}
  .dashboard{width:100%;max-width:100vw;padding:28px 16px calc(34px + env(safe-area-inset-bottom));overflow-x:hidden}
  .dashboard-head{margin-bottom:24px}
  #dashboardContent{width:100%;overflow:visible}
  .card,.stat{width:100%;overflow:hidden}
  .table-wrap{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  table{min-width:620px}
  .empty{width:100%;padding:42px 12px;white-space:normal}
}
@media(max-width:560px){
  .dashboard{padding-inline:14px}
  .dashboard-head h2{font-size:clamp(1.75rem,9vw,2.15rem)}
  .stat,.card{padding:18px}
  .page-actions{align-items:stretch;flex-direction:column}
  .page-actions>button,.page-actions>div,.page-actions>div>button{width:100%}
  .filter-bar{display:grid;grid-template-columns:1fr;width:100%}
  .filter-bar label,.filter-bar input,.filter-bar select,.filter-bar button,.date-controls label,.date-controls input,.date-controls select{width:100%;min-width:0;max-width:100%}
  .date-controls{display:grid;grid-template-columns:1fr;width:100%;align-items:stretch}
  .date-controls button{width:100%}
  .settings-grid{width:100%}
  .toast{left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
}