:root {
  --bg: #0b1020; --surface: #11182b; --surface-2: #182139; --surface-3: #202b47;
  --line: rgba(255,255,255,.09); --text: #f5f7ff; --muted: #929db8;
  --primary: #8b6cff; --primary-2: #5fe0ca; --danger: #ff6b7a; --warning: #ffbd5a;
  --sidebar: 252px; --radius: 18px; --shadow: 0 24px 70px rgba(1,5,18,.28);
}
* { box-sizing: border-box; }
.access-layout { height:auto !important; min-height:0 !important; align-items:start !important; overflow:visible !important; }
.user-accounts-panel,.account-form-panel,.user-access-list { overflow:visible !important; }
.account-form-panel > .stack-form { padding:10px 18px !important; gap:6px !important; overflow:visible !important; }
.account-create-form .input,.account-existing-form .input { padding:5px 8px !important; }
.account-management { grid-column:2/-1; min-width:0; }
.account-management summary { width:max-content; padding:3px 0; color:var(--muted); font-size:.7rem; cursor:pointer; }
.account-management summary:hover { color:var(--text); }
.account-management-body { margin-top:8px; padding:10px; display:grid; gap:9px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.018); }
.account-management label { display:grid; gap:4px; color:#cdd4e7; font-size:.66rem; font-weight:700; }
.account-management .user-assignment,.account-password-form { display:grid; grid-template-columns:minmax(150px,1fr) auto; align-items:end; gap:8px; }
.account-management .input { min-height:34px; padding:6px 9px; font-size:.7rem; }
.account-management .button { min-height:34px; }
.account-action.impersonate { color:#c4b8ff; border-color:rgba(139,108,255,.3); background:rgba(139,108,255,.08); }
.protected-account-copy { margin:0; font-size:.66rem; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button, .button { cursor: pointer; }
h1,h2,h3,p { margin-top: 0; } h1,h2,h3,.brand { font-family: "Space Grotesk", sans-serif; }
h1 { font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.04em; line-height: 1.08; margin-bottom: .6rem; }
h2 { font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .3rem; } h3 { margin-bottom: .25rem; }
p { color: var(--muted); } small { color: var(--muted); display: block; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 1.05rem; font-weight: 700; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: white; background: linear-gradient(135deg,var(--primary),#6049d8); box-shadow: 0 8px 25px rgba(139,108,255,.35); }
.eyebrow { color: var(--primary-2); text-transform: uppercase; font-weight: 700; letter-spacing: .13em; font-size: .72rem; display: inline-block; margin-bottom: .7rem; }
.button { border: 0; border-radius: 11px; padding: .72rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; transition: .2s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button-primary { background: linear-gradient(135deg,var(--primary),#7054e8); color: white; box-shadow: 0 8px 22px rgba(113,82,233,.22); }
.button-ghost { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.button-small { padding: .52rem .78rem; font-size: .84rem; } .button-wide { width: 100%; } .button-large { padding: .95rem; }
.button-row { display: flex; gap: .5rem; align-items: center; }
.text-link { color: #b9aaff; font-weight: 700; } .centered { text-align: center; display: block; }
.panel { border: 1px solid var(--line); background: rgba(17,24,43,.92); border-radius: var(--radius); box-shadow: var(--shadow); }
.flash-stack { position: fixed; top: 18px; right: 18px; z-index: 100; display: grid; gap: 8px; width: min(420px,calc(100% - 36px)); }
.flash { padding: 13px 16px; border-radius: 12px; background: var(--surface-3); box-shadow: var(--shadow); border-left: 3px solid var(--primary); }
.flash-success { border-color: var(--primary-2); } .flash-danger { border-color: var(--danger); } .flash-info { border-color: #68b8ff; }

/* Authentication */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; }
.auth-brand { position: relative; overflow: hidden; padding: 42px clamp(32px,5vw,80px); background: radial-gradient(circle at 75% 55%,rgba(139,108,255,.2),transparent 35%),linear-gradient(145deg,#0c1225,#111832); display: flex; flex-direction: column; justify-content: space-between; }
.auth-copy { max-width: 650px; position: relative; z-index: 2; padding-bottom: 15vh; } .auth-copy h1 { font-size: clamp(3rem,6vw,6.5rem); } .auth-copy p { font-size: 1.15rem; }
.ambient-orb { position: absolute; width: 420px; height: 420px; border: 1px solid rgba(139,108,255,.3); border-radius: 50%; right: -100px; bottom: -150px; box-shadow: inset 0 0 90px rgba(139,108,255,.12),0 0 120px rgba(95,224,202,.08); }
.auth-panel { display: grid; place-items: center; padding: 32px; background: #0a0f1d; }
.auth-card { width: min(430px,100%); display: grid; gap: 20px; } .auth-card h2 { font-size: 2rem; }

/* Admin shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) 1fr; }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar); padding:18px 15px 14px; border-right:1px solid var(--line); background:#0a0f1e; display:flex; flex-direction:column; z-index:30; }
.sidebar-brand { padding:0 10px 14px; }.nav-list { min-height:0; display:grid; gap:1px; overflow-y:auto; }
.nav-section-label { margin:13px 11px 3px; color:#68738e; font-size:.57rem; font-weight:500; letter-spacing:.16em; line-height:1.2; }.nav-section-label:first-child { margin-top:2px; }
.nav-item { min-height:31px; margin-left:7px; color:var(--muted); padding:4px 9px; border-radius:10px; display:grid; grid-template-columns:21px minmax(0,1fr); align-items:center; gap:10px; line-height:1.2; font-weight:600; font-size:.78rem; transition:.15s; }
.nav-item:hover { background: rgba(255,255,255,.04); color: var(--text); }.nav-item.active { background: linear-gradient(90deg,rgba(139,108,255,.18),rgba(139,108,255,.05)); color: #c9bdff; }
.nav-icon { width:21px; height:21px; display:grid; place-items:center; line-height:0; }.nav-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.nav-item.active .nav-icon { filter:drop-shadow(0 0 7px rgba(139,108,255,.45)); }
.sidebar-tools { margin-top:auto; padding:8px 6px 10px; display:grid; gap:7px; border-top:1px solid var(--line); font-size:.66rem; }.sidebar-settings { min-height:34px; padding:6px 8px; display:grid; grid-template-columns:21px 1fr; align-items:center; gap:9px; border-radius:9px; color:var(--muted); font-size:.78rem; font-weight:600; }.sidebar-settings:hover,.sidebar-settings.active { color:var(--text); background:var(--surface-2); }.sidebar-system-links { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; }.sidebar-system-links > a { padding:6px 8px; border:1px solid var(--line); border-radius:8px; color:#d7dced; background:var(--surface-2); font-weight:700; }.sidebar-status { display:flex; align-items:center; gap:6px; color:var(--muted); white-space:nowrap; }.sidebar-status i { width:6px; height:6px; border-radius:50%; background:var(--primary-2); box-shadow:0 0 9px var(--primary-2); }
.sidebar-footer { margin-top:0; border-top:1px solid var(--line); padding:12px 6px 0 44px; display:flex; align-items:center; gap:6px; }.user-chip { display:flex; align-items:center; gap:9px; min-width:0; flex:1; padding:5px; margin:-5px; border-radius:11px; }.profile-link:hover,.profile-link.active { background:rgba(139,108,255,.1); }.user-chip > div { min-width:0; }.user-chip strong,.user-chip small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:125px; }.user-chip strong { display:block; font-size:.82rem; }.user-chip small { font-size:.7rem; }
.avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-3); color: white; display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }.avatar.large { width: 48px; height: 48px; border-radius: 14px; }
.icon-button,.mobile-menu { border: 0; color: var(--muted); background: transparent; padding: 8px; }.main-column { grid-column: 2; min-width: 0; }
.topbar { display:none; height:58px; border-bottom:1px solid var(--line); justify-content:flex-end; align-items:center; gap:15px; padding:0 16px; background:rgba(11,16,32,.85); backdrop-filter:blur(16px); position:sticky; top:0; z-index:20; }
.mobile-menu { display: none; margin-right: auto; font-size: 1.3rem; }.status-pill { font-size: .77rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }.status-pill span,.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-2); box-shadow: 0 0 12px var(--primary-2); }
.content { width:100%; padding:26px clamp(16px,1.8vw,30px) 40px; }.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom:20px; }.page-heading p { margin: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; margin-bottom: 20px; }.stats-grid.compact { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.stat-card { padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; gap: 15px; }.stat-card.accent { background: linear-gradient(140deg,rgba(139,108,255,.2),var(--surface)); border-color: rgba(139,108,255,.25); }.stat-card small { margin-bottom: 4px; }.stat-card strong { font: 700 1.7rem "Space Grotesk"; }.stat-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-3); color: #c4b8ff; font-size: 1.25rem; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }.span-2 { grid-column: span 2; }.panel-header { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; }.panel-header h2,.panel-header p { margin-bottom: 0; }.panel-header p { font-size: .84rem; }
.booking-list { padding: 6px 12px; }.booking-row { display: flex; align-items: center; gap: 13px; padding: 13px 10px; border-bottom: 1px solid var(--line); }.booking-row:last-child { border: 0; }.booking-row:hover { background: rgba(255,255,255,.025); }.booking-row time { width: 50px; }.booking-row time strong { display: block; }.booking-color { width: 3px; height: 38px; background: var(--primary); border-radius: 9px; }.grow { flex: 1; min-width: 0; }.booking-row .grow strong,.booking-row .grow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { padding: 4px 8px; border-radius: 99px; font-size: .7rem; font-weight: 700; color: var(--muted); background: var(--surface-3); white-space: nowrap; }.badge-confirmed,.badge-paid,.badge-approved { color: #70ead5; background: rgba(95,224,202,.12); }.badge-pending,.badge-open { color: #ffd080; background: rgba(255,189,90,.12); }.badge-cancelled,.badge-rejected,.badge-refunded { color: #ff8e99; background: rgba(255,107,122,.12); }.large-badge { padding: 8px 12px; }
.quick-panel { min-height: 350px; }.quick-grid { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.quick-grid a { min-height: 105px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 14px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; font-weight: 700; font-size: .82rem; }.quick-grid a:hover { border-color: rgba(139,108,255,.5); }.quick-grid span { width:25px; height:25px; display:grid; place-items:center; color:#c4b8ff; }.quick-grid svg,.resource-symbol svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.empty-state { padding: 45px 20px; text-align: center; color: var(--muted); }.empty-state > span { display: block; font-size: 2rem; color: var(--primary); margin-bottom: 10px; }.empty-state p { margin-bottom: 0; }

/* Forms and tables */
.split-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.75fr); gap: 20px; align-items: start; }.form-panel { position: sticky; top: 90px; }.stack-form { display: grid; gap: 14px; padding: 20px 22px 23px; }.form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }.form-field { min-width:0; }.form-field label { display: block; color: #cdd4e7; font-size: .78rem; font-weight: 700; margin-bottom: 6px; }.input,.search-bar input { width: 100%; min-width:0; border: 1px solid var(--line); background: #0c1222; color: var(--text); border-radius: 10px; padding: 10px 11px; outline: none; }.input:focus,.search-bar input:focus { border-color: rgba(139,108,255,.7); box-shadow: 0 0 0 3px rgba(139,108,255,.1); }textarea.input { min-height: 84px; resize: vertical; }.form-field small { font-size: .7rem; margin-top: 5px; }.check-row { display: flex !important; align-items: flex-start; gap: 8px; font-weight: 500 !important; color: var(--muted) !important; }.check-row input { accent-color: var(--primary); margin-top: 3px; }.field-error { display: block; color: #ff949e; font-size: .72rem; margin-top: 4px; }.has-error .input { border-color: var(--danger); }
.card-list,.game-grid,.message-list,.voucher-grid { padding: 14px; display: grid; gap: 11px; }.resource-card,.game-card,.message-card { border: 1px solid var(--line); background: rgba(255,255,255,.018); border-radius: 14px; padding: 16px; display: flex; gap: 15px; }.resource-symbol,.channel-icon { width: 43px; height: 43px; background: rgba(139,108,255,.12); color: #c2b5ff; display: grid; place-items: center; border-radius: 12px; font-size: 1.4rem; flex: 0 0 auto; }.title-row,.meta-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }.title-row h3 { margin: 0; }.resource-card p,.game-card p,.message-card p { margin: 5px 0 11px; font-size: .85rem; }.meta-row { justify-content: flex-start; color: var(--muted); font-size: .76rem; }.meta-row span + span { border-left: 1px solid var(--line); padding-left: 10px; }.game-card { display: grid; grid-template-columns: 90px 1fr; }.game-art { min-height: 90px; border-radius: 12px; background: radial-gradient(circle at 20% 20%,rgba(95,224,202,.28),transparent 35%),linear-gradient(145deg,#5135a7,#17213d); display: flex; align-items: center; justify-content: center; flex-direction: column; font: 700 1.4rem "Space Grotesk"; }.game-art small { font-size: .65rem; }
.table-wrap { width: 100%; overflow-x: auto; }table { width: 100%; border-collapse: collapse; min-width: 680px; }th { text-align: left; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-size: .65rem; }th,td { padding: 13px 17px; border-bottom: 1px solid var(--line); }td { font-size: .82rem; }td small { font-size: .7rem; }.table-empty { text-align: center; padding: 35px; color: var(--muted); }.customer-cell { display: flex; align-items: center; gap: 9px; }.mini-action { width: 28px; height: 28px; border: 0; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--text); }.mini-action.approve { color: var(--primary-2); }.mini-action.reject { color: var(--danger); }.employee-card { padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; gap: 13px; }.employee-card p { margin-bottom: 8px; font-size: .8rem; }.availability { color: var(--danger); }.availability.available { color: var(--primary-2); }.login-state { display:inline-flex; align-items:center; gap:5px; }.login-state i { width:6px; height:6px; border-radius:50%; background:var(--muted); }.login-state.active { color:var(--primary-2); }.login-state.active i { background:var(--primary-2); box-shadow:0 0 8px var(--primary-2); }.stack-column { display: grid; gap: 20px; }.disclosure summary { padding: 18px 20px; cursor: pointer; font: 700 1rem "Space Grotesk"; }.detail-form { padding-top: 5px; }.search-bar { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); padding: 8px; border-radius: 14px; margin-bottom: 18px; }.search-bar > span { padding-left: 8px; }.search-bar input { background: transparent; border: 0; }.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; padding: 25px; }.detail-grid dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }.detail-grid dd { margin: 4px 0; font-weight: 700; font-size: 1rem; }.note-box { margin: 0 22px 22px; padding: 15px; background: var(--surface-2); border-radius: 12px; }.note-box p { margin: 5px 0 0; }.integration-note { margin-top: 18px; padding: 15px 18px; border: 1px solid rgba(95,224,202,.18); background: rgba(95,224,202,.06); border-radius: 13px; display: flex; gap: 12px; }.integration-note > span { width: 25px; height: 25px; border-radius: 50%; background: rgba(95,224,202,.16); color: var(--primary-2); display: grid; place-items: center; flex: 0 0 auto; }.integration-note p { margin: 2px 0 0; }.integration-note.small { margin: 0 20px 20px; font-size: .78rem; }.message-card p { white-space: pre-line; }.marketing-callout { margin: 0 20px 20px; padding: 16px; border-radius: 13px; background: linear-gradient(140deg,rgba(139,108,255,.15),rgba(95,224,202,.06)); }.marketing-callout p { margin: 5px 0 0; font-size: .78rem; }.voucher-card { position: relative; overflow: hidden; min-height: 150px; border: 1px solid rgba(139,108,255,.25); background: radial-gradient(circle at 80% 20%,rgba(95,224,202,.14),transparent 30%),linear-gradient(145deg,#211b48,#121a31); border-radius: 16px; padding: 20px; display: grid; grid-template-columns: 1fr auto; gap: 15px; }.voucher-card:before { content:""; position:absolute; inset: 0 auto 0 62%; border-left: 1px dashed rgba(255,255,255,.17); }.voucher-card h3 { font-size: 1.35rem; letter-spacing: .05em; }.voucher-card p { margin: 0; }.voucher-card .badge { position:absolute; right: 14px; top: 14px; }.voucher-value { align-self: end; text-align: right; position: relative; }.voucher-value strong { font: 700 1.6rem "Space Grotesk"; display: block; }

/* Calendar */
.blocker-editor { margin-bottom:18px; overflow:hidden; }.blocker-editor > summary { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:16px 20px; cursor:pointer; list-style:none; }.blocker-editor > summary::-webkit-details-marker { display:none; }.blocker-editor > summary strong,.blocker-editor > summary small { display:block; }.blocker-symbol { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:#ff9ba5; background:rgba(255,107,122,.1); font-size:1.2rem; }.blocker-form { border-top:1px solid var(--line); grid-template-columns:1fr 1fr; align-items:end; }.blocker-form > .form-grid,.blocker-form > .form-field { grid-column:1/-1; }.blocker-form > .button { justify-self:start; }.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(125px,1fr)); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.calendar-day { min-height: 540px; border-right: 1px solid var(--line); }.calendar-day:last-child { border: 0; }.calendar-day > header { height: 65px; padding: 11px 13px; border-bottom: 1px solid var(--line); }.calendar-day header strong { display: block; }.calendar-day.today header { background: rgba(139,108,255,.1); color: #c4b8ff; }.day-slots { display: grid; gap: 8px; padding: 9px; align-content: start; }.calendar-event { position:relative; border-left: 3px solid var(--primary); border-radius: 8px; padding: 9px; background: rgba(139,108,255,.1); font-size: .72rem; overflow-wrap:anywhere; }.calendar-event strong,.calendar-event span,.calendar-event small { display: block; }.calendar-event.status-cancelled { opacity: .55; border-color: var(--danger); }.calendar-block { padding-right:26px; border-color:var(--danger); background:rgba(255,107,122,.09); }.calendar-block form { position:absolute; top:5px; right:5px; }.calendar-block button { width:20px; height:20px; padding:0; border:0; border-radius:6px; background:rgba(0,0,0,.2); color:#ff9ba5; }.day-empty { color: var(--muted); font-size: .7rem; text-align: center; padding: 25px 0; }

/* Public booking */
.public-body { background: #080d1b; }.public-nav { height: 76px; max-width: 1280px; margin: auto; padding: 0 25px; display: flex; justify-content: space-between; align-items: center; }.public-main { overflow: hidden; }.hero { max-width: 1280px; min-height: 590px; padding: 70px 25px 90px; margin: auto; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; }.hero h1 { font-size: clamp(3rem,6vw,6.2rem); }.hero h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px #afa2ff; }.hero > div > p { max-width: 610px; font-size: 1.1rem; }.hero-points { display: flex; flex-wrap: wrap; gap: 10px 20px; color: #c9d1e5; font-size: .8rem; margin-top: 25px; }.hero-points span::first-letter { color: var(--primary-2); }.hero-visual { aspect-ratio: 1; position: relative; display: grid; place-items: center; background: radial-gradient(circle,rgba(139,108,255,.18),transparent 62%); }.vr-orbit { position: absolute; border: 1px solid rgba(139,108,255,.24); border-radius: 50%; }.orbit-one { inset: 8%; }.orbit-two { inset: 22%; border-color: rgba(95,224,202,.18); transform: rotate(35deg); }.headset { width: 230px; height: 115px; border-radius: 45px 45px 60px 60px; background: linear-gradient(145deg,#c7c1ff,#6652d4 55%,#232b50); box-shadow: 0 30px 80px rgba(93,68,207,.4); transform: perspective(500px) rotateX(-7deg) rotateY(-12deg); position: relative; }.headset:before { content:""; position:absolute; width: 105px; height: 55px; left: -85px; top: 28px; border: 16px solid #5042a5; border-right: 0; border-radius: 35px 0 0 35px; }.headset span { position: absolute; inset: 22px 25px; background: linear-gradient(145deg,#101831,#33416e); border-radius: 28px; }.hero-visual small { position: absolute; bottom: 11%; letter-spacing: .25em; }.booking-section { padding: 90px 25px 110px; background: linear-gradient(180deg,#0c1223,#090e1b); border-top: 1px solid var(--line); }.section-intro { max-width: 680px; margin: 0 auto 35px; text-align: center; }.section-intro h2 { font-size: clamp(2rem,4vw,3.5rem); }.public-booking-grid { max-width: 1050px; margin: auto; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(270px,.65fr); gap: 20px; align-items: start; }.booking-form { padding: 27px; display: grid; gap: 16px; }.form-step { display: flex; gap: 13px; align-items: center; padding: 10px 0 2px; }.form-step > span { color: var(--primary-2); font: 700 .76rem "Space Grotesk"; }.form-step h3,.form-step p { margin: 0; }.form-step p { font-size: .75rem; }.availability-panel { border: 1px solid var(--line); background: rgba(17,24,43,.7); border-radius: var(--radius); overflow: hidden; }.public-events { padding: 8px 16px; }.public-events > div { padding: 13px 2px; border-bottom: 1px solid var(--line); display: grid; }.public-events time { color: #d1c8ff; font-weight: 700; font-size: .78rem; }.public-events span { font-size: .82rem; }.public-events small { font-size: .68rem; }.privacy-note { margin: 12px; padding: 13px; display: flex; gap: 9px; border-radius: 11px; background: rgba(95,224,202,.06); font-size: .7rem; }.privacy-note span { color: var(--primary-2); }.privacy-note p { margin: 0; }.public-footer { max-width: 1280px; margin: auto; padding: 28px 25px; display: flex; justify-content: space-between; align-items: center; }.public-footer p { margin: 0; font-size: .75rem; }.confirmation-body { min-height: 100vh; }.confirmation-shell { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 40px 20px; background: radial-gradient(circle at 50% 35%,rgba(139,108,255,.16),transparent 35%); }.confirmation-card { max-width: 650px; padding: 45px; text-align: center; }.success-mark { width: 66px; height: 66px; margin: 0 auto 20px; border-radius: 50%; background: rgba(95,224,202,.12); color: var(--primary-2); display: grid; place-items: center; font-size: 1.6rem; border: 1px solid rgba(95,224,202,.25); }.confirmation-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 28px 0; background: var(--line); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }.confirmation-details div { padding: 15px; background: var(--surface); }.confirmation-details dt { color: var(--muted); font-size: .68rem; text-transform: uppercase; }.confirmation-details dd { margin: 4px 0; font-weight: 700; }

@media (max-width:1100px) { .stats-grid { grid-template-columns: 1fr 1fr; }.split-layout { grid-template-columns: 1fr; }.form-panel { position: static; }.dashboard-grid { grid-template-columns: 1fr 1fr; }.dashboard-grid .quick-panel { grid-column: span 2; }.hero { grid-template-columns: 1fr 1fr; }.hero h1 { font-size: 4rem; } }
@media (max-width:780px) { .app-shell { display:block; }.sidebar { transform: translateX(-102%); transition:.2s; box-shadow: var(--shadow); }.sidebar.open { transform:none; }.main-column { width:100%; }.mobile-menu { display:block; }.topbar { display:flex; }.content { padding-top:24px; }.page-heading { align-items:flex-start; flex-direction:column; }.stats-grid,.dashboard-grid { grid-template-columns:1fr; }.span-2,.dashboard-grid .quick-panel { grid-column:auto; }.auth-shell { grid-template-columns:1fr; }.auth-brand { min-height:280px; padding:30px; }.auth-copy { padding:40px 0 10px; }.auth-copy h1 { font-size:2.6rem; }.auth-panel { padding:40px 22px; }.hero { grid-template-columns:1fr; padding-top:45px; }.hero h1 { font-size:3.6rem; }.hero-visual { max-width:450px; margin:auto; width:100%; }.public-booking-grid { grid-template-columns:1fr; }.public-footer { flex-direction:column; gap:15px; }.calendar-grid { grid-template-columns:repeat(7,145px); }.detail-grid { grid-template-columns:1fr; }.game-card { grid-template-columns:70px 1fr; } }
@media (max-width:500px) { .stats-grid,.form-grid { grid-template-columns:1fr; }.topbar .status-pill { display:none; }.hero h1 { font-size:2.8rem; }.hero-visual { max-width:330px; }.headset { transform:scale(.75); }.booking-form { padding:19px; }.confirmation-card { padding:27px 18px; }.confirmation-details { grid-template-columns:1fr; }.page-heading .button-row { width:100%; }.page-heading .button-row .button { flex:1; }.quick-grid { grid-template-columns:1fr 1fr; } }

/* Customer website */
.customer-site { --primary: var(--site-accent); min-height: 100vh; background: #080d1b; }
.preview-banner { position: sticky; top: 0; z-index: 60; padding: 8px 20px; text-align: center; background: #ffbd5a; color: #251800; font-weight: 800; font-size: .75rem; }
.landing-nav { max-width: 1280px; height: 80px; margin: auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.landing-nav nav { display:flex; align-items:center; gap:22px; color:#b3bdd3; font-size:.82rem; font-weight:700; }.public-theme-slot { display:inline-flex; align-items:center; margin-left:-12px; }.public-theme-slot .theme-toggle { position:static; width:36px; height:36px; color:#c4b8ff; background:rgba(255,255,255,.04); box-shadow:none; }
.site-section { max-width: 1280px; margin: auto; padding: 100px 28px; }
.site-section h2 { font-size: clamp(2.1rem,4vw,4.2rem); line-height: 1.08; }
.site-hero { min-height: 650px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 30px; padding-top: 60px; }
.site-hero-copy { position: relative; z-index: 2; }
.site-hero h1 { max-width: 800px; font-size: clamp(3.4rem,7vw,7.2rem); }
.site-hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px color-mix(in srgb,var(--site-accent) 75%,white); }
.site-hero p { max-width: 620px; font-size: 1.1rem; }
.site-hero-art { aspect-ratio: 1; position: relative; display: grid; place-items: center; background: radial-gradient(circle,color-mix(in srgb,var(--site-accent) 22%,transparent),transparent 62%); }
.site-ring { position: absolute; border: 1px solid color-mix(in srgb,var(--site-accent) 30%,transparent); border-radius: 50%; }
.site-ring.ring-a { inset: 7%; }.site-ring.ring-b { inset: 22%; transform: rotate(35deg); }
.site-headset { width: 245px; height: 120px; border-radius: 45px 45px 60px 60px; background: linear-gradient(145deg,#d3ccff,var(--site-accent) 55%,#232b50); box-shadow: 0 30px 90px color-mix(in srgb,var(--site-accent) 40%,transparent); transform: perspective(500px) rotateX(-7deg) rotateY(-12deg); position: relative; }
.site-headset:before { content:""; position:absolute; width:105px; height:55px; left:-85px; top:28px; border:16px solid color-mix(in srgb,var(--site-accent) 70%,#111); border-right:0; border-radius:35px 0 0 35px; }
.site-headset span { position:absolute; inset:22px 25px; background:linear-gradient(145deg,#101831,#33416e); border-radius:28px; }
.site-section-heading { max-width: 750px; margin-bottom: 35px; }
.site-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.site-feature-grid article { min-height: 230px; padding: 25px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); border-radius: 18px; }
.site-feature-grid article > span { display: block; color: var(--site-accent); font: 700 .75rem "Space Grotesk"; margin-bottom: 65px; }
.site-games { max-width: none; background: #0b1122; border-block: 1px solid var(--line); }
.site-games > * { max-width: 1224px; margin-inline: auto; }
.site-game-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.site-game-grid article { overflow: hidden; background: #11182b; border: 1px solid var(--line); border-radius: 18px; }
.site-game-grid article > div:last-child { padding: 20px; }
.site-game-art { min-height: 180px; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 25% 20%,rgba(95,224,202,.25),transparent 30%),linear-gradient(145deg,color-mix(in srgb,var(--site-accent) 70%,#111),#151d37); font: 700 2rem "Space Grotesk"; }
.site-game-art small { font-size: .65rem; letter-spacing: .12em; }
.site-text { max-width: 900px; text-align: center; }.site-text p { font-size: 1.15rem; }
.site-booking { margin-block: 60px; padding: 55px; border-radius: 25px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: radial-gradient(circle at 80% 20%,rgba(95,224,202,.12),transparent 25%),linear-gradient(145deg,color-mix(in srgb,var(--site-accent) 25%,#11182b),#11182b); border: 1px solid color-mix(in srgb,var(--site-accent) 30%,transparent); }
.site-booking h2 { font-size: clamp(2rem,4vw,3.8rem); }.site-booking p { margin-bottom: 0; }
.site-contact { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.site-contact-links { display: grid; gap: 10px; text-align: right; color: #d3caff; font-weight: 700; }
.landing-footer { max-width: 1280px; margin: auto; border-top: 1px solid var(--line); padding: 30px 28px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .78rem; }
.landing-footer p { margin: 0; }
.offline-shell { min-height: 100vh; display: grid; place-items: center; padding: 25px; background: radial-gradient(circle at 50% 35%,rgba(139,108,255,.15),transparent 35%); }
.offline-card { width: min(650px,100%); padding: 50px; text-align: center; }.offline-icon { width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--primary); font-size: 2rem; }

/* Website builder */
.builder-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.builder-heading h1,.builder-heading p { margin-bottom: 0; }.builder-heading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.publish-state { display: inline-flex; gap: 7px; align-items: center; padding: 8px 11px; color: var(--muted); font-size: .72rem; font-weight: 700; }.publish-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }.publish-state i.online { background: var(--primary-2); box-shadow: 0 0 10px var(--primary-2); }
.builder-error { padding: 12px 15px; margin-bottom: 15px; border-radius: 11px; border: 1px solid rgba(255,107,122,.3); background: rgba(255,107,122,.08); color: #ff9ba5; }
.builder-layout { display: grid; grid-template-columns: 230px minmax(430px,1fr) 260px; gap: 15px; align-items: start; }
.builder-palette,.builder-settings { position: sticky; top: 82px; overflow: hidden; }.builder-workspace { min-height: 700px; overflow: hidden; }
.builder-panel-title { display: flex; align-items: center; gap: 11px; padding: 17px; border-bottom: 1px solid var(--line); }.builder-panel-title > span { color: var(--primary-2); font: 700 .68rem "Space Grotesk"; }.builder-panel-title h2,.builder-panel-title p { margin: 0; }.builder-panel-title h2 { font-size: 1rem; }.builder-panel-title p { font-size: .7rem; }
.block-palette { padding: 10px; display: grid; gap: 6px; }.block-palette button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid transparent; border-radius: 11px; color: var(--text); background: transparent; text-align: left; }.block-palette button:hover { background: var(--surface-2); border-color: rgba(139,108,255,.3); }.block-palette button div { flex: 1; }.block-palette strong,.block-palette small { display: block; }.block-palette strong { font-size: .78rem; }.block-palette small { font-size: .65rem; }.block-palette b { color: var(--primary); font-size: 1rem; }
.block-icon { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: rgba(139,108,255,.12); color: #c4b8ff; font: 700 .85rem "Space Grotesk"; }.hero-icon { background: linear-gradient(145deg,var(--primary),#5940ba); color: white; }
.builder-tip { margin: 6px 10px 12px; padding: 10px; display: flex; gap: 7px; border-radius: 10px; background: rgba(95,224,202,.06); font-size: .67rem; }.builder-tip p { margin: 0; }
.builder-tabs { height: 58px; padding: 0 15px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 4px; }.builder-tabs button { border: 0; border-radius: 8px; padding: 8px 12px; background: transparent; color: var(--muted); font-weight: 700; font-size: .75rem; }.builder-tabs button.active { background: var(--surface-3); color: var(--text); }.builder-tabs > span { margin-left: auto; color: var(--muted); font-size: .62rem; }
.builder-canvas { height: min(72vh,800px); overflow-y: auto; padding: 15px; background: #0c1222; }.builder-block { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); transition: .15s; }.builder-block:hover { border-color: rgba(139,108,255,.35); }.builder-block.dragging { opacity: .4; transform: scale(.98); }.builder-block > header { padding: 11px; display: flex; align-items: center; gap: 9px; }.builder-block > header div:nth-child(3) { flex: 1; }.builder-block > header strong,.builder-block > header small { display: block; }.builder-block > header strong { font-size: .78rem; }.builder-block > header small { font-size: .62rem; }.drag-handle { border: 0; background: transparent; color: var(--muted); cursor: grab; font-size: 1.1rem; }.block-actions { display: flex; gap: 4px; }.block-actions button { width: 27px; height: 27px; border: 0; border-radius: 7px; color: var(--muted); background: var(--surface-2); }.block-actions button:hover { color: white; background: var(--surface-3); }
.block-fields { padding: 0 12px 12px 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.block-fields label { color: var(--muted); font-size: .65rem; font-weight: 700; }.block-fields label:has(textarea),.auto-data-note { grid-column: 1/-1; }.block-fields .input { margin-top: 4px; padding: 8px 9px; font-size: .72rem; }.block-fields textarea { min-height: 58px; }.auto-data-note { padding: 9px; border-radius: 8px; background: rgba(139,108,255,.07); color: #b9aaff; font-size: .66rem; }
.builder-empty { height: 100%; min-height: 500px; display: grid; place-items: center; align-content: center; text-align: center; }.builder-empty > span { font-size: 2rem; color: var(--primary); }.builder-empty h3 { margin: 10px 0 3px; }.builder-empty p { margin: 0; }
.settings-stack { padding: 15px; display: grid; gap: 15px; }.color-control { display: flex; align-items: center; gap: 8px; }.color-control input[type=color] { width: 50px; height: 39px; padding: 3px; }.color-control span { font-family: monospace; color: var(--muted); font-size: .72rem; }
.website-switch { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 11px; cursor: pointer; }.website-switch div { flex: 1; }.website-switch strong,.website-switch small { display: block; }.website-switch strong { font-size: .78rem; }.website-switch small { font-size: .62rem; }.website-switch input { display: none; }.website-switch > span { width: 36px; height: 20px; padding: 3px; border-radius: 99px; background: #414a62; transition: .2s; }.website-switch > span:after { content:""; display: block; width: 14px; height: 14px; border-radius: 50%; background: white; transition: .2s; }.website-switch input:checked + span { background: var(--primary); }.website-switch input:checked + span:after { transform: translateX(16px); }
.publish-info { padding: 13px; border-radius: 11px; background: rgba(95,224,202,.05); border: 1px solid rgba(95,224,202,.1); }.publish-info strong { display: block; margin: 3px 0 8px; font-size: .78rem; }.publish-info p { margin: 0; font-size: .65rem; }.reset-button { width: 100%; padding: 11px; border: 1px solid rgba(255,107,122,.15); border-radius: 11px; display: flex; align-items: center; gap: 9px; text-align: left; color: var(--text); background: rgba(255,107,122,.04); }.reset-button > span { color: var(--danger); font-size: 1.1rem; }.reset-button strong,.reset-button small { display: block; }.reset-button strong { font-size: .72rem; }.reset-button small { font-size: .62rem; }
.builder-preview { height: min(72vh,800px); overflow-y: auto; background: #080d1b; --preview-accent: #8b6cff; color: white; }.builder-preview nav { height: 54px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: .6rem; }.builder-preview nav strong { display: flex; align-items: center; gap: 7px; }.builder-preview nav i { width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center; background: var(--preview-accent); font-style: normal; }.builder-preview nav b,.builder-preview button { padding: 6px 9px; border: 0; border-radius: 6px; background: var(--preview-accent); color: white; font-weight: 700; }.builder-preview section { padding: 45px 35px; border-bottom: 1px solid var(--line); }.builder-preview section > small { color: #67dcc8; letter-spacing: .12em; }.builder-preview h2 { font-size: 1.8rem; margin: 6px 0 10px; }.builder-preview p { font-size: .7rem; }.preview-hero { min-height: 350px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 80% 50%,color-mix(in srgb,var(--preview-accent) 22%,transparent),transparent 30%); }.preview-hero h2 { font-size: 2.8rem; }.preview-hero h2 em { display: block; color: var(--preview-accent); font-style: normal; }.preview-hero button { align-self: flex-start; }.preview-cards,.preview-games { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.preview-cards span,.preview-games span { min-height: 70px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-size: .65rem; }.preview-booking { display:grid; grid-template-columns:minmax(170px,.65fr) minmax(300px,1.35fr); gap:22px; align-items:start; background:color-mix(in srgb,var(--preview-accent) 5%,#080d1b); }.preview-booking-copy > small { color:#67dcc8; font-size:.55rem; letter-spacing:.1em; }.preview-booking-copy em { color:#a89af3; font-size:.55rem; font-style:normal; }.preview-booking-form { padding:18px; display:grid; gap:8px; border:1px solid var(--line); border-radius:12px; background:#11182b; }.preview-booking-form strong { display:flex; gap:6px; font-size:.66rem; }.preview-booking-form strong i { color:#67dcc8; font-style:normal; }.preview-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.preview-form-grid span,.preview-form-wide { min-height:28px; padding:7px 8px; border:1px solid var(--line); border-radius:6px; color:#7f8aa5; background:#0c1222; font-size:.52rem; }.preview-form-wide { min-height:40px; }.preview-booking-form button { width:100%; }.builder-preview footer { padding: 22px; color: var(--muted); font-size: .6rem; text-align: center; }

@media (max-width:1300px) { .builder-layout { grid-template-columns: 210px minmax(400px,1fr); }.builder-settings { position: static; grid-column: 1/-1; }.settings-stack { grid-template-columns: repeat(4,1fr); align-items: end; }.publish-info,.reset-button { min-height: 82px; } }
@media (max-width:950px) { .builder-heading { align-items: flex-start; flex-direction: column; }.builder-heading-actions { justify-content: flex-start; }.builder-layout { grid-template-columns: 1fr; }.builder-palette { position: static; }.block-palette { grid-template-columns: repeat(3,1fr); }.builder-settings { grid-column:auto; }.settings-stack { grid-template-columns: 1fr 1fr; }.site-hero { grid-template-columns:1fr; }.site-hero-art { max-width: 480px; width:100%; margin:auto; }.site-game-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:680px) { .landing-nav nav > a:not(.button) { display:none; }.site-section { padding:65px 20px; }.site-hero h1 { font-size:3rem; }.site-feature-grid,.site-game-grid { grid-template-columns:1fr; }.site-booking,.site-contact { margin-inline:15px; padding:30px 22px; flex-direction:column; align-items:flex-start; }.site-contact-links { text-align:left; }.landing-footer { flex-direction:column; gap:12px; }.block-palette { grid-template-columns:1fr 1fr; }.settings-stack { grid-template-columns:1fr; }.builder-tabs > span { display:none; }.block-fields { padding-left:12px; grid-template-columns:1fr; }.block-fields label { grid-column:1/-1; }.builder-heading-actions .publish-state { width:100%; }.builder-preview section { padding:32px 20px; }.preview-hero h2 { font-size:2rem; } }

/* Employee portal, access control and duty roster */
.employee-overview { display:grid; grid-template-columns:minmax(280px,.75fr) minmax(0,1.4fr); gap:20px; margin-bottom:20px; }
.profile-card { padding:24px; display:grid; grid-template-columns:auto 1fr; gap:15px; align-content:start; }
.profile-avatar { width:58px; height:58px; border-radius:17px; color:white; font-size:1.2rem; }
.profile-card h2,.profile-card p { margin:0; }.profile-card dl { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:12px 0 0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--line); }
.profile-card dl div { min-width:0; padding:13px 10px; background:var(--surface-2); }.profile-card dt { color:var(--muted); font-size:.6rem; line-height:1.25; text-transform:uppercase; letter-spacing:.04em; }.profile-card dd { margin:4px 0 0; font-weight:700; }
.next-shifts { overflow:hidden; }.shift-list { padding:7px 14px; }.shift-row { display:flex; align-items:center; gap:12px; padding:13px 5px; border-bottom:1px solid var(--line); }.shift-row:last-child { border:0; }.shift-row time { width:70px; }.shift-row time strong,.shift-row time small { display:block; }.shift-row time small { font-size:.65rem; }.shift-color { width:3px; height:36px; border-radius:5px; }.employee-self-grid { grid-template-columns:minmax(0,1.5fr) minmax(300px,.65fr); }.employee-self-grid .form-grid { grid-template-columns:1fr; }.unlinked-account { padding:35px; display:flex; align-items:center; gap:20px; }.unlinked-account > span { width:60px; height:60px; display:grid; place-items:center; border-radius:18px; background:rgba(139,108,255,.12); color:#c4b8ff; font-size:1.6rem; }.unlinked-account h2,.unlinked-account p { margin:0; }

.access-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.55fr); gap:16px; align-items:start; }.access-form-column .form-panel { position:static; }.compact-account-form { gap:10px; }.user-access-list { padding:7px 15px; }.user-access-row { display:grid; grid-template-columns:auto minmax(150px,1fr) minmax(380px,1.25fr); gap:12px; align-items:center; padding:14px 5px; border-bottom:1px solid var(--line); }.user-access-row:last-child { border:0; }.user-access-main strong,.user-access-main small { display:block; overflow:hidden; text-overflow:ellipsis; }.user-access-main small { white-space:nowrap; }.user-assignment { display:grid; grid-template-columns:minmax(130px,1fr) auto auto; align-items:center; gap:8px; }.superadmin-note { justify-self:end; padding:8px 11px; border:1px solid rgba(95,224,202,.16); border-radius:10px; background:rgba(95,224,202,.06); }.superadmin-note strong,.superadmin-note small { display:block; }.superadmin-note strong { color:var(--primary-2); font-size:.72rem; }.superadmin-note small { font-size:.62rem; }.compact-switch { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.7rem; cursor:pointer; }.compact-switch input { display:none; }.compact-switch span { width:30px; height:17px; padding:3px; border-radius:99px; background:#414a62; }.compact-switch span:after { content:""; display:block; width:11px; height:11px; border-radius:50%; background:white; transition:.2s; }.compact-switch input:checked + span { background:var(--primary); }.compact-switch input:checked + span:after { transform:translateX(13px); }.password-reset { position:relative; grid-column:3; justify-self:end; }.password-reset summary { color:var(--muted); font-size:.7rem; cursor:pointer; }.password-reset[open] form { position:absolute; right:0; top:28px; z-index:5; width:280px; display:flex; gap:6px; padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); box-shadow:var(--shadow); }.page-subheading { margin:45px 0 18px; }.page-subheading h2,.page-subheading p { margin:0; }.permission-workspace { height:calc(100vh - 276px); min-height:420px; display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; overflow:hidden; }.permission-group-panel,.permission-editor { min-height:0; overflow:hidden; }.permission-group-panel { display:flex; flex-direction:column; }.permission-group-list { min-height:0; padding:9px; display:grid; gap:5px; align-content:start; overflow-y:auto; }.permission-group-link { min-width:0; padding:9px; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:10px; border:1px solid transparent; border-radius:11px; color:var(--muted); }.permission-group-link:hover { color:var(--text); background:rgba(255,255,255,.025); }.permission-group-link.active { color:var(--text); border-color:rgba(139,108,255,.28); background:rgba(139,108,255,.1); }.permission-group-link strong,.permission-group-link small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.permission-group-link strong { font-size:.75rem; }.permission-group-link small { font-size:.61rem; }.permission-group-link.new { margin-top:5px; border-style:dashed; }.group-symbol { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:rgba(139,108,255,.12); color:#c4b8ff; font-weight:700; }.permission-editor { display:flex; flex-direction:column; }.permission-editor .group-form { min-height:0; flex:1; padding:14px 20px 0; display:flex; flex-direction:column; gap:12px; }.group-form label { color:#cdd4e7; font-size:.76rem; font-weight:700; }.group-form label .input { margin-top:6px; }.permission-fields { min-height:0; padding-right:5px; overflow-y:auto; }.group-form fieldset { margin:0; padding:0; border:0; }.group-form legend { width:100%; padding:12px 0 7px; border-top:1px solid var(--line); color:var(--muted); font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.permission-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.permission-check { display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:start; padding:10px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.015); cursor:pointer; }.permission-check input { display:none; }.permission-check > span { width:20px; height:20px; display:grid; place-items:center; border-radius:6px; background:var(--surface-3); color:transparent; }.permission-check input:checked + span { background:var(--primary); color:white; }.permission-check strong,.permission-check small { display:block; }.permission-check strong { font-size:.7rem; }.permission-check small { font-size:.61rem; font-weight:500; line-height:1.35; }.permission-actions { margin:0 -20px; padding:10px 20px 13px; border-top:1px solid var(--line); background:var(--surface); }

.access-layout { height:calc(100vh - 276px); min-height:420px; grid-template-columns:minmax(310px,.85fr) minmax(350px,1.15fr); gap:16px; overflow:hidden; }.user-accounts-panel,.account-form-panel { min-height:0; display:flex; flex-direction:column; overflow:hidden; }.user-access-list { min-height:0; flex:1; padding:6px 14px; overflow-y:auto; }.user-access-row { grid-template-columns:auto minmax(0,1fr) auto; gap:9px 11px; padding:12px 3px; }.user-access-main > div { min-width:0; display:flex; align-items:center; gap:8px; }.user-access-main strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.account-state { display:inline-flex; align-items:center; gap:5px; padding:2px 7px; border-radius:99px; color:var(--danger); background:rgba(255,107,122,.08); font-size:.58rem; font-weight:700; white-space:nowrap; }.account-state i { width:5px; height:5px; border-radius:50%; background:currentColor; }.account-state.active { color:var(--primary-2); background:rgba(95,224,202,.08); }.account-controls { grid-column:2/-1; display:grid; gap:7px; }.user-assignment { grid-template-columns:minmax(120px,1fr) auto; }.account-action-row { display:flex; align-items:center; gap:6px; }.account-action-row form { margin:0; }.account-action { min-height:28px; padding:5px 9px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:transparent; font-size:.65rem; font-weight:700; }.account-action:hover { color:var(--text); background:var(--surface-2); }.account-action.unlock { color:var(--primary-2); border-color:rgba(95,224,202,.2); }.account-action.delete { color:#ff8e99; border-color:rgba(255,107,122,.18); }.password-reset { grid-column:2/-1; justify-self:start; }.password-reset summary { padding:2px 0; }.password-reset[open] form { left:0; right:auto; }.account-form-panel .panel-header,.user-accounts-panel .panel-header { padding:15px 18px; }.account-mode-tabs { margin:12px 16px 0; padding:4px; display:grid; grid-template-columns:1fr 1fr; gap:4px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }.account-mode-tabs a { min-width:0; padding:8px 10px; border-radius:9px; color:var(--muted); }.account-mode-tabs a.active { color:var(--text); background:var(--surface-3); box-shadow:0 6px 15px rgba(1,5,18,.18); }.account-mode-tabs strong,.account-mode-tabs small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.account-mode-tabs strong { font-size:.7rem; }.account-mode-tabs small { font-size:.58rem; }.account-form-panel > .stack-form { min-height:0; flex:1; padding:14px 18px 16px; gap:10px; overflow-y:auto; }.account-create-form .form-field label,.account-existing-form .form-field label { margin-bottom:3px; font-size:.68rem; }.account-create-form .input,.account-existing-form .input { padding:7px 9px; font-size:.73rem; }.account-create-form .form-field small,.account-existing-form .form-field small { margin-top:2px; font-size:.6rem; }.account-create-form .check-row { min-height:36px; align-items:center; }.account-options { align-items:end; }.account-empty { margin:auto; max-width:330px; }.account-empty h3 { margin-bottom:4px; }

.section-tabs { display:flex; gap:8px; margin-bottom:18px; padding:5px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:14px; background:rgba(17,24,43,.72); }.section-tab { min-width:210px; padding:10px 13px; display:flex; align-items:center; gap:10px; border-radius:10px; color:var(--muted); transition:.15s ease; }.section-tab:hover { color:var(--text); background:rgba(255,255,255,.035); }.section-tab.active { color:var(--text); background:var(--surface-3); box-shadow:0 6px 18px rgba(1,5,18,.18); }.section-tab > svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:#c4b8ff; }.section-tab strong,.section-tab small { display:block; }.section-tab strong { font-size:.78rem; }.section-tab small { font-size:.64rem; }.availability-tab-layout { grid-template-columns:minmax(0,1.8fr) minmax(290px,.62fr); gap:16px; }.availability-editor { margin-top:0; }.availability-form { grid-template-columns:1fr; align-items:stretch; }.availability-form > .form-grid { display:grid; }.availability-form > .button { min-height:42px; }.room-card { align-items:flex-start; }.room-list { grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }.form-dialog { width:min(620px,calc(100% - 32px)); max-height:calc(100vh - 32px); padding:0; overflow:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--text); box-shadow:0 30px 100px rgba(0,0,0,.65); }.form-dialog::backdrop { background:rgba(3,6,15,.72); backdrop-filter:blur(5px); }.dialog-close { width:34px; height:34px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--surface-2); font-size:1.25rem; }.availability-room-list { padding:8px 16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); column-gap:20px; }.availability-room { min-width:0; padding:14px 4px; border-bottom:1px solid var(--line); }.availability-room-title { display:flex; align-items:center; gap:11px; }.availability-room-title .resource-symbol { width:38px; height:38px; border-radius:10px; }.availability-room-title h3 { margin:0; }.room-hours { margin-top:11px; display:flex; flex-wrap:wrap; gap:6px; }.room-hours > strong { width:100%; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; }.room-hours > span { display:flex; align-items:center; gap:6px; padding:5px 7px; border-radius:8px; color:#cdd4e7; background:var(--surface-2); font-size:.68rem; }.room-hours form { display:inline; }.room-hours button { width:18px; height:18px; padding:0; border:0; border-radius:5px; color:var(--muted); background:rgba(0,0,0,.2); }

.roster-layout { display:grid; grid-template-columns:minmax(265px,.38fr) minmax(0,1.62fr); gap:16px; align-items:start; }.roster-layout.roster-readonly { grid-template-columns:1fr; }.roster-form-panel { position:sticky; top:20px; width:100%; }.roster-form-panel .panel-header { padding:11px 16px; }.roster-form-panel .panel-header p { font-size:.7rem; }.roster-form { grid-template-columns:1fr; gap:5px; padding:10px 16px 13px; }.roster-form .form-field label { margin-bottom:2px; font-size:.66rem; }.roster-form .input { padding:5px 8px; font-size:.73rem; }.roster-form textarea.input { min-height:38px; resize:none; }.roster-form > .button { margin-top:2px; padding:.55rem .75rem; font-size:.76rem; }.roster-panel { min-width:0; overflow:hidden; }.roster-grid { min-width:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }.roster-day { min-width:0; min-height:440px; border-right:1px solid var(--line); }.roster-day:last-child { border:0; }.roster-day > header { height:57px; padding:9px; border-bottom:1px solid var(--line); }.roster-day > header small,.roster-day > header strong { display:block; }.roster-day > div { padding:6px; display:grid; gap:6px; align-content:start; }.roster-shift { position:relative; min-width:0; display:grid; gap:2px; padding:8px 6px 8px 8px; border-left:3px solid var(--employee-color); border-radius:8px; background:color-mix(in srgb,var(--employee-color) 12%,var(--surface-2)); font-size:.64rem; overflow-wrap:anywhere; }.roster-shift > span { color:#dce1ef; }.roster-shift > small,.roster-shift > a { color:var(--muted); font-size:.57rem; }.roster-shift > a { color:#c4b8ff; }.roster-shift p { margin:3px 0 0; font-size:.57rem; }.roster-shift form { position:absolute; top:4px; right:4px; }.roster-shift form button { width:18px; height:18px; border:0; border-radius:6px; background:rgba(0,0,0,.2); color:var(--muted); }.roster-time { padding-right:17px; color:color-mix(in srgb,var(--employee-color) 70%,white); font-weight:700; }

.service-settings-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(310px,.65fr); gap:16px; align-items:start; max-width:1180px; }.service-settings-layout .panel-header { padding:10px 18px; }.service-form { grid-template-columns:1fr; gap:6px; padding:10px 18px 12px; }.service-form .form-field label { margin-bottom:2px; font-size:.7rem; }.service-form .input { padding:5px 8px; font-size:.78rem; }.service-form > .button { margin-top:1px; padding:.55rem .8rem; }.smtp-fields { display:grid; gap:6px; }.service-status-panel { overflow:hidden; }.credential-list { padding:10px 18px; display:grid; gap:2px; }.credential-list > div { display:flex; align-items:center; gap:11px; padding:12px 2px; border-bottom:1px solid var(--line); }.credential-list > div:last-child { border:0; }.credential-list strong,.credential-list small { display:block; }.credential-list strong { font-size:.78rem; font-family:monospace; }.credential-state { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; color:#ff9ba5; background:rgba(255,107,122,.1); font-weight:800; }.credential-state.configured { color:var(--primary-2); background:rgba(95,224,202,.1); }.pagination { min-height:58px; padding:10px 16px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; border-top:1px solid var(--line); font-size:.75rem; font-weight:700; }.pagination > a:last-child,.pagination > span:last-child { justify-self:end; }.pagination > div { display:flex; align-items:center; gap:4px; }.pagination a,.pagination span { min-width:32px; min-height:32px; padding:6px 9px; display:inline-grid; place-items:center; border-radius:9px; color:var(--muted); }.pagination a:hover,.pagination a.active { color:var(--text); background:var(--surface-3); }.pagination .disabled { opacity:.42; }.billing-search { margin-bottom:16px; }

.error-card { width:min(640px,calc(100% - 40px)); padding:45px; }.error-code { display:block; color:var(--primary); font:700 4rem "Space Grotesk"; line-height:1; }.error-card h1 { font-size:2.2rem; }.error-card p { margin-bottom:25px; }.error-body { min-height:100vh; overflow:hidden; background:radial-gradient(circle at 72% 48%,rgba(139,108,255,.14),transparent 30%),var(--bg); }.not-found-shell { width:min(1180px,calc(100% - 40px)); min-height:100vh; margin:auto; padding:28px 0; display:flex; flex-direction:column; gap:30px; }.not-found-card { min-height:0; flex:1; padding:clamp(28px,5vw,70px); display:grid; grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(28px,6vw,90px); overflow:hidden; }.not-found-visual { position:relative; aspect-ratio:1; display:grid; place-items:center; }.not-found-visual > span { position:absolute; top:4%; left:2%; color:rgba(196,184,255,.1); font:700 clamp(5rem,12vw,10rem) "Space Grotesk"; line-height:1; }.error-orbit { position:absolute; border:1px solid rgba(139,108,255,.25); border-radius:50%; }.error-orbit.orbit-a { inset:8%; }.error-orbit.orbit-b { inset:24%; border-color:rgba(95,224,202,.17); transform:rotate(35deg); }.error-headset { position:relative; width:44%; height:22%; border-radius:28px 28px 38px 38px; background:linear-gradient(145deg,#c7c1ff,#6652d4 55%,#232b50); box-shadow:0 22px 65px rgba(93,68,207,.42); transform:rotate(-8deg); }.error-headset:before { content:""; position:absolute; width:40%; height:45%; left:-31%; top:28%; border:10px solid #5042a5; border-right:0; border-radius:24px 0 0 24px; }.error-headset b { position:absolute; inset:18% 13%; border-radius:20px; background:linear-gradient(145deg,#101831,#33416e); }.not-found-copy { position:relative; z-index:2; }.not-found-copy h1 { max-width:660px; font-size:clamp(2.8rem,5vw,5.2rem); }.not-found-copy p { max-width:590px; margin-bottom:28px; font-size:1.05rem; }

@media (max-width:1180px) { .password-reset[open] form { left:0; right:auto; } }
@media (max-width:980px) { .access-layout { height:auto; min-height:0; grid-template-columns:1fr; overflow:visible; }.user-accounts-panel,.account-form-panel { overflow:visible; }.user-access-list { max-height:520px; }.account-form-panel > .stack-form { overflow:visible; } }
@media (max-width:1100px) { .roster-layout { grid-template-columns:1fr; }.roster-form-panel { position:static; }.roster-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.roster-form > .button { grid-column:1/-1; } }
@media (max-width:900px) { .service-settings-layout { grid-template-columns:1fr; } }
@media (max-width:800px) { .employee-overview,.employee-self-grid { grid-template-columns:1fr; }.permission-workspace { height:auto; min-height:0; grid-template-columns:1fr; overflow:visible; }.permission-group-panel,.permission-editor { overflow:visible; }.permission-group-list { max-height:260px; }.permission-editor .group-form { max-height:none; }.permission-fields { overflow:visible; }.permission-grid { grid-template-columns:1fr; }.profile-card dl { grid-template-columns:1fr; }.user-assignment { grid-template-columns:1fr auto; }.user-assignment .button { grid-column:1/-1; }.availability-form,.roster-form,.blocker-form { grid-template-columns:1fr; }.availability-form > .form-grid { display:grid; grid-template-columns:1fr; }.roster-panel { overflow-x:auto; }.roster-grid { min-width:700px; }.section-tabs { width:100%; }.section-tab { flex:1; min-width:0; }.availability-room-list,.room-list { grid-template-columns:1fr; }.pagination { grid-template-columns:1fr 1fr; }.pagination > div { grid-column:1/-1; grid-row:1; justify-content:center; }.error-card { padding:30px 24px; }.error-card h1 { font-size:1.7rem; } }
@media (max-width:520px) { .user-access-row { grid-template-columns:1fr; }.user-access-row .avatar { display:none; }.user-assignment,.superadmin-note,.password-reset { grid-column:1; }.user-assignment { grid-template-columns:1fr; }.group-form .form-grid { grid-template-columns:1fr; }.unlinked-account { align-items:flex-start; flex-direction:column; } }
@media (max-width:760px) { .error-body { overflow:auto; }.not-found-shell { width:min(100% - 28px,620px); padding:18px 0; gap:18px; }.not-found-card { padding:30px 24px; grid-template-columns:1fr; gap:12px; }.not-found-visual { max-width:310px; width:100%; margin:auto; }.not-found-copy h1 { font-size:2.5rem; }.not-found-copy .button-row { align-items:stretch; flex-direction:column; } }
@media (max-width:700px) { .account-management { grid-column:1; }.account-management .user-assignment,.account-password-form { grid-template-columns:1fr; }.account-action-row { align-items:stretch; flex-direction:column; }.account-action-row form,.account-action-row .account-action { width:100%; } }

/* Theme control */
.theme-toggle { position:fixed; left:18px; bottom:18px; z-index:85; width:34px; height:34px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface-2); box-shadow:0 8px 25px rgba(1,5,18,.2); }.theme-toggle:hover { color:var(--text); border-color:color-mix(in srgb,var(--primary) 50%,var(--line)); }.theme-icon { display:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }html[data-theme-choice="system"] .theme-icon-system,html[data-theme-choice="dark"] .theme-icon-dark,html[data-theme-choice="light"] .theme-icon-light { display:block; }

/* Direct public booking */
.site-booking-direct { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(520px,1.3fr); gap:40px; align-items:start; }.site-booking-copy { position:sticky; top:105px; padding-top:25px; }.site-booking-copy h2 { margin-top:6px; }.site-booking-copy > small { margin-top:20px; color:color-mix(in srgb,var(--site-accent) 65%,var(--muted)); }.site-booking-form { width:100%; box-shadow:0 28px 80px rgba(1,5,18,.25); }.booking-consents { display:grid; gap:5px; padding-top:4px; border-top:1px solid var(--line); }.booking-back-link { font-size:.78rem; }.studio-login-link { opacity:.58; font-size:.7rem; }.studio-login-link:hover { opacity:1; }

/* Marketing pool */
.marketing-segments { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; }.segment-card { min-width:0; padding:15px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }.segment-card > span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#c4b8ff; background:rgba(139,108,255,.12); font:700 .65rem "Space Grotesk"; }.segment-card strong,.segment-card small { display:block; }.segment-card strong { font:700 1.35rem "Space Grotesk"; }.segment-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.marketing-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:16px; align-items:start; }.marketing-contact-list,.campaign-list { padding:7px 14px; }.marketing-contact-list article { display:flex; align-items:center; gap:10px; padding:10px 3px; border-bottom:1px solid var(--line); }.marketing-contact-list article:last-child { border:0; }.campaign-list article { padding:12px 3px; border-bottom:1px solid var(--line); }.campaign-list article:last-child { border:0; }.campaign-list p { margin:4px 0; font-size:.76rem; }.marketing-legal-note { margin:12px 2px 0; font-size:.68rem; }.marketing-filter { display:flex; align-items:center; gap:7px; padding:0 8px; color:var(--muted); white-space:nowrap; font-size:.72rem; }.marketing-filter input { accent-color:var(--primary); }.consent-cell { display:flex; align-items:center; gap:8px; }.consent-cell > div { min-width:125px; }.consent-cell form { flex:0 0 auto; }

/* Light palette */
html[data-theme="light"] { color-scheme:light; --bg:#f4f6fb; --surface:#ffffff; --surface-2:#eef2f8; --surface-3:#e2e8f3; --line:rgba(31,43,68,.13); --text:#182238; --muted:#66738d; --shadow:0 20px 55px rgba(55,68,96,.12); }
html[data-theme="light"] body { background:var(--bg); }html[data-theme="light"] .sidebar { background:#f8f9fd; }html[data-theme="light"] .topbar { background:rgba(244,246,251,.88); }html[data-theme="light"] .panel { background:rgba(255,255,255,.94); }html[data-theme="light"] .input,html[data-theme="light"] .search-bar input { background:#f8f9fc; }html[data-theme="light"] .auth-panel { background:#f7f8fc; }html[data-theme="light"] .auth-brand { background:radial-gradient(circle at 75% 55%,rgba(139,108,255,.13),transparent 35%),linear-gradient(145deg,#eef1fa,#e8ecf7); }html[data-theme="light"] .public-body,html[data-theme="light"] .customer-site { background:var(--bg); }html[data-theme="light"] .site-games { background:#e9edf5; }html[data-theme="light"] .site-game-grid article { background:#fff; }html[data-theme="light"] .site-feature-grid article { background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(237,241,248,.85)); }html[data-theme="light"] .landing-nav nav { color:var(--muted); }html[data-theme="light"] .site-booking-form { background:#fff; }html[data-theme="light"] .booking-section { background:linear-gradient(180deg,#f4f6fb,#e9edf5); }html[data-theme="light"] .availability-panel { background:rgba(255,255,255,.75); }html[data-theme="light"] .confirmation-shell { background:radial-gradient(circle at 50% 35%,rgba(139,108,255,.12),transparent 35%); }html[data-theme="light"] .form-dialog { background:#fff; }html[data-theme="light"] .voucher-card { color:#fff; }html[data-theme="light"] .builder-preview { color:#fff; }html[data-theme="light"] .section-tabs { background:rgba(255,255,255,.7); }

@media (max-width:1000px) { .site-booking-direct { grid-template-columns:1fr; }.site-booking-copy { position:static; padding-top:0; }.marketing-layout { grid-template-columns:1fr; }.marketing-segments { grid-template-columns:1fr 1fr; } }
@media (max-width:680px) { .site-booking-direct { padding-inline:15px; }.marketing-segments { grid-template-columns:1fr; }.marketing-filter { width:100%; order:2; }.search-bar { flex-wrap:wrap; }.search-bar input { min-width:180px; }.admin-body .theme-toggle { bottom:16px; } }

/* Duty roster workspace */
.roster-heading { margin-bottom:14px; }
.roster-workspace { height:calc(100vh - 210px); min-height:540px; display:grid; grid-template-columns:250px minmax(0,1fr); gap:14px; overflow:hidden; }
.roster-workspace.roster-readonly { grid-template-columns:1fr; }
.roster-team-panel,.roster-board-panel { min-height:0; overflow:hidden; }
.roster-team-panel { display:flex; flex-direction:column; }
.roster-team-panel .panel-header { padding:14px 15px; }
.roster-employee-list { min-height:0; flex:1; padding:9px; display:grid; gap:7px; align-content:start; overflow-y:auto; }
.roster-employee { width:100%; min-width:0; padding:10px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:8px; border:1px solid var(--line); border-left:3px solid var(--employee-color); border-radius:11px; color:var(--text); background:var(--surface-2); text-align:left; cursor:grab; }
.roster-employee:hover { border-color:color-mix(in srgb,var(--employee-color) 55%,var(--line)); transform:translateY(-1px); }
.roster-employee.dragging,.roster-shift.dragging { opacity:.42; }
.roster-employee.unavailable { opacity:.62; }
.roster-employee .avatar { width:34px; height:34px; }
.roster-employee-copy { min-width:0; }
.roster-employee-copy strong,.roster-employee-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.roster-employee-copy strong { font-size:.72rem; }
.roster-employee-copy small { margin-top:2px; color:var(--muted); font-size:.6rem; }
.roster-hours { padding:3px 6px; border-radius:7px; color:var(--primary-2); background:rgba(95,224,202,.08); font-size:.58rem; font-weight:800; }
.roster-hours.over { color:#ff9ba5; background:rgba(255,107,122,.09); }
.roster-employee-days { min-width:0; grid-column:2/-1; display:flex; gap:4px; flex-wrap:wrap; }
.roster-employee-days i { padding:2px 5px; border-radius:5px; color:var(--muted); background:rgba(255,255,255,.035); font-size:.54rem; font-style:normal; }
.roster-employee-days i.leave { color:#ffb0b8; background:rgba(255,107,122,.08); }
.roster-drag-hint { margin:0; padding:9px 12px; border-top:1px solid var(--line); color:var(--muted); font-size:.58rem; }
.roster-board-panel { display:flex; flex-direction:column; }
.roster-board-header { min-height:58px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
.roster-board-header strong,.roster-board-header small { display:block; }
.roster-board-header strong { font-size:.78rem; }
.roster-board-header small { margin-top:2px; font-size:.6rem; }
.roster-legend { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.58rem; white-space:nowrap; }
.roster-legend i { width:3px; height:18px; border-radius:99px; background:var(--primary); }
.roster-board-panel .roster-grid { min-height:0; flex:1; overflow-x:auto; }
.roster-board-panel .roster-day { min-height:100%; display:flex; flex-direction:column; }
.roster-day > header { height:52px; padding:8px; display:flex; align-items:center; justify-content:space-between; }
.roster-day-add { width:25px; height:25px; padding:0; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--surface-2); }
.roster-day-add:hover { color:var(--text); border-color:rgba(139,108,255,.35); }
.roster-day > .roster-dropzone { min-height:150px; flex:1; padding:6px; display:grid; gap:6px; align-content:start; transition:.15s; }
.roster-day.drag-over > .roster-dropzone { background:rgba(139,108,255,.08); box-shadow:inset 0 0 0 2px rgba(139,108,255,.3); }
.roster-day.drag-over .day-empty { color:#c4b8ff; }
.roster-shift[draggable="true"] { cursor:grab; }
.roster-dialog { width:min(760px,calc(100% - 30px)); max-height:calc(100vh - 30px); padding:0; overflow:auto; }
.roster-dialog::backdrop { background:rgba(3,7,18,.76); backdrop-filter:blur(4px); }
.roster-dialog-form { padding:0; gap:0; }
.roster-dialog-form > .form-grid,.roster-dialog-form > .form-field { margin:0 20px 12px; }
.dialog-heading { padding:18px 20px 15px; display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--line); margin-bottom:16px; }
.dialog-heading h2,.dialog-heading p { margin:0; }
.dialog-heading p { margin-top:3px; }
.dialog-close { width:32px; height:32px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--surface-2); font-size:1rem; }
.dialog-actions { padding:13px 20px; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--line); }
.account-action.delete-team { color:#ff7583; border-color:rgba(255,107,122,.35); background:rgba(255,107,122,.07); }
.orphaned-employee-action { grid-column:2/-1; margin:0; }
html[data-theme="light"] .roster-employee-days i { background:rgba(31,43,68,.05); }

@media (max-width:1100px) {
  .roster-workspace { height:auto; min-height:0; grid-template-columns:1fr; overflow:visible; }
  .roster-team-panel { max-height:310px; }
  .roster-board-panel { min-height:540px; }
  .roster-board-panel .roster-grid { min-width:760px; }
}
@media (max-width:700px) {
  .roster-heading .button-row { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .roster-heading .button-row a:nth-child(2) { grid-row:2; grid-column:1/-1; }
  .roster-dialog-form > .form-grid { grid-template-columns:1fr; }
}