/* ═══════════════════════════════════════════════════════
   AthusScript Reference — site.css
   Theme: VS Default Light inspired
═══════════════════════════════════════════════════════ */

/* ─── Reset & Variables ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

* {
    font-feature-settings: "liga" 0, "calt" 0;
}

:root {
  /* Brand */
  --blue:        #0078D4;
  --blue-dark:   #005A9E;
  --blue-light:  #EBF3FB;
  --blue-hover:  #106EBE;

  /* Neutrals */
  --bg:          #FFFFFF;
  --bg-alt:      #F5F5F5;
  --bg-sidebar:  #F3F3F3;
  --border:      #E5E5E5;
  --border-dark: #CCCCCC;

  /* Text */
  --text:        #1E1E1E;
  --text-muted:  #6F6F6F;
  --text-dim:    #999999;

  /* Header */
  --topbar-h:    52px;
  --sidebar-w:   280px;

  /* Sidebar */
  --tree-indent: 20px;

  /* Code / VS Light */
  --code-bg:     #F8F8F8;
  --code-border: #E8E8E8;
  --vs-kw:       #0000FF;  /* keywords: blue */
  --vs-str:      #A31515;  /* strings: dark red */
  --vs-cmt:      #008000;  /* comments: green */
  --vs-fn:       #795E26;  /* functions: brown */
  --vs-type:     #267F99;  /* types: teal */
  --vs-num:      #098658;  /* numbers: green */
  --vs-var:      #001080;  /* variables: dark blue */
  --vs-punct:    #000000;  /* punctuation */
  --vs-param:    #001080;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  200ms;
}

html, body {
  height: 100%;
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── Top Bar ─────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: var(--blue-dark);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-icon { display: flex; align-items: center; }

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.15;
}

.logo-primary {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: .3px;
}

.logo-secondary {
  font-size: 10px;
  color: rgba(255,255,255,.55);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.topbar-search {
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 10px;
  color: rgba(255,255,255,.5);
  pointer-events: none;
}

#searchInput {
  width: 100%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  padding: 6px 64px 6px 32px;
  outline: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

#searchInput::placeholder { color: rgba(255,255,255,.45); }
#searchInput:focus {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
}

.search-kbd {
  position: absolute;
  right: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
}

.topbar-meta { flex-shrink: 0; }

.version-badge {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', monospace;
}

/* ─── Shell Layout ────────────────────────────────────── */
.shell {
  display: flex;
  min-height: 100vh;
  padding-top: var(--topbar-h);
}

/* ─── Sidebar ─────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar-inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-dark) transparent;
}

.sidebar-inner::-webkit-scrollbar { width: 5px; }
.sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.sidebar-inner::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }

.tree-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ─── Tree Component ─────────────────────────────────── */
.tree { list-style: none; }

/* Root level */
.tree-root > .tree-root-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  border-radius: 0;
  transition: background var(--dur) var(--ease);
  position: relative;
}

.tree-root > .tree-root-toggle:hover { background: rgba(0,0,0,.04); }

.root-icon { opacity: .6; flex-shrink: 0; }

.item-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  min-width: 22px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}

/* Category level */
.tree-cat-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 4px 14px 4px calc(14px + var(--tree-indent));
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.tree-cat-toggle:hover { color: var(--text); background: rgba(0,0,0,.03); }

/* Item level */
.tree-item-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 14px 3px calc(14px + var(--tree-indent) * 2);
  text-decoration: none;
  font-size: 12.5px;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'JetBrains Mono', monospace;
}

.tree-item-link:hover {
  color: var(--blue);
  background: var(--blue-light);
  border-left-color: var(--blue);
}

.tree-item-link.active {
  color: var(--blue);
  background: var(--blue-light);
  border-left-color: var(--blue);
  font-weight: 600;
}

.item-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-dark);
  flex-shrink: 0;
  transition: background var(--dur);
}

.tree-item-link:hover .item-dot,
.tree-item-link.active .item-dot { background: var(--blue); }

/* Toggle arrow */
.toggle-arrow {
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
  color: var(--text-dim);
}

.tree-root.open > .tree-root-toggle .toggle-arrow,
.tree-category.open > .tree-cat-toggle .toggle-arrow {
  transform: rotate(90deg);
}

/* Collapsible children */
.tree-children {
  list-style: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 350ms var(--ease);
}

.tree-children.open { max-height: 9999px; }

/* Search highlight */
.tree-item-link.search-hidden { display: none; }
.tree-category.search-empty { display: none; }

/* ─── Main Content ────────────────────────────────────── */
.content {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: calc(100vh - var(--topbar-h));
  background: var(--bg);
}

.content-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 48px 80px;
}

.content-bottom {
    text-align: center;
    margin: 20px;
}

.content-bottom a {
    text-decoration: none;
    color: #000;
}

/* ─── Welcome Screen ─────────────────────────────────── */
.welcome-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--topbar-h) - 120px);
  text-align: center;
  gap: 16px;
}

.welcome-icon { opacity: .6; margin-bottom: 8px; }
.welcome-title {
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.4px;
}
.welcome-sub {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.6;
}
.welcome-tips {
  display: flex;
  gap: 24px;
  margin-top: 12px;
}
.tip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.tip span { margin-left: 2px; }

/* ─── Breadcrumb ─────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-current { color: var(--text-muted); font-weight: 500; }

/* ─── Doc Page ───────────────────────────────────────── */
.doc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.doc-type-badge {
  font-size: 11px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: .5px;
  flex-shrink: 0;
}

.badge-function {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.badge-command {
  background: #F0FDF4;
  color: #166534;
  border: 1px solid #BBF7D0;
}

.doc-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.5px;
}

/* ─── Doc Sections ───────────────────────────────────── */
.doc-section {
  margin-bottom: 36px;
  animation: fadeUp .3s var(--ease) both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.doc-section:nth-child(2) { animation-delay: .04s; }
.doc-section:nth-child(3) { animation-delay: .08s; }
.doc-section:nth-child(4) { animation-delay: .12s; }
.doc-section:nth-child(5) { animation-delay: .16s; }

.section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.section-body { font-size: 14px; line-height: 1.75; color: var(--text); }

.description-body p { margin-bottom: .75em; }
.description-body p:last-child { margin-bottom: 0; }

.observations-body {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 3px solid #F59E0B;
  border-radius: 0 6px 6px 0;
  padding: 14px 16px;
  font-size: 13.5px;
  color: #78350F;
  line-height: 1.7;
}

/* ─── Syntax Block ───────────────────────────────────── */
.doc-syntax-section { margin-bottom: 32px; }

.syntax-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--code-bg);
}

.syntax-bar {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: #ECECEC;
  border-bottom: 1px solid var(--border);
}

.syntax-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  flex: 1;
}

.syntax-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 14px 16px;
  overflow-x: auto;
  color: var(--vs-fn);
}

/* ─── Code Block ─────────────────────────────────────── */
.code-block {
  border: 1px solid var(--code-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--code-bg);
}

.code-bar {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: #ECECEC;
  border-bottom: 1px solid var(--border);
}

.code-lang {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  flex: 1;
}

.code-pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.65;
  background: var(--code-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--border-dark) transparent;
  tab-size: 2;
}

.code-pre::-webkit-scrollbar { height: 5px; }
.code-pre::-webkit-scrollbar-track { background: transparent; }
.code-pre::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }

.code-pre code { font-family: inherit; font-size: inherit; }

/* ─── Copy Button ─────────────────────────────────────── */
.copy-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--dur) var(--ease);
}

.copy-btn:hover {
  background: rgba(0,0,0,.1);
  color: var(--text);
}

.copy-btn.copied {
  color: #166534;
  background: #DCFCE7;
  border-color: #BBF7D0;
}

/* ─── Parameters Table ───────────────────────────────── */
.params-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.params-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.params-table thead {
  background: #F0F0F0;
}

.params-table thead th {
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .8px;
  border-bottom: 1px solid var(--border);
}

.params-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--dur);
}

.params-table tbody tr:last-child { border-bottom: none; }
.params-table tbody tr:hover { background: #F9F9F9; }

.params-table td {
  padding: 9px 14px;
  vertical-align: top;
  line-height: 1.55;
}

.params-table td:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--vs-fn);
  white-space: nowrap;
}

.params-table td code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  background: rgba(0,0,0,.05);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--vs-fn);
}

.params-table td b { font-weight: 600; }

/* ─── Keyboard shortcuts ─────────────────────────────── */
kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: #F0F0F0;
  border: 1px solid #CCCCCC;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ─── Doc Footer ─────────────────────────────────────── */
.doc-footer {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

/* ─── Search results overlay ─────────────────────────── */
.search-results {
    position: fixed;
    width: 480px;
    max-height: 400px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    z-index: 200;
    display: none;
}

.search-results.visible { display: block; }

.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--dur);
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--blue-light); }

.sr-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.sr-path {
  font-size: 11px;
  color: var(--text-dim);
}

.sr-mark { background: #FEFCE8; color: #92400E; }

.search-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

/* ─── VS Light Syntax Highlighting ───────────────────── */
/* Applied by JS tokenizer to code blocks */
.hl-kw    { color: var(--vs-kw);   font-weight: normal; }  /* keyword */
.hl-str   { color: var(--vs-str);  }                       /* string */
.hl-cmt   { color: var(--vs-cmt);  font-style: italic; }   /* comment */
.hl-fn    { color: var(--vs-fn);   }                       /* function/command name */
.hl-type  { color: var(--vs-type); }                       /* type */
.hl-num   { color: var(--vs-num);  }                       /* number */
.hl-var   { color: var(--vs-var);  }                       /* $variable */
.hl-punct { color: var(--vs-punct);}                       /* punctuation */
.hl-param { color: var(--vs-param);}                       /* parameter */
.hl-op    { color: #000000;        }                       /* operator */

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform: translateX(-280px); width: 280px; z-index: 50; transition: transform .25s var(--ease); }
  .sidebar.mobile-open { transform: translateX(0); --sidebar-w: 280px; }
  .content { margin-left: 0; }
  .content-inner { padding: 24px 20px 60px; }
  .welcome-screen { padding: 0 20px; }
}

@media (max-width: 480px) {
  .search-kbd { display: none; }
  .topbar-meta { display: none; }
  .doc-title { font-size: 20px; }
  .code-pre { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════
   HOME PAGE — Index.cshtml styles
═══════════════════════════════════════════════════════ */

/* ─── Sidebar: Getting Started item ────────────────── */
.tree-home-item {
  padding: 2px 0 6px;
}

.tree-home-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: all var(--dur) var(--ease);
  font-family: 'Sora', sans-serif;
}

.tree-home-link svg { flex-shrink: 0; opacity: .6; transition: opacity var(--dur); }

.tree-home-link:hover {
  color: var(--blue);
  background: var(--blue-light);
  border-left-color: var(--blue);
}

.tree-home-link:hover svg { opacity: 1; }

.tree-home-link.active {
  color: var(--blue);
  background: var(--blue-light);
  border-left-color: var(--blue);
  font-weight: 700;
}

.tree-home-link.active svg { opacity: 1; color: var(--blue); }

.tree-divider {
  display: block;
  height: 1px;
  background: var(--border);
  margin: 6px 14px 10px;
}

/* ─── Home page layout ──────────────────────────────── */
.home-page {
  animation: fadeUp .35s var(--ease) both;
}

/* ─── Hero ──────────────────────────────────────────── */
.home-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.home-hero-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0,120,212,.25));
}

.home-title {
  font-family: 'Sora', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.6px;
  line-height: 1.1;
}

.home-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 4px;
  letter-spacing: .1px;
}

/* ─── Intro text ────────────────────────────────────── */
.home-intro {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 32px;
  max-width: 680px;
}

.home-intro p { margin-bottom: .9em; }
.home-intro p:last-child { margin-bottom: 0; }
.home-intro strong { color: var(--text); font-weight: 600; }

.home-intro code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: rgba(0,0,0,.06);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--vs-fn);
}

/* ─── Section layout ────────────────────────────────── */
.home-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 36px 0;
}

.home-section { margin-bottom: 8px; }

.home-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--blue);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ─── Quick-start steps ─────────────────────────────── */
.home-quickstart {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qs-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.qs-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  font-family: 'JetBrains Mono', monospace;
}

.qs-body {
  flex: 1;
  min-width: 0;
}

.qs-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.qs-body p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.6;
}

.qs-code {
  border: 1px solid var(--code-border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--code-bg);
}

.qs-code pre {
  margin: 0;
  padding: 12px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
}

/* ─── Stats cards ───────────────────────────────────── */
.home-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-alt);
  min-width: 150px;
  flex: 1;
  transition: border-color var(--dur), box-shadow var(--dur);
}

.stat-card:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,120,212,.08);
}

.stat-card-total {
  background: var(--blue-light);
  border-color: rgba(0,120,212,.25);
}

.stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
}

.stat-card-total .stat-num { color: var(--blue-dark); }

.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}

.stat-sub {
  font-size: 11.5px;
  color: var(--text-dim);
}

/* ─── Category browser ──────────────────────────────── */
.home-categories {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cat-group {}

.cat-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.cat-group-title svg { opacity: .55; }

.cat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cat-list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cat-list-name {
  flex-shrink: 0;
  width: 180px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding-top: 3px;
}

.cat-list-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}

.cat-chip:hover {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue);
}

.cat-chip-more {
  color: var(--text-dim);
  cursor: default;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-style: italic;
  background: transparent;
  border-color: transparent;
}

/* ─── Shortcut table ────────────────────────────────── */
.shortcut-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  max-width: 460px;
}

.shortcut-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur);
}

.shortcut-row:last-child { border-bottom: none; }
.shortcut-row:hover { background: var(--bg-alt); }

.shortcut-keys {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 80px;
}

.shortcut-desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════
   EDIT PAGE — Edit.cshtml styles
═══════════════════════════════════════════════════════ */

/* ─── Edit mode badge ───────────────────────────────── */
.edit-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Sora', sans-serif;
    color: #92400E;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 6px;
}

/* ─── Edit form layout ──────────────────────────────── */
.edit-page {
    max-width: 860px;
}

.edit-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px;
}

.edit-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ─── Field ─────────────────────────────────────────── */
.edit-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.edit-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .8px;
}

    .edit-label svg {
        opacity: .6;
        flex-shrink: 0;
    }

.edit-label-hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

/* ─── Inputs ─────────────────────────────────────────── */
.edit-input {
    width: 100%;
    padding: 8px 11px;
    font-family: 'Sora', sans-serif;
    font-size: 13.5px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    outline: none;
    transition: border-color var(--dur), box-shadow var(--dur);
}

    .edit-input:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(0,120,212,.12);
    }

.edit-input-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

/* ─── Textareas ──────────────────────────────────────── */
.edit-textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: 'Sora', sans-serif;
    font-size: 13.5px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    outline: none;
    resize: vertical;
    line-height: 1.6;
    transition: border-color var(--dur), box-shadow var(--dur);
}

    .edit-textarea:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(0,120,212,.12);
    }

.edit-textarea-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.65;
    background: var(--code-bg);
    tab-size: 2;
}

/* ─── Action buttons ─────────────────────────────────── */
.edit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

.btn-save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur), box-shadow var(--dur);
}

    .btn-save:hover {
        background: var(--blue-hover);
        box-shadow: 0 2px 8px rgba(0,120,212,.35);
    }

    .btn-save:active {
        transform: translateY(1px);
    }

.btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-dark);
    border-radius: 7px;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--dur);
}

.btn-cancel:hover {
    color: var(--text);
    background: var(--bg-alt);
    border-color: var(--text-muted);
}

@media (max-width: 600px) {
    .edit-row-2col {
        grid-template-columns: 1fr;
    }
}

.topbar-user {
    color: #FFF;
    margin-left: 20px;
}

.topbar-btn-login, .topbar-btn-logout {
    color: #FFF;
    margin-left: 10px;
}

.adicionarComando {
    font-size: 12px;
    margin-left: 35px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.adicionarComando a {
    color: #000;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════
   PARAMETER GRID EDITOR
═══════════════════════════════════════════════════════ */

.param-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .param-editor-header .edit-label {
        margin-bottom: 0;
    }

.param-editor-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ─── Toolbar buttons ────────────────────────────────── */
.param-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-family: 'Sora', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid var(--border-dark);
    background: var(--bg-alt);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--dur);
}

    .param-btn:hover {
        background: var(--border);
        color: var(--text);
    }

.param-btn-add:hover {
    color: var(--blue);
    border-color: var(--blue);
    background: var(--blue-light);
}

.param-btn-raw {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

.param-btn-sm {
    padding: 3px 7px;
    font-size: 11px;
}

/* ─── Wrap ───────────────────────────────────────────── */
.param-editor-wrap {
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
}

/* ─── Column pills bar ───────────────────────────────── */
.param-cols-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #F0F0F0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.param-cols-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
}

.param-cols-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
}

.param-col-pill {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-dark);
    border-radius: 5px;
    overflow: hidden;
}

.param-col-input {
    border: none;
    outline: none;
    padding: 3px 7px;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    width: 90px;
    min-width: 60px;
}

    .param-col-input:focus {
        background: var(--blue-light);
    }

.param-col-del {
    border: none;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    padding: 3px 6px;
    font-size: 14px;
    line-height: 1;
    transition: background var(--dur), color var(--dur);
}

    .param-col-del:hover {
        background: #FEF2F2;
        color: #DC2626;
    }

/* ─── Grid ───────────────────────────────────────────── */
.param-grid {
    display: grid;
    gap: 0;
}

.param-grid-hdr {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    background: #F8F8F8;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

    .param-grid-hdr:last-child {
        border-right: none;
    }

.param-cell {
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

    .param-cell:last-child,
    .param-cell-del-wrap {
        border-right: none;
    }

.param-cell-input {
    width: 100%;
    padding: 7px 10px;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    color: var(--text);
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    line-height: 1.5;
    overflow: hidden;
    min-height: 34px;
    transition: background var(--dur);
}

    .param-cell-input:focus {
        background: #FAFCFF;
    }

.param-cell-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--vs-fn);
    font-weight: 500;
}

/* ─── Delete row button ──────────────────────────────── */
.param-cell-del-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6px 4px;
    background: transparent;
}

.param-row-del {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all var(--dur);
    flex-shrink: 0;
}

    .param-row-del:hover {
        background: #FEF2F2;
        border-color: #FECACA;
        color: #DC2626;
    }

/* ─── Empty state ────────────────────────────────────── */
.param-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
    background: var(--bg-alt);
}