:root{--ink: #1d1d27;--ink-2: #4b4c5c;--ink-3: #3b3c4a;--muted: #6a6b7a;--bg: #eef0f6;--surface: #f5f6fb;--white: #fff;--brand: #5b5ce2;--brand-hover: #4448c9;--brand-soft: #e3e6ff;--brand-ink: #dcdeff;--focus: #c7ccff;--accent: #ff8a5b;--line: #eef0f6;--on-brand-track: rgba(255, 255, 255, .22);--on-brand-soft: rgba(255, 255, 255, .16);--page-pad: 36px clamp(20px, 3.5vw, 44px) 64px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Poppins,IBM Plex Sans Thai,system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:var(--ink)}a:hover{color:var(--muted)}textarea,input,button{font-family:inherit;color:inherit}textarea:focus,input:focus{outline:2px solid var(--focus);outline-offset:1px}input[type=range]{accent-color:var(--ink)}button{cursor:pointer;border:0}h1,h2{margin:0}.app{display:flex;min-height:100vh}.main{flex:1;min-width:0}.page{padding:var(--page-pad);max-width:1300px;display:flex;flex-direction:column;gap:28px}.page.narrow{max-width:1080px;gap:24px}.page.profile{padding-top:28px;gap:22px}.eyebrow{font-size:13px;color:var(--muted)}.h1{font-weight:600;font-size:clamp(32px,4vw,44px);letter-spacing:-.03em;line-height:1.1;margin:6px 0 0}.h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0}.muted{color:var(--muted)}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.grid-fill{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.grid-2up{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.avatar{border-radius:50%;display:grid;place-items:center;font-weight:600;flex:none;color:var(--ink)}.chip{font-size:11px;padding:4px 10px;border-radius:999px;white-space:nowrap}.chip.due{font-size:12px;font-weight:500;background:var(--brand-soft);color:var(--ink);padding:6px 12px}.chip.due.overdue{background:var(--ink);color:var(--surface)}.chip.due.done{background:var(--bg)}.btn-back{align-self:flex-start;background:var(--surface);padding:8px 16px;border-radius:999px;font-size:12px}.btn-dark{background:var(--ink);color:var(--surface);padding:12px 20px;border-radius:999px;font-size:13px;font-weight:500}.btn-dark.hover-brand:hover{background:var(--brand-hover)}.btn-white{background:var(--white);padding:12px 20px;border-radius:999px;font-size:13px;font-weight:500;box-shadow:0 1px 2px #2323230d}.segmented{display:flex;gap:4px;background:var(--surface);padding:5px;border-radius:999px;align-self:flex-start;flex-wrap:wrap}.segmented>button{background:transparent;color:var(--ink);padding:9px 20px;border-radius:999px;font-size:13px;font-weight:500}.segmented>button.on{background:var(--ink);color:var(--surface)}.check{width:24px;height:24px;border:1.5px solid var(--ink);background:transparent;color:var(--surface);border-radius:50%;font-size:11px;line-height:1;padding:0;display:grid;place-items:center}.check.on{background:var(--ink)}.field{border:0;background:var(--surface);padding:14px;font-size:14px;line-height:1.6;resize:vertical;border-radius:16px}.field.sm{padding:12px 14px;font-size:13px;border-radius:14px}.field-card{border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--white)}.field-card.soft{background:var(--brand-soft)}.field-card>span{font-size:13px;font-weight:600}.empty{padding:28px;color:var(--muted);font-size:14px;background:var(--surface);border-radius:20px}.bite{position:absolute;top:0;border-radius:0 0 999px 999px}.sidebar{width:250px;flex:none;padding:16px 0 16px 16px;position:sticky;top:0;height:100vh}.sidebar-inner{background:var(--surface);border-radius:28px;height:100%;display:flex;flex-direction:column;gap:28px;padding:26px 16px;overflow:auto}.logo{width:36px;height:36px;border-radius:12px;background:var(--brand);position:relative;overflow:hidden;flex:none}.logo:before{content:"";position:absolute;left:6px;right:6px;top:0;height:12px;background:var(--brand-soft);border-radius:0 0 12px 12px}.logo:after{content:"";position:absolute;left:12px;bottom:6px;width:12px;height:12px;border-radius:50%;background:var(--accent)}.nav-btn{text-align:left;background:transparent;color:var(--ink);padding:11px 16px;border-radius:999px;font-size:14px;font-weight:500;display:flex;justify-content:space-between;align-items:center}.nav-btn.on{background:var(--ink);color:var(--surface)}.nav-badge{background:var(--brand-soft);color:var(--ink);font-size:11px;padding:2px 8px;border-radius:999px}.side-member{display:flex;align-items:center;gap:10px;background:transparent;padding:7px 10px;border-radius:16px;text-align:left}.side-member.on,.side-member:hover{background:var(--bg)}.attn-row{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:18px;padding:10px 14px;text-align:left}.attn-row:hover{background:var(--white)}.member-card{background:var(--white);border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:18px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 1px 2px #2323230a;text-align:left}.member-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px #23232314}.mini-tile{background:var(--surface);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.person-pill{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;font-size:12px;font-weight:500;transition:opacity .2s,transform .2s,background .2s;outline-offset:-2px}.act-row{display:grid;gap:16px;align-items:center;padding:14px 18px;background:var(--white);border-radius:20px}.act-title{font-size:14px;font-weight:500}.act-title.done{text-decoration:line-through}.act-meta{font-size:12px;color:var(--muted);margin-top:2px}.session{min-height:100vh;padding:16px;display:grid;grid-template-columns:clamp(210px,20vw,260px) minmax(0,1fr) clamp(220px,22vw,320px);gap:16px}.session-steps{background:var(--brand);color:var(--surface);border-radius:28px;padding:24px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:16px;height:calc(100vh - 32px);overflow:auto}.mood-opt{border:0;padding:16px 18px;border-radius:22px;display:flex;gap:14px;align-items:center;text-align:left;outline-offset:-2px;transition:transform .15s;color:var(--ink)}.mood-opt:hover{transform:translateY(-2px)}@media (max-width: 860px){.app{flex-direction:column}.sidebar{width:auto;height:auto;position:static;padding:16px 16px 0}.sidebar-inner{height:auto;gap:16px;padding:18px 14px}.sidebar-inner nav{flex-direction:row!important;flex-wrap:wrap}.side-team,.side-extra{display:none!important}.session{grid-template-columns:minmax(0,1fr)}.session-steps,.session-notes{position:static!important;height:auto!important}.span-2{grid-column:auto!important}}.plan-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:16px;align-items:start}.start-btn{background:var(--surface);color:var(--ink);padding:14px 20px;border-radius:999px;font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center}.start-btn:hover{background:var(--brand-soft)}@media (max-width: 700px){.plan-grid{grid-template-columns:minmax(0,1fr)}}.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--brand-soft);border-top-color:var(--brand);animation:spin .8s linear infinite;flex:none}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.spinner{animation-duration:2.4s}}.sync-banner{margin:16px clamp(20px,3.5vw,44px) 0;max-width:1300px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#fff0e8;border-radius:20px;padding:12px 16px;font-size:13px}
