:root{
    --bg: #fdfdfb;
    --surface: #ffffff;
    --ink: #1e1f22;
    --muted: #767a82;
    --line: #e7e4da;
    --yellow: #f2c230;
    --yellow-ink: #6b5300;
    --rust: #c1552f;
    --green: #4c8c5b;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;}
  #app{display:flex;flex-direction:column;height:100vh;}

  header{
    padding:14px 20px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:baseline;
    gap:10px;
  }
  header h1{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:20px;
    letter-spacing:0.3px;
    margin:0;
    color:var(--ink);
  }
  header h1 span{
    background:var(--yellow);
    color:var(--yellow-ink);
    padding:0 4px;
    border-radius:3px;
  }
  header p{margin:0; font-size:12px; color:var(--muted);}

  main{
    flex:1;
    display:grid;
    overflow:hidden;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "tabs"
      "form"
      "map"
      "result";
  }
  @media(min-width:860px){
    main{
      grid-template-columns: 340px 1fr;
      grid-template-rows: auto auto 1fr;
      grid-template-areas:
        "tabs map"
        "form map"
        "result map";
    }
  }

  .tabs{ grid-area:tabs; }
  .form-area{
    grid-area:form;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:14px 18px;
    background:var(--surface);
    overflow-y:auto;
    max-height:42vh;
  }
  .result-area{
    grid-area:result;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:0 18px 18px;
    background:var(--surface);
    overflow-y:auto;
    max-height:38vh;
  }
  @media(min-width:860px){
    .tabs, .form-area, .result-area{ border-right:1px solid var(--line); }
  }

  .field{position:relative;}
  label{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:var(--muted);
    font-weight:600;
    margin-bottom:5px;
  }
  input[type=text], input[type=number]{
    width:100%;
    padding:9px 11px;
    border-radius:6px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink);
    font-size:14px;
    font-family:'Inter',sans-serif;
  }
  input:focus{outline:none; border-color:var(--ink);}

  .swap-row{display:flex; align-items:center; gap:8px;}
  .swap-row .fields{flex:1; display:flex; flex-direction:column; gap:10px;}
  #swapBtn{
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--ink);
    width:32px;height:32px;
    border-radius:6px;
    cursor:pointer;
    font-size:15px;
    flex-shrink:0;
    margin-top:16px;
  }
  #swapBtn:hover{background:var(--bg); border-color:var(--ink);}

  .suggestions{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--surface);
    border:1px solid var(--line);
    border-top:none;
    border-radius:0 0 6px 6px;
    max-height:180px;
    overflow-y:auto;
    z-index:1000;
    box-shadow:0 4px 10px rgba(0,0,0,0.06);
  }
  .suggestions div{
    padding:8px 11px;
    font-size:13px;
    cursor:pointer;
    border-bottom:1px solid var(--line);
  }
  .suggestions div:last-child{border-bottom:none;}
  .suggestions div:hover{background:var(--bg);}

  .two-col{display:flex; gap:10px;}
  .two-col .field{flex:1;}

  .chips{display:flex; gap:6px; flex-wrap:wrap;}
  .chip{
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--muted);
    font-size:12px;
    padding:5px 10px;
    border-radius:99px;
    cursor:pointer;
  }
  .chip:hover{border-color:var(--ink); color:var(--ink);}

  .checkbox-row{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--ink);
    cursor:pointer;
    user-select:none;
  }
  .checkbox-row input{width:16px; height:16px; accent-color:var(--yellow); cursor:pointer;}

  .primary-btn{
    margin-top:2px;
    padding:11px;
    border:none;
    border-radius:6px;
    background:var(--ink);
    color:var(--surface);
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    cursor:pointer;
  }
  .primary-btn:hover{background:#000;}
  .primary-btn:disabled{background:var(--muted); cursor:wait;}

  #status{font-size:12px; color:var(--muted); min-height:16px;}

  #ticket, #ticketFrete{
    display:none;
    background:var(--bg);
    color:var(--ink);
    border-radius:8px;
    border:1px solid var(--line);
    padding:16px 18px;
    font-family:'Space Mono', monospace;
    position:relative;
  }
  #ticket.show, #ticketFrete.show{display:block;}
  .ticket-title{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.8px;
    border-bottom:1px dashed var(--line);
    padding-bottom:8px;
    margin-bottom:8px;
    display:flex;
    justify-content:space-between;
    color:var(--muted);
  }
  .ticket-row{display:flex; justify-content:space-between; font-size:13px; padding:3px 0;}
  .ticket-row .k{color:var(--muted);}
  .ticket-row .v{font-weight:700;}
  .ticket-total{
    border-top:1px dashed var(--line);
    margin-top:8px;
    padding-top:8px;
    display:flex;
    justify-content:space-between;
    font-size:17px;
    font-weight:700;
  }
  .ticket-total .v{color:var(--rust);}

  #shareBtn{
    margin-top:10px;
    width:100%;
    padding:9px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--surface);
    color:var(--ink);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
  }
  #shareBtn:hover{border-color:var(--ink);}

  #mapWrap{grid-area:map; position:relative; min-height:180px;}
  #map{position:absolute; inset:0;}

  .adslot{
    background:var(--bg);
    border:1px dashed var(--line);
    border-radius:6px;
    padding:10px;
    font-size:11px;
    color:var(--muted);
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0.4px;
  }

  .tabs{
    display:flex;
    border-bottom:1px solid var(--line);
    background:var(--surface);
  }
  .tab-btn{
    flex:1;
    padding:11px;
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    color:var(--muted);
    cursor:pointer;
  }
  .tab-btn.active{color:var(--ink); border-bottom-color:var(--yellow);}
  .tab-btn:hover{color:var(--ink);}

  .stop-row{display:flex; align-items:flex-start; gap:6px;}
  .stop-row .field{flex:1;}
  .stop-remove{
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--muted);
    width:32px; height:32px;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
    flex-shrink:0;
    margin-top:16px;
  }
  .stop-remove:hover{border-color:var(--rust); color:var(--rust);}

  #addParadaBtn{
    border:1px dashed var(--line);
    background:var(--surface);
    color:var(--muted);
    font-size:13px;
    padding:8px;
    border-radius:6px;
    cursor:pointer;
    text-align:center;
  }
  #addParadaBtn:hover{border-color:var(--ink); color:var(--ink);}

  .ordem-list{font-size:13px; margin:6px 0 0; padding-left:18px; color:var(--ink);}
  .ordem-list li{padding:2px 0;}

  .lucro-row .v{color:var(--green);}

  #freteUsageInfo{
    font-size:12px;
    color:var(--muted);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:6px;
    padding:8px 10px;
  }
  #freteUsageInfo.limite{
    color:var(--rust);
    border-color:var(--rust);
    background:#fbeee7;
  }

  .nav-row{display:flex; gap:8px; margin-top:8px;}
  .nav-btn{
    flex:1;
    padding:9px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--surface);
    color:var(--ink);
    font-size:13px;
    font-weight:600;
    font-family:'Inter',sans-serif;
    cursor:pointer;
    text-align:center;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
  }
  .nav-btn svg{flex-shrink:0;}
  .nav-btn:hover{border-color:var(--ink);}
  .nav-note{font-size:11px; color:var(--muted); margin-top:6px;}

  #siteFooter{
    position:fixed;
    left:10px;
    bottom:8px;
    z-index:500;
    display:flex;
    gap:10px;
    align-items:center;
    background:rgba(255,255,255,0.9);
    padding:4px 8px;
    border-radius:6px;
    font-size:11px;
  }
  #siteFooter a, #siteFooter button{
    color:var(--muted);
    text-decoration:none;
    font-size:11px;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    font-family:'Inter',sans-serif;
  }
  #siteFooter a:hover, #siteFooter button:hover{color:var(--ink); text-decoration:underline;}

  #cookieBanner{
    position:fixed;
    left:14px;
    bottom:44px;
    z-index:900;
    width:280px;
    max-width:calc(100vw - 28px);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,0.15);
    padding:14px;
    display:none;
  }
  #cookieBanner.show{display:block;}
  #cookieBanner p{font-size:12.5px; color:var(--ink); margin:0 0 10px; line-height:1.5;}
  #cookieBanner .cookie-actions{display:flex; gap:8px; margin-bottom:8px;}
  #cookieBanner button.cookie-btn{
    flex:1;
    padding:8px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    border:1px solid var(--line);
    font-family:'Inter',sans-serif;
  }
  #cookieAccept{background:var(--ink); color:var(--surface); border-color:var(--ink);}
  #cookieAccept:hover{background:#000;}
  #cookieReject{background:var(--surface); color:var(--ink);}
  #cookieReject:hover{border-color:var(--ink);}
  #cookieBanner a{font-size:11px; color:var(--rust);}

  .resumo-bar{
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:6px;
    padding:8px 10px;
    font-size:13px;
  }
  .resumo-bar.show{display:flex;}
  .resumo-bar span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .resumo-bar button{
    flex-shrink:0;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink);
    font-size:12px;
    font-weight:600;
    padding:5px 10px;
    border-radius:6px;
    cursor:pointer;
  }
  .resumo-bar button:hover{border-color:var(--ink);}

  #viagemForm.collapsed, #freteForm.collapsed{display:none;}

  .ticket-toggle{
    background:none;
    border:none;
    color:var(--rust);
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    padding:2px 0 6px;
    cursor:pointer;
    text-align:left;
  }

  @media(max-width:859px){
    header{padding:8px 14px;}
    header p{display:none;}
    .tabs{padding:0 4px;}
    .form-area{padding:10px 12px; max-height:38vh;}
    .result-area{padding:0 12px 10px; max-height:34vh;}
  }