:root{--bg:#f4f7fb;--panel:#fff;--panel-2:#f8fafc;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;--primary:#2563eb;--primary-hover:#1d4ed8;--success:#16a34a;--success-hover:#15803d;--danger:#dc2626;--danger-hover:#b91c1c;--success-bg:#dcfce7;--success-text:#166534;--info-bg:#dbeafe;--info-text:#1d4ed8;--danger-bg:#fee2e2;--danger-text:#b91c1c;--neutral-bg:#e2e8f0;--neutral-text:#334155;--dark-bg:#cbd5e1;--dark-text:#0f172a;--shadow:0 10px 30px #0f172a14;--radius:18px;--sidebar-width:270px}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.shell{grid-template-columns:var(--sidebar-width) 1fr;min-height:100vh;display:grid}.sidebar{color:#fff;z-index:30;background:linear-gradient(#0f172a 0%,#111827 100%);flex-direction:column;gap:12px;height:100vh;padding:18px 14px;display:flex;position:sticky;top:0}.brand{border-bottom:1px solid #ffffff14;margin-bottom:4px;padding:6px 8px 14px}.brand-top{align-items:center;gap:12px;display:flex}.brand-mark{color:#fff;letter-spacing:.04em;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:12px;flex-shrink:0;place-items:center;width:42px;height:42px;font-size:13px;font-weight:800;display:grid}.brand-title{letter-spacing:.2px;font-size:20px;font-weight:800;line-height:1.1}.brand-subtitle{color:#ffffffb3;margin-top:4px;font-size:12px}.nav-group-title{text-transform:uppercase;letter-spacing:.08em;color:#ffffff8c;margin:10px 10px 4px;font-size:11px}.sidebar-nav{flex-direction:column;gap:6px;display:flex}.sidebar-link{color:#ffffffeb;border-radius:12px;padding:12px 13px;font-weight:600;transition:all .18s}.sidebar-link:hover,.sidebar-link.active{color:#fff;background:#ffffff1f}.sidebar-spacer{flex:1}.sidebar button{color:#fff;cursor:pointer;background:#ffffff1a;border:0;border-radius:12px;padding:12px 13px;font-weight:700}.sidebar button:hover{background:#ffffff2e}.main{min-width:0;padding:16px}.topbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow);background:#ffffffdb;border:1px solid #e2e8f0f2;border-radius:18px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding:14px 16px;display:flex}.topbar-left{align-items:center;gap:12px;min-width:0;display:flex}.topbar-title{font-size:20px;font-weight:800;line-height:1.1}.topbar-subtitle{color:var(--muted);margin-top:4px;font-size:13px}.topbar-brand-chip{color:#1d4ed8;white-space:nowrap;background:#eff6ff;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800}.menu-button{color:#0f172a;background:#e2e8f0;border:0;border-radius:12px;width:42px;min-width:42px;height:42px;font-size:20px;font-weight:700;display:none}.menu-button:hover{background:#cbd5e1}.mobile-overlay{display:none}.page{flex-direction:column;gap:16px;max-width:1200px;margin:0 auto;padding-bottom:90px;display:flex}.page.center{justify-content:center;align-items:center;min-height:100vh;padding:20px}.page-header h1,.page h1{margin:0;font-size:28px;line-height:1.1}.page-header p{color:var(--muted);margin:6px 0 0}.card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #e2e8f0e6;padding:16px}.card h2,.card h3{margin-top:0}.form{flex-direction:column;gap:12px;display:flex}.form input,.form select,.form textarea,input,select,textarea{border:1px solid var(--line);width:100%;color:var(--text);background:#fff;border-radius:12px;padding:12px 14px;transition:border-color .18s,box-shadow .18s}.form input:focus,.form select:focus,.form textarea:focus,input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 4px #2563eb1f}textarea{resize:vertical;min-height:96px}button,.button{background:var(--primary);color:#fff;cursor:pointer;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:11px 15px;font-weight:700;transition:background .18s;display:inline-flex}button:hover,.button:hover{background:var(--primary-hover)}button:disabled,.button:disabled{opacity:.65;cursor:not-allowed}button.secondary,.button.secondary{color:#0f172a;background:#e2e8f0}button.secondary:hover,.button.secondary:hover{background:#cbd5e1}button.success,.button.success{background:var(--success)}button.success:hover,.button.success:hover{background:var(--success-hover)}button.danger,.button.danger{background:var(--danger)}button.danger:hover,.button.danger:hover{background:var(--danger-hover)}.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.stat-card{background:linear-gradient(#fff 0%,#f8fafc 100%)}.stat-label{color:var(--muted);margin-bottom:8px;font-size:13px}.stat-value{font-size:28px;font-weight:800}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.space-between{justify-content:space-between}.actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.list{flex-direction:column;gap:12px;display:flex}.list-item{background:var(--panel);border:1px solid #e2e8f0e6;border-radius:16px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px;display:flex;box-shadow:0 6px 20px #0f172a0d}.muted{background:var(--panel-2);border:1px dashed var(--line)}.badge{text-transform:capitalize;border-radius:999px;align-items:center;padding:6px 10px;font-size:12px;font-weight:800;display:inline-flex}.badge-green{background:var(--success-bg);color:var(--success-text)}.badge-blue{background:var(--info-bg);color:var(--info-text)}.badge-red{background:var(--danger-bg);color:var(--danger-text)}.badge-gray{background:var(--neutral-bg);color:var(--neutral-text)}.badge-dark{background:var(--dark-bg);color:var(--dark-text)}.error{background:var(--danger-bg);color:var(--danger-text);border:1px solid #fecaca;border-radius:12px;padding:12px 14px}.help-text{color:var(--muted);margin-top:-6px;font-size:12px}.login-card{width:100%;max-width:420px}.login-brand{text-align:center;margin-bottom:10px}.login-brand h1{margin-bottom:6px}.login-brand p{color:var(--muted);margin:0}.section-title{margin:0 0 12px;font-size:18px;font-weight:800}.section-subtitle{color:var(--muted);margin:-6px 0 10px;font-size:13px}.form-section{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:10px;padding:14px;display:flex}.mobile-sticky-actions{display:none}@media (width<=1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=900px){.shell{display:block}.sidebar{width:min(82vw,320px);height:100vh;transition:transform .22s;position:fixed;top:0;left:0;transform:translate(-100%);box-shadow:0 18px 40px #00000038}.sidebar.sidebar-open{transform:translate(0)}.mobile-overlay{z-index:20;background:#0f172a73;display:block;position:fixed;inset:0}.menu-button{justify-content:center;align-items:center;display:inline-flex}.main{padding:12px}.topbar{border-radius:16px;padding:12px 14px}.topbar-title{font-size:18px}.topbar-brand-chip{display:none}}@media (width<=640px){.grid{grid-template-columns:1fr}.page{gap:12px}.card{border-radius:16px;padding:14px}.page-header h1,.page h1{font-size:24px}.topbar-subtitle{font-size:12px}.list-item{flex-direction:column;gap:12px;padding:12px}.row{gap:8px}button,.button{width:100%;min-height:44px}.actions{width:100%}.actions>*{flex:100%}.mobile-stack{flex-direction:column;gap:10px;display:flex}.mobile-sticky-actions{z-index:25;border:1px solid var(--line);background:#fffffff5;border-radius:16px;gap:10px;padding:10px;display:flex;position:fixed;bottom:12px;left:12px;right:12px;box-shadow:0 12px 26px #0f172a24}.mobile-sticky-actions>*{flex:1}}.network-bar{border-radius:12px;margin-bottom:10px;padding:8px 12px;font-size:12px;font-weight:700}.network-online{color:#166534;background:#dcfce7;border:1px solid #bbf7d0}.network-offline{color:#b91c1c;background:#fee2e2;border:1px solid #fecaca}.mobile-bottom-nav{display:none}@media (width<=900px){.mobile-bottom-nav{z-index:24;border:1px solid var(--line);background:#fffffff5;border-radius:16px;grid-template-columns:repeat(5,1fr);gap:8px;padding:8px;display:grid;position:fixed;bottom:10px;left:10px;right:10px;box-shadow:0 12px 26px #0f172a24}.mobile-bottom-link{min-height:44px;color:var(--muted);text-align:center;border-radius:12px;place-items:center;padding:6px;font-size:12px;font-weight:700;display:grid}.mobile-bottom-link.active{color:#1d4ed8;background:#eff6ff}}