/* Remove all focus/active/visited highlights from ZikFash brand link */
.zf-header__brand:focus,
.zf-header__brand:active,
.zf-header__brand:focus-visible,
.zf-header__brand:visited,
.zf-header__brand h1:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
}

/* ─── Offline Banner ───────────────────────────────────────── */
.offline-banner {
    background: #442c12;
    color: #f5e6c8;
    padding: 6px 12px;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
    animation: banner-slide-down 0.4s ease-out;
}

.offline-banner .material-symbols-rounded {
    font-size: 1rem;
    color: var(--gold);
}

@keyframes banner-slide-down {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   ZikFash — Design System
   Tokens: cream bg · dark espresso · gold accent · forest green
═══════════════════════════════════════════════════════════ */

:root {
    --cream: #faf6f0;
    --cream-2: #f5f0e8;
    --cream-3: #fffdf8;
    --border: #e8ddc8;
    --border-2: #d8c8a8;
    --espresso: #1a1208;
    --espresso-2: #2e2010;
    --espresso-3: #3a2810;
    --gold: #b8955a;
    --gold-2: #d4a84b;
    --text: #1a1208;
    --text-2: #7a6040;
    --text-3: #9a7a50;
    --green: #2d6a4f;
    --green-2: #245c43;
    --green-3: #52b788;
    --green-bg: #d1fae5;
    --red: #dc2626;
    --red-bg: #fee2e2;
    --amber: #d97706;
    --amber-bg: #fff3cd;
    --blue: #0369a1;
    --blue-bg: #e0f2fe;
    --wa: #25d366;
    --wa-2: #1ebe5b;
    --radius: 8px;
    --radius-lg: 14px;
    --shadow: 0 2px 12px rgba(26, 18, 8, 0.08);
    --shadow-lg: 0 12px 40px rgba(26, 18, 8, 0.18);
}

.material-symbols-rounded {
    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
    font-size: inherit;
    line-height: 1;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    user-select: none;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    width: 1em;
    height: 1em;
}

.icon-wa {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background-color: currentColor;
    -webkit-mask: url("../svg/ui/whatsapp.svg") no-repeat center;
    mask: url("../svg/ui/whatsapp.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
}

/* ─── Reset ───────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    font-size: 16px;
}

body {
    font-family: "Lato", sans-serif;
    background: var(--cream);
    color: var(--text);
    min-height: 100vh;
    touch-action: pan-x pan-y; /* Prevent pinch-to-zoom and display scaling breakage */
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
}

body.modal-open {
    overflow: hidden;
}

/* ─── Loading Splash (Scissors Animation) ─────────────────── */
.app-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    z-index: 9999;
    --anim-bg: var(--cream);
    --anim-scissors: var(--espresso);
    --anim-blade: #bdc3c7;
    --anim-screw: darkgray;
    --anim-paper: var(--espresso);
}

/* Container scaled for mobile/preloader */
.illustration-container-sm {
    position: relative;
    width: 400px;
    height: 400px;
    background: transparent;
    overflow: hidden;
    perspective: 1200px;
    transform-style: preserve-3d;
    transform: scale(0.65);

    /* Timing Controls - Expanded to 9s total */
    --start-delay: 1s;
    --anim-dur: 6s;
    --snip-dur: 1.1s;
    --paper-delay: 6.5s;
    --text-delay: 7.5s;
    --transform-dur: 1.2s;

    /* Deterministic Variables */
    --fab-w: 400px;
    --tip-o: 186px;
    --start: calc(50% - (var(--fab-w) / 2) - var(--tip-o));
    --end: calc(50% + (var(--fab-w) / 2) - var(--tip-o));
    --assemble-x: -150px;

    /* Cut Line */
    --cut-x: calc(50% - (var(--fab-w) / 2));
    --cut-y: calc(50% - 1px);
    --cut-thick: 2px;
}

@media (max-width: 480px) {
    .illustration-container-sm {
        transform: scale(0.5); /* smaller for narrow phones */
    }
}

#logo-rig {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    transform-origin: center center;
    transform: rotateX(55deg) rotateZ(-15deg);
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

#logo-rig.transformed {
    transform: rotateX(0deg) rotateZ(0deg);
}

#scissors {
    position: absolute;
    top: calc(50% - 44px);
    left: var(--start);
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    animation: move var(--anim-dur) linear forwards var(--start-delay);
    z-index: 25;
}

@keyframes move {
    0% {
        left: var(--start);
        top: calc(50% - 44px);
    }
    90% {
        left: var(--end);
        top: calc(50% - 44px);
        z-index: 25;
    }
    100% {
        left: calc(50% + var(--assemble-x));
        top: calc(50% - 44px);
        z-index: 25;
    }
}

.hole {
    position: absolute;
    background: var(--anim-scissors);
    width: 90px;
    height: 90px;
    border-radius: 100px;
    background: radial-gradient(
        circle at center,
        transparent 45%,
        var(--anim-scissors) 47%,
        var(--anim-scissors) 100%
    );
}

.blade {
    position: absolute;
    background: var(--anim-blade);
    width: 230px;
    height: 30px;
    left: 80px;
    top: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.blade.segment-1 {
    width: 115px;
    border-radius: 0 !important;
}
.blade.segment-2 {
    width: 115px;
    left: 195px;
}

#top-part,
#bottom-part {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 155px 44px;
    transform-style: preserve-3d;
    transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#top-part {
    transform: rotateZ(30deg);
    z-index: 2;
}
#bottom-part {
    transform: rotateZ(-30deg);
    z-index: 1;
}

#rotator-top,
#rotator-bottom {
    transform-origin: 155px 44px;
    transform-style: preserve-3d;
}

#rotator-top {
    animation: rotateTop var(--snip-dur) linear 6 forwards var(--start-delay);
}
#rotator-bottom {
    animation: rotateBottom var(--snip-dur) linear 6 forwards var(--start-delay);
}

@keyframes rotateTop {
    0% {
        transform: rotateZ(-10deg);
    }
    50% {
        transform: rotateZ(20deg);
    }
    100% {
        transform: rotateZ(-10deg);
    }
}
@keyframes rotateBottom {
    0% {
        transform: rotateZ(10deg);
    }
    50% {
        transform: rotateZ(-20deg);
    }
    100% {
        transform: rotateZ(10deg);
    }
}

.screw {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--anim-screw);
    border-radius: 50%;
    top: 37px;
    left: 148px;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.8),
        0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 5;
}
.screw:after {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 3px;
    background: #333;
    top: 6px;
    left: 2px;
    box-shadow: inset 0 1px 1px black;
}

/* Transformed State (Z Logo) */
#scissors.transformed {
    animation: none;
    left: calc(50% - 150px);
    top: calc(50% - 30px);
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-in-out;
}
#scissors.transformed #rotator-top,
#scissors.transformed #rotator-bottom {
    animation: none;
}
#scissors.transformed #bottom-part {
    transform: rotateZ(-60deg);
}
#scissors.transformed #top-part {
    transform: translate(-14px, 96px) rotateZ(540deg);
    transition: all var(--transform-dur) cubic-bezier(0.4, 0, 0.2, 1);
}
#scissors.transformed #top-part .blade.segment-2 {
    transform: translate(-132px, 229px) rotateZ(-360deg);
    transition: all var(--transform-dur) cubic-bezier(0.4, 0, 0.2, 1);
}
#scissors.transformed .hole {
    transform: none;
}
#scissors.transformed .screw {
    opacity: 0;
    transform: scale(0);
    transition: all 1s ease;
}

.half {
    position: absolute;
    left: 50%;
    top: 50%;
}

.half#top,
.half#bottom {
    width: 400px;
    height: 125px;
    background-color: var(--anim-paper);
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 10px,
            rgba(212, 175, 55, 0.2) 10px,
            rgba(212, 175, 55, 0.2) 12px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 40px,
            var(--gold) 40px,
            var(--gold) 42px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 20px,
            rgba(255, 255, 255, 0.05) 20px,
            rgba(255, 255, 255, 0.05) 21px
        );
    background-size: 100% 100%;
}

.half#top {
    animation: paper-top 2s ease-in var(--paper-delay) forwards;
    transform: translateX(-50%) translateY(-124px);
    transform-origin: bottom center;
    z-index: 5;
    transform-style: preserve-3d;
}

.half#bottom {
    z-index: 30;
    animation: paper-bottom 2s ease-in var(--paper-delay) forwards;
    transform: translateX(-50%) translateY(-1px);
    transform-origin: top center;
    transform-style: preserve-3d;
}

@keyframes paper-top {
    0% {
        transform: translateX(-50%) translateY(-124px) rotateX(0deg)
            rotateZ(0deg);
        opacity: 1;
        border-radius: 0;
    }
    20% {
        transform: translateX(-55%) translateY(-50px) rotateX(25deg)
            rotateZ(-10deg);
        border-radius: 10% 20% 5% 15%;
        opacity: 1;
    }
    40% {
        transform: translateX(-45%) translateY(150px) rotate(-20deg)
            rotateX(25deg);
        border-radius: 20% 5% 15% 10%;
        opacity: 0.9;
    }
    60% {
        transform: translateX(-60%) translateY(450px) rotate(-30deg)
            rotateX(75deg);
        border-radius: 5% 15% 20% 5%;
        opacity: 0.7;
    }
    80% {
        transform: translateX(-40%) translateY(850px) rotate(-15deg)
            rotateX(115deg);
        border-radius: 15% 5% 10% 20%;
        opacity: 0.4;
    }
    99% {
        opacity: 0.1;
    }
    100% {
        transform: translateX(-50%) translateY(1500px) rotate(0deg)
            rotateX(155deg);
        opacity: 0;
    }
}

@keyframes paper-bottom {
    0% {
        transform: translateX(-50%) translateY(-1px) rotateX(0deg) rotateZ(0deg);
        opacity: 1;
        border-radius: 0;
    }
    20% {
        transform: translateX(-45%) translateY(100px) rotateX(25deg)
            rotateZ(10deg);
        border-radius: 5% 15% 10% 20%;
        opacity: 1;
    }
    40% {
        transform: translateX(-55%) translateY(300px) rotate(20deg)
            rotateX(25deg);
        border-radius: 15% 5% 20% 10%;
        opacity: 0.9;
    }
    60% {
        transform: translateX(-40%) translateY(600px) rotate(30deg)
            rotateX(75deg);
        border-radius: 10% 20% 5% 15%;
        opacity: 0.7;
    }
    80% {
        transform: translateX(-60%) translateY(1000px) rotate(15deg)
            rotateX(115deg);
        border-radius: 20% 10% 15% 5%;
        opacity: 0.4;
    }
    99% {
        opacity: 0.1;
    }
    100% {
        transform: translateX(-50%) translateY(1500px) rotate(0deg)
            rotateX(155deg);
        opacity: 0;
    }
}

#cut {
    position: absolute;
    width: 0;
    height: var(--cut-thick);
    background: var(--anim-bg);
    box-shadow: none;
    top: var(--cut-y);
    left: var(--cut-x);
    transform: none;
    transform-origin: left center;
    z-index: 20;
    animation: cut var(--anim-dur) linear forwards var(--start-delay);
}

@keyframes cut {
    0% {
        width: 0;
    }
    90% {
        width: var(--fab-w);
    }
    90.1% {
        width: 0px;
    }
}

#firstline,
#secondline {
    position: absolute;
    left: calc(50% + 30px);
    transform: translateX(-50%) translateY(-50%);
    font-family: "Playfair Display", serif;
    color: var(--anim-scissors);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    animation: revealText 1.5s ease forwards var(--text-delay);
}
@keyframes revealText {
    to {
        opacity: 1;
    }
}

#firstline {
    font-size: 3.1em;
    top: calc(50% + 64px);
    z-index: 35;
}

#secondline {
    font-size: 1.75em;
    top: calc(50% + 148px);
    z-index: 10;
}

.app-logo-header {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

/* ─── App Shell ───────────────────────────────────────────── */
.zf-app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
}

/* ─── Header ──────────────────────────────────────────────── */
.zf-header {
    background: var(--espresso);
    color: #f5e6c8;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.zf-header__brand {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.zf-header__brand h1 {
    font-family: "Playfair Display", serif;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zf-header__brand span {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-top: 2px;
}

.zf-header nav {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    margin-left: 12px;
}

/* ─── Header nav links ────────────────────────────────────── */
.zf-nav-link {
    color: rgba(245, 230, 200, 0.65);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    transition: all 0.18s;
    border: 1px solid transparent;
}

.zf-nav-link:hover {
    color: #f5e6c8;
    border-color: rgba(245, 230, 200, 0.25);
}

.zf-nav-link.active {
    color: var(--espresso);
    background: var(--gold);
    border-color: transparent;
}

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

.btn {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    min-height: 36px;
    padding: 0 14px;
    gap: 5px;
    white-space: nowrap;
    background: var(--cream-2);
    color: var(--text);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-dark {
    background: var(--espresso);
    color: #f5e6c8;
    padding: 8px 18px;
    font-size: 0.875rem;
}

.btn-dark:active:not(:disabled) { background: var(--espresso-3); }

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border-2);
    padding: 6px 14px;
    font-size: 0.875rem;
}

.btn-outline:active:not(:disabled) { background: var(--espresso-2); color: #f5e6c8; border-color: var(--espresso-2); }

.btn-green {
    background: var(--green);
    color: #fff;
    padding: 9px 18px;
    font-size: 0.875rem;
}

.btn-green:active:not(:disabled) { background: var(--green-3); }

.btn-wa {
    background: var(--wa);
    color: #fff;
    padding: 9px 18px;
    font-size: 0.875rem;
}

.btn-wa:active:not(:disabled) { background: #189c4b; }

.btn-amber {
    background: var(--amber);
    color: #fff;
    padding: 7px 14px;
    font-size: 0.8rem;
}

.btn-amber:active:not(:disabled) { background: #92400e; }

.btn-ghost {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 0.82rem;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-height: 28px;
    gap: 5px;
    transition: color 0.15s;
}

.btn-ghost:active { color: var(--gold-2); }

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--text-2);
    transition: color 0.15s;
    font-size: 1rem;
    line-height: 1;
}

.btn-icon:active { color: var(--text-3); }

/* ─── Button Hover States (Desktop Only to prevent Mobile Sticky Hover) ─── */
@media (hover: hover) {
    .btn-dark:hover:not(:disabled) { background: var(--espresso-2); }
    .btn-outline:hover:not(:disabled) { background: var(--espresso); color: #f5e6c8; border-color: var(--espresso); }
    .btn-green:hover:not(:disabled) { background: var(--green-2); }
    .btn-wa:hover:not(:disabled) { background: var(--wa-2); }
    .btn-amber:hover:not(:disabled) { background: #b45309; }
    .btn-ghost:hover { color: #f5e6c8; }
    .btn-icon:hover { color: var(--text); }
}

.btn-sm {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 0.76rem !important;
}

.btn-xs {
    min-height: 24px !important;
    padding: 0 8px !important;
    font-size: 0.7rem !important;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* ─── Cards ───────────────────────────────────────────────── */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ─── Form Controls ───────────────────────────────────────── */
.field {
    margin-bottom: 10px;
}

.field:last-child {
    margin-bottom: 0;
}

.label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 3px;
    display: block;
}

.input,
.select,
.textarea {
    width: 100%;
    border: 1.5px solid var(--border-2);
    border-radius: 6px;
    padding: 7px 10px;
    font-family: "Lato", sans-serif;
    font-size: 0.9rem;
    background: var(--cream-3);
    outline: none;
    color: var(--text);
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
    appearance: none;
    -webkit-appearance: none;
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 149, 90, 0.12);
}

.input[type="date"] {
    cursor: pointer;
}

.naira-wrap {
    position: relative;
}

.naira-wrap::before {
    content: "₦";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-2);
    font-weight: 700;
    pointer-events: none;
    font-size: 0.9rem;
}

.naira-wrap .input {
    padding-left: 26px;
}

/* ─── Gender Toggle ───────────────────────────────────────── */
.gender-toggle {
    display: flex;
    border: 1.5px solid var(--border-2);
    border-radius: 6px;
    overflow: hidden;
}

.gender-btn {
    flex: 1;
    padding: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.15s;
    color: var(--text-2);
    font-family: "Lato", sans-serif;
}

.gender-btn.active {
    background: var(--espresso);
    color: #f5e6c8;
}

/* ─── Tags / Badges ───────────────────────────────────────── */
.tag {
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
    display: inline-block;
    letter-spacing: 0.02em;
}

.tag-pending {
    background: var(--amber-bg);
    color: #856404;
    border: 1px solid #ffd966;
}

.tag-done {
    background: var(--green-bg);
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.tag-overdue {
    background: var(--red-bg);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.tag-collected {
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid #7dd3fc;
}

/* ─── Customer List ───────────────────────────────────────── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 12px 16px 0;
}

.page-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1;
    min-width: 200px;
}

.page-title {
    font-family: "Playfair Display", serif;
    font-size: 1.1rem;
    font-weight: 700;
}

.page-subtitle {
    font-size: 0.72rem;
    color: var(--text-2);
    margin-top: 2px;
}

.customer-list {
    padding: 0 16px 16px;
}

.customer-list-scroll {
    max-height: 55dvh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-2) var(--cream-2);
}

/* Styled Scrollbar for ZikFash */
.customer-list-scroll::-webkit-scrollbar {
    width: 6px;
}

.customer-list-scroll::-webkit-scrollbar-track {
    background: var(--cream-2);
    border-radius: 0 8px 8px 0;
}

.customer-list-scroll::-webkit-scrollbar-thumb {
    background: var(--gold-2);
    border-radius: 10px;
}

.customer-list-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

.empty-state {
    padding: 28px 20px;
    text-align: center;
}

.empty-state__icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.empty-state__title {
    font-family: "Playfair Display", serif;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.empty-state__sub {
    font-size: 0.82rem;
    color: var(--text-2);
}

.customer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid #f0e8d4;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.customer-row:last-child {
    border-bottom: none;
}

.customer-row:hover {
    background: #f7f2ea;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e8d9bc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", serif;
    font-size: 1rem;
    color: #7a5c30;
    font-weight: 700;
    flex-shrink: 0;
}

.customer-row__info {
    flex: 1;
    min-width: 0;
    padding: 0 10px;
}

.customer-row__name {
    font-weight: 600;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.customer-row__meta {
    font-size: 0.7rem;
    color: var(--text-2);
    margin-top: 1px;
}

.progress-bar {
    height: 4px;
    background: var(--cream-2);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 5px;
    width: 80px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--green-3));
    border-radius: 99px;
    transition: width 0.4s;
}

.overdue-dot {
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    display: inline-block;
    animation: pulse-dot 1.5s infinite;
    flex-shrink: 0;
}

@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

.customer-row__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.owed-label {
    font-size: 0.68rem;
    color: var(--amber);
    font-weight: 700;
}

/* ─── Detail Page ─────────────────────────────────────────── */
.detail-section {
    padding: 12px 14px;
}

.customer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.customer-bar__avatar {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
}

.customer-bar__info {
    flex: 1;
}

.customer-bar__name {
    font-family: "Playfair Display", serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.customer-bar__meta {
    font-size: 0.73rem;
    color: var(--text-2);
    margin-top: 2px;
}

.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 6px 0;
}

/* ─── Measurements grid ───────────────────────────────────── */
.body-measure-layout {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 10px;
    margin-bottom: 10px;
}

.svg-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
}

.svg-card__hint {
    font-size: 0.65rem;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    text-align: center;
}

.svg-card__count {
    font-size: 0.65rem;
    color: var(--text-3);
    margin-top: 5px;
}

.measure-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.measure-chip {
    background: var(--cream-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 9px;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}

.measure-chip:hover {
    border-color: var(--gold);
}

.measure-chip.filled {
    background: #e8f5ee;
    border-color: #a7d9bc;
}

.measure-chip__label {
    font-size: 0.6rem;
    color: var(--text-2);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.measure-chip__val {
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 2px;
}

.measure-chip__val.has-val {
    color: var(--green);
}

.measure-chip__val.no-val {
    color: #c0a878;
}

/* ─── Order Card ──────────────────────────────────────────── */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 4px 0 0;
}

.section-title {
    font-family: "Playfair Display", serif;
    font-size: 1rem;
    font-weight: 700;
}

.order-card {
    padding: 10px 12px;
    margin-bottom: 8px;
}

.order-card__top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.order-card__thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.order-card__thumb:hover {
    transform: scale(1.04);
}

.order-card__body {
    flex: 1;
    min-width: 0;
}

.order-card__desc {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.order-card__note {
    font-size: 0.72rem;
    color: var(--text-2);
    margin-bottom: 4px;
}

.order-card__due {
    font-size: 0.7rem;
}

.order-card__due.overdue {
    color: #991b1b;
    font-weight: 700;
}

.order-card__due.normal {
    color: var(--text-3);
}

.order-card__tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Payment bar */
.pay-section {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--cream);
    border-radius: 6px;
    border: 1px solid #f0e8d4;
}

.pay-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    margin-bottom: 4px;
}

.pay-row__left {
    color: var(--text-2);
}

.pay-row__right {
    font-weight: 700;
}

.pay-row__right.owed {
    color: var(--amber);
}

.pay-row__right.paid {
    color: var(--green);
}

.pay-pill {
    height: 5px;
    background: var(--cream-2);
    border-radius: 99px;
    overflow: hidden;
}

.pay-pill__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--green-3));
    border-radius: 99px;
    transition: width 0.4s;
}

/* Order actions */
.order-card__actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.order-card__actions .btn-xs {
    padding: 0 7px !important;
}


.orders-list-scroll {
    max-height: 590px;
    overflow-y: auto;
    padding-right: 4px;
}

.orders-list-scroll::-webkit-scrollbar {
    width: 4px;
}

.orders-list-scroll::-webkit-scrollbar-track {
    background: var(--cream-2);
    border-radius: 10px;
}

.orders-list-scroll::-webkit-scrollbar-thumb {
    background: var(--gold-2);
    border-radius: 10px;
}

/* ─── Modals ──────────────────────────────────────────────── */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 18, 8, 0.6);
    display: flex;
    align-items: center;
    padding: 16px;
    justify-content: center;
    z-index: 200;
    animation: fade-overlay 0.2s;
}

@keyframes fade-overlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal {
    background: var(--cream-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 14px;
    width: 100%;
    max-width: 390px;
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    animation: modal-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal > * {
    opacity: 0;
    animation: fade-up-stagger 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal > *:nth-child(1) { animation-delay: 0.05s; }
.modal > *:nth-child(2) { animation-delay: 0.1s; }
.modal > *:nth-child(3) { animation-delay: 0.15s; }
.modal > *:nth-child(4) { animation-delay: 0.2s; }
.modal > *:nth-child(5) { animation-delay: 0.25s; }
.modal > *:nth-child(6) { animation-delay: 0.3s; }
.modal > *:nth-child(7) { animation-delay: 0.35s; }

@keyframes fade-up-stagger {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal__title {
    font-family: "Playfair Display", serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.modal__sub {
    font-size: 0.71rem;
    color: var(--text-2);
    margin-bottom: 12px;
}

/* Photo upload */
.photo-upload-area {
    border: 2px dashed var(--border-2);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition:
        border-color 0.2s,
        background 0.2s;
}

.photo-upload-area:hover {
    border-color: var(--gold);
    background: #fffdf4;
}

.photo-upload-area__icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.photo-upload-area__text {
    font-size: 0.76rem;
    color: var(--text-2);
}

.photo-preview {
    position: relative;
    display: inline-block;
    width: 100%;
}

.photo-preview img {
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    border-radius: 8px;
    border: 1.5px solid var(--border);
}

.photo-preview__remove {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 0.76rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Receipt preview */
.receipt-box {
    background: var(--cream-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.73rem;
    white-space: pre-wrap;
    line-height: 1.65;
    color: var(--espresso-3);
    font-family: "Courier New", monospace;
    max-height: 260px;
    overflow-y: auto;
}

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 250;
    cursor: zoom-out;
    padding: 20px;
    animation: fade-overlay 0.15s;
}

.lightbox-overlay img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.lightbox-close {
    position: fixed;
    top: 18px;
    right: 18px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        transform 0.15s;
    z-index: 251;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
}

/* ─── Toast ───────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: #f5e6c8;
    padding: 10px 24px;
    border-radius: 99px;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    z-index: 300;
    white-space: nowrap;
    pointer-events: none;
    animation: toast-in 0.2s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ─── Form row ────────────────────────────────────────────── */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ─── Blazor error UI ─────────────────────────────────────── */
#blazor-error-ui {
    background: #ff7043;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: white;
    font-size: 0.85rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════
   Hijabify Studio — Page Styles
   Ported design from hijabify/src/App.tsx, adapted to
   ZikFash design tokens (cream, espresso, gold, green)
═══════════════════════════════════════════════════════════ */

.hijabify-page {
    padding: 14px 14px 40px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Header ────────────────────────────────────────────────── */
.hijabify-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.hijabify-header-icon {
    width: 38px;
    height: 38px;
    background: var(--espresso);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(26, 18, 8, 0.25);
}

.hijabify-title {
    font-family: "Playfair Display", serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--espresso);
    line-height: 1.1;
}

.hijabify-subtitle {
    font-size: 0.73rem;
    color: var(--text-2);
    letter-spacing: 0.06em;
    margin-top: 3px;
}

/* ── Two-column grid ───────────────────────────────────────── */
.hijabify-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}

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

/* ── Control cards ─────────────────────────────────────────── */
.hijabify-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hijabify-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hijabify-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-2);
}

.hijabify-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-3);
}

/* ── API key input ─────────────────────────────────────────── */
.hijabify-input {
    width: 100%;
    border: 1.5px solid var(--border-2);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: "Lato", sans-serif;
    font-size: 0.88rem;
    background: var(--cream-3);
    outline: none;
    color: var(--text);
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}

.hijabify-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 149, 90, 0.14);
}

.hijabify-hint {
    font-size: 0.68rem;
    color: var(--text-3);
}

.hijabify-hint a {
    color: var(--gold);
    text-decoration: none;
}

.hijabify-hint a:hover {
    text-decoration: underline;
}

/* ── Upload zones ──────────────────────────────────────────── */
.hijabify-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-2);
    border-radius: 10px;
    padding: 12px 10px;
    cursor: pointer;
    transition:
        border-color 0.18s,
        background 0.18s;
    background: var(--cream-3);
    min-height: 70px;
    text-align: center;
    position: relative;
    overflow: hidden;
    gap: 4px;
}

.hijabify-upload-zone:hover {
    border-color: var(--gold);
    background: #fdf8f0;
}

.hijabify-upload-zone.has-image {
    border-color: var(--green);
    background: #f0faf5;
    padding: 6px;
}

.hijabify-preview-thumb {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.hijabify-upload-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    background: var(--green);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.06em;
}

.hijabify-upload-icon {
    font-size: 1.4rem;
}

.hijabify-upload-text {
    font-size: 0.72rem;
    color: var(--text-2);
    font-weight: 600;
}

.hijabify-file-input {
    display: none;
}

/* ── Style grid ────────────────────────────────────────────── */
.hijabify-style-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.hijabify-style-btn {
    padding: 9px 8px;
    border-radius: 10px;
    border: 1.5px solid var(--border-2);
    background: var(--cream-3);
    font-family: "Lato", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.hijabify-style-btn:hover {
    border-color: var(--gold);
    color: var(--text);
}

.hijabify-style-btn.active {
    background: var(--espresso);
    border-color: var(--espresso);
    color: #f5e6c8;
    box-shadow: 0 3px 10px rgba(26, 18, 8, 0.2);
}

/* ── Generate button ───────────────────────────────────────── */
.hijabify-generate-btn {
    width: 100%;
    padding: 11px;
    background: var(--gold);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition:
        background 0.18s,
        transform 0.1s,
        box-shadow 0.18s;
    box-shadow: 0 4px 16px rgba(184, 149, 90, 0.35);
}

.hijabify-generate-btn:hover:not(:disabled) {
    background: #a07038;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(184, 149, 90, 0.4);
}

.hijabify-generate-btn:active:not(:disabled) {
    transform: translateY(0);
}

.hijabify-generate-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.hijabify-reset-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1.5px solid var(--border-2);
    border-radius: 10px;
    font-family: "Lato", sans-serif;
    font-size: 0.82rem;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
}

.hijabify-reset-btn:hover {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-bg);
}

/* ── Canvas (right panel) ──────────────────────────────────── */
.hijabify-canvas-wrap {
    position: relative;
}

.hijabify-canvas {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Loading overlay */
.hijabify-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 253, 248, 0.85);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

.hijabify-loading-text {
    font-family: "Playfair Display", serif;
    font-size: 1.05rem;
    color: var(--espresso);
    font-style: italic;
}

.hijabify-loading-sub {
    font-size: 0.72rem;
    color: var(--text-2);
    letter-spacing: 0.05em;
}

/* Spinners */
.hijabify-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

.hijabify-spinner-lg {
    width: 52px;
    height: 52px;
    border: 4px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Empty state */
.hijabify-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px;
    gap: 8px;
}

.hijabify-empty-icon {
    font-size: 3rem;
    opacity: 0.4;
}

.hijabify-empty-title {
    font-family: "Playfair Display", serif;
    font-size: 1.15rem;
    color: var(--espresso);
}

.hijabify-empty-text {
    font-size: 0.8rem;
    color: var(--text-2);
    line-height: 1.6;
}

/* Result image */
.hijabify-result-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}

/* Result action buttons */
.hijabify-result-actions {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}

.hijabify-action-btn {
    padding: 11px 20px;
    border-radius: 50px;
    font-family: "Lato", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hijabify-action-btn.primary {
    background: var(--espresso);
    color: #f5e6c8;
}

.hijabify-action-btn.primary:hover {
    background: var(--espresso-2);
    transform: translateY(-1px);
}

.hijabify-action-btn.secondary {
    background: #fff;
    color: var(--espresso);
}

.hijabify-action-btn.secondary:hover {
    background: var(--cream-2);
    transform: translateY(-1px);
}

.hijabify-result-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(26, 18, 8, 0.65);
    color: #f5e6c8;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

/* Error */
.hijabify-error {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--red-bg);
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--red);
    line-height: 1.5;
}

/* Toast */
.hijabify-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--espresso);
    color: #f5e6c8;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 50px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    z-index: 200;
    animation: toast-in 0.25s ease;
    white-space: nowrap;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ── Provider Row (multi-key panel) ──────────────────────────────── */
.hijabify-provider-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.hijabify-provider-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 2px;
    letter-spacing: 0;
}

.hijabify-provider-badge.p1 {
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: var(--espresso);
}

.hijabify-provider-badge.p2 {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
}

.hijabify-provider-badge.p3 {
    background: linear-gradient(135deg, var(--green), var(--green-3));
    color: #fff;
}

.hijabify-provider-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hijabify-provider-free {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(184, 149, 90, 0.12);
    color: var(--gold);
    padding: 2px 7px;
    border-radius: 20px;
}

/* ── #1 Dashboard Stats Row ──────────────────────────────────────────── */
.zf-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 8px 12px;
}
.zf-stats-row::-webkit-scrollbar {
    display: none;
}

.zf-stat {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 2px 5px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.15s;
}

.zf-stat:hover {
    transform: translateY(-1px);
}

.zf-stat__val {
    font-family: "Playfair Display", serif;
    font-size: clamp(0.7rem, 2.5vw, 0.95rem);
    font-weight: 700;
    color: var(--espresso);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zf-stat__label {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: 3px;
}

.scroll-hint {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to right, transparent, #fdfcf9 40%);
    padding-left: 20px;
    padding-right: 8px;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--gold);
    opacity: 0.8;
}

.zf-stat--warn {
    border-color: #ffd966;
    background: var(--amber-bg);
}

.zf-stat--warn .zf-stat__val {
    color: var(--amber);
}

.zf-stat--danger {
    border-color: #fca5a5;
    background: var(--red-bg);
}

.zf-stat--danger .zf-stat__val {
    color: var(--red);
}

.zf-stat--success {
    border-color: #6ee7b7;
    background: var(--green-bg);
}

.zf-stat--success .zf-stat__val {
    color: var(--green);
}

/* ── #2 Search Bar ───────────────────────────────────────────────────── */
.zf-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.zf-search-icon {
    position: absolute;
    left: 10px;
    font-size: 0.85rem;
    pointer-events: none;
    line-height: 1;
}

.zf-search-input {
    width: 100%;
    border: 1.5px solid var(--border-2);
    border-radius: 8px;
    padding: 8px 36px 8px 34px;
    font-family: "Lato", sans-serif;
    font-size: 0.875rem;
    background: var(--cream-3);
    outline: none;
    color: var(--text);
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}

.zf-search-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 149, 90, 0.12);
}

.zf-search-input::-webkit-search-cancel-button {
    display: none;
}

.zf-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s;
}

.zf-search-clear:hover {
    color: var(--text);
}

/* --- Wheel Picker (2.5D Hierarchical Drum Style) ----------- */

.wheel-container {
    display: flex;
    justify-content: center;
    gap: 0;
    height: 180px;
    position: relative;
    background: #fdfcf9;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin: 8px 0;
    z-index: 0;

    /* Perspective Camera */
    perspective: 900px;
    perspective-origin: center center;

    /* Enhanced 3D Vignette */
    box-shadow:
        inset 0 16px 28px -12px rgba(0, 0, 0, 0.2),
        inset 0 -16px 28px -12px rgba(0, 0, 0, 0.2),
        inset 0 0 6px rgba(0, 0, 0, 0.04);
    /* Old flat shadow:
    box-shadow:
        inset 0 12px 18px -10px rgba(0, 0, 0, 0.15),
        inset 0 -12px 18px -10px rgba(0, 0, 0, 0.15),
        inset 0 0 4px rgba(0,0,0,0.02);
    */

    /* Cascading Mask */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.15) 10%,
        black 25%,
        black 75%,
        rgba(0, 0, 0, 0.15) 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.15) 10%,
        black 25%,
        black 75%,
        rgba(0, 0, 0, 0.15) 90%,
        transparent 100%
    );
    /* Old flat mask:
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    */
}

.wheel-column {
    flex: 1;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 68px 0;
}

.wheel-column::-webkit-scrollbar {
    display: none;
}

.wheel-item {
    height: 38px;
    line-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--text-2);
    scroll-snap-align: center;
    user-select: none;
    position: relative;
    margin: -7px 4px;
    border-radius: calc(6px + (var(--focus, 0) * 2px));
    border: 1px solid rgba(139, 108, 66, 0.12);
    overflow: hidden;
    width: 80%;
    margin-left: auto;
    margin-right: auto;

    /* outline: 1px solid rgba(139, 108, 66, var(--is-center, 0)); */
    /* outline-offset: -1px; */

    background: #fdfcf9;

    box-shadow:
        inset 0 0 0 1px rgba(139, 108, 66, var(--border-alpha, 0)),
        inset 8px 0 12px -5px rgba(0, 0, 0, var(--vignette-alpha, 0)),
        inset -8px 0 12px -5px rgba(0, 0, 0, var(--vignette-alpha, 0)),
        inset 0 0 10px rgba(139, 108, 66, var(--glow-alpha, 0));

    /* GPU Transforms - Driven by JS */
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;

    /* Static properties replaced by dynamic engine:
    transition: all 0.2s ease;
    opacity: 0.25;
    filter: blur(0.5px);
    */
}

/* Moving Hierarchical Lens Markers */
.wheel-item::before,
.wheel-item::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 1.5px;
    background: var(--lens-color, rgba(139, 108, 66, 0.4));
    width: var(--lens-width, 0%);
    opacity: calc(var(--is-center, 0));
    transition:
        width 0.05s ease-out,
        opacity 0.05s ease-out;
}

.wheel-item::before {
    top: 0;
}
.wheel-item::after {
    bottom: 0;
}

/* .wheel-item.selected {
    color: #1a1208;
    font-size: 1.2rem;
    font-weight: 600;
} */

/* Reduced size static "window" slot */
.wheel-lens {
    position: absolute;
    top: 50%;
    height: 44px;
    box-sizing: content-box;
    transform: translateY(-50%);
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    z-index: 10;
    border-radius: 8px;

    /* Recessed glow */
    /* box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.04),
        inset 0 -2px 6px rgba(0,0,0,0.04); */

    /* Old solid borders replaced by dynamic markers:
    border-top: 2px solid #8b6c42;
    border-bottom: 2px solid #8b6c42;
    */
}

.wheel-lens--left {
    left: 10px;
    right: calc(50% + 10px);
}

.wheel-lens--right {
    left: calc(50% + 10px);
    right: 10px;
}

.wheel-units-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9999; /* above everything */
}
.wheel-unit {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: #8b6c42;
    font-weight: 800;
    letter-spacing: 0.1em;
    opacity: 0.85;
}

.wheel-unit--left {
    left: 48%;
    transform: translate(calc(-100% - 26px), -50%);
}

.wheel-unit--right {
    right: 28px;
    transform: translateY(-50%);
}

.wheel-separator {
    width: 15px;
    background: #fdfcf9;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    justify-content: center;
}

.wheel-separator::after {
    content: "";
    width: 1px;
    height: 100%;
    background: rgba(139, 108, 66, 0.15);
}

.wheel-separator::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.015);
    pointer-events: none;
    z-index: 1;
}

/* Style Studio Refactored CSS Styling */
.studio-header {
    margin-bottom: 12px;
}
.studio-header .section-subtitle {
    font-size: 0.75rem;
    color: var(--text-3);
}
.studio-header .action-buttons {
    display: flex;
    gap: 8px;
}

.style-studio-layout {
    position: relative;
    min-height: 400px;
}

.studio-preview-canvas-wrap {
    width: 100%;
    max-width: 270px;
    margin: 10px auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
    transition: all 0.25s ease;
}

.ledger-title {
    font-size: 0.7rem;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.ledger-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ledger-item-title {
    font-size: 0.65rem;
    color: var(--text-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ledger-item-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--espresso);
}

.ledger-item-chevron {
    color: var(--border-2);
    font-size: 1.1rem;
}

.studio-notes-wrap {
    margin-top: 12px;
}
.studio-notes-wrap label {
    font-size: 0.7rem;
}
.studio-notes-textarea {
    font-size: 0.8rem;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border-light);
    resize: none;
    width: 100%;
}

/* Palette Modal Styling */
.palette-modal {
    max-width: 800px;
    width: 95%;
    height: auto;
    max-height: 90vh;
    padding: 24px 20px;
}

.palette-modal-body {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.palette-modal-body .selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 8px;
    width: 100%;
}

.style-option-card {
    position: relative;
    background-color: var(--cream-2);
    border: 1px solid var(--border-light, #e8ddc8);
    border-radius: 12px;
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.style-option-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: var(--gold);
}

.style-option-card.active {
    border: 2px solid var(--espresso);
    background-color: var(--cream-3, #fffdf8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.style-option-card__preview {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.style-option-card__preview img,
.style-option-card__preview svg {
    height: 100%;
    width: 100%;
    object-fit: contain;
    transform: scale(1.3);
    transition: transform 0.2s ease;
}

.style-option-card.active .style-option-card__preview img,
.style-option-card.active .style-option-card__preview svg {
    transform: scale(1.05);
}

.style-option-card__info {
    text-align: center;
    width: 100%;
}

.style-option-card__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-2, #4a4a4a);
    line-height: 1.1;
    transition: color 0.2s ease;
}

.style-option-card.active .style-option-card__label {
    color: var(--espresso);
}

.fabric-swatch-preview {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.palette-adjustment-card {
    padding: 10px 12px;
    background: var(--cream-2);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.palette-adjustment-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.color-swatch-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.color-swatch-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.2s;
}

.selected-fabric-label {
    text-align: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--espresso);
    margin-top: 8px;
}

.adjustment-buttons {
    display: flex;
    gap: 10px;
}
.adjustment-buttons .btn {
    flex: 1;
    font-size: 0.75rem;
    height: 40px;
    border-radius: 10px;
}

.palette-modal-footer {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.palette-modal-footer .btn {
    height: 48px;
    border-radius: 12px;
}
.palette-modal-footer .btn-dark {
    flex: 1;
}
.palette-modal-footer .btn-outline {
    padding: 0 24px;
}

/* ─── Mobile-First Style Studio Compact Customizations ─── */
@media (max-width: 600px) {
    .body-measure-layout,
    .style-studio-layout {
        grid-template-columns: 1fr 1.15fr !important;
        gap: 10px !important;
        min-height: auto !important;
    }

    .svg-card {
        padding: 6px 8px !important;
    }

    .svg-card__hint {
        margin-bottom: 2px !important;
        font-size: 0.58rem !important;
        letter-spacing: 0.05em !important;
    }

    .studio-preview-canvas-wrap {
        max-width: 175px !important;
        margin: 4px auto !important;
    }

    .ledger-title {
        margin-bottom: 6px !important;
        font-size: 0.65rem !important;
    }

    .ledger-list {
        gap: 6px !important;
    }

    .studio-ledger-item {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .ledger-icon-small {
        width: 26px !important;
        height: 26px !important;
        border-radius: 6px !important;
    }

    .ledger-icon-small span {
        font-size: 1.1rem !important;
    }

    .ledger-item-title {
        font-size: 0.58rem !important;
    }

    .ledger-item-value {
        font-size: 0.78rem !important;
    }

    .ledger-item-chevron {
        font-size: 0.95rem !important;
    }

    .studio-notes-wrap {
        margin-top: 6px !important;
    }

    .studio-notes-textarea {
        font-size: 0.75rem !important;
        padding: 6px 8px !important;
        border-radius: 6px !important;
    }

    /* Compact Palette Modal for Mobile */
    .palette-modal {
        padding: 12px 10px !important;
        max-height: 80vh !important;
        border-radius: 12px !important;
    }

    .palette-modal .modal__title {
        font-size: 0.85rem !important;
        margin-bottom: 2px !important;
    }

    .palette-modal .modal__sub {
        font-size: 0.6rem !important;
        margin-bottom: 6px !important;
    }

    .palette-modal-body {
        margin-top: 8px !important;
        gap: 8px !important;
    }

    .palette-modal-body .selection-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 2px !important;
        max-height: 35vh !important;
    }

    .style-option-card {
        border-radius: 8px !important;
        border-width: 1px !important;
        height: 76px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 4px !important;
    }

    .style-option-card__preview {
        height: 38px !important;
        width: 100% !important;
        background: transparent !important;
        border-bottom: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .style-option-card__preview img,
    .style-option-card__preview svg {
        height: 100% !important;
        width: 100% !important;
        object-fit: contain !important;
        transform: scale(1.4) !important;
    }

    .fabric-swatch-preview {
        width: 30px !important;
        height: 30px !important;
    }

    .style-option-card__info {
        padding: 2px 0 0 0 !important;
        margin: 0 !important;
    }

    .style-option-card__label {
        font-size: 0.58rem !important;
        line-height: 1 !important;
    }

    .palette-adjustment-card {
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }

    .palette-adjustment-label {
        font-size: 0.58rem !important;
        margin-bottom: 6px !important;
    }

    .adjustment-buttons {
        gap: 8px !important;
    }
    .adjustment-buttons .btn {
        height: 30px !important;
        font-size: 0.65rem !important;
        border-radius: 6px !important;
    }

    .color-swatch-list {
        gap: 6px !important;
    }

    .color-swatch-btn {
        width: 24px !important;
        height: 24px !important;
    }

    .selected-fabric-label {
        font-size: 0.65rem !important;
        margin-top: 4px !important;
    }

    .palette-modal-footer {
        margin-top: 10px !important;
        gap: 0 !important;
    }

    .palette-modal-footer .btn {
        height: 34px !important;
        font-size: 0.75rem !important;
        border-radius: 6px !important;
    }
}

.input-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.validation-error {
    font-size: 0.65rem !important;
    color: #dc2626 !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.zf-stat--active { transform: scale(0.98); border-color: var(--gold); background-color: var(--cream-3); }
.zf-stat--success.zf-stat--active { border-color: var(--green); background-color: #d1fae5; }
.zf-stat--warn.zf-stat--active { border-color: var(--amber); background-color: #fef08a; }
.zf-stat--danger.zf-stat--active { border-color: var(--red); background-color: #fee2e2; }

@media print { body * { visibility: hidden; } .receipt-box, .receipt-box * { visibility: visible; } .receipt-box { position: absolute; left: 0; top: 0; width: 100%; border: none; box-shadow: none; font-size: 14pt; white-space: pre-wrap; font-family: monospace; color: black; background: white; } }

/* -- Tutorial Hotspots -- */
/* Hide tutorials when any modal is open to prevent bleed-through */
body.modal-open .tutorial-hotspot,
body.modal-open .tutorial-popover {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Re-show tutorials if they are INSIDE a modal */
body.modal-open .modal .tutorial-hotspot,
body.modal-open .modal-content .tutorial-hotspot {
    display: inline-block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
body.modal-open .modal .tutorial-popover,
body.modal-open .modal-content .tutorial-popover {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.tutorial-hotspot {
    position: absolute;
    display: inline-block;
    width: 14px;
    height: 14px;
    cursor: pointer;
    z-index: 90;
}

.pulse-dot-icon {
    position: absolute;
    width: 14px;
    height: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bounce-gentle 2s infinite ease-in-out;
}

@keyframes bounce-gentle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(10deg); }
}

.pulse-ring {
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: var(--gold);
    border-radius: 50%;
    z-index: 1;
    animation: pulse-ring-anim 2s infinite ease-out;
}

@keyframes pulse-ring-anim {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3.5); opacity: 0; }
}

.tutorial-popover {
    position: absolute;
    background: var(--cream-3);
    border: 1px solid var(--gold);
    border-radius: var(--radius-md);
    padding: 10px 12px 10px 10px;
    width: max-content;
    max-width: 200px;
    box-shadow: var(--shadow-lg);
    z-index: 150;
    animation: popover-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popover-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.tutorial-popover::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--cream-3);
    border-right: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
}

/* Directions */
.popover-bottom { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; }
.popover-bottom::after { top: -5px; left: 50%; transform: translateX(-50%) rotate(225deg); }

.popover-bottom-right { top: 100%; right: 0; margin-top: 10px; }
.popover-bottom-right::after { top: -5px; right: 15px; transform: rotate(225deg); }

.popover-bottom-left { top: 100%; left: 0; margin-top: 10px; }
.popover-bottom-left::after { top: -5px; left: 15px; transform: rotate(225deg); }

.popover-top { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; }
.popover-top::after { bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); }

.popover-right { top: 50%; left: 100%; transform: translateY(-50%); margin-left: 10px; }
.popover-right::after { top: 50%; left: -5px; transform: translateY(-50%) rotate(135deg); }

.popover-left { top: 50%; right: 100%; transform: translateY(-50%); margin-right: 10px; }
.popover-left::after { top: 50%; right: -5px; transform: translateY(-50%) rotate(-45deg); }

.tutorial-popover__close {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.tutorial-popover__close:hover {
    color: var(--text-2);
}

.tutorial-popover__content {
    font-size: 0.75rem;
    color: var(--text-2);
    line-height: 1.4;
    padding-right: 10px;
}
.tutorial-popover__content strong { color: var(--gold); }

@keyframes slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* --- Lightbox Overlay --------------------------------------- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    animation: fade-in 0.2s ease-out;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: block;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 2rem;
    padding: 8px;
    display: flex;
}

.lightbox-close:hover {
    color: var(--gold);
}


/* --- Camera Shutter Illusion --- */
.camera-shutter-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: white;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    animation: shutter-flash 0.5s ease-out forwards;
}

@keyframes shutter-flash {
    0% { opacity: 1; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

/* Responsive hiding for very small screens */
@media (max-width: 360px) {
    .hide-on-tiny { display: none !important; }
}