:root {
  --login-primary:#7c3aed;
  --login-primary-dark:#6d28d9;
  --login-primary-deep:#5b21b6;
  --login-primary-light:#ede9fe;
  --login-primary-soft:#f5f3ff;
  --login-info:#2563eb;
  --login-info-light:#dbeafe;
  --login-bg:#f4f7fc;
  --login-surface:#fff;
  --login-surface-soft:#f8fafc;
  --login-text:#0f172a;
  --login-muted:#64748b;
  --login-border:#dce5f0;
  --annahl-green:#00a651;
  --annahl-green-soft:rgba(0,166,81,.1);
  --annahl-orange:#f58220;
  --annahl-orange-soft:rgba(245,130,32,.12);
}

body.login-page {
  min-height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  overflow-x:hidden;
  padding:24px;
  color:var(--login-text);
  font-family:"Trebuchet MS","Aptos",sans-serif;
  background:
    radial-gradient(circle at 15% 20%,rgba(124,58,237,.12),transparent 34%),
    radial-gradient(circle at 85% 80%,rgba(37,99,235,.09),transparent 34%),
    linear-gradient(135deg,#f8f7ff 0%,var(--login-bg) 48%,#f4f9ff 100%);
}

.login-page * { box-sizing:border-box; }
.login-page button,.login-page input { font:inherit; }
.login-orb { position:fixed;z-index:0;border-radius:999px;filter:blur(2px);pointer-events:none; }
.login-orb-purple { width:310px;height:310px;top:-155px;right:13%;background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.08); }
.login-orb-blue { width:240px;height:240px;bottom:-120px;left:10%;background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.08); }

.login-shell {
  position:relative;
  z-index:1;
  width:min(1140px,100%);
  min-height:min(690px,calc(100vh - 48px));
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
  overflow:hidden;
  border:1px solid rgba(220,229,240,.95);
  border-radius:30px;
  background:rgba(255,255,255,.96);
  box-shadow:0 32px 80px rgba(15,23,42,.12),0 12px 34px rgba(124,58,237,.09);
  animation:login-shell-enter .55s cubic-bezier(.2,.8,.2,1) both;
}

.login-brand-panel {
  position:relative;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:48px 52px 28px;
  border-right:1px solid rgba(220,229,240,.9);
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(245,243,255,.92)),
    var(--login-primary-soft);
}
.login-brand-panel::before {
  content:"";
  position:absolute;
  width:340px;height:340px;
  top:-175px;left:-150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.12),rgba(124,58,237,0) 68%);
}
.login-brand-panel::after {
  content:"";
  position:absolute;
  width:150px;height:150px;
  right:36px;bottom:76px;
  border-radius:50%;
  background:var(--annahl-green-soft);
  opacity:.52;
}
.login-brand-content,.login-brand-footer { position:relative;z-index:2; }
.annahl-logo-wrap {
  width:150px;height:116px;
  display:grid;
  place-items:center;
  margin-bottom:24px;
  border:1px solid rgba(255,255,255,.94);
  border-radius:28px;
  background:rgba(255,255,255,.78);
  box-shadow:0 18px 42px rgba(15,23,42,.08),0 0 0 7px rgba(124,58,237,.045);
}
.annahl-logo-wrap img { display:block;width:126px;height:auto;object-fit:contain; }
.login-eyebrow { display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #ddd6fe;border-radius:999px;background:rgba(255,255,255,.72);color:var(--login-primary-dark);font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase; }
.login-eyebrow i { width:7px;height:7px;border-radius:50%;background:var(--login-primary);box-shadow:11px 0 0 var(--annahl-green),22px 0 0 var(--annahl-orange);margin-right:22px; }
.login-brand-panel h1 { max-width:540px;margin:20px 0 14px;font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-.045em;color:var(--login-text); }
.login-brand-panel h1::after { content:"";display:block;width:72px;height:5px;margin-top:20px;border-radius:999px;background:linear-gradient(90deg,var(--login-primary) 0 68%,var(--annahl-green) 68% 84%,var(--annahl-orange) 84%); }
.login-brand-panel>div>p,.login-brand-content>p { max-width:540px;margin:0;color:var(--login-muted);font-size:15px;line-height:1.7; }
.login-feature-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:32px; }
.login-feature-list article { min-width:0;padding:14px;border:1px solid rgba(220,229,240,.9);border-radius:17px;background:rgba(255,255,255,.68);backdrop-filter:blur(10px); }
.feature-icon { width:34px;height:34px;display:grid;place-items:center;margin-bottom:10px;border-radius:11px;background:var(--login-primary-light);color:var(--login-primary-dark); }
.feature-icon svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.login-feature-list strong { display:block;font-size:12px;line-height:1.25; }
.login-feature-list small { display:block;margin-top:5px;color:var(--login-muted);font-size:10px;line-height:1.45; }
.login-brand-footer { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(203,213,225,.68);color:var(--login-muted);font-size:10px; }
.login-brand-footer span { display:flex;align-items:center;gap:7px;font-weight:800; }
.login-brand-footer b { width:8px;height:8px;border-radius:50%;background:var(--annahl-green);box-shadow:0 0 0 4px var(--annahl-green-soft); }
.brand-watermark { position:absolute;right:-18px;bottom:3px;z-index:0;color:rgba(124,58,237,.035);font-size:150px;font-weight:950;letter-spacing:-.08em;transform:rotate(-8deg);user-select:none; }
.brand-arc { position:absolute;z-index:1;border-radius:50%;pointer-events:none; }
.brand-arc-green { width:210px;height:210px;right:-112px;top:70px;border:4px solid transparent;border-left-color:rgba(0,166,81,.34);transform:rotate(24deg); }
.brand-arc-orange { width:250px;height:250px;right:-130px;top:50px;border:3px solid transparent;border-left-color:rgba(245,130,32,.45);transform:rotate(24deg); }

.login-form-panel { min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:46px 54px 26px;background:rgba(255,255,255,.97); }
.login-form-content { width:100%;max-width:410px;margin:auto; }
.mobile-brand { display:none; }
.form-kicker { display:inline-block;margin-bottom:10px;color:var(--login-primary);font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase; }
.login-form-panel h2 { margin:0;font-size:clamp(28px,3vw,38px);line-height:1.1;letter-spacing:-.035em; }
.login-intro { margin:11px 0 28px;color:var(--login-muted);font-size:13px;line-height:1.6; }
.login-alert { display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;padding:12px 14px;border:1px solid #fecdd3;border-radius:14px;background:#fff1f2;color:#b4233b;font-size:12px;font-weight:750; }
.login-alert svg { flex:0 0 auto;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.login-form { display:grid;gap:9px; }
.login-form>label,.password-label label { color:#334155;font-size:12px;font-weight:900; }
.password-label { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px; }
.password-label span { color:#94a3b8;font-size:9px; }
.login-field { position:relative;display:flex;align-items:center; }
.login-field>svg { position:absolute;left:15px;z-index:1;width:18px;height:18px;fill:none;stroke:#64748b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .18s ease; }
.login-page .login-input { width:100%;height:50px;padding:0 16px 0 45px;border:1px solid var(--login-border);border-radius:14px;outline:0;background:#fff;color:var(--login-text);font-size:13px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.login-page .login-field.has-action .login-input { padding-right:49px; }
.login-page .login-input::placeholder { color:#a3afc0; }
.login-page .login-input:focus { border-color:var(--login-primary);box-shadow:0 0 0 4px rgba(124,58,237,.12); }
.login-field:focus-within>svg { stroke:var(--login-primary); }
.login-page input:-webkit-autofill,.login-page input:-webkit-autofill:hover,.login-page input:-webkit-autofill:focus { -webkit-text-fill-color:var(--login-text);-webkit-box-shadow:0 0 0 1000px #fff inset;box-shadow:0 0 0 1000px #fff inset;caret-color:var(--login-text);transition:background-color 9999s ease-out; }
.password-toggle { position:absolute;right:8px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;background:transparent;color:#64748b;box-shadow:none; }
.password-toggle:hover,.password-toggle:focus-visible { background:var(--login-primary-soft);color:var(--login-primary-dark);outline:0; }
.password-toggle svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.password-toggle .eye-closed { display:none; }.password-toggle[aria-pressed="true"] .eye-open { display:none; }.password-toggle[aria-pressed="true"] .eye-closed { display:block; }
.login-submit { width:100%;height:52px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:17px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--login-primary),var(--login-primary-dark));color:#fff;font-size:13px;font-weight:900;box-shadow:0 12px 26px rgba(124,58,237,.25);transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.login-submit:hover { transform:translateY(-1px);background:linear-gradient(135deg,var(--login-primary-dark),var(--login-primary-deep));box-shadow:0 16px 30px rgba(124,58,237,.3); }
.login-submit:active { transform:translateY(0); }.login-submit:focus-visible { outline:3px solid rgba(124,58,237,.24);outline-offset:3px; }
.login-submit svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.login-help { display:flex;align-items:flex-start;gap:10px;margin-top:24px;padding:13px;border:1px solid #e8edf4;border-radius:14px;background:var(--login-surface-soft); }
.help-mark { flex:0 0 auto;width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:var(--login-info-light);color:var(--login-info);font-size:12px;font-weight:950; }
.login-help p { margin:0;color:var(--login-muted);font-size:10px;line-height:1.5; }.login-help strong { color:#334155; }
.login-form-footer { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:28px;padding-top:17px;border-top:1px solid #edf1f6;color:#94a3b8;font-size:9px; }
.login-form-footer span { display:flex;align-items:center;gap:5px;font-weight:850;color:#64748b; }.annahl-dot { width:6px;height:6px;border-radius:50%; }.annahl-dot.green { background:var(--annahl-green); }.annahl-dot.orange { background:var(--annahl-orange); }

@keyframes login-shell-enter { from { transform:translateY(14px) scale(.99); } to { transform:none; } }
@media (max-width:920px) {
  body.login-page { padding:16px;align-items:start; }
  .login-shell { min-height:0;grid-template-columns:1fr;max-width:600px; }
  .login-brand-panel { display:none; }
  .login-form-panel { min-height:calc(100vh - 32px);padding:28px 30px 22px; }
  .mobile-brand { display:flex;align-items:center;gap:12px;margin-bottom:46px; }
  .mobile-brand img { width:66px;height:auto;object-fit:contain; }
  .mobile-brand strong { display:block;font-size:17px; }.mobile-brand small { display:block;margin-top:3px;color:var(--login-primary-dark);font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.04em; }
}
@media (max-width:520px) {
  body.login-page { padding:0;background:#fff; }
  .login-shell { width:100%;min-height:100vh;border:0;border-radius:0;box-shadow:none; }
  .login-form-panel { min-height:100vh;padding:24px 22px 18px; }
  .mobile-brand { margin-bottom:34px; }
  .login-form-content { margin:0 auto; }
  .login-form-footer { flex-direction:column;align-items:flex-start; }
  .password-label span { display:none; }
}
@media (prefers-reduced-motion:reduce) { .login-shell { animation:none; }.login-submit { transition:none; } }