:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1f2329;
  background: #f4f6fa;
  line-height: 1.5;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f4f6fa; }
button { font: inherit; }
.shell { width: min(100%, 720px); margin: 0 auto; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.hero { padding: calc(30px + env(safe-area-inset-top)) 22px 48px; color: white; background: linear-gradient(145deg, #1456f0, #4e83fd); }
.hero.purple { background: linear-gradient(145deg, #5b3fd1, #9678ff); }
.hero.teal { background: linear-gradient(145deg, #0b7285, #22a6b3); }
.eyebrow { font-size: 13px; opacity: .82; letter-spacing: .08em; }
.hero h1 { margin: 8px 0 6px; font-size: 29px; line-height: 1.2; }
.hero p { margin: 0; font-size: 14px; opacity: .9; }
.panel { position: relative; margin: -24px 14px 0; min-height: 190px; padding: 20px; border-radius: 18px; background: white; box-shadow: 0 8px 30px rgba(31, 35, 41, .08); }
.loading { min-height: 150px; display: grid; place-content: center; justify-items: center; color: #646a73; }
.spinner { width: 28px; height: 28px; border: 3px solid #d9e2f8; border-top-color: #3370ff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.user { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: #646a73; font-size: 13px; }
.badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: #e8f7ee; color: #237b4b; font-size: 12px; }
.badge.warn { background: #fff3d6; color: #ad6800; }
.badge.danger { background: #fee7e7; color: #c02b2b; }
.summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 18px; }
.summary div { padding: 12px; border-radius: 12px; background: #f7f8fa; }
.summary strong { display: block; font-size: 21px; }
.summary span { color: #8f959e; font-size: 12px; }
h2 { margin: 22px 0 10px; font-size: 17px; }
.list { display: grid; gap: 10px; }
.item { padding: 14px; border: 1px solid #e5e6eb; border-radius: 12px; background: #fff; }
.item-title { font-weight: 600; word-break: break-word; }
.item-meta { margin-top: 6px; color: #646a73; font-size: 13px; word-break: break-word; }
.item.skipped { background: #fafafa; border-style: dashed; }
.empty { padding: 24px 12px; text-align: center; color: #646a73; background: #f7f8fa; border-radius: 12px; }
.notice { margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: #fff7e6; color: #8f5b00; font-size: 13px; }
.notice.success { background: #e8f7ee; color: #237b4b; }
.notice.error { background: #fee7e7; color: #a61b1b; }
.actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin: 24px -6px -6px; padding: 10px 6px 6px; background: rgba(255,255,255,.96); }
.button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 10px; background: #3370ff; color: white; font-weight: 600; cursor: pointer; }
.button.secondary { background: #f0f1f5; color: #1f2329; }
.button.purple { background: #7c5cff; }
.button.teal { background: #0b8793; }
.button:disabled { opacity: .48; cursor: default; }
.error-screen { min-height: 150px; display: grid; place-content: center; text-align: center; }
.error-screen h2 { margin-bottom: 4px; }
.error-screen p { margin: 0 0 18px; color: #646a73; }
@media (min-width: 721px) { .shell { padding-top: 24px; } .hero { border-radius: 24px 24px 0 0; } }