/* Веб-интерфейс бота — общий стиль по макету Claude Design (docs/ui_prototype/surebet-bot-prototype.html). * Токены цветов/теней — один в один из макета (тёмная и светлая тема), компоненты — классы вместо * инлайн-стилей макета, размеры и отступы сохранены. Тема — атрибут data-theme на . */ :root, [data-theme="dark"] { --bg0: #0E0B1F; --bg1: #161230; --side: rgba(12, 9, 28, .72); --top: rgba(14, 11, 31, .72); --top-solid: rgba(14, 11, 31, .97); --sf: #19143A; --sf2: #211B46; --sf3: #2B2456; --ln: rgba(165, 145, 255, .11); --ln2: rgba(165, 145, 255, .22); --tx: #F2F0FD; --tx2: #BFB9E0; --tx3: #8E88B8; --acc: #8B5CF6; --acc2: #C084FC; --accbg: rgba(139, 92, 246, .18); --acctx: #C4B5FD; --glare: rgba(192, 132, 252, .22); --ok: #22C55E; --okbg: rgba(34, 197, 94, .13); --okt: #4ADE80; --err: #EF4444; --errbg: rgba(239, 68, 68, .14); --errt: #F87171; --warn: #F59E0B; --warnbg: rgba(245, 158, 11, .14); --warnt: #FBBF24; --info: #38BDF8; --infobg: rgba(56, 189, 248, .13); --infot: #7DD3FC; --vio: #A78BFA; --viobg: rgba(167, 139, 250, .16); --viot: #C4B5FD; --graybg: rgba(142, 136, 184, .14); --orb: #34D399; --orbbg: rgba(52, 211, 153, .15); --pin: #FB923C; --pinbg: rgba(251, 146, 60, .15); --poly: #60A5FA; --polybg: rgba(96, 165, 250, .16); --sh: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 10px 30px rgba(4, 2, 18, .35); --ov: rgba(6, 4, 18, .66); --skel: rgba(165, 145, 255, .09); --skel2: rgba(165, 145, 255, .18); --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'Inter', system-ui, sans-serif; color-scheme: dark; } [data-theme="light"] { --bg0: #F6F4FD; --bg1: #ECE7FA; --side: rgba(255, 255, 255, .8); --top: rgba(255, 255, 255, .74); --top-solid: rgba(255, 255, 255, .97); --sf: #FFFFFF; --sf2: #F5F2FD; --sf3: #ECE7FA; --ln: rgba(60, 40, 150, .10); --ln2: rgba(60, 40, 150, .19); --tx: #16122E; --tx2: #4A4470; --tx3: #736E98; --accbg: rgba(139, 92, 246, .11); --acctx: #6D28D9; --glare: rgba(139, 92, 246, .14); --okbg: rgba(34, 197, 94, .11); --okt: #15803D; --errbg: rgba(239, 68, 68, .10); --errt: #B91C1C; --warnbg: rgba(245, 158, 11, .13); --warnt: #B45309; --infobg: rgba(56, 189, 248, .13); --infot: #0369A1; --vio: #7C3AED; --viobg: rgba(124, 58, 237, .10); --viot: #6D28D9; --graybg: rgba(115, 110, 152, .12); --orb: #059669; --orbbg: rgba(5, 150, 105, .11); --pin: #EA580C; --pinbg: rgba(234, 88, 12, .10); --poly: #2563EB; --polybg: rgba(37, 99, 235, .10); --sh: 0 1px 2px rgba(30, 20, 90, .05), 0 8px 26px rgba(30, 20, 90, .06); --ov: rgba(30, 22, 70, .38); --skel: rgba(60, 40, 150, .06); --skel2: rgba(60, 40, 150, .13); color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg1); } body { min-height: 100vh; min-width: 1280px; background: linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%); background-attachment: fixed; color: var(--tx); font-family: var(--sans); font-size: 13px; line-height: 1.45; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } a { color: var(--acctx); text-decoration: none; } a:hover { color: var(--acc2); } input, select, textarea, button { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: default; } h1, h2, h3 { margin: 0; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--sf3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } @keyframes sb-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } } @keyframes sb-glare { 0% { transform: translateX(-120%); } 100% { transform: translateX(420%); } } @keyframes sb-flash { 0% { background-color: rgba(139, 92, 246, .32); } 100% { background-color: transparent; } } @keyframes sb-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } } @keyframes sb-skel { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes sb-bar { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } .ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; flex: none; font-variation-settings: 'FILL' 0; user-select: none; } .ms.f { font-variation-settings: 'FILL' 1; } .mono { font-family: var(--mono); } .hidden { display: none !important; } .nowrap { white-space: nowrap; } .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tx2 { color: var(--tx2); } .tx3 { color: var(--tx3); } .pos, .okt { color: var(--okt); } .neg, .errt { color: var(--errt); } .warnt { color: var(--warnt); } .acctx { color: var(--acctx); } .sp { flex: 1; } /* тона: --c текст, --b фон, --s сигнал */ .t-ok { --c: var(--okt); --b: var(--okbg); --s: var(--ok); } .t-err { --c: var(--errt); --b: var(--errbg); --s: var(--err); } .t-warn { --c: var(--warnt); --b: var(--warnbg); --s: var(--warn); } .t-info { --c: var(--infot); --b: var(--infobg); --s: var(--info); } .t-vio { --c: var(--viot); --b: var(--viobg); --s: var(--vio); } .t-gray { --c: var(--tx3); --b: var(--graybg); --s: var(--tx3); } .t-acc { --c: var(--acctx); --b: var(--accbg); --s: var(--acc); } /* ------------------------------------------------------------------ каркас */ .app { display: flex; min-height: 100vh; } .side { position: sticky; top: 0; height: 100vh; flex: none; width: 240px; display: flex; flex-direction: column; padding: 16px 12px; background: var(--side); border-right: 1px solid var(--ln); transition: width .2s ease; overflow: hidden; z-index: 35; } .side .brand { display: flex; align-items: center; gap: 11px; padding: 2px 4px 22px; color: var(--tx); } .logo-sq { width: 38px; height: 38px; flex: none; border-radius: 12px; background: linear-gradient(135deg, #8B5CF6, #C084FC); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(139, 92, 246, .42); } .logo-sq .ms { font-size: 21px; color: #fff; } .side .brand .t1 { font-weight: 750; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; } .side .brand .t2 { font-size: 11px; color: var(--tx3); white-space: nowrap; } .nav-g { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; } .nav-g .gt { font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); padding: 0 11px 6px; white-space: nowrap; height: 22px; } .nav-i { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 11px; border: 0; border-radius: 10px; text-align: left; background: transparent; color: var(--tx2); font-weight: 500; font-size: 13.5px; } .nav-i:hover { color: var(--tx); } .nav-i .ms { font-size: 20px; color: var(--tx3); } .nav-i.on { background: var(--accbg); color: var(--tx); font-weight: 650; box-shadow: inset 2px 0 0 var(--acc); } .nav-i.on .ms { color: var(--acc2); font-variation-settings: 'FILL' 1; } .nav-i .l, .side .lb { white-space: nowrap; transition: opacity .15s; } .side-host { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--sf2); border: 1px solid var(--ln); margin-bottom: 8px; overflow: hidden; } .side-host .ms { font-size: 18px; color: var(--tx3); } .side-host .h1 { font-size: 12px; font-weight: 600; white-space: nowrap; } .side-host .h2 { font-size: 11px; color: var(--tx3); white-space: nowrap; } .side-toggle { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 11px; border: 0; border-radius: 10px; background: transparent; color: var(--tx3); } .side-toggle:hover { color: var(--tx2); } .side.collapsed { width: 72px; } .side.collapsed .lb, .side.collapsed .nav-i .l { opacity: 0; } .side.collapsed .gt-t { display: none; } .side:not(.collapsed) .gt-d { display: none; } .mock-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--viot); background: var(--viobg); } .shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 24px; background: var(--top-solid, var(--top)); border-bottom: 1px solid var(--ln); } .modes { display: flex; padding: 3px; gap: 2px; background: var(--sf2); border: 1px solid var(--ln); border-radius: 11px; flex: none; } .modes button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; white-space: nowrap; font-size: 12.5px; background: transparent; color: var(--tx3); font-weight: 500; } .modes button:hover { color: var(--tx2); } .modes button.on { font-weight: 700; } .modes button.on.m-off { background: var(--graybg); color: var(--tx3); } .modes button.on.m-dry { background: var(--infobg); color: var(--infot); } .modes button.on.m-confirm { background: var(--warnbg); color: var(--warnt); } .modes button.on.m-auto { background: linear-gradient(135deg, #8B5CF6, #A855F7); color: #fff; box-shadow: 0 4px 14px rgba(139, 92, 246, .4); } .scan { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--sf2); border: 1px solid var(--ln); font-size: 12.5px; color: var(--tx2); white-space: nowrap; min-width: 0; overflow: hidden; } .scan .d { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tx3); } .scan.ok .d { background: var(--ok); animation: sb-pulse 1.6s ease-in-out infinite; } .scan.warn .d { background: var(--warn); } .scan.err .d { background: var(--err); } .scan b { color: var(--tx); font-weight: 600; } .stopchip { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 10px; white-space: nowrap; font-size: 12.5px; font-weight: 650; background: var(--sf2); color: var(--tx3); border: 1px solid var(--ln); } .stopchip .ms { font-size: 18px; } .stopchip.on { background: var(--errbg); color: var(--errt); border-color: var(--err); } .hstat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; white-space: nowrap; } .hstat .k { font-size: 10.5px; color: var(--tx3); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; } .hstat .v { font-size: 15px; font-weight: 650; } .hstat .v.inc { font-weight: 750; color: var(--okt); } .hstat .v.inc.neg { color: var(--errt); } .vsep { width: 1px; height: 30px; background: var(--ln2); flex: none; } .icbtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--ln); background: var(--sf2); color: var(--tx2); display: grid; place-items: center; flex: none; } .icbtn:hover { color: var(--tx); } .icbtn .ms { font-size: 20px; } .banners { display: flex; flex-direction: column; gap: 8px; padding: 16px 24px 0; } .banners:empty { display: none; } .banner { display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 16px; border-radius: 12px; background: var(--b); border: 1px solid color-mix(in oklch, var(--s) 45%, transparent); animation: sb-in .3s ease-out; } .banner > .ms { font-size: 22px; color: var(--c); font-variation-settings: 'FILL' 1; } .banner .bt { font-weight: 650; color: var(--tx); } .banner .bs { font-size: 12px; color: var(--tx2); } .banner .ba { height: 34px; padding: 0 14px; border-radius: 9px; border: 0; background: var(--s); color: #fff; font-weight: 700; white-space: nowrap; } .banner.t-warn .ba { color: #1C1203; } main.page { padding: 20px 24px 96px; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1800px; } .page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .page-head h1 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.02em; } .page-head .sub { color: var(--tx3); margin-top: 2px; } /* ------------------------------------------------------------------ общие блоки */ .card { border-radius: 16px; background: var(--sf); border: 1px solid var(--ln); box-shadow: var(--sh); min-width: 0; } .card-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ln); } .card-h.wrap { flex-wrap: wrap; padding: 12px 18px; } .card-h .t { font-weight: 700; font-size: 14px; } .card-h .s { font-size: 12px; color: var(--tx3); } .card-h > .ms { font-size: 19px; color: var(--tx3); } .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .klbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); } .empty-s { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 18px; text-align: center; } .empty-s .eic { width: 52px; height: 52px; border-radius: 16px; background: var(--accbg); display: grid; place-items: center; } .empty-s .eic .ms { font-size: 28px; color: var(--acctx); } .empty-s.t-err .eic { background: var(--errbg); } .empty-s.t-err .eic .ms { color: var(--errt); } .empty-s .et { font-weight: 700; font-size: 15px; } .empty-s .es { font-size: 12.5px; color: var(--tx3); max-width: 420px; text-wrap: pretty; } .skel { border-radius: 6px; background: linear-gradient(90deg, var(--skel) 0%, var(--skel2) 50%, var(--skel) 100%); background-size: 800px 100%; animation: sb-skel 1.4s linear infinite; } /* бейдж площадки */ .bk { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--bc, var(--tx2)); background: var(--bb, var(--graybg)); white-space: nowrap; } .bk.m { height: 22px; padding: 0 7px; border-radius: 7px; font-size: 10.5px; } .bk.l { height: 26px; padding: 0 9px; border-radius: 8px; font-size: 11px; } .bk.xl { height: 40px; min-width: 52px; padding: 0 10px; border-radius: 12px; font-size: 13px; } .bk.col { display: flex; } .bk-orb { --bc: var(--orb); --bb: var(--orbbg); } .bk-pin { --bc: var(--pin); --bb: var(--pinbg); } .bk-poly { --bc: var(--poly); --bb: var(--polybg); } .bk-other { --bc: var(--tx2); --bb: var(--graybg); } .bkdot { width: 8px; height: 8px; border-radius: 3px; background: var(--bc); flex: none; display: inline-block; } .bkname { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } /* чипы статуса */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--c); background: var(--b); } .chip .d { width: 6px; height: 6px; border-radius: 50%; background: var(--s); flex: none; } .chip.sm { height: 22px; padding: 0 8px; font-size: 11px; } .chip.ready { height: 24px; font-weight: 650; cursor: help; } .chip.ready .d { width: 7px; height: 7px; } .pill { display: inline-flex; height: 18px; align-items: center; padding: 0 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; color: var(--c); background: var(--b); } .inwork { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; background: linear-gradient(135deg, #8B5CF6, #C084FC); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; } .inwork .d { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: sb-pulse 1.2s infinite; } /* кнопки */ .btn { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--ln2); background: transparent; color: var(--tx); font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; } .btn .ms { font-size: 18px; } .btn:hover:not(:disabled) { background: var(--sf2); } .btn:disabled { opacity: .5; } .btn.p { border: 0; padding: 0 18px; background: linear-gradient(135deg, #8B5CF6, #A855F7); color: #fff; font-weight: 750; } .btn.p:hover:not(:disabled) { background: linear-gradient(135deg, #7C4DEB, #9F48F0); } .btn.ok { border: 0; background: var(--ok); color: #052E14; font-weight: 800; padding: 0 20px; } .btn.ok:hover:not(:disabled) { background: var(--ok); filter: brightness(1.08); } .btn.er { border: 0; background: var(--err); color: #fff; font-weight: 750; } .btn.er:hover:not(:disabled) { background: var(--err); filter: brightness(1.08); } .btn.gray { border: 0; background: var(--sf3); color: var(--tx2); font-weight: 750; } .btn.sm { height: 34px; padding: 0 12px; border-radius: 9px; } .btn.xs { height: 30px; padding: 0 12px; border-radius: 8px; } .btn.lnk { height: 30px; padding: 0 12px; border-radius: 9px; color: var(--acctx); font-weight: 600; gap: 4px; } .btn.lnk .ms { font-size: 16px; } .btn.dash { border-style: dashed; color: var(--acctx); } .ibtn { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--tx3); display: grid; place-items: center; flex: none; } .ibtn:hover:not(:disabled) { background: var(--sf3); color: var(--tx); } .ibtn:disabled { opacity: .35; } .ibtn .ms { font-size: 18px; } .ibtn.ed { color: var(--tx2); } .ibtn.ed .ms { font-size: 17px; } .ibtn.del { color: var(--errt); } .ibtn.l { width: 30px; height: 30px; border-radius: 8px; } /* сегменты и вкладки */ .seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--sf2); border: 1px solid var(--ln); flex: none; } .seg button { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; font-size: 12.5px; white-space: nowrap; background: transparent; color: var(--tx2); font-weight: 500; } .seg.tabs button { color: var(--tx3); } .seg button:hover { color: var(--tx); } .seg button.on { background: var(--sf); color: var(--tx); font-weight: 650; } .seg.tabs button.on { box-shadow: 0 1px 3px rgba(0, 0, 0, .2); } .seg.tabs.bt button { padding: 0 11px; } .seg .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; background: var(--graybg); color: var(--tx3); } .seg button.on .n { background: var(--accbg); color: var(--acctx); } .seg.big { border-radius: 11px; } .seg.big button { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; } .seg:has(button:disabled) button:disabled { opacity: .45; } /* поля */ .inp { width: 92px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--ln2); background: var(--sf2); color: var(--tx); text-align: right; font-weight: 600; outline: none; } .inp.w74 { width: 74px; } .inp.wph { width: 124px; } .inp.txt { text-align: left; font-weight: 400; font-family: var(--mono); font-size: 12px; } .inp:focus, .area:focus, .sel:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accbg); } .inp:disabled, .area:disabled, .sel:disabled { opacity: .7; } .inp::placeholder, .area::placeholder { color: var(--tx3); font-weight: 500; } .inp[type=number] { -moz-appearance: textfield; } .inp::-webkit-outer-spin-button, .inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .bad .inp, .inp.bad { border-color: var(--err); } .sel { height: 34px; padding: 0 30px 0 12px; border-radius: 9px; border: 1px solid var(--ln2); background: var(--sf2); color: var(--tx); font-weight: 600; white-space: nowrap; outline: none; -webkit-appearance: none; appearance: none; max-width: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='%238E88B8' d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4L17.4 10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } [data-theme="light"] .sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='%23736E98' d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4L17.4 10z'/%3E%3C/svg%3E"); } .sel option { background: var(--sf); color: var(--tx); } .area { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ln2); background: var(--sf2); color: var(--tx); font-family: var(--mono); font-size: 12px; line-height: 1.6; resize: vertical; outline: none; } .unit { font-size: 12px; color: var(--tx3); min-width: 18px; white-space: nowrap; } .ot { font-size: 12px; color: var(--tx3); } .tgl { position: relative; width: 40px; height: 22px; border-radius: 99px; border: 0; padding: 0; flex: none; background: var(--sf3); transition: background .15s; } .tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; } .tgl.on { background: var(--acc); } .tgl.on::after { transform: translateX(18px); } .tgl.sm { width: 34px; height: 20px; } .tgl.sm::after { width: 14px; height: 14px; box-shadow: none; } .tgl.sm.on::after { transform: translateX(14px); } .tgl.lg { width: 36px; height: 20px; } .tgl.lg::after { width: 14px; height: 14px; box-shadow: none; } .tgl.lg.on::after { transform: translateX(16px); } .tgl:disabled { opacity: .5; } .mchips { display: flex; flex-wrap: wrap; gap: 6px; } .mchip { display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px 0 8px; border-radius: 99px; font-size: 12.5px; background: var(--sf2); color: var(--tx2); font-weight: 500; border: 1px solid var(--ln); } .mchip .ms { font-size: 16px; opacity: .55; } .mchip.on { background: var(--accbg); color: var(--acctx); font-weight: 650; border-color: var(--acc); } .mchip.on .ms { opacity: 1; } .mchip:disabled { cursor: default; } .pchip { height: 30px; padding: 0 11px; border-radius: 99px; font-size: 12.5px; background: var(--sf2); color: var(--tx2); font-weight: 500; border: 1px solid var(--ln); } .pchip.on { background: var(--accbg); color: var(--acctx); font-weight: 650; border-color: var(--acc); } .search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ln2); background: var(--sf2); } .search .ms { font-size: 18px; color: var(--tx3); } .search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tx); outline: none; } .search input::placeholder { color: var(--tx3); } .fbtn { position: relative; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 12px; border-radius: 10px; border: 1px solid var(--ln2); background: var(--sf2); color: var(--tx); white-space: nowrap; } .fbtn.on { border-color: var(--acc); background: var(--accbg); } .fbtn .k { color: var(--tx3); } .fbtn b { font-weight: 600; } .fbtn .ms { font-size: 18px; color: var(--tx3); } .fbtn select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; } .fbtn input[type=date] { border: 0; background: transparent; color: var(--tx); font-weight: 600; outline: none; width: 118px; } .filterbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; } /* ------------------------------------------------------------------ настройки (schemaform) */ .sec { border-radius: 16px; background: var(--sf); border: 1px solid var(--ln); box-shadow: var(--sh); min-width: 0; overflow: hidden; } .sec.saved { border-color: color-mix(in oklch, var(--ok) 50%, transparent); } .sec-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; } .sec-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--accbg); } .sec-ic .ms { font-size: 19px; color: var(--acctx); } .sec-h .st { font-weight: 700; font-size: 14.5px; } .sec-h .ss { font-size: 12px; color: var(--tx3); text-wrap: pretty; } .srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--ln); } .srow.blk { grid-template-columns: minmax(0, 1fr); } .srow.dis { opacity: .45; } .srow .lbl { font-weight: 550; color: var(--tx); text-wrap: pretty; } .srow .hint { font-size: 12px; color: var(--tx3); margin-top: 1px; text-wrap: pretty; } .srow .inh { font-size: 12px; color: var(--acctx); margin-top: 2px; } .srow .errm { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--errt); margin-top: 3px; font-weight: 600; } .srow .errm:empty { display: none; } .srow .errm .ms { font-size: 15px; } .srow .ctl { display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 0; flex-wrap: wrap; } .srow.saved .inp, .srow.saved .sel, .srow.saved .area { border-color: var(--ok); } .srow.bad .inp, .srow.bad .sel, .srow.bad .area { border-color: var(--err); } .savebar { position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--sf2); border: 1px solid var(--ln); box-shadow: 0 16px 40px rgba(4, 2, 18, .35); } .savebar > .ms { font-size: 22px; color: var(--okt); font-variation-settings: 'FILL' 1; } .savebar .bt { font-weight: 650; } .savebar .bs { font-size: 12px; color: var(--tx2); } /* состояние покоя (ничего только что не сохраняли) — плашка не должна лезть в глаза: приглушённый значок и текст, без «зелёной галочки» и тяжёлой тени */ .savebar.idle { box-shadow: none; background: var(--sf); } .savebar.idle > .ms { color: var(--tx3); font-variation-settings: 'FILL' 0; } .savebar.idle .bt { font-weight: 600; color: var(--tx2); } .savebar.idle .bs { color: var(--tx3); } .savebar.busy { border-color: var(--warn); } .savebar.busy > .ms { color: var(--warnt); } .savebar.bad { border-color: var(--err); } .savebar.bad > .ms { color: var(--errt); } .savebar .btn { height: 38px; } .savebar .btn.gray { padding: 0 18px; } /* фразы (правила суммы и т.п.) */ .phr { display: flex; flex-direction: column; gap: 8px; } .phr-i { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px 10px 12px; border-radius: 12px; background: var(--sf2); border: 1px solid var(--ln); } .phr-i .tgl { margin-top: 3px; } .phr-i .tx { flex: 1; min-width: 0; font-size: 13px; line-height: 1.95; color: var(--tx2); } .phr-i.off .tx { opacity: .45; } .phr-i .bs { display: flex; gap: 1px; flex: none; } .pv { color: var(--acctx); background: var(--accbg); font-weight: 650; padding: 2px 7px; border-radius: 6px; white-space: pre-wrap; } .pv.bkv { color: var(--bc); background: var(--bb); } .phr .empty { color: var(--tx3); padding: 4px 2px; } .addbtn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 10px; border: 1px dashed var(--ln2); background: transparent; color: var(--acctx); font-weight: 650; width: 100%; } .addbtn .ms { font-size: 18px; } .addbtn:hover { background: var(--accbg); } /* упорядоченный список */ .olist { display: flex; flex-direction: column; gap: 6px; } .olist-i { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px 0 6px; border-radius: 10px; background: var(--sf2); border: 1px solid var(--ln); } .olist-i > .ms { font-size: 19px; color: var(--tx3); } .olist-i .n { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--sf3); font-size: 12px; font-weight: 700; flex: none; } .olist-i .lb2 { font-weight: 600; flex: 1; } .olist-i .sb { font-size: 12px; color: var(--tx3); } .olist-add { display: flex; flex-wrap: wrap; gap: 6px; } /* матрица пар */ .pmx { display: grid; grid-template-columns: 120px repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; max-width: 560px; } .pmx .hd { display: inline-flex; align-items: center; justify-content: center; height: 28px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--bc); background: var(--bb); } .pmx .rh { display: flex; align-items: center; gap: 8px; font-weight: 650; } .pmx button { height: 44px; border-radius: 10px; border: 1px solid var(--ln2); background: var(--sf2); color: var(--tx3); display: grid; place-items: center; } .pmx button .ms { font-size: 22px; font-weight: 600; } .pmx button.on { background: var(--acc); border-color: var(--acc); color: #fff; } .pmx button.dg { background: transparent; border-color: var(--ln); cursor: default; } /* политика неперекрытой ноги: описание варианта */ .lp-desc { font-size: 12px; color: var(--tx3); margin-top: -4px; } /* ------------------------------------------------------------------ тосты, модалки */ #toasts { position: fixed; right: 24px; bottom: 24px; z-index: 65; display: flex; flex-direction: column; gap: 10px; width: 370px; pointer-events: none; } .toast { pointer-events: auto; display: flex; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 14px; background: var(--sf2); border: 1px solid var(--ln2); box-shadow: 0 18px 44px rgba(4, 2, 18, .4); animation: sb-in .3s ease-out; } .toast .ti { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--b); } .toast .ti .ms { font-size: 20px; color: var(--c); font-variation-settings: 'FILL' 1; } .toast .tb { flex: 1; min-width: 0; } .toast .th { display: flex; gap: 8px; align-items: baseline; } .toast .th b { font-weight: 700; } .toast .th .tm { font-size: 11px; color: var(--tx3); margin-left: auto; } .toast .tt { font-size: 12.5px; color: var(--tx2); margin-top: 2px; overflow-wrap: anywhere; } .toast .tx { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--tx3); display: grid; place-items: center; flex: none; } .toast .tx .ms { font-size: 17px; } .ov { position: fixed; inset: 0; z-index: 70; background: var(--ov); display: grid; place-items: center; padding: 24px; overflow: auto; } .ov.otop { display: flex; justify-content: center; align-items: flex-start; padding: 40px 24px; z-index: 60; } .dlg { width: 100%; max-width: 480px; background: var(--sf); border: 1px solid var(--ln2); border-radius: 18px; box-shadow: 0 30px 90px rgba(0, 0, 0, .5); padding: 24px; animation: sb-in .2s ease-out; } .dlg .di { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--b); margin-bottom: 14px; } .dlg .di .ms { font-size: 26px; color: var(--c); font-variation-settings: 'FILL' 1; } .dlg .dt { font-size: 18px; font-weight: 750; margin-bottom: 6px; } .dlg .dx { font-size: 13px; color: var(--tx2); line-height: 1.55; text-wrap: pretty; } .dlg .dx code { font-family: var(--mono); font-size: 12px; } .dlg .df { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--sf2); font-size: 12.5px; color: var(--tx2); } .dlg .df div { display: flex; gap: 8px; } .dlg .df .ms { font-size: 16px; color: var(--tx3); } .dlg .db { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .dlg .db .btn.ac { border: 0; background: var(--s); color: #fff; font-weight: 750; padding: 0 18px; } .dlg .db .btn.ac.grad { background: linear-gradient(135deg, #8B5CF6, #A855F7); } .mdl { width: 100%; max-width: 640px; background: var(--sf); border: 1px solid var(--ln2); border-radius: 18px; box-shadow: 0 30px 90px rgba(0, 0, 0, .5); animation: sb-in .2s ease-out; overflow: hidden; } .mdl.w { max-width: 760px; } .mdl-h { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--ln); } .mdl-h > .ms { font-size: 22px; color: var(--acctx); } .mdl-h .t { font-size: 16px; font-weight: 750; flex: 1; } .mdl-h .x { width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--tx2); display: grid; place-items: center; } .mdl-b { padding: 18px 20px; max-height: calc(100vh - 220px); overflow: auto; } .mdl-f { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ln); } .mdl-f .errm { color: var(--errt); font-weight: 600; font-size: 12.5px; margin-right: auto; } .fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .ff { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ff.full { grid-column: 1 / -1; } .ff > .k { font-size: 12px; color: var(--tx3); font-weight: 600; } .ff .rng { display: flex; align-items: center; gap: 8px; } .ff .rng .inp { flex: 1; width: auto; min-width: 0; } .ff .chk { display: flex; align-items: center; gap: 10px; color: var(--tx2); } .prev { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--sf2); border: 1px dashed var(--ln2); } .prev .k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); margin-bottom: 6px; } .prev .v { font-size: 13.5px; line-height: 1.95; color: var(--tx2); } /* ------------------------------------------------------------------ страницы настроек: доп. блоки */ .meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .meter { padding: 16px 18px; } .meter .k { font-size: 12px; color: var(--tx3); } .meter .vv { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 10px; } .meter .v { font-size: 22px; font-weight: 750; } .meter .of { color: var(--tx3); } .meter .mb { height: 6px; border-radius: 99px; background: var(--sf3); overflow: hidden; } .meter .mb div { height: 6px; border-radius: 99px; } .spgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .spc { display: flex; flex-direction: column; gap: 10px; padding: 13px 14px; border-radius: 14px; background: var(--sf); border: 1px solid var(--ln); box-shadow: var(--sh); cursor: pointer; min-width: 0; } .spc.on { background: var(--accbg); border-color: var(--acc); box-shadow: 0 0 0 3px var(--accbg); } .spc .h { display: flex; align-items: center; gap: 10px; } .spc .i { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--sf2); } .spc .i .ms { font-size: 19px; color: var(--tx2); } .spc.on .i { background: var(--acc); } .spc.on .i .ms { color: #fff; } .spc .n { flex: 1; min-width: 0; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spc .m { display: flex; align-items: center; gap: 6px; min-width: 0; } .spc .m .pill { white-space: nowrap; } .spc .pill.t-gray { color: var(--tx2); } .spc.off .pill.t-gray { color: var(--tx3); } .spc .mt { font-size: 11.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spc.off .n, .spc.off .m { opacity: .5; } .sphead { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .sphead > .ms { font-size: 22px; color: var(--acc2); } .sphead .t { font-size: 17px; font-weight: 750; } .sphead .spsum { font-size: 12.5px; color: var(--tx2); margin-top: 2px; text-wrap: pretty; } .spc .sum { font-size: 11.5px; line-height: 1.35; color: var(--tx3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 31px; } .spc.on .sum { color: var(--tx2); } .spc.off .sum { opacity: .5; } /* «как в общих / своё» у наследуемого поля вида спорта */ .inhb { display: inline-flex; align-items: center; gap: 3px; height: 20px; margin-left: 8px; padding: 0 8px 0 6px; border-radius: 99px; border: 1px solid var(--ln2); background: var(--sf2); color: var(--tx3); font-size: 11px; font-weight: 650; vertical-align: 1px; } .inhb .ms { font-size: 13px; } .inhb:hover:not(:disabled) { color: var(--tx); border-color: var(--acc); } .inhb.own { background: var(--accbg); color: var(--acctx); border-color: var(--acc); } .srow.inhrow.dis { opacity: 1; } .srow.inhrow.dis .ctl, .srow.inhrow.dis .hint { opacity: .5; } /* лайв-запреты: подзаголовки групп, источник данных, «не для этого вида» */ .lvh { padding: 10px 18px 6px; border-top: 1px solid var(--ln); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); background: var(--sf2); } .srow .dsrc { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; font-size: 11.5px; color: var(--tx3); } .srow .dsrc .ms { font-size: 14px; margin-top: 1px; opacity: .7; } .srow.nrel .lbl::after { content: "не для этого вида"; margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--warnt); } /* матрица «рынок × период» */ .mmx { display: grid; grid-template-columns: 118px 40px repeat(var(--n, 2), minmax(0, 1fr)); gap: 6px 8px; align-items: center; } .mmx .hd { display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--tx2); background: var(--sf2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; } .mmx .rh { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mmx .cell { height: 32px; border-radius: 9px; border: 1px solid var(--ln2); background: var(--sf2); color: var(--tx3); display: grid; place-items: center; } .mmx .cell .ms { font-size: 19px; font-weight: 600; } .mmx .cell.on { background: var(--acc); border-color: var(--acc); color: #fff; } .mmx .cell.off { opacity: .45; } .plist { display: flex; flex-direction: column; gap: 6px; } .pitem { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 10px; background: var(--sf2); border: 1px solid var(--ln); } .pitem > .ms { font-size: 19px; color: var(--tx3); } .pitem .pn { font-weight: 650; } .pitem .pm { font-size: 11.5px; color: var(--tx3); } .pitem .btn.xs { background: var(--sf); } .pbtns { display: flex; gap: 8px; margin-top: 10px; } .pbtns .btn { flex: 1; height: 36px; } /* «Выгрузить/Загрузить настройки в файл»: у .btn white-space: nowrap, а подписи длинные — в узкой колонке кнопки должны переноситься, а не вылезать за карточку */ .pbtns.wide { flex-wrap: wrap; } .pbtns.wide .btn { flex: 1 1 240px; height: 40px; } .sess-box { margin: 0 18px 12px; padding: 12px; border-radius: 12px; background: var(--b); display: flex; align-items: center; gap: 10px; } .sess-box .d { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--s); } .sess-box .t1 { font-weight: 650; } .sess-box .t2 { font-size: 12px; color: var(--tx2); } .sess-box .btn { height: 32px; padding: 0 12px; border-radius: 9px; background: var(--sf); gap: 6px; } .sess-box .btn .ms { font-size: 17px; } .ordchip { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px; border-radius: 8px; background: var(--sf2); border: 1px solid var(--ln); color: var(--tx2); font-weight: 700; } .ordchip .ms { font-size: 18px; color: var(--tx3); } .ordchip button { width: 20px; height: 22px; border: 0; background: transparent; color: var(--tx3); display: grid; place-items: center; padding: 0; border-radius: 5px; } .ordchip button:hover:not(:disabled) { color: var(--tx); background: var(--sf3); } .ordchip button:disabled { opacity: .3; } .ordchip button .ms { font-size: 16px; } .pxl { display: flex; flex-direction: column; gap: 6px; } .pxi { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--sf2); border: 1px solid var(--ln); } .pxi.on { background: var(--accbg); border-color: var(--acc); } .pxi .rd { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ln2); display: grid; place-items: center; flex: none; } .pxi.on .rd { border-color: var(--acc); } .pxi.on .rd::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); } .pxi .pn { font-weight: 600; } .pxi .ph { font-family: var(--mono); font-size: 11px; color: var(--tx3); } .pxi .pg { font-weight: 650; white-space: nowrap; } .pxi .act { font-size: 11px; font-weight: 700; color: var(--acctx); } /* --- приложение: переключатель боевой отправки, версия, попытки ставочников, сеть площадки --- */ .livechip.on { background: var(--warnbg); color: var(--warnt); border-color: var(--warn); } .brand .ver { font-size: 10.5px; font-weight: 600; color: var(--tx3); margin-left: 4px; } .att-t { border: 1px solid var(--ln); border-radius: 12px; overflow: hidden; font-size: 12.5px; } .att-t .none { padding: 10px 14px; color: var(--tx3); } .att-t details.att + details.att { border-top: 1px solid var(--ln); } .att-t summary { display: grid; grid-template-columns: 96px 120px 64px 150px 110px 96px minmax(0, 1fr) 64px; gap: 10px; align-items: center; padding: 7px 14px; cursor: pointer; list-style: none; } .att-t summary::-webkit-details-marker { display: none; } .att-t summary:hover { background: var(--sf2); } .att-t summary .t { color: var(--tx3); } .att-t summary .rs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx2); } .att-t summary .r { text-align: right; } .att-t details[open] summary { background: var(--sf2); } .att-t .attd { padding: 8px 14px 12px; background: var(--sf2); } .att-t .attd .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin-bottom: 8px; font-size: 12px; } .att-t .attd .kv .k { color: var(--tx3); } .att-t .attd pre { margin: 0; max-height: 320px; overflow: auto; padding: 10px 12px; border-radius: 8px; background: var(--sf); border: 1px solid var(--ln); font-family: var(--mono); font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } @media (max-width: 900px) { .att-t summary { grid-template-columns: 80px 1fr 1fr; } .att-t summary > :nth-child(n+4) { grid-column: span 1; } } .lockrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .lockrow + .lockrow { border-top: 1px solid var(--ln); } .lockrow .lt { flex: 1; min-width: 0; } .lockrow .lt .l1 { font-weight: 650; } .lockrow .lt .l2 { font-size: 12px; color: var(--tx3); overflow-wrap: anywhere; } .pxres { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 12px; } .pxres .pxi2 { display: flex; gap: 8px; align-items: center; } .pxres .pxi2 .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dlrow { height: 8px; border-radius: 99px; background: var(--sf2); overflow: hidden; border: 1px solid var(--ln); } .dlrow > div { height: 100%; background: var(--acc); width: 0; transition: width .3s; } /* --- справочник: «?» у настроек, всплывающая карточка, подсказки при наведении, страница «Справочник» --- */ .hq { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 6px; border-radius: 50%; vertical-align: 1px; font-size: 11px; font-weight: 750; line-height: 1; color: var(--tx3); background: var(--sf2); border: 1px solid var(--ln2); cursor: pointer; user-select: none; flex: none; transition: color .12s, border-color .12s, background .12s; } .hq:hover, .hq:focus-visible { color: var(--acctx); border-color: var(--acc); background: var(--accbg); outline: none; } .hq-pair { display: inline-flex; gap: 2px; } .hq-pair .hq { margin-left: 0; } .sec-h .st .hq { vertical-align: 2px; } .builder .gt .hq { vertical-align: 0; width: 15px; height: 15px; font-size: 10px; text-transform: none; letter-spacing: 0; } .builder .bf .hq { align-self: center; margin: 0 2px 0 0; } [data-help-tip] { cursor: help; } a.hg { color: inherit; text-decoration: underline dotted color-mix(in oklch, var(--acc) 70%, transparent); text-underline-offset: 3px; } a.hg:hover { color: var(--acctx); } .hpop { position: fixed; z-index: 90; width: 400px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 24px)); display: flex; flex-direction: column; background: var(--sf); border: 1px solid var(--ln2); border-radius: 16px; box-shadow: 0 24px 70px rgba(4, 2, 18, .5); animation: sb-in .16s ease-out; overflow: hidden; } .hp-h { display: flex; align-items: flex-start; gap: 12px; padding: 14px 10px 12px 16px; border-bottom: 1px solid var(--ln); } .hp-ic { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--accbg); } .hp-ic .ms { font-size: 19px; color: var(--acctx); } .hp-t { font-weight: 700; font-size: 14.5px; line-height: 1.3; text-wrap: pretty; } .hp-m { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; color: var(--tx3); } .hp-m .ms { font-size: 14px; } .hp-b { padding: 12px 16px 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.5; } .hp-f { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--ln); font-size: 12px; background: var(--sf2); } .hp-f a { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; } .hp-f a .ms { font-size: 16px; } .hb-what { color: var(--tx); text-wrap: pretty; } .hb-ex { display: flex; gap: 8px; padding: 9px 11px; border-radius: 10px; background: var(--accbg); color: var(--tx2); } .hb-ex > .ms { font-size: 17px; color: var(--acctx); margin-top: 1px; } .hb-ex .k, .hb-row .k { display: block; font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); margin-bottom: 1px; } .hb-row > div { color: var(--tx2); } .hb-row > div .ms { font-size: 15px; color: var(--tx3); vertical-align: -3px; } .hb-row b { color: var(--tx); font-weight: 650; } .hb-warn { display: flex; gap: 8px; padding: 9px 11px; border-radius: 10px; background: var(--warnbg); color: var(--tx2); } .hb-warn > .ms { font-size: 17px; color: var(--warnt); margin-top: 1px; font-variation-settings: 'FILL' 1; } .hb-own { margin-top: 6px; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--ln2); display: flex; flex-direction: column; gap: 3px; } .hb-own .ok2 { font-size: 11px; font-weight: 650; color: var(--okt); } .hb-own .ow { display: grid; grid-template-columns: minmax(64px, max-content) minmax(0, 1fr); gap: 10px; font-size: 12px; } .hb-own .ow b { font-weight: 650; color: var(--tx); white-space: nowrap; } .hb-own .ow span { color: var(--tx3); } .hb-rel { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; } .hrel { height: 24px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--ln2); background: var(--sf2); color: var(--tx2); font-size: 11.5px; font-weight: 550; } .hrel:hover { color: var(--acctx); border-color: var(--acc); } .htip { position: fixed; z-index: 95; width: 340px; max-width: calc(100vw - 24px); padding: 11px 13px; border-radius: 12px; pointer-events: none; background: var(--top-solid); border: 1px solid var(--ln2); box-shadow: 0 16px 44px rgba(4, 2, 18, .45); animation: sb-in .12s ease-out; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; line-height: 1.45; } .htip .ht-t { font-weight: 700; font-size: 13px; } .htip .ht-x { font-family: var(--mono); font-size: 11.5px; color: var(--tx2); padding: 6px 8px; border-radius: 8px; background: var(--sf2); overflow-wrap: anywhere; } .htip .ht-f { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--tx3); } .htip .ht-f .ms { font-size: 14px; } .htip .hb-ex, .htip .hb-warn { padding: 7px 9px; } .help-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; } .help-nav { position: sticky; top: 84px; padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 110px); overflow: auto; } .help-nav .ng { font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); padding: 10px 10px 4px; } .help-nav a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; color: var(--tx2); font-size: 13px; } .help-nav a:hover { color: var(--tx); background: var(--sf2); } .help-nav a.on { background: var(--accbg); color: var(--tx); font-weight: 650; } .help-nav a .ms { font-size: 18px; color: var(--tx3); } .help-nav a.on .ms { color: var(--acc2); } .help-nav a .n { margin-left: auto; font-size: 11px; color: var(--tx3); font-weight: 600; } .help-head .search { max-width: 460px; margin-left: auto; } .help-sub { display: flex; align-items: center; gap: 10px; padding: 12px 18px 6px; border-top: 1px solid var(--ln); font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--tx3); } .hent { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 8px 20px; padding: 12px 18px; border-top: 1px solid var(--ln); } .help-sub + .hent { border-top: 0; } .hent .hn { font-weight: 650; color: var(--tx); text-wrap: pretty; } .hent .hn .hsp { display: block; font-size: 11.5px; color: var(--tx3); font-weight: 500; margin-top: 2px; } .hent .hn .chip { margin-top: 2px; } .hent .hb { display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; min-width: 0; } .hent.flash, .gl-i.flash { animation: sb-flash 2.4s ease-out; } .hent mark, .gl-i mark { background: var(--warnbg); color: inherit; border-radius: 3px; padding: 0 1px; } .gl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .gl-i { padding: 12px 18px; border-top: 1px solid var(--ln); } .gl-i:nth-child(odd) { border-right: 1px solid var(--ln); } .gl-i .gt2 { font-weight: 700; margin-bottom: 3px; } .gl-i .gx { color: var(--tx2); font-size: 13px; line-height: 1.5; } .gl-i .ge { margin-top: 6px; font-size: 12.5px; color: var(--tx3); } .help-empty { padding: 30px 18px; text-align: center; color: var(--tx3); } @media (max-width: 1100px) { .help-grid { grid-template-columns: minmax(0, 1fr); } .help-nav { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; } .hent { grid-template-columns: minmax(0, 1fr); } .gl-grid { grid-template-columns: minmax(0, 1fr); } }