/* =========================================================
   COMPONENTES — inputs, botões, fields, navbar
   ========================================================= */

/* Fields */
.field{margin-bottom:22px}
.field-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-weight:600;
  margin-bottom:8px;
  color:var(--white);
}
.field-label .req{color:var(--cyan);margin-left:4px}
.field-label .counter{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--muted-2);
  font-weight:400;
}
.field-label .counter.warn{color:var(--warning)}
.field-label .counter.over{color:var(--danger)}
.field-hint{font-size:12px;color:var(--muted-2);margin-top:8px;line-height:1.5}
.field-hint code{
  background:var(--cyan-glow);
  color:var(--cyan);
  padding:2px 6px;
  border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
}

/* Inputs */
.input, .textarea, .select{
  width:100%;
  background:rgba(0,0,0,.25);
  border:1px solid var(--border);
  color:var(--white);
  padding:12px 14px;
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:14px;
  transition:all var(--t-fast);
  outline:none;
}
.textarea{resize:vertical;min-height:90px;line-height:1.65}
.input:hover, .textarea:hover, .select:hover{border-color:var(--border-strong)}
.input:focus, .textarea:focus, .select:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px var(--cyan-glow);
  background:rgba(0,0,0,.4);
}
.input::placeholder, .textarea::placeholder{color:var(--muted-2)}
.input.error, .textarea.error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(255,107,155,.15)}
.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2375EFFF' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
  cursor:pointer;
}

/* Botões */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border:none;
  outline:none;
  transition:all var(--t-fast);
  letter-spacing:.005em;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg, var(--cyan), var(--cyan-dim));
  color:var(--navy-deep);
  box-shadow:0 4px 20px rgba(117,239,255,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(117,239,255,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{
  background:transparent;
  color:var(--white);
  border:1px solid var(--border-strong);
}
.btn-ghost:hover{background:rgba(255,255,255,.05);border-color:var(--cyan)}
.btn-danger{
  background:transparent;
  color:var(--danger);
  border:1px solid rgba(255,107,155,.3);
}
.btn-danger:hover{
  background:rgba(255,107,155,.08);
  border-color:var(--danger);
}
.btn-success{
  background:linear-gradient(180deg, var(--success), #45e095);
  color:var(--navy-deep);
  box-shadow:0 4px 20px rgba(95,255,176,.3);
}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(95,255,176,.5)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important;box-shadow:none}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-block{width:100%}

/* Icon button */
.icon-btn{
  width:34px;height:34px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--muted);
  cursor:pointer;
  display:grid;place-items:center;
  transition:all var(--t-fast);
}
.icon-btn:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);background:var(--cyan-glow)}
.icon-btn:disabled{opacity:.25;cursor:not-allowed}
.icon-btn.danger:hover{border-color:var(--danger);color:var(--danger);background:rgba(255,107,155,.08)}

/* Navbar */
.nav-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid var(--border);
  gap:12px;
  flex-wrap:wrap;
}

/* Cards de seleção (tons, opções) */
.option-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.option-card{
  cursor:pointer;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px;
  transition:all var(--t-fast);
  position:relative;
}
.option-card:hover{background:var(--bg-card-hover);border-color:var(--border-strong);transform:translateY(-1px)}
.option-card.active{
  background:var(--cyan-glow);
  border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan), inset 0 0 24px rgba(117,239,255,.05);
}
.option-card.active::after{
  content:'';
  position:absolute;
  top:12px;right:12px;
  width:18px;height:18px;
  background:var(--cyan);
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23211843' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px;
}
.option-card .oc-title{
  font-weight:600;
  font-size:14px;
  margin-bottom:4px;
  color:var(--white);
}
.option-card.active .oc-title{color:var(--cyan)}
.option-card .oc-desc{font-size:12px;color:var(--muted);line-height:1.5}

/* Aviso/Info boxes */
.alert{
  background:rgba(255,107,155,.05);
  border:1px solid rgba(255,107,155,.2);
  border-radius:var(--radius-md);
  padding:14px 16px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.alert svg{color:var(--danger);flex-shrink:0;margin-top:1px}
.alert-content{font-size:12.5px;color:var(--muted);line-height:1.6}
.alert-content strong{color:var(--danger)}

.alert-info{
  background:rgba(117,239,255,.04);
  border-color:rgba(117,239,255,.2);
}
.alert-info svg{color:var(--cyan)}
.alert-info strong{color:var(--cyan)}

/* Toast */
.toast{
  position:fixed;
  bottom:24px;left:50%;
  transform:translateX(-50%) translateY(120px);
  background:var(--navy-2);
  border:1px solid var(--border-strong);
  color:var(--white);
  padding:14px 22px;
  border-radius:var(--radius-md);
  font-size:13px;
  font-weight:500;
  box-shadow:var(--shadow-lg);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:9999;
  display:flex;align-items:center;gap:10px;
  max-width:90vw;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast svg{width:18px;height:18px;color:var(--success);flex-shrink:0}
.toast.error{border-color:rgba(255,107,155,.5)}
.toast.error svg{color:var(--danger)}
.toast .toast-action{
  background:transparent;
  border:1px solid var(--border-strong);
  color:var(--cyan);
  padding:4px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  margin-left:6px;
  text-transform:uppercase;
  letter-spacing:.05em;
  transition:all var(--t-fast);
}
.toast .toast-action:hover{background:var(--cyan-glow);border-color:var(--cyan)}