:root{font-family:Noto Sans Thai,Tahoma,Segoe UI,Arial,sans-serif;color:#142c3d;background:#f4f7fb;font-synthesis:none;text-rendering:optimizeLegibility;--navy:#102b3d;--blue:#143a51;--teal:#0d9a91;--teal-dark:#087b76;--line:#e1e8ee;--muted:#6b8192;--surface:#fff;--red:#d44f58;--green:#218f70;--orange:#bd7927;--shadow:0 6px 24px rgba(30,57,83,.042)}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}a{color:inherit}input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid #58b7af;outline-offset:2px}.app-shell{display:flex;min-height:100vh}.sidebar{width:260px;background:var(--navy);color:#ecf5f6;position:fixed;left:0;top:0;bottom:0;display:flex;flex-direction:column;z-index:12;box-shadow:4px 0 26px #0b203117}.brand{display:flex;gap:12px;align-items:center;padding:24px 22px 22px;border-bottom:1px solid #ffffff13}.school-logo{object-fit:contain;display:block;flex-shrink:0}.school-logo.login{width:92px;height:92px;margin:0 auto 12px;filter:drop-shadow(0 8px 18px rgba(34,61,98,.16))}.school-logo.sidebar{width:54px;height:54px;border-radius:14px;background:#ffffff10;padding:4px;box-shadow:inset 0 0 0 1px #ffffff0f}.school-logo.topbar{width:48px;height:48px;border-radius:14px;background:#f4f8fb;padding:4px;border:1px solid #e2ebf1}.brand-icon{background:#ffffff12;padding:10px;border-radius:15px;display:flex;color:#53e4cc}.brand strong{display:block;letter-spacing:1px;font-size:15px;font-weight:850}.brand span{font-size:9px;letter-spacing:1.55px;color:#92b0bc;white-space:nowrap}.sidebar-caption{color:#7296a4;text-transform:uppercase;font-size:11px;letter-spacing:1.6px;padding:28px 25px 10px}.sidebar nav{display:flex;flex-direction:column;gap:6px;padding:0 13px;overflow-y:auto}.nav-item{display:flex;gap:13px;align-items:center;position:relative;color:#a9c1cb;background:transparent;border:0;text-align:left;padding:14px 17px;border-radius:10px;width:100%;font-size:14px;font-weight:600;transition:.2s}.nav-item:hover{background:#ffffff12;color:#fff}.nav-item.active{background:#ffffff18;color:#fff}.nav-item.active svg{color:#55e3ca}.nav-indicator{position:absolute;right:0;width:3px;height:23px;border-radius:4px;background:#4cdbc2}.sidebar-footer{margin-top:auto;border-top:1px solid #ffffff15;padding:20px 16px}.sidebar-user{display:flex;align-items:center;gap:10px}.avatar,.top-avatar{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:#1da9a0;color:#fff;font-weight:800}.sidebar-user>div:nth-child(2){min-width:0}.sidebar-user b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:164px}.sidebar-user small{color:#83a5af;font-size:11px}.signout{background:transparent;border:0;color:#99b7c5;margin-top:18px;display:flex;gap:10px;padding:8px;align-items:center}.signout:hover{color:#fff}.content-shell{width:calc(100% - 260px);margin-left:260px;min-width:0}.topbar{height:83px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:12px 36px;gap:15px;position:sticky;top:0;z-index:8}.top-left,.header-right{display:flex;align-items:center;gap:17px}.header-text h1{font-size:18px;letter-spacing:-.2px;margin:0;color:var(--navy)}.header-text p{margin:5px 0 0;color:var(--muted);font-size:11px}.header-right{gap:8px}.top-avatar{width:37px;height:37px;font-size:14px}.mobile-menu{display:none!important}.demo-switch{display:flex;gap:7px;align-items:center;font-size:11px;background:#e8f8f5;padding:5px 8px;border-radius:9px;color:#087769}.demo-switch select{border:0;background:#fff;padding:5px;border-radius:6px;color:#155f5b}.main-content{padding:29px 36px;max-width:1530px;margin:0 auto}.section-title{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:23px}.section-title h2{font-size:25px;line-height:1.35;color:#132e42;margin:0;font-weight:800}.section-title p{margin:6px 0 0;font-size:13px;color:var(--muted)}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:23px;box-shadow:var(--shadow);margin-bottom:19px;min-width:0}.card-header{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-bottom:19px}.card-header h3{font-size:16px;margin:0;color:#1b3749;font-weight:770}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;min-height:40px;padding:9px 15px;font-size:13px;font-weight:750;white-space:nowrap;transition:.18s}.btn-primary{background:var(--teal);color:#fff;box-shadow:0 4px 10px #0d9a9120}.btn-primary:not(:disabled):hover{background:var(--teal-dark)}.btn-secondary{background:#edf5f7;border-color:#d7e6e9;color:#1a5862}.btn-secondary:hover{background:#dfebed}.btn-ghost{background:transparent;color:#4b6675}.btn-ghost:hover{background:#e9f0f3}.btn-danger{background:#d44f58;color:#fff}.btn.full{width:100%}.icon-btn{border:0;background:transparent;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;color:#557489;flex-shrink:0}.icon-btn:hover{background:#edf3f7}.icon-btn.danger{color:var(--red)}.pill{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:11px;font-weight:720;border-radius:40px;padding:5px 9px;background:#eff3f5;color:#68808e}.pill.green{background:#e3f7ef;color:#16734f}.pill.red{background:#ffecef;color:#b62d43}.pill.orange{background:#fff4e3;color:#a26a1e}.pill.neutral{background:#edf2f4;color:#627585}.icon-badge{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:13px;background:#dff7f4;color:#168f85;flex-shrink:0}.icon-badge.green{background:#e5f7ed;color:#27865f}.icon-badge.red{background:#ffeaed;color:#ca4756}.icon-badge.teal{background:#e4f7f4;color:#128e87}.muted{color:var(--muted)}.small{font-size:12px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 19px;box-shadow:var(--shadow);min-width:0}.stat.clickable:hover{border-color:#74c7bf;transform:translateY(-1px)}.clickable{cursor:pointer}.stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;color:#678093;font-size:12px}.stat .icon-badge{width:33px;height:33px;border-radius:10px}.stat .icon-badge svg{width:17px}.stat>strong{font-size:30px;font-weight:850;display:block;line-height:1.3;color:#193749;letter-spacing:-.5px}.stat>small{font-size:11px;color:#78919e}.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}.two-col>.card{height:fit-content;min-height:160px}.bars{display:grid;gap:17px}.bar-line{padding:2px 0}.bar-info{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:7px}.bar-info span{font-weight:630}.bar-info b{color:#42717c;font-size:11px}.bar-track{height:9px;background:#edf3f5;border-radius:10px;overflow:hidden}.bar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#16afa4,#59cfb0);min-width:4px}.chart{min-height:230px}.chart-legend{display:flex;justify-content:center;gap:18px;font-size:11px;color:#76909b;margin-bottom:14px}.dot{display:inline-block;width:8px;height:8px;border-radius:100%;margin-right:4px}.dot.green{background:#26ad87}.dot.red{background:#e7757b}.chart-bars{height:190px;display:flex;align-items:flex-end;justify-content:space-around;gap:6px;border-bottom:1px solid #edf2f4;padding:2px 4px 0}.chart-column{height:100%;display:flex;flex:1;min-width:13px;max-width:44px;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px}.chart-stack{width:75%;min-width:9px;display:flex;flex-direction:column;overflow:hidden;border-radius:5px 5px 0 0}.stack-red{background:#ee8287}.stack-green{background:#26ad87}.chart-column small{font-size:10px;color:#81929d;transform:translateY(15px)}.list-rows{display:flex;flex-direction:column;gap:0}.list-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:transparent;border:0;border-bottom:1px solid #edf1f4;text-align:left;padding:12px 2px;color:#203c4c;font-size:13px}.list-item:last-child{border-bottom:0}.list-item>div:first-child{min-width:0;flex:1}.list-item b{display:block;font-size:13px;overflow-wrap:anywhere}.list-item small{display:block;color:#8096a2;font-size:11px;margin-top:3px}.list-item>svg{color:#a1b0b9}.list-item:has(>svg):hover{color:var(--teal)}.small-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}.small-summary>div{background:#f2f7f8;border-radius:12px;padding:17px 6px}.small-summary b{display:block;font-size:27px;color:#1e5f65}.small-summary span{font-size:11px;color:#728b98}.toolbar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:17px}.toolbar>label:not(.field){display:flex;flex-direction:column;gap:6px;font-size:11px;color:#637e90;font-weight:700}.toolbar select,.toolbar input{padding:9px 12px;min-height:40px;background:#fff;border:1px solid #dce6ec;border-radius:9px;color:#213b4b;font-size:13px;min-width:140px}.toolbar .field{min-width:140px;flex:1}.field{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:12px;font-weight:700;color:#466171}.field>span{font-weight:720}.field input,.field select,.field textarea,.searchbox input,.flex-row select{font-size:14px;color:#203d4d;width:100%;min-height:42px;background:#fff;border:1px solid #dbe5eb;border-radius:9px;padding:10px 12px;outline-offset:2px}.field textarea{resize:vertical}.field small{color:#7c929c;font-size:11px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-bottom:19px}.field-span{grid-column:span 2}.form-stack{display:flex;flex-direction:column;gap:16px}.flex-row{display:flex;align-items:center;gap:8px}.flex-row select{min-width:0;flex:1}.plate-field{display:flex;flex-direction:column;gap:7px}.error-inline{color:#b83146;font-size:12px;margin:0}.searchbox{display:flex;align-items:center;gap:11px;border:1px solid #dbe6ea;padding:8px 11px;border-radius:12px;background:#fff}.searchbox>svg{color:#7d939e;flex-shrink:0}.searchbox input{min-width:0;flex:1;border:0;padding:5px 2px;outline:none}.filter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-top:20px}.result-toolbar{display:flex;justify-content:space-between;align-items:center;color:#647d8d;font-size:12px;margin-top:15px}.result-toolbar strong{color:var(--teal)}.vehicle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.vehicle-card{border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow);padding:18px;min-width:0}.vehicle-card-header{display:flex;align-items:center;gap:10px;border-bottom:1px solid #edf1f4;padding-bottom:14px}.vehicle-card-header>div:nth-child(2){flex:1;min-width:0}.vehicle-card-header strong{font-size:15px;display:block}.vehicle-card-header small{font-size:11px;color:#758f9b;display:block;margin-top:3px}.vehicle-card-body{display:flex;flex-direction:column;gap:11px;padding:17px 0}.vehicle-card-body>div{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px}.vehicle-card-body>div span{color:#76909c}.vehicle-card-body>div b{font-weight:710;text-align:right}.vehicle-actions{display:flex;justify-content:flex-end;gap:7px}.tab-group{display:flex;gap:6px;margin-bottom:17px;border-bottom:1px solid #dce7eb}.tab-group button{border:0;border-bottom:3px solid transparent;background:transparent;padding:11px 17px;font-size:13px;color:#67818d}.tab-group button.active{color:#118d82;border-bottom-color:#13a89a;font-weight:800}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:12px;text-align:left}th{background:#f3f7f8;color:#687f8a;font-size:11px;font-weight:800}th,td{border-bottom:1px solid #edf1f3;padding:12px 11px;vertical-align:middle}td small{display:block;color:#8094a0;font-size:10px;margin-top:2px}tr:hover td{background:#fcfefe}.inline-actions{display:flex;gap:3px}.empty{text-align:center;padding:40px 15px;color:#96a7af;display:flex;flex-direction:column;align-items:center;gap:9px}.empty strong{color:#587282;font-size:14px}.empty p{margin:0;color:#8ba0aa;font-size:12px}.inspect-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:19px}.pick-car{display:flex;align-items:center;text-align:left;gap:12px;background:#fff;border:1px solid #dce8ee;border-radius:12px;padding:13px 15px;width:100%}.pick-car:hover{border-color:#48b9ac}.pick-car>div:nth-child(2){flex:1;min-width:0}.pick-car b{font-size:13px;display:block}.pick-car small{font-size:11px;color:#748b98;display:block;margin-top:5px}.pick-car>svg{color:#8ba0aa}.right-action{display:flex;justify-content:flex-end;margin:12px 0}.detail-list{display:grid;gap:12px;margin-bottom:18px}.detail-list>div{display:flex;justify-content:space-between;gap:16px;font-size:13px}.detail-list>div span{color:#81919b}.detail-list>div b{text-align:right}.note{background:#e9f5f7;border-radius:10px;padding:12px 14px;display:flex;gap:10px;color:#336876;font-size:12px;font-weight:500;line-height:1.7;margin:12px 0}.note.warning{background:#fff5e3;color:#97691c}.note.info{background:#e9f5f7;color:#336876}.choice-block{display:flex;flex-direction:column;gap:9px}.choice-block>b{font-size:13px}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.choice{border:1px solid #dbe6e9;border-radius:10px;padding:14px 10px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;cursor:pointer;color:#65808c}.choice input{position:absolute;opacity:0;pointer-events:none}.choice.selected.green{border-color:#4ec09c;background:#effaf5;color:#137b55}.choice.selected.red{border-color:#ee9299;background:#fff1f2;color:#b93b4a}.choice.selected{font-weight:750}.text-btn{border:0;background:transparent;color:#178c85;font-size:12px}.status-button{border:1px solid #96c3b5;border-radius:50px;background:#e8f6ef;color:#267652;padding:7px 10px;font-size:11px}.status-button.inactive{background:#f2f4f5;color:#81919e;border-color:#d3dfe5}.footer{text-align:center;margin-top:36px;color:#90a3ad;font-size:11px;padding-bottom:15px}.modal-backdrop{position:fixed;inset:0;z-index:40;background:#092335a8;display:flex;align-items:center;justify-content:center;padding:15px}.modal{background:#fff;width:min(100%,570px);max-height:94vh;display:flex;flex-direction:column;border-radius:18px;box-shadow:0 25px 80px #08263866}.modal.wide{width:min(100%,780px)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:19px 24px;border-bottom:1px solid #e3edf0}.modal-head h2{font-size:18px;margin:0}.modal-body{overflow:auto;padding:22px 24px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #edf1f4;margin-top:18px;padding-top:19px}.toast{position:fixed;z-index:80;right:20px;bottom:20px;background:#173e42;color:#fff;border-radius:12px;box-shadow:0 15px 45px #0e293e40;padding:13px 18px;display:flex;align-items:center;gap:10px;font-size:13px}.toast svg{color:#65e5ad}.alert-error{background:#fff0f0;color:#b92d43;border:1px solid #f3b9c1;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:12px}.alert-error span{flex:1}.alert-error button{border:0;background:transparent;color:inherit}.demo-banner{border:1px solid #f8e0ae;background:#fff9e9;color:#87651b;border-radius:11px;padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.7;margin-bottom:20px}.demo-banner>div{flex:1}.demo-banner button{border:1px solid #e9cc8e;background:#fff7de;border-radius:8px;color:#7f611d;padding:7px 10px;font-size:11px}.login-screen,.loading-screen{min-height:100vh;background:linear-gradient(140deg,#0f283d,#176e70);display:grid;place-items:center;padding:20px}.login-card{background:#fff;padding:40px;border-radius:20px;width:min(100%,440px);box-shadow:0 20px 60px #00182735}.login-card h2{margin:25px 0 5px;font-size:20px}.login-card>p.muted{margin-top:3px;margin-bottom:22px;font-size:12px}.login-brand{text-align:center}.login-brand h1{font-size:22px;margin:0}.login-brand p{margin:6px 0 0;font-size:12px;color:var(--muted)}.login-help{text-align:center;color:#8ba2ad;font-size:11px;margin-top:20px}.loading-screen{color:#fff;display:flex;flex-direction:column}.loading-content{display:flex;align-items:center;gap:10px;color:#678995;padding:50px}.spin{animation:spin 1.1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.mobile-overlay{display:none}@media(max-width:1220px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.topbar{padding:12px 24px}.main-content{padding:25px 24px}.header-text p{max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media(max-width:920px){.sidebar{transform:translate(-100%);transition:transform .2s}.sidebar.open{transform:translate(0)}.mobile-overlay{display:block;position:fixed;inset:0;background:#031f3080;z-index:11}.content-shell{width:100%;margin-left:0}.mobile-menu{display:inline-grid!important}.topbar{height:72px}.main-content{padding:22px 20px}}@media(max-width:640px){.school-logo.login{width:78px;height:78px}.school-logo.sidebar{width:46px;height:46px}.school-logo.topbar{width:38px;height:38px;border-radius:11px}.main-content{padding:18px 12px}.topbar{padding:10px 12px;height:65px}.header-text h1{font-size:14px}.header-text p{font-size:9px;max-width:205px}.top-avatar{display:none}.header-right .btn{padding:7px}.demo-switch{gap:4px;padding:3px}.demo-switch span{display:none}.section-title{align-items:flex-start;flex-direction:column;gap:10px}.section-title h2{font-size:21px}.section-title p{font-size:12px}.stats-grid{gap:9px}.stat{padding:13px}.stat>strong{font-size:26px}.stat-top{font-size:11px}.two-col,.vehicle-grid,.inspect-picks{grid-template-columns:1fr;gap:10px}.card{padding:16px;margin-bottom:12px}.card-header h3{font-size:14px}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.toolbar{gap:8px}.toolbar select,.toolbar input{min-width:120px}.searchbox{flex-wrap:wrap}.searchbox input{width:calc(100% - 65px)}.form-grid{grid-template-columns:1fr}.field-span{grid-column:span 1}.flex-row{flex-wrap:wrap}.flex-row select{flex-basis:100%}.modal-body{padding:17px}.modal-head{padding:16px 18px}.vehicle-actions{justify-content:stretch}.vehicle-actions .btn{flex:1}.demo-banner{align-items:flex-start;flex-wrap:wrap}.demo-banner button{margin-left:auto}.chart-bars{height:165px}.card .table-wrap{margin:0 -3px}.login-card{padding:23px}.small-summary b{font-size:22px}}.student-entry-link{min-height:46px;border-radius:10px;display:flex;justify-content:center;align-items:center;gap:9px;background:#e4f7f0;color:#10634d;font-weight:800;text-decoration:none;padding:9px 12px;border:1px solid #b9ddd1;font-size:14px}.student-entry-link:hover{background:#d8f1e7}.student-page{min-height:100vh;background:linear-gradient(140deg,#102d42,#0e6b69);padding:20px 12px 40px;display:flex;justify-content:center;align-items:flex-start}.student-card{background:#fff;border-radius:20px;box-shadow:0 18px 60px #00182740;width:min(100%,720px);overflow:hidden}.student-heading{display:flex;align-items:center;gap:16px;padding:24px 26px;background:#f0f8fa;border-bottom:1px solid #dce9ed}.student-heading img{width:85px;height:85px;object-fit:contain;flex-shrink:0}.student-heading h1{font-size:21px;color:#12324a;margin:0 0 6px}.student-heading p{font-size:12px;color:#607c8d;margin:0 0 8px}.student-heading strong{font-size:16px;color:#0b7e73}.student-form{padding:25px;display:flex;flex-direction:column;gap:16px}.student-form h2{font-size:18px;color:#183b52;border-bottom:1px solid #e5ecef;padding-bottom:8px;margin:10px 0 0}.student-form label{color:#385464;font-size:13px;font-weight:750;display:flex;flex-direction:column;gap:7px}.student-form input:not([type=radio]),.student-form select{width:100%;height:46px;background:#fff;border:1px solid #cedde4;border-radius:10px;font-size:15px;padding:10px;color:#153748;min-width:0}.student-form input:focus,.student-form select:focus{outline:2px solid #6bc7ba}.student-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px}.student-note{display:flex;align-items:flex-start;gap:10px;background:#e7f4f7;color:#3b6674;border-radius:11px;padding:14px;line-height:1.75;font-size:12px}.student-note svg{flex-shrink:0;margin-top:2px}.student-helmet{border:1px solid #d9e5e8;border-radius:12px;display:flex;gap:18px;flex-wrap:wrap;padding:14px}.student-helmet legend{color:#385464;font-size:13px;font-weight:800;padding:0 6px}.student-helmet label{flex-direction:row;align-items:center;font-size:14px}.student-helmet input{width:18px;height:18px;accent-color:#119b8e}.student-submit{height:52px;border:0;background:#0d988d;color:#fff;font-weight:800;font-size:15px;border-radius:12px;display:flex;justify-content:center;align-items:center;gap:10px}.student-submit:disabled{opacity:.6}.student-privacy{color:#7b919b;font-size:12px;text-align:center;line-height:1.6;margin:0}.student-error{font-size:13px;background:#ffeff0;color:#ae3049;padding:12px;border-radius:10px;line-height:1.6;margin:0}.student-success{text-align:center;padding:58px 28px 70px}.student-success svg{color:#15966c}.student-success h2{font-size:26px;color:#155d48}.student-success p{font-size:14px;color:#667f89;line-height:1.8}@media(max-width:640px){.student-heading{padding:18px 15px;gap:12px}.student-heading img{height:64px;width:64px}.student-heading h1{font-size:18px}.student-heading strong{font-size:14px}.student-form{padding:18px 15px}.student-fields{grid-template-columns:1fr}.student-page{padding:10px 8px 25px}}