@import url('https://fonts.googleapis.com/css2?family=Mali:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{
  --ink:#171717;--text:#5f625f;--muted:#92958f;--line:#e8e5df;--bg:#fbfaf7;--surface:#fff;--warm:#fffaf0;--sidebar-bg:#fff;--sidebar-ink:#303330;--sidebar-field:#f8f7f4;--sidebar-line:#e8e5df;--accent:#4b83f5;--paper:#fffaf0;
  --yellow:#f6c33b;--blue:#4b83f5;--green:#35b96f;--red:#f05268;--purple:#8a62e8;--cyan:#35a8d8;--amber:#e6a632;--pink:#e75078;--mint:#48b78b;
  --note-soft:#eef4ff;--task-soft:#eaf9f0;--calendar-soft:#fff0f2;--board-soft:#f3efff;--table-soft:#ecf8fc;--image-soft:#fff7e5;--canvas-soft:#fff0f6;--collab-soft:#eaf8f3;
  --r-sm:10px;--r:16px;--r-lg:24px;--shadow:0 10px 34px rgba(27,24,19,.08);--shadow-soft:0 4px 18px rgba(27,24,19,.06);
  --font-ui:'Noto Sans Thai','Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-en:'Manrope',system-ui,sans-serif;--font-hand:'Mali','Noto Sans Thai',cursive;
  --sidebar:256px;--topbar:64px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--font-ui);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}
.btn{height:44px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}.btn.yellow{background:var(--yellow);border-color:var(--yellow)}.btn.ghost{background:transparent}.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:#fff;display:grid;place-items:center;color:var(--ink)}
.field{width:100%;height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:0 13px;outline:0}.field:focus{border-color:#b9c7df;box-shadow:0 0 0 3px rgba(75,131,245,.1)}textarea.field{height:auto;min-height:96px;padding-top:12px;resize:vertical}
.tag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-soft)}
.hand{font-family:var(--font-hand);font-weight:600}.eyebrow{font-family:var(--font-en);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#7d817d;font-weight:700}.muted{color:var(--muted)}