:root { --ink:#17213b; --muted:#667085; --paper:#f5f7fb; --card:#fff; --navy:#14213d; --blue:#3c75ea; --sky:#e9f1ff; --mint:#23b785; --gold:#f5b942; --pink:#ee6b82; --line:#e7eaf0; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 8% 4%,#fff5d8 0,transparent 24rem),radial-gradient(circle at 95% 15%,#e6f4ff 0,transparent 28rem),var(--paper); color:var(--ink); font-family:"Hiragino Sans","Yu Gothic",system-ui,sans-serif; -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; } button { cursor:pointer; border:0; }
.app-shell { min-height:100vh; }
.topbar { height:76px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.9); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:9px; background:transparent; color:var(--navy); font-weight:850; font-size:20px; letter-spacing:.02em; }.brand-mark { width:34px; height:34px; display:grid; place-items:center; background:var(--navy); color:#fff; border-radius:11px; font-size:18px; }
.profile-mini { display:flex; align-items:center; gap:9px; font-weight:750; color:var(--navy); }.mini-avatar { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--sky);font-size:21px; }
.app { max-width:1100px; margin:auto; padding:30px 5vw 54px; }.eyebrow { color:var(--blue); font-size:13px; font-weight:800; letter-spacing:.09em; }.title { margin:5px 0 0; font-size:clamp(27px,4vw,42px); letter-spacing:-.04em; }.subtitle { color:var(--muted); margin:9px 0 0; font-size:16px; }
.profile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px; }.profile-card { min-height:228px; padding:25px; border-radius:24px; background:var(--card); text-align:left; box-shadow:0 5px 20px #263e6b0d; border:2px solid transparent; transition:.18s; }.profile-card:active{transform:scale(.98)} .profile-card:hover{border-color:#bad0ff}.avatar { width:72px;height:72px;border-radius:24px;display:grid;place-items:center;background:var(--sky);font-size:39px;margin-bottom:19px; }.profile-name{font-size:22px;font-weight:850}.profile-note{font-size:14px;color:var(--muted);margin-top:6px}.new-profile .avatar{background:#f1f2f5;color:var(--muted);font-size:38px}
.dashboard-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }.level-panel { min-width:270px; border-radius:19px; background:var(--navy); color:#fff; padding:16px 18px; }.level-row { display:flex; align-items:baseline; justify-content:space-between; font-weight:800; }.level-num { font-size:25px; }.xp-line { height:8px;border-radius:9px;background:#ffffff3b;margin-top:10px;overflow:hidden;}.xp-fill{height:100%;background:var(--gold);border-radius:inherit}.xp-caption{font-size:12px;color:#dbe4ff;margin-top:6px;text-align:right}
.quick-actions { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin:28px 0; }.action { min-height:118px; border-radius:22px; padding:21px 24px; color:#fff; text-align:left; position:relative; overflow:hidden; box-shadow:0 10px 22px #2549a72e; }.action::after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:#fff1;right:-23px;top:-32px}.action-main{background:linear-gradient(135deg,#466df0,#6954d9)}.action-sub{background:linear-gradient(135deg,#16b989,#48c998)}.action-label{font-size:13px;font-weight:800;opacity:.8}.action-title{font-size:23px;font-weight:850;margin-top:7px}.action-icon{position:absolute;right:20px;bottom:16px;font-size:31px;z-index:1}
.stats-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:28px}.stat { background:#fff;border:1px solid var(--line);border-radius:19px;padding:18px 20px; }.stat:first-child{background:#effbf7;border-color:#c9eedf}.stat:nth-child(2){background:#fff8e9;border-color:#f6e5b8}.stat-label{font-size:13px;color:var(--muted);font-weight:700}.stat-value{font-size:31px;font-weight:850;margin-top:6px;letter-spacing:-.04em}.stat-unit{font-size:14px;margin-left:4px}.section-title{font-size:21px;margin:0 0 14px;letter-spacing:-.03em}.drill-list{display:grid;gap:12px}.drill-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:17px 19px;border-left:6px solid #6388f4}.drill-card.tone-1{border-left-color:#e9778b;background:#fffafb}.drill-card.tone-2{border-left-color:#27b88b;background:#f9fffc}.drill-card-top{display:flex;justify-content:space-between;gap:14px;align-items:center}.drill-name{font-size:18px;font-weight:800}.drill-count{font-size:14px;color:var(--muted);white-space:nowrap}.progress{height:10px;background:#eef0f4;border-radius:8px;overflow:hidden;margin-top:13px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--blue),#74a4ff);border-radius:inherit}.tone-1 .progress-fill{background:linear-gradient(90deg,#e76f83,#f5a2a5)}.tone-2 .progress-fill{background:linear-gradient(90deg,#1eae82,#6ed2ae)}.edit-drill{margin-top:9px;padding:6px 0;background:transparent;color:#65749b;font-size:13px;font-weight:800}.complete-badge{font-size:11px;font-weight:900;color:#13845f;background:#dcf8ed;padding:5px 8px;border-radius:7px;white-space:nowrap}.empty{padding:31px 20px;text-align:center;border:2px dashed #d9dfeb;border-radius:18px;background:#fafbfe;color:var(--muted)}.empty-icon{font-size:30px;margin-bottom:6px}.text-button{background:none;color:var(--blue);font-weight:800;padding:8px;margin-top:5px}.collection{margin-top:30px}.collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.collection-card{padding:17px;border-radius:17px;background:#fff9e8;border:1px solid #f5df9c}.collection-stamp{font-size:11px;font-weight:900;color:#9d7410;letter-spacing:.08em}.collection-name{font-weight:850;margin-top:8px}
.companion-card{margin:25px 0 28px;padding:20px 22px;border-radius:23px;background:linear-gradient(120deg,#eef4ff,#f7f3ff);border:1px solid #dce7ff;display:flex;align-items:center;gap:19px}.companion-icon{font-size:61px;line-height:1;filter:drop-shadow(0 7px 7px #8fa8d466);animation:float 2.5s ease-in-out infinite}.companion-copy{flex:1}.companion-label{font-size:12px;color:var(--blue);font-weight:900;letter-spacing:.1em}.companion-name{font-size:22px;font-weight:900;margin-top:4px}.companion-desc{font-size:14px;color:var(--muted);margin-top:4px}.title-chip{display:inline-block;margin-top:9px;padding:5px 9px;border-radius:8px;background:#fff;color:#5b52a8;font-size:12px;font-weight:850}.rewards{margin-top:30px}.reward-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.reward-card{min-height:117px;padding:15px;border:1px solid var(--line);background:#fff;border-radius:18px}.reward-card.locked{opacity:.46;background:#fafbfc;filter:grayscale(.7)}.reward-icon{font-size:28px}.reward-name{font-size:14px;font-weight:900;margin-top:7px}.reward-desc{font-size:12px;color:var(--muted);margin-top:3px}.settings-row{margin-top:25px;text-align:center}.danger{background:#fff0f2;color:#c63f54}.danger-outline{color:#c63f54;background:transparent;font-weight:800;padding:12px 5px;width:100%;margin-top:12px}.warning-box{background:#fff4f5;border-radius:14px;padding:13px 15px;color:#9e3345;font-size:14px;line-height:1.55;margin-top:18px}@keyframes float{50%{transform:translateY(-7px) rotate(3deg)}}
.companion-collection{margin:-12px 0 28px;padding:18px;border-radius:21px;background:#fff;border:1px solid #e1dcfb}.companion-collection-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.companion-collection-title{font-weight:900;font-size:17px;margin-top:3px}.next-companion{padding:7px 9px;border-radius:9px;background:#f1edff;color:#6b54b5;font-size:12px;font-weight:850;white-space:nowrap}.companion-choice-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.companion-choice{min-height:69px;padding:6px 2px;border-radius:13px;background:#f5f3ff;color:#5c488d;text-align:center}.companion-choice span{display:block;font-size:26px;line-height:1}.companion-choice strong{display:block;font-size:10px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.companion-choice.selected{background:#7453c7;color:#fff;box-shadow:0 5px 12px #7250ba4d}.companion-choice.locked{background:#f5f6f8;color:#a3a8b3;filter:grayscale(.8)}
.battle-card{margin:-12px 0 28px;padding:18px 20px;border-radius:22px;background:linear-gradient(135deg,#fff1e6,#fffaf0);border:1px solid #ffd3ad;box-shadow:0 9px 20px #dc8a3320}.battle-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.battle-label{font-size:12px;font-weight:900;letter-spacing:.09em;color:#b65f22}.coin-count{font-weight:900;color:#a86a13;background:#fff;padding:7px 10px;border-radius:10px}.battle-body{display:flex;align-items:center;gap:15px;margin-top:10px}.battle-foe{font-size:47px;filter:drop-shadow(0 5px 4px #bb6b3a44);animation:battleBob 2s ease-in-out infinite}.battle-name{font-size:19px;font-weight:900}.hp-text{font-size:13px;font-weight:800;color:#a5572b;margin-top:4px}.foe-hp{height:11px;background:#f7d6c1;border-radius:10px;overflow:hidden;margin-top:8px}.foe-hp-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#ed6f67,#f4a14d);transition:width .4s}@keyframes battleBob{50%{transform:translateY(-4px) rotate(-4deg)}}
.attack-power{font-size:12px;font-weight:850;color:#6c54c5;margin-top:5px}.boss-card{margin:-12px 0 28px;padding:19px 20px;border-radius:22px;background:linear-gradient(135deg,#322262,#7351b8);color:#fff;box-shadow:0 10px 25px #39226b40}.boss-top{display:flex;align-items:center;justify-content:space-between}.boss-label{font-size:12px;font-weight:900;letter-spacing:.1em;color:#ebd8ff}.boss-reward{font-size:12px;font-weight:900;color:#3b286d;background:#ffe281;border-radius:9px;padding:6px 9px}.boss-body{display:flex;align-items:center;gap:14px;margin:10px 0 13px}.boss-icon{font-size:49px;filter:drop-shadow(0 5px 5px #0004)}.boss-name{font-size:19px;font-weight:900}.boss-desc{font-size:13px;color:#e6dcff;margin-top:3px}.boss-button{width:100%;min-height:48px;border-radius:13px;background:#fff;color:#4c318d;font-size:16px;font-weight:900}.rps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:17px 0}.rps-choice{min-height:74px;border-radius:17px;background:#f0ecff;color:#473287;font-size:27px;font-weight:900}.rps-choice span{display:block;font-size:12px;margin-top:3px}.boss-status{padding:13px 15px;border-radius:14px;background:#f5f0ff;color:#563c9d;font-weight:800;line-height:1.5;margin-top:16px}.boss-hp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.boss-hp-box{padding:11px;border-radius:13px;background:#f5f1ff;text-align:center;color:#473287;font-size:13px;font-weight:850}.boss-hp-box strong{display:block;font-size:22px;margin-top:2px}.boss-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px}.heal-button{background:#e8faf0;color:#137951}
.modal-backdrop{position:fixed;inset:0;background:#14213d85;z-index:10;display:grid;place-items:end center;padding:16px}.modal{width:min(650px,100%);background:#fff;border-radius:28px 28px 20px 20px;padding:26px;max-height:90vh;overflow:auto}.modal h2{margin:0;font-size:26px;letter-spacing:-.04em}.modal p{color:var(--muted);margin:7px 0 20px}.close{float:right;background:#f0f2f6;color:var(--ink);width:38px;height:38px;border-radius:50%;font-size:21px}.field-label{font-size:14px;font-weight:800;display:block;margin:19px 0 8px}.text-input{width:100%;padding:15px;border-radius:13px;border:2px solid var(--line);font-size:18px;color:var(--ink)}.text-input:focus{outline:none;border-color:var(--blue)}.avatar-picker{display:flex;gap:9px;flex-wrap:wrap}.avatar-option{width:48px;height:48px;border-radius:14px;background:var(--sky);font-size:24px}.avatar-option.selected{outline:3px solid var(--blue)}.modal-actions{display:flex;gap:10px;margin-top:26px}.primary,.secondary{min-height:55px;border-radius:15px;padding:0 21px;font-weight:850;font-size:17px}.primary{background:var(--blue);color:#fff;flex:1}.secondary{background:#edf1f8;color:var(--ink)}.drill-choice{width:100%;padding:16px;margin:8px 0;border-radius:15px;background:#fff;border:2px solid var(--line);text-align:left;font-weight:800;font-size:17px}.drill-choice.selected{border-color:var(--blue);background:var(--sky)}.stepper{display:flex;align-items:center;justify-content:center;gap:20px;margin:17px 0}.stepper button{width:61px;height:61px;border-radius:18px;background:var(--sky);color:var(--blue);font-size:34px;font-weight:500}.stepper-value{font-size:41px;font-weight:900;min-width:76px;text-align:center}.stepper-label{text-align:center;font-weight:700;color:var(--muted);margin-top:-12px}.celebration{position:fixed;inset:0;z-index:20;background:#14213de8;display:grid;place-items:center;padding:20px;text-align:center;color:#fff}.celebration-card{background:linear-gradient(145deg,#315ee0,#18337f);border-radius:32px;padding:44px 35px;max-width:440px;width:100%;box-shadow:0 20px 60px #0007}.celebrate-icon{font-size:70px;animation:bounce .65s infinite alternate}.celebration h2{font-size:33px;margin:14px 0 8px}.celebration p{color:#dce8ff;margin:0 0 25px}@keyframes bounce{to{transform:translateY(-10px) rotate(8deg)}}
@media(max-width:650px){.topbar{height:65px}.app{padding:24px 18px 40px}.profile-grid{grid-template-columns:1fr;gap:12px;margin-top:25px}.profile-card{min-height:122px;display:grid;grid-template-columns:78px 1fr;align-items:center;padding:18px}.profile-card .avatar{margin:0}.dashboard-head{display:block}.level-panel{margin-top:20px}.quick-actions{grid-template-columns:1fr 1fr;gap:11px}.action{min-height:136px;padding:17px}.action-title{font-size:18px}.stats-grid{gap:11px}.modal{padding:23px 19px}.profile-mini{font-size:0}.mini-avatar{font-size:20px}.companion-choice-grid{grid-template-columns:repeat(4,1fr)}}