:root { --bg:#0a0a0f; --surface:#13131a; --border:#1e1e2e; --accent:#00ff88; --text:#e8e8f0; --muted:#5a5a7a; --danger:#ff4757; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'Syne',sans-serif; min-height:100vh; display:flex; }

.admin-layout { display:flex; width:100%; height:100vh; }
.sidebar { width:250px; background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; padding:1.5rem 0; }
.main-content { flex:1; overflow-y:auto; padding:2rem 1rem; }

.logo { padding:0 1.5rem; margin-bottom:2rem; }
.logo h1 { font-size:1.25rem; font-weight:800; margin-bottom:0.25rem; }
.logo .sub { font-size:0.65rem; font-family:'Space Mono',monospace; color:var(--muted); }

.menu { list-style:none; }
.menu li { margin:0.5rem 0; }
.menu a { display:block; padding:0.75rem 1.5rem; color:var(--muted); text-decoration:none; font-size:0.9rem; transition:all 0.2s; }
.menu a:hover, .menu a.active { background:rgba(0,255,136,0.1); color:var(--accent); border-left:2px solid var(--accent); padding-left:calc(1.5rem - 2px); }

.container { max-width:1000px; margin:0 auto; }
h1 { font-size:1.5rem; font-weight:800; margin-bottom:0.25rem; }
.sub { font-size:0.7rem; font-family:'Space Mono',monospace; color:var(--muted); margin-bottom:2rem; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.5rem; margin-bottom:1.5rem; }
.card h2 { font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:1rem; }

label { display:block; font-size:0.7rem; font-family:'Space Mono',monospace; color:var(--muted); margin-bottom:0.3rem; margin-top:0.75rem; text-transform:uppercase; letter-spacing:0.05em; }
input[type=text],input[type=password],input[type=color],select { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:0.7rem 0.9rem; color:var(--text); font-family:'Syne',sans-serif; font-size:0.9rem; outline:none; transition:border-color 0.2s; }
input[type=text]:focus,input[type=password]:focus,select:focus { border-color:var(--accent); }
input[type=color] { height:42px; padding:0.3rem; cursor:pointer; }

.btn { display:inline-block; background:var(--accent); color:#000; border:none; border-radius:8px; padding:0.7rem 1.4rem; font-family:'Syne',sans-serif; font-weight:700; font-size:0.9rem; cursor:pointer; margin-top:1rem; transition:opacity 0.2s; }
.btn:hover { opacity:0.85; }
.btn-danger { background:transparent; border:1px solid var(--danger); color:var(--danger); padding:0.35rem 0.7rem; font-size:0.75rem; margin-top:0; }
.btn-sm { padding:0.35rem 0.75rem; font-size:0.75rem; margin-top:0; }

.msg { background:rgba(0,255,136,0.1); border:1px solid rgba(0,255,136,0.3); border-radius:8px; padding:0.7rem 1rem; font-family:'Space Mono',monospace; font-size:0.8rem; color:var(--accent); margin-bottom:1rem; }
.msg.err { background:rgba(255,71,87,0.1); border-color:rgba(255,71,87,0.3); color:var(--danger); }

.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin-bottom:2rem; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.5rem; text-align:center; }
.stat-number { font-size:2.5rem; font-weight:800; color:var(--accent); margin-bottom:0.5rem; }
.stat-label { font-size:0.8rem; color:var(--muted); text-transform:uppercase; }

table { width:100%; border-collapse:collapse; font-size:0.85rem; }
th { text-align:left; font-size:0.65rem; font-family:'Space Mono',monospace; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); }
td { padding:0.65rem 0.75rem; border-bottom:1px solid rgba(255,255,255,0.04); vertical-align:middle; }
.color-dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.login-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:100vh; gap:1rem; padding:1rem; }

/* Modal styles */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:2000; align-items:center; justify-content:center; }
.modal.active { display:flex; }
.modal-content { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:2rem; max-width:500px; width:90%; max-height:80vh; overflow-y:auto; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.modal-header h2 { margin:0; }
.modal-close { background:none; border:none; color:var(--muted); font-size:1.5rem; cursor:pointer; padding:0; }
.modal-close:hover { color:var(--text); }

@media (max-width:768px) {
  .admin-layout { flex-direction:column; }
  .sidebar { width:100%; border-right:none; border-bottom:1px solid var(--border); padding:1rem; height:auto; }
  .main-content { padding:1rem 0.5rem; }
  .menu a { padding:0.5rem 1rem; }
  
  .login-wrap { padding:1rem 0.5rem; min-height:auto; }
  .login-wrap .card { width:100%; max-width:100%; }
}