/* NodeForge · оформление «EMBER».
   Своя тема по приёмам витрины Code and Chill: чёрная студия, тонкая рамка,
   коралл, карточка как окно редактора. Код компонентов магазина сюда не входит.
   Включается атрибутом data-skin="ember" на <html>. */

html[data-skin="ember"] {
  /* отличия скина для общих правил skin-common.css */
  --sk-display-ls: -.03em;
  --sk-h1-fw: 700;
  --sk-sel-bg: var(--em-coral);
  --sk-sel-fg: var(--em-ink);
  --sk-nav-on-icon: var(--accent);
  --sk-nav-gi-border: 1px solid var(--border-subtle);
  --sk-nav-tool-r: var(--r);
  --sk-btn-fw: 650;
  --sk-hover-lift: translateY(-1px);
  --sk-focus-border: var(--accent);
  --sk-focus-ring: 0 0 0 3px var(--accent-muted);
  --sk-check: #ff5c39;
  --sk-row-hover: var(--accent-muted);
  --sk-scroll: #3a3a3a;
  --sk-overlay-light: rgba(22,20,18,.4);
  --sk-menu-bg: var(--surface);
  --sk-ctl-border: 1px solid var(--border);
  --sk-menu-r: var(--r);
  --sk-icon-bg: var(--surface-2);
  --sk-hover-border: var(--accent);

  --bg: #111111;
  --bg-2: #161616;
  --surface: #171717;
  --surface-2: #1e1e1e;
  --surface-3: #262626;

  --border: #2e2e2e;
  --border-subtle: #242424;
  --border-focus: rgba(255,92,57,.7);

  --text: #f4f1ec;
  --text-muted: #b7b2aa;
  --text-dim: #8a857e;

  --accent: #ff5c39;
  --accent-hover: #ff7a5c;
  --accent-muted: rgba(255,92,57,.12);
  --accent-border: rgba(255,92,57,.45);

  --step: #c9a6ff;

  --btn-bg: #ff5c39;
  --btn-text: #1a0d09;

  --em-ink: #111111;
  --em-coral: #ff5c39;
  --em-line: 1px;

  --r-xs: 4px; --r-sm: 8px; --r: 10px; --r-md: 12px; --r-lg: 14px; --r-xl: 18px;

  --shadow-card: 0 0 0 1px #2a2a2a;
  --shadow-float: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px #333;

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

  --gx-l4: #ff5c39; --gx-wg: #c9a6ff; --gx-casc: #ffb020; --gx-direct: #3ddc84; --gx-panel: #8a857e;
}

html[data-skin="ember"][data-theme="light"] {
  --bg: #f6f3ee;
  --bg-2: #efeae3;
  --surface: #fffcf8;
  --surface-2: #f3eee7;
  --surface-3: #e7e1d8;

  --border: #1a1a1a;
  --border-subtle: #e4ddd4;
  --border-focus: rgba(214,70,40,.7);

  --text: #161412;
  --text-muted: #5c564e;
  --text-dim: #7a736a;

  --accent: #e24b2c;
  --accent-hover: #c43b20;
  --accent-muted: rgba(226,75,44,.1);
  --accent-border: rgba(226,75,44,.4);

  --step: #6b46c2;

  --btn-bg: #ff5c39;
  --btn-text: #1a0d09;

  --shadow-card: 0 0 0 1px #1a1a1a;
  --shadow-float: 0 18px 40px rgba(40,24,16,.12), 0 0 0 1px #1a1a1a;

  --gx-l4: #e24b2c; --gx-wg: #6b46c2; --gx-casc: #8a5a00; --gx-direct: #127a45; --gx-panel: #7a736a;
}

html[data-skin="ember"] body,
html[data-skin="ember"] body.workspace { color: var(--text); }
html[data-skin="ember"] body.workspace::before,
html[data-skin="ember"] body.workspace::after { display: none; }

html[data-skin="ember"] .mono, html[data-skin="ember"] code, html[data-skin="ember"] pre,
html[data-skin="ember"] th, html[data-skin="ember"] .k, html[data-skin="ember"] .sidebar-ver {
  font-family: var(--font-mono);
}

/* Карточки как окна редактора: коралловая кромка сверху и три точки. */
html[data-skin="ember"] .card,
html[data-skin="ember"] .hub-nav,
html[data-skin="ember"] .modal-card,
html[data-skin="ember"] .stat .b,
html[data-skin="ember"] .node-table-wrap,
html[data-skin="ember"] .login-wrap,
html[data-skin="ember"] .nav-pal-box {
  background: var(--surface) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: var(--em-line) solid var(--border) !important;
  border-top: 2px solid var(--em-coral) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-card) !important;
}
html[data-skin="ember"] .stat .b::before { height: 0; }
html[data-skin="ember"] .card:hover { transform: none; }

html[data-skin="ember"] .card-secondary { background: var(--bg-2) !important; }
html[data-skin="ember"] .stat .n { letter-spacing: -.04em; }
html[data-skin="ember"] .stat .l { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; font-size: var(--fs-xs); }

html[data-skin="ember"] .sidebar {
  background: var(--bg-2) !important;
  border-right: var(--em-line) solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-skin="ember"] .sidebar-logo,
html[data-skin="ember"] .login-logo {
  background:
    radial-gradient(circle at 30% 30%, #ffb020 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 30%, #3ddc84 0 2px, transparent 2.5px),
    radial-gradient(circle at 70% 30%, #ff5c39 0 2px, transparent 2.5px),
    var(--em-ink);
  border: 1px solid var(--em-coral);
  border-radius: var(--r);
}
html[data-skin="ember"] .sidebar-logo { width: 36px; height: 36px; }
html[data-skin="ember"] .login-logo { background-size: 100% 100%; }

html[data-skin="ember"] .sidebar-brand-text small { letter-spacing: .16em; font-family: var(--font-mono); }

/* Подчёркивание текущего раздела переезжает само (приём меню, свой CSS). */
html[data-skin="ember"] .nav-item { border-radius: var(--r); position: relative; }
html[data-skin="ember"] .nav-item:hover { background: var(--surface-3); transform: none; }
html[data-skin="ember"] .nav-item.on,
html[data-skin="ember"] .nav-item.on:hover {
  background: var(--accent-muted) !important;
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--em-coral);
}
html[data-skin="ember"] button.nav-search {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
html[data-skin="ember"] button.nav-search:hover,
html[data-skin="ember"] button.nav-search:focus-visible {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-muted);
}

html[data-skin="ember"] 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="ember"] .btn:not(.btn-ghost):not(.btn-danger) {
  background: var(--btn-bg); color: var(--btn-text);
  border: 1px solid #ff7a5c; border-radius: 999px; box-shadow: none;
}
html[data-skin="ember"] button:not(.tl-head):not(:disabled):active,
html[data-skin="ember"] .btn:active { transform: translateY(0); }
html[data-skin="ember"] .btn-ghost, html[data-skin="ember"] .btn-sm.btn-ghost { background: transparent; border: 1px solid var(--border); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-skin="ember"] .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-muted); }
html[data-skin="ember"] .btn-danger { border: 1px solid var(--err-border); background: transparent; }
html[data-skin="ember"] .btn-danger:hover { background: var(--err-muted); }

html[data-skin="ember"] input:not([type="checkbox"]):not([type="radio"]),
html[data-skin="ember"] select,
html[data-skin="ember"] textarea { background: var(--bg) !important; border: 1px solid var(--border) !important; -webkit-backdrop-filter: none; backdrop-filter: none; transition: border-color .15s ease, box-shadow .15s ease; }

html[data-skin="ember"] th {
  color: var(--text-dim); border-bottom: 1px solid var(--border);
  letter-spacing: .12em; text-transform: uppercase; font-size: var(--fs-xs);
}

html[data-skin="ember"] .node-table-wrap { overflow: auto; }
html[data-skin="ember"] .status-chip,
html[data-skin="ember"] .tag,
html[data-skin="ember"] .badge { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; }
html[data-skin="ember"] .msg { border-width: 1px; }
html[data-skin="ember"] .msg.ok {
  background: var(--ok-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ddc84' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.2 17 19 7'/%3E%3C/svg%3E") 12px 50% / 16px no-repeat;
  padding-left: 36px;
}
html[data-skin="ember"] a:not(.nav-item) { color: var(--accent); }
html[data-skin="ember"][data-theme="light"] ::-webkit-scrollbar-thumb { background: #c8c0b6; }
html[data-skin="ember"] .modal,
html[data-skin="ember"] [class*="overlay"] {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(0,0,0,.62);
}

/* Полоска прогресса проверки: заливка бежит по обводке, без чужого скрипта. */
html[data-skin="ember"] .lprog,
html[data-skin="ember"] [style*="height:6px"][style*="border-radius:var(--r-xs)"] {
  outline: 1px solid var(--border);
  outline-offset: 2px;
}



html[data-skin="ember"] button.gx-card { background: var(--surface) !important; border: 1px solid var(--border); box-shadow: var(--shadow-card); }

@media (prefers-reduced-motion: reduce) {
  html[data-skin="ember"] button:hover,
  html[data-skin="ember"] button:active { transform: none !important; }
}