.otSection {
  background: radial-gradient(circle at 12% 8%, rgba(60, 201, 168, .09), transparent 29%), #071218;
}

.otSection .panel { min-width: 0; }

.otGuideFlow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 0 .8rem;
  border: 1px solid #29434d;
  background: #29434d;
}

.otGuideFlow div { padding: 1rem; background: #091920; }
.otGuideFlow b, .otGuideFlow span { display: block; }
.otGuideFlow b { color: #69dfc1; font: 700 1.08rem "Barlow Condensed", sans-serif; }
.otGuideFlow span { margin-top: .28rem; color: #a6bac2; font-size: .84rem; }

.otSetupGrid,
.otWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  gap: .8rem;
  margin-bottom: .8rem;
}

.otSetup, .otEntry, .otPlotPanel, .otReview, .otTablePanel { padding: 1rem; }

.otPanelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .8rem;
}

.otPanelHead h3 { margin-top: .15rem; color: #edf6f7; font-size: 1.5rem; }
.otEyebrow { margin: 0; color: #63dabc; font-size: .7rem; font-weight: 800; letter-spacing: .14em; }

.otStatus,
.otQuality {
  flex: 0 0 auto;
  max-width: 48%;
  border: 1px solid #34535e;
  border-radius: 999px;
  padding: .3rem .6rem;
  color: #abc0c7;
  font-size: .75rem;
  line-height: 1.3;
  text-align: right;
}

.otStatus.good, .otQuality.good { border-color: #2f806b; color: #8ee5c7; }
.otStatus.warn, .otQuality.warn { border-color: #836b2c; color: #f4d477; }
.otStatus.error, .otQuality.error { border-color: #84434e; color: #ff9ca9; }

.otContextGrid,
.otEntryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}

.otContextGrid .otWide { grid-column: span 2; }
.otEntryGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.otSection label {
  display: grid;
  align-content: start;
  gap: .32rem;
  min-width: 0;
  color: #adbec5;
  font-size: .875rem;
  font-weight: 600;
}

.otSection input,
.otSection select,
.otSection textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #31515b;
  border-radius: 6px;
  padding: .62rem .7rem;
  background: #061117;
  color: #edf6f7;
  font: inherit;
}

.otSection textarea {
  min-height: 98px;
  resize: vertical;
  font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.otSection input:focus-visible,
.otSection select:focus-visible,
.otSection textarea:focus-visible,
.otSection button:focus-visible,
.otFileButton:focus-within { outline: 2px solid #75e5ca; outline-offset: 2px; }

.otSection button,
.otFileButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid #3b5962;
  border-radius: 6px;
  padding: .58rem .75rem;
  background: #102129;
  color: #dcebee;
  cursor: pointer;
  font: inherit;
}

.otSection button.primary { border-color: #4bd3b2; background: #4bd3b2; color: #001712; font-weight: 800; }
.otEntryGrid button { align-self: end; }
.otImport { margin-top: .8rem; border-top: 1px solid #29414a; padding-top: .72rem; }
.otImport summary { color: #c0d2d8; cursor: pointer; font-weight: 750; }
.otImport p, .otReviewEmpty p { color: #91a9b2; font-size: .82rem; }

.otActions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .65rem; }
.otFileButton { position: relative; }
.otFileButton input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.otSummary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-bottom: .8rem;
  border: 1px solid #29434d;
  background: #29434d;
}

.otSummary article { min-width: 0; padding: 1rem; background: #07141a; }
.otSummary small, .otSummary strong, .otSummary span { display: block; }
.otSummary small { color: #70909b; font-size: .67rem; font-weight: 800; letter-spacing: .1em; }
.otSummary strong { margin-top: .25rem; color: #f2f8fa; font: 700 1.65rem "Barlow Condensed", sans-serif; }
.otSummary span { color: #95aab3; font-size: .76rem; }

.otWorkspace { grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); }
.otCanvasShell { position: relative; min-height: 480px; border: 1px solid #29444e; background: #061117; overflow: hidden; }
.otCanvasShell canvas { display: block; width: 100%; height: 480px; touch-action: pan-y; }
.otCanvasEmpty { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); color: #42616b; font: 700 1.5rem "Barlow Condensed", sans-serif; text-align: center; letter-spacing: .08em; pointer-events: none; }
.otCanvasEmpty small { color: #617b84; font: .75rem Inter, sans-serif; letter-spacing: 0; }

.otLegend { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .6rem; color: #92aab2; font-size: .76rem; }
.otLegend span { display: inline-flex; align-items: center; gap: .35rem; }
.otLegend i { width: 18px; height: 3px; border-radius: 2px; background: #778d95; }
.otLegend .high { background: #56d8b7; }
.otLegend .low { background: #f2b94b; }
.otLegend .outside { background: #65747a; }

.otForecastText { border-left: 3px solid #55dbba; padding: .72rem .8rem; background: rgba(58, 194, 161, .07); color: #dbecef; line-height: 1.55; }
.otReview ul { margin: .85rem 0 0; padding-left: 1.2rem; color: #a9bdc4; font-size: .84rem; line-height: 1.5; }
.otReview li + li { margin-top: .42rem; }

.otTableWrap { overflow-x: auto; border: 1px solid #29434d; }
.otTableWrap table { width: 100%; min-width: 980px; border-collapse: collapse; }
.otTableWrap th { padding: .55rem .6rem; background: #0d2028; color: #84a0aa; font-size: .68rem; letter-spacing: .08em; text-align: left; }
.otTableWrap td { border-top: 1px solid #243c45; padding: .58rem .6rem; color: #c8d8dd; font-size: .8rem; vertical-align: top; }
.otTableWrap tr.otOutside td { opacity: .58; }
.otTableWrap td small { display: block; margin-top: .1rem; color: #7f979f; font-size: .7rem; }
.otTableWrap input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: #4bd3b2; }
.otRowActions { white-space: nowrap; }
.otRowActions button { min-height: 32px; padding: .35rem .5rem; font-size: .74rem; }
.otFlag { color: #f4ca69; }
.otEmptyRow td { padding: 1.5rem; color: #748d96; text-align: center; }

.otMethod { margin: .85rem 0 0; border: 1px solid #394951; padding: .85rem; background: #0b151a; color: #9bb0b8; font-size: .8rem; line-height: 1.55; }
.otMethod b { color: #e8f1f4; }
.otSources { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin-top: .65rem; color: #718b95; font-size: .74rem; }
.otSources b { color: #a9bdc4; }
.otSources a { color: #6dddc2; }

@media (max-width: 1040px) {
  .otSetupGrid, .otWorkspace { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .otGuideFlow { grid-template-columns: 1fr; }
  .otContextGrid, .otEntryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .otContextGrid .otWide { grid-column: span 2; }
  .otSummary { grid-template-columns: repeat(2, 1fr); }
  .otPanelHead { align-items: stretch; flex-direction: column; }
  .otStatus, .otQuality { max-width: none; text-align: left; }
}

@media (max-width: 520px) {
  .otContextGrid, .otEntryGrid { grid-template-columns: 1fr; }
  .otContextGrid .otWide { grid-column: auto; }
  .otSummary { grid-template-columns: 1fr 1fr; }
  .otCanvasShell { min-height: 390px; }
  .otCanvasShell canvas { height: 390px; }
  .otTableWrap { overflow: visible; border: 0; }
  .otTableWrap table, .otTableWrap tbody, .otTableWrap tr, .otTableWrap td { display: block; width: 100%; min-width: 0; }
  .otTableWrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .otTableWrap tr { margin-bottom: .55rem; border: 1px solid #29434d; background: #08161d; }
  .otTableWrap td { display: grid; grid-template-columns: 42% 1fr; gap: .5rem; border-top: 1px solid #203740; padding: .55rem .65rem; text-align: right; }
  .otTableWrap td::before { content: attr(data-label); color: #75919b; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
  .otTableWrap td:first-child { border-top: 0; }
  .otRowActions { display: flex !important; justify-content: flex-end; }
  .otRowActions::before { margin-right: auto; }
}

@media print {
  body.otPrinting > * { display: none !important; }
  body.otPrinting main, body.otPrinting #offset-tops, body.otPrinting #offset-tops .wrap { display: block !important; }
  body.otPrinting #offset-tops { padding: 0; background: #fff; color: #111; }
  body.otPrinting #offset-tops .toolTitle button,
  body.otPrinting .otEntry,
  body.otPrinting .otGuideFlow,
  body.otPrinting .otActions,
  body.otPrinting .otSources { display: none !important; }
  body.otPrinting .otSetupGrid, body.otPrinting .otWorkspace { display: block; }
  body.otPrinting .otSetup, body.otPrinting .otPlotPanel, body.otPrinting .otReview, body.otPrinting .otTablePanel, body.otPrinting .otSummary { break-inside: avoid; margin-bottom: 12px; border: 1px solid #bbb; background: #fff; }
  body.otPrinting .otSection *, body.otPrinting .otSummary strong, body.otPrinting .otMethod b { color: #111 !important; }
  body.otPrinting .otCanvasShell { min-height: 360px; background: #fff; }
  body.otPrinting .otCanvasShell canvas { height: 360px; }
  body.otPrinting .otTableWrap { overflow: visible; }
  body.otPrinting .otTableWrap table { min-width: 0; font-size: 8px; }
  body.otPrinting .otMethod { background: #fff; }
}