:root{
/* Light mode palette */
--bg: #eaf2fb;
--panel: #ffffff;
--muted: #5b6b85;
--text: #0f1724;
--accent: #1e6fff;
--accent-2: #3aa0ff;
--border: #d6e6fb;
--shadow: 0 6px 20px rgba(28,57,102,0.08);
--glass: rgba(255,255,255,0.6);
--radius: 12px;
--radius-sm: 8px;
--focus: 0 0 0 4px rgba(30,111,255,0.12);
--trans: 180ms cubic-bezier(.2,.9,.2,1);
--font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark){
:root{
--bg: #071026;
--panel: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
--muted: #9fbefc;
--text: #e6f0ff;
--accent: #4ea3ff;
--accent-2: #2ba0ff;
--border: rgba(255,255,255,0.06);
--shadow: 0 10px 30px rgba(2,8,23,0.65);
--glass: rgba(255,255,255,0.03);
--focus: 0 0 0 6px rgba(78,163,255,0.12);
}
}

/* Global body to avoid white gaps */
html,body{
height: 100%;
margin: 0;
background: var(--bg);
font-family: var(--font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--text);
}

/* Main container: stack title, subtext, card; center on page */
.page-content.container{
min-height: 100vh;
box-sizing: border-box;
padding: 48px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background:
radial-gradient(1200px 600px at 10% 10%, rgba(30,111,255,0.06), transparent 8%),
radial-gradient(800px 400px at 90% 90%, rgba(58,160,255,0.04), transparent 6%),
var(--bg);
}

/* Heading: above card, centered */
.page-content h1{
font-size: 1.9rem;
margin: 0;
letter-spacing: -0.01em;
color: var(--text);
font-weight: 700;
text-align: center;
}

/* Subtext directly under heading */
.page-content sub{
display: block;
text-align: center;
margin-top: 6px;
font-size: 0.95rem;
color: var(--muted);
}

/* Card */
.card{
width: 100%;
max-width: 540px;
border-radius: var(--radius);
background: var(--panel);
border: 1px solid var(--border);
box-shadow: var(--shadow);
overflow: visible;
transition: box-shadow var(--trans), transform var(--trans);
position: relative;
}

/* Decorative top accent bar on card */
.card::after{
content: "";
display: block;
height: 6px;
width: 100%;
border-top-left-radius: calc(var(--radius) - 2px);
border-top-right-radius: calc(var(--radius) - 2px);
background: linear-gradient(90deg, rgba(30,111,255,0.95), rgba(58,160,255,0.9));
}

/* Card body */
.card-body{
padding: 28px;
}

/* Form rows: labels above inputs by default on narrow; compact two-column on wide */
.card-body form .row{
display: flex;
gap: 12px;
align-items: center;
margin-top: 14px;
width: 100%;
flex-wrap: wrap;
}

/* Label styling */
.card-body label{
display: block;
font-weight: 600;
font-size: 0.95rem;
color: var(--muted);
width: 100%;
margin-bottom: 6px;
}

/* Inputs full width */
.card-body input[type="text"],
.card-body input[type="password"]{
width: 100%;
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: linear-gradient(180deg, rgba(255,255,255,0.6), var(--glass));
color: var(--text);
outline: none;
box-shadow: none;
transition: box-shadow var(--trans), border-color var(--trans), transform var(--trans);
font-size: 0.95rem;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}

/* Dark mode input background tweak */
@media (prefers-color-scheme: dark){
.card-body input[type="text"],
.card-body input[type="password"]{
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
}

/* Input focus */
.card-body input:focus{
border-color: var(--accent);
box-shadow: var(--focus);
transform: translateY(-1px);
}

/* Button */
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 16px;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
border: none;
color: white;
background: linear-gradient(180deg, var(--accent), var(--accent-2));
box-shadow: 0 6px 18px rgba(30,111,255,0.18);
transition: transform var(--trans), box-shadow var(--trans), filter var(--trans);
}

/* Button hover/active */
.btn:hover{
transform: translateY(-3px);
filter: brightness(1.03);
}
.btn:active{ transform: translateY(-1px); }

/* Layout for label+input pairs side-by-side on wide screens */
@media (min-width: 640px){
.card-body form .row{
flex-wrap: nowrap;
align-items: center;
}
.card-body label{
width: 140px;
margin-bottom: 0;
text-align: left;
}
.card-body input{ width: calc(100% - 140px - 12px); }
}

/* Responsive: on small screens stack */
@media (max-width: 540px){
.card-body form .row{ flex-direction: column; align-items: stretch; }
.btn{ width: 100%; }
}

/* Ensure login button spacing */
.card-body form .row:last-of-type{ margin-top: 20px; justify-content: flex-end; }

/* Center the button container on small screens */
@media (max-width: 540px){
.card-body form .row:last-of-type{ justify-content: stretch; }
}

/* Focus states */
.btn:focus,
.card-body input:focus{ outline: none; }

/* Error helper (example) */
.input-error{
border-color: #ff6b6b !important;
box-shadow: 0 0 0 4px rgba(255,107,107,0.08);
}

/* Small muted helper text */
.small-muted{
font-size: 0.85rem;
color: var(--muted);
}

/* Fine-tuning for dark mode text colors */
@media (prefers-color-scheme: dark){
.page-content sub{ color: var(--muted); opacity: 0.95; }
.card{ border-color: var(--border); }
.card::after{ opacity: 0.95; }
}

/* Accessibility: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
:root{ --trans: 1ms; }
.btn, .card, .card-body input{ transition: none !important; }
}