*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--brand:       #e57817;
	--brand-dark:  #c4610c;
	--brand-light: #fde8d0;
	--bg:          #ffffff;
	--text:        #1a1208;
	--muted:       #8a7a6a;
	--border:      #ede5da;
	--shadow:      0 8px 32px rgba(229,120,23,.18);
}

html, body { height:100%; width:100%; font-family:'Poppins',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }

.app-screen { width:100%; min-height:100dvh; display:flex; flex-direction:column; }

/* ── Hero ── */
.hero {
	background: linear-gradient(145deg, var(--brand) 0%, #f59012 55%, #fdb347 100%);
	padding: 52px 28px 72px;
	position: relative; overflow: hidden; flex-shrink: 0;
}
.hero::before { content:''; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.09); top:-80px; right:-70px; }
.hero::after  { content:''; position:absolute; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.06); bottom:0; left:-40px; }

.dot-grid { position:absolute; top:20px; right:24px; display:grid; grid-template-columns:repeat(4,6px); gap:6px; opacity:.22; z-index:1; }
.dot-grid span { width:5px; height:5px; background:#fff; border-radius:50%; display:block; }

.hero-logo { display:flex; flex-direction:column; gap:6px; margin-bottom:28px; position:relative; z-index:2; }
/* 1722×396 → ratio 4.35:1 · height:38px → ~165px wide */
.hero-logo-img { height:38px; width:auto; max-width:200px; object-fit:contain; display:block; filter:drop-shadow(0 1px 6px rgba(0,0,0,.18)); }
.logo-fullname { font-size:.62rem; font-weight:400; color:rgba(255,255,255,.80); letter-spacing:.2px; line-height:1.3; padding-left:2px; margin-left: 15px;}

.hero-title { font-size:2rem; font-weight:700; color:#fff; line-height:1.2; position:relative; z-index:2; }
.hero-sub   { font-size:.88rem; color:rgba(255,255,255,.85); margin-top:8px; font-weight:400; position:relative; z-index:2; }

.wave { position:absolute; bottom:-1px; left:0; width:100%; z-index:3; }

/* ── Form ── */
.form-area { flex:1; padding:32px 24px 40px; display:flex; flex-direction:column; background:#fff; }
.field-group { display:flex; flex-direction:column; gap:20px; }

.field-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:8px; }

.input-wrap { position:relative; }
.input-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:1.1rem; color:var(--muted); pointer-events:none; transition:color .25s; z-index:1; }
.input-wrap:focus-within .input-icon { color:var(--brand); }

.input-wrap input {
	width:100%; padding:16px 16px 16px 46px;
	background:#faf7f4; border:1.5px solid var(--border);
	border-radius:14px; font-family:'Poppins',sans-serif;
	font-size:.95rem; font-weight:500; color:var(--text);
	outline:none; transition:border-color .25s, box-shadow .25s, background .25s;
	-webkit-appearance:none;
}
.input-wrap input::placeholder { color:#c4b8aa; font-weight:400; }
.input-wrap input:focus { border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(229,120,23,.1); }
.input-wrap input.is-error { border-color:#ff4d4f; box-shadow:0 0 0 3px rgba(255,77,79,.12); }

.phone-prefix { position:absolute; left:46px; top:50%; transform:translateY(-50%); font-size:.95rem; font-weight:600; color:var(--text); pointer-events:none; z-index:1; }
.prefix-sep   { position:absolute; left:40px; top:22%; height:56%; width:1.5px; background:var(--border); pointer-events:none; z-index:1; }
.input-phone  { padding-left:82px !important; }

.eye-toggle { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--muted); font-size:1.1rem; padding:6px; transition:color .2s; z-index:1; }
.eye-toggle:hover { color:var(--brand); }

.forgot-row  { display:flex; justify-content:flex-end; margin-top:10px; }
.forgot-link { font-size:.8rem; font-weight:600; color:var(--brand); text-decoration:none; }

/* ── Alert box ── */
.alert-box {
	border-radius:12px; padding:13px 16px;
	font-size:.83rem; font-weight:500;
	display:none; align-items:center; gap:9px;
	margin-top:22px; line-height:1.4;
}
.alert-box.show { display:flex; }
.alert-box.error   { background:#fff2f0; border:1.5px solid #ffccc7; color:#cf1322; }
.alert-box.success { background:#f6ffed; border:1.5px solid #b7eb8f; color:#237804; }

/* ── CTA Button ── */
.btn-login {
	width:100%; padding:17px;
	background:linear-gradient(135deg, var(--brand) 0%, #f5950a 100%);
	border:none; border-radius:16px;
	font-family:'Poppins',sans-serif; font-size:1.05rem; font-weight:700; color:#fff;
	cursor:pointer; margin-top:28px; box-shadow:var(--shadow);
	transition:transform .18s, box-shadow .18s, opacity .2s;
	display:flex; align-items:center; justify-content:center; gap:12px;
	position:relative; overflow:hidden; -webkit-appearance:none;
}
.btn-login:active  { transform:scale(.97); box-shadow:0 4px 12px rgba(229,120,23,.25); }
.btn-login:disabled { opacity:.65; cursor:not-allowed; }
.btn-login .arrow  { width:30px; height:30px; background:rgba(255,255,255,.22); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; }

.btn-spinner { display:none; width:20px; height:20px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .65s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

@keyframes ripple { to { transform:scale(5); opacity:0; } }
.ripple-effect { position:absolute; border-radius:50%; width:20px; height:20px; background:rgba(255,255,255,.35); transform:scale(0); animation:ripple .55s linear; pointer-events:none; }