:root {
      --bg: #0b0d12;
      --panel: #0f1320;
      --text: #e5e7eb;
      --muted: #94a3b8;
      --brand: #60a5fa;
      --accent: #22d3ee;
      --ok: #34d399;
      --warn: #f59e0b;
      --danger: #f87171;
      --border: #1f2636;
      --chip: #182032;
      --input: #0e1220;
      --focus: #2563eb;
      --card: #0f1423;
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      height: 100%
    }

    body {
      margin: 0;
      background: linear-gradient(180deg, #0b0d12, #0a0f1c 40%, #0b0d12);
      color: var(--text);
      font: 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
    }

    a {
      color: var(--brand);
      text-decoration: none
    }

    a:hover {
      text-decoration: underline
    }

    /* layout */
    header {
      position: sticky;
      top: 0;
      z-index: 5;
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 10px 14px;
      background: rgba(15, 20, 35, .6);
      backdrop-filter: blur(6px);
      border-bottom: 1px solid var(--border);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700
    }

    .brand .logo {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: linear-gradient(135deg, var(--brand), var(--accent));
      box-shadow: 0 0 0 2px #ffffff12 inset
    }

    .grow {
      flex: 1
    }

    main {
      padding: 16px;
      max-width: 1100px;
      margin: 0 auto
    }

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

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--chip);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 6px 10px;
      color: #cbd5e1;
      font-size: .9rem
    }

    .help {
      color: var(--muted);
      font-size: .92rem
    }

    /* controls */
    input[type="text"],
    select {
      background: var(--input);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 9px 12px;
      outline: none
    }

    input:focus,
    select:focus {
      border-color: #294bff99;
      box-shadow: 0 0 0 3px #1f3cff33
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      background: linear-gradient(180deg, #12182a, #0e1424);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 9px 12px
    }

    .btn:hover {
      filter: brightness(1.08)
    }

    .btn.primary {
      background: linear-gradient(180deg, #1a2a55, #132042);
      border-color: #2a3a66;
      color: #eaf2ff
    }

    .btn.ghost {
      background: transparent
    }

    .btn.ok {
      background: linear-gradient(180deg, #173a2a, #10261c);
      border-color: #1c4d38
    }

    .btn.warn {
      background: linear-gradient(180deg, #45320b, #2a1f0a);
      border-color: #7a5b12;
      color: #ffe9b6
    }

    .btn.danger {
      background: linear-gradient(180deg, #3a1215, #250b0d);
      border-color: #5e1d23;
      color: #ffd7db
    }

    .btn.sm {
      padding: 6px 9px;
      border-radius: 8px;
      font-size: .92rem
    }

    /* grid */
    .grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(4, 1fr)
    }

    @media (max-width:1200px) {
      .grid {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    @media (max-width:900px) {
      .grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media (max-width:560px) {
      .grid {
        grid-template-columns: 1fr
      }
    }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
      display: flex;
      gap: 12px;
      align-items: center;
      min-height: 88px
    }

    .avatar {
      width: var(--avatar, 54px);
      height: var(--avatar, 54px);
      border-radius: 12px;
      object-fit: cover;
      background: #0b0d12;
      border: 1px solid var(--border);
      flex: 0 0 auto
    }

    .meta {
      flex: 1;
      min-width: 0
    }

    .name {
      font-weight: 700
    }

    .muted {
      color: var(--muted);
      font-size: .9rem
    }

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

    .badges {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap
    }

    .badge {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--border);
      background: #1c253e;
      border-radius: 999px;
      padding: 2px 8px;
      font-size: .82rem;
      color: #c7d2fe
    }

    .state {
      font-weight: 700;
      font-size: .86rem;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: #0e1b2a;
      color: #c7e0ff
    }

    .state.live {
      background: #0e2a20;
      color: #c2ffe5;
      border-color: #255947
    }

    .state.over {
      background: #2a1a0e;
      color: #ffe4c2;
      border-color: #6b4d25
    }

    .panel {
      background: linear-gradient(180deg, #0e1422, #0d1322);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
      margin-bottom: 12px
    }

    .pagination {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      margin-top: 10px
    }

    .pagination .btn[aria-current="true"] {
      outline: 2px solid #ffffff26
    }

    /* toast */
    dialog.toast {
      border: none;
      border-radius: 12px;
      background: #0c1222;
      color: var(--text);
      padding: 10px 12px
    }

    dialog::backdrop {
      background: rgb(0 0 0 / .45)
    }

    /* alert pulse */
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, .35)
      }

      70% {
        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0)
      }
    }

    .overshift {
      outline: 1px solid #f59e0b66;
      animation: pulse 1.6s ease-out infinite
    }

    /* header clock */
    .clock {
      font-variant-numeric: tabular-nums
    }

    /* 1) 検索フォームが右にはみ出る対策（iOS/Safariのflex収縮対策） */
    .toolbar {
      min-width: 0;
      /* ← これが重要：flex内で子要素を縮められるように */
      flex: 0 1 320px;
      /* 右端でほどよく縮む */
    }

    #search {
      width: 100%;
      /* 親(.toolbar)の幅に合わせる */
      max-width: 100%;
      min-width: 0;
    }

    /* 2) モバイル時はヘッダーをグリッドにして
      時計を中央、検索を2段目で全幅にする */
    @media (max-width: 640px) {
      header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
          "brand clock ."
          "search search search";
        gap: 10px;
      }

      .brand {
        grid-area: brand;
      }

      .clock {
        grid-area: clock;
        justify-self: center;
        /* 時計をど真ん中へ */
      }

      .grow {
        display: none;
      }

      /* スペーサーはモバイルでは不要 */
      .toolbar {
        grid-area: search;
        width: 100%;
      }

      #search {
        width: 100%;
      }

      /* 入力欄は全幅 */
    }