/* LayerBros · Handbrake HB-1
   Tokens do design system LayerBros (Balcão). Um acento só: laranja.
   Movimento curto e desligado com prefers-reduced-motion. */

:root {
  --surface: #FFFFFF;
  --surface-2: #EEF0F3;
  --surface-3: #E2E4E8;
  --line: #E2E4E8;
  --ink: #121316;
  --ink-2: #3A3D44;
  --muted: #5F636B;
  --laranja: #FF5A1F;
  --on-laranja: #121316;
  --laranja-texto: #C23D08;
  --laranja-suave: #FFE7DC;
  --pix: #127A4E;      /* usado como "ok / sucesso" */
  --erro: #B3261E;
  --focus: #121316;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --max: 1200px;
  --font: "Sono", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0F1012; --surface-2: #1A1B1F; --surface-3: #24262B; --line: #2A2C32;
    --ink: #F3F4F6; --ink-2: #C6C9D0; --muted: #A0A4AD;
    --laranja-texto: #FF7A47; --laranja-suave: #3A1A0E; --pix: #3DD39A; --erro: #FF8A80; --focus: #F3F4F6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #0F1012; --surface-2: #1A1B1F; --surface-3: #24262B; --line: #2A2C32;
  --ink: #F3F4F6; --ink-2: #C6C9D0; --muted: #A0A4AD;
  --laranja-texto: #FF7A47; --laranja-suave: #3A1A0E; --pix: #3DD39A; --erro: #FF8A80; --focus: #F3F4F6;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
  font-variation-settings: "MONO" 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
a { color: var(--laranja-texto); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.mono { font-variation-settings: "MONO" 1; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- tipografia */
.h1 { font-size: clamp(40px, 6vw, 56px); line-height: .93; letter-spacing: -.045em; }
.h2 { font-size: clamp(28px, 4vw, 36px); line-height: 1.05; letter-spacing: -.035em; }
.h3 { font-size: 24px; line-height: 28px; letter-spacing: -.02em; }
.title { font-size: 18px; line-height: 24px; font-weight: 600; }
.lead { font-size: 18px; line-height: 28px; color: var(--ink-2); max-width: 560px; }
.body-sm { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.caption { font-size: 12px; line-height: 16px; color: var(--muted); }
.label { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: "MONO" 1; color: var(--muted); }
.big-num { font-size: 80px; line-height: 72px; font-weight: 600; letter-spacing: -.05em; font-variation-settings: "MONO" 1; }

/* ---------- cabeçalho */
.hdr { border-bottom: 1px solid var(--line); background: var(--surface); }
.hdr__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.hdr__logo { display: block; height: 32px; width: auto; }
.hdr__nav { display: flex; gap: 8px; flex-wrap: wrap; }
.hdr--admin { background: #121316; color: #fff; border: 0; }
.hdr--admin .caption { color: #C6C9D0; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: block; } }

/* ---------- pílulas e botões */
.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: 9999px; background: var(--surface-2); color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 600; transition: background-color .18s ease;
}
.pill:hover { background: var(--surface-3); color: var(--ink); }
.pill[aria-current="page"] { background: var(--ink); color: var(--surface); }
.pill--on-dark { background: #24262B; color: #F3F4F6; }
.pill--on-dark:hover { background: #2E3036; color: #FFFFFF; }
.hdr--admin :focus-visible { outline-color: #F3F4F6; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border-radius: 9999px;
  background: var(--surface-2); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; font-variation-settings: "MONO" 1; color: var(--muted);
}
.chip--ok { color: var(--pix); }
.chip--accent { background: var(--laranja); color: var(--on-laranja); }
.chip--soft { background: var(--laranja-suave); color: var(--ink); }
.chip--dark { background: #24262B; color: #F3F4F6; }
.dot { width: 10px; height: 10px; border-radius: 9999px; background: currentColor; }
.chip--ok .dot { animation: lb-pulse 1.8s ease-out infinite; }
@keyframes lb-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pix) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 9999px;
  font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--laranja); color: var(--on-laranja); }
.btn--primary:hover { color: var(--on-laranja); }
.btn--secondary { background: var(--ink); color: var(--surface); }
.btn--secondary:hover { color: var(--surface); }
.btn--tertiary { background: var(--surface-3); color: var(--ink); }
.btn--tertiary:hover { color: var(--ink); }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 14px; }
.btn--glow { animation: lb-glow 2.8s ease-in-out infinite; }
@keyframes lb-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0); } 50% { box-shadow: 0 6px 24px rgba(255, 90, 31, .34); } }
.btn svg, .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- blocos */
main { padding-block: 48px 96px; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.panel { background: var(--surface-2); border-radius: var(--r-xl); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.card { background: var(--surface); border-radius: var(--r-lg); padding: 16px 20px; min-width: 0; }
.card--pad { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.split > * { flex: 1 1 420px; min-width: 0; }
.sidebar-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.sidebar-layout > :first-child { flex: 1 1 260px; max-width: 320px; }
.sidebar-layout > :last-child { flex: 999 1 560px; min-width: 0; }
.grid-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.help { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-xl); background: var(--surface-2); color: var(--ink); text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
a.help:hover { transform: translateY(-4px); background: var(--surface-3); color: var(--ink); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts .span-2 { grid-column: span 2; }
.facts dt { font-size: 12px; line-height: 16px; color: var(--muted); }
.facts dd { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 600; font-variation-settings: "MONO" 1; overflow-wrap: anywhere; }
.ok { color: var(--pix); }
.err-text { color: var(--erro); }

/* ---------- medidores */
.meter { position: relative; height: 16px; border-radius: 9999px; background: var(--surface-3); }
.meter__fill { height: 16px; border-radius: 9999px; background: var(--laranja); width: 0; transition: width .12s linear; }
.meter__fill--ink { background: var(--ink); }
.meter__mark { position: absolute; top: -6px; width: 3px; height: 28px; border-radius: 2px; background: var(--laranja); transition: left .2s ease-out; }
.meter-scale { display: flex; justify-content: space-between; }

/* ---------- etapas */
.steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.step { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: 9999px; background: var(--surface-2); color: var(--muted); font-size: 14px; font-weight: 600; transition: background-color .25s ease, color .25s ease; }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; background: var(--surface-3); color: var(--muted); font-size: 12px; font-variation-settings: "MONO" 1; }
.step.is-done { color: var(--ink); }
.step.is-done .step__num { background: var(--ink); color: var(--surface); }
.step.is-current { background: var(--ink); color: var(--surface); }
.step.is-current .step__num { background: var(--laranja); color: var(--on-laranja); animation: lb-ring 1.8s ease-out infinite; }
@keyframes lb-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 31, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 90, 31, 0); } }

.bars { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bars li { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.bars li::before { content: ""; height: 6px; border-radius: 9999px; background: var(--surface-3); transition: background-color .3s ease; }
.bars li.is-done { color: var(--ink); } .bars li.is-done::before { background: var(--ink); }
.bars li.is-current { color: var(--ink); } .bars li.is-current::before { background: var(--laranja); }

/* ---------- avisos */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-radius: var(--r-lg); background: var(--laranja-suave); color: var(--ink); font-size: 14px; line-height: 20px; }
.alert { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--erro); }
.alert .ic { stroke: var(--erro); }

/* ---------- formulário */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 16px; color: var(--muted); }
.input { min-height: 48px; padding: 0 20px; border: 1px solid var(--line); border-radius: 9999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-variation-settings: "MONO" 1; }

/* ---------- tabela */
.table-box { overflow-x: auto; border-radius: var(--r-lg); background: var(--surface-2); }
table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 16px; font-variation-settings: "MONO" 1; }
th { text-align: left; padding: 12px 16px; color: var(--muted); font-weight: 600; }
td { padding: 12px 16px; border-top: 1px solid var(--line); white-space: nowrap; }
tr.is-new { animation: lb-rowin 2.4s ease-out both; }
@keyframes lb-rowin { from { background-color: var(--laranja-suave); } to { background-color: transparent; } }

/* ---------- ilustração: cabo USB-C conectando no HB-1 */
.usb-art { display: flex; justify-content: center; padding: 8px 0 16px; overflow: hidden; }
.usb-art svg { max-width: 100%; height: auto; }
.usb-plug { animation: lb-plug 3.2s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes lb-plug { 0%, 12% { transform: translateX(0); } 40%, 78% { transform: translateX(36px); } 92%, 100% { transform: translateX(0); } }
.usb-led { opacity: .15; animation: lb-led 3.2s ease infinite; }
@keyframes lb-led { 0%, 40% { opacity: .15; } 46%, 78% { opacity: 1; } 86%, 100% { opacity: .15; } }
.usb-ring { opacity: 0; transform-box: fill-box; transform-origin: center; animation: lb-usb-ring 3.2s ease-out infinite; }
@keyframes lb-usb-ring { 0%, 42% { opacity: 0; transform: scale(.6); } 48% { opacity: .7; transform: scale(1); } 72%, 100% { opacity: 0; transform: scale(2.4); } }
.nudge { animation: lb-nudge 1.8s ease-in-out infinite; }
@keyframes lb-nudge { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(6px); opacity: 1; } }
.breathe { animation: lb-breathe 2.4s ease-in-out infinite; }
@keyframes lb-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- entrada */
.rise { animation: lb-rise .5s var(--ease) both; }
.d1 { animation-delay: .06s; } .d2 { animation-delay: .14s; } .d3 { animation-delay: .22s; } .d4 { animation-delay: .3s; } .d5 { animation-delay: .38s; }
@keyframes lb-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Transitions.dev: error-state-shake */
.shake { animation: t-input-shake 280ms linear; }
@keyframes t-input-shake {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  28.57% { transform: translateX(6px); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  57.14% { transform: translateX(-6px); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  78.57% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.has-error { box-shadow: 0 0 0 2px var(--erro); }

/* ---------- Transitions.dev: success-check */
.check-badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 9999px; background: var(--surface); }
.t-success-check { display: inline-flex; transform-origin: center; opacity: 0;
  animation: t-check-fade .5s cubic-bezier(.22, 1, .36, 1) forwards, t-check-rotate .5s cubic-bezier(.22, 1, .36, 1) forwards,
             t-check-blur .5s cubic-bezier(.22, 1, .36, 1) forwards, t-check-bob .5s cubic-bezier(.34, 1.35, .64, 1) forwards; }
.t-success-check svg { display: block; overflow: visible; width: 28px; height: 28px; fill: none; stroke: var(--pix); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-success-check svg path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: t-check-draw .5s cubic-bezier(.22, 1, .36, 1) 80ms forwards; }
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(80deg); } to { transform: rotate(0); } }
@keyframes t-check-blur { from { filter: blur(10px); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 40px; } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

/* ---------- Transitions.dev: shimmer-text */
.t-shimmer { position: relative; display: inline-block; color: var(--muted); }
.t-shimmer::before {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--ink) 50%, transparent 60%, transparent 100%);
  background-size: 400% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: t-shimmer 2s linear infinite;
}
@keyframes t-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
.stripes { background-image: linear-gradient(45deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%); background-size: 32px 32px; animation: lb-stripes .6s linear infinite; }
@keyframes lb-stripes { to { background-position: 32px 0; } }

/* ---------- Transitions.dev: number-pop-in */
.t-digit { display: inline-block; animation: t-digit-pop-in .5s cubic-bezier(.34, 1.45, .64, 1) both; }
@keyframes t-digit-pop-in { 0% { transform: translateY(8px); opacity: 0; filter: blur(2px); } 100% { transform: none; opacity: 1; filter: blur(0); } }

/* ---------- rodapé */
.ftr { border-top: 1px solid var(--line); }
.ftr .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px; font-size: 12px; color: var(--muted); }

@media (max-width: 600px) {
  .bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big-num { font-size: 64px; line-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .t-success-check { opacity: 1; }
  .usb-plug { transform: translateX(36px); }
  .usb-led { opacity: 1; }
  .t-success-check svg path { stroke-dashoffset: 0 !important; }
}