/* Login Page — tiffin web app */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Inter',sans-serif}
:root{--primary:#4A1594;--primary-dark:#380f73;--red:#ef4444;--green:#16a34a;--border:#e5e7eb;--bg:#f8fafc;--text:#0f172a;--muted:#64748b}
body{background:var(--bg);display:flex;flex-direction:column;height:100%}
#app{display:flex;flex-direction:column;flex:1;max-width:480px;margin:0 auto;width:100%;height:100%}

/* ── Hero ─────────────────────────────────────────── */
.hero{height:38vh;min-height:220px;background:linear-gradient(145deg,var(--primary-dark) 0%,var(--primary) 60%,#7c3aed 100%);position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:0 24px 32px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.back-btn{position:absolute;top:20px;left:16px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.25);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hero-emoji{font-size:56px;margin-bottom:10px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.hero-title{font-size:26px;font-weight:800;color:#fff;line-height:1.1}
.hero-sub{font-size:13px;color:rgba(255,255,255,.75);margin-top:5px}

/* ── Card ─────────────────────────────────────────── */
.card{background:#fff;border-radius:28px 28px 0 0;margin-top:-24px;flex:1;padding:30px 24px 48px;overflow-y:auto}
.card-title{font-size:24px;font-weight:700;color:var(--text)}
.card-sub{font-size:14px;color:var(--muted);margin-top:6px;margin-bottom:26px}

/* ── Fields ───────────────────────────────────────── */
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;font-weight:700;color:#334155;margin-bottom:6px;letter-spacing:.3px}
.field input{width:100%;height:50px;background:#f1f5f9;border-radius:14px;border:1.5px solid transparent;padding:0 16px;font-size:14px;color:var(--text);font-family:inherit;outline:none;transition:border-color .15s}
.field input:focus{border-color:var(--primary);background:#fff}
.field input.err{border-color:var(--red);background:#fff}
.field-err{font-size:12px;color:var(--red);margin-top:4px;margin-left:2px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:48px}
.pw-eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#94a3b8;display:flex;padding:4px}
.pw-eye:hover{color:#475569}

/* ── Forgot ───────────────────────────────────────── */
.forgot-row{text-align:right;margin:-6px 0 22px}
.forgot-row a{font-size:12px;font-weight:600;color:var(--primary);text-decoration:none}

/* ── Button ───────────────────────────────────────── */
.submit-btn{width:100%;height:50px;background:var(--primary);color:#fff;border:none;border-radius:20px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}
.submit-btn:hover{background:var(--primary-dark)}
.submit-btn:disabled{background:#9ca3af;cursor:not-allowed}
.spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Alert ────────────────────────────────────────── */
.alert{border-radius:12px;padding:12px 16px;font-size:13px;font-weight:500;margin-bottom:18px;display:none}
.alert.err{background:#fef2f2;color:var(--red);border:1px solid #fecaca}
.alert.ok{background:#f0fdf4;color:var(--green);border:1px solid #bbf7d0}

/* ── Footer ───────────────────────────────────────── */
.footer-row{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:26px;font-size:14px;color:var(--muted)}
.footer-row a{color:var(--primary);font-weight:700;text-decoration:none}