/* Tank Setup modal, tank selector, and volume calculator styles. */

#raTankSetupV69{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.76);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#raTankSetupV69.show{display:flex}
.ra69-modal{
  width:100vw;
  height:100vh;
  color:#edf7ff;
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:radial-gradient(circle at 64% 8%,rgba(28,75,116,.5),transparent 34%),linear-gradient(180deg,#071a2e,#020813 82%);
  box-shadow:none;
}
.ra69-header{
  position:absolute;
  left:22px;
  right:78px;
  top:max(34px,calc(env(safe-area-inset-top,0px) + 22px));
  height:64px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}
.ra69-kicker{
  color:#8facce;
  font-size:12px;
  margin-bottom:6px;
}
.ra69-header h2{
  margin:0;
  color:#fff;
  font-size:28px;
  line-height:1;
  font-weight:950;
}
.ra69-header p{
  margin:7px 0 0;
  color:#b8c9dc;
  font-size:13px;
}
.ra69-header-actions{
  display:flex;
  gap:10px;
  align-items:center;
}
.ra69-header-actions button,.ra69-close{
  height:42px;
  border-radius:9px;
  border:1px solid #2d6599;
  background:#0a2744;
  color:#fff;
  padding:0 14px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}
.ra69-header-actions .use{
  background:linear-gradient(180deg,#2ea258,#14733a);
  border-color:#4fe984;
}
.ra69-ghost{background:#071827!important}
.ra69-close{
  position:absolute;
  right:18px;
  top:max(34px,calc(env(safe-area-inset-top,0px) + 22px));
  width:44px;
  padding:0;
  border-color:#fb5876;
  background:#812033;
  font-size:20px;
}
.ra69-grid{
  position:absolute;
  left:22px;
  right:22px;
  top:max(122px,calc(env(safe-area-inset-top,0px) + 110px));
  bottom:22px;
  display:grid;
  grid-template-columns:minmax(390px,470px) minmax(0,1fr);
  gap:16px;
  min-height:0;
}
.ra69-left{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:12px;
  scrollbar-gutter:stable;
}
.ra69-panel{
  border:1px solid rgba(77,139,194,.36);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(11,35,58,.9),rgba(5,18,32,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.ra69-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(120,190,255,.12);
}
.ra69-panel-head span{
  display:block;
  color:#91aac1;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:950;
  margin-bottom:5px;
}
.ra69-panel-head h3{
  margin:0;
  color:#fff;
  font-size:17px;
  line-height:1.1;
}
.ra69-panel-head button{
  height:36px;
  border-radius:8px;
  border:1px solid #2d86c5;
  background:#0d4c82;
  color:#fff;
  font-weight:900;
  padding:0 12px;
  cursor:pointer;
}
.ra69-mode-pill,.ra69-preview-state{
  border:1px solid rgba(85,180,255,.45);
  border-radius:999px;
  background:rgba(11,73,122,.45);
  color:#dff2ff;
  padding:6px 10px;
  font-size:11px;
  font-weight:950;
  white-space:nowrap;
}
.ra69-selector{padding-bottom:14px}
.ra69-selector,.ra69-dims,.ra69-volume{flex:0 0 auto}
.ra69-field{
  margin:13px 14px 0;
  position:relative;
}
.ra69-field label,.ra69-input-grid label{
  display:block;
  color:#aebccc;
  font-size:12px;
  font-weight:800;
  margin-bottom:6px;
}
.ra69-input,.ra69-select{
  width:100%;
  height:42px;
  border-radius:8px;
  border:1px solid #244a6c;
  background:#071827;
  color:#fff;
  font-size:14px;
  padding:8px 11px;
  box-sizing:border-box;
}
.ra69-input:focus,.ra69-select:focus{
  outline:none;
  border-color:#55aaff;
  box-shadow:0 0 0 2px rgba(85,170,255,.14);
}
.ra69-dropdown{
  display:none;
  position:relative;
  max-height:230px;
  overflow:auto;
  background:#061423;
  border:1px solid #31618b;
  border-radius:10px;
  padding:6px;
  margin-top:8px;
  z-index:4;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.ra69-dropdown.show{display:block}
.ra69-option{
  border:1px solid #1d3852;
  background:#071525;
  border-radius:9px;
  padding:9px 10px;
  margin-bottom:6px;
  cursor:pointer;
}
.ra69-option:hover{
  border-color:#1f77b4;
  background:#0f3b62;
}
.ra69-option b{display:block;color:#fff;font-size:13px}
.ra69-option span{display:block;color:#aab9c8;font-size:11px;margin-top:3px}
.ra69-empty{
  color:#aab9c8;
  border:1px dashed #315473;
  border-radius:9px;
  padding:10px;
  font-size:12px;
}
.ra69-chip-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin:14px 14px 0;
}
.ra69-chip-row div{
  border:1px solid rgba(75,137,192,.35);
  background:rgba(5,18,32,.72);
  border-radius:9px;
  padding:10px;
}
.ra69-chip-row span{
  display:block;
  color:#90a8bd;
  font-size:10px;
  text-transform:uppercase;
  font-weight:950;
}
.ra69-chip-row b{
  display:block;
  color:#fff;
  font-size:13px;
  margin-top:5px;
}
.ra69-dims{overflow:hidden}
.ra69-metric-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:14px;
}
.ra69-metric{
  border:1px solid #1e3f5e;
  background:linear-gradient(180deg,rgba(12,37,61,.86),rgba(7,20,35,.9));
  border-radius:9px;
  padding:12px;
  min-height:78px;
  box-sizing:border-box;
}
.ra69-metric span{
  display:block;
  color:#a7b8c8;
  font-size:11px;
  line-height:1.25;
  margin-bottom:8px;
}
.ra69-metric b{
  color:#fff;
  font-size:14px;
  line-height:1.35;
}
.ra69-glass-control{
  border-top:1px solid rgba(120,190,255,.12);
  padding:0 14px 14px;
}
.ra69-glass-control label{
  display:block;
  color:#aebccc;
  font-size:12px;
  font-weight:800;
  margin-bottom:7px;
}
.ra69-glass-control .ra69-unit-input{
  max-width:220px;
}
.ra69-glass-note{
  margin-top:8px;
  color:#f4cc67;
  font-size:11px;
  line-height:1.35;
  font-weight:750;
}
.ra69-volume{
  display:flex;
  flex-direction:column;
  overflow:visible;
  flex:0 0 auto;
}
.ra69-input-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:14px;
}
.ra69-input-grid small,.ra69-use-adjusted small{
  display:block;
  color:#93a9be;
  font-size:11px;
  margin-top:2px;
}
.ra69-conditional-weight.hidden{
  display:none!important;
}
.ra69-unit-input{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}
.ra69-unit-input span{
  min-width:44px;
  color:#d9e8f6;
  font-weight:900;
}
.ra69-use-adjusted{
  grid-column:1 / -1;
  border:1px solid rgba(75,137,192,.35);
  border-radius:10px;
  background:rgba(5,18,32,.72);
  padding:12px;
  min-width:0;
}
.ra69-use-adjusted label{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:start;
  color:#fff;
  font-size:14px;
  margin:0 0 10px;
  line-height:1.3;
  width:100%;
  box-sizing:border-box;
}
.ra69-use-adjusted label input{
  margin-top:2px;
}
.ra69-use-adjusted b,.ra69-use-adjusted small{
  overflow-wrap:anywhere;
}
.ra69-eq{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:9px;
  padding:0 14px 14px;
}
.ra69-eq-tile{
  min-height:76px;
  border:1px solid #21486b;
  background:rgba(6,20,35,.9);
  border-radius:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px;
}
.ra69-eq-tile span{
  color:#aebccc;
  font-size:10px;
  text-transform:uppercase;
  font-weight:900;
}
.ra69-eq-tile small{
  display:block;
  color:#7f95aa;
  font-size:9px;
  margin-top:3px;
  text-transform:none;
}
.ra69-eq-tile b{
  margin-top:8px;
  color:#fff;
  font-size:18px;
}
.ra69-final{
  border-color:#31e66b;
  background:rgba(49,230,107,.08);
}
.ra69-final span,.ra69-final b{color:#55ff85!important}
.ra69-note{
  color:#aebfd1;
  font-size:12px;
  margin:0 14px 14px;
  line-height:1.4;
}
.ra69-preview{
  display:grid;
  grid-template-rows:auto minmax(410px,1fr) auto;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.ra69-tank-scene{
  position:relative;
  min-height:430px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 34%,rgba(36,123,194,.24),transparent 52%),linear-gradient(180deg,rgba(3,18,32,.1),rgba(1,7,15,.72));
}
.ra69-tank-image{
  position:absolute;
  left:50%;
  top:50%;
  width:min(96%,980px);
  max-height:94%;
  transform:translate(-50%,-50%);
  object-fit:contain;
  border-radius:10px;
  filter:drop-shadow(0 28px 44px rgba(0,0,0,.48));
  transition:opacity .14s ease;
}
.ra69-callout{
  position:absolute;
  color:#9ce4ff;
  font-weight:950;
  font-size:14px;
  text-shadow:0 0 12px rgba(0,140,255,.55);
  z-index:8;
}
#ra69LenCallout{left:17%;bottom:8%}
#ra69WidCallout{right:4%;bottom:10%}
#ra69HgtCallout{right:1.5%;top:28%}
.ra69-preview-info{
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  gap:12px;
  padding:14px;
  border-top:1px solid rgba(120,190,255,.12);
  background:rgba(1,6,12,.48);
  font-size:13px;
  line-height:1.55;
}
.ra69-legend{
  border-left:1px solid rgba(120,190,255,.14);
  padding-left:14px;
}
.ra69-legend-row{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:10px;
  align-items:center;
  margin:5px 0 12px;
}
.ra69-legend-sand{
  width:28px;
  height:28px;
  border-radius:6px;
  background:#e3c98b;
}
.ra69-legend-rock{
  width:28px;
  height:25px;
  border-radius:45%;
  background:radial-gradient(circle at 35% 35%,#a78255,#423326);
}
@media(max-width:1080px){
  .ra69-modal{overflow:auto;height:96vh}
  .ra69-header{position:relative;left:auto;right:auto;top:auto;height:auto;margin:18px 72px 0 18px;display:block}
  .ra69-header-actions{margin-top:12px}
  .ra69-grid{position:relative;left:auto;right:auto;top:auto;bottom:auto;grid-template-columns:1fr;margin:18px;height:auto}
  .ra69-left{overflow:visible;padding-right:0}
  .ra69-preview{min-height:620px}
}
@media(max-width:760px){
  .ra69-modal{width:100vw;height:100vh;border-radius:0}
  .ra69-header-actions{flex-wrap:wrap}
  .ra69-metric-grid,.ra69-input-grid,.ra69-eq,.ra69-preview-info{grid-template-columns:1fr}
  .ra69-legend{border-left:0;padding-left:0}
  .ra69-tank-scene{min-height:360px}
  .ra69-callout{font-size:12px}
}