:root {
    --bg: #0d1117; --panel: #161b22; --panel2: #1c2129; --line: #262d38;
    --text: #e6edf3; --dim: #8b949e; --faint: #6e7681;
    --green: #3fb950; --red: #f85149; --yellow: #d29922; --blue: #58a6ff;
    --purple: #bc8cff; --pink: #ff7eb6; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { background: var(--bg); color: var(--text); font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; }
  body { padding-bottom: 96px; }
  .wrap { max-width: 640px; margin: 0 auto; padding: 14px 14px 8px; }
  .mockbar { background: linear-gradient(90deg, #bc8cff33, #ff7eb633); border: 1px solid #bc8cff55;
    color: var(--purple); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    text-align: center; padding: 6px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }
  header h1 { font-size: 22px; font-weight: 700; }
  header .sub { color: var(--dim); font-size: 12.5px; margin: 4px 0 2px; }
  .refresh { color: var(--faint); font-size: 11px; font-family: var(--mono); }
  .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
  .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; text-align: center; }
  .kpi .v { font-size: 22px; font-weight: 700; font-family: var(--mono); }
  .kpi .l { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
  .kpi.green .v { color: var(--green); } .kpi.red .v { color: var(--red); }
  .kpi.yellow .v { color: var(--yellow); } .kpi.blue .v { color: var(--blue); }
  .tabs { display: flex; gap: 6px; margin: 6px 0 12px; flex-wrap: wrap; }
  .tab { flex: 1; min-width: 70px; text-align: center; padding: 8px 4px; border-radius: 9px; font-size: 13px; font-weight: 600;
    background: var(--panel); border: 1px solid var(--line); color: var(--dim); cursor: pointer; }
  .tab.on { background: linear-gradient(135deg, #bc8cff2e, #ff7eb62e); border-color: var(--purple); color: var(--text); }
  .sect { margin: 16px 0 8px; display: flex; align-items: baseline; justify-content: space-between; }
  .sect h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
  .sect .n { font-size: 11px; color: var(--faint); font-family: var(--mono); }
  .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
  .chip { font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
    color: var(--dim); cursor: pointer; font-family: var(--mono); }
  .chip.on { border-color: var(--purple); color: var(--text); background: #bc8cff22; }
  .run { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
  .run[role="button"] { cursor: pointer; }
  .run.running { border-color: #58a6ff66; }
  .run .top { display: flex; align-items: center; gap: 8px; }
  .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .dot.success { background: var(--green); } .dot.failure { background: var(--red); }
  .dot.running { background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: pulse 1.4s infinite; }
  .dot.cancelled, .dot.skipped { background: var(--faint); } .dot.waiting { background: var(--yellow); }
  @keyframes pulse { 50% { opacity: .35; } }
  .run .id { font-family: var(--mono); font-size: 13.5px; font-weight: 600; }
  .run .t { font-size: 12.5px; color: var(--dim); margin: 3px 0 0 17px; line-height: 1.35; }
  .run .meta { display: flex; gap: 10px; margin: 6px 0 0 17px; font-size: 11px; color: var(--faint); font-family: var(--mono); flex-wrap: wrap; }
  .badge { font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 5px; font-weight: 600; }
  .badge.failure { color: var(--red); background: #f8514922; } .badge.success { color: var(--green); background: #3fb95022; }
  .badge.running { color: var(--blue); background: #58a6ff22; } .badge.cancelled { color: var(--faint); background: #30363d; }
  .branch { color: var(--blue); max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .foot { text-align: center; color: var(--faint); font-size: 11px; margin-top: 18px; line-height: 1.6; }
  .empty { text-align: center; color: var(--faint); padding: 28px 0; font-size: 13px; }
  .spacer { height: 10px; }
  .drawer-backdrop { position: fixed; inset: 0; z-index: 10; background: #0009; display: flex; align-items: flex-end; }
  .drawer { width: min(640px, 100%); max-height: 88vh; overflow: auto; margin: 0 auto; padding: 18px 16px 24px;
    background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; }
  .drawer h2 { font-size: 18px; line-height: 1.3; padding-right: 8px; }
  .drawer .close { float: right; color: var(--dim); background: none; border: 0; font-size: 24px; cursor: pointer; line-height: 1; }
  .drawer .detail-status { margin: 12px 0 16px; }
  .details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .detail dt { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
  .detail dd { color: var(--text); font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
  .annotations { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
  .annotations h3 { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
  .annotation { border: 1px solid var(--line); border-radius: 8px; padding: 9px; margin-top: 7px; }
  .annotation .context { font-family: var(--mono); font-size: 11px; }
  .annotation .description { color: var(--dim); font-size: 12px; margin-top: 4px; }
  .forgejo-link { display: inline-block; color: var(--blue); font-size: 12px; margin-top: 16px; }
  .unauthorized { max-width: 640px; margin: 20vh auto; padding: 24px; text-align: center; }
  .unauthorized p { color: var(--dim); margin-top: 8px; }