/* MyStudio — shared client-page sidebar.
   Full-height nav attached to inline-start edge (right in RTL), collapsible. */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&family=Archivo:wght@300;400;500;600;700;800&display=swap');

:root {
    --fp-accent-deep: #5F8AA9;
    --fp-accent-soft: #D8E5EE;
    --fp-ink: #0A0A0A;
    --fp-ink-soft: #2A2A2A;
    --fp-line: #ECECEC;
    --fp-line-soft: #F5F5F5;
    --fp-cream: #F5F3EE;
    --fp-muted: #6B6B6B;
    --fp-sidebar-w: 248px;
    --fp-sidebar-w-collapsed: 76px;
}

/* Body padding mirrors the sidebar width */
html[dir="rtl"] body, html:not([dir]) body {
    padding-inline-start: var(--fp-sidebar-w);
    transition: padding-inline-start .4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* When collapsed: sidebar slides off-screen, body padding goes to 0 → page content
   spreads back to full width with no dead gap on the side. */
body.fp-collapsed {
    padding-inline-start: 0;
}

/* Full-height sidebar attached to the viewport's inline-start (visual right in RTL) */
.fp-sidebar {
    position: fixed;
    top: 0; bottom: 0; inset-inline-start: 0;
    width: var(--fp-sidebar-w); z-index: 80;
    background: #FFFFFF;
    border-inline-end: 1px solid var(--fp-line);
    box-shadow: 0 0 24px rgba(10,10,10,0.03);
    padding: 28px 0 16px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'Assistant', sans-serif;
    display: flex; flex-direction: column;
    transform: translateX(0);
    transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Slide off the visual right edge in RTL (sidebar lives on the right). */
.fp-sidebar.collapsed { transform: translateX(100%); }
html:not([dir="rtl"]) .fp-sidebar.collapsed { transform: translateX(-100%); }

/* Visual order */
.fp-sidebar .brand-mini { order: 1; }
.fp-sidebar a { order: 2; }
.fp-sidebar .sidebar-foot { order: 3; margin-top: auto; }
.fp-sidebar .credits-widget { order: 4; }
.fp-sidebar .lab-sub-nav { order: 2; }

/* Brand */
.fp-sidebar .brand-mini {
    font-family: 'Archivo', 'Assistant', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 9px;
    color: var(--fp-ink); text-transform: uppercase;
    padding: 4px 22px 22px;
    border-bottom: 1px solid var(--fp-line);
    margin-bottom: 14px; text-align: center;
    white-space: nowrap; overflow: hidden;
    transition: opacity .25s ease;
}
.fp-sidebar.collapsed .brand-mini {
    font-size: 0; padding: 4px 0 22px;
    /* keep the divider visible — show a tiny dot instead of letters */
}
.fp-sidebar.collapsed .brand-mini::after {
    content: '';
    display: block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--fp-accent-deep);
    margin: 8px auto 0;
}

/* Nav links — flat, edge-attached, accent on active.
   Per-link accent color via --acc / --acc-soft (set below). The active bar,
   hover bg, and icon color all pull from --acc so each tool has its own
   visual identity. Falls back to the original muted-blue if no override
   matches. Tasteful palette — no neon, no gradients. */
.fp-sidebar a {
    --acc: #5F8AA9;
    --acc-soft: rgba(95,138,169,0.08);
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 22px; margin: 0;
    font-family: 'Assistant', sans-serif;
    font-size: 14.5px; font-weight: 500;
    letter-spacing: 0.1px;
    color: var(--fp-muted); text-decoration: none;
    transition:
        color .2s ease,
        background .25s ease,
        padding-inline-start .3s cubic-bezier(0.16, 1, 0.3, 1);
    /* First-paint stagger reveal — translates into place from below. The
       :nth-of-type delays below sequence each link. */
    opacity: 0;
    transform: translateY(8px);
    animation: sb-link-in .55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.fp-sidebar a::before {
    content: '';
    position: absolute; inset-block: 8px; inset-inline-end: 0;
    width: 3px; border-radius: 4px 0 0 4px;
    background: var(--acc);
    transform: scaleY(0); transform-origin: center;
    /* Bouncy easing — the bar settles with a tiny overshoot when the active
       state changes or on hover. Subtle 'alive' cue without being playful. */
    transition: transform .38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fp-sidebar a:hover {
    background: var(--acc-soft);
    color: var(--fp-ink);
}
/* Active state always nudged in. Hover-only effects gated to fine pointers
   so touch devices don't get stuck in the hovered position after a tap. */
.fp-sidebar:not(.collapsed) a.active { padding-inline-start: 28px; }
.fp-sidebar a.active::before { transform: scaleY(1); }
@media (hover: hover) {
    .fp-sidebar:not(.collapsed) a:hover { padding-inline-start: 28px; }
    .fp-sidebar a:hover::before { transform: scaleY(1); }
    .fp-sidebar a:hover .icon { color: var(--acc); transform: scale(1.08); }
}
.fp-sidebar a.active {
    background: var(--acc-soft);
    color: var(--fp-ink); font-weight: 700;
}
.fp-sidebar a.active .icon { color: var(--acc); transform: scale(1.08); }
.fp-sidebar a.active::before { transform: scaleY(1); }

/* Stagger the fade-in by DOM order (skips at most ~10 links). */
@keyframes sb-link-in {
    to { opacity: 1; transform: translateY(0); }
}
.fp-sidebar a:nth-of-type(1)  { animation-delay:  60ms; }
.fp-sidebar a:nth-of-type(2)  { animation-delay: 110ms; }
.fp-sidebar a:nth-of-type(3)  { animation-delay: 160ms; }
.fp-sidebar a:nth-of-type(4)  { animation-delay: 210ms; }
.fp-sidebar a:nth-of-type(5)  { animation-delay: 260ms; }
.fp-sidebar a:nth-of-type(6)  { animation-delay: 310ms; }
.fp-sidebar a:nth-of-type(7)  { animation-delay: 360ms; }
.fp-sidebar a:nth-of-type(8)  { animation-delay: 410ms; }
.fp-sidebar a:nth-of-type(9)  { animation-delay: 460ms; }
.fp-sidebar a:nth-of-type(10) { animation-delay: 510ms; }

@media (prefers-reduced-motion: reduce) {
    .fp-sidebar a { animation: none; opacity: 1; transform: none; }
    .fp-sidebar a::before { transition: transform .15s ease; }
    .fp-sidebar a:hover .icon, .fp-sidebar a.active .icon { transform: none; }
}

/* Per-link accent palette. Each tool gets a distinct, tasteful tone — pulls
   from a warm earthy + cool muted palette (no neon). Anchored on `href*=`
   so it works for both relative and absolute paths in any client page. */
.fp-sidebar a[href*="dashboard"]  { --acc: #C56A4F; --acc-soft: rgba(197,106,79,0.08); }   /* warm coral */
.fp-sidebar a[href*="model"]      { --acc: #6B9C7E; --acc-soft: rgba(107,156,126,0.08); }  /* sage green */
.fp-sidebar a[href*="lookbook"]   { --acc: #A47551; --acc-soft: rgba(164,117,81,0.08); }   /* warm tan */
.fp-sidebar a[href*="adshot"]     { --acc: #D17A4F; --acc-soft: rgba(209,122,79,0.08); }   /* terracotta */
.fp-sidebar a[href*="fauxshot"]   { --acc: #C9893E; --acc-soft: rgba(201,137,62,0.08); }   /* amber */
.fp-sidebar a[href*="lingerie"]   { --acc: #B86E7E; --acc-soft: rgba(184,110,126,0.08); }  /* dusty rose */
.fp-sidebar a[href*="favorites"]  { --acc: #B43E4F; --acc-soft: rgba(180,62,79,0.08); }    /* berry red */
.fp-sidebar a[href*="logo"]       { --acc: #7B6BC4; --acc-soft: rgba(123,107,196,0.08); }  /* lavender */
.fp-sidebar a[href*="lab"]        { --acc: #3F8C8E; --acc-soft: rgba(63,140,142,0.08); }   /* teal */
.fp-sidebar a[href*="admin"]      { --acc: #5C6B7A; --acc-soft: rgba(92,107,122,0.08); }   /* slate */

.fp-sidebar a .icon {
    flex-shrink: 0;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    color: currentColor;
    font-size: 0; /* hide any text fallback (emoji etc.) until JS injects SVG */
    transition:
        color .22s ease,
        transform .28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fp-sidebar a .icon svg {
    width: 18px; height: 18px; display: block;
    stroke: currentColor; stroke-width: 1.5; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
.fp-sidebar a .label {
    white-space: nowrap; overflow: hidden;
    transition: opacity .2s ease;
}

/* Collapsed: icons only, label becomes a tooltip on hover */
.fp-sidebar.collapsed a {
    padding: 12px 0; justify-content: center;
}
.fp-sidebar.collapsed a .label {
    position: absolute;
    inset-inline-end: calc(100% + 14px); top: 50%; transform: translateY(-50%);
    background: var(--fp-ink); color: #FFFFFF;
    padding: 6px 12px; border-radius: 8px;
    font-family: 'Assistant', sans-serif;
    font-size: 12px; font-weight: 500; letter-spacing: 0.1px;
    pointer-events: none;
    opacity: 0; visibility: hidden;
    box-shadow: 0 6px 16px rgba(10,10,10,0.18);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 90;
}
.fp-sidebar.collapsed a:hover .label {
    opacity: 1; visibility: visible;
    transform: translateY(-50%) translateX(-4px);
}

/* Credits widget — small, sits at the very bottom under logout */
.fp-sidebar .credits-widget {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; margin: 4px 16px 8px;
    background: var(--fp-cream);
    border-radius: 14px;
    transition: padding .25s ease, margin .25s ease;
}
.fp-sidebar .cw-info {
    display: flex; flex-direction: column; gap: 1px;
    flex: 1; min-width: 0;
}
.fp-sidebar .cw-num {
    font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px;
    color: var(--fp-ink); line-height: 1;
}
.fp-sidebar .cw-label {
    font-size: 9px; color: var(--fp-accent-deep);
    letter-spacing: 1.4px; text-transform: uppercase;
    font-family: 'Archivo', sans-serif; font-weight: 600;
    margin-top: 3px;
    white-space: nowrap;
}
.fp-sidebar .cw-buy {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--fp-accent-deep); color: #fff;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1;
    transition: transform .25s ease, background .25s ease;
    flex-shrink: 0;
}
.fp-sidebar .cw-buy:hover { transform: scale(1.1); background: var(--fp-ink); }

.fp-sidebar.collapsed .credits-widget {
    margin: 4px 10px 8px; padding: 10px 6px;
    flex-direction: column; gap: 6px;
}
.fp-sidebar.collapsed .cw-info { align-items: center; }
.fp-sidebar.collapsed .cw-label { display: none; }
.fp-sidebar.collapsed .cw-num { font-size: 12px; }
.fp-sidebar.collapsed .cw-buy { width: 22px; height: 22px; font-size: 12px; }

/* Foot — logout */
.fp-sidebar .sidebar-foot {
    padding: 12px 16px 4px;
    border-top: 1px solid var(--fp-line);
    transition: padding .25s ease;
}
.fp-sidebar .sidebar-foot button {
    width: 100%; padding: 10px 14px;
    font-family: 'Assistant', sans-serif;
    font-size: 13px; font-weight: 500;
    background: transparent; color: var(--fp-muted);
    border: 1px solid var(--fp-line); border-radius: 12px;
    cursor: pointer; transition: all .25s;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.fp-sidebar .sidebar-foot button:hover {
    color: var(--fp-ink); border-color: var(--fp-ink);
    background: rgba(10,10,10,0.04);
}
.fp-sidebar.collapsed .sidebar-foot { padding: 12px 10px 4px; }
.fp-sidebar.collapsed .sidebar-foot button {
    padding: 10px 0; font-size: 0;
    /* show a stroke power icon instead of text */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236B6B6B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>');
    background-repeat: no-repeat; background-position: center;
}
.fp-sidebar.collapsed .sidebar-foot button:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%230A0A0A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>');
}

/* Toggle button — sits at vertical center, slides with the sidebar's edge.
   Always visible (sibling of sidebar so overflow can't clip it). */
.fp-toggle {
    position: fixed;
    top: 50%;
    inset-inline-start: var(--fp-sidebar-w);
    transform: translateX(50%) translateY(-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--fp-line);
    box-shadow: 0 8px 22px rgba(10,10,10,0.10);
    cursor: pointer; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease, border-color .2s ease,
                inset-inline-start .4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow .2s ease, transform .2s ease;
    padding: 0;
}
html[dir="rtl"] .fp-toggle { transform: translateX(-50%) translateY(-50%); }
/* When sidebar is collapsed (off-screen), the toggle anchors at the viewport's
   inline-start edge so the user can pull the sidebar back. */
body.fp-collapsed .fp-toggle { inset-inline-start: 0; }

.fp-toggle svg {
    width: 13px; height: 13px;
    stroke: var(--fp-ink); stroke-width: 2.2;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.fp-toggle:hover {
    background: var(--fp-ink);
    border-color: var(--fp-ink);
    box-shadow: 0 10px 28px rgba(10,10,10,0.20);
}
html[dir="rtl"] .fp-toggle:hover { transform: translateX(-50%) translateY(-50%) scale(1.06); }
.fp-toggle:hover { transform: translateX(50%) translateY(-50%) scale(1.06); }
.fp-toggle:hover svg { stroke: #FFFFFF; }
body.fp-collapsed .fp-toggle svg { transform: scaleX(-1); }

/* Mobile: collapse to a sticky horizontal bar at top of page */
@media (max-width: 900px) {
    html[dir="rtl"] body, html:not([dir]) body { padding-inline-start: 0; }
    body.fp-collapsed { padding-inline-start: 0; }
    .fp-sidebar, .fp-sidebar.collapsed {
        position: sticky; top: 0; bottom: auto; inset-inline-start: auto;
        width: 100%; height: auto;
        flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding: 10px 14px; gap: 4px; align-items: center;
        border-inline-end: none;
        border-bottom: 1px solid var(--fp-line);
        box-shadow: 0 2px 10px rgba(10,10,10,0.04);
    }
    .fp-sidebar .brand-mini, .fp-sidebar.collapsed .brand-mini { display: none; }
    /* On mobile, the credits widget jumps to the very start of the bar
       (visual right in RTL) so the user sees their balance without scrolling. */
    .fp-sidebar .credits-widget, .fp-sidebar.collapsed .credits-widget {
        order: 0;
        flex: 0 0 auto; margin: 0;
        padding: 5px 10px 5px 6px; gap: 6px;
        background: transparent;
        flex-direction: row;
    }
    .fp-sidebar .cw-info { align-items: flex-start; }
    .fp-sidebar .credits-widget .cw-label { display: none; }
    .fp-sidebar .credits-widget .cw-num { font-size: 13px; }
    .fp-sidebar .credits-widget .cw-buy { width: 22px; height: 22px; font-size: 12px; }
    .fp-sidebar a, .fp-sidebar.collapsed a {
        flex: 0 0 auto; padding: 8px 14px; margin: 0;
        white-space: nowrap; font-size: 13px; border-radius: 999px;
    }
    .fp-sidebar a::before { display: none; }
    .fp-sidebar a.active { background: var(--acc); color: #fff; }
    .fp-sidebar a.active .icon, .fp-sidebar a.active:hover .icon { color: #fff; }
    .fp-sidebar a .label { display: inline; position: static; opacity: 1; visibility: visible; transform: none; background: transparent; color: inherit; padding: 0; box-shadow: none; }
    .fp-sidebar.collapsed a .label { display: inline; position: static; opacity: 1; visibility: visible; transform: none; background: transparent; color: inherit; padding: 0; box-shadow: none; }
    .fp-sidebar .sidebar-foot, .fp-sidebar.collapsed .sidebar-foot {
        margin: 0; padding: 0; border: none;
        flex: 0 0 auto; margin-inline-start: auto;
    }
    .fp-sidebar .sidebar-foot button, .fp-sidebar.collapsed .sidebar-foot button {
        padding: 7px 14px; font-size: 12px; white-space: nowrap;
        border-radius: 999px;
        background-image: none;
    }
    .fp-toggle { display: none; }
}

/* --- icon SVG sizing (added 2026-05-19) --- */
.fp-sidebar .icon svg {
    width: 18px; height: 18px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: stroke-width .2s ease, transform .2s ease;
}
.fp-sidebar a:hover .icon svg,
.fp-sidebar a.active .icon svg {
    stroke-width: 2;
    transform: scale(1.08);
}
/* Templates nav icon — slow, muted colour cycle to gently draw the eye.
   Refined palette (soft gold → mauve → dusty teal), 7s, never garish. */
@keyframes navTplHue {
    0%   { stroke: #C2A24E; }
    33%  { stroke: #A98BB0; }
    66%  { stroke: #6FA39E; }
    100% { stroke: #C2A24E; }
}
#navTemplates .icon svg { animation: navTplHue 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    #navTemplates .icon svg { animation: none; stroke: #C2A24E; }
}
.fp-sidebar .icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
}

/* --- lab sub-nav (centralized 2026-05-19, was inline in each lab page) --- */
.fp-sidebar .lab-sub-nav {
    display: flex; flex-direction: column;
    gap: 2px; padding: 4px 0 10px 0;
    margin-inline-start: 22px; margin-bottom: 4px;
}
.fp-sidebar .lab-sub-nav a {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; font-size: 12.5px;
    color: var(--fp-muted); border-radius: 8px;
    animation: none; opacity: 1; transform: none;
    position: relative; font-weight: 400;
    text-decoration: none;
}
.fp-sidebar .lab-sub-nav a::before {
    content: ''; position: absolute;
    inset-inline-start: 0; top: 4px; bottom: 4px; width: 2px;
    background: var(--fp-accent-deep);
    transform: scaleY(0); transform-origin: center;
    transition: transform .25s ease;
}
.fp-sidebar .lab-sub-nav a:hover {
    background: var(--fp-cream); color: var(--fp-ink);
    padding-inline-start: 12px;
}
.fp-sidebar .lab-sub-nav a:hover::before { transform: scaleY(1); }
.fp-sidebar .lab-sub-nav a.active {
    background: transparent; color: var(--fp-ink); font-weight: 700;
}
.fp-sidebar .lab-sub-nav a.active::before { transform: scaleY(1); }
.fp-sidebar .lab-sub-nav .lsn-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: 0.5;
    flex-shrink: 0;
}
.fp-sidebar .lab-sub-nav a.active .lsn-dot,
.fp-sidebar .lab-sub-nav a:hover .lsn-dot {
    opacity: 1; background: var(--fp-accent-deep);
}
.fp-sidebar.collapsed .lab-sub-nav { display: none; }
@media (max-width: 900px) {
    .fp-sidebar .lab-sub-nav {
        flex-direction: row; flex-wrap: nowrap;
        margin: 0; padding: 0; gap: 4px;
    }
    .fp-sidebar .lab-sub-nav a {
        padding: 8px 12px; font-size: 12px;
        border-radius: 999px; white-space: nowrap;
    }
    .fp-sidebar .lab-sub-nav a::before { display: none; }
    .fp-sidebar .lab-sub-nav .lsn-dot { display: none; }
}