:root {
  --bg: #0a101c;
  --side: #0d1524;
  --card: #141c2c;
  --border: rgba(148, 163, 184, 0.14);
  --text: #e7eef8;
  --muted: #8b9bb3;
  --accent: #22d3a6;
  --accent-2: #38bdf8;
  --warn: #fbbf24;
  --bad: #fb7185;
  --ok: #34d399;
  --safe-t: max(12px, env(safe-area-inset-top));
  --safe-r: max(16px, env(safe-area-inset-right));
  --safe-b: max(16px, env(safe-area-inset-bottom));
  --safe-l: max(16px, env(safe-area-inset-left));
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, sans-serif; overflow-x: hidden; }
.app { max-width: 100vw; min-width: 0; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-toggle { display: none; min-width: 44px; min-height: 44px; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
.app { min-height: 100dvh; display: grid; grid-template-columns: 240px 1fr; }
.side {
  background: var(--side);
  border-right: 1px solid var(--border);
  padding: var(--safe-t) 14px var(--safe-b) var(--safe-l);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.logo { font-weight: 800; letter-spacing: 0.04em; padding: 10px 10px 18px; }
.logo span { color: var(--accent); }
.nav a {
  display: block;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--muted);
}
.nav a:hover, .nav a.active { background: rgba(34,211,166,0.12); color: var(--text); }
.main { padding: var(--safe-t) var(--safe-r) var(--safe-b) 28px; overflow: auto; min-width: 0; }
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.top-actions { display: flex; gap: 8px; align-items: center; position: relative; }
.notify-bell { position: relative; min-width: 44px; }
.notify-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--bad); color: #1a0a0c; font-size: 0.7rem; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
.notify-badge.hidden { display: none; }
.notify-panel {
  position: absolute; right: var(--safe-r); top: 72px; width: min(420px, 94vw);
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px; z-index: 40; max-height: 70dvh; overflow: auto;
}
.notify-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.notify-item {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border);
  padding: 10px 4px; color: inherit; cursor: pointer;
}
.notify-item.unread { background: rgba(56,189,248,0.08); }
.notify-item .sev { font-size: 0.75rem; }
.toast-host { position: fixed; right: var(--safe-r); bottom: var(--safe-b); display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-width: 240px; display: flex; justify-content: space-between; gap: 10px; }
.toast.sev-error { border-color: rgba(251,113,133,0.5); }
.toast.sev-warning { border-color: rgba(251,191,36,0.5); }
.toast.sev-success { border-color: rgba(52,211,153,0.5); }
h1 { margin: 0; font-size: 1.5rem; }
.sub { margin: 6px 0 0; color: var(--muted); }
.btn { border: 0; border-radius: 10px; padding: 10px 14px; background: var(--accent); color: #04251c; font-weight: 700; cursor: pointer; }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pill.job { background: rgba(56, 189, 248, 0.18); }
.pill.restore { background: rgba(167, 139, 250, 0.22); }
.state-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
[data-act][disabled], .dash-power:disabled { min-height: 44px; }
.tpl-icon { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; vertical-align: middle; }
.tpl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; align-items: end; }
.tpl-filters label { font-size: 0.82rem; color: var(--muted); }
.tpl-preview { max-height: 70vh; overflow: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
@media (max-width: 700px) {
  .auto-grid { grid-template-columns: 1fr; }
}
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.card h2 { margin: 0 0 8px; font-size: 1.05rem; }
.meta { color: var(--muted); font-size: 0.82rem; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pill { font-size: 0.72rem; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--muted); }
.pill.ok { color: var(--ok); background: rgba(52,211,153,0.12); }
.pill.bad { color: var(--bad); background: rgba(251,113,133,0.12); }
.pill.warn { color: var(--warn); background: rgba(251,191,36,0.12); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn .spinner { width: 12px; height: 12px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.stat { font-size: 0.78rem; color: var(--muted); }
.stat b { display: block; color: var(--text); margin-top: 2px; }
.bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 600; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 14px; font-size: 0.92rem; }
.kv span { color: var(--muted); }
.kv code { font-size: 0.95em; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 6px; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: flex-start; justify-content: center; padding: 20px; padding-top: max(16px, 3vh); z-index: 30; overflow: auto; }
.modal-card { width: min(520px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; max-height: calc(100dvh - 48px); overflow: auto; }
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.82rem; margin-bottom: 12px; }
input, select { background: #0a101c; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.check { flex-direction: row; align-items: center; color: var(--text); }
.error { color: var(--bad); min-height: 1.2em; }
.empty { color: var(--muted); padding: 28px 16px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; background: rgba(255,255,255,0.02); }
.empty .btn { margin-top: 10px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filters input[type="search"] { min-width: min(240px, 100%); }
.vcard h2 { font-size: 1.15rem; }
.vcard .when { color: var(--muted); font-size: 0.85rem; margin: 4px 0 10px; }
.auth {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
.hidden { display: none !important; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.console-card { padding-bottom: 14px; }
.console-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.console-head h2 { margin: 0; letter-spacing: 0.08em; font-size: 0.95rem; }
.console-log {
  margin: 12px 0 8px;
  height: min(420px, 55dvh);
  overflow: auto;
  background: #070b12;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
  color: #d7e3f4;
}
.console-log .con-line { white-space: pre-wrap; word-break: break-word; }
.console-log .con-line.lvl-warn { border-left: 3px solid var(--warn); padding-left: 6px; }
.console-log .con-line.lvl-error { border-left: 3px solid var(--bad); padding-left: 6px; }
.console-log .con-line.lvl-info { border-left: 3px solid var(--accent-2); padding-left: 6px; }
.console-log .con-lvl-tag { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted); }
.console-log mark { background: #fbbf24; color: #111; }
.console-log mark.cur { background: var(--accent); }
.console-banner { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.console-card .btn, .console-card input, .console-actions .btn, #con-filter .btn { min-height: 44px; min-width: 44px; }
.console-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.console-input {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.console-cmd-lab { color: var(--muted); font-size: 0.8rem; }
.console-input input { margin: 0; }
@media (max-width: 768px) {
  .console-input { grid-template-columns: 1fr auto; }
  .console-cmd-lab { grid-column: 1 / -1; }
  .console-card .btn, #con-filter .btn, #con-say .btn { width: 100%; }
  #con-filter { flex-direction: column; align-items: stretch; }
}
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 10px; }
.tab {
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  border-radius: 999px; padding: 7px 12px; cursor: pointer; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em;
}
.tab.on { background: rgba(34,211,166,0.16); color: var(--text); border-color: rgba(34,211,166,0.45); }
.crumbs { margin: 10px 0; color: var(--muted); font-size: 0.85rem; word-break: break-all; }
.crumbs a { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; }
#ov-clone-wiz .check { display: block; margin: 8px 0; }
.toolbar label { display: flex; gap: 6px; align-items: center; font-size: 0.85rem; color: var(--muted); }
.toolbar input[type="search"], .toolbar input[type="text"] { min-width: min(180px, 100%); }
.file-table-wrap { overflow: auto; }
.file-ops { white-space: nowrap; }
.file-ops .btn { padding: 6px 8px; font-size: 0.75rem; }
.editor-wrap { margin-top: 16px; }
.editor-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.editor-tools input { min-width: min(140px, 100%); }
.editor-box { display: grid; grid-template-columns: 48px 1fr; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-height: 280px; }
.editor-gutter {
  margin: 0; padding: 10px 6px; background: #070b12; color: #64748b; text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45;
  overflow: hidden; user-select: none;
}
.editor-box textarea {
  border: 0; border-radius: 0; resize: vertical; min-height: 280px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.45; white-space: pre; overflow: auto;
}
.pack-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pack-card { display: flex; flex-direction: column; overflow: hidden; }
.pack-card h2 { margin-top: 4px; }
.pack-desc { min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pack-cover {
  height: 140px;
  margin: -16px -16px 12px;
  background:
    radial-gradient(circle at 30% 20%, rgba(56,189,248,0.18), transparent 50%),
    linear-gradient(135deg, #1a2438, #0f1728);
  overflow: hidden;
  position: relative;
}
.pack-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pack-cover.no-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px);
}
.pack-cover-lg { height: 220px; border-radius: 12px 12px 0 0; }
.pack-detail .pack-cover { margin: -16px -16px 16px; }
.pack-filters { margin-bottom: 16px; }
.pack-filters select, .pack-filters input[type="search"] { min-width: min(180px, 100%); }
.pack-card .actions { margin-top: auto; padding-top: 8px; }
.pack-card .btn { text-decoration: none; display: inline-block; }
.job-step { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite; flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn:focus-visible, .tab:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.notify-item:focus-visible, .user-drop a:focus-visible, .user-drop button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.server-hero { margin-top: 14px; }
.server-hero h2 { margin: 8px 0 4px; font-size: 1.35rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 0.85rem; margin-top: 8px; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ov-card h3 { margin: 0 0 10px; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.usage-line { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 4px; }
.layer-note { font-size: 0.75rem; color: var(--muted); margin-top: 8px; }
.tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs .tab { flex: 0 0 auto; }
.path-bar { font-size: 1rem; margin: 8px 0 12px; }
.path-bar code { font-size: 1rem; }
.danger-zone { border-color: rgba(251,113,133,0.45); }
.danger-zone h2 { color: var(--bad); }
.settings-section { margin-top: 16px; }
.settings-section h2 { font-size: 0.95rem; letter-spacing: 0.06em; }
.console-log { height: min(560px, 62dvh); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.player-stack { display: flex; flex-direction: column; gap: 8px; }
.player-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.player-card .actions { margin-top: 8px; }
.rec-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 16px 0; }
.rec-card { cursor: pointer; }
.rec-card:focus { outline: 2px solid var(--accent, #22d3a6); outline-offset: 2px; }
.rec-small { font-size: 1rem; }
.rec-preview { margin-top: 12px; }
.rec-backup .btn, #rec-filter .btn, .rec-preview .btn, .rec-overview .btn, #rec-detail .btn { min-height: 44px; }
@media (max-width: 860px) {
  .rec-list { grid-template-columns: 1fr; }
  .rec-backup { flex-direction: column; }
  .rec-backup .btn, #rec-filter .btn, .rec-preview .btn { width: 100%; min-height: 44px; }
  #rec-filter { flex-direction: column; align-items: stretch; }
}
.inc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 16px 0; }
.inc-card { cursor: pointer; }
.inc-card:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.inc-filter .btn, .inc-card .btn, .inc-actions .btn, #inc-detail .btn { min-height: 44px; min-width: 44px; }
@media (max-width: 768px) {
  .inc-list { grid-template-columns: 1fr; }
  .inc-filter { flex-direction: column; align-items: stretch; }
  .inc-actions { flex-direction: column; }
  .inc-filter .btn, #inc-detail .btn, .inc-actions .btn { width: 100%; }
}
.node-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.node-tabs .btn { min-height: 44px; }
#mn-root { margin-bottom: 12px; }
.node-ops-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.node-ops-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.node-ops-table th, .node-ops-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.node-ops-table th { cursor: pointer; min-height: 44px; }
.node-ops-table a { min-height: 44px; display: inline-flex; align-items: center; }
.node-ops-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.node-ops-filters select, .node-ops-filters .btn { min-height: 44px; }
.node-ops-guide { border-left: 3px solid var(--accent); padding-left: 12px; }
.node-ops-actions .btn.danger, .node-ops-actions button[data-kind="destructive"] { border-color: #b45309; }
@media (max-width: 768px) {
  .node-ops-table { min-width: 100%; }
  .node-ops-filters { flex-direction: column; }
  .node-ops-actions { flex-direction: column; }
}
.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.node-card { cursor: pointer; min-width: 0; }
.node-card:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.node-toolbar .btn, .node-card .btn, #node-servers a.btn, .node-toolbar a.btn { min-height: 44px; min-width: 44px; }
.node-srv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.node-res-card { margin: 0 0 8px; }
@media (max-width: 768px) {
  .node-grid, .node-srv-list { grid-template-columns: 1fr; }
  .node-toolbar { flex-direction: column; align-items: stretch; }
  .node-toolbar .btn, .node-toolbar a.btn { width: 100%; }
}
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.share-card .btn, .share-dialog .btn, #share-root .btn { min-height: 44px; min-width: 44px; }
.share-groups { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin: 12px 0; }
.share-group, .share-extra { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.share-cands { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.share-dialog ul { margin: 8px 0 0; padding-left: 18px; }
.act-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 16px 0; }
.act-card { cursor: pointer; }
.act-card:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.act-filter .btn, .act-pager .btn, .act-card, .act-detail .btn, #srv-act .btn { min-height: 44px; }
.mnt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 16px 0; }
.mnt-card { cursor: pointer; }
.mnt-card:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.mnt-filter .btn, .mnt-card, .mnt-detail .btn, .mnt-actions .btn, .mnt-wiz .btn, .mnt-dash .btn, .mnt-pick { min-height: 44px; min-width: 44px; }
.mnt-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.mnt-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; }
.mnt-steps li { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); }
.mnt-steps li[aria-current="step"] { background: var(--accent); color: #111; }
.mnt-pick, .mnt-actions-set { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.mnt-wiz label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.mnt-dash-row { margin: 12px 0 18px; }
.qs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
.qs-card { text-align: left; cursor: pointer; min-height: 44px; }
.qs-card.selected, .qs-card[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.qs-card:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.qs-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; }
.qs-steps li { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); }
.qs-steps li[aria-current="step"] { background: var(--accent); color: #111; }
.qs-actions .btn, .qs-wiz .btn, .qs-card, .qs-wiz select, .qs-wiz input { min-height: 44px; }
.qs-wiz label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.ob-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; }
.ob-steps li { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); }
.ob-steps li[aria-current="step"] { background: var(--accent); color: #111; }
.ob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ob-wiz label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.ob-wiz input, .ob-wiz select, .ob-wiz .btn, .ob-foot .btn, .ob-modes .btn { min-height: 44px; }
.ob-foot {
  position: sticky;
  bottom: 0;
  background: var(--card);
  padding-top: 12px;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ob-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ob-wiz .btn.on { background: rgba(34,211,166,0.16); }
.ob-wiz input:focus-visible, .ob-wiz select:focus-visible, .ob-wiz .btn:focus-visible, .ob-foot .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .ob-grid { grid-template-columns: 1fr; }
  .ob-foot .btn, .ob-modes .btn { width: 100%; }
}
@media (max-width: 390px) {
  .ob-wiz h1 { font-size: 1.25rem; }
}
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pc-card { min-height: 44px; }
.pc-filter .btn, .pc-card .btn, .pc-hero .btn, .pc-detail .btn, #pl-online-body .btn, #wl-list .btn, #op-list .btn, #ban-list .btn { min-height: 44px; min-width: 44px; }
[data-pane="players"] .btn, [data-pane="players"] a.btn, [data-pane="players"] .actions .btn { min-height: 44px; min-width: 44px; }
.pc-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.po-tabs { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin: 8px 0 12px; }
.po-tabs .btn { min-height: 44px; min-width: 44px; flex: 0 0 auto; }
.po-uuid { overflow-wrap: anywhere; word-break: break-all; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sc-card { min-height: 44px; }
.sc-filter .btn, .sc-hero .btn, .sc-card .btn, [data-pane="storage"] .btn, [data-pane="storage"] a.btn, [data-pane="storage"] .actions .btn {
  min-height: 46px;
  min-width: 44px;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
}
.sc-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
[data-pane="storage"] { overflow-x: hidden; }
[data-pane="storage"] .kv { overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .sc-grid { grid-template-columns: 1fr; }
  .sc-filter { flex-direction: column; align-items: stretch; }
  .sc-filter .btn, [data-pane="storage"] .btn, [data-pane="storage"] a.btn { width: 100%; }
  [data-pane="storage"] .kv { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .sc-hero h2 { font-size: 1.25rem; }
  [data-pane="storage"] .kv { grid-template-columns: 1fr; }
}
.bo-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.bo-filter .btn, .bo-hero .btn, .bo-card .btn, #bo-table .btn, [data-pane="backups"] .btn, [data-pane="backups"] a.btn {
  min-height: 46px;
  min-width: 44px;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
}
.bo-danger-btn { margin-left: 4px; }
#bo-cards { display: none; }
@media (max-width: 768px) {
  .bo-filter { flex-direction: column; align-items: stretch; }
  .bo-filter .btn, [data-pane="backups"] .btn, [data-pane="backups"] a.btn { width: 100%; }
  .bo-table { overflow-x: auto; }
}
@media (max-width: 390px) {
  .bo-table { display: none; }
  #bo-cards { display: grid; }
}
[data-pane="worlds"] { overflow-x: hidden; }
[data-pane="worlds"] .btn, [data-pane="worlds"] a.btn, [data-pane="worlds"] .actions .btn {
  min-height: 46px;
  min-width: 44px;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
}
.wo-card.wo-active { border-color: var(--accent); }
.wo-danger { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
@media (max-width: 768px) {
  [data-pane="worlds"] .btn, [data-pane="worlds"] a.btn { width: 100%; }
  [data-pane="worlds"] .kv { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  [data-pane="worlds"] .kv { grid-template-columns: 1fr; }
}
.po-dlg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  padding: 16px;
}
.po-dlg.hidden { display: none; }
.po-dlg .card { max-width: 420px; width: 100%; }
.po-dlg .btn { min-height: 44px; }
@media (max-width: 768px) {
  .pc-grid { grid-template-columns: 1fr; }
  .pc-filter { flex-direction: column; align-items: stretch; }
  .pc-filter .btn, .pc-detail .btn, .po-tabs .btn { width: 100%; }
  .po-tabs { flex-wrap: wrap; }
}
@media (max-width: 390px) {
  .pc-hero h2 { font-size: 1.25rem; }
  .po-uuid { font-size: 0.85rem; }
}
@media (max-width: 768px) {
  .qs-grid { grid-template-columns: 1fr; }
  .qs-actions .btn, .qs-wiz .btn { width: 100%; }
}
@media (max-width: 768px) {
  .mnt-list { grid-template-columns: 1fr; }
  .mnt-filter { flex-direction: column; align-items: stretch; }
  .mnt-filter .btn, .mnt-actions .btn, .mnt-wiz .btn, .mnt-dash .btn { width: 100%; }
}
.act-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.act-pager { align-items: center; gap: 12px; }
@media (max-width: 768px) {
  .act-list { grid-template-columns: 1fr; }
  .act-filter { flex-direction: column; align-items: stretch; }
  .act-filter .btn, .act-pager .btn { width: 100%; }
}
@media (max-width: 768px) {
  .share-grid { grid-template-columns: 1fr; }
  .share-dialog .btn, #share-root .btn { width: 100%; }
}
.fleet-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.fleet-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.fleet-toolbar .btn, .fleet-bar .btn, .fleet-card .btn, .fleet-fav, .fleet-pick { min-height: 44px; min-width: 44px; }
.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.fleet-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fleet-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; padding: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.fleet-bar.hidden { display: none; }
.fleet-locked { opacity: 0.95; }
@media (max-width: 768px) {
  .fleet-grid { grid-template-columns: 1fr; }
  .fleet-toolbar { flex-direction: column; align-items: stretch; }
  .fleet-bar { flex-direction: column; align-items: stretch; }
  .fleet-toolbar .btn, .fleet-bar .btn, .fleet-card .btn { width: 100%; }
}
.bp-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.bp-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.bp-card .btn, #bp-filter .btn, .bp-editor .btn, .bp-preview .btn { min-height: 44px; min-width: 44px; }
.bp-editor section { margin: 12px 0; }
.bp-editor h2, .bp-preview h2 { font-size: 0.95rem; letter-spacing: 0.06em; margin: 12px 0 8px; }
@media (max-width: 768px) {
  .bp-grid { grid-template-columns: 1fr; }
  .bp-card .actions, .bp-preview .actions, .bp-editor .actions { flex-direction: column; }
  .bp-card .btn, .bp-preview .btn, .bp-editor .btn, #bp-filter .btn { width: 100%; min-height: 44px; }
  .bp-filters { flex-direction: column; align-items: stretch; }
}
.addon-card { margin-bottom: 10px; }
.addon-card img { float: left; margin: 0 10px 8px 0; border-radius: 8px; }
.addon-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.addon-table { width: 100%; border-collapse: collapse; }
.addon-table th, .addon-table td { text-align: left; padding: 8px 6px; vertical-align: top; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.addon-table th { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.06em; }
.addon-cards { display: none; }
.addon-check-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.mod-preview { margin-top: 12px; }
.mod-preview pre { white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; font: inherit; }
#mods-root .btn { min-height: 44px; }
@media (max-width: 860px) {
  .addon-table-wrap { display: none; }
  .addon-cards { display: block; }
  .addon-cards .player-list-item .btn { width: 100%; min-height: 44px; }
  .addon-check-bar .btn { width: 100%; min-height: 44px; }
}
.jvm-sub { margin: 10px 0 14px; }
.player-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.player-list-item .btn { min-height: 40px; }
[data-pane="players"] .player-list-item .btn { min-height: 44px; }
.motd-preview {
  margin-top: 8px;
  padding: 10px 12px;
  background: #070b12;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.motd-preview strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.mon-health h2 { margin-bottom: 8px; }
.mon-health.ok { border-color: rgba(52, 211, 153, 0.45); }
.mon-health.warn { border-color: rgba(251, 191, 36, 0.45); }
.mon-health.bad { border-color: rgba(251, 113, 133, 0.45); }
.mon-svg { width: 100%; height: 128px; display: block; margin: 8px 0 16px; max-width: 100%; }
.perf-chart-wrap { overflow-x: hidden; max-width: 100%; }
.perf-live h2 { font-size: 1.35rem; }
@media (max-width: 860px) {
  .perf-live { grid-template-columns: 1fr; }
  .perf-live h2 { font-size: 1.25rem; }
}
.mon-svg circle { fill: currentColor; }
.mc-status-bar h2 { margin-bottom: 10px; }
.mc-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
}
.mc-status-grid dt {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}
.mc-status-grid dd { margin: 4px 0 0; }
.mc-kpi-grid { margin-top: 12px; }
.mc-kpi h2 { font-size: 1.35rem; }
.mc-kpi-ideal h2 { color: var(--ok); }
.mc-chart-block { min-width: 0; }
.mc-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mc-chart-now { margin: 0; color: var(--muted); font-size: 0.85rem; }
.mc-chart-empty { min-height: 88px; display: flex; align-items: center; }
.mc-win .btn[aria-pressed="true"] { background: rgba(34,211,166,0.16); }
.mc-mon-links .btn { min-height: 44px; }
.mc-win .btn { min-height: 44px; }
[data-pane="monitoring"] .btn { min-height: 44px; }
.mc-win .btn:focus-visible, .mc-mon-links .btn:focus-visible, .mc-kpi a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 1280px) {
  .mc-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .mc-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  .mc-status-grid { grid-template-columns: 1fr; }
  .mc-kpi-grid { grid-template-columns: 1fr; }
  .mc-kpi h2 { font-size: 1.2rem; }
}
.an-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.an-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.an-toolbar select { min-height: 44px; min-width: 160px; }
.an-event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.an-event h3 { margin: 0; font-size: 1rem; }
.an-table { width: 100%; border-collapse: collapse; }
.an-table th, .an-table td { text-align: left; padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.an-seg-online { background: rgba(34,211,166,0.16); }
.an-seg-offline { background: rgba(251,113,133,0.16); }
.an-seg-unknown { background: rgba(148,163,184,0.16); }
.an-seg-starting { background: rgba(251,191,36,0.16); }
.an-seg-error { background: rgba(251,113,133,0.28); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 1280px) {
  .an-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .an-win-btns { display: none; }
  .an-charts .mc-chart-block { width: 100%; }
  .an-event-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
  .an-win-select { display: none; }
}
.nc-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.nc-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.nc-toolbar select, .nc-toolbar input { min-height: 44px; }
.nc-inbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.nc-card { cursor: pointer; }
.nc-unread { outline: 1px solid var(--accent); }
.nc-card:focus-visible, .nc-toolbar .btn:focus-visible, .nc-tabs .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nc-dialog { max-width: 520px; width: calc(100% - 24px); }
.nc-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nc-tabs .btn { min-height: 44px; }
.nc-tabs .btn[aria-pressed="true"] { background: rgba(34,211,166,0.16); }
@media (max-width: 1280px) {
  .nc-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .nc-tabs { display: none; }
  .nc-inbox, .nc-rule-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
  .nc-tab-select { display: none; }
}
@media (max-width: 390px) {
  .nc-kpis { grid-template-columns: 1fr 1fr; }
}
.lc-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.lc-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.lc-toolbar select, .lc-toolbar input, .lc-toolbar .btn { min-height: 44px; }
.lc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.lc-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.lc-diff { width: 100%; border-collapse: collapse; }
.lc-diff th, .lc-diff td { text-align: left; padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.lc-toolbar .btn:focus-visible, .lc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 768px) {
  .lc-list { grid-template-columns: 1fr; }
  .lc-preview { grid-template-columns: 1fr; }
  .lc-actions { position: sticky; bottom: 8px; background: var(--bg, #0b1220); padding: 8px; z-index: 2; }
  .lc-toolbar { position: sticky; bottom: 8px; background: var(--bg, #0b1220); padding: 8px; }
}
@media (max-width: 390px) {
  .lc-kpis { grid-template-columns: 1fr 1fr; }
  .lc-list { grid-template-columns: 1fr; }
  .lc-preview { grid-template-columns: 1fr; }
}
.hub-root { min-width: 0; }
.hub-status-grid { margin-top: 8px; }
.hub-nav, .hub-quick { flex-wrap: wrap; }
.hub-nav .btn, .hub-quick .btn, .hub-more .btn, [data-pane="overview"] .btn { min-height: 44px; }
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.hub-grid > .card h2, .hub-console h2, .hub-actions-card h2, .hub-perf h2, .hub-status h2, .hub-more h2 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.hub-log {
  max-height: 220px;
  overflow: auto;
  background: #070b12;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.hub-reasons { color: var(--muted); font-size: 0.85rem; padding-left: 18px; }
.hub-live-pills { margin-top: 8px; }
.hub-nav .btn:focus-visible, .hub-quick .btn:focus-visible, [data-hub-win]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 1280px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  .hub-kpi-grid { grid-template-columns: 1fr; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav { display: none; width: 100%; flex-direction: column; gap: 4px; }
  .nav.open { display: flex; }
  .nav a { min-height: 44px; display: flex; align-items: center; }
  .kv { grid-template-columns: 1fr; }
  .main { padding: 16px var(--safe-r) var(--safe-b) var(--safe-l); overflow-x: hidden; }
  .file-ops { white-space: normal; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar label, .toolbar .btn, .toolbar input { width: 100%; }
  .player-card .actions .btn { flex: 1 1 140px; min-height: 40px; }
  .player-list-item { flex-direction: column; }
  .player-list-item .btn { width: 100%; }
  .dash-power { display: none; }
  .srv-card .actions .btn { width: 100%; }
  .modal-card { max-width: calc(100vw - 24px); max-height: calc(100dvh - 48px); overflow: auto; }
  .actions .btn { min-height: 44px; }
}
.user-menu { position: relative; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; }
.user-av {
  width: 28px; height: 28px; border-radius: 999px; background: rgba(34,211,166,0.2);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem;
}
.user-drop {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 6px; z-index: 45;
}
.user-drop a, .user-drop button {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; color: inherit;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; font: inherit;
}
.user-drop a:hover, .user-drop button:hover { background: rgba(34,211,166,0.12); }
.dash-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 16px; }
.dash-counts .card { padding: 12px; }
.dash-counts h2 { margin: 4px 0 0; }
.srv-card h2 { font-size: 1.2rem; }
.skel { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: skel 1.2s linear infinite; min-height: 88px; border-radius: 16px; }
@keyframes skel { to { background-position: -200% 0; } }
.dash-section { margin-top: 18px; }
.dash-section > h2 { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 10px; }
.alert-row { display: block; width: 100%; padding: 8px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; background: transparent; border-left: 0; border-right: 0; border-top: 0; text-align: left; font: inherit; cursor: pointer; }
.alert-row:hover { color: var(--accent-2); }
.modal[aria-hidden="true"] { display: none !important; }
#hero-actions .btn { min-width: 96px; }
@media (max-width: 860px) {
  .btn { min-height: 44px; }
  .notify-panel { right: 8px; left: 8px; width: auto; top: 64px; }
}
.ops-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ops-card h3 { margin: 0 0 10px; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.ops-span-2 { grid-column: span 2; min-width: 0; }
.ops-actions .actions { flex-wrap: wrap; }
.ops-hero h2 { margin: 8px 0 4px; }
@media (max-width: 1100px) {
  .ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ops-grid { grid-template-columns: 1fr; }
  .ops-span-2 { grid-column: auto; }
  .ops-actions .btn { min-height: 44px; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  h1 { font-size: 1.25rem; }
  .console-log { font-size: 11px; }
  .file-table-wrap { margin: 0 -4px; }
}
.setup-wizard {
  width: min(640px, 100%);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}
.setup-wizard h1 { outline: none; }
.setup-wizard-body { overflow: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.setup-wizard-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  bottom: 0;
  background: var(--card);
  padding-top: 12px;
  margin-top: 8px;
}
.setup-wizard-foot .btn { min-height: 44px; }
.setup-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.setup-steps li {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.setup-steps li[aria-current="step"] {
  color: var(--text);
  font-weight: 700;
  border-color: var(--border);
  background: rgba(255,255,255,0.04);
}
.setup-delta { color: var(--accent-2); min-height: 1.2em; }
.setup-rec { margin: 0 0 12px; }
.setup-review { margin: 0; }
@media (max-width: 768px) {
  .setup-wizard { max-width: calc(100vw - 24px); }
  .setup-wizard .btn, .setup-wizard input, .setup-wizard select { min-height: 44px; }
  .setup-wizard-foot .btn { flex: 1 1 140px; }
}
@media (max-width: 390px) {
  .setup-wizard-foot .btn { flex: 1 1 100%; }
}
.easy-cat {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
  min-width: 0;
}
.easy-cat legend {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}
.easy-field { margin-bottom: 14px; min-width: 0; }
.easy-field label { margin-bottom: 4px; }
.easy-toggle {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
}
.easy-toggle input { width: 44px; height: 24px; }
.easy-num { display: grid; grid-template-columns: 1fr 88px; gap: 10px; align-items: center; }
.easy-preview { display: grid; gap: 6px; margin: 8px 0; }
.easy-diff-row { display: grid; grid-template-columns: 160px 1fr; gap: 8px; font-size: 0.92rem; }
.easy-diff-row span { color: var(--muted); }
.easy-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.easy-presets .btn, .easy-actions .btn, #easy-root .btn { min-height: 44px; }
.easy-field input, .easy-field select { min-height: 44px; }
@media (max-width: 768px) {
  .easy-diff-row, .easy-num { grid-template-columns: 1fr; }
  .easy-presets .btn { min-height: 44px; flex: 1 1 140px; }
}
@media (max-width: 390px) {
  .easy-actions .btn { width: 100%; }
}
.ao-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.ao-filter .btn, .ao-hero .btn, .ao-card .btn, #ao-table .btn, [data-pane="automation"] .btn, [data-pane="automation"] a.btn, .ao-wiz .btn, .ao-wiz-nav .btn, .ao-dlg .btn {
  min-height: 46px;
  min-width: 44px;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
}
.ao-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ao-steps { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.ao-steps li { font-size: 0.82rem; color: var(--muted); padding: 6px 8px; border-radius: 8px; }
.ao-steps li[aria-current="step"] { color: var(--text); font-weight: 700; background: var(--border); }
.ao-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; border: 0; padding: 0; }
.ao-pick { display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-height: 44px; text-align: left; }
.ao-pick input { margin-right: 6px; }
.ao-chain { padding-left: 1.2rem; }
.ao-wiz-nav { position: sticky; bottom: 0; background: var(--bg, #111); padding: 10px 0; gap: 8px; }
.ao-dlg { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: flex-end; justify-content: center; z-index: 40; padding: 12px; }
.ao-dlg .card { max-width: 720px; width: 100%; max-height: 92vh; overflow: auto; }
.ao-dlg.hidden { display: none; }
@media (max-width: 768px) {
  .ao-filter { flex-direction: column; align-items: stretch; }
  .ao-filter .btn, [data-pane="automation"] .btn, [data-pane="automation"] a.btn, .ao-wiz .btn, .ao-wiz-nav .btn { width: 100%; }
  .ao-table { overflow-x: auto; }
  .ao-cards { grid-template-columns: 1fr; }
  .ao-steps { flex-direction: column; }
}
@media (max-width: 390px) {
  .ao-table { display: none; }
  .ao-grid { display: grid; grid-template-columns: 1fr; }
  .ao-wiz-nav { position: sticky; bottom: 0; }
}
.uo-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.uo-filter .btn, .uo-hero .btn, .uo-card .btn, #uo-table .btn, .uo-dlg-card .btn {
  min-height: 46px;
  min-width: 44px;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
}
.uo-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.uo-matrix-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
@media (max-width: 768px) {
  .uo-filter { flex-direction: column; align-items: stretch; }
  .uo-filter .btn, .uo-hero .btn, .uo-card .btn { width: 100%; }
  .uo-table { overflow-x: auto; }
}
@media (max-width: 390px) {
  .uo-table { display: none; }
  .uo-grid { display: grid; grid-template-columns: 1fr; }
}
.so-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.so-filter .btn, .so-hero .btn, .so-card .btn, .so-card a.btn {
  min-height: 46px;
  min-width: 44px;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
}
.so-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
@media (max-width: 768px) {
  .so-filter { flex-direction: column; align-items: stretch; }
  .so-filter .btn, .so-card .btn, .so-card a.btn { width: 100%; }
}
@media (max-width: 390px) {
  .so-grid { grid-template-columns: 1fr; }
}
.ig-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.ig-filter .btn, .ig-hero .btn, .ig-card .btn, .ig-dlg-card .btn {
  min-height: 46px;
  min-width: 44px;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
}
.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
@media (max-width: 768px) {
  .ig-filter { flex-direction: column; align-items: stretch; }
  .ig-filter .btn, .ig-card .btn { width: 100%; }
}
@media (max-width: 390px) {
  .ig-table { display: none; }
  .ig-grid { grid-template-columns: 1fr; }
}
.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 80;
  background: var(--accent); color: #04251c; padding: 8px 12px; border-radius: 8px;
}
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-group-label {
  margin: 12px 8px 4px; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.nav { overflow-y: auto; flex: 1; }
.nav-collapse { min-width: 36px; min-height: 36px; }
.top-lead { min-width: 0; flex: 1; }
.ux-crumb { font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; }
.ux-crumb a { text-decoration: none; color: var(--accent-2); }
.ux-ctx { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.ux-search-wrap { position: relative; min-width: min(220px, 40vw); }
.ux-search-wrap input { width: 100%; min-height: 44px; }
.ux-results, .ux-switcher, .ux-palette {
  position: absolute; right: 0; top: calc(100% + 6px); width: min(420px, 92vw);
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px; z-index: 45; max-height: 60dvh; overflow: auto;
}
.ux-switch-wrap { position: relative; }
.ux-results a, .ux-switcher a, .ux-palette a {
  display: block; text-decoration: none; padding: 8px 6px; border-radius: 8px; color: inherit;
}
.ux-results a:hover, .ux-switcher a:hover, .ux-palette a:hover,
.ux-results a:focus, .ux-switcher a:focus, .ux-palette a:focus { background: rgba(34,211,166,0.12); outline: none; }
.ux-palette {
  position: fixed; left: 50%; top: 12vh; transform: translateX(-50%); right: auto; width: min(560px, 94vw);
}
.ux-palette input { width: 100%; min-height: 44px; margin-bottom: 8px; }
.ux-status { margin: -8px 0 14px; font-size: 0.82rem; color: var(--muted); }
.ux-status a { color: var(--accent-2); text-decoration: none; margin-right: 8px; }
.ux-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 25; }
.ux-bottom {
  display: none; position: sticky; bottom: 0; z-index: 20;
  background: var(--side); border-top: 1px solid var(--border);
  padding: 6px var(--safe-r) max(8px, var(--safe-b)) var(--safe-l);
  justify-content: space-around; gap: 4px;
}
.ux-bottom a, .ux-bottom button {
  background: transparent; border: 0; color: var(--muted); min-height: 44px; font-size: 0.72rem; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px;
}
.app.nav-collapsed { grid-template-columns: 72px 1fr; }
.app.nav-collapsed .nav-group-label { display: none; }
.app.nav-collapsed .logo { font-size: 0; padding: 10px 0; }
.app.nav-collapsed .logo span { font-size: 0.7rem; display: block; text-align: center; }
.app.nav-collapsed .nav a { padding: 10px 6px; text-align: center; }
.app.nav-collapsed .nav-label {
  position: absolute; left: 76px; background: var(--card); border: 1px solid var(--border);
  padding: 6px 8px; border-radius: 8px; white-space: nowrap; z-index: 30; display: none;
}
.app.nav-collapsed .nav a { position: relative; }
.app.nav-collapsed .nav a:hover .nav-label,
.app.nav-collapsed .nav a:focus .nav-label { display: block; }
.app.nav-collapsed .nav a::before {
  content: attr(data-nav);
  font-size: 0;
}
@media (max-width: 1280px) {
  .app { grid-template-columns: 200px 1fr; }
}
@media (max-width: 860px) {
  .nav-collapse { display: none; }
  .ux-bottom { display: flex; }
  .main { padding-bottom: 72px; }
  .side.drawer-open { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); z-index: 30; background: var(--side); }
  .side.drawer-open .nav { display: flex; }
  .ux-search-wrap { min-width: 0; width: 100%; }
  .top-actions { width: 100%; flex-wrap: wrap; }
  .ux-ctx { font-size: 0.85rem; }
}
@media (max-width: 390px) {
  .ux-crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .user-chip #user-chip-name { display: none; }
}
.sc-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 12px 0; }
.sc-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.sc-toolbar select, .sc-toolbar .btn { min-height: 44px; }
.sc-weeknav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.sc-weeknav .btn { min-height: 44px; }
.sc-create { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sc-day h3 { font-size: 0.8rem; }
.sc-day-open { background: transparent; border: 0; color: inherit; min-height: 44px; padding: 4px 0; cursor: pointer; text-align: left; }
.sc-day-open:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-ev { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: inherit; padding: 6px; margin: 4px 0; min-height: 44px; }
.sc-ev:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-ev-backup, .sc-kind-backup { border-left: 4px solid #3b82f6; }
.sc-ev-automation, .sc-kind-automation { border-left: 4px solid #a855f7; }
.sc-ev-maintenance, .sc-kind-maintenance { border-left: 4px solid #f59e0b; }
.sc-ev-action, .sc-kind-action { border-left: 4px solid #10b981; }
.sc-list { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sc-table-wrap { overflow-x: auto; }
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table th, .sc-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.sc-timeline { padding-left: 20px; }
.sc-kpis h2 { font-size: 1rem; overflow-wrap: anywhere; }
@media (max-width: 1280px) {
  .sc-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .sc-cal { grid-template-columns: 1fr; }
  .sc-table-wrap { display: none; }
  .sc-list { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .sc-kpis { grid-template-columns: 1fr 1fr; }
}
.sec-check { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 8px; min-height: 44px; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: inherit; text-align: left; padding: 8px 0; cursor: pointer; }
.sec-check:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sec-export { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sec-export .btn { min-height: 44px; }
@media (max-width: 768px) {
  .sec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .sec-check { flex-wrap: wrap; }
}
.uc-kpis h2 { font-size: 1rem; overflow-wrap: anywhere; }
.uc-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 12px 0; }
.uc-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.uc-toolbar select, .uc-toolbar input, .uc-toolbar .btn { min-height: 44px; }
.uc-table { width: 100%; border-collapse: collapse; }
.uc-table th, .uc-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.uc-table .btn { min-height: 44px; margin: 2px; }
.uc-open { background: transparent; border: 0; color: inherit; min-height: 44px; padding: 4px 0; cursor: pointer; text-align: left; font: inherit; }
.uc-open:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.uc-list { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.uc-card h3 { margin: 4px 0; }
.uc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.uc-actions .btn { min-height: 44px; }
.uc-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
@media (max-width: 1280px) {
  .uc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .uc-table-wrap { display: none; }
  .uc-list { display: grid; grid-template-columns: 1fr; }
  .uc-diff { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .uc-kpis { grid-template-columns: 1fr; }
  .uc-actions { flex-direction: column; }
}
.mig-kpis h2 { font-size: 1rem; overflow-wrap: anywhere; }
.mig-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.mig-toolbar .btn { min-height: 44px; }
.mig-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mig-card h3 { margin: 4px 0; }
.mig-open, .mig-job { background: transparent; border: 0; color: inherit; min-height: 44px; padding: 4px 0; cursor: pointer; text-align: left; font: inherit; }
.mig-open:focus, .mig-job:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.mig-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mig-actions .btn { min-height: 44px; }
.mig-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
@media (max-width: 1280px) {
  .mig-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .mig-list { grid-template-columns: 1fr; }
  .mig-diff { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .mig-kpis { grid-template-columns: 1fr; }
  .mig-actions { flex-direction: column; }
}
.cap-kpis h2 { font-size: 1rem; overflow-wrap: anywhere; }
.cap-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cap-card h3 { margin: 4px 0; }
.cap-open { background: transparent; border: 0; color: inherit; min-height: 44px; padding: 4px 0; cursor: pointer; text-align: left; font: inherit; }
.cap-open:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.cap-bar { display: flex; height: 12px; background: var(--border, #333); border-radius: 6px; overflow: hidden; margin: 6px 0; }
.cap-seg.reserve { background: #6b7280; }
.cap-seg.used { background: #2563eb; }
.cap-seg.free { background: #16a34a; }
.cap-profiles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 1280px) {
  .cap-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .cap-list { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .cap-kpis { grid-template-columns: 1fr; }
  .cap-list { grid-template-columns: 1fr; }
}
.res-kpis h2 { font-size: 1rem; overflow-wrap: anywhere; }
.res-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.res-card h3 { margin: 4px 0; }
.res-windows { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.res-spark { width: min(100%, 280px); height: 48px; color: var(--accent-2); }
.res-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; }
.res-table th, .res-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.res-live { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.04em; vertical-align: middle; }
.res-live.live { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.res-live.stale { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.res-live.unknown { background: color-mix(in srgb, var(--muted, #888) 22%, transparent); }
.res-sat { font-weight: 600; }
.res-sat.healthy { color: var(--ok); }
.res-sat.watch { color: var(--warn); }
.res-sat.high, .res-sat.saturated { color: var(--bad); }
.rel-sat { font-weight: 600; }
.rel-sat.healthy { color: var(--ok); }
.rel-sat.degraded, .rel-sat.recovering { color: var(--warn); }
.rel-sat.unavailable { color: var(--bad); }
.rel-sat.unknown, .rel-sat.maintenance { color: var(--muted, #888); }
.lc-stages { margin: 0.4rem 0 0.6rem 1.2rem; }
.lc-stages li { margin: 0.15rem 0; }
#cf-root { margin-top: 16px; }
#ex-root { margin-top: 8px; }
.ex-export { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#dr-root { margin-top: 8px; }
.dr-export { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#ov-root { margin-top: 8px; }
.ov-export { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#ph-root { margin-top: 8px; }
.ph-export { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#cf-filter { margin: 12px 0; }
@media (max-width: 768px) {
  #cf-filter { grid-template-columns: 1fr; }
}
.res-export { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
@media (max-width: 1280px) {
  .res-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .res-list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .res-list { grid-template-columns: 1fr; }
  .res-table { display: block; overflow-x: auto; }
}
@media (max-width: 390px) {
  .res-kpis { grid-template-columns: 1fr; }
  .res-list { grid-template-columns: 1fr; }
  .res-windows { flex-direction: column; }
}
.proj-kpis h2 { font-size: 1rem; overflow-wrap: anywhere; }
.proj-list { display: none; }
.proj-open { background: transparent; border: 0; color: inherit; min-height: 44px; padding: 4px 0; cursor: pointer; text-align: left; font: inherit; }
.proj-open:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.proj-tab { display: inline-block; min-height: 44px; padding: 8px 10px; }
.proj-tab:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1280px) {
  .proj-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .proj-table { display: none; }
  .proj-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 390px) {
  .proj-kpis { grid-template-columns: 1fr; }
  .proj-list { grid-template-columns: 1fr; }
}
.pol-kpis h2 { font-size: 1rem; overflow-wrap: anywhere; }
.pol-rule { min-height: 44px; }
.pol-rule:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.pol-win { margin: 12px 0; }
.pol-matrix { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pol-ov-in { min-height: 44px; width: 100%; max-width: 420px; }
.pol-win input[type="number"] { min-height: 44px; width: 5rem; }
#pol-import { width: 100%; max-width: 100%; }
#appr-root .proj-tab, #appr-detail .btn { min-height: 44px; }
#appr-table { overflow-wrap: anywhere; }
@media (max-width: 768px) {
  #appr-table { font-size: 0.85rem; }
}
@media (max-width: 1280px) {
  .pol-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .pol-kpis { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .pol-kpis { grid-template-columns: 1fr; }
}
.obs-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.obs-tabs .btn { min-height: 44px; }
.obs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.obs-chart { margin: 0 0 12px; color: var(--accent-2); }
.obs-chart figcaption { color: var(--muted); }
.obs-auto-table { width: 100%; border-collapse: collapse; }
.obs-auto-table th, .obs-auto-table td { text-align: left; padding: 8px; min-height: 44px; }
.obs-auto-ops { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.obs-hist-controls { display: grid; gap: 10px; margin-bottom: 12px; }
.obs-hist-select { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.obs-hist-select label { display: flex; gap: 8px; align-items: center; min-height: 44px; }
.obs-hist-select select { min-height: 44px; min-width: 12rem; }
.obs-range .btn[aria-pressed="true"] { font-weight: 700; }
@media (max-width: 768px) {
  .obs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .obs-grid { grid-template-columns: 1fr; }
  .obs-tabs { flex-direction: column; }
  .obs-hist-select { flex-direction: column; align-items: stretch; }
  .obs-hist-select select { width: 100%; min-width: 0; }
  .obs-range { flex-direction: column; }
}

/* Compact, uncropped provider artwork in creation flows. */
.ob-pack-cover { height: 112px; width: 100%; border-radius: 10px; margin: 0 0 12px; }
.ob-pack-cover img { object-fit: contain; padding: 8px; box-sizing: border-box; }
.ob-pack-grid { margin: 16px 0; }
.ob-pack-card { min-width: 0; text-align: left; }
.ob-pack-card h2 { overflow-wrap: anywhere; }
.ob-pack-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-ob-source][aria-pressed="true"] { border-color: var(--accent, #73c8f1); background: rgba(115, 200, 241, .12); }