:root{--font:'Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;--bg:#f7f7fb;--text:#0f172a;--muted:#64748b;--card:#fff;--pri:#7c3aed;--acc:#22d3ee;--ring:rgba(2,6,23,.08);--shadow:0 12px 28px rgba(2,6,23,.08);} :root.dark{--bg:#0b1220;--text:#e5e7eb;--muted:#94a3b8;--card:#0f172a;--ring:rgba(148,163,184,.25);--shadow:0 16px 40px rgba(0,0,0,.5);}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font)}.wrap{max-width:1100px;margin:0 auto;padding:20px}.appbar{position:sticky;top:0;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0));backdrop-filter:blur(8px);border-bottom:1px solid var(--ring)}.appbar .head{display:flex;align-items:center;gap:8px;padding:10px 20px}.brand{font-weight:700}.grow{flex:1}.icon{background:transparent;border:0;font-size:18px;cursor:pointer}.user-email{opacity:.7;margin-left:8px}.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;box-shadow:var(--shadow);padding:18px;margin:14px 0}.split{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}@media(max-width:860px){.split{grid-template-columns:1fr}}.badge{display:inline-block;background:linear-gradient(90deg,#8b5cf6,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}.tabs{display:flex;gap:6px;margin-bottom:10px}.tab{border:1px solid var(--ring);padding:8px 12px;border-radius:12px;background:transparent;cursor:pointer}.tab.active{background:linear-gradient(90deg,#8b5cf6,#22d3ee);color:white;border-color:transparent}.form.grid{display:grid;grid-template-columns:1fr;gap:8px}.row{display:flex;gap:8px;flex-wrap:wrap}.btn{border:0;border-radius:10px;padding:10px 14px;cursor:pointer}.btn-pri{background:linear-gradient(90deg,#8b5cf6,#22d3ee);color:#fff}.btn-ghost{background:#e2e8f0}.btn-danger{background:#ef4444;color:white}.muted{color:var(--muted)}.small{font-size:12px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}@media(max-width:980px){.grid3{grid-template-columns:1fr}}.preview img{width:110px;height:110px;object-fit:cover;border-radius:12px;border:1px dashed #cbd5e1}.goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.goal{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;border:1px solid var(--ring);border-radius:16px;padding:10px}.goal img,.goal .placeholder{width:110px;height:110px;border-radius:12px;object-fit:cover;background:#f1f5f9;display:grid;place-items:center;font-size:34px}.title{font-weight:700}.meta{font-size:12px;color:var(--muted);margin:2px 0}.bar{height:8px;background:#f1f5f9;border-radius:999px;overflow:hidden}.bar>span{display:block;height:100%;background:linear-gradient(90deg,#8b5cf6,#22d3ee)}.goal-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.goal .chip{align-self:flex-start;background:#111827;color:#fff;border-radius:999px;padding:4px 8px;font-size:12px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:8px;border-bottom:1px solid var(--ring)}.table .right{text-align:right}.summary{position:relative;width:180px;height:180px;margin:auto}.summary .donut{position:absolute;inset:0}.summary .donut .bg{fill:none;stroke:#e2e8f0;stroke-width:12}.summary .donut .fg{fill:none;stroke:#8b5cf6;stroke-width:12;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}.summary .progress-text{position:absolute;inset:0;display:grid;place-items:center;font-weight:700}.streak{margin-top:8px;color:var(--muted)}#toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#111827;color:#fff;border-radius:12px;padding:10px 16px;opacity:0;transition:.2s}#toast.show{opacity:1}#loader{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);display:none;place-items:center;z-index:40;color:#fff;gap:12px}#loader .spinner{width:26px;height:26px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}:root.dark .appbar{background:linear-gradient(180deg,rgba(2,6,23,.8),rgba(2,6,23,0));border-color:rgba(148,163,184,.2)}:root.dark .btn-ghost{background:#1f2937}:root.dark .goal .chip{background:#0f172a}