@import"https://fonts.cdnfonts.com/css/product-sans";@import"https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap";:root{--bg-app: #f8fafc;--bg-card: #ffffff;--bg-card-glass: rgba(255, 255, 255, .85);--border-light: #f1f5f9;--border-med: #e2e8f0;--text-main: #1e293b;--text-strong: #0f172a;--text-muted: #475569;--text-light: #64748b;--text-lighter: #94a3b8;--accent: #3b82f6;--shadow: 0 1px 3px 0 rgb(0 0 0 / .05);--sleep-accent: #10b981;--sleep-border: #a7f3d0;--sleep-bg-5: rgba(16, 185, 129, .05);--sleep-bg-10: rgba(16, 185, 129, .1);--sleep-text: #047857}.dark-theme{--bg-app: #0f172a;--bg-card: #1e293b;--bg-card-glass: rgba(30, 41, 59, .9);--border-light: #2d3f55;--border-med: #3d5068;--text-main: #e8edf5;--text-strong: #f8fafc;--text-muted: #d1dce8;--text-light: #b8c8d8;--text-lighter: #8fa4bc;--accent: #60a5fa;--shadow: 0 4px 6px -1px rgb(0 0 0 / .4);--sleep-accent: #34d399;--sleep-border: #065f46;--sleep-bg-5: rgba(52, 211, 153, .06);--sleep-bg-10: rgba(52, 211, 153, .12);--sleep-text: #34d399}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Product Sans,Sarabun,-apple-system,BlinkMacSystemFont,sans-serif;background-color:var(--bg-app);color:var(--text-main);-webkit-tap-highlight-color:transparent;line-height:1.6;transition:background-color .3s ease,color .3s ease}button,textarea,input{font-family:inherit}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:var(--border-med);border-radius:99px}.container{width:100%;max-width:540px;margin:0 auto;transition:max-width .3s ease}.app-header{position:sticky;top:0;z-index:50;background:#ffffffd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid #f1f5f9;padding:16px 20px 0}@media (min-width: 768px){.container{max-width:800px}}@media (min-width: 1024px){.container{max-width:1000px}}@media (min-width: 1280px){.container{max-width:1200px}}.grid-2-col,.grid-internal-2-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (max-width: 1024px){.grid-internal-2-col{grid-template-columns:1fr}}.break-long-text{word-break:break-word;overflow-wrap:break-word;white-space:pre-wrap}.flex-responsive{display:flex}.grid-3-col{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-3-fixed{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.grid-4-col{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.grid-6-col{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.grid-12-col{display:grid;grid-template-columns:repeat(12,1fr);gap:8px}@media (max-width: 1024px){.grid-4-col{grid-template-columns:repeat(2,1fr)}.grid-3-col{grid-template-columns:1fr}}@media (max-width: 768px){.grid-3-col{grid-template-columns:1fr}.grid-12-col{display:flex;overflow-x:auto;gap:10px;padding:4px 0 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.grid-12-col>*{flex:0 0 calc((100% - 20px) / 3);scroll-snap-align:center}}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.calendar-day-header{text-align:center;font-size:11px;color:var(--text-light);padding:6px 0;font-weight:600}@media (min-width: 768px){.calendar-day-header{font-size:13px;padding:10px 0}.calendar-grid{gap:10px}}.responsive-padding{padding:18px 20px}@media (max-width: 640px){.grid-2-col{grid-template-columns:1fr}.flex-responsive{flex-direction:column}.grid-6-col{grid-template-columns:repeat(3,1fr)}.grid-stats{grid-template-columns:1fr 1fr}.responsive-padding{padding:14px 16px}}@media (max-width: 480px){.grid-6-col{grid-template-columns:repeat(2,1fr)}}