/* 瞬译管理后台（admin.html）。独立一套样式：密一点、像正式的运营后台；浅色和深色都做了（跟官网右上角的主题开关走，没选就跟系统） */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --hover: #f1f5f7;
  --line: #e6ebef;
  --line-2: #d5dde3;
  --ink: #0d1319;
  --text: #26313c;
  --text-2: #55626e;
  --text-3: #85919c;
  --brand: #1fd1b2;
  --brand-ink: #08846f;
  --brand-soft: #e3f8f3;
  --good: #0f8a5f;
  --good-soft: #e3f5ec;
  --warn: #b26200;
  --warn-soft: #fff2dc;
  --bad: #cf3540;
  --bad-soft: #fdecee;
  --info-soft: #eaf2fd;
  --info: #1f63b8;
  /* 图表颜色：按「玩家 / 注册 / 收入」固定分配，三色在浅色和深色下都跑过色盲检查 */
  --c1: #2a78d6;
  --c2: #eb6834;
  --c3: #1baf7a;
  --grid: #edf1f4;
  --axis: #8a96a1;
  --side: #0f1720;
  --side-2: #17222d;
  --side-text: #c6d0d9;
  --side-text-2: #7f8d99;
  --shadow: 0 1px 2px rgba(16, 24, 32, .04), 0 1px 1px rgba(16, 24, 32, .03);
  --shadow-lg: 0 12px 40px rgba(16, 24, 32, .16);
  --f-sans: -apple-system, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif;
  --f-num: "Space Grotesk", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
  --f-mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1016; --surface: #121a22; --surface-2: #0f161d; --hover: #18222c; --line: #1f2a35; --line-2: #2b3843;
    --ink: #eef3f6; --text: #d3dbe2; --text-2: #9ba8b3; --text-3: #6f7d89;
    --brand: #2ee6c5; --brand-ink: #43e3c6; --brand-soft: #10302b;
    --good: #3fcf8e; --good-soft: #0f2c21; --warn: #f0a640; --warn-soft: #33240c; --bad: #ff6b74; --bad-soft: #351619;
    --info-soft: #11243a; --info: #6aa8f2;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --grid: #1b252f; --axis: #6c7a86;
    --side: #080c11; --side-2: #121a22; --side-text: #c6d0d9; --side-text-2: #6f7d89;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1016; --surface: #121a22; --surface-2: #0f161d; --hover: #18222c; --line: #1f2a35; --line-2: #2b3843;
  --ink: #eef3f6; --text: #d3dbe2; --text-2: #9ba8b3; --text-3: #6f7d89;
  --brand: #2ee6c5; --brand-ink: #43e3c6; --brand-soft: #10302b;
  --good: #3fcf8e; --good-soft: #0f2c21; --warn: #f0a640; --warn-soft: #33240c; --bad: #ff6b74; --bad-soft: #351619;
  --info-soft: #11243a; --info: #6aa8f2;
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --grid: #1b252f; --axis: #6c7a86;
  --side: #080c11; --side-2: #121a22; --side-text: #c6d0d9; --side-text-2: #6f7d89;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 400 14px/1.55 var(--f-sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: 12.5px; }
.muted { color: var(--text-3); }
.sm { font-size: 12.5px; }

/* ---------------------------------------------------------------- 骨架：左边侧栏 + 右边内容 */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--side); color: var(--side-text); padding: 18px 12px; gap: 18px; overflow-y: auto; }
.side__brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 6px; color: #fff; font-weight: 700; font-size: 15px; }
.side__brand img { width: 28px; height: 28px; }
.side__brand span { font: 600 11px var(--f-num); letter-spacing: .08em; color: var(--side-text-2); text-transform: uppercase; margin-left: auto; padding: 2px 6px; border: 1px solid #ffffff22; border-radius: 6px; }
.side__group { display: grid; gap: 2px; }
.side__label { padding: 0 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--side-text-2); }
.side__link { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--side-text); font-weight: 600; text-decoration: none !important; }
.side__link svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.side__link:hover { background: var(--side-2); color: #fff; }
.side__link[aria-current="page"] { background: #1fd1b21f; color: #fff; box-shadow: inset 2px 0 0 var(--brand); }
.side__link[aria-current="page"] svg { opacity: 1; color: var(--brand); }
.side__link .count { margin-left: auto; font: 600 11.5px var(--f-num); padding: 1px 7px; border-radius: 999px; background: #ffffff14; color: var(--side-text); }
.side__link .count--live { background: #1fd1b233; color: #7ff3dc; }
.side__foot { margin-top: auto; display: grid; gap: 10px; padding: 12px 10px 0; border-top: 1px solid #ffffff12; font-size: 12.5px; color: var(--side-text-2); }
.side__foot b { color: var(--side-text); font-weight: 600; overflow-wrap: anywhere; }
.side__row { display: flex; align-items: center; gap: 8px; }
.side__btn { height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid #ffffff1f; background: transparent; color: var(--side-text); font-size: 12.5px; font-weight: 600; }
.side__btn:hover { background: var(--side-2); }
.mtop { display: none; }

.main { min-width: 0; padding: 22px max(28px, env(safe-area-inset-right, 0px)) 60px 28px; display: grid; gap: 18px; align-content: start; }
.page { display: grid; gap: 18px; min-width: 0; }
.head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 40px; }
.head h1 { font-size: 21px; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.head__sub { color: var(--text-3); font-size: 13px; }
.head__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 小部件 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none !important; }
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .55; cursor: default; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: #052520; }
.btn--primary:hover { background: #19c2a5; }
.btn--danger { color: var(--bad); }
.btn--danger:hover { background: var(--bad-soft); }
.btn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn svg { width: 15px; height: 15px; }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line-2); }
.seg button { height: 28px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.chip b { font: 600 11.5px var(--f-num); color: var(--text-3); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip[aria-pressed="true"] b { color: inherit; opacity: .7; }
.field { height: 34px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); min-width: 0; }
.field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.search { position: relative; flex: 1 1 260px; max-width: 380px; }
.search svg { position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; color: var(--text-3); }
.search .field { width: 100%; padding-left: 32px; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .grow { margin-left: auto; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--hover); color: var(--text-2); }
.pill--good { background: var(--good-soft); color: var(--good); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--bad { background: var(--bad-soft); color: var(--bad); }
.pill--info { background: var(--info-soft); color: var(--info); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot--live { color: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.flash { position: fixed; z-index: 60; right: 20px; bottom: 20px; max-width: min(420px, calc(100vw - 40px)); padding: 12px 16px; border-radius: 10px; background: var(--ink); color: var(--surface); font-weight: 600; box-shadow: var(--shadow-lg); }
.flash--bad { background: var(--bad); color: #fff; }

/* ---------------------------------------------------------------- 卡片、指标 */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); min-width: 0; }
.card__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; flex-wrap: wrap; }
.card__head h2 { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.card__head .sub { color: var(--text-3); font-size: 12.5px; }
.card__head .tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card__body { padding: 14px 16px 16px; min-width: 0; }
.card__body--flush { padding: 10px 0 0; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--text-3); font-size: 12px; font-weight: 600; }
.linkbtn:hover { color: var(--brand-ink); }
.grid { display: grid; gap: 16px; min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--main { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { position: relative; padding: 14px 16px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); min-width: 0; overflow: hidden; }
.kpi__label { font-size: 12.5px; color: var(--text-2); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi__value { margin-top: 6px; font: 600 25px/1.15 var(--f-num); color: var(--ink); letter-spacing: -.01em; overflow-wrap: anywhere; }
.kpi__value small { font-size: 14px; color: var(--text-3); font-weight: 500; margin-left: 2px; }
.kpi__foot { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); min-height: 18px; flex-wrap: wrap; }
.kpi__spark { position: absolute; right: 12px; top: 14px; width: 72px; height: 26px; opacity: .9; }
.kpi--alert { border-color: var(--bad); }
.kpi--alert .kpi__value { color: var(--bad); }
.delta { font: 600 12px var(--f-num); padding: 1px 6px; border-radius: 5px; }
.delta--up { color: var(--good); background: var(--good-soft); }
.delta--down { color: var(--bad); background: var(--bad-soft); }
.delta--flat { color: var(--text-3); background: var(--hover); }

.alerts { display: grid; gap: 8px; }
.alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid; font-size: 13.5px; font-weight: 600; }
.alert svg { width: 17px; height: 17px; flex: none; }
.alert--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); }
.alert--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); }
.alert a { color: inherit; text-decoration: underline; margin-left: auto; white-space: nowrap; }

.stats { display: grid; gap: 0; }
.stats div { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.stats div:last-child { border-bottom: 0; }
.stats dt { color: var(--text-2); font-size: 13px; }
.stats dd { margin: 0 0 0 auto; font: 600 14px var(--f-num); color: var(--ink); text-align: right; }
.stats dd small { color: var(--text-3); font-weight: 500; font-size: 12px; margin-left: 4px; }

/* ---------------------------------------------------------------- 图表 */
.chart { position: relative; width: 100%; min-height: 220px; }
.chart svg { display: block; overflow: visible; }
.chart text { font: 500 11px var(--f-num); fill: var(--axis); }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .base { stroke: var(--line-2); stroke-width: 1; }
.chart .hit { fill: transparent; }
.chart .cross { stroke: var(--line-2); stroke-width: 1; }
.chart--short { min-height: 180px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend i.line { height: 3px; border-radius: 2px; width: 14px; }
.tip { position: absolute; z-index: 5; pointer-events: none; min-width: 140px; padding: 8px 10px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 12.5px; box-shadow: var(--shadow-lg); transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; }
.tip b { display: block; margin-bottom: 3px; font-weight: 700; }
.tip div { display: flex; align-items: center; gap: 6px; }
.tip div span { margin-left: auto; padding-left: 14px; font-family: var(--f-num); font-weight: 600; }
.tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.chart-empty { display: grid; place-items: center; min-height: 180px; color: var(--text-3); font-size: 13px; }

.hbars { display: grid; gap: 9px; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; font-size: 13px; }
.hbar__k { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar__v { font: 600 12.5px var(--f-num); color: var(--ink); text-align: right; }
.hbar__v small { color: var(--text-3); font-weight: 500; margin-left: 4px; }
.hbar__track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; }
.hbar__fill { height: 100%; border-radius: 3px; background: var(--c1); min-width: 2px; }

/* ---------------------------------------------------------------- 表格 */
.table-wrap { overflow-x: auto; min-width: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.table th { position: sticky; top: 0; z-index: 1; color: var(--text-3); font-weight: 600; font-size: 12px; background: var(--surface-2); }
.table th:first-child, .table td:first-child { padding-left: 16px; }
.table th:last-child, .table td:last-child { padding-right: 16px; }
.table td.r, .table th.r { text-align: right; }
.table td.r { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.click { cursor: pointer; }
.table tbody tr.click:hover td { background: var(--hover); }
.table .empty td { text-align: center; color: var(--text-3); padding: 28px 12px; }
.table th button { border: 0; background: none; padding: 0; color: inherit; font: inherit; display: inline-flex; align-items: center; gap: 4px; }
.table th button:hover { color: var(--ink); }
.table th button[data-dir]::after { content: "▾"; font-size: 10px; }
.table th button[data-dir="asc"]::after { content: "▴"; }
.table .wrap { white-space: normal; min-width: 220px; max-width: 420px; overflow-wrap: anywhere; }
.table .who { display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; }
.table .who small { color: var(--text-3); font-weight: 500; }
.plus { color: var(--good); }
.minus { color: var(--bad); }
.pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12.5px; }
.pager .btn { height: 28px; }

.progress { display: inline-block; vertical-align: middle; width: 80px; height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; margin-right: 8px; }
.progress i { display: block; height: 100%; background: var(--c3); }

/* ---------------------------------------------------------------- 用户详情抽屉 */
.drawer-bg { position: fixed; inset: 0; z-index: 40; background: rgba(8, 12, 17, .42); }
.drawer { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); background: var(--bg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.drawer__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-size: 18px; color: var(--ink); overflow-wrap: anywhere; }
.drawer__head .meta { margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--text-3); font-size: 12.5px; }
.drawer__x { margin-left: auto; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); font-size: 20px; line-height: 1; color: var(--text-2); flex: none; }
.drawer__body { flex: 1; overflow-y: auto; padding: 16px 20px 40px; display: grid; gap: 14px; align-content: start; }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini > div { padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.mini p { font-size: 12px; color: var(--text-3); font-weight: 600; }
.mini b { display: block; margin-top: 2px; font: 600 17px var(--f-num); color: var(--ink); overflow-wrap: anywhere; }
.mini span { font-size: 11.5px; color: var(--text-3); }
.adjust { display: grid; grid-template-columns: 96px 100px 120px minmax(0, 1fr) auto; gap: 8px; }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs button { height: 38px; padding: 0 12px; border: 0; background: none; color: var(--text-2); font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.tabs button b { font: 600 11px var(--f-num); color: var(--text-3); margin-left: 4px; }

.codes-out { display: grid; gap: 10px; }
.codes-out pre { margin: 0; max-height: 260px; overflow: auto; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font: 500 13px/1.8 var(--f-mono); color: var(--ink); }
.form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.form-row label { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); font-weight: 600; }

/* ---------------------------------------------------------------- 登录 / 没权限 */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.gate__card { width: min(420px, 100%); padding: 28px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 14px; justify-items: start; }
.gate__card img { width: 40px; height: 40px; }
.gate__card h1 { font-size: 21px; color: var(--ink); }
.gate__card p { color: var(--text-2); }
.skeleton { color: var(--text-3); padding: 40px 0; text-align: center; }

/* ---------------------------------------------------------------- 窄屏 */
@media (max-width: 1180px) {
  .kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: 248px; transform: translateX(-100%); transition: transform .18s ease; }
  .app[data-menu="open"] .side { transform: none; box-shadow: var(--shadow-lg); }
  .mtop { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; height: 52px; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); background: var(--side); color: #fff; font-weight: 700; }
  .mtop button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #ffffff26; background: transparent; color: #fff; display: grid; place-items: center; }
  .mtop img { width: 24px; height: 24px; }
  .main { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .adjust { grid-template-columns: 1fr 1fr; }
  .adjust input[name=note], .adjust button { grid-column: 1 / -1; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi__spark { display: none; }
  .kpi__value { font-size: 21px; }
  .head__tools { margin-left: 0; }
}