:root{
  --bg:#0e1315;
  --grid:#122026;
  --card:#182426;
  --accent-start:#18c4c0;
  --accent-end:#13a7a3;
  --muted:#93a1a1;
}

html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;color:#cbd7d7}
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:48px 48px,48px 48px;
  display:flex;flex-direction:column;min-height:100vh;
}

.page{flex:1;position:relative;}
.site-header{position:absolute;left:24px;top:18px;display:flex;gap:16px;align-items:center}
.logo{font-weight:700;color:var(--accent-start);letter-spacing:1px}
.badge{font-size:11px;padding:6px 10px;border-radius:6px;background:rgba(19,167,163,0.08);border:1px solid rgba(19,167,163,0.12);color:var(--accent-start)}

.center{display:flex;align-items:center;justify-content:center;height:100vh}
.card{width:420px;max-width:90%;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:28px 32px;box-shadow:0 8px 30px rgba(2,8,10,0.6);border:1px solid rgba(20,60,60,0.3)}
.card-title{margin:6px 0 4px 0;font-size:22px;font-weight:700;text-align:center}
.card-sub{text-align:center;font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:18px}

.kc-form{margin-top:6px}
.field{margin-bottom:16px}
.field-label{display:block;font-size:11px;color:var(--muted);margin-bottom:8px}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .icon{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.12);margin-right:10px}
.input-wrap input{flex:1;padding:10px 12px;border-radius:8px;background:rgba(0,0,0,0.12);border:1px solid rgba(255,255,255,0.03);color:#e6f3f3;outline:none}
.input-wrap input::placeholder{color:rgba(200,220,220,0.3)}
.input-wrap .eye{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:6px 8px;margin-left:8px;border-radius:6px}

.actions{margin-top:10px}
.btn{width:100%;padding:10px 14px;border-radius:8px;border:0;font-weight:600;background:linear-gradient(90deg,var(--accent-start),var(--accent-end));color:#062626;cursor:pointer;box-shadow:0 6px 18px rgba(20,160,156,0.18)}

.site-footer{position:fixed;left:18px;bottom:14px;right:18px;pointer-events:none}
.bottom-left{position:absolute;left:0;bottom:0;font-size:11px;color:rgba(160,200,200,0.2)}
.bottom-right{position:absolute;right:0;bottom:0;font-size:11px;color:rgba(160,200,200,0.2);text-align:right}

/* small responsive tweak */
@media (max-width:480px){.card{padding:20px}}

/* Hide Keycloak header / locale controls if present */
#kc-header, .kc-header, #kc-locale, .kc-locale { display: none !important; }

/* Remove any top spacing produced by Keycloak base layout */
header:not(.site-header) { margin: 0 !important; padding: 0 !important; height: auto !important; }
#kc-page-title { display: none !important; margin: 0 !important; padding: 0 !important; }
#kc-header-wrapper, #kc-header { margin: 0 !important; padding: 0 !important; height: 0 !important; }
#kc-content, #kc-content-wrapper { margin-top: 0 !important; padding-top: 0 !important; }
.page { margin-top: 0 !important; }