:root {
    --bg:#101820;
    --panel:#1c2935;
    --sidebar:#15212b;
    --border:#30404e;
    --text:#f1f5f9;
    --muted:#9aacbc;
    --accent:#16b6bc;
}
* { box-sizing:border-box; }

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Arial,"Noto Sans Thai",sans-serif;
}

h1 { margin:10px 0; }
p { color:var(--muted); }
a { color:inherit; text-decoration:none; }

.brand {
    color:var(--accent);
    font-size:34px;
    font-weight:800;
    letter-spacing:2px;
}
.brand-sub {
    font-size:11px;
    color:var(--muted);
    letter-spacing:2px;
}

button {
    border:0;
    border-radius:8px;
    padding:13px 20px;
    background:var(--accent);
    color:#092029;
    font-weight:bold;
    cursor:pointer;
}

.login-page {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.login-box {
    width:100%;
    max-width:420px;
    padding:36px;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--panel);
}
.login-box h1 { margin-top:32px; }
.login-box label {
    display:block;
    margin:20px 0 8px;
    font-size:13px;
}
.login-box input {
    display:block;
    width:100%;
    border:1px solid var(--border);
    border-radius:8px;
    padding:13px;
    background:#101d29;
    color:white;
}
.login-box button {
    width:100%;
    margin-top:25px;
}
.error {
    background:#59262b;
    color:#ffe0e0;
    padding:12px;
    border-radius:8px;
}
.footer {
    text-align:center;
    color:var(--muted);
    margin-top:32px;
    font-size:12px;
}

.layout {
    min-height:100vh;
    display:flex;
}
.sidebar {
    width:250px;
    background:var(--sidebar);
    border-right:1px solid var(--border);
    padding:26px;
    display:flex;
    flex-direction:column;
}
.sidebar nav { margin-top:40px; }
.sidebar nav a {
    display:block;
    padding:14px;
    border-radius:8px;
}
.sidebar nav .active {
    background:#25414b;
    color:var(--accent);
}
.sidebar-user { margin-top:auto; }
.sidebar-user p { font-size:12px; }

.content {
    flex:1;
    min-width:0;
    padding:36px;
}
header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
.online { color:#4ade80; }

.stats {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-top:30px;
}
.card,.panel {
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    padding:25px;
}
.card div { color:var(--muted); }
.card strong {
    font-size:40px;
    display:block;
    margin-top:15px;
}
.panel { margin-top:25px; }

@media(max-width:700px) {
    .layout { flex-direction:column; }
    .sidebar { width:100%; }
    .sidebar-user { margin-top:20px; }
    .content { padding:20px; }
    .stats { grid-template-columns:1fr; }
    header { align-items:flex-start; }
}