@import url('./tokens.css');
*{box-sizing:border-box}body{margin:0;background:var(--navy);color:var(--ink);font:12px/1.4 'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a{color:inherit;text-decoration:none}.icon{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle}button:focus-visible,a:focus-visible{outline:2px solid #ffb52b;outline-offset:3px}input,select{outline-color:#0060ff}select{background:#fff;border:1px solid #d1dff4;border-radius:4px;padding:6px 9px;color:var(--ink);font-size:11px;max-width:100%}.top{height:78px;display:flex;align-items:center;gap:25px;padding:8px 24px;background:linear-gradient(90deg,#00162e 0%,#001b36ee 35%,#00162e00 60%,#00162ef5 94%),url('../images/theme/header-landscape.png') center 51%/cover;color:white}.brand{width:263px;flex:none;display:block}.brand img{width:247px;max-height:64px;display:block}.search{height:40px;width:408px;display:flex;align-items:center;gap:12px;border:1px solid #42668b99;border-radius:6px;padding:8px 14px;background:#2b629455;color:white}.search input{border:0;background:transparent;color:white;width:100%;min-width:0;font-size:12px}.search input::placeholder{color:#f0f5ff}.account{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12px}.account small{display:block;font-size:11px}.account>.icon{width:16px;margin-left:34px}.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0060ff}.avatar svg{width:30px;height:30px;fill:white;stroke:white}.notification{position:relative;border:0;background:transparent;color:white}.notification .icon{width:23px;height:23px}.notification b{position:absolute;right:0;top:-4px;font-size:9px;width:14px;height:14px;background:#ff2639;border-radius:50%}.account-rule{height:32px;border-left:1px solid #32617b;margin:0 8px}
aside{position:fixed;top:78px;left:0;bottom:0;width:218px;padding:10px 11px 18px;color:white;background:linear-gradient(180deg,#00172ff0 0%,#00172ff0 64%,#00172f00 80%),url('../images/theme/sidebar-aceh.png') center bottom/100% auto no-repeat,#00182f;overflow-y:auto;z-index:5}.sijantan-nav{padding:4px 0!important;gap:4px!important}.sijantan-nav a{height:40px;padding:8px 12px!important;gap:19px!important;font:13px/1.3 'Segoe UI',Arial,sans-serif!important;border-radius:5px!important;color:white!important}.sijantan-nav a .icon{width:24px;height:24px;stroke-width:1.6}.sijantan-nav a.active{background:linear-gradient(#0876ff,#0055f8)!important;box-shadow:0 3px 15px #0066ff66}.sidebar-message{font-size:16px;line-height:1.4;margin:128px 12px 20px;text-shadow:0 2px 5px #000}main{margin-left:218px;background:linear-gradient(135deg,#fafdff,#fff);border-radius:7px 0 0 0;min-height:calc(100vh - 78px);padding:11px 17px 12px 16px;box-shadow:0 0 16px #afc7e033}.crumb{height:18px;display:flex;align-items:center;gap:12px;color:#283574;font-size:11px}.crumb span{color:#90a2c1}.heading{height:59px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.heading h1{font-size:23px;line-height:1.2;letter-spacing:-.5px;margin:1px 0 3px;font-weight:750;white-space:nowrap}.heading p{font-size:13px;margin:0;color:#1b2e77}.heading>.actions{margin-top:-12px;align-self:flex-start;white-space:nowrap}.actions{display:flex;align-items:center;gap:8px}.modelpick{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600}.modelpick select{width:152px;font-weight:400}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 12px;background:#fff;border:1px solid #aac8ff;color:#005cff;border-radius:4px;font-size:11px}.btn .icon{width:15px;height:15px}.btn.primary{background:#0060ff;border-color:#0060ff;color:white}.badge{display:inline-block;font-size:11px;line-height:1.2;padding:4px 8px;border-radius:4px;background:#c4f0df;color:#008a59}.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 9px}.kpi{height:96px;border:1px solid var(--line);border-radius:7px;background:linear-gradient(120deg,#fff,#fbfdff);display:flex;align-items:flex-start;gap:16px;padding:12px 10px;min-width:0}.ico{width:58px;height:58px;border-radius:6px;background:#edf4ff;color:#0069ff;display:grid;place-items:center;flex:none}.ico .icon{height:34px;width:34px;stroke-width:2.5}.ico.green{background:#e4f8ef;color:#00b777}.ico.red{background:#fff0f1;color:#ff253c}.kpi label{display:block;color:#233778;font-size:11px;white-space:nowrap}.kpi strong{display:block;font-size:21px;font-weight:750;color:#003968;line-height:1.3;margin:2px 0}.kpi small{display:block;font-size:10px}.kpi small b{font-size:13px;color:#00b76d}.kpi small span{display:block;margin-left:22px;color:#233778}.kpi .model-name{font-size:14px;color:#07154b;margin:3px 0 5px}.model-dates{font-size:10px;margin:0;color:#34417d;line-height:1.7}
.workspace-grid{display:grid;grid-template-columns:216px minmax(0,1fr);gap:9px}.panel{min-width:0;border:1px solid var(--line);border-radius:6px;background:linear-gradient(120deg,#fff,#fcfdff);overflow:hidden}.panelhead{padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:5px}.panelhead h2,h2{font-size:12px;font-weight:750;margin:0;line-height:1.4}.body{padding:0 10px 10px}.input-panel{min-height:729px}.tabs{display:flex}.tab{border:0;color:#071753;background:#f1f5ff;padding:8px 10px;font-size:11px;white-space:nowrap}.tab.active{background:#0060ff;color:white}.input-tabs{margin-bottom:10px}.input-tabs .tab{flex:1;border-radius:5px;height:32px}.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px dashed #8bb3ff;border-radius:3px;height:121px;background:#f8fbff;cursor:pointer;font-size:10px;color:#334477;margin-bottom:9px}.drop .cloud{width:43px;height:43px;color:#0067ff;stroke-width:1.7;margin-bottom:5px}.drop strong{font-weight:600;color:#07154b;font-size:11px}.drop.dragging{background:#dfeaff;outline:2px solid #0060ff}.wide{width:100%;height:34px}.file-label{margin:4px 0;font-size:10px;color:#4a6391;overflow-wrap:anywhere}.file-label:empty{display:none}hr{border:0;border-top:1px solid #edf2fa;margin:12px 0 9px}.field{margin-top:10px}.field label{display:block;font-size:11px;color:#26366e;margin-bottom:4px}.field select,.field input:not([type=range]){width:100%;height:30px;border:1px solid #d1dff4;border-radius:4px;padding:6px 9px;background:white;color:#07154b;font-size:11px}.field output{display:block;font-size:11px;margin:10px 0 5px}.field input[type=range]{width:100%;accent-color:#0060ff;height:15px}.advanced{border:0;background:transparent;padding:9px 0;margin-top:13px}.advanced .icon{width:18px;height:18px}
.workspace-right{min-width:0}.top-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,29fr) minmax(0,24fr);gap:8px;align-items:start}.viewer-panel{overflow:hidden}.viewer-head{height:33px;padding:5px 10px;background:#001b38;color:#fff}.viewer-head h2{font-size:12px;white-space:nowrap}.viewer-head>span{font-size:10px;margin-left:auto}.viewer-head .actions{gap:7px;font-size:10px}.viewer-arrow{border:0;color:white;background:#ffffff0a;width:20px;height:22px;font-size:21px;line-height:1;border-radius:4px}.roadview{height:268px;position:relative;overflow:hidden;background:#1b2c32}.roadview>img,.roadview>video{width:100%;height:100%;object-fit:cover;display:block}.roadview>video[hidden]{display:none}.damage{position:absolute;border:1.5px solid;z-index:2;display:flex;pointer-events:none;border-radius:2px}.damage span{position:absolute;left:-1px;top:-18px;font-size:9px;font-weight:600;padding:1px 4px;border-radius:3px;white-space:nowrap;color:white}.damage svg{width:100%;height:100%}.pothole{left:33%;top:53%;width:38%;height:33%;border-color:#ff363f}.pothole span{background:#ff3039}.pothole svg path{fill:#ff474775;stroke:#ff6e6e;stroke-width:1}.crack{left:3%;bottom:7%;width:26%;height:22%;border-color:#00bd74}.crack span{background:#0ac178;color:#003b28}.crack svg path{fill:none;stroke:#12c779;stroke-width:1.5}.alligator{right:2%;bottom:13%;width:24%;height:27%;border-color:#ffd544}.alligator span{background:#ffcf47;color:#604100;font-size:8px}.alligator svg path{fill:#ffce3430;stroke:#fadd43;stroke-width:1.4}.viewtools{position:absolute;z-index:3;left:6px;top:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s}.roadview:hover .viewtools,.roadview:focus-within .viewtools{opacity:1}.viewtools button{border:1px solid #fff5;background:#001c38d9;color:white;font-size:9px;padding:4px 7px;border-radius:4px}.filmstrip{display:flex;gap:4px;align-items:center;padding:7px 5px;height:85px}.film-arrow{border:0;background:transparent;color:#172a7b;font-size:24px;padding:0 3px}.frames{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;flex:1;min-width:0}.frame{border:1px solid #e6edfa;background:#fff;border-radius:4px;padding:0;color:#273b7c;font-size:9px;overflow:hidden}.frame.active{border:1px solid #0060ff;color:#0060ff;box-shadow:0 0 0 1px #0060ff33}.frameimg{height:32px;background:url('../images/demo/road-scene.png') center 28%/cover}.frame small{font-size:9px;line-height:1.4;display:block;padding:3px 0}.inference-panel,.info-panel{height:348px}.results{display:grid;gap:11px;padding-top:5px}.result{display:grid;grid-template-columns:10px 60px 60px minmax(0,1fr);gap:4px;align-items:start;font-size:9px;min-height:93px}.result-number{font-size:9px;background:#f1f4ff;border-radius:3px;text-align:center}.crop{height:63px;border-radius:4px;background-image:url('../images/demo/road-scene.png');background-size:380%;background-position:52% 85%;position:relative;overflow:hidden}.crop.green{background-position:13% 85%}.crop.yellow{background-position:88% 82%}.crop.mask{background:#030403;display:grid;place-items:center}.crop.mask svg{width:80%;height:70%;fill:#fff}.crop.mask.green svg{fill:#51884d}.crop.mask.yellow svg{fill:#aa941f}.result h3{font-size:9px;margin:0 0 4px;line-height:1.4}.result p{font-size:9px;margin:2px 0;color:#263673;line-height:1.35}.confidence{padding:1px 7px;background:#ffd1d4;color:#9a2530;border-radius:3px;font-weight:700}.confidence.mid{background:#c9ebd4;color:#155e3e}.confidence.low{background:#ffe39b;color:#7c5105}.meta{display:grid;grid-template-columns:87px minmax(0,1fr);column-gap:8px;row-gap:5px;font-size:10px;margin:3px 0}.meta dt{color:#263577}.meta dd{margin:0;color:#34447b;overflow-wrap:anywhere}.meta .badge{font-size:9px;padding:2px 4px}.edit-info{border:0;background:transparent;color:#0060ff;padding:0;opacity:0}.info-panel:hover .edit-info,.edit-info:focus-visible{opacity:1}.edit-info .icon{width:12px;height:12px}
.lower-grid{display:grid;grid-template-columns:minmax(0,65fr) minmax(0,35fr);gap:9px;margin-top:8px;align-items:start}.table-panel{min-height:333px;border-top:0;overflow:visible}.result-tabs{height:32px;border-bottom:1px solid #e7effa;background:#fafdff}.result-tabs .tab{padding:8px 17px;border-radius:4px 4px 0 0;border-right:1px solid #e7effa;font-size:10px}.tabletools{display:flex;align-items:center;gap:10px;padding:5px 8px;border-bottom:1px solid #edf2fa;font-size:9px;color:#33417d}.tabletools>label{border:1px solid #e1eaf8;border-radius:4px;height:26px;display:flex;align-items:center;padding:4px 7px;gap:6px;flex:1;min-width:50px;max-width:308px}.tabletools .icon{width:14px;height:14px;color:#6783ba}.tabletools input{background:transparent;border:0;width:100%;min-width:0;font-size:9px;color:#1b2d72}.tabletools input::placeholder{color:#7c96c2}.tabletools>span{margin-left:auto;white-space:nowrap;font-size:9px}.tabletools select{font-size:10px;padding:3px 6px}.tablewrap{overflow-x:auto;padding:0 8px 12px}table{border-collapse:collapse;width:100%;font-size:9px;white-space:nowrap;color:#253672}th,td{padding:3px 4px;text-align:left;border-bottom:1px solid #edf3fb;line-height:1.4}th{font-size:9px;color:#06154b;background:#f8fbff;font-weight:700;padding-top:5px;padding-bottom:5px}tbody tr{cursor:pointer}tbody tr:hover{background:#edf5ff}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}.score{min-width:55px;display:inline-block;text-align:center;border-radius:4px;font-weight:600}.score.high{background:#ffc3c6;color:#af2931}.score.med{background:#cbefd9;color:#265c3c}.score.low{background:#ffe5ad;color:#a35c0d}.row-action{border:0;background:transparent;padding:0 4px;font-size:14px;color:#0060ff;line-height:1}.charts{margin-top:-39px;display:grid;gap:9px}.distribution .panelhead h2{font-size:11px;white-space:nowrap}.donutwrap{display:flex;align-items:center;gap:22px;padding:5px 14px 10px 20px}.donut{width:138px;height:138px;flex:none;border-radius:50%;background:conic-gradient(#ff626e 0 28.4%,#13bd80 28.4% 52.5%,#ffcd47 52.5% 71.1%,#9c52fb 71.1% 83.4%,#0061ff 83.4% 91.5%,#317bea 91.5% 96.7%,#c0c3d4 96.7%);display:grid;place-items:center;position:relative}.donut:before{content:'';position:absolute;inset:24px;border-radius:50%;background:#fff}.donut b{z-index:1;font-size:18px;text-align:center;color:#06154b}.donut b small{display:block;font-size:10px;font-weight:400}.legend{display:grid;gap:5px;flex:1;font-size:9px;min-width:0}.legend div{display:flex;align-items:center;gap:7px;white-space:nowrap}.legend i{width:9px;height:9px;border-radius:50%;flex:none}.legend b{margin-left:auto;font-weight:400}.trends{min-height:173px}.trends .panelhead{padding:8px 10px}.trends .panelhead h2{font-size:11px}.trends select{font-size:9px;padding:4px 7px}.trend-chart{height:99px;position:relative;padding:4px 15px 18px 50px}.axis-title{position:absolute;left:0;top:36px;font-size:8px;transform:rotate(-90deg)}.yaxis{position:absolute;left:29px;top:0;bottom:15px;display:flex;flex-direction:column;justify-content:space-between;font-size:8px;color:#30417b}.bars{height:100%;display:flex;align-items:flex-end;gap:14px;border-bottom:1px solid #cbdcf5;background:repeating-linear-gradient(to top,transparent 0 18px,#ebf1fb 19px 20px)}.bar{flex:1;position:relative;min-width:3px;background:linear-gradient(to top,#ff6474 0 17%,#78b9c0 17% 49%,#ffcf63 49% 78%,#db75af 78% 91%,#b745e4 91%);border-top:1px solid #cb43db}.bar small{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8px;color:#354178}.trend-legend{display:flex;gap:7px;flex-wrap:wrap;font-size:8px;padding:10px 10px 8px;color:#33417c}.demo-note{font-size:9px;text-align:right;color:#8a9ab8;margin:9px 0 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.toast{position:fixed;right:20px;bottom:20px;max-width:380px;background:#002545;color:white;padding:12px 16px;border-radius:6px;z-index:1500;font-size:12px;display:none;box-shadow:0 8px 30px #00182f33}.toast.show{display:block}.modalback{display:none;position:fixed;inset:0;background:#00182f99;z-index:1200;align-items:center;justify-content:center;padding:20px}.modalback.show{display:flex}.modal{background:white;border-radius:9px;padding:22px;width:470px;max-width:100%;max-height:90vh;overflow:auto}.modal h2{font-size:18px;margin-bottom:14px}.modalfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.hint{font-size:10px;color:#677da2}
.top .brand img{width:280px;max-height:none;height:70px;object-fit:contain}.sijantan-nav a{font-size:12px!important;gap:17px!important;white-space:nowrap!important}aside{padding-top:14px;background-size:auto,270px auto}.sidebar-message{margin-top:148px}.result h3,.result p{font-size:10px}.result{gap:5px}.meta{font-size:11px;row-gap:6px}.legend{font-size:10px}.tablewrap table{font-size:10px}th{font-size:9px}td{padding-top:2px;padding-bottom:2px}.viewer-head>span{font-size:11px}.yaxis span{display:block;line-height:1}.axis-title{left:-4px;top:34px;font-size:7px}.trend-chart{height:105px;padding-top:8px;padding-left:50px}.yaxis{left:28px;top:5px;bottom:17px}.field input[type=range]{appearance:none;background:linear-gradient(90deg,#0060ff 0 18%,#dce5f6 18%);border-radius:9px;height:5px;margin:8px 0}.field input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:white;border:1px solid #86acff}.field input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:white;border:1px solid #86acff}
@media(min-width:1650px){.roadview{height:320px}.inference-panel,.info-panel{height:400px}.input-panel{min-height:790px}.result{grid-template-columns:12px 70px 70px minmax(0,1fr)}.crop{height:72px}.result p{font-size:10px}.meta{font-size:11px}}
@media(max-width:1430px){.heading{height:84px;display:block}.heading>.actions{margin-top:8px}.kpi{gap:8px;padding:10px 8px}.ico{width:42px;height:50px}.kpi label{font-size:10px}.workspace-grid{grid-template-columns:195px minmax(0,1fr)}.top-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.info-panel{grid-column:1/-1;height:auto}.meta{grid-template-columns:80px 1fr 80px 1fr}.lower-grid{grid-template-columns:minmax(0,1fr)}.charts{margin-top:0;grid-template-columns:1fr 1fr}.table-panel{min-height:0}.inference-panel{height:388px}.input-panel{min-height:729px}.account>.icon{margin-left:0}}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.top-grid{grid-template-columns:1fr}.inference-panel{height:auto}.result{grid-template-columns:12px 60px 60px 1fr;min-height:65px}.results{grid-template-columns:1fr}.info-panel{grid-column:auto}.meta{grid-template-columns:85px 1fr}.charts{grid-template-columns:1fr}.account-rule,.notification{display:none}.search{max-width:340px;width:auto;flex:1}.brand{width:235px}.brand img{width:225px}.heading h1{white-space:normal;font-size:21px}.heading{height:auto;margin-bottom:12px}}
@media(max-width:850px){aside{display:none}main{margin-left:0;padding:12px;border-radius:0}.top{padding:8px 14px;gap:10px}.brand{width:218px}.brand img{width:210px}.account{gap:5px}.account>div,.account>.icon{display:none}.search{display:none}.workspace-grid{grid-template-columns:185px minmax(0,1fr)}.heading>.actions{flex-wrap:wrap;white-space:normal}.heading h1{font-size:21px}.heading p{font-size:12px}.modelpick{flex-wrap:wrap}.input-panel{min-height:0}.result-tabs .tab{padding:8px;font-size:9px}.tabletools>span{display:none}.kpi{height:90px}.kpi label{white-space:normal}.sidebar-message{display:none}.sijantan-mobile-menu{z-index:1100}.top-grid{gap:9px}main{padding-bottom:75px}}
@media(max-width:560px){.top .brand img{width:218px;height:auto}.workspace-grid{grid-template-columns:minmax(0,1fr)}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi:last-child{grid-column:1/-1}.input-panel .body{display:grid;grid-template-columns:1fr 1fr;gap:10px}.input-tabs,.drop,#uploadInfer,.input-panel hr,.input-panel .body>h2,.file-label,.advanced{grid-column:1/-1}.field{margin-top:0}.drop{margin-bottom:0}.input-panel hr{width:100%;margin:0}.input-panel .body>h2{margin-top:4px}.roadview{height:auto;aspect-ratio:1.8}.result{grid-template-columns:12px 60px 60px minmax(0,1fr)}.inference-panel{height:auto}.meta{grid-template-columns:87px minmax(0,1fr)}.result-tabs .tab{flex:1;font-size:9px;padding:9px 4px}.charts{margin-top:0}.tablewrap{max-width:100%}.donutwrap{justify-content:center;gap:17px}.legend{font-size:9px}.heading>.actions{gap:7px}.modelpick{width:100%}.kpi strong{font-size:19px}}