*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Geist", sans-serif;
}

html {
    scroll-behavior: smooth;
    color: var(--bg-accent-color);
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    
}

@media (max-width: 1024px) {
    html, body {
        height: auto;
        overflow: visible;
    }
}

/* 1. Make main a flex column so section can fill remaining space */

main{
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background-color: var(--bg-primary-color);
    overflow: hidden;
    display: flex;           
    flex-direction: column;  

}

/* 2. Section fills all remaining height */

main section{
    width: 100%;
    flex: 1;                 /* — fills main */
    min-height: 0;           /* critical, lets flex children shrink */
    padding: var(--padding-md);
    display: flex;
    gap: var(--gutter-lg);
    overflow: hidden;        
}



.btn{
    background:        linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    color:             var(--text-primary-color);
    border:            1px solid var(--border-primary-color);
    border-radius:     var(--border-radius-2xl);
    padding:           var(--padding-sm) var(--padding-md);
    display:           flex;
    align-items:       center;
    gap:               var(--gutter-md);
    font-size:         var(--font-size-sm);
    font-weight:       var(--font-weight-sm);
    letter-spacing:    -0.01em;
    cursor:            pointer;
    backdrop-filter:   blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 4px 24px var(--shadow-drop);
    transition:        all var( --transition-md);
}

.btn:hover {
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color:      var(--border-secondary-color);
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 6px 32px var(--shadow-drop-hover);
  }

.btn i{
    font-size: var(--font-size-xl);
}


.btn-primary{
    background:        linear-gradient(180deg, var(--thickglass-bg-from)  0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);


    border:            1px solid var(--border-primary-color);
    border-radius:     var(--border-radius-2xl);
    padding:           var(--padding-sm) var(--padding-md);
    display:           flex;
    align-items:       center;
    gap:               var(--gutter-md);
    font-size:         var(--font-size-sm);
    font-weight:       var(--font-weight-sm);
    cursor:            pointer;
    backdrop-filter:   blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);
      /* keep your existing background, border, etc */
      transition: filter var(--transition-sm),
              box-shadow var(--transition-sm),
              transform var(--transition-sm),
              border-color var(--transition-sm);
         will-change: transform;
    
}

.btn-primary:hover{

    filter: brightness(1.2);
    box-shadow:
    inset 0 1px 0 var(--shadow-inset-top),
    inset 0 -1px 0 var(--shadow-inset-bottom),
    0 6px 32px var(--shadow-drop-hover);

}

.btn-sec{

    background:       var(--bg-primary-color);
    color:             var(--text-accent-color);
    border:            1px solid var(--bg-primary-color);
    border-radius:     var(--border-radius-2xl);
    padding:           var(--padding-sm) var(--padding-md);
    display:           flex;
    align-items:       center;
    gap:               var(--gutter-sm);
    font-size:         var(--font-size-sm);
    font-weight:       var(--font-weight-sm);
    letter-spacing:    -0.01em;
    cursor:            pointer;
    height: 30px;
    transition:        all var( --transition-sm);

}

.btn-sec:hover {
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border:            1px solid var(--border-secondary-color);
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);
  }



/* 3. Left column fills height and clips */

main section .left{
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
    flex: 1;
    min-width: 0;
    min-height: 0;           
    overflow: hidden;  
}
/* 5. Right panel scrolls internally if filters overflow */
main section .right{
    width: 280px;
    /* background-color: var(--bg-tertiary-color); */
    /* padding: var(--padding-lg); */
    border-radius: var(--border-radius-xl);
    /* border:            1px solid var(--border-primary-color); */
    /* background:        linear-gradient(0deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%); */
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    min-height: 0;           
    overflow: hidden; /* important */
    flex-shrink: 0;
    }


/* scroll container */
.right {
    overflow-y: auto;
    scrollbar-color: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 100%);

}

/* width */
.right::-webkit-scrollbar {
    width: 2px;
}

/* track */
.right::-webkit-scrollbar-track {
    background: transparent;
    margin: 40px 0;
}

/* thumb */
.right::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 100%);
    border-radius: 999px;
    
}


main section .top{
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
}

/* 4. Bottom fills remaining left height — remove aspect-ratio */
main section .bottom{
    background-color: var(--bg-tertiary-color);
    width: 100%;
    padding: var(--padding-md);
    flex: 1;                 /* REPLACE aspect-ratio: 5/3 with this */
    min-height: 0;  
    border-radius: var(--border-radius-xl);
    /* border:            1px solid var(--border-primary-color); */
    display: flex;
    align-items: center;
    justify-content: center;
    /* background:        linear-gradient(0deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%); */
    overflow: hidden;        /* ADD — clips canvas if needed */
    transition: background var(--transition-sm),
              border-color var(--transition-sm),
              box-shadow var(--transition-sm),
              outline var(--transition-sm);

    position: relative;  /* add this to existing rule */
}


/* ── Filters panel (left column) ─────────────────────────── */

/* replace with: */
.filters-panel {
    width: 280px;
    background-color: var(--bg-tertiary-color);
    padding: var(--padding-lg) var(--padding-lg) 0 var(--padding-lg);
    border-radius: var(--border-radius-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    min-height: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.filters-panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    padding: 0 4px;
    margin: 0 -4px;
}

.filters-panel-scroll::-webkit-scrollbar { display: none; }

.filters-panel h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-sm);
    color: var(--text-primary-color);
}

/* ── Sidebar backgrounds (filters panel) ─────────────────── */

/* style.css — replace .sidebar-bg-section border to match right-panel divider style exactly */
.sidebar-bg-section {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    flex-shrink: 0;
    
}

/* style.css — fix the typo (seperator -> separator) and align naming, also fix --bg-sexondary-color typo */
.separator {
    display: flex;
    width: 100%;
    height: 1px;
    background: var(--border-primary-color);
    flex-shrink: 0;
    margin: var(--gutter-md) 0;
}

.sidebar-bg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.sidebar-bg-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-primary-color);
    transition: transform var(--transition-sm), box-shadow var(--transition-sm);
}

.sidebar-bg-thumb:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

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

.sidebar-bg-viewall img {
    filter: brightness(0.4) saturate(0.5);
    transition: filter var(--transition-md);
}

.sidebar-bg-viewall:hover img {
    filter: brightness(0.55) saturate(0.7);
}

.sidebar-bg-viewall-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(160deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
    color: var(--text-primary-color);
    pointer-events: none;
}

.sidebar-bg-viewall-overlay i {
    font-size: var(--font-size-xsm);
}

.sidebar-bg-viewall-overlay span {
    font-size: var(--font-size-xxsm);
    font-weight: var(--font-weight-sm);
    letter-spacing: -0.01em;
    white-space: nowrap;
}



/* ── Right panel cards ───────────────────────────────────── */

.right-card {
    background-color: var(--bg-tertiary-color);
    border-radius: var(--border-radius-xl);
    padding-right: var(--padding-lg);
    padding-left: var(--padding-lg);
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    flex-shrink: 0;
}

.right-panel-unified {
    flex: 1;
    flex-shrink: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* padding-bottom: 32px; */
}

.right-panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    padding: 0 6px;
    margin: 0 -6px;
    box-sizing: border-box;
}

.right-panel-scroll::-webkit-scrollbar {
    display: none;
}

.right-section {
    display: flex;
    flex-direction: column;
    /* gap: var(--gutter-md); */

}

.right-section:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.effect-sliders-group {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    margin-top: 8px;
}



/* ── Animation card ──────────────────────────────────────── */

.animation-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Toggle switch */
.anim-toggle-wrap {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.anim-toggle-input {
    display: none;
}

.anim-toggle-track {
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    border: 1px solid var(--border-primary-color);
    backdrop-filter: blur(var(--glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
    display: flex;
    align-items: center;
    padding: 2px;
    position: relative;
    box-shadow: inset 0 1px 0 var(--shadow-inset-top),
                inset 0 -1px 0 var(--shadow-inset-bottom);
    transition: box-shadow var(--transition-md),
                transform var(--transition-sm);
}

.anim-toggle-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-secondary-color);
    position: absolute;
    left: 2px;
    box-shadow: 0 1px 3px var(--shadow-drop-sm),
                inset 0 1px 0 var(--shadow-inset-top);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                background var(--transition-md),
                box-shadow var(--transition-md);
}

.anim-toggle-wrap:hover .anim-toggle-track {
    box-shadow: inset 0 1px 0 var(--shadow-inset-top),
                inset 0 -1px 0 var(--shadow-inset-bottom),
                0 2px 10px var(--shadow-drop-sm);
}

.anim-toggle-wrap:active .anim-toggle-thumb {
    transform: scale(0.85);
}

.anim-toggle-input:checked + .anim-toggle-track .anim-toggle-thumb {
    transform: translateX(16px);
    background: var(--text-primary-color);
    box-shadow: 0 1px 4px var(--shadow-drop-sm),
                inset 0 1px 0 var(--shadow-inset-top),
                0 0 0 4px var(--bg-hover-color);
}

.anim-toggle-input:checked + .anim-toggle-track .anim-toggle-wrap:active .anim-toggle-thumb {
    transform: translateX(16px) scale(0.85);
}

/* Controls — collapse when animation is off */
.anim-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    overflow: visible;
    transition: max-height var(--transition-md),
                opacity var(--transition-md);
    margin-bottom: 40px;
}

.anim-controls.visible {
    opacity: 1;
    pointer-events: all;
}


/* ── Animation style dropdown — opens downward ── */
#anim-style-dropdown .custom-dropdown-menu {
    top: calc(100% + 6px);
    bottom: auto;
    transform-origin: top center;
    transform: translateY(-4px) scale(0.98);
}

#anim-style-dropdown.open .custom-dropdown-menu {
    transform: translateY(0) scale(1);
}


/* ── Animation style pills — own class to avoid cross-firing ── */
.anim-style-pill {
    background: var(--border-tertiary-color);
    border: 1px solid var(--bg-tertiary-color);
    color: var(--text-secondary-color);
    border-radius: var(--border-radius-lg);
    padding: var(--padding-xsm) var(--padding-sm);
    font-size: var(--font-size-xsm);
    line-height: 100%;
    cursor: pointer;
    transition: all var(--transition-md);
}

.anim-style-pill:hover {
    background: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color: var(--border-secondary-color);
    color: var(--text-primary-color);
}

.anim-style-pill.active {
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border-color: var(--text-primary-color);
}

.anim-pill-pro i {
    font-size: 11px;
    color: var(--text-pro-color);
    opacity: 0.8;
    flex-shrink: 0;
}

.anim-pill-pro:hover i,
.anim-pill-pro.active i {
    opacity: 1;
}


/* Pro tag inside FPS pill */
.anim-style-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pill-pro-tag {
    height: 10px;
    width: auto;
    pointer-events: none;
    opacity: 0.9;
}

/* Pro gated resolution items — dim slightly */
.custom-dropdown-item .pro-tag {
    height: 12px;
    width: auto;
    margin-left: auto;
    opacity: 0.9;
    pointer-events: none;
}

/* Duration pro cap indicator */
.duration-pro-hint {
    font-size: 10px;
    color: var(--text-tertiary-color);
    text-align: right;
    margin-top: 2px;
    display: none;
}
.duration-pro-hint.visible {
    display: block;
}

/* ── Saved Presets pills ──────────────────────────────────── */

.saved-presets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: var(--padding-lg);
    padding-bottom: var(--padding-xsm);
}

.saved-presets-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}

.saved-preset-pill {
    background: var(--border-tertiary-color);
    border:  1px solid var(--bg-tertiary-color);
    color: var(--text-secondary-color);
    border-radius: var(--border-radius-lg);
    padding: var(--padding-xsm) var(--padding-sm);

    font-size: var(--font-size-xsm);
    line-height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-md);
}

.saved-preset-pill:hover {
    background: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color: var(--border-secondary-color);
    color: var(--text-primary-color);
}

.save-preset-inline {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 0;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color var(--transition-md);
}

.save-preset-inline:hover {
    color: var(--text-primary-color);
    background: none;
    border: none;
}

.save-preset-inline i {
    color: var(--text-secondary-color) !important;
    font-size: 11px;
}

.save-preset-inline i {
    color: var(--text-secondary-color) !important;
    font-size: 11px;
}

.save-preset-inline:hover {
    color: var(--text-primary-color);
    border-color: var(--text-secondary-color);
    transition: all var(--transition-md);
}

.save-preset-inline i {
    color: var(--text-secondary-color) !important;
    transition: color var(--transition-md);
    transition: all var(--transition-md);
}

.save-preset-inline:hover i {
    color: var(--text-primary-color) !important;
    transition: all var(--transition-md);
}


.saved-preset-pill i {
    color: var(--text-secondary-color);
}

/* Pro/user saved presets get golden diamond */
.user-preset-pill i {
    color: #c9a84c;
}

/* Built-in presets stay brand green */
.saved-preset-pill:not(.user-preset-pill) i {
    color: var(--text-pro-color);
}

/* free built-in — grey icon */
.saved-preset-pill:not(.user-preset-pill):not(.built-in-pro-pill) i {
    color: var(--text-secondary-color);
}

/* pro built-in — brand cyan */
.built-in-pro-pill i {
    color: var(--text-pro-color);
}

/* user saved — golden */
.user-preset-pill i {
    color: #deae29;
}


.saved-presets-pills {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.saved-presets-pills.expanded {
    max-height: 500px;
}

.presets-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 0;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    /* remove position: sticky and bottom: 0 */
}

.presets-toggle-btn:hover {
    color: var(--text-primary-color);
}


/* ── Looks view toggle ───────────────────────────────────── */

.looks-view-controls {
    display: flex;
    align-items: center;

}


/* ADD after .looks-view-controls block: */
.looks-label-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.looks-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--text-tertiary-color);
    cursor: pointer;
    transition: color var(--transition-sm), background var(--transition-sm);
}

.looks-view-btn:hover {
    color: var(--text-secondary-color);
    background: var(--bg-tertiary-color);
}

.looks-view-btn.active {
    color: var(--text-primary-color);
    background: var(--bg-tertiary-color);
}

.looks-view-btn i {
    font-size: 14px;
}


/* ── Looks thumbnail grid ─────────────────────────────────── */

.looks-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
    margin-top: 8px;

    /* reserve space for 3 rows */
    /* min-height: 186px;   adjust to your card height */
}



.look-card {
    position: relative;
    aspect-ratio: 80 / 54;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-primary-color);
    transition: transform var(--transition-sm), box-shadow var(--transition-sm);
}

.look-card:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
    z-index: 2;
}

.look-card.placeholder {
    pointer-events: none;
    background: #1f1f22;
    overflow: hidden;
}

.look-card.placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.05) 50%,
            rgba(255,255,255,0) 100%
        );
    transform: translateX(-100%);
    animation: lookSkeleton 1.3s infinite;
}

@keyframes lookSkeleton {
    to {
        transform: translateX(100%);
    }
}

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

.look-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 6px 6px;
    font-size: 10px;
    line-height: 1;
    color: var(--text-primary-color);
    background: linear-gradient(to top, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0.05) 100%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 4;
}


.look-card-pro-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 7px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 3px;
    background: var(--text-pro-color);
    color: #0d0d0f;
    letter-spacing: 0.02em;
}

.look-card-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(1px);
}

.look-card-lock i {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

.look-card-user {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        inset 1px 0 0 rgba(255,255,255,0.08),
        inset -1px 0 0 rgba(255,255,255,0.08),
        0 8px 24px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.look-card-user:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        inset 1px 0 0 rgba(255,255,255,0.12),
        inset -1px 0 0 rgba(255,255,255,0.12),
        0 16px 40px rgba(0,0,0,0.2);
}

.look-card-user-swatch {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.12);
    background: var(--bg-tertiary-color);
}



.looks-drawer-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--text-secondary-color);
    font-size: 13px;
    text-align: center;
    opacity: 0.6;
}

.looks-drawer-empty i {
    font-size: 32px;
    opacity: 0.5;
}


/* Delete button */
.look-card-user .card-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    z-index: 5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.look-card-user:hover .card-delete-btn {
    opacity: 1;
}

.card-delete-btn:hover {
    background: rgba(220,50,50,0.65);
    border-color: rgba(255,100,100,0.4);
    color: #fff;
}


/* User card label — more breathing room than built-in cards */
.look-card-user .look-card-label {
    padding: 32px 16px 12px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}



/* Looks drawer — slides in from the right */
#looks-drawer {
    bottom: var(--padding-md);
    top: var(--padding-md);
    left: auto;
    right: var(--padding-md);
    width: 500px;
    height: auto;
    min-height: calc(100vh - (var(--padding-md) * 2));
    transform: translateX(calc(100% + var(--padding-md) + 16px));
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.4);
}

#looks-drawer.open {
    transform: translateX(0);
}

/* Remove bottom-sheet drag handle — not needed for side drawer */
#looks-drawer::before {
    display: none;
}

/* Tighter grid for narrower side panel — 3 columns instead of 7 */
#looks-drawer .looks-drawer-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ── Looks browse button ──────────────────────────────────── */

/* REPLACE WITH: */
.looks-browse-btn {
    display: none; /* replaced by View all tile in the grid */
}

/* ── Looks drawer grid (4-col inside bottom sheet) ─────────── */

/* REPLACE WITH: */
.looks-drawer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gutter-lg);
    padding-bottom: var(--padding-md);
    width: 100%;
    padding-top: 4px;
    padding-bottom: 40px;
}



#looks-drawer {
    height: 54vh;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: var(--padding-sm);

}


.panel-label {
    font-size: var(--font-size-xxsm);
    letter-spacing: 8%;
    text-transform: uppercase;
    color: var(--text-secondary-color);
    display: flex;
    gap: 4px;
}

.effect-style-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: var(--padding-sm);
    padding-bottom: var(--padding-sm);
}

.effect-style-pill {
    background: var(--border-tertiary-color);
    border:  1px solid var(--bg-tertiary-color);
    transition: all var(--transition-md);
    color: var(--text-secondary-color);

    border-radius: var(--border-radius-lg);
    padding: var(--padding-xsm) var(--padding-sm);
    font-size: var(--font-size-xsm);
    line-height: 100%;
    cursor: pointer;
    transition: all var(--transition-md);
}

.effect-style-pill:hover {
    background: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color: var(--border-secondary-color);
    color: var(--text-primary-color);
}

.effect-style-pill.active {
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border-color: var(--text-primary-color);
}

.feature-disabled {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s ease;
}


/* ── Export section (sticky bottom) ──────────────────────── */

.right-section-export {
    flex-shrink: 0;
    border-top: 1px solid var(--border-primary-color);

    display: flex;
    flex-direction: column;
    
}

.right-section-label{
    font-size: var(--font-size-xsm);
    color: var(--text-secondary-color);
}

.export-format-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.export-format-pill {
    background: linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    border: 1px solid var(--border-primary-color);
    color: var(--text-secondary-color);
    border-radius: var(--border-radius-sm);
    padding: var(--padding-xsm) var(--padding-sm);
    font-size: var(--font-size-xsm);
    line-height: 100%;
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--shadow-inset-top),
                inset 0 -1px 0 var(--shadow-inset-bottom);
    transition: all var(--transition-md);
}

.export-format-pill:hover {
    border-color: var(--border-secondary-color);
    color: var(--text-primary-color);
}

.export-format-pill.active {
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border-color: var(--text-primary-color);
}

.export-size-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-md);
}

.export-size-label {
    font-size: var(--font-size-xsm);
    color: var(--text-secondary-color);
    white-space: nowrap;
}

.export-size-select-wrap {
    flex: 1;
}

.export-actions {
    display: flex;
    gap: var(--gutter-md);
}

.export-actions .btn,
.export-actions .btn-primary {
    flex: 1;
    justify-content: center;
}


/* ── Nav export dropdown ──────────────────────────────────── */

.nav-export-dropdown {
    position: relative;
}

/* .nav-export-dropdown.open .nav-export-btn {
    color: var(--text-brand-color);
} */


.nav-export-btn {
    background:        linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    color:             var(--text-primary-color);
    border:            1px solid var(--border-primary-color);
    border-radius:     var(--border-radius-2xl);
    padding:           var(--padding-sm) var(--padding-md);
    display:           flex;
    align-items:       center;
    gap:               var(--gutter-md);
    font-size:         var(--font-size-sm);
    font-weight:       var(--font-weight-sm);
    letter-spacing:    -0.01em;
    cursor:            pointer;
    backdrop-filter:   blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 4px 24px var(--shadow-drop);
    transition:        all var( --transition-md);
}

.nav-export-btn:hover {
  background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color:      var(--border-secondary-color);
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 6px 32px var(--shadow-drop-hover);
}

.nav-export-panel {
    position: fixed;
    top: 56px;
    right: var(--padding-xl);
    width: 320px;
    z-index: 9999;

    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-lg);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    box-shadow: 0 16px 48px rgba(0,0,0,0.6),
                inset 0 1px 0 var(--shadow-inset-top);
    padding: var(--padding-md);

    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);

    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-export-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* ── Export empty state ───────────────────────────────────── */

.export-empty-state {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: var(--padding-md) 0;
}

.export-empty-state p {
    font-size: var(--font-size-xsm);
    color: var(--text-tertiary-color);
    letter-spacing: -0.01em;
}

.export-empty-state .btn-dots span {
    background: var(--text-tertiary-color);
    width: 4px;
    height: 4px;
}

.nav-export-dropdown.disabled .nav-export-btn {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Upgrade button ───────────────────────────────────────── */

.btn-upgrade {
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-2xl);
    padding: var(--padding-sm) var(--padding-md);
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-sm);
    cursor: pointer;
    transition: filter var(--transition-sm);
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
}

.btn-upgrade:hover {
    filter: brightness(1.2);
}

.btn-upgrade i {
    font-size: var(--font-size-md);
}

.btn-upgrade,
.btn-save-preset,
.btn-avatar {
    height: 28px;
    box-sizing: border-box;
    padding: var(--padding-sm) var(--padding-md);
}


/* canvas aniamtion */

.bottom.drag-over {

    border-radius:     var(--border-radius-xl);
    outline-offset: -8px;

    background:        linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    border-color:      var(--border-secondary-color);
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 6px 32px var(--shadow-drop-hover);
    
  }




main section .bottom .placeholder{
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--gutter-lg);
  
}

/* ─── Empty state placeholder ─── */

.placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.placeholder-label {

    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    letter-spacing: -0.01em;
}

.placeholder-thumbs {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    padding: 20px 8px;  /* ← breathing room for scale/translate */
}

.placeholder-thumb {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid transparent;
    flex-shrink: 0;
    transition: all var(--transition-md);
    animation: thumbFadeIn 0.5s ease both;
}


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

.placeholder-thumb:hover {
    transform: translateY(-14px) scale(1.04);
    border-color: var(--border-secondary-color);
    box-shadow: 0 20px 32px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-md);
}


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

/* ─── Fix divider — make sure it shows ─── */
.placeholder-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 320px;
    margin: 4px auto;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: var(--border-primary-color);
    display: block;    /* ← add this — was likely missing */
}

.divider-text {

    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    letter-spacing: 0.05em;
}

.placeholder-upload {

    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    cursor: pointer;
    transition: color 0.2s ease;
    letter-spacing: -0.01em;
}

.placeholder-upload:hover {
    color: var(--text-primary-color);
}

main section .right h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-sm);
    color: var(--text-primary-color);
}

main section .right .filters{
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    padding-top: var(--padding-sm);
    padding-bottom: var(--padding-md);

}


/* Filters CSS */


.filter {
    width: 100%;
    position: relative;
}

.filter .effect-slider-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.filter-category-label {
    font-size: var(--font-size-xxsm);
    color: var(--text-tertiary-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--font-weight-sm);
    padding-top: var(--padding-md);
    padding-bottom: 2px;
}

.filter-category-label:first-child {
    padding-top: 0;
}

.filter-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0 0 4px 0;
    user-select: none;

}

.filter-category-header:first-child {
    padding-top: 8;
    
}

.filter-category-header:hover .filter-category-label {
    color: var(--text-secondary-color);
}

/* Override the old standalone label padding — header owns spacing now */
.filter-category-label {
    font-size: var(--font-size-xxsm);
    color: var(--text-tertiary-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--font-weight-sm);
    padding-top: 0;    /* was var(--padding-md) — remove it */
    padding-bottom: 0;
    margin: 0;
}

.filter-category-chevron {
    background: none;
    border: none;
    color: var(--text-tertiary-color);
    cursor: pointer;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: color var(--transition-sm);
    line-height: 1;
    flex-shrink: 0;
}

.filter-category-chevron:hover {
    color: var(--text-secondary-color);
}

.filter-category-body {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    padding-top: var(--padding-sm);
    padding-bottom: var(--padding-lg);
    overflow: visible;
}

.filter-category-body.collapsed {
    display: none;
}

main section .right .filter input { display: block; }

/* 6. Canvas respects container bounds, maintains aspect ratio */

/* stack both canvases on top of each other */


.canvas-wrapper {
    position: relative;
    line-height: 0;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    position: relative;   /* anchors absolutely-positioned charCanvas */
    overflow: hidden;     /* clips blur overscan + character overflow */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg);
}

canvas.image-canvas {
    display:flex;
    justify-content:center;
    align-items:center;
    max-width: 100%;
    max-height: 100%;
    position:relative;

    /* width:100%;
    height:100%; */
    overflow:hidden;
    border-radius: var(--border-radius-lg);
    

}

canvas.effect-canvas {
    position: absolute;
    pointer-events: none;
    display: none;
    border-radius: var(--border-radius-lg);
    
}

/* ── Canvas bar — Shuffle + Remix ────────────────────────── */

.canvas-bar {
    display: flex;
    gap: var(--gutter-md);
    flex-shrink: 0;
    height: 52px;
}

.canvas-btn-shuffle,
.canvas-btn-remix {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-md);
    border-radius: var(--border-radius-xl);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-sm);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: all var(--transition-md);
    border: 1px solid var(--border-primary-color);
}

.canvas-btn-shuffle {
    background:        linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    color:             var(--text-primary-color);
    border:            1px solid var(--border-primary-color);
    border-radius:     var(--border-radius-2xl);
    padding:           var(--padding-sm) var(--padding-md);
    display:           flex;
    align-items:       center;
    gap:               var(--gutter-md);
    font-size:         var(--font-size-sm);
    font-weight:       var(--font-weight-sm);
    letter-spacing:    -0.01em;
    cursor:            pointer;
    backdrop-filter:   blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 4px 24px var(--shadow-drop);
    transition:        all var( --transition-md);
}

.canvas-btn-shuffle:hover {
  background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color:      var(--border-secondary-color);
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 6px 32px var(--shadow-drop-hover);
}

.canvas-btn-remix {
    background:        linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    color:             var(--text-primary-color);
    border:            1px solid var(--border-primary-color);
    border-radius:     var(--border-radius-2xl);
    padding:           var(--padding-sm) var(--padding-md);
    gap:               var(--gutter-md);
    font-size:         var(--font-size-sm);
    font-weight:       var(--font-weight-sm);
    letter-spacing:    -0.01em;
    backdrop-filter:   blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 4px 24px var(--shadow-drop);
    transition:        all var( --transition-md);
    flex: 1;
}

.canvas-btn-remix:hover {
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color:      var(--border-secondary-color);
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 6px 32px var(--shadow-drop-hover);
}

.canvas-btn-remix:disabled,
.canvas-btn-shuffle:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── Before/After Compare ─── */

#compare-before {
    position: absolute;
    pointer-events: none;
    display: none;
    border-radius: var(--border-radius-lg);
    top: 0;
    left: 0;
    z-index: 10;
}

/* ─── Divider line ─── */
.compare-divider {
    position: absolute;
    width: 44px;              /* ← wide hit area */
    transform: translateX(-50%);
    display: none;
    z-index: 30;
    cursor: grab;
    touch-action: none;
    align-items: center;
    justify-content: center;
    
    
}



.compare-divider:active {
    cursor: grabbing;
}

/* thin visual line centred inside the wide hit area */
.compare-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background:   var(--slider-track-filled-color);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* ─── Handle circle ─── */
.compare-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    /* background:        linear-gradient(180deg, var(--slider-track-color) 0%, var(--slider-track-filled-color) 100%); */
    background:   var(--slider-track-color);
    backdrop-filter:   blur(var(--glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary-color);
    font-size: 14px;
    box-shadow: 0 6px 32px var(--shadow-drop-hover);
    pointer-events: none;   /* clicks pass through to divider */
    user-select: none;
    cursor: grab;
}


.compare-tab {

    z-index: 50;

    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    border: 1px solid var(--border-primary-color);
    border-radius: 50%;
    color: var(--text-primary-color);
    cursor: pointer;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 4px 16px rgba(0,0,0,0.4),
                inset 0 1px 0 var(--shadow-inset-top);
    transition: all var(--transition-md);
    font-size: 20px;
}


nav .nav-compare-btn {
    z-index: auto;
    width: auto;
    height: 30px;
    border-radius: var(--border-radius-2xl);
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size-sm);
}

nav .nav-compare-btn.compare-active {
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border:            1px solid var(--border-secondary-color);
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);
}

.nav-logo-mark {
    width: auto;
    height: 18px;
    display: block;
    flex-shrink: 0;
    mix-blend-mode: screen;
}



.compare-tab:hover {
    background: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 100%);
    border-color: var(--border-secondary-color);
    color: var(--text-primary-color);
    filter: brightness(1.15);
}

.compare-tab.compare-active {
    background: var(--text-brand-color);
    border-color: var(--text-brand-color);
    color: var(--bg-primary-color);
}

.compare-tab.compare-active:hover {
    filter: brightness(1.15);
    transform: scale(1.08);
}

/* ─── Before / After labels ─── */
.compare-label-before,
.compare-label-after {
    display: none;
    position: fixed;
    z-index: 35;
    background: white;
    color: black;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--border-radius-lg);
    pointer-events: none;
    mix-blend-mode: difference;
    backdrop-filter: blur(var(--glass-blur));
    /* Remove backdrop-filter — incompatible with mix-blend-mode */
}


/* ─── Compare active button state ─── */
#compare-btn.compare-active,
#compare-btn-mobile.compare-active {
    color: var(--text-brand-color);
    
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border:            1px solid var(--border-secondary-color);
    
}


#compare-btn.compare-active:hover,
#compare-btn-mobile.compare-active:hover {
    filter: brightness(1.15);
}

/* ─── Before/After Compare ENDS HERE ─── */


/* ─── Reset button rounded ─── */

#reset-btn {
    border-radius: var(--border-radius-2xl);
    width: auto;
    height: 30px;
    padding: var(--padding-sm) var(--padding-md);
}


/* effects starts here*/
/* effects starts here*/

main section .right .effects {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    padding-top: 0;
    padding-bottom: var(--padding-lg);
    border-top: none;
    border-bottom: 1px solid var(--border-primary-color);

}

main section .right .effects h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-sm);
    color: var(--text-primary-color);
}

main section .right .effect-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gutter-md);
}




/* filter labels white */
main section .right .filter .slider-label {
    color: var(--text-secondary-color);
    font-weight: var(--font-weight-xsm);
}



.effect-slider-row {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    transition: all var(--transition-md);
}

.effect-slider-row:has(input:active) {
    transform: scale(1.02);
}

.effect-slider-row span:last-child {
    position: absolute;
    right: 10px;
    font-size: var(--font-size-xsm);
    color: var(--text-secondary-color);
    pointer-events: none;
    z-index: 2;
    min-width: unset;
    padding-left: 0;
    flex-shrink: unset;
}

.slider-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-xsm);
    color: var(--text-primary-color);
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
    letter-spacing: 0.01em;
    text-transform: capitalize;
}

.effect-row .select-wrapper-track .slider-label {
 
    color: var(--text-accent-color);
    
}

/* ------------stylish slider-------------- */

.effect-slider-row input[type="range"] {
    width: 100%;
    height: 28px;
    background: transparent;
    cursor: pointer;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: all var(--transition-md);
}

.effect-slider-row input[type="range"]:active,
main section .right .filter input[type="range"]:active {
    cursor: grabbing;
}

.effect-slider-row input[type="range"]::-webkit-slider-runnable-track,
main section .right .filter input[type="range"]::-webkit-slider-runnable-track {
    height: 32px;
    border-radius: var(--border-radius-xl);
    corner-shape: squircle; 
    background: linear-gradient(
    to right,
    var(--slider-thumb-color) 0%,
    var(--slider-track-color) var(--fill, 0%),
    var(--slider-track-color-left) var(--fill, 0%),
    var(--slider-track-color-left) 100% );
    border: 0px solid var(--border-tertiary-color);
    overflow: hidden;
    transition: all var(--transition-md);
    
}

.effect-slider-row input[type="range"]:hover::-webkit-slider-runnable-track,
main section .right .filter input[type="range"]:hover::-webkit-slider-runnable-track {
    filter: brightness(1.5);
    transform: scale(1.02);
    transition: filter 0.2s ease, border-color 0.2s ease;
    
}


.effect-slider-row input[type="range"]:active::-webkit-slider-runnable-track,
main section .right .filter input[type="range"]:active::-webkit-slider-runnable-track {
    filter: brightness(2);
    transition: all var(--transition-md);
}


.effect-slider-row input[type="range"]::-webkit-slider-thumb,
main section .right .filter input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 2px;
    height: 16px;
 
    border: none;
    cursor: grab;
    border-radius: 2px;
    margin-top: 8px;
    margin-left: -8px;
    box-sizing: border-box;

    transition: all var(--transition-md);
}

.effect-slider-row input[type="range"]:hover::-webkit-slider-thumb,
main section .right .filter input[type="range"]:hover::-webkit-slider-thumb {
    background: var(--text-secondary-color);
    width: 3px;
}



/* fix value visibility — ensure it shows over the track */
.effect-slider-row span:last-child {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-xsm);
    color: var(--text-secondary-color);
    pointer-events: none;
    z-index: 2;
    min-width: unset;
    padding: 0;
    flex-shrink: unset;
}

.effect-slider-row .slider-label {
    font-size: var(--font-size-xsm);
    color: var(--text-accent-color);

}

/* //-----character controls-----// */

#char-controls {
    display: none;
    flex-direction: column;
    gap: var(--gutter-lg);
}

#char-controls.visible {
    display: flex;
}

.char-input {
    width: 100%;
    background: linear-gradient(0deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    color: var(--text-primary-color);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-sm);
    padding: var(--padding-xsm) var(--padding-sm);
    font-size: var(--font-size-xsm);
    font-family: monospace;
    outline: none;
}

.char-mode-toggle {
    display: flex;
    gap: 4px;
}
.char-mode-btn {
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary-color);
    font-size: 11px;
    cursor: pointer;
}
.char-mode-btn.active {
    background: var(--bg-tertiary);
    color: var(--text-primary-color);
}

/* //-----character controls ENDS-----// */



/* ↓ NEW — wrapper to position icon relative to select */
.select-wrapper { 
    position: relative;
    width: 100%;
    
}



/* ↓ NEW — icon positioned inside the select on the right */
.select-wrapper i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: white;
    font-size: 14px;
}


.select-wrapper-track {
    position: relative;
    width: 100%;
}

.select-wrapper-track select {
    width: 100%;
    height: 32px;
    border: 0px solid var(--border-primary-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary-color);
    font-size: var(--font-size-xsm);
    border-radius: var(--border-radius-xl);
    corner-shape: squircle; 
    font-family: "Geist", sans-serif;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 32px 0 10px;

    background-position: right 12px center;
    background-color: var(--slider-track-color-left);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;

    background-size: 10px 6px;
    text-align-last: right;
    transition: all var(--transition-md);
}

.select-wrapper-track select option {
    background-color: #1a1a1a;
    color: white;
    text-align: left;
}

.select-wrapper-track select:hover {
    border-color: var(--border-secondary-color);
    filter: brightness(1.6);
    transform: scale(1.02);
}





.select-wrapper-track .slider-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    font-size: var(--font-size-xsm);
    color: var(--text-secondary-color);
    white-space: nowrap;
    text-transform: capitalize;
}




.select-wrapper-track > i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-secondary-color);
    font-size: 12px;
    z-index: 2;
}




.presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: var(--padding-xsm);
    padding-bottom: var(--padding-sm);
    
    
}

.presets button {
    /* background: linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%); */
    background: var(--border-tertiary-color);
    border:  1px solid var(--bg-tertiary-color);
    color: var(--text-secondary-color);
    border-radius: var(--border-radius-lg);
    padding: var(--padding-xsm) var(--padding-sm);
    
    font-size: var(--font-size-xsm);
    line-height: 100%;
    cursor: pointer;
    transition: all var(--transition-md);
}

.presets button:hover {
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color:      var(--border-secondary-color);
    color: var(--text-primary-color);
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom);
    
    filter: brightness(1.2);
}

.presets button:focus {
    transform: scale(0.96);
    filter: brightness(0.9);
    transition: transform 0.08s ease;
}

nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-sm) var(--padding-md) 0 var(--padding-md);
 
    flex-shrink: 0;  /* won't shrink when section fills remaining space */
}

nav .nav-right  i{
    font-size: var(--font-size-md);
}

nav .nav-centre  i{
    font-size: var(--font-size-md);
    
}

.btn-icon-pill {
    width: 32px;
    height: 32px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    border: 1px solid var(--border-primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary-color);
    font-size: 18px;
    box-shadow: inset 0 1px 0 var(--shadow-inset-top),
                inset 0 -1px 0 var(--shadow-inset-bottom);
    transition: all var(--transition-md);
    flex-shrink: 0;
}

.btn-icon-pill:hover {
    background: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color: var(--border-secondary-color);
    filter: brightness(1.15);
}

.nav-left {
    display: flex;
    align-items: center;
    min-width: 160px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    cursor: default;
    user-select: none;
}

.logo-mark {
    font-size: 20px;
    color: var(--text-primary-color);
}

.logo-name {
    font-size: var(--font-size-xl);
    font-weight: 400;
    color: var(--text-primary-color);
    letter-spacing: -0.03em;
    line-height: 100%;
}

.nav-centre {
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--gutter-lg);
    min-width: 160px;
    justify-content: flex-end;
}

 /* Backgrounds Drawer starts here */

 /* overlay */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* drawer */


.drawer {
    position: fixed;
    bottom: var(--padding-md); /* spacing from bottom */
    left: var(--padding-md);
    right: var(--padding-md);
    z-index: 100;
    background: linear-gradient(180deg, var(--glass-drawer-from) -40%, var(--glass-drawer-to) 50%);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(var(--glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
    padding: var(--padding-xl) var(--padding-xl) 0 var(--padding-xl) ;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xl);
    height: 66vh;
    transform: translateY(calc(100% + 32px));
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.4);
    overflow: clip;
  
}

.drawer.open {
    transform: translateY(0);
   
}

/* drag handle */
.drawer::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-primary-color);
}

/* header */
.drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 2px;
}

.drawer-title h2 {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-primary-color);
    letter-spacing: -0.02em;
}

.drawer-title p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    margin-top: 4px;
}

.drawer-close {
    background:       var(--bg-sexondary-color);
    border: 1px solid var(--border-primary-color);
    border-radius: 50%;
    padding:           var(--padding-sm) var(--padding-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary-color);
    transition: all var(--transition-sm);
    flex-shrink: 0;
}



.drawer-close:hover {

    color: var(--text-primary-color);

    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border:            1px solid var(--border-secondary-color);
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);
}

.drawer-close i {
    font-size: 14px;
}

/* category tabs */
.drawer-categories {
    display: flex;
    gap: var(--gutter-md);
    flex-wrap: wrap;

}

.category-tab {
    background:        linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 60%);
    color:             var(--text-secondary-color);
    border:            1px solid var(--border-primary-color);
    border-radius:     var(--border-radius-2xl);
    padding:           var(--padding-xsm) var(--padding-md);
    display:           flex;
    align-items:       center;
    gap:               var(--gutter-md);
    font-size:         var(--font-size-xsm);
    font-weight:       var(--font-weight-sm);
    letter-spacing:    -0.01em;
    cursor:            pointer;
    backdrop-filter:   blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);
    transition:        all var( --transition-sm);
    letter-spacing: -0.01em;

  
    
}

.category-tab:hover {
    color: var(--text-primary-color);
    border-color: var(--border-secondary-color);
    
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color:      var(--border-secondary-color);
    box-shadow:
      inset 0  1px 0 var(--shadow-inset-top),
      inset 0 -1px 0 var(--shadow-inset-bottom), 0 1px 4px var(--shadow-drop-hover);
}

.category-tab.active {
    background:        linear-gradient(180deg, var(--thickglass-bg-from)  0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border-color: var(--text-primary-color);
}

/* panels */
.drawer-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;

    contain: layout paint;
    /* transform: translateZ(0);
    will-change: scroll-position; */

    position: relative;
}

.bg-panel {
    display: none;
    /* remove height: 100% entirely */
    overflow-anchor: none;
    padding-bottom: 32px;
    scrollbar-width: none;
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
}


.bg-panel::-webkit-scrollbar {
    display: none;
}


.bg-panel.active {
    display: block;
}

.bg-panel.active:has(.bg-pro-lock-grid) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


/* grid */
.bg-grid {
    display: grid;
    
       /* auto scale to fit width */
       grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--gutter-lg);
    padding-bottom: var(--padding-md);
    width: 100%;
    align-items: start;
    
    padding-top: 4px; /* important */
    padding-bottom: 40px; /* prevents bottom cut */
}

/* coming soon */
.bg-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-md);
    height: 140px;
    color: var(--text-secondary-color);
    grid-column: 1 / -1;
}

.bg-coming-soon i {
    font-size: var(--font-size-3xl);
    opacity: 0.4;
}

.bg-coming-soon p {
    font-size: var(--font-size-md);
    opacity: 0.4;
}

.bg-thumb {
        position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    cursor: pointer;

    aspect-ratio: 4 / 5;
    width: 100%;

    background: var(--bg-tertiary-color);
    will-change: transform;
    transform: translateZ(0);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.bg-thumb:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    
    z-index: 2;
}

.bg-thumb.selected {
    border-color: var(--border-secondary-color);
}

.bg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}




/* shuffle animation */

.btn-dots span.d-full { opacity: 1; }
.btn-dots span.d-dim  { opacity: 0.1; }

.btn-dots {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 1px;
}

.btn-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
    transition: opacity 0.2s;
}


/* brand menu sidebar ---------------------------------*/

.nav-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.brand-trigger {
    display: flex;

    gap: 4px;
    cursor: pointer;
}

.brand-trigger:hover .nav-dots span.d-full {
    animation: cornerPulse 0.3s ease-in-out infinite alternate;
}

.brand-trigger:hover .nav-dots span:nth-child(1) { animation-delay: 0s; }
.brand-trigger:hover .nav-dots span:nth-child(3) { animation-delay: 0.15s; }
.brand-trigger:hover .nav-dots span:nth-child(7) { animation-delay: 0.15s; }
.brand-trigger:hover .nav-dots span:nth-child(9) { animation-delay: 0s; }


@keyframes cornerPulse {
    0%   { opacity: 1; }
    100% { opacity: 0.1; }
}

.ditther-wordmark {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-xl);
    color: white;
    letter-spacing: -0.02em;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.ditther-wordmark:hover {
    opacity: 1;
}

.about-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s;
}

.nav-dots {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 1px;
}

.nav-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--bg-accent-color);
    opacity: 1;
    transition: opacity 0.2s;
}

.nav-dots span.d-full { opacity: 1; }
.nav-dots span.d-dim  { opacity: 0.1; }

/* About overlay */
.about-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.about-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.nav-text-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    text-decoration: none;
    margin-left: var(--gutter-lg);
    transition: color var(--transition-sm);
}

.nav-text-link i {
    font-size: var(--font-size-md);
}

.nav-text-link:hover { color: var(--text-pro-color); }


/* About drawer----------------------------- */
.about-drawer {
    position: fixed;
    top: var(--padding-md);
    bottom: var(--padding-md);
    left: var(--padding-md);
    width: 460px;
    z-index: 100;
    background: linear-gradient(180deg, var(--glass-drawer-from) -20%, var(--glass-drawer-to) 50%);
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    padding: var(--padding-xl) var(--padding-xl) 0 var(--padding-xl) ;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xl);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
    transform: translateX(calc(-100% - 32px));
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    justify-content: space-between;  /* pushes footer to bottom */
}


.about-drawer.open {
    transform: translateX(0);
}

.about {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}


.about-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.about-logo svg{
    height: 20px;
    width: auto;
}


.about-close {
   
    background:       var(--bg-sexondary-color);
    border: 1px solid var(--border-primary-color);
    border-radius: 50%;
    padding:           var(--padding-sm) var(--padding-sm);


    color: var(--text-secondary-color);
 
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-sm);
}

.about-close:hover {
    color: var(--text-primary-color);

    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border:            1px solid var(--border-secondary-color);
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);
}

.about-title {
    font-size: 22px;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.about-beta {
   
    background: linear-gradient(0deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    color: var(--text-brand-color);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-sm);
    padding: var(--padding-xsm) var(--padding-xsm);
    font-size: var(--font-size-xsm);
    font-weight: var(--font-weight-sm);
    letter-spacing: 0.05em;
    line-height: 0.9;
}


.about-made-by {
    font-size: var(--font-size-md);
    color: var(--text-secondary-color);
    margin: 0;
    padding: 8px 0;
}


.about-aashish {
    font-size: var(--font-size-md);
    color: var(--text-accent-color);
    
}

.about-desc {
    font-size: var(--font-size-sm);
    line-height: 1.3;
    font-weight: var(--font-weight-sm);
    color: var(--text-secondary-color);
    margin: 0;
    padding-bottom: var(--padding-xl);
    border-bottom: 1px solid var(--border-primary-color);
}

.about-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
   
    gap: 12px;
    text-decoration: none;
    padding-bottom: var(--padding-xl);
}

.about-btn {
    display: flex;
    align-items: center; 
    gap: 8px;

}
/* --------instructions manual---------- */

.about-guide {
    display: flex;
    flex-direction: column;
    gap: 16px;

    background: var(--bg-sexondary-color);
    color: var(--text-brand-color);
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-lg);
    padding: var(--padding-lg);
}

.about-guide-title {
    font-size: var(--font-size-xxsm);
    font-weight: var(--font-weight-sm);
    color: var(--text-tertiary-color);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: var(--padding-xsm);
}

.about-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.guide-dots {
    display: grid;
    grid-template-columns: repeat(3, 3px);
    grid-template-rows: repeat(3, 3px);
    gap: 2px;
    flex-shrink: 0;
    margin-top: 2px;
}

.guide-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: white;
}

.guide-dots span.d-full { opacity: 1; }
.guide-dots span.d-dim  { opacity: 0.1; }

.guide-step-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-sm);
    color: var(--text-accent-color);
    margin: 0 0 2px 0;
}

.guide-step-desc {
    font-size: 12px;
    color: var(--text-tertiary-color);
    line-height: 1.6;
    margin: 0;
}

a.btn {
    text-decoration: none;
}


/* //footer---------// */

.about-footer {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xl);
    margin-top: auto;  /* sticks to bottom */
    padding: var(--padding-xl) 0;
   
}



.about-upcoming {
    font-size: 12px;
    color: var(--text-secondary-color);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 4px;

    
}

.upcoming-label {
    color: var(--text-primary-color);
    font-weight: var(--font-weight-sm);
    font-size: var(--font-size-sm);
    margin-right: 6px;
}

.about-version {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    padding-top: var(--padding-lg);
    border-top: 1px solid var(--border-primary-color);
    
}




/* //----------------------floating menu---------------------// */

.floating-bar {
    display: none; /* hidden on desktop */
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    align-items: center;
    background: linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 100%);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-2xl);
    backdrop-filter: blur(var(--glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    padding: 8px;
    gap: var(--gutter-md);
}

.floating-bar .btn-sec {
    border-radius: var(--border-radius-2xl);
    border: none;
    background: none;
    padding: var(--padding-sm) var(--padding-md);
}


.floating-divider {
    width: 1px;
    height: 20px;
    background: var(--border-primary-color);
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   DOT ANIMATION SYSTEM
══════════════════════════════════════════════════════════════ */

/* ─── Shuffle animation ─── */
#inspire-btn.shuffling .btn-dots span,
#inspire-btn-mobile.shuffling .btn-dots span {
    animation: dotShuffle 0.4s ease-in-out infinite;
}

#inspire-btn.shuffling .btn-dots span:nth-child(1),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(1) { animation-delay: 0ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(2),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(2) { animation-delay: 100ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(3),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(3) { animation-delay: 200ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(4),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(4) { animation-delay: 300ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(5),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(5) { animation-delay: 400ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(6),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(6) { animation-delay: 300ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(7),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(7) { animation-delay: 200ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(8),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(8) { animation-delay: 100ms; }
#inspire-btn.shuffling .btn-dots span:nth-child(9),
#inspire-btn-mobile.shuffling .btn-dots span:nth-child(9) { animation-delay: 0ms; }

@keyframes dotShuffle {
    0%, 100% { opacity: 0.15; transform: scale(0.6); }
    50%       { opacity: 1;    transform: scale(1.1); }
}


#remix-btn:disabled,
#remix-btn-mobile:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── Remix animation ─── */
#remix-btn.remixing .btn-dots span,
#remix-btn-mobile.remixing .btn-dots span {
    animation: dotRemix 500ms ease-in-out infinite;
}

/* ─── Remix — flower bloom: center → edges → corners ─── */
#remix-btn.remixing .btn-dots span:nth-child(5),
#remix-btn-mobile.remixing .btn-dots span:nth-child(5) { animation-delay: 0ms; }

#remix-btn.remixing .btn-dots span:nth-child(2),
#remix-btn-mobile.remixing .btn-dots span:nth-child(2),
#remix-btn.remixing .btn-dots span:nth-child(4),
#remix-btn-mobile.remixing .btn-dots span:nth-child(4),
#remix-btn.remixing .btn-dots span:nth-child(6),
#remix-btn-mobile.remixing .btn-dots span:nth-child(6),
#remix-btn.remixing .btn-dots span:nth-child(8),
#remix-btn-mobile.remixing .btn-dots span:nth-child(8) { animation-delay: 100ms; }

#remix-btn.remixing .btn-dots span:nth-child(1),
#remix-btn-mobile.remixing .btn-dots span:nth-child(1),
#remix-btn.remixing .btn-dots span:nth-child(3),
#remix-btn-mobile.remixing .btn-dots span:nth-child(3),
#remix-btn.remixing .btn-dots span:nth-child(7),
#remix-btn-mobile.remixing .btn-dots span:nth-child(7),
#remix-btn.remixing .btn-dots span:nth-child(9),
#remix-btn-mobile.remixing .btn-dots span:nth-child(9) { animation-delay: 200ms; }



@keyframes dotRemix {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%      { opacity: 0.2; transform: scale(0.5); }
}


/* ──------------------─ Actions toast ──---------------------─ */


#action-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 200;
    background: linear-gradient(180deg, var(--glass-drawer-from) -40%, var(--glass-drawer-to) 60%);
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    box-shadow: 0 20px 32px var(--shadow-drop-sm),
                inset 0 1px 0 var(--shadow-inset-top);
    padding: var(--padding-md) var(--padding-lg);
    font-family: 'Geist Mono', monospace;
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    white-space: nowrap;
    letter-spacing: -0.01em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#action-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Crop toolbar — floating overlay ─────────────────────── */

.crop-toolbar-float {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--glass-drawer-to);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 6px 10px;
    pointer-events: all;
    white-space: nowrap;
}

.crop-ratio-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary-color);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--transition-sm);
    white-space: nowrap;
}

.crop-ratio-btn:hover {
    color: var(--text-primary-color);
    background: rgba(255,255,255,0.08);
}

.crop-ratio-btn.active {
    background: rgba(255,255,255,0.15);
    color: var(--text-primary-color);
    border-color: rgba(255,255,255,0.2);
}

.crop-toolbar-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.12);
    margin: 0 4px;
    flex-shrink: 0;
}

.crop-float-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary-color);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--transition-sm);
}

.crop-float-btn:hover {
    color: var(--text-primary-color);
    background: rgba(255,255,255,0.14);
}

.crop-float-apply {
    background: var(--text-brand-color);
    border-color: var(--text-brand-color);
    color: #000;
}

.crop-float-apply:hover {
    filter: brightness(1.1);
}

/* Crop button active state in nav */
#crop-btn.crop-active {
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border:            1px solid var(--border-secondary-color);
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);

}

/* ── Crop toolbar ─────────────────────────────────────────── */

.crop-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-lg);
    background-color: var(--bg-tertiary-color);
    border-radius: var(--border-radius-xl);
    padding: 10px var(--padding-md);
    flex-shrink: 0;
}

.crop-ratios {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.crop-ratio-btn {
    background: linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    border: 1px solid var(--border-primary-color);
    color: var(--text-secondary-color);
    border-radius: var(--border-radius-sm);
    padding: 4px 8px;
    font-size: var(--font-size-xsm);
    cursor: pointer;
    transition: all var(--transition-sm);
}

.crop-ratio-btn:hover {
    color: var(--text-primary-color);
    border-color: var(--border-secondary-color);
}

.crop-ratio-btn.active {
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border-color: var(--text-primary-color);
}

.crop-actions {
    display: flex;
    gap: var(--gutter-md);
    flex-shrink: 0;
}

.crop-actions .btn,
.crop-actions .btn-primary {
    padding: var(--padding-xsm) var(--padding-md);
    font-size: var(--font-size-xsm);
}

/* Crop button active state in nav */
#crop-btn.crop-active {
    background:        linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border:            1px solid var(--border-secondary-color);
    box-shadow:
      inset 0  1px 4 var(--shadow-inset-top),
      inset 0 -1px 4 var(--shadow-inset-bottom);

}



/* ── Upload dropdown menu ────────────────────────────────────
   Mirrors .custom-dropdown-menu exactly for visual consistency.
   Uses position:fixed + opacity animation instead of
   position:absolute + display:none because the menu lives
   outside <main> and needs to clear nav-centre's transform.  */

   .upload-dropdown-menu {
    /* positioning — fixed to viewport, centred under + button */
    position: fixed;
    top: 56px;
    left: calc(50% - 146px);  /* nudge left slightly if needed */
    min-width: 220px;
    z-index: 9999;

    /* ── visual — identical to .custom-dropdown-menu ── */
    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-lg);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    box-shadow: 0 16px 48px rgba(0,0,0,0.6),
                inset 0 1px 0 var(--shadow-inset-top);
    padding: var(--padding-md);

    /* ── layout ── */
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;

    /* ── animation — identical to .custom-dropdown-menu ── */
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transform-origin: top center;       /* opens downward so origin is top */
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* open state — matches .custom-dropdown.open .custom-dropdown-menu */
.upload-dropdown-menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* ── Items — identical to .custom-dropdown-item ── */
.upload-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    padding: 8px var(--padding-sm);
    border-radius: var(--border-radius-md);
    background: none;
    border: none;
    color: var(--text-accent-color);
    font-size: var(--font-size-md);
    font-family: 'Geist', sans-serif;
    cursor: pointer;
    text-align: left;
    letter-spacing: -0.01em;
    transition: all var(--transition-sm);
}

.upload-dropdown-item:hover {
    background: var(--glass-bg-hover-to);
    color: var(--text-primary-color);
    border-radius: var(--border-radius-md);
}

.upload-dropdown-item i {
    font-size: var(--font-size-md);
    flex-shrink: 0;
    color: var(--text-secondary-color);
    transition: color var(--transition-sm);
}

.upload-dropdown-item:hover i {
    color: var(--text-primary-color);
}

/* ── Label + desc text stack ── */
.upload-option-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.upload-option-label {
    font-size: var(--font-size-sm);
    line-height: 1;
    color: inherit;
}

.upload-option-desc {
    font-size: 10px;
    color: var(--text-secondary-color);
    line-height: 1;
    transition: color var(--transition-md);
}

.upload-dropdown-item:hover .upload-option-desc {
    color: var(--text-secondary-color);
}

/* ── Divider ── */
.upload-dropdown-divider {
    height: 1px;
    background: var(--border-primary-color);
    margin: 2px 0;

}


/* ── Upload item icon box — matches screenshot ── */
.upload-item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-lg);
    background: var(--slider-track-color-left);
    border: 1px solid var(--border-primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-primary-color);
    font-size: var(--font-size-md);
    transition: all var(--transition-sm);
}

.upload-dropdown-item:hover .upload-item-icon {
    background: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color: var(--border-secondary-color);
}

/* also bump item padding slightly so icon breathes */
.upload-dropdown-item {
    padding: 10px var(--padding-sm);
}

/* ── Mobile — opens upward above the fixed bottom nav ── */
@media (max-width: 1024px) {
    .upload-dropdown-menu {
        /* reset desktop centering */
        left: 16px;
        right: 16px;
        margin-left: 0;
        margin-bottom: 4px;
        min-width: 0;
        width: auto;

        /* sit just above the mobile nav bar */
        top: auto;
        bottom: 96px;

        /* animation opens upward on mobile */
        transform-origin: bottom center;
        transform: translateY(-4px) scale(0.98);
    }

    .upload-dropdown-menu.open {
        transform: translateY(0) scale(1);
    }
}


/* ─────────────────────────────────────────────
   Upgrade Toast — Remix / Shuffle Upsell
───────────────────────────────────────────── */

.upgrade-toast{
    position:fixed;
    bottom:100px;
    left:50%;
    transform:translateX(-50%) translateY(20px);

    width:420px;
    z-index:200;

    display:flex;
    flex-direction:column;
    gap:14px;

    padding:20px;

    background:linear-gradient(180deg,var(--glass-drawer-from) -40%,var(--glass-drawer-to) 60%);
    border:1px solid var(--border-tertiary-color);
    border-radius:var(--border-radius-xl);

    backdrop-filter:blur(var(--glass-blur-lg));
    -webkit-backdrop-filter:blur(var(--glass-blur-lg));

    box-shadow:
        0 20px 32px var(--shadow-drop-sm),
        inset 0 1px 0 var(--shadow-inset-top);

    opacity:0;
    pointer-events:none;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.upgrade-toast.visible{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

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

.upgrade-toast-title{
    font-size:16px;
    font-weight:600;
    letter-spacing:-0.02em;
    color:var(--text-primary-color);
}

.upgrade-toast-text{
    font-size:13px;
    line-height:1.55;
    color:var(--text-secondary-color);
}

.upgrade-toast-btn{
    width:fit-content;
}


/* ── Hall of Fame/ Early Memebers Modal ────────────────────────────────────────────── */


.founding-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(10px);
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.founding-modal-overlay.open { opacity: 1; pointer-events: all; }

.founding-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 620px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    z-index: 501;
    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 32px 80px rgba(0,0,0,0.8), inset 0 1px 0 var(--shadow-inset-top);
    padding: 0px;
    opacity: 0;
    transform: translate(-50%, -46%);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.founding-modal.open { opacity: 1; transform: translate(-50%, -50%); pointer-events: all; }

.founding-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(0,0,0,0.4);
    border: none;
    color: white;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.founding-modal-media {
    padding: 8px;
    border-radius: var(--border-radius-lg);
}

.founding-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: calc(var(--border-radius-lg) - 4px);
    border: 1px solid var(--border-primary-color);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}

.founding-modal .founding-img {
    height: 220px;
}

.founding-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.founding-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-pro-color);
    margin-bottom: 8px;
}

.founding-headline {
    font-size: var(--font-size-xl);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-primary-color);
    margin: 0 0 8px;
    line-height: 1.25;
}

.founding-subtext {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    line-height: 1.5;
    margin: 0 0 20px;
}

.founding-modal-divider {
    height: 1px;
    background: var(--border-primary-color);
    margin-bottom: 16px;
}

.founding-modal .founding-members {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px 14px;
    margin: 0 0 20px;
}

.founding-modal .founding-member {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xsm);
    color: var(--text-secondary-color);
    line-height: 1.4;
    white-space: nowrap;
    overflow: visible;
    min-width: 0;
}


.founding-no {
    font-family: 'Geist Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 9px;
    color: var(--text-pro-color);
    min-width: 16px;
    flex-shrink: 0;
}

.founding-modal-cta {
    margin-top: 4px;
}

.founding-optout {
    font-size: 10.5px;
    color: var(--text-secondary-color);
    text-align: center;
    margin: 12px 0 0;
    line-height: 1.5;
}

.founding-optout a {
    color: var(--text-primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.founding-optout a:hover { color: var(--text-pro-color); }


/* ── Pro modal ────────────────────────────────────────────── */

.pro-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.pro-modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.pro-modal {
    width: 460px;
    border-radius: var(--border-radius-2xl);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-primary-color);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8),
                inset 0 1px 0 var(--shadow-inset-top);
    position: relative;
    transform: translateY(16px);
    transition: transform 0.3s ease;
    padding: 12px;
    gap: 20px;
}

.pro-modal::-webkit-scrollbar {
    display: none;
}

.pro-modal {
    scrollbar-width: none;
}



.pro-modal-overlay.open .pro-modal {
    transform: translateY(0);
}

.pro-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    z-index: 10;
    transition: all var(--transition-sm);
}

.pro-modal-close:hover {
    background: rgba(0,0,0,0.6);
    border-color: rgba(255,255,255,0.3);
}

.pro-modal-close i { font-size: 12px; }

.pro-modal-img {
    width: 100%;
    height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
}

.pro-modal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
}

.pro-modal-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.8) 30%,
        rgba(0,0,0,0.1) 60%,
        transparent 100%
    );
}

.pro-modal-img-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding: 20px;
    gap: 6px;
}


.pro-modal-title {
    font-size: var(--font-size-xl);
    font-weight: 500;
    color: white;
    /* max-width: 160px; */
    text-align: center;
    max-width: none;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}

.pro-badge {
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--border-radius-md);

    padding: 3px 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    width: fit-content;
}

.pro-modal-sub {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    line-height: 1.4;
    margin: 0;
}

.pro-modal-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
}

.pro-modal-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding-top: 4px;
}

.pro-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pro-feature-item i {
    font-size: 13px;
    color: var(--text-primary-color);
    flex-shrink: 0;
}

.pro-feature-item span {
    font-size: 11px;
    color: var(--text-secondary-color);
    line-height: 1.3;
}


.pro-founding-note {
    font-size: 11px;
    color: var(--text-tertiary-color);
    margin: 0;
    line-height: 1.5;
}

.pro-founding-highlight {
    color: var(--text-pro-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-style: dotted;
    text-decoration-color: var(--text-pro-color);
}

/* Tier grid */
.pro-tier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.pro-tier-card {
    border-radius: 16px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: all 0.4s ease;
    opacity: 1;
    filter: saturate(1);
    position: relative;
}

.pro-tier-card.active {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.155) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid transparent;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.35);
    opacity: 1;
    filter: none;
    /* border: 1px solid rgba(187, 187, 187, 0.342); */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pro-tier-card.sold-out {
    opacity: 0.55;
    filter: saturate(1);
    border-color: rgba(255, 255, 255, 0.05);
}

.pro-tier-card.up-next {
    opacity: 0.55;
    filter: saturate(1);
    border-color: rgba(255, 255, 255, 0.05);
}

.pro-tier-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: wrap;
}

.pro-tier-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-primary-color);
    font-weight: 700;
}

.pro-tier-card.active .pro-tier-label {
    color: var(--text-primary-color);
}

.pro-tier-sublabel {
    display: block;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.553);
    margin-top: 2px;
}

.pro-tier-pill {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-primary-color);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.266);
    border-radius: 5px;
    padding: 2px 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pro-tier-pill:empty {
    display: none;
}

.pro-tier-card.active .pro-tier-pill {
    display: none;
}

.pro-tier-price-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.pro-tier-price {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary-color);
    letter-spacing: -0.02em;
}

.pro-tier-card.active .pro-tier-price {
    color: var(--text-primary-color);
}

.pro-tier-card.sold-out .pro-tier-price {
    text-decoration: line-through;
}

.pro-tier-original {
    font-size: 15px;
    text-decoration: line-through;
    color: var(--text-secondary-color);
}

/* Tick bar */
.pro-tier-ticks {
    display: flex;
    /* grid-template-columns: repeat(25, 1fr); */
    gap: 1.5px;
    padding: 4px 0 2px;
}


.pro-tier-tick {
    height: 5px;
    border-radius: 1.5px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.3s ease;
    flex: 1 1 0;
    min-width: 0;
}

.pro-tier-tick.filled {
    background: var(--text-pro-color);
}

.pro-tier-tick.filled.last {
    background: #d4f040;
    box-shadow: 0 0 4px rgba(154, 208, 19, 0.7);
}

.pro-tier-card.sold-out .pro-tier-tick.filled {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

.pro-tier-spots {
    font-size: 9.5px;
    color: var(--text-secondary-color);
}

.pro-tier-card.active .pro-tier-spots {
    color: var(--text-pro-color);
    font-weight: 600;
}

/* Bottom summary row */
.pro-bottom-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.pro-bottom-text {
    font-size: 11.5px;
    color: var(--text-secondary-color);
    line-height: 1.6;
    font-weight: 400;
}

.pro-bottom-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-shrink: 0;
}

/* Footer note — sits flush at bottom, separated by a line */
.pro-modal-footer {
    margin: 4px -12px -12px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-primary-color);
    text-align: center;
    background: linear-gradient(120deg, rgba(38, 38, 38, 0.381) 0%, rgba(28, 28, 28, 0.8) 100%);
    /* border: 1px solid var(--border-primary-color); */
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8),
                inset 0 1px 0 var(--shadow-inset-top);
}

.pro-modal-footer p {
    font-size: 11px;
    color: var(--text-secondary-color);
    margin: 0;
    letter-spacing: 0.01em;
}


.pro-plan-price {
    font-size: var(--font-size-3xl);
    font-weight: 500;
    color: var(--text-primary-color);
}

.pro-plan-discounted {
    font-size: var(--font-size-lg);
    text-decoration: line-through;
    font-weight: 400;
    color: var(--text-secondary-color);
}

.pro-modal-cta {
    width: 100%;
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border: 1px solid var(--border-secondary-color);
    border-radius: var(--border-radius-2xl);
    padding: var(--padding-md) var(--padding-lg);
    font-size: var(--font-size-md);
    font-weight: 500;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: filter var(--transition-sm);
    /* margin-top: 8px; */
}

.pro-modal-cta:hover {
    filter: brightness(1.2);
}

.pro-modal-note {
    font-size: 10px;
    color: var(--text-tertiary-color);
    margin: 0;
    text-align: center;
    letter-spacing: 0.01em;
}


.pro-modal-signin-link {
    width: 100%;
    background: none;
    border: none;
    color: var(--text-tertiary-color);
    font-size: var(--font-size-sm);
    text-align: center;
    cursor: pointer;
    padding: 6px 0 0 0;
    letter-spacing: -0.01em;
    transition: color var(--transition-sm);
}

.pro-modal-signin-link:hover {
    color: var(--text-primary-color);
}


 /* founding member lists */


.founding-tooltip{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: var(--font-size-xsm);
    color: var(--text-brand-color);
}

.founding-tooltip i{
    font-size:13px;
    color:var(--text-secondary-color);
    transition:.2s;
}

.founding-tooltip:hover i{
    color:var(--text-primary-color);
}

.founding-tooltip-inline {
    position: relative;
    display: inline;
    cursor: pointer;
}

.founding-tooltip-inline .founding-popup {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    pointer-events: none;
    transition: 0.22s;
}

.founding-tooltip-inline:hover .founding-popup {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.founding-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -60%;
    width: 380px;
    max-width: calc(100vw - 32px);
    z-index: 600;
    background: linear-gradient(
        160deg,
        var(--glass-drawer-from) 0%,
        var(--glass-drawer-to) 100%
    );
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-lg);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    box-shadow: 0 24px 48px rgba(0,0,0,0.6),
                inset 0 1px 0 var(--shadow-inset-top);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.founding-tooltip-inline:hover .founding-popup,
.founding-tooltip:hover .founding-popup {
    opacity: 1;
    pointer-events: all;
}

.founding-img{

    width:100%;
    height:170px;

    object-fit:cover;

    display:block;
}

.founding-title{

    padding:14px 16px 4px;

    font-size:var(--font-size-sm);
    font-weight:600;

    color:var(--text-primary-color);
}

.founding-members {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-left: 14px;
}

.founding-member{
    padding: 2px;
    font-size:var(--font-size-xsm);
    line-height:1.55;
    color:var(--text-secondary-color);
    display: flex;
    align-items: center;
    gap: 4px;
}

.founding-no {
    font-family: 'Geist Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: var(--text-primary-color);
    min-width: 20px;
}

.founding-text{

    padding:12px 12px 16px 16px;
    font-size: var(--font-size-xxsm);
    line-height:1.55;
    color:var(--text-secondary-color);
}

.founding-text strong{
    color:var(--text-primary-color);
}





/* ─── Checkout loader ───────────────── */

#checkout-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.checkout-loader-card {
    width: 320px;
    text-align: center;

    padding: 28px;

    background:
        linear-gradient(
            180deg,
            var(--glass-drawer-from) -40%,
            var(--glass-drawer-to) 60%
        );

    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-xl);

    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));

    box-shadow:
        0 20px 32px var(--shadow-drop-sm),
        inset 0 1px 0 var(--shadow-inset-top);
}

.checkout-loader-card h3 {
    margin-top: 18px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-sm);
    color: var(--text-primary-color);
    letter-spacing: -0.02em;
}

.checkout-loader-card p {
    margin-top: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
}

/* Ditther dot loader */

.checkout-loader-dots {
    display: grid;
    grid-template-columns: repeat(3, 6px);
    grid-template-rows: repeat(3, 6px);
    gap: 4px;
    justify-content: center;
}

.checkout-loader-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-primary-color);
    animation: checkoutDotPulse .8s ease-in-out infinite;
}

.checkout-loader-dots span:nth-child(1) { animation-delay: 0ms; }
.checkout-loader-dots span:nth-child(2) { animation-delay: 100ms; }
.checkout-loader-dots span:nth-child(3) { animation-delay: 200ms; }
.checkout-loader-dots span:nth-child(4) { animation-delay: 300ms; }
.checkout-loader-dots span:nth-child(5) { animation-delay: 400ms; }
.checkout-loader-dots span:nth-child(6) { animation-delay: 300ms; }
.checkout-loader-dots span:nth-child(7) { animation-delay: 200ms; }
.checkout-loader-dots span:nth-child(8) { animation-delay: 100ms; }
.checkout-loader-dots span:nth-child(9) { animation-delay: 0ms; }

@keyframes checkoutDotPulse {
    0%,100% {
        opacity: .15;
        transform: scale(.7);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Welcome Pro modal ───────────────────────────────────── */
.welcome-pro-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.welcome-pro-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.welcome-pro-modal {
    width: 380px;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-primary-color);
    box-shadow: 0 32px 80px rgba(0,0,0,0.8),
                inset 0 1px 0 var(--shadow-inset-top);
    transform: translateY(16px);
    transition: transform 0.3s ease;
    padding: var(--padding-md);
}

.welcome-pro-overlay.open .welcome-pro-modal {
    transform: translateY(0);
}

.welcome-pro-img {
    width: 100%;
    height: 260px;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
}

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

.welcome-pro-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 100%);
}

.welcome-pro-img-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 40px;
    text-align: center;
}

.welcome-pro-logo {
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

.welcome-pro-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary-color);
    letter-spacing: -0.02em;
    margin: 0;
}

.welcome-pro-sub {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.65);
    margin: 0;
    line-height: 1.5;
}

.welcome-pro-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
}

.welcome-pro-section-label {
    font-size: var(--font-size-xsm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-secondary-color);
    margin: 0 0 4px;
}

.welcome-new-tag {
    background: none;
    color: var(--text-pro-color);
    font-weight: 600;
    font-size: var(--font-size-xsm);
    padding: 0;
    margin-right: 2px;
}


/* ── Locked background thumbnail ─────────────────────────── */


/* ── Locked individual thumb (free category, pro item) ────────────
   Shimmer gradient placeholder — no real image URL ever touches the DOM
   for free users. Inspect element reveals nothing useful.               */
 
   .bg-thumb-locked {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    cursor: pointer;
}

/* Dim the image itself so overlay can do the work */
.bg-thumb-locked img {
    filter: brightness(0.45) saturate(0.4);
    transition: filter 0.4s ease;
}

.bg-lock-pro-tag {
    height: 16px;
    width: auto;
    display: block;
    opacity: 1;
}
 
.bg-locked-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 40%,
        rgba(255, 255, 255, 0.02) 100%
    );
}
 
/* Gradient overlay — dark at bottom, transparent at top */
.bg-locked-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.65) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}
 
.bg-thumb-locked:hover img {
    filter: brightness(0.7) saturate(0.9);
}

.bg-thumb-locked:hover .bg-locked-overlay {
    background: linear-gradient(
        160deg,
        rgba(0, 0, 0, 0.0) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
}
 


/* ── Pro category lock screen (entire category locked) ─────────────
   Fills the whole grid area with a centered upgrade prompt.           */
 
   .bg-pro-lock-grid {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 16px 28px;
    gap: 0;
    min-height: 280px;
}
 

.bg-pro-lock-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
 
/* ── Stacked card container ─────────────────────────────── */
.bg-lock-cards {
    position: relative;
    width: 220px;
    height: 150px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

/* ── Individual cards ───────────────────────────────────── */
.bg-lock-card {
    position: absolute;
    width: 110px;
    height: 130px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    top: 0;
    pointer-events: none;
}

.bg-lock-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}
 

/* Left card — rotated back, behind */
.bg-lock-card-left {
    left: -8px;
    z-index: 1;
    transform: rotate(-12deg) scale(0.88) translateY(8px);
    transform-origin: bottom center;
}

/* Center card — straight, in front */
.bg-lock-card-center {
    left: 50%;
    transform: translateX(-50%) scale(1);
    z-index: 3;
    top: -8px;
}
 

/* Right card — rotated back, behind */
.bg-lock-card-right {
    right: -8px;
    z-index: 2;
    transform: rotate(12deg) scale(0.88) translateY(8px);
    transform-origin: bottom center;
}
 
/* ── Lock text ──────────────────────────────────────────── */
.bg-pro-lock-title {
    font-size: var(--font-size-md);
    font-weight: 400;
    color: var(--text-primary-color);
    padding: var(--padding-xsm);
    letter-spacing: -0.01em;
}
 


.bg-pro-lock-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    margin: 0 0 10px;
}
 
 
.bg-pro-lock-btn {
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-2xl);
    padding: var(--padding-sm) var(--padding-md);
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-sm);
    cursor: pointer;
    transition: filter var(--transition-sm);
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
}

.bg-pro-lock-btn:hover {
    filter: brightness(1.2);
} 




/* ── Pro modal slideshow ──────────────────────────────────── */

.pro-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.pro-slide.active {
    opacity: 1;
}

.pro-modal-img {
    position: relative;
}

.pro-slide-dots {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 5px;
    z-index: 5;
}

.pro-slide-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transition: background 0.3s ease;
}

.pro-slide-dot.active {
    background: white;
}


/* ── Auth modal ──────────────────────────────────────────────── */

.auth-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.auth-modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.auth-modal {
    width: 340px;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-primary-color);
    box-shadow: 0 32px 80px rgba(0,0,0,0.8),
                inset 0 1px 0 var(--shadow-inset-top);
    position: relative;
    transform: translateY(16px);
    transition: transform 0.3s ease;
}

.auth-modal-overlay.open .auth-modal {
    transform: translateY(0);
}

.auth-modal-img {
    width: 100%;
    height: 160px;
    position: relative;
    overflow: hidden;

}

.auth-modal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
}

.auth-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
}

.auth-modal-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

.auth-google-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: white;
    color: #1a1a1a;
    border: none;
    border-radius: var(--border-radius-2xl);
    padding: var(--padding-md) var(--padding-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: filter var(--transition-sm);
    letter-spacing: -0.01em;
}

.auth-google-btn:hover {
    filter: brightness(0.95);
}

.auth-modal-note {
    font-size: var(--font-size-xsm);
    color: var(--text-tertiary-color);
    text-align: center;
    margin: 0;
}

.auth-plan-status {
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    padding-bottom: var(--padding-md);
    border-bottom: 1px solid var(--border-primary-color);
}

.auth-plan-badge {
    font-size: var(--font-size-xsm);
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: var(--border-radius-sm);
}

.auth-plan-badge.free {
    background: var(--border-tertiary-color);
    color: var(--text-secondary-color);
    border: 1px solid var(--border-primary-color);
}

.auth-plan-badge.pro {
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border: 1px solid var(--border-secondary-color);
}

.auth-plan-email {
    font-size: var(--font-size-xsm);
    color: var(--text-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* ── Nav avatar button ───────────────────────────────────────── */

.btn-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all var(--transition-md);
    height: 40px;
    width: 40px;
}

.btn-avatar:hover .avatar-circle {
    box-shadow:
        0 0 0 3px var(--bg-primary-color),
        0 0 0 4.5px rgba(255, 255, 255, 0.8);
}

.avatar-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow:
        0 0 0 3px var(--bg-primary-color),
        0 0 0 4.5px rgba(255, 255, 255, 0.55);
}


/* ── Avatar dropdown ─────────────────────────────────────────── */

.avatar-dropdown {
    position: fixed;
    top: 52px;
    right: var(--padding-md);
    z-index: 300;
    width: 340px;
    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    box-shadow: 0 16px 48px rgba(0,0,0,0.6),
                inset 0 1px 0 var(--shadow-inset-top);
    padding: var(--padding-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.avatar-dropdown.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.avatar-dropdown-user {
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    padding: var(--padding-sm);
    padding-bottom: var(--padding-md);
}

.avatar-dropdown-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow:
        0 0 0 3px var(--bg-tertiary-color),
        0 0 0 4.5px rgba(255, 255, 255, 0.5);
}

.avatar-dropdown-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.avatar-dropdown-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-sm);
}

.avatar-dropdown-name {
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.02em;
}


.avatar-dropdown-email {
    font-size: 11px;
    line-height: 1.15;
    color: var(--text-tertiary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.avatar-pro-tag-img {
    height: 18px;
    width: auto;
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-start;
}

.avatar-dropdown-divider {
    height: 1px;
    background: var(--border-primary-color);
    margin: 8px 0;
}

.avatar-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    padding: 9px var(--padding-sm);
    border-radius: var(--border-radius-lg);
    background: none;
    border: none;
    color: var(--text-secondary-color);
    font-size: var(--font-size-sm);
    font-family: 'Geist', sans-serif;
    cursor: pointer;
    width: 100%;
    text-align: left;
    letter-spacing: -0.01em;
    transition: all var(--transition-sm);
}

.avatar-dropdown-item:hover {
    background: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    color: var(--text-primary-color);
    border-color: var(--border-primary-color);
}

.avatar-dropdown-item i {
    font-size: var(--font-size-md);
    flex-shrink: 0;
}

.avatar-dropdown-signout {
    color: var(--text-secondary-color);
}

.avatar-dropdown-signout:hover {
    background: none;
    color: #ff5c5c;
}

.avatar-dropdown-signout:hover i {
    color: #ff5c5c;
}

.avatar-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--padding-sm);
}

.avatar-picker-label {
    font-size: var(--font-size-xsm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary-color);
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

.avatar-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    box-shadow:
        0 0 0 2px var(--bg-tertiary-color),
        0 0 0 3px rgba(255, 255, 255, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.avatar-swatch:hover {
    transform: scale(1.1);
}

.avatar-swatch.selected {
    box-shadow:
        0 0 0 2px var(--bg-tertiary-color),
        0 0 0 4px rgba(255, 255, 255, 0.9);
}


/* ── Save preset name modal ──────────────────────────────────── */

.preset-name-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.preset-name-modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.preset-name-modal {
    width: 300px;
    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-xl);
    padding: var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gutter-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    transform: translateY(12px);
    transition: transform 0.2s ease;
}

.preset-name-modal-overlay.open .preset-name-modal {
    transform: translateY(0);
}

.preset-name-modal-title {
    font-size: var(--font-size-md);
    color: var(--text-primary-color);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0;
}

.preset-name-input {
    width: 100%;
    background: var(--slider-track-color-left);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-lg);
    padding: var(--padding-sm) var(--padding-md);
    color: var(--text-primary-color);
    font-size: var(--font-size-sm);
    font-family: 'Geist', sans-serif;
    outline: none;
    transition: border-color var(--transition-sm);
}

.preset-name-input:focus {
    border-color: var(--border-secondary-color);
}

.preset-name-modal-actions {
    display: flex;
    gap: var(--gutter-md);
}

.preset-name-modal-actions .btn {
    flex: 1;
    justify-content: center;
}

.preset-name-save-btn {
    flex: 1;
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border: 1px solid var(--border-secondary-color);
    border-radius: var(--border-radius-2xl);
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: filter var(--transition-sm);
}

.preset-name-save-btn:hover {
    filter: brightness(1.15);
}




/* ──---------------------─────────────────────────────────────── */
/* ── Delete Preset Modal ─────────────────────────────────────── */
/* ──---------------------─────────────────────────────────────── */

/* Fullscreen overlay — blocks interaction, blurs background */
.delete-preset-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Visible state */
.delete-preset-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* Modal card — matches app glass style */
.delete-preset-modal {
    background: linear-gradient(180deg, var(--glass-drawer-from) -40%, var(--glass-drawer-to) 50%);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-xl);
    padding: 24px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    backdrop-filter: blur(var(--glass-blur-sm));
}

/* Modal heading */
.delete-preset-title {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-primary-color);
    margin: 0;
}

/* Preset name description line */
#delete-preset-name-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
}

/* Button row — right aligned */
.delete-preset-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Cancel — neutral glass button */
.delete-preset-cancel {
    background: linear-gradient(180deg, var(--glass-from) 0%, var(--glass-to) 80%);
    border: 1px solid var(--border-primary-color);
    color: var(--text-secondary-color);
    border-radius: var(--border-radius-lg);
    padding: 7px 16px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition-sm);
}

.delete-preset-cancel:hover {
    color: var(--text-primary-color);
    border-color: var(--border-secondary-color);
}

/* Delete — red destructive button */
.delete-preset-confirm {
    background: rgba(200,50,50,0.12);
    border: 1px solid rgba(200,50,50,0.3);
    color: #ff6b6b;
    border-radius: var(--border-radius-lg);
    padding: 7px 16px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition-sm);
}

.delete-preset-confirm:hover {
    background: rgba(200,50,50,0.22);
}


/* ──---------------------─────────────────────────────────────── */



/* ── Share modal ──────────────────────────────────────────── */

.share-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.share-modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.share-modal {
    width: 360px;
    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-primary-color);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8),
                inset 0 1px 0 var(--shadow-inset-top);
    overflow: hidden;
    transform: translateY(16px);
    transition: transform 0.3s ease;
}

.share-modal-overlay.open .share-modal {
    transform: translateY(0);
}

.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-md);
}

.share-modal-title {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-primary-color);
    letter-spacing: -0.02em;
}

.share-modal-close {
    background: none;
    border: 1px solid var(--border-primary-color);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary-color);
    transition: all var(--transition-sm);
}

.share-modal-close:hover {
    color: var(--text-primary-color);
    border-color: var(--border-secondary-color);
}

.share-modal-close i { font-size: 12px; }

.share-preview {
    width: 100%;
    padding: 0 var(--padding-lg);
    box-sizing: border-box;
    line-height: 0;
    display: flex;
}

.share-preview-canvas {
    display: block;
    width: 100%;
    height: auto;
}

.share-preview-wrap {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    width: 100%;
    line-height: 0;
}

.pro-tag {
    height: 12px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.share-options {
    padding: var(--padding-md) var(--padding-lg) var(--padding-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.share-actions-row {
    display: flex;
    gap: var(--gutter-md);
    padding: var(--padding-lg);
}

.share-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-md);
    padding: var(--padding-md);
    border-radius: var(--border-radius-xl);
    background: linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    border: 1px solid var(--border-primary-color);
    color: var(--text-primary-color);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 var(--shadow-inset-top),
                inset 0 -1px 0 var(--shadow-inset-bottom);
    transition: all var(--transition-md);
}

.share-action-btn:hover {
    background: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color: var(--border-secondary-color);
}

.share-action-btn i {
    font-size: var(--font-size-md);
}

.share-action-btn-x {
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border-color: var(--text-primary-color);
}

.share-action-btn-x:hover {
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    border-color: var(--text-primary-color);
    filter: brightness(1.15);
    color: var(--bg-primary-color);
}

.share-option-btn {
    display: flex;
    align-items: center;
    gap: var(--gutter-lg);
    padding: 10px var(--padding-md);
    border-radius: var(--border-radius-lg);
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-sm);
    text-align: left;
    width: 100%;
}

.share-option-btn:hover {
    background: linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    border-color: var(--border-primary-color);
}

.share-option-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border: 1px solid var(--border-primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary-color);
    font-size: 16px;
    flex-shrink: 0;
}

.share-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.share-option-label {
    font-size: var(--font-size-sm);
    color: var(--text-primary-color);
    font-weight: 500;
}

.share-option-desc {
    font-size: var(--font-size-xsm);
    color: var(--text-tertiary-color);
}


/* ──------------------─ Tip toast ──---------------------─ */

.tip-toast {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 122;
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
    background: linear-gradient(180deg, var(--glass-drawer-from) -40%, var(--glass-drawer-to) 60%);
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    box-shadow: 0 20px 32px var(--shadow-drop-sm),
                inset 0 1px 0 var(--shadow-inset-top);
    padding: var(--padding-md) var(--padding-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-sm);
    color: var(--text-secondary-color);
    white-space: nowrap;
    letter-spacing: -0.01em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;

}

.tip-toast.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.tip-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
}

.tip-close {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    margin-left: var(--gutter-sm);
    opacity: 0.6;
    transition: opacity var(--transition-sm);
}

.tip-close:hover {
    opacity: 1;
}

.tip-close i {
    font-size: var(--font-size-sm)
}


/* ─── Toast dot animation — soft breathe ─── */
.toast-dots span {
    animation: toastDotPulse 1s ease-in-out infinite;
}

.toast-dots span:nth-child(1),
.toast-dots span:nth-child(3),
.toast-dots span:nth-child(7),
.toast-dots span:nth-child(9) { animation-delay: 0ms; }

.toast-dots span:nth-child(2),
.toast-dots span:nth-child(4),
.toast-dots span:nth-child(6),
.toast-dots span:nth-child(8) { animation-delay: 300ms; }

.toast-dots span:nth-child(5) { animation-delay: 600ms; }

@keyframes toastDotPulse {
    0%, 100% { opacity: 0.1;  transform: scale(0.5); }
    50%       { opacity: 1;    transform: scale(1.1); }
}


/* // ─── Disable transitions during window resize to prevent drawer glitch ─── */

.resize-transition-stopper * {
    transition: none !important;
}


/* seo content --- footer-- */

.seo-content {
    padding: 40px;
    font-size: 13px;
    color: var(--text-tertiary-color);
    opacity: 0.4;
    pointer-events: none;
  }

/* ── Video Controls Overlay ─────────────────────────────── */

#clip-controls {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var( --glass-drawer-to);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 8px;
    z-index: 40;
    pointer-events: all;
}

.clip-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.1);
    color: var(--text-primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.clip-btn:hover {
    background: rgba(255,255,255,0.2);
}

.clip-btn i {
    font-size: 14px;
}


#clip-time {
    font-size: 11px;
    color: var(--text-secondary-color);
    min-width: 32px;
    font-variant-numeric: tabular-nums;
    font-family: 'Geist Mono', monospace;
}

.clip-track {
    position: relative;
    width: 120px;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 4px;
}

.clip-track-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--text-primary-color);
    border-radius: 999px;
    pointer-events: none;
}

.clip-track-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    transition: transform 0.1s;
}

.clip-track:hover .clip-track-thumb {
    transform: translate(-50%, -50%) scale(1.3);
}


/* ══════════════════════════════════════════════════════════════
   WHAT'S NEW MODAL — two-column layout
══════════════════════════════════════════════════════════════ */

.whats-new {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.35s ease;
    z-index: 300;
    width: 840px;
    max-width: calc(100vw - 48px);
}



.whats-new.visible {
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: all;
}

.whats-new-inner {
    display: flex;
    flex-direction: row;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-primary-color);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8),
                inset 0 1px 0 var(--shadow-inset-top);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
}

/* ── Left image panel ── */

.whats-new-img {
    width: 46%;
    flex-shrink: 0;
    position: relative;
    min-height: 480px;
    overflow: hidden;
}

.whats-new-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.whats-new-img-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.5) 20%,
            rgba(0, 0, 0, 0.0) 40%,
            rgba(0, 0, 0, 0.0) 70%,
            rgba(0, 0, 0, 0.1) 80%,
            rgba(0, 0, 0, 0.55) 100%
        );
        /* linear-gradient(
            90deg,
            transparent 60%,
            var(--glass-drawer-to) 100%
        ); */
    pointer-events: none;
}

.whats-new-dots {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    gap: 5px;
    z-index: 5;
}

.whats-new-version-badge {
    position: absolute;
    top: 32px;
    left: 32px;
    font-family: 'Geist Mono', monospace;
    background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
    color: var(--bg-primary-color);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--border-radius-lg);
    padding: 3px 8px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    width: fit-content;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.whats-new-img-bottom {
    position: absolute;
    bottom: 32px;
    left: 32px;
    right: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.whats-new-img-title {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-primary-color);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 4px;
}

.whats-new-img-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-primary-color);
    letter-spacing: -0.01em;
    line-height: 1.5;
    margin-bottom: 4px;
}

.whats-new-img-meta {
    font-family: 'Geist Mono', monospace;
    font-size: var(--font-size-xxsm);
    color: var(--text-brand-color);
    letter-spacing: 0.02em;
}

/* ── Right body panel ── */

.whats-new-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-lg);
    gap: 0;
    overflow: hidden;
    min-width: 0;
}

.whats-new-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gutter-md);
    margin-bottom: var(--padding-md);
    flex-shrink: 0;
}

.whats-new-title {
    font-family: 'Geist', sans-serif;
    font-size: var(--font-size-xl);
    font-weight: 400;
    color: var(--text-primary-color);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.whats-new-divider {
    height: 1px;
    background: var(--border-primary-color);
    margin-bottom: var(--padding-lg);
    flex-shrink: 0;
}

.whats-new-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    margin-bottom: var(--padding-lg);
}

.whats-new-items::-webkit-scrollbar {
    display: none;
}

.whats-new-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    line-height: 1.4;
    letter-spacing: -0.01em;
    padding: 10px 0;
}

.whats-new-item:last-child {
    /* remove this rule entirely or leave empty */
}

.whats-new-item:last-child {
    border-bottom: none;
}

/* .whats-new-item::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-brand-color);
    flex-shrink: 0;
} */

/* ── Footer ── */

.whats-new-footer {
    display: flex;
    align-items: center;
    padding-top: var(--padding-md);
    border-top: 1px solid var(--border-primary-color);
    flex-shrink: 0;
}

.whats-new-link {
    font-family: 'Geist Mono', monospace;
    font-size: var(--font-size-xxsm);
    color: var(--text-secondary-color);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color var(--transition-sm);
    cursor: pointer;
}

.whats-new-link:hover {
    color: var(--text-brand-color);
}

.whats-new-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-primary-color);
    background: linear-gradient(180deg, var(--glass-bg-from) 0%, var(--glass-bg-to) 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary-color);
    box-shadow: inset 0 1px 0 var(--shadow-inset-top),
                inset 0 -1px 0 var(--shadow-inset-bottom);
    transition: all var(--transition-sm);
    flex-shrink: 0;
}

.whats-new-close:hover {
    background: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    border-color: var(--border-secondary-color);
    color: var(--text-primary-color);
}

.whats-new-close i {
    font-size: 11px;
}

@media (max-width: 1024px) {
    .whats-new {
        display: none;
    }
}


.nav-whatsnew-btn {
    height: 36px;
    padding: 0 var(--padding-sm);
    border-radius: var(--border-radius-2xl);
    font-size: var(--font-size-sm);
    color: var(--text-secondary-color);
    gap: 4px;
    background: none;
    border: none;
    box-shadow: none;
}

.nav-whatsnew-btn:hover {
    color: var(--text-brand-color);
    background: none;
    border: none;
    box-shadow: none;
}


#whats-new-overlay {
    z-index: 299;
    transition: opacity 0.3s ease;
}



/* ══════════════════════════════════════════════════════════════
   PRESET STEPPER ROW — arrows + dropdown
══════════════════════════════════════════════════════════════ */

.preset-stepper-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.preset-stepper-row .custom-dropdown {
    flex: 1;
    min-width: 0;
}

.preset-step-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--slider-track-color-left);
    border: none;
    border-radius: var(--border-radius-md);
    color: var(--text-secondary-color);
    cursor: pointer;
    font-size: 11px;
    transition: all var(--transition-sm);
}

.preset-step-btn:hover {
    background: linear-gradient(180deg, var(--glass-bg-hover-from) 0%, var(--glass-bg-hover-to) 60%);
    color: var(--text-primary-color);
    filter: brightness(1.6);
}

.preset-step-btn:active {
    transform: scale(0.92);
}


#preset-dropdown .custom-dropdown-menu {
    top: calc(100% + 6px);
    bottom: auto;
    transform-origin: top center;
    left: calc(-28px - 8px);
    right: calc(-28px - 8px);
    width: auto;
    max-height: 200px;

}

/* remove the ::after entirely */
#preset-dropdown .custom-dropdown-menu::after {
    display: none;
}

#char-style-dropdown .custom-dropdown-menu {
    top: calc(100% + 6px);
    bottom: auto;
    transform-origin: top center;
}

#preset-dropdown .custom-dropdown-value {
    text-align: left;
    flex:auto;
    padding-left: 0;
}

/* ── Custom export dropdowns ─────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   CUSTOM DROPDOWNS — unified styling, all open upward
══════════════════════════════════════════════════════════════ */

.custom-dropdown {
    position: relative;
    width: 100%;
}

.custom-dropdown-trigger {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    background: var(--slider-track-color-left);
    border: none;
    border-radius: var(--border-radius-md);
    padding: 0 10px;
    cursor: pointer;
    font-size: var(--font-size-xsm);
    font-family: 'Geist', sans-serif;
    gap: var(--gutter-md);
    transition: all var(--transition-sm);
}

.custom-dropdown-trigger:hover {
    filter: brightness(1.6);
    transform: scale(1.02);
}

.custom-dropdown-label {
    color: var(--text-secondary-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.custom-dropdown-value {
    flex: 1;
    text-align: right;
    color: var(--text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 4px;
}

.custom-dropdown-trigger i {
    font-size: 10px;
    color: var(--text-secondary-color);
    flex-shrink: 0;
    transition: transform var(--transition-sm);
}

.custom-dropdown.open .custom-dropdown-trigger i {
    transform: rotate(180deg);
}

.custom-dropdown.dropup .custom-dropdown-menu {
    bottom: calc(100% + 6px);
    top: auto;
    transform-origin: bottom center;
}

/* ── Menu — always opens upward, scrollable ── */

/* ── Menu — always opens downward, scrollable ── */

.custom-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: 0;
    z-index: 200;
    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-lg);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));

    /* box-shadow: 0 16px 48px rgba(0,0,0,0.6),
    inset 0 1px 0 var(--shadow-inset-top);   */

    /* -----changed box shadow from dark shadows to light shadows better glass effect----- */
    box-shadow: 0 24px 24px rgba(0,0,0,0.1),
                inset 0 1px 0 var(--shadow-inset-top);
    padding: var(--padding-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: none;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.custom-dropdown-menu::-webkit-scrollbar {
    display: none;
}

.custom-dropdown.open .custom-dropdown-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* ── Items ── */

.custom-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px var(--padding-sm);
    border-radius: var(--border-radius-md);
    background: none;
    border: none;
    color: var(--text-secondary-color);
    font-size: var(--font-size-xsm);
    font-family: 'Geist', sans-serif;
    cursor: pointer;
    text-align: left;
    letter-spacing: -0.01em;
    transition: all var(--transition-sm);
}

.custom-dropdown-item:hover {
    background: var(--glass-bg-hover-to);
    color: var(--text-primary-color);
    border-radius: var(--border-radius-md);
}

.custom-dropdown-item.active {
    color: var(--text-primary-color);
}

.custom-dropdown-item .pro-tag {
    height: 12px;
    width: auto;
}


/* ------Export-progress------ */

.export-progress{

    position:fixed;

    left:50%;
    bottom:80px;

    transform:translateX(-50%) translateY(16px);

    width:320px;

    background:linear-gradient(
        160deg,
        var(--glass-drawer-from) 0%,
        var(--glass-drawer-to) 100%
    );

    border:1px solid var(--border-tertiary-color);

    border-radius:var(--border-radius-lg);

    backdrop-filter:blur(var(--glass-blur-lg));
    -webkit-backdrop-filter:blur(var(--glass-blur-lg));

    box-shadow:
        0 24px 24px rgba(0,0,0,.12),
        inset 0 1px 0 var(--shadow-inset-top);

    padding:14px 16px;

    display:flex;
    flex-direction:column;
    gap:12px;

    opacity:0;
    pointer-events:none;

    transition:
        opacity .25s,
        transform .25s;

    z-index:900;
}

.export-progress.visible{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}

.export-progress-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.export-progress-title{

    font-size:13px;

    font-weight:500;

    color:var(--text-primary-color);

}

.export-progress-percent{

    font-size:12px;

    color:var(--text-secondary-color);

}

.export-progress-bar{

    width:100%;

    height:6px;

    background:rgba(255,255,255,.08);

    border-radius:999px;

    overflow:hidden;

}

.export-progress-fill{

    width:0%;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.95),
        rgba(255,255,255,.7)
    );

    transition:width .15s linear;

}

.export-progress-details{

    font-size:12px;

    color:var(--text-secondary-color);

}

/* ── Duotone color mode (Halftone only, for now) ────────────── */

/* style.css — append */
.duotone-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
}

.duotone-toggle-label {
    font-size: var(--font-size-xsm);
    color: var(--text-secondary-color);
}


.duotone-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
}

.duotone-color-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    background: var(--slider-track-color-left);
    border-radius: var(--border-radius-md);
    padding: 0 12px;
}

.duotone-color-field-pair {
    display: flex;
    align-items: center;
    gap: 10px;
}
.duotone-color-field-pair span {
    font-size: var(--font-size-xsm);
    color: var(--text-secondary-color);
}

.duotone-color-field input[type="color"] {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 0;
    cursor: pointer;
    background: none;
}

.duotone-color-field input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: var(--border-radius-sm);
}

.duotone-color-field input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: var(--border-radius-sm);
}

/* .filter-disabled { opacity: 0.35; pointer-events: none; } */

.duotone-presets-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    width: 100%;
    background: var(--slider-track-color-left);
    border-radius: var(--border-radius-md);
    padding: 8px;
}
.colorpicker-swatch {
    width: 28px;
    height: 22px;
    border-radius: var(--border-radius-sm);
    border: none;
    box-shadow: inset 0 1px 0 var(--shadow-inset-top),
                inset 0 -1px 2px var(--shadow-inset-bottom),
                0 1px 3px var(--shadow-drop-sm);
    flex-shrink: 0;
}

.duotone-preset-chip {
    width: 28px;
    height: 22px;
    border-radius: var(--border-radius-sm);
    border: none;
    box-shadow: inset 0 1px 0 var(--shadow-inset-top),
                inset 0 -1px 2px var(--shadow-inset-bottom),
                0 1px 3px var(--shadow-drop-sm);
    cursor: pointer;
    padding: 0;
    transition: transform var(--transition-sm), box-shadow var(--transition-sm);
}
.duotone-preset-chip:hover {
    transform: scale(1.08);
    box-shadow: inset 0 1px 0 var(--shadow-inset-top),
                inset 0 -1px 2px var(--shadow-inset-bottom),
                0 2px 8px var(--shadow-drop-sm);
}



/* ════════════════════════════════════════════════════════════
   CUSTOM COLOR PICKER POPUP
   ════════════════════════════════════════════════════════════ */

   .colorpicker-popup {
    position: fixed;
    width: 220px;
    z-index: 500;
    background: linear-gradient(160deg, var(--glass-drawer-from) 0%, var(--glass-drawer-to) 100%);
    border: 1px solid var(--border-tertiary-color);
    border-radius: var(--border-radius-lg);
    backdrop-filter: blur(var(--glass-blur-lg));
    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
    box-shadow: 0 8px 24px rgba(0,0,0,0.5),
                inset 0 1px 0 var(--shadow-inset-top);
    padding: var(--padding-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top left;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.colorpicker-popup.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.colorpicker-sv {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: var(--border-radius-md);
    cursor: crosshair;
    touch-action: none;
    overflow: hidden;
}

.colorpicker-sv-white {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}

.colorpicker-sv-black {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000, rgba(0,0,0,0));
}

.colorpicker-sv-thumb {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.colorpicker-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.colorpicker-hue {
    position: relative;
    flex: 1;
    height: 14px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    touch-action: none;
    background: linear-gradient(to right,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
        #00f 67%, #f0f 83%, #f00 100%);
}

.colorpicker-hue-thumb {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%);
    background: transparent;
    pointer-events: none;
}

.colorpicker-preview {
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-tertiary-color);
    flex-shrink: 0;
}

.colorpicker-fields {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 6px;
}

.colorpicker-hex,
.colorpicker-rgb {
    width: 100%;
    height: 28px;
    background: var(--slider-track-color-left);
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--text-primary-color);
    font-size: var(--font-size-xsm);
    font-family: 'Geist', sans-serif;
    text-align: center;
    padding: 0 4px;
}

.colorpicker-rgb::-webkit-inner-spin-button,
.colorpicker-rgb::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.colorpicker-labels {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 6px;
    margin-top: -4px;
}

.colorpicker-labels span {
    font-size: 10px;
    color: var(--text-secondary-color);
    text-align: center;
}




/* //----------------------Tablet and mobile responsiveness---------------------// */


@media (max-width: 1024px) {

    main {
        height: auto;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
    }

    main section {
        flex-direction: column;
        overflow: visible;
        padding: var(--padding-sm);
        gap: var(--gutter-sm);
        padding-bottom: 100px;
    }

    main section .left {
        width: 100%;
        min-height: 320px;
    }

    main section .bottom {
        min-height: 280px;
        max-height: none;
        height: 40vh;
        aspect-ratio: unset;
        border-radius: var(--border-radius-xl);
    }

    canvas.image-canvas {
        max-height: 65vh;
    }

    /* hide filters panel — desktop only */
    .filters-panel {
        display: none;
    }

    /* hide inline shuffle/remix — floating bar handles it */
    .canvas-bar {
        display: flex;
        margin-bottom: 10px;
    }
    
    /* hide shuffle and remix from floating bar on mobile — inline buttons handle it */
    #inspire-btn-mobile,
    #remix-btn-mobile {
        display: none;
    }
    
    .floating-divider:first-of-type,
    .floating-divider:last-of-type {
        display: none;
    }


    .floating-bar .btn-sec span,
.floating-bar .btn-sec .btn-text {
    display: none;
}

.floating-icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    font-size: var(--font-size-md);
}

.floating-bar .btn-sec {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    font-size: 0;
}

.floating-bar .btn-sec i,
.floating-bar .btn-sec .btn-dots {
    font-size: var(--font-size-md);
}

main section .right {
    width: 100%;
    flex-shrink: unset;
    overflow-y: visible;
    /* padding-bottom: 80px; */
}

.right-card {
    width: 100%;
    flex-shrink: 0;
}

.right-panel-unified {
    overflow: visible;
    max-height: none;
    display: block;
    flex-shrink: 0;
}

.right-panel-scroll {
    overflow-y: visible;
    display: block;
}

    nav {
        flex-wrap: wrap;
        gap: var(--gutter-md);
        padding: var(--padding-sm);
    }

    nav .btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    nav .btn i {
        font-size: 14px;
    }

    nav .btn-primary {
        padding: 6px 10px;
        font-size: 12px;
    }

    nav .btn-primary i {
        font-size: 14px;
    }

    main section .bottom .placeholder .btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    main section .bottom .placeholder .btn i {
        font-size: 14px;
    }

    .nav-left {
        order: 1;
        flex-shrink: 0;
        min-width: unset;
    }

    .nav-right {
        order: 2;
        flex-shrink: 0;
        min-width: unset;
    }


    


    .nav-centre {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: unset;
        width: 100%;
        transform: none;
        justify-content: space-around;
        align-items: center;
        padding: 12px 16px 28px 16px;
        border-top: 1px solid var(--border-primary-color);
        margin: 0;
        z-index: 99;
        background: var(--bg-primary-color);
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        gap: 0;
    }
    
    .nav-centre .btn-sec {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 10px;
        border: none;
        background: none;
        padding: 0 8px;
        color: var(--text-secondary-color);
        height: auto;
    }
    
    .nav-centre .btn-sec i {
        font-size: 20px;
    }
    
    .nav-centre .btn-icon-pill {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(180deg, var(--thickglass-bg-from) 0%, var(--thickglass-bg-to) 60%);
        color: var(--bg-primary-color);
        font-size: 24px;
        margin-left: 0;
        margin-right: 0;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        transform: none;
        border: 3px solid var(--bg-primary-color);
    }


    .floating-bar {
        display: none !important;
    }
    
    main section {
        padding-bottom: 100px;
    }
    
  

    /* hide what's new on mobile — saves nav space */
    .nav-whatsnew-btn {
        display: none;
    }

    /* upgrade button smaller on mobile */
    .btn-upgrade {
        padding: 0 var(--padding-sm);
        font-size: var(--font-size-xsm);
        height: 32px;
    }


    .tip-toast {
        display: none !important;
    }

/* export actions stack vertically */
.export-actions {
    flex-direction: column;
}

.nav-export-panel {
    left: 16px;
    right: 16px;
    width: auto;
}
    /* shuffling animation */
    #inspire-btn-mobile.shuffling .btn-dots span {
        animation: dotShuffle 0.4s ease-in-out infinite;
    }

    #inspire-btn-mobile.shuffling .btn-dots span:nth-child(1) { animation-delay: 0.0s; }
    #inspire-btn-mobile.shuffling .btn-dots span:nth-child(2) { animation-delay: 0.1s; }
    #inspire-btn-mobile.shuffling .btn-dots span:nth-child(3) { animation-delay: 0.2s; }
    #inspire-btn-mobile.shuffling .btn-dots span:nth-child(4) { animation-delay: 0.3s; }
    #inspire-btn-mobile.shuffling .btn-dots span:nth-child(5) { animation-delay: 0.4s; }
    #inspire-btn-mobile.shuffling .btn-dots span:nth-child(6) { animation-delay: 0.3s; }
    #inspire-btn-mobile.shuffling .btn-dots span:nth-child(7) { animation-delay: 0.2s; }
    #inspire-btn-mobile.shuffling .btn-dots span:nth-child(8) { animation-delay: 0.1s; }
    #inspire-btn-mobile.shuffling .btn-dots span:nth-child(9) { animation-delay: 0.0s; }

    @keyframes dotShuffle {
        0%, 100% { opacity: 0.15; transform: scale(0.6); }
        50%       { opacity: 1;    transform: scale(1.1); }
    }

    .about-drawer {
        top: unset;
        left: var(--padding-xsm);
        right: var(--padding-xsm);
        bottom: var(--padding-xsm);
        padding: var(--padding-lg) var(--padding-lg) 0 var(--padding-lg);
        width: auto;
        height: auto;
        transform: translateY(calc(100% + 32px));
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        border-radius: var(--border-radius-xl);
        gap: var(--gutter-lg);
    }

    .about-drawer.open {
        transform: translateY(0);
    }

    .about-link {
        padding-bottom: 0;
    }

    .about-footer {
        padding: 0 0 var(--padding-xl) 0;
    }

    .drawer {
        height: 75vh;
        padding: var(--padding-lg) var(--padding-lg) 0 var(--padding-lg);
        gap: var(--gutter-xl);
    }

    .whats-new {
        display: none;
    }

    .bg-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .bg-thumb {
        aspect-ratio: 3 / 4;
    }

    .bg-label {
        font-size: 11px;
    }
}