:root{font-family:Noto Sans Thai,Tahoma,system-ui,sans-serif;color:#203b36;background:#f5f6f2;font-synthesis:none;--primary: #126953;--primary-dark: #0c4f3e;--surface: #fff;--line: #e0e7e1;--muted: #65776e;--soft: #eef5ef;--radius: 18px;--shadow: 0 8px 30px #203b3608}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,textarea,select{font:inherit}button,select{cursor:pointer}button{border:1px solid #cedbd2;background:#fff;color:#29473c;border-radius:10px;padding:10px 15px;min-height:44px;transition:background .15s,border-color .15s,box-shadow .15s}button:hover{background:#f1f7f2;border-color:#8aa997}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #dc9b28;outline-offset:3px}input,select,textarea{max-width:100%;min-width:0;width:100%;border:1px solid #ccd9cf;border-radius:9px;min-height:44px;background:#fff;color:#203b36;padding:10px 12px}textarea{resize:vertical}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.5}p{line-height:1.75}h3{font-size:15px}small{font-size:11px}label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600}main{max-width:1440px;margin:auto;padding:0 36px}strong{font-weight:650}.demo-bar{text-align:center;background:#e8efd7;color:#425d33;padding:8px 16px;font-size:12px;letter-spacing:.2px}.app-header{height:106px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px max(36px,calc((100vw - 1368px)/2))}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:flex;align-items:center;justify-content:center;color:#fff;background:var(--primary);width:52px;height:52px;border-radius:16px;font-size:25px;font-weight:800;letter-spacing:-2px}.brand-mark span{color:#d9eab0}.brand strong{display:block;letter-spacing:-.5px;font-size:22px}.brand small{display:block;color:var(--muted);letter-spacing:.8px}.identity{display:grid;grid-template-columns:auto 190px;align-items:center;column-gap:12px;color:#556b60;font-size:12px}.identity small{grid-column:2;font-weight:400;color:var(--muted)}.identity select{background:#f7f9f6;font-size:13px}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px 0 22px}.eyebrow{color:#678576;font-size:11px;font-weight:700;letter-spacing:1.5px;margin-bottom:8px}.intro h1{font-size:30px;font-weight:750;letter-spacing:-.6px;margin-bottom:10px;line-height:1.5}.intro h1 span{display:inline;color:#72917e;font-weight:400;font-size:22px;margin-left:18px}.intro p{font-size:13px;color:var(--muted);margin-bottom:0}.primary{color:#fff;border-color:var(--primary);background:var(--primary);font-weight:650}.primary:hover{background:var(--primary-dark);color:#fff;border-color:var(--primary-dark)}.create{min-width:150px;box-shadow:0 5px 12px #12695318}.local-notice{display:flex;align-items:center;gap:9px;font-size:12px;color:#587064;background:#edf2e9;border:1px solid #e0e8d9;border-radius:10px;padding:11px 15px;line-height:1.8}.local-notice>span{color:#738a47}.save-status{color:#56705e;min-height:19px;font-size:11px;margin:6px 0}.workspace{display:grid;grid-template-columns:minmax(305px,.95fr) minmax(350px,1.3fr);gap:20px;align-items:start}.inbox{min-width:0}.inbox-heading{display:flex;align-items:center;justify-content:space-between;margin:10px 0 16px}.inbox-heading h2{font-size:17px;margin:0}.inbox-heading>span{font-size:11px;color:var(--muted);background:#e8eee6;border-radius:20px;padding:4px 11px}.filter-bar{margin-bottom:16px}.tabs{display:flex;border-bottom:1px solid var(--line);gap:3px;margin-bottom:14px}.tabs button{border:none;border-radius:8px 8px 0 0;background:none;color:#66796f;font-size:12px;flex:1;padding:10px 5px;white-space:nowrap;min-height:46px}.tabs button[aria-selected=true]{color:#126953;border-bottom:3px solid #126953;background:#e9f1e9;font-weight:700}.tabs button>span{display:inline-flex;align-items:center;justify-content:center;background:#e1e9e0;font-size:10px;border-radius:20px;min-width:20px;height:20px;margin-left:5px}.filters{display:flex;flex-direction:column;gap:9px}.search{position:relative}.search>span{position:absolute;left:12px;top:5px;font-size:25px;color:#749080;line-height:30px}.search input{padding-left:37px;background:#fff;font-size:13px}.filter-selects{display:flex;align-items:center;gap:7px}.filter-selects select{font-size:12px;flex:1;width:0;padding:9px}.filter-selects button{font-size:11px;padding:7px;white-space:nowrap}.text-button{border:none;background:transparent;text-decoration:underline;text-underline-offset:4px;color:#537464;padding:7px 8px;font-size:12px}.filter-hint{font-size:10px;color:#718176;margin:7px 0 0}.cards{display:flex;flex-direction:column;gap:10px}.work-card{display:block;text-align:left;width:100%;padding:17px 19px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);background:var(--surface);position:relative;overflow-wrap:anywhere}.work-card.selected{border:1px solid #368366;box-shadow:inset 4px 0 #368366,0 5px 15px #1269530a;background:#fbfdf9}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.kind{font-size:10px;font-weight:650;background:#ebf1f9;color:#41669b;border-radius:5px;padding:3px 7px}.kind-dev{color:#745697;background:#f1ecf6}.kind-finance{color:#916c21;background:#f8f0dc}.kind-project{color:#52785f;background:#e9f0e5}.kind-general{color:#68766c;background:#edf0eb}.code{font-size:10px;color:#718176;letter-spacing:.7px}.work-card h3{font-size:15px;margin-bottom:4px;color:#29443a}.customer{font-size:12px;color:#718176;margin-bottom:12px}.card-meta{display:flex;align-items:center;justify-content:space-between;margin:12px 0;gap:8px}.owner{display:flex;align-items:center;gap:7px;font-size:12px}.avatar{border-radius:50%;height:25px;width:25px;display:inline-flex;align-items:center;justify-content:center;color:#5b7659;background:#edf1e4;font-size:12px}.badge{font-size:10px;padding:4px 9px;border-radius:20px;font-weight:600;white-space:nowrap;letter-spacing:0;background:#eef0eb;color:#627265;display:inline-block}.badge.active{color:#256c90;background:#e9f3fa}.badge.blocked{color:#996020;background:#fff1dc}.badge.review{color:#75529c;background:#f1eaf8}.badge.done{color:#27795b;background:#e7f3ea}.card-bottom{padding-top:10px;border-top:1px solid #eef1ec;display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#738277}.card-bottom span:last-child{color:#46725d}.detail{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:15px}.detail-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0e9;padding:9px 22px;background:#fcfdf9}.back{border:0;background:none;font-size:12px;color:#567263;padding:5px 0;min-height:35px}.detail-content{padding:26px}.detail .eyebrow{display:flex;align-items:center;justify-content:space-between}.detail h2{font-size:23px;margin:10px 0 5px;letter-spacing:-.4px;overflow-wrap:anywhere}.detail h2:focus{outline:none}.detail .customer{font-size:13px;margin-bottom:20px}.source{border:1px solid #e2e9df;background:#f7f9f4;border-radius:10px;padding:12px 14px;line-height:1.7;margin-bottom:17px}.source span{display:block;color:#7a8a77;font-size:10px;margin-bottom:4px}.source strong{font-size:12px;color:#5b745e;font-weight:500}.description{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;color:#5a6e61}.facts{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;border-top:1px solid var(--line);padding-top:20px;margin:23px 0}.facts>div{min-width:0}.facts dt{font-size:11px;color:#7e8a7d;margin-bottom:5px}.facts dd{font-size:13px;font-weight:550;margin:0;overflow-wrap:anywhere}.actions{background:#f5f8f2;border:1px solid #e5ebdf;border-radius:12px;padding:14px;margin:20px 0}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.section-heading h3{font-size:13px;margin:0 0 10px}.section-heading .text-button{font-size:11px;margin-top:-8px}.action-buttons{display:flex;gap:7px;flex-wrap:wrap}.action-buttons button{font-size:12px;padding:8px 12px;flex-grow:1}.muted{color:var(--muted);font-size:12px;line-height:1.7}.actions .muted{font-size:11px;margin:12px 0 0}.timeline{border-top:1px solid var(--line);padding-top:22px}.timeline h3{font-size:14px;margin-bottom:4px}.timeline .muted{font-size:10px;margin-bottom:16px}.timeline ol{list-style:none;padding:0 0 0 16px;margin:0}.timeline li{position:relative;border-left:1px solid #d6e2d5;padding:0 0 20px 18px;overflow-wrap:anywhere}.timeline li:last-child{padding-bottom:0;border-left-color:transparent}.timeline li:before{content:"";width:7px;height:7px;border-radius:50%;background:#97b4a0;border:3px solid white;box-sizing:content-box;position:absolute;left:-7px;top:2px}.timeline li>div{display:flex;justify-content:space-between;align-items:center;gap:10px}.timeline strong{font-size:11px;color:#52735e}.timeline time{font-size:10px;color:#8b9789}.timeline li p{font-size:12px;color:#637560;margin:4px 0 0;white-space:pre-wrap}.finance-note{font-size:12px;color:#8a6322;background:#fff7df;border:1px solid #efdfb9;padding:12px;border-radius:10px}.evidence{padding:14px;background:#f3eff8;border:1px solid #e3dbec;border-radius:10px;overflow-wrap:anywhere}.evidence h3{font-size:12px;color:#73518e;margin-bottom:8px}.evidence p{font-size:12px;white-space:pre-wrap;margin:0;color:#6f5c7d}.completion{font-size:12px;color:#2b7655;margin:4px 0 0}.detail-placeholder{position:sticky;top:15px;border:1px dashed #cfdcd0;border-radius:var(--radius);background:linear-gradient(145deg,#fbfcf8,#eef3e9);min-height:530px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;color:#71917b}.detail-placeholder>span{width:68px;height:68px;display:grid;place-items:center;border:1px solid #dce6d4;border-radius:22px;background:#f3f7ec;font-size:33px;margin-bottom:20px}.detail-placeholder h2{font-size:20px;color:#496c53;margin-bottom:10px}.detail-placeholder p{font-size:13px;line-height:1.9}.detail-placeholder small{margin-top:30px;font-size:11px;color:#8a9b85}.empty{padding:45px 15px;text-align:center;border:1px dashed #ceddce;border-radius:14px;color:#72876e}.empty>span{font-size:40px}.empty h3{margin-top:10px}.empty p{font-size:12px}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:24px 0 30px;color:#81917c;font-size:10px}.modal-backdrop{position:fixed;inset:0;background:#183b3280;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:30;display:flex;align-items:center;justify-content:center;padding:22px}.modal{width:620px;max-width:100%;max-height:calc(100dvh - 44px);overflow:auto;background:#fff;border:1px solid #d6e1d5;border-radius:20px;box-shadow:0 28px 80px #183b3240}.modal-heading{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#f8faf3;position:sticky;top:0;z-index:1}.modal-heading h2{margin:0;font-size:21px}.modal-heading .eyebrow{font-size:9px}.modal-heading>button{border:none;background:transparent;min-width:44px}.form-body{padding:20px 24px;display:flex;flex-direction:column;gap:17px}.form-body>p{margin-bottom:0;font-size:13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--line);background:#fff;position:sticky;bottom:0;z-index:1}.error{color:#943f32;background:#fff0eb;border:1px solid #f2cbbc;border-radius:10px;font-size:12px;padding:12px;overflow-wrap:anywhere}.danger{background:#9b4232;border-color:#9b4232;color:#fff}.danger:hover{background:#793224;color:#fff}.stats{display:flex;gap:20px;margin:8px 0 18px}.stat{border-right:1px solid #d9e2d5;padding-right:20px;font-size:10px;color:#71836c}.stat strong{display:block;font-size:22px;color:#365d43;margin-bottom:2px}.stat:last-child{border-right:0}.stat.attention strong{color:#a37732}@media(min-width:1250px){.workspace{grid-template-columns:minmax(400px,.9fr) minmax(480px,1.3fr);gap:30px}.detail-content{padding:30px 34px}}@media(max-width:1000px){main{padding:0 22px}.app-header{padding:12px 22px}.intro h1{font-size:26px}.intro h1 span{display:block;margin-left:0;font-size:18px}.workspace{gap:15px;grid-template-columns:minmax(280px,.95fr) minmax(330px,1.1fr)}.detail-content{padding:20px}.detail h2{font-size:20px}.filter-selects{flex-wrap:wrap}.filter-selects .text-button{flex-basis:100%;text-align:right;min-height:30px;padding:0}.work-card{padding:15px}.card-bottom{font-size:9px}}@media(max-width:699px){main{padding:0 16px}.demo-bar{font-size:10px;padding:7px 10px}.app-header{height:99px;padding:10px 16px;gap:10px}.brand{gap:8px}.brand-mark{width:40px;height:44px;border-radius:13px;font-size:22px}.brand strong{font-size:17px}.brand small{font-size:9px}.identity{display:flex;gap:2px;align-items:stretch;width:170px;flex-shrink:0;font-size:9px}.identity select{font-size:11px;min-height:36px;padding:5px 8px}.identity small{font-size:8px}.intro{padding:25px 0 18px;gap:12px}.intro h1{font-size:22px}.intro h1 span{font-size:15px;margin-top:1px}.intro .eyebrow{font-size:9px}.intro p{font-size:11px;max-width:220px}.create{min-width:95px;padding:10px;font-size:12px;flex-shrink:0}.local-notice{font-size:10px;padding:9px 11px;align-items:flex-start}.local-notice>span{line-height:18px}.save-status{font-size:10px}.stats{gap:13px;margin:0 0 14px}.stat{padding-right:13px;font-size:9px}.stat strong{font-size:19px}.workspace{display:block}.detail-placeholder,.has-detail .inbox{display:none}.detail{position:relative;top:0;border-radius:16px}.detail-top{padding:8px 18px}.detail-content{padding:22px 18px}.detail h2{font-size:22px}.facts{gap:18px 12px}.facts dd{font-size:12px}.facts dt{font-size:10px}.work-card{padding:17px 18px}.card-bottom{font-size:10px}.filter-selects{flex-wrap:nowrap}.filter-selects .text-button{flex-basis:auto;min-height:44px;padding:5px}.filter-selects select{padding:8px;font-size:11px}.tabs button{font-size:12px}.inbox-heading{margin-top:5px}.has-detail{scroll-margin-top:10px}footer{flex-direction:column;align-items:flex-start;gap:5px;padding-top:22px}.modal-backdrop{padding:0;align-items:flex-end}.modal{border-radius:20px 20px 0 0;max-height:95dvh;width:100%;border-bottom:none}.modal-heading{padding:16px 20px}.form-body{padding:18px 20px;gap:16px}.form-grid{grid-template-columns:1fr;gap:16px}.modal-footer{padding:14px 20px;padding-bottom:max(14px,env(safe-area-inset-bottom))}.modal-footer button{flex:1}.action-buttons button{min-height:46px}.timeline li>div{gap:8px}.description{font-size:13px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
