:root{
--bg:#0b0b0c;
--panel:#161617;
--accent:#007aff;
--text:#f5f5f7;

--cha:#ffd60a;
--amu:#32d74b;
--exc:#ff9f0a;
--con:#64d2ff;
--sus:#bf5af2;
--lou:#5e5ce6;
--pan:#ff453a;
}

/* Reset */
*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

body{
margin:0;
font-family:-apple-system,system-ui,sans-serif;
background:var(--bg);
color:var(--text);
padding:env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
}

/* Container */
.container{
max-width:1100px;
margin:auto;
background:var(--panel);
padding:25px;
border-radius:20px;
box-shadow:0 30px 60px rgba(0,0,0,0.5);
}

/* Header */
.top-bar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}

.top-bar span{
color:var(--accent);
}

.top-actions{
display:flex;
gap:12px;
align-items:center;
}

.gear-btn{
width:44px;
height:44px;
border-radius:12px;
background:#1c1c1e;
border:1px solid #333;
color:white;
font-size:18px;
cursor:pointer;
}

/* Config row */
.config-row{
display:flex;
gap:10px;
margin-bottom:15px;
}

select{
flex:1;
background:#1c1c1e;
border:1px solid #333;
color:white;
padding:12px;
border-radius:10px;
font-size:14px;
}

/* Toolbar */
.toolbar{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:15px;
padding:12px;
background:#252525;
border-radius:12px;
border:1px solid #333;
}

.btn{
min-width:44px;
min-height:44px;
border:none;
border-radius:12px;
background:#2c2c2e;
color:white;
font-size:18px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:0.15s ease;
}

.btn:active{
transform:scale(0.95);
}

/* Editor */
.editor-container{
position:relative;
margin-top:10px;
}

#editor,
#codeEditor{
width:100%;
min-height:350px;
padding:20px;
border-radius:16px;
font-size:18px;
line-height:1.7;
border:1px solid #333;
}

#editor{
background:#000;
color:#ccc;
outline:none;
}

#codeEditor{
background:#111;
color:#75beff;
display:none;
resize:vertical;
}

/* Toggle button */
.toggle-code{
position:absolute;
top:10px;
right:10px;
background:#1c1c1e;
border:1px solid #333;
color:white;
border-radius:8px;
padding:6px 10px;
cursor:pointer;
}

/* Progress */
.progress-box{
height:8px;
background:#333;
border-radius:10px;
overflow:hidden;
margin-top:15px;
}

#progressBar{
height:100%;
width:0%;
background:var(--accent);
transition:width 0.2s ease;
}

.status{
text-align:center;
margin-top:8px;
font-size:13px;
color:#aaa;
}

/* Buttons */
.primary-btn{
width:100%;
padding:18px;
border:none;
border-radius:16px;
background:var(--accent);
color:white;
margin-top:15px;
font-size:16px;
cursor:pointer;
}

.primary-btn:disabled{
background:#2c2c2e;
color:#555;
cursor:not-allowed;
}

/* Player */
.player-zone{
display:none;
margin-top:20px;
background:#252525;
padding:20px;
border-radius:15px;
border:1px solid #333;
}

.download-btn{
margin-top:10px;
width:100%;
padding:14px;
border-radius:12px;
border:none;
background:#2c2c2e;
color:white;
font-size:15px;
cursor:pointer;
}

/* Admin panel */
.admin-panel{
display:none;
background:#1c1c1e;
padding:15px;
border-radius:16px;
border:1px solid var(--accent);
margin-bottom:15px;
}

.admin-info{
font-size:12px;
color:#aaa;
margin-bottom:10px;
line-height:1.4;
}

.admin-row{
display:grid;
grid-template-columns:120px 1fr 1fr;
gap:10px;
align-items:center;
margin-bottom:8px;
font-size:13px;
}

/* Login */
.login-box{
margin-top:20vh;
text-align:center;
background:#1c1c1e;
padding:40px;
border-radius:20px;
border:1px solid #333;
max-width:320px;
margin-left:auto;
margin-right:auto;
}

.login-box input{
width:100%;
margin-bottom:10px;
padding:12px;
background:#2c2c2e;
border:1px solid #333;
color:white;
border-radius:8px;
}

.login-box button{
width:100%;
padding:12px;
border:none;
border-radius:12px;
background:var(--accent);
color:white;
cursor:pointer;
}

.error{
color:red;
font-size:12px;
margin-bottom:10px;
}

/* Mobile tweaks */
@media (max-width:600px){
.container{
padding:15px;
}
.admin-row{
grid-template-columns:1fr;
}
}