/* MK TUNING PERFORMANCE admin panel. Same look as the desktop app: deep navy, blue controls,
   gold headings, cyan accents. One dark theme, like the app. */
:root {
  color-scheme: dark;
  --bg: #01050a;
  --panel: #050b14;
  --panel2: #071222;
  --panel3: #0a1424;
  --line: #12345b;
  --line2: #243754;
  --accent: #0b67b2;
  --accent-bg: #082b52;
  --accent-bg2: #0b3f73;
  --text: #ffffff;
  --text2: #dbeafe;
  --muted: #8fa7c2;
  --gold: #d7b56b;
  --cyan: #00c2d7;
  --green: #22c55e;
  --yellow: #ffc533;
  --red: #ef4444;
  --red-soft: #fca5a5;
  --radius: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--cyan); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---- buttons and fields ---- */
.btn {
  font: inherit; font-weight: 700; letter-spacing: .03em;
  border: 1px solid var(--line2); background: var(--panel3); color: var(--text2);
  padding: 9px 16px; border-radius: 8px; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-bg); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btnPrimary {
  background: linear-gradient(90deg, var(--accent-bg), var(--accent-bg2));
  border-color: var(--accent); color: #fff;
  box-shadow: inset 0 0 0 1px #0b67b255, 0 0 14px #0b67b233;
}
.btnPrimary:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--accent), 0 0 18px #0b67b266; }
.btnQuiet { background: transparent; border-color: transparent; color: var(--muted); padding: 7px 10px; }
.iconBtn {
  font: inherit; font-size: 18px; line-height: 1; color: var(--text2); background: transparent;
  border: 1px solid var(--line2); border-radius: 8px; padding: 6px 10px; cursor: pointer;
}

.field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.field input, .field select, .search {
  font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none;
  width: 100%; padding: 10px 12px; color: var(--text);
  background: #02060b; border: 1px solid var(--line2); border-radius: 8px;
}
.field input:focus, .field select:focus, .search:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px #0b67b255; }

.notice { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text2); }
.noticeError { border-color: #7f1d1d; background: #2a0b0b; color: var(--red-soft); }
.noticeOk { border-color: #14532d; background: #08210f; color: #86efac; }

/* ---- sign in ---- */
.loginView {
  min-height: 100%; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(circle at 50% 0, #0b2038 0, #06101d 38%, #01050a 82%);
}
.loginCard {
  width: 100%; max-width: 420px; padding: 28px 28px 30px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px #000a, inset 0 0 0 1px #ffffff08;
  display: grid; gap: 14px;
}
.loginLogo { width: 86%; max-width: 330px; height: auto; justify-self: center; filter: drop-shadow(0 12px 30px #0475db22); }
.loginTitle { text-align: center; font-size: 15px; letter-spacing: .32em; color: var(--gold); font-weight: 800; }
.loginHint { text-align: center; color: var(--muted); font-size: 12px; }
.loginForm { display: grid; gap: 14px; margin-top: 4px; }
.loginForm .btn { padding: 12px; }

/* ---- shell ---- */
.panel {
  min-height: 100%; display: flex; flex-direction: column;
  background: radial-gradient(circle at 50% 0, #0b2038 0, #06101d 38%, #01050a 82%) fixed;
}
.topbar {
  height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 16px;
  border-bottom: 1px solid var(--line2); position: sticky; top: 0; z-index: 20;
  background: #02070dcc; backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; min-width: 0; }
.brandName { overflow: hidden; text-overflow: ellipsis; }
.brandName { font-weight: 900; font-size: 14px; letter-spacing: .04em; }
.brandTag {
  font-size: 10px; font-weight: 800; letter-spacing: .24em; color: var(--gold);
  border: 1px solid #5b4a22; border-radius: 5px; padding: 2px 6px;
}
.topRight { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.whoami { color: var(--muted); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menuToggle { display: none; }

/* the quiet gold and cyan line under the top bar, as in the app */
.motionRail { position: relative; height: 18px; pointer-events: none; overflow: hidden; border-bottom: 1px solid #1e3049; }
.motionTrack { position: absolute; left: 24px; right: 24px; top: 50%; height: 10px; transform: translateY(-50%); opacity: .72; }
.motionTrack::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, #ffffff0d, transparent); }
.motionHalf { position: absolute; top: 50%; height: 2px; border-radius: 999px; transform: translateY(-50%); animation: railTravel 4.6s ease-in-out infinite; }
.motionLeft { left: 0; background: linear-gradient(90deg, #fff4d2f5, #efcf7d 12%, #d7b56b 38%, #a56f28 72%, #ffde9c2e 100%); box-shadow: 0 0 6px #d9b56a2a; }
.motionRight { right: 0; background: linear-gradient(270deg, #bef5fff5, #5ee8ff 16%, #19c8f3 42%, #0b5cab 78%, #1875c429 100%); box-shadow: 0 0 6px #18b1ff2a; }
@keyframes railTravel { 0%, 100% { width: 0; opacity: .18; } 18% { width: 32%; opacity: .38; } 50% { width: 50%; opacity: .82; } 82% { width: 32%; opacity: .38; } }
@media (prefers-reduced-motion: reduce) { .motionHalf { animation: none; width: 50%; opacity: .42; } }

.layout { flex: 1; display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 0; }
.sidebar {
  padding: 14px 10px; border-right: 1px solid var(--line2); background: #02070d99;
  display: flex; flex-direction: column; gap: 4px; align-self: stretch;
}
.navGroup { margin: 14px 10px 4px; font-size: 10px; letter-spacing: .22em; color: var(--muted); font-weight: 800; }
.navGroup:first-child { margin-top: 2px; }
.navItem {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font: inherit; font-weight: 700; color: var(--text2); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 9px 10px; cursor: pointer; text-decoration: none;
}
.navItem:hover { background: var(--panel3); }
.navItem.isSelected { background: var(--accent-bg); border-color: var(--accent); color: #fff; box-shadow: inset 0 0 0 1px #0b67b2, 0 0 10px #0b67b244; }
.navIcon { width: 18px; text-align: center; color: var(--cyan); }
.navBadge { margin-left: auto; font-size: 11px; font-weight: 800; background: var(--red); color: #fff; border-radius: 999px; padding: 1px 7px; }

.content { padding: 22px clamp(16px, 3vw, 34px) 40px; min-width: 0; outline: none; }
.pageHead { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.pageTitle { font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.pageSub { color: var(--muted); margin-top: 2px; }
.pageActions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sectionTitle { font-size: 11px; letter-spacing: .22em; color: var(--gold); font-weight: 800; margin: 26px 0 10px; }

.statusbar { padding: 8px 16px; border-top: 1px solid var(--line2); color: var(--muted); font-size: 12px; background: #02070d99; }

/* ---- dashboard tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tile {
  background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px 15px; display: grid; gap: 8px; align-content: start;
}
.tileLabel { font-size: 11px; letter-spacing: .18em; color: var(--muted); font-weight: 800; }
.tileValue { font-size: 30px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tileValue.warn { color: var(--yellow); }
.tileValue.bad { color: var(--red-soft); }
.tileValue.good { color: #6ee7b7; }
.tileRows { display: grid; gap: 3px; color: var(--muted); }
.tileRows div { display: flex; justify-content: space-between; gap: 12px; }
.tileRows b { color: var(--text2); font-variant-numeric: tabular-nums; }

/* ---- tables ---- */
.tableWrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th {
  text-align: left; padding: 10px 12px; font-size: 11px; letter-spacing: .14em; color: var(--muted);
  background: var(--panel2); border-bottom: 1px solid var(--line); font-weight: 800; white-space: nowrap;
}
td { padding: 10px 12px; border-bottom: 1px solid #0f2238; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover td { background: #08172b; }
.mono { font-family: Consolas, monospace; font-size: 12px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.tag {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--text2); background: var(--panel3); white-space: nowrap;
}
.tagAuth { border-color: #0b67b2; color: #93c5fd; }
.tagMoney { border-color: #5b4a22; color: var(--gold); }
.tagDanger { border-color: #7f1d1d; color: var(--red-soft); }
.tagOk { border-color: #14532d; color: #86efac; }
.detailsRow td { background: #030a13; }
.detailsBox { margin: 0; padding: 10px 12px; background: #02060b; border: 1px solid var(--line2); border-radius: 8px; color: var(--text2); white-space: pre-wrap; word-break: break-word; font: 12px/1.5 Consolas, monospace; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.toolbar .field { min-width: 170px; }
.toolbar .grow { flex: 1 1 240px; }
.emptyState { padding: 36px 16px; text-align: center; color: var(--muted); }
.moreRow { display: flex; justify-content: center; padding: 14px; }
.noscript { padding: 24px; color: var(--red-soft); }

/* ---- narrow screens ---- */
@media (max-width: 860px) {
  .menuToggle { display: inline-block; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 30; top: 50px; bottom: 0; left: 0; width: 250px; max-width: 86vw;
    background: #030a13f2; transform: translateX(-102%); transition: transform .18s ease; box-shadow: 8px 0 30px #000a;
  }
  .sidebar.isOpen { transform: none; }
  .whoami { display: none; }
}
@media (max-width: 520px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .brandTag { display: none; }
  .brandName { font-size: 12px; }
  .topRight .btn { padding: 6px 8px; }
}

/* ---- tabs, tags, forms (screens) ---- */
.tabBar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabBtn {
  font: inherit; font-weight: 700; color: var(--text2); background: var(--panel3);
  border: 1px solid var(--line2); border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.tabBtn:hover { border-color: var(--accent); }
.tabBtn.isSelected { background: var(--accent-bg); border-color: var(--accent); color: #fff; box-shadow: inset 0 0 0 1px #0b67b2; }
.tagWarn { border-color: #6b5314; color: var(--yellow); }
.tagCyan { border-color: #0e5560; color: #67e8f9; }
.btnDanger { background: #3a0d0d; border-color: #7f1d1d; color: var(--red-soft); }
.btnDanger:hover:not(:disabled) { background: #5b1111; border-color: var(--red); color: #fff; }
.btnSmall { padding: 6px 11px; font-size: 12px; }
.textarea {
  font: inherit; font-size: 14px; width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px; color: var(--text);
  background: #02060b; border: 1px solid var(--line2); border-radius: 8px;
}
.textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px #0b67b255; }
.cellStack { display: grid; gap: 2px; min-width: 0; }
.cellStack small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.tagRow { display: flex; flex-wrap: wrap; gap: 4px; }
.navLabelRow { display: flex; align-items: center; gap: 10px; width: 100%; }

/* ---- tiles that link ---- */
.tileLink { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); }
.tileLink:hover .tile { border-color: var(--accent); box-shadow: 0 0 14px #0b67b244; }

/* ---- key / value lists ---- */
.kv { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: 6px 14px; margin: 0 0 14px; }
.kv dt { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.bigNumber { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.blockTitle { font-size: 11px; letter-spacing: .2em; color: var(--gold); font-weight: 800; margin: 18px 0 8px; }
.noteBox {
  white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 12px; background: #02060b;
  border: 1px solid var(--line2); border-radius: 8px; color: var(--text2); margin-bottom: 14px;
}

/* ---- windows ---- */
dialog.modal {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; color: var(--text);
  background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 70px #000c; overflow: hidden;
}
dialog.modalWide { width: min(860px, calc(100vw - 24px)); }
dialog.modal::backdrop { background: #000a; backdrop-filter: blur(2px); }
dialog.modal[open] { display: flex; flex-direction: column; }
.modalHead { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line2); }
.modalTitle { font-size: 15px; font-weight: 800; letter-spacing: .02em; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.modalBody { padding: 18px; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.modalActions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.actionRow { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.formBox { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line2); border-radius: 10px; background: #040c17; }
.fileInput { color: var(--muted); font: inherit; max-width: 100%; }
.hint { color: var(--muted); font-size: 12px; }

/* ---- messages ---- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 100; max-width: min(520px, calc(100vw - 24px));
  padding: 11px 16px; border-radius: 10px; border: 1px solid var(--line); background: #08172b; color: #fff; box-shadow: 0 10px 30px #000a;
}
.toastOk { border-color: #14532d; background: #08210f; color: #bbf7d0; }
.toastError { border-color: #7f1d1d; background: #2a0b0b; color: var(--red-soft); }
.thread { display: grid; gap: 10px; }
.bubble { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel3); max-width: 92%; }
.bubbleAdmin { justify-self: end; background: #082b52; border-color: var(--accent); }
.bubbleHead { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.bubbleText { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubbleFile { margin-top: 8px; }

@media (max-width: 520px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dd { margin-bottom: 8px; }
  .modalBody { padding: 14px; }
}
.hintError { color: var(--red-soft); }
.formBox .blockTitle { margin: 0; }
.fileInput::file-selector-button {
  font: inherit; font-weight: 700; color: var(--text2); background: var(--panel3);
  border: 1px solid var(--line2); border-radius: 8px; padding: 6px 12px; margin-right: 10px; cursor: pointer;
}
.fileInput::file-selector-button:hover { border-color: var(--accent); background: var(--accent-bg); color: #fff; }

/* Windows: the content stacks and scrolls as a whole; nothing inside is squeezed to fit the window
   (a table that scrolls sideways used to collapse to a thin line). */
.modalBody { display: flex; flex-direction: column; gap: 12px; }
.modalBody > * { flex-shrink: 0; }
.modal table { min-width: 520px; }
.modal .tableWrap { max-width: 100%; }
.modal .emptyState { padding: 20px 14px; }

/* ---- page controls under a list ---- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 2px 0; }
.pagerButtons { margin-left: auto; display: flex; gap: 8px; }
.paged.isLoading { opacity: .55; pointer-events: none; }

/* ---- two-factor ---- */
.loginStep2 { display: grid; gap: 14px; }
.setupBlock { display: grid; gap: 14px; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 14px; color: var(--text2); }
.steps li::marker { color: var(--gold); font-weight: 800; }
.qrBox { margin: 10px 0; padding: 10px; background: #fff; border-radius: 10px; width: fit-content; max-width: 100%; }
.qrCanvas { display: block; width: 200px; height: 200px; max-width: 100%; image-rendering: pixelated; }
.secretKey { margin: 4px 0 8px; padding: 8px 10px; background: #02060b; border: 1px solid var(--line2); border-radius: 8px; letter-spacing: .08em; overflow-wrap: anywhere; user-select: all; }
.codeInput {
  font: 700 26px/1.2 Consolas, monospace; letter-spacing: .3em; text-align: center; width: 100%; padding: 12px 10px;
  color: var(--text); background: #02060b; border: 1px solid var(--line2); border-radius: 10px;
}
.codeInput:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px #0b67b255; }
.stepLinks { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; }
.linkBtn { font: inherit; font-size: 12px; color: var(--cyan); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; }
.recoveryGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding: 12px; background: #02060b; border: 1px solid var(--line2); border-radius: 10px; font-size: 14px; user-select: all; }
.checkRow { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.checkRow input { width: 18px; height: 18px; }
@media (max-width: 380px) { .recoveryGrid { grid-template-columns: 1fr; } }

/* ---- prices ---- */
.priceCell { display: flex; align-items: center; gap: 8px; }
.priceInput { max-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.priceInput.isChanged { border-color: var(--gold); box-shadow: 0 0 0 2px #d7b56b33; }
.saveBar {
  position: sticky; bottom: 12px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding: 12px 16px; background: #08172b; border: 1px solid var(--gold); border-radius: 10px; box-shadow: 0 10px 30px #000a;
}

/* ---- settings ---- */
.settingsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 8px; }
.settingCard p { margin: 0; color: var(--text2); }
.settingRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.settingInput { max-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- partners and earnings ---- */
.allocBar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line2); background: #02060b; margin: 6px 0; }
.allocPartner { background: linear-gradient(90deg, var(--accent-bg2), var(--accent)); border-right: 1px solid #01050a; }
.allocCompany { background: linear-gradient(90deg, #5b4a22, var(--gold)); }
.barChart { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding: 6px 4px 0; border-bottom: 1px solid var(--line2); overflow-x: auto; }
.barSlot { flex: 1 1 0; min-width: 6px; height: 100%; display: flex; align-items: flex-end; }
.bar { display: block; width: 100%; background: linear-gradient(180deg, var(--cyan), var(--accent)); border-radius: 3px 3px 0 0; }
.hintWarn { color: var(--yellow); }
.settingsGrid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.settingCard, .formBox { min-width: 0; }
.kv .tag { white-space: normal; }

/* ---- Stripe alerts ---- */
.alertPanel { border: 1px solid #7f1d1d; border-radius: 12px; background: linear-gradient(180deg, #1a0b10, #0d0810); padding: 14px 16px; margin: 0 0 16px; display: grid; gap: 12px; }
.alertCard { border: 1px solid var(--line2); border-radius: 10px; padding: 12px; background: #050b14; display: grid; gap: 8px; }
.alertTitle { font-weight: 700; }
.alertBanner { display: block; margin: 0 0 14px; padding: 10px 14px; border: 1px solid #7f1d1d; border-radius: 10px; background: #1a0b10; color: var(--text); text-decoration: none; }
.alertBanner b { color: #fca5a5; }

/* ---- which mode this server runs in ---- */
.envTag { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .12em; border: 1px solid var(--line2); }
.envTag[data-env="testing"] { color: #1a1204; background: var(--gold); border-color: var(--gold); }
.envTag[data-env="development"] { color: var(--text); background: #1e293b; }

/* ---- tuning service connection and the decision for an unconfirmed job ---- */
.noticeWarn { border-color: #6b5314; background: #231b07; color: var(--gold); }
.noticeWarn p { color: var(--text2); }
.connectionCard { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel2); }