:root{
--bg:#f7f5ff;--card:#fff;--text:#1c1231;--muted:#746b88;--line:#e7def5;
--purple:#5b21b6;--violet:#7c3aed;--pink:#db2777;--orange:#f97316;--green:#059669;--blue:#2563eb;--yellow:#f59e0b;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#fbfaff,#f5f6fb);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{max-width:760px;margin:auto;min-height:100vh;padding-bottom:92px}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 16px 12px;background:rgba(251,250,255,.92);backdrop-filter:blur(18px)}
.topbar h1{margin:2px 0 0;font-size:28px}.top-actions{display:flex;gap:8px}.icon-btn,.lang-pill{height:42px;min-width:44px;border:1px solid var(--line);background:#fff;border-radius:14px;box-shadow:0 8px 22px rgba(40,25,75,.08)}.lang-pill{font-weight:900;color:var(--purple)}
.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:900;color:var(--muted)}.eyebrow.white{color:rgba(255,255,255,.82)}
.screen{display:none;padding:0 14px 24px}.screen.active{display:block}
.vision-banner{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:18px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#111827,#3b0764 55%,#7c3aed);box-shadow:0 16px 34px rgba(59,7,100,.22);margin-bottom:12px}.vision-icon{font-size:28px;display:grid;place-items:center}.vision-banner h2{margin:4px 0 5px;font-size:18px;line-height:1.35}.vision-banner p{margin:0;color:rgba(255,255,255,.72);font-size:12px;line-height:1.45}
.hero{position:relative;overflow:hidden;color:#fff;border-radius:26px;padding:22px;background:linear-gradient(135deg,#4c1d95,#7c3aed 55%,#db2777);box-shadow:0 20px 40px rgba(124,58,237,.22);margin-bottom:12px}.hero-kicker{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:10px}.quote-en{font-size:21px;line-height:1.35;font-weight:850}.quote-vi{margin-top:9px;opacity:.82;line-height:1.5}
.score-spotlight{display:grid;grid-template-columns:1.35fr .85fr;gap:12px;align-items:center;border-radius:26px;padding:18px;background:linear-gradient(135deg,#14092b,#3a1273 50%,#6d28d9);color:#fff;box-shadow:0 22px 42px rgba(64,25,126,.25);margin-bottom:12px}.score-spotlight h2{font-size:22px;margin:5px 0 8px}.score-spotlight p{margin:0;color:rgba(255,255,255,.8);font-size:13px;line-height:1.45}.score-right{display:flex;flex-direction:column;align-items:center;gap:8px}.score-orbit{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(#facc15 0deg,rgba(255,255,255,.18) 0deg);box-shadow:0 0 0 6px rgba(255,255,255,.05)}.score-orbit:before{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 30% 24%,#fff,#fff3b0 55%,#f59e0b)}.score-flame{position:absolute;z-index:2;top:17px;font-size:22px}.score-orbit span{position:absolute;z-index:2;bottom:27px;font-size:34px;font-weight:1000;color:#3f1a00}.score-badge{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.15);font-size:11px;font-weight:900}
.hero-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}.stat-card{position:relative;overflow:hidden;border-radius:20px;padding:15px;background:#fff;border:1px solid var(--line);box-shadow:0 9px 24px rgba(37,24,70,.06)}.stat-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}.card-purple:before{background:var(--violet)}.card-orange:before{background:var(--orange)}.card-green:before{background:var(--green)}.card-blue:before{background:var(--blue)}.stat-card span{font-size:9px;font-weight:900;letter-spacing:.08em;color:var(--muted)}.stat-card b{display:block;font-size:28px;margin-top:4px}.stat-card b em{font-size:13px;color:var(--muted);font-style:normal}.stat-card small{font-size:11px;color:var(--muted)}
.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;margin-bottom:12px;box-shadow:0 10px 28px rgba(37,24,70,.055)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.section-head h2,.card h2{font-size:18px;margin:3px 0 0}
.primary,.secondary,.danger{border-radius:14px;padding:11px 14px;font-weight:850}.primary{border:0;background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff;box-shadow:0 10px 22px rgba(109,40,217,.2)}.secondary{border:1px solid var(--line);background:#fff;color:var(--text)}.danger{border:1px solid #fecaca;background:#fff;color:#b91c1c}.compact{padding:8px 10px;font-size:12px}.full{width:100%;margin-top:8px}
.action-group{margin-bottom:14px}.area-title{display:flex;align-items:center;gap:8px;font-weight:950;font-size:13px;margin-bottom:8px}.action-card{border-radius:18px;padding:13px;margin-bottom:8px;border:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.action-card[data-area="MIND"]{background:linear-gradient(135deg,#ede9fe,#fff)}.action-card[data-area="BODY"]{background:linear-gradient(135deg,#d1fae5,#fff)}.action-card[data-area="CAREER"]{background:linear-gradient(135deg,#dbeafe,#fff)}.action-card[data-area="COMMUNICATION"]{background:linear-gradient(135deg,#fce7f3,#fff)}.action-card[data-area="STYLE"]{background:linear-gradient(135deg,#fef3c7,#fff)}.action-card[data-area="FINANCE"]{background:linear-gradient(135deg,#dcfce7,#fff)}.action-card[data-area="LIFE"]{background:linear-gradient(135deg,#ffedd5,#fff)}.action-main b{display:block;font-size:14px}.action-main small{display:block;color:var(--muted);font-size:11px;margin-top:4px;line-height:1.4}.status-btn{min-width:84px;border-radius:999px;border:1px solid rgba(0,0,0,.06);padding:8px 10px;background:#fff;font-size:11px;font-weight:900}.status-done{background:#dcfce7;color:#166534}.status-moved{background:#fef3c7;color:#92400e}.status-skipped{background:#fee2e2;color:#991b1b}.status-pending{background:#fff;color:#6b7280}
.review-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.review-summary div{border-radius:15px;padding:12px;background:rgba(255,255,255,.78)}.review-summary b{display:block;font-size:21px}.review-summary span{font-size:10px;color:var(--muted)}.endday-card{background:linear-gradient(135deg,#fff1f6,#fffbe8 40%,#f7f0ff);border-color:#ecd9f1}label{display:block;font-size:12px;color:#64537c;font-weight:800;margin-top:10px}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;color:var(--text);outline:none}textarea{min-height:110px;resize:vertical;margin-top:6px}.mood-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:8px}.mood-btn{border:1px solid #e9dcfa;background:#fff;border-radius:18px;padding:13px;display:flex;flex-direction:column;align-items:center;gap:6px}.mood-btn .emoji{font-size:27px}.mood-btn .txt{font-size:11px;font-weight:850;color:var(--muted)}.mood-btn.active{background:linear-gradient(135deg,#ddd6fe,#fce7f3);border-color:#a78bfa}
.vision-box{padding:15px;border-radius:18px;background:linear-gradient(135deg,#1f1437,#5b21b6);color:#fff;line-height:1.55;font-weight:700}.goal-card,.habit-card{border-radius:18px;padding:14px;margin-bottom:9px;border:1px solid var(--line);background:linear-gradient(135deg,#fbfaff,#fff)}.goal-card .tag,.habit-card .tag{display:inline-flex;padding:4px 8px;border-radius:999px;background:#ede9fe;color:#5b21b6;font-size:10px;font-weight:900;margin-bottom:7px}.goal-card h3,.habit-card h3{margin:0 0 5px;font-size:15px}.why{font-size:11px;color:var(--muted);line-height:1.45}.progress-bar{height:8px;border-radius:999px;background:#ede9f4;overflow:hidden;margin-top:9px}.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#7c3aed,#ec4899)}.goal-meta{display:flex;justify-content:space-between;gap:10px;margin-top:7px;color:var(--muted);font-size:10px}.card-actions{display:flex;gap:7px;margin-top:10px}.mini{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 9px}
.area-dashboard{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.area-card{border-radius:20px;padding:16px;color:#fff;min-height:130px;position:relative;overflow:hidden}.area-card b{font-size:29px;display:block;margin-top:9px}.area-card span{font-size:11px;opacity:.82}.area-MIND{background:linear-gradient(135deg,#6d28d9,#8b5cf6)}.area-BODY{background:linear-gradient(135deg,#047857,#10b981)}.area-CAREER{background:linear-gradient(135deg,#1d4ed8,#3b82f6)}.area-COMMUNICATION{background:linear-gradient(135deg,#be185d,#ec4899)}.area-STYLE{background:linear-gradient(135deg,#b45309,#f59e0b)}.area-FINANCE{background:linear-gradient(135deg,#15803d,#22c55e)}.area-LIFE{background:linear-gradient(135deg,#c2410c,#fb923c)}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);background:#eceaf2;padding:4px;border-radius:14px;margin-bottom:12px}.seg{border:0;background:transparent;border-radius:10px;padding:9px;color:var(--muted);font-weight:850}.seg.active{background:#fff;color:var(--purple);box-shadow:0 2px 8px rgba(38,27,72,.08)}canvas{width:100%;height:auto}.delta{font-size:17px;font-weight:900;color:var(--purple)}.pattern-list{display:grid;gap:9px}.pattern-item{padding:12px;border-radius:15px;background:#faf8ff;font-size:12px;line-height:1.5}
.profile-card{display:flex;align-items:center;gap:14px}.avatar{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,#5b21b6,#db2777);color:#fff;font-weight:950}.muted{font-size:12px;color:var(--muted);line-height:1.5}.button-row{display:flex;gap:8px;flex-wrap:wrap}.file-label{display:inline-flex;align-items:center}.file-label input{display:none}
.bottom-nav{position:fixed;z-index:30;left:50%;bottom:0;transform:translateX(-50%);width:min(760px,100%);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 7px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line)}.nav-item{border:0;background:transparent;color:#aaa4b4;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px}.nav-item span{font-size:20px}.nav-item small{font-size:10px;font-weight:850}.nav-item.active{color:#5b21b6}
dialog{border:0;border-radius:24px;padding:0;width:min(92vw,440px);box-shadow:0 25px 90px rgba(34,24,65,.3)}dialog::backdrop{background:rgba(26,21,40,.48);backdrop-filter:blur(4px)}.dialog-form{padding:20px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.status-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.status-options button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;font-weight:850}
.celebrate-wrap{text-align:center;padding:26px 22px;background:linear-gradient(135deg,#3b1472,#6d28d9 45%,#db2777);color:#fff}.celebrate-emoji{font-size:58px}.celebrate-wrap h2{font-size:26px;margin:8px 0}.celebrate-wrap p{line-height:1.5;color:rgba(255,255,255,.86)}.celebrate-score{width:118px;height:118px;border-radius:50%;margin:18px auto;background:radial-gradient(circle at 30% 30%,#fff,#fde68a 60%,#f59e0b);display:grid;place-items:center;color:#4a1d00}.celebrate-score b{font-size:40px}.milestone-card{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:start;text-align:left;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);padding:14px;border-radius:20px;margin:14px 0}.milestone-icon{font-size:34px}
@media(min-width:620px){.hero-grid{grid-template-columns:repeat(4,1fr)}.area-dashboard{grid-template-columns:repeat(3,1fr)}}@media(max-width:420px){.score-spotlight{grid-template-columns:1fr}.score-right{padding-top:4px}.review-summary{grid-template-columns:1fr 1fr 1fr}}