@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/playfair-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/playfair-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F;
}
:root {
  --bg: #0b0c0e;
  --bg2: rgba(16, 17, 20, .88);
  --bg3: #15161a;
  --bg4: #1c1e24;
  --line: rgba(212, 175, 90, .14);
  --line2: rgba(212, 175, 90, .26);
  --text: #f6f1e6;
  --muted: #b9b0a0;
  --gold: #c4b08a;
  --gold2: #a89068;
  --gold-soft: rgba(196, 176, 138, .14);
  --sand: #ead9b6;
  --sand-ink: #2a1c10;
  --card-r: 16px;
  --btn-shadow: 0 10px 24px rgba(0,0,0,.32);
  --ok: #3aa35c;
  --warn: #e0b025;
  --bad: #d4524a;
  --info: #3d8f55;
  --rasta-g: #1f7a3a;
  --rasta-y: #e0b025;
  --rasta-r: #c43c3c;
  --shadow: 0 30px 80px rgba(0,0,0,.55);
  --radius: 22px;
  --focus: 0 0 0 3px rgba(232,195,106,.28);
  --ease: cubic-bezier(.22, 1, .36, 1);
  font-family: "SF Pro Display", Inter, "Segoe UI Variable", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "kern";
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; background:
    radial-gradient(900px 500px at 8% -8%, rgba(232,195,106,.08), transparent 46%),
    radial-gradient(700px 400px at 100% 0%, rgba(232,195,106,.04), transparent 42%),
    var(--bg);
  color: var(--text); min-height: 100%; overflow-x: hidden;
  letter-spacing: -.01em;
  color-scheme: dark;
}
button, input, select, textarea {
  font: inherit; color: inherit; color-scheme: inherit;
}
button, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="date"]):not([type="datetime-local"]):not([type="time"]), textarea {
  appearance: none; -webkit-appearance: none;
}
select {
  appearance: none; -webkit-appearance: none;
  background-color: var(--bg3);
  color: var(--text);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
option, optgroup { background-color: var(--bg3); color: var(--text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold2); width: auto; }
:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--bg3) inset;
}
.mode-banner {
  position: sticky; top: 0; z-index: 80;
  background: #7a5b12;
  color: #fff8e4;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .04em;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
body.is-demo .app { padding-top: 0; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--focus); border-color: var(--gold) !important;
}

.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar {
  background: #101114;
  border-right: 1px solid var(--line);
  padding: 18px 12px 16px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; }
.brand { display: flex; gap: 10px; align-items: center; margin: 0 8px 10px; }
.logo, .brand-logo {
  width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto;
  object-fit: contain; background: #000;
}
.brand-logo.lg { width: 108px; height: 108px; border-radius: 18px; }
.brand-login { flex-direction: column; text-align: center; margin: 0 0 8px; }
.brand-login h1 { font-size: 22px; letter-spacing: .04em; }
.brand h1 { font-size: 15px; margin: 0; line-height: 1.15; font-weight: 650; }
.brand small { color: var(--muted); font-size: 11px; display: block; margin-top: 2px; }
.nav { overflow: visible; flex: 1 0 auto; min-height: 0; }
.nav-group { margin-bottom: 4px; }
.nav-group-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: transparent; border: 0; color: #f0e4c0; padding: 8px 10px;
  border-radius: 9px; cursor: pointer; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 650;
}
.nav-group-btn .chev { color: #e8d7a4; font-size: 11px; }
.nav-group-btn:hover { background: var(--bg3); color: var(--text); }
.nav-items { display: none; padding: 0 0 4px; }
.nav-group.open .nav-items { display: block; }
.nav-ico { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; }
.nav-items button {
  width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--muted); padding: 8px 12px; border-radius: 10px; cursor: pointer; margin-bottom: 1px;
  display: flex; align-items: center; gap: 8px;
}
.nav-items button:hover { background: var(--bg3); color: var(--text); }
.nav-items button.active {
  background: var(--gold-soft);
  color: var(--gold);
  box-shadow: inset 3px 0 0 var(--gold2);
}
.userbox {
  border-top: 1px solid var(--line);
  padding-top: 12px; font-size: 12px; color: var(--muted);
  margin-top: auto;
  flex: 0 0 auto;
  background: #101114;
}
.userbox .who { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.avatar {
  width: 32px; height: 32px; border-radius: 10px; background: var(--bg4);
  display: grid; place-items: center; color: var(--gold); font-weight: 700; font-size: 12px;
}
.userbox select { margin-bottom: 8px; }
.menu-toggle { display: none; }
.menu-close { display: none; margin-left: auto; }

.main { padding: 28px 32px 80px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; }
.topbar h2 { margin: 0; font-size: 30px; font-weight: 620; letter-spacing: -.04em; }
.topbar p { margin: 4px 0 0; color: var(--muted); }
.title-block { min-width: 0; }
.my-shifts { display: flex; flex-direction: column; gap: 10px; }
.my-shift { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--card, #111) 80%, transparent); }
.my-shift-main { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; min-width: 0; }
.my-shift-act { flex-shrink: 0; }
.help-edit { padding: 12px 0; border-bottom: 1px solid var(--line); }
.help-edit textarea { width: 100%; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--card-r);
  padding: 16px 18px; box-shadow: 0 10px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
}
.card .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.card .v { font-size: 28px; margin-top: 6px; font-weight: 700; letter-spacing: -.03em; }
.empty { color: var(--muted); padding: 28px 8px; text-align: center; }

.btn {
  --ico: none;
  background: #22242b;
  border: 0;
  color: #f3eee4;
  padding: 11px 16px 11px 14px;
  border-radius: var(--card-r);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -.01em;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 22px rgba(0,0,0,.34);
  transform: translateY(0);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .12s ease, filter .12s ease;
}
.btn[data-ico]::before {
  content: "";
  width: 16px; height: 16px; flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  opacity: .92;
}
.btn[data-ico="save"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M5 5h11l3 3v11H5z'/><path d='M8 5v5h8V5'/><path d='M8 16h8'/></svg>"); }
.btn[data-ico="plus"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M12 5v14M5 12h14'/></svg>"); }
.btn[data-ico="trash"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M4 7h16M9 7V5h6v2M8 7l1 12h6l1-12'/></svg>"); }
.btn[data-ico="x"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M6 6l12 12M18 6L6 18'/></svg>"); }
.btn[data-ico="check"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><path d='M5 12l5 5 9-10'/></svg>"); }
.btn[data-ico="swap"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M7 7h11l-3-3M17 17H6l3 3'/></svg>"); }
.btn[data-ico="filter"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M4 6h16l-6 7v5l-4 2v-7z'/></svg>"); }
.btn[data-ico="box"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M4 8l8-4 8 4v8l-8 4-8-4z'/><path d='M4 8l8 4 8-4M12 12v8'/></svg>"); }
.btn[data-ico="user"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='8' r='3.2'/><path d='M5 19c1.6-3 4-4.5 7-4.5S17.4 16 19 19'/></svg>"); }
.btn[data-ico="key"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='8' cy='14' r='3'/><path d='M10.5 12.5 20 4h3v3l-6 6'/></svg>"); }
.btn[data-ico="pin"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M12 21s6-5.2 6-10a6 6 0 1 0-12 0c0 4.8 6 10 6 10z'/><circle cx='12' cy='11' r='2'/></svg>"); }
.btn[data-ico="eye"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='2.5'/></svg>"); }
.btn[data-ico="clock"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='8'/><path d='M12 8v5l3 2'/></svg>"); }
.btn[data-ico="edit"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M4 20h4l10-10-4-4L4 16z'/><path d='M13 7l4 4'/></svg>"); }
.btn:hover {
  background: #2b2e36;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 14px 26px rgba(0,0,0,.4);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.35) inset, 0 4px 10px rgba(0,0,0,.28);
  filter: brightness(.96);
}
.btn.primary {
  background: var(--sand);
  color: var(--sand-ink);
  font-weight: 750;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 22px rgba(0,0,0,.28);
}
.btn.primary:hover {
  background: #f3e7cd;
  filter: none;
}
.btn.primary:active { background: #dcc9a4; }
.tag.lead { background: #3d3310; color: #f0d36a; border: 1px solid #c9a24a; }
.person-chip.is-lead { border: 1px solid var(--gold2); background: #2a2414; }
.lead-name { color: var(--gold); font-weight: 700; }
.btn.danger {
  background: #3a2226;
  color: #f0b8ac;
}
.btn.danger:hover { background: #4a2a2f; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: rgba(255,255,255,.05); }
.btn.sm { padding: 8px 11px; font-size: 13px; border-radius: 14px; gap: 7px; }
.btn.sm[data-ico]::before { width: 14px; height: 14px; flex-basis: 14px; }
.btn.icon { min-width: 42px; padding-left: 12px; padding-right: 12px; }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--card-r);
  padding: 10px 12px;
  margin-bottom: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.filter-bar input, .filter-bar select { width: auto; min-width: 140px; max-width: 260px; }

input, select, textarea {
  background: rgba(0,0,0,.35); border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; width: 100%;
}
textarea { min-height: 88px; resize: vertical; font-family: inherit; line-height: 1.4; }
label { display: block; font-size: 12px; color: var(--muted); margin: 8px 0 4px; font-weight: 500; }
.table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.nav-scrim {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 25;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sort:hover { color: var(--text); }
th.th-sort.sorted { color: var(--sand); }
th.th-sort.sorted::after { content: " ↓"; font-size: 10px; }
th.th-sort.sorted.asc::after { content: " ↑"; }
tr:hover td { background: rgba(255,255,255,.015); }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #3a3224; color: #fff6e0; }
.tag.warn { background: #3d3310; color: #f0d36a; }
.tag.bad { background: #3d1616; color: #f09a9a; }
.tag.ok { background: #123526; color: #7ee0b0; }
.hidden { display: none !important; }

.login {
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 0%, #1f7a3a22 0%, transparent 34%),
    radial-gradient(circle at 50% 22%, #e0b02514 0%, transparent 28%),
    #07080a;
  padding: 24px;
}
.login-card {
  position: relative;
  width: min(400px, 92vw);
  background: rgba(12,10,8,.82);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 26px 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}
.login-lang { position: absolute; top: 14px; right: 14px; }
.login-lang .btn.sm { padding: 4px 8px; font-size: 12px; }
.login-card h2 { margin: 0 0 6px; font-size: 20px; font-weight: 650; }
.login-card .hint { color: var(--muted); margin: 0 0 12px; font-size: 13px; line-height: 1.4; }
.login-form { display: flex; flex-direction: column; }
.login-form label { margin-top: 8px; }
.login-submit { width: 100%; margin-top: 16px; justify-content: center; }
.login-notice { color: #e8b86d !important; }
.login-split {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.login-split-kicker {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}
.login-register { width: 100%; justify-content: center; }
.login-foot { margin: 16px 0 0; text-align: center; }
.login-foot a { color: var(--muted); font-size: 12px; text-decoration: none; }
.login-foot a:hover { color: var(--text); }

.reg-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, #2b2214 0%, transparent 36%),
    linear-gradient(180deg, #0c1016 0%, #0a0d12 100%);
  padding: 28px 16px 60px;
}
.reg-shell { width: min(720px, 96vw); margin: 0 auto; }
.reg-hero, .reg-toolbar, .reg-section {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 18px;
}
.reg-hero { padding: 22px 24px; margin-bottom: 14px; }
.reg-hero p { color: var(--muted); margin: 10px 0 0; max-width: 62ch; }
.reg-form { display: flex; flex-direction: column; gap: 14px; }
.reg-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 14px 18px; }
.reg-toolbar > div { flex: 1; max-width: 360px; }
.reg-section { padding: 18px 20px 22px; }
.reg-stack { display: flex; flex-direction: column; gap: 14px; }
.reg-field { min-width: 0; width: 100%; }
.reg-info {
  background: #10161d; border: 1px solid #334152; border-radius: 12px; padding: 14px 16px;
}
.reg-info-title { font-weight: 650; margin-bottom: 6px; }
.reg-info-text { color: #d5dde6; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  background: #10161d; border: 1px solid #334152; border-radius: 999px;
  padding: 7px 12px; color: var(--text); font-size: 13px;
}
.chip input { width: auto; accent-color: var(--gold2); }
.hint { color: var(--muted); font-size: 13px; font-weight: 500; }
.reg-err { color: #e85d5d; min-height: 1.2em; }
.reg-actions { display: flex; justify-content: flex-end; }
.photo-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.area-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.area-board-title { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: .01em; color: var(--text); }
.area-board-head .area-lead { font-size: 14px; }
.plan-wrap { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 14px; align-items: start; }
.pick-bar { color: var(--muted); font-size: 13px; margin: 12px 0 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.pick-bar.active { color: var(--text); border-style: solid; border-color: var(--gold2); background: var(--gold-soft); }
.pool-item.picked { outline: 2px solid var(--gold); background: #2a2414; }
.slot.target { border-style: dashed; border-color: var(--gold2); }
.plan-tl { grid-template-columns: minmax(0,1fr) 300px; }
.tl { overflow-x: auto; background: #121316; border: 1px solid var(--line); border-radius: 18px; padding: 12px 12px 8px; }
.tl-head, .tl-row { display: grid; grid-template-columns: 118px minmax(520px,1fr); gap: 10px; align-items: stretch; margin-bottom: 10px; }
.tl-lab { font-size: 13px; font-weight: 650; display: flex; align-items: center; color: #f0e6d0; }
.tl-track { position: relative; min-height: 72px; border: 1px dashed rgba(232,195,106,.18); border-radius: 12px; background: #0e0f12; }
.tl-tick { position: absolute; top: 4px; transform: translateX(-50%); font-size: 10px; color: var(--muted); }
.tl-block {
  position: absolute; top: 18px; bottom: 6px; border: 1px solid rgba(232,195,106,.28); border-radius: 14px;
  text-align: left; padding: 8px 10px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 4px; color: inherit;
  background: #191a1f;
}
.tl-block b { font-size: 12px; color: var(--gold); font-weight: 700; }
.tl-block span { font-size: 11px; opacity: 1; white-space: nowrap; color: #d9d0c2; }
.tl-block.open { background: #2a2414; }
.tl-block.full { background: #163522; border-color: rgba(90,200,130,.45); color: #e8fff0; }
.tl-block.dropped { background: #3a1616; border-color: rgba(212,82,74,.5); color: #ffe8e8; }
.tl-block.sel { outline: 2px solid var(--gold); z-index: 1; }
.tl-faces { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tl-faces .face { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(232,195,106,.35); }
.tl-seat { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tl-seat i { font-style: normal; font-size: 11px; color: #efe6d4; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-plus {
  width: 26px; height: 26px; border-radius: 50%; border: 1px dashed rgba(232,195,106,.45);
  display: grid; place-items: center; color: var(--gold); font-size: 16px; line-height: 1;
}
.cmdbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #121316; border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 12px; margin-bottom: 12px;
}
.cmd-day { display: flex; flex-direction: column; min-width: 160px; }
.cmd-day b { font-size: 14px; }
.cmd-split { width: 1px; height: 28px; background: var(--line); }
.btn.icon { min-width: 40px; justify-content: center; font-size: 18px; padding: 6px 10px; }
.role-pick-wrap { display: flex; flex-direction: column; gap: 4px; min-width: min(100%, 280px); font-size: 12px; color: var(--muted); }
.role-pick { min-height: 44px; font-size: 16px; }
.pick-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 140px; }
.pick-desc { color: var(--gold); font-weight: 650; }
.pick-bar.active { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip.quiet { background: transparent; border-color: var(--line); }
.dash-fold > summary { list-style: none; cursor: pointer; }
.dash-fold > summary::-webkit-details-marker { display: none; }
.area-day { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line2); }
.area-day:first-of-type { margin-top: 10px; padding-top: 0; border-top: 0; }
.area-day > b { display: block; font-size: 16px; letter-spacing: .04em; margin-bottom: 8px; color: var(--gold); }
.area-slot header span:first-child { font-weight: 800; font-size: 15px; }
.area-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.area-slot { background: #141518; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.area-slot header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.role-block { margin: 8px 0 2px; }
.area-people { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.area-people .who-cell { display: flex; align-items: center; gap: 6px; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; }
.tl-detail { margin-top: 10px; }
details.area-fold { border-bottom: 1px solid var(--line); padding: 6px 0; }
details.area-fold summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 40px; font-size: 15px; }
details.area-fold summary::-webkit-details-marker { display: none; }
details.area-fold summary::after { content: "▸"; color: var(--muted); }
details.area-fold[open] summary::after { content: "▾"; }
.plan-mobile { display: flex; flex-direction: column; gap: 14px; }
.plan-m-area h3 { margin: 0 0 8px; font-size: 16px; }
.plan-m-shift {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; margin: 0 0 8px; padding: 12px 14px; border: 0; border-radius: 12px;
  text-align: left; min-height: 52px; cursor: pointer;
}
.plan-m-shift.open { background: #6a5414; color: #fffdf4; }
.plan-m-shift.full { background: #184a2e; color: #f3fff6; }
.plan-m-shift.sel { outline: 2px solid var(--gold); }
.plan-m-shift b { font-size: 16px; }
.plan-m-shift span { font-size: 13px; opacity: .9; }
.board { overflow: auto; padding: 10px; }
.plan-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; min-width: max-content; align-items: start; }
.plan-day { display: flex; flex-direction: column; gap: 8px; min-width: 250px; }
.plan-day h3 { margin: 0 0 4px; font-size: 15px; display: flex; flex-direction: column; gap: 2px; }
.plan-day h3 small { color: var(--muted); font-weight: 400; font-size: 12px; }
.slots { display: flex; flex-direction: column; gap: 8px; }
.slot {
  background: var(--bg3); border: 1px solid var(--line); border-radius: 14px; min-height: 0; padding: 10px 12px;
}
.slot h4 { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.slot.over { outline: 2px solid var(--gold); }
.slot h4 { margin: 0 0 8px; font-size: 13px; }
.person-chip, .pool-item {
  background: #1a1610; border: 1px solid #6a5a34; color: #fffdf4;
  border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; font-size: 15px;
}
.pool-item { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.pool-item b, .chip-name { color: #fffdf4; font-weight: 750; }
.pool-item .hint { color: #ffe9b0; font-weight: 550; }
.pool-meta { flex: 1; min-width: 0; }
.face-btn { border: 0; background: transparent; padding: 0; cursor: zoom-in; line-height: 0; }
.face-btn.xl .face, .detail-head .face { width: 96px; height: 96px; border-radius: 16px; }
.name-link { border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; padding: 0; }
.name-link:hover { color: var(--gold); }
.photo-box { max-width: min(92vw, 720px); margin: 0; }
.photo-box img { width: 100%; max-height: 82vh; object-fit: contain; border-radius: 16px; background: #000; display: block; }
.modal-wide { width: min(720px, 94vw); }
.detail-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 12px 0; }
.face {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: #2a3644; display: inline-block; vertical-align: middle;
}
.face-fallback {
  display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--gold);
}
.who-cell { display: flex; gap: 10px; align-items: center; }
.person-chip { display: flex; align-items: center; gap: 8px; }
.person-chip .chip-name { flex: 1; min-width: 0; }
.d-act, .names { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.d-act .face, .names .face { width: 36px; height: 36px; }
.pool { max-height: calc(100vh - 210px); overflow: auto; }
.warn-text { color: var(--warn); font-size: 12px; }
.conflict-list { margin: 8px 0 0; padding-left: 18px; line-height: 1.45; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.stat-card { background: #1a1610; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.stat-card.off { opacity: .55; }
.stat-card header { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.stat-row { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 13px; }
.stat-row i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--gold2); opacity: .7; }
.problem { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wait-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: var(--gold); color: #1a1408; font-weight: 700; font-size: 14px;
  text-align: center; padding: 8px 12px; box-shadow: var(--shadow);
}
.sys-ok { margin-top: 8px; font-size: 11px; color: var(--muted); line-height: 1.3; }
.sys-ok.ok { color: var(--ok); }
.sys-ok.bad { color: var(--bad); font-weight: 700; }
.lock-banner {
  flex: 1 1 100%;
  background: rgba(224,176,37,.16);
  border: 1px solid var(--warn);
  color: var(--gold);
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 650;
  font-size: 14px;
}
.pager { align-items: center; gap: 10px; }
.pager-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--gold-soft);
  border: 1px solid var(--line2);
  border-radius: 10px;
}
.pager-nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.pager-num {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--text);
  font-weight: 650;
  font-size: 13px;
  cursor: pointer;
}
.pager-num.on {
  background: linear-gradient(180deg, #f3ddaa, #c9a24a);
  color: #241600;
  border-color: transparent;
  font-weight: 800;
}
.pager-num:hover:not(.on) { background: rgba(240,213,154,.16); }
.pager-gap { color: var(--muted); font-weight: 700; padding: 0 2px; font-size: 13px; }
.pager-nav { font-weight: 650; }
.pager-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-weight: 550;
}
@media (max-width: 720px) {
  .pager-meta { margin-left: 0; width: 100%; }
}

.toast {
  position: fixed; right: 16px; bottom: 16px; background: #1c2834; border: 1px solid #3b4d60;
  padding: 12px 14px; border-radius: 12px; max-width: 360px; z-index: 50; box-shadow: var(--shadow);
}
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: grid; place-items: center; z-index: 40; padding: 12px; overflow: hidden; }
.modal { width: min(560px, 92vw); max-height: 90vh; overflow: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.sheet {
  width: min(840px, 96vw); max-height: 92vh; padding: 0; display: flex; flex-direction: column;
  background: #14110c; overflow: hidden;
}
.sheet-head, .sheet-foot {
  flex: 0 0 auto; display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.sheet-foot { border-bottom: 0; border-top: 1px solid var(--line); }
.sheet-head h3 { margin: 0; font-size: 20px; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 18px; -webkit-overflow-scrolling: touch; }
.dossier-sec { margin: 14px 0; }
.dossier-sec h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dossier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; }
.dossier-item { background: #1a1610; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.pool-item { cursor: pointer; }

.display { height: 100vh; height: 100dvh; overflow: hidden; background: #07090c; color: #f4f7fb; display: flex; flex-direction: column; }
.display * { box-sizing: border-box; }
.display .board, .display .board.overview, .display .board-row, .display .display .board-card, .display .ov-slot, .display .board-role, .display .ov-names, .display .nm {
  color: #f4f0e6;
}
.display .ov-slot span, .display .ov-names-static, .display .board-role span, .display .board-role i {
  color: #f4f0e6;
}
.board-card { overflow: hidden; }

.roots-banner {
  position: relative;
  background-color: #0b0906;
  background-image: none;
}
.roots-banner::before,
.roots-banner::after { display: none; }
.roots-banner > * { position: relative; z-index: 1; }
.banner-flank {
  height: 86px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  pointer-events: none;
  justify-self: center;
  opacity: .7;
  filter: brightness(.86) saturate(.82);
}

.display .board-head {
  margin: 8px 10px 2px;
  padding: 8px 18px;
  display: grid;
  grid-template-columns: minmax(180px, 26%) 1fr minmax(180px, 26%);
  align-items: center;
  column-gap: 10px;
  flex: 0 0 auto;
  min-height: 96px;
  border: 1px solid rgba(180,170,150,.16);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.35);
}
.display .day-title {
  color: #e8e0d0;
  font-family: "Playfair Display", Palatino, "Palatino Linotype", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.display .day-title::after { display: none; }
.board-head-center {
  text-align: center;
  min-width: 0;
}
.display .board-head-center #clock {
  display: block;
  margin-top: 4px;
  color: #cfc6b4;
  font-family: "SF Pro Display", Inter, "Segoe UI Variable", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(16px, 1.7vw, 22px);
  text-transform: none;
  font-weight: 550;
  letter-spacing: .04em;
  opacity: 1;
}
.board-swap-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 2px 0 4px;
}
.board-swap {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 4px 12px 4px 8px;
  color: #e4c56a;
  font-size: clamp(13px, 1.5vw, 18px);
  font-weight: 600;
  letter-spacing: .02em;
  text-align: left;
}
.board-label-ghost { visibility: hidden; background: transparent; }


.display h1, .display .day-title { margin: 0; font-size: clamp(26px, 3.2vw, 42px); letter-spacing: .03em; font-weight: 600; text-transform: none; font-family: "Playfair Display", Palatino, "Palatino Linotype", serif; }
.display .meta { color: #9aa8b8; font-size: clamp(12px, 1.4vw, 16px); }
.display #clock { color: #f4f0e6; font-size: clamp(22px, 2.6vw, 36px); font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: .02em; }
.display .board { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 0 12px 12px; align-content: stretch; overflow: hidden; }
.board.overview { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.board-area { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.board-area h2 { margin: 0; font-size: clamp(13px, 1.6vw, 18px); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
.board-row { flex: 1; display: grid; gap: 6px; min-height: 0; }
.board-card {
  background: #121820; border: 1px solid #2a3644; border-radius: 10px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden;
}
.board-card.now { border-color: var(--gold); background: #1a1710; }
.board-card.full { box-shadow: inset 3px 0 0 #3d9a62; }
.board-card.open { box-shadow: inset 3px 0 0 #c45a4a; }
.board-card header { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; text-align: left; }
.board-card header strong { font-size: clamp(13px, 1.5vw, 18px); font-variant-numeric: tabular-nums; white-space: nowrap; color: #f4f0e6; }
.board-card header small, .ov-desc {
  color: #c9b27a; font-size: clamp(11px, 1.2vw, 14px);
  white-space: nowrap; overflow: hidden; display: block;
  width: 100%; max-width: 100%; text-align: left;
}
.ov-desc-inner { display: inline-block; will-change: transform; white-space: nowrap; }
.board-role { font-size: clamp(11px, 1.2vw, 15px); line-height: 1.25; }
.board-role b { color: var(--gold); display: block; }
.board-role span { display: flex; flex-wrap: wrap; gap: 4px 8px; color: #e8eef4; }
.board-role i { font-style: normal; }
.board-role i.lead { color: #f0d36a; font-weight: 700; }
.board-role em { color: #9aa8b8; font-style: normal; }
.stale { color: #e85d5d; }
.display .board { display: flex; flex-direction: column; gap: 8px; }
.board-day { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.board-day h2 { margin: 0; font-size: clamp(14px, 1.8vw, 20px); color: #f0d36a; letter-spacing: .04em; }
.board-area h3 { margin: 0; font-size: clamp(12px, 1.5vw, 16px); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
.board-row { display: flex; gap: 6px; flex: 1; min-height: 0; }
.board-row .board-card { flex: 1; }
.board-tickers { flex: 0 0 auto; }
.board-ticker-row { display: flex; align-items: center; border-top: 1px solid #2e281c; overflow: hidden; }
.board-ticker-row.open { border-top-color: #3a3224; }
.board-label {
  flex: 0 0 auto;
  width: auto;
  box-sizing: border-box;
  padding: 6px 8px 6px 12px;
  font-size: clamp(12px, 1.3vw, 16px); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #e8d9b0;
  white-space: nowrap; background: #100d0a; position: relative; z-index: 2;
}
.board-ticker-row .board-ticker {
  flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 100%);
}

.board-ticker-row.open .board-label { color: #e4c56a; background: #14110c; border-right-color: #3a3224; }

.board-ticker {
  background: #100d0a; border-top: 1px solid #2e281c;
  color: #e8d9b0; padding: 4px 0; font-size: clamp(14px, 1.4vw, 18px); line-height: 1.3;
  white-space: nowrap; overflow: hidden; font-weight: 500;
}
.board-ticker.open { background: #14110c; color: #e4c56a; border-top-color: #3a3224; }

.board-ticker .measure, .board-ticker .still, .board-ticker .tape, .board-ticker .unit { display: inline-flex; align-items: center; }
.board-ticker .still { padding: 8px 16px; }
.board-ticker .tape { will-change: transform; white-space: nowrap; }
.board-ticker .item { display: inline; padding: 0; background: none; border: none; }
.board-ticker .gap { display: inline-block; width: 80px; flex: 0 0 80px; }
.board-ticker .sep { opacity: .35; padding: 0 28px; font-weight: 400; }
@keyframes board-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.board.overview-rows { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ov-track { display: flex; width: 200%; height: 100%; }
.ov-track.slide { transition: transform .7s ease-in-out; }
.ov-pane { width: 50%; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; min-height: 0; overflow: hidden; }
.ov-row { display: grid; grid-template-columns: minmax(110px, 140px) 1fr; gap: 8px; align-items: stretch; min-height: 0; flex: 1 1 0; overflow: hidden; }
.ov-row h3 { margin: 0; align-self: center; font-size: clamp(13px, 1.7vw, 18px); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-slots { display: flex; gap: 6px; min-width: 0; min-height: 0; height: 100%; align-items: stretch; }
.ov-slot { flex: 1 1 0; min-width: 0; min-height: 0; max-width: 100%; background: #121820; border: 1px solid #2a3644; border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.ov-slot b { font-size: clamp(13px, 1.5vw, 18px); font-variant-numeric: tabular-nums; }
.ov-slot span { font-size: clamp(12px, 1.35vw, 16px); color: #e8eef4; line-height: 1.25; }
.ov-slot i { font-style: normal; }
.ov-slot i.lead { color: #f0d36a; font-weight: 700; }
.ov-slot em { color: #9aa8b8; font-style: normal; }
.ov-slot.now { border-color: var(--gold); background: #1a1710; }
.ov-slot.past { opacity: .45; }
.ov-slot.full { box-shadow: inset 3px 0 0 #3d9a62; }
.ov-slot.gap { box-shadow: inset 3px 0 0 #c45a4a; }
.ov-names { overflow: hidden; flex: 1 1 auto; min-height: 0; height: auto; }
.ov-names-inner { will-change: transform; }
.ov-names .nm { height: 1.25em; line-height: 1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.ov-names .nm.lead { color: #f0d36a; font-weight: 700; }
.ov-names .nm.role { color: #c8b48a; font-weight: 700; }
.ov-names .nm.empty { color: #9aa8b8; }
.board-card .ov-names { flex: 1 1 auto; min-height: 0; height: auto; }



@media (max-width: 1200px) {
  .plan-wrap { grid-template-columns: 1fr; }
  .pool { max-height: 280px; order: -1; }
  .plan-wrap { display: flex; flex-direction: column; }
}
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    display: none; position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw);
    z-index: 30; height: 100vh; box-shadow: var(--shadow);
  }
  .sidebar.open { display: flex; }
  .sidebar.open + .nav-scrim { display: block; }
  .menu-toggle { display: inline-flex; min-height: 40px; min-width: 40px; }
  .menu-close { display: inline-flex; }
  .plan-wrap { grid-template-columns: 1fr; }
  .userbox { position: static; }
  .main { padding: 16px 14px calc(48px + env(safe-area-inset-bottom)); }
  .topbar { align-items: start; flex-wrap: wrap; }
  .topbar h2 { font-size: 22px; }
  .detail-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .nav-items button, .btn { min-height: 44px; }
  #actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  #actions .btn.primary { flex: 1 1 100%; width: 100%; }
  #actions .btn:not(.primary) { flex: 1 1 calc(50% - 8px); }
  .filter-bar { width: 100%; }
  .filter-bar input, .filter-bar select { width: 100%; max-width: none; min-width: 0; }
  .dlg .row:has(.btn.primary), .card > .row:has(.btn.primary) {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .dlg .btn.primary, .card > .row:has(.btn.primary) > .btn.primary {
    flex: 1 1 100%; width: 100%;
  }
  .login-card .btn.primary { width: 100%; }
  .display header { flex-wrap: wrap; gap: 8px; padding: 16px; }
  .display h1 { font-size: 26px; }
  .d-timeline { padding: 8px 16px 32px; }
}
@media (max-width: 720px) {
  .reg-toolbar { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .d-slot { grid-template-columns: 1fr; }
  .d-time b { font-size: 22px; }
  .plan-days { grid-auto-flow: row; grid-auto-columns: 1fr; min-width: 0; }
  .plan-day { min-width: 0; }
  .board { padding: 0; }
  .modal, .modal-wide { width: min(560px, 96vw); max-height: 88vh; overflow: auto; }
  .my-shift { flex-direction: column; align-items: stretch; }
  .my-shift-act .btn { width: 100%; }
  .card .v { font-size: 22px; }
  .login-card { padding: 20px 16px; }
  .brand-logo.lg { width: 88px; height: 88px; }
  input, select, textarea { font-size: 16px; }
}

.modal {
  background: rgba(16,13,10,.88); backdrop-filter: blur(22px);
}
.toast {
  background: rgba(18,16,12,.9); backdrop-filter: blur(16px);
  border-color: var(--line2);
}
.display {
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(31,122,58,.2), transparent 50%),
    #070706;
}
.display header { flex: 0 0 auto; padding: 12px 20px 6px; }
.d-timeline {
  flex: 1 1 auto; overflow: hidden; max-width: none; padding: 4px 20px 12px;
}
.display header { align-items: center; }
.display h1 { letter-spacing: -.04em; font-weight: 620; }
.d-slot {
  background: rgba(18,16,12,.7); backdrop-filter: blur(14px);
  border-color: var(--line);
}
.tl-block { transition: transform .16s ease, outline-color .16s ease; }
.tl-block:hover { transform: translateY(-1px); }
.check-row { border-radius: 12px; padding: 10px 4px; }
.check-row:hover { background: rgba(240,213,154,.05); }
.view-pane { animation: pane-in .28s cubic-bezier(.22,1,.36,1); }
@keyframes pane-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

html, body, .modal, .table-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 213, 154, .35) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(240, 213, 154, .3);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(240, 213, 154, .5);
  background-clip: padding-box;
}

.tl, .pool, .board {
  scrollbar-width: none;
}
.tl::-webkit-scrollbar,
.pool::-webkit-scrollbar,
.board::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.area-head {
  width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: center;
  background: transparent; border: 0; color: inherit; cursor: pointer; text-align: left; padding: 4px 0 8px;
}
.area-body { padding-top: 8px; border-top: 1px solid var(--line); }
.area-split { display: grid; grid-template-columns: minmax(220px,280px) 1fr; gap: 14px; align-items: start; }
.area-list { padding: 12px; position: sticky; top: 12px; background: #14110c; }
.area-list #areaQ {
  margin-bottom: 10px; background: #0b0a08; color: var(--text);
  border: 1px solid var(--line2);
}
.area-list #areaQ::placeholder { color: #8d8168; }
#areaNav { display: flex; flex-direction: column; gap: 4px; }
.area-item {
  width: 100%; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: #1c1812; border: 1px solid var(--line); color: #f6eedc; text-align: left;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
}
.area-item b { color: #f6eedc; font-weight: 650; }
.area-item span { color: #f0dd9a; font-size: 12px; }
.area-item:hover { background: #2a2418; }
.area-item.on { background: #2e2618; border-color: var(--gold2); box-shadow: inset 3px 0 0 var(--rasta-r); }
.area-editor { background: #14110c; }
.area-editor input, .area-editor select {
  background: #0b0a08; color: #f6eedc; border: 1px solid var(--line2);
}
.act-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.act-row .actname { flex: 1; min-width: 140px; }
@media (max-width: 800px) {
  .area-split { grid-template-columns: 1fr; }
  .area-list { position: static; }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f3eee4;
    --bg2: #fffdf8;
    --bg3: #efe8da;
    --bg4: #e6dece;
    --line: rgba(60, 42, 12, .14);
    --line2: rgba(60, 42, 12, .28);
    --text: #14110a;
    --muted: #3a3224;
    --gold: #7a5a14;
    --gold2: #b8862a;
    --gold-soft: rgba(184, 134, 42, .16);
    --ok: #1f7a3a;
    --bad: #a8332b;
    --shadow: 0 16px 36px rgba(70, 45, 10, .12);
    --focus: 0 0 0 3px rgba(184,134,42,.28);
  }
  html, body, button, input, select, textarea { color-scheme: light; }
  html, body {
    background:
      radial-gradient(1000px 500px at 10% -10%, rgba(31,122,58,.10), transparent 50%),
      var(--bg);
  }
  .sidebar, .login-card, .card, .modal, .area-list, .area-editor {
    background: #fffdf8;
  }
  .area-item { background: #efe8da; color: #1c1710; border-color: var(--line2); }
  .area-item span { color: #6d604c; }
  .area-item.on { background: #f4e6c4; }
  .person-chip, .pool-item { background: #efe8da; color: #16120c; }
  .pool-item b, .chip-name { color: #16120c; }
  .pool-item .hint { color: #3f3628; }
  .tl-block.open { background: #c9a24a; color: #1a1408; }
  .tl-block.full { background: #2f6a44; color: #f3fff6; }
  .tl-block b, .tl-block span { color: inherit; }
  .tag { background: #e6dece; color: #3a3224; }
  .login {
    background:
      radial-gradient(circle at 50% 0%, #1f7a3a22 0%, transparent 40%),
      #f3eee4;
  }
  .display { background: #f3eee4; color: #1c1710; }
  .d-slot { background: #fffdf8; border-color: var(--line2); }
  input, select, textarea { background: #fffdf8; color: #1c1710; }
}

th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort].sorted { color: var(--gold); }

.help-box { max-width: 640px; max-height: 86vh; overflow: auto; }
.help-box .help-list { margin-top: 10px; }
.help-box .help-list h4 { margin: 16px 0 6px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.help-box .help-list h4:first-child { margin-top: 4px; }
.help-box .help-list p { margin: 0 0 10px; line-height: 1.55; color: var(--text); }
.help-shot{display:grid;grid-template-columns:24px 1fr;gap:6px;background:#0d0e12;border:1px solid var(--line);border-radius:10px;padding:10px;margin:10px 0;min-height:72px}
.help-shot b{background:#2a2414;border-radius:6px}
.help-shot span{grid-column:2;height:8px;background:#2a2d34;border-radius:4px}
.ok-box{border-color:#3d9a62}
.ok-box h3{color:#8fd4a8}
button[disabled]{opacity:.45;cursor:not-allowed}

.live-line{margin:14px 0 0;color:var(--muted);font-size:13px}
.board{transition:opacity .25s ease}

.pick-bar{min-height:52px;box-sizing:border-box}
.pool.is-loading, #pool.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.pick-desc{display:block;margin-top:2px;color:var(--text)}
.pick-desc.mute{color:var(--muted)}
.tl-detail{min-height:48px;margin:0 0 12px}

.plan-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 10px;
}
.plan-tools #areaF { width: 180px; max-width: 46vw; }
.plan-tools #poolQ { width: 180px; max-width: 46vw; }
.plan-tools-actions { margin-left: auto; display: flex; gap: 8px; }
.plan-board { min-width: 0; }
.plan-daybar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 6px;
}
.plan-daybar .cmd-day { min-width: 0; text-align: center; }
.plan-daybar .cmd-day b { font-size: 18px; letter-spacing: .02em; }
.plan-daybar .btn.icon { min-width: 44px; min-height: 44px; }
#whoPlans { min-height: 0; margin: 0 0 6px; font-size: 12px; }
.plan-tl .board.card { padding: 8px 10px 6px; }
.tl { padding: 8px 8px 6px; }
.tl-head, .tl-row { margin-bottom: 6px; }
.tl-track { min-height: 56px; }
.tl-tick { top: 2px; }
.tl-block { top: 16px; bottom: 4px; padding: 6px 8px; border-radius: 12px; }
@media (max-width: 900px) {
  .plan-tools-actions { margin-left: 0; width: 100%; }
  .plan-tools-actions .btn { flex: 1; }
  .plan-tools #areaF, .plan-tools #poolQ { width: 100%; max-width: none; }
  .plan-daybar { justify-content: space-between; }
  .plan-daybar .cmd-day b { font-size: 16px; }
}

.role-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.role-pill {
  border: 1px solid var(--line); background: #17181d; color: #f4f0e6;
  border-radius: 999px; padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.role-pill.on { border-color: var(--gold); color: var(--gold); background: #1c1910; }

.privacy-box {
  margin: 8px 0 0; padding: 14px 16px;
  background: #1a1710; border: 1px solid var(--gold);
  border-radius: 12px;
}
.privacy-box label { display: flex; align-items: flex-start; gap: 12px; white-space: normal; cursor: pointer; line-height: 1.45; }
.privacy-box input[type=checkbox] { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--gold2); }
.privacy-box a { color: var(--gold); text-decoration: underline; }

.print-only { display: none; }
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  html, body {
    background: #fff !important;
    color: #111 !important;
  }
  .print-only { display: block !important; }
  .print-head {
    font-size: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid #111;
    padding-bottom: 6px;
  }
  .sidebar, .mode-banner, #onsiteBanner, #modeBanner, #waitBar,
  #actions, #helpBtn, #menuBtn, #logout, #navScrim, #navClose,
  .filter-bar, .toast, .modal-bg, .pager, .login-split,
  .btn, .who-cell img, .face, img.avatar, .person-chip img {
    display: none !important;
  }
  .app { display: block !important; min-height: 0; }
  main, .view-pane, #content { width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .card, .area-board, table, .area-slot {
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    border: 1px solid #222 !important;
    break-inside: avoid;
  }
  .area-board { page-break-after: always; }
  .area-board:last-child { page-break-after: auto; }
  h1, h2, h3, .k, .area-board-title, th, td, .hint, span, p, b {
    color: #111 !important;
  }
  .name-link, .who-cell, button.name-link {
    display: inline !important;
    border: 0 !important;
    background: none !important;
    color: #111 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .tag { border: 1px solid #111 !important; color: #111 !important; background: #fff !important; }
}

.nav-badge{margin-left:auto;min-width:1.4em;padding:1px 7px;border-radius:999px;background:var(--line,#444);color:inherit;font-size:12px;font-weight:700;line-height:1.6;text-align:center;}
.nav-badge.ping{background:var(--gold2,#c9a227);color:#1a1204;box-shadow:0 0 0 2px rgba(201,162,39,.35);animation:swapPing 1.2s ease-in-out 3;}
@keyframes swapPing{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
#nav [data-v="swap"]{display:flex;align-items:center;gap:8px;width:100%;}

.field-preview{cursor:pointer;max-width:220px;text-overflow:ellipsis;}
#textEditBg .modal textarea{font-size:16px;line-height:1.4;}

.crew-inline{width:100%;max-width:none;min-width:7.5rem;}
#tb td{vertical-align:middle;}
.who-cell{display:flex;align-items:center;gap:10px;}
.crew-pay{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.pay-inline{display:inline-flex;align-items:center;gap:4px;margin:0;font-size:12px;color:var(--muted);font-weight:600;cursor:pointer;}
.pay-inline input{margin:0;width:14px;height:14px;}
#tb .btn.sm{padding:4px 10px;}

.presence-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;}
.presence-row .btn,.presence-state{
  min-height:40px;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;line-height:1.2;box-sizing:border-box;
}
.presence-state{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);}
.presence-state.is-present{border-color:rgba(120,180,120,.5);background:rgba(70,130,70,.18);}
.presence-state.is-gone{border-color:rgba(200,150,80,.5);background:rgba(160,110,40,.16);}
.presence-state.is-wait{color:var(--muted);}