/* ========================================
   Page Layout — Sidebar + Content Grid
   ======================================== */

.page-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  width: 100%;
}

.sidebar-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: var(--stroke-border) solid var(--border-default);
  background: var(--bg-default);
  z-index: 10;
  scrollbar-width: thin;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 4px;
}

.sidebar-nav-inner {
  display: flex;
  flex-direction: column;
  padding: var(--space-300) 0;
}

.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  padding: var(--space-100) 0;
}

.sidebar-nav-heading {
  padding: var(--space-200) var(--space-400);
  font-family: var(--font-sans);
  font-size: var(--text-body-small);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sidebar-nav .menu-item {
  padding: var(--space-100) var(--space-400);
  font-size: var(--text-body-small);
  border-radius: 0;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav .menu-item:hover {
  color: var(--text-default);
  background: var(--bg-default-hover);
}

.sidebar-nav .menu-item.active {
  color: var(--text-default);
  font-weight: var(--weight-semibold);
  background: var(--bg-default-hover);
  border-right: 2px solid var(--border-brand);
}

.page-content {
  min-width: 0;
  overflow-x: hidden;
}

.hamburger {
  display: none;
  position: fixed;
  top: var(--space-300);
  left: var(--space-300);
  z-index: 1001;
  width: 40px;
  height: 40px;
  padding: 0;
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  background: var(--bg-default);
  color: var(--icon-default);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .page-layout {
    grid-template-columns: 1fr;
  }
  .sidebar-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    z-index: 1000;
    background: var(--bg-default);
    border-right: var(--stroke-border) solid var(--border-default);
    box-shadow: var(--shadow-300);
  }
  .sidebar-nav.open {
    display: block;
    overflow-y: auto;
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--bg-blanket);
  }
  .sidebar-overlay.open {
    display: block;
  }
}

/* ========================================
   Body Scroll Lock
   ======================================== */

body.overlay-open {
  overflow: hidden;
}

/* ========================================
   Theme Toggle
   ======================================== */

.theme-toggle {
  position: fixed;
  top: var(--space-400);
  right: var(--space-400);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--space-200);
  padding: var(--space-200) var(--space-400);
  background-color: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-body-small);
  color: var(--text-default);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-toggle:hover {
  background-color: var(--bg-secondary);
}

.theme-toggle .toggle-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
  transition: opacity 0.2s ease;
}

[data-theme="light"] .theme-toggle .moon-icon,
:root:not([data-theme]) .theme-toggle .moon-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle .sun-icon {
  display: none;
}

/* ========================================
   Buttons
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  padding: var(--space-300) var(--space-400);
  border-radius: var(--radius-full);
  border: var(--stroke-border) solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.85;
}

.btn-brand {
  background-color: var(--bg-brand);
  color: var(--text-on-brand);
}

.btn-neutral {
  background-color: var(--bg-neutral-tertiary);
  color: var(--text-default);
}

.btn-group {
  display: flex;
  gap: var(--space-400);
  align-items: center;
}

.btn-group .btn {
  flex: 1 0 0;
}

/* ========================================
   Navigation Pill
   ======================================== */

.nav-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-200);
  border-radius: var(--radius-200);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--text-default);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.nav-pill:hover {
  background-color: var(--bg-secondary);
}

.nav-pill.active {
  background-color: var(--bg-brand-tertiary);
  color: var(--text-on-brand-secondary);
}

.nav-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200);
  align-items: center;
}

/* ========================================
   Text Content — Title (Hero)
   ======================================== */

.text-content-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.text-content-title.align-center {
  align-items: center;
  text-align: center;
}

.text-content-title .title {
  font-family: var(--font-sans);
  font-size: var(--text-title-hero);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -2.16px;
  color: var(--text-default);
}

.text-content-title .subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--text-secondary);
}

/* ========================================
   Text Content — Heading
   ======================================== */

.text-content-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.text-content-heading.align-center {
  align-items: center;
  text-align: center;
}

.text-content-heading .heading {
  font-family: var(--font-sans);
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.48px;
  color: var(--text-default);
}

.text-content-heading .subheading {
  font-family: var(--font-sans);
  font-size: var(--text-subheading);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--text-secondary);
}

/* ========================================
   Body Text
   ======================================== */

.body-text {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-default);
}

.body-text-secondary {
  color: var(--text-secondary);
}

.body-strong {
  font-weight: var(--weight-semibold);
}

/* ========================================
   Input / Form Fields
   ======================================== */

.input-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  align-items: flex-start;
}

.input-field label {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-default);
}

.input-field .input {
  width: 100%;
  min-width: 120px;
  padding: var(--space-300) var(--space-400);
  background-color: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--text-default);
  overflow: hidden;
}

.input-field .input::placeholder {
  color: var(--text-tertiary);
}

.textarea-field .textarea {
  width: 100%;
  min-width: 120px;
  min-height: 80px;
  padding: var(--space-300) var(--space-400);
  background-color: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-default);
  resize: vertical;
}

.textarea-field .textarea::placeholder {
  color: var(--text-tertiary);
}

/* ========================================
   Form Newsletter
   ======================================== */

.form-newsletter {
  display: flex;
  gap: var(--space-300);
  align-items: flex-start;
  width: 338px;
  max-width: 100%;
}

.form-newsletter .input-field {
  flex: 1 0 0;
}

/* ========================================
   Form Contact
   ======================================== */

.form-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  align-items: flex-start;
  min-width: 320px;
  padding: var(--space-600);
  background-color: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
}

.form-contact .input-field,
.form-contact .textarea-field {
  width: 100%;
}

.form-contact .btn-group {
  width: 100%;
}

/* ========================================
   Image Placeholder
   ======================================== */

.image-placeholder {
  background-color: var(--color-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: var(--text-body-small);
  overflow: hidden;
  position: relative;
}

.image-placeholder::after {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  border: 2px solid var(--text-tertiary);
  border-radius: 4px;
  opacity: 0.3;
}

/* ========================================
   Header
   ======================================== */

.ds-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-600);
  padding: var(--space-800);
  background-color: var(--bg-default);
  border-bottom: var(--stroke-border) solid var(--border-default);
  width: 100%;
  max-width: var(--device-width);
  overflow: hidden;
}

.ds-header .logo-mark {
  display: flex;
  align-items: center;
  gap: var(--space-600);
  flex-shrink: 0;
}

.ds-header .logo-mark img {
  height: 35px;
  width: auto;
}

.ds-header .nav-pill-list {
  flex: 1 0 0;
  justify-content: flex-end;
}

.ds-header .header-auth {
  display: flex;
  gap: var(--space-300);
  align-items: center;
  flex-shrink: 0;
}

.ds-header .header-auth .btn {
  flex: 1 0 0;
}

/* ========================================
   Footer
   ======================================== */

.ds-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-400);
  align-items: flex-start;
  padding: var(--space-800) var(--space-800) var(--space-4000);
  background-color: var(--bg-default);
  border-top: var(--stroke-border) solid var(--border-default);
  width: 100%;
  max-width: var(--device-width);
  overflow: hidden;
}

.ds-footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  align-items: flex-start;
  min-width: 240px;
  width: 262px;
  flex-shrink: 0;
}

.ds-footer .footer-brand img {
  height: 35px;
  width: auto;
}

.ds-footer .social-links {
  display: flex;
  gap: var(--space-400);
  align-items: center;
}

.ds-footer .social-links a {
  display: block;
  width: 24px;
  height: 24px;
}

.ds-footer .social-links img {
  width: 100%;
  height: 100%;
}

.ds-footer .footer-columns {
  display: flex;
  gap: var(--space-400);
  flex: 1;
}

.text-link-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  align-items: flex-start;
  width: 262px;
}

.text-link-list .list-title {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--text-default);
  padding-bottom: var(--space-400);
}

.text-link-list a {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-default);
  transition: color 0.2s ease;
}

.text-link-list a:hover {
  color: var(--text-secondary);
}

/* ========================================
   Hero — Shared
   ======================================== */

.ds-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4000) var(--space-600);
  width: 100%;
  max-width: var(--device-width);
  position: relative;
}

.ds-hero.bg-secondary {
  background-color: var(--bg-secondary);
}

.ds-hero.has-gap {
  gap: var(--space-800);
}

/* Hero Image variant */
.ds-hero.hero-image {
  overflow: hidden;
}

.ds-hero.hero-image .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ds-hero.hero-image .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-hero.hero-image .hero-bg .scrim {
  position: absolute;
  inset: 0;
  background-color: var(--bg-scrim);
}

.ds-hero.hero-image > *:not(.hero-bg) {
  position: relative;
  z-index: 1;
}

/* ========================================
   Panel Sections — Shared
   ======================================== */

.ds-panel {
  display: flex;
  gap: var(--space-1200);
  align-items: center;
  padding: var(--space-1600);
  background-color: var(--bg-default);
  width: 100%;
  max-width: var(--device-width);
}

.ds-panel .panel-image {
  width: 484px;
  height: 350px;
  flex-shrink: 0;
}

.ds-panel .panel-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  align-items: flex-start;
  flex-shrink: 0;
  width: 484px;
  min-width: 300px;
}

/* Panel Image (full width) */
.ds-panel-full {
  display: flex;
  flex-direction: column;
  padding: var(--space-1600);
  background-color: var(--bg-default);
  width: 100%;
  max-width: var(--device-width);
}

.ds-panel-full .panel-image {
  width: 100%;
  height: 349px;
}

/* Panel Image Double */
.ds-panel-double {
  display: flex;
  gap: var(--space-1200);
  padding: var(--space-1600);
  background-color: var(--bg-default);
  width: 100%;
  max-width: var(--device-width);
  height: 400px;
}

.ds-panel-double .panel-image {
  flex: 1 0 0;
  height: 100%;
}

/* ========================================
   Card Grid — Shared
   ======================================== */

.ds-card-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1200);
  padding: var(--space-1600);
  background-color: var(--bg-default);
  width: 100%;
  max-width: var(--device-width);
}

.ds-card-grid.align-center {
  align-items: center;
}

.ds-card-grid .cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1600);
  width: 100%;
}

.ds-card-grid .cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  width: 100%;
}

/* ========================================
   Card — Icon Variant
   ======================================== */

.card-icon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-600);
  align-items: flex-start;
  min-width: 240px;
  flex: 1 0 0;
}

.card-icon .card-icon-img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.card-icon .card-icon-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  flex: 1 0 0;
  min-width: 160px;
}

.card-icon .card-icon-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.card-icon .card-icon-text .card-title {
  font-family: var(--font-sans);
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.48px;
  color: var(--text-default);
}

.card-icon .card-icon-text .card-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* ========================================
   Card — Content List Variant
   ======================================== */

.card-content-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-600);
  align-items: flex-start;
  min-width: 240px;
  padding: var(--space-600);
  background-color: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  width: 100%;
}

.card-content-list .card-image {
  width: 160px;
  height: 160px;
  min-width: 160px;
  flex-shrink: 0;
}

.card-content-list .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  flex: 1 0 0;
  min-width: 160px;
}

.card-content-list .card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.card-content-list .card-title {
  font-family: var(--font-sans);
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.48px;
  color: var(--text-default);
}

.card-content-list .card-description {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* ========================================
   Pricing Card
   ======================================== */

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  align-items: center;
  min-width: 240px;
  padding: var(--space-800);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  background-color: var(--bg-default);
  overflow: hidden;
  flex: 1 0 0;
}

.pricing-card.brand {
  background-color: var(--bg-brand);
  border-color: var(--border-brand);
  color: var(--text-on-brand);
}

.pricing-card .pricing-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  align-items: center;
  width: 100%;
}

.pricing-card .pricing-title {
  font-family: var(--font-sans);
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.48px;
  text-align: center;
  color: var(--text-default);
}

.pricing-card.brand .pricing-title {
  color: var(--text-on-brand);
}

.text-price {
  display: flex;
  align-items: flex-end;
}

.text-price .currency {
  font-family: var(--font-sans);
  font-size: var(--text-subtitle-small);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.48px;
}

.text-price .amount {
  font-family: var(--font-sans);
  font-size: var(--text-title-page);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.96px;
}

.text-price .label {
  font-family: var(--font-sans);
  font-size: var(--text-body-small);
  font-weight: var(--weight-regular);
  line-height: 1.8;
}

.pricing-card .pricing-list {
  list-style: disc;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  width: 100%;
}

.pricing-card .pricing-list li {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.pricing-card.brand .pricing-list li {
  color: var(--text-on-brand);
}

.pricing-card .btn {
  width: 100%;
}

.pricing-card.brand .btn {
  background-color: var(--bg-neutral-tertiary);
  border-color: var(--border-neutral);
  color: var(--text-default);
}

/* ========================================
   Accordion
   ======================================== */

.ds-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  width: 100%;
  max-width: 640px;
}

.accordion-item {
  display: flex;
  align-items: center;
  padding: var(--space-400);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  background-color: var(--bg-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.accordion-item .accordion-title {
  display: flex;
  gap: var(--space-200);
  align-items: center;
  flex: 1;
}

.accordion-item .accordion-title span {
  flex: 1;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--text-default);
}

.accordion-item .accordion-title .chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.accordion-item.open {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-200);
  background-color: var(--bg-default);
}

.accordion-item.open .accordion-title {
  width: 100%;
}

.accordion-item.open .accordion-title .chevron {
  transform: rotate(180deg);
}

.accordion-item .accordion-content {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-default);
  width: 100%;
}

.accordion-item.open .accordion-content {
  display: block;
}

/* ========================================
   Page Sections — Shared
   ======================================== */

.ds-page-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-800);
  align-items: center;
  padding: var(--space-800);
  background-color: var(--bg-default);
  width: 100%;
  max-width: var(--device-width);
}

.ds-page-section.gap-sm {
  gap: var(--space-400);
}

/* ========================================
   Section Divider (showcase only)
   ======================================== */

.section-divider {
  width: 100%;
  max-width: var(--device-width);
  padding: var(--space-600) var(--space-800);
  border-bottom: var(--stroke-border) solid var(--border-default);
}

.section-divider h2 {
  font-family: var(--font-sans);
  font-size: var(--text-title-page);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-default);
  letter-spacing: -0.96px;
}

.section-divider h2 code {
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
  font-size: 0.5em;
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  vertical-align: middle;
}

.section-divider h2 code.ref-class {
  color: var(--blue-500);
}

.section-divider h2 code.ref-other {
  color: var(--green-500);
}

.section-divider h2 code.ref-token {
  color: var(--yellow-600);
  margin-left: var(--space-200);
}

.section-divider p {
  font-family: var(--font-sans);
  font-size: var(--text-subheading);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--text-secondary);
  margin-top: var(--space-200);
}

.variant-label {
  width: 100%;
  max-width: var(--device-width);
  padding: var(--space-300) var(--space-800);
  font-family: var(--font-mono);
  font-size: var(--text-body-small);
  color: var(--text-secondary);
  margin: 0;
}

.ref-class {
  color: var(--blue-500);
}

.ref-token {
  color: var(--yellow-600);
}

.ref-other {
  color: var(--green-500);
}

/* ========================================
   Buttons — showcase variants
   ======================================== */

.btn-subtle {
  background-color: transparent;
  border-color: var(--border-default);
  color: var(--text-default);
}

.btn-subtle:hover {
  border-color: var(--border-secondary);
}

.btn-danger {
  background-color: #ec221f;
  border: var(--stroke-border) solid #c00f0c;
  color: #fee9e7;
}

.btn-sm {
  padding: var(--space-200) var(--space-300);
  font-size: var(--text-body);
}

.btn:disabled,
.btn.disabled,
.btn:disabled:hover,
.btn.disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   Avatar
   ======================================== */

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--color-placeholder);
  flex-shrink: 0;
}

.avatar-md {
  width: 32px;
  height: 32px;
}

.avatar-sm {
  width: 24px;
  height: 24px;
}

.avatar-square {
  border-radius: var(--radius-200);
}

.avatar-initial {
  background-color: var(--bg-brand);
  color: var(--text-on-brand);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-small);
  line-height: var(--leading-none);
}

.avatar-md.avatar-initial {
  font-size: 0.75rem;
}

.avatar-sm.avatar-initial {
  font-size: 0.625rem;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-group {
  display: flex;
  flex-direction: row;
}

.avatar-group .avatar {
  border: 2px solid var(--bg-default);
  box-sizing: content-box;
}

.avatar-group .avatar:not(:first-child) {
  margin-left: calc(-1 * var(--space-200));
}

/* ========================================
   Tags
   ======================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-200) var(--space-200) var(--space-200) var(--space-300);
  border-radius: var(--radius-200);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.tag-brand {
  background-color: var(--bg-brand);
  color: var(--text-on-brand);
}
.tag-brand:hover { background-color: var(--bg-brand-hover); }

.tag-brand.secondary {
  background-color: var(--bg-brand-tertiary);
  color: var(--text-on-brand-tertiary);
}
.tag-brand.secondary:hover { background-color: var(--bg-brand-tertiary-hover); }

.tag-danger {
  background-color: var(--bg-danger);
  color: var(--text-on-danger);
}
.tag-danger:hover { background-color: var(--bg-danger-hover); }

.tag-danger.secondary {
  background-color: var(--bg-danger-secondary);
  color: var(--text-on-danger-secondary);
}
.tag-danger.secondary:hover { background-color: var(--bg-danger-secondary-hover); }

.tag-positive {
  background-color: var(--bg-positive);
  color: var(--text-on-positive);
}
.tag-positive:hover { background-color: var(--bg-positive-hover); }

.tag-positive.secondary {
  background-color: var(--bg-positive-secondary);
  color: var(--text-on-positive-secondary);
}
.tag-positive.secondary:hover { background-color: var(--bg-positive-secondary-hover); }

.tag-warning {
  background-color: var(--bg-warning);
  color: var(--text-on-warning);
}
.tag-warning:hover { background-color: var(--bg-warning-hover); }

.tag-warning.secondary {
  background-color: var(--bg-warning-secondary);
  color: var(--text-on-warning-secondary);
}
.tag-warning.secondary:hover { background-color: var(--bg-warning-secondary-hover); }

.tag-neutral {
  background-color: var(--bg-default-tertiary);
  color: var(--text-default);
}
.tag-neutral:hover { background-color: var(--bg-default-tertiary-hover); }

.tag-neutral.secondary {
  background-color: var(--bg-secondary);
  color: var(--text-default);
}
.tag-neutral.secondary:hover { background-color: var(--bg-secondary-hover); }

.tag .tag-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  flex-shrink: 0;
  cursor: pointer;
  line-height: 0;
}

.tag .tag-dismiss svg {
  width: 16px;
  height: 16px;
}

.tag .tag-dismiss:hover {
  opacity: 0.7;
}

.tag-brand .tag-dismiss { color: var(--icon-on-brand); }
.tag-brand.secondary .tag-dismiss { color: var(--icon-on-brand-tertiary); }
.tag-danger .tag-dismiss { color: var(--icon-on-danger); }
.tag-danger.secondary .tag-dismiss { color: var(--icon-on-danger-secondary); }
.tag-positive .tag-dismiss { color: var(--icon-on-positive); }
.tag-positive.secondary .tag-dismiss { color: var(--icon-on-positive-secondary); }
.tag-warning .tag-dismiss { color: var(--icon-on-warning); }
.tag-warning.secondary .tag-dismiss { color: var(--icon-on-warning-secondary); }
.tag-neutral .tag-dismiss { color: var(--icon-default); }
.tag-neutral.secondary .tag-dismiss { color: var(--icon-default); }

/* ========================================
   Tabs
   ======================================== */

.ds-tabs {
  display: flex;
  overflow: hidden;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-100) var(--space-300);
  border-bottom: var(--stroke-border) solid #b2b2b2;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: #767676;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.tab:hover {
  color: var(--text-default);
}

.tab.active {
  border-bottom-color: #303030;
  color: #303030;
}

.tab-content {
  width: 100%;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ========================================
   Tooltip
   ======================================== */

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  z-index: 10;
  background-color: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  padding: var(--space-200) var(--space-300);
  box-shadow:
    0 1px 4px rgba(12, 12, 13, 0.1),
    0 1px 4px rgba(12, 12, 13, 0.05);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-family: var(--font-sans);
}

.tooltip .tooltip-title {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  color: var(--text-default);
}

.tooltip .tooltip-body {
  display: block;
  font-weight: var(--weight-regular);
  font-size: var(--text-body-small);
  color: var(--text-default);
}

.tooltip-wrapper:hover .tooltip,
.tooltip.show {
  opacity: 1;
}

.tooltip.top {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.bottom {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.left {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip.right {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

/* ========================================
   Notification
   ======================================== */

.notification {
  display: flex;
  gap: var(--space-300);
  align-items: flex-start;
  padding: var(--space-400);
  border: var(--stroke-border) solid var(--border-neutral);
  border-radius: var(--radius-200);
  background-color: var(--bg-default);
  width: 300px;
  position: relative;
  font-family: var(--font-sans);
}

.notification-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-default);
}

.notification-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  flex: 1;
  min-width: 0;
}

.notification-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-default);
}

.notification-body {
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-default);
}

.notification-actions {
  margin-top: var(--space-400);
}

.notification-dismiss {
  position: absolute;
  top: var(--space-200);
  right: var(--space-200);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notification.alert {
  background-color: #fee9e7;
  border-color: #ec221f;
}

.notification.alert .notification-title,
.notification.alert .notification-body {
  color: #900b09;
}

.notification.alert .btn {
  background-color: #ec221f;
  border-color: #c00f0c;
  color: #fee9e7;
}

/* ========================================
   Dialog
   ======================================== */

.dialog-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-scrim);
  backdrop-filter: blur(2px);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.dialog-overlay.open {
  opacity: 1;
  visibility: visible;
}

.dialog-body {
  background-color: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  padding: var(--space-800);
  max-width: 600px;
  width: calc(100% - 48px);
  box-shadow:
    0 16px 32px rgba(12, 12, 13, 0.1),
    0 4px 4px rgba(12, 12, 13, 0.05);
  position: relative;
  font-family: var(--font-sans);
}

.dialog-body .dialog-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.dialog-body .dialog-heading {
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.48px;
  color: var(--text-default);
}

.dialog-body .dialog-description {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-default);
}

.dialog-body .dialog-actions {
  display: flex;
  gap: var(--space-400);
  justify-content: flex-end;
  margin-top: var(--space-600);
}

.dialog-body .dialog-dismiss {
  position: absolute;
  top: 7px;
  right: 7px;
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--space-200);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
}

/* ========================================
   Panel Header & Footer (shared)
   ======================================== */

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-600);
  border-bottom: var(--stroke-border) solid var(--border-default);
  flex-shrink: 0;
}

.panel-header .panel-title {
  font-family: var(--font-sans);
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-default);
  margin: 0;
}

.panel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-400);
  padding: var(--space-600);
  border-top: var(--stroke-border) solid var(--border-default);
  flex-shrink: 0;
}

/* ========================================
   Modal
   ======================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--bg-blanket);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  padding: 40px 24px;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background-color: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-600);
  font-family: var(--font-sans);
  transform: translateY(-20px);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.modal-overlay.open .modal-container {
  transform: translateY(0);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-600);
  color: var(--text-default);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

.modal-body p {
  margin-bottom: var(--space-400);
}

.modal-body p:last-child {
  margin-bottom: 0;
}

/* ========================================
   Blade
   ======================================== */

.blade-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: transparent;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.blade-overlay.open {
  opacity: 1;
  visibility: visible;
}

.blade-container {
  background-color: var(--bg-default);
  border-left: var(--stroke-border) solid var(--border-default);
  width: 640px;
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-600);
  font-family: var(--font-sans);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.blade-overlay.open .blade-container {
  transform: translateX(0);
}

.blade-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-600);
  color: var(--text-default);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

.blade-body p {
  margin-bottom: var(--space-400);
}

.blade-body p:last-child {
  margin-bottom: 0;
}

/* ========================================
   Sheet
   ======================================== */

.sheet-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  background: var(--bg-blanket);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.sheet-overlay.open {
  opacity: 1;
  visibility: visible;
}

.sheet-container {
  background-color: var(--bg-default);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  overflow: hidden;
}

.sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-600);
  color: var(--text-default);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

.sheet-body p {
  margin-bottom: var(--space-400);
}

.sheet-body p:last-child {
  margin-bottom: 0;
}

/* ========================================
   Popover
   ======================================== */

.popover {
  background-color: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  box-shadow: var(--shadow-200);
  padding: var(--space-200) var(--space-600);
  display: flex;
  flex-direction: column;
  width: 295px;
}

.popover-item {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-400) 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--text-default);
  cursor: pointer;
  border-bottom: var(--stroke-border) solid var(--border-default);
  transition: background-color 0.15s ease, border-radius 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.popover-item:last-child {
  border-bottom: none;
}

.popover-item:hover {
  background-color: var(--bg-default-hover);
  border-radius: 6px;
  border-bottom-color: transparent;
  box-shadow:
    8px 0 0 0 var(--bg-default-hover),
    -8px 0 0 0 var(--bg-default-hover);
}

.popover-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--icon-default);
}

.popover-item span {
  flex: 1;
  min-width: 0;
}

.popover-item .popover-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--icon-default);
}

.popover-item.danger {
  color: var(--text-danger);
}

.popover-item.danger svg {
  color: var(--text-danger);
}

/* ========================================
   Pagination
   ======================================== */

.pagination {
  display: flex;
  gap: var(--space-200);
  align-items: center;
  font-family: var(--font-sans);
}

.pagination-list {
  display: flex;
  gap: var(--space-200);
  align-items: center;
}

.pagination-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-200) var(--space-300);
  border-radius: var(--radius-200);
  font-size: var(--text-body);
  line-height: 1;
  color: var(--text-default);
  cursor: pointer;
  background: none;
  border: none;
}

.pagination-page:hover {
  background-color: var(--bg-secondary);
}

.pagination-page.current {
  background-color: var(--bg-brand);
  color: var(--text-on-brand);
}

.pagination-gap {
  padding: var(--space-200) var(--space-400);
  font-weight: var(--weight-bold);
}

.pagination-prev,
.pagination-next {
  display: flex;
  gap: var(--space-200);
  align-items: center;
  padding: var(--space-200) var(--space-300);
  border-radius: var(--radius-200);
  font-size: var(--text-body);
  color: var(--text-default);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

.pagination-prev:hover,
.pagination-next:hover {
  background-color: var(--bg-secondary);
}

.pagination-prev.disabled,
.pagination-next.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   List Row
   ======================================== */

.list-row-section {
  align-items: flex-start;
}

.list-row-container {
  padding: var(--space-600);
  max-width: 800px;
  width: 100%;
  box-sizing: border-box;
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-400) 0;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background-color 0.15s ease, border-radius 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.list-row:hover {
  background-color: var(--bg-default-hover);
  border-radius: 6px;
  border-bottom-color: transparent;
  box-shadow:
    8px 0 0 0 var(--bg-default-hover),
    -8px 0 0 0 var(--bg-default-hover);
}

.list-row-bordered {
  border-bottom: var(--stroke-border) solid var(--border-default);
}

.list-row-bordered:last-child {
  border-bottom: none;
}

.list-row-left {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  flex: 1;
  min-width: 0;
}

.list-row-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-200);
  background-color: var(--bg-default-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.list-row-icon svg {
  width: 24px;
  height: 24px;
  color: var(--icon-default);
}

.list-row-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-row-icon.icon-only {
  width: 24px;
  height: 24px;
  background: none;
  border-radius: 0;
}

.list-row-icon.image {
  background-color: var(--bg-secondary);
}

.list-row-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.list-row-header {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--text-default);
}

.list-row-subtitle {
  font-size: var(--text-body-small);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  color: var(--text-secondary);
}

.list-row-right {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  flex-shrink: 0;
}

.list-row-right-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
}

.list-row-right-primary {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--text-default);
}

.list-row-right-secondary {
  font-size: var(--text-body-small);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  color: var(--text-secondary);
}

.list-row-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--icon-tertiary);
}

/* ========================================
   Table
   ======================================== */

.ds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-small);
  line-height: 1.4;
  background-color: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-400);
  overflow: hidden;
}

.ds-table th,
.ds-table td {
  padding: var(--space-300) var(--space-400);
  border-bottom: var(--stroke-border) solid var(--border-default);
  color: var(--text-default);
  font-weight: var(--weight-regular);
}

.ds-table thead th {
  font-weight: var(--weight-semibold);
  text-align: left;
  border-bottom-width: 2px;
}

.ds-table tr:last-child td {
  border-bottom: none;
}

.ds-table tbody tr {
  transition: background-color 0.15s ease;
}

.ds-table tbody tr:hover {
  background-color: var(--bg-default-hover);
}

.ds-table .cell-subtitle {
  display: block;
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

.ds-table .align-right {
  text-align: right;
}

/* ========================================
   Table Header
   ======================================== */

.ds-table-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  padding-bottom: var(--space-400);
}

.ds-table-header-title {
  font-family: var(--font-sans);
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-default);
}

.ds-table-header-summary {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ========================================
   Table Section
   ======================================== */

.ds-table-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* ========================================
   Checkbox Field
   ======================================== */

.checkbox-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-sans);
  cursor: pointer;
}

.checkbox-field input[type="checkbox"] {
  display: none;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-300);
}

.checkbox-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: var(--stroke-border) solid var(--border-default);
  background: var(--bg-default);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.checkbox-field input:checked + .checkbox-row .checkbox-box {
  background: var(--bg-brand);
  border-color: var(--border-brand);
}

.checkbox-box svg {
  display: none;
  width: 12px;
  height: 12px;
  stroke: var(--icon-on-brand);
}

.checkbox-field input:checked + .checkbox-row .checkbox-box svg {
  display: block;
}

.checkbox-label {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--text-default);
  line-height: 1.4;
}

.checkbox-description {
  padding-left: 28px;
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.4;
}

.checkbox-field.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.checkbox-field.indeterminate .checkbox-box {
  background: var(--bg-brand);
  border-color: var(--border-brand);
}

.checkbox-field.indeterminate .checkbox-box svg {
  display: block;
}

/* ========================================
   Radio Field
   ======================================== */

.radio-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-sans);
  cursor: pointer;
}

.radio-field input[type="radio"] {
  display: none;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: var(--space-300);
}

.radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: var(--stroke-border) solid var(--border-default);
  background: var(--bg-default);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s ease;
}

.radio-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--bg-brand);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.radio-field input:checked + .radio-row .radio-dot {
  border-color: var(--border-brand);
}

.radio-field input:checked + .radio-row .radio-dot::after {
  opacity: 1;
}

.radio-label {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--text-default);
  line-height: 1.4;
}

.radio-description {
  padding-left: 28px;
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.4;
}

.radio-field.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

/* ========================================
   Select Field
   ======================================== */

.select-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  font-family: var(--font-sans);
  width: 100%;
}

.select-field-label {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--text-default);
  line-height: 1.4;
}

.select-field-description {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.4;
}

.select-trigger-wrap {
  position: relative;
  width: 100%;
}

.select-trigger {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-300) var(--space-400);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text-default);
  background-color: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  cursor: pointer;
  transition: border-color 0.15s ease;
  text-align: left;
}

.select-trigger:focus {
  outline: none;
  border-color: var(--border-brand);
}

.select-trigger-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--icon-tertiary);
  transition: transform 0.15s ease;
}

.select-field.open .select-trigger {
  border-color: var(--border-brand);
}

.select-field.open .select-trigger-icon {
  transform: rotate(180deg);
}

.select-trigger-text.placeholder {
  color: var(--text-secondary);
}

.select-popover {
  position: absolute;
  top: calc(100% + var(--space-100));
  left: 0;
  right: 0;
  width: 100%;
  z-index: 20;
  display: none;
}

.select-field.open .select-popover {
  display: flex;
}

.select-field.disabled .select-trigger {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.select-field.error .select-trigger {
  border-color: var(--border-danger);
}

.select-field-error {
  font-size: var(--text-body-small);
  color: var(--text-danger);
  line-height: 1.4;
}

/* ========================================
   Switch Field
   ======================================== */

.switch-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-sans);
  cursor: pointer;
}

.switch-field input[type="checkbox"] {
  display: none;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: var(--space-300);
}

.switch-track {
  width: 40px;
  height: 24px;
  border-radius: 9999px;
  background: var(--bg-default-tertiary);
  border: var(--stroke-border) solid var(--border-default);
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.switch-knob {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: var(--icon-on-brand);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease, background-color 0.2s ease;
  box-shadow: var(--shadow-drop-1);
}

.switch-field input:checked + .switch-row .switch-track {
  background: var(--bg-brand);
  border-color: var(--border-brand);
}

.switch-field input:checked + .switch-row .switch-knob {
  transform: translateX(16px);
}

.switch-label {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--text-default);
  line-height: 1.4;
}

.switch-description {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.4;
}

.switch-field.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ========================================
   Search Input
   ======================================== */

.search-input {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  padding: var(--space-300) var(--space-400);
  background: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: 9999px;
  font-family: var(--font-sans);
  width: 100%;
  transition: border-color 0.15s ease;
}

.search-input:focus-within {
  border-color: var(--border-brand);
}

.search-input input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text-default);
  width: 100%;
}

.search-input input::placeholder {
  color: var(--text-tertiary);
}

.search-input svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke: var(--icon-default);
}

.search-input.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ========================================
   Icon Button
   ======================================== */

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--stroke-border) solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  line-height: 0;
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
}

.btn-icon.btn-sm svg {
  width: 16px;
  height: 16px;
}

.btn-icon.btn-brand {
  background: var(--bg-brand);
  color: var(--text-on-brand);
}

.btn-icon.btn-brand:hover {
  background: var(--bg-brand-hover);
}

.btn-icon.btn-neutral {
  background: var(--bg-neutral-tertiary);
  color: var(--icon-default);
}

.btn-icon.btn-neutral:hover {
  background: var(--bg-default-hover);
}

.btn-icon.btn-subtle {
  background: transparent;
  border-color: var(--border-default);
  color: var(--icon-default);
}

.btn-icon.btn-subtle:hover {
  background: var(--bg-default-hover);
  border-color: var(--border-secondary);
}

.btn-icon.disabled,
.btn-icon:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ========================================
   Menu
   ======================================== */

.menu {
  display: flex;
  flex-direction: column;
  background: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  padding: var(--space-200);
  min-width: 200px;
  box-shadow: var(--shadow-drop-3);
  font-family: var(--font-sans);
}

.menu-heading {
  padding: var(--space-200) var(--space-300);
  font-size: var(--text-body-small);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.menu-separator {
  height: 1px;
  background: var(--border-default);
  margin: var(--space-200) 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-200) var(--space-300);
  border-radius: var(--radius-100);
  cursor: pointer;
  font-size: var(--text-body);
  color: var(--text-default);
  text-decoration: none;
  transition: background-color 0.1s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.menu-item:hover {
  background: var(--bg-default-hover);
}

.menu-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--icon-default);
  flex-shrink: 0;
}

.menu-item .menu-shortcut {
  margin-left: auto;
  font-size: var(--text-body-small);
  color: var(--text-tertiary);
}

.menu-item.danger {
  color: var(--text-danger);
}

.menu-item.danger svg {
  stroke: var(--text-danger);
}

.menu-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ========================================
   Tag Toggle
   ======================================== */

.tag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-200) var(--space-300) var(--space-200) var(--space-300);
  border-radius: var(--radius-200);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tag-toggle.on {
  background: var(--bg-brand);
  color: var(--text-on-brand);
  gap: 6px;
  padding: var(--space-200) var(--space-300) var(--space-200) var(--space-200);
}

.tag-toggle.off {
  background: var(--bg-brand-tertiary);
  color: var(--text-default);
}

.tag-toggle.on svg {
  stroke: var(--text-on-brand);
}

.tag-toggle svg {
  width: 16px;
  height: 16px;
}

.tag-toggle:hover {
  opacity: 0.85;
}

.tag-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200);
}

/* ========================================
   Slider Field
   ======================================== */

.slider-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  font-family: var(--font-sans);
  width: 100%;
}

.slider-field-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.slider-field-label {
  font-size: var(--text-body);
  color: var(--text-default);
}

.slider-field-output {
  font-size: var(--text-body-small);
  color: var(--text-default);
}

.slider-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 9999px;
  background: var(--bg-brand-secondary);
  outline: none;
}

.slider-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: var(--bg-brand);
  cursor: pointer;
  border: none;
}

.slider-field input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: var(--bg-brand);
  cursor: pointer;
  border: none;
}

.slider-field.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ========================================
   Product Info Card
   ======================================== */

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  padding: var(--space-400);
  background: var(--bg-default);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  font-family: var(--font-sans);
  width: 100%;
}

.product-card-image {
  width: 100%;
  aspect-ratio: 208 / 247;
  background: var(--bg-secondary);
  border-radius: var(--radius-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

.product-card-title {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--text-default);
}

.product-card-price {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--text-default);
}

.product-card-description {
  font-size: var(--text-body-small);
  color: var(--text-secondary);
}

/* ========================================
   Example Compositions (non-shared)
   ======================================== */

.example-section {
  width: 100%;
  max-width: var(--device-width);
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  overflow: hidden;
  background: var(--bg-default);
}

.example-product-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-800);
  padding: var(--space-800);
}

.example-product-image {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-secondary);
  border-radius: var(--radius-200);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.example-product-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}

.example-product-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-400);
}

.example-product-results {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-600);
  padding: var(--space-600);
}

.example-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
}

.example-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.example-filter-title {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--text-default);
}

.example-results-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
}

.example-results-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-400);
}

.example-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-400);
}

.example-chat {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 600px;
  overflow: hidden;
}

.example-chat-sidebar {
  display: flex;
  flex-direction: column;
  border-right: var(--stroke-border) solid var(--border-default);
  background: var(--bg-default);
  overflow-y: auto;
}

.example-chat-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-400);
  border-bottom: var(--stroke-border) solid var(--border-default);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  color: var(--text-default);
}

.example-chat-sidebar-section {
  padding: var(--space-400);
  font-family: var(--font-sans);
  font-size: var(--text-body-small);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.example-chat-sidebar-item {
  padding: var(--space-200) var(--space-400);
  font-family: var(--font-sans);
  font-size: var(--text-body-small);
  color: var(--text-default);
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.example-chat-sidebar-item:hover,
.example-chat-sidebar-item.active {
  background: var(--bg-default-hover);
}

.example-chat-main {
  display: flex;
  flex-direction: column;
  background: var(--bg-default);
}

.example-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-600);
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
}

.chat-bubble-user {
  align-self: flex-end;
  max-width: 70%;
  padding: var(--space-300) var(--space-400);
  background: var(--bg-secondary);
  border-radius: var(--radius-200);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text-default);
}

.chat-bubble-ai {
  display: flex;
  gap: var(--space-300);
  max-width: 85%;
}

.chat-bubble-ai-avatar {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--bg-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-on-brand);
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.chat-bubble-ai-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-default);
}

.chat-code-block {
  background: var(--bg-default-tertiary);
  border-radius: var(--radius-200);
  padding: var(--space-400);
  font-family: var(--font-mono);
  font-size: var(--text-body-small);
  line-height: 1.5;
  color: var(--text-default);
  overflow-x: auto;
  white-space: pre;
}

.example-chat-input {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-400) var(--space-600);
  border-top: var(--stroke-border) solid var(--border-default);
}

.example-chat-input input {
  flex: 1;
  border: var(--stroke-border) solid var(--border-default);
  border-radius: var(--radius-200);
  padding: var(--space-300) var(--space-400);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text-default);
  background: var(--bg-default);
  outline: none;
}

.example-chat-input input::placeholder {
  color: var(--text-tertiary);
}

.example-chat-input-actions {
  display: flex;
  gap: var(--space-200);
}

.example-chat-footer {
  padding: var(--space-300) var(--space-600);
  border-top: var(--stroke-border) solid var(--border-default);
  display: flex;
  align-items: center;
  gap: var(--space-200);
  font-family: var(--font-sans);
  font-size: var(--text-body-small);
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .example-product-page { grid-template-columns: 1fr; }
  .example-product-results { grid-template-columns: 1fr; }
  .example-results-grid { grid-template-columns: repeat(2, 1fr); }
  .example-chat { grid-template-columns: 1fr; height: auto; }
  .example-chat-sidebar { display: none; }
}

/* ========================================
   Color Tokens
   ======================================== */

.color-token-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  width: 100%;
}

.color-token-group-title {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--text-default);
}

.color-token-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-400);
  width: 100%;
}

.color-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.color-swatch-preview {
  width: 100%;
  height: 64px;
  border-radius: var(--radius-200);
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  background:
    linear-gradient(var(--swatch-color), var(--swatch-color)),
    repeating-conic-gradient(#d5d5d5 0% 25%, #eee 0% 50%) 50% / 12px 12px;
}

[data-theme="dark"] .color-swatch-preview {
  border-color: rgba(255, 255, 255, 0.22);
}

.color-swatch-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-default);
  line-height: 1.3;
}

.color-swatch-var {
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--yellow-600);
  line-height: 1.3;
}

.type-specimen {
  width: 100%;
  font-family: var(--font-sans);
  padding: var(--space-400) 0;
  border-bottom: var(--stroke-border) solid var(--border-default);
}

.type-specimen .type-spec-meta {
  display: block;
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  color: var(--text-secondary);
  margin-top: var(--space-200);
  line-height: 1.4;
}

/* ========================================
   Spacing Showcase
   ======================================== */

.spacing-row {
  display: flex;
  align-items: center;
  gap: var(--space-400);
  width: 100%;
}

.spacing-bar {
  height: 24px;
  border-radius: 2px;
  background-color: var(--bg-measurement);
  flex-shrink: 0;
  min-width: 2px;
}

.spacing-label {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--yellow-600);
  white-space: nowrap;
  min-width: 120px;
}

.spacing-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ========================================
   Radius Showcase
   ======================================== */

.radius-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-600);
  width: 100%;
}

.radius-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-200);
}

.radius-box {
  width: 80px;
  height: 80px;
  background-color: var(--bg-measurement);
}

.radius-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--yellow-600);
  text-align: center;
}

.radius-meta span {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
}

/* ========================================
   Shadow Showcase
   ======================================== */

.shadow-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-600);
  width: 100%;
}

.shadow-card {
  height: 120px;
  border-radius: var(--radius-200);
  background-color: var(--bg-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-100);
}

.shadow-card-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-default);
  font-weight: var(--weight-semibold);
}

.shadow-card-value {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--yellow-600);
  text-align: center;
  padding: 0 var(--space-200);
}

/* ========================================
   Stroke Showcase
   ======================================== */

.stroke-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-600);
  width: 100%;
}

.stroke-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.stroke-line {
  width: 120px;
  background-color: var(--bg-measurement);
}

.stroke-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--yellow-600);
}

.stroke-meta span {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
}

/* ========================================
   Blur Showcase
   ======================================== */

.blur-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-600);
  width: 100%;
}

.blur-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-200);
}

.blur-demo {
  width: 180px;
  height: 120px;
  border-radius: var(--radius-200);
  overflow: hidden;
  position: relative;
  background:
    repeating-linear-gradient(
      45deg,
      var(--bg-positive) 0px, var(--bg-positive) 10px,
      var(--bg-warning) 10px, var(--bg-warning) 20px,
      var(--bg-danger) 20px, var(--bg-danger) 30px,
      var(--bg-brand) 30px, var(--bg-brand) 40px
    );
}

.blur-demo-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: var(--weight-bold);
  color: var(--text-on-danger);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.blur-demo-overlay {
  position: absolute;
  inset: 0;
}

.blur-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--yellow-600);
  text-align: center;
}

.blur-meta span {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
}

/* ========================================
   Icon Grid
   ======================================== */

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-400);
  width: 100%;
}

.icon-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-200);
  padding: var(--space-300);
  border-radius: var(--radius-200);
  transition: background-color 0.2s ease;
}

.icon-grid-item:hover {
  background-color: var(--bg-secondary);
}

.icon-grid-item svg {
  width: 24px;
  height: 24px;
  color: var(--icon-default);
}

.icon-grid-item span {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  word-break: break-word;
  line-height: 1.2;
}

/* ========================================
   Dark Mode Overrides for hardcoded colors
   ======================================== */

[data-theme="dark"] .tab {
  color: rgba(255, 255, 255, 0.4);
  border-bottom-color: #444;
}

[data-theme="dark"] .tab:hover {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .tab.active {
  border-bottom-color: #fff;
  color: #fff;
}

[data-theme="dark"] .notification.alert {
  background-color: #3d0c0a;
  border-color: #ec221f;
}

[data-theme="dark"] .notification.alert .notification-title,
[data-theme="dark"] .notification.alert .notification-body {
  color: #fecac6;
}

[data-theme="dark"] .notification.alert .notification-icon {
  color: #fecac6;
}


/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
  .ds-header {
    padding: var(--space-400);
  }

  .ds-header .nav-pill-list {
    display: none;
  }

  .ds-hero .text-content-title .title {
    font-size: 48px;
  }

  .ds-hero .text-content-title .subtitle {
    font-size: 24px;
  }

  .ds-panel {
    flex-direction: column;
    padding: var(--space-800);
  }

  .ds-panel .panel-image,
  .ds-panel .panel-content {
    width: 100%;
  }

  .ds-panel-double {
    flex-direction: column;
    height: auto;
    padding: var(--space-800);
  }

  .ds-panel-double .panel-image {
    height: 200px;
  }

  .ds-card-grid {
    padding: var(--space-800);
  }

  .ds-card-grid .cards {
    gap: var(--space-800);
  }

  .ds-footer {
    padding: var(--space-800);
  }

  .ds-footer .footer-columns {
    flex-direction: column;
  }

  .pricing-card {
    min-width: 100%;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  .notification {
    width: 100%;
    max-width: 300px;
  }

  .dialog-body {
    padding: var(--space-600);
  }

  .modal-overlay {
    padding: 0;
  }

  .modal-container {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
  }

  .blade-container {
    width: 100%;
    border-left: none;
    border-radius: 0;
  }

  .ds-tabs {
    overflow-x: auto;
  }
}