.op-research-message{
  margin-bottom:12px;
}

.op-research-shell{
  position:relative;
  overflow:hidden;
  margin-top:14px;
  padding:18px;
  border-color:rgba(64,91,173,.72);
  background:
    radial-gradient(circle at 8% 0%,rgba(56,154,255,.11),transparent 28%),
    radial-gradient(circle at 88% 0%,rgba(133,72,255,.11),transparent 30%),
    linear-gradient(180deg,rgba(11,21,54,.97),rgba(6,12,32,.98));
}

.op-research-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:14px;
}

.op-research-kicker{
  margin-bottom:5px;
  color:#66ddff;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
}

.op-research-header h2{
  margin:0;
  color:#f5f8ff;
  font-size:34px;
  line-height:1;
  text-shadow:0 0 16px rgba(99,180,255,.24);
}

.op-research-header p{
  max-width:720px;
  margin:9px 0 0;
  color:#aebce1;
  font-size:13px;
  line-height:1.55;
}

.op-research-account-state{
  flex:0 0 300px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:82px;
  padding:13px 15px;
  border:1px solid rgba(87,134,231,.45);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(18,37,86,.82),rgba(10,21,52,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.op-research-account-label,
.op-research-summary-card > span{
  color:#75dfff;
  font-size:9px;
  font-weight:950;
  letter-spacing:.11em;
}

.op-research-account-state strong{
  color:#fff;
  font-size:16px;
}

.op-research-account-state > span{
  color:#aebde4;
  font-size:11px;
  font-weight:800;
}

.op-research-account-state > small{
  color:#84f0c7;
  font-size:9px;
  font-weight:850;
  line-height:1.35;
}

.op-research-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.op-research-summary-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  min-height:78px;
  padding:11px 14px;
  border:1px solid rgba(66,91,166,.46);
  border-radius:13px;
  background:rgba(8,18,48,.72);
}

.op-research-summary-card > span{
  display:block;
  writing-mode:horizontal-tb;
  transform:none;
  opacity:.82;
}

.op-research-summary-card strong{
  color:#f8fbff;
  font-size:18px;
  line-height:1.12;
}

.op-research-summary-card small{
  color:#aab9df;
  font-size:10px;
  font-weight:800;
}

.op-research-summary-card.cyan{
  border-color:rgba(63,207,255,.34);
  box-shadow:inset 0 0 28px rgba(36,171,255,.05);
}

.op-research-summary-card.cyan strong{
  color:#72f4ff;
  text-shadow:0 0 10px rgba(70,224,255,.28);
}

.op-research-summary-card.violet{
  border-color:rgba(145,103,255,.36);
  box-shadow:inset 0 0 28px rgba(118,73,255,.06);
}

.op-research-summary-card.violet strong{
  color:#bda9ff;
  text-shadow:0 0 10px rgba(154,117,255,.30);
}

.op-research-summary-card.active{
  border-color:rgba(82,255,180,.36);
  box-shadow:inset 0 0 28px rgba(41,211,133,.06),0 0 14px rgba(41,211,133,.05);
}

.op-research-summary-card.active strong,
.op-research-summary-card.idle strong{
  color:#7dffc1;
}

.op-research-live-time{
  color:#b8fff0 !important;
  font-size:13px !important;
  text-shadow:0 0 10px rgba(92,255,218,.42);
}

.op-research-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:46px;
  padding:7px 9px 7px 12px;
  border:1px solid rgba(55,78,145,.54);
  border-bottom:0;
  border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,rgba(15,28,67,.96),rgba(9,18,46,.96));
}

.op-research-legend{
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  color:#aebce1;
  font-size:10px;
  font-weight:850;
}

.op-research-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.op-research-legend i{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#73ddff;
  box-shadow:0 0 8px rgba(89,218,255,.60);
}

.op-research-legend i.active{
  background:#62ffb5;
  box-shadow:0 0 8px rgba(72,255,171,.68);
}

.op-research-legend i.preview{
  background:#9d77ff;
  box-shadow:0 0 8px rgba(141,94,255,.58);
}

.op-research-legend i.link-missing{
  border-radius:2px;
  background:#ff5e78;
  box-shadow:0 0 8px rgba(255,68,99,.66);
}

.op-research-legend i.link-met{
  border-radius:2px;
  background:#5dffad;
  box-shadow:0 0 8px rgba(70,255,161,.66);
}

.op-research-controls{
  display:flex;
  align-items:center;
  gap:6px;
}

.op-research-controls button,
.op-research-controls span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:31px;
  min-width:34px;
  border:1px solid rgba(77,112,205,.66);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(29,58,133,.88),rgba(17,35,86,.92));
  color:#ecf7ff;
  font-size:15px;
  font-weight:950;
}

.op-research-controls button{
  cursor:pointer;
}

.op-research-controls button:hover{
  border-color:rgba(105,216,255,.76);
  filter:brightness(1.12);
}

.op-research-controls span{
  min-width:56px;
  color:#84edff;
  font-size:10px;
}

.op-research-controls button.wide{
  min-width:128px;
  padding:0 10px;
  font-size:10px;
}

.op-research-viewport{
  position:relative;
  height:720px;
  overflow:hidden;
  border:1px solid rgba(55,81,158,.72);
  border-radius:0 0 18px 18px;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.58) 0 1px,transparent 1.5px),
    radial-gradient(circle at 73% 31%,rgba(134,200,255,.48) 0 1px,transparent 1.5px),
    radial-gradient(circle at 46% 76%,rgba(181,151,255,.42) 0 1px,transparent 1.5px),
    radial-gradient(circle at 88% 72%,rgba(255,255,255,.36) 0 1px,transparent 1.5px),
    radial-gradient(ellipse at 50% 45%,rgba(36,45,100,.20),transparent 65%),
    linear-gradient(180deg,#01030a 0%,#030612 100%);
  background-size:173px 173px,229px 229px,211px 211px,277px 277px,auto,auto;
  box-shadow:inset 0 0 70px rgba(0,0,0,.62);
}

.op-research-viewport.dragging{
  cursor:grabbing;
}

.op-research-grid-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.26;
  background-image:
    linear-gradient(rgba(66,93,177,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(66,93,177,.10) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at center,#000 0%,transparent 80%);
}

.op-research-stage{
  position:absolute;
  left:0;
  top:0;
  width:1760px;
  height:1000px;
  transform-origin:0 0;
  will-change:transform;
}

.op-research-links{
  position:absolute;
  inset:0;
  z-index:1;
  width:1760px;
  height:1000px;
  overflow:visible;
  pointer-events:none;
}

.op-research-links .op-research-link path{
  fill:none;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.op-research-links .op-research-link.missing path{
  stroke:#ff536e;
  filter:drop-shadow(0 0 6px rgba(255,62,94,.72));
}

.op-research-links .op-research-link.met path{
  stroke:#58ffae;
  filter:drop-shadow(0 0 6px rgba(65,255,161,.72));
}

.op-research-links .op-research-link circle{
  stroke-width:2;
}

.op-research-links .op-research-link.missing circle{
  fill:#4b1724;
  stroke:#ff617a;
  filter:drop-shadow(0 0 5px rgba(255,62,94,.76));
}

.op-research-links .op-research-link.met circle{
  fill:#123f31;
  stroke:#64ffb6;
  filter:drop-shadow(0 0 5px rgba(65,255,161,.76));
}

.op-research-link-state{
  position:absolute;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-width:56px;
  min-height:24px;
  padding:3px 8px;
  transform:translate(-50%,-50%);
  border:1px solid currentColor;
  border-radius:999px;
  background:rgba(4,9,25,.96);
  font-size:9px;
  font-weight:950;
  line-height:1;
  box-shadow:0 5px 12px rgba(0,0,0,.35);
  pointer-events:none;
}

.op-research-link-state.missing{
  color:#ff7890;
  text-shadow:0 0 7px rgba(255,70,103,.52);
}

.op-research-link-state.met{
  color:#72ffc0;
  text-shadow:0 0 7px rgba(68,255,164,.52);
}

.op-research-node{
  --node-accent:#5bdcff;
  position:absolute;
  z-index:2;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  width:400px;
  height:400px;
  padding:15px;
  transform:translate(-50%,-50%);
  border:1px solid color-mix(in srgb,var(--node-accent) 52%,transparent);
  border-radius:18px;
  background:
    radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--node-accent) 14%,transparent),transparent 36%),
    linear-gradient(180deg,rgba(15,27,67,.98),rgba(7,14,37,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 32px color-mix(in srgb,var(--node-accent) 5%,transparent),
    0 14px 32px rgba(0,0,0,.42);
  user-select:text;
}

.op-research-node.accent-violet{--node-accent:#a27aff;}
.op-research-node.accent-amber{--node-accent:#ffbd61;}
.op-research-node.accent-blue{--node-accent:#6ca8ff;}

.op-research-node.preview,
.op-research-node.locked{
  border-style:dashed;
}

.op-research-node.preview::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,transparent 0 48%,rgba(255,255,255,.018) 48% 52%,transparent 52% 100%);
  background-size:18px 18px;
}

.op-research-node.active{
  --node-accent:#55ffb4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 36px rgba(48,228,145,.07),
    0 0 25px rgba(45,224,143,.16),
    0 14px 32px rgba(0,0,0,.42);
}

.op-research-node-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-height:48px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.op-research-category{
  display:block;
  margin-bottom:4px;
  color:var(--node-accent);
  font-size:8px;
  font-weight:950;
  letter-spacing:.13em;
}

.op-research-node h3{
  margin:0;
  color:#fff;
  font-size:18px;
  line-height:1.06;
  text-shadow:0 0 12px color-mix(in srgb,var(--node-accent) 22%,transparent);
}

.op-research-status{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:23px;
  padding:4px 8px;
  border:1px solid color-mix(in srgb,var(--node-accent) 48%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--node-accent) 10%,transparent);
  color:color-mix(in srgb,var(--node-accent) 78%,white);
  font-size:7px;
  font-weight:950;
  letter-spacing:.06em;
  white-space:nowrap;
}

.op-research-description{
  height:34px;
  margin:9px 0 8px;
  overflow:hidden;
  color:#aebce0;
  font-size:10px;
  line-height:1.45;
}

.op-research-effect{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:37px;
  padding:7px 9px;
  border:1px solid color-mix(in srgb,var(--node-accent) 24%,transparent);
  border-radius:10px;
  background:color-mix(in srgb,var(--node-accent) 6%,rgba(5,12,32,.74));
}

.op-research-effect span,
.op-research-metrics span,
.op-research-requirements > span,
.op-research-costs > span,
.op-research-node-countdown span{
  color:#8190bb;
  font-size:7px;
  font-weight:950;
  letter-spacing:.09em;
}

.op-research-effect strong{
  color:color-mix(in srgb,var(--node-accent) 76%,white);
  font-size:10px;
  text-align:right;
}

.op-research-metrics{
  display:grid;
  grid-template-columns:1fr 1.45fr;
  gap:7px;
  margin-top:7px;
}

.op-research-metrics > div{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-height:43px;
  padding:7px 8px;
  border:1px solid rgba(67,91,163,.42);
  border-radius:9px;
  background:rgba(6,14,38,.70);
  min-width:0;
}

.op-research-metrics strong{
  color:#f6f9ff;
  font-size:11px;
  line-height:1.15;
}

.op-research-duration-comparison{
  display:flex;
  align-items:baseline;
  gap:5px;
  min-width:0;
  white-space:nowrap;
}

.op-research-duration-comparison del{
  color:#7583aa;
  font-size:9px;
  font-weight:850;
}

.op-research-duration-comparison i{
  color:#8d9cc3;
  font-size:9px;
  font-style:normal;
}

.op-research-duration-comparison strong{
  color:#91ffd2;
  font-size:12px;
  text-shadow:0 0 8px rgba(69,255,176,.30);
}

.op-research-duration-comparison small{
  margin-left:auto;
  color:#75dfff;
  font-size:7px;
  font-weight:950;
}

.op-research-requirements{
  display:grid;
  grid-template-columns:94px 1fr;
  align-items:center;
  min-height:40px;
  margin-top:7px;
  padding:6px 8px;
  border:1px solid rgba(67,91,163,.38);
  border-radius:9px;
  background:rgba(6,14,38,.58);
}

.op-research-requirements strong{
  color:#eaf2ff;
  font-size:9px;
  text-align:right;
}

.op-research-requirements strong.met{
  color:#87f5c5;
}

.op-research-requirements strong.missing{
  color:#ff9dad;
}

.op-research-costs,
.op-research-preview-note{
  box-sizing:border-box;
  height:64px;
  margin-top:7px;
  padding:7px 10px;
  border:1px solid rgba(67,91,163,.42);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(8,18,48,.92),rgba(5,12,33,.92));
  min-width:0;
  overflow:hidden;
}

.op-research-costs > div{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:5px;
  width:100%;
  min-width:0;
}

.op-research-costs b{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:5px;
  min-width:0;
  min-height:29px;
  padding:4px 8px;
  border:1px solid rgba(67,91,163,.34);
  border-radius:7px;
  color:#9eadd3;
  font-size:7.5px;
  line-height:1;
  width:100%;
  overflow:hidden;
}

.op-research-costs em{
  color:#71f7be;
  font-size:10.5px;
  font-style:normal;
  font-weight:950;
  line-height:1;
  text-align:right;
  text-shadow:0 0 8px rgba(76,246,183,.24);
  overflow:hidden;
  text-overflow:ellipsis;
}

.op-research-preview-note{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}

.op-research-preview-note span{
  color:var(--node-accent);
  font-size:7px;
  font-weight:950;
  letter-spacing:.07em;
}

.op-research-preview-note strong{
  color:#b9c5e4;
  font-size:9px;
  line-height:1.3;
}

.op-research-action-row{
  display:flex;
  align-items:flex-end;
  min-height:40px;
  margin-top:auto;
}

.op-research-action-row form{
  width:100%;
  margin:0;
}

.op-research-start-btn{
  width:100%;
  min-height:39px;
  border:1px solid rgba(77,213,255,.66);
  border-radius:10px;
  background:linear-gradient(180deg,#1555a8,#0b347c);
  color:#f7fcff;
  font-size:11px;
  font-weight:950;
  cursor:pointer;
  text-shadow:0 0 8px rgba(154,227,255,.52),0 1px 2px rgba(0,0,0,.70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 12px rgba(42,146,255,.12);
}

.op-research-start-btn:hover:not(:disabled){
  filter:brightness(1.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 16px rgba(63,186,255,.22);
}

.op-research-start-btn:disabled{
  cursor:not-allowed;
  border-color:rgba(126,141,188,.30);
  background:linear-gradient(180deg,rgba(45,57,94,.84),rgba(27,35,68,.90));
  color:#8490b2;
  text-shadow:none;
  box-shadow:none;
}

.op-research-start-btn.unaffordable:disabled,
.op-research-start-btn.locked:disabled{
  border-color:rgba(224,89,113,.34);
  color:#d48a9a;
  background:linear-gradient(180deg,rgba(91,36,54,.72),rgba(52,23,38,.82));
}

.op-research-node-countdown{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:39px;
  padding:0 11px;
  border:1px solid rgba(80,255,183,.42);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(19,100,75,.44),rgba(9,52,44,.58));
}

.op-research-node-countdown strong{
  color:#a7ffe1;
  font-size:14px;
  text-shadow:0 0 10px rgba(91,255,206,.48);
}

.op-research-pan-hint{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  max-width:calc(100% - 24px);
  padding:7px 11px;
  border:1px solid rgba(69,96,173,.42);
  border-radius:999px;
  background:rgba(4,9,25,.84);
  color:#8d9cc3;
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
  pointer-events:none;
  backdrop-filter:blur(7px);
}

@media (max-width:900px){
  .op-research-header{
    flex-direction:column;
  }

  .op-research-account-state{
    box-sizing:border-box;
    width:100%;
    flex-basis:auto;
  }

  .op-research-summary-grid{
    grid-template-columns:1fr;
  }

  .op-research-summary-card{
    min-height:58px;
  }

  .op-research-summary-card > span{
    writing-mode:horizontal-tb;
    transform:none;
    grid-column:1 / -1;
    grid-row:auto;
  }

  .op-research-summary-card strong,
  .op-research-summary-card small{
    grid-column:1 / -1;
  }

  .op-research-viewport{
    height:590px;
  }
}

@media (max-width:640px){
  .op-research-shell{
    padding:11px;
  }

  .op-research-header h2{
    font-size:28px;
  }

  .op-research-toolbar{
    align-items:flex-start;
    flex-direction:column;
    padding:8px;
  }

  .op-research-legend{
    gap:9px;
  }

  .op-research-controls{
    width:100%;
  }

  .op-research-controls button.wide{
    flex:1 1 auto;
  }

  .op-research-viewport{
    height:510px;
  }

  .op-research-pan-hint{
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:8px;
  }
}