/* Huezon BETA 0.5 Design System Repair
   Final interface layer: tighter hierarchy, stronger text flow, safer rows, better button placement,
   and page rhythm that avoids both cramped cards and dead empty space. */
:root {
  --hz-page: min(1184px, calc(100vw - clamp(28px, 5vw, 72px)));
  --hz-narrow: min(860px, calc(100vw - clamp(28px, 5vw, 72px)));
  --hz-gap-1: 8px;
  --hz-gap-2: 12px;
  --hz-gap-3: 16px;
  --hz-gap-4: 22px;
  --hz-gap-5: 30px;
  --hz-gap-6: 42px;
  --hz-radius-xl: 30px;
  --hz-radius-lg: 24px;
  --hz-radius-md: 18px;
  --hz-surface: rgba(18,20,25,.76);
  --hz-surface-2: rgba(255,255,255,.045);
  --hz-stroke: rgba(255,255,255,.105);
  --hz-stroke-strong: rgba(255,255,255,.18);
  --hz-text: #f5f2eb;
  --hz-muted: rgba(245,242,235,.68);
  --hz-soft: rgba(245,242,235,.46);
  --hz-shadow: 0 20px 60px rgba(0,0,0,.32);
  --hz-focus: 0 0 0 3px rgba(99,102,241,.28), 0 0 0 1px rgba(255,255,255,.18);
}

html { text-size-adjust: 100%; }
body {
  background:
    radial-gradient(circle at 15% -12%, rgba(99,102,241,.13), transparent 28rem),
    radial-gradient(circle at 92% 4%, rgba(249,115,22,.10), transparent 30rem),
    linear-gradient(180deg, #090a0d 0%, #07080a 56%, #08090b 100%) !important;
  color: var(--hz-text);
  font-size: 15px;
  line-height: 1.55;
}
body::before {
  opacity: .86;
  background:
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 20% 10%, rgba(56,189,248,.08), transparent 28rem) !important;
  background-size: 92px 92px, 92px 92px, auto !important;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}

img, svg, canvas, video { max-width: 100%; height: auto; }
a, button, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button, .button, .ghost-button, summary, input, textarea, select { outline: none; }
button:focus-visible, .button:focus-visible, .ghost-button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { box-shadow: var(--hz-focus); }

.topbar,
.beta-topbar,
.beta02-topbar {
  width: var(--hz-page) !important;
  min-height: 66px !important;
  margin: clamp(14px, 2vw, 22px) auto 0 !important;
  padding: 10px 12px 10px 14px !important;
  gap: 12px !important;
  border-radius: 22px !important;
  background: rgba(10,12,16,.84) !important;
  border-color: rgba(255,255,255,.11) !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.28) !important;
}
.brand { min-width: 0 !important; }
.brand-copy b { font-size: 15px !important; letter-spacing: -.025em !important; }
.brand-copy small { font-size: 10px !important; letter-spacing: .04em !important; text-transform: uppercase; }
.brand-mark {
  flex: 0 0 auto;
  background-image: url('/assets/huezon-logo.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #0b0d12 !important;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
}
.brand-mark.small { width: 32px !important; height: 32px !important; border-radius: 12px !important; }
.primary-nav, .beta-primary-nav { gap: 4px !important; }
.primary-nav > a, .beta-primary-nav > a, .ghost-button, .nav-more > summary, .mobile-menu > summary {
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  color: rgba(245,242,235,.70) !important;
}
.primary-nav > a:hover, .beta-primary-nav > a:hover, .nav-more > summary:hover, .mobile-menu > summary:hover, .ghost-button:hover,
.primary-nav > a.is-active, .beta-primary-nav > a.is-active { color: var(--hz-text) !important; background: rgba(255,255,255,.065) !important; }
.nav-actions { gap: 8px !important; }
.user-pill { min-height: 40px !important; padding: 6px 10px 6px 6px !important; gap: 8px !important; border-radius: 999px !important; }
.user-pill span { width: 28px !important; height: 28px !important; font-size: 11px !important; }

.nav-menu,
.v5-nav-menu,
.beta-nav-menu {
  width: min(760px, calc(100vw - 32px)) !important;
  right: 0 !important;
  top: calc(100% + 12px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
  border-radius: 24px !important;
  background: rgba(14,16,22,.96) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.48) !important;
  backdrop-filter: blur(22px);
}
.nav-group { min-width: 0; display: grid; gap: 6px; }
.nav-group > span, .mobile-menu-panel span, .page-side-nav span { color: var(--hz-soft); letter-spacing: .13em; text-transform: uppercase; font-size: 10px; font-weight: 900; }
.nav-group a {
  display: grid !important;
  gap: 3px !important;
  align-content: start;
  padding: 11px 12px !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
}
.nav-group a:hover { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; }
.nav-group a b { font-size: 13px; letter-spacing: -.01em; }
.nav-group a small { color: var(--hz-soft); line-height: 1.35; }
.mobile-menu-panel { max-height: min(78vh, 720px); overflow-y: auto; }

main,
.page-shell,
.beta-shell,
.color-detail-shell,
.admin-shell {
  width: var(--hz-page) !important;
  margin: 0 auto !important;
}
.page-shell,
.beta-shell,
.color-detail-shell,
.admin-shell {
  padding: clamp(26px, 3.3vw, 46px) 0 clamp(58px, 7vw, 92px) !important;
  display: grid !important;
  gap: clamp(24px, 3.2vw, 42px) !important;
}
.page-shell > section,
.beta-shell > section,
.color-detail-shell > section,
.admin-shell > section { margin: 0 !important; min-width: 0; }

.page-hero,
.beta-hero,
.home-hero-panel,
.color-detail-hero,
.error-hero {
  min-height: auto !important;
  border: 1px solid var(--hz-stroke);
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.027) 48%, rgba(99,102,241,.055)),
    rgba(15,17,22,.76) !important;
  border-radius: clamp(26px, 3.6vw, 40px) !important;
  box-shadow: var(--hz-shadow) !important;
  backdrop-filter: blur(18px);
}
.page-hero.slim,
.beta-hero.slim,
.error-hero { padding: clamp(28px, 4vw, 54px) !important; }
.page-hero:not(.slim), .beta-hero:not(.slim) { padding: clamp(32px, 5vw, 66px) !important; }
.home-hero-panel {
  padding: clamp(28px, 4.4vw, 58px) !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, .78fr) !important;
  gap: clamp(28px, 4vw, 58px) !important;
  align-items: center !important;
  overflow: hidden;
}
.home-hero-copy, .home-hero-copy > * { min-width: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: normal; }
h1 {
  max-width: 780px !important;
  font-size: clamp(44px, 6vw, 78px) !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
}
h2 { font-size: clamp(28px, 3.4vw, 48px) !important; line-height: 1.02 !important; letter-spacing: -.052em !important; }
h3 { font-size: clamp(20px, 2.2vw, 28px) !important; line-height: 1.08 !important; letter-spacing: -.045em !important; }
.page-hero.slim h1, .beta-hero.slim h1 { max-width: 840px !important; font-size: clamp(38px, 5.2vw, 66px) !important; }
.panel h2, .premium-card h2, .premium-panel h2, .section-head.inner h2, .card-title-row h3 {
  font-size: clamp(24px, 2.3vw, 34px) !important;
  line-height: 1.08 !important;
  max-width: 760px;
}
.panel h3, .premium-card h3, .premium-panel h3 { font-size: clamp(20px, 2vw, 26px) !important; }
.hero-copy, .page-hero p:not(.eyebrow), .beta-hero p:not(.eyebrow) {
  max-width: 720px !important;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.62 !important;
  color: var(--hz-muted) !important;
}
.eyebrow { color: rgba(210,218,255,.86) !important; letter-spacing: .14em !important; font-size: 10.5px !important; }
p, li, small, .quiet-copy, .section-note, .hero-copy, .tool-card span, .collection-card p, .mini-row small {
  overflow-wrap: break-word;
  line-height: 1.56;
}

.button,
button.button,
a.button {
  min-height: 42px !important;
  width: auto !important;
  max-width: 100%;
  padding: 10px 15px !important;
  border-radius: 14px !important;
  font-size: 13.5px !important;
  letter-spacing: -.01em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.button.primary { box-shadow: 0 10px 30px rgba(245,242,235,.10); }
.button.ghost { background: rgba(255,255,255,.025) !important; }
.hero-actions, .tool-actions, .toolbar-actions, .button-row, .workspace-actions, .staff-dash-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.hero-actions { margin-top: clamp(20px, 2.5vw, 30px) !important; }
.tool-actions, .toolbar-actions, .button-row { justify-content: flex-start; }

.panel, .premium-card, .premium-panel, .tool-card, .collection-card, .card, .data-card, .update-card, .home-focus-card,
.palette-builder, .studio-panel, .premium-tool, .account-profile-card, .staff-login-card, .staff-security-card {
  min-width: 0 !important;
  border-color: var(--hz-stroke) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.030)) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.24) !important;
}
.panel, .premium-card, .premium-panel, .premium-tool, .palette-builder, .studio-panel {
  padding: clamp(22px, 2.6vw, 34px) !important;
  border-radius: var(--hz-radius-xl) !important;
}
.card, .collection-card, .tool-card, .data-card, .update-card, .home-focus-card {
  border-radius: var(--hz-radius-lg) !important;
  padding: clamp(18px, 2vw, 26px) !important;
}
.panel.single { display: grid; gap: 18px; }

.section-head,
.studio-head,
.section-head.inner,
.card-title-row,
.staff-workspace-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: clamp(16px, 2.4vw, 26px) !important;
  margin: 0 0 clamp(18px, 2.2vw, 28px) !important;
}
.section-head > div, .section-head.inner > div, .studio-head > div, .card-title-row > div { min-width: 0; }
.section-head p:not(.eyebrow), .studio-head p:not(.eyebrow), .section-note, .quiet-copy { max-width: 680px !important; color: var(--hz-muted) !important; }

.home-focus-grid, .tool-grid, .beta-tool-grid, .collection-grid, .stats-grid, .data-overview-grid, .staff-stats-grid,
.account-workspace-grid, .quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)) !important;
  gap: clamp(14px, 1.8vw, 20px) !important;
  margin: 0 !important;
}
.trending-row, .beta04-trending, .wide-trending, .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: clamp(14px, 1.8vw, 20px) !important;
  margin: 0 !important;
}
.two-panel, .data-panels, .detail-dashboard, .contrast-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.2vw, 26px) !important;
  margin: 0 !important;
}
.content-layout, .staff-dashboard, .staff-desk, .account-dashboard {
  display: grid !important;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
  gap: clamp(20px, 2.6vw, 32px) !important;
  align-items: start !important;
}
.content-stack, .staff-workspace { min-width: 0; display: grid; gap: clamp(20px, 2.4vw, 30px); }
.page-side-nav, .staff-side-nav {
  position: sticky !important;
  top: 18px !important;
  border-radius: 24px !important;
  padding: 14px !important;
  background: rgba(16,18,23,.74) !important;
  border: 1px solid var(--hz-stroke) !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.24) !important;
}
.page-side-nav a, .staff-side-link {
  min-height: 42px;
  display: grid !important;
  align-content: center;
  gap: 2px;
  padding: 11px 12px !important;
  border-radius: 15px !important;
  color: rgba(245,242,235,.72) !important;
}
.page-side-nav a:hover, .page-side-nav a.is-active, .staff-side-link:hover, .staff-side-link.active {
  color: var(--hz-text) !important;
  background: rgba(255,255,255,.07) !important;
}

.toolbar, .library-toolbar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(150px, 190px)) auto !important;
  align-items: end !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 26px !important;
  margin: 0 !important;
}
.toolbar label, .tool-fields label, .form-grid label { min-width: 0; display: grid; gap: 7px; }
.toolbar input, .toolbar select, .tool-fields input, .tool-fields select, input, textarea, select {
  min-height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: rgba(6,7,10,.62) !important;
  color: var(--hz-text) !important;
  padding: 10px 12px !important;
}
.tool-fields, .form-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
  gap: 14px !important;
}
textarea { min-height: 112px; resize: vertical; }

.mini-list, .recent-list, .similar-strip, .badge-picker, .staff-grid, .backup-list, #staffOutput, #qualityGrid {
  display: grid !important;
  gap: 12px !important;
  min-width: 0;
}
.mini-row,
.mini-color,
.backup-row,
.staff-mini-card,
.compare-chip {
  min-width: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.095) !important;
  background: rgba(255,255,255,.038) !important;
}
.mini-row {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  grid-template-areas: "swatch title" "swatch meta" !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 4px !important;
  padding: 14px !important;
}
.mini-row span { grid-area: swatch; width: 42px !important; height: 42px !important; border-radius: 14px !important; }
.mini-row b { grid-area: title; display: block !important; min-width: 0; max-width: 100%; font-size: 14px !important; letter-spacing: -.015em; overflow-wrap: break-word; }
.mini-row small { grid-area: meta; display: block !important; min-width: 0; max-width: 100%; color: var(--hz-muted) !important; overflow-wrap: break-word; }
.mini-row.text-row, .mini-row.collection-row, .mini-row.palette-row {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "title" "meta" !important;
  align-items: start !important;
  padding: 16px 18px !important;
}
.mini-row.text-row b, .mini-row.collection-row b, .mini-row.palette-row b { font-size: 15px !important; line-height: 1.25 !important; }
.mini-row.text-row small, .mini-row.collection-row small, .mini-row.palette-row small { margin-top: 3px; line-height: 1.48 !important; }
.mini-color {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px !important;
}
.mini-color span { width: 42px !important; height: 42px !important; border-radius: 14px !important; }
.mini-color b, .mini-color small { min-width: 0; overflow-wrap: break-word; }

.card {
  overflow: hidden;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
}
.grid[data-view="rows"] .card {
  grid-template-columns: 160px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: stretch;
}
.card .swatch { min-height: 130px !important; border-radius: 20px !important; }
.card h3, .collection-card h3, .tool-card b { overflow-wrap: break-word; hyphens: auto; }
.card-actions, .card .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.home-workspace-preview { min-width: 0; }
.preview-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.preview-card-grid article { min-width: 0; }
.home-status-band { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(110px,.5fr)) auto !important; align-items: center !important; }
.home-daily-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .8fr); gap: clamp(18px, 2.3vw, 26px); }
.home-daily-card, .home-command-card { min-width: 0; }

.data-overview-grid .data-card { min-height: 136px !important; display: grid; align-content: start; gap: 8px; }
.data-card b { font-size: clamp(28px, 3vw, 42px) !important; line-height: 1 !important; }
.data-card p { max-width: 30rem; margin: 0 !important; color: var(--hz-muted); }
.quality-grid > article { min-width: 0; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.quality-grid > article b { display: block; font-size: 18px; margin: 3px 0; }

.token-preview, pre, code {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.command-dialog {
  width: min(720px, calc(100vw - 28px)) !important;
  border-radius: 28px !important;
  padding: 14px !important;
}
.command-search input { width: 100%; }
.command-results { max-height: min(56vh, 430px); overflow-y: auto; }

.site-footer, .beta-footer, .beta02-footer {
  width: var(--hz-page) !important;
  margin: 0 auto clamp(18px, 3vw, 34px) !important;
  border-radius: 26px !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
  background: rgba(14,16,21,.76) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.footer-inner { gap: 20px !important; align-items: center !important; }
.footer-brand { min-width: 0; }
.footer-brand small { display: block; max-width: 480px; color: var(--hz-muted); line-height: 1.45; }
.footer-links { display: flex !important; flex-wrap: wrap; gap: 6px !important; justify-content: flex-end; }
.footer-links a { padding: 8px 10px; border-radius: 999px; color: var(--hz-muted); }
.footer-links a:hover { color: var(--hz-text); background: rgba(255,255,255,.06); }
.footer-bottom { margin-top: 18px !important; padding-top: 16px !important; display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; color: var(--hz-soft); }

@media (max-width: 1060px) {
  .home-hero-panel, .hero, .home-daily-grid, .two-panel, .data-panels, .detail-dashboard, .contrast-grid,
  .content-layout, .staff-dashboard, .staff-desk, .account-dashboard {
    grid-template-columns: 1fr !important;
  }
  .page-side-nav, .staff-side-nav { position: relative !important; top: auto !important; }
  .toolbar, .library-toolbar { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .home-status-band { grid-template-columns: 1fr 1fr !important; }
  .home-status-band > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  :root { --hz-page: min(100% - 28px, 1184px); }
  .primary-nav { display: none !important; }
  .topbar { align-items: center !important; }
  .brand-copy small { display: none; }
  .user-nav-status { display: none !important; }
  .mobile-menu-panel { width: min(360px, calc(100vw - 28px)) !important; right: 0 !important; }
  h1 { font-size: clamp(38px, 13vw, 56px) !important; }
  .page-hero.slim, .beta-hero.slim, .home-hero-panel { padding: 24px !important; border-radius: 26px !important; }
  .section-head, .studio-head, .section-head.inner, .card-title-row, .staff-workspace-head { grid-template-columns: 1fr !important; align-items: start !important; }
  .toolbar, .library-toolbar, .tool-fields, .form-grid, .home-status-band { grid-template-columns: 1fr !important; }
  .button, button.button, a.button { width: 100% !important; white-space: normal; }
  .footer-inner { display: grid !important; }
  .footer-links { justify-content: flex-start; }
  .grid[data-view="rows"] .card { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  :root { --hz-page: min(100% - 20px, 1184px); }
  .topbar { border-radius: 18px !important; padding: 9px !important; }
  .brand-mark { width: 32px !important; height: 32px !important; }
  .page-shell, .beta-shell, .color-detail-shell, .admin-shell { gap: 20px !important; padding-top: 22px !important; }
  .panel, .premium-card, .premium-panel, .premium-tool, .palette-builder, .studio-panel { padding: 18px !important; border-radius: 22px !important; }
  .card, .collection-card, .tool-card, .data-card, .update-card, .home-focus-card { padding: 16px !important; }
  .mini-row, .mini-color { grid-template-columns: 38px minmax(0, 1fr) !important; gap: 10px !important; }
  .mini-row span, .mini-color span { width: 36px !important; height: 36px !important; border-radius: 12px !important; }
}
.mini-row.color-row { grid-template-columns: 46px minmax(0, 1fr) !important; }

/* Huezon BETA 0.5.1 Text Flow Repair
   Stops page hero copy from being split into tiny grid columns, keeps text lines readable,
   and adds final guards for headings, buttons and card copy across every page. */
.page-hero.slim,
.page-hero.beta-hero.slim,
.beta-hero.slim,
.error-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.page-hero.slim > *,
.page-hero.beta-hero.slim > *,
.beta-hero.slim > *,
.error-hero > * {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.page-hero.slim .eyebrow,
.page-hero.beta-hero.slim .eyebrow,
.beta-hero.slim .eyebrow {
  display: block !important;
  width: auto !important;
  margin: 0 0 14px !important;
  white-space: normal !important;
}
.page-hero.slim h1,
.page-hero.beta-hero.slim h1,
.beta-hero.slim h1,
.error-hero h1 {
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  margin: 0 !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.page-hero.slim .hero-copy,
.page-hero.beta-hero.slim .hero-copy,
.beta-hero.slim .hero-copy,
.error-hero .hero-copy,
.page-hero.slim p:not(.eyebrow) {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  margin: 16px 0 0 !important;
  text-wrap: pretty !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.page-hero.slim .hero-actions,
.page-hero.beta-hero.slim .hero-actions,
.beta-hero.slim .hero-actions,
.error-hero .hero-actions {
  width: 100% !important;
  max-width: 760px !important;
  margin-top: 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}
.content-layout > .content-stack,
.content-layout > .page-side-nav,
.content-stack > *,
.tool-stack > *,
.docs-content > *,
.account-dashboard > *,
.staff-workspace > * {
  min-width: 0 !important;
}
.content-layout .page-hero.slim,
.content-layout .beta-hero.slim,
.tool-stack .page-hero.slim,
.docs-content .page-hero.slim,
.account-dashboard .page-hero.slim {
  width: 100% !important;
}
.section-head,
.studio-head,
.tools-head,
.compact-head,
.section-head.inner,
.card-title-row,
.staff-workspace-head {
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}
.section-head > *,
.studio-head > *,
.tools-head > *,
.compact-head > *,
.card-title-row > *,
.staff-workspace-head > * {
  min-width: 0 !important;
}
.section-head p:not(.eyebrow),
.studio-head p:not(.eyebrow),
.tools-head p:not(.eyebrow),
.compact-head p:not(.eyebrow) {
  max-width: 68ch !important;
  text-wrap: pretty !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.tool-card,
.collection-card,
.update-card,
.panel,
.premium-panel,
.data-card,
.card,
.auth-panel,
.legal-copy {
  min-width: 0 !important;
}
.tool-card b,
.collection-card h3,
.collection-card b,
.update-card h2,
.update-card h3,
.panel h2,
.panel h3,
.premium-panel h2,
.premium-panel h3,
.data-card b,
.card h3 {
  display: block !important;
  max-width: 100% !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.tool-card span,
.collection-card p,
.update-card p,
.panel p,
.premium-panel p,
.data-card p,
.auth-panel p,
.legal-copy p,
.card p,
.card small {
  max-width: 68ch !important;
  text-wrap: pretty !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.mini-row.text-row,
.mini-row.collection-row,
.mini-row.palette-row,
.mini-row:not(:has(> span)) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "title" "meta" !important;
}
.button-row,
.hero-actions,
.card-actions,
.workspace-actions,
.form-actions {
  min-width: 0 !important;
}
.button-row .button,
.hero-actions .button,
.card-actions .button,
.workspace-actions .button,
.form-actions .button {
  flex: 0 1 auto !important;
}
@media (max-width: 1060px) {
  .content-layout,
  .staff-dashboard,
  .staff-desk,
  .account-dashboard {
    grid-template-columns: 1fr !important;
  }
  .page-side-nav,
  .staff-side-nav {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
  }
}
@media (max-width: 760px) {
  .section-head,
  .studio-head,
  .tools-head,
  .compact-head,
  .section-head.inner,
  .card-title-row,
  .staff-workspace-head {
    grid-template-columns: 1fr !important;
  }
  .page-hero.slim h1,
  .page-hero.beta-hero.slim h1,
  .beta-hero.slim h1 {
    width: 100% !important;
  }
  .page-hero.slim .hero-copy,
  .page-hero.beta-hero.slim .hero-copy,
  .beta-hero.slim .hero-copy,
  .page-hero.slim p:not(.eyebrow) {
    width: 100% !important;
  }
  .page-hero.slim .hero-actions,
  .page-hero.beta-hero.slim .hero-actions,
  .beta-hero.slim .hero-actions {
    max-width: 100% !important;
  }
  .button-row .button,
  .hero-actions .button,
  .card-actions .button,
  .workspace-actions .button,
  .form-actions .button {
    flex: 1 1 100% !important;
  }
}

/* BETA 0.6.0 Community, Cards and React-Ready Polish
   Production-facing legal pages, readable release notes, and fixed recent-page rows. */
.beta053-local-trail,
.beta053-legal-page .legal-copy,
.beta053-updates-page .updates-timeline {
  position: relative;
}

.beta053-local-trail .section-head.inner,
.legal-hero,
.updates-hero {
  display: grid !important;
  gap: 14px !important;
}
.beta053-local-trail .section-head.inner {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  margin-bottom: 22px !important;
}
.beta053-local-trail .section-head.inner p {
  max-width: 70ch;
  margin: 8px 0 0;
  color: var(--hz-muted, rgba(244,240,232,.68));
}
.polished-recent-list,
.recent-pages-list {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.recent-page-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 16px 18px !important;
  min-height: 68px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
    rgba(255,255,255,.025) !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}
.recent-page-card:hover {
  transform: translateY(-1px);
  border-color: rgba(138,180,255,.28) !important;
  background: linear-gradient(135deg, rgba(138,180,255,.10), rgba(255,255,255,.035)) !important;
}
.recent-page-main {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.recent-page-main b {
  display: block !important;
  min-width: 0 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  letter-spacing: -.015em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.recent-page-main small {
  color: var(--hz-muted, rgba(244,240,232,.60)) !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}
.recent-page-card time {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 112px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(244,240,232,.78) !important;
  background: rgba(0,0,0,.18) !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.legal-meta span,
.release-head small,
.release-head span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: rgba(244,240,232,.76);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.legal-layout,
.updates-layout {
  display: grid !important;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) !important;
  gap: clamp(18px, 2.6vw, 32px) !important;
  align-items: start !important;
}
.legal-side-nav,
.updates-side-nav {
  position: sticky;
  top: 22px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.028);
}
.legal-side-nav a,
.updates-side-nav a {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(244,240,232,.70);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.legal-side-nav a:hover,
.updates-side-nav a:hover {
  color: var(--hz-text, #f7f3ec);
  background: rgba(255,255,255,.06);
}
.polished-legal-copy {
  display: grid !important;
  gap: 28px !important;
  padding: clamp(24px, 3vw, 38px) !important;
}
.polished-legal-copy section {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.polished-legal-copy section + section {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.polished-legal-copy h2,
.update-release h2 {
  font-size: clamp(24px, 2.4vw, 36px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.04em !important;
  margin: 0 !important;
}
.polished-legal-copy p,
.polished-legal-copy li,
.update-release p,
.update-release li {
  max-width: 76ch;
  color: rgba(244,240,232,.72);
  line-height: 1.72;
}
.polished-legal-copy ul,
.update-release ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.15rem;
}
.updates-timeline {
  display: grid !important;
  gap: 16px !important;
  min-width: 0;
}
.update-release {
  display: grid !important;
  gap: 16px !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important;
}
.update-release.latest {
  border-color: rgba(138,180,255,.24) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(138,180,255,.16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.024)) !important;
}
.release-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.release-head span {
  color: #f7f3ec;
  background: rgba(138,180,255,.10);
  border-color: rgba(138,180,255,.22);
}
.release-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.release-grid > div {
  padding: 16px;
  border-radius: 20px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.08);
}
.release-grid b {
  display: block;
  margin-bottom: 8px;
  color: #f7f3ec;
}
.auth-row { margin-top: 2px; }

@media (max-width: 900px) {
  .legal-layout,
  .updates-layout {
    grid-template-columns: 1fr !important;
  }
  .legal-side-nav,
  .updates-side-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    padding: 10px;
    scrollbar-width: thin;
  }
  .legal-side-nav a,
  .updates-side-nav a {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .release-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .beta053-local-trail .section-head.inner,
  .recent-page-card {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  .recent-page-card time {
    justify-self: start;
    min-width: 0 !important;
  }
}

/* BETA 0.6 Community, Card and React-Ready Polish
   Final override layer for cleaner colour cards, community pages and profile Discord fields. */
:root {
  --beta06-card-bg: rgba(18, 20, 25, .72);
  --beta06-card-bg-hover: rgba(24, 27, 34, .82);
  --beta06-line: rgba(255,255,255,.105);
}
body[data-page="community"] .nav-more > summary,
body[data-page="community"] .primary-nav a[href="/community"],
body[data-page="community"] .footer-links a[href="/community"] {
  color: var(--hz-text, #f4f0e8) !important;
  background: rgba(255,255,255,.07) !important;
}
.grid {
  align-items: stretch !important;
}
.hz-colour-card.card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  padding: clamp(12px, 1.35vw, 16px) !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, var(--beta06-card-bg), rgba(10,12,15,.78)) !important;
  border: 1px solid var(--beta06-line) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.18) !important;
  gap: 14px !important;
  overflow: hidden;
}
.hz-colour-card.card:hover {
  background: linear-gradient(180deg, var(--beta06-card-bg-hover), rgba(10,12,15,.88)) !important;
  border-color: rgba(255,255,255,.18) !important;
  transform: translateY(-2px) !important;
}
.hz-card-swatch.swatch {
  min-height: 158px !important;
  border-radius: 22px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 18px 48px rgba(0,0,0,.18) !important;
}
.swatch-topline {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.swatch-topline span {
  max-width: 12rem;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dark-text .swatch-topline span { color: rgba(0,0,0,.70); background: rgba(255,255,255,.35); border-color: rgba(0,0,0,.10); }
.hz-card-swatch code {
  align-self: flex-start;
  max-width: max-content;
  font-size: 13px !important;
  font-weight: 900;
  letter-spacing: .01em;
  border-radius: 12px !important;
}
.hz-card-body.card-body {
  padding: 2px 4px 4px !important;
  gap: 13px !important;
  align-content: start;
}
.hz-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.hz-card-title-row h3 {
  font-size: clamp(20px, 1.45vw, 23px) !important;
  letter-spacing: -.045em !important;
  line-height: 1.05 !important;
  text-wrap: balance !important;
}
.hz-card-title-row span {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--hz-muted, #aaa49b);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.hz-card-body p {
  min-height: 3.4em;
  max-width: 34ch !important;
  color: rgba(244,240,232,.68) !important;
  font-size: 13.5px !important;
  line-height: 1.48 !important;
}
.hz-card-meta.meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px !important;
}
.hz-card-meta span {
  padding: 6px 9px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(244,240,232,.72) !important;
  font-size: 11px !important;
}
.hz-card-actions.card-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 3px;
}
.hz-card-actions .button {
  width: 100% !important;
  min-height: 40px !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}
.grid[data-view="compact"] .hz-card-actions .button.ghost,
.grid[data-view="compact"] .hz-card-body p,
.grid[data-view="compact"] .hz-card-meta { display: none !important; }
.grid[data-view="compact"] .hz-card-actions { grid-template-columns: 1fr !important; }
.grid[data-view="rows"] .hz-colour-card.card {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  padding: 12px !important;
}
.grid[data-view="rows"] .hz-card-swatch.swatch { min-height: 100% !important; }
.grid[data-view="rows"] .hz-card-actions { grid-template-columns: repeat(4, max-content) !important; justify-content: start !important; }
.grid[data-view="rows"] .hz-card-actions .button { width: auto !important; }
.community-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr);
  gap: clamp(18px, 2.2vw, 26px);
  margin: clamp(26px, 4vw, 46px) 0;
}
.community-card {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,20,26,.82), rgba(10,12,15,.72));
  box-shadow: 0 22px 80px rgba(0,0,0,.22);
}
.discord-card { grid-row: span 2; }
.community-card h2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1; letter-spacing: -.055em; }
.community-status-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 10px 16px;
  padding-top: 8px;
}
.community-status-grid span { color: var(--hz-muted, #aaa49b); }
.community-status-grid b { text-align: right; }
.clean-list { margin: 0; padding-left: 18px; color: rgba(244,240,232,.72); }
.clean-list li + li { margin-top: 9px; }
.rule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.rule-grid article {
  min-width: 0;
  border-radius: 20px;
  padding: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}
.rule-grid b { display: block; margin-bottom: 6px; font-size: 15px; }
.rule-grid span { display: block; color: var(--hz-muted, #aaa49b); line-height: 1.45; }
.discord-profile-tag {
  display: inline-flex;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(88,101,242,.14);
  border: 1px solid rgba(88,101,242,.28);
  color: #dfe3ff;
  font-weight: 850;
}
.account-community-panel .button-row { margin-top: 16px; }
@media (max-width: 900px) {
  .community-layout, .rule-grid { grid-template-columns: 1fr; }
  .discord-card { grid-row: auto; }
  .grid[data-view="rows"] .hz-colour-card.card { grid-template-columns: 1fr !important; }
  .grid[data-view="rows"] .hz-card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .hz-card-actions.card-actions { grid-template-columns: 1fr !important; }
  .hz-card-title-row { display: grid; }
  .community-status-grid { grid-template-columns: 1fr; }
  .community-status-grid b { text-align: left; }
}