/* 老王的烤串 · 共享样式 v1 */
:root{
  --bg:#FFF6E9; --card:#FFFFFF; --line:#F0DFC8;
  --ink:#3D2C29; --ink2:#8A6F63;
  --red:#E8542F; --red-d:#C93F1E; --amber:#F2B544; --green:#5C8A4D; --loss:#4E7E46;
  --brown:#A9744F; --blue:#5B7FA6;
  --shadow:0 10px 30px rgba(120,72,32,.12); --r:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100dvh;background-image:radial-gradient(circle at 20% 10%, #FFF 0, transparent 40%),radial-gradient(circle at 85% 90%, #FFE7C2 0, transparent 45%)}
button{font-family:inherit;cursor:pointer;border:none;color:inherit}
input,textarea{font-family:inherit}
.wrap{max-width:980px;margin:0 auto;padding:20px 16px 64px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;text-decoration:none;color:var(--ink)}
.brand .logo{width:38px;height:38px;flex:none}
.brand small{font-size:12px;color:var(--ink2);font-weight:600}
.wallet{background:var(--card);border:2px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px;box-shadow:var(--shadow)}
.wallet b{color:var(--red);font-size:16px}
.steps{display:flex;gap:6px;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:5px 8px}
.step{font-size:12px;font-weight:700;color:var(--ink2);padding:4px 10px;border-radius:999px;transition:all .3s}
.step.on{background:var(--red);color:#fff}
.step.done{background:#F6E3C8;color:var(--brown)}
.screen{display:none;animation:fadeUp .5s cubic-bezier(.16,1,.3,1)}
.screen.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px}
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
@media (max-width:840px){.grid2{grid-template-columns:1fr}}
.scene{position:relative;border-radius:16px;overflow:hidden;border:2px solid var(--line);background:linear-gradient(#CDEBFF 0%, #EAF7FF 55%, #F7E8C9 55%, #EFD9B4 100%)}
.scene svg{display:block;width:100%;height:auto}
.speech{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.avatar{width:56px;height:56px;flex:none;border-radius:50%;border:2px solid var(--line);background:#FFE9D6;overflow:hidden}
.bubble{position:relative;background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 16px;font-size:15px;line-height:1.65;box-shadow:var(--shadow)}
.bubble::before{content:"";position:absolute;left:-10px;top:18px;border:6px solid transparent;border-right:8px solid var(--line)}
.bubble b{color:var(--red-d)}
.ctrl label{font-weight:800;font-size:15px;display:block;margin-bottom:4px}
.priceview{display:flex;align-items:baseline;gap:6px;margin:10px 0 6px}
.priceview .num{font-size:44px;font-weight:900;color:var(--red);line-height:1;font-variant-numeric:tabular-nums}
.priceview .unit{font-size:16px;color:var(--ink2);font-weight:700}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--amber),var(--red));outline:none;margin:12px 0 6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid var(--red);box-shadow:0 4px 10px rgba(200,63,30,.35);cursor:grab}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--red)}
input[type=range]:focus-visible{outline:3px solid var(--red-d);outline-offset:4px}
.marks{display:flex;justify-content:space-between;font-size:11px;color:var(--ink2);font-weight:600;padding:0 2px}
.hintbox{background:#FFF3DF;border:2px dashed #EBC48A;border-radius:12px;padding:10px 14px;font-size:13px;line-height:1.6;color:#7A5B2F;margin-top:14px}
.params{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.param{background:#FBF3E7;border:1.5px solid var(--line);border-radius:10px;padding:5px 10px;font-size:12.5px;font-weight:700;color:var(--brown)}
.param b{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff;font-weight:800;font-size:17px;padding:14px 30px;border-radius:14px;box-shadow:0 6px 0 var(--red-d),0 12px 24px rgba(200,63,30,.25);transition:transform .12s, box-shadow .12s;width:100%;margin-top:16px;text-decoration:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--red-d)}
.btn.ghost{background:#fff;color:var(--red-d);border:2px solid var(--red);box-shadow:0 6px 0 #F3C4B2}
.btn.sm{font-size:14px;padding:10px 18px;width:auto}
.btnrow{display:flex;gap:12px;margin-top:16px}
.btnrow .btn{margin-top:0}
.numgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
@media (max-width:640px){.numgrid{grid-template-columns:repeat(2,1fr)}}
.nbox{background:#FBF3E7;border:2px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.nbox .t{font-size:12px;color:var(--ink2);font-weight:700}
.nbox .v{font-size:26px;font-weight:900;margin-top:2px;font-variant-numeric:tabular-nums}
.nbox .v small{font-size:12px;font-weight:700;color:var(--ink2)}
.nbox.profit{background:#FDEDE7;border-color:#F3B9A6}
.nbox.profit .v{color:var(--red)}
.nbox.loss{background:#EAF4E6;border-color:#B9D8B0}
.nbox.loss .v{color:var(--loss)}
.pop{animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.notice{border-radius:12px;padding:10px 14px;font-size:13.5px;line-height:1.6;margin:10px 0;font-weight:600}
.notice.warn{background:#FFF3DF;border:2px dashed #EBC48A;color:#7A5B2F}
.notice.good{background:#EAF4E6;border:2px solid #B9D8B0;color:#3F6B34}
.notice.bad{background:#FBEAE4;border:2px solid #F3B9A6;color:#9C3416}
table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
th,td{border:1.5px solid var(--line);padding:8px 10px;text-align:left}
th{background:#FBF3E7;font-weight:800;color:var(--brown);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
tr.total td{background:#FDEDE7;font-weight:900;color:var(--red-d)}
.tbltitle{font-weight:800;font-size:14px;margin:18px 0 4px;display:flex;align-items:center;gap:8px}
.tbltitle::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--red)}
.chartbox{background:#FDFAF3;border:2px solid var(--line);border-radius:14px;padding:12px;margin-top:10px}
.chartbox .cap{font-size:12px;color:var(--ink2);font-weight:700;margin-top:6px;text-align:center}
.opt{display:flex;gap:10px;align-items:flex-start;background:#FBF3E7;border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:10px;cursor:pointer;transition:all .15s;text-align:left;width:100%;font-size:14.5px;line-height:1.5}
.opt:hover{border-color:var(--amber);transform:translateY(-1px)}
.opt.sel{border-color:var(--red);background:#FDEDE7;box-shadow:0 0 0 3px rgba(232,84,47,.15)}
.opt .dot{width:20px;height:20px;flex:none;border-radius:50%;border:2.5px solid var(--brown);margin-top:2px;position:relative}
.opt.sel .dot{border-color:var(--red)}
.opt.sel .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--red)}
.verdict{border-radius:16px;padding:16px 18px;margin-top:14px;font-size:15px;line-height:1.7;animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
.verdict.pass{background:#EAF4E6;border:2px solid #9CC78B;color:#33582A}
.verdict.fail{background:#FFF3DF;border:2px solid #EBC48A;color:#6B4E1F}
.verdict h3{font-size:17px;margin-bottom:6px}
.treebox{background:#FDFAF3;border:2px solid var(--line);border-radius:16px;padding:16px;overflow-x:auto}
.treebox svg{min-width:560px;width:100%;height:auto;display:block}
.gold{font-size:17px;font-weight:900;color:var(--red-d);background:linear-gradient(90deg,#FDEDE7,#FFF3DF);border-left:6px solid var(--amber);border-radius:12px;padding:14px 18px;line-height:1.7;margin:16px 0}
.stars{display:flex;gap:10px;justify-content:center;margin:18px 0 6px}
.star{width:54px;height:54px}
.star path{fill:#E8DCC8}
.star.on path{fill:var(--amber);stroke:#D99A23;stroke-width:1.5}
.star.on{animation:starpop .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes starpop{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1) rotate(0)}}
.nextlev{background:#FBF3E7;border:2px dashed #D9BE96;border-radius:14px;padding:14px 18px;font-size:14px;line-height:1.7;color:var(--brown)}
.nextlev b{color:var(--ink)}
.foot{text-align:center;font-size:12px;color:var(--ink2);margin-top:26px;line-height:1.8}
.levnav{display:flex;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}
.levnav a{font-size:14px;font-weight:700;color:var(--brown);text-decoration:none;background:#fff;border:2px solid var(--line);border-radius:12px;padding:10px 16px}
.levnav a:hover{border-color:var(--amber)}
.eventcard{background:linear-gradient(135deg,#FFF3DF,#FDEDE7);border:2px solid var(--amber);border-radius:16px;padding:16px 18px;font-size:15px;line-height:1.7;margin-bottom:14px;animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
.eventcard b{color:var(--red-d)}
.days{display:flex;gap:8px;margin:12px 0}
.day{width:38px;height:38px;border-radius:12px;background:#FBF3E7;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--ink2)}
.day.on{background:var(--red);border-color:var(--red-d);color:#fff}
.day.done{background:#F6E3C8;color:var(--brown)}
.seg{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.seg button{background:#FBF3E7;border:2px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:700;transition:all .15s}
.seg button.sel{border-color:var(--red);background:#FDEDE7;color:var(--red-d)}
textarea.answer{width:100%;min-height:110px;border:2px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14.5px;line-height:1.7;background:#FDFAF3;resize:vertical}
textarea.answer:focus{outline:3px solid rgba(232,84,47,.25);border-color:var(--red)}
.numline{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14.5px;font-weight:700}
.numline input{width:90px;border:2px solid var(--line);border-radius:10px;padding:8px 10px;font-size:16px;font-weight:800;text-align:center}
/* 大厅 */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
@media (max-width:840px){.hero{grid-template-columns:1fr}}
.h-title{font-size:40px;font-weight:900;letter-spacing:-1px;line-height:1.2}
.h-title span{color:var(--red)}
.h-sub{font-size:15px;color:var(--ink2);line-height:1.8;margin-top:12px}
.lvlgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:22px}
@media (max-width:840px){.lvlgrid{grid-template-columns:repeat(2,1fr)}}
.lvl{background:#fff;border:2px solid var(--line);border-radius:16px;padding:16px 14px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:all .15s;display:block}
.lvl:hover{transform:translateY(-3px);border-color:var(--amber)}
.lvl .no{font-size:11px;font-weight:800;color:#fff;background:var(--red);border-radius:8px;padding:2px 8px;display:inline-block}
.lvl h3{font-size:15px;margin:8px 0 4px}
.lvl p{font-size:11.5px;color:var(--ink2);line-height:1.5}
.lvl .st{margin-top:8px;display:flex;gap:2px}
.lvl .st svg{width:16px;height:16px}
.lvl .st path{fill:#E8DCC8}
.lvl .st .on path{fill:var(--amber)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}