/* =====================================================================
       MEDEDU LEK — SYSTEM TOKENÓW CSS (LIGHT & DARK FIRST CLASS CITIZENS)
       ===================================================================== */



    /* Dark Theme Specification (First-Class Citizen on #0A1628) */





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

    body {
      background-color: var(--bg);
      color: var(--text);
      font-family: var(--font-sans);
      font-size: var(--text-base);
      line-height: var(--line-height-body);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transition: background-color 0.25s ease, color 0.25s ease;
      padding-bottom: 96px;
    }

    /* Accessibility Focus States */
    :focus-visible {
      outline: 2px solid var(--focus-ring-color);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--focus-ring);
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Responsive Grid & Containers */
    .container {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      padding: 0 16px; /* 16px mobile gutters */
    }

    @media (min-width: 768px) {
      .container {
        padding: 0 24px; /* 24px tablet gutters */
      }
      .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
      .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
    }

    @media (min-width: 1024px) {
      .container {
        max-width: 1120px; /* Desktop max-width centered */
        padding: 0 32px;
      }
    }

    /* Typography Utilities */
    h1, h2, h3, h4, .font-editorial {
      font-family: var(--font-serif);
      line-height: var(--line-height-heading);
      font-weight: 500;
      letter-spacing: -0.015em;
    }
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-lg); }
    h4 { font-size: var(--text-md); }

    .text-muted { color: var(--text-muted); }
    .text-subtle { color: var(--text-subtle); }
    .text-sm { font-size: var(--text-sm); }
    .text-xs { font-size: var(--text-xs); }
    .font-mono { font-family: var(--font-mono); }

    /* Sticky Sub-Header with Theme Switcher */
    .top-bar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(8px);
      padding: 12px 16px;
    }
    .top-bar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1120px;
      margin: 0 auto;
    }
    .brand-mark {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--text);
    }
    .brand-badge {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      background: var(--surface-subtle);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      letter-spacing: 0.04em;
    }
    .theme-toggle-btn {
      min-height: 44px;
      min-width: 44px;
      padding: 8px 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--text-sm);
      font-weight: 600;
      font-family: var(--font-sans);
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: var(--radius-control);
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: all 0.2s ease;
    }
    .theme-toggle-btn:hover {
      background: var(--surface-raised);
    }

    /* Section Structure */
    .section-wrap {
      margin-top: 36px;
    }
    .section-header {
      border-bottom: 1px solid var(--border);
      padding-bottom: 12px;
      margin-bottom: 20px;
    }
    .section-tag {
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: 4px;
      display: block;
    }

    /* Component Card Wrapper */
    .ds-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
      padding: 20px;
      box-shadow: var(--shadow-sm);
      margin-bottom: 20px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    /* Color Swatches Grid */
    .swatch-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 12px;
    }
    .swatch-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-control);
      overflow: hidden;
      background: var(--surface);
    }
    .swatch-preview {
      height: 60px;
      width: 100%;
      display: flex;
      align-items: flex-end;
      padding: 6px;
      font-family: var(--font-mono);
      font-size: 11px;
    }
    .swatch-info {
      padding: 8px 10px;
    }
    .swatch-name {
      font-weight: 600;
      font-size: 12px;
      display: block;
    }
    .swatch-code {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
    }

    /* Answer States Comparison */
    .answer-sample {
      border-radius: var(--radius-control);
      padding: 14px 16px;
      border: 1.5px solid var(--border);
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
      min-height: 48px;
    }
    .answer-dot {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* BUTTON PRIMITIVES & STATES */
    .btn {
      min-height: 44px; /* 44px minimum touch target */
      min-width: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: var(--radius-control); /* 8px control */
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: 600;
      text-decoration: none;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
      user-select: none;
      position: relative;
    }
    
    /* Primary Button */
    .btn-primary {
      background-color: var(--accent);
      color: var(--accent-contrast);
      border-color: var(--accent);
    }
    .btn-primary:hover:not(:disabled) {
      background-color: var(--accent-hover);
      border-color: var(--accent-hover);
    }
    .btn-primary:active:not(:disabled) {
      transform: translateY(1px);
    }

    /* Secondary Button */
    .btn-secondary {
      background-color: var(--surface);
      color: var(--text);
      border-color: var(--border);
    }
    .btn-secondary:hover:not(:disabled) {
      background-color: var(--surface-raised);
      border-color: var(--border);
    }
    .btn-secondary:active:not(:disabled) {
      transform: translateY(1px);
    }

    /* Quiet Button */
    .btn-quiet {
      background-color: transparent;
      color: var(--accent);
      border-color: transparent;
    }
    .btn-quiet:hover:not(:disabled) {
      background-color: var(--accent-subtle);
    }
    .btn-quiet:active:not(:disabled) {
      transform: translateY(1px);
    }

    /* Destructive Button */
    .btn-destructive {
      background-color: var(--danger-subtle);
      color: var(--danger);
      border-color: transparent;
    }
    .btn-destructive:hover:not(:disabled) {
      background-color: var(--danger);
      color: #FFFFFF;
    }
    .btn-destructive:active:not(:disabled) {
      transform: translateY(1px);
    }

    /* Disabled State */
    .btn:disabled, .btn.is-disabled {
      opacity: 0.45;
      cursor: not-allowed;
      pointer-events: none;
      filter: grayscale(20%);
    }

    /* Loading Spinner inside Button */
    .btn-loading {
      cursor: wait;
      color: transparent !important;
    }
    .spinner {
      width: 18px;
      height: 18px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: spin 0.75s linear infinite;
      position: absolute;
    }
    .btn-primary .spinner {
      border-color: var(--accent-contrast);
      border-right-color: transparent;
    }
    .btn-secondary .spinner {
      border-color: var(--text);
      border-right-color: transparent;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* INPUT FIELD WITH FLOATING LABEL & ERROR */
    .input-group {
      position: relative;
      margin-bottom: 24px;
    }
    .floating-field {
      position: relative;
    }
    .floating-input {
      width: 100%;
      min-height: 52px; /* Ergonomic touch target */
      padding: 22px 14px 6px 14px;
      font-size: var(--text-base);
      font-family: var(--font-sans);
      color: var(--text);
      background-color: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-control);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      outline: none;
    }
    .floating-input:hover:not(:disabled) {
      border-color: var(--text-muted);
    }
    .floating-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--focus-ring);
    }
    .floating-label {
      position: absolute;
      top: 50%;
      left: 14px;
      transform: translateY(-50%);
      font-size: var(--text-sm);
      color: var(--text-muted);
      pointer-events: none;
      transition: 0.15s ease all;
    }
    .floating-input:focus ~ .floating-label,
    .floating-input:not(:placeholder-shown) ~ .floating-label {
      top: 14px;
      font-size: 11px;
      font-weight: 600;
      color: var(--accent);
    }
    .floating-input:not(:focus):not(:placeholder-shown) ~ .floating-label {
      color: var(--text-muted);
    }
    .floating-input:disabled {
      background-color: var(--surface-raised);
      border-color: var(--border-subtle);
      color: var(--text-subtle);
      cursor: not-allowed;
    }
    /* Input with Error */
    .input-group.has-error .floating-input {
      border-color: var(--danger);
      background-color: var(--danger-subtle);
    }
    .input-group.has-error .floating-input:focus {
      box-shadow: 0 0 0 3px rgba(254, 63, 33, 0.25);
    }
    .input-group.has-error .floating-label {
      color: var(--danger) !important;
    }
    .input-error-msg {
      font-size: var(--text-xs);
      color: var(--danger);
      margin-top: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 500;
    }

    /* BADGES & CHIPS */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      border-radius: var(--radius-pill);
      border: 1px solid transparent;
      line-height: 1.2;
    }
    .badge-neutral {
      background: var(--surface-raised);
      border-color: var(--border);
      color: var(--text);
    }
    .badge-accent {
      background: var(--accent-subtle);
      border-color: rgba(87, 94, 207, 0.3);
      color: var(--accent);
    }
    .badge-orange {
      background: var(--secondary-subtle);
      border-color: rgba(254, 123, 2, 0.3);
      color: var(--secondary-accent);
    }
    .badge-success {
      background: var(--success-subtle);
      border-color: rgba(35, 133, 81, 0.3);
      color: var(--success);
    }
    .badge-danger {
      background: var(--danger-subtle);
      border-color: rgba(254, 63, 33, 0.3);
      color: var(--danger);
    }

    /* Interactive Chip */
    .chip {
      min-height: 44px;
      padding: 8px 16px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: var(--text-sm);
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .chip:hover {
      background: var(--surface-raised);
    }
    .chip.is-active {
      background: var(--accent-subtle);
      border-color: var(--accent);
      color: var(--accent);
      font-weight: 600;
    }

    /* PROGRESS BAR */
    .progress-bar-track {
      width: 100%;
      height: 8px; /* 4px module */
      background-color: var(--surface-subtle);
      border-radius: var(--radius-pill);
      overflow: hidden;
    }
    .progress-bar-fill {
      height: 100%;
      border-radius: var(--radius-pill);
      background-color: var(--accent);
      transition: width 0.3s ease;
    }
    .progress-bar-fill.orange {
      background-color: var(--secondary-accent);
    }

    /* SKELETON LOADER */
    .skeleton {
      background: linear-gradient(
        90deg,
        var(--surface-raised) 25%,
        var(--surface-subtle) 37%,
        var(--surface-raised) 63%
      );
      background-size: 400% 100%;
      animation: skeleton-shimmer 1.8s ease infinite;
      border-radius: var(--radius-sm);
    }
    @keyframes skeleton-shimmer {
      0% { background-position: 100% 50%; }
      100% { background-position: 0 50%; }
    }

    /* TOAST COMPONENT */
    .toast {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 16px;
      border-radius: var(--radius-control);
      background: var(--surface-raised);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-md);
      color: var(--text);
      font-size: var(--text-sm);
    }
    .toast-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }
    .toast-success .toast-indicator { background: var(--success); }
    .toast-danger .toast-indicator { background: var(--danger); }

    /* BOTTOM SHEET & RESPONSIVE MODAL */
    .sheet-preview {
      border: 1px solid var(--border);
      border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
      background: var(--surface);
      padding: 16px 20px 24px 20px;
      box-shadow: var(--shadow-sheet);
      position: relative;
    }
    .sheet-handle {
      width: 36px;
      height: 4px;
      background: var(--border);
      border-radius: var(--radius-pill);
      margin: 0 auto 16px auto;
    }
    @media (min-width: 768px) {
      .sheet-preview {
        border-radius: var(--radius-sheet);
        max-width: 480px;
        margin: 0 auto;
        box-shadow: var(--shadow-lg);
      }
      .sheet-handle {
        display: none;
      }
    }

    /* CODE EXPORT BLOCK */
    .code-box {
      background: #0B1321;
      color: #E2E8F0;
      border: 1px solid #1E293B;
      border-radius: var(--radius-card);
      padding: 16px;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.6;
      overflow-x: auto;
      position: relative;
    }
    .copy-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      background: #1E293B;
      color: #F8FAFC;
      border: 1px solid #334155;
      border-radius: var(--radius-control);
      padding: 6px 12px;
      font-size: 11px;
      font-family: var(--font-sans);
      cursor: pointer;
    }
    .copy-btn:hover {
      background: #334155;
    }

    /* State Matrix Table */
    .state-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 12px;
      align-items: center;
    }
    .state-label {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }