/* Appli artisan : univers chantier (jaune sécurité + noir), clair, lisible sur ordinateur et téléphone. */
:root {
  --y: #FFC21A; --ys: #FFF4D1; --k: #111111; --ink: #1B1A17; --mut: #625E55; --ln: #E6E2D8; --pa: #F7F5EF; --surface: #ffffff;
  --s1: #2a78d6; --s2: #eda100; --r1: #86b6ef; --r2: #5598e7; --r3: #256abf; --r4: #104281;
  --good: #106b10; --good-bg: #e8f6e8; --warn: #7a5300; --warn-bg: #fff4d9; --crit: #a32828; --crit-bg: #fbe6e6; --info: #1d4f9a; --info-bg: #e5edfb;
  --font-display: "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--pa); color: var(--ink); font-family: var(--font-body); font-size: 15.5px; line-height: 1.5; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--y); outline-offset: 2px; }
.d { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: .005em; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0 0 10px; }
.muted { color: var(--mut); }
.small { font-size: 13px; }
.hidden { display: none !important; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Boutons et formulaires */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--k); background: var(--k); color: #fff; font: 700 15px var(--font-body); border-radius: 10px; padding: 10px 16px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { filter: brightness(1.08); }
.btn.y { background: var(--y); color: var(--k); }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--ln); }
.btn.danger { background: #fff; color: var(--crit); border-color: #e7b9b9; }
.btn.sm { padding: 6px 11px; font-size: 13.5px; border-radius: 8px; }
.btn.lg { padding: 14px 22px; font-size: 17px; border-radius: 12px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 5px; }
.field { margin-bottom: 14px; }
.hint { font-size: 12.5px; color: var(--mut); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=url], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #d6d1c5; border-radius: 10px; font: 15.5px var(--font-body); background: #fff; color: var(--ink);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--k); outline: 2px solid var(--ys); }
.row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.row3 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) { .row, .row3 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.check input { margin-top: 4px; width: 18px; height: 18px; }
.alert { border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14.5px; }
.alert.err { background: var(--crit-bg); color: var(--crit); }
.alert.ok { background: var(--good-bg); color: var(--good); }
.alert.info { background: var(--ys); color: var(--ink); }

/* Pages d'accès (inscription, connexion, onboarding) */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: radial-gradient(120% 60% at 50% 0%, #fff 0%, var(--pa) 70%); }
.auth .box { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--ln); border-radius: 20px; padding: 28px; box-shadow: 0 10px 30px rgba(17,17,17,.06); }
.auth .box.wide { max-width: 860px; }
.auth h1 { font-size: 36px; margin: 12px 0 6px; }
.logo { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; color: var(--k); }
.logo b { background: var(--y); padding: 0 6px; transform: skewX(-8deg); display: inline-block; }

/* Étapes d'onboarding */
.steps { display: flex; gap: 6px; margin: 6px 0 18px; }
.steps span { flex: 1; height: 6px; border-radius: 4px; background: var(--ln); }
.steps span.on { background: var(--k); }
.onb { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 860px) { .onb { grid-template-columns: 1fr; } }
.preview { position: sticky; top: 16px; border: 1px solid var(--ln); border-radius: 14px; overflow: hidden; background: #fff; font-size: 11.5px; }
.preview .bar { height: 8px; }
.preview .in { padding: 14px; }
.logos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.logos label { border: 2px solid var(--ln); border-radius: 12px; padding: 10px; cursor: pointer; background: #fff; font-weight: 500; }
.logos input { position: absolute; opacity: 0; }
.logos input:checked + div { outline: 3px solid var(--k); outline-offset: 6px; border-radius: 6px; }
.logos svg { width: 100%; height: 56px; display: block; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches label { width: 38px; height: 38px; border-radius: 10px; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ln); margin: 0; }
.swatches input { position: absolute; opacity: 0; }
.swatches input:checked + label { box-shadow: 0 0 0 3px var(--k); }
.siret-box { display: flex; gap: 8px; }
.siret-box input { flex: 1; }

/* Structure de l'appli */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side { background: var(--k); color: #cfcabf; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.side .logo { color: #fff; margin: 0 8px 18px; }
.side .logo b { color: var(--k); }
.side nav a { display: flex; gap: 10px; align-items: center; padding: 10px 10px; border-radius: 10px; text-decoration: none; color: inherit; font-weight: 600; }
.side nav a:hover { background: #1f1f1f; color: #fff; }
.side nav a.on { background: #262626; color: #fff; }
.side nav a.on svg { color: var(--y); }
.side .new { margin: 14px 0 0; }
.side .quota { margin-top: auto; padding: 12px 10px 4px; font-size: 12.5px; border-top: 1px solid #2a2a2a; }
.side .quota .meter { height: 6px; background: #2a2a2a; border-radius: 4px; overflow: hidden; margin: 6px 0; }
.side .quota .meter i { display: block; height: 100%; background: var(--y); }
.side .who { font-size: 12.5px; padding: 8px 10px 0; }
.side .who a { color: #cfcabf; }
.main { padding: 26px 30px 60px; min-width: 0; }
.topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.topline h1 { font-size: 34px; }
.mobilebar { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .mobilebar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--k); position: sticky; top: 0; z-index: 10; }
  .mobilebar .logo { color: #fff; font-size: 20px; }
  .mobilebar .logo b { color: var(--k); }
  .mobilenav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--ln); z-index: 10; padding: 6px 4px 12px; }
  .mobilenav a { display: grid; justify-items: center; gap: 2px; font-size: 11px; text-decoration: none; color: var(--mut); }
  .mobilenav a.on { color: var(--k); font-weight: 700; }
  .main { padding: 18px 14px 96px; }
}
@media (min-width: 901px) { .mobilenav { display: none; } }

/* Cartes, tuiles, listes */
.card { background: #fff; border: 1px solid var(--ln); border-radius: 16px; padding: 18px; }
.card h2 { font-size: 17px; font-family: var(--font-body); font-weight: 700; text-transform: none; }
.card .sub { color: var(--mut); font-size: 13px; }
.grid { display: grid; gap: 14px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: #fff; border: 1px solid var(--ln); border-radius: 16px; padding: 14px 16px; display: grid; gap: 4px; }
.kpi .t { color: var(--mut); font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.kpi .v { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12.5px; color: var(--mut); }
.kpi.hero { background: var(--k); border-color: var(--k); color: #fff; }
.kpi.hero .t, .kpi.hero .s { color: #bdb8ad; }
.kpi.hero .v { color: var(--y); }
.two { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1000px) { .two, .halves { grid-template-columns: 1fr; } }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--mut); margin: 6px 0; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.chart { width: 100%; display: block; }
.chart text { font-family: var(--font-body); }
.list .li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ln); }
.list .li:last-child { border-bottom: 0; }
.list .li small { display: block; color: var(--mut); font-size: 12.5px; }
.list a.li { text-decoration: none; }
.list a.li:hover { background: var(--pa); }
.amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill svg { width: 13px; height: 13px; }
.st-draft { background: #eeece6; color: #555; } .st-sent { background: var(--info-bg); color: var(--info); } .st-open { background: var(--warn-bg); color: var(--warn); }
.st-signed { background: var(--good-bg); color: var(--good); } .st-declined { background: var(--crit-bg); color: var(--crit); }
.empty { text-align: center; padding: 36px 16px; }
.empty .d { font-size: 30px; margin-bottom: 8px; }
table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.t th, table.t td { padding: 10px 8px; border-bottom: 1px solid var(--ln); text-align: left; vertical-align: middle; }
table.t th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }

/* Dictée */
.rec { background: var(--k); color: #fff; border-radius: 20px; padding: 30px 20px; text-align: center; }
.rec .mic { width: 132px; height: 132px; border-radius: 50%; background: var(--y); color: var(--k); border: 0; cursor: pointer; display: grid; place-items: center; margin: 6px auto 14px; box-shadow: 0 0 0 12px rgba(255,194,26,.18); }
.rec .mic svg { width: 52px; height: 52px; }
.rec .mic.on { background: #E2401F; color: #fff; animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(226,64,31,.5); } 100% { box-shadow: 0 0 0 26px rgba(226,64,31,0); } }
@media (prefers-reduced-motion: reduce) { .rec .mic.on { animation: none; } }
.rec .timer { font-family: var(--font-display); font-size: 30px; font-weight: 800; }
.rec .tips { color: #bdb8ad; font-size: 13.5px; max-width: 46ch; margin: 10px auto 0; }
.rec audio { margin-top: 12px; width: 100%; max-width: 360px; }
.working { display: grid; justify-items: center; gap: 10px; padding: 30px; }
.spinner { width: 42px; height: 42px; border: 5px solid var(--ys); border-top-color: var(--k); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Édition de devis */
.lines { display: grid; gap: 10px; }
.line { display: grid; grid-template-columns: 1fr 90px 100px 120px 110px 36px; gap: 8px; align-items: end; background: #fff; border: 1px solid var(--ln); border-radius: 12px; padding: 10px; }
.line .tot { font-weight: 700; text-align: right; padding: 10px 4px; font-variant-numeric: tabular-nums; }
.line button { border: 0; background: none; cursor: pointer; color: var(--mut); font-size: 20px; padding: 8px; }
@media (max-width: 760px) { .line { grid-template-columns: 1fr 1fr; } .line .desc { grid-column: 1 / -1; } }
.totals { display: grid; gap: 4px; justify-content: end; text-align: right; margin-top: 8px; font-variant-numeric: tabular-nums; }
.totals b { font-size: 20px; }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--pa) 30%); padding: 18px 0 6px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Chronologie */
.tl { display: grid; }
.tl div { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--ln); font-size: 14px; }
.tl div:last-child { border-bottom: 0; }
.tl .b { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: var(--k); }
.tl .b.y { background: var(--y); box-shadow: 0 0 0 2px var(--k) inset; }
.tl .b.o { background: #fff; box-shadow: 0 0 0 2px var(--k) inset; }

/* Document devis (page client + impression) */
.doc { --c: #111; --a: #FFC21A; background: #fff; color: #1b1a17; max-width: 820px; margin: 0 auto; border-radius: 14px; border: 1px solid var(--ln); overflow: hidden; font-size: 13.5px; }
.doc .band { height: 10px; background: var(--c); }
.doc .inner { padding: 30px 34px; }
@media (max-width: 640px) { .doc .inner { padding: 20px 16px; } }
.doc .head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 640px) { .doc .head { grid-template-columns: 1fr; } }
.doc .clogo { max-height: 70px; max-width: 260px; display: block; margin-bottom: 8px; }
.doc .clogo svg { height: 64px; width: auto; max-width: 260px; display: block; }
.doc .co { color: #555; font-size: 12.5px; line-height: 1.55; }
.doc .meta { text-align: right; }
@media (max-width: 640px) { .doc .meta { text-align: left; } }
.doc .meta h2 { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--c); }
.doc .to { border: 1px solid #e3e0d8; border-radius: 10px; padding: 12px 14px; margin: 22px 0 10px; }
.doc .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: #888; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.doc th { background: var(--c); color: #fff; text-align: left; padding: 8px; font-size: 11.5px; }
.doc td { padding: 9px 8px; border-bottom: 1px solid #eee; vertical-align: top; }
.doc .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc .sums { display: grid; grid-template-columns: 1fr 260px; gap: 20px; margin-top: 14px; }
@media (max-width: 640px) { .doc .sums { grid-template-columns: 1fr; } }
.doc .sums table td { border: 0; padding: 5px 8px; }
.doc .sums .ttc td { background: var(--c); color: #fff; font-weight: 700; font-size: 15px; }
.doc .foot { margin-top: 22px; padding-top: 10px; border-top: 1px solid #e3e0d8; font-size: 10.5px; color: #777; line-height: 1.5; }
.doc .sig { border: 1px dashed #bbb; border-radius: 10px; padding: 10px; min-height: 90px; }
.doc .sig img { max-height: 70px; }

/* Page client */
.cpage { max-width: 860px; margin: 0 auto; padding: 18px 14px 60px; display: grid; gap: 16px; }
.voice { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--ln); border-radius: 14px; padding: 12px 14px; }
.voice audio { flex: 1; min-width: 0; }
.sigpad { width: 100%; height: 180px; border: 2px dashed #c9c3b5; border-radius: 12px; background: #fff; touch-action: none; display: block; }
.stamp { display: inline-block; border: 3px solid #2E7D32; color: #2E7D32; font-family: var(--font-display); font-weight: 800; padding: 2px 10px; transform: rotate(-4deg); font-size: 20px; }

@media print {
  body { background: #fff; }
  .noprint, .side, .mobilebar, .mobilenav { display: none !important; }
  .cpage { padding: 0; max-width: none; }
  .doc { border: 0; border-radius: 0; max-width: none; }
}
.cpage > *, .grid > *, .two > *, .halves > *, .onb > * { min-width: 0; }
@media (max-width: 640px) { .doc table { font-size: 12px; } .doc th, .doc td { padding: 7px 5px; } }
.cpage, .grid { grid-template-columns: minmax(0, 1fr); }
.cpage .doc, .grid .doc { width: 100%; margin: 0; }

/* Modèles de devis */
.doc.tpl-moderne { border-left: 8px solid var(--c); }
.doc.tpl-moderne .band { display: none; }
.doc.tpl-moderne .meta h2 { color: var(--ink); font-family: var(--font-body); font-weight: 700; text-transform: none; font-size: 26px; letter-spacing: -.01em; }
.doc.tpl-moderne th { background: transparent; color: var(--c); border-bottom: 2px solid var(--c); text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.doc.tpl-moderne .to { border: 0; background: #f6f5f1; }
.doc.tpl-moderne .sums .ttc td { background: transparent; color: var(--c); border-top: 2px solid var(--c); font-size: 17px; }
.doc.tpl-chantier .band { height: 16px; background: repeating-linear-gradient(-45deg, var(--a) 0 14px, var(--c) 14px 28px); }
.doc.tpl-chantier .meta h2 { font-size: 46px; }
.doc.tpl-chantier th { background: var(--c); color: var(--a); font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: .03em; }
.doc.tpl-chantier .to { border: 2px solid var(--c); border-radius: 0; }
.doc.tpl-chantier .sums .ttc td { background: var(--c); color: var(--a); font-family: var(--font-display); font-size: 20px; }
.doc.tpl-chantier .sig { border-radius: 0; border: 2px dashed var(--c); }

/* ===== Onboarding pas à pas ===== */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-body { min-height: 100vh; background: var(--pa); }
.ob-bg { position: fixed; inset: 0; background: radial-gradient(80% 60% at 20% 0%, #fff6d6 0%, transparent 60%), radial-gradient(70% 60% at 100% 100%, #efe9dc 0%, transparent 60%), var(--pa); z-index: 0; }
.ob { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-rows: auto 1fr; padding: 18px 16px 40px; }
.ob-top { display: grid; grid-template-columns: 44px 1fr 110px; align-items: center; gap: 12px; max-width: 760px; width: 100%; margin: 0 auto 10px; }
.ob-back { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ln); background: #fff; font-size: 20px; cursor: pointer; }
.ob-progress { height: 6px; background: #e8e3d7; border-radius: 6px; overflow: hidden; }
.ob-progress i { display: block; height: 100%; width: 0; background: var(--k); border-radius: 6px; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.ob-count { font-size: 13px; color: var(--mut); text-align: right; font-weight: 600; }
.ob-screen { align-self: center; justify-self: center; width: 100%; opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.ob-screen.in { opacity: 1; transform: none; }
.ob-card, .ob-pop { background: #fff; border-radius: 28px; box-shadow: 0 24px 60px rgba(17,17,17,.10), 0 2px 6px rgba(17,17,17,.04); padding: 34px 32px; max-width: 560px; margin: 0 auto; display: grid; gap: 12px; }
.ob-card.ob-wide { max-width: 900px; }
.ob-card.ob-xwide { max-width: 1040px; }
.ob-pop { text-align: center; max-width: 520px; justify-items: center; }
.ob-center { text-align: center; justify-items: center; }
.ob-card h2, .ob-pop h1 { font-size: clamp(32px, 5vw, 44px); }
.ob-pop h1 .hl { background: var(--y); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ob-kicker { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mut); }
.ob-lead { color: var(--mut); font-size: 16.5px; margin: 0; }
.ob-emoji { font-size: 56px; line-height: 1; animation: ob-pop .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes ob-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.ob-promise { list-style: none; padding: 0; margin: 6px 0 8px; display: grid; gap: 8px; text-align: left; }
.ob-promise li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.ob-promise svg { color: var(--good); }
.ob .btn.lg { width: 100%; margin-top: 8px; padding: 16px; font-size: 17px; border-radius: 14px; }
.ob-input { font-size: 22px !important; padding: 16px 18px !important; border-radius: 14px !important; letter-spacing: .02em; }
.ob-link { background: none; border: 0; color: var(--mut); font: 600 15px var(--font-body); text-decoration: underline; cursor: pointer; padding: 6px; justify-self: center; }
.ob-err { color: var(--crit); font-size: 14px; min-height: 18px; margin: 0; }
.ob-found { display: flex; gap: 8px; align-items: center; background: var(--good-bg); color: var(--good); border-radius: 12px; padding: 10px 12px; font-weight: 600; }
.ob-spin { width: 64px; height: 64px; border-radius: 50%; border: 6px solid var(--ys); border-top-color: var(--k); animation: spin .9s linear infinite; margin: 8px auto; }
.ob-choices { display: grid; gap: 10px; }
.ob-choice { text-align: left; border: 2px solid var(--ln); background: #fff; border-radius: 16px; padding: 16px 18px; cursor: pointer; display: grid; gap: 2px; font: 16px var(--font-body); transition: border-color .15s, background .15s; }
.ob-choice span { color: var(--mut); font-size: 14px; }
.ob-choice.on, .ob-chip.on { border-color: var(--k); background: var(--ys); }
.ob-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.ob-chip { border: 2px solid var(--ln); background: #fff; border-radius: 999px; padding: 10px 20px; font: 700 18px var(--font-body); cursor: pointer; }
.ob-split { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: center; }
@media (max-width: 760px) { .ob-split { grid-template-columns: 1fr; } }
.ob-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ob-sw { width: 48px; height: 48px; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ln); cursor: pointer; transition: transform .15s; }
.ob-swatches.small .ob-sw { width: 38px; height: 38px; border-radius: 11px; }
.ob-sw.on { box-shadow: 0 0 0 3px var(--k); transform: scale(1.08); }
.ob-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ob-logo { border: 2px solid var(--ln); background: #fff; border-radius: 16px; padding: 10px; cursor: pointer; min-height: 76px; display: grid; place-items: center; text-align: center; font-weight: 600; font-size: 14px; }
.ob-logo svg { width: 100%; height: 52px; }
.ob-logo.on { border-color: var(--k); box-shadow: 0 0 0 2px var(--k); }
.ob-upload small { color: var(--mut); font-weight: 500; }
.thumb { width: 100%; max-width: 300px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; border: 1px solid var(--ln); background: #fff; position: relative; margin: 0 auto; box-shadow: 0 10px 30px rgba(17,17,17,.08); }
.thumb-in { position: absolute; top: 0; left: 0; width: 820px; transform: scale(.366); transform-origin: top left; pointer-events: none; }
.thumb-in .doc { border: 0; border-radius: 0; max-width: none; width: 820px; margin: 0; transition: none; }
.ob-templates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
@media (max-width: 860px) { .ob-templates { grid-template-columns: 1fr; } }
.ob-tpl { border: 2px solid transparent; background: none; border-radius: 20px; padding: 10px; cursor: pointer; display: grid; gap: 4px; text-align: left; font: 15px var(--font-body); transition: border-color .15s, background .15s; }
.ob-tpl b { font-size: 17px; margin-top: 8px; }
.ob-tpl span { color: var(--mut); font-size: 14px; }
.ob-tpl.on { border-color: var(--k); background: #fff; }
.ob-checklist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; text-align: left; min-width: 240px; }
.ob-checklist li { display: flex; gap: 10px; align-items: center; color: var(--mut); font-weight: 600; transition: color .2s; }
.ob-checklist li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ln); display: inline-grid; place-items: center; font-size: 13px; transition: all .25s; }
.ob-checklist li.done { color: var(--ink); }
.ob-checklist li.done::before { content: "✔"; background: var(--good); border-color: var(--good); color: #fff; }
.ob-final-doc { width: 220px; margin: 6px auto; }
.ob-final-doc .thumb { max-width: 220px; }
.ob-final-doc .thumb-in { transform: scale(.268); }
@media (prefers-reduced-motion: reduce) { .ob-screen, .ob-progress i, .ob-emoji { transition: none; animation: none; } }
@media (max-width: 560px) { .ob-card, .ob-pop { padding: 26px 20px; border-radius: 22px; } .ob-top { grid-template-columns: 40px 1fr 90px; } }
.thumb-in { text-align: left; }