/* ==========================================================
 * XINAVANE LUXURY PURE-WHITE COMPLEMENTARY DESIGN SYSTEM
 * ========================================================== */
:root {
    --accent: #6fb8c8; 
    --panel-tint: rgba(111, 184, 200, 0.08); 
    --gradient-start: #ffffff;
    --gradient-end: rgba(111, 184, 200, 0.025);
    --border-light: #ebdce1;      
    --shadow-soft: rgba(5, 43, 125, 0.03); 

    /* ==========================================================
     * 👁️ THE VISUAL FIX: LUXURY GRAPHITE TYPOGRAPHY
     * ========================================================== */
    --text-main: #1e293b;         /* Deep, rich charcoal slate for main headings and titles */
    --text-muted: #64748b;        /* Balanced, soft gray-slate for description subtext labels */
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Set a premium, seamless angular linear gradient across the workspace canvas */
    background-image: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%) !important;
    background-attachment: fixed; /* Pins gradient seamlessly to prevent tiling during mobile scrolls */
    background-color: #ffffff;
    
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: -0.1px;
    padding-bottom: 40px;
    
    /* Adds a soft, cinematic transition effect whenever themes flip */
    transition: background-image 0.4s ease-in-out, background-color 0.4s ease-in-out;
}

/* Persistent Application Web Header Banner */
.premium-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-light);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px var(--shadow-soft);
}
.brand-block h1 { font-size: 14px; font-weight: 800; letter-spacing: 1.5px; color: var(--text-main); margin: 0; }
.brand-block p { font-size: 9px; font-weight: 600; color: #c96a8a; letter-spacing: 0.5px; margin: 2px 0 0 0; }

.token-pill {
    background: rgba(5, 43, 125, 0.05);
    border: 1px solid rgba(5, 43, 125, 0.1);
    padding: 6px 12px; border-radius: 99px; font-size: 11px; font-weight: 700; color: var(--text-main);
}

/* Center Workspace Card Constraints */
.studio-workspace-container { max-width: 540px; margin: 0 auto; padding: 16px; }

/* Horizontal Slider Navigation Banner Tracks */
.parameter-tab-banner {
    display: flex;
    gap: 6px;                  /* Tightens layout gap spacing slightly */
    width: 100%;               /* Force container to match your card layout bounds */
    margin-bottom: 16px;
    padding: 2px 0;
}

.param-tab {
    background: var(--card-light);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 10px 4px;         /* Shaves vertical and side padding for clean mobile scaling */
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 2px 6px var(--shadow-soft);
    
    /* ==========================================================
     * 📐 FIXED MOBILE WIDTH PROPORTIONS OVERRIDE
     * ========================================================== */
    flex: 1 1 0%;              /* Forces all 5 tab cells to distribute screen space evenly */
    min-width: 0;              /* Standard CSS layout reset allowing items to auto-shrink */
}

.param-tab .tab-meta { 
    font-size: 8px; 
    font-weight: 700; 
    color: var(--text-muted); 
    text-transform: uppercase; 
    letter-spacing: 0.2px; 
    display: block; 
    margin-bottom: 2px;
    white-space: nowrap;       /* Keeps heading block metadata locked to a single line */
    overflow: hidden;
    text-overflow: ellipsis;   /* Gracefully caps text if space gets too tight */
}

.param-tab .tab-value { 
    font-size: 11px;           /* Scales typography down to 11px for flawless mobile seating */
    font-weight: 700; 
    color: var(--text-main); 
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   /* Smoothly shortens heavy names (e.g. "Little Butter...") */
}

.param-tab.active {
    border-color: var(--accent) !important;
    background: #ffffff;
    box-shadow: 0 4px 12px var(--shadow-soft);
    transform: translateY(-1px);
}

.param-tab.active .tab-meta { 
    color: var(--accent) !important; 
}

/* Dynamic Multi-Color Complementary Viewport Containers */
.expanded-preview-viewport {
    background: var(--panel-tint) !important;
    border: 1px solid rgba(5, 43, 125, 0.04);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px var(--shadow-soft);
    
    /* ==========================================================
     * 📐 THE TRUE RESIZE FIX: WRAP THE PANEL GRID IN AN ACCORDION
     * ========================================================== */
    display: grid;
    grid-template-rows: auto 0fr; /* Initializes hidden panels to take zero vertical space */
    transition: background 0.3s ease-in-out,
                grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Force the header title to always remain visible at the top */
.expanded-preview-viewport h2 { 
    grid-row: 1;
    font-size: 12px; 
    font-weight: 800; 
    letter-spacing: 0.8px; 
    text-transform: uppercase; 
    margin-bottom: 16px; 
    color: var(--text-main); 
    border-bottom: 1px solid rgba(5, 43, 125, 0.05); 
    padding-bottom: 10px;
}

/* Open up the container rows smoothly when a panel goes active */
.expanded-preview-viewport:has(.active-panel) {
    grid-template-rows: auto 1fr; /* Glides open to accommodate the active contents precisely */
}

/* ==========================================================
 * ✦ THE FLAWLESS SLIDING TABS CONTROLLER
 * ========================================================== */
.options-display-panel { 
    grid-row: 2;
    overflow: hidden; /* Pins contents cleanly during height transitions */
    
    /* Keep display: none/grid flat to allow elements to load correctly */
    display: none; 
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); 
    gap: 12px; 
    
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease-out,
                transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.options-display-panel.active-panel { 
    display: grid; 
    opacity: 1;
    transform: translateY(0);
}


/* Premium Grid Action Selection Cards */
.select-option-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 85px;
}
.select-option-card:hover { border-color: var(--accent); background: #fdfdfd; transform: translateY(-1px); }
.select-option-card.active-choice { border-color: var(--accent) !important; background: #ffffff !important; box-shadow: 0 4px 12px var(--shadow-soft); }

.select-option-card .icon-glyph { font-size: 26px; margin-bottom: 6px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.03)); }
.select-option-card .choice-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.select-option-card.active-choice .choice-label { color: var(--text-main) !important; font-weight: 800; }

/* Flat Responsive Grid Vector Ratios Wireframes */
.ratio-preview-box { border: 2px solid #cbd5e1; background: #f8fafc; border-radius: 4px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.ratio-text-stamp { font-size: 8px; font-weight: 800; color: #94a3b8; font-family: monospace; }

.select-option-card.active-choice .ratio-preview-box { border-color: var(--accent) !important; background: #ffffff !important; }
.select-option-card.active-choice .ratio-text-stamp { color: var(--accent) !important; }

.r-tall-9-16    { width: 20px; height: 35px; }
.r-portrait-2-3 { width: 22px; height: 33px; }
.r-portrait-4-5 { width: 26px; height: 32px; }
.r-square-1-1   { width: 28px; height: 28px; }
.r-wide-16-9    { width: 35px; height: 20px; }

/* Custom Typography Fields Form Slots */
.text-input-layout { width: 100%; display: flex; flex-direction: column; gap: 12px; grid-column: 1 / -1; }
.text-field-group label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; display: block;}
.text-field-group input { width: 100%; padding: 12px; background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; color: var(--text-main); outline: none; font-size: 13px; font-weight: 600; }
.text-field-group input:focus { border-color: var(--accent); }

/* Execution Target Buttons */
.output-textarea { width: 100%; height: 100px; background: #fdfdfd; border: 1px solid var(--border-light); border-radius: 12px; padding: 12px; font-family: monospace; font-size: 11px; color: var(--text-muted); resize: none; margin-bottom: 14px; line-height: 1.5; outline: none; box-shadow: inset 0 1px 3px rgba(0,0,0,0.01); }

.action-btn {
    width: 100%;
    padding: 14px 10px; /* Slightly shaves left/right padding to give text more horizontal space */
    border-radius: 12px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    
    /* ==========================================================
     * 📐 THE OVERLAP & LINE HEIGHT REFIX
     * ========================================================== */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;                    /* Clean spacing between emoji and text */
    line-height: 1.2;            /* Gives rows vertical space if they ever scale */
    white-space: nowrap;         /* Forcefully stops text from wrapping onto a second line */
    
    transition: all 0.2s;
}

.action-btn.primary { 
    background: var(--accent); 
    color: #FFFFFF; 
    box-shadow: 0 4px 14px rgba(5, 43, 125, 0.08); 
    font-weight: bold; 
}

.action-btn.primary:hover { 
    opacity: 0.9; 
    transform: translateY(-1px); 
}

.action-btn.secondary { 
    background: #ffffff; 
    color: var(--text-main); 
    margin-top: 8px; 
    border: 1px solid var(--border-light); 
    box-shadow: 0 2px 4px var(--shadow-soft); 
}

.action-btn.secondary:hover { 
    background: #f8fafc; 
}


.canvas-render-box { width: 100%; min-height: 180px; background: #ffffff; border: 1px dashed var(--border-light); border-radius: 16px; margin-top: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 15px; text-align: center;}
.spinner-node { width: 24px; height: 24px; border: 2px solid #edf2f7; border-top-color: var(--text-main); border-radius: 50%; animation: rotateNode 1s infinite linear; }

/* Fine Art Layout Minimalist Footer Custom Links Buttons */
.studio-app-footer { border-top: 1px solid var(--border-light); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); padding: 24px 20px; margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.footer-utility-row { width: 100%; max-width: 540px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.footer-brand-signature { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text-main); }
.studio-badge-dot { width: 6px; height: 6px; background-color: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); }
.footer-action-links { display: flex; gap: 8px; }
.footer-pill-link { background: #ffffff; border: 1px solid var(--border-light); padding: 6px 12px; border-radius: 99px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 5px; transition: all 0.2s; box-shadow: 0 1px 3px var(--shadow-soft); }
.footer-pill-link:hover { color: var(--text-main); border-color: var(--accent); }
.footer-location-tag { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.studio-copyright-statement { font-size: 10px; font-weight: 500; color: var(--text-muted); text-align: center; }
.divider-slash { color: var(--border-light); margin: 0 4px; }

/* Responsive Constraints */
@media (max-width: 480px) {
    .footer-utility-row { flex-direction: column; gap: 14px; text-align: center; }
    .footer-action-links { width: 100%; justify-content: center; flex-wrap: wrap; }
}
@keyframes rotateNode { to { transform: rotate(360deg); } }

/* ==========================================================
 * 📱 ULTRA-PREMIUM TOUCH & ACCORDION FIX FOR MOBILE PHONES
 * ========================================================== */
@media (max-width: 480px) {
    /* Ensures the pure white option cards adapt to narrow smartphone views */
    .options-display-panel {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
        gap: 8px !important;
    }
    
    /* Shrinks card sizes slightly to keep the mobile viewport compact */
    .select-option-card {
        padding: 10px !important;
        min-height: 75px !important;
    }
    
    /* Pins layout dimensions safely to prevent unwanted horizontal page swaying */
    .premium-studio-container, .expanded-preview-viewport {
        overflow: hidden;
        width: 100%;
    }
}


/* Premium Sub-Pill Selection Tray */
.sub-pill-container {
    padding: 14px 0 4px 0;
    border-top: 1px solid rgba(5, 43, 125, 0.05);
    margin-top: 8px;
    animation: slideUpTray 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.sub-pill-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: block;
}

.sub-pill-track {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.detail-sub-pill {
    background: #ffffff;
    border: 1px solid var(--border-light);
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px var(--shadow-soft);
}

.detail-sub-pill:hover {
    border-color: var(--accent);
}

/* Dynamic Active State matching your Theme Morphing Engine */
.detail-sub-pill.active-pill {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(5, 43, 125, 0.08);
}

@keyframes slideUpTray {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.select-option-card.disabled{
    opacity: 0.45;
    filter: grayscale(100%);
    cursor: not-allowed;
    pointer-events: none;
}