/* Оформление профиля: шрифты, цвета, эффекты ника, рамки аватарки и
   праздничные темы. Общий файл для всех тем сайта. Только готовые пресеты —
   пользовательского CSS нет (см. app/styles.py). */

/* --- шрифты ника --- */
.nf-montserrat-alt { font-family: "Montserrat Alternates", sans-serif; }
.nf-philosopher { font-family: "Philosopher", sans-serif; }
.nf-comfortaa { font-family: "Comfortaa", sans-serif; }
.nf-unbounded { font-family: "Unbounded", sans-serif; }
.nf-russo { font-family: "Russo One", sans-serif; }
.nf-neucha { font-family: "Neucha", cursive; }
.nf-caveat { font-family: "Caveat", cursive; font-size: 1.18em; }
.nf-jura { font-family: "Jura", sans-serif; }
.nf-podkova { font-family: "Podkova", serif; }
.nf-press { font-family: "Press Start 2P", monospace; font-size: .72em; letter-spacing: 0; }
.nf-amatic { font-family: "Amatic SC", cursive; font-size: 1.3em; font-weight: 700; }
.nf-kelly { font-family: "Kelly Slab", serif; }
.nf-lobster { font-family: "Lobster", cursive; font-weight: 400; }
.nf-underdog { font-family: "Underdog", cursive; }
.nf-yeseva { font-family: "Yeseva One", serif; font-weight: 400; }
.nf-oranienbaum { font-family: "Oranienbaum", serif; font-size: 1.1em; }
.nf-pacifico { font-family: "Pacifico", cursive; font-weight: 400; }
.nf-bad-script { font-family: "Bad Script", cursive; }
.nf-marck { font-family: "Marck Script", cursive; font-size: 1.12em; }
.nf-dela { font-family: "Dela Gothic One", sans-serif; font-weight: 400; }
.nf-rubik-mono { font-family: "Rubik Mono One", sans-serif; font-size: .86em; font-weight: 400; }
.nf-ruslan { font-family: "Ruslan Display", serif; font-weight: 400; }
.nf-rubik-glitch { font-family: "Rubik Glitch", sans-serif; font-weight: 400; }
.nf-rubik-wet { font-family: "Rubik Wet Paint", sans-serif; font-weight: 400; }
.nf-rubik-maze { font-family: "Rubik Maze", sans-serif; font-weight: 400; }

/* --- цвет ника: тёмная тема (по умолчанию) --- */
.nick-emerald { color: #34D399 !important; } .nick-sky { color: #60C2F5 !important; }
.nick-violet { color: #B69CFF !important; } .nick-rose { color: #F48FB8 !important; }
.nick-amber { color: #F5B65A !important; } .nick-coral { color: #FF8E72 !important; }
.nick-mint { color: #7EF0C9 !important; } .nick-lemon { color: #F1E46B !important; }
.nick-ice { color: #A5E8FF !important; } .nick-crimson { color: #FF6B7D !important; }

/* светлый режим чековой темы: те же цвета, но темнее, чтобы читались на бумаге */
:root:not([data-mode="dark"]) .theme-receipt .nick-emerald { color: #047857 !important; }
:root:not([data-mode="dark"]) .theme-receipt .nick-sky { color: #0369A1 !important; }
:root:not([data-mode="dark"]) .theme-receipt .nick-violet { color: #6D28D9 !important; }
:root:not([data-mode="dark"]) .theme-receipt .nick-rose { color: #BE185D !important; }
:root:not([data-mode="dark"]) .theme-receipt .nick-amber { color: #92400E !important; }
:root:not([data-mode="dark"]) .theme-receipt .nick-coral { color: #C2410C !important; }
:root:not([data-mode="dark"]) .theme-receipt .nick-mint { color: #0F766E !important; }
:root:not([data-mode="dark"]) .theme-receipt .nick-lemon { color: #854D0E !important; }
:root:not([data-mode="dark"]) .theme-receipt .nick-ice { color: #0E7490 !important; }
:root:not([data-mode="dark"]) .theme-receipt .nick-crimson { color: #B91C1C !important; }

/* градиенты: текст закрашивается фоном */
.nick-grad {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  background-size: 200% 100%;
}
.nick-sunset { background-image: linear-gradient(90deg, #FF9A44, #FF3C83); }
.nick-ocean { background-image: linear-gradient(90deg, #2BD2FF, #2B6BFF); }
.nick-toxic { background-image: linear-gradient(90deg, #B4FF39, #00C27A); }
.nick-candy { background-image: linear-gradient(90deg, #FF6FD8, #7B5CFF); }
.nick-fire { background-image: linear-gradient(90deg, #FFC300, #FF4D00); }
.nick-gold { background-image: linear-gradient(90deg, #F9D976, #C8902A, #F9D976); }
.nick-aurora { background-image: linear-gradient(90deg, #00E4A0, #00C2F5, #A06BFF); }
.nick-chrome { background-image: linear-gradient(90deg, #9AA4B2, #F4F7FB, #9AA4B2, #F4F7FB); animation: rm-slide 3.2s linear infinite; }
.nick-rainbow { background-image: linear-gradient(90deg, #FF4D4D, #FFB84D, #F7F04A, #4DFF88, #4DC3FF, #A04DFF, #FF4D4D); animation: rm-slide 4s linear infinite; }
.nick-galaxy { background-image: linear-gradient(90deg, #5B2EFF, #D24DFF, #4DC3FF, #5B2EFF); animation: rm-slide 5s linear infinite; }
:root:not([data-mode="dark"]) .theme-receipt .nick-toxic { background-image: linear-gradient(90deg, #4D7C0F, #047857); }
:root:not([data-mode="dark"]) .theme-receipt .nick-gold { background-image: linear-gradient(90deg, #A16207, #713F12, #A16207); }
:root:not([data-mode="dark"]) .theme-receipt .nick-chrome { background-image: linear-gradient(90deg, #374151, #9CA3AF, #374151, #9CA3AF); }
@keyframes rm-slide { to { background-position: -200% 0; } }

/* --- эффекты ника --- */
.ne-shadow { text-shadow: 1px 1px 0 rgba(0, 0, 0, .55); }
.ne-glow { filter: drop-shadow(0 0 5px rgba(120, 220, 255, .55)); }
.ne-outline { -webkit-text-stroke: .6px rgba(255, 255, 255, .55); paint-order: stroke fill; }
.ne-neon { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .7)) drop-shadow(0 0 8px rgba(80, 220, 255, .65)); }
.ne-pulse { animation: rm-pulse 2.2s ease-in-out infinite; }
.ne-wave { display: inline-block; animation: rm-wave 2.6s ease-in-out infinite; }
:root:not([data-mode="dark"]) .theme-receipt .ne-shadow { text-shadow: 1px 1px 0 rgba(0, 0, 0, .18); }
:root:not([data-mode="dark"]) .theme-receipt .ne-outline { -webkit-text-stroke: .6px rgba(0, 0, 0, .35); }
@keyframes rm-pulse { 50% { filter: brightness(1.45) drop-shadow(0 0 6px rgba(255, 255, 255, .35)); } }
@keyframes rm-wave { 25% { transform: translateY(-1.5px) rotate(-1deg); } 75% { transform: translateY(1.5px) rotate(1deg); } }

/* --- рамки аватарки (первые пять — в файлах тем) --- */
.avatar.frame { --gap: var(--panel); }
.avatar.frame-double { box-shadow: 0 0 0 2px var(--gap), 0 0 0 3px #C0C7D2, 0 0 0 5px var(--gap), 0 0 0 6px #C0C7D2; }
.avatar.frame-dashed { box-shadow: none; outline: 2px dashed #8FB4E8; outline-offset: 2px; }
.avatar.frame-ice { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #9BE7FF, 0 0 10px 2px rgba(155, 231, 255, .5); }
.avatar.frame-toxic { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #9EF01A, 0 0 10px 1px rgba(158, 240, 26, .45); }
.avatar.frame-sakura { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #F9A8D4, 0 0 0 6px rgba(249, 168, 212, .35); }
.avatar.frame-ruby { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #E11D48, 0 0 9px 2px rgba(225, 29, 72, .45); }
.avatar.frame-neon { animation: rm-neon 2.4s ease-in-out infinite; }
.avatar.frame-sunset { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #FF7A3D, 0 0 0 6px #FF3C83; }
.avatar.frame-rgb { animation: rm-rgb 4s linear infinite; }
.avatar.frame-galaxy { animation: rm-galaxy 5s linear infinite; }
.avatar.frame-legend { animation: rm-legend 3s ease-in-out infinite; }
.avatar.frame-snow { box-shadow: none; outline: 3px dotted #E0F2FE; outline-offset: 2px; filter: drop-shadow(0 0 4px rgba(147, 197, 253, .7)); }
.avatar.frame-garland { box-shadow: none; outline: 3px dashed #EF4444; outline-offset: 2px; animation: rm-garland 1.6s steps(1) infinite; }
.avatar.frame-pumpkin { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #F97316, 0 0 0 6px #14532D; }
.avatar.frame-web { box-shadow: none; outline: 2px dotted #9CA3AF; outline-offset: 3px; }
@keyframes rm-neon {
  0%, 100% { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #22D3EE, 0 0 6px 1px rgba(34, 211, 238, .5); }
  50% { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #A855F7, 0 0 12px 3px rgba(168, 85, 247, .6); }
}
@keyframes rm-rgb {
  0% { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #FF3B3B; } 33% { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #3BFF7A; }
  66% { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #3B8BFF; } 100% { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #FF3B3B; }
}
@keyframes rm-galaxy {
  0%, 100% { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #5B2EFF, 0 0 10px 2px rgba(210, 77, 255, .5); }
  50% { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #D24DFF, 0 0 14px 4px rgba(77, 195, 255, .55); }
}
@keyframes rm-legend {
  0%, 100% { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #F9D976, 0 0 0 6px #B8860B, 0 0 10px 3px rgba(249, 217, 118, .5); }
  50% { box-shadow: 0 0 0 2px var(--gap), 0 0 0 4px #FFF1B8, 0 0 0 6px #D4A72C, 0 0 18px 5px rgba(249, 217, 118, .75); }
}
@keyframes rm-garland { 50% { outline-color: #22C55E; } }
.theme-receipt .avatar.frame { --gap: var(--paper); }

/* --- галерея оформления (/styles) --- */
.st-group { margin-bottom: 18px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.st-item { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 10px 10px; min-height: 104px;
  border: 1px solid var(--border, var(--line)); border-radius: var(--radius-sm, var(--r)); background: var(--card);
  text-align: center; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.st-item:hover:not([disabled]) { border-color: var(--accent); }
.st-item.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.st-item[disabled] { cursor: not-allowed; opacity: .5; }
.st-item .st-preview { font-size: 18px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-item .st-name { font-size: 12px; color: var(--muted); }
.st-lock { position: absolute; top: 6px; right: 8px; font-size: 11px; color: var(--dim); }
.st-on { position: absolute; top: 6px; left: 8px; font-size: 11px; color: var(--accent-hi); font-weight: 700; }
.st-season { position: absolute; top: 6px; left: 8px; font-size: 12px; }
.st-current { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.st-current .nick { font-size: 26px; font-weight: 700; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

/* --- праздничные темы сайта (включает администратор) --- */

.holiday-newyear .topbar::after, .holiday-halloween .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; pointer-events: none; z-index: 5;
}
.holiday-newyear .topbar::after {
  background:
    radial-gradient(circle at 10px 3px, #EF4444 3px, transparent 3.5px) 0 0 / 60px 7px,
    radial-gradient(circle at 30px 3px, #FACC15 3px, transparent 3.5px) 0 0 / 60px 7px,
    radial-gradient(circle at 50px 3px, #22C55E 3px, transparent 3.5px) 0 0 / 60px 7px;
  animation: rm-twinkle 2.4s steps(2) infinite;
}
.holiday-newyear .topbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .9) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, .7) 1px, transparent 1.4px);
  background-size: 90px 70px, 140px 110px; background-position: 0 0, 40px 30px;
  animation: rm-snow 9s linear infinite;
}
.holiday-newyear .logo::after { content: "🎄"; margin-left: 4px; font-size: .9em; }
.holiday-halloween .topbar::after {
  background: repeating-linear-gradient(135deg, #F97316 0 10px, #1F1F1F 10px 20px);
}
.holiday-halloween .logo::after { content: "🎃"; margin-left: 4px; font-size: .9em; }
.holiday-halloween .btn-primary { background: #EA580C; border-color: #EA580C; }
.holiday-halloween .btn-primary:hover { background: #C2410C; border-color: #C2410C; }
@keyframes rm-twinkle { 50% { filter: brightness(1.6) saturate(1.3); } }
@keyframes rm-snow { to { background-position: 0 70px, 40px 140px; } }

@media (prefers-reduced-motion: reduce) {
  .nick-chrome, .nick-rainbow, .nick-galaxy, .ne-pulse, .ne-wave, .avatar.frame-neon, .avatar.frame-rgb,
  .avatar.frame-galaxy, .avatar.frame-legend, .avatar.frame-garland,
  .holiday-newyear .topbar::before, .holiday-newyear .topbar::after { animation: none !important; }
}
@media (max-width: 860px) {
  .holiday-newyear .topbar, .holiday-halloween .topbar { position: relative; }
}
.lvl-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lvl-quick-item { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border, var(--line)); border-radius: var(--radius-sm, var(--r));
  text-decoration: none; color: var(--text); background: var(--card); }
.lvl-quick-item:hover { border-color: var(--accent); }
.lvl-quick-item.locked { opacity: .6; }
.shop-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.shop-id { display: grid; gap: 2px; }
.shop-me { margin-bottom: 16px; }
.nick { font-weight: inherit; }
/* --- канбан заказов --- */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; }
.kb-col { background: var(--panel); border: 1px solid var(--border, var(--line)); border-radius: var(--radius, var(--r-lg)); padding: 10px; min-height: 220px; }
.kb-col.kb-over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.kb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 4px 10px; }
.kb-head .tiny { width: 100%; }
.kb-list { display: grid; gap: 8px; }
.kb-card { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--border, var(--line)); border-radius: var(--radius-sm, var(--r)); background: var(--card); }
.kb-movable { cursor: grab; }
.kb-card.dragging { opacity: .5; }
.kb-title { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kb-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.kb-move { margin-left: auto; }
.kb-empty { text-align: center; padding: 16px 0; margin: 0; }
@media (max-width: 900px) { .kanban { grid-template-columns: repeat(4, 260px); } }
.seller-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
.seller-tools a { padding: 7px 12px; border: 1px solid var(--border, var(--line)); border-radius: 999px; background: var(--panel);
  color: var(--text); text-decoration: none; font-size: 13.5px; }
.theme-receipt .seller-tools a { border-radius: var(--r); }
.seller-tools a:hover { border-color: var(--accent); }
.pager { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.pager span.btn[aria-disabled] { opacity: .45; pointer-events: none; }
.plinks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.plink { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; color: #fff; }
.plink-t-me { background: #229ED9; } .plink-vk-com { background: #0077FF; }
.plink-youtube-com { background: #E62117; } .plink-twitch-tv { background: #9146FF; }
.badge-owner { background: rgba(212, 167, 44, .16); color: #E8C15A; border-color: rgba(212, 167, 44, .4); }
.badge-staff { background: rgba(96, 194, 245, .13); color: #7DD3FC; border-color: rgba(96, 194, 245, .35); }
.badge-media { background: rgba(145, 70, 255, .15); color: #C4A5FF; border-color: rgba(145, 70, 255, .38); }
:root:not([data-mode="dark"]) .theme-receipt .badge-owner { background: #FBF0D0; color: #7A5A00; border-color: #D8B35C; }
:root:not([data-mode="dark"]) .theme-receipt .badge-staff { background: var(--accent-dim); color: var(--accent-hi); border-color: var(--accent-line); }
:root:not([data-mode="dark"]) .theme-receipt .badge-media { background: #EDE4FB; color: #5B21B6; border-color: #C4B0EE; }
.roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.role-card { margin: 0; }
.perm-list { border: 0; padding: 0; margin: 10px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.perm-list legend { color: var(--muted); margin-bottom: 4px; }
.perm-list .check span { font-size: 13px; }
.sec-hold { width: 74px; }
.switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin-bottom: 12px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--border, var(--line)); position: relative; transition: background .15s; margin-top: 2px; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch > span:last-child { display: grid; gap: 2px; }
.cascade-fields.is-off textarea, .cascade-fields.is-off input { color: var(--dim); background: var(--card); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cascade-own { min-height: 26px; margin-bottom: 2px; }
.cascade-own span { font-size: 12.5px !important; color: var(--muted) !important; }
@media (max-width: 700px) {
  .perm-list { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .lvl-quick { grid-template-columns: 1fr; }
  .shop-head { flex-wrap: wrap; }
}

/* --- свои иконки вместо эмодзи ------------------------------------------------
   Один файл-маска красится цветом текста: подходит обеим темам, не зависит
   от шрифта эмодзи в системе и не прыгает по базовой линии. */
.uic { display: inline-block; vertical-align: -.16em; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.badge .uic, .seller-tools a .uic, .st-lock .uic { margin-right: 5px; }
.seller-tools a { display: inline-flex; align-items: center; }
.badge-shop { background: rgba(45, 212, 191, .15); color: #5EEAD4; border-color: rgba(45, 212, 191, .4); }
:root:not([data-mode="dark"]) .theme-receipt .badge-shop { background: #D7F5F0; color: #0F5F57; border-color: #86CFC5; }
.xp-grant { display: flex; gap: 4px; margin-top: 4px; }
.xp-grant input { width: 74px; padding: 4px 7px; font-size: 12.5px; }

/* --- шапка профиля: баннер и круглая аватарка на нём --------------------- */
/* Один блок на обе темы: цвета и радиусы берутся из переменных темы. */
.phead-card {
  /* --bnr-h: высота баннера; от неё же считается посадка аватарки, чтобы
     при правке высоты не рассыпалось положение круга. */
  --bnr-h: 210px; --ava-box: 104px;
  position: relative;
  background: var(--panel); border: 1px solid var(--border, var(--line-hi));
  border-radius: var(--radius, var(--r-lg)); overflow: hidden; margin-bottom: 18px;
}
.theme-receipt .phead-card { border-top: 3px solid var(--ink); }
.phead-card > .profile-head {
  background: none; border: 0; border-top: 0; border-radius: 0; margin: 0;
  align-items: flex-start;
}
.phead-card > .profile-head > .profile-id { padding-top: 6px; }
.pbanner { position: relative; height: var(--bnr-h, 210px); background: var(--card-hi) var(--bnr) center/cover no-repeat; }
/* Затемнение снизу: свой баннер может быть светлым, а на него заходит
   аватарка и встаёт ник. Без подложки они пропадают на первой же белой
   картинке — проверять это на живых загрузках поздно. */
.pbanner::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 60%;
  background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .42));
}
.pbanner-empty::after { height: 40%; background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .22)); }
/* Нет своей картинки — узор из ника: два оттенка и мягкая засветка. */
.pbanner-empty {
  background-image:
    radial-gradient(120% 150% at 12% 0%, hsl(var(--hue) 62% 42% / .95), transparent 60%),
    linear-gradient(118deg, hsl(var(--hue) 48% 26%), hsl(calc(var(--hue) + 54) 42% 16%));
}
/* Аватарка лежит на баннере целиком и вынута из потока: так она ничего не
   сдвигает и ни на что не наезжает, а текст под ней идёт обычным порядком.
   z-index обязателен — у баннера свой слой из-за затемнения. */
.phead-ava {
  position: absolute; z-index: 1; left: 22px;
  top: calc(var(--bnr-h) - var(--ava-box) - 16px);
  margin: 0; padding: 4px; line-height: 0; border-radius: 50%;
  background: var(--panel); flex: none;
}
.phead-card .phead-ava .avatar { font-size: 38px; }
/* Аватарки круглые всюду, включая чековую тему. */
.theme-receipt .avatar { border-radius: 50%; }
.theme-receipt .phead-card .phead-ava .avatar { box-shadow: 2px 2px 0 var(--ink); }
@media (max-width: 560px) {
  .phead-card { --bnr-h: 150px; }
  .phead-ava { left: 16px; }
}

/* Образец баннера в настройках. */
.bnr-sample { position: relative; }
.bnr, .bnr-img {
  display: block; width: 100%; aspect-ratio: 3.6; border-radius: var(--radius, var(--r-lg));
  background: var(--card-hi) var(--bnr) center/cover no-repeat; object-fit: cover;
}
.bnr-empty {
  background-image:
    radial-gradient(120% 150% at 12% 0%, hsl(var(--hue) 62% 42% / .95), transparent 60%),
    linear-gradient(118deg, hsl(var(--hue) 48% 26%), hsl(calc(var(--hue) + 54) 42% 16%));
}
.bnr-sample-ava { position: absolute; left: 14px; bottom: -18px; padding: 3px; border-radius: 50%; background: var(--panel); line-height: 0; }

/* --- полоса доверия: статус, график, перенесённая репутация -------------- */
/* Все плашки одной высоты и одной формы: взгляд читает их как один ряд
   фактов, а не как три разных элемента, случайно оказавшихся рядом. */
.trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tchip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 11px;
  font-size: 13px; color: var(--muted); border: 1px solid var(--border, var(--line));
  border-radius: 999px; background: var(--card-hi);
}
.tchip strong { color: var(--text); font-weight: 700; }
.tchip-on { color: var(--text); border-color: var(--accent-line, var(--accent)); }
.tchip-ok { color: var(--text); }
.tchip-stars { font-size: 11px; letter-spacing: -1px; }
.tchip-check {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent); color: var(--on-accent, #06251B);
  font-size: 11px; font-weight: 700; flex: none;
}

/* --- карточка рейтинга с раскладкой по звёздам --------------------------- */
/* align-items: start — три маленькие карточки не растягиваются под высокую
   карточку рейтинга, иначе под их числами остаётся полпустой экран. */
.stat-grid-rep { grid-template-columns: minmax(250px, 1.5fr) repeat(3, minmax(130px, 1fr)); align-items: start; }
.stat-rep { display: flex; flex-direction: column; gap: 8px; }
.stat-rep-head { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; }
.stat-rep-head:hover .stat-value { color: var(--accent-hi); }
.stat-rep-side { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rbars { display: grid; gap: 3px; margin-top: 2px; }
.rbar {
  display: grid; grid-template-columns: 10px 1fr 22px; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--muted); text-decoration: none;
}
.rbar:hover { color: var(--text); }
.rbar-track { height: 6px; border-radius: 999px; background: var(--card-hi); overflow: hidden; }
.theme-receipt .rbar-track { border: 1px solid var(--line); height: 8px; }
.rbar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.rbar-n { text-align: right; font-variant-numeric: tabular-nums; }
.rbar-0 { opacity: .55; }
@media (max-width: 860px) {
  .stat-grid-rep { grid-template-columns: 1fr 1fr; }
  .stat-rep { grid-column: 1 / -1; }
}

/* --- график работы ------------------------------------------------------- */
.workchip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted);
  padding: 3px 10px 3px 8px; border: 1px solid var(--border, var(--line)); border-radius: 999px;
}
.workchip.on { color: var(--text); border-color: var(--accent-line, var(--accent)); }
.workdot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--dim); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dim) 22%, transparent);
}
.workchip.on .workdot, .workdot.on {
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* --- вкладки профиля ---------------------------------------------------- */
.ptabs {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 18px;
  border-bottom: 1px solid var(--border, var(--line)); padding-bottom: 0;
}
.ptab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; font-weight: 600;
  font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent;
}
.ptab:hover { color: var(--text); }
.ptab.on { color: var(--text); border-bottom-color: var(--accent); }
.ptab-n {
  font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--card-hi); color: var(--muted);
}
.ptab.on .ptab-n { background: var(--accent-dim); color: var(--accent-hi); }
.ptab-side { margin-left: auto; padding-bottom: 6px; }

/* --- окно поверх страницы (static/modal.js) ----------------------------- */
.rmdlg {
  padding: 0; border: 1px solid var(--border, var(--line-hi));
  border-radius: var(--radius, var(--r-lg)); background: var(--panel); color: var(--text);
  width: min(760px, calc(100vw - 20px)); max-height: min(86vh, 900px);
  box-shadow: var(--sh-lg, 0 20px 60px rgba(0, 0, 0, .45));
}
.rmdlg::backdrop { background: rgba(8, 9, 12, .62); backdrop-filter: blur(2px); }
.rmdlg-box { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; max-height: min(86vh, 900px); }
.rmdlg-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 16px 52px 14px 18px; border-bottom: 1px solid var(--border, var(--line));
}
.rmdlg-head strong { font-size: 17px; }
.rmdlg-x {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border, var(--line)); background: var(--card); color: var(--text);
  font: 400 22px/1 var(--sans); cursor: pointer;
}
.rmdlg-x:hover { border-color: var(--accent); }
.rmdlg-body { overflow: auto; padding: 16px 18px; }
.rmdlg-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--border, var(--line));
}
.rmdlg-gap { flex: 1; }

/* Переключатель внутри окна: RootMarket / FunPay / Playerok. */
.segbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 18px 0; }
.seg {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; cursor: pointer;
  font: 600 13px/1.2 var(--sans); color: var(--muted);
  background: var(--card); border: 1px solid var(--border, var(--line));
  border-radius: var(--radius, var(--r));
}
.seg:hover { color: var(--text); }
.seg.on { color: var(--accent-hi); background: var(--accent-dim); border-color: var(--accent-line, var(--accent)); }
.review-ext { opacity: .97; }
.review-ext .review-head { align-items: center; }