:root{--bg:#111820;--panel:#18232e;--panel2:#22303d;--line:#344555;--text:#eef3f7;--muted:#9cabb9;--blue:#45aaf2;--blue2:#238ed8;--danger:#e95d5d;--ok:#37b87d}
:root[data-theme="light"]{--bg:#f1f4f7;--panel:#ffffff;--panel2:#e9eef3;--line:#c9d2db;--text:#1c2731;--muted:#657482;--blue:#087bc1;--blue2:#056aa8;--danger:#c93636;--ok:#178154}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:16px Arial,sans-serif}a{color:var(--blue)}button,input,select{font:inherit}button{cursor:pointer}.site-header{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2000}.header-inner{height:70px;max-width:1440px;margin:auto;padding:0 26px;display:flex;align-items:center;gap:24px}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-size:19px;font-weight:800}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--blue);color:#fff;font-size:13px}.primary-nav{display:flex;align-items:center;gap:4px;flex:1}.primary-nav>a,.nav-dropdown-toggle{border:0;background:transparent;color:var(--muted);padding:10px 12px;border-radius:8px;text-decoration:none;font-weight:700}.primary-nav>a:hover,.primary-nav>a.active,.nav-dropdown-toggle:hover{background:var(--panel2);color:var(--text)}.header-actions{display:flex;align-items:center;gap:10px}.theme-switch,.logout,.control-btn,.small{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;padding:9px 12px;text-decoration:none}.account-name{color:var(--muted);font-size:14px}.session-countdown{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;font-weight:700;min-width:48px;text-align:center}.session-countdown.warning{color:#d8a84e}.session-countdown.expiring{color:#e05a5a}.nav-dropdown{position:relative}.nav-dropdown-menu{display:none;position:absolute;top:42px;left:0;min-width:200px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 12px 32px #0005;z-index:3000}.nav-dropdown-menu.open{display:block}.nav-dropdown-menu a{display:block;padding:10px;border-radius:7px;color:var(--text);text-decoration:none}.nav-dropdown-menu a:hover{background:var(--panel2)}.mobile-menu{display:none}.login-theme{position:fixed;right:24px;top:20px;z-index:30}.page-content{max-width:1440px;margin:auto;padding:34px 26px 60px}.page-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px}.page-title-row h1{font-size:32px;margin:4px 0 6px}.eyebrow{margin:0;color:var(--blue);font-size:12px;text-transform:uppercase;letter-spacing:1.6px;font-weight:bold}.muted,.calendar-note{color:var(--muted)}.calendar-note{margin:0 0 12px}.month-controls{display:flex;align-items:center;gap:14px}.month-controls strong{text-transform:capitalize;font-size:18px;min-width:180px;text-align:center}.calendar-board{display:grid;grid-template-columns:64px repeat(7,minmax(115px,1fr));border:1px solid var(--line);background:var(--line);gap:1px;border-radius:12px;overflow:hidden}.week-head,.dow{background:var(--panel2);padding:14px 8px;text-align:center;font-size:12px;font-weight:bold;letter-spacing:1px;color:var(--muted)}.week-cell,.cal-cell{background:var(--panel);min-height:142px;padding:10px}.week-cell{display:flex;justify-content:center;padding-top:14px;color:var(--muted);font-weight:bold}.cal-cell.outside-month{background:linear-gradient(135deg,var(--panel) 0%,var(--panel) 43%,rgba(128,145,160,.14) 43%,rgba(128,145,160,.14) 50%,var(--panel) 50%,var(--panel) 93%,rgba(128,145,160,.14) 93%,rgba(128,145,160,.14) 100%)!important;color:var(--muted);}
html[data-theme="light"] .cal-cell.outside-month{background:linear-gradient(135deg,#f4f6f8 0%,#f4f6f8 43%,#e3e8ed 43%,#e3e8ed 50%,#f4f6f8 50%,#f4f6f8 93%,#e3e8ed 93%,#e3e8ed 100%)!important;color:#8793a0;}
.cal-cell.blank{background:var(--panel2)}.cal-cell:not(.workday){background:#151d25}
:root[data-theme="light"] .cal-cell:not(.workday){background:#f5f7fa;color:var(--muted)}
:root[data-theme="light"] .cal-cell.blank{background:#eef2f6}
:root[data-theme="light"] .cal-cell.workday{background:#fff}
:root[data-theme="light"] .calendar-board{background:#d9e0e7}
:root[data-theme="light"] .week-cell{background:#f4f7fa}
:root[data-theme="light"] .cal-selected{background:#e6f4eb;color:#17663e}
:root[data-theme="light"] .cal-cell.chosen{box-shadow:inset 0 0 0 2px var(--ok)}.cal-cell:has(.cal-number){} .cal-cell.past{opacity:.42;filter:saturate(.45)}.cal-number{font-weight:bold;font-size:17px}.cal-holiday{font-size:11px;color:var(--muted);margin-top:4px}.cal-form{display:flex;gap:5px;margin-top:38px}.cal-form select{min-width:0;flex:1}.cal-action{border:0;background:var(--blue);color:#fff;border-radius:7px;padding:7px 9px;font-size:12px}.cal-selected{margin-top:34px;background:#204b3a;color:#dff8eb;padding:7px;border-radius:6px;font-size:12px}.cal-cell.chosen{box-shadow:inset 0 0 0 2px var(--ok)}.remove{margin-top:5px;background:var(--danger)}.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:22px}.table-card{overflow:auto}.form-card{max-width:720px}.stack{display:grid;gap:15px}.stack label{display:grid;gap:6px;font-weight:bold}input,select{border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);padding:10px;width:100%}.password-wrap{display:flex;gap:8px}.password-wrap input{flex:1}.password-wrap button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:0 12px}.primary-link{display:inline-block;background:var(--blue);border:0;border-radius:8px;color:#fff;padding:11px 15px;font-weight:bold;text-decoration:none}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}table{width:100%;border-collapse:collapse}th,td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:left}th{font-size:12px;color:var(--muted);text-transform:uppercase}.inline-form,.row-actions{display:flex;gap:6px;align-items:center}.inline-form select{width:auto}.small{font-size:12px;padding:7px 9px}.danger-outline{color:var(--danger);border-color:var(--danger)}.bulk-card{margin-top:20px}.bulk-form{display:grid;gap:12px}.user-checks{display:flex;flex-wrap:wrap;gap:12px}.user-checks label,.check{display:flex!important;align-items:center;gap:7px}.user-checks input,.check input{width:auto}.flash{padding:12px;border-radius:8px}.flash.error{background:#642929;color:#fff}.flash.success{background:#245c42;color:#fff}.flash-global{max-width:1440px;margin:14px auto 0;padding:0 26px}
.desk-layout{height:780px;min-width:980px;position:relative;border:3px solid var(--line);background:var(--bg);border-radius:8px;overflow:hidden}.desk{position:absolute;width:230px;z-index:1}.desk-top{height:118px;border:2px solid var(--line);background:var(--panel);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}.desk-top small{color:var(--muted)}.desk.occupied .desk-top{border-color:var(--blue)}.desk-chair{width:74px;height:42px;border:2px solid var(--line);border-bottom:0;border-radius:45px 45px 0 0;margin:auto;display:grid;place-items:center;font-weight:bold}.desk-1{left:2%;bottom:8%}.desk-2{left:2%;top:39%}.desk-3{left:2%;top:6%}.desk-4{right:2%;top:6%}.desk-5{right:2%;top:32%}.desk-6{right:2%;top:56%}.desk-7{right:2%;top:76%;bottom:auto}.desk-8{left:calc(50% - 232px);top:42%}.desk-9{left:calc(50% + 2px);top:42%}.desk-10{right:2%;top:56%}.desk-11{right:2%;top:76%;bottom:auto}

/* Room 417: match the supplied plan — two desks across the top, one shared desk
   at upper right and one desk at lower right. */
.room-417 .desk{width:230px}.room-417 .desk-1{left:7%;top:8%;bottom:auto}.room-417 .desk-2{left:45%;top:8%}.room-417 .desk-3{right:7%;top:68%;left:auto}.room-417 .desk-4{right:7%;top:8%;left:auto}

/* Room 418-419: seven green perimeter desks and four purple shared desks in
   the central 2x2 block, matching the supplied plan. */
.room-418419 .desk{width:190px}.room-418419 .desk-1{left:5%;top:8%;bottom:auto}.room-418419 .desk-2{left:23%;top:10%}.room-418419 .desk-3{left:52%;top:10%}.room-418419 .desk-4{right:8%;top:5%;left:auto}.room-418419 .desk-5{right:5%;top:33%;left:auto}.room-418419 .desk-6{right:5%;top:56%;left:auto}.room-418419 .desk-7{right:5%;top:77%;left:auto;bottom:auto}.room-418419 .desk-8{left:34%;top:43%}.room-418419 .desk-9{left:52%;top:43%}.room-418419 .desk-10{left:34%;top:62%}.room-418419 .desk-11{left:52%;top:62%}

/* Room 420-421 keeps the original desk arrangement. */
.room-420421 .desk-1{left:2%;bottom:8%;top:auto}.room-420421 .desk-2{left:2%;top:39%}.room-420421 .desk-3{left:2%;top:6%}.room-420421 .desk-4{right:2%;top:6%;left:auto}.room-420421 .desk-5{right:2%;top:32%;left:auto}.room-420421 .desk-6{right:2%;top:56%;left:auto}.room-420421 .desk-7{right:2%;top:76%;left:auto;bottom:auto}.room-420421 .desk-8{left:calc(50% - 232px);top:42%}.room-420421 .desk-9{left:calc(50% + 2px);top:42%}

@media(max-width:900px){.header-inner{height:auto;min-height:64px;flex-wrap:wrap;padding:10px 14px}.mobile-menu{display:block;margin-left:auto}.primary-nav{display:none;width:100%;order:5;flex-direction:column;align-items:stretch}.primary-nav.open{display:flex}.header-actions{margin-left:auto}.account-name{display:none}.page-content{padding:24px 12px}.calendar-board{grid-template-columns:48px repeat(7,115px);overflow-x:auto}.week-cell,.cal-cell{min-height:130px}.desk-layout{min-width:720px}.page-content{overflow-x:hidden}}
@media(max-width:600px){.header-actions{gap:5px}.logout{padding:8px}.two-col{grid-template-columns:1fr}.page-title-row{align-items:flex-start;flex-direction:column}.calendar-board{font-size:13px}}

/* Auth pages */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,var(--panel2),var(--bg) 70%)}
.auth-card{width:min(440px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:0 18px 60px #0004}
.auth-card h1{margin:0 0 8px;font-size:30px}.auth-card .logo,.logo{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:900;font-size:18px;margin-bottom:16px}
.auth-card .primary,.primary{border:0;border-radius:8px;padding:12px;background:var(--blue);color:#fff;font-weight:800}
.auth-card .flash{margin:14px 0}.auth-card a{display:inline-block;margin-top:16px}
.section-divider{height:1px;background:var(--line);margin:20px 0}
.desk-date-form{display:flex;align-items:end;gap:10px;margin:0 0 18px}.desk-date-form label{display:grid;gap:6px;font-weight:bold}.desk-date-form input{width:auto}
.today-label{display:inline-block;margin-left:7px;font-size:11px;padding:2px 6px;border-radius:99px;background:var(--blue);color:#fff}.desk-availability{font-size:11px;color:var(--ok);margin-top:4px}.cal-past{display:none}.cal-booked{margin-top:34px;background:#24455f;color:#e0f0ff;padding:7px;border-radius:6px;font-size:12px}.cal-direct-note{font-size:11px;color:var(--ok);margin-top:5px}.direct-book-form{margin-top:26px}.direct-book-form select{font-size:11px}
.desk-layout{height:780px;min-width:980px}.desk{width:230px}.desk-1{left:2%;bottom:8%}.desk-2{left:2%;top:39%}.desk-3{left:2%;top:6%}.desk-4{right:2%;top:6%}.desk-5{right:2%;top:32%}.desk-6{right:2%;top:56%}.desk-7{right:2%;bottom:5%}.desk-8{left:calc(50% - 232px);top:42%}.desk-9{left:calc(50% + 2px);top:42%}
@media(max-width:1100px){.desk-layout{overflow-x:auto}.desk{width:200px}.desk-8{left:calc(50% - 205px)}.desk-9{left:calc(50% + 5px)}}

.desk-availability{margin-top:7px;font-size:12px;color:var(--ok,#5bd394);font-weight:700}.desk-date-form{display:flex;gap:10px;align-items:end;margin:0 0 14px}.desk-date-form label{display:grid;gap:6px;font-weight:700}.desk-day-nav{display:flex;align-items:center;gap:12px;margin:0 0 18px}.desk-free{color:var(--muted);font-weight:700}.desk.free .desk-top small{color:var(--ok,#5bd394)}

.date-picker{cursor:pointer}
.datepicker-popup{position:absolute;z-index:10000;width:300px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 14px 45px #0006;color:var(--text)}
.datepicker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-weight:700}.datepicker-head button{border:0;background:transparent;color:var(--text);font-size:20px;padding:4px 9px;border-radius:7px}.datepicker-head button:hover{background:var(--panel2)}
.datepicker-week,.datepicker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.datepicker-week span{text-align:center;font-size:11px;color:var(--muted);font-weight:700;padding:5px 0}.datepicker-grid button{height:34px;border:0;border-radius:7px;background:transparent;color:var(--text)}.datepicker-grid button:hover:not(:disabled){background:var(--blue);color:#fff}.datepicker-grid button:disabled{opacity:.35;cursor:default}.datepicker-grid button.dp-selected{background:var(--blue);color:#fff;font-weight:700}.datepicker-grid button.dp-today{outline:1px solid var(--blue)}


/* Visual light/dark slider */
.theme-toggle{border:0;background:transparent;padding:0;cursor:pointer;line-height:1}
.theme-track{width:118px;height:58px;border-radius:999px;display:flex;align-items:center;position:relative;background:#193543;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .2s}
.theme-sun{position:absolute;left:16px;font-size:28px;color:#ffd044;line-height:1}
.theme-knob{position:absolute;right:4px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#3897c6;color:#fff;font-size:30px;box-shadow:0 3px 12px rgba(0,0,0,.2);transition:transform .2s,background .2s}
:root[data-theme="light"] .theme-track{background:#fff1bd;box-shadow:inset 0 0 0 1px #f0cf70}
:root[data-theme="light"] .theme-knob{transform:translateX(-58px);background:#ffc52f;color:#fff}
:root[data-theme="light"] .theme-sun{opacity:.35}
.language-switch{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;padding:9px 12px;cursor:pointer;font-weight:700}
@media(max-width:700px){.theme-track{width:86px;height:44px}.theme-knob{width:38px;height:38px;font-size:22px}.theme-sun{left:11px;font-size:22px}:root[data-theme="light"] .theme-knob{transform:translateX(-42px)}}


/* Original theme switch design, proportionally reduced */
.theme-toggle{border:0;background:transparent;padding:0;cursor:pointer;line-height:1;flex:0 0 71px}
.theme-track{width:71px;height:35px;border-radius:999px;display:flex;align-items:center;position:relative;background:#193543;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .2s}
.theme-sun{position:absolute;left:10px;font-size:17px;color:#ffd044;line-height:1}
.theme-knob{position:absolute;right:2px;width:31px;height:31px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#3897c6;color:#fff;font-size:18px;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:transform .2s,background .2s}
:root[data-theme="light"] .theme-track{background:#fff1bd;box-shadow:inset 0 0 0 1px #f0cf70}
:root[data-theme="light"] .theme-knob{transform:translateX(-35px);background:#ffc52f;color:#fff}
:root[data-theme="light"] .theme-sun{opacity:.35}
.language-switch{height:35px;min-width:42px;padding:0 9px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer;font-weight:700}
.login-theme{display:flex;align-items:center;gap:8px}
.header-actions{gap:8px}
@media(max-width:700px){.theme-track{width:61px;height:31px}.theme-toggle{flex-basis:61px}.theme-knob{width:27px;height:27px;font-size:16px}.theme-sun{left:8px;font-size:15px}:root[data-theme="light"] .theme-knob{transform:translateX(-30px)}.language-switch{height:31px}}

.desk-history-action{margin:0 0 12px;display:flex;justify-content:flex-start}.desk-history-action .control-btn{white-space:nowrap}

/* Theme consistency */
html[data-theme="light"] .calendar-board,
html[data-theme="light"] .calendar-board *{box-shadow:none}
html[data-theme="light"] .calendar-board{background:var(--panel,#fff);color:var(--text,#1b1b1b)}
html[data-theme="light"] .calendar-board .dow,
html[data-theme="light"] .calendar-board .week-head{background:rgba(0,0,0,.04);color:inherit}
html[data-theme="light"] .calendar-board .day-cell{background:var(--panel,#fff);border-color:rgba(0,0,0,.12)}
html[data-theme="light"] .calendar-board .week-cell{background:rgba(0,0,0,.025);color:inherit}
html[data-theme="light"] .calendar-board .day-cell.is-today{outline:2px solid currentColor}
.desk-history-action{justify-content:flex-start}

/* Server language + client translation hand-off: never reveal Hungarian content to an English session. */
/* Password reset request progress */
.form-progress{margin:.15rem 0 0;font-size:.92rem}.primary:disabled{opacity:.72;cursor:wait}.primary[aria-busy="true"]::after{content:"";display:inline-block;width:.75em;height:.75em;margin-left:.55em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.1em;animation:sf-spin .7s linear infinite}@keyframes sf-spin{to{transform:rotate(360deg)}}

.app-version{display:block;width:100%;text-align:center;padding:18px 12px;color:var(--muted,#9aa8b8);font-size:.85rem;line-height:1.2;white-space:normal}
button.is-submitting,button:disabled,input[type=submit]:disabled{opacity:.65!important;cursor:wait!important;pointer-events:none!important}
button.is-submitting::after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:.55em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.1em;animation:sf-spin .7s linear infinite}
.presence-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:.35rem;vertical-align:middle;background:#8a94a3}.presence-online .presence-dot{background:#38c172}.presence-offline .presence-dot{background:#ef5350}.presence-never .presence-dot{background:#8a94a3}.form-progress{margin:.4rem 0 0}.form-progress[hidden]{display:none}

.submit-spinner{display:inline-block;width:.85em;height:.85em;margin-right:.5em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.1em;animation:submit-spin .7s linear infinite}.is-submitting{opacity:.72;cursor:wait}@keyframes submit-spin{to{transform:rotate(360deg)}}

.button-spinner{display:inline-block;margin-left:.4rem;animation:sz-spin .8s linear infinite}.button-spinner[hidden]{display:none}@keyframes sz-spin{to{transform:rotate(360deg)}}

.history-actions{display:flex;justify-content:space-between;align-items:center;width:100%;gap:1rem}.history-actions a:last-child{margin-left:auto}.danger{border-color:#c33}@media(max-width:700px){.primary-nav{display:none}.primary-nav.open{display:flex!important;flex-direction:column;width:100%}.header-inner{flex-wrap:wrap}.mobile-menu{display:block!important}.nav-dropdown-menu{position:static}.nav-dropdown-menu.open{display:block}}

/* v0.9.36 */
.history-actions.adjacent{display:flex!important;align-items:center;gap:12px;width:auto!important;justify-content:flex-start!important}
.history-actions.adjacent a{margin:0!important}
@media (max-width:700px){
  .site-header .header-inner{display:flex;flex-wrap:wrap;align-items:center}
  .site-header .mobile-menu{display:inline-flex!important;align-items:center;justify-content:center;visibility:visible!important;opacity:1!important;position:relative!important;z-index:100}
  .site-header .primary-nav{display:none!important;flex-basis:100%;width:100%;flex-direction:column;align-items:stretch}
  .site-header .primary-nav.open{display:flex!important}
  .site-header .primary-nav>a,.site-header .nav-dropdown-toggle{width:100%;text-align:left}
  .site-header .nav-dropdown{width:100%}
  .site-header .nav-dropdown-menu{position:static!important;width:100%}
  .site-header .nav-dropdown-menu.open{display:block!important}
}



/* v0.9.36: dark upcoming outside-month cells — original thick stripe geometry,
   stripe opacity exactly 3.5%. Light theme and past dates are unchanged. */
html[data-theme="dark"] .cal-cell.outside-month:not(.past),
html:not([data-theme="light"]) .cal-cell.outside-month:not(.past){
  background:
    linear-gradient(135deg,
      var(--panel) 0%, var(--panel) 43%,
      rgba(128,145,160,0.035) 43%, rgba(128,145,160,0.035) 50%,
      var(--panel) 50%, var(--panel) 93%,
      rgba(128,145,160,0.035) 93%, rgba(128,145,160,0.035) 100%) !important;
}

/* v0.9.36: original thick diagonal stripe, explicit 3.5% opacity.
   Dark theme + upcoming outside-month cells only. Light theme and past dates untouched. */
html[data-theme="dark"] .cal-cell.outside-month:not(.past),
html:not([data-theme="light"]) .cal-cell.outside-month:not(.past){
  position:relative;
  overflow:hidden;
  background:var(--panel) !important;
}
html[data-theme="dark"] .cal-cell.outside-month:not(.past)::after,
html:not([data-theme="light"]) .cal-cell.outside-month:not(.past)::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.035;
  background:linear-gradient(135deg,
    #8091a0 0%, #8091a0 43%,
    transparent 43%, transparent 50%,
    #8091a0 50%, #8091a0 93%,
    transparent 93%, transparent 100%);
}
html[data-theme="dark"] .cal-cell.outside-month:not(.past) > *,
html:not([data-theme="light"]) .cal-cell.outside-month:not(.past) > *{
  position:relative;
  z-index:1;
}

/* v0.9.36: office-days report status indicators and text use the same
   semantic color. */
.status-online,
.status-online > span:first-child{
  color:#22c55e !important;
}
.status-offline,
.status-offline > span:first-child{
  color:#ef4444 !important;
}

/* v0.9.36: circular office-days report status icons. */
.report-status-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  min-width:21px;
  border:2px solid currentColor;
  border-radius:50%;
  box-sizing:border-box;
  font-size:14px;
  line-height:1;
  font-weight:700;
  vertical-align:-3px;
  margin-right:6px;
}
.status-online,
.status-online > .report-status-icon{
  color:#22c55e !important;
}
.status-offline,
.status-offline > .report-status-icon{
  color:#ef4444 !important;
}

/* v0.9.36: original thick diagonal geometry, stripe opacity exactly 6%.
   Dark theme + upcoming outside-month cells only. */
html[data-theme="dark"] .cal-cell.outside-month:not(.past),
html:not([data-theme="light"]) .cal-cell.outside-month:not(.past){
  position:relative;
  overflow:hidden;
  background:var(--panel) !important;
}
html[data-theme="dark"] .cal-cell.outside-month:not(.past)::after,
html:not([data-theme="light"]) .cal-cell.outside-month:not(.past)::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.06;
  background:linear-gradient(135deg,
    #8091a0 0%, #8091a0 43%,
    transparent 43%, transparent 50%,
    #8091a0 50%, #8091a0 93%,
    transparent 93%, transparent 100%);
}
html[data-theme="dark"] .cal-cell.outside-month:not(.past) > *,
html:not([data-theme="light"]) .cal-cell.outside-month:not(.past) > *{
  position:relative;
  z-index:1;
}

/* v0.9.39: responsive office-days report without removing desktop table functionality. */
.history-title-row{align-items:center;}
.report-view-actions{display:flex;align-items:center;gap:10px;}
.report-desktop-toggle{white-space:nowrap;}
.report-table-wrap{width:100%;}
@media(max-width:700px){
  .history-title-row{gap:14px;}
  .report-view-actions{width:100%;}
  .report-desktop-toggle{width:100%;}
  .report-filter-card .report-filter-form{display:flex;flex-direction:column;align-items:stretch!important;}
  .report-filter-card .report-filter-form label,.report-filter-card .report-filter-form input,.report-filter-card .report-filter-form button{width:100%;}
  .report-table-wrap{overflow:visible;}
  .report-table-wrap table{width:100%;min-width:0;}
  .report-table-wrap thead{display:none;}
  .report-table-wrap tbody,.report-table-wrap tr,.report-table-wrap td{display:block;width:100%;}
  .report-table-wrap tbody tr{padding:12px 0;border-bottom:1px solid var(--line);}
  .report-table-wrap tbody tr:last-child{border-bottom:0;}
  .report-table-wrap td{display:grid;grid-template-columns:minmax(105px,40%) 1fr;gap:10px;padding:6px 4px;border:0;}
  .report-table-wrap td::before{content:attr(data-label);font-weight:700;color:var(--muted);}
  .report-table-wrap td[colspan]{display:block;text-align:center;}
  .report-table-wrap td[colspan]::before{display:none;}
  .report-card.report-desktop-view .report-table-wrap{overflow-x:auto;}
  .report-card.report-desktop-view .report-table-wrap table{min-width:760px;width:760px;}
  .report-card.report-desktop-view .report-table-wrap thead{display:table-header-group;}
  .report-card.report-desktop-view .report-table-wrap tbody{display:table-row-group;}
  .report-card.report-desktop-view .report-table-wrap tr{display:table-row;padding:0;border-bottom:0;}
  .report-card.report-desktop-view .report-table-wrap th,
  .report-card.report-desktop-view .report-table-wrap td{display:table-cell;width:auto;padding:10px;border-bottom:1px solid var(--line);}
  .report-card.report-desktop-view .report-table-wrap td::before{display:none;}
}

/* v0.9.39: interactive password requirement state */
.password-requirements-hint.interactive-password-requirements{display:block!important;visibility:visible!important;}
.password-requirements-hint.interactive-password-requirements ul{margin:8px 0 0;padding-left:0;list-style:none;}
.password-requirements-hint.interactive-password-requirements li{display:flex;align-items:flex-start;gap:6px;margin:4px 0;transition:color .15s ease;}
.password-requirements-hint.interactive-password-requirements li.met{color:var(--ok)!important;}
.password-requirements-hint.interactive-password-requirements li.unmet{color:var(--danger)!important;}
.password-requirements-hint.interactive-password-requirements .password-req-icon{display:inline-block;flex:0 0 1.2em;min-width:1.2em;font-weight:700;}
.password-requirements-hint.interactive-password-requirements .password-req-text{color:inherit!important;}

/* v0.9.43: password requirement live-state colors */
.password-requirements-hint.interactive-password-requirements{display:block!important;visibility:visible!important;}
.password-requirements-hint.interactive-password-requirements li.met{color:var(--ok)!important;}
.password-requirements-hint.interactive-password-requirements li.unmet{color:var(--danger)!important;}
.password-requirements-hint.interactive-password-requirements .password-req-icon{font-weight:700;}

/* v0.9.46-alpha.1: standalone password feedback */
.password-requirements-hint.interactive-password-requirements{display:block!important;visibility:visible!important;}
.password-requirements-hint.interactive-password-requirements ul{margin:8px 0 0;padding-left:0;list-style:none;}
.password-requirements-hint.interactive-password-requirements li{display:flex;align-items:flex-start;gap:6px;margin:4px 0;transition:color .15s ease;}
.password-requirements-hint.interactive-password-requirements li.met{color:var(--ok)!important;}
.password-requirements-hint.interactive-password-requirements li.unmet{color:var(--danger)!important;}
.password-requirements-hint.interactive-password-requirements .password-req-icon{display:inline-block;flex:0 0 1.2em;min-width:1.2em;font-weight:700;}
.password-requirements-hint.interactive-password-requirements .password-req-text{color:inherit!important;}


/* v0.9.54 room-aware booking layouts. Desk appearance intentionally stays
   identical across room types; desk_type is metadata only. */
.room-booking-toolbar{margin-bottom:14px}.room-book-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.room-book-form label{display:grid;gap:6px;font-weight:700}.desk-layout .desk-top{border-width:2px}.room-admin-card{margin-bottom:18px}.room-permissions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.room-permissions .check{font-weight:600}

/* Room 417: two desks across the top, one shared desk at upper right and one
   individual desk at lower right, following the supplied floor plan. */
.room-417{height:650px}.room-417 .desk{width:230px}.room-417 .desk-top{height:120px}.room-417 .desk-1{left:7%;top:9%;bottom:auto}.room-417 .desk-2{left:42%;top:9%;right:auto}.room-417 .desk-3{right:7%;top:auto;bottom:9%;left:auto}.room-417 .desk-4{right:7%;top:9%;left:auto}

/* Room 418-419: seven perimeter desks and a central 2x2 shared-desk block. */
.room-418419{height:720px}.room-418419 .desk{width:190px}.room-418419 .desk-top{height:105px}.room-418419 .desk-1{left:4%;top:7%;bottom:auto}.room-418419 .desk-2{left:25%;top:8%;right:auto}.room-418419 .desk-3{left:50%;top:8%;right:auto}.room-418419 .desk-4{right:4%;top:5%;left:auto}.room-418419 .desk-5{right:4%;top:28%;left:auto}.room-418419 .desk-6{right:4%;top:52%;left:auto}.room-418419 .desk-7{right:4%;top:76%;bottom:auto;left:auto}.room-418419 .desk-8{left:30%;top:38%;right:auto}.room-418419 .desk-9{left:52%;top:38%;right:auto}.room-418419 .desk-10{left:30%;top:61%;right:auto}.room-418419 .desk-11{left:52%;top:61%;right:auto}

/* Room 420-421 keeps the original desk arrangement. */
.room-420421 .desk-1{left:2%;bottom:8%;top:auto}.room-420421 .desk-2{left:2%;top:39%;right:auto}.room-420421 .desk-3{left:2%;top:6%;right:auto}.room-420421 .desk-4{right:2%;top:6%;left:auto}.room-420421 .desk-5{right:2%;top:32%;left:auto}.room-420421 .desk-6{right:2%;top:56%;left:auto}.room-420421 .desk-7{right:2%;top:76%;bottom:auto;left:auto}.room-420421 .desk-8{left:calc(50% - 232px);top:42%;right:auto}.room-420421 .desk-9{left:calc(50% + 2px);top:42%;right:auto}
@media(max-width:900px){.room-417,.room-418419,.room-420421{min-width:980px}.room-book-form{align-items:stretch}.room-book-form label{min-width:180px}}

.calendar-room-select{margin:0 0 16px}.calendar-room-select form{align-items:end}.calendar-room-select label{display:grid;gap:6px;font-weight:700}

/* v0.9.56: room selector behaves as an instant segmented toggle. */
.room-toggle{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.room-toggle-label{font-weight:700;margin-right:4px}.room-toggle-option{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--text);background:var(--panel);font-weight:700;transition:.15s ease}.room-toggle-option:hover{transform:translateY(-1px);border-color:var(--blue)}.room-toggle-option.active{background:var(--blue);color:#fff;border-color:var(--blue)}.admin-room-desks{margin-bottom:18px}.admin-room-desks .page-title-row{margin-bottom:8px}
/* v0.9.67 header/account/Joker controls */
.joker-balance{display:inline-flex;align-items:center;gap:4px;min-width:42px;justify-content:center;color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.joker-balance img{width:29px;height:29px;object-fit:contain;display:block}
.account-menu{position:relative}
.account-name{border:0;background:transparent;padding:8px 7px;color:var(--text);font-size:14px;font-weight:800;cursor:pointer;border-radius:8px}
.account-name:hover{background:var(--panel2)}
.account-caret{font-size:11px;color:var(--muted)}
.account-menu-panel{display:none;position:absolute;right:0;top:43px;min-width:150px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px #0005;z-index:40}
.account-menu-panel.open{display:block}
.account-menu-panel a{display:block;padding:10px 12px;border-radius:7px;color:var(--text);text-decoration:none;font-weight:700}
.account-menu-panel a:hover{background:var(--panel2)}
.poweroff{width:38px;height:38px;border:1px solid #111;background:#050505;color:#fff;border-radius:10px;display:grid;place-items:center;font-size:24px;line-height:1;font-weight:400;padding:0}
.poweroff:hover{background:#151515}
.joker-option{align-items:center!important}
.joker-option .joker-inline-hat{width:24px;height:24px;object-fit:contain;display:inline-block;margin-left:2px}
.joker-cell-hat{width:25px;height:25px;object-fit:contain;display:inline-block;vertical-align:middle;margin-left:5px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
@media(max-width:700px){.joker-balance img{width:25px;height:25px}.joker-balance{min-width:34px}.poweroff{width:34px;height:34px;font-size:22px}.account-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-menu-panel{right:0}.header-actions{flex-wrap:wrap}}

/* v0.9.69 Joker icon-only application control */
.joker-option{gap:5px!important;display:inline-flex!important;width:auto!important;}
.joker-option input{margin:0;}
.joker-option .joker-inline-hat{width:28px;height:28px;object-fit:contain;}
.joker-option{cursor:pointer;}

.nav-danger-form{margin:0;padding:0}.nav-danger{display:block;width:100%;border:0;background:transparent;color:#ef6b73;text-align:left;padding:10px 12px;font:inherit;cursor:pointer}.nav-danger:hover{background:rgba(239,107,115,.10)}

/* v0.9.75 calendar room hover previews: use the exact desk-map geometry from Desks view. */
.calendar-room-select{position:relative;z-index:100;overflow:visible!important}.calendar-room-option{position:relative;overflow:visible!important;z-index:101}
.calendar-room-option::after{content:"";position:absolute;left:-8px;right:-8px;top:100%;height:10px;z-index:499;display:none}
.calendar-room-option:hover::after{display:block}
.calendar-room-preview{display:none;position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(calc(-50% + var(--calendar-preview-shift,0px)));width:520px;height:350px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 45px #0008;z-index:500;overflow:hidden;pointer-events:auto;cursor:zoom-in}
.calendar-room-preview *{cursor:zoom-in}
.calendar-room-option:hover .calendar-room-preview,.calendar-room-preview:hover{display:block}
/* Keep the same 980px coordinate system and room-specific desk positions used by Desks view.
   The whole map is scaled uniformly instead of replacing it with a grid. */
.calendar-room-preview-inner{position:relative;width:980px;height:780px;margin:0;zoom:.42;transform:none;transform-origin:top left}
.calendar-room-preview .desk-layout{margin:0!important;width:980px!important;min-width:980px!important;max-width:none!important;height:780px;display:block!important;position:relative!important;overflow:hidden!important}
.calendar-room-preview .desk{position:absolute!important;width:230px;z-index:1;display:block;flex-direction:initial;justify-content:initial}
.calendar-room-preview .desk-top{height:118px;padding:0;border:2px solid var(--line);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:16px}
.calendar-room-preview .desk-chair{width:74px;height:42px;margin:auto;display:grid;font-size:16px}
.calendar-room-preview .desk-top b{font-size:16px}.calendar-room-preview .desk-top span{font-size:14px}.calendar-room-preview .desk-top small{display:block;font-size:12px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-room-preview .joker-cell-hat{width:25px;height:25px}
.calendar-room-preview .room-417{height:650px!important}.calendar-room-preview .room-417 .desk-top{height:120px}
.calendar-room-preview .room-418419{height:720px!important}.calendar-room-preview .room-418419 .desk{width:190px}.calendar-room-preview .room-418419 .desk-top{height:105px}
.calendar-room-preview .room-420421{height:780px!important}
.calendar-joker-option{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;width:36px!important}
.calendar-joker-option .joker-inline-hat{margin:0!important;width:28px!important;height:28px!important;order:0}
.calendar-joker-option input{order:1;margin:0!important}
@media(max-width:900px){.calendar-room-preview{display:none!important}}

/* v0.9.81: live cursor magnifier for calendar room previews. */
.calendar-room-preview.has-cursor-magnifier{cursor:none!important}
.calendar-room-preview.has-cursor-magnifier *{cursor:none!important}
.calendar-room-magnifier{display:none;position:absolute;left:0;top:0;width:156px;height:156px;border-radius:50%;overflow:hidden;pointer-events:none;z-index:20;border:3px solid rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 0 2px rgba(52,168,255,.55);background:var(--panel)}
.calendar-room-magnifier-content{position:absolute!important;left:0!important;top:0!important;display:block!important;width:980px!important;height:780px!important;min-width:980px!important;max-width:none!important;margin:0!important;zoom:1!important;transform-origin:0 0!important;overflow:visible!important;pointer-events:none!important}
.calendar-room-magnifier-content .desk{position:absolute!important}
.calendar-room-magnifier-content .desk-layout{position:relative!important;width:980px!important;min-width:980px!important;max-width:none!important;margin:0!important;display:block!important;overflow:visible!important}

/* v0.9.87: footer version link + changelog page. */
.app-version a.app-version-link{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.app-version a.app-version-link:hover{color:var(--blue);text-decoration:underline}
.changelog-card{padding:8px 22px}
.changelog-release{border-bottom:1px solid var(--line);padding:10px 0}
.changelog-release:last-child{border-bottom:0}
.changelog-release>summary{cursor:pointer;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:700;padding:6px 0;list-style-position:inside}
.changelog-version{font-size:1.15rem}
.changelog-date{color:var(--muted);font-weight:400;font-size:.9rem}
.changelog-current{background:var(--blue);color:#fff;border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:700}
.changelog-label{margin:14px 0 4px;font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase}
.changelog-added{color:#3fb56b}.changelog-changed{color:var(--blue)}.changelog-fixed{color:#d8a84e}.changelog-removed{color:#e05a5a}.changelog-security{color:#b58af0}
.changelog-release ul{margin:0 0 6px 4px;padding-left:20px;line-height:1.5}
.changelog-release li{margin:4px 0}
.changelog-release>summary::-webkit-details-marker{display:none}
.changelog-release>summary::marker{content:""}
.changelog-release>summary::before{content:"\25B8";display:inline-block;width:1em;color:var(--muted)}
.changelog-release[open]>summary::before{content:"\25BE"}

/* v0.9.91: inactive desks stay listed in Administration > Desks. */
.admin-room-desks tr.row-inactive{opacity:.55}

/* v0.9.93: audit log page. */
.audit-details{max-width:38ch;overflow-wrap:anywhere;font-size:.85rem;color:var(--muted)}

/* v0.9.94: optional "set a temporary password myself" block of the new-user form. */
details.manual-password{margin:.5rem 0;padding:.6rem .8rem;border:1px dashed var(--line);border-radius:10px}
details.manual-password>summary{cursor:pointer;color:var(--muted)}

/* v0.9.95: the log-out button used the text symbol "⏻" (U+23FB), which many phone fonts do not contain (empty box /
   wrong symbol). It is now an inline SVG icon, does not shrink in the wrapped header and has a phone-sized tap target. */
.header-actions form{margin:0;display:flex;flex:0 0 auto}
.poweroff{flex:0 0 auto;padding:0}
.poweroff .poweroff-icon{width:22px;height:22px;display:block;pointer-events:none}
@media(max-width:700px){.poweroff{width:40px;height:40px}.poweroff .poweroff-icon{width:22px;height:22px}}

/* v0.9.96: on tablets/phones the account menu (Profile) is hidden in the header (.account-name{display:none}),
   so the Profile link is part of the hamburger menu there. On wide screens the account menu is used instead. */
.primary-nav .nav-profile-link{display:none}
@media(max-width:900px){.primary-nav .nav-profile-link{display:block}}

/* v0.9.97: "Check all" / "Clear all" row above the position checkboxes of a room. */
.room-permissions .check-actions{display:flex;gap:6px;flex-basis:100%}

/* v0.9.100: the Desks page on phones, tablets and narrow windows (up to 1050 px) keeps the desktop desk arrangement. The plan is scaled to the width of
   the screen: every size that is a pixel value on the desktop (desk width, chair, text) is multiplied by --u, "one desktop
   pixel" = 1/980 of the plan width, and the plan keeps the desktop aspect ratio. Desk positions are percentages already.
   (v0.9.98 showed a list of cards instead; it did not keep the arrangement.) */
@media(max-width:1050px){
  .desk-layout[data-room]{--u:calc(100cqw / 980);--desk-w:200;--top-h:118;container-type:inline-size;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;aspect-ratio:980/780;overflow:hidden!important;border-width:2px}
  .desk-layout[data-room].room-417{aspect-ratio:980/650;--desk-w:230;--top-h:120}
  .desk-layout[data-room].room-418419{aspect-ratio:980/720;--desk-w:190;--top-h:105}
  .desk-layout[data-room].room-420421{aspect-ratio:980/780;--desk-w:200;--top-h:118}
  .desk-layout[data-room].room-420421 .desk-8{left:calc(50% - 232 * var(--u))}
  .desk-layout[data-room].room-420421 .desk-9{left:calc(50% + 2 * var(--u))}
  .desk-layout[data-room] .desk{width:calc(var(--desk-w) * var(--u))!important;min-width:0}
  .desk-layout[data-room] .desk-top{height:calc(var(--top-h) * var(--u))!important;padding:0;gap:calc(3 * var(--u));border-width:max(1px,calc(2 * var(--u)));overflow:hidden;min-width:0;text-align:center}
  .desk-layout[data-room] .desk-chair{width:calc(74 * var(--u));height:calc(42 * var(--u));border-width:max(1px,calc(2 * var(--u)));font-size:max(10px,calc(16 * var(--u)))}
  .desk-layout[data-room] .desk-top b{font-size:max(9.5px,calc(16 * var(--u)));line-height:1.15}
  .desk-layout[data-room] .desk-top span{font-size:max(9px,calc(14 * var(--u)));line-height:1.1}
  .desk-layout[data-room] .desk-top small{display:block;max-width:100%;padding:0 2px;font-size:max(8px,calc(12 * var(--u)));line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desk-layout[data-room] .joker-cell-hat{height:max(9px,calc(14 * var(--u)));width:auto;vertical-align:middle}
}
@media(max-width:700px){
  .desk-date-form{flex-wrap:wrap}
  .desk-date-form label{flex:1 1 150px}
  .desk-date-form input{width:100%}
  .desk-day-nav{flex-wrap:wrap;justify-content:space-between;gap:8px}
  .desk-history-action .control-btn{white-space:normal}
  .room-book-form{flex-direction:column;align-items:stretch}
  .room-book-form label{min-width:0}
}

/* v0.9.98: logo (public/logo.svg) instead of the "SF" text mark - in the header, on the login page before the name,
   and as the favicon. To change the logo replace public/logo.svg and the favicon files (favicon.svg, favicon.ico,
   favicon-32.png, apple-touch-icon.png). */
.brand-logo{width:38px;height:38px;border-radius:10px;display:block;flex:none}
.login-brand{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:0 0 6px}
.login-logo{width:52px;height:52px;border-radius:13px;flex:none}
@media(max-width:380px){.login-brand{font-size:26px;gap:10px}.login-logo{width:44px;height:44px;border-radius:11px}}

/* v0.9.100: header between 901 and 1199 px. The full desktop header did not fit (menu names wrapped onto two lines and
   the header overflowed), so here menu labels never wrap, spacing is tighter and only the logo is shown. */
.primary-nav>a,.nav-dropdown-toggle{white-space:nowrap}
@media(min-width:901px) and (max-width:1199px){
  .header-inner{gap:12px;padding:0 14px}
  .brand span{display:none}
  .primary-nav>a,.nav-dropdown-toggle{padding:10px 8px;font-size:14px}
  .header-actions{gap:6px}
}

/* v0.9.100: the auth card is as wide as its column (it used the screen width, so on a phone - and inside the page
   layout, e.g. the forgot-password page while signed in - it stuck out on the right). */
.auth-card{width:min(440px,100%);max-width:100%}

/* v0.9.102: Administration > Working days */
.notice-card{border-color:var(--blue)}
.confirm-card{border-color:#d8a84e}
.section-head{justify-content:space-between;align-items:center}
.stacked-cards{display:grid;gap:16px}.stacked-cards>.card{margin:0}
.swap-notice a{color:inherit;font-weight:700}

/* v0.9.112: calendar feed address on the Profile page */
.feed-url{display:flex;gap:8px;align-items:center;margin:8px 0}
.feed-url input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}

/* v0.9.114: waiting list and office-days overview */
.waitlist-status{display:flex;flex-direction:column;gap:8px}
.waitlist-join{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.office-days-card{margin-bottom:16px}
.office-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.office-week{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.office-week p{margin:.4rem 0}
.office-week-head{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.office-bar{height:8px;border-radius:999px;background:var(--panel2);overflow:hidden;margin:10px 0 4px}
.office-bar span{display:block;height:100%;background:var(--blue);border-radius:999px}
.office-week.met .office-bar span{background:var(--ok)}
.waitlist-card{margin-bottom:16px}

/* v0.9.117: Administration > Administrator rights */
.permission-card{border-top:1px solid var(--line);padding-top:1rem;margin-top:1rem}
.permission-card h3{margin:0}
.permission-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.75rem}
.permission-group{border:1px solid var(--line);border-radius:10px;padding:.5rem .75rem;margin:0;display:flex;flex-direction:column;gap:.35rem}
.permission-group legend{font-weight:600;padding:0 .25rem}
.scope-matrix th,.scope-matrix td{text-align:center;white-space:nowrap}
.scope-matrix tbody th{text-align:left;white-space:normal}
select:disabled,input:disabled{opacity:.6;cursor:not-allowed}

/* v0.9.121: the Administrator rights page uses the full width (form-card is capped at 720px, which pushed the scope grid
   out of its card); a wide grid scrolls inside the card, with the position column kept in view. */
.rights-card{max-width:none;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:14px}
.rights-card+.rights-card{margin-top:16px}
.rights-card>h2,.rights-card>p{margin:0}
.rights-card>p.muted{max-width:90ch}
.rights-card .table-wrap{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:10px}
.scope-matrix{width:100%;border-collapse:separate;border-spacing:0}
.scope-matrix th,.scope-matrix td{padding:10px 12px}
.scope-matrix tbody tr:last-child th,.scope-matrix tbody tr:last-child td{border-bottom:0}
.scope-matrix thead th{vertical-align:bottom;white-space:normal;min-width:84px;line-height:1.25}
.scope-matrix thead th:first-child,.scope-matrix tbody th{position:sticky;left:0;z-index:1;background:var(--panel);text-align:left;min-width:220px;border-right:1px solid var(--line)}
.scope-matrix tbody th{font-size:13px;text-transform:none;color:var(--text)}
.scope-matrix tbody th .muted{display:block;font-size:12px;font-weight:400;margin-top:2px}
.scope-matrix tbody tr:hover td,.scope-matrix tbody tr:hover th{background:var(--panel2)}
.scope-matrix input[type="checkbox"]{width:18px;height:18px;cursor:pointer}
.permission-card{border-top:1px solid var(--line);padding-top:16px;margin-top:0}
.permission-groups{align-items:start}
.permission-group label.check{font-weight:400;display:flex;gap:8px;align-items:flex-start;line-height:1.35;margin:0}
.permission-group label.check input{margin-top:2px;flex:0 0 auto}
.permission-card h3 .muted{font-weight:400;font-size:.9em}

/* v0.9.122: Who's in? */
.office-card{display:flex;flex-direction:column;gap:14px}
.office-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.office-date{font-size:1.1rem}
.office-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.office-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text)}
.office-day span{font-size:12px;color:var(--muted)}
.office-day strong{font-size:1.2rem}
.office-day.current{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.office-day.off{opacity:.45}
.office-summary{margin:0}
.office-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:16px;align-items:start}
.office-room h2{margin:0 0 10px}
.office-people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.office-people li{display:grid;grid-template-columns:80px 1fr auto;grid-template-areas:"desk name tag" "desk pos tag";column-gap:10px;padding:8px 10px;border-radius:9px;border:1px solid transparent}
.office-desk{grid-area:desk;color:var(--muted);font-size:13px;align-self:center}
.office-name{grid-area:name;font-weight:600}
.office-position{grid-area:pos;font-size:12px}
.office-tag{grid-area:tag;align-self:center;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.office-people li.is-team{background:var(--panel2);border-color:var(--line)}
.office-people li.is-near,.office-people li.is-me{border-color:var(--blue)}
.office-people li.is-near .office-tag,.office-people li.is-me .office-tag{color:var(--blue);border-color:var(--blue)}

/* v0.9.124: desk attributes */
.desk-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--blue);color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.desk.desk-dimmed{opacity:.25;filter:grayscale(.8)}
.desk-attrs{font-size:11px;letter-spacing:1px}
.apply-attributes{border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-wrap:wrap;gap:8px 16px;margin:0}
.apply-attributes legend{font-size:13px;padding:0 4px}
.apply-attributes label.check{font-weight:400}
.desk-attr-cell{display:flex;flex-wrap:wrap;gap:4px 12px;min-width:320px}
.desk-attr-cell label.check{font-weight:400;font-size:13px;white-space:nowrap}

/* v0.9.125: guest desks and booking for someone else */
.guest-tag{display:inline-block;font-size:10px;padding:0 6px;border-radius:999px;border:1px solid var(--blue);color:var(--blue);vertical-align:middle}
.guest-cancel{margin-top:4px}
.guest-cancel .small{padding:2px 8px;font-size:11px}
.on-behalf-card{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.on-behalf-card h2,.on-behalf-card p{margin:0}
.on-behalf-form{max-width:560px}
.on-behalf-kind{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center}
.on-behalf-kind label.check{font-weight:400}
/* v0.9.126: who booked a desk for somebody else, visible on the desk (a hover title does not work on touch screens) */
.booked-by{display:block;font-size:10px;font-style:normal;color:var(--muted);line-height:1.2;text-align:center}

/* v0.9.127: floor-plan editor */
.desk-layout.has-plan-image{background-color:var(--bg)}
.plan-location{margin:0 0 6px}
.plan-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.plan-toolbar label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.plan-toolbar label.check{flex-direction:row;align-items:center;font-weight:400}
.plan-toolbar .primary-link{margin-left:auto;width:auto;min-width:180px}
.plan-editor-wrap{overflow:auto;max-width:100%;border-radius:8px}
.plan-editor{width:980px;min-width:980px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:49px 39px}
.plan-editor.has-plan-image{background-size:100% 100%}
.editor-desk{cursor:grab;touch-action:none;user-select:none}
.editor-desk:focus-visible,.editor-desk.editor-selected{outline:3px solid var(--blue);outline-offset:2px;z-index:3}
.editor-desk.editor-dragging{cursor:grabbing;opacity:.85;z-index:4}
.editor-desk.editor-inactive{opacity:.55}
.plan-tray{display:flex;flex-wrap:wrap;gap:12px;align-items:center;min-height:60px;padding:12px;border:1px dashed var(--line);border-radius:10px}
.plan-tray .editor-desk{position:relative;left:auto!important;top:auto!important;width:150px}
.plan-tray .editor-desk .desk-top{height:auto;padding:6px}
.plan-desk-panel{margin-top:16px}
.plan-attr-list{display:flex;flex-wrap:wrap;gap:8px 18px}
.plan-attr-list label.check{font-weight:400}

/* v0.9.129: calendar "+" button and the day pop-up (the Desks page of the day inside a frame) */
.cal-plus{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--blue);background:var(--blue);color:#fff;font-size:22px;font-weight:600;line-height:1;cursor:pointer;padding:0;margin:4px 0;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.cal-plus:hover,.cal-plus:focus-visible{background:var(--blue2,var(--blue));outline:2px solid var(--blue);outline-offset:2px}
.day-dialog{width:min(1100px,96vw);height:min(900px,92vh);max-width:none;max-height:none;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);overflow:hidden}
.day-dialog::backdrop{background:rgba(0,0,0,.55)}
.day-dialog[open]{display:flex;flex-direction:column}
.day-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.day-dialog-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:20px;line-height:1;cursor:pointer}
.day-dialog-frame{flex:1;width:100%;border:0;background:var(--bg)}
.embed-body{padding:12px 16px}
.embed-body .embed-content{max-width:none;margin:0;padding:0}
.embed-flash{margin:0 0 12px}

/* v0.9.130: booking and application forms of the Desks page (and the calendar pop-up): one compact row -
   desk (and Joker) and the button side by side; the attributes of "any desk" on their own line below. */
.desk-action-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin:0}
.desk-action-field{display:flex;flex-direction:column;gap:4px;font-weight:600;min-width:0}
.desk-action-field span{font-size:13px}
.desk-action-field select{min-width:160px;width:auto}
.desk-action-joker{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;font-weight:400;white-space:nowrap}
.desk-action-form .cal-action{height:40px;margin:0}
.desk-action-form .apply-attributes{flex-basis:100%}
.desk-action-form .apply-attributes .desk-action-field{flex-direction:row;align-items:center;gap:8px}
.desk-action-form .apply-attributes .desk-action-field select{min-width:90px}
/* v0.9.131: the "any desk" attributes box has display:flex, which overrode its hidden attribute - it was always shown. */
.apply-attributes[hidden]{display:none!important}

/* v0.9.136: adding, closing and deleting rooms */
.room-actions{align-items:center}
.room-closed{opacity:.8}
.room-closed h2{color:var(--muted)}
.room-delete-note{font-size:12px}
.room-close-confirm{margin:10px 0;padding:12px 14px;border:1px solid var(--danger);border-radius:10px}
.room-close-confirm p{margin:6px 0 10px}
/* v0.9.136: settings export/import */
.import-summary{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:6px}
.import-summary ul{margin:4px 0 4px 18px;padding:0}
.import-summary.import-done{border-color:var(--ok)}
/* v0.9.158: export and import parts */
.transfer-form{display:flex;flex-direction:column;gap:10px;margin:8px 0}
.transfer-sections{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 18px}
.transfer-sections legend{padding:0 6px;font-weight:600}
.transfer-sections .transfer-credentials{grid-column:1/-1;margin-top:4px}
.transfer-sections p{grid-column:1/-1;margin:0}
.import-warnings{max-height:220px;overflow:auto}

/* v0.9.137: desks are only the rectangle (the arch with the number is gone - the rectangle shows "Desk #n"). The
   rectangle keeps its exact place on every plan: the desk box starts where the arch used to be (44 px = the arch's
   height with its border), so stored positions, the old layouts and floor images still line up. */
.desk-layout .desk,.calendar-room-preview .desk{margin-top:42px}
@media(max-width:1050px){ .desk-layout[data-room] .desk{margin-top:calc(42 * var(--u))} }
/* A resized desk (floor-plan editor): the box has a stored width/height in percent of the plan and the rectangle fills it. */
.desk.desk-sized .desk-top{height:100%!important;box-sizing:border-box;overflow:hidden}
.desk.desk-sized{transform-origin:50% 50%}
/* editor: resize and rotate handles on the selected desk */
.desk-handle{position:absolute;display:none;z-index:5;background:var(--blue);border:2px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.4);touch-action:none}
.editor-desk.editor-selected .desk-handle{display:block}
.desk-resize{width:16px;height:16px;right:-9px;bottom:-9px;border-radius:4px;cursor:nwse-resize}
.desk-rotate{width:16px;height:16px;left:50%;top:-30px;margin-left:-8px;border-radius:50%;cursor:grab}
.desk-rotate::after{content:"";position:absolute;left:50%;top:14px;width:2px;height:14px;margin-left:-1px;background:var(--blue)}
.plan-tray .editor-desk{margin-top:0}
.plan-tray .desk-handle{display:none!important}
.plan-unsaved{align-self:center;font-size:13px;padding:3px 10px;border-radius:999px;border:1px solid var(--danger);color:var(--danger)}
.plan-desk-geometry{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end}
.plan-desk-geometry label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.plan-desk-geometry input{width:90px}

/* v0.9.138: floor image keeps its proportions; can be hidden (Desks page switch, editor view switch) */
.plan-editor.has-plan-image{background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important}
.desk-layout.plan-image-hidden{background-image:none!important}
.plan-editor.plan-image-hidden{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px)!important;background-size:49px 39px!important;background-position:0 0!important;background-repeat:repeat!important}
.plan-image-toggle{display:inline-flex;gap:6px;align-items:center;font-weight:400;margin:0 0 8px}
/* v0.9.138: on wide screens the Desks page plan keeps its designed width (980 px, like the floor-plan editor) instead of
   stretching to the window - positions and sizes are percent of the plan, so a wider plan pulled the layout apart.
   Narrow screens keep scaling the plan down as before (max-width:1050px rules). */
@media(min-width:1051px){ .desk-layout[data-room]{width:980px;max-width:980px;min-width:980px} }

/* v0.9.141: room location and the floor-image switch on one line (location first); view-only room note */
.plan-info-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0 0 8px}
.plan-info-row .plan-location,.plan-info-row .plan-image-toggle{margin:0}
.room-view-only{margin:0 0 8px;padding:8px 12px;border:1px dashed var(--line);border-radius:10px}

/* v0.9.144: live password-confirmation check */
.password-match{margin:4px 0 0;font-size:13px}
.password-match.match{color:var(--ok)}
.password-match.mismatch{color:var(--danger)}
/* v0.9.144: cookie information notice */
.cookie-notice{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;max-width:760px;margin:0 auto;display:flex;gap:12px;align-items:center;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.cookie-notice[hidden]{display:none}
.cookie-notice p{margin:0;flex:1;font-size:14px}
/* v0.9.144: Profile page groups - related settings together */
.settings-group{margin:18px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:6px}
.settings-group-title{margin:0 0 2px;font-size:1.1rem}
.settings-subsection{display:flex;flex-direction:column;gap:10px}
.settings-subsection+.settings-subsection{border-top:1px dashed var(--line);padding-top:12px;margin-top:6px}
.settings-subsection h3{margin:0;font-size:1rem}
.settings-subsection:empty{display:none}

/* v0.9.145: public pages without the signed-in header (the Cookies page from the sign-in screen) get the same margins */
.public-page{max-width:980px;margin:0 auto;padding:calc(56px + env(safe-area-inset-top,0px)) 20px calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px}
.public-page .page-title-row{margin:0}
.public-page .card{margin:0}

/* v0.9.146: the compact (mobile) menu also when the full header does not fit (html.nav-compact is set by the layout's
   script after measuring the header) - the same rules as the 900 px breakpoint. */
html.nav-compact .header-inner{height:auto;min-height:64px;flex-wrap:wrap;padding:10px 14px}
html.nav-compact .mobile-menu{display:block;margin-left:auto}
html.nav-compact .primary-nav{display:none;width:100%;order:5;flex-direction:column;align-items:stretch}
html.nav-compact .primary-nav.open{display:flex}
html.nav-compact .header-actions{margin-left:auto}
html.nav-compact .account-name{display:none}
html.nav-compact .primary-nav .nav-profile-link{display:block}
/* The tight desktop header when the roomy one does not fit (html.nav-tight, set by the same script) - the rules of the
   901-1199 px breakpoint. Above 1199 px they apply only when measured necessary. */
html.nav-tight .header-inner{gap:12px;padding:0 14px}
html.nav-tight .brand span{display:none}
html.nav-tight .primary-nav>a,html.nav-tight .nav-dropdown-toggle{padding:10px 8px;font-size:14px}
html.nav-tight .header-actions{gap:6px}

/* v0.9.147: "+" on a free desk of the plan - books it / applies for it (same look as the calendar's) */
.desk .desk-plus{position:absolute;top:-12px;right:-12px;z-index:3;width:28px;height:28px;border-radius:50%;border:1px solid var(--blue);background:var(--blue);color:#fff;font-size:19px;font-weight:600;line-height:1;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.desk .desk-plus[hidden]{display:none}
.desk .desk-plus:hover,.desk .desk-plus:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.desk .desk-plus:disabled{opacity:.5;cursor:wait}
@media(max-width:1050px){ .desk-layout[data-room] .desk .desk-plus{width:calc(28 * var(--u));height:calc(28 * var(--u));min-width:22px;min-height:22px;top:calc(-12 * var(--u));right:calc(-12 * var(--u));font-size:max(14px,calc(19 * var(--u)))} }
/* v0.9.148: absences */
.cal-absence{font-size:11px;margin-top:4px;padding:3px 6px;border-radius:6px;background:color-mix(in srgb,var(--warn,#c48a1a) 22%,transparent);color:var(--text);display:inline-block}
.absence-note strong{color:var(--text)}
.absence-mode{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-wrap:wrap;gap:16px}
.absence-mode legend{font-weight:bold;padding:0 4px}
.absence-mode .inline-check{display:flex!important;align-items:center;gap:7px;font-weight:normal}
.absence-mode input{width:auto}
.absence-reason-form{flex-wrap:wrap}
.absence-reason-form input{width:auto;min-width:140px;flex:1}
.absence-reason-form label{display:grid;gap:6px;font-weight:bold;flex:1;min-width:160px}
.report-absence{display:block;font-size:12px;color:var(--muted)}
/* v0.9.148: the label rule (display:grid) must not show fields hidden by the period choice */
.absence-form [hidden]{display:none!important}
/* v0.9.152: requirement evidence and temporary allowances */
.office-requirement-cell{display:grid;gap:6px;min-width:150px}
.office-requirement-cell .office-evidence{font-size:12px;padding:7px 9px}
.evidence-missing{font-size:11px;font-weight:bold;color:var(--danger)}
.allowance-tag{display:inline-block;font-size:11px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--blue) 18%,transparent);color:var(--text)}
/* v0.9.154: sortable, searchable tables (public/table-tools.js) */
.table-sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit}
.table-sort:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.table-sort:hover{color:var(--text)}
.table-sort-mark::after{content:"↕";opacity:.45;font-size:11px}
th[aria-sort="ascending"] .table-sort-mark::after{content:"▲";opacity:1}
th[aria-sort="descending"] .table-sort-mark::after{content:"▼";opacity:1}
.table-filter-row th{padding:4px 6px 10px;text-transform:none}
.table-filter{padding:6px 8px;font-size:12px;min-width:70px;font-weight:normal}
.accomplishment{white-space:nowrap}
.accomplishment-partly{color:var(--warn,#c48a1a);font-weight:bold}
.accomplishment-met{color:var(--ok);font-weight:bold}
.accomplishment-not{color:var(--danger);font-weight:bold}
/* v0.9.155: seasonal mini-games - the hints, the corner decoration (its middle icon opens the quiz) and the game pages */
.game-hint{margin:6px auto 0;max-width:1440px;padding:0 26px;font-size:12px;font-style:italic;color:var(--muted);opacity:.85}
.game-hint-page{margin-top:10px}
.game-hint-footer{text-align:center;padding-bottom:2px}
.game-hint a{color:var(--muted)}
:root[data-game-theme][data-custom-theme] body::after{display:none}
.game-corner{display:none}
:root[data-game-theme][data-custom-theme] .game-corner{display:flex;position:fixed;right:16px;bottom:12px;gap:4px;font-size:26px;letter-spacing:4px;opacity:.6;z-index:1;user-select:none}
.game-corner a{text-decoration:none;color:inherit;cursor:default}
.game-corner a:focus-visible{outline:2px solid var(--blue);border-radius:6px}
@media (max-width:700px){:root[data-game-theme][data-custom-theme] .game-corner{font-size:18px;opacity:.45}}
@media print{.game-corner,.game-hint{display:none!important}}
.game-knock{cursor:default}
.game-page{max-width:900px;margin:0 auto}
.game-card{text-align:center}
.game-canvas-wrap{position:relative;margin:12px auto;max-width:720px}
.game-canvas{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#06070c;touch-action:none}
.game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,0,0,.62);color:#fff;border-radius:12px;padding:16px;text-align:center}
.game-overlay[hidden]{display:none}
.game-overlay h2{margin:0}
.game-touch{display:flex;justify-content:center;gap:10px;margin-top:10px}
.game-touch button{font-size:22px;min-width:64px;min-height:48px}
.game-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin:10px 0}
.game-legend span{display:inline-flex;align-items:center;gap:6px;font-weight:bold}
.game-legend .plus{color:var(--ok)}
.game-legend .minus{color:var(--danger)}
.quiz-box{max-width:680px;margin:0 auto;text-align:left}
.quiz-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:10px}
.quiz-level{text-transform:uppercase;font-weight:bold;letter-spacing:.04em}
.quiz-level-extreme{color:var(--danger)}
.quiz-question{font-size:20px;font-weight:bold;margin:8px 0 16px}
.quiz-answers{display:grid;gap:10px}
.quiz-answers button{text-align:left;padding:14px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:16px;cursor:pointer}
.quiz-answers button:hover:not(:disabled){border-color:var(--blue)}
.quiz-answers button.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 22%,var(--panel2))}
.quiz-answers button.wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 22%,var(--panel2))}
.quiz-progress{height:6px;border-radius:99px;background:var(--panel2);overflow:hidden;margin-bottom:12px}
.quiz-progress span{display:block;height:100%;background:var(--blue)}
.game-scoreboards{display:grid;gap:18px}
.game-scoreboards .me td{font-weight:bold}
.game-touch button{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.game-touch button:active{border-color:var(--blue)}