/* ══ D&D Sync — small standalone pages: login (index.html), reset-password, admin, help ═══════════════
   Loaded after theme.css and ui.css. Every colour comes from the theme variables of theme.css, so the four
   themes (Night, Parchment, Toxic, Plant) look alike on these pages as in the apps. No colour values here.
   Page rules are scoped with a body class: pg-login | pg-reset | pg-admin | pg-help. */

/* ── shared: auth card pages (login, reset password) ── */
body.pg-login, body.pg-reset {
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, var(--accent-soft) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px;
}
.pg-auth-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 20px;
  padding: 28px 20px; width: 100%; max-width: 400px;
  box-shadow: var(--shadow); text-align: center; color: var(--text);
}
.pg-logo {
  width: 88px; height: 88px; border-radius: 50%; border: 2px solid var(--gold);
  margin-bottom: 14px; object-fit: cover;
  box-shadow: 0 0 28px var(--accent-soft);
}
.pg-brand-title {
  font-family: 'Cinzel', Georgia, serif; font-size: 22px; font-weight: 700;
  color: var(--text); letter-spacing: 0.5px; margin-bottom: 4px;
}
.pg-brand-sub { font-size: 11.5px; color: var(--text-2); margin-bottom: 26px; line-height: 1.5; }
.pg-auth-card label {
  display: block; font-size: 10.5px; color: var(--text-2); text-align: left;
  margin-bottom: 4px; margin-top: 12px;
  font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
}
.pg-auth-card input[type="text"], .pg-auth-card input[type="email"], .pg-auth-card input[type="password"],
.pg-panel input[type="password"] {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--field-border); border-radius: 9px;
  background: var(--field-bg); color: var(--text); font-size: 16px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pg-auth-card input:focus, .pg-panel input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pg-auth-btn { margin-top: 18px; letter-spacing: 0.3px; }
.pg-link { font-size: 11px; color: var(--accent); text-decoration: none; }
.pg-link:hover { text-decoration: underline; }

/* message box (error / success) */
.pg-msg {
  margin-top: 12px; padding: 9px 12px; border-radius: 9px; font-size: 12px; text-align: left;
  display: flex; align-items: center; gap: 6px; border: 1px solid transparent;
}
.pg-msg--error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.pg-msg--ok    { background: var(--success-soft); border-color: var(--success); color: var(--success); }

@media (min-width: 480px) {
  .pg-auth-card { padding: 36px 32px; }
}
@media (min-width: 1024px) {
  body.pg-login, body.pg-reset { zoom: 1.3; }
  .pg-login .pg-auth-card { max-width: 460px; }
}

/* ── login / register (index.html) ── */
.pg-login .theme-toggle-btn { position: fixed; top: 14px; right: 14px; z-index: 9999; width: 34px; height: 34px; border-radius: 8px; }
.pg-tabs { display: flex; gap: 3px; margin-bottom: 20px; background: var(--bg); border-radius: 10px; padding: 3px; }
.pg-tab {
  flex: 1; padding: 8px 6px; border-radius: 8px; background: transparent; color: var(--text-2);
  cursor: pointer; font-size: 13px; font-weight: 600; transition: background 0.2s, color 0.2s;
}
.pg-tab.is-active { background: var(--accent-soft); color: var(--text); box-shadow: 0 0 0 1px var(--card-border); }
.pg-mode-toggle { display: flex; background: var(--bg); border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.pg-mode-btn {
  flex: 1; padding: 8px 4px; font-size: 12px; font-weight: 600; cursor: pointer;
  border: none; background: transparent; color: var(--text-2); border-radius: 8px; transition: all 0.2s;
}
.pg-mode-btn.is-active { background: var(--accent); color: var(--on-accent); }
.pg-edition-row { display: flex; gap: 8px; margin-bottom: 12px; }
.pg-edition-btn {
  flex: 1; padding: 8px; border-radius: 8px; border: 1px solid var(--field-border);
  background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer;
}
.pg-edition-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.pg-auth-card input.pg-invite-input { text-transform: uppercase; letter-spacing: 4px; font-size: 18px; font-weight: 700; text-align: center; }
.pg-forgot-row { text-align: right; margin-top: 8px; }
.pg-back-row { text-align: center; margin-top: 10px; }
.pg-forgot-intro { font-size: 12px; color: var(--text-2); margin-bottom: 12px; text-align: left; }
.pg-login .hint { margin-top: 8px; font-style: italic; }
.pg-consent {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; text-align: left;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 9px; padding: 10px 12px;
}
.pg-consent input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.pg-consent span { font-size: 11px; color: var(--text-2); line-height: 1.5; }
.pg-consent a { color: var(--accent); }

/* ── reset password ── */
.pg-reset .pg-logo { width: 80px; height: 80px; }
.pg-reset .pg-brand-title { font-size: 20px; letter-spacing: 0.3px; }
.pg-reset .pg-brand-sub { font-size: 12px; margin-bottom: 24px; }
.pg-reset .pg-brand-sub--flush { margin-bottom: 0; }
.pg-reset .pg-auth-card label { margin-top: 14px; }
.pg-reset .pg-auth-btn { margin-top: 20px; }
.pg-reset .pg-msg { margin-top: 14px; padding: 10px 14px; font-size: 12.5px; }
.pg-back { display: block; margin-top: 16px; font-size: 12px; color: var(--accent); text-decoration: none; opacity: 0.8; transition: opacity 0.2s; }
.pg-back:hover { opacity: 1; }

/* ── admin ── */
body.pg-admin {
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, var(--accent-soft) 0%, transparent 70%);
  display: flex; flex-direction: column; align-items: center; padding: 32px 12px 60px;
}
.pg-admin-title {
  font-family: 'Cinzel', Georgia, serif; font-size: 22px; font-weight: 700; color: var(--text);
  margin-bottom: 6px; letter-spacing: 1px; text-align: center;
}
.pg-admin-sub { font-size: 12px; color: var(--text-2); margin-bottom: 32px; }
.pg-admin-section { width: 100%; max-width: 700px; }
.pg-panel {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 18px 14px; width: 100%; margin-bottom: 20px; box-shadow: var(--shadow);
}
.pg-panel label { font-size: 10.5px; color: var(--text-2); font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; display: block; margin-bottom: 6px; }
.pg-panel input[type="password"] { margin-bottom: 14px; }
.pg-section-title { font-size: 10.5px; font-weight: 600; color: var(--text-2); letter-spacing: 0.6px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.pg-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.pg-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pg-table { width: 100%; border-collapse: collapse; }
.pg-table thead th {
  font-size: 10px; font-weight: 600; color: var(--text-2); letter-spacing: 0.6px; text-transform: uppercase;
  text-align: left; padding: 0 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.pg-table thead th.is-right { text-align: right; }
.pg-table tbody tr { border-bottom: 1px solid var(--line-faint); }
.pg-table tbody tr:last-child { border-bottom: none; }
.pg-table tbody td { padding: 10px 8px; font-size: 12px; color: var(--text); vertical-align: middle; }
.pg-table tbody td.pg-size-cell { color: var(--text-2); font-size: 11px; white-space: nowrap; }
.pg-table tbody td.pg-cell-sm { font-size: 11px; }
.pg-actions-cell { display: flex; gap: 6px; justify-content: flex-end; }
.pg-realm-name { font-weight: 600; }
.pg-realm-code { font-size: 10px; font-family: monospace; color: var(--text-2); letter-spacing: 2px; }
.pg-table tbody td.pg-empty { text-align: center; padding: 24px; color: var(--text-2); font-style: italic; font-size: 13px; }
.pg-admin .pg-msg { font-size: 12px; padding: 10px 14px; }
.pg-login-status { font-size: 12px; margin-top: 8px; color: var(--danger); }
.pg-spinner {
  display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: pg-spin 0.6s linear infinite; vertical-align: middle;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }
@media (min-width: 640px) {
  body.pg-admin { padding: 40px 16px 60px; }
  .pg-panel { padding: 28px 32px; }
}
@media (min-width: 1024px) { body.pg-admin { zoom: 1; } }

/* ── help / rules reference ── */
body.pg-help { padding-bottom: 40px; }
.pg-help-title { display: flex; align-items: center; gap: 8px; font-family: 'Cinzel', Georgia, serif; font-size: 16px; }
.pg-help-body { max-width: 720px; margin: 0 auto; padding: 20px 16px; }
.pg-help-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.pg-help-tab {
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--card-border); background: transparent;
  color: var(--text-2); font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.pg-help-tab.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--gold-text); }
.pg-help-section { display: none; }
.pg-help-section.is-active { display: block; }
.pg-help-heading {
  font-family: 'Cinzel', Georgia, serif; font-size: 13px; color: var(--gold-text);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px;
}
.pg-help-heading--spaced { margin-top: 20px; }
.pg-cond-grid { display: flex; flex-direction: column; gap: 10px; }
.pg-cond-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; }
.pg-cond-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; user-select: none; }
.pg-cond-header:hover { background: var(--line-faint); }
.pg-cond-name { font-size: 13px; font-weight: 700; color: var(--text); }
.pg-cond-toggle { display: inline-flex; font-size: 12px; color: var(--text-3); }
.pg-cond-body { display: none; padding: 0 14px 12px; border-top: 1px solid var(--line-faint); }
.pg-cond-body.is-open { display: block; }
.pg-cond-entry { font-size: 12px; color: var(--text-2); line-height: 1.55; margin-top: 8px; padding-left: 14px; position: relative; }
.pg-cond-entry::before { content: '•'; position: absolute; left: 0; color: var(--gold-text); }
.pg-cond-empty { font-size: 12px; color: var(--text-3); margin-top: 8px; }
.pg-ref-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 20px; }
.pg-ref-table th {
  text-align: left; padding: 8px 10px; background: var(--accent-soft); color: var(--gold-text);
  font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 1px solid var(--line);
}
.pg-ref-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-faint); color: var(--text-2); vertical-align: top; }
.pg-ref-table tr:last-child td { border-bottom: none; }
.pg-ref-table td:first-child { color: var(--text); font-weight: 600; }
.pg-badge {
  display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700;
  background: var(--accent-soft); color: var(--gold-text); border: 1px solid var(--line); margin-right: 4px;
}
.pg-loading { color: var(--text-3); font-size: 13px; padding: 20px 0; }
.pg-help input.pg-search {
  width: 100%; padding: 10px 14px; background: var(--card); border: 1px solid var(--card-border);
  border-radius: 8px; color: var(--text); font-size: 16px; outline: none; margin-bottom: 14px;
}
.pg-help input.pg-search:focus { border-color: var(--accent); }
.pg-info-box { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.pg-info-box--spaced { margin-bottom: 16px; }
.pg-info-box-title { font-size: 11px; font-weight: 700; color: var(--gold-text); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }
.pg-info-box p { font-size: 12px; color: var(--text-2); line-height: 1.6; margin-bottom: 6px; }
.pg-info-box p:last-child { margin-bottom: 0; }
.pg-info-box strong { color: var(--text); }
.pg-info-box strong .icon { margin-right: 2px; }
@media (min-width: 640px) {
  .pg-ref-table th, .pg-ref-table td { padding: 8px 12px; }
  .pg-ref-table td:first-child { white-space: nowrap; }
}
@media (min-width: 1024px) { body.pg-help { zoom: 1; } }