/* Sub2API / Scolv API Console — lightweight clean skin
   Intent: calm API product, not pixel/cyber UI. Keep the app structure intact. */

:root {
  --api-bg: #f7f8f5;
  --api-bg-soft: #eef2e9;
  --api-surface: rgba(255, 255, 252, .92);
  --api-surface-solid: #fffffc;
  --api-surface-muted: #f3f5ef;
  --api-text: #182018;
  --api-muted: #687265;
  --api-faint: #8b9487;
  --api-line: rgba(33, 47, 34, .10);
  --api-line-strong: rgba(33, 47, 34, .16);
  --api-accent: #36563a;
  --api-accent-2: #6f8a4e;
  --api-success: #2f7d4c;
  --api-warning: #b7791f;
  --api-danger: #b45353;
  --api-blue: #416072;
  --api-radius: 14px;
  --api-radius-sm: 10px;
  --api-shadow: 0 1px 2px rgba(20, 27, 20, .05), 0 16px 40px rgba(20, 27, 20, .07);
  --api-shadow-soft: 0 8px 24px rgba(20, 27, 20, .06);
}

html,
body,
#app {
  min-height: 100%;
  width: 100%;
  background: var(--api-bg) !important;
  color: var(--api-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  background-color: var(--api-bg) !important;
  background-image:
    radial-gradient(circle at 14% -14%, rgba(111, 138, 78, .12), transparent 30rem),
    radial-gradient(circle at 88% 0%, rgba(54, 86, 58, .07), transparent 26rem),
    linear-gradient(180deg, #fbfcf8 0%, #f4f6f0 46%, #eef2e9 100%) !important;
  background-attachment: fixed;
}

code,
pre,
kbd,
samp,
.font-mono,
input[type='text'],
input[type='password'],
input[type='email'],
textarea {
  font-family: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace !important;
}

* {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}

svg { filter: none !important; }

a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }

/* Remove the old cyber glow/grid overlays on the public home page. */
.pointer-events-none.absolute.inset-0.overflow-hidden,
.absolute.-right-40.-top-40,
.absolute.-bottom-40.-left-40,
.bg-\[linear-gradient\(rgba\(20\2c 184\2c 166\2c 0\.03\)_1px\2c transparent_1px\)\2c linear-gradient\(90deg\2c rgba\(20\2c 184\2c 166\2c 0\.03\)_1px\2c transparent_1px\)\] {
  display: none !important;
}

/* Layout backgrounds */
.bg-gray-50,
.bg-gray-100,
.dark\:bg-dark-900:is(.dark *),
.dark\:bg-dark-950:is(.dark *),
.dark\:bg-dark-800:is(.dark *) {
  background-color: transparent !important;
}

.bg-white,
.card,
.dark\:bg-dark-800:is(.dark *),
.dark\:bg-dark-700:is(.dark *),
.dark\:bg-gray-800:is(.dark *) {
  background: var(--api-surface) !important;
  border-color: var(--api-line) !important;
  box-shadow: var(--api-shadow-soft) !important;
}

.card,
.rounded-xl,
.rounded-2xl,
.rounded-lg {
  border-radius: var(--api-radius) !important;
}

.rounded-md,
.rounded {
  border-radius: var(--api-radius-sm) !important;
}

.rounded-full { border-radius: 999px !important; }

.border,
.border-t,
.border-b,
.border-l,
.border-r,
aside,
header,
nav,
.fixed,
.sticky {
  border-color: var(--api-line) !important;
}

/* Header / sidebar */
header,
.sticky,
.fixed.top-0 {
  background: rgba(251, 252, 248, .88) !important;
  box-shadow: 0 1px 0 var(--api-line) !important;
}

header.relative.z-20 {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

aside,
.dark\:bg-dark-950:is(.dark *) {
  background: rgba(255, 255, 252, .86) !important;
  box-shadow: inset -1px 0 0 var(--api-line) !important;
}

/* Typography */
.text-gray-950,
.text-gray-900,
.text-gray-800,
.dark\:text-white:is(.dark *),
.dark\:text-gray-100:is(.dark *),
.dark\:text-gray-200:is(.dark *) {
  color: var(--api-text) !important;
}

.text-gray-700,
.text-gray-600,
.text-gray-500,
.dark\:text-gray-300:is(.dark *),
.dark\:text-gray-400:is(.dark *),
.dark\:text-dark-400:is(.dark *),
.dark\:text-slate-400:is(.dark *) {
  color: var(--api-muted) !important;
}

.text-gray-400,
.text-gray-300 {
  color: var(--api-faint) !important;
}

.text-primary-700,
.text-primary-600,
.text-primary-500,
.dark\:text-primary-400:is(.dark *),
.dark\:text-primary-300:is(.dark *) {
  color: var(--api-accent) !important;
}

h1, h2, h3, .font-bold, .font-semibold {
  letter-spacing: -.025em;
}

.input-label,
label,
.text-xs.font-medium {
  letter-spacing: .01em;
  color: var(--api-muted) !important;
}

/* Forms */
.input,
input,
textarea,
select {
  border-radius: 12px !important;
  background: rgba(255, 255, 252, .94) !important;
  border: 1px solid var(--api-line-strong) !important;
  color: var(--api-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
  outline: none !important;
}

.input:hover,
input:hover,
textarea:hover,
select:hover {
  border-color: rgba(54, 86, 58, .24) !important;
}

.input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(54, 86, 58, .44) !important;
  box-shadow: 0 0 0 4px rgba(54, 86, 58, .08), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

::placeholder { color: rgba(104, 114, 101, .58) !important; }

/* Buttons */
.btn,
button,
a[role='button'] {
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

.btn:hover,
button:hover,
a[role='button']:hover {
  transform: translateY(-1px) !important;
}

.btn:active,
button:active,
a[role='button']:active {
  transform: translateY(0) !important;
}

.btn-primary,
.bg-primary-600,
.hover\:bg-primary-700:hover,
.dark\:bg-primary-600:is(.dark *) {
  background: var(--api-accent) !important;
  color: #fffffc !important;
  border-color: var(--api-accent) !important;
  box-shadow: 0 10px 24px rgba(54, 86, 58, .14) !important;
}

.btn-primary:hover,
.bg-primary-600:hover {
  background: #2f4b33 !important;
  box-shadow: 0 12px 28px rgba(54, 86, 58, .18) !important;
}

.btn-secondary,
.btn-ghost,
.bg-gray-100,
.hover\:bg-gray-200:hover {
  background: rgba(255,255,252,.76) !important;
  color: var(--api-text) !important;
  border: 1px solid var(--api-line-strong) !important;
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: #fffffc !important;
  border-color: rgba(54, 86, 58, .24) !important;
}

.btn-danger { background: var(--api-danger) !important; color: #fff !important; }
.btn-success { background: var(--api-success) !important; color: #fff !important; }
.btn-warning { background: var(--api-warning) !important; color: #fff !important; }

/* Public home page refinement */
.relative.flex.min-h-screen.flex-col.overflow-hidden {
  background-image: none !important;
  background-color: transparent !important;
}

main.relative.z-10.flex-1.px-6.py-16 {
  padding-top: 52px !important;
  padding-bottom: 42px !important;
}

main .mx-auto.max-w-6xl {
  max-width: 1120px !important;
}

main .mb-12.flex.flex-col.items-center.justify-between.gap-12 {
  align-items: center !important;
  gap: 56px !important;
  margin-bottom: 40px !important;
}

main h1.text-4xl,
main h1.md\:text-5xl,
main h1.lg\:text-6xl {
  font-size: clamp(48px, 5.6vw, 74px) !important;
  line-height: .95 !important;
  letter-spacing: -.06em !important;
  margin-bottom: 18px !important;
}

main h1 + p,
main .mb-8.text-lg {
  color: rgba(24, 32, 24, .62) !important;
  font-size: clamp(16px, 1.6vw, 19px) !important;
  line-height: 1.65 !important;
  max-width: 36rem !important;
}

main a.inline-flex,
header a.inline-flex,
header button {
  border-radius: 999px !important;
}

main a.inline-flex.items-center.justify-center {
  min-height: 48px !important;
  padding: 0 22px !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

header a.bg-dark-900,
header a.dark\:bg-white,
header a[class*='bg-dark'] {
  background: #213225 !important;
  color: #fffffc !important;
  box-shadow: none !important;
}

/* Home terminal: lower visual weight and make it read like a clean API card. */
.terminal-container[data-v-e82cde1f],
.terminal-window[data-v-e82cde1f] {
  width: min(430px, 100%) !important;
  background: #1b241c !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 34px rgba(24, 32, 24, .14) !important;
  transform: none !important;
}

.terminal-window[data-v-e82cde1f]:hover {
  transform: translateY(-2px) !important;
}

.terminal-header[data-v-e82cde1f] {
  background: #202a21 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding: 10px 14px !important;
}

.terminal-buttons[data-v-e82cde1f] { gap: 6px !important; }
.terminal-buttons span[data-v-e82cde1f] { width: 8px !important; height: 8px !important; opacity: .72 !important; }
.terminal-title[data-v-e82cde1f] { color: rgba(245,246,239,.58) !important; letter-spacing: .03em !important; }
.terminal-body[data-v-e82cde1f] { padding: 18px 22px !important; line-height: 1.85 !important; font-size: 13px !important; }
.code-line[data-v-e82cde1f] { gap: 7px !important; animation-duration: .24s !important; }
.code-prompt[data-v-e82cde1f], .cursor[data-v-e82cde1f] { color: #98b574 !important; background-color: #98b574 !important; }
.code-cmd[data-v-e82cde1f], .code-url[data-v-e82cde1f] { color: #dfe7d6 !important; }
.code-flag[data-v-e82cde1f] { color: #b7c2ad !important; }
.code-comment[data-v-e82cde1f] { color: rgba(245,246,239,.46) !important; font-style: normal !important; }
.code-success[data-v-e82cde1f] { color: #dbf0ce !important; background: rgba(152,181,116,.15) !important; border-radius: 999px !important; padding: 2px 9px !important; }
.code-response[data-v-e82cde1f] { color: #f2f0d8 !important; }

/* Tags/cards on home page */
main .mb-12.flex.flex-wrap.items-center.justify-center.gap-4 {
  gap: 10px !important;
  margin-bottom: 44px !important;
}

main .inline-flex.items-center.gap-2\.5.rounded-full.border {
  background: rgba(255,255,252,.72) !important;
  border-color: var(--api-line) !important;
  box-shadow: none !important;
  padding: 9px 14px !important;
}

main .mb-12.grid.gap-6.md\:grid-cols-3 {
  gap: 16px !important;
  margin-bottom: 54px !important;
}

main .group.rounded-2xl.border.border-gray-200\/50.bg-white\/60.p-6 {
  background: rgba(255,255,252,.78) !important;
  border-color: rgba(33,47,34,.09) !important;
  box-shadow: 0 8px 22px rgba(24,32,24,.045) !important;
  padding: 22px !important;
  min-height: 0 !important;
}

main .group.rounded-2xl.border.border-gray-200\/50.bg-white\/60.p-6:hover {
  border-color: rgba(54,86,58,.18) !important;
  box-shadow: 0 12px 28px rgba(24,32,24,.065) !important;
}

main .mb-8.text-center { margin-bottom: 22px !important; }
/* feature icon blocks: readable but quiet */
main .mb-4.flex.h-12.w-12.items-center.justify-center.rounded-xl {
  background: #eef3e7 !important;
  color: var(--api-accent) !important;
  border: 1px solid rgba(54,86,58,.10) !important;
  box-shadow: none !important;
}

main .mb-4.flex.h-12.w-12.items-center.justify-center.rounded-xl svg {
  color: var(--api-accent) !important;
}

main footer,
footer {
  padding-top: 18px !important;
  padding-bottom: 26px !important;
}

main .mb-16.flex.flex-wrap.items-center.justify-center.gap-4 { margin-bottom: 30px !important; gap: 12px !important; }

/* Tables */
table,
thead,
tbody,
tr,
td,
th {
  border-color: var(--api-line) !important;
}

thead,
.bg-gray-50 {
  background: rgba(243, 245, 239, .86) !important;
}

th {
  color: var(--api-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .025em;
}

tr:hover,
tbody tr:hover {
  background: rgba(111, 138, 78, .055) !important;
}

/* Status / badges */
.bg-green-50,
.dark\:bg-green-900\/20:is(.dark *) { background: rgba(47, 125, 76, .10) !important; }
.text-green-700,
.text-green-600,
.dark\:text-green-400:is(.dark *) { color: var(--api-success) !important; }
.bg-yellow-50,
.dark\:bg-yellow-900\/20:is(.dark *) { background: rgba(183, 121, 31, .10) !important; }
.text-yellow-700,
.text-yellow-600,
.dark\:text-yellow-400:is(.dark *) { color: var(--api-warning) !important; }
.bg-red-50,
.dark\:bg-red-900\/20:is(.dark *) { background: rgba(180, 83, 83, .10) !important; }
.text-red-700,
.text-red-600,
.dark\:text-red-400:is(.dark *) { color: var(--api-danger) !important; }
.bg-blue-50,
.dark\:bg-blue-900\/20:is(.dark *) { background: rgba(65, 96, 114, .10) !important; }
.text-blue-700,
.text-blue-600,
.dark\:text-blue-400:is(.dark *) { color: var(--api-blue) !important; }

.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-b {
  background-image: none !important;
}

[class*='from-primary'],
[class*='to-primary'],
[class*='via-primary'] {
  background-image: none !important;
}

.navigation-progress-bar {
  background: linear-gradient(90deg, transparent, var(--api-accent), var(--api-accent-2), transparent) !important;
}

.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: var(--api-shadow) !important;
}

[role='dialog'],
.fixed.inset-0 .bg-white,
.fixed.inset-0 .dark\:bg-dark-800:is(.dark *) {
  background: var(--api-surface-solid) !important;
  border: 1px solid var(--api-line-strong) !important;
  box-shadow: var(--api-shadow) !important;
}

@media (max-width: 1023px) {
  main .mb-12.flex.flex-col.items-center.justify-between.gap-12 {
    gap: 34px !important;
  }
  .terminal-container[data-v-e82cde1f],
  .terminal-window[data-v-e82cde1f] {
    width: min(420px, calc(100vw - 48px)) !important;
  }
}

@media (max-width: 768px) {
  body {
    background-image: linear-gradient(180deg, #fbfcf8 0%, #eef2e9 100%) !important;
  }
  main.relative.z-10.flex-1.px-6.py-16 { padding-top: 36px !important; }
  main h1.text-4xl { font-size: 44px !important; }
  .btn:hover,
  button:hover,
  a[role='button']:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}