/* MatchLetter companion additions. Reuse the website's existing neutral theme. */
.companion-account-note { padding:12px 14px; margin-bottom:16px; border:1px solid var(--ml-border,rgba(255,255,255,.08)); background:rgba(255,255,255,.03); border-radius:10px; }
.compare-input-wrap.is-own-library input { padding-left:58px; }
.compare-input-wrap.is-own-library .input-icon-prefix { font-size:12px; }
.film-companion-footer {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  scroll-margin-top: 100px;
}
.film-companion-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.film-companion-heading h2 { font-size:18px; font-weight:650; letter-spacing:-.4px; margin:0 0 5px; }
.film-companion-heading p { color:var(--text-secondary,#9ca3af); font-size:13px; margin:0; }
.film-companion-label { white-space:nowrap; color:var(--text-muted,#6b7280); font-size:11px; border:1px solid var(--border-subtle,rgba(255,255,255,.08)); border-radius:999px; padding:4px 10px; }
.film-companion-options { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.film-companion-option { display:flex; align-items:flex-start; gap:14px; padding:22px; background:var(--bg-surface,#121720); border:1px solid var(--border-subtle,rgba(255,255,255,.08)); border-radius:var(--radius-lg,14px); }
.film-companion-option>svg { width:24px; height:24px; flex-shrink:0; color:var(--text-secondary,#9ca3af); margin-top:2px; }
.film-companion-option>div { min-width:0; }
.film-companion-option h3 { font-size:14px; font-weight:650; margin:0 0 7px; }
.film-companion-option p { color:var(--text-secondary,#9ca3af); font-size:12px; line-height:1.75; margin:0 0 15px; }
.film-companion-button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:44px; padding:10px 14px; border:1px solid var(--border-medium,rgba(255,255,255,.14)); background:rgba(255,255,255,.06); border-radius:var(--radius-md,10px); color:var(--text-primary,#f8fafc); font:600 12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-decoration:none; cursor:pointer; }
.film-companion-button:hover { background:rgba(255,255,255,.1); border-color:var(--border-hover,rgba(255,255,255,.22)); }
.film-companion-button[hidden] { display:none; }
.film-companion-option .film-companion-note { font-size:11px; margin:10px 0 0; color:var(--text-muted,#6b7280); }
.film-companion-setup { margin-top:13px; color:var(--text-secondary,#9ca3af); font-size:12px; }
.film-companion-setup summary { cursor:pointer; text-underline-offset:3px; }
.film-companion-setup ol { padding-left:18px; margin:13px 0; line-height:1.8; }
.film-companion-setup li { margin-bottom:8px; }
.film-companion-setup code { font-size:11px; overflow-wrap:anywhere; }
.film-companion-setup a { color:var(--text-primary,#f8fafc); text-underline-offset:3px; }
.film-companion-setup p+p { margin-top:8px; }
.film-companion-setup p { font-size:11px; margin-bottom:0; }
.film-companion-privacy { color:var(--text-muted,#6b7280); font-size:11px; line-height:1.8; margin:15px 0 0; }
.film-companion-footer :is(a,button,summary):focus-visible { outline:2px solid var(--text-primary,#f8fafc); outline-offset:4px; }

.companion-dialog {
  color-scheme:dark; box-sizing:border-box; width:min(460px,calc(100% - 28px)); max-height:calc(100dvh - 32px);
  overflow:auto; padding:28px; border-radius:18px; border:1px solid var(--ml-border-hover,rgba(255,255,255,.18));
  color:var(--ml-text,#f8fafc); background:var(--ml-card-bg,#10141d); box-shadow:0 30px 110px #0008;
  font:14px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin:auto;
}
.companion-dialog::backdrop { background:#07090ebb; backdrop-filter:blur(8px); }
.companion-dialog * { box-sizing:border-box; }
.companion-dialog-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.companion-eyebrow { font-size:10px; font-weight:650; letter-spacing:1.2px; color:#94a3b8; }
.companion-icon-button { border:0; background:transparent; color:#94a3b8; font-size:25px; cursor:pointer; min-width:44px; min-height:44px; }
.companion-film-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.07); color:#f8fafc; font-size:28px; margin:18px 0; }
.companion-dialog h2 { font-size:27px; line-height:1.15; letter-spacing:-.8px; font-weight:650; margin:0 0 12px; }
.companion-muted { color:#94a3b8; font-size:13px; line-height:1.7; margin:0 0 20px; }
.companion-dialog label { display:block; margin:15px 0 7px; font-size:12px; font-weight:600; }
.companion-dialog input,.companion-dialog select { min-height:46px; width:100%; border:1px solid rgba(255,255,255,.14); background:#0b0e15; color:#f8fafc; border-radius:10px; padding:10px 12px; font:inherit; }
.companion-field-row { display:grid; grid-template-columns:1fr 1.6fr; gap:12px; }
.companion-primary { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:48px; border:0; border-radius:10px; padding:12px 17px; background:#f8fafc; color:#0b0e14; font:inherit; font-weight:650; cursor:pointer; }
.companion-primary:disabled { opacity:.6; cursor:wait; }
.companion-save-feedback { color:#fca5a5; font-size:12px; min-height:20px; margin:12px 0; }
.companion-fine { color:#94a3b8; font-size:11px; line-height:1.7; margin:13px 0 0; }
.companion-dialog :is(button,input,select,a):focus-visible { outline:2px solid #f8fafc; outline-offset:4px; }

/* Installation uses browser UI; only explicitly opened fallback help is styled. */
.app-install-steps { padding-left:22px; color:#e2e8f0; font-size:14px; }
.app-install-steps li { margin:13px 0; }
.app-install-help { margin:14px 0 0; color:#94a3b8; font-size:12px; }
.app-install-reopen { background:none; border:0; color:inherit; font:inherit; cursor:pointer; text-align:left; }
@media(max-width:600px) {
  .film-companion-options { grid-template-columns:1fr; }
  .film-companion-heading { align-items:flex-start; }.film-companion-label { display:none; }
  .film-companion-option { padding:18px; gap:12px; }
}
@media(max-width:560px) {
  .companion-dialog { padding:23px; }.companion-dialog h2 { font-size:25px; }
}