/* 0.16.1 — «Браузер Alibry» (Windows 0.6.0): панель вкладок и адреса; страница — дочерний WebView поверх .br-page */
.app.browser-mode { display: flex; }
.app.browser-mode > .rail { width: 64px; flex: none; }
.app.browser-mode > .side, .app.browser-mode > .info { display: none !important; }
.app.browser-mode > .main { flex: 1; display: flex !important; min-width: 0; }
.br { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); }
.br-btn { width: 34px; height: 34px; flex: none; border-radius: 10px; display: inline-grid; place-items: center; color: var(--ink-2); background: none; border: 0; cursor: pointer; }
.br-btn:hover:not(:disabled) { background: var(--bg-3); color: var(--ink); }
.br-btn:disabled { opacity: .35; cursor: default; }
.br-btn.on, .br-btn.star.on { color: var(--brand); }
.br-tabs { display: flex; align-items: center; gap: 4px; padding: 6px 8px 0; background: var(--bg-2); border-bottom: 1px solid var(--line); min-height: 42px; }
.br-tabs .netind { margin-inline-start: 4px; }
.br-tabs-scroll { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.br-tab { flex: 0 1 200px; min-width: 72px; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 10px; border-radius: 10px 10px 0 0; color: var(--ink-2); cursor: pointer; font-size: 13px; position: relative; }
.br-tab:hover { background: var(--bg-3); }
.br-tab.on { background: var(--bg); color: var(--ink); box-shadow: 0 -1px 0 var(--line) inset; }
.br-tab.private { color: #fff; background: #3b3f4a; }
.br-tab.private.on { background: #2b2e36; }
.br-tab-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-tab-x { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: inherit; opacity: .7; background: none; border: 0; cursor: pointer; flex: none; }
.br-tab-x:hover { opacity: 1; background: var(--bg-3); }
.br-count { font-size: 12px; font-weight: 700; border: 1.5px solid currentColor; width: 24px; height: 24px; border-radius: 6px; margin: 0 4px; }
.br-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: br-spin .8s linear infinite; flex: none; }
@keyframes br-spin { to { transform: rotate(360deg); } }
.br-bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); position: relative; background: var(--bg); }
.br.bottom .br-bar { border-bottom: 0; border-top: 1px solid var(--line); }
.br-addr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 12px; border-radius: 18px; background: var(--bg-2); border: 1px solid transparent; position: relative; margin: 0 4px; }
.br-addr:focus-within { border-color: var(--brand); background: var(--bg); }
.br-addr.private { background: #3b3f4a; color: #fff; }
.br-addr input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; font-size: 14px; padding: 0; height: 100%; }
.br-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); flex: none; }
.br-lock.bad { color: #c62828; }
.br-lock small { font-size: 12px; font-weight: 600; }
.br-private-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #2b2e36; color: #fff; flex: none; }
.br-suggest { position: absolute; top: 40px; inset-inline: 0; z-index: 30; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: 4px; color: var(--ink); }
.br.bottom .br-suggest { top: auto; bottom: 40px; }
.br-suggest button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: none; border: 0; text-align: start; color: inherit; cursor: pointer; font: inherit; font-size: 14px; }
.br-suggest button:hover { background: var(--bg-2); }
.br-s-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-suggest small { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.br-menu-bg { position: fixed; inset: 0; z-index: 40; }
.br-menu { position: absolute; top: 44px; inset-inline-end: 8px; z-index: 41; width: 280px; max-height: calc(100vh - 140px); overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); padding: 6px; }
.br.bottom .br-menu { top: auto; bottom: 44px; }
.br-menu > button, .br-ctx button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; background: none; border: 0; color: var(--ink); text-align: start; cursor: pointer; font: inherit; font-size: 14px; }
.br-menu > button:hover:not(:disabled), .br-ctx button:hover { background: var(--bg-2); }
.br-menu > button:disabled { opacity: .4; cursor: default; }
.br-menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.br-zoom { display: flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 14px; }
.br-zoom span { flex: 1; }
.br-zoom button { min-width: 32px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); cursor: pointer; font: inherit; }
.br-zoom .br-zoom-v { min-width: 62px; }
.br-notice { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff4e5; color: #5d3a00; border-bottom: 1px solid #f3d19e; font-size: 14px; }
.br-notice.permission { background: var(--brand-soft); color: var(--ink); border-color: var(--line); }
.br-notice .grow { flex: 1; min-width: 0; }
:root[data-theme="dark"] .br-notice:not(.permission) { background: #3a2a10; color: #ffd9a0; border-color: #5d4520; }
.br-find { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-bottom: 1px solid var(--line); }
.br-find input { flex: 1; max-width: 360px; height: 30px; }
.br-page { flex: 1; min-height: 0; position: relative; overflow: auto; background: var(--bg); }
.br-home { max-width: 860px; margin: 0 auto; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.br-home-logo { display: flex; align-items: center; gap: 12px; font-size: 28px; }
.br-muted { color: var(--ink-2); font-size: 14px; margin: 6px 0; }
.br-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; width: 100%; margin-top: 12px; }
.br-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; background: var(--bg-2); border: 0; color: var(--ink); cursor: pointer; font: inherit; }
.br-tile:hover { background: var(--bg-3); }
.br-tile-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 20px; }
.br-tile-t { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-panel { max-width: 860px; margin: 0 auto; padding: 8px 16px 32px; }
.br-ph { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; background: var(--bg); padding: 8px 0; z-index: 1; }
.br-ph h3 { margin: 0; font-size: 18px; }
.br-ph .grow, .br-folder h4 .grow { flex: 1; }
.br-folder h4, .br-panel > div > h4, .br-panel > h4 { display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; font-size: 14px; color: var(--ink-2); }
.br-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.br-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; background: none; border: 0; border-radius: 8px; color: var(--ink); text-align: start; cursor: pointer; font: inherit; }
.br-row-main.static { cursor: default; }
.br-row-main:not(.static):hover { background: var(--bg-2); }
.br-row-main b, .br-row-main small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-row-main small { color: var(--ink-2); }
.br-row select { max-width: 160px; }
.br-time { color: var(--ink-2); font-size: 12px; width: 44px; flex: none; }
.br-search { width: 100%; margin: 8px 0; }
.br-sync { font-size: 13px; padding: 8px 12px; border-radius: 10px; background: var(--bg-2); color: var(--ink-2); }
.br-sync.cloud { background: var(--brand-soft); color: var(--ink); }
.br-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.br-soon { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--bg-3); color: var(--ink-2); }
.br-site { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.br-site b { flex: 1 1 100%; font-size: 14px; }
.br-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--bg-2); font-size: 12px; }
.br-chip.bad { background: #fde8e8; color: #8a1c1c; }
.br-chip button { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: inherit; cursor: pointer; }
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.br-card { position: relative; padding: 14px 32px 14px 14px; border-radius: 14px; background: var(--bg-2); cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 84px; }
.br-card.on { outline: 2px solid var(--brand); }
.br-card.private { background: #3b3f4a; color: #fff; }
.br-card b, .br-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-card .br-tab-x { position: absolute; top: 8px; inset-inline-end: 8px; }
.br-ctx-bg { position: fixed; inset: 0; z-index: 2000; }
.br-ctx { position: fixed; width: 260px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); padding: 6px; }
.br-send { width: min(420px, calc(100vw - 32px)); }
.br-send input { width: 100%; margin: 8px 0; }
.br-send-list { max-height: 50vh; overflow: auto; }
/* платформа Apple: скруглённые «капсулы», как Safari */
.br[data-platform="apple"] .br-addr { border-radius: 12px; }
.br[data-platform="apple"] .br-tab { border-radius: 10px; margin-bottom: 4px; }
@media (max-width: 760px) {
  .br-tab { flex-basis: 140px; }
}
/* правша/левша: строка адреса внизу; место под сегмент навигации, угловые индикаторы — в полосе вкладок (страница закрыла бы их) */
.br.bottom.right .br-bar { padding-right: 84px; }
.br.bottom.left .br-bar { padding-left: 84px; }
.app.browser-mode .netind-corner { display: none; }
.br-tabs .netind-head { display: flex !important; }