/* StaffHotel · iOS-inspired presentation. Content stays opaque for legibility. */
@media screen {
:root { --bg:#f5f2ee; --card:#fffdfa; --ink:#262326; --muted:#756e70; --line:#e5dfdc; --glass:rgba(255,253,250,.74); --glass-edge:rgba(255,255,255,.95); --glass-shadow:0 8px 30px #38242c12,0 1px 3px #38242c0c; --blue:#661f39; --forest:#244e40; --navy-soft:#eee7e8; --teal-soft:#f3edde; }
html[data-theme="dark"] { --bg:#171619; --card:#242225; --ink:#f5f0ed; --muted:#b7aeb2; --line:#3c373c; --glass:rgba(47,43,48,.83); --glass-edge:rgba(255,255,255,.17); --glass-shadow:0 10px 32px #0005,0 1px 2px #0005; --navy-soft:#44313b; --teal-soft:#403a2d; }
body { background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif; letter-spacing:-.015em; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 94% 8%,#d6b66b14,transparent 42%),radial-gradient(ellipse at 3% 88%,#722d4510,transparent 40%); }
.app { display:block; min-height:100dvh; }
.main { max-width:1480px; margin:auto; }
.content { padding:12px 36px calc(136px + env(safe-area-inset-bottom)); }
.top,html[data-theme="dark"] .top { position:relative; top:auto; height:122px; padding:36px 36px 20px; border:0; background:transparent; box-shadow:none; gap:20px; }
.top h2,.top h2.section-title { text-align:left; font-size:34px; font-weight:730; letter-spacing:-.045em; line-height:1.15; color:var(--ink); flex:1; overflow:visible; }
.top #weekTitle { font-size:21px; text-align:center; letter-spacing:-.025em; }
.top h2 small { font-size:12px; margin-top:6px; letter-spacing:0; }
.top>.actions { flex:0 0 auto; flex-wrap:nowrap; gap:9px; }
.top .actions button { display:inline-flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; }
.side,html[data-theme="dark"] .side { position:fixed; z-index:10; left:50%; bottom:calc(19px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(690px,calc(100% - 28px)); height:auto; display:block; padding:7px; border:1px solid var(--glass-edge); border-radius:34px; background:var(--glass); box-shadow:var(--glass-shadow),inset 0 1px 1px #ffffffb0,inset 0 -1px 1px #ffffff30; -webkit-backdrop-filter:blur(28px) saturate(1.65); backdrop-filter:blur(28px) saturate(1.65); }
.side .nav { display:flex; gap:3px; align-items:stretch; }
.side .nav button { flex:1; width:auto; min-width:0; height:61px; min-height:61px; margin:0; padding:6px 4px; display:flex; flex-direction:column; justify-content:center; gap:4px; border-radius:27px; font-size:11px; line-height:1.1; color:var(--muted); font-weight:550; transform:none!important; }
.side .nav button span { display:block; }
.side .nav button::before { display:none; }
.side .nav button .nav-icon { width:24px; height:24px; stroke-width:1.75; }
.side .nav button.active,html[data-theme="dark"] .side .nav button.active { color:var(--blue); background:linear-gradient(160deg,#ffffffd9,#ffffff65); box-shadow:inset 0 0 0 1px #ffffffc9,0 2px 8px #46323b12; }
.side .nav button:hover { background:#ffffff55; color:var(--blue); }
html[data-theme="dark"] .side .nav button.active { color:#f0c9d6; background:linear-gradient(150deg,#ffffff20,#ffffff0a); box-shadow:inset 0 0 0 1px #ffffff20,0 2px 8px #0002; }
html[data-theme="dark"] .side .nav button:hover { color:#fff; background:#ffffff12; }
button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:active { transform:scale(.96); }
button:focus-visible { outline:3px solid #b98a4d; outline-offset:3px; }
.primary,.soft,.icon,.danger,.danger-outline,.danger-solid,.detail-head-edit { border-radius:24px; min-height:44px; font-size:14px; font-weight:600; padding:0 18px; }
.icon { width:44px; min-width:44px; padding:0; }
.soft,.icon,.week-picker-wrap,html[data-theme="dark"] .soft,html[data-theme="dark"] .icon,html[data-theme="dark"] .week-picker-wrap { background:var(--glass); color:var(--ink); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5); }
.primary { background:linear-gradient(170deg,#7c304c,#5a1830); color:#fff; border:1px solid #ffffff24; box-shadow:inset 0 1px #ffffff25,0 4px 12px #5a173024; }
.primary:hover,html[data-theme="dark"] .primary:hover { background:#7d304d; box-shadow:inset 0 1px #ffffff30,0 6px 18px #5a17302a; }
.soft:hover,.icon:hover { background:var(--card); color:var(--blue); }
html[data-theme="dark"] .soft:hover,html[data-theme="dark"] .icon:hover { color:#efd4dc; background:#473c43; }
.week { gap:6px; flex-shrink:0; }.week-picker-wrap { border-radius:24px; height:44px; }
.week-picker { font-weight:600; }
.tabs,html[data-theme="dark"] .tabs { background:#e7e3e0; padding:4px; border-radius:24px; gap:2px; margin-bottom:22px; scrollbar-width:none; }
.tabs button { min-height:38px; padding:8px 17px; border-radius:20px; font-size:13px; color:var(--muted); }
.tabs button.active,html[data-theme="dark"] .tabs button.active { background:var(--card); color:var(--ink); box-shadow:0 2px 6px #38242c16,inset 0 0 0 1px #ffffff66; }
.tabs button.active .tab-icon { color:var(--blue); }
html[data-theme="dark"] .tabs { background:#302c30; }
html[data-theme="dark"] .tabs button.active .tab-icon { color:#e1b876; }
.sheet,.panel,.stat,.dash-card,html[data-theme="dark"] .stat,html[data-theme="dark"] .dash-card { background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:0 4px 20px #33232d04; }
.panel { padding:24px; }.sheet:hover,.panel:hover { border-color:var(--line); box-shadow:0 4px 20px #33232d08; }
h3 { letter-spacing:-.025em; }.panel>h3 { margin-top:0; font-size:19px; }
.sheet-title { padding:20px 22px; }.panel .sheet-title { padding:0 0 18px; }
.sheet-title h3 { font-size:18px; }.hint { line-height:1.5; }
.grid { min-width:780px; }.grid th:first-child,.grid td:first-child { width:160px; }
.grid th,.grid th:nth-child(7),.grid th:nth-child(8) { background:#f2eeea; color:var(--muted); height:52px; }
.cell { min-height:88px; padding:12px 10px; font-size:13px; }
.grid td:first-child { font-size:13px; }.grid th,.grid td { border-right-color:color-mix(in srgb,var(--line),transparent 35%); }
.table-wrap { max-height:calc(100dvh - 325px); }
.dashboard-hero { min-height:292px; padding:30px 34px; border-radius:30px; background:linear-gradient(115deg,#361923,#69243d 68%,#855048); box-shadow:0 14px 40px #5a173019; isolation:isolate; }
.dashboard-hero::after { width:440px; height:440px; right:-85px; top:-195px; background:radial-gradient(circle at 45% 48%,#e3c98a50,transparent 62%); border:1px solid #e6c8a817; box-shadow:0 0 0 48px #ffffff03,0 0 0 96px #ffffff02; }
.dashboard-hero .brand { display:flex; position:relative; z-index:2; padding:0; gap:12px; align-items:flex-start; margin-bottom:26px; }
.dashboard-hero .brand>div { display:flex; flex-wrap:wrap; align-items:center; gap:5px 18px; width:100%; min-width:0; }
.dashboard-hero .logo { width:46px; height:46px; border-radius:14px; padding:0; box-shadow:0 3px 12px #0002; }
.dashboard-hero .brand h1 { display:block; color:#f5e9df; font-size:13px; text-transform:uppercase; letter-spacing:.14em; order:0; width:100%; }
.dashboard-hero .user-greeting { display:block; color:#fff; margin:0; font-size:15px; line-height:1.4; max-width:none; white-space:normal; overflow-wrap:anywhere; }
.dashboard-hero .cloud-status { display:inline-flex; color:#dbeddf; background:#183d304d; padding:5px 9px; font-size:10px; max-width:none; margin:0; border:1px solid #c9e4d229; }
.dashboard-hero .cloud-status[data-kind="ok"] { color:#c6e7d1; background:#183d3077; }
.dashboard-hero h3 { font-size:clamp(27px,3.5vw,40px); font-weight:650; letter-spacing:-.04em; margin-bottom:12px; max-width:720px; }
.dashboard-hero p { font-size:14px; color:#efdcdf; line-height:1.6; max-width:500px; }
.dashboard-date { margin-top:24px; font-weight:500; font-size:12px; padding:7px 12px; color:#f4dfb6; background:#ffffff0b; }
.dashboard-grid { gap:16px; margin:22px 0 8px; }.dash-card { padding:22px; min-height:144px; }
.dash-card svg { width:25px; height:25px; stroke:#85502c; }.dash-card strong { font-size:34px; letter-spacing:-.05em; font-weight:650; margin:12px 0 4px; }.dash-card span { font-size:13px; }
.dashboard-columns { gap:20px; }.dashboard-row { border:0; border-radius:0; border-bottom:1px solid var(--line); padding:13px 0; }.dashboard-row:last-child { border-bottom:0; }.dashboard-row b { font-size:14px; }.dashboard-row small { font-size:12px; }
.stat { padding:24px; }.stat::after { display:none; }.stat strong { font-size:34px; font-weight:650; }.stat span { line-height:1.5; }
.staff-tools { gap:12px; }.staff-tools input,.staff-tools select { height:48px; border:0; border-radius:15px; background:#eae6e3; padding:0 16px; }
.employee,html[data-theme="dark"] .employee { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:19px 0; }.employee:last-child { border-bottom:0; }.employee:hover { transform:none; box-shadow:none; border-color:var(--line); }
.avatar { width:44px; height:44px; background:#f1e4e3; color:#77384e; font-size:14px; }.person { gap:15px; }.person b { font-size:15px; }.employee .actions { flex-wrap:nowrap; }
.employee [data-detail-emp],html[data-theme="dark"] .employee .soft { background:var(--navy-soft); color:var(--ink); border:0; }
.profile-layout { gap:20px; }.profile-panel { padding:27px; }.profile-card-head { gap:14px; margin-bottom:24px; }.profile-card-icon,.setting-icon { border-radius:16px; box-shadow:none; }
.field label { font-size:12px; margin-left:3px; }.field input,.field select,.profile-email { border-radius:13px; min-height:48px; background-color:#f3f0ed; border:1px solid transparent; color:var(--ink); box-shadow:none; font-size:16px; }
input:focus,select:focus { outline:2px solid #ad8292; outline-offset:1px; }
.settings-option p,.profile-card-head p,#backup .panel>p { font-size:14px; line-height:1.6; color:var(--muted); }
#backup { max-width:940px; margin:0 auto; }#backup .panel { margin-bottom:20px; }.settings-signature { font-size:12px; padding:20px; }
.theme-switch input:checked+span { background:#345b49; }
.modal { background:#1c122744; -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); padding:24px; z-index:30; }
.dialog,html[data-theme="dark"] .dialog { background:var(--card); border:1px solid var(--glass-edge); border-radius:30px; box-shadow:0 35px 100px #20131d3d; max-height:calc(100dvh - 48px); }
.dialog-head { padding:25px 26px 18px; border-bottom:0; align-items:center; }.dialog-head h3 { font-size:22px; }.dialog-body { padding:12px 26px 24px; }.dialog-foot { padding:19px 26px; border-color:var(--line); }
.close,html[data-theme="dark"] .close { display:grid; place-items:center; width:34px; min-width:34px; height:34px; background:var(--navy-soft); color:var(--muted); font-size:24px; line-height:1; }
.choices { gap:10px; }.choice { border-radius:17px; border:1px solid var(--line); min-height:64px; padding:16px; }.choice.selected { border:1px solid #9c6579; background:#f3e8ed; box-shadow:inset 0 0 0 1px #9c6579; }.choice b { font-weight:550; }.choice.selected b { color:#67253d; }
.preview { background:#eeebe6; border-radius:17px; padding:18px; }.check { font-size:13px; line-height:1.5; }input[type="checkbox"] { accent-color:#315841; }
.toast { bottom:calc(112px + env(safe-area-inset-bottom)); border-radius:25px; padding:14px 22px; background:#30252eec; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); max-width:calc(100% - 32px); text-align:center; }
.stat-week-nav,html[data-theme="dark"] .stat-week-nav { border:0; background:transparent; padding:0 0 20px; }
html[data-theme="dark"] .staff-tools input,html[data-theme="dark"] .staff-tools select,html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .profile-email,html[data-theme="dark"] .preview { background-color:#302c30; color:var(--ink); border-color:transparent; }
html[data-theme="dark"] .choice.selected { background:#45313c; border-color:#ba8b9c; box-shadow:inset 0 0 0 1px #ba8b9c; }html[data-theme="dark"] .choice.selected b { color:#f6d7e1; }
html[data-theme="dark"] .dash-card svg { stroke:#d4b17b; }
.app.schedule-focus .content { padding:122px 20px 32px; }.app.schedule-focus #turni .sheet { border-radius:24px; }
@media(min-width:1100px) { .dashboard-hero { padding-right:300px; }.dashboard-hero .dashboard-date { position:absolute; right:34px; bottom:32px; } }
@media(max-width:850px) {
 .content { padding:10px 22px calc(124px + env(safe-area-inset-bottom)); }.top { padding:30px 22px 18px; height:112px; gap:12px; }
 .top h2.section-title { font-size:32px; }.top #weekTitle { font-size:17px; }.top>.actions { flex:0 0 auto; }.top>.actions .context-action { border-radius:50%; width:44px; min-width:44px; max-width:44px; height:44px; }
 .top .actions .label { display:none; }.top #print { width:44px; min-width:44px; padding:0; }.top .actions .button-icon { margin:0; }
 .grid { min-width:720px; }.grid th:first-child,.grid td:first-child { width:140px; }.cell { font-size:12px; padding:10px 6px; }.table-wrap { max-height:calc(100dvh - 315px); }
 .dashboard-hero { padding:28px; }.profile-panel { padding:22px; }.app.schedule-focus .content { padding-top:112px; }
}
@media(max-width:600px) {
 .content { padding:8px 16px calc(118px + env(safe-area-inset-bottom)); }.top { height:104px; padding:28px 20px 17px; }.top h2.section-title { font-size:32px; }
 .top:has(#weekTitle:not([hidden])) { height:140px; display:grid; grid-template-columns:1fr auto; gap:12px; padding-top:22px; }
 .top #weekTitle { grid-column:1/-1; grid-row:1; text-align:left; font-size:20px; }.top #weekTitle small { display:inline; margin-left:10px; }.top>.week { grid-column:1; grid-row:2; }.top:has(#weekTitle:not([hidden]))>.actions { grid-column:2; grid-row:2; }
 .top .week { gap:4px; }.top .week-picker-wrap { width:44px; min-width:44px; padding:0; justify-content:center; }.top .week-picker { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }.top .week-picker-wrap>.button-icon { margin:0; }
 .side { width:calc(100% - 20px); padding:5px; bottom:calc(12px + env(safe-area-inset-bottom)); border-radius:30px; }.side .nav { gap:0; }.side .nav button { font-size:9px; height:57px; min-height:57px; gap:4px; border-radius:25px; letter-spacing:-.02em; }.side .nav button .nav-icon { width:23px; height:23px; }
 .dashboard-hero { padding:24px; border-radius:26px; min-height:310px; }.dashboard-hero .brand { margin-bottom:24px; }.dashboard-hero .brand>div { gap:6px; }.dashboard-hero .brand h1 { font-size:11px; }.dashboard-hero .user-greeting { font-size:13px; }.dashboard-hero .cloud-status { font-size:9px; }.dashboard-hero .logo { width:39px; height:39px; border-radius:12px; }.dashboard-hero h3 { font-size:29px; max-width:290px; }.dashboard-hero p { font-size:13px; }.dashboard-date { margin-top:20px; }
 .dashboard-grid { gap:10px; margin-top:16px; }.dash-card { padding:18px; border-radius:22px; min-height:138px; }.dash-card strong { font-size:30px; }.dash-card span { font-size:12px; }.dashboard-columns { gap:0; }
 .panel { padding:19px; }.tabs { margin-bottom:17px; }.tabs button { padding:8px 13px; font-size:12px; }.sheet-title { padding:17px; }.sheet-title h3 { font-size:16px; }#tableFocus { min-height:38px; font-size:12px; padding:0 13px; }
 .employee { flex-wrap:wrap; gap:15px; }.employee>.actions { margin-left:59px; }.employee .actions button { min-height:38px; padding:0 14px; font-size:12px; }
 .modal { padding:12px 8px max(8px,env(safe-area-inset-bottom)); align-items:flex-end; }.dialog { width:100%; max-height:calc(100dvh - 28px); border-radius:30px; }.dialog::before { content:""; display:block; width:36px; height:5px; background:var(--line); border-radius:5px; margin:10px auto -3px; }.dialog-head { padding:20px; }.dialog-body { padding:10px 20px 20px; }.dialog-foot { padding:16px 20px; }.dialog-head h3 { font-size:21px; }.dialog-foot button { font-size:12px; padding:0 13px; }.choice { padding:13px; }.choice b { font-size:13px; }
 .stat { padding:18px; }.stat strong { font-size:29px; }.cards { gap:10px; }.profile-panel { padding:21px; }.settings-option { gap:12px; }.settings-option h3 { font-size:16px; }.settings-option p { font-size:12px; }.setting-icon { flex-shrink:0; }
 .app.schedule-focus .content { padding-top:140px; }
}
@supports not (backdrop-filter:blur(1px)) { .side,.soft,.icon,.week-picker-wrap { background:var(--card); } }
@media(prefers-reduced-transparency:reduce) { .side,.soft,.icon,.week-picker-wrap { background:var(--card); backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media(prefers-contrast:more) { .side,.soft,.icon,.week-picker-wrap { background:var(--card); border-color:var(--muted); }.hint { color:var(--ink); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
}
@media screen {
.top h2.section-title { font-size:34px!important; }
.dashboard-hero .brand>div { max-width:none; }
.auth-gate,html[data-theme="dark"] .auth-gate { background:radial-gradient(ellipse at 80% 15%,#b9945640,transparent 55%),radial-gradient(ellipse at 10% 85%,#793d5740,transparent 60%),var(--bg); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.auth-card,html[data-theme="dark"] .auth-card { border:1px solid var(--glass-edge); border-radius:32px; background:var(--glass); box-shadow:0 20px 70px #34212e20,inset 0 1px #ffffff77; -webkit-backdrop-filter:blur(28px) saturate(1.4); backdrop-filter:blur(28px) saturate(1.4); }
.auth-card input { border-radius:14px; min-height:50px; background:var(--card); color:var(--ink); border:1px solid var(--line); }.auth-card button { border-radius:26px; min-height:50px; }.auth-heading h2 { letter-spacing:-.04em; }
@media(max-width:600px) { .top h2.section-title { font-size:32px!important; } }
}

@media screen {
.top #weekTitle { max-width:none; min-width:0; }
.dashboard-hero .brand { justify-content:flex-start; }
html[data-theme="dark"] .side { box-shadow:0 8px 32px #0005,inset 0 1px 1px #ffffff18,inset 0 -1px 1px #ffffff08; }
@media(max-width:600px) { .top #weekTitle { font-size:19px; line-height:1.25; }.top #weekTitle small { display:block; margin:4px 0 0; }.top:has(#weekTitle:not([hidden])) { height:151px; }.app.schedule-focus .content { padding-top:151px; } }
}

@media screen {
  .top {
    height:136px;
    padding-top:50px;
  }

  .dashboard-hero {
    min-height:0;
    padding:32px 36px;
    background:linear-gradient(115deg,#351923,#63263c 70%,#78413e);
    transition:box-shadow .25s ease;
  }
  .dashboard-hero:hover {
    transform:none;
    filter:none;
    box-shadow:0 17px 44px #5a173025;
  }
  .dashboard-hero .brand {
    align-items:center;
    margin-bottom:24px;
  }
  .dashboard-hero .brand>div { display:grid; gap:4px; }
  .dashboard-hero h3 { margin-bottom:8px; overflow-wrap:anywhere; }
  .editorial-meta {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 12px;
    margin-top:24px;
    padding-top:16px;
    border-top:1px solid #fff3;
  }
  .dashboard-hero .editorial-meta .dashboard-date {
    position:static;
    margin:0;
  }
  .dashboard-hero .editorial-meta .cloud-status {
    align-items:center;
    font-size:11px;
  }
  .dashboard-hero::before {
    opacity:0;
    transition:none;
    background:linear-gradient(110deg,transparent 44%,#f0d3a439 50%,transparent 56%);
  }
  .dashboard-hero.hero-magic { animation:none; }
  .dashboard-hero.hero-magic::before { animation:editorial-glint .85s ease-out; }
  .dashboard-hero.hero-magic::after { animation:none; }
  @keyframes editorial-glint {
    from { opacity:0; transform:translateX(-60%) rotate(7deg); }
    22% { opacity:1; }
    to { opacity:0; transform:translateX(60%) rotate(7deg); }
  }

  .dialog-head {
    position:relative;
    align-items:flex-start;
    padding-right:80px;
  }
  .dialog-head .close {
    position:absolute;
    top:19px;
    right:20px;
    margin:0;
  }

  .primary,html[data-theme="dark"] .primary {
    background-color:#641d36;
    background-image:linear-gradient(170deg,#ffffff12,#0000000d);
    transition:background-color .18s ease,box-shadow .18s ease,transform .14s ease;
  }
  @media (hover:hover) {
    .primary:hover,html[data-theme="dark"] .primary:hover {
      background-color:#7d304d;
      background-image:linear-gradient(170deg,#ffffff12,#0000000d);
      transform:none;
    }
  }
  .primary:active,html[data-theme="dark"] .primary:active {
    background-color:#512035;
    transform:scale(.97);
  }

  .stat-week-nav,html[data-theme="dark"] .stat-week-nav {
    gap:16px;
    padding:16px 20px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:none;
  }

  @media (max-width:850px) {
    .top { height:126px; padding-top:44px; }
  }
  @media (max-width:600px) {
    .top { height:118px; padding-top:42px; }
    .top:has(#weekTitle:not([hidden])) { height:auto; min-height:165px; padding-top:36px; }
    .dashboard-hero { padding:24px; }
    .dialog-head { padding-right:66px; }
    .dialog-head .close { top:16px; right:16px; }
    .stat-week-nav,html[data-theme="dark"] .stat-week-nav { padding:12px; gap:10px; }
    .stat-week-title { max-width:none; min-width:0; font-size:13px; }
  }
  @media (prefers-reduced-motion:reduce) {
    .dashboard-hero.hero-magic::before { animation:none; }
  }
}

@media screen and (hover:hover) {
  :is(button:not(.cell), .week-picker-wrap) {
    --hover-glow: #9b723b;
  }
  :is(button.primary, button.choice.selected) { --hover-glow:#a34c70; }
  :is(button.danger, button.danger-outline, button.danger-solid) { --hover-glow:#c44b60; }
  .data-danger-zone button.danger-outline { --hover-glow:#54856e; }

  /* Replace older component shadows with one stationary hover treatment. */
  :is(button:not(.cell, .nav button), .week-picker-wrap):hover:not(:disabled):not(:active) {
    box-shadow:0 0 0 1px color-mix(in srgb,var(--hover-glow) 25%,transparent),
               0 0 16px color-mix(in srgb,var(--hover-glow) 30%,transparent) !important;
  }
}

.startup-gate { display:none; }

@media screen {
  [data-auth-starting] .app { visibility:hidden; }

  [data-auth-starting] .startup-gate {
    position:fixed;
    inset:0;
    z-index:110;
    display:grid;
    place-content:center;
    justify-items:center;
    gap:15px;
    padding:24px;
    text-align:center;
    background:radial-gradient(ellipse at 50% 38%,var(--card),var(--bg) 68%);
    color:var(--ink);
  }
  .startup-gate .logo { width:60px; height:60px; border-radius:17px; }
  .startup-gate b { font-size:22px; }
  .loading-ring {
    display:block;
    width:22px;
    height:22px;
    border:2px solid color-mix(in srgb,currentColor 22%,transparent);
    border-top-color:currentColor;
    border-radius:50%;
    animation:loading-spin .8s linear infinite;
  }
  .startup-gate .loading-ring { margin-top:4px; color:#94516b; }
  html[data-theme="dark"] .startup-gate .loading-ring { color:#efc1d0; }
  @keyframes loading-spin { to { transform:rotate(360deg); } }
  .auth-card button[aria-busy="true"] {
    position:relative;
    color:transparent;
    transform:none;
    cursor:wait;
  }
  .auth-card button .loading-ring {
    position:absolute;
    inset:0;
    margin:auto;
    color:var(--ink);
  }
  .auth-card .primary .loading-ring { color:#fff; }

  .profile-email-label {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    flex-wrap:wrap;
    gap:4px 12px;
    margin:0 3px 6px;
    color:var(--muted);
    font-size:12px;
  }
  .profile-email-label small { font-size:11px; font-weight:600; }
  .profile-email,html[data-theme="dark"] .profile-email {
    display:flex;
    align-items:center;
    gap:10px;
    border:1px dashed var(--line);
    background:color-mix(in srgb,var(--card) 55%,var(--line));
    color:var(--muted);
    font-size:14px;
    overflow-wrap:anywhere;
  }
  .profile-email svg {
    flex:none;
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
  }
  .dialog-head .close { padding:0; }
  .dialog-head .close svg { display:block; }
}

@media screen {
  /* Limit the viewport only. Tables, dialogs and tab strips keep their own scrollbars. */
  html {
    overflow-x:hidden;
    overscroll-behavior-x:none;
    scrollbar-width:none;
  }
  html::-webkit-scrollbar { display:none; }
  .table-wrap,.tabs { overscroll-behavior-x:contain; }
}

@media screen {
  /* The previous-week control sits at the leading edge on narrow screens. */
  :is(#prev,#statPrev)[data-tooltip]::after {
    left:0;
    transform:translateY(5px);
  }
  :is(#prev,#statPrev)[data-tooltip]:is(:hover,:focus-visible)::after {
    transform:translateY(0);
  }
}

@media screen {
  .shift-choices {
    display:grid;
    gap:14px;
  }
  .shift-choice-group + .shift-choice-group {
    border-top:1px solid var(--line);
    padding-top:14px;
  }
  .shift-choice-group h4 {
    margin:0 0 8px;
    font-size:13px;
    color:var(--muted);
  }
  .shift-choice-group .choice {
    min-height:46px;
    padding:11px 12px;
  }
  .shift-choice-group .choice:not(.selected) { background-color:var(--card); }
  .shift-choice-group .choice:only-child { grid-column:1/-1; }
  @media (max-width:480px) {
    .shift-choice-group--rest .choices { grid-template-columns:1fr; }
  }
}

@media screen {
  .dashboard-filters {
    flex-wrap:wrap;
    margin:14px 0 4px;
  }
  .dashboard-filters button { padding-inline:12px; }
}

@media screen {
  .pending-shift {
    width:100%;
    color:var(--ink);
    text-align:left;
    border-radius:10px;
    padding-inline:8px;
  }
  .pending-shift svg,.dashboard-planning-empty svg {
    flex:none;
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .dashboard-planning-empty {
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 0;
    color:var(--muted);
    font-size:13px;
  }
  .dashboard-planning-empty svg { color:var(--forest); }
  html[data-theme="dark"] .dashboard-planning-empty svg { color:#a8ceb9; }

  #shiftModal .choice {
    --hover-glow:#54856e;
    min-height:44px;
    border-radius:12px;
    color:var(--ink);
    -webkit-text-fill-color:currentColor;
  }
  #shiftModal .choice b { color:inherit; }
  #shiftModal .choice.selected {
    border-color:#54856e;
    background:#e8f0eb;
    box-shadow:none;
    color:#234d3b;
  }
  html[data-theme="dark"] #shiftModal .choice.selected {
    border-color:#76a18b;
    background:#2b4037;
    color:#d0eadd;
  }
  #shiftModal #hotel {
    background-color:#fff;
    border-color:#c4d0c8;
    cursor:pointer;
  }
  html[data-theme="dark"] #shiftModal #hotel {
    background-color:#303d37;
    border-color:#70887a;
  }
}

@media screen {
  .dashboard-planning { grid-column:1/-1; }
  #serviceSummary {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:13px;
  }
  .service-tile {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-content:start;
    gap:6px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:14px;
  }
  .service-tile h4 { margin:0; font-size:13px; align-self:center; }
  .service-tile p {
    grid-column:1/-1;
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
    overflow-wrap:anywhere;
  }

  #turni .grid th small { display:block; margin-top:3px; font-weight:500; }
  #turni .grid th.is-today {
    background:color-mix(in srgb,var(--card) 78%,#54856e);
    color:var(--ink);
    box-shadow:inset 0 -2px #54856e;
  }
  #turni .grid td.is-today .cell:not(:hover,:focus-visible) {
    background:color-mix(in srgb,var(--card) 94%,#54856e);
  }

  .undo-toast {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:max-content;
    padding:7px 8px 7px 16px;
  }
  .undo-toast button {
    border:1px solid #ffffff33;
    border-radius:18px;
    min-height:36px;
    padding:0 12px;
    background:#ffffff18;
    color:#fff;
    font-weight:600;
  }
  body:has(.undo-toast.show) #toast {
    bottom:calc(174px + env(safe-area-inset-bottom));
  }
}

@media print {
  #turni .grid th small { display:block; }
}

@media screen {
  .dashboard-shared-filters { margin:18px 0 0; }
}

@media screen {
  #dashboardCards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #dashboardCards .dash-card {
    --metric-tint:#9ab5a3;
    --metric-icon:#285440;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:118px;
    padding:clamp(14px,2.4vw,24px);
    border-color:color-mix(in srgb,var(--line) 70%,var(--metric-tint));
    background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card) 76%,var(--metric-tint)));
  }
  #dashboardCards .dash-card--resting {
    --metric-tint:#d8b781;
    --metric-icon:#775227;
  }
  #dashboardCards .dash-card strong {
    margin:0 0 5px;
    font-size:clamp(32px,5vw,46px);
    line-height:1;
    font-variant-numeric:tabular-nums;
  }
  #dashboardCards .dash-card span { color:var(--ink); font-weight:550; }
  #dashboardCards .dash-card-icon {
    flex:none;
    display:grid;
    place-items:center;
    width:clamp(34px,5vw,54px);
    aspect-ratio:1;
    border-radius:34%;
    background:color-mix(in srgb,var(--card) 52%,var(--metric-tint));
  }
  #dashboardCards .dash-card-icon svg { width:56%; height:56%; stroke:var(--metric-icon); }
  html[data-theme="dark"] #dashboardCards .dash-card--working {
    --metric-tint:#496e5b;
    --metric-icon:#bce0c9;
  }
  html[data-theme="dark"] #dashboardCards .dash-card--resting {
    --metric-tint:#745939;
    --metric-icon:#f1d3a2;
  }
  @media (max-width:420px) {
    #dashboardCards .dash-card { gap:6px; min-height:102px; }
    #dashboardCards .dash-card span { font-size:11px; }
  }
}