/* Studio Global UI (Global Theme Dependent) */
.studio-input {
    width: 100%;
    background-color: #f1f5f9;
    /* slate-100 Light Mode */
    border: 1px solid #cbd5e1;
    /* slate-300 */
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    /* text-xs */
    color: #0f172a;
    /* slate-900 */
    transition: all 0.2s;
}

.dark .studio-input {
    background-color: #1e293b !important;
    border-color: rgba(51, 65, 85, 0.5);
    color: #f8fafc !important;
    color-scheme: dark;
}

.studio-input:focus {
    outline: none;
    border-color: #6366f1;
    /* indigo-500 */
    box-shadow: 0 0 0 1px #6366f1;
}

/* Canvas Background (Global Theme Dependent) */
.checkerboard-bg {
    background-image:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 20px 20px;
}

.dark .checkerboard-bg {
    background-image:
        linear-gradient(45deg, #334155 25%, transparent 25%),
        linear-gradient(-45deg, #334155 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #334155 75%),
        linear-gradient(-45deg, transparent 75%, #334155 75%);
}

/* 
 * MOCKUP THEME ISOLATION (Nuclear Separation) 
 * These styles apply ONLY to the mockup element, completely ignoring global .dark
 */

/* Light Mode (Default) */
.ig-mockup-wrapper {
    background-color: #ffffff;
    color: #000000;
    --ig-border: #dbdbdb;
    --ig-secondary: #737373;
    --ig-verified: #0095f6;
    --ig-bg: #ffffff;
}

.ig-mockup-wrapper svg {
    color: #000000;
}

.ig-mockup-wrapper .ig-text-secondary {
    color: var(--ig-secondary);
}

.ig-mockup-wrapper .ig-border {
    border-color: var(--ig-border);
}

/* Dark Mode (Class-Based) */
.ig-mockup-wrapper.theme-dark {
    background-color: #000000;
    color: #ffffff;
    --ig-border: #262626;
    --ig-secondary: #a8a8a8;
    --ig-verified: #0095f6;
    --ig-bg: #000000;
}

.ig-mockup-wrapper.theme-dark svg {
    color: #ffffff;
}

.ig-mockup-wrapper.theme-dark .ig-text-secondary {
    color: var(--ig-secondary);
}

.ig-mockup-wrapper.theme-dark .ig-border {
    border-color: var(--ig-border);
}

.ig-mockup-wrapper.theme-dark #avatar-ring-bg {
    background-color: #000000;
}

/* Font Optimization */
.ig-mockup-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}