:root {
    /* Theme Colors */
    --mt-yellow: #e2b714;
    --mt-bg: rgba(44, 46, 49, 0.8);
    --mt-text: #646669;
    --mt-text-hover: #d1d0c5;
    
    /* Neon Palette */
    --neon-cyan: #00f3ff;
    --neon-purple: #bc13fe;
    --neon-yellow: #f1c40f;
    --neon-red: #ff0055;
    
    /* Text */
    --text-color: #dbe4eb;
    --text-dim: #5c677d;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'JetBrains Mono', monospace;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    
    /* --- INTERACTIVE COLOR GRADED BACKGROUND --- */
    background-color: #050505;
    background-image: 
        /* 1. Grain Texture */
        url('https://www.transparenttextures.com/patterns/stardust.png'),
        
        /* 2. Interactive Spotlight (Follows Mouse) */
        radial-gradient(
            circle at var(--x, 50%) var(--y, 50%), 
            rgba(0, 243, 255, 0.1) 0%, 
            transparent 50%
        ),
        
        /* 3. Secondary Interactive Glow (Opposite/Slower) */
        radial-gradient(
            circle at calc(100% - var(--x, 50%)) calc(100% - var(--y, 50%)), 
            rgba(188, 19, 254, 0.08) 0%, 
            transparent 50%
        );
        
    background-attachment: fixed;
    
    /* Prevent selection on static UI elements */
    user-select: none; 
    -webkit-user-select: none;
}

/* --- THE MAIN STRUCTURED FRAME --- */
.app-wrapper {
    position: relative;
    width: 90%;
    max-width: 900px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    
    /* Glassmorphism */
    background: rgba(10, 12, 16, 0.6);
    backdrop-filter: blur(10px);
    
    /* Aesthetic Border */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* --- NEON CORNER BRACKETS --- */
.app-wrapper::before,
.app-wrapper::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--neon-cyan);
    transition: all 0.4s ease;
    pointer-events: none;
}

.app-wrapper::before { top: -1px; left: -1px; border-right: none; border-bottom: none; box-shadow: -2px -2px 10px rgba(0, 243, 255, 0.3); }
.app-wrapper::after { bottom: -1px; right: -1px; border-left: none; border-top: none; box-shadow: 2px 2px 10px rgba(0, 243, 255, 0.3); }

.app-wrapper:hover::before,
.app-wrapper:hover::after { width: 50px; height: 50px; border-color: var(--neon-purple); box-shadow: 0 0 15px var(--neon-purple); }

/* --- Config Bar --- */
.config-bar { display: flex; justify-content: center; align-items: center; padding: 10px 0; font-size: 0.8rem; color: var(--mt-text); flex-wrap: wrap; gap: 20px; }
.config-group { display: flex; align-items: center; gap: 15px; background-color: var(--mt-bg); padding: 8px 15px; border-radius: 6px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); }
.config-item { cursor: pointer; transition: color 0.2s ease; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.config-item:hover { color: var(--mt-text-hover); }
.config-item.active { color: var(--mt-yellow); text-shadow: 0 0 8px rgba(226, 183, 20, 0.3); }
.separator { width: 1px; height: 16px; background-color: var(--mt-text); opacity: 0.4; }

/* --- HUD --- */
.hud-container { display: flex; justify-content: space-between; align-items: center; padding: 25px; background: rgba(20, 25, 35, 0.4); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.circle-box { position: relative; width: 70px; height: 70px; }
svg { width: 70px; height: 70px; transform: rotate(-90deg); }
circle { fill: none; stroke-width: 4; stroke-linecap: round; }
circle:nth-child(1) { stroke: rgba(255, 255, 255, 0.05); }
circle:nth-child(2) { stroke: var(--neon-cyan); stroke-dasharray: 188; stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s; }
.stat-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 1.1rem; }
.stat-label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }
.masked .stat-value { color: var(--text-dim); animation: pulse 1.5s infinite; font-size: 0.8rem; }
.masked circle:nth-child(2) { stroke: var(--text-dim); stroke-dashoffset: 188 !important; }

/* --- Display --- */
.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 5px; }
.panel-title { font-size: 0.75rem; color: var(--neon-cyan); letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; }
.icon-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1.1rem; transition: 0.3s; }
.icon-btn:hover { color: var(--neon-cyan); transform: rotate(180deg); }

.glass-panel {
    background: rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(0, 243, 255, 0.1); 
    border-radius: 8px; padding: 30px;
    font-size: 1.2rem; line-height: 1.6; min-height: 100px; color: var(--text-color);
}

/* --- Blind Input --- */
.input-container { position: relative; width: 100%; }

.blind-textarea {
    width: 100%; height: 130px;
    background: rgba(5, 5, 5, 0.3);
    border: 1px solid var(--text-dim); 
    border-radius: 8px; padding: 25px;
    font-family: 'JetBrains Mono', monospace; font-size: 1.3rem;
    resize: none; outline: none; transition: 0.3s; box-sizing: border-box;
    
    /* BLIND MODE CORE */
    color: transparent; 
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.08); 
    caret-color: var(--neon-cyan);
    user-select: text; 
}

/* FIX: This makes the selection invisible even if user drags mouse */
.blind-textarea::selection { background-color: transparent; color: transparent; text-shadow: none; }
.blind-textarea::-moz-selection { background-color: transparent; color: transparent; text-shadow: none; }

.blind-textarea:focus { border-color: var(--neon-cyan); box-shadow: 0 0 15px rgba(0, 243, 255, 0.1); }
.blind-textarea.revealed { color: var(--text-color); text-shadow: none; border-color: var(--neon-yellow); background: rgba(5, 5, 5, 0.6); }
.blind-textarea.revealed::selection { background-color: var(--neon-cyan); color: #000; }

.input-label { position: absolute; bottom: -30px; right: 5px; font-size: 0.65rem; color: var(--neon-cyan); opacity: 0.6; letter-spacing: 2px; }

/* --- Controls --- */
.control-panel { display: flex; justify-content: center; gap: 20px; margin-top: 25px; }
.neon-btn {
    background: transparent; border: 1px solid; padding: 12px 35px;
    font-family: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer; border-radius: 4px; transition: 0.3s; font-size: 0.85rem;
}
.cyan-btn { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.cyan-btn:hover { background: rgba(0, 243, 255, 0.1); color: #fff; box-shadow: 0 0 25px rgba(0, 243, 255, 0.2); }
.red-btn { color: var(--neon-red); border-color: var(--neon-red); }
.red-btn:hover { background: rgba(255, 0, 85, 0.1); color: #fff; box-shadow: 0 0 25px rgba(255, 0, 85, 0.2); }

@keyframes pulse { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }