:root { --forest:#174e3b; --ink:#23382e; --muted:#6d796f; --paper:#f5f2e9; --card:#fffdf7; --line:#dfe3d6; --gold:#b48130; --danger:#9a392c; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei UI","PingFang SC",sans-serif; font-size:14px; line-height:1.65; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 85% 2%,#dfe7d580,transparent 50%); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.48; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.shell { width:min(1180px,calc(100% - 64px)); margin:auto; }
.topbar { min-height:105px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:16px; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; flex-shrink:0; }
.brand-mark { width:43px; height:43px; background:var(--forest); display:grid; place-items:center; border-radius:50%; box-shadow:inset 0 0 0 6px #ffffff13; }
.brand-mark i { width:9px; height:18px; background:#e9d38a; border-radius:60% 0 60% 60%; transform:rotate(27deg); }
.brand strong { display:block; font:700 23px/1.1 "Songti SC","SimSun",serif; letter-spacing:.12em; }
.brand small { display:block; margin-top:7px; font-size:10px; color:var(--muted); letter-spacing:.1em; }
.entry-label { font-size:12px; letter-spacing:.08em; color:var(--muted); }
.eyebrow { font:600 10px/1.5 "Cascadia Code",monospace; letter-spacing:.18em; margin:0 0 12px; color:var(--forest); }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:"Songti SC","Noto Serif CJK SC","SimSun",serif; }
h1 { font-size:48px; line-height:1.18; font-weight:700; margin-bottom:20px; letter-spacing:-.04em; }
h1 span { color:#75945e; }
h2 { font-size:27px; line-height:1.2; margin-bottom:0; font-weight:700; }
.muted { color:var(--muted); }
.primary { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:46px; padding:11px 24px; border:1px solid var(--forest); border-radius:12px; background:var(--forest); color:#fffdf4; font-weight:600; text-decoration:none; transition:background .2s,transform .2s; }
.primary:hover:not(:disabled) { background:#236548; transform:translateY(-1px); }
.quiet { border:0; background:transparent; color:var(--muted); padding:10px 8px; min-height:44px; }
.quiet:hover:not(:disabled) { color:var(--forest); }
footer { display:flex; justify-content:space-between; gap:14px; padding:35px 0 26px; margin-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.login-layout { display:grid; grid-template-columns:1.08fr 1fr; align-items:center; gap:80px; padding:58px 24px 45px; min-height:690px; }
.welcome h1 { font-size:64px; margin:24px 0; line-height:1.14; }
.welcome-note { color:var(--muted); line-height:1.9; }
.login-card { padding:40px; background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:0 18px 60px #203c2710; }
.login-card h2 { font-size:32px; margin-bottom:18px; }
.login-card label { display:block; font-weight:600; margin:23px 0 8px; }
.login-card input { width:100%; min-height:50px; border:1px solid #cfd7c8; background:#fffefa; color:var(--ink); padding:12px 14px; border-radius:10px; }
.login-card input::placeholder { color:#91998b; }
.input-help { margin:10px 0 0; font-size:12px; color:var(--muted); line-height:1.8; }
.login-submit { width:100%; margin-top:24px; justify-content:space-between; }
.login-footnote { margin:23px 0 0; font-size:12px; color:var(--muted); text-align:center; }
.paper-pictures { height:211px; width:270px; position:relative; margin:30px 0 0 50px; }
.paper-picture { position:absolute; width:155px; height:178px; padding:10px; background:#fffefa; border:1px solid #e0e2d5; box-shadow:0 8px 18px #23382e14; }
.paper-picture.back { left:10px; top:3px; transform:rotate(-14deg); background:#dbe2ce; }
.paper-picture.front { left:65px; top:15px; transform:rotate(8deg); }
.paper-picture span { display:block; font:5px/1 monospace; margin-top:13px; text-align:center; letter-spacing:.1em; }
.picture-scene { height:131px; background:#a6b892; position:relative; overflow:hidden; }
.picture-scene::before,.picture-scene::after { content:""; position:absolute; width:180px; height:90px; border-radius:50%; background:#598367; bottom:-34px; left:-67px; transform:rotate(-30deg); }
.picture-scene::after { background:var(--forest); left:29px; bottom:-28px; transform:rotate(38deg); }
.picture-scene i { position:absolute; width:28px; height:28px; border-radius:50%; background:#efdaa0; right:20px; top:22px; }
.round-seal { position:absolute; right:0; bottom:5px; width:70px; height:70px; display:grid; place-content:center; background:var(--forest); border-radius:50%; color:#e6d5a2; border:5px double #6c8a63; font:13px/1.5 "SimSun",serif; letter-spacing:.18em; transform:rotate(-12deg); }
.account-bar { display:flex; align-items:center; gap:18px; }
.account-name { overflow-wrap:anywhere; max-width:180px; font-weight:600; }
.intro { display:flex; justify-content:space-between; align-items:center; padding:42px 0 30px; gap:20px; }
.intro .muted { margin-bottom:0; }
.intro-stamp { width:90px; height:90px; border-radius:50%; border:1px solid #a8b89a; display:grid; place-content:center; text-align:center; color:#788c69; font:15px/1.7 "SimSun",serif; letter-spacing:.15em; transform:rotate(10deg); flex-shrink:0; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 318px; align-items:start; gap:24px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; }
.upload-panel { padding:28px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:24px; }
.section-heading .eyebrow { margin-bottom:7px; }
.status-pill { display:inline-flex; align-items:center; gap:7px; color:var(--forest); background:#e8eee0; border-radius:20px; padding:5px 10px; font-size:10px; white-space:nowrap; }
.status-pill i { width:5px; height:5px; border-radius:50%; background:#718e5f; }
.drop-zone { border:1px dashed #9faf90; border-radius:15px; padding:26px 18px 22px; text-align:center; background:#eff2e7; transition:background .2s,border-color .2s; }
.drop-zone.dragging { background:#dee8ce; border:2px solid var(--forest); padding:25px 17px 21px; }
.upload-illustration { width:83px; height:76px; color:var(--forest); }
.drop-zone h3 { font-size:18px; margin:4px 0 4px; }
.drop-zone p { color:var(--muted); font-size:12px; margin-bottom:15px; }
.drop-zone small { display:block; color:var(--muted); font-size:10px; margin-top:17px; }
.queue-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:54px; color:var(--muted); font-size:12px; padding-top:6px; }
.photo-queue { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.photo-item { min-width:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; position:relative; background:#fffdfa; }
.photo-preview { width:100%; height:108px; object-fit:cover; background:#e8e9dc; display:block; }
.photo-info { padding:8px 10px 10px; }
.photo-name { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:2px; }
.photo-status { display:block; color:var(--muted); font-size:10px; line-height:1.55; overflow-wrap:anywhere; }
.photo-item.success .photo-status { color:var(--forest); }
.photo-item.failed .photo-status { color:var(--danger); }
.remove-photo { position:absolute; right:3px; top:3px; width:34px; height:34px; border-radius:50%; background:#fffef2e8; color:var(--ink); border:1px solid #ffffff; font-size:21px; line-height:1; }
.submit-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:19px; margin-top:12px; }
.submit-row p { font-size:11px; color:var(--muted); margin:0; }
.submit-row button { flex-shrink:0; }
.message { padding:12px 14px; margin:16px 0 0; font-size:13px; color:var(--forest); background:#e5eedb; border:1px solid #b9c9a7; border-radius:10px; overflow-wrap:anywhere; }
.message.error { color:var(--danger); background:#fbebe4; border-color:#e1beb0; }
.upload-progress { margin:16px 0; }
.upload-progress label { color:var(--muted); font-size:12px; }
progress { display:block; width:100%; height:8px; accent-color:var(--forest); margin-top:7px; border:0; border-radius:8px; overflow:hidden; }
progress::-webkit-progress-bar { background:#e8ecdf; } progress::-webkit-progress-value { background:var(--forest); }
.ranking-column { display:grid; gap:18px; }
.my-contribution { padding:24px 25px 21px; background:var(--forest); border-radius:22px; color:#f7f3df; position:relative; overflow:hidden; }
.my-contribution::after { content:"＋"; position:absolute; right:12px; top:-20px; color:#ffffff08; font:140px/1.3 serif; }
.my-contribution p { font-size:12px; margin-bottom:9px; color:#d3dfc5; position:relative; z-index:1; }
.my-contribution div { display:flex; align-items:baseline; gap:10px; margin-bottom:13px; }
.my-contribution strong { font:500 52px/1.1 "Georgia",serif; }
.my-contribution div span { font-size:11px; color:#d3dfc5; }
.my-contribution p:last-child { font-size:11px; margin:0; }
.leaderboard { padding:24px; }
.leaderboard h2 { font-size:25px; }
.leaderboard .section-heading { margin-bottom:16px; }
.refresh-button { font-size:26px; width:40px; padding:0; }
.rank-list { list-style:none; padding:0; margin:0; }
.rank-row { display:flex; align-items:center; gap:12px; min-height:57px; border-bottom:1px solid var(--line); }
.rank-row.is-me { background:#eef2e4; border-radius:8px; padding:0 7px; margin:0 -7px; }
.rank-number { width:23px; flex-shrink:0; color:#8c9685; font:14px/1 "Georgia",serif; }
.rank-row:first-child .rank-number { color:var(--gold); }
.rank-name { flex:1; font-size:13px; min-width:0; overflow-wrap:anywhere; }
.rank-name small { font-size:9px; display:inline-block; margin-left:6px; color:#66804e; }
.rank-count { font-weight:600; flex-shrink:0; }
.rank-count small { font-size:10px; margin-left:4px; color:var(--muted); font-weight:400; }
.rank-note { font-size:10px; color:var(--muted); line-height:1.9; padding-top:20px; margin-bottom:9px; }
.rank-updated { font-size:10px; color:var(--muted); margin-bottom:0; }
.empty-ranking { padding:20px 0 14px; line-height:1.9; color:var(--muted); text-align:center; font:18px/1.9 "SimSun",serif; }
.error-card { max-width:560px; margin:70px auto; padding:40px; }
@media (max-width:900px) { .shell { width:calc(100% - 40px); } .workspace { grid-template-columns:minmax(0,1fr) 275px; gap:18px; } .upload-panel { padding:22px; } .photo-queue { grid-template-columns:repeat(2,minmax(0,1fr)); } .login-layout { gap:35px; padding:48px 0; } .welcome h1 { font-size:52px; } .login-card { padding:28px; } .status-pill { display:none; } }
@media (max-width:680px) { .shell { width:calc(100% - 32px); } .topbar { min-height:85px; } .brand strong { font-size:21px; } .brand small { font-size:9px; } .brand-mark { width:38px; height:38px; } .account-bar { gap:5px; font-size:11px; } .account-name { max-width:72px; } .intro { padding:30px 0 24px; } h1 { font-size:36px; } .intro .muted { font-size:12px; max-width:300px; } .intro-stamp { display:none; } .workspace { grid-template-columns:minmax(0,1fr); } .upload-panel { padding:20px; } h2 { font-size:24px; } .drop-zone { padding:20px 12px; } .drop-zone.dragging { padding:19px 11px; } .drop-zone small { font-size:9px; } .submit-row { flex-direction:column; align-items:stretch; gap:13px; } .submit-row button { width:100%; } .photo-preview { height:112px; } .ranking-column { gap:14px; } .my-contribution { padding:20px 24px; } .my-contribution div { margin-bottom:6px; } .my-contribution strong { font-size:42px; } footer { flex-direction:column; gap:5px; margin-top:20px; padding:24px 0; } .login-layout { display:block; min-height:auto; padding:30px 0; } .welcome h1 { font-size:41px; margin:15px 0; } .welcome-note { font-size:12px; margin-bottom:26px; } .paper-pictures { display:none; } .login-card { padding:26px 23px; } .login-card h2 { font-size:27px; } .login-card .muted { font-size:12px; } .error-card { padding:28px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }