/* Art direction A "Tinta y latón" on the login and intro screens */
@font-face { font-family: 'KC Stencil'; src: url('../../fonts/art-big-shoulders-stencil-display.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'KC Text'; src: url('../../fonts/art-alegreya-sans-500.woff2') format('woff2'); font-weight: 100 599; font-display: swap; }
@font-face { font-family: 'KC Text'; src: url('../../fonts/art-alegreya-sans-700.woff2') format('woff2'); font-weight: 600 1000; font-display: swap; }
.login-screen { background-color: #0E131B; }
.login-screen::before { background: radial-gradient(ellipse at center 40%, rgba(14,19,27,.45) 0%, rgba(14,19,27,.88) 100%); }
.login-logo-img, .intro-hero .intro-logo { filter: drop-shadow(0 4px 0 #0E131B); animation-name: login-fade-in; }
.login-subtitle { font-family: 'KC Stencil', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .3em; color: #EFE3C8; text-shadow: 0 2px 0 #0E131B; }
.login-panel.panel { background: linear-gradient(180deg, #2a3746, #1F2A36); backdrop-filter: none; -webkit-backdrop-filter: none; border: 2px solid #0E131B; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(239,227,200,.16), 0 4px 0 #0E131B, 0 18px 40px rgba(0,0,0,.6); animation: login-fade-in 1.5s ease-out 2.5s both; font-family: 'KC Text', sans-serif; }
.login-panel .panel-header, .login-panel .panel-header span { font-family: 'KC Stencil', sans-serif !important; font-weight: 800; font-size: 16px; letter-spacing: .14em; color: #E8A54B !important; border-color: #0E131B !important; }
.login-panel label, .login-panel .input-label { font-family: 'KC Stencil', sans-serif !important; font-weight: 800; font-size: 15px; letter-spacing: .12em; color: #EFE3C8 !important; }
.login-panel .input-field { background: #0E131B !important; border: 2px solid #0E131B !important; border-radius: 2px !important; box-shadow: inset 0 2px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(239,227,200,.18) !important; color: #EFE3C8 !important; font-family: 'KC Text', sans-serif !important; font-size: 17px !important; min-height: 48px; }
.login-panel .input-field:focus { box-shadow: inset 0 2px 0 rgba(0,0,0,.5), 0 0 0 2px #5FC9BE !important; }
.login-panel #login-btn, .login-panel .btn-primary { background: #E8A54B !important; color: #0E131B !important; border: 2px solid #0E131B !important; border-radius: 3px !important; box-shadow: inset 0 2px 0 rgba(255,240,205,.55), inset 0 -4px 0 rgba(120,70,10,.35), 0 5px 0 #0E131B !important; font-family: 'KC Stencil', sans-serif !important; font-weight: 800 !important; font-size: 22px !important; letter-spacing: .12em !important; min-height: 54px; text-shadow: none !important; }
.login-panel #login-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #0E131B !important; }
.login-panel p, .login-panel #login-hint { font-family: 'KC Text', sans-serif; font-size: 15px !important; color: #c9bea3 !important; }
.login-panel .kc-switch .slider { border-radius: 3px !important; }
.login-star { border-radius: 0; }
.login-logo-img { width: min(340px, 72vw); }