.export-flat .rx-action-icons {
  display: none !important;
}

.refs-page {
  --radius: 14px;
  --rx-icon-radius: 10px;

  
  --bg:        var(--card);
  --bg-subtle: color-mix(in srgb, var(--card) 90%, var(--bg) 10%);
  --border:    var(--line);
  --muted:     var(--muted);
  --fg:        var(--fg);
  --accent:    var(--accent);
  --rx-icon-bg:   var(--rx-icon-bg, #fff);
  --rx-icon-fg:   var(--rx-icon-fg, var(--fg));

  --shadow: 0 2px 10px color-mix(in srgb, var(--fg) 8%, transparent);
}


@media (min-width: 950px) {
.reagents-toolbar {
  column-gap: clamp(11px, calc(10.684vw - 60.71px), 75px);
}
.reagent-analyze-content .searchbar-wrap .searchbar-row {
  padding: 0px 20px;
}
}

.analyze-scroll-root {
  padding: 0px 20px 80px;

  overflow-y: auto;
  
  


  min-height: 0;          
  flex: 1 1 auto;
}



.reagents-toolbar { 
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; 
  padding:5px 20px 15px;
}



@media (min-width: 1000px) and (max-width:1270px) {
.reagents-toolbar {
  padding-inline: 20px
}
}


.reagents-toolbar .rg-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
@media (min-width: 480px) {
  .reagents-toolbar .rg-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.reagents-toolbar .rg-btn {
  width: 100%;
  aspect-ratio: 1/1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  margin: 0;
}



.reagent-icon {
  --ring: #cfd1d4;
  --fill: #fff;
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid var(--ring);
  background: var(--fill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 6px 6px 0px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  font-weight: 700; letter-spacing: .2px;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.20);
}

@media (min-width: 671px) and (max-width:1305px) {

.reagents-toolbar {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-gap: 0px 15px;
  gap: 0px 15px; 
}

.reagents-toolbar:not(.reagents-toolbar--hscroll) .reagent-icon {
  box-shadow: 0 3px 6px rgba(0,0,0,.05);
  width: 100%;
}
}
@media (min-width: 523px) and (max-width:670px) {

.reagents-toolbar .reagent-icon {
  width: 11.7cqw;
  height: 56px;
  box-shadow: 0 3px 6px rgba(0,0,0,.05);
}
}

.reagents-toolbar .ui-matte::before {
  
background: linear-gradient(rgba(255, 255, 255, 0.09) 5.04%, rgba(255, 255, 255, 0.11) 30.25%, rgba(255, 255, 255, 0.06) 79.41%, rgba(0, 0, 0, 0.06))
}



@media (orientation: landscape) and (max-width: 1000px) {
  .reagents-toolbar--hscroll .reagent-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    margin: 0px;
  }

.reagents-toolbar--hscroll .reagent-icon.reagent-icon--trash {
  align-self: center;
}

  .ui-matte {
    border-radius: 7px;
  }
  .ui-matte:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.5);
  }
}


.reagent-icon:hover  { box-shadow: 0 2px 10px color-mix(in srgb, var(--fg) 12%, transparent); }
.reagent-icon:active { transform: translateY(1px); }
.reagent-icon.is-active {
  --ring: #bdbdbd;
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 0;
}
.reagent-icon.is-disabled { opacity: .45; cursor: not-allowed; }

.reagent-icon__bg { position:absolute; inset:0; border-radius: inherit; }
.reagent-icon__code {
  position: relative;
  font-weight: 800; font-size: 14px; letter-spacing: .2px;
  color: var(--fg);
  
}


.reagents-toolbar .reagent-icon.u-color-fill { background: var(--rx-icon-bg); }
.reagents-toolbar .reagent-icon.reagent-icon--all {
  background: var(--rx-all-gradient);
}



.reagent-icon__swatch {
  position: absolute; right: 3px; bottom: 3px;
  display: flex; gap: 2px;
}
.reagent-icon__swatch .sw {
  width: 7px; height: 7px; border-radius: 2px;
  border: 1px solid rgba(0,0,0,.1); background: #eee; background: var(--c, #eee);
}


.reagents-toolbar .reagent-icon--trash {
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
}
.reagents-toolbar .reagent-icon--trash:hover { transform: translateY(-1px); }
.reagents-toolbar .reagent-icon--trash ons-icon { font-size:20px; opacity:.85; }


.reagents-toolbar .reagent-icon.reagent-icon--colored .reagent-icon__code {
  
  
}



.rx-gradient {
  display: block;
  width: 100%;
  height: 25px;

  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);

  background-size: 100% 100%;
}
.rx-colors {
  width: 100%;
}

.subs-list {
  padding-bottom: 1em;
}

.subs-list { display:grid; grid-template-columns:1fr; grid-gap:12px; gap:12px; }
@media (min-width:1100px){ .subs-list { grid-template-columns: 1fr 1fr; } }





@media (orientation: landscape) and (pointer: coarse) and (max-width:1100px){

  .subs-list { grid-template-columns: repeat(3, 1fr); 
                  gap:5px ;

                }
  
    .sub-card .sub-head {
      padding: 14px 16px 0px;
    }

    .sub-card .sub-head .rx-action-btn.ui-matte {
      border-radius: 5px;
    }
    .sub-card .rx-left {
      min-width: 35px!important; 
    }
    
    .sub-card .sub-meta-main {
      padding-top: 5px;
    }
    
    .sub-card .reagent-icon {
      width: 28px;
      height: 28px;
      border-radius: 6px;
    }
    .sub-card .rx-swatch {
      width: 22px;
      height: 12px;
      border-radius: 4px;
    }

  .sub-card.export-flat {zoom:1}
  .rx-left {min-width: 80px!important;}
  .rx-reag-name {display: none!important;}
  .rxmodal.rxmodal--matte.is-entering { zoom: .7}
  
  .reagent-analyze-content .reagent-icon__code { font-size:max(10px, 1.3cqw)}
}


@media (min-width:1650px){
  .subs-list { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width:2200px){
  .subs-list { grid-template-columns: repeat(4, 1fr); }
}

.subs-empty { padding:12px; color: var(--muted); }


.sub-card {
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--fg) 7%, transparent);
  overflow: hidden;
  height: fit-content;
}
.sub-card.export-flat {
  box-shadow: none !important;
  border-radius: 0px;
}



@media (max-width:450px){
  

    .sub-card .rx-left {
      min-width: 160px!important; 
    }
    .sub-card .sub-title-main, .sub-card .rx-reag-name {
      font-size: 18px;
    }
    .sub-card .sub-meta-main, .sub-card .rx-reag-hint, .sub-card .rx-hint, .rx-row.rx-row--empty {
      font-size: 10px!important;
    }
    .sub-head .rx-action-btn.ui-matte {
      border-radius: 6px!important;
    }
    .sub-card .reagent-icon {
      width: 44px;
      height: 44px;
      border-radius: 7px;
    }
    .sub-card .rx-swatch {
      width: 34px;
      height: 10px;
      border-radius: 6px;
    }

.subs-list.subs-list--normal .sub-card .rx-swatch {
  height: 20px;
}


}


@media (max-width:350px){
  
    .sub-card .rx-left {
      min-width: 140px!important; 
    }
    .sub-card .sub-title-main, .sub-card .rx-reag-name {
      font-size: 16px;
    }
    .sub-card .sub-meta-main, .sub-card .rx-reag-hint, .sub-card .rx-hint, .rx-row.rx-row--empty {
      font-size: 9px!important;
    }
    .sub-card .reagent-icon {
      width: 38px;
      height: 38px;
      border-radius: 6px;
    }
    .sub-card .rx-swatch {
      width: 30px;
      height: 17px;
      border-radius: 5px;
    }
}




.sub-head { display:flex; align-items:center; justify-content:space-between; gap:12px; 
  padding: 14px 16px 0px;
  min-width: 0;
}
.sub-title { 
  text-wrap: balance; 
  font-weight: 800; 
  font-size: 18px; 
  letter-spacing: .2px; 
  color: var(--fg); 
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}
.sub-meta  { display:inline-flex; gap:8px; flex: 0 0 auto; align-self: start; }




.sub-title-main {
  font-weight: 800; 
  font-size: 18px;
  color: var(--fg);
  display: block;
  width: 100%;
  max-width: 90cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 15px;
  

}

.sub-meta-main {
  display: block;
  width: 100%;
  max-width: 90cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--muted);
  
}



.sub-meta .chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.sub-meta .chip {
  display:inline-flex; align-items:center; height:22px; padding:3px 10px;
  font-size:12px; font-weight:700; border-radius:9px;
  border:1px solid var(--border);
  background: var(--rx-icon-bg);
  color: var(--rx-icon-fg);
}
.sub-meta button.chip {
  font-family: inherit;
  line-height: normal;
  cursor: pointer;
}
.sub-meta .chip-muted { color: var(--muted); }
.sub-meta .export-score { cursor: pointer; }

.sub-head .rx-action-btn.ui-matte {
  border-radius: 5px;
  
  
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: none;
  box-shadow: initial;
  display: flex;
  padding: 1px 2px 0px;
}

.sub-head .rx-action-btn.ui-matte .mdi {
  padding: 1px 5px;
  font-size: 23px;
    line-height: 1.25!important;

}



.sub-body { padding: 8px 12px 4px; }
.rx-row {
  display:grid; grid-template-columns: 240px 1fr auto; grid-gap:12px; gap:12px; align-items:center;
  padding: 8px 4px; border-top: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
.sub-body .rx-row:first-child { border-top: 0; }

.rx-left { display:flex; align-items:center; gap:10px; }
.rx-reag-name { font-weight:700; letter-spacing:.1px; color: var(--fg); }

.rx-hint, .rx-row.rx-row--empty { font-size:12px; color: var(--muted); text-align:right; white-space:nowrap; }


.rx-colors { display:flex; flex-wrap:wrap; gap:8px; }
.rx-swatch {
  position:relative; width:44px; height:26px; border-radius:5px;
  
  border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  
  
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--fg) 10%, transparent);
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--bg);
}

.theme-dark .rx-swatch {
  border: none;
  box-shadow: none;
  box-shadow: initial;
}


.rx-swatch--blank { background: var(--bg); border-color: var(--border); }
.rx-swatch-label {
  font-size:11px; font-weight:700;
  color: color-mix(in srgb, var(--bg) 10%, var(--fg) 90%);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 60%, transparent);
  mix-blend-mode: luminosity;
}


.sw[data-name*="black"], .dot[data-name*="black"]  { --c:#222; }
.sw[data-name*="blue"],  .dot[data-name*="blue"]   { --c:#6ea8ff; }
.sw[data-name*="green"], .dot[data-name*="green"]  { --c:#87d37c; }
.sw[data-name*="yellow"],.dot[data-name*="yellow"] { --c:#ffe066; }
.sw[data-name*="orange"],.dot[data-name*="orange"] { --c:#ffa94d; }
.sw[data-name*="brown"], .dot[data-name*="brown"]  { --c:#b08968; }
.sw[data-name*="red"],   .dot[data-name*="red"]    { --c:#ff6b6b; }
.sw[data-name*="pink"],  .dot[data-name*="pink"]   { --c:#f783ac; }
.sw[data-name*="purple"],.dot[data-name*="purple"] { --c:#b197fc; }



.rx-action-icons .mdi {
  font-size: 15px!important;
  opacity: .72;
}

.rx-action-icons {
  display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;

width: 100%;
margin-top: 15px;
border-radius: 0px;
border-top: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
background: color-mix(in srgb, var(--card) 88%, transparent);
}

.rx-action-icons button > * {
  line-height: 1.52!important;
}

.rx-action-icons button {
  border-radius: 0px;
  padding: 5px 0px;
}

.rx-action-icons .ui-matte::before{
  background: none;
}

.rx-action-icons .ui-matte{
  border: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  box-shadow: none;
  background: transparent;
}
.rx-action-icons .ui-matte:first-child { border-inline-start: 0; }
.rx-action-icons .ui-matte:hover{
  box-shadow: none;
  scale: 1;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}

.theme-dark .rx-action-icons .ui-matte{
  border: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
}
.theme-dark .rx-action-icons .ui-matte:first-child { border-inline-start: 0; }
.theme-dark .rx-action-icons .ui-matte:hover{
  box-shadow: none;
  scale: 1;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}

.reactions-list.modern { display: grid; grid-template-columns: 1fr; grid-gap: 10px; gap: 10px; }
.reactions-list .hint{ font-size: 13px; color: var(--muted); margin-bottom: 6px; }

.rx-card{
  border:1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.rx-card .head{
  width:100%; text-align:left;
  display:grid; grid-template-columns: 1fr auto; grid-gap:10px; gap:10px;
  border:0; background: var(--bg);
  padding:12px 14px; cursor:pointer;
}
.rx-card .title{ display:flex; align-items:center; gap:10px; }
.rx-card .name{ font-weight:700; font-size:15px; }
.rx-card .score{
  font-size:12px; line-height:1; padding:4px 8px;
  border-radius:999px; border:1px solid #ddd; color:#444;
}
.rx-card .score.pos{ background:#f1fbf3; border-color:#bfe6c6; color:#1c6c2e;}
.rx-card .score.neg{ background:#fff3f3; border-color:#f0bcbc; color:#8d1a1a;}
.rx-card .score.neu{ background:#fafafa; }

.rx-card .chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.rx-card .chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #e1e1e1; background:#fff; border-radius: var(--rx-icon-radius);
  padding:4px 8px; font-size:12px;
}
.chip__abbr{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:6px; border:1px solid #d3d3d3; background:#fafafa;
  font-weight:700; text-transform:lowercase;
}
.chip__swatch{ display:inline-flex; gap:3px; }
.chip__swatch .sw{
  width:10px; height:10px; border-radius:3px; border:1px solid rgba(0,0,0,.1);
  background: #eee;
  background: var(--c, #eee);
}


.rx-card .caret{
  width:16px; height:16px; align-self:center; justify-self:end;
  border: solid color-mix(in srgb, var(--fg) 55%, transparent); border-width:0 2px 2px 0;
  transform: rotate(45deg); transition: transform .2s ease;
}
.rx-card.open .caret{ transform: rotate(-135deg); }

.collapse{ overflow:hidden; transition: height .28s ease; }
.collapse__in{ padding: 2px 14px 12px; background: var(--bg); }


.details{ display:grid; grid-gap:10px; gap:10px; }
.reg-card{
  border:1px solid #eee; border-radius:10px; background: var(--bg-subtle);
  padding:10px;
}
.reg-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.reg-title{ font-weight:700; font-size:13px; }
.reg-hint{ font-size:12px; color:var(--muted); }

.reg-lines{ display:grid; grid-gap:6px; gap:6px; }
.line{ display:grid; grid-template-columns: 1fr auto; grid-gap:8px; gap:8px; align-items:center; }
.line-bar .bar{
  background: linear-gradient(180deg, #fff, #f5f5f5);
  border:1px solid #e4e4e4; border-radius:8px; height:20px; position:relative;
}
.bar .dots{ position:absolute; inset:0; display:flex; gap:6px; align-items:center; padding:0 8px; }
.bar .dot{ width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.1); background:#eaeaea; background:var(--c,#eaeaea); }

.line-txt{ display:flex; gap:8px; align-items:center; }
.muted{ color:var(--muted); font-size:12px; }
.tag{
  font-size:11px; padding:3px 7px; border-radius:999px; border:1px solid #ddd; background:#fff;
}
.tag--ok { background:#f1fbf3; border-color:#bfe6c6; color:#1c6c2e;}
.tag--no { background:#fff3f3; border-color:#f0bcbc; color:#8d1a1a;}


.rxmodal__overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(7px) saturate(160%);
  -webkit-backdrop-filter: blur(7px) saturate(160%);
  z-index:9999;
  animation: rxFadeIn .15s ease;
}


@media (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .rxmodal__overlay {
    align-items: flex-end;
    margin-bottom: 12px;
  }
}

  .rxmodal.rxmodal--matte.is-entering { cursor: default;}
.rxmodal__overlay.is-entering {cursor: pointer;}
.rxmodal__overlay.is-leaving { opacity:0; }

.rxmodal{
  width:min(752px,92vw); max-height: min(88vh, 760px);
  border-radius:16px; background: var(--bg);
  border:1px solid var(--border);
  box-shadow: 0 14px 50px color-mix(in srgb, var(--fg) 35%, transparent);
  padding:18px; display:flex; flex-direction:column;
}


.theme-dark .rxmodal {
  background: color-mix(in srgb, var(--bg) 92%, #000);
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 14px 50px color-mix(in srgb, #000 65%, transparent);
}

.rxmodal__overlay.is-entering { animation: rxFadeIn .18s ease forwards; }
.rxmodal.is-entering           { animation: rxRiseIn .20s cubic-bezier(.2,.8,.2,1) forwards; }
.rxmodal__overlay.is-leaving  { animation: rxFadeOut .18s ease forwards; }
.rxmodal.is-leaving           { animation: rxDropOut .18s cubic-bezier(.4,.0,1,1) forwards; }

@keyframes rxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rxFadeOut{ from { opacity: 1; } to { opacity: 0; } }
@keyframes rxRiseIn { from { opacity:0; transform: translateY(8px) scale(.98);} to { opacity:1; transform: translateY(0) scale(1);} }
@keyframes rxDropOut{ from { opacity:1; transform: translateY(0) scale(1);} to { opacity:0; transform: translateY(6px) scale(.985);} }

.rxmodal__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 18px 0px; }
.rxmodal__title { font-weight:800; font-size:1.5em; color: var(--fg); margin: 0; }
.rxmodal__body { overflow:auto; padding:10px 18px 16px 18px; }

.rxmodal__selbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 2px; }
.rxmodal__selchips{ display:flex; align-items:center; gap:8px; min-height:30px; flex:1 1; }

.selchip {
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:44px; padding:0 8px;
  border:1px solid rgba(0,0,0,.08); border-radius:8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) inset;
}
.selchip.is-blank { border-color: rgba(0,0,0,.12); }
.selchip__txt { font-size:12px; font-weight:700; line-height:1; }
.selchip__hint { font-size:10px; margin-left:6px; opacity:.7; }

.rxmodal__trash{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; min-width:38px; padding:0 8px;
  border-radius:8px; border:1px solid #e3e3e6; background:#fafafa; cursor:pointer;
  transition: transform .06s ease, background .12s ease, box-shadow .12s ease;
}
.rxmodal__trash:hover  { background:#f4f4f6; }
.rxmodal__trash:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }

.rxmodal__hint{ 
  font-size:12px; 
  color: var(--muted); 
    padding: 8px 8px 1px;
    text-align: -webkit-center;
}
.rxmodal__family-sep { flex-basis: 100%; height: 12px; }
.rxmodal__divider { grid-column: 1 / -1; margin: 8px 0 4px; font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; opacity: 0.7; }


.rxmodal__tile{
  position:relative; width:56px; height:52px;
  border-radius:10px; border:2px solid color-mix(in srgb, var(--fg) 10%, transparent);
  box-shadow:0 1px 4px color-mix(in srgb, var(--fg) 10%, transparent);
  cursor:pointer; outline:none; background: var(--bg);
}
.rxmodal__tile.is-active{
  border-color: color-mix(in srgb, var(--fg) 65%, transparent);
  box-shadow:0 2px 10px color-mix(in srgb, var(--fg) 18%, transparent);
}
.rxmodal__tile.is-disabled{ opacity:.38; pointer-events:none; }
.rxmodal__tile.is-blank{ background: var(--bg); border-color: var(--border); }

.rxmodal__tileLabel{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:11px; font-weight:700; color: var(--fg);
  text-shadow:0 1px 0 color-mix(in srgb, var(--bg) 60%, transparent);
  mix-blend-mode: luminosity;
}
.rxmodal__tile.is-blank .rxmodal__tileLabel{ color: var(--muted); }


.rxmodal__tileBlankTxt{
  position:absolute; bottom:4px; left:0; right:0;
  font-size:9px; text-align:center; color: var(--muted);
}


.rxmodal__tile--trash{
  width:56px; height:52px; display:grid; place-items:center;
  background: var(--bg); color: var(--fg); border:2px solid var(--border);
}
.rxmodal__tile--all{
  width:56px; height:52px; display:grid; place-items:center;
  background: conic-gradient(from 220deg, #41a7f8, #7aefa6, #f0d41d, #fd7322, #ff0000, #830c93, #41a7f8);
  background-clip: padding-box;
  color: #fff;
}
.rxmodal__tile--trash:hover { background: color-mix(in srgb, var(--bg) 94%, var(--fg) 6%); }
.rxmodal__tile--trash:active{ transform: scale(.98); }


.rxmodal__body .rx-swatch {
  width:28px; height:18px; border-radius:6px; margin-right:6px;
  background:#ddd; border:1px solid rgba(0,0,0,.08);
  box-shadow:none;
}
.rxmodal__body .rx-swatch--blank { background:#fff !important; border:1px solid rgba(0,0,0,.15); }
.rxmodal__body .rx-swatch-label { font-size:10px; transform: translateY(-0.5px); }


.rp-groups {
  --tile: 56px;
  --g: 10px;
  display:flex; flex-wrap:wrap;
  column-gap: 22px; row-gap: 14px; align-items:flex-start;
}
.rp-group { display:flex; flex-direction:column; gap:8px; }
.rp-group__title { font-size:12px; font-weight:800; letter-spacing:.2px; color: var(--muted); padding-left:2px; margin: 0; }
.rp-group__grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap:4px; gap:4px; }
.rp-all-slot--narrow { display: none; }

.rp-group--mini { flex: 0 0 calc(2 * var(--tile) + var(--g)); }

.rp-group--blank .rp-group__grid,
.rp-group--trash .rp-group__grid { grid-template-columns: var(--tile); }


.reagent-icon.u-grad {
  background: linear-gradient(135deg, var(--c1), var(--c2));
  background: var(--rx-gradient, linear-gradient(135deg, var(--c1), var(--c2)));
}
.reagent-icon.reagent-icon--all {
  background: var(--rx-all-gradient);
}
.u-color-fill { background: var(--rx-icon-bg); }

.reagent-icon.reagent-icon--all::before,
.rxmodal__tile--all::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0 18%, transparent 19%),
    conic-gradient(from 220deg, rgba(255,255,255,.16), rgba(255,255,255,0) 20%, rgba(255,255,255,.18) 42%, rgba(255,255,255,0) 65%, rgba(255,255,255,.14));
}


.ui-matte {
  --ui-sat: var(--tile-sat, 1.5);
  --ui-bright: var(--tile-bright, 1.7);
  --ui-contrast: var(--tile-contrast, .45);
  position: relative;
  
  
  box-shadow: 0 2px 6px rgba(0,0,0,.20);
  
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform, filter;
  cursor: pointer;
}

.theme-dark .ui-matte {
  border: 1px solid rgba(94, 94, 94, 0.8)
}


.rp-controls .ui-matte{
  box-shadow:0 1px 4px color-mix(in srgb, var(--fg) 10%, transparent)
}
.rp-controls .ui-matte:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,0.5);
}


.ui-matte::before{
  content:""; position:absolute; inset:0; border-radius: inherit;
  background: linear-gradient(150deg, rgba(255,255,255,.018) 0%,
    rgba(255,255,255,.08) 42%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.ui-matte::after{
  content:""; position:absolute; inset:0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.014), inset 0 -1px 0 rgba(0,0,0,.016);
  pointer-events:none;
}
.ui-matte:hover{
  scale: 1.06;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.5);
}


.reagents-toolbar .reagent-icon,
.sub-card .reagent-icon,
.reagents-card .reagent-icon {
  scale: 1;
  transform: translateZ(0) scale(1);
  transform-origin: center;
  transition:
    transform 160ms cubic-bezier(.2, .75, .25, 1),
    background-color 140ms ease;
  will-change: transform;
}

.reagents-toolbar .reagent-icon:hover,
.sub-card .reagent-icon:hover,
.reagents-card .reagent-icon:hover {
  scale: 1;
  transform: translateZ(0) scale(1.045);
  box-shadow: none;
  
}

.reagents-toolbar .reagent-icon:active,
.sub-card .reagent-icon:active,
.reagents-card .reagent-icon:active {
  transform: translateZ(0) scale(.98);
}

@media (prefers-reduced-motion: reduce) {
  .reagents-toolbar .reagent-icon,
  .sub-card .reagent-icon,
  .reagents-card .reagent-icon,
  .reagents-toolbar .reagent-icon:hover,
  .sub-card .reagent-icon:hover,
  .reagents-card .reagent-icon:hover {
    transform: none;
    transition: background-color 140ms ease;
    will-change: auto;
  }
}
.ui-matte.is-active{
  box-shadow: 0 4px 12px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.55);
}
.ui-matte.is-disabled{ opacity: .55; filter: saturate(.8) brightness(1.02) contrast(.95); cursor: not-allowed; }
.ui-matte .label{
  padding: 2px 6px; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); line-height:1;
}
.ui-matte.is-blank .label{ background: rgba(0,0,0,.08); }
.ui-matte .blank-txt{ position: absolute; right: 6px; bottom: 6px; font-size: 10px; font-weight: 600; color: rgba(0,0,0,.55); }
.ui-matte--trash{ background:#fff; color:#2b2b2b; display:grid; place-items:center; }
.ui-matte--trash .mdi, .ui-matte--trash ons-icon{ font-size:24px; opacity:.85; transition: opacity .15s ease, transform .12s ease; }
.ui-matte--trash:hover .mdi, .ui-matte--trash:hover ons-icon{ opacity:1; transform: scale(1.06); }






@media (max-width: 450px) {
  .rx-reag-name {
    display: none;
  }

  .rx-row {
    display: flex;
  }

  .rx-left {
    min-width: 210px!important;
    flex: 0 0 auto;
  }

  .rx-right {
    flex: 1 1 auto;
  }


  
}




@media (max-width: 400px) {

 
  .rx-hint {
    white-space: normal; 
  }

  .rx-colors {
    flex-wrap: nowrap;
}

.rxmodal__hint {
    padding: 18px 8px 1px;
    text-align: -webkit-center;
}
}













.rxmodal__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}


.rxmodal__head {
    text-align: center;
    
}

.rp-group {
    display: grid; 
    grid-gap: 8px;
    gap: 8px;
    justify-content: center;
}

.rp-groups {
    justify-content: center;
}

.rp-group__grid {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 4px;
    gap: 4px;
}
.rp-group__grid--controls{
   grid-template-columns: var(--tile);

  gap: 22px;
  justify-content: center;
  padding-bottom: 1rem;
}

.rp-group__title {
    text-align: -webkit-center;
}

@media (max-width: 376px) {
  .rp-all-slot--wide { display: none; }
  .rp-all-slot--narrow { display: contents; }
}




.rp-controls {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 22px;
    gap: 22px;
    padding: 5px 0px 10px;
    align-items: center;
    justify-content: center;
    overflow-y: hidden;
    width: 12
    0%;
    padding: 8;


}



@media (max-width: 490px) {


.rxmodal__overlay {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    scale: 0.99;
}}




















.rx-hint .hint-arrow {
  display: inline-block;
  transform: scale(1.3) scaleX(1.5) translateY(0px);
  font-weight: 500;
  padding: 0px 5px 0px 5px
}

.hint-arrow {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant-emoji: text;
}





.reagents-toolbar--hscroll{
  display: inline-flex;
  flex-wrap: nowrap;
  overflow-x: auto;      
  overflow-y: hidden;
  white-space: nowrap;
  gap: 8px;
  padding: 6px 0px 16px;   
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto; 
  width: 100%;
  max-width: 100%;
    scroll-snap-type: x mandatory;     
  scroll-padding-left: 0;            
  justify-content: flex-start;       
}

@media (min-width: 829px) {
  .reagents-toolbar.reagents-toolbar--hscroll {
    justify-content: center;
  }
}

.reagents-toolbar--hscroll > *{
  flex: 0 0 auto;        
}
@media (max-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .reagents-toolbar--hscroll::before {
    content: "";
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(12px + env(safe-area-inset-left));
    order: -2;
  }
}







.sub-card {
  
}

.sub-card-skeleton {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.sub-card-skeleton__head {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
  padding-bottom: 2px;
}

.sub-card-skeleton__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.7fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 8px 4px;
  border-top: 1px solid var(--border);
}

.sub-card-skeleton__left,
.sub-card-skeleton__right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sub-card-skeleton__right {
  justify-content: flex-end;
}

.sub-card-skeleton__icon,
.sub-card-skeleton__line,
.sub-card-skeleton__swatches,
.sub-card-skeleton__action {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, #0f172a 10%, #ffffff);
  background: color-mix(in srgb, var(--fg, #0f172a) 10%, var(--card-bg, #ffffff));
}

.theme-dark .sub-card-skeleton__icon,
.theme-dark .sub-card-skeleton__line,
.theme-dark .sub-card-skeleton__swatches,
.theme-dark .sub-card-skeleton__action {
  background: color-mix(in srgb, white 12%, #10151b);
  background: color-mix(in srgb, white 12%, var(--card-bg, #10151b));
}

.sub-card-skeleton__icon::after,
.sub-card-skeleton__line::after,
.sub-card-skeleton__swatches::after,
.sub-card-skeleton__action::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, white 55%, transparent),
    transparent
  );
  animation: sub-card-skeleton-shimmer 1.2s linear infinite;
}

.theme-dark .sub-card-skeleton__icon::after,
.theme-dark .sub-card-skeleton__line::after,
.theme-dark .sub-card-skeleton__swatches::after,
.theme-dark .sub-card-skeleton__action::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

.sub-card-skeleton__icon {
  width: 44px;
  height: 44px;
  border-radius: 7px;
  flex: 0 0 auto;
}

.sub-card-skeleton__text {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  min-width: 0;
  flex: 1 1 auto;
}

.sub-card-skeleton__line {
  display: block;
  height: 10px;
  border-radius: 999px;
}

.sub-card-skeleton__line--title {
  width: 82%;
  height: 12px;
}

.sub-card-skeleton__line--head-title {
  width: min(180px, 68%);
  height: 18px;
}

.sub-card-skeleton__line--head-meta {
  width: min(120px, 42%);
  height: 13px;
}

.sub-card-skeleton__line--meta {
  width: 58%;
}

.sub-card-skeleton__line--hint {
  width: 84px;
}

.sub-card-skeleton__swatches {
  width: 160px;
  max-width: 100%;
  height: 26px;
  border-radius: 999px;
}

.sub-card-skeleton__chip {
  display: inline-block;
  width: 64px;
  height: 24px;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, #0f172a 10%, #ffffff);
  background: color-mix(in srgb, var(--fg, #0f172a) 10%, var(--card-bg, #ffffff));
}

.theme-dark .sub-card-skeleton__chip {
  background: color-mix(in srgb, white 12%, #10151b);
  background: color-mix(in srgb, white 12%, var(--card-bg, #10151b));
}

.sub-card-skeleton__chip::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, white 55%, transparent),
    transparent
  );
  animation: sub-card-skeleton-shimmer 1.2s linear infinite;
}

.theme-dark .sub-card-skeleton__chip::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

.sub-card-skeleton__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: 100%;
  margin-top: 15px;
  border-radius: 0;
}

.sub-card-skeleton__action {
  display: block;
  width: 100%;
  height: 31px;
  border-radius: 0;
  flex: 0 0 auto;
}

@keyframes sub-card-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}
.reagents-toolbar--hscroll .reagent-icon.reagent-icon--trash {
    order: -1;
}

.reagent-analyze-content .filters-strip {
  display: flex;
  border-bottom: none;
}
.reagent-analyze-content .filters-container-wrapper {
  border-bottom: none;
}

.theme-dark .reagent-analyze-content .filters-container {
  padding: 10px 10px 10px
}


.searchbar-row-analyze {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 0px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}



.lab-search-reset, .searchbar-toggle {
  all: unset;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 34px;
  padding: 0 14px;
  border-radius: 10px;

  font: 600 13.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .01em;

  
  color: var(--muted);
  background: linear-gradient(
    180deg,
    hsl(var(--lp-glass)),
    hsl(var(--lp-glass))
  );

  border: 1px solid color-mix(in oklab, #000 10%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 4px 12px rgba(0,0,0,.08);

  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);

  transition:
    background .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

.searchbar-toggle {
  color: var(--em-muted);
}


.reagent-analyze-content .searchbar-toggle.is-active {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  border-color: color-mix(in srgb, var(--fg) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 5%, transparent);
}

.theme-dark .reagent-analyze-content .searchbar-toggle.is-active {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}


.lab-search-reset:hover, .searchbar-toggle:hover {
  background: color-mix(in oklab, hsl(var(--lp-glass)) 85%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 6px 18px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

.lab-search-reset:active, .searchbar-toggle:active {
  transform: scale(.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 6px rgba(0,0,0,.12);
}

.theme-dark .lab-search-reset, .theme-dark .searchbar-toggle {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 18px rgba(0,0,0,.45);
}

.theme-dark .lab-search-reset:hover, .theme-dark .searchbar-toggle:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}




.reagent-analyze-content .searchbar-wrap {
  padding-bottom: 10px;
  justify-self: center;
}

.theme-dark .reagent-analyze-content .searchbar-wrap {
    margin-top: 20px;
}

.theme-dark .reagent-analyze-content .searchbar-wrap {
  margin: 20px 0px 0px;
}

.reagent-analyze-content .filters-container {
  padding: 15px 10px;
}

.reagent-analyze-content .searchbar-row {
  padding: 0px 20px;
  justify-self: center;
  
  width: -webkit-fill-available;
}



.reagent-icon {
  flex-shrink: 0;
}

@media (max-width: 7000px) {





.rx-right {
  display: flex;
  align-items: center;   
  justify-content: flex-start;
  flex-wrap: nowrap;     
  gap: 10px;
  margin-bottom: 7px;
  width: 100%;
}


.rx-colors {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  white-space: nowrap;
}


.rx-hint {
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}



.rx-row {
  
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 12px;
  row-gap: 6px;
    display: flex;
  align-items: center;
}


.rx-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;

  
}


.rx-right {
  display: flex;
  flex-wrap: wrap-reverse;         
  align-items: flex-start;
  column-gap: 10px;
  row-gap: 6px;
  min-width: 0;                    
}


.rx-colors {
  order: 1;                        
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;             
  min-width: 0;
}


.rx-hint {
  order: 2;                        
  flex: 1 1 280px;                 
  
  line-height: 1.25;
  white-space: normal;             
  overflow-wrap: anywhere;         
  text-align: left;
}
}


.rx-right:not(:has(.rx-colors)) {
  margin-bottom: 0;
}


.theme-dark .reagent-icon__code {
  color: var(--rx-icon-fg) !important;
}





.page-shell:has(.reagent-analyze-content .em-lightbox-inline) {
  position: fixed;

}

.page-shell .reagent-analyze-content:has(.em-lightbox-inline) {
  overflow: clip;
}
#drugspro-app-web:has(.em-lightbox-inline) {
  overflow: hidden;
  touch-action: none;
}


.reagent-analyze-content .em-lightbox-inline {
  cursor: pointer;
  position: absolute;
  top: 0;
    position: fixed;
    inset: 0;
    z-index: 21001;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: clamp(12px, 8vh, 64px) clamp(12px, 4vw, 32px);
    background: radial-gradient(140% 90% at 10% 10%, rgba(255,255,255,.18), transparent 45%),
radial-gradient(120% 80% at 90% 85%, rgba(0,0,0,.45), transparent 55%),
linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    animation: em-frost-in 220ms ease forwards;
    place-items: flex-start;
    
    will-change: opacity, transform;
    transform: translateZ(0);
    pointer-events: auto;
    touch-action: auto;
    overflow: clip;
}

@media (pointer: coarse) and (orientation: portrait) {
  html.entry-ios .reagent-analyze-content .em-lightbox-inline,
  body.entry-ios .reagent-analyze-content .em-lightbox-inline {
    padding-top: 110px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

@media (pointer: coarse) {
  .em-lightbox-inline {
    touch-action: manipulation;
  }
}

.reagent-analyze-content .em-lightbox-inline .em-lightbox-media-inner {
  height: 100%;
}

.reagent-analyze-content .em-lightbox-inline img:not(.em-lightbox-thumbs img) {
  border-radius: 14px;
  min-height: 200px;
}

#drugspro-app-web .reagent-analyze-content .em-lightbox-thumbs img {
  object-fit: cover;
}

.reagent-analyze-content .em-lightbox-inline.is-booklet-only .em-lightbox-edge ,
.reagent-analyze-content .em-lightbox-inline.is-booklet-only .em-lightbox-thumb.is-active {
display: none;
}



@media (max-width: 450px) {

  
  .rx-colors:has(.rx-swatch:nth-child(3):last-child) .rx-swatch {
    border-radius: 5px;
  }

  
  .rx-colors:has(.rx-swatch:nth-child(4):last-child) .rx-swatch {
    border-radius: 4px;
  }

  
  .rx-colors:has(.rx-swatch:nth-child(5):last-child) .rx-swatch {
    border-radius: 4px;
  }

}



.compare-fullrow { 
  
  padding: 0px 0px 20px;
}

.compare-card {
  padding: 0;
    container-type: inline-size;

    
    
}

.compare-head,
.compare-row {
  display: grid;
  
     grid-column-gap: 15px;
     column-gap: 15px;
  align-items: stretch;
}

.compare-head > *{
  padding: 10px 10px 0px 0px;
}



.compare-head {
  
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  background: var(--card);
  background: var(--bg-subtle, var(--card));
}

.compare-col {
  display: flex;
  align-items: center;
}

.compare-col--reagent {
  color: var(--muted);
}

.compare-cell .rx-left {
  display: none;
}

.compare-cell .rx-hint {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.compare-cell {
  display: flex;
  align-items: stretch;
}

.compare-cell--reagent {
  margin-left: 1em;
  gap: 8px;
  align-items: center;
  
  white-space: nowrap;
}

.compare-reagent-name {
  font-size: 13px;
  color: var(--fg);
}



.compare-cell .rx-row {
  width: 100%;
  margin: 0;
  padding: 4px 0;
}


.rx-row--empty {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.6;
}







.compare-card .compare-body {
  padding: 0px 0px 0px 0px;
}


.compare-col.compare-col--reagent {
  justify-content: center;
  display: flex;
  
}

.ui-icon-btn {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 519px) {
  .compare-col--reagent .ui-icon-btn {
    display: none;
  }
}

.export-flat .ui-icon-btn {
  display: none;
}

.compare-export-logo {
  display: none;
}

.export-flat .compare-export-logo {
  display: flex;
  align-items: center;
  justify-content: end;
}


.compare-card .rx-hint, .compare-col {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; 
}


.compare-reagent-name {
  display: none;
}

.compare-cell--reagent {
  justify-content: center;
}

.compare-cell .ui-matte.reagent-icon {
  margin: 6px 0px;
  width: 40px;
  height: 40px;
}

.rx-row--empty {
  justify-content: left;
}

.compare-cell .rx-colors {
  margin-right: 10px;
}

@media (max-width:450px) {
.compare-cell .rx-swatch {
height: 15px;
}
}


 
  .compare-cell .rx-swatch {
    height: 15px;
  }

.compare-col--sub {
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
}



.compare-card .is-active-col {
  background: color-mix(
    in srgb,
    #dcaa2e 12%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--accent, #dcaa2e) 12%,
    transparent
  );
}


.compare-card .is-active-col {
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--accent) 35%, transparent);
}


.compare-fullrow .compare-card:has(.is-dragging) * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.mdi-pin::before {
  transform: rotate(45deg);
}


.analyze-with-search-page .analyze-scroll-root .subs-list.subs-list--pinned {
  padding-bottom: 2.5em!important;
  border-bottom: 3px dashed rgba(0, 0, 0, 0.1);
  margin-bottom: 2.5em;
  grid-template-columns: 1fr 1fr;
}

.analyze-with-search-page .analyze-scroll-root .subs-list.subs-list--normal.subs-list--after-pinned.subs-list--starts-skeleton {
  margin-top: -0.75rem;
  padding-top: 0.25rem;
}

.analyze-with-search-page .analyze-scroll-root .subs-list.subs-list--normal.subs-list--after-pinned.subs-list--starts-skeleton .sub-card:first-child {
  opacity: 0.92;
  grid-column: 1 / -1;
}

@media (max-width:700px) {
  .subs-list.subs-list--pinned .rx-left {
    min-width: auto;
  }
  .subs-list.subs-list--pinned .rx-reag-name {
    display: none!important;
  }
  .subs-list.subs-list--pinned .reagent-icon  {
    width: 7cqw;
    height: 7cqw;
  }
  .subs-list.subs-list--pinned .reagent-icon__code{
    font-size: 2cqw;
  }
  .subs-list.subs-list--pinned .rx-swatch {
    height: 15px;
  }
  .subs-list.subs-list--pinned .rx-left {
    min-width: auto!important;
  }
  .subs-list.subs-list--pinned .rx-row {
    padding: 2px 4px;
  }
}

@media (max-width:500px) {
  .analyze-with-search-page .analyze-scroll-root .subs-list.subs-list--pinned {
  grid-template-columns: 1fr;
}
}



.compare-fullrow.ghost-pulse {
  animation: ghost-pulse 700ms ease-out;
}

@keyframes ghost-pulse {
  0% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}


@keyframes ghost-trail {
  0% {
    opacity: 0;
    transform: translateY(20px) scaleY(0.3);
  }
  25% {
    opacity: 0.9;
    transform: translateY(0) scaleY(1);
  }
  70% {
    opacity: 0.7;
    transform: translateY(-80px) scaleY(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-140px) scaleY(0.6);
  }
}

@keyframes ghost-trail-long {
  0% {
    opacity: 0;
    transform: translateY(40px) scaleY(0.2);
  }
  15% {
    opacity: 0.9;
    transform: translateY(0) scaleY(1);
  }
  60% {
    opacity: 0.6;
    transform: translateY(-120vh) scaleY(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-180vh) scaleY(0.4);
  }
}
@keyframes ghost-trail-slide {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  70% {
    transform: translateY(-140vh); 
    opacity: 1;
  }

  100% {
    transform: translateY(-180vh);
    opacity: 0; 
  }
}




.analyze-disclaimer {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
  text-wrap: balance;
  line-height: 1;
  font-weight: 300;
  margin-bottom: 1.95em;
  padding-inline: 1.5em;
}

.ui-floating-pin-feedback {
  pointer-events: none;
  z-index: 2;
  animation: ui-floating-pin-feedback-card 2900ms cubic-bezier(.2,.7,.2,1) forwards;
}

.ui-floating-pin-feedback::after {
  content: "\2191\FE0E";
  position: fixed;
  left: 50%;
  top: 55vh;
  transform: translateX(-50%);
  font-family: "Arial Unicode MS", "Helvetica Neue", Arial, sans-serif;
  font-size: 56px;
  font-weight: 900;
  color: #dcaa2e;
  color: var(--floating-pin-feedback-color, var(--accent, #dcaa2e));
  pointer-events: none;
  z-index: 99999;
  animation: ui-floating-pin-feedback-rise 2800ms cubic-bezier(.25,.9,.3,1) forwards;
}

@keyframes ui-floating-pin-feedback-rise {
  0% {
    top: 55vh;
    opacity: 1;
  }

  85% {
    top: 5vh;
    opacity: 1;
  }

  100% {
    top: 4vh;
    opacity: 0;
  }
}

@keyframes ui-floating-pin-feedback-card {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  30% {
    transform: translateY(-40px) scale(1.03);
  }

  100% {
    transform: translateY(-160px) scale(0.9);
    opacity: 0;
  }
}