@import url('/legacy-tokens.css');
/* Shared layout and keyboard-access fixes; page-specific visual design stays intact. */
/* Preserve the existing keyboard focus appearance through shared tokens. */
:root {
  --raw-focus-color: #338cff;
  --raw-focus-width: 3px;
  --raw-focus-offset: 4px;
  --focus-color: var(--raw-focus-color);
  --focus-width: var(--raw-focus-width);
  --focus-offset: var(--raw-focus-offset);
}
:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
/* Text controls match :focus-visible even on a mouse click; their own border/container
   already indicates focus. Suppress only that extra outline for pointer input. */
:root[data-focus-modality="pointer"] :is(input, textarea, select, [contenteditable="true"]):focus-visible { outline: none; }
.status-msg, [role="alert"] { overflow-wrap: anywhere; }
input, textarea, select { max-width: 100%; }
@media (max-width: 700px) {
  .nav-inner { flex-wrap: wrap; gap: 12px; padding: 14px 20px; }
  .nav-inner .brand-logo { flex-shrink: 0; }
  .nav-inner .nav-links { order: 3; width: 100%; display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .nav-inner .nav-links a { display: inline-flex; align-items: center; min-height: 36px; }
  .nav-inner > .btn-primary { margin-left: auto; }
  .footer-inner, .footer-links { flex-wrap: wrap; gap: 12px; }
  .direct-box { flex-direction: column; align-items: flex-start; gap: 16px; }
  .direct-email, .info-value { overflow-wrap: anywhere; min-width: 0; }
  .info-row { gap: 16px; }
  .info-label { flex-shrink: 0; }
  .info-value { text-align: right; }
  .page-main, .payment-card, .summary-card, .billing-card, .contact-card { min-width: 0; }
  .billing-card, .contact-card { padding: 24px; }
  .card-header-flex { flex-wrap: wrap; gap: 16px; }
  .sub-modal-dialog { padding: 28px 18px !important; max-height: 90dvh; overflow-y: auto; }
  #subscriptionModal .sub-modal-dialog > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  header:has(.admin-info) { padding: 16px 20px; flex-wrap: wrap; gap: 12px; }
  .admin-info { width: 100%; justify-content: space-between; gap: 12px; }
  .admin-user { overflow-wrap: anywhere; min-width: 0; }
  #adminMainView { min-width: 0; padding: 24px 20px; }
  #adminMainView .stats-grid { grid-template-columns: 1fr; }
  #adminMainView .filter-bar { flex-wrap: wrap; }
  #adminMainView .tabs { flex-wrap: wrap; width: 100%; }
  #adminMainView .tab-btn { flex: 1; min-width: 60px; }
  .table-container { max-width: 100%; }
  .page-title { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (max-width: 700px) {
  .nav-inner > .nav-actions { margin-left: auto; }
  #adminMainView .controls-bar { flex-direction: column; align-items: stretch; }
  #adminMainView .tabs-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  #adminMainView .search-box { min-width: 0; width: 100%; }
  #adminMainView .search-box input { min-width: 0; width: 100%; }
  .acc-modal-container { width: calc(100vw - 24px); max-height: 90dvh; overflow-y: auto; }
  .acc-content-pane { min-width: 0; }
}
.bg-glow { width: min(600px, 100vw); height: min(600px, 100vw); }
@media (max-width: 700px) {
  body.marketing-page .nav-inner .nav-links { display: none; }
  .acc-modal-container { flex-direction: column; height: auto; max-height: 90dvh; overflow: hidden; }
  .acc-sidebar { width: 100%; padding: 16px 52px 12px 14px; border-right: 0; border-bottom: 1px solid #ffffff18; }
  .acc-nav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .acc-nav-btn { padding: 9px 10px; gap: 8px; min-width: 0; }
  .acc-sidebar > .logout-btn { margin-top: 8px; }
  .acc-content-pane { min-height: 0; width: 100%; padding: 20px; overflow-y: auto; }
  .acc-card-row { flex-wrap: wrap; gap: 14px; }
  .acc-profile-row { min-width: 0; max-width: 100%; }
}
.generation-notice { padding: 18px; margin: 18px 0; border: 1px solid #bf8e37; border-radius: 12px; background: #9c741514; color: var(--text-main, inherit); font-size: 13px; line-height: 1.6; }
.generation-notice p, .generation-notice ul { margin: 8px 0; }
.generation-notice li { margin-left: 18px; overflow-wrap: anywhere; }
.generation-notice a { color: #479bff; }
.generation-review { margin-top: 32px; padding: 22px; border: 1px solid #1e293b; border-radius: 16px; background: #0f1420; }
.generation-review p { color: #a5b2c5; font-size: 13px; line-height: 1.6; margin: 10px 0; overflow-wrap: anywhere; }
.generation-review-card { border-top: 1px solid #263244; padding: 18px 0; }
.generation-review pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; margin: 10px 0; color: #a5b2c5; }
.generation-review label { display: block; font-size: 13px; margin: 12px 0 5px; }
.generation-review textarea, .generation-review select { width: 100%; padding: 10px; background: #080e19; color: #edf2fa; border: 1px solid #334155; border-radius: 6px; }
.generation-review h2 { font-size: 20px; margin-bottom: 12px; }
@media(max-width:700px) { .generation-review { padding: 16px; } }

.generation-review-card { overflow-wrap: anywhere; }

@layer components {
  .footer-policy-links { min-inline-size: 0; max-inline-size: 100%; flex-wrap: wrap; justify-content: center; }
}

/* Recovery and receipt actions use the existing page controls; 44px is the mobile tap target. */
@layer base {
  :root {
    --raw-size-account-action: 44px;
    --account-action-size: var(--raw-size-account-action);
    --size-account-action: var(--account-action-size);
  }
}
@layer components {
  #passwordRecoveryLink button, #passwordRecoverySection button, #purchaseHistory button {
    min-height: var(--size-account-action);
    max-width: 100%;
  }
}