:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(900px 400px at 50% -10%, rgba(229, 160, 13, 0.22), transparent 70%), #0b0b10;
  color: #f1f1f5; font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.card { width: 100%; max-width: 460px; background: #1b1b26; border: 1px solid #2a2a38; border-radius: 18px; padding: 30px 24px; }
.logo { font-size: 2.4rem; text-align: center; }
h1 { margin: 6px 0 4px; font-size: 1.8rem; text-align: center; }
.sub { margin: 0 0 22px; color: #a9a9bb; text-align: center; }

.plex-btn {
  width: 100%; padding: 16px; border: 0; border-radius: 12px; cursor: pointer;
  font-weight: 800; font-size: 1.1rem; color: #111;
  background: linear-gradient(135deg, #e5a00d, #ffcf5c);
  box-shadow: 0 10px 28px rgba(229, 160, 13, 0.25);
  transition: transform 0.15s ease;
}
.plex-btn:hover { transform: translateY(-2px); }
.plex-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.msg { min-height: 1.5em; margin: 12px 0 0; text-align: center; color: #d6d6e0; font-size: 0.95rem; }
.msg.ok { color: #6ee7b7; }
.msg.err {
  color: #fecaca; text-align: left; padding: 10px 12px; border-radius: 10px;
  background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.4);
}

.how { margin-top: 22px; padding-top: 18px; border-top: 1px solid #2a2a38; }
.how h2 { margin: 0 0 10px; font-size: 1rem; color: #ffcf5c; }
.how ol { list-style: none; counter-reset: n; margin: 0; padding: 0; }
.how li { counter-increment: n; position: relative; padding-left: 34px; margin-bottom: 10px; color: #d6d6e0; }
.how li::before {
  content: counter(n); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; color: #111; background: #ffcf5c;
}
.how strong, .trouble strong { color: #f1f1f5; }

.trouble { margin-top: 14px; background: #14141c; border: 1px solid #2a2a38; border-radius: 12px; }
.trouble summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
.trouble ul { margin: 0; padding: 0 14px 14px 32px; color: #d6d6e0; }
.trouble li { margin-bottom: 8px; }

button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #ffcf5c; outline-offset: 2px; }
a { color: #ffcf5c; }