/* FlexBox Pro Master Stylesheet 
   All Rights Reserved © 2026 
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');

/* --- 1. Base Setup --- */
body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    transition: background 0.3s, color 0.3s; 
    margin: 0;
    min-height: 100vh;
}

/* Theme Defaults */
body { background-color: #ffffff; color: #0f172a; }
.dark body { background-color: #020617; color: #f8fafc; }

/* --- 2. Index Specific Styles --- */
.hero-glow { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 100%; 
    height: 600px; 
    background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%); 
    z-index: -1; 
}

/* --- 3. Configurator Specific Styles --- */
/* Professional Input Styling */
.input-box { 
    border-radius: 12px; 
    padding: 12px; 
    width: 100%; 
    transition: 0.2s; 
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    box-sizing: border-box; /* Ensures padding doesn't break width */
}

.dark .input-box { 
    background: #1e293b; 
    border-color: #334155; 
    color: white; 
}

.input-box:focus { 
    border-color: #3b82f6; 
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); 
}

/* Glass Panel Styling */
.glass { 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(0,0,0,0.05); 
    border-radius: 32px; 
    padding: 2rem; 
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.dark .glass { 
    background: rgba(30, 41, 59, 0.6); 
    border-color: rgba(255,255,255,0.05); 
}

/* --- 4. Professional Code Editor (Used in Both) --- */
pre#out {
    background: #0f172a !important; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 1.5rem !important;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Syntax Highlighting Tokens */
.tok-tag { color: #f472b6; }      /* Pink for script tag */
.tok-attr { color: #7dd3fc; }     /* Blue for data attributes */
.tok-val { color: #fbbf24; }      /* Amber for strings/values */
.tok-punc { color: #94a3b8; }     /* Gray for equals and brackets */