:root {
  --ink: #17191f;
  --paper: #f4f2e8;
  --panel: #eceae1;
  --line: #7a7b77;
  --blue: #172f85;
  --blue-hi: #2945a0;
  --lavender: #8f8bd0;
  --gold: #f0df42;
  --green: #10a822;
  --red: #ac1721;
  --teal: #073f35;
  font-family: "Trebuchet MS", Arial, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #161a19; }

body {
  display: grid;
  place-items: center;
  padding: 18px;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.terminal-shell {
  width: min(1500px, 100%);
  min-height: min(940px, calc(100vh - 36px));
  background: var(--paper);
  border: 12px solid #101515;
  box-shadow: 0 0 0 2px #4c5652, 0 20px 55px #000a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.session-strip {
  height: 30px;
  display: grid;
  place-items: center;
  color: #d9ded8;
  background: linear-gradient(#0d4e42, #06382f);
  border-bottom: 2px solid #436e64;
  font-size: 17px;
}

.header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr 1.25fr 1fr 1.3fr;
  min-height: 67px;
  border: 2px solid #777;
  border-radius: 14px;
  margin: 8px 12px 10px;
  overflow: hidden;
  background: #eeeae4;
}

.header-cell {
  display: grid;
  place-items: center;
  min-height: 31px;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

.header-cell.sub { font-weight: 500; }
.brand {
  grid-row: span 2;
  border: 0;
  color: var(--red);
  font: italic 700 30px Georgia, serif;
  text-decoration: underline;
}

.prompt {
  margin: 0 14px 8px;
  min-height: 86px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #737373;
  border-radius: 17px;
  background: linear-gradient(100deg, #8f8ad2, #a19cdc);
  font-size: 27px;
  font-weight: 800;
}

.gold-session .prompt { background: linear-gradient(100deg, #f0de36, #e8d638); }
.prompt small { font-size: 25px; }

.tabs {
  display: flex;
  gap: 2px;
  margin: 0 18px;
  border-bottom: 1px solid #747474;
}

.tab {
  border: 1px solid #696969;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  padding: 7px 12px;
  background: #ddd9d2;
  font-size: 18px;
  font-weight: 700;
}
.tab.active { background: var(--paper); }

.screen-content { flex: 1; min-height: 0; padding: 12px 18px; overflow: auto; }

.service-grid {
  width: min(1120px, 100%);
  margin: 42px auto 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px 30px;
  align-items: start;
}

.service-col { display: grid; gap: 10px; }
.category-label { margin: 5px 0 10px; padding-left: 10px; font-weight: 800; font-size: 20px; }

.blue-button, .choice-button {
  width: 100%;
  min-height: 52px;
  border: 1px solid #1b245e;
  border-radius: 18px;
  padding: 9px 16px;
  color: #efeff4;
  background: linear-gradient(#213b98, #152b79);
  box-shadow: inset 0 1px 2px #ffffff40;
  text-align: left;
  font-size: 20px;
}
.blue-button:hover, .choice-button:hover, .blue-button:focus { background: var(--blue-hi); outline: 3px solid #dcce42; }
.blue-button.selected, .choice-button.selected { color: #53607d; background: #f4f2ed; border-color: #777; }

.footer {
  padding: 9px 14px 12px;
  border-top: 2px solid #70706e;
  background: #e6e5de;
}
.vehicle-line { min-height: 23px; color: #2440a0; font-size: 18px; font-weight: 800; text-align: right; margin-bottom: 8px; padding-right: 24px; }
.key-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.key {
  min-height: 64px;
  border: 1px solid #747474;
  border-radius: 14px;
  color: #eee;
  background: linear-gradient(#334ba1, #203783);
  font-weight: 700;
  white-space: pre-line;
}
.key.nav { color: #453d25; background: linear-gradient(#edcf4e, #d4b93c); }
.key.disabled { color: #aaa; background: #d1d0cc; cursor: default; }

.picker-table { border: 1px solid #777; }
.picker-head, .picker-row {
  display: grid;
  grid-template-columns: 38% 16% 46%;
  align-items: center;
  gap: 20px;
}
.picker-head { min-height: 52px; border-bottom: 2px solid #777; font-size: 21px; font-weight: 800; text-align: center; }
.picker-row { min-height: 70px; padding: 8px 20px; }
.picker-row .price { font-weight: 800; font-size: 19px; }
.picker-row .description { font-size: 16px; font-weight: 700; }

.accordion { border-top: 1px solid #666; }
.accordion-title {
  width: 100%; min-height: 59px; border: 1px solid #666; border-top: 0; padding: 10px 18px;
  background: #f3f1e8; font-weight: 800; font-size: 20px; text-align: left;
}
.accordion-body { padding: 8px 0 15px; }
.labor-guide-header { margin-bottom: 14px; padding: 12px 16px; border: 1px solid #777; background: #eceae1; font-size: 18px; }
.labor-empty { max-width: 720px; padding: 20px 24px; border: 1px solid #777; background: #eceae1; }
.labor-empty .blue-button { max-width: 360px; margin-top: 12px; }
.labor-accordion .accordion-title { display: flex; justify-content: space-between; align-items: center; }
.labor-accordion .accordion-title span { min-width: 44px; padding: 4px 9px; border-radius: 14px; color: white; background: #273f94; text-align: center; }
.labor-accordion .labor-list th:nth-child(2), .labor-accordion .labor-list td:nth-child(2),
.labor-accordion .labor-list th:nth-child(3), .labor-accordion .labor-list td:nth-child(3) { width: 115px; text-align: center; }
.labor-accordion .labor-list th:nth-child(4), .labor-accordion .labor-list td:nth-child(4) { width: 150px; text-align: center; }

.tire-size-layout { display: grid; grid-template-columns: 35% 65%; gap: 35px; padding: 28px 50px; }
.filters-panel label { display: block; margin: 20px 0 4px; font-size: 19px; font-weight: 800; text-decoration: underline; }
.filters-panel select { width: 290px; height: 36px; }
.size-list { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 12px 24px; align-items: center; }
.size-meta { font-weight: 700; }
.current-vehicle { color: #2440a0; font-size: 18px; font-weight: 800; }
.fitment-message { min-height: 30px; margin-bottom: 10px; font-weight: 800; }
.fitment-message.error { color: #b31520; }
.fitment-message.success { color: #16762b; }
.fitment-connection { max-width: 720px; border: 1px solid #777; background: #eceae1; padding: 20px 24px; }
.fitment-connection h2 { margin-top: 0; }
.fitment-controls { display: grid; grid-template-columns: 1fr 230px; gap: 12px; margin: 18px 0 10px; }
.fitment-controls input, .manual-fitment input { min-height: 44px; padding: 8px 12px; }
.fitment-controls .blue-button { min-height: 44px; border-radius: 10px; text-align: center; }
.manual-fitment { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.manual-fitment input { width: 220px; }
.catalog-notice { padding: 11px 15px; color: #5e4b00; background: #fff1a8; border: 1px solid #b79e2e; font-weight: 800; }

.results-layout { display: grid; grid-template-columns: 1fr 360px; min-height: 560px; gap: 12px; }
.result-tabs { display: flex; gap: 45px; border-bottom: 2px solid #313131; padding: 0 8px 10px; font-size: 20px; font-weight: 800; }
.result-tabs .tools { margin-left: auto; }
.tire-card { display: grid; grid-template-columns: 100px 1fr 130px; gap: 16px; padding: 15px; border-bottom: 1px solid #888; }
.tire-art { display: grid; place-items: center; border-radius: 50%; background: #282828; color: #ccc; width: 82px; height: 82px; font-size: 14px; }
.tire-name { font-size: 23px; font-weight: 800; margin-bottom: 8px; }
.tire-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 18px; font-size: 16px; }
.in-stock { color: #1a9b31; font-weight: 800; }
.select-button { align-self: center; min-height: 56px; border: 1px solid #158324; color: white; background: #0aab22; font-size: 20px; font-weight: 800; }
.selected-panel { border: 2px solid #b33035; background: #f5f2eb; }
.selected-title { padding: 18px; color: white; background: #b4141b; font-size: 22px; }
.selected-body { padding: 20px; }
.selected-body h3 { margin: 18px 0 8px; }
.selected-body label { display: block; margin: 9px 0; }
.quantity { text-align: right; font-size: 26px; }
.subtotal { margin-top: 35px; border-top: 1px solid #aaa; padding-top: 15px; font-size: 21px; font-weight: 800; }

.modal-shade { position: fixed; inset: 0; display: grid; place-items: center; background: #0007; z-index: 5; }
.filter-modal { width: min(880px, 90vw); max-height: 78vh; overflow: auto; background: #f6f4ed; border: 2px solid #303030; box-shadow: 0 10px 30px #0009; }
.modal-head { display: flex; justify-content: space-between; padding: 15px 20px; border-bottom: 2px solid #333; font-size: 25px; font-weight: 800; }
.close { border: 0; background: transparent; font-size: 34px; }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 22px; }
.filter-group { border-bottom: 1px solid #aaa; padding-bottom: 14px; }
.filter-group h3 { grid-column: 1 / -1; }
.filter-group label { display: block; margin: 8px 0; font-size: 18px; }

.order-summary { display: flex; justify-content: space-around; gap: 12px; padding: 7px 12px; border: 1px solid #777; font-size: 19px; }
.order-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.order-table th { color: #eee; background: #241d62; padding: 7px; }
.order-table td { border-right: 1px solid #777; padding: 7px; }
.order-table tbody tr:nth-child(odd) { background: #d4d2cc; }
.order-table tbody tr:nth-child(even) { background: #eeeae1; }
.indent { padding-left: 28px !important; }
.change { padding: 6px 10px; border: 0; border-radius: 10px; color: white; background: #263d91; }

.activity-tools { display: grid; grid-template-columns: 1fr 240px auto; gap: 12px; margin-bottom: 16px; }
.activity-tools input, .activity-tools select { min-height: 50px; padding: 10px; font-size: 19px; }
.activity-table { width: 100%; border-collapse: collapse; }
.activity-table th, .activity-table td { padding: 11px; text-align: left; border-bottom: 1px solid #bbb; }
.activity-table tbody tr { cursor: pointer; }
.activity-table tbody tr:hover { background: #ddd9cc; }
.status-dot { width: 14px; height: 14px; display: inline-block; border-radius: 50%; background: #b10e18; }
.activity-detail { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; padding: 18px; background: #efede6; }
.detail-card { min-height: 190px; border: 1px solid #aaa; padding: 18px; text-align: center; }

.form-center { width: min(900px, 100%); margin: 90px auto; }
.search-methods { display: grid; grid-template-columns: 190px 1fr 1fr 160px; gap: 12px; align-items: center; }
.search-methods input, .vehicle-form input, .vehicle-form select { min-height: 35px; }
.vehicle-form { display: grid; grid-template-columns: 160px 1fr 1fr 1fr 1fr; gap: 14px; align-items: center; }
.vehicle-lookup { margin-top: 30px; }
.decoder-title { margin: 0 0 28px; text-align: center; font-family: Georgia, serif; }
.decode-vin { min-height: 40px; border-radius: 10px; text-align: center; font-size: 17px; }
.decode-vin:disabled { opacity: .65; cursor: wait; }
.use-manual-vehicle { grid-column: 2 / span 2; min-height: 40px; border-radius: 10px; text-align: center; font-size: 17px; }
.use-manual-vehicle:disabled { opacity: .55; cursor: not-allowed; }
.manual-catalog-note { grid-column: 4 / span 2; color: #8b5b00; font-size: 14px; font-weight: 700; }
.vin-message { min-height: 28px; margin: 20px 0 4px 174px; font-size: 17px; font-weight: 800; }
.vin-message.error { color: #b31520; }
.vin-message.success { color: #16762b; }
.vin-result { margin: 20px 0 0 174px; border: 1px solid #777; background: #eceae1; padding: 18px 22px; }
.vin-result h2 { margin: 0 0 15px; color: #243f9a; }
.vin-result dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; margin: 0; }
.vin-result dl div { display: grid; grid-template-columns: 110px 1fr; }
.vin-result dt { font-weight: 800; }
.vin-result dd { margin: 0; }

.estimate-list, .history-list, .labor-list { width: 100%; border-collapse: collapse; }
.estimate-list th, .history-list th, .labor-list th { color: white; background: #24216d; padding: 8px; }
.estimate-list td, .history-list td, .labor-list td { padding: 8px; border-right: 1px solid #777; }
.estimate-list tr:nth-child(even), .history-list tr:nth-child(even), .labor-list tr:nth-child(even) { background: #d5d3cd; }

.oil-layout { display: grid; grid-template-columns: 1.35fr .75fr; gap: 20px; }
.parts-list, .service-list, .related-list { border: 1px solid #777; }
.parts-row { display: grid; grid-template-columns: 1.5fr .6fr 1fr 1fr; padding: 10px; border-bottom: 1px solid #777; background: #d7d6d0; }
.parts-row.selected { background: #5364b2; color: white; }
.service-option, .related-option { display: flex; gap: 10px; padding: 7px 10px; border-bottom: 1px solid #999; }
.notice { color: #c61a25; font-family: monospace; font-weight: 800; }

@media (max-width: 950px) {
  body { padding: 0; }
  .terminal-shell { min-height: 100vh; border-width: 5px; }
  .header-grid { grid-template-columns: repeat(3, 1fr); }
  .brand { display: none; }
  .service-grid { grid-template-columns: 1fr; margin-top: 15px; }
  .results-layout, .oil-layout, .tire-size-layout { grid-template-columns: 1fr; }
  .key-grid { grid-template-columns: repeat(3, 1fr); }
  .picker-head, .picker-row { grid-template-columns: 1fr; gap: 6px; }
  .size-list { grid-template-columns: 1fr; }
}