/* FabForge Tank Designer styles (Build 2). Written from scratch. */
.tk-banner { border: 1px solid var(--red); border-left: 6px solid var(--red); background: var(--redbg); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; font-size: 15px; }
.tk-banner b { color: var(--red); }
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.tk-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tk-goal { display: flex; flex-direction: column; gap: 10px; }
.tk-goal-row { display: flex; gap: 10px; align-items: center; border: 2px solid var(--amber); border-radius: 10px; padding: 6px 6px 6px 12px; background: var(--bg); }
.tk-goal-row input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--text); font-size: 18px; }
.tk-goal-row input:focus-visible { outline: none; }
.tk-goal-row:focus-within { box-shadow: 0 0 0 3px rgba(255,200,69,.35); }
.tk-pen { color: var(--amber2); font-size: 18px; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-chip { font-family: var(--mono); font-size: 12.5px; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line2); background: var(--bg); }
.tk-chip.amb { border-color: var(--amber); color: var(--amber2); background: var(--amberbg); }
.tk-chip.note { border-style: dashed; color: var(--muted); }
.tk-in details { border-top: 1px solid var(--line); padding: 8px 0; }
.tk-in details:first-of-type { border-top: 0; }
.tk-in summary, .tk-detail summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.tk-in summary .num, .tk-oh .num, .tk-detail .card-h .num { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--amber); color: var(--amber); display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.tk-in .chips { margin: 4px 0 10px; }
.tk-verify { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.tk-verify b { color: var(--amber2); }
.tk-sh { margin: 0 0 8px; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: var(--amber2); }
.tk-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tk-opt { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-width: 2px; }
.tk-opt.sel { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.tk-opt.st-bad { border-color: rgba(240,96,90,.7); }
.tk-oh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-oh h3 { margin: 0; font-size: 16px; flex: 1; min-width: 0; }
.tk-badge { font-size: 11px; font-weight: 800; letter-spacing: .05em; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.tk-badge.best { background: var(--amber); color: #15120a; }
.tk-badge.bad { background: var(--red); color: #1a0d0c; }
.tk-pic { background: #14171b; border: 1px solid var(--line); border-radius: 8px; padding: 4px; text-align: center; }
.tk-svg { display: block; width: 100%; height: auto; }
.tk-svg .st { fill: #cfd5db; font-size: 11px; font-family: var(--mono); }
.tk-svg .sd { fill: #ffc845; font-size: 11px; font-family: var(--mono); }
.tk-svg .sk { fill: #a7b0ba; font-size: 10.5px; font-family: var(--mono); }
.tk-svg .snz { fill: #111316; font-size: 8px; font-weight: 800; font-family: var(--mono); }
.tk-dims { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 2px 0; }
.tk-rows { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.tk-row { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed #2a3037; padding: 2px 0; }
.tk-row span:first-child { color: var(--muted); }
.tk-row b { font-family: var(--mono); font-weight: 600; text-align: right; }
.tk-row .amb, .amb { color: var(--amber2); }
.tk-row .bad, .bad { color: var(--red); }
.tk-row .good, .good { color: var(--green); }
.tk-foot { margin: 0; font-size: 12.5px; color: var(--muted); }
.tk-foot.bad { color: var(--red); font-weight: 700; }
.tk-of { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.tk-st { font-size: 13px; font-weight: 800; }
.tk-st.good { color: var(--green); } .tk-st.warn { color: var(--amber2); } .tk-st.bad { color: var(--red); }
.tk-picked { color: var(--amber2); font-weight: 800; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.tk-hidden { opacity: .75; }
.tk-detail { display: flex; flex-direction: column; gap: 12px; }
.tk-detail .card-h h2 { font-size: 18px; text-transform: uppercase; letter-spacing: .04em; margin: 0; flex: 1; }
.tk-detail details { border-top: 1px solid var(--line); padding-top: 4px; }
.tk-dgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tk-dpic { background: #14171b; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.tk-parts { margin-top: 10px; }
.table tr.bad td { color: var(--red); }
.tk-fill { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tk-fill .fx-in { margin-bottom: 8px; }
.tk-ftab td { padding: 3px 6px; }
.tk-list { margin: 6px 0; padding-left: 20px; color: var(--text); font-size: 14px; }
.tk-list li { margin: 4px 0; }
.tk-list li.warn { color: var(--amber2); }
.tk-flag { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #15120a; background: var(--amber); padding: 2px 6px; border-radius: 4px; }
.tk-ex { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.tk-fstrip { display: flex; flex-direction: column; gap: 10px; }
.tk-fl { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.tk-fl code { font-family: var(--mono); font-size: 12.5px; color: #d5dae0; background: #101215; border: 1px solid var(--line); padding: 3px 7px; border-radius: 5px; }
.tk-ref { font-family: var(--mono); font-size: 12px; color: #cfe4f8; background: var(--bluebg); border: 1px solid rgba(90,162,230,.5); padding: 2px 6px; border-radius: 4px; display: inline-block; margin: 1px 0; }
/* Assistant */
.tk-ai { position: sticky; top: calc(var(--top) + 12px); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - var(--top) - 24px); overflow-y: auto; }
.ai-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-h h2 { margin: 0; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; flex: 1; }
.ai-star { color: var(--amber2); font-size: 18px; }
.ai-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line2); padding: 2px 8px; border-radius: 999px; }
.ai-bub.me { align-self: flex-end; max-width: 88%; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px 10px 2px 10px; padding: 8px 10px; font-size: 13.5px; }
.ai-msg { display: flex; gap: 8px; border: 1px solid var(--line); border-left: 4px solid var(--line2); border-radius: 8px; padding: 9px 10px; font-size: 13.5px; background: var(--bg); }
.ai-msg b { color: var(--text); }
.ai-msg.good { border-left-color: var(--green); }
.ai-msg.warn { border-left-color: var(--amber); }
.ai-msg.warn b { color: var(--amber2); }
.ai-msg.bad { border-left-color: var(--red); background: var(--redbg); }
.ai-msg.bad b { color: var(--red); }
.ai-msg.info { border-left-color: var(--blue); }
.ai-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--line2); color: var(--text); }
.ai-msg.good .ai-ic { background: var(--green); color: #0c1a0e; } .ai-msg.warn .ai-ic { background: var(--amber); color: #15120a; }
.ai-msg.bad .ai-ic { background: var(--red); color: #1a0d0c; } .ai-msg.info .ai-ic { background: var(--blue); color: #0b1622; }
.ai-fix { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-fix .btn { border-color: var(--amber); }
.ai-ask { display: flex; gap: 6px; }
.ai-ask input { flex: 1; min-width: 0; height: 44px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg); color: var(--text); padding: 0 10px; }
/* Compare weights */
.tk-cmp { display: flex; flex-direction: column; gap: 8px; }
.tk-cmp-r { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; }
.tk-bar { display: flex; height: 14px; background: #262b31; border-radius: 7px; overflow: hidden; }
.tk-bar i { display: block; height: 100%; background: #8a929c; }
.tk-bar i.full { background: var(--amber); }
@media (max-width: 1400px) { .tk-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .tk-grid { grid-template-columns: 1fr; }
  .tk-ai { position: static; max-height: none; }
  .tk-dgrid, .tk-fill { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tk-opts { grid-template-columns: 1fr; }
  .tk-goal-row { flex-wrap: wrap; } .tk-goal-row input { flex-basis: 100%; font-size: 16px; } .tk-goal-row .btn { width: 100%; }
  .tk-cmp-r { grid-template-columns: 1fr; }
}
@media print {
  .rail, .top, .foot, .tk-in, .tk-goal, .tk-ai, .page-tools, .tk-ex, .tk-opts .btn, .teach { display: none !important; }
  body { display: block; background: #fff; color: #000; }
  .card { break-inside: avoid; }
  .tk-detail details { display: block; } .tk-detail details > * { display: block; }
}
@media (max-width: 400px) { .tk-parts td.n, .tk-parts th { white-space: normal; } .tk-parts td, .tk-parts th { padding-left: 6px; padding-right: 6px; } }   /* Build 6 fix: no sideways scroll on 375 px phones */