:root {
    --bg: #050505;
    --surface: #0b0b0b;
    --surface-soft: #111111;
    --text: #f5f5f3;
    --muted: #8e8e8a;
    --line: rgba(255,255,255,.14);
    --line-strong: rgba(255,255,255,.8);
    --button-bg: #f4f4f1;
    --button-text: #090909;
    --input-bg: #0b0b0b;
    --success-bg: #10271a;
    --success: #78d797;
    --success-line: #225e37;
    --error-bg: #2a1114;
    --error: #ff9098;
    --error-line: #6d2b31;
    --shadow: rgba(0,0,0,.38);
}

html[data-theme="light"] {
    --bg: #f4f4f1;
    --surface: #ffffff;
    --surface-soft: #ecece8;
    --text: #0b0b0b;
    --muted: #666662;
    --line: rgba(0,0,0,.14);
    --line-strong: rgba(0,0,0,.75);
    --button-bg: #0a0a0a;
    --button-text: #fff;
    --input-bg: #fff;
    --success-bg: #eaf7ee;
    --success: #216b3c;
    --success-line: #b9dec6;
    --error-bg: #fff0f1;
    --error: #a33540;
    --error-line: #efc3c8;
    --shadow: rgba(0,0,0,.10);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Arial, Helvetica, sans-serif;
    transition: background .3s ease, color .3s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input {
    font: inherit;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 76px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 4.5vw;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
}

.porsche-wordmark {
    justify-self: start;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 7px;
    line-height: 1;
}

.main-nav {
    display: flex;
    gap: 30px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .6px;
}

.main-nav a {
    transition: color .2s ease, transform .2s ease;
}

.main-nav a:hover {
    color: var(--text);
    transform: scale(1.05);
}

.header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease;
}

.theme-toggle:hover {
    transform: scale(1.08);
    border-color: var(--line-strong);
}

.language-switch {
    display: flex;
    gap: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.language-switch a.active,
.language-switch a:hover {
    color: var(--text);
}

.nav-link-strong {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.eyebrow {
    margin: 0 0 17px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 2.5px;
}

.landing {
    min-height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    overflow: hidden;
}

.landing-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7vw 5vw 7vw 7vw;
}

.landing-left h1 {
    max-width: 620px;
    margin: 0;
    font-size: clamp(58px, 7vw, 112px);
    line-height: .9;
    letter-spacing: -6px;
}

.landing-description {
    max-width: 480px;
    margin: 28px 0 34px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.entry-actions {
    display: flex;
    gap: 14px;
}

.entry-button {
    min-width: 180px;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.entry-button:hover {
    transform: scale(1.045);
    border-color: var(--line-strong);
    box-shadow: 0 16px 45px var(--shadow);
}

.intro-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(100vh - 76px);
    background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.04), transparent 45%);
}

.gif-frame {
    width: min(88%, 900px);
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 35px 90px rgba(0,0,0,.55);
}

.gif-frame img {
    width: 100%;
    display: block;
    object-fit: cover;
    image-rendering: auto;
}

.visual-caption {
    position: absolute;
    right: 5vw;
    bottom: 35px;
    display: flex;
    gap: 18px;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 2px;
}

.page-with-header {
    min-height: calc(100vh - 76px);
    display: grid;
    place-items: center;
    padding: 55px 20px;
}

.form-card {
    width: min(100%, 600px);
    padding: 38px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 28px 70px var(--shadow);
}

.login-card,
.verify-card {
    width: min(100%, 500px);
}

.form-card h1 {
    margin: 0;
    font-size: 40px;
    letter-spacing: -1.8px;
}

.description {
    color: var(--muted);
    line-height: 1.75;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.field {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 750;
}

input {
    width: 100%;
    height: 49px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
    outline: none;
    color: var(--text);
    background: var(--input-bg);
}

input:focus {
    border-color: var(--line-strong);
}

.submit-button {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 2px;
    color: var(--button-text);
    background: var(--button-bg);
    font-weight: 850;
    cursor: pointer;
    transition: transform .2s ease;
}

.submit-button:hover {
    transform: scale(1.015);
}

.verification-mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 25px;
    border: 1px solid var(--line);
}

.code-input {
    height: 58px;
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 10px;
}

.resend-link {
    display: block;
    margin-top: 22px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

.home-scroll {
    background: var(--bg);
}

.home-hero {
    min-height: calc(100vh - 76px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 9vw 7vw 6vw;
    border-bottom: 1px solid var(--line);
}

.home-hero > div:first-child {
    max-width: 920px;
}

.home-hero h1 {
    margin: 0;
    max-width: 900px;
    font-size: clamp(52px, 8vw, 118px);
    line-height: .92;
    letter-spacing: -6px;
}

.home-hero p:not(.eyebrow) {
    max-width: 620px;
    margin-top: 28px;
    color: var(--muted);
    line-height: 1.8;
}

.scroll-cue {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 2px;
}

.story-section {
    padding: 9vw 7vw;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 60px;
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(46px, 6vw, 82px);
    letter-spacing: -4px;
}

.section-heading p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.8;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.story-card {
    min-height: 330px;
    padding: 38px;
    background: var(--bg);
}

.story-card > span {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 2px;
}

.story-card h3 {
    margin: 60px 0 18px;
    font-size: 28px;
    letter-spacing: -1px;
}

.story-card p {
    max-width: 520px;
    color: var(--muted);
    line-height: 1.8;
}

.quote-section {
    min-height: 44vh;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 60px 7vw;
}

.quote-line {
    height: 1px;
    flex: 1;
    background: var(--line);
}

.quote-section p {
    max-width: 700px;
    margin: 0;
    text-align: center;
    font-size: clamp(28px, 4vw, 58px);
    letter-spacing: -2px;
}

.final-panel {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8vw 7vw;
    border-top: 1px solid var(--line);
    background:
        linear-gradient(to top, color-mix(in srgb, var(--text) 5%, transparent), transparent);
}

.final-panel h2 {
    margin: 0;
    font-size: clamp(48px, 7vw, 100px);
    letter-spacing: -5px;
}

.final-panel p:not(.eyebrow) {
    max-width: 640px;
    color: var(--muted);
    line-height: 1.8;
}

.content-page {
    min-height: calc(100vh - 76px);
    padding: 9vw 7vw;
}

.contact-heading {
    max-width: 700px;
    margin-bottom: 55px;
}

.contact-heading h1 {
    margin: 0;
    font-size: clamp(52px, 7vw, 96px);
    letter-spacing: -5px;
}

.contact-heading p:not(.eyebrow) {
    color: var(--muted);
}

.contact-list {
    border-top: 1px solid var(--line);
}

.contact-row {
    min-height: 92px;
    display: grid;
    grid-template-columns: 45px 1fr 1.2fr 30px;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    transition:
        transform .2s ease,
        background .2s ease,
        padding .2s ease;
}

.contact-row:hover {
    transform: scale(1.015);
    padding-left: 12px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
}

.contact-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 850;
}

.contact-name {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-row strong {
    font-size: 16px;
}

.contact-arrow {
    justify-self: end;
    color: var(--muted);
    font-size: 18px;
}

.toast-container {
    position: fixed;
    z-index: 9999;
    top: 92px;
    right: 22px;
}

.toast {
    min-width: 310px;
    max-width: 430px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    box-shadow: 0 16px 35px var(--shadow);
    transition: opacity .45s ease, transform .45s ease;
}

.toast.success {
    color: var(--success);
    background: var(--success-bg);
    border: 1px solid var(--success-line);
}

.toast.error {
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid var(--error-line);
}

.toast-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.toast-hide {
    opacity: 0;
    transform: translateX(20px);
}

.theme-modal {
    position: fixed;
    z-index: 20000;
    inset: 0;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(0,0,0,.74);
    backdrop-filter: blur(16px);
}

.theme-modal.show {
    display: grid;
}

.theme-modal-card {
    width: min(100%, 520px);
    padding: 34px;
    border: 1px solid var(--line);
    color: var(--text);
    background: var(--surface-soft);
}

.theme-modal-card h2 {
    margin: 0;
    font-size: 31px;
    letter-spacing: -1.3px;
}

.theme-modal-card > p:not(.eyebrow) {
    color: var(--muted);
}

.theme-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 25px;
}

.theme-choice {
    padding: 12px;
    border: 1px solid var(--line);
    color: var(--text);
    background: transparent;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease;
}

.theme-choice:hover {
    transform: scale(1.025);
    border-color: var(--line-strong);
}

.theme-preview {
    display: block;
    height: 93px;
    margin-bottom: 12px;
    border: 1px solid rgba(128,128,128,.25);
}

.dark-preview { background: #050505; }
.light-preview { background: #f4f4f1; }

@media (max-width: 960px) {
    .site-header {
        grid-template-columns: 1fr auto;
    }

    .main-nav {
        display: none;
    }

    .landing {
        grid-template-columns: 1fr;
    }

    .landing-left {
        min-height: 58vh;
        align-items: center;
        text-align: center;
        padding: 70px 24px;
    }

    .intro-visual {
        min-height: 48vh;
        padding: 35px 0 70px;
    }

    .story-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .site-header {
        padding: 0 16px;
    }

    .porsche-wordmark {
        font-size: 13px;
        letter-spacing: 4px;
    }

    .landing-left h1,
    .home-hero h1 {
        font-size: 55px;
        letter-spacing: -3px;
    }

    .entry-actions {
        width: 100%;
        flex-direction: column;
    }

    .entry-button {
        width: 100%;
    }

    .form-grid,
    .theme-choice-grid {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 28px 21px;
    }

    .home-hero {
        min-height: 75vh;
        padding: 80px 24px 50px;
    }

    .story-section,
    .content-page {
        padding: 80px 24px;
    }

    .story-card {
        padding: 26px;
    }

    .quote-section {
        padding: 60px 24px;
    }

    .final-panel {
        padding: 90px 24px 60px;
    }

    .contact-row {
        grid-template-columns: 38px 1fr 30px;
    }

    .contact-row strong {
        display: none;
    }

    .toast-container {
        left: 14px;
        right: 14px;
        top: 88px;
    }

    .toast {
        min-width: 0;
        max-width: none;
    }
}


/* ================= V2 UI FIXES ================= */

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif;
    font-weight: 400;
    letter-spacing: -0.01em;
}

html[data-theme="dark"] body {
    background: #050505;
    color: #f6f6f3;
}

html[data-theme="light"] body {
    background: #f4f4f1;
    color: #111111;
}

.main-nav {
    gap: 40px;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
}

.main-nav a {
    padding: 10px 3px;
}

.porsche-wordmark {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
}

.landing-left h1,
.home-hero h1,
.section-heading h2,
.final-panel h2,
.contact-heading h1,
.form-card h1 {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif;
    font-weight: 700;
}

.login-register-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 12px;
}

.small-register-button {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--text);
    font-size: 11px;
    font-weight: 750;
    transition: transform .2s ease, border-color .2s ease;
}

.small-register-button:hover {
    transform: scale(1.05);
    border-color: var(--line-strong);
}

.register-reminder {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    animation: reminderIn .35s ease both;
}

.reminder-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 20px;
}

.reminder-copy strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

.reminder-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.reminder-button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    color: var(--button-text);
    background: var(--button-bg);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .2s ease;
}

.reminder-button:hover {
    transform: scale(1.04);
}

@keyframes reminderIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.contact-card {
    min-height: 160px;
    display: grid;
    grid-template-columns: 48px 1fr 28px;
    align-items: center;
    gap: 18px;
    padding: 28px;
    border: 1px solid var(--line);
    background: var(--surface);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.contact-card:hover {
    transform: translateY(-5px) scale(1.018);
    border-color: var(--line-strong);
    box-shadow: 0 22px 55px var(--shadow);
    background: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
}

.brand-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.phone-icon {
    display: grid;
    place-items: center;
    color: var(--text);
}

.phone-icon svg {
    width: 27px;
    height: 27px;
    fill: currentColor;
}

.contact-label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.contact-card strong {
    display: block;
    font-size: 18px;
    font-weight: 650;
}

.contact-arrow {
    justify-self: end;
    color: var(--muted);
    font-size: 19px;
    transition: transform .2s ease, color .2s ease;
}

.contact-card:hover .contact-arrow {
    transform: translate(3px, -3px);
    color: var(--text);
}

.toast {
    animation: toastIn .3s ease both;
}

.toast-hide {
    opacity: 0 !important;
    transform: translateX(34px) scale(.97) !important;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(28px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@media (max-width: 760px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .register-reminder {
        grid-template-columns: 36px 1fr;
    }

    .reminder-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* ================= V3 PUBLIC LANDING ================= */

.language-toggle {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    transition: transform .2s ease, border-color .2s ease;
}

.language-toggle:hover {
    transform: scale(1.05);
    border-color: var(--line-strong);
}

.language-toggle .active {
    color: var(--text);
}

.language-divider {
    opacity: .45;
}

.public-scroll {
    min-height: calc(100vh - 76px);
}

.public-contact-section {
    padding: 9vw 7vw 10vw;
    border-top: 1px solid var(--line);
    background:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--text) 2%, transparent),
            transparent 28%
        );
}

.public-contact-heading {
    max-width: 720px;
    margin-bottom: 52px;
}

.public-contact-heading h2 {
    margin: 0;
    font-size: clamp(48px, 7vw, 92px);
    line-height: .95;
    letter-spacing: -4px;
}

.public-contact-heading p:not(.eyebrow) {
    max-width: 520px;
    color: var(--muted);
    line-height: 1.7;
}

/* ================= STAFF / ADMIN ================= */

.staff-error {
    margin: 0 0 18px;
    padding: 13px 14px;
    border: 1px solid var(--error-line);
    color: var(--error);
    background: var(--error-bg);
    font-size: 12px;
}

.staff-header {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4vw;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}

.staff-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--muted);
    font-size: 12px;
}

.staff-header-right a {
    color: var(--text);
    font-weight: 700;
}

.staff-page {
    min-height: calc(100vh - 72px);
    padding: 60px 4vw 90px;
    background: var(--bg);
}

.staff-heading h1 {
    margin: 0;
    font-size: clamp(42px, 6vw, 82px);
    letter-spacing: -4px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 42px 0;
}

.metric-card {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.metric-card span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.metric-card strong {
    font-size: 42px;
    font-weight: 700;
}

.staff-panel {
    margin-top: 22px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.staff-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
}

.staff-panel-title h2 {
    margin: 0;
    font-size: 18px;
}

.staff-panel-title span {
    color: var(--muted);
    font-size: 11px;
}

.table-wrap {
    overflow-x: auto;
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.staff-table th,
.staff-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 12px;
}

.staff-table th {
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.staff-table tbody tr:hover {
    background: color-mix(in srgb, var(--text) 3%, transparent);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.status-pill.online {
    color: var(--success);
    border: 1px solid var(--success-line);
    background: var(--success-bg);
}

.status-pill.offline {
    color: var(--muted);
    border: 1px solid var(--line);
}

.activity-table code {
    color: var(--text);
    font-size: 11px;
}

@media (max-width: 900px) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .public-contact-section {
        padding: 80px 24px;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .staff-page {
        padding: 45px 18px 70px;
    }
}


/* ================= V4 LOGIN / STAFF ================= */

.login-secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.login-secondary-actions .small-register-button {
    min-height: 36px;
    text-align: center;
}

.staff-access-button {
    opacity: .82;
}

.staff-access-button:hover {
    opacity: 1;
}

.staff-user-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 560px) {
    .login-secondary-actions {
        grid-template-columns: 1fr;
    }

    .staff-user-switch {
        flex-direction: column;
    }
}


/* =========================================================
   V5 ADMIN DASHBOARD
   ========================================================= */

.admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 245px 1fr;
    background: var(--bg);
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 30px 20px 22px;
    border-right: 1px solid var(--line);
    background: #070707;
}

html[data-theme="light"] .admin-sidebar {
    background: #ededeb;
}

.admin-logo {
    margin: 0 12px 44px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 6px;
}

.admin-menu {
    display: grid;
    gap: 5px;
}

.admin-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 13px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 13px;
    transition: .18s ease;
}

.admin-menu a span {
    width: 18px;
    text-align: center;
}

.admin-menu a:hover,
.admin-menu a.active {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 7%, transparent);
}

.admin-sidebar-bottom {
    margin-top: auto;
    display: grid;
    gap: 9px;
    padding: 16px 12px 0;
    border-top: 1px solid var(--line);
    font-size: 11px;
}

.admin-sidebar-bottom span {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-sidebar-bottom a {
    font-weight: 750;
}

.admin-main {
    min-width: 0;
}

.admin-topbar {
    height: 70px;
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(16px);
}

.admin-small-label {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 11px;
}

.admin-content {
    padding: 55px 3.2vw 90px;
}

.admin-page-heading {
    max-width: 820px;
    margin-bottom: 38px;
}

.admin-page-heading h1 {
    margin: 0;
    font-size: clamp(44px, 6vw, 82px);
    line-height: .96;
    letter-spacing: -4px;
}

.admin-page-heading > p:not(.eyebrow) {
    max-width: 620px;
    color: var(--muted);
    line-height: 1.7;
}

.admin-metrics {
    margin: 0 0 22px;
}

.admin-two-column {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
}

.admin-panel {
    border: 1px solid var(--line);
    background: var(--surface);
}

.panel-title {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
}

.panel-title h2 {
    margin: 0;
    font-size: 16px;
}

.panel-title a,
.panel-title span {
    color: var(--muted);
    font-size: 11px;
}

.activity-feed {
    padding: 4px 20px;
}

.activity-feed-item {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

.activity-feed-item:last-child {
    border-bottom: 0;
}

.activity-feed-item strong {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
}

.activity-feed-item span,
.activity-feed-item time {
    color: var(--muted);
    font-size: 10px;
}

.ranking-list {
    padding: 8px 20px;
}

.ranking-row {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}

.ranking-row:last-child {
    border-bottom: 0;
}

.ranking-row span {
    color: var(--muted);
}

.admin-filter-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 90px;
    gap: 10px;
    margin-bottom: 16px;
}

.admin-filter-bar input,
.admin-filter-bar select {
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--line);
    color: var(--text);
    background: var(--surface);
    outline: 0;
}

.admin-filter-bar button {
    height: 44px;
    border: 0;
    color: var(--button-text);
    background: var(--button-bg);
    font-weight: 750;
    cursor: pointer;
}

.table-link {
    font-size: 11px;
    font-weight: 750;
}

.empty-cell,
.empty-state {
    padding: 30px;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
}

.admin-back-link {
    display: inline-flex;
    margin-bottom: 30px;
    color: var(--muted);
    font-size: 12px;
}

.user-profile-hero {
    display: grid;
    grid-template-columns: 74px 1fr auto;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
    padding: 28px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.user-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 22px;
    font-weight: 750;
}

.user-profile-hero h1 {
    margin: 0;
    font-size: 31px;
}

.user-profile-hero p:not(.eyebrow) {
    margin-bottom: 0;
    color: var(--muted);
}

.profile-actions {
    display: flex;
    gap: 8px;
}

.admin-secondary-btn,
.admin-danger-btn,
.inline-action-btn {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    color: var(--text);
    background: transparent;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}

.admin-danger-btn {
    color: #ff8088;
    border-color: rgba(255, 90, 100, .35);
}

.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 22px;
    border: 1px solid var(--line);
    background: var(--line);
}

.profile-info-grid article {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    background: var(--surface);
}

.profile-info-grid span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.profile-info-grid strong {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.timeline {
    padding: 10px 22px 22px;
}

.timeline-item {
    position: relative;
    min-height: 75px;
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

.timeline-dot {
    width: 8px;
    height: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
}

.timeline-item strong {
    font-size: 12px;
}

.timeline-item p,
.timeline-item time {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 10px;
}

.employees-layout {
    grid-template-columns: .8fr 1.2fr;
}

.employee-form-panel {
    padding-bottom: 20px;
}

.employee-form-panel .staff-error,
.employee-form-panel .staff-success,
.employee-form-panel .admin-form {
    margin-left: 20px;
    margin-right: 20px;
}

.staff-success {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--success-line);
    color: var(--success);
    background: var(--success-bg);
    font-size: 11px;
}

.admin-form {
    padding-top: 20px;
}

.employee-list {
    padding: 0 20px;
}

.employee-row {
    min-height: 78px;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid var(--line);
}

.employee-row:last-child {
    border-bottom: 0;
}

.employee-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 750;
}

.employee-copy strong,
.employee-copy span {
    display: block;
}

.employee-copy strong {
    margin-bottom: 4px;
    font-size: 12px;
}

.employee-copy span {
    color: var(--muted);
    font-size: 10px;
}

.you-badge {
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 9px;
}

.simple-bars {
    padding: 20px;
}

.bar-row {
    min-height: 44px;
    display: grid;
    grid-template-columns: 90px 1fr 30px;
    align-items: center;
    gap: 12px;
    font-size: 10px;
}

.bar-row > span {
    color: var(--muted);
}

.bar-track {
    height: 7px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

.bar-fill {
    height: 100%;
    min-width: 3px;
    background: var(--text);
}

.analytics-clicks {
    margin-top: 18px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-card {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.settings-card > span {
    margin-bottom: auto;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.settings-card strong {
    margin-bottom: 10px;
    font-size: 22px;
}

.settings-card p {
    max-width: 400px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .admin-shell {
        grid-template-columns: 190px 1fr;
    }

    .admin-two-column,
    .employees-layout {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 760px) {
    .admin-shell {
        display: block;
    }

    .admin-sidebar {
        position: static;
        width: 100%;
        height: auto;
        padding: 18px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .admin-logo {
        margin: 0 0 18px;
    }

    .admin-menu {
        grid-template-columns: repeat(3, 1fr);
    }

    .admin-menu a {
        justify-content: center;
        padding: 0 8px;
        font-size: 10px;
    }

    .admin-sidebar-bottom {
        display: none;
    }

    .admin-topbar {
        top: 0;
        padding: 0 18px;
    }

    .admin-content {
        padding: 40px 18px 70px;
    }

    .admin-filter-bar {
        grid-template-columns: 1fr;
    }

    .user-profile-hero {
        grid-template-columns: 60px 1fr;
    }

    .profile-actions {
        grid-column: 1 / -1;
    }

    .profile-info-grid,
    .settings-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   V6 PRODUCT CATALOG
   ========================================================= */

.products-page {
    min-height: 100vh;
    padding-top: 76px;
    background: var(--bg);
}

.product-hero {
    padding: 70px 6vw 45px;
    text-align: center;
}

.product-hero h1 {
    margin: 0;
    font-size: clamp(52px, 7vw, 96px);
    line-height: .95;
    letter-spacing: -5px;
}

.product-hero > p:not(.eyebrow) {
    margin: 20px auto 0;
    color: var(--muted);
    font-size: 13px;
}

.product-categories {
    position: sticky;
    top: 76px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow-x: auto;
    padding: 0 5vw;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(16px);
}

.product-categories a {
    position: relative;
    flex: 0 0 auto;
    padding: 20px 25px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    transition: color .2s ease;
}

.product-categories a:hover,
.product-categories a.active {
    color: var(--text);
}

.product-categories a.active::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: -1px;
    height: 2px;
    background: var(--text);
}

.popular-products {
    padding: 80px 4.5vw 110px;
}

.popular-heading {
    margin-bottom: 38px;
    text-align: center;
}

.popular-heading > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.popular-heading h2 {
    margin: 8px 0 0;
    font-size: clamp(32px, 4vw, 55px);
    letter-spacing: -2.4px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    transition:
        transform .22s ease,
        border-color .22s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: var(--line-strong);
}

.product-image {
    position: relative;
    aspect-ratio: 1 / .92;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: #f2f2ef;
}

.product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.025);
}

.wishlist-button {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(20,20,20,.15);
    border-radius: 50%;
    color: #111;
    background: rgba(255,255,255,.85);
    font-size: 20px;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.product-info {
    padding: 20px;
}

.product-category {
    display: block;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.product-info h3 {
    min-height: 50px;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.product-price {
    display: block;
    margin: 12px 0 28px;
    font-size: 17px;
}

.product-buy-row {
    display: grid;
    gap: 11px;
}

.quantity-control {
    width: 118px;
    height: 38px;
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    border: 1px solid var(--line);
}

.quantity-control button {
    border: 0;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    font-size: 16px;
}

.quantity-control button:hover {
    background: color-mix(in srgb, var(--text) 7%, transparent);
}

.qty-value {
    display: grid;
    place-items: center;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    font-size: 12px;
    font-weight: 750;
}

.cart-button {
    width: 100%;
    min-height: 45px;
    border: 1px solid var(--text);
    color: var(--button-text);
    background: var(--button-bg);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease;
}

.cart-button:hover {
    transform: scale(1.015);
}

.cart-button.added {
    opacity: .68;
}

.product-empty {
    grid-column: 1 / -1;
    padding: 80px 20px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 1150px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .product-hero {
        padding: 55px 22px 35px;
    }

    .product-categories {
        justify-content: flex-start;
        padding: 0 8px;
    }

    .product-categories a {
        padding: 17px 16px;
    }

    .popular-products {
        padding: 55px 18px 80px;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   V7 ECOMMERCE + APEX STYLE ADMIN
   ========================================================= */

.product-categories a {
    font-size: 14px;
    font-weight: 700;
    padding-left: 29px;
    padding-right: 29px;
}

.wishlist-button {
    color: #777;
    transition: transform .2s ease, color .2s ease, background .2s ease;
}

.wishlist-button:hover {
    transform: scale(1.08);
}

.wishlist-button.favorite-active {
    color: #e31937;
    background: #fff;
}

.profile-icon-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    font-size: 13px;
    font-weight: 800;
    transition: transform .2s ease, border-color .2s ease;
}

.profile-icon-button:hover {
    transform: scale(1.08);
    border-color: var(--line-strong);
}

.nav-cart-link {
    font-size: 18px;
    transition: transform .2s ease;
}

.nav-cart-link:hover {
    transform: scale(1.12);
}

.commerce-page {
    min-height: 100vh;
    padding: 130px 6vw 90px;
}

.commerce-heading {
    max-width: 760px;
    margin-bottom: 45px;
}

.commerce-heading h1 {
    margin: 0;
    font-size: clamp(48px, 7vw, 88px);
    letter-spacing: -4px;
}

.commerce-heading > p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.7;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 22px;
}

.cart-list {
    border-top: 1px solid var(--line);
}

.cart-item {
    min-height: 150px;
    display: grid;
    grid-template-columns: 120px 1fr auto 42px;
    gap: 20px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.cart-item img {
    width: 120px;
    height: 110px;
    object-fit: cover;
    background: #f3f3f0;
}

.cart-item-copy h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.cart-item-copy span,
.cart-item-copy strong {
    display: block;
}

.cart-item-copy span {
    color: var(--muted);
    font-size: 11px;
}

.cart-item-copy strong {
    margin-top: 12px;
}

.cart-qty-form {
    display: flex;
    gap: 6px;
}

.cart-qty-form input {
    width: 65px;
    height: 36px;
}

.cart-qty-form button,
.remove-cart-btn {
    min-height: 36px;
    border: 1px solid var(--line);
    color: var(--text);
    background: transparent;
    cursor: pointer;
}

.remove-cart-btn {
    width: 36px;
    font-size: 18px;
}

.cart-summary,
.payment-card {
    align-self: start;
    padding: 27px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.cart-summary span,
.payment-card > span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.cart-summary strong,
.payment-card > strong {
    display: block;
    margin: 10px 0 20px;
    font-size: 35px;
}

.cart-summary p {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.checkout-button,
.payment-card button {
    min-height: 48px;
    width: 100%;
    display: grid;
    place-items: center;
    border: 0;
    color: var(--button-text);
    background: var(--button-bg);
    font-weight: 800;
    cursor: pointer;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
}

.checkout-items {
    border-top: 1px solid var(--line);
}

.checkout-row {
    min-height: 62px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.fake-payment-methods {
    display: flex;
    gap: 8px;
    margin: 25px 0;
}

.fake-payment-methods span {
    padding: 8px 12px;
    border: 1px solid var(--line);
    font-size: 10px;
}

.orders-list {
    display: grid;
    gap: 12px;
}

.order-card {
    min-height: 105px;
    display: grid;
    grid-template-columns: 1.3fr .8fr .8fr 1fr;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.order-card span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.order-card h3 {
    margin: 0;
}

.order-card time {
    color: var(--muted);
    font-size: 10px;
}

.order-status {
    font-size: 11px;
    text-transform: capitalize;
}

.order-status.paid,
.order-status.completed {
    color: #35c46a;
}

.order-status.processing {
    color: #e4a821;
}

.order-status.cancelled {
    color: #ef5158;
}

.profile-page {
    min-height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: 300px 1fr;
    padding-top: 76px;
}

.profile-sidebar {
    padding: 45px 28px;
    border-right: 1px solid var(--line);
    background: var(--surface);
}

.large-profile-avatar {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f59e0b;
    color: #111;
    font-size: 30px;
    font-weight: 800;
}

.profile-sidebar h2 {
    margin-bottom: 4px;
}

.profile-sidebar > span {
    color: var(--muted);
    font-size: 11px;
}

.profile-about {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.profile-about h3 {
    font-size: 13px;
}

.profile-about p {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7;
}

.profile-content {
    padding: 55px 4vw;
}

.profile-section-heading h1 {
    margin: 0 0 35px;
    font-size: 38px;
}

.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.profile-stat-grid article {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.profile-stat-grid span {
    color: var(--muted);
    font-size: 10px;
}

.profile-stat-grid strong {
    font-size: 28px;
}

.profile-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-top: 20px;
}

.profile-action-grid a {
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-weight: 700;
}

.compact-product-hero {
    padding-bottom: 20px;
}

/* Apex-like admin */
.admin-sidebar {
    background: #050505 !important;
}

html[data-theme="light"] .admin-sidebar {
    background: #090909 !important;
    color: #f4f4f4;
}

.admin-main {
    background: #090909;
    color: #f6f6f6;
}

.admin-topbar {
    background: rgba(8,8,8,.94);
    border-color: rgba(255,255,255,.10);
}

.admin-content {
    background: #090909;
}

.apex-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
}

.apex-heading h1 {
    margin: 0;
    font-size: 34px;
    letter-spacing: -1.4px;
}

.apex-heading p {
    margin: 8px 0 0;
    color: #7e8b9b;
    font-size: 13px;
}

.new-order-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border-radius: 8px;
    background: #06c167;
    color: #07100a;
    font-size: 12px;
    font-weight: 800;
}

.apex-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
}

.apex-metric-card,
.apex-panel {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 15px;
    background: #141414;
}

.apex-metric-card {
    position: relative;
    min-height: 185px;
    overflow: hidden;
    padding: 22px;
}

.apex-metric-card > span {
    color: #94a2b3;
    font-size: 12px;
}

.apex-metric-card > strong {
    display: block;
    margin-top: 14px;
    font-size: 28px;
}

.apex-metric-card > em {
    display: block;
    margin-top: 10px;
    color: #20c96b;
    font-size: 10px;
    font-style: normal;
}

.metric-spark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    opacity: .7;
    clip-path: polygon(0 70%, 15% 50%, 30% 67%, 45% 35%, 60% 53%, 75% 28%, 100% 12%, 100% 100%, 0 100%);
}

.spark-green { background: linear-gradient(to top, rgba(0,200,100,.35), rgba(0,200,100,.02)); }
.spark-cyan { background: linear-gradient(to top, rgba(0,180,180,.32), rgba(0,180,180,.02)); }
.spark-blue { background: linear-gradient(to top, rgba(40,140,255,.32), rgba(40,140,255,.02)); }
.spark-gold { background: linear-gradient(to top, rgba(230,160,0,.30), rgba(230,160,0,.02)); }

.apex-overview-grid {
    display: grid;
    grid-template-columns: 1.5fr .7fr;
    gap: 16px;
    margin-top: 18px;
}

.apex-panel-heading {
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.apex-panel-heading h2 {
    margin: 0;
    font-size: 15px;
}

.apex-panel-heading p,
.apex-panel-heading a {
    margin: 5px 0 0;
    color: #7f8b9a;
    font-size: 10px;
}

.apex-panel-heading > strong {
    color: #26d675;
    font-size: 12px;
}

.revenue-chart {
    height: 300px;
    display: flex;
    align-items: end;
    gap: 13px;
    padding: 30px 28px 20px;
}

.revenue-bar-item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    text-align: center;
}

.revenue-bar-track {
    flex: 1;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.revenue-bar {
    width: 100%;
    min-height: 4px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to top, #087d45, #00c86b);
}

.revenue-bar-item span {
    color: #6e7885;
    font-size: 9px;
}

.finance-donut {
    width: 190px;
    height: 190px;
    display: grid;
    place-items: center;
    margin: 32px auto 20px;
    border-radius: 50%;
    background: conic-gradient(#08bf6b 0 64%, #2388df 64% 82%, #d54151 82% 100%);
}

.donut-center {
    width: 125px;
    height: 125px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background: #141414;
}

.donut-center strong {
    font-size: 15px;
}

.donut-center span {
    margin-top: 5px;
    color: #768392;
    font-size: 9px;
}

.finance-legend {
    display: grid;
    gap: 10px;
    padding: 0 24px 24px;
}

.finance-legend div {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 8px;
    color: #8794a3;
    font-size: 10px;
}

.finance-legend strong {
    color: #eee;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot.green { background: #08bf6b; }
.legend-dot.red { background: #d54151; }
.legend-dot.blue { background: #2388df; }

.apex-bottom-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 16px;
    margin-top: 18px;
}

.recent-orders-table {
    padding: 0 20px 20px;
}

.recent-order-row {
    min-height: 63px;
    display: grid;
    grid-template-columns: 1.6fr .6fr .8fr .7fr;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #dce1e6;
    font-size: 10px;
}

.recent-order-row.header {
    min-height: 48px;
    color: #788493;
}

.admin-order-pill {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 9px;
    text-transform: capitalize;
}

.admin-order-pill.paid,
.admin-order-pill.completed {
    color: #1a2d1e;
    background: #2bc76b;
}

.admin-order-pill.processing {
    color: #342300;
    background: #f1ad22;
}

.admin-order-pill.cancelled {
    color: #fff;
    background: #ef4048;
}

.admin-activity-list {
    padding: 7px 20px 20px;
}

.admin-activity-item {
    min-height: 70px;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.activity-icon-dot {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #0ac873;
    background: rgba(0,190,100,.12);
}

.admin-activity-item strong,
.admin-activity-item span,
.admin-activity-item time {
    display: block;
}

.admin-activity-item strong {
    font-size: 10px;
}

.admin-activity-item span,
.admin-activity-item time {
    margin-top: 3px;
    color: #788493;
    font-size: 9px;
}

.status-form {
    display: flex;
    gap: 5px;
}

.status-form select,
.status-form button {
    height: 31px;
    border: 1px solid rgba(255,255,255,.12);
    color: #ddd;
    background: #111;
    font-size: 9px;
}

.status-form button {
    padding: 0 9px;
    cursor: pointer;
}

.finance-form {
    padding: 20px;
}

@media (max-width: 1100px) {
    .apex-metrics {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .apex-overview-grid,
    .apex-bottom-grid {
        grid-template-columns: 1fr;
    }

    .cart-layout,
    .checkout-layout,
    .profile-page {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 650px) {
    .apex-metrics {
        grid-template-columns: 1fr;
    }

    .profile-stat-grid,
    .profile-action-grid {
        grid-template-columns: 1fr;
    }

    .order-card {
        grid-template-columns: 1fr 1fr;
    }

    .cart-item {
        grid-template-columns: 90px 1fr;
    }

    .cart-item img {
        width: 90px;
        height: 85px;
    }
}


/* =========================================================
   V8 AUTH + CART HUB + ADMIN THEME FIXES
   ========================================================= */

.header-auth-link {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.header-register-button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    color: var(--button-text);
    background: var(--button-bg);
    font-size: 11px;
    font-weight: 800;
    transition: transform .2s ease;
}

.header-register-button:hover {
    transform: scale(1.04);
}

.public-profile-button {
    background: transparent;
}

.shopping-hub-nav {
    position: sticky;
    top: 76px;
    z-index: 40;
    display: flex;
    gap: 8px;
    margin-bottom: 38px;
    padding: 10px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(16px);
}

.shopping-hub-nav a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    border: 1px solid transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.shopping-hub-nav a:hover {
    color: var(--text);
    border-color: var(--line);
}

.shopping-hub-nav a span {
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    font-size: 9px;
}

.shopping-hub-section {
    padding: 36px 0 55px;
    border-top: 1px solid var(--line);
}

.hub-section-heading {
    min-height: 75px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.hub-section-heading h2 {
    margin: 0;
    font-size: 32px;
    letter-spacing: -1.5px;
}

.hub-section-heading > strong {
    font-size: 24px;
}

.hub-section-heading > a {
    color: var(--muted);
    font-size: 11px;
}

.hub-favorite-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

.hub-favorite-card {
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
}

.hub-favorite-card img {
    width: 100%;
    aspect-ratio: 1/.82;
    display: block;
    object-fit: cover;
    background: #f3f3f0;
}

.hub-favorite-card > div {
    padding: 15px;
}

.hub-favorite-card h3 {
    min-height: 42px;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
}

.hub-order-list {
    border-top: 1px solid var(--line);
}

.hub-order-row {
    min-height: 68px;
    display: grid;
    grid-template-columns: .5fr 1fr .8fr 1fr;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
}

.hub-order-row time {
    justify-self: end;
    color: var(--muted);
    font-size: 10px;
}

.hub-empty-card {
    padding: 35px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.hub-empty-card h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.hub-empty-card a {
    color: var(--muted);
    font-size: 11px;
}

/* Admin theme variables */
.admin-shell {
    --admin-bg: #080808;
    --admin-panel: #141414;
    --admin-panel-2: #101010;
    --admin-text: #f4f4f4;
    --admin-muted: #8793a2;
    --admin-line: rgba(255,255,255,.10);
    --admin-hover: rgba(255,255,255,.06);
}

html[data-theme="light"] .admin-shell {
    --admin-bg: #f4f4f2;
    --admin-panel: #ffffff;
    --admin-panel-2: #f8f8f6;
    --admin-text: #111111;
    --admin-muted: #626a74;
    --admin-line: rgba(0,0,0,.12);
    --admin-hover: rgba(0,0,0,.05);
}

.admin-sidebar,
html[data-theme="light"] .admin-sidebar {
    background: var(--admin-panel-2) !important;
    color: var(--admin-text) !important;
    border-color: var(--admin-line) !important;
}

.admin-main,
.admin-content {
    background: var(--admin-bg) !important;
    color: var(--admin-text) !important;
}

.admin-topbar {
    background: color-mix(in srgb, var(--admin-bg) 92%, transparent) !important;
    border-color: var(--admin-line) !important;
    color: var(--admin-text) !important;
}

.admin-logo,
.admin-sidebar-bottom a,
.admin-topbar-actions a,
.admin-page-heading h1,
.apex-heading h1,
.apex-panel h2,
.staff-table td,
.metric-card,
.metric-card strong,
.admin-panel,
.panel-title,
.panel-title h2,
.settings-card,
.settings-card strong,
.employee-row,
.timeline-item,
.user-profile-hero {
    color: var(--admin-text) !important;
}

.admin-menu a {
    color: var(--admin-muted) !important;
}

.admin-menu a:hover,
.admin-menu a.active {
    color: var(--admin-text) !important;
    background: var(--admin-hover) !important;
}

.admin-sidebar-bottom span,
.admin-small-label,
.admin-page-heading > p:not(.eyebrow),
.panel-title a,
.panel-title span,
.staff-table th,
.activity-feed-item span,
.activity-feed-item time,
.employee-copy span,
.timeline-item p,
.timeline-item time,
.settings-card > span,
.settings-card p,
.apex-heading p {
    color: var(--admin-muted) !important;
}

.apex-metric-card,
.apex-panel,
.admin-panel,
.metric-card,
.settings-card,
.user-profile-hero,
.profile-info-grid article {
    background: var(--admin-panel) !important;
    border-color: var(--admin-line) !important;
    color: var(--admin-text) !important;
}

.recent-order-row,
.admin-activity-item,
.activity-feed-item,
.ranking-row,
.employee-row,
.timeline-item,
.staff-table th,
.staff-table td {
    border-color: var(--admin-line) !important;
}

.recent-order-row,
.admin-activity-item,
.activity-feed-item,
.ranking-row,
.employee-row,
.timeline-item,
.staff-table td {
    color: var(--admin-text) !important;
}

.recent-order-row.header {
    color: var(--admin-muted) !important;
}

.donut-center {
    background: var(--admin-panel) !important;
    color: var(--admin-text) !important;
}

.admin-theme-toggle {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--admin-line);
    border-radius: 50%;
    color: var(--admin-text);
    background: transparent;
    cursor: pointer;
}

.admin-filter-bar input,
.admin-filter-bar select,
.status-form select,
.status-form button {
    color: var(--admin-text) !important;
    background: var(--admin-panel) !important;
    border-color: var(--admin-line) !important;
}

@media (max-width: 850px) {
    .hub-favorite-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 600px) {
    .shopping-hub-nav {
        overflow-x: auto;
    }

    .hub-favorite-grid {
        grid-template-columns: 1fr;
    }

    .hub-order-row {
        grid-template-columns: 1fr 1fr;
    }

    .hub-order-row time {
        justify-self: start;
    }
}


/* V9 notifications */
.notification-wrap { position:relative; }
.notification-bell {
    position:relative; width:38px; height:38px; border:1px solid var(--line);
    border-radius:50%; background:transparent; color:var(--text); cursor:pointer;
    font-size:20px; display:grid; place-items:center;
}
.notification-badge {
    position:absolute; right:-3px; top:-4px; min-width:18px; height:18px;
    padding:0 4px; display:grid; place-items:center; border-radius:999px;
    background:#e52323; color:#fff; font-size:9px; font-weight:800;
}
.notification-popover {
    position:absolute; right:0; top:48px; width:min(380px,88vw); display:none;
    border:1px solid var(--line); background:var(--surface); color:var(--text);
    box-shadow:0 18px 55px rgba(0,0,0,.24); z-index:1000;
}
.notification-popover.show { display:block; animation:noticeIn .2s ease; }
@keyframes noticeIn { from {opacity:0;transform:translateY(-7px)} to {opacity:1;transform:none} }
.notification-popover-head {
    display:flex; justify-content:space-between; align-items:center; padding:16px 18px;
    border-bottom:1px solid var(--line); font-size:12px;
}
.notification-popover-head a { color:var(--muted); font-size:10px; }
.notification-mini {
    display:grid; grid-template-columns:28px 1fr; gap:10px; padding:14px 18px;
    border-bottom:1px solid var(--line);
}
.notification-mini>span { color:#2dbd68; font-weight:800; }
.notification-mini strong,.notification-mini small,.notification-mini time { display:block; }
.notification-mini strong { font-size:11px; }
.notification-mini small,.notification-mini time { margin-top:4px;color:var(--muted);font-size:9px; }
.notification-empty { padding:18px; color:var(--muted); font-size:11px; }
.notification-page-list { border-top:1px solid var(--line); }
.notification-page-item {
    min-height:90px; display:flex; justify-content:space-between; align-items:center;
    gap:20px; padding:18px; border-bottom:1px solid var(--line);
}
.notification-page-item.unread { background:color-mix(in srgb,var(--text) 5%,transparent); }
.notification-page-item strong,.notification-page-item span,.notification-page-item time { display:block; }
.notification-page-item span,.notification-page-item time { margin-top:5px;color:var(--muted);font-size:10px; }
.notification-page-item button { border:1px solid var(--line);background:transparent;color:var(--text);padding:9px 12px;cursor:pointer; }


/* =========================================================
   V10 ROUND HEADER ICONS + ORDER DETAIL + LIVE NOTICE
   ========================================================= */

.round-header-icon,
.notification-bell,
.profile-icon-button,
.nav-cart-link {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 50% !important;
    color: var(--text) !important;
    background: transparent !important;
    line-height: 1;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.round-header-icon:hover,
.notification-bell:hover,
.profile-icon-button:hover,
.nav-cart-link:hover {
    transform: scale(1.07);
    border-color: var(--line-strong) !important;
    background: color-mix(in srgb, var(--text) 5%, transparent) !important;
}

.round-header-icon svg,
.notification-bell svg,
.profile-icon-button svg,
.nav-cart-link svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-badge.hidden {
    display: none;
}

.notification-state-icon.rejected {
    color: #ef4f59;
}

.notification-view-button {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 9px;
    font-weight: 750;
}

.notification-view-button:hover {
    border-color: var(--line-strong);
}

.home-products-button {
    width: fit-content;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    padding: 0 18px;
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 800;
    transition: transform .2s ease, border-color .2s ease;
}

.home-products-button:hover {
    transform: scale(1.035);
    border-color: var(--line-strong);
}

.order-detail-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 22px;
    border: 1px solid var(--line);
    background: var(--line);
}

.order-detail-summary article {
    min-height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    background: var(--surface);
}

.order-detail-summary span {
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.order-detail-summary strong {
    font-size: 13px;
}

.order-detail-summary small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}

.order-products-panel {
    border: 1px solid var(--line);
    background: var(--surface);
}

.order-products-head,
.order-product-row {
    display: grid;
    grid-template-columns: 2fr .6fr 1fr 1fr;
    gap: 18px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.order-products-head {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.order-product-row {
    min-height: 64px;
    font-size: 11px;
}

.order-detail-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
    padding: 22px;
}

.order-detail-total span {
    color: var(--muted);
    font-size: 11px;
}

.order-detail-total strong {
    font-size: 24px;
}

@media (max-width: 800px) {
    .order-detail-summary {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .order-products-head {
        display: none;
    }

    .order-product-row {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================
   V12 SHOP TABS / BADGES / PAGINATION / ROLE UI
   ========================================================= */

.hidden { display: none !important; }

.nav-cart-link,
.round-header-icon {
    position: relative;
}

.cart-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border: 2px solid var(--bg);
    border-radius: 999px;
    background: #e52323;
    color: #fff;
    font-size: 9px;
    font-weight: 850;
}

.shopping-page-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 42px;
}

.shopping-page-tabs a {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 22px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 14px;
    font-weight: 750;
    transition: transform .2s ease, border-color .2s ease, color .2s ease;
}

.shopping-page-tabs a:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    color: var(--text);
}

.shopping-page-tabs a.active {
    border-color: var(--line-strong);
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
}

.shopping-tab-icon {
    font-size: 18px;
}

.shopping-page-tabs strong {
    min-width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 9%, transparent);
    font-size: 9px;
}

.shopping-single-panel {
    min-height: 420px;
}

.auto-cart-quantity {
    display: grid;
    gap: 7px;
}

.auto-cart-quantity label {
    margin: 0;
    color: var(--muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.auto-cart-quantity input {
    width: 74px;
    height: 40px;
    text-align: center;
}

.forgot-password-link {
    display: block;
    width: fit-content;
    margin: 14px auto 0;
    color: var(--muted);
    font-size: 11px;
}

.forgot-password-link:hover {
    color: var(--text);
}

.admin-menu a {
    position: relative;
}

.admin-menu-badge {
    min-width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef474f;
    color: #fff;
    font-size: 9px;
    font-weight: 850;
}

.admin-sidebar-bottom small {
    color: var(--admin-muted);
    font-size: 9px;
}

.role-readonly-note {
    margin: 20px;
    padding: 16px;
    border: 1px solid var(--admin-line);
    color: var(--admin-muted);
    font-size: 11px;
}

.employee-copy small {
    display: block;
    margin-top: 5px;
    color: var(--admin-muted);
    font-size: 9px;
}

.admin-form select {
    width: 100%;
    height: 49px;
    padding: 0 13px;
    border: 1px solid var(--admin-line, var(--line));
    color: var(--admin-text, var(--text));
    background: var(--admin-panel, var(--surface));
}

.viewer-note {
    color: var(--admin-muted);
    font-size: 10px;
}

.pagination {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
    border: 1px solid var(--admin-line, var(--line));
    background: var(--admin-panel, var(--surface));
}

.pagination a {
    padding: 9px 13px;
    border: 1px solid var(--admin-line, var(--line));
    color: var(--admin-text, var(--text));
    font-size: 10px;
    font-weight: 750;
}

.pagination span {
    color: var(--admin-muted, var(--muted));
    font-size: 10px;
}

@media (max-width: 700px) {
    .shopping-page-tabs {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .shopping-page-tabs a {
        min-height: 58px;
    }
}


.staff-online-pill {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--admin-line);
    border-radius: 999px;
    color: var(--admin-muted);
    font-size: 9px;
}

.staff-online-pill strong {
    color: var(--admin-text);
}

.staff-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #20c96b;
    box-shadow: 0 0 0 4px rgba(32, 201, 107, .10);
}


/* =========================================================
   V13 — PREMIUM DESIGN SYSTEM
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;

    --space-1: 6px;
    --space-2: 10px;
    --space-3: 14px;
    --space-4: 18px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 44px;
    --space-8: 64px;

    --shadow-soft: 0 8px 30px rgba(0,0,0,.06);
    --shadow-card: 0 18px 60px rgba(0,0,0,.10);
    --shadow-hover: 0 24px 70px rgba(0,0,0,.16);

    --success-soft: #1a8f52;
    --warning-soft: #b57a12;
    --danger-soft: #c53b45;
    --info-soft: #3278d4;
}

html[data-theme="dark"] {
    --bg: #070707;
    --surface: #101010;
    --surface-2: #161616;
    --surface-3: #1c1c1c;
    --text: #f6f6f3;
    --muted: #949494;
    --line: rgba(255,255,255,.10);
    --line-strong: rgba(255,255,255,.22);
    --button-bg: #f6f6f3;
    --button-text: #0a0a0a;
    --shadow: rgba(0,0,0,.34);
}

html[data-theme="light"] {
    --bg: #f7f7f5;
    --surface: #ffffff;
    --surface-2: #f1f1ee;
    --surface-3: #e9e9e5;
    --text: #111111;
    --muted: #686868;
    --line: rgba(0,0,0,.10);
    --line-strong: rgba(0,0,0,.22);
    --button-bg: #111111;
    --button-text: #ffffff;
    --shadow: rgba(0,0,0,.08);
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 20% -10%, color-mix(in srgb, var(--text) 4%, transparent), transparent 26%),
        var(--bg);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif;
    letter-spacing: -0.015em;
}

a {
    color: inherit;
}

/* ---------- Header ---------- */
.site-header {
    height: 78px;
    padding: 0 4vw;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 1px 0 rgba(255,255,255,.02);
}

.porsche-wordmark {
    font-size: 14px;
    letter-spacing: 7px;
    font-weight: 900;
}

.main-nav {
    gap: 34px;
}

.main-nav a {
    position: relative;
    font-size: 13px;
    font-weight: 650;
    color: var(--muted);
    transition: color .2s ease;
}

.main-nav a:hover {
    color: var(--text);
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 3px;
    height: 1px;
    background: var(--text);
    transition: right .25s ease;
}

.main-nav a:hover::after {
    right: 0;
}

.header-actions {
    gap: 10px;
}

.theme-toggle,
.language-toggle,
.round-header-icon,
.profile-icon-button,
.notification-bell,
.nav-cart-link {
    border-radius: 999px !important;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    color: var(--text);
    background: var(--surface);
    transition: transform .2s ease, border-color .2s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--line-strong);
}

.language-toggle {
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 10px;
}

.header-auth-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    transition: color .2s ease, background .2s ease;
}

.header-auth-link:hover {
    color: var(--text);
    background: var(--surface);
}

.header-register-button {
    min-height: 40px;
    padding: 0 17px;
    border: 1px solid var(--button-bg);
    border-radius: 999px;
    box-shadow: none;
}

/* ---------- Generic typography ---------- */
.eyebrow {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.commerce-heading,
.product-hero,
.admin-page-heading {
    max-width: 900px;
}

.commerce-heading h1,
.product-hero h1,
.admin-page-heading h1,
.home-hero h1 {
    font-weight: 720;
    letter-spacing: -0.055em;
}

.commerce-heading h1,
.product-hero h1 {
    font-size: clamp(54px, 7vw, 96px);
    line-height: .92;
}

.commerce-heading p:not(.eyebrow),
.product-hero p:not(.eyebrow) {
    max-width: 620px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

/* ---------- Primary page containers ---------- */
.products-page,
.commerce-page,
.profile-page {
    background: transparent;
}

.commerce-page {
    padding: 145px 5.5vw 110px;
}

.products-page {
    padding-top: 78px;
}

/* ---------- Buttons ---------- */
.submit-button,
.cart-button,
.checkout-button,
.payment-card button,
.admin-filter-bar button,
.new-order-button,
.reminder-button {
    border-radius: 12px;
    box-shadow: none;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}

.submit-button:hover,
.cart-button:hover,
.checkout-button:hover,
.payment-card button:hover,
.admin-filter-bar button:hover,
.new-order-button:hover,
.reminder-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px var(--shadow);
}

.admin-secondary-btn,
.inline-action-btn,
.small-register-button,
.reminder-button,
.cart-qty-form button {
    border-radius: 10px;
}

.admin-danger-btn {
    border-radius: 10px;
}

/* ---------- Forms ---------- */
.form-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--text) 4%), var(--surface));
    box-shadow: var(--shadow-card);
    padding: 38px;
}

.field {
    gap: 8px;
}

.field label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
}

.field input,
.field select,
.admin-filter-bar input,
.admin-filter-bar select {
    height: 50px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    padding: 0 15px;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.field input:focus,
.field select:focus,
.admin-filter-bar input:focus,
.admin-filter-bar select:focus {
    border-color: var(--line-strong);
    background: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 6%, transparent);
}

/* ---------- Landing / Home ---------- */
.landing {
    min-height: calc(100vh - 78px);
    padding: 5vw;
    gap: 5vw;
}

.landing-left {
    align-self: center;
}

.landing-left h1 {
    font-size: clamp(56px, 7.2vw, 112px);
    line-height: .88;
    letter-spacing: -0.065em;
    max-width: 760px;
}

.landing-description {
    max-width: 520px;
    margin-top: 24px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.entry-actions {
    display: flex;
    gap: 12px;
    margin-top: 34px;
}

.entry-button {
    min-width: 170px;
    min-height: 52px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 0 20px;
}

.entry-button:hover {
    background: var(--text);
    color: var(--bg);
    transform: translateY(-2px);
}

.gif-frame {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: #0d0d0d;
    box-shadow: var(--shadow-card);
}

.home-hero {
    padding: 10vw 6vw 7vw;
}

.home-hero > div:first-child {
    max-width: 950px;
}

.home-hero h1 {
    font-size: clamp(58px, 8vw, 118px);
    line-height: .9;
}

.home-products-button {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--surface);
}

.story-grid {
    gap: 16px;
}

.story-card {
    min-height: 290px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 28px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.story-card:hover {
    transform: translateY(-5px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-card);
}

.story-card span {
    color: var(--muted);
}

.quote-section,
.final-panel {
    border-radius: var(--radius-lg);
}

/* ---------- Product page ---------- */
.product-hero {
    padding: 90px 5vw 56px;
}

.product-categories {
    top: 78px;
    gap: 8px;
    padding: 12px 4vw;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.product-categories a {
    padding: 13px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 650;
    border: 1px solid transparent;
}

.product-categories a:hover {
    background: var(--surface);
    border-color: var(--line);
}

.product-categories a.active {
    color: var(--button-text);
    background: var(--button-bg);
    border-color: var(--button-bg);
}

.product-categories a.active::after {
    display: none;
}

.popular-products {
    padding: 85px 4.5vw 120px;
}

.popular-heading {
    margin-bottom: 44px;
}

.popular-heading h2 {
    font-size: clamp(38px, 4vw, 64px);
}

.product-grid {
    gap: 22px;
}

.product-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: var(--line-strong);
}

.product-image {
    border-bottom: 0;
    background:
        linear-gradient(145deg, #fafaf8, #ecece7);
}

.product-image img {
    transform: scale(.96);
    transition: transform .35s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.01);
}

.wishlist-button {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

.product-info {
    padding: 22px;
}

.product-category {
    margin-bottom: 10px;
}

.product-info h3 {
    min-height: 48px;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 650;
}

.product-price {
    margin: 12px 0 22px;
    font-size: 20px;
    letter-spacing: -.4px;
}

.product-buy-row {
    grid-template-columns: 118px 1fr;
    align-items: center;
    gap: 10px;
}

.quantity-control {
    width: 118px;
    height: 46px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
}

.cart-button {
    min-height: 46px;
    border-radius: 10px;
}

/* ---------- Shopping tabs ---------- */
.shopping-page-tabs {
    gap: 14px;
}

.shopping-page-tabs a {
    min-height: 72px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: none;
}

.shopping-page-tabs a.active {
    background: var(--text);
    color: var(--bg);
}

.shopping-page-tabs a.active strong {
    background: color-mix(in srgb, var(--bg) 15%, transparent);
    color: var(--bg);
}

.shopping-tab-icon {
    font-size: 19px;
}

/* ---------- Cart ---------- */
.cart-layout {
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 28px;
}

.cart-list {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
}

.cart-item {
    min-height: 150px;
    padding: 20px;
    border-bottom: 1px solid var(--line);
}

.cart-item:last-child {
    border-bottom: 0;
}

.cart-item img {
    border-radius: 12px;
}

.cart-item-copy h3 {
    font-size: 15px;
}

.cart-summary,
.payment-card {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 110px;
}

.cart-summary strong,
.payment-card > strong {
    font-size: 34px;
}

.remove-cart-btn {
    border-radius: 50%;
}

/* ---------- Orders ---------- */
.orders-list {
    gap: 14px;
}

.order-card {
    min-height: 112px;
    border-radius: 16px;
    background: var(--surface);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.order-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
    border-color: var(--line-strong);
}

.order-status {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
}

.order-status.paid,
.order-status.completed {
    background: color-mix(in srgb, #35c46a 14%, transparent);
    color: #35c46a;
}

.order-status.processing {
    background: color-mix(in srgb, #e4a821 14%, transparent);
    color: #e4a821;
}

.order-status.cancelled {
    background: color-mix(in srgb, #ef5158 14%, transparent);
    color: #ef5158;
}

/* ---------- Profile ---------- */
.profile-page {
    grid-template-columns: 320px 1fr;
}

.profile-sidebar {
    padding: 48px 30px;
    background: var(--surface);
}

.large-profile-avatar {
    width: 84px;
    height: 84px;
    background:
        linear-gradient(135deg, #f6c453, #e89722);
    box-shadow: 0 14px 35px rgba(230,150,30,.20);
}

.profile-content {
    padding: 64px 4vw;
}

.profile-stat-grid {
    gap: 16px;
}

.profile-stat-grid article,
.profile-action-grid a {
    border-radius: 16px;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.profile-stat-grid article:hover,
.profile-action-grid a:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
    border-color: var(--line-strong);
}

/* ---------- Toasts ---------- */
.toast-container {
    top: 96px;
    right: 24px;
    gap: 10px;
}

.toast {
    min-width: 310px;
    max-width: 420px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow-card);
}

.toast.success {
    border-left: 3px solid #2cc56a;
}

.toast.error {
    border-left: 3px solid #e34d56;
}

/* ---------- Notification ---------- */
.notification-popover {
    overflow: hidden;
    border-radius: 18px;
    box-shadow: var(--shadow-card);
}

.notification-mini {
    transition: background .2s ease;
}

.notification-mini:hover {
    background: color-mix(in srgb, var(--text) 4%, transparent);
}

.notification-view-button {
    border-radius: 9px;
}

/* =========================================================
   V13 ADMIN — PREMIUM SAAS UI
   ========================================================= */

.admin-shell {
    grid-template-columns: 250px 1fr;
}

.admin-sidebar {
    padding: 28px 18px;
    border-right: 1px solid var(--admin-line);
}

.admin-logo {
    margin: 0 12px 38px;
    font-size: 14px;
    letter-spacing: 6px;
}

.admin-menu {
    gap: 5px;
}

.admin-menu::before {
    content: "MANAGEMENT";
    padding: 0 13px 8px;
    color: var(--admin-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.admin-menu a {
    min-height: 45px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.admin-menu a.active {
    box-shadow: inset 0 0 0 1px var(--admin-line);
}

.admin-topbar {
    height: 74px;
    padding: 0 2.8vw;
}

.admin-content {
    padding: 48px 3vw 90px;
}

.admin-page-heading {
    margin-bottom: 32px;
}

.admin-page-heading h1 {
    font-size: clamp(46px, 5vw, 74px);
    letter-spacing: -3.7px;
}

.apex-heading {
    margin-bottom: 28px;
}

.apex-heading h1 {
    font-size: 38px;
    letter-spacing: -1.7px;
}

.apex-metrics {
    gap: 14px;
}

.apex-metric-card {
    min-height: 170px;
    border-radius: 16px;
    padding: 22px;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.apex-metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
    border-color: color-mix(in srgb, var(--admin-text) 18%, transparent);
}

.apex-metric-card > strong {
    font-size: 30px;
    letter-spacing: -1px;
}

.apex-panel,
.admin-panel,
.metric-card,
.settings-card {
    border-radius: 16px;
    overflow: hidden;
}

.apex-panel-heading,
.panel-title {
    padding: 0 22px;
}

.admin-filter-bar {
    grid-template-columns: minmax(260px, 1fr) 190px 100px;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--admin-line);
    border-radius: 14px;
    background: var(--admin-panel);
}

.admin-filter-bar input,
.admin-filter-bar select,
.admin-filter-bar button {
    height: 42px;
    border-radius: 10px;
}

/* ---------- Tables ---------- */
.table-wrap {
    overflow-x: auto;
}

.staff-table {
    min-width: 880px;
    border-collapse: separate;
    border-spacing: 0;
}

.staff-table th {
    padding: 14px 18px;
    background: color-mix(in srgb, var(--admin-text) 3%, transparent);
    font-size: 9px;
    letter-spacing: 1px;
}

.staff-table td {
    padding: 17px 18px;
    font-size: 11px;
}

.staff-table tbody tr {
    transition: background .18s ease;
}

.staff-table tbody tr:hover {
    background: color-mix(in srgb, var(--admin-text) 4%, transparent) !important;
}

.status-pill,
.admin-order-pill,
.you-badge {
    border-radius: 999px;
}

.status-pill {
    padding: 6px 10px;
}

.status-pill.online {
    color: #29c76f;
    background: rgba(41,199,111,.12);
    border-color: rgba(41,199,111,.25);
}

.status-pill.offline {
    color: var(--admin-muted);
    background: var(--admin-hover);
}

.status-form select,
.status-form button {
    border-radius: 9px;
}

/* ---------- Admin cards ---------- */
.metric-card {
    min-height: 135px;
    border-radius: 16px;
    padding: 21px;
}

.metric-card strong {
    font-size: 36px;
}

.settings-grid {
    gap: 18px;
}

.settings-card {
    min-height: 210px;
    padding: 28px;
}

.user-profile-hero {
    border-radius: 18px;
    padding: 30px;
}

.profile-info-grid {
    border-radius: 16px;
    overflow: hidden;
}

.employee-row {
    padding: 0 4px;
}

.employee-avatar {
    border-radius: 12px;
}

/* ---------- Admin pagination ---------- */
.pagination {
    border-radius: 14px;
    margin-top: 16px;
}

.pagination a {
    border-radius: 9px;
}

/* ---------- Finance donut ---------- */
.finance-donut {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .site-header {
        padding: 0 18px;
    }

    .main-nav {
        display: none;
    }

    .landing {
        grid-template-columns: 1fr;
        padding: 70px 24px;
    }

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

    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary,
    .payment-card {
        position: static;
    }

    .profile-page {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .commerce-page {
        padding: 120px 18px 80px;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-buy-row {
        grid-template-columns: 1fr;
    }

    .quantity-control {
        width: 100%;
    }

    .shopping-page-tabs {
        grid-template-columns: 1fr;
    }

    .order-card {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .toast {
        min-width: auto;
        width: calc(100vw - 32px);
    }
}


/* =========================================================
   V14 — PRODUCT DETAIL EXPERIENCE
   ========================================================= */

.product-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-detail-page {
    min-height: 100vh;
    padding: 125px 5vw 110px;
}

.product-detail-back {
    display: inline-flex;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    transition: color .2s ease, transform .2s ease;
}

.product-detail-back:hover {
    color: var(--text);
    transform: translateX(-3px);
}

.product-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(350px, .65fr);
    gap: 34px;
    align-items: start;
}

.product-gallery {
    min-width: 0;
}

.product-main-image {
    overflow: hidden;
    aspect-ratio: 1.15 / 1;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: #f1f1ee;
    box-shadow: var(--shadow-soft);
}

.product-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}

.product-main-image:hover img {
    transform: scale(1.012);
}

.product-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.product-thumb {
    overflow: hidden;
    aspect-ratio: 1.25 / 1;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    cursor: pointer;
    opacity: .64;
    transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
}

.product-thumb:hover,
.product-thumb.active {
    opacity: 1;
    transform: translateY(-2px);
    border-color: var(--line-strong);
}

.product-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.product-purchase-panel {
    position: sticky;
    top: 105px;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--surface) 95%, var(--text) 5%),
            var(--surface)
        );
    box-shadow: var(--shadow-card);
}

.product-detail-category {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.product-purchase-panel h1 {
    margin: 0;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
    letter-spacing: -2.5px;
}

.product-detail-description {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

.product-detail-price {
    margin-top: 28px;
    font-size: 32px;
    font-weight: 760;
    letter-spacing: -1px;
}

.stock-status {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 9px;
    margin: 22px 0;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, #2dc76c 25%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, #2dc76c 8%, transparent);
    font-size: 10px;
}

.stock-status span:not(.stock-dot) {
    color: var(--muted);
}

.stock-status strong {
    color: #2dc76c;
}

.stock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2dc76c;
    box-shadow: 0 0 0 4px color-mix(in srgb, #2dc76c 15%, transparent);
}

.detail-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.detail-quantity > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.detail-order-button {
    width: 100%;
    min-height: 54px;
    border-radius: 13px;
    font-size: 12px;
}

.detail-cart-link {
    width: 100%;
    min-height: 47px;
    display: grid;
    place-items: center;
    margin-top: 9px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--text);
    background: transparent;
    font-size: 11px;
    font-weight: 750;
    transition: border-color .2s ease, background .2s ease;
}

.detail-cart-link:hover {
    border-color: var(--line-strong);
    background: color-mix(in srgb, var(--text) 4%, transparent);
}

.product-information-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 55px;
}

.product-info-panel {
    min-height: 310px;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
}

.product-info-panel h2 {
    margin: 8px 0 26px;
    font-size: 28px;
    letter-spacing: -1.2px;
}

.highlight-list {
    display: grid;
    gap: 10px;
}

.highlight-list > div {
    min-height: 54px;
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}

.highlight-list span {
    color: #2dc76c;
    font-size: 14px;
    font-weight: 800;
}

.highlight-list p {
    margin: 0;
    font-size: 11px;
}

.usage-panel > p:last-child {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}

.product-detail-note {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
}

.product-detail-note strong {
    color: var(--text);
}

@media (max-width: 980px) {
    .product-detail-layout {
        grid-template-columns: 1fr;
    }

    .product-purchase-panel {
        position: static;
    }
}

@media (max-width: 680px) {
    .product-detail-page {
        padding: 115px 18px 80px;
    }

    .product-information-grid {
        grid-template-columns: 1fr;
    }

    .product-main-image {
        aspect-ratio: 1 / 1;
    }

    .product-purchase-panel {
        padding: 24px;
    }
}

/* =========================================================
   PORSCHE SHOP — PREMIUM V2 VISUAL REFINEMENT
   Added as a safe override layer; existing app behavior intact.
   ========================================================= */
:root {
    --v2-max: 1380px;
    --v2-pad: clamp(24px, 5vw, 80px);
    --v2-radius: 22px;
    --v2-radius-sm: 14px;
    --v2-line: rgba(127,127,127,.18);
    --v2-muted: #747474;
    --v2-shadow: 0 18px 55px rgba(0,0,0,.07);
}

html[data-theme="light"] body { background: #f5f5f3; color: #111; }
html[data-theme="dark"] body { background: #0c0c0c; }
body { letter-spacing: -.01em; }

.site-header {
    min-height: 82px;
    padding: 0 var(--v2-pad);
    background: color-mix(in srgb, var(--bg, #fff) 88%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--v2-line);
    position: sticky; top: 0; z-index: 100;
}
.porsche-wordmark { font-size: 15px; letter-spacing: .42em; font-weight: 800; }
.main-nav { gap: 34px; }
.main-nav a { font-size: 13px; font-weight: 650; position: relative; }
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-9px; height:1px; background:currentColor; transition:.25s ease; }
.main-nav a:hover::after { right:0; }
.header-actions { gap: 9px; }
.round-header-icon, .theme-toggle { width: 42px; height: 42px; }
.language-toggle { min-height: 42px; padding: 0 14px; }

.home-scroll, .products-page, .commerce-page, .content-page, .profile-page { width: 100%; }
.home-hero, .story-section, .popular-products, .commerce-page, .content-page { max-width: var(--v2-max); margin-left:auto; margin-right:auto; }

.home-hero {
    min-height: calc(100vh - 82px);
    padding: clamp(70px, 10vh, 130px) var(--v2-pad) 70px;
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); gap:70px; align-items:center;
    position:relative;
}
.home-hero::after {
    content:"911";
    min-height: 500px;
    border-radius: 32px;
    display:flex; align-items:flex-end; justify-content:flex-end;
    padding: 32px;
    font-size: clamp(90px, 12vw, 190px); font-weight:900; letter-spacing:-.08em;
    color: rgba(255,255,255,.92);
    background:
      radial-gradient(circle at 70% 25%, rgba(255,255,255,.32), transparent 28%),
      linear-gradient(145deg, #151515 0%, #343434 52%, #080808 100%);
    box-shadow: var(--v2-shadow);
    overflow:hidden;
}
.home-hero > div:first-child { position:relative; z-index:2; }
.home-hero h1 { font-size: clamp(58px, 7vw, 108px); line-height:.92; max-width:760px; letter-spacing:-.065em; margin:24px 0; }
.home-hero > div:first-child > p:not(.eyebrow) { max-width:590px; font-size:17px; line-height:1.7; color:var(--v2-muted); }
.home-products-button { display:inline-flex; margin-top:28px; padding:15px 22px; border-radius:999px; background:#111; color:#fff !important; font-size:13px; font-weight:750; }
.scroll-cue { position:absolute; right:var(--v2-pad); bottom:34px; }
.story-section { padding:110px var(--v2-pad); }
.story-grid { gap:16px; }
.story-card { border-radius:var(--v2-radius); padding:32px; transition:.25s ease; }
.story-card:hover { transform:translateY(-5px); box-shadow:var(--v2-shadow); }

.product-hero {
    max-width: var(--v2-max); margin:0 auto; padding:72px var(--v2-pad) 52px;
    display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:50px;
}
.product-hero .eyebrow { grid-column:1/-1; margin-bottom:-22px; }
.product-hero h1 { font-size:clamp(54px,7vw,96px); line-height:.9; letter-spacing:-.06em; margin:0; }
.product-hero > p:last-child { max-width:470px; margin:0 0 8px; line-height:1.7; color:var(--v2-muted); }
.product-categories {
    max-width:calc(var(--v2-max) - (var(--v2-pad) * 2)); margin:0 auto 20px; padding:10px;
    border:1px solid var(--v2-line); border-radius:999px; display:flex; justify-content:center; gap:5px;
    background:color-mix(in srgb, var(--bg, #fff) 86%, transparent); overflow:auto;
}
.product-categories a { white-space:nowrap; padding:11px 18px; border-radius:999px; font-size:13px; }
.product-categories a.active { background:#111; color:#fff; }
.popular-products { padding:70px var(--v2-pad) 120px; }
.popular-heading { text-align:left; margin-bottom:38px; }
.popular-heading h2 { font-size:clamp(36px,4vw,58px); letter-spacing:-.045em; margin:8px 0 0; }
.product-grid { gap:18px; }
.product-card { border:1px solid var(--v2-line); border-radius:var(--v2-radius); overflow:hidden; transition:.3s ease; background:color-mix(in srgb, var(--bg, #fff) 95%, #aaa 5%); }
.product-card:hover { transform:translateY(-7px); box-shadow:var(--v2-shadow); }
.product-image { min-height:350px; padding:26px; background:linear-gradient(145deg, rgba(127,127,127,.055), rgba(127,127,127,.015)); }
.product-image img { width:100%; height:310px; object-fit:contain; transition:transform .35s ease; }
.product-card:hover .product-image img { transform:scale(1.045); }
.wishlist-button { top:18px; right:18px; box-shadow:0 8px 25px rgba(0,0,0,.08); }
.product-info { padding:24px 24px 26px; }
.product-info h3 { font-size:20px; margin:8px 0 14px; }
.product-price { font-size:19px; }
.product-buy-row { margin-top:22px; }
.cart-button { border-radius:999px; min-height:46px; }
.quantity-control { border-radius:999px; }

.content-page { padding:78px var(--v2-pad) 110px; }
.contact-heading { max-width:700px; margin-bottom:52px; }
.contact-heading h1 { font-size:clamp(54px,7vw,94px); line-height:.95; letter-spacing:-.06em; margin:20px 0 24px; }
.contact-heading > p:last-child { color:var(--v2-muted); font-size:17px; }
.contact-grid { gap:16px; }
.contact-card { min-height:160px; border-radius:var(--v2-radius); padding:30px; border:1px solid var(--v2-line); transition:.25s ease; }
.contact-card:hover { transform:translateY(-5px); box-shadow:var(--v2-shadow); }
.contact-card strong { font-size:20px; }
.contact-arrow { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--v2-line); }

.commerce-page { padding:72px var(--v2-pad) 110px; }
.commerce-heading { margin-bottom:32px; }
.commerce-heading h1 { font-size:clamp(54px,7vw,92px); letter-spacing:-.06em; margin:14px 0 0; }
.shopping-tabs { gap:10px; margin-bottom:28px; }
.shopping-tabs a { min-height:64px; border-radius:var(--v2-radius-sm); }
.shopping-single-panel { border-radius:var(--v2-radius); overflow:hidden; }
.hub-empty-card { min-height:310px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border-radius:var(--v2-radius); }
.hub-empty-card::before { content:"＋"; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:#111; color:#fff; font-size:25px; margin-bottom:20px; }
.hub-empty-card h3 { font-size:25px; margin:0 0 12px; }
.hub-empty-card a { display:inline-flex; padding:12px 18px; border-radius:999px; border:1px solid var(--v2-line); }
.cart-item { border-radius:var(--v2-radius-sm); }
.cart-summary { border-radius:var(--v2-radius); }

.profile-page {
    max-width:var(--v2-max); margin:0 auto; padding:72px var(--v2-pad) 110px;
    display:grid; grid-template-columns:300px minmax(0,1fr); gap:28px; align-items:start;
}
.profile-sidebar { position:sticky; top:110px; width:auto; min-height:auto; border:1px solid var(--v2-line); border-radius:var(--v2-radius); padding:28px; background:color-mix(in srgb, var(--bg, #fff) 96%, #999 4%); }
.large-profile-avatar { width:76px; height:76px; border-radius:50%; background:#111; color:#fff; font-size:28px; box-shadow:none; }
.profile-sidebar h2 { font-size:23px; margin:18px 0 5px; }
.profile-sidebar > span { font-size:11px; color:var(--v2-muted); }
.profile-about { margin-top:26px; padding-top:22px; border-top:1px solid var(--v2-line); }
.profile-about h3 { font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.profile-about p { font-size:13px; color:var(--v2-muted); overflow-wrap:anywhere; }
.profile-content { padding:14px 0 0; }
.profile-section-heading h1 { font-size:clamp(48px,5vw,72px); letter-spacing:-.055em; margin:0 0 12px; }
.profile-page-subtitle { color:var(--v2-muted); }
.profile-stat-grid { gap:14px; margin-top:34px; }
.profile-stat-grid article { min-height:145px; border-radius:var(--v2-radius); padding:24px; }
.profile-stat-grid article span { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--v2-muted); }
.profile-stat-grid article strong { font-size:34px; }
.profile-action-grid { gap:14px; margin-top:14px; }
.profile-action-grid a { min-height:82px; border-radius:var(--v2-radius-sm); padding:0 24px; transition:.2s ease; }
.profile-action-grid a:hover { transform:translateY(-3px); box-shadow:var(--v2-shadow); }

.form-card { border-radius:var(--v2-radius); box-shadow:var(--v2-shadow); }
.form-card input { border-radius:12px; }
.submit-button, .small-register-button, .header-register-button { border-radius:999px; }
.toast { border-radius:16px; box-shadow:var(--v2-shadow); }

@media (max-width: 900px) {
    .site-header { padding:0 20px; }
    .main-nav { display:none; }
    .home-hero { grid-template-columns:1fr; padding-left:24px; padding-right:24px; }
    .home-hero::after { min-height:340px; }
    .product-hero { grid-template-columns:1fr; padding:52px 24px 36px; gap:20px; }
    .product-hero .eyebrow { margin-bottom:0; }
    .product-categories { margin-left:24px; margin-right:24px; justify-content:flex-start; }
    .popular-products, .content-page, .commerce-page { padding-left:24px; padding-right:24px; }
    .profile-page { grid-template-columns:1fr; padding:48px 24px 90px; }
    .profile-sidebar { position:static; }
    .profile-stat-grid { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
    .site-header { min-height:70px; }
    .porsche-wordmark { font-size:12px; letter-spacing:.3em; }
    .header-actions { gap:5px; }
    .language-toggle { display:none; }
    .round-header-icon, .theme-toggle { width:38px; height:38px; }
    .home-hero h1 { font-size:52px; }
    .home-hero::after { min-height:260px; font-size:88px; }
    .product-grid { grid-template-columns:1fr; }
    .contact-grid { grid-template-columns:1fr; }
    .profile-action-grid { grid-template-columns:1fr; }
    .shopping-tabs { overflow:auto; }
    .shopping-tabs a { min-width:180px; }
}
/* Phase 16.9 reliability */
.stock-status.out-of-stock{background:#fff3f3;border-color:#ffd0d0;color:#b42318}.product-purchase-panel button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.25)}
.enno-error-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:#f7faf9}.enno-error-card{width:min(520px,100%);padding:44px;border:1px solid #dfe9e5;border-radius:28px;background:#fff;text-align:center;box-shadow:0 24px 70px rgba(18,63,103,.08)}.enno-error-card img{width:150px}.enno-error-card>span{display:block;font-size:72px;font-weight:900;color:#0c8d73;margin-top:18px}.enno-error-card h1{font-size:30px}.enno-error-card p{color:#667085}.enno-error-card div{display:flex;gap:10px;justify-content:center;margin-top:24px}.enno-error-card a,.enno-error-card button{padding:12px 20px;border-radius:12px;border:1px solid #d8e4df;background:#fff;color:#123f67;font-weight:800;text-decoration:none}.enno-error-card a{background:#123f67;color:#fff}
@media(min-width:821px){.admin-sidebar-close,.admin-mobile-menu{display:none!important}}
\n\n/* Phase 16.12 - pending email verification reminder */\n.verification-reminder-card {\n  position: fixed;\n  top: 108px;\n  right: 28px;\n  z-index: 9999;\n  width: min(430px, calc(100vw - 32px));\n  display: grid;\n  grid-template-columns: 42px 1fr;\n  gap: 12px 14px;\n  padding: 16px;\n  border: 1px solid #f4c8c8;\n  border-left: 4px solid #dc5454;\n  border-radius: 18px;\n  background: rgba(255, 247, 247, .98);\n  box-shadow: 0 18px 48px rgba(25, 55, 75, .16);\n  color: #803535;\n  backdrop-filter: blur(12px);\n}\n.verification-reminder-icon {\n  width: 38px; height: 38px; border-radius: 50%;\n  display: grid; place-items: center;\n  border: 1px solid #e88989; font-weight: 900; color: #cf4545;\n}\n.verification-reminder-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }\n.verification-reminder-copy strong { font-size:15px; color:#7d2f2f; }\n.verification-reminder-copy span { font-size:13px; font-weight:700; color:#9a4a4a; overflow-wrap:anywhere; }\n.verification-reminder-copy small { margin-top:3px; line-height:1.45; color:#9b6a6a; }\n.verification-reminder-card form { grid-column: 2; margin: 0; }\n.verification-reminder-card button {\n  border:0; border-radius:11px; padding:10px 14px; cursor:pointer;\n  background:linear-gradient(90deg,#154f7e,#079b75); color:#fff;\n  font-weight:800; font-size:13px;\n}\n@media (max-width: 760px) {\n  .verification-reminder-card { top: 74px; right: 12px; left: 12px; width:auto; }\n}\n