:root {
}
/* index.css now uses tokens from styles/tokens.css */

* {
box-sizing: border-box;
}

body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
font-family: Arial, Helvetica, sans-serif;
background:
    radial-gradient(circle at top left, rgba(29, 197, 249, 0.3), transparent 30%),
    radial-gradient(circle at bottom right, rgba(126, 231, 215, 0.2), transparent 25%),
    var(--bg-dark);
color: var(--ink);
transition: background 0.25s ease, color 0.25s ease;
}

.page-shell {
width: min(1120px, 92vw);
min-height: 720px;
display: grid;
place-items: center;
}

.login-panel {
width: 100%;
min-height: 640px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(18px);
}

.brand-side {
position: relative;
padding: 52px 52px 42px;
background: linear-gradient(135deg, #f3fbff 0%, #dfeefb 45%, #cff1ef 100%);
border-right: 1px solid var(--line);
}


.brand-side::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent, rgba(29, 197, 249, 0.08));
}

.brand-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}

.brand-logo {
width: 215px;
height: auto;
margin-bottom: 18px;
filter: drop-shadow(0 12px 22px rgba(27, 196, 255, 0.15));
}

.tagline {
margin: 0 0 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #0d8fe0;
font-size: 12px;
font-weight: 700;
}


h1 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--primary);
}

.subtitle {
max-width: 480px;
margin-top: 18px;
color: #2d4d63;
font-size: 1.06rem;
line-height: 1.7;
}


.feature-pills {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}

.feature-pills span {
padding: 10px 16px;
border-radius: 999px;
background: rgba(13, 33, 50, 0.04);
border: 1px solid rgba(13, 33, 50, 0.08);
color: #12324c;
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}

/* Removed light-theme overrides to enforce medium-dark theme */

.form-side {
display: flex;
align-items: center;
justify-content: center;
padding: 42px 46px;
}

.form-card {
width: min(430px, 100%);
}

.top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}

.theme-toggle {
width: 42px;
height: 42px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--toggle-bg);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.1rem;
box-shadow: 0 8px 18px var(--shadow);
}

.form-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}

.mini-logo {
width: 42px;
height: 42px;
border-radius: 12px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.16);
}

.portal-label {
color: var(--muted);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.16em;
}

h2 {
margin: 10px 0 8px;
font-size: clamp(1.4rem, 1.6vw, 1.8rem);
}

.intro {
margin: 0 0 26px;
color: var(--muted);
line-height: 1.6;
}

form {
display: flex;
flex-direction: column;
gap: 18px;
}

label {
font-size: 0.8rem;
color: var(--muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}

input {
width: 100%;
margin-top: 8px;
border: 1px solid var(--line);
background: var(--input);
color: var(--ink);
padding: 14px 16px;
border-radius: 12px;
font-size: 1rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus {
border-color: rgba(29, 197, 249, 0.7);
box-shadow: 0 0 0 4px rgba(29, 197, 249, 0.12);
}

.password-wrap {
position: relative;
}

.password-wrap input {
padding-right: 48px;
}

.toggle-password {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 1rem;
padding: 4px 6px;
}

.helper-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: var(--muted);
font-size: 0.88rem;
}

.remember {
display: inline-flex;
align-items: center;
gap: 8px;
text-transform: none;
letter-spacing: normal;
}

.remember input {
width: auto;
margin-top: 0;
}

a {
color: var(--primary);
text-decoration: none;
}

button {
border: 0;
border-radius: 12px;
padding: 16px 18px;
font-size: 1rem;
font-weight: 700;
color: #04151d;
background: var(--button);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 18px 28px rgba(29, 197, 249, 0.25);
}

button:hover {
transform: translateY(-1px);
}

.footer-note {
margin-top: 22px;
text-align: center;
color: var(--muted);
font-size: 0.88rem;
}

@media (max-width: 860px) {
.login-panel {
    grid-template-columns: 1fr;
}

.brand-side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
}

.brand-side,
.form-side {
    padding: 30px 24px;
}
}