/* NO raw hex/rgba/rem values — use var(--token) from base/variables.css     */
/* Exception: ::-webkit-scrollbar pseudo-elements do not support CSS custom  */
/* properties — raw values used there match the token values exactly.         */
/* ========================================================================== */
/* AUTH / ADMIN / LEGAL STYLES                                                */
/* ========================================================================== */

/* === 1. Body base (standalone pages — no main.css) === */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/*
  Login page: body becomes a flex column so the split panel
  fills exactly the remaining height after the header.
  overflow:hidden prevents double scrollbars.
*/
body.login-page-body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

a {
  color: var(--color-accent-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* === 2. Header === */
.auth-header {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  padding: var(--spacing-md) var(--spacing-xl);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* Slim variant used on login — brand only, no actions */
.auth-header--slim {
  justify-content: flex-start;
}

.auth-header h1 {
  margin: 0;
  font-size: var(--font-size-3xl);
  font-weight: 600;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-link {
  color: var(--color-accent-primary);
  text-decoration: none;
  font-size: var(--font-size-lg);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.home-link:hover {
  color: var(--color-accent-hover);
  text-decoration: none;
}

/* === 3. Split-screen login layout === */
/*
  .login-split fills the remaining height after the header.
  body.login-page-body is flex column with height:100dvh,
  so flex:1 here = exactly the remaining space.
*/
.login-split {
  display: grid;
  grid-template-columns: 420px 1fr;
  flex: 1;
  min-height: 0; /* required for flex children to respect overflow */
}

.login-left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl) var(--spacing-xl);
  background: var(--color-bg-primary);
  border-right: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

.login-right {
  overflow-y: auto;
  padding: var(--spacing-2xl) var(--spacing-2xl);
  background: var(--color-bg-secondary);
  /* Styled scrollbar — CSS vars used where supported; webkit pseudo-elements
     do not support custom properties so raw values are used there instead. */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Webkit scrollbar (Chrome, Edge, Safari) */
.login-right::-webkit-scrollbar {
  width: 6px;
}
.login-right::-webkit-scrollbar-track {
  background: #141928; /* stylelint-disable-line declaration-property-value-disallowed-list, color-no-invalid-hex -- webkit pseudo-elements do not support CSS custom properties; value = --color-bg-primary */
  border-radius: 3px;
}
.login-right::-webkit-scrollbar-thumb {
  background: rgba(64, 224, 208, 0.4); /* stylelint-disable-line declaration-property-value-disallowed-list -- webkit pseudo-elements do not support CSS custom properties; value = --scrollbar-thumb */
  border-radius: 3px;
}
.login-right::-webkit-scrollbar-thumb:hover {
  background: #40e0d0; /* stylelint-disable-line declaration-property-value-disallowed-list, color-no-invalid-hex -- webkit pseudo-elements do not support CSS custom properties; value = --color-accent-primary */
}

.login-right-intro {
  margin-bottom: var(--spacing-2xl);
}

.login-right-heading {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin: 0 0 var(--spacing-md) 0;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-right-sub {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
  max-width: 560px;
}

/* === 4. Auth card (used inside login-left and register) === */
.auth-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
  font-family: var(--font-ui);
}

.auth-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-accent-subtle);
}

.auth-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-accent-primary);
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

/* === 5. Form fields === */
.auth-field {
  margin-bottom: var(--spacing-xl);
}

.auth-field label {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.auth-field input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-family: var(--font-ui);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-field input:focus {
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px var(--color-focus-ring-halo);
}

.auth-field input::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.6;
}

.form-hint {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
}

/* === 6. Checkbox === */
.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.checkbox-label {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* === 7. Buttons === */
.btn-primary {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-on-accent);
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-dark));
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-accent-hover);
}

.btn-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.btn-secondary {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--color-accent-tint-strong);
  border-color: var(--color-accent-primary);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* === 8. Messages === */
.auth-error {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  color: var(--color-error-text);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-lg);
}

.warning-box {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  color: var(--color-warning-text);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-lg);
}

/* === 9. Auth links === */
.auth-link {
  display: block;
  text-align: center;
  margin-top: var(--spacing-lg);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.auth-link a,
.auth-links a {
  color: var(--color-accent-primary);
  text-decoration: none;
}

.auth-link a:hover,
.auth-links a:hover {
  color: var(--color-accent-hover);
}

.auth-links {
  margin-top: var(--spacing-lg);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-align: center;
}

/* === 10. Feature grid (login right panel) === */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.feature-card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-accent-subtle);
}

.feature-card h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: var(--spacing-md) 0 var(--spacing-sm);
  color: var(--color-text-primary);
}

.feature-card p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.svg-container {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.svg-container svg {
  height: 100%;
  width: auto;
  max-width: 100%;
  overflow: visible;
}

/* --- Feature illustration palette -----------------------------------------
   The resting colours of the three login illustrations. They live here, as
   `fx-*` classes, rather than on `fill=`/`stroke=` presentation attributes in
   login.html, because a presentation attribute cannot hold a `var()` — so a
   colour written there is necessarily a raw hex, which is what CLAUDE.md's
   token rule forbids and what `npm run lint:css` cannot see.

   Every value below is a token from base/variables.css. The `anim*` keyframes
   further down already animate these same tokens, so the resting and animated
   states now draw from one palette instead of two.
   -------------------------------------------------------------------------- */

/* Data/graph nodes. */
.fx-node {
  fill: var(--color-text-secondary);
}

/* Structural connectors — the accent hue at reduced strength. The opacity is
   a presentational modifier on the token, not a second colour value: the hue
   still has exactly one source. */
.fx-wire {
  stroke: var(--color-accent-primary);
  stroke-opacity: 0.6;
}

/* Data in motion, and the validation scan line. */
.fx-flow,
.fx-laser {
  stroke: var(--color-accent-hover);
}

.fx-laser {
  filter: drop-shadow(0 0 6px var(--color-accent-hover));
}

/* JSON braces. */
.fx-brace {
  stroke: var(--color-accent-primary);
}

/* Document outline and its text lines. */
.fx-doc {
  stroke: var(--color-text-secondary);
}

/* A passed check. */
.fx-check {
  stroke: var(--color-success);
}

/* The explanation panel and the prose inside it. The fill was authored as
   rgba(64, 224, 208, 0.05); --color-accent-tint-faint is the same hue at 0.04
   and exists for exactly this "ultra-subtle resting fill" job. Adding a 0.05
   token beside it would put two near-identical values on the scale, so the
   0.01 difference is taken deliberately — asserted in
   tests/test_frontend_code_rules.py rather than left as an undocumented drift. */
.fx-panel {
  stroke: var(--color-accent-primary);
  fill: var(--color-accent-tint-faint);
}

.fx-textline {
  stroke: var(--color-text-primary);
}

/* The AI sparkles — a bright one and a softer companion. */
.fx-spark {
  fill: var(--color-accent-hover);
}

.fx-spark-soft {
  fill: var(--color-accent-primary);
}

.feature-card:hover [class^="anim"] {
  animation-play-state: running;
}

/* === 11. About section (inside login right panel) === */
.about-container {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--spacing-xl);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-accent-subtle);
}

.about-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.logo-container {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-inset);
}

.studio-logo {
  width: 100%;
  height: auto;
  display: block;
}

.tab-navigation {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.tab-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: 500;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  text-align: left;
}

.tab-button:hover {
  background: var(--color-accent-tint);
  border-color: var(--color-accent-primary);
}

.tab-button.active {
  background: var(--color-focus-ring);
  border-color: var(--color-focus-ring);
  color: var(--color-text-on-accent);
  font-weight: 600;
}

.tab-button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.about-content {
  min-width: 0;
  min-height: 360px;
}

.tab-panel {
  display: none;
  animation: fadeIn var(--transition-fast);
}

.tab-panel.active {
  display: block;
}

.tab-panel h2 {
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-3xl);
  font-weight: 600;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tab-panel h3 {
  margin: var(--spacing-xl) 0 var(--spacing-md) 0;
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--color-accent-primary);
}

.tab-panel p {
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  line-height: 1.6;
}

.highlight-text {
  background: var(--color-focus-ring-bg);
  border-left: 3px solid var(--color-focus-ring);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  margin: var(--spacing-md) 0;
  font-size: var(--font-size-lg);
}

.capability-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.capability-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--spacing-sm);
  align-items: flex-start;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-inset);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  font-size: var(--font-size-lg);
  line-height: 1.5;
  color: var(--color-text-primary);
}

.can-do-list li { border-left-color: var(--color-success); }
.can-do-list .icon-check { color: var(--color-success); font-weight: 700; font-size: var(--font-size-2xl); }

.cannot-do-list li {
  border-left-color: var(--color-warning);
  grid-template-columns: 28px 160px 1fr;
}
.cannot-do-list .limit-label { color: var(--color-warning-text); font-weight: 600; font-size: var(--font-size-base); }
.cannot-do-list .icon-warning { color: var(--color-warning); font-weight: 700; font-size: var(--font-size-2xl); }

.key-message {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  color: var(--color-warning-text);
  text-align: center;
  font-size: var(--font-size-lg);
}

/* === 12. Legal pages === */
.legal-container {
  max-width: 800px;
  margin: var(--spacing-2xl) auto;
  padding: 0 var(--spacing-xl) var(--spacing-2xl);
  line-height: 1.7;
}

.legal-container h1 {
  font-size: var(--font-size-3xl);
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.legal-container h2 {
  margin-top: var(--spacing-xl);
  color: var(--color-accent-primary);
}

.legal-container h3 {
  margin-top: var(--spacing-lg);
  color: var(--color-text-secondary);
}

.legal-container p,
.legal-container li {
  color: var(--color-text-primary);
}

.contact-box {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

/* === 13. Legal modal (register page) === */
.legal-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0; width: 100%; height: 100%;
  background-color: var(--color-bg-inset);
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.legal-modal[aria-hidden="false"] {
  display: flex;
}

.legal-modal-content {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 100%; max-width: 700px; max-height: 85vh;
  display: flex; flex-direction: column;
}

.legal-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--spacing-xl); border-bottom: 1px solid var(--color-border-subtle);
}

.legal-modal-header h2 {
  margin: 0;
  font-size: var(--font-size-3xl);
  color: var(--color-text-primary);
}

.modal-close-btn {
  background: none; border: none; color: var(--color-text-secondary);
  font-size: var(--font-size-3xl); cursor: pointer; padding: 0;
  width: 32px; height: 32px; line-height: 1;
  transition: color var(--transition-fast);
}

.modal-close-btn:hover { color: var(--color-text-primary); }

.modal-close-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.legal-modal-body {
  padding: var(--spacing-xl);
  overflow-y: auto;
  flex: 1;
  color: var(--color-text-primary);
}

.legal-modal-body p,
.legal-modal-body li { color: var(--color-text-primary); }
.legal-modal-body h3 { color: var(--color-accent-primary); margin-top: var(--spacing-lg); }

.legal-modal-footer {
  padding: var(--spacing-md) var(--spacing-xl);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: flex-end;
}

/* === 14. Admin components === */
.admin-container {
  max-width: 1200px;
  margin: var(--spacing-2xl) auto;
  padding: 0 var(--spacing-xl);
}

.admin-header {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.stat-card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  text-align: center;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-hover);
}

.stat-card h3 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.stat-value {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-accent-primary);
  line-height: 1;
}

.section {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}

/* === 15. Admin table === */
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-lg); }
thead { background: var(--color-bg-inset); border-bottom: 2px solid var(--color-border); }
thead th { padding: var(--spacing-md) var(--spacing-lg); text-align: left; color: var(--color-accent-primary); font-size: var(--font-size-base); text-transform: uppercase; }
tbody tr { border-bottom: 1px solid var(--color-border-subtle); transition: background var(--transition-fast); }
tbody tr:hover { background: var(--color-accent-tint); }
tbody td { padding: var(--spacing-md) var(--spacing-lg); color: var(--color-text-primary); }

/* === 16. Badges === */
.badge { display: inline-block; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-pill); font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning); }
.badge-error   { background: var(--color-error-bg);   color: var(--color-error-text);   border: 1px solid var(--color-error); }
.badge-danger  { background: var(--color-error-bg);   color: var(--color-error-text);   border: 1px solid var(--color-error); }

/* === 17. Keyframe animations === */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-node { 0%, 100% { fill: var(--color-accent-primary); r: 4; filter: drop-shadow(0 0 2px var(--color-accent-primary)); } 50% { fill: var(--color-accent-hover); r: 6; filter: drop-shadow(0 0 8px var(--color-accent-hover)); } }
@keyframes flow-data { 0% { stroke-dashoffset: 100; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes json-glow { 0%, 100% { stroke: var(--color-accent-primary); filter: drop-shadow(0 0 0 transparent); } 50% { stroke: var(--color-accent-hover); filter: drop-shadow(0 0 10px var(--color-accent-hover)); } }
@keyframes laser-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 90% { transform: translateY(80px); opacity: 0; } 100% { transform: translateY(80px); opacity: 0; } }
@keyframes check-pop { 0%, 70% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.2); opacity: 1; } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes doc-pulse { 0%, 100% { stroke: var(--color-text-secondary); } 80% { stroke: var(--color-success); filter: drop-shadow(0 0 5px var(--color-success)); } }
@keyframes morph-json { 0%, 20% { opacity: 1; transform: translateX(0); } 40%, 80% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes morph-text { 0%, 20% { opacity: 0; transform: translateX(-20px); } 40%, 80% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }
@keyframes ai-sparkle { 0% { transform: rotate(0deg) scale(0.8); opacity: 0.5; } 50% { transform: rotate(180deg) scale(1.2); opacity: 1; filter: drop-shadow(0 0 8px var(--color-accent-hover)); } 100% { transform: rotate(360deg) scale(0.8); opacity: 0.5; } }

.anim1-node-1 { animation: pulse-node 3s infinite 0s paused; }
.anim1-node-2 { animation: pulse-node 3s infinite 0.5s paused; }
.anim1-node-3 { animation: pulse-node 3s infinite 1s paused; }
.anim1-flow { stroke-dasharray: 10; animation: flow-data 2s linear infinite paused; }
.anim1-json { animation: json-glow 3s infinite 1.5s paused; }
.anim2-laser { animation: laser-scan 3s cubic-bezier(0.4, 0, 0.2, 1) infinite paused; }
.anim2-check-1 { animation: check-pop 3s ease-out infinite paused; transform-origin: 155px 40px; }
.anim2-check-2 { animation: check-pop 3s ease-out infinite 0.2s paused; transform-origin: 155px 70px; }
.anim2-check-3 { animation: check-pop 3s ease-out infinite 0.4s paused; transform-origin: 155px 100px; }
.anim2-doc { animation: doc-pulse 3s infinite paused; }
.anim3-json { animation: morph-json 6s cubic-bezier(0.4, 0, 0.2, 1) infinite paused; }
.anim3-text { animation: morph-text 6s cubic-bezier(0.4, 0, 0.2, 1) infinite paused; }
.anim3-spark { animation: ai-sparkle 3s linear infinite paused; transform-origin: 150px 40px; }

/* === 18. Media queries === */
@media (max-width: 1024px) {
  .login-split { grid-template-columns: 340px 1fr; }

  .admin-container { max-width: 100%; }
  table { display: block; overflow-x: auto; }

  .about-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .about-sidebar { flex-direction: row; gap: var(--spacing-lg); }
  .logo-container { flex: 0 0 180px; }
  .tab-navigation { flex: 1; flex-direction: row; flex-wrap: wrap; }
  .tab-button { flex: 1; min-width: 120px; justify-content: center; }
  .about-content { min-width: auto; }
  .cannot-do-list li { grid-template-columns: 28px 1fr; grid-template-rows: auto auto; }
  .cannot-do-list .limit-label { grid-column: 2; grid-row: 1; }
  .cannot-do-list .limit-description { grid-column: 2; grid-row: 2; margin-top: var(--spacing-xs); }
}

@media (max-width: 768px) {
  body.login-page-body {
    height: auto;
    overflow: auto;
  }
  .login-split {
    grid-template-columns: 1fr;
    flex: none;
  }
  .login-left {
    border-right: none;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--spacing-xl) var(--spacing-lg);
  }
  .login-right {
    overflow-y: visible;
    padding: var(--spacing-xl) var(--spacing-lg);
  }
  .feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .auth-card { width: 100%; max-width: 100%; }
  .admin-container, .section { padding: var(--spacing-lg); }
  .stats-grid { grid-template-columns: 1fr; }
  table { font-size: var(--font-size-base); }
  thead th, tbody td { padding: var(--spacing-sm); }

  .legal-container { padding: 0 var(--spacing-lg) var(--spacing-2xl); }
  .legal-container h1 { font-size: var(--font-size-2xl); }
  .legal-modal-content { max-height: 90vh; margin: var(--spacing-sm); }
  .legal-modal-header, .legal-modal-body, .legal-modal-footer { padding: var(--spacing-lg); }
  .legal-modal-header h2 { font-size: var(--font-size-2xl); }

  .about-grid { padding: var(--spacing-lg); }
  .about-sidebar, .tab-navigation { flex-direction: column; }
  .logo-container { flex: none; }
  .tab-button { width: 100%; }
  .tab-panel h2 { font-size: var(--font-size-3xl); }
  .capability-list li { font-size: var(--font-size-base); padding: var(--spacing-xs) var(--spacing-sm); }
  .cannot-do-list li { grid-template-columns: 28px 1fr; }
  .highlight-text { padding: var(--spacing-sm); }
  .key-message { font-size: var(--font-size-base); }
}