: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 {
      border: 1px solid var(--line);
      color: var(--ink);
      background: #fff;
      padding: 9px 12px;
      border-radius: 8px;
      cursor: pointer;
    }

    .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;
    }

    .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;
    }

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

    .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; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .actions { justify-content: flex-start; }
    }

    @media (max-width: 720px) {
      main { padding: 12px; }
      .app { min-width: 0; }
      .topbar { gap: 10px; }
      .title h2 { font-size: 18px; }
      .panel-head,
      .panel-body { padding-left: 12px; padding-right: 12px; }
      table { min-width: 980px; font-size: 11px; }
      th, td { padding: 7px 6px; }
      .table-wrap { overflow: auto; max-width: calc(100vw - 24px); }
      .split { grid-template-columns: 1fr; }
      .target { grid-template-columns: 1fr; }
      .target strong { text-align: left; }
      .member-grid { grid-template-columns: 1fr; }
      .mini-stat { grid-template-columns: 1fr 1fr; }
      .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;
      }
    }