@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  src: url('/fonts/plex-sans-var.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/plex-mono-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/plex-mono-500.woff2') format('woff2');
  font-display: swap;
}

:root {
  --surface-0: #F3F6F6;
  --surface-1: #FFFFFF;
  --surface-2: #E7EDED;
  --surface-3: #DCE5E5;
  --border: #D3DEDE;
  --border-strong: #B9C8C8;
  --ink-primary: #101E1D;
  --ink-secondary: #435554;
  --ink-muted: #74898A;
  --accent: #9C6B2E;
  --accent-strong: #7E551F;
  --accent-soft: #F1E3D0;
  --good: #237A54;
  --good-soft: #DDEFE5;
  --warning: #A16A0A;
  --warning-soft: #F6E8CB;
  --critical: #B23A28;
  --critical-soft: #F7DFDA;
  --info: #2E6B80;
  --info-soft: #DCEBEF;
  --shadow: rgba(16, 30, 29, 0.10);
  --font-display: 'Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-0: #0B1415; --surface-1: #101B1C; --surface-2: #17262A; --surface-3: #1F3033;
    --border: #24373A; --border-strong: #345053;
    --ink-primary: #EAF2F1; --ink-secondary: #A9BFBE; --ink-muted: #6D8A89;
    --accent: #D6A257; --accent-strong: #E8B96F; --accent-soft: #2C2013;
    --good: #57B98A; --good-soft: #16332A;
    --warning: #E0B23D; --warning-soft: #332C15;
    --critical: #E17A63; --critical-soft: #35201C;
    --info: #6FB0C4; --info-soft: #182D33;
    --shadow: rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  --surface-0: #0B1415; --surface-1: #101B1C; --surface-2: #17262A; --surface-3: #1F3033;
  --border: #24373A; --border-strong: #345053;
  --ink-primary: #EAF2F1; --ink-secondary: #A9BFBE; --ink-muted: #6D8A89;
  --accent: #D6A257; --accent-strong: #E8B96F; --accent-soft: #2C2013;
  --good: #57B98A; --good-soft: #16332A;
  --warning: #E0B23D; --warning-soft: #332C15;
  --critical: #E17A63; --critical-soft: #35201C;
  --info: #6FB0C4; --info-soft: #182D33;
  --shadow: rgba(0, 0, 0, 0.4);
}
:root[data-theme="light"] {
  --surface-0: #F3F6F6; --surface-1: #FFFFFF; --surface-2: #E7EDED; --surface-3: #DCE5E5;
  --border: #D3DEDE; --border-strong: #B9C8C8;
  --ink-primary: #101E1D; --ink-secondary: #435554; --ink-muted: #74898A;
  --accent: #9C6B2E; --accent-strong: #7E551F; --accent-soft: #F1E3D0;
  --good: #237A54; --good-soft: #DDEFE5;
  --warning: #A16A0A; --warning-soft: #F6E8CB;
  --critical: #B23A28; --critical-soft: #F7DFDA;
  --info: #2E6B80; --info-soft: #DCEBEF;
  --shadow: rgba(16, 30, 29, 0.10);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--surface-0); color: var(--ink-primary);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body { overflow-x: hidden; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
button, select, input { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.sidebar { background: var(--surface-1); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.wordmark { display: flex; align-items: center; gap: 9px; padding: 4px 8px 20px; text-decoration: none; color: inherit; }
.wordmark-mark { width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(145deg, var(--accent-strong), var(--accent)); position: relative; flex: none; box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 45%, transparent); }
.wordmark-mark::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid var(--surface-1); border-radius: 2px; }
.wordmark-text { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; }
.wordmark-sub { font-size: 10.5px; color: var(--ink-muted); font-weight: 500; }
.preview-badge { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; margin: 0 8px 18px; text-align: center; }
.nav-group { margin-bottom: 4px; }
.nav-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding: 12px 10px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; color: var(--ink-secondary); font-size: 13.5px; font-weight: 500; text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background .12s, color .12s; }
.nav-item:hover { background: var(--surface-2); color: var(--ink-primary); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav-icon { width: 15px; height: 15px; flex: none; opacity: .85; }
/* Unread-notification count on the sidebar's Notifications link — same
   shape as the admin panel's own nav-badge (web/admin/css/style.css),
   injected dynamically by layout.js's refreshNotifBadge rather than
   present in this page's own static markup (same pattern
   initOrgSwitcher already uses for the sidebar footer). */
.nav-badge { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; background: var(--critical-soft); color: var(--critical); padding: 1px 6px; border-radius: 999px; }
.project-list { display: flex; flex-direction: column; gap: 1px; }

/* Project switcher dropdown — replaces a permanently-listed sidebar of
   every project (doesn't scale) on pages that aren't already scoped to
   one project (those show a branches sidebar instead, see .branch-nav). */
.proj-switcher-chevron { transition: transform .12s; }
.proj-switcher-btn[aria-expanded="true"] .proj-switcher-chevron { transform: rotate(180deg); }
.proj-switcher-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 12px 32px var(--shadow); z-index: 30; padding: 6px; max-height: 320px; overflow-y: auto; }
.proj-switcher-panel.open { display: block; }
.proj-switcher-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--ink-secondary); text-decoration: none; }
.proj-switcher-row:hover { background: var(--surface-2); color: var(--ink-primary); }

/* Registered-HostOdoo-user picker (Collaborators, Handover) — a custom
   panel instead of a native <datalist>, which renders inconsistently
   across browsers (no styling control, no support at all in mobile
   Safari) and made real matches hard to tell apart from free-typed text. */
.user-picker-wrap { position: relative; }
.user-picker-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 12px 32px var(--shadow); z-index: 30; padding: 6px; max-height: 240px; overflow-y: auto; }
.user-picker-panel.open { display: block; }
.user-picker-row { padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.user-picker-row:hover, .user-picker-row.active { background: var(--surface-2); }
.user-picker-row .name { font-size: 13px; font-weight: 600; color: var(--ink-primary); }
.user-picker-row .email { font-size: 11px; color: var(--ink-muted); }
.user-picker-empty { padding: 8px 10px; font-size: 12.5px; color: var(--ink-muted); }
.proj-switcher-divider { height: 1px; background: var(--border); margin: 5px 4px; }
.proj-switcher-new { color: var(--accent-strong); font-weight: 600; }
.project-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; color: var(--ink-secondary); font-size: 13px; text-align: left; padding: 7px 10px 7px 20px; border-radius: 6px; cursor: pointer; }
.project-nav-item:hover { background: var(--surface-2); }
.project-nav-item.active { background: var(--surface-2); color: var(--ink-primary); font-weight: 600; }
.health-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.health-dot.good { background: var(--good); } .health-dot.warning { background: var(--warning); } .health-dot.critical { background: var(--critical); } .health-dot.muted { background: var(--ink-muted); }
.project-nav-item span.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 9px; padding: 14px 8px 4px; }
.org-avatar { width: 26px; height: 26px; border-radius: 6px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-secondary); flex: none; }
.org-name { font-size: 12.5px; font-weight: 600; }
.org-role { font-size: 10.5px; color: var(--ink-muted); }
.org-switcher-panel { display: none; position: absolute; bottom: 100%; left: 8px; right: 8px; margin-bottom: 6px; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 12px 32px var(--shadow); z-index: 30; padding: 6px; max-height: 260px; overflow-y: auto; }
.org-switcher-panel.open { display: block; }
.org-switcher-row { display: flex; align-items: center; gap: 8px; font-family: inherit; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 56px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; background: color-mix(in srgb, var(--surface-0) 88%, transparent); backdrop-filter: blur(6px); z-index: 5; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-muted); }
.crumbs b { color: var(--ink-primary); font-weight: 600; }
.sync-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); position: relative; }
.sync-dot::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--good); opacity: .35; animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2.1); opacity: 0; } }
.content { padding: 30px clamp(28px, 4vw, 64px) 70px; width: 100%; }
/* Project Detail workspace: no chrome sits above it (see the topbar/
   page-head removal), so it fills the complete width and height of the
   viewport instead of floating in the usual page padding. */
.content.full-bleed { padding: 0; display: flex; flex-direction: column; min-height: 100vh; }
.content.full-bleed .osh-shell { flex: 1; display: flex; flex-direction: column; border: none; border-radius: 0; }
.content.full-bleed .osh-body { flex: 1; overflow-y: auto; }
.view { display: none; }
.osh-panel { display: none; }
.osh-panel.active { display: block; }
.view.active { display: block; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.page-title { font-size: clamp(22px, 2vw, 27px); font-weight: 700; letter-spacing: -0.01em; }
.page-sub { font-size: 13.5px; color: var(--ink-muted); margin-top: 3px; }

.btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 7px; border: 1px solid var(--border-strong); cursor: pointer; background: var(--surface-1); color: var(--ink-primary); transition: background .12s, border-color .12s, transform .06s; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #1A1206; }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-connect { background: #2C9C6E; border-color: #2C9C6E; color: #fff; }
.btn-connect:hover { background: #268860; border-color: #268860; }
.btn-danger { border-color: var(--critical); color: var(--critical); background: transparent; }
.btn-danger:hover { background: var(--critical-soft); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-group { display: inline-flex; position: relative; }
.btn-caret { border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent); padding: 8px 8px; border-radius: 0 7px 7px 0; }
.btn-group > .btn:first-child { border-radius: 7px 0 0 7px; }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px; letter-spacing: .01em; white-space: nowrap; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.critical { background: var(--critical-soft); color: var(--critical); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.neutral { background: var(--surface-2); color: var(--ink-secondary); }
.node-icon { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; border: 1.4px solid currentColor; }
.node-icon.dedicated { background: currentColor; }
.node-icon.shared { background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 3px); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 2px var(--shadow), 0 8px 20px -14px var(--shadow); transition: box-shadow .15s, border-color .15s; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.project-card { padding: 16px 16px 14px; cursor: pointer; transition: border-color .12s, transform .1s; display: flex; flex-direction: column; gap: 10px; }
.project-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 1px 2px var(--shadow), 0 16px 32px -16px color-mix(in srgb, var(--accent) 35%, var(--shadow)); }
.project-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.project-card-name { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.project-card-repo { font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; font-family: var(--font-mono); }
.project-card-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-muted); flex-wrap: wrap; }
.project-card-meta .sep { opacity: .5; }
.branch-count-row { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-secondary); }
.branch-count-row span { display: flex; align-items: center; gap: 4px; }
.project-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--ink-muted); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-tile { padding: 14px 16px; }
.stat-tile-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); }
.stat-tile-value { font-family: var(--font-mono); font-size: 26px; font-weight: 500; margin-top: 7px; font-variant-numeric: tabular-nums; }

/* Project detail: branches sidebar + branch workspace */
.project-body { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; }
/* Odoo.sh-matched project chrome: dark mauve top strip + dark branch sidebar */
.osh-topbar { background: #4B3A46; border-radius: 10px 10px 0 0; display: flex; align-items: center; padding: 0 8px; }
.osh-tab { border: none; background: none; color: #C9B7C2; font-size: 13px; font-weight: 600; padding: 12px 14px; cursor: pointer; border-bottom: 3px solid transparent; }
.osh-tab:hover { color: #fff; }
.osh-tab.active { color: #fff; border-bottom-color: #00A09D; }
.osh-topbar-spacer { flex: 1; }
.osh-topbar-meta { color: #C9B7C2; font-size: 12px; padding: 0 10px; }
.osh-org-switcher { display: flex; align-items: center; gap: 6px; color: #E7DCE3; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.osh-org-switcher:hover { background: rgba(255,255,255,.08); }
.osh-bell { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; color: #E7DCE3; flex: none; }
.osh-bell:hover { background: rgba(255,255,255,.08); }

.branch-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.branch-heading { font-size: 24px; font-weight: 700; font-family: var(--font-mono); letter-spacing: -0.01em; }
.trial-banner { background: var(--info-soft); color: var(--info); border: 1px solid var(--info); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 16px; }
.trial-banner a { color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.osh-shell { border: 1px solid var(--border); border-radius: 0 0 10px 10px; overflow: hidden; }
.osh-body { background: var(--surface-1); padding: 18px; }

/* Project-scoped pages (Project Detail/Branch Detail/Project Settings)
   swap the whole sidebar to this dark treatment instead of the usual
   light chrome — matches Odoo.sh's own real UI (dark branch sidebar
   against a light workspace) and reads as a deliberate "you're inside a
   project now" mode shift, not an inconsistency. Unconditional dark,
   independent of the app's light/dark theme toggle — same treatment
   .osh-topbar/.shell-window/.editor-main already use elsewhere. */
.sidebar-dark { background: #262D35; border-right-color: #323B47; }
.sidebar-dark .wordmark-text { color: #EAF2F1; }
.sidebar-dark .wordmark-sub { color: #7C8A96; }
.sidebar-dark .preview-badge { background: rgba(214, 162, 87, .12); color: #E8B96F; border-color: #38414D; }
.sidebar-dark .nav-item { color: #B9C3CB; }
.sidebar-dark .nav-item:hover { background: #323B47; color: #fff; }
.sidebar-dark .nav-label { color: #7C8A96; }
.sidebar-dark .sidebar-footer { border-top-color: #38414D; }
.sidebar-dark .org-avatar { background: #323B47; color: #C7D0D6; }
.sidebar-dark .org-name { color: #EAF2F1; }
.sidebar-dark .org-role { color: #7C8A96; }
.sidebar-dark .btn { background: #2B323C; border-color: #454F5C; color: #C7D0D6; }
.sidebar-dark .btn:hover { background: #323B47; }
.sidebar-dark :focus-visible { outline-color: #E8B96F; }
.sidebar-dark .wordmark-mark::after { border-color: #262D35; }

.branch-nav { padding: 0; background: #2B323C; border-radius: 8px; overflow: hidden; margin-top: 4px; }
.branch-nav-search { padding: 10px 10px 6px; }
.branch-nav-search input { width: 100%; background: #232A33; border: 1px solid #38414D; color: #C7D0D6; border-radius: 6px; padding: 6px 9px; font-size: 12.5px; }
.branch-nav-search input::placeholder { color: #6D7A87; }
.stage-tabs { display: flex; flex-direction: column; }
.stage-tab-head { display: flex; align-items: center; gap: 7px; padding: 12px 12px 4px; color: #7C8A96; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.stage-tab-icon { width: 13px; height: 13px; flex: none; }
.branch-row { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; text-align: left; padding: 8px 12px 8px 16px; cursor: pointer; color: #B9C3CB; font-size: 13px; }
.branch-row:hover { background: #323B47; }
.branch-row.active { background: #232A33; color: #fff; font-weight: 600; border-left: 2px solid #00A09D; padding-left: 14px; }
.branch-row .name { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-add-btn { width: calc(100% - 24px); margin: 4px 12px 10px; text-align: left; padding: 6px 10px; font-size: 12px; color: #7C8A96; border: 1px dashed #454F5C; border-radius: 6px; background: none; cursor: pointer; }
.branch-add-btn:hover { color: #00A09D; border-color: #00A09D; }

/* Builds/Status project-wide views */
.builds-stage-block { margin-bottom: 22px; }
.builds-stage-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin-bottom: 8px; padding: 8px 10px; background: var(--surface-2); border-radius: 7px; }
.build-row { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: stretch; margin-bottom: 10px; }
.build-row-branch { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 12px; }
.build-cards { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.build-card { min-width: 210px; padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; }
.build-card > .badge { align-self: flex-start; }
.build-card-commit { font-size: 12.5px; font-weight: 600; }
.build-card-meta { font-size: 11px; color: var(--ink-muted); }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.status-card { padding: 18px; text-align: center; }
.status-role { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.status-uptime { font-family: var(--font-mono); font-size: 28px; font-weight: 500; margin: 8px 0 4px; }
.status-dot-lg { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--good); margin-right: 6px; }

.branch-workspace { min-width: 0; }
.branch-actionbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.branch-actionbar .clone-cmd { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-secondary); margin-left: auto; overflow-x: auto; white-space: nowrap; max-width: 320px; }

.tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tab { border: none; background: none; padding: 10px 13px; font-size: 13px; font-weight: 600; color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--ink-primary); }
.tab.active { color: var(--accent-strong); border-bottom-color: var(--accent); }
.tabpanel { display: none; }
.tabpanel.active { display: block; }

.history-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.history-item:last-child { border-bottom: none; }

.notif-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--info-soft); }
.notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); flex: none; margin-top: 6px; }
.notif-unread-dot.read { background: transparent; }
.notif-icon { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.history-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex: none; }
.history-title { font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.history-body { font-size: 13.5px; color: var(--ink-secondary); margin-top: 4px; line-height: 1.6; }
.history-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.clickable:hover td { background: var(--surface-2); cursor: pointer; }

.log-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1); color: var(--ink-secondary); cursor: pointer; }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.search-input, .form-input, .form-select { background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 7px; padding: 7px 11px; font-size: 13px; color: var(--ink-primary); font-family: inherit; }
.search-input:focus, .form-input:focus, .form-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--good); margin-left: auto; cursor: pointer; }
.live-pill.off { color: var(--warning); }
.log-viewport { background: var(--surface-0); border: 1px solid var(--border); border-radius: 10px; padding: 12px 0; font-family: var(--font-mono); font-size: 12.5px; max-height: 420px; overflow-y: auto; overflow-x: auto; }
.log-line { display: flex; gap: 10px; padding: 3px 16px; white-space: pre; }
.log-line:hover { background: var(--surface-2); }
.log-line.log-line-hidden { display: none; }
.log-ts { color: var(--ink-muted); flex: none; }
.log-level { flex: none; width: 60px; font-weight: 600; }
.log-level.INFO { color: var(--info); } .log-level.WARNING { color: var(--warning); } .log-level.ERROR, .log-level.CRITICAL { color: var(--critical); }
.log-src { flex: none; color: var(--ink-muted); width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-msg { color: var(--ink-secondary); }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.chart-card { padding: 14px 16px 10px; position: relative; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.chart-title { font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); }
.chart-current { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.chart-legend { display: flex; gap: 10px; font-size: 10.5px; color: var(--ink-muted); margin-top: 6px; flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend-swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.chart-svg { width: 100%; height: 92px; display: block; overflow: visible; }
.chart-tooltip { position: absolute; pointer-events: none; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 6px; padding: 5px 8px; font-size: 11.5px; font-family: var(--font-mono); box-shadow: 0 2px 8px var(--shadow); transform: translate(-50%, -115%); white-space: nowrap; z-index: 10; display: none; }
.range-chips { display: flex; gap: 6px; margin-bottom: 14px; }
.fairshare-card { padding: 16px; margin-top: 14px; }
.fairshare-bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 10px 0 6px; position: relative; }
.fairshare-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.fairshare-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-primary); }
.fairshare-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-muted); }
.profiler-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-top: 14px; }

/* Storage tab */
.storage-total-card { padding: 18px 20px; }
.storage-total-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.storage-total-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); }
.storage-total-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin-top: 4px; }
.storage-total-meta { text-align: right; font-size: 12px; color: var(--ink-muted); line-height: 1.7; }
.storage-stack-track { height: 10px; border-radius: 999px; overflow: hidden; display: flex; background: var(--surface-2); }
.storage-stack-seg { height: 100%; }
.storage-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--ink-secondary); }
.storage-legend span { display: inline-flex; align-items: center; gap: 6px; }
.storage-legend .mono { color: var(--ink-muted); }
.storage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 16px 0; }
.storage-cat-card { padding: 14px 16px; }
.storage-cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.storage-cat-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.storage-cat-title { font-weight: 700; font-size: 13px; }
.storage-cat-desc { font-size: 11px; color: var(--ink-muted); margin-top: 1px; }
.storage-cat-value { font-family: var(--font-mono); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.storage-bar-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 6px; }
.storage-bar-fill { height: 100%; border-radius: 999px; }
.storage-cat-pct { font-size: 11px; color: var(--ink-muted); }
.storage-month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.storage-month-stat { text-align: center; padding: 4px 8px; }
.storage-month-stat + .storage-month-stat { border-left: 1px solid var(--border); }
.storage-month-stat-label { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
.storage-month-stat-value { font-family: var(--font-mono); font-size: 17px; font-weight: 600; margin-top: 4px; }

.backup-row-actions { display: flex; gap: 6px; justify-content: flex-end; position: relative; }
.dl-menu { position: absolute; right: 0; top: 32px; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); padding: 6px; display: none; z-index: 20; min-width: 200px; }
.dl-menu.open { display: block; }
.dl-menu button { width: 100%; text-align: left; padding: 7px 9px; font-size: 12.5px; border: none; background: none; border-radius: 5px; cursor: pointer; color: var(--ink-secondary); }
.dl-menu button:hover { background: var(--surface-2); color: var(--ink-primary); }
.dl-menu .dl-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); padding: 6px 9px 2px; }

.shell-tabs { display: flex; gap: 2px; background: #17262A; padding: 6px 6px 0; border-radius: 10px 10px 0 0; }
.shell-tab-btn { padding: 7px 14px; font-size: 12px; border-radius: 6px 6px 0 0; border: none; cursor: pointer; background: transparent; color: #8FA5A4; }
.shell-tab-btn.active { background: #0B1415; color: #E8B96F; }
.shell-window { background: #0B1415; border-radius: 0 0 10px 10px; overflow: hidden; border: 1px solid var(--border); border-top: none; }
.shell-body { padding: 16px; font-family: var(--font-mono); font-size: 12.5px; color: #C9D6D5; min-height: 260px; line-height: 1.7; }
/* Real terminal (xterm.js) host — a fixed height, not a % of an
   auto-height ancestor, since xterm's own fitAddon needs a definite pixel
   box to size rows/cols against. */
.shell-term-host { width: 100%; height: 520px; }
.shell-term-host .xterm { height: 100%; }
.shell-term-host .xterm-viewport { overflow-y: auto; }
.shell-prompt { color: #E8B96F; }
.shell-cursor { display: inline-block; width: 7px; height: 14px; background: #E8B96F; vertical-align: middle; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.shell-cmd-row { display: flex; gap: 16px; }
.shell-cmd-row > span:first-child { flex: 0 0 280px; }
.shell-cmd-row.locked { opacity: .45; }
.shell-lock-badge { font-size: 10px; background: #2C2013; color: #E8B96F; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }

.editor-mock { display: grid; grid-template-columns: 200px 1fr; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; height: 360px; }
.editor-files { background: var(--surface-2); padding: 10px 6px; overflow-y: auto; font-size: 12.5px; }
.editor-file { padding: 5px 8px; border-radius: 5px; cursor: pointer; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-file.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.editor-main { background: #0B1415; display: flex; flex-direction: column; }
.editor-tabs { display: flex; background: #17262A; }
.editor-tabs span { padding: 8px 14px; font-size: 11.5px; color: #8FA5A4; border-right: 1px solid #24373A; }
.editor-tabs span.active { background: #0B1415; color: #E8B96F; }
.editor-code { padding: 14px; font-family: var(--font-mono); font-size: 12px; color: #C9D6D5; overflow: auto; flex: 1; line-height: 1.7; white-space: pre; }
.editor-code .kw { color: #E8B96F; } .editor-code .cls { color: #6FB0C4; } .editor-code .str { color: #57B98A; } .editor-code .com { color: #5A6E6D; }

.node-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 18px; }
.mode-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface-1); cursor: pointer; text-align: left; margin-bottom: 6px; transition: all .12s; }
.mode-card:hover { border-color: var(--border-strong); }
.mode-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.mode-card-icon { flex: none; color: var(--ink-muted); }
.mode-card.selected .mode-card-icon { color: var(--accent-strong); }
.mode-card-label { font-size: 12.5px; font-weight: 600; color: var(--ink-primary); }
.mode-card-desc { font-size: 11px; color: var(--ink-muted); }
.mode-detail { margin-top: 8px; padding: 12px; background: var(--surface-2); border-radius: 8px; border: 1px dashed var(--border-strong); }
.node-option { padding: 16px; display: flex; flex-direction: column; gap: 10px; border-width: 1.5px; }
.node-option.current { border-color: var(--accent); }
.node-option-title { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; }
.node-option dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12.5px; margin: 0; }
.node-option dt { color: var(--ink-muted); }
.node-option dd { margin: 0; color: var(--ink-secondary); }

.modal-overlay { position: fixed; inset: 0; background: rgba(8, 14, 14, .55); display: none; align-items: flex-start; justify-content: center; padding-top: 8vh; z-index: 50; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface-1); border: 1px solid var(--border); border-radius: 13px; width: 440px; max-width: 92vw; box-shadow: 0 20px 50px var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.modal.modal-wide { width: 820px; }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-body { font-size: 13.5px; color: var(--ink-secondary); line-height: 1.6; }
.modal-body b { color: var(--ink-primary); }
.confirm-type-input { margin-top: 4px; width: 100%; }

.modal-overlay.logs-fullscreen-overlay { align-items: stretch; justify-content: stretch; padding-top: 0; }
.logs-fullscreen-panel { background: var(--surface-1); width: 100%; height: 100%; max-width: none; border-radius: 0; margin-bottom: 0; display: flex; flex-direction: column; }
.logs-fullscreen-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); flex: none; }
.logs-fullscreen-body { flex: 1; min-height: 0; padding: 14px 22px; display: flex; }
.logs-fullscreen-body .log-viewport { flex: 1; max-height: none; }
.region-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.region-tile { border: 1.5px solid var(--border-strong); border-radius: 8px; padding: 10px 6px; text-align: center; cursor: pointer; background: var(--surface-1); }
.region-tile:hover { border-color: var(--accent); }
.region-tile.selected { border-color: var(--accent); background: var(--accent-soft); }
.region-tile .ping { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
.region-tile .label { font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.kebab-btn { border: none; background: none; cursor: pointer; color: var(--ink-muted); font-size: 15px; padding: 2px 6px; border-radius: 5px; }
.kebab-btn:hover { background: var(--surface-2); color: var(--ink-primary); }
.kebab-menu { position: absolute; right: 8px; top: 30px; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); padding: 6px; display: none; z-index: 20; min-width: 160px; }
.kebab-menu.open { display: block; }
.kebab-menu button { width: 100%; text-align: left; padding: 7px 9px; font-size: 12.5px; border: none; background: none; border-radius: 5px; cursor: pointer; color: var(--ink-secondary); }
.kebab-menu button:hover { background: var(--surface-2); color: var(--ink-primary); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.toast-stack { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 9px; padding: 11px 14px; font-size: 13px; box-shadow: 0 8px 24px var(--shadow); display: flex; align-items: center; gap: 9px; min-width: 240px; animation: toast-in .18s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.toast-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.progress-banner { display: flex; align-items: center; gap: 10px; background: var(--info-soft); color: var(--info); border: 1px solid var(--info); border-radius: 9px; padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.progress-banner .spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 2px; opacity: .85; }
.callout { border-radius: 9px; padding: 12px 14px; font-size: 13px; line-height: 1.55; margin-bottom: 12px; border: 1px solid; }
.callout.warn { background: var(--warning-soft); border-color: var(--warning); color: var(--ink-primary); }
.callout.danger { background: var(--critical-soft); border-color: var(--critical); color: var(--ink-primary); }
.callout.info { background: var(--info-soft); border-color: var(--info); color: var(--ink-primary); }
.callout.good { background: var(--good-soft); border-color: var(--good); color: var(--ink-primary); }
.callout b { font-weight: 700; }

/* Upgrade tab's "How upgrading works" guide — a native <details>, open by
   default so it's genuinely readable the first time without extra JS for
   collapse state, but tucked under a <summary> so it doesn't dominate the
   tab for a customer who's already upgraded before. */
.upgrade-guide { margin-bottom: 12px; }
.upgrade-guide summary { cursor: pointer; font-weight: 700; font-size: 13.5px; list-style: none; }
.upgrade-guide summary::-webkit-details-marker { display: none; }
.upgrade-guide summary::before { content: '▸'; display: inline-block; width: 14px; color: var(--ink-muted); transition: transform .12s; }
.upgrade-guide[open] summary::before { transform: rotate(90deg); }
.upgrade-guide ol { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-secondary); line-height: 1.7; }

/* Upgrade tab's step-by-step progress tracker — replaces a plain list of
   raw enum names (backup/stop_container/run_migration/recreate_container/
   health_check) with a humanized, visual stepper so an in-progress
   upgrade reads as real stage-by-stage progress, not a log dump. */
.upgrade-stepper { display: flex; align-items: flex-start; margin: 14px 0 4px; }
.upgrade-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; text-align: center; }
.upgrade-step:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--border-strong); z-index: 0; }
.upgrade-step.done:not(:last-child)::after { background: var(--good); }
/* Real visual bug: a done step's own trailing line stayed green even when
   the NEXT step failed — a green line flowing straight into a red X read
   as contradictory statuses side by side. The line leading into a failure
   must read as broken there, not as still-successful. */
.upgrade-step.done:has(+ .upgrade-step.failed)::after { background: var(--critical); }
/* A step that merely PAUSED (not rolled back) gets its own amber line —
   "stopped here, action needed," not "dead" the way a red failed/rolled-
   back line reads. */
.upgrade-step.done:has(+ .upgrade-step.paused)::after { background: var(--warning); }
.upgrade-step-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--surface-2); border: 2px solid var(--border-strong); color: var(--ink-muted); position: relative; z-index: 1; }
.upgrade-step.done .upgrade-step-dot { background: var(--good); border-color: var(--good); color: #fff; }
.upgrade-step.running .upgrade-step-dot { background: var(--surface-1); border-color: var(--accent); color: var(--accent); }
.upgrade-step.failed .upgrade-step-dot { background: var(--critical); border-color: var(--critical); color: #fff; }
.upgrade-step.paused .upgrade-step-dot { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); font-size: 10px; }
.upgrade-step-label { font-size: 11.5px; color: var(--ink-muted); margin-top: 6px; max-width: 90px; line-height: 1.3; }
.upgrade-step.done .upgrade-step-label, .upgrade-step.running .upgrade-step-label { color: var(--ink-primary); font-weight: 600; }
.upgrade-step.failed .upgrade-step-label { color: var(--critical); font-weight: 600; }
.upgrade-step.paused .upgrade-step-label { color: var(--warning); font-weight: 600; }

/* Raw error output — closed by default (see the same real gap this fixes
   in ssh_driver.py's own comments: this is bounded, redacted stderr, but
   it's still raw remote command output and doesn't belong front-and-center
   in a tab about upgrade progress). */
.upgrade-raw-output summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); list-style: none; }
.upgrade-raw-output summary::-webkit-details-marker { display: none; }
.upgrade-raw-output summary::before { content: '▸'; display: inline-block; width: 14px; color: var(--ink-muted); transition: transform .12s; }
.upgrade-raw-output[open] summary::before { transform: rotate(90deg); }

/* Project-suspended takeover (non-payment, Day 14+ per implementation-
   guide.md Part 4) — replaces the whole workspace, not a banner, matching
   the spec's own "replaces normal navigation with a blocking screen." */
.suspended-block { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 24px; text-align: center; }
.suspended-block-card { max-width: 460px; }
.suspended-block-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--critical-soft); color: var(--critical); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.suspended-block-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin-bottom: 8px; }
.suspended-block-body { font-size: 13.5px; color: var(--ink-secondary); line-height: 1.6; margin-bottom: 20px; }

/* Reusable cap for pages/panels that are just a single reading-width
   column of short forms — left-aligned inside a much wider content area
   they'd strand a huge dead void on the right on any normal screen, so
   the whole block is capped and centered instead. Used by the Settings
   tabs (branch- and project-level) and the Account page. */
.narrow-content { max-width: 720px; margin: 0 auto; }
.settings-section { margin-bottom: 22px; }
.settings-section:last-child { margin-bottom: 0; }
.section-title { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.005em; }
.settings-card { padding: 16px; }
.settings-card.settings-card-danger { border-color: var(--critical); }
.settings-card .field-row:last-child { margin-bottom: 0; }
.helptext { font-size: 12.5px; color: var(--ink-muted); margin-top: 6px; }
.field-row { margin-bottom: 16px; }
.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); margin-bottom: 5px; }
.radio-opt { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; cursor: pointer; font-size: 13px; }
.radio-opt input { margin-top: 3px; }

/* Support ticket message thread — a customer/staff conversation, not a
   data table, so it gets a chat-bubble treatment instead. */
.ticket-thread { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 16px; }
.ticket-msg { max-width: 72%; padding: 10px 13px; border-radius: 10px; font-size: 13.5px; line-height: 1.55; }
.ticket-msg-meta { font-size: 11.5px; font-weight: 600; margin-bottom: 4px; opacity: .75; }
.ticket-msg.customer { align-self: flex-end; background: var(--info-soft); color: var(--ink-primary); border-bottom-right-radius: 3px; }
.ticket-msg.admin { align-self: flex-start; background: var(--surface-2); color: var(--ink-primary); border-bottom-left-radius: 3px; }