/* ================================================================
   COMPONENTS.CSS — Winnie Nguyen Mentoring Design System v2
   Reusable classes built on tokens.css variables.

   Requires: tokens.css loaded first.
   Per-page customisations belong in a page-level <style> block.
================================================================ */


/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--surface-page);
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeUp    { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn    { from { opacity: 0; }                               to { opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lineGrow  { from { transform: scaleX(0); }                     to { transform: scaleX(1); } }
@keyframes scaleIn   { from { opacity: 0; transform: scale(.94); }        to { opacity: 1; transform: scale(1); } }

.animate { opacity: 0; animation: fadeUp .6s var(--ease-out) forwards; }
.d1 { animation-delay: .05s; }
.d2 { animation-delay: .15s; }
.d3 { animation-delay: .25s; }
.d4 { animation-delay: .35s; }
.d5 { animation-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ─────────────────────────────────────────────────────────── */
/*  TYPOGRAPHY HELPERS                                         */
/* ─────────────────────────────────────────────────────────── */

.type-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.type-heading-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.type-heading-2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
}

.type-heading-3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}

.type-body-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.type-body    { font-size: var(--text-base); line-height: var(--leading-normal); }
.type-body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }

.type-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.type-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-disabled  { color: var(--text-disabled); }
.text-purple    { color: var(--purple); }
.text-yellow    { color: var(--yellow-deep); }
.text-success   { color: var(--success-deep); }
.text-error     { color: var(--error); }
.text-warning   { color: var(--warning-deep); }
.text-info      { color: var(--info); }


/* ─────────────────────────────────────────────────────────── */
/*  ELEVATION — shadow utility classes                         */
/* ─────────────────────────────────────────────────────────── */

.elevation-z1  { box-shadow: var(--shadow-z1); }
.elevation-z4  { box-shadow: var(--shadow-z4); }
.elevation-z8  { box-shadow: var(--shadow-z8); }
.elevation-z12 { box-shadow: var(--shadow-z12); }
.elevation-z16 { box-shadow: var(--shadow-z16); }
.elevation-z20 { box-shadow: var(--shadow-z20); }
.elevation-z24 { box-shadow: var(--shadow-z24); }


/* ─────────────────────────────────────────────────────────── */
/*  BUTTONS                                                    */
/*  Usage: <button class="btn btn--contained btn--primary btn--md">Label</button>
/*  Variants: contained | outlined | text | soft              */
/*  Colors:   primary | secondary | error                     */
/*  Sizes:    sm | md | lg                                    */
/* ─────────────────────────────────────────────────────────── */

/* Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-md);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.btn--sm { font-size: var(--text-sm); padding: 6px 14px; border-radius: var(--radius-sm); gap: var(--space-1); }
.btn--md { font-size: var(--text-base); padding: 9px 20px; }
.btn--lg { font-size: var(--text-md); padding: 12px 28px; border-radius: var(--radius-lg); }

/* ── Contained ────────────────────────────────────────────── */
.btn--contained.btn--primary {
  background: var(--purple);
  color: var(--text-on-primary);
}
.btn--contained.btn--primary:hover  { background: var(--purple-deep); transform: translateY(-1px); box-shadow: var(--shadow-z8); }
.btn--contained.btn--primary:active { background: var(--purple-deep); transform: translateY(0); box-shadow: none; }
.btn--contained.btn--primary:disabled { background: var(--gray-200); color: var(--text-disabled); box-shadow: none; }

.btn--contained.btn--secondary {
  background: var(--yellow);
  color: var(--text-on-yellow);
}
.btn--contained.btn--secondary:hover  { background: var(--yellow-deep); transform: translateY(-1px); box-shadow: var(--shadow-z8); }
.btn--contained.btn--secondary:active { transform: translateY(0); box-shadow: none; }
.btn--contained.btn--secondary:disabled { background: var(--gray-200); color: var(--text-disabled); }

.btn--contained.btn--error {
  background: var(--error);
  color: #FFFFFF;
}
.btn--contained.btn--error:hover  { background: var(--error-deep); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(239,68,68,.3); }
.btn--contained.btn--error:disabled { background: var(--gray-200); color: var(--text-disabled); }

/* ── Outlined ─────────────────────────────────────────────── */
.btn--outlined {
  background: transparent;
  border: 1.5px solid currentColor;
}

.btn--outlined.btn--primary {
  color: var(--purple);
  border-color: var(--purple);
}
.btn--outlined.btn--primary:hover  { background: var(--purple-subtle); transform: translateY(-1px); }
.btn--outlined.btn--primary:active { background: var(--purple-tint); transform: translateY(0); }
.btn--outlined.btn--primary:disabled { color: var(--text-disabled); border-color: var(--gray-300); }

.btn--outlined.btn--secondary {
  color: var(--yellow-deep);
  border-color: var(--yellow);
}
.btn--outlined.btn--secondary:hover  { background: var(--yellow-subtle); transform: translateY(-1px); }
.btn--outlined.btn--secondary:disabled { color: var(--text-disabled); border-color: var(--gray-300); }

.btn--outlined.btn--error {
  color: var(--error);
  border-color: var(--error);
}
.btn--outlined.btn--error:hover  { background: var(--error-tint); transform: translateY(-1px); }
.btn--outlined.btn--error:disabled { color: var(--text-disabled); border-color: var(--gray-300); }

/* ── Text button ──────────────────────────────────────────── */
.btn--text {
  background: transparent;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.btn--text.btn--primary { color: var(--purple); }
.btn--text.btn--primary:hover  { background: var(--purple-subtle); }
.btn--text.btn--primary:active { background: var(--purple-tint); }
.btn--text.btn--primary:disabled { color: var(--text-disabled); }

.btn--text.btn--secondary { color: var(--yellow-deep); }
.btn--text.btn--secondary:hover  { background: var(--yellow-subtle); }
.btn--text.btn--secondary:disabled { color: var(--text-disabled); }

.btn--text.btn--error { color: var(--error); }
.btn--text.btn--error:hover  { background: var(--error-tint); }
.btn--text.btn--error:disabled { color: var(--text-disabled); }

/* ── Soft button ──────────────────────────────────────────── */
.btn--soft.btn--primary {
  background: var(--purple-tint);
  color: var(--purple-deep);
}
.btn--soft.btn--primary:hover  { background: var(--purple-mid); color: #FFFFFF; transform: translateY(-1px); }
.btn--soft.btn--primary:disabled { background: var(--gray-100); color: var(--text-disabled); }

.btn--soft.btn--secondary {
  background: var(--yellow-tint);
  color: var(--yellow-deep);
}
.btn--soft.btn--secondary:hover  { background: var(--yellow-mid); color: var(--gray-900); transform: translateY(-1px); }
.btn--soft.btn--secondary:disabled { background: var(--gray-100); color: var(--text-disabled); }

.btn--soft.btn--error {
  background: var(--error-tint);
  color: var(--error-deep);
}
.btn--soft.btn--error:hover  { background: var(--error); color: #FFFFFF; transform: translateY(-1px); }
.btn--soft.btn--error:disabled { background: var(--gray-100); color: var(--text-disabled); }

/* ── Icon button (square, circle) ────────────────────────── */
.btn--icon {
  padding: 0;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.btn--icon.btn--sm  { width: 32px; height: 32px; }
.btn--icon.btn--md  { width: 40px; height: 40px; }
.btn--icon.btn--lg  { width: 48px; height: 48px; }
.btn--icon.btn--circle { border-radius: var(--radius-pill); }

/* Legacy aliases — keep existing files working */
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: #FFFFFF; background: var(--purple);
  padding: 8px 18px; border-radius: var(--radius-md); border: none;
  cursor: pointer; text-decoration: none;
  transition: var(--transition);
}
.btn-primary:hover { background: var(--purple-deep); transform: translateY(-1px); box-shadow: var(--shadow-z8); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary); background: var(--gray-50);
  padding: 7px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-default); cursor: pointer;
  text-decoration: none; transition: var(--transition);
}
.btn-secondary:hover { border-color: var(--purple-mid); color: var(--purple); }


/* ─────────────────────────────────────────────────────────── */
/*  CHIPS / TAGS                                               */
/*  Usage: <span class="chip chip--filled chip--primary">Text</span>
/*  Variants: filled | outlined | soft                        */
/*  Colors:   default | primary | secondary | info | success | warning | error
/*  Sizes:    sm | md (default)                               */
/* ─────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: default;
  transition: var(--transition-fast);
}
.chip--sm { font-size: var(--text-xs); padding: 3px 9px; }

.chip__delete {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0,0,0,.12); cursor: pointer;
  font-size: 10px; line-height: 1;
  transition: var(--transition-fast);
}
.chip__delete:hover { background: rgba(0,0,0,.25); }

/* ── Filled chips ─────────────────────────────────────────── */
.chip--filled.chip--default   { background: var(--gray-700); color: #FFFFFF; }
.chip--filled.chip--primary   { background: var(--purple); color: #FFFFFF; }
.chip--filled.chip--secondary { background: var(--yellow); color: var(--gray-900); }
.chip--filled.chip--info      { background: var(--info); color: #FFFFFF; }
.chip--filled.chip--success   { background: var(--success); color: #FFFFFF; }
.chip--filled.chip--warning   { background: var(--warning); color: #FFFFFF; }
.chip--filled.chip--error     { background: var(--error); color: #FFFFFF; }
.chip--filled:disabled        { background: var(--gray-200); color: var(--text-disabled); }

/* ── Outlined chips ───────────────────────────────────────── */
.chip--outlined.chip--default   { color: var(--text-primary); border-color: var(--border-strong); }
.chip--outlined.chip--primary   { color: var(--purple); border-color: var(--purple); }
.chip--outlined.chip--secondary { color: var(--yellow-deep); border-color: var(--yellow); }
.chip--outlined.chip--info      { color: var(--info-deep); border-color: var(--info); }
.chip--outlined.chip--success   { color: var(--success-deep); border-color: var(--success); }
.chip--outlined.chip--warning   { color: var(--warning-deep); border-color: var(--warning); }
.chip--outlined.chip--error     { color: var(--error-deep); border-color: var(--error); }
.chip--outlined:disabled        { color: var(--text-disabled); border-color: var(--gray-300); }

/* ── Soft chips ───────────────────────────────────────────── */
.chip--soft.chip--default   { background: var(--gray-100); color: var(--gray-600); }
.chip--soft.chip--primary   { background: var(--purple-tint); color: var(--purple-deep); }
.chip--soft.chip--secondary { background: var(--yellow-tint); color: var(--yellow-deep); }
.chip--soft.chip--info      { background: var(--info-tint); color: var(--info-deep); }
.chip--soft.chip--success   { background: var(--success-tint); color: var(--success-deep); }
.chip--soft.chip--warning   { background: var(--warning-tint); color: var(--warning-deep); }
.chip--soft.chip--error     { background: var(--error-tint); color: var(--error-deep); }
.chip--soft:disabled        { background: var(--gray-100); color: var(--text-disabled); }

/* Content type chips (lesson, framework, etc.) */
.chip--lesson    { background: var(--lesson-bg);    color: var(--lesson-color); }
.chip--framework { background: var(--framework-bg); color: var(--framework-color); }
.chip--slides    { background: var(--slides-bg);    color: var(--slides-color); }
.chip--guide     { background: var(--guide-bg);     color: var(--guide-color); }

/* Legacy badge aliases */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge-lesson    { color: var(--lesson-color);    background: var(--lesson-bg); }
.badge-framework { color: var(--framework-color); background: var(--framework-bg); }
.badge-slides    { color: var(--slides-color);    background: var(--slides-bg); }
.badge-guide     { color: var(--guide-color);     background: var(--guide-bg); }
.badge-accent    { color: var(--purple);          background: var(--purple-tint); }

.tag  { font-size: var(--text-xs); font-weight: 500; color: var(--purple); background: var(--purple-tint); padding: 3px 8px; border-radius: var(--radius-pill); }
.pill { font-size: .7rem; color: var(--text-tertiary); background: var(--gray-50); border: 1px solid var(--border-default); padding: 2px 8px; border-radius: var(--radius-pill); }


/* ─────────────────────────────────────────────────────────── */
/*  CARDS                                                      */
/*  Usage: <div class="card card--z4">...</div>               */
/* ─────────────────────────────────────────────────────────── */

.card {
  background: var(--surface-base);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-z4);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}

/* Elevation variants */
.card--z1  { box-shadow: var(--shadow-z1); }
.card--z4  { box-shadow: var(--shadow-z4); }
.card--z8  { box-shadow: var(--shadow-z8); }
.card--z12 { box-shadow: var(--shadow-z12); }
.card--z16 { box-shadow: var(--shadow-z16); }
.card--z20 { box-shadow: var(--shadow-z20); }
.card--z24 { box-shadow: var(--shadow-z24); }

/* Interactive lift */
.card--interactive { cursor: pointer; }
.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-z12);
}

/* Accent left bar */
.card--accent-bar::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--duration-base) var(--ease-out);
}
.card--interactive:hover.card--accent-bar::before { transform: scaleY(1); }
.card--accent-bar.lesson::before    { background: var(--lesson-color); }
.card--accent-bar.framework::before { background: var(--framework-color); }
.card--accent-bar.slides::before    { background: var(--slides-color); }
.card--accent-bar.guide::before     { background: var(--guide-color); }


/* ─────────────────────────────────────────────────────────── */
/*  AVATARS                                                    */
/*  Usage: <div class="avatar avatar--md">...</div>           */
/*  Types: icon | letter | image                              */
/*  Sizes: xs | sm | md | lg | xl                            */
/* ─────────────────────────────────────────────────────────── */

.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  overflow: visible;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--gray-100);
}

/* Sizes */
.avatar--xs { width: 24px; height: 24px; font-size: 9px; }
.avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.avatar--md { width: 40px; height: 40px; font-size: 15px; }
.avatar--lg { width: 48px; height: 48px; font-size: 18px; }
.avatar--xl { width: 64px; height: 64px; font-size: 24px; }

/* Inner circle clip */
.avatar > .avatar__inner {
  width: 100%; height: 100%;
  border-radius: var(--radius-pill);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* Image avatar */
.avatar--image > .avatar__inner > img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Letter avatar colors */
.avatar--purple   { background: var(--purple-tint); color: var(--purple-deep); }
.avatar--yellow   { background: var(--yellow-tint); color: var(--yellow-deep); }
.avatar--success  { background: var(--success-tint); color: var(--success-deep); }
.avatar--error    { background: var(--error-tint); color: var(--error-deep); }
.avatar--warning  { background: var(--warning-tint); color: var(--warning-deep); }
.avatar--info     { background: var(--info-tint); color: var(--info-deep); }
.avatar--dark     { background: var(--gray-700); color: #FFFFFF; }

/* Status dot */
.avatar__status {
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface-base);
}
.avatar--xs .avatar__status { width: 7px; height: 7px; }
.avatar--sm .avatar__status { width: 9px; height: 9px; }
.avatar--lg .avatar__status { width: 12px; height: 12px; }
.avatar--xl .avatar__status { width: 16px; height: 16px; }

.avatar__status--online  { background: var(--success); }
.avatar__status--offline { background: var(--gray-400); }
.avatar__status--busy    { background: var(--error); }
.avatar__status--away    { background: var(--warning); }

/* Grouped avatars */
.avatar-group {
  display: flex;
  align-items: center;
}
.avatar-group .avatar {
  box-shadow: 0 0 0 2px var(--surface-base);
}
.avatar-group .avatar + .avatar { margin-left: -10px; }
.avatar-group--sm .avatar + .avatar { margin-left: -8px; }

.avatar-group__count {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--gray-100); color: var(--text-secondary);
  font-size: var(--text-xs); font-weight: 600;
  box-shadow: 0 0 0 2px var(--surface-base);
  margin-left: -10px;
}
.avatar--md .avatar-group__count, .avatar-group .avatar-group__count {
  width: 40px; height: 40px;
}


/* ─────────────────────────────────────────────────────────── */
/*  NAVIGATION                                                 */
/* ─────────────────────────────────────────────────────────── */

nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-height);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-default);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  animation: fadeIn .4s ease forwards;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.nav-right { display: flex; align-items: center; gap: 12px; }

.nav-back {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary); text-decoration: none;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-default);
  transition: var(--transition);
}
.nav-back::before { content: '←'; transition: transform .2s; }
.nav-back:hover { color: var(--purple); border-color: var(--purple-mid); }
.nav-back:hover::before { transform: translateX(-3px); }

/* Primary nav links — shared by Portfolio and Training so both navs match */
.nav-logo img { display: block; height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-8); }
.nav-links a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}
.nav-links a:hover { color: var(--purple); }
.nav-links a.active { color: var(--purple); font-weight: 600; }
@media (max-width: 620px) { .nav-links { gap: var(--space-4); } }


/* ─────────────────────────────────────────────────────────── */
/*  PAGE HEADER                                                */
/* ─────────────────────────────────────────────────────────── */

.page-header {
  padding: var(--space-24) var(--gutter) var(--space-10);
  max-width: var(--max-width); margin: 0 auto;
}

.page-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--purple);
  margin-bottom: var(--space-4);
  display: flex; align-items: center; gap: 10px;
}
.page-eyebrow::before {
  content: ''; display: inline-block;
  width: 28px; height: 1.5px; background: var(--purple);
  transform-origin: left; animation: lineGrow .5s ease .2s both;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1; letter-spacing: var(--tracking-tight);
  margin-bottom: 14px;
}
.page-title em { font-style: italic; color: var(--purple); }

.page-desc {
  font-size: var(--text-lg); color: var(--text-secondary);
  line-height: var(--leading-relaxed); max-width: 500px;
}


/* ─────────────────────────────────────────────────────────── */
/*  SECTION LABEL                                              */
/* ─────────────────────────────────────────────────────────── */

.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--purple);
  border-bottom: 1px solid var(--purple-mid);
  padding-bottom: 8px; margin: var(--space-10) 0 var(--space-4);
}


/* ─────────────────────────────────────────────────────────── */
/*  FORM INPUTS — Outlined / Floating Label                   */
/*  HTML:                                                      */
/*  <div class="input-field">                                  */
/*    <input type="text" id="f1" placeholder=" " />           */
/*    <label for="f1">Label</label>                            */
/*  </div>                                                     */
/*  Modifiers: .input-field--error  .input-field--disabled    */
/*             .input-field--sm                               */
/* ─────────────────────────────────────────────────────────── */

.input-field {
  position: relative;
  width: 100%;
}

/* The input itself */
.input-field__input,
.input-field > input {
  width: 100%;
  padding: 14px 14px 14px 14px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-base);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
  appearance: none;
}

/* Floating label */
.input-field__label,
.input-field > label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-tertiary);
  background: var(--surface-base);
  padding: 0 4px;
  pointer-events: none;
  transition: all var(--duration-base) var(--ease-standard);
  line-height: 1;
}

/* Float up when focused or filled */
.input-field > input:focus + label,
.input-field > input:not(:placeholder-shown) + label,
.input-field > input:focus ~ .input-field__label,
.input-field > input:not(:placeholder-shown) ~ .input-field__label {
  top: 0;
  transform: translateY(-50%);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.input-field > input:focus + label,
.input-field > input:focus ~ .input-field__label {
  color: var(--purple);
}

/* Hover */
.input-field > input:hover:not(:disabled) { border-color: var(--border-strong); }

/* Focus */
.input-field > input:focus {
  border-color: var(--gray-900);
  border-width: 2px;
}

/* Error state */
.input-field--error > input { border-color: var(--error) !important; border-width: 2px; }
.input-field--error > label,
.input-field--error > input:focus + label,
.input-field--error > input:not(:placeholder-shown) + label { color: var(--error); }

/* Disabled state */
.input-field--disabled > input,
.input-field > input:disabled {
  border-style: dashed;
  border-color: var(--border-default);
  color: var(--text-disabled);
  background: var(--gray-50);
  cursor: not-allowed;
}
.input-field--disabled > label,
.input-field > input:disabled + label { color: var(--text-disabled); }

/* Size: small */
.input-field--sm > input { padding: 10px 12px; font-size: var(--text-sm); }
.input-field--sm > label { font-size: var(--text-sm); }
.input-field--sm > input:focus + label,
.input-field--sm > input:not(:placeholder-shown) + label { font-size: 10px; }

/* Adornments */
.input-field--start-adornment > input { padding-left: 44px; }
.input-field--end-adornment > input   { padding-right: 44px; }

.input-field__adornment {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  pointer-events: none;
}
.input-field__adornment--start { left: 14px; }
.input-field__adornment--end   { right: 14px; pointer-events: auto; cursor: pointer; }
.input-field__adornment--end:hover { color: var(--text-secondary); }

/* Help / error text */
.input-field__helper {
  display: flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.4;
}
.input-field__helper--error { color: var(--error); }

/* Legacy: simple form rows still work */
.form-row { margin-bottom: 18px; }
.form-row label {
  display: block; font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-secondary); margin-bottom: 7px;
}
.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body); font-size: var(--text-base); color: var(--text-primary);
  width: 100%; border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  padding: 10px 14px; background: var(--surface-base); outline: none;
  transition: var(--transition); appearance: none;
}
.form-row input:hover { border-color: var(--border-strong); }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-subtle); }
.form-row textarea { resize: vertical; min-height: 80px; line-height: var(--leading-relaxed); }
.form-hint { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 5px; line-height: 1.5; }


/* ─────────────────────────────────────────────────────────── */
/*  CHECKBOX                                                   */
/*  HTML:                                                      */
/*  <label class="checkbox checkbox--primary">                 */
/*    <input type="checkbox" />                                */
/*    <span class="checkbox__control"></span>                  */
/*    <span class="checkbox__label">Label</span>               */
/*  </label>                                                   */
/*  Color modifiers: --primary --info --success --warning --error
/* ─────────────────────────────────────────────────────────── */

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  --cb-color: var(--gray-900);
  --cb-hover-bg: var(--gray-100);
}
.checkbox--primary { --cb-color: var(--purple); --cb-hover-bg: var(--purple-subtle); }
.checkbox--info    { --cb-color: var(--info);   --cb-hover-bg: var(--info-tint); }
.checkbox--success { --cb-color: var(--success); --cb-hover-bg: var(--success-tint); }
.checkbox--warning { --cb-color: var(--warning); --cb-hover-bg: var(--warning-tint); }
.checkbox--error   { --cb-color: var(--error);   --cb-hover-bg: var(--error-tint); }

.checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }

.checkbox__control {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-base);
  transition: all var(--duration-base) var(--ease-standard);
  display: flex; align-items: center; justify-content: center;
}
/* Hover ring */
.checkbox__control::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--duration-fast) var(--ease-standard);
}
.checkbox:hover .checkbox__control::before { background: var(--cb-hover-bg); }

/* Checkmark */
.checkbox__control::after {
  content: '';
  width: 5px; height: 9px;
  border: 2px solid #FFFFFF;
  border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0;
  transition: opacity var(--duration-fast);
}

/* Checked state */
.checkbox input:checked ~ .checkbox__control {
  background: var(--cb-color);
  border-color: var(--cb-color);
}
.checkbox input:checked ~ .checkbox__control::after { opacity: 1; }

/* Disabled */
.checkbox input:disabled ~ .checkbox__control {
  border-color: var(--gray-300);
  background: var(--gray-100);
  cursor: not-allowed;
}
.checkbox input:disabled ~ .checkbox__control::after { border-color: var(--gray-300); }
.checkbox input:disabled:checked ~ .checkbox__control { background: var(--gray-300); border-color: var(--gray-300); }
.checkbox input:disabled ~ .checkbox__label { color: var(--text-disabled); }
.checkbox input:disabled + * { pointer-events: none; }
.checkbox:has(input:disabled) { cursor: not-allowed; }
.checkbox:has(input:disabled):hover .checkbox__control::before { background: transparent; }

/* Focus */
.checkbox input:focus-visible ~ .checkbox__control { box-shadow: 0 0 0 3px var(--cb-hover-bg); }

/* Size: sm */
.checkbox--sm .checkbox__control { width: 16px; height: 16px; }
.checkbox--sm .checkbox__control::after { width: 4px; height: 7px; }
.checkbox--sm .checkbox__label { font-size: var(--text-sm); }

.checkbox__label { font-size: var(--text-base); color: var(--text-primary); line-height: 1.4; }


/* ─────────────────────────────────────────────────────────── */
/*  TOGGLE / SWITCH                                            */
/*  HTML:                                                      */
/*  <label class="toggle toggle--primary">                    */
/*    <input type="checkbox" />                                */
/*    <span class="toggle__track"><span class="toggle__thumb"></span></span>
/*    <span class="toggle__label">Label</span>                 */
/*  </label>                                                   */
/* ─────────────────────────────────────────────────────────── */

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  --tg-color: var(--gray-900);
  --tg-hover-bg: var(--gray-100);
}
.toggle--primary   { --tg-color: var(--purple);  --tg-hover-bg: var(--purple-subtle); }
.toggle--secondary { --tg-color: var(--yellow);  --tg-hover-bg: var(--yellow-subtle); }
.toggle--info      { --tg-color: var(--info);    --tg-hover-bg: var(--info-tint); }
.toggle--success   { --tg-color: var(--success); --tg-hover-bg: var(--success-tint); }
.toggle--warning   { --tg-color: var(--warning); --tg-hover-bg: var(--warning-tint); }
.toggle--error     { --tg-color: var(--error);   --tg-hover-bg: var(--error-tint); }

/* Reverse: label first, then toggle */
.toggle--end { flex-direction: row-reverse; }

.toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle__track {
  position: relative;
  width: 44px; height: 24px;
  background: var(--gray-300);
  border-radius: var(--radius-pill);
  transition: background var(--duration-base) var(--ease-standard);
  flex-shrink: 0;
}
/* Hover ring on track */
.toggle__track::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background var(--duration-fast);
}
.toggle:hover .toggle__track::before { background: var(--tg-hover-bg); }

.toggle__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: var(--shadow-z4);
  transition: transform var(--duration-base) var(--ease-out);
}

/* Checked */
.toggle input:checked ~ .toggle__track { background: var(--tg-color); }
.toggle input:checked ~ .toggle__track .toggle__thumb { transform: translateX(20px); }

/* Disabled */
.toggle input:disabled ~ .toggle__track { background: var(--gray-200); cursor: not-allowed; }
.toggle input:disabled:checked ~ .toggle__track { background: var(--purple-mid); opacity: .5; }
.toggle input:disabled ~ .toggle__label { color: var(--text-disabled); }
.toggle:has(input:disabled) { cursor: not-allowed; }
.toggle:has(input:disabled):hover .toggle__track::before { background: transparent; }

/* Size: sm */
.toggle--sm .toggle__track { width: 36px; height: 20px; }
.toggle--sm .toggle__thumb { width: 14px; height: 14px; }
.toggle--sm input:checked ~ .toggle__track .toggle__thumb { transform: translateX(16px); }
.toggle--sm .toggle__label { font-size: var(--text-sm); }

.toggle__label { font-size: var(--text-base); color: var(--text-primary); }


/* ─────────────────────────────────────────────────────────── */
/*  RADIO                                                      */
/*  HTML:                                                      */
/*  <label class="radio radio--primary">                      */
/*    <input type="radio" name="group" />                     */
/*    <span class="radio__control"></span>                     */
/*    <span class="radio__label">Label</span>                  */
/*  </label>                                                   */
/* ─────────────────────────────────────────────────────────── */

.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  --rd-color: var(--gray-900);
  --rd-hover-bg: var(--gray-100);
}
.radio--primary   { --rd-color: var(--purple);  --rd-hover-bg: var(--purple-subtle); }
.radio--secondary { --rd-color: var(--yellow-deep); --rd-hover-bg: var(--yellow-subtle); }
.radio--info      { --rd-color: var(--info);    --rd-hover-bg: var(--info-tint); }
.radio--success   { --rd-color: var(--success); --rd-hover-bg: var(--success-tint); }
.radio--warning   { --rd-color: var(--warning); --rd-hover-bg: var(--warning-tint); }
.radio--error     { --rd-color: var(--error);   --rd-hover-bg: var(--error-tint); }

.radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.radio__control {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-base);
  transition: all var(--duration-base) var(--ease-standard);
  display: flex; align-items: center; justify-content: center;
}
/* Hover ring */
.radio__control::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: transparent;
  transition: background var(--duration-fast);
}
.radio:hover .radio__control::before { background: var(--rd-hover-bg); }

/* Inner dot */
.radio__control::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  opacity: 0;
  transition: opacity var(--duration-fast), transform var(--duration-base) var(--ease-out);
  transform: scale(0);
}

/* Checked */
.radio input:checked ~ .radio__control {
  border-color: var(--rd-color);
  background: var(--rd-color);
}
.radio input:checked ~ .radio__control::after { opacity: 1; transform: scale(1); }

/* Disabled */
.radio input:disabled ~ .radio__control { border-color: var(--gray-300); background: var(--gray-100); cursor: not-allowed; }
.radio input:disabled:checked ~ .radio__control { background: var(--gray-300); border-color: var(--gray-300); }
.radio input:disabled ~ .radio__label { color: var(--text-disabled); }
.radio:has(input:disabled) { cursor: not-allowed; }
.radio:has(input:disabled):hover .radio__control::before { background: transparent; }

/* Focus */
.radio input:focus-visible ~ .radio__control { box-shadow: 0 0 0 3px var(--rd-hover-bg); }

/* Size: sm */
.radio--sm .radio__control { width: 16px; height: 16px; }
.radio--sm .radio__control::after { width: 6px; height: 6px; }
.radio--sm .radio__label { font-size: var(--text-sm); }

.radio__label { font-size: var(--text-base); color: var(--text-primary); }


/* ─────────────────────────────────────────────────────────── */
/*  ACCORDION                                                  */
/*  HTML:                                                      */
/*  <div class="accordion">                                    */
/*    <div class="accordion__item accordion__item--open">      */
/*      <button class="accordion__trigger">                    */
/*        <span>Item 1</span>                                  */
/*        <span class="accordion__trigger-meta">Subtitle</span>*/
/*        <span class="accordion__icon">⌄</span>              */
/*      </button>                                              */
/*      <div class="accordion__content"><p>Body</p></div>      */
/*    </div>                                                   */
/*  </div>                                                     */
/* ─────────────────────────────────────────────────────────── */

.accordion {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-base);
}

.accordion__item { border-bottom: 1px solid var(--border-default); }
.accordion__item:last-child { border-bottom: none; }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  transition: background var(--duration-fast);
}
.accordion__trigger:hover { background: var(--gray-50); }

.accordion__trigger-meta {
  flex: 1;
  font-weight: 400;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.accordion__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: transform var(--duration-base) var(--ease-out);
  font-style: normal;
}
.accordion__icon::before { content: ''; display: block; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); }

.accordion__item--open .accordion__icon { transform: rotate(180deg); }
.accordion__item--open .accordion__icon::before { transform: rotate(45deg) translateY(-3px); }

.accordion__content {
  display: none;
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.accordion__item--open .accordion__content { display: block; }


/* ─────────────────────────────────────────────────────────── */
/*  ALERT / BANNER                                             */
/*  HTML:                                                      */
/*  <div class="alert alert--filled alert--info">             */
/*    <span class="alert__icon">ℹ</span>                      */
/*    <span class="alert__message">This is an alert</span>    */
/*    <div class="alert__actions">                             */
/*      <button class="alert__action">Action</button>         */
/*      <button class="alert__dismiss">Dismiss</button>       */
/*    </div>                                                   */
/*    <button class="alert__close">✕</button>                 */
/*  </div>                                                     */
/* ─────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  --al-color: var(--info);
  --al-bg: var(--info-tint);
  --al-text: var(--info-deep);
}

.alert--info    { --al-color: var(--info);    --al-bg: var(--info-tint);    --al-text: var(--info-deep); }
.alert--success { --al-color: var(--success); --al-bg: var(--success-tint); --al-text: var(--success-deep); }
.alert--warning { --al-color: var(--warning); --al-bg: var(--warning-tint); --al-text: var(--warning-deep); }
.alert--error   { --al-color: var(--error);   --al-bg: var(--error-tint);   --al-text: var(--error-deep); }

/* Filled variant */
.alert--filled {
  background: var(--al-color);
  color: #FFFFFF;
}
.alert--filled .alert__icon { color: #FFFFFF; }
.alert--filled .alert__close,
.alert--filled .alert__dismiss { color: rgba(255,255,255,.8); }
.alert--filled .alert__dismiss:hover { color: #FFFFFF; }
.alert--filled .alert__action {
  background: rgba(0,0,0,.2);
  color: #FFFFFF;
  border-color: transparent;
}

/* Outlined variant */
.alert--outlined {
  background: var(--al-bg);
  color: var(--al-text);
  border: 1px solid color-mix(in srgb, var(--al-color) 30%, transparent);
}
.alert--outlined .alert__icon { color: var(--al-color); }

.alert__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.alert__message { flex: 1; }

.alert__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.alert__action {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: none;
  cursor: pointer;
  color: inherit;
  transition: var(--transition-fast);
}
.alert__action:hover { opacity: .8; }

.alert__dismiss {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: .8;
  transition: var(--transition-fast);
}
.alert__dismiss:hover { opacity: 1; }

.alert__close {
  flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: .7;
  font-size: 16px; line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  transition: var(--transition-fast);
}
.alert__close:hover { opacity: 1; }


/* ─────────────────────────────────────────────────────────── */
/*  TABS                                                       */
/*  HTML:                                                      */
/*  <div class="tabs">                                         */
/*    <div class="tabs__list" role="tablist">                  */
/*      <button class="tabs__tab tabs__tab--active">Profile</button>
/*      <button class="tabs__tab">Followers</button>           */
/*    </div>                                                   */
/*    <div class="tabs__panels">...</div>                      */
/*  </div>                                                     */
/* ─────────────────────────────────────────────────────────── */

.tabs { width: 100%; }

.tabs__list {
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--border-default);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
}
.tabs__list::-webkit-scrollbar { display: none; }

/* Scrollable variant */
.tabs--scroll .tabs__list { padding-right: var(--space-10); }
.tabs__scroll-arrow {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--surface-base) 40%);
  color: var(--text-secondary);
  border: none; cursor: pointer; font-size: 18px;
  padding-right: var(--space-2);
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-base), border-color var(--duration-base);
  margin-bottom: -1px;
}
.tabs__tab:hover { color: var(--text-primary); }
.tabs__tab--active {
  color: var(--text-primary);
  font-weight: 700;
  border-bottom-color: var(--gray-900);
}
.tabs__tab--active:hover { color: var(--text-primary); }

/* Tab icon */
.tabs__tab-icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  opacity: .6;
  flex-shrink: 0;
}
.tabs__tab--active .tabs__tab-icon { opacity: 1; }

/* Tab panels */
.tabs__panels { padding: var(--space-5) 0; }
.tabs__panel { display: none; }
.tabs__panel--active { display: block; }

/* Pill style tabs variant */
.tabs--pill .tabs__list {
  border-bottom: none;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  gap: var(--space-1);
}
.tabs--pill .tabs__tab {
  border-bottom: none;
  border-radius: var(--radius-md);
  margin-bottom: 0;
  font-size: var(--text-sm);
}
.tabs--pill .tabs__tab--active {
  background: var(--surface-base);
  box-shadow: var(--shadow-z4);
  color: var(--text-primary);
}


/* ─────────────────────────────────────────────────────────── */
/*  MODAL / DIALOG                                             */
/* ─────────────────────────────────────────────────────────── */

.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(26, 19, 37, .55); backdrop-filter: blur(4px);
  z-index: 200; align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.open { display: flex; animation: fadeIn .25s ease forwards; }

.modal {
  background: var(--surface-overlay);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  position: relative;
  animation: scaleIn .28s var(--ease-out) forwards;
  box-shadow: var(--shadow-dialog);
}

.modal__icon {
  width: 36px; height: 36px; margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

.modal h2 {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700;
  color: var(--text-primary); margin-bottom: var(--space-3);
}

.modal__body {
  font-size: var(--text-base); color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-6);
}

.modal__actions {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}

.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; color: var(--text-tertiary);
  cursor: pointer; font-size: 1.1rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: var(--transition);
}
.modal-close:hover { background: var(--gray-100); color: var(--text-primary); }


/* ─────────────────────────────────────────────────────────── */
/*  MARKDOWN CONTENT                                           */
/* ─────────────────────────────────────────────────────────── */

.md-content { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.8; }

.md-content h1 {
  font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700;
  color: var(--text-primary); margin: 28px 0 12px; line-height: 1.2;
}
.md-content h2 {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600;
  color: var(--text-primary); margin: 24px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border-default);
}
.md-content h3 {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600;
  color: var(--text-primary); margin: 20px 0 8px;
}
.md-content h1:first-child, .md-content h2:first-child { margin-top: 0; }
.md-content p  { margin-bottom: 14px; }
.md-content p:last-child { margin-bottom: 0; }
.md-content strong { color: var(--text-primary); font-weight: 600; }
.md-content em { font-style: italic; }
.md-content code {
  font-family: var(--font-mono); font-size: .82em;
  background: var(--gray-100); padding: 2px 6px;
  border-radius: var(--radius-sm); color: var(--purple-deep);
}
.md-content pre {
  background: var(--gray-900); border-radius: var(--radius-lg);
  padding: 20px 24px; margin: 16px 0; overflow-x: auto;
}
.md-content pre code {
  background: none; color: #E8E0FF; font-size: .82rem;
  padding: 0; border-radius: 0; line-height: 1.7;
}
.md-content ul, .md-content ol { padding-left: 22px; margin-bottom: 14px; }
.md-content li { margin-bottom: 6px; line-height: 1.65; }
.md-content blockquote {
  border-left: 3px solid var(--purple-mid); margin: 16px 0;
  padding: 12px 20px; background: var(--purple-subtle); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.md-content blockquote p { color: var(--purple); margin-bottom: 0; font-style: italic; }
.md-content hr { border: none; border-top: 1px solid var(--border-default); margin: 24px 0; }
.md-content table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: var(--text-sm); }
.md-content th {
  background: var(--gray-50); font-weight: 600; color: var(--text-primary);
  padding: 8px 12px; border: 1px solid var(--border-default); text-align: left;
}
.md-content td { padding: 8px 12px; border: 1px solid var(--border-default); }
.md-content tr:nth-child(even) td { background: var(--gray-50); }
.md-content a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }


/* ─────────────────────────────────────────────────────────── */
/*  CHART                                                      */
/* ─────────────────────────────────────────────────────────── */

/* Card wrapper */
.chart-card {
  background: var(--surface-base);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-z4);
  border: 1px solid var(--border-default);
}

/* Header */
.chart-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.chart-header__text { flex: 1; min-width: 0; }
.chart-title {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 600;
  color: var(--text-primary); margin: 0;
}
.chart-subtitle {
  font-size: var(--text-sm); color: var(--text-secondary); margin: 2px 0 0;
}
.chart-action {
  width: 28px; height: 28px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); border-radius: var(--radius-md); flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.chart-action:hover { background: var(--gray-100); color: var(--text-primary); }

/* Body */
.chart-body { position: relative; }
.chart-body svg { display: block; }

/* Legend */
.chart-legend {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-top: 16px;
}
.chart-legend--top { margin-top: 0; margin-bottom: 12px; justify-content: flex-end; }
.chart-legend__item {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); color: var(--text-secondary);
  white-space: nowrap;
}
.chart-legend__dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.chart-legend__dash {
  width: 16px; height: 3px; border-radius: 2px; flex-shrink: 0;
}

/* Donut center label */
.chart-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.chart-donut-center__label {
  font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 2px;
}
.chart-donut-center__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: 700;
  color: var(--text-primary); line-height: 1;
}

/* Gauge labels */
.chart-gauge-label {
  font-family: var(--font-mono); font-size: 10px; color: var(--chart-label);
}

/* Axis labels (line / bar charts) */
.chart-axis-label {
  font-family: var(--font-mono); font-size: 10px;
  fill: var(--chart-label); /* used on SVG text */
}


/* ─────────────────────────────────────────────────────────── */
/*  SIDESHEET                                                  */
/* ─────────────────────────────────────────────────────────── */

/* Overlay backdrop */
.sidesheet-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(26, 19, 37, 0.45);
  display: flex; justify-content: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.sidesheet-overlay.open { opacity: 1; pointer-events: all; }
.sidesheet-overlay--left { justify-content: flex-start; }

/* Panel */
.sidesheet {
  width: 480px; max-width: 100vw; height: 100%;
  background: var(--surface-base);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  box-shadow: var(--shadow-z20);
}
.sidesheet-overlay.open .sidesheet { transform: translateX(0); }
.sidesheet-overlay--left .sidesheet { transform: translateX(-100%); }
.sidesheet-overlay--left.open .sidesheet { transform: translateX(0); }

/* Sizes */
.sidesheet--narrow { width: 360px; }
.sidesheet--wide   { width: 720px; }
.sidesheet--full   { width: 100vw; }

/* Header */
.sidesheet__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}
.sidesheet__title {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 600;
  color: var(--text-primary); margin: 0;
}
.sidesheet__close {
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); border-radius: var(--radius-md);
  font-size: 18px; line-height: 1; flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.sidesheet__close:hover { background: var(--gray-100); color: var(--text-primary); }

/* Body */
.sidesheet__body {
  flex: 1; overflow-y: auto;
  padding: 24px;
  color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed);
}

/* Footer */
.sidesheet__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-default);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────── */
/*  TOAST                                                      */
/* ─────────────────────────────────────────────────────────── */

.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--gray-900); color: #FFFFFF;
  padding: 12px 20px; border-radius: var(--radius-lg);
  font-size: var(--text-sm); display: flex; align-items: center; gap: 10px;
  z-index: 300; opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .3s; pointer-events: none;
  box-shadow: var(--shadow-z16);
}
.toast.show { opacity: 1; transform: translateY(0); }


/* ─────────────────────────────────────────────────────────── */
/*  FOOTER                                                     */
/* ─────────────────────────────────────────────────────────── */

footer { background: var(--gray-900); padding: var(--space-10) var(--gutter); }

.footer-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.footer-inner p    { font-size: var(--text-sm); color: rgba(255, 255, 255, .3); }
.footer-inner span { font-size: var(--text-sm); color: rgba(255, 255, 255, .2); }


/* ─────────────────────────────────────────────────────────── */
/*  RESPONSIVE                                                 */
/* ─────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  :root { --gutter: 24px; }
}
@media (max-width: 620px) {
  :root { --gutter: 16px; }
  .modal { padding: var(--space-6) var(--space-5); }
}