/* ============================================================
   IDPMR Identity — Design System (light default + dark)
   Palette adapted from IctCrypto.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Remove the mobile rectangular tap-flash (it ignores border-radius); it's inherited, so setting it
   on the root covers all buttons/links. They keep their own :hover/:active feedback. */
html { -webkit-tap-highlight-color: transparent; }

:root {
  color-scheme: light;
  --bg:        #F0F4F8;
  --bg-grad-1: #E8EEF6;
  --bg-grad-2: #F4F7FB;
  --surface:   #FFFFFF;
  --surface-2: #F1F5F9;
  --surface-3: #E8EEF4;
  --border:    #E2E8F0;
  --border-2:  #CBD5E1;
  --blue:      #1976D2;
  --blue-l:    #1565C0;
  --blue-h:    #1251A0;
  --green:     #2E7D32;
  --orange:    #E65100;
  --red:       #C62828;
  --text:      #0F172A;
  --text-2:    #475569;
  --text-3:    #94A3B8;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow:    0 8px 30px rgba(15,23,42,.10);
  --shadow-lg: 0 24px 60px rgba(15,23,42,.16);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0D1117;
  --bg-grad-1: #0B1220;
  --bg-grad-2: #0F1A2B;
  --surface:   #111827;
  --surface-2: #1A2332;
  --surface-3: #1E293B;
  --border:    #1F2937;
  --border-2:  #2D3748;
  --blue:      #1976D2;
  --blue-l:    #42A5F5;
  --blue-h:    #1565C0;
  --green:     #4CAF50;
  --orange:    #FFA726;
  --red:       #EF5350;
  --text:      #E8EAED;
  --text-2:    #9AA5B4;
  --text-3:    #6B7280;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 8px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}

html, body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  transition: background .25s, color .2s;
  -webkit-font-smoothing: antialiased;
}

h1:focus {
    outline: none;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-h); text-decoration: underline; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 5px; }

/* ── App shell ─────────────────────────────────────────── */
.app-bg {
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--bg-grad-1), transparent 60%),
    radial-gradient(900px 480px at 105% 10%, var(--bg-grad-2), transparent 55%),
    var(--bg);
}

/* ── Top bar ───────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 28px; max-width: 1200px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; color: var(--text); }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.brand-mark svg { width: 36px; height: 36px; display: block; }
.brand-wm { display: flex; flex-direction: column; line-height: 1.05; }
.brand-wm b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.brand-wm .wm-id { color: var(--blue); }
.brand small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.topbar-spacer { flex: 1; }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border-2);
  color: var(--text-2); border-radius: 22px; padding: 7px 14px;
  cursor: pointer; font-size: 13px; font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text); }
.theme-toggle .bi { font-size: 15px; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius); border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
  text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(25,118,210,.3); }
.btn-primary:hover { background: var(--blue-h); color: #fff; text-decoration: none; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 26px; font-size: 15px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* ── Cabinet (account portal) ──────────────────────────── */
.cabinet { display:flex; gap:22px; max-width:1100px; margin:0 auto; padding:8px 24px 56px; align-items:flex-start; }
.cab-nav { width:250px; flex-shrink:0; position:sticky; top:16px; display:flex; flex-direction:column; gap:3px;
           background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:10px; box-shadow:var(--shadow-sm); }
.cab-link { display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:10px; font-size:14px; font-weight:500; color:var(--text-2); text-decoration:none; }
.cab-link:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.cab-link.active { background:rgba(25,118,210,.1); color:var(--blue); font-weight:600; }
.cab-link i { font-size:17px; }
.cab-sep { height:1px; background:var(--border); margin:8px 4px; }
.cab-danger { color:var(--red); }
.cab-nav-toggle { display:none; }              /* desktop: hidden — the sidebar is always visible */
.cab-nav-chev { transition:transform .18s; }
.cab-content { flex:1; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 30px; box-shadow:var(--shadow); }
.cab-content h1 { font-size:21px; font-weight:700; margin-bottom:4px; }
.cab-sub { color:var(--text-2); font-size:13.5px; margin-bottom:20px; }
@media (max-width: 860px) {
  .cabinet { flex-direction:column; padding:8px 14px 40px; }
  .cab-nav-toggle { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
      padding:11px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface);
      color:var(--text); font-size:14px; font-weight:600; cursor:pointer; box-shadow:var(--shadow-sm); }
  .cab-nav-toggle[aria-expanded="true"] .cab-nav-chev { transform:rotate(180deg); }
  .cab-nav { width:100%; position:static; flex-direction:column; flex-wrap:nowrap; gap:2px; display:none; margin-top:8px; }
  .cab-nav.open { display:flex; }
  .cab-link { flex:1 1 auto; }
}

/* ── Manage rows (used across cabinet pages) ───────────── */
.manage-row { display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--border); }
.manage-row:last-child { border-bottom:none; }
.manage-row:has(+ .divider) { border-bottom:none; }
.manage-row .btn { width:112px; flex-shrink:0; padding-left:8px; padding-right:8px; }
.manage-ic { width:40px; height:40px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:19px; background:rgba(25,118,210,.1); color:var(--blue); }
.avatar-thumb { width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; }
.manage-tx { flex:1; min-width:0; }
.manage-tx b { display:block; font-size:14px; }
.manage-tx span { font-size:12.5px; color:var(--text-3); }
.manage-badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:8px; }
.manage-badge.ok { background:rgba(46,125,50,.12); color:var(--green); }
.manage-linked { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.manage-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; background:var(--surface-2); border:1px solid var(--border-2); border-radius:20px; padding:5px 12px; }

/* ── Audit / history table ─────────────────────────────── */
.audit-list { display:flex; flex-direction:column; }
.audit-row { display:flex; align-items:center; gap:13px; padding:11px 0; border-bottom:1px solid var(--border); font-size:13px; }
.audit-row:last-child { border-bottom:none; }
.audit-ic { width:34px; height:34px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; }
.audit-ic.ok { background:rgba(46,125,50,.12); color:var(--green); }
.audit-ic.fail { background:rgba(198,40,40,.12); color:var(--red); }
.audit-ic.info { background:rgba(25,118,210,.1); color:var(--blue); }
.audit-tx { flex:1; min-width:0; }
.audit-tx b { display:block; font-size:13.5px; font-weight:600; }
.audit-tx span { font-size:12px; color:var(--text-3); word-break:break-word; }
.audit-time { font-size:12px; color:var(--text-3); white-space:nowrap; flex-shrink:0; }

/* ── Consent / scopes ──────────────────────────────────── */
.consent-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: var(--surface); }
.consent-card-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 12.5px; color: var(--text-2); }
.consent-scope { display: flex; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.consent-scope:last-child { border-bottom: none; }
.consent-scope input[type=checkbox] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--blue); cursor: pointer; }
.cs-tx { min-width: 0; }
.cs-tx b { font-size: 13.5px; }
.cs-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.cs-req { font-size: 11px; font-weight: 600; color: var(--orange); margin-left: 4px; }
.client-logo img { max-height: 56px; margin-bottom: 12px; border-radius: 10px; }

/* ── Grants list ───────────────────────────────────────── */
.grant-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--surface); }
.grant-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.grant-head b { font-size: 15px; }
.grant-meta { font-size: 12.5px; color: var(--text-3); line-height: 1.7; }
.grant-meta b { color: var(--text-2); font-weight: 600; }
.grant-meta ul { margin: 2px 0 0 18px; }

/* ── Auth card ─────────────────────────────────────────── */
.auth-wrap {
  min-height: calc(100vh - 70px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px 56px;
}
.auth-card {
    width: 100%;
    /*max-width: 440px;*/
    max-width: 600px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 34px 32px;
}
.auth-card h1 { font-size: 23px; font-weight: 700; margin-bottom: 6px; }
.auth-sub { color: var(--text-2); font-size: 14px; margin-bottom: 24px; }

/* Client banner on the login form (logo + name + description of the requesting app) */
.client-banner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border);
}
.client-logo { max-height: 56px; max-width: 180px; border-radius: 10px; object-fit: contain; }
.client-name { font-weight: 600; font-size: 16px; }
.client-desc { color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.client-desc :is(p, ul, ol) { margin: 4px 0; }

/* ── Form fields ───────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field .req { color: var(--red); }
.input {
  width: 100%; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 11px 13px; font-size: 14px; outline: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(25,118,210,.15); }
.input::placeholder { color: var(--text-3); }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }

.val-msg { color: var(--red); font-size: 12.5px; margin-top: 5px; }
.alert { border-radius: var(--radius); padding: 11px 14px; font-size: 13.5px; margin-bottom: 18px; }
.alert-danger { background: rgba(198,40,40,.1); color: var(--red); border: 1px solid rgba(198,40,40,.25); }
.alert-success { background: rgba(46,125,50,.1); color: var(--green); border: 1px solid rgba(46,125,50,.25); }

/* ── Divider ───────────────────────────────────────────── */
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--text-3); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ── Method grid (login options) ───────────────────────── */
.methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.method {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 13px;
  cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
  color: var(--text); text-decoration: none; position: relative;
}
.method:hover { border-color: var(--blue); background: var(--surface-3); text-decoration: none; transform: translateY(-1px); color: var(--text); }
.method-disabled { opacity: .55; cursor: not-allowed; }
.method-disabled:hover { border-color: var(--border); background: var(--surface-2); transform: none; }
.method-disabled .method-ic { background: var(--surface-3); color: var(--text-3); }
.method-hint { position: absolute; top: 9px; right: 10px; font-size: 13px; color: var(--text-3); }
.method-ic {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: rgba(25,118,210,.1); color: var(--blue);
}
.method-tx { min-width: 0; }
.method-tx b { display: block; font-size: 13.5px; font-weight: 600; }
.method-tx span { font-size: 11.5px; color: var(--text-3); }
.method .soon {
  position: absolute; top: 8px; right: 9px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  background: rgba(230,81,0,.14); color: var(--orange); padding: 2px 6px; border-radius: 7px;
}

/* ── Social buttons ────────────────────────────────────── */
.socials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding: 13px 0;
}
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 10px; cursor: pointer;
  color: var(--text-2); font-size: 13px; font-weight: 600;
  transition: background .15s, border-color .15s, color .15s; text-decoration: none;
}
.social-btn:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.social-btn .bi { font-size: 17px; }
/* Brand-logo SVGs (e.g. Yandex /img/riya.svg) painted in the current text colour via a CSS mask, so
   they match the Bootstrap icons AND follow the colour theme. <SocialIcon> passes --icon:url(...). */
.social-ic-img {
    width: 18px; height: 18px; display: inline-block; vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.manage-ic .social-ic-img { width: 20px; height: 20px; }
/* Native date input: theme the calendar-picker icon so it matches the app (esp. dark mode). */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .9; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); }
/* Pretty "choose file" control: a styled label-button hiding the native input + the chosen name. */
.file-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-btn { cursor: pointer; }
.file-name { color: var(--text-2); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.muted { color: var(--text-3); font-size: 13px; }
/* QR/app login status shown as an error (e.g. untrusted certificate chain) — draw attention. */
.qr-status-error { color: var(--red); font-weight: 600; background: rgba(198,40,40,.1); border: 1px solid rgba(198,40,40,.45); border-radius: 8px; padding: 10px 12px; }
.center { text-align: center; }
.mt-3 { margin-top: 18px; }
.mt-2 { margin-top: 12px; }

/* ── Landing ───────────────────────────────────────────── */
.hero { max-width: 1100px; margin: 0 auto; padding: 40px 28px 20px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--blue); background: rgba(25,118,210,.1); border: 1px solid rgba(25,118,210,.2);
  padding: 6px 13px; border-radius: 20px; margin-bottom: 20px;
}
.hero h1 { font-size: 42px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; max-width: 760px; }
.hero h1 .grad { background: linear-gradient(120deg, var(--blue), #7c4dff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p.lead { font-size: 17px; color: var(--text-2); max-width: 620px; margin-top: 18px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.features { max-width: 1100px; margin: 28px auto 0; padding: 0 28px 60px; }
.features h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 18px; font-weight: 700; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }
.feature-ic {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: rgba(25,118,210,.1); color: var(--blue);
}
.feature h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.feature p { font-size: 13.5px; color: var(--text-2); }
.feature .tag {
  display: inline-block; margin-top: 12px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 9px; border-radius: 8px;
}
.tag-live { background: rgba(46,125,50,.12); color: var(--green); }
.tag-soon { background: rgba(230,81,0,.12); color: var(--orange); }

.site-footer { border-top: 1px solid var(--border); padding: 22px 28px; text-align: center; color: var(--text-3); font-size: 13px; max-width: 1100px; margin: 0 auto; }

/* ── QR / spinner overlay ──────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.overlay-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); }
.qr-box { width: 240px; height: 240px; margin: 14px auto; background: #fff; padding: 14px; border-radius: 14px; }
.qr-box svg, .qr-box img { display: block; width: 100%; height: 100%; }
.spin-ring { width: 42px; height: 42px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin .75s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Inline spinner for buttons/links in a loading state (see js/btn.js). Uses currentColor so it
   matches the button's text colour (white on primary buttons, etc.). */
.btn-spinner { display: inline-block; width: 1em; height: 1em; margin-right: .5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.15em; animation: spin .6s linear infinite; }
.btn.is-loading { opacity: .9; }
/* Pager for list pages (history / security / sessions). */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.pager-info { color: var(--text-2); font-size: 13px; }
.pager-gap { width: 1px; }

/* ── Confirm-delete dialog (styled, replaces native confirm) ── */
.cdlg-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(15,23,42,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: cdlgFade .15s ease; }
.cdlg-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 26px 22px; max-width: 400px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); animation: cdlgPop .18s cubic-bezier(.32,.72,0,1); }
.cdlg-icon { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: rgba(198,40,40,.12); color: var(--red); }
.cdlg-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.cdlg-text { font-size: 14px; color: var(--text-2); margin-bottom: 22px; line-height: 1.55; }
.cdlg-actions { display: flex; gap: 10px; }
.cdlg-actions .btn { flex: 1; }
.cdlg-cancel { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.cdlg-cancel:hover { background: var(--surface-2); }
.cdlg-ok { background: var(--red); color: #fff; border-color: var(--red); }
.cdlg-ok:hover { background: #b71c1c; color: #fff; }
@keyframes cdlgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cdlgPop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 560px) {
  .hero h1 { font-size: 32px; }
  .socials { grid-template-columns: repeat(2, 1fr); }
  .methods { grid-template-columns: 1fr; }
}

/* ── Birthdate picker (Vanilla Calendar Pro) ──────────────────────────────
   .js-dob ships as a plain <input type="date">; dob.js adds .dob-enhanced (and the
   trigger button) only after the calendar loads, so an un-enhanced field still works
   natively. The field stays typable — the calendar opens only from .dob-btn. */
.dob-wrap { position: relative; }
.dob-pop {
  /* Anchored right, not left: the calendar has its own min-width (272px) and is usually wider than
     the field, so anchoring left pushed that overflow off the right of the window on small screens.
     Growing leftwards from the field's right edge keeps it on screen. */
  position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; display: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18); padding: 6px;
}
.dob-pop.open { display: block; }
/* Our own trigger replaces the browser's calendar button, so the two never compete. */
input.dob-enhanced { padding-right: 38px; }
input.dob-enhanced::-webkit-calendar-picker-indicator { display: none; }
.dob-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: none; background: none;
  border-radius: 6px; color: var(--text-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.dob-btn:hover { background: var(--surface-2); color: var(--blue); }
.dob-btn .bi { font-size: 16px; line-height: 1; }
/* Selected day / month / year in the brand colour — the same var(--blue) as .btn-primary
   ("Зарегистрироваться"). VCP ships a Tailwind-generated palette (its own cyan) where each of these
   is written out per theme and per weekend/holiday/range combination, every selector more specific
   than a plain override. Rather than restate that matrix, !important wins against the lot in one
   rule — including their :hover states, since the library itself uses no !important. */
.dob-pop .vc-date[data-vc-date-selected] .vc-date__btn,
.dob-pop .vc-months__month[data-vc-months-month-selected],
.dob-pop .vc-years__year[data-vc-years-year-selected] {
  background-color: var(--blue) !important;
  color: #fff !important;
}

/* ── Header identity (HeaderUser: login + logout, next to the theme toggle) ── */
.topbar-user {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-2); font-size: 13px; font-weight: 500;
  max-width: 220px; overflow: hidden;
}
.topbar-user .bi { font-size: 15px; }
.topbar-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-logout {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border-2);
  color: var(--text-2); border-radius: 22px; padding: 7px 14px;
  font-size: 13px; font-weight: 500; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.topbar-logout:hover { background: var(--surface-2); color: var(--danger, #DC2626); text-decoration: none; }
.topbar-logout .bi { font-size: 15px; }
/* Tight screens: keep the icons, drop the words before the brand starts wrapping. */
@media (max-width: 620px) {
  .topbar-user { max-width: 120px; }
  .topbar-logout span { display: none; }
}
@media (max-width: 420px) {
  .topbar-user-name { display: none; }
}