:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --color-bg: #f7f6f2; --color-surface: #f9f8f5; --color-surface-2: #fbfbf9; --color-surface-offset: #f3f0ec; --color-border: #d4d1ca;
  --color-text: #28251d; --color-text-muted: #6f6d68; --color-text-inverse: #f9f8f4; --color-primary: #01696f; --color-primary-hover: #0c4e54; --color-primary-highlight: #d6e7e4;
  --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-xl: 1.125rem; --shadow-sm: 0 1px 2px rgba(34,31,24,.06), 0 8px 24px rgba(34,31,24,.04); --shadow-md: 0 10px 30px rgba(34,31,24,.08);
  --font-body: 'Satoshi', 'Inter', sans-serif;
  --focus-ring: rgba(1,105,111,.16);
}
[data-theme="dark"] {
  --color-bg: #171614; --color-surface: #1c1b19; --color-surface-2: #201f1d; --color-surface-offset: #23211f; --color-border: #3b3935;
  --color-text: #ede9e1; --color-text-muted: #b7b3aa; --color-text-inverse: #161513; --color-primary: #5ea7af; --color-primary-hover: #81bac0; --color-primary-highlight: #263638;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.24), 0 8px 24px rgba(0,0,0,.2); --shadow-md: 0 10px 30px rgba(0,0,0,.32);
  --focus-ring: rgba(94,167,175,.2);
}
*,*::before,*::after{box-sizing:border-box} html,body{height:100%;margin:0}
body{font-family:var(--font-body);font-size:var(--text-base);background:var(--color-bg);color:var(--color-text)}
button,input{font:inherit}
.login-screen{display:grid;grid-template-columns:1.15fr .85fr;min-height:100vh;min-height:100dvh}
.login-panel{padding:clamp(2rem,4vw,4rem);display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2))}
.top-tools{display:flex;justify-content:flex-end}
.theme-toggle{width:44px;height:44px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);display:grid;place-items:center;cursor:pointer}
.brand{display:flex;align-items:center;gap:var(--space-3);font-weight:700}
.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--color-primary);display:grid;place-items:center;color:var(--color-text-inverse);box-shadow:var(--shadow-sm)}
.eyebrow{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-4)}
.login-copy h1{font-size:var(--text-xl);line-height:1.05;max-width:12ch;margin:0 0 var(--space-4)}
.login-copy p{color:var(--color-text-muted);max-width:52ch;margin:0}
.hero-points{display:grid;gap:var(--space-4);margin-top:var(--space-8)}
.hero-point{padding:var(--space-4);border:1px solid rgba(40,37,29,.1);border-radius:var(--radius-lg);background:rgba(255,255,255,.35)}
[data-theme="dark"] .hero-point{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.hero-point strong{display:block;margin-bottom:4px;font-size:var(--text-sm)}
.login-card-wrap{display:grid;place-items:center;padding:clamp(1.5rem,3vw,3rem);background:var(--color-surface-offset)}
.login-card{width:min(460px,100%);background:var(--color-surface);border:1px solid rgba(40,37,29,.09);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:var(--space-8)}
[data-theme="dark"] .login-card{border-color:rgba(255,255,255,.07)}
.card-title{margin:0 0 var(--space-2);font-size:var(--text-lg)}
.card-subtitle{margin:0 0 var(--space-6);color:var(--color-text-muted);font-size:var(--text-sm)}
.field{display:grid;gap:8px;margin-bottom:var(--space-4)}
.field label{font-size:var(--text-sm);font-weight:700}
.input{width:100%;border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);padding:14px;border-radius:var(--radius-md);outline:none}
.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--focus-ring)}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:var(--space-4) 0 var(--space-6)}
.role-btn{border:1px solid var(--color-border);background:var(--color-surface-2);padding:var(--space-4);border-radius:var(--radius-lg);text-align:left;cursor:pointer}
.role-btn.active{border-color:var(--color-primary);background:var(--color-primary-highlight)}
.role-btn span{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:4px}
.btn{border:none;border-radius:var(--radius-md);padding:14px 16px;font-weight:700;cursor:pointer;min-height:48px;width:100%}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}
.btn-primary:hover{background:var(--color-primary-hover)}
.helper{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-3)}
@media (max-width:980px){.login-screen{grid-template-columns:1fr}.login-card-wrap{order:-1}}
@media (max-width:720px){body{font-size:16px}.login-panel,.login-card{padding:var(--space-6)}.role-grid{grid-template-columns:1fr}}