:root{
    --sidebar-w:260px; --sidebar-bg:#0f172a; --sidebar-fg:#e2e8f0; --sidebar-fg-dim:#94a3b8;
    --brand:#2563eb; --radius:14px; --pad:14px;
  }
  body{ background:#f8fafc; }
  .app-wrap{ min-height:100vh; display:flex; }
  
  /* Sidebar */
  .sidebar{ width:var(--sidebar-w); background:linear-gradient(180deg,#0b1226 0%, var(--sidebar-bg) 100%); color:var(--sidebar-fg);
    position:sticky; top:0; height:100vh; padding:16px 12px; box-shadow:2px 0 24px rgba(2,6,23,.24); }
  .sidebar .brand{ display:flex; align-items:center; gap:.6rem; padding:8px 10px; margin-bottom:10px; font-weight:700; }
  .sidebar .brand .badge{ background:rgba(37,99,235,.15); color:#93c5fd; border:1px solid rgba(37,99,235,.35); }
  .sidebar .nav-link{ color:var(--sidebar-fg-dim); border-radius:10px; padding:.65rem .8rem; font-weight:500; display:flex; align-items:center; gap:.65rem; }
  .sidebar .nav-link:hover{ color:#fff; background:rgba(148,163,184,.12); }
  .sidebar .nav-link.active{ color:#fff; background:rgba(37,99,235,.18); border:1px solid rgba(37,99,235,.35); }
  .sidebar small.section{ color:#64748b; text-transform:uppercase; font-weight:700; letter-spacing:.08em; padding:12px 10px 6px; display:block; }
  
  /* Topbar */
  .topbar{ height:64px; background:#fff; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; padding:0 16px; position:sticky; top:0; z-index:10; }
  .topbar .search{ max-width:520px; }


.top-new-quote-btn {
  white-space: nowrap;
  border-radius: 10px;
}

@media (max-width: 576px) {
  .top-new-quote-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }

  #menuBtn {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }
}



  
  /* Main */
  .main{ flex:1; display:flex; flex-direction:column; }
  .content-wrap{ padding:20px; }
  
  /* Mobile */
  @media (max-width:992px){
    .sidebar{ position:fixed; left:-270px; transition:left .25s ease; z-index:1040; }
    .sidebar.show{ left:0; }
    .backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.45); display:none; z-index:1039; }
    .backdrop.show{ display:block; }
  }
  
  /* Widgets / Cards */
  .cardish{ background:#fff; border-radius:var(--radius); border:1px solid #eef0f3; box-shadow:0 8px 24px rgba(0,0,0,.06); }
  .kpi .label{ color:#64748b; font-weight:600; font-size:.9rem; }
  .kpi .value{ font-weight:800; font-size:1.6rem; }
  .kpi .delta.up{ color:#16a34a; }
  .kpi .delta.down{ color:#dc2626; }
  .sparkline{ width:100%; height:54px; }
  .sparkline polyline{ fill:rgba(37,99,235,.12); stroke:#2563eb; stroke-width:2; }
  .funnel .step{ background:#eef2ff; border-radius:12px; padding:10px; margin-bottom:10px; }
  .funnel .bar{ height:10px; background:#2563eb; border-radius:9999px; }
  .table-tight td,.table-tight th{ padding:.6rem .75rem; }
  
  /* Quote form styles */
  .container-narrow{ max-width:880px; }
  .section-title{ font-weight:700; font-size:1.05rem; margin-bottom:.5rem; }
  .help{ color:#6c757d; font-size:.9rem; }
  .line-item{ padding:var(--pad); border-radius:12px; border:1px solid #eef0f3; background:#fff; margin-bottom:12px; }
  .line-head{ font-weight:600; margin-bottom:6px; }
  .input-group>.form-control{ min-height:48px; }
  .suggestions-box{ position:absolute; left:0; right:0; top:100%; z-index:1050; max-height:240px; overflow:auto; box-shadow:0 10px 24px rgba(0,0,0,.08); }
  .btn{ border-radius:12px; }
  .btn-xs{ padding:.35rem .6rem; font-size:.85rem; border-radius:10px; }
  .btn-soft{ background:#f2f4f7; border-color:#eef0f3; }
  .remove-btn{ background:none; border:none; color:#dc3545; font-size:22px; line-height:1; padding:0 .5rem; margin-left:.25rem; cursor:pointer; }
  .totals{ position:sticky; bottom:0; z-index:1030; background:#fff; border-top:1px solid #e9ecef; padding:10px var(--pad); box-shadow:0 -12px 24px rgba(0,0,0,.06); }
  .grand{ font-weight:800; font-size:1.25rem; }
  .kbd{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace; }
  input,textarea,select,button{ font-size:16px !important; }
  .modal-body ul{ list-style:none; padding-left:0; margin:0; }
  .modal-body li{ padding:12px; border-bottom:1px solid #f1f2f4; cursor:pointer; }
  .modal-body li:hover{ background:#f7f9fc; }
  .price-chip{ font-weight:600; color:#0d6efd; }