/* `hidden` is a statement about whether an element exists for the reader, so
   it has to beat the layout rules below. Without this, any class here that
   sets an explicit display silently un-hides its element: the owner-only
   benchmark note and the progress spinner both leaked onto the public page
   that way, which makes a stranger's first visit look like someone else's
   half-finished tool. */
[hidden] { display: none !important; }

:root { --lora-ink: #24180f; --lora-soft: #fff8f1; --lora-line: #eadbcf; --lora-orange: #f97316; }
/* The image trainer is the sibling of the RVC homepage, so it inherits that
   page's measure and rhythm rather than running 220px wider with its own
   stack of top padding. The hero already carries the homepage's 38px, and
   adding shell padding on top of it is what made the whole head of the page
   feel loose. */
.lora-page { width: min(960px, calc(100% - 32px)); margin: 0 auto; }
.lora-shell { padding: 0 0 54px; }
/* This page is a tool endpoint, not a guide, but it borrows the guide shell
   for its footer and nav - and inherits that shell's 34px header gap, which
   pushed the whole head of the page below where the homepage starts. */
.lora-page .topbar { margin-bottom: 0; }
.lora-trust-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:17px; }
.lora-trust-row span { border:1px solid var(--lora-line); border-radius:999px; padding:8px 12px; background:#fff; font-size:.82rem; color:#6d5847; }
.lora-workflow { border-block:1px solid var(--lora-line); padding:40px 0; }
.lora-workflow ol { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; list-style:none; margin:28px 0 0; padding:0; }
.lora-workflow li { display:flex; gap:15px; padding:20px 4px; }
.lora-workflow li > span { display:grid; place-items:center; flex:0 0 34px; height:34px; border:1px solid #f6aa74; border-radius:50%; color:#d45508; font-weight:800; }
.lora-workflow strong { color:var(--lora-ink); }
.lora-workflow p { margin:7px 0 0; color:#7d6958; line-height:1.5; }
.lora-trainer { margin:58px auto 0; max-width:940px; border:1px solid var(--lora-line); border-radius:24px; padding:clamp(22px,4vw,42px); background:#fff; box-shadow:0 26px 70px rgba(76,42,19,.07); }
.lora-trainer-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:30px; }
.lora-trainer h2 { margin:4px 0 0; font-size:clamp(1.8rem,4vw,2.7rem); color:var(--lora-ink); }
.lora-status-pill { display:inline-flex; padding:8px 12px; border-radius:999px; background:#f4eee8; color:#755f4f; font-size:.78rem; font-weight:750; }
.lora-status-pill.is-ready { background:#e8f8ef; color:#197344; }
.lora-owner-note { display:flex; gap:14px; align-items:baseline; margin:-10px 0 24px; padding:13px 15px; border-left:3px solid var(--lora-orange); background:var(--lora-soft); color:#6f5847; }
.lora-owner-note strong { white-space:nowrap; color:var(--lora-ink); }
.lora-fieldset { padding:0; margin:0 0 24px; border:0; }
.lora-fieldset legend,.lora-name span { display:block; margin-bottom:10px; color:var(--lora-ink); font-weight:800; }
.subject-options { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.subject-options input { position:absolute; opacity:0; pointer-events:none; }
.subject-options label > span { display:block; min-height:86px; border:1px solid var(--lora-line); border-radius:14px; padding:14px; cursor:pointer; transition:.16s ease; }
.subject-options label > span strong,.subject-options label > span small { display:block; }
.subject-options label > span small { margin-top:7px; color:#806b59; line-height:1.35; }
.subject-options input:checked + span { border-color:var(--lora-orange); background:var(--lora-soft); box-shadow:0 0 0 2px rgba(249,115,22,.1); }
.lora-name { display:block; margin-bottom:24px; }
.lora-name input { width:100%; box-sizing:border-box; border:1px solid var(--lora-line); border-radius:13px; padding:14px 15px; font:inherit; }
.lora-name input:focus { outline:3px solid rgba(249,115,22,.13); border-color:var(--lora-orange); }
.lora-drop { display:grid; place-items:center; min-height:205px; border:1.5px dashed #d8bba5; border-radius:18px; padding:24px; background:#fffcf8; text-align:center; cursor:pointer; transition:.16s ease; }
.lora-drop:hover,.lora-drop.is-over { border-color:var(--lora-orange); background:var(--lora-soft); }
.lora-drop-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; margin-bottom:10px; background:#ffeadc; color:#d65508; font-size:1.4rem; }
.lora-drop p { margin:7px 0 0; color:#8b7463; }
.lora-image-summary { min-height:32px; display:flex; justify-content:space-between; align-items:center; padding:10px 2px; color:#806b59; font-size:.86rem; }
.lora-image-summary button { border:0; background:none; color:#c14d08; cursor:pointer; }
/* The stylesheet sets an explicit display, which defeats the hidden
   attribute, so pair every scripted hidden with its own rule. */
.lora-select-note { display:block; margin:-4px 2px 12px; color:#806b59; font-size:.82rem; }
.lora-select-note[hidden] { display:none; }
.lora-quality { display:grid; gap:7px; margin:-2px 2px 14px; padding:12px 15px; border-left:3px solid #eab308; border-radius:0 12px 12px 0; background:#fefce8; color:#713f12; font-size:.84rem; list-style:none; }
.lora-quality[hidden] { display:none; }
.lora-tech { border-top:1px solid var(--lora-line); padding:40px 0 8px; }
.lora-tech ul { display:grid; gap:14px; margin:24px 0 0; padding:0; list-style:none; }
.lora-tech li { color:#7d6958; line-height:1.55; }
.lora-tech strong { color:var(--lora-ink); }
.lora-tech code { border-radius:6px; padding:1px 6px; background:#f6efe8; }
.lora-previews { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-bottom:20px; }
.lora-preview { position:relative; aspect-ratio:1; overflow:hidden; border-radius:10px; background:#eee; }
.lora-preview img { width:100%; height:100%; object-fit:cover; }
.lora-preview button { position:absolute; top:5px; right:5px; width:25px; height:25px; border:0; border-radius:50%; background:rgba(24,15,10,.78); color:#fff; cursor:pointer; }
.lora-consent { display:flex; gap:10px; align-items:flex-start; margin:20px 0; color:#5f4f42; }
.lora-consent input { margin-top:3px; accent-color:var(--lora-orange); }
.lora-submit { width:100%; justify-content:center; border:0; cursor:pointer; }
.lora-submit:disabled { opacity:.45; cursor:not-allowed; }
.lora-interest { padding:28px; border-radius:17px; background:var(--lora-soft); text-align:center; }
.lora-interest p { max-width:540px; margin:8px auto 17px; color:#765f4d; }
.lora-interest button { border:0; cursor:pointer; }
.lora-signin { max-width:620px; margin:0 auto; padding:30px; border:1px solid var(--lora-line); border-radius:18px; background:var(--lora-soft); text-align:center; }
.lora-signin h3 { margin:5px 0 8px; color:var(--lora-ink); font-size:1.45rem; }
.lora-signin > p:not(.section-kicker) { margin:0 auto 20px; max-width:500px; color:#765f4d; line-height:1.55; }
.lora-google-signin { width:100%; justify-content:center; border:1px solid var(--lora-line); border-radius:12px; padding:13px 16px; background:#fff; color:var(--lora-ink); font:inherit; font-weight:800; cursor:pointer; }
.lora-signin-divider { display:flex; align-items:center; gap:12px; margin:17px 0; color:#927764; font-size:.8rem; text-transform:uppercase; }
.lora-signin-divider::before,.lora-signin-divider::after { content:""; height:1px; flex:1; background:var(--lora-line); }
.lora-email-signin { text-align:left; }
.lora-email-signin label { display:block; margin-bottom:8px; color:var(--lora-ink); font-weight:800; }
.lora-email-signin > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.lora-email-signin input { min-width:0; border:1px solid var(--lora-line); border-radius:11px; padding:12px 13px; font:inherit; }
.lora-email-signin button { border:0; border-radius:11px; padding:12px 15px; background:var(--lora-orange); color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.lora-email-signin p { min-height:1.3em; margin:9px 0 0; color:#765f4d; font-size:.88rem; }
.lora-progress { display:grid; grid-template-columns:42px 1fr; gap:14px; margin-top:28px; padding:20px; border:1px solid #ffd3b2; border-radius:16px; background:var(--lora-soft); }
.lora-progress p { margin:5px 0 0; color:#765f4d; }
.lora-spinner { width:30px; height:30px; border:3px solid #fed7bb; border-top-color:var(--lora-orange); border-radius:50%; animation:lora-spin .9s linear infinite; }
/* A finished job reads as finished: the ring closes and turns green
   instead of freezing mid-rotation with one orange arc. */
.lora-spinner.is-done { border-color:#1f9d68; animation:none; }
.lora-progress-track { grid-column:1/-1; height:7px; overflow:hidden; border-radius:99px; background:#f3dfd0; }
.lora-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--lora-orange); transition:width .2s ease; }
.lora-result { margin-top:28px; padding:26px; border:1px solid #b8dfc9; border-radius:17px; background:#f1fbf5; }
.lora-result h3 { margin:5px 0 8px; color:#174b30; }
.lora-result p:not(.section-kicker) { color:#4c6d5a; }
.lora-result .primary-action { display:inline-flex; margin-top:10px; }
.lora-details { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin:55px auto 0; max-width:940px; }
.lora-details h2 { color:var(--lora-ink); font-size:1.15rem; }
.lora-details p { color:#746050; line-height:1.65; }
@keyframes lora-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) {
  .lora-shell { padding-inline:18px; }
    .lora-workflow ol { grid-template-columns:1fr; gap:0; }
  .subject-options { grid-template-columns:1fr 1fr; }
  .lora-previews { grid-template-columns:repeat(3,1fr); }
  .lora-trainer-heading { display:block; }
  .lora-status-pill { margin-top:12px; }
  .lora-owner-note { display:block; }
  .lora-owner-note span { display:block; margin-top:5px; }
  .lora-email-signin > div { grid-template-columns:1fr; }
}

.lora-steps { margin:0 0 20px; }
.lora-steps label { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; color:var(--lora-ink); font-weight:800; }
.lora-steps input[type="range"] { width:100%; accent-color:#d65508; }
.lora-steps-note { margin:8px 0 0; color:#806b59; font-size:.86rem; }
.lora-quote { min-height:24px; margin:0 0 20px; padding:12px 15px; border-left:3px solid var(--lora-orange); background:var(--lora-soft); color:#4d3d30; font-weight:650; }
.lora-quote:empty { display:none; }
.lora-quote a { color:#d65508; }
.lora-quote small { display:block; margin-top:4px; color:#806b59; font-weight:500; }

/* .lora-progress is a two-column grid: 42px for the spinner, the rest for the
   text beside it. Anything added after the first row belongs to the panel, not
   to the spinner column, so it must span both - otherwise it auto-places into
   the 42px lane and renders as a squished sliver against the left edge. */
.lora-progress > .lora-progress-clock,
.lora-progress > .training-stage-list,
.lora-progress > .watch-action,
.lora-progress > .activity-log,
.lora-progress > .active-controls { grid-column:1/-1; }
.lora-progress-clock { display:flex; justify-content:space-between; gap:16px; margin:10px 0 0; color:#806b59; font-size:.86rem; font-weight:650; }
.lora-progress-clock[hidden] { display:none; }
/* The rail's six labelled steps need room; below that they stack rather than
   crush the labels into two characters each. */
.lora-progress > .training-stage-list { padding:16px 0 6px; }
.lora-progress > .watch-action { justify-self:start; }
.lora-progress > .activity-log { margin-top:2px; }
@media (max-width:640px) {
  .lora-progress { grid-template-columns:30px 1fr; gap:10px; padding:16px; }
  /* minmax(0,...) not 1fr: a bare 1fr keeps a min-content floor, so the
     longest label ("Weights packaged") pushed the last column past the
     panel's right edge instead of wrapping inside it. */
  .lora-progress > .training-stage-list { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:18px; }
  .lora-progress > .training-stage-list li { min-width:0; }
  .lora-progress > .training-stage-list strong,
  .lora-progress > .training-stage-list small { max-width:100%; overflow-wrap:anywhere; }
  .lora-progress > .training-stage-list li:nth-child(4)::before { display:none; }
  .lora-progress-clock { flex-direction:column; gap:2px; }
}
.lora-progress-clock span:last-child { font-variant-numeric:tabular-nums; }

/* The second stage: generating with the trained model, right where the
   download landed. One journey, no other software. */
.lora-generate { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line, rgba(120, 120, 140, 0.25)); display: grid; gap: 10px; }
.lora-generate h4 { margin: 0; font-size: 1.05rem; }
.lora-generate-hint { margin: 0; font-size: 0.86rem; opacity: 0.75; }
.lora-generate-controls { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.lora-generate-controls textarea { flex: 1 1 260px; resize: vertical; min-height: 56px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(120, 120, 140, 0.35)); background: inherit; color: inherit; font: inherit; }
.lora-generate-controls .primary-action { align-self: flex-end; white-space: nowrap; }
.lora-generate-allowance { margin: 0; font-size: 0.82rem; opacity: 0.7; }
.lora-generate-status { margin: 0; font-size: 0.88rem; }
.lora-generate-status[data-tone="error"] { color: #d3564d; }
.lora-generate-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lora-generate-gallery figure { margin: 0; display: grid; gap: 6px; }
.lora-generate-gallery img { width: 100%; border-radius: 10px; display: block; }
.lora-generate-gallery figcaption { font-size: 0.74rem; opacity: 0.65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lora-generate-policy { margin: 4px 0 0; font-size: 0.74rem; opacity: 0.55; }