/* ========== Global dark scheme (fix для нативных контролов) ========== */
:root {
    color-scheme: dark;
}
html, body {
    color-scheme: dark;
}

/* ========== Grid background ========== */
.grid-bg {
    background-image:
        linear-gradient(rgba(0, 217, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 217, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* ========== Nav links ========== */
.nav-link {
    @apply px-3 py-1.5 rounded text-slate-400 hover:text-neon-cyan hover:bg-neon-cyan/5 transition;
}

/* ========== Terminal ========== */
.terminal-window {
    @apply rounded-lg border border-ink-700 bg-ink-950/90 shadow-2xl overflow-hidden font-mono text-sm;
    box-shadow:
        0 0 0 1px rgba(0, 217, 255, 0.05),
        0 20px 60px -20px rgba(0, 217, 255, 0.15);
}
.terminal-header {
    @apply flex items-center gap-2 px-4 py-2.5 bg-ink-800 border-b border-ink-700;
}
.dot { @apply w-3 h-3 rounded-full; }
.dot-red    { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green  { background: #27c93f; }
.terminal-title { @apply ml-2 text-xs text-slate-500; }
.terminal-body  { @apply p-5 leading-relaxed; }
.term-line { @apply mb-1; }
.term-out  { @apply mb-1 text-xs; }
.prompt    { @apply text-neon-cyan font-bold mr-2; }
.cmd       { @apply text-slate-200; }

/* ========== Feature cards ========== */
.feature-card {
    @apply relative p-6 rounded-lg border border-ink-700 bg-ink-900/40 hover:border-neon-cyan/40 hover:bg-ink-800/50 transition-all duration-300;
}
.feature-card::before {
    content: "";
    @apply absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300 pointer-events-none;
    background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 217, 255, 0.08), transparent 40%);
}
.feature-card:hover::before { @apply opacity-100; }
.feature-icon {
    @apply w-10 h-10 rounded-md mb-4 flex items-center justify-center;
    @apply bg-neon-cyan/10 border border-neon-cyan/20 text-neon-cyan;
}

/* ========== Stat cards ========== */
.stat-card {
    @apply p-6 rounded-lg border border-ink-700 bg-ink-900/60 hover:border-ink-600 transition;
}
.stat-label { @apply font-mono text-xs uppercase tracking-widest text-slate-500 mb-2; }
.stat-value { @apply font-mono text-4xl font-bold tabular-nums; }
.stat-sub   { @apply text-xs text-slate-500 mt-1 font-mono; }

/* ==================================================================
   ФОРМЫ — переписано с нуля.
   Фиксим белые фоны от browser autofill + color-scheme.
   ================================================================== */
.syn-input {
    display: block;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 0.375rem;
    border: 1px solid #1a2236;          /* ink-700 */
    background-color: #05070d !important; /* ink-950 — !important для autofill */
    color: #e2e8f0;                     /* slate-200 */
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.875rem;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.syn-input::placeholder {
    color: #475569;  /* slate-600 */
    opacity: 1;
}
.syn-input:focus {
    outline: none;
    border-color: rgba(0, 217, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.12);
}
.syn-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Custom select arrow */
select.syn-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300d9ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 14px;
    padding-right: 2.5rem;
}

/* Custom textarea resize */
textarea.syn-input {
    resize: vertical;
    min-height: 80px;
}

/* ====== Autofill fix — самое важное ====== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #e2e8f0 !important;
    -webkit-box-shadow: 0 0 0 1000px #05070d inset !important;
    box-shadow: 0 0 0 1000px #05070d inset !important;
    caret-color: #00d9ff;
    transition: background-color 9999s ease-in-out 0s;
}

/* ========== Reveal on scroll ========== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========== Selection ========== */
::selection {
    background: rgba(0, 217, 255, 0.3);
    color: #fff;
}

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0e1a; }
::-webkit-scrollbar-thumb { background: #243049; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #00d9ff; }


/* ========== Legal docs styles ========== */
.legal-nav-card {
  @apply block p-5 rounded-lg border border-ink-700 bg-ink-900/50 
         hover:border-neon-cyan/40 hover:bg-ink-800/50 transition-all duration-300;
}

.legal-section {
  @apply relative;
}

.legal-badge {
  @apply absolute -top-4 -left-4 w-12 h-12 rounded-full 
         bg-neon-cyan/10 border border-neon-cyan/30 
         flex items-center justify-center 
         font-mono font-bold text-neon-cyan text-sm;
}

.legal-block {
  @apply mb-8 pl-4 border-l-2 border-ink-700;
}

.legal-block:hover {
  @apply border-neon-cyan/30;
}

.legal-h3 {
  @apply font-mono font-bold text-lg mb-3 text-slate-200;
}

.legal-block p {
  @apply text-sm text-slate-400 leading-relaxed mb-3;
}

.legal-list {
  @apply space-y-2 text-sm text-slate-400 ml-4;
}

.legal-list li {
  @apply leading-relaxed;
}

.legal-highlight {
  @apply rounded-lg border border-neon-cyan/30 bg-neon-cyan/5 p-5 my-4;
}