/* Soft coral, layered cards and dark rounded actions inspired by the supplied mobile reference. */
:root {
  --bg: #fbf8f6;
  --ink: #292421;
  --muted: #887e7a;
  --line: #efe7e3;
  --card: #fff;
  --accent: #ec745e;
  --coral: #ec745e;
  --deep: #2c2826;
  --sage: #fff0eb;
  --shadow: 0 14px 36px rgba(83, 55, 46, .07);
}

body {
  background: radial-gradient(circle at 66% -140px, #ffe4dd 0, transparent 400px), var(--bg);
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.shell { background: transparent; }
.sidebar { background: #fffdfb; border-color: #f2e9e5; }
.brand, .top-brand { color: #292421; }
.brand small { color: #aa9992; }
.side-note { background: #fff0ea; color: #79645c; border: 1px solid #ffe5db; }
.side-note b { color: #382c28; }
.nav-btn { color: #8f8580; border-radius: 16px; }
.nav-btn:hover { background: #fff5f1; color: #3a2b27; }
.nav-btn.active { background: #ffe9e2; color: #392824; }
.nav-btn.active svg { color: #e96953; }
.main { padding-top: 32px; }
.topbar { margin-bottom: 34px; }
.dev-credit { border-color: #f1e4de; color: #55443e; box-shadow: 0 5px 14px #aa69591a; }
.eyebrow { color: #b18373; letter-spacing: .12em; }
.page-title { color: #2b2522; letter-spacing: -.06em; }
.home-title { font-size: clamp(31px, 4vw, 43px); line-height: 1.13; margin: 8px 0 10px; }
.home-title span { font-weight: 600; }
.subtle { color: #8e817c; }

.hero {
  min-height: 238px;
  margin-top: 27px;
  padding: 30px;
  color: #302622;
  background:
    radial-gradient(circle at 72% 72%, #f4a48f 0, transparent 42%),
    radial-gradient(circle at 10% 7%, #fff9f6 0, transparent 48%),
    linear-gradient(125deg, #ffece6, #f8c2b5);
  border: 1px solid #fbd9ce;
  border-radius: 28px;
  box-shadow: 0 18px 38px #bd745b27;
}
.hero:before, .hero:after { border-color: #ffffff78; }
.hero-kicker { color: #7a5348; font-size: 12px; letter-spacing: .04em; }
.hero h2 { color: #302622; margin-top: 18px; }
.hero-number { color: #292320; font-size: 72px; letter-spacing: -.09em; }
.hero-unit { color: #725a52; }
.hero p { color: #755e55; line-height: 1.45; }
.hero-cta, .primary {
  background: #2b2725;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 9px 19px #59423a2b;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.hero-cta { min-height: 44px; padding: 11px 19px; margin-top: 22px; }
.hero-cta:hover, .primary:hover { background: #42332f; transform: translateY(-2px); box-shadow: 0 12px 22px #59423a30; }
.hero-cta:active, .primary:active { transform: translateY(0); }
.hero-mascots { filter: drop-shadow(0 13px 14px #995c4d35); }
.viewer-hero h2 { display: block; max-width: 210px; font-size: 29px; line-height: 1.18; }

.metrics { gap: 10px; margin-top: 14px; }
.metric {
  background: #fff;
  border: 1px solid #f3eae6;
  border-radius: 20px;
  box-shadow: 0 8px 22px #6a4a3c0c;
}
.metric strong { color: #352722; }
.metric strong em, .metric small { color: #988a84; }
.section-head { margin-top: 35px; }
.section-title { color: #342b27; font-size: 19px; }
.text-link { color: #c55d49; }
.text-link:hover { color: #9f422f; }
.person-tile, .spot-card, .story-card, .directory-row, .rank-row,
.archive-stat, .archive-month, .self-card, .setting-row, .mini-form, .admin-vote {
  background: #fff;
  border: 1px solid #f2e8e3;
  box-shadow: 0 8px 24px #6a4a3c0b;
}
.person-tile { border-radius: 22px; min-width: 114px; transition: transform .18s ease, box-shadow .18s ease; }
.person-tile:hover, .spot-card:hover, .directory-row:hover, .rank-row:hover {
  transform: translateY(-2px); box-shadow: 0 13px 26px #6a4a3c16;
}
.person-tile span { color: #aa9d96; }
.spot-card { border-radius: 22px; }
.spot-card.first { background: linear-gradient(145deg, #fff5f0, #ffe7df); border-color: #ffd5c8; }
.spot-rank, .rank-num, .rank-row:nth-child(1) .rank-num,
.rank-row:nth-child(2) .rank-num, .rank-row:nth-child(3) .rank-num { color: #e97d65; }
.spot-card .count { background: #fff0ea; color: #c35f4b; }
.spot-card.first .count { background: #fff; }
.story-card { border-radius: 21px; }
.story-text { color: #5e5550; }
.story-meta { color: #a69a94; }
.pill { background: #fff0e9; color: #a95d4c; }
.search-box, .input, .textarea { background: #fff; border-color: #ecdfd9; }
.search-box:focus-within, .input:focus, .textarea:focus { border-color: #e78974; box-shadow: 0 0 0 3px #fce7df; }
.row-action { background: #fff0e9; color: #bd604e; }
.row-action.muted { background: #f8f5f2; color: #978d88; }
.rank-votes { color: #d26d56; }
.note-card { background: #fff0ea; color: #765e53; }
.profile-hero { background: radial-gradient(circle at 50% -20%, #fff7f3, #fce4dc 83%); }
.profile-hero:before { border-color: #f5c6b8; }
.archive-month-head span { background: #fff0e8; color: #b55c49; }
.dimension strong { color: #d66b55; }
.setting-row span:last-child { color: #cf9a8d; }

.bottom-nav {
  left: 13px;
  right: 13px;
  bottom: 12px;
  width: auto;
  border: 1px solid #f0e7e3;
  border-radius: 23px;
  background: #fffdfbf2;
  box-shadow: 0 12px 33px #6a4a3c25;
  backdrop-filter: blur(18px);
}
.bottom-nav button { color: #9d928e; border-radius: 13px; }
.bottom-nav button.active { color: #b95845; background: #fff0e9; }
.bottom-nav button.active svg { color: #e2745d; }
.overlay { background: #2e211cc9; }
.sheet { border-radius: 28px; }
.choice { background: #faf4f1; color: #876d63; }
.choice.selected { background: #ffede6; border-color: #efaa96; color: #a94733; }
.vote-target, .auth-identity { background: #fff0ea; }
.avatar-option { background: #faf4f1; }
.avatar-option.selected { border-color: #e77e65; }
#toast { background: #302724; }

.auth-wrap {
  background: radial-gradient(circle at 50% 7%, #ffd8ce 0, transparent 390px), #faf7f5;
}
.auth-card { border: 1px solid #f4e9e4; box-shadow: 0 25px 60px #9d6a581c; }
.auth-art {
  background:
    radial-gradient(circle at 83% 74%, #f4ae9d 0, transparent 39%),
    radial-gradient(circle at 24% 15%, #fff9f5 0, transparent 45%),
    linear-gradient(135deg, #ffebe6, #f8c4b8);
}
.auth-art:before, .auth-art:after { border-color: #ffffff80; }
.auth-brand span { color: #b48272; }
.auth-card h1 { color: #302623; }
.auth-card > p { color: #8c7d76; }
.auth-steps .done { color: #d86b54; }
.switch-account { color: #ac6a59; }

@media (max-width: 700px) {
  body { background: radial-gradient(circle at 75% -70px, #ffdfd6 0, transparent 300px), var(--bg); }
  .main { padding: 20px 18px calc(105px + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 29px; }
  .home-title { font-size: 30px; line-height: 1.17; }
  .hero { min-height: 235px; padding: 24px; margin-top: 25px; }
  .hero-number { font-size: 65px; }
  .hero-art { width: 53%; right: -9px; bottom: 0; }
  .hero p { max-width: 146px; }
  .hero-cta { min-height: 43px; padding: 10px 16px; }
  .viewer-hero h2 { max-width: 150px; font-size: 25px; }
  .metric { border-radius: 18px; }
  .bottom-nav { padding: 8px 7px calc(8px + env(safe-area-inset-bottom)); }
  .bottom-nav button { min-width: 60px; padding: 5px 7px; }
  .auth-card { margin-top: 28px; }
}
@media (max-width: 370px) {
  .home-title { font-size: 27px; }
  .hero-art { width: 48%; right: -15px; }
  .hero-number { font-size: 57px; }
  .hero p { max-width: 130px; }
  .hero-cta { font-size: 11px; padding: 10px 14px; }
  .metric { padding: 12px 9px; }
  .metric small { font-size: 10px; }
  .metric strong { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta, .primary, .person-tile, .spot-card, .directory-row, .rank-row { transition: none; }
}

.group-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:min(100%,420px);padding:5px;margin:0 0 22px;background:#f1e9e4;border:1px solid #eadbd3;border-radius:16px}
.group-switch button{min-height:42px;padding:8px 12px;border:0;border-radius:12px;background:transparent;color:#8c756b;font-size:13px;font-weight:800;white-space:nowrap}
.group-switch button.active{background:#fff;color:#a94d39;box-shadow:0 5px 14px #a9725a20}
.group-switch button:focus-visible{outline:2px solid #d9674e;outline-offset:2px}
@media (max-width:700px){.group-switch{width:100%;margin-bottom:19px}.group-switch button{min-height:44px}}
.admin-search{display:flex;margin:14px 0 10px}.admin-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink)}
.account-results{max-height:365px;overflow:auto;display:grid;gap:7px}
.account-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px;text-align:left;background:#fff;border:1px solid #f0e5df;border-radius:15px;cursor:pointer;color:var(--ink)}
.account-row .avatar{flex:none;width:40px;height:40px}.account-row .row-main{min-width:0;flex:1}.account-row .row-main strong,.account-row .row-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-row .row-main strong small{display:inline;color:#a18f88;font-weight:500}.account-row .row-main>small{margin-top:3px;color:#9b8c85;font-size:11px}
.account-status{flex:none;color:#a45744;background:#fff0ea;padding:5px 8px;border-radius:100px;font-size:10px;font-weight:700}.account-status.inactive{color:#777;background:#f0efee}
.account-toggle{display:flex;align-items:center;gap:10px;margin-top:17px;font-size:14px;font-weight:700;color:var(--ink)}.account-toggle input{width:19px;height:19px;accent-color:var(--coral)}

/* The support-team area is a directory and story feed, separate from the prize ranking. */
.center-intro{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;overflow:hidden;margin:24px 0 4px;padding:25px 27px;border:1px solid #f8d9cb;border-radius:25px;background:radial-gradient(circle at 88% 7%,#ffe8ba 0,transparent 40%),linear-gradient(120deg,#fff2eb,#ffdfd4);box-shadow:0 16px 32px #b9704a18}
.center-intro>div{position:relative;z-index:1}.center-kicker{display:block;color:#a85845;font-size:11px;font-weight:800;letter-spacing:.08em}.center-intro h2{max-width:360px;margin:10px 0;font-size:25px;letter-spacing:-.05em;line-height:1.2;color:#3b2823}.center-intro p{margin:0;color:#805f52;font-size:12px;line-height:1.55}.center-heart{display:grid;place-items:center;flex:none;width:87px;height:87px;border-radius:28px;background:#fff9f4aa;transform:rotate(-11deg);color:#e87058;box-shadow:0 10px 24px #b7654f17}.center-heart svg{width:43px;height:43px;stroke-width:1.5}.section-count{font-size:12px;font-weight:700;color:#b48b7c;letter-spacing:0}
.sidebar .nav-btn[data-page="center"]{margin-top:8px;border:1px solid #ffe4d9;background:#fff8f4;color:#a55b4b}.sidebar .nav-btn[data-page="center"].active{background:#ffe8df;border-color:#f8c8b8;color:#7e3a2a}.sidebar .nav-btn[data-page="center"] svg{color:#e47560}
@media(max-width:700px){.center-intro{padding:21px 20px;border-radius:22px}.center-intro h2{font-size:21px;max-width:235px}.center-heart{width:58px;height:58px;border-radius:19px}.center-heart svg{width:30px;height:30px}.bottom-nav button[data-page="center"] svg{color:#e47560}}
@media(max-width:370px){.center-intro h2{max-width:185px;font-size:19px}.center-heart{width:47px;height:47px}.bottom-nav button{min-width:48px;padding:5px 4px}}