/* ═══════════════════════════════════════════════════════════════════════════
   quid-pro-quo.ru — дизайн-система «4 · Записная книжка» (выбор Димы, looks.html#nb). Волна 3, 23.09.2026.
   Один файл на весь сайт: шрифты, токены (светлая тетрадь и тёмная крафт-бумага), шапка с меню,
   кнопки чернилами, листы со скотчем, полароиды, стикеры, пустые состояния.
   Экранам поверх — guest.css (гость, приглашение), requests.css (запросы), стили карты в index.html.
   Порядок подключения: notebook.css → файл экрана. Шрифты свои (/fonts, OFL), внешних запросов нет.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/caveat-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/caveat-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/literata-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Literata';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/literata-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/literata-italic-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/literata-italic-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── токены ──────────────────────────────────────────────────────────────────
   --nb-bg страница (клетка) · --nb-paper лист · --nb-ink текст · --nb-mut подписи · --nb-line/--nb-rule линии
   --nb-red нитка «кто кого привёл» · --nb-pen чернила (ссылки, пометки) · --nb-marker жёлтый маркер
   --nb-photo рамка полароида · --nb-btn кнопка чернилами · --nb-hard «тень от линейки» */
:root{
  color-scheme:light;
  --nb-bg:#F3EEE0;--nb-paper:#FFFEF7;--nb-paper2:#FBF7EA;--nb-ink:#2B2A26;--nb-mut:#5A5444;--nb-line:#E0D7C0;--nb-rule:#CFC5AC;
  --nb-dash:#C9BFA5;--nb-grid:rgba(96,124,170,.13);--nb-margin:rgba(192,57,43,.26);--nb-lines:#DCE3EE;
  --nb-red:#C0392B;--nb-red-ink:#AD3223;--nb-on-red:#FFFFFF;--nb-pen:#1F3C88;--nb-pen-soft:rgba(31,60,136,.18);
  --nb-marker:#FFE877;--nb-marker-ink:#2B2A26;--nb-glow:rgba(255,226,90,.85);--nb-sticky:#FFF6B8;--nb-sticky-ink:#4D4739;
  --nb-green:#2E6B45;--nb-amber:#8A5A00;--nb-warn:#FBE9E3;
  --nb-tape:rgba(236,200,120,.62);--nb-tape2:rgba(160,200,190,.7);
  --nb-photo:#FFFFFF;--nb-photo-ink:#1F3C88;--nb-ini-a:#4A68B0;--nb-ini-b:#1F3C88;--nb-empty-photo:#D9D2C0;
  --nb-btn:#1F3C88;--nb-btn-ink:#FFFFFF;--nb-hard:#2B2A26;--nb-stamp:rgba(255,255,255,.45);
  --nb-shadow:rgba(60,48,20,.5);--nb-shadow-soft:rgba(60,48,20,.14);--nb-scrim:rgba(43,42,38,.32);
  --nb-hand:'Caveat','Segoe Print','Comic Sans MS',cursive;--nb-body:'Literata',Georgia,'Times New Roman',serif;
  --nb-ease:cubic-bezier(.2,.8,.25,1);
}
/* тёмная — «тёмная крафт-бумага»: коричневый лист, светлые чернила, полароиды остаются бумажными */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --nb-bg:#241D15;--nb-paper:#302619;--nb-paper2:#2B2217;--nb-ink:#EFE6D2;--nb-mut:#C9BB9F;--nb-line:#4A3D2D;--nb-rule:#6A5A45;
    --nb-dash:#5E4F3C;--nb-grid:rgba(240,220,180,.065);--nb-margin:rgba(232,120,100,.3);--nb-lines:rgba(240,220,180,.12);
    --nb-red:#E27462;--nb-red-ink:#F2917F;--nb-on-red:#1A120C;--nb-pen:#A4BCF7;--nb-pen-soft:rgba(164,188,247,.22);
    --nb-marker:#6E5A1C;--nb-marker-ink:#FFF4D6;--nb-glow:rgba(255,214,90,.7);--nb-sticky:#4A3D1F;--nb-sticky-ink:#EADFC4;
    --nb-green:#86CFA0;--nb-amber:#F0C06A;--nb-warn:#4A2A22;
    --nb-tape:rgba(206,166,96,.5);--nb-tape2:rgba(120,170,160,.5);
    --nb-photo:#EDE4CF;--nb-photo-ink:#1F3C88;--nb-ini-a:#4A68B0;--nb-ini-b:#1F3C88;--nb-empty-photo:#5A4C3A;
    --nb-btn:#A4BCF7;--nb-btn-ink:#16120C;--nb-hard:#0D0A06;--nb-stamp:rgba(0,0,0,.18);
    --nb-shadow:rgba(0,0,0,.62);--nb-shadow-soft:rgba(0,0,0,.35);--nb-scrim:rgba(0,0,0,.5);
  }
}
:root[data-theme=dark]{
  color-scheme:dark;
  --nb-bg:#241D15;--nb-paper:#302619;--nb-paper2:#2B2217;--nb-ink:#EFE6D2;--nb-mut:#C9BB9F;--nb-line:#4A3D2D;--nb-rule:#6A5A45;
  --nb-dash:#5E4F3C;--nb-grid:rgba(240,220,180,.065);--nb-margin:rgba(232,120,100,.3);--nb-lines:rgba(240,220,180,.12);
  --nb-red:#E27462;--nb-red-ink:#F2917F;--nb-on-red:#1A120C;--nb-pen:#A4BCF7;--nb-pen-soft:rgba(164,188,247,.22);
  --nb-marker:#6E5A1C;--nb-marker-ink:#FFF4D6;--nb-glow:rgba(255,214,90,.7);--nb-sticky:#4A3D1F;--nb-sticky-ink:#EADFC4;
  --nb-green:#86CFA0;--nb-amber:#F0C06A;--nb-warn:#4A2A22;
  --nb-tape:rgba(206,166,96,.5);--nb-tape2:rgba(120,170,160,.5);
  --nb-photo:#EDE4CF;--nb-photo-ink:#1F3C88;--nb-ini-a:#4A68B0;--nb-ini-b:#1F3C88;--nb-empty-photo:#5A4C3A;
  --nb-btn:#A4BCF7;--nb-btn-ink:#16120C;--nb-hard:#0D0A06;--nb-stamp:rgba(0,0,0,.18);
  --nb-shadow:rgba(0,0,0,.62);--nb-shadow-soft:rgba(0,0,0,.35);--nb-scrim:rgba(0,0,0,.5);
}

/* ── основа: лист в клетку ─────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;background:var(--nb-bg)}
body.nb{margin:0;min-height:100vh;color:var(--nb-ink);font:16.5px/1.6 var(--nb-body);
  background-color:var(--nb-bg);background-image:linear-gradient(var(--nb-grid) 1px,transparent 1px),linear-gradient(90deg,var(--nb-grid) 1px,transparent 1px);
  background-size:26px 26px}
body.nb *,body.nb *::before,body.nb *::after{box-sizing:border-box}
body.nb{-webkit-tap-highlight-color:transparent}
:where(body.nb) a{color:var(--nb-pen)}
:where(body.nb) :focus-visible{outline:3px solid var(--nb-red);outline-offset:3px;border-radius:4px}
.nb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nb-skip{position:absolute;left:12px;top:-60px;z-index:999;padding:8px 14px;background:var(--nb-paper);color:var(--nb-ink);border-radius:4px;box-shadow:3px 3px 0 var(--nb-hard)}
.nb-skip:focus{top:10px}

/* ── шапка: одна на весь сайт ──────────────────────────────────────────────── */
.nb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1180px;margin:0 auto;padding:14px 24px 8px;position:relative;z-index:20}
.nb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--nb-ink)!important;min-width:0}
.nb-brand svg{width:36px;height:36px;flex:none}
.nb-brand .r1,.nb-brand .r2{fill:none;stroke:var(--nb-red);stroke-width:3.2}
.nb-brand .r2{stroke-opacity:.55}
.nb-brand .dot{fill:var(--nb-pen)}
.nb-brand b{display:block;font:700 27px/1 var(--nb-hand);white-space:nowrap}
.nb-brand small{display:block;font:600 9.5px/1 var(--nb-body);letter-spacing:.22em;text-transform:uppercase;color:var(--nb-mut);margin-top:4px;white-space:nowrap}
.nb-nav{display:flex;align-items:center;gap:2px}
.nb-nav a{position:relative;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:6px 10px;border-radius:6px;text-decoration:none;
  color:var(--nb-mut)!important;font:700 22px/1 var(--nb-hand);transition:color .15s}
.nb-nav a:hover{color:var(--nb-ink)!important}
.nb-nav a[aria-current=page]{color:var(--nb-ink)!important;background:linear-gradient(transparent 58%,var(--nb-marker) 58%,var(--nb-marker) 90%,transparent 90%)}
.nb-badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:var(--nb-red);color:var(--nb-on-red);font:700 12px/19px var(--nb-body);text-align:center;vertical-align:3px}
.nb-nav .nb-me{padding:4px 2px 4px 8px}
.nb-nav .nb-me[aria-current=page]{background:none}
.nb-nav .nb-me[aria-current=page] .nb-pol{box-shadow:0 5px 10px -5px var(--nb-shadow),0 0 0 3px var(--nb-marker)}
.nb-nav .nb-login{font:600 15px/1.2 var(--nb-body);color:var(--nb-ink)!important;border:1.5px solid var(--nb-ink);margin-left:6px;box-shadow:2px 2px 0 var(--nb-hard);background:var(--nb-paper)}

/* ── полароид (аватар) ─────────────────────────────────────────────────────── */
.nb-pol{--z:44px;position:relative;display:inline-flex;flex:none;width:var(--z);padding:3px 3px 9px;background:var(--nb-photo);border-radius:1px;
  box-shadow:0 5px 10px -5px var(--nb-shadow);transform:rotate(-3deg);vertical-align:middle}
.nb-pol:nth-child(2n){transform:rotate(3deg)}
.nb-pol i{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;overflow:hidden;font:700 calc(var(--z)*.5)/1 var(--nb-hand);font-style:normal;
  color:#fff;background:var(--nb-ini-b) linear-gradient(135deg,var(--nb-ini-a),var(--nb-ini-b))}
.nb-pol img{display:block;width:100%;height:100%;object-fit:cover}
.nb-pol.s{--z:34px;padding:2px 2px 7px}
.nb-pol.pin::after{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#F07A6A,#B02A1C);box-shadow:0 2px 3px rgba(0,0,0,.35)}

/* ── кнопки чернилами ──────────────────────────────────────────────────────── */
.nb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 20px;border-radius:6px;border:0;
  background:var(--nb-btn);color:var(--nb-btn-ink)!important;font:600 15.5px/1.2 var(--nb-body);text-decoration:none;cursor:pointer;
  box-shadow:3px 3px 0 var(--nb-hard);transition:transform .15s ease,box-shadow .15s ease;text-align:center}
.nb-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--nb-hard)}
.nb-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-hard)}
.nb-btn.ghost{background:var(--nb-paper);color:var(--nb-ink)!important;box-shadow:inset 0 0 0 1.5px var(--nb-ink),3px 3px 0 var(--nb-hard)}
.nb-btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--nb-ink),4px 4px 0 var(--nb-hard)}
.nb-btn.sm{min-height:40px;padding:7px 14px;font-size:14px}
.nb-btn svg{width:18px;height:18px;flex:none}

/* ── пометка ручкой, стикер, пустое состояние ─────────────────────────────── */
.nb-hn{font:700 22px/1.1 var(--nb-hand);color:var(--nb-pen)}
.nb-sticky{position:relative;padding:14px 16px;background:var(--nb-sticky);color:var(--nb-sticky-ink);border-radius:2px;transform:rotate(-1deg);
  box-shadow:0 8px 14px -10px var(--nb-shadow)}
.nb-empty{position:relative;margin:16px 0 4px;padding:16px 18px 18px;border:1.5px dashed var(--nb-rule);border-radius:6px;background:var(--nb-paper)}
.nb-empty .nb-hn{display:block;margin:0 0 6px;font-size:25px;color:var(--nb-ink)}
.nb-empty p{margin:0 0 12px;color:var(--nb-mut)}
.nb-empty p:last-child{margin-bottom:0}
.nb-empty .nb-acts{display:flex;flex-wrap:wrap;gap:10px}

/* ── лист со скотчем и полями ──────────────────────────────────────────────── */
.nb-sheet{position:relative;background:var(--nb-paper);border-radius:2px;padding:26px 24px 26px 58px;
  background-image:linear-gradient(90deg,transparent 38px,var(--nb-margin) 38px,var(--nb-margin) 39px,transparent 39px);
  box-shadow:0 1px 1px var(--nb-shadow-soft),0 14px 24px -16px var(--nb-shadow)}
.nb-sheet::before{content:"";position:absolute;top:-12px;left:30px;width:96px;height:26px;background:var(--nb-tape);transform:rotate(-5deg);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 6px,transparent 6px 12px);box-shadow:0 1px 2px var(--nb-shadow-soft)}

/* ── плавность ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
  .nb-rise{animation:nb-rise .35s var(--nb-ease) both}
  @keyframes nb-rise{from{opacity:0;transform:translateY(8px)}}
}
@media (prefers-reduced-motion:reduce){
  .nb-btn,.nb-nav a{transition:none}
}

/* ── телефон ───────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .nb-top{padding:10px 12px 4px;gap:6px}
  .nb-brand{gap:7px}
  .nb-brand svg{width:28px;height:28px}
  .nb-brand b{font-size:23px}
  .nb-brand small{display:none}
  .nb-nav a{font-size:20px;padding:6px 7px}
  .nb-nav .nb-me{padding-left:4px}
  .nb-sheet{padding:22px 16px 22px 34px;background-image:linear-gradient(90deg,transparent 20px,var(--nb-margin) 20px,var(--nb-margin) 21px,transparent 21px)}
  .nb-sheet::before{left:18px;width:78px}
}
@media (max-width:359px){ .nb-brand b{font-size:20px} .nb-nav a{font-size:18px;padding:6px 5px} }

/* ═══════════════════════════════════════════════════════════════════════════
   Страницы на общем каркасе qpq.layout (профиль, первая анкета, «Пригласи троих», политика,
   «Круг закрытый», сообщения). Классы прежние — переодеты в тетрадь; старые переменные
   (--paper, --brass…) переназначены на токены, чтобы встроенные стили _fields/профиля не выбивались.
   ═══════════════════════════════════════════════════════════════════════════ */
.nb-page{--paper:var(--nb-ink);--surface:var(--nb-paper);--mut:var(--nb-mut);--dim:var(--nb-mut);--line:var(--nb-rule);--hairline:var(--nb-line);
  --brass:var(--nb-pen);--brass-hi:var(--nb-pen);--brass-dim:var(--nb-rule);--wax:var(--nb-red-ink);--body:var(--nb-body);--disp:var(--nb-hand)}
.nb-page .wrap{max-width:640px;margin:0 auto;padding:10px 16px calc(48px + env(safe-area-inset-bottom))}
.nb-page .card{position:relative;margin:22px 0 0;background:var(--nb-paper);border:0;border-radius:2px;padding:28px 24px 26px 58px;
  background-image:linear-gradient(90deg,transparent 38px,var(--nb-margin) 38px,var(--nb-margin) 39px,transparent 39px);
  box-shadow:0 1px 1px var(--nb-shadow-soft),0 14px 24px -16px var(--nb-shadow)}
.nb-page .card::before{content:"";position:absolute;top:-12px;left:30px;width:96px;height:26px;background:var(--nb-tape);transform:rotate(-5deg);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 6px,transparent 6px 12px);box-shadow:0 1px 2px var(--nb-shadow-soft)}
.nb-page .card:nth-of-type(2n)::before{left:auto;right:36px;transform:rotate(6deg);background-color:var(--nb-tape2)}
.nb-page h1,.nb-page h2,.nb-page h3{font-family:var(--nb-hand);font-weight:700;line-height:1.05;color:var(--nb-ink)}
.nb-page h1{font-size:clamp(38px,6vw,48px);margin:0 0 12px}
.nb-page h1 i{font-style:normal;color:var(--nb-ink);background:linear-gradient(transparent 55%,var(--nb-marker) 55%,var(--nb-marker) 92%,transparent 92%);padding:0 .08em}
.nb-page h2{font-size:clamp(30px,5vw,36px);margin:28px 0 8px}
.nb-page p{margin:0 0 12px}
.nb-page ul{padding-left:22px}
.nb-page .mut{color:var(--nb-mut)}
.nb-page .small{font-size:14px}
.nb-page .note{font-size:14px;color:var(--nb-mut);margin-top:6px}
.nb-page .foot{margin-top:26px;text-align:center;font-size:13.5px;color:var(--nb-mut)}
.nb-page .foot a{color:var(--nb-mut)}
.nb-page label.f{display:block;margin:20px 0 7px;font:700 22px/1.05 var(--nb-hand);color:var(--nb-pen)}
.nb-page label.f small,.nb-page label.f .ex{display:block;font:400 13.5px/1.45 var(--nb-body);color:var(--nb-mut);margin-top:4px}
.nb-page input[type=text],.nb-page input[type=tel],.nb-page input[type=search],.nb-page textarea{width:100%;border:1.5px solid var(--nb-rule);border-radius:4px;
  background:var(--nb-paper);color:var(--nb-pen);-webkit-appearance:none;font:700 21px/1.25 var(--nb-hand);padding:10px 12px}
.nb-page textarea{min-height:120px;resize:vertical;padding:0 14px;line-height:28px;
  background-image:linear-gradient(transparent 27px,var(--nb-lines) 27px,var(--nb-lines) 28px);background-size:100% 28px;background-attachment:local}
.nb-page input::placeholder,.nb-page textarea::placeholder{color:var(--nb-mut);opacity:.85}
.nb-page input:focus,.nb-page textarea:focus{outline:none;border-color:var(--nb-pen);box-shadow:0 0 0 3px var(--nb-pen-soft)}
.nb-page input[type=file]{font:14px var(--nb-body);color:var(--nb-mut);max-width:100%}
.nb-page .err{color:var(--nb-red-ink);font-size:14.5px;margin-top:6px}
.nb-page .errbox{margin:0 0 14px;padding:12px 16px;background:var(--nb-warn);border-left:4px solid var(--nb-red);border-radius:2px;color:var(--nb-ink)}
.nb-page .okbox{margin:0 0 14px;padding:12px 16px;background:var(--nb-sticky);border-left:4px solid var(--nb-green);border-radius:2px;color:var(--nb-sticky-ink);font-weight:500}
.nb-page .soon{margin-top:14px;padding:14px 16px;border:1.5px dashed var(--nb-rule);border-radius:6px;background:var(--nb-paper2);color:var(--nb-ink)}
.nb-page .soon b{font-weight:650}
.nb-page .check{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:15px;cursor:pointer}
.nb-page .check input{width:22px;height:22px;flex:none;margin:2px 0 0;accent-color:var(--nb-pen)}
.nb-page .row2{display:flex;gap:10px}
.nb-page .row2>*{flex:1;min-width:0}
.nb-page .who{display:flex;align-items:center;gap:14px;margin:4px 0 18px}
/* аватар — полароид вместо кружка */
.nb-page .ava{width:64px;height:64px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:1px;
  background:var(--nb-ini-b) linear-gradient(135deg,var(--nb-ini-a),var(--nb-ini-b));color:#fff;font:700 30px/1 var(--nb-hand);
  box-shadow:0 0 0 3px var(--nb-photo),0 3px 0 7px var(--nb-photo),0 9px 16px 4px var(--nb-shadow-soft);transform:rotate(-3deg);margin:4px 6px 12px 4px}
.nb-page .ava img{width:100%;height:100%;object-fit:cover}
.nb-page .photo{display:flex;align-items:center;gap:16px;margin-top:6px}
.nb-page .photo .ava{width:72px;height:72px}
/* кнопки: чернила; на телефоне — во всю ширину */
.nb-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;margin:14px 12px 0 0;padding:12px 22px;border-radius:6px;border:0;
  background:var(--nb-btn);color:var(--nb-btn-ink)!important;font:600 16px/1.2 var(--nb-body);text-decoration:none;cursor:pointer;
  box-shadow:3px 3px 0 var(--nb-hard);transition:transform .15s ease,box-shadow .15s ease}
.nb-page .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--nb-hard)}
.nb-page .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-hard)}
.nb-page .btn.plain,.nb-page .btn.vk,.nb-page .btn.ya,.nb-page .btn.tg{background:var(--nb-paper);color:var(--nb-ink)!important;box-shadow:inset 0 0 0 1.5px var(--nb-ink),3px 3px 0 var(--nb-hard)}
.nb-page .btn.vk::before,.nb-page .btn.ya::before,.nb-page .btn.tg::before{content:"";width:22px;height:22px;border-radius:6px;flex:none}
.nb-page .btn.vk::before{background:#0077FF}
.nb-page .btn.ya::before{background:#FC3F1D;border-radius:50%}
.nb-page .btn.tg::before{background:#2AABEE;border-radius:50%}
.nb-page form{margin:0}
/* встроенные стили анкеты/профиля — на бумагу */
.nb-page .ptile,.nb-page .opt,.nb-page .gap,.nb-page .linkbox input{background:var(--nb-paper2);border:1.5px solid var(--nb-line);border-radius:4px;color:var(--nb-ink)}
.nb-page .ptile:has(input:checked),.nb-page .opt:has(input:checked){border-color:var(--nb-ink);background:var(--nb-sticky);box-shadow:none;color:var(--nb-sticky-ink)}
.nb-page .ptile .ava{width:60px;height:60px;font-size:26px;margin:4px 4px 8px}
.nb-page .ptile .up{border-radius:2px;border-color:var(--nb-rule);color:var(--nb-pen)}
.nb-page .opt small{color:var(--nb-mut)}
.nb-page .opt:has(input:checked) small{color:var(--nb-sticky-ink)}
.nb-page .opt input,.nb-page .ptile input{accent-color:var(--nb-pen)}
.nb-page .geo-map{border:1.5px solid var(--nb-rule);border-radius:2px;background:var(--nb-paper2);box-shadow:0 12px 20px -14px var(--nb-shadow)}
.nb-page .geo-tools button{background:var(--nb-paper);border:1.5px solid var(--nb-ink);border-radius:6px;color:var(--nb-ink);box-shadow:2px 2px 0 var(--nb-hard)}
.nb-page .geo-tools button.lnk{background:none;border:0;box-shadow:none;color:var(--nb-mut)}
.nb-page .geo-fail{background:var(--nb-paper2);border:1.5px dashed var(--nb-rule);color:var(--nb-ink)}
.nb-page .qprog .bar{background:var(--nb-line)}
.nb-page .qprog .bar i{background:var(--nb-pen)}
.nb-page .qprog.done{color:var(--nb-green)}
.nb-page .cnt{color:var(--nb-mut)}
.nb-page .gap a{background:var(--nb-btn);color:var(--nb-btn-ink);border-radius:6px;box-shadow:2px 2px 0 var(--nb-hard)}
.nb-page .linkbox input{font:600 15px var(--nb-body);color:var(--nb-pen);padding:12px}
.nb-page .linkbox button{background:var(--nb-paper);border:1.5px solid var(--nb-ink);border-radius:6px;color:var(--nb-ink);box-shadow:2px 2px 0 var(--nb-hard)}
.nb-page .qpq-invites li{border-top:1.5px dashed var(--nb-dash)!important}
/* сообщение («Круг закрытый», «Приглашение не действует») */
.nb-page .msg-mark{display:block;margin:0 auto 6px;width:74px;height:74px}
@media (max-width:600px){
  .nb-page .card{padding:24px 16px 22px 34px;background-image:linear-gradient(90deg,transparent 20px,var(--nb-margin) 20px,var(--nb-margin) 21px,transparent 21px)}
  .nb-page .card::before{left:18px;width:78px}
  .nb-page .btn{display:flex;width:100%;margin-right:0}
  .nb-page .row2{flex-direction:column;gap:0}
}
@media (prefers-reduced-motion:reduce){ .nb-page .btn{transition:none} }

/* ═══ 24.09.2026: длинные тексты, подсказка про «Предложения», шапка на узком экране ═══ */
.nb-cap{display:block;margin-top:4px;font-size:12.5px;color:var(--nb-mut);text-align:right}
.nb-cap.full{color:var(--nb-red-ink)}
.nb-clamp.is-clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.nb-more{display:inline-block;min-height:32px;margin:0 0 6px;padding:0;border:0;background:none;color:var(--nb-pen);font:600 14px/32px var(--nb-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.nb-nudge{margin:0 0 16px;padding:14px 16px;background:var(--nb-sticky);color:var(--nb-sticky-ink);border-radius:2px;transform:rotate(-.6deg);box-shadow:0 8px 14px -10px var(--nb-shadow)}
.nb-nudge p{margin:0 0 10px;font-size:15px}
.nb-nudge-acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.nb-nudge form{margin:0}
.nb-nudge-x{min-height:40px;padding:0;border:0;background:none;color:var(--nb-sticky-ink);font:14px var(--nb-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* четыре пункта меню на телефоне: подпись «quid pro quo» уступает место, знак круга остаётся */
@media (max-width:460px){
  .nb-top .nb-brand span{display:none}
  .nb-nav a{font-size:19px;padding:6px 6px}
}
@media (max-width:359px){ .nb-nav a{font-size:17px;padding:6px 4px} }

/* ═══ 07.10.2026 (uxpack): доступность — только дополнения, прежние правила выше не менялись ═══ */
/* Q-14: граница полей ввода 3:1 (на бумаге #FFFEF7 — 3,58:1; на тёмной #302619 — 4,5:1) */
:root{--nb-field:#8F866F}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--nb-field:#9A8C74}}
:root[data-theme=dark]{--nb-field:#9A8C74}
.nb-page input[type=text],.nb-page input[type=tel],.nb-page input[type=search],.nb-page textarea{border-color:var(--nb-field);font:500 17px/1.4 var(--nb-body)}
.nb-page textarea{line-height:28px}
.nb-page input:focus,.nb-page textarea:focus{border-color:var(--nb-pen)}
/* Q-20: вводимый текст — читаемым шрифтом (Literata), рукописный остаётся для заголовков */
/* Q-09: чекбоксам, радио и полю файла возвращаем видимое кольцо фокуса (правило выше гасило его у любых input) */
.nb-page input:is([type=checkbox],[type=radio],[type=file]):focus{box-shadow:none}
.nb-page input:is([type=checkbox],[type=radio],[type=file]):focus-visible{outline:3px solid var(--nb-red);outline-offset:3px}
/* Q-06: строка «Фото» на /welcome не шире экрана (flex-ребёнок с полем файла без min-width:0 растягивал страницу до 424 px) */
.nb-page .photo>div{min-width:0}
.nb-page input[type=file]{width:100%;min-width:0}
/* Q-13: «текущая страница» и «выбрано» — не только жёлтая заливка, ещё и нижняя линия чернилами */
.nb-nav a[aria-current=page]:not(.nb-me){box-shadow:inset 0 -3px 0 var(--nb-ink)}
.nb-page .ptile:has(input:checked),.nb-page .opt:has(input:checked){box-shadow:inset 0 -3px 0 var(--nb-ink)}
/* граница плиток и вариантов — тоже 3:1 */
.nb-page .ptile,.nb-page .opt{border-color:var(--nb-field)}
.nb-page .ptile:has(input:checked),.nb-page .opt:has(input:checked){border-color:var(--nb-ink)}
/* Q-37: системная высокая контрастность — у кнопок и выбранного состояния есть настоящая рамка */
@media (forced-colors:active){
  .nb-btn,.nb-page .btn,.nb-page .ptile,.nb-page .opt,.nb-page .geo-tools button{border:2px solid ButtonText}
  .nb-nav a[aria-current=page],.nb-page .ptile:has(input:checked),.nb-page .opt:has(input:checked){border:2px solid Highlight}
  .nb-nav a[aria-current=page]{outline:2px solid Highlight}
}