*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
:root {
  --bg: #f7f5f1;
  --surface: rgba(255,255,255,.9);
  --line: #e8dfcf;
  --line-soft: #efe7da;
  --text: #172033;
  --muted: #6d7891;
  --navy: #15233f;
  --navy-2: #203153;
  --gold: #c9a44a;
  --gold-2: #e8cb76;
  --success: #167a4a;
  --success-soft: #e7f6ee;
  --danger: #be4334;
  --danger-soft: #fdecea;
  --shadow-sm: 0 6px 18px rgba(21, 35, 63, .06);
  --shadow: 0 18px 50px rgba(21, 35, 63, .10);
  --radius: 20px;
  --radius-l: 28px;
  --max: 1120px;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--gs-font-body);
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(231, 207, 142, .18), transparent 24%),
    linear-gradient(180deg, #f8f3e8 0%, #f5f0e6 20%, #f7f5f1 100%);
}
a { color: inherit; }
button, input { font: inherit; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(247, 245, 241, .78);
  border-bottom: 1px solid rgba(232, 223, 207, .9);
}
.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.brand, .brand-text {
  display: flex;
}
.brand {
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}
.brand-badge, .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #f3d98e;
  box-shadow: var(--shadow-sm);
  flex: 0 0 44px;
}
.brand-title {
  font-family: var(--gs-font-heading);
  font-size: 16px;
  line-height: 1.1;
  color: var(--navy);
}
.brand-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.shell, .page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px 20px 56px;
}
.panel, .login-card, .card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  border-radius: var(--radius-l);
}
.panel {
  padding: 24px;
  background: linear-gradient(180deg,#fff,#faf7f0);
  border: 1px solid #efe7da;
}
.panel-title, .card-title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
}
.panel-sub, .card-subtitle, .muted {
  color: var(--muted);
  line-height: 1.6;
}
.field {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.field label {
  font-size: 13px;
  font-weight: 700;
  color: #56627d;
}
.field input, .input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 15px 16px;
  background: #fff;
  color: var(--text);
  outline: none;
}
.field input:focus, .input:focus {
  border-color: #d7be86;
  box-shadow: 0 0 0 4px rgba(201,164,74,.12);
}
.btn {
  appearance: none;
  border: none;
  border-radius: 18px;
  padding: 15px 18px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.btn-primary, .btn-gold {
  background: linear-gradient(145deg, var(--gold), var(--gold-2));
  color: #fff;
  box-shadow: 0 12px 24px rgba(201,164,74,.24);
}
.btn-secondary, .btn-outline {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
}
.btn-full { width: 100%; }
.hint { font-size: 13px; color: var(--muted); }
.hint.ok { color: var(--success); }
.hint.error { color: var(--danger); }
.msg {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
}
.msg.ok { background: var(--success-soft); color: var(--success); border-color: #bfe7cf; }
.msg.err { background: var(--danger-soft); color: #9d3b2f; border-color: #f3c8c1; }
.msg.info { background: #fbf4df; color: #8a6716; border-color: #eddca8; }
@media (max-width: 860px) {
  .shell, .page { padding: 18px 16px 40px; }
  .topbar-inner { padding: 12px 16px; }
  .brand-title { font-size: 15px; }
  .panel { padding: 20px; }
}