/* Approved login v1. Only the shared sign-in screen; panel/lesson styles are independent. */
body.login-page{
  --color-text:#2c3036;
  --color-muted:#626975;
  --color-placeholder:#727a86;
  --color-surface:#fcfbf8;
  --color-border:#ced3db;
  --color-brand:#d20a50;
  --color-brand-hover:#b90946;
  --focus-ring:#d20a5026;
}
.login-page .auth-layout{grid-template-columns:minmax(0,51fr) minmax(0,49fr);background:var(--color-surface)}
.login-page .visual-panel{grid-column:1;grid-row:1;background-image:url('../../assets/login-v1/images/giris-piyano-tablet.png');background-position:center 64%}
.login-page .auth-panel{grid-column:2;grid-row:1;padding:40px;min-height:100svh}
.login-page .auth-content{width:100%;max-width:460px}
.login-page .brand-logo{width:320px;max-width:100%;height:auto;margin:0 0 40px;mix-blend-mode:multiply}
.login-page .auth-view{display:none}
.login-page .auth-view.is-active{display:block}
.login-page .auth-header{margin:0 0 32px;text-align:left}
.login-page .auth-header h1{margin:0 0 8px;font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-.025em}
.login-page .auth-header p{font-size:16px;line-height:1.5}
.login-page .auth-form{gap:24px}
.login-page .form-field{gap:8px}
.login-page .form-field>label{font-size:14px;font-weight:650;line-height:1.5}
.login-page .input-wrap{min-height:56px;border-width:1px;border-radius:12px;gap:12px;padding:0 18px;background:#fff}
.login-page .input-wrap svg{width:24px;height:24px;stroke:#8a929e}
.login-page .input-wrap input{height:54px;background:#fff;color:var(--color-text);font-size:16px;line-height:1.5}
.login-page .input-wrap input:autofill{background:#fff;color:var(--color-text);box-shadow:0 0 0 1000px #fff inset}
.login-page .input-wrap input:-webkit-autofill{-webkit-text-fill-color:var(--color-text);-webkit-box-shadow:0 0 0 1000px #fff inset;caret-color:var(--color-text)}
.login-page .input-wrap:focus-within{border-color:var(--color-brand);box-shadow:0 0 0 4px var(--focus-ring)}
.login-page .password-wrap{padding-right:0}
.login-page .password-toggle{align-self:stretch;min-width:76px;min-height:44px;padding:0 14px;border-left:1px solid #e0e3e8;font-size:13px}
.login-page .form-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;min-height:44px;margin-top:-8px;text-align:left}
.login-page .remember-label{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;line-height:1.5;color:var(--color-muted);cursor:pointer}
.login-page #remember-me{position:relative;appearance:none;width:20px;height:20px;margin:0;flex-shrink:0;border:1px solid #aeb7c3;border-radius:4px;background:#fff;cursor:pointer}
.login-page #remember-me:checked{border-color:var(--color-brand);background:var(--color-brand)}
.login-page #remember-me:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.login-page #remember-me:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}
.login-page .forgot-link{min-height:44px;font-size:14px;line-height:1.5}
.login-page .form-message{margin:0;color:var(--color-error);line-height:1.5;overflow-wrap:anywhere}
.login-page .auth-form[aria-busy=true] .form-message{color:var(--color-muted)}
.login-page .primary-button{min-height:56px;border-radius:12px;font-size:16px;line-height:1.5}
.login-page button:disabled{cursor:wait;opacity:.75}
.login-page .view-switch{gap:6px 10px;margin-top:28px;font-size:14px;line-height:1.6}
.login-page .view-switch .text-link{min-height:24px}
.login-page .auth-panel.is-invite .brand-logo{margin-bottom:40px}
.login-page .invite-header .invite-eyebrow{margin-bottom:16px;font-size:12px}
.login-page .invite-header h1{font-size:32px;line-height:1.2}
.login-page .invite-note{margin-top:24px;font-size:14px}
.login-page .invite-back{justify-content:flex-start;margin-top:24px}
.login-page #register-view .auth-header{margin-bottom:24px}
.login-page #register-view .auth-form{gap:20px}
.login-page #parent-fields{display:grid;gap:16px}
.login-page #parent-fields>p{margin:0;line-height:1.5}
@media(max-height:800px) and (min-width:900px){
  .login-page .auth-panel{padding:24px}
  .login-page .brand-logo,.login-page .auth-panel.is-invite .brand-logo{margin-bottom:24px}
}
@media(max-width:899px){
  .login-page .auth-layout{grid-template-columns:1fr;grid-template-rows:auto}
  .login-page .visual-panel{display:none}
  .login-page .auth-panel{grid-column:1;grid-row:1;padding:40px 24px}
}
@media(max-width:520px){
  .login-page .auth-panel{padding:32px 24px}
  .login-page .brand-logo,.login-page .auth-panel.is-invite .brand-logo{margin-bottom:32px}
  .login-page .auth-header h1,.login-page .invite-header h1{font-size:28px}
  .login-page .input-wrap{padding-left:14px;gap:10px}
}
@media(max-width:520px) and (pointer:coarse){
 .login-page .auth-panel{padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
 .login-page .brand-logo{aspect-ratio:192/79;object-fit:contain}
}
@media(forced-colors:active){
  .login-page #remember-me{appearance:auto}
  .login-page #remember-me:checked::after{display:none}
}