/* ════════════════════════════════════════════════════════════
   НОВЫЕ ЛЮДИ — ПОРТАЛ
   Дизайн-система «Sharp Whitespace», перекрашенная в бирюзовый.
   Линии вместо теней · острый радиус 4px · много воздуха · тихий цвет.
   ════════════════════════════════════════════════════════════ */
:root{
  /* — Surfaces & ink — */
  --bg:            #F7F6F2;
  --surface:       #FFFFFF;
  --ink:           #15181F;
  --ink-soft:      #3A3C42;
  --muted:         #80847D;
  --hairline:      #E3E1D8;
  --hairline-faint:#EEEDE6;

  /* — Brand · бирюзовый (вместо малинового) — */
  --brand:        #0FB5A6;   /* основной бирюзовый акцент */
  --brand-deep:   #0A8C82;   /* насыщенный — заливка марки, hover */
  --brand-ink:    #06433E;   /* тёмно-бирюзовый текст на tint */
  --brand-tint:   #D6F3EF;   /* светлый фон бейджей/выделений */
  --brand-cream:  #F0FBF9;   /* мягкая бирюзовая подложка */

  /* — Семантические акценты (fg + tint) — */
  --blue:   #3F6FA8;  --blue-tint:   #DBEAFE;
  --mint:   #2F6E4A;  --mint-tint:   #DCFCE7;
  --peach:  #B86A36;  --peach-tint:  #FED7AA;
  --rose:   #B25B5B;  --rose-tint:   #FECACA;
  --lavender:#7257A6; --lavender-tint:#EDE3FA;

  /* — Radius — */
  --r-sm: 4px; --r-md: 6px; --r-pill: 999px;

  /* — Type — */
  --font-ui:    'Inter', system-ui, sans-serif;
  --font-brand: 'Manrope', 'Inter', sans-serif;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
/* запрет масштабирования жестами (двойной тап / pinch) */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html.is-mobile, html.is-mobile body{ touch-action: pan-x pan-y; }
body{
  background: var(--bg);
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
button{ font-family: inherit; }

/* ─────────── Shell ─────────── */
.shell{ display:grid; grid-template-columns: 248px 1fr; min-height:100vh; }

.nav{
  position: sticky; top:0; align-self:start; height:100vh;
  border-right: 1px solid var(--hairline-faint);
  padding: 26px 22px; display:flex; flex-direction:column; gap:22px;
  background: var(--bg); overflow-y:auto;
}
.nav-brand{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.logo-img{ display:block; width:auto; }
.logo-nav{ height:78px; margin:-8px 0 -4px; }   /* официальный логотип в левом меню */
.logo-auth{ height:56px; }                       /* светлый вариант на тёмной панели */
.nav-region{ font-size:10px; color:var(--brand-deep); font-weight:600; text-transform:uppercase; letter-spacing:1.4px; margin-top:-10px; }
.auth-region{ font-size:11px; color:var(--brand); font-weight:600; text-transform:uppercase; letter-spacing:1.6px; margin-bottom:18px; }

.nav-group-label{
  font-size:10px; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px;
}
.nav-links a{
  display:flex; align-items:center; justify-content:space-between;
  text-decoration:none; color:var(--muted);
  font-size:16px; font-weight:500; padding:11px 2px; border-top:1px solid var(--hairline-faint);
  transition: color .12s; cursor:pointer; letter-spacing:-0.2px;
}
.nav-links a:first-child{ border-top:none; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--brand-deep); font-weight:600; }
.nav-links a .pip{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ─────────── Виджет уведомлений (плавающий колокольчик) ─────────── */
.nw{ position:fixed; right:28px; bottom:28px; z-index:60; }
.nw-fab{ width:58px; height:58px; border-radius:var(--r-pill); background:var(--brand); border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative;
  transition:background .15s, transform .15s; box-shadow:0 8px 22px rgba(15,181,166,.30); }
.nw-fab:hover{ background:var(--brand-deep); transform:translateY(-1px); }
.nw-fab:active{ transform:translateY(0); }
.nw-bell{ display:block; }
.nw-badge{ position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px;
  border-radius:var(--r-pill); background:var(--ink); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); font-variant-numeric:tabular-nums; }
.nw-panel{ position:absolute; right:0; bottom:70px; width:340px; max-height:440px;
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-sm); overflow:hidden; box-shadow:0 12px 34px rgba(21,24,31,.14); }
.nw-panel[hidden]{ display:none; }
.nw-head{ padding:16px 20px; font-size:13px; font-weight:600; border-bottom:1px solid var(--hairline-faint); flex:none; }
.nw-body{ overflow-y:auto; }
.nw-body .notif{ grid-template-columns:10px 1fr; gap:12px; padding:14px 18px; }
.nw-empty{ padding:44px 20px; text-align:center; color:var(--muted); font-size:14px; }

@media (max-width:980px){ .nw{ right:18px; bottom:18px; } .nw-panel{ width:300px; } }

/* ─────────── Уведомления (список) ─────────── */
.notif-list{ border:1px solid var(--hairline); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); }
.notif{ display:grid; grid-template-columns:14px 1fr; gap:14px; padding:18px 22px; border-top:1px solid var(--hairline-faint); }
.notif:first-child{ border-top:none; }
.notif.unread{ background:var(--brand-cream); }
.notif-mark{ width:8px; height:8px; border-radius:var(--r-pill); background:var(--hairline); margin-top:6px; }
.notif.unread .notif-mark{ background:var(--brand); }
.notif-title{ font-size:14.5px; font-weight:600; margin-bottom:5px; }
.notif-text{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); }
.notif-foot{ display:flex; gap:16px; align-items:center; margin-top:10px; font-size:12px; color:var(--muted); }
.notif-link{ color:var(--brand-deep); font-weight:500; text-decoration:none; cursor:pointer; }

.nav-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--hairline-faint); }
.nav-user{ display:flex; align-items:center; gap:10px; }
.nav-user .name{ font-size:12.5px; font-weight:500; }
.nav-user .role{ font-size:11px; color:var(--muted); }
.nav-foot .logout{ margin-top:12px; font-size:11.5px; color:var(--muted); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; }

/* role switch */
.role-switch{ margin-top:14px; }

/* ─────────── Content ─────────── */
.content{ overflow:hidden; }
.wrap{ max-width: 1000px; margin:0 auto; padding: 0 56px 80px; }

.page-head{ padding: 56px 0 32px; border-bottom:1px solid var(--hairline-faint); margin-bottom:40px; }
.page-head .eyebrow{
  font-size:11px; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:1.6px; margin-bottom:18px;
  display:flex; align-items:center; gap:8px;
}
.page-head h1{ margin:0; font-size:44px; font-weight:400; letter-spacing:-1.4px; line-height:1.06; }
.page-head h1 b{ font-weight:600; }
.page-head p{ margin:18px 0 0; font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:620px; text-wrap:pretty; }

.sub{
  font-size:10.5px; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:2px; margin:0 0 16px;
  display:flex; align-items:center; gap:10px;
}
.sub::after{ content:""; flex:1; height:1px; background:var(--hairline-faint); }
.block{ margin-bottom:44px; }

/* ─────────── Cards ─────────── */
.card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:24px 28px; }
.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }

/* ─────────── Buttons ─────────── */
.btn{ cursor:pointer; border-radius:var(--r-sm); font-weight:500; display:inline-flex; align-items:center; gap:8px; transition:.12s; }
.btn-primary{ background:var(--brand); color:#fff; border:1px solid var(--brand); padding:10px 18px; font-size:13px; }
.btn-primary:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }
.btn-dark{ background:var(--ink); color:#fff; border:1px solid var(--ink); padding:10px 18px; font-size:13px; }
.btn-dark:hover{ opacity:.9; }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--hairline); padding:10px 18px; font-size:13px; }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand-deep); }
.btn-ghost-sm{ background:transparent; color:var(--ink-soft); border:1px solid var(--hairline); padding:6px 12px; font-size:11.5px; border-radius:var(--r-sm); cursor:pointer; }
.btn-ghost-sm:hover{ border-color:var(--brand); color:var(--brand-deep); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn-block{ width:100%; justify-content:center; }

/* ─────────── Badges ─────────── */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.3px; padding:4px 9px; border-radius:var(--r-sm); }
.badge .dot{ width:5px; height:5px; border-radius:var(--r-pill); }
.badge-brand{ background:var(--brand-tint); color:var(--brand-ink); }
.badge-brand .dot{ background:var(--brand-deep); }
.badge-mint{ background:var(--mint-tint); color:var(--mint); } .badge-mint .dot{ background:var(--mint); }
.badge-peach{ background:var(--peach-tint); color:var(--peach); } .badge-peach .dot{ background:var(--peach); }
.badge-blue{ background:var(--blue-tint); color:var(--blue); } .badge-blue .dot{ background:var(--blue); }
.badge-rose{ background:var(--rose-tint); color:var(--rose); } .badge-rose .dot{ background:var(--rose); }
.badge-lav{ background:var(--lavender-tint); color:var(--lavender); } .badge-lav .dot{ background:var(--lavender); }
.badge-muted{ background:var(--bg); color:var(--muted); border:1px solid var(--hairline); }

/* ─────────── Tabs ─────────── */
.tabs{ display:inline-flex; gap:4px; padding:3px; background:var(--bg);
  border-radius:var(--r-md); border:1px solid var(--hairline-faint); }
.tabs span{ padding:7px 15px; border-radius:var(--r-sm); font-size:12.5px; font-weight:500; cursor:pointer; color:var(--muted); border:1px solid transparent; }
.tabs span.on{ background:var(--surface); color:var(--ink); border-color:var(--hairline); }

/* ─────────── Forms ─────────── */
.field{ margin-bottom:20px; }
.field-label{ font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:1.3px; margin-bottom:8px; display:block; }
.input, .select, .textarea{
  width:100%; font-family:inherit; font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm);
  padding:11px 14px;
}
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--brand); }
.textarea{ resize:vertical; min-height:96px; }
.hint{ font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.5; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* checkbox */
.check{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; cursor:pointer; }
.check .box{ width:18px; height:18px; border-radius:3px; margin-top:1px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; flex:none; border:1.5px solid var(--hairline); }
.check.on .box{ background:var(--brand); border-color:var(--brand); }
.check .lab{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); }

/* ─────────── Avatar ─────────── */
.avatar{ width:34px; height:34px; border-radius:var(--r-sm); font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; background:var(--brand-tint); color:var(--brand-ink); flex:none; }
.avatar-sm{ width:28px; height:28px; font-size:11px; }

/* ─────────── Stat / numerals ─────────── */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--hairline); border-radius:var(--r-sm); overflow:hidden; }
.stat{ padding:22px 24px; border-right:1px solid var(--hairline-faint); background:var(--surface); }
.stat:last-child{ border-right:none; }
.stat .v{ font-size:34px; font-weight:300; letter-spacing:-1px; font-variant-numeric:tabular-nums; line-height:1; }
.stat .l{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:1.3px; margin-top:10px; }

/* ─────────── Callout ─────────── */
.callout{ position:relative; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:22px 26px 22px 30px; }
.callout .bar{ position:absolute; left:0; top:20px; bottom:20px; width:3px; background:var(--brand); }
.callout .lab{ font-size:10.5px; color:var(--brand-deep); font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.callout p{ margin:0; font-size:16px; line-height:1.6; color:var(--ink); text-wrap:pretty; }

/* ─────────── Education cards ─────────── */
.edu-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); overflow:hidden; }
.edu-illus{ height:200px; display:flex; align-items:center; justify-content:center; }
.edu-body{ padding:28px 32px 32px; }
.edu-body .k{ font-size:11px; color:var(--brand-deep); font-weight:600; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px; }
.edu-body h2{ margin:0 0 14px; font-size:26px; font-weight:500; letter-spacing:-0.6px; line-height:1.2; }
.edu-body p{ margin:0 0 14px; font-size:15px; line-height:1.7; color:var(--ink-soft); }
.edu-body ul{ margin:0; padding-left:20px; }
.edu-body li{ font-size:14.5px; line-height:1.8; color:var(--ink-soft); }
.edu-progress{ display:flex; gap:5px; margin-bottom:24px; }
.edu-progress .seg{ flex:1; height:3px; border-radius:var(--r-pill); background:var(--hairline); }
.edu-progress .seg.done{ background:var(--brand); }
.edu-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:28px; }

/* people grid (leaders) */
.people{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--hairline); border-radius:var(--r-sm); overflow:hidden; }
.person{ display:flex; gap:14px; padding:18px 22px; border-right:1px solid var(--hairline-faint); border-bottom:1px solid var(--hairline-faint); align-items:center; background:var(--surface); }
.person .name{ font-size:14px; font-weight:600; }
.person .role{ font-size:12px; color:var(--muted); margin-top:3px; line-height:1.4; }

/* quiz */
.quiz-q{ border-top:1px solid var(--hairline-faint); padding:24px 0; }
.quiz-q:first-of-type{ border-top:none; }
.quiz-q .q{ font-size:16px; font-weight:500; margin-bottom:16px; line-height:1.4; }
.quiz-opt{ display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--hairline); border-radius:var(--r-sm); margin-bottom:10px; cursor:pointer; font-size:14px; transition:.12s; }
.quiz-opt:hover{ border-color:var(--brand); }
.quiz-opt.sel{ border-color:var(--brand); background:var(--brand-cream); }
.quiz-opt.correct{ border-color:var(--mint); background:var(--mint-tint); }
.quiz-opt.wrong{ border-color:var(--rose); background:var(--rose-tint); }
.quiz-opt .mk{ width:20px; height:20px; border-radius:var(--r-pill); border:1.5px solid var(--hairline); flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; }
.quiz-opt.sel .mk{ background:var(--brand); border-color:var(--brand); }
.quiz-opt.correct .mk{ background:var(--mint); border-color:var(--mint); }
.quiz-opt.wrong .mk{ background:var(--rose); border-color:var(--rose); }

/* ─────────── List rows (programs / events) ─────────── */
.row{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-sm); margin-bottom:12px; overflow:hidden; transition:border-color .12s; }
.row:hover{ border-color:var(--brand); }
.row-head{ display:grid; grid-template-columns:64px 1fr auto; gap:20px; padding:20px 24px; cursor:pointer; align-items:center; }
.row-date{ text-align:center; }
.row-date .d{ font-size:26px; font-weight:300; line-height:1; font-variant-numeric:tabular-nums; }
.row-date .m{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.row-main h3{ margin:0 0 8px; font-size:18px; font-weight:500; letter-spacing:-0.3px; line-height:1.3; }
.row-meta{ display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--muted); }
.row-meta .mi{ display:inline-flex; align-items:center; gap:6px; }
.row-aside{ display:flex; align-items:center; gap:12px; }
.row-detail{ border-top:1px solid var(--hairline-faint); padding:0 24px; max-height:0; overflow:hidden; transition:max-height .28s ease, padding .28s ease; }
.row.open .row-detail{ max-height:640px; padding:22px 24px 24px; }
.row-detail p{ margin:0 0 16px; font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
.chev{ color:var(--muted); transition:transform .2s; font-size:13px; }
.row.open .chev{ transform:rotate(180deg); }

/* program detail page hero */
.prog-hero{ border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--hairline); margin-bottom:32px; }
.prog-hero .band{ height:150px; }
.prog-hero .pb{ padding:26px 30px; background:var(--surface); }

/* registrants table */
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th{ text-align:left; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:1.3px; font-weight:600; padding:0 0 12px; border-bottom:1px solid var(--hairline); }
.tbl td{ padding:14px 0; border-bottom:1px solid var(--hairline-faint); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl .who{ display:flex; align-items:center; gap:12px; }

/* toast */
.toast{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:13px 22px; border-radius:var(--r-sm); font-size:13.5px;
  opacity:0; pointer-events:none; transition:.25s; z-index:50; display:flex; align-items:center; gap:10px; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .dot{ width:6px; height:6px; border-radius:var(--r-pill); background:var(--brand); }

/* empty / notice */
.notice{ background:var(--brand-cream); border:1px solid var(--brand-tint); border-radius:var(--r-sm); padding:14px 18px; font-size:13px; color:var(--brand-ink); line-height:1.5; display:flex; gap:10px; align-items:flex-start; }
.empty{ text-align:center; padding:56px 20px; color:var(--muted); font-size:14px; border:1px dashed var(--hairline); border-radius:var(--r-sm); }

/* ─────────── Онбординг (обязательное обучение) ─────────── */
.onboard{ min-height:100vh; display:flex; flex-direction:column; background:var(--bg); }
.onboard-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 40px; border-bottom:1px solid var(--hairline); background:var(--surface); position:sticky; top:0; z-index:5; }
.onboard-logo{ height:46px; width:auto; }
.onboard-step{ font-size:10.5px; color:var(--brand-deep); font-weight:600; text-transform:uppercase; letter-spacing:1.4px; }
.onboard-scroll{ flex:1; overflow-y:auto; }
.onboard-scroll .wrap{ max-width:760px; padding-bottom:64px; }
.onboard-scroll .page-head{ padding-top:48px; }

/* ─────────── Карточка члена партии — поля данных ─────────── */
.dl{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:1.3px; margin-bottom:8px; }
.dv{ font-size:15px; color:var(--ink); word-break:break-word; }

@media (max-width:980px){ .onboard-bar{ padding:14px 20px; } }

/* ─────────── Auth / landing ─────────── */
.auth-wrap{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-brand{ background:var(--ink); color:#fff; padding:60px 64px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.auth-brand .lg{ display:flex; align-items:center; gap:12px; }
.auth-brand h1{ font-size:46px; font-weight:400; letter-spacing:-1.6px; line-height:1.08; margin:0 0 20px; max-width:440px; }
.auth-brand h1 b{ font-weight:600; color:var(--brand); }
.auth-brand .sx{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.7); max-width:380px; }
.auth-brand .pts{ display:flex; flex-direction:column; gap:14px; margin-top:30px; }
.auth-brand .pt{ display:flex; gap:12px; font-size:14px; color:rgba(255,255,255,.85); align-items:center; }
.auth-brand .pt .n{ color:var(--brand); font-weight:600; font-variant-numeric:tabular-nums; }
.auth-form{ padding:60px 64px; display:flex; flex-direction:column; justify-content:center; max-width:560px; }
.auth-form h2{ font-size:24px; font-weight:500; letter-spacing:-0.5px; margin:0 0 6px; }
.auth-form .ah{ font-size:14px; color:var(--muted); margin:0 0 32px; }
.auth-switch{ font-size:13px; color:var(--muted); margin-top:20px; }
.auth-switch a{ color:var(--brand-deep); cursor:pointer; font-weight:500; text-decoration:none; }

@media (max-width:980px){
  .shell{ grid-template-columns:1fr; }
  .nav{ position:static; height:auto; }
  .wrap{ padding:0 24px 60px; }
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-brand{ display:none; }
  .grid-2,.grid-3,.people,.form-row{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .page-head h1{ font-size:34px; }
}