*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#050508;--bg2:#0a0a0f;--glass:rgba(255,255,255,.04);--glass-hover:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.08);--border-hover:rgba(100,180,255,.3);
  --glow-blue:rgba(59,130,246,.15);--glow-purple:rgba(139,92,246,.15);
  --accent:#6cb4ee;--accent2:#a78bfa;--green:#10b981;--red:#ef4444;
  --text:#e0e0e0;--text2:#999;--text3:#555;--gold:#fbbf24;
}
body{background:var(--bg);color:var(--text);font-family:'Heebo',sans-serif;min-height:100vh;overflow-x:hidden;direction:rtl}
a{color:var(--accent);text-decoration:none}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.header{text-align:center;padding:12px 20px 6px;padding-right:100px}
.header p{color:var(--text3);font-size:.9em}
.glass{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
.settings-wrap{max-width:1200px;margin:16px auto;padding:0 16px}
.settings-toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;user-select:none;border-radius:16px;transition:background .2s;gap:12px}
.reset-btn-inline{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#ef4444;padding:5px 14px;border-radius:8px;font-family:'Heebo';font-size:.78em;cursor:pointer;white-space:nowrap;transition:background .2s}
.reset-btn-inline:hover{background:rgba(239,68,68,.25)}
.view-tabs-inline{display:flex;gap:4px;flex:1;justify-content:center}
.settings-toggle:hover{background:var(--glass-hover)}
.settings-toggle h2{font-size:1.1em;font-weight:600;display:flex;align-items:center;gap:8px}
.settings-toggle .arrow{transition:transform .3s;font-size:.8em;color:var(--text3)}
.settings-toggle.open .arrow{transform:rotate(180deg)}
.settings-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.settings-body.open{max-height:800px}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:4px 20px 20px}
.setting-item{display:flex;flex-direction:column;gap:6px}
.setting-item label{font-size:.8em;color:var(--text2);font-weight:500}
.setting-item .val{font-size:.85em;color:var(--accent);font-weight:600;min-width:60px;text-align:center}
.setting-row{display:flex;align-items:center;gap:10px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:4px;background:rgba(255,255,255,.1);border-radius:2px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(108,180,238,.4);cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:none;box-shadow:0 0 8px rgba(108,180,238,.4)}
select{background:rgba(255,255,255,.08);border:1px solid var(--border);color:var(--text);padding:6px 12px;border-radius:8px;font-family:'Heebo',sans-serif;font-size:.85em;cursor:pointer;outline:none}
select option{background:#1a1a2e;color:#e8e8e8}
select:focus{border-color:var(--accent)}
.controls{max-width:1200px;margin:12px auto;padding:0 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sort-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sort-group label{font-size:.8em;color:var(--text3)}
.sort-btn{background:var(--glass);border:1px solid var(--border);color:var(--text2);padding:6px 14px;border-radius:8px;font-family:'Heebo',sans-serif;font-size:.78em;cursor:pointer;transition:all .2s}
.sort-btn:hover,.sort-btn.active{background:rgba(108,180,238,.12);border-color:var(--accent);color:var(--accent)}
.btn-action{background:linear-gradient(135deg,rgba(108,180,238,.15),rgba(167,139,250,.15));border:1px solid rgba(108,180,238,.3);color:var(--accent);padding:8px 18px;border-radius:10px;font-family:'Heebo',sans-serif;font-size:.85em;cursor:pointer;transition:all .2s;font-weight:600}
.btn-action:hover{background:linear-gradient(135deg,rgba(108,180,238,.25),rgba(167,139,250,.25));transform:translateY(-1px)}
.spacer{flex:1}
.compare-bar{max-width:1200px;margin:0 auto 10px;padding:0 16px;display:none;align-items:center;gap:10px}
.compare-bar.show{display:flex}
.compare-bar .info{font-size:.85em;color:var(--accent)}
.compare-bar .chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.chip{background:rgba(108,180,238,.1);border:1px solid rgba(108,180,238,.3);padding:4px 12px;border-radius:20px;font-size:.78em;color:var(--accent);display:flex;align-items:center;gap:6px}
.chip .x{cursor:pointer;opacity:.6;font-weight:700}
.chip .x:hover{opacity:1}
.cars-grid{max-width:1200px;margin:0 auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.car-card{position:relative;padding:20px;transition:all .3s;cursor:pointer}
.car-card:hover{background:var(--glass-hover);border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 32px rgba(59,130,246,.1),inset 0 1px 0 rgba(255,255,255,.08)}
.car-card.selected{border-color:var(--accent);box-shadow:0 0 20px rgba(108,180,238,.2)}
.car-card.cheapest{box-shadow:0 0 20px rgba(16,185,129,.15);border-color:rgba(16,185,129,.3)}
.car-card.expensive{box-shadow:0 0 20px rgba(239,68,68,.1);border-color:rgba(239,68,68,.2)}
.car-card.custom-car{border-style:dashed}
.car-rank{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:.75em;font-weight:700;color:var(--text2)}
.car-brand{font-size:.8em;color:var(--text2);margin-top:4px}
.car-model{font-size:1.1em;font-weight:700;line-height:1.3}
.car-monthly{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 4px;border-top:1px solid rgba(255,255,255,.06);margin-top:8px}
.car-delete{position:absolute;top:10px;left:10px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:var(--red);width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:.8em;display:flex;align-items:center;justify-content:center}
#comparePanel table td,#comparePanel table th{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06);font-size:.85em}
#comparePanel table th{color:var(--accent);font-weight:600;font-size:.8em}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.car-title{font-size:1.05em;font-weight:700;line-height:1.3}
.car-year{font-size:.75em;color:var(--text3);margin-top:2px}
.safety{display:flex;gap:2px;direction:ltr}
.safety .star{font-size:.9em;color:rgba(255,255,255,.15)}
.safety .star.on{color:#fbbf24;text-shadow:0 0 6px rgba(251,191,36,.4)}
.check-circle{position:absolute;top:12px;left:12px;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.7em;transition:all .2s}
.car-card.selected .check-circle{border-color:var(--accent);background:var(--accent);color:#050508}
.card-stats{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .lbl{font-size:.68em;color:var(--text3)}
.stat .v{font-size:.9em;font-weight:600}
.breakdown{margin-bottom:14px}
.breakdown-label{font-size:.7em;color:var(--text3);margin-bottom:6px}
.bar-container{display:flex;height:20px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.03)}
.bar-seg{display:flex;align-items:center;justify-content:center;font-size:.55em;font-weight:600;color:rgba(255,255,255,.8);transition:width .4s ease;min-width:0;overflow:hidden;white-space:nowrap}
.legend{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.legend span{font-size:.62em;color:var(--text3);display:flex;align-items:center;gap:4px}
.legend .dot{width:8px;height:8px;border-radius:2px;display:inline-block}
.card-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.monthly-total .lbl{font-size:.7em;color:var(--text3)}
.monthly-total .amount{font-size:1.6em;font-weight:800;color:var(--accent);line-height:1}
.year3-total .lbl{font-size:.7em;color:var(--text3)}
.year3-total .amount{font-size:1em;font-weight:600;color:var(--text2)}
.delete-custom{position:absolute;bottom:12px;left:12px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:var(--red);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.8em;transition:all .2s}
.delete-custom:hover{background:rgba(239,68,68,.3)}
.compare-overlay{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);overflow-y:auto;padding:20px}
.compare-overlay.show{display:block}
.compare-panel{max-width:900px;margin:0 auto;padding:24px}
.compare-panel h2{font-size:1.3em;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.compare-close{background:rgba(255,255,255,.1);border:none;color:var(--text);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1em;display:flex;align-items:center;justify-content:center;transition:all .2s}
.compare-close:hover{background:rgba(255,255,255,.2)}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:12px}
.compare-table th,.compare-table td{padding:10px 14px;text-align:right;border-bottom:1px solid var(--border);font-size:.85em}
.compare-table th{color:var(--text3);font-weight:500;font-size:.75em}
.compare-table td{font-weight:600}
.compare-table tr:last-child td,.compare-table tr:last-child th{border-bottom:none}
.compare-table .highlight{color:var(--green);font-weight:700}
.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);overflow-y:auto;padding:20px}
.modal-overlay.show{display:flex;align-items:center;justify-content:center}
.modal{max-width:480px;width:100%;padding:28px;max-height:90vh;overflow-y:auto}
.modal h2{font-size:1.2em;font-weight:700;margin-bottom:16px}
.modal-field{margin-bottom:12px}
.modal-field label{display:block;font-size:.8em;color:var(--text2);margin-bottom:4px;font-weight:500}
.modal-field input,.modal-field select{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:10px;font-family:'Heebo',sans-serif;font-size:.9em;outline:none;transition:border .2s}
.modal-field input:focus,.modal-field select:focus{border-color:var(--accent)}
.modal-buttons{display:flex;gap:10px;margin-top:18px}
.modal-buttons button{flex:1;padding:10px;border-radius:10px;font-family:'Heebo',sans-serif;font-size:.9em;font-weight:600;cursor:pointer;transition:all .2s}
.modal-buttons .save{background:linear-gradient(135deg,rgba(108,180,238,.2),rgba(167,139,250,.2));border:1px solid rgba(108,180,238,.4);color:var(--accent)}
.modal-buttons .save:hover{background:linear-gradient(135deg,rgba(108,180,238,.35),rgba(167,139,250,.35))}
.modal-buttons .cancel{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text2)}
.modal-buttons .cancel:hover{background:rgba(255,255,255,.1)}
.fuel-toggle{display:flex;gap:0;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.fuel-toggle label{flex:1;text-align:center;cursor:pointer;font-size:.85em;font-weight:500;transition:all .2s;background:rgba(255,255,255,.03);color:var(--text2);padding:0}
.fuel-toggle label span{display:block;padding:8px 14px;border-radius:8px;transition:all .2s}
.fuel-toggle input[type=radio]{display:none}
.fuel-toggle input[type=radio]:checked+span{background:rgba(108,180,238,.15);color:var(--accent)}
.car-settings-btn{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:var(--text2);font-size:1em;cursor:pointer;transition:all .2s;z-index:20;padding:4px 6px;line-height:1}
.car-settings-btn:hover{background:rgba(108,180,238,.15);border-color:var(--accent);color:var(--accent);opacity:1}
.car-override-badge{position:absolute;top:40px;left:12px;background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.3);color:var(--accent2);padding:2px 8px;border-radius:6px;font-size:.6em;font-weight:600;z-index:10}
.override-overlay{display:none;position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);overflow-y:auto;padding:20px}
.override-overlay.show{display:flex;align-items:flex-start;justify-content:center;padding:40px 20px}
.override-modal{max-width:400px;width:100%;padding:24px;max-height:90vh;overflow-y:auto;margin:0 auto}
.override-modal h3{font-size:1em;font-weight:700;margin-bottom:14px;color:var(--accent)}
.override-field{margin-bottom:14px}
.override-field label{display:block;font-size:.8em;color:var(--text2);margin-bottom:4px;font-weight:500}
.override-field .setting-row{display:flex;align-items:center;gap:10px}
.override-field .val{font-size:.85em;color:var(--accent);font-weight:600;min-width:50px;text-align:center}
.override-toggle{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:10px 12px;background:rgba(255,255,255,.03);border-radius:10px}
.override-toggle label{font-size:.85em;color:var(--text2);cursor:pointer;flex:1}
.override-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.back{position:fixed;top:16px;right:16px;z-index:50;font-size:.85em;color:var(--text3);display:flex;align-items:center;gap:4px;transition:color .2s}
.back:hover{color:var(--accent)}
@media(max-width:768px){
  /* Settings toggle bar: stack into 2 rows */
  .settings-toggle{
    flex-wrap:wrap;
    padding:8px 12px;
    gap:8px;
    justify-content:center
  }
  .settings-toggle .arrow{
    order:-1;
    position:absolute;
    right:12px;
    top:12px
  }
  .settings-toggle{position:relative}
  .view-tabs-inline{
    order:1;
    flex:0 0 100%;
    justify-content:center;
    gap:3px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px
  }
  .view-tabs-inline::-webkit-scrollbar{display:none}
  .view-tabs-inline .view-tab{
    padding:5px 10px;
    font-size:.72em;
    white-space:nowrap;
    flex-shrink:0
  }
  .settings-toggle h2{
    order:2;
    font-size:.95em
  }
  .reset-btn-inline{
    order:3;
    font-size:.7em;
    padding:4px 10px
  }

  /* Sort buttons: wrap + smaller */
  .controls{
    padding:0 10px;
    gap:6px
  }
  .sort-group{
    gap:4px;
    flex-wrap:wrap;
    justify-content:center;
    width:100%
  }
  .sort-btn{
    padding:4px 10px;
    font-size:.7em
  }
  .btn-action{
    padding:6px 12px;
    font-size:.78em
  }

  /* Cars grid: single column, no overflow */
  .cars-grid{
    grid-template-columns:1fr;
    padding:10px;
    overflow-x:hidden
  }
  .car-card{
    padding:16px;
    overflow:hidden;
    max-width:100%
  }

  /* Settings grid */
  .settings-grid{grid-template-columns:1fr 1fr}

  /* Compare panel */
  .compare-panel{padding:14px}

  /* Filter bar */
  .filter-bar{
    padding:0 10px;
    gap:4px
  }
  .filter-chip{
    font-size:.68em;
    padding:4px 10px
  }

  /* Compare bar */
  .compare-bar{
    flex-wrap:wrap;
    padding:0 10px
  }

  /* Pie view */
  #pieView{
    grid-template-columns:1fr;
    padding:0 10px
  }

  /* Table view */
  #tableView{
    padding:0 10px
  }

  /* General: prevent horizontal overflow */
  .settings-wrap{
    padding:0 8px;
    overflow:hidden
  }
  body{
    overflow-x:hidden
  }
}

@media(max-width:400px){
  .settings-grid{grid-template-columns:1fr}
  .view-tabs-inline .view-tab{
    padding:4px 8px;
    font-size:.68em
  }
  .sort-btn{
    padding:3px 8px;
    font-size:.65em
  }
  .card-stats{
    gap:10px
  }
  .monthly-total .amount{
    font-size:1.3em
  }
}

.header-subtitle{font-size:.85em;color:var(--text3);letter-spacing:.5px;margin:0;padding:4px 0}
.filter-bar{max-width:1200px;margin:10px auto;padding:0 16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filter-bar label{font-size:.8em;color:var(--text3)}
.filter-chip{background:var(--glass);border:1px solid var(--border);color:var(--text2);padding:5px 12px;border-radius:20px;font-family:'Heebo',sans-serif;font-size:.75em;cursor:pointer;transition:all .2s;user-select:none}
.filter-chip.active{background:rgba(108,180,238,.12);border-color:var(--accent);color:var(--accent)}
.fav-btn{position:absolute;top:12px;left:48px;background:none;border:none;font-size:1.1em;cursor:pointer;transition:transform .2s;z-index:10;padding:0;line-height:1}
.fav-btn:hover{transform:scale(1.2)}
.ov-field{margin-bottom:10px}
.ov-field label{display:block;font-size:.78em;color:var(--text2);margin-bottom:3px;font-weight:500}
.ov-field input,.ov-field select{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;font-family:'Heebo';font-size:.85em;outline:none}
.ov-field input:focus,.ov-field select:focus{border-color:var(--accent)}
.ov-section{border-top:1px solid rgba(255,255,255,.06);padding-top:10px;margin-top:10px}
.ov-section-title{font-size:.82em;font-weight:600;color:var(--accent2);margin-bottom:8px}
.ov-row{display:flex;gap:10px}.ov-row .ov-field{flex:1}


.zero-km-badge{display:inline-block;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3);color:var(--gold);padding:1px 8px;border-radius:6px;font-size:.65em;font-weight:600;margin-right:6px}

.review-btn{position:absolute;top:10px;right:56px;background:none;border:none;color:var(--text2);font-size:.8em;cursor:pointer;transition:all .2s;z-index:10;padding:2px;line-height:1}
.review-btn:hover{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.4);color:#a5b4fc}
.review-btn.loading{opacity:.6;pointer-events:none}
.review-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.review-panel{background:rgba(15,15,25,.97);border:1px solid rgba(99,102,241,.3);border-radius:14px;padding:20px;font-size:.85em;line-height:1.7;text-align:right;direction:rtl;max-width:420px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(99,102,241,.15),inset 0 1px 0 rgba(255,255,255,.05)}
.review-panel .rp-close{position:absolute;top:10px;left:10px;background:none;border:none;color:var(--text3);font-size:1.2em;cursor:pointer;padding:4px 8px;border-radius:6px}
.review-panel .rp-close:hover{background:rgba(255,255,255,.1);color:var(--text)}
.review-panel .rp-title{font-size:1.1em;font-weight:700;margin-bottom:12px;color:var(--text);text-align:center}
.review-panel .rp-row{margin-bottom:4px}
.review-panel .rp-label{font-weight:700;margin-left:4px}
.review-panel .rp-pros{color:#10b981}
.review-panel .rp-cons{color:#ef4444}
.review-panel .rp-for{color:#60a5fa}
.review-panel .rp-notfor{color:#f59e0b}
.review-panel .rp-rating{color:#fbbf24;margin-top:6px}
.review-panel .rp-user{color:var(--text3);font-size:.9em;margin-top:6px;border-top:1px solid rgba(255,255,255,.05);padding-top:6px}
.review-panel .rp-error{color:#ef4444}
.review-panel .rp-src{font-size:.7em;color:var(--text3);margin-top:8px;text-align:left}
.review-panel .rp-src a{color:var(--text3);text-decoration:underline}
.review-panel .rp-subtitle{font-size:12px;color:var(--text3);margin-bottom:12px;text-align:center}
.review-panel .rp-section-header{font-weight:700;margin-top:10px;margin-bottom:4px;color:var(--text);font-size:.95em}
.review-panel .rp-paragraph{margin-bottom:6px;color:var(--text2);font-size:.85em}
.review-panel .rp-ai-content{direction:rtl;text-align:right;line-height:1.7}

.view-tabs{display:flex;gap:6px;margin-bottom:12px;justify-content:center}
.view-tab{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text2);padding:6px 16px;border-radius:20px;cursor:pointer;font-size:.82em;font-family:inherit;transition:all .2s}
.view-tab:hover{background:rgba(108,180,238,.1);border-color:rgba(108,180,238,.3)}
.view-tab.active{background:rgba(108,180,238,.15);border-color:rgba(108,180,238,.4);color:var(--accent)}
#tableView{overflow-x:auto;max-width:1200px;margin:0 auto}
#tableView table{width:100%;border-collapse:collapse;font-size:.78em;text-align:center;table-layout:auto}
#tableView th{background:rgba(255,255,255,.04);color:var(--accent);padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:600;position:sticky;top:0;white-space:nowrap}
#tableView td{padding:6px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
#tableView tr:hover{background:rgba(108,180,238,.05)}
#tableView .best{color:var(--green);font-weight:700}
#tableView .worst{color:#ef4444}
#pieView{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;max-width:1200px;margin:0 auto}
.pie-card{background:rgba(255,255,255,.03);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px;text-align:center}
.pie-card canvas{max-width:200px;max-height:200px;margin:8px auto;display:block}
.pie-card .pie-title{font-weight:700;font-size:.9em;margin-bottom:4px}
.pie-card .pie-total{color:var(--accent);font-size:1.1em;font-weight:700}
.pie-legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px;font-size:.72em}
.pie-legend span{display:flex;align-items:center;gap:3px}
.pie-legend .dot{width:8px;height:8px;border-radius:2px;display:inline-block}

/* Tools tab */
.tools-section{margin-bottom:16px}
.tools-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:none;color:var(--text);font-family:'Heebo';font-size:1em;font-weight:700;cursor:pointer;padding:0}
.tools-toggle .arrow{transition:transform .3s;font-size:.8em;color:var(--text3)}
.tools-toggle.open .arrow{transform:rotate(180deg)}
.tools-regfee-body,.tools-calc-body{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s;opacity:0}
.tools-regfee-body.open,.tools-calc-body.open{max-height:3000px;opacity:1;margin-top:16px}

/* RegFee table */
.regfee-table{width:100%;border-collapse:collapse;font-size:.82em;text-align:center}
.regfee-table th{padding:8px 6px;background:rgba(255,255,255,.04);color:var(--accent);border-bottom:1px solid rgba(255,255,255,.1);font-weight:600;white-space:nowrap}
.regfee-table td{padding:6px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text2)}
.regfee-table tr:hover td{background:rgba(255,255,255,.03)}
.regfee-table td:nth-child(3){color:var(--accent);font-weight:700}

/* Calculator grid */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:768px){.calc-grid{grid-template-columns:1fr;}.calc-results{order:-1}}
.calc-inputs{display:flex;flex-direction:column;gap:6px}
.calc-section-title{font-weight:700;font-size:.88em;color:var(--accent);margin-top:12px;margin-bottom:2px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.calc-section-title:first-child{margin-top:0;padding-top:0;border-top:none}
.calc-field{font-size:.82em}
.calc-field label{color:var(--text2);display:block;margin-bottom:2px}
.calc-row{display:flex;align-items:center;gap:8px}
.calc-row input[type="range"]{flex:1;accent-color:var(--accent)}
.calc-num{width:80px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:6px;padding:4px 6px;color:var(--text);font-family:'Heebo';font-size:.95em;text-align:center}
.calc-fuel-toggle{display:flex;gap:12px;margin-bottom:8px}
.calc-fuel-toggle label{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:.85em;color:var(--text2)}
.calc-fuel-toggle input{accent-color:var(--accent)}

/* Calculator results */
.calc-results{position:sticky;top:20px;align-self:start}
.calc-res-section{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.calc-res-highlight{background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.15)}
.calc-res-title{font-weight:700;font-size:.85em;color:var(--accent);margin-bottom:8px}
.calc-res-row{display:flex;justify-content:space-between;align-items:center;font-size:.82em;margin-bottom:4px;color:var(--text2)}
.calc-res-row b{color:var(--text)}
.calc-res-big{font-size:.92em}
.calc-res-big b{font-size:1.1em}

/* Mobile table */
.mobile-table{width:100%;border-collapse:collapse;font-size:.85em;text-align:center}
.mobile-table th{background:rgba(255,255,255,.04);color:var(--accent);padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:600;position:sticky;top:0;white-space:nowrap;font-size:.8em}
.mobile-table td{padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.mobile-table .best{color:var(--green);font-weight:700}
.mobile-table .worst{color:#ef4444}
.mob-row:active{background:rgba(108,180,238,.1)}
.mob-row-active{background:rgba(108,180,238,.08) !important}
.mob-detail td{padding:0 !important;background:rgba(108,180,238,.03);border-bottom:2px solid rgba(108,180,238,.15)}
.mob-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px 10px;direction:rtl;text-align:right}
.mob-detail-item{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:rgba(255,255,255,.03);border-radius:6px;font-size:.88em}
.mob-label{color:var(--text3);font-size:.85em}



/* Info toggle + inline info box */
.info-toggle{cursor:pointer;font-size:.9em;opacity:.6;transition:opacity .2s;user-select:none}
.info-toggle:hover{opacity:1}
.info-box{display:none;background:rgba(108,180,238,.08);border-radius:8px;font-size:.85em;line-height:1.6;color:var(--text2);direction:rtl;padding:8px 12px;margin:4px 0 2px}
.info-box.show{display:block}

/* Setting number input (alongside range slider) */
.setting-num{width:64px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:6px;color:var(--text);text-align:center;font-size:.85em;padding:4px 2px;-moz-appearance:textfield}
.setting-num::-webkit-outer-spin-button,.setting-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.setting-num:focus{outline:none;border-color:var(--accent);background:rgba(108,180,238,.1)}

/* Tip button labels — responsive */
.tip-label-mobile{display:none}
.tip-label-desktop{display:inline}
@media(max-width:768px){.tip-label-mobile{display:inline}.tip-label-desktop{display:none}}