:root {
  --bg: #e8f5f0; --card: #ffffff; --card2: #f0faf6; --text: #1a3a2e; --sub: #5a8a74;
  --teal: #00b894; --teal2: #00cba4; --teal-dark: #007a62; --mint: #d4f5ea;
  --green: #00b894; --red: #e17055; --gold: #fdcb6e; --blue: #0984e3; --purple: #6c5ce7;
  --border: rgba(0,184,148,0.15); --shadow-sm: 0 1px 2px rgba(16,40,30,0.04), 0 1px 3px rgba(16,40,30,0.06); --shadow: 0 1px 3px rgba(16,40,30,0.05), 0 4px 12px rgba(0,184,148,0.08), 0 8px 24px rgba(0,184,148,0.06); --shadow-md: 0 2px 4px rgba(16,40,30,0.06), 0 6px 16px rgba(0,184,148,0.1), 0 12px 32px rgba(0,184,148,0.08);
  --shadow-lg: 0 4px 8px rgba(16,40,30,0.06), 0 12px 28px rgba(0,184,148,0.12), 0 24px 48px rgba(0,184,148,0.1);
}
.dark { --bg:#0d1f18; --card:#162820; --card2:#1a2f24; --text:#e8f5f0; --sub:#7dbfa4; --mint:#1a3a2e; --border:rgba(0,184,148,0.2); --shadow-sm:0 1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15); --shadow:0 2px 4px rgba(0,0,0,0.25), 0 6px 16px rgba(0,0,0,0.2), 0 12px 28px rgba(0,184,148,0.08); --shadow-md:0 4px 8px rgba(0,0,0,0.3), 0 12px 24px rgba(0,0,0,0.25), 0 20px 40px rgba(0,184,148,0.1); --shadow-lg:0 6px 12px rgba(0,0,0,0.3), 0 16px 32px rgba(0,0,0,0.28), 0 28px 56px rgba(0,184,148,0.12); }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; transition:background 0.3s,color 0.3s; }
.app-header { background:linear-gradient(145deg,#00a67e 0%,#00b894 35%,#00cba4 65%,#00d2d3 100%); padding:28px 20px 72px; position:relative; overflow:hidden; }
.app-header::before { content:''; position:absolute; top:-70px; right:-50px; width:220px; height:220px; background:rgba(255,255,255,0.09); border-radius:50%; }
.app-header::after  { content:''; position:absolute; bottom:-50px; left:20px; width:160px; height:160px; background:rgba(255,255,255,0.06); border-radius:50%; }
.app-header .blob3  { position:absolute; top:30px; left:-30px; width:100px; height:100px; background:rgba(255,255,255,0.05); border-radius:50%; z-index:0; }
.header-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; position:relative; z-index:1; }
.header-greeting { color:rgba(255,255,255,0.82); font-size:0.82rem; font-weight:300; }
.header-title { color:white; font-size:1.35rem; font-weight:700; margin-top:2px; }
.header-actions { display:flex; gap:8px; }
.header-btn { width:42px; height:42px; background:rgba(255,255,255,0.2); border:none; border-radius:12px; color:white; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(10px); transition:0.2s; }
.header-btn:active { transform:scale(0.93); }
.hero-balance-wrap { position:relative; z-index:1; text-align:center; padding:0 4px; }
.hero-balance-label { color:rgba(255,255,255,0.75); font-size:0.78rem; font-weight:400; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; justify-content:center; gap:6px; }
.hero-balance-label .dot { width:6px; height:6px; background:rgba(255,255,255,0.5); border-radius:50%; animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{opacity:0.5;transform:scale(1);} 50%{opacity:1;transform:scale(1.3);} }
.hero-balance-number { color:white; font-size:clamp(3.1rem,12.5vw,4.4rem); font-weight:900; letter-spacing:-3px; line-height:0.95; text-shadow:0 2px 20px rgba(0,0,0,0.15),0 0 60px rgba(255,255,255,0.2); animation:balanceGlow 3s ease-in-out infinite; transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes balanceGlow { 0%,100%{text-shadow:0 2px 20px rgba(0,0,0,0.15),0 0 40px rgba(255,255,255,0.15);} 50%{text-shadow:0 2px 20px rgba(0,0,0,0.15),0 0 70px rgba(255,255,255,0.3);} }
.hero-balance-number.counting { animation:none; transform:scale(1.04); }
@keyframes pulseBig { 0%{transform:scale(1);} 40%{transform:scale(3);} 70%{transform:scale(0.92);} 100%{transform:scale(1);} }
.hero-balance-number.pulse-big { animation:pulseBig 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes bullRun { 0%{transform:translateX(-200px);opacity:0;} 20%{transform:translateX(-200px);opacity:1;} 75%{transform:translateX(-8px);opacity:1;} 82%{transform:translateX(4px);opacity:1;} 90%{transform:translateX(-2px);opacity:1;} 100%{transform:translateX(300px);opacity:0;} }
@keyframes bahtPush { 0%{transform:translateX(-80px);opacity:0;} 40%{transform:translateX(-80px);opacity:0;} 75%{transform:translateX(0px);opacity:1;} 100%{transform:translateX(0px);opacity:1;} }
.bull-runner { display:inline-block; font-size:1.4rem; animation:bullRun 1.8s ease-in-out forwards; position:relative; vertical-align:middle; }
.baht-pushed { display:inline-block; animation:bahtPush 1.8s ease-in-out forwards; }
@keyframes antPush { 0%{transform:translateX(120px);opacity:0;} 30%{transform:translateX(120px);opacity:1;} 100%{transform:translateX(0);opacity:1;} }
@keyframes antWalk { 0%{transform:translateX(120px) scaleX(-1);opacity:1;} 85%{transform:translateX(8px) scaleX(-1);opacity:1;} 100%{transform:translateX(200px) scaleX(-1);opacity:0;} }
.last-digit-ant { display:inline-block; animation:antPush 1.8s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.ant-walker { display:inline-block; font-size:0.9rem; animation:antWalk 1.8s ease-in-out forwards; position:relative; top:2px; filter:sepia(1) saturate(5) hue-rotate(330deg); }
@keyframes hitBounce { 0%{transform:translateX(0);} 15%{transform:translateX(60px);} 30%{transform:translateX(-60px);} 45%{transform:translateX(40px);} 60%{transform:translateX(-40px);} 75%{transform:translateX(20px);} 88%{transform:translateX(-10px);} 100%{transform:translateX(0);} }
.hero-balance-number.hit-bounce { animation:hitBounce 1.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.hero-badge-row { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.hero-badge { background:rgba(255,255,255,0.18); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.3); border-radius:20px; padding:5px 14px; font-size:0.78rem; font-weight:500; color:white; display:flex; align-items:center; gap:5px; }
.hero-badge.pos { background:rgba(253,203,110,0.25); border-color:rgba(253,203,110,0.5); color:#fdcb6e; }
.hero-badge.neg { background:rgba(225,112,85,0.25); border-color:rgba(225,112,85,0.5); color:#fab4a5; }
.stat-popup { position:fixed; left:50%; transform:translateX(-50%); z-index:99990; pointer-events:none; display:none; }
.stat-popup.show { display:block; animation:popupSlideDown 0.45s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes popupSlideDown { 0%{opacity:0;transform:translateX(-50%) translateY(-30px) scale(0.8);} 100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);} }
.stat-popup-inner { padding:14px 24px; border-radius:20px; text-align:center; font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; box-shadow:0 8px 30px rgba(0,0,0,0.25); border:1.5px solid rgba(255,255,255,0.3); }
.stat-popup-inner.target  { background:linear-gradient(135deg,#00b894,#00cba4); color:white; }
.stat-popup-inner.streak  { background:linear-gradient(135deg,#f9a825,#ffb74d); color:white; }
.stat-popup-inner.record  { background:linear-gradient(135deg,#6c5ce7,#a29bfe); color:white; }
.stat-popup-inner.fortune { background:linear-gradient(135deg,#e17055,#fdcb6e); color:white; }
.stat-popup-icon  { font-size:2rem; display:block; }
.stat-popup-title { font-size:0.78rem; font-weight:500; opacity:0.9; margin-top:2px; }
.stat-popup-value { font-size:1.3rem; font-weight:700; margin-top:4px; }
.sparkle { position:absolute; pointer-events:none; z-index:2; font-size:1rem; animation:sparkleFly 2.5s ease-out forwards; opacity:0; }
@keyframes sparkleFly { 0%{opacity:0;transform:translateY(0) scale(0.5);} 20%{opacity:1;transform:translateY(-15px) scale(1);} 100%{opacity:0;transform:translateY(-60px) scale(0.3);} }
.header-quote { color:rgba(255,255,255,0.85); font-size:0.9rem; font-weight:700; margin-top:12px; position:relative; z-index:1; text-align:center; }
@keyframes marqueeScroll { 0%{transform:translateX(100vw);} 100%{transform:translateX(-300vw);} }
/* เพิ่ม padding ล่างให้ content เพื่อให้ banner ไม่บัง */
.content { padding:0 16px 160px; margin-top:-36px; position:relative; max-width:480px; margin-left:auto; margin-right:auto; }
.card { background:var(--card); border-radius:20px; padding:20px; box-shadow:var(--shadow); margin-bottom:16px; border:1px solid var(--border); transition:background 0.3s; }
.card-title { font-size:0.95rem; font-weight:600; color:var(--text); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.card-title .icon { width:32px; height:32px; background:var(--mint); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; }
.quick-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.stat-card { background:var(--card); border-radius:16px; padding:14px 10px; text-align:center; box-shadow:var(--shadow); border:1px solid var(--border); }
.stat-icon { font-size:1.4rem; margin-bottom:6px; }
.stat-label { font-size:0.68rem; color:var(--sub); font-weight:400; margin-bottom:4px; }
.stat-value { font-size:1rem; font-weight:700; color:var(--text); }
.stat-value.pos { color:var(--green); }
.stat-value.neg { color:var(--red); }
label { font-size:0.8rem; font-weight:500; color:var(--sub); display:block; margin-bottom:6px; margin-top:14px; }
label:first-of-type { margin-top:0; }
.input-group { position:relative; display:flex; align-items:center; }
.input-group input { width:100%; padding:13px 48px 13px 16px; border-radius:14px; border:2px solid var(--border); font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:1rem; font-weight:500; background:var(--card2); color:var(--text); transition:border 0.2s,box-shadow 0.2s; outline:none; }
.input-group input:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,184,148,0.12); }
.mic-btn { position:absolute; right:10px; width:32px; height:32px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--teal),var(--teal2)); color:white; font-size:0.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; box-shadow:0 2px 8px rgba(0,184,148,0.35); }
.mic-btn:hover { transform:scale(1.1); }
.mic-btn:active { transform:scale(0.93); }
.mic-btn.listening { background:linear-gradient(135deg,#e17055,#d63031); animation:micPulse 0.8s ease-in-out infinite; }
@keyframes micPulse { 0%{box-shadow:0 0 0 0 rgba(225,112,85,0.6);} 70%{box-shadow:0 0 0 10px rgba(225,112,85,0);} 100%{box-shadow:0 0 0 0 rgba(225,112,85,0);} }
.hint-text { font-size:0.7rem; color:var(--teal); margin-top:4px; margin-bottom:0; font-weight:400; }
.result-box { padding:12px 16px; border-radius:14px; text-align:center; font-weight:600; font-size:0.9rem; min-height:20px; margin:12px 0; transition:all 0.3s; }
.result-box.profit { background:rgba(0,184,148,0.1); color:var(--green); }
.result-box.loss   { background:rgba(225,112,85,0.1); color:var(--red); }
.btn { padding:14px; border:none; border-radius:14px; font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:0.95rem; font-weight:600; cursor:pointer; transition:0.2s; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
.btn:active { transform:scale(0.97); }
.btn-primary   { background:linear-gradient(135deg,var(--teal),var(--teal2)); color:white; box-shadow:0 4px 15px rgba(0,184,148,0.35); margin-top:4px; }
.btn-secondary { background:var(--card2); color:var(--text); border:1.5px solid var(--border); }
.btn-green { background:linear-gradient(135deg,#00b894,#00cba4); color:white; box-shadow:0 4px 12px rgba(0,184,148,0.3); }
.btn-red   { background:linear-gradient(135deg,#e17055,#d63031); color:white; }
.btn-gray  { background:var(--card2); color:var(--sub); border:1.5px solid var(--border); }
.btn-sm    { padding:8px 14px; font-size:0.78rem; border-radius:10px; width:auto; }
.btn-row   { display:flex; gap:10px; margin-top:10px; }
.btn-row .btn { flex:1; }
input[type="date"] { width:100%; padding:13px 16px; border-radius:14px; border:2px solid var(--border); font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:0.95rem; background:var(--card2); color:var(--text); outline:none; transition:border 0.2s; margin-bottom:0; }
input[type="date"]:focus { border-color:var(--teal); }
.chart-filter { padding:8px 14px; border-radius:10px; border:1.5px solid var(--border); font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:0.8rem; background:var(--card2); color:var(--text); width:100%; margin-top:10px; outline:none; }
.chart-filter-inline { padding:5px 10px; border-radius:10px; border:1.5px solid var(--border); font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:0.75rem; background:var(--card2); color:var(--text); outline:none; cursor:pointer; }
.kpi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:4px; }
.kpi-item { background:var(--card2); border-radius:14px; padding:14px 12px; border:1px solid var(--border); }
.kpi-label { font-size:0.68rem; color:var(--sub); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.kpi-value { font-size:1.15rem; font-weight:700; color:var(--text); }
.kpi-value.pos { color:var(--green); }
.kpi-value.neg { color:var(--red); }
.kpi-item.win { background:rgba(0,184,148,0.07); border-color:rgba(0,184,148,0.25); }
.kpi-item.bad { background:rgba(225,112,85,0.07); border-color:rgba(225,112,85,0.2); }
table { width:100%; border-collapse:collapse; font-size:0.82rem; margin-top:8px; }
th { padding:10px 8px; text-align:center; font-size:0.72rem; color:var(--sub); font-weight:500; border-bottom:1.5px solid var(--border); }
td { padding:11px 8px; text-align:center; border-bottom:1px solid var(--border); }
tr:last-child td { border-bottom:none; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.section-title { font-size:0.95rem; font-weight:600; color:var(--text); display:flex; gap:8px; align-items:center; }
.section-action { font-size:0.78rem; color:var(--teal); cursor:pointer; }
.compare-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.compare-item { background:var(--card2); border-radius:14px; padding:14px 12px; text-align:center; border:1px solid var(--border); }
.compare-label { font-size:0.68rem; color:var(--sub); margin-bottom:6px; }
.compare-value { font-size:1.1rem; font-weight:700; color:var(--text); }
/* toast อยู่เหนือ banner */
#toast { visibility:hidden; position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:rgba(0,120,80,0.92); color:white; padding:12px 24px; border-radius:30px; font-size:0.88rem; z-index:10001; box-shadow:0 4px 20px rgba(0,0,0,0.2); backdrop-filter:blur(10px); white-space:nowrap; }
#toast.show { visibility:visible; animation:toastIn 0.4s,toastOut 0.4s 2.6s; }
@keyframes toastIn  { from{opacity:0;bottom:65px} to{opacity:1;bottom:80px} }
@keyframes toastOut { from{opacity:1;bottom:80px} to{opacity:0;bottom:65px} }
#voiceOverlay { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:rgba(10,50,35,0.92); color:white; padding:12px 22px; border-radius:30px; font-size:0.85rem; z-index:10002; display:none; align-items:center; gap:10px; box-shadow:0 5px 25px rgba(0,0,0,0.3); backdrop-filter:blur(12px); white-space:nowrap; }
#voiceOverlay.show { display:flex; animation:voIn 0.3s ease-out; }
@keyframes voIn { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.vwave { display:flex; align-items:center; gap:3px; }
.vwave span { width:3px; height:14px; background:#00cba4; border-radius:2px; animation:wv 0.6s ease-in-out infinite; }
.vwave span:nth-child(2){animation-delay:.1s} .vwave span:nth-child(3){animation-delay:.2s} .vwave span:nth-child(4){animation-delay:.3s} .vwave span:nth-child(5){animation-delay:.4s}
@keyframes wv { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1.2)} }
.celebration-popup { position:fixed; top:72px; left:50%; transform:translateX(-50%); z-index:99999; pointer-events:none; display:none; filter:drop-shadow(0 12px 32px rgba(0,0,0,0.18)); }
.celebration-popup.show { display:block; animation:popSlide 0.45s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes popSlide { 0%{transform:translate(-50%,-120%) scale(0.8);opacity:0;} 100%{transform:translate(-50%,0) scale(1);opacity:1;} }
.celebration-content { padding:22px 40px 20px; border-radius:26px; text-align:center; position:relative; overflow:hidden; min-width:210px; border:1.5px solid rgba(255,255,255,0.35); }
.celebration-content.profit { background:linear-gradient(135deg,#ff6fb0 0%,#ff85c0 45%,#ffaad4 100%); box-shadow:0 8px 32px rgba(255,111,176,0.45); color:white; }
.celebration-content.loss   { background:linear-gradient(135deg,#f9a825 0%,#ffb74d 50%,#ffd180 100%); box-shadow:0 8px 32px rgba(249,168,37,0.4); color:white; }
.celebration-content.flat   { background:linear-gradient(135deg,#00b894 0%,#00cba4 100%); box-shadow:0 8px 32px rgba(0,184,148,0.35); color:white; }
.cel-emoji { font-size:2.8rem; margin-bottom:8px; display:block; animation:ePop 0.55s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes ePop { 0%{transform:scale(0) rotate(-15deg);} 60%{transform:scale(1.25) rotate(5deg);} 100%{transform:scale(1) rotate(0deg);} }
.cel-msg { font-size:1.15rem; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,0.12); }
.cel-amt { font-size:1.45rem; font-weight:700; margin-top:6px; text-shadow:0 2px 8px rgba(0,0,0,0.15); background:rgba(255,255,255,0.25); padding:4px 18px; border-radius:20px; display:inline-block; }
.confetti { position:absolute; width:8px; height:8px; border-radius:2px; animation:cFall 2.2s ease-out forwards; }
@keyframes cFall { 0%{transform:translateY(0) rotate(0deg);opacity:1;} 100%{transform:translateY(300px) rotate(400deg);opacity:0;} }
.enc-star { position:absolute; font-size:1.2rem; animation:encFloat 2s ease-out forwards; }
@keyframes encFloat { 0%{transform:translateY(0) scale(0.5);opacity:0;} 20%{opacity:1;transform:translateY(-10px) scale(1.1);} 100%{transform:translateY(-70px) scale(0.8);opacity:0;} }
.modal { display:none; position:fixed; z-index:10000; inset:0; background:rgba(0,0,0,0.45); align-items:flex-end; justify-content:center; padding-bottom:70px; }
.modal.open { display:flex; }
.modal-sheet { background:var(--card); border-radius:24px 24px 0 0; padding:24px 20px 32px; width:100%; max-width:480px; max-height:calc(100vh - 90px); overflow-y:auto; animation:sheetUp 0.3s ease-out; -webkit-overflow-scrolling:touch; }
@keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-handle { width:40px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 20px; }
.modal-title { font-size:1.05rem; font-weight:700; margin-bottom:16px; text-align:center; }
.modal-input { width:100%; padding:13px 16px; border-radius:14px; border:2px solid var(--border); font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:1rem; background:var(--card2); color:var(--text); outline:none; transition:border 0.2s; margin-bottom:0; }
.modal-input:focus { border-color:var(--teal); }
.csv-box { width:100%; min-height:200px; font-family:monospace; font-size:10px; padding:14px; border:2px solid var(--border); border-radius:14px; background:var(--card2); color:var(--text); white-space:pre-wrap; word-wrap:break-word; user-select:all; -webkit-user-select:all; line-height:1.5; margin:12px 0; }
.info-box { background:linear-gradient(135deg,rgba(0,184,148,0.12),rgba(0,184,148,0.05)); border:1px solid rgba(0,184,148,0.2); border-radius:14px; padding:14px; margin:10px 0; font-size:0.82rem; line-height:1.7; }
.info-box strong { display:block; font-size:0.9rem; margin-bottom:6px; color:var(--teal-dark); }
.year-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.year-item { background:var(--card2); border-radius:14px; padding:14px; text-align:center; border:1px solid var(--border); }
.settings-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); align-items:flex-end; justify-content:center; z-index:10000; padding-bottom:70px; }
.settings-modal.open { display:flex; }
.settings-sheet { background:var(--card); border-radius:24px 24px 0 0; padding:24px 20px 36px; width:100%; max-width:480px; max-height:calc(100vh - 90px); overflow-y:auto; animation:sheetUp 0.3s ease-out; -webkit-overflow-scrolling:touch; }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); }
.settings-row:last-child { border-bottom:none; }
.settings-row-label { font-size:0.88rem; font-weight:500; color:var(--text); display:flex; align-items:center; gap:10px; }
.settings-row-label .s-icon { width:36px; height:36px; border-radius:11px; background:var(--mint); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.toggle-switch { position:relative; width:48px; height:26px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#ccc; border-radius:26px; cursor:pointer; transition:0.3s; }
.toggle-slider:before { content:''; position:absolute; width:20px; height:20px; left:3px; bottom:3px; background:white; border-radius:50%; transition:0.3s; }
.toggle-switch input:checked + .toggle-slider { background:var(--teal); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(22px); }
.name-input-field { width:100%; padding:12px 16px; border-radius:14px; border:2px solid var(--border); font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:1rem; font-weight:500; background:var(--card2); color:var(--text); outline:none; transition:border 0.2s; }
.name-input-field:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,184,148,0.12); }
.avatar-row { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.avatar-opt { width:44px; height:44px; border-radius:50%; border:2.5px solid var(--border); font-size:1.4rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:0.2s; background:var(--card2); }
.avatar-opt.selected { border-color:var(--teal); background:rgba(0,184,148,0.12); transform:scale(1.1); }
.header-avatar { width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-size:2.4rem; border:2px solid rgba(255,255,255,0.4); overflow:hidden; }
.header-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.profile-pic-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:20px; }
.profile-pic-preview { width:90px; height:90px; border-radius:50%; border:3px solid var(--teal); object-fit:cover; background:var(--card2); display:flex; align-items:center; justify-content:center; font-size:2.5rem; overflow:hidden; cursor:pointer; position:relative; }
.profile-pic-preview img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.profile-pic-btn { font-size:0.78rem; color:var(--teal); font-weight:600; cursor:pointer; background:rgba(0,184,148,0.1); border:1.5px solid var(--teal); border-radius:20px; padding:5px 14px; }

/* ========== HEATMAP CALENDAR ========== */
.heatmap-card { padding:20px 16px; }
.heatmap-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.heatmap-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.heatmap-stat { background:var(--card2); border-radius:12px; padding:10px 6px; text-align:center; border:1px solid var(--border); }
.heatmap-stat-label { font-size:0.62rem; color:var(--sub); letter-spacing:0.3px; margin-bottom:3px; }
.heatmap-stat-value { font-size:0.95rem; font-weight:700; color:var(--text); }
.heatmap-stat-value.hot { color:#ff6b35; }
.heatmap-wrap { overflow-x:auto; overflow-y:hidden; padding:4px 2px 8px; -webkit-overflow-scrolling:touch; }
.heatmap-wrap::-webkit-scrollbar { height:4px; }
.heatmap-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.heatmap-inner { display:inline-flex; flex-direction:column; gap:4px; min-width:100%; }
.heatmap-months { display:flex; padding-left:22px; font-size:0.62rem; color:var(--sub); font-weight:500; height:14px; position:relative; }
.heatmap-month-label { position:absolute; top:0; white-space:nowrap; }
.heatmap-body { display:flex; gap:3px; }
.heatmap-dows { display:flex; flex-direction:column; gap:3px; }
.heatmap-dow { height:11px; width:18px; font-size:0.58rem; color:var(--sub); display:flex; align-items:center; line-height:1; }
.heatmap-grid { display:flex; gap:3px; }
.heatmap-col { display:flex; flex-direction:column; gap:3px; }
.heatmap-cell { width:11px; height:11px; border-radius:2.5px; background:var(--mint); border:1px solid rgba(0,184,148,0.08); cursor:pointer; transition:transform 0.15s, box-shadow 0.15s; }
.heatmap-cell:active { transform:scale(1.35); box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.heatmap-cell.empty { opacity:0.55; }
.heatmap-cell.g1 { background:#9be8d1; border-color:#9be8d1; }
.heatmap-cell.g2 { background:#4ed4aa; border-color:#4ed4aa; }
.heatmap-cell.g3 { background:#00b894; border-color:#00b894; }
.heatmap-cell.g4 { background:#007a62; border-color:#007a62; box-shadow:0 0 0 1px rgba(0,122,98,0.35); }
.heatmap-cell.l1 { background:#f7c5b5; border-color:#f7c5b5; }
.heatmap-cell.l2 { background:#ec8a6e; border-color:#ec8a6e; }
.heatmap-cell.l3 { background:#c0392b; border-color:#c0392b; }
.heatmap-cell.today { outline:2px solid var(--teal-dark); outline-offset:1px; }
.dark .heatmap-cell { background:#1f3b30; border-color:rgba(255,255,255,0.03); }
.dark .heatmap-cell.empty { opacity:0.4; }
.dark .heatmap-cell.g1 { background:#2d5f4a; border-color:#2d5f4a; }
.dark .heatmap-cell.g2 { background:#1a8968; border-color:#1a8968; }
.dark .heatmap-cell.g3 { background:#00b894; border-color:#00b894; }
.dark .heatmap-cell.g4 { background:#00e5b4; border-color:#00e5b4; box-shadow:0 0 6px rgba(0,229,180,0.4); }
.dark .heatmap-cell.l1 { background:#6b3a2f; border-color:#6b3a2f; }
.dark .heatmap-cell.l2 { background:#a14b38; border-color:#a14b38; }
.dark .heatmap-cell.l3 { background:#e17055; border-color:#e17055; }
.heatmap-legend { display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:0.66rem; color:var(--sub); }
.heatmap-legend-scale { display:flex; align-items:center; gap:4px; }
.heatmap-legend-scale .lc { width:11px; height:11px; border-radius:2.5px; border:1px solid rgba(0,0,0,0.04); }
.heatmap-tip { position:fixed; z-index:10003; pointer-events:none; background:rgba(10,40,28,0.96); color:white; padding:10px 14px; border-radius:12px; font-size:0.78rem; font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; backdrop-filter:blur(8px); box-shadow:0 6px 24px rgba(0,0,0,0.25); border:1px solid rgba(0,184,148,0.4); display:none; max-width:220px; line-height:1.5; }
.heatmap-tip.show { display:block; animation:tipIn 0.2s ease-out; }
@keyframes tipIn { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} }
.heatmap-tip .t-date { font-size:0.72rem; color:#a8e6cf; margin-bottom:2px; font-weight:500; }
.heatmap-tip .t-val { font-size:0.95rem; font-weight:700; }
.heatmap-tip .t-val.pos { color:#4ed4aa; }
.heatmap-tip .t-val.neg { color:#ff9478; }
.heatmap-tip .t-sub { font-size:0.68rem; color:rgba(255,255,255,0.65); margin-top:2px; }
.heatmap-year-btn { padding:5px 10px; border-radius:10px; border:1.5px solid var(--border); font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:0.75rem; background:var(--card2); color:var(--text); outline:none; cursor:pointer; }


/* ========== MONTHLY GOAL & PROGRESS ========== */
.goal-box {
  background:linear-gradient(135deg,rgba(0,184,148,0.08),rgba(0,203,164,0.03));
  border:1.5px solid rgba(0,184,148,0.18);
  border-radius:16px; padding:14px 14px 12px;
  margin-bottom:14px; position:relative; overflow:hidden;
  transition:border-color 0.3s, background 0.3s;
}
.goal-box.hot { border-color:rgba(253,203,110,0.5); background:linear-gradient(135deg,rgba(253,203,110,0.12),rgba(253,203,110,0.03)); }
.goal-box.done { border-color:rgba(255,111,176,0.5); background:linear-gradient(135deg,rgba(255,111,176,0.15),rgba(255,193,7,0.08),rgba(108,92,231,0.1)); }
.goal-box.empty { border-style:dashed; background:transparent; }
.dark .goal-box { background:linear-gradient(135deg,rgba(0,184,148,0.1),rgba(0,0,0,0.15)); }

.goal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.goal-title { font-size:0.82rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.goal-title .g-month { font-size:0.68rem; color:var(--sub); font-weight:500; background:var(--card2); padding:2px 8px; border-radius:8px; border:1px solid var(--border); }
.goal-edit-btn {
  background:rgba(0,184,148,0.12); border:none; color:var(--teal-dark);
  font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:0.72rem; font-weight:600;
  padding:4px 10px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:4px;
  transition:transform 0.15s, background 0.2s;
}
.goal-edit-btn:active { transform:scale(0.93); }
.dark .goal-edit-btn { background:rgba(0,184,148,0.2); color:#4ed4aa; }

.goal-numbers { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:8px; }
.goal-current { font-size:1.25rem; font-weight:700; color:var(--text); letter-spacing:-0.5px; line-height:1.1; }
.goal-current.pos { color:var(--green); }
.goal-current.neg { color:var(--red); }
.goal-target { font-size:0.76rem; color:var(--sub); font-weight:500; }
.goal-target strong { color:var(--text); font-weight:600; }

.goal-pct-badge {
  padding:3px 10px; border-radius:20px; font-size:0.78rem; font-weight:700;
  background:var(--mint); color:var(--teal-dark); white-space:nowrap;
  transition:all 0.3s;
}
.goal-pct-badge.hot { background:linear-gradient(135deg,#fdcb6e,#ffaa00); color:#7c4800; }
.goal-pct-badge.done { background:linear-gradient(135deg,#ff6fb0,#6c5ce7); color:white; box-shadow:0 2px 10px rgba(108,92,231,0.35); }
.dark .goal-pct-badge { background:rgba(0,184,148,0.2); color:#4ed4aa; }

.goal-bar-wrap {
  height:10px; background:rgba(0,184,148,0.08);
  border-radius:20px; overflow:hidden; position:relative;
  border:1px solid rgba(0,184,148,0.1);
}
.dark .goal-bar-wrap { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.06); }

.goal-bar-fill {
  height:100%; border-radius:20px; position:relative;
  background:linear-gradient(90deg,#00cba4 0%,#00b894 100%);
  transition:width 1s cubic-bezier(0.34,1.56,0.64,1), background 0.5s;
  min-width:0%;
}
.goal-bar-fill.hot { background:linear-gradient(90deg,#ffd54f 0%,#fdcb6e 50%,#ff9f40 100%); }
.goal-bar-fill.done { background:linear-gradient(90deg,#ff6fb0 0%,#fdcb6e 33%,#00cba4 66%,#6c5ce7 100%); background-size:200% 100%; animation:rainbowShift 3s ease-in-out infinite; }
@keyframes rainbowShift { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

.goal-bar-fill::after {
  content:''; position:absolute; inset:0; border-radius:20px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.35) 50%,transparent 100%);
  animation:shimmerGoal 2.2s ease-in-out infinite;
}
@keyframes shimmerGoal { 0%{transform:translateX(-100%);} 100%{transform:translateX(150%);} }

.goal-bar-fill.over {
  background:linear-gradient(90deg,#ff6fb0,#fdcb6e,#00cba4,#6c5ce7,#ff6fb0);
  background-size:300% 100%; animation:rainbowShift 2s linear infinite;
}

.goal-footer { display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:0.68rem; color:var(--sub); }
.goal-footer .g-left { font-weight:500; }
.goal-footer .g-days { font-weight:500; }
.goal-footer .g-days strong { color:var(--teal-dark); font-weight:700; }
.dark .goal-footer .g-days strong { color:#4ed4aa; }

.goal-empty-msg { text-align:center; padding:6px 0; color:var(--sub); font-size:0.82rem; }
.goal-empty-msg strong { color:var(--teal-dark); font-size:0.9rem; }
.dark .goal-empty-msg strong { color:#4ed4aa; }

.goal-trophy-float {
  position:absolute; top:-2px; right:-2px; font-size:1.4rem;
  animation:trophyBounce 1.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes trophyBounce { 0%,100%{transform:translateY(0) rotate(-5deg);} 50%{transform:translateY(-4px) rotate(8deg);} }

/* Goal Modal */
.goal-mode-row { display:flex; gap:8px; padding:4px; background:var(--card2); border-radius:14px; margin-bottom:16px; border:1px solid var(--border); }
.goal-mode-btn {
  flex:1; padding:10px; border:none; background:transparent; cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:0.85rem; font-weight:600; color:var(--sub);
  border-radius:10px; transition:all 0.25s;
}
.goal-mode-btn.active {
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:white; box-shadow:0 3px 10px rgba(0,184,148,0.3);
}

.goal-input-wrap { position:relative; margin-bottom:12px; }
.goal-input-wrap input {
  width:100%; padding:14px 50px 14px 18px; border-radius:14px; border:2px solid var(--border);
  font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:1.4rem; font-weight:700; color:var(--text);
  background:var(--card2); outline:none; text-align:center; transition:border 0.2s;
}
.goal-input-wrap input:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,184,148,0.12); }
.goal-input-suffix {
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:1.1rem; font-weight:700; color:var(--sub); pointer-events:none;
}

.goal-preset-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; }
.goal-preset-btn {
  padding:9px 4px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--card2); color:var(--text); cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif; font-size:0.8rem; font-weight:600;
  transition:all 0.2s;
}
.goal-preset-btn:active { transform:scale(0.93); }
.goal-preset-btn.active { background:rgba(0,184,148,0.12); border-color:var(--teal); color:var(--teal-dark); }
.dark .goal-preset-btn.active { color:#4ed4aa; }

.goal-hint {
  font-size:0.76rem; color:var(--sub); line-height:1.6;
  padding:10px 14px; background:rgba(0,184,148,0.06); border-radius:12px;
  border-left:3px solid var(--teal); margin-bottom:14px;
}
.goal-hint strong { color:var(--teal-dark); font-weight:600; }
.dark .goal-hint strong { color:#4ed4aa; }

.goal-remove-btn {
  width:100%; padding:10px; background:transparent; border:1.5px solid rgba(225,112,85,0.3);
  color:var(--red); border-radius:12px; cursor:pointer; font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif;
  font-size:0.82rem; font-weight:500; margin-top:10px;
}
.goal-remove-btn:active { transform:scale(0.97); }

/* Celebration for goal hit */
#goalCelebration {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:99999; pointer-events:none; display:none;
}
#goalCelebration.show { display:block; animation:goalCelIn 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes goalCelIn { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.3);} 100%{opacity:1;transform:translate(-50%,-50%) scale(1);} }
.goal-cel-card {
  background:linear-gradient(135deg,#ff6fb0 0%,#fdcb6e 50%,#6c5ce7 100%);
  background-size:200% 200%; animation:rainbowShift 2s ease-in-out infinite;
  padding:30px 36px; border-radius:28px; text-align:center;
  box-shadow:0 20px 60px rgba(108,92,231,0.5);
  border:2px solid rgba(255,255,255,0.4);
  min-width:260px;
}
.goal-cel-trophy { font-size:4rem; display:block; margin-bottom:6px; animation:trophySpin 1.2s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes trophySpin { 0%{transform:scale(0) rotate(-360deg);} 100%{transform:scale(1) rotate(0deg);} }
.goal-cel-title { color:white; font-size:1.4rem; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,0.2); margin-bottom:4px; }
.goal-cel-sub { color:rgba(255,255,255,0.95); font-size:0.9rem; font-weight:500; }
.goal-cel-amt {
  margin-top:10px; display:inline-block; padding:6px 20px;
  background:rgba(255,255,255,0.3); border-radius:20px;
  color:white; font-size:1.1rem; font-weight:700;
  backdrop-filter:blur(8px);
}


/* ========== ACHIEVEMENTS ========== */
.ach-summary {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; background:var(--card2); border-radius:14px; border:1px solid var(--border);
  margin-bottom:14px;
}
.ach-sum-left { display:flex; align-items:center; gap:12px; }
.ach-sum-icon {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,#fdcb6e,#ff9f40);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; box-shadow:0 4px 12px rgba(253,203,110,0.4);
}
.ach-sum-txt { font-size:0.75rem; color:var(--sub); }
.ach-sum-txt strong { display:block; font-size:1.05rem; color:var(--text); font-weight:700; }
.ach-sum-bar-wrap { flex:1; max-width:120px; }
.ach-sum-bar {
  height:8px; background:rgba(0,184,148,0.1); border-radius:10px; overflow:hidden; position:relative;
}
.ach-sum-bar-fill {
  height:100%; background:linear-gradient(90deg,#00cba4,#00b894);
  transition:width 1s cubic-bezier(0.34,1.56,0.64,1); border-radius:10px;
}
.ach-sum-pct { font-size:0.72rem; font-weight:600; color:var(--teal-dark); text-align:right; margin-top:3px; }
.dark .ach-sum-pct { color:#4ed4aa; }

.ach-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ach-badge {
  background:var(--card2); border-radius:14px; padding:12px 8px; text-align:center;
  border:1.5px solid var(--border); cursor:pointer; position:relative;
  transition:transform 0.2s, box-shadow 0.2s;
}
.ach-badge:active { transform:scale(0.95); }
.ach-badge.unlocked { border-color:rgba(0,184,148,0.3); box-shadow:0 2px 8px rgba(0,184,148,0.12); }
.ach-badge.locked .ach-icon { filter:grayscale(1) opacity(0.35); }
.ach-badge.locked .ach-name { opacity:0.55; }
.ach-icon { font-size:1.8rem; margin-bottom:4px; display:block; line-height:1; }
.ach-name { font-size:0.7rem; font-weight:600; color:var(--text); line-height:1.2; min-height:2.4em; display:flex; align-items:center; justify-content:center; }

/* tier borders */
.ach-badge.unlocked.tier-common    { background:linear-gradient(135deg,rgba(189,195,199,0.15),rgba(189,195,199,0.03)); border-color:#bdc3c7; }
.ach-badge.unlocked.tier-rare      { background:linear-gradient(135deg,rgba(52,152,219,0.12),rgba(52,152,219,0.03)); border-color:#3498db; }
.ach-badge.unlocked.tier-epic      { background:linear-gradient(135deg,rgba(155,89,182,0.15),rgba(155,89,182,0.03)); border-color:#9b59b6; }
.ach-badge.unlocked.tier-legendary {
  background:linear-gradient(135deg,#fff4d6,#ffe082); border-color:#fdcb6e;
  box-shadow:0 0 0 1px rgba(253,203,110,0.4), 0 2px 12px rgba(253,203,110,0.35);
}
.dark .ach-badge.unlocked.tier-legendary { background:linear-gradient(135deg,rgba(253,203,110,0.18),rgba(255,193,7,0.08)); color:#fdcb6e; }
.ach-badge.unlocked.tier-legendary .ach-name { color:#8a6a00; font-weight:700; }
.dark .ach-badge.unlocked.tier-legendary .ach-name { color:#fdcb6e; }

.ach-new-dot {
  position:absolute; top:4px; right:4px; width:10px; height:10px;
  background:#e74c3c; border-radius:50%; border:2px solid var(--card);
  animation:newPulse 1.4s ease-in-out infinite;
}
@keyframes newPulse { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(231,76,60,0.7);} 50%{transform:scale(1.2);box-shadow:0 0 0 6px rgba(231,76,60,0);} }

.ach-progress-mini {
  height:3px; background:rgba(0,184,148,0.1); border-radius:10px; overflow:hidden;
  margin-top:6px;
}
.ach-progress-mini-fill { height:100%; background:var(--teal); border-radius:10px; transition:width 0.6s; }

/* badge detail modal */
.bd-card {
  text-align:center; padding:8px 4px 16px;
}
.bd-icon-big {
  width:110px; height:110px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; margin:0 auto 14px;
  background:var(--card2); border:3px solid var(--border);
}
.bd-icon-big.unlocked.tier-common    { background:linear-gradient(135deg,#ecf0f1,#bdc3c7); border-color:#95a5a6; }
.bd-icon-big.unlocked.tier-rare      { background:linear-gradient(135deg,#d6eaf8,#3498db); border-color:#2980b9; }
.bd-icon-big.unlocked.tier-epic      { background:linear-gradient(135deg,#e8daef,#9b59b6); border-color:#8e44ad; box-shadow:0 0 20px rgba(155,89,182,0.4); }
.bd-icon-big.unlocked.tier-legendary { background:linear-gradient(135deg,#fff4d6,#fdcb6e); border-color:#f39c12; box-shadow:0 0 30px rgba(253,203,110,0.6); animation:legendGlow 2s ease-in-out infinite; }
@keyframes legendGlow { 0%,100%{box-shadow:0 0 20px rgba(253,203,110,0.4);} 50%{box-shadow:0 0 40px rgba(253,203,110,0.8);} }
.bd-icon-big.locked { filter:grayscale(1) opacity(0.4); }
.bd-tier-label {
  display:inline-block; padding:3px 12px; border-radius:20px;
  font-size:0.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  margin-bottom:10px;
}
.bd-tier-common    { background:#bdc3c7; color:white; }
.bd-tier-rare      { background:#3498db; color:white; }
.bd-tier-epic      { background:#9b59b6; color:white; }
.bd-tier-legendary { background:linear-gradient(135deg,#fdcb6e,#f39c12); color:white; box-shadow:0 2px 8px rgba(253,203,110,0.4); }
.bd-name { font-size:1.25rem; font-weight:700; color:var(--text); margin-bottom:6px; }
.bd-desc { font-size:0.88rem; color:var(--sub); line-height:1.5; margin-bottom:14px; padding:0 8px; }
.bd-progress-wrap {
  background:var(--card2); padding:14px; border-radius:14px; border:1px solid var(--border);
  margin:10px 0;
}
.bd-progress-label { font-size:0.74rem; color:var(--sub); margin-bottom:6px; }
.bd-progress-val { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:8px; }
.bd-progress-bar { height:8px; background:rgba(0,184,148,0.1); border-radius:10px; overflow:hidden; }
.bd-progress-bar-fill { height:100%; background:linear-gradient(90deg,#00cba4,#00b894); border-radius:10px; transition:width 1s; }
.bd-unlock-date { font-size:0.76rem; color:var(--teal-dark); font-weight:600; padding:8px 14px; background:rgba(0,184,148,0.08); border-radius:12px; display:inline-block; }
.dark .bd-unlock-date { color:#4ed4aa; background:rgba(0,184,148,0.15); }

/* Unlock toast (bigger than regular toast) */
#achToast {
  position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-200px);
  background:linear-gradient(135deg,#fdcb6e,#ff9f40); color:white;
  padding:14px 20px; border-radius:18px; font-family:-apple-system,BlinkMacSystemFont,'Thonburi','SF Pro Text',ui-sans-serif,'Segoe UI',Roboto,sans-serif;
  font-size:0.88rem; font-weight:600; z-index:99998;
  box-shadow:0 8px 30px rgba(253,203,110,0.5); border:2px solid rgba(255,255,255,0.4);
  display:flex; align-items:center; gap:12px; min-width:260px; max-width:90%;
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
#achToast.show { transform:translateX(-50%) translateY(0); }
#achToast .at-icon { font-size:2rem; line-height:1; }
#achToast .at-txt { flex:1; }
#achToast .at-title { font-size:0.72rem; opacity:0.9; letter-spacing:0.5px; text-transform:uppercase; }
#achToast .at-name { font-size:1rem; font-weight:700; margin-top:2px; }

/* ========== PATTERN INSIGHTS ========== */
.insight-card {
  background:var(--card2); border-radius:14px; padding:12px 14px;
  margin-bottom:10px; border:1px solid var(--border); border-left-width:3px;
  display:flex; gap:12px; align-items:flex-start;
  transition:transform 0.2s;
}
.insight-card:last-child { margin-bottom:0; }
.insight-card.green    { border-left-color:#00b894; background:linear-gradient(90deg,rgba(0,184,148,0.08),transparent 60%); }
.insight-card.blue     { border-left-color:#3498db; background:linear-gradient(90deg,rgba(52,152,219,0.08),transparent 60%); }
.insight-card.purple   { border-left-color:#6c5ce7; background:linear-gradient(90deg,rgba(108,92,231,0.08),transparent 60%); }
.insight-card.orange   { border-left-color:#fdcb6e; background:linear-gradient(90deg,rgba(253,203,110,0.1),transparent 60%); }
.insight-card.red      { border-left-color:#e17055; background:linear-gradient(90deg,rgba(225,112,85,0.08),transparent 60%); }
.insight-card.neutral  { border-left-color:var(--sub); }

.insight-icon {
  width:36px; height:36px; flex-shrink:0; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card); font-size:1.1rem; border:1px solid var(--border);
}
.insight-body { flex:1; min-width:0; }
.insight-title { font-size:0.76rem; font-weight:600; color:var(--sub); text-transform:uppercase; letter-spacing:0.3px; margin-bottom:3px; }
.insight-text { font-size:0.88rem; color:var(--text); line-height:1.55; }
.insight-text strong { color:var(--teal-dark); font-weight:700; }
.dark .insight-text strong { color:#4ed4aa; }
.insight-text .neg { color:var(--red); font-weight:700; }
.insight-text .pos { color:var(--green); font-weight:700; }
.insight-empty {
  text-align:center; padding:24px 16px; color:var(--sub); font-size:0.85rem; line-height:1.6;
}
.insight-empty .ie-big { font-size:2.5rem; margin-bottom:6px; display:block; }
.insight-empty strong { color:var(--teal-dark); }


/* ========== INTER / NOTO SANS THAI TUNING ========== */
body, button, input, select, textarea { font-feature-settings:"cv11","ss01","ss03"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:-0.005em; }
.hero-balance-number, .stat-value, .kpi-value, .goal-current, .goal-pct-badge,
.ach-sum-txt strong, .bd-progress-val,
#compareProfit, #comparePercent, #compareDays, #compareWinRate,
#qsProfit, #qsWinRate, #qsDays,
#kpiWinRate, #kpiAvgGain, #kpiAvgLoss, #kpiMaxDD, #kpiBestDay, #kpiWorstDay, #kpiProfitFactor,
#yearlyProfit, #yearlyROI, #hmCurStreak, #hmMaxStreak, #hmTotalDays {
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum","cv11";
  letter-spacing:-0.015em;
}
.hero-balance-number { letter-spacing:-0.04em !important; font-feature-settings:"tnum","cv11","ss01"; }


/* ========== CELEBRATION FX (ribbon + confetti rain) ========== */
#celebrationFX {
  position:fixed; inset:0; pointer-events:none; z-index:99998; overflow:hidden;
  display:none;
}
#celebrationFX.active { display:block; }

.fx-piece {
  position:absolute; top:-40px;
  will-change:transform,opacity;
  animation:fxFall linear forwards;
}
@keyframes fxFall {
  0%   { transform:translate3d(0,0,0) rotate(0deg); opacity:1; }
  85%  { opacity:1; }
  100% { transform:translate3d(var(--drift,30px),100vh,0) rotate(var(--spin,720deg)); opacity:0; }
}

.fx-ribbon {
  width:10px; height:38px; border-radius:3px;
  animation:fxRibbon linear forwards;
  transform-origin:center;
}
@keyframes fxRibbon {
  0%   { transform:translate3d(0,0,0) rotate(0deg); opacity:0.95; }
  25%  { transform:translate3d(12px,25vh,0) rotate(120deg); }
  50%  { transform:translate3d(-18px,50vh,0) rotate(240deg); }
  75%  { transform:translate3d(14px,75vh,0) rotate(360deg); }
  100% { transform:translate3d(-10px,105vh,0) rotate(520deg); opacity:0; }
}

.fx-streamer {
  width:4px; height:90px; border-radius:3px;
  animation:fxStreamer linear forwards;
  transform-origin:top center;
}
@keyframes fxStreamer {
  0%   { transform:translate3d(0,-120px,0) rotate(0deg); opacity:0.9; }
  100% { transform:translate3d(var(--drift,0),105vh,0) rotate(var(--spin,180deg)); opacity:0; }
}


/* ========== FIREWORKS ========== */
.fw-burst { position:absolute; width:0; height:0; pointer-events:none; }
.fw-spark {
  position:absolute; top:0; left:0;
  width:8px; height:8px; border-radius:50%;
  background:currentColor;
  box-shadow:0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
  animation:fwSparkle 1.4s cubic-bezier(0.18,0.72,0.3,1) forwards;
}
@keyframes fwSparkle {
  0%   { transform:translate(0,0) scale(0.6); opacity:1; }
  70%  { opacity:0.9; }
  100% { transform:translate(var(--fx,0),var(--fy,0)) scale(0.1); opacity:0; }
}
.fw-trail {
  position:absolute;
  width:4px; height:60px; border-radius:3px;
  background:linear-gradient(to top, transparent, currentColor);
  box-shadow:0 0 8px currentColor;
  transform:translateX(-50%);
  animation:fwTrail 0.55s cubic-bezier(0.2,0.9,0.4,1) forwards;
}
@keyframes fwTrail {
  0%   { transform:translateX(-50%) translateY(40px) scaleY(0.3); opacity:0; }
  30%  { opacity:1; }
  100% { transform:translateX(-50%) translateY(-10px) scaleY(1.1); opacity:0; }
}
.fw-flash {
  position:absolute; top:0; left:0;
  width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.95) 0%, currentColor 25%, transparent 75%);
  transform:translate(-50%,-50%);
  animation:fwFlash 0.6s ease-out forwards;
}
@keyframes fwFlash {
  0%   { transform:translate(-50%,-50%) scale(0);   opacity:0; }
  25%  { transform:translate(-50%,-50%) scale(1.2); opacity:1; }
  100% { transform:translate(-50%,-50%) scale(2.5); opacity:0; }
}


/* ========== SPECIAL MODE (BETA) ========== */
.sm-card {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(108,92,231,0.05),rgba(0,184,148,0.03));
  border:1.5px dashed rgba(108,92,231,0.3);
  padding:22px 18px 20px;
}
.dark .sm-card {
  background:linear-gradient(135deg,rgba(108,92,231,0.1),rgba(0,184,148,0.04));
  border-color:rgba(162,155,254,0.35);
}
.sm-ribbon {
  position:absolute; top:14px; right:-36px;
  transform:rotate(38deg); z-index:1;
  background:linear-gradient(135deg,#6c5ce7,#a29bfe);
  color:white; font-size:0.6rem; font-weight:800;
  padding:4px 42px; letter-spacing:2px;
  box-shadow:0 2px 8px rgba(108,92,231,0.35);
  text-shadow:0 1px 2px rgba(0,0,0,0.15);
}
.sm-head {
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.sm-head-icon {
  font-size:1.4rem; line-height:1;
  animation:smPulse 2.4s ease-in-out infinite;
}
@keyframes smPulse {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.15) rotate(-5deg); }
}
.sm-head-title { font-size:1rem; font-weight:700; color:var(--text); letter-spacing:-0.01em; }
.sm-subtitle { font-size:0.76rem; color:var(--sub); margin-bottom:16px; line-height:1.5; }

.sm-io-wrap { display:flex; flex-direction:column; gap:8px; }

.sm-io-label {
  font-size:0.68rem; color:var(--sub); font-weight:600;
  letter-spacing:0.3px; margin-bottom:4px;
  display:flex; align-items:center; gap:6px;
}
.sm-io-label .sm-dot {
  width:6px; height:6px; border-radius:50%; background:var(--teal);
}
.sm-io-label.out .sm-dot { background:#6c5ce7; }

.sm-box {
  position:relative;
}
.sm-input, .sm-output {
  width:100%;
  padding:16px 52px 16px 18px;
  border-radius:14px;
  border:2px solid var(--border);
  background:var(--card2);
  color:var(--text);
  font-family:inherit;
  font-size:1.3rem; font-weight:700;
  outline:none; text-align:left;
  transition:border 0.2s, box-shadow 0.2s;
  letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.sm-input:focus {
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(0,184,148,0.12);
}
.sm-output {
  background:linear-gradient(135deg,rgba(108,92,231,0.06),rgba(108,92,231,0.02));
  border-color:rgba(108,92,231,0.25);
  border-style:dashed;
  color:var(--sub);
  cursor:not-allowed;
}
.dark .sm-output {
  background:linear-gradient(135deg,rgba(108,92,231,0.1),rgba(108,92,231,0.04));
  border-color:rgba(162,155,254,0.3);
}
.sm-output::placeholder { color:var(--sub); opacity:0.6; }
.sm-input::placeholder  { color:var(--sub); opacity:0.5; }

.sm-suffix {
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:0.9rem; font-weight:600; color:var(--sub);
  pointer-events:none;
}

.sm-arrow {
  text-align:center; padding:4px 0;
  color:#6c5ce7; font-size:1.1rem;
  animation:smArrow 1.8s ease-in-out infinite;
}
@keyframes smArrow {
  0%,100% { transform:translateY(0); opacity:0.6; }
  50%     { transform:translateY(3px); opacity:1; }
}
.dark .sm-arrow { color:#a29bfe; }

.sm-footer {
  margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--border);
  font-size:0.72rem; color:var(--sub); text-align:center; line-height:1.6;
}
.sm-footer strong { color:#6c5ce7; font-weight:700; }
.dark .sm-footer strong { color:#a29bfe; }


/* ========== SOFT SHADOWS — TACTILE INTERACTIONS ========== */
.card {
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}
.card:hover {
  box-shadow: var(--shadow-md);
}
.stat-card {
  transition: box-shadow 0.3s, transform 0.2s;
}
.stat-card:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}

/* Inputs & date pickers — softer on focus */
.input-group input:focus,
input[type="date"]:focus,
.modal-input:focus,
.name-input-field:focus,
.sm-input:focus {
  box-shadow: 0 0 0 4px rgba(0,184,148,0.10), 0 4px 12px rgba(0,184,148,0.08) !important;
}

/* Buttons - layered shadow with directional emphasis */
.btn-primary {
  box-shadow: 0 1px 2px rgba(0,184,148,0.2), 0 4px 12px rgba(0,184,148,0.25), 0 8px 20px rgba(0,184,148,0.15) !important;
}
.btn-primary:active {
  box-shadow: 0 1px 2px rgba(0,184,148,0.2), 0 2px 6px rgba(0,184,148,0.2) !important;
}
.btn-green {
  box-shadow: 0 1px 2px rgba(0,184,148,0.2), 0 4px 12px rgba(0,184,148,0.22) !important;
}
.btn-red {
  box-shadow: 0 1px 2px rgba(225,112,85,0.2), 0 4px 12px rgba(225,112,85,0.25) !important;
}

/* Mic button - gentle glow */
.mic-btn {
  box-shadow: 0 1px 2px rgba(0,184,148,0.2), 0 3px 10px rgba(0,184,148,0.3) !important;
}

/* Header buttons - subtle lift on glass */
.header-btn {
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.08);
}

/* Heatmap cells - soft lift on press */
.heatmap-cell:active {
  box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Modal sheets - elevated softly */
.modal-sheet,
.settings-sheet {
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04), 0 -8px 24px rgba(0,0,0,0.08), 0 -16px 48px rgba(0,184,148,0.06);
}

/* Toast & voice overlay - floating glass effect */
#toast {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12), 0 16px 40px rgba(0,184,148,0.1) !important;
}
#voiceOverlay {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 12px 32px rgba(0,0,0,0.2) !important;
}

/* Hero balance - drop shadow effect on the number itself */
.hero-balance-number {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)) drop-shadow(0 8px 16px rgba(0,0,0,0.12));
}

/* Achievement badges - layered when unlocked */
.ach-badge.unlocked {
  box-shadow: 0 1px 2px rgba(16,40,30,0.04), 0 4px 12px rgba(0,184,148,0.1) !important;
}
.ach-badge.unlocked.tier-legendary {
  box-shadow: 0 1px 2px rgba(243,156,18,0.2), 0 4px 12px rgba(253,203,110,0.4), 0 8px 24px rgba(253,203,110,0.25) !important;
}
.ach-badge.unlocked.tier-epic {
  box-shadow: 0 1px 2px rgba(155,89,182,0.15), 0 4px 12px rgba(155,89,182,0.18) !important;
}
.ach-badge.unlocked.tier-rare {
  box-shadow: 0 1px 2px rgba(52,152,219,0.15), 0 4px 12px rgba(52,152,219,0.15) !important;
}

/* Goal box when done - layered glow */
.goal-box.done {
  box-shadow: 0 2px 4px rgba(255,111,176,0.1), 0 8px 20px rgba(255,111,176,0.15), 0 16px 40px rgba(108,92,231,0.12) !important;
}

/* Insight cards - very subtle layered shadow for depth */
.insight-card {
  box-shadow: 0 1px 2px rgba(16,40,30,0.03), 0 2px 8px rgba(16,40,30,0.04);
}

/* Special Mode card - dreamy purple shadow */
.sm-card {
  box-shadow: 0 1px 2px rgba(108,92,231,0.06), 0 4px 16px rgba(108,92,231,0.1), 0 12px 32px rgba(108,92,231,0.08) !important;
}


/* ========== ADD TO HOME SCREEN GUIDE ========== */
.aths-card {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(108,92,231,0.05),rgba(0,184,148,0.03));
  border:1.5px solid rgba(108,92,231,0.2);
  padding:20px 18px;
}
.dark .aths-card {
  background:linear-gradient(135deg,rgba(108,92,231,0.1),rgba(0,184,148,0.04));
  border-color:rgba(162,155,254,0.3);
}
.aths-ribbon {
  position:absolute; top:14px; right:-32px;
  transform:rotate(38deg); z-index:1;
  background:linear-gradient(135deg,#6c5ce7,#a29bfe);
  color:white; font-size:0.6rem; font-weight:800;
  padding:4px 42px; letter-spacing:2px;
  box-shadow:0 2px 8px rgba(108,92,231,0.35);
}
.aths-head {
  display:flex; align-items:center; gap:12px; margin-bottom:6px;
}
.aths-head-icon {
  font-size:2rem; line-height:1;
  animation:smPulse 2.4s ease-in-out infinite;
}
.aths-head-title { font-size:1rem; font-weight:700; color:var(--text); }
.aths-head-sub { font-size:0.76rem; color:var(--sub); margin-top:2px; }

.aths-steps { display:flex; flex-direction:column; gap:0; margin-top:16px; }
.aths-step { display:flex; gap:12px; align-items:flex-start; }
.aths-step-num {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#6c5ce7,#a29bfe);
  color:white; font-size:0.8rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(108,92,231,0.35);
  margin-top:2px;
}
.aths-step-body { flex:1; }
.aths-step-label {
  font-size:0.88rem; color:var(--text); line-height:1.5; margin-bottom:10px;
}
.aths-step-label strong { color:#6c5ce7; }
.dark .aths-step-label strong { color:#a29bfe; }

.aths-img-wrap {
  position:relative; border-radius:14px; overflow:hidden;
  border:2px solid rgba(108,92,231,0.2); cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
  transition:transform 0.2s, box-shadow 0.2s;
}
.aths-img-wrap:active { transform:scale(0.98); }
.aths-img { width:100%; height:180px; object-fit:cover; object-position:top; display:block; }
.aths-img-overlay {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top, rgba(108,92,231,0.8), transparent);
  color:white; font-size:0.75rem; font-weight:600;
  padding:10px 12px 8px; text-align:right;
}
.aths-divider {
  text-align:left; padding:8px 0 8px 8px;
  color:#a29bfe; font-size:1.1rem; opacity:0.7;
}
.aths-footer {
  margin-top:16px; padding:12px 14px;
  background:rgba(108,92,231,0.07); border-radius:12px;
  font-size:0.78rem; color:var(--sub); line-height:1.5;
  border:1px dashed rgba(108,92,231,0.25);
}
.aths-footer strong { color:#6c5ce7; }
.dark .aths-footer { background:rgba(108,92,231,0.12); }

/* Lightbox dots */
.aths-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.35); transition:all 0.2s;
}
.aths-dot.active { background:white; transform:scale(1.3); }

/* ========== FIRST-TIME SETUP UX ========== */
.settings-sheet, .modal-sheet { position:relative; }

/* Sticky save button row in settings */
.settings-save-sticky {
  position:sticky;
  bottom:0;
  left:0; right:0;
  margin-top:16px;
  padding:12px 0 0;
  background:linear-gradient(to top, var(--card) 70%, transparent);
  z-index:5;
}
.settings-save-sticky .btn-row { margin-top:0; }

/* Welcome message at top of settings (first run only) */
.welcome-banner {
  background:linear-gradient(135deg,rgba(0,184,148,0.12),rgba(0,203,164,0.06));
  border:1.5px solid rgba(0,184,148,0.25);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:16px;
  text-align:center;
  display:none;
}
.welcome-banner.show { display:block; animation:welcomeIn 0.4s ease-out; }
@keyframes welcomeIn {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.welcome-banner-icon { font-size:2rem; margin-bottom:4px; display:block; }
.welcome-banner-title { font-weight:700; font-size:0.95rem; color:var(--teal-dark); margin-bottom:4px; }
.dark .welcome-banner-title { color:#4ed4aa; }
.welcome-banner-text { font-size:0.78rem; color:var(--sub); line-height:1.5; }