:root {
  --o: #F26B1D; --o-d: #D9560B; --o-dd: #A8430A; --o-l: #FFF1E8; --o-ll: #FFF8F3; --o-b: #FFD9C2;
  --ink: #1F2328; --ink2: #4B5563; --mut: #8A8F98; --line: #ECE7E3; --bg: #FAF8F6;
  --ok: #15803D; --ok-l: #E8F6EC; --red: #B91C1C; --red-l: #FDECEC; --warn: #A16207; --warn-l: #FFF6DB;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ink); font-size: 14px; line-height: 1.45; }
a { color: var(--o-d); text-decoration: none; }
a:hover { text-decoration: underline; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 18px; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.side { width: 232px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; flex: 0 0 232px; }
.brand { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--line); color: var(--ink); }
.brand:hover { text-decoration: none; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--o), var(--o-d)); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.brand b { font-size: 16px; display: block; line-height: 1.1; }
.brand small { font-size: 11px; color: var(--mut); }
.nav { padding: 12px; flex: 1; overflow-y: auto; }
.nav .sec { font-size: 10.5px; letter-spacing: 1px; color: var(--mut); text-transform: uppercase; padding: 12px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; color: var(--ink2); font-weight: 500; margin-bottom: 2px; }
.nav a:hover { background: var(--o-ll); text-decoration: none; }
.nav a.on { background: var(--o); color: #fff; box-shadow: 0 4px 10px rgba(242, 107, 29, .28); }
.nav .cnt { margin-left: auto; background: var(--o-l); color: var(--o-dd); font-size: 11px; border-radius: 10px; padding: 1px 7px; font-weight: 700; }
.nav a.on .cnt { background: rgba(255, 255, 255, .25); color: #fff; }
.me { border-top: 1px solid var(--line); padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.me b { display: block; font-size: 13px; }
.me small { color: var(--mut); font-size: 11.5px; }
.me form { margin-left: auto; }
.av { width: 34px; height: 34px; border-radius: 50%; background: var(--o-l); color: var(--o-dd); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 34px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { min-height: 64px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 10px 26px; gap: 16px; position: sticky; top: 0; z-index: 5; }
.top h1 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.crumb { font-size: 12px; color: var(--mut); }
.top .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 9px; width: 38px; height: 38px; align-items: center; justify-content: center; cursor: pointer; }
.content { padding: 22px 26px 40px; flex: 1; }

/* ---------- layout ---------- */
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { min-width: 0; }
.col { flex: 1 1 0; min-width: 0; }
.grow2 { flex: 2 1 0; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; }
.flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.right { margin-left: auto; }
.sub { font-size: 12px; color: var(--mut); }
.muted { color: var(--mut); }
.nowrap { white-space: nowrap; }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h3 .r { margin-left: auto; font-size: 12.5px; font-weight: 600; }
.card.danger { border: 2px solid #F3B8B8; }
.card.soft { background: var(--o-ll); border-color: var(--o-b); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; color: var(--ink); display: block; }
a.kpi:hover { text-decoration: none; border-color: var(--o-b); }
.kpi .l { font-size: 12px; color: var(--mut); font-weight: 500; }
.kpi .v { font-size: 25px; font-weight: 750; margin-top: 8px; letter-spacing: -.5px; }
.kpi .s { font-size: 12px; color: var(--mut); margin-top: 3px; }
.kpi.hl { background: linear-gradient(135deg, var(--o), var(--o-d)); border: none; color: #fff; }
.kpi.hl .l, .kpi.hl .s { color: rgba(255, 255, 255, .88); }
.up { color: var(--ok); font-weight: 600; }
.dn { color: var(--red); font-weight: 600; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--mut); font-weight: 600; padding: 9px 10px; background: var(--o-ll); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.click:hover td { background: var(--o-ll); }
tfoot td { font-weight: 700; background: var(--o-ll); }
.empty { text-align: center; color: var(--mut); padding: 28px 10px; }
.veh { font-weight: 700; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: .3px; white-space: nowrap; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.p-o { background: var(--o-l); color: var(--o-dd); }
.p-g { background: var(--ok-l); color: var(--ok); }
.p-r { background: var(--red-l); color: var(--red); }
.p-y { background: var(--warn-l); color: var(--warn); }
.p-n { background: #F1EFED; color: var(--ink2); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; font-family: inherit; white-space: nowrap; }
.btn:hover { text-decoration: none; border-color: var(--o-b); }
.btn.pr { background: var(--o); border-color: var(--o); color: #fff; box-shadow: 0 4px 10px rgba(242, 107, 29, .22); }
.btn.pr:hover { background: var(--o-d); }
.btn.gh { background: var(--o-l); border-color: var(--o-b); color: var(--o-dd); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
.btn.danger { color: var(--red); border-color: #F3C4C4; }
.btn.link { border: none; background: none; padding: 0; height: auto; color: var(--mut); font-weight: 500; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.form-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.form-actions .sub { margin-right: auto; }

/* ---------- forms ---------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form.c1 { grid-template-columns: minmax(0, 1fr); }
.span2 { grid-column: span 2; } .span3 { grid-column: 1 / -1; }
.f label, .lbl { display: block; font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 6px; }
.f label em, .lbl em { color: var(--o-d); font-style: normal; }
.f label small { font-weight: 400; color: var(--mut); }
input[type=text], input[type=number], input[type=password], input[type=date], input[type=datetime-local], input[type=search], input[type=tel], select, textarea {
  width: 100%; height: 40px; border: 1px solid #E2DBD5; border-radius: 10px; padding: 0 12px; font-size: 14px; background: #fff; color: var(--ink); font-family: inherit;
}
textarea { height: 76px; padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--o); box-shadow: 0 0 0 3px rgba(242, 107, 29, .14); }
input[readonly], .ro { background: var(--bg); color: var(--ink2); }
.ro.strong { color: var(--ink); font-weight: 700; }
.unit { position: relative; }
.unit input { padding-right: 46px; }
.unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--mut); font-size: 12px; pointer-events: none; }
.hint { font-size: 12px; color: var(--mut); margin-top: 5px; }
.hint b { color: var(--o-d); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--o); }
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.seg label { margin: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px; color: var(--ink2); background: #fff; cursor: pointer; font-weight: 500; }
.seg input:checked + span { border-color: var(--o-b); background: var(--o-l); color: var(--o-dd); font-weight: 600; }
.seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(242, 107, 29, .2); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px; color: var(--ink2); background: #fff; white-space: nowrap; }
.chip:hover { text-decoration: none; border-color: var(--o-b); }
.chip.on { border-color: var(--o-b); background: var(--o-l); color: var(--o-dd); font-weight: 600; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters input, .filters select { width: auto; min-width: 150px; height: 36px; font-size: 13px; }

.upload { border: 2px dashed var(--o-b); background: var(--o-ll); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; position: relative; }
.upload:hover { border-color: var(--o); }
.upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.upload .ic { width: 44px; height: 44px; border-radius: 11px; background: #fff; border: 1px solid var(--o-b); display: flex; align-items: center; justify-content: center; color: var(--o-d); flex: 0 0 44px; }
.upload b { display: block; font-size: 13.5px; }
.upload small { font-size: 12px; color: var(--mut); }
.upload.has-files { border-style: solid; border-color: var(--ok); background: var(--ok-l); }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.thumb { width: 76px; height: 76px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg) center/cover no-repeat; display: flex; align-items: flex-end; justify-content: center; font-size: 10px; color: var(--ink2); padding: 4px; overflow: hidden; text-align: center; word-break: break-all; position: relative; }
.thumb:hover { text-decoration: none; border-color: var(--o); }
.thumb.pdf { background: var(--o-l); align-items: center; font-weight: 700; color: var(--o-dd); font-size: 12px; }
.thumb .tag { position: absolute; top: 3px; left: 3px; background: rgba(255,255,255,.9); border-radius: 4px; padding: 0 4px; font-size: 9.5px; text-transform: uppercase; }
.thumb.sm { width: 40px; height: 40px; }

/* ---------- alerts ---------- */
.alert { border-radius: 12px; padding: 12px 14px; font-size: 13px; margin-bottom: 12px; border: 1px solid; }
.alert b { display: block; margin-bottom: 2px; }
.alert ul { margin: 4px 0 0 18px; }
.alert.err { background: var(--red-l); color: #7F1D1D; border-color: #F7CFCF; }
.alert.warn { background: var(--o-l); color: var(--o-dd); border-color: var(--o-b); }
.alert.ok { background: var(--ok-l); color: #14532D; border-color: #CBE9D4; }
.alert.info { background: #fff; color: var(--ink2); border-color: var(--line); }
a.alert { display: block; color: inherit; }
a.alert:hover { text-decoration: none; filter: brightness(.98); }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.kv:last-child { border-bottom: none; }
.kv span { color: var(--ink2); }
.kv b { font-variant-numeric: tabular-nums; text-align: right; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; background: var(--bg); border-radius: 12px; padding: 14px; }
.facts div span { display: block; font-size: 11.5px; color: var(--mut); }
.facts div b { font-size: 13.5px; }
.big { font-size: 34px; font-weight: 800; letter-spacing: -.6px; }
.total-box { background: linear-gradient(135deg, var(--o), var(--o-d)); color: #fff; border-radius: 12px; padding: 16px; margin-top: 12px; }
.total-box .sub { color: rgba(255,255,255,.88); }
.total-box.neg { background: linear-gradient(135deg, #B91C1C, #991B1B); }
.shortage-box { border-radius: 12px; padding: 16px; margin-top: 12px; text-align: center; background: var(--ok-l); color: #14532D; }
.shortage-box.bad { background: var(--red-l); color: #7F1D1D; }
.shortage-box .lab { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.shortage-box .big { font-size: 38px; }

.steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mut); }
.step .c { width: 26px; height: 26px; border-radius: 50%; background: #EEE7E1; color: var(--mut); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.step.done { color: var(--ink); font-weight: 600; }
.step.done .c { background: var(--o); color: #fff; }
.steps .ln { flex: 1; min-width: 20px; height: 2px; background: #EEE7E1; margin: 0 12px; }
.steps .ln.done { background: var(--o-b); }

.bars { display: flex; align-items: flex-end; gap: 14px; height: 180px; padding-top: 10px; border-bottom: 1px solid var(--line); }
.bars .b { flex: 1; display: flex; gap: 4px; align-items: flex-end; height: 100%; }
.bars i { flex: 1; border-radius: 5px 5px 0 0; display: block; min-height: 2px; }
.bars i.a { background: var(--o); } .bars i.u { background: var(--o-b); }
.bl { display: flex; gap: 14px; padding-top: 6px; font-size: 11px; color: var(--mut); }
.bl span { flex: 1; text-align: center; }
.lg { display: flex; gap: 14px; font-size: 12px; color: var(--ink2); font-weight: 500; }
.lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.meter { height: 8px; border-radius: 4px; background: var(--o); }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick a { background: #fff; border-radius: 12px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink); font-weight: 600; font-size: 13px; }
.quick a:hover { text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.quick svg.i { color: var(--o-d); }

/* ---------- login ---------- */
.login { display: flex; min-height: 100vh; background: #fff; }
.login .hero { flex: 0 0 44%; background: linear-gradient(150deg, var(--o) 0%, var(--o-d) 70%, var(--o-dd) 100%); color: #fff; padding: 56px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.login .hero:after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.08); }
.login .hero h2 { font-size: 40px; line-height: 1.1; letter-spacing: -.8px; }
.login .hero p { margin-top: 16px; font-size: 16px; opacity: .9; max-width: 380px; }
.login .panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px 20px; }
.login form { width: 100%; max-width: 380px; }
.login h1 { font-size: 26px; letter-spacing: -.4px; }

.error-page { max-width: 520px; margin: 60px auto; text-align: center; }
.error-page .code { font-size: 54px; font-weight: 800; color: var(--o); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .form.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 20; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.15); }
  body.nav-open .side { transform: none; }
  .menu-btn { display: inline-flex; }
  .top { padding: 10px 16px; }
  .content { padding: 16px 16px 40px; }
  .row { flex-direction: column; flex-wrap: nowrap; }
  .row > * { flex: 0 0 auto !important; width: 100%; }
  .login .hero { display: none; }
  .quick { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .form, .form.c3 { grid-template-columns: minmax(0, 1fr); }
  .span2, .span3 { grid-column: auto; }
  .top h1 { font-size: 17px; }
  .top .actions .btn span.hide-sm { display: none; }
  .filters input, .filters select { flex: 1 1 140px; }
}

/* ---------- print (settlement slip) ---------- */
.slip { max-width: 820px; margin: 24px auto; background: #fff; padding: 36px; border: 1px solid var(--line); border-radius: 12px; }
.slip h1 { font-size: 22px; }
.slip .head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--o); padding-bottom: 14px; margin-bottom: 18px; }
.slip .sign { display: flex; justify-content: space-between; margin-top: 60px; font-size: 12px; color: var(--ink2); }
.slip .sign div { border-top: 1px solid var(--ink2); padding-top: 6px; width: 200px; text-align: center; }
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .slip { border: none; margin: 0; padding: 0; max-width: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}