/* Proview WiFi: matches the Proview app shell (Signage / Bookings / Employee) */
:root {
  --bg: #f4f3ef;
  --panel: #ffffff;
  --ink: #17171c;
  --ink-2: #55555f;
  --ink-3: #8b8b95;
  --line: #e4e2dc;
  --side: #141418;
  --side-ink: #c9c9d1;
  --accent: #4a6cd0;
  --accent-soft: #edf2fd;
  --accent-grad: linear-gradient(135deg, #2f84d4 0%, #5a5fbb 100%);
  --accent-grad-light: linear-gradient(90deg, #62b0ec 0%, #8b88dc 100%);
  --ok: #12a150;
  --warn: #d48a00;
  --bad: #d92d20;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,20,30,.06), 0 4px 16px rgba(20,20,30,.05);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 15px/1.45 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; letter-spacing: -.015em; }
h1 { font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.muted { color: var(--ink-2); }
.hint { color: var(--ink-3); font-size: 12.5px; margin-top: 5px; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.hidden { display: none !important; }
svg.i { width: 18px; height: 18px; flex: none; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; transition: grid-template-columns .15s ease; }
.side { background: var(--side); color: var(--side-ink); padding: 18px 12px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; color: #fff; font-weight: 800; }
.brand-mark { width: 36px; height: 26px; flex: none; background: url(/static/logo.png) center / contain no-repeat; }
/* site picker at the top of the left menu (master admin), like Bookings and Signage */
.side-pick { margin: 0 0 10px; }
.side-pick select { width: 100%; height: 42px; border-radius: 10px; border: 1px solid #2c2c35; background-color: #1f1f25; color: #fff; font: 600 14px var(--font); padding: 0 34px 0 12px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b4b4bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.side-pick select:focus-visible { outline: 2px solid #5a8dee; outline-offset: 2px; }
.side-pick option { color: #141418; background: #fff; }
.side-pick .viewing { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8b8b95; margin: 0 2px 6px; }
.app.collapsed .side-pick { display: none; }
.wordmark { letter-spacing: .04em; font-size: 15px; white-space: nowrap; color: #fff; }
.wordmark b { font-weight: 500; }
.wordmark span { font-weight: 500; background: var(--accent-grad-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.nav a { display: flex; align-items: center; gap: 11px; height: 40px; padding: 9px 12px; border-radius: 9px; color: var(--side-ink); font-size: 15px; font-weight: 550; line-height: 22px; }
.nav a:hover { background: #1f1f25; color: #fff; text-decoration: none; }
.nav a.on { background: #26262e; color: #fff; }
.nav a.on svg { color: var(--accent); }
.nav a .ext { margin-left: auto; width: 14px; height: 14px; opacity: .6; }
.nav-sep { padding: 14px 10px 6px; font-size: 11px; line-height: 15px; text-transform: uppercase; letter-spacing: .08em; color: #6e6e78; }
.side-me { margin: auto 0 8px; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: #1f1f25; border: 1px solid #26262e; color: #fff; min-width: 0; }
a.side-me:hover { background: #25252c; text-decoration: none; }
.side-av, .top-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-grad); color: #fff; font-weight: 700; font-size: 12.5px; line-height: 1; }
.side-me-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.side-me-t b { font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-me-t span { font-size: 11.5px; line-height: 16px; color: #8b8b95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-me > svg { width: 16px; height: 16px; color: #8b8b95; }
.side-foot { display: flex; align-items: center; padding: 4px 2px 0; }
.side-foot form { margin-left: auto; }
.sf-link { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: #8b8b95; letter-spacing: .06em; font: 600 12px var(--font); line-height: 17px; padding: 6px 8px; cursor: pointer; }
.sf-link:hover { color: #fff; }
.sf-link svg { width: 14px; height: 14px; }

.app.collapsed { grid-template-columns: 76px 1fr; }
.app.collapsed .side { padding: 18px 10px 12px; }
.app.collapsed .wordmark, .app.collapsed .nav a > span, .app.collapsed .nav a .ext, .app.collapsed .nav-sep, .app.collapsed .side-me-t, .app.collapsed .side-me > svg, .app.collapsed .sf-link .lbl { display: none; }
.app.collapsed .brand { justify-content: center; padding: 4px 0 18px; }
.app.collapsed .nav a { justify-content: center; padding: 10px 0; }
.app.collapsed .side-me { justify-content: center; padding: 8px 0; background: none; border-color: transparent; }
.app.collapsed .side-foot { flex-direction: column; gap: 4px; }
.app.collapsed .side-foot form { margin: 0; }
.app.collapsed .side-foot .sf-link:first-child svg { transform: rotate(180deg); }

.main-col { min-width: 0; display: flex; flex-direction: column; }
.hdr { display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: var(--panel); border-bottom: 1px solid var(--line); min-height: 62px; position: sticky; top: 0; z-index: 20; }
.hdr h2 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr .sp { flex: 1; }
.icon-btn { background: none; border: 1px solid transparent; border-radius: 10px; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.icon-btn:hover { background: var(--bg); border-color: var(--line); }
.icon-btn svg { width: 20px; height: 20px; }
.pv-dash { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 600 14px var(--font); text-decoration: none; flex: none; white-space: nowrap; }
.pv-dash:hover { background: var(--bg); }
@media (max-width: 700px) { .pv-dash { width: 34px; height: 34px; padding: 0; justify-content: center; } .pv-dash span { display: none; } }
.top-me { display: flex; align-items: center; gap: 4px; margin-left: 8px; flex: none; }
.top-me form { margin: 0; }
.top-me .icon-btn svg { width: 18px; height: 18px; }
a.top-av:hover { filter: brightness(1.08); text-decoration: none; }
.menu-btn { display: none !important; }
.nav-scrim { display: none; }
.main { padding: 22px 22px 48px; max-width: 1280px; width: 100%; }

/* iPad: icon rail */
@media (min-width: 701px) and (max-width: 900px) {
  .app, .app.collapsed { grid-template-columns: 76px 1fr !important; }
  .side { padding: 18px 8px 12px; }
  .app .wordmark, .app .nav-sep, .app .side-me, .app .sf-link .lbl, .app .side-foot .sf-link.collapse, .app .nav a .ext { display: none !important; }
  .app .brand { justify-content: center; padding: 4px 0 14px; }
  .app .nav a { height: 56px; flex-direction: column; justify-content: center; gap: 5px; padding: 0 2px; }
  .app .nav a > span { display: block !important; font-size: 10.5px; line-height: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .app .side-foot { flex-direction: column; margin-top: auto; }
  .app .side-foot form { margin: 0; }
}
/* phones: slide-in menu */
@media (max-width: 700px) {
  .app, .app.collapsed { grid-template-columns: 1fr !important; }
  .side { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; max-width: 86vw; height: 100dvh; z-index: 76; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 10px 0 40px rgba(0,0,0,.35); }
  .app.navopen .side { transform: none; }
  .app.navopen .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(20,20,24,.45); z-index: 75; }
  .app.collapsed .wordmark, .app.collapsed .nav-sep, .app.collapsed .side-me-t { display: revert; }
  .app.collapsed .nav a > span, .app.collapsed .sf-link .lbl { display: inline !important; }
  .app.collapsed .nav a { justify-content: flex-start; padding: 9px 12px; }
  .app.collapsed .brand { justify-content: flex-start; padding: 4px 10px 18px; }
  .side-foot .sf-link.collapse { display: none; }
  .menu-btn { display: grid !important; margin-left: -4px; }
  .hdr { padding: 8px 10px; gap: 2px; min-height: 56px; }
  .hdr h2 { font-size: 16px; flex: 1; }
  .hdr .sp { display: none; }
  .main { padding: 18px 14px 60px; }
}

/* ---------- page parts ---------- */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sub { color: var(--ink-2); margin: 4px 0 0; }
.crumb { font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--ink); text-decoration: none; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; }
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.kpi .l { color: var(--ink-2); font-size: 13px; font-weight: 550; }
.kpi .v { font-size: 28px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.two { grid-template-columns: 2fr 1fr; }
@media (max-width: 1000px) { .two { grid-template-columns: 1fr; } }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
tbody tr:hover td { background: #faf9f6; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: #eeece6; color: var(--ink-2); white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.b-ok { background: #e5f6ec; color: var(--ok); }
.b-warn { background: #fff4dc; color: #a36a00; }
.b-bad { background: #fdecea; color: var(--bad); }
.b-muted { background: #eeece6; color: var(--ink-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 600 14px var(--font); cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #cfccc4; background: #fbfaf8; text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent-grad); border-color: transparent; color: #fff; }
.btn-primary:hover { background: var(--accent-grad); border-color: transparent; filter: brightness(.95); }
.btn-danger { color: var(--bad); }
.btn-danger:hover { background: #fdf0ef; border-color: #f3c7c3; }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], input[type=search], input[type=tel], select, textarea {
  font: 15px var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; width: 100%; min-width: 0;
}
textarea { min-height: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; vertical-align: -3px; }
@media (hover: none) and (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }
.swatch { width: 44px; height: 38px; padding: 2px; border-radius: 9px; border: 1px solid var(--line); background: #fff; }

.flash { background: #ecfdf3; border: 1px solid #b7ebc9; color: #0b6b34; padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; font-weight: 550; }
.error { background: #fef0ef; border: 1px solid #f7c6c2; color: #a3231a; padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.copy { background: #f8f7f4; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; display: block; word-break: break-all; margin-top: 4px; }
.steps { margin: 0; padding-left: 18px; }
.steps li { margin-bottom: 8px; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 130px; padding-top: 8px; }
.bars .b { flex: 1; background: var(--accent-grad); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.bars .b:hover::after { content: attr(data-t); position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px); background: var(--ink); color: #fff; padding: 3px 7px; border-radius: 6px; font-size: 11px; white-space: nowrap; }
.bar-labels { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 11.5px; margin-top: 6px; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; }

/* ---------- sign-in (classic Proview look) ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-art { background: var(--side); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; position: relative; overflow: hidden; }
.auth-art .brand { padding: 0; }
.auth-art h2 { font-size: 40px; line-height: 1.05; max-width: 440px; letter-spacing: -.03em; font-weight: 750; margin: 0; position: relative; z-index: 1; }
.auth-art .foot { color: #9a9aa4; max-width: 320px; position: relative; z-index: 1; }
.auth-form { display: grid; place-items: center; padding: 32px 20px; background: var(--bg); }
.auth-form form { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 34px 32px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 18px 50px -18px rgba(20,20,30,.18); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.auth-logo { height: 64px; width: auto; }
.auth-brand .wordmark { font-size: 20px; letter-spacing: .14em; color: var(--ink); }
.auth-form h1 { font-size: 26px; font-weight: 750; letter-spacing: -.015em; }
.auth-form .sub { margin: -6px 0 4px; }
.auth-form .field label { margin-bottom: 5px; }
.auth-form .btn { height: 44px; width: 100%; }
.or-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-sso { text-decoration: none; }
.btn-sso:hover { background: var(--bg); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 34px; border: 0; background: transparent; color: var(--ink-3); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.pw-eye:hover { color: var(--ink); background: rgba(0,0,0,.05); }
.pw-eye svg { width: 18px; height: 18px; }
/* artwork: phones showing WiFi sign-in pages */
.phones { position: relative; align-self: flex-end; margin: 24px -60px 8px 0; display: flex; gap: 22px; align-items: flex-end; transform: rotate(-6deg); }
.phone { width: 128px; aspect-ratio: 9/19; border-radius: 26px; background: #0d0d10; box-shadow: 0 0 0 7px #26262e, 0 40px 80px rgba(0,0,0,.45); padding: 10px; display: flex; }
.phone:nth-child(2) { width: 148px; margin-bottom: 36px; }
.phone .scr { flex: 1; border-radius: 18px; padding: 18px 12px; display: flex; flex-direction: column; gap: 9px; align-items: stretch; }
.phone .ic { width: 30px; height: 30px; border-radius: 9px; align-self: center; background: rgba(255,255,255,.85); display: grid; place-items: center; }
.phone .ic svg { width: 18px; height: 18px; }
.phone .t { height: 9px; border-radius: 5px; background: rgba(255,255,255,.9); width: 80%; align-self: center; }
.phone .t2 { height: 6px; border-radius: 4px; background: rgba(255,255,255,.55); width: 60%; align-self: center; margin-bottom: 6px; }
.phone .in { height: 20px; border-radius: 7px; background: rgba(255,255,255,.92); }
.phone .go { height: 22px; border-radius: 7px; background: #141418; margin-top: 4px; }
@media (max-width: 820px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-form { padding: 24px 14px; align-content: start; }
  .auth-form form { padding: 26px 20px; border-radius: 18px; margin-top: 4vh; }
  .auth-logo { height: 52px; }
  .auth-brand .wordmark { font-size: 17px; }
}
@media (max-height: 760px) { .phone { width: 104px; } .phone:nth-child(2) { width: 120px; } .auth-art h2 { font-size: 34px; } }

/* ---------- marketing: shared bits ---------- */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state h2 { margin-bottom: 6px; }
.empty-state .btn { margin-top: 14px; }
.modal { border: 0; border-radius: 18px; padding: 24px; width: min(560px, calc(100vw - 28px)); box-shadow: 0 30px 80px rgba(0,0,0,.3); color: var(--ink); }
.modal::backdrop { background: rgba(20,20,24,.5); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.icon-x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 0 4px; }
.icon-x:hover { color: var(--ink); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tpl { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 13px; }
.tpl:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tpl input { position: absolute; opacity: 0; pointer-events: none; }
.tpl b { font-size: 14px; }
.tpl-art { height: 74px; border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; justify-content: center; margin-bottom: 4px; }
.tpl-art i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.85); }
.tpl-art i:nth-child(1) { width: 70%; height: 9px; } .tpl-art i:nth-child(2) { width: 90%; opacity: .7; } .tpl-art i:nth-child(3) { width: 40%; height: 14px; }
.progress { height: 8px; border-radius: 99px; background: #eeece6; overflow: hidden; margin-top: 10px; }
.progress > div { height: 100%; background: var(--accent-grad); transition: width .3s; }
.radio { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 8px 0; cursor: pointer; }
.radio input { margin-top: 2px; flex: none; }
.send-sum { display: grid; gap: 8px; background: #f8f7f4; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 6px 0 14px; }
.send-sum div { display: flex; gap: 12px; } .send-sum span { width: 64px; flex: none; }
.seg { display: inline-flex; background: #ebe9e3; border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; font: 600 13px var(--font); color: var(--ink-2); padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* ---------- marketing: designer ---------- */
.dz-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.dz-title { flex: 1; min-width: 240px; }
.dz-name { font: 650 21px var(--font) !important; letter-spacing: -.01em; border: 1px solid transparent !important; background: transparent !important; padding: 4px 8px !important; margin-left: -8px; max-width: 520px; }
.dz-name:hover { border-color: var(--line) !important; background: #fff !important; }
.dz-save { font-size: 13px; min-width: 110px; text-align: right; }
.dz-save.err-t { color: var(--bad); }
.dz { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .dz { grid-template-columns: 1fr; } }
.dz-side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 78px; max-height: calc(100vh - 96px); overflow: auto; }
@media (max-width: 1100px) { .dz-side { position: static; max-height: none; } }
.tabs { display: flex; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; }
.tabs button { flex: 1; border: 0; background: none; font: 600 14px var(--font); color: var(--ink-2); padding: 13px 8px 11px; border-bottom: 2px solid transparent; cursor: pointer; position: relative; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.tabs .dot { position: absolute; top: 10px; margin-left: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); display: inline-block; }
.tab { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.blocks { display: flex; flex-direction: column; gap: 6px; }
.blk-empty { border: 2px dashed var(--line); border-radius: 10px; padding: 18px; text-align: center; color: var(--ink-3); font-size: 14px; }
.blk { border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .12s, box-shadow .12s; }
.blk:hover { border-color: #cfccc4; }
.blk.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.blk.dragging { opacity: .4; }
.blk.drop-before { box-shadow: 0 -3px 0 var(--accent); } .blk.drop-after { box-shadow: 0 3px 0 var(--accent); }
.blk-h { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 6px; cursor: pointer; }
.blk-h svg { width: 16px; height: 16px; }
.grip { color: var(--ink-3); cursor: grab; display: grid; place-items: center; padding: 2px; }
.blk-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.blk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.blk-t b { font-size: 13.5px; } .blk-s { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-a { display: flex; gap: 0; opacity: .55; } .blk:hover .blk-a, .blk.open .blk-a { opacity: 1; }
.blk-a button { border: 0; background: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; padding: 0; }
.blk-a button:hover:not(:disabled) { background: var(--bg); color: var(--ink); }
.blk-a button:disabled { opacity: .3; cursor: default; }
.blk-a button[data-a=del]:hover { color: var(--bad); background: #fdf0ef; }
.blk-b { border-top: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 12px; background: #fcfbf9; border-radius: 0 0 10px 10px; }
.blk-b textarea { min-height: 120px; }
.blk-b .seg { display: flex; } .blk-b .seg button { flex: 1; }
.chk { display: flex !important; gap: 8px; align-items: center; font-weight: 500 !important; color: var(--ink) !important; cursor: pointer; }
.hexin { max-width: 110px; }
.rt-bar { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.rt-bar button { border: 1px solid var(--line); background: #fff; border-radius: 7px; height: 28px; padding: 0 9px; font: 600 12.5px var(--font); color: var(--ink-2); cursor: pointer; }
.rt-bar button:hover { color: var(--ink); border-color: #cfccc4; }
.img-f img { display: block; max-width: 100%; max-height: 120px; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--line); background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.img-f .up { position: relative; cursor: pointer; flex: none; }
.add-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; margin-top: 4px; }
.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.palette button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; font: 600 11.5px var(--font); color: var(--ink-2); cursor: pointer; }
.palette button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.palette svg { width: 20px; height: 20px; }
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.presets button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 6px; font: 600 12px var(--font); color: var(--ink-2); cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.presets button:hover { border-color: var(--accent); }
.presets span { height: 34px; border-radius: 6px; position: relative; display: block; }
.presets i { position: absolute; left: 18%; right: 18%; top: 6px; bottom: 0; border-radius: 4px 4px 0 0; }
.presets b { position: absolute; left: 36%; right: 36%; bottom: 7px; height: 6px; border-radius: 3px; }
.site-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.site-opt { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; cursor: pointer; }
.site-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.audience { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.dz-stage { min-width: 0; }
.inbox { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.inbox-av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-grad); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.inbox-t { min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.inbox-t > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; transition: max-width .2s; max-width: 100%; margin: 0 auto; }
.frame-wrap.mobile { max-width: 390px; border-radius: 28px; border: 8px solid #141418; }
.frame-wrap iframe { width: 100%; height: 700px; border: 0; display: block; }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none !important; }
.chip-bk { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.bk-opt { margin-top: 10px; padding: 10px 12px; border: 1px dashed #c9d6f5; border-radius: 10px; background: #f8faff; }

/* phones: a compact icon menu always on the left (same on all Proview apps) */
@media (max-width:700px){
html .app{grid-template-columns:60px minmax(0,1fr)!important}
html .app .side,html .app.navopen .side{position:sticky!important;top:0!important;left:auto!important;transform:none!important;width:60px!important;min-width:60px!important;max-width:60px!important;height:100vh!important;height:100dvh!important;z-index:20!important;padding:10px 5px calc(10px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overflow-x:hidden!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;grid-row:1/-1}
html .menu-btn,html .nav-scrim,html #navScrim{display:none!important}
html .side .brand{justify-content:center!important;padding:2px 0 10px!important;margin:0!important;gap:0!important;width:auto!important}
html .side .brand .wordmark,html .side .brand>span:not(.brand-mark):not(.pv-mark){display:none!important}
html .side .brand svg,html .side .brand img,html .side .brand .brand-mark,html .side .brand .pvlogo{width:32px!important;height:23px!important;margin:0 auto!important}
html .side .pv-viewing,html .side .side-pick .viewing,html .side .side-pick noscript,html .side .sp-title,html .side .nav-sec,html .side .nav-sep,html .side .nav .nav-group-h,html .side .side-me,html .side .side-foot{display:none!important}
html .side #sitePick,html .side #orgPick,html .side .client-pick,html .side .side-pick{display:block!important;margin:0 0 8px!important;padding:0!important;position:relative}
html .side #sitePick select,html .side #orgPick select,html .side .client-pick select,html .side .side-pick select{width:50px!important;height:40px!important;min-width:0!important;padding:0!important;margin:0 auto!important;display:block;color:transparent!important;text-indent:-999px;font-size:16px!important;border-radius:10px!important;background-position:center!important;background-size:18px 18px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d9d9e0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 9h1M14 9h1M9 13h1M14 13h1M10 21v-4h4v4'/%3E%3C/svg%3E")!important}
html .side .nav{gap:0!important;row-gap:0!important;flex:1 1 auto;overflow:visible!important}
html .side .nav>button:not(.nav-more),html .side .nav>a{height:52px!important;min-height:0!important;width:100%!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:4px!important;padding:0 1px!important;margin:0!important;border-radius:9px!important}
html .side .nav>button svg,html .side .nav>a svg{width:18px!important;height:18px!important;margin:0!important;flex:none}
html .side .nav .lbl,html .side .nav .cnt,html .side .nav .badge-n{display:none!important}
html .side .nav .slbl,html .side .nav>a>span:not(.bell-dot):not(.cnt){display:block!important;font-size:10px!important;line-height:12px!important;font-weight:500!important;letter-spacing:-.1px!important;text-transform:none!important;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:54px;margin:0!important}
html .side .nav .nav-group .rail-ic{display:block!important}html .side .nav .nav-group svg:not(.rail-ic){display:none!important}
}

/* =====================================================================
   Proview menu: one spec for Bookings, Employee, Signage and WiFi
   (measured from Proview Signage; keep the four sites identical)
   ===================================================================== */
@media (min-width: 701px) {
  .app { grid-template-columns: 236px 1fr; }
  .side { padding: 0 !important; gap: 0 !important; }
  .side .brand { padding: 18px 10px 14px 14px !important; gap: 10px !important; font-weight: 500 !important; justify-content: flex-start !important; }
  .side .brand-mark { width: 36px !important; height: 26px !important; }
  .side .wordmark { font-size: 15px !important; letter-spacing: .04em !important; font-weight: 500 !important; }
  .side-pick { margin: 0 14px 12px !important; }
  .side-pick .viewing { margin: 0 2px 6px !important; font-size: 11px !important; line-height: 15px !important; letter-spacing: .06em !important; }
  .side-pick select { height: 42px !important; font: 600 14px var(--font) !important; }
  .side .nav { flex: 1; padding: 6px 10px !important; display: block !important; }
  .side .nav-sep { padding: 10px 10px 3px !important; margin: 0 !important; font-size: 11px !important; line-height: 13px !important; letter-spacing: .08em !important; color: #6e6e78 !important; }
  .side .nav a { height: 30px !important; padding: 0 12px !important; gap: 10px !important; font-size: 14px !important; font-weight: 550 !important; line-height: 22px !important; border-radius: 9px !important; }
  .side .nav a svg { width: 16px !important; height: 16px !important; flex: none; }
  .side .nav a .ext { width: 14px !important; height: 14px !important; }
  /* the profile and sign-out live in the top bar, like the other Proview sites */
  .side .side-me, .side .side-foot form { display: none !important; }
  .side .side-foot { display: flex !important; padding: 0 10px 14px !important; margin-top: auto; gap: 6px; }
  .side .sf-link.collapse { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 8px !important; border-radius: 9px; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .06em !important; color: #8b8b95 !important; background: none; border: 0; }
  .side .sf-link.collapse svg { width: 14px; height: 14px; }
}
/* collapsed menu (desktop): 72px icon rail, logo 18,22, first button 72px down */
@media (min-width: 901px) {
  .app.collapsed { grid-template-columns: 72px 1fr !important; }
  .app.collapsed .side .brand { justify-content: flex-start !important; padding: 22px 0 18px 18px !important; }
  .app.collapsed .side .wordmark, .app.collapsed .side-pick, .app.collapsed .side .nav-sep, .app.collapsed .side .nav a > span, .app.collapsed .side .nav a .ext, .app.collapsed .sf-link .lbl, .app.collapsed .sf-link span { display: none !important; }
  .app.collapsed .side .nav { padding: 6px 0 !important; }
  .app.collapsed .side .nav a { width: 32px; margin: 0 auto; padding: 0 !important; justify-content: center; }
  .app.collapsed .side .side-foot { justify-content: center !important; padding: 0 0 32px !important; }
  .app.collapsed .side .sf-link.collapse { width: 30px !important; height: 26px !important; padding: 0 !important; justify-content: center !important; }
  .app.collapsed .side .sf-link.collapse svg { transform: rotate(180deg); }
}
/* iPad (701-900px): 72px rail, 52 x 56 buttons with an 18px icon and a short label */
@media (min-width: 701px) and (max-width: 900px) {
  .app, .app.collapsed { grid-template-columns: 72px 1fr !important; }
  .app .side .brand { justify-content: center !important; padding: 18px 0 14px !important; gap: 0 !important; }
  .app .side .wordmark, .app .side-pick, .app .side .nav-sep, .app .side .nav a .ext, .app .side .side-foot, .app .side .nav a > span.lbl { display: none !important; }
  .app .side .nav { padding: 6px 10px !important; display: block !important; }
  .app .side .nav a { width: 52px !important; height: 56px !important; margin: 0 !important; padding: 0 2px !important; gap: 5px !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; border-radius: 9px !important; box-sizing: border-box !important; }
  .app .side .nav a svg { width: 18px !important; height: 18px !important; margin: 0 !important; }
  .app .side .nav a > span.slbl { display: block !important; font-size: 10.5px !important; line-height: 12px !important; font-weight: 500 !important; letter-spacing: -.1px !important; max-width: 64px; white-space: nowrap; text-align: center; }
}
/* phones: no flex gap between logo, site picker and menu (same as Signage) */
@media (max-width: 700px) { html .app .side { gap: 0 !important; } }

/* Proview menu on phones: one spec for Bookings, Employee, Signage and WiFi
   (60px rail; every button 50 x 52 with an 18px icon and a 10px label) */
@media (max-width:700px){
 html .side .nav{padding:0!important;display:flex!important;flex-direction:column!important;align-items:center!important}
 html .side .nav>button:not(.nav-more),html .side .nav>a{width:50px!important;min-width:0!important;max-width:50px!important;height:52px!important;margin:0 auto!important;padding:0 1px!important;border-radius:9px!important;gap:4px!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;box-sizing:border-box!important}
 html .side .nav>button svg,html .side .nav>a svg{width:18px!important;height:18px!important;margin:0!important;flex:none}
 html .side .nav>a .ext{display:none!important}
 html .side .nav .slbl,html .side .nav>a>span:not(.bell-dot):not(.cnt){display:block!important;font-size:10px!important;line-height:12px!important;font-weight:500!important;letter-spacing:-.1px!important;max-width:58px!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap;text-align:center}
}

/* short menu labels for the phone rail (desktop shows the full label) */
.side .nav a > span.slbl { display: none; }
@media (max-width:700px){ html body .side .nav > a > span.lbl.lbl { display: none !important; } }