@font-face {
  font-family: TildaSans;
  src: url('./TildaSans-VF.woff2') format('woff2');
  font-style: normal;
  font-weight: 250 1000;
  font-display: swap;
}

:root {
  font-family: TildaSans, Arial, sans-serif;
  color: #17324b;
  background: #eaf0f6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .media-action:focus-within { outline: 3px solid #75ace0; outline-offset: 2px; }
[hidden] { display: none !important; }

.app-shell {
  width: min(100%, 480px);
  min-height: 100dvh;
  margin: 0 auto;
  background: #f7f9fc;
  box-shadow: 0 0 42px #163c641c;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 8px 20px;
  border-bottom: 1px solid #d8e3ef;
  background: #fff;
}

.update-banner { position: sticky; top: 68px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 17px; background: #e5f1fa; border-bottom: 1px solid #b9d4e8; color: #173f63; font-size: 14px; font-weight: 700; }
.update-banner button { flex: 0 0 auto; min-height: 38px; padding: 7px 12px; border: 0; border-radius: 8px; background: #173f63; color: #fff; font-size: 14px; font-weight: 700; }
.brand { display: flex; flex-direction: column; padding: 0; border: 0; background: transparent; color: #143a61; text-align: left; line-height: 1; }
.brand-line { display: flex; align-items: center; gap: 5px; }
.brand strong { font-size: 26px; font-weight: 780; letter-spacing: -.06em; }
.brand-line i { color: #5285b3; font-size: 13px; font-style: normal; }
.brand-line span { font-size: 10px; font-weight: 760; letter-spacing: .11em; }
.brand small { margin-top: 4px; color: #537390; font-size: 12px; font-weight: 480; }
.profile-avatar, .profile-photo {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #9fbee0;
  border-radius: 50%;
  background: #deebf8;
  color: #1b4c7c;
  font-size: 19px;
  font-weight: 700;
  overflow: hidden;
}
.profile-avatar img, .profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.profile-avatar img[data-fit="contain"], .profile-photo img[data-fit="contain"],
.profile-avatar img[data-fit="full"], .profile-photo img[data-fit="full"] { object-fit: contain; }
.profile-avatar img[data-fit="portrait"], .profile-photo img[data-fit="portrait"] { object-position: 50% 30%; }
.profile-avatar img[data-fit="landscape"],
.profile-avatar img[data-fit="face"] {
  object-position: 50% 55%;
  transform: scale(1.5);
}
.profile-photo img[data-fit="landscape"],
.profile-photo img[data-fit="face"] {
  object-position: 50% 52%;
  transform: scale(1.23);
}
.profile-avatar.is-loading, .profile-photo.is-loading {
  border-color: #b8cee2;
  background: linear-gradient(105deg, #dceaf6 30%, #f2f7fb 46%, #dceaf6 62%);
  background-size: 220% 100%;
  animation: avatar-loading 1.15s ease-in-out infinite;
}
.profile-avatar.is-loading img, .profile-photo.is-loading img { opacity: 0; }
@keyframes avatar-loading { to { background-position-x: -220%; } }

.app-main { padding: 22px 18px calc(104px + env(safe-area-inset-bottom)); }
.screen h1 { margin: 0 0 20px; font-size: 28px; font-weight: 730; line-height: 1.15; letter-spacing: -.035em; }
.screen .lead { margin: -5px 0 20px; color: #60748a; font-size: 16px; line-height: 1.45; }
.eyebrow { margin: 0 0 9px; color: #376b9d; font-size: 12px; font-weight: 750; letter-spacing: .065em; }

.forum-card {
  padding: 22px 20px 20px;
  border-radius: 19px;
  background: linear-gradient(150deg, #123b64 0%, #0b2b4d 100%);
  color: white;
  box-shadow: 0 12px 26px #123b6420;
}
.forum-date { margin: 0 0 12px; color: #b8daf5; font-size: 12px; font-weight: 760; letter-spacing: .045em; }
.forum-card h2 { margin: 0; font-size: 26px; font-weight: 760; line-height: 1.15; letter-spacing: -.027em; }
.forum-card h2 span { font-size: 16px; font-weight: 560; letter-spacing: 0; white-space: nowrap; }
.forum-subtitle { margin: 8px 0 0; color: #d9e9f7; font-size: 15px; line-height: 1.4; }
.forum-status { margin: 20px 0 12px; color: #bbd9f1; font-size: 14px; }
.attendance-banner { display: flex; align-items: center; gap: 11px; margin: -4px 0 16px; padding: 12px 14px; border: 1px solid #b6d9c9; border-radius: 13px; background: #e7f5ed; color: #1d6146; }
.attendance-banner.is-left { border-color: #c9d8e8; background: #ebf2f8; color: #315773; }
.attendance-mark { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2e8660; color: #fff; font-size: 17px; font-weight: 800; }
.attendance-banner.is-left .attendance-mark { background: #6686a0; }
.attendance-banner strong, .attendance-banner small { display: block; }
.attendance-banner strong { font-size: 16px; line-height: 1.2; }
.attendance-banner small { margin-top: 3px; font-size: 12px; line-height: 1.25; }
.forum-open, .dialog-forum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #123b64;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}
.forum-open span, .dialog-forum span { font-size: 23px; line-height: 1; }

.feature-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 79px;
  margin-top: 14px;
  padding: 14px 15px;
  border: 1px solid #d9e3ed;
  border-radius: 14px;
  background: #fff;
  color: #17324b;
  text-align: left;
}
.feature-icon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #e6f0f9; color: #236297; font-size: 22px; }
.feature-copy { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.feature-copy strong { font-size: 16px; font-weight: 700; }
.feature-copy small { color: #607182; font-size: 13px; }
.feature-arrow { color: #8297aa; font-size: 26px; }
.profile-prompt { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: -7px 0 17px; padding: 15px 17px; border: 1px solid #b5cce2; border-radius: 13px; background: #e8f2fa; color: #1a527f; font-size: 15px; font-weight: 700; text-align: left; }
.profile-prompt span { font-size: 21px; }
.home-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 26px 0 11px; }
.home-section-heading h2 { margin: 0; font-size: 19px; }
.home-section-heading button { padding: 2px 0; border: 0; background: none; color: #2a6496; font-size: 14px; font-weight: 650; white-space: nowrap; }
.upcoming-card { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 100px; padding: 14px; border: 1px solid #d4e2ef; border-radius: 14px; background: #fff; color: #17324b; text-align: left; }
.upcoming-date { display: grid; flex: none; place-content: center; width: 59px; height: 64px; border-radius: 10px; background: #e8f2fb; color: #1d5f94; line-height: 1; text-align: center; }
.upcoming-date strong { font-size: 26px; }
.upcoming-date small { margin-top: 3px; font-size: 11px; font-weight: 700; }
.upcoming-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.upcoming-copy small { color: #2a6496; font-size: 10px; font-weight: 760; letter-spacing: .04em; }
.upcoming-copy strong { font-size: 17px; }
.upcoming-copy > span { color: #5f7184; font-size: 13px; }
.home-footnote { margin: 10px 2px 0; color: #5f7183; font-size: 12px; line-height: 1.4; }
.auth-screen .lead { margin: -9px 0 20px; }
.auth-form { display: grid; gap: 14px; padding: 19px; border: 1px solid #d7e3ee; border-radius: 16px; background: #fff; }
.auth-create { width: 100%; min-height: 49px; margin-top: 13px; border: 1px solid #b8cde2; border-radius: 11px; background: #eaf4fc; color: #1a598c; font-size: 16px; font-weight: 700; }
.auth-help { margin: 17px 2px 0; color: #5f7284; font-size: 13px; line-height: 1.4; }
/* Login by code first (owner 20.10.2026, cabinet audit item 1): the password and «Войти» wait behind «Войти с паролем». */
/* Separate rules: a browser without :has still hides the button and, by position in the protected form, the password. */
.auth-screen.code-first #login-form button[type="submit"] { display: none; }
.auth-screen.code-first #login-form > label.form-field:nth-of-type(2) { display: none; }
.auth-screen.code-first #login-form .form-field:has(input[name="password"]) { display: none; }
.auth-code-note { margin: 0; color: #48677f; font-size: 14px; line-height: 1.4; }
.auth-screen .auth-create.auth-switch { min-height: 44px; margin-top: 4px; padding: 8px 12px; border: 0; background: transparent; color: #1a598c; font-size: 16px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.auth-benefits { margin-top: 24px; padding: 20px 18px; border: 1px solid #cbdfee; border-radius: 16px; background: #eaf4fc; }
.auth-screen .lead { margin-bottom: 28px; }
.auth-benefits h2 { margin: 0 0 18px; font-size: 20px; line-height: 1.25; }
.auth-benefits-list { position: relative; display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; }
.auth-benefits-list::before { content: ''; position: absolute; top: 21px; bottom: 21px; left: 21px; width: 1px; background: #b8d2e6; }
.auth-benefits-list li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 13px; }
.auth-benefit-icon { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #b8d2e6; border-radius: 50%; background: #f7fbff; color: #236297; }
.auth-benefit-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.auth-benefits h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
.auth-benefits p { margin: 0; color: #48677f; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .auth-benefits-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .auth-benefits-list::before { top: 21px; bottom: auto; left: 16.6667%; right: 16.6667%; width: auto; height: 1px; }
  .auth-benefits-list li { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: 10px; text-align: center; }
  .auth-benefit-icon { justify-self: center; }
}
@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  .app-shell:has(.auth-screen:not([hidden])) { --auth-safe-top: env(safe-area-inset-top, 0px); --auth-safe-bottom: env(safe-area-inset-bottom, 0px); }
  .app-shell:has(.auth-screen:not([hidden])) .app-header { min-height: calc(68px + var(--auth-safe-top)); padding-top: calc(8px + var(--auth-safe-top)); }
  .app-shell:has(.auth-screen:not([hidden])) .app-main { padding-top: 16px; padding-bottom: calc(16px + var(--auth-safe-bottom)); }
  .auth-benefits { margin-top: 16px; padding: 16px 15px; }
  .auth-benefits h2 { margin-bottom: 12px; font-size: 18px; }
  .auth-benefits-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .auth-benefits-list::before { top: 18px; bottom: 18px; left: 18px; right: auto; width: 1px; height: auto; }
  .auth-benefits-list li { grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; text-align: left; }
  .auth-benefits-list li > div { font-size: 14px; line-height: 1.35; }
  .auth-benefit-icon { width: 36px; height: 36px; }
  .auth-benefit-icon svg { width: 23px; height: 23px; }
  .auth-benefits h3 { display: inline; margin: 0; font-size: 14px; line-height: inherit; }
  .auth-benefits h3::after { content: ' — '; font-weight: 400; }
  .auth-benefits p { display: inline; line-height: inherit; }
}
@media (max-width: 899px) and (max-height: 900px), (hover: none) and (pointer: coarse) and (max-height: 900px) {
  .app-shell:has(.auth-screen:not([hidden])) .app-header { min-height: calc(56px + var(--auth-safe-top)); padding-block: 6px; padding-top: calc(6px + var(--auth-safe-top)); }
  .app-shell:has(.auth-screen:not([hidden])) .app-main { padding-top: 8px; padding-bottom: calc(8px + var(--auth-safe-bottom)); }
  .auth-screen .eyebrow { margin-bottom: 3px; }
  .auth-screen h1 { margin-bottom: 4px; font-size: 26px; line-height: 1.1; }
  .auth-screen .lead { margin: 0 0 16px; line-height: 1.25; }
  .auth-form { gap: 6px; padding: 10px; }
  .auth-form .form-field { gap: 4px; }
  .auth-form .form-field > span, .auth-form .form-field > label { font-size: 14px; line-height: 1.25; }
  .auth-screen .auth-form input { min-height: 44px; padding-block: 9px; }
  .auth-screen .auth-form .password-control input { min-height: 44px; }
  .auth-screen .auth-form .password-toggle { top: 50%; right: 1px; transform: translateY(-50%); }
  .auth-form .save-profile { min-height: 44px; padding-block: 10px; }
  .auth-form .save-profile span { line-height: 1; }
  .auth-screen .auth-create[data-screen-target] { min-height: 44px; margin-top: 6px; padding: 10px 12px; line-height: 1.3; }
  .auth-benefits { margin-top: 10px; padding: 12px 15px; }
  .auth-benefits h2 { margin-bottom: 8px; line-height: 1.2; }
  .auth-benefits-list { gap: 7px; }
}
@media (max-width: 899px) and (max-height: 500px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .app-shell:has(.auth-screen:not([hidden])) .app-header { position: static; }
}

/* Approved mobile login: normal flex flow and a safe bottom inset. */
@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  .app-shell:has(.auth-screen:not([hidden])) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: #f2f6fa;
    background-image:
      radial-gradient(ellipse at 92% 62%, #ffffffb3 0%, #ffffff00 52%),
      radial-gradient(ellipse at 3% 35%, #e0ecf78c 0%, #e0ecf700 54%),
      linear-gradient(155deg, #f7f9fc 0%, #eef3f9 58%, #f5f8fc 100%);
  }
  .app-shell:has(.auth-screen:not([hidden])) .app-header { flex: 0 0 auto; }
  .app-shell:has(.auth-screen:not([hidden])) .brand small { color: #526e86; }
  .app-shell:has(.auth-screen:not([hidden])) .app-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-bottom: calc(12px + var(--auth-safe-bottom, 0px));
  }
  .app-shell:has(.auth-screen:not([hidden])) .auth-screen {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }
  .app-shell:has(.auth-screen:not([hidden])) .auth-screen > * { flex-shrink: 0; }
  .app-shell:has(.auth-screen:not([hidden])) .auth-screen > .lead { color: #536a80; }
  .app-shell:has(.auth-screen:not([hidden])) .auth-form input::placeholder { color: #61768b; opacity: 1; }
  .app-shell:has(.auth-screen:not([hidden])) .auth-screen::after {
    content: '';
    order: 1;
    flex: 1 0 0;
    min-height: 0;
    pointer-events: none;
    opacity: .4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 180' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23b6c8da' stroke-width='.7' vector-effect='non-scaling-stroke'%3E%3Cpath d='M-20 160C105 20 315 155 450 20'/%3E%3Cpath d='M-40 30C105 170 315 5 470 130'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .app-shell:has(.auth-screen:not([hidden])) .auth-benefits {
    order: 2;
    margin-top: 0;
    background: #eef4f9;
    border-color: #ceddea;
  }
  .app-shell:has(.auth-screen:not([hidden])) .auth-benefits-list::before { width: .6px; background: #bed0df; }
}

.bottom-nav {
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(100%, 480px);
  min-height: calc(69px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateX(-50%);
  border-top: 1px solid #d8e3ef;
  background: #fff;
  box-shadow: 0 -6px 22px #17324b0b;
}
.bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; border: 0; background: transparent; color: #5f7384; font-size: 13px; }
.bottom-nav button[aria-current="page"] { color: #1c5d95; font-weight: 730; }
.nav-icon { font-size: 23px; line-height: 1; font-weight: 650; }

.view-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-bottom: 20px; padding: 4px; border-radius: 11px; background: #e8eef5; }
.view-switch button { min-height: 44px; padding: 5px 6px; border: 0; border-radius: 8px; background: transparent; color: #58718b; font-size: 14px; font-weight: 630; }
.view-switch button[aria-pressed="true"] { background: #fff; color: #143d66; box-shadow: 0 1px 5px #17324b14; }
.year-heading { margin: 0 0 10px; color: #5f7284; font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.month-group, .type-group { margin-bottom: 12px; overflow: hidden; border: 1px solid #d9e3ed; border-radius: 14px; background: #fff; }
.month-group summary, .type-group summary { display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 13px 15px; cursor: pointer; list-style: none; }
.month-group summary::-webkit-details-marker, .type-group summary::-webkit-details-marker { display: none; }
.month-group summary strong, .type-group summary strong { font-size: 18px; font-weight: 700; }
.month-group summary small, .type-group summary small { margin-left: auto; color: #627281; font-size: 14px; text-align: right; }
.month-group summary .chevron, .type-group summary .chevron { color: #7791a9; font-size: 20px; transition: transform .2s ease; }
.month-group[open] summary .chevron, .type-group[open] summary .chevron { transform: rotate(180deg); }
.month-body, .type-body { display: grid; gap: 0; padding: 0 10px 9px; }
.event-row { display: grid; grid-template-columns: 49px 1fr 18px; align-items: center; gap: 10px; width: 100%; min-height: 94px; padding: 12px 5px; border: 0; border-top: 1px solid #e7eef4; background: #fff; color: #17324b; text-align: left; }
.event-date { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #164c7a; line-height: 1; }
.event-date strong { font-size: 25px; font-weight: 730; }
.event-date small { font-size: 13px; font-weight: 730; text-transform: uppercase; }
.event-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.event-copy strong { font-size: 16px; font-weight: 700; line-height: 1.25; }
.event-copy small { color: #607384; font-size: 14px; line-height: 1.3; }
.event-type { padding: 3px 6px; border-radius: 5px; background: #e9f2fa; color: #2b6597; font-size: 13px; font-weight: 650; }
.event-owned { padding: 3px 7px; border-radius: 5px; background: #17324b; color: #f2c76b; font-size: 13px; font-weight: 700; }
.past-group summary strong { color: #48677f; }
.past-month { margin: 12px 5px 0; color: #48677f; font-size: 14px; font-weight: 700; text-transform: capitalize; }
.event-row .arrow { color: #839bb0; font-size: 22px; }
.event-row.past { opacity: .69; }
.empty-group { padding: 0 15px 16px; color: #627281; font-size: 14px; }

.back-link { min-height: 40px; margin: -6px 0 12px; padding: 0; border: 0; background: transparent; color: #2b669a; font-size: 15px; font-weight: 650; }
.forum-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 10px; }
.forum-topline .back-link { margin: 0; }
.forum-open-pill { padding: 6px 9px; border-radius: 99px; background: #eaf4ed; color: #3a7653; font-size: 12px; font-weight: 700; white-space: nowrap; }
.forum-poster-preview { position: relative; display: block; width: 100%; aspect-ratio: 1.7; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #12375e; cursor: pointer; }
.forum-poster-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.forum-poster-preview span { position: absolute; right: 10px; bottom: 10px; padding: 7px 10px; border-radius: 7px; background: #102d4ad9; color: #fff; font-size: 12px; font-weight: 700; }
.forum-poster-dialog { position: fixed; width: min(calc(100% - 24px), 560px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 12px; background: #143455; box-shadow: 0 18px 50px #102e4d60; }
.forum-poster-dialog::backdrop { background: #102e4de0; }
.forum-poster-dialog img { display: block; width: 100%; height: auto; }
.forum-poster-dialog button { position: sticky; z-index: 1; top: 8px; float: right; width: 38px; height: 38px; margin: 8px 8px -46px 0; border: 0; border-radius: 50%; background: #fff; color: #17324b; font-size: 25px; cursor: pointer; }
#forum-title { margin: 15px 0 4px; font-size: 24px; }
.screen .forum-tagline { margin: 0 0 11px; font-size: 14px; }
.heading-secondary { color: #4476a3; font-size: .68em; font-weight: 600; white-space: nowrap; }
.section-title { margin: 26px 0 12px; font-size: 19px; font-weight: 700; }
.ticket-list { display: grid; gap: 11px; }
.ticket-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 81px; padding: 15px; border: 1px solid #d7e2ee; border-radius: 14px; background: #fff; color: #17324b; text-align: left; }
.ticket-card[aria-pressed="true"] { border-color: #2a6ba4; background: #eef6fd; box-shadow: inset 0 0 0 1px #2a6ba4; }
.ticket-card span:first-child { display: flex; flex-direction: column; gap: 5px; }
.ticket-card strong { font-size: 17px; }
.ticket-card small { color: #607384; font-size: 14px; }
.ticket-card em { color: #607383; font-size: 12px; font-style: normal; }
.ticket-intro { margin: -3px 0 14px; color: #64798d; font-size: 14px; line-height: 1.45; }
.forum-overview { margin: 0; }
.forum-overview p { margin: 0; color: #4e6982; font-size: 14px; line-height: 1.45; }
.forum-overview .forum-date { margin-top: 8px; color: #315c80; font-weight: 700; }
.forum-program { margin-top: 14px; padding: 17px 18px; border: 1px solid #d9e4ee; border-radius: 15px; background: #fff; }
.forum-program h2 { margin: 0 0 12px; font-size: 19px; }
.forum-program ul { display: grid; gap: 10px; margin: 0; padding-left: 21px; color: #254763; font-size: 15px; line-height: 1.4; }
.forum-program li::marker { color: #ac724e; }
.forum-program p { margin: 13px 0 0; color: #64798d; font-size: 14px; line-height: 1.4; }
.forum-booking { margin: 15px 2px 0; color: #536f87; font-size: 15px; line-height: 1.5; }
.forum-booking a { color: #1b5c91; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ticket-select { flex: none; width: 23px; height: 23px; border: 2px solid #a5bacd; border-radius: 50%; }
.ticket-card[aria-pressed="true"] .ticket-select { border: 7px solid #2a6ba4; background: #fff; }
.ticket-note, .selection-message { margin: 13px 0 0; color: #61768b; font-size: 14px; line-height: 1.4; }
.selection-message { color: #1d598c; font-weight: 650; }
.ticket-issue { margin-top: 14px; }
.ticket-issued { display: grid; justify-items: center; gap: 10px; margin-top: 25px; padding: 20px 16px; border: 1px solid #bfd4e6; border-radius: 16px; background: #fff; text-align: center; }
.ticket-issued .eyebrow { margin: 0; }
.ticket-issued h2 { margin: 0; color: #143b62; font-size: 22px; }
.ticket-issued p { margin: 0; color: #5c7387; font-size: 14px; line-height: 1.4; }
.ticket-issued img { display: block; width: min(100%, 340px); aspect-ratio: 1; margin: 4px 0; background: #fff; }
.ticket-issued strong { color: #153c62; font-size: 14px; letter-spacing: .06em; overflow-wrap: anywhere; }
.ticket-issued #forum-ticket-hint { max-width: 320px; }
.ticket-cancel { margin-top: 3px; padding: 7px 3px; border: 0; background: transparent; color: #61768b; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ticket-cancel:hover, .ticket-cancel:focus-visible { color: #a34d3b; }
.ticket-cancel:disabled { opacity: .55; cursor: wait; }

.simple-panel, .reward-panel { padding: 18px; border: 1px solid #d9e3ed; border-radius: 15px; background: #fff; }
.people-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.people-heading h1 { margin-bottom: 7px; }
.people-heading > span { color: #577895; font-size: 14px; font-weight: 700; }
.people-intro { margin: 0 0 17px; color: #61768b; font-size: 13px; line-height: 1.4; }
.people-message { padding: 14px; border: 1px solid #d9e3ed; border-radius: 12px; background: #fff; color: #55718a; font-size: 14px; }
.people-list { display: grid; gap: 8px; }
.person-card { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 74px; padding: 10px 12px; border: 1px solid #d9e3ed; border-radius: 13px; background: #fff; }
.person-avatar { position: relative; display: grid; flex: none; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: #dfeefa; color: #1a5687; font-size: 18px; font-weight: 750; }
.person-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.person-avatar img[data-fit="contain"], .person-avatar img[data-fit="full"] { object-fit: contain; }
.person-avatar img[data-fit="portrait"] { object-position: 50% 30%; }
.person-avatar img[data-fit="landscape"], .person-avatar img[data-fit="face"] { object-position: 50% 54%; transform: scale(1.35); }
.person-copy { display: block; min-width: 0; flex: 1; }
.person-copy strong, .person-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-copy strong { color: #173b5b; font-size: 15px; line-height: 1.25; }
.person-copy small { margin-top: 2px; color: #5b7287; font-size: 12px; line-height: 1.2; }
.person-details { display: flex; align-items: center; gap: 7px; margin-top: 5px; color: #48759b; font-size: 11px; line-height: 1.1; }
.person-details b { padding: 3px 6px; border-radius: 999px; background: #e1f3e9; color: #276a4c; font-size: 10px; white-space: nowrap; }
.person-copy strong .person-resident { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #fff4d6; color: #7a5200; font-size: 11px; font-weight: 700; line-height: 14px; vertical-align: 1px; }
.simple-panel h2 { margin: 0; font-size: 18px; }
.simple-panel p, .simple-panel li, .reward-panel p { color: #61768b; font-size: 15px; line-height: 1.45; }
.simple-panel p:last-child, .reward-panel p:last-child { margin-bottom: 0; }
.simple-panel ol { margin: 13px 0; padding-left: 23px; }
.simple-panel li + li { margin-top: 9px; }
.profile-intro { display: flex; align-items: center; gap: 12px; margin-bottom: 19px; }
.profile-photo { width: 60px; height: 60px; font-size: 23px; }
.profile-intro span:last-child { display: flex; flex-direction: column; gap: 5px; }
.profile-intro strong { font-size: 19px; }
.profile-intro small { color: #607384; font-size: 14px; }
.profile-lead { margin: -10px 0 18px; color: #61778c; font-size: 15px; line-height: 1.4; }
.form-status { padding: 12px 14px; margin: 0 0 17px; border: 1px solid #bfd9e9; border-radius: 11px; background: #e9f6fd; color: #165d82; font-size: 14px; line-height: 1.4; }
.form-status.is-error { border-color: #ebbbbb; background: #fff3f1; color: #a13a2d; }
.membership-card { margin-bottom: 12px; padding: 18px 17px; border-radius: 17px; background: #174a79; color: #fff; }
.membership-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #bcd8ef; font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.membership-top b { padding: 6px 10px; border-radius: 999px; background: #e4f3e8; color: #276747; font-size: 11px; letter-spacing: 0; }
.membership-top b.is-soon { background: #fff0cd; color: #8a5d13; }
.membership-top b.is-overdue { background: #ffe1dc; color: #a23f31; }
.membership-card h2 { margin: 17px 0 5px; color: #fff; font-size: 22px; }
.membership-card > p { margin: 0; color: #e0edf7; font-size: 14px; line-height: 1.4; }
.membership-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #ffffff38; }
.membership-facts span { display: grid; gap: 5px; min-width: 0; }
.membership-facts small { color: #bdd5e9; font-size: 11px; }
.membership-facts strong { color: #fff; font-size: 13px; line-height: 1.3; }
.profile-progress { margin-bottom: 12px; padding: 15px 16px; border: 1px solid #d3e1ed; border-radius: 15px; background: #fff; }
.profile-progress > div:first-child, .profile-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profile-progress > div:first-child { color: #173c5e; font-size: 14px; }
.profile-progress > div:first-child span { color: #657187; }
.profile-progress progress { display: block; width: 100%; height: 8px; margin: 11px 0 8px; overflow: hidden; border: 0; border-radius: 99px; background: #e4edf5; }
.profile-progress progress::-webkit-progress-bar { background: #e4edf5; }
.profile-progress progress::-webkit-progress-value { border-radius: 99px; background: #1d5b90; }
.profile-progress progress::-moz-progress-bar { border-radius: 99px; background: #1d5b90; }
.profile-progress-meta { color: #5e7384; font-size: 11px; }
/* Cabinet audit items 13 and 14: what is still missing, and what the questionnaire pays. */
.profile-missing { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid #e4edf5; color: #173c5e; font-size: 14px; line-height: 1.35; }
.profile-missing[hidden], .profile-reward-total[hidden] { display: none; }
.profile-missing-fill { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 11px; background: #1d5b90; color: #fff; font: inherit; font-weight: 650; cursor: pointer; }
.profile-reward-total { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: #173c5e; font-size: 14px; line-height: 1.35; }
.profile-reward-total .stroycoin { flex: none; height: .8em; }
.profile-accordion > summary strong .section-reward { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 7px; border-radius: 99px; background: #fff4d6; color: #7a5200; font-size: 12px; font-weight: 700; line-height: 16px; vertical-align: 2px; white-space: nowrap; }
.section-reward .stroycoin { height: 12px; }
.profile-media { display: grid; gap: 12px; margin: 0; }
.media-item, .form-section, .restore-account { padding: 19px; border: 1px solid #d7e3ee; border-radius: 16px; background: #fff; }
.media-item h2, .form-section h2 { margin: 0; font-size: 19px; line-height: 1.2; }
.media-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.media-title span { flex: none; color: #4c7493; font-size: 13px; }
.media-item p, .form-section p, .private-access p { margin: 8px 0 15px; color: #61768b; font-size: 14px; line-height: 1.43; }
.media-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.media-action { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 8px 13px; border: 1px solid #1b5c91; border-radius: 9px; background: #1b5c91; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.media-action.secondary { border-color: #c6d6e5; background: #fff; color: #1d547e; }
.media-action:has(input:disabled) { opacity: .55; pointer-events: none; }
.media-action input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.media-hint { display: block; margin-top: 11px; color: #607384; font-size: 13px; line-height: 1.35; }
#profile-video { display: block; width: 100%; max-height: 330px; margin: 13px 0; border-radius: 9px; background: #102d48; }
/* A poster with ▶: the video itself is downloaded only after a tap. */
.video-preview { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 330px; margin: 13px 0; padding: 0; border: 0; border-radius: 9px; background: #102d48; overflow: hidden; cursor: pointer; }
.video-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.video-play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; padding-left: 5px; border-radius: 50%; background: rgba(255, 255, 255, .93); color: #1b5c91; font-size: 25px; line-height: 62px; text-align: center; box-shadow: 0 4px 18px rgba(4, 21, 38, .3); box-sizing: border-box; }
.video-preview:hover .video-play, .video-preview:focus-visible .video-play { background: #fff; }
.video-preview-note { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 12px; background: rgba(4, 21, 38, .72); color: #fff; font-size: 13px; text-align: center; }
.video-preview[data-state="processing"] .video-play { opacity: .45; }
.video-preview:disabled { cursor: default; }
.video-state { margin: 13px 0; padding: 12px 14px; border-radius: 9px; background: #eef4fa; color: #36556f; font-size: 14px; line-height: 1.4; }
.profile-form { display: grid; gap: 12px; }
.profile-accordion { overflow: hidden; border: 1px solid #d3e1ed; border-radius: 15px; background: #fff; }
.profile-accordion[hidden] { display: none; }
.profile-accordion > summary { display: grid; grid-template-columns: 40px 1fr auto 15px; align-items: center; gap: 9px; min-height: 68px; padding: 11px 13px; list-style: none; cursor: pointer; }
.profile-accordion > summary::-webkit-details-marker { display: none; }
.profile-accordion > summary .section-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #e7f2fb; color: #195b91; font-size: 20px; }
/* Section icons are line drawings like the bottom menu (owner 20.10.2026, cabinet audit item 12). The old font glyphs stay
   in the protected questionnaire markup, hidden, so the page reads the same to screen readers. */
.profile-accordion > summary .section-icon { font-size:0; }
.profile-accordion > summary .section-icon::before { content:""; width:24px; height:24px; background:currentColor; -webkit-mask:var(--section-icon) center/contain no-repeat; mask:var(--section-icon) center/contain no-repeat; }
.profile-accordion[data-profile-section="main"] { --section-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c.7-4 3.5-6.2 7-6.2s6.3 2.2 7 6.2'/%3E%3C/svg%3E"); }
.profile-accordion[data-profile-section="about"] { --section-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3.5' width='15' height='17' rx='2'/%3E%3Cpath d='M8 8.5h8M8 12h8M8 15.5h5'/%3E%3C/svg%3E"); }
.profile-accordion[data-profile-section="company"] { --section-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20.5v-15l7.5-2v17M12.5 8.5H19v12M3 20.5h18M8 8h2M8 11.5h2M8 15h2M15 12h1.5M15 15.5h1.5'/%3E%3C/svg%3E"); }
.profile-accordion[data-profile-section="contacts"] { --section-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h2.8l1.5 4-2 1.4a10 10 0 0 0 5.8 5.8l1.4-2 4 1.5v2.8a2 2 0 0 1-2.2 2A16 16 0 0 1 5 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E"); }
.profile-accordion[data-profile-section="media"] { --section-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5a2 2 0 0 1 2-2h2l1.5-2h5l1.5 2h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='12.5' r='3.5'/%3E%3C/svg%3E"); }
.profile-accordion[data-profile-section="security"] { --section-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8.5 10.5v-3a3.5 3.5 0 0 1 7 0v3M12 14.5V17'/%3E%3C/svg%3E"); }
.profile-accordion > summary > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.profile-accordion > summary strong { color: #173b5c; font-size: 16px; font-weight: 700; }
.profile-accordion > summary small { overflow: hidden; color: #607384; font-size: 11px; font-weight: 450; text-overflow: ellipsis; white-space: nowrap; }
.profile-accordion > summary b { color: #5d7287; font-size: 12px; font-weight: 550; }
.profile-accordion > summary i { color: #55748f; font-size: 18px; font-style: normal; transition: transform .18s ease; }
.profile-accordion[open] > summary { border-bottom: 1px solid #dce7ef; }
.profile-accordion[open] > summary i { transform: rotate(180deg); }
.profile-section-body { display: grid; gap: 14px; padding: 16px 14px 15px; }
#registration-password { display: grid; gap: 14px; }
.section-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.section-actions .save-profile { justify-content: center; }
.section-later { min-height: 49px; padding: 9px 13px; border: 1px solid #cbd9e5; border-radius: 10px; background: #fff; color: #63798f; font: inherit; font-size: 13px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.specializations { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.specializations legend { margin-bottom: 2px; color: #17324b; font-size: 14px; font-weight: 650; }
.specializations legend b { color: #aa5b3a; font-size: 12px; }
.specialization-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.specialization-chips:empty { display: none; }
.specialization-chips span { padding: 7px 9px; border-radius: 999px; background: #dfeefb; color: #145486; font-size: 11px; }
.specialization-picker { border: 1px dashed #c8d8e5; border-radius: 10px; }
.specialization-picker > summary { padding: 10px 12px; color: #3f7197; cursor: pointer; font-size: 13px; list-style: none; }
.specialization-picker > summary::-webkit-details-marker { display: none; }
.specialization-options { display: grid; max-height: 250px; overflow: auto; border-top: 1px solid #e1eaf1; }
.specialization-options label { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #edf2f6; color: #27445e; font-size: 14px; }
.specialization-options input { width: 18px; height: 18px; }
.form-field.is-invalid input, .form-field.is-invalid select, .form-field.is-invalid textarea, .specializations.is-invalid .specialization-picker { border-color: #bd5548; box-shadow: 0 0 0 3px #e8aaa33a; }
.form-section { display: grid; gap: 14px; }
.form-section h2 { margin-bottom: -5px; }
.form-section p { margin: -3px 0 2px; }
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: #17324b; font-size: 14px; font-weight: 650; }
.form-field b { color: #aa5b3a; font-size: 12px; font-weight: 650; }
.form-field small { color: #627284; font-size: 12px; font-weight: 500; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #bdcedd; border-radius: 9px; outline: none; background: #fff; color: #1b354d; font-size: 16px; font-weight: 450; }
.form-field select { padding-right: 31px; }
.form-field textarea { min-height: 96px; resize: vertical; line-height: 1.4; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #607384; opacity: 1; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #316fa3; box-shadow: 0 0 0 3px #9fcaee5a; }
.phone-control { display: flex; align-items: stretch; border: 1px solid #bdcedd; border-radius: 9px; overflow: hidden; }
.phone-control:focus-within { border-color: #316fa3; box-shadow: 0 0 0 3px #9fcaee5a; }
.phone-control strong { display: grid; place-items: center; min-width: 53px; padding: 0 9px; background: #edf4fb; color: #234d73; font-size: 16px; }
.form-field .phone-control input { border: 0; border-radius: 0; box-shadow: none; }
.social-details { overflow: hidden; border: 1px solid #d8e3ed; border-radius: 10px; }
.social-details summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; }
.social-details summary::-webkit-details-marker { display: none; }
.social-details summary span:first-child { display: grid; gap: 3px; }
.social-details summary small { color: #5e7385; font-size: 13px; font-weight: 450; }
.social-details summary span:last-child { color: #507392; font-size: 22px; transition: transform .2s ease; }
.social-details[open] summary span:last-child { transform: rotate(180deg); }
.social-fields { display: grid; gap: 14px; padding: 0 14px 15px; }
.save-profile { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 10px 16px; border: 0; border-radius: 10px; background: #15598f; color: white; font-size: 16px; font-weight: 700; }
.save-profile:disabled { opacity: .6; }
.save-profile span { font-size: 23px; }
.private-access { margin-top: 14px; scroll-margin-top: 82px; }
.security-form { display: grid; gap: 12px; }
.security-form button { width: 100%; }
.private-access button, .restore-account button { min-height: 44px; padding: 8px 14px; border: 1px solid #b6cede; border-radius: 9px; background: #eaf3fb; color: #1d5a8a; font-size: 14px; font-weight: 700; }
.sign-out { width: 100%; min-height: 44px; margin-top: 14px; padding: 8px 14px; border: 1px solid #d3e1ed; border-radius: 12px; background: #fff; color: #5b7285; font-size: 14px; font-weight: 600; }
.sign-out[hidden] { display: none; }
.form-field .password-control { position: relative; min-width: 0; }
.form-field:has(.password-control), .password-form-status { scroll-margin-block: 90px 110px; }
.form-field .password-control input { min-height: 48px; padding-right: 56px; }
.form-field .password-toggle { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #4d6579; cursor: pointer; }
.form-field .password-toggle:focus-visible { outline: 2px solid #316fa3; outline-offset: -3px; }
.form-field .password-toggle[aria-pressed="false"] .password-slash { display: none; }
.form-field .password-hint { color: #596b7b; font-size: 13px; font-weight: 450; line-height: 1.45; }
.form-field .password-field-error { margin: 0; color: #a4372d; font-size: 13px; font-weight: 550; line-height: 1.45; }
.form-field input[aria-invalid="true"] { border-color: #bd5548; box-shadow: 0 0 0 3px #e8aaa33a; outline-color: #bd5548; }
.security-form .security-status { margin: 0; padding: 10px 12px; border: 1px solid #b6cede; border-radius: 9px; background: #eaf3fb; color: #214e70; font-size: 14px; line-height: 1.45; }
.security-form .security-status.is-error { border-color: #ddb9b3; background: #fff3f0; color: #a4372d; }
.unsubscribe-status { margin: 8px 0 0; padding: 10px 12px; border: 1px solid #b6cede; border-radius: 9px; background: #eaf3fb; color: #214e70; font-size: 14px; line-height: 1.45; }
.unsubscribe-status.is-error { border-color: #ddb9b3; background: #fff3f0; color: #a4372d; }
.unsubscribe-status[hidden] { display: none; }
#email-code-resend:disabled { opacity: .6; cursor: default; }
.security-form input:disabled, .security-form button:disabled { cursor: wait; opacity: .65; }
.restore-account { margin-top: 14px; }
.restore-account summary { cursor: pointer; color: #205c89; font-size: 14px; font-weight: 650; }
.restore-account form { display: grid; gap: 11px; margin-top: 14px; }
.restore-account form p { margin: 0; color: #5e7385; font-size: 13px; line-height: 1.4; }
.reward-panel { margin-bottom: 13px; background: #f0f6fb; }
.reward-panel .eyebrow { margin-bottom: 5px; }
.reward-count { display: flex; align-items: baseline; gap: 9px; }
.reward-count strong { color: #164c7a; font-size: 47px; line-height: 1; }
.reward-count span { color: #56718a; font-size: 16px; }
.stars { margin: 11px 0; color: #3a78ad; font-size: 26px; letter-spacing: 3px; white-space: nowrap; }
.reward-pending { padding-top: 12px; border-top: 1px solid #d9e4ee; }
.reward-actions { display: grid; gap: 9px; margin: 14px 0; }
.reward-actions button { min-height: 47px; padding: 10px 14px; border: 1px solid #1b5c91; border-radius: 9px; background: #1b5c91; color: #fff; font-size: 15px; font-weight: 700; text-align: center; }
.reward-actions button + button { border-color: #b5ccdf; background: #eaf3fb; color: #1d598c; }
.reward-actions.secondary button { border-color: #cbd9e6; background: #fff; color: #315f83; font-size: 14px; }
.reward-actions button:disabled { opacity: .48; }
.reward-details { margin-top: 16px; border-top: 1px solid #e1eaf2; }
.reward-details summary { padding-top: 15px; color: #285e8c; cursor: pointer; font-size: 14px; font-weight: 700; }
.reward-milestones { margin-top: 10px; }
.reward-milestones p { margin: 6px 0; font-size: 13px; }
.reward-milestones b { color: #a7633e; }

.event-dialog { position: fixed; width: min(calc(100% - 16px), 480px); max-height: 84dvh; margin: auto auto 0; padding: 14px 19px calc(24px + env(safe-area-inset-bottom)); overflow: auto; border: 1px solid #cfdeeb; border-radius: 20px 20px 0 0; background: #fff; color: #17324b; box-shadow: 0 -16px 40px #102e4d37; font-family: TildaSans, Arial, sans-serif; }
.event-dialog::backdrop { background: #102e4db0; }
.dialog-grip { width: 42px; height: 4px; margin: 0 auto 19px; border-radius: 10px; background: #bdccda; }
.dialog-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dialog-top h2 { margin: 0; font-size: 23px; line-height: 1.17; }
.dialog-close { flex: none; width: 39px; height: 39px; border: 0; border-radius: 10px; background: #eef3f8; color: #17324b; font-size: 26px; line-height: 1; }
.dialog-description { color: #5f7388; font-size: 15px; line-height: 1.4; }
.event-facts { margin: 17px 0 0; }
.event-facts div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid #e4edf4; font-size: 14px; }
.event-facts dt { color: #5f7386; }
.event-facts dd { margin: 0; font-weight: 650; }
.dialog-forum { margin-top: 18px; background: #123b64; color: #fff; }

/* Match the published home workspace on every other participant screen, the event page and checkout included. */
@media (min-width: 900px) {
  .app-shell:has(:is([data-screen="events"], [data-screen="people"], [data-screen="tickets"], [data-screen="profile"], [data-screen="forum"], [data-screen="rewards"], .commerce-screen):not([hidden])) { width: 100%; }
  .app-shell:has(:is([data-screen="events"], [data-screen="people"], [data-screen="tickets"], [data-screen="profile"], [data-screen="forum"], [data-screen="rewards"], .commerce-screen):not([hidden])) .app-header { min-height: 76px; padding-inline: max(28px, calc((100% - 1100px) / 2)); }
  .app-shell:has(:is([data-screen="events"], [data-screen="people"], [data-screen="tickets"], [data-screen="profile"], [data-screen="forum"], [data-screen="rewards"], .commerce-screen):not([hidden])) .app-main { max-width: 1156px; margin: 0 auto; padding: 24px 28px; }
  .app-shell:has(:is([data-screen="events"], [data-screen="people"], [data-screen="tickets"], [data-screen="profile"], [data-screen="forum"], [data-screen="rewards"], .commerce-screen):not([hidden])) .bottom-nav { top: 0; bottom: auto; width: 440px; min-height: 76px; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .app-shell:has(:is([data-screen="events"], [data-screen="people"], [data-screen="tickets"], [data-screen="profile"], [data-screen="forum"], [data-screen="rewards"], .commerce-screen):not([hidden])) .bottom-nav button { position: relative; flex-direction: row; gap: 8px; min-height: 76px; color: #537391; font-size: 1rem; }
  .app-shell:has(:is([data-screen="events"], [data-screen="people"], [data-screen="tickets"], [data-screen="profile"], [data-screen="forum"], [data-screen="rewards"], .commerce-screen):not([hidden])) .bottom-nav button[aria-current="page"] { color: #21689f; }
  .app-shell:has(:is([data-screen="events"], [data-screen="people"], [data-screen="tickets"], [data-screen="profile"], [data-screen="forum"], [data-screen="rewards"], .commerce-screen):not([hidden])) .bottom-nav button[aria-current="page"]::after { content: ''; position: absolute; bottom: 12px; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: #21689f; }
  .people-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #month-list, #type-list { display: grid; gap: 16px; align-items: start; }
}
/* Computer (owner 21.10.2026, package 3, items 22–25): content and header keep to 1 100 px, events read as one list,
   the questionnaire is one column of 560 px like the people filters, and secondary text is at least 13 px. */
@media (min-width: 900px) {
  [data-screen="profile"] { max-width: 560px; margin-inline: auto; }
  .people-event-filter, .people-search-label { max-width: 560px; }
  .brand small, .eyebrow, .attendance-banner small, .person-copy small, .person-details, .person-details b, .membership-top, .membership-top b, .membership-facts small, .profile-progress-meta, .profile-accordion > summary small, .profile-accordion > summary b, .specializations legend b, .specialization-chips span, .form-field b, .form-field small, .coin-line small, .home-ticket-controls span, .home-membership-note, .ticket-entry-note, .ticket-card em, .forum-open-pill, .home-footnote { font-size: 13px; }
  .coin-small { font-size: 13px !important; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .app-shell:has(:is([data-screen="events"], [data-screen="people"], [data-screen="tickets"], [data-screen="profile"], [data-screen="forum"], [data-screen="rewards"], .commerce-screen):not([hidden])) .bottom-nav { left: 57%; width: 400px; }
  .app-shell:has(:is([data-screen="events"], [data-screen="people"], [data-screen="tickets"], [data-screen="profile"], [data-screen="forum"], [data-screen="rewards"], .commerce-screen):not([hidden])) .bottom-nav button { font-size: .875rem; gap: 6px; }
}

@media (max-width: 360px) {
  .app-header { padding-inline: 15px; }
  .app-main { padding-inline: 14px; }
  .forum-card { padding-inline: 15px; }
  .forum-card h2 { font-size: 23px; }
  .forum-card h2 span { font-size: 15px; }
  .event-row { grid-template-columns: 43px 1fr 15px; gap: 7px; }
  .stars { font-size: 23px; letter-spacing: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Questionnaire spacing (Л25): the profile markup is fixed, so only spacing and visibility change here. */
#email-verify-current { margin-bottom: 18px; }
.avatar-preset small { display: block; margin-top: 6px; }
.avatar-preset + .media-actions { margin-top: 12px; }
[data-screen="profile"]:has(#profile-photo[hidden]) .avatar-preset { display: none; }
#profile-form textarea { min-height: 92px; resize: vertical; overflow-wrap: anywhere; }

/* A field the browser scrolls to after a failed submit stays below the sticky header (Л26). */
.app-main :is(input, select, textarea, fieldset) { scroll-margin-top: 112px; scroll-margin-bottom: 96px; }

/* The header is the same on every screen, so the logo does not jump when leaving the home page (Л30). */
.app-header { padding-top: calc(8px + env(safe-area-inset-top)); }
.brand-line i { display: none; }
.nav-icon svg { display: block; width: 24px; height: 24px; }

/* Package 3 (owner 21.10.2026): the questionnaire shows only the required count, and the coin icon stays visible on the dark gift card. */
#total-progress { display: none; }
.profile-progress-meta, .profile-progress-meta small { font-size: 13px; }
.registration-gift .stroycoin { filter: brightness(0) invert(1); }

/* Owner 22.10.2026: «Кто видит мои данные» is one block under the card's readiness, and each choice is saved at once. */
.privacy-card { display: grid; gap: 10px; margin-bottom: 12px; padding: 15px 16px; border: 1px solid #d3e1ed; border-radius: 15px; background: #fff; }
.privacy-card[hidden] { display: none; }
.privacy-card h2 { margin: 0; color: #173c5e; font-size: 16px; line-height: 1.25; }
.privacy-lead { margin: -6px 0 0; color: #5e7384; font-size: 13px; line-height: 1.4; }
.privacy-row { display: grid; gap: 5px; min-width: 0; color: #17324b; font-size: 14px; font-weight: 650; }
.privacy-row select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 31px 9px 12px; border: 1px solid #bdcedd; border-radius: 9px; background: #fff; color: #1b354d; font-size: 16px; font-weight: 450; }
.privacy-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding-top: 2px; color: #17324b; font-size: 14px; font-weight: 650; line-height: 1.35; }
.privacy-check input { width: 20px; height: 20px; margin: 0; }
.privacy-hint { margin: 0; color: #5e7384; font-size: 13px; line-height: 1.4; }
.privacy-message { margin: 0; color: #23603f; font-size: 13px; font-weight: 650; }
.privacy-message:empty { display: none; }
/* Owner 22.10.2026: the open list of specializations folds from its heading or from «Готово» under the options. */
.specialization-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.specialization-picker > summary::after { content: "⌄"; color: #3f7197; font-size: 16px; line-height: 1; }
.specialization-picker[open] > summary { color: #17324b; font-weight: 650; }
.specialization-picker[open] > summary::after { transform: rotate(180deg); }
.specialization-done { display: block; width: calc(100% - 24px); min-height: 44px; margin: 10px 12px 12px; border: 0; border-radius: 9px; background: #1d5b90; color: #fff; font-size: 15px; font-weight: 650; cursor: pointer; }