/* css/style2.css -- Solus supplementary */

/* ===== TOAST INTERNALS ===== */
.toast-icon{color:var(--brk);background:var(--brk-l);padding:7px;border-radius:8px;flex-shrink:0}
.toast-text{flex:1;min-width:0}
.toast-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast-sub{font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast-close{color:var(--hint);background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;flex-shrink:0;transition:color .15s}
.toast-close:hover{color:var(--text)}

/* ===== SPACED REPETITION OVERLAY ===== */
.sr-ov{display:none;position:fixed;inset:0;z-index:210;align-items:flex-end;background:rgba(0,0,0,.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sr-ov.open{display:flex}
.sr-sheet{background:var(--s1);border-radius:22px 22px 0 0;padding:22px 24px calc(var(--sab)+24px);width:100%;border-top:1px solid var(--border);box-shadow:0 -8px 40px rgba(0,0,0,.3)}
.sr-handle{width:36px;height:4px;background:var(--s3);border-radius:2px;margin:0 auto 20px}
.sr-progress{display:flex;gap:4px;margin-bottom:16px}
.sr-prog-dot{flex:1;height:3px;border-radius:2px;background:var(--s3)}
.sr-prog-dot.done{background:var(--log)}
.sr-topic{font-size:18px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px;line-height:1.45}
.sr-subj{font-size:12px;color:var(--muted);margin-bottom:20px}
.sr-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sr-btn{padding:15px;border:none;border-radius:var(--r-lg);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .12s}
.sr-btn.nope{background:var(--red-l);color:var(--red);border:1px solid rgba(204,64,56,.2)}
.sr-btn.got{background:var(--brk-l);color:var(--brk);border:1px solid rgba(60,114,80,.25)}
.sr-btn:hover{opacity:.84}
.sr-btn:active{transform:scale(.97)}
.sr-card-hint{font-size:11px;color:var(--hint);margin-top:8px;text-align:center}

/* ===== THEME TOGGLE ===== */
.theme-switch-sm{
  --toggle-size:16px;
  --container-width:4.4em;--container-height:2em;--container-radius:6.25em;
  --container-light-bg:#4a90d9;--container-night-bg:#1D1F2C;
  --circle-container-diameter:2.6em;--sun-moon-diameter:1.65em;
  --sun-bg:#ECCA2F;--moon-bg:#C4C9D1;--spot-color:#959DB1;
  --circle-container-offset:calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color:#fff;--clouds-color:#F3FDFF;--back-clouds-color:#AACADF;
  --transition:.5s cubic-bezier(0,-.02,.4,1.25);--circle-transition:.3s cubic-bezier(0,-.02,.35,1.17);
  flex-shrink:0;
}
.theme-switch-sm,.theme-switch-sm *,.theme-switch-sm *::before,.theme-switch-sm *::after{box-sizing:border-box;margin:0;padding:0;font-size:var(--toggle-size)}
.theme-switch-sm .ts-container{width:var(--container-width);height:var(--container-height);background-color:var(--container-light-bg);border-radius:var(--container-radius);overflow:hidden;cursor:pointer;box-shadow:0em -.062em .062em rgba(0,0,0,.25),0em .062em .125em rgba(255,255,255,.94);transition:var(--transition);position:relative}
.theme-switch-sm .ts-container::before{content:"";position:absolute;z-index:1;inset:0;box-shadow:0em .05em .187em rgba(0,0,0,.25) inset;border-radius:var(--container-radius)}
.theme-switch-sm .ts-chk{display:none}
.theme-switch-sm .ts-circle{width:var(--circle-container-diameter);height:var(--circle-container-diameter);background-color:rgba(255,255,255,.1);position:absolute;left:var(--circle-container-offset);top:var(--circle-container-offset);border-radius:var(--container-radius);box-shadow:inset 0 0 0 3.375em rgba(255,255,255,.1),0 0 0 .625em rgba(255,255,255,.1),0 0 0 1.25em rgba(255,255,255,.1);display:flex;transition:var(--circle-transition);pointer-events:none}
.theme-switch-sm .ts-sunmoon{pointer-events:auto;position:relative;z-index:2;width:var(--sun-moon-diameter);height:var(--sun-moon-diameter);margin:auto;border-radius:var(--container-radius);background-color:var(--sun-bg);box-shadow:.062em .062em .062em 0em rgba(254,255,239,.61) inset,0em -.062em .062em 0em #a1872a inset;filter:drop-shadow(.062em .125em .125em rgba(0,0,0,.25));overflow:hidden;transition:var(--transition)}
.theme-switch-sm .ts-moon{transform:translateX(100%);width:100%;height:100%;background-color:var(--moon-bg);border-radius:inherit;transition:var(--transition);position:relative}
.theme-switch-sm .ts-spot{position:absolute;top:.75em;left:.312em;width:.75em;height:.75em;border-radius:var(--container-radius);background-color:var(--spot-color)}
.theme-switch-sm .ts-spot:nth-of-type(2){width:.375em;height:.375em;top:.937em;left:1.375em}
.theme-switch-sm .ts-spot:nth-last-of-type(3){width:.25em;height:.25em;top:.312em;left:.812em}
.theme-switch-sm .ts-clouds{width:1.25em;height:1.25em;background-color:var(--clouds-color);border-radius:var(--container-radius);position:absolute;bottom:-.625em;left:.312em;box-shadow:.937em .312em var(--clouds-color),-.312em -.312em var(--back-clouds-color),1.437em .375em var(--clouds-color),.5em -.125em var(--back-clouds-color),2.187em 0 var(--clouds-color),1.25em -.062em var(--back-clouds-color),2.937em .312em var(--clouds-color),2em -.312em var(--back-clouds-color),3.625em -.062em var(--clouds-color),2.625em 0em var(--back-clouds-color),4.5em -.312em var(--clouds-color),3.375em -.437em var(--back-clouds-color),4.625em -1.75em 0 .437em var(--clouds-color),4em -.625em var(--back-clouds-color),4.125em -2.125em 0 .437em var(--back-clouds-color);transition:.5s cubic-bezier(0,-.02,.4,1.25)}
.theme-switch-sm .ts-stars{position:absolute;color:var(--stars-color);top:-100%;left:.312em;width:2.75em;height:auto;transition:var(--transition)}
.theme-switch-sm .ts-chk:checked + .ts-container{background-color:var(--container-night-bg)}
.theme-switch-sm .ts-chk:checked + .ts-container .ts-circle{left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter))}
.theme-switch-sm .ts-chk:checked + .ts-container .ts-moon{transform:translate(0)}
.theme-switch-sm .ts-chk:checked + .ts-container .ts-clouds{bottom:-4.062em}
.theme-switch-sm .ts-chk:checked + .ts-container .ts-stars{top:50%;transform:translateY(-50%)}

/* ===== AUTH PAGE ===== */
body.auth-page{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100dvh;height:auto;overflow-y:auto;overflow-x:hidden;
  background:var(--bg);
  padding:env(safe-area-inset-top, 16px) 16px env(safe-area-inset-bottom, 16px);
}

/* On very small screens allow scrolling */
@media(max-height:600px){
  body.auth-page{
    justify-content:flex-start;
    padding-top:max(env(safe-area-inset-top,0px), 16px);
  }
}

.auth-card{
  width:100%;
  max-width:400px;
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px 20px;
  position:relative;z-index:1;
  box-shadow:0 8px 40px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.2);
  /* Ensure card doesn't overflow viewport on small screens */
  box-sizing:border-box;
}

@media(min-width:480px){
  .auth-card{padding:32px 28px;border-radius:22px}
}

/* Prevent zoom on iOS for inputs */
.auth-card input{
  font-size:16px !important;
}

.auth-logo{font-size:24px;font-weight:800;letter-spacing:-1.5px;color:var(--text);margin-bottom:4px}
@media(min-width:480px){.auth-logo{font-size:28px}}
.auth-logo span{color:var(--acc-t)}
.auth-sub{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.5}
@media(min-width:480px){.auth-sub{margin-bottom:22px}}

.auth-tabs{
  display:flex;
  background:var(--s2);
  border-radius:10px;
  padding:3px;
  margin-bottom:18px;
}
@media(min-width:480px){.auth-tabs{margin-bottom:22px}}

.auth-tab{
  flex:1;padding:9px 6px;border:none;background:none;
  font-family:inherit;font-size:13px;font-weight:600;
  color:var(--muted);cursor:pointer;border-radius:8px;
  transition:all .2s;
  /* Touch-friendly minimum target size */
  min-height:40px;
}
.auth-tab.active{
  background:var(--s0);color:var(--text);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}

.auth-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.auth-field label{
  font-size:11px;font-weight:700;
  color:var(--acc-t);letter-spacing:.3px;text-transform:uppercase;
}
.auth-field input{
  background:var(--s0);border:1.5px solid var(--border);
  border-radius:var(--r);padding:13px 14px;
  font-family:inherit;
  color:var(--text);outline:none;
  transition:border-color .2s,box-shadow .2s;
  width:100%;
  -webkit-appearance:none;appearance:none;
  /* prevent zoom on iOS */
  font-size:16px;
}
.auth-field input:focus{
  border-color:rgba(16,152,247,.45);
  box-shadow:0 0 0 3px rgba(16,152,247,.08);
}
.auth-field input::placeholder{color:var(--hint)}

.auth-error{
  background:var(--red-l);border:1px solid rgba(204,64,56,.2);
  border-radius:var(--r);padding:10px 12px;
  font-size:12px;color:var(--red);
  margin-bottom:12px;display:none;line-height:1.5;
}
.auth-error.show{display:block}

.auth-submit-btn{
  width:100%;padding:15px;
  background:linear-gradient(135deg,var(--acc),#0a7ad4);
  color:#fff;border:none;border-radius:var(--r-lg);
  font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;transition:all .2s;margin-bottom:10px;
  box-shadow:0 4px 16px rgba(16,152,247,.25);
  -webkit-appearance:none;appearance:none;
  /* Touch-friendly */
  min-height:50px;
}
.auth-submit-btn:hover{box-shadow:0 6px 24px rgba(16,152,247,.35)}
.auth-submit-btn:active{transform:scale(.98);opacity:.9}
.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

.auth-divider{
  display:flex;align-items:center;gap:10px;
  margin:12px 0;color:var(--hint);font-size:12px;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}

.auth-google-btn{
  width:100%;padding:13px;background:var(--s0);
  border:1.5px solid var(--border);border-radius:var(--r-lg);
  font-family:inherit;font-size:14px;font-weight:600;color:var(--text);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all .2s;margin-bottom:4px;
  -webkit-appearance:none;appearance:none;
  min-height:48px;
}
.auth-google-btn:hover{background:var(--s2);border-color:rgba(16,152,247,.3)}
.auth-google-btn:active{transform:scale(.98)}
.auth-google-icon{width:18px;height:18px;flex-shrink:0}

.auth-forgot{
  background:none;border:none;font-family:inherit;font-size:12px;
  color:var(--acc-t);cursor:pointer;padding:4px 0;display:block;
  text-align:right;margin-top:-4px;margin-bottom:12px;
  transition:opacity .15s;
  -webkit-appearance:none;
}
.auth-forgot:hover{opacity:.75}

.auth-skip-btn{
  background:none;border:none;font-family:inherit;font-size:13px;
  color:var(--hint);cursor:pointer;padding:14px;text-align:center;
  width:100%;margin-top:6px;display:block;transition:color .15s;
  -webkit-appearance:none;
}
.auth-skip-btn:hover{color:var(--muted)}