/* =====================================================================
   hub-ds.css — ЕДИНЫЙ ДИЗАЙН-КОД badapp.ru  (v1, 13.10.2026)
   Источник: Штаб /agents/ — theme.css, слой «Классика».
   Назначение: один слой токенов + базы + примитивов для всех продуктов.
   Правила:
     • подключать ПОСЛЕДНИМ (после тем продукта) — он только уточняет;
     • PHP-логику и имена классов продуктов НЕ трогаем: чужие переменные
       ремапятся на канонические токены в блоке 1b;
     • откат = убрать <link ... hub-ds.css> (или @import) в продукте.
   Светлая ипостась системы — html[data-theme] (витрина /cpa/).
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@500;600;700&display=swap");

/* ============ 1. Канонические токены (значения = Штаб) ============ */
:root{
  color-scheme: dark;

  /* поверхности */
  --hub-bg:      #0c0e12;   /* фон приложения */
  --hub-panel:   #15181f;   /* карточка / панель */
  --hub-panel-2: #1a1e26;   /* вложенная поверхность, поля, кнопки */
  --hub-panel-3: #101319;   /* «утопленная» поверхность (трек, код) */
  --hub-glass:   rgba(12,14,18,.78);

  /* текст */
  --hub-text:    #eef1f6;
  --hub-text-2:  #a7b1c0;
  --hub-muted:   #838c9c;

  /* линии и чипы */
  --hub-border:        #262c37;
  --hub-border-strong: #333b48;
  --hub-chip:    #232936;
  --hub-chip-fg: #c3ccda;

  /* акцент — золото Штаба */
  --hub-accent:       #d8b45c;
  --hub-accent-fg:    #17130a;
  --hub-accent-hover: #ecd27a;
  --hub-accent-dim:   #a9862f;
  --hub-grad: linear-gradient(135deg,#a9862f 0%,#d8b45c 48%,#ecd27a 100%);

  /* статусы */
  --hub-run:  #35c07d;
  --hub-ok:   #3ecf8e;
  --hub-warn: #e0b95f;
  --hub-err:  #ff6b6b;
  --hub-info: #7fb6f0;

  /* тени и оверлей */
  --hub-shadow:      0 8px 26px rgba(0,0,0,.5);
  --hub-shadow-card: 0 10px 30px rgba(0,0,0,.55);
  --hub-shadow-pop:  0 24px 70px rgba(0,0,0,.7);
  --hub-glow:        0 0 20px rgba(216,180,92,.25);
  --hub-overlay:     rgba(0,0,0,.62);

  /* радиусы */
  --hub-r-sm: 8px; --hub-r: 11px; --hub-r-lg: 14px; --hub-r-pill: 999px;

  /* ритм (4/8pt) */
  --hub-sp-1:4px; --hub-sp-2:8px; --hub-sp-3:12px; --hub-sp-4:16px; --hub-sp-5:24px; --hub-sp-6:32px;

  /* типографика */
  --hub-font:         "Manrope","Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hub-font-display: "Outfit","Manrope",system-ui,sans-serif;
  --hub-font-mono:    ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --hub-fs-xs:12px; --hub-fs-sm:13px; --hub-fs:15px; --hub-fs-lg:17px; --hub-fs-xl:22px; --hub-fs-2xl:28px;

  /* статусы доски (канбан) */
  --hub-s-triage:#8b93a1; --hub-s-backlog:#6b7a99; --hub-s-todo:#4a86e8; --hub-s-ready:#9b59b6;

  /* ====== 1b. Ремап существующих имён продуктов → токены Штаба ====== */
  /* поверхности */
  --bg:var(--hub-bg); --bg2:var(--hub-panel); --bg-2:var(--hub-panel);
  --card:var(--hub-panel); --card-2:var(--hub-panel-2); --card2:var(--hub-panel-2);
  --surface:var(--hub-panel); --surface-2:var(--hub-panel-2);
  --panel:var(--hub-panel); --panel-2:var(--hub-panel-2); --panel-3:var(--hub-panel-3);
  --dark-950:var(--hub-bg); --dark-900:var(--hub-panel); --dark-850:var(--hub-panel-2); --dark-800:#222836;
  --prog-bg:var(--hub-panel-3);
  /* текст */
  --text:var(--hub-text); --text-2:var(--hub-text-2); --dim:var(--hub-text-2); --muted:var(--hub-muted);
  --dark-50:#f8fafc; --dark-100:var(--hub-text); --dark-200:#d8dee8; --dark-300:var(--hub-text-2);
  --dark-400:var(--hub-muted); --dark-500:#6b7385; --dark-600:#4a5262; --dark-700:#313846;
  /* линии */
  --border:var(--hub-border); --border-strong:var(--hub-border-strong); --line:var(--hub-border);
  --grid:rgba(255,255,255,.06); --dash:var(--hub-border);
  /* акцент */
  --accent:var(--hub-accent); --accent-hover:var(--hub-accent-hover);
  --accent-300:var(--hub-accent-hover); --accent-400:var(--hub-accent);
  --accent-500:var(--hub-accent-dim); --accent-600:#8a6a1f;
  --grad:var(--hub-grad);
  /* статусы */
  --ok:var(--hub-ok); --success-400:var(--hub-ok); --success-500:#2fbf7a;
  --warn:var(--hub-warn); --warning-400:var(--hub-warn); --warning-500:#c99a2f;
  --err:var(--hub-err); --bad:var(--hub-err); --error-400:var(--hub-err); --error-500:#e5484d; --red:var(--hub-err);
  --run:var(--hub-run); --run-btn:var(--hub-run); --run-btn-fg:#07301d;
  --green:var(--hub-ok); --yellow:var(--hub-warn); --blue:var(--hub-info);
  /* тени и радиусы */
  --shadow:var(--hub-shadow); --shadow-card:var(--hub-shadow-card); --shadow-pop:var(--hub-shadow-pop);
  --glow-accent:var(--hub-glow); --glass-bg:var(--hub-glass);
  --radius:var(--hub-r-lg); --radius-sm:var(--hub-r-sm); --radius-lg:var(--hub-r-lg); --radius-pill:var(--hub-r-pill);
  /* midnight-gold (портал / nb / protect) */
  --mg-bg:var(--hub-bg); --mg-card:var(--hub-panel); --mg-card-2:var(--hub-panel-2);
  --mg-border:var(--hub-border); --mg-text:var(--hub-text); --mg-muted:var(--hub-muted); --mg-faint:#6b7385;
  --mg-gold:var(--hub-accent); --mg-gold-dim:var(--hub-accent-dim); --mg-gold-bright:var(--hub-accent-hover);
  --mg-gold-grad:var(--hub-grad); --mg-ink:var(--hub-accent-fg);
  --mg-green:var(--hub-ok); --mg-yellow:var(--hub-warn); --mg-red:var(--hub-err); --mg-blue:var(--hub-info);
  /* cpa-админка */
  --green-grad:var(--hub-grad);
  /* витрина /cpa/ */
  --mint:var(--hub-accent); --ink-accent:var(--hub-accent);
  --mint-soft:color-mix(in srgb, var(--hub-accent) 16%, var(--hub-panel));
  --lav:var(--hub-muted); --lav-soft:var(--hub-chip);
  --sand:var(--hub-warn); --sand-soft:color-mix(in srgb, var(--hub-warn) 16%, var(--hub-panel));
  --header-bg:var(--hub-glass); --btn-bg:var(--hub-accent); --btn-fg:var(--hub-accent-fg);
  --card-hover-border:var(--hub-border-strong);
}

/* ============ 2. База (типографика, фокус, скролл) ============ */
html{ -webkit-text-size-adjust:100%; }
body{
  background-color: var(--hub-bg);
  color: var(--hub-text);
  font-family: var(--hub-font);
  font-size: var(--hub-fs);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--hub-font-display); font-weight:700; letter-spacing:-.2px; }
a{ color:var(--hub-accent); }
a:hover{ color:var(--hub-accent-hover); }
code,kbd,pre,samp{ font-family:var(--hub-font-mono); }

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--hub-accent); outline-offset:2px; border-radius:6px;
}
::selection{ background:color-mix(in srgb, var(--hub-accent) 32%, transparent); }
*{ scrollbar-color:#2a2f3a transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#2a2f3a; border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--hub-accent-dim); }

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

/* ============ 3. Примитивы (для новой разметки, опционально) ============ */
.hub-panel{ background:var(--hub-panel); border:1px solid var(--hub-border); border-radius:var(--hub-r-lg);
  padding:var(--hub-sp-4) var(--hub-sp-5); box-shadow:var(--hub-shadow); }
.hub-btn{ appearance:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--hub-border); background:var(--hub-panel-2); color:var(--hub-text);
  padding:7px 13px; border-radius:var(--hub-r); font:inherit; font-size:var(--hub-fs-sm);
  text-decoration:none; transition:border-color .15s ease, background .15s ease; }
.hub-btn:hover{ border-color:var(--hub-accent); }
.hub-btn:disabled{ opacity:.55; cursor:not-allowed; }
.hub-btn-primary{ background:var(--hub-grad); border-color:transparent; color:var(--hub-accent-fg); font-weight:700; }
.hub-btn-primary:hover{ filter:brightness(1.06); }
.hub-btn-ghost{ background:transparent; }
.hub-btn-danger{ background:var(--hub-err); border-color:var(--hub-err); color:#1a0606; font-weight:700; }
.hub-input{ width:100%; padding:9px 11px; border-radius:var(--hub-r); border:1px solid var(--hub-border);
  background:var(--hub-panel-2); color:var(--hub-text); font:inherit; font-size:14px; }
.hub-input:focus{ outline:2px solid var(--hub-accent); outline-offset:0; border-color:var(--hub-accent); }
.hub-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--hub-r-pill);
  font-size:12.5px; background:var(--hub-chip); color:var(--hub-chip-fg); border:1px solid var(--hub-border); }
.hub-chip{ display:inline-flex; align-items:center; padding:2px 9px; border-radius:var(--hub-r-pill);
  font-size:12px; background:var(--hub-chip); color:var(--hub-chip-fg); }
.hub-badge-ok{ color:var(--hub-ok); border-color:color-mix(in srgb,var(--hub-ok) 35%,transparent); }
.hub-badge-warn{ color:var(--hub-warn); }
.hub-badge-err{ color:var(--hub-err); }

/* ============ 4. Светлая ипостась системы (витрина /cpa/) ============
   Тёмная ипостась = канонический :root выше. Здесь только светлая.
   cpa ставит data-theme=auto|light|dark; auto следует теме ОС. */
html[data-theme="light"]{
  color-scheme: light;
  --hub-bg:#f6f5f1; --hub-panel:#ffffff; --hub-panel-2:#faf9f5; --hub-panel-3:#f1efe9;
  --hub-glass:rgba(246,245,241,.86);
  --hub-text:#211f1a; --hub-text-2:#4f4a41; --hub-muted:#6f6857;
  --hub-border:#e6e1d7; --hub-border-strong:#d5cec1; --hub-chip:#efece4; --hub-chip-fg:#4c4739;
  --hub-accent:#8a6a1f; --hub-accent-fg:#fffdf6; --hub-accent-hover:#6f5416; --hub-accent-dim:#a9862f;
  --hub-run:#1a6b43; --hub-ok:#1a6b43; --hub-warn:#7d5600; --hub-err:#b3261e; --hub-info:#175e99;
  --hub-s-triage:#5c6472; --hub-s-backlog:#4a5a78; --hub-s-todo:#2f66c4; --hub-s-ready:#7b3f97;
  --hub-grad:linear-gradient(135deg,#a9862f 0%,#8a6a1f 100%);
  --hub-shadow:0 6px 18px rgba(60,50,30,.08); --hub-shadow-card:0 10px 30px rgba(60,50,30,.10);
  --hub-shadow-pop:0 24px 60px rgba(60,50,30,.18); --hub-glow:0 0 18px rgba(138,106,31,.18);
  --grid:rgba(0,0,0,.06);
}
@media (prefers-color-scheme: light){
  html[data-theme="auto"]{
    color-scheme: light;
    --hub-bg:#f6f5f1; --hub-panel:#ffffff; --hub-panel-2:#faf9f5; --hub-panel-3:#f1efe9;
    --hub-glass:rgba(246,245,241,.86);
    --hub-text:#211f1a; --hub-text-2:#4f4a41; --hub-muted:#6f6857;
    --hub-border:#e6e1d7; --hub-border-strong:#d5cec1; --hub-chip:#efece4; --hub-chip-fg:#4c4739;
    --hub-accent:#8a6a1f; --hub-accent-fg:#fffdf6; --hub-accent-hover:#6f5416; --hub-accent-dim:#a9862f;
    --hub-run:#1a6b43; --hub-ok:#1a6b43; --hub-warn:#7d5600; --hub-err:#b3261e; --hub-info:#175e99;
    --hub-s-triage:#5c6472; --hub-s-backlog:#4a5a78; --hub-s-todo:#2f66c4; --hub-s-ready:#7b3f97;
    --hub-grad:linear-gradient(135deg,#a9862f 0%,#8a6a1f 100%);
    --hub-shadow:0 6px 18px rgba(60,50,30,.08); --hub-shadow-card:0 10px 30px rgba(60,50,30,.10);
    --hub-shadow-pop:0 24px 60px rgba(60,50,30,.18); --hub-glow:0 0 18px rgba(138,106,31,.18);
    --grid:rgba(0,0,0,.06);
  }
}

/* ============ 5. Единая навигация «Проекты» (13.10.2026) ============
   Один элемент возврата на портал-список (/) из любого продукта.
   Разметка (ставь первым в правой части шапки, перед «Выйти»):
     <a class="hub-projects" href="/" title="Все проекты">
       <svg …grid 2×2…/> <span class="hp-lbl">Проекты</span></a>
   Стиль — на канонических токенах, поэтому одинаков во всех продуктах
   и сам подхватывает светлую ипостась (html[data-theme]).            */
.hub-projects{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; min-height:36px; box-sizing:border-box;
  border:1px solid var(--hub-border); border-radius:var(--hub-r-pill);
  background:var(--hub-panel-2); color:var(--hub-text);
  font:inherit; font-size:var(--hub-fs-sm); font-weight:600; line-height:1;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.hub-projects svg{ width:16px; height:16px; flex:0 0 auto; display:block; }
.hub-projects:hover{ border-color:var(--hub-accent); color:var(--hub-accent-hover); background:var(--hub-panel-3); }
.hub-projects:active{ transform:translateY(1px); }
.hub-projects:focus-visible{ outline:2px solid var(--hub-accent); outline-offset:2px; }
@media (max-width:560px){
  .hub-projects{ padding:8px; min-height:40px; }
  .hub-projects .hp-lbl{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
}