* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
body { font-family: Inter, "Segoe UI", Arial, sans-serif; color:var(--text); background:var(--page-bg); }
a { color:var(--info); text-decoration:none; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }

.app-shell { min-height:100vh; }
.sidebar {
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-width); background:var(--sidebar-bg);
  color:var(--sidebar-text); z-index:50; display:flex; flex-direction:column;
  transition:width .2s ease; overflow:hidden; border-top:4px solid var(--primary);
}
.sidebar-brand { height:68px; padding:14px 17px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand-mark { width:37px; height:37px; min-width:37px; border-radius:9px; background:var(--primary); color:white; display:grid; place-items:center; font-weight:800; font-size:18px; }
.brand-copy strong { display:block; font-size:16px; white-space:nowrap; }.brand-copy small { color:var(--sidebar-muted); white-space:nowrap; }
.sidebar-scroll { flex:1; overflow-y:auto; padding:10px 8px 18px; }
.nav-group-title { color:var(--sidebar-muted); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:16px 12px 6px; white-space:nowrap; }
.nav-link { color:var(--sidebar-text); display:flex; align-items:center; gap:12px; min-height:42px; padding:9px 12px; border-radius:7px; margin:2px 0; white-space:nowrap; }
.nav-link:hover { background:var(--sidebar-hover); color:#fff; }.nav-link.active { background:var(--sidebar-active); color:#fff; box-shadow:inset 3px 0 0 var(--primary); }
.nav-icon { width:22px; min-width:22px; text-align:center; font-size:17px; }.nav-label { overflow:hidden; }
.sidebar-footer { padding:11px 10px; border-top:1px solid rgba(255,255,255,.08); }
.user-box { display:flex; align-items:center; gap:10px; padding:8px; }
.user-avatar { width:34px; height:34px; min-width:34px; border-radius:50%; background:var(--primary); color:white; display:grid; place-items:center; font-weight:800; }
.user-copy { min-width:0; }.user-copy strong,.user-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.user-copy small{color:var(--sidebar-muted)}

.main-shell { margin-left:var(--sidebar-width); min-height:100vh; transition:margin-left .2s ease; }
.topbar { height:68px; background:var(--topbar-bg); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:15px; padding:0 24px; position:sticky; top:0; z-index:30; }
.topbar-left,.topbar-right { display:flex; align-items:center; gap:12px; }.topbar h1 { margin:0; font-size:20px; }.icon-button { width:38px; height:38px; border:1px solid var(--line); background:#fff; border-radius:8px; color:var(--text); }
.company-switch { display:flex; align-items:center; gap:8px; }.company-switch label{font-size:12px;color:var(--muted)}.company-switch select { min-width:190px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; }
.logout-form button { border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 11px; }
.content { max-width:1600px; margin:0 auto; padding:22px 24px 45px; }

body.sidebar-collapsed .sidebar { width:var(--sidebar-collapsed-width); }
body.sidebar-collapsed .main-shell { margin-left:var(--sidebar-collapsed-width); }
body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-group-title, body.sidebar-collapsed .user-copy { opacity:0; width:0; pointer-events:none; }
body.sidebar-collapsed .nav-link { justify-content:center; padding-left:10px; padding-right:10px; }.sidebar-collapsed .sidebar-brand { justify-content:center; padding-left:8px; padding-right:8px; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:14px; margin-bottom:20px; }
.card { background:var(--panel-bg); border:1px solid var(--line); border-left:5px solid #667281; border-radius:var(--radius); padding:17px 18px; box-shadow:0 2px 8px rgba(20,35,50,.05); }
.card.ok{border-left-color:var(--success)}.card.warn{border-left-color:var(--warning)}.card.bad{border-left-color:var(--danger)}.card.info{border-left-color:var(--info)}
.card span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.card strong{display:block;font-size:30px;margin-top:7px}
.panel { background:var(--panel-bg); border:1px solid var(--line); border-radius:var(--radius); margin:18px 0; overflow:hidden; box-shadow:0 2px 8px rgba(20,35,50,.04); }
.panel-title { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); }.panel-title h2{font-size:17px;margin:0}.panel-title span,.panel-title a{font-size:13px;color:var(--muted)}
.panel-body { padding:18px; }.table-wrap { overflow:auto; }
table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;background:#f8fafb;color:#495565;padding:11px 13px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:11px 13px;border-bottom:1px solid #edf0f3;vertical-align:top}tr:hover td{background:#fbfcfd}
.badge{display:inline-block;border-radius:14px;padding:3px 8px;font-size:12px;font-weight:700;white-space:nowrap}.badge-ok{background:var(--success-soft);color:var(--success)}.badge-warn{background:var(--warning-soft);color:var(--warning)}.badge-bad{background:var(--danger-soft);color:var(--danger)}.badge-info{background:var(--info-soft);color:var(--info)}
.empty{text-align:center;color:var(--muted);padding:28px}.muted{color:var(--muted)}

.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }.toolbar form{display:flex;gap:8px;flex-wrap:wrap}.toolbar input,.toolbar select{border:1px solid var(--line);border-radius:8px;background:#fff;padding:9px 11px;min-width:220px}
.button { border:0; border-radius:8px; padding:9px 13px; font-weight:650; display:inline-flex; align-items:center; justify-content:center; gap:7px; }.button-primary{background:var(--primary);color:#fff}.button-primary:hover{background:var(--primary-hover)}.button-secondary{background:#fff;border:1px solid var(--line);color:var(--text)}.button-danger{background:var(--danger);color:#fff}.button-small{padding:6px 9px;font-size:12px}
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.form-field{display:flex;flex-direction:column;gap:6px}.form-field.full{grid-column:1/-1}.form-field label{font-size:12px;font-weight:700;color:#495565}.form-field input,.form-field select,.form-field textarea{border:1px solid var(--line);border-radius:8px;padding:10px 11px;background:#fff;color:var(--text)}.form-field textarea{min-height:90px;resize:vertical}.form-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.alert { border-radius:8px; padding:11px 13px; margin:10px 0 16px; font-size:13px; }.alert-error{background:var(--danger-soft);color:var(--danger);border:1px solid #f5c9c4}.alert-info{background:var(--info-soft);color:var(--info);border:1px solid #cce0f7}
.tabs { display:flex;gap:6px;border-bottom:1px solid var(--line);padding:0 16px;background:#fff}.tab{padding:12px 11px;color:var(--muted);font-size:13px;border-bottom:3px solid transparent}.tab.active{color:var(--text);border-bottom-color:var(--primary);font-weight:700}
.permission-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.permission-group{border:1px solid var(--line);border-radius:8px;padding:13px}.permission-group h3{font-size:14px;margin:0 0 10px}.permission-item{display:flex;gap:8px;align-items:flex-start;padding:6px 0}.permission-item small{display:block;color:var(--muted);margin-top:2px}.checkbox-row{display:flex;align-items:center;gap:8px}
.release-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.release-grid article{border:1px solid var(--line);border-radius:8px;padding:13px;display:flex;flex-direction:column;gap:5px}.release-grid span{color:var(--muted);font-size:13px}.release-grid small{color:#7b8794}
.kpi-row{display:flex;gap:8px;flex-wrap:wrap}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.detail-item{background:#f8fafb;border:1px solid var(--line);border-radius:8px;padding:12px}.detail-item span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase}.detail-item strong{display:block;margin-top:5px}

@media(max-width:900px){
  .sidebar{transform:translateX(-100%);width:var(--sidebar-width)!important}.main-shell{margin-left:0!important}.sidebar-mobile-open .sidebar{transform:translateX(0)}.form-grid{grid-template-columns:1fr}.company-switch label{display:none}.company-switch select{min-width:140px}.content{padding:16px 12px 35px}.topbar{padding:0 12px}.topbar h1{font-size:17px}
}
.inline-form { display:inline-flex; margin:0 3px; }