:root{--bg:#f5f7fb;--panel:#fff;--line:#e7ecf4;--text:#102554;--muted:#8190a8;--blue:#3478f6;--green:#22b981;--orange:#f59e0b;--purple:#8b5cf6;--red:#ef4444}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Tahoma,Arial,sans-serif}a{text-decoration:none;color:inherit}
.layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{background:#0f234f;color:#fff;padding:24px;display:flex;flex-direction:column;gap:20px}
.brand{display:flex;align-items:center;gap:12px}.brand strong{display:block}.brand span{display:block;color:#d7deec;font-size:13px}.brand-mark{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#1d4ed8,#102554);display:grid;place-items:center;color:#fff;font-weight:700}
.nav{display:flex;flex-direction:column;gap:8px}.nav-link{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;color:#d7deec}.nav-link.active,.nav-link:hover{background:rgba(255,255,255,.1);color:#fff}.logout-link{margin-top:auto;padding:14px 16px;border:1px solid rgba(255,255,255,.15);border-radius:16px;text-align:center}
.main{padding:28px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:16px}.topbar h1{margin:0 0 6px;font-size:34px}.topbar p{margin:0;color:var(--muted)}.topbar-user{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);padding:12px 16px;border-radius:20px}.topbar-user span{display:block;color:var(--muted);font-size:13px}.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#dbe8ff;color:#1d4ed8;font-weight:700}
.cards-grid{display:grid;gap:18px;margin-bottom:20px}.cards-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cards-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cards-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat-card,.metric-card,.panel,.project-card{background:var(--panel);border:1px solid var(--line);border-radius:26px;box-shadow:0 10px 28px rgba(16,37,84,.05)}.stat-card{padding:22px;display:flex;align-items:center;gap:16px}
.stat-card span,.metric-card span,.panel-header span,.hero-panel p,.project-card p,.simple-item span,.activity-item p,.hint{color:var(--muted)}.stat-card strong,.metric-card strong{display:block;font-size:32px;margin:8px 0}.stat-icon{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;font-size:30px}.stat-icon.blue{background:#dbe8ff}.stat-icon.green{background:#daf8ee}.stat-icon.orange{background:#fff1d9}.stat-icon.purple{background:#eee5ff}
.hero-panel{background:linear-gradient(135deg,#102554,#1e4288);color:#fff;padding:28px;border-radius:28px;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:16px}.hero-panel h2{font-size:38px;margin:0 0 8px}.hero-panel p{color:#dfe6f5}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.button{border:none;border-radius:16px;padding:13px 18px;cursor:pointer;font:inherit;display:inline-flex;align-items:center;justify-content:center}.button-primary{background:var(--blue);color:#fff}.button-secondary{background:#eef3ff;color:var(--blue);border:1px solid #dbe8ff}
.split-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-bottom:20px}.panel{padding:22px}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-header h3{margin:0 0 6px;font-size:28px}
.pie-wrap{display:grid;grid-template-columns:260px 1fr;align-items:center;gap:20px}.pie-chart{width:220px;height:220px;border-radius:50%;margin:auto;border:16px solid #fff;box-shadow:inset 0 0 0 1px var(--line)}.legend{display:flex;flex-direction:column;gap:10px}.legend-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#f7f9fd}.legend-row strong{margin-inline-start:auto}.legend-dot{width:12px;height:12px;border-radius:999px;background:#8da2c2}
.legend-dot.badge-success{background:var(--green)}.legend-dot.badge-warning{background:var(--orange)}.legend-dot.badge-danger{background:var(--red)}.legend-dot.badge-info{background:var(--blue)}
.bar-chart{height:220px;display:flex;align-items:flex-end;gap:14px;padding:10px;background:#f7f9fd;border-radius:20px}.bar-group{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}.bar{width:24px;border-radius:12px 12px 6px 6px}.bar.invoice{background:#fca5a5}.bar.paid{background:#60a5fa}.chart-meta{display:flex;gap:18px;margin-top:14px;color:var(--muted)}.dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-left:8px}.dot.invoice{background:#fca5a5}.dot.paid{background:#60a5fa}
.metric-card{padding:22px}.activity-list,.simple-list{display:flex;flex-direction:column;gap:12px}.activity-item,.simple-item,.ticket-form{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:#f7f9fd}.activity-item strong,.simple-item strong{display:block;margin-bottom:6px}.activity-item span,.simple-item span,.ticket-form span{font-size:13px}.activity-icon{width:36px;height:36px;border-radius:12px;background:#dbe8ff;color:var(--blue);display:grid;place-items:center}
.page-actions{margin-bottom:18px}.inline-form,.stack-form{display:flex;gap:12px;flex-wrap:wrap;background:var(--panel);padding:18px;border-radius:24px;border:1px solid var(--line);box-shadow:0 10px 28px rgba(16,37,84,.05)}.stack-form{flex-direction:column}input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit}textarea{min-height:90px;resize:vertical}.inline-form input,.inline-form select{flex:1;min-width:150px}.inline-form .button{min-width:150px}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:14px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}.data-table th{color:var(--muted);font-size:13px}.badge{display:inline-flex;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700}.badge-success{background:#def7ec;color:#11795d}.badge-warning{background:#fff4d9;color:#b06b00}.badge-danger{background:#ffe4e6;color:#c33248}.badge-info{background:#e5efff;color:#2b61d1}
.project-card{padding:24px}.project-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.project-header h3{margin:0 0 4px;font-size:28px}.project-meta{display:grid;gap:6px;margin-bottom:14px}.progress-wrap{display:flex;align-items:center;gap:14px}.progress-bar{height:10px;flex:1;background:#e5eaf2;border-radius:999px;overflow:hidden}.progress-bar div{height:100%;background:linear-gradient(90deg,#2563eb,#8b5cf6)}
.auth-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#eff4ff,#f8fafc)}.auth-card{width:min(100%,460px);background:var(--panel);border-radius:28px;padding:28px;border:1px solid var(--line);box-shadow:0 20px 40px rgba(16,37,84,.08)}.auth-card h1{margin:18px 0 10px}.auth-brand{margin-bottom:10px}.auth-form{display:grid;gap:14px;margin-top:18px}.auth-form label{display:grid;gap:8px;color:var(--text);font-weight:700}.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}.alert{padding:14px 16px;border-radius:16px;margin-top:10px}.alert-danger{background:#ffe4e6;color:#b42318}.ticket-form{justify-content:space-between;flex-wrap:wrap}
@media (max-width:1200px){.cards-grid-4,.cards-grid-3,.cards-grid-2,.split-grid,.pie-wrap{grid-template-columns:1fr}}@media (max-width:900px){.layout{grid-template-columns:1fr}.sidebar{padding:18px}.main{padding:18px}.topbar{flex-direction:column;align-items:flex-start}.hero-panel{flex-direction:column;align-items:flex-start}}