/* MUDAN app visual system: clean paper, saturated ink, collectible characters. */
:root{--ink:#262335;--paper:#262335;--muted:#777285;--line:#e9e5ef;--card:#fff;--bg0:#faf9fd;--pop:#7050ed;--coral:#ff654f}
body{background:#eae7f0;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;letter-spacing:-.025em}#app{background:#faf9fd;box-shadow:0 0 60px #40375d12}.screen{color:var(--ink)}button,input{letter-spacing:inherit}button:focus-visible,a:focus-visible{outline:3px solid #7050ed;outline-offset:3px}
.bar{border:0;min-height:64px;margin-bottom:0}.bar-title{color:var(--ink);font-weight:800}.brand-mudan{font-family:inherit;font-size:22px;font-weight:900;letter-spacing:-.06em;display:flex;align-items:center;gap:6px}.brand-mudan small{font-family:inherit;font-size:10px;color:#898393;font-weight:600;letter-spacing:-.02em;margin-left:4px}.brand-star{display:inline-grid;place-items:center;width:31px;height:31px;font-size:23px;border-radius:11px;background:#ff654f;color:white;transform:rotate(-9deg)}.icon-btn{background:white;border:1px solid #ece8f1;color:var(--ink);border-radius:14px}.menu-toggle span{background:#30283f}
#screen-characters{padding:0 20px 96px}.welcome{text-align:left;padding:18px 0 23px}.welcome .eyebrow{font-size:11px;color:#7050ed;letter-spacing:0;font-weight:800}.welcome .char-heading{font-size:30px;line-height:1.25;letter-spacing:-.055em;font-weight:900;margin:12px 0}.char-heading em{color:var(--ink)}.welcome .char-sub{font-size:12px;line-height:1.6;color:#827b8e}.country-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:23px}.country-shortcuts button{background:#fff;border:1px solid #e9e5ef;border-radius:16px;padding:12px 3px;min-height:62px;color:#676173;cursor:pointer}.country-shortcuts b{display:block;font-size:14px;font-weight:800}.country-shortcuts span{display:block;font-size:9px;margin-top:5px;white-space:nowrap}.country-shortcuts button.selected{background:#30273e;border-color:#30273e;color:#fff;box-shadow:0 4px 9px #30273e18}
.selection-heading{margin:0 2px 9px}.selection-heading h2{font-size:17px;font-weight:850;display:flex;align-items:center;gap:6px}.count-pill{font-size:10px;background:#ede7ff;color:#7050ed;border-radius:7px;padding:3px 6px}.selection-heading>span{font-size:10px;color:#8b8496;letter-spacing:0}
.character-slider-viewport{padding:3px 0 8px}.character-slider-viewport .char-card{--tint:#ffe5df;--tone:#b33e32;flex-basis:94%;border:0;border-radius:27px;background:var(--tint);color:var(--ink);padding:19px 18px 14px;overflow:hidden;opacity:.6;box-shadow:none;position:relative;text-align:left}.character-slider-viewport .char-card[data-character=sol]{--tint:#e1efff;--tone:#285ca1}.character-slider-viewport .char-card[data-character=mali]{--tint:#fff0be;--tone:#896000}.character-slider-viewport .char-card[data-character=rin]{--tint:#f6dff0;--tone:#a73a7f}.character-slider-viewport .char-card[data-character=tao]{--tint:#d8f2e7;--tone:#24745b}.character-slider-viewport .char-card.is-selected{opacity:1;border:0}
.char-carousel .char-country{padding:0;gap:7px;align-items:flex-start;position:relative;z-index:1}.char-country-badge{background:#ffffffa8;border:0;color:var(--tone);padding:5px 9px;font-size:11px;font-weight:800;border-radius:8px}.char-carousel .char-method{font-size:31px;line-height:1.12;color:var(--ink);letter-spacing:-.05em}.char-carousel .char-avatar{height:175px;margin:-17px 0 -2px;width:100%;justify-content:center}.char-avatar:before{width:150px;height:150px;background:white;filter:none;opacity:.5;transform:rotate(-12deg);border-radius:46% 54% 51% 49%}.char-avatar:after{content:'✦';position:absolute;right:14px;top:32px;font-size:25px;color:var(--tone);opacity:.65}.char-avatar .cut-art{width:172px!important;height:178px!important;position:relative;z-index:1;filter:drop-shadow(0 7px 3px #49333912);max-width:none!important}.char-name{font-size:19px;font-weight:850;line-height:1.2}.char-ko{display:inline;font-size:9px;color:var(--tone);margin-left:5px;letter-spacing:.07em}.char-subtitle{padding:0;margin:8px 0 0;min-height:0;font-size:11px;line-height:1.5;color:#5b515d}.char-specialty{font-size:10px;color:var(--tone);margin-top:7px;font-weight:700}.char-card .char-cta,.char-card:hover .char-cta{display:flex;justify-content:space-between;align-items:center;margin:15px 0 0;border-radius:14px;background:#fff;color:#302638;padding:13px 15px;font-size:12px;font-weight:800}.char-cta>span{font-size:18px;line-height:1}
.slider-controls{margin-top:1px;gap:14px}.slider-controls .carousel-arrow{width:35px;height:35px;min-width:35px;min-height:35px;flex-basis:35px;background:#fff;border:1px solid #ebe6f0;color:#43394f;border-radius:12px;font-size:20px}.slider-controls .dot:after{background:#d8d1e2}.slider-controls .dot.active:after{background:#7050ed}.slider-status{font-size:9px;color:#908799;margin-top:0}.journey{display:none}.collection-teaser{margin-top:22px;background:#eee8ff;border:0;border-radius:20px;padding:15px;gap:12px}.collection-teaser .eyebrow{color:#6244c4;font-size:10px;letter-spacing:0}.collection-teaser p{color:#776b90;font-size:10px;line-height:1.6}.disclaimer{color:#9d94a7;font-size:9px}
.app-tabbar{display:none;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;box-sizing:border-box;padding:9px 40px max(10px,env(safe-area-inset-bottom));z-index:8;background:#ffffffed;backdrop-filter:blur(15px);border-top:1px solid #eee9f3;gap:30px;justify-content:center}body[data-screen=characters] .app-tabbar,body[data-screen=history] .app-tabbar{display:flex}.app-tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;color:#9c94a6;font-size:10px;font-weight:700;cursor:pointer}.app-tabbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}body[data-screen=characters] #tab-home,body[data-screen=history] #tab-history{color:#7050ed}
.flow-steps{color:#a198ad}.flow-steps b{border-color:#ddd5e8}.flow-steps .current{color:#7050ed}.flow-steps .current b{background:#7050ed;color:white;border-color:#7050ed}#screen-chat .bar-title{font-size:16px}#screen-chat .char-panel{border:0;border-radius:24px}#screen-chat .stage-speech{border:0;background:#fff;box-shadow:0 5px 20px #30203024;color:#302638;border-radius:20px;transform:none}#screen-chat .stage-speech:after{border:0;background:#fff}.speech-pages button{background:#f0eafa;color:#7050ed}.msg.ai .bubble{background:#fff;border:1px solid #ece6f3;color:#42384c}.msg.user .bubble{background:#7552ed;border:0;color:#fff}#screen-chat .chat-inputbar{background:#fff;border:1px solid #e7e0f1;box-shadow:0 3px 12px #51417108;border-radius:18px}#chat-input{color:#352840}#chat-input::placeholder{color:#a197ab}.send{background:#7552ed;color:#fff;border:0}.chip{background:#fff;border:1px solid #e9e2f2;color:#705882}.quick-actions .chip{font-weight:650}.btn{background:#fff;color:#59466b;border:1px solid #e5ddef}.btn.primary{background:#7050ed;color:#fff;border-color:#7050ed}
.choice-modal[open]{background:#fff!important;border:0!important;border-radius:28px!important;color:#302638!important;box-shadow:0 25px 70px #24163530}.choice-modal::backdrop,.side-menu::backdrop{background:#21133387;backdrop-filter:blur(7px)}.choice-modal .start-opt{background:#f5f1fa;border:1px solid #eee7f6;border-radius:15px;color:#594269;font-size:13px}.choice-modal .start-opt.primary,.choice-modal .btn.primary{background:#7050ed;color:#fff;border-color:#7050ed}.choice-modal .start-question,.choice-modal .concern-summary{color:#302638!important;font-weight:850}.choice-modal .eyebrow,.choice-modal .concern-label{color:#8a759b;letter-spacing:0}.choice-modal .modal-close{background:#f3eef9;color:#725885}.welcome-character{border:0;background:#f5f0ff;border-radius:20px;padding:12px 9px;margin-bottom:20px}.welcome-character-greeting>span{color:#7050ed}.welcome-character-greeting p{font-size:12px;color:#51425f}.welcome-character img{width:100px;height:125px}.side-menu{background:#fff;color:#302638;border:0}.side-menu h2{font-weight:900;letter-spacing:-.06em}.side-menu .eyebrow{color:#7050ed;letter-spacing:0}.drawer-note,.drawer-footer{color:#9a8aa9}.side-menu nav button,.side-menu nav a{color:#493455;border-color:#f0eaf5;font-weight:700}
.result-head{background:#f0e8ff;border:0;border-radius:26px;color:#3b2951}.result-kicker,.result-number{color:#9377af}.result-grade{color:#7050ed}.result-overview,.result-poem{color:#665075}.result-head:before,.result-head:after{color:#aa84f0}.card{background:#fff;border:1px solid #eee7f5;color:#53465f}.card h3{color:#7a5e95}.ai-card{background:#f2edff;border-color:#e8dfff}.ai-note{color:#9a84ad}.keyword{color:#7050ed}.result-actions{background:#faf9fdf0;border-color:#eae4f0}.si-score{color:#7050ed}.si-bar i,.gauge-fill{background:#8c6cf1}.gauge{background:#e8e1f1}.ritual-guide p,.quota,.hint{color:#93849f}.stage{border-color:#e9e0f3;background:radial-gradient(ellipse,#ede4ff,transparent 70%)}.history-item{background:#fff;border:1px solid #eee6f4;border-radius:20px}.hi-name,.history-empty h2{color:#483653}.hi-concern,.hi-fortune,.history-empty p{color:#93819e}.hi-date{color:#ac9ab8}#screen-history{padding-bottom:95px}
@media(max-width:350px){.welcome .char-heading{font-size:27px}.char-avatar .cut-art{width:153px!important;height:160px!important}.char-carousel .char-avatar{height:155px}.country-shortcuts{gap:5px}.country-shortcuts span{font-size:8px}.welcome-character img{width:82px}}
.random-start{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-radius:18px;background:#7050ed;color:#fff;padding:14px 15px;margin:0 0 22px;cursor:pointer;box-shadow:0 6px 15px #7050ed20}.random-icon{display:grid;place-items:center;width:38px;height:38px;background:#ffffff20;border-radius:12px;font-size:25px;flex:none}.random-start b{display:block;font-size:13px;font-weight:800}.random-start small{display:block;font-size:10px;color:#e2d8ff;margin-top:4px}.random-arrow{margin-left:auto;font-size:24px}.random-start:disabled{cursor:wait;opacity:1}.is-spinning .char-card.is-selected{box-shadow:inset 0 0 0 3px #7050ed}.is-spinning .character-slider-viewport{cursor:wait}.choice-modal .direct-draw{background:#fff0e7;border-color:#ffddca;color:#a94621;font-weight:800}
@media(prefers-reduced-motion:no-preference){.is-spinning .random-icon{animation:random-turn .55s linear infinite}@keyframes random-turn{to{transform:rotate(360deg)}}}