@charset "UTF-8";
:root{--ink:#172830;--muted:#738087;--line:#e3e9e7;--paper:#f5f7f5;--teal:#18786b;--nav:#14242e;--orange:#d27f32}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,system-ui,sans-serif;font-size:14px;line-height:1.65}button,input{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #6bc8b4;outline-offset:3px}button{border:0}h1,h2,h3,p{margin:0}h1{font-size:clamp(27px,2.7vw,39px);line-height:1.4;letter-spacing:-1.2px;font-weight:700}h2{font-size:22px;letter-spacing:-.5px}h3{font-size:22px;line-height:1.4;letter-spacing:-.5px}.sidebar{width:226px;position:fixed;inset:0 auto 0 0;background:var(--nav);color:#dde6e8;display:flex;flex-direction:column;padding:34px 22px}.brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:750;letter-spacing:1.9px;line-height:1.2}.brand small{display:block;font-size:9px;letter-spacing:2.6px;font-weight:500;color:#819ba7;margin-top:8px}.brand-icon{font-size:35px;font-weight:600;position:relative;border:1px solid #40535c;border-radius:12px;min-width:46px;height:48px;text-align:center;line-height:47px}.brand-icon span{position:absolute;right:-3px;top:-9px;font-size:25px;color:#e8ac66}.nav-label{font-size:10px;color:#6f8a96;letter-spacing:1.8px;margin:55px 12px 17px}.nav-item{display:flex;width:100%;background:transparent;color:#a3b6bf;align-items:center;gap:12px;padding:12px;margin-bottom:8px;border-radius:7px;font-size:13px;text-align:left;white-space:nowrap}.nav-item>span{font-size:21px;width:22px;line-height:1}.nav-item.active{background:#25413f;color:#bfe1d1}.nav-item:hover{background:#243943;color:#fff}.nav-item i{font-style:normal;font-size:10px;margin-left:auto;background:#355650;padding:1px 6px;border-radius:4px;color:#b1d5c2}.sidebar-bottom{margin-top:auto;padding:25px 10px 0;border-top:1px solid #2b3b45}.mini-mark{font-size:9px;letter-spacing:1.8px;color:#74968c}.sidebar-bottom p{font-size:12px;color:#93a7af;line-height:1.9;margin:12px 0 23px}.sidebar-site{font-size:11px;color:#b2c4c9;display:flex;align-items:center;gap:8px}.dot{width:6px;height:6px;border-radius:50%;background:#80bda5;display:inline-block;flex-shrink:0}.workspace{margin-left:226px}.topbar{height:82px;padding:0 44px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:#fbfcfa}.crumb{font-size:12px;color:#8b979d}.crumb span{margin:0 13px;color:#b7c1c5}.crumb strong{font-weight:500;color:#4b606a}.top-actions{display:flex;align-items:center;gap:24px}.public-pill{display:flex;align-items:center;gap:7px;font-size:11px;color:#6d8183}.public-pill .dot{background:#238370}main{max-width:1500px;padding:41px 44px 20px;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:9px;letter-spacing:2px;color:#6c8980;font-weight:700;display:flex;gap:8px;align-items:center;margin-bottom:11px}.eyebrow>span{width:16px;height:1px;background:#69a491}.intro p{color:var(--muted);margin-top:10px;font-size:13px}.intro-badge{display:flex;align-items:center;gap:13px;padding-left:24px;border-left:1px solid #dae3de}.intro-badge strong{display:block;font-size:14px}.intro-badge small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.shield{font-size:28px;width:50px;height:50px;display:grid;place-items:center;background:#eaf1e9;color:#4b785d;border:1px solid #d9e5d5;border-radius:50%}.mobile-break{display:none}.overview{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:30px 0 37px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:20px 0}.overview>div{display:flex;align-items:center;gap:15px;padding:0 23px}.overview>div+div{border-left:1px solid var(--line)}.metric-icon{height:43px;width:43px;display:grid;place-items:center;border-radius:9px;font-size:23px;flex-shrink:0}.teal{color:#397b72;background:#eaf4f0}.orange{color:#b67b37;background:#fcf1e2}.green{color:#6b864e;background:#f0f4e8}.overview strong{font-size:21px;font-family:system-ui,sans-serif;line-height:1.2}.overview strong small{font-family:"Leelawadee UI",Tahoma,sans-serif;font-size:11px;font-weight:400;color:#587078;margin-left:4px}.overview p{font-size:10px;color:#99a3a4;margin-top:6px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-heading p{color:var(--muted);font-size:12px;margin-top:4px}.count{color:#728781;background:#e7eeea;font-family:system-ui;font-size:11px;padding:3px 7px;vertical-align:middle;margin-left:9px;border-radius:4px}.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;padding:8px 13px;border-radius:6px;color:#8c9ca1}.search>span{font-size:24px;line-height:1}.search input{width:190px;outline:none;border:0;font-size:11px;background:transparent;color:var(--ink)}.filters{display:flex;gap:6px;margin:22px 0}.filter{background:transparent;border:1px solid transparent;color:#7d8d92;border-radius:6px;padding:7px 14px;font-size:11px}.filter.active{background:#e5eeea;border-color:#d7e5dc;color:#326351;font-weight:600}.filter span{font-size:9px;border-radius:3px;background:#d2e1d9;padding:1px 5px;margin-left:5px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}.lab-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:25px 25px 0;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s;min-width:0}.lab-card:hover{border-color:#bccdc6;box-shadow:0 4px 18px #173c2510}.juice-card{grid-column:1/-1}.card-top{display:flex;align-items:center;gap:11px;margin-bottom:16px;flex-wrap:wrap}.app-logo{width:47px;height:47px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.app-logo svg{width:37px;height:37px}.juice-logo{color:#ca823a;background:#fff1de;border:1px solid #f3dabb}.dvwa-logo{color:#7b6a9b;background:#f0edf7;border:1px solid #e6dfef;font:700 17px monospace}.goat-logo{background:#edf4f1;border:1px solid #dbe7e1;color:#557c68}.wolf-logo{background:#edf1f7;color:#657890;border:1px solid #dfe6ef;font:700 24px system-ui;position:relative}.wolf-logo span{font-size:12px;position:absolute;right:4px;top:3px}.badge{font-family:system-ui,sans-serif;font-size:8px;letter-spacing:1.1px;padding:4px 8px;border-radius:4px;font-weight:650}.purple{background:#f1edf7;color:#87719c}.status{margin-left:auto;font-size:10px;font-weight:400;color:#8c9b9a;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.status:before{content:"";width:6px;height:6px;border-radius:50%;background:#aab4b1}.status.ready{color:#50826c}.status.ready:before{background:#71a28c}.status.starting{color:#b3883f}.status.starting:before{background:#c99d46}.status.error{color:#bf6f60}.status.error:before{background:#c67463}.status.stopped{color:#88908e}.card-description{font-size:12px;color:#7c898e;line-height:1.95;margin:9px 0 13px;max-width:800px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:21px}.tags span{font:10px system-ui,sans-serif;background:#f5f7f6;color:#7a8a8c;border:1px solid #e9eeeb;padding:4px 8px;border-radius:4px}.slot-area{background:#fbfaf7;border:1px solid #eee7dc;padding:16px 18px;border-radius:7px;margin-bottom:22px}.slot-heading{display:flex;justify-content:space-between;font-size:11px;gap:12px;margin-bottom:13px}.slot-heading strong{font-weight:500;color:#786b5b}.slot-heading>span{color:#a59c8e;font-size:10px}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.slot{border:1px solid #e5e4df;background:#fff;padding:10px 14px;border-radius:6px;display:flex;align-items:center;gap:10px;text-align:left;color:#7c878a;font-size:11px}.slot .slot-num{border:1px solid #e3e7e5;width:27px;height:27px;display:grid;place-items:center;border-radius:5px;font-family:system-ui;font-size:10px}.slot.selected{border-color:#c79155;box-shadow:0 0 0 1px #eddbbf;background:#fffcf6;color:#a67036}.slot.selected .slot-num{color:#fff;background:#bd8c53;border-color:#bd8c53}.slot .dot{margin-left:auto;width:5px;height:5px;background:#a6afac}.slot .dot.ready{background:#6d9f88}.slot .dot.starting{background:#d3a550}.card-footer{border-top:1px solid #edf0ee;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:auto}.card-hint{font-size:10px;color:#97a29f}.button{display:inline-flex;align-items:center;justify-content:center;gap:13px;border-radius:6px;padding:10px 16px;font-size:11px;font-weight:500;white-space:nowrap;border:1px solid transparent;transition:background .15s}.button.primary{background:#1b4e42;color:#fff;border-color:#1b4e42}.button.primary:hover{background:#2e695a}.button.secondary{background:#fff;border-color:#dce5df;color:#416354}.button.secondary:hover{background:#f0f5f1}.button.subtle{color:#687e82;border-color:#dce4e0;background:#fff}.button.small{padding:7px 11px;font-size:10px}.button.full{width:100%}.button.danger{color:#ad5e52;border-color:#ecd9d6;background:#fff8f6}.button[aria-disabled=true]{opacity:.5;pointer-events:none}.detail-block{background:#f8faf9;border:1px solid #eef1ef;border-radius:6px;padding:13px 15px;margin-top:3px;margin-bottom:20px;min-height:105px;display:flex;flex-direction:column;justify-content:center;gap:5px}.detail-label{font-size:10px;color:#80908a}.detail-block strong{font-size:12px;font-weight:500;color:#597367}.detail-block small{font-size:10px;color:#9ba7a2}.credentials{display:flex;gap:13px;align-items:center;color:#b4bdb9}.credentials code{font:11px monospace;color:#627c70;background:#edf2ef;border:1px solid #e0e9e3;border-radius:4px;padding:2px 8px}.wolf-card{grid-column:1/-1;flex-direction:row;padding:23px 25px;justify-content:space-between;align-items:center;gap:24px}.wolf-main{display:flex;align-items:center;gap:18px}.wolf-heading{display:flex;align-items:center;gap:20px}.wolf-heading h3{font-size:18px}.wolf-main p{font-size:11px;color:#839198;margin-top:5px}.wolf-action{display:flex;align-items:center;gap:20px}.wolf-action>span{font-size:10px;color:#96a19f;white-space:nowrap}.bottom-note{display:flex;align-items:center;gap:10px;font-size:10px;color:#8a9996;margin-top:27px;padding:14px 0}.bottom-note>span{font-size:16px}.bottom-note a{margin-left:auto;white-space:nowrap;color:#6b8779}.bottom-note a span{margin-left:8px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:19px;font-size:9px;color:#9ba8a3;letter-spacing:.6px}footer b{font-weight:400;font-size:8px;margin-left:8px;color:#b5beb8}.notice{padding:12px 17px;border-radius:7px;background:#fff1dd;border:1px solid #f1dcb4;color:#966b35;margin-bottom:20px;font-size:12px}.empty{text-align:center;padding:50px;color:#7c8d85}dialog{width:440px;max-width:calc(100vw - 36px);border:1px solid #e4ebe5;border-radius:14px;padding:27px;color:var(--ink);box-shadow:0 24px 90px #071c2850}dialog::backdrop{background:#132b3b99;backdrop-filter:blur(4px)}dialog h2{font-size:23px;margin:5px 0 8px}dialog p{color:#7d8b8b;font-size:12px;margin-bottom:20px}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head .eyebrow{margin:0}.close{font-size:25px;color:#9ba6a1;line-height:1;background:transparent;padding:5px}dialog label{display:flex;flex-direction:column;gap:7px;margin:15px 0;font-size:11px;color:#6b7e75}dialog input{background:#f8faf8;border:1px solid #dbe5de;border-radius:6px;padding:11px 12px;min-width:0;color:var(--ink);width:100%}.form-error{color:#b96650!important;min-height:16px;font-size:11px!important}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:23px}.guide-dialog{width:570px}.steps{padding-left:24px;margin:25px 0}.steps li{padding-left:6px;margin-bottom:17px;color:#5a8070}.steps p{margin:5px 0 0;font-size:12px;line-height:1.9}.guide-note{background:#f5f7ee;padding:14px 17px;color:#88926f;border:1px solid #e4e9d7;border-radius:6px;font-size:11px;margin-bottom:24px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:14px 22px;background:#153d33;color:#fff;border-radius:8px;box-shadow:0 6px 30px #0003;z-index:10;font-size:12px;max-width:90vw}#admin-panel{margin-top:42px;padding-top:31px;border-top:1px solid var(--line)}.server-metrics{display:flex;gap:10px;margin:22px 0;flex-wrap:wrap}.server-metrics>div{border:1px solid var(--line);background:#fff;padding:12px 18px;border-radius:6px;min-width:160px;font-size:11px;color:#778a80}.server-metrics strong{display:block;color:#38594a;font-size:16px}.admin-table-wrap{border:1px solid var(--line);background:#fff;border-radius:8px;overflow:auto}.admin-table{width:100%;border-collapse:collapse;white-space:nowrap}.admin-table th,.admin-table td{padding:13px 18px;text-align:left;border-bottom:1px solid #edf1ed;font-size:12px}.admin-table th{font-weight:400;color:#84958b;font-size:10px;background:#fafcf9}.admin-table tr:last-child td{border:0}.admin-table .button{margin-right:5px}.admin-table .status{margin:0}.history{margin-top:25px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px}.history h3{font-size:15px;margin-bottom:12px}.job{display:flex;gap:15px;align-items:center;padding:9px 0;border-top:1px solid #edf0ed;font-size:10px;color:#7c8b83;flex-wrap:wrap}.job b{font-size:11px;font-weight:500;color:#4d6b5c}.job time{margin-left:auto}.job span.failed{color:#b36151}.job span.done{color:#4c896d}
@media(min-width:1500px){main{padding-top:48px}.cards{gap:24px}.lab-card{padding:29px 30px 0}.wolf-card{padding:26px 30px}.juice-card .card-description{max-width:900px}}
@media(max-width:1190px){.sidebar{width:198px;padding:30px 16px}.workspace{margin-left:198px}.brand{font-size:14px;gap:9px}.brand-icon{min-width:40px;height:44px;line-height:41px}.topbar{padding:0 28px}main{padding:31px 28px 20px}.intro-badge{display:none}.overview>div{padding:0 15px;gap:10px}.metric-icon{width:35px;height:35px}.overview strong small{font-size:10px}.overview p{font-size:9px}.wolf-action>span{display:none}.card-top{gap:8px}.badge{font-size:7px}.status{font-size:9px}.lab-card{padding-left:20px;padding-right:20px}.slot{padding:9px}.slot-heading>span{font-size:9px}.card-hint{font-size:9px}.button{padding:9px 12px}}
@media(max-width:900px){.sidebar{width:74px;align-items:center;padding:24px 10px}.brand>span:last-child,.nav-label,.sidebar-bottom{display:none}.nav-item{font-size:0;padding:12px;gap:0;justify-content:center}.nav-item>span{font-size:23px}.nav-item i{display:none}nav{margin-top:40px}.workspace{margin-left:74px}.intro p{font-size:12px}.public-pill{display:none}.topbar{height:67px}.overview{grid-template-columns:1fr 1fr 1fr;padding:15px 0}.overview>div{padding:0 12px}.metric-icon{display:none}.overview strong{font-size:18px}.search input{width:160px}.slot{gap:6px;font-size:10px}.slot .slot-num{width:22px;height:22px}.badge{display:none}.cards{gap:15px}.card-footer{flex-wrap:wrap}.card-footer .card-hint{display:none}}
@media(max-width:620px){.sidebar{display:none}.workspace{margin:0}.topbar{padding:0 20px;height:61px}.crumb{font-size:10px}.crumb span{margin:0 8px}.top-actions{gap:0}.button.small{padding:7px 9px;font-size:9px}main{padding:25px 19px 18px}h1{font-size:29px;letter-spacing:-.8px}.mobile-break{display:block}.eyebrow{font-size:8px}.intro p{font-size:11px;line-height:1.9;margin-top:8px}.overview{margin:22px 0 28px;padding:15px 0}.overview>div{padding:0 11px}.overview strong{font-size:20px}.overview strong small{display:block;margin:4px 0 0;font-size:9px;line-height:1.5}.overview p{display:none}.section-heading{flex-direction:column;align-items:stretch;gap:15px}.section-heading h2{font-size:20px}.section-heading p{font-size:11px}.search{width:100%}.search input{width:100%;font-size:12px}.filters{gap:1px;margin:17px 0}.filter{padding:7px 10px;font-size:10px}.cards{grid-template-columns:1fr;gap:15px}.lab-card{grid-column:auto;padding:20px 20px 0}.card-top{margin-bottom:13px}.badge{display:inline;font-size:7px}.status{font-size:9px}.app-logo{width:42px;height:42px}.lab-card h3{font-size:21px}.card-description{font-size:11px}.tags{gap:5px;margin-bottom:17px}.tags span{font-size:9px;padding:4px 6px}.slot-area{padding:13px;margin-bottom:17px}.slot-heading{display:block}.slot-heading>span{display:block;margin-top:3px}.slots{grid-template-columns:1fr 1fr;gap:8px}.slot{padding:9px 8px;font-size:10px}.card-footer{padding:14px 0;justify-content:flex-end}.card-footer .card-hint{display:block;margin-right:auto}.juice-card .card-hint{display:none}.wolf-card{padding:20px;display:block}.wolf-main{gap:12px;align-items:flex-start}.wolf-heading h3{font-size:19px}.wolf-main p{font-size:11px;line-height:1.8}.wolf-action{margin-top:18px;justify-content:flex-end}.wolf-action>span{display:block;margin-right:auto;font-size:9px}.bottom-note{align-items:flex-start;font-size:9px}.bottom-note a{display:none}footer{gap:10px;font-size:8px;line-height:1.8}footer b{display:none}footer>span:last-child{text-align:right}dialog{padding:23px}dialog h2{font-size:21px}.server-metrics{display:grid;grid-template-columns:1fr 1fr}.server-metrics>div{min-width:0;padding:10px;font-size:10px}.server-metrics strong{font-size:14px}.job{gap:8px}.job time{margin:0;width:100%}}