@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--navy:#142c42;--green:#167b67;--mint:#e6f3ed;--ink:#223649;--muted:#7e8b98;--line:#e6ebef;--bg:#f5f7f9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'Inter','IBM Plex Sans Thai',sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #75c6b6;outline-offset:3px}button{border:0}a{color:var(--green);text-decoration:none}.sidebar{position:fixed;width:246px;background:white;inset:0 auto 0 0;border-right:1px solid var(--line);padding:29px 20px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;color:var(--navy);font-size:16px;letter-spacing:1px;font-weight:800}.brand small{display:block;font-size:8px;font-weight:500;letter-spacing:.1px;margin-top:5px;color:#85909a}.brand-icon{display:grid;place-items:center;background:var(--green);color:white;width:38px;height:40px;border-radius:10px;font-size:27px;letter-spacing:-2px}.workspace{font-size:10px;letter-spacing:1.5px;color:#9aa4ad;margin:44px 10px 16px;display:flex;justify-content:space-between}.workspace span{color:var(--green);background:var(--mint);padding:3px 5px;border-radius:4px;letter-spacing:1px;font-size:8px}nav>button{width:100%;display:flex;align-items:center;gap:13px;background:white;padding:14px 13px;color:#657788;font-weight:600;border-radius:8px;text-align:left}nav>button.active{background:#e9f4ef;color:var(--green)}nav i{font-style:normal;font-size:21px}.nav-count{margin-left:auto;font-size:10px;opacity:.6}.subnav{padding:11px 0 22px 47px;color:#8a96a1;font-size:12px}.subbuttons{display:grid;gap:15px}.subbuttons button{background:none;color:#84909c;text-align:left;font-size:12px;padding:0}.side-note{margin-top:auto;border:1px solid var(--line);padding:14px;border-radius:9px;font-size:11px;font-weight:600}.connected,.demo-dot{display:inline-block;width:6px;height:6px;background:#28a886;border-radius:50%;margin-right:6px}.side-note small{display:block;font-size:9px;color:#8c98a1;font-weight:400;margin-top:7px}.sync-line{border-top:1px solid var(--line);margin-top:12px;padding-top:10px;font-size:8px;color:#a0aab4;letter-spacing:.3px}.user{display:flex;align-items:center;gap:10px;margin:22px 4px 0;font-size:11px;font-weight:600}.user small{display:block;color:#94a0aa;font-size:9px;margin-top:5px}.user>span:last-child{margin-left:auto}.avatar{display:inline-grid;place-items:center;width:34px;height:34px;background:#e9edf6;border-radius:50%;color:#5a6d8a;font-size:11px}.avatar.small{width:30px;height:30px;font-size:10px}.shell{margin-left:246px}header{height:76px;background:white;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-bottom:1px solid var(--line);font-size:11px;color:#8995a0}header b{margin:0 12px;font-weight:400;color:#c0c9d0}.header-right{display:flex;align-items:center;gap:9px}.icon-button{width:27px;height:27px;background:white;border:1px solid var(--line);border-radius:50%;margin:0 16px;color:#7d8a96}main{padding:30px 36px;min-height:calc(100vh - 124px);max-width:1720px;margin:auto}footer{padding:14px 36px;display:flex;justify-content:space-between;color:#99a4ae;font-size:9px;border-top:1px solid var(--line)}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:600;color:var(--green);text-transform:uppercase;margin-bottom:9px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}h1{font-size:27px;letter-spacing:-.8px;font-weight:700;margin:0 0 9px}h2{font-size:16px;margin:0}h3{font-size:14px;margin:0 0 15px}.description{color:#84919e;font-size:12px;margin:0}.btn{padding:11px 17px;border-radius:7px;font-size:12px;font-weight:600;background:var(--green);color:white;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.secondary{background:white;border:1px solid #dce4e8;color:#526575}.btn.ghost{background:none;color:#789080;padding:6px}.btn.danger{background:#fff0ee;color:#c76459}.actions{display:flex;gap:9px;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}.stat{background:white;border:1px solid var(--line);border-radius:10px;padding:19px 21px;position:relative}.stat .label{font-size:11px;color:#87939d;margin-bottom:12px}.stat strong{font-size:28px;letter-spacing:-1px;font-weight:600}.stat small{font-size:10px;color:#9aa6af;margin-left:8px}.stat-icon{position:absolute;right:19px;top:20px;width:31px;height:31px;background:#f0f6f3;color:var(--green);border-radius:8px;display:grid;place-items:center;font-size:17px}.stat-foot{font-size:9px;color:#2c9378;margin-top:10px}.panel{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:20px}.panel-head{padding:22px 23px;display:flex;justify-content:space-between;align-items:center;gap:14px}.panel-head p{margin:6px 0 0;color:#99a4ae;font-size:11px}.toolbar{display:flex;justify-content:space-between;gap:14px;padding:0 23px 19px}.search{position:relative;flex:1;max-width:360px}.search span{position:absolute;left:13px;top:11px;color:#93a0ac}.search input{padding-left:35px;width:100%}input,select,textarea{border:1px solid #dfe6ea;border-radius:6px;padding:10px 12px;background:white;color:#41576a;outline:none;font-size:12px}input:focus,select:focus,textarea:focus{border-color:#62ad96;box-shadow:0 0 0 3px #edf7f2}input::placeholder,textarea::placeholder{color:#a2adb7}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap;font-size:12px}th{background:#f8fafb;color:#8e9aa5;font-size:10px;font-weight:500;letter-spacing:.2px;padding:13px 23px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}td{padding:17px 23px;border-bottom:1px solid #eef1f4;color:#647789}tbody tr:last-child td{border-bottom:0}tbody tr.clickable:hover{background:#f6fbf8;cursor:pointer}.company{display:flex;gap:12px;align-items:center}.company-mark{width:36px;height:36px;border-radius:9px;background:#edf4ef;color:#628777;display:grid;place-items:center;font-size:12px;font-weight:600}.company b{color:#354a5c;font-weight:600;font-size:12px}.company small{display:block;color:#9ba5af;font-size:10px;margin-top:5px}.code{color:#698294;font-size:11px}.badge{display:inline-block;padding:5px 8px;border-radius:5px;font-size:10px;background:#e8f5ed;color:#2d9670;font-weight:500}.badge.blue{background:#eaf1fc;color:#597dac}.badge.orange{background:#fff4e3;color:#bb8c32}.badge.gray{background:#eef1f4;color:#87939e}.badge.red{background:#fff0ed;color:#c36c58}.row-arrow{background:none;color:#a1afb9;font-size:18px}.table-bottom{padding:16px 23px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#9aa5ae;font-size:10px}.pagination{display:flex;gap:6px;align-items:center}.pagination span{display:inline-block;background:var(--green);color:white;border-radius:4px;padding:5px 9px}.insight-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}.activity{display:flex;gap:13px;padding:13px 23px;border-top:1px solid #f2f4f6;align-items:center;font-size:11px}.activity-dot{background:#eef5f2;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;color:#6e9b88}.activity p{margin:0 0 5px;color:#53697b}.activity small{color:#9ba7b1;font-size:10px}.activity time{margin-left:auto;color:#a1abb3;font-size:9px}.flow{padding:2px 23px 20px;display:flex;align-items:center;justify-content:space-between}.flow>div{text-align:center;font-size:10px;color:#8698a5}.flow i{display:grid;place-items:center;margin:0 auto 10px;background:#edf5f1;color:var(--green);border-radius:12px;height:43px;width:43px;font-style:normal;font-size:20px}.flow>span{color:#b5c3c9}.info-note{background:#f5f9f7;border:1px solid #e5f0ea;padding:13px 16px;border-radius:7px;color:#6c8e7b;font-size:10px;margin:0 23px 23px}.back{background:none;color:#8a9ca9;font-size:11px;padding:0;margin-bottom:20px}.profile-head{display:flex;align-items:center;gap:17px;padding:24px}.profile-head .company-mark{height:56px;width:56px;font-size:21px}.profile-head h2{font-size:21px;margin:0 0 8px}.profile-head p{font-size:11px;color:#91a0ab;margin:0}.profile-head .actions{margin-left:auto}.tabs{display:flex;gap:24px;padding:0 24px;border-bottom:1px solid var(--line);overflow:auto;white-space:nowrap}.tabs button{background:none;color:#94a0ab;font-size:11px;padding:17px 0;border-bottom:2px solid transparent}.tabs button.active{color:var(--green);border-color:var(--green);font-weight:600}.tab-content{padding:23px}.tab-content table th,.tab-content table td{padding-left:16px;padding-right:16px}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.field-label{font-size:10px;color:#9aa6af;display:block;margin-bottom:9px}.field-value{font-size:12px;line-height:1.8}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.form-field{display:flex;flex-direction:column;gap:7px;font-size:11px;color:#81919e}.form-field input,.form-field select,.form-field textarea{width:100%;font-size:12px}.span2{grid-column:span 2}.span3{grid-column:1/-1}.job-layout{display:grid;grid-template-columns:1fr 290px;gap:20px}.card-body{padding:23px}.stepper{display:flex;justify-content:space-between;margin-bottom:24px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:9px}.stepper span{font-size:11px;color:#a4aeb5}.stepper span.done{color:var(--green)}.stepper b{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#eaf4ef;margin-right:7px;font-size:10px}.item-card{border:1px solid var(--line);border-radius:8px;padding:17px;margin-bottom:14px}.item-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;font-size:12px;font-weight:600}.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.thumb{position:relative;width:90px;height:80px}.thumb img{width:100%;height:100%;object-fit:cover;border:1px solid var(--line);border-radius:7px}.thumb button{position:absolute;right:1px;top:1px;background:white;border-radius:50%;font-size:10px}.upload{border:1px dashed #bbd6c9;border-radius:8px;background:#f8fbf9;padding:26px;text-align:center;color:#769183;font-size:11px;display:block;cursor:pointer}.upload input{display:none}canvas{display:block;max-width:100%;height:140px;width:100%;border:1px dashed #cfdadf;background:#fcfdfd;border-radius:7px;touch-action:none}.summary-line{display:flex;justify-content:space-between;font-size:11px;margin:17px 0;color:#8495a2}.summary-line b{color:#425d6a;font-weight:500}.big-total{padding:18px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.big-total strong{font-size:22px;color:var(--green)}.timeline{border-left:1px solid #dce7e1;padding-left:18px;margin-left:5px}.timeline p{font-size:11px;color:#536d7c;margin-bottom:6px}.timeline small{font-size:9px;color:#9ca9b1}.warranty-hero{max-width:740px;margin:20px auto}.warranty-search{padding:32px}.warranty-search .search{max-width:none}.warranty-search input{padding:15px 15px 15px 38px;font-size:13px}.warranty-search .search span{top:16px}.warranty-result{margin-top:22px;border:1px solid #dcece3;border-radius:10px;overflow:hidden}.warranty-banner{padding:22px;background:#eaf6ef;color:var(--green);display:flex;align-items:center;gap:14px}.warranty-banner strong{display:block;font-size:17px;margin-bottom:5px}.warranty-banner small{font-size:11px}.warranty-result .info-grid{padding:24px;grid-template-columns:1fr 1fr}.modal-overlay{position:fixed;inset:0;background:#10283f70;backdrop-filter:blur(3px);z-index:10;display:flex;align-items:center;justify-content:center;padding:25px}.modal{background:white;border-radius:13px;max-width:700px;width:100%;max-height:90vh;overflow:auto;padding:27px;box-shadow:0 20px 70px #001d3040}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-head button{background:#f2f5f6;border-radius:5px;padding:7px 10px}.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(100px);padding:14px 24px;background:#153e32;color:white;border-radius:8px;font-size:12px;z-index:30;transition:.25s;box-shadow:0 8px 30px #12352830}#toast.show{transform:translateX(-50%) translateY(0)}.empty{text-align:center;color:#9aa6ad;padding:35px;font-size:12px}.pill{font-size:9px;padding:4px 8px;background:#f0f4f6;border-radius:20px;color:#8a9ba8}.guide-step{display:flex;gap:13px;margin-bottom:20px;font-size:12px;line-height:1.9}.guide-step b{color:var(--green)}.print-only{display:none}@media(min-width:1600px){main{padding-top:40px}.stats{margin-bottom:30px}td{padding-top:22px;padding-bottom:22px}}@media(max-width:1100px){.sidebar{width:205px;padding-left:13px;padding-right:13px}.shell{margin-left:205px}main{padding:25px 22px}header{padding:0 22px}.job-layout{grid-template-columns:1fr}.job-aside{display:grid;grid-template-columns:1fr 1fr;gap:20px}.stats{gap:10px}.stat{padding:17px 14px}.stat-icon{right:12px}.brand{font-size:14px}.insight-grid{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{position:static;width:100%;padding:15px 18px;display:block;border-bottom:1px solid var(--line)}.brand small,.workspace,.side-note,.user,.subnav{display:none}.brand-icon{height:30px;width:30px;font-size:21px}.sidebar nav{display:flex;margin-top:17px;gap:10px}.sidebar nav>button{padding:9px;font-size:12px}.sidebar nav i{font-size:16px}.shell{margin-left:0}header{height:55px;font-size:10px}.header-right{font-size:0}.icon-button{font-size:13px;margin:0 9px}main{padding:22px 16px}.page-heading{align-items:flex-start}h1{font-size:23px}.description{font-size:10px;line-height:1.7}.stats{grid-template-columns:1fr 1fr}.stat strong{font-size:24px}.stat small{display:none}.form-grid,.info-grid{grid-template-columns:1fr 1fr}.span3{grid-column:1/-1}.profile-head{flex-wrap:wrap}.profile-head .actions{margin-left:0}.job-aside{display:block}.stepper{gap:10px;overflow:auto}.stepper span{white-space:nowrap;font-size:9px}.toolbar{flex-wrap:wrap}.panel-head{padding:19px}.toolbar{padding-left:19px;padding-right:19px}footer{padding:16px;display:block;line-height:2}.actions .btn{padding:10px;font-size:10px}.tabs{gap:20px}.panel-head h2{font-size:14px}}@media print{.sidebar,header,footer,.back,.actions,.stepper,.btn,.upload,.tabs{display:none!important}.shell{margin:0}main{padding:0}.job-layout{display:block}.panel{break-inside:avoid}.print-only{display:block}.job-aside{display:none}body{background:white}}