/* ==========================================================================
   Astryx AppShell — Réplica Fiel da Aplicação Real
   Extrado de: computed styles da aplicação em produção + AppShell.tsx + SideNav.tsx + TopNav
   ========================================================================== */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; min-height: 100dvh; }

body {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.43;
  background-color: var(--color-background-body);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

/* Scrollbar (igual ao index.css) */
* { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--color-text-secondary) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: color-mix(in oklch, var(--color-text-secondary) 40%, transparent); border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklch, var(--color-text-secondary) 70%, transparent); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ═══════════════════════════════════════════════════════════════
   AppShell (variant="elevated" height="fill")
   ═══════════════════════════════════════════════════════════════ */

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background-color: var(--color-background-body); /* body bg */
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   TopNav — 48px altura, bg transparente (herda body)
   ═══════════════════════════════════════════════════════════════ */

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px; /* --spacing-12 */
  padding: 0 var(--spacing-4);
  flex-shrink: 0;
  background-color: var(--color-background-body); /* inherits from elevated body */
  border-bottom: none;
  z-index: 10;
}

.topnav-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
}

.topnav-org-name {
  font-size: 17px; /* computed: 17px */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.topnav-end {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.topnav-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-element);
  background: none;
  border: none;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s;
}

.topnav-icon-btn:hover {
  background-color: var(--color-overlay-hover);
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   App Wrapper (flex row: sidenav + content)
   ═══════════════════════════════════════════════════════════════ */

.app-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SideNav — 260px, bg body, scrollable
   ═══════════════════════════════════════════════════════════════ */

.sidenav {
  display: flex;
  flex-direction: column;
  width: 260px;
  flex-shrink: 0;
  background-color: var(--color-background-body); /* inherits */
  box-sizing: border-box;
  overflow: hidden;
}

/* Scrollable area */
.sidenav-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-2);
  display: flex;
  flex-direction: column;
}

/* Section */
.sidenav-section {
  display: flex;
  flex-direction: column;
}

.sidenav-section-title {
  font-size: var(--font-size-base); /* 16px computed — NOT text-transform: uppercase */
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  padding: var(--spacing-1) var(--spacing-2);
  margin-bottom: var(--spacing-1);
}

.sidenav-section-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Divider between sections */
.sidenav-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--spacing-2) var(--spacing-2);
  flex-shrink: 0;
}

/* ═══ SideNavItem ═══ */
.sidenav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2); /* 8px */
  height: var(--size-element-md); /* 32px */
  padding: 0 var(--spacing-2); /* 0 8px */
  border-radius: var(--radius-element); /* 10px (0.625rem) */
  font-size: var(--font-size-base); /* 14px */
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  transition: background-color 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.sidenav-item:hover {
  background-color: var(--color-overlay-hover);
}

.sidenav-item:active {
  background-color: var(--color-overlay-pressed);
}

.sidenav-item.active {
  background-color: var(--color-background-gray); /* rgba(255,255,255,0.1) = --color-neutral */
  font-weight: var(--font-weight-medium);
}

.sidenav-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-primary);
}

.sidenav-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══ SideNav Footer (avatar + collapse) ═══ */
.sidenav-footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-1);
  flex-shrink: 0;
  background-color: inherit;
}

.sidenav-avatar {
  position: relative;
  flex-shrink: 0;
}

.sidenav-avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--color-background-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-blue);
}

.sidenav-avatar-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  border: 2px solid var(--color-background-body);
}

.sidenav-avatar-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidenav-avatar-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidenav-avatar-role {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.sidenav-collapse-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-element);
  background: none;
  border: none;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.sidenav-collapse-btn:hover {
  background-color: var(--color-overlay-hover);
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   Content Area (variant="elevated")
   ═══════════════════════════════════════════════════════════════ */

.app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--color-background-surface); /* #262626 — elevated surface */
  border-start-start-radius: var(--radius-page); /* 1.75rem — top-left corner */
  padding: var(--spacing-6); /* 24px — contentPadding={6} */
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Reusable component styles (importados de _components.css original)
   ═══════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.btn {
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-element);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background-color: var(--color-text-accent);
  color: var(--color-on-accent);
}
.btn-primary:hover { opacity: 0.9; }
.btn-secondary {
  background-color: var(--color-background-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-emphasized);
}
.btn-secondary:hover { background-color: var(--color-background-muted); }
.btn-ghost {
  background: none;
  color: var(--color-text-secondary);
  border: none;
}
.btn-ghost:hover { background-color: var(--color-overlay-hover); color: var(--color-text-primary); }
.btn-danger {
  background-color: var(--color-error-muted);
  color: var(--color-error);
  border-color: var(--color-error);
}
.btn-sm { padding: var(--spacing-1-5) var(--spacing-3); font-size: var(--font-size-xs); }
.btn-xs { padding: 2px var(--spacing-2); font-size: var(--font-size-xs); border-radius: var(--radius-inner); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}
.badge-success { background-color: var(--color-success); color: var(--color-on-success); }
.badge-neutral { background-color: var(--color-background-gray); color: var(--color-text-gray); }
.badge-blue { background-color: var(--color-background-blue); color: var(--color-text-blue); }
.badge-purple { background-color: var(--color-background-purple); color: var(--color-text-purple); }
.badge-teal { background-color: var(--color-background-teal); color: var(--color-text-teal); }
.badge-red { background-color: var(--color-background-red); color: var(--color-text-red); }
.badge-orange { background-color: var(--color-background-orange); color: var(--color-text-orange); }
.badge-green { background-color: var(--color-background-green); color: var(--color-text-green); }
.badge-warning { background-color: var(--color-warning); color: var(--color-on-warning); }
.badge-error { background-color: var(--color-error); color: var(--color-on-error); }

/* ── Card ── */
.card {
  background-color: var(--color-background-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  padding: var(--spacing-3);
  transition: all 0.15s;
}
.card-hover:hover {
  border-color: var(--color-border-blue);
  box-shadow: var(--shadow-low);
}

/* ── Inputs ── */
.input-group { display: flex; flex-direction: column; gap: var(--spacing-1-5); }
.input-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.input-label-secondary {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}
.input {
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-element);
  border: 1px solid var(--color-border-emphasized);
  background-color: var(--color-background-body);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.input:focus { border-color: var(--color-border-blue); }
.input::placeholder { color: var(--color-text-disabled); }
.input-disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Search Box ── */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-element);
  border: 1px solid var(--color-border-emphasized);
  background-color: var(--color-background-body);
  min-width: 260px;
  transition: border-color 0.15s;
}
.search-box:focus-within { border-color: var(--color-border-blue); }
.search-box svg { width: 16px; height: 16px; color: var(--color-text-disabled); flex-shrink: 0; }
.search-box input {
  background: none; border: none; outline: none;
  color: var(--color-text-primary); font-size: var(--font-size-sm); width: 100%;
  font-family: inherit;
}
.search-box input::placeholder { color: var(--color-text-disabled); }

/* ── Filter Chips ── */
.filter-bar { display: flex; gap: var(--spacing-2); margin-bottom: var(--spacing-5); flex-wrap: wrap; }
.filter-chip {
  padding: var(--spacing-1-5) var(--spacing-3);
  border-radius: var(--radius-full);
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);
}
.filter-chip:hover { border-color: var(--color-border-blue); color: var(--color-text-primary); }
.filter-chip.active {
  background-color: var(--color-background-blue);
  border-color: var(--color-border-blue);
  color: var(--color-text-blue);
}
.filter-chip .count {
  background-color: var(--color-background-surface);
  padding: 0 var(--spacing-1-5);
  border-radius: var(--radius-full);
  font-size: 0.65rem;
}
.filter-chip.active .count { background-color: rgba(158, 183, 255, 0.2); }

/* ── Stats Bar ── */
.stats-bar {
  display: flex;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-5);
  padding: var(--spacing-4);
  background-color: var(--color-background-card);
  border-radius: var(--radius-container);
  border: 1px solid var(--color-border);
}
.stat-item { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.stat-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* ── Skill Grid + Card ── */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--spacing-4);
}

.skill-card {
  background-color: var(--color-background-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  padding: var(--spacing-4);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.skill-card:hover {
  border-color: var(--color-border-blue);
  box-shadow: var(--shadow-low);
}
.skill-card-top { display: flex; align-items: center; gap: var(--spacing-3); margin-bottom: var(--spacing-3); }
.skill-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-element);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1rem;
}
.skill-icon.active { background-color: var(--color-background-blue); }
.skill-icon.inactive { background-color: var(--color-background-gray); }
.skill-meta { flex: 1; min-width: 0; }
.skill-meta-row { display: flex; align-items: center; gap: var(--spacing-1-5); }
.skill-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.skill-slug { font-size: var(--font-size-xs); color: var(--color-text-disabled); margin-top: 2px; }
.skill-desc {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin-bottom: var(--spacing-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.skill-stats { display: flex; gap: var(--spacing-4); margin-bottom: var(--spacing-3); }
.skill-stat { display: flex; align-items: center; gap: var(--spacing-1); }
.skill-stat span { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.skill-tags { display: flex; gap: var(--spacing-1); flex-wrap: wrap; margin-bottom: var(--spacing-3); }
.skill-tag {
  padding: 2px var(--spacing-2);
  border-radius: var(--radius-inner);
  background-color: transparent;
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  font-weight: var(--font-weight-medium);
}
.skill-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); }
.skill-time { font-size: var(--font-size-xs); color: var(--color-text-disabled); }
.verified-icon { width: 14px; height: 14px; color: var(--color-success); flex-shrink: 0; }

/* ── Dialog/Modal ── */
.dialog-overlay {
  position: fixed; inset: 0;
  background-color: var(--color-overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.dialog-overlay.open { opacity: 1; pointer-events: auto; }
.dialog {
  background-color: var(--color-background-popover);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-high);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.98);
  transition: transform 0.2s;
}
.dialog-overlay.open .dialog { transform: scale(1); }
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--color-border);
}
.dialog-header h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.dialog-header .subtitle { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 2px; }
.dialog-close {
  width: 28px; height: 28px; border-radius: var(--radius-element);
  background: none; border: none; color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.dialog-close:hover { background-color: var(--color-overlay-hover); color: var(--color-text-primary); }
.dialog-body { padding: var(--spacing-5); overflow-y: auto; flex: 1; }
.dialog-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-2);
  padding: var(--spacing-4) var(--spacing-5);
  border-top: 1px solid var(--color-border);
}

/* ── Layout Panel (sidebar in dialog) ── */
.layout-panel {
  width: 240px;
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-4);
  overflow-y: auto;
  flex-shrink: 0;
  background-color: var(--color-background-popover);
}
.layout-panel-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-3);
}

/* ── Template Item ── */
.template-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-element);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.template-item:hover { background-color: var(--color-overlay-hover); }
.template-item.selected {
  border-color: var(--color-border-blue);
  background-color: var(--color-background-blue);
}
.template-item-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-element);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.85rem;
}
.template-item-text { flex: 1; min-width: 0; }
.template-item-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.template-item-desc { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* ── Empty State ── */
.empty-state {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-8);
  background-color: var(--color-background-card);
  border-radius: var(--radius-container);
  border: 1px dashed var(--color-border);
}
.empty-state .icon { font-size: 3rem; margin-bottom: var(--spacing-4); opacity: 0.5; }
.empty-state h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-2); }
.empty-state p { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--spacing-6); }

/* ── Tabs ── */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); }
.tab {
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  transition: all 0.15s;
}
.tab:hover { color: var(--color-text-primary); }
.tab.active { color: var(--color-text-blue); border-bottom-color: var(--color-border-blue); }

/* ── Code Block ── */
.code-block {
  background-color: var(--color-background-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-element);
  padding: var(--spacing-3) var(--spacing-4);
  font-family: var(--font-family-code);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  overflow-x: auto;
  line-height: 1.6;
  white-space: pre-wrap;
}
.code-block .keyword { color: var(--color-text-purple); }
.code-block .string { color: var(--color-text-green); }
.code-block .comment { color: var(--color-text-disabled); }
.code-block .function { color: var(--color-text-blue); }

/* ── Divider ── */
.divider { border: none; border-top: 1px solid var(--color-border); margin: var(--spacing-4) 0; }

/* ── Import Source (sidebar items in import modal) ── */
.import-source.selected {
  border-color: var(--color-border-blue) !important;
  background: var(--color-background-blue) !important;
}
.import-source:hover {
  border-color: var(--color-border-emphasized);
}

/* ── Eval Score ── */
.eval-score-bar {
  flex: 1; height: 6px;
  background-color: var(--color-background-gray);
  border-radius: var(--radius-full); overflow: hidden;
}
.eval-score-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.3s; }
.eval-score-fill.good { background-color: var(--color-success); }
.eval-score-fill.medium { background-color: var(--color-warning); }
.eval-score-fill.bad { background-color: var(--color-error); }

/* ── Timeline ── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; gap: var(--spacing-3); padding: var(--spacing-3) 0; border-bottom: 1px solid var(--color-border); }
.timeline-item:last-child { border-bottom: none; }
.timeline-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background-color: var(--color-border-blue); flex-shrink: 0; margin-top: 5px; }
.timeline-dot.current { background-color: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-muted); }
.timeline-content { flex: 1; }
.timeline-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.timeline-meta { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 2px; }
.timeline-desc { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: var(--spacing-1); }

/* ── Grid layouts ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4); }

/* ── Text helpers ── */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-disabled { color: var(--color-text-disabled); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-blue { color: var(--color-text-blue); }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* ── Back Link (para hub de mocaps) ── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-4);
  transition: color 0.15s;
}
.back-link:hover { color: var(--color-text-primary); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .sidenav { display: none; }
  .app-content { border-radius: 0; padding: var(--spacing-4); }
  .skill-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}