@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--navy:#16223c;--navy2:#202d4c;--blue:#1577e8;--soft:#f4f7fb;--line:#e2e9f2;--text:#172033;--muted:#69768a;--green:#0fa66d;--red:#e54a5f;--orange:#f59e0b;--white:#fff}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--soft);color:var(--text)}
button,input,select{font:inherit}.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--navy),#121c31);color:#fff;padding:24px 18px;position:sticky;top:0;height:100vh}.logo{font-size:28px;letter-spacing:6px;font-weight:800;margin:0 12px 24px}.logo small{display:block;font-size:9px;letter-spacing:3px;color:#e4b85a;margin-top:6px}.company-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.07);padding:14px;border-radius:16px}.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue);font-weight:800}.company-card small{display:block;color:#c8d2e1;margin-top:5px}.sidebar nav{display:grid;gap:6px;margin-top:18px}.sidebar nav button{height:44px;border:0;border-radius:11px;background:transparent;color:#fff;text-align:left;padding:0 14px;font-weight:700;cursor:pointer}.sidebar nav button:hover,.sidebar nav button.active{background:var(--blue)}.main{padding:26px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.topbar h1{margin:0 0 6px;font-size:26px}.topbar p{margin:0;color:var(--muted)}.top-actions{display:flex;gap:10px}.primary,.ghost{border:0;border-radius:11px;height:44px;padding:0 18px;font-weight:700;cursor:pointer}.primary{background:var(--blue);color:#fff}.ghost{background:#fff;border:1px solid var(--line)}.page{display:none}.page.active{display:block}.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}.kpi span,.kpi small{display:block;color:var(--muted);font-size:12px}.kpi b{display:block;font-size:27px;margin:9px 0}.dash-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;margin-bottom:18px}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 10px 30px rgba(18,34,60,.04);margin-bottom:18px}.panel h2{margin:0 0 16px;font-size:18px}.panel p{color:var(--muted)}.chart{height:220px;display:flex;align-items:end;gap:18px;padding:20px}.chart i{flex:1;background:linear-gradient(#68aef5,#1577e8);border-radius:8px 8px 0 0}.donut{width:170px;height:170px;border-radius:50%;background:conic-gradient(#1577e8 0 40%,#21c58b 40% 70%,#f59e0b 70% 88%,#e54a5f 88%);margin:20px auto;position:relative}.donut:after{content:"";position:absolute;inset:42px;background:#fff;border-radius:50%}.legend{display:flex;justify-content:center;gap:14px;font-size:12px;color:var(--muted)}.summary{padding-left:18px;line-height:2;color:var(--muted)}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);padding:12px;border-bottom:1px solid var(--line)}td{padding:13px 12px;border-bottom:1px solid #eef2f7}.tag{display:inline-block;background:#eaf8f2;color:#087a4e;border-radius:999px;padding:6px 10px;font-weight:700}.promo{display:inline-block;border-radius:999px;padding:6px 10px;font-weight:700}.promo.premium{background:#fff5d8;color:#9d6a00}.promo.featured{background:#e9f3ff;color:#0c68c7}.promo.standard{background:#f0f2f5;color:#586273}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:14px}.filters input,.filters select,.form-grid input,.form-grid select,.inline-form input,.inline-form select{height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:#fff}.property-cell{display:flex;gap:10px;align-items:center}.property-cell img{width:76px;height:52px;object-fit:cover;border-radius:8px}.property-cell small{display:block;color:var(--muted);margin-top:4px}.actions{display:flex;flex-wrap:wrap;gap:5px}.actions button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 8px;font-size:11px;cursor:pointer}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.form-grid label{display:grid;gap:7px;font-size:12px;font-weight:700;color:var(--muted)}.form-panel>label{display:grid;gap:8px;margin:14px 0;font-size:12px;font-weight:700;color:var(--muted)}.inline-form{display:none;grid-template-columns:1fr 1fr 1fr auto;gap:10px;margin-bottom:14px}.inline-form.show{display:grid}.permission-row{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}.permission-row>div{display:flex;flex-wrap:wrap;gap:14px}.permission-row label{font-size:12px}.credits{grid-template-columns:repeat(4,1fr)}.mini-card{background:#f8fbff;border:1px solid var(--line);padding:20px;border-radius:14px}.mini-card b{font-size:28px}.toast{position:fixed;right:20px;top:20px;background:#0fa66d;color:#fff;padding:14px 18px;border-radius:10px;display:none;z-index:999}.toast.show{display:block}.table-wrap{overflow:auto}
@media(max-width:1200px){.kpis{grid-template-columns:repeat(3,1fr)}.dash-grid{grid-template-columns:1fr}.app{grid-template-columns:230px 1fr}}
@media(max-width:780px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.main{padding:14px}.kpis,.credits{grid-template-columns:repeat(2,1fr)}.form-grid,.filters,.inline-form{grid-template-columns:1fr}.topbar{display:block}.top-actions{margin-top:12px}.permission-row{grid-template-columns:1fr}.sidebar nav{grid-template-columns:1fr 1fr}}