.repan-app{
    --bg:#12161b;
    --bg-grid: rgba(237,239,243,0.035);
    --surface:#181d24;
    --surface-2:#1f252d;
    --border:#2a323c;
    --border-soft:#232a32;
    --text:#edeff3;
    --text-muted:#8891a0;
    --text-faint:#5b6472;
    --amber:#e8a33d;
    --amber-soft:rgba(232,163,61,0.14);
    --teal:#33c7b0;
    --teal-soft:rgba(51,199,176,0.14);
    --red:#e2574c;
    --red-soft:rgba(226,87,76,0.14);
    --green:#1ea672;
    --green-soft:rgba(30,166,114,0.14);
    --green-dim:#146b49;
    --radius-s:8px;
    --radius-m:14px;
    --radius-l:26px;
    --font-display:'Space Grotesk',sans-serif;
    --font-body:'Inter',sans-serif;
    --font-mono:'IBM Plex Mono',monospace;
    --ease:cubic-bezier(.22,.61,.36,1);
  
    background:
      linear-gradient(var(--bg-grid) 1px,transparent 1px) 0 0/100% 42px,
      var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    border-radius:18px;
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 24px 70px rgba(0,0,0,0.35);
  }


.repan-app * {box-sizing:border-box;}
.repan-app ::selection { background:var(--amber-soft); color:var(--amber);}
.repan-app button { font-family:inherit; }
.repan-app input { font-family:inherit; }
.repan-app :focus-visible {
    outline:2px solid var(--teal);
    outline-offset:3px;
    border-radius:4px;
  }
.repan-app a { color:var(--teal); }
.repan-app /* ---------- topbar ---------- */
  .topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:22px clamp(20px,5vw,56px);
    border-bottom:1px solid var(--border-soft);
  }
.repan-app .brand {
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:0.12em;
    color:var(--text-muted);
    display:flex; align-items:center; gap:9px;
  }
.repan-app .brand-mark {
    width:8px;height:8px;border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 0 3px var(--amber-soft);
    display:inline-block;
  }
.repan-app .topbar-actions { display:flex; align-items:center; gap:10px; }
.repan-app #repan-resetBtn {
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-muted);
    font-size:13px;
    padding:9px 16px;
    border-radius:100px;
    cursor:pointer;
    transition:border-color .2s var(--ease), color .2s var(--ease);
  }
.repan-app #repan-resetBtn:hover { border-color:var(--teal); color:var(--teal); }
.repan-app #repan-downloadPdfBtn {
    background:var(--amber);
    border:1px solid var(--amber);
    color:#1a1204;
    font-size:13px;
    font-weight:600;
    padding:9px 18px;
    border-radius:100px;
    cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
    transition:transform .15s var(--ease), box-shadow .2s var(--ease);
  }
.repan-app #repan-downloadPdfBtn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(232,163,61,0.25); }
.repan-app #repan-downloadPdfBtn:disabled { opacity:.55; cursor:progress; transform:none; box-shadow:none; }
.repan-app /* ---------- value / pitch panel ---------- */
  .value-panel {
    background:linear-gradient(155deg,var(--surface) 55%,var(--surface-2));
    border:1px solid var(--border-soft);
    border-radius:var(--radius-m);
    padding:28px clamp(20px,3vw,32px);
  }
.repan-app .value-panel h2 {
    font-family:var(--font-display); font-size:19px; font-weight:600; margin:0 0 6px;
  }
.repan-app .value-panel .value-intro {
    color:var(--text-muted); font-size:14px; max-width:640px; margin:0 0 24px; line-height:1.6;
  }
.repan-app .value-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px; margin-bottom:28px;
  }
.repan-app .value-card { display:flex; flex-direction:column; gap:8px; }
.repan-app .value-dot { width:10px; height:10px; border-radius:50%; background:var(--teal); }
.repan-app .value-card h3 { font-family:var(--font-display); font-size:15px; font-weight:600; margin:0; }
.repan-app .value-card p { font-size:13px; color:var(--text-muted); line-height:1.55; margin:0; }
.repan-app .challenge-block { border-top:1px dashed var(--border-soft); padding-top:22px; }
.repan-app .challenge-block h3 {
    font-family:var(--font-display); font-size:15.5px; font-weight:600; margin:0 0 4px;
  }
.repan-app .challenge-block .challenge-intro { font-size:13px; color:var(--text-muted); margin:0 0 14px; }
.repan-app .challenge-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px 20px; }
.repan-app .challenge-list li {
    font-size:13px; color:var(--text); line-height:1.5;
    padding-left:18px; position:relative;
  }
.repan-app .challenge-list li::before {
    content:''; position:absolute; left:0; top:7px;
    width:6px; height:6px; border-radius:50%; background:var(--amber);
  }
.repan-app .value-cta {
    margin-top:26px; padding-top:20px; border-top:1px solid var(--border-soft);
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
.repan-app .value-cta p { font-size:13px; color:var(--text-muted); margin:0; max-width:420px; }
.repan-app /* ---------- benefit panel ---------- */
  .benefit-panel {
    background:linear-gradient(155deg,var(--surface) 55%,var(--surface-2));
    border:1px solid rgba(30,166,114,0.35);
    border-radius:var(--radius-m);
    padding:28px clamp(20px,3vw,32px);
  }
.repan-app .benefit-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.repan-app .benefit-panel h2 { font-family:var(--font-display); font-size:19px; font-weight:600; margin:0; color:var(--green); }
.repan-app .benefit-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.repan-app .benefit-col h3 { font-family:var(--font-display); font-size:14px; font-weight:600; margin:0 0 12px; color:var(--text); }
.repan-app .benefit-stats { display:flex; flex-direction:column; gap:10px; }
.repan-app .benefit-stat {
    background:var(--surface-2); border-radius:var(--radius-s);
    padding:13px 15px; display:flex; flex-direction:column; gap:5px;
  }
.repan-app .benefit-stat.highlight { background:var(--green-soft); border:1px solid rgba(30,166,114,0.4); }
.repan-app .bs-label { font-size:12px; color:var(--text-muted); line-height:1.4; }
.repan-app .bs-value { font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--text); }
.repan-app .benefit-stat.highlight .bs-value { color:var(--green); }
.repan-app .benefit-stat .metric-note { margin-top:2px; }
.repan-app .benefit-link { color:var(--green) !important; }
  @media (max-width:820px){
.repan-app .benefit-columns { grid-template-columns:1fr; } }
.repan-app main { padding:0 clamp(20px,5vw,56px) 90px; }
.repan-app /* ---------- hero ---------- */
  .hero {
    max-width:900px;
    margin:0 auto;
    padding:clamp(48px,9vw,96px) 0 20px;
    text-align:center;
  }
.repan-app .eyebrow {
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--teal);
    margin:0 0 18px;
  }
.repan-app .hero h1 {
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(34px,5.4vw,58px);
    line-height:1.06;
    margin:0 0 20px;
    letter-spacing:-0.01em;
  }
.repan-app .hero h1 .accent { color:var(--amber); font-style:normal; }
.repan-app .lead {
    color:var(--text-muted);
    font-size:clamp(15px,1.6vw,18px);
    line-height:1.6;
    max-width:560px;
    margin:0 auto 44px;
  }
.repan-app /* ---------- dropzone ---------- */
  .dropzone {
    border:1.5px dashed var(--border);
    border-radius:var(--radius-l);
    background:var(--surface);
    padding:clamp(30px,6vw,52px) 24px;
    cursor:pointer;
    transition:border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
    outline-offset:4px;
  }
.repan-app .dropzone:hover { border-color:var(--teal); }
.repan-app .dropzone.drag { border-color:var(--amber); background:var(--surface-2); transform:scale(1.005); }
.repan-app .dz-icon { margin:0 auto 18px; display:block; }
.repan-app .dz-title {
    font-family:var(--font-display);
    font-size:19px;
    font-weight:600;
    margin:0 0 8px;
  }
.repan-app .dz-sub { color:var(--text-muted); font-size:14.5px; margin:0 0 14px; }
.repan-app .link-btn {
    background:none; border:none; padding:0;
    color:var(--amber); font-weight:600; cursor:pointer;
    text-decoration:underline; text-underline-offset:3px;
    font-size:inherit;
  }
.repan-app .dz-hint {
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--text-faint);
    margin:0;
  }
.repan-app .file-chip {
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:13px; color:var(--text);
    background:var(--surface-2); border:1px solid var(--border);
    padding:8px 14px; border-radius:100px; margin-top:6px;
  }
.repan-app .file-chip .dot { width:6px;height:6px;border-radius:50%;background:var(--teal); }
.repan-app .error-msg {
    max-width:560px; margin:20px auto 0;
    background:var(--red-soft); border:1px solid rgba(226,87,76,0.4);
    color:#f4c6c2; font-size:14px; line-height:1.55;
    padding:14px 18px; border-radius:var(--radius-m);
    text-align:left;
  }
.repan-app .error-msg strong { display:block; color:#fff; margin-bottom:3px; font-family:var(--font-display); font-weight:600;}
.repan-app /* ---------- route signature ---------- */
  .route-signature {
    max-width:960px; margin:56px auto 8px;
    opacity:0; transform:translateY(10px);
    animation:repan-reveal .6s var(--ease) forwards;
  }
.repan-app .route-signature svg { width:100%; height:auto; display:block; }
.repan-app .rs-label {
    font-family:var(--font-mono); font-size:12px; fill:var(--text-faint);
    letter-spacing:0.04em;
  }
.repan-app .rs-pin-label {
    font-family:var(--font-body); font-size:13px; font-weight:600; fill:var(--text);
  }
.repan-app .rs-metric {
    font-family:var(--font-display); font-size:20px; font-weight:600; fill:var(--amber);
  }

  @keyframes repan-reveal{ to{ opacity:1; transform:translateY(0); } }
.repan-app /* ---------- mapping panel ---------- */
  .mapping-panel {
    max-width:960px; margin:14px auto 0;
  }
.repan-app .mapping-toggle {
    width:100%; text-align:left;
    background:var(--surface); border:1px solid var(--border-soft);
    border-radius:var(--radius-m);
    color:var(--text-muted);
    font-size:13.5px; font-family:var(--font-mono);
    padding:13px 18px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    transition:border-color .2s var(--ease);
  }
.repan-app .mapping-toggle:hover { border-color:var(--border); color:var(--text); }
.repan-app .mapping-toggle .chev { transition:transform .2s var(--ease); flex:none; }
.repan-app .mapping-toggle[aria-expanded="true"] .chev { transform:rotate(180deg); }
.repan-app #repan-mappingSummary { color:var(--teal); }
.repan-app .mapping-body {
    background:var(--surface);
    border:1px solid var(--border-soft); border-top:none;
    border-radius:0 0 var(--radius-m) var(--radius-m);
    margin-top:-1px;
    padding:20px;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:14px 18px;
  }
.repan-app .map-field label {
    display:block; font-size:12px; color:var(--text-faint);
    font-family:var(--font-mono); margin-bottom:6px;
  }
.repan-app .map-field select {
    width:100%;
    background:var(--surface-2); color:var(--text);
    border:1px solid var(--border); border-radius:var(--radius-s);
    padding:9px 10px; font-size:13.5px;
  }
.repan-app .mapping-note {
    grid-column:1/-1;
    font-size:12.5px; color:var(--text-faint); line-height:1.6;
    border-top:1px dashed var(--border-soft); padding-top:14px; margin-top:2px;
  }
.repan-app .mapping-checkbox {
    grid-column:1/-1;
    display:flex; align-items:center; gap:9px;
    font-size:13.5px; color:var(--text-muted);
  }
.repan-app .mapping-checkbox input { width:16px; height:16px; accent-color:var(--teal); }
.repan-app /* ---------- dashboard ---------- */
  .dashboard {
    max-width:1180px; margin:46px auto 0;
    opacity:0; transform:translateY(14px);
  }
.repan-app .dashboard.show { animation:repan-reveal .6s var(--ease) forwards; }
.repan-app .summary-row {
    display:grid; grid-template-columns:1.5fr 1fr 1fr;
    gap:16px; margin-bottom:16px;
  }
.repan-app .stat-card {
    background:var(--surface); border:1px solid var(--border-soft);
    border-radius:var(--radius-m); padding:22px 24px;
  }
.repan-app .stat-card.big { background:linear-gradient(155deg,var(--surface) 60%,var(--surface-2)); }
.repan-app .stat-label {
    display:block; font-family:var(--font-mono); font-size:12px;
    color:var(--text-faint); letter-spacing:0.03em; margin-bottom:10px;
  }
.repan-app .stat-value {
    display:block; font-family:var(--font-display); font-weight:700;
    font-size:clamp(28px,3.4vw,40px); line-height:1;
    color:var(--text);
  }
.repan-app .stat-card.big .stat-value { color:var(--amber); }
.repan-app .stat-sub {
    display:block; margin-top:8px; font-size:12.5px; color:var(--text-muted);
  }
.repan-app .panels-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
  }
.repan-app .panel {
    background:var(--surface); border:1px solid var(--border-soft);
    border-radius:var(--radius-m); padding:24px;
  }
.repan-app .panel.full { grid-column:1/-1; }
.repan-app .panel h2 {
    font-family:var(--font-display); font-size:16.5px; font-weight:600;
    margin:0 0 18px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  }
.repan-app .panel-hint {
    font-family:var(--font-mono); font-size:11.5px; font-weight:400;
    color:var(--text-faint);
  }
.repan-app .empty-note {
    font-size:13.5px; color:var(--text-faint); line-height:1.6;
    background:var(--surface-2); border:1px dashed var(--border);
    border-radius:var(--radius-s); padding:14px 16px;
  }
.repan-app /* zone bars */
  .bar-list { display:flex; flex-direction:column; gap:14px; }
.repan-app .bar-row .bar-top {
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:13.5px; margin-bottom:6px;
  }
.repan-app .bar-row .bar-name { font-weight:600; color:var(--text); }
.repan-app .bar-row .bar-count { font-family:var(--font-mono); color:var(--text-muted); font-size:12.5px; }
.repan-app .bar-track {
    height:9px; background:var(--surface-2); border-radius:100px; overflow:hidden;
  }
.repan-app .bar-fill {
    height:100%; border-radius:100px;
    background:linear-gradient(90deg,var(--teal-dim,#1d6e62),var(--teal));
    width:0%; transition:width 1s var(--ease);
  }
.repan-app .bar-row:nth-child(1) .bar-fill { background:linear-gradient(90deg,#7a5a26,var(--amber)); }
.repan-app /* weekday chart */
  .weekday-chart {
    display:flex; align-items:flex-end; gap:8px; height:130px; margin-top:6px;
  }
.repan-app .wd-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.repan-app .wd-bar {
    width:100%; max-width:34px; border-radius:6px 6px 3px 3px;
    background:var(--surface-2); position:relative;
    transition:height 1s var(--ease);
  }
.repan-app .wd-bar.top { background:var(--amber); }
.repan-app .wd-label { font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
.repan-app .wd-count { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
.repan-app /* time metrics */
  .time-metrics { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.repan-app .metric-block {
    background:var(--surface-2); border-radius:var(--radius-s);
    padding:16px 18px;
  }
.repan-app .metric-label { display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:8px; line-height:1.4;}
.repan-app .metric-value {
    font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--text);
  }
.repan-app .metric-note {
    display:flex; align-items:center; gap:8px; margin-top:10px;
    font-size:12px; color:var(--text-faint); flex-wrap:wrap;
  }
.repan-app .metric-note input {
    width:56px; background:var(--surface); border:1px solid var(--border);
    color:var(--text); border-radius:6px; padding:5px 7px; font-size:12.5px;
    font-family:var(--font-mono);
  }
.repan-app .metric-block.benchmark { display:flex; flex-direction:column; }
.repan-app .metric-block.benchmark label { font-size:12.5px; color:var(--text-muted); margin-bottom:8px; }
.repan-app .metric-block.benchmark input {
    width:80px; background:var(--surface); border:1px solid var(--border);
    color:var(--text); border-radius:6px; padding:7px 9px; font-family:var(--font-mono); font-size:14px;
  }
.repan-app .benchmark-delta {
    display:inline-block; margin-top:10px; font-family:var(--font-mono); font-size:13px;
    padding:4px 10px; border-radius:100px; width:fit-content;
  }
.repan-app .benchmark-delta.pos { background:var(--red-soft); color:#f2a29b; }
.repan-app .benchmark-delta.neg { background:var(--teal-soft); color:var(--teal); }
.repan-app .benchmark-delta.flat { background:var(--surface); color:var(--text-muted); border:1px solid var(--border); }
.repan-app .context-note {
    font-size:12.5px; color:var(--text-faint); line-height:1.65;
    border-top:1px dashed var(--border-soft); padding-top:14px; margin:4px 0 0;
  }
.repan-app /* distances */
  .distance-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.repan-app .dist-card {
    background:var(--surface-2); border-radius:var(--radius-s);
    padding:18px; text-align:center;
  }
.repan-app .dist-card .dv { font-family:var(--font-display); font-size:24px; font-weight:700; }
.repan-app .dist-card.avg .dv { color:var(--teal); }
.repan-app .dist-card.max .dv { color:var(--amber); }
.repan-app .dist-card .dl { display:block; margin-top:6px; font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); }
.repan-app /* branch table */
  table.branch-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.repan-app table.branch-table th {
    text-align:left; font-family:var(--font-mono); font-weight:400; font-size:11.5px;
    color:var(--text-faint); padding:0 12px 10px; border-bottom:1px solid var(--border-soft);
  }
.repan-app table.branch-table td {
    padding:12px; border-bottom:1px solid var(--border-soft); color:var(--text);
  }
.repan-app table.branch-table tr:last-child td { border-bottom:none; }
.repan-app table.branch-table td.mono, .repan-app table.branch-table th.mono { font-family:var(--font-mono); }
.repan-app .branch-note { font-size:13.5px; color:var(--text-muted); }
.repan-app footer {
    text-align:center; padding:40px 20px 60px;
    font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint);
  }
.repan-app footer p { margin:0 0 8px; }
.repan-app footer p:last-child { margin-bottom:0; }
.repan-app .footer-contact a { color:var(--teal); text-decoration:none; }
.repan-app .footer-contact a:hover { text-decoration:underline; }
.repan-app [hidden] { display:none !important; }

  @media (max-width:820px){
.repan-app .summary-row { grid-template-columns:1fr; }
.repan-app .panels-grid { grid-template-columns:1fr; }
.repan-app .time-metrics { grid-template-columns:1fr; }
.repan-app .distance-metrics { grid-template-columns:1fr 1fr 1fr; }
  }
  @media (max-width:520px){
.repan-app .distance-metrics { grid-template-columns:1fr; }
.repan-app .mapping-body { grid-template-columns:1fr 1fr; }
  }

  @media (prefers-reduced-motion:reduce){
.repan-app .route-signature, .repan-app .dashboard { animation:none !important; opacity:1 !important; transform:none !important; }
.repan-app .bar-fill, .repan-app .wd-bar { transition:none !important; }
  }