:root {
  --bg: #06101f;
  --panel: rgba(12, 27, 48, .88);
  --panel-solid: #0c1b30;
  --panel-2: #102642;
  --line: rgba(125, 211, 252, .15);
  --text: #f8fafc;
  --muted: #94a3b8;
  --cyan: #22d3ee;
  --blue: #3b82f6;
  --green: #34d399;
  --yellow: #fbbf24;
  --orange: #fb923c;
  --red: #fb7185;
  --shadow: 0 24px 80px rgba(0, 0, 0, .28);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 0, #0b2748 0, transparent 34%), linear-gradient(160deg, #07111f 0%, #030914 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.ambient { position: fixed; border-radius: 999px; filter: blur(100px); pointer-events: none; opacity: .2; }
.ambient-one { width: 420px; height: 420px; background: #0ea5e9; top: 8%; left: -230px; }
.ambient-two { width: 380px; height: 380px; background: #1d4ed8; right: -220px; top: 46%; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  height: 78px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: rgba(3, 10, 20, .78); backdrop-filter: blur(18px);
}
.brand { width: 220px; max-width: 48vw; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--muted); font-size: 13px; }
.status-pill span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.status-ok { color: var(--green); border-color: rgba(52, 211, 153, .28); background: rgba(52, 211, 153, .07); }
.status-error { color: var(--red); border-color: rgba(251, 113, 133, .28); background: rgba(251, 113, 133, .07); }
.status-neutral { color: var(--yellow); }

.page-shell { width: min(1460px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 80px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); align-items: end; gap: 42px; margin-bottom: 34px; }
.eyebrow { margin: 0 0 9px; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 16px; max-width: 880px; font-size: clamp(36px, 5vw, 68px); line-height: .98; letter-spacing: -.045em; }
h1 em { color: var(--cyan); font-style: normal; }
.hero-copy { max-width: 840px; color: #b9c6d8; font-size: 18px; line-height: 1.65; }
.hero-side { display: grid; gap: 16px; align-content: end; min-width: 0; }
.smartinho-hero {
  position: relative;
  min-height: 270px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
}
.smartinho-hero::before {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  right: 50%;
  bottom: 0;
  transform: translateX(50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .18) 0%, rgba(59, 130, 246, .10) 38%, transparent 72%);
  filter: blur(8px);
  z-index: -1;
}
.smartinho-hero img {
  display: block;
  width: min(310px, 86%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 35px rgba(0, 0, 0, .35)) drop-shadow(0 0 22px rgba(34, 211, 238, .20));
}
.privacy-card { display: flex; gap: 16px; padding: 22px; border: 1px solid rgba(34, 211, 238, .2); border-radius: var(--radius); background: linear-gradient(145deg, rgba(34, 211, 238, .08), rgba(59, 130, 246, .05)); box-shadow: var(--shadow); }
.privacy-card p { margin: 5px 0 0; color: var(--muted); line-height: 1.5; font-size: 14px; }
.privacy-icon { font-size: 28px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.step { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #718096; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 20, 36, .66); }
.step > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(148, 163, 184, .1); font-weight: 800; }
.step strong, .step small { display: block; }
.step strong { color: #9aa9bc; }
.step small { margin-top: 2px; font-size: 12px; }
.step.active { border-color: rgba(34, 211, 238, .4); background: rgba(34, 211, 238, .08); color: var(--cyan); }
.step.active strong { color: #fff; }
.step.active > span { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #04101e; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.connection-panel { padding: clamp(22px, 4vw, 38px); }
.panel-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 30px; }
.panel-heading h2, .apps-toolbar h2 { margin-bottom: 7px; font-size: 28px; }
.panel-heading p { color: var(--muted); margin-bottom: 0; }
.connection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.instruction-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.instruction-list li { display: flex; gap: 14px; align-items: center; padding: 16px; background: rgba(4, 13, 25, .5); border: 1px solid rgba(148, 163, 184, .09); border-radius: 14px; }
.instruction-list li > span { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--cyan); background: rgba(34, 211, 238, .1); font-weight: 800; }
.instruction-list strong, .instruction-list small { display: block; }
.instruction-list small { margin-top: 3px; color: var(--muted); line-height: 1.4; }
.device-finder { min-height: 330px; display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 24px; padding: 24px; border: 1px dashed rgba(34, 211, 238, .3); border-radius: 18px; background: radial-gradient(circle at 35% 40%, rgba(34, 211, 238, .1), transparent 42%); }
.device-visual { position: relative; min-height: 270px; display: grid; place-items: center; }
.phone-shape { width: 130px; height: 244px; padding: 8px; border: 2px solid #4b6687; border-radius: 27px; background: #030914; box-shadow: 0 0 35px rgba(34, 211, 238, .12); }
.phone-screen { height: 100%; display: grid; place-content: center; text-align: center; gap: 8px; border-radius: 20px; background: linear-gradient(160deg, #0b2a48, #06111f); }
.phone-screen span { font-size: 12px; color: var(--cyan); letter-spacing: .18em; }
.phone-screen b { max-width: 90px; font-size: 13px; line-height: 1.35; }
.usb-line { position: absolute; width: 4px; height: 66px; bottom: -16px; background: linear-gradient(var(--cyan), transparent); box-shadow: 0 0 16px var(--cyan); }
.device-list { display: grid; gap: 10px; max-height: 280px; overflow: auto; }
.device-option { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; color: var(--text); border: 1px solid rgba(148, 163, 184, .13); border-radius: 14px; background: rgba(5, 15, 28, .72); }
.device-option:hover { border-color: rgba(34, 211, 238, .45); transform: translateY(-1px); }
.device-option .device-symbol { font-size: 25px; }
.device-option strong, .device-option small { display: block; }
.device-option small { margin-top: 3px; color: var(--muted); }
.device-state { margin-left: auto; border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.device-state.ready { color: var(--green); background: rgba(52, 211, 153, .1); }
.device-state.blocked { color: var(--yellow); background: rgba(251, 191, 36, .1); }
.empty-state { display: grid; place-items: center; text-align: center; color: var(--muted); }
.empty-state span { font-size: 30px; }
.empty-state p { margin: 8px 0 0; }
.consent-box { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; padding: 16px; border-radius: 14px; background: rgba(251, 191, 36, .06); border: 1px solid rgba(251, 191, 36, .18); color: #d8dfeb; font-size: 14px; line-height: 1.5; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cyan); }

.button { border: 0; border-radius: 11px; padding: 12px 17px; color: #fff; font-weight: 750; transition: .18s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; filter: none; }
.button.primary { color: #03111f; background: linear-gradient(135deg, var(--cyan), #60a5fa); box-shadow: 0 9px 28px rgba(34, 211, 238, .15); }
.button.secondary { border: 1px solid rgba(96, 165, 250, .28); background: rgba(59, 130, 246, .12); }
.button.ghost { border: 1px solid var(--line); background: rgba(148, 163, 184, .04); }
.button.danger-button { background: linear-gradient(135deg, #f43f5e, #ef4444); }
.button.recommended-button { color: #032018; background: linear-gradient(135deg, #34d399, #22d3ee); box-shadow: 0 9px 28px rgba(52, 211, 153, .16); }
.button.small { padding: 9px 12px; font-size: 13px; }
.button.full { width: 100%; margin-top: 10px; }

.workspace { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; align-items: start; }
.device-card { position: sticky; top: 96px; padding: 22px; }
.device-card-top { display: flex; gap: 13px; align-items: center; }
.device-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; font-size: 26px; background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(59, 130, 246, .16)); }
.device-card h3 { margin-bottom: 3px; font-size: 21px; }
.device-card small { color: var(--muted); }
.device-specs { display: grid; gap: 0; margin: 22px 0; }
.device-specs div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(148, 163, 184, .09); }
.device-specs dt { color: var(--muted); }
.device-specs dd { margin: 0; text-align: right; font-weight: 650; }
.ok-text { color: var(--green); }
.service-fields { display: grid; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.service-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.service-fields input, .search-box input, select { min-width: 0; color: var(--text); border: 1px solid rgba(148, 163, 184, .18); outline: 0; border-radius: 10px; background: rgba(3, 10, 20, .66); }
.service-fields input { width: 100%; padding: 11px 12px; }
.service-fields input:focus, .search-box:focus-within, select:focus { border-color: rgba(34, 211, 238, .55); box-shadow: 0 0 0 3px rgba(34, 211, 238, .08); }
.results-area { min-width: 0; }
.scan-empty, .scan-progress { min-height: 440px; padding: 54px; display: grid; place-items: center; align-content: center; text-align: center; }
.scan-empty h2, .scan-progress h2 { margin: 13px 0 9px; font-size: 30px; }
.scan-empty p, .scan-progress p { max-width: 600px; color: var(--muted); line-height: 1.6; }
.scan-icon { font-size: 64px; filter: drop-shadow(0 0 22px rgba(34, 211, 238, .35)); }
.radar { position: relative; width: 110px; height: 110px; border: 1px solid rgba(34, 211, 238, .35); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 18px, rgba(34, 211, 238, .11) 19px 20px); overflow: hidden; }
.radar::before, .radar::after { content: ""; position: absolute; background: rgba(34, 211, 238, .18); }
.radar::before { width: 1px; height: 100%; left: 50%; }
.radar::after { height: 1px; width: 100%; top: 50%; }
.radar span { position: absolute; inset: 50% 50% 0 0; transform-origin: 100% 0; background: conic-gradient(from 270deg, rgba(34, 211, 238, .5), transparent 45deg); animation: sweep 1.3s linear infinite; }
.radar i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); top: 31%; left: 66%; box-shadow: 0 0 15px var(--cyan); }
@keyframes sweep { to { transform: rotate(360deg); } }
.progress-track { width: min(440px, 85%); height: 8px; margin: 18px 0 12px; border-radius: 999px; background: rgba(148, 163, 184, .12); overflow: hidden; }
.progress-track div { width: 5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--blue)); transition: width .35s ease; }
.scan-progress small { color: #74839a; }

.summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 12px; }
.summary-card { min-height: 128px; padding: 20px; border-radius: 17px; border: 1px solid var(--line); background: var(--panel); }
.summary-card span, .summary-card small, .summary-card strong { display: block; }
.summary-card span { color: var(--muted); font-size: 13px; font-weight: 700; }
.summary-card strong { margin: 7px 0 2px; font-size: 36px; }
.summary-card small { color: #718096; }
.summary-card.danger strong { color: var(--red); }
.summary-card.suspicious strong { color: var(--orange); }
.summary-card.attention strong { color: var(--yellow); }
.summary-card.common strong { color: #7dd3fc; }
.summary-card.safe strong { color: var(--green); }
.apps-panel { overflow: hidden; }
.apps-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 24px; border-bottom: 1px solid var(--line); }
.apps-toolbar h2 { margin-bottom: 0; }
.toolbar-actions { display: flex; gap: 10px; }
.search-box { width: 250px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 10px; background: rgba(3, 10, 20, .66); }
.search-box input { flex: 1; padding: 10px 0; border: 0; background: transparent; }
select { padding: 10px 12px; }
.table-wrap { max-width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
th, td { padding: 15px 14px; text-align: left; border-bottom: 1px solid rgba(148, 163, 184, .08); vertical-align: middle; }
th { position: sticky; top: 0; z-index: 2; color: #7f90a7; background: #0b192c; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
td { color: #cfdaea; font-size: 13px; }
tr:hover td { background: rgba(34, 211, 238, .025); }
.check-cell { width: 42px; }
.app-name { display: flex; align-items: center; gap: 10px; }
.app-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 11px; background: linear-gradient(145deg, rgba(34, 211, 238, .18), rgba(59, 130, 246, .08)); color: var(--cyan); font-weight: 850; }
/* Mantém qualquer arte/ícone dentro da célula do aplicativo.
   Sem estas regras, SVGs/data-URIs usam o tamanho natural e podem sobrepor outras linhas. */
.app-avatar { position: relative; overflow: hidden; isolation: isolate; }
.app-avatar-fallback {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  position: relative; z-index: 1;
}
.app-avatar-image {
  grid-area: 1 / 1;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 8px;
  z-index: 2;
}
.app-name strong, .app-name small { display: block; }
.app-name small { margin-top: 3px; color: #718096; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.origin { max-width: 190px; color: #91a1b7; overflow: hidden; text-overflow: ellipsis; }
.risk-badge { display: inline-flex; padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.risk-alto { color: #fecdd3; background: rgba(244, 63, 94, .15); }
.risk-suspeito { color: #fed7aa; background: rgba(251, 146, 60, .13); }
.risk-atencao { color: #fde68a; background: rgba(251, 191, 36, .11); }
.risk-comum { color: #bae6fd; background: rgba(56, 189, 248, .10); }
.risk-sistema { color: #a7f3d0; background: rgba(52, 211, 153, .1); }
.score { font-weight: 850; }
.row-actions { display: flex; gap: 6px; }
.mini-button { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: rgba(148, 163, 184, .04); color: #c6d2e2; font-size: 11px; font-weight: 700; }
.mini-button:hover { border-color: rgba(34, 211, 238, .42); color: #fff; }
.mini-button.remove { color: #fecdd3; border-color: rgba(244, 63, 94, .22); }
.batch-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 24px; background: rgba(3, 10, 20, .4); }
.batch-bar > div { display: flex; gap: 8px; }

.modal { width: min(620px, calc(100% - 30px)); padding: 0; color: var(--text); border: 1px solid rgba(125, 211, 252, .24); border-radius: 20px; background: #0b192c; box-shadow: 0 30px 100px rgba(0,0,0,.65); }
.modal.wide { width: min(820px, calc(100% - 30px)); }
.modal::backdrop { background: rgba(0, 5, 12, .78); backdrop-filter: blur(6px); }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 24px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin-bottom: 0; }
.modal-body { padding: 24px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: rgba(148, 163, 184, .05); color: #fff; font-size: 24px; }
.help-steps { padding-left: 20px; color: #c4d0df; line-height: 1.65; }
.help-steps li + li { margin-top: 9px; }
.notice { display: grid; gap: 5px; margin-top: 18px; padding: 16px; border-radius: 13px; color: #d7e4f3; background: rgba(59, 130, 246, .08); border: 1px solid rgba(59, 130, 246, .18); }
.notice span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.danger-notice { display: flex; gap: 13px; padding: 16px; border-radius: 13px; border: 1px solid rgba(244, 63, 94, .22); background: rgba(244, 63, 94, .08); }
.danger-notice > span { font-size: 22px; }
.danger-notice p { margin: 5px 0 0; color: #b8c5d6; line-height: 1.5; font-size: 13px; }
.confirm-packages { max-height: 220px; overflow: auto; margin: 16px 0; display: grid; gap: 8px; }
.confirm-package { padding: 11px 13px; border-radius: 10px; background: rgba(3, 10, 20, .5); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.confirm-check { display: flex; align-items: flex-start; gap: 10px; color: #c6d2e2; line-height: 1.5; font-size: 13px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail-item { padding: 14px; border-radius: 12px; background: rgba(3, 10, 20, .5); }
.detail-item span, .detail-item strong { display: block; }
.detail-item span { color: var(--muted); font-size: 12px; }
.detail-item strong { margin-top: 5px; overflow-wrap: anywhere; }
.permission-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.permission-chip { padding: 6px 8px; border-radius: 8px; color: #fde68a; background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .16); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.reason-list { margin: 0; padding-left: 19px; color: #c4d0df; line-height: 1.6; }

.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 9px; }
.toast { width: min(380px, calc(100vw - 40px)); padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: #0b192c; box-shadow: var(--shadow); animation: toast-in .2s ease; }
.toast.success { border-color: rgba(52, 211, 153, .3); }
.toast.error { border-color: rgba(244, 63, 94, .35); }
.toast strong, .toast span { display: block; }
.toast span { margin-top: 3px; color: var(--muted); font-size: 13px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero-side { grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); align-items: center; }
  .smartinho-hero { min-height: 220px; }
  .smartinho-hero img { width: min(230px, 92%); }
  .connection-grid { grid-template-columns: 1fr; }
  .workspace { grid-template-columns: 1fr; }
  .device-card { position: static; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .page-shell { width: min(100% - 22px, 1460px); padding-top: 32px; }
  .hero-side { grid-template-columns: 1fr; }
  .smartinho-hero { min-height: 180px; margin-top: -6px; }
  .smartinho-hero img { width: min(205px, 72vw); }
  .topbar { padding: 0 12px; }
  .status-pill { display: none; }
  h1 { font-size: 38px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step { padding: 11px; }
  .connection-panel { padding: 18px; }
  .panel-heading, .apps-toolbar, .batch-bar { align-items: stretch; flex-direction: column; }
  .panel-heading .button { width: 100%; }
  .device-finder { grid-template-columns: 1fr; }
  .device-visual { min-height: 190px; }
  .phone-shape { width: 104px; height: 190px; }
  .toolbar-actions { flex-direction: column; }
  .search-box { width: 100%; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .batch-bar > div { display: grid; }
  .details-grid { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; color: #111; }
  .ambient, .topbar-actions, .steps, #connectionPanel, .device-card button, .service-fields, .apps-toolbar .toolbar-actions, .check-cell, .row-actions, .batch-bar { display: none !important; }
  .topbar { position: static; background: #fff; border-bottom: 1px solid #ddd; }
  .page-shell { width: 100%; padding: 20px; }
  .hero { display: none; }
  .workspace { display: block !important; }
  .device-card, .panel, .summary-card { box-shadow: none; background: #fff; color: #111; border-color: #ddd; }
  .device-card { margin-bottom: 14px; }
  .results-area { display: block; }
  .summary-grid { grid-template-columns: repeat(5, 1fr); }
  table { min-width: 0; color: #111; }
  th { position: static; background: #f2f2f2; color: #333; }
  td { color: #222; }
  .app-name small, .origin, .summary-card span, .summary-card small, .device-card small, .device-specs dt { color: #555; }
}

/* Ajustes da versão WebUSB direta */
.brand-wrap { display: inline-flex; align-items: center; }
.connect-copy { display: grid; gap: 12px; align-content: center; }
.connect-copy h3 { margin: 0; font-size: 24px; }
.connect-copy p { margin: 0; color: var(--muted); line-height: 1.6; }
.mini-notice { display: grid; gap: 4px; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(251,191,36,.2); background: rgba(251,191,36,.07); }
.mini-notice strong { color: #fbbf24; }
.mini-notice span { color: #bcc8d8; font-size: 13px; line-height: 1.45; }
.compatibility-alert { margin-bottom: 16px; padding: 16px 18px; border: 1px solid rgba(244,63,94,.35); border-radius: 14px; color: #fecdd3; background: rgba(159,18,57,.18); line-height: 1.55; }
.compatibility-alert strong { color: #fff; }
.analysis-warning { display: flex; gap: 10px; align-items: baseline; margin-bottom: 12px; padding: 13px 15px; border: 1px solid rgba(96,165,250,.2); border-radius: 13px; background: rgba(59,130,246,.07); }
.analysis-warning strong { flex: 0 0 auto; color: #93c5fd; }
.analysis-warning span { color: var(--muted); font-size: 13px; }
.footer { max-width: 1440px; margin: 0 auto; padding: 26px 24px 36px; color: #65758d; text-align: center; font-size: 13px; }
.action-menu { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-button.disable { color: #fbbf24; border-color: rgba(251,191,36,.25); }
.mini-button.clear { color: #fda4af; border-color: rgba(251,113,133,.25); }
.package-protected { color: #93c5fd; font-size: 11px; font-weight: 700; }
.command-output { max-height: 210px; overflow: auto; padding: 13px; border-radius: 12px; background: #020812; border: 1px solid rgba(148,163,184,.15); color: #cbd5e1; white-space: pre-wrap; word-break: break-word; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

@media (max-width: 720px) {
  .analysis-warning { display: grid; }
}

.recommendation-box { margin-top: 16px; padding: 15px 16px; border-radius: 13px; border: 1px solid rgba(34,211,238,.18); background: rgba(34,211,238,.06); }
.recommendation-box strong, .recommendation-box span { display: block; }
.recommendation-box strong { color: #a5f3fc; margin-bottom: 5px; }
.recommendation-box span { color: #c7d4e4; line-height: 1.5; font-size: 13px; }
.positive-list { margin: 0; padding-left: 19px; color: #a7f3d0; line-height: 1.6; }
.permission-chip.important { color: #fecdd3; background: rgba(244,63,94,.08); border-color: rgba(244,63,94,.18); }
@media (max-width: 1250px) { .summary-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .summary-grid { grid-template-columns: 1fr 1fr; } .button.recommended-button { width: 100%; } }

/* ============================================================
   SmartPrint Segurança Mobile — repaginação visual 2026-09-07
   Somente camada visual. IDs, fluxo WebUSB/ADB e ações existentes
   permanecem preservados.
   ============================================================ */
:root{
  --sp-cyan:#13cfff;
  --sp-blue:#0a7cff;
  --sp-deep:#020814;
  --sp-card:#061a31;
  --sp-line:rgba(34,174,255,.34);
}
body{
  background:
    radial-gradient(circle at 70% 14%,rgba(0,115,255,.19),transparent 30rem),
    radial-gradient(circle at 14% 23%,rgba(0,183,255,.10),transparent 24rem),
    linear-gradient(180deg,#031125 0,#020b18 52%,#020713 100%);
}
.ambient-one{background:#00b8ff;opacity:.16}
.ambient-two{background:#0069ff;opacity:.16}
.topbar{
  height:74px;
  padding:0 clamp(18px,5.2vw,88px);
  background:rgba(2,12,27,.9);
  border-bottom:1px solid rgba(65,163,242,.25);
  box-shadow:0 8px 28px rgba(0,0,0,.16);
}
.brand{width:205px}
.topbar-actions{gap:10px}
.status-pill{padding:9px 14px;border-color:rgba(68,201,255,.28);background:rgba(5,34,60,.68);font-weight:700}
.button.account-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#dff5ff;border:1px solid rgba(46,147,255,.45);background:linear-gradient(135deg,rgba(11,109,214,.48),rgba(5,54,112,.62))}
.page-shell{width:min(1510px,calc(100% - 38px));padding:0 0 70px}
.hero-premium{
  position:relative;
  min-height:370px;
  margin:0 calc(50% - 50vw) 10px;
  padding:30px max(calc((100vw - 1510px)/2),24px) 24px;
  grid-template-columns:minmax(0,1.12fr) minmax(550px,.88fr);
  align-items:center;
  gap:20px;
  overflow:hidden;
  border-bottom:1px solid rgba(38,151,242,.24);
  background:
    linear-gradient(90deg,rgba(2,13,29,.95) 0%,rgba(2,17,37,.88) 47%,rgba(2,18,42,.64) 100%),
    radial-gradient(circle at 77% 42%,rgba(0,142,255,.24),transparent 26rem);
}
.hero-premium:before,.hero-premium:after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(1px)}
.hero-premium:before{width:580px;height:580px;right:3%;top:-260px;border:1px solid rgba(0,158,255,.13);box-shadow:0 0 90px rgba(0,118,255,.10)}
.hero-premium:after{width:320px;height:320px;left:-200px;bottom:-160px;border:1px solid rgba(14,200,255,.16);box-shadow:0 0 60px rgba(0,166,255,.10)}
.hero-copy-col{position:relative;z-index:3;padding:6px 0 4px}
.hero-kicker{letter-spacing:.35em;color:#15d0ff;font-size:11px}
.hero-premium h1{max-width:760px;margin:8px 0 13px;font-size:clamp(41px,4.1vw,66px);line-height:1.02;letter-spacing:-.047em;text-wrap:balance}
.hero-premium h1 em{color:#12caff;text-shadow:0 0 26px rgba(0,183,255,.17)}
.hero-premium .hero-copy{max-width:790px;margin-bottom:16px;font-size:15px;line-height:1.55;color:#c4d3e4}
.hero-actions-premium{display:flex;gap:11px;flex-wrap:wrap;margin-top:14px}
.hero-main-button,.hero-secondary-button{min-height:51px;padding:0 26px;border-radius:12px;font-size:15px}
.hero-main-button{min-width:238px}
.hero-secondary-button{min-width:205px;background:rgba(3,18,37,.74)!important;border-color:rgba(53,166,255,.48)!important}
.hero-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:17px;max-width:760px}
.hero-trust>div{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:4px 17px 4px 0;min-width:0}
.hero-trust>div+div{padding-left:17px;border-left:1px solid rgba(67,149,216,.22)}
.trust-icon{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(7,69,117,.62);color:#1bd3ff;border:1px solid rgba(34,190,255,.25);font-size:20px;box-shadow:0 0 24px rgba(0,157,255,.13)}
.hero-trust strong{font-size:12px;color:#eef8ff;align-self:end}
.hero-trust small{font-size:10px;color:#829cb6;align-self:start;margin-top:2px}
.hero-stage{position:relative;min-height:315px;display:block;align-self:stretch;z-index:2}
.hero-stage:before{content:"";position:absolute;width:540px;height:250px;left:40px;bottom:-22px;background:radial-gradient(ellipse,rgba(0,131,255,.33),rgba(0,96,255,.12) 36%,transparent 68%);filter:blur(3px)}
.hero-stage .smartinho-hero{position:absolute;z-index:4;left:6%;bottom:3px;width:240px;min-height:0;display:block}
.hero-stage .smartinho-hero:before{width:210px;height:210px;bottom:-8px;background:radial-gradient(circle,rgba(23,201,255,.30),rgba(13,98,255,.12) 45%,transparent 70%)}
.hero-stage .smartinho-hero img{width:235px;max-width:none;filter:drop-shadow(0 22px 30px rgba(0,0,0,.38)) drop-shadow(0 0 28px rgba(0,176,255,.33))}
.hero-handnote{position:absolute;left:0;top:18px;color:#8bd9ff;font-size:17px;font-style:italic;line-height:1.18;transform:rotate(-7deg);opacity:.9}
.hero-handnote span{display:block;font-size:31px;transform:translate(80px,-2px) rotate(9deg)}
.phone-demo{position:absolute;z-index:3;right:88px;top:4px;width:205px;height:365px;padding:9px;border:2px solid #269cff;border-radius:35px;background:linear-gradient(145deg,#071526,#02060d);box-shadow:0 0 0 3px rgba(15,117,220,.20),0 0 50px rgba(0,137,255,.28),0 28px 50px rgba(0,0,0,.45);transform:rotate(1.5deg)}
.phone-demo:after{content:"";position:absolute;inset:8px;border-radius:27px;border:1px solid rgba(80,185,255,.18);pointer-events:none}
.phone-demo-notch{position:absolute;z-index:2;top:9px;left:50%;width:77px;height:16px;transform:translateX(-50%);border-radius:0 0 12px 12px;background:#02060d}
.phone-demo-screen{height:100%;padding:31px 18px 16px;border-radius:26px;background:radial-gradient(circle at 50% 16%,rgba(0,132,255,.20),transparent 34%),linear-gradient(180deg,#082344,#031329);text-align:center;overflow:hidden}
.android-mark{font-size:20px;color:#1ed4ff;margin-bottom:5px}
.phone-demo-screen>strong{display:block;font-size:16px;line-height:1.12}
.scan-ring{width:88px;height:88px;margin:13px auto;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#14d8ff 0 73%,rgba(27,82,129,.42) 73%);box-shadow:0 0 28px rgba(0,198,255,.20);position:relative}
.scan-ring:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#06182f}
.scan-ring span{position:relative;z-index:1;font-weight:900;font-size:18px}
.phone-demo ul{list-style:none;padding:0;margin:0;text-align:left;display:grid;gap:8px;font-size:9px;color:#91a9c0}
.phone-demo li:before{content:"○";display:inline-block;width:17px;color:#1baeff;font-size:14px;vertical-align:-1px}.phone-demo li.done:before{content:"✓";color:#38e494}
.hero-slogan{position:absolute;right:-1px;top:49px;color:#22c8ff;font-size:15px;line-height:1.45;font-weight:800;letter-spacing:.16em}.hero-slogan i{display:block;width:42px;height:2px;margin-top:14px;background:#16c5ff;box-shadow:0 0 13px #16c5ff}
.hero-security-card{position:absolute;right:0;bottom:14px;width:185px;padding:13px 14px;border-radius:14px;box-shadow:none;background:rgba(4,27,52,.78);backdrop-filter:blur(8px)}
.hero-security-card .privacy-icon{font-size:24px;color:#23caff}.hero-security-card strong{color:#22cfff;font-size:12px}.hero-security-card p{font-size:11px;margin-top:1px;color:#b7d5ea}
.steps{margin:10px 0 14px;gap:9px}
.step{position:relative;min-height:68px;padding:12px 15px;border-color:rgba(54,152,225,.28);background:linear-gradient(145deg,rgba(5,28,52,.94),rgba(4,19,37,.90));box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.step>span{border-radius:50%;background:#0c3968;color:#4abaff}
.step strong{font-size:13px;color:#dcecf9}.step small{color:#809bb5;font-size:11px}
.step.active{border-color:#18c8ff;background:linear-gradient(145deg,rgba(6,56,92,.96),rgba(4,29,53,.94));box-shadow:0 0 22px rgba(0,178,255,.10),inset 0 0 0 1px rgba(16,194,255,.08)}
.panel{border-color:rgba(56,151,222,.26);background:linear-gradient(145deg,rgba(7,31,57,.94),rgba(3,18,35,.95));box-shadow:0 18px 50px rgba(0,0,0,.22)}
.connection-panel{padding:24px 28px}.panel-heading{margin-bottom:20px}.panel-heading h2,.apps-toolbar h2{font-size:27px}.connection-grid{gap:20px}
.instruction-list{gap:7px}.instruction-list li{padding:10px 12px;border-radius:11px;background:rgba(4,20,38,.72);border-color:rgba(63,149,215,.13)}.instruction-list li>span{width:31px;height:31px;flex-basis:31px}.instruction-list strong{font-size:13px}.instruction-list small{font-size:11px}
.device-finder{min-height:275px;padding:19px;border-style:solid;border-color:rgba(25,186,255,.25);background:radial-gradient(circle at 35% 45%,rgba(0,160,255,.12),transparent 45%),rgba(2,15,29,.42)}
.consent-box{margin-top:17px}
.footer{border-top:1px solid rgba(57,139,204,.16);background:rgba(1,7,15,.48);padding:20px 24px;color:#657e97}
@media(max-width:1180px){
  .hero-premium{grid-template-columns:minmax(0,1fr) 500px}.phone-demo{right:55px}.hero-slogan{display:none}.hero-stage .smartinho-hero{left:0}.hero-security-card{right:0}
}
@media(max-width:980px){
  .hero-premium{grid-template-columns:1fr;padding-top:26px}.hero-stage{min-height:300px;max-width:650px;width:100%;margin:0 auto}.phone-demo{right:14%;height:330px}.hero-stage .smartinho-hero{left:13%;bottom:0}.hero-security-card{right:2%}.hero-handnote{left:10%}.hero-trust{max-width:none}
}
@media(max-width:720px){
  .topbar{height:66px}.brand{width:175px}.button.account-button{display:none}.hero-premium{padding:24px 16px 18px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:0}.hero-premium h1{font-size:39px}.hero-premium .hero-copy{font-size:14px}.hero-actions-premium{display:grid;grid-template-columns:1fr}.hero-main-button,.hero-secondary-button{width:100%;min-width:0}.hero-trust{grid-template-columns:1fr;gap:8px}.hero-trust>div,.hero-trust>div+div{border:0;padding:3px 0}.hero-stage{min-height:275px}.phone-demo{right:4%;width:170px;height:305px}.hero-stage .smartinho-hero{left:0;width:195px}.hero-stage .smartinho-hero img{width:190px}.hero-handnote{display:none}.hero-security-card{display:none}.steps{grid-template-columns:1fr 1fr}.step{min-width:0}.page-shell{width:min(100% - 20px,1510px)}
}
@media(max-width:480px){
  .topbar-actions .button.ghost{padding:8px 10px;font-size:11px}.hero-premium h1{font-size:34px}.hero-stage{min-height:250px}.phone-demo{right:0;width:145px;height:270px}.phone-demo-screen{padding-left:12px;padding-right:12px}.phone-demo-screen>strong{font-size:13px}.scan-ring{width:72px;height:72px}.hero-stage .smartinho-hero{left:-5px}.hero-stage .smartinho-hero img{width:165px}.steps{grid-template-columns:1fr}.connection-panel{padding:18px}.connection-grid{grid-template-columns:1fr}.device-finder{grid-template-columns:1fr}.device-visual{min-height:200px}
}