:root {
  --bg: #f5f7fb;
  --panel: rgba(255,255,255,0.88);
  --panel-solid: #ffffff;
  --text: #152033;
  --muted: #6b7280;
  --line: rgba(15,23,42,0.08);
  --shadow: 0 20px 60px rgba(15,23,42,0.08);
  --primary: #0f62fe;
  --primary-soft: rgba(15,98,254,0.08);
  --success: #1a7f37;
  --danger: #d92d20;
  --radius: 24px;
  --radius-sm: 16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,sans-serif;color:var(--text);background:
radial-gradient(circle at top left, rgba(15,98,254,0.08), transparent 28%),
radial-gradient(circle at right, rgba(84,160,255,0.1), transparent 22%),
var(--bg);
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
body{min-height:100vh}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:292px;background:rgba(255,255,255,.72);backdrop-filter:blur(18px);border-right:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:14px}.brand strong{display:block;font-size:1rem;font-weight:600}.brand span{color:var(--muted);font-size:.9rem}
.brand-logo{width:52px;height:52px;border-radius:18px;box-shadow:var(--shadow)}
.menu{display:grid;gap:8px}.menu a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;color:#415067;font-weight:500;transition:.2s ease}.menu a.active,.menu a:hover{background:var(--panel-solid);box-shadow:0 10px 30px rgba(15,23,42,0.06);color:var(--text)}
.sidebar-footer{margin-top:auto;display:grid;gap:14px}.mini-user{display:flex;align-items:center;gap:12px;padding:16px;border-radius:20px;background:var(--panel-solid);box-shadow:var(--shadow)}.mini-user span{display:block;color:var(--muted);font-size:.9rem}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0f62fe,#69a3ff);color:#fff;font-weight:600}
.content{flex:1;padding:28px}.content-auth{display:grid;place-items:center;padding:32px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.topbar h1{margin:0;font-size:1.85rem;font-weight:600;letter-spacing:-.02em}.topbar p{margin:.35rem 0 0;color:var(--muted)}
.grid{display:grid;gap:18px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--panel);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.65);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.metric h3{margin:0 0 8px;font-size:.95rem;color:var(--muted);font-weight:500}.metric strong{font-size:2rem;font-weight:600;letter-spacing:-.03em}.metric span{display:block;color:var(--muted);margin-top:10px}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.card-header h2,.card-header h3{margin:0;font-size:1.05rem;font-weight:600}.card-header p{margin:4px 0 0;color:var(--muted);font-size:.95rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:16px;padding:12px 16px;background:var(--primary);color:#fff;font-weight:500;cursor:pointer;transition:.2s ease;box-shadow:0 12px 28px rgba(15,98,254,0.22)}.btn:hover{transform:translateY(-1px)}
.btn-secondary{background:#fff;color:var(--text);box-shadow:0 10px 30px rgba(15,23,42,0.08);border:1px solid var(--line)}.btn-danger{background:var(--danger);box-shadow:none}.btn-block{width:100%}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:grid;gap:8px}.field label{font-size:.92rem;font-weight:500;color:#314056}.field input,.field select,.field textarea{width:100%;border-radius:16px;border:1px solid rgba(15,23,42,0.1);background:rgba(255,255,255,.85);padding:14px 15px;color:var(--text);outline:none;transition:.2s ease}.field textarea{min-height:120px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(15,98,254,.35);box-shadow:0 0 0 4px rgba(15,98,254,.08)}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);font-size:.95rem}.table th{color:#4b5563;font-weight:600}.table tr:hover td{background:rgba(255,255,255,.5)}
.badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-size:.82rem;font-weight:500;background:#eef3ff;color:#1947a6}.badge.success{background:#eaf7ee;color:#196b34}.badge.warn{background:#fff4e5;color:#a15c00}.badge.danger{background:#fdecec;color:#a52714}
.alert{padding:14px 16px;border-radius:16px;margin-bottom:18px;font-weight:500}.alert-success{background:#ecfdf3;color:#166534;border:1px solid #bbf7d0}.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.auth-card{width:min(460px,100%);padding:30px}.auth-brand{text-align:center;margin-bottom:20px}.auth-brand img{width:68px;height:68px;border-radius:22px;box-shadow:var(--shadow)}.auth-brand h1{margin:16px 0 8px;font-size:1.8rem;font-weight:600;letter-spacing:-.03em}.auth-brand p{margin:0;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.empty{padding:30px;border:1px dashed rgba(15,23,42,0.14);border-radius:20px;text-align:center;color:var(--muted);background:rgba(255,255,255,.5)}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap}.pill-list{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width: 1100px){.grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{width:245px}}
@media (max-width: 820px){.app-shell{display:block}.sidebar{position:relative;width:100%;height:auto;border-right:none;border-bottom:1px solid var(--line)}.content{padding:18px}.form-grid,.kpis,.grid.cards{grid-template-columns:1fr}.topbar{display:block}}