:root{--primary:#3157d5;--primary-dark:#2442a7;--navy:#1b2740;--bg:#f3f6fb;--surface:#fff;--surface-2:#f8fafc;--border:#dce3ee;--text:#1f2937;--muted:#687386;--green:#18864b;--green-bg:#e9f7ef;--orange:#b96b00;--orange-bg:#fff3dc;--red:#c43c3c;--red-bg:#fdecec;--blue-bg:#edf2ff;--shadow:0 1px 2px rgba(16,24,40,.05);--radius:8px;--sidebar:248px}*{box-sizing:border-box}html{font-size:14px}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.5}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:none}button,input,select,textarea{font:inherit}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:#eef2f8;border-right:1px solid #cfd8e7;display:flex;flex-direction:column;z-index:40;transition:transform .2s ease}.brand{height:72px;display:flex;align-items:center;gap:11px;padding:0 16px;border-bottom:1px solid var(--border)}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#6c84ed);color:white;font-weight:800;letter-spacing:.5px;flex:0 0 auto}.brand-mark.large{width:56px;height:56px;border-radius:13px;font-size:17px}.brand-copy{display:flex;flex-direction:column;min-width:0}.brand-copy strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-copy small{font-size:11px;color:var(--muted)}.nav-list{padding:10px 8px;overflow:auto;flex:1}.nav-section{padding:16px 10px 6px;color:#7a8494;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.nav-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border-radius:6px;color:#30394a;margin:2px 0;border:0;background:transparent;text-align:left;cursor:pointer}.nav-item:hover{background:#e1e8f5}.nav-item.active{background:#dbe4ff;color:#244fcf;font-weight:600}.nav-icon{width:20px;text-align:center;font-size:16px;color:#68758b}.nav-item.active .nav-icon{color:var(--primary)}.nav-button{font-family:inherit;font-size:14px}.sidebar-footer{padding:8px;border-top:1px solid var(--border)}.app-main{margin-left:var(--sidebar);min-height:100vh}.topbar{height:58px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 18px;position:sticky;top:0;z-index:25}.topbar-title{font-weight:700;font-size:16px}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.icon-button{border:1px solid transparent;background:transparent;border-radius:7px;width:38px;height:38px;display:grid;place-items:center;color:#4a5568;cursor:pointer}.icon-button:hover{background:#f0f3f8}.sidebar-toggle{display:none}.user-menu{display:flex;align-items:center;gap:9px}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#dde5ff;color:#244fcf;font-weight:700}.user-meta{display:flex;flex-direction:column}.user-meta strong{font-size:13px}.user-meta small{font-size:11px;color:var(--muted)}.content-wrap{padding:18px;max-width:1700px;margin:0 auto}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.page-head h1{font-size:22px;line-height:1.25;margin:0 0 4px}.page-head p{margin:0;color:var(--muted)}.btn{border:1px solid var(--border);background:var(--surface);color:#334155;border-radius:6px;padding:9px 14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;min-height:38px}.btn:hover{filter:brightness(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);border-color:var(--primary);color:white}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:white;border-color:#cdd6e5;color:#35445c}.btn-ghost{background:transparent;border-color:transparent;color:#536076}.btn-warning{background:var(--orange-bg);border-color:#efc777;color:#8d5400}.btn-danger{background:var(--red);border-color:var(--red);color:white}.btn-small{min-height:30px;padding:5px 9px;font-size:12px}.btn-block{width:100%}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.summary-grid.compact .summary-card{min-height:92px}.summary-card{position:relative;background:var(--surface);border:1px solid var(--border);border-top:3px solid #cbd5e1;border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;min-height:112px;box-shadow:var(--shadow)}.summary-card.accent-blue{border-top-color:var(--primary)}.summary-card.accent-green{border-top-color:#33a560}.summary-card.accent-orange{border-top-color:#e39a20}.summary-card.accent-red{border-top-color:#d95252}.summary-label{font-size:12px;font-weight:700;color:#4f5d72}.summary-card strong{font-size:25px;line-height:1.3;margin-top:auto}.summary-card .summary-value-small{font-size:16px}.summary-card small{color:var(--muted);margin-top:2px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:15px 16px;border-bottom:1px solid var(--border)}.panel-header h2{font-size:16px;margin:0 0 2px}.panel-header p{margin:0;color:var(--muted);font-size:13px}.content-grid{display:grid;gap:16px}.content-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.span-2{grid-column:1/-1}.filter-bar{display:flex;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border);align-items:center;flex-wrap:wrap}.filter-bar input,.filter-bar select{min-width:180px}.filter-bar input[type=search]{flex:1;min-width:240px}.table-wrap{overflow-x:auto}.table-wrap table{width:100%;border-collapse:collapse;min-width:720px}.table-wrap th{font-size:12px;color:#445066;text-align:left;background:#f8fafc;padding:10px 12px;border-bottom:1px solid #ccd5e2;white-space:nowrap}.table-wrap td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}.table-wrap tr:last-child td{border-bottom:0}.table-wrap tbody tr:hover{background:#fbfcff}.cell-sub{display:block;color:var(--muted);font-size:11px;margin-top:1px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:700;text-transform:capitalize;white-space:nowrap;background:#edf0f4;color:#566174}.badge-active,.badge-success,.badge-healthy,.badge-completed,.badge-installed{background:var(--green-bg);color:var(--green)}.badge-inactive,.badge-failed,.badge-invalid,.badge-locked,.badge-critical{background:var(--red-bg);color:var(--red)}.badge-warning,.badge-processing,.badge-installing,.badge-uploaded,.badge-validated,.badge-backed_up,.badge-rolled_back{background:var(--orange-bg);color:var(--orange)}.badge-info,.badge-direct{background:var(--blue-bg);color:var(--primary)}.badge-denied{background:#f3eafd;color:#7b3bb6}.field{display:flex;flex-direction:column;gap:6px}.field>span{font-weight:600;color:#3c485c;font-size:13px}.field input,.field select,.field textarea,.filter-bar input,.filter-bar select{width:100%;border:1px solid #cbd5e1;border-radius:6px;background:white;color:var(--text);padding:9px 10px;outline:none}.field input:focus,.field select:focus,.field textarea:focus,.filter-bar input:focus,.filter-bar select:focus{border-color:#6684e6;box-shadow:0 0 0 3px rgba(49,87,213,.12)}.field textarea{resize:vertical}.form-panel{padding:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:16px}.form-grid .full{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px;border-top:1px solid var(--border)}.form-actions.full{grid-column:1/-1;padding:8px 0 0;border:0}.stack-form{display:flex;flex-direction:column;gap:14px}.narrow{max-width:680px;padding:18px}.checkbox-field{flex-direction:row;align-items:center;margin-top:24px}.checkbox-field input{width:auto}.password-wrap{display:flex;position:relative}.password-wrap input{padding-right:60px}.password-toggle{position:absolute;right:5px;top:5px;border:0;background:#eef2f7;border-radius:4px;padding:5px 8px;font-size:11px;cursor:pointer}.alert{border:1px solid var(--border);border-left-width:4px;border-radius:6px;padding:11px 13px;margin-bottom:14px;background:white}.alert ul{margin:6px 0 0 20px}.alert-success{border-color:#7dc99e;background:var(--green-bg);color:#176d40}.alert-error{border-color:#e58e8e;background:var(--red-bg);color:#9f2e2e}.alert-warning{border-color:#e8bd68;background:var(--orange-bg);color:#805000}.alert-info{border-color:#91a8eb;background:var(--blue-bg);color:#294bb5}.list-stack{display:flex;flex-direction:column}.list-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border)}.list-row:last-child{border-bottom:0}.list-row div{display:flex;flex-direction:column}.list-row small,.list-row time{color:var(--muted);font-size:12px}.empty-state{text-align:center;padding:34px 20px;color:var(--muted)}.empty-state strong{display:block;color:#344054;font-size:15px;margin-bottom:4px}.empty-state p{margin:0}.detail-list{margin:0;padding:8px 16px}.detail-list>div{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}.detail-list>div:last-child{border-bottom:0}.detail-list dt{color:var(--muted)}.detail-list dd{margin:0;font-weight:600}.action-row{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--border)}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.permission-row{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer}.permission-row:last-child{border-bottom:0}.permission-row input{margin-top:4px}.permission-row span{display:flex;flex-direction:column}.permission-row small{color:var(--muted)}.sticky-actions{position:sticky;bottom:0;background:rgba(243,246,251,.95);border-top:1px solid var(--border);padding:12px 16px;display:flex;justify-content:flex-end;gap:10px}.health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:8px}.health-grid.large{grid-template-columns:repeat(3,minmax(0,1fr))}.health-item{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--border);margin:4px;border-radius:6px;background:white}.health-item>div{display:flex;flex-direction:column;min-width:0;flex:1}.health-item small{color:var(--muted)}.status-dot{width:10px;height:10px;border-radius:50%;background:#94a3b8;flex:0 0 auto}.status-healthy,.status-success{background:#28a25a}.status-warning{background:#e5a027}.status-failed,.status-critical,.status-error{background:#d44c4c}.status-info{background:#4f6fe0}.logo-preview{max-width:160px;max-height:80px;margin-top:10px;object-fit:contain;border:1px solid var(--border);border-radius:6px;padding:4px}.roadmap{display:flex;flex-wrap:wrap;gap:8px;padding:16px}.roadmap span{background:#f1f4f9;border:1px solid var(--border);border-radius:999px;padding:7px 10px;font-size:12px}.notification-row{display:flex;gap:12px;padding:15px 16px;border-bottom:1px solid var(--border)}.notification-row.unread{background:#f8faff}.notification-row>div{flex:1}.notification-row p{margin:3px 0;color:#475569}.notification-row small{color:var(--muted)}.error-page{text-align:center;padding:70px 20px}.error-page>strong{font-size:60px;color:#cad2df}.error-page h1{margin:0 0 8px}.error-page p{color:var(--muted);margin:0 0 20px}.auth-page,.install-page{min-height:100vh;background:linear-gradient(135deg,#eef3fb,#f8fafc);padding:24px}.auth-page{display:grid;place-items:center}.auth-card{width:min(430px,100%);background:white;border:1px solid var(--border);border-radius:12px;padding:28px;box-shadow:0 12px 35px rgba(31,41,55,.08)}.auth-brand{text-align:center;margin-bottom:22px}.auth-brand .brand-mark{margin:0 auto 13px}.auth-brand h1{font-size:22px;margin:0}.auth-brand p{color:var(--muted);margin:4px 0 0}.auth-foot{text-align:center;margin-top:18px;color:var(--muted);font-size:12px}.install-container{max-width:1100px;margin:0 auto}.install-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}.install-header h1{margin:0;font-size:24px}.install-header p{margin:2px 0 0;color:var(--muted)}.install-steps{display:flex;gap:5px;margin-bottom:14px;overflow:auto}.install-steps span{flex:1;min-width:130px;background:#e6ebf3;padding:9px;text-align:center;font-size:12px;font-weight:700;color:#647085}.install-steps span.active{background:var(--primary);color:white}.install-form .panel{overflow:visible}.install-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;background:white;border:1px solid var(--border);padding:15px 16px;border-radius:var(--radius)}.install-actions p{margin:0;color:var(--muted)}.sidebar-overlay{display:none}.toast{position:fixed;right:18px;top:72px;z-index:100;background:#1f2937;color:white;padding:10px 14px;border-radius:7px;box-shadow:0 8px 24px rgba(0,0,0,.2)}@media(max-width:1100px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.health-grid.large{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:820px){:root{--sidebar:248px}.sidebar{transform:translateX(-100%)}body.sidebar-open .sidebar{transform:translateX(0)}body.sidebar-open .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:35}.app-main{margin-left:0}.sidebar-toggle{display:grid}.user-meta{display:none}.content-wrap{padding:14px}.content-grid.two,.permission-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.health-grid,.health-grid.large{grid-template-columns:1fr}.page-head{flex-direction:column;align-items:stretch}.page-head>.btn,.page-head>form .btn{width:100%}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-bar{align-items:stretch}.filter-bar>*{width:100%!important}.detail-list>div{grid-template-columns:1fr;gap:2px}.install-actions{flex-direction:column;align-items:stretch}.install-actions .btn{width:100%}}@media(max-width:520px){.summary-grid{grid-template-columns:1fr}.content-wrap{padding:10px}.topbar{padding:0 10px}.auth-page,.install-page{padding:12px}.auth-card{padding:22px}.panel-header{padding:13px}.table-wrap table{min-width:650px}.action-row{flex-direction:column}.action-row form,.action-row .btn{width:100%}.install-header h1{font-size:20px}}
