:root {
  --core: #071d1d;
  --core-raised: #0a2928;
  --line: #194846;
  --green: #22e6a1;
  --cyan: #21c7e8;
  --text: #d8ebea;
  --muted: #779594;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: var(--core); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .55fr); }
.engine-visual { min-width: 0; position: relative; display: grid; grid-template-rows: 54px minmax(360px, 1fr) 84px; overflow: hidden; border-right: 1px solid var(--line); background-color: #061919; background-image: linear-gradient(rgba(70, 125, 122, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(70, 125, 122, .14) 1px, transparent 1px); background-size: 48px 48px; }
.visual-header { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); color: #7fa4a2; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.visual-header b { display: flex; align-items: center; gap: 7px; color: var(--green); font-size: 9px; }
.visual-header i { width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 10px rgba(34, 230, 161, .8); animation: pulse 1.5s ease-in-out infinite alternate; }
.profile-grid { width: min(70vh, 700px); aspect-ratio: 1.23; position: relative; align-self: center; justify-self: center; }
.profile-grid svg { width: 100%; height: 100%; filter: drop-shadow(0 0 15px rgba(33, 199, 232, .16)); }
.profile-grid path { fill: rgba(33, 199, 232, .025); vector-effect: non-scaling-stroke; }
.profile-main { stroke: var(--green); stroke-width: 3; stroke-dasharray: 1450; animation: draw 2s ease-out both; }
.profile-inner { stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 1050; animation: draw 2s .2s ease-out both; }
.profile-cavity { stroke: #4da8ff; stroke-width: 2; stroke-dasharray: 600; animation: draw 1.5s .5s ease-out both; }
.scan-beam { position: absolute; left: 5%; right: 5%; top: 12%; height: 1px; background: var(--cyan); box-shadow: 0 0 18px rgba(33, 199, 232, .7); animation: scan 3.2s ease-in-out infinite alternate; }
.corner { width: 26px; height: 26px; position: absolute; border-color: var(--green); opacity: .8; }
.corner.a { top: 4%; left: 4%; border-top: 2px solid; border-left: 2px solid; }.corner.b { top: 4%; right: 4%; border-top: 2px solid; border-right: 2px solid; }.corner.c { bottom: 4%; left: 4%; border-bottom: 2px solid; border-left: 2px solid; }.corner.d { right: 4%; bottom: 4%; border-right: 2px solid; border-bottom: 2px solid; }
.visual-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: rgba(5, 23, 23, .86); }
.visual-metrics span { display: grid; align-content: center; gap: 7px; padding: 0 28px; border-right: 1px solid var(--line); }.visual-metrics span:last-child { border-right: 0; }
.visual-metrics small { color: #638482; font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }.visual-metrics strong { color: var(--green); font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.login-panel { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 34px 42px; background: #fff; color: #17262d; }
.brand { display: flex; align-items: center; gap: 12px; }.brand > span { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: #07845e; border-radius: 6px; font-weight: 800; }.brand h1 { margin: 0; font-size: 17px; }.brand p { margin: 2px 0 0; color: #70818a; font-size: 10px; }
.login-panel form { width: 100%; max-width: 360px; align-self: center; justify-self: center; }.form-heading { margin-bottom: 32px; }.form-heading span { color: #07845e; font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }.form-heading h2 { margin: 8px 0 4px; font-size: 25px; }.form-heading p { margin: 0; color: #70818a; font-size: 11px; }
.login-panel label { display: grid; gap: 7px; margin-bottom: 17px; color: #344852; font-size: 10px; font-weight: 700; }.login-panel input { width: 100%; height: 44px; padding: 0 12px; color: #17262d; background: #f5f8f8; border: 1px solid #d9e3e5; border-radius: 5px; outline: 0; }.login-panel input:focus { background: #fff; border-color: #07845e; box-shadow: 0 0 0 3px rgba(7, 132, 94, .1); }
.login-panel button { width: 100%; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; color: #fff; background: #07845e; border: 0; border-radius: 5px; cursor: pointer; font-weight: 750; }.login-panel button small { padding: 4px 6px; color: #076247; background: #d6f4e8; border-radius: 3px; font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }.login-panel button:disabled { cursor: wait; opacity: .65; }
.login-message { min-height: 20px; margin: 10px 0 0; color: #70818a; font-size: 10px; }.login-message.error { color: #b53238; }.login-message.success { color: #07845e; }
.login-panel footer { display: flex; align-items: center; gap: 8px; color: #84939a; font-size: 9px; }.login-panel footer i { width: 6px; height: 6px; background: #07845e; }
@keyframes draw { from { stroke-dashoffset: 1450; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } } @keyframes scan { to { top: 88%; } } @keyframes pulse { to { opacity: .35; } }
@media (max-width: 860px) { .login-shell { grid-template-columns: 1fr; }.engine-visual { min-height: 310px; grid-template-rows: 44px 1fr 64px; border-right: 0; border-bottom: 1px solid var(--line); }.profile-grid { width: min(82vw, 430px); }.login-panel { min-height: 534px; padding: 25px; }.visual-metrics span { padding: 0 13px; } }
@media (prefers-reduced-motion: reduce) { .profile-grid path, .scan-beam, .visual-header i { animation: none; } }