:root {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --surface-soft: #f1f0ec;
  --ink: #20232c;
  --muted: #747680;
  --line: #e9e7e1;
  --brand: #f45132;
  --brand-deep: #d63b20;
  --brand-soft: #fff0eb;
  --orange: #f8943d;
  --blue: #3976df;
  --blue-soft: #edf4ff;
  --purple: #775bd4;
  --purple-soft: #f2efff;
  --green: #2e9c76;
  --green-soft: #eaf8f2;
  --shadow: 0 12px 32px rgba(27, 31, 43, .08);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #e9e8e4;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { background: #e9e8e4; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(244,81,50,.08), transparent 28%),
    #e9e8e4;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(57,118,223,.3);
  outline-offset: 2px;
}

svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.is-hidden { display: none !important; }

.app-shell {
  position: relative;
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  box-shadow: 0 0 50px rgba(24,28,38,.12);
  overflow: hidden;
}

.app-main { min-height: 100dvh; }
.page { display: none; min-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) 18px calc(112px + var(--safe-bottom)); animation: pageIn .28s ease both; }
.page.is-active { display: block; }
.page h1[tabindex="-1"]:focus { outline: none; }

@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: 25px; line-height: 1.22; letter-spacing: -.7px; }
h2 { margin-bottom: 0; font-size: 18px; line-height: 1.35; letter-spacing: -.35px; }
h3 { margin-bottom: 0; font-size: 16px; line-height: 1.45; }
.eyebrow, .kicker { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow { margin-bottom: 7px; }
.home-header .eyebrow { display:flex; align-items:center; gap:7px; }
.demo-badge { padding:3px 6px; color:#b84b30; border-radius:6px; background:#fff0e8; font-size:7px; font-weight:800; letter-spacing:.05em; }
.header-subtitle { margin: 0; color: var(--muted); font-size: 13px; }

.home-header, .standard-header, .detail-header { display: flex; align-items: center; justify-content: space-between; }
.home-header { align-items: flex-start; margin: 3px 0 20px; }
.standard-header { margin: 3px 0 22px; }
.detail-header { height: 44px; margin: 0 -2px 20px; }
.detail-header h1 { margin: 0; font-size: 18px; }

.icon-button {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(32,35,44,.07); border-radius: 50%; background: rgba(255,255,255,.88);
}
.icon-button svg { width: 20px; height: 20px; }
.notification-button { position: relative; margin-top: 2px; box-shadow: 0 5px 18px rgba(33,35,43,.06); }
.notification-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: var(--brand); }
.back-button { background: transparent; border-color: transparent; }

.points-hero {
  position: relative; min-height: 166px; padding: 22px; overflow: hidden;
  color: #fff; border-radius: 25px; background: linear-gradient(135deg, #e94225 0%, #fa683f 56%, #f48b45 100%);
  box-shadow: 0 17px 34px rgba(224,68,37,.24);
}
.points-copy, .points-actions { position: relative; z-index: 2; }
.points-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; opacity: .9; }
.coin-dot { display: grid; place-items: center; width: 20px; height: 20px; color: var(--brand-deep); border-radius: 50%; background: #ffe6a9; font-size: 10px; font-weight: 800; }
.points-value { margin: 7px 0 2px; font-size: 39px; font-weight: 760; letter-spacing: -1.7px; }
.points-copy p { margin: 0; color: rgba(255,255,255,.78); font-size: 12px; }
.points-copy strong { color: #fff; }
.points-actions { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 8px; }
.hero-action { display: flex; align-items: center; gap: 6px; min-height: 39px; padding: 0 12px; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: rgba(117,35,20,.16); font-size: 12px; font-weight: 650; backdrop-filter: blur(8px); }
.hero-action svg { width: 16px; }
.hero-glow { position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); }
.hero-glow-one { width: 150px; height: 150px; right: -40px; top: -70px; }
.hero-glow-two { width: 90px; height: 90px; left: 130px; bottom: -55px; }

.section-card { padding: 18px; border: 1px solid rgba(32,35,44,.04); border-radius: 20px; background: var(--surface); box-shadow: 0 8px 26px rgba(30,33,44,.045); }
.today-card { margin-top: 14px; }
.section-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-card-heading .kicker { display: block; margin-bottom: 4px; }
.section-card-heading h2 { font-size: 15px; }
.progress-ring { --progress: 0; position: relative; display: grid; place-items: center; width: 47px; height: 47px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--progress) * 1%), #f0ede7 0); }
.progress-ring::before { content: ""; position: absolute; width: 37px; height: 37px; border-radius: 50%; background: #fff; }
.progress-ring span { position: relative; font-size: 11px; font-weight: 750; }
.mini-progress { height: 6px; margin: 15px 0 10px; overflow: hidden; border-radius: 99px; background: #f0eee9; }
.mini-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #ff8b5f); }
.today-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.today-meta span:first-child { display: flex; align-items: center; gap: 4px; color: var(--green); font-weight: 650; }
.today-meta svg { width: 13px; }

.section-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 27px 1px 13px; }
.section-title-row .kicker { display: block; margin-bottom: 5px; }
.text-button, .inline-link { display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 0; color: var(--muted); border: 0; background: transparent; font-size: 12px; }
.text-button svg, .inline-link svg { width: 14px; }
.compact-row { margin-top: 25px; }

.module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.module-card { position: relative; display: flex; min-height: 158px; padding: 16px; flex-direction: column; align-items: flex-start; text-align: left; border: 1px solid rgba(32,35,44,.045); border-radius: 21px; background: #fff; overflow: hidden; box-shadow: 0 8px 25px rgba(32,35,44,.045); }
.module-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -45px; top: -40px; border-radius: 50%; background: currentColor; opacity: .06; }
.module-icon { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 14px; border-radius: 13px; }
.module-icon svg { width: 21px; height: 21px; }
.module-title { margin-bottom: 3px; color: var(--ink); font-size: 15px; font-weight: 750; }
.module-desc { color: var(--muted); font-size: 11px; line-height: 1.4; }
.module-footer { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: auto; color: currentColor; font-size: 10px; }
.module-footer b { font-weight: 700; }
.module-footer svg { width: 13px; }
.flower-card { color: #e84a56; }
.flower-card .module-icon { background: #fff0f1; }
.ranking-card { color: #e37a30; }
.ranking-card .module-icon { background: #fff2e7; }
.rules-card { color: #3377cd; }
.rules-card .module-icon { background: #edf5ff; }
.reading-card { color: #7057cc; }
.reading-card .module-icon { background: #f2efff; }
.travel-card { color: #287f87; }
.travel-card .module-icon { background: #e8f6f5; }
.gallery-card { color: #b8792f; }
.gallery-card .module-icon { background: #fff4df; }

.culture-quote { display: flex; align-items: center; gap: 11px; min-height: 85px; margin-top: 14px; padding: 16px 17px; color: #684936; border: 1px solid #efe2d5; border-radius: 20px; background: linear-gradient(100deg,#fffaf3,#f7efe4); }
.quote-mark { align-self: flex-start; color: #c89b6a; font-family: Georgia,serif; font-size: 34px; line-height: .8; }
.culture-quote div { flex: 1; }
.culture-quote p { margin-bottom: 3px; font-family: "Songti SC",serif; font-size: 16px; font-weight: 750; letter-spacing: .08em; }
.culture-quote small { display: block; margin-bottom: 4px; color: #7d644f; font-family: Georgia,serif; font-size: 10px; font-style: italic; letter-spacing: .04em; }
.culture-quote span:not(.quote-mark) { color: #9a7d68; font-size: 10px; }
.culture-quote > svg { width: 30px; height: 30px; color: #a18467; opacity: .75; }

.ranking-glance { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ranking-glance > button { display:grid; min-height:82px; padding:12px; grid-template-columns:36px 1fr auto; align-items:center; gap:9px; text-align:left; border:1px solid var(--line); border-radius:17px; background:#fff; }
.glance-icon { display:grid; width:36px; height:36px; place-items:center; border-radius:12px; }
.glance-icon svg { width:18px; height:18px; }
.flower-glance { color:#d94b58; background:#fff0f1; }
.store-glance { color:#d77b32; background:#fff3e9; }
.rules-glance { color:var(--blue); background:var(--blue-soft); }
.reading-glance { color:var(--purple); background:var(--purple-soft); }
.ranking-glance button > div { display:flex; min-width:0; flex-direction:column; }
.ranking-glance b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.ranking-glance small { margin-top:3px; color:var(--muted); font-size:8px; }
.ranking-glance strong { display:flex; align-items:baseline; color:#353842; font-family:Georgia,serif; font-size:18px; }
.ranking-glance strong em { margin-left:2px; color:var(--muted); font-family:inherit; font-size:7px; font-style:normal; }

.feed-list { overflow: hidden; border-radius: 20px; background: #fff; }
.feed-item { display: flex; gap: 12px; padding: 16px; }
.feed-item + .feed-item { border-top: 1px solid var(--line); }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 13px; color: #fff; font-size: 13px; font-weight: 750; }
.avatar-orange { background: linear-gradient(135deg,#ff8d57,#e85536); }
.avatar-blue { background: linear-gradient(135deg,#6ca9f7,#3976df); }
.avatar-mint { background: linear-gradient(135deg,#5ecab0,#2e9c76); }
.avatar-purple { background: linear-gradient(135deg,#a188e7,#7057cc); }
.feed-content { min-width: 0; flex: 1; }
.feed-heading { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.feed-heading span { color: var(--muted); font-size: 10px; }
.feed-content p { margin: 6px 0 10px; color: #555862; font-size: 12px; line-height: 1.6; }
.feed-tag { display: inline-flex; align-items: center; gap: 5px; color: #d94451; font-size: 10px; font-weight: 650; }
.feed-tag svg { width: 13px; }
.feed-tag-blue { color: var(--blue); }
.feed-tag-purple { color: var(--purple); }

.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; display: grid; width: min(100%,430px); height: calc(72px + var(--safe-bottom)); padding: 8px 12px var(--safe-bottom); grid-template-columns: repeat(5,1fr); align-items: start; transform: translateX(-50%); border-top: 1px solid rgba(32,35,44,.07); background: rgba(255,255,255,.94); backdrop-filter: blur(16px); }
.nav-item, .create-button { display: flex; min-height: 54px; padding: 3px 0 0; flex-direction: column; align-items: center; gap: 3px; border: 0; background: transparent; color: #8c8e96; font-size: 10px; }
.nav-item svg { width: 22px; height: 22px; }
.nav-item.is-active { color: var(--brand); font-weight: 700; }
.nav-item.is-active svg { fill: rgba(244,81,50,.12); }
.create-button { margin-top: -24px; color: var(--brand); font-weight: 700; }
.create-button span { display: grid; place-items: center; width: 50px; height: 50px; color: #fff; border: 5px solid var(--bg); border-radius: 18px; background: linear-gradient(135deg,var(--brand),#ff7b4e); box-shadow: 0 8px 20px rgba(244,81,50,.25); }
.create-button svg { width: 24px; height: 24px; stroke-width: 2.2; }
.create-button small { font-size: 10px; }

/* Discover */
.featured-story { position: relative; overflow: hidden; border-radius: 24px; background: #242936; box-shadow: var(--shadow); }
.story-badge { position: absolute; z-index: 2; margin: 14px; padding: 5px 8px; color: #292329; border-radius: 7px; background: #ffcf67; font-size: 9px; font-weight: 800; }
.story-visual { position: relative; display: flex; height: 145px; align-items: center; justify-content: center; gap: 12px; overflow: hidden; color: #fff; background: radial-gradient(circle at 30% 20%,#4b566d,#252a38 62%); }
.story-visual::before, .story-visual::after { content:""; position: absolute; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; }
.story-visual::before { width: 210px; height: 210px; }
.story-visual::after { width: 135px; height: 135px; }
.story-number { position: relative; z-index: 1; color: #ff6947; font-family: Georgia,serif; font-size: 82px; font-weight: 700; line-height: 1; }
.story-visual > span { position: relative; z-index: 1; font-family: "Songti SC",serif; font-size: 17px; line-height: 1.6; letter-spacing: .12em; }
.story-body { padding: 17px 18px 19px; color: #fff; }
.story-body .kicker { color: #ff9c83; }
.story-body h2 { margin: 5px 0 7px; font-size: 17px; }
.story-body p { margin-bottom: 7px; color: #abb1bf; font-size: 10px; }
.story-body .inline-link { color: #fff; }
.filter-chips { display: flex; gap: 8px; margin: 20px -18px 15px; padding: 0 18px; overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { min-height: 36px; padding: 0 13px; white-space: nowrap; color: var(--muted); border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 11px; }
.filter-chip.is-selected { color: #fff; border-color: var(--ink); background: var(--ink); font-weight: 700; }
.discovery-list { display: grid; gap: 10px; }
.discovery-card { display: grid; padding: 12px; grid-template-columns: 103px 1fr; gap: 13px; border-radius: 18px; background: #fff; }
.discovery-thumb { display: flex; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 14px; }
.discovery-thumb svg { width: 29px; height: 29px; }
.discovery-thumb span { font-family: "Songti SC",serif; font-size: 13px; font-weight: 750; letter-spacing: .1em; }
.thumb-clean { color: #3b7c69; background: #e8f2ed; }
.thumb-book { color: #6d57bd; background: #efecf9; }
.thumb-service { color: #d94b58; background: #fff0f2; }
.thumb-travel { color: #287f87; background: #e8f6f5; }
.thumb-gallery { color: #a97027; background: #fff4df; }
.content-type { color: var(--green); font-size: 9px; font-weight: 750; }
.content-type-purple { color: var(--purple); }
.content-type-red { color: #d94b58; }
.content-type-teal { color: #287f87; }
.content-type-gold { color: #a97027; }
.discovery-card h3 { margin: 5px 0; font-size: 14px; }
.discovery-card p, .social-proof { margin: 0; color: var(--muted); font-size: 9px; }
.social-proof { margin-top: 12px; }

/* Shared detail */
.module-hero { position: relative; display: flex; min-height: 147px; padding: 22px; align-items: center; justify-content: space-between; overflow: hidden; border-radius: 23px; }
.module-hero-flower { color: #7c2631; background: linear-gradient(135deg,#fff0f1,#ffe1e4); }
.hero-overline { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 650; }
.module-hero strong { display: block; margin-bottom: 6px; font-size: 44px; line-height: 1; }
.module-hero strong small { font-size: 14px; }
.module-hero p { margin: 0; color: rgba(124,38,49,.66); font-size: 11px; }
.hero-illustration { display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.52); }
.flower-cluster svg { width: 58px; height: 58px; color: #e44d5b; fill: rgba(255,255,255,.7); stroke-width: 1.4; filter: drop-shadow(0 7px 8px rgba(173,49,62,.16)); }
.primary-action { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 8px; color: #fff; border: 0; border-radius: 15px; background: linear-gradient(135deg,var(--brand),#ff7550); font-size: 13px; font-weight: 750; box-shadow: 0 10px 20px rgba(244,81,50,.18); }
.primary-action svg { width: 18px; }
.full-width { width: 100%; margin-top: 12px; }
.stat-strip { display: flex; margin: 13px 0 0; padding: 15px 8px; align-items: center; justify-content: space-around; border-radius: 17px; background: #fff; }
.stat-strip div { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 2px; }
.stat-strip strong { font-size: 18px; }
.stat-strip span { color: var(--muted); font-size: 9px; }
.stat-strip i { width: 1px; height: 25px; background: var(--line); }
.module-rank-link { display:flex; width:100%; min-height:68px; margin-top:12px; padding:11px 12px; align-items:center; gap:10px; text-align:left; border:1px solid var(--line); border-radius:17px; background:#fff; }
.module-rank-link > span { display:grid; width:39px; height:39px; flex:0 0 auto; place-items:center; border-radius:13px; }
.module-rank-link > span svg { width:20px; height:20px; }
.module-rank-link > div { display:flex; min-width:0; flex:1; flex-direction:column; }
.module-rank-link b { font-size:11px; }
.module-rank-link small { margin-top:3px; color:var(--muted); font-size:8px; }
.module-rank-link > strong { display:flex; align-items:center; gap:2px; white-space:nowrap; font-size:8px; }
.module-rank-link > strong svg { width:13px; }
.flower-rank-link > span { color:#d94b58; background:#fff0f1; }
.flower-rank-link > strong { color:#d94b58; }
.store-rank-link > span { color:#d77b32; background:#fff3e9; }
.store-rank-link > strong { color:#d77b32; }
.rules-rank-link > span { color:var(--blue); background:var(--blue-soft); }
.rules-rank-link > strong { color:var(--blue); }
.reading-rank-link > span { color:var(--purple); background:var(--purple-soft); }
.reading-rank-link > strong { color:var(--purple); }
.honor-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.honor-item { display: flex; min-height: 104px; padding: 11px 4px; flex-direction: column; align-items: center; text-align: center; opacity: .45; border-radius: 16px; background: #fff; }
.honor-item.is-earned { opacity: 1; }
.honor-item > span { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 7px; color: #d74a56; border-radius: 14px; background: #fff0f1; }
.honor-item:nth-child(2) > span { color: var(--blue); background: var(--blue-soft); }
.honor-item:nth-child(3) > span { color: var(--green); background: var(--green-soft); }
.honor-item:nth-child(4) > span { color: var(--orange); background: #fff3e9; }
.honor-item svg { width: 20px; }
.honor-item b { font-size: 10px; }
.honor-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.timeline { border-radius: 19px; background: #fff; }
.timeline article { display: flex; gap: 12px; padding: 16px; }
.timeline article + article { border-top: 1px solid var(--line); }
.timeline-icon { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; border-radius: 12px; }
.timeline-icon svg { width: 18px; }
.flower-timeline { color: #d94b58; background: #fff0f1; }
.speed-timeline { color: var(--orange); background: #fff3e9; }
.timeline article > div { flex: 1; }
.timeline-top { display: flex; justify-content: space-between; font-size: 12px; }
.timeline-top time { color: var(--muted); font-size: 9px; }
.timeline p { margin: 6px 0; color: #555862; font-size: 11px; line-height: 1.6; }
.timeline article > div > span { color: var(--muted); font-size: 9px; }

/* Ranking */
.ranking-summary { display: grid; padding: 18px; grid-template-columns: 115px 1fr; gap: 18px; color: #fff; border-radius: 23px; background: linear-gradient(135deg,#212633,#303847); }
.ranking-summary > div:first-child { display: flex; flex-direction: column; }
.ranking-summary span, .ranking-summary small { color: #b6bdca; font-size: 9px; }
.ranking-summary > div:first-child strong { margin: 4px 0; color: #ff754e; font-family: Georgia,serif; font-size: 44px; line-height: 1; }
.ranking-summary > div:first-child small { color: #7fd2aa; }
.ranking-score { padding-left: 17px; border-left: 1px solid rgba(255,255,255,.12); }
.ranking-score b { display: block; margin: 7px 0 6px; font-size: 24px; }
.score-bar { height: 5px; margin-bottom: 6px; border-radius: 9px; background: rgba(255,255,255,.12); }
.score-bar i { display: block; height: 100%; border-radius: inherit; background: #ff754e; }
.segmented-control { display: grid; margin: 16px 0; padding: 4px; grid-template-columns: 1fr 1fr; border-radius: 14px; background: #eceae5; }
.segmented-control button { min-height: 38px; color: var(--muted); border: 0; border-radius: 11px; background: transparent; font-size: 12px; }
.segmented-control button.is-active { color: var(--ink); background: #fff; font-weight: 750; box-shadow: 0 4px 12px rgba(30,33,44,.06); }
.filter-button { display: inline-flex; min-height: 34px; padding: 0 9px; align-items: center; gap: 5px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 10px; }
.filter-button svg { width: 13px; }
.podium-card { display: flex; min-height: 175px; padding: 18px 10px 0; align-items: flex-end; justify-content: center; border-radius: 21px; background: linear-gradient(180deg,#fffaf3,#fff); }
.podium-item { position: relative; display: flex; width: 31%; min-height: 116px; padding: 7px 4px 12px; flex-direction: column; align-items: center; border-radius: 17px 17px 0 0; background: #f2eee6; }
.podium-item.first { min-height: 145px; background: linear-gradient(180deg,#fff0cf,#f8e3bb); }
.podium-item.third { min-height: 100px; background: #f4e9df; }
.rank-avatar { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 7px; color: #806746; border: 3px solid #fff; border-radius: 50%; background: #e2d1b7; font-size: 12px; font-weight: 750; box-shadow: 0 4px 10px rgba(68,52,35,.12); }
.first .rank-avatar { background: #f4bf59; }
.podium-item b { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.podium-item small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.podium-item i { position: absolute; bottom: -9px; display: grid; place-items: center; width: 22px; height: 22px; color: #fff; border-radius: 50%; background: #9b8b72; font-size: 10px; font-style: normal; font-weight: 750; }
.first i { background: #e6a62f; }
.third i { background: #bf8261; }
.crown { height: 20px; margin-top: -22px; color: #e7a52c; font-size: 21px; }
.method-card { margin-top: 13px; padding: 17px; border: 1px solid #f2e0d4; border-radius: 19px; background: #fffaf6; }
.method-card-head { display: flex; align-items: center; justify-content: space-between; color: var(--brand); font-size: 9px; font-weight: 700; }
.method-badge { padding: 5px 8px; border-radius: 7px; background: #ffe7dc; }
.method-card h3 { margin: 11px 0 6px; }
.method-card > p { margin-bottom: 14px; color: #66636a; font-size: 11px; line-height: 1.65; }
.method-author { display: flex; align-items: center; gap: 9px; padding-top: 12px; border-top: 1px solid #f0ded3; }
.method-author .avatar { width: 32px; height: 32px; border-radius: 10px; }
.method-author div { display: flex; flex: 1; flex-direction: column; }
.method-author b { font-size: 10px; }
.method-author small { color: var(--muted); font-size: 8px; }
.method-author button { min-height: 31px; padding: 0 11px; color: var(--brand); border: 1px solid #f4b5a4; border-radius: 9px; background: #fff; font-size: 9px; }
.rank-list { margin-top: 12px; overflow: hidden; border-radius: 18px; background: #fff; }
.rank-list article { display: flex; min-height: 61px; padding: 10px 13px; align-items: center; gap: 10px; }
.rank-list article + article { border-top: 1px solid var(--line); }
.rank-list .my-rank { background: #fff8f5; }
.rank-no { width: 17px; color: var(--muted); text-align: center; font-size: 11px; font-weight: 750; }
.rank-list .avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 10px; }
.rank-list div { display: flex; flex: 1; flex-direction: column; }
.rank-list b { font-size: 10px; }
.rank-list b em { padding: 2px 4px; color: var(--brand); border-radius: 4px; background: #ffe4db; font-size: 7px; font-style: normal; }
.rank-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.rank-list strong { font-size: 12px; }
.fix-summary { display: flex; gap: 12px; padding: 15px; color: #38567c; border-radius: 17px; background: var(--blue-soft); }
.fix-summary > svg { width: 25px; height: 25px; flex: 0 0 auto; }
.fix-summary strong { font-size: 12px; }
.fix-summary p { margin: 4px 0 0; font-size: 10px; line-height: 1.55; }
.fix-card { margin-top: 12px; padding: 17px; border-radius: 18px; background: #fff; }
.fix-head { display: flex; justify-content: space-between; color: var(--orange); font-size: 9px; font-weight: 700; }
.fix-head time { color: var(--muted); }
.fix-card h3 { margin: 10px 0 4px; }
.fix-card > p { color: var(--muted); font-size: 10px; }
.fix-card .mini-progress { margin-top: 13px; }
.fix-footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; }
.fix-footer button { min-height: 31px; padding: 0 10px; color: var(--blue); border: 1px solid #b6cff2; border-radius: 8px; background: #fff; font-size: 9px; }
.completed-fix { border: 1px solid #dcefe7; }
.completed-fix .fix-head span { color: var(--green); }
.fix-result { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--green); font-size: 10px; font-weight: 700; }
.fix-result svg { width: 15px; }
.inspection-framework { margin-top: 14px; padding: 16px; border: 1px solid #e6e2d9; border-radius: 19px; background: linear-gradient(145deg,#fff,#faf8f3); box-shadow: 0 8px 24px rgba(43,45,53,.04); }
.inspection-framework-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.inspection-framework-head h2 { margin: 4px 0 0; font-size: 15px; }
.inspection-framework-head button { min-height: 29px; padding: 0 9px; flex: 0 0 auto; color: var(--blue); border: 1px solid #cbddef; border-radius: 9px; background: var(--blue-soft); font-size: 8px; font-weight: 700; }
.inspection-dimensions { display: grid; margin-top: 14px; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.inspection-dimensions span { display: grid; min-height: 42px; padding: 5px 3px; place-items: center; color: #4d5b6b; border-radius: 10px; background: #f1f3f4; text-align: center; font-size: 8px; font-weight: 700; line-height: 1.35; }
.inspection-dimensions span:first-child { color: #22755f; background: #e5f4ee; }
.inspection-dimensions span:nth-child(2) { color: #2c6594; background: #e8f1f9; }
.inspection-dimensions span:nth-child(3) { color: #8b6030; background: #f9f0e3; }
.inspection-dimensions span:nth-child(4) { color: #7f5b94; background: #f2eafa; }
.inspection-dimensions span:nth-child(5) { color: #9b4d3b; background: #faece8; }
.ranking-panel-intro { position: relative; padding: 18px; overflow: hidden; color: #fff; border-radius: 20px; background: linear-gradient(135deg,#283349,#43546a); }
.ranking-panel-intro::after { content:""; position: absolute; width: 110px; height: 110px; right: -38px; top: -47px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255,255,255,.035); }
.ranking-panel-intro span { color: #ffbc8e; font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.ranking-panel-intro h2 { margin: 7px 0 5px; font-size: 16px; }
.ranking-panel-intro p { max-width: 275px; margin: 0; color: #d5dce5; font-size: 10px; line-height: 1.6; }
.benchmark-library { display: grid; gap: 11px; }
.benchmark-case { padding: 16px; border: 1px solid #e5e2da; border-radius: 18px; background: #fff; box-shadow: 0 7px 20px rgba(37,40,49,.035); }
.benchmark-case.featured-benchmark { border-color: #f0d5c8; background: linear-gradient(145deg,#fffaf7,#fff); }
.benchmark-case-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.benchmark-case-head span { padding: 5px 7px; color: #9b4b36; border-radius: 7px; background: #fceae4; font-size: 8px; font-weight: 750; }
.benchmark-case-head em { color: var(--green); font-size: 8px; font-style: normal; font-weight: 700; }
.benchmark-case h3 { margin: 11px 0 6px; font-size: 13px; }
.benchmark-case > p { margin: 0; color: #62656d; font-size: 10px; line-height: 1.65; }
.benchmark-meta { display: flex; margin-top: 13px; padding-top: 12px; align-items: center; gap: 9px; border-top: 1px solid #efede8; }
.benchmark-meta .avatar { width: 31px; height: 31px; flex: 0 0 auto; border-radius: 10px; font-size: 9px; }
.benchmark-meta div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.benchmark-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.benchmark-meta small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.benchmark-meta strong { color: var(--brand); font-size: 8px; }
.benchmark-case > button { display: flex; width: 100%; min-height: 34px; margin-top: 12px; padding: 0 10px; align-items: center; justify-content: center; gap: 5px; color: var(--brand); border: 1px solid #f1c5b7; border-radius: 10px; background: #fff7f3; font-size: 9px; font-weight: 750; }
.benchmark-case > button svg { width: 12px; height: 12px; }
.benchmark-transfer { margin-top: 12px; padding: 15px; border-radius: 17px; background: #eef4f8; }
.benchmark-transfer > b { color: #355a75; font-size: 10px; }
.benchmark-transfer > div { display: flex; margin-top: 12px; align-items: center; justify-content: space-between; }
.benchmark-transfer span { color: #4e6779; font-size: 8px; font-weight: 700; white-space: nowrap; }
.benchmark-transfer i { width: 13px; height: 1px; background: #abc0d0; }
.closure-steps { display: grid; margin: 12px 0; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.closure-steps span { display: flex; min-height: 49px; padding: 6px 3px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #7e828b; border-radius: 11px; background: #ebeae6; font-size: 8px; font-weight: 700; text-align: center; }
.closure-steps i { display: grid; width: 18px; height: 18px; place-items: center; color: #fff; border-radius: 50%; background: #a6a8ad; font-size: 8px; font-style: normal; }
.closure-steps .is-done { color: #286c5a; background: #e7f3ee; }
.closure-steps .is-done i { background: var(--green); }
.evidence-compare { display: grid; margin: 13px 0; grid-template-columns: 1fr 1fr; gap: 8px; }
.evidence-compare > div { display: flex; min-width: 0; flex-direction: column; }
.evidence-compare i { position: relative; display: block; height: 82px; overflow: hidden; border-radius: 11px; background: linear-gradient(165deg,#969185 0 36%,#5d574d 37% 66%,#302e2a 67%); }
.evidence-compare i::after { content:""; position: absolute; width: 70%; height: 14px; left: 15%; bottom: 12px; border-radius: 50%; background: rgba(20,18,14,.52); filter: blur(3px); }
.evidence-compare .after-evidence i { background: linear-gradient(165deg,#d8d2c5 0 36%,#a9a499 37% 66%,#7a7770 67%); }
.evidence-compare .after-evidence i::after { width: 28%; left: 36%; background: rgba(255,255,255,.28); }
.evidence-compare span { margin-top: 6px; color: var(--ink); font-size: 8px; font-weight: 750; }
.evidence-compare small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.fix-detail-grid { display: grid; margin: 0 0 13px; grid-template-columns: 1fr 1fr; gap: 8px; }
.fix-detail-grid > div { padding: 9px; border-radius: 10px; background: #f6f5f2; }
.fix-detail-grid dt { color: var(--muted); font-size: 7px; }
.fix-detail-grid dd { margin: 4px 0 0; color: #4a4d54; font-size: 8px; font-weight: 650; line-height: 1.45; }
.closing-checklist { margin-top: 12px; padding: 17px; color: #fff; border-radius: 18px; background: linear-gradient(140deg,#2c5f55,#397a69); }
.closing-checklist h3 { margin: 5px 0 0; font-size: 13px; }
.closing-checklist .kicker { color: #9ed8c8; }
.closing-checklist ul { display: grid; margin: 13px 0 0; padding: 0; gap: 8px; list-style: none; }
.closing-checklist li { display: flex; align-items: center; gap: 7px; color: #d9eee8; font-size: 9px; }
.closing-checklist li svg { width: 14px; height: 14px; padding: 2px; color: #2c5f55; border-radius: 50%; background: #bce8dc; }
.completed-upload { border-color: #bcded3 !important; background: #f3fbf8 !important; }
.completed-upload > svg:first-child { color: var(--green); }

/* Work rules */
.rules-hero { position: relative; min-height: 183px; padding: 24px; overflow: hidden; color: #fff; border-radius: 23px; background: linear-gradient(135deg,#245889,#347db6); }
.rules-hero::after { content:""; position:absolute; width:170px; height:170px; right:-70px; top:-60px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow: 0 0 0 34px rgba(255,255,255,.04); }
.rules-hero > span { color: #9dc7e9; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.rules-hero h2 { margin: 12px 0 4px; font-family: "Songti SC",serif; font-size: 26px; line-height: 1.35; letter-spacing: .09em; }
.rules-hero h2 em { color: #ffd17a; font-style: normal; }
.rules-hero p { margin: 0; color: #c4dced; font-size: 10px; }
.rules-hero .rules-english { margin-bottom: 6px; color: #ffdca0; font-family: Georgia,serif; font-size: 10px; font-style: italic; letter-spacing: .04em; }
.rules-hero > svg { position: absolute; right: 29px; bottom: 28px; width: 42px; height: 42px; color: #ffd17a; opacity: .85; }
.rules-action { background: linear-gradient(135deg,#2a69a0,#3e8fc4); box-shadow: 0 10px 20px rgba(45,111,164,.18); }
.rules-progress { margin-top: 13px; }
.rules-level { padding: 6px 8px; color: var(--blue); border-radius: 8px; background: var(--blue-soft); font-size: 9px; font-weight: 700; }
.rules-progress-bar span { background: linear-gradient(90deg,#3478b2,#5ba9d6); }
.rules-progress > p { margin: 0; color: var(--muted); font-size: 9px; }
.rules-list { display: grid; gap: 9px; }
.rule-card { display: flex; min-height: 65px; padding: 10px 13px; align-items: center; text-align: left; gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.rule-no { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; color: var(--blue); border-radius: 11px; background: var(--blue-soft); font-family: Georgia,serif; font-size: 13px; font-weight: 750; }
.rule-card > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.rule-card b { font-size: 12px; }
.rule-card p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.rule-state { display: grid; place-items: center; width: 25px; height: 25px; color: #fff; border-radius: 50%; background: var(--green); }
.rule-state svg { width: 14px; }
.rule-points { color: var(--brand); font-size: 9px; font-weight: 750; }
.rule-card.is-complete { border-color: #dceee7; background: #fbfefd; }
.rule-card.is-complete .rule-no { color: var(--green); background: var(--green-soft); }
.case-card { padding: 17px; border-radius: 19px; background: #fff; }
.case-meta { display: flex; align-items: center; gap: 10px; }
.case-meta .avatar { width: 34px; height: 34px; border-radius: 11px; }
.case-meta > div { display: flex; flex: 1; flex-direction: column; }
.case-meta b { font-size: 11px; }
.case-meta small { color: var(--muted); font-size: 8px; }
.case-score { color: var(--brand); font-size: 10px; font-weight: 750; }
.case-card h3 { margin: 14px 0 6px; font-size: 14px; }
.case-card > p { color: #555862; font-size: 10px; line-height: 1.7; }
.case-outcome { display: flex; align-items: center; gap: 8px; padding: 11px; color: #376e5d; border-radius: 12px; background: var(--green-soft); }
.case-outcome svg { width: 17px; }
.case-outcome span { display: flex; flex-direction: column; font-size: 9px; }

/* Reading */
.reading-hero { display: grid; min-height: 176px; padding: 22px; grid-template-columns: 1fr 105px; gap: 12px; overflow: hidden; border-radius: 23px; color: #fff; background: linear-gradient(135deg,#4a3e88,#715cb0); }
.reading-copy > span { color: #d3c9f3; font-size: 10px; }
.reading-copy h2 { margin: 10px 0 15px; font-family: "Songti SC",serif; font-size: 20px; line-height: 1.45; letter-spacing: .05em; }
.reading-copy p { margin-bottom: 7px; color: #d3c9f3; font-size: 9px; }
.reading-copy .mini-progress { width: 125px; margin: 0; background: rgba(255,255,255,.15); }
.reading-copy .mini-progress span { background: #e8c56a; }
.book-cover { position: relative; display: flex; width: 90px; height: 129px; padding: 13px 10px; flex-direction: column; align-self: center; transform: rotate(5deg); color: #2d3550; border-radius: 4px 10px 10px 4px; background: linear-gradient(145deg,#f5d982,#dcb552); box-shadow: -6px 8px 16px rgba(24,19,55,.25); }
.book-cover::before { content:""; position:absolute; left:6px; top:0; width:1px; height:100%; background:rgba(83,65,25,.22); }
.book-cover small { font-size: 6px; letter-spacing: .08em; }
.book-cover b { margin: 19px 0 0 10px; font-family: "Songti SC",serif; font-size: 18px; line-height: 1.25; }
.book-cover i { position:absolute; right:11px; bottom:13px; width:23px; height:23px; border:1px solid currentColor; border-radius:50%; opacity:.35; }
.reading-action { background: linear-gradient(135deg,#6550ad,#8068c5); box-shadow: 0 10px 20px rgba(101,80,173,.2); }
.reading-loop { display: flex; margin-top: 13px; padding: 15px 10px; align-items: center; justify-content: center; border-radius: 18px; background: #fff; }
.loop-step { display: flex; width: 54px; flex-direction: column; align-items: center; color: #aaa5b8; }
.loop-step > span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 5px; border-radius: 12px; background: #f0eef4; }
.loop-step svg { width: 16px; }
.loop-step b { font-size: 9px; }
.loop-step small { margin-top: 2px; font-size: 8px; }
.loop-step.is-done { color: var(--purple); }
.loop-step.is-done > span { background: var(--purple-soft); }
.reading-loop > i { width: 18px; height: 1px; margin: 0 1px 22px; background: #ddd9e5; }
.reading-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.reading-stats div { display: flex; min-height: 98px; padding: 12px 9px; flex-direction: column; border-radius: 16px; background: #fff; }
.reading-stats span { color: var(--muted); font-size: 9px; }
.reading-stats strong { margin: 8px 0 5px; font-size: 21px; }
.reading-stats strong small { margin-left: 2px; font-size: 9px; }
.reading-stats em { margin-top: auto; color: var(--purple); font-size: 8px; font-style: normal; }
.note-card { margin-top: 12px; padding: 17px; border-radius: 19px; background: #fff; }
.note-head { display: flex; align-items: center; gap: 10px; }
.mini-book { display: grid; place-items: center; width: 36px; height: 48px; color: #fff; border-radius: 3px 7px 7px 3px; font-family: "Songti SC",serif; font-size: 10px; }
.purple-book { background: #67559e; }
.note-head > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.note-head b { font-size: 11px; }
.note-head small { color: var(--muted); font-size: 8px; }
.note-head > span { color: var(--purple); font-size: 10px; font-weight: 750; }
.note-card blockquote { margin: 15px 0; padding-left: 12px; color: #53535e; border-left: 2px solid #c7bcec; font-family: "Songti SC",serif; font-size: 11px; line-height: 1.75; }
.note-transfer { display: flex; gap: 8px; padding: 11px; color: #6552a6; border-radius: 12px; background: var(--purple-soft); }
.note-transfer svg { width: 17px; }
.note-transfer div { display: flex; flex-direction: column; }
.note-transfer b { font-size: 9px; }
.note-transfer p { margin: 2px 0 0; color: #8379a4; font-size: 8px; }

/* Leaderboard center */
.leaderboard-hero { position:relative; display:grid; min-height:168px; padding:23px; grid-template-columns:1fr 92px; overflow:hidden; color:#fff; border-radius:23px; background:linear-gradient(135deg,#202637,#343c50 62%,#4c586e); }
.leaderboard-hero::after { content:""; position:absolute; right:-48px; top:-64px; width:165px; height:165px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 33px rgba(255,255,255,.035); }
.leaderboard-hero > div:first-child { position:relative; z-index:1; }
.leaderboard-hero > div:first-child > span { color:#ffbe75; font-size:8px; font-weight:750; letter-spacing:.16em; }
.leaderboard-hero h2 { margin:11px 0 8px; font-family:"Songti SC",serif; font-size:23px; line-height:1.42; letter-spacing:.05em; }
.leaderboard-hero p { margin:0; color:#c7ccd6; font-size:9px; }
.leaderboard-hero-mark { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#ffd071; }
.leaderboard-hero-mark svg { width:47px; height:47px; }
.leaderboard-hero-mark i { position:absolute; top:46px; display:grid; width:23px; height:23px; place-items:center; color:#2c3242; border-radius:50%; background:#ffd071; font-size:10px; font-style:normal; font-weight:800; }
.leaderboard-hero-mark small { margin-top:20px; color:#c7ccd6; font-size:7px; }
.leaderboard-scope { margin-top:14px; margin-bottom:12px; }
.leaderboard-tabs { display:grid; padding:5px; grid-template-columns:repeat(4,minmax(72px,1fr)); gap:4px; border-radius:17px; background:#ebe9e4; overflow-x:auto; scrollbar-width:none; }
.leaderboard-tabs::-webkit-scrollbar { display:none; }
.leaderboard-tabs button { display:flex; min-width:72px; min-height:51px; padding:6px 4px; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--muted); border:0; border-radius:13px; background:transparent; font-size:8px; }
.leaderboard-tabs button svg { width:17px; height:17px; }
.leaderboard-tabs button.is-active { color:#fff; background:#262c3a; box-shadow:0 5px 14px rgba(35,40,53,.16); font-weight:750; }
.leaderboard-panel { margin-top:15px; }
.leaderboard-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:0 1px 11px; }
.leaderboard-panel-head .kicker { display:block; margin-bottom:4px; }
.leaderboard-panel-head h2 { font-size:17px; }
.update-pill, .mini-label { display:inline-flex; min-height:26px; padding:0 8px; align-items:center; color:#c84957; border-radius:8px; background:#fff0f1; font-size:8px; font-weight:700; }
.orange-update { color:#b76727; background:#fff3e9; }
.blue-update { color:#3377cd; background:#edf5ff; }
.purple-update { color:#6e57bf; background:#f2efff; }
.leaderboard-intro { margin:0 1px 12px; color:var(--muted); font-size:10px; line-height:1.6; }
.leaderboard-top3 { display:grid; min-height:210px; padding:18px 10px 0; grid-template-columns:repeat(3,1fr); align-items:end; gap:7px; border-radius:21px; background:linear-gradient(180deg,#fff7f2,#fff); }
.top-rank { position:relative; display:flex; min-height:148px; padding:14px 5px 16px; align-items:center; flex-direction:column; border-radius:17px 17px 0 0; background:#f6ebe6; }
.top-rank.first-rank { order:2; min-height:184px; padding-top:25px; background:linear-gradient(180deg,#fff1ce,#f8dfb1); }
.top-rank.second-rank { order:1; }
.top-rank.third-rank { order:3; min-height:131px; background:#f5ece7; }
.top-avatar { display:grid; width:47px; height:47px; place-items:center; color:#fff; border:3px solid #fff; border-radius:50%; font-size:12px; font-weight:750; box-shadow:0 5px 12px rgba(54,43,39,.14); }
.top-rank > i { display:grid; width:21px; height:21px; margin:-8px 0 6px; place-items:center; color:#fff; border:2px solid #fff; border-radius:50%; background:#9e8a7d; font-size:8px; font-style:normal; font-weight:800; }
.first-rank > i { background:#d99b29; }
.third-rank > i { background:#b57b61; }
.top-crown { position:absolute; top:2px; color:#e4a22c; }
.top-crown svg { width:23px; height:23px; }
.top-rank b { font-size:10px; }
.top-rank small { min-height:22px; margin-top:3px; color:var(--muted); text-align:center; font-size:7px; line-height:1.35; }
.top-rank strong { margin-top:auto; color:#b9414e; font-size:16px; }
.top-rank strong em { margin-left:2px; font-size:7px; font-style:normal; }
.leaderboard-list, .store-rank-summary, .metric-leaderboard-list, .improvement-rank { margin-top:11px; overflow:hidden; border-radius:18px; background:#fff; }
.leaderboard-list article, .store-rank-summary article { display:flex; min-height:66px; padding:10px 12px; align-items:center; gap:9px; }
.leaderboard-list article + article, .store-rank-summary article + article, .metric-leaderboard-list article + article, .improvement-rank article + article { border-top:1px solid var(--line); }
.list-rank { width:18px; color:var(--muted); text-align:center; font-size:11px; font-weight:750; }
.leaderboard-list .avatar, .store-rank-summary .avatar { width:34px; height:34px; border-radius:11px; font-size:10px; }
.leaderboard-list article > div, .store-rank-summary article > div { display:flex; min-width:0; flex:1; flex-direction:column; }
.leaderboard-list b, .store-rank-summary b { font-size:10px; }
.leaderboard-list b em, .store-rank-summary b em, .metric-leaderboard-list b em, .member-directory b em { padding:2px 5px; color:var(--brand); border-radius:5px; background:#ffe9e2; font-size:7px; font-style:normal; }
.leaderboard-list small, .store-rank-summary small { margin-top:3px; color:var(--muted); font-size:8px; }
.leaderboard-list article > strong, .store-rank-summary article > strong { white-space:nowrap; font-size:11px; }
.current-person, .current-store { background:#fff7f3; }
.leaderboard-policy { display:flex; gap:9px; margin-top:12px; padding:13px; color:#466256; border-radius:16px; background:#edf7f2; }
.leaderboard-policy svg { width:19px; height:19px; flex:0 0 auto; }
.leaderboard-policy p { margin:0; font-size:9px; line-height:1.55; }
.leaderboard-policy b { display:block; margin-bottom:3px; font-size:10px; }
.store-rank-summary { margin-top:0; }
.store-rank-summary article > i { display:grid; width:23px; height:23px; place-items:center; color:#fff; border-radius:8px; background:#8b8d95; font-size:8px; font-style:normal; font-weight:750; }
.store-rank-summary article:nth-child(1) > i { background:#e2a53a; }
.store-rank-summary article:nth-child(2) > i { background:#8d9cad; }
.store-rank-summary article:nth-child(3) > i { background:#b98262; }
.store-rank-summary article > strong { font-size:13px; }
.improvement-rank { margin-top:0; }
.improvement-rank article { display:flex; min-height:66px; padding:11px 13px; align-items:center; gap:10px; }
.improvement-rank article > span { display:grid; width:30px; height:30px; place-items:center; color:#b76727; border-radius:10px; background:#fff3e9; font-size:8px; font-weight:750; }
.improvement-rank article > div { display:flex; min-width:0; flex:1; flex-direction:column; }
.improvement-rank b { font-size:10px; }
.improvement-rank small { margin-top:3px; color:var(--muted); font-size:8px; }
.improvement-rank strong { color:var(--green); font-size:12px; }
.metric-leaderboard-list { margin-top:0; }
.metric-leaderboard-list article { display:grid; min-height:84px; padding:11px 12px; grid-template-columns:24px 37px 1fr auto; align-items:center; gap:9px; }
.metric-rank { display:grid; width:23px; height:23px; place-items:center; color:#69778b; border-radius:8px; background:#edf3fb; font-size:8px; font-weight:750; }
.metric-winner .metric-rank { color:#fff; background:#d59b31; }
.metric-leaderboard-list .avatar { width:36px; height:36px; border-radius:12px; font-size:10px; }
.metric-leaderboard-list article > div { display:flex; min-width:0; flex-direction:column; }
.metric-leaderboard-list b { font-size:10px; }
.metric-leaderboard-list small { margin:3px 0 7px; color:var(--muted); font-size:7px; }
.metric-leaderboard-list article > strong { display:flex; min-width:45px; flex-direction:column; align-items:flex-end; color:#3377cd; font-size:14px; }
.metric-leaderboard-list strong em { margin-top:2px; color:var(--muted); font-size:6px; font-style:normal; }
.metric-bar { height:4px; overflow:hidden; border-radius:99px; background:#edf0f4; }
.metric-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3976df,#75a6e9); }
.reading-metric-list .metric-rank { color:#6e57bf; background:#f2efff; }
.reading-metric-list .metric-winner .metric-rank { color:#fff; background:#745fc0; }
.reading-metric-list article > strong { color:var(--purple); }
.reading-metric-list .metric-bar i { background:linear-gradient(90deg,#6b55b8,#a490df); }
.score-formula { display:flex; margin-top:11px; padding:12px 13px; flex-direction:column; border-radius:15px; background:#edf5ff; }
.score-formula span { color:#3377cd; font-size:8px; font-weight:750; }
.score-formula p { margin:5px 0 0; color:#55708c; font-size:9px; line-height:1.5; }
.reading-score-grid { display:grid; margin-top:11px; grid-template-columns:repeat(4,1fr); gap:6px; }
.reading-score-grid div { display:flex; min-height:59px; align-items:center; justify-content:center; flex-direction:column; border-radius:14px; background:#fff; }
.reading-score-grid b { color:var(--purple); font-size:13px; }
.reading-score-grid span { margin-top:3px; color:var(--muted); font-size:8px; }

/* Blue-green footprints */
.travel-hero { position: relative; display: grid; min-height: 190px; padding: 24px; grid-template-columns: 1fr 118px; overflow: hidden; color: #fff; border-radius: 23px; background: linear-gradient(135deg,#176c73,#2b918d 58%,#6eb69a); }
.travel-hero::before { content:""; position:absolute; width:190px; height:190px; right:-74px; top:-96px; border:1px solid rgba(255,255,255,.2); border-radius:50%; box-shadow:0 0 0 38px rgba(255,255,255,.04); }
.travel-hero-copy { position: relative; z-index: 2; }
.travel-hero-copy > span { color:#bfe5dc; font-size:8px; font-weight:750; letter-spacing:.16em; }
.travel-hero-copy h2 { margin:12px 0 9px; font-family:"Songti SC",serif; font-size:23px; line-height:1.45; letter-spacing:.06em; }
.travel-hero-copy p { max-width:170px; margin:0; color:#cce8df; font-size:9px; line-height:1.55; }
.travel-scene { position:relative; align-self:stretch; }
.travel-scene > svg { position:absolute; z-index:3; right:4px; top:21px; width:35px; height:35px; color:#ffdf91; transform:rotate(-6deg); }
.travel-scene b { position:absolute; right:17px; bottom:19px; width:46px; height:46px; border:1px solid rgba(255,255,255,.32); border-radius:50%; }
.mountain { position:absolute; bottom:7px; clip-path:polygon(50% 0,100% 100%,0 100%); }
.mountain-back { right:-12px; width:118px; height:72px; background:rgba(177,218,195,.55); }
.mountain-front { right:37px; width:87px; height:57px; background:rgba(22,85,79,.72); }
.display-only-badge { display:flex; min-height:51px; margin-top:12px; padding:10px 13px; align-items:center; gap:9px; color:#2b6c68; border:1px solid #cfe7e2; border-radius:15px; background:#edf8f5; }
.display-only-badge svg { width:19px; height:19px; flex:0 0 auto; }
.display-only-badge span { font-size:9px; line-height:1.5; }
.display-only-badge b { display:block; font-size:10px; }
.travel-action { background:linear-gradient(135deg,#217a7d,#47a28f); box-shadow:0 10px 20px rgba(31,119,116,.2); }
.journey-stats, .gallery-stats { display:flex; margin-top:13px; padding:15px 8px; align-items:center; justify-content:space-around; border-radius:17px; background:#fff; }
.journey-stats div, .gallery-stats div { display:flex; flex:1; flex-direction:column; align-items:center; gap:2px; }
.journey-stats strong, .gallery-stats strong { font-size:18px; }
.journey-stats span, .gallery-stats span { color:var(--muted); font-size:8px; }
.journey-stats > i, .gallery-stats > i { width:1px; height:25px; background:var(--line); }
.journey-feature { display:grid; padding:12px; grid-template-columns:112px 1fr; gap:14px; border-radius:20px; background:#fff; }
.journey-cover { position:relative; display:flex; min-height:155px; padding:14px; flex-direction:column; justify-content:space-between; overflow:hidden; color:#fff; border-radius:15px; }
.journey-cover::before { content:""; position:absolute; left:-20px; right:-20px; bottom:-36px; height:100px; border-radius:50% 50% 0 0; background:rgba(24,101,94,.72); transform:rotate(-8deg); }
.coast-cover { background:linear-gradient(160deg,#9edbd2,#3d94a1 60%,#236c78); }
.journey-cover span { position:relative; z-index:1; font-family:Georgia,serif; font-size:19px; line-height:1.05; letter-spacing:.06em; }
.journey-cover svg { position:relative; z-index:1; width:29px; height:29px; align-self:flex-end; color:#ffe08f; }
.journey-feature-body { display:flex; min-width:0; padding:4px 0; flex-direction:column; }
.journey-status { align-self:flex-start; padding:4px 6px; color:#287f87; border-radius:6px; background:#e8f6f5; font-size:7px; font-weight:750; }
.journey-feature h3 { margin:9px 0 7px; font-size:14px; }
.journey-feature p { display:flex; align-items:center; gap:5px; margin:0 0 5px; color:var(--muted); font-size:8px; }
.journey-feature p svg { width:12px; }
.avatar-row { display:flex; margin-top:auto; align-items:center; }
.avatar-row i, .avatar-row b { display:grid; width:25px; height:25px; margin-right:-5px; place-items:center; color:#fff; border:2px solid #fff; border-radius:50%; background:#4e928c; font-size:7px; font-style:normal; }
.avatar-row i:nth-child(2) { background:#db7b55; }
.avatar-row i:nth-child(3) { background:#677fb6; }
.avatar-row i:nth-child(4) { background:#9a6eae; }
.avatar-row b { color:#47726f; background:#e1f0ec; }
.journey-albums { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.journey-album { padding:0; overflow:hidden; text-align:left; border:0; border-radius:18px; background:#fff; }
.album-visual { position:relative; display:grid; height:110px; place-items:center; overflow:hidden; }
.album-visual::before, .album-visual::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.2); }
.album-visual::before { width:110px; height:110px; right:-35px; top:-45px; }
.album-visual::after { width:70px; height:70px; left:-25px; bottom:-30px; }
.album-visual svg { position:relative; z-index:1; width:40px; height:40px; }
.ancient-album .album-visual { color:#704b35; background:linear-gradient(145deg,#e9c4a3,#c68d64); }
.nature-album .album-visual { color:#276f64; background:linear-gradient(145deg,#b9dfcd,#6fb19c); }
.journey-album > div { display:flex; padding:11px 12px 13px; flex-direction:column; }
.journey-album b { font-size:11px; }
.journey-album small { margin-top:3px; color:var(--muted); font-size:8px; }
.journey-story { overflow:hidden; border-radius:20px; background:#fff; }
.journey-story-art { position:relative; height:142px; overflow:hidden; background:linear-gradient(180deg,#f5c985 0%,#dd9f6e 53%,#6f806e 54%,#385b57 100%); }
.story-sun { position:absolute; right:36px; top:24px; width:34px; height:34px; border-radius:50%; background:#ffe8a5; box-shadow:0 0 28px rgba(255,232,165,.55); }
.story-road { position:absolute; left:50%; bottom:-33px; width:105px; height:120px; transform:translateX(-50%); clip-path:polygon(40% 0,60% 0,100% 100%,0 100%); background:#d6c3a3; opacity:.75; }
.story-figures { position:absolute; left:50%; bottom:29px; display:flex; gap:13px; transform:translateX(-50%); }
.story-figures i { position:relative; width:13px; height:32px; border-radius:8px 8px 4px 4px; background:#273e3e; }
.story-figures i::before { content:""; position:absolute; left:1px; top:-10px; width:11px; height:11px; border-radius:50%; background:#273e3e; }
.journey-story-body { padding:16px; }
.journey-story-body > span { color:#287f87; font-size:8px; font-weight:750; }
.journey-story-body h3 { margin:7px 0; font-family:"Songti SC",serif; font-size:14px; line-height:1.55; }
.journey-story-body p { margin-bottom:8px; color:#6c6b70; font-size:10px; font-style:italic; }
.journey-story-body small { color:var(--muted); font-size:8px; }
.travel-boundary, .gallery-safety { display:flex; gap:10px; margin-top:14px; padding:14px; border-radius:17px; }
.travel-boundary { color:#336b66; background:#edf8f5; }
.travel-boundary > svg, .gallery-safety > svg { width:21px; height:21px; flex:0 0 auto; }
.travel-boundary b, .gallery-safety b { font-size:10px; }
.travel-boundary p, .gallery-safety p { margin:4px 0 0; font-size:8px; line-height:1.6; }
.gallery-link-card { display:flex; width:100%; min-height:72px; margin-top:12px; padding:12px; align-items:center; gap:11px; text-align:left; border:1px solid var(--line); border-radius:17px; background:#fff; }
.gallery-link-card > span { display:grid; width:41px; height:41px; place-items:center; color:#a97027; border-radius:13px; background:#fff4df; }
.gallery-link-card > div { display:flex; flex:1; flex-direction:column; }
.gallery-link-card b { font-size:11px; }
.gallery-link-card small { margin-top:3px; color:var(--muted); font-size:8px; }
.gallery-link-card > svg { width:15px; color:#aaa; }

/* Team gallery */
.gallery-hero { position:relative; display:grid; min-height:166px; padding:23px; grid-template-columns:1fr 105px; overflow:hidden; color:#fff; border-radius:23px; background:linear-gradient(135deg,#78552c,#b57a32 58%,#d4a454); }
.gallery-hero > div:first-child { position:relative; z-index:2; }
.gallery-hero > div > span { color:#f3d8a6; font-size:8px; font-weight:750; letter-spacing:.16em; }
.gallery-hero h2 { margin:12px 0 8px; font-family:"Songti SC",serif; font-size:21px; line-height:1.45; letter-spacing:.05em; }
.gallery-hero p { margin:0; color:#f4dfbd; font-size:9px; }
.gallery-hero-stack { position:relative; }
.gallery-hero-stack i { position:absolute; display:grid; width:67px; height:86px; place-items:center; border:4px solid rgba(255,255,255,.86); border-radius:6px; background:#d7bd91; box-shadow:0 6px 14px rgba(71,46,18,.2); }
.gallery-hero-stack i:nth-child(1) { right:17px; top:11px; transform:rotate(-10deg); background:linear-gradient(150deg,#88c2b5,#4a807a); }
.gallery-hero-stack i:nth-child(2) { right:-1px; top:27px; transform:rotate(9deg); background:linear-gradient(150deg,#f0c58d,#b76b4d); }
.gallery-hero-stack i:nth-child(3) { right:14px; top:35px; color:#fff; background:linear-gradient(150deg,#7086ac,#4c5d7d); }
.gallery-hero-stack svg { width:27px; height:27px; }
.gallery-action { background:linear-gradient(135deg,#a86e26,#ca943f); box-shadow:0 10px 20px rgba(168,110,38,.2); }
.photo-points-guide { display:grid; margin-top:12px; grid-template-columns:repeat(3,1fr); gap:7px; }
.photo-points-guide > div { display:flex; min-height:91px; padding:11px 8px; flex-direction:column; border-radius:15px; background:#fff; }
.photo-points-guide span { color:var(--muted); font-size:8px; }
.photo-points-guide b { margin:7px 0 4px; color:#a97027; font-size:18px; }
.photo-points-guide small { margin-top:auto; color:#89868b; font-size:7px; line-height:1.4; }
.photo-limit-note { margin:9px 2px 0; color:var(--muted); font-size:8px; line-height:1.5; }
.gallery-filters { margin-top:18px; }
.photo-wall { display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:dense; gap:9px; align-items:start; }
.photo-card { height:171px; overflow:hidden; border-radius:17px; background:#ddd; }
.photo-card.photo-tall { height:232px; grid-row:span 2; }
.photo-card > button { position:relative; width:100%; height:100%; padding:0; overflow:hidden; border:0; background:transparent; }
.scene-opening { background:linear-gradient(155deg,#f1d39c,#c5875a 47%,#556f67); }
.scene-reading { background:linear-gradient(155deg,#b9a9d7,#78679e 52%,#4c4167); }
.scene-hiking { background:linear-gradient(160deg,#a9d7d6,#69a39f 50%,#375f5a); }
.scene-training { background:linear-gradient(155deg,#aabbd9,#6e82ad 50%,#3b4a68); }
.scene-clean { background:linear-gradient(155deg,#b9ddd0,#71aa94 52%,#3c6758); }
.scene-celebrate { background:linear-gradient(155deg,#f2c58e,#cf7a5c 52%,#805044); }
.photo-card > button::after { content:""; position:absolute; inset:42% 0 0; background:linear-gradient(transparent,rgba(20,23,29,.82)); }
.scene-people { position:absolute; left:50%; bottom:47px; z-index:1; display:flex; gap:8px; transform:translateX(-50%); }
.scene-people i { position:relative; width:21px; height:44px; border-radius:11px 11px 5px 5px; background:rgba(37,47,51,.78); }
.scene-people i::before { content:""; position:absolute; left:2px; top:-15px; width:17px; height:17px; border-radius:50%; background:#d9a17d; box-shadow:inset 0 4px 0 rgba(54,47,49,.65); }
.scene-people i:nth-child(2) { height:49px; background:rgba(69,79,105,.86); }
.scene-people i:nth-child(3) { background:rgba(117,70,63,.82); }
.scene-sun { position:absolute; right:20px; top:20px; width:32px; height:32px; border-radius:50%; background:#ffe5a0; box-shadow:0 0 26px rgba(255,229,160,.55); }
.scene-counter { position:absolute; left:0; right:0; bottom:39px; height:42px; background:rgba(243,224,195,.72); }
.scene-table { position:absolute; left:12px; right:12px; bottom:42px; height:24px; border-radius:50%; background:#b89669; }
.scene-mountain { position:absolute; left:-10px; right:-10px; bottom:36px; height:92px; clip-path:polygon(0 100%,24% 31%,43% 76%,67% 6%,100% 100%); background:rgba(36,93,83,.65); }
.scene-board { position:absolute; left:16px; right:16px; top:22px; height:65px; border:5px solid rgba(239,226,198,.8); background:rgba(246,237,219,.42); }
.scene-spark { position:absolute; right:19px; top:22px; color:#eaf6d2; }
.scene-spark svg { width:33px; height:33px; }
.scene-confetti { position:absolute; inset:14px 18px auto; height:70px; background:radial-gradient(circle at 10% 20%,#ffe58c 0 3px,transparent 4px),radial-gradient(circle at 45% 8%,#b6e5dc 0 3px,transparent 4px),radial-gradient(circle at 82% 30%,#f7a4a4 0 3px,transparent 4px),radial-gradient(circle at 62% 70%,#fff 0 2px,transparent 3px); }
.photo-overlay { position:absolute; z-index:3; left:0; right:0; bottom:0; display:flex; padding:13px 12px; flex-direction:column; color:#fff; text-align:left; }
.photo-overlay em { margin-bottom:5px; color:#ffe2a7; font-size:7px; font-style:normal; font-weight:750; }
.photo-overlay b { font-size:11px; line-height:1.4; }
.photo-overlay small { margin-top:3px; color:rgba(255,255,255,.72); font-size:7px; }
.gallery-safety { color:#775626; background:#fff4df; }

/* Shop */
.shop-balance { position: relative; display: flex; min-height: 145px; padding: 22px; color: #fff; overflow: hidden; border-radius: 23px; background: linear-gradient(135deg,#e7482d,#f47b3e); }
.shop-balance > div:first-child { position: relative; z-index: 1; }
.shop-balance span { color: rgba(255,255,255,.78); font-size: 10px; }
.shop-balance strong { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; font-size: 30px; }
.shop-balance strong i { display: grid; place-items: center; width: 24px; height: 24px; color: var(--brand-deep); border-radius: 50%; background: #ffe198; font-size: 10px; font-style: normal; }
.shop-balance p { margin: 0; color: rgba(255,255,255,.7); font-size: 9px; }
.shop-coin { position: absolute; right: -13px; top: -13px; display: grid; width: 140px; height: 140px; place-items: center; color: rgba(255,236,170,.42); border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.shop-coin svg { width: 77px; height: 77px; stroke-width: 1; }
.shop-filters { margin-top: 16px; }
.reward-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.reward-card { overflow: hidden; border-radius: 19px; background: #fff; }
.reward-art { position: relative; display: grid; height: 142px; place-items: center; overflow: hidden; }
.sticker-art { color:#c67813; background:linear-gradient(145deg,#fff7dc,#ffe9a8); }
.sticker-art svg { width:62px; height:62px; }
.cup-art { color: #784836; background: linear-gradient(145deg,#f5eee5,#e7dacb); }
.cup-art::before { content:""; position:absolute; width:57px; height:84px; border-radius:7px 7px 14px 14px; background:linear-gradient(90deg,#d86847,#ef9875); box-shadow: 6px 8px 13px rgba(91,53,37,.15); }
.cup-art::after { content:""; position:absolute; width:61px; height:7px; margin-top:-80px; border-radius:5px; background:#5c4b43; }
.cup-art span { position:relative; z-index:1; margin-top:4px; color:#fff; text-align:center; font-size:8px; font-weight:800; }
.book-art { color: var(--green); background: #e8f1ec; }
.book-art svg { width: 62px; height: 62px; }
.badge-art { color: var(--purple); background: #eeeafa; }
.badge-art svg { width: 65px; height: 65px; }
.ticket-art { color: var(--blue); background: #e9f2ff; }
.ticket-art svg { width: 70px; height: 70px; }
.camera-art { color:#a97027; background:#fff1d9; }
.camera-art svg { width:66px; height:66px; }
.reward-info { padding: 13px; }
.stock-tag { display:inline-block; padding:3px 5px; color:var(--brand); border-radius:5px; background:var(--brand-soft); font-size:7px; font-weight:750; }
.green-stock { color:var(--green); background:var(--green-soft); }
.purple-stock { color:var(--purple); background:var(--purple-soft); }
.blue-stock { color:var(--blue); background:var(--blue-soft); }
.teal-stock { color:#287f87; background:#e8f6f5; }
.gold-stock { color:#a97027; background:#fff4df; }
.reward-info h3 { margin: 7px 0 5px; font-size: 12px; }
.reward-info p { margin: 0 0 10px; color:var(--brand); font-size:9px; }
.reward-info p b { font-size:14px; }
.reward-info button { width:100%; min-height:34px; color:var(--brand); border:1px solid #f3b4a3; border-radius:10px; background:#fff; font-size:10px; font-weight:700; }
.reward-card.is-unavailable { opacity:.68; }
.reward-card.is-unavailable .reward-art { filter:grayscale(.25); }
.reward-info button:disabled { color:#8f959e; border-color:#dfe2e6; background:#f3f4f6; cursor:not-allowed; }
.shop-policy-note { display:flex; align-items:flex-start; gap:7px; margin:12px 2px 0; color:var(--muted); font-size:8px; line-height:1.55; }
.shop-policy-note svg { flex:0 0 auto; width:12px; height:12px; margin-top:1px; color:var(--brand); }

/* Honor & profile */
.honor-profile { display:flex; align-items:center; gap:12px; padding:18px; color:#fff; border-radius:21px 21px 0 0; background:linear-gradient(135deg,#252a37,#394050); }
.avatar-profile { width:54px; height:54px; border:2px solid rgba(255,255,255,.5); border-radius:18px; background:linear-gradient(135deg,#fc8b5e,#df4930); font-size:18px; }
[data-user-avatar] { overflow:hidden; }
[data-user-avatar] img { display:block; width:100%; height:100%; object-fit:cover; }
[data-user-avatar].has-avatar { color:transparent; background:#e9edf2; }
.honor-profile > div:nth-child(2) { flex:1; }
.honor-profile h2 { font-size:17px; }
.honor-profile p { margin:2px 0; color:#c6cad3; font-size:9px; }
.honor-profile span { color:#9299a7; font-size:8px; }
.level-medal { display:flex; flex-direction:column; align-items:center; color:#ffcc67; }
.level-medal svg { width:28px; height:28px; }
.level-medal b { font-size:9px; }
.honor-summary { display:grid; padding:15px; grid-template-columns:repeat(3,1fr); border-radius:0 0 21px 21px; background:#fff; }
.honor-summary div { display:flex; flex-direction:column; align-items:center; }
.honor-summary div + div { border-left:1px solid var(--line); }
.honor-summary strong { font-size:17px; }
.honor-summary span { margin-top:2px; color:var(--muted); font-size:8px; }
.badge-shelf { display:grid; padding:17px 11px; grid-template-columns:repeat(3,1fr); gap:15px 7px; border-radius:20px; background:#fff; }
.badge-item { display:flex; flex-direction:column; align-items:center; text-align:center; }
.badge-visual { display:grid; place-items:center; width:51px; height:58px; margin-bottom:7px; color:#bbb7c2; clip-path:polygon(50% 0,93% 22%,93% 72%,50% 100%,7% 72%,7% 22%); background:#efedf1; }
.badge-visual svg { width:24px; }
.red-badge { color:#fff; background:linear-gradient(135deg,#ed746b,#cf3f4d); }
.blue-badge { color:#fff; background:linear-gradient(135deg,#68a4e4,#376dc6); }
.purple-badge { color:#fff; background:linear-gradient(135deg,#9a82dc,#6c53ba); }
.teal-badge { color:#fff; background:linear-gradient(135deg,#60b7ac,#287f87); }
.gold-badge { color:#fff; background:linear-gradient(135deg,#d3a45c,#a97027); }
.badge-item b { font-size:8px; }
.badge-item small { margin-top:3px; color:var(--muted); font-size:7px; line-height:1.3; }
.locked-badge { opacity:.55; }
.monthly-highlights { position:relative; padding:5px 0 5px; }
.monthly-highlights::before { content:""; position:absolute; left:56px; top:13px; bottom:13px; width:1px; background:#ddd9d2; }
.monthly-highlights article { position:relative; display:grid; min-height:68px; grid-template-columns:43px 11px 1fr; gap:8px; align-items:start; }
.monthly-highlights time { padding-top:2px; color:var(--muted); font-size:9px; }
.highlight-dot { position:relative; z-index:1; width:9px; height:9px; margin-top:3px; border:2px solid var(--bg); border-radius:50%; }
.red-dot { background:var(--brand); }
.purple-dot { background:var(--purple); }
.blue-dot { background:var(--blue); }
.gold-dot { background:#b8792f; }
.monthly-highlights b { font-size:11px; }
.monthly-highlights p { margin:4px 0 0; color:var(--muted); font-size:8px; }
.profile-card { display:flex; align-items:center; gap:12px; padding:18px; border-radius:20px; background:#fff; }
.profile-card > div:nth-child(2) { flex:1; }
.profile-card h2 { font-size:17px; }
.profile-card p { margin:2px 0; color:var(--muted); font-size:9px; }
.profile-card span { color:#a2a3aa; font-size:8px; }
.profile-card > button { display:grid; width:34px; height:34px; place-items:center; border:0; background:transparent; color:var(--muted); }
.profile-card-button { width:100%; text-align:left; border:0; }
.profile-card-button > svg { width:16px; margin-left:auto; color:#aaa; }
.account-points { display:grid; margin-top:12px; padding:18px; grid-template-columns:1fr auto; border-radius:20px; color:#fff; background:linear-gradient(135deg,#e84a2e,#f57b42); }
.account-points > div:first-child { display:flex; flex-direction:column; }
.account-points span { color:rgba(255,255,255,.75); font-size:9px; }
.account-points strong { margin-top:4px; font-size:27px; }
.account-points > button { display:flex; align-items:center; gap:3px; align-self:center; color:#fff; border:0; background:transparent; font-size:10px; }
.account-points > button svg { width:13px; }
.point-expiry { grid-column:1/-1; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.17); color:rgba(255,255,255,.75); font-size:8px; }
.point-expiry svg { width:12px; vertical-align:-2px; }
.menu-group { margin-top:12px; overflow:hidden; border-radius:19px; background:#fff; }
.menu-group > button { display:flex; width:100%; min-height:66px; padding:10px 14px; align-items:center; gap:11px; text-align:left; border:0; background:#fff; }
.menu-group > button + button { border-top:1px solid var(--line); }
.menu-group > button > div { display:flex; flex:1; flex-direction:column; }
.menu-group b { font-size:12px; }
.menu-group small { margin-top:3px; color:var(--muted); font-size:8px; }
.menu-group > button > svg { width:15px; color:#aaa; }
.menu-icon { display:grid; width:36px; height:36px; place-items:center; border-radius:11px; font-size:13px; font-weight:750; }
.menu-icon svg { width:18px; }
.orange-menu { color:var(--brand); background:var(--brand-soft); }
.red-menu { color:#d64a57; background:#fff0f1; }
.blue-menu { color:var(--blue); background:var(--blue-soft); }
.purple-menu { color:var(--purple); background:var(--purple-soft); }
.green-menu { color:var(--green); background:var(--green-soft); }
.teal-menu { color:#287f87; background:#e8f6f5; }
.gold-menu { color:#a97027; background:#fff4df; }
.navy-menu { color:#37465e; background:#edf1f6; }
.mint-menu { color:#287f87; background:#e8f6f5; }
.amber-menu { color:#a97027; background:#fff4df; }
.slate-menu { color:#536072; background:#edf1f6; font-size:18px; }
.version-note { margin:24px 0 0; color:#aaa; text-align:center; font-size:8px; }

/* Organization */
.org-hero { position:relative; display:grid; min-height:151px; padding:20px; grid-template-columns:48px 1fr; align-items:start; gap:12px; overflow:hidden; color:#fff; border-radius:23px; background:linear-gradient(135deg,#244c64,#2f7481 65%,#65a690); }
.org-hero::after { content:""; position:absolute; right:-44px; top:-70px; width:155px; height:155px; border:1px solid rgba(255,255,255,.17); border-radius:50%; box-shadow:0 0 0 30px rgba(255,255,255,.04); }
.org-hero-icon { position:relative; z-index:1; display:grid; width:48px; height:48px; place-items:center; color:#ffe09a; border-radius:15px; background:rgba(255,255,255,.13); }
.org-hero-icon svg { width:25px; height:25px; }
.org-hero > div:nth-child(2) { position:relative; z-index:1; }
.org-hero > div:nth-child(2) > span { color:#bfe2df; font-size:8px; font-weight:750; letter-spacing:.14em; }
.org-hero h2 { margin:7px 0 4px; font-size:19px; }
.org-hero p { margin:0; color:#c7e2df; font-size:9px; }
.org-hero > button { position:absolute; z-index:2; left:80px; bottom:17px; display:flex; min-height:34px; padding:0 10px; align-items:center; gap:3px; color:#fff; border:1px solid rgba(255,255,255,.24); border-radius:10px; background:rgba(18,74,77,.22); font-size:9px; }
.org-hero > button svg { width:12px; }
.org-summary { display:flex; margin-top:12px; padding:15px 8px; align-items:center; justify-content:space-around; border-radius:17px; background:#fff; }
.org-summary div { display:flex; flex:1; flex-direction:column; align-items:center; gap:2px; }
.org-summary strong { font-size:18px; }
.org-summary span { color:var(--muted); font-size:8px; }
.org-summary > i { width:1px; height:26px; background:var(--line); }
.org-scope-note { display:flex; gap:7px; margin:9px 2px 0; align-items:flex-start; color:#687884; font-size:8px; line-height:1.55; }
.org-scope-note svg { width:14px; height:14px; flex:0 0 auto; color:#2d837d; }
.org-breadcrumb { display:flex; min-height:43px; padding:9px 11px; align-items:center; gap:4px; overflow-x:auto; color:var(--muted); border:1px solid var(--line); border-radius:13px; background:#fff; white-space:nowrap; font-size:8px; scrollbar-width:none; }
.org-breadcrumb::-webkit-scrollbar { display:none; }
.org-breadcrumb svg { width:11px; flex:0 0 auto; }
.org-breadcrumb strong { color:#287f87; }
.org-path-tree { position:relative; display:grid; gap:9px; margin:12px 0 0; padding:0; list-style:none; }
.org-path-tree::before { content:""; position:absolute; left:27px; top:47px; bottom:47px; width:1px; background:#cadfdc; }
.org-path-tree li { position:relative; }
.org-path-tree button { position:relative; display:flex; width:100%; min-height:76px; padding:10px 12px; align-items:center; gap:10px; text-align:left; border:1px solid var(--line); border-radius:17px; background:#fff; }
.org-path-tree button.is-selected { border-color:#a9d1ca; background:#f1faf7; box-shadow:0 7px 18px rgba(38,112,103,.08); }
.org-node-icon { position:relative; z-index:1; display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; color:#4b637c; border:4px solid var(--bg); border-radius:12px; background:#edf1f6; }
.org-node-icon svg { width:16px; height:16px; }
.south-node { color:#7060ad; background:#f2efff; }
.region-node { color:#3377cd; background:#edf5ff; }
.city-node { color:#b46b30; background:#fff3e9; }
.store-node { color:#287f87; background:#dff2ee; }
.org-path-tree button > div { display:flex; min-width:0; flex:1; flex-direction:column; }
.org-path-tree small { color:var(--muted); font-size:7px; }
.org-path-tree b { margin:3px 0; font-size:10px; }
.org-path-tree p { margin:0; overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:8px; }
.org-path-tree button > svg { width:14px; color:#aaa; }
.org-path-tree button.is-selected > svg { color:#287f87; }
.team-role-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.team-role-grid > div { display:flex; min-height:127px; padding:11px 8px; flex-direction:column; align-items:center; text-align:center; border-radius:16px; background:#fff; }
.role-icon { display:grid; width:37px; height:37px; margin-bottom:7px; place-items:center; border-radius:12px; }
.role-icon svg { width:18px; }
.manager-role { color:#b06d2c; background:#fff3e9; }
.lead-role { color:#3976df; background:#edf5ff; }
.partner-role { color:#2e8f72; background:#eaf8f2; }
.team-role-grid b { max-width:100%; font-size:9px; line-height:1.35; }
.team-role-grid strong { margin:5px 0 3px; font-size:18px; }
.team-role-grid small { color:var(--muted); font-size:7px; line-height:1.4; }
.org-role-directory { margin-top:10px; padding:15px; border-radius:18px; background:#fff; }
.org-role-head { display:flex; align-items:center; gap:10px; }
.org-role-head > span { display:grid; width:38px; height:38px; place-items:center; color:#765d2c; border-radius:12px; background:#fff3d8; }
.org-role-head svg { width:19px; height:19px; }
.org-role-head > div { display:flex; flex-direction:column; }
.org-role-head b { font-size:11px; }
.org-role-head small { margin-top:3px; color:var(--muted); font-size:8px; }
.org-role-list { display:grid; margin-top:13px; grid-template-columns:1fr 1fr; gap:7px; }
.org-role-list p { display:flex; min-width:0; min-height:52px; margin:0; padding:9px; flex-direction:column; justify-content:center; border:1px solid var(--line); border-radius:12px; background:#fbfaf8; }
.org-role-list span { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:7px; }
.org-role-list strong { margin-top:5px; font-size:10px; }
.store-role-catalog { margin-top:10px; padding:15px; border-radius:18px; background:linear-gradient(135deg,#2f3949,#465366); color:#fff; }
.store-role-catalog > div { display:flex; flex-direction:column; }
.store-role-catalog .kicker { color:#aeb9c7; font-size:7px; }
.store-role-catalog h3 { margin:4px 0 2px; font-size:14px; }
.store-role-catalog p { margin:0; color:#c7cfd9; font-size:8px; }
.store-role-catalog ul { display:flex; margin:12px 0 0; padding:0; flex-wrap:wrap; gap:6px; list-style:none; }
.store-role-catalog li { padding:6px 8px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.08); font-size:7px; }
.member-section-title { margin-top:18px; }
.member-directory { margin-top:10px; overflow:hidden; border-radius:18px; background:#fff; }
.member-directory > button { display:flex; width:100%; min-height:68px; padding:10px 13px; align-items:center; gap:10px; text-align:left; border:0; background:#fff; }
.member-directory > button + button { border-top:1px solid var(--line); }
.member-directory .avatar { width:36px; height:36px; border-radius:12px; font-size:10px; }
.member-directory button > div { display:flex; min-width:0; flex:1; flex-direction:column; }
.member-directory b { font-size:10px; }
.member-directory small { margin-top:3px; color:var(--muted); font-size:8px; }
.member-directory .member-status { padding:4px 6px; color:#287f87; border-radius:6px; background:#e8f6f5; font-size:7px; }
.member-directory button > svg { width:13px; color:#aaa; }
.organization-privacy { display:flex; gap:10px; margin-top:12px; padding:14px; color:#49617d; border-radius:17px; background:#edf3fa; }
.organization-privacy > svg { width:20px; height:20px; flex:0 0 auto; }
.organization-privacy b { font-size:10px; }
.organization-privacy p { margin:4px 0 0; font-size:8px; line-height:1.55; }

/* Personnel record */
.personnel-hero { display:flex; min-height:137px; padding:20px; align-items:center; gap:15px; color:#fff; border-radius:22px 22px 0 0; background:linear-gradient(135deg,#252b3a,#3a4355); }
.personnel-avatar { position:relative; flex:0 0 auto; padding:0; color:#fff; border:0; background:transparent; cursor:pointer; }
.personnel-avatar > span { display:grid; width:65px; height:65px; place-items:center; border:2px solid rgba(255,255,255,.5); border-radius:20px; background:linear-gradient(135deg,#fc8b5e,#df4930); font-size:21px; font-weight:750; }
.personnel-avatar > i { position:absolute; right:-5px; bottom:-5px; display:grid; width:23px; height:23px; place-items:center; color:#fff; border:3px solid #303746; border-radius:50%; background:var(--green); }
.personnel-avatar > i svg { width:12px; }
.personnel-avatar:focus-visible { outline:3px solid rgba(255,255,255,.72); outline-offset:4px; border-radius:22px; }
.personnel-hero > div:last-child { display:flex; flex-direction:column; }
.status-badge { align-self:flex-start; padding:4px 7px; color:#9de0c4; border-radius:6px; background:rgba(52,150,111,.18); font-size:7px; font-weight:750; }
.personnel-hero h2 { margin:7px 0 3px; font-size:19px; }
.personnel-hero p { margin:0; color:#c7cbd3; font-size:9px; }
.personnel-hero small { margin-top:5px; color:#939aa8; font-size:8px; }
.profile-completeness { padding:14px 17px 16px; border-radius:0 0 20px 20px; background:#fff; }
.profile-completeness > div:first-child { display:flex; justify-content:space-between; font-size:9px; }
.profile-completeness strong { color:var(--green); }
.profile-completeness .mini-progress { margin:9px 0 7px; }
.profile-completeness .mini-progress span { background:linear-gradient(90deg,#2e9c76,#67bf9d); }
.profile-completeness p { margin:0; color:var(--muted); font-size:8px; }
.personnel-section { margin-top:13px; padding:16px; border-radius:20px; background:#fff; }
.personnel-section-head { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.personnel-section-icon { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border-radius:12px; }
.personnel-section-icon svg { width:19px; }
.id-section { color:#445673; background:#edf1f6; }
.job-section { color:#287f87; background:#e8f6f5; }
.skill-section { color:#b3712d; background:#fff3e9; }
.growth-section { color:#6e57bf; background:#f2efff; }
.personnel-section-head > div { display:flex; flex:1; flex-direction:column; }
.personnel-section-head .kicker { font-size:7px; }
.personnel-section-head h2 { font-size:14px; }
.personnel-section-head > button { min-height:34px; padding:0 8px; color:var(--muted); border:1px solid var(--line); border-radius:9px; background:#fff; font-size:8px; }
.info-list { margin:0; }
.info-list > div { display:grid; min-height:44px; padding:9px 0; grid-template-columns:92px 1fr; align-items:center; gap:10px; }
.info-list > div + div { border-top:1px solid var(--line); }
.info-list dt { color:var(--muted); font-size:9px; }
.info-list dd { margin:0; text-align:right; font-size:10px; line-height:1.45; }
.inline-status { padding:4px 7px; color:#2e8a6d; border-radius:6px; background:#eaf8f2; font-size:7px; font-weight:750; }
.certification-list { display:grid; gap:9px; }
.certification-list article { display:flex; min-height:62px; padding:10px; align-items:center; gap:9px; border:1px solid var(--line); border-radius:14px; }
.cert-icon { display:grid; width:33px; height:33px; flex:0 0 auto; place-items:center; border-radius:10px; }
.cert-icon svg { width:16px; }
.certified { color:#2e8f72; background:#eaf8f2; }
.training { color:#3976df; background:#edf5ff; }
.certification-list article > div { display:flex; min-width:0; flex:1; flex-direction:column; }
.certification-list b { font-size:9px; }
.certification-list small { margin-top:3px; color:var(--muted); font-size:7px; }
.certification-list em { color:#2e8f72; font-size:7px; font-style:normal; font-weight:750; }
.personnel-growth-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.personnel-growth-grid div { display:flex; min-height:70px; padding:11px; flex-direction:column; border-radius:14px; background:#f8f7f4; }
.personnel-growth-grid strong { font-size:18px; }
.personnel-growth-grid span { margin-top:auto; color:var(--muted); font-size:8px; }
.profile-rank-summary { display:flex; width:100%; min-height:65px; margin-top:9px; padding:10px 11px; align-items:center; gap:9px; text-align:left; border:1px solid #e0d9f2; border-radius:14px; background:#f7f4ff; }
.profile-rank-summary > span { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; color:#6e57bf; border-radius:11px; background:#ebe5fb; }
.profile-rank-summary > span svg { width:18px; }
.profile-rank-summary > div { display:flex; flex:1; flex-direction:column; }
.profile-rank-summary b { font-size:10px; }
.profile-rank-summary small { margin-top:3px; color:#7c7392; font-size:8px; }
.profile-rank-summary > svg { width:13px; color:#8f84aa; }
.privacy-record { margin-top:13px; padding:16px; color:#fff; border-radius:20px; background:linear-gradient(135deg,#344355,#475e73); }
.privacy-record-head { display:flex; align-items:center; gap:10px; }
.privacy-record-head > svg { width:24px; height:24px; color:#9bd9c3; }
.privacy-record-head .kicker { color:#a9b7c5; font-size:7px; }
.privacy-record-head h2 { font-size:14px; }
.privacy-record ul { margin:14px 0; padding:0; list-style:none; }
.privacy-record li { display:flex; min-height:37px; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid rgba(255,255,255,.1); font-size:8px; }
.privacy-record li span { color:#bdc8d2; }
.privacy-record li strong { text-align:right; font-size:8px; }
.privacy-record > button { display:flex; width:100%; min-height:41px; padding:0 11px; align-items:center; justify-content:space-between; color:#fff; border:1px solid rgba(255,255,255,.17); border-radius:11px; background:rgba(255,255,255,.07); font-size:8px; }
.privacy-record > button svg { width:12px; }
.privacy-record > p { margin:11px 0 0; color:#aebcc9; font-size:7px; line-height:1.55; }

/* Sheets and forms */
.sheet-backdrop { position:fixed; z-index:40; inset:0; background:rgba(18,20,26,.45); backdrop-filter:blur(2px); animation:fadeIn .2s ease; }
.bottom-sheet { position:fixed; z-index:41; left:50%; bottom:0; width:min(100%,430px); max-height:88dvh; padding:8px 18px calc(22px + var(--safe-bottom)); overflow-y:auto; transform:translateX(-50%); border-radius:26px 26px 0 0; background:#fff; box-shadow:0 -15px 40px rgba(18,20,26,.17); animation:sheetUp .28s cubic-bezier(.2,.8,.2,1); }
.sheet-handle { width:38px; height:4px; margin:1px auto 17px; border-radius:99px; background:#d8d5d0; }
.sheet-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.sheet-header .kicker { display:block; margin-bottom:5px; }
.sheet-header h2 { font-size:20px; }
.sheet-header .icon-button { width:36px; height:36px; color:var(--muted); font-size:22px; }
.create-options { display:grid; gap:9px; }
.create-options > button { display:flex; min-height:72px; padding:10px 12px; align-items:center; text-align:left; gap:11px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.create-icon { display:grid; width:43px; height:43px; place-items:center; flex:0 0 auto; border-radius:13px; }
.create-icon svg { width:21px; }
.create-flower { color:#d94b58; background:#fff0f1; }
.create-ranking { color:var(--orange); background:#fff3e9; }
.create-rules { color:var(--blue); background:var(--blue-soft); }
.create-reading { color:var(--purple); background:var(--purple-soft); }
.create-travel { color:#287f87; background:#e8f6f5; }
.create-gallery { color:#a97027; background:#fff4df; }
.create-options button > div { display:flex; flex:1; flex-direction:column; }
.create-options b { font-size:12px; }
.create-options small { margin-top:3px; color:var(--muted); font-size:8px; }
.create-options em { color:var(--brand); font-size:8px; font-style:normal; font-weight:750; }
.create-options button > svg { width:14px; color:#aaa; }
.submission-form { display:grid; gap:16px; }
.submission-form > label { display:grid; gap:7px; font-size:11px; font-weight:700; }
.submission-form label > small { float:right; color:var(--muted); font-size:8px; font-weight:400; }
.submission-form input[type="text"], .submission-form textarea, .submission-form select { width:100%; min-height:46px; padding:12px; color:var(--ink); border:1px solid var(--line); border-radius:13px; background:#faf9f7; font-size:11px; outline:none; }
.submission-form textarea { min-height:88px; resize:vertical; line-height:1.6; }
.submission-form input:focus, .submission-form textarea:focus, .submission-form select:focus { border-color:#ef947f; box-shadow:0 0 0 3px rgba(244,81,50,.09); }
.select-field { display:flex; width:100%; min-height:49px; padding:7px 11px; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:13px; background:#faf9f7; font-size:11px; }
.select-field > span { display:flex; align-items:center; gap:8px; }
.select-field .avatar { width:30px; height:30px; border-radius:10px; }
.select-field > svg { width:14px; color:var(--muted); }
.submission-form fieldset { margin:0; padding:0; border:0; }
.submission-form legend { margin-bottom:8px; font-size:11px; font-weight:700; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.choice-grid label { cursor:pointer; }
.choice-grid input { position:absolute; opacity:0; pointer-events:none; }
.choice-grid span { display:grid; min-height:41px; place-items:center; color:var(--muted); border:1px solid var(--line); border-radius:12px; background:#fff; font-size:10px; }
.choice-grid input:checked + span { color:var(--brand); border-color:#ef9d88; background:var(--brand-soft); font-weight:700; }
.form-tip { display:flex; align-items:flex-start; gap:6px; margin:-3px 0 0; color:var(--muted); font-size:8px; line-height:1.5; }
.form-tip svg { width:13px; flex:0 0 auto; color:var(--green); }
.upload-field { display:flex; min-height:62px; padding:10px 12px; align-items:center; gap:10px; text-align:left; color:var(--blue); border:1px dashed #a8c4e8; border-radius:14px; background:var(--blue-soft); }
.upload-field > svg { width:21px; }
.upload-field > svg:last-child { width:15px; margin-left:auto; }
.upload-field span { display:flex; flex-direction:column; color:var(--ink); }
.upload-field b { font-size:10px; }
.upload-field small { margin-top:2px; color:var(--muted); font-size:8px; }
.photo-drop { display:flex; min-height:118px; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--purple); border:1px dashed #b5a8df; border-radius:15px; background:var(--purple-soft); }
.photo-drop svg { width:27px; height:27px; }
.photo-drop b { color:var(--ink); font-size:11px; }
.photo-drop small { color:var(--muted); font-size:8px; }
.travel-photo-drop { color:#287f87; border-color:#9dcfc8; background:#edf8f5; }
.gallery-photo-drop { color:#a97027; border-color:#ddb97d; background:#fff8eb; }
.submission-quota { display:flex; min-height:54px; padding:10px 12px; align-items:center; gap:9px; color:#367765; border-radius:13px; background:#edf8f5; }
.submission-quota svg { width:17px; flex:0 0 auto; }
.submission-quota span { display:flex; flex-direction:column; }
.submission-quota b { font-size:10px; }
.submission-quota small { margin-top:2px; color:#6f9389; font-size:8px; }
.consent-row { display:flex !important; min-height:63px; padding:10px 11px; grid-template-columns:auto 1fr; align-items:flex-start; gap:9px !important; border:1px solid var(--line); border-radius:13px; background:#faf9f7; }
.consent-row input { width:18px; height:18px; margin:2px 0 0; flex:0 0 auto; accent-color:#287f87; }
.consent-row span { display:flex; flex-direction:column; }
.consent-row b { font-size:10px; }
.consent-row small { margin-top:3px; color:var(--muted); font-size:8px; font-weight:400; line-height:1.45; }
.switch-row { display:flex !important; min-height:54px; align-items:center; justify-content:space-between; }
.switch-row span { display:flex; flex-direction:column; }
.switch-row b { font-size:11px; }
.switch-row small { margin-top:2px; color:var(--muted); font-size:8px; font-weight:400; }
.switch-row input { appearance:none; width:42px; height:24px; padding:2px; border:0; border-radius:99px; background:#ddd; transition:.2s; }
.switch-row input::before { content:""; display:block; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.16); transition:.2s; }
.switch-row input:checked { background:var(--purple); }
.switch-row input:checked::before { transform:translateX(18px); }
.form-sheet .primary-action { margin-top:0; }
.avatar-sheet { padding-bottom:calc(26px + var(--safe-bottom)); }
.avatar-editor-preview { display:flex; padding:16px; align-items:center; gap:13px; border-radius:18px; background:#f7f6f2; }
.avatar-editor-preview > span { display:grid; width:76px; height:76px; flex:0 0 auto; place-items:center; color:#fff; border:3px solid #fff; border-radius:24px; background:linear-gradient(135deg,#fc8b5e,#df4930); box-shadow:0 8px 20px rgba(73,58,50,.12); font-size:24px; font-weight:750; }
.avatar-editor-preview > div { display:flex; min-width:0; flex-direction:column; }
.avatar-editor-preview b { font-size:15px; }
.avatar-editor-preview small { margin-top:5px; color:var(--muted); font-size:8px; line-height:1.5; }
.avatar-editor-actions { display:grid; margin-top:12px; grid-template-columns:1.2fr 1fr; gap:8px; }
.avatar-editor-actions .primary-action { display:flex; min-height:46px; margin:0; align-items:center; justify-content:center; gap:6px; box-shadow:none; }
.avatar-editor-actions .primary-action svg { width:17px; height:17px; }
.secondary-avatar-action { min-height:46px; color:#555c67; border:1px solid var(--line); border-radius:14px; background:#fff; font-size:10px; font-weight:700; }
.avatar-editor-note { display:flex; margin:12px 0 0; padding:13px; align-items:flex-start; gap:9px; color:#416275; border-radius:15px; background:#edf5f7; }
.avatar-editor-note > svg { width:19px; height:19px; flex:0 0 auto; }
.avatar-editor-note span { display:flex; flex-direction:column; }
.avatar-editor-note b { font-size:9px; }
.avatar-editor-note small { margin-top:4px; color:#6f8794; font-size:7px; line-height:1.55; }

.dialog-card { position:fixed; z-index:43; left:50%; top:50%; width:min(calc(100% - 42px),360px); padding:24px; transform:translate(-50%,-50%); text-align:center; border-radius:23px; background:#fff; box-shadow:0 22px 70px rgba(19,22,29,.28); animation:dialogIn .22s ease; }
.dialog-icon { display:grid; width:54px; height:54px; margin:0 auto 13px; place-items:center; color:var(--brand); border-radius:18px; background:var(--brand-soft); }
.dialog-icon svg { width:27px; height:27px; }
.dialog-card h2 { font-size:19px; }
.dialog-card p { margin:8px 0 20px; color:var(--muted); font-size:11px; line-height:1.6; }
.dialog-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:9px; }
.dialog-actions button { min-height:44px; border-radius:13px; border:1px solid var(--line); background:#fff; font-size:11px; font-weight:700; }
.dialog-actions button:last-child { color:#fff; border-color:var(--brand); background:var(--brand); }
.toast { position:fixed; z-index:60; left:50%; bottom:calc(91px + var(--safe-bottom)); max-width:min(calc(100% - 46px),370px); padding:10px 14px; transform:translateX(-50%); color:#fff; border-radius:12px; background:rgba(30,33,42,.92); box-shadow:0 7px 25px rgba(0,0,0,.18); font-size:10px; text-align:center; animation:toastIn .2s ease; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes sheetUp { from { transform:translate(-50%,100%); } to { transform:translate(-50%,0); } }
@keyframes dialogIn { from { opacity:0; transform:translate(-50%,-46%) scale(.97); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,8px); } to { opacity:1; transform:translate(-50%,0); } }

@media (min-width: 600px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100dvh - 48px); border-radius: 30px; }
  .page { min-height: calc(100dvh - 48px); }
  .bottom-nav { bottom: 24px; border-radius: 0 0 30px 30px; }
  .bottom-sheet { bottom: 24px; border-radius: 26px; }
}

@media (max-width: 350px) {
  .page { padding-left:14px; padding-right:14px; }
  .module-grid { gap:8px; }
  .module-card { min-height:150px; padding:13px; }
  .honor-grid { grid-template-columns:repeat(2,1fr); }
  .reading-hero { grid-template-columns:1fr 84px; }
  .book-cover { transform:scale(.86) rotate(5deg); transform-origin:center right; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}