@import url('https://cdn.jsdelivr.net/npm/vazir-font@29.0.2/dist/font-face.css');

:root{
  --bg:#0a0f1c;
  --panel:rgba(13,18,34,.65);
  --text:#e7ecf4;
  --muted:#9aa7bd;
  --primary1:#22d3ee; 
  --primary2:#8b5cf6;
  --danger:#ef4444;
  --success:#22c55e;
  --ring: rgba(34,211,238,.28);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.page{
  direction: rtl;
  font-family: Vazir, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  margin:0; min-height:100vh; display:flex; justify-content:center; align-items:flex-start;
  overflow-x:hidden; position:relative;
}

body.page::before{
  content:"";
  position:fixed; inset:-20% -20% -10% -20%;
  background:
    radial-gradient(60% 40% at 75% 10%, rgba(34,211,238,.22) 0%, transparent 60%),
    radial-gradient(50% 35% at 20% 90%, rgba(139,92,246,.22) 0%, transparent 65%);
  filter: blur(40px) saturate(120%);
  animation: drift 14s ease-in-out infinite alternate;
  pointer-events:none; z-index:0;
}
body.page::after{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 40 40'%3E%3Cpath d='M0 39.5H40 M39.5 0V40' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.8; mix-blend-mode:overlay; pointer-events:none; z-index:0;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,2%,0) scale(1.05)}
}

.container{
  width:100%; max-width:640px;
  padding:16px; margin:48px 14px;
  position:relative; z-index:1;
}

.header{ text-align:center; margin-bottom:14px; }
.title{
  margin:0 0 8px; font-size:26px; line-height:1.2;
  background:linear-gradient(90deg,var(--primary1),var(--primary2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.2px;
}
.title::after{
  content:""; display:block; height:2px; width:120px; margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--primary1),var(--primary2),transparent);
  filter:drop-shadow(0 0 8px rgba(139,92,246,.4));
}
.subtitle{ margin:0; font-size:13px; color:var(--muted) }

.form,.alert{
  position:relative; background:var(--panel); backdrop-filter: blur(16px);
  border-radius:16px; padding:16px; margin-top:14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  overflow:hidden; animation: cardIn .5s ease both;
}
.form::before,.alert::before{
  content:""; position:absolute; inset:0; border-radius:16px; padding:1px;
  background:linear-gradient(120deg, rgba(34,211,238,.5), rgba(139,92,246,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite: exclude; pointer-events:none;
}

/* پیام‌ها */
.alert-success{ border-inline-start:4px solid var(--success); color:#bbf7d0 }
.alert-error{ border-inline-start:4px solid var(--danger); color:#fecaca }
.errors{ margin:0; padding-inline-start:18px }

.form{
  display:grid; grid-template-columns:1fr; gap:12px;
}
@media (min-width: 640px){
  .form{ grid-template-columns: 1fr 180px; align-items:end; }
  .form .form-row:nth-of-type(2){ grid-column:1 / 2 } /* IP */
  .form .form-row:nth-of-type(3){ grid-column:2 / 3 } /* Port */
}
.form input[type="hidden"]{ display:none }

.form-row{ position:relative; display:block; margin:0 }
.label{
  position:absolute; inset-inline-start:12px; top:10px;
  color:#b5c3da; font-size:12px; padding:0 6px;
  background:transparent; transition: all .18s ease;
  pointer-events:none; z-index:1;
}
.input{
  width:100%; max-width:100%;
  padding:22px 40px 10px 12px;
  border-radius:12px; border:1px solid #243046;
  background:#0e1424; color:var(--text); font-size:14px;
  outline:none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.input::placeholder{ color:transparent }
.input:focus{
  border-color: #3aa6ff;
  box-shadow: 0 0 0 3px var(--ring);
  background:#0b1222;
}

.form-row:focus-within .label,
.input:not(:placeholder-shown) + .label{
  transform: translateY(-12px) scale(.92);
  background: linear-gradient(90deg, rgba(15,18,34,0.9), rgba(15,18,34,0.8));
  padding:0 6px; border-radius:6px; color:#7dd3fc;
}

.input#ip{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238aa0c5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/ %3E%3Cpath d='M7 8h.01M11 8h.01M15 8h2M7 12h10M7 16h6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: calc(100% - 12px) 12px; background-size:18px;
}
.input#port{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238aa0c5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 9h10M7 15h5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: calc(100% - 12px) 12px; background-size:18px;
}

.form-actions{
  grid-column:1 / -1; display:flex; gap:10px; justify-content:center; margin-top:6px;
}
.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none;
  padding:12px 18px; border-radius:12px; font-weight:800; font-size:14px;
  transition: transform .08s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:active{ transform: translateY(1px) }

.btn-primary{
  background: linear-gradient(100deg, var(--primary1), var(--primary2));
  color:#0b0f19;
  box-shadow: 0 10px 24px rgba(139,92,246,.25), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.btn-primary:hover{
  box-shadow: 0 14px 32px rgba(139,92,246,.35), 0 0 0 1px rgba(255,255,255,.05) inset;
}

.btn-secondary{
  background: transparent; color:#a7b4cc; border:1px solid #2a3550;
}
.btn-secondary:hover{ color: var(--primary1); border-color: var(--primary1) }

.alert[role="status"], .alert[role="alert"]{ line-height:1.6; font-size:14px }

@keyframes cardIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

/* ----------------------*/

.captcha-compact {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    background: rgba(20, 26, 43, 0.65);
    border: 1px solid #2a3550;
    border-radius: 10px;
    padding: 6px 10px;
    max-width: 280px; 
    margin-top: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

.captcha-img {
    height: 32px;
    border-radius: 6px;
    border: 1px solid #2a3550;
}

.captcha-input-compact {
    width: 100px; 
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #243046;
    background: #0e1424;
    color: var(--text);
    outline: none;
    text-align: center;
}
.captcha-input-compact:focus {
    border-color: #3aa6ff;
    box-shadow: 0 0 0 2px var(--ring);
    background: #0b1222;
}

.captcha-refresh {
    font-size: 13px;
    color: var(--muted);
    border: 1px solid #2a3550;
    border-radius: 50%;
    padding: 2px 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.captcha-refresh:hover {
    border-color: var(--primary1);
    color: var(--primary1);
    background: rgba(34,211,238,.08);
}