/**
 * Artorizer Dashboard - Custom Styles
 * Used with Tailwind CSS CDN
 * This file contains ONLY custom styles that Tailwind cannot provide
 */

/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
    /* Dashboard font family */
    --dashboard-font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Sidebar CSS variables */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Eleven layout variables */
    --eleven-sidebar-width: 16rem;
    --eleven-sidebar-collapsed: 0;
    --eleven-player-height: 0rem;
    --eleven-header-height: 4rem;
    --eleven-banner-height: 0rem;
    --eleven-footer-height: 0rem;

    /* Critical viewport height variable */
    --h-screen-dvh: 100dvh;

    /* Gray alpha series */
    --gray-alpha-50: var(--lighten-50);
    --gray-alpha-100: var(--lighten-100);
    --gray-alpha-150: hsl(240, 5%, 90%);
    --gray-alpha-200: hsl(240, 5%, 88%);
    --gray-alpha-300: hsl(240, 5%, 82%);
    --gray-alpha-400: hsl(240, 5%, 70%);
    --gray-alpha-500: hsl(240, 5%, 50%);
    --gray-alpha-950: hsl(240, 5%, 10%);
}

/* ============================================
   BASE STYLES
   ============================================ */

body {
    font-family: var(--dashboard-font-family);
}

/* Ensure all elements use Inter font */
* {
    font-family: var(--dashboard-font-family) !important;
}

/* Ensure overflow is visible */
html, body {
    overflow: visible !important;
}

/* Focus styles */
input:focus,
textarea:focus,
select:focus,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: hsl(240, 5%, 26%) !important;
}

input:hover,
textarea:hover,
select:hover {
    border-color: hsl(0, 0%, 82%) !important;
}

/* ============================================
   STACK & HSTACK UTILITIES
   (Tailwind doesn't have these exact classes)
   ============================================ */

.stack {
    display: flex;
    flex-direction: column;
}

.hstack {
    display: flex;
    flex-direction: row;
}

/* ============================================
   CENTER UTILITY (Critical - used throughout sidebar)
   ============================================ */

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ============================================
   GROUP HOVER & SIDEBAR STATE UTILITIES
   (Complex selectors that Tailwind CDN might miss)
   ============================================ */

/* Sidebar expansion states - when aria-expanded is true on sidebar */
.group\/sidebar[aria-expanded="true"] .group-aria-expanded\/sidebar\:opacity-100 {
    opacity: 1;
}

.group\/sidebar[aria-expanded="true"]:hover .group-aria-expanded\/sidebar\:group-hover\/sidebar\:opacity-100 {
    opacity: 1;
}

.group\/sidebar[aria-expanded="true"] .group\/header-logo:focus-within .group-aria-expanded\/sidebar\:group-focus-within\/header-logo\:opacity-100 {
    opacity: 1;
}

/* Main nav item expansion states */
.group-aria-expanded\/main-nav-item:bg-gray-alpha-100,
.group-aria-expanded\/main-nav-item:text-gray-alpha-950 {
    background-color: hsl(240, 5%, 96%);
    color: hsl(240, 5%, 10%);
}

/* Sidebar text visibility on expansion */
.group-aria-expanded\/sidebar:opacity-100,
.group-aria-expanded\/sidebar .opacity-100 {
    opacity: 1;
}

/* Header logo group states */
.group-aria-expanded\/sidebar:group-focus-within\/header-logo:opacity-100,
.group-aria-expanded\/sidebar .group-focus-within\/header-logo {
    opacity: 1;
}

/* Translate transitions for sidebar elements */
.group-aria-expanded\/sidebar:translate-x-2,
.group-aria-expanded\/sidebar .translate-x-2 {
    transform: translateX(0.5rem);
}

.group-aria-expanded\/sidebar:translate-x-0,
.group-aria-expanded\/sidebar .translate-x-0 {
    transform: translateX(0);
}

/* Flex direction changes on sidebar expand */
.group-aria-expanded\/sidebar:justify-start,
.group-aria-expanded\/sidebar .justify-start {
    justify-content: flex-start;
}

/* Padding utilities for sidebar expansion */
.px-1\.5, .px-1\\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.group-aria-expanded\/sidebar:px-1\.5,
.group-aria-expanded\/sidebar .px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

/* Min-width utility for expanded sidebar */
.min-w-36 {
    min-width: 9rem;
}

/* ============================================
   SPECIFIC SIDEBAR ELEMENT STYLING
   (Complex selectors that need explicit CSS)
   ============================================ */

/* Platform switcher button styling */
.w-\[calc\(var\(--eleven-sidebar-width\)-1\.8125rem\)\] {
    width: calc(var(--eleven-sidebar-width) - 1.8125rem);
}

.h-\[18px\] {
    height: 18px;
}

.w-\[109\.125px\] {
    width: 109.125px;
}

.rounded-\[10px\] {
    border-radius: 10px;
}

.rounded-\[14px\] {
    border-radius: 14px;
}

.rounded-\[16px\] {
    border-radius: 16px;
}

/* Padding utilities */
.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.pt-0\.5 {
    padding-top: 0.125rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pb-1\.5 {
    padding-bottom: 0.375rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-0\.5 {
    margin-right: 0.125rem;
}

.gap-0\.5 {
    gap: 0.125rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

/* Height utilities */
.h-3 {
    height: 0.75rem;
}

/* Width utilities */
.w-\[calc\(100\%\+2\.5rem\)\] {
    width: calc(100% + 2.5rem);
}

.w-\[calc\(100%-5\.5rem\)\] {
    width: calc(100% - 5.5rem);
}

.max-w-\[calc\(100%-5\.5rem\)\] {
    max-width: calc(100% - 5.5rem);
}

.max-w-\[calc\(50%-0\.5\*var\(--max-w\),0px\)\+var\(--px\)\] {
    max-width: calc(max(50% - 0.5*var(--max-w),0px) + var(--px));
}

/* Background utilities */
.bg-\[rgba\(0,0,0,0\.075\)\] {
    background-color: rgba(0,0,0,0.075);
}

/* Text utilities */
.leading-6 {
    line-height: 1.5rem;
}

.text-start {
    text-align: start;
}

/* Border utilities */
.border-r {
    border-right-width: 1px;
}

/* Display utilities */
.inline-block {
    display: inline-block;
}

/* Transition utilities */
.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* User avatar and name container */
.flex.items-center.justify-between.flex-1 {
    align-items: center;
    justify-content: space-between;
    flex: 1 1 0%;
}

.flex.items-center.gap-2 {
    align-items: center;
    gap: 0.5rem;
}

/* Avatar positioning */
.-translate-x-1 {
    transform: translateX(-0.25rem);
}

.group\/sidebar[aria-expanded="true"] .-translate-x-1 {
    transform: translateX(0.25rem);
}

/* Chevron rotation */
.rotate-90 {
    transform: rotate(90deg);
}

/* Border and ring utilities */
.ring-1 {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.ring-inset {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.ring-gray-alpha-200 {
    --tw-ring-color: hsl(240, 5%, 88%);
    box-shadow: 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

.hover\:ring-gray-alpha-300:hover {
    --tw-ring-color: hsl(240, 5%, 82%);
}

/* Overflow utilities */
.overflow-ellipsis {
    text-overflow: ellipsis;
}

.overflow-hidden {
    overflow: hidden;
}

/* Transition opacity utilities */
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-100 {
    transition-duration: 100ms;
}

/* ============================================
   FONT UTILITIES
   ============================================ */

.inter {
    font-family: Inter, sans-serif;
}

/* ============================================
   SCROLLBAR UTILITIES
   ============================================ */

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ============================================
   FADE GRADIENT EFFECTS (for scrollable containers)
   ============================================ */

.fade-top-3 {
    position: relative;
}

.fade-top-3:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
    pointer-events: none;
    z-index: 10;
}

.fade-bottom-3 {
    position: relative;
}

.fade-bottom-3:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
    pointer-events: none;
    z-index: 10;
}

/* ============================================
   TAB STYLING
   ============================================ */

.tab-button {
    color: hsl(240, 4%, 46%) !important;
    position: relative;
    z-index: 10;
}

.tab-button[data-state="active"] {
    color: hsl(240, 3%, 6%) !important;
}

.tab-button:hover {
    color: hsl(240, 3%, 6%) !important;
}

#tab-active-indicator {
    position: absolute !important;
    z-index: 20 !important;
    pointer-events: none;
}

.tab-pane {
    display: none;
}

.tab-pane[data-state="active"] {
    display: block;
}

/* ============================================
   PROTECTION CARD STYLING
   ============================================ */

.protection-card {
    position: relative;
}

.protection-card.selected {
    border-color: hsl(240, 3%, 6%) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    background-color: hsl(240, 5%, 98%);
}

.protection-card:active {
    transform: scale(0.98);
}

/* ============================================
   CHECK STEP STYLING
   ============================================ */

.CheckStep {
    margin-bottom: 0.5rem;
}

.CheckStep-header {
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.CheckStep-header:hover {
    background-color: hsl(240, 5%, 96%);
}
/* ============================================
   PROGRESS STEP FLEX UTILITIES
   (Critical for keeping spinner inline with title)
   ============================================ */

.d-flex {
    display: flex;
}

.flex-items-center {
    display: flex;
    align-items: center;
}

/* ============================================
   TEXT TRUNCATE UTILITIES (for progress step titles)
   ============================================ */

.css-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.css-truncate-overflow {
    overflow: hidden;
}

.user-select-none {
    user-select: none;
}

/* ============================================
   NEGATIVE MARGIN UTILITIES
   ============================================ */

.ml-n1 {
    margin-left: -0.25rem;
}

.mr-1 {
    margin-right: 0.25rem;
}

/* ============================================
   BORDER RADIUS UTILITIES
   ============================================ */

.rounded-2 {
    border-radius: 6px;
}

/* ============================================
   FLOAT UTILITIES
   ============================================ */

.float-right {
    float: right;
}

/* ============================================
   TEXT MONOSPACE UTILITIES
   ============================================ */

.text-mono {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

.text-normal {
    font-weight: 400;
}

.text-small {
    font-size: 0.875rem;
}


/* ============================================
   SETTINGS MODAL STYLES
   ============================================ */

.settings-modal.hidden {
    display: none;
}

.settings-modal:not(.hidden) {
    display: flex;
}

.settings-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    align-items: center;
    justify-content: center;
}

.settings-modal:not(.hidden) .settings-modal-backdrop {
    opacity: 1;
}

.settings-modal:not(.hidden) .settings-modal-content {
    opacity: 1;
    transform: scale(1);
}

.settings-modal-content {
    position: relative;
    background-color: white;
    border-radius: 12px;
    border: 1px solid hsl(240, 5%, 82%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    width: min(34rem, calc(100% - 2.5rem));
    max-height: min(55rem, 80vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: all 0.2s;
}

.settings-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s;
}

.settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid;
    border-color: hsl(240, 5%, 96%);
}

.settings-modal-close {
    padding: 0.25rem;
    transition: background-color 0.15s;
}

.settings-modal-close:hover {
    background-color: hsl(240, 5%, 96%);
    border-radius: 0.5rem;
}

.settings-modal-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Settings modal input styling */
.settings-modal input[type="text"] {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid;
    border-color: hsl(240, 5%, 96%);
}

.settings-modal input[type="text"]:hover {
    border-color: hsl(0, 0%, 82%);
}

.settings-modal input[type="text"]:focus {
    outline: none;
    box-shadow: none;
    border-color: hsl(240, 5%, 26%);
}

/* Settings modal button styling */
.settings-modal button:not(.settings-modal-close):not(.delete-btn) {
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.settings-modal button#save-username-btn {
    background-color: hsl(240, 3%, 6%) !important;
    color: hsl(240, 5%, 100%) !important;
}

.settings-modal button#save-username-btn:hover:not(:disabled) {
    background-color: hsl(240, 3%, 16%) !important;
}

.settings-modal button#save-username-btn:disabled {
    background-color: hsl(240, 5%, 82%) !important;
    color: hsl(240, 5%, 70%) !important;
    cursor: not-allowed;
}

.settings-modal button#clear-all-btn {
    border-radius: 10px !important;
    font-weight: 500;
}

.settings-modal #username-status {
    min-height: 1.25rem;
}

.settings-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: auto;
    padding: 1.5rem;
}

.settings-username-section .flex {
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ============================================
   HISTORY LIST STYLES
   ============================================ */

.history-list-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-list-container--collapsed {
    max-height: 280px;
    overflow: hidden;
}

.history-list-container--collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
}

.history-list-container--expanded {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

/* Custom scrollbar for history list */
.history-list-container--expanded::-webkit-scrollbar {
    width: 6px;
}

.history-list-container--expanded::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.history-list-container--expanded::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.history-list-container--expanded::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* ============================================
   REBRAND & CHAKRA STYLES
   ============================================ */

.rebrand-body * {
    border-color: var(--gray-alpha-150)
}

.chakra-portal {
    position: relative;
    z-index: 300;
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

.anim-rotate {
    animation: rotate 1s linear infinite;
}

/* ============================================
   TOASTIFY CSS VARIABLES
   ============================================ */

:root {
    --toastify-color-light: #fff;
    --toastify-color-dark: #121212;
    --toastify-color-info: #3498db;
    --toastify-color-success: #07bc0c;
    --toastify-color-warning: #f1c40f;
    --toastify-color-error: #e74c3c;
    --toastify-color-transparent: hsla(0, 0%, 100%, .7);
    --toastify-icon-color-info: var(--toastify-color-info);
    --toastify-icon-color-success: var(--toastify-color-success);
    --toastify-icon-color-warning: var(--toastify-color-warning);
    --toastify-icon-color-error: var(--toastify-color-error);
    --toastify-toast-width: 320px;
    --toastify-toast-background: #fff;
    --toastify-toast-min-height: 64px;
    --toastify-toast-max-height: 800px;
    --toastify-font-family: sans-serif;
    --toastify-z-index: 9999;
    --toastify-text-color-light: #757575;
    --toastify-text-color-dark: #fff;
    --toastify-text-color-info: #fff;
    --toastify-text-color-success: #fff;
    --toastify-text-color-warning: #fff;
    --toastify-text-color-error: #fff;
    --toastify-spinner-color: #616161;
    --toastify-spinner-color-empty-area: #e0e0e0;
    --toastify-color-progress-light: linear-gradient(90deg, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    --toastify-color-progress-dark: #bb86fc;
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error)
}

.Toastify__close-button:focus, .Toastify__close-button:hover {
    opacity: 1
}

/* Toastify Animations */
@keyframes Toastify__trackProgress {
    0% {
        transform: scaleX(1)
    }
    to {
        transform: scaleX(0)
    }
}

@keyframes Toastify__bounceInRight {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        transform: translate3d(10px, 0, 0)
    }
    90% {
        transform: translate3d(-5px, 0, 0)
    }
    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes Toastify__bounceInLeft {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        transform: translate3d(5px, 0, 0)
    }
    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes Toastify__bounceInUp {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    75% {
        transform: translate3d(0, 10px, 0)
    }
    90% {
        transform: translate3d(0, -5px, 0)
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes Toastify__bounceInDown {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }
    75% {
        transform: translate3d(0, -10px, 0)
    }
    90% {
        transform: translate3d(0, 5px, 0)
    }
    to {
        transform: none
    }
}

@keyframes Toastify__bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0)
    }
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes Toastify__zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

@keyframes Toastify__zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

@keyframes Toastify__flipIn {
    0% {
        transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in
    }
    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }
    80% {
        transform: perspective(400px) rotateX(-5deg)
    }
    to {
        transform: perspective(400px)
    }
}

@keyframes Toastify__flipOut {
    0% {
        transform: perspective(400px)
    }
    30% {
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }
    to {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes Toastify__slideInRight {
    0% {
        transform: translate3d(110%, 0, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInLeft {
    0% {
        transform: translate3d(-110%, 0, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInUp {
    0% {
        transform: translate3d(0, 110%, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideInDown {
    0% {
        transform: translate3d(0, -110%, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes Toastify__slideOutRight {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(110%, 0, 0)
    }
}

@keyframes Toastify__slideOutLeft {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(-110%, 0, 0)
    }
}

@keyframes Toastify__slideOutDown {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(0, 500px, 0)
    }
}

@keyframes Toastify__slideOutUp {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(0, -500px, 0)
    }
}

@keyframes Toastify__spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}


/* ============================================
   CRITICAL FIX: RIGHT PANEL VISIBILITY
   ============================================ */

/* Ensure main element has visible overflow when it contains the watermark strategy button
   This fixes the right panel (Configuration/Progress tabs) being hidden */
main:has(#watermark-strategy-button) {
    overflow: visible !important;
}

/* Also fix for any .stack .relative container that has the watermark button */
.stack .relative:has(#watermark-strategy-button) {
    overflow: visible !important;
}

/* ============================================
   FIX: WATERMARK STRATEGY DROPDOWN BORDER CLIPPING
   ============================================ */

/* Fix the outermost stack container that clips the dropdown */
#tab-configuration > .stack.h-full.overflow-hidden {
    overflow: visible !important;
}

/* Fix the inner scrollable container */
#tab-configuration > .stack > div[style*="overflow-y"] {
    overflow-x: visible !important;
    overflow-y: auto !important;
}

/* Fix the dropdown positioning - extend slightly beyond to show borders */
#watermark-strategy-dropdown {
    position: absolute !important;
    left: -1px !important;
    right: -1px !important;
    width: auto !important;
    box-sizing: border-box !important;
}

/* Ensure borders are fully visible */
#watermark-strategy-dropdown[role="listbox"] {
    margin: 0 !important;
    padding: 0 !important;
}

/* Also fix for any ancestor with overflow-hidden */
section:has(#watermark-strategy-dropdown) {
    overflow: visible !important;
}

/* Fix the right panel section */
section.stack:has(#watermark-strategy-button) {
    overflow: visible !important;
}

/* Ensure relative parent allows overflow */
.relative:has(#watermark-strategy-dropdown) {
    overflow: visible !important;
}

/* Fix all ancestors in the config panel */
#tab-configuration,
#tab-configuration > *,
#tab-configuration .stack {
    overflow: visible !important;
}

/* But keep the scrollable area scrollable */
#tab-configuration > .stack > div[style*="overflow"] {
    overflow-y: auto !important;
    overflow-x: visible !important;
}

/* ============================================
   CRITICAL FIX: OVERLAY CONTAINER POSITION
   ============================================ */

/* Fix overlay container - must be absolute for proper layering */
.overlay {
    position: absolute !important;
    inset: 0 !important;
}

/* ============================================
   POSITIONING UTILITIES (Tailwind CDN sometimes misses these)
   ============================================ */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

/* ============================================
   Z-INDEX UTILITIES
   ============================================ */

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.z-100 {
    z-index: 100;
}

/* ============================================
   OVERFLOW UTILITIES
   ============================================ */

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-y-auto {
    overflow-y: auto;
}

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

/* Buttons and inputs should have visible overflow */
:where(button, input) {
    overflow: visible;
}

/* ============================================
   DISPLAY UTILITIES
   ============================================ */

.block {
    display: block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.contents {
    display: contents;
}

.hidden {
    display: none;
}

/* Responsive display utilities - show on md and up */
@media (min-width: 768px) {
    .md\:flex {
        display: flex !important;
    }

    .md\:grid {
        display: grid !important;
    }

    .md\:block {
        display: block !important;
    }

    /* CRITICAL: Override hidden for elements that should show on md+ */
    .hidden.md\:flex {
        display: flex !important;
    }

    .hidden.md\:block {
        display: block !important;
    }

    .xl\:w-\[500px\] {
        width: 500px !important;
    }

    .xl\:\[--px\:3rem\] {
        --px: 3rem !important;
    }

    .xl\:pb-12 {
        padding-bottom: 3rem !important;
    }

    .2xl\:\[--px\:5rem\] {
        --px: 5rem !important;
    }

    .2xl\:pb-20 {
        padding-bottom: 5rem !important;
    }
}

@media (min-width: 1280px) {
    .xl\:w-\[500px\] {
        width: 500px !important;
    }
}

@media (min-width: 1536px) {
    .2xl\:\[--px\:5rem\] {
        --px: 5rem !important;
    }

    .2xl\:pb-20 {
        padding-bottom: 5rem !important;
    }
}

/* ============================================
   POSITIONING UTILITIES
   ============================================ */

.static {
    position: static;
}

.sticky {
    position: sticky;
}

/* ============================================
   Z-INDEX UTILITIES (Additional values)
   ============================================ */

.z-41 {
    z-index: 41;
}

.z-60 {
    z-index: 60;
}

.z-\[100\] {
    z-index: 100;
}

/* ============================================
   FLEXBOX UTILITIES
   ============================================ */

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.grow {
    flex-grow: 1;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.shrink-0 {
    flex-shrink: 0;
}

.self-stretch {
    align-self: stretch;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

/* ============================================
   TEXT UTILITIES
   ============================================ */

.text-center {
    text-align: center;
}

.text-start {
    text-align: start;
}

.font-medium {
    font-weight: 500;
}

.font-normal {
    font-weight: 400;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.625rem;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-foreground {
    color: hsl(240, 3%, 6%);
}

.text-gray-600 {
    color: hsl(240, 5%, 46%);
}

.text-gray-alpha-500 {
    color: hsl(240, 5%, 50%);
}

.text-gray-alpha-600 {
    color: hsl(240, 5%, 46%);
}

.text-gray-alpha-950 {
    color: hsl(240, 5%, 10%);
}

/* Hover state colors */
.hover\:text-gray-alpha-950:hover {
    color: hsl(240, 5%, 10%);
}

.hover\:bg-gray-alpha-100:hover {
    background-color: hsl(240, 5%, 96%);
}

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */

.bg-transparent {
    background-color: transparent;
}

.bg-gray-alpha-100 {
    background-color: hsl(240, 5%, 96%);
}

.\!bg-gray-alpha-100 {
    background-color: hsl(240, 5%, 96%) !important;
}

.\!text-gray-alpha-950 {
    color: hsl(240, 5%, 10%) !important;
}

.bg-gray-50 {
    background-color: hsl(240, 5%, 96%);
}

.\!bg-gray-100 {
    background-color: hsl(240, 5%, 96%) !important;
}

/* ============================================
   BORDER UTILITIES
   ============================================ */

.border-l {
    border-left-width: 1px;
}

.border-t {
    border-top-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* ============================================
   SPACING UTILITIES
   ============================================ */

.p-2 {
    padding: 0.5rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-1\.5, .mb-1\\.5 {
    margin-bottom: 0.375rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-1\.5, .ml-1\\.5 {
    margin-left: 0.375rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.mr-0 {
    margin-right: 0;
}

.mr-0\.5, .mr-0\\.5 {
    margin-right: 0.125rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mt-auto {
    margin-top: auto;
}

/* ============================================
   SIZE UTILITIES
   ============================================ */

.h-4 {
    height: 1rem;
}

.h-8 {
    height: 2rem;
}

.h-11 {
    height: 2.75rem;
}

.w-4 {
    width: 1rem;
}

.w-5 {
    width: 1.25rem;
}

.w-fit {
    width: fit-content;
}

/* Right panel width classes */
.w-\[420px\] {
    width: 420px;
}

.xl\:w-\[500px\] {
    width: 500px;
}

/* Critical sidebar width calculation */
.w-\[calc\(var\(--eleven-sidebar-width\)-1\.8125rem\)\] {
    width: calc(var(--eleven-sidebar-width) - 1.8125rem);
}

.min-h-0 {
    min-height: 0;
}

.min-w-0 {
    min-width: 0;
}

.min-w-36 {
    min-width: 9rem;
}

.max-w-\[168px\], .max-w-\\[168px\\] {
    max-width: 168px;
}

.max-w-full {
    max-width: 100%;
}

.object-cover {
    object-fit: cover;
}

/* ============================================
   TRANSITION UTILITIES
   ============================================ */

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-100 {
    transition-duration: 100ms;
}

.duration-150 {
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

/* ============================================
   TRANSFORM & OPACITY UTILITIES
   ============================================ */

.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-100 {
    opacity: 1;
}

.translate-x-0 {
    transform: translateX(0);
}

.translate-x-1 {
    transform: translateX(0.25rem);
}

.-translate-x-1 {
    transform: translateX(-0.25rem);
}

.rotate-90 {
    transform: rotate(90deg);
}

/* ============================================
   ACCESSIBILITY UTILITIES
   ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   CURSOR UTILITIES
   ============================================ */

.cursor-pointer {
    cursor: pointer;
}

.cursor-e-resize {
    cursor: e-resize;
}

.cursor-w-resize {
    cursor: w-resize;
}

/* ============================================
   POINTER EVENTS UTILITIES
   ============================================ */

.pointer-events-none {
    pointer-events: none;
}

/* ============================================
   GROUP UTILITIES (for hover states)
   ============================================ */

.group {
    display: flex;
}

/* ============================================
   SHADOW UTILITIES
   ============================================ */

.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* ============================================
   OVERFLOW UTILITIES (Additional)
   ============================================ */

.overflow-ellipsis {
    text-overflow: ellipsis;
}

/* ============================================
   CHAKRA PROGRESS CIRCLE STYLES
   (Critical for avatar and credits display)
   ============================================ */

/* Avatar progress circle (larger - 40px) */
.css-2c8lkk {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    font-size: 2.5rem;
}

.css-bj12qo {
    width: 2.5rem;
    height: 2.5rem;
}

/* Credits progress circle (smaller - ~18px) */
.css-o6x0z7 {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    font-size: 1.1rem;
}

.css-r94w0k {
    width: 1.1rem;
    height: 1.1rem;
}

/* Progress track (background circle) */
.chakra-progress__track.css-131d71n {
    fill: transparent;
    stroke: rgb(209, 213, 219);
}

/* Progress indicator (foreground circle) */
.chakra-progress__indicator.css-osbmls {
    fill: transparent;
    stroke: rgb(0, 0, 0);
    opacity: 0;
    transition-property: stroke-dasharray, stroke;
    transition-duration: 0.6s;
    transition-timing-function: ease;
}

/* ============================================
   CREATIVE PLATFORM TEXT (always hidden - matches backup version behavior)
   ============================================ */

/* The Creative Platform text container should always be hidden
   The backup version (dashboard-v2.css) doesn't have the group-aria-expanded/sidebar:flex variant
   so the 'hidden' class always takes precedence.
   Use high specificity to override Tailwind's flex utility. */
div.hidden.group-aria-expanded\\/sidebar\\:flex.items-center.justify-between.flex-1.h-8,
div[class*="hidden"][class*="group-aria-expanded/sidebar:flex"][class*="items-center"][class*="justify-between"][class*="flex-1"][class*="h-8"] {
    display: none !important;
}

/* Also target via the parent button for higher specificity */
button.group\\/main-nav-item div.hidden.group-aria-expanded\\/sidebar\\:flex.items-center.justify-between.flex-1.h-8,
button[class*="group"][class*="main-nav-item"] div[class*="hidden"][class*="group-aria-expanded/sidebar:flex"][class*="flex-1"][class*="h-8"] {
    display: none !important;
}

/* ============================================
   TRANSITION OPACITY DURATION
   ============================================ */

.transition-opacity.duration-300 {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* ============================================
   GRID LAYOUT FIXES (Tailwind JIT classes not working with CDN)
   ============================================ */

/* Grid with auto columns for credits/duration layout */
div[class*="grid-cols-[auto,auto"] {
    grid-template-columns: auto auto !important;
}

@media (min-width: 768px) {
    div[class*="@md:grid-cols-[auto,auto"] {
        grid-template-columns: auto auto !important;
    }

    /* Fix order variant - reset order at medium breakpoint */
    [class*="@md:order-none"] {
        order: 0 !important;
    }
}

/* Grid gap fixes */
.gap-3 {
    gap: 0.75rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-1 {
    gap: 0.25rem;
}

/* Ensure the grid items don't stretch too wide */
.min-w-0 {
    min-width: 0;
}

/* ============================================
   DRAG AND DROP STYLING
   ============================================ */

/* Results section needs relative positioning for drag overlay */
#image-results-section {
    position: relative;
}

/* ============================================
   PLATFORM DROPDOWN MENU
   ============================================ */

.platform-dropdown-menu {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid hsl(240, 5%, 88%);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15),
                0 4px 12px rgba(0, 0, 0, 0.08),
                0 0 1px rgba(0, 0, 0, 0.1);
    padding: 0.375rem;
    min-width: 13rem;
    z-index: 50;
}

.platform-menu-item-wrapper {
    position: relative;
}

.platform-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.625rem 0.625rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.platform-menu-item:hover {
    background-color: hsl(240, 5%, 96%);
}

.platform-menu-separator {
    height: 1px;
    background-color: hsl(240, 5%, 92%);
    margin: 0.25rem 0;
}

.platform-menu-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.platform-menu-icon--edit {
    background: linear-gradient(135deg, hsl(240, 3%, 20%) 0%, hsl(240, 3%, 10%) 100%);
}

.platform-menu-icon--export {
    background: linear-gradient(135deg, hsl(160, 60%, 45%) 0%, hsl(160, 70%, 35%) 100%);
}

.platform-menu-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.125rem;
}

.platform-menu-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(240, 3%, 11%);
    line-height: 1.25;
}

.platform-menu-subtitle {
    font-size: 0.75rem;
    font-weight: 400;
    color: hsl(240, 5%, 50%);
    line-height: 1.2;
}

.platform-menu-subtitle--new {
    color: hsl(217, 91%, 55%);
}

/* Selected state - subtle background like hover */
.platform-menu-item-wrapper.selected .platform-menu-item {
    background-color: hsl(240, 5%, 94%);
}

.platform-menu-item-wrapper.selected .platform-menu-title {
    color: hsl(240, 3%, 11%);
    font-weight: 600;
}

.platform-menu-item-wrapper.selected .platform-menu-subtitle {
    color: hsl(240, 5%, 50%);
}

/* ============================================
   EMBED CODE POPUP
   ============================================ */

.embed-popup {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
}

.embed-popup.hidden {
    display: none;
}

.embed-popup-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.embed-popup-content {
    position: relative;
    background-color: white;
    border-radius: 12px;
    border: 1px solid hsl(240, 5%, 88%);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18),
                0 4px 16px rgba(0, 0, 0, 0.1),
                0 0 1px rgba(0, 0, 0, 0.1);
    width: min(28rem, calc(100% - 2rem));
    max-height: calc(100vh - 4rem);
    overflow: hidden;
}

.embed-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid hsl(240, 5%, 94%);
}

.embed-popup-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.embed-popup-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, hsl(160, 60%, 45%) 0%, hsl(160, 70%, 35%) 100%);
    color: white;
}

.embed-popup-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: hsl(240, 3%, 11%);
}

.embed-popup-close {
    padding: 0.375rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: hsl(240, 5%, 50%);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.embed-popup-close:hover {
    background-color: hsl(240, 5%, 96%);
    color: hsl(240, 3%, 11%);
}

.embed-popup-body {
    padding: 1.25rem;
}

.embed-popup-description {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: hsl(240, 5%, 45%);
    line-height: 1.5;
}

/* Artwork Selection */
.embed-artwork-select {
    margin-bottom: 1rem;
}

.embed-select-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(240, 3%, 25%);
    margin-bottom: 0.375rem;
}

.embed-select-wrapper {
    position: relative;
}

.embed-select {
    width: 100%;
    padding: 0.625rem 2.25rem 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: hsl(240, 3%, 11%);
    background-color: white;
    border: 1px solid hsl(240, 5%, 88%);
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.embed-select:hover {
    border-color: hsl(240, 5%, 75%);
}

.embed-select:focus {
    outline: none;
    border-color: hsl(240, 3%, 11%);
    box-shadow: 0 0 0 2px hsl(240, 3%, 11%, 0.1);
}

.embed-select-chevron {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: hsl(240, 5%, 50%);
}

.embed-code-container {
    position: relative;
}

.embed-code-block {
    margin: 0;
    padding: 1rem;
    background-color: hsl(240, 5%, 97%);
    border: 1px solid hsl(240, 5%, 90%);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: hsl(240, 3%, 25%);
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.embed-popup-hint {
    margin: 0.5rem 0 0 0;
    font-size: 0.75rem;
    color: hsl(240, 5%, 55%);
}

.embed-popup-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.embed-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: hsl(240, 3%, 11%);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.embed-copy-btn:hover {
    background-color: hsl(240, 3%, 20%);
}

.embed-copy-btn svg {
    flex-shrink: 0;
}

/* Upload zone drag state */
#upload-zone.drag-over {
    outline-color: hsl(240, 5%, 26%) !important;
    background-color: hsl(240, 5%, 94%) !important;
}

/* Results section drag state - allows dropping new image to process */
#image-results-section.drag-over {
    background-color: hsl(240, 5%, 96%) !important;
    border: 2px dashed hsl(240, 5%, 50%) !important;
    border-radius: 14px;
}

#image-results-section.drag-over::after {
    content: 'Drop image to process';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.125rem;
    font-weight: 500;
    color: hsl(240, 5%, 26%);
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem 2rem;
    border-radius: 10px;
    pointer-events: none;
}