@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap";:root{color:#17202a;font-synthesis:none;--navy:#172b4d;--blue:#3978f6;--muted:#718096;--line:#e7ecf2;background:#f3f6f9;font-family:DM Sans,Noto Sans Thai,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{background:radial-gradient(circle at 85% 0,#e8f0ff 0,#0000 28%),#f5f7fa;grid-template-columns:246px 1fr;min-height:100vh;display:grid}aside{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);z-index:10;background:#ffffffbd;border-right:1px solid #e0e6eee6;flex-direction:column;width:246px;padding:30px 20px;display:flex;position:fixed;inset:0 auto 0 0}.brand{align-items:center;gap:12px;padding:0 8px 30px;display:flex}.brand-mark{color:#fff;background:linear-gradient(145deg,#1d3c6a,#3978f6);border-radius:13px;place-items:center;width:40px;height:40px;font-weight:700;display:grid;box-shadow:0 8px 20px #3978f63d}.brand strong,.brand small{display:block}.brand strong{font-size:17px}.brand small{color:#8a97a8;margin-top:2px;font-size:11px}nav{gap:6px;display:grid}nav button{color:#667386;text-align:left;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:12px 14px;transition:all .2s;display:flex}nav button:hover,nav button.active{color:#265ec8;background:#eaf1ff}nav button.active{font-weight:600}.project-card{background:#fffc;border:1px solid #e2e9f2;border-radius:16px;margin-top:auto;padding:16px;box-shadow:0 8px 30px #27364a0a}.project-card span,.project-card strong,.project-card div{display:block}.project-card span{text-transform:uppercase;letter-spacing:.09em;color:#93a0b1;font-size:10px}.project-card strong{margin:7px 0 12px;font-size:13px}.project-card div{color:#5f6d7f;font-size:11px}.project-card i{background:#2fba73;border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}aside footer{color:#a2adba;padding:18px 8px 0;font-size:10px;line-height:1.6}main{grid-column:2;min-width:0;padding:0 44px 60px}header{justify-content:space-between;align-items:center;height:106px;display:flex}h1{letter-spacing:-.04em;margin:2px 0;font-size:28px}.eyebrow{color:#8c9aab;letter-spacing:.13em;text-transform:uppercase;margin:0;font-size:10px;font-weight:700}.header-actions{align-items:center;gap:12px;display:flex}.saved{color:#6a7888;align-items:center;gap:6px;font-size:12px;display:flex}.saved svg{color:#30aa6d}.icon-btn{color:#667487;background:#ffffffb3;border:1px solid #e4e9ef;border-radius:13px;place-items:center;width:42px;height:42px;display:grid}.content{max-width:1500px;margin:auto}.glass{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(120deg,#fffffff5,#ffffffa3);border:1px solid #ffffffdb}.hero{border-radius:28px;justify-content:space-between;align-items:center;min-height:290px;padding:42px 54px;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 60px #34496912}.hero:after{content:"";background:#729cff20;border-radius:50%;width:300px;height:300px;position:absolute;bottom:-180px;right:-80px}.hero>div:first-child{z-index:1;max-width:600px}.pill{color:#316ddd;background:#eaf1ff;border-radius:20px;align-items:center;gap:7px;padding:7px 12px;font-size:11px;font-weight:600;display:inline-flex}.hero h2{letter-spacing:-.045em;color:#142d54;margin:18px 0 12px;font-size:40px;line-height:1.25}.hero p{color:#728094;max-width:520px;margin-bottom:24px;font-size:14px;line-height:1.7}.primary,.secondary{border:0;border-radius:11px;justify-content:center;align-items:center;gap:8px;padding:11px 16px;font-size:13px;font-weight:600;display:inline-flex}.primary{color:#fff;background:#2968e8;box-shadow:0 8px 18px #2968e83d}.secondary{color:#465568;background:#fff;border:1px solid #dfe6ee}.hero-orbit{place-items:center;width:270px;display:grid}.progress-ring{--p:0deg;background:conic-gradient(#3677f5 var(--p),#e8edf4 0);border-radius:50%;place-items:center;width:178px;height:178px;display:grid;box-shadow:0 20px 50px #275fb125}.progress-ring:before{content:"";background:#fff;border-radius:50%;width:140px;height:140px;position:absolute}.progress-ring div{z-index:1;text-align:center}.progress-ring strong,.progress-ring span{display:block}.progress-ring strong{color:#183762;font-size:32px}.progress-ring span{color:#8794a5;margin-top:3px;font-size:10px}.metric-grid{grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0;display:grid}.metric{background:#ffffffd9;border:1px solid #e8edf3;border-radius:18px;align-items:center;gap:15px;padding:19px 20px;display:flex}.metric-icon{border-radius:13px;place-items:center;width:43px;height:43px;display:grid}.metric-icon.blue{color:#3271ea;background:#eaf1ff}.metric-icon.green{color:#20a567;background:#e6f7ef}.metric-icon.orange{color:#e88428;background:#fff1e4}.metric-icon.violet{color:#7b55d9;background:#f0eaff}.metric span,.metric strong,.metric small{display:block}.metric span{color:#788597;font-size:11px}.metric strong{margin:1px 0;font-size:23px}.metric small{color:#9ba5b2;font-size:10px}.two-col{grid-template-columns:1.2fr .8fr;gap:20px;display:grid}.panel{background:#ffffffe6;border:1px solid #e8edf3;border-radius:20px;box-shadow:0 10px 40px #31435d0a}.two-col>.panel{padding:24px}.panel-head{justify-content:space-between;align-items:center;display:flex}.panel h3{margin:4px 0;font-size:17px}.text-btn{color:#3472e8;background:0 0;border:0;font-size:11px}.activity-list{margin-top:15px}.activity{border-top:1px solid #eef2f6;grid-template-columns:10px 1fr auto;align-items:center;gap:13px;padding:12px 3px;display:grid}.activity .status{border-radius:50%;width:8px;height:8px;padding:0}.activity strong,.activity small{display:block}.activity strong{white-space:nowrap;text-overflow:ellipsis;max-width:510px;font-size:12px;font-weight:600;overflow:hidden}.activity small{color:#939eaa;margin-top:4px;font-size:10px}.activity em{color:#728094;font-size:11px;font-style:normal}.mini-timeline{margin-top:17px}.mini-timeline>div{grid-template-columns:34px 1fr;gap:10px;margin-bottom:16px;display:grid}.mini-timeline>div>span{color:#3978f6;border:1px solid #dce7fb;border-radius:10px;place-items:center;height:33px;font-size:10px;display:grid}.mini-timeline strong{font-size:11px}.mini-timeline p{color:#818d9c;margin:4px 0;font-size:10px;line-height:1.45}.toolbar{align-items:center;gap:12px;margin-bottom:18px;display:flex}.search,.select-wrap{color:#8b98a8;background:#fff;border:1px solid #dfe6ee;border-radius:12px;align-items:center;gap:9px;height:43px;padding:0 13px;display:flex}.search{min-width:280px}.search.wide{flex:1}.search input{border:0;outline:0;width:100%;font-size:12px}.select-wrap select{color:#657386;background:#fff;border:0;outline:0;font-size:12px}.plan-summary{color:#fff;background:#1d3357;border-radius:17px;gap:34px;margin-bottom:17px;padding:17px 25px;display:flex}.plan-summary div{align-items:baseline;gap:8px;display:flex}.plan-summary strong{font-size:20px}.plan-summary span{color:#aebbd0;font-size:11px}.gantt{overflow:hidden}.gantt-head,.gantt-row{grid-template-columns:410px 1fr;display:grid}.gantt-head{color:#7c8999;background:#f8fafc;border-bottom:1px solid #e9edf2;align-items:center;height:48px;font-size:11px;font-weight:600}.gantt-head>div{padding:0 20px}.range-label{border-left:1px solid #e9edf2}.gantt-row{text-align:left;background:#fff;border:0;border-bottom:1px solid #eef2f5;width:100%;min-height:76px;padding:0;transition:all .15s}.gantt-row:hover{background:#f9fbff}.task-info{padding:13px 20px;position:relative}.task-info .status{float:right}.task-info strong,.task-info small{white-space:nowrap;text-overflow:ellipsis;max-width:285px;display:block;overflow:hidden}.task-info strong{margin:3px 0 6px;font-size:12px}.task-info small{color:#8a96a4;font-size:10px}.status{border-radius:20px;padding:4px 7px;font-size:8px;font-weight:600;display:inline-block}.status-goal{color:#7b4fbd;background:#f2eafa}.status-milestone{color:#735cd2;background:#eeeaff}.status-on-track{color:#25865b;background:#e7f7ef}.status-low-risk{color:#577a28;background:#eff7e5}.status-medium-risk{color:#b87321;background:#fff2df}.status-high-risk{color:#cf4d51;background:#ffe8e9}.status-unassigned{color:#718096;background:#edf0f4}.track{background-image:linear-gradient(90deg,#eef2f5 1px,#0000 1px);background-size:12.5% 100%;border-left:1px solid #edf1f5;position:relative}.bar{background:#d8e6ff;border-radius:6px;min-width:7px;height:20px;position:absolute;top:27px;overflow:hidden}.bar i{background:#4a80e8;height:100%;display:block}.bar-goal,.bar-milestone{background:#e9ddfb}.bar-goal i,.bar-milestone i{background:#9165d4}.bar-low-risk{background:#e2f2d1}.bar-low-risk i{background:#78a447}.bar-medium-risk{background:#ffe9c9}.bar-medium-risk i{background:#e99b3d}.bar-high-risk{background:#ffdfe1}.bar-high-risk i{background:#e05c62}.timeline-hero{color:#fff;background:linear-gradient(120deg,#172f54,#274f88);border-radius:21px;margin-bottom:28px;padding:32px 36px;box-shadow:0 14px 35px #16355b2b}.timeline-hero .eyebrow{color:#85abed}.timeline-hero h2{margin:9px 0;font-size:26px}.timeline-hero>p:last-child{color:#b9cae0;margin:0;font-size:12px}.timeline-list{max-width:900px;margin:auto}.timeline-list article{grid-template-columns:64px 35px 1fr;min-height:122px;display:grid}.date-tile{background:#fff;border:1px solid #dae2ec;border-radius:15px;place-items:center;width:58px;height:64px;padding:7px;display:grid}.date-tile strong{font-size:22px;line-height:1}.date-tile span{color:#758294;text-transform:uppercase;font-size:9px}.timeline-line{position:relative}.timeline-line:before{content:"";background:#d9e1ea;width:1px;position:absolute;top:10px;bottom:-10px;left:16px}.timeline-line i{background:#3978f6;border-radius:50%;width:9px;height:9px;display:block;position:absolute;top:9px;left:12px;box-shadow:0 0 0 5px #e7efff}.timeline-list article:last-child .timeline-line:before{display:none}.event-card{background:#fff;border:1px solid #e7ecf2;border-radius:17px;margin-bottom:14px;padding:18px 22px}.event-card>span{color:#3978f6;text-transform:uppercase;font-size:9px}.event-card h3{margin:6px 0 12px;font-size:14px}.event-card p{color:#8b97a6;align-items:center;gap:6px;margin:0;font-size:10px;display:flex}.result-count{color:#8591a0;margin:0 0 12px 3px;font-size:11px}.consultant-grid{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.consultant{background:#fff;border:1px solid #e6ebf1;border-radius:18px;min-height:190px;padding:18px;transition:all .2s}.consultant:hover{transform:translateY(-2px);box-shadow:0 12px 30px #33496314}.consultant-top{gap:12px;display:flex}.company-mark{color:#3371e7;background:#eaf1ff;border-radius:12px;flex:0 0 39px;place-items:center;width:39px;height:39px;font-weight:700;display:grid}.consultant h3{margin:3px 0 4px;font-size:12px;line-height:1.5}.consultant-top p{color:#8e9aa8;margin:0;font-size:9px}.bidder{color:#2c8c61;background:#e4f6ed;border-radius:10px;padding:3px 6px;font-size:8px}.chips{flex-wrap:wrap;gap:5px;margin:16px 0 12px;display:flex}.chips span{color:#5a6b7e;background:#f0f3f7;border-radius:7px;padding:4px 6px;font-size:8px}.address{color:#8793a1;margin:0;font-size:9px;line-height:1.6}.toggle{color:#647286;white-space:nowrap;align-items:center;gap:8px;font-size:11px;display:flex}.toggle input{display:none}.toggle span{background:#dbe1e8;border-radius:15px;width:31px;height:18px;position:relative}.toggle span:after{content:"";background:#fff;border-radius:50%;width:12px;height:12px;transition:all .2s;position:absolute;top:3px;left:3px}.toggle input:checked+span{background:#3978f6}.toggle input:checked+span:after{left:16px}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:30;background:#10213e5c;justify-content:flex-end;display:flex;position:fixed;inset:0}.drawer{background:#fff;width:min(520px,100%);height:100%;padding:34px;overflow:auto;box-shadow:-20px 0 60px #172b4d24}.drawer-head{justify-content:space-between;align-items:flex-start;margin-bottom:30px;display:flex}.drawer h2{margin:4px 0;font-size:24px}.drawer label{color:#667487;margin-bottom:20px;font-size:11px;display:block}.drawer label b{float:right;color:#2868e8}.drawer input,.drawer textarea,.drawer select{color:#26364a;background:#fff;border:1px solid #dfe5ec;border-radius:11px;outline:0;width:100%;margin-top:7px;padding:11px 12px}.drawer input:focus,.drawer textarea:focus,.drawer select:focus{border-color:#3978f6;box-shadow:0 0 0 3px #3978f61c}.form-grid{grid-template-columns:1fr 1fr;gap:0 14px;display:grid}.drawer .range{box-shadow:none;accent-color:#3978f6;border:0;padding:0}.drawer-actions{justify-content:flex-end;gap:10px;margin-top:30px;display:flex}.empty{text-align:center;color:#8a96a5;padding:50px}.loader{text-align:center;color:#758397;background:#f5f7fa;place-content:center;display:grid;position:fixed;inset:0}.loader-mark{color:#fff;background:#3978f6;border-radius:17px;place-items:center;width:52px;height:52px;margin:auto;animation:1.4s infinite pulse;display:grid}.loader p{font-size:12px}@keyframes pulse{50%{transform:scale(1.06);box-shadow:0 0 0 12px #3978f612}}@media (width<=1050px){.metric-grid,.consultant-grid{grid-template-columns:repeat(2,1fr)}.gantt-head,.gantt-row{grid-template-columns:340px 1fr}.two-col{grid-template-columns:1fr}.hero-orbit{display:none}}@media (width<=760px){.app-shell{display:block}.app-shell aside{z-index:20;border:1px solid #dde5ee;border-radius:18px;width:auto;height:66px;padding:7px;display:block;position:fixed;inset:auto 10px 10px}.brand,.project-card,aside footer{display:none}nav{justify-content:space-around;display:flex}nav button{justify-items:center;gap:2px;padding:10px;font-size:9px;display:grid}main{padding:0 14px 95px}header{height:85px}.saved{display:none}h1{font-size:23px}.hero{min-height:auto;padding:28px}.hero h2{font-size:31px}.metric-grid{grid-template-columns:1fr 1fr}.metric{padding:15px}.metric-icon{display:none}.toolbar{flex-wrap:wrap}.search{flex:1;min-width:100%}.toolbar .primary{flex:1}.gantt-head,.gantt-row{grid-template-columns:1fr}.gantt-head .range-label,.track{display:none}.consultant-grid{grid-template-columns:1fr}.timeline-list article{grid-template-columns:58px 24px 1fr}.form-grid{grid-template-columns:1fr}.drawer{padding:24px}}.login-page{background:radial-gradient(circle at 70% 10%,#dce9ff,#0000 32%),#f4f7fb;place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffffe0;border:1px solid #fff;border-radius:26px;width:min(430px,100%);padding:42px;box-shadow:0 24px 70px #20365818}.login-card .brand-mark{margin-bottom:28px}.login-card h1{margin:8px 0 10px}.login-card>p:not(.eyebrow){color:#778598;margin-bottom:26px;font-size:13px;line-height:1.7}.login-card label{color:#657386;font-size:11px}.login-card input{border:1px solid #dce4ee;border-radius:12px;outline:0;width:100%;margin:8px 0 14px;padding:12px}.login-card .primary{width:100%}.login-success{color:#28865c;background:#e6f7ef;border-radius:12px;align-items:center;gap:10px;padding:14px;font-size:12px;display:flex}.login-error{color:#be4d52;background:#ffecee;border-radius:9px;margin-bottom:12px;padding:9px;font-size:11px}.portfolio-strip{background:#fff;border:1px solid #e7ecf2;border-radius:16px;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px;padding:14px 18px;display:flex}.portfolio-strip>div:first-child strong{margin-top:3px;font-size:12px;display:block}.portfolio-projects{gap:7px;display:flex;overflow-x:auto}.portfolio-projects button{white-space:nowrap;color:#59687a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:7px 10px;font-size:10px}.portfolio-projects button span{color:#3978f6;margin-right:5px}.portfolio-projects button.active{color:#275ec4;background:#edf3ff;border-color:#3978f6}.portfolio-projects .add-project-mini{color:#3978f6;background:#fff;align-items:center;gap:4px;display:flex}@media (width<=760px){.portfolio-strip{flex-direction:column;align-items:flex-start}.portfolio-projects{width:100%}}.projects-page-head{background:linear-gradient(120deg,#fffffff5,#eef4ffcc);border:1px solid #e5ebf2;border-radius:21px;justify-content:space-between;align-items:flex-end;margin-bottom:18px;padding:25px 28px;display:flex;box-shadow:0 12px 35px #273b580b}.projects-page-head h2{color:#18345c;margin:6px 0 5px;font-size:24px}.projects-page-head>div>p:last-child{color:#7b8899;margin:0;font-size:12px}.projects-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.project-tile{text-align:left;color:#26364a;background:#ffffffe6;border:1px solid #e3e9f1;border-radius:20px;padding:21px;transition:all .2s;box-shadow:0 8px 30px #273b5808}.project-tile:hover{border-color:#b9cef7;transform:translateY(-3px);box-shadow:0 16px 38px #315a9a16}.project-tile-top{color:#8b98a8;justify-content:space-between;align-items:center;display:flex}.project-status{border-radius:20px;align-items:center;gap:6px;padding:5px 8px;font-size:9px;font-weight:600;display:inline-flex}.project-status i{background:currentColor;border-radius:50%;width:6px;height:6px}.project-status-active{color:#27875d;background:#e7f7ef}.project-status-planning{color:#aa7028;background:#fff2df}.project-status-completed{color:#3470d7;background:#eaf1ff}.project-year{color:#3978f6;letter-spacing:.08em;margin-top:18px;font-size:9px;font-weight:700;display:block}.project-tile h3{margin:6px 0 4px;font-size:16px;line-height:1.5}.project-tile>p{color:#8793a2;min-height:30px;margin:0;font-size:10px}.project-progress{margin:20px 0 17px}.project-progress>div:first-child{justify-content:space-between;align-items:center;display:flex}.project-progress span{color:#778496;font-size:10px}.project-progress strong{color:#254e89;font-size:15px}.project-progress-track{background:#e9eef5;border-radius:6px;height:6px;margin-top:8px;overflow:hidden}.project-progress-track i{background:linear-gradient(90deg,#3978f6,#6b9dff);border-radius:6px;height:100%;display:block}.project-stats{border-top:1px solid #edf1f5;border-bottom:1px solid #edf1f5;grid-template-columns:repeat(3,1fr);padding:14px 0;display:grid}.project-stats div{border-right:1px solid #edf1f5;padding-left:11px}.project-stats div:first-child{padding-left:0}.project-stats div:last-child{border:0}.project-stats strong,.project-stats span{display:block}.project-stats strong{font-size:16px}.project-stats span{color:#8c98a6;margin-top:2px;font-size:8px}.project-stats .risk strong{color:#d16a36}.project-dates{color:#8491a1;align-items:center;gap:7px;margin-top:14px;font-size:9px;display:flex}@media (width<=1100px){.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=760px){.projects-page-head{flex-direction:column;align-items:flex-start;gap:18px;padding:21px}.projects-page-head .primary{width:100%}.projects-grid{grid-template-columns:1fr}}
