/* ForgeCore Experience v4 — focused scroll regions and premium motion */
:root{
  --fc-scroll-track:rgba(7,14,27,.34);
  --fc-scroll-a:#27d8e6;
  --fc-scroll-b:#6f7dff;
  --fc-scroll-c:#a86aff;
  --fc-panel-glow:rgba(52,214,232,.16);
}

[hidden]{display:none!important}

.workspace{
  grid-template-columns:minmax(310px,.78fr) minmax(360px,.9fr) minmax(0,2fr);
  gap:18px;
  align-items:stretch;
}

.category-panel,.formula-panel{
  position:sticky;
  top:92px;
  height:min(820px,calc(100vh - 112px));
  min-height:620px;
  max-height:none;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(13,22,39,.98),rgba(7,13,25,.97)),
    radial-gradient(circle at 10% 0,rgba(52,214,232,.10),transparent 34%);
  box-shadow:0 24px 70px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035);
}

.category-panel::before,.formula-panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  z-index:5;
  background:linear-gradient(90deg,transparent,var(--fc-scroll-a),var(--fc-scroll-b),transparent);
  opacity:.78;
}

.category-panel::after,.formula-panel::after{
  content:"";
  position:absolute;
  inset:auto 12px 0;
  height:48px;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(7,13,25,.96));
  opacity:0;
  transition:opacity .24s ease;
}

.category-panel.has-more::after,.formula-panel.has-more::after{opacity:1}

.category-panel>.panel-head,.formula-panel>.panel-head{
  flex:0 0 auto;
  margin:0;
  padding:20px 20px 14px;
  position:relative;
  z-index:7;
  background:linear-gradient(180deg,rgba(13,22,39,.995) 0%,rgba(13,22,39,.94) 76%,rgba(13,22,39,0) 100%);
}

.category-panel>.domain-tabs,
.category-panel>.search-box,
.category-panel>.select-label,
.formula-panel>.search-box,
.formula-panel>.formula-tools{
  flex:0 0 auto;
  position:relative;
  z-index:6;
}

.category-panel>.domain-tabs{margin:0 18px 12px}
.category-panel>.search-box{margin:0 18px 13px}
.category-panel>.select-label{margin:0 18px 14px}
.formula-panel>.search-box{margin:0 18px 12px}
.formula-panel>.formula-tools{margin:0 18px 14px}

.category-list,.formula-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  padding:2px 13px 42px 18px;
  margin:0 5px 0 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(62,218,232,.9) transparent;
  transition:mask-image .25s ease,-webkit-mask-image .25s ease;
}

.category-list.is-scrollable:not(.at-start),.formula-list.is-scrollable:not(.at-start){
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 100%);
}
.category-list.is-scrollable:not(.at-end),.formula-list.is-scrollable:not(.at-end){
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 28px),transparent 100%);
}
.category-list.is-scrollable:not(.at-start):not(.at-end),.formula-list.is-scrollable:not(.at-start):not(.at-end){
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%);
}

.category-list::-webkit-scrollbar,.formula-list::-webkit-scrollbar,
.science-calculator output::-webkit-scrollbar,.history-list::-webkit-scrollbar{
  width:9px;
  height:9px;
}
.category-list::-webkit-scrollbar-track,.formula-list::-webkit-scrollbar-track,
.science-calculator output::-webkit-scrollbar-track,.history-list::-webkit-scrollbar-track{
  background:transparent;
  border-radius:999px;
  margin:8px 0 20px;
}
.category-list::-webkit-scrollbar-thumb,.formula-list::-webkit-scrollbar-thumb,
.science-calculator output::-webkit-scrollbar-thumb,.history-list::-webkit-scrollbar-thumb{
  min-height:72px;
  border:2px solid transparent;
  border-radius:999px;
  background:linear-gradient(180deg,var(--fc-scroll-a),var(--fc-scroll-b) 56%,var(--fc-scroll-c)) padding-box;
  box-shadow:0 0 18px rgba(52,214,232,.23);
}
.category-list::-webkit-scrollbar-thumb:hover,.formula-list::-webkit-scrollbar-thumb:hover,
.science-calculator output::-webkit-scrollbar-thumb:hover,.history-list::-webkit-scrollbar-thumb:hover{
  border-width:1px;
  background:linear-gradient(180deg,#78f2fb,#8d97ff 54%,#c397ff) padding-box;
  box-shadow:0 0 24px rgba(52,214,232,.42);
}
.category-list::-webkit-scrollbar-button,.formula-list::-webkit-scrollbar-button{display:none;width:0;height:0}

.panel-scroll-meter{
  position:absolute;
  z-index:9;
  top:178px;
  right:5px;
  bottom:17px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(52,214,232,.08),rgba(154,99,255,.08));
  pointer-events:none;
  opacity:0;
  transition:opacity .24s ease;
}
.formula-panel .panel-scroll-meter{top:150px}
.panel-scroll-meter.visible{opacity:1}
.panel-scroll-meter>i{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  min-height:42px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--fc-scroll-a),var(--fc-scroll-b),var(--fc-scroll-c));
  box-shadow:0 0 14px rgba(52,214,232,.5);
  transform:translateY(var(--meter-y,0));
  height:var(--meter-h,18%);
  transition:height .18s ease,transform .08s linear;
}

.panel-scroll-label{
  position:absolute;
  z-index:9;
  right:15px;
  bottom:12px;
  padding:5px 8px;
  border:1px solid rgba(52,214,232,.16);
  border-radius:999px;
  background:rgba(5,10,20,.82);
  color:#7890aa;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:.22s ease;
  backdrop-filter:blur(10px);
}
.category-panel.has-more .panel-scroll-label,.formula-panel.has-more .panel-scroll-label{opacity:1;transform:none}
.category-panel.at-end .panel-scroll-label,.formula-panel.at-end .panel-scroll-label{opacity:0;transform:translateY(4px)}

.category-item,.formula-item{
  position:relative;
  overflow:hidden;
  border-color:rgba(148,163,184,.08);
  background:linear-gradient(145deg,rgba(10,17,31,.98),rgba(8,14,26,.98));
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.category-item::before,.formula-item::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,var(--cyan),var(--violet));
  opacity:0;
  transform:scaleY(.4);
  transition:.18s ease;
}
.category-item:hover,.formula-item:hover{transform:translateX(2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.category-item.active,.formula-item.active{
  border-color:rgba(52,214,232,.52);
  background:linear-gradient(145deg,rgba(18,38,58,.98),rgba(13,25,46,.98));
  box-shadow:0 12px 34px rgba(20,120,148,.13),inset 0 0 24px rgba(52,214,232,.035);
}
.category-item.active::before,.formula-item.active::before{opacity:1;transform:none}

.search-box:focus-within{
  border-color:rgba(52,214,232,.72);
  box-shadow:0 0 0 3px rgba(52,214,232,.09),0 12px 28px rgba(0,0,0,.16);
}

.calculator-panel{
  min-width:0;
  background:
    radial-gradient(circle at 82% 0,rgba(91,140,255,.10),transparent 32%),
    linear-gradient(155deg,rgba(11,19,34,.98),rgba(7,13,25,.98));
}

@media(max-width:1320px){
  .workspace{grid-template-columns:minmax(285px,.8fr) minmax(330px,.9fr) minmax(0,1.8fr)}
}
@media(max-width:1080px){
  .workspace{grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr)}
  .category-panel{height:min(760px,calc(100vh - 110px))}
  .formula-panel{height:auto;min-height:0;position:static}
  .formula-list{max-height:520px;flex:none}
  .panel-scroll-meter{display:none}
  .panel-scroll-label{display:none}
}
@media(max-width:760px){
  .workspace{grid-template-columns:1fr;gap:13px}
  .category-panel,.formula-panel{position:static;height:auto;min-height:0;border-radius:19px}
  .category-list,.formula-list{max-height:min(54vh,470px);padding-bottom:28px}
  .category-panel>.panel-head,.formula-panel>.panel-head{padding:17px 17px 12px}
  .category-panel>.domain-tabs,.category-panel>.search-box,.category-panel>.select-label,
  .formula-panel>.search-box,.formula-panel>.formula-tools{margin-left:15px;margin-right:15px}
}
@media(prefers-reduced-motion:reduce){
  .category-item,.formula-item,.panel-scroll-meter>i,.panel-scroll-label{transition:none!important}
  .category-list,.formula-list{scroll-behavior:auto}
}