:root{
  --primary:#F37021;
  --primary-dark:#C75212;
  --bg-dark:#0F172A;
  --bg-light:#F8FAFC;
  --text:#1E293B;
  --border:#E2E8F0;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:'Kanit',sans-serif;

  background:
  radial-gradient(circle at 10% 20%, rgba(243,112,33,0.15), transparent 30%),
  radial-gradient(circle at 90% 80%, rgba(59,130,246,0.15), transparent 35%),
  linear-gradient(135deg,#f1f5f9,#ffffff);

  color:var(--text);
}

/* Center Page */

.page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

/* Main Card */

.card{
  width:min(1150px,100%);
  border-radius:20px;
  overflow:hidden;
  display:grid;
  grid-template-columns:420px 1fr;
  background:white;
  box-shadow:
  0 30px 60px rgba(0,0,0,0.4);
}

/* Panels */

.panel{
  padding:40px;
}

.left{
  background:white;
}

.right{
  background:
  radial-gradient(circle at top left, rgba(243,112,33,0.8), transparent 40%),
  radial-gradient(circle at bottom right, rgba(255,255,255,0.2), transparent 50%),
  linear-gradient(135deg,#0f172a,#1e293b);

  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
}

/* Logo */

.brand{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:25px;
}

.logo{
  width:60px;
  height:60px;
  background:white;
  padding:8px;
  border-radius:14px;
  object-fit:contain;
}

.brand-title{
  font-size:20px;
  font-weight:700;
}

.brand-sub{
  font-size:12px;
  color:#64748B;
}

/* Title */

.h1{
  font-size:36px;
  font-weight:700;
  margin-bottom:10px;
}

.muted{
  color:#64748B;
  margin-bottom:25px;
}

/* Buttons */

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:50px;
  border-radius:14px;
  font-weight:600;
  text-decoration:none;
  margin-top:10px;
  width:100%;
  transition:all .2s;
}

.primary{
  background:var(--primary);
  color:white;
}

.primary:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
}

.ghost{
  border:1px solid var(--border);
  color:#1e293b;
}

.ghost:hover{
  background:#f1f5f9;
}

/* Hero */

.hero{
  max-width:420px;
}

.hero-title{
  font-size:46px;
  font-weight:800;
}

.hero-sub{
  margin-top:12px;
  line-height:1.6;
  opacity:.9;
}

/* Profile Image */

.profile-photo{
  width:140px;
  height:140px;
  border-radius:18px;
  object-fit:cover;
  border:4px solid #f1f5f9;
  margin-bottom:20px;
}

/* Card sections */

.info-box{
  background:#f8fafc;
  border-radius:12px;
  padding:15px;
  margin-bottom:15px;
  border:1px solid #e2e8f0;
}

/* Success icon */

.success-icon{
  font-size:70px;
  color:#16a34a;
  margin-bottom:20px;
}

/* Responsive */

@media (max-width:900px){

  .card{
    grid-template-columns:1fr;
  }

  .right{
    min-height:220px;
    order:-1;
  }

}
.link{
  color:#334155;
  text-decoration:none;
  font-weight:600;
  font-size:13px;
}
.link:hover{
  text-decoration:underline;
}