:root{
  --bg:#f9fafb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#2563eb;
  --primary-weak:#e5edff;
  --border:#e5e7eb;
  --danger:#ef4444;
  --success:#16a34a;
  --radius:14px;
  --shadow:0 10px 25px rgba(0,0,0,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

.wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

header.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow);
  position:sticky;
  top:0;
  z-index:10;
}

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:20px;
}

.brand .logo{
  width:32px;height:32px;border-radius:8px;background:var(--primary);display:inline-block;
}

.nav-actions{
  display:flex; align-items:center; gap:10px;
}

.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background:#fff; color:var(--text); text-decoration:none; font-weight:600;
  transition: transform .03s ease, box-shadow .2s ease, background .2s;
  box-shadow: var(--shadow);
}
.button:hover{ transform: translateY(-1px); }
.button.primary{ background:var(--primary); color:#fff; border-color:transparent; }
.button.ghost{ background:#fff; color:var(--text); }
.button.link{ background:transparent; border:none; box-shadow:none; padding:8px; }

/* Login dropdown */
.auth-dropdown{ position:relative; }
.auth-menu{
  position:absolute; right:0; top:110%;
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:8px;
  box-shadow: var(--shadow); min-width:200px; display:none;
}
.auth-menu a{ display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text); }
.auth-menu a:hover{ background:var(--primary-weak); }

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}

/* Forms */
.form{ display:grid; gap:14px; }
.input{
  display:flex; flex-direction:column; gap:6px;
}
.input input, .input select, .input textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#fff;
}
.label{ font-weight:600; color:#111827; }
.form .row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:700px){ .form .row{ grid-template-columns:1fr; } }

.alert{ padding:12px 14px; border-radius:12px; border:1px solid var(--border); }
.alert.error{ border-color: rgba(239, 68, 68, .4); background: #fff1f1; }
.alert.success{ border-color: rgba(22, 163, 74, .4); background: #f1fff5; }

/* Footer sticks to bottom */
footer.site-footer{
  margin-top:auto;
  background:#fff;
  border-top:1px solid var(--border);
}
.footer-inner{ padding:18px 0; color:var(--muted); text-align:center; }
/* === User menu in header === */
.user-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:12px; background:#fff;
  border:1px solid var(--border); box-shadow: var(--shadow);
}
.user-btn .avatar{
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--primary-weak); color:var(--primary);
  font-weight:700; font-size:12px; border:1px solid var(--border);
}
.user-btn .user-name{ font-weight:600; font-size:14px; }
.user-btn .chev{
  width:10px;height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform: rotate(45deg); margin-left:2px;
}

.auth-menu{ min-width:220px; }
.auth-menu.open{ display:block; } /* на всякий случай */
.auth-menu .auth-menu-head{
  padding:6px 10px 8px; color:var(--muted); font-size:12px;
}
.auth-menu .auth-menu-head .email{ word-break: break-all; }
.auth-menu .menu-item{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text);
}
.auth-menu .menu-item:hover{ background:var(--primary-weak); }
.auth-menu .sep{ height:1px; background:var(--border); margin:6px 4px; }
/* === Progress bar === */
.progress{
  width:100%;
  height:10px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress__bar{
  height:100%;
  width:0%;
  background: var(--primary);
  border-radius: 999px;
  transition: width .3s ease;
}
/* === Modal === */
.modal{ display:none; }
.modal.open{ display:block; }
.modal__backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:999;
}
.modal__dialog{
  position:fixed; z-index:1000; inset:auto; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(720px, 94vw); max-height:90vh; overflow:auto;
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
}
.modal__header, .modal__footer{ padding:12px 14px; border-bottom:1px solid var(--border); }
.modal__footer{ border-top:1px solid var(--border); border-bottom:0; display:flex; justify-content:flex-end; gap:8px; }
.modal__body{ padding:14px; }
.modal__close{
  border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:var(--muted);
  padding:4px 8px; border-radius:8px;
}
.modal__close:hover{ background:var(--surface); color:var(--text); }