:root {
  color-scheme: light;
  --ink: #172234;
  --muted: #536277;
  --accent: #176f68;
  --line: #dbe4e9;
  --white: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: #f2f5f9; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .58; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.hub-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px max(20px, calc((100vw - 1060px) / 2)); min-height: 65px; background: var(--white); border-bottom: 1px solid var(--line); }
.hub-header nav { display: flex; align-items: center; gap: 18px; font-size: .9rem; white-space: nowrap; }
.hub-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hub-brand img { width: 38px; height: 38px; border-radius: 10px; }
.hub-brand strong, .hub-brand small { display: block; white-space: nowrap; }
.hub-brand small { color: var(--muted); font-size: .59rem; letter-spacing: .06em; }
.hub-account, .hub-back { font-size: .87rem; color: var(--accent); white-space: nowrap; }
.hub-header [aria-current="page"], .hub-bottom [aria-current="page"] { color: var(--accent); font-weight: 700; }
.hub-main { width: min(100% - 32px, 930px); margin: auto; padding: 34px 0 30px; }
.hub-hero { text-align: center; padding: 2px 0 25px; }
.hub-kicker { color: var(--accent); font-size: .76rem; letter-spacing: .15em; font-weight: 750; }
.hub-hero h1 { margin: 6px 0 7px; font-size: clamp(1.9rem, 6vw, 3rem); }
.hub-hero p, .hub-muted { color: var(--muted); font-size: .91rem; line-height: 1.65; }
.hub-panel { margin-bottom: 16px; padding: clamp(13px, 3vw, 24px); background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 8px 24px #23384e08; }
.hub-panel h2 { font-size: clamp(1.1rem, 3.8vw, 1.45rem); margin-top: 3px; }
.hub-notice { display: flex; align-items: center; gap: 12px; border: 1px solid #b7dad7; background: #e4f4f3; border-radius: 14px; padding: 12px 14px; font-weight: 750; }
.hub-notice span { color: var(--accent); }
.hub-promo, .hub-task { border: 1px solid var(--line); border-radius: 16px; padding: clamp(12px, 3vw, 19px); }
.hub-promo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin: 14px 0; border-color: #c4e6e3; background: linear-gradient(115deg,#eef9f8,#fff); }
.hub-promo p { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 5px 0 9px; }
.hub-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #192232; color: white; font-weight: 800; }
.hub-comment-icon { background: #c54c75; }
.hub-list { display: grid; gap: 10px; }
.hub-task { background: #edf1f7; }
.hub-task-title { display: flex; align-items: center; gap: 12px; }
.hub-task-title > div { min-width: 0; }
.hub-task h3 { font-size: 1rem; overflow-wrap: anywhere; }
.hub-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.hub-tag { padding: 3px 7px; border-radius: 7px; background: #fff; color: var(--muted); font-size: .73rem; overflow-wrap: anywhere; }
.hub-tag.accent { background: #def0ee; color: var(--accent); }
.hub-task-footer, .hub-section-head, .hub-record { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hub-task-footer { margin-top: 11px; padding-top: 10px; border-top: 1px solid #d7e0eb; }
.hub-reward { color: #88580d; font-size: 1.05rem; }
.hub-button { display: inline-flex; justify-content: center; align-items: center; min-height: 40px; padding: 7px 12px; border: 1px solid #bbd9d8; border-radius: 10px; color: #155f59; background: #e7f3f3; font-size: .86rem; font-weight: 650; text-align: center; }
.hub-button.primary { color: white; background: #176f68; border-color: #176f68; }
.hub-empty { margin-top: 10px; padding: 15px 10px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }
.hub-empty .hub-button { margin-top: 8px; }
.hub-record { align-items: flex-start; padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.hub-record > div { min-width: 0; overflow-wrap: anywhere; }
.hub-record p { margin: 5px 0; color: var(--muted); }
.hub-record a { color: var(--accent); text-decoration: underline; }
.hub-record strong { color: var(--accent); }
.hub-footer { display: flex; flex-wrap: wrap; gap: 15px; color: var(--muted); font-size: .85rem; }
.hub-back { display: inline-block; margin-bottom: 10px; }
.hub-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 12px 0 16px; padding: 0; list-style: none; counter-reset: step; }
.hub-steps li { padding: 7px 3px; color: var(--muted); text-align: center; background: #f4f7f9; border-radius: 8px; font-size: .76rem; }
.hub-steps li::before { counter-increment: step; content: counter(step); display: block; font-weight: 750; color: var(--accent); }
#hubPlatforms { margin-bottom: 10px; }
.hub-bottom { display: none; }
dialog { width: min(100% - 22px, 540px); max-height: 90dvh; overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); }
dialog::backdrop { background: #17263870; }
.hub-close { float: right; border: 0; background: #eef3f7; border-radius: 8px; padding: 3px 10px; font-size: 1.3rem; }
dialog h2 { padding-right: 36px; margin-bottom: 8px; font-size: 1.3rem; }
dialog h3 { margin: 12px 0 5px; font-size: .96rem; }
dialog pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .89rem; line-height: 1.55; color: var(--muted); }
.hub-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hub-form { display: grid; gap: 8px; margin-top: 12px; }
.hub-form label { display: grid; gap: 4px; font-size: .9rem; }
.hub-form input, .hub-form textarea { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 1rem; }
.hub-status { min-height: 1.2em; color: var(--accent); font-size: .85rem; }
.hub-status.error { color: #a12d30; }
@media (max-width: 730px) {
  .hub-header nav { display: none; }
  .hub-main { width: calc(100% - 24px); padding: 25px 0 calc(83px + env(safe-area-inset-bottom)); }
  .hub-bottom { position: fixed; z-index: 2; bottom: max(7px,env(safe-area-inset-bottom)); left: 8px; right: 8px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 5px 25px #24395118; }
  .hub-bottom a { min-width: 0; display: grid; justify-items: center; gap: 2px; align-content: center; min-height: 48px; padding: 3px 1px; text-align: center; font-size: .63rem; color: var(--muted); border-radius: 11px; }
  .hub-bottom b { font-size: 1.09rem; line-height: 1.1; }
  .hub-bottom [aria-current="page"] { background: #e6f4f3; }
}
/* R2: compact iPhone navigation and task detail interactions. */
.hub-shortcuts {display:flex;justify-content:center;gap:8px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line)}
.hub-shortcuts a {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border:1px solid #dce8e5;border-radius:10px;background:#f6faf9;font-size:.82rem;font-weight:650;min-height:44px}
.hub-shortcuts span {color:var(--accent)}
.hub-platform-icon {width:46px;height:46px;flex-shrink:0}
.hub-support {position:fixed;right:18px;bottom:22px;z-index:3;width:52px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid #cae5df;border-radius:18px;background:#fff;color:var(--accent);box-shadow:0 6px 22px #224d4320;font-size:.72rem}
.hub-support svg {width:24px;height:24px}
.hub-button {min-height:44px}
.hub-close {min-width:44px;min-height:44px}
.hub-evidence-preview {width:100%;max-height:180px;object-fit:contain;border-radius:10px;background:#eef3f5}
.hub-evidence-link {display:inline-block;margin:4px 8px 4px 0;min-height:28px}
.hub-review-note {color:#96631d!important;background:#fff5de;padding:5px 8px;border-radius:6px}
.hub-record-number {font-size:.74rem}
.hub-task {background:linear-gradient(125deg,#f1f5f9,#f8fafc)}
.hub-task-footer {padding-top:12px}
.hub-reward {color:#946324;font-size:1.22rem;letter-spacing:-.03em}
@media (min-width:731px) {.hub-list {grid-template-columns:repeat(2,minmax(0,1fr))}.hub-shortcuts a {min-width:170px}}
@media (max-width:730px) {
 .hub-header {padding:12px 16px;min-height:66px}
 .hub-shortcuts {gap:6px;padding:10px 12px}
 .hub-shortcuts a {flex:1;gap:3px;padding:9px 8px;font-size:.75rem}
 .hub-hero {text-align:left;padding:0 4px 20px}
 .hub-hero h1 {font-size:1.9rem;letter-spacing:-.035em}
 .hub-hero p {font-size:.85rem;max-width:38em}
 .hub-panel {border-radius:16px;padding:14px}
 .hub-task {padding:14px 12px}
 .hub-support {right:12px;bottom:calc(83px + env(safe-area-inset-bottom));width:48px;height:56px;border-radius:16px}
 .hub-record {padding-right:44px}
 .hub-task-footer .hub-button {margin-right:44px}
 dialog {width:calc(100% - 16px);max-height:calc(100dvh - 24px - env(safe-area-inset-top));padding:18px 15px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
 .hub-section-head {align-items:flex-start}
 .hub-section-head h2 {font-size:1.1rem}
 .hub-section-head .hub-button {font-size:.75rem;padding:7px 9px}
 .hub-form [type=submit] {width:100%;margin-top:5px}
}