/* Smart-Shit — styled per the DCP UI Style Guide.
   Shared tokens (DCP roles) + a small product theme layer. Component styles below use
   legacy aliases (--ink, --line, …) that map onto the DCP roles. */

/* ---------- DCP shared tokens ---------- */
:root {
  --color-accent: #5457e5;
  --color-accent-hover: #4245c6;
  --color-accent-soft: #eceefd;
  --color-navigation: #171b26;
  --color-navigation-text: #c9cfdc;
  --color-navigation-active: rgba(84, 87, 229, 0.22);
  --color-page: #f1f4f9;
  --color-surface: #ffffff;
  --color-surface-muted: #f7f9fc;
  --color-text: #202635;
  --color-text-muted: #64748b;
  --color-border: #e5e9f0;
  --color-border-strong: #cfd6e2;
  --color-success: #0b766e;
  --color-warning: #9a5b00;
  --color-danger: #b42336;
  --color-info: #6250bd;
  --color-focus: #5457e5;
  --shadow-panel: 0 12px 28px rgba(20, 36, 61, .055);
  --shadow-pop: 0 14px 34px rgba(20, 36, 61, .16), 0 2px 6px rgba(20, 36, 61, .08);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --font-ui: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --nav-width: 256px;

  /* Product theme layer (Smart-Shit): schedule bars and weekend shading */
  --bar-blue: #8b8ef0;
  --bar-blue-dark: #5457e5;
  --weekend: rgba(100, 116, 139, 0.07);

  /* Legacy aliases used by the sheet components */
  --bg: var(--color-page);
  --panel: var(--color-surface);
  --ink: var(--color-text);
  --ink-2: #3d4659;
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --line-soft: #edf0f5;
  --hover: #f3f5fa;
  --accent: var(--color-accent);
  --accent-ink: #ffffff;
  --accent-soft: var(--color-accent-soft);
  --sel: var(--color-accent);
  --danger: var(--color-danger);
  --radius: var(--radius-sm);
  --shadow: var(--shadow-pop);
  --font: var(--font-ui);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 13px/1.6 var(--font-ui); color: var(--color-text); background: var(--color-page); overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; }
.muted { color: var(--color-text-muted); }
.sm { font-size: 12px; }
.meta { font-size: 11px; color: var(--color-text-muted); }
.mono, .num { font-family: var(--font-mono); }
.eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--color-text-muted); }
.eyebrow a { color: inherit; }
.right { text-align: right; }
.grow, .tb-grow { flex: 1; }
.ic { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
kbd { font: 11px var(--font-mono); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-bottom-width: 2px; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
mark { background: #fdf0c2; color: inherit; border-radius: 2px; }

/* Focus: always visible for keyboard users */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.input:focus-visible, .g-editor :focus-visible { outline: none; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 3000; background: var(--color-surface); color: var(--color-accent); padding: 8px 14px; border-radius: var(--radius-sm); font-weight: 700; }
.skip-link:focus { top: 12px; box-shadow: var(--shadow-pop); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- App shell ---------- */
.app { display: flex; height: 100vh; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
.main { flex: 1; min-height: 0; overflow: auto; position: relative; }
.main:focus { outline: none; }
.app.signed-out .nav, .app.signed-out .topbar { display: none; }
.loading { padding: 48px; color: var(--color-text-muted); text-align: center; }

/* Navigation rail */
.nav { width: var(--nav-width); flex: none; background: var(--color-navigation); color: var(--color-navigation-text); display: flex; flex-direction: column; padding: 16px 12px 12px; gap: 2px; overflow-y: auto; z-index: 50; }
.nav-brand { padding: 4px 10px 18px; }
.wordmark { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.wordmark:hover { text-decoration: none; }
.nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: #7d8699; padding: 14px 10px 6px; }
.nav-section.with-action { display: flex; align-items: center; justify-content: space-between; padding-right: 4px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--color-navigation-text); font-weight: 600; font-size: 13px; border: 0; background: none; cursor: pointer; text-align: left; width: 100%; }
.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--color-navigation-active); color: #fff; }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-accent); }
.nav-item.sub { font-weight: 500; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { font-family: var(--font-mono); font-size: 10.5px; background: var(--color-accent); color: #fff; border-radius: 9px; padding: 0 7px; line-height: 18px; }
.nav-empty { font-size: 12px; color: #7d8699; padding: 4px 10px; }
.nav-grow { flex: 1; min-height: 16px; }
.nav-account { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); color: #fff; cursor: pointer; text-align: left; }
.nav-account:hover { background: rgba(255, 255, 255, 0.09); }
.acct-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.acct-name { font-weight: 700; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-email { font-size: 11px; color: #9aa3b5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn.on-dark { color: #9aa3b5; }
.icon-btn.on-dark:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-scrim { position: fixed; inset: 0; background: rgba(15, 20, 32, 0.4); z-index: 40; }

/* Top bar: location, search, one primary action */
.topbar { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 24px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex: none; }
.app.sheet-mode .topbar { display: none; }
.top-location { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.top-title { font-weight: 700; font-size: 15px; }
.top-search { flex: 1; max-width: 520px; margin-left: auto; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-muted); color: var(--color-text-muted); }
.top-search:focus-within { border-color: var(--color-accent); background: var(--color-surface); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.top-search-input { flex: 1; border: 0; outline: none; background: none; min-width: 0; }
.topbar .menu-btn { display: none; }

/* ---------- Common controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); cursor: pointer; font-weight: 600; white-space: nowrap; color: var(--color-text); }
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn.primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn.primary:active { transform: translateY(1px); }
.btn.danger { color: var(--color-danger); border-color: #ecc3c9; background: var(--color-surface); }
.btn.danger:hover { background: #fcf0f2; }
.modal .btn.danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--hover); }
.btn.outline { border-color: var(--color-accent); color: var(--color-accent); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn.block { width: 100%; height: 42px; }
.icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-2); flex: none; }
.icon-btn:hover { background: var(--hover); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn.xs { width: 24px; height: 24px; }
.link { color: var(--color-accent); font-weight: 600; }
.input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); outline: none; font-size: 13.5px; }
textarea.input { height: auto; padding: 9px 12px; resize: vertical; line-height: 1.5; }
.input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.input.sm { height: 32px; font-size: 12.5px; padding: 0 9px; }
.input.lg { height: 46px; font-size: 15px; border: 0; box-shadow: none; background: none; }
.input:disabled { background: var(--color-surface-muted); color: var(--color-text-muted); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label, .field > span { font-weight: 700; font-size: 12px; color: var(--ink-2); }
.field-hint { font-size: 11.5px; color: var(--color-text-muted); }
.field-error, .form-error { font-size: 12px; color: var(--color-danger); font-weight: 600; }
.field-error:empty, .form-error:empty { display: none; }
.form-error { margin: 4px 0 12px; }
.field.computed .input { background: var(--color-surface-muted); color: var(--color-text-muted); }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.notice { background: #eef7f6; color: var(--color-success); border: 1px solid #cfe7e4; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px; }
.row-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-inline.end { justify-content: flex-end; }
.actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 700; flex: none; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 6px; background: var(--color-surface-muted); border: 1px solid var(--color-border); color: var(--ink-2); font-size: 11.5px; }
.chip.danger { background: #fcf0f2; border-color: #f1d0d6; color: var(--color-danger); }
.chip.link { cursor: pointer; margin: 2px; }
.chip.link:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* Status: always label + colour, never colour alone */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.success { color: var(--color-success); }
.status.warning { color: var(--color-warning); }
.status.danger { color: var(--color-danger); }
.status.info { color: var(--color-info); }

/* Menus / popovers / modals / toasts */
.menu, .popover { position: fixed; z-index: 1000; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); border: 1px solid var(--color-border); }
.menu { min-width: 210px; max-width: 320px; padding: 6px; max-height: 80vh; overflow: auto; }
.menu-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.menu-item:hover { background: var(--hover); }
.menu-item.disabled { opacity: 0.4; cursor: default; }
.menu-item.danger { color: var(--color-danger); }
.mi-icon { width: 16px; display: inline-flex; color: var(--ink-2); }
.menu-item.danger .mi-icon { color: var(--color-danger); }
.mi-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.mi-hint { color: var(--color-text-muted); font-size: 11px; font-family: var(--font-mono); }
.menu-sep { height: 1px; background: var(--color-border); margin: 5px 2px; }
.menu-header { padding: 7px 9px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-text-muted); font-weight: 700; }
.popover { padding: 14px; }
.swatches { display: grid; grid-template-columns: repeat(6, 26px); gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--color-border-strong); cursor: pointer; }
.swatch.none { background: linear-gradient(135deg, #fff 45%, var(--color-danger) 46%, var(--color-danger) 54%, #fff 55%) !important; }
.filter-pop { width: 580px; max-width: 90vw; }
.filter-pop h4 { margin: 0 0 8px; font-size: 14px; }
.cond { display: grid; grid-template-columns: 1.2fr 1.3fr 1.2fr 32px; gap: 6px; margin: 8px 0; align-items: center; }
.pop-foot { display: flex; gap: 6px; align-items: center; margin-top: 12px; }
.modal-back { position: fixed; inset: 0; background: rgba(15, 20, 32, 0.42); z-index: 900; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; overflow: auto; }
.modal { width: 480px; max-width: 100%; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 6px; }
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.modal-body { padding: 8px 22px; }
.modal-body p { margin: 4px 0 14px; color: var(--ink-2); }
.modal-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 22px 20px; }
#toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: #1d2333; color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); transition: opacity 0.3s, transform 0.3s; max-width: 80vw; }
.toast.err { background: var(--color-danger); }
.toast.out { opacity: 0; transform: translateY(8px); }
.kv { border-collapse: collapse; width: 100%; }
.kv th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 7px 14px 7px 0; vertical-align: top; }
.kv td { padding: 7px 0; font-weight: 600; }

/* ---------- Pages ---------- */
.page { padding: 28px 32px 64px; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.page.narrow { max-width: 760px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-top: 4px; }
.section-title { font-size: 17px; font-weight: 700; }
.section-title.spaced, .spaced { margin-top: 8px; }
.lead { margin: -8px 0 0; }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: 22px; }
.panel.flush { padding: 0; overflow: hidden; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel > .section-title { margin-bottom: 14px; }
.panel .actions { margin-top: 4px; }
.kv-line { display: flex; gap: 12px; margin-bottom: 14px; }
.empty-state { text-align: center; padding: 56px 20px; color: var(--ink-2); max-width: 540px; margin: 0 auto; }
.empty-state.small { padding: 20px 12px; }
.empty-state h2, .empty-state h3 { margin: 0 0 6px; color: var(--color-text); font-size: 18px; }
.empty-state p { margin: 4px 0 14px; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.metric { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: 18px 20px; }
.metric-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.metric-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0; font-family: var(--font-ui); }
.metric-note { font-size: 11px; color: var(--color-text-muted); }
.onboarding p { margin: 6px 0 16px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.item-card { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-items: center; gap: 1px 10px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-surface); }
.item-card:hover { border-color: #c6c8f6; box-shadow: var(--shadow-panel); text-decoration: none; }
.item-icon { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; }
.item-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.item-sub { font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-star { color: #b7791f; display: inline-flex; }
.item-star svg { fill: currentColor; }

.table-scroll { overflow-x: auto; }
.list { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.list th { text-align: left; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--color-text-muted); padding: 12px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-muted); white-space: nowrap; }
.list td { padding: 13px 18px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.list tr:last-child td { border-bottom: 0; }
.list tbody tr:hover td { background: #fafbfe; }
.list-name { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--color-text); }
.list-name .ic { color: var(--color-accent); }

.member { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.member:last-child { border-bottom: 0; }
.member .input.sm { width: auto; }
.add-person { display: grid; grid-template-columns: 1fr 130px auto; gap: 8px; margin-top: 14px; align-items: start; }
.add-person .field-error { grid-column: 1 / -1; }
.share .add-person { margin: 0 0 6px; }

.search-box { display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); color: var(--color-text-muted); }
.search-box:focus-within { border-color: var(--color-accent); }
.results { display: flex; flex-direction: column; gap: 14px; }
.result-sheet { display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.result { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--color-text); }
.result:hover { background: var(--hover); text-decoration: none; }
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.notif:last-child { border-bottom: 0; }
.notif:hover { background: #fafbfe; text-decoration: none; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; border: 1.5px solid var(--color-border-strong); }
.notif.unread .notif-dot { background: var(--color-accent); border-color: var(--color-accent); }
.notif.unread { font-weight: 600; }

/* Auth */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--color-page); }
.auth-card { width: 420px; max-width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: 32px 32px 26px; }
.auth-card .wordmark { color: var(--color-text); display: block; margin-bottom: 22px; }
.auth-card h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.auth-card > p { margin: 6px 0 22px; }
.auth-card form .link.sm { display: inline-block; margin-top: 14px; }
.auth-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 12.5px; }

/* ---------- Sheet page ---------- */
.sheet-page { display: flex; flex-direction: column; height: 100vh; background: var(--color-surface); }
.sheet-head { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 20px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex: none; flex-wrap: wrap; }
.sh-title { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.sh-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sheet-name { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.name-btn { border: 0; background: none; font: inherit; padding: 0 4px; border-radius: 6px; cursor: text; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-btn:hover { background: var(--hover); }
.sh-menus { display: flex; gap: 2px; }
.sh-menus .btn { height: 32px; padding: 0 11px; }
.star svg { fill: none; }
.star.on { color: #b7791f; }
.star.on svg { fill: currentColor; }
.saved { white-space: nowrap; }
.sh-right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.presence { display: flex; align-items: center; }
.presence .avatar { border: 2px solid var(--color-surface); margin-left: -6px; }
.toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 14px; background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); flex: none; overflow-x: auto; min-height: 46px; }
.tb { display: inline-flex; align-items: center; gap: 3px; height: 32px; min-width: 32px; padding: 0 7px; justify-content: center; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--ink-2); white-space: nowrap; font-weight: 600; }
.tb:hover { background: #e9edf4; }
.tb.active { background: var(--color-accent-soft); color: var(--color-accent); }
.tb:disabled { opacity: 0.35; cursor: default; background: none; }
.tb.wide { padding: 0 9px; gap: 6px; }
.tb-ch { font-size: 14px; width: 14px; text-align: center; font-family: Georgia, serif; }
.tb-a { font-weight: 700; font-size: 14px; border-bottom: 3px solid; line-height: 14px; padding: 0 2px; }
.tb-fill { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--color-border-strong); }
.tb-sep { width: 1px; height: 22px; background: var(--color-border-strong); margin: 0 6px; flex: none; }
.tb-zoom { font-size: 11px; text-transform: capitalize; padding: 0 4px; font-family: var(--font-mono); }
.tb-searchwrap { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-muted); margin-right: 4px; background: var(--color-surface); }
.tb-searchwrap:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.tb-search { border: 0; outline: none; width: 140px; background: none; }
.filter-bar { display: flex; align-items: center; gap: 8px; padding: 7px 18px; background: #fdf6e8; border-bottom: 1px solid #f0dfb8; color: var(--color-warning); font-weight: 600; flex: none; }
.sheet-body { flex: 1; min-height: 0; display: flex; position: relative; }
.view-host { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--color-surface); }
.warn-bar { padding: 8px 14px; margin: 8px; background: #fcf0f2; color: var(--color-danger); border-radius: var(--radius-sm); position: sticky; left: 0; width: max-content; font-weight: 600; }

/* Right rail and side panel */
.rail { width: 48px; flex: none; background: #fff; border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding-top: 8px; gap: 4px; }
.rail-btn { width: 36px; height: 36px; border: 0; background: none; border-radius: 7px; cursor: pointer; color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.rail-btn:hover { background: var(--hover); }
.rail-btn.active { background: var(--accent-soft); color: var(--accent); }
.rail-wrap { position: relative; }
.rail-badge { position: absolute; top: 2px; right: 0; background: var(--accent); color: #fff; font-size: 9.5px; border-radius: 8px; padding: 0 4px; line-height: 14px; pointer-events: none; }
.side-panel { width: 0; flex: none; overflow: hidden; background: #fff; border-left: 1px solid var(--line); transition: width 0.15s; }
.side-panel.open { width: 360px; }
.panel-inner { width: 360px; height: 100%; display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.panel-head h3 { margin: 0 4px; font-size: 15px; flex: 1; }
.panel-body { flex: 1; overflow: auto; padding: 14px 16px 30px; }
.detail-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; word-break: break-word; }
.sec { margin: 18px 0 8px; font-size: 13px; }
.cm { display: flex; gap: 8px; margin-bottom: 12px; }
.cm-body { flex: 1; min-width: 0; }
.cm-meta { display: flex; align-items: center; gap: 2px; }
.cm-meta .icon-btn { margin-left: auto; opacity: 0; }
.cm:hover .cm-meta .icon-btn { opacity: 1; }
.cm-text { white-space: pre-wrap; word-break: break-word; background: #f5f6f9; border-radius: 8px; padding: 7px 10px; margin-top: 3px; }
.cm-new { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.conv { border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.conv-head { border: 0; background: none; font-weight: 600; cursor: pointer; padding: 0 0 8px; text-align: left; color: var(--accent); }
.act { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.bar-stat { display: flex; align-items: center; gap: 8px; padding: 5px 0; }

/* ---------- Grid ---------- */
.g-wrap { flex: 1; overflow: auto; position: relative; background: #fff; }
.g-inner { width: max-content; min-width: 100%; position: relative; }
.g-head { display: flex; position: sticky; top: 0; z-index: 4; background: #fff; border-bottom: 2px solid #c9cfdb; }
.g-rnh { position: sticky; left: 0; z-index: 5; background: #fff; flex: none; border-right: 1px solid var(--line); }
.g-ch { position: relative; flex: none; padding: 6px 22px 4px 8px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; user-select: none; }
.g-ch.active { background: #f2f6fd; }
.g-ch-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-ch-meta { display: flex; gap: 4px; color: var(--muted); align-items: center; min-height: 14px; }
.type-tag { font-size: 10px; color: #9aa2b1; }
.g-ch-menu { position: absolute; right: 3px; top: 6px; width: 18px; height: 18px; border: 0; background: none; padding: 0; border-radius: 4px; cursor: pointer; color: var(--muted); opacity: 0; display: flex; align-items: center; justify-content: center; }
.g-ch:hover .g-ch-menu { opacity: 1; }
.g-ch-menu:hover { background: var(--hover); }
.g-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 2; }
.g-resize:hover { background: var(--accent); opacity: 0.4; }
.g-addcol { width: 40px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; }
.g-addcol:hover { color: var(--accent); background: var(--hover); }
.g-row { display: flex; }
.g-rn { position: sticky; left: 0; z-index: 2; flex: none; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; padding: 0 4px 0 8px; color: #9aa2b1; font-size: 11.5px; cursor: pointer; user-select: none; }
.rn-num { width: 24px; }
.rn-icons { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.rn-cm { display: inline-flex; align-items: center; gap: 1px; color: var(--accent); font-size: 10px; cursor: pointer; }
.rn-expand { border: 0; background: none; padding: 2px; color: var(--muted); cursor: pointer; opacity: 0; border-radius: 3px; display: flex; }
.g-row:hover .rn-expand { opacity: 1; }
.rn-expand:hover { background: var(--hover); color: var(--accent); }
.g-row.cur .g-rn { background: #eef3fd; color: var(--accent); }
.g-row.rsel .g-rn, .g-row.rsel .g-cell { background: #e6eefc !important; }
.g-row.rsel .g-rn { box-shadow: inset 3px 0 0 var(--accent); }
.g-cell { flex: none; height: 100%; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 0 7px; line-height: 31px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; cursor: cell; }
.g-row:hover .g-cell { background-color: #fbfcfe; }
.g-cell.sel { box-shadow: inset 0 0 0 2px var(--sel); z-index: 1; }
.g-cell.hit { background: #fff6cc !important; }
.g-cell.hit-cur { background: #ffe680 !important; }
.g-cell.computed { color: #3b4252; }
.g-cell.t-duration, .g-cell.t-percent, .g-cell.t-number { text-align: right; }
.g-cell.t-checkbox { text-align: center; cursor: pointer; }
.num.neg { color: var(--danger); }
.g-tail { flex: 1; border-bottom: 1px solid var(--line-soft); min-width: 40px; }
.prim { display: flex; align-items: center; min-width: 0; height: 100%; }
.prim-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prim-text.parent { font-weight: 700; }
.tog { width: 18px; height: 18px; flex: none; border: 0; background: none; padding: 0; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 4px; margin-right: 3px; }
.tog:hover { background: var(--line-soft); }
.tog-sp { width: 21px; flex: none; }
.pill { display: inline-block; line-height: 20px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 600; vertical-align: middle; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.contact { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.cb { display: inline-flex; width: 16px; height: 16px; border: 1.5px solid #aab1c0; border-radius: 4px; vertical-align: middle; align-items: center; justify-content: center; }
.cb.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.g-addrow { display: flex; gap: 6px; padding: 6px 8px; height: 44px; position: sticky; left: 0; width: max-content; }
.g-editor { position: fixed; z-index: 800; background: #fff; box-shadow: 0 0 0 2px var(--sel), 0 6px 18px rgba(0, 0, 0, 0.15); }
.ed-input { display: block; width: 100%; border: 0; outline: none; padding: 0 7px; font: inherit; background: #fff; resize: none; line-height: 31px; }
textarea.ed-input { min-height: 64px; line-height: 1.4; padding: 7px; }
.ed-date { position: absolute; right: 2px; top: 4px; width: 26px; height: 24px; border: 0; background: none; cursor: pointer; padding: 0; }
.ed-list { position: absolute; left: 0; top: 100%; margin-top: 3px; min-width: 100%; max-height: 220px; overflow: auto; background: #fff; border-radius: 6px; box-shadow: var(--shadow); padding: 4px; }
.ed-opt { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.ed-opt:hover, .ed-opt.act { background: var(--accent-soft); }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; }

/* ---------- Gantt ---------- */
.gantt-split { display: flex; flex: 1; min-height: 0; }
.gantt-left { flex: none; display: flex; flex-direction: column; min-width: 200px; }
.gantt-splitter { width: 5px; flex: none; background: #d5d9e2; cursor: col-resize; }
.gantt-splitter:hover { background: var(--accent); }
.gantt-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gc-wrap { flex: 1; overflow: auto; position: relative; }
.gc-inner { position: relative; }
.gc-head { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 2px solid #c9cfdb; }
.gc-band { position: relative; height: 50%; }
.gc-band.top { border-bottom: 1px solid var(--line-soft); }
.gc-seg { position: absolute; top: 0; height: 100%; display: flex; align-items: center; padding-left: 4px; font-size: 11.5px; color: var(--ink-2); border-left: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; }
.gc-band.top .gc-seg { font-weight: 600; justify-content: flex-start; }
.gc-band.bot .gc-seg { justify-content: center; padding: 0; font-size: 10.5px; }
.gc-seg.we { color: #d65b5b; background: var(--weekend); }
.gc-body { position: relative; }
.gc-tailpad { height: 44px; }
.gc-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #e5484d; opacity: 0.7; z-index: 1; }
.gb { position: absolute; height: 18px; border-radius: 3px; background: var(--bar, var(--bar-blue)); border: 1px solid rgba(30, 80, 160, 0.35); cursor: grab; z-index: 2; overflow: hidden; }
.gb:hover { filter: brightness(1.05); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.gb.sel { box-shadow: 0 0 0 2px var(--sel); }
.gb.done { --bar: #57b07f; border-color: rgba(20, 110, 60, 0.4); }
.gb-pct { height: 100%; background: rgba(15, 50, 120, 0.35); }
.gb.done .gb-pct { background: rgba(10, 80, 40, 0.3); }
.gb-h { position: absolute; right: 0; top: 0; width: 7px; height: 100%; cursor: ew-resize; }
.gb.parent { height: 9px; background: #3b4252; border: 0; border-radius: 1px; cursor: default; overflow: visible; }
.gb.parent::before, .gb.parent::after { content: ""; position: absolute; bottom: -5px; border: 5px solid transparent; border-top-color: #3b4252; }
.gb.parent::before { left: -5px; border-left-width: 5px; transform: translateX(5px); border-right-width: 0; }
.gb.parent::after { right: 0; border-right-width: 5px; border-left-width: 0; }
.gb.parent .gb-pct { background: #7f8aa3; }
.gm { position: absolute; width: 14px; height: 14px; background: #3b4252; transform: rotate(45deg); z-index: 2; cursor: grab; }
.gm.sel { box-shadow: 0 0 0 2px var(--sel); }
.gc-baseline { position: absolute; height: 4px; background: #9aa3b5; border-radius: 2px; z-index: 1; opacity: 0.8; }
.gc-label { position: absolute; line-height: 32px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; pointer-events: none; z-index: 2; }
.gc-deps { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; color: #59657d; }
.gc-deps path { fill: none; stroke: currentColor; stroke-width: 1.2; }

/* ---------- Board ---------- */
.board-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #eef0f4; }
.board-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; }
.lanes { flex: 1; display: flex; gap: 12px; padding: 12px 16px 16px; overflow: auto; align-items: flex-start; }
.lane { width: 280px; flex: none; background: #e3e6ec; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; max-height: 100%; }
.lane.over { outline: 2px dashed var(--accent); background: #dfe7fa; }
.lane.uncategorized { background: #e8e9ee; }
.lane-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-weight: 700; }
.lane-title { flex: 1; }
.count { color: var(--muted); font-weight: 500; }
.lane-body { display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 20px; }
.card { background: #fff; border-radius: 8px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(20, 28, 50, 0.12); cursor: pointer; }
.card:hover { box-shadow: 0 3px 10px rgba(20, 28, 50, 0.16); }
.card.dragging { opacity: 0.5; }
.card.is-parent { border-left: 3px solid #3b4252; }
.card-parent { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.card-title { font-weight: 600; margin-bottom: 8px; word-break: break-word; }
.card-meta { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.card-meta .avatar { margin-left: auto; }
.card-progress { height: 4px; background: var(--line-soft); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.card-progress div { height: 100%; background: #57b07f; }
.lane-add { border: 0; background: none; text-align: left; padding: 8px 6px 2px; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; gap: 4px; border-radius: 6px; }
.lane-add:hover { color: var(--accent); }
.lane-new { flex: none; width: 200px; height: 44px; border: 2px dashed #c6cbd6; background: none; border-radius: 10px; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
.lane-new:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Calendar ---------- */
.cal-wrap { flex: 1; overflow: auto; padding: 12px 18px 24px; }
.cal-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-bar h2 { margin: 0 8px; font-size: 18px; min-width: 170px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.cal-dow { padding: 6px 8px; font-weight: 600; font-size: 12px; color: var(--ink-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbfc; }
.cal-day { min-height: 118px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 0 6px; background: #fff; overflow: hidden; }
.cal-day.we { background: #fafbfc; }
.cal-day.out { background: #f4f5f7; }
.cal-day.out .cal-num { color: #b4bac6; }
.cal-num { font-size: 12px; font-weight: 600; padding: 0 8px 4px; color: var(--ink-2); }
.cal-day.today .cal-num { color: #fff; }
.cal-day.today .cal-num::before { content: ""; }
.cal-day.today .cal-num { background: var(--accent); border-radius: 10px; display: inline-block; margin-left: 4px; padding: 0 7px; }
.cal-item { font-size: 11.5px; line-height: 20px; height: 20px; margin: 2px 0; padding: 0 6px; background: color-mix(in srgb, var(--c) 18%, white); color: color-mix(in srgb, var(--c) 80%, black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-item.s { margin-left: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left: 3px solid var(--c); }
.cal-item.e { margin-right: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.cal-item:hover { filter: brightness(0.96); }
.cal-item.empty { background: none; cursor: default; }
.cal-more { font-size: 11px; color: var(--accent); padding: 0 8px; cursor: pointer; }
.cal-undated { margin-top: 14px; }


/* ---------- DCP refinements for sheet components ---------- */
.g-head, .gc-head { border-bottom: 1px solid var(--color-border-strong); background: var(--color-surface-muted); }
.g-rnh { background: var(--color-surface-muted); }
.g-ch-title { font-weight: 700; font-size: 12px; }
.g-rn { font-family: var(--font-mono); font-size: 10.5px; }
.g-cell.t-date, .g-cell.t-duration, .g-cell.t-percent, .g-cell.t-number, .g-cell.t-predecessor { font-family: var(--font-mono); font-size: 12px; }
/* Status values: dot + text label (no heavy pills) */
.pill { background: none !important; padding: 0; border-radius: 0; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.gc-seg { font-family: var(--font-mono); font-size: 10.5px; }
.gc-band.top .gc-seg { font-family: var(--font-ui); font-size: 11.5px; }
.gc-today { background: var(--color-danger); }
.gb { border-radius: 4px; border-color: rgba(66, 69, 198, 0.35); }
.gb-pct { background: rgba(66, 69, 198, 0.55); }
.gb.done { --bar: #6fb3ac; border-color: rgba(11, 118, 110, 0.4); }
.gb.done .gb-pct { background: rgba(11, 118, 110, 0.45); }
.gb.parent, .gm { background: #2c3345; }
.gb.parent::before, .gb.parent::after { border-top-color: #2c3345; }
.board-wrap { background: var(--color-page); }
.lane { background: #e8ecf3; border-radius: var(--radius-lg); }
.card { border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: none; }
.card:hover { box-shadow: var(--shadow-panel); }
.card-progress div { background: var(--color-success); }
.cal-num { font-family: var(--font-mono); }
.cal-day.today .cal-num { background: var(--color-accent); }
.side-panel { box-shadow: -8px 0 24px rgba(20, 36, 61, .04); }
.panel-head h3 { font-size: 15px; font-weight: 700; }
.cm-text { background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.act .muted.sm { font-family: var(--font-mono); font-size: 10.5px; }

/* ---------- Print ---------- */
@media print {
  body { overflow: visible; background: #fff; }
  .app { display: block; height: auto; }
  .nav, .topbar, .toolbar, .rail, .side-panel, .sh-menus, .sh-right, .g-addrow, .g-addcol, .filter-bar, .gantt-splitter, .skip-link { display: none !important; }
  .content, .main, .sheet-page, .g-wrap, .gc-wrap, .sheet-body { height: auto !important; overflow: visible !important; }
}

/* ---------- Small screens: off-canvas navigation, one column ---------- */
@media (max-width: 760px) {
  .nav { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow-pop); }
  .app.nav-open .nav { transform: none; }
  .topbar .menu-btn { display: inline-flex; }
  .topbar { padding: 0 12px; gap: 10px; height: 56px; }
  .top-search { display: none; }
  .top-location { flex: 1; }
  .app.sheet-mode .topbar { display: flex; height: 48px; }
  .page { padding: 18px 16px 48px; gap: 16px; }
  .page-head h1 { font-size: 26px; }
  .panel { padding: 16px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sheet-head { padding: 8px 12px; }
  .sh-menus { display: none; }
  .sheet-name { max-width: 70vw; }
  .add-person { grid-template-columns: 1fr; }
  .side-panel.open { position: absolute; right: 48px; top: 0; bottom: 0; z-index: 10; box-shadow: var(--shadow-pop); width: min(360px, calc(100vw - 64px)); }
  .modal-foot .btn { flex: 1 1 auto; }
}

/* ---------- Administration console ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-top: -4px; overflow-x: auto; }
.tab { padding: 10px 14px; font-weight: 700; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--color-text); text-decoration: none; }
.tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters .input.sm { width: auto; height: 38px; }
.search-box.compact { flex: 1; min-width: 240px; max-width: 420px; padding: 0 12px; box-shadow: none; border-radius: var(--radius-sm); }
.search-box.compact .input { border: 0; box-shadow: none; padding: 0; background: none; }
.user-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.strong { font-weight: 700; }
a.plain, a.plain:hover { color: inherit; text-decoration: none; }
a.plain:hover .strong { color: var(--color-accent); }
.role-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; }
.role-tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.role-tag.admin { color: var(--color-accent); }
.role-tag.member { color: var(--color-success); }
.role-tag.guest { color: var(--color-warning); }
.role-help { margin-right: 10px; }
.panel-inset { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 8px; }
.sub-title { font-size: 13px; font-weight: 700; margin: 18px 0 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.action-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.action-row:last-child { border-bottom: 0; padding-bottom: 0; }
.danger-zone { border-color: #f0d3d8; }
.plain-list { margin: 0; padding-left: 18px; line-height: 2; }
.check.big { align-items: flex-start; font-weight: 500; }
.check.big input { margin-top: 4px; }
.block { display: block; }
.nowrap { white-space: nowrap; }
td.ua { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-line { flex-wrap: wrap; align-items: center; }
@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
  .action-row { flex-direction: column; align-items: flex-start; }
}