@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap";
:root{--bg:#f5f7f5;--surface:#fff;--ink:#111a15;--muted:#829087;--line:#e5ebe6;--nav:#111915;--lime:#b5f23b;--green:#6dac10;--red:#d65c52;--shadow:0 8px 28px #1c311f0b}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--ink);margin:0}body,button,input,select,textarea{font:14px Sarabun,sans-serif}h1,h2,h3,h4,h5,h6{font-family:Noto Sans Thai,sans-serif}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{color:var(--ink)}.shell{grid-template-columns:250px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{background:var(--nav);color:#d7e1d8;flex-direction:column;height:100vh;min-height:0;padding:23px 16px 0;display:flex;position:sticky;top:0;overflow:hidden}.brand{color:#fff;white-space:nowrap;align-items:center;gap:10px;padding:0 8px;font-family:Noto Sans Thai,sans-serif;font-size:17px;font-weight:700;display:flex}.brandmark{background:var(--lime);color:#172011;border-radius:10px;flex:none;place-items:center;width:34px;height:34px;font-size:20px;display:inline-grid}.client-box{background:#1d2921;border:1px solid #2b3a2e;border-radius:13px;gap:5px;margin:30px 4px 10px;padding:13px;display:grid}.client-box small,.side-label{letter-spacing:1.2px;color:#8fa496;font-size:10px}.client-box select{color:#fff;background:0 0;border:0;outline:0;width:100%;font-size:14px;font-weight:700}.client-box select option{color:var(--ink);background:#fff}.client-box>span{color:#97a699;white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.side-label{margin:14px 12px 8px}.nav{scrollbar-width:thin;scrollbar-color:#445247 transparent;align-content:start;gap:5px;min-height:0;padding-bottom:20px;display:grid;overflow-y:auto}.nav button{color:#aab9ad;text-align:left;background:0 0;border:0;border-radius:10px;align-items:center;gap:11px;width:100%;padding:11px 12px;font-size:14px;display:flex}.nav button:hover{color:#fff;background:#1d2a20}.nav button.active{color:#fff;box-shadow:inset 3px 0 var(--lime);background:linear-gradient(90deg,#263626,#1b2820)}.nav-icon{color:#b7c6ba;justify-content:center;width:18px;font-size:18px;line-height:1;display:inline-flex}.nav button.active .nav-icon{color:var(--lime)}.side-footer{border-top:1px solid #2d3a31;flex:none;align-items:center;gap:10px;margin-top:auto;padding:16px 8px 18px;display:flex}.side-footer b,.side-footer small{display:block}.side-footer b{color:#fff;font-size:12px}.side-footer small{color:#91a192;font-size:11px}.side-footer button{color:#b5c5b8;background:0 0;border:0;margin-left:auto;font-size:18px}.avatar{color:#284124;background:#d9e7cf;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-weight:700;display:grid}.main{min-width:0}.topbar{border-bottom:1px solid var(--line);z-index:10;background:#fff;justify-content:space-between;align-items:center;height:70px;padding:0 34px;display:flex;position:sticky;top:0}.top-context{letter-spacing:1.4px;color:#8b9a90;font-size:11px;font-weight:700}.top-context span{color:#26382a;letter-spacing:0;font-size:13px;font-weight:500}.top-actions{align-items:center;gap:14px;display:flex}.top-actions>span{font-weight:600}.mobile-menu{background:0 0;border:0;font-size:22px;display:none}.content{max-width:1520px;margin:auto;padding:32px 36px 70px}.page-head{justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:24px;display:flex}.eyebrow{letter-spacing:1.6px;color:#728277;font-size:10px;font-weight:700}.page-head h1{margin:6px 0 2px;font-size:27px;font-weight:600;line-height:1.4}.page-head p{color:#87938b;margin:0;font-size:13px;line-height:1.5}.head-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn,.date-control,.month-chip{border:1px solid var(--line);color:#304035;white-space:nowrap;background:#fff;border-radius:10px;padding:9px 13px}.btn:hover{border-color:#bdcebd}.btn.primary{background:var(--nav);color:#fff;border-color:var(--nav)}.btn.lime{background:var(--lime);color:#1d290f;border-color:var(--lime);font-weight:700}.btn.lime:hover{background:#a9e72b}.date-control{height:39px}.month-chip{font-weight:600}.grid{gap:16px;display:grid}.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}.panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:17px;padding:20px}.stat{flex-direction:column;min-height:132px;display:flex}.stat>div{color:#77847a;font-size:12px}.stat>b{letter-spacing:-1px;margin-top:12px;font-size:28px;font-weight:600;line-height:1.2}.stat>b.up{color:#579e16}.stat>b.down{color:#d65c52}.stat>small{color:#97a39a;margin-top:auto;font-size:11px}.compact-stats .stat{min-height:118px}.overview-grid{grid-template-columns:minmax(0,1.7fr) minmax(310px,1fr);gap:16px;display:grid}.panel-title{justify-content:space-between;align-items:center;gap:12px;margin-bottom:17px;display:flex}.panel-title h2{margin:0;font-size:15px;font-weight:600}.text-btn{color:#667c69;background:0 0;border:0;font-size:11px}.text-btn:hover{text-decoration:underline}.dark-panel{color:#fff;background:radial-gradient(circle at 85% 22%,#27491b,#111915 47%);min-height:245px}.dark-eyebrow{color:var(--lime);letter-spacing:1px;font-size:10px;font-weight:700}.dark-panel h2{margin:25px 0 8px;font-size:19px;line-height:1.45}.dark-panel p{color:#bac7bb;font-size:12px;line-height:1.7}.outline-light{color:#e3ece4;background:0 0;border:1px solid #536453;border-radius:20px;margin-top:10px;padding:6px 11px;font-size:11px}.progress{background:#edf0eb;border-radius:20px;height:9px;overflow:hidden}.progress>span{background:linear-gradient(90deg,#a745f4,#0ca674);border-radius:20px;height:100%;display:block}.progress-caption{color:#809081;margin-bottom:10px;font-size:12px}.phase-progress{grid-template-columns:120px 1fr 38px;align-items:center;gap:10px;margin-top:13px;font-size:11px;display:grid}.phase-progress .progress{height:7px}.phase-progress>span{color:#637266}.phase-progress>b{text-align:right;font-weight:500}.metric-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 0;font-size:12px;display:flex}.metric-row strong{font-size:17px}.muted{color:#87968b}.small{font-size:11px}.notice{color:#31501f;background:#edf8dc;border:1px solid #cce8a0;border-radius:9px;justify-content:space-between;margin-bottom:18px;padding:10px 14px;display:flex}.notice button{color:inherit;background:0 0;border:0;font-size:18px}.task-list{margin-top:12px}.task-row{border-bottom:1px solid #eef1ed;align-items:flex-start;gap:12px;padding:13px 6px;display:flex}.task-row:last-child{border-bottom:0}.task-row>input,.road-item>input{appearance:none;cursor:pointer;border:1px solid #cbd7cd;border-radius:6px;flex:none;width:20px;height:20px;margin:2px 0 0}.task-row>input:checked,.road-item>input:checked{background:#12a57c;border-color:#12a57c}.task-row>input:checked:after,.road-item>input:checked:after{content:"✓";color:#fff;text-align:center;font-size:15px;line-height:17px;display:block}.task-row.done{background:#f4faf5}.task-row.done .task-body>b{color:#98a49a;text-decoration:line-through}.task-body{flex:1;min-width:0}.task-body b{font-size:13px;font-weight:600}.task-body small{color:#9ca9a0;margin-top:4px;font-size:10px;display:block}.task-body p{color:#78877b;white-space:pre-wrap;margin:5px 0 0;font-size:12px}.priority,.status{white-space:nowrap;border-radius:20px;padding:4px 8px;font-size:10px;line-height:1.2;display:inline-block}.priority{color:#748077;background:#eff3ea}.priority.p1{color:#ad681e;background:#fff0e2}.priority.p2{color:#66843c;background:#eff4eb}.priority.p3{color:#7c8680;background:#f2f3f2}.status{color:#7c897e;background:#f0f2f0}.status.progress{color:#7a4fbc;background:#f1eafa}.status.done{color:#4e8524;background:#eaf7df}.status.blocked{color:#b7543f;background:#fff0ea}.row-actions{gap:6px;display:flex}.row-actions button{color:#8b998e;background:0 0;border:0;font-size:11px}.row-actions button:hover{color:#263b28}.empty-row,.empty-panel{text-align:center;color:#98a69a;padding:36px;font-size:13px}.empty-panel{background:#fff;border:1px dashed #dbe4d9;border-radius:14px}.day-group{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}.day-group h3{margin:0;font-size:13px}.day-group h3 span{color:#97a39a;margin-left:7px;font-family:Sarabun,sans-serif;font-weight:400}.day-group .task-list{margin-top:6px}.view-toggle{background:#eef1ee;border-radius:10px;gap:3px;margin:5px 0 16px;padding:4px;display:inline-flex}.view-toggle button{color:#67756a;background:0 0;border:0;border-radius:7px;padding:7px 11px;font-size:12px}.view-toggle button.selected{color:#17241a;background:#fff;box-shadow:0 1px 6px #00000012}.gantt-scroll{overflow:auto}.gantt-grid{border-top:1px solid var(--line);border-left:1px solid var(--line);min-width:max-content;display:grid}.gantt-heading{border-bottom:1px solid var(--line);border-right:1px solid var(--line);color:#829084;background:#f7f9f6;padding:9px 7px;font-size:10px}.day-number{text-align:center}.gantt-row{grid-column:1/-1;min-height:48px;display:grid;position:relative}.gantt-name{border:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:left;white-space:nowrap;text-overflow:ellipsis;background:#fff;grid-area:1/1;padding:9px 12px;font-size:12px;overflow:hidden}.gantt-day{border-bottom:1px solid var(--line);border-right:1px dashed #edf0eb;grid-row:1}.gantt-bar{z-index:1;color:#fff;text-align:center;background:#086f5d;border:0;border-radius:8px;grid-row:1;align-self:center;height:26px;margin:0 2px;font-size:10px}.gantt-bar.done{background:#9bcf2e}.gantt-bar.blocked{background:#d66a55}.gantt-bar.progress{background:#7450b6}.roadmap-panel{padding:22px 26px}.road-total{text-align:right;margin-bottom:12px}.road-total b{font-size:26px}.road-total span{color:#98a39a}.road-phase{border-top:1px solid var(--line);margin-top:23px;padding:26px 8px 12px}.road-phase-head{justify-content:space-between;align-items:center;display:flex}.road-phase h2{margin:0 0 10px;font-size:16px}.pill{color:#7b7388;background:#f0eef6;border-radius:20px;padding:5px 10px;font-size:11px}.road-item{border-radius:11px;gap:13px;padding:12px;display:flex}.road-item:hover{background:#f9fbf8}.road-item.done{background:#f4faf6}.road-item.done b{color:#9aa69e;text-decoration:line-through}.road-item b{font-size:13px;font-weight:600}.road-item p{color:#849188;margin:3px 0;font-size:11px}.road-item small{color:#94a096}.goal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.goal-card h2{margin:10px 0 17px;font-size:17px}.goal-numbers{align-items:baseline;gap:7px;margin-bottom:13px;display:flex}.goal-numbers b{font-size:29px}.goal-numbers span{color:#97a499;font-size:13px}.rank-wrap{border:1px solid var(--line);background:#fff;border-radius:14px;overflow-x:auto}.rank-table{border-collapse:collapse;width:100%;min-width:1100px}.rank-table th,.rank-table td{border-bottom:1px solid var(--line);text-align:center;padding:13px 10px}.rank-table th{color:#8c9a8e;letter-spacing:.7px;background:#fafbfa;font-size:10px;font-weight:600}.rank-table td{font-size:12px}.rank-table th:first-child,.rank-table td:first-child{text-align:left;z-index:1;background:#fff;min-width:250px;position:sticky;left:0}.rank-table th:first-child{background:#fafbfa}.rank-table td:first-child small{color:#9ba69d;text-overflow:ellipsis;max-width:240px;font-size:10px;display:block;overflow:hidden}.rank-cell{color:#2b3d30;background:0 0;border:0;min-width:50px;font-weight:600}.rank-cell:hover:not(:disabled){background:#eff7e8;border-radius:7px}.rank-cell span{font-size:10px;display:block}.rank-up{color:#15945e}.rank-down{color:#d75d52}.issue-list{gap:6px;display:grid}.issue-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:18px;padding:15px 2px;display:flex}.issue-row:last-child{border:0}.issue-name{align-items:center;gap:9px;display:flex}.issue-name b{font-size:13px}.issue-row p,.issue-row small{color:#89978c;margin:5px 0 0;font-size:11px}.issue-controls{align-items:center;gap:8px;display:flex}.issue-controls input{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px}.modal-backdrop{z-index:30;background:#0c170f80;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:18px;width:min(530px,100%);max-height:90vh;padding:23px;overflow:auto;box-shadow:0 30px 80px #0003}.modal-title{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.modal-title h2{margin:0;font-size:18px}.modal-title button{background:0 0;border:0;font-size:24px}.field{color:#58685c;gap:6px;margin:13px 0;font-size:12px;display:grid}.field input,.field select,.field textarea{background:#fff;border:1px solid #dfe7df;border-radius:9px;outline:0;width:100%;padding:10px}.field textarea{resize:vertical;min-height:85px}.field input:focus,.field select:focus,.field textarea:focus{border-color:#8ac923;box-shadow:0 0 0 3px #b5f23b30}.form-pair{grid-template-columns:1fr 1fr;gap:10px;display:grid}.modal-actions{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.login-screen{background:radial-gradient(circle at 75% 25%,#dff3c9,#f5f7f5 45%);place-items:center;min-height:100vh;padding:20px;display:grid}.login-card{border:1px solid var(--line);background:#fff;border-radius:20px;width:min(430px,100%);padding:34px;box-shadow:0 24px 60px #13321d15}.login-card .brand{color:var(--ink);padding:0}.login-card h1{margin:30px 0 2px;font-size:25px}.login-card>p{color:#87958a;margin:0 0 25px}.login-card>.btn{width:100%;margin-top:12px}.login-error{color:#ad4b37;background:#fff0ec;border-radius:8px;padding:10px;font-size:12px}.center-state{color:#7c897d;place-items:center;min-height:100vh;display:grid}@media (max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-grid{grid-template-columns:1fr}.content{padding:25px}.topbar{padding:0 25px}}@media (max-width:760px){.shell{display:block}.sidebar{z-index:20;width:250px;transition:left .2s;position:fixed;left:-260px}.sidebar.open{left:0;box-shadow:0 0 0 100vmax #0007}.topbar{height:62px;padding:0 16px}.mobile-menu{display:block}.top-context,.top-actions>span,.top-actions .avatar{display:none}.content{padding:20px 14px 50px}.page-head{flex-direction:column;align-items:stretch;gap:12px}.page-head h1{font-size:23px}.head-actions{justify-content:flex-start}.stats{gap:9px}.stat{min-height:110px;padding:14px}.stat>b{font-size:24px}.panel{padding:15px}.task-row{flex-wrap:wrap}.task-body{flex-basis:calc(100% - 35px)}.issue-row{flex-direction:column;align-items:stretch}.issue-controls{flex-wrap:wrap}.goal-grid{grid-template-columns:1fr}.form-pair{grid-template-columns:1fr;gap:0}.roadmap-panel{padding:18px 12px}}@media (max-width:430px){.stats{grid-template-columns:1fr 1fr}.stat>div{font-size:11px}.stat>small{font-size:10px}.head-actions .btn{padding:8px 10px}.date-control{width:100%}.phase-progress{grid-template-columns:92px 1fr 30px}.issue-controls input,.issue-controls .btn{width:100%}}
.road-content{flex:1;min-width:0}.goal-card>.row-actions{justify-content:flex-end;margin-top:12px}.keyword-actions{gap:7px;margin-top:6px;display:flex}.keyword-actions button{color:#819185;background:0 0;border:0;padding:0;font-size:10px}.keyword-actions button:hover{color:#273d2b;text-decoration:underline}.status-select{cursor:pointer;appearance:auto;border:0;max-width:115px}.status-select:focus{outline:2px solid #a9e72b}.team-row{border-top:1px solid var(--line);padding:18px 0}.team-person{align-items:center;gap:11px;display:flex}.team-person>div:nth-child(2){flex:1;min-width:0}.team-person b,.team-person small{display:block}.team-person small{color:var(--muted);overflow-wrap:anywhere}.team-access{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:15px 0 0 45px;display:grid}.team-access label{color:var(--muted);gap:5px;font-size:11px;display:grid}.team-access select{border:1px solid var(--line);background:#fff;border-radius:8px;width:100%;padding:7px 9px;font-size:12px}@media (max-width:600px){.team-person{flex-wrap:wrap}.team-person>.text-btn{margin-left:45px}.team-access{margin-left:0}}