/* ───────────────────────────────────────────────────────────
   Huio · Design tokens — light default, dark via [data-theme="dark"]
   Editorial cream-on-warm-dark, Meelo-inspired aesthetic.

   Version: 0.9.2b — see CHANGELOG.md for history.
   Bump --hu-version below and update CHANGELOG.md on every system change.
   ─────────────────────────────────────────────────────────── */

/* Light (default) */
:root {
  /* Version — accessible from any context (.huio not required) */
  --hu-version: "0.9.2b";
}

.huio {
  /* Version (mirrored from :root so the variable is queryable
     even when getComputedStyle is called on a .huio element) */
  --hu-version: "0.9.2b";

  /* Surfaces */
  --hu-bg: #F4EFE6;
  --hu-bg-2: #ECE5D6;
  --hu-bg-card: #FFFFFF;
  --hu-bg-elev: #FAF6EE;
  --hu-bg-inverse: #1C1A15;   /* warm near-black, for "feature" cards */

  /* Text */
  --hu-fg: #1C1A15;
  --hu-fg-2: #6E6757;
  --hu-fg-3: #A09B8C;
  --hu-fg-inverse: #F4EFE6;   /* cream on dark surfaces */

  /* Accents */
  --hu-terra:  #B85C38;    /* organizer, primary CTAs */
  --hu-forest: #4F6B3D;    /* participant, sống, profit */
  --hu-ochre:  #C19433;    /* pending, hold */
  --hu-rust:   #A8412A;    /* dead, loss, warning */
  --hu-stone:  #6E6757;    /* neutral accent */
  --hu-btn-primary-bg: #4A443A;  /* warm graphite — primary CTA (reads against warm-black shadow) */

  /* Semantic aliases — kept for compatibility with components */
  --hu-gold:   var(--hu-terra);   /* organizer */
  --hu-teal:   var(--hu-forest);  /* participant */
  --hu-coral:  var(--hu-rust);    /* urgency */
  --hu-violet: #8B6F47;           /* tertiary stat */
  --hu-green:  var(--hu-forest);  /* sống */

  /* Borders */
  --hu-border: rgba(28, 26, 21, 0.08);
  --hu-border-strong: rgba(28, 26, 21, 0.16);

  /* Type */
  --hu-display: "Fraunces", "Playfair Display", Georgia, serif;
  --hu-ui: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --hu-mono: "DM Mono", "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Radii */
  --hu-r-sm: 8px;
  --hu-r-md: 14px;
  --hu-r-lg: 20px;
  --hu-r-pill: 9999px;

  /* Spacing */
  --hu-1: 4px; --hu-2: 8px; --hu-3: 12px; --hu-4: 16px;
  --hu-5: 20px; --hu-6: 24px; --hu-8: 32px; --hu-10: 40px;

  /* Shadow */
  --hu-shadow-color: #1C1A15;   /* warm-black — single source for shadowColor in RN */
  --hu-shadow-sm: 0 1px 2px rgba(28,26,21,0.04), 0 2px 6px rgba(28,26,21,0.04);
  --hu-shadow-md: 0 4px 14px rgba(28,26,21,0.06), 0 1px 3px rgba(28,26,21,0.04);
  --hu-shadow-lg: 0 18px 40px rgba(28,26,21,0.10), 0 4px 12px rgba(28,26,21,0.06);

  /* Grain blend */
  --hu-grain-blend: multiply;
  --hu-grain-color-r: 0.08; --hu-grain-color-g: 0.07; --hu-grain-color-b: 0.05; --hu-grain-color-a: 0.65;
}

/* Candy — pastel lavender, Meelo Process-style */
[data-theme="candy"] .huio {
  --hu-bg: #E4E0F8;
  --hu-bg-2: #DDD8F7;
  --hu-bg-card: #FFFFFF;
  --hu-bg-elev: #F6F4FE;
  --hu-bg-inverse: #1C1A15;

  /* Pastel surface variants for cards/sections */
  --hu-surf-pink:   #FBDCE4;
  --hu-surf-peach:  #FCE4D4;
  --hu-surf-butter: #FCEEB8;
  --hu-surf-mint:   #D8EFDF;
  --hu-surf-sky:    #D6E7F5;
  --hu-surf-lilac:  #E5D8F5;

  --hu-fg: #1C1A15;
  --hu-fg-2: #595342;
  --hu-fg-3: #8B8472;
  --hu-fg-inverse: #FFFFFF;

  /* Candy accents — more saturated for pop on white cards */
  --hu-terra:  #EE6B45;    /* warm coral · organizer */
  --hu-forest: #4FA362;    /* lush green · participant */
  --hu-ochre:  #E2A53A;    /* sunny ochre · pending */
  --hu-rust:   #DC4B36;    /* punchy red · urgent */
  --hu-stone:  #8479B0;    /* lavender accent */
  --hu-btn-primary-bg: #4A443A;  /* warm graphite — same across themes */

  --hu-gold:   var(--hu-terra);
  --hu-teal:   var(--hu-forest);
  --hu-coral:  var(--hu-rust);
  --hu-violet: var(--hu-stone);
  --hu-green:  var(--hu-forest);

  /* Thicker, darker borders — Meelo card style */
  --hu-border: rgba(28, 26, 21, 0.85);          /* near-black */
  --hu-border-strong: #1C1A15;
  --hu-border-w: 1.5px;                          /* used by cards in candy mode */

  --hu-shadow-color: #1C1A15;                   /* same warm-black across themes */
  --hu-shadow-sm: 0 2px 0 rgba(28,26,21,0.85);  /* hard offset shadow */
  --hu-shadow-md: 0 4px 0 rgba(28,26,21,0.85);
  --hu-shadow-lg: 0 6px 0 rgba(28,26,21,0.85);

  --hu-grain-blend: multiply;
}

/* Dark */
[data-theme="dark"] .huio {
  --hu-bg: #0B0B11;
  --hu-bg-2: #16161C;
  --hu-bg-card: #1E1E26;
  --hu-bg-elev: #2A2A34;
  --hu-bg-inverse: #F4EFE6;

  --hu-fg: #F4F1EA;
  --hu-fg-2: #B5B1BD;   /* brighter mid-tone — bottom nav inactive, secondary labels */
  --hu-fg-3: #807D8B;   /* brighter tertiary — eyebrow, dim text */
  --hu-fg-inverse: #1C1A15;

  /* Dark mode brightens accents for contrast on dark cards */
  --hu-terra:  #ED9270;
  --hu-forest: #92C078;
  --hu-ochre:  #ECC373;
  --hu-rust:   #F08665;
  --hu-stone:  #B5AFA0;
  --hu-btn-primary-bg: #C9C4D0;  /* light graphite on dark — inverts so shadow (black) reads */

  --hu-gold:   var(--hu-terra);
  --hu-teal:   var(--hu-forest);
  --hu-coral:  var(--hu-rust);
  --hu-violet: #C8A98C;
  --hu-green:  var(--hu-forest);

  --hu-border: rgba(255, 255, 255, 0.12);
  --hu-border-strong: rgba(255, 255, 255, 0.24);

  --hu-shadow-color: #000000;                   /* pure black on dark surfaces */
  --hu-shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --hu-shadow-md: 0 6px 16px rgba(0,0,0,0.55);
  --hu-shadow-lg: 0 24px 50px rgba(0,0,0,0.65);

  --hu-grain-blend: overlay;
  --hu-grain-color-r: 0.94; --hu-grain-color-g: 0.93; --hu-grain-color-b: 0.90; --hu-grain-color-a: 0.55;
}

/* ───────────────────────────────────────────────────────────
   Surface base
   ─────────────────────────────────────────────────────────── */
.huio {
  background: var(--hu-bg);
  color: var(--hu-fg);
  font-family: var(--hu-ui);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  position: relative;
  isolation: isolate;
}
.huio, .huio *, .huio *::before, .huio *::after { box-sizing: border-box; }

/* Buttons inside .huio inherit text color from their parent — fixes
   "Chủ hụi / Hội viên / Cả hai" text appearing black on dark surfaces
   when used as <button>-typed cards. */
.huio button { color: inherit; font-family: inherit; }

/* Grain overlay — generated SVG noise, blend mode + color swap with theme */
.huio::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--hu-grain, 0.05);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: var(--hu-grain-blend);
}
[data-theme="dark"] .huio::after {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.94  0 0 0 0 0.93  0 0 0 0 0.90  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ───────────────────────────────────────────────────────────
   Type
   ─────────────────────────────────────────────────────────── */
.huio .hu-display { font-family: var(--hu-display); font-weight: 500; letter-spacing: -0.02em; }
.huio .hu-mono    { font-family: var(--hu-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.huio .hu-italic  { font-style: italic; }

.huio .hu-eyebrow {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hu-fg-2); font-weight: 500;
}
.huio .hu-eyebrow-star::before, .huio .hu-eyebrow-star::after {
  content: "✦"; display: inline-block;
  margin: 0 0.5em; font-size: 0.8em; vertical-align: 0.05em;
  color: var(--hu-terra); opacity: 0.7;
}
/* Single leading star — for left-aligned section eyebrows.
   Use when the eyebrow is part of a card/KPI block (not centered). */
.huio .hu-eyebrow-star-lead::before {
  content: "✦"; display: inline-block;
  margin-right: 0.5em; font-size: 0.85em; vertical-align: 0.05em;
  color: var(--hu-terra); opacity: 0.7;
}
[data-theme="dark"] .huio .hu-eyebrow-star::before,
[data-theme="dark"] .huio .hu-eyebrow-star::after,
[data-theme="dark"] .huio .hu-eyebrow-star-lead::before {
  opacity: 0.85;
}

.huio .hu-h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.huio .hu-h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.huio .hu-h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.huio .hu-body { font-size: 14px; color: var(--hu-fg); }
.huio .hu-caption { font-size: 12px; color: var(--hu-fg-2); }

/* ───────────────────────────────────────────────────────────
   Surfaces
   ─────────────────────────────────────────────────────────── */
.huio .hu-card {
  background: var(--hu-bg-card);
  border: 1px solid var(--hu-border);
  border-radius: var(--hu-r-md);
  padding: var(--hu-4);
  box-shadow: var(--hu-shadow-sm);
}
.huio .hu-card-lg {
  background: var(--hu-bg-card);
  border: 1px solid var(--hu-border);
  border-radius: var(--hu-r-lg);
  box-shadow: var(--hu-shadow-md);
}
.huio .hu-card-feature {
  background: var(--hu-bg-inverse);
  color: var(--hu-fg-inverse);
  border: 1px solid var(--hu-bg-inverse);
  border-radius: var(--hu-r-lg);
}

/* ───────────────────────────────────────────────────────────
   Card 3D elevation (v0.9.2 exploration) — `.hu-card-3d`
   Combines with .hu-card / .hu-card-lg. Unlike .hu-raise, these are
   tuned for cards AND survive the candy [data-theme] override below.
   `.hu-card-3d`     — standard 4px/5px hard offset
   `.hu-card-3d-sm`  — subtle 2px/3px (lists, secondary)
   `.hu-card-3d.hu-interactive` — press feedback for tappable cards
   ─────────────────────────────────────────────────────────── */
.huio .hu-card-3d {
  border: 1.5px solid var(--hu-shadow-color);
  box-shadow: 4px 5px 0 var(--hu-shadow-color);
  transition: transform 130ms ease-out, box-shadow 130ms ease-out;
}
.huio .hu-card-3d-sm {
  border: 1.25px solid var(--hu-shadow-color);
  box-shadow: 2px 3px 0 var(--hu-shadow-color);
  transition: transform 130ms ease-out, box-shadow 130ms ease-out;
}
.huio .hu-card-3d.hu-interactive { cursor: pointer; }
.huio .hu-card-3d.hu-interactive:hover { transform: translate(-1px, -1px); box-shadow: 5px 6px 0 var(--hu-shadow-color); }
.huio .hu-card-3d.hu-interactive:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--hu-shadow-color); }
.huio .hu-card-3d-sm.hu-interactive { cursor: pointer; }
.huio .hu-card-3d-sm.hu-interactive:active { transform: translate(1px, 2px); box-shadow: 0 0 0 var(--hu-shadow-color); }
[data-theme="dark"] .huio .hu-card-3d,
[data-theme="dark"] .huio .hu-card-3d-sm { border-color: rgba(255,255,255,0.5); }

/* Web hover-raise — flat at rest, lifts on hover (use on web/desktop only,
   not touch). The hard shadow appears on hover as an affordance cue. */
.huio .hu-card-hover {
  border: 1.5px solid var(--hu-border);
  transition: transform 130ms ease-out, box-shadow 130ms ease-out, border-color 130ms ease-out;
  cursor: pointer;
}
.huio .hu-card-hover:hover {
  border-color: var(--hu-shadow-color);
  box-shadow: 4px 5px 0 var(--hu-shadow-color);
  transform: translate(-1px, -1px);
}
.huio .hu-card-hover:active {
  box-shadow: 1px 1px 0 var(--hu-shadow-color);
  transform: translate(2px, 3px);
}
[data-theme="candy"] .huio .hu-card.hu-card-hover:hover { box-shadow: 4px 5px 0 var(--hu-shadow-color); }

/* ListRow (v0.9.2) — selected/press states via class so they reconcile reliably */
.huio .hu-listrow { background: transparent; transition: background 120ms ease; }
.huio .hu-listrow.is-selected { background: color-mix(in srgb, var(--hu-terra) 9%, var(--hu-bg-card)); }
.huio .hu-listrow-press { -webkit-tap-highlight-color: transparent; }
.huio .hu-listrow-press:hover { background: color-mix(in srgb, var(--hu-fg) 4%, transparent); }
.huio .hu-listrow-press.is-selected:hover { background: color-mix(in srgb, var(--hu-terra) 13%, var(--hu-bg-card)); }
.huio .hu-listrow-press:active { background: color-mix(in srgb, var(--hu-fg) 7%, transparent); }

/* ───────────────────────────────────────────────────────────
   Elevation — `.hu-raise` hard-offset shadow (v0.9)

   The "3D" look from the web admin: 1.5px warm-black border + hard offset
   shadow (no blur). Apply to any container or button to get the Meelo-style
   raised feel. Works in all three themes — shadow color follows
   --hu-shadow-color.
   ─────────────────────────────────────────────────────────── */
.huio .hu-raise {
  border: 1.5px solid var(--hu-shadow-color);
  box-shadow: 4px 5px 0 var(--hu-shadow-color);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.huio .hu-raise-sm {
  border: 1.25px solid var(--hu-shadow-color);
  box-shadow: 2px 3px 0 var(--hu-shadow-color);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.huio .hu-raise-lg {
  border: 1.75px solid var(--hu-shadow-color);
  box-shadow: 6px 7px 0 var(--hu-shadow-color);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

/* Interactive raise: press into the page */
.huio .hu-raise.hu-interactive:hover,
.huio .hu-raise-sm.hu-interactive:hover,
.huio .hu-raise-lg.hu-interactive:hover { transform: translate(-1px, -1px); }
.huio .hu-raise.hu-interactive:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--hu-shadow-color); }
.huio .hu-raise-sm.hu-interactive:active { transform: translate(1px, 2px); box-shadow: 0 0 0 var(--hu-shadow-color); }
.huio .hu-raise-lg.hu-interactive:active { transform: translate(3px, 4px); box-shadow: 2px 2px 0 var(--hu-shadow-color); }

/* Dark theme — slightly softer offset */
[data-theme="dark"] .huio .hu-raise,
[data-theme="dark"] .huio .hu-raise-sm,
[data-theme="dark"] .huio .hu-raise-lg { border-color: rgba(255,255,255,0.55); }

/* ───────────────────────────────────────────────────────────
   v0.9 button system — extended API (.hu-btn-v9)
   ─────────────────────────────────────────────────────────── */
.huio .hu-btn-v9 {
  appearance: none; cursor: pointer;
  font-family: var(--hu-ui); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; letter-spacing: -0.005em;
  border-radius: var(--hu-r-pill);
  position: relative;
  border: 1.5px solid transparent;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background 120ms ease-out, opacity 120ms ease-out;
  white-space: nowrap;
}
.huio .hu-btn-v9:focus-visible { outline: 2.5px solid var(--hu-terra); outline-offset: 3px; }
/* Disabled — explicit muted surface (NOT opacity: 0.45 which mutes the shadow
   too and creates a gray-on-gray blob). Border + text become muted gray;
   shadow keeps warm-black but at reduced strength so it stays readable. */
.huio .hu-btn-v9[disabled],
.huio .hu-btn-v9.is-disabled {
  background: var(--hu-bg-2)    !important;
  color: var(--hu-fg-3)         !important;
  border-color: var(--hu-border-strong) !important;
  cursor: not-allowed;
  pointer-events: none;
}
.huio .hu-btn-v9.is-disabled.is-raised,
.huio .hu-btn-v9[disabled].is-raised {
  box-shadow: 2px 3px 0 var(--hu-border-strong) !important;
}
.huio .hu-btn-v9.is-loading { pointer-events: none; }

/* Sizes */
.huio .hu-btn-v9.size-sm { min-height: 40px; padding: 0 16px; font-size: 13px; }
.huio .hu-btn-v9.size-md { min-height: 48px; padding: 0 20px; font-size: 14px; }
.huio .hu-btn-v9.size-lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.huio .hu-btn-v9.is-fullwidth { width: 100%; display: flex; }

/* Icon-only */
.huio .hu-btn-v9.icon-only.size-sm { width: 40px; padding: 0; }
.huio .hu-btn-v9.icon-only.size-md { width: 48px; padding: 0; }
.huio .hu-btn-v9.icon-only.size-lg { width: 56px; padding: 0; }

/* Variants — pastel surfaces + warm-black text/border (Meelo-style).
   The 1.5px warm-black border keeps every variant grounded even on candy bg.
   For rare cases where a saturated brand-color CTA is needed, use the
   `-solid` variants (var-secondary-solid etc.) — keeps terra/forest/rust
   accents available without making them the default. */
.huio .hu-btn-v9.var-primary   { background: var(--hu-btn-primary-bg);    color: var(--hu-fg-inverse);    border-color: var(--hu-shadow-color); }
.huio .hu-btn-v9.var-secondary { background: var(--hu-surf-pink,#FBDCE4); color: var(--hu-shadow-color);  border-color: var(--hu-shadow-color); }
.huio .hu-btn-v9.var-tertiary  { background: var(--hu-surf-mint,#D8EFDF); color: var(--hu-shadow-color);  border-color: var(--hu-shadow-color); }
.huio .hu-btn-v9.var-accent    { background: var(--hu-surf-lilac,#E5D8F5);color: var(--hu-shadow-color);  border-color: var(--hu-shadow-color); }
.huio .hu-btn-v9.var-danger    { background: var(--hu-surf-peach,#FCE4D4);color: var(--hu-rust);          border-color: var(--hu-rust); }
.huio .hu-btn-v9.var-ghost     { background: var(--hu-bg-card);           color: var(--hu-fg);            border-color: var(--hu-shadow-color); }
.huio .hu-btn-v9.var-link      { background: transparent;                 color: var(--hu-fg);            border-color: transparent; padding-left: 4px; padding-right: 4px; min-height: auto; }
.huio .hu-btn-v9.var-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Saturated brand variants (rare — organizer dashboards, marketing) */
.huio .hu-btn-v9.var-secondary-solid { background: var(--hu-terra);  color: #FBF5EC; border-color: var(--hu-shadow-color); }
.huio .hu-btn-v9.var-tertiary-solid  { background: var(--hu-forest); color: #F4EFE6; border-color: var(--hu-shadow-color); }
.huio .hu-btn-v9.var-danger-solid    { background: var(--hu-rust);   color: #FBF5EC; border-color: var(--hu-shadow-color); }

/* Raised — 3D look (hard-offset shadow, follows .hu-raise) */
.huio .hu-btn-v9.is-raised.size-sm { box-shadow: 2px 3px 0 var(--hu-shadow-color); }
.huio .hu-btn-v9.is-raised.size-md { box-shadow: 3px 4px 0 var(--hu-shadow-color); }
.huio .hu-btn-v9.is-raised.size-lg { box-shadow: 4px 5px 0 var(--hu-shadow-color); }
.huio .hu-btn-v9.is-raised:hover { transform: translate(-1px, -1px); }
.huio .hu-btn-v9.is-raised.size-sm:hover { box-shadow: 3px 4px 0 var(--hu-shadow-color); }
.huio .hu-btn-v9.is-raised.size-md:hover { box-shadow: 4px 5px 0 var(--hu-shadow-color); }
.huio .hu-btn-v9.is-raised.size-lg:hover { box-shadow: 5px 6px 0 var(--hu-shadow-color); }
.huio .hu-btn-v9.is-raised:active { transform: translate(2px, 3px); box-shadow: 0px 0px 0 var(--hu-shadow-color); }

/* Flat (default) variants get a subtle press */
.huio .hu-btn-v9:not(.is-raised):not(.var-link):hover { filter: brightness(1.05); }
.huio .hu-btn-v9:not(.is-raised):active { transform: scale(0.98); }

/* Spinner */
.huio .hu-btn-v9 .hu-spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; display: inline-block;
  animation: hu-spin 0.7s linear infinite;
}
.huio .hu-btn-v9.size-lg .hu-spinner { width: 18px; height: 18px; border-width: 2.5px; }
@keyframes hu-spin { to { transform: rotate(360deg); } }

/* Modal animations (v0.9.1) */@keyframes hu-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hu-modal-pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hu-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ───────────────────────────────────────────────────────────
   Buttons / chips (v0.9.1 — restyled to raised pastel look)
   These legacy class names now render the new 3D pastel buttons so
   every existing screen updates without per-button edits. New code
   should still prefer <HuioButton/>.
   ─────────────────────────────────────────────────────────── */
.huio .hu-btn {
  appearance: none; cursor: pointer;
  font-family: var(--hu-ui); font-size: 14px; font-weight: 600;
  border-radius: var(--hu-r-pill);
  padding: 12px 20px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: -0.005em;
  border: 1.5px solid var(--hu-shadow-color);
  box-shadow: 3px 4px 0 var(--hu-shadow-color);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background 120ms ease-out;
}
.huio .hu-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 5px 0 var(--hu-shadow-color); }
.huio .hu-btn:active { transform: translate(2px, 3px); box-shadow: 0 0 0 var(--hu-shadow-color); }
.huio .hu-btn[disabled],
.huio .hu-btn:disabled {
  background: var(--hu-bg-2) !important;
  color: var(--hu-fg-3) !important;
  border-color: var(--hu-border-strong) !important;
  box-shadow: 2px 3px 0 var(--hu-border-strong) !important;
  cursor: not-allowed; pointer-events: none; opacity: 1;
  transform: none;
}

/* Variants — pastel surfaces + warm-black text/border */
.huio .hu-btn-primary { background: var(--hu-btn-primary-bg);     color: var(--hu-fg-inverse); }
.huio .hu-btn-terra   { background: var(--hu-surf-pink,#FBDCE4); color: var(--hu-shadow-color); }
.huio .hu-btn-forest  { background: var(--hu-surf-mint,#D8EFDF); color: var(--hu-shadow-color); }
.huio .hu-btn-coral   { background: var(--hu-surf-peach,#FCE4D4);color: var(--hu-rust); border-color: var(--hu-rust); }
.huio .hu-btn-coral:active { box-shadow: 0 0 0 var(--hu-rust); }
.huio .hu-btn-lilac   { background: var(--hu-surf-lilac,#E5D8F5);color: var(--hu-shadow-color); }
.huio .hu-btn-ghost   { background: var(--hu-bg-card);           color: var(--hu-fg); }

[data-theme="dark"] .huio .hu-btn { border-color: rgba(255,255,255,0.55); }

/* Legacy aliases — now pastel too */
.huio .hu-btn-gold { background: var(--hu-surf-pink,#FBDCE4); color: var(--hu-shadow-color); }
.huio .hu-btn-teal { background: var(--hu-surf-mint,#D8EFDF); color: var(--hu-shadow-color); }

.huio .hu-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--hu-r-pill);
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  background: rgba(28,26,21,0.05); color: var(--hu-fg-2);
  border: 1px solid var(--hu-border);
}
[data-theme="dark"] .huio .hu-chip { background: rgba(255,255,255,0.08); }

.huio .hu-chip-gold,
.huio .hu-chip-terra  { color: var(--hu-terra); background: rgba(184,92,56,0.10); border-color: rgba(184,92,56,0.25); }
.huio .hu-chip-teal,
.huio .hu-chip-forest { color: var(--hu-forest); background: rgba(79,107,61,0.10); border-color: rgba(79,107,61,0.25); }
.huio .hu-chip-coral,
.huio .hu-chip-rust   { color: var(--hu-rust); background: rgba(168,65,42,0.08); border-color: rgba(168,65,42,0.22); }
.huio .hu-chip-green  { color: var(--hu-forest); background: rgba(79,107,61,0.10); border-color: rgba(79,107,61,0.25); }
.huio .hu-chip-ochre  { color: var(--hu-ochre); background: rgba(193,148,51,0.12); border-color: rgba(193,148,51,0.28); }

/* Status dot */
.huio .hu-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.huio .hu-dot-live { background: var(--hu-forest); box-shadow: 0 0 0 3px rgba(79,107,61,0.18); }
.huio .hu-dot-dead { background: var(--hu-rust); }
.huio .hu-dot-pend { background: var(--hu-ochre); }

/* Icon tile — Meelo-style colored rounded square holding an outline icon */
.huio .hu-icon-tile {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(28,26,21,0.06);
  color: var(--hu-fg);
}
[data-theme="dark"] .huio .hu-icon-tile { background: rgba(255,255,255,0.10); }
.huio .hu-icon-tile-terra  { background: rgba(184,92,56,0.14); color: var(--hu-terra); }
.huio .hu-icon-tile-forest { background: rgba(79,107,61,0.14); color: var(--hu-forest); }
.huio .hu-icon-tile-ochre  { background: rgba(193,148,51,0.18); color: var(--hu-ochre); }
.huio .hu-icon-tile-rust   { background: rgba(168,65,42,0.12); color: var(--hu-rust); }

/* Candy mode — thicker dark borders, no soft shadow */
[data-theme="candy"] .huio .hu-card,
[data-theme="candy"] .huio .hu-card-lg {
  border-width: 1.5px;
  border-color: #1C1A15;
  box-shadow: none;
}
/* …but 3D cards keep their hard offset in candy */
[data-theme="candy"] .huio .hu-card.hu-card-3d {
  box-shadow: 4px 5px 0 var(--hu-shadow-color);
  border-color: #1C1A15;
}
[data-theme="candy"] .huio .hu-card.hu-card-3d-sm {
  box-shadow: 2px 3px 0 var(--hu-shadow-color);
  border-color: #1C1A15;
}
[data-theme="candy"] .huio .hu-card-feature {
  border-width: 1.5px;
  border-color: #1C1A15;
}

/* Pastel surface utility cards (candy mode) */
[data-theme="candy"] .huio .hu-surf-pink   { background: var(--hu-surf-pink); }
[data-theme="candy"] .huio .hu-surf-peach  { background: var(--hu-surf-peach); }
[data-theme="candy"] .huio .hu-surf-butter { background: var(--hu-surf-butter); }
[data-theme="candy"] .huio .hu-surf-mint   { background: var(--hu-surf-mint); }
[data-theme="candy"] .huio .hu-surf-sky    { background: var(--hu-surf-sky); }
[data-theme="candy"] .huio .hu-surf-lilac  { background: var(--hu-surf-lilac); }

/* IconStamp — bold-outline icon in white circle with dark border */
.huio .hu-stamp {
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #1C1A15;
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #1C1A15;
}
[data-theme="dark"] .huio .hu-stamp {
  background: #1C1A15;
  border-color: #F4EFE6;
  color: #F4EFE6;
}
.huio .hu-stamp-pink   { background: var(--hu-surf-pink, #FBDCE4); }
.huio .hu-stamp-peach  { background: var(--hu-surf-peach, #FCE4D4); }
.huio .hu-stamp-butter { background: var(--hu-surf-butter, #FCEEB8); }
.huio .hu-stamp-mint   { background: var(--hu-surf-mint, #D8EFDF); }

/* ───────────────────────────────────────────────────────────
   Progress
   ─────────────────────────────────────────────────────────── */
.huio .hu-progress {
  height: 4px; width: 100%;
  background: rgba(28,26,21,0.08);
  border-radius: var(--hu-r-pill);
  overflow: hidden;
}
[data-theme="dark"] .huio .hu-progress { background: rgba(255,255,255,0.10); }
.huio .hu-progress > span {
  display: block; height: 100%;
  background: var(--hu-fg);
  border-radius: inherit;
  transition: width 300ms ease-out;
}

/* ───────────────────────────────────────────────────────────
   Misc
   ─────────────────────────────────────────────────────────── */
.huio .hu-divider { height: 1px; background: var(--hu-border); border: 0; margin: 0; }

.huio .hu-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hu-ui); font-weight: 600; font-size: 13px;
  flex-shrink: 0;
}

@keyframes hu-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.02); }
}
.huio .hu-pulse { animation: hu-pulse 1s ease-in-out infinite; }

@keyframes hu-slide-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.huio .hu-slide-in { animation: hu-slide-in 200ms ease-out both; }

.huio .hu-scroll {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.huio .hu-scroll::-webkit-scrollbar { display: none; }