/* ============================================================
   OWNER DASHBOARD v2
   Design tokens and components from the Claude Design handoff
   (docs/design/dashboard-v2/HANDOFF.md §9). Everything is prefixed
   dv2- and scoped under .dv2 so the rest of the site is untouched.
   ============================================================ */

.dv2 {
    --dv2-red: #a43337;
    --dv2-red-dark: #7d2629;
    --dv2-red-accent: #c54549;
    --dv2-red-tint: #fdf2f2;
    --dv2-red-border: #e3a9ab;
    --dv2-ink: #282828;
    --dv2-text: #4a4a4a;
    --dv2-muted: #6b6b6b;
    --dv2-faint: #b5b5b5;
    --dv2-bg: #f0f0f0;
    --dv2-card: #ffffff;
    --dv2-line: #ececec;
    --dv2-line-2: #e2e2e2;
    --dv2-input: #cfcfcf;
    --dv2-primary: #58cb8e;
    --dv2-primary-hover: #3dd375;
    --dv2-primary-ink: #1d1d1d;
    --dv2-ok: #2fb35f;
    --dv2-ok-text: #1f7a4c;
    --dv2-ok-tint: #e3f5ea;
    --dv2-warn-text: #7a4a00;
    --dv2-warn: #b45309;
    --dv2-warn-tint: #fff4e5;
    --dv2-amber: #e0a100;
    --dv2-info: #084298;
    --dv2-info-tint: #e7f1ff;
    --dv2-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .05);
    --dv2-radius-card: 16px;
    --dv2-radius: 10px;

    font-family: 'Helvetica Neue', 'Lucida Grande', Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--dv2-ink);
    background: var(--dv2-bg);
    padding-bottom: 48px;
}

.dv2 *, .dv2 *::before, .dv2 *::after { box-sizing: border-box; }
.dv2 button { font-family: inherit; }
.dv2 .dv2-mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.dv2 .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Band (red header with server name and tabs) ───────────── */
.dv2-band { background: var(--dv2-red); color: #fff; }
.dv2-band-inner { padding-top: 26px; }
.dv2-band-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dv2-eyebrow { font-size: 12px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; color: #f6dfe0; margin: 0 0 4px; }
.dv2-title { font-size: 30px; font-weight: bold; line-height: 1.15; margin: 0; color: #fff; word-break: break-word; }
.dv2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: #f6dfe0; }
.dv2-meta img { width: 1.2em; height: .9em; object-fit: cover; border-radius: 2px; }
.dv2-meta .dv2-mono { color: #fff; }
.dv2-status { display: flex; align-items: center; gap: 12px; }
.dv2-pill-online { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--dv2-ink); font-weight: bold; font-size: 14px; }
.dv2-pill-online::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dv2-ok); }
.dv2-pill-online.offline::before { background: var(--dv2-red-accent); }
.dv2-updated { font-size: 13px; color: #f6dfe0; }
.dv2-refresh { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dv2-refresh:hover { background: rgba(255,255,255,.12); }
.dv2-refresh:disabled { opacity: .6; cursor: wait; }

.dv2-tabs { display: flex; gap: 4px; margin-top: 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dv2-tabs::-webkit-scrollbar { display: none; }
.dv2-tab { flex: none; height: 44px; padding: 0 18px; border: none; border-radius: 10px 10px 0 0; background: transparent; color: #f6dfe0; font-size: 14px; font-weight: bold; white-space: nowrap; cursor: pointer; }
.dv2-tab:hover { color: #fff; background: rgba(255,255,255,.08); }
/* Active tab: dark text on the page background. The mock rendered it white on white. */
.dv2-tab.active { background: var(--dv2-bg); color: var(--dv2-ink); }
.dv2-tab:focus-visible, .dv2 button:focus-visible, .dv2 input:focus-visible, .dv2 textarea:focus-visible, .dv2 select:focus-visible, .dv2 a:focus-visible { outline: 3px solid var(--dv2-info); outline-offset: 2px; }

.dv2-body { padding-top: 24px; }
.dv2-stack { display: flex; flex-direction: column; gap: 20px; }
.dv2-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; }
.dv2-narrow { max-width: 760px; }

/* ── Cards ─────────────────────────────────────────────────── */
.dv2-card { position: relative; background: var(--dv2-card); border-radius: var(--dv2-radius-card); box-shadow: var(--dv2-shadow); padding: 22px 24px; min-width: 0; }
.dv2-card-title { font-size: 19px; font-weight: bold; margin: 0; line-height: 1.3; }
.dv2-card-title .count { font-weight: normal; color: var(--dv2-muted); }
.dv2-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dv2-sub { font-size: 14px; color: var(--dv2-text); margin: 4px 0 0; }
.dv2-small { font-size: 13px; color: var(--dv2-muted); }
.dv2-label { display: block; font-size: 14px; font-weight: bold; margin: 0 0 6px; }
.dv2-hint { font-size: 13px; color: var(--dv2-muted); margin-top: 6px; }
.dv2-hint.error { color: var(--dv2-red); }
.dv2-danger-card { border: 1px solid var(--dv2-red-border); box-shadow: none; }
.dv2-danger-card .dv2-card-title { color: var(--dv2-red); }

/* ── Buttons, inputs, segmented controls, switches ─────────── */
.dv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--dv2-input); border-radius: var(--dv2-radius); background: #fff; color: var(--dv2-ink); font-size: 13px; font-weight: bold; cursor: pointer; white-space: nowrap; text-decoration: none; }
.dv2-btn:hover:not(:disabled) { border-color: #a9a9a9; }
.dv2-btn:disabled { opacity: .45; cursor: not-allowed; }
.dv2-btn.active { background: var(--dv2-ink); border-color: var(--dv2-ink); color: #fff; }
.dv2-btn-primary { height: 44px; padding: 0 18px; border: none; background: var(--dv2-primary); color: var(--dv2-primary-ink); font-size: 14px; }
.dv2-btn-primary:hover:not(:disabled) { background: var(--dv2-primary-hover); }
.dv2-btn-danger { height: 44px; padding: 0 18px; border: none; background: var(--dv2-red); color: #fff; font-size: 14px; }
.dv2-btn-danger:hover:not(:disabled) { background: var(--dv2-red-dark); }
.dv2-btn-danger-outline { border-color: var(--dv2-red-border); color: var(--dv2-red); }
.dv2-btn-sm { height: 34px; padding: 0 12px; }
.dv2-icon-btn { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; color: var(--dv2-text); cursor: pointer; padding: 0; }
.dv2-icon-btn:hover { background: #f2f2f2; }
.dv2-link { background: none; border: none; padding: 0; color: var(--dv2-red); font-weight: bold; cursor: pointer; text-decoration: none; font-size: inherit; }
.dv2-link:hover { text-decoration: underline; }

.dv2-input, .dv2-textarea, .dv2-select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--dv2-input); border-radius: var(--dv2-radius); background: #fff; color: var(--dv2-ink); font-size: 15px; font-family: inherit; }
.dv2-textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; }
.dv2-input.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: #f7f7f7; }
.dv2-row-input { display: flex; gap: 8px; align-items: stretch; }
.dv2-row-input > .dv2-input { flex: 1; min-width: 0; }

.dv2-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--dv2-bg); }
.dv2-seg button { height: 34px; padding: 0 12px; border: none; border-radius: 8px; background: transparent; color: var(--dv2-text); font-size: 13px; font-weight: bold; cursor: pointer; white-space: nowrap; }
.dv2-seg button.active { background: #fff; color: var(--dv2-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.dv2-switch { flex: none; position: relative; width: 48px; height: 28px; border-radius: 14px; border: none; padding: 0; cursor: pointer; background: #c4c4c4; transition: background .2s; }
.dv2-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; }
.dv2-switch[aria-checked="true"] { background: var(--dv2-ok); }
.dv2-switch[aria-checked="true"]::after { left: 23px; }
.dv2-switch:disabled { opacity: .5; cursor: not-allowed; }

.dv2-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.dv2-check input { width: 18px; height: 18px; accent-color: var(--dv2-red); }

/* ── Chips and badges ──────────────────────────────────────── */
.dv2-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: bold; padding: 2px 9px; border-radius: 999px; background: var(--dv2-bg); color: var(--dv2-ink); white-space: nowrap; }
.dv2-chip.ok { background: var(--dv2-ok-tint); color: var(--dv2-ok-text); }
.dv2-chip.admin { background: var(--dv2-red-tint); color: var(--dv2-red); }
.dv2-chip.self { background: #efefef; color: var(--dv2-text); }
.dv2-chip.warn { background: var(--dv2-warn-tint); color: var(--dv2-warn-text); }
.dv2-chip.info { background: var(--dv2-info-tint); color: var(--dv2-info); }
.dv2-chip.dark { background: var(--dv2-ink); color: #fff; }
.dv2-tag { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: bold; padding: 0 7px; line-height: 18px; border-radius: 6px; background: var(--dv2-bg); color: var(--dv2-text); }
.dv2-tag.temp { background: var(--dv2-warn-tint); color: var(--dv2-warn-text); }
.dv2-tag.link { background: var(--dv2-info-tint); color: var(--dv2-info); }
.dv2-tag.ok { background: var(--dv2-ok-tint); color: var(--dv2-ok-text); }
.dv2-tag.no { background: var(--dv2-red-tint); color: var(--dv2-red); }
.dv2-tag.warn { background: var(--dv2-warn-tint); color: var(--dv2-warn-text); }

/* ── Alert banner ──────────────────────────────────────────── */
.dv2-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; padding: 16px 20px; border-radius: 14px; background: var(--dv2-warn-tint); border: 1px solid #f3d6a8; }
.dv2-alert strong { display: block; font-size: 16px; color: var(--dv2-warn-text); }
.dv2-alert p { margin: 2px 0 0; font-size: 14px; color: var(--dv2-text); }

/* ── Summary strip ─────────────────────────────────────────── */
.dv2-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.dv2-strip > div { padding: 18px 20px; border-left: 1px solid var(--dv2-line); min-width: 0; }
.dv2-strip > div:first-child { border-left: none; }
.dv2-strip .k { font-size: 13px; color: var(--dv2-muted); }
.dv2-strip .v { font-size: 26px; font-weight: bold; line-height: 1.25; margin: 2px 0; }
.dv2-strip .v .of { font-size: 16px; font-weight: normal; color: var(--dv2-muted); }
.dv2-strip .v.ok { color: var(--dv2-ok-text); }
.dv2-strip .v.warn { color: var(--dv2-warn); }
.dv2-strip .s { font-size: 13px; color: var(--dv2-muted); }
.dv2-meter { height: 6px; border-radius: 3px; background: var(--dv2-line); overflow: hidden; margin-top: 8px; }
.dv2-meter > span { display: block; height: 100%; background: var(--dv2-ok); border-radius: 3px; }

/* ── Tree (Who's online / Server layout) ───────────────────── */
.dv2-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dv2-heads-up { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f6f6f6; font-size: 14px; color: var(--dv2-text); }
.dv2-board { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; align-items: flex-start; }
.dv2-tree { flex: 1.4 1 440px; min-width: 0; }
.dv2-tree.structure { flex: 1 1 360px; }
.dv2-row { position: relative; display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 4px; border-radius: 10px; }
.dv2-row.person { min-height: 48px; gap: 8px; }
.dv2-row:hover { background: #fafafa; }
.dv2-row.selected { background: var(--dv2-red-tint); box-shadow: inset 3px 0 0 var(--dv2-red); }
.dv2-row.picked { background: var(--dv2-red-tint); }
.dv2-row.menu-open { background: #f6f6f6; }
.dv2-row.dragging { opacity: .4; }
.dv2-row.dimmed { opacity: .55; }
.dv2-row.drop-inside { background: var(--dv2-ok-tint); outline: 2px dashed var(--dv2-ok); outline-offset: -2px; }
.dv2-row.drop-before { box-shadow: inset 0 3px 0 var(--dv2-red); }
.dv2-row.drop-after { box-shadow: inset 0 -3px 0 var(--dv2-red); }
.dv2-row .grip { width: 14px; flex: none; color: #b5b5b5; cursor: grab; font-size: 12px; line-height: 1; user-select: none; }
.dv2-row .chev { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--dv2-muted); cursor: pointer; border-radius: 8px; padding: 0; }
.dv2-row .chev svg { transition: transform .15s; }
.dv2-row .chev.open svg { transform: rotate(90deg); }
.dv2-row .chev-spacer { width: 36px; flex: none; }
.dv2-row .main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; border: none; background: transparent; padding: 4px 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.dv2-row .main .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dv2-row.root .main .name { font-weight: 700; }
.dv2-row.temp .main .name { font-style: italic; }
.dv2-row .ch-icon { flex: none; color: var(--dv2-muted); }
.dv2-count { flex: none; min-width: 24px; text-align: center; font-size: 12px; font-weight: bold; padding: 2px 8px; border-radius: 999px; background: var(--dv2-bg); font-variant-numeric: tabular-nums; }
.dv2-count.empty { background: transparent; color: var(--dv2-faint); }
.dv2-drop-zones { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 2; }
.dv2-drop-zones > div { flex: 3; }
.dv2-drop-zones > div.mid { flex: 4; }

.dv2-avatar { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--dv2-red-tint); color: var(--dv2-red); font-size: 13px; font-weight: bold; }
.dv2-avatar.lg { width: 48px; height: 48px; font-size: 18px; }
.dv2-avatar .ping { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; background: var(--dv2-ok); }
.dv2-avatar .ping.ok { background: var(--dv2-amber); }
.dv2-avatar .ping.poor { background: var(--dv2-red-accent); }
.dv2-avatar .ping.unknown { background: #bdbdbd; } /* the client reports no ping */
.dv2-person-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dv2-person-text .top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dv2-person-text .nm { font-weight: bold; }
.dv2-person-text .ln { font-size: 12px; color: var(--dv2-muted); }
.dv2-person-text .tech { font-size: 12px; color: var(--dv2-muted); }
.dv2-ico { flex: none; color: var(--dv2-muted); display: inline-flex; }
.dv2-ico.reg { color: var(--dv2-ok); }

.dv2-tip { font-size: 13px; color: var(--dv2-muted); margin-top: 10px; }
.dv2-empty { padding: 26px 16px; text-align: center; color: var(--dv2-text); }
.dv2-empty strong { display: block; color: var(--dv2-ink); font-size: 16px; margin-bottom: 4px; }

.dv2-bulk { position: sticky; bottom: 12px; z-index: 15; margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; background: var(--dv2-ink); color: #fff; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.dv2-bulk .lbl { flex: 1 1 auto; font-size: 14px; }
.dv2-bulk button { height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; background: transparent; color: #fff; font-size: 13px; font-weight: bold; cursor: pointer; }
.dv2-bulk button.danger { border-color: var(--dv2-red-border); color: #ffd7d9; }
.dv2-bulk button.done { border: none; background: #fff; color: var(--dv2-ink); }
.dv2-bulk button:disabled { opacity: .4; cursor: not-allowed; }

/* ── Side panels ───────────────────────────────────────────── */
.dv2-panel { flex: 1 1 340px; min-width: 0; background: #f6f6f6; border-radius: 14px; padding: 16px 18px; }
.dv2-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dv2-panel .path { font-size: 12px; color: var(--dv2-muted); }
.dv2-panel h3 { font-size: 18px; font-weight: bold; margin: 2px 0 2px; word-break: break-word; }
.dv2-panel h4 { font-size: 15px; font-weight: bold; margin: 18px 0 6px; }
.dv2-panel .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dv2-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 6px; margin: 14px 0 0; font-size: 14px; }
.dv2-facts dt { color: var(--dv2-muted); font-weight: normal; }
.dv2-facts dd { margin: 0; word-break: break-word; }
.dv2-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.dv2-actions-grid .dv2-btn { height: 44px; }
.dv2-people-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dv2-people-chips button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid var(--dv2-line-2); background: #fff; cursor: pointer; font-size: 13px; font-weight: bold; }
.dv2-people-chips .dv2-avatar { width: 24px; height: 24px; font-size: 11px; }
.dv2-back { display: none; }
.dv2-notes { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--dv2-text); }

.dv2-presets { background: #fff; border-radius: 12px; padding: 4px 14px; }
.dv2-preset { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--dv2-line); }
.dv2-preset:first-child { border-top: none; }
.dv2-preset .txt { flex: 1; min-width: 0; }
.dv2-preset .txt strong { display: block; font-size: 14px; }
.dv2-preset .txt span { font-size: 13px; color: var(--dv2-text); }
.dv2-acl { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; background: #fff; border-radius: 10px; overflow: hidden; }
.dv2-acl th, .dv2-acl td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--dv2-line); vertical-align: top; }
.dv2-acl th { background: #fafafa; border-top: none; }
.dv2-disclosure { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 6px 0; font-weight: bold; color: var(--dv2-ink); cursor: pointer; font-size: 14px; }
.dv2-disclosure svg { transition: transform .15s; }
.dv2-disclosure.open svg { transform: rotate(90deg); }

/* ── Menus ─────────────────────────────────────────────────── */
.dv2-menu-wrap { position: relative; flex: none; }
.dv2-menu-catch { position: fixed; inset: 0; z-index: 30; }
.dv2-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 31; min-width: 230px; padding: 6px; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04); }
.dv2-menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 38px; padding: 7px 12px; border: none; border-radius: 8px; background: transparent; text-align: left; font-size: 14px; color: var(--dv2-ink); cursor: pointer; }
.dv2-menu button:hover:not(:disabled) { background: #f4f4f4; }
.dv2-menu button.danger { color: var(--dv2-red); }
.dv2-menu button:disabled { color: var(--dv2-faint); cursor: not-allowed; }
.dv2-menu button.sep { margin-top: 6px; box-shadow: 0 -1px 0 var(--dv2-line); border-radius: 0 0 8px 8px; }

/* ── Dialogs (become bottom sheets on phones) ──────────────── */
.dv2-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(40,40,40,.5); display: flex; justify-content: center; align-items: flex-start; padding: 72px 16px 24px; overflow-y: auto; }
.dv2-dialog { width: 100%; max-width: 500px; background: #fff; border-radius: 16px; box-shadow: 0 20px 56px rgba(0,0,0,.25); overflow: hidden; }
.dv2-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 0; }
.dv2-dialog-head h2 { font-size: 19px; font-weight: bold; margin: 0; word-break: break-word; }
.dv2-dialog-body { padding: 12px 20px 4px; font-size: 14px; color: var(--dv2-text); }
.dv2-dialog-body p { margin: 0 0 10px; }
.dv2-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 20px 20px; }
.dv2-options { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; margin: 6px 0; }
.dv2-option { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 42px; border-radius: 10px; border: 1px solid var(--dv2-line); background: #fff; cursor: pointer; text-align: left; font-size: 14px; color: var(--dv2-ink); width: 100%; }
.dv2-option.checked { border-color: var(--dv2-red); background: var(--dv2-red-tint); }
.dv2-option:disabled { color: var(--dv2-faint); cursor: not-allowed; }
.dv2-option .note { margin-left: auto; font-size: 12px; color: var(--dv2-muted); }
.dv2-sheet-items button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 10px 12px; border: none; border-radius: 12px; background: transparent; text-align: left; font-size: 16px; color: var(--dv2-ink); cursor: pointer; }
.dv2-sheet-items button.danger { color: var(--dv2-red); }
.dv2-sheet-items button:disabled { color: var(--dv2-faint); }

/* ── Toasts ────────────────────────────────────────────────── */
.dv2-toasts { position: fixed; z-index: 1080; right: 16px; bottom: 16px; width: 360px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 8px; }
.dv2-toast { display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px 14px 16px; border-radius: 14px; box-shadow: 0 14px 36px rgba(0,0,0,.25); color: #fff; background: var(--dv2-ink); }
.dv2-toast.error { background: var(--dv2-red); }
.dv2-toast .ico { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--dv2-ok); font-weight: bold; }
.dv2-toast.error .ico { background: rgba(255,255,255,.25); }
.dv2-toast .txt { flex: 1; min-width: 0; font-size: 14px; }
.dv2-toast .txt strong { display: block; }
.dv2-toast button { background: transparent; border: none; color: #fff; cursor: pointer; font-weight: bold; padding: 2px 6px; }

/* ── Events ────────────────────────────────────────────────── */
.dv2-next { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.dv2-datebadge { flex: none; width: 60px; padding: 8px 0; border-radius: 12px; background: var(--dv2-red-tint); color: var(--dv2-red); text-align: center; line-height: 1.1; }
.dv2-datebadge .d { font-size: 12px; font-weight: bold; text-transform: uppercase; }
.dv2-datebadge .n { font-size: 24px; font-weight: bold; }
.dv2-datebadge .m { font-size: 12px; }
.dv2-next .info { flex: 1 1 260px; min-width: 0; }
.dv2-next .info .eyebrow { font-size: 12px; font-weight: bold; letter-spacing: .06em; color: var(--dv2-muted); text-transform: uppercase; }
.dv2-next .info .title { font-size: 19px; font-weight: bold; }
.dv2-event { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.dv2-event.ended { opacity: .6; }
.dv2-event.editing { box-shadow: 0 0 0 2px var(--dv2-red); }
.dv2-preview { background: #f6f6f6; border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.dv2-preview li { margin: 4px 0; }
.dv2-form-row { margin-top: 16px; }

/* ── Members & bans ────────────────────────────────────────── */
.dv2-list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--dv2-line); }
.dv2-list-row:first-of-type { border-top: none; }
.dv2-list-row .who { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.dv2-list-row .who .t { min-width: 0; }
.dv2-list-row .who .t strong { display: block; word-break: break-word; }
.dv2-list-row .who .t span { font-size: 13px; color: var(--dv2-muted); }
.dv2-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c4c4c4; margin-right: 4px; }
.dv2-dot.on { background: var(--dv2-ok); }
.dv2-list-row .acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ── Phones ────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .dv2-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .dv2-title { font-size: 24px; }
    .dv2-card { padding: 18px 14px; }
    .dv2-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dv2-strip > div:nth-child(3) { border-left: none; }
    .dv2-strip > div:nth-child(n+3) { border-top: 1px solid var(--dv2-line); }
    .dv2 .dv2-btn, .dv2 .dv2-icon-btn, .dv2 .dv2-row .chev, .dv2-seg button { min-height: 44px; }
    .dv2 .dv2-icon-btn, .dv2 .dv2-row .chev { min-width: 44px; }
    .dv2 .dv2-input, .dv2 .dv2-textarea, .dv2 .dv2-select { font-size: 16px; }
    .dv2-row { min-height: 48px; }
    .dv2-row.person { min-height: 56px; }
    .dv2-row .grip, .dv2-drop-zones { display: none; }
    .dv2-board.has-panel .dv2-tree { display: none; }
    .dv2-panel { flex-basis: 100%; }
    .dv2-back { display: inline-flex; margin-bottom: 8px; }
    .dv2-backdrop { align-items: flex-end; padding: 0; }
    .dv2-dialog { max-width: 100%; border-radius: 20px 20px 0 0; }
    .dv2-dialog-foot > * { flex: 1; }
    .dv2-toasts { left: 12px; right: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .dv2 * { transition: none !important; }
}

/* Desktop/phone-only helpers (the ⋯ menu becomes a bottom sheet on phones). */
.dv2-phone-only { display: none !important; }
@media (max-width: 767.98px) {
    .dv2-hide-phone { display: none !important; }
    .dv2-phone-only { display: inline-flex !important; }
    p.dv2-phone-only { display: block !important; }
    .dv2-desktop-only { display: none !important; }
}

/* ── Reused cards ──────────────────────────────────────────────
   ServerManagementCard, ServerMigrationCard, ApiKeyCard, BadgeSharingCard, WebhookCard,
   ServerLogCard, SendMessageCard, DeleteAccountCard and the activity chart are shared with the
   admin modal, so they keep their Bootstrap markup. Inside .dv2 they take the v2 look. */
.dv2 .card { border: 0; background: transparent; box-shadow: none; margin: 0; }
.dv2 .card-body { padding: 0; }
.dv2 .card-title, .dv2 .dv2-card > h5:first-child, .dv2 .dv2-card > h6:first-child { font-size: 19px; font-weight: bold; line-height: 1.3; color: var(--dv2-ink); margin: 0 0 6px; }
.dv2 .card-title .oi { display: none; }
.dv2 .text-muted { color: var(--dv2-muted) !important; }
.dv2 .form-label, .dv2 label.fw-bold, .dv2 .card-body label { font-size: 14px; font-weight: bold; color: var(--dv2-ink); }
.dv2 .form-control, .dv2 .form-select { min-height: 44px; border: 1px solid var(--dv2-input); border-radius: var(--dv2-radius); font-size: 15px; color: var(--dv2-ink); box-shadow: none; }
.dv2 .form-control-sm { min-height: 40px; font-size: 14px; }
.dv2 .form-control:focus, .dv2 .form-select:focus { border-color: var(--dv2-info); box-shadow: 0 0 0 3px var(--dv2-info-tint); }
.dv2 textarea.form-control { min-height: 92px; }
.dv2 .input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dv2 .input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dv2 .form-check-input:checked { background-color: var(--dv2-red); border-color: var(--dv2-red); }

.dv2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--dv2-input); border-radius: var(--dv2-radius); background: #fff; color: var(--dv2-ink); font-size: 13px; font-weight: bold; box-shadow: none; }
.dv2 .btn:hover:not(:disabled) { border-color: #a9a9a9; background: #fff; color: var(--dv2-ink); }
.dv2 .btn:disabled { opacity: .45; }
.dv2 .btn-sm { min-height: 34px; padding: 0 12px; }
.dv2 .btn-lg { min-height: 44px; font-size: 14px; }
.dv2 .btn .oi { font-size: 12px; margin: 0 !important; }
.dv2 .btn-primary, .dv2 .btn-success { border-color: var(--dv2-primary); background: var(--dv2-primary); color: var(--dv2-primary-ink); }
.dv2 .btn-primary:hover:not(:disabled), .dv2 .btn-success:hover:not(:disabled) { border-color: var(--dv2-primary-hover); background: var(--dv2-primary-hover); color: var(--dv2-primary-ink); }
.dv2 .btn-danger { border-color: var(--dv2-red); background: var(--dv2-red); color: #fff; }
.dv2 .btn-danger:hover:not(:disabled) { border-color: var(--dv2-red-dark); background: var(--dv2-red-dark); color: #fff; }
.dv2 .btn-outline-danger { border-color: var(--dv2-red-border); color: var(--dv2-red); }
.dv2 .btn-outline-danger:hover:not(:disabled) { border-color: var(--dv2-red); background: var(--dv2-red-tint); color: var(--dv2-red); }
.dv2 .btn-link { border: 0; background: none; min-height: 0; padding: 0; }
.dv2 .btn-close { min-height: 0; }
.dv2 .alert { border-radius: var(--dv2-radius); font-size: 14px; }

.dv2 .stats-chart-empty { padding: 24px 0 12px; text-align: center; color: var(--dv2-muted); }
.dv2 .stats-chart-empty .oi { font-size: 20px; color: var(--dv2-faint); }
.dv2 .stats-chart-empty p { font-size: 14px !important; margin-top: 6px; }
.dv2 .line-separator { height: 0; border: 0; border-bottom: 1px solid var(--dv2-line); margin: 16px 0; }
.dv2 hr { border-color: var(--dv2-line); opacity: 1; }
.dv2 .dv2-own-title .card-title { display: none; }


/* ── Loading feedback (slow nodes) ─────────────────────────── */
@keyframes dv2-spin { to { transform: rotate(360deg); } }
.dv2-toast.pending .ico { background: transparent; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: dv2-spin .8s linear infinite; }
.dv2-refresh.spinning i { animation: dv2-spin .8s linear infinite; }
.dv2-pill-online.loading::before { background: var(--dv2-faint); }
.dv2-loading { display: flex; align-items: center; gap: 10px; padding: 18px 0; color: var(--dv2-muted); font-size: 14px; }
.dv2-loading::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 3px solid var(--dv2-line-2); border-top-color: var(--dv2-red); animation: dv2-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .dv2-toast.pending .ico, .dv2-refresh.spinning i, .dv2-loading::before { animation-duration: 2.4s; } }

/* ── Site v2 identity (docs/design/site-v2 §4) ─────────────── */
/* Red band headline: charcoal with a red emboss, as on the original site (contrast kept by decision). */
.dv2 .dv2-title { color: var(--dv2-ink); text-shadow: 0 1px 1px var(--dv2-red-accent); letter-spacing: -1px; }
.dv2-meta { gap: 4px; }
/* Card headings: uppercase grey, last word red (marked with .hl). */
.dv2-card-title { text-transform: uppercase; color: #737373; letter-spacing: -0.5px; }
.dv2-card-title .hl { color: var(--dv2-red-accent); }
.dv2-card-title .count { text-transform: uppercase; }
.dv2-card-title.plain { text-transform: none; color: var(--dv2-ink); letter-spacing: 0; }
.dv2-danger-card .dv2-card-title { color: var(--dv2-red); }

/* Collapsed "Advanced · subject" cards in Settings. */
.dv2-advanced-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 0; text-align: left; cursor: pointer; color: var(--dv2-ink); font-size: 14px; }
.dv2-advanced-head strong { font-size: 17px; }
.dv2-advanced-head span { color: var(--dv2-muted); }
.dv2-advanced-head svg { transition: transform .15s; flex: none; }
.dv2-advanced-head.open svg { transform: rotate(90deg); }
.dv2-advanced-body { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--dv2-line); }
.dv2-subhead { font-size: 15px; font-weight: bold; margin: 0 0 4px; }
.dv2-inset { margin-top: 14px; padding: 16px; border: 1px solid var(--dv2-line); border-radius: 12px; }
.dv2-card-title.plain#message-title { font-size: 15px; margin-bottom: 8px; }
@media (max-width: 767.98px) { .dv2-phone-only.block { display: block !important; } }

/* Admin → Servers → View: who owns the server and the related admin pages, above the band. */
.dv2-admin-bar { background: #fff4d6; border-bottom: 1px solid #ecd9a4; color: #4a3b10; font-size: 13px; }
.dv2-admin-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 8px; padding-bottom: 8px; }
.dv2-admin-bar a { color: #7a4a00; font-weight: bold; }
.dv2-admin-links { display: inline-flex; gap: 12px; margin-left: auto; }
@media (max-width: 767.98px) { .dv2-admin-links { margin-left: 0; } }