/* ============================================
   BASE STYLES — 2026 Refresh
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');

   *, *::before, *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   :root {
       --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       --font-mono: 'Geist Mono', 'SF Mono', 'Cascadia Code', monospace;
   
       --color-bg: #ffffff;
       --color-surface: #f8f9fb;
       --color-surface-raised: #ffffff;
       --color-border: rgba(0, 0, 0, 0.07);
       --color-border-strong: rgba(0, 0, 0, 0.12);
   
       --color-text-primary: #0d0d0f;
       --color-text-secondary: #5a5e6b;
       --color-text-muted: #9198a8;
   
       --color-accent: #1a6ef5;
       --color-accent-soft: #eef3fe;
       --color-accent-text: #1a4fb3;
   
       --color-success: #0f7b50;
       --color-success-soft: #edfaf4;
       --color-warning: #a85c00;
       --color-warning-soft: #fff8ec;
       --color-danger: #c42b2b;
       --color-danger-soft: #fef2f2;
   
       --radius-sm: 6px;
       --radius-md: 10px;
       --radius-lg: 14px;
       --radius-xl: 20px;
   
       --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
       --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
   
       --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
       --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   
   @media (prefers-color-scheme: dark) {
       :root {
           --color-bg: #0e0f11;
           --color-surface: #16181c;
           --color-surface-raised: #1e2128;
           --color-border: rgba(255,255,255,0.07);
           --color-border-strong: rgba(255,255,255,0.12);
   
           --color-text-primary: #f0f1f4;
           --color-text-secondary: #9198a8;
           --color-text-muted: #5a5e6b;
   
           --color-accent: #4d8ffb;
           --color-accent-soft: #0d1f3c;
           --color-accent-text: #7db3fc;
   
           --color-success: #2db87a;
           --color-success-soft: #061a10;
           --color-warning: #e89c44;
           --color-warning-soft: #1c1002;
           --color-danger: #e05555;
           --color-danger-soft: #1c0606;
       }
   }
   
   body {
       font-family: var(--font-sans);
       background: var(--color-bg);
       color: var(--color-text-primary);
       line-height: 1.65;
       font-size: 15px;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   /* ── Typography ── */
   
   h1 {
       font-size: 2.25rem;
       font-weight: 600;
       letter-spacing: -0.03em;
       line-height: 1.2;
       margin-bottom: 0.875rem;
       color: var(--color-success);
   }
   
   h2 {
       font-size: 1.5rem;
       font-weight: 600;
       letter-spacing: -0.02em;
       line-height: 1.3;
       margin: 2.25rem 0 0.875rem;
       padding-bottom: 0.5rem;
       border-bottom: 1px solid var(--color-border);
       color: var(--color-text-primary);
   }
   
   h3 {
       font-size: 1.125rem;
       font-weight: 500;
       letter-spacing: -0.01em;
       margin: 1.75rem 0 0.625rem;
       color: var(--color-text-primary);
   }
   
   h4 {
       font-size: 1rem;
       font-weight: 500;
       margin: 1.25rem 0 0.5rem;
       color: var(--color-text-primary);
   }
   
   p {
       margin-bottom: 0.875rem;
       color: var(--color-text-secondary);
   }
   
   a {
       color: var(--color-accent);
       text-decoration: none;
       transition: color var(--transition);
   }
   
   a:hover {
       text-decoration: underline;
       text-underline-offset: 3px;
   }
   
   ul, ol {
       margin: 0.875rem 0;
       padding-left: 1.375rem;
   }
   
   li {
       margin: 0.375rem 0;
       color: var(--color-text-secondary);
   }
   
   hr {
       border: none;
       border-top: 1px solid var(--color-border);
       margin: 2rem 0;
   }
   
   /* ── Layout ── */
   
   .content-wrapper {
       margin: 0 auto;
       padding: 36px 28px;
   }
   
   /* ── Code ── */
   
   .code-block {
       background: var(--color-surface);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-md);
       padding: 1rem 1.125rem;
       margin: 1.5rem 0;
       overflow-x: auto;
       font-family: var(--font-mono);
       font-size: 0.8125rem;
       line-height: 1.6;
   }
   
   .code-block pre {
       margin: 0;
       color: var(--color-text-primary);
       font-family: inherit;
       white-space: pre-wrap;
       word-break: break-word;
   }
   
   .inline-code {
       background: var(--color-surface);
       padding: 0.15rem 0.4rem;
       border-radius: var(--radius-sm);
       font-family: var(--font-mono);
       font-size: 0.8125rem;
       color: var(--color-danger);
       border: 1px solid var(--color-border);
   }
   
   /* ── Callouts ── */
   
   .note-box,
   .warning-box,
   .success-box {
       padding: 0.875rem 1.125rem;
       margin: 1.5rem 0;
       border-radius: var(--radius-md);
       border-left: 3px solid;
       font-size: 0.9rem;
   }
   
   .note-box {
       background: var(--color-accent-soft);
       border-color: var(--color-accent);
       color: var(--color-accent-text);
   }
   
   .warning-box {
       background: var(--color-warning-soft);
       border-color: var(--color-warning);
       color: var(--color-warning);
   }
   
   .success-box {
       background: var(--color-success-soft);
       border-color: var(--color-success);
       color: var(--color-success);
   }
   
   .note-box strong,
   .warning-box strong,
   .success-box strong {
       display: block;
       margin-bottom: 0.375rem;
       font-weight: 600;
   }
   
   /* ── Steps ── */
   
   .step {
       display: flex;
       gap: 1rem;
       margin: 1.5rem 0;
       align-items: flex-start;
   }
   
   .step-number {
       min-width: 28px;
       height: 28px;
       background: var(--color-accent);
       color: #fff;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 600;
       font-size: 0.8rem;
       flex-shrink: 0;
       font-family: var(--font-mono);
   }
   
   .step-content {
       flex: 1;
       padding-top: 2px;
   }
   
   /* ── Badge ── */
   
   .badge {
       display: inline-flex;
       align-items: center;
       background: var(--color-success-soft);
       color: var(--color-success);
       padding: 0.2rem 0.625rem;
       border-radius: 99px;
       font-size: 0.7rem;
       font-weight: 600;
       letter-spacing: 0.01em;
       text-transform: uppercase;
       margin-left: 0.5rem;
       border: 1px solid currentColor;
       opacity: 0.8;
   }
   
   /* ── Cards ── */
   
   .card-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
       gap: 1.25rem;
       margin: 2rem 0;
   }
   
   .card {
       background: var(--color-surface-raised);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-lg);
       padding: 1.375rem;
       transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition-spring);
   }
   
   .card:hover {
       box-shadow: var(--shadow-md);
       border-color: var(--color-border-strong);
       transform: translateY(-2px);
   }
   
   .card-icon {
       font-size: 1.75rem;
       margin-bottom: 0.875rem;
       display: block;
   }
   
   .card h3 {
       margin-top: 0;
       margin-bottom: 0.375rem;
       font-size: 1rem;
   }
   
   .card p {
       margin-bottom: 0;
       font-size: 0.875rem;
   }
   
   /* ── Button ── */
   
   .btn {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       margin-top: 1rem;
       padding: 0.5rem 1rem;
       background: var(--color-surface);
       color: var(--color-accent);
       text-decoration: none;
       border-radius: var(--radius-md);
       font-size: 0.85rem;
       font-weight: 500;
       border: 1px solid var(--color-border-strong);
       transition: all var(--transition);
       cursor: pointer;
       font-family: var(--font-sans);
   }
   
   .btn:hover {
       background: var(--color-accent);
       color: #fff;
       border-color: var(--color-accent);
       text-decoration: none;
       box-shadow: 0 0 0 3px rgba(26, 110, 245, 0.15);
   }
   
   /* ── Tables ── */
   
   .table-responsive {
       overflow-x: auto;
       margin: 1.5rem 0;
       border-radius: var(--radius-md);
       border: 1px solid var(--color-border);
   }
   
   .comparison-table {
       width: 100%;
       border-collapse: collapse;
       font-size: 0.875rem;
   }
   
   .comparison-table th,
   .comparison-table td {
       border-bottom: 1px solid var(--color-border);
       padding: 0.75rem 1rem;
       text-align: left;
   }
   
   .comparison-table tr:last-child td {
       border-bottom: none;
   }
   
   .comparison-table th {
       background: var(--color-surface);
       font-weight: 600;
       font-size: 0.8rem;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       color: var(--color-text-muted);
   }
   
   .comparison-table tr:hover td {
       background: var(--color-surface);
   }
   
   .check {
       color: var(--color-success);
       font-weight: 700;
   }
   
   .cross {
       color: var(--color-danger);
   }
   
   /* ── Scrollbar ── */
   
   * {
       scrollbar-width: thin;
       scrollbar-color: var(--color-border-strong) transparent;
   }
   
   ::-webkit-scrollbar {
       width: 6px;
       height: 6px;
   }
   
   ::-webkit-scrollbar-track {
       background: transparent;
   }
   
   ::-webkit-scrollbar-thumb {
       background: var(--color-border-strong);
       border-radius: 99px;
   }
   
   ::-webkit-scrollbar-thumb:hover {
       background: var(--color-text-muted);
   }
   
   /* ── Images ── */
   
   img {
       max-width: 100%;
       height: auto;
       border-radius: var(--radius-md);
   }
   
   /* ── Responsive ── */
   
   @media (max-width: 768px) {
       .content-wrapper {
           padding: 24px 18px;
       }
   
       h1 { font-size: 1.75rem; }
       h2 { font-size: 1.25rem; }
       h3 { font-size: 1rem; }
   
       .comparison-table { font-size: 0.8rem; }
   
       .comparison-table th,
       .comparison-table td {
           padding: 0.5rem 0.75rem;
       }
   
       .card-grid { grid-template-columns: 1fr; }
   
       .step { flex-direction: column; gap: 0.5rem; }
   }
   
   /* ── Utilities ── */
   
   .text-center { text-align: center; }
   .text-left   { text-align: left; }
   .text-right  { text-align: right; }
   
   .mt-0 { margin-top: 0; }
   .mt-1 { margin-top: 0.5rem; }
   .mt-2 { margin-top: 1rem; }
   .mt-3 { margin-top: 1.5rem; }
   .mt-4 { margin-top: 2rem; }
   
   .mb-0 { margin-bottom: 0; }
   .mb-1 { margin-bottom: 0.5rem; }
   .mb-2 { margin-bottom: 1rem; }
   .mb-3 { margin-bottom: 1.5rem; }
   .mb-4 { margin-bottom: 2rem; }
   
   .p-0 { padding: 0; }
   .p-1 { padding: 0.5rem; }
   .p-2 { padding: 1rem; }
   .p-3 { padding: 1.5rem; }
   .p-4 { padding: 2rem; }