:root{
  --canvas-default:#0d1117;
  --canvas-subtle:#161b22;
  --canvas-inset:#010409;
  --border-default:#30363d;
  --border-muted:#21262d;
  --fg-default:#e6edf3;
  --fg-muted:#8b949e;
  --fg-subtle:#6e7681;
  --accent-fg:#58a6ff;
  --accent-emphasis:#1f6feb;
  --success-fg:#3fb950;
  --success-emphasis:#238636;
  --danger-fg:#f85149;
  --danger-emphasis:#da3633;
  --attention-fg:#d29922;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --shadow-lg:0 20px 50px rgba(1,4,9,0.6);
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box;}

@keyframes fadeInUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes drift{0%,100%{transform:translate(0,0);}50%{transform:translate(-12px,10px);}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}

html, body.workbridge-body{
  margin:0;background:var(--canvas-default);color:var(--fg-default);
  font-family:var(--font-sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100vh;
}

body.workbridge-body{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:0;position:relative;overflow-x:hidden;
}

a{color:var(--accent-fg);text-decoration:none;transition:color 0.15s var(--ease);}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--accent-emphasis);outline-offset:2px;border-radius:4px;}

/* ambient background accents, same drift used on the app's own auth pages */
.corner-accent{
  position:fixed;top:0;right:0;width:420px;height:420px;pointer-events:none;
  background:radial-gradient(circle at top right, rgba(63,185,80,0.12), transparent 70%);
  animation:drift 14s ease-in-out infinite;z-index:0;
}
.corner-accent-2{
  position:fixed;bottom:-100px;left:-100px;width:380px;height:380px;pointer-events:none;
  background:radial-gradient(circle, rgba(88,166,255,0.08), transparent 70%);
  animation:drift 18s ease-in-out infinite reverse;z-index:0;
}

/* brand header above the card */
.oc-topbar{padding:28px 0 8px;display:flex;justify-content:center;position:relative;z-index:1;width:100%;}
.oc-logo{display:flex;align-items:center;gap:9px;color:var(--fg-default);font-weight:800;font-size:20px;letter-spacing:-0.01em;}
.oc-logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;background:#b8862f;border-radius:6px;
  color:var(--canvas-default);font-weight:800;font-size:0.85rem;
}

/* main card wrapper — Keycloak wraps everything in #kc-container / .login-pf-page */
.login-pf-page{
  background:var(--canvas-default) !important;
  display:flex;flex-direction:column;align-items:center;
  min-height:100vh;position:relative;z-index:1;
}
#kc-container, .login-pf-page .container{
  width:100%;max-width:400px;margin:0 auto;padding:0 16px;position:relative;z-index:1;
}

#kc-content, .card-pf{
  width:100%;
  background:var(--canvas-subtle);border:1px solid var(--border-default);
  border-radius:10px;padding:28px;margin-bottom:16px;
  box-shadow:var(--shadow-lg);animation:fadeInUp 0.5s var(--ease) both;
}

#kc-page-title, .login-pf-header h1{
  font-size:24px;font-weight:400;text-align:center;margin:0 0 22px;color:var(--fg-default);
  letter-spacing:-0.2px;
}

/* alerts / messages Keycloak injects (error, warning, success, info) */
.alert{
  display:flex;align-items:flex-start;gap:8px;border-radius:6px;padding:10px 12px;
  font-size:13px;margin-bottom:16px;animation:fadeInUp 0.25s var(--ease) both;
}
.alert-error, .alert.kcFeedbackErrorClass{
  background:rgba(248,81,73,0.1);border:1px solid rgba(248,81,73,0.4);color:#ffa198;
}
.alert-warning{background:rgba(210,153,34,0.1);border:1px solid rgba(210,153,34,0.4);color:var(--attention-fg);}
.alert-success{background:rgba(63,185,80,0.1);border:1px solid rgba(63,185,80,0.4);color:var(--success-fg);}
.alert-info{background:rgba(88,166,255,0.1);border:1px solid rgba(88,166,255,0.4);color:var(--accent-fg);}
.pf-icon, .alert .kc-feedback-text{margin:0;}

/* form fields — mirrors the .field pattern from the app's own login/signup pages */
.field, .form-group{margin-bottom:16px;}
.field label, .form-group label, .control-label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:14px;font-weight:600;color:var(--fg-default);margin-bottom:6px;
}
.field label a, .control-label a{font-size:12px;font-weight:400;}

input[type="text"], input[type="email"], input[type="password"], input.form-control{
  width:100%;background:var(--canvas-inset) !important;border:1px solid var(--border-default) !important;
  color:var(--fg-default) !important;border-radius:6px !important;padding:8px 12px !important;font-size:14px;
  font-family:var(--font-sans);outline:none;box-shadow:none !important;
  transition:border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
input:hover{border-color:#484f58 !important;}
input:focus{border-color:var(--accent-emphasis) !important;box-shadow:0 0 0 3px rgba(31,111,235,0.3) !important;}
input::placeholder{color:var(--fg-subtle);}

.checkbox, .checkbox label{color:var(--fg-muted);font-size:13px;font-weight:400;display:flex;align-items:center;gap:6px;}
.checkbox input[type="checkbox"]{width:auto;accent-color:var(--success-fg);}

/* primary submit button */
input[type="submit"], .btn-block, #kc-login{
  width:100%;background:var(--success-emphasis);border:1px solid rgba(240,246,252,0.1);
  color:#fff !important;border-radius:6px;padding:9px 0;font-size:14px;font-weight:500;
  cursor:pointer;font-family:var(--font-sans);margin-top:4px;
  transition:background 0.15s var(--ease), transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
  box-shadow:0 1px 2px rgba(1,4,9,0.4);
}
input[type="submit"]:hover, .btn-block:hover, #kc-login:hover{
  background:#2ea043;box-shadow:0 4px 14px rgba(46,160,67,0.4);
}
input[type="submit"]:active, .btn-block:active{transform:translateY(1px);}

/* secondary / back links under the form */
#kc-form-options{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--fg-muted);margin:12px 0;flex-wrap:wrap;gap:6px;
}
#kc-registration, #kc-info{
  text-align:center;font-size:13px;color:var(--fg-muted);margin-top:4px;
}

/* divider row above social/identity providers */
#kc-social-providers{margin-top:18px;}
.login-pf-social-section{
  display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:var(--fg-subtle);font-size:12px;
}
.login-pf-social-section::before, .login-pf-social-section::after{content:"";flex:1;height:1px;background:var(--border-default);}

#kc-social-providers ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
#kc-social-providers .zocial, .btn-social{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--canvas-default);border:1px solid var(--border-default);
  color:var(--fg-default) !important;border-radius:6px;padding:8px 0;font-size:13px;
  cursor:pointer;font-family:var(--font-sans);
  transition:background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
}
#kc-social-providers .zocial:hover, .btn-social:hover{background:#21262d;border-color:#8b949e;text-decoration:none;}
#kc-social-providers .zocial:active{transform:translateY(1px);}

/* card below the main card, e.g. "New to opencommits? Create an account." */
.oc-below-card{
  width:100%;max-width:400px;margin:0 auto 16px;text-align:center;
  background:var(--canvas-default);border:1px solid var(--border-default);
  border-radius:8px;padding:16px;font-size:14px;color:var(--fg-muted);
  animation:fadeInUp 0.5s var(--ease) 0.05s both;position:relative;z-index:1;
}

/* password reset / OTP / update-password screens reuse the same field + card system */
#kc-totp-secret-key, .kc-totp-secret-key{
  font-family:var(--font-mono);background:var(--canvas-inset);border:1px solid var(--border-default);
  border-radius:6px;padding:4px 8px;color:var(--accent-fg);
}

/* required-field asterisk */
.required{color:var(--danger-fg);margin-left:2px;}

/* footer language selector / try again link Keycloak sometimes injects */
#kc-locale, .login-pf-page-footer{
  text-align:center;color:var(--fg-subtle);font-size:12px;padding:24px 0;position:relative;z-index:1;
}
#kc-locale a{color:var(--fg-muted);}