:root{
  /* Original palette (NOT Cliphorium) */
  --bg0:#070A12;
  --bg1:#0B1020;
  --panel:#0F1630cc;
  --panel2:#0B1228cc;
  --border:#FFFFFF14;

  --text:#EAF0FF;
  --muted:#A9B4D6;

  --a1:#6EE7FF;     /* ice-cyan */
  --a2:#A78BFA;     /* violet */
  --a3:#FF4FD8;     /* magenta */
  --good:#46F0A6;
  --warn:#FFDB6E;
  --bad:#FF5B7A;

  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --radius: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(110,231,255,.12), transparent 60%),
              radial-gradient(900px 600px at 70% 20%, rgba(167,139,250,.11), transparent 60%),
              radial-gradient(900px 700px at 60% 90%, rgba(255,79,216,.10), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}

.bg{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
.bgGlow{ position:absolute; filter: blur(60px); opacity:.8; }
.bgGlow.g1{ width:520px; height:520px; left:-120px; top:-140px; background: rgba(110,231,255,.18); }
.bgGlow.g2{ width:520px; height:520px; right:-140px; top:-140px; background: rgba(167,139,250,.16); }
.bgGlow.g3{ width:520px; height:520px; left:20%; bottom:-220px; background: rgba(255,79,216,.14); }

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  backdrop-filter: blur(10px);
  background: rgba(5,8,18,.65);
  border-bottom:1px solid var(--border);
}

.brand{ display:flex; align-items:center; gap:12px; }
.logo{
  width:34px; height:34px;
  border-radius:12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(110,231,255,.9), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,79,216,.8), transparent 55%),
    linear-gradient(135deg, rgba(167,139,250,.75), rgba(110,231,255,.35));
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.35);
}
.brandTitle{ font-weight:800; letter-spacing:.2px; font-size:16px; }
.brandSub{ color:var(--muted); font-size:12px; margin-top:2px; }

.statusRow{ display:flex; gap:10px; align-items:center; }
.pill{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  color:var(--muted);
  font-size:12px;
}
.pill.ghost{ opacity:.85; }
.sep{ opacity:.55; padding:0 4px; }
.dot{ width:8px; height:8px; border-radius:50%; background:#777; box-shadow:0 0 0 2px rgba(0,0,0,.2) inset; }
.dot.ok{ background: var(--good); }
.dot.off{ background:#6b7280; }
.dot.bad{ background: var(--bad); }

.wrap{ max-width: 1180px; margin: 18px auto 36px; padding: 0 14px; }

.layout{
  display:grid;
  grid-template-columns: minmax(520px, 1fr) 360px;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .builder{ order: 99; }
}

.panel{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,22,48,.82), rgba(11,18,40,.72));
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  padding:14px;
}
.panelHead{ margin-bottom:10px; }
.panelTitle{ font-weight:800; font-size:14px; letter-spacing:.2px; }
.panelSub{ color:var(--muted); font-size:12px; margin-top:3px; }

.row{ margin-top:10px; }
.btnRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spacer{ flex:1; }

.ta{
  width:100%;
  min-height: 120px;
  resize: vertical;
  border-radius: 14px;
  padding: 12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}
.ta:focus{ border-color: rgba(110,231,255,.35); box-shadow: 0 0 0 3px rgba(110,231,255,.10); }

.btn{
  appearance:none;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{ background: rgba(255,255,255,.09); }
.btn.primary{
  border-color: rgba(110,231,255,.32);
  background: linear-gradient(135deg, rgba(110,231,255,.22), rgba(167,139,250,.18));
  box-shadow: 0 0 0 1px rgba(110,231,255,.15) inset;
}
.btn.primary:hover{
  background: linear-gradient(135deg, rgba(110,231,255,.28), rgba(167,139,250,.22));
}

.mini{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px; }
.miniInput{
  width:70px;
  padding:7px 8px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.22);
  color: var(--text);
}

.banner{
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #ffffff12;
  background: rgba(255,255,255,.05);
  color: var(--muted);
}
.banner.warn{
  border-color: rgba(255,219,110,.35);
  background: rgba(255,219,110,.08);
  color: #ffe8a8;
}
.banner.good{
  border-color: rgba(70,240,166,.30);
  background: rgba(70,240,166,.08);
  color: #bfffe6;
}

.cards{ display:flex; flex-direction:column; gap:10px; }

.card{
  border-radius: 16px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  padding: 10px 12px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.cardMain{ flex:1; min-width: 0; }
.cardTitle{ font-weight:900; letter-spacing:.2px; }
.cardSub{ color:var(--muted); font-size:12px; margin-top:2px; }
.cardMeta{
  display:flex; gap:10px; flex-wrap:wrap;
  color: var(--muted);
  font-size:12px;
  margin-top:8px;
}
.tag{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
}
.tag.good{ border-color: rgba(70,240,166,.35); color:#bfffe6; }
.tag.warn{ border-color: rgba(255,219,110,.35); color:#ffe8a8; }
.tag.bad{ border-color: rgba(255,91,122,.35); color:#ffc2cf; }

.cardActions{ display:flex; flex-direction:column; gap:8px; }
.iconBtn{
  width:36px; height:36px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  font-weight:900;
}
.iconBtn:hover{ background: rgba(255,255,255,.10); }

.details{
  margin-top: 10px;
  border:1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  padding: 10px 12px;
}
.details > summary{
  cursor:pointer;
  color: var(--muted);
  font-weight:700;
}
.pre{
  margin: 10px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  color: #dfe7ff;
  background: rgba(0,0,0,.18);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
}

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 720px){ .grid2{ grid-template-columns: 1fr; } }
.field span{ display:block; color:var(--muted); font-size:12px; margin-bottom:6px; }
.inp{
  width:100%;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}
.inp:focus{ border-color: rgba(110,231,255,.35); box-shadow: 0 0 0 3px rgba(110,231,255,.10); }

.builderList{ display:flex; flex-direction:column; gap:10px; margin-top: 10px; }
.bItem{
  display:flex; gap:10px; align-items:center;
  padding:10px 10px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
}
.drag{ cursor:grab; user-select:none; opacity:.85; padding:0 6px; }
.bMain{ flex:1; min-width:0; }
.bName{ font-weight:900; }
.bDesc{ color:var(--muted); font-size:12px; margin-top:2px; }
.bBtns{ display:flex; gap:8px; }
.miniText{ color:var(--muted); font-size:12px; line-height:1.35; }

/* ===========================
   Tracker UI polish (DarkGlass)
   =========================== */

#trackerCard{
  border: 1px solid rgba(255,255,255,.10);
}

#trackerCard .cardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

#trackerCard .cardBody{
  padding-top: 10px;
}

#trackerCard .metricGrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}

@media (max-width: 980px){
  #trackerCard .metricGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#trackerCard .metric{
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

#trackerCard .metric .k{
  font-size: 11px;
  opacity: .8;
  letter-spacing: .2px;
  text-transform: uppercase;
}

#trackerCard .metric .v{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 800;
}

#trkRecent{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  max-height: 260px;
  overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.35;
}

#trkRecent::-webkit-scrollbar{ height:10px; width:10px; }
#trkRecent::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 10px;
}
#trkRecent::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
  border-radius: 10px;
}

#trkSaveSlipBtn{
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  border: 1px solid rgba(110,231,255,.30);
  background: rgba(110,231,255,.10);
}

#trkSaveSlipBtn:hover{
  background: rgba(110,231,255,.16);
}


/* Tracker settle row */
#trackerCard .trkSettleRow{
  display:grid;
  grid-template-columns: 110px 110px 1fr 140px;
  gap:10px;
  margin-top:10px;
  align-items:end;
}
#trackerCard .trkField label{
  display:block;
  font-size:12px;
  opacity:.85;
  margin-bottom:6px;
}
#trackerCard .trkField input,
#trackerCard .trkField select{
  width:100%;
}
#trackerCard .trkFieldBtn button{
  width:100%;
}
#trackerCard .trkTiny{
  margin-top:8px;
  font-size:12px;
  opacity:.85;
}
@media (max-width: 920px){
  #trackerCard .trkSettleRow{ grid-template-columns: 1fr 1fr; }
}

/* ===========================
   Tracker UI V2 (dropdown + settle)
   =========================== */
#trackerCard .trkHR{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 12px 0;
}
#trackerCard .trkRow{
  display:grid;
  grid-template-columns: 1.3fr 0.7fr 0.8fr;
  gap:10px;
  align-items:end;
}
#trackerCard .trkSettleRow{
  display:grid;
  grid-template-columns: 0.7fr 0.7fr 1.2fr 1fr;
  gap:10px;
  margin-top:10px;
  align-items:end;
}
#trackerCard .trkField label{
  display:block;
  font-size:12px;
  opacity:.85;
  margin-bottom:6px;
}
#trackerCard select, #trackerCard input{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,14,24,.65);
  color: var(--text);
  outline:none;
}
#trackerCard select:focus, #trackerCard input:focus{
  border-color: rgba(110,231,255,.45);
  box-shadow: 0 0 0 3px rgba(110,231,255,.10);
}

/* ===========================
   Tracker UI V2 (dropdown + settle)
   =========================== */
#trackerCard .trkHR{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 12px 0;
}
#trackerCard .trkRow{
  display:grid;
  grid-template-columns: 1.3fr 0.7fr 0.8fr;
  gap:10px;
  align-items:end;
}
#trackerCard .trkSettleRow{
  display:grid;
  grid-template-columns: 0.7fr 0.7fr 1.2fr 1fr;
  gap:10px;
  margin-top:10px;
  align-items:end;
}
#trackerCard .trkField label{
  display:block;
  font-size:12px;
  opacity:.85;
  margin-bottom:6px;
}
#trackerCard select, #trackerCard input{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,14,24,.65);
  color: var(--text);
  outline:none;
}
#trackerCard select:focus, #trackerCard input:focus{
  border-color: rgba(110,231,255,.45);
  box-shadow: 0 0 0 3px rgba(110,231,255,.10);
}

/* Dot pill status (restored) */
#dot.dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  margin-right:8px;
  background: rgba(255,255,255,.25);
}
#dot.on{
  background:#46F0A6;
  box-shadow: 0 0 10px rgba(70,240,166,.75);
}
#dot.off{
  background: rgba(255,255,255,.25);
  box-shadow:none;
}

/* ===== Recommend cards: keep Add button on the far right ===== */
#recCards .recCard .row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#recCards .recCard .addLegBtn {
  margin-left: auto;
  flex: 0 0 auto;
}

/* If button wraps under text on small widths, keep layout stable */
#recCards .recCard .row > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

/* stronger override for inline row layout */
#recCards .recCard .row {
  justify-content: space-between !important;
}
#recCards .recCard .addLegBtn {
  margin-left: 12px !important;
}

/* ===== Force Add button to right in recommendation cards ===== */
#recCards .addLegBtn{
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  float: right !important;
}

/* If button lives in a non-flex wrapper, make parent row flex */
#recCards .recCard > .row,
#recCards .recCard .row{
  display: flex !important;
  align-items: center !important;
  width: 100%;
}

/* Let text/content take available space so button can push right */
#recCards .recCard > .row > :first-child,
#recCards .recCard .row > :first-child{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ===== Nuclear option: pin Add button top-right of each card ===== */
#recCards .recCard{
  position: relative !important;
}
#recCards .recCard .addLegBtn{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  margin: 0 !important;
  z-index: 2;
}
#recCards .recCard .row{
  padding-right: 44px !important; /* prevent text overlap */
}

/*__RECENT_SLIPS_CSS_V1__*/
#recentSlipsMount .trkRecentList{
  max-height: 220px;
  overflow: auto;
  padding-right: 6px;
}
#recentSlipsMount .trkRow{
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  margin: 8px 0;
  background: rgba(10,12,18,.35);
}

/*__RECENT_SLIPS_POLISH_V2__*/
#recentSlipsMount{
  margin-top: 8px;
}
#recentSlipsMount .trkRecentList{
  max-height: 280px;
  overflow: auto;
  padding-right: 6px;
}
#recentSlipsMount .trkRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  margin: 10px 0;
  background: rgba(10,12,18,.42);
  backdrop-filter: blur(8px);
}
#recentSlipsMount .trkRow:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(14,18,28,.55);
}
#recentSlipsMount .trkLeft{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
#recentSlipsMount .trkTopLine{
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
}
#recentSlipsMount .trkId{
  font-weight: 700;
}
#recentSlipsMount .trkMeta{
  opacity:.78;
  font-size: 12px;
  white-space:nowrap;
}
#recentSlipsMount .trkRight{
  display:flex;
  align-items:center;
  gap:10px;
}
#recentSlipsMount .pill{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  white-space:nowrap;
}
#recentSlipsMount .pill.win{ border-color: rgba(70,240,166,.35); }
#recentSlipsMount .pill.loss{ border-color: rgba(255,91,122,.35); }
#recentSlipsMount .pill.push{ border-color: rgba(255,219,110,.35); }
#recentSlipsMount .pill.pending{ opacity:.75; }

/* ===== FINAL solid unified panel theme ===== */

:root{
  --solid-bg:#08111d;
  --solid-bg2:#0b1626;
  --solid-panel:#11243a;
  --solid-card:#0b1422;
  --solid-border:rgba(255,255,255,.08);
  --solid-text:#edf4ff;
  --solid-muted:#9db0cc;
  --solid-shadow:0 12px 30px rgba(0,0,0,.28);
}

html,body{
  background: linear-gradient(180deg, var(--solid-bg), var(--solid-bg2)) !important;
  color: var(--solid-text) !important;
}

.bg,
.bgGlow,
.g1,.g2,.g3{
  display:none !important;
}

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 14px 28px;
}

.layout{
  display:grid !important;
  grid-template-columns:minmax(0,1.28fr) minmax(320px,0.92fr) !important;
  gap:18px !important;
  align-items:start !important;
}

.topbar,
.panel,
.builder,
.card,
.metric,
.banner,
.details,
.recCard,
.leg,
#trackerCard,
#trackerCard .cardBody{
  background: var(--solid-panel) !important;
  background-image: none !important;
  opacity: 1 !important;
  border: 1px solid var(--solid-border) !important;
  box-shadow: var(--solid-shadow) !important;
  color: var(--solid-text) !important;
}

.panel,
.builder,
.card,
#trackerCard{
  border-radius: 18px !important;
}

.metric,
.banner,
.recCard,
.leg,
.details{
  border-radius: 14px !important;
}

.panelHead,
.cardHeader{
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.panelTitle,
.cardTitle,
.brandTitle{
  color: var(--solid-text) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
}

.panelSub,
.brandSub,
.miniText,
.helper,
small,
summary,
th,
label span{
  color: var(--solid-muted) !important;
}

.ta,
.inp,
textarea,
input,
select{
  background: var(--solid-card) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--solid-text) !important;
  border-radius: 12px !important;
  min-height: 44px;
  opacity: 1 !important;
}

.ta:focus,
.inp:focus,
textarea:focus,
input:focus,
select:focus{
  outline:none;
  border-color: rgba(102,216,255,.40) !important;
  box-shadow: 0 0 0 3px rgba(102,216,255,.12) !important;
}

.btn,
button{
  min-height: 42px;
  border-radius: 12px !important;
  border: 1px solid rgba(102,216,255,.20) !important;
  background: #17324e !important;
  color: var(--solid-text) !important;
  font-weight: 600;
}

.btn.primary{
  background: #0f5f8b !important;
}

.pill,
.badge,
.chip{
  background: #17324e !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--solid-text) !important;
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:8px 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

pre{
  background:#09121f !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:12px !important;
}

#trackerCard{
  margin-top:16px !important;
}

@media (max-width: 899px){
  .layout{
    grid-template-columns:1fr !important;
  }
}

/* __PORTFOLIO_POLISH_V1__ */
.colLeft{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.layout{
  grid-template-columns: minmax(0, 1fr) 332px;
  gap:18px;
}

.builder{
  align-self:start;
}

.card,
#trackerCard,
#learningInsightsPanel{
  background: linear-gradient(180deg, rgba(15,22,48,.80), rgba(11,18,40,.70));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), var(--shadow);
}

#trackerCard{
  margin-top:14px !important;
}

.miniText{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.details > summary,
.foldPanel > summary{
  font-size:12px;
  font-weight:700;
}

#recSummary,
#builderEmpty{
  min-height:42px;
  display:flex;
  align-items:center;
}

#rawJsonPre,
#recJson,
#evalJson,
#shareText,
.monoBlock{
  background: rgba(3,8,20,.42);
}

.foldPanel{
  margin-top:14px;
  background: rgba(255,255,255,.03);
}

.foldPanel > summary{
  color:var(--muted);
}

#trkRecent{
  font-size:12px;
  line-height:1.45;
}

@media (max-width: 980px){
  .layout{
    grid-template-columns: 1fr;
  }
}

/* === appended: workshop + recent slips polish === */

/* === Workshop + Recent Slips structure polish === */

/* Give section blocks a consistent surface if they already use common containers */
.section,
.panel,
.card,
.module,
.tracker,
.workshop,
.leg-builder,
.recent-slips {
  border-radius: 18px;
}

/* Workshop area: make it read like its own module */
[id*="workshop"],
[class*="workshop"],
[id*="builder"],
[class*="builder"] {
  margin-top: 18px;
}

/* Tracker controls often bunch together too tightly */
[id*="tracker"] select,
[id*="tracker"] input,
[id*="tracker"] button,
[class*="tracker"] select,
[class*="tracker"] input,
[class*="tracker"] button {
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Recent slips area should feel secondary, not like a headline */
[id*="recent"],
[class*="recent"] {
  margin-top: 12px;
}

/* Reduce visual noise from duplicate tiny labels and empty helper blocks */
small,
.helper,
.muted,
.hint {
  opacity: 0.82;
}

/* === appended: workshop + recent slips polish === */

/* === Workshop + Recent Slips structure polish === */

/* Give section blocks a consistent surface if they already use common containers */
.section,
.panel,
.card,
.module,
.tracker,
.workshop,
.leg-builder,
.recent-slips {
  border-radius: 18px;
}

/* Workshop area: make it read like its own module */
[id*="workshop"],
[class*="workshop"],
[id*="builder"],
[class*="builder"] {
  margin-top: 18px;
}

/* Tracker controls often bunch together too tightly */
[id*="tracker"] select,
[id*="tracker"] input,
[id*="tracker"] button,
[class*="tracker"] select,
[class*="tracker"] input,
[class*="tracker"] button {
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Recent slips area should feel secondary, not like a headline */
[id*="recent"],
[class*="recent"] {
  margin-top: 12px;
}

/* Reduce visual noise from duplicate tiny labels and empty helper blocks */
small,
.helper,
.muted,
.hint {
  opacity: 0.82;
}

/* === PORTFOLIO POLISH V1: visual-only, no module moves === */

:root{
  --bg-0:#06080d;
  --bg-1:#0b1220;
  --bg-2:#0f1728;
  --panel:#101a2b;
  --panel-2:#0d1524;
  --line:rgba(255,255,255,.08);
  --text:#ecf3ff;
  --muted:#9fb0c9;
  --cyan:#67e8f9;
  --violet:#8b5cf6;
  --green:#34d399;
  --shadow:0 20px 50px rgba(0,0,0,.35);
  --radius:18px;
}

html,body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(103,232,249,.10), transparent 50%),
    radial-gradient(900px 500px at 100% 0%, rgba(139,92,246,.10), transparent 45%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 45%, #09111d 100%);
  color:var(--text);
}

/* Hide the weak top banner/title strip without touching module content */
body > h1:first-of-type,
body > .banner:first-of-type,
body > header:first-of-type{
  display:none !important;
}

/* Global shell rhythm */
main,
.wrap,
.container,
.app,
.shell{
  max-width:1360px;
  margin:0 auto;
  padding-left:18px;
  padding-right:18px;
}

/* Stronger premium panels */
.panel,
.card,
.builder,
section.panel,
aside.panel,
#trackerCard{
  background:linear-gradient(180deg, rgba(16,26,43,.96), rgba(12,20,35,.96));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}

/* Better hierarchy */
.panelHead,
.cardHeader{
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:14px;
}

.panelTitle,
.cardTitle{
  color:var(--text);
  font-weight:800;
  letter-spacing:.01em;
}

.panelSub,
.miniText,
.helper,
.muted,
.summary,
.k{
  color:var(--muted);
}

/* Accent certain key section titles subtly */
.panelTitle,
.cardTitle{
  position:relative;
}
.panelTitle::after,
.cardTitle::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  margin-top:8px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), var(--violet), var(--green));
  opacity:.9;
}

/* Inputs */
input,
select,
textarea,
pre{
  background:rgba(7,12,20,.72);
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
}

textarea{
  min-height:150px;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:rgba(103,232,249,.55);
  box-shadow:0 0 0 3px rgba(103,232,249,.12);
}

/* Buttons */
.btn,
button{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn:hover,
button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.btn.primary,
button.primary{
  background:linear-gradient(135deg, rgba(103,232,249,.18), rgba(139,92,246,.18));
  border-color:rgba(103,232,249,.35);
  color:var(--text);
}

/* Metric cards feel more premium */
.metric{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
}

/* Details blocks */
.details{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px 12px;
}
.details > summary{
  cursor:pointer;
  color:var(--text);
  font-weight:700;
}

/* Make recent slips and tracker feel secondary vs builder/recommend */
#trackerCard,
#trackerSectionStandalone,
#recentSlipsSection{
  margin-top:18px;
}

#recentSlipsSection .panelTitle::after,
#trackerCard .cardTitle::after{
  opacity:.65;
}

/* Tables */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
}
th{
  background:rgba(255,255,255,.04);
  color:var(--text);
}
td{
  color:#d8e3f6;
}
th,td{
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:10px 12px;
}

/* Desktop spacing */
.panel,
.card,
section.panel,
aside.panel{
  margin-bottom:20px;
}

/* Mobile tightening */
@media (max-width: 820px){
  main,
  .wrap,
  .container,
  .app,
  .shell{
    padding-left:12px;
    padding-right:12px;
  }

  .panel,
  .card,
  section.panel,
  aside.panel{
    border-radius:16px;
    margin-bottom:14px;
  }

  textarea{
    min-height:120px;
  }

  .panelHead,
  .cardHeader{
    margin-bottom:10px;
    padding-bottom:8px;
  }
}

/* === Workflow polish: Recommend -> Leg Builder -> Slip Workshop -> Quick Eval === */

#slipWorkshopSection{
  margin-top: 18px;
}

#slipWorkshopSection > #slipWorkshopHost{
  display:block;
  width:100%;
}

.builder.panel{
  align-self:start;
}

@media (min-width: 1100px){
  #slipWorkshopSection{
    max-width: 100%;
  }
}

/* === Portfolio Hero === */

.portfolioHero{
  max-width: 1360px;
  margin: 18px auto 14px;
  padding: 0 18px;
}

.portfolioHero__inner{
  position: relative;
  overflow: hidden;
  padding: 26px 28px 24px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 220px at 0% 0%, rgba(103,232,249,.10), transparent 55%),
    radial-gradient(700px 260px at 100% 0%, rgba(139,92,246,.10), transparent 50%),
    linear-gradient(180deg, rgba(16,26,43,.96), rgba(11,18,32,.96));
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

.portfolioHero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c7dcff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.portfolioHero__title{
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #eef4ff;
}

.portfolioHero__sub{
  max-width: 860px;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #aebddb;
}

.portfolioHero__pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.portfolioPill{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  color: #eaf2ff;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
}

@media (max-width: 820px){
  .portfolioHero{
    padding: 0 12px;
    margin: 14px auto 12px;
  }

  .portfolioHero__inner{
    padding: 20px 18px 18px;
    border-radius: 18px;
  }

  .portfolioHero__sub{
    font-size: 14px;
  }

  .portfolioHero__pills{
    gap: 8px;
    margin-top: 14px;
  }
}

/* === Portfolio Hero === */

.portfolioHero{
  max-width: 1360px;
  margin: 18px auto 14px;
  padding: 0 18px;
}

.portfolioHero__inner{
  position: relative;
  overflow: hidden;
  padding: 26px 28px 24px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 220px at 0% 0%, rgba(103,232,249,.10), transparent 55%),
    radial-gradient(700px 260px at 100% 0%, rgba(139,92,246,.10), transparent 50%),
    linear-gradient(180deg, rgba(16,26,43,.96), rgba(11,18,32,.96));
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

.portfolioHero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c7dcff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.portfolioHero__title{
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #eef4ff;
}

.portfolioHero__sub{
  max-width: 860px;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #aebddb;
}

.portfolioHero__pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.portfolioPill{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  color: #eaf2ff;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
}

@media (max-width: 820px){
  .portfolioHero{
    padding: 0 12px;
    margin: 14px auto 12px;
  }

  .portfolioHero__inner{
    padding: 20px 18px 18px;
    border-radius: 18px;
  }

  .portfolioHero__sub{
    font-size: 14px;
  }

  .portfolioHero__pills{
    gap: 8px;
    margin-top: 14px;
  }
}

/* === Hide stale/orphan top summary widgets that are not part of the current shell === */
body > .card:first-of-type,
body > .summary:first-of-type,
body > .tracker-summary:first-of-type,
body > .slip-summary:first-of-type,
.wrap > .card:first-of-type .cardTitle:first-child,
.wrap > section:first-of-type .cardTitle:first-child {
  display: none !important;
}

/* More targeted kill-switches if old summary markup still mounts */
#trackerSummaryMount,
#slipSummaryMount,
#topSummaryMount,
[data-summary="top"],
[data-widget="tracker-summary"],
[data-widget="slip-summary"] {
  display: none !important;
}

/* === Hide stale/orphan top summary widgets that are not part of the current shell === */
body > .card:first-of-type,
body > .summary:first-of-type,
body > .tracker-summary:first-of-type,
body > .slip-summary:first-of-type,
.wrap > .card:first-of-type .cardTitle:first-child,
.wrap > section:first-of-type .cardTitle:first-child {
  display: none !important;
}

/* More targeted kill-switches if old summary markup still mounts */
#trackerSummaryMount,
#slipSummaryMount,
#topSummaryMount,
[data-summary="top"],
[data-widget="tracker-summary"],
[data-widget="slip-summary"] {
  display: none !important;
}

/* === Hide orphan top summary / tracker summary block === */
body > .card:first-of-type,
body > .summary:first-of-type,
body > .tracker-summary:first-of-type,
body > .slip-summary:first-of-type,
#trackerSummaryMount,
#slipSummaryMount,
#topSummaryMount,
[data-widget="tracker-summary"],
[data-widget="slip-summary"] {
  display: none !important;
}

/* === Recommendation card add-button spacing === */
.recCard .addBtn,
.rec-card .addBtn,
.recCard button[title*="Add"],
.rec-card button[title*="Add"],
.recCard button[aria-label*="Add"],
.rec-card button[aria-label*="Add"] {
  margin-left: 12px !important;
  flex-shrink: 0;
}

.recCard .right,
.rec-card .right,
.recCard .meta,
.rec-card .meta {
  gap: 12px;
}

/* Give the text block a little room before the add action */
.recCard .stats,
.rec-card .stats,
.recCard .modelMeta,
.rec-card .modelMeta {
  padding-right: 8px;
}

/* === Recommendation card add-button: smaller + cleaner === */
.recCard .addBtn,
.rec-card .addBtn,
.recCard button[title*="Add"],
.rec-card button[title*="Add"],
.recCard button[aria-label*="Add"],
.rec-card button[aria-label*="Add"] {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin-left: 12px !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.recCard .right,
.rec-card .right,
.recCard .meta,
.rec-card .meta {
  gap: 12px !important;
}

/* === Force smaller add button only inside recommendation cards === */
#recCards .recCard .addLegBtn,
#output .recCard .addLegBtn,
.recCard .addLegBtn {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  margin-left: 14px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 28px !important;
}

/* Keep the text block from crowding the button */
#recCards .recCard > .row:first-child,
#output .recCard > .row:first-child,
.recCard > .row:first-child {
  gap: 14px !important;
}

#recCards .recCard > .row:first-child > div:first-child,
#output .recCard > .row:first-child > div:first-child,
.recCard > .row:first-child > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding-right: 6px !important;
}

/* === Recommendation add button: final tighten === */
#recCards .recCard .addLegBtn,
#output .recCard .addLegBtn,
.recCard .addLegBtn {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  flex: 0 0 24px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/* ===== Portfolio frame patch ===== */
html{
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

.portfolioNav{
  position: sticky;
  top: 67px;
  z-index: 9;
  backdrop-filter: blur(10px);
  background: rgba(8,11,22,.52);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.portfolioNav__inner{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding-top:10px;
  padding-bottom:10px;
}

.portfolioNav__inner a{
  color: var(--muted);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  letter-spacing:.15px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.portfolioNav__inner a:hover{
  color: var(--text);
  background: rgba(255,255,255,.08);
}

.portfolioHero{
  padding:22px 14px 4px;
}

.portfolioHero__inner{
  max-width:1180px;
  margin:0 auto;
  padding:28px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 320px at 8% 10%, rgba(110,231,255,.12), transparent 60%),
    radial-gradient(520px 240px at 88% 0%, rgba(167,139,250,.14), transparent 58%),
    linear-gradient(180deg, rgba(15,22,48,.86), rgba(11,18,40,.76));
  box-shadow: var(--shadow);
}

.portfolioHero__eyebrow,
.portfolioSection__eyebrow{
  color:#c8d8ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.portfolioHero__title{
  margin:12px 0 10px;
  font-size:clamp(32px, 5vw, 54px);
  line-height:1.02;
  letter-spacing:-.03em;
}

.portfolioHero__sub,
.portfolioCopy{
  max-width:860px;
  color:#d9e5ff;
  font-size:15px;
  line-height:1.7;
}

.portfolioHero__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.portfolioHero__pills,
.stackChips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.portfolioPill,
.stackChip{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:13px;
  font-weight:700;
}

.portfolioSection{
  margin-top:18px;
}

.portfolioGrid{
  display:grid;
  gap:14px;
}

.portfolioGrid--2{
  grid-template-columns:1.15fr .85fr;
}

.portfolioGrid--context{
  grid-template-columns:1.1fr .9fr;
}

.portfolioCard{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(15,22,48,.82), rgba(11,18,40,.72));
  box-shadow:var(--shadow);
  padding:20px;
}

.portfolioSection__title{
  margin:10px 0 10px;
  font-size:clamp(22px, 3vw, 30px);
  line-height:1.15;
}

.contextGrid,
.proofGrid{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.contextGrid{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.contextItem,
.proofCard{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.contextK{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:6px;
}

.contextV{
  display:block;
  color:var(--text);
  font-size:14px;
  line-height:1.45;
}

.proofGrid{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.proofCard{
  color:var(--text);
  font-weight:700;
  line-height:1.45;
}

.portfolioCard--contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.contactActions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.contactMeta{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

@media (max-width:980px){
  .portfolioGrid--2,
  .portfolioGrid--context{
    grid-template-columns:1fr;
  }

  .portfolioCard--contact{
    flex-direction:column;
    align-items:flex-start;
  }

  .contactActions{
    align-items:flex-start;
  }
}

@media (max-width:720px){
  .portfolioHero{
    padding-left:10px;
    padding-right:10px;
  }

  .portfolioHero__inner{
    padding:22px 18px;
    border-radius:20px;
  }

  .contextGrid,
  .proofGrid{
    grid-template-columns:1fr;
  }

  .portfolioNav{
    top:63px;
  }
}
/* ===== end portfolio frame patch ===== */



/* === Code Samples section === */
.code-samples-card{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.code-samples-head .eyebrow{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9fb4ff;
  background:rgba(110,231,255,.08);
  border:1px solid rgba(110,231,255,.16);
  margin-bottom:12px;
}

.code-samples-head h3{
  margin:0 0 8px;
  font-size:1.35rem;
  line-height:1.2;
  color:#eaf0ff;
}

.code-samples-head p{
  margin:0;
  color:#a9b4d6;
  line-height:1.6;
}

.code-sample-item{
  padding:18px;
  border-radius:18px;
  background:rgba(11,18,40,.72);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 32px rgba(0,0,0,.24);
}

.code-sample-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.code-sample-meta h4{
  margin:0;
  font-size:1rem;
  color:#eaf0ff;
}

.code-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#6ee7ff;
  background:rgba(110,231,255,.10);
  border:1px solid rgba(110,231,255,.18);
}

.code-block{
  margin:0;
  padding:16px 18px;
  overflow:auto;
  border-radius:14px;
  background:#070a12;
  border:1px solid rgba(255,255,255,.08);
  color:#eaf0ff;
  font-size:13px;
  line-height:1.65;
  white-space:pre;
}

.code-block code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.code-caption{
  margin:14px 0 0;
  color:#a9b4d6;
  line-height:1.6;
  font-size:.95rem;
}

@media (max-width: 768px){
  .code-sample-item{
    padding:16px;
  }

  .code-block{
    font-size:12px;
    padding:14px;
  }
}


/* === Code Samples section === */
.code-samples-card{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.code-samples-head .eyebrow{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9fb4ff;
  background:rgba(110,231,255,.08);
  border:1px solid rgba(110,231,255,.16);
  margin-bottom:12px;
}

.code-samples-head h3{
  margin:0 0 8px;
  font-size:1.35rem;
  line-height:1.2;
  color:#eaf0ff;
}

.code-samples-head p{
  margin:0;
  color:#a9b4d6;
  line-height:1.6;
}

.code-sample-item{
  padding:18px;
  border-radius:18px;
  background:rgba(11,18,40,.72);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 32px rgba(0,0,0,.24);
}

.code-sample-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.code-sample-meta h4{
  margin:0;
  font-size:1rem;
  color:#eaf0ff;
}

.code-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#6ee7ff;
  background:rgba(110,231,255,.10);
  border:1px solid rgba(110,231,255,.18);
}

.code-block{
  margin:0;
  padding:16px 18px;
  overflow:auto;
  border-radius:14px;
  background:#070a12;
  border:1px solid rgba(255,255,255,.08);
  color:#eaf0ff;
  font-size:13px;
  line-height:1.65;
  white-space:pre;
}

.code-block code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.code-caption{
  margin:14px 0 0;
  color:#a9b4d6;
  line-height:1.6;
  font-size:.95rem;
}

@media (max-width: 768px){
  .code-sample-item{
    padding:16px;
  }

  .code-block{
    font-size:12px;
    padding:14px;
  }
}

/* === ui_v2 horizontal code samples layout === */
.code-samples-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.code-sample-item{
  height:100%;
}

.code-block{
  font-size:12px;
  line-height:1.55;
}

@media (max-width: 900px){
  .code-samples-grid{
    grid-template-columns:1fr;
  }
}