/* ─────────────────────────────────────────────────────────────────────
   Horilla Cloud — shared design tokens and primitives.

   The instance-creation wizard renders as standalone pages (each has its
   own <html>, so it does not inherit the portal chrome). This file gives
   those pages the same palette and components as the account area, so
   Add organization reads as one system with the rest of the portal.

   The palette is the design's: warm neutrals rather than blue-greys,
   #D9412B brand, and near-flat shadows because the design is border-led.
   ───────────────────────────────────────────────────────────────────── */

/* ── Geist, self-hosted ───────────────────────────────────────────────
   Was loaded from Google Fonts (fonts.googleapis.com / fonts.gstatic.com).
   Two problems with that: Google's CSS2 API served the SAME physical file
   for every requested Geist weight (400/500/600/700 all resolved to one
   static instance — confirmed by diffing the URLs), so a page could never
   actually get true medium/semibold Geist from it; and the font file fetch
   itself is a third-party request that a privacy-hardening browser or
   extension can block outright, in which case every occurrence silently
   and permanently renders in the fallback typeface instead — no error,
   no way to tell from the page. The design mockup this system is built
   from sidesteps both problems by embedding its fonts directly.
   These four files are the real per-weight static instances from Vercel's
   own Geist distribution (the `geist` npm package), not Google's
   repackaging, and are served from this app's own origin — no external
   request, so nothing to fail differently per browser or network. */
@font-face {
  font-family: 'Geist';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Geist-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Geist-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Geist-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Geist-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/GeistMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/GeistMono-Medium.woff2') format('woff2');
}

/* ── Design-system tokens (v2 shell) ───────────────────────────────────
   The second profile design names its tokens --bg/--surface/--text/--accent
   and adds surfaces the first one had no name for (--surface-2,
   --border-soft, the *-bg status washes, --inverse, --track, the skeleton
   pair and the density scale). Those names are declared here as the source
   of truth and the older --page-bg/--text-heading/--brand names below are
   aliased onto them, so both halves of the portal read the same palette and
   it cannot drift. Values are the design's, verbatim.
   ──────────────────────────────────────────────────────────────────── */
:root, [data-theme="light"] {
  /* Values from the Claude Design portal (2026-10). Two deliberate departures
     for WCAG AA: --accent-text (links) is a darker red than --accent, and
     primary buttons fill with --btn-primary (--accent-hover) under white text. */
  /* 2026-10-24: neutrals and brand follow the Lovable portal design (its oklch values converted to sRGB). */
  --bg:#F6F7FA; --surface:#FFFFFF; --surface-2:#F9FAFC; --hover:#EEF0F4; --soft:#F0F2F5;
  --border:#E3E4E8; --border-soft:#ECEEF1; --border-strong:#CFD1D6;
  --text:#12161F; --text-2:#2F333D; --muted:#656972; --faint:#6A6E77; --control-border:#8A8E97;
  --accent:#ED4428; --accent-hover:#D72A1A; --accent-soft:#FFE8E1; --accent-text:#B00E0A;
  --ring:#FFE8E1;
  --ok:#1F7A45; --ok-bg:#E6F5EC; --warn:#A35A06; --warn-bg:#FFF4E2;
  --err:#C8341F; --err-bg:#FCE9E6; --err-border:#F0CFC8;
  --info:#2A62C9; --info-bg:#E8F0FD; --tag:#1F5C4C; --tag-bg:#EEF3F1;
  --track:#D8D5D0; --inverse:#141414; --inverse-text:#FFFFFF;
  --btn-primary:var(--accent-hover); --btn-primary-hover:#B00E0A; --btn-danger:#C8341F; --text-on-color:#FFFFFF;
  --overlay:rgba(18,22,31,.32); --sk1:#ECEEF1; --sk2:#F9FAFC;
  --shadow-sm:0 1px 2px rgba(18,22,31,.04);
  --shadow:0 4px 14px rgba(18,22,31,.06);
  --shadow-lg:0 16px 48px rgba(0,0,0,.16);
  /* Lovable design: card ring + lift, brand glow, gradients, glass. White text passes AA on every stop of --gradient-brand (4.59 to 6.51). */
  --shadow-card:0 0 0 1px rgba(18,22,31,.04), 0 1px 2px rgba(18,22,31,.04), 0 8px 24px -12px rgba(18,22,31,.10);
  --shadow-brand:0 8px 24px -8px rgba(215,42,26,.55), inset 0 1px 0 rgba(255,255,255,.25);
  --gradient-brand:linear-gradient(135deg,#DC3520 0%,#D72A1A 55%,#B9143A 100%);
  --gradient-hero:radial-gradient(60% 120% at 100% 0%, rgba(233,64,36,.55) 0%, transparent 60%), radial-gradient(50% 100% at 70% 120%, rgba(132,81,201,.45) 0%, transparent 60%);
  --gradient-mesh:radial-gradient(40% 40% at 0% 0%, rgba(255,218,206,.6), transparent 70%), radial-gradient(40% 50% at 100% 0%, rgba(231,228,255,.6), transparent 70%);
  --glass:rgba(255,255,255,.72); --topbar-bg:rgba(246,247,250,.72);
  --hero-ink:#0E111B; --hero-text:#F4F5F8; --hero-muted:#9B9EA8;
  --r-card:16px; --r-hero:22px;
  color-scheme: light;
}
[data-theme="dark"], :root[data-theme="dark"] {
  --bg:#0D0D0E; --surface:#151517; --surface-2:#18181A; --hover:#1B1B1E; --soft:#1E1E21;
  --border:#26262A; --border-soft:#1E1E21; --border-strong:#34343A;
  --text:#EDEDED; --text-2:#D0D0D3; --muted:#A1A1A6; --faint:#8C8C93; --control-border:#6A6A72;
  --accent:#E5503A; --accent-hover:#CF4430; --accent-soft:#341E1C; --accent-text:#F4A393;
  --ring:#4A2119;
  --ok:#3DD68C; --ok-bg:#1A2C25; --warn:#F5B544; --warn-bg:#30281C;
  --err:#FF6B5C; --err-bg:#332020; --err-border:#5B2F2C;
  --info:#6EA2FF; --info-bg:#212735; --tag:#83CDB6; --tag-bg:#172924;
  --track:#3A3835; --inverse:#EDEDED; --inverse-text:#141414;
  --btn-primary:var(--accent-hover); --btn-primary-hover:#B83A27; --btn-danger:#C8341F; --text-on-color:#FFFFFF;
  --overlay:rgba(0,0,0,.55); --sk1:#1E1E21; --sk2:#26262A;
  --shadow-sm:none;
  --shadow:0 4px 14px rgba(0,0,0,.35);
  --shadow-lg:0 16px 48px rgba(0,0,0,.5);
  --shadow-card:0 0 0 1px rgba(255,255,255,.05), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-brand:0 8px 24px -8px rgba(215,42,26,.5), inset 0 1px 0 rgba(255,255,255,.2);
  --gradient-brand:linear-gradient(135deg,#DC3520 0%,#D72A1A 55%,#B9143A 100%);
  --gradient-hero:radial-gradient(60% 120% at 100% 0%, rgba(233,64,36,.45) 0%, transparent 60%), radial-gradient(50% 100% at 70% 120%, rgba(132,81,201,.4) 0%, transparent 60%);
  --gradient-mesh:radial-gradient(40% 40% at 0% 0%, rgba(233,64,36,.10), transparent 70%), radial-gradient(40% 50% at 100% 0%, rgba(132,81,201,.12), transparent 70%);
  --glass:rgba(21,21,23,.72); --topbar-bg:rgba(13,13,14,.72);
  --hero-ink:#13141C; --hero-text:#F4F5F8; --hero-muted:#9B9EA8;
  --r-card:16px; --r-hero:22px;
  color-scheme: dark;
}
/* Density drives padding, gaps, cell height, radius and control height.
   Set on the same element as data-theme; Comfortable is the default.
   The bare :root default MUST come first: it has the same specificity as
   [data-density="..."], so declaring it afterwards would win on source order
   and the compact setting would silently do nothing. */
/* The Claude Design file's own token names, aliased onto ours. */
:root {
  --panel: var(--surface); --line: var(--border); --line2: var(--border-soft); --soft2: var(--surface-2);
  --ink: var(--text); --mute: var(--muted); --acc: var(--accent); --acch: var(--accent-hover);
  --accbg: var(--accent-soft); --okbg: var(--ok-bg); --warnbg: var(--warn-bg); --bad: var(--err);
  --badbg: var(--err-bg); --infobg: var(--info-bg); --rp: 13px; --cp: 22px;
}
[data-density="compact"] { --rp: 8px; --cp: 16px; }
:root { --pad:22px; --gap:20px; --cell:14px; --r:14px; --field:40px; }
[data-density="comfortable"] { --pad:22px; --gap:20px; --cell:14px; --r:14px; --field:40px; }
[data-density="compact"]     { --pad:14px; --gap:12px; --cell:8px;  --r:10px; --field:34px; }

:root {
  /* Every colour name below is an ALIAS onto the v2 tokens above. They are
     what the existing portal markup references; keeping them as aliases means
     one palette, defined once, and dark mode needs no second copy of them. */
  --brand:          var(--accent);
  --brand-dark:     var(--accent-text);
  --brand-hover:    var(--accent-hover);
  --brand-light:    var(--accent-soft);
  --brand-glow:     var(--ring);

  --color-success:        var(--ok);
  --color-success-light:  var(--ok-bg);
  --color-warning:        var(--warn);
  --color-warning-light:  var(--warn-bg);
  --color-danger:         var(--err);
  --color-danger-light:   var(--err-bg);

  --text-heading:   var(--text);
  --text-body:      var(--text-2);
  --text-muted:     var(--muted);
  --text-faint:     var(--faint);

  --surface-raised: var(--surface-2);
  --surface-sunken: var(--hover);
  --surface-hover:  var(--hover);
  --page-bg:        var(--bg);
  --field-bg:       var(--surface-2);

  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 12px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-lg:   16px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --transition: all .18s var(--ease);

  /* The design's own stack is 'Geist',system-ui,sans-serif — no Poppins.
     Poppins was inherited from the portal's pre-redesign default and is
     visually distinct from Geist (rounder, wider) — if the Geist request
     is ever slow or blocked, falling back to Poppins looks like a
     different design entirely rather than a graceful degrade. */
  --font-ui: 'Geist', -apple-system, BlinkMacSystemFont, 'system-ui', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --brand-tint:           var(--ring);
  --color-success-hover:  var(--ok);
  --color-warning-hover:  var(--warn);
  --color-danger-hover:   var(--err);
  --color-info:           var(--info);
  --color-purple:         #5B4B8A;
  --color-teal:           var(--tag);
  --border-focus:         var(--accent);
  --radius-xl:  14px;
  --text-xl:   20px;
  --text-2xl:  24px;

  --shadow-xs:     var(--shadow-sm);
  --shadow-brand:  var(--shadow-sm);

  /* Legacy aliases still referenced by older portal markup */
  --gray-50:  var(--surface-2);
  --gray-100: var(--hover);
  --gray-200: var(--border);
  --gray-400: var(--faint);
  --gray-500: var(--muted);
  --gray-700: var(--text-2);
  --gray-900: var(--text);
  --green:    var(--ok);
  --amber:    var(--warn);
  --danger:   var(--err);
  --purple:   var(--color-purple);
  --teal:     var(--tag);
}

:root[data-theme="dark"] {
  /* Dark values live in the [data-theme="dark"] block at the top of this
     file. Only the purple, which the v2 palette has no name for, needs a
     dark variant here. */
  --color-purple: #A99BD1;
}

/* The legacy built sheet (build/css/style.min.css) paints the page shell by
   hand — body #F9F9F9, #main #FFF9F9, main #FFF — and every portal page loads
   it. Dark mode is tokens only, so without these three the header and cards go
   dark while the slab behind them stays white. Scoped to [data-theme="dark"],
   which is only ever set on /tenant/, /saas/ and /notifications/, so nothing
   outside the portal is touched. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] #main,
:root[data-theme="dark"] main { background-color: var(--page-bg); }

/* ── Page shell ──────────────────────────────────────────────────── */
.hcw-page {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text-heading);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
}
.hcw-page * { font-family: inherit; box-sizing: border-box; }

/* The wizard card mirrors the design's dialog: header band, body, footer. */
.hcw-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(26, 25, 24, .06);
  overflow: hidden;
  margin: 0 auto;
}
.hcw-card--sm { max-width: 580px; }
.hcw-card--md { max-width: 760px; }
.hcw-card--lg { max-width: 1000px; }

.hcw-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.hcw-head__text { flex: 1; min-width: 220px; }
.hcw-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-heading);
  margin: 0;
}
.hcw-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 3px 0 0;
}
.hcw-body { padding: 20px; }
.hcw-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.hcw-foot__note { margin-right: auto; font-size: 12px; color: var(--text-muted); }

/* ── Step indicator ──────────────────────────────────────────────── */
.hcw-steps { display: flex; align-items: center; gap: 6px; padding-top: 4px; }
.hcw-step { display: flex; align-items: center; gap: 6px; }
.hcw-step__n {
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-faint);
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.hcw-step__label { font-size: 12px; font-weight: 500; color: var(--text-faint); }
.hcw-step__line { width: 16px; height: 1px; background: var(--border-strong); }
.hcw-step.is-current .hcw-step__n {
  background: var(--text-heading);
  border-color: var(--text-heading);
  color: var(--surface);
}
.hcw-step.is-current .hcw-step__label { color: var(--text-heading); }
.hcw-step.is-done .hcw-step__n {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success);
}
.hcw-step.is-done .hcw-step__label { color: var(--text-heading); }

/* ── Buttons: flat, never gradient ───────────────────────────────── */
.hcw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-heading);
  font: inherit; font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: var(--transition);
}
.hcw-btn:hover { background: var(--surface-sunken); color: var(--text-heading); }
.hcw-btn--primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.hcw-btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.hcw-btn--ghost { border-color: transparent; background: transparent; }
.hcw-btn--ghost:hover { background: var(--surface-sunken); }
.hcw-btn:disabled { opacity: .5; cursor: not-allowed; }
.hcw-btn--block { width: 100%; }

/* ── Fields ──────────────────────────────────────────────────────── */
.hcw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.hcw-field > label {
  font-size: 12px; font-weight: 500; color: var(--text-body); margin: 0;
}
.hcw-input, .hcw-field select, .hcw-field input[type="text"], .hcw-field input[type="number"] {
  width: 100%; height: 38px; padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-heading);
  font: inherit; font-size: var(--text-base);
  outline: none;
  transition: var(--transition);
}
.hcw-input:focus, .hcw-field select:focus, .hcw-field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.hcw-hint { font-size: 12px; color: var(--text-muted); }
.hcw-notice { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--text-muted); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-heading); font-size: 14px; line-height: 1.5; }
.hcw-notice--error { border-left-color: var(--color-danger); }
.hcw-notice--success { border-left-color: var(--color-success, #1a7f4b); }
.hcw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
/* Suffix shown inside the control, e.g. .cloud.horilla.com */
.hcw-suffix { position: relative; display: flex; align-items: center; }
.hcw-suffix .hcw-input { padding-right: 160px; }
.hcw-suffix span {
  position: absolute; right: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  pointer-events: none;
}

/* ── Selectable cards (service / plan) ───────────────────────────── */
.hcw-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.hcw-choice {
  position: relative;
  display: flex; flex-direction: column;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
.hcw-choice:hover { border-color: var(--border-strong); }
.hcw-choice.is-on {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.hcw-choice__top { display: flex; align-items: center; gap: 10px; }
.hcw-choice__top > span:nth-child(3) { flex: 1; min-width: 0; }
.hcw-choice__dot {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hcw-choice.is-on .hcw-choice__dot { border-color: var(--brand); }
.hcw-choice.is-on .hcw-choice__dot::after {
  content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--brand);
}
.hcw-choice__icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hcw-choice__name { display: block; font-size: var(--text-md); font-weight: 600; color: var(--text-heading); }
.hcw-choice__desc { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.hcw-choice__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hcw-choice__list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--text-sm); color: var(--text-body);
}
.hcw-choice__list li::before {
  content: ''; flex-shrink: 0; margin-top: 6px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--brand);
}

/* ── Plan cards ──────────────────────────────────────────────────── */
.hcw-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.hcw-plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.hcw-plan--paid { border-color: var(--brand); }
/* The design features exactly ONE plan. There is no `is_featured` field on
   Plan, and the queryset is ordered by price, so the first paid plan (the
   cheapest) is the featured one and any paid plan after it drops back to the
   plain treatment. A real flag on the model would be the better fix. */
.hcw-plan--paid ~ .hcw-plan--paid { border-color: var(--border); }
.hcw-plan--paid ~ .hcw-plan--paid .hcw-plan__tag { display: none; }
/* …and only the featured plan carries the primary action. */
.hcw-plan--paid ~ .hcw-plan--paid .hcw-btn--primary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-heading);
}
.hcw-plan--paid ~ .hcw-plan--paid .hcw-btn--primary:hover {
  background: var(--surface-sunken); color: var(--text-heading);
}
.hcw-plan__tag {
  position: absolute; top: 12px; right: 12px;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: var(--brand-glow); color: var(--brand-dark);
}
.hcw-plan__head { position: relative; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); }
.hcw-plan__name { font-size: var(--text-md); font-weight: 600; color: var(--text-heading); }
.hcw-plan__price {
  font-size: 26px; font-weight: 600; letter-spacing: -.02em;
  color: var(--text-heading); margin-top: 8px;
}
.hcw-plan__unit { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.hcw-plan__body { padding: 16px 18px; flex: 1; }
.hcw-plan__foot { padding: 0 18px 18px; }

/* ── Order summary ───────────────────────────────────────────────── */
.hcw-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  padding: 14px 16px;
}
.hcw-summary__row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-sm); color: var(--text-muted);
  padding: 4px 0;
}
.hcw-summary__row strong { color: var(--text-heading); font-weight: 500; }
.hcw-summary__total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: var(--text-md); font-weight: 600; color: var(--text-heading);
}

/* ── Chips ───────────────────────────────────────────────────────── */
.hcw-chip {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--radius-xs);
  font-size: 12px; font-weight: 500;
}
.hcw-chip--muted { background: var(--surface-sunken); color: var(--text-body); }
.hcw-chip--warn { background: var(--color-warning-light); color: var(--color-warning); }
.hcw-chip--ok { background: var(--color-success-light); color: var(--color-success); }


@media (max-width: 640px) {
  .hcw-page { padding: 16px 12px; }
  .hcw-head { padding: 16px; }
  .hcw-body { padding: 16px; }
  .hcw-foot { padding: 12px 16px; }
}


/* ─────────────────────────────────────────────────────────────────────
   Portal components, moved out of profile/user-profile.html so every
   tenant page (dashboard, organizations, settings, domains) draws from
   the same definitions instead of each growing its own copy.
   ───────────────────────────────────────────────────────────────────── */
/* ── Design tokens (semantic, no direct hex anywhere below) ──── */
  /* Palette lives in static/css/horilla-cloud.css, loaded by the base
     template, so the portal and the instance-creation wizard cannot drift. */

  /* ── Dark theme ───────────────────────────────────────────────
     Defined ONLY as token overrides. Every component below reads the
     tokens, so nothing needs a per-component dark rule — the previous
     85 such rules hardcoded blue-grey values and fought the palette. */
  /* The few places the design draws a hairline rather than a token. */
  :root[data-theme="dark"] .badge-hrms,
  :root[data-theme="dark"] .badge-crm { background: #1D2C23; color: #8FCFA9; }
/* ── Generic card ────────────────────────────────────────────── */
  .profile-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .22s;
  }
.profile-card:hover { box-shadow: var(--shadow); }
/* ── Edit mode, per the design ────────────────────────────────
     Label 12/500 muted above a 36px control; the card's Cancel / Save
     changes pair lives on the header row, not under the fields. */
  .edit-label, label.detail-row-label {
    display: flex;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
  }
.edit-input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-heading);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    outline: none;
    transition: var(--transition);
  }
.edit-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
  }
.edit-input:disabled {
    background: var(--field-bg);
    color: var(--text-muted);
  }
/* One layout for BOTH modes: avatar column, then the field grid. The
     view value and the edit control are the same 36px box in the same
     cell, so toggling swaps the control in place and nothing reflows. */
  .card-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
  }
.card-body > .detail-rows { flex: 1 1 360px; }
.card-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 120px;
  }
.card-avatar img {
    width: 88px; height: 88px; border-radius: 999px; object-fit: cover;
  }
.card-avatar__btn {
    height: 28px; padding: 0 10px;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font: inherit; font-size: 12px; font-weight: 500;
    color: var(--text-heading);
    cursor: pointer;
  }
.card-avatar__btn:hover { background: var(--surface-sunken); }
/* Parked on the card header. It sits inside .profile-form-edit, which is
     hidden in view mode, so no JS change is needed to hide it. */
  .account-card .form-actions-section {
    position: absolute;
    top: 12px; right: 20px;
    margin: 0; padding: 0; border: none;
  }
.account-card .form-actions-section > div { flex-direction: row-reverse; }
/* ── Modal chrome, per the design ─────────────────────────────
     Three bands: a titled header with a rule, a 20px body whose fields
     are 16px apart, and a footer with a rule holding the actions. The
     body is the only part that scrolls, so a long form never pushes its
     own buttons off screen. */
  .hc-modal__head {
    padding: 18px 20px;
    display: flex; align-items: flex-start; gap: 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
.hc-modal__head > div:first-child { flex: 1; min-width: 0; }
.hc-modal__close {
    width: 30px; height: 30px;
    border-radius: 7px; border: none; background: transparent;
    cursor: pointer; color: var(--text-muted); font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
.hc-modal__close:hover { background: var(--surface-hover); color: var(--text-heading); }
.hc-modal__body {
    padding: 20px;
    display: flex; flex-direction: column; gap: 16px;
    overflow-y: auto;
  }
.hc-modal__body > p { margin: 0; font-size: var(--text-base); color: var(--text-body); line-height: 1.55; }
.hc-modal__foot {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 8px;
    flex-shrink: 0;
  }
/* Demo slot picker */
  .slots-loading {
    display: flex; align-items: center; gap: 8px;
    padding: 16px; font-size: var(--text-sm); color: var(--text-muted);
  }
.slots-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--border); border-top-color: var(--brand);
    animation: spin 1s linear infinite;
  }
.slots-error {
    padding: 10px 12px;
    background: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    color: var(--color-danger);
    font-size: var(--text-sm);
  }
.slots-box {
    max-height: 260px; overflow-y: auto;
    padding: 12px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
.slot-button:hover {
    border-color: var(--brand) !important;
    background: var(--brand-light) !important;
    color: var(--brand) !important;
  }
/* A disabled action must look disabled. */
  .btn-sm:disabled,
  .btn-edit-profile:disabled { opacity: .5; cursor: not-allowed; }
/* No empty bordered strip when there are no slots to show. */
  .slots-box:empty { display: none; }
/* A list of choices reads as one block, not seven loose rows. */
  .option-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
.option-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-body);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
.option-row:last-child { border-bottom: none; }
.option-row:hover { background: var(--surface-raised); }
.option-row input { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--brand); margin: 0; }
.opt { font-weight: 400; color: var(--text-faint); }
/* One field: label above control, nothing else. */
  .modal-field { display: flex; flex-direction: column; gap: 6px; }
.modal-field > label {
    margin: 0;
    font-size: 12px; font-weight: 500; color: var(--text-body);
  }
/* Short fields pair up instead of each taking a full row. */
  .modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }
.hc-modal__body .edit-input { height: 38px; }
.hc-modal__body textarea.edit-input { height: auto; min-height: 96px; }
/* Native select arrows differ per platform; the design draws its own. */
  .modal-select { position: relative; }
.modal-select select { appearance: none; -webkit-appearance: none; padding-right: 34px; }
.modal-select i {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    font-size: 15px; color: var(--text-muted); pointer-events: none;
  }
/* Segmented control backed by radios, so the form still posts a value. */
  .seg--fill { display: flex; gap: 2px; padding: 3px; height: 38px; width: 100%; }
.seg--fill .seg__item {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 0; font-size: 12px; position: relative;
  }
.seg--fill .seg__item input {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0;
  }
.seg--fill .seg__item:has(input:checked) {
    background: var(--surface);
    color: var(--text-heading) !important;
    box-shadow: 0 1px 2px rgba(26,25,24,.08);
  }
.profile-modal-card {
    background: var(--surface);
    border-radius: 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
  }
.modal-title {
    font-size: 17px; font-weight: 600; letter-spacing: -.01em;
    color: var(--text-heading);
  }
.modal-sub {
    font-size: var(--text-sm); color: var(--text-muted); margin-top: 3px;
  }
.req { color: var(--brand); }
/* ── List cards (demos, support) ──────────────────────────────
     Design: a titled header with its action on the right, then plain
     rules between rows; the empty state is centred muted text, not a
     bordered placeholder. */
  .list-card { margin-bottom: 24px; }
.list-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 20px;
    border-bottom: 1px solid var(--border);
  }
.list-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
  }
.list-row:last-child { border-bottom: none; }
.list-row__main { flex: 1; min-width: 0; }
.list-row__title { font-size: var(--text-base); font-weight: 500; color: var(--text-heading); }
.list-row__id {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-muted); font-size: var(--text-sm);
  }
.list-row__sub {
    font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
.list-row__actions { display: flex; gap: 8px; flex-shrink: 0; }
.list-row__danger, .list-row__danger:hover { color: var(--color-danger) !important; }
.list-empty {
    padding: 48px 24px; text-align: center;
    font-size: var(--text-sm); color: var(--text-muted);
  }
/* Segmented control: a sunken track, the active segment a white pill. */
  .seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    align-self: flex-start;
  }
.seg__item {
    padding: 6px 14px; border-radius: var(--radius-xs);
    border: none; font: inherit; cursor: pointer;
    font-size: var(--text-sm); font-weight: 500;
    color: var(--text-muted) !important;
    background: transparent; white-space: nowrap;
    transition: var(--transition);
  }
.seg__item:hover { color: var(--text-heading) !important; }
.seg__item.is-on {
    background: var(--surface);
    color: var(--text-heading) !important;
    box-shadow: 0 1px 2px rgba(26,25,24,.08);
  }
/* Profile cards, per the design: a title and one line of description,
     no coloured icon tile. */
  .account-card { padding: 0; display: flex; flex-direction: column; position: relative; }
.account-card__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
  }
.account-card > .profile-detail-view,
  .account-card > .profile-form-edit { padding: 20px; }
.account-card__title {
    font-size: var(--text-md); font-weight: 600; color: var(--text-heading);
  }
.account-card__desc {
    font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px;
  }
/* The design puts Edit on the header row. Keeping it inside
     .profile-detail-view means toggleProfileEdit() still hides it in edit
     mode without touching the JS. */
  .account-card .btn-edit-profile {
    position: absolute; top: 16px; right: 20px; margin-top: 0;
  }
/* ── Settings cards (chrome moved out of inline styles) ──────── */
  .settings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    width: 100%;
  }
.settings-heading {
    margin: 0 0 6px;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-heading);
  }
.settings-warning {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 20px;
    color: var(--color-warning);
    font-size: var(--text-sm);
  }
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
.settings-row-title {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-heading);
  }
.settings-desc {
    margin: 2px 0 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }
.settings-row-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 2px;
  }
/* Chips. The design never uses a solid status fill: it is a pale wash
     with dark ink, at radius 6 — not a saturated pill. */
  .instance-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
  }
.badge-default { background: transparent; color: var(--text-body);
                    border: 1px solid var(--border-strong); border-radius: 999px;
                    font-size: 11px; padding: 2px 7px; }
.badge-active { background: var(--color-success-light); color: var(--color-success); }
.badge-success { background: var(--color-success-light); color: var(--color-success); }
.badge-pending { background: var(--color-warning-light); color: var(--color-warning); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.badge-stopped { background: var(--color-danger-light);  color: var(--color-danger);  }
.badge-danger { background: var(--color-danger-light);  color: var(--color-danger);  }
/* Service chips are set in the mono face in the design. */
  .badge-hrms, .badge-crm {
    background: var(--color-success-light); color: var(--color-success);
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }
.badge-secondary { background: var(--surface-sunken);      color: var(--text-body);     }
.badge-ai-active { background: var(--brand-glow);          color: var(--brand-dark);    }
/* Organization row, per the design */
  .instance-initial {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: var(--surface-sunken); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--text-body);
    flex-shrink: 0;
  }
.org-name { font-weight: 500; color: var(--text-heading); }
.org-status {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--text-sm); font-weight: 500;
  }
.org-status__dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.org-status--active { color: #1F7A4D; }
.org-status--pending { color: #9A6A0C; }
.org-status--provisioning { color: #9A6A0C; }
.org-status--stopped { color: var(--color-danger); }
.org-domain {
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-sm); color: var(--text-body);
  }
.org-domain--none { color: var(--text-faint); }
.org-created { font-size: var(--text-sm); color: var(--text-muted); }
.org-restore-by { font-size: 12px; color: var(--color-danger); }
/* ── Buttons ─────────────────────────────────────────────────── */
  /* ── Shared button base ──────────────────────────────────────── */
  .btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--font-ui);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    font-weight: 500;
    transition: var(--transition);
    white-space: nowrap;
  }
.btn-sm i { font-size: 14px; }
.btn-sm:active { transform: translateY(1px) !important; box-shadow: none !important; }
/* ── Primary — brand action ──────────────────────────────────── */
  /* Buttons. The design is flat: solid or outlined, radius 8, 13px/500,
     no gradients, no hover lift, no coloured glow. */
  .btn-primary,
  .btn-primary:hover {
    background: var(--brand);
    color: var(--text-on-color) !important;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
  }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
/* Secondary, outline and ghost are the same white/outlined control. */
  .btn-secondary,
  .btn-outline-brand,
  .btn-ghost {
    background: var(--surface);
    color: var(--text-heading) !important;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
  }
.btn-secondary:hover,
  .btn-outline-brand:hover,
  .btn-ghost:hover {
    background: var(--surface-sunken);
    color: var(--text-heading) !important;
    border-color: var(--border-strong);
  }
.btn-success {
    background: var(--color-success);
    color: var(--text-on-color) !important;
    border: 1px solid var(--color-success);
    border-radius: var(--radius-sm);
  }
.btn-success:hover {
    background: var(--color-success-hover);
    border-color: var(--color-success-hover);
    color: var(--text-on-color) !important;
  }
.btn-danger {
    background: var(--color-danger);
    color: var(--text-on-color) !important;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
  }
.btn-danger:hover {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
    color: var(--text-on-color) !important;
  }
.btn-warning {
    background: var(--color-warning);
    color: var(--text-on-color) !important;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm);
  }
.btn-warning:hover {
    background: var(--color-warning-hover);
    border-color: var(--color-warning-hover);
    color: var(--text-on-color) !important;
  }
.btn-edit-profile {
    margin-top: 22px;
    background: var(--surface);
    color: var(--text-heading) !important;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    height: 32px; padding: 0 12px;
    font-size: var(--text-sm); font-weight: 500;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: var(--transition);
  }
.btn-edit-profile:hover { background: var(--surface-sunken); color: var(--text-heading) !important; }
.form-field-group { margin-bottom: 18px; }
.form-field-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
  }
.form-field-group input,
  .form-field-group input:disabled {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--gray-200);
    font-size: 14px;
    transition: var(--transition);
    font-family: var(--font-ui);
  }
.form-field-group input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(229,79,56,.1);
  }
.form-field-group input:disabled {
    background: var(--gray-50);
    color: var(--gray-500);
    cursor: not-allowed;
  }
.form-actions-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
  }
.profile-card-editing .profile-detail-view { display: none; }
.profile-card-editing .profile-form-edit { display: flex; flex-direction: column; }
.detail-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 24px;
  }
.detail-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
  }
.detail-row:hover { border: none; box-shadow: none; }
.detail-row-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
  }
.detail-row-label i { font-size: 15px; color: var(--brand); opacity: .85; }
.detail-value {
    color: var(--text-heading);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
  }
/* Profile/company cards only: the design sets these in a soft field. */
  .detail-rows .detail-value {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    background: var(--field-bg);
    font-weight: 400;
  }
.detail-value.empty { color: var(--gray-400); font-weight: 500; font-style: italic; }
#personal-info-card .detail-rows { grid-template-columns: repeat(2, 1fr); }
#company-info-card .detail-rows { grid-template-columns: repeat(2, 1fr); }
.detail-row-label i { display: none; }
.profile-detail-view .detail-avatar-wrap { margin-bottom: 20px; align-items: flex-start !important; }
.profile-detail-view .detail-avatar-wrap img {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
  }
.subscription-details-grid .detail-item { display: flex; flex-direction: column; }
.subscription-details-grid .detail-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 3px;
    font-weight: 400;
  }
.subscription-details-grid .detail-value { font-size: var(--text-sm); font-weight: 500; color: var(--text-heading); }
.subscription-actions-footer .btn-sm { justify-content: center; flex: 1; min-width: 0; }
.detail-item { display: flex; flex-direction: column; }
.subscription-card .detail-label { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; font-weight: 400; }
.subscription-card .detail-value { font-size: var(--text-base); font-weight: 500; color: var(--text-heading); }
.subscription-actions-footer .btn-sm { width: 100%; }

/* ─────────────────────────────────────────────────────────────────────
   Portal page shell — used by the pages that are not the account area
   (dashboard, organizations, settings, domains, logs). Same bands and
   spacing as the account cards so the portal reads as one product.
   ───────────────────────────────────────────────────────────────────── */
.hcp-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 64px;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-heading);
  box-sizing: border-box;
}
.hcp-page * { font-family: inherit; box-sizing: border-box; }
.hcp-page a { color: inherit; text-decoration: none; }

.hcp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hcp-title {
  margin: 0;
  font-size: 22px !important;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-heading);
}
.hcp-sub { margin: 4px 0 0; font-size: var(--text-base); color: var(--text-muted); }
.hcp-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* At-a-glance tiles */
.hcp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.hcp-stat { background: var(--surface); padding: 14px 16px; }
.hcp-stat__label { font-size: 12px; color: var(--text-muted); }
.hcp-stat__value { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.hcp-stat__value--text {
  font-size: var(--text-md); font-weight: 500; color: var(--text-heading);
}

/* Two-column body that folds on narrow viewports */
.hcp-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  align-items: start;
}
.hcp-card-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* Plain table used by the list pages */
.hcp-table { width: 100%; border-collapse: collapse; }
.hcp-table th {
  text-align: left;
  font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}
.hcp-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-base);
  color: var(--text-body);
  vertical-align: middle;
}
.hcp-table tr:last-child td { border-bottom: none; }
.hcp-table .hcp-cell-strong { font-weight: 500; color: var(--text-heading); }
.hcp-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (max-width: 640px) {
  .hcp-page { padding: 20px 14px 48px; }
}


/* The two shared HTMX dialog wrappers — #objectCreateModal in the base
   template and #profilePaymentModal on the account page — are handed
   arbitrary fragments (add users, change photo, plan update, restart), so
   they get the surface, radius and font but NOT the .hcp-oh-modal band kit
   below, which is sized for the fixed confirm dialogs (520px cap, red footer
   button). Without this the fragment paints dark inside a white frame.
   The `*` rule is needed because the theme sets Poppins on bare element
   selectors (h1..h6, p, button), which outranks a class on the wrapper. */
#objectCreateModal .oh-modal__dialog,
#profilePaymentModal .oh-modal__dialog {
  background: var(--surface);
  color: var(--text-body);
  border-radius: 14px;
  font-family: var(--font-ui);
}
#objectCreateModal .oh-modal__dialog *,
#profilePaymentModal .oh-modal__dialog * { font-family: inherit; }

/* Theme-component dialogs (.oh-modal) adopt the design's three bands
   without their markup being rewritten — theme JS keys off these class
   names. Opt a dialog in by adding .hcp-oh-modal alongside .oh-modal. */
  .hcp-oh-modal .oh-modal__dialog {
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    background: var(--surface);
    overflow: hidden;
    max-width: 520px;
  }
  .hcp-oh-modal .oh-modal__dialog-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  }
  .hcp-oh-modal .oh-modal__dialog-title {
    font-size: 17px; font-weight: 600; letter-spacing: -.01em;
    color: var(--text-heading);
  }
  .hcp-oh-modal .oh-modal__dialog-body { padding: 20px; }
  .hcp-oh-modal .oh-modal__dialog-body section,
  .hcp-oh-modal .oh-modal__dialog-body .mt-3,
  .hcp-oh-modal .oh-modal__dialog-body .oh-card__body,
  .hcp-oh-modal .oh-modal__dialog-body .oh-input__group {
    margin: 0 !important; padding: 0 !important; background: none !important;
    border: none !important; box-shadow: none !important;
  }
  .hcp-oh-modal .oh-input__label {
    display: block; margin: 0 0 6px;
    font-size: 12px; font-weight: 500; color: var(--text-body);
  }
  .hcp-oh-modal .oh-input {
    width: 100%; height: 38px; padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text-heading);
    font-family: var(--font-ui); font-size: var(--text-base);
  }
  .hcp-oh-modal .oh-input:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
  }
  .hcp-oh-modal .oh-modal__dialog-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 8px;
  }
  /* A destructive action does not need to span the dialog. */
  .hcp-oh-modal .oh-modal__dialog-footer .oh-btn {
    width: auto !important;
    height: 32px; padding: 0 12px;
    border-radius: var(--radius-sm);
    background: var(--color-danger); color: #fff;
    border: 1px solid var(--color-danger);
    box-shadow: none;
    font-size: var(--text-sm); font-weight: 500;
  }
  .hcp-oh-modal .oh-modal__dialog-footer .oh-btn:disabled { opacity: .5; }

/* ── Organizations toolbar (search + primary action) ──────────────────── */
.orgs-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.orgs-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0; max-width: 360px;
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.orgs-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.orgs-search i { font-size: 16px; color: var(--text-faint); flex-shrink: 0; }
.orgs-search input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font: inherit; font-size: var(--text-sm); color: var(--text-heading);
}
.orgs-toolbar .btn-sm { margin-left: auto; }

/* ── Copyable code ───────────────────────────────────────────────────── */
.code-copy { display: inline-flex; align-items: center; gap: 8px; }
.profile-page-container .code-copy__value { font-family: var(--font-mono); font-size: var(--text-sm); }
.code-copy__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.code-copy__btn:hover { background: var(--surface-sunken); color: var(--text-heading); }
.code-copy__btn.is-copied { color: var(--color-success); border-color: var(--color-success); }

/* ─────────────────────────────────────────────────────────────────────
   App sidebar in dark mode.

   templates/sidebar.html draws from the theme stylesheet (style.min.css),
   which paints it light. That sheet is shared and minified, so rather than
   edit it these override only under the dark theme — the light theme is
   left exactly as the theme intends.
   ───────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] #sidebar,
:root[data-theme="dark"] .oh-cl-sidebar-container {
  background: var(--surface) !important;
  border-right: 1px solid var(--border);
}
:root[data-theme="dark"] .oh-cl-sidebar-logocard {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] .oh-cl-sidebar__menu-item,
:root[data-theme="dark"] .oh-cl-sidebar-link,
:root[data-theme="dark"] .oh-cl-sidebarlink_name,
:root[data-theme="dark"] .oh-sidebar__company-name {
  color: var(--text-body) !important;
}
:root[data-theme="dark"] .oh-cl-sidebar-link:hover {
  background: var(--surface-hover) !important;
  color: var(--text-heading) !important;
}
:root[data-theme="dark"] .oh-cl-sidebar-menu-link-active,
:root[data-theme="dark"] .oh-cl-sidebar-link.oh-cl-sidebar-menu-link-active {
  background: var(--surface-sunken) !important;
  color: var(--text-heading) !important;
}
/* The sidebar ships a light and a dark lockup; show the right one. */
:root[data-theme="dark"] .theme-white-logo { display: none !important; }
:root[data-theme="dark"] .theme-dark-logo  { display: inline-block !important; }
/* The sidebar wordmark ships only as black artwork (fill="black", no colour),
   so inverting it is safe and avoids shipping a second asset. */
:root[data-theme="dark"] .logo-horilla-text { filter: invert(1); }

/* ─────────────────────────────────────────────────────────────────────
   SweetAlert dialogs.

   These render their own markup at the end of <body>, outside anything
   the page controls, and were painted by per-call JS options
   (confirmButtonColor and friends) — so they stayed light while the rest
   of the portal went dark, and used their own radii and type scale.

   Styling them here instead means one definition for ~20 call sites.
   The JS colour options are removed at the call sites so they do not
   fight these rules with inline styles.
   ───────────────────────────────────────────────────────────────────── */
.swal2-container { backdrop-filter: none; }
.swal2-backdrop-show { background: rgba(0, 0, 0, .5) !important; }

.swal2-popup {
  background: var(--surface) !important;
  color: var(--text-heading) !important;
  border: 1px solid var(--border);
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  font-family: var(--font-ui) !important;
  padding: 0 0 14px !important;
  width: 32em;
}
.swal2-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--text-heading) !important;
  padding: 18px 20px 4px !important;
}
.swal2-html-container {
  font-size: var(--text-base) !important;
  color: var(--text-body) !important;
  margin: 0 !important;
  padding: 0 20px 16px !important;
  line-height: 1.55;
}
.swal2-html-container b,
.swal2-html-container strong { color: var(--text-heading); }

.swal2-actions {
  margin: 0 !important;
  padding: 14px 20px 0 !important;
  border-top: 1px solid var(--border);
  justify-content: flex-end !important;
  gap: 8px;
  width: 100%;
}
.swal2-styled {
  margin: 0 !important;
  height: 34px;
  padding: 0 14px !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.swal2-styled.swal2-confirm {
  background: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  /* --text-on-color is #FFF in light and near-black in dark: the dark brand
     and danger fills are light salmons, so white on them reads at 2.4:1. */
  color: var(--text-on-color) !important;
}
.swal2-styled.swal2-confirm:hover { background: var(--brand-hover) !important; }
.swal2-styled.swal2-cancel {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-heading) !important;
}
.swal2-styled.swal2-cancel:hover { background: var(--surface-sunken) !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--brand-glow) !important; }

/* A destructive confirm opts in by passing customClass.confirmButton */
.swal2-styled.swal2-confirm.hc-danger {
  background: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: var(--text-on-color) !important;
}
.swal2-styled.swal2-confirm.hc-danger:hover { background: var(--color-danger-hover) !important; }

.swal2-icon { margin: 16px auto 8px !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--color-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--color-success) !important; }
.swal2-icon.swal2-warning { border-color: var(--color-warning) !important; color: var(--color-warning) !important; }
.swal2-icon.swal2-error { border-color: var(--color-danger) !important; color: var(--color-danger) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--color-danger) !important; }
.swal2-icon.swal2-info,
.swal2-icon.swal2-question { border-color: var(--brand) !important; color: var(--brand) !important; }

.swal2-input, .swal2-textarea {
  background: var(--surface) !important;
  color: var(--text-heading) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--text-base) !important;
  box-shadow: none !important;
}
.swal2-validation-message {
  background: var(--color-danger-light) !important;
  color: var(--color-danger) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   Account shell (v2) — full-height collapsible sidebar + topbar.

   Namespace is hca-* ("horilla cloud account"). NOT hc-*: the marketing
   stylesheet owns that prefix and silently takes over anything named into
   it (.hc-header is position:fixed there). The shell replaces the top
   navbar on the account pages only; the rest of the portal keeps it.
   ═══════════════════════════════════════════════════════════════════════ */

.hca { height: 100vh; display: flex; background: var(--bg); color: var(--text);
       overflow: hidden; font-family: var(--font-ui); font-size: 14px; }
.hca * { font-family: inherit; }   /* theme sets Poppins on bare h1/p/button */

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.hca-side {
  flex: 0 0 256px; width: 256px; height: 100vh;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: relative; z-index: 30;
  transition: flex-basis .2s ease, width .2s ease;
}
.hca.is-collapsed .hca-side { flex-basis: 68px; width: 68px; }
.hca.is-collapsed .hca-side .hca-side__label,
.hca.is-collapsed .hca-side .hca-plan,
.hca.is-collapsed .hca-side .hca-secttl { display: none; }
.hca.is-collapsed .hca-side .hca-navitem,
.hca.is-collapsed .hca-side .hca-orgbtn { justify-content: center; }

.hca-side__head {
  height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 18px; border-bottom: 1px solid var(--border-soft);
}
/* .hc-logo / .hc-logo__accent are the official brand-kit SVG's own class
   names (from _brand_logo.html): the ink paths follow currentColor, the
   accent paths carry this rule. navbar.html defines the same pair, but that
   file is not loaded here — the account shell suppresses {% block navbar %}
   entirely — so the rule has to exist in this sheet too or the logo renders
   with no brand color at all. */
.hca-brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.hca-brand__chip {
  display: none; width: 28px; height: 28px; border-radius: 7px;
  background: var(--accent); flex-shrink: 0;
}
.hca-brand__full .hc-logo { height: 20px; width: auto; display: block; color: var(--text); }
.hca-brand__full .hc-logo__accent { fill: var(--accent); }
.hca.is-collapsed .hca-brand__full { display: none; }
.hca.is-collapsed .hca-brand__chip { display: block; }

.hca-orgwrap { padding: 12px 12px 4px; position: relative; }
.hca-orgbtn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2);
  cursor: pointer; font: inherit; color: var(--text); text-align: left;
}
.hca-orgbtn:hover { border-color: var(--border-strong); }
.hca-orgbtn__avatar, .hca-orgmenu__avatar {
  width: 28px; height: 28px; border-radius: 7px; background: var(--surface);
  border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.hca-orgbtn__name { font-size: 14px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hca-orgbtn__meta { font-size: 12px; color: var(--muted); white-space: nowrap; }

.hca-orgmenu {
  position: absolute; top: calc(100% + 2px); left: 12px; width: 248px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 40;
  animation: hca-pop .14s ease both;
}
.hca-orgmenu[hidden] { display: none; }
.hca-orgmenu__ttl, .hca-secttl {
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); padding: 6px 8px;
}
.hca-orgmenu a, .hca-orgmenu button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-radius: 8px; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--text); text-align: left;
  text-decoration: none;
}
.hca-orgmenu a:hover, .hca-orgmenu button:hover { background: var(--hover); text-decoration: none; }
.hca-orgmenu__rule { height: 1px; background: var(--border-soft); margin: 6px 0; }

.hca-nav { flex: 1; overflow-y: auto; padding: 10px 12px;
           display: flex; flex-direction: column; gap: 16px; }
.hca-navgroup { display: flex; flex-direction: column; gap: 2px; }
.hca-secttl { padding: 0 10px 6px; }
.hca-navitem {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 10px; border-radius: 9px; border: none;
  background: transparent; color: var(--text-2); font: inherit; font-size: 14px;
  font-weight: 500; cursor: pointer; text-align: left; width: 100%;
  text-decoration: none; transition: background .12s;
}
.hca-navitem:hover { background: var(--hover); color: var(--text-2); text-decoration: none; }
.hca-navitem i { font-size: 17px; color: var(--faint); flex-shrink: 0; }
.hca-navitem .hca-side__label { flex: 1; white-space: nowrap; }
.hca-navitem.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.hca-navitem.is-active i { color: var(--accent); }
.hca-navitem.is-active::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.hca .hca-count {
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--hover); color: var(--muted); font-size: 12px; font-weight: 600;
  font-family: var(--font-mono); display: flex; align-items: center; justify-content: center;
}
.hca-navitem.is-active .hca-count { background: var(--surface); color: var(--accent-text); }

.hca-plan {
  margin: 0 12px 12px; padding: 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.hca-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hca-plan__eyebrow { font-size: 13px; font-weight: 500; color: var(--muted); }
.hca-plan__name { font-size: 16px; font-weight: 600; }
.hca-plan__meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.hca-plan__cta {
  height: 32px; border-radius: 8px; border: none; background: var(--inverse);
  color: var(--inverse-text); font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 6px; text-decoration: none;
}
.hca-plan__cta:hover { background: var(--accent); color: #fff; text-decoration: none; }

.hca-side__foot {
  border-top: 1px solid var(--border-soft); padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.hca-side__foot .hca-navitem { font-size: 14px; }

/* ── Main column ─────────────────────────────────────────────────────── */
.hca-main { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; }
.hca-top {
  height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border);
  position: relative; z-index: 25;
}
.hca-search {
  flex: 1; max-width: 440px; min-width: 0; height: 36px; display: flex;
  align-items: center; gap: 8px; padding: 0 8px 0 11px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.hca-search:hover { border-color: var(--border-strong); }
.hca .hca-search__kbd {
  font-family: var(--font-mono); font-size: 12px; padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  margin-left: auto;
}
.hca-top__spacer { flex: 1; }
.hca-iconbtn {
  position: relative; width: 34px; height: 34px; border-radius: 8px; border: none;
  background: transparent; color: var(--text-2); cursor: pointer; font-size: 17px;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.hca-iconbtn:hover { background: var(--hover); color: var(--text); }
.hca-portalbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: 8px; border: none; background: var(--accent); color: #fff;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  white-space: nowrap; text-decoration: none;
}
.hca-portalbtn:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.hca-avatarbtn {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--inverse); color: var(--inverse-text); font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hca-avatarbtn img { width: 100%; height: 100%; object-fit: cover; }
.hca-usermenu {
  position: absolute; top: calc(100% + 4px); right: 20px; width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 40;
  animation: hca-pop .14s ease both;
}
.hca-usermenu[hidden] { display: none; }
.hca-usermenu a, .hca-usermenu button {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px;
  border-radius: 8px; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--text); text-align: left; text-decoration: none;
}
.hca-usermenu a:hover, .hca-usermenu button:hover { background: var(--hover); text-decoration: none; }
.hca-usermenu i { font-size: 16px; color: var(--faint); }

/* ── Scroll body, breadcrumbs, page head ─────────────────────────────── */
.hca-scroll { flex: 1; overflow-y: auto; }
.hca-page { max-width: 1160px; padding: 20px 32px 64px; }
.hca-crumbs {
  display: flex; align-items: center; gap: 7px; font-size: 14px;
  color: var(--muted); margin-bottom: 10px;
}
.hca-crumbs a { color: var(--muted); text-decoration: none; }
.hca-crumbs a:hover { color: var(--text); text-decoration: none; }
.hca-crumbs i { font-size: 14px; color: var(--faint); }
.hca-crumbs__now { color: var(--text); font-weight: 500; }
.hca-h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.hca-sub { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.hca-head { margin-bottom: 22px; }

/* ── Cards / stats / lists ───────────────────────────────────────────── */
.hca-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.hca-card__head {
  padding: var(--pad); border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.hca-card__ttl { font-size: 16px; font-weight: 600; }
.hca-card__sub { font-size: 14px; color: var(--muted); margin-top: 3px; }
.hca-card__body { padding: var(--pad); }

.hca-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.hca-stat { background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--r); padding: var(--pad); }
.hca-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hca-stat__label { font-size: 14px; color: var(--muted); }
.hca-stat__icon {
  width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border-soft); display: flex; align-items: center;
  justify-content: center; font-size: 16px; color: var(--muted);
}
.hca-stat__value { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-top: 12px; }
.hca-stat__value.is-warn { color: var(--warn); }
.hca-stat__foot { font-size: 13px; color: var(--muted); margin-top: 6px; }

.hca-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }

.hca-row {
  display: flex; align-items: center; gap: 12px;
  padding: var(--cell) var(--pad); border-bottom: 1px solid var(--border-soft);
}
.hca-row:last-child { border-bottom: none; }
.hca-row__ttl { font-size: 16px; font-weight: 500; }
.hca-row__sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.hca-row__action { margin-left: auto; font-size: 14px; font-weight: 500;
                   color: var(--accent-text); text-decoration: none; white-space: nowrap;
                   background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }
.hca-row__action:hover { text-decoration: underline; }
.hca-row__meta { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }

.hca-progress { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.hca-progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.hca-check {
  width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 13px; color: transparent;
}
.hca-check.is-done { border-color: var(--ok); color: var(--ok); }

.hca-actmark {
  width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border-soft); display: flex; align-items: center;
  justify-content: center; font-size: 15px; color: var(--muted); flex-shrink: 0;
}

/* ── Pills, tables, empty states ─────────────────────────────────────── */
.hca-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.hca-pill--ok   { background: var(--ok-bg);   color: var(--ok); }
.hca-pill--warn { background: var(--warn-bg); color: var(--warn); }
.hca-pill--err  { background: var(--err-bg);  color: var(--err); }
.hca-pill--info { background: var(--info-bg); color: var(--info); }
.hca-pill--tag  { background: var(--tag-bg);  color: var(--tag); }
.hca-pill--mute { border: 1px solid var(--border); color: var(--muted); }

.hca-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hca-table th {
  text-align: left; font-size: 13px; font-weight: 500; color: var(--muted);
  padding: 10px var(--pad); background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft); white-space: nowrap;
}
.hca-table td { padding: var(--cell) var(--pad); border-bottom: 1px solid var(--border-soft); }
.hca-table tr:last-child td { border-bottom: none; }

.hca-empty { padding: 44px 24px; text-align: center; }
.hca-empty i { font-size: 26px; color: var(--faint); }
.hca-empty__ttl { font-size: 16px; font-weight: 500; margin-top: 10px; }
.hca-empty__sub { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.hca-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.hca-btn:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.hca-btn--primary { border-color: var(--btn-primary); background: var(--btn-primary); color: var(--text-on-color); }
.hca-btn--primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--text-on-color); }
.hca-btn--danger { border-color: var(--btn-danger); background: var(--btn-danger); color: var(--text-on-color); }
.hca-btn--danger:hover { filter: brightness(1.08); color: var(--text-on-color); }

/* ── Sub-tabs (Profile: Personal / Company) ──────────────────────────── */
.hca-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.hca-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px;
  border: none; background: transparent; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; text-decoration: none; margin-bottom: -1px;
}
.hca-tab:hover { color: var(--text); text-decoration: none; }
.hca-tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; }
.hca-tab__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--warn); }

/* ── Fields ──────────────────────────────────────────────────────────── */
.hca-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hca-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hca-field__label {
  font-size: 13px; font-weight: 500; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.hca-field input, .hca-field select, .hca-field textarea {
  height: var(--field); padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: 14px; width: 100%;
}
.hca-field textarea { height: auto; padding: 10px 11px; resize: vertical; }
.hca-field input:focus, .hca-field select:focus, .hca-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
.hca-field input[readonly] { background: var(--surface-2); color: var(--text-2); }

/* ── Toggle switch (notification matrix) ─────────────────────────────── */
.hca-switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.hca-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.hca-switch__track {
  position: absolute; inset: 0; border-radius: 999px; background: var(--track);
  transition: background .15s;
}
.hca-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 999px; background: #fff; transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.hca-switch input:checked ~ .hca-switch__track { background: var(--accent); }
.hca-switch input:checked ~ .hca-switch__track::after { transform: translateX(16px); }
.hca-switch input:focus-visible ~ .hca-switch__track { box-shadow: 0 0 0 3px var(--ring); }

/* ── Appearance picker ───────────────────────────────────────────────── */
.hca-themes { display: flex; gap: 14px; flex-wrap: wrap; }
.hca-theme {
  width: 180px; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 10px; background: var(--surface); cursor: pointer; font: inherit;
  text-align: left; color: var(--text);
}
.hca-theme.is-active { border-color: var(--accent); }
.hca-theme__preview { height: 62px; border-radius: 8px; overflow: hidden; display: flex; }
.hca-theme__foot { display: flex; align-items: center; justify-content: space-between;
                   margin-top: 9px; font-size: 14px; font-weight: 500; }
.hca-theme__foot i { color: var(--accent); font-size: 16px; opacity: 0; }
.hca-theme.is-active .hca-theme__foot i { opacity: 1; }
.hca-seg {
  display: inline-flex; padding: 3px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.hca-seg button {
  height: 28px; padding: 0 14px; border: none; border-radius: 7px; background: transparent;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.hca-seg button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

@keyframes hca-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hca-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hca-stats { grid-template-columns: repeat(2, 1fr); }
  .hca-grid2 { grid-template-columns: 1fr; }
  .hca-fields { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .hca-side { position: fixed; left: 0; top: 0; transform: translateX(-100%);
              transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .hca.is-navopen .hca-side { transform: none; }
  .hca-burger { display: flex !important; }
  .hca-page { padding: 16px 16px 56px; }
  .hca-stats, .hca-fields { grid-template-columns: 1fr; }
  .hca-search { max-width: none; }
  .hca-search__kbd { display: none; }
}
.hca-burger { display: none; }

/* switchTab() marks the current nav button with .active (it also drives the
   old .profile-tab styling), so the shell's active treatment answers to both. */
.hca-navitem.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.hca-navitem.active i { color: var(--accent); }
.hca-navitem.active::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.hca-navitem.active .hca-count { background: var(--surface); color: var(--accent-text); }

/* The shell is the page: it owns the viewport and scrolls its own column, so
   the account container must not add the old centred max-width or padding. */
.profile-page-container:has(.hca) { max-width: none; margin: 0; padding: 0; }

/* ── Account area: no saturated action fills ─────────────────────────────
   The design uses brand red for the primary action and neutral for
   everything else; status colours appear only as pale washes on pills.
   "Enable" (start auto-renewal) is positive and non-destructive, so it reads
   as a neutral secondary next to "Add Users" rather than a green block. The
   saturated green also failed contrast in dark mode, where --ok is a light
   mint and the label stayed white.
   Scoped to .hca so horilla_admin, which still uses the old palette, is
   untouched. btn-primary (brand) and btn-danger (destructive) are the
   design's own reds and are left alone. */
.hca .btn-success {
  background: var(--surface);
  color: var(--text) !important;
  border: 1px solid var(--border-strong);
}
.hca .btn-success:hover {
  background: var(--hover);
  border-color: var(--border-strong);
  color: var(--text) !important;
}

/* The chat widget is fixed to the bottom-right of every portal page, so the
   account column needs room to scroll its last row clear of the bubble. */
.hca-page { padding-bottom: 120px; }

/* ── Command palette (⌘K) ────────────────────────────────────────────────
   Replaces the window.prompt() stopgap: a real overlay with a filter field,
   keyboard navigation and the design's Page/Action labelling. */
.hca-cmdk {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px; z-index: 1100;
}
.hca-cmdk[hidden] { display: none; }
.hca-cmdk__card {
  width: 100%; max-width: 560px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: hca-pop .16s ease both;
}
.hca-cmdk__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border-soft);
}
.hca-cmdk__head > i { font-size: 17px; color: var(--faint); }
.hca-cmdk__input {
  flex: 1; border: none; outline: none; background: transparent;
  color: var(--text); font: inherit; font-size: 16px; min-width: 0;
}
/* Lives in #hcaPalette, which sits outside .profile-page-container (and
   therefore outside .hca) in the DOM — that guard's font-family:inherit
   never reaches it, so this needs no extra specificity, unlike the three
   mono usages above that do live inside .hca. */
.hca-kbd {
  font-family: var(--font-mono); font-size: 12px; padding: 2px 6px;
  border-radius: 5px; border: 1px solid var(--border); color: var(--muted);
}
.hca-cmdk__list { max-height: 360px; overflow-y: auto; padding: 6px; }
.hca-cmdk__item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 10px; border-radius: 8px; border: none;
  background: transparent; color: var(--text); font: inherit; font-size: 14px;
  cursor: pointer; text-align: left; text-decoration: none;
}
.hca-cmdk__item[aria-selected="true"] { background: var(--hover); }
.hca-cmdk__item > i { font-size: 16px; color: var(--muted); flex-shrink: 0; }
.hca-cmdk__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hca-cmdk__kind { font-size: 13px; color: var(--faint); flex-shrink: 0; }
.hca-cmdk__empty { padding: 28px; text-align: center; font-size: 14px; color: var(--muted); }
.hca-cmdk__foot {
  display: flex; gap: 16px; padding: 10px 16px;
  border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--faint);
}

/* ── Toast ───────────────────────────────────────────────────────────── */
.hca-toast {
  position: fixed; right: 24px; bottom: 24px;
  background: var(--inverse); color: var(--inverse-text); font-size: 14px;
  padding: 10px 14px; border-radius: 10px; display: flex; align-items: center;
  gap: 8px; box-shadow: var(--shadow-lg); z-index: 1200;
  animation: hca-fade-up .2s ease both;
}
.hca-toast[hidden] { display: none; }
.hca-toast > i { font-size: 16px; color: #4FBF85; }

/* Section content eases in, as the design does on every navigation. */
.hca-page .tab-content.active { animation: hca-fade-up .28s ease both; }
@media (prefers-reduced-motion: reduce) {
  .hca-page .tab-content.active,
  .hca-cmdk__card, .hca-toast { animation: none; }
}

/* ── Unsaved-changes bar ─────────────────────────────────────────────────
   The design floats this over a form the moment it is dirty. It follows the
   viewport rather than the card, so on the nine-field Company form the save
   action is reachable without scrolling back up. The per-card Save/Cancel
   buttons stay — this is the same action, brought to where you are. */
.hca-dirty {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 12px;
  background: var(--inverse); color: var(--inverse-text);
  box-shadow: var(--shadow-lg); z-index: 1150; flex-wrap: wrap;
  animation: hca-fade-up .2s ease both;
}
.hca-dirty[hidden] { display: none; }
.hca-dirty > i { font-size: 16px; color: var(--accent); }
.hca-dirty__text { font-size: 14px; font-weight: 500; }
.hca-dirty__actions { display: flex; gap: 6px; margin-left: 8px; }
.hca-dirty__discard {
  height: 32px; padding: 0 12px; border-radius: 8px; border: none;
  background: transparent; color: var(--inverse-text); opacity: .85;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.hca-dirty__discard:hover { opacity: 1; }
.hca-dirty__save {
  height: 32px; padding: 0 14px; border-radius: 8px; border: none;
  background: var(--accent); color: #fff;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.hca-dirty__save:hover { background: var(--accent-hover); }
@media (prefers-reduced-motion: reduce) { .hca-dirty { animation: none; } }
@media (max-width: 640px) { .hca-dirty { left: 16px; right: 16px; transform: none; justify-content: center; } }

/* ── Notification bell in the account topbar ─────────────────────────────
   The bell is the shared hrms_notifications/notification_bell.html partial,
   used unmodified across the whole portal, so its own stylesheet gives the
   wrapper `padding:.4rem 1rem` and `height:100%` sized for the OLD navbar's
   taller flex row, and the icon a fixed 24x24 box in a hardcoded grey that
   ignores the theme. Dropped into this topbar as-is, that padding stacks on
   top of the row's own `gap:10px` on BOTH sides, so the bell sits noticeably
   farther from its neighbours than the theme toggle or portal link — the
   toggle reads as "close to Go to portal, far from the bell" because only
   the bell carries this extra box. A SECOND embedded <style> inside the
   same partial (notification_bell.html) adds its own
   `margin: 0 8px 0 0` on the wrapper — zeroing padding alone did not touch
   that, so the gap only shrank instead of matching. Normalized to the same
   34x34 icon-button as its neighbours; specificity here (two chained
   classes) beats the partial's plain-class rules without needing
   !important. */
.hca-top .oh-navbar__notifications {
  padding: 0; margin: 0; height: 34px; width: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.hca-top .oh-navbar__notifications:hover { background: var(--hover); }
.hca-top .oh-navbar__notification-link { width: 100%; height: 100%; }
.hca-top .oh-navbar__icon { width: 18px; height: 18px; color: var(--text-2); }

/* ── Portal redesign (2026-10): Home / Workspaces / Billing / Help ─────────
   Tokens only; layout collapses to one column at the shell's breakpoints. */
.hca .hca-mono { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }  /* beats .hca * inherit */
.hca-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hca-faint { color: var(--faint); font-size: 13px; }
.hca-nowrap { white-space: nowrap; }
.hca-ok-text { color: var(--ok); display: flex; align-items: center; gap: 6px; font-size: 14px; }
.hca-warn-text { color: var(--warn); }
.hca-link {
  background: none; border: none; padding: 0; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--accent-text); cursor: pointer; text-decoration: none;
}
.hca-link:hover { text-decoration: underline; }
.hca-stack { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.hca-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.hca-btn--sm { height: 28px; padding: 0 10px; font-size: 13px; }
.hca-btn--ink { background: var(--inverse); border-color: var(--inverse); color: var(--inverse-text); }
.hca-btn--ink:hover { background: var(--inverse); color: var(--inverse-text); filter: brightness(1.15); }
.hca-btn--quiet { border-color: transparent; background: transparent; color: var(--muted); }
.hca-seg a {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 7px;
  color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none;
}
.hca-seg a:hover { color: var(--text); text-decoration: none; }
.hca-seg a.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.hca-select, .hca-inputicon input {
  height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: 14px; padding: 0 10px;
}
.hca-select:focus, .hca-inputicon input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

.hca-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px var(--pad); border-radius: var(--r); border: 1px solid var(--border);
  margin-bottom: var(--gap);
}
.hca-banner--warn { background: var(--warn-bg); border-color: transparent; }
.hca-banner--info { background: var(--info-bg); border-color: transparent; }
.hca-banner__icon {
  width: 32px; height: 32px; border-radius: 8px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; color: var(--warn); font-size: 17px; flex-shrink: 0;
}
.hca-banner__text { flex: 1; min-width: 220px; }
.hca-banner__ttl { font-size: 16px; font-weight: 600; }
.hca-banner__sub { font-size: 14px; color: var(--text-2); margin-top: 2px; }

.hca-sechead { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.hca-sechead__ttl { font-size: 16px; font-weight: 600; }

/* Product badge: square with HRMS / CRM, or the workspace's own icon. */
.hca-prod {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
}
.hca-prod--lg { width: 48px; height: 48px; border-radius: 12px; font-size: 12px; }
.hca-prod--img { object-fit: cover; background: var(--surface-2); }
.hca-prod--mute { background: var(--surface-2); color: var(--faint); }

.hca-wsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.hca-wscard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--pad); display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm);
}
.hca-wscard__head { display: flex; align-items: flex-start; gap: 12px; }
.hca-wscard__name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hca-wscard__row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.hca-wscard__plan { font-size: 14px; color: var(--muted); }
.hca-wscard__actions { display: flex; gap: 8px; margin-top: auto; }
.hca-progress > span.is-warn { background: var(--warn); }
.hca-wsnew {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r); background: transparent;
  min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font: inherit; color: var(--muted); cursor: pointer;
}
.hca-wsnew:hover { border-color: var(--accent); color: var(--accent-text); }
.hca-wsnew__plus { font-size: 24px; line-height: 1; }
.hca-wsnew__ttl { font-size: 16px; font-weight: 600; color: var(--text); }
.hca-wsnew__sub { font-size: 13px; }

.hca-card__meta { font-size: 13px; color: var(--muted); }
.hca-card__head--flat { padding: 0 0 12px; border-bottom: none; }
.hca-card--danger { border-color: var(--err-border); }
.hca-card--danger .hca-card__head { border-bottom: none; }

.hca-tiles { display: grid; gap: 10px; }
.hca-tile {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-decoration: none;
}
.hca-tile:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.hca-tile--wide { margin-bottom: var(--gap); }
.hca-tile__ttl { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.hca-tile__sub { font-size: 14px; color: var(--muted); }

.hca-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: var(--gap); }
.hca-toolbar__end { display: flex; gap: 8px; margin-left: auto; }
.hca-inputicon { position: relative; flex: 1; max-width: 340px; min-width: 180px; }
.hca-inputicon i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 16px; }
.hca-inputicon input { width: 100%; padding-left: 32px; }

.hca-wsrow {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto 90px; gap: 14px; align-items: center;
  padding: var(--cell) var(--pad); border-bottom: 1px solid var(--border-soft); cursor: pointer;
}
.hca-wsrow:last-of-type { border-bottom: none; }
.hca-wsrow:hover, .hca-wsrow:focus-visible { background: var(--hover); outline: none; }
.hca-wsrow__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hca-wsrow__plan { font-size: 14px; min-width: 0; }
.hca-wsrow > div:last-child { text-align: right; }

.hca-ws__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hca-ws__title { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.hca-ws__domain {
  background: none; border: none; padding: 0; margin-top: 4px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.hca-ws__domain:hover { color: var(--text); }
.hca-ws__plan { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

.hca-facts { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; margin: 0; padding: var(--pad); font-size: 14px; }
.hca-facts dt { color: var(--muted); font-size: 14px; }
.hca-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hca-bignum { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.hca-bignum span { font-size: 14px; font-weight: 400; color: var(--muted); }
.hca-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.hca-kv span { color: var(--muted); }
.hca-mini3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hca-mini3 > div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.hca-mini3 span { font-size: 13px; color: var(--muted); }
.hca-mini3 strong { font-size: 14px; font-weight: 600; }
.hca-codeline {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px;
  border: 1px solid var(--border-soft); border-radius: 10px;
}
.hca-codeline .hca-mono { flex: 1; color: var(--text); overflow-wrap: anywhere; }
.hca-addon { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.hca-addon__icon {
  width: 34px; height: 34px; border-radius: 9px; background: var(--tag-bg); color: var(--tag);
  display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
}

.hca-upd__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.hca-upd__ver { font-size: 18px; font-weight: 600; margin-top: 2px; }
.hca-upd__next { margin-top: 14px; padding: 14px; border-radius: 10px; background: var(--surface-2); }

.hca-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; }
.hca-split__side { display: flex; flex-direction: column; gap: var(--gap); }
.hca-tablewrap { overflow-x: auto; }
.hca-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px var(--pad); border-top: 1px solid var(--border-soft); }

@media (max-width: 1100px) {
  .hca-split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hca-wsrow { grid-template-columns: minmax(0, 1fr) auto; }
  .hca-wsrow__plan, .hca-wsrow > div:last-child { display: none; }
  .hca-mini3 { grid-template-columns: 1fr; }
  .hca-facts { grid-template-columns: 1fr; gap: 2px; }
  .hca-facts dd { margin-bottom: 8px; }
  .hca-toolbar__end { margin-left: 0; width: 100%; }
  .hca-inputicon { max-width: none; }
}
/* Count and dot carry .hca-side__label (hidden when collapsed) but must not grow like the label. */
.hca-navitem .hca-count.hca-side__label { flex: 0 0 auto; }
.hca-navitem .hca-tab__dot { flex: 0 0 6px; margin-left: auto; }
@media (max-width: 760px) {
  .hca-search > span:not(.hca-search__kbd) { display: none; }   /* icon only; label wrapped to 3 lines */
  .hca-search { flex: 0 0 36px; justify-content: center; padding: 0; }
}
.hca-tabs { overflow-x: auto; scrollbar-width: none; }
.hca-tab { white-space: nowrap; flex-shrink: 0; }

/* ── Right-side drawer (Book a demo, New support request) ────────────────
   The open/close functions set display:flex / none on the backdrop, as the
   old centred modals did; only the presentation changed. */
.hca-drawer {
  position: fixed; inset: 0; z-index: 1000; background: var(--overlay);
  justify-content: flex-end; align-items: stretch;
}
.hca-drawer__panel {
  width: 480px; max-width: 100vw; height: 100%; background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: hca-drawer-in .22s ease both;
}
.hca-drawer__panel > form { display: flex !important; flex-direction: column; flex: 1; min-height: 0; }
.hca-drawer .hc-modal__head { padding: 20px 22px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.hca-drawer .hc-modal__body { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.hca-drawer .hc-modal__foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.hca-drawer .modal-grid { grid-template-columns: 1fr 1fr; }
@keyframes hca-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hca-drawer__panel { animation: none; } }
@media (max-width: 520px) { .hca-drawer .modal-grid { grid-template-columns: 1fr; } }

/* ── New workspace page ──────────────────────────────────────────────── */
.hca-nw { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.hca-nw__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hca-nw__sec { display: flex; flex-direction: column; gap: 12px; }
.hca-nw__sechead { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.hca-nw__num {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 600;
}
.hca-nw__ttl { font-size: 16px; font-weight: 600; }
.hca-nw__label { font-size: 14px; font-weight: 500; margin-top: 4px; }
.hca-nw__addr {
  display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); overflow: hidden;
}
.hca-nw__addr:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.hca-nw__addr > .hca-mono:first-child { padding-left: 12px; color: var(--faint); }
.hca-nw__addr input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text);
  padding: 11px 2px; font-family: var(--font-mono); font-size: 14px;
}
.hca .hca-nw__suffix { padding: 11px 12px; background: var(--surface-2); border-left: 1px solid var(--border); color: var(--muted); }
.hca-nw__tz { max-width: 360px; height: 40px; }
.hca-nw__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.hca-nw__opt, .hca-nw__plan {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); font: inherit; cursor: pointer;
}
.hca-nw__opt:hover, .hca-nw__plan:hover:not(:disabled) { border-color: var(--border-strong); }
.hca-nw__opt.is-on, .hca-nw__plan.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.hca-nw__plan:disabled { opacity: .55; cursor: not-allowed; }
.hca-nw__optname { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hca-nw__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hca-nw__chips span { font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 3px 9px; }
.hca-nw__plans { display: flex; flex-direction: column; gap: 8px; }
.hca-nw__plan { flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.hca-nw__dot {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex: none;
  margin-top: 2px; display: grid; place-items: center;
}
.hca-nw__plan.is-on .hca-nw__dot { border-color: var(--accent); }
.hca-nw__plan.is-on .hca-nw__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hca-nw__paid { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.hca-nw__seatrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hca-stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.hca-stepper button { width: 38px; height: 38px; border: none; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.hca-stepper button:hover { background: var(--hover); color: var(--text); }
.hca-stepper input {
  width: 56px; height: 38px; border: none; text-align: center; background: transparent; color: var(--text);
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; -moz-appearance: textfield;
}
.hca-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.hca-nw__check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.hca-nw__check input { width: 16px; height: 16px; accent-color: var(--accent); }
.hca-nw__side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.hca-nw__preview { overflow: hidden; }
.hca-nw__bar { padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.hca-nw__bar .hca-mono { display: block; background: var(--surface); border-radius: 6px; padding: 4px 8px; }
.hca-nw__brand { padding: 18px; display: flex; align-items: center; gap: 12px; }
.hca-nw__brand .hca-prod { background: var(--accent); color: var(--inverse-text); font-size: 14px; }
.hca-nw__sum { grid-template-columns: 80px 1fr; }
.hca-nw__sum dd { text-align: right; }
.hca-nw__due { display: flex; justify-content: space-between; align-items: baseline; padding: 14px var(--pad) 6px; border-top: 1px solid var(--border-soft); }
.hca-nw__total { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.hca-nw__note { padding: 0 var(--pad); line-height: 1.5; }
.hca-nw__ctas { padding: 14px var(--pad) var(--pad); display: flex; flex-direction: column; gap: 10px; }
.hca-nw__cta { height: 44px; font-size: 14px; width: 100%; }
.hca-nw__cta:disabled { background: var(--surface-2); border-color: var(--border); color: var(--faint); cursor: not-allowed; }
.hca-nw__links { display: flex; justify-content: space-between; gap: 8px; }
.hca-nw__links .hca-link { color: var(--muted); font-weight: 400; }
@media (max-width: 1100px) { .hca-nw { grid-template-columns: 1fr; } .hca-nw__side { position: static; } }

/* ── Drawer contents, as in the design ───────────────────────────────── */
.hca-drawer .hc-modal__close {
  background: none; border: none; color: var(--faint); font-size: 19px; cursor: pointer; padding: 2px; line-height: 1;
}
.hca-drawer .hc-modal__close:hover { color: var(--text); }
.hca-drawer__ttl { font-size: 20px; font-weight: 600; }
.hca-drawer__sub { font-size: 14px; color: var(--faint); margin-top: 2px; }
.hca-drawer__panel > form { display: flex; }
.hca-dfield { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.hca-dfield-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hca-dfield input, .hca-dfield select, .hca-dfield textarea {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 14px; outline: none; width: 100%;
}
.hca-dfield select { height: 42px; }
.hca-dfield textarea { resize: vertical; }
.hca-dfield input:focus, .hca-dfield select:focus, .hca-dfield textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.hca-segfull { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-2); }
.hca-segfull label { flex: 1; cursor: pointer; }
.hca-segfull input { position: absolute; opacity: 0; pointer-events: none; }
.hca-segfull span { display: block; text-align: center; padding: 7px 0; border-radius: 7px; font-size: 14px; color: var(--muted); }
.hca-segfull input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 500; }
.hca-segfull input:focus-visible + span { box-shadow: 0 0 0 3px var(--ring); }
.hca-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1.5px dashed var(--border); border-radius: 12px; padding: 18px; text-align: center;
  font-size: 14px; color: var(--muted); cursor: pointer;
}
.hca-drop:hover, .hca-drop.is-over { border-color: var(--accent); }
.hca-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hca-drop:focus-within { box-shadow: 0 0 0 3px var(--ring); }
.hca-drop__link { color: var(--accent-text); }
.hca-daygrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hca-timegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hca-daygrid button, .hca-timegrid button {
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text); border-radius: 10px;
  padding: 8px 0; text-align: center; cursor: pointer; font: inherit;
}
.hca-daygrid button span { display: block; font-size: 12px; color: var(--faint); }
.hca-daygrid button b { font-size: 14px; font-weight: 600; }
.hca-timegrid button { padding: 9px 0; font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.hca-daygrid button:hover, .hca-timegrid button:hover { border-color: var(--border-strong); }
.hca-daygrid button.is-on, .hca-timegrid button.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
@media (max-width: 520px) {
  .hca-dfield-row { grid-template-columns: 1fr; }
  .hca-daygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hca-timegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The drawers live outside .hca, so they take the shell's text colour and font explicitly. */
.hca-drawer__panel { color: var(--text); font-family: var(--font-ui); }
.hca-drawer__panel * { font-family: inherit; }
.hca-drawer .hca-timegrid button { font-family: var(--font-mono); }

/* ══ Design shell (Claude Design portal, values copied from the file) ═══════ */
.hca { font-size: 14px; }
.hca .hcd-side {
  flex: 0 0 248px; width: 248px; padding: 18px 14px; gap: 16px; font-size: 14px;
  background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto;
}
.hcd-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; color: var(--ink); text-decoration: none; }
.hcd-brand .hc-logo { height: 26px; width: auto; }
.hcd-switch { position: relative; }
.hcd-switch__btn {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--soft2); color: var(--ink); font: inherit;
}
.hcd-switch__btn:hover { border-color: var(--faint); }
.hcd-switch__btn > svg { color: var(--faint); flex: none; }
.hcd-switch__ini {
  width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--panel);
  display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none;
}
.hcd-switch__ini--sm { width: 24px; height: 24px; border-radius: 6px; background: var(--soft); color: var(--ink); font-size: 12px; }
.hcd-switch__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hcd-switch__name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcd-switch__sub { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hca .hcd-switch__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; width: auto;
}
.hcd-switch__ttl { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--faint); padding: 6px 8px; }
.hcd-switch__item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer;
  border: none; background: transparent; text-align: left; color: var(--ink); font: inherit;
}
.hcd-switch__item:hover, .hcd-switch__item.is-on { background: var(--soft); }
.hcd-switch__iname { font-size: 13px; font-weight: 500; }
.hcd-switch__isub { font-size: 12px; color: var(--faint); }
.hcd-switch__new {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: none; border-top: 1px solid var(--line2);
  margin-top: 4px; background: transparent; font: inherit; font-size: 13px; color: var(--accent-text); cursor: pointer; text-align: left;
}
.hcd-nav { display: flex; flex-direction: column; gap: 2px; }
.hcd-navitem {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; cursor: pointer; width: 100%;
  border: none; background: transparent; color: var(--ink); font: inherit; font-size: 14px; text-align: left; text-decoration: none;
}
.hcd-navitem > i { font-size: 17px; color: inherit; }
.hcd-navitem > span:first-of-type { flex: 1; }
.hcd-navitem:hover { background: var(--soft); color: var(--ink); text-decoration: none; }
.hcd-navitem.active { background: var(--soft); font-weight: 600; }
.hcd-navitem__n { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--faint); }
.hcd-navitem__n--warn { color: var(--warn); }
.hcd-navitem--quiet { color: var(--mute); }
.hcd-navitem__arrow { font-size: 12px; }
.hcd-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.hcd-trial { border-radius: 12px; padding: 14px; background: var(--warnbg); display: flex; flex-direction: column; gap: 8px; }
.hcd-trial__ttl { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--warn); }
.hcd-trial__sub { font-size: 12px; color: var(--mute); line-height: 1.4; }
.hcd-trial__cta {
  text-align: center; background: var(--ink); color: var(--panel); border-radius: 8px; padding: 8px; border: none;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.hcd-top {
  height: 60px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 32px;
  border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 5;
}
.hcd-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; flex: 1 1 auto; min-width: 90px; overflow: hidden; }
#accountCrumb { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hcd-crumbs__link { border: none; background: none; padding: 0; font: inherit; color: var(--mute); cursor: pointer; white-space: nowrap; }
.hcd-crumbs__link:hover { color: var(--ink); }
.hcd-crumbs__now { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hcd-crumbs__sep { color: var(--faint); flex: none; }
.hcd-search {
  margin-left: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 10px; flex: 0 1 240px; min-width: 0; overflow: hidden; color: var(--faint); font: inherit; font-size: 13px;
  cursor: pointer; background: var(--soft2); text-align: left;
}
.hcd-search__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hcd-search__kbd { font-family: var(--font-mono); font-size: 12px; font-weight: 500; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.hcd-iconbtn, .hca .hcd-bell .oh-navbar__notification-link {
  width: 36px; height: 36px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 9px; display: grid;
  place-items: center; cursor: pointer; color: var(--mute); background: transparent; font-size: 16px; position: relative;
}
.hcd-iconbtn:hover { color: var(--ink); }
.hcd-openbtn {
  display: flex; align-items: center; gap: 6px; background: var(--btn-primary); color: var(--text-on-color); border-radius: 9px;
  padding: 8px 14px; font-weight: 500; font-size: 13px; white-space: nowrap; text-decoration: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.hcd-openbtn:hover { background: var(--btn-primary-hover); color: var(--text-on-color); text-decoration: none; }
.hcd-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--panel); display: grid; place-items: center;
  font-size: 12px; font-weight: 600; cursor: pointer; flex: none; border: none; font-family: inherit;
}
.hca .hcd-page { max-width: 1240px; padding: 28px 32px 120px; }
@media (max-width: 760px) {
  .hcd-top { padding: 0 16px; gap: 10px; }
  .hcd-search { flex: 0 0 36px; padding: 0; justify-content: center; height: 36px; }
  .hcd-search__label, .hcd-search__kbd { display: none; }
  .hcd-openbtn { display: none; }
  .hca .hcd-page { padding: 20px 16px 120px; }
  .hca .hcd-side { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); }
  .hca.is-navopen .hcd-side { transform: none; }
}
.hcd-bell { position: relative; display: block; }
.hca .hcd-bell .oh-navbar__icon { font-size: 16px; color: var(--mute); }
/* The unread dot. The base theme gives the beacon min-width AND min-height 18px; resetting only the width left a tall oval over the bell. */
.hca .hcd-bell .oh-navbar__notification-beacon {
  position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; min-width: 0; min-height: 0; padding: 0; border: 0;
  border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 2px var(--panel); font-size: 0; line-height: 0; overflow: hidden;
  box-sizing: border-box;
}

/* ── Design kit: the repeated pieces of the design file ──────────────────── */
.hcd-stack { display: flex; flex-direction: column; gap: 20px; }
.hcd-h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.hcd-sub { color: var(--mute); font-size: 14px; margin-top: 3px; }
.hcd-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hcd-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.hcd-card--clip { overflow: hidden; }
.hcd-card--pad { padding: var(--cp); display: flex; flex-direction: column; gap: 12px; }
.hcd-card__head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hcd-card__ttl { font-weight: 600; font-size: 16px; }
.hcd-card__sub { font-size: 13px; color: var(--faint); }
.hcd-row { display: flex; align-items: center; gap: 12px; padding: var(--rp) 20px; border-bottom: 1px solid var(--line2); }
.hcd-row:last-child { border-bottom: none; }
.hcd-row__ttl { font-size: 14px; font-weight: 500; }
.hcd-row__sub { font-size: 12px; color: var(--faint); }
.hcd-faint { color: var(--faint); }
.hcd-mute { color: var(--mute); }
.hcd-mono { font-family: var(--font-mono); }
.hca .hcd-mono { font-family: var(--font-mono); }
.hcd-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; cursor: pointer; background: var(--panel); color: var(--ink);
  text-decoration: none; white-space: nowrap; line-height: 1.25;
}
.hcd-btn:hover { border-color: var(--faint); color: var(--ink); text-decoration: none; }
.hcd-btn--acc { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--text-on-color); }
.hcd-btn--acc:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--text-on-color); }
.hcd-btn--ink { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.hcd-btn--ink:hover { opacity: .9; border-color: var(--ink); color: var(--panel); }
.hcd-btn--bad { background: var(--btn-danger); border-color: var(--btn-danger); color: var(--text-on-color); }
.hcd-btn--bad:hover { filter: brightness(1.08); color: var(--text-on-color); }
.hcd-btn--sm { font-size: 13px; border-radius: 8px; padding: 6px 12px; }
.hcd-btn--md { padding: 7px 13px; }
.hcd-btn--grow { flex: 1; padding: 8px; }
.hcd-btn:disabled { opacity: .55; cursor: not-allowed; }
.hcd-link { font-size: 13px; color: var(--accent-text); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; text-decoration: none; }
.hcd-link:hover { color: var(--accent-text); text-decoration: underline; }
.hcd-link--sm { font-size: 13px; }
.hcd-link--mute { color: var(--mute); }
.hcd-pill { font-size: 12px; font-weight: 500; border-radius: 999px; padding: 3px 9px; white-space: nowrap; display: inline-block; line-height: 1.35; }
.hcd-pill--ok { color: var(--ok); background: var(--okbg); }
.hcd-pill--warn { color: var(--warn); background: var(--warnbg); }
.hcd-pill--bad { color: var(--bad); background: var(--badbg); }
.hcd-pill--info { color: var(--info); background: var(--infobg); }
.hcd-pill--neu { color: var(--mute); background: var(--soft); }
.hcd-prod {
  width: 40px; height: 40px; border-radius: 10px; background: var(--accbg); color: var(--accent-text); display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px; flex: none;
}
.hca .hcd-prod { font-family: var(--font-mono); }
.hcd-prod--sm { width: 36px; height: 36px; border-radius: 9px; font-size: 12px; }
.hcd-prod--lg { width: 48px; height: 48px; border-radius: 12px; font-size: 12px; }
.hcd-prod--mute { background: var(--soft); color: var(--faint); }
img.hcd-prod { object-fit: cover; background: var(--soft); }
.hcd-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; box-shadow: inset 3px 0 0 var(--warn);
}
.hcd-banner--info { box-shadow: inset 3px 0 0 var(--info); padding: 14px 18px; gap: 14px; }
.hcd-banner__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--warnbg); color: var(--warn); display: grid; place-items: center; flex: none; }
.hcd-banner__text { flex: 1; min-width: 260px; }
.hcd-banner__ttl { font-weight: 600; font-size: 14px; }
.hcd-banner__sub { font-size: 13px; color: var(--mute); margin-top: 2px; }
.hcd-bar { height: 6px; border-radius: 3px; background: var(--soft); }
.hcd-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--acc); }
.hcd-bar > span.is-warn { background: var(--warn); }
.hcd-bar--8 { height: 8px; border-radius: 4px; }
.hcd-bar--5 { height: 5px; }
.hcd-sechead { display: flex; align-items: baseline; justify-content: space-between; }
.hcd-sechead__ttl { font-weight: 600; font-size: 16px; }
.hcd-switch-ui { width: 38px; height: 22px; border-radius: 11px; background: var(--track); position: relative; flex: none; display: inline-block; }
.hcd-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.hcd-switch-ui.is-on { background: var(--acc); }
.hcd-switch-ui.is-on::after { left: 18px; }
.hcd-seg { display: inline-flex; gap: 2px; font-size: 13px; background: var(--soft); border-radius: 8px; padding: 3px; }
.hcd-seg > * { padding: 5px 12px; border-radius: 6px; color: var(--mute); text-decoration: none; border: none; background: transparent; font: inherit; cursor: pointer; }
.hcd-seg > .is-on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.hcd-seg > *:hover { color: var(--ink); text-decoration: none; }
.hcd-seg--sm > * { padding: 4px 11px; }
.hcd-empty { padding: 32px 20px; text-align: center; font-size: 13px; color: var(--faint); }
.hcd-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mute); min-width: 0; }
.hcd-field input, .hcd-field select, .hcd-field textarea {
  border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 14px;
  outline: none; color: var(--ink); width: 100%;
}
.hcd-field input:focus, .hcd-field select:focus, .hcd-field textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accbg); }
.hcd-field input[readonly] { background: var(--soft2); color: var(--mute); }
.hcd-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.hcd-fields--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Home */
.hcd-wsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.hcd-wscard { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.hcd-wscard__head { display: flex; align-items: flex-start; gap: 12px; }
.hcd-wscard__name { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcd-wscard__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.hcd-wsnew {
  border: 1.5px dashed var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; cursor: pointer; min-height: 180px; color: var(--mute); background: transparent; font: inherit;
}
.hcd-wsnew:hover { border-color: var(--acc); color: var(--acc); }
.hcd-wsnew__plus { width: 40px; height: 40px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 22px; }
.hcd-wsnew__ttl { font-weight: 600; font-size: 14px; }
.hcd-wsnew__sub { font-size: 13px; color: var(--faint); }
.hcd-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 14px; align-items: start; }
.hcd-setup__head { padding: 18px 20px 12px; display: flex; justify-content: space-between; align-items: baseline; }
.hcd-setup__row { display: flex; align-items: center; gap: 12px; padding: var(--rp) 20px; border-top: 1px solid var(--line2); }
.hcd-check {
  width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--line); background: transparent;
  color: #fff; display: grid; place-items: center; font-size: 12px; flex: none;
}
.hcd-check.is-done { border-color: var(--ok); background: var(--ok); }
.hcd-act { display: flex; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line2); font-size: 13px; align-items: center; }
.hcd-act__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--info); }
.hcd-act__dot--ok { background: var(--ok); }
.hcd-act__dot--bad { background: var(--bad); }
.hcd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hcd-tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; display: flex;
  flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--ink); text-decoration: none;
}
.hcd-tile:hover { border-color: var(--faint); color: var(--ink); text-decoration: none; }
.hcd-tile__ttl { font-size: 13px; font-weight: 600; }
.hcd-tile__sub { font-size: 12px; color: var(--faint); line-height: 1.4; }
@media (max-width: 560px) { .hcd-tiles { grid-template-columns: 1fr; } .hcd-wsgrid { grid-template-columns: 1fr; } }
.hcd-top .hca-burger { display: none; }
.hcd-brand .hc-logo__accent { fill: var(--acc); }
.hca .hcd-switch { padding: 0; }
/* Workspaces */
.hcd-wsrow {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto auto; gap: 16px; align-items: center;
  padding: var(--rp) 20px; border-bottom: 1px solid var(--line2); cursor: pointer;
}
.hcd-wsrow:hover, .hcd-wsrow:focus-visible { background: var(--hover); outline: none; }
.hcd-wsrow__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hcd-wsrow__name { font-weight: 600; font-size: 14px; }
.hcd-wsrow__plan { font-size: 13px; color: var(--mute); min-width: 0; }
.hcd-toolbar { padding: 10px 20px; border-bottom: 1px solid var(--line2); }
.hcd-search-input { width: 100%; max-width: 320px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; background: var(--soft2); color: var(--ink); font: inherit; font-size: 13px; }
.hca-dfield input.hcd-codeinput { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
@media (max-width: 760px) {
  .hcd-wsrow { grid-template-columns: minmax(0, 1fr) auto; }
  .hcd-wsrow__plan, .hcd-wsrow > :last-child { display: none; }
}
/* Workspace detail */
.hca .hcd-page .hcd-wshead { margin: -28px -32px 0; padding: 24px 32px 0; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.hcd-wshead__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hcd-wshead__name { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.hcd-wshead__domain { font-family: var(--font-mono); font-size: 13px; color: var(--mute); margin-top: 3px; cursor: pointer; border: none; background: none; padding: 0; }
.hcd-tabs { display: flex; gap: 4px; font-size: 14px; overflow-x: auto; scrollbar-width: none; }
.hcd-tab { padding: 10px 12px; cursor: pointer; white-space: nowrap; color: var(--mute); font: inherit; font-size: 14px; border: none; background: none; display: flex; align-items: center; gap: 6px; }
.hcd-tab:hover { color: var(--ink); }
.hcd-tab.is-active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--acc); }
.hcd-wsbody { padding: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.hcd-fact { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: var(--rp) 20px; border-top: 1px solid var(--line2); font-size: 14px; }
.hcd-fact > span:first-child { color: var(--mute); }
.hcd-fact > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcd-bignum { font-size: 32px; font-weight: 600; letter-spacing: -.03em; }
.hcd-warn { color: var(--warn); }
.hcd-mini3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.hcd-mini3 > div { background: var(--panel); padding: 10px 12px; }
.hcd-mini3__k { font-size: 12px; color: var(--faint); }
.hcd-mini3__v { font-weight: 600; }
.hcd-toggle-row { display: flex; align-items: center; gap: 12px; cursor: pointer; border: none; background: none; padding: 0; font: inherit; color: var(--ink); width: 100%; }
.hcd-planfoot { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line2); padding-top: 14px; align-items: center; }
.hcd-codecopy { font-size: 12px; color: var(--faint); margin-left: auto; font-family: var(--font-mono); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; border: none; background: none; padding: 0; }
.hcd-codecopy:hover { color: var(--ink); }
.hcd-addon { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.hcd-addon__icon { width: 36px; height: 36px; border-radius: 9px; background: var(--accbg); color: var(--acc); display: grid; place-items: center; flex: none; }
.hcd-card--bad { border-color: var(--bad); }
.hcd-divided { border-top: 1px solid var(--line2); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.hcd-hist { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; font-size: 13px; }
.hcd-select { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; }
@media (max-width: 760px) { .hca .hcd-page .hcd-wshead { margin: -20px -16px 0; padding: 20px 16px 0; } .hcd-mini3 { grid-template-columns: 1fr; } }
/* Billing */
.hcd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.hcd-stat { padding: 18px; }
.hcd-stat__k { font-size: 13px; color: var(--mute); }
.hcd-stat__v { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; }
.hcd-stat__d { font-size: 13px; color: var(--faint); margin-top: 2px; }
.hcd-split { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.hcd-split__main { min-width: 0; flex: 999 1 560px; }
.hcd-split__side { display: flex; flex-direction: column; gap: 14px; flex: 1 1 300px; min-width: 0; }
.hcd-invhead { padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.hcd-inv {
  display: grid; grid-template-columns: 96px 110px minmax(160px, 1.6fr) minmax(130px, 1fr) 80px 72px 40px; gap: 12px; align-items: center;
  padding: var(--rp) 20px; border-bottom: 1px solid var(--line2); font-size: 13px;
}
.hcd-inv--head { padding: 9px 20px; font-size: 12px; font-weight: 500; color: var(--faint); background: var(--soft2); border-bottom: 1px solid var(--line); }
a.hcd-pill { text-decoration: none; }
.hcd-dl { width: 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; color: var(--mute); }
.hcd-dl:hover { color: var(--ink); border-color: var(--faint); }
.hcd-pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; }
.hcd-kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 18px; border-top: 1px solid var(--line2); font-size: 13px; }
.hcd-kv > span:first-child { color: var(--mute); }
.hcd-kv > span:last-child { text-align: right; }
/* Help & support */
.hcd-helpsearch { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--soft2); color: var(--faint); margin: 0; }
.hcd-helpsearch input[type=search] { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink); min-width: 0; }
.hcd-helpsearch:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accbg); }
.hcd-topic { font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; color: var(--mute); text-decoration: none; }
.hcd-topic:hover { border-color: var(--faint); color: var(--ink); text-decoration: none; }
a.hcd-row--link { color: var(--ink); text-decoration: none; }
a.hcd-row--link:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
/* Account */
.hca .hcd-account { max-width: 1040px; }
.hcd-acchead { display: flex; align-items: center; gap: 16px; }
.hcd-acchead__avatar {
  width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--panel); display: grid; place-items: center;
  font-size: 18px; font-weight: 600; border: none; cursor: pointer; overflow: hidden; padding: 0; font-family: inherit; flex: none;
}
.hcd-acchead__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hcd-acchead__name { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.hcd-tabs--line { border-bottom: 1px solid var(--line); }
.hcd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.hcd-acccard { gap: 16px; margin: 0; }
.hcd-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 12px; }
.hcd-themecard { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; background: var(--panel); font: inherit; color: var(--ink); text-align: left; }
.hcd-themecard.is-active { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accbg); }
.hcd-themecard__prev { height: 56px; border-radius: 7px; overflow: hidden; display: flex; border: 1px solid var(--line); }
.hcd-themecard__prev > span { flex: 1; }
.hcd-themecard__foot { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; }
.hcd-themecard__mark { color: var(--acc); visibility: hidden; }
.hcd-themecard.is-active .hcd-themecard__mark { visibility: visible; }
.hcd-seg > button.is-active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.hcd-notif { display: grid; grid-template-columns: 1fr 64px 64px; gap: 12px; padding: var(--rp) 20px; border-bottom: 1px solid var(--line2); align-items: center; }
.hcd-notif:last-child { border-bottom: none; }
.hcd-notif--head { padding: 14px 20px; border-bottom: 1px solid var(--line); align-items: end; }
.hcd-notif--head > span { font-size: 12px; color: var(--faint); text-align: center; }
.hcd-switchbox { justify-self: center; position: relative; cursor: pointer; display: inline-flex; }
.hcd-switchbox input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.hcd-switchbox input:checked + .hcd-switch-ui { background: var(--acc); }
.hcd-switchbox input:checked + .hcd-switch-ui::after { left: 18px; }
.hcd-switchbox input:focus-visible + .hcd-switch-ui { box-shadow: 0 0 0 3px var(--accbg); }
@media (max-width: 560px) { .hcd-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Links and buttons inside .hca inherit colour and font from older shell rules; the kit wins here. */
.hca a.hcd-btn { color: var(--ink); }
.hca a.hcd-btn--ink, .hca a.hcd-btn--ink:hover { color: var(--panel); }
.hca a.hcd-btn--acc, .hca a.hcd-btn--acc:hover, .hca a.hcd-btn--bad { color: var(--text-on-color); }
.hca a.hcd-link { color: var(--accent-text); }
.hca .hcd-wshead__domain, .hca .hcd-codecopy, .hca .hcd-search__kbd, .hca .hcd-navitem__n { font-family: var(--font-mono); }
.hca .hcd-account { max-width: 976px; }
.hca .hcd-field input, .hca .hcd-field select { height: auto; min-height: 0; }
/* New workspace (design values) */
.hcd-nw { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin: 0; }
.hcd-nw__main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hcd-nw__side { flex: 1 1 320px; min-width: 0; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.hcd-nw__sec { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.hcd-nw__sechead { display: flex; align-items: center; gap: 12px; }
.hcd-nw__num { width: 26px; height: 26px; border-radius: 50%; background: var(--soft); color: var(--mute); display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; }
.hcd-nw__num.is-done { background: var(--ok); color: #fff; }
.hcd-nw__ttl { font-size: 16px; font-weight: 600; }
.hcd-nw__label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink); }
.hcd-nw__input { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 14px; font-weight: 400; outline: none; color: var(--ink); }
.hcd-nw__input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accbg); }
.hcd-nw__addr { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.hcd-nw__addr:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accbg); }
.hca .hcd-nw__pre, .hca .hcd-nw__suf, .hca .hcd-nw__addr input { font-family: var(--font-mono); }
.hcd-nw__pre { padding: 10px 0 10px 12px; font-size: 14px; color: var(--faint); }
.hcd-nw__addr input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 10px 2px; font-size: 14px; color: var(--ink); }
.hcd-nw__suf { padding: 10px 12px; background: var(--soft); font-size: 13px; color: var(--mute); border-left: 1px solid var(--line); }
.hcd-nw__state { font-size: 13px; color: var(--faint); }
.hcd-ok { color: var(--ok); }
.hcd-nw__tzline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); flex-wrap: wrap; }
.hcd-nw__tzline b { color: var(--ink); font-weight: 500; }
.hcd-nw__tz { max-width: 360px; margin-top: -8px; }
.hcd-nw__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.hcd-nw__opt { border: 1.5px solid var(--line); border-radius: 12px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; background: var(--panel); font: inherit; color: var(--ink); text-align: left; }
.hcd-nw__opt.is-on { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accbg); }
.hcd-nw__opthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hcd-nw__optname { display: block; font-size: 16px; font-weight: 600; }
.hcd-nw__optdesc { display: block; font-size: 13px; color: var(--mute); }
.hcd-nw__mark { width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--line); color: transparent; display: grid; place-items: center; font-size: 12px; flex: none; }
.hcd-nw__opt.is-on .hcd-nw__mark { border-color: var(--acc); background: var(--acc); color: #fff; }
.hcd-nw__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hcd-nw__chips span { font-size: 12px; color: var(--mute); background: var(--soft); border-radius: 999px; padding: 3px 9px; }
.hcd-nw__plans { display: flex; flex-direction: column; gap: 8px; }
.hcd-nw__plan { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; background: var(--panel); font: inherit; color: var(--ink); text-align: left; }
.hcd-nw__plan.is-on { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accbg); }
.hcd-nw__plan:disabled { opacity: .55; cursor: not-allowed; }
.hcd-nw__dot { width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex: none; margin-top: 1px; }
.hcd-nw__plan.is-on .hcd-nw__dot { border-color: var(--acc); }
.hcd-nw__plan.is-on .hcd-nw__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.hcd-nw__planname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.hcd-nw__plandesc { display: block; font-size: 13px; color: var(--mute); margin-top: 2px; }
.hcd-nw__badge { font-size: 12px; font-weight: 500; color: var(--accent-text); background: var(--accbg); border-radius: 999px; padding: 2px 8px; }
.hcd-nw__paid { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line2); padding-top: 14px; }
.hcd-nw__seatrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hcd-nw__check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.hcd-nw__check input { width: 16px; height: 16px; accent-color: var(--acc); }
.hcd-nw__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--soft); border-bottom: 1px solid var(--line); }
.hcd-nw__bar i { width: 8px; height: 8px; border-radius: 50%; opacity: .7; background: var(--bad); }
.hcd-nw__bar i:nth-child(2) { background: var(--warn); }
.hcd-nw__bar i:nth-child(3) { background: var(--ok); }
.hcd-nw__url { flex: 1; margin-left: 6px; background: var(--panel); border-radius: 6px; padding: 4px 8px; font-family: var(--font-mono); font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hca .hcd-nw__url { font-family: var(--font-mono); }
.hcd-nw__brand { padding: 18px; display: flex; align-items: center; gap: 12px; }
.hcd-nw__ini { width: 44px; height: 44px; border-radius: 11px; background: var(--acc); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; flex: none; }
.hcd-nw__org { font-size: 14px; font-weight: 600; }
.hcd-nw__sum { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line2); font-size: 13px; }
.hcd-nw__sum > span:first-child { color: var(--mute); }
.hcd-nw__sum > span:last-child { text-align: right; }
.hcd-nw__due { padding: 14px 18px; display: flex; justify-content: space-between; align-items: baseline; }
.hcd-nw__total { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.hcd-nw__note { padding: 0 18px 16px; font-size: 13px; color: var(--mute); line-height: 1.5; }
.hcd-nw__ctas { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.hcd-nw__cta { text-align: center; font: inherit; font-size: 14px; font-weight: 600; background: var(--btn-primary); color: var(--text-on-color); border-radius: 10px; padding: 12px; cursor: pointer; border: none; }
.hcd-nw__cta:hover:not(:disabled) { background: var(--btn-primary-hover); }
.hcd-nw__cta:disabled { background: var(--soft); color: var(--faint); cursor: not-allowed; }
.hcd-nw__links { display: flex; justify-content: space-between; font-size: 13px; }
.hcd-nw__links .hcd-link { font-size: 13px; }
@media (max-width: 900px) { .hcd-nw__side { position: static; } }

/* ── Server-rendered forms in #objectCreateModal open as the design's drawer inside the portal ── */
body:has(#hcaShell) #objectCreateModal { background: var(--overlay); padding: 0; overflow: hidden; }
body:has(#hcaShell) #objectCreateModal .oh-modal__dialog {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; margin: 0; border-radius: 0;
  background: var(--panel); color: var(--ink); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  overflow-y: auto; animation: hca-drawer-in .22s ease both; font-family: var(--font-ui);
}
.hcd-dr { display: flex; flex-direction: column; min-height: 100%; font-family: var(--font-ui); color: var(--ink); }
.hcd-dr * { font-family: inherit; }
.hcd-dr__head { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.hcd-dr__ttl { font-size: 20px; font-weight: 600; }
.hcd-dr__sub { font-size: 13px; color: var(--faint); margin-top: 2px; }
.hcd-dr__close { cursor: pointer; color: var(--faint); font-size: 18px; line-height: 1; background: none; border: none; padding: 0; }
.hcd-dr__close:hover { color: var(--ink); }
.hcd-dr__form { display: flex; flex-direction: column; flex: 1; margin: 0; }
.hcd-dr__body { flex: 1; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.hcd-dr__foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--panel); }
.hcd-dr__box { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.hcd-dr__box--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.hcd-dr__table > div { display: flex; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--line2); font-size: 13px; }
.hcd-dr__table > div > span:first-child { color: var(--mute); }
.hcd-dr__table > div > span:last-child { font-family: var(--font-mono); }
.hcd-dr__table > .hcd-dr__due { border-bottom: none; padding: 12px 14px; background: var(--soft2); }
.hcd-dr__table > .hcd-dr__due > span:first-child { font-weight: 600; color: var(--ink); }
.hcd-dr__table > .hcd-dr__due > span:last-child { font-weight: 600; font-size: 16px; }
.hcd-stepper--add input { width: 48px; height: 36px; border: none; text-align: center; background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 15px; font-weight: 600; -moz-appearance: textfield; padding: 0; }
.hcd-stepper--add button { width: 36px; height: 36px; }
.hcd-dr .errorlist { color: var(--bad); font-size: 13px; list-style: none; padding: 0; margin: 0; }
.hcd-stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.hcd-stepper button { width: 38px; height: 38px; border: none; background: transparent; color: var(--mute); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.hcd-stepper button:hover { background: var(--soft); color: var(--ink); }
.hcd-stepper input { width: 52px; height: 38px; border: none; text-align: center; background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 15px; font-weight: 600; -moz-appearance: textfield; padding: 0; outline: none; }
.hcd-stepper input::-webkit-inner-spin-button, .hcd-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hcd-dr__opts { display: flex; flex-direction: column; gap: 10px; }
.hcd-dr__opt { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; background: var(--panel); color: var(--ink); font: inherit; text-align: left; }
.hcd-dr__opt.is-on { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accbg); }
.hcd-dr__optname { display: block; font-size: 14px; font-weight: 600; }
.hcd-dr__optdesc { display: block; font-size: 12px; color: var(--faint); }
.hcd-dr__optprice { font-size: 13px; font-weight: 500; text-align: right; white-space: nowrap; }
.hcd-dr__check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.hcd-dr__check input { width: 18px; height: 18px; accent-color: var(--acc); margin: 0; }
.hcd-dr__err { border: 1px solid var(--err-border); background: var(--badbg); color: var(--bad); border-radius: 10px; padding: 10px 12px; font-size: 13px; }

/* SweetAlert confirmations as the design's drawer (see the wrapper in user-profile.html) */
.swal2-container.hcd-swal { padding: 0; background: var(--overlay); }
.swal2-container.hcd-swal .hcd-swal__panel {
  width: 480px; max-width: 100vw; height: 100vh; margin: 0; padding: 0; border-radius: 0; background: var(--panel); color: var(--ink);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; text-align: left;
  font-family: var(--font-ui); grid-row: 1 / 4;
}
.hcd-swal__ttl { order: 1; padding: 20px 56px 18px 22px; margin: 0; font-size: 20px; font-weight: 600; text-align: left; color: var(--ink); border-bottom: 1px solid var(--line); }
.swal2-container.hcd-swal .hcd-swal__close { order: 0; position: absolute; top: 14px; right: 14px; color: var(--faint); font-size: 26px; box-shadow: none; }
.hcd-swal__body { order: 2; flex: 1; margin: 0; padding: 20px 22px; text-align: left; font-size: 14px; line-height: 1.6; color: var(--mute); overflow-y: auto; }
.hcd-swal__body ul { padding-left: 18px; }
.hcd-swal__input { order: 3; margin: 0 22px 16px; width: auto; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 9px; font: inherit; font-size: 14px; box-shadow: none; }
.hcd-swal__err { order: 4; margin: 0 22px 12px; background: var(--badbg); color: var(--bad); border-radius: 8px; }
.hcd-swal__foot { order: 9; margin: 0; padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; width: 100%; box-sizing: border-box; }
.hcd-swal-in { animation: hca-drawer-in .22s ease both; }
.hcd-swal-out { animation: hcd-drawer-out .18s ease both; }
@keyframes hcd-drawer-out { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .hcd-swal-in, .hcd-swal-out { animation: none; } }

/* Toast, as in the design: dark pill, bottom centre, green dot */
.hca-toast {
  left: 50%; right: auto; bottom: 24px; transform: translateX(-50%); background: #141414; color: #fff; border-radius: 10px;
  padding: 10px 16px; font-size: 13px; box-shadow: var(--shadow-lg); gap: 10px; max-width: calc(100vw - 48px); animation: none;
}
.hca-toast > i { display: none; }
.hca-toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3DD68C; flex: none; }
/* SweetAlert writes display:grid inline on the popup; the drawer needs a column. */
.swal2-container.hcd-swal .swal2-popup.hcd-swal__panel { display: flex !important; }

/* ══ Lovable portal design (2026-10-24) ═══════════════════════════════════════
   The look of the Lovable portal export, applied on top of the hcd-* layer above: mesh page background, floating glass
   sidebar, blurred topbar, dark gradient hero with a grid overlay, stat tiles, hairline-ring cards, brand-gradient primary
   button, mono eyebrow labels, and the flat two-column step layout of "New workspace". Tokens (colours, radii, shadows,
   gradients) are declared once at the top of this file, light and dark. Nothing here renames a class, id or form field
   the page scripts or the backend rely on. Later rules win over the earlier hcd-* ones at equal specificity. */
.hca { background: var(--gradient-mesh), var(--bg); background-attachment: fixed; }
.hca .hcd-side {
  margin: 12px 0 12px 12px; height: calc(100vh - 24px); border: 1px solid var(--border); border-radius: var(--r-hero);
  background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-card); padding: 22px 14px; gap: 26px;
}
.hcd-side__eyebrow { padding: 0 10px; margin-bottom: -10px; }
.hcd-eyebrow, .hcd-stat__label, .hcd-hero__eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.hcd-switch__btn { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-card); border-radius: 12px; }
.hcd-switch__btn:hover { border-color: var(--border-strong); }
.hcd-switch__ini { background: var(--gradient-brand); color: #fff; border-radius: 10px; }
.hcd-switch__ini--sm { background: var(--soft); color: var(--text); }
.hcd-nav { gap: 6px; }
.hcd-navitem { position: relative; height: 42px; padding: 0 12px; gap: 12px; border-radius: 12px; color: var(--muted); font-weight: 500; transition: background .15s, color .15s; }
.hcd-navitem > i { color: var(--muted); }
.hcd-navitem:hover { background: var(--hover); color: var(--text); }
.hcd-navitem.active { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: var(--shadow-card); }
.hcd-navitem.active > i { color: var(--accent); }
.hcd-navitem.active::before {
  content: ""; position: absolute; left: -14px; top: 50%; width: 4px; height: 16px; margin-top: -8px;
  border-radius: 0 4px 4px 0; background: var(--accent);
}
.hcd-navitem--quiet { color: var(--muted); }
.hcd-side__foot { border-top: 1px solid var(--border-soft); padding-top: 14px; }
.hcd-trial { border-radius: 14px; }
.hca-main { background: transparent; }
.hcd-top {
  height: 64px; padding: 0 32px; background: var(--topbar-bg); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.hcd-search { border-radius: 10px; background: var(--surface); border-color: var(--border); height: 34px; padding: 0 10px; }
.hcd-search:hover { border-color: var(--border-strong); }
.hcd-iconbtn, .hca .hcd-bell .oh-navbar__notification-link { border-radius: 10px; border-color: transparent; background: transparent; }
.hcd-iconbtn:hover { background: var(--hover); }
.hcd-openbtn { background: var(--gradient-brand); box-shadow: var(--shadow-brand); border-radius: 10px; }
.hcd-openbtn:hover { background: var(--gradient-brand); filter: brightness(.94); }
.hcd-avatar { background: var(--text); color: var(--surface); border-radius: 10px; }
.hca .hcd-page { max-width: 1200px; padding: 28px 32px 120px; }

/* Cards and panels: hairline ring + soft lift, 16px radius. */
.hcd-card { border-radius: var(--r-card); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card); }
.hcd-card__head { height: 44px; padding: 0 16px; }
.hcd-card__ttl { font-size: 13px; font-weight: 600; }
.hcd-banner { border-radius: var(--r-card); box-shadow: var(--shadow-card), inset 3px 0 0 var(--warn); border-color: var(--border-soft); }
.hcd-banner--info { box-shadow: var(--shadow-card), inset 3px 0 0 var(--info); }
.hcd-tile { background: var(--surface); border-color: var(--border-soft); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 16px; transition: transform .15s, border-color .15s; }
.hcd-tile:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.hcd-tile__ttl { font-size: 14px; }
.hcd-tile__sub { color: var(--muted); }
.hcd-sechead__ttl { font-size: 14px; }

/* Buttons: primary is the brand gradient (white text passes AA on every stop). */
.hcd-btn { border-radius: 10px; }
.hcd-btn--acc, .hcd-btn--brand {
  background: var(--gradient-brand); border-color: transparent; color: var(--text-on-color); box-shadow: var(--shadow-brand);
}
.hcd-btn--acc:hover, .hcd-btn--brand:hover { background: var(--gradient-brand); border-color: transparent; color: var(--text-on-color); filter: brightness(.94); transform: translateY(-1px); }
.hcd-btn--ghost-ink { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--hero-text); }
.hcd-btn--ghost-ink:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: var(--hero-text); }
.hcd-nw__cta { background: var(--gradient-brand); box-shadow: var(--shadow-brand); border-radius: 10px; }
.hcd-nw__cta:hover:not(:disabled) { background: var(--gradient-brand); filter: brightness(.94); }
.hcd-nw__cta:disabled { background: var(--soft); box-shadow: none; }

/* Hero: dark ink panel, coral and violet glows, 28px grid overlay. Sits at the top of every page. */
.hcd-hero {
  position: relative; overflow: hidden; border-radius: var(--r-hero); padding: 36px 32px; color: var(--hero-text);
  background-color: var(--hero-ink); background-image: var(--gradient-hero); box-shadow: var(--shadow-card);
}
.hcd-hero__grid {
  position: absolute; inset: 0; pointer-events: none; background-size: 28px 28px;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(80% 100% at 70% 0, #000, transparent 75%); mask-image: radial-gradient(80% 100% at 70% 0, #000, transparent 75%);
}
.hcd-hero__row { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hcd-hero__h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; color: var(--hero-text); }
.hcd-hero__sub { margin: 6px 0 0; color: var(--hero-muted); font-size: 14px; }
.hcd-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hcd-hero .hcd-hero__eyebrow { color: var(--hero-muted); }

/* Stat tiles: label, big number, progress bar, caption; a gradient hairline appears on hover. */
.hcd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.hcd-stat {
  position: relative; overflow: hidden; margin: 0; padding: 20px; background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-card); box-shadow: var(--shadow-card); transition: transform .15s;
}
.hcd-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gradient-brand); opacity: 0; transition: opacity .15s; }
.hcd-stat:hover { transform: translateY(-2px); }
.hcd-stat:hover::before { opacity: 1; }
.hcd-stat__value { margin: 12px 0 0; font-size: 32px; line-height: 1; font-weight: 600; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.hcd-stat__value small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: .3em; }
.hcd-stat__value.is-bad { color: var(--err); }
.hcd-stat__bar { height: 4px; margin: 12px 0 0; border-radius: 999px; background: var(--soft); overflow: hidden; }
.hcd-stat__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--gradient-brand); }
.hcd-stat__cap { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 1080px) { .hcd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hcd-stats { grid-template-columns: 1fr; } }

/* New workspace: flat two-column steps (eyebrow + title on the left, fields on the right), as in the export. */
.hcd-nw__sec {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 32px; row-gap: 18px; align-items: start;
  background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 28px 0;
}
.hcd-nw__sec:last-child { border-bottom: 0; }
.hcd-nw__sec > * { grid-column: 2; min-width: 0; }
.hcd-nw__sec > .hcd-nw__sechead { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 4px; }
.hcd-nw__num, .hcd-nw__num.is-done { width: auto; height: auto; background: transparent; border-radius: 0; font-size: 0; color: transparent; display: block; }
.hcd-nw__num::before {
  content: "Step 0" attr(data-step); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.hcd-nw__ttl { font-size: 16px; margin-top: 2px; }
.hcd-nw__opt, .hcd-nw__plan { border-radius: 12px; background: var(--surface); }
.hcd-nw__opt.is-on, .hcd-nw__plan.is-on { box-shadow: 0 0 0 3px var(--accent-soft); }
.hcd-nw__input, .hcd-nw__addr { border-radius: 10px; }
.hcd-nw__ini { background: var(--gradient-brand); border-radius: 12px; }
.hcd-nw__side .hcd-card { overflow: hidden; }
@media (max-width: 860px) {
  .hcd-nw__sec { grid-template-columns: 1fr; padding: 22px 0; }
  .hcd-nw__sec > *, .hcd-nw__sec > .hcd-nw__sechead { grid-column: 1; grid-row: auto; }
}

/* Workspace rows and tables. */
.hcd-wsrow:hover, .hcd-wsrow:focus-visible { background: var(--hover); }
.hcd-prod { border-radius: 10px; }
.hcd-pill { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }

/* Narrow screens: the sidebar becomes the existing slide-in drawer, so it loses its floating frame. */
@media (max-width: 760px) {
  .hca .hcd-side { margin: 0; height: 100vh; border-radius: 0; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hcd-top { padding: 0 16px; }
  .hcd-hero { padding: 24px 20px; }
  .hcd-hero__h1 { font-size: 24px; }
  .hcd-navitem.active::before { left: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hcd-stat, .hcd-tile, .hcd-btn--acc, .hcd-btn--brand { transition: none; }
  .hcd-stat:hover, .hcd-tile:hover, .hcd-btn--acc:hover, .hcd-btn--brand:hover { transform: none; }
}

/* Accessibility pass (2026-10-25, review of phase 1): a visible focus ring on every link, button, row and radio (style.min.css gave links a
   1px white dashed outline, invisible on light surfaces); the closed mobile drawer leaves the tab order; controls get a 3:1 border;
   link-style buttons and icon buttons reach a usable touch size; a skip link; hero focus ring in white. */
.hca :is(a, button, summary, [role="button"], [role="radio"], [tabindex="0"]):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.hca .hcd-hero :is(a, button):focus-visible { outline-color: #fff; }
.hcd-nw__input, .hcd-nw__addr, .hcd-field input, .hcd-field select, .hcd-field textarea, .hcd-stepper { border-color: var(--control-border); }
.hcd-link, .hcd-crumbs__link { min-height: 24px; display: inline-flex; align-items: center; }
.hcd-skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--surface); color: var(--text); border: 2px solid var(--accent-text); border-radius: 10px; padding: 10px 14px; font-weight: 600; text-decoration: none; }
.hcd-skip:focus { top: 12px; }
@media (max-width: 760px) {
  .hca:not(.is-navopen) .hcd-side, .hca:not(.is-navopen) .hcd-side * { visibility: hidden; }
  .hcd-iconbtn, .hcd-avatar, .hcd-search, .hcd-btn, .hcd-nw__cta, .hcd-navitem { min-height: 44px; min-width: 44px; }
}
h1.hcd-acchead__name { margin: 0; }          /* the Account page name is now its h1 (one per page for screen readers) */

/* Visual QA pass (2026-10-25, review of phase 1). Verified in the live page at 1920 to 320 px, light and dark. */
.hcd-wsgrid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.hcd-wscard { min-width: 0; }
@media (max-width: 560px) { .hcd-wsgrid { grid-template-columns: minmax(0, 1fr); } }          /* 1fr alone is minmax(auto, 1fr): a long domain made Home 779px wide on a phone */
.hcd-hero__row > :first-child { flex: 1 1 280px; min-width: 0; }
.hcd-hero__h1, .hcd-hero__sub { overflow-wrap: anywhere; }
[data-theme="dark"] .hcd-hero { box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.07); }
.hca.is-collapsed .hcd-side { flex-basis: 248px; width: 248px; }                                  /* the portal sidebar has no collapse control */
.hcd-card__head { height: auto; min-height: 44px; padding: 12px 16px; }
.hcd-nw__sec > .hcd-nw__body { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 860px) { .hcd-nw__sec > .hcd-nw__body { grid-column: 1; } }
@media (max-height: 720px) { .hcd-nw__side { position: static; } }                                  /* the summary's button must stay reachable */
@media (max-width: 1180px) { .hcd-banner__text { flex: 1 1 calc(100% - 56px); min-width: 0; } }   /* the banner's buttons stay together when it wraps */
@media (max-width: 760px) {
  .hca.is-navopen .hcd-side { box-shadow: var(--shadow-lg); }
  .hca.is-navopen .hca-main::after { content: ""; position: fixed; inset: 0; background: var(--overlay); z-index: 6; }
}
.hca .hcd-switch__menu { max-height: min(60vh, 420px); overflow-y: auto; }
@media (max-width: 520px) { .hcd-nw__pre { display: none; } .hcd-nw__addr input { padding-left: 12px; } }
.hcd-kv > span:first-child { white-space: nowrap; flex: none; }
.hcd-kv > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.hcd-acchead > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.hcd-stat__value small { white-space: nowrap; }
/* Pages not redesigned yet sit next to the new shell: keep their primary buttons and header strip in the same language. */
.hcd-account .hcd-btn--ink { background: var(--gradient-brand); border-color: transparent; color: var(--text-on-color); box-shadow: var(--shadow-brand); }
.hcd-account .hcd-btn--ink:hover { background: var(--gradient-brand); filter: brightness(.94); color: var(--text-on-color); }

/* ══ Phase 2 (2026-10-25): the remaining portal pages in the same language ═════════════════════════════════════════════
   Billing, Help & support and Updates get the hero like Home; the workspace detail header and the Account header become hero
   panels (dark ink, glow, grid); the demo / support / redeem drawers get the card radius and shadow. Markup keeps every id, class
   hook, form field and onclick the page scripts use. */
.hcd-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .hcd-stats--3 { grid-template-columns: minmax(0, 1fr); } }
.hcd-stat__value--text { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.hcd-stat dd.hcd-stat__cap, .hcd-stat dd.hcd-stat__value { margin-left: 0; }

/* Workspace detail: header band -> hero panel with the tabs along its bottom edge. */
.hca .hcd-page .hcd-wshead {
  position: relative; overflow: hidden; margin: 0 0 4px; padding: 28px 32px 0; gap: 18px; border: 0; border-radius: var(--r-hero);
  background-color: var(--hero-ink); background-image: var(--gradient-hero); color: var(--hero-text); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hcd-wshead__name { font-size: 28px; letter-spacing: -.03em; color: var(--hero-text); overflow-wrap: anywhere; }
.hcd-wshead__domain { color: var(--hero-muted); min-height: 24px; }
.hcd-wshead__domain:hover { color: #fff; }
.hcd-wshead .hcd-prod { background: rgba(255,255,255,.1); color: var(--hero-text); border: 1px solid rgba(255,255,255,.16); }
.hcd-wshead .hcd-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--hero-text); }
.hcd-wshead .hcd-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: var(--hero-text); }
.hcd-wshead .hcd-btn--ink { background: var(--gradient-brand); border-color: transparent; color: var(--text-on-color); box-shadow: var(--shadow-brand); }
.hcd-wshead .hcd-btn--ink:hover { background: var(--gradient-brand); filter: brightness(.94); color: var(--text-on-color); }
.hcd-wshead .hcd-tabs { margin: 4px -32px 0; padding: 0 24px; border-top: 1px solid rgba(255,255,255,.1); }
.hcd-wshead .hcd-tab { color: var(--hero-muted); }
.hcd-wshead .hcd-tab:hover { color: #fff; }
.hcd-wshead .hcd-tab.is-active { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.hca .hcd-page .hcd-wshead :is(a, button):focus-visible { outline-color: #fff; }
@media (max-width: 760px) { .hca .hcd-page .hcd-wshead { margin: 0 0 4px; padding: 22px 18px 0; } .hcd-wshead .hcd-tabs { margin: 4px -18px 0; padding: 0 10px; } .hcd-wshead__name { font-size: 22px; } }

/* Account header -> hero panel. */
.hcd-acchead {
  position: relative; overflow: hidden; padding: 28px 32px; border-radius: var(--r-hero);
  background-color: var(--hero-ink); background-image: var(--gradient-hero); color: var(--hero-text); box-shadow: var(--shadow-card);
}
h1.hcd-acchead__name { font-size: 28px; letter-spacing: -.03em; color: var(--hero-text); }
.hcd-acchead .hcd-mute { color: var(--hero-muted); }
.hcd-acchead__avatar { background: var(--gradient-brand); color: #fff; border: 2px solid rgba(255,255,255,.28); box-shadow: var(--shadow-brand); }
.hca .hcd-acchead :is(a, button):focus-visible { outline-color: #fff; }
@media (max-width: 760px) { .hcd-acchead { padding: 22px 18px; } h1.hcd-acchead__name { font-size: 22px; } }

/* Drawers (book a demo, support request, redeem a code): card radius and shadow, a quiet header. */
.hca-drawer__panel { border-left: 0; border-radius: var(--r-hero) 0 0 var(--r-hero); box-shadow: var(--shadow-lg); }
@media (max-width: 520px) { .hca-drawer__panel { border-radius: 0; } }
.hca-drawer .hc-modal__head { background: var(--surface-2); border-radius: var(--r-hero) 0 0 0; }
.hca-drawer__ttl { letter-spacing: -.02em; }
.hca-drawer .hc-modal__foot { background: var(--surface-2); }
.hcd-wscard { border-radius: var(--r-card); }
.hca-drawer { z-index: 10002; }          /* above the chat bubble (10000) and the chat modal (10001), which covered the drawers' footer buttons */

/* Accessibility pass 2 (2026-10-25, review of phase 2). */
.hca .hcd-wshead a.hcd-btn--ink, .hca .hcd-wshead a.hcd-btn--ink:hover { color: var(--text-on-color); }        /* .hca a.hcd-btn--ink gave it near-black text on the red gradient in dark */
.hcd-wshead__domain .hcd-faint { color: var(--hero-muted); }
.hca-dfield input, .hca-dfield select, .hca-dfield textarea, .hca-daygrid button, .hca-timegrid button, .hca-drop { border-color: var(--control-border); }
.hca-segfull input:focus-visible + span, .hca-drop:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; box-shadow: none; }
.hca-drawer :is(a, button, [role="radio"], summary):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.hcd-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
h1.hcd-wshead__name, h2.hcd-card__ttl, h2.hcd-sechead__ttl { margin: 0; line-height: inherit; font-family: inherit; }
h1[tabindex="-1"]:focus { outline: none; }
.hcd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) { .hcd-tab, .hcd-seg > * { min-height: 44px; } }

/* Visual QA pass 2 (2026-10-25, review of phase 2). */
.hcd-invscroll { overflow-x: auto; overscroll-behavior-x: contain; }
.hcd-invtable { min-width: 800px; }                                /* the .hcd-inv grid needs about 800px; rows, header and borders now scroll as one */
.hcd-inv:not(.hcd-inv--head) { min-height: 57px; }
@media (max-width: 760px) {
  .hcd-invtable .hcd-inv > span:first-child { position: sticky; left: 0; z-index: 1; margin: 0 -12px 0 -20px; padding: 0 12px 0 20px; background: var(--surface); align-self: stretch; display: flex; align-items: center; }
  .hcd-invtable .hcd-inv--head > span:first-child { background: var(--surface-2); }
}
.hcd-wshead__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
@media (max-width: 900px) { .hcd-wshead__actions { flex: 1 0 100%; margin-left: 0; } }
.hcd-wshead__domain { text-align: left; }
.hcd-stat__value--text { line-height: 30px; }                      /* captions line up with the numeric tiles */
.hcd-tab.is-active { font-weight: 400; -webkit-text-stroke: .45px currentColor; }      /* bold shifted the other tabs by 4px on every switch */
@media (max-width: 560px) {
  #demos-support .hcd-card__head { flex-wrap: wrap; }
  #demos-support .hcd-card__head .hcd-btn { white-space: nowrap; }
  #demos-support .hcd-row { flex-wrap: wrap; row-gap: 6px; }
  #demos-support .hcd-row > div:first-child { flex: 1 1 100% !important; }      /* !important beats the inline flex on the title block */
  #demos-support .hcd-row > :is(a, button).hcd-link { margin-right: 12px; }
  .hcd-hist { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .hcd-hist > :nth-child(3) { grid-column: 1 / -1; }
  .hcd-sechead { flex-wrap: wrap; gap: 4px 12px; }
}
#createDemoModal .hca-dfield-row { grid-template-columns: minmax(0, 1fr); }      /* the email was cut off in two 210px columns */

/* E2E pass (2026-10-25): the plan / seats drawers are loaded by htmx into the old #objectCreateModal, which sat under the chat bubble (z 10000) and hid the
   Confirm / Add seats button; and the "Keep my trial / Start now" choice was two bare radios. */
#objectCreateModal.oh-modal { z-index: 10002; }
.hcd-dr__choices { display: grid; gap: 10px; }
.hcd-dr__choice { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); font-size: 13px; line-height: 1.5; color: var(--ink); }
.hcd-dr__choice input { margin-top: 3px; accent-color: var(--acc); flex: none; }
.hcd-dr__choice:has(input:checked) { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accbg); }
.hcd-dr__choice b { font-weight: 600; }

/* Domain drawers (2026-10-26): add / manage / remove the customer's own domain inside the portal. */
.hcd-dns { padding: 4px 16px; }
.hcd-dns__row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.hcd-dns__row:last-child { border-bottom: 0; }
.hcd-dns__k { color: var(--muted); }
.hcd-wrapany { overflow-wrap: anywhere; word-break: break-all; }
.hcd-steps { margin: 0; padding-left: 20px; list-style: decimal; font-size: 13px; line-height: 1.6; color: var(--muted); display: grid; gap: 4px; }
.hca-btn--danger { background: var(--btn-danger); border-color: var(--btn-danger); color: var(--text-on-color); }
.hca-btn--danger:hover { filter: brightness(.94); }
@media (max-width: 480px) { .hcd-dns__row { grid-template-columns: minmax(0, 1fr) auto; } .hcd-dns__k { grid-column: 1 / -1; } }

.hcd-dns__rec { padding: 6px 0; border-bottom: 1px solid var(--line-strong, var(--line)); }
.hcd-dns__rec:last-child { border-bottom: 0; }
.hcd-dns { padding: 0 16px; }

/* ── Portal pages (phase 3, 2026-10-26): the frame for pages outside the portal tabs (templates/portal_page.html) ─────────────────── */
.hcpg { margin: 0; min-height: 100vh; background-color: var(--bg); background-image: var(--gradient-mesh); background-attachment: fixed; color: var(--text); font-family: var(--font-ui); font-size: 14px; }
.hcpg * { font-family: inherit; }
.hcpg-skip { position: absolute; left: -999px; top: 8px; z-index: 100000; background: var(--ink); color: var(--panel); padding: 8px 14px; border-radius: 8px; }
.hcpg-skip:focus { left: 12px; }
.hcpg-top { position: sticky; top: 0; z-index: 30; background: var(--topbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.hcpg-top__in { max-width: 1120px; margin: 0 auto; height: 60px; padding: 0 20px; display: flex; align-items: center; gap: 12px; }
.hcpg-brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.hcpg-brand .hc-logo { height: 24px; width: auto; display: block; color: var(--ink); }
.hcpg-brand .hc-logo__accent { fill: var(--accent); }
.hcpg-sep { width: 1px; height: 20px; background: var(--border); }
.hcpg-crumb { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcpg-spacer { flex: 1; }
.hcpg-bell { position: relative; }
.hcpg-badge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #C8341F; color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; }
.hcpg-menu { position: relative; }
.hcpg-menu > summary { list-style: none; cursor: pointer; }
.hcpg-menu > summary::-webkit-details-marker { display: none; }
.hcpg-menu__panel { position: absolute; right: 0; top: 44px; min-width: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; z-index: 40; }
.hcpg-menu__panel a, .hcpg-menu__panel button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px; color: var(--ink); font-size: 14px; text-decoration: none; cursor: pointer; }
.hcpg-menu__panel a:hover, .hcpg-menu__panel button:hover { background: var(--hover); }
.hcpg-menu__who { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 13px; }
.hcpg-menu__who span { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.hcpg-main { outline: none; background: transparent !important; box-shadow: none; padding: 0; margin: 0; }   /* the legacy sheet paints <main> white */
.hcpg-wrap { max-width: 1120px; margin: 0 auto; padding: 24px 20px 72px; display: flex; flex-direction: column; gap: 18px; }
.hcpg-narrow { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }
.hcpg-center { text-align: center; align-items: center; }
.hcpg-bigicon { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: var(--accent-soft); color: var(--accent-text); margin: 0 auto 6px; }
.hcpg-bigicon--bad { background: var(--err-bg); color: var(--err); }
.hcpg-statuscode { font-family: var(--font-mono); font-size: 13px; color: var(--faint); letter-spacing: .08em; }
.hcpg-h2 { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.hcpg-lead { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.hcpg-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.hcpg-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--accent); flex: none; }
.hcpg-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 4px; font-size: 13px; color: var(--muted); }
.hcpg-pager__nav { display: flex; gap: 6px; flex-wrap: wrap; }
.hcpg-pager__nav a, .hcpg-pager__nav span { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; font-size: 13px; }
.hcpg-pager__nav a:hover { border-color: var(--faint); }
.hcpg-pager__nav .is-current { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.hcpg-pager__nav .is-gap { border: 0; background: none; }
@media (max-width: 720px) { .hcpg-top__in { padding: 0 12px; gap: 8px; } .hcpg-sep, .hcpg-crumb { display: none; } .hcpg-wrap { padding: 16px 14px 56px; } .hcpg-top .hcd-btn--ink i { margin: 0; } }
.hcpg-note { text-decoration: none; color: var(--ink); }
.hcpg-note:hover { background: var(--hover); }
.hcpg-note.is-unread { background: var(--accent-soft); }
.hcpg-note.is-unread:hover { background: var(--accent-soft); filter: brightness(.97); }
.hcpg-prose { font-size: 14px; line-height: 1.65; color: var(--text-2); overflow-wrap: anywhere; }
.hcpg-prose p { margin: 0 0 10px; }
.hcpg-reply { border-left: 3px solid var(--accent); padding-left: 14px; }

html:has(body.hcpg) { background-color: var(--bg); background-image: var(--gradient-mesh); background-attachment: fixed; min-height: 100%; }
body.hcpg { background: transparent !important; }
@media (max-width: 720px) { .hcpg-lbl { display: none; } .hcpg-top .hcd-btn--ink { padding: 7px 10px; } .hcpg-brand .hc-logo { height: 20px; } }

/* review fixes (2026-10-27): a long value (an e-mail) is cut with an ellipsis instead of breaking inside a word */
.hcd-kv > .hcd-clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }