/* ============================================================
   Visary Cloud design system — юридический конвейер
   Токены сняты с visary.cloud: фон #08091B, фирменный градиент
   бирюза→синий→фиолетовый, градиентная волосяная рамка через
   ::before + mask-composite, Bicubik на H1, Onest на всём остальном.
   ============================================================ */

@font-face{font-family:Onest;src:url("/static/fonts/Onest-Regular.woff") format("woff");
           font-weight:400;font-display:swap}
@font-face{font-family:Onest;src:url("/static/fonts/Onest-Medium.woff") format("woff");
           font-weight:500;font-display:swap}
@font-face{font-family:Onest;src:url("/static/fonts/Onest-Bold.woff") format("woff");
           font-weight:700;font-display:swap}
@font-face{font-family:Onest;src:url("/static/fonts/Onest-ExtraBold.woff") format("woff");
           font-weight:800;font-display:swap}
@font-face{font-family:Onest;src:url("/static/fonts/Onest-Black.woff") format("woff");
           font-weight:900;font-display:swap}
@font-face{font-family:Onest;src:url("/static/fonts/Onest-Light.woff") format("woff");
           font-weight:300;font-display:swap}
@font-face{font-family:Bicubik;
           src:url("/static/fonts/Bicubik.woff2") format("woff2"),
               url("/static/fonts/Bicubik.woff") format("woff");
           font-weight:400;font-display:swap}

:root{
  /* фон и поверхности */
  --bg:#08091B;
  --bg-deep:#121315;
  --indigo:#17154F;
  --surface:rgba(255,255,255,.028);
  --surface-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.05);

  /* текст */
  --ink:#fff;
  --mut:rgba(255,255,255,.62);
  --dim:rgba(255,255,255,.38);

  /* фирменные градиенты */
  --grad-brand:linear-gradient(90deg,#25ABBB,#0D92FF 24.31%,#5D4BF0 52.17%,#9C65FF);
  --grad-cta:linear-gradient(94deg,#006EFF -9.21%,#37D995 121.14%);
  --grad-bg:radial-gradient(270.09% 102.51% at 80.72% 103.76%,
            #121315 0,#17154F 31.66%,#121315 100%);

  /* семантические акценты Visary */
  --a-status:#5D48FF;   /* статус      */
  --a-secure:#1CAC47;   /* безопасность*/
  --a-speed:#F07000;    /* скорость    */
  --a-trust:#D12C8F;    /* доверие     */
  --a-tech:#2B5CFA;     /* технологии  */
  --a-flex:#46DDFF;     /* гибкость    */

  /* оранжевый Claude Code — только логотип Vesta, в остальной палитре не участвует */
  --cc-orange:#D97757;
  --cc-orange-lt:#E9977B;

  --r-card:12px;
  --r-btn:8px;

  /* Курсор: оранжевая стрелка «Скорость» в белой обводке. Белый контур
     обязателен — на фоне #08091B чистый оранжевый теряется. Hotspot 6 4
     совпадает с остриём, иначе клики уезжают. */
  --cur:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'><path d='M5.5 3.2v17.6c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35z' fill='%23F07000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/></svg>") 6 4,auto;
  /* на кликабельном — инверсия: белая заливка, оранжевый контур */
  --cur-act:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'><path d='M5.5 3.2v17.6c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35z' fill='%23fff' stroke='%23F07000' stroke-width='2' stroke-linejoin='round'/></svg>") 6 4,pointer;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  /* 15px/1.45 с лёгким отрицательным трекингом — плотнее и «дороже», чем
     дефолтные 16/1.5: именно разрядка и воздух читаются как Material. */
  font:400 15px/1.45 Onest,Arial,sans-serif;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
  min-height:100vh;
  cursor:var(--cur);
}
/* кликабельное — инверсный курсор */
a,button,.btn,summary,label,[role=button],.drop,.tile,.tile .x{cursor:var(--cur-act)}
/* в полях ввода остаётся системная каретка: свой курсор тут только мешает */
textarea,input,pre,.errcell{cursor:auto}
button:disabled{cursor:var(--cur)}
/* индиго-свечение из нижнего правого угла — фирменная «глубина» */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--grad-bg);opacity:.85;
}

a{color:#8FB6FF;text-decoration:none;transition:color .2s}
a:hover{color:#B79BFF}

/* ---------- градиентная волосяная рамка (ключевой приём) ---------- */
.gborder{position:relative}
.gborder::before{
  content:"";position:absolute;inset:0;padding:2px;pointer-events:none;
  border-radius:inherit;background:var(--grad-brand);
  -webkit-mask:linear-gradient(#fff,#fff) content-box exclude,
               linear-gradient(#fff,#fff);
          mask:linear-gradient(#fff,#fff) content-box exclude,
               linear-gradient(#fff,#fff);
  -webkit-mask-composite:xor;
  opacity:.8;transition:opacity .3s cubic-bezier(.4,0,.2,1);
}
.gborder:hover::before{opacity:1}

/* ---------- шапка ---------- */
.vhead{
  position:sticky;top:0;z-index:40;height:94px;display:flex;align-items:center;
  backdrop-filter:blur(14px);background:rgba(8,9,27,.72);
  border-bottom:1px solid var(--line-soft);
}
.vhead__in{width:100%;max-width:1500px;margin:0 auto;padding:0 24px;
           display:flex;align-items:center;gap:24px;flex-wrap:wrap}
/* Логотип: крупная оранжевая «Vesta» в стиле Claude Code + мелкая чёрная «agent».
   Чёрный на фоне #08091B нечитаем, поэтому «agent» сидит на светлой плашке —
   контраст держится, а сама надпись остаётся именно чёрной. */
.logo{display:flex;align-items:center;gap:11px;color:#fff;
      text-decoration:none;transition:opacity .2s}
a.logo:hover{color:#fff;text-decoration:none;opacity:.85}
.logo__mark{width:34px;height:34px;flex:none;display:grid;place-items:center;
            border-radius:8px;background:linear-gradient(135deg,var(--cc-orange-lt),var(--cc-orange));
            font-family:Bicubik,sans-serif;font-size:15px;color:#fff;
            box-shadow:0 4px 14px rgba(217,119,87,.34)}
/* Onest, а не Bicubik: в Bicubik только заглавные, «Vesta» превращалась в «VESTA» */
.logo__name{font-family:Onest,sans-serif;font-weight:800;font-size:34px;line-height:1;
            letter-spacing:-.03em;color:var(--cc-orange);
            text-shadow:0 0 26px rgba(217,119,87,.34)}
.logo__tag{font-family:Onest,sans-serif;font-weight:800;font-size:12px;line-height:1;
           letter-spacing:-.01em;color:#000;background:#fff;
           border-radius:5px;padding:5px 8px;align-self:flex-end;margin-bottom:3px}
.vhead__meta{margin-left:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
             font-size:13px;letter-spacing:-.01em;color:var(--mut)}
.vhead__meta b{color:#fff;font-weight:800;letter-spacing:-.02em}

/* ---------- каркас ---------- */
.wrap{max-width:1500px;margin:0 auto;padding:32px 24px 90px}
.wrap--narrow{max-width:1180px}

/* Крупный жирный титул в обычном регистре — iOS large title.
   Bicubik остаётся только в логотипе: широкий капслок в заголовке
   тянул страницу в «техно-баннер» и спорил с плотной вёрсткой. */
h1{font-family:Onest,sans-serif;font-weight:800;font-size:42px;line-height:1.06;
   margin:0 0 10px;letter-spacing:-.034em}
h2{font-family:Onest,sans-serif;font-weight:700;font-size:20px;margin:0 0 4px;
   line-height:1.2;letter-spacing:-.024em}
/* подзаголовок раздела: без капслока и разрядки */
h3{font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--mut);margin:0 0 14px}
.sub{color:var(--mut);font-size:14px;letter-spacing:-.008em}
.dim{color:var(--dim);font-size:12.5px;letter-spacing:-.004em}

/* ---------- карточка ---------- */
.card{position:relative;background:var(--surface);border-radius:var(--r-card);
      padding:22px;margin-bottom:18px;overflow:hidden}
.card > *{position:relative;z-index:1}
.card__head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card__head h2{margin:0}
.card__count{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}

/* акцентная полоса слева — по семантике раздела */
.card--accent::after{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;
                     border-radius:0 4px 4px 0;background:var(--acc,var(--a-tech));opacity:.95;z-index:0}
.card--accent{padding-left:30px}

/* ---------- кнопки ---------- */
button,.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 14px/1 Onest,sans-serif;letter-spacing:-.018em;color:#fff;background:transparent;
  border:0;border-radius:var(--r-btn);padding:11px 18px;cursor:pointer;
  text-decoration:none;transition:.2s cubic-bezier(.4,0,.2,1);white-space:nowrap;
}
button.primary,.btn.primary{background:var(--grad-cta);font-weight:500}
button.primary:hover:not(:disabled),.btn.primary:hover{filter:brightness(1.12);text-decoration:none}
button.brand,.btn.brand{background:var(--grad-brand)}
button.brand:hover:not(:disabled),.btn.brand:hover{filter:brightness(1.12)}
button.sec,.btn.sec{background:var(--surface-2);color:var(--ink)}
button.sec:hover:not(:disabled),.btn.sec:hover{background:rgba(255,255,255,.1);text-decoration:none}
button.ok,.btn.ok{background:var(--a-secure)}
button.ok:hover:not(:disabled){filter:brightness(1.15)}
button:disabled{opacity:.32;cursor:default;filter:none}
/* третичное действие не должно спорить по весу с основной кнопкой */
button.icon{padding:8px 12px;color:var(--dim);background:transparent;font-size:13px;font-weight:500}
button.icon:hover{color:var(--a-trust);background:rgba(209,44,143,.1)}
.btn--sm{padding:8px 14px;font-size:13px}

/* стрелка в круге — фирменный элемент CTA */
.btn__arrow{width:22px;height:22px;flex:none;border-radius:50%;
            background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:12px}

/* ---------- поля ---------- */
textarea,input[type=text]{
  width:100%;background:rgba(0,0,0,.34);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-btn);padding:12px 14px;
  font:400 14px/1.55 Onest,sans-serif;resize:vertical;transition:border-color .2s}
textarea:focus,input:focus{outline:0;border-color:#5D4BF0;box-shadow:0 0 0 3px rgba(93,75,240,.16)}
textarea::placeholder{color:var(--dim)}

/* ---------- статус-пилюли ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;
      font-size:12px;font-weight:700;letter-spacing:-.012em;white-space:nowrap;
      border:1.5px solid var(--pc,var(--line));color:var(--pc,var(--mut));
      background:color-mix(in srgb,var(--pc,#fff) 12%,transparent)}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.s-ready{--pc:var(--a-secure)}
.s-approved{--pc:var(--a-status)}
.s-need_info{--pc:var(--a-flex)}
.s-needs_review,.s-edited{--pc:var(--a-speed)}
.s-error{--pc:var(--a-trust)}
.s-other{--pc:var(--a-tech)}

/* ---------- таблица ---------- */
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:880px}
th{text-align:left;color:var(--dim);font-weight:700;font-size:11px;letter-spacing:.03em;
   text-transform:uppercase;padding:0 12px 11px;border-bottom:1px solid var(--line)}
td{padding:13px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
/* переносим только длинные машинные строки: имя проекта и склейку категорий */
td:nth-child(2),td:nth-child(4){overflow-wrap:anywhere}
td.num,td.idx{overflow-wrap:normal}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .18s}
tbody tr:hover td{background:rgba(255,255,255,.035)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.idx{color:var(--dim);font-variant-numeric:tabular-nums;font-size:13px}
.score{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.025em}

/* ---------- заметки ---------- */
.empty-note{color:var(--dim);text-align:center;padding:34px;font-size:14px}
.errcell{color:#F0A8CE;font-size:13px;line-height:1.45;max-width:640px;word-break:break-word;
         font-family:ui-monospace,"SF Mono",Menlo,monospace}
.box{border-left:4px solid var(--a-speed);background:rgba(240,112,0,.08);
     padding:13px 16px;border-radius:0 var(--r-btn) var(--r-btn) 0;margin-bottom:12px;font-size:14px}
.box.bad{border-color:var(--a-trust);background:rgba(209,44,143,.09)}
.box.good{border-color:var(--a-secure);background:rgba(28,172,71,.09)}
.box.info{border-color:var(--a-flex);background:rgba(70,221,255,.08)}

/* ---------- лента преимуществ / метрик ---------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.metric{position:relative;border-radius:var(--r-card);background:var(--surface);padding:16px 18px;overflow:hidden}
/* капслок оставлен как прямая цитата ленты преимуществ visary.cloud,
   но разрядка убрана почти в ноль и вес поднят — иначе читается как Material caption */
.metric__l{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
           letter-spacing:.045em;text-transform:uppercase;color:var(--mc,var(--a-tech))}
.metric__l i{width:18px;height:18px;border-radius:5px;flex:none;display:grid;place-items:center;
             background:color-mix(in srgb,var(--mc,#fff) 20%,transparent);font-style:normal;font-size:10px}
.metric__v{font-size:30px;font-weight:800;margin-top:9px;letter-spacing:-.032em;line-height:1.05}
.metric__v small{font-size:14px;font-weight:500;color:var(--dim);letter-spacing:-.01em}

/* ---------- тост ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
       background:rgba(18,19,21,.96);border-radius:10px;padding:13px 20px;font-size:14px;
       box-shadow:0 14px 40px rgba(0,0,0,.6);opacity:0;pointer-events:none;
       transition:.22s;max-width:80vw;z-index:80}
.toast.show{opacity:1}
.toast.err{color:#F0A8CE}

.foot{text-align:center;color:var(--dim);font-size:13px;margin-top:26px;line-height:1.6}