:root { --ink:#17211d; --muted:#6f7772; --paper:#f5f2eb; --card:#fffefb; --line:#dedbd2; --green:#184f3e; --green-bright:#276f56; --lime:#d8f069; --orange:#f08a56; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Microsoft YaHei","PingFang SC",var(--font-geist-sans),sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible { outline:3px solid rgba(39,111,86,.25); outline-offset:2px; }
.site-shell { min-height:100vh; overflow:hidden; }
.topbar { max-width:1240px; height:92px; margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:13px; }
.brand-mark { width:47px; height:47px; border-radius:14px; background:var(--green); display:grid; place-items:center; transform:rotate(-5deg); box-shadow:0 8px 18px rgba(24,79,62,.18); }
.brand-mark span { color:var(--lime); font-weight:900; font-size:22px; transform:rotate(5deg); }
.brand strong,.brand small { display:block; }
.brand strong { font-size:16px; letter-spacing:.06em; }
.brand small { color:#878b87; font-size:10px; margin-top:3px; letter-spacing:.12em; }
.settings-button { border:1px solid #d6d4cc; background:rgba(255,255,255,.6); border-radius:999px; padding:10px 17px; font-size:13px; font-weight:700; color:#4d5651; transition:.2s ease; }
.settings-button:hover { border-color:var(--green); color:var(--green); transform:translateY(-1px); }
.hero { position:relative; max-width:1240px; min-height:635px; margin:0 auto; padding:58px 28px 80px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:88px; }
.hero::before { content:""; position:absolute; z-index:-1; width:420px; height:420px; left:-235px; top:38px; border:1px solid rgba(24,79,62,.10); border-radius:50%; box-shadow:0 0 0 65px rgba(24,79,62,.025),0 0 0 130px rgba(24,79,62,.018); }
.hero::after { content:"✦"; position:absolute; right:-18px; top:24px; color:var(--orange); font-size:36px; transform:rotate(12deg); }
.eyebrow { color:var(--green-bright); font-size:11px; font-weight:850; letter-spacing:.18em; }
.hero h1 { margin:18px 0 25px; font-family:Georgia,"Songti SC",serif; font-size:clamp(48px,5.5vw,74px); line-height:1.08; font-weight:700; letter-spacing:-.055em; }
.hero h1 em { color:var(--green); font-style:normal; position:relative; }
.hero h1 em::after { content:""; height:7px; background:var(--lime); position:absolute; left:1px; right:-5px; bottom:3px; z-index:-1; transform:rotate(-1deg); border-radius:99px; }
.hero-copy>p { max-width:420px; color:var(--muted); font-size:15px; line-height:1.9; }
.stat-row { display:flex; gap:12px; margin-top:38px; }
.mini-stat { min-width:180px; border:1px solid var(--line); background:rgba(255,255,255,.45); padding:15px 16px; border-radius:15px; }
.mini-stat>span { display:block; font-size:11px; font-weight:800; color:var(--muted); }
.mini-stat strong { font-family:Georgia,serif; font-size:27px; margin-right:5px; }
.mini-stat small { font-size:10px; color:#8d928f; }
.mini-stat.route-a { border-top:3px solid var(--green-bright); }
.mini-stat.route-b { border-top:3px solid var(--orange); }
.draw-card { position:relative; background:var(--card); border:1px solid rgba(209,204,192,.8); border-radius:28px; padding:32px; box-shadow:0 25px 70px rgba(45,55,49,.12); }
.draw-card::before { content:""; position:absolute; width:78%; height:25px; background:var(--green); left:11%; bottom:-10px; z-index:-1; border-radius:0 0 24px 24px; opacity:.95; }
.card-header { display:flex; gap:14px; align-items:center; margin-bottom:24px; }
.step-pill { width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--green); background:#e9efdf; font:700 12px Georgia,serif; }
.card-header h2 { margin:0; font-size:19px; }
.card-header p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.route-tabs { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.route-tabs button { position:relative; min-height:78px; border:1px solid var(--line); border-radius:15px; background:#faf9f5; display:flex; align-items:center; gap:11px; padding:12px 14px; text-align:left; color:var(--ink); transition:.2s ease; }
.route-tabs button:hover { transform:translateY(-1px); border-color:#abb1ac; }
.route-tabs button.active.route-a { border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); background:#f3f7ee; }
.route-tabs button.active.route-b { border-color:#cf6f42; box-shadow:inset 0 0 0 1px #cf6f42; background:#fff6f1; }
.route-letter { width:42px; height:42px; display:grid; place-items:center; flex:none; border-radius:12px; background:#e7ece7; font:800 21px Georgia,serif; }
.route-b .route-letter { background:#f8e9df; color:#b9582f; }
.route-tabs strong,.route-tabs small { display:block; }
.route-tabs strong { font-size:13px; }
.route-tabs small { color:var(--muted); font-size:10px; margin-top:4px; }
.route-tabs i { display:none; position:absolute; right:10px; top:10px; font-style:normal; font-size:10px; }
.route-tabs .active i { display:block; }
.input-label { display:block; font-size:12px; font-weight:800; margin:22px 0 9px; }
.input-wrap { height:52px; display:flex; align-items:center; border:1px solid var(--line); background:#faf9f6; border-radius:13px; overflow:hidden; }
.input-wrap:focus-within { border-color:var(--green-bright); box-shadow:0 0 0 3px rgba(39,111,86,.08); }
.input-wrap span { padding-left:16px; color:#929791; }
.input-wrap input { width:100%; height:100%; border:0; outline:0; background:transparent; padding:0 15px 0 10px; font-size:13px; }
.draw-button { width:100%; height:56px; margin-top:14px; border:0; border-radius:14px; color:white; background:var(--green); font-weight:800; letter-spacing:.08em; box-shadow:0 10px 25px rgba(24,79,62,.22); transition:.2s ease; }
.draw-button:hover:not(:disabled) { background:#0f3f31; transform:translateY(-2px); box-shadow:0 14px 29px rgba(24,79,62,.26); }
.draw-button:disabled { cursor:wait; opacity:.8; }
.draw-button span { color:var(--lime); margin-right:8px; }
.notice { margin:10px 0 -3px; color:#a24a2b; font-size:12px; text-align:center; }
.number-display { margin-top:20px; min-height:128px; border:1px dashed #d7d3ca; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:repeating-linear-gradient(-45deg,#fbfaf7,#fbfaf7 8px,#f8f6f1 8px,#f8f6f1 16px); transition:.3s ease; }
.number-display small { color:var(--muted); font-size:10px; font-weight:700; }
.number-display strong { font:800 44px/1 Georgia,serif; margin:8px 0 5px; color:var(--green); }
.number-display span { color:#9a9d9a; font-size:10px; }
.number-display.rolling strong { animation:pulse .18s ease infinite alternate; filter:blur(.4px); }
.number-display.revealed { background:#eff5e7; border:1px solid #b6c997; box-shadow:inset 0 0 0 5px rgba(255,255,255,.5); }
.number-display.revealed strong { font-size:54px; color:#164d3b; animation:reveal .5s cubic-bezier(.2,.9,.3,1.3); }
@keyframes pulse { to { transform:scale(1.12); opacity:.55; } }
@keyframes reveal { from { transform:scale(.4) rotate(-8deg); opacity:0; } }
.results-section { max-width:1184px; margin:15px auto 0; padding:75px 28px 95px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:25px; }
.section-heading h2 { font-family:Georgia,"Songti SC",serif; font-size:34px; margin:9px 0 6px; letter-spacing:-.035em; }
.section-heading p { margin:0; color:var(--muted); font-size:13px; }
.result-actions { display:flex; align-items:center; gap:8px; }
.result-actions button { border:1px solid var(--line); background:white; padding:10px 14px; border-radius:10px; color:#4f5853; font-size:12px; font-weight:750; }
.result-actions button:hover { border-color:#a7aaa6; }
.result-actions .danger-link { color:#a55037; background:transparent; border-color:transparent; }
.table-card { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 35px rgba(45,55,49,.055); }
table { width:100%; min-width:700px; border-collapse:collapse; }
th { padding:16px 22px; background:#edebe4; color:#727873; font-size:10px; text-align:left; letter-spacing:.08em; }
td { height:72px; padding:13px 22px; border-top:1px solid #ece9e1; color:#69706b; font-size:12px; }
td strong { color:var(--ink); font-size:13px; }
.route-badge { padding:6px 10px; border-radius:99px; background:#eaf2e4; color:var(--green); font-weight:800; font-size:10px; }
.route-badge.route-b { background:#f9e9df; color:#ac512e; }
.number-badge { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--green); color:var(--lime); font:800 17px Georgia,serif; }
.empty-state { height:205px; text-align:center; }
.empty-state span,.empty-state strong,.empty-state small { display:block; }
.empty-state span { color:#b2bba6; font-size:25px; margin-bottom:8px; }
.empty-state strong { font-size:13px; color:#6f756f; }
.empty-state small { margin-top:6px; color:#a0a39f; }
footer { background:var(--green); color:white; min-height:120px; display:flex; align-items:center; justify-content:space-between; padding:30px max(28px,calc((100vw - 1184px)/2)); }
footer span { font-weight:850; letter-spacing:.1em; }
footer p { margin:0; color:#a9c1b9; font-family:Georgia,"Songti SC",serif; font-size:14px; }
footer a { color:inherit; text-underline-offset:3px; }
.modal-backdrop { position:fixed; z-index:50; inset:0; background:rgba(16,31,25,.58); backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px; animation:fadeIn .2s ease; }
.settings-modal { width:min(520px,100%); background:var(--card); border-radius:24px; padding:28px; box-shadow:0 25px 90px rgba(10,25,19,.3); }
.modal-title { display:flex; justify-content:space-between; align-items:start; }
.modal-title h2 { font-family:Georgia,"Songti SC",serif; margin:7px 0 0; font-size:26px; }
.modal-title>button { width:35px; height:35px; border:1px solid var(--line); background:transparent; border-radius:50%; color:#777; font-size:21px; }
.modal-intro { color:var(--muted); font-size:12px; line-height:1.7; padding-bottom:16px; border-bottom:1px solid #ece9e1; }
.setting-row { display:grid; grid-template-columns:45px 1fr auto 1fr; align-items:end; gap:12px; padding:18px 0; border-bottom:1px solid #ece9e1; }
.route-token { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#eaf2e4; color:var(--green); font:800 18px Georgia,serif; }
.route-token.route-b { background:#fae8dc; color:#a84f2c; }
.setting-row label { display:block; color:var(--muted); font-size:10px; font-weight:700; margin-bottom:6px; }
.setting-row input { width:100%; height:42px; border:1px solid var(--line); background:white; border-radius:10px; padding:0 10px; }
.range-dash { align-self:center; color:#aaa; }
.modal-notice { margin:14px 0 0; }
.modal-actions { display:flex; justify-content:end; gap:9px; padding-top:22px; }
.modal-actions button { min-width:90px; border:1px solid var(--line); background:white; padding:11px 16px; border-radius:11px; font-weight:750; font-size:12px; }
.modal-actions .primary { color:white; background:var(--green); border-color:var(--green); }
@keyframes fadeIn { from { opacity:0; } }
@media (max-width:900px) { .hero { grid-template-columns:1fr; gap:48px; padding-top:35px; } .hero-copy { text-align:center; } .hero-copy>p { margin-left:auto; margin-right:auto; } .stat-row { justify-content:center; } .draw-card { width:min(590px,100%); margin:0 auto; } }
@media (max-width:620px) { .topbar { height:76px; padding:0 18px; } .brand-mark { width:40px; height:40px; } .brand strong { font-size:14px; } .brand small { display:none; } .settings-button { padding:9px 12px; font-size:11px; } .hero { padding:35px 18px 65px; } .hero h1 { font-size:44px; } .stat-row { gap:8px; } .mini-stat { min-width:0; flex:1; padding:12px; text-align:left; } .mini-stat strong { font-size:23px; } .draw-card { padding:23px 18px; border-radius:22px; } .route-tabs { gap:7px; } .route-tabs button { padding:10px; } .route-letter { width:36px; height:36px; } .results-section { padding:60px 18px 70px; } .section-heading { align-items:start; flex-direction:column; } .setting-row { grid-template-columns:40px 1fr auto 1fr; gap:8px; } footer { flex-direction:column; justify-content:center; gap:8px; text-align:center; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }