:root {
      --bg: #f6f8fb;
      --panel: #ffffff;
      --ink: #202633;
      --muted: #667084;
      --line: #dfe5ee;
      --blue: #3177b7;
      --cyan: #1d9aa3;
      --green: #2f8b62;
      --amber: #b7791f;
      --red: #c44b57;
      --violet: #6957b8;
      --soft-blue: #e9f2fb;
      --soft-cyan: #e4f5f6;
      --soft-green: #eaf6ef;
      --soft-amber: #fff4da;
      --soft-red: #fdecee;
      --radius: 8px;
      --shadow: 0 18px 45px rgba(31, 45, 61, 0.10);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
      letter-spacing: 0;
    }

    button, input, select {
      font: inherit;
    }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
    }

    aside {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 18px;
      background: #202633;
      color: #f8fbff;
      overflow: auto;
    }

    .brand {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-bottom: 18px;
    }

    .mark {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: #f7d56b;
      color: #202633;
      font-weight: 900;
    }

    .brand h1 {
      margin: 0;
      font-size: 15px;
      line-height: 1.25;
    }

    .brand span {
      display: block;
      margin-top: 3px;
      color: #aeb8c7;
      font-size: 12px;
      font-weight: 500;
    }

    .nav {
      display: grid;
      gap: 6px;
      margin: 18px 0 22px;
    }

    .nav a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 11px;
      color: #dbe5f2;
      text-decoration: none;
      border-radius: 8px;
      font-size: 13px;
    }

    .nav a.active,
    .nav a:hover {
      background: rgba(255,255,255,.10);
      color: #fff;
    }

    .side-card {
      padding: 13px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 8px;
      background: rgba(255,255,255,.06);
      margin-bottom: 12px;
    }

    .side-card label {
      display: block;
      color: #aeb8c7;
      font-size: 12px;
      margin-bottom: 7px;
    }

    .side-card input,
    .side-card select {
      width: 100%;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.18);
      color: #fff;
      border-radius: 8px;
      padding: 9px 10px;
      outline: 0;
    }

    .side-card input[type="range"] {
      padding: 0;
      accent-color: #f7d56b;
    }

    .inline-inputs {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
    }

    .inline-inputs span {
      color: #aeb8c7;
      font-size: 12px;
      white-space: nowrap;
    }

    .hint {
      color: #aeb8c7;
      font-size: 12px;
      line-height: 1.45;
    }

    main {
      padding: 20px;
      overflow: hidden;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }

    .title h2 {
      margin: 0 0 5px;
      font-size: 22px;
      line-height: 1.2;
    }

    .title p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }

    .actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      color: var(--ink);
      background: #fff;
      padding: 9px 12px;
      border-radius: 8px;
      cursor: pointer;
      font: inherit;
      text-decoration: none;
    }

    .btn.primary {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    body.auth-locked .app {
      filter: blur(2px);
      pointer-events: none;
      user-select: none;
    }

    .auth-gate {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(246, 248, 251, .86);
      backdrop-filter: blur(10px);
    }

    .auth-gate[hidden] {
      display: none;
    }

    .auth-card {
      width: min(420px, 100%);
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .auth-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .auth-title h2 {
      margin: 0 0 4px;
      font-size: 20px;
      line-height: 1.2;
    }

    .auth-title p,
    .auth-message {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .auth-card label {
      display: block;
      margin: 12px 0 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .auth-card input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 12px;
      outline: 0;
    }

    .auth-card input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px var(--soft-blue);
    }

    .auth-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 16px 0 10px;
    }

    .auth-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 8px;
      min-height: 28px;
    }

    .auth-link {
      border: 0;
      border-radius: 999px;
      padding: 5px 9px;
      color: var(--blue);
      background: transparent;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
    }

    .auth-link:hover {
      background: var(--soft-blue);
    }

    .auth-link:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 3px var(--soft-blue);
    }

    .auth-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 4px 4px 10px;
      border-radius: 999px;
      color: var(--green);
      background: var(--soft-green);
      font-size: 12px;
      font-weight: 800;
    }

    .auth-badge button {
      border: 0;
      border-radius: 999px;
      padding: 4px 8px;
      color: var(--green);
      background: #fff;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
    }

    .grid {
      display: grid;
      gap: 14px;
    }

    .grid.cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .grid.cols-3 {
      grid-template-columns: 1.35fr 1fr 1fr;
    }

    .grid.cols-2 {
      grid-template-columns: 1.35fr .9fr;
    }

    .grid.cols-1 {
      grid-template-columns: 1fr;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      min-width: 0;
      resize: vertical;
      overflow: auto;
      min-height: 96px;
    }

    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px 11px;
      border-bottom: 1px solid var(--line);
    }

    .panel-head h3 {
      margin: 0;
      font-size: 15px;
    }

    .panel-body {
      padding: 14px 16px 16px;
    }

    .kpi {
      padding: 14px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      min-height: 106px;
    }

    .kpi .label {
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 9px;
    }

    .kpi .value {
      font-size: 25px;
      line-height: 1.1;
      font-weight: 800;
      white-space: nowrap;
    }

    .kpi .value.long {
      white-space: normal;
      font-size: 18px;
      line-height: 1.22;
    }

    .kpi .sub {
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .pill.blue { color: var(--blue); background: var(--soft-blue); }
    .pill.cyan { color: var(--cyan); background: var(--soft-cyan); }
    .pill.green { color: var(--green); background: var(--soft-green); }
    .pill.amber { color: var(--amber); background: var(--soft-amber); }
    .pill.red { color: var(--red); background: var(--soft-red); }
    .pill.violet { color: var(--violet); background: #efedfb; }
    .pill.gray { color: var(--muted); background: #eef2f7; }

    .target {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      margin-bottom: 12px;
    }

    .target h4 {
      margin: 0 0 6px;
      font-size: 16px;
    }

    .target p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .target strong {
      display: block;
      margin-bottom: 5px;
      font-size: 20px;
      text-align: right;
    }

    .progress {
      height: 9px;
      border-radius: 999px;
      background: #edf1f6;
      overflow: hidden;
      margin: 12px 0 8px;
    }

    .progress span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--cyan);
    }

    .split {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .split b {
      display: block;
      color: var(--ink);
      font-size: 14px;
      margin-top: 3px;
    }

    table {
      width: 100%;
      min-width: 1120px;
      border-collapse: collapse;
      font-size: 12px;
    }

    th, td {
      padding: 9px 8px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
    }

    th {
      position: sticky;
      top: 0;
      z-index: 2;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      background: #f8fafc;
    }

    th span {
      color: #98a2b3;
      font-weight: 600;
    }

    tr:last-child td {
      border-bottom: 0;
    }

    .num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .heat {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      gap: 3px;
    }

    .hour {
      height: 28px;
      border-radius: 5px;
      background: #e8edf4;
      position: relative;
    }

    .hour[data-level="1"] { background: #d8eef0; }
    .hour[data-level="2"] { background: #91cfd2; }
    .hour[data-level="3"] { background: #2f9aa2; }
    .hour[data-level="4"] { background: #c44b57; }

    .hour small {
      position: absolute;
      inset: auto 0 -18px;
      color: var(--muted);
      font-size: 10px;
      text-align: center;
    }

    .flow-board {
      display: grid;
      gap: 10px;
      height: 620px;
      max-height: none;
      min-height: 220px;
      overflow: auto;
      resize: vertical;
      padding-right: 4px;
    }

    .flow-row {
      display: grid;
      grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) 220px;
      gap: 12px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfe;
    }

    .flow-player b,
    .flow-summary b {
      display: block;
      font-size: 13px;
      margin-bottom: 3px;
    }

    .flow-player span,
    .flow-summary span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .flow-heat {
      display: grid;
      grid-template-columns: repeat(24, minmax(14px, 1fr));
      gap: 2px;
      min-width: 340px;
    }

    .flow-cell {
      height: 24px;
      border-radius: 4px;
      background: #e8edf4;
      color: transparent;
      position: relative;
    }

    .flow-cell[data-flow="stock"] { background: #6957b8; }
    .flow-cell[data-flow="normal"] { background: #1d9aa3; }
    .flow-cell[data-flow="sprint"] { background: #c44b57; }
    .flow-cell[data-flow="hidden"] { background: #b7791f; }

    .flow-cell:hover::after {
      content: attr(title);
      position: absolute;
      z-index: 4;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
      width: max-content;
      max-width: 220px;
      padding: 6px 8px;
      border-radius: 6px;
      background: #202633;
      color: #fff;
      font-size: 11px;
      white-space: normal;
      box-shadow: var(--shadow);
    }
    .flow-table { min-width: 1744px; }
    .flow-table th,
    .flow-table td {
      white-space: nowrap;
    }
    .flow-table .sticky-rank,
    .flow-table .sticky-player,
    .flow-table .sticky-id,
    .flow-table .sticky-power,
    .flow-table .sticky-cross {
      position: sticky;
      z-index: 3;
      background: #fff;
    }
    .flow-table thead .sticky-rank,
    .flow-table thead .sticky-player,
    .flow-table thead .sticky-id,
    .flow-table thead .sticky-power,
    .flow-table thead .sticky-cross {
      z-index: 5;
      background: #f8fafc;
    }
    .flow-table .sticky-rank { left: 0; min-width: 50px; width: 50px; }
    .flow-table .sticky-player { left: 50px; min-width: 124px; width: 124px; }
    .flow-table .sticky-id { left: 174px; min-width: 118px; width: 118px; }
    .flow-table .sticky-power { left: 292px; min-width: 104px; width: 104px; }
    .flow-table .sticky-cross { left: 396px; min-width: 150px; width: 150px; box-shadow: 1px 0 0 var(--line); }
    .flow-table .day-summary {
      position: sticky;
      right: 0;
      z-index: 3;
      min-width: 220px;
      background: #fff;
      box-shadow: -1px 0 0 var(--line);
    }
    .flow-table thead .day-summary {
      z-index: 5;
      background: #f8fafc;
    }
    .flow-table th.hour-col,
    .flow-table td.flow-hour {
      width: 48px;
      min-width: 48px;
      text-align: center;
      padding: 5px 3px;
    }
    .flow-table td.flow-hour {
      position: relative;
      border-left: 1px solid #edf2f7;
      font-variant-numeric: tabular-nums;
    }
    .flow-table td.flow-hour b {
      display: block;
      font-size: 12px;
      line-height: 1.05;
    }
    .flow-table td.flow-hour span {
      display: block;
      margin-top: 2px;
      font-size: 10px;
      color: inherit;
      opacity: .78;
    }
    .flow-table td.flow-hour[data-flow="stock"] { background: #f1edff; color: var(--violet); box-shadow: inset 0 -3px 0 var(--violet); }
    .flow-table td.flow-hour[data-flow="normal"] { background: var(--soft-cyan); color: var(--cyan); box-shadow: inset 0 -3px 0 var(--cyan); }
    .flow-table td.flow-hour[data-flow="sprint"] { background: var(--soft-red); color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }
    .flow-table td.flow-hour[data-flow="hidden"] { background: var(--soft-amber); color: var(--amber); box-shadow: inset 0 -3px 0 var(--amber); }
    .flow-table td.flow-hour[data-flow="idle"] { background: #f3f6fa; color: var(--muted); }
    .flow-table tr.my-row td.flow-hour { outline: 2px solid #f7d56b; outline-offset: -2px; }
    .flow-table tr.sprint-alert td.flow-hour { outline: 2px solid var(--red); outline-offset: -2px; }
    .flow-table td.flow-hour:hover::after {
      content: attr(title);
      position: absolute;
      z-index: 6;
      left: 50%;
      bottom: 34px;
      transform: translateX(-50%);
      width: max-content;
      max-width: 260px;
      padding: 6px 8px;
      border-radius: 6px;
      background: #202633;
      color: #fff;
      font-size: 11px;
      box-shadow: var(--shadow);
      white-space: normal;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
    }

    .legend i {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      display: inline-block;
      margin-right: 4px;
      vertical-align: -1px;
    }

    .pressure-tools {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .pressure-tools select,
    .pressure-tools input {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      background: #fff;
      min-width: 180px;
    }

    .score-tight { color: var(--red); font-weight: 800; }
    .score-watch { color: var(--amber); font-weight: 800; }
    .score-safe { color: var(--green); font-weight: 800; }
    .table-wrap {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: auto;
      height: 520px;
      max-height: none;
      resize: vertical;
      min-height: 180px;
    }
    tr.sprint-alert td {
      background: #fff1f3;
      box-shadow: inset 3px 0 0 var(--red);
    }
    tr.my-row td {
      background: #fff9df;
      box-shadow: inset 3px 0 0 #f7d56b;
    }
    tr.my-row.sprint-alert td {
      background: linear-gradient(90deg, #fff3f5 0%, #fff9df 100%);
      box-shadow: inset 3px 0 0 var(--red), inset 6px 0 0 #f7d56b;
    }
    tr.watch-search-hit td {
      background: #edfafa;
      box-shadow: inset 3px 0 0 var(--cyan);
    }
    tr.watch-search-hit.my-row td {
      background: linear-gradient(90deg, #edfafa 0%, #fff9df 100%);
      box-shadow: inset 3px 0 0 var(--cyan), inset 6px 0 0 #f7d56b;
    }
    tr.watch-search-hit.sprint-alert td {
      background: linear-gradient(90deg, #edfafa 0%, #fff1f3 100%);
      box-shadow: inset 3px 0 0 var(--cyan), inset 6px 0 0 var(--red);
    }
    tr.watch-search-hit.my-row.sprint-alert td {
      background: linear-gradient(90deg, #edfafa 0%, #fff3f5 50%, #fff9df 100%);
      box-shadow: inset 3px 0 0 var(--cyan), inset 6px 0 0 var(--red), inset 9px 0 0 #f7d56b;
    }

    .timeline {
      display: grid;
      gap: 10px;
    }

    .event {
      display: grid;
      grid-template-columns: 72px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfe;
    }

    .event time {
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      font-size: 12px;
    }

    .event b {
      display: block;
      font-size: 13px;
      margin-bottom: 3px;
    }

    .event span {
      color: var(--muted);
      font-size: 12px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .defense-controls {
      display: grid;
      grid-template-columns: repeat(4, minmax(110px, 1fr));
      gap: 8px;
      align-items: end;
    }

    .defense-controls label {
      display: grid;
      gap: 5px;
      min-width: 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .defense-controls input {
      width: 100%;
      min-width: 0;
      min-height: 40px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 8px 10px;
      outline: 0;
      font-variant-numeric: tabular-nums;
    }

    .defense-controls input:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(29, 154, 163, .13);
    }

    .defense-input-unit {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 7px;
    }

    .defense-input-unit em {
      color: var(--muted);
      font-size: 12px;
      font-style: normal;
    }

    .defense-ledger {
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .defense-rows {
      margin-top: 10px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .defense-row {
      display: grid;
      grid-template-columns: 34px minmax(130px, .85fr) minmax(420px, 3fr) minmax(150px, 1fr);
      gap: 10px;
      align-items: center;
      padding: 10px 4px;
    }

    .defense-row + .defense-row {
      border-top: 1px solid var(--line);
    }

    .defense-row[data-risk="red"] {
      background: linear-gradient(90deg, rgba(253, 236, 238, .72), rgba(255, 255, 255, 0));
    }

    .defense-row[data-risk="amber"] {
      background: linear-gradient(90deg, rgba(255, 244, 218, .72), rgba(255, 255, 255, 0));
    }

    .defense-priority {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      color: var(--ink);
      font-size: 13px;
      font-weight: 900;
    }

    .defense-priority.red { color: var(--red); background: var(--soft-red); border-color: #f2c9ce; }
    .defense-priority.amber { color: var(--amber); background: var(--soft-amber); border-color: #ecd69f; }
    .defense-priority.violet { color: var(--violet); background: #efecfb; border-color: #d7d0f1; }

    .defense-member,
    .defense-metric,
    .defense-state {
      min-width: 0;
    }

    .defense-member b,
    .defense-member span,
    .defense-metric span,
    .defense-metric b,
    .defense-metric small,
    .defense-state small {
      display: block;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .defense-member b {
      color: var(--ink);
      font-size: 13px;
    }

    .defense-member span,
    .defense-metric span,
    .defense-metric small,
    .defense-state small {
      margin-top: 3px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.35;
    }

    .defense-metrics {
      min-width: 0;
      display: grid;
      grid-template-columns: .9fr 1.1fr 1.25fr .9fr .65fr;
      gap: 8px;
    }

    .defense-metric b {
      margin-top: 3px;
      color: var(--ink);
      font-size: 12px;
      line-height: 1.25;
      font-variant-numeric: tabular-nums;
    }

    .defense-state {
      display: grid;
      justify-items: start;
      gap: 2px;
    }

    .defense-advice {
      margin-top: 10px;
      padding: 9px 10px;
      border-left: 3px solid var(--cyan);
      background: var(--soft-cyan);
      color: var(--ink);
      font-size: 12px;
      line-height: 1.5;
    }

    .defense-empty {
      padding: 16px 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .member-tools {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) 138px 156px 126px 92px auto;
      gap: 8px;
      align-items: center;
    }

    .member-tools input,
    .member-tools select {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 9px 10px;
      color: var(--ink);
      outline: 0;
    }

    .member-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
      gap: 6px;
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }

    #members.member-panel-fixed .member-grid {
      height: 278px;
      min-height: 180px;
      max-height: none;
      overflow: auto;
      resize: vertical;
      padding-right: 3px;
    }

    #members.member-panel-expanded .member-grid {
      max-height: none;
      overflow: visible;
      resize: none;
      padding-right: 0;
    }

    .member-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfe;
      padding: 8px;
      cursor: pointer;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .member-card:hover {
      transform: translateY(-1px);
      border-color: #b9c6d6;
      box-shadow: 0 10px 24px rgba(31, 45, 61, 0.09);
    }

    .member-card.selected {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(29, 154, 163, .13);
    }

    .member-card h4 {
      margin: 0 0 4px;
      font-size: 13px;
      line-height: 1.2;
    }

    .member-card .meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
      margin-bottom: 6px;
    }

    .member-card .lines {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      font-size: 10px;
      color: var(--muted);
    }

    .member-card .lines b {
      display: block;
      color: var(--ink);
      font-size: 12px;
      margin-top: 2px;
      font-variant-numeric: tabular-nums;
    }

    .member-card-stats {
      display: none;
    }

    .runtime-config {
      display: none !important;
    }

    .mobile-quick-nav,
    .mobile-refresh-note {
      display: none;
    }

    .target-selects {
      display: grid;
      gap: 10px;
    }

    .watch-grid {
      display: grid;
      grid-template-columns: 1.25fr 1fr;
      gap: 14px;
    }

    #watch .panel {
      min-height: 420px;
    }

    #watch .table-wrap {
      height: 610px;
      max-height: none;
    }

    .watch-controls {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .watch-controls input,
    .watch-controls select {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 8px 9px;
      outline: 0;
    }

    .mobile-column-tools {
      display: none;
      align-items: center;
      gap: 8px;
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .mobile-column-tools select {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 7px 8px;
    }

    .watch-search-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .watch-search-row label {
      font-weight: 700;
      white-space: nowrap;
    }

    .watch-search-row input {
      width: min(260px, 100%);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 7px 9px;
      outline: 0;
    }

    .watch-search-row input:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(29, 154, 163, .13);
    }

    .watch-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    .mini-stat {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .mini-stat div {
      border: 1px solid var(--line);
      background: #f8fafc;
      border-radius: 8px;
      padding: 10px;
      color: var(--muted);
      font-size: 11px;
    }

    .mini-stat b {
      display: block;
      color: var(--ink);
      font-size: 15px;
      margin-top: 4px;
      font-variant-numeric: tabular-nums;
    }

    .mini-stat input {
      width: 74px;
      max-width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 5px 7px;
      font: inherit;
    }

    .thumb {
      display: block;
      min-height: 102px;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      color: inherit;
      text-decoration: none;
      background: #f8fafc;
    }

    .thumb img {
      width: 100%;
      height: 92px;
      object-fit: cover;
      display: block;
      border-bottom: 1px solid var(--line);
    }

    .thumb span {
      display: block;
      padding: 8px 9px;
      font-size: 12px;
      color: var(--muted);
    }

    .history-events {
      display: grid;
      gap: 12px;
      margin-bottom: 14px;
    }

    .history-event {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fbfcfe;
      padding: 10px;
    }

    .history-event-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .history-event-head h4 {
      margin: 0;
      font-size: 14px;
    }

    .history-shots {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .history-shot {
      display: block;
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      color: inherit;
      text-decoration: none;
    }

    .history-shot img {
      display: block;
      width: 100%;
      height: 132px;
      object-fit: cover;
      border-bottom: 1px solid var(--line);
    }

    .history-shot.missing {
      background: #f8fafc;
    }

    .history-shot.missing::before {
      content: "📷 图片待补";
      display: flex;
      align-items: center;
      justify-content: center;
      height: 132px;
      color: var(--muted);
      font-size: 13px;
      border-bottom: 1px solid var(--line);
    }

    .history-shot span {
      display: block;
      padding: 7px 8px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .logic {
      display: grid;
      gap: 8px;
    }

    .logic-row {
      display: grid;
      grid-template-columns: 130px 1fr;
      gap: 10px;
      align-items: start;
      padding: 10px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid var(--line);
      font-size: 12px;
    }

    .logic-row b { font-size: 13px; }
    .logic-row span { color: var(--muted); line-height: 1.45; }

    .mobile-only { display: none; }

    @media (max-width: 1180px) {
      .app { grid-template-columns: 1fr; }
      aside {
        position: relative;
        height: auto;
      }
      .grid.cols-4,
      .grid.cols-3,
      .grid.cols-1,
      .grid.cols-2 {
        grid-template-columns: 1fr;
      }
      .cards { grid-template-columns: 1fr; }
      .history-shots { grid-template-columns: 1fr; }
      .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .member-tools { grid-template-columns: 1fr; }
      .watch-grid { grid-template-columns: 1fr; }
      .flow-row { grid-template-columns: 1fr; }
      .defense-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .defense-row { grid-template-columns: 34px minmax(130px, .75fr) minmax(0, 2.5fr); }
      .defense-state { grid-column: 2 / -1; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .actions { justify-content: flex-start; }
    }

    @media (max-width: 720px) {
      body {
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
      }
      main {
        order: 1;
        padding: 12px;
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
      }
      aside {
        order: 2;
        padding: 12px;
      }
      .app { min-width: 0; }
      .brand { margin-bottom: 10px; }
      .nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        margin: 10px 0 12px;
        padding-bottom: 2px;
      }
      .nav a {
        min-height: 44px;
        padding: 10px 12px;
        white-space: nowrap;
      }
      .topbar { gap: 10px; }
      .title h2 { font-size: 18px; }
      .title p { font-size: 12px; line-height: 1.45; }
      .actions {
        width: 100%;
        gap: 6px;
      }
      .actions .btn {
        width: 100%;
        min-height: 44px;
      }
      .pill {
        max-width: 100%;
        white-space: normal;
        line-height: 1.25;
      }
      .mobile-quick-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding: 6px;
        border: 1px solid rgba(223, 229, 238, .9);
        border-radius: 8px;
        background: rgba(255, 255, 255, .95);
        box-shadow: 0 14px 36px rgba(31, 45, 61, .18);
        backdrop-filter: blur(12px);
      }
      .mobile-quick-nav a {
        display: grid;
        place-items: center;
        min-height: 44px;
        border-radius: 8px;
        color: var(--ink);
        background: #f8fafc;
        text-decoration: none;
        font-size: 12px;
        font-weight: 800;
      }
      .mobile-quick-nav a:active,
      .mobile-quick-nav a:focus-visible {
        outline: 0;
        background: var(--soft-cyan);
        color: var(--cyan);
      }
      .mobile-refresh-note {
        display: grid;
        gap: 4px;
        margin: 0 0 12px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }
      .mobile-refresh-note b {
        color: var(--ink);
        font-size: 13px;
      }
      .panel-head,
      .panel-body { padding-left: 12px; padding-right: 12px; }
      .panel-head {
        align-items: flex-start;
        flex-direction: column;
      }
      .panel {
        resize: none;
      }
      .defense-controls {
        grid-template-columns: 1fr 1fr;
      }
      .defense-controls input {
        min-height: 44px;
      }
      .defense-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        padding: 12px 0;
      }
      .defense-priority {
        grid-column: 1;
        grid-row: 1;
      }
      .defense-member {
        grid-column: 2;
        grid-row: 1;
      }
      .defense-metrics {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }
      .defense-metric {
        min-height: 58px;
        padding: 7px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, .78);
      }
      .defense-metric:last-child {
        grid-column: 1 / -1;
      }
      .defense-state {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .defense-state small {
        margin: 0;
        text-align: right;
      }
      .defense-ledger {
        line-height: 1.5;
      }
      table { min-width: 980px; font-size: 11px; }
      th, td { padding: 7px 6px; }
      .table-wrap {
        overflow: auto;
        max-width: calc(100vw - 24px);
        height: min(420px, 72dvh);
        resize: none;
      }
      #watch .table-wrap {
        height: min(430px, 72dvh);
      }
      .split { grid-template-columns: 1fr; }
      .target { grid-template-columns: 1fr; }
      .target strong { text-align: left; }
      .member-tools {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .member-tools input:first-child {
        grid-column: 1 / -1;
      }
      .member-tools .btn {
        grid-column: 1 / -1;
        min-height: 44px;
      }
      .member-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .member-card {
        padding: 10px;
      }
      .member-card h4 {
        font-size: 15px;
      }
      .member-card .meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
      }
      .member-card-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin: 8px 0;
      }
      .member-card-stat {
        min-width: 0;
        padding: 7px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
      }
      .member-card-stat b,
      .member-card-stat em {
        display: block;
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .member-card-stat b {
        color: var(--ink);
        font-size: 12px;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
      }
      .member-card-stat em {
        margin-top: 3px;
        color: var(--muted);
        font-size: 10px;
        font-style: normal;
      }
      .member-card .lines {
        display: none;
      }
      .mini-stat { grid-template-columns: 1fr 1fr; }
      .watch-search-row,
      .mobile-column-tools {
        justify-content: space-between;
      }
      .watch-search-row input,
      .mobile-column-tools select {
        min-height: 44px;
        flex: 1;
      }
      .heat { grid-template-columns: repeat(12, 1fr); row-gap: 20px; }
      .history-shot img { height: 180px; }
      .mobile-column-tools { display: flex; }
      table.watch-table[data-mobile-view="compact"] th[data-col],
      table.watch-table[data-mobile-view="compact"] td[data-col],
      table.watch-table[data-mobile-view="balanced"] th[data-col],
      table.watch-table[data-mobile-view="balanced"] td[data-col] {
        display: none;
      }
      table.watch-table[data-mobile-view="compact"] th[data-col="rank"],
      table.watch-table[data-mobile-view="compact"] td[data-col="rank"],
      table.watch-table[data-mobile-view="compact"] th[data-col="name"],
      table.watch-table[data-mobile-view="compact"] td[data-col="name"],
      table.watch-table[data-mobile-view="compact"] th[data-col="score"],
      table.watch-table[data-mobile-view="compact"] td[data-col="score"],
      table.watch-table[data-mobile-view="compact"] th[data-col="increase"],
      table.watch-table[data-mobile-view="compact"] td[data-col="increase"],
      table.watch-table[data-mobile-view="compact"] th[data-col="status"],
      table.watch-table[data-mobile-view="compact"] td[data-col="status"],
      table.watch-table[data-mobile-view="balanced"] th[data-col="rank"],
      table.watch-table[data-mobile-view="balanced"] td[data-col="rank"],
      table.watch-table[data-mobile-view="balanced"] th[data-col="name"],
      table.watch-table[data-mobile-view="balanced"] td[data-col="name"],
      table.watch-table[data-mobile-view="balanced"] th[data-col="id"],
      table.watch-table[data-mobile-view="balanced"] td[data-col="id"],
      table.watch-table[data-mobile-view="balanced"] th[data-col="score"],
      table.watch-table[data-mobile-view="balanced"] td[data-col="score"],
      table.watch-table[data-mobile-view="balanced"] th[data-col="increase"],
      table.watch-table[data-mobile-view="balanced"] td[data-col="increase"],
      table.watch-table[data-mobile-view="balanced"] th[data-col="silence"],
      table.watch-table[data-mobile-view="balanced"] td[data-col="silence"],
      table.watch-table[data-mobile-view="balanced"] th[data-col="hourly"],
      table.watch-table[data-mobile-view="balanced"] td[data-col="hourly"],
      table.watch-table[data-mobile-view="balanced"] th[data-col="status"],
      table.watch-table[data-mobile-view="balanced"] td[data-col="status"] {
        display: table-cell;
      }
    }