:root{ --bg:#0A0B10; --elev:#0C0D13; --panel:#16171F; --panel-2:#1F202A; --sunk:#121319; --field:#1A1B24; --glow:radial-gradient(1300px 700px at 84% -12%, rgba(124,120,248,.20), transparent 56%), radial-gradient(1050px 580px at -3% 4%, rgba(88,128,214,.11), transparent 52%); --hover:rgba(233,236,245,.05); --line:rgba(233,236,245,.09); --line-2:rgba(233,236,245,.16); --hi:rgba(255,255,255,.055); --text:#ECEEF3; --text-2:rgba(236,238,243,.72); --text-3:rgba(236,238,243,.50); --micro:rgba(236,238,243,.60); --act:#6D6AF2; --act-2:#8E8BF7; --act-ink:#fff; --act-soft:rgba(109,106,242,.20); --act-glow:rgba(109,106,242,.45); --ok:#42C98A; --warn:#E6B45C; --bad:#E9788A; --info:#5AA9C9; --scrim:rgba(6,8,12,.76); --scrim-soft:rgba(6,8,12,.5); --knob:#fff; --shadow-xs:0 1px 2px rgba(0,0,0,.28); --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -18px rgba(0,0,0,.55); --shadow-pop:0 1px 2px rgba(0,0,0,.4), 0 24px 54px -22px rgba(0,0,0,.72); --disp:'Onest','Inter',sans-serif; --sans:'Inter',-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace; --r-lg:16px; --r-md:12px; --r-sm:10px; --r-xs:8px; } :root[data-theme="light"]{ --bg:#EEF1F5; --elev:#F7F9FC; --panel:#FFFFFF; --panel-2:#F4F6FA; --sunk:#E7EAF0; --field:#F1F3F7; --glow:none; --hover:rgba(17,20,30,.045); --line:rgba(17,20,30,.09); --line-2:rgba(17,20,30,.14); --hi:rgba(255,255,255,.6); --text:#14161D; --text-2:rgba(20,22,29,.72); --text-3:rgba(20,22,29,.50); --micro:rgba(20,22,29,.56); --act:#5A56E6; --act-2:#4A46D8; --act-ink:#fff; --act-soft:rgba(90,86,230,.14); --act-glow:rgba(90,86,230,.32); --ok:#0F9E63; --warn:#B07C24; --bad:#D64560; --info:#3C7FA0; --scrim:rgba(24,28,40,.44); --scrim-soft:rgba(24,28,40,.28); --knob:#fff; --shadow-xs:0 1px 2px rgba(20,22,29,.08); --shadow-card:0 1px 2px rgba(20,22,29,.05), 0 4px 10px -4px rgba(20,22,29,.08), 0 14px 32px -18px rgba(20,22,29,.10); --shadow-pop:0 1px 3px rgba(20,22,29,.12), 0 24px 50px -20px rgba(20,22,29,.24); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}} body{background:var(--glow,none),var(--bg);background-attachment:fixed;color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} button{font-family:inherit;cursor:pointer} .num{font-variant-numeric:tabular-nums} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .app{display:grid;grid-template-columns:80px 1fr;min-height:100vh} /* сайдбар */ .side{background:var(--elev);border-right:1px solid var(--line);padding:16px 0 14px;display:flex;flex-direction:column;align-items:center;gap:3px;position:sticky;top:0;height:100vh;overflow-y:auto} .side .logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(150deg,var(--act-2),var(--act));display:flex;align-items:center;justify-content:center;color:var(--act-ink);font-family:var(--disp);font-weight:800;font-size:17px;margin-bottom:12px;box-shadow:0 4px 12px -4px var(--act-glow);flex:none} .side .sep{width:34px;height:1px;background:var(--line);margin:7px 0} .nav{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:64px;padding:9px 4px;border-radius:var(--r-md);color:var(--text-2);background:none;border:none;transition:color .14s} .nav:hover{color:var(--act)} .nav.on{color:var(--act);font-weight:600} .nav.on::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--act)} .nav .ic{width:20px;height:20px} .nav.on .ic,.nav:hover .ic{opacity:1} .nav .lb{font-size:9.5px;font-weight:600;letter-spacing:.005em;line-height:1.05;text-align:center} .nav .badge{position:absolute;top:4px;right:9px;min-width:16px;height:16px;font-family:var(--mono);font-size:9px;font-weight:600;background:var(--panel-2);color:var(--text-2);border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--elev)} .nav .badge.hot{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)} .side .foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:12px} .side .me{width:38px;height:38px;border-radius:50%;background:linear-gradient(150deg,var(--panel-2),var(--sunk));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;color:var(--text-2);flex:none} /* топбар */ .top{display:flex;align-items:center;gap:14px;padding:15px 30px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);z-index:20} .top .tt{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.015em} .top .ts{font-size:12.5px;color:var(--text-3);margin-top:1px} .top .sp{margin-left:auto} .top .rate{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:var(--panel);box-shadow:inset 0 1px 0 var(--hi)} .top .rate b{font-family:var(--mono);font-weight:600;color:var(--text)} .iconbtn{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);color:var(--text-2);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 1px 0 var(--hi);transition:color .14s,border-color .14s} .iconbtn:hover{color:var(--text);border-color:var(--line-2)} .iconbtn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--bad);border:2px solid var(--panel)} .status-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);background:color-mix(in srgb,var(--ok) 11%,transparent);color:var(--ok)} .status-chip i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2.6s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} .main{min-width:0;display:flex;flex-direction:column} .page{padding:28px 32px 72px;max-width:1760px;width:100%;margin:0 auto} .screen{display:none} .screen.on{display:block;animation:fade .3s cubic-bezier(.2,.7,.3,1)} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .row-gap{display:flex;flex-direction:column;gap:18px} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-card)} .section-t{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;margin:0 2px 14px} .section-t h3{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em} .section-t .lnk{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--act);background:none;border:none;transition:color .14s} .card:not(.chartcard)>.section-t{padding:16px 18px 0;margin:0 0 10px} .chartcard>.section-t{margin:0 0 6px} .row-gap>.toolbar{margin-bottom:0} .row-gap>.sect-h{margin-bottom:-8px} .row-gap>.dl-sum{margin-bottom:-8px} .sec-div{height:1px;background:var(--line);margin:2px 2px} .eyebrow{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--micro)} .sect-h{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;margin:0 2px 2px} .sect-h h3{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em;min-width:0} .sect-h .c{font-family:var(--mono);font-size:11px;color:var(--text-3)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:600;padding:9px 16px;border-radius:var(--r-sm);border:1px solid transparent;white-space:nowrap;transition:transform .12s,background .14s,border-color .14s,box-shadow .14s} .btn:active{transform:translateY(.5px)} .btn.pri{background:linear-gradient(180deg,var(--act-2),var(--act));color:var(--act-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px -8px var(--act-glow)} .btn.ghost{background:var(--panel);color:var(--text);border-color:var(--line-2);box-shadow:inset 0 1px 0 var(--hi)} .btn.ghost:hover{border-color:var(--text-3)} .btn.danger{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 38%,transparent)} .btn.ok{background:transparent;color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)} .btn.sm{font-size:12px;padding:7px 13px;border-radius:var(--r-xs)} .btn .ic{width:15px;height:15px} .btn:disabled{opacity:.5;cursor:not-allowed} .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;border:1px solid color-mix(in srgb,currentColor 26%,transparent);background:color-mix(in srgb,currentColor 8%,transparent)} .pill i{width:5px;height:5px;border-radius:50%;background:currentColor} .pill.ok{color:var(--ok)} .pill.warn{color:var(--warn)} .pill.bad{color:var(--bad)} .pill.info{color:var(--info)} .pill.mute{color:var(--text-2);background:var(--sunk);border-color:var(--line)} .tiles{display:grid;gap:14px} .tiles>*{min-width:0} .tiles.c6{grid-template-columns:repeat(6,1fr)} .tiles.c4{grid-template-columns:repeat(4,1fr)} .tiles.c3{grid-template-columns:repeat(3,1fr)} .tiles.c2{grid-template-columns:repeat(2,1fr)} .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px} .tile .k{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--micro);margin-bottom:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tile .v{font-family:var(--mono);font-weight:600;font-size:20px;letter-spacing:0;line-height:1.15;white-space:nowrap} .tile .v .u{font-size:11px;color:var(--text-3);font-weight:500;margin-left:5px;letter-spacing:0} .tile .v.money{color:var(--text)} .tile .sub{font-size:11.5px;color:var(--text-2);margin-top:8px;display:flex;align-items:center;gap:5px} /* график */ .chartcard{padding:18px 20px 12px} .chart svg{width:100%;height:150px;display:block} /* таблица */ .tbl-wrap{overflow:auto;max-height:520px} .tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:640px} .tbl.compact{min-width:0} .tbl td.low{color:var(--bad);font-weight:600} .tbl th{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--micro);font-weight:500;text-align:left;padding:12px 18px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:2;background:var(--panel)} .tbl td{padding:13px 18px;border-bottom:1px solid var(--line);color:var(--text-2)} .tbl tr:last-child td{border-bottom:none} .tbl tbody tr{transition:background .12s} .tbl tbody tr[data-modal]{cursor:pointer} .tbl tbody tr[data-modal]:hover td{background:var(--hover)} .tbl .id{font-family:var(--mono);font-size:12px;color:var(--text-3)} .tbl .m{font-family:var(--mono);font-weight:600;color:var(--text)} .tbl .r{text-align:right} .tbl .nm b{color:var(--text);font-weight:600} .tbl .nm span{font-size:11.5px;color:var(--text-3);display:block;white-space:nowrap} .tabs{display:inline-flex;gap:3px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px} .tab{font-size:12.5px;font-weight:600;color:var(--text-2);background:none;border:none;padding:7px 14px;border-radius:var(--r-xs);transition:background .14s,color .14s} .tab:not(.on):hover{color:var(--text)} .tab.on{background:var(--panel);color:var(--text);box-shadow:var(--shadow-xs)} .tab .c{font-family:var(--mono);font-size:10px;color:var(--text-3);margin-left:5px} .toolbar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:16px} .toolbar .sp{margin-left:auto} .inp{background:var(--field);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 13px;font-family:var(--sans);font-size:13px;color:var(--text);min-width:120px;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);transition:border-color .14s} .inp::placeholder{color:var(--text-3)} .inp:focus{outline:2px solid var(--act);outline-offset:1px;border-color:transparent} .search{position:relative;flex:1;min-width:200px} .search .inp{width:100%;padding-left:36px} .search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-3)} /* карточка-действие (подписи, споры) */ .act-card{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-card);padding:16px 18px;display:flex;flex-direction:column;gap:13px} .act-card.live{border-color:color-mix(in srgb,var(--warn) 40%,var(--line))} .act-card>.ac-hd{display:flex;align-items:center;justify-content:space-between;gap:12px} .act-card>.ac-hd>.sum{font-family:var(--mono);font-weight:600;font-size:22px} .act-card>.ac-hd>.ac-age{font-size:12.5px;color:var(--text-3);white-space:nowrap} .ac-who>b{font-size:14px;font-weight:600;display:block} .ac-who .tel{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--text-2);margin-left:8px} .ac-who>span{font-size:12.5px;color:var(--text-3);display:block;margin-top:3px} .ac-who span .rq{color:var(--text-2);font-weight:600} .act-card .sigs{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--text-2)} .act-card .sig{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--sunk);font-size:11.5px;font-weight:600} .act-card .sig.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)} .act-card .sig.wait{color:var(--text-3)} .act-card>.acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .act-card>.acts>.btn{flex:0 0 auto;min-width:136px} .act-card>.acts>.btn.danger{margin-left:auto} .list{display:flex;flex-direction:column} .li{display:flex;align-items:center;gap:15px;padding:13px 18px;border-bottom:1px solid var(--line);transition:background .12s} .li:last-child{border-bottom:none} .li .lead{width:30px;height:30px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;flex:none} .li .lead.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)} .li .lead.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)} .li .lead.warn{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn)} .li .lead.mute{background:var(--sunk);color:var(--text-3)} .li .body{min-width:0;flex:1} .li .body b{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .li .body>span{font-size:12px;color:var(--text-3);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .li .amt{text-align:right;white-space:nowrap} .li .amt b{font-family:var(--mono);font-weight:600;font-size:14px} .li .amt span{font-size:11px;color:var(--text-3);display:block;margin-top:2px} /* казна кошельки */ .wallets{display:grid;grid-template-columns:1.32fr 1fr;gap:14px} .wallets>*{min-width:0} .wallet{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:inset 0 1px 0 var(--hi),var(--shadow-card);display:flex;flex-direction:column;gap:13px} .wallet .role{display:flex;align-items:center;justify-content:space-between;gap:10px} .wallet .bal{font-family:var(--mono);font-weight:600;font-size:32px;letter-spacing:-.01em} .wallet .bal .u{font-size:15px;color:var(--text-3);font-weight:500;margin-left:8px} .wallet .addr{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;color:var(--text-2)} .wallet .meta{display:flex;flex-wrap:wrap;gap:8px} .wallet .note{font-size:12.5px;color:var(--text-2);line-height:1.55} .wallet>.wal-act{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto} /* деталь-секции для модалок */ .dsec{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} .dsec .sh{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--line);font-weight:600;font-size:12.5px;background:var(--panel-2)} .dsec .sh svg{width:15px;height:15px;color:var(--text-3)} .drow{display:flex;align-items:center;gap:12px;padding:11px 15px} .drow+.drow{border-top:1px solid var(--line)} .drow .cell{min-width:0} .drow .l{font-size:10.5px;color:var(--text-3);margin-bottom:1px} .drow .v{font-size:14px;font-weight:600} .drow .v.m{font-family:var(--mono)} .drow>.pill,.drow>.btn{margin-left:auto} .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)} .dgrid .drow{background:var(--panel);border-top:none} .modal-bg{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:60;padding:22px} .modal-bg.on{display:flex;animation:fade .2s ease} .modal{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);width:100%;max-width:540px;max-height:88vh;overflow-y:auto} .modal .mh{display:flex;align-items:center;justify-content:space-between;padding:19px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:3;border-radius:var(--r-lg) var(--r-lg) 0 0} .modal .mh b{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em} .modal .mh .x{background:none;border:none;color:var(--text-3);font-size:21px;line-height:1;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-xs)} .modal .mh .x:hover{color:var(--text);background:var(--hover)} .modal .mb{padding:22px 24px;display:flex;flex-direction:column;gap:16px} .modal .mf{padding:17px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;position:sticky;bottom:0;background:var(--panel);z-index:3;border-radius:0 0 var(--r-lg) var(--r-lg)} .dhero{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);padding:17px 19px} .dhero .l{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--micro)} .dhero .sum{font-family:var(--mono);font-weight:600;font-size:28px;display:flex;align-items:center;gap:11px;margin-top:5px} .dhero .profit{font-size:12.5px;color:var(--text-2);margin-top:5px} .sort-a{margin-left:5px;opacity:.7;font-size:11px;color:var(--text-2)} .empty{padding:50px 20px;text-align:center;color:var(--text-3);font-size:13px;display:flex;flex-direction:column;align-items:center} .empty .ic{width:34px;height:34px;margin:0 auto 13px;opacity:.5} .empty b{display:block;color:var(--text-2);font-weight:600;font-size:14px;margin-bottom:4px} .empty span{font-size:12.5px} /* кастомный выпадающий список (наш стиль вместо нативного) */ .sel{position:relative;display:inline-block;min-width:150px;vertical-align:middle} .field .sel,.field2 .sel{display:block;width:100%;min-width:0} .sel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--field);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 13px;font-family:var(--sans);font-size:13px;color:var(--text);cursor:pointer;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);text-align:left} .sel-btn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sel-btn svg{width:15px;height:15px;color:var(--text-3);flex:none;transition:transform .15s} .sel.open .sel-btn{border-color:var(--act);box-shadow:0 0 0 3px var(--act-soft)} .sel.open .sel-btn svg{transform:rotate(180deg)} .sel-btn:focus-visible{outline:2px solid var(--act);outline-offset:1px} .sel-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:5px;z-index:80;max-height:264px;overflow-y:auto;display:none;animation:fade .13s ease} .sel.up .sel-menu{top:auto;bottom:calc(100% + 5px)} .sel.open .sel-menu{display:block} .sel-opt{padding:9px 11px 9px 9px;border-radius:var(--r-xs);font-size:13px;color:var(--text-2);cursor:pointer;display:flex;align-items:center;gap:9px} .sel-opt::before{content:"";width:14px;height:14px;flex:none;color:var(--act);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center} .sel-opt:hover{background:var(--hover);color:var(--text)} .sel-opt.on{color:var(--text);font-weight:600} .sel-opt.on::before{content:"✓"} .sel-menu::-webkit-scrollbar{width:6px} .sel-menu::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px} .sel-search{position:sticky;top:-5px;background:var(--panel);padding:2px 0 6px;margin:0 0 4px;z-index:1} .sel-search input{width:100%;border:1px solid var(--line);background:var(--field);border-radius:var(--r-xs);padding:8px 11px;font-family:var(--sans);font-size:13px;color:var(--text);outline:none} .sel-search input:focus{border-color:var(--act)} .sel-noopt{padding:12px;text-align:center;font-size:12.5px;color:var(--text-3);display:none} .btn:focus-visible,.nav:focus-visible,.iconbtn:focus-visible,.tab:focus-visible,.inp:focus-visible,.share input:focus-visible,.modal .mh .x:focus-visible{outline:2px solid var(--act);outline-offset:2px} /* тосты и подтверждение — единый компонент */ .toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none} .toast{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line-2);border-radius:999px;box-shadow:var(--shadow-pop);padding:10px 18px;font-size:13px;font-weight:500;color:var(--text);animation:toastIn .22s cubic-bezier(.2,.7,.3,1);pointer-events:auto} .toast>.t-msg{font-size:13px;font-weight:500;color:var(--text)} .toast .ti{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none} .toast .ti svg{width:11px;height:11px;color:var(--act-ink)} .toast.ok .ti{background:var(--ok)} .toast.info .ti{background:var(--act)} .toast.warn .ti{background:var(--warn)} .toast.out{animation:toastOut .2s ease forwards} .toast>.tundo{font-size:12.5px;font-weight:600;color:var(--act);background:none;border:none;padding:2px 6px;margin-left:2px;border-radius:var(--r-xs)} .toast>.tundo:hover{color:var(--act-2);background:var(--hover)} .toast>.tbar{position:absolute;left:0;bottom:0;height:2px;background:var(--act);width:100%;animation:tcount 5s linear forwards} @keyframes tcount{from{width:100%}to{width:0}} @keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}} @keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.97)}} .confirm-bg{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:210;padding:22px} .confirm-bg.on{display:flex;animation:fade .18s ease} .confirm{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);width:100%;max-width:440px;padding:24px} .confirm .ci{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:14px} .confirm .ci svg{width:22px;height:22px} .confirm.danger .ci{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)} .confirm.info .ci{background:var(--act-soft);color:var(--act)} .confirm h4{font-family:var(--disp);font-weight:700;font-size:17px;margin-bottom:7px} .confirm p{font-size:13.5px;color:var(--text-2);line-height:1.55;margin-bottom:20px} .confirm .cf{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap} .notif-pop{position:absolute;top:calc(100% + 10px);right:0;width:340px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-pop);z-index:90;display:none;overflow:hidden} .notif-pop.on{display:block;animation:fade .15s ease} .notif-pop .nh{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:600;font-size:13px;display:flex;justify-content:space-between;align-items:center} .notif-pop .nh button{font-size:12px;color:var(--act);background:none;border:none} .notif-pop .nb{max-height:300px;overflow-y:auto} .notif-pop .ni{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line)} .notif-pop .ni:last-child{border-bottom:none} .notif-pop .ni .d{width:7px;height:7px;border-radius:50%;flex:none;margin-top:5px} .notif-pop .ni b{font-size:13px;font-weight:600;display:block} .notif-pop .ni span{font-size:11.5px;color:var(--text-3);display:block;margin-top:2px} .tbl td{white-space:nowrap} .tbl td.nm,.tbl td .nm{white-space:normal} .seg{display:inline-flex;gap:2px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px} .seg button{font-size:12px;font-weight:600;color:var(--text-2);background:none;border:none;padding:7px 13px;border-radius:var(--r-xs);transition:background .14s,color .14s} .seg button:not(.on):hover{color:var(--text)} .seg button.on{background:var(--panel);color:var(--text);box-shadow:var(--shadow-xs)} /* ── состав казны: полоса-разбивка ── */ .tre-card{padding:16px 18px 20px} .tre-card>.sect-h{margin:0 0 14px} .tre-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--panel-2)} .tre-bar>span{display:block;min-width:4px;transition:filter .15s} .tre-bar>span+span{box-shadow:-2px 0 0 var(--panel)} .tre-bar>span:hover{filter:brightness(1.25)} .tre-c1{background:color-mix(in srgb,var(--text) 74%,transparent)} .tre-c2{background:color-mix(in srgb,var(--text) 50%,transparent)} .tre-c3{background:color-mix(in srgb,var(--text) 30%,transparent)} .tre-c4{background:color-mix(in srgb,var(--text) 16%,transparent)} .tre-lead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 26px;flex-wrap:wrap;margin-bottom:15px} .tre-lead>.tre-free{min-width:0} .tre-free>.tre-fk{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--micro)} .tre-free>.tre-fv{font-family:var(--mono);font-weight:600;font-size:30px;line-height:1.1;margin-top:7px;letter-spacing:-.01em} .tre-free>.tre-fv .u{font-size:13px;color:var(--text-3);font-weight:500;margin-left:6px} .tre-lead>.tre-fs{font-size:12px;color:var(--text-2);line-height:1.55;flex:1;min-width:220px;max-width:360px} .tre-leg{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-top:5px} .tre-leg>.tre-li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)} .tre-leg>.tre-li:nth-last-child(-n+2){border-bottom:none} .tre-li>i{width:10px;height:10px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px var(--line-2)} .tre-li>.tre-nm{font-size:12.5px;color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tre-li>.tre-vl{margin-left:auto;font-family:var(--mono);font-weight:600;font-size:13px;color:var(--text);white-space:nowrap} .tre-li>.tre-pc{font-family:var(--mono);font-size:11px;color:var(--text-3);width:40px;text-align:right} /* ── дневной лимит полосой ── */ .lim-box{border:1px solid var(--line);border-radius:var(--r-md);background:var(--sunk);padding:12px 14px;display:flex;flex-direction:column;gap:9px} .lim-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text-2)} .lim-hd>b{font-family:var(--mono);font-weight:600;color:var(--text);white-space:nowrap} .lim-track{display:flex;height:12px;border-radius:999px;background:var(--panel-2);overflow:hidden} .lim-track>span{display:block;flex:none} .lim-used{background:color-mix(in srgb,var(--text) 45%,transparent)} .lim-pend{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--text) 34%,transparent) 0 3px,transparent 3px 7px)} .lim-note{font-size:11.5px;color:var(--text-3);line-height:1.5} .lim-note.warnful{color:var(--warn)} /* ── заявки мерчантов ── */ .mdocs{display:flex;flex-wrap:wrap;gap:7px} .mdoc{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2);border:1px solid var(--line);background:var(--sunk);border-radius:999px;padding:4px 11px} .mdoc>svg{width:12px;height:12px;color:var(--text-3);flex:none} /* ── спор: сопоставление сторон ── */ .sp-cmp{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} .sp-hd,.sp-rw{display:grid;grid-template-columns:70px 1fr 1fr} .sp-hd{background:var(--panel-2);border-bottom:1px solid var(--line)} .sp-hd>span{padding:9px 12px;font-size:11.5px;font-weight:600;color:var(--text-2);min-width:0} .sp-hd>span+span{border-left:1px solid var(--line)} .sp-rw+.sp-rw{border-top:1px solid var(--line)} .sp-rw>.sp-k{padding:10px 12px;font-size:10.5px;color:var(--text-3);align-self:center} .sp-rw>.sp-v{padding:10px 12px;font-size:12.5px;color:var(--text);border-left:1px solid var(--line);min-width:0;overflow-wrap:anywhere} .sp-rw>.sp-v.mono{font-weight:600} .sp-rw.diff{background:color-mix(in srgb,var(--warn) 10%,transparent)} .sp-rw.diff>.sp-k{color:var(--warn);font-weight:600} .sp-hint{font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:7px} .sp-hint>i{width:11px;height:11px;border-radius:3px;background:color-mix(in srgb,var(--warn) 32%,transparent);flex:none} .sp-rep{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:12px;color:var(--text-3);border-top:1px solid var(--line);padding-top:12px} .sp-rep>b{font-size:12.5px;font-weight:600;color:var(--text-2)} /* ── массовый выбор ── */ .ckcell{width:36px;padding-right:0!important} .rowck{width:15px;height:15px;accent-color:var(--act);cursor:pointer;vertical-align:middle;margin:0} .tbl tbody tr.picked td,.tbl tbody tr.picked:hover td{background:var(--act-soft)} .bulkbar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);z-index:150;display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line-2);border-radius:999px;box-shadow:var(--shadow-pop);padding:9px 10px 9px 20px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s} .bulkbar.on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)} .bulkbar>.bk-n{font-size:13px;font-weight:600;white-space:nowrap} .bulkbar>.bk-sep{width:1px;height:18px;background:var(--line);margin:0 3px;flex:none} .bulkbar .btn{border-radius:999px} .bulkbar>.bk-x{width:30px;height:30px;border-radius:50%;border:none;background:none;color:var(--text-3);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;flex:none} .bulkbar>.bk-x:hover{background:var(--hover);color:var(--text)} body.bulk-open .page{padding-bottom:118px} body.bulk-open .toast-wrap{bottom:88px} /* ── аварийная остановка ── */ .stop-card{padding:18px 20px;display:flex;flex-direction:column;gap:12px} .stop-card>.sect-h{margin:0} .stop-card>.stop-tx{font-size:12.5px;color:var(--text-2);line-height:1.6;max-width:74ch} .stop-card>.stop-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .stop-card.off{border-color:color-mix(in srgb,var(--bad) 34%,var(--line));box-shadow:inset 0 1px 0 var(--hi),var(--shadow-card),0 0 0 1px color-mix(in srgb,var(--bad) 14%,transparent)} .stop-warn{font-size:12.5px;color:var(--bad)} .status-chip.off{border-color:color-mix(in srgb,var(--bad) 32%,transparent);background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)} .status-chip.off i{animation:none} /* ── кликабельные строки журнала ── */ .list .li[data-modal]{cursor:pointer;transition:background .12s} .list .li[data-modal]:hover{background:var(--hover)} /* ── фильтры сделок ── */ .hint{font-size:11.5px;color:var(--text-3);line-height:1.5;padding:0 4px} .mnote{font-size:12.5px;color:var(--text-2);line-height:1.55} .dash{font-size:12px;color:var(--text-3)} .drow .v.soft{font-size:13px;font-weight:400;color:var(--text-2);line-height:1.55} .drow .v.txt{font-size:13px} .verify-inp{width:126px;margin-top:6px;font-family:var(--mono)} .verify-st{margin-left:auto;font-size:12px;color:var(--text-3);white-space:nowrap} .pcard{padding:20px 22px} .pcard>.eyebrow{display:block;margin-bottom:14px} .pcard>.drow{padding:11px 0} .pcard>.drow>.pill,.pcard>.drow>.btn{margin-left:auto} .dl-sum{font-size:12.5px;color:var(--text-3);padding:0 4px} .dl-sum b{color:var(--text-2);font-family:var(--mono);font-weight:600} .amt-range{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-3)} .amt-range>.inp{min-width:0;width:98px;font-family:var(--mono)} /* ── панели вкладок ── */ .pane{display:none} .pane.on{display:flex;flex-direction:column;gap:18px} @media (max-width:1040px){ .tiles.c6{grid-template-columns:repeat(3,minmax(0,1fr))} .tiles.c4{grid-template-columns:repeat(2,minmax(0,1fr))} .tiles.c2{grid-template-columns:minmax(0,1fr)} .wallets{grid-template-columns:1fr} .top .rate{display:none} .tre-leg{grid-template-columns:1fr} .tre-leg>.tre-li:nth-last-child(-n+2){border-bottom:1px solid var(--line)} .tre-leg>.tre-li:last-child{border-bottom:none} } @media (max-width:880px){ .top>.seg{display:none} } @media (max-width:580px){ .app{grid-template-columns:64px 1fr} .nav{width:56px} .nav .lb{font-size:8.5px} .tiles.c6,.tiles.c3{grid-template-columns:repeat(2,minmax(0,1fr))} .tiles.c4,.tiles.c2{grid-template-columns:minmax(0,1fr)} .page{padding:18px 14px 56px} .top{padding:13px 14px;gap:10px} .top>div:first-child{min-width:0} .top .tt{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .top .ts{display:none} .top .status-chip{padding:7px;gap:0} .top .status-chip>span{display:none} .tile>.k{white-space:normal;overflow:visible;text-overflow:clip} .tile>.v{font-size:18px} .card:not(.chartcard)>.section-t{padding:14px 14px 0} .tbl th{padding:11px 14px} .tbl td{padding:12px 14px} .wallet{padding:17px 16px} .tre-card{padding:15px 14px 17px} .pcard{padding:17px 16px} .stop-card{padding:16px 14px} .lim-hd{flex-direction:column;align-items:flex-start;gap:3px} .tabs{flex-wrap:wrap} .tab{padding:7px 10px;font-size:12px} .sp-hd,.sp-rw{grid-template-columns:1fr 1fr} .sp-hd>span:first-child{display:none} .sp-hd>span+span{border-left:none} .sp-hd>span:last-child{border-left:1px solid var(--line)} .sp-rw>.sp-k{grid-column:1 / -1;padding:9px 12px 0} .sp-rw>.sp-v{border-left:none} .sp-rw>.sp-v+.sp-v{border-left:1px solid var(--line)} .act-card>.ac-hd{flex-wrap:wrap;gap:8px} .act-card>.ac-hd>.sum{font-size:19px} .act-card>.acts>.btn{flex:1 1 auto;min-width:0} .act-card>.acts>.btn.danger{margin-left:0} .bulkbar{left:14px;right:14px;bottom:14px;transform:translateY(16px);border-radius:var(--r-lg);flex-wrap:wrap;justify-content:center;gap:8px;padding:11px 12px} .bulkbar.on{transform:translateY(0)} body.bulk-open .page{padding-bottom:150px} body.bulk-open .toast-wrap{bottom:120px} .bulkbar>.bk-n{font-size:12px} } /* ───────────────────────────────────────────────────────────────── ПРАВКИ ДЛЯ ПРОДА. Всё выше — макет байт-в-байт. Здесь только то, без чего одностраничный макет не работает как настоящий многостраничный кабинет. Ни один размер/цвет не тронут. ───────────────────────────────────────────────────────────────── */ /* Сервер отдаёт один экран на страницу — он всегда видимый. */ .page > .screen{display:block} /* Знак платформы GGWPAY вместо буквы «A» на плитке макета — картинкой, без плитки (логотип владельца 2026-09-22, static/img/ggwpay-mark.png). */ .side .logo{background:url(/static/img/ggwpay-mark.png) center/contain no-repeat;box-shadow:none;color:transparent;font-size:0} /* Ссылки, которые выглядят как кнопки макета. */ a{color:inherit} a.nav,a.btn,a.lnk,a.tab,a.iconbtn,a.mini-btn{text-decoration:none} /* Формы внутри карточек не должны ломать сетку макета. */ form.contents{display:contents} /* Нижний отступ страницы. В макете он 72px — под плавающую панель массового выбора, которая всплывает над содержимым. Но панель поднимает отступ сама (`body.bulk-open .page`), а эти 72px пустоты добавлялись к КАЖДОЙ странице и мешали ей поместиться в экран. Оставляем дыхание, но не полтора сантиметра пустоты. */ .page{padding-bottom:24px} /* Расстояние между блоками страницы. В макете 18px — он рисовался под бесконечную страницу с прокруткой. На странице, которая обязана поместиться в экран, каждый лишний зазор отнимает строку данных. 14px дышит так же, но экономит около 30px на странице из шести блоков. */ .row-gap{gap:14px} .page{padding-top:22px} /* ─── ВНУТРЕННЕГО СКРОЛЛА НЕТ ──────────────────────────────────────── В макете у таблиц стоит `.tbl-wrap{overflow:auto;max-height:520px}`: длинная таблица крутится внутри своей карточки. На живых данных это выглядело так: «Прошлые выплаты» показывали две с половиной строки и полосу прокрутки внутри полосы прокрутки. Владелец отверг: «скролл внутри неудобно — пусть страница уезжает вниз». Поэтому потолок снят: список растёт, страница растёт вместе с ним, крутится только окно. Инлайновых `style="max-height:…"` на списках в страницах тоже нет — за этим следит TestNoInnerScroll. */ .tbl-wrap{max-height:none} /* Тумблер (`label.switch` / `label.sw`) в макете всегда лежит прямо во flex-контейнере и потому получает свои width/height. На проде тумблер обёрнут в
(иначе он не может ничего отправить), а внутри блочной формы