/* ============================================
   EVOLUTION MODERN FOUNDATION
   Bio-Skeuo Fusion system layer
   ============================================ */

:root {
    /* Color: base void */
    --modern-color-void-950: #060b11;
    --modern-color-void-925: #09101a;
    --modern-color-void-900: #0b1320;
    --modern-color-void-875: #101a29;
    --modern-color-void-850: #152133;

    /* Color: bio primary */
    --modern-color-bio-500: #4ce7a7;
    --modern-color-bio-450: #63f0b7;
    --modern-color-bio-400: #8ff2b7;
    --modern-color-bio-350: #a8ffd3;
    --modern-color-bio-300: #c5ffe2;

    /* Color: technical support */
    --modern-color-cyan-500: #59c7ff;
    --modern-color-cyan-400: #7fd8ff;
    --modern-color-cyan-300: #b6edff;

    /* Color: secondary expansion */
    --modern-color-amber-500: #e7c66d;
    --modern-color-amber-400: #ffd788;
    --modern-color-amber-300: #ffe8b4;

    --modern-color-coral-500: #f06c72;
    --modern-color-coral-400: #ff8f95;
    --modern-color-coral-300: #ffc4c7;

    /* Color: text */
    --modern-color-text-strong: #eefcf5;
    --modern-color-text-primary: rgba(238, 252, 245, 0.92);
    --modern-color-text-secondary: rgba(218, 233, 227, 0.72);
    --modern-color-text-muted: rgba(188, 203, 198, 0.58);
    --modern-color-text-disabled: rgba(140, 155, 151, 0.48);

    /* Color: borders */
    --modern-border-soft: rgba(133, 216, 182, 0.14);
    --modern-border-medium: rgba(133, 216, 182, 0.22);
    --modern-border-strong: rgba(157, 239, 205, 0.34);
    --modern-border-cyan: rgba(115, 205, 255, 0.26);
    --modern-border-amber: rgba(231, 198, 109, 0.28);
    --modern-border-danger: rgba(240, 108, 114, 0.28);

    /* Surface backgrounds */
    --modern-surface-shell:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01) 22%, rgba(5, 10, 16, 0.24) 100%),
        linear-gradient(145deg, rgba(18, 28, 40, 0.94) 0%, rgba(10, 17, 27, 0.98) 100%);
    --modern-surface-panel:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 18%, rgba(8, 12, 18, 0.2) 100%),
        linear-gradient(145deg, rgba(19, 29, 40, 0.97) 0%, rgba(12, 18, 28, 0.98) 100%);
    --modern-surface-hero:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012) 22%, rgba(6, 11, 16, 0.18) 100%),
        radial-gradient(circle at 18% 18%, rgba(143, 242, 183, 0.12), transparent 28%),
        radial-gradient(circle at 82% 8%, rgba(255, 216, 129, 0.08), transparent 22%),
        linear-gradient(145deg, rgba(18, 28, 38, 0.98) 0%, rgba(10, 16, 25, 0.995) 100%);
    --modern-surface-chamber:
        radial-gradient(circle at 18% 18%, rgba(143, 242, 183, 0.1), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(255, 216, 129, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.016) 24%, rgba(6, 11, 17, 0.2) 100%),
        linear-gradient(145deg, rgba(20, 31, 44, 0.985) 0%, rgba(11, 18, 28, 0.995) 100%);
    --modern-surface-chip:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
        rgba(9, 14, 21, 0.64);
    --modern-surface-capsule:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.014)),
        rgba(10, 16, 25, 0.78);
    --modern-surface-lens:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.014) 24%, rgba(9, 15, 23, 0.18) 100%),
        linear-gradient(145deg, rgba(16, 24, 35, 0.98) 0%, rgba(9, 15, 24, 0.995) 100%);

    /* Shadows and glows */
    --modern-shadow-soft: 0 12px 28px rgba(2, 8, 14, 0.22);
    --modern-shadow-panel: 0 18px 44px rgba(2, 8, 14, 0.28);
    --modern-shadow-hero: 0 24px 56px rgba(2, 8, 14, 0.34);
    --modern-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -16px 28px rgba(0, 0, 0, 0.18);
    --modern-shadow-capsule: 0 16px 34px rgba(2, 8, 14, 0.26);
    --modern-shadow-lens: 0 20px 40px rgba(2, 8, 14, 0.32);
    --modern-glow-bio: 0 0 0 1px rgba(80, 231, 167, 0.18), 0 0 24px rgba(80, 231, 167, 0.14);
    --modern-glow-cyan: 0 0 0 1px rgba(89, 199, 255, 0.16), 0 0 24px rgba(89, 199, 255, 0.12);
    --modern-glow-amber: 0 0 0 1px rgba(231, 198, 109, 0.18), 0 0 28px rgba(231, 198, 109, 0.14);
    --modern-glow-danger: 0 0 0 1px rgba(240, 108, 114, 0.18), 0 0 24px rgba(240, 108, 114, 0.12);

    /* Radius */
    --modern-radius-sm: 8px;
    --modern-radius-md: 12px;
    --modern-radius-lg: 16px;
    --modern-radius-xl: 24px;
    --modern-radius-hero: 28px;
    --modern-radius-chamber: 32px;
    --modern-radius-capsule: 18px;
    --modern-radius-lens: 22px;
    --modern-radius-organic: 32px 24px 30px 20px;
    --modern-radius-pill: 999px;

    /* Spacing */
    --modern-space-1: 4px;
    --modern-space-2: 8px;
    --modern-space-3: 12px;
    --modern-space-4: 16px;
    --modern-space-5: 20px;
    --modern-space-6: 24px;
    --modern-space-7: 32px;
    --modern-space-8: 40px;
    --modern-space-9: 56px;
    --modern-space-10: 72px;

    /* Type */
    --modern-font-display: "Segoe UI", "Helvetica Neue", sans-serif;
    --modern-font-body: "Segoe UI", "Helvetica Neue", sans-serif;
    --modern-font-mono: "Fira Code", "JetBrains Mono", monospace;

    --modern-text-display: clamp(40px, 5vw, 56px);
    --modern-text-screen-title: clamp(24px, 3vw, 34px);
    --modern-text-section-title: 18px;
    --modern-text-metric: clamp(20px, 3vw, 36px);
    --modern-text-body: 15px;
    --modern-text-body-compact: 13px;
    --modern-text-micro: 11px;

    /* Motion */
    --modern-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --modern-ease-press: cubic-bezier(0.3, 0, 0.2, 1);
    --modern-duration-fast: 140ms;
    --modern-duration-base: 220ms;
    --modern-duration-slow: 320ms;

    /* Layers */
    --modern-z-overlay: 2100;
    --modern-z-menu: 2000;
    --modern-z-modal: 2200;
    --modern-z-floating: 2400;
}

.modern-ui,
.modern-screen {
    color: var(--modern-color-text-primary);
    font-family: var(--modern-font-body);
}

.modern-screen {
    position: relative;
    background:
        radial-gradient(circle at 18% 16%, rgba(76, 231, 167, 0.07), transparent 24%),
        radial-gradient(circle at 82% 14%, rgba(231, 198, 109, 0.06), transparent 20%),
        linear-gradient(180deg, rgba(7, 12, 18, 0.985) 0%, rgba(11, 18, 26, 0.995) 100%);
}

.modern-shell {
    background: var(--modern-surface-shell);
    border: 1px solid var(--modern-border-soft);
    border-radius: var(--modern-radius-xl);
    box-shadow: var(--modern-shadow-soft), var(--modern-shadow-inset);
}

.modern-panel {
    position: relative;
    overflow: hidden;
    background: var(--modern-surface-panel);
    border: 1px solid var(--modern-border-medium);
    border-radius: var(--modern-radius-lg);
    box-shadow: var(--modern-shadow-panel), var(--modern-shadow-inset);
}

.modern-panel::before,
.modern-hero::before,
.modern-reward-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 18%, rgba(143, 242, 183, 0.08), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(255, 216, 129, 0.06), transparent 20%);
}

.modern-hero {
    position: relative;
    overflow: hidden;
    background: var(--modern-surface-hero);
    border: 1px solid var(--modern-border-strong);
    border-radius: var(--modern-radius-hero);
    box-shadow: var(--modern-shadow-hero), var(--modern-shadow-inset), var(--modern-glow-bio);
}

.modern-chamber {
    position: relative;
    overflow: hidden;
    background: var(--modern-surface-chamber);
    border: 1px solid var(--modern-border-strong);
    border-radius: var(--modern-radius-chamber);
    box-shadow: var(--modern-shadow-hero), var(--modern-shadow-inset);
}

.modern-chamber::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 14%, rgba(143, 242, 183, 0.12), transparent 26%),
        radial-gradient(circle at 86% 10%, rgba(255, 216, 129, 0.08), transparent 18%);
}

.modern-capsule {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--modern-border-medium);
    border-radius: var(--modern-radius-capsule);
    background: var(--modern-surface-capsule);
    box-shadow: var(--modern-shadow-capsule), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.modern-lens {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(157, 239, 205, 0.26);
    border-radius: var(--modern-radius-lens);
    background: var(--modern-surface-lens);
    box-shadow: var(--modern-shadow-lens), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.modern-lens::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 28%),
        radial-gradient(circle at 76% 18%, rgba(89, 199, 255, 0.14), transparent 24%);
    mix-blend-mode: screen;
    opacity: 0.8;
}

.modern-seam {
    position: relative;
}

.modern-seam::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(89, 199, 255, 0.02), rgba(143, 242, 183, 0.42), rgba(255, 216, 129, 0.12));
    box-shadow:
        0 0 0 1px rgba(143, 242, 183, 0.08),
        0 0 18px rgba(89, 199, 255, 0.12);
}

.modern-section-title {
    margin: 0;
    color: var(--modern-color-text-strong);
    font-size: var(--modern-text-section-title);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.modern-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--modern-space-2);
    padding: 8px 14px;
    border-radius: var(--modern-radius-pill);
    border: 1px solid var(--modern-border-medium);
    background: var(--modern-surface-chip);
    color: var(--modern-color-amber-400);
    font-size: var(--modern-text-micro);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.modern-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 8px 14px;
    border-radius: var(--modern-radius-pill);
    border: 1px solid var(--modern-border-medium);
    background: var(--modern-surface-chip);
    color: var(--modern-color-text-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modern-badge[data-state="ready"],
.modern-badge.is-ready {
    color: var(--modern-color-bio-350);
    border-color: rgba(99, 240, 183, 0.26);
    box-shadow: var(--modern-glow-bio);
}

.modern-badge[data-state="warning"],
.modern-badge.is-warning {
    color: var(--modern-color-amber-300);
    border-color: var(--modern-border-amber);
    box-shadow: var(--modern-glow-amber);
}

.modern-badge[data-state="danger"],
.modern-badge.is-danger {
    color: var(--modern-color-coral-300);
    border-color: var(--modern-border-danger);
    box-shadow: var(--modern-glow-danger);
}

.modern-badge[data-state="claimed"],
.modern-badge.is-claimed {
    color: rgba(214, 226, 222, 0.72);
    border-color: rgba(160, 174, 170, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}

.modern-badge[data-state="repeatable"],
.modern-badge.is-repeatable {
    color: var(--modern-color-amber-300);
    border-color: var(--modern-border-amber);
    box-shadow: var(--modern-glow-amber);
}

.modern-badge[data-state="mutated"],
.modern-badge.is-mutated {
    color: var(--modern-color-cyan-300);
    border-color: var(--modern-border-cyan);
    box-shadow: var(--modern-glow-cyan);
}

.modern-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--modern-space-2);
}

.modern-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid var(--modern-border-soft);
    border-radius: var(--modern-radius-pill);
    background: rgba(10, 16, 24, 0.6);
    color: var(--modern-color-text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
        border-color var(--modern-duration-base) var(--modern-ease-standard),
        background var(--modern-duration-base) var(--modern-ease-standard),
        color var(--modern-duration-base) var(--modern-ease-standard),
        transform var(--modern-duration-fast) var(--modern-ease-standard);
}

.modern-chip:hover {
    border-color: var(--modern-border-medium);
    color: var(--modern-color-text-primary);
    transform: translateY(-1px);
}

.modern-chip[data-state="selected"],
.modern-chip.is-selected,
.modern-chip[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(76, 231, 167, 0.2), rgba(76, 231, 167, 0.08));
    color: var(--modern-color-bio-350);
    border-color: rgba(99, 240, 183, 0.32);
    box-shadow: var(--modern-glow-bio);
}

.modern-nav-button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--modern-border-soft);
    border-radius: 14px;
    background: var(--modern-surface-chip);
    color: var(--modern-color-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform var(--modern-duration-fast) var(--modern-ease-standard),
        border-color var(--modern-duration-base) var(--modern-ease-standard),
        box-shadow var(--modern-duration-base) var(--modern-ease-standard),
        background var(--modern-duration-base) var(--modern-ease-standard);
}

.modern-nav-button:hover {
    transform: translateY(-1px);
    border-color: var(--modern-border-medium);
    box-shadow: var(--modern-glow-cyan);
}

.modern-nav-button[data-state="active"],
.modern-nav-button.is-active {
    border-color: rgba(99, 240, 183, 0.32);
    box-shadow: var(--modern-glow-bio);
}

.modern-button {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition:
        transform var(--modern-duration-fast) var(--modern-ease-standard),
        border-color var(--modern-duration-base) var(--modern-ease-standard),
        box-shadow var(--modern-duration-base) var(--modern-ease-standard),
        filter var(--modern-duration-base) var(--modern-ease-standard),
        background var(--modern-duration-base) var(--modern-ease-standard),
        color var(--modern-duration-base) var(--modern-ease-standard);
}

.modern-button:hover {
    transform: translateY(-1px);
}

.modern-button:active {
    transform: translateY(0) scale(0.985);
}

.modern-button--primary {
    background: linear-gradient(180deg, #a8ffd3 0%, #5add95 32%, #2eb76d 100%);
    color: #0d2419;
    border-color: rgba(191, 255, 224, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 16px 30px rgba(15, 86, 49, 0.26),
        0 0 28px rgba(89, 214, 143, 0.14);
}

.modern-button--primary:hover {
    filter: brightness(1.04);
}

.modern-button--tactile {
    min-height: 48px;
    border-radius: var(--modern-radius-capsule);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -10px 14px rgba(9, 42, 26, 0.2),
        0 18px 34px rgba(15, 86, 49, 0.28),
        0 0 24px rgba(89, 214, 143, 0.12);
}

.modern-button--tactile:hover {
    transform: translateY(-2px);
    filter: brightness(1.05) saturate(1.02);
}

.modern-button--tactile:active {
    transform: translateY(0) scale(0.982);
    box-shadow:
        inset 0 2px 8px rgba(9, 42, 26, 0.24),
        inset 0 -2px 6px rgba(255, 255, 255, 0.2),
        0 10px 20px rgba(15, 86, 49, 0.2);
}

.modern-button--secondary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)), rgba(10, 16, 24, 0.68);
    color: var(--modern-color-text-primary);
    border-color: var(--modern-border-medium);
    box-shadow: var(--modern-shadow-soft);
}

.modern-button--destructive {
    background: linear-gradient(180deg, rgba(240, 108, 114, 0.22), rgba(240, 108, 114, 0.08));
    color: var(--modern-color-coral-300);
    border-color: var(--modern-border-danger);
    box-shadow: var(--modern-glow-danger);
}

.modern-button[disabled],
.modern-button.is-disabled,
.modern-button[data-state="disabled"] {
    cursor: not-allowed;
    color: var(--modern-color-text-disabled);
    border-color: rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.008)), rgba(10, 16, 24, 0.48);
    box-shadow: none;
    transform: none;
}

.modern-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modern-progress__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--modern-color-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modern-progress__track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: var(--modern-radius-pill);
    background: rgba(8, 13, 19, 0.88);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.03);
}

.modern-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(76, 231, 167, 0.7), rgba(99, 240, 183, 1));
    box-shadow: 0 0 16px rgba(99, 240, 183, 0.24);
    transition: width var(--modern-duration-slow) var(--modern-ease-standard);
}

.modern-progress__fill[data-state="warning"] {
    background: linear-gradient(90deg, rgba(231, 198, 109, 0.74), rgba(255, 216, 129, 1));
    box-shadow: 0 0 16px rgba(231, 198, 109, 0.22);
}

.modern-progress__fill[data-state="danger"] {
    background: linear-gradient(90deg, rgba(240, 108, 114, 0.74), rgba(255, 143, 149, 1));
    box-shadow: 0 0 16px rgba(240, 108, 114, 0.22);
}

.modern-reward-tile {
    position: relative;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: var(--modern-space-4);
    align-items: center;
    padding: var(--modern-space-5);
    overflow: hidden;
    border-radius: var(--modern-radius-xl);
    border: 1px solid var(--modern-border-medium);
    background: var(--modern-surface-panel);
    box-shadow: var(--modern-shadow-panel), var(--modern-shadow-inset);
}

.modern-reward-tile__icon {
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)),
        rgba(15, 25, 34, 0.82);
    border: 1px solid rgba(143, 242, 183, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.modern-reward-tile__value {
    color: var(--modern-color-bio-350);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 800;
    line-height: 1;
}

.modern-reward-tile__label {
    margin-top: 8px;
    color: var(--modern-color-text-secondary);
    font-size: 14px;
}

.modern-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--modern-space-4);
    min-height: 56px;
    padding: 12px 16px;
    border-radius: var(--modern-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(10, 16, 24, 0.54);
}

.modern-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--modern-z-overlay);
    background: rgba(4, 8, 12, 0.7);
    backdrop-filter: blur(10px);
}

.modern-modal {
    position: relative;
    z-index: var(--modern-z-modal);
    background: var(--modern-surface-hero);
    border: 1px solid var(--modern-border-medium);
    border-radius: var(--modern-radius-xl);
    box-shadow: var(--modern-shadow-hero), var(--modern-shadow-inset);
}

.modern-focus-ring:focus-visible,
.modern-button:focus-visible,
.modern-chip:focus-visible,
.modern-nav-button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(172, 255, 223, 0.42),
        0 0 0 5px rgba(89, 199, 255, 0.16);
}

@media (max-width: 768px) {
    .modern-nav-button {
        width: 40px;
        height: 40px;
    }

    .modern-button {
        min-height: 42px;
        padding-inline: 16px;
    }

    .modern-reward-tile {
        grid-template-columns: 72px 1fr;
        padding: var(--modern-space-4);
    }

    .modern-reward-tile__icon {
        width: 72px;
        height: 72px;
    }

    .modern-chamber {
        border-radius: 24px;
    }

    .modern-capsule,
    .modern-lens,
    .modern-button--tactile {
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modern-button,
    .modern-chip,
    .modern-nav-button,
    .modern-progress__fill {
        transition: none !important;
    }
}