:root {
    color-scheme: light dark;
    --bg: #f4f5f7; --card: #ffffff; --text: #16181d; --dim: #5c6370; --line: #d9dce3;
    --ready: #1f8a3b; --warn: #a86400; --bad: #b3261e; --accent: #2f5bd3; --accent-text: #fff;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #101217; --card: #1b1e26; --text: #e6e8ee; --dim: #9aa1b0; --line: #2c313d;
      --ready: #6cc47c; --warn: #e6b34f; --bad: #e8756b; --accent: #6f93ff; --accent-text: #0b1020;
    }
  }
  * { box-sizing: border-box; }
  body { margin: 0; padding: 24px 16px 48px; background: var(--bg); color: var(--text);
         font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
  main { max-width: 980px; margin: 0 auto; }
  h1 { font-size: 26px; margin: 0 0 4px; }
  .lead { color: var(--dim); margin: 0 0 16px; }
  .storage { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 20px;
             padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
  .storage .note { color: var(--dim); }
  .games { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
  .game { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
          display: flex; flex-direction: column; gap: 10px; position: relative; }
  .game.drag { outline: 2px dashed var(--accent); outline-offset: -6px; }
  .game h2 { font-size: 18px; margin: 0; }
  .state { font-weight: 600; }
  .state.ready { color: var(--ready); } .state.warn { color: var(--warn); } .state.bad { color: var(--bad); }
  .detail { color: var(--dim); font-size: 13px; overflow-wrap: anywhere; }
  .buttons { display: flex; flex-wrap: wrap; gap: 8px; }
  button, .button { font: inherit; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line);
                    background: transparent; color: var(--text); cursor: pointer; text-decoration: none; }
  button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
  button:disabled { opacity: .45; cursor: default; }
  button.primary:disabled { background: transparent; border-color: var(--line); color: var(--dim); }
  button:focus-visible, .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  progress { width: 100%; height: 10px; }
  .message { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .message.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); }
  details summary { cursor: pointer; color: var(--dim); }
  details .buttons { margin-top: 8px; }
  footer { margin-top: 28px; color: var(--dim); font-size: 13px; }
  [hidden] { display: none !important; }