:root{--primary:#1d4ed8;--primary-600:#1e40af;--primary-700:#1e3a8a;--accent:#0ea5e9;--ring:#93c5fd;--bg:#f2f6ff;--card:#ffffff;--text:#0b1220;--muted:#5b6b88}
*{box-sizing:border-box}
html,body,#root{height:100%}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:linear-gradient(180deg,#f6f9ff 0%,#eef4ff 100%);color:var(--text)}
.app{min-height:100%;display:flex;flex-direction:column}
.layout{display:grid;grid-template-columns:260px 1fr;gap:0;min-height:100vh}
.sidebar{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--primary-700),var(--primary));color:#fff;box-shadow:0 8px 20px rgba(29,78,216,.25);position:sticky;top:0;min-height:100vh}
.sidebar .brand{padding:16px 18px;font-weight:800;letter-spacing:.3px}
.sidebar .menu{display:flex;flex-direction:column;padding:8px;overflow-y:auto;flex:1}
.sidebar a{color:#fff;text-decoration:none;padding:10px 12px;border-radius:10px;margin:4px 8px;transition:all .2s ease;display:flex;align-items:center;gap:10px}
.sidebar a:hover{background:rgba(255,255,255,.18)}
.sidebar a.active{background:rgba(255,255,255,.26)}
.ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.ic svg{width:18px;height:18px;stroke-width:1.8;stroke:currentColor;fill:none}
.sidebar .user{margin-top:auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,.2);display:flex;align-items:center;gap:8px}
.main{display:flex;flex-direction:column;min-height:100vh}
.container{max-width:1180px;margin:22px auto;padding:0 18px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{background:rgba(255,255,255,.92);border:1px solid #e7eefc;border-radius:18px;box-shadow:0 10px 30px rgba(29,78,216,.12);padding:18px;backdrop-filter:saturate(180%) blur(6px)}
.hero{background:linear-gradient(135deg,#e0ebff 0%,#ffffff 100%);border:1px solid #dbe7ff}
.stat{display:flex;align-items:center;gap:14px}
.stat .num{font-size:26px;font-weight:800;color:var(--primary-600)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:none;border-radius:12px;background:linear-gradient(180deg,var(--primary),var(--primary-600));color:#fff;cursor:pointer;box-shadow:0 10px 20px rgba(29,78,216,.25);transition:transform .1s ease,filter .2s ease}
.btn:hover{filter:saturate(110%)}
.btn.secondary{background:#eaf2ff;color:#103575;box-shadow:none}
.btn:active{transform:translateY(1px)}
.table{width:100%;border-collapse:collapse}
.table thead th{padding:12px;border-bottom:2px solid #eaf0fc;background:#f7f9ff;font-weight:700;color:#183059}
.table td{padding:12px;border-bottom:1px solid #eef2f9}
.table tbody tr:hover{background:#f7fbff}
.input{width:100%;padding:12px 12px;border:1px solid #dbe3f5;border-radius:12px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.input:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px rgba(147,197,253,.35)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1}
.kbd{background:#103575;color:#fff;padding:4px 8px;border-radius:8px;font-size:12px}
.footer{margin-top:auto;padding:18px;text-align:center;color:#5f6b86}
@media (max-width:1024px){.container{max-width:960px}.grid{gap:16px}}
@media (max-width:768px){.grid{grid-template-columns:repeat(6,1fr)}.layout{grid-template-columns:1fr}.sidebar{box-shadow:none}}
@media (max-width:480px){.grid{grid-template-columns:repeat(4,1fr)}.container{padding:0 12px}}