/* Login — "AI inference cluster" control plane: split 2 panel (hero trái vẽ DISPATCH
   FABRIC — hub điều phối fan-out request L1/L2 tới pool GPU node, packet chạy dọc cạnh
   = "node rảnh node tính"; lưới + glow · auth phải sạch). Token app.css (--accent
   #06b6d4 …), KHÔNG asset ngoài. Giữ .login-card/.login-brand/.verify-*/.login-btn
   cho verify_email.html (dùng chung sheet này). */

/* MỘT canvas khí quyển LIỀN MẠCH cho cả trang: gradient navy + 2 vầng sáng cyan/
   indigo trải kín viewport. Cả hero lẫn form ngồi TRÊN CÙNG tấm nền này → không còn
   "1 bên có nền, 1 bên solid phẳng" + không còn seam cứng giữa 2 nửa. */
.login-body {
    min-height: 100vh; margin: 0;
    display: flex; flex-direction: column;
    background:
        radial-gradient(1000px 720px at 20% 25%, rgba(6, 182, 212, 0.11), transparent 60%),
        radial-gradient(780px 680px at 82% 70%, rgba(99, 102, 241, 0.09), transparent 58%),
        linear-gradient(155deg, #0b1120 0%, #080b14 55%, #05070d 100%);
    color: var(--text-primary);
    font-family: inherit;
}

/* ── Khung split FULL-BLEED ─────────────────────────────────────────────────
   KHÔNG card/box, KHÔNG nền riêng: 2 panel trong suốt trải kín viewport trên canvas
   chung ở .login-body → không viền/bo góc/shadow/seam. Mỗi panel cao full màn →
   nội dung căn giữa dọc, thở đều, không dính mép trên. */
.login-shell {
    width: 100%; min-height: 100vh;
    display: grid; grid-template-columns: 1.05fr 1fr;
}

/* ── PANEL TRÁI · hero ─────────────────────────────────────────────────────── */
.login-hero {
    position: relative; overflow: hidden; padding: 54px 46px;
    display: flex; flex-direction: column; justify-content: center;
    background: transparent;
    isolation: isolate;
}
.hero-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: radial-gradient(120% 90% at 30% 20%, #000 35%, transparent 80%);
            mask-image: radial-gradient(120% 90% at 30% 20%, #000 35%, transparent 80%);
}
.hero-glow {
    position: absolute; z-index: 0; top: -120px; right: -120px; width: 380px; height: 380px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.35), transparent 65%);
    filter: blur(20px);
}
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.92; }

/* ── Dispatch fabric: hub điều phối fan-out request → pool GPU node ───────────
   Cạnh tĩnh (faint) vẽ-vào once; packet accent chạy dọc cạnh = request dispatch. */
.hero-art .mesh-in { fill: none; stroke: rgba(125, 211, 252, 0.30); stroke-width: 1.6; stroke-linecap: round; }
.hero-art .mesh-edge {
    fill: none; stroke: rgba(125, 211, 252, 0.20); stroke-width: 1.4; stroke-linecap: round;
    stroke-dasharray: 600; stroke-dashoffset: 600; animation: mesh-draw 1s ease forwards 0.25s;
}
@keyframes mesh-draw { to { stroke-dashoffset: 0; } }

.hero-art .mesh-flow, .hero-art .mesh-in-flow {
    fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.85));
}
.hero-art .mesh-flow {
    stroke-dasharray: 10 480; stroke-dashoffset: 340;
    animation: mesh-travel 2.4s linear infinite;
}
.hero-art .mesh-flow:nth-of-type(1) { animation-delay: 0s; }
.hero-art .mesh-flow:nth-of-type(2) { animation-delay: 0.45s; }
.hero-art .mesh-flow:nth-of-type(3) { animation-delay: 0.9s; }
.hero-art .mesh-flow:nth-of-type(4) { animation-delay: 1.35s; }
.hero-art .mesh-flow:nth-of-type(5) { animation-delay: 1.8s; }
@keyframes mesh-travel { from { stroke-dashoffset: 340; } to { stroke-dashoffset: -150; } }
.hero-art .mesh-in-flow {
    stroke-dasharray: 8 200; stroke-dashoffset: 110;
    animation: mesh-in-travel 2.4s linear infinite;
}
@keyframes mesh-in-travel { from { stroke-dashoffset: 110; } to { stroke-dashoffset: -100; } }

/* Dispatcher hub — lõi phát sáng + vòng nhịp (điểm nhận request). */
.hero-art .mesh-hub-glow { fill: url(#hubGlow); opacity: 0.75; }
.hero-art .mesh-hub { fill: #0b1120; stroke: var(--accent); stroke-width: 2; }
.hero-art .mesh-hub-ring {
    fill: none; stroke: var(--accent); stroke-width: 1.4;
    transform-box: fill-box; transform-origin: center; animation: mesh-ring 2.6s ease-out infinite;
}
@keyframes mesh-ring { 0% { transform: scale(0.55); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } }
.hero-art .mesh-hub-core {
    fill: var(--accent); filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.9));
    transform-box: fill-box; transform-origin: center; animation: mesh-pulse 2.6s ease-in-out infinite;
}
@keyframes mesh-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* Pool GPU node — mỗi node 1 lõi (model đang chạy) + chấm trạng thái healthy. */
.hero-art .mn-box { fill: rgba(99, 102, 241, 0.07); stroke: rgba(125, 211, 252, 0.42); stroke-width: 1.3; }
.hero-art .mn-core {
    fill: var(--accent); opacity: 0.85; filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.7));
    transform-box: fill-box; transform-origin: center; animation: mesh-pulse 2.8s ease-in-out infinite;
}
.hero-art .mn:nth-of-type(1) .mn-core { animation-delay: 0.2s; }
.hero-art .mn:nth-of-type(2) .mn-core { animation-delay: 0.6s; }
.hero-art .mn:nth-of-type(3) .mn-core { animation-delay: 1s; }
.hero-art .mn:nth-of-type(4) .mn-core { animation-delay: 1.4s; }
.hero-art .mn:nth-of-type(5) .mn-core { animation-delay: 1.8s; }
.hero-art .mn-dot { fill: #22c55e; filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.8)); animation: hs-blink 2.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .hero-art .mesh-hub-ring, .hero-art .mesh-hub-core, .hero-art .mn-core, .hero-art .mn-dot { animation: none; }
    .hero-art .mesh-edge { stroke-dashoffset: 0; animation: none; }
    .hero-art .mesh-flow, .hero-art .mesh-in-flow { animation: none; opacity: 0; }
}

.hero-content { position: relative; z-index: 1; }
.hero-mark { display: flex; align-items: baseline; gap: 10px; margin-bottom: 30px; }
.hero-logo { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.26em; color: #fff; }
.hero-kicker { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.hero-headline {
    margin: 0 0 14px; font-size: 2rem; line-height: 1.16; font-weight: 700; color: #fff;
    letter-spacing: -0.01em;
}
.hero-sub { margin: 0 0 26px; font-size: 0.92rem; line-height: 1.6; color: rgba(226, 232, 240, 0.72); max-width: 38ch; }
.hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hero-points li {
    position: relative; padding-left: 24px; font-size: 0.86rem; color: rgba(226, 232, 240, 0.82);
}
.hero-points li::before {
    content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 2px;
    background: var(--accent); box-shadow: 0 0 9px rgba(6, 182, 212, 0.7); transform: rotate(45deg);
}
.hero-status {
    position: absolute; z-index: 1; left: 44px; bottom: 30px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(226, 232, 240, 0.6);
}
.hs-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.8); animation: hs-blink 2s ease-in-out infinite;
}
@keyframes hs-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── PANEL PHẢI · auth ─────────────────────────────────────────────────────── */
/* Trong suốt — ngồi trên canvas chung (.login-body), KHÔNG slab solid riêng. Panel
   cao full viewport → justify-content:center căn form GIỮA DỌC, thở đều, không dính
   mép trên. */
.login-auth {
    background: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 56px 64px;
}
.login-panel { width: 100%; max-width: 340px; display: flex; flex-direction: column; }
.login-brand-sm { display: none; align-items: baseline; gap: 8px; margin-bottom: 30px; }
.lb-logo { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.22em; color: var(--accent); }
.lb-kicker { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.login-head { margin-bottom: 40px; }
.login-head h1 { margin: 0 0 9px; font-size: 1.62rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.login-head p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }

.login-form { display: flex; flex-direction: column; gap: 28px; }
.lf-field {
    display: flex; flex-direction: column; gap: 10px; font-size: 0.68rem;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500;
}
.lf-field small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); opacity: 0.8; }
/* Ô 2FA (#li-otp-wrap) ẨN mặc định — chỉ hiện khi server trả 2fa_required (tài khoản
   có totp_enabled). .lf-field là display:flex (author) ĐÈ UA [hidden] → phải re-hide
   tường minh, giống dialog.css. */
.lf-field[hidden] { display: none; }

/* Field = GẠCH CHÂN tối giản (Stripe/Linear): nền trong suốt, KHÔNG khung-viền /
   bo-góc / fill — chỉ 1 hairline đáy. Thoáng, chuyên nghiệp; bỏ hẳn khối input
   "thô kệch" (fill + border + radius) đã bị chê. Dùng chung field + captcha (DRY). */
.lf-field input,
.login-captcha input {
    width: 100%; box-sizing: border-box;
    background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0;
    padding: 9px 1px; color: var(--text-primary); font-size: 1rem;
    letter-spacing: normal; text-transform: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lf-field input::placeholder,
.login-captcha input::placeholder { color: var(--text-muted); opacity: 0.45; }
.lf-field input:focus,
.login-captcha input:focus {
    outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent);
}

/* Chrome autofill ÉP nền trắng. Field gạch-chân trên canvas trong suốt → phủ autofill
   bằng tông navy tối KHỚP canvas sau form (#0a0d18) cho "vô hình", GIỮ dáng gạch chân
   (không biến lại thành khối sáng). Chữ + caret sáng; transition 9999s đóng băng màu. */
.lf-field input:-webkit-autofill,
.lf-field input:-webkit-autofill:hover,
.lf-field input:-webkit-autofill:focus,
.login-captcha input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary); caret-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px #0a0d18 inset;
    transition: background-color 9999s ease-in-out 0s;
}
.login-btn {
    margin-top: 8px; border: none; border-radius: 9px; padding: 13px;
    font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; color: #04121a;
    background: linear-gradient(135deg, #22d3ee, var(--accent) 55%, #0891b2);
    box-shadow: 0 6px 18px rgba(6, 182, 212, 0.22);
    transition: filter 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}
.login-btn:hover { filter: brightness(1.07); box-shadow: 0 9px 24px rgba(6, 182, 212, 0.32); }
.login-btn:active { transform: translateY(1px); }
.login-err {
    color: var(--red); font-size: 0.8rem; line-height: 1.45; text-align: center;
    background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px; padding: 9px 11px;
}
.login-foot { margin-top: 26px; text-align: center; font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.03em; }

/* ── CAPTCHA ───────────────────────────────────────────────────────────────── */
.login-captcha { display: flex; flex-direction: column; gap: 12px; }
.login-captcha-row { display: flex; align-items: center; gap: 10px; }
.login-captcha-img {
    height: 46px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-tertiary); flex: 1 1 auto;
}
.login-captcha-reload {
    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
    border-radius: 8px; width: 42px; height: 42px; font-size: 1.05rem; cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.login-captcha-reload:hover { color: var(--accent); border-color: var(--accent); }
/* .login-captcha input → gạch chân dùng chung với .lf-field input (rule ở trên). */

/* ── Responsive: thu hero, dồn auth full ──────────────────────────────────── */
@media (max-width: 880px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-hero { display: none; }
    .login-brand-sm { display: flex; }
    .login-auth { padding: 40px 28px; }
}

/* ── Trang xác thực email (verify_email.html — dùng chung sheet) ─────────────
   Body là flex-column full-bleed (login dùng .login-shell fill); verify chỉ có
   .login-card → margin:auto căn giữa cả 2 trục, không cần body flex-center. */
.login-card {
    width: 340px; margin: auto; background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 16px; padding: 34px 30px; display: flex; flex-direction: column; gap: 16px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.login-brand { text-align: center; margin-bottom: 4px; }
.login-brand h1 { color: var(--accent); font-size: 1.6rem; letter-spacing: 0.18em; margin: 0; }
.login-brand span { color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.1em; }
.verify-card { text-align: center; gap: 12px; }
.verify-icon {
    width: 56px; height: 56px; line-height: 56px; margin: 4px auto 0; border-radius: 50%;
    font-size: 1.8rem; font-weight: 700;
}
.verify-ok { background: rgba(34, 197, 94, .12); color: #22c55e; }
.verify-fail { background: rgba(239, 68, 68, .12); color: var(--red); }
.verify-title { color: var(--text-primary); font-size: 1.05rem; font-weight: 600; }
.verify-msg { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; }
.verify-btn { margin-top: 8px; text-align: center; text-decoration: none; }