/* assets/css/style.css */
/* Dominant pink theme, responsive for laptop & tablet */




:root{
  --pink-50: #ffeef6;
  --pink-100: #ffd6ea;
  --pink-200: #ffb3d6;
  --pink-300: #ff8fc0;
  --pink-400: #ff66aa;
  --pink-500: #ff3d94; /* primary */
  --pink-600: #e63682;
  --accent: #ffffff;
  --muted: #6b6b6b;
  --shadow: 0 8px 24px rgba(255,61,148,0.14);
  --radius: 12px;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  background: linear-gradient(180deg, var(--pink-50) 0%, #fff 100%);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

/* Card */
.login-card{
  width:100%;
  max-width:920px; /* good for laptop */
  display:flex;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:linear-gradient(135deg, var(--accent) 0%, #fff 100%);
}

/* left: branding */
.brand {
  flex: 1;
  padding: 36px;
  background: linear-gradient(180deg, var(--pink-200), var(--pink-50));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  min-width:320px;
}
.brand img {
  width:120px; height:120px; object-fit:contain; border-radius:16px; background:rgba(255,255,255,0.6); padding:8px;
}
.brand h1{
  margin:0; font-size:28px; color:var(--pink-600);
}
.brand p{ margin:0; color:var(--muted); font-size:14px; max-width:220px; }

/* right: form */
.form-wrap{
  flex:1;
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  background: linear-gradient(180deg, #fff, #fff);
}
.form-wrap h2{ margin:0; color:var(--pink-500); font-size:22px; }
.form {
  display:flex; flex-direction:column; gap:14px;
}
.input {
  display:flex; flex-direction:column;
}
.input label{ font-size:13px; color:var(--muted); margin-bottom:6px; }
.input input {
  padding:12px 14px; border-radius:10px; border:1px solid #f0cfe0; outline:none;
  font-size:15px;
  background:#fff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
}
.input input:focus{ border-color:var(--pink-500); box-shadow:0 4px 18px rgba(255,61,148,0.08); }

.btn {
  background: linear-gradient(90deg, var(--pink-500), var(--pink-400));
  color:var(--accent);
  padding:12px 16px;
  border-radius:12px;
  border: none;
  font-weight:600;
  cursor:pointer;
  font-size:16px;
  box-shadow: 0 8px 20px rgba(255,61,148,0.15);
}
.btn:active{ transform:translateY(1px); }

/* small helper */
.helper { font-size:13px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.helper a{ color:var(--pink-500); text-decoration:none; font-weight:600; }

/* Responsive tweaks for tablet */
@media (max-width: 900px){
  .login-card{ flex-direction:column; max-width:720px; }
  .brand{ padding:28px; min-height:140px; }
  .form-wrap{ padding:28px; }
  .brand img{ width:96px; height:96px; }
}

/* Larger touch targets for touchscreen/tablet kiosk mode */
@media (max-width: 768px) {
  .btn{ padding:16px; font-size:18px; border-radius:14px; }
  .input input{ padding:16px; font-size:16px; border-radius:12px; }
}