/* ==========================================================================
   Components: nav, buttons, cards, forms
   ========================================================================== */

/* ---------------- Navigation ---------------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:22px 0;
  transition:padding var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  border-bottom:1px solid transparent;
}
.site-header.is-compact{
  padding:14px 0;
  background:rgba(10,13,18,0.78);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--surface-line);
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:36px;height:36px;border-radius:8px;}
.brand-word{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink-0);letter-spacing:-0.01em;}
.brand-word span{color:var(--signal-0);}
.brand-sub{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--ink-3);margin-top:1px;}

.primary-nav{display:flex;align-items:center;gap:6px;}
.primary-nav a{
  position:relative;
  color:var(--ink-2);
  font-size:.9rem;
  font-weight:500;
  padding:9px 16px;
  border-radius:999px;
  transition:color var(--dur-fast) var(--ease-out);
}
.primary-nav a:hover{color:var(--ink-0);}
.primary-nav a::after{
  content:"";
  position:absolute;left:16px;right:16px;bottom:6px;height:1px;
  background:var(--signal-0);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-out);
}
.primary-nav a:hover::after{transform:scaleX(1);}
.primary-nav a[aria-current="page"]{color:var(--ink-0);}

.nav-actions{display:flex;align-items:center;gap:12px;}

.menu-toggle{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--surface-line);
  border-radius:10px;
  align-items:center;justify-content:center;
  color:var(--ink-0);
  position:relative;
  z-index:110;
}
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-burger{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
  border:1px solid transparent;
  white-space:nowrap;
  position:relative;
  isolation:isolate;
}
.btn .btn-arrow{transition:transform var(--dur-fast) var(--ease-out);}
.btn:hover .btn-arrow{transform:translateX(3px);}

.btn.primary{
  background:var(--signal-1);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,0.12) inset, 0 12px 30px -8px var(--signal-glow);
  transition:box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn.primary:hover{background:var(--signal-0);box-shadow:0 1px 0 rgba(255,255,255,0.16) inset, 0 16px 38px -6px var(--signal-glow);}

.btn.ghost{
  border-color:var(--surface-line-strong);
  color:var(--ink-0);
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn.ghost:hover{border-color:var(--signal-0);background:var(--signal-dim);}

.btn.text{
  padding:8px 0;
  color:var(--signal-0);
  gap:8px;
}

/* ---------------- Cards / surfaces ---------------- */
.panel{
  background:linear-gradient(175deg, var(--surface-2), var(--surface-1));
  border:1px solid var(--surface-line);
  border-radius:var(--radius-lg);
}

.badge{
  display:inline-flex;align-items:center;
  padding:5px 11px;
  border-radius:999px;
  background:var(--signal-dim);
  color:var(--signal-0);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  border:1px solid rgba(79,141,255,0.22);
}

/* ---------------- Forms ---------------- */
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1 / -1;}
.field label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.field input,.field select,.field textarea{
  border:1px solid var(--surface-line);
  background:var(--surface-1);
  border-radius:10px;
  padding:13px 15px;
  color:var(--ink-0);
  font-size:.95rem;
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--surface-line-strong);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--signal-0);
  background:var(--surface-2);
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238695ab' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;}

.field-error{
  font-size:.78rem; color:var(--danger); min-height:1em;
  display:block;
}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--danger);
}
.field.has-error input:focus,.field.has-error select:focus,.field.has-error textarea:focus{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(240,112,138,0.15);
}

.form-status{font-size:.85rem;color:var(--ink-2);min-height:1.2em;}
.form-status.is-success{color:var(--success);}
.form-status.is-error{color:var(--danger);}

.btn.is-loading{ pointer-events:none; opacity:0.85; }
.btn .btn-spinner{
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#fff;
  display:none;
  animation:btnSpin .7s linear infinite;
}
.btn.is-loading .btn-spinner{ display:inline-block; }
.btn.is-loading .btn-arrow{ display:none; }
@keyframes btnSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn .btn-spinner{ animation-duration:1.4s; }
}