/**********************************
 * Login / Signup pages. Shared by pages/login.php and pages/signup.php.
 * Tokens copied verbatim from pages/css/custom.css / pages/css/index.css
 * so these pages are a visual match for the homepage and the app itself.
 * Replaces custom2.css + home.css on these two pages -- confirmed nothing
 * else on either page depends on custom2.css beyond the #loader spinner,
 * which is reimplemented below.
 *********************************/
:root{
	--ink:#12203D; --ink-soft:#2A3C63;
	--accent:#FF6B4A; --accent-soft:#FFE4DB;
	--momentum:#2DD4BF; --momentum-soft:#D8F7F1;
	--bg:#F5F6FA; --surface:#FFFFFF; --line:#E7E9F0;
	--text:#1B2436; --muted:#707A94;
	--amber:#F5A524; --amber-soft:#FDF0D8;
	--danger:#E1573C; --danger-soft:#FDE7E2;
	--radius:16px;
}

*{ box-sizing:border-box; }
body{
	margin:0;
	min-height:100vh;
	background:var(--bg);
	color:var(--text);
	font-family:'Inter', sans-serif;
	font-size:1rem;
	line-height:1.55;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1{
	font-family:'Space Grotesk', sans-serif;
	font-weight:700;
	font-size:1.9rem;
	letter-spacing:-0.01em;
	color:var(--ink);
	margin:0 0 6px;
}
p{ margin:0; color:var(--muted); }

/* ---------- page shell ---------- */
.authpage{
	min-height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:32px 20px 40px;
	position:relative;
	overflow:hidden;
}
.blob-field{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:0.3; }

.auth-logo{ position:relative; z-index:1; margin-bottom:28px; }
.auth-logo img{ height:34px; width:auto; }

/* ---------- the split card ---------- */
.auth-card{
	position:relative; z-index:1;
	width:100%; max-width:960px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:24px;
	box-shadow:0 30px 70px -34px rgba(18,32,61,0.45);
	overflow:hidden;
	display:grid;
	grid-template-columns:1fr 1fr;
}

/* form side */
.auth-form-side{
	padding:48px 46px;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.auth-eyebrow{
	display:inline-flex; align-items:center; gap:7px;
	font-size:0.78rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
	color:var(--accent); margin-bottom:10px;
}
.auth-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.auth-subtitle{ margin-bottom:26px; font-size:0.98rem; }

.field-row{ display:flex; gap:14px; margin-bottom:14px; }
.field-row .field{ flex:1; }
.field{ margin-bottom:14px; }
.field label{
	display:block; font-size:0.84rem; font-weight:600; color:var(--ink);
	margin-bottom:6px;
}
.field .form-control{
	width:100%;
	padding:12px 14px;
	border:1.5px solid var(--line);
	border-radius:10px;
	font-family:'Inter', sans-serif;
	font-size:0.98rem;
	color:var(--text);
	background:var(--surface);
	transition:border-color .15s ease, box-shadow .15s ease;
}
.field .form-control:focus{
	outline:none;
	border-color:var(--ink);
	box-shadow:0 0 0 3px rgba(18,32,61,0.1);
}
.field .form-control::placeholder{ color:#A5AEC2; }

.field-meta{ display:flex; justify-content:flex-end; margin:-6px 0 14px; }
.field-meta a{ font-size:0.86rem; color:var(--muted); text-decoration:none; }
.field-meta a:hover{ color:var(--ink); text-decoration:underline; }

.auth-submit{
	width:100%;
	padding:13px 20px;
	border:none; border-radius:11px;
	background:var(--ink); color:#fff;
	font-family:'Space Grotesk', sans-serif;
	font-weight:600; font-size:1rem;
	cursor:pointer;
	box-shadow:0 14px 26px -14px rgba(18,32,61,0.55);
	transition:background .16s ease, transform .16s ease;
	margin-top:6px;
}
.auth-submit:hover{ background:#0C1830; transform:translateY(-1px); }

.auth-switch{
	margin-top:22px;
	text-align:center;
	font-size:0.94rem;
	color:var(--muted);
}
.auth-switch a{ color:var(--ink); font-weight:600; text-decoration:none; }
.auth-switch a:hover{ text-decoration:underline; }

/* alerts -- markup/classes Submit.js depends on (.alertholder target,
   dynamically-injected .alert.alert-warning.alert-dismissible on login;
   static .confirm/.blank/.email toggled via show()/hide() on signup) */
.alertholder .alert,
.field-row + .alert,
.alert{
	position:relative;
	display:flex; align-items:flex-start; gap:10px;
	padding:12px 40px 12px 14px;
	border-radius:10px;
	font-size:0.9rem;
	margin:0 0 14px;
}
.alert-warning, .alert-danger{
	background:var(--danger-soft); color:#8C2E1C;
}
.alert-success{
	background:var(--momentum-soft); color:#0E7C6E;
}
.alert .btn-close{
	position:absolute; top:10px; right:10px;
	width:18px; height:18px;
	border:none; background:transparent;
	opacity:0.55; cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231B2436' d='M4 4l8 8M12 4l-8 8' stroke='%231B2436' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:center; background-size:12px;
}
.alert .btn-close:hover{ opacity:1; }

/* brand side */
.auth-brand-side{
	background:var(--ink);
	color:#fff;
	padding:48px 42px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	position:relative;
	overflow:hidden;
}
.auth-brand-side::before{
	content:"";
	position:absolute; width:280px; height:280px; border-radius:50%;
	background:var(--accent); opacity:0.22; filter:blur(60px);
	top:-100px; right:-80px;
}
.auth-brand-eyebrow{
	position:relative; z-index:1;
	display:inline-flex; align-items:center; gap:7px;
	font-size:0.78rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
	color:var(--momentum); margin-bottom:12px;
}
.auth-brand-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--momentum); }
.auth-brand-side h2{
	position:relative; z-index:1;
	font-family:'Space Grotesk', sans-serif;
	font-weight:700; font-size:1.7rem; line-height:1.25;
	color:#fff; margin:0 0 12px;
}
.auth-brand-side p{
	position:relative; z-index:1;
	color:rgba(255,255,255,0.72); font-size:0.98rem; margin-bottom:28px;
}

/* condensed product-preview mockup, matching the homepage hero */
.mini-mock{
	position:relative; z-index:1;
	background:rgba(255,255,255,0.06);
	border:1px solid rgba(255,255,255,0.12);
	border-radius:16px;
	padding:18px 18px 20px;
}
.mini-mock .row{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:10px 12px; border-radius:9px; background:rgba(255,255,255,0.05);
	margin-bottom:8px;
}
.mini-mock .row:last-child{ margin-bottom:0; }
.mini-mock .who{ display:flex; align-items:center; gap:9px; }
.mini-avatar{ width:26px; height:26px; border-radius:50%; flex:none; }
.mini-mock .name{ font-size:0.86rem; font-weight:600; color:#fff; }
.mini-mock .meta{ font-size:0.74rem; color:rgba(255,255,255,0.55); }
.mini-pill{
	font-size:0.68rem; font-weight:700; padding:3px 9px; border-radius:999px;
}
.mini-pill.momentum{ background:rgba(45,212,191,0.18); color:#7EEFDF; }
.mini-pill.amber{ background:rgba(245,165,36,0.2); color:#FBCE81; }

.auth-cred-row{ position:relative; z-index:1; display:flex; gap:20px; margin-top:26px; flex-wrap:wrap; }
.auth-cred{ display:flex; align-items:center; gap:8px; font-size:0.88rem; color:rgba(255,255,255,0.78); }
.auth-cred svg{ width:16px; height:16px; color:var(--momentum); flex:none; }

/* ---------- loader overlay (signup only, but shared for consistency) ---------- */
#loader_out{
	z-index:9999;
	position:fixed;
	inset:0;
	margin:auto;
	background:rgba(18,32,61,0.55);
	display:none;
}
#loader{
	position:fixed;
	top:0; bottom:0; left:0; right:0; margin:auto;
	width:64px; height:64px;
	border:6px solid rgba(255,255,255,0.25);
	border-top-color:#fff;
	border-radius:50%;
	animation:auth-spin 0.9s linear infinite;
}
@keyframes auth-spin{ 100%{ transform:rotate(360deg); } }

/* ---------- responsive ---------- */
@media (max-width:860px){
	.auth-card{ grid-template-columns:1fr; max-width:460px; }
	.auth-brand-side{ display:none; }
	.auth-form-side{ padding:38px 28px; }
}
@media (max-width:480px){
	.field-row{ flex-direction:column; gap:0; }
}