/* ═══════════════════════════════════════════════════════════════
   ИИ-КОМПАНИЯ · оформление

   С этим инструментом работают часами, поэтому основа светлая: на
   длинных списках цифр тёмный фон утомляет быстрее. Но плоским он быть
   не должен — глубина берётся не тенями вокруг всего подряд, а слоями:
   бумага снизу, карточки над ней, всплывающее ещё выше.

   Движение только там, где что-то меняется: числа набегают, полосы
   вырастают, карточки поднимаются под курсором. Ничего не мигает само
   по себе — это рабочий стол, а не витрина.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --бумага:#F4F3F0;
  --бумага-низ:#EBE9E4;
  --карточка:#FFFFFF;
  --линия:#E4E1DB;
  --линия-мягкая:#EFEDE8;

  --текст:#15181D;
  --тихий:#5C6875;
  --слабый:#939CA8;

  --акцент:#0E6B57;
  --акцент-ярче:#129074;
  --акцент-фон:#E6F2EE;
  --акцент-кант:#BFE0D6;

  --тревога:#A32B18;
  --тревога-фон:#FCEDE9;
  --внимание:#8A6412;
  --внимание-фон:#FCF3DF;
  --холод:#2E5F86;
  --холод-фон:#E9F1F8;

  --тень-1:0 1px 2px rgba(20,26,35,.05);
  --тень-2:0 2px 4px rgba(20,26,35,.05),0 8px 20px -8px rgba(20,26,35,.14);
  --тень-3:0 14px 44px -16px rgba(20,26,35,.3);

  --ход:.22s cubic-bezier(.2,.8,.2,1);
  --радиус:14px;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 520px at 78% -8%,rgba(18,144,116,.07),transparent 62%),
    radial-gradient(900px 460px at 6% 4%,rgba(46,95,134,.06),transparent 60%),
    linear-gradient(180deg,var(--бумага),var(--бумага-низ));
  background-attachment:fixed;
  color:var(--текст);
  font:15px/1.55 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--акцент);text-decoration:none}
a:hover{color:var(--акцент-ярче)}
::selection{background:var(--акцент-фон);color:var(--акцент)}

/* ── шапка ─────────────────────────────────────────────────── */
header.top{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--линия);
  padding:0 26px;display:flex;align-items:center;gap:28px;height:58px;
  position:sticky;top:0;z-index:20;
}
.brand{font-weight:700;letter-spacing:-.02em;font-size:16px;white-space:nowrap}
.brand span{color:var(--акцент);display:inline-block;animation:pulseDot 3.4s ease-in-out infinite}
@keyframes pulseDot{50%{opacity:.4}}
nav{display:flex;gap:3px;flex:1}
nav a{
  color:var(--тихий);font-size:14px;padding:7px 12px;border-radius:9px;
  position:relative;transition:color var(--ход),background-color var(--ход);
}
nav a:hover{background:rgba(20,26,35,.045);color:var(--текст)}
nav a.on{color:var(--текст);font-weight:500}
nav a.on::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--акцент);border-radius:2px;animation:tabIn .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes tabIn{from{transform:scaleX(0)}}
.me{font-size:13px;color:var(--тихий);display:flex;align-items:center;gap:12px}

main{
  max-width:1220px;margin:0 auto;padding:28px 26px 72px;
  animation:pageIn .42s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}}

h1{font-size:26px;letter-spacing:-.02em;line-height:1.2}
h2{font-size:19px;letter-spacing:-.012em}
h3{font-size:13.5px}

/* ── карточки ──────────────────────────────────────────────── */
.card{
  background:var(--карточка);border:1px solid var(--линия);
  border-radius:var(--радиус);padding:18px 20px;box-shadow:var(--тень-1);
  transition:box-shadow var(--ход),transform var(--ход),border-color var(--ход);
}
.card.hover:hover{transform:translateY(-2px);box-shadow:var(--тень-2)}

.big-num{
  font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:-.035em;
  line-height:1.1;font-weight:600;
}
.num{font-variant-numeric:tabular-nums}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;padding:3px 10px;border-radius:20px;
  background:var(--акцент-фон);color:var(--акцент);
  border:1px solid var(--акцент-кант);white-space:nowrap;
}
.chip.warn{background:var(--внимание-фон);color:var(--внимание);border-color:#EADFBE}
.chip.bad{background:var(--тревога-фон);color:var(--тревога);border-color:#F0CFC7}
.chip.cool{background:var(--холод-фон);color:var(--холод);border-color:#CFE0EE}

/* ── управление ────────────────────────────────────────────── */
button,.btn{
  font:inherit;font-size:14px;cursor:pointer;border-radius:10px;
  border:1px solid var(--линия);background:var(--карточка);color:var(--текст);
  padding:9px 16px;transition:all var(--ход);display:inline-block;
}
button:hover,.btn:hover{border-color:var(--акцент);color:var(--акцент)}
button:active,.btn:active{transform:scale(.985)}
.btn-main{
  background:linear-gradient(180deg,var(--акцент-ярче),var(--акцент));
  color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(14,107,87,.3);
}
.btn-main:hover{color:#fff;filter:brightness(1.07);box-shadow:0 5px 16px -5px rgba(14,107,87,.55)}

input[type=text],input[type=password],input[type=file],textarea,select{
  font:inherit;font-size:14px;padding:10px 13px;border-radius:10px;
  border:1px solid var(--линия);background:var(--карточка);color:var(--текст);
  transition:border-color var(--ход),box-shadow var(--ход);width:100%;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--акцент);box-shadow:0 0 0 3px var(--акцент-фон);
}

/* ── таблицы ───────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;font-weight:500;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--слабый);
  padding:0 12px 10px;border-bottom:1px solid var(--линия);
}
td{padding:11px 12px;border-bottom:1px solid var(--линия-мягкая)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background-color var(--ход)}
tbody tr:hover{background:rgba(20,26,35,.022)}
td.r,th.r{text-align:right}

/* Доля закрашивает саму ячейку, а не лежит поверх неё: подложка
   отдельным слоем перекрывала текст названия. */
.rank{
  background-image:linear-gradient(90deg,var(--акцент-фон) 0 var(--w,0%),transparent var(--w,0%));
  background-repeat:no-repeat;
  border-radius:5px;
  animation:growW .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes growW{from{background-size:0 100%}to{background-size:100% 100%}}

/* ── появление по очереди ─────────────────────────────────── */
.rise{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.rise:nth-child(2){animation-delay:.05s}
.rise:nth-child(3){animation-delay:.1s}
.rise:nth-child(4){animation-delay:.15s}
.rise:nth-child(5){animation-delay:.2s}
.rise:nth-child(6){animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}

.grid{display:grid;gap:14px}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.grid.g2{grid-template-columns:1.55fr 1fr}
@media(max-width:900px){.grid.g2{grid-template-columns:1fr}}

.head-row{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.head-row .muted{max-width:600px}
.head-row .right{margin-left:auto}

.label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--слабый)}
.muted{color:var(--тихий);font-size:13px;line-height:1.6}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.tiny{font-size:12px;color:var(--слабый)}

.empty-note{text-align:center;color:var(--тихий);font-size:13.5px;padding:44px 24px;line-height:1.6}
.empty-note b{display:block;font-size:15px;color:var(--текст);margin-bottom:8px}

/* ── формы входа ───────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-box{width:100%;max-width:380px;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.login-box h1{font-size:22px;margin-bottom:6px}
.login-box .muted{margin-bottom:22px}
.login-box label{display:block;margin-bottom:14px}
.login-box .label{display:block;margin-bottom:6px}
.login-box button{width:100%;margin-top:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ── график выручки ────────────────────────────────────────── */
.chart{position:relative;height:220px;margin-top:6px}
.chart .bars{
  display:flex;align-items:flex-end;gap:6px;height:186px;position:relative;z-index:1;
}
.chart .col{
  flex:1;height:100%;background:none;border:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
  border-radius:8px 8px 0 0;transition:opacity var(--ход);
}
.chart .col i{
  display:block;height:var(--h);border-radius:7px 7px 2px 2px;
  background:linear-gradient(180deg,var(--акцент-ярче),#7FBFAC);
  transform-origin:bottom;
  animation:colGrow .75s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--i) * 45ms);
  transition:filter var(--ход),box-shadow var(--ход);
}
@keyframes colGrow{from{transform:scaleY(0)}}
.chart.instant .col i{animation:none}
.chart .col em{
  font-style:normal;font-size:10.5px;color:var(--слабый);
  margin-top:8px;font-variant-numeric:tabular-nums;
}
.chart .col.best i{background:linear-gradient(180deg,#0E6B57,#159C7C)}
.chart .col.worst i{background:linear-gradient(180deg,#C9A24B,#E0C489)}
.chart.focused .col{opacity:.42}
.chart.focused .col.on{opacity:1}
.chart .col.on i{filter:brightness(1.08);box-shadow:0 6px 20px -6px rgba(14,107,87,.6)}
.chart .col.on em{color:var(--текст);font-weight:600}

.chart-rule{
  position:absolute;left:0;right:0;top:var(--p);height:1px;
  border-top:1px dashed var(--линия);z-index:0;
}
.chart-rule span{
  position:absolute;right:0;top:-9px;font-size:10.5px;color:var(--слабый);
  background:var(--карточка);padding:2px 7px;border-radius:12px;
  border:1px solid var(--линия-мягкая);line-height:1.3;
}
.chart-tip{
  position:absolute;top:-6px;transform:translate(-50%,-100%) scale(.96);
  background:var(--текст);color:#fff;border-radius:9px;padding:8px 12px;
  font-size:12.5px;white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity var(--ход),transform var(--ход);z-index:3;
  box-shadow:var(--тень-3);
}
.chart-tip.show{opacity:1;transform:translate(-50%,-100%) scale(1)}
.chart-tip b{display:block;font-size:11px;opacity:.7;font-weight:400;margin-bottom:2px}
.chart-tip span{font-variant-numeric:tabular-nums;font-weight:600}
.chart-tip em{font-style:normal;margin-left:8px;font-size:11.5px}
.chart-tip em.up{color:#7EE0BF}
.chart-tip em.down{color:#F2B8A8}