.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.icon-button:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.icon-button svg { width: 16px; height: 16px; }
.badge-button { position: relative; }
.badge-button i { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 8px; font-style: normal; border: 2px solid var(--bg); }
.primary-button, .secondary-button, .danger-button, .filter-button, .text-button { border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.primary-button { min-height: 38px; padding: 0 14px; border-radius: 9px; background: linear-gradient(135deg,var(--brand),#4777e8); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 7px 18px rgba(91,140,255,.2); }
.primary-button:hover { filter: brightness(1.06); }
.primary-button svg, .secondary-button svg { width: 15px; height: 15px; }
.secondary-button { min-height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; }
.secondary-button:hover { color: var(--text); border-color: var(--border-strong); }
.danger-button { min-height: 38px; padding: 0 14px; border-radius: 9px; background: rgba(255,95,114,.10); color: var(--red); border: 1px solid rgba(255,95,114,.25); font-size: 12px; font-weight: 700; }
.compact { min-height: 36px; }
.small { min-height: 32px; padding: 0 11px; font-size: 11px; }
.text-button { padding: 4px; background: transparent; color: var(--brand); font-size: 11px; font-weight: 700; }
.env-switcher { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-2); font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray); box-shadow: 0 0 0 4px color-mix(in srgb,var(--gray) 18%,transparent); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 4px rgba(33,197,139,.12); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-head { min-height: 66px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.panel-head h3 { margin: 0; font-size: 13px; }
.panel-head p { margin: 5px 0 0; color: var(--text-3); font-size: 10px; }
.eyebrow { color: var(--brand); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.meter { height: 5px; overflow: hidden; background: var(--surface-3); border-radius: 99px; }
.meter i { height: 100%; display: block; background: linear-gradient(90deg,var(--brand),var(--brand-2)); border-radius: inherit; }
.meter.large { height: 7px; }
.avatar { width: 34px; height: 34px; border-radius: 9px; display: inline-grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.avatar.blue { background: linear-gradient(145deg,#4777e8,#6a9fff); }
.avatar.violet { background: linear-gradient(145deg,#6a4ee0,#9a7cff); }
.avatar.green { background: linear-gradient(145deg,#16946a,#32d89b); }
.avatar.amber { background: linear-gradient(145deg,#c87910,#f6b843); }
.status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 9px; font-weight: 800; }
.status-pill.online { color: var(--green); background: rgba(33,197,139,.10); border: 1px solid rgba(33,197,139,.18); }
.status-pill.maintenance { color: var(--purple); background: rgba(140,112,255,.10); border: 1px solid rgba(140,112,255,.18); }
.status-pill.warning { color: var(--amber); background: rgba(246,167,35,.10); border: 1px solid rgba(246,167,35,.18); }
.status-pill.offline { color: var(--text-3); background: var(--surface-3); border: 1px solid var(--border); }
.positive { color: var(--green) !important; }
.warning { color: var(--amber) !important; }
.danger-text { color: var(--red) !important; }
.summary-icon, .metric-icon, .role-icon { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 10px; }
.summary-icon { width: 38px; height: 38px; }
.metric-icon { width: 32px; height: 32px; }
.role-icon { width: 34px; height: 34px; }
.role-icon.large { width: 44px; height: 44px; border-radius: 12px; }
.summary-icon svg, .metric-icon svg, .role-icon svg { width: 17px; height: 17px; }
.blue { background-color: rgba(91,140,255,.13); color: var(--blue); }
.green { background-color: rgba(33,197,139,.13); color: var(--green); }
.purple { background-color: rgba(140,112,255,.13); color: var(--purple); }
.amber { background-color: rgba(246,167,35,.13); color: var(--amber); }
.red { background-color: rgba(255,95,114,.13); color: var(--red); }
.gray { background-color: rgba(140,150,168,.13); color: var(--gray); }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { height: 42px; padding: 0 14px; color: var(--text-3); background: var(--surface-soft); font-size: 9px; text-align: left; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
td { min-height: 54px; padding: 12px 14px; color: var(--text-2); font-size: 11px; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-soft); }
td strong { color: var(--text); font-size: 11px; }
.resource-name { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.resource-name > span { display: flex; flex-direction: column; }
.resource-name small, .cell-sub { display: block; margin-top: 3px; color: var(--text-3); font-size: 9px; }
.resource-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: rgba(91,140,255,.10); color: var(--brand); }
.resource-icon.warning { background: rgba(246,167,35,.11); color: var(--amber); }
.resource-icon.maintenance { background: rgba(140,112,255,.11); color: var(--purple); }
.resource-icon svg { width: 15px; height: 15px; }
.health-bar { width: 58px; height: 4px; display: inline-block; margin: 0 7px 2px 0; background: var(--surface-3); border-radius: 99px; }
.health-bar i { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.health-bar.warn i { background: var(--amber); }
.mini-progress { display: block; width: 72px; height: 3px; margin-top: 6px; background: var(--surface-3); border-radius: 99px; }
.mini-progress i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.search-input { height: 38px; min-width: 260px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.search-input svg { width: 15px; color: var(--text-3); }
.search-input input { width: 100%; border: 0; outline: none; background: transparent; color: var(--text); font-size: 11px; }
.search-input input::placeholder { color: var(--text-3); }
.filter-button { height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-2); font-size: 11px; }
.filter-button b { color: var(--text-3); }
.segmented, .view-toggle { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.segmented button, .view-toggle button { height: 27px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); font-size: 9px; cursor: pointer; }
.segmented button.active, .view-toggle button.active { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.view-toggle button { width: 31px; display: grid; place-items: center; padding: 0; }
.view-toggle svg { width: 14px; }
.team-logo { width: 38px; height: 38px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #fff; font-style: normal; font-size: 11px; font-weight: 900; }
.team-logo.large { width: 58px; height: 58px; border-radius: 15px; font-size: 17px; }
.team-logo.tiny { width: 22px; height: 22px; border-radius: 6px; font-size: 7px; }
.team-logo.navy { background: linear-gradient(145deg,#1f4e95,#5b8cff); }
.team-logo.violet { background: linear-gradient(145deg,#6247c9,#9a7cff); }
.team-logo.green { background: linear-gradient(145deg,#147554,#2aca91); }
.team-logo.amber { background: linear-gradient(145deg,#b4680b,#f4ad36); }
.team-logo.gray { background: linear-gradient(145deg,#51596a,#8d96a7); }
.team-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 10px; white-space: nowrap; }
.role-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: 9px; font-weight: 700; }
.role-pill.owner { color: #ffcf67; background: rgba(246,167,35,.11); }
.role-pill.admin { color: #b5a5ff; background: rgba(140,112,255,.11); }
.role-pill.operator { color: #8cb0ff; background: rgba(91,140,255,.11); }
.role-pill.moderator { color: #ff95a1; background: rgba(255,95,114,.11); }