body{margin:0;font-family:Arial;background:#111;color:#fff}
header{padding:20px;background:#191919}
header h1{margin:0;font-size:28px}
header p{margin:6px 0 0;color:#aaa}
.tabs{display:flex;gap:10px;padding:10px;background:#222;overflow:auto;position:sticky;top:0}
button{background:#444;color:#fff;border:none;padding:14px 18px;border-radius:12px;font-weight:bold;white-space:nowrap}
button.active{background:#d32f2f}
.page{display:none;padding:15px}
.page.active{display:block}
.card{background:#1f1f1f;padding:18px;border-radius:20px;margin-bottom:16px}
h2{margin-top:0}
.hint{color:#aaa}
.order,.stock{background:#2a2a2a;padding:16px;border-radius:16px;margin-bottom:12px;display:flex;justify-content:space-between;gap:12px;align-items:center;border-left:8px solid #555}
.order h3,.stock h3{margin:0 0 8px}
.order p,.stock p{margin:4px 0;color:#ddd}
.urgent,.redline{border-left-color:#d32f2f}
.warnline{border-left-color:#b26a00}
.okline{border-left-color:#1b5e20}
.badge{padding:10px 14px;border-radius:12px;font-weight:bold}
.badge.red{background:#d32f2f}
.badge.green{background:#1b5e20}
.planqty{font-size:22px;font-weight:bold;background:#d32f2f;padding:14px;border-radius:14px;text-align:center;min-width:100px}
.planqty.ok{background:#1b5e20}
.job{background:#2a2a2a;padding:14px;border-radius:14px;margin-bottom:10px}
.flow{font-size:20px;line-height:1.8}
@media(max-width:700px){.order,.stock{flex-direction:column;align-items:flex-start}.planqty{width:100%}}