:root { --bg: #0d1117; --panel: #161b22; --accent: #9fa6ff; --text: #c9d1d9; }
        body { font-family:sans-serif; background: #111; color: var(--text); font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
        .panel { background: #0d1117; margin: 20px 5px 5px 5px; padding: 30px 60px 30px 60px ; border-radius: 15px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); border: 1px solid #30363d; text-align: center; display: flex; flex-direction: column; box-sizing: border-box; color: #c9d1d9; }
        h2 { color: var(--accent); margin-bottom: 20px; font-size:20px;}
        .group { margin-bottom: 20px; text-align: left; }
        label { : block; font-size: 12px; margin-bottom: 8px; color: #8b949e; text-transform: uppercase; }
        input[type="number"] { width: 80px; padding: 8px; background: #0d1117; border: 1px solid #30363d; color: white; border-radius: 5px; }
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        button { background: #21262d; border: 1px solid #30363d; font-size:14px; color: white; padding: 10px 40px; border-radius: 6px; cursor:}

       .select-field1 { display: flex; gap: 6px; padding-top: 30px; font-size:13px; align-items: center;}
       .select-field2 { display: flex; gap: 6px; padding-top: 30px; justify-content: center;
}
       .select-button { flex: 1; text-align: center; }
       .play-bottom { flex: 1; text-align: center; }
       .modeBtn{ background:#21262d; color: #fff; padding: 10px 25px; }
       .modeBtn2{ background:#21262d; color: #fff; margin-left: 2px; padding: 10px 25px; }
       .active{ background:#3237af;color: #fff; border: 1px solid #4146ff; }
       .title { text-align: center; }
       /* Footer */
       footer {
            text-align: center;            
            margin-top: 50px;
            padding: 20px;
            background: #0d1117;
            font-size: 1.3rem;
            color: #aa8;
        }