:root {
  color-scheme: dark;
  --bg:#070a0e;
  --bg-soft:#091018;
  --surface:#0d131a;
  --surface-2:#101820;
  --line:#24303b;
  --line-soft:#19242e;
  --line-bright:#344455;
  --text:#f1f5f9;
  --muted:#8b98a8;
  --dim:#637080;
  --teal:#00b7c2;
  --teal-bright:#51d5dc;
  --danger:#ff6b68;
  --field-bg:var(--bg-soft);
  --field-focus-bg:var(--surface-2);
  --field-autofill-bg:var(--field-bg);
}
* { box-sizing:border-box; }
html,body { min-width:320px; min-height:100%; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
button,input { font:inherit; }
button { color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.login-shell { min-height:100vh; display:grid; grid-template:64px minmax(0,1fr) 56px / minmax(0,1fr); position:relative; }
.login-shell::before {
  content:none;
  position:absolute;
  top:64px;
  right:0;
  bottom:56px;
  left:0;
  z-index:0;
  pointer-events:none;
  background:none;
  background-size:auto;
  background-position:0 0;
  opacity:1;
}
.login-header,
.access-panel,
.login-footer { position:relative; z-index:1; }
.login-header { min-width:0; display:flex; align-items:center; gap:18px; padding:0 30px; border:0; background:rgba(13,19,26,.82); box-shadow:inset 0 -1px var(--line-soft); }
.emc-brand { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:760; letter-spacing:-.25px; }
.emc-brand-logo-stack { display:inline-grid; place-items:center; width:27px; height:32px; flex:0 0 auto; }
.emc-brand-logo { grid-area:1 / 1; width:27px; height:32px; object-fit:contain; display:block; }
.emc-brand-logo-for-light { display:none; }
.emc-brand-logo-for-dark { display:block; }
html[data-theme="light"] .emc-brand-logo-for-light { display:block; }
html[data-theme="light"] .emc-brand-logo-for-dark { display:none; }
html[data-theme="dark"] .emc-brand-logo-for-light { display:none; }
html[data-theme="dark"] .emc-brand-logo-for-dark { display:block; }
.theme-picker { display:flex; margin-left:auto; padding:3px; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.theme-picker button { width:30px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; }
.theme-picker button:hover { background:var(--surface-2); color:var(--text); }
.theme-picker button[aria-checked="true"] { background:var(--surface-2); color:var(--teal-bright); }
.theme-picker svg { width:16px; height:16px; }
.access-panel {
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  width:340px;
  align-self:center;
  justify-self:center;
  padding:26px 28px 28px;
  overflow:hidden;
  border:1px solid #2d3a46;
  border-radius:7px;
  background:var(--surface);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  transform:translateY(-88px);
}
.access-heading { text-align:center; }
.access-brandmark {
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:.24em;
  max-width:100%;
  margin:0 auto 22px;
  color:var(--text);
  font-size:32px;
  font-weight:820;
  letter-spacing:-.65px;
  line-height:1;
  white-space:nowrap;
}
.access-brand-name { color:#00b7c2; }
.access-brand-system { color:inherit; }
.access-icon { width:40px; height:40px; display:grid; place-items:center; margin:0 auto 24px; border:1px solid color-mix(in srgb,var(--teal) 55%,var(--line)); border-radius:7px; color:var(--teal-bright); }
.access-icon svg { width:20px; height:20px; }
.login-form { display:grid; }
.login-form label { margin:0 0 6px; color:var(--muted); font-size:12px; font-weight:620; }
.field-wrap { height:42px; display:grid; grid-template-columns:18px minmax(0,1fr) 30px; align-items:center; margin-bottom:12px; padding:0 7px 0 12px; border:1px solid #2d3a46; border-radius:7px; background:var(--field-bg); transition:border-color 150ms ease,background 150ms ease,box-shadow 150ms ease; }
.field-wrap:focus-within { border-color:var(--teal); background:var(--field-focus-bg); box-shadow:0 0 0 1px color-mix(in srgb,var(--teal) 24%,transparent); }
.field-wrap > svg { width:15px; height:15px; color:var(--dim); }
.field-wrap input { min-width:0; height:100%; padding:0 9px; border:0; outline:0; appearance:none; -webkit-appearance:none; background:transparent!important; color:var(--text); font-size:12px; box-shadow:none!important; }
.field-wrap input:-webkit-autofill,
.field-wrap input:-webkit-autofill:hover,
.field-wrap input:-webkit-autofill:focus,
.field-wrap input:-webkit-autofill:active,
.field-wrap input:autofill {
  -webkit-text-fill-color:var(--text)!important;
  caret-color:var(--text);
  border:0;
  background-color:transparent!important;
  background-image:none!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-box-shadow:0 0 0 1000px var(--field-autofill-bg) inset!important;
  box-shadow:0 0 0 1000px var(--field-autofill-bg) inset!important;
  transition:background-color 999999s ease-in-out 0s;
}
.field-wrap:focus-within input:-webkit-autofill,
.field-wrap:focus-within input:-webkit-autofill:hover,
.field-wrap:focus-within input:-webkit-autofill:focus,
.field-wrap:focus-within input:-webkit-autofill:active,
.field-wrap:focus-within input:autofill {
  -webkit-box-shadow:0 0 0 1000px var(--field-autofill-bg) inset!important;
  box-shadow:0 0 0 1000px var(--field-autofill-bg) inset!important;
}
.field-wrap:has(input:user-invalid) { border-color:var(--danger); }
.field-wrap:first-of-type { grid-template-columns:18px minmax(0,1fr); }
.password-toggle { width:30px; height:30px; display:grid; place-items:center; padding:0; border:0; border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; }
.password-toggle:hover { background:var(--surface); color:var(--text); }
.password-toggle svg { width:16px; height:16px; }
.form-message { min-height:14px; margin:-3px 0 10px; color:var(--danger); font-size:10px; line-height:1.4; }
.login-button { height:42px; border:1px solid #008d98; border-radius:7px; background:#008d98; color:#fff; font-size:12px; font-weight:760; cursor:pointer; transition:background 150ms ease,border-color 150ms ease,transform 150ms ease; }
.login-button:hover { border-color:#00b7c2; background:#00b7c2; transform:none; }
.login-button:disabled { cursor:default; opacity:.72; transform:none; }
.login-button:focus-visible,.password-toggle:focus-visible,.theme-picker button:focus-visible { outline:2px solid var(--teal-bright); outline-offset:2px; }
.login-footer { min-width:0; display:flex; align-items:center; justify-content:center; padding:0 30px; border:0; background:rgba(13,19,26,.82); box-shadow:inset 0 1px var(--line-soft); color:var(--dim); font-size:10px; text-align:center; }
.login-footer span { display:flex; align-items:center; gap:7px; font-weight:700; }

html[data-theme="light"] { --bg:#f4f7fa; --bg-soft:#f7fafc; --surface:#fff; --surface-2:#f1f5f8; --line:#d5e0e7; --line-soft:#e3ebf0; --line-bright:#bac9d3; --text:#14212b; --muted:#5f6f7d; --dim:#84929e; --teal:#008d98; --teal-bright:#00a7b3; --field-bg:#fff; --field-focus-bg:#fff; --field-autofill-bg:#fff; color-scheme:light; }
html[data-theme="light"] .login-shell::before { background:none; }
html[data-theme="light"] .login-button { color:#fff; }
html[data-theme="light"] .login-header,html[data-theme="light"] .login-footer { background:rgba(255,255,255,.88); }
html[data-theme="light"] .access-panel {
  border-color:#c3d0d9;
  background:#fff;
  box-shadow:0 10px 28px rgba(20,33,43,.08);
}
html[data-theme="light"] .field-wrap { border-color:#cfdbe3; }

@media(max-width:900px) {
  .login-header { padding:0 18px; }
}
@media(max-width:620px) {
  .login-shell { grid-template-rows:64px minmax(0,1fr) auto; }
  .login-shell::before { bottom:72px; }
  .emc-brand span { font-size:14px; }
  .access-panel { width:calc(100% - 28px); padding:24px 18px 26px; transform:translateY(-66px); }
  .login-footer { min-height:72px; justify-content:center; padding:14px; text-align:center; }
}
@container (max-width:280px) {
  .access-brandmark { font-size:30px; }
}
@container (max-width:240px) {
  .access-brandmark { font-size:26px; letter-spacing:-.4px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }