:root { --paper:#fff5e3; --surface:#fffcf3; --ink:#284b3e; --text:#454333; --muted:#7b7967; --line:#e1d5b9; --soft:#f2ecd8; --accent:#dce9b9; --receipt:#315447; --radius:18px; }
body { background:#fff5e3 url('../anime-preview/assets/original/paper-texture.png') repeat; }
.site-header { background:#fffbf1e8; }
.shell-width,.workspace { width:min(1280px,calc(100% - 72px)); }
.workspace { margin-top:22px; }
.header-top { min-height:78px; gap:20px; }
.original-brand { width:132px; height:auto; mix-blend-mode:multiply; }
.primary-nav { gap:28px; }
.mine-scene { margin-bottom:34px; }
.scene-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; margin:4px 0 20px; }
.scene-heading h1 { font-size:28px; letter-spacing:-.5px; }
.scene-heading p { margin-top:5px; color:var(--muted); font-size:13px; }
.motion-button { border:1px solid #bfb697; border-radius:24px; padding:10px 16px; font-size:12px; min-height:44px; background:#fffaf0; }
.scene-layout { display:grid; grid-template-columns:minmax(0,3fr) minmax(250px,1fr); align-items:center; gap:22px; }
.scene-picture { min-width:0; }
.scene-artboard { position:relative; aspect-ratio:1048/536; }
.scene-original { display:block; width:100%; height:auto; aspect-ratio:1048/536; }
.scene-canvas { display:block; position:absolute; inset:0; width:100%; height:100%; aspect-ratio:1048/536; pointer-events:none; }
.scene-motion-feedback { padding:8px 12px; margin:8px 0; color:var(--muted); font-size:12px; background:var(--surface); border:1px solid var(--line); border-radius:10px; }
.scene-actions { display:flex; justify-content:space-between; gap:12px; padding:0 8% 0 3%; margin-top:-9px; position:relative; }
.scene-hotspot { font-size:12px; font-weight:600; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.scene-hotspot:hover { text-decoration:underline; }
.scene-overview { background:#fffdf6b8; border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 5px 0 #b7a98116; }
.scene-status { display:flex; align-items:center; gap:7px; font-size:11px; color:#6c7759; }
.scene-status i { width:7px; height:7px; background:#7d9e6a; border-radius:50%; }
.scene-overview h2 { font-size:19px; margin:15px 0 8px; }
.scene-overview p,.scene-overview small { font-size:12px; color:var(--muted); line-height:1.65; }
.scene-overview dl { margin:20px 0; }
.scene-overview dl div { display:flex; justify-content:space-between; font-size:12px; padding:8px 0; border-bottom:1px dashed var(--line); }
.scene-overview dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.scene-overview .button { width:100%; }
.scene-overview small { display:block; margin-top:12px; font-size:10px; }
.scene-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:24px; }
.scene-shortcuts button { display:flex; align-items:center; gap:13px; padding:18px; text-align:left; background:#fffcf2b8; border:1px solid var(--line); border-radius:15px; }
.scene-shortcuts button:hover { background:#f0f0d5; border-color:#a6ad83; }
.scene-shortcuts strong,.scene-shortcuts small { display:block; }
.scene-shortcuts strong { font-size:13px; color:var(--ink); }
.scene-shortcuts small { font-size:11px; color:var(--muted); margin-top:4px; }
.scene-shortcuts button>span:last-child { margin-left:auto; }
.shortcut-icon { width:33px; height:33px; flex-shrink:0; display:grid; place-items:center; background:#ebedd1; border-radius:10px; color:#587852; font-size:23px; }
.configuration-heading { margin-bottom:17px; }
.configuration-heading h2 { font-size:20px; }
.transaction-sheet { border-color:var(--line); box-shadow:0 5px 0 #b7a98113; }
.portfolio-art { display:flex; align-items:center; gap:25px; padding:12px 28px; border-bottom:1px solid var(--line); background:var(--paper); }
.portfolio-art img { width:135px; height:auto; }
.portfolio-art p { color:var(--muted); font-size:12px; }
.reward-strip { border-radius:12px; margin:20px 24px; background:#edf0d8; }
.ranking-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.ranking-card { padding:25px; border-radius:18px; border:1px solid var(--line); background:var(--surface); }
.ranking-card h2 { font-size:19px; }
.ranking-card>p,.ranking-footnote { color:var(--muted); font-size:12px; margin-top:7px; }
.ranking-card ol { list-style-position:inside; padding:0; margin:22px 0 0; }
.ranking-card li { padding:14px 0; border-top:1px dashed var(--line); font-size:13px; }
.ranking-card li a { margin-left:10px; }
.ranking-card li strong { float:right; overflow-wrap:anywhere; max-width:50%; }
.ranking-card .ranking-empty { list-style:none; color:var(--muted); }
.ranking-status { margin-bottom:20px; padding:13px 17px; background:#edf0d9; border-radius:10px; font-size:12px; }
.ranking-footnote { margin:20px 0; }
.recovery-notice { display:block; border:1px solid #bf9c58; border-radius:12px; padding:16px; background:#fff1ca; margin-block:14px; }
.recovery-notice small { display:block; overflow-wrap:anywhere; margin-top:8px; }
.recovery-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:12px; }
.recovery-controls input { flex:1; min-width:120px; padding:10px; border:1px solid var(--line); border-radius:6px; }
.recovery-controls .button { background:var(--ink); color:white; }
#mineForm { scroll-margin-top:24px; }
@media(max-width:1050px) { .scene-layout { grid-template-columns:minmax(0,2.5fr) minmax(220px,1fr); gap:12px; } .scene-overview { padding:18px; } .scene-shortcuts button { padding:13px; } .primary-nav { gap:23px; } .nav-row { flex-wrap:wrap; gap:0; } .chain-tools { margin-left:auto; } }
@media(max-width:760px) { .shell-width,.workspace { width:calc(100% - 32px); } .header-top { flex-wrap:wrap; gap:12px; padding-block:14px; } .header-controls { width:100%; margin:0; justify-content:space-between; } .environment { margin-left:auto; } .nav-row { display:block; } .primary-nav { overflow-x:auto; gap:24px; white-space:nowrap; } .chain-tools { justify-content:space-between; padding:4px 0; } .scene-layout { grid-template-columns:1fr; } .scene-overview { display:none; } .scene-heading { margin-top:10px; } .scene-heading h1 { font-size:25px; } .scene-heading p { max-width:240px; font-size:12px; } .motion-button { font-size:11px; padding:8px 11px; } .scene-shortcuts { grid-template-columns:1fr; gap:8px; margin-top:14px; } .scene-shortcuts button { padding:13px 15px; } .scene-shortcuts small { margin-top:2px; } .mine-scene { margin-bottom:26px; } .ranking-grid { grid-template-columns:1fr; } .portfolio-art { padding:12px; gap:10px; } .portfolio-art img { width:95px; } .reward-strip { margin:15px 12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.stake-scene-note { display:flex; align-items:center; gap:24px; margin:-12px 0 20px; }
.stake-scene-note img { width:105px; height:auto; mix-blend-mode:multiply; }
.stake-scene-note p { font-size:12px; color:var(--muted); }
@media(max-width:760px) {
  .original-brand { width:110px; }
  .header-top .environment { max-width:148px; font-size:9px; white-space:normal; text-align:center; padding:5px 8px; }
  .header-controls { gap:8px; }
  .header-controls .button-wallet { white-space:nowrap; padding:8px 9px; font-size:11px; gap:6px; }
  .network-control,.network-control select { font-size:11px; }
  .network-control select { max-width:94px; }
  .language-control { gap:2px; }
  .language-control button[lang="zh-CN"] { min-width:0; font-size:10px; }
  .primary-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; gap:0 12px; }
  .primary-nav button { padding:12px 4px; min-height:44px; }
  .primary-nav button[aria-selected="true"]::after { bottom:0; }
}
@media(max-width:380px) {
  .header-controls .button-wallet { width:44px; height:44px; padding:11px; flex:0 0 44px; }
  .header-controls .button-wallet [data-label] { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .language-control button[lang="zh-CN"] { min-width:44px; }
  .network-control { margin-right:0; }
}
@media(max-width:380px) { .header-controls .button-wallet .icon { display:inline-block; width:20px; height:20px; flex-basis:20px; } }
