:root{
  --ink:#171412;
  --muted:#766d63;
  --line:#e7ded2;
  --paper:#fffaf1;
  --card:#ffffff;
  --red:#d9352a;
  --green:#14864a;
  --blue:#155eef;
  --amber:#f7b731;
  --shadow:0 22px 50px rgba(23,20,18,.12);
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(135deg,#fff7e8 0%,#f6efe4 52%,#eef4ff 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app{min-height:100vh;display:grid;grid-template-columns:340px 1fr}
.sidebar{position:sticky;top:0;height:100vh;padding:22px;background:rgba(255,255,255,.72);backdrop-filter:blur(18px);border-right:1px solid rgba(23,20,18,.12);display:flex;flex-direction:column;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:48px;height:48px;border-radius:14px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:950;letter-spacing:.04em}
h1,h2,h3,p{margin:0}
h1{font-size:18px;font-weight:950}
.brand p,.panel-head p,.workspace-head p{color:var(--muted);font-size:13px}
.upload-card,.metrics,.panel,.summary-card,.analysis-panel{background:rgba(255,255,255,.86);border:1px solid rgba(23,20,18,.12);border-radius:18px;box-shadow:var(--shadow)}
.upload-card{padding:16px;display:flex;flex-direction:column;gap:12px}
.file-box{display:block;border:1.5px dashed #cfc3b5;border-radius:14px;padding:14px;cursor:pointer;background:#fffdf9}
.file-box span,.date-row span,.summary-card span,.metrics span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;margin-bottom:6px}
.file-box strong{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-box input{display:none}
.date-row input{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;background:#fff}
.primary-btn{border:0;border-radius:14px;padding:14px 16px;background:var(--red);color:#fff;font-weight:950;font-size:14px;cursor:pointer;box-shadow:0 12px 26px rgba(217,53,42,.28)}
.primary-btn:disabled{opacity:.55;cursor:not-allowed}
.metrics{display:grid;grid-template-columns:1fr;gap:1px;overflow:hidden}
.metrics div{padding:14px 16px;background:#fff}
.metrics strong{font-size:28px;font-weight:950}
.workspace{padding:26px;min-width:0}
.workspace-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:950;color:var(--red)!important;margin-bottom:6px}
h2{font-size:34px;line-height:1;font-weight:950}
.status{max-width:420px;border:1px solid rgba(23,20,18,.12);border-radius:14px;background:rgba(255,255,255,.78);padding:12px 14px;color:var(--muted);font-size:13px;font-weight:800}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.summary-card{padding:16px}
.summary-card strong{font-size:20px;font-weight:950}
.analysis-panel{margin-bottom:18px;overflow:hidden}
.analysis-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}
.analysis-head>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.analysis-head strong{font-size:20px;font-weight:950}
.flag-badge{border-radius:999px;padding:7px 13px;font-size:13px;font-weight:950;background:#ffe7e7;color:#bd1b1b}
.flag-badge.ok{background:#e8f8ef;color:var(--green)}
.link-btn{border:0;background:transparent;color:#92887d;font-weight:900;text-decoration:underline;cursor:pointer;padding:4px}
.analysis-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.analysis-metrics>div{padding:18px;text-align:center;border-right:1px solid var(--line)}
.analysis-metrics>div:last-child{border-right:0}
.analysis-metrics span{display:block;color:#9b9187;font-size:13px;font-weight:900;margin-bottom:8px}
.analysis-metrics strong{font-size:26px;font-weight:950}
.analysis-cash{display:flex;gap:26px;flex-wrap:wrap;padding:14px 18px;background:#fffdf9;border-bottom:1px solid var(--line);font-size:16px}
.analysis-cash strong{font-weight:950}
.threshold{display:grid;grid-template-columns:auto 1fr 54px;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.threshold span{color:#9b9187;font-weight:900}
.threshold input{accent-color:#7c3aed;width:100%}
.threshold strong{color:#7c3aed;font-size:18px;text-align:right}
.ride-list{display:flex;flex-direction:column}
.ride-row{display:grid;grid-template-columns:18px 1fr auto;gap:14px;padding:14px 18px;border-bottom:1px solid #f2ece5;align-items:start}
.ride-dot{width:10px;height:10px;border-radius:999px;background:#24bd61;margin-top:7px}
.ride-row.flagged{background:#fff5f4}
.ride-row.flagged .ride-dot{background:var(--red)}
.ride-row.offline{background:#fff8e6}
.ride-row.offline .ride-dot{background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.16)}
.ride-main{min-width:0}
.ride-title{display:flex;justify-content:space-between;gap:12px;font-weight:950;font-size:17px}
.ride-title span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ride-sub{color:#9b9187;font-weight:800;margin-top:4px;font-size:13px}
.gps-line{margin-top:10px;border:1px solid #cfe0ff;background:#eef5ff;color:#123ca8;border-radius:8px;padding:9px 10px;display:flex;justify-content:space-between;gap:10px;font-weight:850}
.gps-line a{color:#123ca8;font-weight:950}
.offline-alert{margin-top:10px;border:1px solid #ffd28a;background:#fff1cf;color:#9a4b00;border-radius:8px;padding:8px 10px;font-size:12px;font-weight:950}
.ride-check{align-self:center;color:#24bd61;font-weight:950}
.ride-check.flag{color:var(--red);background:#ffe7e7;border-radius:999px;padding:4px 8px;font-size:11px}
.analysis-note{padding:12px 18px;background:#fff9ea;color:#b65300;font-weight:850}
.analysis-note:empty{display:none}
.content-grid{display:grid;grid-template-columns:minmax(420px,1fr) minmax(420px,1fr);gap:18px}
.panel{padding:16px;min-width:0}
.panel-head{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.panel-head h3{font-size:18px;font-weight:950}
.list{display:flex;flex-direction:column;gap:12px}
.empty{color:#978d82;font-weight:800;padding:18px;border:1px dashed #d9cec0;border-radius:14px;background:#fffdf9}
.trip-card,.gap-card{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.trip-top,.gap-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:14px 14px 10px}
.order{font-size:18px;font-weight:950}
.badge{border-radius:999px;padding:5px 9px;font-size:11px;font-weight:950;background:#f3f0ec;color:#534a42;white-space:nowrap}
.badge.green{background:#e8f8ef;color:var(--green)}
.badge.red{background:#ffe9e7;color:var(--red)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.detail{background:#fff;padding:10px 12px}
.detail span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:900}
.detail strong{display:block;margin-top:3px;font-size:14px}
.timeline{padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px}
.timeline div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #f0e9df;padding-bottom:6px}
.timeline span{color:var(--muted)}
.gap-card.good{border-color:#bde8ce}
.gap-card.warn{border-color:#ffd68c}
.gap-card.offline{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.12)}
.gap-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 12px}
.stat{border-radius:12px;background:#f8f5ef;padding:10px}
.stat span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:900}
.stat strong{display:block;font-size:17px;margin-top:2px}
.links{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 14px}
.links a{border-radius:999px;padding:8px 11px;background:#eef4ff;color:#0b4fc4;text-decoration:none;font-weight:950;font-size:12px}
.links a.dark{background:var(--ink);color:#fff}
@media (max-width:1100px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.summary-grid,.content-grid,.analysis-metrics{grid-template-columns:1fr}.analysis-metrics>div{border-right:0;border-bottom:1px solid var(--line)}.threshold{grid-template-columns:1fr}.workspace-head{flex-direction:column}h2{font-size:28px}}