/* NodeForge · оформление «NUBO» (ночное небо, синий неон, Unbounded + Manrope).
   Включается атрибутом data-skin="nubo" на <html>; тёмный и светлый режим по data-theme как обычно.
   Работает поверх «жидкого стекла» (liquid.css): меняет фон на аврору, добавляет зерно и неоновые акценты.
   Шрифты: Unbounded и JetBrains Mono из /static/fonts (через skin-zipka.css), текст — Manrope, если он
   установлен у пользователя, иначе Onest. */

/* ── тёмный (по умолчанию) ── */
html[data-skin="nubo"] {
  /* отличия скина для общих правил skin-common.css */
  --sk-display-ls: -.03em;
  --sk-h1-fw: 800;
  --sk-sel-bg: var(--nb-blue);
  --sk-sel-fg: #fff;
  --sk-nav-on-icon: currentColor;
  --sk-nav-gi-border: 1px solid var(--border-subtle);
  --sk-nav-tool-r: 999px;
  --sk-btn-fw: 700;
  --sk-hover-lift: translateY(-1px);
  --sk-focus-border: var(--border-focus);
  --sk-focus-ring: 0 0 0 3px rgba(79,123,255,.22), 0 0 24px rgba(79,123,255,.18);
  --sk-check: #4f7bff;
  --sk-row-hover: rgba(79,123,255,.06);
  --sk-scroll: rgba(124,155,255,.22);
  --sk-overlay-light: rgba(11,14,51,.32);
  --sk-menu-bg: rgba(255,255,255,.04);
  --sk-ctl-border: 1px solid var(--border-subtle);
  --sk-menu-r: var(--r-md);
  --sk-icon-bg: rgba(255,255,255,.04);
  --sk-hover-border: var(--accent-border);

  --bg: #04040a;
  --bg-2: #06071a;
  --surface: #07081a;
  --surface-2: #0c1030;
  --surface-3: #141a44;

  --border: rgba(140,170,255,.16);
  --border-subtle: rgba(255,255,255,.07);
  --border-focus: rgba(79,123,255,.65);

  --text: #eef1ff;
  --text-muted: #a9b2d6;
  --text-dim: #6e7699;

  --accent: #7c9bff;
  --accent-hover: #9db4ff;
  --accent-muted: rgba(79,123,255,.14);
  --accent-border: rgba(124,155,255,.4);

  --step: #b89cff;

  --btn-bg: #4f7bff;
  --btn-text: #ffffff;

  --nb-blue: #4f7bff;
  --nb-violet: #b89cff;
  --nb-cyan: #5bc8ff;
  --nb-glow: rgba(79,123,255,.45);

  --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;

  --shadow-card: 0 1px 0 rgba(255,255,255,.04), 0 18px 50px rgba(0,0,20,.45);
  --shadow-float: 0 30px 80px rgba(0,0,30,.6), 0 0 0 1px rgba(140,170,255,.12);

  --lg-edge: rgba(157,180,255,.2);
  --lg-edge-soft: rgba(140,170,255,.1);
  --lg-sheen: linear-gradient(160deg,rgba(124,155,255,.1) 0%,rgba(124,155,255,.02) 40%,rgba(124,155,255,0) 65%);

  --font: "Twemoji Country Flags","Manrope","Onest","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono: "Twemoji Country Flags","JetBrains Mono","Fira Code",ui-monospace,Menlo,Consolas,monospace;
  --font-display: "Unbounded","Manrope","Onest",system-ui,sans-serif;

  --gx-l4: #7c9bff; --gx-wg: #b89cff; --gx-casc: #ffb86b; --gx-direct: #5bf0a5; --gx-panel: #6e7699;
}

/* ── светлый: утреннее небо, та же палитра ── */
html[data-skin="nubo"][data-theme="light"] {
  --bg: #eef1fb;
  --bg-2: #e4e8f8;
  --surface: #ffffff;
  --surface-2: #f3f5fd;
  --surface-3: #e7ebfb;

  --border: rgba(40,60,160,.16);
  --border-subtle: rgba(40,60,160,.08);
  --border-focus: rgba(79,123,255,.6);

  --text: #0b0e33;
  --text-muted: #4a5385;
  --text-dim: #6e7699;

  --accent: #3d5fe0;
  --accent-hover: #2c4bc4;
  --accent-muted: rgba(79,123,255,.1);
  --accent-border: rgba(61,95,224,.35);

  --step: #6a46d8;

  --btn-bg: #4f7bff;
  --btn-text: #ffffff;
  --nb-glow: rgba(79,123,255,.3);

  --shadow-card: 0 1px 0 rgba(255,255,255,.8), 0 14px 40px rgba(30,45,120,.1);
  --shadow-float: 0 30px 70px rgba(30,45,120,.2), 0 0 0 1px rgba(40,60,160,.1);

  --lg-edge: rgba(255,255,255,.95);
  --lg-edge-soft: rgba(40,60,160,.08);
  --lg-sheen: linear-gradient(160deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.3) 40%,rgba(255,255,255,0) 65%);

  --gx-l4: #3d5fe0; --gx-wg: #6a46d8; --gx-casc: #a35d00; --gx-direct: #108a55; --gx-panel: #6e7699;
}

/* ── фон: аврора и плёночное зерно ── */

html[data-skin="nubo"] body.workspace::before {
  width: 62vmax; height: 62vmax; left: -16vmax; top: -22vmax; filter: blur(70px); opacity: .55;
  background: radial-gradient(closest-side, rgba(79,110,255,.55), rgba(79,110,255,0) 72%);
}
html[data-skin="nubo"] body.workspace::after {
  width: 56vmax; height: 56vmax; right: -18vmax; bottom: -24vmax; filter: blur(80px); opacity: .5;
  background: radial-gradient(closest-side, rgba(160,110,255,.42), rgba(70,200,255,.12) 55%, rgba(70,200,255,0) 72%);
}
html[data-skin="nubo"][data-theme="light"] body.workspace::before,
html[data-skin="nubo"][data-theme="light"] body.workspace::after { opacity: .28; }
html[data-skin="nubo"] body.workspace {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

/* ── типографика ── */
html[data-skin="nubo"] h2, html[data-skin="nubo"] h3 { letter-spacing: -.01em; }


/* ── поверхности: тёмное стекло с неоновой кромкой ── */
html[data-skin="nubo"] .card,
html[data-skin="nubo"] .hub-nav,
html[data-skin="nubo"] .modal-card {
  background: var(--lg-sheen), color-mix(in srgb, var(--surface) 72%, transparent) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: inset 0 1px 0 var(--lg-edge-soft), var(--shadow-card) !important;
}

html[data-skin="nubo"] .card-secondary { background: color-mix(in srgb, var(--bg-2) 80%, transparent) !important; }
@media (hover: hover) {
  html[data-skin="nubo"] .card:hover {
    transform: translateY(-2px); border-color: rgba(140,170,255,.3) !important;
    box-shadow: inset 0 1px 0 var(--lg-edge-soft), 0 22px 60px rgba(0,0,30,.5), 0 0 0 1px rgba(124,155,255,.08) !important;
  }
  html[data-skin="nubo"][data-theme="light"] .card:hover { box-shadow: 0 18px 50px rgba(30,45,120,.14) !important; }
}
html[data-skin="nubo"] .login-wrap {
  background: color-mix(in srgb, var(--surface) 78%, transparent) !important;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: 0 30px 90px rgba(79,123,255,.22), var(--shadow-float);
}

/* плитки статистики: крупные цифры Unbounded и светящаяся полоса сверху */
html[data-skin="nubo"] .stat .b {
  background: var(--lg-sheen), color-mix(in srgb, var(--surface) 75%, transparent);
  border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
}
html[data-skin="nubo"] .stat .b::before {
  height: 2px; background: linear-gradient(90deg, var(--nb-blue), var(--nb-violet), var(--nb-cyan));
  box-shadow: 0 0 14px rgba(124,155,255,.8);
}
html[data-skin="nubo"] .stat .n { font-weight: 800; letter-spacing: -.04em; }
html[data-skin="nubo"] .stat .l, html[data-skin="nubo"] th, html[data-skin="nubo"] .k {
  font-family: var(--font-mono); letter-spacing: .1em;
}

/* ── боковое меню: стекло, знак nubo ── */
html[data-skin="nubo"] .sidebar {
  background: color-mix(in srgb, var(--bg) 62%, transparent) !important;
  border-right: 1px solid var(--border-subtle) !important;
}
html[data-skin="nubo"] .sidebar-logo {
  background: url(/static/nubo-mark.png) center / 34px no-repeat; border: 0; width: 38px; height: 38px;
  filter: drop-shadow(0 0 10px rgba(79,123,255,.55));
}

/* экран входа: тот же знак, что в меню и на вкладке */
html[data-skin="nubo"] .login-logo { background: url(/static/nubo-mark.png) center / 48px no-repeat; border: 0; filter: drop-shadow(0 0 12px rgba(79,123,255,.55)); }

html[data-skin="nubo"] .sidebar-brand-text small { letter-spacing: .16em; font-family: var(--font-mono); }
html[data-skin="nubo"] .nav-item { border-radius: 999px; }
html[data-skin="nubo"] .nav-item:hover { background: rgba(124,155,255,.08); }
html[data-skin="nubo"] .nav-item.on,
html[data-skin="nubo"] .nav-item.on:hover {
  background: linear-gradient(90deg, rgba(79,123,255,.32), rgba(79,123,255,.12)) !important; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(124,155,255,.35), 0 6px 22px rgba(79,123,255,.28);
}
html[data-skin="nubo"][data-theme="light"] .nav-item.on,
html[data-skin="nubo"][data-theme="light"] .nav-item.on:hover {
  background: linear-gradient(90deg, rgba(79,123,255,.18), rgba(79,123,255,.06)) !important; color: var(--accent-hover);
}
html[data-skin="nubo"] button.nav-search { background: rgba(255,255,255,.04) !important; border: 1px solid var(--border-subtle) !important; }
html[data-skin="nubo"][data-theme="light"] button.nav-search { background: var(--surface) !important; }

html[data-skin="nubo"] .nav-pal-box { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-float); }

/* ── кнопки: синие «таблетки» с бликом ── */
html[data-skin="nubo"] button:not(.nav-gh):not(.nav-search):not(.btn-ghost):not(.btn-danger):not(.sidebar-toggle):not(.mobile-menu-btn):not(.nav-item):not(.nav-tool):not(.stat-click):not(.node-name):not(.btn-icon):not(.nf-flat):not(.b):not(.gx-card):not(.tl-head),
html[data-skin="nubo"] .btn:not(.btn-ghost):not(.btn-danger) {
  /* блик — второй слой фона, уезжает за край при наведении (без псевдоэлементов: позиционирование кнопок не трогаем) */
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 70%) -150% 0 / 60% 100% no-repeat, var(--btn-bg);
  color: var(--btn-text); border: 1px solid var(--btn-bg); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 22px rgba(79,123,255,.3);
}
html[data-skin="nubo"] button:not(.nav-gh):not(.nav-search):not(.btn-ghost):not(.btn-danger):not(.sidebar-toggle):not(.mobile-menu-btn):not(.nav-item):not(.nav-tool):not(.stat-click):not(.node-name):not(.btn-icon):not(.nf-flat):not(.b):not(.gx-card):not(.tl-head):not(:disabled):hover,
html[data-skin="nubo"] .btn:not(.btn-ghost):not(.btn-danger):hover { animation: nbShine .8s ease; }
@keyframes nbShine { from { background-position: -150% 0, 0 0; } to { background-position: 250% 0, 0 0; } }
html[data-skin="nubo"] button:not(.btn-ghost):not(.btn-danger):not(.nav-item):not(.tl-head):not(:disabled):hover,
html[data-skin="nubo"] .btn:not(.btn-ghost):not(.btn-danger):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 36px var(--nb-glow); }
html[data-skin="nubo"] button:not(.tl-head):not(:disabled):active,
html[data-skin="nubo"] .btn:active { transform: scale(.97); }
html[data-skin="nubo"] button:disabled { box-shadow: none; }
html[data-skin="nubo"] .btn-ghost, html[data-skin="nubo"] .btn-sm.btn-ghost { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); }
html[data-skin="nubo"][data-theme="light"] .btn-ghost { background: var(--surface); border-color: var(--border); }
html[data-skin="nubo"] .btn-ghost:hover { background: rgba(124,155,255,.1); border-color: var(--accent-border); }
html[data-skin="nubo"] .btn-danger { border: 1px solid var(--err-border); }

/* ── поля ── */
html[data-skin="nubo"] input:not([type="checkbox"]):not([type="radio"]),
html[data-skin="nubo"] select,
html[data-skin="nubo"] textarea { background: rgba(4,4,12,.6) !important; border: 1px solid var(--border-subtle) !important; }
html[data-skin="nubo"][data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-skin="nubo"][data-theme="light"] select,
html[data-skin="nubo"][data-theme="light"] textarea { background: var(--surface) !important; border-color: var(--border) !important; }

/* ── таблицы, плашки, сообщения ── */
html[data-skin="nubo"] th { color: var(--text-dim); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); }


html[data-skin="nubo"] ::-webkit-scrollbar-thumb:hover { background: rgba(124,155,255,.4); }
html[data-skin="nubo"] a:not(.nav-item) { color: var(--accent); }
html[data-skin="nubo"] a:not(.nav-item):hover { color: var(--accent-hover); }
html[data-skin="nubo"] .modal, html[data-skin="nubo"] [class*="overlay"] { background: rgba(2,2,10,.66); }


html[data-skin="nubo"] .stat-click, html[data-skin="nubo"] .node-name { border-radius: var(--r-md); }

html[data-skin="nubo"] button.gx-card { background: color-mix(in srgb, var(--surface) 80%, transparent) !important; border: 1px solid var(--border-subtle); }

@media (max-width: 768px) {
  html[data-skin="nubo"] .card { border-radius: var(--r-lg) !important; }
  html[data-skin="nubo"] body.workspace::before, html[data-skin="nubo"] body.workspace::after { filter: blur(50px); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="nubo"] button:hover, html[data-skin="nubo"] button:active, html[data-skin="nubo"] .card:hover { transform: none !important; }
  html[data-skin="nubo"] button, html[data-skin="nubo"] .btn { animation: none !important; }
}