/* NodeForge · оформление «ZIPKA» (лайм / графит / бумага, Onest + Unbounded).
   Включается атрибутом data-skin="zipka" на <html>; тёмный и светлый режим по data-theme как обычно.
   Всё поверх токенов; «жидкое стекло» (liquid.css) в этом оформлении отключается. */

@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600 800;font-display:swap;src:url(/static/fonts/unbounded-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600 800;font-display:swap;src:url(/static/fonts/unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 700;font-display:swap;src:url(/static/fonts/jbmono-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 700;font-display:swap;src:url(/static/fonts/jbmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── тёмный (по умолчанию) ── */
html[data-skin="zipka"] {
  /* отличия скина для общих правил skin-common.css */
  --sk-display-ls: -.02em;
  --sk-h1-fw: 700;
  --sk-sel-bg: var(--zp-lime);
  --sk-sel-fg: var(--zp-ink);
  --sk-nav-on-icon: var(--zp-ink);
  --sk-nav-gi-border: var(--zp-line) solid var(--border-subtle);
  --sk-nav-tool-r: 999px;
  --sk-btn-fw: 650;
  --sk-hover-lift: translate(-1px,-1px);
  --sk-focus-border: var(--accent);
  --sk-focus-ring: 3px 3px 0 var(--zp-hard);
  --sk-check: #c8f542;
  --sk-row-hover: var(--accent-muted);
  --sk-scroll: var(--border);
  --sk-overlay-light: rgba(13,18,16,.45);
  --sk-menu-bg: var(--surface-2);
  --sk-ctl-border: var(--zp-line) solid var(--border);
  --sk-menu-r: var(--r-md);
  --sk-icon-bg: var(--surface-2);
  --sk-hover-border: var(--accent);

  --bg: #0d1210;
  --bg-2: #101612;
  --surface: #151c18;
  --surface-2: #1b241f;
  --surface-3: #222c26;

  --border: #33403a;
  --border-subtle: #26302a;
  --border-focus: rgba(200,245,66,.6);

  --text: #f2f0e6;
  --text-muted: #a4a59d;
  --text-dim: #7d857e;

  --accent: #c8f542;
  --accent-hover: #d6ff5a;
  --accent-muted: rgba(200,245,66,.12);
  --accent-border: rgba(200,245,66,.34);

  --step: #b9a8ff;

  --btn-bg: #c8f542;
  --btn-text: #0d1210;

  --zp-ink: #0d1210;
  --zp-lime: #c8f542;
  --zp-lime-d: #a9d42a;
  --zp-hard: #050806;
  --zp-line: 2px;

  --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px;

  --shadow-card: 4px 4px 0 var(--zp-hard);
  --shadow-float: 8px 8px 0 var(--zp-hard);

  --font: "Twemoji Country Flags","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","Onest",system-ui,sans-serif;

  --gx-l4: #c8f542; --gx-wg: #b9a8ff; --gx-casc: var(--warn); --gx-direct: var(--ok); --gx-panel: #7d857e;
}

/* ── светлый: бумага, чернильные контуры ── */
html[data-skin="zipka"][data-theme="light"] {
  --bg: #f2f0e6;
  --bg-2: #eae7da;
  --surface: #fbfaf4;
  --surface-2: #f1eee2;
  --surface-3: #e8e5d8;

  --border: #0d1210;
  --border-subtle: #d8d4c3;
  --border-focus: rgba(13,18,16,.7);

  --text: #0d1210;
  --text-muted: #4c564f;
  --text-dim: #6d766f;

  --accent: #4b6a00;
  --accent-hover: #3a5200;
  --accent-muted: rgba(200,245,66,.38);
  --accent-border: rgba(75,106,0,.45);

  --step: #5b3fd0;

  --btn-bg: #c8f542;
  --btn-text: #0d1210;
  --zp-hard: #0d1210;

  --shadow-card: 4px 4px 0 var(--zp-hard);
  --shadow-float: 8px 8px 0 var(--zp-hard);

  --gx-l4: #4b6a00; --gx-wg: #5b3fd0; --gx-casc: #9a5f00; --gx-direct: #187a41; --gx-panel: #6d766f;
}

/* ── фон и типографика ── */

html[data-skin="zipka"] body.workspace::before,
html[data-skin="zipka"] body.workspace::after { display: none; }


/* ── поверхности: плоские, с контуром и жёсткой тенью ── */
html[data-skin="zipka"] .sidebar,
html[data-skin="zipka"] .card,
html[data-skin="zipka"] .hub-nav,
html[data-skin="zipka"] .modal-card,
html[data-skin="zipka"] .mobile-header,
html[data-skin="zipka"] .map-legend,
html[data-skin="zipka"] .gx-board {
  background: var(--surface) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: var(--zp-line) solid var(--border) !important;
  box-shadow: var(--shadow-card) !important;
}
html[data-skin="zipka"] .card,
html[data-skin="zipka"] .hub-nav,
html[data-skin="zipka"] .modal-card { border-radius: var(--r-lg) !important; }

html[data-skin="zipka"] .card-secondary { background: var(--bg-2) !important; }
html[data-skin="zipka"] .card:hover { transform: none; box-shadow: var(--shadow-card) !important; }
html[data-skin="zipka"] .map-stage, html[data-skin="zipka"] .map-inspect, html[data-skin="zipka"] .map-toggle,
html[data-skin="zipka"] .gx-card, html[data-skin="zipka"] .hp-bridge, html[data-skin="zipka"] .hp-tunnel,
html[data-skin="zipka"] .ins-cmd, html[data-skin="zipka"] .login-wrap {
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: var(--r-lg);
}
html[data-skin="zipka"] .login-wrap { background: var(--surface) !important; border: var(--zp-line) solid var(--border); box-shadow: var(--shadow-float); }
html[data-skin="zipka"] .stat .b {
  background: var(--surface); border: var(--zp-line) solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
html[data-skin="zipka"] .stat .b::before { height: 4px; background: var(--zp-lime); }
html[data-skin="zipka"] .stat .n { letter-spacing: -.03em; }

/* ── боковое меню ── */
html[data-skin="zipka"] .sidebar { border-radius: 0 !important; border-width: 0 var(--zp-line) 0 0 !important; box-shadow: none !important; background: var(--bg-2) !important; }
html[data-skin="zipka"] .sidebar-logo {
  background: #0d1210 url(/static/zipka-mark.svg) center / 22px no-repeat; border: var(--zp-line) solid var(--zp-lime);
  border-radius: var(--r); width: 36px; height: 36px;
}

/* экран входа: тот же знак, что в меню и на вкладке */
html[data-skin="zipka"] .login-logo { background: #0d1210 url(/static/zipka-mark.svg) center / 28px no-repeat; border: var(--zp-line) solid var(--zp-lime); border-radius: var(--r-md); }

html[data-skin="zipka"] .sidebar-brand-text small { letter-spacing: .14em; }
html[data-skin="zipka"] .nav-item { border-radius: 999px; border: var(--zp-line) solid transparent; }
html[data-skin="zipka"] .nav-item:hover { background: var(--surface-3); transform: none; }
html[data-skin="zipka"] .nav-item.on,
html[data-skin="zipka"] .nav-item.on:hover {
  background: var(--zp-lime) !important; color: var(--zp-ink); border-color: var(--zp-ink); box-shadow: 3px 3px 0 var(--zp-hard);
}
html[data-skin="zipka"] button.nav-search { background: var(--surface) !important; border: var(--zp-line) solid var(--border) !important; }

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

/* ── кнопки и поля ── */
html[data-skin="zipka"] 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(.status-chip button):not(.tl-head),
html[data-skin="zipka"] .btn:not(.btn-ghost):not(.btn-danger) {
  background: var(--btn-bg); color: var(--btn-text); border: var(--zp-line) solid var(--zp-ink);
  border-radius: 999px; box-shadow: 3px 3px 0 var(--zp-hard);
}
html[data-skin="zipka"][data-theme="light"] 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="zipka"][data-theme="light"] .btn:not(.btn-ghost):not(.btn-danger) { border-color: var(--zp-ink); }
html[data-skin="zipka"] button:not(.tl-head):not(:disabled):active,
html[data-skin="zipka"] .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--zp-hard); }
html[data-skin="zipka"] button:disabled { box-shadow: none; }
html[data-skin="zipka"] .btn-ghost, html[data-skin="zipka"] .btn-sm.btn-ghost { background: var(--surface-2); border: var(--zp-line) solid var(--border); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-skin="zipka"] .btn-ghost:hover { background: var(--surface-3); border-color: var(--accent); }
html[data-skin="zipka"] .btn-danger { border: var(--zp-line) solid var(--err-border); }

html[data-skin="zipka"] input:not([type="checkbox"]):not([type="radio"]),
html[data-skin="zipka"] select,
html[data-skin="zipka"] textarea { background: var(--surface-2) !important; border: var(--zp-line) solid var(--border) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── таблицы, плашки, сообщения ── */
html[data-skin="zipka"] th { color: var(--text-muted); border-bottom: var(--zp-line) solid var(--border); letter-spacing: .1em; }

html[data-skin="zipka"] .status-chip, html[data-skin="zipka"] .tag, html[data-skin="zipka"] .badge { border-width: 2px; }
html[data-skin="zipka"] .msg { border-width: 2px; }
html[data-skin="zipka"][data-theme="light"] ::-webkit-scrollbar-thumb { background: #b9b5a2; }
html[data-skin="zipka"] a:not(.nav-item) { color: var(--accent); }
html[data-skin="zipka"] .modal, html[data-skin="zipka"] [class*="overlay"] { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5,8,6,.7); }

@media (max-width: 768px) {
  html[data-skin="zipka"] .card { border-radius: var(--r-md) !important; box-shadow: 3px 3px 0 var(--zp-hard) !important; }
  html[data-skin="zipka"] .sidebar { border-width: 0 var(--zp-line) 0 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="zipka"] button:hover, html[data-skin="zipka"] button:active { transform: none !important; }
}


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


html[data-skin="zipka"] button.gx-card { background: var(--surface) !important; border: var(--zp-line) solid var(--border); box-shadow: 3px 3px 0 var(--zp-hard); }