@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--global-color-xhost-light:#9bbd23;--global-color-xhost-base:#52a62c;--global-color-xhost-dark:#3c6626;--global-color-slate-800:#37474f;--global-color-slate-900:#263238;--global-color-gray-50:#f8f9fa;--global-color-gray-300:#dee2e6;--global-color-gray-400:#ced4da;--global-color-gray-600:#868e96;--global-color-gray-900:#212529;--global-color-green-500:#28a745;--global-color-red-500:#dc3545;--global-color-yellow-500:#ffc107;--global-color-blue-500:#17a2b8;--global-color-white:#fff;--global-size-4:.25rem;--global-size-8:.5rem;--global-size-12:.75rem;--global-size-16:1rem;--global-size-24:1.5rem;--global-size-32:2rem;--global-size-48:3rem;--global-size-64:4rem;--font-family-main:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--color-primary-base:var(--global-color-xhost-base);--color-primary-hover:var(--global-color-xhost-dark);--color-primary-light:var(--global-color-xhost-light);--color-secondary-base:var(--global-color-slate-800);--color-secondary-hover:var(--global-color-slate-900);--color-success:var(--global-color-green-500);--color-error:var(--global-color-red-500);--color-warning:var(--global-color-yellow-500);--color-info:var(--global-color-blue-500);--surface-app:var(--global-color-gray-50);--surface-main:var(--global-color-white);--border-subtle:var(--global-color-gray-300);--border-strong:var(--global-color-gray-400);--text-main:var(--global-color-gray-900);--text-muted:var(--global-color-gray-600);--text-inverse:var(--global-color-white);--space-xs:var(--global-size-4);--space-sm:var(--global-size-8);--space-md:var(--global-size-12);--space-lg:var(--global-size-16);--space-xl:var(--global-size-24);--space-2xl:var(--global-size-32);--space-3xl:var(--global-size-48);--space-4xl:var(--global-size-64);--radius-none:0px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 1px 3px #0000001f, 0 1px 2px #0000003d;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--btn-primary-bg:var(--color-primary-base);--btn-primary-bg-hover:var(--color-primary-hover);--btn-primary-text:var(--text-inverse);--btn-secondary-bg:var(--color-secondary-base);--btn-secondary-bg-hover:var(--color-secondary-hover);--btn-secondary-text:var(--text-inverse);--btn-padding-y:var(--space-md);--btn-padding-x:var(--space-xl);--btn-radius:var(--radius-sm);--input-bg:var(--surface-main);--input-text:var(--text-main);--input-border:var(--border-strong);--input-border-focus:var(--color-primary-base);--input-padding:var(--space-md);--input-radius:var(--radius-sm);--state-focus-ring:0 0 0 3px #52a62c4d;--card-bg:var(--surface-main);--card-border:var(--border-subtle);--card-shadow:var(--shadow-sm);--card-padding:var(--space-lg);--card-radius:var(--radius-md)}body{font-family:var(--font-family-main);background-color:var(--surface-app);color:var(--text-main);margin:0;padding:0}.sidebar{background-color:var(--color-secondary-hover);width:260px;color:var(--text-inverse);flex-direction:column;height:100vh;display:flex}.sidebar-item{padding:var(--space-md);cursor:pointer;border-left:4px solid #0000;align-items:center;transition:background .2s;display:flex}.sidebar-item:hover{background-color:#ffffff0d}.sidebar-item.active{background-color:var(--color-primary-light);border-left-color:var(--color-primary-base)}.btn{padding:var(--btn-padding-y) var(--btn-padding-x);border-radius:var(--btn-radius);cursor:pointer;border:none;font-weight:500;transition:transform .1s,box-shadow .2s}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--btn-primary-bg);color:var(--btn-primary-text)}.btn-secondary{background-color:var(--btn-secondary-bg);color:var(--btn-secondary-text)}.form-input{width:100%;padding:var(--input-padding);border:1px solid var(--input-border);background-color:var(--input-bg);color:var(--input-text);border-radius:var(--input-radius);outline:none;transition:border-color .2s,box-shadow .2s}.form-input:focus{border-color:var(--input-border-focus);box-shadow:var(--state-focus-ring)}.card{background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);border:1px solid var(--card-border);overflow:hidden}.card-header{padding:var(--space-md);background-color:var(--surface-main);border-bottom:1px solid var(--border-subtle);color:var(--text-main);justify-content:space-between;align-items:center;display:flex}html,body{background-color:var(--surface-app);width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}#app{width:100%;height:100vh;display:flex}.dashboard-layout{flex-direction:column;width:100%;height:100vh;display:flex}.main-content{flex-direction:column;flex:1;display:flex;overflow-y:auto}.topbar{padding:var(--space-md) var(--space-xl);background-color:var(--surface-main);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;height:70px;display:flex}.search-bar{align-items:center;width:300px;display:flex;position:relative}.search-bar i{left:var(--space-md);color:var(--text-muted);position:absolute}.search-bar input{width:100%;padding-left:40px}.user-profile{align-items:center;gap:var(--space-md);display:flex}.user-profile .avatar{border-radius:var(--radius-full);background-color:var(--color-primary-light);width:40px;height:40px;color:var(--color-primary-base);justify-content:center;align-items:center;font-weight:600;display:flex}.content-area{padding:var(--space-xl)}.kpi-grid{gap:var(--space-xl);margin-bottom:var(--space-xl);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.kpi-card{align-items:center;gap:var(--space-lg);display:flex}.kpi-icon{border-radius:var(--radius-md);justify-content:center;align-items:center;width:48px;height:48px;display:flex}.kpi-icon.primary{background-color:var(--color-primary-light);color:var(--color-primary-base)}.kpi-icon.success{color:var(--color-success);background-color:#28a7451a}.kpi-icon.error{color:var(--color-error);background-color:#dc35451a}.kpi-info h3{font-size:var(--font-size-sm);color:var(--text-muted);margin:0;font-weight:500}.kpi-info p{font-size:var(--font-size-2xl);color:var(--text-main);margin:0;font-weight:700}.login-layout{background-color:var(--surface-app);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex}.login-card{width:100%;max-width:400px;padding:var(--space-2xl)}.login-header{text-align:center;margin-bottom:var(--space-xl)}.login-header h1{color:var(--color-primary-base);font-size:var(--font-size-2xl);margin:0}.login-header p{color:var(--text-muted);margin-top:var(--space-xs)}.login-form .form-group{margin-bottom:var(--space-md)}.login-form label{margin-bottom:var(--space-xs);font-size:var(--font-size-sm);color:var(--text-main);font-weight:500;display:block}.login-form .btn{width:100%;margin-top:var(--space-md)}.hidden{display:none!important}