/* Shengfeng Studio / a restrained, tactile membership experience. */
:root {
  color-scheme:dark; --paper:#0e1b21; --card:#15262d; --ink:#edf0e9; --muted:#9aaeb1;
  --line:#ffffff12; --gold:#d6b779; --gold-light:#3d3726; --teal:#83c9b4; --teal-light:#233d38;
  --danger:#ef9c8d; --shadow:0 14px 45px #00000010; --radius:20px;
  --surface:#1b3037; --surface-hover:#263b42; --panel-top:#192c33; --nav-bg:#0b171d;
  --text-soft:#becbc9; --gold-ink:#e4c58b; --gold-bg:#332f25; --field:#112229;
  --ticket-bg:#20312f; --ticket-border:#b4a87930; --top-bg:#0e1b21e8; --modal-bg:#1a2c33;
  --button-bg:#d9bd84; --button-ink:#26352e; --background-glow:#42695626;
  font-family:'Segoe UI','Microsoft YaHei',sans-serif;
}
:root[data-theme='day'] {
  color-scheme:light; --paper:#f4f2ed; --card:#fffefa; --ink:#233b3c; --muted:#6f8080;
  --line:#203e3a14; --gold:#ac8648; --gold-light:#f4ead8; --teal:#377b65; --teal-light:#e4eee6;
  --danger:#ac493b; --shadow:0 12px 35px #38514706; --surface:#efeee7; --surface-hover:#e7e9df;
  --panel-top:#fffefa; --nav-bg:#14292d; --text-soft:#536b69; --gold-ink:#987137; --gold-bg:#f5ecd9;
  --field:#f7f7f1; --ticket-bg:#f5f0e4; --ticket-border:#b9a37040; --top-bg:#f4f2ede8;
  --modal-bg:#fffefa; --button-bg:#284a43; --button-ink:#fff8e8; --background-glow:#c9d8c84d;
}
body { background:radial-gradient(ellipse at 95% 20%,var(--background-glow),transparent 50%),var(--paper); color:var(--ink); }
::selection { background:#b7cbb34d; }
button { touch-action:manipulation; }
.fade-in { animation:none; }
.gold { color:var(--gold-ink); }
.green { color:var(--teal); }
.subtext,.muted { color:var(--muted); }
.btn { color:var(--text-soft); background:var(--surface); border-color:var(--line); border-radius:10px; min-height:40px; transition:background .18s,box-shadow .18s,transform .18s; }
.btn:hover { background:var(--surface-hover); border-color:#b9c3b52b; box-shadow:0 5px 20px #0000000d; }
.btn.primary { background:var(--button-bg); border-color:transparent; color:var(--button-ink); }
.btn.primary:hover { background:var(--button-bg); filter:brightness(1.08); box-shadow:0 4px 24px #c9ad6e22; }
.btn.primary:disabled { filter:none; box-shadow:none; }
.btn .button-arrow { margin-left:auto; display:grid; place-items:center; }
.btn .icon { transition:transform .25s; }
@media(hover:hover){.btn:hover .button-arrow .icon,.text-btn:hover .icon { transform:translateX(3px); }}
.icon-btn { background:var(--surface); border-color:var(--line); color:var(--text-soft); }
.text-btn { color:var(--text-soft); }
.tag { background:var(--surface); color:var(--text-soft); border:1px solid var(--line); border-radius:6px; font-weight:400; }
.tag.gold-tag { background:var(--gold-bg); color:var(--gold-ink); border-color:#bca67526; }
.tag.green-tag { background:var(--teal-light); color:var(--teal); }
.tag.red-tag { background:#73463833; color:var(--danger); }
.prototype-bar { height:36px; padding:0 24px; background:var(--nav-bg); color:#9baead; border-bottom:1px solid #ffffff0c; font-size:9px; }
.proto-label { font-size:9px; letter-spacing:1px; }
.proto-extra { letter-spacing:.2px; color:#809593; }
.status-dot { background:#96b8a8; box-shadow:0 0 10px #9cba8b25; }
.mode-toggle { background:#ffffff06; border:1px solid #ffffff10; padding:2px; }
.mode-toggle button { color:#96aaa9; font-size:10px; padding:3px 10px; }
.mode-toggle button.active { background:#294039; color:#efdfbd; box-shadow:inset 0 0 0 1px #cdb27628; }
.reset { color:#a1b0ae; }
.sidebar { top:36px; width:216px; padding:34px 17px 24px; background:radial-gradient(ellipse at 0% 0%,#31584729,transparent 65%),var(--nav-bg); border-right:1px solid #ffffff08; }
.brand { margin:0 6px 50px; gap:11px; }
.brand-name { font-family:'Songti SC','SimSun',serif; font-size:23px; letter-spacing:3px; color:#f2ead9; }
.brand-en { color:#91a49d; font-size:7px; letter-spacing:2.2px; }
.brand img { width:36px; height:36px; }
.nav-caption { font-size:8px; margin:9px 12px 18px; letter-spacing:1.5px; color:#6c8585; }
.nav { gap:8px; }
.nav button { color:#a3b8b7; border-radius:10px; min-height:47px; padding:13px 14px; font-size:12px; transition:background .2s,color .2s; }
.nav button:hover { background:#ffffff06; color:#f0dfb8; }
.nav button.active { background:linear-gradient(100deg,#c8ae6c1c,#c8ae6c07); color:#e4c990; box-shadow:inset 0 0 0 1px #cfb67520; }
.nav button.active:before { background:#d2b679; height:14px; top:17px; }
.nav button .icon { width:18px; }
.side-note { color:#718a88; font-size:10px; }
.side-profile { border-color:#ffffff0c; }
.side-profile .avatar { background:#34493d; color:#dcc68e; }
.avatar { background:var(--teal-light); color:var(--teal); }
.main { margin-left:216px; min-height:calc(100vh - 36px); }
.topbar { height:74px; background:var(--top-bg); border-color:var(--line); padding:0 36px; }
.breadcrumbs { color:var(--muted); gap:10px; font-size:10px; }
.breadcrumbs strong { color:var(--text-soft); }
.breadcrumbs .icon { width:16px; height:16px; }
.topbar-right { gap:13px; }
.bell-wrap:after { border-color:var(--paper); }
.visual-controls { display:flex; gap:5px; padding-right:12px; margin-right:1px; border-right:1px solid var(--line); }
.visual-toggle { background:transparent; color:var(--muted); border:1px solid transparent; border-radius:7px; padding:6px 8px; display:flex; gap:6px; align-items:center; font-size:10px; min-height:34px; }
.visual-toggle:hover { color:var(--ink); background:var(--surface); border-color:var(--line); }
.visual-toggle>span:first-child { font-size:20px; line-height:1; }
.content { max-width:1530px; padding:32px 36px 24px; }
.page-head { margin-bottom:28px; gap:20px; }
.page-head h1 { font-size:30px; letter-spacing:.2px; line-height:1.45; font-weight:500; }
.page-head h1>span { font-family:'Songti SC','SimSun',serif; font-weight:400; color:var(--gold-ink); }
.page-head .eyebrow { color:var(--gold); font-size:8px; letter-spacing:3px; margin-bottom:10px; }
.page-head p { color:var(--muted); font-size:11px; margin-top:9px; }
.page-actions .btn { font-size:11px; }
.hero-grid { grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr); gap:22px; margin-bottom:0; perspective:1200px; }
.passport { min-height:304px; padding:26px 30px 21px; border-radius:19px; background:linear-gradient(120deg,#e5d5ae 0%,#c9b27e 42%,#ddcb9f 67%,#bb9e64 100%); color:#243e37; border:1px solid #faeac359; box-shadow:0 18px 35px #00000020,inset 0 0 30px #ffeac434; transform-style:preserve-3d; }
.passport:before { width:390px; height:390px; border-color:#fff8df35; right:-140px; top:-56px; box-shadow:0 0 0 25px #fff7e010,0 0 0 50px #fff7e009,0 0 0 75px #fff7e00a; }
.passport:after { inset:9px; border:1px solid #fff7de50; border-radius:12px; z-index:4; }
.card-shine { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at var(--shine-x,20%) var(--shine-y,15%),#fffbe842,transparent 56%); z-index:2; mix-blend-mode:soft-light; }
.passport-watermark { position:absolute; right:25px; bottom:22px; font-size:235px; font-family:'SimSun',serif; line-height:1; font-weight:600; color:#586c4c0c; transform:rotate(-8deg); pointer-events:none; }
.foil-orbit { position:absolute; width:260px; height:260px; right:-43px; top:21px; transform:rotate(-25deg); pointer-events:none; }
.foil-orbit span { position:absolute; inset:0; border:1px solid #5d715c24; border-radius:50%; }
.foil-orbit span:nth-child(2) { inset:12px; border-style:dashed; }
.foil-orbit span:nth-child(3) { inset:28px; border-color:#fff2ca55; }
.passport-inner { z-index:3; }
.passport-head { color:#3a5141; align-items:flex-start; }
.passport-head .eyebrow { font-size:8px; letter-spacing:2.4px; color:#5f6d4e; }
.passport-title { margin-top:12px; font-size:27px; letter-spacing:3px; }
.edition-label { text-align:right; font-size:6px; letter-spacing:2px; color:#6b764c; line-height:1.2; }
.edition-label b { font-family:Georgia,serif; font-size:31px; font-weight:400; letter-spacing:0; display:block; margin-top:3px; }
.passport-body { margin:31px 0 24px; align-items:flex-end; }
.member-label { font-size:8px; letter-spacing:1.8px; color:#6b7657; }
.passport-name { color:#294637; font-size:29px; margin-top:2px; letter-spacing:4px; }
.passport-name>span { font-family:'Segoe UI',sans-serif; font-size:8px; letter-spacing:2px; margin-left:9px; color:#586d4c; vertical-align:middle; }
.passport-identity { color:#56684c; font-size:9px; letter-spacing:.3px; margin-top:5px; }
.passport-emblem { width:82px; height:82px; border-color:#54715160; color:#3c6246; margin-right:16px; transform:rotate(-13deg); background:#f5e5b61a; box-shadow:0 2px 8px #5f612208,inset 0 0 10px #fffad624; }
.passport-emblem:before { border-color:#54715166; }
.passport-emblem .icon { width:32px; height:32px; transform:translateY(-5px); stroke-width:1.2; }
.passport-emblem small { font-size:5px; letter-spacing:1.1px; bottom:16px; }
.passport-foot { padding-top:12px; border-color:#465d3f20; color:#54684b; font-size:9px; }
.passport-foot strong { color:#3b543b; font-weight:600; letter-spacing:1.6px; }
.passport-foot .icon { width:22px; }
.point-card { position:relative; background:linear-gradient(125deg,var(--panel-top),var(--card)); border-color:var(--line); border-radius:19px; padding:24px 25px 22px; }
.point-label { color:var(--text-soft); font-size:11px; }
.point-label small { display:block; font-size:6px; color:var(--muted); letter-spacing:2px; margin-top:3px; }
.point-label .point-spark { display:grid; place-items:center; border:1px solid #bda77430; border-radius:50%; width:33px; height:33px; background:#c6a86908; }
.point-label .icon { width:17px; color:var(--gold-ink); }
.points-big { font-family:'Segoe UI',Arial,sans-serif; font-size:56px; font-weight:300; letter-spacing:-2px; margin:10px 0 8px; color:var(--ink); font-variant-numeric:tabular-nums; }
.points-big small { font-size:9px; letter-spacing:1.3px; color:var(--gold); margin-left:10px; }
.pending { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:9px; margin-bottom:16px; }
.pending strong { margin:0; color:var(--gold-ink); }
.pending-dot { width:4px; height:4px; background:var(--gold); border-radius:50%; }
.point-divider { color:var(--line); margin:0 5px; }
.point-milestone .small { font-size:10px; color:var(--text-soft); }
.point-milestone .gold small { font-size:9px; color:var(--muted); }
.progress-track { background:var(--surface); height:4px; }
.progress-track>span { background:linear-gradient(90deg,#a78d55,#e5cc91); box-shadow:0 0 10px #cab07540; }
.point-card .progress-caption { color:var(--muted); font-size:9px; margin:8px 0 18px; }
.point-card .btn { justify-content:flex-start; font-size:11px; min-height:40px; padding:10px 14px; }
.collection-strip { display:flex; gap:16px; justify-content:space-between; padding:20px 3px; border-bottom:1px solid var(--line); margin-bottom:23px; color:var(--muted); font-size:9px; }
.collection-strip>span { display:flex; gap:8px; align-items:center; }
.collection-strip .icon { width:14px; height:14px; color:var(--gold); }
.grid-main { grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr); gap:22px; }
.stack { gap:20px; align-content:start; }
.panel { border-radius:var(--radius); background:linear-gradient(135deg,var(--panel-top),var(--card)); border-color:var(--line); padding:24px; box-shadow:var(--shadow); }
.panel-head { margin-bottom:23px; }
.panel-head h2 { font-size:16px; font-weight:500; }
.section-kicker { color:var(--gold); font-size:7px; letter-spacing:2.5px; margin-bottom:8px; }
.panel-head .subtext { font-size:10px; margin-top:6px; }
.stamp-panel { position:relative; overflow:hidden; }
.stamp-panel:before { content:''; position:absolute; width:200px; height:200px; border-radius:50%; background:#b9ab6d05; filter:blur(15px); top:-90px; right:-40px; pointer-events:none; }
.stamp-grid { gap:12px; padding:4px 0 0; }
.stamp-circle { width:73px; height:73px; margin-bottom:14px; background:radial-gradient(circle at 30% 20%,#d9bd7b29,#86733d12 70%); color:#d6bb7b; border:1px dashed #c9b27588; box-shadow:inset 0 0 0 4px #decf8c08,0 8px 18px #0000000b; }
.stamp-circle:before { inset:6px; border-color:#c6b28038; }
.stamp-circle .icon { width:26px; height:26px; stroke-width:1.25; }
.stamp-circle.teal { background:radial-gradient(circle at 30% 20%,#8ecfb226,#668c8612 70%); border-color:#81b9a180; color:#9dceba; }
.stamp-circle.teal:before { border-color:#9bc8b338; }
.stamp-circle.gray { background:var(--surface); border-color:var(--line); color:var(--muted); }
.stamp-circle.gray:before { border-color:var(--line); }
.stamp-number { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:5px; letter-spacing:1px; opacity:.7; }
.stamp-orbit { position:absolute; inset:-5px; border:1px solid #bfa15f12; border-radius:50%; }
.stamp-tile strong { font-size:11px; font-weight:400; letter-spacing:.8px; }
.stamp-tile small { color:var(--muted); font-size:8px; margin-top:5px; }
.journey-note { margin-top:22px; padding-top:16px; border-color:var(--line); color:var(--muted); font-size:9px; }
.journey-note button { font-size:10px; }
.explore { background:radial-gradient(ellipse at 100% 0%,#467f6260,transparent 80%),#183b32; border-color:#739c6f2b; min-height:270px; }
.explore>*:not(.explore-orbit) { position:relative; z-index:1; }
.explore-orbit { width:190px; height:190px; position:absolute; right:-55px; top:25px; border-radius:50%; border:1px solid #aac1961a; box-shadow:0 0 0 22px #aac19608,0 0 0 44px #aac19604; }
.explore-orbit:after { content:'✦'; position:absolute; left:12px; top:25px; color:#c2cead; font-size:16px; }
.explore .eyebrow { color:#a4bfa1; font-size:7px; letter-spacing:2.2px; }
.explore h2 { font-size:25px; color:#f2e9cb; font-weight:400; line-height:1.5; margin:14px 0 10px; }
.explore h2 span { color:#b6cdb5; }
.explore p { color:#a4baad; font-size:10px; line-height:1.9; max-width:230px; }
.explore-track { color:#b7cfc0; font-size:9px; gap:7px; margin:22px 0; }
.explore-icon { width:26px; height:26px; background:#c0d5aa15; color:#c5d8ae; }
.explore-track .track-line { background:#8fb39d40; }
.explore .text-btn { color:#d8ddc5; font-size:10px; }
.explore .tag { background:#b9d5b816; color:#c2d9ba; border-color:#aacaa12b; font-size:9px; }
.ticket { background:var(--ticket-bg); border:1px solid var(--ticket-border); border-radius:12px; gap:12px; transition:transform .22s,box-shadow .22s; }
.ticket.blue-ticket { background:var(--surface); border-color:var(--line); }
.ticket-value { color:var(--gold-ink); font-family:Georgia,serif; font-size:34px; }
.ticket-info { border-color:var(--ticket-border); padding-left:12px; }
.ticket-info h3 { font-size:11px; font-weight:500; color:var(--ink); }
.ticket-info p { font-size:9px; color:var(--muted); }
.ticket .btn { min-height:32px; border-color:var(--ticket-border); background:transparent; color:var(--gold-ink); font-size:10px; }
.ticket .btn:hover { background:var(--surface-hover); }
.reward-row .ticket-footer { border-color:var(--ticket-border); color:var(--muted); font-size:9px; }
.transaction { padding:15px 0; border-color:var(--line); gap:10px; }
.transaction-icon { background:var(--surface); color:var(--teal); border:1px solid var(--line); width:31px; height:33px; border-radius:9px; }
.transaction-detail strong { color:var(--text-soft); font-size:10px; font-weight:400; }
.transaction-detail small { color:var(--muted); font-size:8px; }
.transaction-value { font-size:12px; color:var(--teal); }
.transaction-value small { color:var(--muted); font-size:8px; }
.rewards-grid { gap:20px; }
.reward-card { background:var(--card); border-color:var(--line); padding:20px; position:relative; transition:border-color .2s,box-shadow .2s; }
@media(hover:hover){.reward-card:hover { border-color:#bca46655; box-shadow:0 18px 30px #00000012; }}
.reward-art { height:185px; background:radial-gradient(ellipse at 40% 30%,#d4c09238,transparent 70%),#2e3c33; border-radius:12px; margin-bottom:22px; perspective:600px; }
.reward-art.blue-art { background:radial-gradient(ellipse at 40% 30%,#8aa6aa38,transparent 70%),#243a40; }
.reward-art:before,.reward-art:after { border-color:#ddc48f1c; }
.mini-pass { width:67%; min-width:145px; height:115px; border-radius:8px; padding:14px 17px; background:linear-gradient(120deg,#dbcaa1,#bfa06c); color:#3e5139; display:flex; flex-direction:column; justify-content:space-between; position:relative; z-index:1; box-shadow:10px 18px 28px #00000030,inset 0 0 0 1px #fff0bf77; transform:rotate(-12deg) rotateY(-7deg); transition:transform .45s; }
.mini-pass:after { content:''; position:absolute; inset:5px; border:1px solid #fff1c45e; border-radius:4px; pointer-events:none; }
.mini-pass>span { font-size:6px; letter-spacing:1.3px; }
.mini-pass>strong { font-family:Georgia,serif; font-size:36px; font-weight:400; line-height:1; }
.mini-pass strong small { font-size:13px; }
.blue-art .mini-pass { background:linear-gradient(120deg,#bfd1cc,#85a9a3); color:#244948; }
.reward-art .art-value { font-size:5px; font-family:inherit; bottom:8px; right:9px; color:#d3dece66; letter-spacing:2px; }
.reward-art-icon { position:absolute; right:19%; top:50%; transform:translateY(-50%) rotate(-12deg); z-index:2; }
.reward-art-icon .icon { width:31px; height:31px; color:#54704b; }
.blue-art .reward-art-icon .icon { color:#3b6362; }
@media(hover:hover){.reward-card:hover .mini-pass { transform:translateY(-4px) rotate(-7deg) rotateY(0); }}
.reward-price strong { font-weight:400; }
.reward-price small { color:var(--muted); }
.rule-banner { background:var(--gold-bg); color:var(--text-soft); border:1px solid #b49e7920; font-size:10px; line-height:1.9; }
.rule-banner .icon { color:var(--gold); }
.tabs { padding:4px; width:fit-content; background:var(--surface); border:1px solid var(--line); border-radius:11px; gap:4px; }
.tabs button { color:var(--muted); font-size:11px; min-height:35px; }
.tabs button.active { color:var(--gold-ink); background:var(--card); border-color:#c6ae7633; box-shadow:0 2px 5px #00000010; }
.stat { background:var(--card); border-color:var(--line); border-radius:15px; padding:20px; }
.stat-title { color:var(--muted); font-size:11px; }
.stat-title .icon { color:var(--gold); }
.stat-number { font-family:'Segoe UI',Arial,sans-serif; font-weight:300; font-size:31px; color:var(--ink); }
.stat-number small,.stat-foot { color:var(--muted); }
.stat-foot { font-size:9px; }
.admin-grid { gap:20px; }
.auth-demo-note { color:var(--text-soft); background:var(--surface); border:1px solid var(--line); font-size:10px; }
.chart-col .bar { background:linear-gradient(0deg,#4d7c6d,#8ac6a7); border-radius:5px 5px 0 0; box-shadow:0 0 15px #72b79812; }
.chart-col:nth-last-child(2) .bar { background:linear-gradient(0deg,#9c8558,#dec58b); }
.chart-col .bar-value,.chart-col .bar-day,.chart-note { color:var(--muted); }
.dept-summary .progress-track>span { background:linear-gradient(90deg,#527e6e,#9dccb3); }
th { color:var(--muted); background:var(--field); }
th,td { border-color:var(--line); padding:14px 12px; }
td { color:var(--text-soft); }
tbody tr:hover { background:var(--surface); }
.role-select { background:var(--surface); color:var(--text-soft); border-color:var(--line); }
.field label { color:var(--text-soft); }
.field input,.field select,.field textarea { background:var(--field); border-color:var(--line); color:var(--ink); }
.field input::placeholder,.field textarea::placeholder { color:var(--muted); opacity:.8; }
.field small { color:var(--muted); }
.calc-box { background:var(--teal-light); border-color:var(--line); }
.calc-box strong { color:var(--teal); }
.search-box { background:var(--field); color:var(--ink); border-color:var(--line); }
.search-box input { color:var(--ink); }
.rule-list { color:var(--muted); line-height:1.9; font-size:11px; }
.rule-list strong { color:var(--text-soft); font-weight:500; }
.rule-list p { border-color:var(--line); }
.audit-item p,.audit-item small,.review-detail dt { color:var(--muted); }
.empty { color:var(--muted); }
.empty h3 { color:var(--text-soft); }
.empty .icon { color:var(--gold); }
.footer { color:var(--muted); font-size:8px; padding-top:25px; opacity:.8; }
.footer span:last-child { font-size:7px; letter-spacing:1.8px; }
dialog { background:var(--modal-bg); color:var(--ink); border:1px solid #c8b48536; border-radius:20px; box-shadow:0 30px 100px #00000066; overflow-x:hidden; }
dialog::backdrop { background:#061217a6; backdrop-filter:blur(8px); }
.modal-head { padding:23px 25px 0; }
.modal-head h2 { font-size:16px; font-weight:500; }
.modal-close { background:var(--surface-hover); color:var(--text-soft); width:32px; height:32px; }
.modal-body { position:relative; z-index:1; }
.receipt { background:var(--surface); border-color:#b9a37348; padding:19px; }
.celebration { padding-top:0; }
.celebration h2 { color:var(--ink); font-size:26px; }
.celebration p { color:var(--muted); line-height:1.9; font-size:11px; }
.delivery-stage { position:relative; height:218px; display:grid; place-items:center; margin:0 auto 4px; }
.delivery-orbit { position:absolute; width:165px; height:165px; border:1px solid #d6bb7d26; border-radius:50%; box-shadow:0 0 0 23px #d6bb7d06,0 0 0 48px #d6bb7d03; }
.envelope { width:172px; height:114px; margin:58px auto 0; background:#bca16c; border-color:#f2dba76b; box-shadow:0 15px 40px #00000026; perspective:700px; }
.envelope:before { display:none; }
.envelope:after { z-index:2; background:linear-gradient(33deg,#dcc592 49.5%,transparent 50%) left/50% 100%,linear-gradient(-33deg,#cbb17d 49.5%,transparent 50%) right/50% 100%; background-repeat:no-repeat; }
.envelope-flap { position:absolute; z-index:0; top:-1px; left:0; width:100%; height:67px; clip-path:polygon(0 0,100% 0,50% 100%); background:#e8d6ac; transform-origin:top; transform:rotateX(175deg); }
.envelope-card { z-index:1; inset:8px 17px; background:#f7edce; border:1px solid #fff5d5; height:108px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; animation:none; transform:translateY(-88px); color:#77633b; box-shadow:0 0 15px #7b612b10; }
.envelope-card small { font-size:5px; letter-spacing:1.2px; }
.envelope-card strong { font-size:32px; font-family:Georgia,serif; font-weight:400; line-height:1.5; }
.envelope-card strong span { font-size:12px; margin-left:3px; }
.seal { left:69px; top:40px; z-index:4; background:linear-gradient(120deg,#a28550,#c8ac76); border:2px solid #e0c999; color:#f5e6be; box-shadow:0 3px 8px #89714033; }
.celebration-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; }
.stamp-large { animation:none; background:var(--teal-light); border-color:var(--teal); color:var(--teal); box-shadow:inset 0 0 0 7px var(--modal-bg),inset 0 0 0 8px #79ac8f4d; }
#toast { background:var(--button-bg); color:var(--button-ink); border:1px solid #d8bd8b44; box-shadow:0 8px 35px #00000030; }
[data-theme='day'] .stamp-circle { color:#917036; background:radial-gradient(circle at 30% 20%,#f6ecd4,#eeeadf); }
[data-theme='day'] .stamp-circle.teal { color:#417c65; background:radial-gradient(circle at 30% 20%,#f0f7e9,#d9e9de); }
[data-theme='day'] .stamp-circle.gray { color:#8f9d94; background:#edece5; }
[data-theme='day'] .passport { box-shadow:0 14px 30px #80754f18; }
@media(min-width:1600px) { .sidebar { width:232px; padding-left:24px; padding-right:24px; }.main { margin-left:232px; }.content { padding-top:38px; }.passport { min-height:325px; }.passport-body { margin:39px 0 27px; }.points-big { font-size:64px; margin-top:16px; } }
@media(max-width:1200px) { .sidebar { width:188px; padding-left:12px; padding-right:12px; }.main { margin-left:188px; }.brand { gap:8px; }.brand-name { font-size:20px; }.brand-en { font-size:6px; }.brand img { width:31px; }.nav-caption { font-size:7px; letter-spacing:1.2px; }.nav button { padding-left:12px; }.content { padding:28px; }.topbar { padding:0 28px; }.hero-grid,.grid-main { grid-template-columns:minmax(0,1.7fr) minmax(270px,1fr); gap:18px; }.passport { padding:25px; }.passport-title { font-size:24px; }.passport-emblem { margin-right:3px; }.panel { padding:22px; }.header-subtitle { display:none; }.point-card { padding:24px; }.page-head h1 { font-size:28px; } }
@media(max-width:970px) { .sidebar { width:176px; }.main { margin-left:176px; }.content { padding:25px 22px; }.topbar { padding:0 22px; }.hero-grid { grid-template-columns:1.25fr 1fr; gap:16px; }.passport { padding:23px; min-height:305px; }.passport-title { font-size:22px; letter-spacing:2px; }.passport-emblem { display:none; }.passport-body { margin:34px 0 32px; }.passport-foot { font-size:8px; }.point-card { padding:23px; }.points-big { font-size:51px; }.grid-main { grid-template-columns:1fr; gap:20px; }.grid-main>.stack:last-child { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:20px; }.collection-strip { font-size:8px; gap:8px; }.collection-strip>span { gap:5px; }.collection-strip .icon { width:12px; }.page-head h1 { font-size:26px; }.page-actions .btn { padding:8px 12px; }.visual-label { display:none; }.visual-controls { gap:2px; padding-right:10px; }.visual-toggle { padding:4px 7px; }.admin-grid { grid-template-columns:1fr; }.mini-pass { width:65%; } }
@media(max-width:680px) {
  .prototype-bar { height:36px; padding:0 12px; }.proto-label { font-size:7px; letter-spacing:.5px; gap:6px; }.mode-toggle button { padding:3px 7px; font-size:9px; }.reset { font-size:8px; }.prototype-actions { gap:7px; }
  .sidebar { display:none; }.main { margin-left:0; }.topbar { height:64px; padding:0 18px; }.mobile-brand { font-family:'SimSun',serif; font-size:19px; letter-spacing:2px; color:var(--ink); }.mobile-brand img { width:27px; height:27px; }.topbar-right { gap:8px; }.topbar-right>.avatar,.topbar-right>.header-member { display:none; }.topbar-right .bell-wrap { width:30px; height:30px; }.visual-controls { border:0; margin:0; padding:0; gap:1px; }.visual-toggle { min-width:30px; padding:4px 5px; }.visual-label { display:none; }.visual-toggle>span:first-child { font-size:21px; }.breadcrumbs { display:none; }
  .content { padding:26px 18px 98px; }.page-head { display:block; margin-bottom:22px; position:relative; }.page-head h1 { font-size:27px; line-height:1.6; letter-spacing:0; }.page-head h1>span { display:block; font-size:31px; line-height:1.3; margin:0 0 10px; }.page-head .eyebrow { font-size:6px; letter-spacing:2.5px; margin-bottom:12px; }.page-head p { font-size:10px; line-height:1.8; max-width:none; }.page-head .page-actions { margin-top:13px; }.page-actions .btn { font-size:10px; min-height:34px; padding:7px 11px; }.page-actions .btn .icon { display:inline-block; width:14px; height:14px; }
  body[data-page='home'] .page-head .page-actions { position:absolute; right:0; top:1px; margin:0; }.page-head .page-actions:empty { display:none; }body[data-page='home'] .page-actions .btn { font-size:9px; padding:4px 8px; min-height:27px; }body[data-page='home'] .page-actions .icon { display:none; }
  .hero-grid { grid-template-columns:1fr; gap:16px; margin:0; }.passport { min-height:251px; border-radius:17px; padding:22px 23px 19px; }.passport-head .eyebrow { font-size:6px; letter-spacing:2px; }.passport-title { font-size:23px; margin-top:10px; letter-spacing:2px; }.edition-label { font-size:5px; letter-spacing:1.4px; }.edition-label b { font-size:26px; }.passport-body { margin:22px 0 20px; gap:12px; }.member-label { font-size:7px; }.passport-name { font-size:26px; }.passport-name>span { font-size:6px; letter-spacing:1px; margin-left:3px; }.passport-identity { font-size:8px; }.passport-emblem { display:grid; width:66px; height:66px; margin-right:1px; }.passport-emblem small { font-size:4px; letter-spacing:.8px; bottom:12px; }.passport-emblem .icon { width:26px; height:26px; }.passport-foot { font-size:8px; padding-top:12px; }.passport-foot .icon { width:17px; }.passport-watermark { font-size:191px; right:0; }.foil-orbit { width:210px; height:210px; right:-50px; top:10px; }.passport:before { width:250px; height:250px; right:-80px; }
  .point-card { padding:22px; border-radius:17px; }.point-label { font-size:11px; }.point-label small { font-size:6px; }.points-big { font-size:56px; margin-top:8px; }.pending { font-size:9px; margin-bottom:18px; }.point-milestone .small { font-size:10px; }.point-card .btn { min-height:42px; font-size:11px; }.point-card .progress-caption { font-size:9px; margin-bottom:18px; }
  .collection-strip { padding:18px 1px; margin-bottom:18px; gap:6px; font-size:8px; justify-content:space-between; }.collection-strip>span { gap:4px; }.collection-strip>span:last-child { display:none; }.collection-strip .icon { width:12px; }
  .grid-main { gap:18px; }.grid-main>.stack:last-child { grid-template-columns:1fr; gap:18px; }.stack { gap:18px; }.panel { padding:21px 18px; border-radius:17px; }.section-kicker { font-size:6px; margin-bottom:8px; }.panel-head { gap:8px; margin-bottom:23px; }.panel-head h2 { font-size:15px; }.panel-head .subtext { font-size:9px; margin-top:6px; }.panel-head .tag { font-size:8px; padding:3px 6px; }.panel-head .text-btn { font-size:10px; }.stamp-panel .panel-head .tag { position:absolute; top:19px; right:18px; }.stamp-panel .panel-head { padding-top:0; }
  .stamp-grid { gap:8px; padding-top:3px; }.stamp-circle { width:57px; height:57px; margin-bottom:14px; }.stamp-circle .icon { width:22px; height:22px; }.stamp-circle:before { inset:4px; }.stamp-number { bottom:4px; font-size:4px; }.stamp-orbit { inset:-4px; }.stamp-tile strong { font-size:9px; letter-spacing:0; }.stamp-tile small { font-size:7px; }.journey-note { font-size:8px; gap:5px; margin-top:20px; padding-top:15px; }.journey-note button { font-size:9px; }.journey-note .icon { width:12px; }.journey-note button .icon { width:13px; }
  .reward-row { grid-template-columns:1fr; gap:11px; }.reward-row .ticket { flex-wrap:nowrap; padding:16px 13px; gap:11px; }.reward-row .ticket-info { min-width:0; }.reward-row .ticket:last-child { display:flex; }.reward-row .ticket-footer { width:auto; border:0; padding:0; flex-direction:column; gap:8px; font-size:8px; flex-shrink:0; }.ticket-info h3 { font-size:10px; }.ticket-info p { font-size:8px; }.ticket-value { font-size:29px; min-width:29px; }.ticket-value small { font-size:10px; }.ticket .btn { font-size:9px; min-height:29px; padding:5px 8px; }
  .explore { padding:24px; min-height:0; }.explore h2 { font-size:25px; margin-top:15px; }.explore p { font-size:10px; max-width:225px; }.explore-track { margin:21px 0; font-size:9px; }.explore-orbit { right:-35px; width:200px; height:200px; }.transaction-detail strong { font-size:11px; }.transaction-detail small { font-size:8px; }.transaction-value { font-size:12px; }
  .rewards-grid { grid-template-columns:1fr; gap:18px; }.reward-card { padding:20px; border-radius:17px; }.reward-art { height:185px; }.reward-price { margin-top:22px; }.reward-price strong { font-size:25px; }.reward-card h2 { font-size:17px; }.rule-banner { font-size:10px; padding:12px; }.tabs { max-width:100%; gap:0; padding:3px; }.tabs button { font-size:10px; padding:6px 10px; min-height:33px; }
  .stats-grid { gap:10px; }.stat { padding:17px; }.stat-title { font-size:9px; }.stat-title .icon { width:13px; }.stat-number { font-size:29px; }.stat-foot { font-size:8px; }.admin-grid { gap:18px; }.role-select { max-width:133px; font-size:9px; padding:7px; }.auth-demo-note { font-size:9px; padding:12px; }.form-grid { gap:18px; }.field label { font-size:11px; }.field input,.field select,.field textarea { font-size:16px; }.field small { font-size:9px; }.field select { font-size:13px; }.form-grid+.form-error+.row { flex-wrap:wrap; gap:12px; }.table-wrap { margin:0 -6px; }th,td { padding:13px 9px; font-size:10px; }
  .bottom-nav { left:12px; right:12px; bottom:12px; border:1px solid #b2baa628; border-radius:18px; padding:12px 7px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 10px 35px #00000038; background:var(--top-bg); backdrop-filter:blur(18px); gap:2px; }.bottom-nav button { min-width:48px; font-size:8px; gap:5px; color:var(--muted); position:relative; }.bottom-nav button .icon { width:19px; height:19px; }.bottom-nav button.active { color:var(--gold-ink); }.bottom-nav button.active:after { content:''; position:absolute; top:-5px; width:16px; height:2px; border-radius:2px; background:var(--gold); }.bottom-nav .nav-count { position:absolute; top:0; right:10px; margin:0; font-size:7px; }
  .footer { display:block; line-height:1.9; font-size:7px; padding:24px 0 6px; }.footer span:last-child { display:block; margin-top:10px; font-size:6px; }.modal-head { padding:20px 20px 0; }.modal-body { padding:20px; }.modal-head h2 { font-size:15px; }.modal-actions .btn { min-height:42px; }dialog { max-height:88dvh; border-radius:18px; }#toast { left:50%; bottom:95px; font-size:11px; }.collection-strip+.grid-main { margin-top:0; }
}
@media(max-width:370px) { .content { padding-left:14px; padding-right:14px; }.topbar { padding:0 14px; }.mobile-brand { font-size:17px; }.passport-title { font-size:21px; }.passport-emblem { width:58px; height:58px; }.passport-identity { font-size:7px; }.stamp-circle { width:52px; height:52px; }.stamp-grid { gap:5px; }.point-card { padding:20px; }.role-select { max-width:115px; }body[data-page='home'] .page-head .page-actions { top:35px; }.page-head h1 { font-size:25px; }.page-head h1>span { font-size:29px; }.proto-label { letter-spacing:0; font-size:6px; }.mode-toggle button { padding:3px 5px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }.card-shine { display:none; }.envelope-flap { transform:rotateX(175deg)!important; }.envelope-card { transform:translateY(-88px)!important; }.seal { opacity:0; } }
[data-motion='reduced'] *,[data-motion='reduced'] *:before,[data-motion='reduced'] *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
[data-motion='reduced'] .card-shine { display:none; }
[data-motion='reduced'] .envelope-flap { transform:rotateX(175deg)!important; }
[data-motion='reduced'] .envelope-card { transform:translateY(-88px)!important; }
[data-motion='reduced'] .seal { opacity:0; }