html,body,#root{width:100%;min-height:100vh;margin:0;padding:0}body{background:#111318}:root{--bg:#111318;--panel:#181b22;--panel-soft:#20242d;--border:#2f3542;--text:#f5f5f5;--muted:#a9b4c2;--accent:#c56b2c;--danger:#dc3545;--success:#198754}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Inter,Arial,sans-serif}.app-layout{min-height:100vh;display:flex}.sidebar{background:var(--panel);border-right:1px solid var(--border);width:240px;height:100vh;padding:24px 18px;position:sticky;top:0}.sidebar-logo{width:150px;margin:0 auto 35px;display:block}.sidebar a{color:var(--muted);border-radius:8px;margin-bottom:6px;padding:10px 14px;font-weight:600;text-decoration:none;display:block}.sidebar a:hover{background:var(--panel-soft);color:#fff}.sidebar ul,.sidebar li{margin:0;padding:0;list-style:none}.sidebar li::marker{content:""}.login-page{background:linear-gradient(135deg,#0f172a 0%,#111827 50%,#1e293b 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{text-align:center;background:#181b22;border:1px solid #2f3542;border-radius:20px;width:100%;max-width:450px;padding:40px;box-shadow:0 25px 50px #00000073,0 0 0 1px #ffffff0a}.login-logo{width:180px;height:auto;margin:0 auto 20px;display:block}.login-card .page-title{color:#fff;margin-bottom:10px;font-size:42px}.page-subtitle{color:#94a3b8;margin-bottom:30px;font-size:15px}.login-form{flex-direction:column;gap:16px;display:flex}.login-form input{color:#fff;background:#20242d;border:1px solid #334155;border-radius:12px;width:100%;height:52px;padding:0 16px;font-size:15px}.login-form input:focus{border-color:#c56b2c;outline:none;box-shadow:0 0 0 3px #c56b2c40}.login-form button{color:#fff;background:#c56b2c;border:none;border-radius:12px;width:100%;height:52px;font-size:16px;font-weight:700;transition:all .3s}.login-form button:hover{background:#d97706;transform:translateY(-2px)}.dashboard-grid{grid-template-columns:1fr 1fr;gap:24px;display:grid}.main-content{flex:1;padding:32px;overflow-x:hidden}.page-title{text-align:center;margin:0 0 25px;font-size:42px}.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:24px;padding:20px}.form-row{flex-wrap:wrap;gap:12px;margin-bottom:16px;display:flex}input,select,button{border:1px solid var(--border);background:var(--panel-soft);color:var(--text);border-radius:8px;padding:10px 12px}button{background:var(--accent);cursor:pointer;border:none;font-weight:700}button:hover{opacity:.9}.table-wrapper{border:1px solid var(--border);background:var(--panel);border-radius:14px;width:100%;overflow-x:auto}.data-table{border-collapse:collapse;width:100%;min-width:1000px}.data-table th,.data-table td{border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;padding:14px 16px}.data-table th{background:var(--panel-soft);color:var(--text);font-size:14px}.data-table td{color:var(--muted)}.badge{border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700}.badge-success{background:var(--success);color:#fff}.badge-danger{background:var(--danger);color:#fff}@media (width<=1100px){.dashboard-grid{grid-template-columns:1fr}}@media (width<=768px){.app-layout{flex-direction:column}.sidebar{width:100%;min-width:100%;height:auto;padding:18px;position:relative}.sidebar-logo{width:110px;margin:0 auto 18px}.sidebar ul{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.sidebar li{list-style:none}.sidebar a{text-align:center;background:#202635;border:1px solid #303848;border-radius:12px;margin:0;padding:12px 10px;font-size:14px}.sidebar a:hover{color:#fff;background:#c46a2f}.sidebar .logout-btn{width:100%;margin-top:14px}.login-card{padding:25px}.login-logo{width:140px}.login-card .page-title{font-size:32px}.main-content{padding:18px}input,select,button{width:100%}.data-table{min-width:850px}}