:root { --mx-s1: #ffffff; --mx-s2: #f1f3f7; --mx-bd: #dde2ea; --mx-tx: #1c2230; --mx-mu: #667085; --mx-ac: #3b6fd8; }
body.body--dark { --mx-s1: #151a22; --mx-s2: #1c2230; --mx-bd: #2a3242; --mx-tx: #e6e9ef; --mx-mu: #98a2b3; --mx-ac: #5b8cff; }

.mx-page { width: 100%; max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.mx-top { display: flex; align-items: center; gap: 12px; }
.mx-top > :first-child { flex: 1; }
.mx-logo { font-size: 16px; margin-right: 10px; }
.mx-mu { color: var(--mx-mu); }
.mx-page code, .mx-focus code { font-size: 11px; color: var(--mx-mu); }

.mx-db, .mx-panel { background: var(--mx-s1); border: 1px solid var(--mx-bd); border-radius: 10px; padding: 10px 12px; }
.mx-db { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; align-items: center; }
.mx-db > span { color: var(--mx-mu); font-size: 12px; }
.mx-db > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mx-inputs { display: flex; gap: 8px; align-items: flex-start; }
.mx-q { flex: 1; }
.mx-q textarea { max-height: 40vh; overflow-y: auto !important; }
.mx-q textarea::selection { background: color-mix(in srgb, var(--sel, var(--mx-ac)) 45%, transparent); color: inherit; }
.mx-find { cursor: pointer; }
.mx-find:hover { border-color: var(--c); }
.mx-n { width: 130px; }
.mx-understood { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.mx-understood:empty, .mx-stats:empty { display: none; }
.mx-lbl { color: var(--mx-mu); font-size: 12px; margin-right: 2px; }

.mx-chip { display: inline-flex; gap: 6px; align-items: center; max-width: 360px; padding: 1px 9px; border-radius: 999px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.mx-chip b { color: color-mix(in srgb, var(--c) 75%, currentColor); font-weight: 600; }
.mx-chip em, .mx-w { color: var(--mx-mu); font-style: normal; font-size: 11px; }
.mx-pill { padding: 1px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--mx-bd); color: var(--mx-mu); }
.mx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mx-lock::before { content: "🔒 "; }
.mx-warn { color: #d9822b; border-color: #d9822b88; }

.mx-stats { color: var(--mx-mu); }
.mx-stats b { color: var(--mx-tx); }
.mx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.mx-card { background: var(--mx-s1); border: 1px solid var(--mx-bd); border-radius: 10px; padding: 12px; cursor: pointer; transition: border-color .15s; }
.mx-card:hover { border-color: var(--mx-ac); }
.mx-ctop { display: flex; justify-content: space-between; color: var(--mx-mu); }
.mx-score { color: var(--mx-tx); font-weight: 700; font-size: 16px; }
.mx-ctitle { font-weight: 600; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx-csub { color: var(--mx-mu); margin: 2px 0 8px; }
.mx-csub b { color: var(--mx-tx); }
.mx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mx-more { color: var(--mx-mu); font-size: 12px; }
.mx-cfoot { margin-top: 8px; color: var(--mx-mu); font-size: 12px; }
.mx-empty { grid-column: 1 / -1; padding: 12px 14px; border: 1px dashed #d9822b88; border-radius: 10px; }
.mx-empty ul { margin: 6px 0 0 18px; list-style: disc; }

.mx-bar { display: flex; gap: 2px; margin: 6px 0 8px; }
.mx-slot { height: 6px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--mx-mu) 18%, transparent); }
.mx-slot i { display: block; height: 100%; }
.mx-tall .mx-slot { height: 10px; }
.mx-names { display: flex; gap: 2px; font-size: 11px; color: var(--mx-mu); }
.mx-names span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.mx-focus { display: flex; flex-direction: column; width: 100vw; height: 100vh; background: var(--mx-s1); color: var(--mx-tx); }
.mx-fbody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mx-fhead { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--mx-bd); }
.mx-ft { flex: 1; min-width: 0; }
.mx-ft div:first-child { font-weight: 700; font-size: 16px; }
.mx-ft div:last-child { color: var(--mx-mu); }
.mx-big { font-size: 22px; font-weight: 800; margin: 0 6px; }
.mx-rel { padding: 10px 16px; border-bottom: 1px solid var(--mx-bd); background: var(--mx-s2); }
.mx-split { flex: 1; min-height: 0; }
.mx-src { padding: 4px 16px 24px; }
.mx-sec { margin: 12px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--mx-bd); font: 11px ui-monospace, monospace; color: var(--mx-mu); }
.mx-ln { display: flex; gap: 10px; line-height: 1.6; }
.mx-ln span:first-child { width: 28px; flex: none; text-align: right; color: var(--mx-mu); opacity: .7; }
.mx-src mark { color: inherit; background: none; border-radius: 3px; cursor: pointer; }
.mx-src mark.mx-hit { padding: 0 2px; font-weight: 600; background: color-mix(in srgb, var(--c) 28%, transparent); box-shadow: inset 0 -2px 0 var(--c); }
.mx-src mark.mx-seen { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c) 70%, transparent); }
.mx-flash { outline: 2px solid var(--c, var(--mx-ac)); animation: mx-pulse 1.2s ease-out; }
@keyframes mx-pulse { from { outline-offset: 6px; } to { outline-offset: 0; } }

.mx-tabs { position: sticky; top: 0; z-index: 2; background: var(--mx-s1); }
.mx-group { margin: 8px 0 12px; }
.mx-gh { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-weight: 600; }
.mx-gh i { width: 9px; height: 9px; border-radius: 50%; }
.mx-gh span { margin-left: auto; color: var(--mx-mu); font-weight: 400; font-size: 12px; }
.mx-term { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.mx-term:hover { background: var(--mx-s2); }
.mx-name { flex: 1; }
.mx-term:not(.mx-on) .mx-name { color: var(--mx-mu); }
.mx-w { margin-left: auto; }
.mx-ok { color: #3fa34d; font-size: 12px; }
.mx-at { min-width: 34px; text-align: right; color: var(--mx-mu); font-size: 12px; }
.mx-miss { opacity: .55; }
.mx-attr { padding: 0 5px; border: 1px solid var(--mx-bd); border-radius: 4px; font: 10px ui-monospace, monospace; color: #d9822b; }
.mx-kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--mx-bd); }
.mx-kv span:first-child { color: var(--mx-mu); font: 12px ui-monospace, monospace; }
.mx-kv span:last-child { max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.mx-act { padding: 0 10px; }
.mx-job { display: flex; flex-direction: column; gap: 4px; margin-top: -4px; }
.mx-job .q-linear-progress { border-radius: 2px; color: var(--mx-ac); }
.mx-jobline { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 12px; }
.mx-jobline .q-btn { font-size: 12px; min-height: 0; padding: 0 6px; }
.mx-suggest { position: fixed; z-index: 6000; max-height: 360px; overflow-y: auto; padding: 4px; background: var(--mx-s1); color: var(--mx-tx); border: 1px solid var(--mx-bd); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); font-size: 13px; }
.mx-opt { display: flex; align-items: baseline; gap: 12px; padding: 5px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.mx-opt:hover { background: color-mix(in srgb, var(--mx-ac) 8%, transparent); }
.mx-opt.mx-sel { background: color-mix(in srgb, var(--mx-ac) 16%, transparent); }
.mx-opt b { font-weight: 700; }
.mx-opt span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; color: var(--mx-mu); font-size: 12px; }
.mx-opt em { min-width: 42px; text-align: right; color: var(--mx-mu); font-size: 11px; font-style: normal; }
.mx-help { padding: 4px 8px 2px; border-top: 1px solid var(--mx-bd); margin-top: 4px; color: var(--mx-mu); font-size: 11px; }