:root {
  color-scheme: light;
  --ink: #1f2937;
  --muted: #697586;
  --line: #e7ebf0;
  --blue: #2874e8;
  --blue-dark: #1d5fc5;
  --green: #18864b;
  --red: #c23f46;
  --page: #f7f8fa;
  --surface: #fff;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); }
body {
  min-height: 100vh;
  margin: 0;
  padding: max(22px, env(safe-area-inset-top)) 17px max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #edf3ff 0, var(--page) 290px);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; -webkit-tap-highlight-color: transparent; }
.shell { width: min(100%, 590px); margin: 0 auto; }
.topbar { display: flex; align-items: center; gap: 11px; min-height: 46px; }
.brand-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border: 1px solid #e8edf6; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px #233b680c; }
.brand-icon svg { width: 27px; height: 27px; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy strong { font-size: 14px; letter-spacing: -.02em; }
.eyebrow, .step-label { color: #7b8798; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.privacy-label { display: flex; align-items: center; gap: 7px; margin-left: auto; color: #647286; font-size: 11px; font-weight: 700; }
.privacy-dot { width: 7px; height: 7px; border-radius: 50%; background: #1ca567; box-shadow: 0 0 0 3px #1ca56720; }
.hero { padding: 46px 2px 25px; }
.hero .eyebrow { margin: 0 0 10px; color: var(--blue); }
h1 { margin: 0; font-size: clamp(37px, 8.2vw, 52px); font-weight: 800; line-height: 1.02; letter-spacing: -.06em; }
h1 span { color: var(--blue); }
.hero p:last-child { max-width: 430px; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.panel { padding: 21px; border: 1px solid #e9edf3; border-radius: 18px; background: var(--surface); box-shadow: 0 9px 28px #20345c0a; }
.results-panel { margin-top: 13px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.panel-heading .step-label { display: block; margin-bottom: 4px; color: var(--blue); }
h2 { margin: 0; font-size: 19px; letter-spacing: -.04em; }
.step-count { color: #a6afbd; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.google-button, .secondary-button { width: 100%; min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 0; border-radius: 11px; cursor: pointer; font-weight: 750; transition: background .15s ease, transform .12s ease, opacity .15s ease; }
.google-button { color: #fff; background: var(--blue); box-shadow: 0 5px 13px #2874e82b; }
.google-button:hover:not(:disabled) { background: var(--blue-dark); }
.google-button:active:not(:disabled), .secondary-button:active:not(:disabled) { transform: scale(.99); }
.google-button:disabled, .secondary-button:disabled { opacity: .55; cursor: wait; }
.google-g { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #4285f4; background: #fff; font-size: 15px; font-weight: 900; }
.setup-message, .message { margin: 11px 0 0; color: #7d8999; font-size: 11px; line-height: 1.5; text-align: center; }
.setup-message.error, .message.error { color: var(--red); }
.setup-message.success, .message.success { color: var(--green); }
.message { min-height: 16px; }
.link-button { display: block; margin: 11px auto 0; border: 0; padding: 7px 10px; color: #60718a; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.account-row { display: flex; align-items: center; gap: 10px; padding: 11px; margin: -2px 0 13px; border-radius: 12px; background: #f4f7fd; }
.avatar { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 14px; font-weight: 800; }
.account-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }
.account-copy strong, .account-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: #2d3a4f; font-size: 12px; }
.account-copy span { color: #7b8798; font-size: 10px; }
.connected-pill, .count-pill { padding: 5px 7px; border-radius: 30px; color: var(--green); background: #e9f7ef; font-size: 8px; font-weight: 850; letter-spacing: .08em; white-space: nowrap; }
.checks { display: flex; flex-direction: column; }
.check-row { display: flex; align-items: center; gap: 11px; min-height: 65px; border-top: 1px solid #eef1f5; }
.check-icon { display: grid; flex: 0 0 29px; width: 29px; height: 29px; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 850; }
.check-icon.pending { color: #8491a3; background: #eef1f5; }
.check-icon.success { color: #137846; background: #e3f5eb; }
.check-icon.failure { color: #b33139; background: #ffebec; }
.check-detail { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.check-detail strong { font-size: 12px; font-weight: 760; }
.check-detail span { color: #8591a2; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.check-state { color: #9ba5b3; font-size: 8px; font-weight: 850; letter-spacing: .07em; white-space: nowrap; }
.check-state.success { color: var(--green); }
.check-state.failure { color: var(--red); }
.document-library { margin-top: 12px; padding-top: 15px; border-top: 1px solid #eef1f5; }
.library-heading { display: flex; align-items: center; justify-content: space-between; }
.library-heading .step-label { color: var(--blue); }
h3 { margin: 4px 0 0; font-size: 15px; letter-spacing: -.025em; }
.count-pill { color: #42648f; background: #edf3ff; font-size: 10px; }
.library-help { margin: 8px 0 10px; color: #8490a0; font-size: 10px; line-height: 1.45; }
.document-list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.document-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #edf0f4; border-radius: 10px; background: #fcfdff; }
.document-name { min-width: 0; flex: 1; overflow: hidden; color: #39475c; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.read-button { flex: 0 0 auto; border: 0; border-radius: 7px; padding: 7px 10px; color: #235fc2; background: #edf4ff; font-size: 10px; font-weight: 800; cursor: pointer; }
.read-button:active { background: #dfeaff; }
.document-preview { margin-top: 13px; padding: 15px; border: 1px solid #dfe8f8; border-radius: 12px; background: #f8faff; }
.preview-topline { display: flex; align-items: center; gap: 7px; color: #6d7e9b; font-size: 8px; font-weight: 850; letter-spacing: .11em; }
.preview-icon { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 5px; color: #2864dc; background: #e5edff; font-size: 13px; }
.document-preview h3 { margin: 11px 0 7px; font-size: 13px; }
.document-preview p { max-height: 145px; overflow: auto; margin: 0; color: #66738a; font-size: 10px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-overflow-scrolling: touch; }
.document-preview a { display: inline-block; margin-top: 11px; color: var(--blue); font-size: 10px; font-weight: 800; text-decoration: none; }
.secondary-button { margin-top: 14px; border: 1px solid #dce5f2; color: #35557e; background: #f8faff; font-size: 11px; }
footer { display: flex; justify-content: space-between; gap: 12px; padding: 17px 2px 0; color: #96a0ae; font-size: 9px; line-height: 1.4; }
footer a { color: #7486a4; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hidden { display: none !important; }

@media (max-width: 440px) {
  body { padding-right: 13px; padding-left: 13px; }
  .hero { padding-top: 38px; }
  .panel { padding: 18px 16px; border-radius: 16px; }
  .check-row { gap: 9px; }
  .check-state { font-size: 7px; }
  footer { flex-wrap: wrap; }
}