/* ═══════════════════════════════════════════════════════
   UStudy — Shared Stylesheet
   Подключается во всех страницах: index, select, admin, study
   ══════════════════════════════════════════════════════= */

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Design tokens ─────────────────────────────────────── */
:root{
  --bg:      #0D1B3E;
  --card:    #111E45;
  --paper:   #F5F7FB;
  --paper2:  #EFF2F8;
  --border:  rgba(255,255,255,.1);
  --border2: rgba(0,0,0,.08);

  --accent:  #1B4FCC;
  --accent2: #2560E0;
  --accent-bg: rgba(27,79,204,.08);

  --psy:     #7B3FA8;
  --psy-bg:  rgba(123,63,168,.08);

  --ink:     #E8EDF8;
  --ink-mid: #C0CEDF;
  --ink-pale:#A8B3CC;

  --ff:  'Noto Sans', sans-serif;
  --ffs: 'Noto Sans', sans-serif;
  --tr:  all .18s ease;
  --r:   10px;
  --sh-sm: 0 2px 8px rgba(0,0,0,.12);
}

/* ── Base ───────────────────────────────────────────────── */
body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ── Logo ───────────────────────────────────────────────── */
.ustudylogo{height:32px;width:auto;display:block;filter:brightness(0) invert(1)}
.ustudylogo-sm{height:24px;width:auto;display:block;filter:brightness(0) invert(1)}

/* ── Topbar (shared across select, study, admin) ────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;height:52px;
  background:rgba(13,27,62,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:12px;z-index:100;
}
.tb-logo{flex:1;display:flex;align-items:center}
.tb-logo .ustudylogo{height:24px}
.tb-right{display:flex;align-items:center;gap:10px}
.tb-user{font-size:13px;color:var(--ink-pale);max-width:160px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-admin-btn{
  padding:4px 12px;border-radius:6px;
  background:rgba(255,180,0,.1);border:1px solid rgba(255,180,0,.25);
  color:#FFB400;font-family:var(--ff);font-size:11px;font-weight:700;
  cursor:pointer;text-decoration:none;transition:var(--tr);
  display:flex;align-items:center;gap:4px;
}
.tb-admin-btn:hover{background:rgba(255,180,0,.2)}
.tb-logout{
  padding:5px 12px;border-radius:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:var(--ink-pale);font-family:var(--ff);font-size:12px;
  cursor:pointer;transition:var(--tr);
}
.tb-logout:hover{color:#fff;background:rgba(255,255,255,.14)}

/* ── Lang toggle ────────────────────────────────────────── */
.lang-row{
  display:flex;gap:8px;margin-bottom:28px;
  background:rgba(255,255,255,.05);border-radius:10px;padding:4px;
}
.lang-btn{
  flex:1;padding:8px;border:none;border-radius:7px;background:transparent;
  color:var(--ink-pale);font-family:var(--ff);font-size:13px;font-weight:600;
  cursor:pointer;transition:var(--tr);
}
.lang-btn.act{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(27,79,204,.4)}

/* ── Form inputs ────────────────────────────────────────── */
input[type=text],input[type=email],input[type=password]{
  width:100%;padding:12px 14px;
  background:rgba(255,255,255,.06);
  border:1.5px solid var(--border);border-radius:var(--r);
  color:var(--ink);font-family:var(--ff);font-size:14px;
  transition:var(--tr);outline:none;
}
input::placeholder{color:var(--ink-pale)}
input:focus{border-color:var(--accent);background:rgba(27,79,204,.08)}
.form-group{margin-bottom:16px}
label{display:block;font-size:12px;font-weight:600;color:var(--ink-pale);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}

/* ── Primary button ─────────────────────────────────────── */
.btn-primary{
  width:100%;padding:13px;background:var(--accent);color:#fff;
  border:none;border-radius:var(--r);
  font-family:var(--ff);font-size:15px;font-weight:700;
  cursor:pointer;transition:var(--tr);
}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(27,79,204,.4)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Alert boxes ────────────────────────────────────────── */
.alert{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:16px;display:none}
.alert-err{background:rgba(220,50,50,.15);border:1px solid rgba(220,50,50,.3);color:#ff8080}
.alert-ok {background:rgba(50,200,100,.12);border:1px solid rgba(50,200,100,.25);color:#5ddd90}

/* ── Divider ────────────────────────────────────────────── */
.ui-divider{text-align:center;color:var(--ink-pale);font-size:12px;
  margin:20px 0;position:relative}
.ui-divider::before,.ui-divider::after{content:'';position:absolute;top:50%;
  width:calc(50% - 20px);height:1px;background:var(--border)}
.ui-divider::before{left:0}.ui-divider::after{right:0}

/* ── Responsive base ────────────────────────────────────── */
@media(max-width:440px){
  .topbar{padding:0 14px}
}