:root{
  --brand:#003568; --brand2:#ff762d; --ink:#1f2937; --muted:#6b7280;
  --bg:#f4f6f9; --card:#fff; --line:#e5e7eb; --sidebar:#0e2438;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* Layout */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;flex:0 0 240px;background:var(--sidebar);color:#cbd5e1;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar .brand{padding:18px 18px 14px;font-weight:700;color:#fff;font-size:1.05rem;letter-spacing:.3px}
.sidebar .brand .logo{color:var(--brand2)}
.sidebar .nav{padding:6px}
.sidebar .nav-link{color:#a9bcd0;border-radius:8px;padding:10px 12px;margin:2px 4px;display:flex;align-items:center;gap:10px;font-size:.95rem}
.sidebar .nav-link .ico{opacity:.8;width:18px;text-align:center}
.sidebar .nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar .nav-link.active{background:var(--brand2);color:#fff}
.sidebar-foot{margin-top:auto;padding:14px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-foot .me{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.me-name{color:#fff;font-size:.9rem;font-weight:600;line-height:1.1}
.me-role{color:#8aa0b6;font-size:.72rem}
.sidebar-foot .logout{color:#8aa0b6;font-size:.85rem;text-decoration:none}
.sidebar-foot .logout:hover{color:#fff}
.content{flex:1;padding:26px 30px;max-width:100%;overflow-x:hidden}

/* Headings */
.page-title{font-weight:700;color:var(--brand);margin:0 0 2px;font-size:1.5rem}
.page-sub{color:var(--muted);margin-bottom:20px;font-size:.9rem}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.kpi .k-label{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.4px}
.kpi .k-value{font-size:1.7rem;font-weight:700;color:var(--brand);margin-top:4px}
.kpi .k-value.small{font-size:1.25rem}
.kpi.accent .k-value{color:var(--brand2)}

/* Cards / tables */
.card{border:1px solid var(--line);border-radius:12px}
.card-hd{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.table{margin:0}
.table thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:2px solid var(--line)}
.table td{vertical-align:middle;font-size:.9rem}
.table a{color:var(--brand);text-decoration:none;font-weight:600}
.table a:hover{text-decoration:underline}

/* Pipeline board */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.col-op{background:#eef1f5;border-radius:12px;padding:10px}
.col-op h6{font-size:.8rem;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);display:flex;justify-content:space-between;padding:4px 6px}
.op-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.op-card .op-amt{font-weight:700;color:var(--brand)}
.op-card .op-title{font-size:.86rem;margin:2px 0}
.op-card .op-meta{font-size:.75rem;color:var(--muted)}

/* Auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0e2438,#003568)}
.auth-card{background:#fff;border-radius:14px;padding:34px;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.auth-card h1{font-size:1.3rem;color:var(--brand);font-weight:700;margin-bottom:4px}
.auth-card .logo{color:var(--brand2)}

.chip{display:inline-block;background:#eef1f5;border-radius:20px;padding:2px 10px;font-size:.75rem;color:#374151;margin:1px}
.text-brand{color:var(--brand)}
.stars{color:#f5b301;letter-spacing:1px}
@media(max-width:800px){.sidebar{width:64px;flex-basis:64px}.sidebar .brand span:not(.logo),.me-info,.nav-link span:not(.ico),.sidebar-foot .logout{display:none}}