@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --navy:#0a1832;
  --navy-2:#122a52;
  --navy-3:#1c3a6b;
  --blue:#2563eb;
  --blue-light:#60a5fa;
  --accent:#2563eb;
  --accent-2:#3b82f6;
  --accent-dark:#1d4ed8;
  --teal:#14b8a6;
  --bg:#eef2fb;
  --paper:#ffffff;
  --ink:#0f1b2d;
  --slate:#64748b;
  --line:#e3e8f2;
  --good:#16a34a;
  --bad:#dc2626;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;
  font-size:14px;
  line-height:1.45;
}
.mono{font-family:'JetBrains Mono', monospace;}
.display{font-family:'Sora', sans-serif;}
.hidden{display:none !important;}

.stripebar{height:4px;display:flex;}
.stripebar span{flex:1;}
.stripebar .s1{background:var(--accent);}
.stripebar .s2{background:var(--accent-2);}
.stripebar .s3{background:var(--teal);}
.stripebar .s4{background:var(--blue);}

#authScreen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(37,99,235,0.55), transparent 60%),
    radial-gradient(900px 560px at 110% 10%, rgba(37,99,235,0.35), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #0d2140 100%);
}
#authScreen::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.05) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,0.05) 25%, transparent 25%);
  background-size:64px 64px;
  opacity:0.4;
  pointer-events:none;
}
.authOuter{width:100%;max-width:410px;position:relative;z-index:1;}
.authCard{
  background:var(--paper);
  border-radius:18px;
  padding:38px 36px 32px;
  box-shadow:0 40px 80px -20px rgba(5,15,35,0.55), 0 2px 0 rgba(255,255,255,0.6) inset;
}
.authCard .eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--accent-dark);
  font-weight:600;
  display:block;
  margin-bottom:10px;
}
.authCard .brandRow{display:flex;align-items:center;gap:10px;margin-bottom:2px;}
.authCard .brandMark{width:34px;height:34px;display:block;}
.authCard h1{
  font-family:'Sora',sans-serif;
  font-weight:800;
  font-size:32px;
  letter-spacing:-0.5px;
  margin:0;
  background:linear-gradient(100deg, var(--navy) 20%, var(--blue) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.authCard .tag{
  font-family:'Inter',sans-serif;
  font-size:12px;
  letter-spacing:0.3px;
  color:var(--slate);
  margin-bottom:26px;
  display:block;
}
.authTabs{display:flex;gap:6px;margin-bottom:22px;background:#f1f4fa;border-radius:12px;padding:4px;}
.authTabs button{
  flex:1;padding:10px;border:none;background:transparent;cursor:pointer;border-radius:9px;
  font-size:12.5px;font-weight:700;color:var(--slate);
  font-family:'Inter',sans-serif;letter-spacing:0.3px;
  transition:all 0.15s ease;
}
.authTabs button.active{background:var(--navy);color:#fff;box-shadow:0 6px 14px rgba(10,24,50,0.35);}
.authField{margin-bottom:16px;}
.authField label{
  display:block;font-size:11px;letter-spacing:.3px;
  color:var(--slate);margin-bottom:6px;font-weight:600;font-family:'Inter',sans-serif;
}
.authField input{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;
  font-size:14px;font-family:'Inter',sans-serif;background:#f9fafc;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.authField input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,0.12);background:#fff;}
.authSubmit{
  width:100%;padding:13px;color:#fff;border:none;
  background:linear-gradient(100deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-radius:10px;font-weight:700;font-size:13.5px;cursor:pointer;margin-top:8px;
  font-family:'Inter',sans-serif;letter-spacing:0.3px;
  box-shadow:0 10px 22px -6px rgba(29,78,216,0.55);
  transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.authSubmit:hover{transform:translateY(-1px);box-shadow:0 14px 26px -6px rgba(29,78,216,0.6);}
.authSubmit:active{transform:translateY(0);}
.authError{color:var(--bad);font-size:12.5px;margin-top:12px;min-height:16px;font-weight:600;}
.authFoot{
  text-align:center;margin-top:18px;font-family:'Inter',sans-serif;
  font-size:11.5px;letter-spacing:0.2px;color:var(--slate);
}

.qhero{
  position:relative;
  color:#fff;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(37,99,235,0.65), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(37,99,235,0.4), transparent 55%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 60%, #0d2140 100%);
}
.qhero::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.045) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,0.045) 25%, transparent 25%);
  background-size:60px 60px;
  pointer-events:none;
}
.qbar{
  position:relative;
  padding:22px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  max-width:1180px;
  margin:0 auto;
}
.qbar-title{display:flex;align-items:center;gap:14px;}
.qbar-title .brandMark{width:38px;height:38px;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,0.25));}
.qbar-title h1{
  font-family:'Sora',sans-serif;
  font-size:26px;
  font-weight:800;
  letter-spacing:-0.5px;
  margin:0;
  line-height:1;
}
.qbar-title .titlewrap{display:flex;flex-direction:column;gap:5px;}
.qbar-title span.tagline{
  font-family:'Inter',sans-serif;
  font-size:11.5px;
  color:#a9c0e0;
  letter-spacing:0.3px;
}
.qbar-user{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#cdd8e0;}
.qbar-user .who{
  background:rgba(255,255,255,0.08);padding:8px 15px;border-radius:20px;
  border:1px solid rgba(255,255,255,0.16);
  font-family:'Inter',sans-serif;font-size:12px;backdrop-filter:blur(4px);
}
.qbar-user .who b{color:#fff;letter-spacing:0.2px;}
.qbar-user button{
  background:linear-gradient(100deg, var(--accent) 0%, var(--accent-dark) 100%);
  color:#fff;border:none;padding:8px 16px;
  border-radius:20px;font-size:11.5px;font-weight:700;cursor:pointer;
  font-family:'Inter',sans-serif;letter-spacing:0.3px;
  box-shadow:0 8px 18px -4px rgba(29,78,216,0.55);
  transition:transform 0.12s ease;
}
.qbar-user button:hover{transform:translateY(-1px);}

.qwrap{max-width:1180px;margin:0 auto;padding:26px 28px 60px;}

.qnav{
  position:relative;
  display:flex;gap:6px;
  max-width:1180px;margin:0 auto;
  padding:0 28px 18px;
}
.qnavtab{
  background:rgba(255,255,255,0.08);color:#cdd8e0;border:1px solid rgba(255,255,255,0.14);
  padding:9px 20px;border-radius:20px 20px 0 0;font-size:12.5px;font-weight:700;cursor:pointer;
  font-family:'Inter',sans-serif;letter-spacing:0.2px;
  transition:all 0.15s ease;
}
.qnavtab.active{background:var(--bg);color:var(--navy);border-color:var(--bg);}
.qnavtab:not(.active):hover{background:rgba(255,255,255,0.14);color:#fff;}

.qscreen.hidden{display:none !important;}

.qpanel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 26px;
  margin-bottom:20px;
  position:relative;
  box-shadow:0 1px 2px rgba(15,27,45,0.04), 0 12px 28px -18px rgba(15,27,45,0.18);
}
.qpanel h2{
  font-family:'Sora',sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:-0.1px;
  color:var(--navy);
  margin:0 0 18px 0;
  display:flex;align-items:center;gap:11px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.qpanel h2 .num{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(120deg, var(--accent), var(--accent-dark));
  padding:3px 8px;border-radius:7px;letter-spacing:0.3px;
  box-shadow:0 4px 10px -3px rgba(29,78,216,0.5);
}
.qpanel h2 .rescount{
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;color:var(--slate);
  font-weight:500;
  border-bottom:none;padding-bottom:0;
}

.qupload{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.qupload label.filebtn{
  background:linear-gradient(115deg, var(--navy) 0%, var(--navy-3) 100%);
  color:#fff;padding:11px 20px;border-radius:11px;
  font-size:12.5px;font-weight:700;cursor:pointer;border:none;
  font-family:'Inter',sans-serif;letter-spacing:0.2px;
  box-shadow:0 10px 22px -8px rgba(10,24,50,0.55);
  transition:transform 0.12s ease;
}
.qupload label.filebtn:hover{transform:translateY(-1px);}
.qupload input[type=file]{display:none;}
.qupload .qstatus{font-size:13px;color:var(--slate);}
.qupload .qstatus.ok{color:var(--good);font-weight:600;}
.qupload .qstatus.err{color:var(--bad);font-weight:600;}

.qsheets{margin-top:16px;font-size:12.5px;color:var(--slate);}
.qsheets .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 4px;border-top:1px solid var(--line);flex-wrap:wrap;}
.qsheets .row span.f{color:var(--ink);font-weight:700;font-family:'Inter',sans-serif;font-size:12.5px;}
.qsheets .row span.rowmeta{color:var(--slate);flex:1;min-width:200px;}
.qsheets .row .rowactions{display:flex;gap:8px;flex-shrink:0;}
.dlbtn{
  background:#eef2fb;color:var(--blue);border:1px solid #d7e2fa;padding:6px 13px;
  border-radius:8px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
  transition:all 0.12s ease;
}
.dlbtn:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.delbtn{
  background:#fdeeee;color:var(--bad);border:1px solid #f6d2d2;padding:6px 13px;
  border-radius:8px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
  transition:all 0.12s ease;
}
.delbtn:hover{background:var(--bad);color:#fff;border-color:var(--bad);}

.qportpair{
  display:flex;align-items:flex-end;gap:0;margin-bottom:18px;
  background:linear-gradient(120deg, #f4f7fd 0%, #eef2fb 100%);
  border:1px solid var(--line);border-radius:14px;padding:16px;flex-wrap:wrap;
}
.qportpair .qfield{flex:1;min-width:180px;margin-bottom:0;}
.qportpair-arrow{
  font-size:20px;color:var(--accent);font-weight:700;padding:0 14px 11px;
  display:flex;align-items:flex-end;
}
.qsearchbtn{
  background:linear-gradient(100deg, var(--accent) 0%, var(--accent-dark) 100%);
  color:#fff;border:none;padding:11px 26px;border-radius:10px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
  box-shadow:0 10px 20px -6px rgba(29,78,216,0.55);
  margin-left:14px;
  transition:transform 0.12s ease;
  align-self:flex-end;
}
.qsearchbtn:hover{transform:translateY(-1px);}

.qfilters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;}
.qfilters-clear{display:flex;justify-content:flex-end;margin-top:12px;}
.qclearfilters{
  background:none;border:none;color:var(--slate);text-decoration:underline;cursor:pointer;
  font-size:12px;padding:0;font-family:'Inter',sans-serif;font-weight:600;
}
.qclearfilters:hover{color:var(--accent-dark);}

.qfield label{
  display:block;font-size:11px;letter-spacing:.3px;
  color:var(--slate);margin-bottom:6px;font-weight:600;font-family:'Inter',sans-serif;
}
.qfield input, .qfield select{
  width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:10px;
  font-size:13.5px;font-family:'Inter',sans-serif;background:#fbfcfe;color:var(--ink);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.qfield input:focus, .qfield select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,0.12);background:#fff;}

.qempty{padding:56px 20px;text-align:center;color:var(--slate);}
.qempty b{color:var(--navy);font-family:'Sora',sans-serif;letter-spacing:-0.1px;font-size:15px;}
.qfoot-note{margin-top:16px;font-size:11.5px;color:var(--slate);}
.qshared-note{
  display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--slate);
  background:#eafaf1;border:1px solid #cdeed9;padding:6px 12px;border-radius:20px;
  font-family:'Inter',sans-serif;letter-spacing:0.2px;font-weight:600;
}
.qshared-note::before{content:'●';color:var(--good);font-size:8px;}
.clearlink{background:none;border:none;color:var(--slate);text-decoration:underline;cursor:pointer;font-size:12px;padding:0;font-family:'Inter',sans-serif;}
.clearlink:hover{color:var(--bad);}

.rgrid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
}
.rcard{
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 22px 18px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:0 1px 2px rgba(15,27,45,0.03), 0 16px 34px -22px rgba(15,27,45,0.35);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.rcard:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(15,27,45,0.05), 0 22px 42px -20px rgba(15,27,45,0.4);
}
.rcard-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.rbadge{
  font-family:'Inter',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:0.5px;
  text-transform:uppercase;color:#fff;
  background:linear-gradient(115deg, var(--accent) 0%, var(--accent-dark) 100%);
  padding:5px 12px;border-radius:20px;
  box-shadow:0 6px 14px -4px rgba(29,78,216,0.55);
}
.rbadge.transit{background:linear-gradient(115deg, var(--navy-3) 0%, var(--navy) 100%);box-shadow:0 6px 14px -4px rgba(10,24,50,0.5);}
.rroute{display:flex;align-items:center;gap:12px;font-family:'Sora',sans-serif;font-size:15px;flex:1;justify-content:flex-end;text-align:right;}
.rroute .rport{font-weight:700;color:var(--navy);}
.rroute .rport.dest{font-weight:800;color:var(--blue);}
.rroute .rarrow{
  color:var(--accent);font-weight:700;flex:0 1 70px;border-top:2px dashed #bfdbfe;height:1px;min-width:32px;max-width:80px;
  position:relative;
}
.rroute .rarrow::after{
  content:'▸';position:absolute;right:-4px;top:-9px;color:var(--accent);font-size:14px;
}

.rcard-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px 18px;
  padding:14px 16px;
  background:#f6f8fd;
  border-radius:12px;
}
.rcell label{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--slate);font-family:'Inter',sans-serif;margin-bottom:3px;font-weight:600;
}
.rcell span{font-size:13px;color:var(--ink);font-weight:700;}
.rcell span.empty{color:#b8c0cf;font-weight:400;}

.rcard-prices{display:flex;gap:12px;flex-wrap:wrap;padding:2px 0;}
.rcard-prices-note{font-size:10.5px;color:var(--teal);font-style:italic;margin-top:-6px;}
.rprice{
  display:flex;flex-direction:column;
  background:linear-gradient(155deg, #eef4ff 0%, #dbe8fe 100%);
  border:1px solid #bfdbfe;border-radius:12px;padding:9px 16px;flex:1;min-width:110px;
}
.rprice .plabel{font-family:'Inter',sans-serif;font-size:10px;color:var(--accent-dark);text-transform:uppercase;letter-spacing:0.5px;font-weight:700;}
.rprice .pval{font-family:'Sora',sans-serif;font-size:19px;font-weight:800;color:var(--navy);}
.rprice .pval .cur{font-size:11.5px;color:var(--slate);font-weight:500;margin-right:2px;}

.rcard-meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--slate);display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;}
.rcard-meta .rfile{color:var(--accent-dark);font-weight:700;}
.rcard-meta .rvalid{padding:2px 9px;border-radius:20px;font-weight:700;letter-spacing:0.3px;}
.rcard-meta .rvalid.expired{color:var(--bad);background:#fde8e8;}
.rcard-meta .rvalid.active{color:var(--good);background:#e3f8ea;}

.rcard-note{
  font-size:11.5px;color:#2952a3;background:#eaf1fd;border:1px solid #d3e0f2;
  padding:9px 12px;border-radius:10px;line-height:1.45;
}

/* Corner "Quote" button — floats over the top-right edge of the card */
.rquote-corner{
  position:absolute;
  top:-15px;
  right:20px;
  z-index:2;
  display:flex;align-items:center;gap:7px;
  background:linear-gradient(120deg, var(--blue) 0%, #1d4ed8 100%);
  color:#fff;border:none;
  padding:10px 16px 10px 18px;
  border-radius:13px;
  font-size:12px;font-weight:800;letter-spacing:0.4px;text-transform:uppercase;
  cursor:pointer;font-family:'Inter',sans-serif;
  box-shadow:0 10px 24px -8px rgba(37,99,235,0.65), 0 0 0 4px #fbfcff;
  transition:transform 0.16s ease, box-shadow 0.16s ease;
}
.rquote-corner svg{width:13px;height:13px;transition:transform 0.16s ease;}
.rquote-corner:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 30px -8px rgba(37,99,235,0.75), 0 0 0 4px #fbfcff;}
.rquote-corner:hover svg{transform:translateX(2px);}
.rquote-corner:active{transform:translateY(0) scale(0.98);}

/* Centered, advanced "Show Charges" toggle */
.rcard-actions{display:flex;justify-content:center;margin-top:2px;}
.rexpand-btn{
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(180deg, #ffffff 0%, #f3f6fc 100%);
  color:var(--navy);border:1.5px solid #dbe3f2;
  padding:10px 26px;border-radius:24px;
  font-size:12.5px;font-weight:700;letter-spacing:0.3px;cursor:pointer;
  font-family:'Inter',sans-serif;
  box-shadow:0 6px 16px -8px rgba(15,27,45,0.25);
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.rexpand-btn-icon{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(115deg, var(--navy-3), var(--navy));
  color:#fff;font-size:12px;line-height:1;
  transition:transform 0.2s ease, background 0.2s ease;
}
.rexpand-btn:hover{
  transform:translateY(-1px);
  border-color:#c3d2ec;
  box-shadow:0 10px 22px -8px rgba(15,27,45,0.3);
}
.rexpand-btn.open{
  background:linear-gradient(115deg, var(--teal), #0d9488);
  border-color:transparent;color:#fff;
}
.rexpand-btn.open .rexpand-btn-icon{
  background:rgba(255,255,255,0.25);
  transform:rotate(180deg);
}

.rcharges{border-top:1px dashed var(--line);padding-top:12px;font-size:12.5px;}
.rcharges.hidden{display:none;}
.rcharges .rc-loading{color:var(--slate);font-style:italic;font-size:12px;}
.rcharges .rc-empty{color:var(--slate);font-size:12px;}
.rc-group{margin-bottom:12px;}
.rc-group h4{
  margin:0 0 8px;font-family:'Inter',sans-serif;font-size:10.5px;text-transform:uppercase;
  letter-spacing:0.6px;color:var(--navy);font-weight:700;border-bottom:1px solid var(--line);padding-bottom:6px;
}
table.rc-table{width:100%;border-collapse:collapse;font-size:12px;}
table.rc-table thead th{
  text-align:left;font-family:'Inter',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:0.4px;
  color:var(--slate);font-weight:700;padding:4px 8px;border-bottom:1.5px solid var(--line);
}
table.rc-table thead th:nth-child(4), table.rc-table thead th:nth-child(5), table.rc-table thead th:nth-child(6){text-align:right;}
table.rc-table td{padding:6px 8px;border-top:1px solid #eef1f8;}
table.rc-table td.code{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--navy);white-space:nowrap;}
table.rc-table td.desc{color:var(--ink);}
table.rc-table td.cur{color:var(--slate);}
table.rc-table td.amt{text-align:right;font-family:'JetBrains Mono',monospace;font-weight:600;white-space:nowrap;}

.rc-group-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--slate);font-size:10.5px;}

table.rc-table-editable thead th:nth-child(4),
table.rc-table-editable thead th:nth-child(5),
table.rc-table-editable thead th:nth-child(6){text-align:right;}
table.rc-table-editable td.sel{width:30px;text-align:center;}
table.rc-table-editable td.act{width:58px;text-align:center;white-space:nowrap;}
table.rc-table-editable .rc-include{width:15px;height:15px;cursor:pointer;}
table.rc-table-editable td.amt{min-width:70px;}
.rc-amt-text{font-family:'JetBrains Mono',monospace;font-weight:600;}
table.rc-table-editable .rc-edit{
  width:66px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
  border:1px solid var(--blue);background:#fff;border-radius:6px;padding:3px 6px;color:var(--ink);
  box-shadow:0 0 0 3px rgba(37,99,235,0.12);
}
table.rc-table-editable .rc-edit:focus{outline:none;}
.rc-pencil, .rc-delete{
  background:none;border:none;color:var(--slate);cursor:pointer;font-size:12px;line-height:1;
  width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
}
.rc-pencil:hover{background:#eef2fb;color:var(--blue);}
.rc-pencil-active{background:var(--teal);color:#fff;}
.rc-pencil-active:hover{background:var(--teal);color:#fff;}
.rc-delete:hover{background:#fde8e8;color:var(--bad);}
tr.rc-row-excluded{opacity:0.4;}
tr.rc-row-excluded .rc-edit, tr.rc-row-excluded .rc-amt-text{text-decoration:line-through;}

@media (max-width: 640px){
  .qportpair{flex-direction:column;align-items:stretch;}
  .qportpair-arrow{display:none;}
  .qsearchbtn{margin-left:0;width:100%;}
}

/* ============ EMAIL TEMPLATE PANEL ============ */
.qhint{font-size:12.5px;color:var(--slate);margin:0 0 14px;line-height:1.5;}
.qfield textarea{
  width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:10px;
  font-size:13px;font-family:'JetBrains Mono',monospace;background:#fbfcfe;color:var(--ink);
  resize:vertical;line-height:1.5;
}
.qfield textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,0.12);background:#fff;}
.qtpl-placeholders{display:flex;flex-wrap:wrap;gap:7px;}
.qtpl-placeholders span{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--blue);
  background:#eef2fb;border:1px solid #d7e2fa;padding:3px 9px;border-radius:14px;
}

/* ============ QUOTATION SCREEN ============ */
.qquote-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.qbackbtn{
  background:none;border:1.5px solid var(--line);color:var(--navy);padding:8px 16px;border-radius:10px;
  font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
}
.qbackbtn:hover{border-color:var(--blue);color:var(--blue);}
.qquote-title{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;color:var(--navy);margin:0;}
.qquote-sub{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--slate);margin-left:auto;}

.qquote-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 20px;
  padding:14px 16px;background:#f6f8fd;border-radius:12px;
}
.qquote-grid-edit{background:none;padding:0;}
.qquote-grid-edit .qfield{margin-bottom:0;}

.qcontainer-row{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px;}
.qcontainer-row .qcontainer-picker{margin-bottom:0;flex:1;}
.qquantity-field{width:110px;flex-shrink:0;}
.qquantity-field input{text-align:center;font-family:'Sora',sans-serif;font-weight:800;font-size:14px;}
.qcontainer-picker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.qcontainer-opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:9px 16px;
  cursor:pointer;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:var(--slate);
  transition:all 0.12s ease;
}
.qcontainer-opt span{font-family:'Sora',sans-serif;font-size:14px;font-weight:800;color:var(--navy);}
.qcontainer-opt.active{border-color:var(--blue);background:#eef2fb;color:var(--blue);}
.qcontainer-opt.active span{color:var(--blue);}

.qmargin-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:16px;align-items:end;}
.qsurcharge-input{display:flex;gap:8px;}
.qsurcharge-input select{width:70px;flex-shrink:0;}
.qtotal-box{
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(155deg, #eef4ff 0%, #dbe8fe 100%);
  border:1px solid #bfdbfe;border-radius:12px;padding:10px 18px;
}
.qtotal-label{font-family:'Inter',sans-serif;font-size:10.5px;color:var(--accent-dark);text-transform:uppercase;letter-spacing:0.5px;font-weight:700;}
.qtotal-value{font-family:'Sora',sans-serif;font-size:24px;font-weight:800;color:var(--navy);}

.qterms{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--slate);margin-top:14px;}
.qterms input{width:16px;height:16px;}
.qterms a{color:var(--blue);text-decoration:underline;}

.qquote-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.qquote-actions-btns{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto;}
.qbtn-secondary{
  background:#fff;border:1.5px solid var(--line);color:var(--slate);padding:11px 20px;border-radius:11px;
  font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
}
.qbtn-secondary:hover{border-color:var(--bad);color:var(--bad);}
.qbtn-download{
  background:linear-gradient(115deg, var(--navy-3) 0%, var(--navy) 100%);color:#fff;border:none;
  padding:11px 22px;border-radius:11px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
  box-shadow:0 10px 20px -8px rgba(10,24,50,0.5);
}
.qbtn-send{
  background:linear-gradient(100deg, var(--blue) 0%, #1d4ed8 100%);color:#fff;border:none;
  padding:11px 22px;border-radius:11px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
  box-shadow:0 10px 20px -8px rgba(37,99,235,0.55);
}
.qbtn-download:hover, .qbtn-send:hover{transform:translateY(-1px);}
.qbtn-download:disabled, .qbtn-send:disabled{
  opacity:0.45;cursor:not-allowed;box-shadow:none;transform:none;
}
.qbtn-download:disabled:hover, .qbtn-send:disabled:hover{transform:none;}

.qcustomer-save-row{display:flex;align-items:center;gap:14px;margin-top:14px;}
.qbtn-save-customer{
  background:#fff;border:1.5px solid var(--blue);color:var(--blue);padding:9px 18px;border-radius:10px;
  font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
}
.qbtn-save-customer:hover{background:var(--blue);color:#fff;}

.qgate-hint{
  width:100%;font-size:12px;color:var(--accent-dark);background:#eef4ff;border:1px solid #bfdbfe;
  padding:8px 12px;border-radius:8px;margin-top:4px;
}
.qgate-hint.hidden{display:none;}

/* ---------------- Email preview / overview modal ---------------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,24,50,0.55);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal-box{
  background:#fff;border-radius:16px;width:100%;max-width:640px;max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 30px 60px -15px rgba(10,24,50,0.4);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);
}
.modal-head h2{margin:0;font-family:'Sora',sans-serif;font-size:16px;color:var(--navy);}
.modal-close{
  background:none;border:none;font-size:22px;line-height:1;color:var(--slate);cursor:pointer;padding:4px;
}
.modal-close:hover{color:var(--bad);}
.modal-body{padding:20px 22px;overflow-y:auto;flex:1;}
.modal-foot{
  padding:14px 22px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

.qpreview-field{margin-bottom:14px;}
.qpreview-field label{
  display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
  color:var(--slate);margin-bottom:4px;
}
.qpreview-field .val{font-size:13.5px;color:var(--ink);font-weight:600;}
.qpreview-html{
  border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#fbfcff;
  font-size:13px;
}
.qpreview-html table{margin-bottom:4px;}