*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0d1117;
  --bg-el:       #161b22;
  --bg-card:     #1c2333;
  --border:      rgba(255,255,255,0.08);
  --border-h:    rgba(255,255,255,0.16);
  --text-1:      #e6edf3;
  --text-2:      #c9d1d9;
  --text-3:      #8b949e;
  --accent:      #58a6ff;
  --accent-d:    #1f6feb;
  --accent-glow: rgba(88,166,255,0.15);
  --green:       #3fb850;
  --yellow:      #e3b341;
  --purple:      #bc8cff;
  --red:         #f85149;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --t:     200ms cubic-bezier(0.4,0,0.2,1);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text-1);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}

/* ── App layout ── */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Header ── */
.header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-el);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-1);
  text-decoration: none;
  white-space: nowrap;
}
.logo svg { color: var(--accent); }

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text-3);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.breadcrumb a { color: var(--accent); text-decoration: none; white-space: nowrap; transition: color var(--t); }
.breadcrumb a:hover { color: var(--text-1); }
.breadcrumb .sep { color: var(--border-h); }
.breadcrumb .cur { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Main split ── */
.main {
  display: flex;
  flex: 1;
  min-height: 0;
}
.grid-area {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-h) transparent;
  min-width: 0;
}
.grid-area::-webkit-scrollbar { width: 6px; }
.grid-area::-webkit-scrollbar-thumb { background: var(--border-h); border-radius: 3px; }

/* ── Empty state ── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  color: var(--text-3);
  gap: 12px;
  text-align: center;
}
.empty svg { color: var(--border-h); }
.empty p { font-size: 0.88rem; }

/* ── Buttons ── */
.btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-d);
  border: 1px solid var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-h);
  color: var(--text-2);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-icon {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
  display: flex;
  align-items: center;
}
.btn-icon:hover { color: var(--text-1); background: var(--border); }

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-el);
  border: 1px solid var(--border-h);
  border-radius: var(--r-md);
  padding: 8px 18px;
  font-size: 0.83rem;
  color: var(--text-2);
  z-index: 9999;
  opacity: 0;
  transition: opacity 220ms, transform 220ms;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }