/* =============================================================================
   DESIGN SYSTEM

   All sizing is derived from a single --size-unit value.
   Change --size-unit to scale the entire system proportionally.
   ============================================================================= */

/* =============================================================================
   1. FONT FACES
   ============================================================================= */

@font-face {
    font-family: "rigton";
    src: url("assets/fonts/rigton.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Ginto";
    src: url("assets/fonts/GintoNord-BoldIta.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Palatino Italic";
    src: url("assets/fonts/PalatinoLTStd-Italic.ttf") format("ttf");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Klarheit Grotesk Semibold";
    src: url("assets/fonts/KlarheitGrotesk-Semibold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Integral Bold";
    src: url("assets/fonts/integral-bold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

/* =============================================================================
   2. DESIGN TOKENS
   ============================================================================= */

:root {
    /* ─────────────────────────────────────────────────────────────────────────────
     This single value controls ALL sizing in the design system.*/
    --size-unit: 4px;

    /* ─────────────────────────────────────────────────────────────────────────────
     SPACING SCALE
     ───────────────────────────────────────────────────────────────────────────── */
    --space-0: 0;
    --space-0_5: calc(var(--size-unit) * 0.5); /*  2px */
    --space-1: var(--size-unit); /*  4px */
    --space-1_5: calc(var(--size-unit) * 1.5); /*  6px */
    --space-2: calc(var(--size-unit) * 2); /*  8px */
    --space-2_5: calc(var(--size-unit) * 2.5); /* 10px */
    --space-3: calc(var(--size-unit) * 3); /* 12px */
    --space-4: calc(var(--size-unit) * 4); /* 16px */
    --space-5: calc(var(--size-unit) * 5); /* 20px */
    --space-6: calc(var(--size-unit) * 6); /* 24px */
    --space-7: calc(var(--size-unit) * 7); /* 28px */
    --space-8: calc(var(--size-unit) * 8); /* 32px */
    --space-10: calc(var(--size-unit) * 10); /* 40px */
    --space-12: calc(var(--size-unit) * 12); /* 48px */
    --space-14: calc(var(--size-unit) * 14); /* 56px */
    --space-16: calc(var(--size-unit) * 16); /* 64px */
    --space-17: calc(var(--size-unit) * 17); /* 68px – menu height etc. */
    --space-20: calc(var(--size-unit) * 20); /* 80px */
    --space-24: calc(var(--size-unit) * 24); /* 96px */
    --space-25: calc(var(--size-unit) * 25); /* 100px */
    --space-32: calc(var(--size-unit) * 32); /* 128px */

    /* ─────────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY SCALE
     ───────────────────────────────────────────────────────────────────────────── */
    --text-2xs: calc(var(--size-unit) * 2.5); /* 10px */
    --text-xs: calc(var(--size-unit) * 2.75); /* 11px */
    --text-sm: calc(var(--size-unit) * 3); /* 12px */
    --text-base: calc(var(--size-unit) * 3.5); /* 14px */
    --text-md: calc(var(--size-unit) * 3.75); /* 15px */
    --text-lg: calc(var(--size-unit) * 4); /* 16px */
    --text-xl: calc(var(--size-unit) * 4.25); /* 17px */
    --text-2xl: calc(var(--size-unit) * 4.5); /* 18px */
    --text-3xl: calc(var(--size-unit) * 5.5); /* 22px */
    --text-4xl: calc(var(--size-unit) * 6); /* 24px */
    --text-5xl: calc(var(--size-unit) * 7.5); /* 30px */
    --text-6xl: calc(var(--size-unit) * 9); /* 36px */
    --text-7xl: calc(var(--size-unit) * 14); /* 56px – auth title */
    --text-8xl: calc(var(--size-unit) * 16); /* 64px – auth title mobile */

    /* ─────────────────────────────────────────────────────────────────────────────
     LINE HEIGHTS
     ───────────────────────────────────────────────────────────────────────────── */
    --leading-none: 1;
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.75;

    /* ─────────────────────────────────────────────────────────────────────────────
     ICON SIZES
     ───────────────────────────────────────────────────────────────────────────── */
    --icon-xs: calc(var(--size-unit) * 4); /* 16px */
    --icon-sm: calc(var(--size-unit) * 4.5); /* 18px */
    --icon-md: calc(var(--size-unit) * 5); /* 20px */
    --icon-lg: calc(var(--size-unit) * 6); /* 24px */
    --icon-xl: calc(var(--size-unit) * 8); /* 32px */
    --icon-2xl: calc(var(--size-unit) * 10); /* 40px */
    --icon-3xl: calc(var(--size-unit) * 12); /* 48px */

    /* ─────────────────────────────────────────────────────────────────────────────
     BORDER RADIUS
     ───────────────────────────────────────────────────────────────────────────── */
    --radius-none: 0;
    --radius-sm: var(--size-unit); /*  4px */
    --radius-md: calc(var(--size-unit) * 2); /*  8px */
    --radius-lg: calc(var(--size-unit) * 2.5); /* 10px */
    --radius-xl: calc(var(--size-unit) * 3); /* 12px */
    --radius-2xl: calc(var(--size-unit) * 4); /* 16px */
    --radius-3xl: calc(var(--size-unit) * 5); /* 20px */
    --radius-4xl: calc(var(--size-unit) * 6); /* 24px */
    --radius-5xl: calc(var(--size-unit) * 25); /* 100px */
    --radius-full: 9999px;

    /* ─────────────────────────────────────────────────────────────────────────────
     COMPONENT HEIGHTS
     ───────────────────────────────────────────────────────────────────────────── */
    --height-input-sm: calc(var(--size-unit) * 7.5); /* 30px */
    --height-input-md: calc(var(--size-unit) * 10); /* 40px */
    --height-input-lg: calc(var(--size-unit) * 12); /* 48px */
    --height-button-sm: calc(var(--size-unit) * 7.5); /* 30px */
    --height-button-md: calc(var(--size-unit) * 10); /* 40px */
    --height-button-lg: calc(var(--size-unit) * 12); /* 48px */
    --height-icon-btn: calc(var(--size-unit) * 9); /* 36px */
    --height-avatar: calc(var(--size-unit) * 10); /* 40px */
    --height-avatar-lg: calc(var(--size-unit) * 11.5); /* 46px */
    --height-header: calc(var(--size-unit) * 16); /* 64px */
    --height-menu: calc(var(--size-unit) * 16.5); /* 66px */
    --height-tile: calc(var(--size-unit) * 25); /* 100px */
    --height-tile-lg: calc(var(--size-unit) * 32.5); /* 130px */
    --height-panel: calc(var(--size-unit) * 125); /* 500px */

    /* ─────────────────────────────────────────────────────────────────────────────
     WIDTHS
     ───────────────────────────────────────────────────────────────────────────── */
    --width-tile: calc(var(--size-unit) * 25); /* 100px */
    --width-panel: calc(var(--size-unit) * 125); /* 500px */
    --width-panel-sm: calc(var(--size-unit) * 100); /* 400px */
    --width-auth: calc(var(--size-unit) * 100); /* 400px */
    --width-menu-item: calc(var(--size-unit) * 45); /* 180px */
    --width-search-bar: calc(var(--size-unit) * 75); /* 300px */
    --width-url-bar: calc(var(--size-unit) * 100); /* 400px */

    /* ─────────────────────────────────────────────────────────────────────────────
     BORDER WIDTHS
     ───────────────────────────────────────────────────────────────────────────── */
    --border-none: 0;
    --border-thin: 1px;
    --border-normal: 1.5px;
    --border-thick: 2px;
    --border-heavy: 3px;
    --border-panel: 5px;

    /* ─────────────────────────────────────────────────────────────────────────────
     COLORS
     ───────────────────────────────────────────────────────────────────────────── */
    --globalnav-background: #fefefe;
    --nude: rgb(227, 220, 208);

    --white: #ffffff;
    --black: #242424;
    --green: #00af28;
    --danger: #fbdfdd;
    --highlight-green: #d5ffab;

    /* Primary palette */
    --primary-50: #f9fcff;
    --primary-100: #dff2ff;
    --primary-200: #c6e8ff;
    --primary-300: #acdeff;
    --primary-400: #93d4ff;
    --primary-500: #80ccff;
    --primary-600: #5abdff;
    --primary-700: #20a6ff;
    --primary-800: #008ae6;
    --primary-900: #0067ac;

    /* Neutral palette */
    --neutral-50: #f7f7f9;
    --neutral-100: #f0f0f4;
    --neutral-200: #e8e8ed;
    --neutral-300: #d6d6dd;
    --neutral-400: #b8b8c2;
    --neutral-500: #9a9aa6;
    --neutral-600: #7c7c89;
    --neutral-700: #5e5e6b;
    --neutral-800: #3f3f4a;
    --neutral-900: #22222a;

    /* ─────────────────────────────────────────────────────────────────────────────
     GRADIENTS
     ───────────────────────────────────────────────────────────────────────────── */
    --primary-gradient-hover: radial-gradient(
        ellipse 90% 90% at center,
        #acdeff 0%,
        #c6e8ff 20%,
        #dff2ff 40%,
        transparent 60%
    );
    --danger-gradient-hover: radial-gradient(
        ellipse 90% 90% at center,
        #f7b8b3 0%,
        #f9c9c5 20%,
        #fbdddd 40%,
        transparent 60%
    );

    /* ─────────────────────────────────────────────────────────────────────────────
     BUTTON TOKENS
     ───────────────────────────────────────────────────────────────────────────── */
    --secondary-button-hover: var(--neutral-100);
    --secondary-button-active: var(--primary-200);

    /* ─────────────────────────────────────────────────────────────────────────────
     TAG SYSTEM
     ───────────────────────────────────────────────────────────────────────────── */
    --tag-border-radius-rounded: var(--radius-full);
    --tag-border-width: 0.9px;
    --tag-color-secondary-outline-border: #c5c5c5;
    --tag-spacing-padding-lg: var(--space-2);
    --tag-font-size-mobile: var(--text-xs);
    --tag-sizing-height: calc(var(--size-unit) * 5); /* 20px */
    --tag-font-size: var(--text-2xs);
    --tag-line-height: var(--leading-tight);
    --tag-font-weight: 500;
    --tag-color-secondary-bg: var(--green);
    --tag-color-secondary-fg: var(--green);

    /* ─────────────────────────────────────────────────────────────────────────────
     TRANSITIONS & EASINGS
     ───────────────────────────────────────────────────────────────────────────── */
    --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.76, 0, 0.24, 1);

    --duration-fast: 0.15s;
    --duration-normal: 0.2s;
    --duration-slow: 0.3s;
    --duration-slower: 0.5s;
    --duration-panel: 0.5s;

    /* ─────────────────────────────────────────────────────────────────────────────
     SHADOWS
     ───────────────────────────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
    --shadow-card:
        0 0 0 0px #00000014, 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a,
        0px 16px 24px -8px #0000000f, 0 0 0 0px hsl(0, 0%, 98%);

    /* ─────────────────────────────────────────────────────────────────────────────
     Z-INDEX SCALE
     ───────────────────────────────────────────────────────────────────────────── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 900;
    --z-overlay: 1000;
    --z-modal: 10000;

    /* ─────────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY FEATURES
     ───────────────────────────────────────────────────────────────────────────── */
    --font-feature-settings:
        "liga" 1, "calt" 1, "ss03" 1, "ss07" 1, "ss08" 1, "cv11" 1;
}

/* =============================================================================
   3. CSS @PROPERTY DEFINITIONS (for animated gradients)
   ============================================================================= */

@property --button-fill {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent;
}

@property --button-fill-stop {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

@property --rg-1-fade {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(90, 189, 255, 0.1);
}

@property --rg-2-fade {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(32, 166, 255, 0.1);
}

@property --rg-3-fade {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(0, 138, 230, 0.1);
}

@property --rg-4-fade {
    syntax: "<color>";
    inherits: true;
    initial-value: rgba(128, 204, 255, 0.1);
}

@property --rg-1-x {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

@property --rg-1-y {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 50%;
}

@property --rg-2-x {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 20%;
}

@property --rg-2-y {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 70%;
}

@property --rg-3-x {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 70%;
}

@property --rg-3-y {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 20%;
}

@property --rg-4-x {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 50%;
}

@property --rg-4-y {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 50%;
}

/* =============================================================================
   4. RESET & BASE STYLES
   ============================================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-feature-settings: var(--font-feature-settings);
    -moz-font-feature-settings: var(--font-feature-settings);
    -ms-font-feature-settings: var(--font-feature-settings);
    -o-font-feature-settings: var(--font-feature-settings);
    font-feature-settings: var(--font-feature-settings);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family:
        "rigton",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "tnum";
    font-display: swap;
    overflow: hidden;
    background: #000;
}

input {
    border-top-width: var(--border-none);
    border-right-width: var(--border-none);
    border-bottom-width: var(--border-none);
    border-left-width: var(--border-none);
}

button {
    border: none;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.hidden {
    display: none !important;
}

/* =============================================================================
   5. KEYFRAME ANIMATIONS
   ============================================================================= */

@keyframes breathe {
    0%,
    100% {
        stroke-width: 0px;
    }
    50% {
        stroke-width: 32px;
    }
}

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

@keyframes gradient-movement {
    30% {
        --rg-1-x: 70%;
        --rg-1-y: 20%;
    }
    40% {
        --rg-2-x: 120%;
        --rg-2-y: 50%;
    }
    45% {
        --rg-4-x: -10%;
        --rg-4-y: 10%;
    }
    50% {
        --rg-3-x: 50%;
        --rg-3-y: 50%;
    }
    70% {
        --rg-1-x: -10%;
        --rg-2-y: -20%;
    }
}

@-webkit-keyframes gradient-movement {
    30% {
        --rg-1-x: 70%;
        --rg-1-y: 20%;
    }
    40% {
        --rg-2-x: 120%;
        --rg-2-y: 50%;
    }
    45% {
        --rg-4-x: -10%;
        --rg-4-y: 10%;
    }
    50% {
        --rg-3-x: 50%;
        --rg-3-y: 50%;
    }
    70% {
        --rg-1-x: -10%;
        --rg-2-y: -20%;
    }
}

/* =============================================================================
   6. LOADER
   ============================================================================= */

#loader-logo {
    max-width: var(--space-16);
    max-height: var(--space-16);
    overflow: visible;
    will-change: transform;
    transform: translateZ(0);
}

#loader-logo path {
    fill: white;
    stroke: white;
    stroke-width: 0;
    animation: breathe 1.8s ease-in-out infinite;
}

/* =============================================================================
   7. AUTH SCREEN
   ============================================================================= */

#auth-screen {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* ── Auth Container ───────────────────────────────────────────────────────── */

.auth-container {
    width: 50vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-12) var(--space-6);
    background: linear-gradient(165deg, #ffffff 0%, var(--neutral-50) 100%);
    position: relative;
    z-index: 2;
    overflow: hidden;
    transition: width 0.6s var(--ease-bounce);
}

.auth-container::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(
        circle,
        rgba(128, 204, 255, 0.1) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.auth-container::after {
    content: "";
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 50%;
    height: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 138, 230, 0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* ── Auth Header ──────────────────────────────────────────────────────────── */

.app-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: var(--z-base);
    opacity: 0;
    transform: translateY(calc(var(--space-10) * -1));
}

.app-header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-header .logo img {
    max-width: calc(var(--space-8) * 4.375); /* 140px */
    height: auto;
    transition: transform var(--duration-slow) ease;
}

.app-header .logo img:hover {
    transform: scale(1.02);
}

.app-header .logo-icon {
    display: none;
}

/* ── Auth Content ─────────────────────────────────────────────────────────── */

.auth-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: var(--width-auth);
    width: 100%;
    padding: 0 var(--space-6);
    position: relative;
    z-index: var(--z-base);
}

.auth-title {
    font-size: var(--text-7xl);
    line-height: var(--leading-tight);
    margin-bottom: calc(var(--space-3) * 0.75);
    font-weight: normal;
    font-family: "rigton", sans-serif;
    color: var(--neutral-900);
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(calc(var(--space-8) * -1));
}

.auth-subtitle {
    font-size: var(--text-2xl);
    color: var(--neutral-600);
    margin-bottom: calc(var(--space-6) + var(--space-2));
    line-height: var(--leading-normal);
    opacity: 0;
    transform: translateY(calc(var(--space-5) * -1));
}

#auth-typewriter {
    display: inline-flex;
    position: relative;
}

.tw-letter {
    display: inline-block;
    will-change: transform, opacity, filter;
}

/* ── Google Button ────────────────────────────────────────────────────────── */

#google-signin-button {
    opacity: 0;
    transform: translateY(calc(var(--space-5) * -1)) scale(0.95);
}

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: calc(var(--space-3) + var(--space-0_5))
        calc(var(--space-12) + var(--space-0_5));
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--neutral-800);
    background: var(--primary-500);
    border: var(--border-none) solid var(--neutral-500);
    border-radius: var(--space-16);
    cursor: pointer;
    transition: all var(--duration-normal) ease;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: var(--space-2);
    font-family: "Klarheit Grotesk Semibold";
    color: var(--white);
}

.google-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(128, 204, 255, 0.12) 0%,
        rgba(0, 138, 230, 0.08) 100%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
}

.google-btn:hover {
    background: white;
    color: var(--neutral-900);
    border: var(--border-thin) solid var(--primary-100);
}

.google-btn:hover::before {
    opacity: 1;
}

.google-btn:active {
    transform: translateY(0);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

.google-btn img {
    width: var(--icon-sm);
    height: var(--icon-sm);
    background-color: white;
    padding: var(--space-1_5);
    border-radius: var(--radius-full);
    box-sizing: content-box;
    position: relative;
    z-index: var(--z-base);
}

.google-btn span,
.google-btn {
    position: relative;
    z-index: var(--z-base);
}

.google-btn::after {
    content: "→";
    position: absolute;
    right: var(--space-2_5);
    top: 50%;
    transform: translateY(-50%) translateX(var(--space-5)) rotate(0deg);
    width: var(--icon-sm);
    height: var(--icon-sm);
    padding: var(--space-1_5);
    padding-bottom: var(--space-4);
    padding-right: var(--space-4);
    border-radius: var(--radius-full);
    box-sizing: content-box;
    color: var(--neutral-900);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--icon-sm);
    opacity: 0;
    transition: all 0.25s ease;
}

.google-btn:hover::after {
    transform: translateY(-50%) translateX(0) rotate(-45deg);
    opacity: 1;
}

.google-btn .btn-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: transform 0.25s ease;
}

.google-btn:hover .btn-inner {
    transform: translateX(calc(var(--space-3) * -1));
}

/* ── Auth Info ────────────────────────────────────────────────────────────── */

.auth-info {
    font-size: calc(var(--text-md) * 0.8);
    margin-top: var(--space-6);
    max-width: calc(var(--space-8) * 9.375); /* 300px */
    color: var(--neutral-500);
    line-height: var(--leading-relaxed);
    opacity: 0;
    transform: translateY(calc(var(--space-2_5) * -1));
}

.auth-info a {
    color: var(--neutral-600);
    text-decoration: none;
    background-image: linear-gradient(var(--primary-500), var(--primary-500));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition:
        background-size var(--duration-slow) ease,
        color var(--duration-normal) ease;
}

.auth-info a:hover {
    color: var(--primary-800);
    background-size: 100% 1px;
}

/* ── Auth Footer ──────────────────────────────────────────────────────────── */

.auth-footer {
    width: 100%;
    text-align: center;
    padding: 0;
    position: relative;
    z-index: var(--z-base);
    opacity: 0;
}

.auth-footer p {
    font-size: var(--text-sm);
    color: var(--neutral-400);
    margin: 0;
    letter-spacing: 0.01em;
}

/* ── Auth Transitions ─────────────────────────────────────────────────────── */

.auth-content,
.auth-footer {
    transition:
        opacity var(--duration-slow) ease,
        transform var(--duration-panel) var(--ease-bounce);
}

#auth-screen.signing-in .auth-content,
#auth-screen.signing-in .auth-footer,
#auth-screen.signing-in .app-header {
    opacity: 0;
    transform: translateX(calc(var(--space-16) * -1));
}

#auth-screen.signing-in .auth-container {
    width: 0;
}

#auth-screen.signing-in .feature-panel {
    width: 100vw;
}

/* =============================================================================
   8. FEATURE PANEL (Auth Right Side)
   ============================================================================= */

.feature-panel {
    width: 50vw;
    height: 100vh;
    background: var(--primary-500);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.6s var(--ease-bounce);
}

.feature-slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fs-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fs-slide:first-child {
    padding: var(--space-12);
}

.fs-slide:nth-child(2),
.fs-slide:nth-child(3) {
    padding: 0;
    border-radius: 0;
}

.fs-slide:nth-child(2) video,
.fs-slide:nth-child(3) video {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.fs-slide video {
    width: auto;
    height: 90%;
    border-radius: var(--radius-5xl);
    object-fit: cover;
}

.fs-slide-inner {
    text-align: center;
    padding: calc(var(--space-16));
    color: var(--neutral-900);
    background: var(--white);
    border-radius: var(--radius-5xl);
    box-shadow: var(--primary-500) 0px 0px var(--space-8) inset;
}

.fs-icon {
    font-size: var(--icon-3xl);
    margin-bottom: var(--space-4);
}

.fs-slide-inner h2 {
    font-size: calc(var(--text-base) * 1.4);
    line-height: var(--leading-normal);
    font-weight: 500;
    margin: 0 0 var(--space-2);
}

.fs-slide-inner p {
    font-size: var(--text-md);
    opacity: 0.55;
    max-width: calc(var(--space-8) * 8.75); /* 280px */
    margin: 0 auto;
}

/* ── Feature Slideshow Dots ───────────────────────────────────────────────── */

.fs-dots {
    position: absolute;
    bottom: var(--space-12);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: calc(var(--space-1) + var(--space-0_5));
    z-index: var(--z-dropdown);
    background: rgba(255, 255, 255, 0.2);
    padding: var(--space-2);
    border-radius: var(--radius-4xl);
}

.fs-dot {
    width: var(--space-1_5);
    height: var(--space-1_5);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition:
        background var(--duration-slow),
        transform var(--duration-slow);
}

.fs-dot.active {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.35);
}

/* ── Feature Slideshow Progress ───────────────────────────────────────────── */

.fs-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--space-0_5);
    background: rgba(255, 255, 255, 0.15);
}

.fs-progress-bar {
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    width: 0%;
}

/* =============================================================================
   9. APP ROOT & CONTAINER
   ============================================================================= */

#app-root canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#container {
    position: fixed;
    inset: 0;
    background: var(--white);
    overflow: hidden;
}

/* =============================================================================
   10. INSTRUCTION TOOLTIP
   ============================================================================= */

.instruction {
    position: fixed;
    top: var(--space-2);
    right: var(--space-2);
    transform: translateX(0%);
    max-width: var(--width-panel-sm);
    min-height: var(--height-menu);
    font-family: "Klarheit Grotesk Semibold";
    font-size: calc(var(--text-md) * 0.8);
    line-height: var(--leading-relaxed);
    text-align: left;
    opacity: 0;
    transition: opacity 0.7s ease;
    z-index: 2000;
    backdrop-filter: blur(var(--space-10));
    -webkit-backdrop-filter: blur(var(--space-10));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--space-2) * 0.75);
    border: var(--border-none) solid rgba(255, 255, 255, 0.55);
    pointer-events: none;
    filter: invert(0);
    background: var(--globalnav-background);
    color: var(--neutral-700);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    padding-left: var(--space-6);
    list-style: none;
    counter-reset: step;
}

.instruction.visible {
    opacity: 1;
    pointer-events: auto;
}

.instruction.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

.instruction-text {
    flex: 1;
    margin: auto;
}

.instructions li {
    counter-increment: step;
    display: flex;
    align-items: flex-start;
    gap: calc(var(--space-1_5));
}

.instructions li::before {
    content: counter(step);
    width: 1.6em;
    height: 1.6em;
    margin-top: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--neutral-100);
    color: var(--neutral-700);
    display: grid;
    place-items: center;
    font-size: 0.85em;
    font-weight: normal;
    line-height: var(--leading-none);
    flex-shrink: 0;
}

/* =============================================================================
   11. HELP BUTTON
   ============================================================================= */

.help-button {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    width: var(--height-input-md);
    height: var(--height-input-md);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: var(--space-5);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal) ease;
    backdrop-filter: blur(var(--space-2_5));
    z-index: var(--z-fixed);
}

.help-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

/* =============================================================================
   12. BUTTON SYSTEM
   ============================================================================= */

/* ── Base Button ──────────────────────────────────────────────────────────── */

.btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-weight: normal;
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-default);
    -webkit-tap-highlight-color: transparent;
    border-top-width: var(--border-none);
    border-right-width: var(--border-none);
    border-bottom-width: var(--border-none);
    border-left-width: var(--border-none);
}

.btn:active {
    transform: scale(0.97);
}

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

.btn:focus-visible {
    outline: var(--border-thick) solid var(--primary-400);
    outline-offset: var(--space-0_5);
}

/* ── Button Sizes ─────────────────────────────────────────────────────────── */

.btn-sm {
    height: var(--height-button-sm);
    padding: 0 var(--space-2_5);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
}

.btn-md {
    height: var(--height-button-md);
    padding: 0 var(--space-5);
    font-size: var(--text-base);
}

.btn-lg {
    height: var(--height-button-lg);
    padding: 0 var(--space-6);
    font-size: var(--text-lg);
}

/* ── Button Variants ──────────────────────────────────────────────────────── */

.btn-primary {
    background: var(--primary-600);
    color: white;
}

.btn-primary:hover {
    transition:
        --button-fill 4s,
        --button-fill-stop 4s;
    animation: gradient-movement 10s alternate infinite ease-in-out;
    animation-delay: calc(sibling-index() * -2000ms);
    background:
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) padding-box,
        radial-gradient(
                circle 120px at var(--rg-1-x) var(--rg-1-y),
                var(--primary-700),
                var(--rg-1-fade)
            )
            border-box,
        radial-gradient(
                circle 150px at var(--rg-2-x) var(--rg-2-y),
                var(--primary-800),
                var(--rg-2-fade)
            )
            border-box,
        radial-gradient(
                circle 160px at var(--rg-3-x) var(--rg-3-y),
                var(--primary-500),
                var(--rg-3-fade)
            )
            border-box,
        radial-gradient(
                circle 200px at var(--rg-4-x) var(--rg-4-y),
                var(--primary-600),
                var(--rg-4-fade)
            )
            border-box;
    background-position:
        center,
        center,
        bottom right,
        top left,
        top right,
        bottom left;
    background-repeat: no-repeat;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
}

.btn-secondary {
    background: var(--neutral-100);
    color: var(--neutral-800);
}

.btn-secondary:hover {
    background: var(--neutral-50);
}

.btn-secondary.selected {
    border: var(--border-thin) solid var(--primary-300);
    background: var(--primary-100);
}

.btn-ghost {
    opacity: 0.5;
    border: var(--border-thin) solid var(--neutral-300);
    background: var(--neutral-100);
    color: var(--neutral-800);
    cursor: not-allowed;
}

.btn-ghost:hover {
    background: var(--neutral-100);
}

.btn-outline {
    background: transparent;
    border: var(--border-thin) solid var(--neutral-200);
    color: var(--neutral-800);
}

.btn-outline:hover {
    background: var(--neutral-50);
}

/* ── Button Layout Helpers ────────────────────────────────────────────────── */

.btn-block {
    width: 100%;
    display: flex;
}

.btn-icon {
    padding: 0;
    width: var(--height-icon-btn);
    height: var(--height-icon-btn);
}

/* =============================================================================
   13. APP HEADER (In-App)
   ============================================================================= */

#app-root .app-header {
    position: sticky;
    top: 0;
    height: var(--height-header);
    width: 100%;
    padding: 0 var(--space-4);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    background: transparent;
    z-index: var(--z-dropdown);
    border-bottom: none;
    opacity: 1;
    transform: none !important;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-1_5);
}

#logo > img {
    height: calc(var(--space-10) + var(--space-1_5));
    width: auto;
    padding: var(--space-2_5) var(--space-1) var(--space-2_5) 0;
    transition: filter var(--duration-slow);
}

.space-name {
    padding-top: calc(var(--space-0_5) + var(--space-0_5) / 2);
    padding-right: var(--space-1_5);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: var(--text-lg);
    letter-spacing: 0.04rem;
    font-family: "Integral Bold";
    cursor: pointer;
    position: relative;
    z-index: var(--z-modal);
    pointer-events: all;
}

.space-name:hover {
    background: rgba(255, 255, 255, 0.2);
}

.space-name[contenteditable="true"] {
    padding-left: var(--space-1_5);
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border: var(--border-thin) solid white;
    cursor: text;
    min-width: 2ch;
}

.space-identity {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.space-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--space-5) + var(--space-0_5));
    height: calc(var(--space-5) + var(--space-0_5));
    border-radius: calc(var(--radius-sm) + var(--space-0_5) / 2);
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
    opacity: 0.8;
    transition:
        opacity var(--duration-fast),
        background var(--duration-fast),
        color var(--duration-fast);
    flex-shrink: 0;
    padding: 0;
}

.space-menu-btn img {
    width: auto;
    height: auto;
    padding-left: 0;
}

.space-identity:hover .space-menu-btn {
    opacity: 1;
}

.space-menu-btn:hover,
.space-menu-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}

/* ── Space Menu ───────────────────────────────────────────────────────────── */

.space-menu {
    position: absolute;
    top: calc(100% + var(--space-1_5));
    left: calc(var(--space-5) * -1 - var(--space-0_5));
    bottom: unset;
    transform-origin: top left;
    visibility: hidden;
    pointer-events: none;
    z-index: var(--z-modal);
    background: var(--globalnav-background);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-2xl);
    padding: var(--space-2);
    min-width: var(--width-menu-item);
    width: max-content;
    height: fit-content;
    max-height: none;
    overflow: visible;
    list-style: none;
    box-shadow: var(--shadow-md);
}

.space-menu.open {
    visibility: visible;
}

.space-menu > li {
    padding: 0;
    list-style: none;
    display: block;
}

.space-menu > li.divider {
    list-style: none;
    height: var(--border-thin);
    background: rgba(0, 0, 0, 0.1);
    margin: var(--space-1) 0;
}

.space-menu > li a {
    color: #1d1d1f;
    font-size: var(--text-md);
    font-weight: 400;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2_5) calc(var(--space-3) + var(--space-0_5));
    border-radius: var(--radius-lg);
    letter-spacing: -0.01em;
    white-space: nowrap;
    max-height: calc(var(--space-10) + var(--space-0_5));
}

.space-menu > li a:hover {
    background: var(--primary-gradient-hover);
}

/* ── Light Sky Header Variant ─────────────────────────────────────────────── */

.app-header.header--light-sky {
    border-bottom-color: rgba(0, 0, 0, 0.15);
    transition: border-bottom-color var(--duration-slow);
}

.app-header.header--light-sky .space-name {
    color: var(--neutral-900);
    transition: color var(--duration-slow);
}

.app-header.header--light-sky .space-name:hover {
    background: rgba(0, 0, 0, 0.07);
}

.app-header.header--light-sky .space-name[contenteditable="true"] {
    background: rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 0, 0, 0.4);
}

.app-header.header--light-sky .space-menu-btn {
    color: rgba(0, 0, 0, 0.75);
    filter: invert(1);
}

.app-header.header--light-sky .space-menu-btn:hover,
.app-header.header--light-sky .space-menu-btn.active {
    background: rgba(0, 0, 0, 0.07);
}

.app-header.header--light-sky .tier {
    filter: invert(0);
}

.app-header.header--light-sky #logo > img {
    filter: invert(1);
}

/* =============================================================================
   14. AESTHETIC PANEL
   ============================================================================= */

.aesthetic-panel {
    display: none;
    position: absolute;
    top: calc(100% - var(--space-3));
    left: var(--space-12);
    width: var(--width-panel-sm);
    max-width: calc(100vw - var(--space-8));
    padding: var(--space-4);
    margin: 0;
    background: var(--globalnav-background);
    box-shadow: var(--shadow-md);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-2xl);
    overflow-x: hidden;
    max-height: 0;
    opacity: 0;
    z-index: var(--z-dropdown);
    transition:
        max-height var(--duration-panel) var(--ease-default),
        opacity var(--duration-slow) var(--ease-default);
}

.aesthetic-panel.open {
    display: block;
    max-height: var(--height-panel);
    opacity: 1;
}

.aesthetic-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    overflow: visible;
}

.aesthetic-tile {
    background: rgba(255, 255, 255, 0.62);
    border-radius: var(--radius-xl);
    border: var(--border-thin) solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    flex: 0 0 var(--height-tile);
    height: var(--height-tile);
    position: relative;
    transform: scale(0.9);
}

.aesthetic-tile:hover {
    transform: scale(0.95);
}

.aesthetic-tile.active {
    border: var(--border-thick) solid var(--primary-400);
    transform: scale(1);
}

.aesthetic-tile-preview {
    width: 100%;
    flex: 1;
    object-fit: cover;
    display: block;
}

.aesthetic-tile-preview.gradient {
    width: 100%;
    flex: 1;
}

.aesthetic-tile-label {
    font-size: var(--text-sm);
    font-weight: normal;
    color: var(--neutral-700);
    text-align: center;
    letter-spacing: -0.005em;
    padding: var(--space-1_5) var(--space-1);
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
}

.aesthetic-section-label {
    padding: 0 0 var(--space-1) 0;
    color: #666;
    line-height: var(--leading-normal);
    font-size: var(--text-md);
    color: var(--black);
    background: transparent;
    opacity: 1;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    width: 100%;
}

.aesthetic-row {
    display: flex;
    flex-direction: row;
    gap: var(--space-3);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    width: 100%;
}

.aesthetic-row::-webkit-scrollbar {
    display: none;
}

.aesthetic-color-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0 var(--space-2) 0;
    width: 100%;
}

.aesthetic-color-swatch {
    width: 100%;
    height: var(--height-tile);
    border-radius: var(--radius-lg);
    border: var(--border-thick) solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color var(--duration-fast);
}

.aesthetic-color-swatch.active {
    border-color: #f6af63;
}

.aesthetic-color-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-base);
    letter-spacing: 0.04em;
    pointer-events: none;
}

.aesthetic-tile--placeholder {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.aesthetic-sky-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2_5);
    margin-bottom: var(--space-1);
}

.aesthetic-filter-row {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.aesthetic-font-dropdown-wrapper {
    position: relative;
    padding: var(--space-1) 0 var(--space-3) 0;
}

.aesthetic-font-btn {
    width: 100%;
    padding: var(--space-2_5) var(--space-4);
    background: rgba(255, 255, 255, 0.62);
    border: var(--border-thin) solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    font-size: var(--text-lg);
    color: var(--black);
    text-align: left;
    cursor: pointer;
    transition: all var(--duration-fast);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aesthetic-font-btn::after {
    content: "•";
    font-family: system-ui;
    opacity: 0.4;
    font-size: var(--text-sm);
}

.aesthetic-font-btn.active {
    border-color: rgba(0, 0, 0, 0.2);
}

.aesthetic-font-menu {
    display: none;
    position: fixed;
    background: var(--globalnav-background);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-xl);
    box-shadow: 0 var(--space-1) var(--space-6) rgba(0, 0, 0, 0.08);
    padding: var(--space-1_5);
    z-index: 9999;
    list-style: none;
    margin: 0;
}

.aesthetic-font-menu.open {
    display: block;
}

.aesthetic-font-option {
    padding: var(--space-2_5) var(--space-3);
    font-size: var(--text-lg);
    color: var(--black);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.1s;
}

.aesthetic-font-option:hover {
    background: var(--secondary-button-hover);
}

.aesthetic-font-option.active {
    background: var(--primary-200);
}

.aesthetic-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.aesthetic-daytime-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-1) 0 var(--space-3) 0;
}

.aesthetic-daytime-icons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--neutral-600);
}

.daytime-icon {
    font-size: var(--icon-xs);
    flex-shrink: 0;
    opacity: 0.4;
}

.aesthetic-slider {
    flex: 1;
    -webkit-appearance: none;
    height: var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--neutral-200);
    outline: none;
    cursor: pointer;
}

.aesthetic-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--space-5);
    height: var(--space-5);
    border-radius: var(--radius-full);
    background: white;
    box-shadow: 0 var(--space-0_5) var(--space-1_5) rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* =============================================================================
   15. LOADING OVERLAY
   ============================================================================= */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--globalnav-background);
    background-image: url("assets/images/sky.webp");
    backdrop-filter: blur(var(--space-16));
    -webkit-backdrop-filter: blur(var(--space-16));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 1;
    transition: opacity 0.8s ease;
    pointer-events: all;
}

.loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none !important;
}

.loading-content {
    text-align: center;
    max-width: var(--width-panel-sm);
    padding: var(--space-8);
}

.loading-spinner {
    width: calc(var(--space-16) - var(--space-1));
    height: calc(var(--space-16) - var(--space-1));
    margin: 0 auto var(--space-6);
    border: var(--border-heavy) solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--white);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: var(--text-4xl);
    color: var(--white);
    margin-bottom: var(--space-6);
    font-weight: 500;
}

.loading-progress {
    width: 100%;
    height: var(--space-0_5);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--space-0_5);
    overflow: hidden;
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.loading-progress-bar {
    height: 100%;
    background: var(--white);
    width: 0%;
    transition: width var(--duration-slow) ease;
    border-radius: var(--space-0_5);
}

.loading-status {
    font-size: var(--text-md);
    color: rgba(255, 255, 255, 0.6);
    min-height: var(--space-6);
}

.loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 1;
    transition: opacity 1s;
    pointer-events: none;
}

.loading.hidden {
    opacity: 0;
}

.spinner {
    width: var(--space-12);
    height: var(--space-12);
    border: var(--border-thick) solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
}

/* =============================================================================
   16. IFRAME & MODAL CONTAINERS
   ============================================================================= */

#iframe-container {
    position: absolute;
    left: -9999px;
    top: -9999px;
    visibility: hidden;
    pointer-events: none;
}

#interactive-iframe-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
    max-width: 1200px;
    max-height: 900px;
    border-radius: var(--radius-xl);
    opacity: 0;
    pointer-events: none;
    z-index: -1000;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
}

#interactive-iframe-overlay.active {
    opacity: 1;
    pointer-events: all;
    z-index: var(--z-overlay);
}

#interactive-iframe-overlay iframe {
    flex: 1;
    border: none;
    border-radius: var(--radius-2xl);
    width: 100%;
}

#iframe-close-button {
    position: absolute;
    top: var(--space-1_5);
    right: var(--space-1_5);
    width: auto;
    padding-left: var(--space-2_5);
    padding-right: var(--space-3);
    gap: var(--space-1);
    color: #57534e;
    font-size: var(--text-base);
    line-height: var(--text-base);
}

#deleteIslandModal {
    position: absolute;
    bottom: calc(var(--space-16) + var(--space-2) + var(--space-0_5));
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100vw - var(--space-8));
    height: 200%;
    list-style: none;
    padding: var(--space-4);
    margin: 0;
    background: var(--globalnav-background);
    box-shadow: var(--shadow-md);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-2xl);
    overflow-x: hidden;
    z-index: var(--z-dropdown);
}

.modal-content {
    background: white;
    padding: var(--space-4);
    border-radius: inherit;
    text-align: center;
    z-index: var(--z-modal);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.deleteIslandModalbuttonscontainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-2);
}

/* =============================================================================
   17. FLOATING MENU (fmenu)
   ============================================================================= */

#mymenu {
    background: var(--globalnav-background);
}

ul.fmenu {
    position: fixed;
    bottom: var(--space-4);
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    gap: var(--space-2);
    z-index: var(--z-overlay);
    max-width: calc(100vw - var(--space-8));
    border-radius: var(--radius-2xl);
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
}

ul.fmenu.dragging {
    cursor: grabbing !important;
}

ul.fmenu > li.fmenu-item {
    display: inline-block;
    position: relative;
}

li.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-12);
    height: var(--height-menu);
    border-radius: var(--radius-2xl);
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

li.drag-handle:active {
    cursor: grabbing;
}

li.drag-handle svg {
    width: var(--space-5);
    height: var(--space-5);
    color: rgba(19, 19, 19, 0.32);
}

/* ── Trigger Buttons ──────────────────────────────────────────────────────── */

ul.fmenu .trigger-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: calc(var(--space-16) - var(--space-0_5));
    max-width: calc(var(--space-16) - var(--space-0_5));
    height: calc(var(--space-16) - var(--space-0_5));
    margin: var(--space-1);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: var(--neutral-900);
}

ul.fmenu .trigger-menu .icon {
    width: var(--icon-lg);
    height: var(--icon-lg);
    flex-shrink: 0;
}

ul.fmenu .trigger-menu .icon path {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

ul.fmenu .trigger-menu span.text {
    display: none;
    font-size: var(--text-md);
    font-weight: 500;
    color: inherit;
    padding: 0 var(--space-4) 0 var(--space-3);
    white-space: nowrap;
    letter-spacing: -0.01em;
    opacity: 0;
    width: 0;
}

ul.fmenu .trigger-menu:hover {
    background: var(--neutral-100);
}

ul.fmenu .trigger-menu.expanded span.text {
    display: block;
    opacity: 1;
    width: auto;
    margin-right: calc(var(--space-3) * -1 - var(--space-0_5));
}

ul.fmenu .trigger-menu.open {
    color: var(--black);
    padding: var(--space-4);
    background: var(--primary-gradient-hover);
}

/* ── Floating Submenu ─────────────────────────────────────────────────────── */

ul.fmenu .floating-menu {
    display: block;
    position: absolute;
    bottom: calc(var(--space-16) + var(--space-2) + var(--space-0_5));
    left: 50%;
    transform: translateX(-50%);
    min-width: var(--width-menu-item);
    width: max-content;
    list-style: none;
    padding: var(--space-2);
    margin: 0;
    background: var(--globalnav-background);
    box-shadow: var(--shadow-md);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    z-index: var(--z-dropdown);
    pointer-events: none;
}

ul.fmenu .floating-menu > li {
    padding: 0;
}

ul.fmenu .floating-menu > li a {
    color: #1d1d1f;
    font-size: var(--text-md);
    font-weight: 400;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    letter-spacing: -0.01em;
}

ul.fmenu .trigger-menu.open ~ .floating-menu,
ul.fmenu .fmenu-item.menu-open .floating-menu {
    pointer-events: auto;
}

ul.fmenu .trigger-menu,
ul.fmenu .trigger-menu .icon,
ul.fmenu .floating-menu > li a {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ── Upload Progress Bar ──────────────────────────────────────────────────── */

.upload-progress-bar {
    position: absolute;
    top: 48%;
    bottom: 48%;
    left: 10%;
    right: 10%;
    height: auto;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) ease;
    z-index: var(--z-overlay);
}

.upload-progress-bar.active {
    opacity: 0.8;
}

.upload-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #a6ff00 0%, #00ff88 100%);
    transition: width var(--duration-slow) ease;
    border-radius: 0;
}

/* =============================================================================
   18. PROFILE & AVATAR
   ============================================================================= */

.avatar-trigger {
    position: relative;
    width: var(--height-avatar);
    height: var(--height-avatar);
    display: inline-block;
}

.avatar {
    width: var(--height-avatar);
    height: var(--height-avatar);
    border-radius: var(--radius-full);
    object-fit: cover;
    background: #fff;
    border: var(--border-thin) solid rgba(255, 255, 255, 0.5);
}

.profile-header {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: var(--space-2_5);
    padding: var(--space-3) var(--space-4);
}

.menu-avatar {
    width: var(--height-avatar-lg);
    height: var(--height-avatar-lg);
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
    background: #e8e8ed;
}

.profile-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.profile-info .tier-title {
    font-size: var(--text-base);
    font-weight: 500;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-email {
    font-size: 0.85em;
    color: var(--neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(var(--space-16) - var(--space-1));
}

.share-badge {
    position: absolute;
    top: calc(var(--space-2) * -1 + var(--space-0_5) / 2);
    right: calc(var(--space-2) * -1 + var(--space-0_5) / 2);
    width: var(--space-5);
    height: var(--space-5);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: calc(var(--space-5) + var(--space-0_5));
    padding-bottom: 0;
    padding-top: var(--space-0_5);
    padding-left: calc(var(--space-0_5) / 2);
    line-height: var(--leading-none);
    color: var(--neutral-50);
    background-color: var(--primary-400);
    box-shadow: var(--shadow-md);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.5);
}

.floating-menu .divider {
    height: var(--border-thin);
    background: rgba(0, 0, 0, 0.1);
    margin: var(--space-1) 0;
    list-style: none;
}

.tier-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
}

.tier-storage {
    font-size: 0.8em;
    color: #888;
    margin-top: var(--space-1);
}

.tier-title {
    line-height: normal;
    vertical-align: middle;
    padding-top: calc(var(--space-0_5) + var(--space-0_5) / 2);
}

/* =============================================================================
   19. SEARCH MODE
   ============================================================================= */

ul.fmenu.search-mode {
    gap: 0;
}

ul.fmenu.search-mode > li.fmenu-item:not(.search-trigger),
ul.fmenu.search-mode > li.search-trigger {
    display: none;
}

ul.fmenu.search-mode > li.search-bar {
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    background: transparent;
    border-radius: var(--radius-2xl);
    height: var(--height-menu);
    flex: 1;
    min-width: var(--width-search-bar);
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: var(--text-md);
    font-weight: 400;
    color: #1d1d1f;
    background: transparent;
    padding: 0;
    letter-spacing: -0.01em;
}

.search-input::placeholder {
    color: #86868b;
}

.search-results-dropdown {
    position: absolute;
    bottom: calc(var(--space-2) + var(--height-menu));
    left: 50%;
    transform: translateX(-50%);
    width: 96%;
    max-width: 600px;
    max-height: var(--height-panel);
    overflow-y: auto;
    background: rgba(255, 255, 255, 1);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateX(-50%) translateY(calc(var(--space-2_5) * -1));
    pointer-events: none;
    transition: all var(--duration-slow) var(--ease-default);
    z-index: 999;
}

.search-results-dropdown.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.search-results-dropdown::-webkit-scrollbar {
    width: var(--space-2);
}

.search-results-dropdown::-webkit-scrollbar-track {
    background: transparent;
    margin: var(--space-3) 0;
}

.search-results-dropdown::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-sm);
}

.search-results-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

.search-result-item {
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    border-bottom: var(--border-thin) solid rgba(0, 0, 0, 0.06);
    transition: background-color var(--duration-normal) var(--ease-default);
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.search-result-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

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

.search-result-item:first-child {
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
}

.search-result-item:last-child {
    border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
}

.result-preview {
    width: calc(var(--space-14));
    height: calc(var(--space-14));
    border-radius: var(--radius-xl);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--globalnav-background);
    border: var(--border-thin) solid rgba(0, 0, 0, 0.06);
}

.result-info {
    flex: 1;
    min-width: 0;
}

.result-name {
    font-weight: normal;
    color: var(--black);
    font-size: var(--text-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.result-location {
    font-size: var(--text-base);
    color: #86868b;
    margin-top: var(--space-0_5);
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    overflow: hidden;
}

.result-type {
    font-size: var(--text-xs);
    font-weight: normal;
    line-height: 100%;
    color: #ff955c;
    background: rgba(255, 149, 92, 0.12);
    padding: var(--space-1_5) var(--space-2_5) var(--space-1) var(--space-2_5);
    border-radius: var(--radius-xl);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.search-results-empty {
    padding: var(--space-6) var(--space-5);
    text-align: center;
    color: #86868b;
    font-size: var(--text-md);
}

.close-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--height-icon-btn);
    height: var(--height-icon-btn);
    border: none;
    background: var(--secondary-button-hover);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.close-search svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: #57534e;
}

.close-search:hover {
    background: #e8e8ed;
}

.close-search:active {
    transform: scale(0.94);
}

ul.fmenu.search-mode > li.drag-handle {
    display: flex;
    margin-right: var(--space-2);
}

/* =============================================================================
   20. URL MODE
   ============================================================================= */

ul.fmenu.url-mode {
    gap: 0;
}

ul.fmenu.url-mode > li.fmenu-item:not(.url-trigger),
ul.fmenu.url-mode > li.url-trigger {
    display: none;
}

ul.fmenu.url-mode > li.url-bar {
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    background: rgba(255, 255, 255, 1);
    border-radius: var(--radius-2xl);
    height: var(--height-menu);
    flex: 1;
    min-width: var(--width-url-bar);
}

.url-input {
    flex: 1;
    border: none;
    outline: none;
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: var(--text-md);
    font-weight: 400;
    color: #1d1d1f;
    background: transparent;
    padding: 0;
    letter-spacing: -0.01em;
}

.url-input::placeholder {
    color: #86868b;
}

.add-url-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-4);
    height: var(--height-icon-btn);
    border: none;
    background: var(--black);
    color: white;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 500;
    transition: all var(--duration-normal) var(--ease-default);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.add-url-button:disabled {
    background: #e8e8ed;
    color: #86868b;
    cursor: not-allowed;
}

.add-url-button:not(:disabled):hover {
    background: var(--black);
    transform: scale(1.02);
}

.add-url-button:not(:disabled):active {
    transform: scale(0.98);
}

ul.fmenu.url-mode > li.drag-handle {
    display: flex;
    margin-right: var(--space-2);
}

/* =============================================================================
   21. ORGANIZE MODE
   ============================================================================= */

ul.fmenu.organize-mode {
    gap: 0;
}

ul.fmenu.organize-mode > li.fmenu-item:not(.organize-trigger),
ul.fmenu.organize-mode > li.organize-trigger {
    display: none;
}

ul.fmenu.organize-mode > li.organize-bar {
    display: flex !important;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-5) 0 0;
    background: var(--globalnav-background);
    border-radius: var(--radius-2xl);
    height: var(--height-menu);
    flex: 1;
    min-width: auto;
}

.organize-count {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: var(--text-md);
    font-weight: 500;
    color: #1d1d1f;
    letter-spacing: -0.01em;
    margin-right: auto;
}

.organize-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--height-input-md);
    height: var(--height-input-md);
    border: none;
    background: transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.organize-action svg {
    color: #1d1d1f;
}

.organize-action:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.organize-action:not(:disabled):hover {
    background: var(--primary-gradient-hover);
    transform: scale(1.05);
}

.organize-action:not(:disabled):active {
    transform: scale(0.95);
}

#organize-delete:hover,
#resetBtn:hover {
    background: var(--danger-gradient-hover);
}

ul.fmenu.organize-mode > li.drag-handle {
    display: flex;
    margin-right: var(--space-2);
}

.organize-tip {
    position: fixed;
    padding: var(--space-2) var(--space-4);
    background: rgba(0, 0, 0, 0);
    color: #4e51f6;
    border-radius: var(--radius-md);
    font-size: var(--text-4xl);
    font-family: "Ginto";
    pointer-events: none;
    z-index: 2000;
    opacity: 0;
    transform: translateY(0%) translateX(-50%);
    transition: all var(--duration-slow) var(--ease-default);
}

.organize-tip.visible {
    opacity: 1;
    transform: translateY(50%) translateX(-50%);
}

/* =============================================================================
   22. LANDMARKS PANEL
   ============================================================================= */

.landmarks-panel {
    display: none;
    position: absolute;
    bottom: calc(var(--space-16) + var(--space-2) + var(--space-0_5));
    left: 50%;
    transform: translateX(-50%);
    width: var(--width-panel);
    max-width: calc(100vw - var(--space-8));
    list-style: none;
    padding: var(--space-4);
    margin: 0;
    background: var(--globalnav-background);
    box-shadow: var(--shadow-md);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-2xl);
    overflow-x: hidden;
    max-height: 0;
    opacity: 0;
    z-index: var(--z-dropdown);
    transition:
        max-height var(--duration-panel) var(--ease-default),
        opacity var(--duration-slow) var(--ease-default);
}

.landmarks-panel.open {
    display: block;
    overflow-x: scroll;
    max-height: var(--height-panel);
    opacity: 1;
}

.landmarks-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: sticky;
    top: calc(var(--space-4) * -1);
    z-index: var(--z-dropdown);
    background: var(--globalnav-background);
    padding-bottom: var(--space-2);
}

.landmarks-header.is-stuck {
    padding-top: var(--space-4);
}

.landmarks-title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
}

.landmarks-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    background: var(--secondary-button-hover);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default);
    flex-shrink: 0;
}

.landmarks-back:hover {
    background: #e8e8ed;
    transform: translateX(calc(var(--space-0_5) * -1));
}

.landmarks-back:active {
    transform: translateX(calc(var(--space-0_5) * -1)) scale(0.95);
}

.landmarks-back svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: #1d1d1f;
}

.landmarks-title {
    font-size: var(--text-xl);
    font-weight: normal;
    color: var(--neutral-900);
    letter-spacing: -0.02em;
}

.DLC-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--space-2_5) 0 0 0;
}

.DLC-buttons-container::-webkit-scrollbar {
    display: none;
}

.landmark-DLC-button {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    background: transparent;
    padding: var(--space-1_5) var(--space-3) var(--space-1) var(--space-3);
    border-radius: var(--radius-2xl);
    opacity: 1;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.landmark-DLC-button:hover {
    background: var(--primary-100);
    color: var(--neutral-900);
}

.landmark-DLC-button.active {
    color: var(--neutral-900);
    background: var(--primary-100);
    border: var(--border-thin) solid var(--primary-200);
}

.landmarks-grid {
    display: grid;
    grid-template-rows: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-flow: column;
    gap: var(--space-3);
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    padding-left: var(--space-2);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    transform: rotateX(0deg);
    border-top: 0 solid transparent;
    border-radius: var(--radius-2xl);
}

.landmarks-grid > * {
    transform: rotateX(0deg);
}

.landmarks-grid::-webkit-scrollbar {
    height: var(--space-2);
}

.landmarks-grid::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: var(--radius-md);
    margin-left: var(--space-2);
    margin-right: var(--space-2);
}

.landmarks-grid::-webkit-scrollbar-thumb {
    background: var(--neutral-200);
    border-radius: var(--radius-md);
}

.landmarks-grid::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-900);
}

.landmark-tile {
    background: var(--white);
    border-radius: var(--radius-xl);
    border: var(--border-thin) solid var(--neutral-100);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
    width: var(--width-tile);
    height: var(--height-tile-lg);
    padding: 0;
    position: relative;
}

.landmark-tile:hover {
    transform: rotateX(0deg) scale(1.05);
}

.landmark-tile:active {
    transform: rotateX(0deg) scale(0.97);
}

.landmark-tile-preview {
    flex: 1;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    display: block;
    min-height: 0;
    background: var(--white);
}

.landmark-tile-preview canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
}

.landmark-name {
    font-size: var(--text-sm);
    font-weight: normal;
    color: var(--neutral-700);
    text-align: center;
    letter-spacing: -0.005em;
    padding: var(--space-1_5) var(--space-1);
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
    width: 100%;
    flex-shrink: 0;
}

/* ── Landmarks Footer ─────────────────────────────────────────────────────── */

.landmarks-footer {
    margin: var(--space-3) 0 0;
    border-radius: var(--space-3);
    box-shadow: var(--shadow-card);
    padding: calc(var(--space-3) + var(--space-0_5)) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: var(--border-panel) solid transparent;
    transition:
        --button-fill 4s,
        --button-fill-stop 0.5s;
    animation: gradient-movement 10s alternate infinite ease-in-out;
    animation-delay: calc(sibling-index() * -2000ms);
    background:
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) padding-box,
        radial-gradient(
                circle 120px at var(--rg-1-x) var(--rg-1-y),
                var(--primary-700),
                var(--rg-1-fade)
            )
            border-box,
        radial-gradient(
                circle 150px at var(--rg-2-x) var(--rg-2-y),
                var(--primary-800),
                var(--rg-2-fade)
            )
            border-box,
        radial-gradient(
                circle 160px at var(--rg-3-x) var(--rg-3-y),
                var(--primary-500),
                var(--rg-3-fade)
            )
            border-box,
        radial-gradient(
                circle 200px at var(--rg-4-x) var(--rg-4-y),
                var(--primary-600),
                var(--rg-4-fade)
            )
            border-box;
    background-position:
        center,
        center,
        bottom right,
        top left,
        top right,
        bottom left;
    background-repeat: no-repeat;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
}

.landmarks-footer-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
    min-width: 0;
}

.landmarks-footer-title {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--neutral-50);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.landmarks-footer-sub {
    font-size: var(--text-xs);
    color: var(--primary-200);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.landmarks-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1_5);
    flex-shrink: 0;
}

/* =============================================================================
   23. ZONES PANEL
   ============================================================================= */

#zones-panel {
    display: none;
    position: absolute;
    bottom: calc(var(--space-16) + var(--space-2) + var(--space-0_5));
    left: 50%;
    transform: translateX(-50%);
    width: var(--width-panel);
    max-width: calc(100vw - var(--space-8));
    list-style: none;
    padding: var(--space-4);
    margin: 0;
    background: var(--globalnav-background);
    box-shadow: var(--shadow-md);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-2xl);
    overflow-x: hidden;
    max-height: 0;
    opacity: 0;
    z-index: var(--z-dropdown);
    transition:
        max-height var(--duration-panel) var(--ease-default),
        opacity var(--duration-slow) var(--ease-default);
}

#zones-panel.open {
    display: block;
    overflow-x: scroll;
    max-height: var(--height-panel);
    opacity: 1;
}

.zones-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: sticky;
    top: calc(var(--space-4) * -1);
    z-index: var(--z-dropdown);
    background: var(--globalnav-background);
    padding-bottom: var(--space-2);
}

.zones-header.is-stuck {
    padding-top: var(--space-4);
}

.zones-title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
}

#zones-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    background: var(--secondary-button-hover);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-default);
}

#zones-back:hover {
    background: #e8e8ed;
    transform: translateX(calc(var(--space-0_5) * -1));
}

#zones-back:active {
    transform: translateX(calc(var(--space-0_5) * -1)) scale(0.95);
}

#zones-back svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: #1d1d1f;
}

.zones-title {
    font-size: var(--text-xl);
    font-weight: normal;
    color: var(--neutral-900);
    letter-spacing: -0.02em;
}

#zones-grid {
    display: grid;
    grid-template-rows: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-flow: column;
    gap: var(--space-3);
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    padding-left: var(--space-2);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

#zones-grid::-webkit-scrollbar {
    height: var(--space-2);
}

#zones-grid::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: var(--radius-md);
    margin-left: var(--space-2);
    margin-right: var(--space-2);
}

#zones-grid::-webkit-scrollbar-thumb {
    background: var(--neutral-200);
    border-radius: var(--radius-md);
}

#zones-grid::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-900);
}

.zone-shape-tile {
    /* Inherits from .landmark-tile */
}

.zones-search-section {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.zones-search-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    margin-top: var(--space-3);
    height: calc(var(--space-10) + var(--space-1));
    background: #fff;
    border: var(--border-thin) solid var(--neutral-200);
    border-radius: var(--radius-xl);
    transition: border-color var(--duration-normal) ease;
}

.zones-search-row:focus-within {
    border-color: var(--primary-400);
}

#zones-location-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--neutral-900);
    letter-spacing: -0.01em;
}

#zones-location-input::placeholder {
    color: var(--neutral-400);
}

#zones-search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
    max-height: 180px;
    overflow-y: auto;
}

.zones-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2_5) var(--space-3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--duration-fast) ease;
}

.zones-search-result:hover {
    background: var(--neutral-100);
}

.zones-search-result:active {
    background: var(--neutral-200);
    transform: scale(0.99);
}

.zones-result-name {
    font-size: var(--text-base);
    color: var(--neutral-900);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.zones-result-type {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    background: var(--neutral-100);
    padding: calc(var(--space-0_5) + var(--space-0_5) / 2) var(--space-2);
    border-radius: var(--radius-md);
    text-transform: capitalize;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.zones-search-status {
    font-size: var(--text-base);
    color: var(--neutral-500);
    padding: var(--space-2_5) var(--space-3);
    text-align: center;
}

/* ── Zones Footer ─────────────────────────────────────────────────────────── */

.zones-footer {
    margin: var(--space-3) 0 0;
    border-radius: var(--space-3);
    padding: calc(var(--space-3) + var(--space-0_5)) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: var(--border-panel) solid transparent;
    animation: gradient-movement 10s alternate infinite ease-in-out;
    background:
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) padding-box,
        radial-gradient(
                circle 120px at var(--rg-1-x) var(--rg-1-y),
                var(--primary-700),
                var(--rg-1-fade)
            )
            border-box,
        radial-gradient(
                circle 150px at var(--rg-2-x) var(--rg-2-y),
                var(--primary-800),
                var(--rg-2-fade)
            )
            border-box,
        radial-gradient(
                circle 160px at var(--rg-3-x) var(--rg-3-y),
                var(--primary-500),
                var(--rg-3-fade)
            )
            border-box,
        radial-gradient(
                circle 200px at var(--rg-4-x) var(--rg-4-y),
                var(--primary-600),
                var(--rg-4-fade)
            )
            border-box;
    background-repeat: no-repeat;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
}

.zones-footer-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-0_5);
    min-width: 0;
}

.zones-footer-title {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--neutral-50);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.zones-footer-sub {
    font-size: var(--text-xs);
    color: var(--primary-200);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.zones-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1_5);
    flex-shrink: 0;
}

/* =============================================================================
   24. SHARE PANEL
   ============================================================================= */

.share-panel {
    display: none;
    position: absolute;
    bottom: calc(var(--space-16) + var(--space-2) + var(--space-0_5));
    left: 50%;
    transform: translateX(-50%);
    width: var(--width-panel);
    max-width: calc(100vw - var(--space-8));
    list-style: none;
    padding: var(--space-4);
    margin: 0;
    background: var(--globalnav-background);
    box-shadow: var(--shadow-md);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-2xl);
    overflow-y: auto;
    max-height: 0;
    opacity: 0;
    z-index: var(--z-dropdown);
    transition:
        max-height var(--duration-panel) var(--ease-default),
        opacity var(--duration-slow) var(--ease-default);
}

.share-panel.open {
    display: block;
    max-height: 600px;
    opacity: 1;
}

.share-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.share-title-container {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.share-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default);
    flex-shrink: 0;
}

.share-back:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: translateX(calc(var(--space-0_5) * -1));
}

.share-back:active {
    transform: translateX(calc(var(--space-0_5) * -1)) scale(0.95);
}

.share-back svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: #1d1d1f;
}

.share-title {
    font-size: var(--text-xl);
    font-weight: normal;
    color: #1d1d1f;
    letter-spacing: -0.02em;
}

.share-content {
    overflow-y: auto;
    max-height: calc(600px - 70px);
}

.share-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-2) var(--space-2) var(--space-2);
    font-size: var(--text-md);
    color: var(--neutral-900);
}

.share-option img {
    background: var(--danger);
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

.share-option-label {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-start;
}

/* ── Toggle Switch ────────────────────────────────────────────────────────── */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: calc(var(--space-10) + var(--space-1));
    height: var(--space-6);
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e8e8ed;
    transition: all var(--duration-slow) var(--ease-default);
    border-radius: var(--space-6);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: var(--space-5);
    width: var(--space-5);
    left: var(--space-0_5);
    bottom: var(--space-0_5);
    background-color: white;
    transition: all var(--duration-slow) var(--ease-default);
    border-radius: var(--radius-full);
    box-shadow: 0 var(--space-0_5) var(--space-1) rgba(0, 0, 0, 0.1);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-600);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(var(--space-5));
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Copy Link Button ─────────────────────────────────────────────────────── */

.copy-link-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: fit-content;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-default);
    margin-top: 0;
}

#copy-link-btn.copied,
#copy-embed-btn.copied {
    background: var(--highlight-green);
    filter: saturate(2);
    -webkit-filter: saturate(2);
}

/* ── Invite Section ───────────────────────────────────────────────────────── */

.invite-section {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.invite-input {
    flex: 1;
    padding: var(--space-2_5) var(--space-3);
    border: var(--border-thin) solid #e8e8ed;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: inherit;
    outline: none;
    transition: all var(--duration-normal);
}

.invite-input:focus {
    border-color: #1d1d1f;
}

.invite-input::placeholder {
    color: #86868b;
}

.invite-input:disabled {
    display: none;
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f5f5f7;
}

.invite-input:disabled::placeholder {
    color: #c7c7cc;
}

.invite-btn {
    padding: var(--space-2_5) var(--space-4);
    background: #007aff;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal);
    white-space: nowrap;
}

.invite-btn:hover:not(:disabled) {
    background: #0051d5;
}

.invite-btn:active:not(:disabled) {
    transform: scale(0.98);
}

#invite-btn:disabled {
    display: none;
    opacity: 0.5;
    cursor: not-allowed;
    background: #007aff;
}

/* ── Collaborator List ────────────────────────────────────────────────────── */

.collaborator-list {
    margin-top: 0;
}

.collaborator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--neutral-50);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}

.collaborator-avatar {
    width: var(--height-avatar);
    height: var(--height-avatar);
    border-radius: var(--radius-full);
    object-fit: cover;
    background: #e8e8ed;
}

.collaborator-info {
    flex: 1;
}

.collaborator-name {
    display: block;
    font-weight: 500;
    font-size: var(--text-base);
    color: #1d1d1f;
}

.collaborator-role {
    display: block;
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin-top: var(--space-0_5);
}

/* ── Divider ──────────────────────────────────────────────────────────────── */

.divider {
    list-style: none;
    height: var(--border-thin);
    background: rgba(0, 0, 0, 0.08);
    margin: var(--space-4) 0;
}

/* ── Share Warning ────────────────────────────────────────────────────────── */

.share-warning {
    display: none;
    padding: var(--space-3) var(--space-2);
    background: var(--white);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    color: var(--neutral-500);
    text-align: left;
    line-height: var(--leading-normal);
}

.upgrade-warning {
    display: flex;
    flex-direction: row;
    gap: var(--space-1_5);
    justify-content: flex-start;
    align-items: center;
    padding: var(--space-3);
    background: transparent;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    color: var(--neutral-700);
    text-align: center;
    line-height: var(--leading-normal);
}

/* ── Embed Section ────────────────────────────────────────────────────────── */

.embed-section {
    display: none;
}

.embed-field-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2_5) var(--space-3);
    background: var(--primary-50);
    border: var(--border-thin) solid var(--primary-100);
    border-radius: var(--radius-md);
}

.embed-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: var(--text-sm);
    font-family: ui-monospace, "SF Mono", monospace;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.copy-embed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(var(--space-6) + var(--space-1));
    height: calc(var(--space-6) + var(--space-1));
    background: transparent;
    border: none;
    border-radius: var(--space-1_5);
    cursor: pointer;
    color: #86868b;
    transition: all var(--duration-normal) var(--ease-default);
}

.copy-embed-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
}

.copy-embed-btn:active {
    transform: scale(0.92);
}

/* =============================================================================
   25. TAG SYSTEM
   ============================================================================= */

.tag {
    font-family: inherit;
    height: var(--tag-sizing-height);
    font-size: var(--tag-font-size);
    font-weight: var(--tag-font-weight);
    line-height: var(--tag-line-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--tag-spacing-padding-lg);
    border-width: var(--tag-border-width);
    border-radius: var(--radius-sm);
    width: 100%;
}

.tag.-base {
    background: var(--highlight-green);
    color: var(--neutral-800);
}

.tag.-base:hover {
    cursor: pointer;
    filter: saturate(2);
    -webkit-filter: saturate(2);
}

.tag.-secondary {
    background-color: var(--tag-color-secondary-bg);
    color: var(--tag-color-secondary-fg);
}

.tag.-rounded {
    border-radius: var(--tag-border-radius-rounded);
}

.tag.-outline {
    background-color: transparent;
    border-color: var(--tag-color-secondary-outline-border);
}

/* =============================================================================
   26. MISCELLANEOUS
   ============================================================================= */

.space-managment-placeholder {
    color: var(--neutral-900);
    font-size: var(--text-5xl);
    text-align: center;
    font-family: "rigton";
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
    gap: var(--space-4);
    max-width: 70%;
    height: auto;
    background: var(--primary-100);
    padding: var(--space-4);
    border-radius: var(--radius-2xl);
    border: var(--border-thin) dashed var(--primary-500);
}

.feature-microcopy {
    padding: var(--space-3) var(--space-3) 0 var(--space-2);
    font-size: var(--text-base);
    color: var(--neutral-500);
    text-align: left;
    line-height: var(--leading-normal);
}

/* =============================================================================
   27. MEDIA QUERIES (Responsive Overrides)
   ============================================================================= */

/* ── Medium Screens (max-width: 900px) ────────────────────────────────────── */

@media (max-width: 900px) {
    .app-header .logo {
        display: none;
    }

    .app-header .logo-icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .app-header .logo-icon img {
        max-width: calc(var(--space-12) + var(--space-1));
        height: auto;
        transition: transform var(--duration-slow) ease;
    }

    .auth-container {
        width: 100%;
        height: auto;
        min-height: 60vh;
        padding: var(--space-8) var(--space-6);
        border-radius: var(--radius-4xl) var(--radius-4xl) 0 0;
        margin-top: calc(var(--space-6) * -1);
    }

    .auth-container::before,
    .auth-container::after {
        display: none;
    }

    .auth-title {
        font-size: calc(var(--text-6xl) + var(--space-1));
    }

    .auth-subtitle {
        font-size: var(--text-lg);
        margin-bottom: var(--space-8);
    }

    .google-btn {
        padding: var(--space-3) calc(var(--space-6) + var(--space-1));
        font-size: calc(var(--text-lg) * 0.95);
    }

    #auth-screen {
        flex-direction: column-reverse;
    }

    .feature-panel {
        width: 100%;
        height: 45vh;
        min-height: 200px;
    }

    .feature-content {
        padding: var(--space-6);
    }

    .fs-slide video {
        width: 100%;
        height: auto;
        margin: none;
        padding: none;
    }

    .fs-slide:first-child {
        padding: 0;
    }

    .fs-slide:nth-child(3) {
        padding: 0;
    }
}

/* ── Small Screens (max-width: 767.98px) ──────────────────────────────────── */

@media (max-width: 767.98px) {
    .tag {
        font-size: var(--tag-font-size-mobile);
    }
}

/* ── Extra Small Screens (max-width: 480px) ───────────────────────────────── */

@media (max-width: 480px) {
    .auth-container {
        min-height: 65vh;
        padding: var(--space-6) var(--space-5);
    }

    .auth-title {
        font-size: var(--text-6xl);
    }

    .app-header .logo img {
        max-width: calc(var(--space-8) * 3.75); /* 120px */
    }

    .feature-panel {
        height: 40vh;
    }
}