:root {
  --ink:#193D41; --ink-deep:#0C3135; --muted:#617779; --cream:#F8F6F0;
  --paper:#FFFDF8; --teal:#2F7777; --teal-light:#DAEBE7;
  --peach:#E6A776; --peach-soft:#FAE8D7; --stroke:#E2E8E3;
  --shadow:0 14px 46px rgba(17,58,56,.08); --radius:22px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  color:var(--ink); background:var(--cream); font-synthesis:none;
}
*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input{font:inherit}
button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}a{color:inherit;text-decoration:none}
#app{min-height:100vh}.shell{max-width:1120px;margin:auto;padding:28px 24px 52px}.shell.narrow{max-width:700px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:30px}
.brand-mark{height:42px;width:42px;background:var(--ink);border-radius:13px;color:#fff;display:grid;place-items:center;font-size:12px;letter-spacing:-.5px;font-weight:800;box-shadow:0 5px 18px rgba(27,75,76,.17)}
.brand-text{font-size:12px;letter-spacing:1.3px;font-weight:800}.brand-sub{font-size:11px;color:var(--muted);margin-top:2px;letter-spacing:.1px}
.hero{background:linear-gradient(135deg,#E4EEE8 0%,#F7F0E8 60%,#FCF3E8 100%);border-radius:32px;padding:42px;position:relative;overflow:hidden;border:1px solid rgba(90,145,133,.1)}
.hero::after{content:"";position:absolute;border:1px solid rgba(52,112,111,.13);width:360px;height:360px;border-radius:50%;right:-140px;top:-145px;pointer-events:none;box-shadow:0 0 0 70px rgba(255,255,255,.19),0 0 0 140px rgba(255,255,255,.10)}
.eyebrow{font-size:12px;color:var(--teal);letter-spacing:2px;font-weight:800;text-transform:uppercase}
h1{font-weight:800;letter-spacing:-1.1px;font-size:clamp(32px,4vw,54px);line-height:1.14;margin:18px 0 14px}h2{font-size:24px;line-height:1.3;letter-spacing:-.4px;margin:0}h3{margin:0;font-size:16px}.subtitle{font-size:16px;color:#5E7877;line-height:1.85;max-width:630px;margin:0}
.badge{display:inline-flex;align-items:center;gap:7px;border-radius:50px;padding:6px 11px;background:#E6F2ED;color:#34716C;font-size:11px;font-weight:800;white-space:nowrap}
.dot{height:7px;width:7px;background:#58B08F;border-radius:100%;display:inline-block;box-shadow:0 0 0 4px rgba(93,181,152,.14)}
.panel{background:var(--paper);border:1px solid var(--stroke);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.panel-title{font-size:18px;font-weight:800;margin-bottom:9px}.helper{font-size:13px;color:var(--muted);line-height:1.75}.small{font-size:12px;color:var(--muted)}.space{height:18px}.divider{height:1px;background:var(--stroke);margin:22px 0}
.btn{border:0;border-radius:14px;background:var(--ink);color:#fff;font-weight:800;min-height:48px;padding:12px 19px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;transition:transform .12s,background .12s}
.btn:active{transform:scale(.985)}.btn:hover:not(:disabled){background:#245B5F}.btn.secondary{background:#E5EEEA;color:var(--ink)}.btn.secondary:hover:not(:disabled){background:#D9E9E3}
.btn.ghost{color:var(--ink);background:transparent;border:1px solid #D8E3DE}.btn.ghost:hover:not(:disabled){background:#F0F5F1}.btn.danger{background:#FFF0E9;color:#A24F40}.btn.danger:hover:not(:disabled){background:#FFE7DB}
.btn.wide{width:100%}.btn.small-btn{min-height:37px;padding:9px 13px;font-size:12px;border-radius:10px}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.input{border:1.5px solid #D7E1DC;border-radius:12px;background:#fff;outline:0;min-height:47px;padding:12px 14px;width:100%;color:var(--ink)}.input:focus{border-color:var(--teal);box-shadow:0 0 0 3px #2F77771A}
.form-label{display:block;margin:0 0 9px;font-size:13px;font-weight:750}.form-row{margin-bottom:17px}
.home-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:22px}.how-steps{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.pill-step{display:inline-flex;gap:9px;align-items:center;border:1px solid #D9E3DC;background:rgba(255,255,255,.8);padding:9px 12px;border-radius:12px;font-size:12px;color:#496363}
.pill-step b{background:#DBECE7;width:22px;height:22px;border-radius:100%;display:grid;place-items:center;color:var(--teal)}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.page-head h1{margin:6px 0 8px;font-size:clamp(28px,4vw,42px)}
.section-kicker{font-size:11px;color:var(--teal);font-weight:800;letter-spacing:2px}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:19px 0 15px}
.role-card{border:2px solid #E3E8E2;background:#fff;border-radius:18px;padding:17px 13px;text-align:left;color:var(--ink);min-height:98px;position:relative;transition:border-color .15s,background .15s}
.role-card.active{border-color:#38817E;background:#EAF4EF}.role-card .role-icon{font-size:24px;display:block;margin-bottom:6px}.role-card .role-name{font-weight:800;font-size:16px}.role-card .role-desc{display:block;margin-top:3px;font-size:11px;color:var(--muted)}.role-card.active::after{content:"✓";position:absolute;right:14px;top:12px;color:#2D8079;font-weight:900}
.budget-strip{display:flex;justify-content:space-between;align-items:center;background:#E9F1EA;border-radius:16px;padding:17px 20px;gap:8px;margin-bottom:20px}
.budget-num{font-size:36px;font-weight:850;letter-spacing:-2px;line-height:1}.budget-num.zero{color:var(--teal)}
.progress-track{height:8px;width:100%;background:#E7ECE7;border-radius:20px;overflow:hidden;margin:12px 0 3px}.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#E6A776,#6BA7A0);border-radius:20px;transition:width .16s}
.goals{display:grid;gap:1px}.goal-control{padding:19px 0;border-bottom:1px solid #EDF0E9}.goal-control:last-child{border-bottom:0}
.goal-line{display:flex;justify-content:space-between;gap:10px;align-items:center}.goal-identity{display:flex;align-items:center;gap:12px}.goal-emoji{font-size:23px;width:41px;height:41px;border-radius:12px;background:#F5F3EA;display:grid;place-items:center}.goal-name{font-size:15px;font-weight:800}.goal-en{font-size:11px;color:#859494;margin-top:3px}.goal-value{font-weight:850;font-size:24px;letter-spacing:-.7px;font-variant-numeric:tabular-nums}.goal-coin{font-size:11px;font-weight:400;color:var(--muted)}
.range-wrap{margin:13px 1px 0}.slider{width:100%;height:8px;appearance:none;-webkit-appearance:none;outline:0;border-radius:40px;background:linear-gradient(to right,var(--teal) 0%,var(--teal) var(--fill),#E7ECE7 var(--fill),#E7ECE7 100%);cursor:pointer;display:block}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:23px;height:23px;border-radius:50%;background:#fff;border:4px solid var(--teal);box-shadow:0 2px 6px #213F3540}
.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--teal);box-shadow:0 2px 6px #213F3540}.range-ticks{display:flex;justify-content:space-between;color:#92A19D;font-size:10px;margin-top:12px}
.disclaimer{font-size:11px;color:#7C8D88;line-height:1.8}.results-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.stat{background:#F4F7F3;border:1px solid #E8EEE9;border-radius:16px;padding:16px 18px}.stat .n{font-size:34px;font-weight:850;font-variant-numeric:tabular-nums;line-height:1.2}.stat .sub{font-size:12px;color:var(--muted);margin-top:5px}.stat.parent .n{color:#B97441}.stat.principal .n{color:var(--teal)}
.chart-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:17px}.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#667D7C;margin-top:6px}.swatch{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:6px;background:var(--peach)}.swatch.school{background:var(--teal)}
.chart-goals{display:grid;gap:20px}.chart-line{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:10px}.chart-name{font-size:13px;font-weight:800;white-space:nowrap}.chart-en{font-size:10px;color:#90A09F;margin-top:3px}.bars{display:grid;gap:5px}.bar-unit{display:flex;align-items:center;gap:9px;min-height:18px}.bar-track{flex:1;border-radius:6px;height:15px;background:#F4F4EE;overflow:hidden;position:relative}.bar{height:100%;min-width:0;border-radius:6px;transition:width .65s cubic-bezier(.2,.8,.2,1)}.bar.parent{background:linear-gradient(90deg,#EEC5A3,#D99762)}.bar.principal{background:linear-gradient(90deg,#88BEB6,#2F7777)}.bar-number{min-width:43px;text-align:right;color:#4B6465;font-size:12px;font-weight:750;font-variant-numeric:tabular-nums}
.chart-note{color:#849591;font-size:11px;margin-top:18px;line-height:1.65}.join-card{text-align:center}.join-qr{width:188px;height:188px;background:#fff;border-radius:14px;padding:10px;display:block;object-fit:contain;margin:20px auto 12px;border:1px solid #E6E8E1}.room-code{font-weight:900;letter-spacing:3px;font-size:27px;color:var(--ink)}.join-url{font-size:11px;overflow-wrap:anywhere;color:var(--muted)}
.side-info{background:linear-gradient(135deg,#DDEDE6,#F9F0E3);border-radius:18px;padding:19px;margin-top:13px}.side-info h3{margin-bottom:10px}.side-info p{font-size:12px;line-height:1.9;margin:0;color:#526B69}
.submitted-head{background:#E9F3EE;padding:17px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:20px}.submitted-head strong{font-size:15px}.submitted-head .check{font-size:23px;color:var(--teal)}
.screen-shell{max-width:1350px}.screen-shell .page-head h1{font-size:clamp(32px,4vw,58px)}.screen-shell .results-layout{grid-template-columns:minmax(0,1fr) 240px}.screen-shell .chart-line{grid-template-columns:160px minmax(0,1fr)}.screen-shell .chart-goals{gap:29px}.screen-shell .chart-name{font-size:17px}.screen-shell .bar-track{height:22px}.screen-shell .bar-number{font-size:15px}.screen-shell .stats{margin-bottom:25px}
.screen-shell .stat .n{font-size:48px}.screen-shell .panel{padding:36px}.screen-shell .join-qr{width:175px;height:175px}
.loading-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;color:var(--muted)}.loading-orb{width:38px;height:38px;border:4px solid #E8EDE7;border-top-color:var(--teal);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;z-index:99;bottom:25px;left:50%;transform:translate(-50%,20px);background:#153C41;color:white;padding:12px 18px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:all .25s;box-shadow:0 8px 26px #0002;text-align:center;max-width:min(400px,90vw)}.toast.active{opacity:1;transform:translate(-50%,0)}
.empty-hint{background:#F3F7F2;border-radius:12px;padding:14px 17px;font-size:12px;color:#68817D;text-align:center;line-height:1.8}.host-tools{margin-top:20px;background:white;border-radius:18px;padding:20px;border:1px solid var(--stroke)}.host-tools-title{margin-bottom:9px;font-weight:850}.error-card{max-width:560px;margin:15vh auto;text-align:center}.error-card h1{font-size:32px}
@media(max-width:860px){.results-layout,.screen-shell .results-layout,.home-grid{grid-template-columns:1fr}.chart-line{grid-template-columns:105px minmax(0,1fr)}.sidebox{order:-1}.join-card{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;text-align:left}.join-card .join-qr{margin:0 auto}.screen-shell .chart-line{grid-template-columns:115px minmax(0,1fr)}.screen-shell .panel{padding:25px}}
@media(max-width:560px){.shell{padding:20px 15px 40px}.brand{margin-bottom:22px}.hero{padding:26px 21px;border-radius:23px}.hero h1{font-size:35px}.panel{padding:21px;border-radius:19px}.page-head{align-items:flex-start}.page-head h1{font-size:30px}.subtitle{font-size:14px}.role-card{padding:14px 11px}.role-card .role-name{font-size:14px}.role-card .role-desc{font-size:10px}.goal-control{padding:18px 0}.stat{padding:13px 10px}.stat .n{font-size:27px}.stat .sub{font-size:11px}.stats{gap:6px}.chart-line,.screen-shell .chart-line{grid-template-columns:98px minmax(0,1fr);gap:6px}.chart-name,.screen-shell .chart-name{font-size:12px}.bar-number,.screen-shell .bar-number{font-size:11px;min-width:35px}.chart-goals,.screen-shell .chart-goals{gap:18px}.screen-shell .panel{padding:20px}.screen-shell .stat .n{font-size:29px}.screen-shell .bar-track{height:17px}.join-card{display:block;text-align:center}.join-card .join-qr{margin:12px auto}.actions .btn{flex:1}.badge{font-size:10px}.panel-title{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}