:root{
    --bg:#0a0a0a;
    --card:#141414;
    --border:#2a2a2a;
    --text:#ffffff;
    --muted:#b0b0b0;
    --accent:#ff2e63;
    --accent2:#00d9ff;
    --radius:10px;
    --maxw:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
}

.login-body{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
}
.login-box{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:40px;
    width:100%;
    max-width:400px;
    text-align:center;
}
.login-box .logo{
    font-size:2rem;
    font-weight:800;
    letter-spacing:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:8px;
}
.login-box .tagline{color:var(--muted);margin-bottom:25px}
.login-box input{
    width:100%;
    padding:12px 15px;
    background:#0a0a0a;
    border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--text);
    font-size:1rem;
    margin-bottom:15px;
}
.login-box input:focus{outline:none;border-color:var(--accent)}
.login-box button{
    width:100%;
    padding:12px;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:var(--radius);
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    transition:opacity .2s;
}
.login-box button:hover{opacity:.85}

.alert{
    padding:12px 15px;
    border-radius:var(--radius);
    margin-bottom:20px;
    font-size:0.9rem;
}
.alert-success{background:rgba(0,217,255,.1);border:1px solid var(--accent2);color:var(--accent2)}
.alert-error{background:rgba(255,46,99,.1);border:1px solid var(--accent);color:var(--accent)}

.admin-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px;
    max-width:var(--maxw);
    margin:0 auto;
    border-bottom:1px solid var(--border);
}
.admin-header .logo{font-size:1.5rem;font-weight:800;letter-spacing:1px;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.admin-nav a{color:var(--muted);text-decoration:none;margin-left:20px;font-size:0.9rem}
.admin-nav a:hover{color:var(--text)}
.admin-nav a.active{color:var(--accent);font-weight:700}

.admin-main{
    max-width:var(--maxw);
    margin:0 auto;
    padding:30px 20px;
}

.stats-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:15px;
    margin-bottom:30px;
}
.stat-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px;
    text-align:center;
}
.stat-card h3{
    font-size:1.8rem;
    font-weight:800;
    color:var(--accent);
}
.stat-card p{color:var(--muted);font-size:0.85rem;margin-top:4px}

.btn{
    display:inline-block;
    padding:8px 16px;
    border-radius:var(--radius);
    text-decoration:none;
    font-size:0.85rem;
    font-weight:600;
    border:none;
    cursor:pointer;
    transition:opacity .2s;
}
.btn:hover{opacity:.85}
.btn-primary{background:var(--accent);color:#fff}
.btn-secondary{background:var(--border);color:var(--text)}
.btn-danger{background:rgba(255,46,99,.15);color:var(--accent);border:1px solid var(--accent)}
.btn-sm{padding:6px 12px;font-size:0.8rem}

.data-table{
    width:100%;
    border-collapse:collapse;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
}
.data-table th,.data-table td{
    padding:14px 16px;
    text-align:left;
    border-bottom:1px solid var(--border);
    font-size:0.9rem;
}
.data-table th{
    background:rgba(255,255,255,.03);
    color:var(--muted);
    font-weight:600;
    text-transform:uppercase;
    font-size:0.75rem;
    letter-spacing:0.5px;
}
.data-table tr:last-child td{border-bottom:none}
.data-table td img{
    width:50px;
    height:50px;
    object-fit:cover;
    border-radius:6px;
    border:1px solid var(--border);
}
.data-table .actions{display:flex;gap:8px}

.form-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:30px;
    max-width:700px;
}
.form-group{margin-bottom:20px}
.form-group label{
    display:block;
    color:var(--muted);
    font-size:0.85rem;
    font-weight:600;
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:12px 14px;
    background:#0a0a0a;
    border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--text);
    font-size:0.95rem;
    font-family:inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{outline:none;border-color:var(--accent)}
.form-group textarea{min-height:120px;resize:vertical}
.form-group small{color:var(--muted);font-size:0.8rem;margin-top:4px;display:block}

.preview-img{
    max-width:200px;
    max-height:200px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    margin-top:10px;
    display:none;
}
.preview-img.show{display:block}

/* TinyMCE dark mode override */
.tox-tinymce{border:1px solid var(--border)!important;border-radius:var(--radius)!important}
.tox .tox-editor-header{background:var(--card)!important}
.tox .tox-toolbar__primary{background:var(--card)!important}
.tox .tox-statusbar{background:var(--card)!important;border-top:1px solid var(--border)!important}
.tox .tox-edit-area__iframe{background:#0a0a0a!important}

@media(max-width:700px){
    .admin-header{flex-direction:column;gap:10px}
    .data-table th,.data-table td{padding:10px}
    .data-table td img{width:40px;height:40px}
    .actions{flex-direction:column;gap:4px}
}