@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap');
:root{--bg:#f6f7fb;--card:#fff;--text:#343642;--muted:#9197a4;--line:#e9eaf0;--pink:#ffe9f1;--pink-strong:#ec91b1;--green:#e9f8df;--purple:#efebff;--yellow:#fff5d9;--shadow:0 12px 32px rgba(61,67,91,.10)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#e9edf4}body{font-family:"Sarabun",system-ui,sans-serif;color:var(--text)}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app{width:min(100%,430px);min-height:100vh;margin:0 auto;background:var(--bg);position:relative}.view,.page{min-height:100vh}.page{display:none;padding:16px 14px 104px}.page.active{display:block}
.auth-view{padding:0 14px}.brand{text-align:center;padding:54px 20px 25px}.logo{width:82px;height:82px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:42px;background:linear-gradient(135deg,#ffe5ef,#eee9ff)}.brand h1{margin:0;font-size:28px}.brand p{margin:6px 0 0;color:var(--muted)}
.card,.profile-card,.wardrobe-panel,.form-card,.chat-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow)}.auth-card{margin:0}
label{display:block;font-size:13px;font-weight:600;margin-bottom:15px}input{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff;font-size:16px;outline:none}input:focus{border-color:#eab1c5;box-shadow:0 0 0 3px rgba(236,145,177,.12)}
.primary-btn,.feed-btn,.ghost-btn,.mini-btn,.checkin-submit,.line-btn{border:0;border-radius:15px;padding:12px 14px;font-weight:700}.primary-btn{width:100%;background:var(--pink);color:#87596b}.ghost-btn{background:#fff;border:1px solid var(--line);font-size:12px;color:#777d89}.message{font-size:12px;color:#b45161;margin-top:10px;min-height:18px}.help{text-align:center;font-size:11px;color:var(--muted);margin:8px 0 0}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.topbar h2{font-size:21px;margin:2px 0 0}.eyebrow{font-size:10px;color:var(--muted);letter-spacing:.11em}.header-actions{display:flex;align-items:center;gap:7px}.profile-shortcut{width:38px;height:38px;border:1px solid var(--line);border-radius:13px;background:#fff;font-size:20px}.back-btn{width:38px;height:38px;border:0;border-radius:12px;background:#fff;font-size:28px;color:#7a7f89;margin-right:10px}.header-grow{flex:1}

/* shared stats / pet */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:9px 7px;display:flex;align-items:center;justify-content:center;gap:5px;min-height:57px}.stat-icon{font-size:19px}.stat-card small{display:block;color:var(--muted);font-size:8.5px;line-height:1.1}.stat-card strong{display:block;font-size:13px;margin-top:3px}
.pet-scene-card{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:7px;margin-bottom:12px;overflow:hidden}.pet-canvas,.mini-canvas{position:relative;width:100%;aspect-ratio:3/4;border-radius:23px;overflow:hidden;background:#eaf5d9}.canvas-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.scene-bg{z-index:1}.pet-base{z-index:2;transition:filter .25s}.outfit-layer{z-index:3}.pet-base.hungry{filter:saturate(.72) brightness(.97)}
.pet-name-pill,.mood-bubble,.outfit-badge{position:absolute;z-index:5;background:rgba(255,255,255,.91);backdrop-filter:blur(6px);box-shadow:0 5px 16px rgba(64,75,52,.11)}.pet-name-pill{left:13px;top:13px;border-radius:999px;padding:8px 12px;font-size:12px}.mood-bubble{right:13px;top:13px;border-radius:15px 15px 4px 15px;padding:8px 11px;font-size:11px;color:#577649}.mood-bubble.hungry{color:#966070;background:rgba(255,240,245,.94)}.outfit-badge{left:13px;bottom:13px;border-radius:999px;padding:6px 10px;font-size:10px;color:#707787}.outfit-badge.hidden-badge{display:none}
.care-card,.friendship-card,.today-card,.daily-action-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:15px;box-shadow:0 8px 24px rgba(61,67,91,.06);margin-bottom:12px}.care-title-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.care-card h3{font-size:16px;margin:0}.care-card p{font-size:12px;color:var(--muted);margin:5px 0 12px}.status-dot{font-size:10px;border-radius:999px;padding:5px 8px;background:var(--green);color:#658c53}.status-dot.hungry{background:#fff0f4;color:#9c6274}.feed-btn{width:100%;background:linear-gradient(135deg,#fff0f5,#f4edff);color:#80576a;border:1px solid #f0d6df}.feed-btn:disabled{opacity:.55;cursor:not-allowed}
.friendship-head{display:flex;justify-content:space-between;align-items:center}.friendship-head small{display:block;font-size:9px;color:var(--muted);letter-spacing:.08em}.friendship-head strong{display:block;margin-top:2px}.friendship-head>span{font-size:12px;background:#fff0f5;border-radius:999px;padding:5px 9px;color:#8f6274}.progress{height:9px;border-radius:999px;background:#eceef3;margin:11px 0 6px;overflow:hidden}.progress>div{height:100%;width:0;background:linear-gradient(90deg,#f3a9bf,#cfc3ff);transition:width .3s}.friendship-card p{font-size:10px;color:var(--muted);margin:0}.today-card,.daily-action-card{display:flex;justify-content:space-between;align-items:center}.today-card small,.daily-action-card small{display:block;font-size:9px;color:var(--muted)}.today-card strong,.daily-action-card strong{font-size:13px}.mini-btn{background:#f1edff;color:#675d8d;padding:9px 12px}.mini-btn.done{background:var(--green);color:#648454}

/* knowledge */
.page-intro,.quiz-summary{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:15px;margin-bottom:12px}.page-intro>span{font-size:34px}.page-intro strong,.quiz-summary strong{display:block}.page-intro p,.quiz-summary p{font-size:11px;color:var(--muted);margin:3px 0 0}.video-list{display:grid;gap:12px}.video-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px}.video-thumb{height:145px;border-radius:17px;background:linear-gradient(135deg,#fce8f0,#eeeaff);display:grid;place-items:center;font-size:42px;color:#b48798}.video-copy{padding:10px 3px 8px}.video-copy small{font-size:9px;color:var(--muted)}.video-copy h3{font-size:15px;margin:2px 0}.video-copy p{font-size:11px;color:var(--muted);margin:0}.reward-chip{position:absolute;right:17px;top:17px;background:#fff8dd;color:#9a7d28;border-radius:999px;padding:5px 8px;font-size:10px}.video-btn{width:100%;border:0;border-radius:13px;padding:10px;background:#f2f3f7;color:#a0a5b1}

/* quiz */
.quiz-ring{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#ffe9f1,#eeeaff);display:flex;align-items:baseline;justify-content:center}.quiz-ring strong{font-size:22px;margin-top:16px}.quiz-ring span{font-size:11px;color:var(--muted)}
.quiz-card,.quiz-feedback,.quiz-complete{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow);margin-bottom:12px}.quiz-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:12px}.quiz-card h3{font-size:17px;line-height:1.55;margin:0 0 15px}.quiz-choices{display:grid;gap:9px}.quiz-choice{border:1px solid var(--line);border-radius:15px;background:#fafafd;padding:12px;text-align:left;color:var(--text)}.quiz-choice:hover{border-color:#eab2c4;background:#fff5f8}
.quiz-feedback{text-align:center}.feedback-icon{width:58px;height:58px;margin:0 auto 9px;border-radius:50%;display:grid;place-items:center;background:#eaf7e3;color:#6b9758;font-size:30px;font-weight:700}.feedback-icon.wrong{background:#fff0f3;color:#b86a7d}.quiz-feedback h3{margin:5px 0}.quiz-feedback p{font-size:12px;line-height:1.65;color:#686d77}.quiz-feedback small{display:block;color:var(--muted);margin-bottom:15px}
.quiz-complete{text-align:center}.complete-icon{font-size:50px}.quiz-complete h3{margin:7px 0}.quiz-complete p{margin:5px}.earned-stars{display:inline-block;background:#fff6d9;color:#907526;border-radius:999px;padding:7px 12px;margin:7px}.quiz-complete small{display:block;color:var(--muted);font-size:10px}.content-review-note{font-size:10px;color:#7d7048;background:#fff8e7;border-radius:14px;padding:10px;line-height:1.55}

/* check-in */
.success-banner{display:flex;gap:10px;align-items:center;background:#eef9e8;border:1px solid #d7eccb;border-radius:20px;padding:13px;margin-bottom:12px;color:#668653}.success-banner>span{width:34px;height:34px;border-radius:50%;background:#79ad62;color:#fff;display:grid;place-items:center}.success-banner p{margin:2px 0 0;font-size:10px}.checkin-form{display:grid;gap:12px}.form-card{box-shadow:none}.section-heading.simple{margin-bottom:12px}.section-heading.simple small{font-size:9px;color:var(--muted)}.section-heading.simple h3{margin:2px 0 0;font-size:16px}.check-row{display:flex;align-items:center;gap:10px;background:#f8f9fb;border-radius:15px;padding:12px;margin:0}.check-row input{width:20px;height:20px;margin:0}.check-row strong{display:block;font-size:13px}.check-row small{display:block;color:var(--muted);font-weight:400;font-size:10px}.checkin-submit{width:100%;background:linear-gradient(135deg,#fff0f5,#f4edff);color:#80576a}.checkin-submit:disabled{background:#eef6ea;color:#718665}.form-note{text-align:center;font-size:10px;color:var(--muted);margin:-4px 0 0}

/* dress + shop */
.shop-balance{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:12px}.wardrobe-preview{background:#fff;border:1px solid var(--line);border-radius:25px;padding:7px;box-shadow:var(--shadow);margin-bottom:12px}.mini-canvas{border-radius:20px}.wardrobe-tabs{display:grid;grid-template-columns:1fr 1fr;background:#eceef3;padding:4px;border-radius:16px;margin-bottom:11px}.wardrobe-tab{border:0;border-radius:13px;background:transparent;padding:10px;color:#858b97}.wardrobe-tab.active{background:#fff;color:#87596b;font-weight:700;box-shadow:0 4px 12px rgba(50,55,75,.08)}.wardrobe-content{display:none}.wardrobe-content.active{display:block}.wardrobe-panel{box-shadow:none}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-heading small{font-size:9px;color:var(--muted);letter-spacing:.1em}.section-heading h3{margin:2px 0 0;font-size:17px}.prototype-tag,.price-rule{font-size:9px;background:#fff1f5;color:#9b6173;padding:5px 8px;border-radius:999px}
.item-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.item-card{border:2px solid transparent;border-radius:18px;background:#f8f9fc;padding:8px;color:var(--text)}.item-card.active{border-color:#efaec3;background:#fff2f6}.item-card img,.item-preview{width:100%;height:118px;object-fit:contain}.item-preview{display:grid;place-items:center;font-size:30px;color:#b5bac5}.item-card span{display:block;font-size:12px;font-weight:600}.owned-label{display:inline-block!important;color:#6f955d!important;background:#eaf7e4;padding:3px 6px;border-radius:999px;margin-top:4px}
.shop-catalog{display:grid;gap:9px}.shop-item{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:10px;background:#f8f9fb;border-radius:16px;padding:8px}.shop-item img,.coming-art{width:62px;height:62px;object-fit:contain}.coming-art{display:grid;place-items:center;font-size:30px}.shop-item strong{display:block;font-size:13px}.shop-item small{color:var(--muted);font-size:10px}.shop-item button{border:0;border-radius:11px;padding:8px 9px;background:#eaf6e4;color:#698a58}.shop-item.coming button{background:#eceef3;color:#a1a5ae}.notice{font-size:11px;color:var(--muted);line-height:1.55;margin:12px 0 0}

/* chat */
.kb-badge{font-size:9px;background:#eef8e9;color:#668b55;border-radius:999px;padding:6px 9px}.bot-head{display:flex;align-items:center;gap:10px;margin-bottom:15px}.bot-head>span{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:var(--pink);font-size:24px}.bot-head strong{display:block}.bot-head small{display:block;color:var(--muted);font-size:10px}.chat-log{max-height:310px;overflow-y:auto;padding:4px 1px 8px}.chat-row{display:flex;margin:8px 0}.user-row{justify-content:flex-end}.bot-row{justify-content:flex-start}.chat-bubble{max-width:88%;padding:11px 13px;border-radius:16px;font-size:12px;line-height:1.55}.chat-bubble.bot{background:#f3f4f7;border-bottom-left-radius:4px}.chat-bubble.user{background:#fff0f5;color:#744f5e;border-bottom-right-radius:4px}.chat-bubble small{display:block;color:#8b909a;font-size:9px;margin-top:7px}.chat-bubble a{display:inline-block;font-size:9px;color:#7d72a8;margin-top:3px}.quick-questions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}.quick-questions button{border:1px solid var(--line);background:#fff;border-radius:13px;padding:9px;text-align:left;font-size:10px}.chat-form{display:grid;grid-template-columns:1fr auto;gap:7px}.chat-form input{margin:0}.chat-form button{border:0;border-radius:13px;padding:0 15px;background:#ffe9f1;color:#85586a;font-weight:700}.consult-note{margin-top:12px;padding:10px;border-radius:13px;background:#fff7df;font-size:10px;color:#806f3e;line-height:1.5}.line-btn{width:100%;margin-top:12px;background:#eef0f4;color:#a0a4ae;cursor:not-allowed}

/* profile */
.profile-card{text-align:center}.profile-avatar{width:72px;height:72px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ffe9f1,#eef8e9);font-size:35px}.profile-id{padding:5px 0 18px}.profile-id span,.profile-id small{display:block;color:var(--muted);font-size:11px}.profile-id strong{display:block;font-size:20px;margin:2px 0}.profile-card form{text-align:left}

/* nav */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,430px);display:grid;grid-template-columns:repeat(5,1fr);padding:7px 5px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);z-index:30;backdrop-filter:blur(12px)}.nav-btn{border:0;background:none;border-radius:14px;padding:5px 2px;color:var(--muted);font-size:9px;min-width:0}.nav-btn span{display:block;font-size:20px;line-height:1.1;margin-bottom:2px}.nav-btn.active{background:#fff0f5;color:#87596b;font-weight:700}.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:#343642;color:#fff;padding:10px 15px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:99;font-size:12px;white-space:nowrap}.toast.show{opacity:1}
@media(min-width:700px){body{padding:24px 0}.app{min-height:844px;border-radius:34px;overflow:hidden;box-shadow:0 25px 80px rgba(49,53,72,.18)}}