*, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      max-width: 680px;
      margin: 36px auto;
      padding: 0 16px;
      color: #111;
      background: #f7f7f9;
    }
    h1 { font-size: 17px; font-weight: 700; margin: 0 0 18px; color: #111; letter-spacing: -0.01em; }
    h1 span { color: #888; font-weight: 400; }

    .card {
      background: #fff;
      border: 1px solid #e0e0e6;
      border-radius: 8px;
      padding: 14px 16px;
      margin-bottom: 12px;
    }
    .card-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #888;
      margin: 0 0 10px;
    }

    .row { display: flex; gap: 8px; }

    /* KV rows */
    .kv { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 14px; }
    .kv .k { color: #777; min-width: 76px; font-size: 13px; }
    .kv .v { font-weight: 600; font-family: monospace; }

    /* Media list */
    .media-item {
      display: flex;
      align-items: baseline;
      gap: 10px;
      padding: 7px 0;
      border-bottom: 1px solid #f0f0f3;
      font-size: 13px;
    }
    .media-item:last-child { border-bottom: none; }
    .media-name { flex: 1; font-family: monospace; word-break: break-all; }
    .media-size { color: #999; white-space: nowrap; }
    .badge {
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 3px;
      white-space: nowrap;
      font-weight: 600;
    }
    .badge-shared { background: #e6f7ee; color: #1a6638; }
    .badge-unshared { background: #e8e8ec; color: #666; }
    .badge-processing { background: #fff3cd; color: #92640a; }
    .badge-failed { background: #fde8e8; color: #b91c1c; }
    .media-card-processing { border-left: 3px solid #f59e0b; padding-left: 8px; }
    .media-card-failed { border-left: 3px solid #dc2626; padding-left: 8px; }
    .mc-processing-note { font-size: 11px; color: #92640a; }
    .mc-failed-note { font-size: 11px; color: #b91c1c; font-weight: 600; }
    .media-kind { font-size: 11px; color: #bbb; }

    /* Upload placeholder */
    .upload-placeholder {
      text-align: center;
      padding: 22px 16px;
      border: 2px dashed #ddd;
      border-radius: 6px;
      color: #aaa;
      font-size: 13px;
    }

    .empty { color: #bbb; font-size: 13px; font-style: italic; }