@import"https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700;800&display=swap";:root{--font-sans: "Anuphan", "LINE Seed Sans TH", "Noto Sans Thai", "Segoe UI", sans-serif;--color-ink: #112d27;--color-muted: #6b7b75;--color-soft: #f8f6ee;--color-canvas: #fffdf8;--color-surface: rgba(255, 255, 252, .92);--color-panel: #fbfbf5;--color-border: rgba(24, 54, 46, .13);--color-brand: #0f8f58;--color-brand-strong: #0e5c42;--color-line: #06c755;--color-warm: #f5b64b;--color-danger: #bd4b3f;--color-success: #11945c;--shadow-soft: 0 24px 80px rgba(21, 61, 47, .12);--shadow-card: 0 14px 36px rgba(21, 61, 47, .08);--radius-xl: 28px;--radius-lg: 22px;--radius-md: 16px;--radius-sm: 12px;color:var(--color-ink);font-family:var(--font-sans);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0;overflow-x:hidden;overflow-y:auto}body{min-width:320px;background:var(--color-canvas)}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}svg{display:block;width:1em;height:1em;fill:currentColor}.app-shell{width:100%;min-height:100svh;overflow-x:hidden;overflow-y:auto;background:radial-gradient(circle at 10% 8%,rgba(6,199,85,.13),transparent 30%),radial-gradient(circle at 90% 16%,rgba(245,182,75,.18),transparent 24%),linear-gradient(145deg,#fffdf8,#f1f8ef)}.compact-shell{display:grid;place-items:center;padding:clamp(14px,3vw,28px)}.visit-screen{display:grid;grid-template-rows:auto auto minmax(0,auto) auto auto;align-content:center;justify-items:center;gap:16px;width:min(100%,380px);max-width:calc(100vw - 32px);height:min(100%,820px);min-height:0;min-width:0}.visit-screen>*{max-width:100%}.brand-lockup{display:grid;place-items:center;min-width:0}.brand-logo{display:block;width:124px;height:76px;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 14px rgba(6,199,85,.1))}.app-header .brand-logo{width:112px;height:52px;object-fit:contain}.header-status strong,.header-status small{display:block}.visit-copy{display:grid;justify-items:center;gap:10px;text-align:center}.visit-copy h1,.screen-copy h1,.dashboard-title h1,.dashboard-title h2,.today-card h2{margin:0;color:var(--color-ink);font-weight:800;line-height:1.12;letter-spacing:0}.visit-copy h1{font-size:clamp(30px,8.2vw,40px)}.visit-copy p,.screen-copy p,.dashboard-title p,.today-status span,.dashboard-card p,.privacy-note,.privacy-banner small,.profile-row small,.step-text small{margin:0;color:var(--color-muted);line-height:1.55}.visit-copy p{max-width:280px;font-size:16px;font-weight:500}.flow-form{display:grid;width:100%;max-width:100%;min-width:0;gap:14px}.register-form{align-self:end}.profile-preview,.setup-card,.today-card,.dashboard-card,.person-card,.privacy-banner,.invite-strip{border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.profile-preview{display:grid;width:100%;max-width:100%;min-width:0;justify-self:center;overflow:hidden;border-radius:var(--radius-lg)}.profile-card-head,.profile-row{display:grid;min-width:0;padding:13px 16px}.profile-card-head{grid-template-columns:1fr auto;align-items:center}.profile-card-head strong{font-size:15px}.profile-row+.profile-row,.profile-row.with-avatar{border-top:1px solid var(--color-border)}.profile-row.with-avatar{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}.profile-row span{min-width:0}.profile-row strong{display:block;min-width:0;overflow:hidden;color:var(--color-ink);font-size:14px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.line-badge{display:inline-grid;width:34px;height:34px;place-items:center;border-radius:10px;color:#fff;background:var(--color-line);font-size:9px;font-weight:800}.avatar{display:grid;width:42px;height:42px;flex:0 0 auto;place-items:center;border:2px solid #ffffff;border-radius:999px;color:#fff;background:radial-gradient(circle at 35% 28%,#f7d0a1 0 18%,transparent 19%),linear-gradient(145deg,#1b5d45,#0d352b);box-shadow:0 8px 18px #13503a2e;font-weight:800}.privacy-note{display:inline-flex;align-items:center;justify-content:center;gap:8px;max-width:300px;text-align:center;font-size:13px}.privacy-note svg{width:16px;height:16px;color:var(--color-brand-strong)}label{display:grid;gap:8px;color:var(--color-ink);font-size:13px;font-weight:700}input{width:100%;min-height:48px;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:11px 14px;outline:none;color:var(--color-ink);background:#ffffffe6;font-weight:600}input::placeholder{color:#95a39e}input:focus{border-color:#06c755ad;box-shadow:0 0 0 4px #06c7551f}input:disabled{color:#8b9995;background:#eef4f0}.primary-button,.secondary-button,.text-button,.header-status button,.step-tab,.side-nav button{cursor:pointer;border:0;font-weight:800}.primary-button{min-height:54px;width:100%;border-radius:999px;padding:13px 20px;color:#fff;background:linear-gradient(135deg,#0f8f58,#074f3b);box-shadow:0 16px 28px #0c5c413d}.primary-button.inline{width:auto;min-height:46px;padding-inline:24px}.primary-button:disabled{cursor:not-allowed;color:#7f8d87;background:#d9e1dc;box-shadow:none}.secondary-button{min-height:46px;border:1px solid rgba(15,143,88,.34);border-radius:12px;padding:11px 18px;color:var(--color-brand-strong);background:#ffffffb8}.text-button{color:var(--color-muted);background:transparent}.notice{width:100%;border-radius:var(--radius-sm);padding:11px 13px;color:var(--color-brand-strong);background:#24645214;font-size:12px;font-weight:700;line-height:1.45;text-align:center}.notice.success{color:#1e654c;background:#2f8d681f}.notice.error{color:var(--color-danger);background:#bd4b3f1f}.app-frame-shell{display:grid;place-items:center;padding:clamp(12px,2vw,24px)}.workspace-frame{display:grid;grid-template-columns:264px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"header header" "rail panel";width:min(100%,1120px);min-height:min(780px,calc(100svh - 48px));overflow:visible;border:1px solid var(--color-border);border-radius:24px;background:#fffffab8;box-shadow:var(--shadow-soft)}.app-header{grid-area:header;display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;border-bottom:1px solid var(--color-border);padding:16px 22px;background:#ffffffc7}.header-status{display:inline-grid;grid-template-columns:auto minmax(0,auto) auto;align-items:center;min-width:0;gap:10px}.header-status span{min-width:0}.header-status strong{max-width:160px;overflow:hidden;color:var(--color-ink);font-size:13px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.header-status small{color:var(--color-muted);font-size:11px}.header-status button{display:grid;width:32px;height:32px;place-items:center;border-radius:999px;color:var(--color-ink);background:transparent}.step-rail{grid-area:rail;display:grid;align-content:start;gap:12px;min-height:0;padding:28px 20px;background:#f6faf1c2}.step-rail h2{margin:0 0 10px;color:var(--color-brand-strong);font-size:18px;font-weight:800}.step-tab{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;min-height:58px;border-radius:16px;padding:8px 10px;color:var(--color-ink);background:transparent;text-align:left}.step-tab:before{position:absolute;left:23px;top:44px;width:2px;height:30px;border-radius:999px;background:#d7ded8;content:""}.step-tab:nth-of-type(5):before{display:none}.step-tab.active,.step-tab.done{background:#ffffff8f}.step-dot{display:grid;width:32px;height:32px;place-items:center;border-radius:999px;color:var(--color-muted);background:#dfe5df;font-size:14px;font-weight:800}.step-tab.done .step-dot,.step-tab.active .step-dot{color:#fff;background:var(--color-success)}.step-tab.locked .step-dot{color:#7d8884}.step-text{display:grid;min-width:0;gap:2px}.step-text strong{overflow:hidden;font-size:13px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.step-tab.active .step-text small,.step-tab.done .step-text small{color:var(--color-brand)}.step-tab:disabled{cursor:not-allowed}.side-nav{display:grid;gap:8px;margin-top:30px}.side-nav button{display:flex;align-items:center;gap:10px;min-height:46px;border-radius:12px;padding:10px 12px;color:var(--color-ink);background:transparent;text-align:left}.side-nav button.selected{background:#11945c1c}.side-nav svg,.dashboard-card svg,.privacy-banner svg{width:22px;height:22px;color:var(--color-brand)}.active-panel{grid-area:panel;display:grid;min-height:0;overflow:visible;padding:clamp(24px,4vw,42px)}.mobile-stepper{display:none}.setup-card{display:grid;align-self:center;justify-self:center;width:min(100%,560px);gap:18px;border-radius:var(--radius-lg);padding:clamp(22px,5vw,38px);text-align:center}.round-icon{display:grid;width:96px;height:96px;place-items:center;justify-self:center;border-radius:999px;color:var(--color-brand);background:#e8f3df}.round-icon svg{width:52px;height:52px}.screen-copy{display:grid;justify-items:center;gap:8px}.screen-copy h1{font-size:clamp(30px,5vw,40px)}.screen-copy p{max-width:360px;font-size:16px}.compact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;text-align:left}.dashboard-panel{display:grid;grid-template-rows:auto auto auto auto;align-content:start;gap:14px;min-height:0;overflow:hidden}.dashboard-title{display:grid;gap:8px}.dashboard-title h1{font-size:clamp(28px,4vw,40px)}.today-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(190px,.7fr);gap:18px;align-items:center;min-height:220px;border-radius:var(--radius-lg);padding:24px}.today-card>svg{align-self:start;width:34px;height:34px;color:var(--color-warm)}.today-text{display:grid;gap:18px}.today-card h2{font-size:24px}.today-status{display:grid;gap:10px;max-width:250px;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px;background:#f7f9f1d1}.dashboard-art{width:100%;height:auto;min-width:180px;max-height:170px;justify-self:end}.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.dashboard-card{display:grid;align-content:start;gap:12px;min-height:178px;border-radius:var(--radius-lg);padding:20px}.dashboard-card h2{margin:0;font-size:18px;font-weight:800}.dashboard-card p{font-size:14px}.invite-strip{display:grid;gap:6px;overflow:hidden;border-radius:var(--radius-sm);padding:11px 12px;box-shadow:none}.invite-strip span{color:var(--color-brand-strong);font-size:12px;font-weight:800}.invite-strip code{min-width:0;overflow:hidden;color:var(--color-brand-strong);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.person-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:0}.person-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;border-radius:var(--radius-md);padding:14px}.person-card h2{margin:0;font-size:18px}.person-card p{margin:5px 0 0;color:var(--color-muted);font-size:13px;line-height:1.45}.person-card strong{align-self:end;color:var(--color-brand-strong);font-size:20px}.status-pill{align-self:start;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800}.status-pill.success{color:#1d6b4f;background:#2f8d6824}.status-pill.warning{color:#8b5a18;background:#f1b86a47}.status-pill.muted{color:var(--color-muted);background:#68797124}.privacy-banner{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;border-color:#f5b64b47;border-radius:var(--radius-md);padding:14px 18px;background:#fff5dad1;box-shadow:none}.privacy-banner span{display:grid;gap:2px;min-width:0}.privacy-banner strong{font-size:14px}@media(max-width:900px){.workspace-frame{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"header" "rail" "panel";width:min(100%,760px);min-height:auto;border-radius:22px}.step-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:16px 26px 12px;background:#ffffff7a}.step-rail h2,.side-nav,.step-text small{display:none}.step-tab{justify-items:center;grid-template-columns:1fr;gap:8px;min-height:74px;padding:0;background:transparent;text-align:center}.step-tab:before{left:calc(50% + 20px);top:16px;width:calc(100% - 40px);height:2px}.step-dot{width:42px;height:42px;font-size:16px}.step-text strong{font-size:12px;white-space:normal}.active-panel{padding:26px}.today-card{grid-template-columns:auto minmax(0,1fr)}.dashboard-art{display:none}}@media(max-width:640px){.app-shell{min-height:100svh}.compact-shell,.app-frame-shell{padding:12px}.visit-screen{width:calc(100vw - 28px);max-width:380px;height:100%;gap:14px}.visit-screen .register-form,.visit-screen .profile-preview,.visit-screen .primary-button,.visit-screen .notice{width:100%;max-width:380px}.visit-copy h1{font-size:32px}.visit-copy p{font-size:15px}.profile-card-head,.profile-row{padding:12px 14px}.privacy-note{font-size:12px}.workspace-frame{min-height:calc(100svh - 24px);border-radius:20px}.app-header{padding:12px 14px}.header-status span{display:none}.header-status{grid-template-columns:auto auto}.step-rail{display:none}.active-panel{grid-template-rows:auto auto;gap:14px;padding:18px}.mobile-stepper{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:8px}.mobile-stepper span{display:grid;height:36px;place-items:center;border-radius:999px;color:var(--color-muted);background:#dfe5df;font-size:13px;font-weight:800}.mobile-stepper span.active,.mobile-stepper span.done{color:#fff;background:var(--color-success)}.mobile-stepper svg{width:18px;height:18px}.setup-card{width:100%;align-self:stretch;align-content:center;gap:14px;padding:20px 18px}.round-icon{width:80px;height:80px}.round-icon svg{width:44px;height:44px}.screen-copy h1,.dashboard-title h1{font-size:28px}.screen-copy p,.dashboard-title p{font-size:14px}.compact-fields,.dashboard-grid,.person-list{grid-template-columns:1fr}.today-card{grid-template-columns:1fr;min-height:0;padding:18px}.today-card>svg{width:28px;height:28px}.today-status{max-width:none}.dashboard-panel{overflow:hidden;gap:12px}.dashboard-grid{gap:12px}.dashboard-card{min-height:0;padding:16px}.privacy-banner{padding:12px 14px}.primary-button.inline,.secondary-button{width:100%}}@media(max-height:700px){.visit-screen{gap:8px}.brand-logo{width:108px;height:64px}.visit-copy h1{font-size:30px}.visit-copy p,.profile-row strong,.privacy-note{font-size:12px}.profile-card-head,.profile-row{padding-block:9px}.primary-button{min-height:46px}.notice{display:none}}