
:root{--yellow:#ffcc00;--red:#d40511;--black:#171717;--bg:#f3f4f6;--green:#198754;--orange:#e69a00;--blue:#3478f6}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--black)}
button,input,select,textarea{font:inherit}button{cursor:pointer}
.topbar{height:58px;background:var(--yellow);display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:10;border-bottom:2px solid #111}
.brand{font-weight:900;display:flex;gap:10px;align-items:center}.brand-mark{font-style:italic;font-size:23px;color:var(--red);font-weight:1000}
.container{max-width:850px;margin:auto;padding:18px 16px 95px}.crumb,.eyebrow,.muted{color:#666}.crumb{font-size:13px;margin-bottom:12px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em}
h1{margin:5px 0;font-size:30px}h2{font-size:25px;margin:8px 0 18px}p{line-height:1.4}.hero-card,.card{background:#fff;border:1px solid #ddd;border-radius:16px;padding:18px;box-shadow:0 3px 14px #00000010}
.hero-card{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.hero-card p{margin:5px 0;font-size:14px}
.status{padding:9px 12px;border-radius:999px;font-weight:800;white-space:nowrap}.available{background:#d9f7e4;color:#14733f}.warning{background:#fff0c2;color:#855900}.danger{background:#ffd9dc;color:#9e0711}
.vehicle-illustration{background:#fff;border-radius:16px;border:1px solid #ddd;min-height:260px;margin:16px 0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vehicle-illustration.compact{min-height:220px;margin:0}.forklift{position:relative;width:300px;height:190px}.body{position:absolute;left:72px;top:100px;width:165px;height:55px;background:#f47c20;border-radius:18px 12px 8px 8px;border:4px solid #222}.counterweight{position:absolute;left:187px;top:112px;color:#111;font-weight:900;background:#ffcc00;padding:3px 5px;border-radius:3px}.mast{position:absolute;left:45px;top:35px;width:18px;height:120px;background:#333;border-radius:3px}.forks{position:absolute;left:0;top:142px;width:85px;height:8px;background:#333;box-shadow:0 13px 0 #333}.roof{position:absolute;left:100px;top:35px;width:125px;height:10px;background:#222}.roof:before,.roof:after{content:"";position:absolute;width:8px;height:70px;background:#222;top:0}.roof:before{left:8px}.roof:after{right:8px}.seat{position:absolute;left:155px;top:73px;width:35px;height:12px;background:#222;border-radius:8px}.wheel{position:absolute;width:42px;height:42px;border-radius:50%;background:#151515;border:7px solid #777;bottom:15px}.w1{left:86px}.w2{right:32px}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.primary,.secondary,.ghost,.back,.filter{border-radius:12px;padding:13px 16px;font-weight:800;border:2px solid transparent}.primary{background:var(--red);color:#fff}.secondary{background:#fff;border-color:#bbb}.ghost{background:transparent;border-color:#111;padding:7px 10px}.big{min-height:55px;font-size:16px}.hidden{display:none!important}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #ccc;display:flex;z-index:20}.bottom-nav button{flex:1;padding:14px;border:0;background:#fff;font-weight:800}.bottom-nav button:last-child{background:var(--yellow)}
.back{border:0;background:transparent;padding-left:0;font-size:16px}.zone-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:15px}.zones{display:grid;grid-template-columns:1fr 1fr;gap:8px}.zone{border:1px solid #ccc;background:#fff;border-radius:10px;padding:12px;font-weight:700;text-align:center}.zone.selected{outline:3px solid var(--yellow);border-color:#111}
form.card{display:grid;gap:16px}label{font-weight:700;display:grid;gap:7px}input,select,textarea{border:1px solid #bbb;border-radius:10px;padding:12px;background:#fff;width:100%}fieldset{border:0;padding:0;margin:0}.severity{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.severity label{display:block}.severity input{display:none}.sev{display:block;padding:14px 8px;text-align:center;border-radius:10px;border:2px solid transparent;background:#eee}.severity input:checked+.green{border-color:var(--green);background:#d9f7e4}.severity input:checked+.orange{border-color:var(--orange);background:#fff0c2}.severity input:checked+.red{border-color:var(--red);background:#ffd9dc}
.ticket{background:#fff;border:1px solid #ddd;border-left:7px solid var(--red);border-radius:12px;margin:10px 0;padding:14px}.ticket.resolved{border-left-color:var(--green)}.ticket.inprogress{border-left-color:var(--blue)}.ticket-head{display:flex;justify-content:space-between;gap:12px}.pill{padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;background:#eee}.pill.red{background:#ffd9dc;color:#9e0711}.pill.orange{background:#fff0c2;color:#855900}.pill.green{background:#d9f7e4;color:#14733f}.ticket-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.ticket-actions button{padding:8px 10px;border-radius:8px;border:1px solid #aaa;background:#fff;font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:15px 0}.kpi{background:#fff;border:1px solid #ddd;border-radius:12px;padding:13px}.kpi strong{display:block;font-size:26px}.filters{display:flex;gap:7px;overflow:auto;margin-bottom:10px}.filter{background:#fff;border-color:#ccc;white-space:nowrap}.filter.active{background:var(--yellow);border-color:#111}
@media(max-width:650px){.hero-card{display:block}.status{display:inline-block;margin-top:10px}.action-grid{grid-template-columns:1fr}.zone-layout{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}.vehicle-illustration{min-height:220px}.severity{grid-template-columns:1fr}.brand span:last-child{display:none}}
