/* 10-20 (Владік: «шапка дуже замусорена і все не попорядку стоїть»): одна шапка на всіх сторінках (header.top.hdr у web/v2/*.html).
   Ліворуч — лого й розділи; праворуч — стан з'єднання (крапка + час), дзвіночок, меню користувача. Вкладки сторінок — у .subbar під шапкою.
   Підключається ОСТАННІМ (після стилів сторінки), тож правила сторінок про .top (перенос рядків на телефоні тощо) тут перекриті. */
/* 10-20 (Владік: «шапка всюди різна»): відступ шапки — свій (--hdr-pad), не від контейнера сторінки (--edge головної / портфеля
   ріс з шириною екрана, сторінка пари — на всю ширину): висота, відступи й місця пунктів однакові на всіх сторінках.
   10-20 (Владік обрав варіант C «Іконки і скло»): на всю ширину з відступом 24, скляний фон, розділи з іконками рівної ширини. */
/* 10-29 (Владік: назва сайту M9S0RUBKA, «гарний шрифт на всю шапку, чітко і гарно»): назва — Unbounded 800 (лише латиниця, 22 КБ),
   пункти шапки і вкладки під нею — Onest (кирилиця + латиниця, змінна вага). Шрифти свої, у /static/fonts (як Inter). Час у крапці стану лишається Inter (рівні цифри). */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/unbounded-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/static/fonts/onest-cyrillic-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/static/fonts/onest-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/static/fonts/onest-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/static/fonts/onest-latin-wght-normal.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; }
header.top.hdr, .subbar .pills { --sans: "Onest", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--sans); }
header.top.hdr .chip.hstat .t { font-family: "Inter", system-ui, sans-serif; }
.brand .wm { font: 800 16.5px/1 "Unbounded", "Onest", system-ui, sans-serif; letter-spacing: .035em; color: var(--t1); }
.brand .wm b { font-weight: inherit; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-palette="graphite"] .brand .wm b { background: none; color: var(--accent); }

header.top.hdr { --hh: 58px; --hdr-pad: 24px; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; height: var(--hh); padding: 0 var(--hdr-pad); min-width: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--t1) 5%, transparent); }
header.top.hdr > [hidden] { display: none !important; }
header.top.hdr .brand { flex: none; margin-right: 0; white-space: nowrap; }
header.top.hdr .brand::after { content: ''; width: 1px; height: 24px; margin: 0 14px 0 18px; background: var(--line-2); }
header.top.hdr .grow { flex: 1 1 auto; min-width: 8px; }

/* ── розділи сайту: іконка + назва, рівні кроки з тонкими розділювачами, ціль натискання 40 px, активний підсвічено ── */
header.top.hdr .hnav { display: flex; align-items: center; gap: 0; min-width: 0; }
header.top.hdr .hn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 104px; padding: 0 14px; border-radius: 10px; color: var(--t2); font-weight: 550; font-size: 13.5px; white-space: nowrap; transition: color .15s, background-color .15s; }
header.top.hdr .hn + .hn { margin-left: 9px; }
header.top.hdr .hn + .hn::after { content: ''; position: absolute; left: -5px; top: 13px; bottom: 13px; width: 1px; background: var(--line-2); }
header.top.hdr .hn::before { content: ''; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; opacity: .85; }
header.top.hdr .hn[data-nav="home"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E"); }
header.top.hdr .hn[data-nav="grid"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E"); }
header.top.hdr .hn[data-nav="adl"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M7 16v-4M12 16V6M17 16v-7'/%3E%3C/svg%3E"); }
header.top.hdr .hn[data-nav="portfolio"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2.5'/%3E%3Cpath d='M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7M3 12.5h18'/%3E%3C/svg%3E"); }
header.top.hdr .hn:hover { color: var(--t1); background: color-mix(in srgb, var(--t1) 5%, transparent); }
header.top.hdr .hn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
header.top.hdr .hn[aria-current="page"] { color: var(--t1); background: var(--accent-bg); }
header.top.hdr .hn[aria-current="page"]::before { background: var(--accent); opacity: 1; }
header.top.hdr .hn[aria-current="page"] .pb { box-shadow: none; }
html.lim header.top.hdr [data-own], html.lim .upanel [data-own] { display: none !important; }
html.tier-chart header.top.hdr .hnav, html.tier-chart header.top.hdr .hnavbtn { display: none !important; }   /* ключ / очікує доступу — лише графік */

/* «Портфель» з лічильниками: активні · ⏳ очікують · ! увага · 🔒 */
header.top.hdr .pbs { display: inline-flex; gap: 3px; } header.top.hdr .pbs:empty { display: none; }
.pb { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; font: 650 11px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--t1); background: var(--s3); border: 1px solid var(--line-2); }
.pb.live { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); background: color-mix(in srgb, var(--up) 12%, transparent); }
.pb.wait { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.pb.bad { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); background: color-mix(in srgb, var(--down) 10%, transparent); }

/* кнопка розділів — лише на телефоні */
header.top.hdr .hnavbtn { display: none; align-items: center; gap: 6px; height: 32px; padding: 0 9px 0 7px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--t1); font-weight: 600; font-size: 13px; white-space: nowrap; min-width: 0; }
header.top.hdr .hnavbtn svg { width: 17px; height: 17px; flex: none; color: var(--t2); }
header.top.hdr .hnavbtn .cur { overflow: hidden; text-overflow: ellipsis; }
header.top.hdr .hnavbtn .cur:empty { display: none; }
header.top.hdr .hnavbtn[aria-expanded="true"] { border-color: var(--accent-ring); background: var(--accent-bg); }

/* ── праворуч: стан, дзвіночок, меню ── */
header.top.hdr > .chip, header.top.hdr > .dd, header.top.hdr > .ibtn, header.top.hdr > .umenu, header.top.hdr > .btn-in { flex: none; }
/* стан з'єднання: лише крапка; час і подробиці — у підказці; застаріло / нема зв'язку — короткий підпис поруч */
header.top.hdr .chip.hstat { display: inline-flex !important; align-items: center; justify-content: center; min-width: 30px; height: 30px; gap: 7px; padding: 0 9px; margin-right: 4px; border-color: transparent; background: transparent; color: var(--t2); font-weight: 600; cursor: default; }
header.top.hdr .chip.hstat > .w, header.top.hdr .chip.hstat > .t, header.top.hdr .chip.hstat > .hs { display: none; }
header.top.hdr .chip.hstat .dot { flex: none; }
header.top.hdr .chip.hstat.h-idle .dot { background: var(--t3); box-shadow: 0 0 0 3px var(--s3); }
header.top.hdr .chip.hstat.h-stale, header.top.hdr .chip.hstat.h-page { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
header.top.hdr .chip.hstat.h-stale .dot, header.top.hdr .chip.hstat.h-page .dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
header.top.hdr .chip.hstat.h-off { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); background: var(--down-bg); }
header.top.hdr .chip.hstat.h-off .dot { background: var(--down); box-shadow: 0 0 0 3px var(--down-bg); }
header.top.hdr .chip.hstat.h-stale > .hs, header.top.hdr .chip.hstat.h-off > .hs { display: inline; }
header.top.hdr .chip.hstat.h-page > .w, header.top.hdr .chip.hstat.h-page > .t { display: inline; color: inherit; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }   /* сторінка сама каже, що дані застаріли («дані 45 с тому») */
header.top.hdr .chip.hstat:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
header.top.hdr .ibtn.bell, header.top.hdr .bellmenu > summary { width: 34px; height: 34px; position: relative; }
header.top.hdr .bell b { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--bg); font: 700 10.5px/16px var(--sans); text-align: center; display: block; }
header.top.hdr .bell b:empty { display: none; }
header.top.hdr #stateChip, header.top.hdr #mode, header.top.hdr #logout { display: none !important; }   /* джерела даних для JS — на екрані їх заміняють «Портфель» і меню */

/* 10-20: місце під крапку стану / дзвіночок на сторінках, де їх нема — щоб мова, тема й меню стояли там само, де на головній */
header.top.hdr .hslot { flex: none; visibility: hidden; pointer-events: none; }
header.top.hdr .hslot.s-stat { width: 30px; height: 30px; margin-right: 4px; }
header.top.hdr .hslot.s-bell { width: 34px; height: 34px; }
header.top.hdr .btn-in { height: 32px; padding: 0 14px; margin-left: 4px; border-radius: 8px; border: 1px solid var(--accent-ring); background: var(--accent-bg); color: var(--t1); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
header.top.hdr .btn-in:hover { border-color: var(--accent); }
header.top.hdr .btn-in[hidden] { display: none; }

/* мова «UA ▾» (app/i18n.js) і тема — парою у шапці, перед дзвіночком / «Увійти» */
header.top.hdr .langsw { flex: none; margin: 0 2px; }
header.top.hdr .langsw > summary { height: 32px; border-color: var(--line); }
header.top.hdr > .ibtn.theme { flex: none; width: 34px; height: 34px; margin-right: 2px; }

/* меню користувача */
.umenu { position: relative; margin-left: 4px; }
.ubtn { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 6px 0 2px; border-radius: 999px; border: 1px solid transparent; color: var(--t2); transition: border-color .15s, background-color .15s; }
.ubtn:hover, .ubtn[aria-expanded="true"] { border-color: var(--line-2); background: var(--s2); color: var(--t1); }
.ubtn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.ubtn .car { width: 13px; height: 13px; opacity: .7; transition: transform .2s; }
.ubtn[aria-expanded="true"] .car { transform: rotate(180deg); }
.umenu .ava { width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: var(--s3); color: var(--t2); font: 700 12.5px/1 var(--sans); box-shadow: 0 0 0 1px var(--line-2); }
.umenu .ava svg { width: 17px; height: 17px; }
.umenu .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.umenu .ava.let { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--bg); }
.ubtn .ukill { display: none; }
/* стоп-кран увімкнено: червоне кільце на аватарі + «стоп» — видно на кожній сторінці, поки не знято */
html.kill-on .ubtn > .ava { box-shadow: 0 0 0 2px var(--down); }
html.kill-on .ubtn .ukill { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--down); color: #fff; font: 700 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }

.upanel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 900; width: 272px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--s1); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); display: grid; gap: 2px; }
.upanel[hidden] { display: none; }
.upanel .uhd { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); min-width: 0; }
.upanel .uhd[hidden] { display: none; }
.upanel .uhd .ava { width: 36px; height: 36px; font-size: 14px; }
.upanel .who { display: grid; gap: 2px; min-width: 0; }
.upanel .who b { color: var(--t1); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upanel .who small { color: var(--t3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgplan { height: 16px; padding: 0 5px; border-radius: 999px; font: 700 9.5px/14px var(--sans); letter-spacing: .05em; border: 1px solid var(--line-2); color: var(--t3); }
.tgplan.pro { color: #f5a524; border-color: color-mix(in srgb, #f5a524 55%, transparent); background: color-mix(in srgb, #f5a524 12%, transparent); }
.upanel .mi { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--t2); font: 500 13px var(--sans); text-align: left; white-space: nowrap; }
.upanel .mi:hover, .upanel .mi:focus-visible { background: var(--s3); color: var(--t1); outline: none; }
.upanel .mi[hidden] { display: none; }
/* стоп-кран — перший пункт, червоний; та сама логіка й підтвердження (код сторінки або app/header.js) */
.upanel .mi.kill { color: var(--down); font-weight: 600; margin-bottom: 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--down) 35%, transparent); }
.upanel .mi.kill::before { content: ''; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M8 2h8l6 6v8l-6 6H8l-6-6V8z'/%3E%3Cpath d='M8 12h8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M8 2h8l6 6v8l-6 6H8l-6-6V8z'/%3E%3Cpath d='M8 12h8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.upanel .mi.kill:hover, .upanel .mi.kill:focus-visible { background: var(--down-bg); color: var(--down); }
.upanel .mi.kill.on { background: var(--down); color: #fff; box-shadow: none; }
.upanel .mi.kill.on:hover { filter: brightness(1.08); }
.upanel .mi.out { margin-top: 2px; }
.upanel .mgrp { display: grid; gap: 2px; margin: 4px 0; padding: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
header.top.hdr:not(.authed) .upanel .mgrp { border: 0; margin: 0; padding: 0; }   /* гість: у меню лише акцент */
.upanel .mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 38px; padding: 0 4px 0 10px; border-radius: 8px; color: var(--t2); font: 500 13px var(--sans); text-align: left; }
.upanel .pal { display: inline-flex !important; gap: 8px; height: 30px; padding: 0 6px; }
.upanel .pal button { width: 18px; height: 18px; }

/* ── під-шапка: вкладки й керування сторінки ── */
.subbar { --subh: 48px; display: flex; align-items: center; gap: 10px; min-height: var(--subh); padding: 8px var(--edge, 20px) 0; min-width: 0; }
.subbar .grow { flex: 1; }
.subbar .pills { margin: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.subbar .pills::-webkit-scrollbar { display: none; }
.subbar .pill { white-space: nowrap; flex: none; }
.subbar .title { font-weight: 600; color: var(--t1); font-size: 15px; white-space: nowrap; } .subbar .title b { color: var(--t3); font-weight: 600; margin-left: 4px; }
.subbar .lbl { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: .08em; }
.subbar + main { padding-top: 12px; }
.subbar + .wrap { height: calc(100vh - 58px - 48px); padding-top: 8px; }
.wrap { height: calc(100vh - 58px); }   /* сітка графіків (misc.css рахувала від шапки 52) */
.subbar.csub { padding: 8px 14px 0; gap: 8px; }
.subbar.csub + .errbar + .toast + main, .subbar.csub ~ main { padding-top: 10px; }
body.embed .subbar { display: none !important; }

/* 10-20: дзвіночок власника (app/bell.js) на всіх сторінках із шапкою — ті самі стилі, що на головній (home.css: .dd, .bellbox) */
header.top.hdr .bellmenu { position: relative; } header.top.hdr .bellmenu summary { list-style: none; cursor: pointer; } header.top.hdr .bellmenu summary::-webkit-details-marker { display: none; }
header.top.hdr .bellmenu .menu { position: absolute; top: 38px; right: 0; z-index: 30; border-radius: 12px; background: var(--s1); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); }
header.top.hdr .bellbox { width: min(420px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; }
header.top.hdr .bellbox .hh { padding: 10px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); border-bottom: 1px solid var(--line); }
header.top.hdr .bellbox .none { padding: 10px 12px; color: var(--t3); font-size: 12.5px; }
header.top.hdr .bellbox .br { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-bottom: 1px solid var(--line); }
header.top.hdr .bellbox .br a { flex: 1; min-width: 0; display: block; font-size: 12.5px; } header.top.hdr .bellbox .br a b { font-weight: 700; margin-right: 4px; }
header.top.hdr .bellbox .br a small { display: block; color: var(--t3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.top.hdr .bellbox .br.off a { opacity: .5; }
header.top.hdr .bellbox .br button { height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--t2); font-size: 11.5px; } header.top.hdr .bellbox .br button:hover { color: var(--t1); border-color: var(--accent-ring); }
header.top.hdr .bellbox .hint2 { padding: 8px 12px; color: var(--t3); font-size: 11px; }
header.top.hdr .bellbox .exi { width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: 3px; }
/* 10-22 (Владік: на /adl меню інше): стилі сторінки (misc.css .none — сітка по центру; посилання без кольору) не протікають у випадайку */
header.top.hdr .bellbox { text-align: left; color: var(--t1); font-size: 13px; line-height: 1.4; }
header.top.hdr .bellbox #bellList.none, header.top.hdr .bellbox .none { display: block; grid-column: auto; place-items: normal; text-align: left; }
header.top.hdr .bellbox .allal { display: block; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; border-top: 1px solid var(--line); } header.top.hdr .bellbox .allal:hover { background: var(--s3); }

/* випадайка дзвіночка не вилазить за правий край, коли праворуч ще меню */
header.top.hdr .bellmenu .menu { right: -48px; }

@media (max-width: 1180px) {
  header.top.hdr .brand { font-size: 0; gap: 0; }
  header.top.hdr .brand .wm { display: none; }
  header.top.hdr .brand::after { margin-left: 4px; }
  header.top.hdr .hn { min-width: 0; }
}
/* телефон: лого · кнопка розділів (випадайка з усіма пунктами) · крапка стану · дзвіночок · аватар */
@media (max-width: 640px) {
  header.top.hdr { --hdr-pad: 12px; gap: 4px; padding: 0 var(--hdr-pad); height: 52px; flex-wrap: nowrap; }
  header.top.hdr .brand { margin-right: 4px; } header.top.hdr .brand i.logo { width: 40px; height: 30px; }
  header.top.hdr .hnavbtn { display: inline-flex; max-width: 120px; }
  header.top.hdr .hnav { display: none; position: absolute; transform: none; left: 12px; top: calc(100% + 6px); z-index: 900; min-width: 220px; max-width: calc(100vw - 24px); padding: 6px; flex-direction: column; align-items: stretch; gap: 2px;
    border-radius: 12px; border: 1px solid var(--line-2); background: var(--s1); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); }
  header.top.hdr.nav-open .hnav { display: flex; }
  header.top.hdr .hn { height: 42px; min-width: 0; gap: 10px; font-size: 14px; padding: 0 12px; justify-content: flex-start; }
  header.top.hdr .hn + .hn { margin-left: 0; } header.top.hdr .hn + .hn::after { display: none; }   /* у випадайці — без розділювачів */
  header.top.hdr .brand::after { display: none; }
  header.top.hdr .hn .pbs { margin-left: auto; }
  header.top.hdr .btn-in { padding: 0 11px; }
  header.top.hdr .chip.hstat { padding: 0; width: 30px; } header.top.hdr .chip.hstat > .hs, header.top.hdr .chip.hstat.h-page > .w, header.top.hdr .chip.hstat.h-page > .t { display: none; }   /* телефон: лише колір крапки, текст — у підказці */
  header.top.hdr > .ibtn.theme, header.top.hdr .ibtn.bell, header.top.hdr .bellmenu > summary, header.top.hdr .hslot.s-bell { width: 32px; }
  header.top.hdr .langsw > summary { padding: 0 6px; }
  header.top.hdr .langsw .langmenu { position: fixed; left: auto; right: 12px; top: 58px; }
  .ubtn .car { display: none; } .ubtn { padding: 0 2px; }
  html.kill-on .ubtn .ukill { position: absolute; right: -4px; top: -2px; height: 15px; padding: 0 4px; font-size: 8.5px; }
  .upanel { position: fixed; left: 12px; right: 12px; top: 58px; width: auto; max-width: none; max-height: calc(100vh - 70px); overflow: auto; }
  header.top.hdr .bellmenu .menu { position: fixed; left: 12px; right: 12px; top: 58px; width: auto; }
  .subbar { padding: 8px 12px 0; gap: 8px; }
  .subbar .title { font-size: 14px; }
  .subbar .simtg { flex: none; }
  .wrap { height: calc(100vh - 52px); }
  .subbar + .wrap { height: auto; }
  .subbar.csub { padding: 8px 12px 0; }
}


/* 10-20 (мультикористувач, блок F): дзвіночок шапки — посилання на /alerts. Видно власнику і Pro з торгівлею (tier-trader);
   ключ у посиланні / pending / Free / Pro без торгівлі — ні. trader бачить і «Портфель» (свої ключі й позиції). */
/* 10-21 muint (Владік: гість і Free бачать усі розділи шапки): ADL і Портфель — усім (сервер на клік дає замок Pro зі скелетом).
   Дзвіночок: власник і trader — випадайка #bellmenu (app/bell.js), решта — посилання #hdBell на /alerts (там замок Pro). */
html.lim:not(.tier-trader) header.top.hdr #bellmenu { display: none !important; }
html:not(.lim) header.top.hdr #bellmenu ~ #hdBell, html.tier-trader header.top.hdr #bellmenu ~ #hdBell { display: none !important; }
html.lim:not(.tier-trader) .upanel [data-trade] { display: none !important; }   /* «Сим» у меню аватара — власнику й trader-у */
header.top.hdr a.ibtn.bell[aria-current="page"] { color: var(--accent); background: var(--accent-bg); }
/* маленьке вікно підтвердження: код зняття стоп-крана користувача (app/kill_code.js, будь-яка сторінка) і видалення користувача («Доступи») — стилі тут, а не в css сторінки */
.modal.kcm { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(5,7,10,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal.kcm .box { width: min(400px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 14px; background: var(--s1); border: 1px solid var(--line-2); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); }
.modal.kcm .bh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .modal.kcm .bh b { font-size: 15px; }
.modal.kcm .bh .x { margin-left: auto; width: 40px; height: 40px; border-radius: 8px; font-size: 18px; color: var(--t3); } .modal.kcm .bh .x:hover { background: var(--s3); color: var(--t1); }
.modal.kcm .bb { padding: 14px 16px 16px; }
.modal.kcm .kform { display: grid; gap: 12px; } .modal.kcm .hint { color: var(--t2); font-size: 12.5px; }
.modal.kcm .fld { display: grid; gap: 5px; } .modal.kcm .fld .k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.modal.kcm input { height: 44px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--s2); color: var(--t1); font: 600 20px var(--mono); letter-spacing: .3em; outline: none; }
.modal.kcm input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.modal.kcm .err { color: var(--down); font-size: 12.5px; min-height: 0; } .modal.kcm .err:empty { display: none; }
.modal.kcm .acts { display: flex; gap: 8px; flex-wrap: wrap; } .modal.kcm .acts .btn { height: 40px; }

/* ── 10-22 (Владік, як у spreadex): позначки рядків — прикріпити / обране / приховати (app/marks_ui.js). Спільне для головної
   і сітки: header.css підключено на обох сторінках. Жовтий — лише для увімкненого (закріплено / обране), решта — тихі іконки. ── */
:root { --mk: #fbbf24; --mk-bg: rgba(251,191,36,.12); --mk-ring: rgba(251,191,36,.42); }
:root[data-theme="light"] { --mk: #d97706; --mk-bg: rgba(217,119,6,.10); --mk-ring: rgba(217,119,6,.38); }
.mk-acts { display: inline-flex; align-items: center; gap: 1px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--s1); vertical-align: middle; }
.mk-b { width: 24px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--t3); transition: color .15s, background-color .15s; }
.mk-b svg, .mk-mi svg, .mk-chip svg, .mk-rs svg { width: 14px; height: 14px; flex: none; }
.mk-b:hover { color: var(--t1); background: var(--s3); }
.mk-b[aria-pressed="true"] { color: var(--mk); --mk-fill: var(--mk); }
.mk-b.mk-hide:hover { color: var(--down); background: var(--down-bg); }
.mk-b:focus-visible, .mk-mi:focus-visible, .mk-chip:focus-visible, .mk-rs:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.mk-on { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; color: var(--mk); --mk-fill: var(--mk); vertical-align: middle; }
.mk-on i { display: inline-grid; place-items: center; } .mk-on svg { width: 11px; height: 11px; }
/* спливаючі: меню рядка (телефон — утримати; миша — права кнопка) і список прихованих */
.mk-pop { position: fixed; z-index: 950; min-width: 210px; max-width: calc(100vw - 16px); padding: 5px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--s1); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); animation: mkin .14s ease-out; }
@keyframes mkin { from { opacity: 0; transform: translateY(-3px) scale(.98); } }
.mk-ph { display: flex; align-items: center; gap: 8px; padding: 7px 9px 6px; font-size: 12px; color: var(--t3); }
.mk-ph b { color: var(--t1); font-weight: 650; } .mk-ph .n { font-family: var(--mono); font-size: 11.5px; }
.mk-ph .coin { font-size: 13px; }
.mk-mi { width: 100%; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 8px; color: var(--t1); font: 600 13px var(--sans); text-align: left; }
.mk-mi svg { color: var(--t3); width: 15px; height: 15px; }
.mk-mi:hover, .mk-mi:focus-visible { background: var(--s2); }
.mk-mi[aria-pressed="true"] svg { color: var(--mk); --mk-fill: var(--mk); }
.mk-mi.mk-hide:hover svg { color: var(--down); }
.mk-hid { width: 300px; }
.mk-hid .mk-all { margin-left: auto; height: 24px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--t2); font: 600 11.5px var(--sans); }
.mk-hid .mk-all:hover { color: var(--t1); border-color: var(--accent-ring); }
.mk-list { max-height: min(360px, 60vh); overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); padding-top: 3px; }
.mk-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 2px 4px 2px 9px; border-radius: 8px; }
.mk-row:hover { background: var(--s2); }
.mk-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.mk-row .nm .q, .mk-row .nm small { color: var(--t3); font-weight: 500; }
@media (max-width: 480px) { .mk-row .nm { white-space: normal; line-height: 1.25; } .mk-row .nm .mk-left { display: block; font-size: 11px; } }
.mk-rs { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 7px; color: var(--t2); font: 600 12px var(--sans); }
.mk-rs:hover { color: var(--accent); background: var(--accent-bg); }
.mk-none, .mk-note { margin: 0; padding: 8px 9px; font-size: 11.5px; line-height: 1.4; color: var(--t3); }
.mk-note { border-top: 1px solid var(--line); margin-top: 4px; }
/* чипи у панелі фільтрів */
.mk-bar { display: inline-flex; align-items: center; gap: 6px; }
.mk-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--t3); font: 600 12px var(--sans); transition: color .15s, border-color .15s, background-color .15s; }
.mk-chip:hover { color: var(--t1); }
.mk-chip .n { font: 500 11.5px var(--mono); color: var(--t3); } .mk-chip .n:empty { display: none; }
.mk-chip.mk-favc[aria-pressed="true"] { color: var(--t1); border-color: var(--mk-ring); background: var(--mk-bg); }
.mk-chip.mk-favc[aria-pressed="true"] svg { color: var(--mk); --mk-fill: var(--mk); }
.mk-chip.mk-hidc { padding: 0 9px; } .mk-chip[hidden] { display: none; }
/* toast */
.mk-toast { position: fixed; left: 50%; bottom: 22px; z-index: 960; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 9px 10px 9px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--s1); color: var(--t1); font: 500 12.5px/1.35 var(--sans); box-shadow: 0 16px 40px -12px rgba(0,0,0,.6);
  opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity .18s, transform .18s; }
.mk-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mk-toast button { flex: none; height: 26px; padding: 0 10px; border-radius: 6px; color: var(--accent); font: 600 12px var(--sans); } .mk-toast button:hover { background: var(--accent-bg); }
@media (prefers-reduced-motion: reduce) { .mk-pop { animation: none; } .mk-toast { transition: none; } }