/*
  Maro Design System
  Version: 1.0.0
  A reusable dark design system.

  Usage:
    <link rel="stylesheet" href="design-system.css">

  Compatibility:
    - Keeps the original HTML class names working: .logo-icon, .input-panel,
      .output-panel, .panel-label, .btn-primary, .btn-ghost, .section,
      .validity-banner, .field, .san-tag, .error-box, etc.
    - Adds reusable ds-* aliases for broader application use.
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

@layer ds.reset, ds.tokens, ds.base, ds.layout, ds.components, ds.utilities, ds.motion, ds.responsive;

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

@layer ds.reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        min-height: 100%;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    body {
        min-height: 100%;
        margin: 0;
    }

    :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
        margin: 0;
    }

    :where(ul, ol) {
        margin-block: 0;
    }

    :where(img, picture, svg, video, canvas) {
        display: block;
        max-width: 100%;
    }

    :where(input, button, textarea, select) {
        font: inherit;
    }

    :where(button) {
        border: 0;
    }

    :where(a) {
        color: inherit;
    }
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

@layer ds.tokens {
    :root {
        color-scheme: dark;

        /* Raw palette */
        --ds-navy-990: #050914;
        --ds-navy-975: #080e19;
        --ds-navy-950: #0b1220;
        --ds-navy-900: #111a2b;
        --ds-navy-850: #162035;
        --ds-navy-800: #1a2840;
        --ds-navy-760: #1e2d45;
        --ds-navy-700: #243752;
        --ds-navy-650: #2a3f5f;
        --ds-navy-600: #355274;

        --ds-cyan-500: #00d4ff;
        --ds-cyan-400: #37e0ff;
        --ds-cyan-300: #70eaff;
        --ds-cyan-200: #b6f5ff;

        --ds-green-500: #00e5a0;
        --ds-amber-500: #ffb547;
        --ds-red-500: #ff5b5b;
        --ds-violet-500: #9d7cff;
        --ds-blue-500: #4d8dff;

        --ds-white-100: #f7fbff;
        --ds-white-200: #e8eef4;
        --ds-white-300: #c7d4e2;
        --ds-muted-500: #8faac8;
        --ds-muted-600: #6b7a8d;
        --ds-muted-700: #4d5b6f;

        /* Semantic colors */
        --ds-color-bg-canvas: var(--ds-navy-950);
        --ds-color-bg-deep: var(--ds-navy-990);
        --ds-color-bg-soft: var(--ds-navy-900);
        --ds-color-surface: var(--ds-navy-850);
        --ds-color-surface-2: var(--ds-navy-760);
        --ds-color-surface-3: var(--ds-navy-700);
        --ds-color-surface-raised: #1a2944;
        --ds-color-border: var(--ds-navy-650);
        --ds-color-border-muted: rgba(143, 170, 200, 0.14);
        --ds-color-border-strong: rgba(0, 212, 255, 0.42);
        --ds-color-text: var(--ds-white-200);
        --ds-color-text-strong: var(--ds-white-100);
        --ds-color-text-muted: var(--ds-muted-600);
        --ds-color-text-soft: var(--ds-muted-500);
        --ds-color-accent: var(--ds-cyan-500);
        --ds-color-accent-hover: var(--ds-cyan-400);
        --ds-color-accent-pressed: #00b9df;
        --ds-color-accent-ink: var(--ds-navy-950);
        --ds-color-focus-ring: rgba(0, 212, 255, 0.34);
        --ds-color-success: var(--ds-green-500);
        --ds-color-warning: var(--ds-amber-500);
        --ds-color-danger: var(--ds-red-500);
        --ds-color-info: var(--ds-blue-500);
        --ds-color-discovery: var(--ds-violet-500);

        /* Alpha fills */
        --ds-fill-accent: rgba(0, 212, 255, 0.12);
        --ds-fill-accent-strong: rgba(0, 212, 255, 0.2);
        --ds-fill-success: rgba(0, 229, 160, 0.1);
        --ds-fill-warning: rgba(255, 181, 71, 0.11);
        --ds-fill-danger: rgba(255, 91, 91, 0.1);
        --ds-fill-info: rgba(77, 141, 255, 0.11);
        --ds-fill-discovery: rgba(157, 124, 255, 0.11);
        --ds-fill-glass: rgba(22, 32, 53, 0.72);

        /* Gradients */
        --ds-gradient-canvas:
            radial-gradient(
                circle at 20% 0%,
                rgba(0, 212, 255, 0.12),
                transparent 34rem
            ),
            radial-gradient(
                circle at 88% 14%,
                rgba(157, 124, 255, 0.11),
                transparent 30rem
            ),
            linear-gradient(
                180deg,
                var(--ds-navy-950) 0%,
                var(--ds-navy-990) 100%
            );
        --ds-gradient-panel: linear-gradient(
            180deg,
            rgba(30, 45, 69, 0.76) 0%,
            rgba(22, 32, 53, 0.96) 100%
        );
        --ds-gradient-accent: linear-gradient(
            135deg,
            var(--ds-cyan-400) 0%,
            var(--ds-cyan-500) 45%,
            #00a8ff 100%
        );
        --ds-gradient-success: linear-gradient(
            135deg,
            #36f6bd 0%,
            var(--ds-green-500) 100%
        );
        --ds-gradient-warning: linear-gradient(
            135deg,
            #ffd08a 0%,
            var(--ds-amber-500) 100%
        );
        --ds-gradient-danger: linear-gradient(
            135deg,
            #ff8d8d 0%,
            var(--ds-red-500) 100%
        );
        --ds-gradient-border: linear-gradient(
            135deg,
            rgba(0, 212, 255, 0.46),
            rgba(157, 124, 255, 0.22),
            rgba(42, 63, 95, 0.1)
        );

        /* Typography */
        --ds-font-sans:
            "Inter", ui-sans-serif, system-ui, -apple-system,
            BlinkMacSystemFont, "Segoe UI", sans-serif;
        --ds-font-mono:
            "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
            Consolas, monospace;
        --ds-font-size-2xs: 0.625rem;
        --ds-font-size-xs: 0.72rem;
        --ds-font-size-sm: 0.82rem;
        --ds-font-size-md: 0.9375rem;
        --ds-font-size-lg: 1.0625rem;
        --ds-font-size-xl: 1.25rem;
        --ds-font-size-2xl: 1.5rem;
        --ds-font-size-3xl: 1.875rem;
        --ds-font-size-4xl: clamp(2rem, 4vw, 3.75rem);
        --ds-line-height-tight: 1.15;
        --ds-line-height-normal: 1.55;
        --ds-line-height-relaxed: 1.7;
        --ds-letter-tight: -0.02em;
        --ds-letter-normal: 0;
        --ds-letter-wide: 0.04em;
        --ds-letter-label: 0.1em;

        /* Spacing */
        --ds-space-0: 0;
        --ds-space-1: 0.25rem;
        --ds-space-2: 0.5rem;
        --ds-space-3: 0.75rem;
        --ds-space-4: 1rem;
        --ds-space-5: 1.25rem;
        --ds-space-6: 1.5rem;
        --ds-space-7: 1.75rem;
        --ds-space-8: 2rem;
        --ds-space-10: 2.5rem;
        --ds-space-12: 3rem;
        --ds-space-16: 4rem;
        --ds-space-20: 5rem;
        --ds-space-24: 6rem;

        /* Shape */
        --ds-radius-2xs: 0.25rem;
        --ds-radius-xs: 0.375rem;
        --ds-radius-sm: 0.5rem;
        --ds-radius-md: 0.625rem;
        --ds-radius-lg: 0.75rem;
        --ds-radius-xl: 1rem;
        --ds-radius-2xl: 1.25rem;
        --ds-radius-3xl: 1.5rem;
        --ds-radius-full: 999rem;

        /* Borders */
        --ds-border-thin: 1px;
        --ds-border-medium: 1.5px;
        --ds-border-thick: 2px;

        /* Elevation */
        --ds-shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
        --ds-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
        --ds-shadow-md: 0 16px 48px rgba(0, 0, 0, 0.28);
        --ds-shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.38);
        --ds-shadow-accent:
            0 0 0 1px rgba(0, 212, 255, 0.24), 0 0 32px rgba(0, 212, 255, 0.1);
        --ds-shadow-success:
            0 0 0 1px rgba(0, 229, 160, 0.24), 0 0 32px rgba(0, 229, 160, 0.1);
        --ds-shadow-danger:
            0 0 0 1px rgba(255, 91, 91, 0.24), 0 0 32px rgba(255, 91, 91, 0.1);

        /* Sizing */
        --ds-header-height: 4.0625rem;
        --ds-sidebar-width: 17rem;
        --ds-sidebar-width-compact: 4.5rem;
        --ds-content-max: 78rem;
        --ds-control-height-sm: 2rem;
        --ds-control-height-md: 2.5rem;
        --ds-control-height-lg: 3rem;

        /* Motion */
        --ds-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
        --ds-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
        --ds-duration-fast: 120ms;
        --ds-duration-normal: 200ms;
        --ds-duration-slow: 320ms;
        --ds-duration-slower: 560ms;

        /* Z-index */
        --ds-z-base: 0;
        --ds-z-sticky: 20;
        --ds-z-dropdown: 50;
        --ds-z-overlay: 80;
        --ds-z-modal: 100;
        --ds-z-toast: 120;
        --ds-z-tooltip: 140;

        /* Backward-compatible aliases from the attached HTML */
        --navy: var(--ds-color-bg-canvas);
        --slate: var(--ds-color-surface-2);
        --panel: var(--ds-color-surface);
        --border: var(--ds-color-border);
        --cyan: var(--ds-color-accent);
        --cyan-dim: var(--ds-fill-accent);
        --white: var(--ds-color-text);
        --muted: var(--ds-color-text-muted);
        --green: var(--ds-color-success);
        --amber: var(--ds-color-warning);
        --red: var(--ds-color-danger);
        --mono: var(--ds-font-mono);
        --sans: var(--ds-font-sans);
    }

    [data-theme="light"] {
        color-scheme: light;
        --ds-color-bg-canvas: #f4f8fc;
        --ds-color-bg-deep: #e8f0f8;
        --ds-color-bg-soft: #eef5fb;
        --ds-color-surface: #ffffff;
        --ds-color-surface-2: #edf5fc;
        --ds-color-surface-3: #e1edf8;
        --ds-color-surface-raised: #ffffff;
        --ds-color-border: #c9d8e8;
        --ds-color-border-muted: rgba(18, 34, 54, 0.11);
        --ds-color-border-strong: rgba(0, 122, 158, 0.42);
        --ds-color-text: #132033;
        --ds-color-text-strong: #08111f;
        --ds-color-text-muted: #607286;
        --ds-color-text-soft: #496781;
        --ds-color-accent: #007da0;
        --ds-color-accent-hover: #006c8b;
        --ds-color-accent-pressed: #005c78;
        --ds-color-accent-ink: #ffffff;
        --ds-color-focus-ring: rgba(0, 125, 160, 0.28);
        --ds-fill-accent: rgba(0, 125, 160, 0.1);
        --ds-fill-accent-strong: rgba(0, 125, 160, 0.17);
        --ds-fill-glass: rgba(255, 255, 255, 0.78);
        --ds-gradient-canvas:
            radial-gradient(
                circle at 20% 0%,
                rgba(0, 125, 160, 0.12),
                transparent 34rem
            ),
            radial-gradient(
                circle at 88% 14%,
                rgba(78, 76, 255, 0.08),
                transparent 30rem
            ),
            linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
        --ds-gradient-panel: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(242, 247, 252, 0.96) 100%
        );
        --ds-shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
        --ds-shadow-sm: 0 8px 24px rgba(19, 43, 70, 0.1);
        --ds-shadow-md: 0 16px 48px rgba(19, 43, 70, 0.14);
        --ds-shadow-lg: 0 28px 80px rgba(19, 43, 70, 0.18);
    }

    [data-theme="aurora"] {
        --ds-color-bg-canvas: #080a18;
        --ds-color-bg-deep: #050712;
        --ds-color-surface: #14182d;
        --ds-color-surface-2: #1d2542;
        --ds-color-border: #303d67;
        --ds-color-accent: #4debff;
        --ds-color-accent-hover: #91f5ff;
        --ds-color-discovery: #c47dff;
        --ds-fill-accent: rgba(77, 235, 255, 0.13);
        --ds-gradient-canvas:
            radial-gradient(
                circle at 18% 12%,
                rgba(77, 235, 255, 0.16),
                transparent 30rem
            ),
            radial-gradient(
                circle at 82% 2%,
                rgba(196, 125, 255, 0.16),
                transparent 32rem
            ),
            radial-gradient(
                circle at 58% 98%,
                rgba(0, 229, 160, 0.1),
                transparent 28rem
            ),
            linear-gradient(180deg, #080a18 0%, #050712 100%);
    }

    [data-density="compact"] {
        --ds-space-3: 0.625rem;
        --ds-space-4: 0.875rem;
        --ds-space-5: 1rem;
        --ds-space-6: 1.25rem;
        --ds-control-height-md: 2.25rem;
        --ds-control-height-lg: 2.625rem;
    }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

@layer ds.base {
    html,
    body {
        height: 100%;
    }

    body {
        position: relative;
        min-height: 100vh;
        background: var(--ds-gradient-canvas);
        color: var(--ds-color-text);
        font-family: var(--ds-font-sans);
        font-size: var(--ds-font-size-md);
        line-height: var(--ds-line-height-normal);
        font-weight: 400;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background-image:
            linear-gradient(rgba(143, 170, 200, 0.035) 1px, transparent 1px),
            linear-gradient(
                90deg,
                rgba(143, 170, 200, 0.035) 1px,
                transparent 1px
            );
        background-size: 28px 28px;
        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.78),
            transparent 85%
        );
    }

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(0, 212, 255, 0.035),
                transparent
            ),
            radial-gradient(
                circle at 50% 0%,
                rgba(255, 255, 255, 0.035),
                transparent 22rem
            );
        opacity: 0.95;
    }

    ::selection {
        background: var(--ds-fill-accent-strong);
        color: var(--ds-color-text-strong);
    }

    :focus-visible {
        outline: 2px solid var(--ds-color-accent);
        outline-offset: 3px;
        box-shadow: 0 0 0 6px var(--ds-color-focus-ring);
    }

    :where(h1, h2, h3, h4, h5, h6) {
        color: var(--ds-color-text-strong);
        font-weight: 700;
        letter-spacing: var(--ds-letter-tight);
        line-height: var(--ds-line-height-tight);
    }

    h1,
    .ds-heading-1 {
        font-size: var(--ds-font-size-4xl);
    }

    h2,
    .ds-heading-2 {
        font-size: var(--ds-font-size-3xl);
    }

    h3,
    .ds-heading-3 {
        font-size: var(--ds-font-size-2xl);
    }

    h4,
    .ds-heading-4 {
        font-size: var(--ds-font-size-xl);
    }

    h5,
    .ds-heading-5 {
        font-size: var(--ds-font-size-lg);
    }

    h6,
    .ds-heading-6 {
        font-size: var(--ds-font-size-md);
    }

    p,
    .ds-body {
        color: var(--ds-color-text);
    }

    small,
    .ds-small {
        color: var(--ds-color-text-muted);
        font-size: var(--ds-font-size-xs);
    }

    a,
    .ds-link {
        color: var(--ds-color-accent);
        text-decoration: none;
        text-underline-offset: 0.22em;
        transition:
            color var(--ds-duration-fast) var(--ds-ease-standard),
            text-decoration-color var(--ds-duration-fast)
                var(--ds-ease-standard);
    }

    a:hover,
    .ds-link:hover {
        color: var(--ds-color-accent-hover);
        text-decoration: underline;
        text-decoration-color: currentColor;
    }

    code,
    kbd,
    samp,
    pre,
    .ds-mono {
        font-family: var(--ds-font-mono);
    }

    code,
    kbd,
    .ds-code-inline {
        border: 1px solid var(--ds-color-border-muted);
        border-radius: var(--ds-radius-xs);
        background: rgba(5, 9, 20, 0.34);
        color: var(--ds-color-accent-hover);
        font-size: 0.88em;
        padding: 0.12rem 0.34rem;
    }

    pre,
    .ds-code-block {
        overflow: auto;
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-lg);
        background:
            linear-gradient(180deg, rgba(5, 9, 20, 0.28), rgba(5, 9, 20, 0.48)),
            var(--ds-color-surface);
        box-shadow: var(--ds-shadow-xs);
        color: var(--ds-color-text-soft);
        font-size: var(--ds-font-size-xs);
        line-height: var(--ds-line-height-relaxed);
        padding: var(--ds-space-5);
    }

    hr,
    .ds-separator {
        height: 1px;
        border: 0;
        background: var(--ds-color-border);
    }

    :where(::-webkit-scrollbar) {
        width: 12px;
        height: 12px;
    }

    :where(::-webkit-scrollbar-track) {
        background: var(--ds-color-bg-deep);
    }

    :where(::-webkit-scrollbar-thumb) {
        background: var(--ds-color-surface-3);
        border: 3px solid var(--ds-color-bg-deep);
        border-radius: var(--ds-radius-full);
    }

    :where(::-webkit-scrollbar-thumb:hover) {
        background: var(--ds-color-border);
    }
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

@layer ds.layout {
    .ds-app,
    .app {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: var(--ds-gradient-canvas);
        color: var(--ds-color-text);
    }

    body > header,
    .ds-app-header,
    .app-header {
        min-height: var(--ds-header-height);
        padding: var(--ds-space-5) var(--ds-space-8);
        display: flex;
        align-items: center;
        gap: 0.875rem;
        border-bottom: 1px solid var(--ds-color-border);
        background: rgba(11, 18, 32, 0.86);
        backdrop-filter: blur(18px);
        position: sticky;
        top: 0;
        z-index: var(--ds-z-sticky);
    }

    .ds-header-group,
    .header-group {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        min-width: 0;
    }

    .ds-header-actions,
    .header-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: var(--ds-space-3);
    }

    body > header h1,
    .ds-brand-title,
    .app-title {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--ds-color-text-strong);
        white-space: nowrap;
    }

    body > header h1 span,
    .ds-brand-title span,
    .app-title span {
        color: var(--ds-color-accent);
    }

    .ds-shell,
    .app-shell,
    main:has(> .input-panel + .output-panel) {
        flex: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0;
        overflow: hidden;
        min-height: calc(100vh - var(--ds-header-height));
    }

    .ds-dashboard-shell {
        min-height: calc(100vh - var(--ds-header-height));
        display: grid;
        grid-template-columns: var(--ds-sidebar-width) minmax(0, 1fr);
    }

    .ds-sidebar,
    .sidebar {
        border-right: 1px solid var(--ds-color-border);
        background: rgba(8, 14, 25, 0.72);
        backdrop-filter: blur(18px);
        padding: var(--ds-space-5);
        overflow-y: auto;
    }

    .ds-content,
    .content {
        min-width: 0;
        padding: var(--ds-space-8);
    }

    .ds-content-narrow {
        max-width: 58rem;
        margin-inline: auto;
    }

    .ds-content-wide {
        max-width: var(--ds-content-max);
        margin-inline: auto;
    }

    .input-panel,
    .ds-input-panel,
    .ds-pane-left {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--ds-space-4);
        padding: var(--ds-space-6);
        border-right: 1px solid var(--ds-color-border);
        overflow: hidden;
    }

    .output-panel,
    .ds-output-panel,
    .ds-pane-right {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--ds-space-5);
        padding: var(--ds-space-6);
        overflow-y: auto;
    }

    .ds-stack,
    .stack {
        display: flex;
        flex-direction: column;
        gap: var(--stack-gap, var(--ds-space-4));
    }

    .ds-cluster,
    .cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--cluster-gap, var(--ds-space-3));
    }

    .ds-grid,
    .grid {
        display: grid;
        gap: var(--grid-gap, var(--ds-space-4));
    }

    .ds-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ds-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ds-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ds-auto-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    }

    .ds-split {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ds-space-4);
    }
}

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */

@layer ds.components {
    /* Brand */
    .logo-icon,
    .ds-logo-icon,
    .brand-mark {
        inline-size: 2.125rem;
        block-size: 2.125rem;
        flex: 0 0 auto;
        display: inline-grid;
        place-items: center;
        border: 1.5px solid var(--ds-color-accent);
        border-radius: var(--ds-radius-sm);
        background:
            linear-gradient(
                135deg,
                var(--ds-fill-accent),
                rgba(0, 212, 255, 0.04)
            ),
            var(--ds-color-bg-soft);
        box-shadow: var(--ds-shadow-accent);
        color: var(--ds-color-accent);
    }

    .logo-icon svg,
    .ds-logo-icon svg,
    .brand-mark svg {
        inline-size: 1.125rem;
        block-size: 1.125rem;
    }

    .header-tag,
    .ds-header-tag,
    .ds-kicker-pill {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        min-height: 1.45rem;
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-full);
        background: var(--ds-color-surface-2);
        color: var(--ds-color-text-muted);
        font-family: var(--ds-font-mono);
        font-size: var(--ds-font-size-2xs);
        letter-spacing: 0.02em;
        padding: 0.2rem 0.625rem;
        white-space: nowrap;
    }

    .header-tag::before,
    .ds-header-tag::before,
    .ds-kicker-pill::before {
        content: "";
        inline-size: 0.375rem;
        block-size: 0.375rem;
        border-radius: 50%;
        background: var(--ds-color-accent);
        box-shadow: 0 0 12px var(--ds-color-accent);
    }

    /* Labels */
    .panel-label,
    .ds-label,
    .label {
        display: inline-flex;
        align-items: center;
        gap: var(--ds-space-2);
        color: var(--ds-color-text-muted);
        font-size: var(--ds-font-size-xs);
        font-weight: 700;
        letter-spacing: var(--ds-letter-label);
        line-height: 1;
        text-transform: uppercase;
    }

    .panel-label::before,
    .ds-label[data-dot="true"]::before,
    .label[data-dot="true"]::before {
        content: "";
        inline-size: 0.375rem;
        block-size: 0.375rem;
        border-radius: var(--ds-radius-full);
        background: var(--ds-color-accent);
        box-shadow: 0 0 16px rgba(0, 212, 255, 0.55);
    }

    .ds-eyebrow,
    .eyebrow {
        color: var(--ds-color-accent);
        font-family: var(--ds-font-mono);
        font-size: var(--ds-font-size-2xs);
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    /* Buttons */
    button,
    .ds-button,
    .btn {
        --button-bg: var(--ds-color-surface-2);
        --button-fg: var(--ds-color-text);
        --button-border: var(--ds-color-border);
        --button-shadow: none;
        min-height: var(--ds-control-height-md);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: 1px solid var(--button-border);
        border-radius: var(--ds-radius-sm);
        background: var(--button-bg);
        box-shadow: var(--button-shadow);
        color: var(--button-fg);
        cursor: pointer;
        font-family: var(--ds-font-sans);
        font-size: var(--ds-font-size-sm);
        font-weight: 600;
        letter-spacing: 0.005em;
        line-height: 1;
        padding: 0 1.25rem;
        text-decoration: none;
        user-select: none;
        white-space: nowrap;
        transition:
            transform var(--ds-duration-fast) var(--ds-ease-standard),
            border-color var(--ds-duration-fast) var(--ds-ease-standard),
            background var(--ds-duration-fast) var(--ds-ease-standard),
            color var(--ds-duration-fast) var(--ds-ease-standard),
            opacity var(--ds-duration-fast) var(--ds-ease-standard),
            box-shadow var(--ds-duration-fast) var(--ds-ease-standard);
    }

    button:hover,
    .ds-button:hover,
    .btn:hover {
        border-color: var(--ds-color-text-muted);
        color: var(--ds-color-text-strong);
        text-decoration: none;
        transform: translateY(-1px);
    }

    button:active,
    .ds-button:active,
    .btn:active {
        transform: translateY(0) scale(0.98);
    }

    button:disabled,
    .ds-button[disabled],
    .ds-button[aria-disabled="true"],
    .btn[disabled] {
        cursor: not-allowed;
        opacity: 0.48;
        transform: none;
    }

    .btn-primary,
    .ds-button-primary,
    .button-primary {
        --button-bg: var(--ds-gradient-accent);
        --button-fg: var(--ds-color-accent-ink);
        --button-border: rgba(0, 212, 255, 0.52);
        --button-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.16) inset,
            0 12px 32px rgba(0, 212, 255, 0.18);
    }

    .btn-primary:hover,
    .ds-button-primary:hover,
    .button-primary:hover {
        color: var(--ds-color-accent-ink);
        filter: brightness(1.04);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.18) inset,
            0 16px 42px rgba(0, 212, 255, 0.24);
    }

    .btn-ghost,
    .ds-button-ghost,
    .button-ghost {
        --button-bg: transparent;
        --button-fg: var(--ds-color-text-muted);
        --button-border: var(--ds-color-border);
    }

    .btn-ghost:hover,
    .ds-button-ghost:hover,
    .button-ghost:hover {
        --button-bg: rgba(143, 170, 200, 0.05);
        --button-fg: var(--ds-color-text-strong);
    }

    .ds-button-secondary,
    .button-secondary {
        --button-bg: var(--ds-color-surface-2);
        --button-fg: var(--ds-color-text);
        --button-border: var(--ds-color-border);
    }

    .ds-button-danger,
    .button-danger {
        --button-bg: var(--ds-fill-danger);
        --button-fg: var(--ds-color-danger);
        --button-border: rgba(255, 91, 91, 0.34);
    }

    .ds-button-success,
    .button-success {
        --button-bg: var(--ds-fill-success);
        --button-fg: var(--ds-color-success);
        --button-border: rgba(0, 229, 160, 0.34);
    }

    .ds-button-warning,
    .button-warning {
        --button-bg: var(--ds-fill-warning);
        --button-fg: var(--ds-color-warning);
        --button-border: rgba(255, 181, 71, 0.34);
    }

    .ds-button-sm,
    .button-sm {
        min-height: var(--ds-control-height-sm);
        border-radius: var(--ds-radius-xs);
        font-size: var(--ds-font-size-xs);
        padding-inline: 0.75rem;
    }

    .ds-button-lg,
    .button-lg {
        min-height: var(--ds-control-height-lg);
        border-radius: var(--ds-radius-md);
        font-size: var(--ds-font-size-md);
        padding-inline: 1.5rem;
    }

    .ds-button-icon,
    .button-icon {
        inline-size: var(--ds-control-height-md);
        padding-inline: 0;
    }

    .btn-row,
    .ds-button-row,
    .button-row {
        display: flex;
        align-items: center;
        gap: var(--ds-space-3);
    }

    .btn-row > .btn-primary,
    .ds-button-row > .ds-button-primary,
    .button-row > .button-primary {
        flex: 1;
    }

    /* Form controls */
    .ds-fieldset,
    fieldset {
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-lg);
        padding: var(--ds-space-5);
    }

    .ds-fieldset legend,
    fieldset legend {
        color: var(--ds-color-text-muted);
        font-size: var(--ds-font-size-xs);
        font-weight: 700;
        letter-spacing: var(--ds-letter-label);
        padding-inline: var(--ds-space-2);
        text-transform: uppercase;
    }

    .ds-form-field,
    .form-field {
        display: grid;
        gap: var(--ds-space-2);
    }

    .ds-form-label,
    label {
        color: var(--ds-color-text-soft);
        font-size: var(--ds-font-size-sm);
        font-weight: 600;
    }

    .ds-input,
    .ds-select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        width: 100%;
        min-height: var(--ds-control-height-md);
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-md);
        background: rgba(22, 32, 53, 0.88);
        color: var(--ds-color-text);
        font-family: var(--ds-font-sans);
        font-size: var(--ds-font-size-sm);
        line-height: var(--ds-line-height-normal);
        outline: none;
        padding: 0.625rem 0.875rem;
        transition:
            border-color var(--ds-duration-normal) var(--ds-ease-standard),
            box-shadow var(--ds-duration-normal) var(--ds-ease-standard),
            background var(--ds-duration-normal) var(--ds-ease-standard);
    }

    textarea,
    .ds-textarea,
    .code-input {
        min-height: 12rem;
        resize: vertical;
        overflow: auto;
        background:
            linear-gradient(
                180deg,
                rgba(8, 14, 25, 0.14),
                rgba(8, 14, 25, 0.3)
            ),
            var(--ds-color-surface);
        color: var(--ds-color-accent);
        font-family: var(--ds-font-mono);
        font-size: var(--ds-font-size-xs);
        line-height: var(--ds-line-height-relaxed);
        padding: 1.125rem;
    }

    .input-panel textarea,
    .ds-input-panel textarea {
        flex: 1;
        resize: none;
    }

    .ds-input:hover,
    .ds-select:hover,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
    select:hover,
    textarea:hover {
        border-color: rgba(143, 170, 200, 0.46);
    }

    .ds-input:focus,
    .ds-select:focus,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
    select:focus,
    textarea:focus {
        border-color: var(--ds-color-accent);
        box-shadow:
            0 0 0 4px var(--ds-color-focus-ring),
            var(--ds-shadow-xs);
    }

    .ds-input::placeholder,
    input::placeholder,
    textarea::placeholder {
        color: var(--ds-color-text-muted);
        opacity: 0.78;
    }

    .ds-help-text,
    .help-text {
        color: var(--ds-color-text-muted);
        font-size: var(--ds-font-size-xs);
        line-height: var(--ds-line-height-normal);
    }

    .ds-input-group,
    .input-group {
        display: flex;
        align-items: stretch;
    }

    .ds-input-group > :where(.ds-input, input, select),
    .input-group > :where(.ds-input, input, select) {
        border-radius: 0;
    }

    .ds-input-group > :first-child,
    .input-group > :first-child {
        border-start-start-radius: var(--ds-radius-md);
        border-end-start-radius: var(--ds-radius-md);
    }

    .ds-input-group > :last-child,
    .input-group > :last-child {
        border-start-end-radius: var(--ds-radius-md);
        border-end-end-radius: var(--ds-radius-md);
    }

    .ds-checkbox,
    .ds-radio,
    input[type="checkbox"],
    input[type="radio"] {
        accent-color: var(--ds-color-accent);
    }

    .ds-switch,
    .switch {
        --switch-size: 1.35rem;
        position: relative;
        inline-size: 2.6rem;
        block-size: 1.45rem;
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-full);
        background: var(--ds-color-surface-2);
        cursor: pointer;
        transition:
            background var(--ds-duration-normal) var(--ds-ease-standard),
            border-color var(--ds-duration-normal) var(--ds-ease-standard);
    }

    .ds-switch::after,
    .switch::after {
        content: "";
        inline-size: 1rem;
        block-size: 1rem;
        margin-inline-start: 0.18rem;
        border-radius: 50%;
        background: var(--ds-color-text-muted);
        box-shadow: var(--ds-shadow-sm);
        transition:
            transform var(--ds-duration-normal) var(--ds-ease-standard),
            background var(--ds-duration-normal) var(--ds-ease-standard);
    }

    .ds-switch[aria-checked="true"],
    .switch[aria-checked="true"],
    input:checked + .ds-switch,
    input:checked + .switch {
        border-color: rgba(0, 212, 255, 0.52);
        background: var(--ds-fill-accent-strong);
    }

    .ds-switch[aria-checked="true"]::after,
    .switch[aria-checked="true"]::after,
    input:checked + .ds-switch::after,
    input:checked + .switch::after {
        transform: translateX(1.1rem);
        background: var(--ds-color-accent);
    }

    /* Cards, panels, sections */
    .ds-card,
    .card,
    .section {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-md);
        background: var(--ds-gradient-panel);
        box-shadow: var(--ds-shadow-xs);
    }

    .ds-card::before,
    .card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.035),
            transparent 42%
        );
    }

    .ds-card-hover,
    .card-hover {
        transition:
            transform var(--ds-duration-normal) var(--ds-ease-standard),
            border-color var(--ds-duration-normal) var(--ds-ease-standard),
            box-shadow var(--ds-duration-normal) var(--ds-ease-standard);
    }

    .ds-card-hover:hover,
    .card-hover:hover {
        transform: translateY(-2px);
        border-color: var(--ds-color-border-strong);
        box-shadow: var(--ds-shadow-accent), var(--ds-shadow-sm);
    }

    .ds-card-header,
    .card-header,
    .section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ds-space-3);
        min-height: 2.5rem;
        border-bottom: 1px solid var(--ds-color-border);
        background: linear-gradient(
            180deg,
            rgba(30, 45, 69, 0.92),
            rgba(30, 45, 69, 0.76)
        );
        color: var(--ds-color-accent);
        font-size: var(--ds-font-size-2xs);
        font-weight: 800;
        letter-spacing: 0.09em;
        line-height: 1;
        padding: 0.7rem 1rem;
        text-transform: uppercase;
    }

    .ds-card-body,
    .card-body,
    .section-body {
        padding: var(--ds-space-5);
    }

    .ds-card-footer,
    .card-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--ds-space-3);
        border-top: 1px solid var(--ds-color-border);
        background: rgba(8, 14, 25, 0.18);
        padding: var(--ds-space-4) var(--ds-space-5);
    }

    .ds-glass-panel,
    .glass-panel {
        border: 1px solid var(--ds-color-border-muted);
        border-radius: var(--ds-radius-xl);
        background: var(--ds-fill-glass);
        backdrop-filter: blur(22px);
        box-shadow: var(--ds-shadow-md);
    }

    .ds-border-gradient,
    .border-gradient {
        position: relative;
        border: 0;
    }

    .ds-border-gradient::before,
    .border-gradient::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: var(--ds-gradient-border);
        pointer-events: none;
        mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        mask-composite: exclude;
    }

    .ds-well,
    .well {
        border: 1px solid var(--ds-color-border-muted);
        border-radius: var(--ds-radius-md);
        background: rgba(5, 9, 20, 0.22);
        padding: var(--ds-space-4);
    }

    /* Certificate/data output */
    .cert-output,
    .ds-report,
    .report {
        display: flex;
        flex-direction: column;
        gap: var(--ds-space-4);
    }

    .field-grid,
    .ds-field-grid,
    .data-list {
        display: flex;
        flex-direction: column;
    }

    .field,
    .ds-data-row,
    .data-row {
        display: grid;
        grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
        gap: var(--ds-space-2);
        align-items: start;
        border-bottom: 1px solid var(--ds-color-border);
        padding: 0.625rem 1rem;
    }

    .field:last-child,
    .ds-data-row:last-child,
    .data-row:last-child {
        border-bottom: 0;
    }

    .field-key,
    .ds-data-key,
    .data-key {
        color: var(--ds-color-text-muted);
        font-size: var(--ds-font-size-xs);
        font-weight: 700;
        letter-spacing: 0.06em;
        line-height: 1.5;
        text-transform: uppercase;
    }

    .field-val,
    .ds-data-value,
    .data-value {
        min-width: 0;
        color: var(--ds-color-text);
        font-family: var(--ds-font-mono);
        font-size: var(--ds-font-size-xs);
        line-height: var(--ds-line-height-relaxed);
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .field-val.mono-small,
    .mono-small,
    .ds-mono-small {
        color: var(--ds-color-text-soft);
        font-family: var(--ds-font-mono);
        font-size: var(--ds-font-size-2xs);
    }

    .field-val.highlight,
    .highlight,
    .ds-text-accent {
        color: var(--ds-color-accent);
    }

    .field-val.ok,
    .ok,
    .ds-text-success {
        color: var(--ds-color-success);
    }

    .field-val.warn,
    .warn,
    .ds-text-warning {
        color: var(--ds-color-warning);
    }

    .field-val.bad,
    .bad,
    .ds-text-danger {
        color: var(--ds-color-danger);
    }

    .copy-row,
    .ds-copy-row {
        display: flex;
        align-items: center;
        gap: var(--ds-space-2);
        min-width: 0;
    }

    .copy-row > :first-child,
    .ds-copy-row > :first-child {
        min-width: 0;
        flex: 1;
    }

    .copy-btn,
    .ds-copy-button {
        min-height: 1.5rem;
        flex: 0 0 auto;
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-xs);
        background: var(--ds-color-surface-2);
        color: var(--ds-color-text-muted);
        cursor: pointer;
        font-family: var(--ds-font-sans);
        font-size: var(--ds-font-size-2xs);
        font-weight: 700;
        padding: 0.18rem 0.5rem;
    }

    .copy-btn:hover,
    .ds-copy-button:hover {
        color: var(--ds-color-text-strong);
        border-color: var(--ds-color-text-muted);
    }

    /* Status banners and alerts */
    .validity-banner,
    .ds-banner,
    .banner,
    .ds-alert,
    .alert {
        --banner-color: var(--ds-color-accent);
        --banner-fill: var(--ds-fill-accent);
        --banner-border: rgba(0, 212, 255, 0.3);
        display: flex;
        align-items: center;
        gap: var(--ds-space-3);
        border: 1px solid var(--banner-border);
        border-radius: var(--ds-radius-md);
        background: var(--banner-fill);
        color: var(--banner-color);
        font-size: var(--ds-font-size-sm);
        font-weight: 650;
        line-height: var(--ds-line-height-normal);
        padding: 0.875rem 1.125rem;
    }

    .validity-banner .days,
    .ds-banner-meta,
    .banner-meta {
        margin-left: auto;
        color: currentColor;
        font-family: var(--ds-font-mono);
        font-size: var(--ds-font-size-xs);
        opacity: 0.82;
        white-space: nowrap;
    }

    .validity-banner.valid,
    .ds-banner-success,
    .banner-success,
    .ds-alert-success,
    .alert-success {
        --banner-color: var(--ds-color-success);
        --banner-fill: var(--ds-fill-success);
        --banner-border: rgba(0, 229, 160, 0.3);
    }

    .validity-banner.expired,
    .validity-banner.bad,
    .ds-banner-danger,
    .banner-danger,
    .ds-alert-danger,
    .alert-danger {
        --banner-color: var(--ds-color-danger);
        --banner-fill: var(--ds-fill-danger);
        --banner-border: rgba(255, 91, 91, 0.34);
    }

    .validity-banner.warning,
    .validity-banner.warn,
    .ds-banner-warning,
    .banner-warning,
    .ds-alert-warning,
    .alert-warning {
        --banner-color: var(--ds-color-warning);
        --banner-fill: var(--ds-fill-warning);
        --banner-border: rgba(255, 181, 71, 0.34);
    }

    .ds-banner-info,
    .banner-info,
    .ds-alert-info,
    .alert-info {
        --banner-color: var(--ds-color-info);
        --banner-fill: var(--ds-fill-info);
        --banner-border: rgba(77, 141, 255, 0.34);
    }

    .error-box,
    .ds-error-box {
        border: 1px solid rgba(255, 91, 91, 0.34);
        border-radius: var(--ds-radius-md);
        background: var(--ds-fill-danger);
        color: var(--ds-color-danger);
        font-size: var(--ds-font-size-sm);
        line-height: var(--ds-line-height-relaxed);
        padding: 1.125rem 1.25rem;
    }

    .error-box strong,
    .ds-error-box strong {
        display: block;
        margin-bottom: 0.25rem;
        color: var(--ds-color-danger);
    }

    /* Badges and tags */
    .san-list,
    .ds-tag-list,
    .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .san-tag,
    .ds-tag,
    .tag,
    .ds-badge,
    .badge {
        --tag-color: var(--ds-color-accent);
        --tag-fill: var(--ds-fill-accent);
        --tag-border: rgba(0, 212, 255, 0.28);
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        width: fit-content;
        border: 1px solid var(--tag-border);
        border-radius: var(--ds-radius-full);
        background: var(--tag-fill);
        color: var(--tag-color);
        font-family: var(--ds-font-mono);
        font-size: var(--ds-font-size-2xs);
        font-weight: 600;
        line-height: 1;
        padding: 0.28rem 0.6rem;
        white-space: nowrap;
    }

    .ds-tag-success,
    .tag-success,
    .ds-badge-success,
    .badge-success {
        --tag-color: var(--ds-color-success);
        --tag-fill: var(--ds-fill-success);
        --tag-border: rgba(0, 229, 160, 0.3);
    }

    .ds-tag-warning,
    .tag-warning,
    .ds-badge-warning,
    .badge-warning {
        --tag-color: var(--ds-color-warning);
        --tag-fill: var(--ds-fill-warning);
        --tag-border: rgba(255, 181, 71, 0.34);
    }

    .ds-tag-danger,
    .tag-danger,
    .ds-badge-danger,
    .badge-danger {
        --tag-color: var(--ds-color-danger);
        --tag-fill: var(--ds-fill-danger);
        --tag-border: rgba(255, 91, 91, 0.34);
    }

    .ds-tag-muted,
    .tag-muted,
    .ds-badge-muted,
    .badge-muted {
        --tag-color: var(--ds-color-text-muted);
        --tag-fill: rgba(143, 170, 200, 0.08);
        --tag-border: var(--ds-color-border-muted);
    }

    .ds-status-dot,
    .status-dot {
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 0 0 12px currentColor;
    }

    /* Empty states */
    .empty-state,
    .ds-empty-state,
    .empty {
        flex: 1;
        min-height: 16rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--ds-space-3);
        color: var(--ds-color-text-muted);
        text-align: center;
    }

    .empty-state svg,
    .ds-empty-state svg,
    .empty svg {
        opacity: 0.3;
    }

    .empty-state p,
    .ds-empty-state p,
    .empty p {
        max-width: 16rem;
        color: var(--ds-color-text-muted);
        font-size: var(--ds-font-size-sm);
        line-height: var(--ds-line-height-relaxed);
    }

    /* Navigation */
    .ds-nav,
    .nav {
        display: grid;
        gap: var(--ds-space-1);
    }

    .ds-nav-section,
    .nav-section {
        margin-block: var(--ds-space-4) var(--ds-space-2);
        color: var(--ds-color-text-muted);
        font-size: var(--ds-font-size-2xs);
        font-weight: 800;
        letter-spacing: var(--ds-letter-label);
        text-transform: uppercase;
    }

    .ds-nav-item,
    .nav-item {
        display: flex;
        align-items: center;
        gap: var(--ds-space-3);
        min-height: 2.5rem;
        border: 1px solid transparent;
        border-radius: var(--ds-radius-sm);
        color: var(--ds-color-text-muted);
        font-size: var(--ds-font-size-sm);
        font-weight: 600;
        padding: 0.55rem 0.75rem;
        text-decoration: none;
        transition:
            background var(--ds-duration-fast) var(--ds-ease-standard),
            color var(--ds-duration-fast) var(--ds-ease-standard),
            border-color var(--ds-duration-fast) var(--ds-ease-standard);
    }

    .ds-nav-item:hover,
    .nav-item:hover {
        border-color: var(--ds-color-border-muted);
        background: rgba(143, 170, 200, 0.06);
        color: var(--ds-color-text-strong);
        text-decoration: none;
    }

    .ds-nav-item[aria-current="page"],
    .nav-item[aria-current="page"],
    .ds-nav-item.active,
    .nav-item.active {
        border-color: rgba(0, 212, 255, 0.28);
        background: var(--ds-fill-accent);
        color: var(--ds-color-accent);
    }

    /* Tabs */
    .ds-tabs,
    .tabs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ds-space-1);
        border-bottom: 1px solid var(--ds-color-border);
    }

    .ds-tab,
    .tab {
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
        background: transparent;
        color: var(--ds-color-text-muted);
        cursor: pointer;
        font-size: var(--ds-font-size-sm);
        font-weight: 650;
        min-height: 2.5rem;
        padding: 0 var(--ds-space-4);
        transition:
            color var(--ds-duration-fast) var(--ds-ease-standard),
            background var(--ds-duration-fast) var(--ds-ease-standard),
            border-color var(--ds-duration-fast) var(--ds-ease-standard);
    }

    .ds-tab:hover,
    .tab:hover {
        background: rgba(143, 170, 200, 0.05);
        color: var(--ds-color-text-strong);
    }

    .ds-tab[aria-selected="true"],
    .tab[aria-selected="true"],
    .ds-tab.active,
    .tab.active {
        border-color: var(--ds-color-accent);
        color: var(--ds-color-accent);
    }

    /* Tables */
    .ds-table-wrap,
    .table-wrap {
        overflow: auto;
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-md);
        background: var(--ds-color-surface);
    }

    .ds-table,
    table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--ds-font-size-sm);
    }

    .ds-table th,
    table th {
        color: var(--ds-color-accent);
        font-size: var(--ds-font-size-xs);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-align: left;
        text-transform: uppercase;
    }

    .ds-table th,
    .ds-table td,
    table th,
    table td {
        border-bottom: 1px solid var(--ds-color-border);
        padding: 0.75rem 1rem;
        vertical-align: top;
    }

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

    .ds-table tbody tr:hover,
    table tbody tr:hover {
        background: rgba(0, 212, 255, 0.045);
    }

    /* Stats */
    .ds-stat-grid,
    .stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
        gap: var(--ds-space-4);
    }

    .ds-stat,
    .stat-card {
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-lg);
        background: var(--ds-gradient-panel);
        padding: var(--ds-space-5);
    }

    .ds-stat-label,
    .stat-label {
        color: var(--ds-color-text-muted);
        font-size: var(--ds-font-size-xs);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .ds-stat-value,
    .stat-value {
        margin-top: var(--ds-space-2);
        color: var(--ds-color-text-strong);
        font-family: var(--ds-font-mono);
        font-size: clamp(1.35rem, 2vw, 2rem);
        font-weight: 700;
        line-height: 1;
    }

    .ds-stat-trend,
    .stat-trend {
        margin-top: var(--ds-space-3);
        color: var(--ds-color-text-muted);
        font-size: var(--ds-font-size-xs);
    }

    /* Progress */
    .ds-progress,
    .progress {
        --progress-value: 0%;
        position: relative;
        overflow: hidden;
        block-size: 0.55rem;
        border: 1px solid var(--ds-color-border-muted);
        border-radius: var(--ds-radius-full);
        background: rgba(5, 9, 20, 0.35);
    }

    .ds-progress::before,
    .progress::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: var(--progress-value);
        border-radius: inherit;
        background: var(--ds-gradient-accent);
        box-shadow: 0 0 24px rgba(0, 212, 255, 0.28);
    }

    .ds-progress-success::before,
    .progress-success::before {
        background: var(--ds-gradient-success);
    }

    .ds-progress-warning::before,
    .progress-warning::before {
        background: var(--ds-gradient-warning);
    }

    .ds-progress-danger::before,
    .progress-danger::before {
        background: var(--ds-gradient-danger);
    }

    /* Timeline */
    .ds-timeline,
    .timeline {
        display: grid;
        gap: var(--ds-space-4);
    }

    .ds-timeline-item,
    .timeline-item {
        position: relative;
        display: grid;
        grid-template-columns: 1rem minmax(0, 1fr);
        gap: var(--ds-space-3);
    }

    .ds-timeline-item::before,
    .timeline-item::before {
        content: "";
        position: absolute;
        inset-block: 1.15rem -1.15rem;
        inset-inline-start: 0.46rem;
        inline-size: 1px;
        background: var(--ds-color-border);
    }

    .ds-timeline-item:last-child::before,
    .timeline-item:last-child::before {
        display: none;
    }

    .ds-timeline-dot,
    .timeline-dot {
        inline-size: 0.875rem;
        block-size: 0.875rem;
        margin-top: 0.25rem;
        border: 2px solid var(--ds-color-accent);
        border-radius: 50%;
        background: var(--ds-color-bg-canvas);
        box-shadow: 0 0 18px rgba(0, 212, 255, 0.28);
    }

    /* Command bar */
    .ds-command-bar,
    .command-bar {
        display: flex;
        align-items: center;
        gap: var(--ds-space-3);
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-xl);
        background: rgba(8, 14, 25, 0.68);
        box-shadow: var(--ds-shadow-md);
        padding: var(--ds-space-3);
    }

    .ds-command-bar :where(input, .ds-input),
    .command-bar :where(input, .ds-input) {
        min-height: 2.25rem;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .ds-command-key,
    .command-key,
    kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5rem;
        min-height: 1.35rem;
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-xs);
        background: rgba(255, 255, 255, 0.04);
        color: var(--ds-color-text-muted);
        font-family: var(--ds-font-mono);
        font-size: var(--ds-font-size-2xs);
        padding-inline: 0.32rem;
    }

    /* Terminal */
    .ds-terminal,
    .terminal {
        overflow: hidden;
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-lg);
        background: #050914;
        box-shadow: var(--ds-shadow-md);
        color: var(--ds-color-text-soft);
        font-family: var(--ds-font-mono);
    }

    .ds-terminal-header,
    .terminal-header {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        min-height: 2.25rem;
        border-bottom: 1px solid var(--ds-color-border);
        background: rgba(30, 45, 69, 0.72);
        padding-inline: 0.75rem;
    }

    .ds-terminal-dot,
    .terminal-dot {
        inline-size: 0.62rem;
        block-size: 0.62rem;
        border-radius: 50%;
        background: var(--ds-color-text-muted);
    }

    .ds-terminal-dot:nth-child(1),
    .terminal-dot:nth-child(1) {
        background: var(--ds-color-danger);
    }

    .ds-terminal-dot:nth-child(2),
    .terminal-dot:nth-child(2) {
        background: var(--ds-color-warning);
    }

    .ds-terminal-dot:nth-child(3),
    .terminal-dot:nth-child(3) {
        background: var(--ds-color-success);
    }

    .ds-terminal-body,
    .terminal-body {
        overflow: auto;
        padding: var(--ds-space-5);
        line-height: var(--ds-line-height-relaxed);
    }

    /* Skeletons */
    .ds-skeleton,
    .skeleton {
        position: relative;
        overflow: hidden;
        border-radius: var(--ds-radius-sm);
        background: rgba(143, 170, 200, 0.1);
    }

    .ds-skeleton::after,
    .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent
        );
        animation: ds-shimmer 1.6s infinite;
    }

    /* Modal, drawer, dropdown, toast */
    .ds-overlay,
    .overlay {
        position: fixed;
        inset: 0;
        z-index: var(--ds-z-overlay);
        background: rgba(5, 9, 20, 0.72);
        backdrop-filter: blur(8px);
    }

    .ds-modal,
    .modal {
        position: fixed;
        inset: 50% auto auto 50%;
        z-index: var(--ds-z-modal);
        inline-size: min(42rem, calc(100vw - 2rem));
        max-height: calc(100vh - 2rem);
        overflow: auto;
        transform: translate(-50%, -50%);
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-xl);
        background: var(--ds-gradient-panel);
        box-shadow: var(--ds-shadow-lg);
    }

    .ds-drawer,
    .drawer {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: var(--ds-z-modal);
        inline-size: min(28rem, 100vw);
        overflow: auto;
        border-left: 1px solid var(--ds-color-border);
        background: var(--ds-gradient-panel);
        box-shadow: var(--ds-shadow-lg);
    }

    .ds-dropdown,
    .dropdown {
        position: absolute;
        z-index: var(--ds-z-dropdown);
        min-width: 12rem;
        overflow: hidden;
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-md);
        background: var(--ds-color-surface-raised);
        box-shadow: var(--ds-shadow-md);
        padding: var(--ds-space-2);
    }

    .ds-menu-item,
    .menu-item {
        display: flex;
        align-items: center;
        gap: var(--ds-space-3);
        width: 100%;
        border-radius: var(--ds-radius-sm);
        color: var(--ds-color-text-muted);
        cursor: pointer;
        font-size: var(--ds-font-size-sm);
        padding: 0.55rem 0.65rem;
    }

    .ds-menu-item:hover,
    .menu-item:hover {
        background: var(--ds-fill-accent);
        color: var(--ds-color-accent);
    }

    .ds-toast-region,
    .toast-region {
        position: fixed;
        inset-block-start: calc(var(--ds-header-height) + var(--ds-space-4));
        inset-inline-end: var(--ds-space-4);
        z-index: var(--ds-z-toast);
        display: grid;
        gap: var(--ds-space-3);
        width: min(24rem, calc(100vw - 2rem));
    }

    .ds-toast,
    .toast {
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-lg);
        background: var(--ds-color-surface-raised);
        box-shadow: var(--ds-shadow-md);
        color: var(--ds-color-text);
        padding: var(--ds-space-4);
    }

    /* Tooltip */
    [data-tooltip] {
        position: relative;
    }

    [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        z-index: var(--ds-z-tooltip);
        inset-block-end: calc(100% + 0.55rem);
        inset-inline-start: 50%;
        width: max-content;
        max-width: 18rem;
        transform: translateX(-50%) translateY(0.25rem);
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-xs);
        background: var(--ds-color-bg-deep);
        box-shadow: var(--ds-shadow-md);
        color: var(--ds-color-text);
        font-size: var(--ds-font-size-xs);
        line-height: var(--ds-line-height-normal);
        opacity: 0;
        padding: 0.4rem 0.55rem;
        pointer-events: none;
        transition:
            opacity var(--ds-duration-fast) var(--ds-ease-standard),
            transform var(--ds-duration-fast) var(--ds-ease-standard);
    }

    [data-tooltip]:hover::after,
    [data-tooltip]:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* Avatars */
    .ds-avatar,
    .avatar {
        inline-size: 2.25rem;
        block-size: 2.25rem;
        display: inline-grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid var(--ds-color-border);
        border-radius: 50%;
        background: var(--ds-fill-accent);
        color: var(--ds-color-accent);
        font-size: var(--ds-font-size-sm);
        font-weight: 800;
    }

    .ds-avatar-sm,
    .avatar-sm {
        inline-size: 1.75rem;
        block-size: 1.75rem;
        font-size: var(--ds-font-size-xs);
    }

    .ds-avatar-lg,
    .avatar-lg {
        inline-size: 3rem;
        block-size: 3rem;
        font-size: var(--ds-font-size-lg);
    }

    /* Accordion */
    .ds-accordion,
    .accordion {
        border: 1px solid var(--ds-color-border);
        border-radius: var(--ds-radius-md);
        overflow: hidden;
    }

    .ds-accordion details,
    .accordion details {
        border-bottom: 1px solid var(--ds-color-border);
        background: var(--ds-color-surface);
    }

    .ds-accordion details:last-child,
    .accordion details:last-child {
        border-bottom: 0;
    }

    .ds-accordion summary,
    .accordion summary {
        cursor: pointer;
        color: var(--ds-color-text-strong);
        font-weight: 700;
        padding: var(--ds-space-4) var(--ds-space-5);
    }

    .ds-accordion details > :not(summary),
    .accordion details > :not(summary) {
        padding-inline: var(--ds-space-5);
        padding-bottom: var(--ds-space-4);
    }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

@layer ds.utilities {
    .ds-container {
        width: min(100% - 2rem, var(--ds-content-max));
        margin-inline: auto;
    }

    .ds-full-height {
        min-height: 100vh;
    }

    .ds-hidden,
    [hidden] {
        display: none !important;
    }

    .ds-sr-only,
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
        clip-path: inset(50%) !important;
    }

    .ds-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ds-break-anywhere {
        overflow-wrap: anywhere;
    }

    .ds-text-center {
        text-align: center;
    }

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

    .ds-text-muted {
        color: var(--ds-color-text-muted) !important;
    }

    .ds-text-soft {
        color: var(--ds-color-text-soft) !important;
    }

    .ds-text-strong {
        color: var(--ds-color-text-strong) !important;
    }

    .ds-bg-surface {
        background: var(--ds-color-surface) !important;
    }

    .ds-bg-surface-2 {
        background: var(--ds-color-surface-2) !important;
    }

    .ds-border {
        border: 1px solid var(--ds-color-border) !important;
    }

    .ds-rounded-sm {
        border-radius: var(--ds-radius-sm) !important;
    }

    .ds-rounded-md {
        border-radius: var(--ds-radius-md) !important;
    }

    .ds-rounded-lg {
        border-radius: var(--ds-radius-lg) !important;
    }

    .ds-rounded-full {
        border-radius: var(--ds-radius-full) !important;
    }

    .ds-shadow-sm {
        box-shadow: var(--ds-shadow-sm) !important;
    }

    .ds-shadow-md {
        box-shadow: var(--ds-shadow-md) !important;
    }

    .ds-shadow-accent {
        box-shadow: var(--ds-shadow-accent) !important;
    }

    .ds-flex {
        display: flex !important;
    }

    .ds-inline-flex {
        display: inline-flex !important;
    }

    .ds-grid-display {
        display: grid !important;
    }

    .ds-items-center {
        align-items: center !important;
    }

    .ds-justify-between {
        justify-content: space-between !important;
    }

    .ds-justify-center {
        justify-content: center !important;
    }

    .ds-gap-1 {
        gap: var(--ds-space-1) !important;
    }
    .ds-gap-2 {
        gap: var(--ds-space-2) !important;
    }
    .ds-gap-3 {
        gap: var(--ds-space-3) !important;
    }
    .ds-gap-4 {
        gap: var(--ds-space-4) !important;
    }
    .ds-gap-5 {
        gap: var(--ds-space-5) !important;
    }
    .ds-gap-6 {
        gap: var(--ds-space-6) !important;
    }

    .ds-p-0 {
        padding: var(--ds-space-0) !important;
    }
    .ds-p-2 {
        padding: var(--ds-space-2) !important;
    }
    .ds-p-3 {
        padding: var(--ds-space-3) !important;
    }
    .ds-p-4 {
        padding: var(--ds-space-4) !important;
    }
    .ds-p-5 {
        padding: var(--ds-space-5) !important;
    }
    .ds-p-6 {
        padding: var(--ds-space-6) !important;
    }
    .ds-p-8 {
        padding: var(--ds-space-8) !important;
    }

    .ds-px-4 {
        padding-inline: var(--ds-space-4) !important;
    }
    .ds-px-6 {
        padding-inline: var(--ds-space-6) !important;
    }
    .ds-py-4 {
        padding-block: var(--ds-space-4) !important;
    }
    .ds-py-6 {
        padding-block: var(--ds-space-6) !important;
    }

    .ds-m-0 {
        margin: 0 !important;
    }
    .ds-mt-2 {
        margin-top: var(--ds-space-2) !important;
    }
    .ds-mt-4 {
        margin-top: var(--ds-space-4) !important;
    }
    .ds-mt-6 {
        margin-top: var(--ds-space-6) !important;
    }
    .ds-mb-2 {
        margin-bottom: var(--ds-space-2) !important;
    }
    .ds-mb-4 {
        margin-bottom: var(--ds-space-4) !important;
    }
    .ds-mb-6 {
        margin-bottom: var(--ds-space-6) !important;
    }

    .ds-w-full {
        width: 100% !important;
    }
    .ds-min-w-0 {
        min-width: 0 !important;
    }
    .ds-flex-1 {
        flex: 1 1 0% !important;
    }
    .ds-shrink-0 {
        flex-shrink: 0 !important;
    }

    .ds-overflow-auto {
        overflow: auto !important;
    }
    .ds-overflow-hidden {
        overflow: hidden !important;
    }

    .ds-font-mono {
        font-family: var(--ds-font-mono) !important;
    }
    .ds-font-sans {
        font-family: var(--ds-font-sans) !important;
    }

    .ds-fade-in {
        animation: ds-fade-in var(--ds-duration-slow) var(--ds-ease-standard)
            both;
    }

    .ds-slide-up {
        animation: ds-fade-slide var(--ds-duration-slow)
            var(--ds-ease-emphasized) both;
    }

    .ds-scanline {
        position: relative;
        overflow: hidden;
    }

    .ds-scanline::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        block-size: 1px;
        inset-block-start: 0;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(0, 212, 255, 0.78),
            transparent
        );
        animation: ds-scan 2.8s linear infinite;
        pointer-events: none;
    }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@layer ds.motion {
    @keyframes fadeSlide {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes ds-fade-slide {
        from {
            opacity: 0;
            transform: translateY(0.5rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes ds-fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes ds-shimmer {
        100% {
            transform: translateX(100%);
        }
    }

    @keyframes ds-pulse-glow {
        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(0, 212, 255, 0);
        }
        50% {
            box-shadow: 0 0 0 8px rgba(0, 212, 255, 0.1);
        }
    }

    @keyframes ds-scan {
        from {
            transform: translateY(-1rem);
        }
        to {
            transform: translateY(26rem);
        }
    }

    .section,
    .field,
    .ds-card,
    .ds-data-row {
        animation: fadeSlide var(--ds-duration-slow) var(--ds-ease-standard)
            both;
    }
}

/* --------------------------------------------------------------------------
   Responsive and accessibility
   -------------------------------------------------------------------------- */

@layer ds.responsive {
    @media (max-width: 960px) {
        .ds-dashboard-shell {
            grid-template-columns: var(--ds-sidebar-width-compact) minmax(
                    0,
                    1fr
                );
        }

        .ds-grid-4,
        .ds-grid-3 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 768px) {
        body > header,
        .ds-app-header,
        .app-header {
            padding: var(--ds-space-4) var(--ds-space-5);
        }

        .header-tag,
        .ds-header-tag {
            display: none;
        }

        .ds-shell,
        .app-shell,
        main:has(> .input-panel + .output-panel) {
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;
            min-height: auto;
            overflow: visible;
        }

        .input-panel,
        .ds-input-panel,
        .ds-pane-left {
            min-height: 50vh;
            border-right: 0;
            border-bottom: 1px solid var(--ds-color-border);
        }

        .output-panel,
        .ds-output-panel,
        .ds-pane-right {
            padding-bottom: var(--ds-space-10);
        }

        .ds-content,
        .content {
            padding: var(--ds-space-5);
        }

        .field,
        .ds-data-row,
        .data-row {
            grid-template-columns: 1fr;
            gap: 0.25rem;
        }

        .validity-banner,
        .ds-banner,
        .banner,
        .ds-alert,
        .alert {
            align-items: flex-start;
            flex-direction: column;
        }

        .validity-banner .days,
        .ds-banner-meta,
        .banner-meta {
            margin-left: 0;
        }

        .ds-grid-4,
        .ds-grid-3,
        .ds-grid-2 {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 480px) {
        .btn-row,
        .ds-button-row,
        .button-row,
        .ds-split {
            align-items: stretch;
            flex-direction: column;
        }

        button,
        .ds-button,
        .btn {
            width: 100%;
        }

        .copy-row,
        .ds-copy-row {
            align-items: stretch;
            flex-direction: column;
        }
    }

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

    @media (prefers-contrast: more) {
        :root {
            --ds-color-border: #5d7799;
            --ds-color-text-muted: #afc4da;
            --ds-color-focus-ring: rgba(0, 212, 255, 0.52);
        }
    }

    @media print {
        body {
            background: #ffffff !important;
            color: #111827 !important;
        }

        body::before,
        body::after,
        .ds-sidebar,
        .sidebar,
        .btn-row,
        .ds-button-row,
        .button-row {
            display: none !important;
        }

        .section,
        .ds-card,
        .card {
            border-color: #d1d5db !important;
            background: #ffffff !important;
            color: #111827 !important;
            box-shadow: none !important;
            break-inside: avoid;
        }
    }
}