/*
 * Verona — Login. 10 estilos. Los temas de OS usan layouts propios (no solo color):
 *   1 Split · 2 Aurora · 3 Minimal · 4 Dracula · 8 Cyberpunk · 10 Corporativo  (tarjeta)
 *   5 Windows 11 (lock) · 6 Linux (TTY) · 7 Hacker (consola) · 9 macOS (lock)
 */
:root {
    --vl-primary: var(--v-primary, #6366f1);
    --vl-primary-700: var(--v-primary-700, #4338ca);
    --vl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vl-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--vl-font); background: #0f172a; overflow-x: hidden; }
.modal { font-family: var(--vl-font); }

.vlogin-msgs { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 3000; width: min(520px, 94vw); }
.vlogin-msgs:empty { display: none; }
.vlogin-msgs .alert { box-shadow: 0 12px 34px rgba(0,0,0,.2); border-radius: 12px; }

.vlogin { position: relative; min-height: 100vh; display: flex; align-items: stretch; }
.vlogin-fx { position: absolute; inset: 0; z-index: 0; display: none; }
.vlogin-bg { position: absolute; inset: 0; z-index: 0; }
.vlogin-brand { display: none; position: relative; z-index: 2; }
.vlogin-panel { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; position: relative; z-index: 2; }

/* ============ Tarjeta base (estilos 1,2,3,4,8,10) ============ */
.vlogin-card { width: 100%; max-width: 420px; position: relative; background: #fff; border-radius: 18px; padding: 2.5rem 2.25rem; box-shadow: 0 24px 70px rgba(15,23,42,.16), 0 6px 16px rgba(15,23,42,.06); border: 1px solid rgba(15,23,42,.05); }
.vlogin-head { text-align: center; margin-bottom: 1.85rem; }
.vlogin-logo-mark { width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.vlogin-logo-mark:not(.has-img) { background: linear-gradient(135deg, var(--vl-primary), var(--vl-primary-700)); box-shadow: 0 10px 26px color-mix(in srgb, var(--vl-primary) 40%, transparent); }
.vlogin-logo-mark .vlogin-mark-ico { color: #fff; font-size: 1.7rem; }
.vlogin-logo-mark.has-img { background: #fff; border: 1px solid rgba(15,23,42,.08); box-shadow: 0 10px 26px rgba(15,23,42,.12); padding: 9px; overflow: hidden; }
.vlogin-logo-mark.has-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vlogin-title { font-size: 1.7rem; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -.02em; }
.vlogin-sub { font-size: .9rem; color: #64748b; margin: .45rem 0 0; }
.vlogin-field { margin-bottom: 1.15rem; }
.vlogin-field > label { display: block; font-size: .8rem; font-weight: 600; color: #475569; margin-bottom: .4rem; }
.vlogin-input { display: flex; align-items: center; gap: .65rem; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 0 .9rem; height: 52px; transition: border-color .15s, box-shadow .15s, background .15s; }
.vlogin-input:focus-within { border-color: var(--vl-primary); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--vl-primary) 14%, transparent); }
.vlogin-input > i { color: #94a3b8; font-size: .95rem; width: 18px; text-align: center; }
.vlogin-input input { flex: 1 1 auto; border: none; background: transparent; outline: none; font-family: inherit; font-size: .95rem; color: #0f172a; height: 100%; }
.vlogin-input input::placeholder { color: #94a3b8; }
.vlogin-eye { border: none; background: transparent; color: #94a3b8; cursor: pointer; padding: .25rem; }
.vlogin-eye.on { color: var(--vl-primary); }
.vlogin-forgot { display: inline-block; margin-top: .5rem; font-size: .8rem; color: var(--vl-primary); text-decoration: none; font-weight: 500; }
.vlogin-forgot:hover { text-decoration: underline; }
.vlogin-btn { width: 100%; height: 52px; margin-top: .6rem; border: none; border-radius: 12px; cursor: pointer; background: linear-gradient(135deg, var(--vl-primary), var(--vl-primary-700)); color: #fff; font-family: inherit; font-size: 1rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: .5rem; box-shadow: 0 10px 24px color-mix(in srgb, var(--vl-primary) 35%, transparent); transition: transform .15s, box-shadow .15s, filter .15s; }
.vlogin-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

.vlogin-brand-inner { position: relative; z-index: 3; max-width: 460px; }
.vlogin-brand-logo { display: inline-flex; background: rgba(255,255,255,.95); padding: .45rem .65rem; border-radius: 12px; margin-bottom: 2rem; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.vlogin-brand-logo img { height: 34px; object-fit: contain; }
.vlogin-brand-title { font-size: 2.2rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; margin: 0 0 1rem; }
.vlogin-brand-text { font-size: 1.05rem; color: rgba(255,255,255,.85); margin: 0 0 2rem; line-height: 1.5; }
.vlogin-brand-feats { list-style: none; padding: 0; margin: 0; }
.vlogin-brand-feats li { display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.92); font-size: .98rem; margin-bottom: .9rem; }
.vlogin-brand-feats i { color: #fff; opacity: .9; }
.vlogin-brand-glow { position: absolute; border-radius: 50%; filter: blur(90px); width: 420px; height: 420px; right: -100px; top: -80px; background: rgba(255,255,255,.22); z-index: 1; }
.vlogin-brand-grid { position: absolute; inset: 0; z-index: 1; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 36px 36px; }

/* 1 Split */
.vlogin-1 .vlogin-bg { background: #fff; }
.vlogin-1 .vlogin-brand { display: flex; align-items: center; flex: 1 1 48%; overflow: hidden; padding: 3.5rem; background: linear-gradient(140deg, var(--vl-primary), var(--vl-primary-700) 70%, #312e81); }
.vlogin-1 .vlogin-panel { flex: 1 1 52%; } .vlogin-1 .vlogin-card { box-shadow: none; border: none; }
/* 2 Aurora */
.vlogin-2 .vlogin-bg { background: radial-gradient(ellipse 70% 50% at 15% 10%, rgba(124,58,237,.6), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 20%, rgba(59,130,246,.5), transparent 60%), radial-gradient(ellipse 70% 60% at 50% 100%, rgba(236,72,153,.45), transparent 70%), #0c0a1d; animation: vlAurora 16s ease-in-out infinite alternate; }
@keyframes vlAurora { from { background-position: 0 0, 100% 0, 50% 100%; } to { background-position: 12% 8%, 88% 12%, 42% 90%; } }
.vlogin-2 .vlogin-card { background: rgba(255,255,255,.10); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 28px 70px rgba(0,0,0,.45); }
.vlogin-2 .vlogin-title { color: #fff; } .vlogin-2 .vlogin-sub { color: rgba(255,255,255,.72); } .vlogin-2 .vlogin-field > label { color: rgba(255,255,255,.85); }
.vlogin-2 .vlogin-input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); } .vlogin-2 .vlogin-input:focus-within { background: rgba(255,255,255,.15); }
.vlogin-2 .vlogin-input input { color: #fff; } .vlogin-2 .vlogin-input input::placeholder { color: rgba(255,255,255,.5); } .vlogin-2 .vlogin-input > i, .vlogin-2 .vlogin-eye { color: rgba(255,255,255,.6); }
/* 3 Minimal */
.vlogin-3 .vlogin-bg { background: #fff; } .vlogin-3 .vlogin-card { box-shadow: none; border: none; max-width: 380px; }
.vlogin-3 .vlogin-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--vl-primary), var(--vl-primary-700)); }
.vlogin-3 .vlogin-input { background: #fff; border-width: 1.5px; height: 54px; }
/* 4 Dracula */
.vlogin-4 .vlogin-bg { background: radial-gradient(900px 500px at 50% -10%, #2a2c3d, #21222c 55%, #191a22); }
.vlogin-4 .vlogin-card { background: #282a36; border: 1px solid #44475a; box-shadow: 0 28px 70px rgba(0,0,0,.55); }
.vlogin-4 .vlogin-title { color: #f8f8f2; } .vlogin-4 .vlogin-sub { color: #a8adca; } .vlogin-4 .vlogin-field > label { color: #b8bdd9; }
.vlogin-4 .vlogin-input { background: #21222c; border-color: #44475a; } .vlogin-4 .vlogin-input:focus-within { border-color: #bd93f9; box-shadow: 0 0 0 4px rgba(189,147,249,.2); background: #1f2029; }
.vlogin-4 .vlogin-input input { color: #f8f8f2; } .vlogin-4 .vlogin-input input::placeholder { color: #6272a4; } .vlogin-4 .vlogin-input > i, .vlogin-4 .vlogin-eye { color: #6272a4; }
.vlogin-4 .vlogin-logo-mark:not(.has-img) { background: linear-gradient(135deg, #bd93f9, #8b5cf6); box-shadow: 0 10px 26px rgba(189,147,249,.4); }
.vlogin-4 .vlogin-btn { background: linear-gradient(135deg, #bd93f9, #8b5cf6); box-shadow: 0 10px 24px rgba(189,147,249,.35); } .vlogin-4 .vlogin-forgot { color: #bd93f9; }
/* 8 Cyberpunk */
.vlogin-8 .vlogin-bg { background: radial-gradient(60% 50% at 20% 10%, rgba(255,46,136,.18), transparent 60%), radial-gradient(55% 45% at 85% 90%, rgba(0,240,255,.18), transparent 60%), #0a0a14; }
.vlogin-8 .vlogin-fx { display: block; opacity: .5; }
.vlogin-8 .vlogin-card { background: rgba(13,13,26,.85); border: 1px solid rgba(0,240,255,.4); box-shadow: 0 0 0 1px rgba(255,46,136,.25), 0 0 40px rgba(0,240,255,.25), 0 24px 60px rgba(0,0,0,.6); }
.vlogin-8 .vlogin-logo-mark:not(.has-img) { background: linear-gradient(135deg, #ff2e88, #00f0ff); box-shadow: 0 0 26px rgba(0,240,255,.5); }
.vlogin-8 .vlogin-title { color: #fff; text-shadow: 0 0 14px rgba(0,240,255,.5); } .vlogin-8 .vlogin-sub { color: #8a8ab0; }
.vlogin-8 .vlogin-field > label { color: #00f0ff; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.vlogin-8 .vlogin-input { background: rgba(255,255,255,.04); border-color: rgba(0,240,255,.3); } .vlogin-8 .vlogin-input:focus-within { border-color: #ff2e88; box-shadow: 0 0 0 3px rgba(255,46,136,.2), 0 0 18px rgba(255,46,136,.3); }
.vlogin-8 .vlogin-input input { color: #fff; } .vlogin-8 .vlogin-input input::placeholder { color: #55557a; } .vlogin-8 .vlogin-input > i { color: #00f0ff; } .vlogin-8 .vlogin-eye { color: #8a8ab0; }
.vlogin-8 .vlogin-btn { background: linear-gradient(135deg, #ff2e88, #ff5fa2); box-shadow: 0 0 24px rgba(255,46,136,.45); text-transform: uppercase; letter-spacing: .1em; } .vlogin-8 .vlogin-forgot { color: #00f0ff; }
/* 10 Corporativo */
.vlogin-10 .vlogin-bg { background: linear-gradient(135deg, #0b1f3a, #14315a 60%, #0b1f3a); background-image: linear-gradient(135deg, #0b1f3a, #14315a 60%, #0b1f3a), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: cover, 40px 40px, 40px 40px; }
.vlogin-10 .vlogin-brand { display: flex; align-items: center; flex: 1 1 50%; padding: 3.5rem; }
.vlogin-10 .vlogin-panel { flex: 1 1 50%; } .vlogin-10 .vlogin-card { background: rgba(255,255,255,.97); }
.vlogin-10 .vlogin-logo-mark:not(.has-img) { background: linear-gradient(135deg, #2563eb, #1e40af); box-shadow: 0 10px 26px rgba(37,99,235,.4); }
.vlogin-10 .vlogin-btn { background: linear-gradient(135deg, #2563eb, #1e40af); box-shadow: 0 10px 24px rgba(37,99,235,.35); } .vlogin-10 .vlogin-forgot { color: #2563eb; }

/* =====================================================================
 * 5 — WINDOWS 11 (lock screen autentico)
 * ===================================================================== */
.vlogin-5 { font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif; background: #0a2342; }
.vlogin-5 .vlogin-bg {
    overflow: hidden;
    background: radial-gradient(125% 125% at 50% 40%, #2f6db0 0%, #245a98 26%, #173f6e 55%, #0e2a4d 80%, #08182f 100%);
}
/* bloom central suave (estilo wallpaper Win11) */
.vlogin-5 .vlogin-bg::before { content: ''; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
    width: 55vmax; height: 55vmax; border-radius: 50%;
    background: radial-gradient(circle, rgba(135,206,250,.45) 0%, rgba(96,165,250,.28) 38%, transparent 68%);
    filter: blur(30px); animation: winBloom 18s ease-in-out infinite alternate; }
.vlogin-5 .vlogin-bg::after { content: ''; position: absolute; right: -12%; bottom: -12%; width: 42vmax; height: 42vmax; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,210,200,.22), transparent 65%); filter: blur(50px); }
@keyframes winBloom { from { transform: translate(-50%,-50%) scale(1); opacity: .9; } to { transform: translate(-50%,-52%) scale(1.08); opacity: 1; } }
.win-lock { position: relative; z-index: 3; margin: auto; text-align: center; color: #fff; transform: translateY(-3vh); }
.win-avatar { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1.5rem; overflow: hidden;
    background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.45);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 40px rgba(0,0,0,.4); backdrop-filter: blur(10px); }
.win-avatar img { width: 100%; height: 100%; object-fit: cover; } .win-avatar i { font-size: 3.4rem; color: rgba(255,255,255,.92); }
.win-name { font-size: 2.2rem; font-weight: 300; margin-bottom: 1.8rem; letter-spacing: .01em; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.win-form { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.win-pill { display: flex; align-items: center; width: 320px; max-width: 82vw; height: 44px;
    background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); border-radius: 6px;
    backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); padding: 0 .3rem 0 1rem;
    box-shadow: 0 4px 18px rgba(0,0,0,.18); transition: border-color .15s, background .15s; }
.win-pill:focus-within { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.7); }
.win-pill input { flex: 1 1 auto; border: none; background: transparent; outline: none; color: #fff; font-family: inherit; font-size: .98rem; height: 100%; }
.win-pill input::placeholder { color: rgba(255,255,255,.75); }
.win-pill input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 100px rgba(40,80,130,.6) inset; }
.win-go { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.18); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, transform .1s; }
.win-go:hover { background: rgba(255,255,255,.35); }
.win-go:active { transform: scale(.94); }
.win-opts { margin-top: 1.3rem; font-size: .84rem; color: rgba(255,255,255,.88); text-decoration: none; }
.win-opts:hover { text-decoration: underline; color: #fff; }
.win-tray { position: absolute; bottom: 1.5rem; right: 1.8rem; z-index: 3; display: flex; gap: 1.4rem; color: rgba(255,255,255,.85); font-size: 1.1rem; }

/* =====================================================================
 * 9 — macOS (lock screen autentico)
 * ===================================================================== */
.vlogin-9 { font-family: -apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #3b6ef5; }
.vlogin-9 .vlogin-bg { background: linear-gradient(150deg, #ff7a59 0%, #e0457b 22%, #8a3fff 46%, #3b6ef5 70%, #00c2ff 100%); }
.vlogin-9 .mac-pass input:-webkit-autofill, .vlogin-9 .mac-user:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 100px rgba(120,90,180,.5) inset; }
.vlogin-9 .vlogin-bg::after { content: ''; position: absolute; inset: 0; background: rgba(10,12,30,.28); backdrop-filter: saturate(120%); }
.mac-bar { position: absolute; top: 0; left: 0; right: 0; height: 28px; z-index: 4; display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.1rem; background: rgba(0,0,0,.28); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #fff; font-size: .82rem; }
.mac-bar i { margin: 0 .35rem; opacity: .92; }
.mac-lock { position: relative; z-index: 3; margin: auto; text-align: center; transform: translateY(-2vh); }
.mac-avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 1rem; overflow: hidden; background: rgba(255,255,255,.25);
    border: 2px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 34px rgba(0,0,0,.3); }
.mac-avatar img { width: 100%; height: 100%; object-fit: cover; } .mac-avatar i { font-size: 2.8rem; color: rgba(255,255,255,.92); }
.mac-form { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.mac-user { width: 230px; max-width: 78vw; height: 30px; text-align: center; border: none; border-radius: 8px; background: rgba(255,255,255,.16);
    color: #fff; font-family: inherit; font-size: .9rem; outline: none; }
.mac-user::placeholder { color: rgba(255,255,255,.75); }
.mac-pass { display: flex; align-items: center; width: 250px; max-width: 80vw; height: 36px; background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.4); border-radius: 18px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 0 .35rem 0 1rem; }
.mac-pass input { flex: 1 1 auto; border: none; background: transparent; outline: none; color: #fff; font-family: inherit; font-size: .9rem; height: 100%; }
.mac-pass input::placeholder { color: rgba(255,255,255,.75); }
.mac-go { width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,.85); color: #1d1d1f; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .8rem; transition: transform .15s; }
.mac-go:hover { transform: scale(1.08); }
.mac-hint { margin-top: 1rem; font-size: .8rem; color: rgba(255,255,255,.9); text-decoration: none; }
.mac-hint:hover { text-decoration: underline; }
.mac-dots { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: .5rem; }
.mac-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); }
.mac-dots span:first-child { background: #fff; }

/* =====================================================================
 * 6 — LINUX (GDM / GNOME — Debian)
 * ===================================================================== */
.vlogin-6 { font-family: 'Inter', 'Cantarell', system-ui, sans-serif; background: #0a1c20; }
.vlogin-6 .vlogin-bg {
    background:
        radial-gradient(70% 60% at 24% 18%, rgba(16,140,120,.5), transparent 60%),
        radial-gradient(60% 60% at 82% 82%, rgba(20,90,130,.45), transparent 60%),
        radial-gradient(50% 50% at 62% 35%, rgba(215,10,83,.16), transparent 55%),
        linear-gradient(135deg, #0b2a2c, #0a1c24 60%, #0a141c);
}
.gnome-top { position: absolute; top: 8vh; left: 0; right: 0; z-index: 3; text-align: center; color: #fff; }
.gnome-clock { font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 200; letter-spacing: .01em; line-height: 1; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.gnome-date { font-size: 1.05rem; font-weight: 400; margin-top: .4rem; color: rgba(255,255,255,.85); text-transform: capitalize; }
.gnome-lock { position: relative; z-index: 3; margin: auto; text-align: center; }
.gnome-avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 1rem; overflow: hidden;
    background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.35);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 34px rgba(0,0,0,.4); }
.gnome-avatar img { width: 100%; height: 100%; object-fit: cover; } .gnome-avatar i { font-size: 2.7rem; color: rgba(255,255,255,.9); }
.gnome-form { display: flex; flex-direction: column; align-items: center; gap: .65rem; }
.gnome-user { width: 300px; max-width: 82vw; height: 38px; text-align: center; border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px; background: rgba(255,255,255,.07); color: #fff; font-family: inherit; font-size: .95rem; outline: none; transition: all .15s; }
.gnome-user::placeholder { color: rgba(255,255,255,.55); }
.gnome-user:focus { border-color: #3584e4; background: rgba(255,255,255,.12); box-shadow: 0 0 0 3px rgba(53,132,228,.3); }
.gnome-pass { display: flex; align-items: center; width: 300px; max-width: 82vw; height: 42px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 9px; padding: 0 .3rem 0 1rem; transition: all .15s; }
.gnome-pass:focus-within { border-color: #3584e4; background: rgba(255,255,255,.12); box-shadow: 0 0 0 3px rgba(53,132,228,.3); }
.gnome-pass input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; outline: none; color: #fff; font-family: inherit; font-size: .95rem; height: 100%; }
.gnome-pass input::placeholder { color: rgba(255,255,255,.55); }
.gnome-go { width: 30px; height: 30px; border-radius: 7px; border: none; background: #3584e4; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .82rem; flex-shrink: 0; transition: background .15s, transform .1s; }
.gnome-go:hover { background: #4a90e8; } .gnome-go:active { transform: scale(.94); }
.gnome-hint { margin-top: 1rem; font-size: .82rem; color: rgba(255,255,255,.8); text-decoration: none; }
.gnome-hint:hover { text-decoration: underline; color: #fff; }
.gnome-pass input:-webkit-autofill, .gnome-user:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 100px rgba(20,60,60,.7) inset; caret-color: #fff; }
.gnome-brand { position: absolute; bottom: 1.5rem; left: 1.8rem; z-index: 3; display: flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.82); font-size: .92rem; }
.gnome-brand i { color: #d70a53; font-size: 1.15rem; }
.gnome-tray { position: absolute; bottom: 1.5rem; right: 1.8rem; z-index: 3; display: flex; gap: 1.4rem; color: rgba(255,255,255,.82); font-size: 1.1rem; }

/* =====================================================================
 * 7 — HACKER (consola Matrix)
 * ===================================================================== */
.vlogin-7 { font-family: var(--vl-mono); background: #000; }
.vlogin-7 .vlogin-bg { background: #000; }
.vlogin-7 .vlogin-fx { display: block; }
.vlogin-7 .hack-line input:-webkit-autofill { -webkit-text-fill-color: #9dffc4; -webkit-box-shadow: 0 0 0 100px #001400 inset; caret-color: #00ff66; }
.hack-wrap { position: relative; z-index: 3; margin: auto; padding: 1.5rem; width: 100%; max-width: 460px; }
.hack-card { width: 100%; background: rgba(0,8,0,.86); border: 1px solid #00ff66; border-radius: 8px; overflow: hidden;
    box-shadow: 0 0 50px rgba(0,255,102,.4), inset 0 0 40px rgba(0,255,102,.05); }
.hack-bar { display: flex; align-items: center; padding: .55rem .9rem; background: rgba(0,255,102,.1); border-bottom: 1px solid rgba(0,255,102,.35); }
.hack-bar > span { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #00ff66; margin-right: .4rem; }
.hack-bar em { margin-left: .6rem; color: #00ff66; font-style: normal; font-size: .76rem; text-shadow: 0 0 8px rgba(0,255,102,.7); }
.hack-body { padding: 1.4rem 1.5rem 1.6rem; color: #00ff66; }
.hack-log { font-size: .82rem; line-height: 1.8; margin-bottom: 1.1rem; }
.hack-log b { color: #c8ffd9; }
.hack-log .hack-warn { color: #ffe14d; text-shadow: 0 0 8px rgba(255,225,77,.6); }
.hack-line { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .8rem; border-bottom: 1px solid rgba(0,255,102,.25); padding-bottom: .35rem; }
.hack-prompt { color: #00ff66; text-shadow: 0 0 8px rgba(0,255,102,.7); white-space: nowrap; }
.hack-line input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; outline: none; color: #9dffc4; font-family: var(--vl-mono); font-size: .95rem; caret-color: #00ff66; }
.hack-line input::placeholder { color: rgba(0,255,102,.35); }
.hack-btn { width: 100%; margin-top: 1.2rem; padding: .8rem; border: 1px solid #00ff66; background: transparent; color: #00ff66;
    font-family: var(--vl-mono); font-size: .9rem; letter-spacing: .08em; cursor: pointer; border-radius: 4px; box-shadow: 0 0 18px rgba(0,255,102,.3); transition: all .15s; }
.hack-btn:hover { background: rgba(0,255,102,.14); box-shadow: 0 0 30px rgba(0,255,102,.55); }
.hack-help { display: inline-block; margin-top: 1rem; color: #5aff9b; text-decoration: none; font-size: .82rem; }
.hack-help:hover { text-shadow: 0 0 8px rgba(0,255,102,.7); }

/* =====================================================================
 * Responsive
 * ===================================================================== */
@media (max-width: 880px) {
    .vlogin-1 .vlogin-brand, .vlogin-10 .vlogin-brand { display: none; }
    .vlogin-1 .vlogin-panel, .vlogin-10 .vlogin-panel { flex: 1 1 100%; }
    .vlogin-1 .vlogin-bg { background: radial-gradient(1000px 500px at 50% -10%, #eef1f6, #e7ebf3); }
    .vlogin-1 .vlogin-card { background: #fff; box-shadow: 0 20px 60px rgba(15,23,42,.12); }
}