/* Кабинет партнёров TikTok и панель модераторов. Токены и шрифт лежат в tokens.css,
   компоненты взяты из creators.counterflame.com: кабинет (styles.css) и панель (admin.css). */

.sprite{position:absolute;overflow:hidden}
.ns{padding:var(--s-5);color:#fff}
.nw{white-space:nowrap}
.sub,.mute{color:var(--t3)}
.warn{color:var(--bad)}
.gap-s{margin-top:var(--s-3)}

/* Шапка */
.ch{border-bottom:1px solid var(--line)}
.ch-in{display:flex;align-items:center;gap:var(--s-5);min-height:var(--bar)}
.logo{display:block;flex:none;color:#fff}
.logo svg{width:92px;height:36px}
.tabs{display:flex;gap:var(--s-5);align-self:stretch;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:flex;align-items:center;flex:none;font-size:var(--fs-2);color:var(--t2);white-space:nowrap;box-shadow:inset 0 -2px 0 transparent}
.tabs a:hover{color:#fff}
.tabs a[aria-current]{color:#fff;font-weight:700;box-shadow:inset 0 -2px 0 #fff}
.hd-r{display:flex;align-items:center;gap:var(--s-5);margin-left:auto;flex:none}
.hd-n{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-2);color:var(--t2)}
.hd-l{min-height:44px;font-size:var(--fs-2);font-weight:700;color:var(--t1)}
.hd-l:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.mode{display:flex;gap:var(--s-3)}
.mode a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-1);font-size:var(--fs-2);color:var(--t3)}
.mode a:hover{color:var(--t1)}
.mode a[aria-current]{color:#fff;font-weight:700}

/* Кнопки и ссылки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:56px;padding:0 var(--s-6);background:var(--accent);color:var(--ink);font-size:var(--fs-3);font-weight:700;transition:background-color .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn:hover{background:var(--accent-2)}
.btn.sm{min-height:44px;padding:0 var(--s-5);font-size:var(--fs-2)}
.btn.line{background:none;color:var(--t1);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.line:hover{box-shadow:inset 0 0 0 1px #fff;color:#fff}
.btn.bad-b{color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
.btn.bad-b:hover{color:#fff;background:var(--bad);box-shadow:none}
.btn svg{width:18px;height:18px;flex:none}
.btn[disabled]{opacity:.5;pointer-events:none}
.lnk{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ctl)}
.lnk:hover{text-decoration-color:#fff}
.lk{color:var(--t2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ctl)}
.lk:hover{color:#fff}
button.lk{display:inline-flex;align-items:center;min-height:44px}
button.lk[disabled]{opacity:.5;pointer-events:none}
.nm{font-weight:700;color:var(--t1)}
.nm:hover{text-decoration:underline;text-underline-offset:3px}
.acts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5);margin-top:var(--s-4)}

/* Заголовки и текст */
h1{font:800 var(--fs-5)/1.1 var(--f);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
h2{font:800 var(--fs-4)/1.2 var(--f);text-transform:uppercase;letter-spacing:.01em}
.lead{color:var(--t2)}
.hint{margin-top:var(--s-2);font-size:var(--fs-2);color:var(--t3)}
.err{margin-top:var(--s-2);font-size:var(--fs-2);color:var(--bad)}
.empty{padding:var(--s-5) 0;color:var(--t3)}
.txt{white-space:pre-line;overflow-wrap:anywhere}
.tag{display:inline-block;padding:0 6px;border:1px solid var(--line-2);color:var(--t2);font-size:11px;font-weight:400;line-height:18px;vertical-align:1px;white-space:nowrap}

/* Кабинет */
.cab{padding-top:var(--s-7);padding-bottom:var(--s-8)}
.cab>*{max-width:880px}
.cab>.ov{max-width:none}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-5)}
.sh{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.sh.gap{margin-top:var(--s-7)}
.lone .lead{margin-top:var(--s-3)}
.ov{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-5) var(--s-8)}
.ov-t{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4)}
.me small{display:block;font-size:var(--fs-1);color:var(--t3)}
.me b{display:block;font-size:var(--fs-4);line-height:1.2}
.sum{font-size:var(--fs-6);font-weight:800;line-height:1}
.sum span{font-size:var(--fs-5)}
.sum + .lead{margin-top:var(--s-3)}
.kv div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--line);color:var(--t2)}
.kv dd{margin:0;font-weight:700;color:var(--t1);text-align:right;overflow-wrap:anywhere}
.kv dd .sub,.kv dd .warn{font-weight:400}
.goal{margin-top:var(--s-7);max-width:420px}
.goal h2{margin-bottom:var(--s-4)}
.gl{margin-top:var(--s-4)}
.gl>div:first-child{display:flex;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-2);font-size:var(--fs-2);color:var(--t2)}
.gl b{color:var(--t1)}
.bar{height:4px;background:var(--bg-3)}
.bar i{display:block;width:0;height:100%;background:#fff}
.out-all{margin-top:var(--s-8)}

/* Панель модераторов */
.pn{font-size:var(--fs-2)}
.pn>*{max-width:none}
.pn h2{font:700 var(--fs-3)/1.3 var(--f);text-transform:none;letter-spacing:.02em}
.pn .kv dd{font-weight:400}
.split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-7);align-items:start}
.adm{display:grid;gap:var(--s-4)}
.row{display:flex;align-items:flex-end;gap:var(--s-3)}
.row .f{flex:1;margin:0}
.row .btn{min-height:52px}
.tls{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s-5);padding:var(--s-5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tl{display:block}
.tl b{display:block;font-size:var(--fs-5);font-weight:700;line-height:1.1}
.tl span{display:block;margin-top:var(--s-1);color:var(--t2)}
a.tl:hover span{color:#fff}
.fbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
#q{width:340px;max-width:100%;height:44px;padding:0 var(--s-3);background:var(--bg-2);border:1px solid transparent;font-size:16px}
#q:focus-visible{outline:0;border-color:#fff}
#q::placeholder{color:var(--t3)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.chips button{min-width:44px;height:44px;padding:0 var(--s-3);color:var(--t2);background:var(--bg-2)}
.chips button:hover{color:#fff}
.chips button[aria-pressed="true"]{background:#fff;color:#000;font-weight:700}
.fbar select{height:44px;padding:0 var(--s-6) 0 var(--s-3)}
.lst{border-top:1px solid var(--line)}
.lst>li{padding:var(--s-3) 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.lst small{display:block;margin-top:var(--s-1);font-size:var(--fs-1);color:var(--t3)}
.itm-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.lst>li>p{margin-top:var(--s-1)}
.vids{display:grid;gap:var(--s-2);margin-top:var(--s-2)}
.vids li{overflow-wrap:anywhere}
.vids small{display:block;font-size:var(--fs-1)}
.notes{display:grid;gap:var(--s-1);margin-top:var(--s-3);color:var(--t2)}
.notes li::before{content:'— ';color:var(--t3)}
.notes.warn,.notes.warn li::before{color:var(--bad)}
.shots{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-3)}
.shot{display:block;width:120px;height:200px;background:var(--bg-2)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot:hover img{opacity:.85}
.blk{margin-top:var(--s-7)}
.blk>h2{margin-bottom:var(--s-3)}
.dec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line)}
.dec .f:last-of-type{margin-bottom:var(--s-4)}

/* Таблицы */
.tw{margin-top:var(--s-3);overflow-x:auto}
.tb th,.tb td{padding:var(--s-3) var(--s-4) var(--s-3) 0;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.tb thead th{font-size:var(--fs-2);color:var(--t3);border-bottom-color:var(--line-2)}
.tb th:last-child,.tb td:last-child{padding-right:0}
.tb .r{text-align:right}
.tb .vt{white-space:normal;min-width:200px;max-width:380px;overflow-wrap:anywhere}
.tb small{display:block;margin-top:2px;font-size:var(--fs-1);color:var(--t3);white-space:normal}
.tb small.warn{color:var(--bad)}
.tb .cc{width:44px;padding-right:var(--s-2)}
.tb .ca .btns{justify-content:flex-end;flex-wrap:nowrap}
tr[data-go]{cursor:pointer}
tr[data-go]:hover td{background:rgba(255,255,255,.03)}
.pf{display:inline-flex;align-items:center;gap:var(--s-2);max-width:100%;vertical-align:middle}
.plat{display:inline-flex;flex:none}
.plat svg{width:18px;height:18px}
.cb{display:inline-grid;place-items:center;width:44px;height:44px;cursor:pointer}
.cb input{-webkit-appearance:none;appearance:none;display:grid;place-content:center;width:20px;height:20px;margin:0;background:none;border:1px solid var(--ctl);cursor:pointer}
.cb input:checked{background:#fff;border-color:#fff}
.cb input:checked::after{content:'';width:10px;height:5px;border-left:2px solid #000;border-bottom:2px solid #000;transform:translateY(-1px) rotate(-45deg)}
.amt{width:120px;height:44px;padding:0 var(--s-2);background:var(--bg-2);border:1px solid transparent;font-size:16px;font-weight:700;text-align:right}
.amt:focus-visible{outline:0;border-color:#fff}
.amt.bad{border-color:var(--bad)}

/* Формы */
.f{margin-bottom:var(--s-5)}
.f label{display:block;margin-bottom:var(--s-2);font-size:var(--fs-2);line-height:24px;color:var(--t2)}
.f input,.f textarea{width:100%;background:var(--bg-2);border:1px solid transparent;font-size:16px;color:var(--t1);color-scheme:dark}
.f input{height:52px;padding:0 var(--s-4)}
.f textarea{display:block;min-height:96px;padding:var(--s-3) var(--s-4);line-height:1.4;resize:vertical}
.f input:focus-visible,.f textarea:focus-visible,select:focus-visible{outline:0;border-color:#fff}
.f input::placeholder,.f textarea::placeholder{color:var(--t3)}
.f.bad input,.f.bad textarea{border-color:var(--bad)}
.f input[readonly]{color:var(--t3)}
select{height:44px;padding:0 var(--s-6) 0 var(--s-3);background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.6' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E") no-repeat right 12px center/14px;color:var(--t1);border:1px solid transparent;font-size:16px;-webkit-appearance:none;appearance:none;cursor:pointer}
.f select{width:100%;height:52px;padding:0 var(--s-6) 0 var(--s-4)}
.wf{display:flex;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-5)}
.wf .f{flex:1;margin:0;min-width:0}
.wf .btn{margin-top:var(--s-6);height:52px;min-height:52px}

/* Вход */
.lg{display:grid;gap:var(--s-4);max-width:360px;margin:16vh auto 0;padding-bottom:var(--s-8)}
.brand{display:block;color:#fff}
.lg .brand svg{width:112px;height:44px}
.lg h1{margin-bottom:var(--s-2);font:700 var(--fs-4)/1.25 var(--f);text-transform:none;letter-spacing:.02em}
.lg-b{display:grid;gap:var(--s-3)}
.lg .btn{width:100%}
.lg .err{margin:0}

/* Задания */
.tasks{border-top:1px solid var(--line)}
.task{padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
.task-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4)}
.task-h b{font-size:var(--fs-3)}
.task .txt{margin-top:var(--s-2);color:var(--t2)}
.task .btn{margin-top:var(--s-4)}

/* Диалог и уведомления */
dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);padding:var(--s-6);overflow-y:auto;background:var(--bg-2);color:var(--t1);border:0}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h2{margin-bottom:var(--s-4)}
dialog .lead{margin-bottom:var(--s-4);overflow-wrap:anywhere}
dialog .f input,dialog .f textarea{background:var(--bg)}
dialog .acts{margin-top:var(--s-5)}
dialog.pic{width:min(960px,calc(100vw - 32px));padding:var(--s-4)}
dialog.pic img{max-width:100%;max-height:calc(100vh - 140px);max-height:calc(100svh - 140px);margin:0 auto}
.c-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.c-h h2{margin:0}
.x{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--t2)}
.x:hover{color:#fff}
.x svg{width:16px;height:16px}
#toasts{position:fixed;left:50%;bottom:max(var(--s-5),env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;display:grid;gap:var(--s-2);width:max-content;max-width:calc(100vw - 32px)}
#toasts div{padding:var(--s-3) var(--s-5);background:#fff;color:#000;font-size:var(--fs-2);font-weight:700}

@media (max-width:1100px){
  .ov{grid-template-columns:minmax(0,1fr)}
  .goal{max-width:none}
}
@media (max-width:900px){
  .ch-in{flex-wrap:wrap;padding-top:var(--s-2);gap:0 var(--s-4)}
  .tabs{order:3;width:100%;height:44px;margin-top:var(--s-1)}
}
@media (max-width:760px){
  .split,.dec{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .tls{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
  .tl b{font-size:var(--fs-4)}
}
@media (max-width:640px){
  .cab{padding-top:var(--s-5)}
  .tb.cards thead{display:none}
  .tb.cards,.tb.cards tbody{display:block}
  .tb.cards tr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
  .tb.cards tr::after{content:'';order:-1;flex-basis:100%;height:0}
  .tb.cards th,.tb.cards td{padding:0;border:0;white-space:normal;text-align:left}
  .tb.cards .cc{order:-4;flex:none;width:auto}
  .tb.cards .cm{order:-3;flex:1 1 0;min-width:0}
  .tb.cards .ck{order:-2;flex:none;text-align:right}
  .tb.cards .vt{min-width:0;max-width:none}
  .tb.cards .cx{font-size:var(--fs-1);color:var(--t2)}
  .tb.cards .cx[data-l]::before{content:attr(data-l) ' ';color:var(--t3)}
  .tb.cards .ca{flex-basis:100%}
  .tb.cards .ca .btns{justify-content:flex-start;flex-wrap:wrap}
  tr[data-go]:hover td{background:none}
  .wf{flex-direction:column;align-items:stretch}
  .wf .btn{margin-top:0}
  .btn{width:100%}
  .btn.sm{width:auto}
  #q{width:100%}
  .row .btn{width:auto}
}
@media (max-width:480px){
  .hd-n{display:none}
  .hd-r{gap:var(--s-4)}
  .mode a[aria-current]{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}