/* Tokens base — se sobrescriben con appearance del DTO */
:root {
  --brand-bg: #0f0f10;
  --brand-surface: #17181b;
  --brand-text: #f7f7f8;
  --brand-muted: #a1a1aa;
  --brand-primary: #ff5a1f;
  --brand-radius: 18px;
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
.hint {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin: 0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--brand-bg); color: var(--brand-text); font-family: var(--font-family); }
body { min-height: 100dvh; -webkit-font-smoothing: antialiased; }
main {
  min-height: 100dvh;
  padding:
    calc(24px + var(--safe-top))
    calc(20px + var(--safe-right))
    calc(120px + var(--safe-bottom))
    calc(20px + var(--safe-left));
  max-width: 480px;
  margin: 0 auto;
}
.loader { width: 24px; height: 24px; border: 2px solid #ffffff30; border-top-color: var(--brand-primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 48px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.card { background: var(--brand-surface); border-radius: var(--brand-radius); padding: 20px; margin-bottom: 16px; }
.cover { position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 4/5; margin-bottom: 20px; background: #222; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75)); }
.cover .copy { position: absolute; left: 20px; right: 20px; bottom: calc(20px + var(--safe-bottom) / 2); }
h1 { font-size: 28px; line-height: 1.1; margin: 0 0 8px; }
p { color: var(--brand-muted); margin: 0 0 12px; line-height: 1.4; }
.btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 14px 20px; background: var(--brand-primary); color: #fff; border: 0; border-radius: 999px; font-size: 16px; font-weight: 600; cursor: pointer; }
.btn.secondary { background: transparent; border: 1px solid #ffffff30; color: var(--brand-text); }
.btn.ghost { background: transparent; border: 1px solid #ffffff20; color: var(--brand-text); }
.btn-inline { background: var(--brand-primary); color: #fff; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.badge { display: inline-block; padding: 4px 10px; background: #ffffff18; border-radius: 999px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.banner { position: relative; border-radius: var(--brand-radius); overflow: hidden; margin-bottom: 12px; aspect-ratio: 16/9; background: #202124; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner .b-copy { position: absolute; left: 16px; right: 16px; bottom: 14px; }
.banner h3 { margin: 0 0 4px; font-size: 16px; }
.banner small { color: #f7f7f8cc; }
#footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  text-align: center;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  font-size: 11px; color: var(--brand-muted);
  background: linear-gradient(180deg, transparent, var(--brand-bg) 40%);
  pointer-events: none;
}
#footer .dot { margin: 0 6px; }

/* Install help + update banner + about-pilot */
.install-help { background: var(--brand-surface); border: 1px solid #ffffff10; border-radius: var(--brand-radius); padding: 16px; margin-bottom: 16px; }
.install-help h3 { margin: 0 0 8px; font-size: 15px; }
.install-help ol { margin: 8px 0 12px; padding-left: 20px; color: var(--brand-muted); font-size: 14px; line-height: 1.5; }
.install-help .row { display: flex; gap: 8px; }
#update-banner {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(48px + var(--safe-bottom));
  background: var(--brand-surface); border: 1px solid #ffffff20;
  border-radius: 14px; padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  z-index: 20; font-size: 14px;
}
.about-list { list-style: none; margin: 0; padding: 0; }
.about-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #ffffff10; font-size: 14px; }
.about-list li:last-child { border-bottom: 0; }
.about-list .k { color: var(--brand-muted); }
.about-list .v { color: var(--brand-text); text-align: right; word-break: break-word; }
.stack > * + * { margin-top: 10px; }