/* Theme variables, resets, and global error banner */
:root{
  --bg: #ffffff;
  --panel: #ffffff;
  --sidebar: #f6f7f9;
  --text: #0b1220;
  --muted: #64748b;
  --accent: #7c3aed;
  --accent-2: #6d28d9;
  --border: #e5e7eb;
  --soft: #f1f5f9;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.06);
  --radius: 12px;
  --sidebar-w: 280px;
  --sidebar-w-collapsed: 72px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#app,[hidden]{}
[hidden]{display:none !important}
#app{display:flex; height:100vh; overflow:hidden}

/* Global error banner */
.global-error{
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 100;
  width: min(900px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  border-radius: 12px; box-shadow: 0 12px 30px rgba(127, 29, 29, 0.12);
}
.global-error-text{flex: 1; min-width: 0; white-space: pre-wrap}
.global-error-close{background: #fff; border: 1px solid #fecaca; color: #991b1b; box-shadow: none}
.global-error-close:hover{background:#fff7f7}

/* Buttons */
button{
  border:1px solid var(--border); background:#ffffff; color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .08s ease, border-color .18s ease;
  box-shadow: var(--shadow);
}
button:hover{transform: translateY(-1px)}
button.primary{background:var(--accent); border-color:var(--accent-2); color:#ffffff}
button.primary:hover{background:var(--accent-2)}
button.danger{background:#dc2626; border-color:#b91c1c; color:white}
button.danger:hover{background:#b91c1c}
button:disabled{opacity:0.6; cursor:not-allowed}

#loadingIndicator{display:flex; align-items:center; gap:8px; color:var(--muted)}
#loadingIndicator[hidden]{display:none !important}
.spinner{width:16px; height:16px; border-radius:50%; border:2px solid rgba(2,6,23,0.12); border-top-color: var(--accent); animation: spin 1s linear infinite}
@keyframes spin{to{transform: rotate(360deg)}}