/* Enviolo OEM Order tool - front-end styles.
   Loaded after assets/vendor/basecoat-luma.min.css (same vendored build as
   the belt configurator). Basecoat's :root tokens are unlayered, so ours win
   by coming later; its component rules are inside @layer, so unlayered rules
   here beat them. Everything is scoped under .enviolo-ot so the WordPress
   theme (Flatsome) and this plugin do not fight over h2, .card, .btn etc. */

.enviolo-ot{
  /* ---------- Enviolo brand ---------- */
  --midnight:#03161c;
  --coral:#ed9b85;
  --coral-dark:#DF4B23;
  --dusk:#99635d;
  --orange:#f2bb9d;
  --ivory:#faeac0;
  --white:#FFFFFF;
  --positive:#3FA772;
  --negative:#E0523F;

  /* ---------- Neutrals: Tailwind taupe ---------- */
  --taupe-50:#fbfaf9;
  --taupe-100:#f3f1f1;
  --taupe-200:#e8e4e3;
  --taupe-300:#d8d2d0;
  --taupe-400:#aba09c;
  --taupe-500:#7c6d67;
  --taupe-600:#5b4f4b;
  --taupe-700:#473c39;
  --taupe-800:#2b2422;
  --taupe-900:#1d1816;
  --taupe-950:#0c0a09;

  /* ---------- Basecoat semantic tokens ---------- */
  --background:var(--taupe-50);
  --foreground:var(--taupe-950);
  --card:var(--white);
  --card-foreground:var(--taupe-950);
  --popover:var(--white);
  --popover-foreground:var(--taupe-950);
  --primary:var(--midnight);
  --primary-foreground:var(--white);
  --secondary:var(--taupe-100);
  --secondary-foreground:var(--taupe-950);
  --muted:var(--taupe-100);
  --muted-foreground:var(--taupe-500);
  --accent:var(--taupe-100);
  --accent-foreground:var(--taupe-950);
  --destructive:var(--negative);
  --border:var(--taupe-200);
  --input:var(--taupe-200);
  --ring:var(--dusk);
  --font-sans:'Source Sans 3', Arial, sans-serif;
  --chevron-down-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237c6d67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --radius-s:14px;
  --radius-m:24px;

  font-family:var(--font-sans);
  color:var(--foreground);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  font-size:16px;
}
.enviolo-ot *,.enviolo-ot *::before,.enviolo-ot *::after{box-sizing:border-box;}
.enviolo-ot h1,.enviolo-ot h2,.enviolo-ot h3,.enviolo-ot p{margin:0;}
.enviolo-ot h1{font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-0.01em;}
.enviolo-ot h2{font-size:22px;line-height:1.2;font-weight:600;}
.enviolo-ot h3{font-size:17px;line-height:1.3;font-weight:600;}
.enviolo-ot a{color:var(--midnight);}
.enviolo-ot a:hover{color:var(--coral-dark);}
.enviolo-ot button{font-family:inherit;}
.enviolo-ot .card > header > h2{font-weight:600;}

/* ---------- Page frame ---------- */
.ot-page{max-width:1240px;margin:0 auto;padding:0 1px;}
.ot-topbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;
  padding:0 0 20px;
}
.ot-topbar h1{flex:1 1 auto;}
.ot-mode-pill{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 14px;border-radius:9999px;
  background:var(--muted);color:var(--taupe-700);font-size:14px;font-weight:600;
}
.ot-topbar .btn{height:40px;}
.ot-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--dusk);
}
.ot-lead{color:var(--taupe-600);max-width:640px;}
.ot-muted{color:var(--muted-foreground);font-size:13px;}
.ot-stack{display:flex;flex-direction:column;gap:20px;}
.ot-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.ot-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.ot-link-btn{background:none;border:0;padding:0;color:var(--taupe-600);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.ot-link-btn:hover{color:var(--coral-dark);}
.ot-footer{padding:24px 1px 8px;font-size:12px;color:var(--muted-foreground);line-height:1.6;}

/* ---------- Start screen ---------- */
.ot-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
@media (max-width:900px){.ot-start{grid-template-columns:1fr;}}
.ot-start-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:28px;text-align:left;cursor:pointer;color:var(--foreground);
  transition:border-color .15s, transform .15s;
}
.ot-start-card:hover{border-color:var(--coral);transform:translateY(-2px);}
.ot-start-card .ot-step-no{
  width:36px;height:36px;border-radius:9999px;background:var(--midnight);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;
}
.ot-start-card p{color:var(--taupe-600);font-size:15px;}
.ot-start-card .ot-flow{font-size:13px;color:var(--muted-foreground);margin-top:auto;}
.ot-start-card .ot-flow b{color:var(--taupe-700);font-weight:600;}

/* ---------- Configure screen (setup + hub + stacked steps) ---------- */
.ot-configure{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:28px;align-items:start;}
@media (max-width:900px){.ot-configure{grid-template-columns:1fr;}}
.ot-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 32px);overflow:auto;}
@media (max-width:900px){.ot-side{position:static;max-height:none;overflow:visible;}}
.ot-flow-col{display:flex;flex-direction:column;gap:32px;min-width:0;}
.ot-section{display:flex;flex-direction:column;gap:16px;scroll-margin-top:16px;}
.ot-section.is-open .ot-question h2{color:var(--midnight);}
.ot-hub.is-dimmed,.ot-option.is-dimmed{opacity:0.45;}
.ot-hub.is-dimmed:hover:not([disabled]),.ot-option.is-dimmed:hover{opacity:1;}
.ot-hub.is-selected{border-color:var(--midnight);box-shadow:0 0 0 2px var(--midnight) inset;}
.ot-hub-status.is-rec{background:rgba(237,155,133,0.25);color:#8a3a22;}
.ot-cvp{scroll-margin-top:16px;border-color:var(--coral);}
.ot-cvp-grid{display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:start;}
@media (max-width:640px){.ot-cvp-grid{grid-template-columns:1fr;}}
.ot-cvp-grid img{width:160px;height:160px;object-fit:contain;}
.ot-continue{scroll-margin-top:16px;background:var(--midnight);color:var(--white);border-color:var(--midnight);}
.ot-continue .ot-eyebrow{color:var(--coral);}
.ot-continue .btn{background:var(--coral);color:var(--midnight);}
.ot-specs-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){.ot-specs-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
.ot-slider{display:flex;flex-direction:column;gap:6px;}
.ot-slider + .ot-slider{margin-top:18px;}
.ot-slider-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.ot-slider-head label{font-size:14px;font-weight:600;color:var(--taupe-700);}
.ot-slider-value{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;}
.ot-slider-value small{font-size:13px;font-weight:500;color:var(--muted-foreground);margin-left:3px;}
.ot-slider-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted-foreground);}
.ot-slider .input[type="range"]{width:100%;}
.ot-slider .input[type="range"]::-webkit-slider-runnable-track{
  background:
    linear-gradient(to right, transparent 0, transparent var(--slider-value), var(--input) var(--slider-value), var(--input) 100%),
    linear-gradient(to right, var(--ivory) 0%, var(--coral) 34%, var(--dusk) 67%, var(--midnight) 100%);
}
.ot-slider .input[type="range"]::-moz-range-track{
  background:
    linear-gradient(to right, transparent 0, transparent var(--slider-value), var(--input) var(--slider-value), var(--input) 100%),
    linear-gradient(to right, var(--ivory) 0%, var(--coral) 34%, var(--dusk) 67%, var(--midnight) 100%);
}
.ot-slider-hint{font-size:12px;color:var(--muted-foreground);}
.ot-field{display:flex;flex-direction:column;gap:6px;margin-top:18px;}
.ot-field label{font-size:14px;font-weight:600;color:var(--taupe-700);}
.ot-field select,.ot-field input{width:100%;}
.ot-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.ot-field-grid .ot-field{margin-top:18px;}

.ot-hubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
@media (max-width:640px){.ot-hubs{grid-template-columns:1fr;}}
.ot-hub{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:22px;text-align:left;color:var(--foreground);cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.ot-hub:hover:not([disabled]){border-color:var(--coral);box-shadow:0 0 0 3px rgba(237,155,133,0.25);}
.ot-hub[disabled]{cursor:not-allowed;opacity:0.5;background:var(--taupe-50);}
.ot-hub[disabled] img{filter:grayscale(1);}
.ot-hub-head{display:flex;align-items:flex-start;gap:14px;}
.ot-hub-code{
  flex:none;width:52px;height:52px;border-radius:14px;background:var(--midnight);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;letter-spacing:0.02em;
}
.ot-hub[disabled] .ot-hub-code{background:var(--taupe-400);}
.ot-hub-title{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;}
.ot-hub-title h3{font-size:18px;}
.ot-hub-title span{font-size:13px;color:var(--muted-foreground);line-height:1.4;}
.ot-hub img{width:96px;height:96px;object-fit:contain;flex:none;margin-left:auto;}
.ot-hub-status{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:9999px;
  font-size:12px;font-weight:600;width:fit-content;
}
.ot-hub-status .dot{width:8px;height:8px;border-radius:50%;background:currentColor;}
.ot-hub-status.is-ok{background:rgba(63,167,114,0.14);color:#1f6b45;}
.ot-hub-status.is-best{background:var(--midnight);color:var(--white);}
.ot-hub-status.is-no{background:rgba(224,82,63,0.12);color:#a83a2a;}
.ot-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0;}
.ot-specs div{display:flex;flex-direction:column;gap:1px;}
.ot-specs dt{font-size:11.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted-foreground);font-weight:600;}
.ot-specs dd{margin:0;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;}
.ot-specs dd small{font-weight:500;color:var(--muted-foreground);font-size:12px;}
.ot-specs .span2{grid-column:1 / -1;}
.ot-specs .span2 dd{font-weight:500;font-size:14px;}
.ot-hub details{font-size:13px;}
.ot-hub details summary{cursor:pointer;color:var(--taupe-600);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px;}
.ot-hub details summary::-webkit-details-marker{display:none;}
.ot-hub details summary::before{content:'+';display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--muted);align-items:center;justify-content:center;font-weight:600;}
.ot-hub details[open] summary::before{content:'\2013';}
.ot-hub details .ot-specs{margin-top:10px;}
.ot-hub-cta{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  font-weight:600;font-size:14px;color:var(--midnight);
}
.ot-hub[disabled] .ot-hub-cta{color:var(--taupe-500);}
.ot-hub-cta svg{color:var(--coral-dark);}
.ot-hubs-note{grid-column:1 / -1;font-size:13px;color:var(--muted-foreground);}

/* ---------- Steps screen ---------- */
.ot-trail{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.ot-chip{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;border-radius:9999px;
  background:var(--card);border:1px solid var(--taupe-300);color:var(--foreground);font-size:14px;cursor:pointer;
}
.ot-chip:hover{border-color:var(--coral);}
.ot-chip.is-current{border-color:var(--midnight);box-shadow:0 0 0 2px var(--midnight) inset;}
.ot-chip small{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted-foreground);}
.ot-chip b{font-weight:600;}
.ot-question{display:flex;flex-direction:column;gap:6px;}
.ot-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
@media (max-width:640px){.ot-options{grid-template-columns:1fr;}}
.ot-option{
  display:flex;flex-direction:column;gap:12px;min-height:64px;
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 16px;
  text-align:left;color:var(--foreground);cursor:pointer;font-size:16px;font-weight:600;
  transition:border-color .15s, box-shadow .15s;
}
.ot-option:hover{border-color:var(--coral);box-shadow:0 0 0 3px rgba(237,155,133,0.25);}
.ot-option.is-selected{border-color:var(--midnight);box-shadow:0 0 0 2px var(--midnight) inset;}
.ot-option img{width:100%;aspect-ratio:1/1;object-fit:contain;}
.ot-option-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ot-option-row svg{color:var(--coral-dark);flex:none;}
.ot-option small{font-weight:400;font-size:13px;color:var(--muted-foreground);}

.ot-parts-card .ot-count{
  font-size:13px;font-weight:600;color:var(--taupe-700);background:var(--muted);border-radius:9999px;padding:4px 10px;
}
.ot-parts{list-style:none;margin:0;padding:0;}
.ot-parts li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--taupe-100);}
.ot-parts li:first-child{border-top:0;}
.ot-qty{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--midnight);color:var(--white);
  font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.ot-part-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;}
.ot-part-text b{font-size:14px;font-weight:600;}
.ot-part-text span{font-size:12px;color:var(--muted-foreground);line-height:1.4;}
.ot-icon-btn{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--card);
  color:var(--taupe-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.ot-icon-btn:hover{border-color:var(--coral);color:var(--coral-dark);}
.ot-empty{
  border:1px dashed var(--taupe-300);border-radius:16px;padding:24px 16px;text-align:center;
  font-size:14px;color:var(--muted-foreground);
}
.ot-sticky{position:sticky;top:16px;}

/* ---------- Belt screen ---------- */
.ot-belt-frame{width:100%;border:0;display:block;min-height:1100px;background:transparent;}
.ot-belt-note{font-size:13px;color:var(--muted-foreground);}

/* ---------- Summary ---------- */
.ot-hero{
  background:var(--midnight);color:var(--white);border-radius:var(--radius-m);padding:28px 32px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.ot-hero .ot-eyebrow{color:var(--coral);}
.ot-hero h2{font-size:26px;}
.ot-hero p{color:var(--taupe-300);max-width:560px;}
.ot-hero .btn-primary{background:var(--coral);color:var(--midnight);}
.ot-hero .btn-outline{border-color:rgba(255,255,255,0.4);color:var(--white);background:transparent;}
.ot-hero .btn-outline:hover{background:rgba(255,255,255,0.1);}
.ot-answers{display:flex;flex-wrap:wrap;gap:8px;}
.ot-answers .ot-chip{cursor:default;}
.ot-table-wrap{overflow-x:auto;}
.enviolo-ot .table{width:100%;}
.enviolo-ot .table td{vertical-align:top;}
.enviolo-ot .table td:first-child{white-space:nowrap;width:56px;font-weight:600;}
.enviolo-ot .table td:nth-child(2){white-space:nowrap;font-weight:600;}
.enviolo-ot .table td:nth-child(3){white-space:normal;overflow-wrap:anywhere;color:var(--taupe-700);}
.enviolo-ot .table td:nth-child(4){white-space:nowrap;color:var(--muted-foreground);font-variant-numeric:tabular-nums;}
.ot-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
@media (max-width:900px){.ot-summary-grid{grid-template-columns:1fr;}}
.ot-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;margin:0;}
.ot-kv dt{color:var(--muted-foreground);}
.ot-kv dd{margin:0;font-weight:600;}

/* ---------- Part dialog ---------- */
.ot-dialog{
  border:0;border-radius:var(--radius-m);padding:0;max-width:560px;width:calc(100% - 32px);
  box-shadow:0 20px 60px rgba(12,10,9,0.25);color:var(--foreground);font-family:var(--font-sans);
}
.ot-dialog::backdrop{background:rgba(3,22,28,0.5);}
.ot-dialog-body{padding:28px;display:flex;flex-direction:column;gap:14px;}
.ot-dialog img{width:160px;height:160px;object-fit:contain;align-self:center;}
.ot-dialog ul{margin:0;padding-left:18px;font-size:14px;color:var(--taupe-700);}
.ot-dialog-close{position:absolute;top:12px;right:12px;}

/* ---------- Print ---------- */
@media print{
  .enviolo-ot .no-print,.ot-topbar .btn,.ot-hero .ot-actions{display:none !important;}
  .enviolo-ot{background:#fff;}
  .ot-hero{background:#fff;color:#000;border:1px solid #ccc;}
  .ot-hero p,.ot-hero .ot-eyebrow{color:#333;}
}

/* ---------- Configure: setup on top, hubs in a row ---------- */
.ot-setup-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px;}
@media (max-width:900px){.ot-setup-row{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.ot-setup-row{grid-template-columns:1fr;}}
.ot-setup-row .ot-slider + .ot-slider{margin-top:0;}
.ot-setup-row .ot-field{margin-top:0;}
.ot-body{display:grid;grid-template-columns:1fr minmax(280px,320px);gap:28px;align-items:start;}
@media (max-width:900px){.ot-body{grid-template-columns:1fr;}}
.ot-hubs{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1100px){.ot-hubs{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.ot-hubs{grid-template-columns:1fr;}}
.ot-hub{padding:18px;gap:12px;}
.ot-hub-head{flex-direction:column;align-items:stretch;gap:10px;}
.ot-hub img{width:100%;height:120px;margin:0;}
.ot-hub .ot-specs{grid-template-columns:1fr;gap:6px;}
.ot-hub .ot-specs dd{font-size:14px;}
.ot-thumb{flex:none;width:40px;height:40px;object-fit:contain;border-radius:8px;background:var(--taupe-50);border:1px solid var(--taupe-100);}
.ot-thumb-ph{flex:none;width:40px;height:40px;border-radius:8px;background:var(--taupe-100);color:var(--taupe-400);display:flex;align-items:center;justify-content:center;}
.ot-option img{height:110px;aspect-ratio:auto;}
.enviolo-ot .table td.ot-td-img{width:48px;padding-right:0;}

/* ---------- Belt screen ---------- */
.ot-belt{display:grid;grid-template-columns:1fr minmax(280px,320px);gap:28px;align-items:start;}
@media (max-width:900px){.ot-belt{grid-template-columns:1fr;}}
.ot-belt-main{display:flex;flex-direction:column;gap:20px;min-width:0;}
.ot-belt-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
@media (max-width:760px){.ot-belt-row{grid-template-columns:1fr;}}
.ot-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.ot-tile{
  display:flex;flex-direction:column;align-items:center;gap:6px;min-height:72px;
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px 10px;
  text-align:center;color:var(--foreground);cursor:pointer;font-size:15px;font-weight:600;
  transition:border-color .15s, box-shadow .15s;
}
.ot-tile:hover:not([disabled]){border-color:var(--coral);box-shadow:0 0 0 3px rgba(237,155,133,0.25);}
.ot-tile.is-selected{border-color:var(--midnight);box-shadow:0 0 0 2px var(--midnight) inset;}
.ot-tile[disabled]{opacity:0.4;cursor:not-allowed;}
.ot-tile small{font-weight:400;font-size:12px;color:var(--muted-foreground);line-height:1.3;}
.ot-tile svg{width:44px;height:44px;}
.ot-tile.is-selected svg{color:var(--coral-dark);}
.ot-tile svg{color:var(--taupe-600);}
.ot-tile-big{font-size:18px;}
.ot-belt-table{width:100%;border-collapse:collapse;font-size:14px;}
.ot-belt-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted-foreground);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--border);}
.ot-belt-table td{padding:7px 8px;border-bottom:1px solid var(--taupe-100);font-variant-numeric:tabular-nums;}
.ot-belt-table tr{cursor:pointer;}
.ot-belt-table tr:hover td{background:var(--taupe-50);}
.ot-belt-table tr.is-current td{background:rgba(237,155,133,0.18);font-weight:600;}
.ot-belt-table tr.is-out td{color:var(--taupe-400);}
.ot-belt-table td:first-child{font-weight:600;}
.ot-belt-scroll{max-height:420px;overflow:auto;}
.ot-results-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:520px){.ot-results-row{grid-template-columns:1fr;}}
.ot-stat{background:var(--muted);border-radius:var(--radius-m);padding:18px 22px;}
.ot-stat-label{font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted-foreground);margin-bottom:4px;font-weight:600;}
.ot-stat-value{font-size:30px;font-weight:600;line-height:1.1;}
.ot-stat-value small{font-size:15px;color:var(--muted-foreground);margin-left:4px;}
.ot-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.ot-badge{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:9999px;font-size:13px;font-weight:600;}
.ot-badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor;}
.ot-badge.is-valid{background:rgba(63,167,114,0.12);color:#1f6b45;}
.ot-badge.is-invalid{background:rgba(224,82,63,0.12);color:#a83a2a;}
.ot-rec{margin-top:12px;padding:12px 14px;background:var(--muted);border-radius:var(--radius-s);font-size:13px;line-height:1.6;}
.ot-rec.is-ok{color:#1f6b45;}
.ot-diagram{margin-top:16px;background:var(--muted);border-radius:var(--radius-m);padding:8px;}
.ot-diagram svg{width:100%;height:auto;display:block;}
.ot-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px;font-size:12.5px;color:var(--muted-foreground);}
.ot-legend span{display:inline-flex;align-items:center;gap:6px;}
.ot-legend i{width:12px;height:12px;border-radius:50%;display:inline-block;}
.ot-chainstay{display:grid;grid-template-columns:1fr 120px;gap:16px;align-items:end;}
.ot-chainstay .input-group{display:flex;align-items:center;gap:6px;}
.ot-chainstay input[type="number"]{width:100%;height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--taupe-300);font:inherit;font-size:15px;}
.ot-idler-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
@media (max-width:760px){.ot-idler-grid{grid-template-columns:1fr;}}
.ot-idler-grid .ot-slider + .ot-slider{margin-top:0;}
.ot-slider-head input[type="number"]{width:84px;height:34px;padding:0 8px;border-radius:9999px;border:1px solid var(--taupe-300);font:inherit;font-size:15px;font-weight:600;text-align:right;}
.ot-check{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;cursor:pointer;min-height:36px;}
.ot-check input{width:18px;height:18px;accent-color:var(--midnight);}
.ot-check + .ot-check{margin-top:4px;}

/* ---------- Start screen illustrations ---------- */
.ot-start-illu{display:flex;align-items:center;justify-content:center;gap:10px;height:160px;padding:12px;border-radius:16px;background:var(--muted);overflow:hidden;}
.ot-start-illu img{height:136px;width:auto;max-width:48%;object-fit:contain;}
.ot-start-plus{font-size:28px;font-weight:600;color:var(--taupe-400);}
.ot-start-svg{display:block;flex:1 1 auto;min-width:0;}
.ot-start-svg svg{width:100%;height:auto;display:block;border-radius:10px;}
.ot-start-svg.is-wide svg{max-height:136px;}

/* ---------- Belt screen: inputs left, configuration right ---------- */
.ot-belt{grid-template-columns:minmax(280px,340px) 1fr;}
.ot-belt-inputs{display:flex;flex-direction:column;gap:20px;min-width:0;}
.ot-belt-block{display:flex;flex-direction:column;gap:10px;}
.ot-belt-block-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;}
.ot-belt-block-head h3{font-size:15px;}
.ot-belt-inputs .ot-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
.ot-belt-inputs .ot-tile{min-height:64px;padding:10px 8px;font-size:14px;}
.ot-belt-inputs .ot-tile svg{width:34px;height:34px;}
.ot-chainstay{grid-template-columns:1fr;}
.ot-result-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);gap:20px;align-items:start;margin-top:16px;}
@media (max-width:900px){.ot-result-grid{grid-template-columns:1fr;}}
.ot-result-grid .ot-diagram{margin-top:0;}
.ot-belt-windows .ot-belt-scroll{max-height:380px;}