:root {
  color-scheme: light;
  font-family: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --canvas: #f6f8f5;
  --surface: #ffffff;
  --surface-soft: #eef4ef;
  --ink: #1e2d29;
  --muted: #687873;
  --line: #dfe7e2;
  --accent: #397d68;
  --accent-soft: #dcece5;
  --blue-soft: #e6eef8;
  --shadow: 0 18px 44px rgba(38, 63, 53, .08);
}

* { box-sizing: border-box; }
html { min-height: 100%; max-width: 100%; overflow-x: hidden; background: var(--canvas); }
body { min-height: 100vh; max-width: 100%; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--canvas); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(57, 125, 104, .24); outline-offset: 2px; }

.page-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 0 max(32px, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--accent); color: white; font-weight: 750; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong { font-size: 17px; line-height: 1.2; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.status-pill { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: var(--surface); cursor: pointer; }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: #d1a34f; }
.status-pill.ready i { background: #4e9b78; }
.status-pill.problem i { background: #c46c5d; }

.welcome { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: end; padding: 74px 0 46px; }
.overline { margin: 0 0 10px; color: var(--accent); font-size: 12px; font-weight: 750; }
.welcome h1 { max-width: 720px; margin: 0; overflow-wrap: anywhere; font-size: clamp(38px, 6vw, 68px); line-height: 1.08; font-weight: 690; }
.welcome-copy > p:last-child { max-width: 620px; margin: 20px 0 0; color: var(--muted); font-size: 17px; line-height: 1.8; }
.continue-card { display: grid; grid-template-columns: 50px 1fr auto; gap: 14px; align-items: center; min-height: 102px; padding: 20px; border: 1px solid #d5e3dc; border-radius: 24px; color: var(--ink); text-align: left; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; }
.continue-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; color: var(--accent); background: var(--accent-soft); font-size: 22px; }
.continue-card span:nth-child(2) { display: flex; flex-direction: column; gap: 5px; }
.continue-card small { color: var(--muted); }.continue-card strong { font-size: 16px; }.continue-card > span:last-child { color: #8b9994; font-size: 28px; }

.service-state { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid #d7e5dd; border-radius: 18px; background: var(--surface-soft); }
.service-state > div { display: flex; align-items: center; gap: 12px; }.state-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; color: var(--accent); background: var(--surface); }
.service-state strong, .service-state small { display: block; }.service-state small { margin-top: 3px; color: var(--muted); }.service-state button { border: 0; color: var(--accent); background: transparent; font-weight: 650; cursor: pointer; }

.explore { padding-top: 50px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }.section-heading h2 { margin: 0; font-size: clamp(27px, 4vw, 38px); font-weight: 680; }
.search-box { display: flex; align-items: center; gap: 9px; width: min(310px, 100%); min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 15px; color: var(--muted); background: var(--surface); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.category-tabs { display: flex; gap: 8px; margin: 26px 0 22px; padding-bottom: 3px; overflow-x: auto; scrollbar-width: none; }.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs button { min-height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; color: var(--muted); background: var(--surface); cursor: pointer; }
.category-tabs button[aria-selected="true"] { border-color: var(--accent); color: white; background: var(--accent); }
.site-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.site-card { display: grid; grid-template-columns: 52px 1fr auto; gap: 13px; align-items: center; min-height: 88px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); text-align: left; background: var(--surface); cursor: pointer; transition: transform 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out; }
.site-card:hover { transform: translateY(-2px); border-color: #cadbd2; box-shadow: 0 10px 24px rgba(38, 63, 53, .07); }
.site-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 18px; font-weight: 760; background: var(--blue-soft); color: #356491; }
.site-card span:nth-child(2) { min-width: 0; }.site-card strong, .site-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.site-card strong { font-size: 15px; }.site-card small { margin-top: 5px; color: var(--muted); font-size: 12px; }.site-arrow { color: #a0aca8; font-size: 20px; }
.site-mark.red { color: #ae4e48; background: #fae9e7; }.site-mark.green { color: #397d68; background: #dfeee7; }.site-mark.yellow { color: #8b6b2b; background: #f5edda; }.site-mark.sand { color: #7f624a; background: #eee6dd; }
.site-mark.teal { color: #2a7877; background: #ddedec; }.site-mark.violet { color: #655b91; background: #ebe8f5; }.site-mark.ink { color: #34403d; background: #e7ebe9; }.site-mark.rose { color: #a35468; background: #f6e6eb; }.site-mark.orange { color: #a35f34; background: #f6e8dc; }.site-mark.sky { color: #367497; background: #e1eef5; }
.empty-state { padding: 50px 20px; border: 1px dashed #ccd8d2; border-radius: 20px; text-align: center; background: rgba(255,255,255,.45); }.empty-state strong, .empty-state span { display: block; }.empty-state span { margin: 8px 0 16px; color: var(--muted); }.empty-state button { border: 0; color: var(--accent); background: transparent; font-weight: 700; cursor: pointer; }
footer { display: flex; justify-content: center; gap: 8px; padding-top: 38px; color: #87938f; font-size: 12px; }footer button { padding: 0; border: 0; color: inherit; background: transparent; text-decoration: underline; cursor: pointer; }

.recovery-shell { width: min(740px, calc(100% - 32px)); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 0 max(30px, env(safe-area-inset-bottom)); }.recovery-brand { margin-bottom: 44px; }
.recovery-card { padding: 52px; border: 1px solid var(--line); border-radius: 30px; text-align: center; background: var(--surface); box-shadow: var(--shadow); }.rest-illustration { position: relative; width: 128px; height: 108px; margin: 0 auto 18px; }
.cloud-shape { display: grid; place-items: center; width: 108px; height: 86px; border-radius: 32px; color: var(--accent); background: var(--accent-soft); font-size: 52px; }.rest-leaf { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: #95733d; background: #f4ecd9; font-size: 24px; }
.recovery-card h1 { margin: 0; font-size: clamp(30px, 6vw, 46px); line-height: 1.15; }.recovery-card > p:not(.overline) { max-width: 520px; margin: 16px auto 26px; color: var(--muted); line-height: 1.75; }
.countdown-card { padding: 20px; border-radius: 20px; background: var(--surface-soft); }.countdown-card small, .countdown-card strong { display: block; }.countdown-card small { color: var(--muted); }.countdown-card strong { margin-top: 7px; font-size: 26px; }
.progress-track { height: 5px; margin-top: 16px; overflow: hidden; border-radius: 99px; background: #d8e4de; }.progress-track span { display: block; width: 20%; height: 100%; border-radius: inherit; background: var(--accent); transition: width 160ms ease-out; }
.recovery-actions { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }.primary-button, .text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 19px; border-radius: 14px; font-weight: 680; text-decoration: none; }.primary-button { border: 0; color: white; background: var(--accent); cursor: pointer; }.primary-button:disabled { opacity: .6; cursor: wait; }.text-button { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.quiet-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 22px; margin-top: 28px; color: var(--muted); font-size: 12px; }

dialog { width: min(430px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 22px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }dialog::backdrop { background: rgba(30, 45, 41, .32); }dialog form { padding: 6px; }.dialog-heading { display: flex; align-items: center; justify-content: space-between; font-size: 18px; }.dialog-heading button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--muted); background: var(--surface-soft); cursor: pointer; }
dl { margin: 18px 0 0; }dl div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--line); }dt { color: var(--muted); }dd { margin: 0; text-align: right; }
.toast { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 10; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 13px; color: white; text-align: center; background: #2b3b36; box-shadow: var(--shadow); transform: translateX(-50%); }

@media (max-width: 960px) { .site-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.welcome { grid-template-columns: 1fr 300px; } }
@media (max-width: 760px) { .page-shell { width: min(calc(100% - 24px), 620px); }.welcome { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 48px 0 28px; }.welcome > * { min-width: 0; }.welcome h1 { font-size: clamp(36px, 11vw, 52px); }.welcome-copy > p:last-child { font-size: 15px; }.continue-card { min-width: 0; min-height: 88px; }.section-heading { align-items: stretch; flex-direction: column; }.search-box { width: 100%; }.site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.site-card { grid-template-columns: 46px minmax(0, 1fr); min-width: 0; min-height: 82px; padding: 13px; }.site-mark { width: 46px; height: 46px; }.site-arrow { display: none; }.recovery-card { padding: 38px 24px; } }
@media (max-width: 430px) { .status-pill span { display: none; }.status-pill { padding: 0 14px; }.service-state { align-items: flex-start; }.service-state button { white-space: nowrap; }.site-card { grid-template-columns: 42px 1fr; gap: 10px; border-radius: 17px; }.site-mark { width: 42px; height: 42px; border-radius: 13px; }.site-card strong { font-size: 14px; }.recovery-actions { flex-direction: column; }.primary-button, .text-button { width: 100%; }.quiet-facts { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; } }