/* DSPX Panel UI — стиль из макета DSPRX (dark glass + aurora) */

:root{
  --bg0:#0b0f14;
  --ink:#e6f1ff;
  --muted:#9aa4b2;
  --panel-border: rgba(255,255,255,.08);
  --accent:#67e8f9;
  --ring: rgba(103,232,249,.45);
  --gap:16px;
  --radius:18px;
  --shadow: 0 20px 60px rgba(2,8,23,.55), 0 2px 10px rgba(2,8,23,.35);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, "Noto Sans", sans-serif;
}

*{box-sizing:border-box}
html{scrollbar-gutter:stable both-edges}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg0);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
hr{border:0; height:1px; background: rgba(255,255,255,.08); margin:16px 0}

/* фон */
.bg{ position: fixed; inset:-25vh -25vw; z-index:-1; pointer-events:none; overflow:hidden; }
.bg::before, .bg::after{ content:""; position:absolute; inset:-30% -30%; filter: blur(28px); mix-blend-mode: screen; }
.bg::before{ background:
  radial-gradient(700px 420px at 14% 20%, rgba(56,189,248,.28), transparent 60%),
  radial-gradient(820px 520px at 86% 10%, rgba(99,102,241,.22), transparent 60%),
  radial-gradient(900px 520px at 30% 100%, rgba(34,211,238,.24), transparent 60%);
  animation: auroraA 30s ease-in-out infinite alternate; }
.bg::after{ background:
  radial-gradient(740px 460px at 8% 88%, rgba(59,130,246,.20), transparent 60%),
  radial-gradient(620px 380px at 94% 74%, rgba(34,211,238,.20), transparent 60%);
  animation: auroraB 36s ease-in-out infinite alternate-reverse; }
@keyframes auroraA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2vw,-1vh,0) scale(1.06) rotate(2deg)}}
@keyframes auroraB{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-2vw,1vh,0) scale(1.05) rotate(-2deg)}}

#dsp-snow{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; opacity:.65 }

.wrap{max-width:1120px; margin:0 auto; padding:28px 18px 60px}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:46px;height:46px;border-radius:14px;
  position:relative;
  display:grid; place-items:center;
  font-weight:900;
  font-size:18px;
  color: rgba(255,255,255,.96);
  line-height: 1;
}
.logo::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: conic-gradient(from 210deg at 50% 50%, #22d3ee, #60a5fa, #22d3ee);
  box-shadow: 0 8px 24px rgba(56,189,248,.25);
  z-index: 0;
}
.logo__text{position:relative; z-index:1; text-shadow: 0 2px 10px rgba(2,8,23,.35)}
/* форсируем видимость буквы в разных браузерах/рендерерах */
.logo__text{color: rgba(255,255,255,.98); mix-blend-mode: normal;}

.brand h1{margin:0; font-size:20px; letter-spacing:.6px}
.brand small{display:block; margin-top:2px; color: rgba(230,241,255,.72); letter-spacing:.08em; text-transform:uppercase}

.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.userpill{
  display:inline-flex; align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(22,28,36,.55), rgba(16,21,28,.42));
  border:1px solid var(--panel-border);
  box-shadow: var(--shadow);
  color: rgba(230,241,255,.86);
  font-size:12px;
}

/* общие панели */
.frame, .card, .pill, .btn, .input, textarea, .flash{
  background: linear-gradient(180deg, rgba(22,28,36,.55), rgba(16,21,28,.42));
  border:1px solid var(--panel-border);
  box-shadow: var(--shadow);
}
@supports (backdrop-filter: blur(4px)){
  .frame, .card, .pill, .btn, .input, textarea, .flash{backdrop-filter: blur(14px) saturate(120%)}
}

.frame{border-radius:22px; overflow:hidden}
.frame__inner{padding:18px}

/* вкладки */
.navtabs{display:flex; gap:10px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.10)}

/* прямоугольные кнопки-вкладки */
.tab{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px;
  border-radius:14px; /* прямоугольник со скруглением как у панелей */
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: rgba(230,241,255,.72);
  font-size:13px;
  transition:.15s border-color,.15s transform,.15s box-shadow;
}
.tab:hover{border-color: rgba(103,232,249,.35); box-shadow:0 6px 16px rgba(56,189,248,.18); transform:translateY(-1px)}
.tab.active{color: var(--ink); border-color: rgba(103,232,249,.45); box-shadow: 0 0 0 6px rgba(56,189,248,.08)}

.grid{display:grid; gap:var(--gap)}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:1fr 1fr 1fr}
@media (max-width:900px){.grid.two,.grid.three{grid-template-columns:1fr}}

.card{border-radius:var(--radius); overflow:hidden}
.card__header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.08)}
.card__header h3{margin:0; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color: rgba(230,241,255,.88)}
.card__body{padding:14px 16px 16px}

.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(103,232,249,.28);
  background: rgba(103,232,249,.10);
  color: rgba(230,241,255,.86);
}
.badge.good{border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.10); color: rgba(34,197,94,.95)}
.badge.warn{border-color: rgba(234,179,8,.30); background: rgba(234,179,8,.10); color: rgba(234,179,8,.95)}
.badge.bad{border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.10); color: rgba(239,68,68,.95)}

.kpi{display:flex; flex-direction:column; justify-content:space-between; gap:4px; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.16)}
.kpi .label{font-size:12px; color: rgba(230,241,255,.55)}
.kpi .value{font-size:20px; font-weight:900}
.kpi .sub{font-size:12px; color: rgba(230,241,255,.72)}

.pill{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:8px 12px; font-size:12px; color: var(--ink)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  transition:.2s transform,.2s box-shadow,.2s border-color;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(56,189,248,.35), rgba(56,189,248,.18));
  border-color: rgba(103,232,249,.50);
}
.btn:hover{transform:translateY(-1px); border-color:rgba(103,232,249,.65); box-shadow:0 16px 40px rgba(56,189,248,.25)}
.btn.ghost{background: rgba(0,0,0,.14); border-color: rgba(255,255,255,.12); color: rgba(230,241,255,.76)}
.btn.danger{background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.35)}

/* компактная иконка-кнопка (шестерёнка и т.п.) */
.btn.icon{padding:10px 10px; width:40px; min-width:40px; justify-content:center; font-size:16px; line-height:1}

/* статусы на вкладке "Вайтлист" — как кнопки, но не кликабельные */
.tagbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(230,241,255,.76);
  font-size:13px;
  font-weight:800;
  pointer-events:none;
  user-select:none;
}

.input, textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  color: var(--ink);
  font:inherit;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  transition: box-shadow .2s, border-color .2s;
}
.input:focus-visible, textarea:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-color:rgba(103,232,249,.45); box-shadow:0 0 0 6px rgba(56,189,248,.12)}
::placeholder{color:rgba(230,241,255,.55)}

.form{display:grid; gap:10px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.split{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width: 720px){ .split{grid-template-columns:1fr} }
.label{display:block; margin:0 0 6px; font-size:12px; letter-spacing:.10em; text-transform:uppercase; color: rgba(230,241,255,.55)}

.table{width:100%; border-collapse:collapse; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.10)}
.table th{font-size:12px; letter-spacing:.10em; text-transform:uppercase; color: rgba(230,241,255,.55); padding:12px 12px; background: rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.08); text-align:left}
.table td{padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.06); color: rgba(230,241,255,.86)}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background: rgba(103,232,249,.06)}

.flash{padding:12px 14px; border-radius:16px; margin:0 0 14px}
.flash.info{border-color: rgba(103,232,249,.30); background: rgba(103,232,249,.10)}
.flash.warn{border-color: rgba(234,179,8,.30); background: rgba(234,179,8,.10)}
.flash.danger{border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.10)}

.code{font-family:var(--mono); font-size:12px}

@media (prefers-reduced-motion: reduce){
  .bg::before, .bg::after{animation:none}
  #dsp-snow{display:none}
}


/* --- UX patches (v21 improved-2) --- */
.btn.sm{padding:8px 10px; font-size:12px; border-radius:12px}
.actions{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap}
.actions form{margin:0}
@media (max-width: 980px){
  .actions{justify-content:flex-start}
}
.table td{vertical-align:top}
.link-pill{
  display:inline-block;
  max-width:420px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}
.link-pill.expanded{
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  max-width:none;
  word-break:break-all;
}
.row.nowrap{flex-wrap:nowrap}


/* фиксированный размер графика (финансы) */
.chartbox{
  max-width: 820px;
  height: 340px;
  margin: 0 auto;
}
.chartbox canvas{
  width: 100% !important;
  height: 100% !important;
  display:block;
}

/* кнопка фиксированной высоты как иконка */
.btn.h40{height:40px; padding:0 12px}