/* OWL9 Control: owl9.com look. White, ink text, light grey lines, orange accent, Inter, small uppercase tracked labels. */
:root {
  --bg: #ffffff; --bg-2: #fafafa; --bg-3: #f4f4f4;
  --ink: #141414; --text: #262626; --muted: #737373; --dim: #a3a3a3;
  --line: #e6e6e6; --line-2: #d4d4d4;
  --accent: #f97015; --accent-soft: #fff1e6; --accent-ink: #b84d06;
  --pink: #e91e8c; --purple: #9d50dd; --cyan: #22d3ee;
  --grad: linear-gradient(100deg, var(--pink), var(--purple), var(--cyan));
  --ok: #15803d; --ok-soft: #e8f6ec; --bad: #c81e1e; --bad-soft: #fdecec;
  --t-small: #0891b2; --t-standard: #7c3aed; --t-vip: #f97015;
  --radius: 12px; --radius-sm: 8px;
  --shadow: 0 18px 50px rgba(20, 20, 20, .12);
  --track: .16em;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100% }
body { font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.5; font-size: 14px; min-height: 100vh }
a { color: var(--ink) }
b, strong { color: var(--ink); font-weight: 600 }
[hidden] { display: none !important }
button, input, select, textarea { font: inherit; color: inherit }
::selection { background: var(--accent-soft) }

.kicker, .lbl, th { font-size: 10.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); font-weight: 500 }
.muted { color: var(--muted) }
.dim { color: var(--dim) }
.num { font-variant-numeric: tabular-nums }
.sp { flex: 1 }
.row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap }
.stack > * + * { margin-top: .9rem }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
.top .in { max-width: 1440px; margin: 0 auto; padding: .65rem clamp(1rem, 3vw, 1.6rem); display: flex; align-items: center; gap: 1.2rem }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); flex-shrink: 0 }
.brand img { width: 30px; height: 30px }
.brand .word { font-weight: 600; letter-spacing: .2em; font-size: 12px }
.brand .portal { font-size: 10px; letter-spacing: .2em; color: var(--muted); border-left: 1px solid var(--line); padding-left: .55rem }
.nav { display: flex; gap: 1.4rem; overflow-x: auto; scrollbar-width: none }
.nav a { font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; color: var(--muted); padding: .35rem 0; border-bottom: 2px solid transparent; white-space: nowrap }
.nav a:hover { color: var(--ink) }
.nav a.on { color: var(--ink); border-bottom-color: var(--accent) }
.who { display: flex; align-items: center; gap: .7rem; font-size: 12px; color: var(--muted); flex-shrink: 0 }
.who .name { color: var(--ink); font-weight: 500 }
.who .role { font-size: 9.5px; letter-spacing: var(--track); text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem }
.lang-switch { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden }
.lang-switch button { border: 0; background: none; font-size: 10px; letter-spacing: .12em; padding: .25rem .55rem; cursor: pointer; color: var(--muted) }
.lang-switch button.on { background: var(--ink); color: #fff }
.linkbtn { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px }
.linkbtn:hover { color: var(--ink) }

main.wrap { max-width: 1440px; margin: 0 auto; padding: 1.4rem clamp(1rem, 3vw, 1.6rem) 4rem }
.page-head { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem }
.page-head h1 { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; line-height: 1.15 }
.page-head .sub { color: var(--muted); margin-top: .2rem }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid var(--ink); background: var(--ink); color: #fff; border-radius: var(--radius-sm);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; padding: .62rem 1rem; cursor: pointer; text-decoration: none; white-space: nowrap; transition: opacity .15s, background .15s }
.btn:hover { opacity: .88 }
.btn:disabled { opacity: .4; cursor: not-allowed }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line-2) }
.btn.ghost:hover { border-color: var(--ink); opacity: 1 }
.btn.accent { background: var(--accent); border-color: var(--accent) }
.btn.danger { background: #fff; color: var(--bad); border-color: #f3c2c2 }
.btn.live { background: var(--grad); border: 0; padding: .68rem 1.05rem }
.btn.sm { padding: .42rem .7rem; font-size: 10px }
.btn.block { width: 100% }
.btn .ic { font-size: 13px; letter-spacing: 0 }

.in, select.in, textarea.in { width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; padding: .58rem .7rem; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s }
.in:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 20, 20, .06) }
textarea.in { min-height: 84px; resize: vertical }
.field { display: grid; gap: .35rem }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem }
.check { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: 13px }
.check input { width: 16px; height: 16px; accent-color: var(--ink) }
.err { color: var(--bad); font-size: 13px; min-height: 1em }
.err:empty { display: none }

.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; background: #fff }
.seg button { border: 0; background: none; padding: .5rem .8rem; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: pointer; border-right: 1px solid var(--line) }
.seg button:last-child { border-right: 0 }
.seg button.on { background: var(--ink); color: #fff }

.chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line-2); border-radius: 999px; padding: .28rem .7rem; font-size: 12px; background: #fff; cursor: pointer; color: var(--text); white-space: nowrap }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink) }
.chip .x { border: 0; background: none; cursor: pointer; color: inherit; opacity: .7; font-size: 14px; line-height: 1 }
.chip.active { background: var(--accent-soft); border-color: #fbd1b0; color: var(--accent-ink) }

.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; padding: .18rem .55rem; border: 1px solid var(--line); color: var(--muted); background: #fff; white-space: nowrap }
.badge.live { background: var(--grad); color: #fff; border: 0 }
.badge.overrun, .badge.overran { background: var(--accent); color: #fff; border-color: var(--accent) }
.badge.due, .badge.upcoming { color: var(--ink); border-color: var(--line-2) }
.badge.next { color: var(--ink) }
.badge.free { color: var(--ok); border-color: #bfe3c9; background: var(--ok-soft) }
.badge.noshow { color: var(--bad); border-color: #f3c2c2; background: var(--bad-soft) }
.badge.completed { color: var(--ok); border-color: #bfe3c9 }
.badge.autoclosed { color: var(--accent-ink); border-color: #fbd1b0; background: var(--accent-soft) }
.badge.cancelled, .badge.maintenance { color: var(--dim); text-decoration: line-through }
.badge.maintenance { text-decoration: none; background: var(--bg-3) }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: currentColor }
.badge.live .dot { animation: pulse 1.4s ease-in-out infinite; background: #fff }
@keyframes pulse { 50% { opacity: .35 } }
.type-small { --tc: var(--t-small) } .type-standard { --tc: var(--t-standard) } .type-vip { --tc: var(--t-vip) }

.card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff }
.empty { padding: 2.4rem 1rem; text-align: center; color: var(--muted) }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius) }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px }
.tbl th { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); background: var(--bg-2); white-space: nowrap; position: sticky; top: 0 }
.tbl th.sortable { cursor: pointer }
.tbl th.sortable:hover { color: var(--ink) }
.tbl th .arrow { color: var(--accent) }
.tbl td { padding: .62rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top }
.tbl tr:last-child td { border-bottom: 0 }
.tbl tr.click { cursor: pointer }
.tbl tr.click:hover td { background: var(--bg-2) }
.tbl td.r, .tbl th.r { text-align: right }
mark { background: #ffe2c9; color: var(--ink); border-radius: 2px; padding: 0 1px }

/* ---------- toasts, modal, side panel ---------- */
.toasts { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: .5rem; width: min(92vw, 420px) }
.toast { background: var(--ink); color: #fff; border-radius: 10px; padding: .75rem 1rem; font-size: 13px; box-shadow: var(--shadow); transition: opacity .4s, transform .4s }
.toast.bad { background: var(--bad) }
.toast.out { opacity: 0; transform: translateY(8px) }

.scrim { position: fixed; inset: 0; background: rgba(20, 20, 20, .28); z-index: 60; animation: fade .15s }
@keyframes fade { from { opacity: 0 } }
.modal { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 440px); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem }
.modal h3 { font-size: 17px; color: var(--ink); font-weight: 600; margin-bottom: .9rem }
.modal .actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem }

.panel { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(100vw, 460px); background: #fff; border-left: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column; animation: slide .2s ease-out }
@keyframes slide { from { transform: translateX(24px); opacity: 0 } }
.panel-head { display: flex; align-items: flex-start; gap: .8rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line) }
.panel-head h2 { font-size: 18px; color: var(--ink); font-weight: 600; line-height: 1.3 }
.panel-head .close { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); margin-left: auto }
.panel-body { flex: 1; overflow-y: auto; padding: 1.2rem }
.panel-foot { padding: .9rem 1.2rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; flex-wrap: wrap }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: .45rem .8rem; font-size: 13.5px }
.kv dt { font-size: 10.5px; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); padding-top: .15rem }
.kv dd { color: var(--ink) }
.history { border-top: 1px solid var(--line); margin-top: 1.2rem; padding-top: 1rem; font-size: 12.5px; color: var(--muted); display: grid; gap: .4rem }
.clashes { background: var(--bad-soft); border: 1px solid #f3c2c2; border-radius: var(--radius-sm); padding: .7rem .8rem; font-size: 13px; color: var(--bad) }
.clashes li { margin-left: 1rem }
.date-chips { display: flex; flex-wrap: wrap; gap: .35rem }

/* ---------- login ---------- */
body.auth { background: var(--bg-2) }
body.auth main { min-height: calc(100vh - 120px); display: grid; place-items: center; padding: 2rem 1rem }
.auth .card { width: min(92vw, 400px); padding: 2rem 1.8rem; text-align: left }
.auth .hero { text-align: center; margin-bottom: 1.2rem }
.auth .hero img { width: 84px; height: 84px }
.auth .hero .kicker { margin-top: .6rem }
.auth h2 { font-size: 20px; color: var(--ink); font-weight: 600; margin-bottom: .3rem }
.auth form > * + * { margin-top: .8rem }
.auth .code-input { font-size: 26px; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums }
.auth .help { font-size: 12px; color: var(--muted); margin-top: 1.2rem; text-align: center }
.auth .row { justify-content: space-between }
.foot { text-align: center; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); padding: 1.4rem }

/* ---------- now board ---------- */
.now-summary { display: flex; gap: .5rem; flex-wrap: wrap }
.now-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem }
.studio-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1rem .95rem; background: #fff; display: flex; flex-direction: column; gap: .55rem; min-height: 178px; overflow: hidden }
.studio-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tc, var(--line)) }
.studio-card.live { border-color: transparent; box-shadow: 0 0 0 1.5px var(--purple), 0 12px 30px rgba(157, 80, 221, .12) }
.studio-card.live::before { background: var(--grad); height: 4px }
.studio-card.overrun { box-shadow: 0 0 0 1.5px var(--accent) }
.studio-card.maintenance { background: var(--bg-2); opacity: .75 }
.studio-card .name { font-weight: 600; color: var(--ink); font-size: 15px }
.studio-card .meta { font-size: 11px; color: var(--muted); letter-spacing: .04em }
.studio-card .what { font-size: 13px; color: var(--text); line-height: 1.4 }
.studio-card .what b { display: block; font-size: 14px }
.studio-card .timer { font-size: 26px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.studio-card .actions { margin-top: auto; display: flex; gap: .4rem; flex-wrap: wrap }
.studio-card .actions .btn { flex: 1 }

/* ---------- calendar ---------- */
.cal-toolbar { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .8rem }
.cal-toolbar .date-label { font-size: 18px; font-weight: 600; color: var(--ink); min-width: 200px }
.cal-toolbar .search { position: relative; flex: 1; min-width: 180px; max-width: 320px }
.cal-toolbar .search .in { padding-left: 2rem }
.cal-toolbar .search::before { content: "⌕"; position: absolute; left: .7rem; top: 50%; transform: translateY(-52%); color: var(--muted); font-size: 16px }
.filters { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; margin-bottom: .8rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; background: var(--bg-2) }
.filters .chips { display: flex; flex-wrap: wrap; gap: .35rem }
.active-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; align-items: center }
.ms { position: relative }
.ms-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 240px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .4rem }
.ms-pop label { display: flex; gap: .5rem; align-items: center; padding: .35rem .45rem; border-radius: 6px; cursor: pointer; font-size: 13px }
.ms-pop label:hover { background: var(--bg-2) }

.cal-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin: .6rem 0 0 }
.cal-legend span { display: inline-flex; align-items: center; gap: .35rem }
.cal-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block }

/* Day timeline: rows = studios, columns = 30 min */
.day { --col: 34px; --row: 54px; --label: 150px; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 240px); position: relative; background: #fff }
.day-inner { position: relative; width: calc(var(--label) + var(--cols) * var(--col)) }
.day-head { position: sticky; top: 0; z-index: 6; display: flex; background: #fff; border-bottom: 1px solid var(--line); height: 34px }
.day-head .corner { position: sticky; left: 0; z-index: 7; width: var(--label); flex-shrink: 0; background: #fff; border-right: 1px solid var(--line) }
.day-head .h { width: calc(var(--col) * 2); flex-shrink: 0; font-size: 10.5px; color: var(--muted); padding: .55rem 0 0 .35rem; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums }
.day-row { display: flex; height: var(--row); border-bottom: 1px solid var(--line) }
.day-row:last-child { border-bottom: 0 }
.day-row .label { position: sticky; left: 0; z-index: 5; width: var(--label); flex-shrink: 0; background: #fff; border-right: 1px solid var(--line); padding: .5rem .7rem; display: flex; flex-direction: column; justify-content: center; border-left: 3px solid var(--tc) }
.day-row .label b { font-size: 13px; font-weight: 600 }
.day-row .label span { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.day-row .lane { position: relative; flex: 1; cursor: crosshair; touch-action: pan-x pan-y;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--col) - 1px), #f2f2f2 calc(var(--col) - 1px) var(--col)),
    repeating-linear-gradient(90deg, transparent 0 calc(var(--col) * 2 - 1px), var(--line) calc(var(--col) * 2 - 1px) calc(var(--col) * 2)) }
.day-row.off .lane { background-color: var(--bg-3); cursor: not-allowed }
.core { position: absolute; top: 0; bottom: 0; background: rgba(249, 112, 21, .045); border-left: 1px dashed #fbd1b0; border-right: 1px dashed #fbd1b0; pointer-events: none }
.sel { position: absolute; top: 4px; bottom: 4px; background: rgba(249, 112, 21, .18); border: 1.5px dashed var(--accent); border-radius: 6px; pointer-events: none; z-index: 3 }
.now-line { position: absolute; top: 34px; bottom: 0; width: 2px; background: var(--accent); z-index: 4; pointer-events: none }
.now-line::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent) }

.bk { position: absolute; top: 5px; bottom: 5px; border-radius: 7px; background: var(--ink); color: #fff; padding: .3rem .5rem; font-size: 11.5px; line-height: 1.25; overflow: hidden; cursor: pointer; z-index: 2;
  border-left: 3px solid var(--tc, var(--ink)); box-shadow: 0 1px 0 rgba(0, 0, 0, .04); transition: transform .1s, box-shadow .1s }
.bk:hover { box-shadow: 0 6px 18px rgba(20, 20, 20, .18); z-index: 3 }
.bk b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: inherit }
.bk span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .75; font-size: 10.5px }
.bk.live { background: var(--grad); border-left-color: #fff }
.bk.overran, .bk.autoclosed { background: #3a3a3a; border-left-color: var(--accent) }
.bk.noshow { background: #fff; color: var(--bad); border: 1.5px dashed #f0a8a8 }
.bk.completed { background: #525252 }
.bk.cancelled { background: #fff; color: var(--dim); border: 1px dashed var(--line-2); text-decoration: line-through }
.bk.upcoming { background: var(--ink) }
.bk.dim { opacity: .25 }

/* Week (single studio): columns = days, rows = 30 min */
.week { --rowh: 22px; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 240px); background: #fff }
.week-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(120px, 1fr)); position: relative; min-width: 900px }
.week-head { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--line); padding: .55rem .6rem; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em }
.week-head.today { color: var(--accent) }
.week-head b { display: block; font-size: 18px; color: var(--ink); letter-spacing: 0 }
.week-head.today b { color: var(--accent) }
.week-hours { border-right: 1px solid var(--line) }
.week-hours div { height: calc(var(--rowh) * 2); font-size: 10px; color: var(--muted); text-align: right; padding: 0 .4rem; transform: translateY(-6px); font-variant-numeric: tabular-nums }
.week-col { position: relative; border-left: 1px solid var(--line); cursor: crosshair;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--rowh) - 1px), #f4f4f4 calc(var(--rowh) - 1px) var(--rowh)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--rowh) * 2 - 1px), var(--line) calc(var(--rowh) * 2 - 1px) calc(var(--rowh) * 2)) }
.week-col .core { left: 0; right: 0; top: auto; bottom: auto; border-left: 0; border-right: 0; border-top: 1px dashed #fbd1b0; border-bottom: 1px dashed #fbd1b0 }
.week-col .bk { left: 4px; right: 4px; top: auto; bottom: auto }
.week-col .sel { left: 4px; right: 4px; top: auto; bottom: auto }
.week-col .now-line { top: auto; bottom: auto; left: 0; right: 0; width: auto; height: 2px }
.week-col .now-line::before { top: -4px; left: -4px }

/* Week (all studios): occupancy bars */
.occ { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 860px }
.occ th { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: left; background: var(--bg-2) }
.occ th.today { color: var(--accent) }
.occ td { border-bottom: 1px solid var(--line); padding: .45rem .5rem; vertical-align: middle }
.occ td.name { white-space: nowrap; font-weight: 500; border-left: 3px solid var(--tc) }
.occ td.cell { cursor: pointer; min-width: 110px }
.occ td.cell:hover { background: var(--bg-2) }
.bar { position: relative; height: 12px; border-radius: 4px; background: var(--bg-3); overflow: hidden }
.bar i { position: absolute; top: 0; bottom: 0; background: var(--ink); border-radius: 2px }
.bar i.live { background: var(--grad) }
.bar .core-mark { position: absolute; top: 0; bottom: 0; background: rgba(249, 112, 21, .12) }
.occ .cnt { font-size: 10.5px; color: var(--muted); margin-top: .2rem; font-variant-numeric: tabular-nums }

/* Month */
.month { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff }
.month .dow { padding: .55rem .6rem; border-bottom: 1px solid var(--line); background: var(--bg-2) }
.month .d { min-height: 104px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .5rem .6rem; cursor: pointer; position: relative; display: flex; flex-direction: column; gap: .2rem; transition: background .12s }
.month .d:nth-child(7n) { border-right: 0 }
.month .d:hover { outline: 1.5px solid var(--ink); outline-offset: -1.5px; z-index: 1 }
.month .d.out { color: var(--dim); background: var(--bg-2) }
.month .d .n { font-weight: 600; color: var(--ink); font-size: 14px }
.month .d.today .n { color: #fff; background: var(--accent); border-radius: 999px; width: 26px; height: 26px; display: grid; place-items: center; margin: -.2rem 0 0 -.25rem }
.month .d .c { font-size: 11.5px; color: var(--text) }
.month .d .h { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums }
.month .d .heat { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); transform-origin: left }

/* ---------- reports ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1.2rem }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: .95rem 1rem }
.tile .v { font-size: 28px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: .2rem }
.tile .v small { font-size: 14px; color: var(--muted); margin-left: .15rem }
.tile .s { font-size: 11.5px; color: var(--muted); margin-top: .1rem }
.tile.hero { background: var(--ink); border-color: var(--ink) }
.tile.hero .kicker, .tile.hero .s { color: #bdbdbd }
.tile.hero .v { color: #fff }
.section { margin-top: 1.6rem }
.section h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: .7rem }
.bars { display: grid; gap: .55rem }
.bars .r { display: grid; grid-template-columns: 130px 1fr 110px; gap: .8rem; align-items: center; font-size: 12.5px }
.bars .r .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--tc); padding-left: .5rem }
.bars .track { position: relative; height: 18px; background: var(--bg-3); border-radius: 4px; overflow: hidden }
.bars .track .booked { position: absolute; top: 0; bottom: 0; left: 0; background: #d9d9d9 }
.bars .track .used { position: absolute; top: 4px; bottom: 4px; left: 0; background: var(--ink); border-radius: 2px }
.bars .vals { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right }
.bars .vals b { color: var(--ink) }
.chart { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; overflow-x: auto }
.chart svg { display: block; width: 100%; min-width: 600px; height: 220px }
.chart text { font-size: 10px; fill: var(--muted); font-family: var(--font) }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem }

/* ---------- admin ---------- */
.tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; overflow-x: auto }
.tabs button { border: 0; background: none; padding: .7rem 0; font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent) }
.studio-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem }
.studio-list .card { padding: .9rem 1rem; cursor: pointer; border-left: 3px solid var(--tc); transition: box-shadow .12s }
.studio-list .card:hover { box-shadow: var(--shadow) }
.studio-list .photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--bg-3); margin-bottom: .6rem }
.hours-editor { display: grid; gap: .35rem }
.hours-editor .hr { display: grid; grid-template-columns: 70px 1fr 1fr; gap: .45rem; align-items: center }
.settings-grid { display: grid; gap: .9rem; max-width: 520px }

@media (max-width: 860px) {
  .top .in { gap: .8rem; flex-wrap: wrap }
  .nav { order: 3; width: 100%; gap: 1.1rem }
  .who .name, .who .role { display: none }
  .page-head h1 { font-size: 22px }
  .grid2 { grid-template-columns: 1fr }
  .day { --label: 104px; --col: 30px; max-height: none }
  .bars .r { grid-template-columns: 90px 1fr 86px }
  .field-row { grid-template-columns: 1fr }
  .month .d { min-height: 72px; padding: .35rem }
  .month .d .h { display: none }
  .cal-toolbar .date-label { min-width: 0; width: 100%; order: -1 }
}

/* Dragging on the grids should never select text. */
.day, .week, .occ, .month { user-select: none; -webkit-user-select: none }

/* ---------- talent ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .3rem }
.sm { font-size: 12px }
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-3) }
.avatar.initials { display: inline-grid; place-items: center; color: #fff; font-weight: 600; background: var(--grad); letter-spacing: .02em }
.talent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .9rem }
.talent-card { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; cursor: pointer; transition: box-shadow .12s, border-color .12s }
.talent-card:hover { box-shadow: var(--shadow); border-color: var(--line-2) }
.talent-card.static { cursor: default }
.talent-card .tname { font-weight: 600; color: var(--ink); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.talent-card .wk { display: grid; gap: .3rem; border-top: 1px solid var(--line); padding-top: .6rem }
.meter { height: 8px; border-radius: 99px; background: var(--bg-3); overflow: hidden }
.meter i { display: block; height: 100%; background: var(--ink); border-radius: 99px }
.meter.over i { background: var(--accent) }
.profile-head { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem }
.profile-head h1 { font-size: 28px; font-weight: 600; color: var(--ink); line-height: 1.15 }
.tile.warn { border-color: #fbd1b0; background: var(--accent-soft) }
.rows-editor { display: grid; gap: .4rem }
.rows-editor .erow { display: grid; grid-template-columns: 1.2fr .8fr .8fr 1.4fr auto; gap: .35rem; align-items: center }
.rows-editor .erow:has(select) { grid-template-columns: 1.2fr 1.4fr .8fr auto }
.rows-editor .linkbtn { justify-self: start }
.host-list { display: grid; gap: .45rem; margin-top: .4rem }
.host-row { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .45rem .6rem }
.host-row .nm { font-weight: 500; color: var(--ink) }
.pick-list { display: grid; gap: .45rem; max-height: 60vh; overflow-y: auto }
.pick { display: flex; gap: .7rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .7rem }
.pick.blocked { opacity: .5 }
.pick .info { flex: 1; min-width: 0 }
.pick .info b { display: block }
.warn-txt { color: var(--accent-ink); font-size: 11.5px }
.bk .hosts { opacity: .9; font-size: 10px; font-weight: 500 }
@media (max-width: 860px) {
  .rows-editor .erow, .rows-editor .erow:has(select) { grid-template-columns: 1fr 1fr }
}
.day .bk { padding: .18rem .45rem; line-height: 1.16 }
.bk .hosts { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }