/* ── LAYOUT ── */
.app {
  margin-top: 52px;
  height: calc(100vh - 52px);
  display: flex;
  overflow: hidden;
}

/* ── PAGES ── */
.page { display: none; width: 100%; height: 100%; overflow: auto; }
.page.active { display: flex; flex-direction: column; }

.header-spacer { height: 52px; flex-shrink: 0; }

/* ── TOAST ── */
.toast {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 11px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.25s;
  max-width: 300px;
  pointer-events: none;
  font-family: 'DM Mono', monospace;
  line-height: 1.4;
}
.toast.show { transform:translateY(0); opacity:1; }
.toast.hiding { transform:translateY(20px); opacity:0; }
.toast.success { border-color:var(--tg); }
.toast.error { border-color:var(--np); }
.toast.info { border-color:var(--accent2); }

/* ── EMPTY STATES ── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 300px; color: var(--text-muted); text-align: center;
}
.empty-icon { font-size: 44px; margin-bottom:12px; opacity:0.3; }
.empty-text { font-size:13px; }
.empty-hint { font-size:11px; margin-top:6px; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--border2); }

.divider { height:1px; background:var(--border); margin:10px 0; }

.chip {
  display:inline-flex; padding:2px 8px; border-radius:8px; font-size:10px;
  background:rgba(77,168,255,0.1); color:var(--accent2); border:1px solid rgba(77,168,255,0.2);
}
.chip-green { background:rgba(56,201,110,0.1); color:var(--tg); border-color:rgba(56,201,110,0.2); }
.chip-purple { background:rgba(196,125,255,0.1); color:var(--prop); border-color:rgba(196,125,255,0.2); }
.chip-warn { background:rgba(212,146,26,0.1); color:var(--warn); border-color:rgba(212,146,26,0.2); }