/* assets/style.css */
/* =============== */
/* Pro Login UI — clean, modern, accessible */

:root{
  --bg1:#0b1220;
  --bg2:#0f1c35;

  --card:#0f172a;
  --card2:#111c33;

  --text:#e5e7eb;
  --muted:#9ca3af;

  --border:rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.45);

  --primary:#4f46e5;      /* indigo */
  --primary2:#22c55e;     /* green accent (subtle) */
  --danger:#ef4444;

  --radius:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(79,70,229,.35), transparent 55%),
    radial-gradient(900px 500px at 85% 30%, rgba(34,197,94,.20), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* Layout */
.container-form{
  width:100%;
  max-width:900px;
}

/* Card */
.card-form{
  padding:26px 24px;
  position:relative;
  overflow:hidden;
}
.container{
  width:100%;
  max-width:420px;
}

/* Card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:26px 24px;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(500px 200px at 20% 0%, rgba(79,70,229,.25), transparent 60%),
    radial-gradient(500px 200px at 80% 0%, rgba(34,197,94,.16), transparent 60%);
  pointer-events:none;
  filter: blur(10px);
  opacity:.9;
}

.card > *{ position:relative; }

h1{
  margin:0 0 16px 0;
  font-size: 1.45rem;
  letter-spacing:-.02em;
}

form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Labels / Inputs */
label{
  font-size:.9rem;
  color: var(--muted);
  margin-top:6px;
}

input[type="email"],
input[type="password"],
input[type="tel"],
input[type="text"]{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.65);
  color: var(--text);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

input::placeholder{ color: rgba(156,163,175,.75); }

input:focus{
  border-color: rgba(79,70,229,.8);
  box-shadow: 0 0 0 4px rgba(79,70,229,.18);
}

input:active{
  transform: translateY(0.5px);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(79,70,229,.55);
  background: linear-gradient(180deg, rgba(79,70,229,1), rgba(67,56,202,1));
  color:white;
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 18px rgba(79,70,229,.20);
  user-select:none;
}

.btn:hover{
  filter: brightness(1.06);
  box-shadow: 0 12px 22px rgba(79,70,229,.28);
}

.btn:active{
  transform: translateY(1px);
}

.btn.secondary{
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  box-shadow:none;
}

.btn.secondary:hover{
  background: rgba(255,255,255,.09);
  filter:none;
  box-shadow:none;
}

/* Error message (you currently inline-style it; this supports a class if you want) */
.error{
  margin-top:10px;
  color: var(--danger);
  background: rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.22);
  padding:10px 12px;
  border-radius:12px;
  font-size:.95rem;
}
textarea{
  width:100%;
  min-height:120px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.65);
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  line-height:1.5;
  resize: vertical;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea::placeholder{
  color: rgba(156,163,175,.75);
}

textarea:focus{
  border-color: rgba(79,70,229,.8);
  box-shadow: 0 0 0 4px rgba(79,70,229,.18);
}

/* Disabled / readonly */
textarea:disabled,
textarea[readonly]{
  opacity:.6;
  cursor:not-allowed;
}

/* Optional: error state */
textarea.error{
  border-color: rgba(239,68,68,.8);
  box-shadow: 0 0 0 4px rgba(239,68,68,.18);
}

/* Nice spacing on that inline flex row you used */
form > div[style*="display:flex"]{
  margin-top:14px !important;
  gap:10px !important;
}

/* Responsive */
@media (max-width: 420px){
  .card{ padding:22px 18px; }
  h1{ font-size:1.3rem; }
}

/* Optional: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}