:root{--navy:#16243f;--sidebar:#1f3343;--teal:#0d9488;--teal-dark:#0a6e66;--teal-soft:#e6f6f4;--green:#1f9d57;--line:#e2e7ee;--muted:#586273;--ink:#1d2733;--bg:#eef1f5;--surface:#fff;--amber-soft:#fff6df;--red-soft:#fdecea}*{box-sizing:border-box}body,html{min-width:320px;min-height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:Sarabun,Noto Sans Thai,system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,select{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}.app-shell{display:flex;min-height:100vh}.sidebar{width:220px;flex:0 0 220px;display:flex;flex-direction:column;padding:18px 0 14px;background:var(--sidebar);color:#d3dde4}.brand{display:flex;align-items:center;gap:10px;padding:2px 18px 22px}.brand-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--teal);color:#fff;font-weight:700}.brand b,.brand span{display:block}.brand b{color:#fff;font-size:15px}.brand span{margin-top:2px;color:#91a3af;font-size:9.5px}.side-nav{display:grid;gap:3px}.nav-item{width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;padding:9px 18px;border:0;background:transparent;color:#c6d2da;text-align:left;font-size:12px}.nav-item:hover{color:#fff;background:rgba(255,255,255,.05)}.nav-item.active{color:#fff;background:rgba(13,148,136,.2);font-weight:700}.nav-item i{min-width:20px;display:grid;place-items:center;border-radius:999px;background:#e9816f;color:#2b1c1a;font-size:10px;font-style:normal}.sidebar-footer{margin-top:auto;padding:14px 18px 0;border-top:1px solid rgba(255,255,255,.1);color:#718591;font-size:9.5px;line-height:1.5}.main-shell{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 26px;border-bottom:1px solid var(--line);background:#fff}.eyebrow{display:block;color:var(--teal-dark);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.topbar h1{margin-top:2px;color:var(--navy);font-size:16px}.top-actions{display:flex;align-items:center;gap:9px}.ghost-button,.role-select{min-height:35px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#f6f8fb;color:var(--muted);font-size:11px}.role-select select{border:0;outline:0;background:transparent;color:var(--navy);font-weight:700}.role-badge{min-height:35px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid #c5e8e2;border-radius:8px;background:var(--teal-soft);color:var(--teal-dark);font-size:10px}.role-badge span{color:var(--muted)}.role-badge b{color:var(--navy)}.sign-out{padding:5px 0;border:0;background:transparent;color:var(--muted);font-size:10px}.ghost-button{border-color:#c5e8e2;background:var(--teal-soft);color:var(--teal-dark);font-weight:700}.avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font-size:10px;font-weight:700}.content{min-height:0;flex:1;padding:34px 34px 48px;overflow:auto}.driver-top,.page-heading,.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.page-heading{margin:0 auto 25px;max-width:1180px}.driver-top h2,.page-heading h2{margin-top:4px;color:var(--navy);font-size:25px;line-height:1.2}.driver-top p,.page-heading p{max-width:70ch;margin-top:7px;color:var(--muted);font-size:12px}.demo-badge,.live-badge,.status-ok,.status-review{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:700}.live-badge{background:#e7f6ee;color:#167241}.demo-badge{background:var(--amber-soft);color:#81570e}.status-ok{background:#e7f6ee;color:#167241}.status-review{background:var(--amber-soft);color:#81570e}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1180px;margin:0 auto 18px}.metric{padding:17px 18px;border:1px solid var(--line);border-radius:13px;background:#fff}.metric small,.metric span{display:block}.metric span{color:var(--muted);font-size:10.5px}.metric strong{display:block;margin-top:8px;color:var(--navy);font-size:23px}.metric small{margin-top:3px;color:#4d7f54;font-size:10px;font-weight:600}.metric.hero{border-color:var(--teal);background:var(--teal)}.metric.hero small,.metric.hero span,.metric.hero strong{color:#fff}.workspace-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:16px;max-width:1180px;margin:0 auto}.panel{min-width:0;padding:19px 20px;border:1px solid var(--line);border-radius:13px;background:#fff}.panel-head{align-items:center;margin-bottom:15px}.panel-head h3{margin-top:3px;color:var(--navy);font-size:14px}.text-button{padding:3px 0;border:0;background:transparent;color:var(--teal-dark);font-size:11px;font-weight:700}.driver-list{display:grid}.driver-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}.driver-initial{width:31px;height:31px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:var(--teal-soft);color:var(--teal-dark);font-size:10px;font-weight:700}.driver-row div:nth-child(2){min-width:0;flex:1}.driver-row b,.driver-row span{display:block}.driver-row b{color:var(--navy);font-size:11px}.driver-row span{margin-top:2px;color:var(--muted);font-size:10px}.driver-row small{flex:0 0 auto}.build-list{display:grid}.build-list>div{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--line)}.build-list b{color:var(--teal);font-size:11px}.build-list small,.build-list span{display:block}.build-list span{color:var(--navy);font-size:11.5px;font-weight:700}.build-list small{margin-top:2px;color:var(--muted);font-size:10px;font-weight:400}.foundation-note{display:flex;align-items:center;gap:10px;max-width:1180px;margin:16px auto 0;padding:13px 15px;border:1px solid #bee4de;border-radius:11px;background:var(--teal-soft)}.foundation-note>div{min-width:0;flex:1}.foundation-note b,.foundation-note p{display:block}.foundation-note b{color:var(--navy);font-size:11.5px}.foundation-note p{margin-top:2px;color:var(--muted);font-size:10px}.note-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--teal);color:#fff;font-weight:700}.driver-home{max-width:700px;margin:20px auto}.driver-top{align-items:center;margin-bottom:20px}.assignment{padding:19px;border-radius:14px;background:var(--sidebar);color:#fff}.assignment>div{display:flex;justify-content:space-between;gap:10px;color:#b7c7cf;font-size:10px}.assignment>div b{color:#7be1d5}.assignment h3{margin-top:25px;font-size:20px}.assignment h3 span{margin:0 10px;color:#80d7cd}.assignment p{margin-top:6px;color:#bed0d8;font-size:10.5px}.primary-button{min-height:39px;margin-top:17px;padding:8px 14px;border:1px solid var(--teal);border-radius:8px;background:var(--teal);color:#fff;font-size:11px;font-weight:700}.primary-button:hover{background:var(--teal-dark)}.driver-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.driver-actions button{min-height:47px;border:1px solid #cce9e5;border-radius:10px;background:#f5fdfb;color:var(--teal-dark);font-size:11px;font-weight:700}.empty-page{max-width:700px;margin:80px auto;padding:40px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:center}.empty-page h2{margin-top:8px;color:var(--navy);font-size:24px}.empty-page p{margin-top:8px;color:var(--muted);font-size:12px}.empty-page .primary-button{margin-top:20px}.toast{position:fixed;right:24px;bottom:24px;z-index:5;padding:12px 15px;border:0;border-radius:9px;background:#183e35;color:#fff;box-shadow:0 5px 12px rgba(16,50,42,.22);font-size:11px}.login-page{min-height:100vh;display:grid;place-items:center;padding:28px 18px;background:var(--bg)}.login-card{width:min(430px,100%);padding:30px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 16px 36px rgba(20,39,58,.1)}.login-brand{display:flex;align-items:center;gap:10px;padding-bottom:26px;border-bottom:1px solid var(--line)}.login-brand b,.login-brand span{display:block}.login-brand b{color:var(--navy);font-size:15px}.login-brand span{margin-top:2px;color:var(--muted);font-size:9.5px}.login-heading{margin-top:25px}.login-heading h1{margin-top:5px;color:var(--navy);font-size:26px}.login-heading p{margin-top:5px;color:var(--muted);font-size:11px}.login-form{display:grid;gap:13px;margin-top:22px}.login-form label{display:grid;gap:5px;color:var(--ink);font-size:11px;font-weight:700}.login-form input{min-height:42px;padding:8px 11px;border:1px solid #ccd5df;border-radius:8px;outline:0;color:var(--ink);font-size:12px}.login-form input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.12)}.login-submit{width:100%;margin-top:2px}.login-error{padding:9px 10px;border-radius:8px;background:var(--red-soft);color:#922f27;font-size:10.5px}.demo-accounts{margin-top:24px;padding-top:17px;border-top:1px solid var(--line)}.demo-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.demo-head span{color:var(--navy);font-size:11px;font-weight:700}.demo-head small{color:var(--muted);font-size:9.5px}.demo-accounts>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;padding:8px 9px;border:1px solid var(--line);border-radius:7px;background:#f8fafc;color:var(--muted);font-size:10px;text-align:left}.demo-accounts>button:hover{border-color:#b7ddd8;background:var(--teal-soft)}.demo-accounts>button b{color:var(--navy);font-weight:600}.demo-accounts p{margin-top:11px;color:var(--muted);font-size:9.5px}.demo-accounts code{color:var(--teal-dark);font-family:ui-monospace,monospace}.login-footer{margin-top:16px;color:var(--muted);font-size:9.5px;text-align:center}@media (max-width:900px){.sidebar{width:190px;flex-basis:190px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-grid{grid-template-columns:1fr}.content{padding:25px 20px 40px}}@media (max-width:640px){.app-shell{display:block}.sidebar{width:100%;min-height:auto;padding:12px 14px}.brand{padding:0 4px 10px}.side-nav{grid-template-columns:repeat(2,1fr)}.nav-item{min-height:34px;padding:6px 8px;border-radius:7px;font-size:10px}.sidebar-footer{display:none}.topbar{padding:10px 14px}.ghost-button,.topbar .eyebrow{display:none}.topbar h1{font-size:14px}.top-actions{gap:5px}.role-select{padding:0 6px}.role-select>span{display:none}.content{padding:22px 14px 30px}.page-heading{display:block}.driver-top h2,.page-heading h2{font-size:22px}.page-heading>span{margin-top:12px}.metric-grid{grid-template-columns:1fr 1fr;gap:9px}.metric{padding:13px 12px}.metric strong{font-size:18px}.metric small{font-size:9px}.driver-actions{grid-template-columns:1fr}.foundation-note{align-items:flex-start}.foundation-note .text-button{display:none}}