/* LingMaoAPI · application and authentication surfaces.
 * Kept outside the upstream bundle so image upgrades retain the brand layer.
 * The route adapter sets html[data-lm-page="app"|"auth"|"home"].
 * Home styling intentionally belongs to a separate stylesheet.
 */

html:is([data-lm-page="app"], [data-lm-page="auth"]) {
  --lm-canvas: #f5f8f6;
  --lm-surface: #ffffff;
  --lm-surface-soft: #f0f5f2;
  --lm-ink: #122b2a;
  --lm-muted: #5e746c;
  --lm-border: #dce7e1;
  --lm-border-strong: #bdcec5;
  --lm-primary: #0f766e;
  --lm-primary-hover: #115e59;
  --lm-primary-pressed: #134e4a;
  --lm-primary-soft: #e4f2ec;
  --lm-link: #0f766e;
  --lm-focus: #0f766e;
  --lm-focus-soft: rgb(15 118 110 / 13%);
  --lm-shadow: 0 2px 8px rgb(18 43 42 / 3%), 0 12px 32px rgb(18 43 42 / 3%);
  --lm-radius: 12px;
  --lm-radius-lg: 16px;
  --lm-duration: 180ms;
}

html.dark:is([data-lm-page="app"], [data-lm-page="auth"]) {
  --lm-canvas: #101d1b;
  --lm-surface: #162522;
  --lm-surface-soft: #1d302b;
  --lm-ink: #edf6f1;
  --lm-muted: #a3b9af;
  --lm-border: #30453d;
  --lm-border-strong: #526b60;
  --lm-primary: #0f766e;
  --lm-primary-hover: #0e8277;
  --lm-primary-pressed: #0d6b62;
  --lm-primary-soft: #1d3931;
  --lm-link: #83dfc5;
  --lm-focus: #83dfc5;
  --lm-focus-soft: rgb(131 223 197 / 15%);
  --lm-shadow: 0 2px 8px rgb(0 0 0 / 8%), 0 12px 32px rgb(0 0 0 / 8%);
}

/* Shared primitives, without changing the layout or semantic status colors. */
html:is([data-lm-page="app"], [data-lm-page="auth"]) body {
  background: var(--lm-canvas);
  color: var(--lm-ink);
  font-family: "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) ::selection {
  background: #c6e8db;
  color: #122b2a;
}

html.dark:is([data-lm-page="app"], [data-lm-page="auth"]) ::selection {
  background: #326456;
  color: #f3fbf7;
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--lm-focus) !important;
  outline-offset: 3px;
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) :is(input, select, textarea) {
  accent-color: var(--lm-primary);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .btn {
  border-radius: var(--lm-radius);
  font-weight: 600;
  transition-duration: var(--lm-duration);
  transition-property: background-color, border-color, color, box-shadow, opacity;
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .btn-primary {
  background: var(--lm-primary);
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0 2px 4px rgb(15 118 110 / 9%);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .btn-primary:hover:not(:disabled) {
  background: var(--lm-primary-hover);
  box-shadow: 0 3px 8px rgb(15 118 110 / 15%);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .btn-primary:active:not(:disabled) {
  background: var(--lm-primary-pressed);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 9%);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .btn-primary:disabled {
  box-shadow: none;
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .btn-secondary {
  background: var(--lm-surface);
  border-color: var(--lm-border-strong);
  color: var(--lm-ink);
  box-shadow: 0 1px 2px rgb(18 43 42 / 3%);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .btn-secondary:hover:not(:disabled) {
  background: var(--lm-surface-soft);
  border-color: var(--lm-border-strong);
  box-shadow: none;
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .btn-ghost {
  color: var(--lm-muted);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .btn-ghost:hover:not(:disabled) {
  background: var(--lm-surface-soft);
  color: var(--lm-ink);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .input {
  border-radius: var(--lm-radius);
  background: var(--lm-surface);
  border-color: var(--lm-border-strong);
  color: var(--lm-ink);
  transition: border-color var(--lm-duration), box-shadow var(--lm-duration), background-color var(--lm-duration);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .input::placeholder {
  color: var(--lm-muted);
  opacity: 0.85;
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .input:not(.input-error):focus {
  border-color: var(--lm-focus);
  --tw-ring-color: var(--lm-focus-soft);
  box-shadow: 0 0 0 3px var(--lm-focus-soft);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .input:disabled {
  background: var(--lm-surface-soft);
  color: var(--lm-muted);
}

/* Keep upstream error borders distinct from normal brand focus and hover. */
html:is([data-lm-page="app"], [data-lm-page="auth"]) .input.input-error {
  border-color: #dc2626;
}

html.dark:is([data-lm-page="app"], [data-lm-page="auth"]) .input.input-error {
  border-color: #f87171;
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .input-label {
  color: var(--lm-ink);
  font-weight: 600;
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) :is(.input-hint, .page-description, .stat-label, .empty-state-description) {
  color: var(--lm-muted);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) :is(.card, .card-glass, .stat-card) {
  background: var(--lm-surface);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-lg);
  box-shadow: var(--lm-shadow);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) :is(.card-header, .card-footer) {
  border-color: var(--lm-border);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .card-hover:hover {
  border-color: var(--lm-border-strong);
  box-shadow: 0 8px 24px rgb(18 43 42 / 7%);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .stat-icon-primary {
  background: var(--lm-primary-soft);
  color: var(--lm-link);
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .stat-value {
  color: var(--lm-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

html:is([data-lm-page="app"], [data-lm-page="auth"]) .text-gradient {
  background-image: linear-gradient(115deg, var(--lm-ink), var(--lm-link));
}

/* Application chrome; navigation widths and business content remain upstream. */
html[data-lm-page="app"] #app > div.min-h-screen {
  background: var(--lm-canvas);
}

html[data-lm-page="app"] .bg-mesh-gradient {
  background-image: radial-gradient(ellipse at 95% 0%, rgb(15 118 110 / 3.5%), transparent 45%);
}

html[data-lm-page="app"] .sidebar {
  background: var(--lm-surface);
  border-color: var(--lm-border);
  box-shadow: 1px 0 0 rgb(18 43 42 / 1%);
}

html[data-lm-page="app"] .sidebar-header {
  border-color: var(--lm-border);
}

html[data-lm-page="app"] .sidebar-logo {
  border-radius: var(--lm-radius);
  box-shadow: none;
  background: #ffffff;
  border: 1px solid var(--lm-border);
  padding: 2px;
}

html[data-lm-page="app"] .sidebar-brand-title {
  color: var(--lm-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

html[data-lm-page="app"] .sidebar-brand-title:hover {
  color: var(--lm-link);
}

html[data-lm-page="app"] .sidebar-link {
  border-radius: var(--lm-radius);
  color: var(--lm-muted);
}

html[data-lm-page="app"] .sidebar-link:hover {
  background: var(--lm-surface-soft);
  color: var(--lm-ink);
}

html[data-lm-page="app"] .sidebar-link-active,
html[data-lm-page="app"] .sidebar-link-active:hover {
  background: var(--lm-primary-soft);
  color: var(--lm-link);
  box-shadow: inset 3px 0 0 var(--lm-link);
  font-weight: 600;
}

html[data-lm-page="app"] .sidebar-section-title {
  color: var(--lm-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
}

html[data-lm-page="app"] header.glass {
  background: rgb(255 255 255 / 94%);
  border-color: var(--lm-border);
  box-shadow: 0 1px 0 rgb(18 43 42 / 2%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.dark[data-lm-page="app"] header.glass {
  background: rgb(22 37 34 / 94%);
}

html[data-lm-page="app"] .page-title {
  color: var(--lm-ink);
  letter-spacing: -0.035em;
  font-weight: 650;
}

html[data-lm-page="app"] .tabs {
  background: var(--lm-surface-soft);
  border: 1px solid var(--lm-border);
}

html[data-lm-page="app"] .tab {
  color: var(--lm-muted);
}

html[data-lm-page="app"] .tab-active {
  background: var(--lm-surface);
  color: var(--lm-link);
  box-shadow: 0 1px 3px rgb(18 43 42 / 8%);
}

html[data-lm-page="app"] .code {
  background: var(--lm-surface-soft);
  color: var(--lm-link);
}

/* AuthLayout.vue: one brand block and one form card inside max-w-md. */
html[data-lm-page="auth"] #app > div.relative.flex.min-h-screen {
  min-height: 100svh;
  padding: 40px 24px;
}

html[data-lm-page="auth"] #app > div.relative.flex.min-h-screen > .absolute.inset-0:first-child {
  background: radial-gradient(ellipse at 10% 5%, #e5f1e9 0%, transparent 48%),
    radial-gradient(ellipse at 100% 100%, #e9f0e8 0%, transparent 40%),
    #f6f9f6;
}

html.dark[data-lm-page="auth"] #app > div.relative.flex.min-h-screen > .absolute.inset-0:first-child {
  background: radial-gradient(ellipse at 10% 5%, #19342b 0%, transparent 48%),
    radial-gradient(ellipse at 100% 100%, #1a2b26 0%, transparent 40%),
    #101d1b;
}

html[data-lm-page="auth"] #app > div.relative.flex.min-h-screen > .pointer-events-none {
  opacity: 0.22;
}

html[data-lm-page="auth"] #app > div.relative.flex.min-h-screen > .relative.z-10 {
  max-width: 440px;
}

html[data-lm-page="auth"] .relative.z-10 > .mb-8.text-center {
  margin-bottom: 28px;
}

html[data-lm-page="auth"] .mb-8.text-center > .inline-flex {
  border-radius: var(--lm-radius-lg);
  box-shadow: 0 4px 16px rgb(15 118 110 / 9%);
  background: #ffffff;
  border: 1px solid var(--lm-border);
  padding: 5px;
}

html[data-lm-page="auth"] .mb-8.text-center h1 {
  margin-bottom: 9px;
  font-size: clamp(28px, 5vw, 32px);
  letter-spacing: -0.045em;
  font-weight: 700;
  line-height: 1.2;
}

html[data-lm-page="auth"] .mb-8.text-center > p {
  color: var(--lm-muted);
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.65;
}

html[data-lm-page="auth"] .card-glass {
  padding: 32px;
  background: var(--lm-surface);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-lg);
  box-shadow: 0 3px 10px rgb(18 43 42 / 3%), 0 20px 60px rgb(18 43 42 / 5%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.dark[data-lm-page="auth"] .card-glass {
  box-shadow: 0 12px 48px rgb(0 0 0 / 15%);
}

html[data-lm-page="auth"] .card-glass h2 {
  color: var(--lm-ink);
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.025em;
  font-weight: 650;
}

html[data-lm-page="auth"] .card-glass h2 + p {
  color: var(--lm-muted);
  line-height: 1.65;
}

html[data-lm-page="auth"] .input {
  min-height: 46px;
  font-size: 15px;
}

html[data-lm-page="auth"] .btn {
  min-height: 46px;
}

html[data-lm-page="auth"] a[href] {
  color: var(--lm-link);
  text-underline-offset: 3px;
}

html[data-lm-page="auth"] a[href]:hover {
  text-decoration: underline;
}

html[data-lm-page="auth"] .relative.z-10 > .mt-8.text-center {
  color: var(--lm-muted);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 640px) {
  html[data-lm-page="auth"] #app > div.relative.flex.min-h-screen {
    padding: 28px 20px;
  }

  html[data-lm-page="auth"] .card-glass {
    padding: 26px 22px;
  }

  html[data-lm-page="auth"] .input {
    font-size: 16px;
  }

  html[data-lm-page="auth"] .relative.z-10 > .mb-8.text-center {
    margin-bottom: 24px;
  }

  html[data-lm-page="app"] header.glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:is([data-lm-page="app"], [data-lm-page="auth"]) {
    scroll-behavior: auto;
  }

  html:is([data-lm-page="app"], [data-lm-page="auth"]) *,
  html:is([data-lm-page="app"], [data-lm-page="auth"]) *::before,
  html:is([data-lm-page="app"], [data-lm-page="auth"]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html:is([data-lm-page="app"], [data-lm-page="auth"]) :is(.card-hover:hover, .btn:active) {
    transform: none;
  }
}