/* ===== Account UI ===== */
.account-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  font-weight: 500;
}

.sync-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse 2s infinite;
}

.sync-indicator.syncing {
  background: var(--warn);
}

.sync-indicator.error {
  background: var(--danger);
}

.sync-indicator.offline {
  background: var(--muted);
  animation: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Account modals */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.modal-body {
  padding: 0;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--text);
}

.form-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev);
  color: var(--text);
  font-size: 14px;
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(122, 162, 255, 0.2);
}

.form-help {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.form-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.account-info-section {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--elev2);
  border-radius: 8px;
}

.account-info-section h4 {
  margin: 0 0 12px 0;
  color: var(--text);
}

.account-info-section p {
  margin: 4px 0;
  color: var(--muted);
}

.status-online {
  color: var(--ok);
  font-weight: 500;
}

.account-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.account-storage {
  padding: 16px;
  background: var(--elev2);
  border-radius: 8px;
}

.account-storage h4 {
  margin: 0 0 12px 0;
  color: var(--text);
}

.storage-bar {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.storage-used {
  height: 100%;
  background: linear-gradient(90deg, var(--ok), var(--warn));
  transition: width 0.3s ease;
}

.storage-text {
  font-size: 12px;
  color: var(--muted);
}

.sync-status {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--elev2);
  border-radius: 8px;
}

.sync-status h4 {
  margin: 0 0 12px 0;
  color: var(--text);
}

.sync-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}

.sync-indicator.sync-enabled {
  background: rgba(121, 214, 134, 0.1);
  color: var(--ok);
}

.sync-indicator.sync-disabled {
  background: rgba(255, 107, 107, 0.1);
  color: var(--danger);
}

.sync-workspaces {
  margin-bottom: 20px;
}

.sync-workspaces h4 {
  margin: 0 0 12px 0;
  color: var(--text);
}

.workspace-sync-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--elev2);
  border-radius: 6px;
}

.workspace-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workspace-size {
  font-size: 12px;
  color: var(--muted);
}

.workspace-actions {
  display: flex;
  gap: 4px;
}

.sync-actions {
  display: flex;
  gap: 8px;
}

/* Toast notifications */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 16px;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.toast.show {
  transform: translateX(0);
}

.toast-success {
  background: var(--ok);
}

.toast-error {
  background: var(--danger);
}

.toast-info {
  background: var(--accent);
}

.toast-warning {
  background: var(--warn);
}

/* Conflict resolution modal */
.conflict-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.conflict-option {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--elev2);
}

.conflict-option h4 {
  margin: 0 0 8px 0;
  color: var(--text);
}

.conflict-option p {
  margin: 0 0 12px 0;
  color: var(--muted);
  font-size: 14px;
}

/* Collaboration UI */
.presence-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 12px;
}

.presence-users {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.presence-user {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--elev2);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
}

.user-name {
  font-size: 11px;
  color: var(--text);
}

.user-activity {
  font-size: 10px;
  color: var(--muted);
}

.user-activity.typing {
  color: var(--accent);
  animation: pulse 1s infinite;
}

.activity-feed {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--elev2);
  border-radius: 8px;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.activity-header h4 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.activity-list {
  max-height: 200px;
  overflow-y: auto;
}

.activity-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-message {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 2px;
}

.activity-time {
  font-size: 10px;
  color: var(--muted);
}

.activity-item.activity-user-joined .activity-message {
  color: var(--ok);
}

.activity-item.activity-user-left .activity-message {
  color: var(--muted);
}

.activity-item.activity-operation .activity-message {
  color: var(--accent);
}

/* Share modal */
.share-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.share-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.share-section h4 {
  margin: 0 0 12px 0;
  color: var(--text);
  font-size: 14px;
}

.share-section .form-group {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 0;
}

.share-section .form-group input,
.share-section .form-group select {
  flex: 1;
  margin-bottom: 0;
}

.share-section .form-group button {
  white-space: nowrap;
}

.share-link {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.share-link input {
  flex: 1;
  font-family: monospace;
  font-size: 12px;
}

.collaborator-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.collaborator-item:last-child {
  border-bottom: none;
}

.collaborator-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.permission-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.permission-badge.owner {
  background: rgba(121, 214, 134, 0.2);
  color: var(--ok);
}

.permission-badge.edit {
  background: rgba(122, 162, 255, 0.2);
  color: var(--accent);
}

.permission-badge.view {
  background: rgba(154, 165, 180, 0.2);
  color: var(--muted);
}

/* ===== Theme ===== */
:root{
  --bg:#0e1013;--bg-elev:#151922;--card:#151922;--elev2:#1a1f2a;
  --text:#e7ebf3;--muted:#9aa5b4;--border:#262c37;
  --accent:#7aa2ff;--accent2:#ff86c8;--ok:#79d686;--warn:#ffd166;--danger:#ff6b6b;
  --radius:14px;--shadow:0 10px 30px rgba(0,0,0,.35);--w:clamp(320px,95vw,1280px);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
:root.light{
  --bg:#f6f8fb;--bg-elev:#ffffff;--card:#ffffff;--elev2:#f2f5fb;
  --text:#141821;--muted:#5d6674;--border:#e6eaf1;--accent:#365cff;--accent2:#c21a7e;--ok:#1a9b4b;--danger:#cf3b3b;
}

/* Theme transition handling */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Disable transitions during theme change to prevent weird animations */
.theme-transitioning * {
  transition: none !important;
}

*,*::before,*::after{box-sizing:border-box}
html,body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(122,162,255,.10), transparent 60%),
    radial-gradient(1000px 500px at 85% 10%, rgba(255,134,200,.08), transparent 60%),
    var(--bg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--text);
  font:15.5px/1.55 system-ui,Segoe UI,Inter,Roboto,Arial;
  scrollbar-gutter: stable;
  height:100%;
  overflow:hidden;
}
a{color:inherit;text-decoration:none}
a,button{cursor:pointer}
input[type=checkbox]{accent-color:var(--accent)}

/* ===== Layout ===== */
.app{height:100vh;display:grid;grid-template-rows:auto 1fr;max-width:var(--w);margin:0 auto;padding:28px 8px 28px}
header.appbar{background:linear-gradient(180deg, rgba(122,162,255,.08), rgba(122,162,255,.02)) var(--bg-elev);border:1px solid var(--border);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);display:grid;gap:12px;min-height:76px}
.appbar-inner{min-height:56px;align-items:center}

/* Connection status indicator */
.connection-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-right: 1rem;
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	font-size: 0.875rem;
}

.connection-indicator {
	color: #10b981; /* Green for connected */
	font-size: 0.75rem;
}

.connection-indicator.offline {
	color: #ef4444; /* Red for offline */
}

.connection-indicator.syncing {
	color: #f59e0b; /* Yellow for syncing */
}

.connection-count {
	font-weight: 500;
	color: var(--text);
}
.layout{
  margin-top:12px;
  display:grid;
  grid-template-columns:300px 5px 1fr;
  gap:8px;
  min-height:0;
}
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  #resizer { display: none; }
  
  /* Improve mobile interactions */
  .btn, .create-pill {
    min-height: 44px; /* iOS touch target size */
  }
  
  .node {
    min-height: 44px;
    padding: 8px 12px;
  }
  
  .meatball {
    width: 32px;
    height: 32px;
  }
  
  /* Better mobile menu positioning */
  .kmenu.dynamic {
    max-width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px !important;
  }
}

/* Resizer handle */
#resizer { 
  cursor: col-resize; background: var(--bg); border-radius: 4px; 
  transition: all var(--transition-fast); 
  position: relative;
}
#resizer:hover { 
  background: var(--border); 
  transform: scaleX(1.2);
}
#resizer:active {
  background: var(--accent);
  transform: scaleX(1.5);
}

.row{display:flex;gap:8px;align-items:center}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.end{justify-content:flex-end}

.btn,button,label.btn{
  appearance:none;display:inline-flex;gap:8px;align-items:center;justify-content:center;
  background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;
  padding:8px 14px;line-height:1.1;
  transition: all var(--transition-fast);
  transform: translateY(0);
  position: relative;
  overflow: hidden;
}
.btn-mini{padding:5px 8px;font-size:12.5px;border-radius:10px}
.btn.pill{padding:8px 14px;border-radius:999px;font-size:14px}
.btn:hover{
  border-color:var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(122,162,255,0.15);
}
.btn:active{
  transform: translateY(0);
  transition: all 0.1s ease;
}
.btn-primary{border-color:var(--accent);box-shadow:0 0 0 2px rgba(122,162,255,.2)}
.btn-danger{color:var(--danger)}
.btn-danger:hover{
  border-color:var(--danger);
  box-shadow: 0 4px 12px rgba(255,107,107,0.15);
}
.btn-icon{width:32px;height:32px;padding:0;font-size:18px;font-weight:bold}
label.btn input[type=file]{display:none}

/* Save button states */
.btn-save-state.btn-saved{
  opacity:.6;cursor:default;pointer-events:none;
  transition: all var(--transition-normal);
}
.btn-save-state.btn-dirty{
  border-color:var(--warn)!important;
  box-shadow:0 0 0 2px rgba(255,209,102,.35);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 2px rgba(255,209,102,.35)}
  50%{box-shadow:0 0 0 4px rgba(255,209,102,.2)}
}
.btn-saved-flash{
  animation:flashSaved 1.2s ease;
}
@keyframes flashSaved{
  0%{box-shadow:0 0 0 0 rgba(122,162,255,.4)}
  50%{box-shadow:0 0 0 6px rgba(122,162,255,.2)}
  100%{box-shadow:0 0 0 0 rgba(122,162,255,0)}
}

input,textarea,select{
  color:var(--text);background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;
  outline:none;
  transition: all var(--transition-fast);
}
input[type=text],input[type=search],input[type=url],input[type=number],input[type=password]{
  padding:8px 10px;height:34px;
}
input[type=date]{padding:6px 8px;min-width:150px;height:34px}
textarea{padding:8px 10px;resize:vertical;width:100%;display:block;max-height:400px;overflow-y:auto}

input:focus,textarea:focus,select:focus{
  border-color:var(--accent);
  box-shadow: 0 0 0 2px rgba(122,162,255,0.2);
  transform: translateY(-1px);
}

.title-chip{font-weight:700;border-radius:999px;background:linear-gradient(180deg, rgba(122,162,255,.15), rgba(122,162,255,.04)), var(--card);border-color:rgba(122,162,255,.35)}
.ws-title-line{gap:10px}

/* Root section layout */
.root-section{ text-align:center; margin-bottom:24px; position:relative; }
.root-header{ position:relative; margin-bottom:16px; min-height:48px; display:flex; align-items:center; justify-content:center; }
.root-header h1{ text-align:center; margin:0; padding:8px 12px; border-radius:8px; border:2px solid transparent; outline:none; max-width:70%; }
.root-header h1[contenteditable="true"]{ border-color:var(--accent); }
.root-header h1:empty:before{ content:attr(placeholder); color:var(--muted); opacity:.5; }
.root-header #wsMetaToggle{ position:absolute; right:0; top:50%; transform:translateY(-50%); }

/* Workspace description */
.desc.inline{ min-width:180px; max-width:min(680px,60vw); padding:8px 10px; border-radius:999px; color:var(--muted); max-height:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-desc{
  width:100%; max-width:600px; margin:0 auto 16px; padding:8px 10px; border-radius:8px; color:var(--muted);
  min-height:40px; max-height:120px; overflow-y:auto; border:1px dashed transparent; outline:none; line-height:1.5; text-align:center;
}
.ws-desc[contenteditable="true"]{ border-color:var(--border); background:var(--elev2); color:var(--text); }
.ws-desc:empty:before{ content:attr(placeholder); color:var(--muted); opacity:.5; }

/* Sidebar */
aside.nav{display:flex;flex-direction:column;gap:0;background:var(--bg-elev);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);height:100%;overflow:hidden}
.aside-top{padding:12px 12px 0;overflow-y:auto;flex:1;min-height:0}
.aside-bottom{margin-top:auto;padding:0 12px 12px;flex-shrink:0}
.sidebar-head{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
/* Filters burger next to search */
.filters-wrap{position:relative}
/* Circle icon, match crumb/badge aesthetic */
#filtersBtn{
  width:34px;height:34px;border-radius:999px;border:1px solid var(--border);
  background:var(--card);display:inline-flex;align-items:center;justify-content:center;
  line-height:34px; font-size:16px; z-index:31; position:relative;
}
#filtersBtn:hover{ border-color:var(--accent); }
#filtersBtn.btn-active{border-color:var(--warn);box-shadow:0 0 0 2px rgba(255,209,102,.35);animation:pulse 2s ease-in-out infinite}

/* Search (pill) */
.search{
  display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--border);border-radius:999px;
  min-height:var(--control-h,34px);padding:0 6px;overflow:hidden;min-width:0;
  transition: all var(--transition-fast);
  position: relative;
}
.search .icon,.search .shortcut{flex:0 0 auto}
.search input[type="text"],.search input[type="search"]{
  flex:1 1 auto;width:auto;min-width:0;height:calc(var(--control-h,34px) - 0px);
  line-height:calc(var(--control-h,34px) - 0px);padding:0 10px;background:transparent;color:inherit;border:0;border-radius:999px;outline:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.search:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent);
  transform: scale(1.02);
}

/* Hide original plus icon; keep node for JS (but NOT the Filters icon) */
.plus-wrap, .sidebar-head .btn-icon:not(#filtersBtn) { display:none !important; }

/* Keep plus-wrap in DOM but off-screen for JS hooks */
.plus-wrap{
  position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important;
  overflow:hidden !important; pointer-events:none !important;
}

/* Let search grow but allow neighbors (Filters) on the same row */
.sidebar-head .search{ flex:1 1 auto; min-width:0; }

/* Create actions (final: inline pill row under search) */
.create-actions{
  display:flex; flex-wrap:wrap; gap:8px; flex:1 0 100%; margin-top:4px;
}

/* Pill buttons (final) */
.create-pill{
  appearance:none; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--text);
  font-size:14px; line-height:1; cursor:pointer; 
  transition: all var(--transition-fast);
  transform: translateY(0);
}
.create-pill:hover{ 
  border-color:var(--accent); 
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(122,162,255,0.15);
}
.create-pill:focus-visible{ 
  outline:none; border-color:var(--accent); 
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent); 
}
.create-pill:active{ 
  background:var(--elev2); 
  transform: translateY(0);
  transition: all 0.1s ease;
}

.sep{height:1px;background:var(--border);margin:10px 0}
.tree{overflow-y:auto;padding-right:0}

/* Selection display */
.selection-display{
  background:var(--elev2);border:1px solid var(--border);border-radius:12px;padding:8px 12px;margin-bottom:8px;
  display:flex;flex-direction:column;gap:8px;
}
.selection-info{display:flex;justify-content:space-between;align-items:center;gap:8px}
.selection-count{font-size:13px;color:var(--text);font-weight:500}
.selection-actions{display:flex;gap:6px;flex-wrap:wrap}
.selection-actions .btn{font-size:12px;padding:4px 8px}
.node{
  display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; padding:6px 8px;
  border-radius:8px; border:1px solid transparent; position:relative; min-height:36px;
  transition: all var(--transition-fast);
  cursor: pointer;
  overflow: hidden; /* Prevent horizontal overflow */
}
.node:hover{
  background:var(--elev2);
  padding-left: 10px; /* Use padding instead of transform to avoid overflow */
}
.node.active{
  background:linear-gradient(135deg, rgba(122,162,255,.12), rgba(122,162,255,.06));
  border-color:transparent;
  padding-left: 12px;
}
.node.selected{
  background:linear-gradient(135deg, rgba(122,162,255,.15), rgba(122,162,255,.08));
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), inset 0 1px 0 rgba(255,255,255,.1);
  padding-left: 12px;
}
.node.selected.active{
  background:linear-gradient(135deg, rgba(122,162,255,.20), rgba(122,162,255,.12));
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent), inset 0 1px 0 rgba(255,255,255,.15);
  padding-left: 14px;
}
.node .twist{width:16px;text-align:center;cursor:pointer;user-select:none;font-size:13px;color:var(--muted)}
.node .label{outline:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:0}
.node.root-node .label{font-weight:700}
.badge{font-size:11px;border:1px solid var(--border);padding:3px 8px;border-radius:999px;color:var(--muted);display:inline-flex;gap:4px;align-items:center;line-height:1;font-weight:500;background:rgba(255,255,255,0.05)}

/* Row actions only on hover/active */
.node .row-actions{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  display:none;gap:6px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.node:hover .row-actions,.node.active .row-actions{
  display:flex;
  opacity: 1;
}
.node:hover .label,.node.active .label{padding-right:72px}

.meatball{
  width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--card);font-size:16px;padding:0;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.meatball:hover{
  border-color:var(--accent);
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(122,162,255,0.2);
}
.node[draggable="true"]{cursor:grab}
.node.drag-over{outline:2px dashed var(--accent);outline-offset:2px;background:rgba(122,162,255,.08)}
.node.drag-sibling{border-bottom:2px solid var(--accent)}

/* ===== Tree Lines ===== */
.node-children{position:relative;padding-left:24px}
.node-container{position:relative}
.node-container::before{content:'';position:absolute;top:0;left:0;width:1px;height:100%;background:var(--border);transform:translateX(-12px)}
.node-container::after{content:'';position:absolute;top:18px;left:0;width:12px;height:1px;background:var(--border);transform:translateX(-12px)}
.node-container.is-last::before{height:18px}
.tree > .node-container.is-root::before,.tree > .node-container.is-root::after{display:none}

/* Main */
main.main{
  background:var(--bg-elev);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
  padding:12px;min-height:280px;height:100%;display:flex;flex-direction:column;
  overflow:hidden;
  transition: all var(--transition-normal);
}
/* Single scroll surface inside main */
.main-scroll{
  flex:1;min-height:0;overflow:auto;display:block;
  scroll-behavior: smooth;
}
/* Pull the main content scrollbar to the pane edge without moving content */
.main .main-scroll{ margin-right:-12px; padding-right:12px; }
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px 0;flex-shrink:0}
.breadcrumbs{flex:1;min-width:200px}
#breadcrumb{display:flex;gap:8px;flex-wrap:wrap}
#breadcrumbSide{display:flex;gap:0;flex:1 0 100%; margin:8px 0; padding:8px 12px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--muted); background:var(--elev2); border-radius:8px; border:1px solid var(--border)}
.crumb{
  padding:2px 4px;border:none;border-radius:4px;background:transparent;color:var(--muted);
  cursor:pointer;transition: all var(--transition-fast);
}
.crumb:hover{
  color:var(--accent);background:var(--elev2);
  transform: translateY(-1px);
}
.crumb.current{
  color:var(--text);font-weight:600;background:var(--elev2);
}
.bc-sep{opacity:.6;align-self:center;margin:0 2px;color:var(--muted)}

.filters{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.filter{border:1px solid var(--border);padding:8px 14px;border-radius:999px;cursor:pointer;color:var(--muted);font-size:14px}
.filter.active{border-color:var(--accent);color:var(--text)}

/* Cards */
.cards{
  display:grid;gap:12px;grid-auto-rows:min-content;
  flex:1;min-height:0;overflow:visible;
  scrollbar-gutter:stable;
  padding-bottom:80px; /* keep last items clear of sticky footer */
}
.cards.list{grid-template-columns:1fr}

/* Markdown box */
.md-box{
  width:100%;background:var(--bg);border:1px dashed var(--border);border-radius:12px;padding:12px;
  min-height:160px;
  outline:none;overflow:visible;word-wrap:break-word;word-break:break-word;text-align:left;
}
.md-box[contenteditable="true"]{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;background:var(--elev2);border-style:solid}

/* Card */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px;
  display:grid;gap:10px;overflow:hidden;
  transition: all var(--transition-normal);
  transform: translateY(0);
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  border-color: var(--accent);
}
.card-ok{border-color:rgba(26,155,75,.6)}
.card-head{display:flex;gap:8px;align-items:center;justify-content:space-between}
.card-title{display:flex;gap:10px;align-items:center;min-width:0}
.note-title{font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12px;border:1px solid var(--border);padding:0 8px;border-radius:6px;background:var(--bg);line-height:20px;height:20px;display:inline-flex;align-items:center}
.chip .x{margin-left:6px;opacity:.8;cursor:pointer}
.updated{font-size:12px;color:var(--muted)}
.ws-stats{font-size:12px;color:var(--muted);opacity:.85;margin-top:16px}
.card-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.warn{color:var(--warn)}
.progress{
  height:6px;background:var(--elev2);border-radius:999px;overflow:hidden;border:1px solid var(--border);
  position: relative;
}
.progress>span{
  display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition: width var(--transition-normal) ease;
  position: relative;
}
.progress>span::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progressShine 2s infinite;
}
@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Detail */
.detail-wrap{display:block}
.detail-section{background:transparent;border:0;padding:0;margin-bottom:8px}
.detail-head{display:flex;align-items:center;gap:14px;margin:4px 0 8px;flex-wrap:wrap}
.detail-head .note-title{font-size:20px}
.detail-row{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 10px;align-items:center}
.detail-progress{margin-top:8px}

/* Note detail footer */
.note-detail-footer{
  display:flex;justify-content:space-between;gap:16px;margin:10px 0;font-size:13px;color:var(--muted);flex-wrap:wrap;
}
.footer-left{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.footer-right{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-left:auto;justify-content:flex-end}

/* Todos */
.todo-list{display:grid;gap:8px;max-height:400px;overflow-y:auto;scrollbar-gutter:stable;}
.todo-item{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.todo-item input[type="text"]{height:32px}
.todo-item .btn{height:32px}

/* Menus & modals */
.ws-switch{position:relative}
.kmenu{
  position:absolute; inset:auto auto auto 0; min-width:240px; background:var(--bg-elev);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px; 
  display:none; z-index:30;
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  transition: all var(--transition-fast);
  overflow: hidden;
}
.kmenu.dynamic{position:fixed;z-index:999;inset:auto}
.kmenu.open{
  display:block;
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: contextMenuSlideIn var(--transition-normal) var(--bounce);
}
@keyframes contextMenuSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-2px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.kmenu.closing{
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: all 0.15s ease;
}
.kmi{
  display:flex; gap:8px; align-items:center; padding:12px 14px; border-radius:8px; border:none; background:transparent; cursor:pointer;
  margin:2px 0; user-select:none; position:relative; overflow:hidden; 
  transition: all var(--transition-fast); 
  font-size:14px; text-align:left; width:100%;
}
.kmi.kmi-head{font-weight:600;color:var(--muted);cursor:default}
.kmi.kmi-head:hover{background:transparent}
.kmi:hover{
  background:var(--elev2);
  padding-left: 18px; /* Use padding instead of transform */
}
.kmi.danger{color:var(--danger)}
.kmi.danger:hover{
  background:rgba(255,107,107,.1);
  padding-left: 18px;
}
.kmi.hold::after{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--danger),transparent);
  opacity:.18;transform:scaleX(var(--hold,0));transform-origin:left;
  transition: transform 0.1s ease;
}

/* Modals */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center;padding:16px;z-index:40;
  opacity: 0;
  transition: opacity var(--transition-normal);
  backdrop-filter: blur(4px);
}
.modal.open{
  display:flex;
  opacity: 1;
  animation: modalBackdropFadeIn var(--transition-normal) ease;
}
@keyframes modalBackdropFadeIn {
  0% { 
    opacity: 0; 
    backdrop-filter: blur(0px);
  }
  100% { 
    opacity: 1; 
    backdrop-filter: blur(4px);
  }
}
.modal-card{
  background:var(--bg-elev);border:1px solid var(--border);border-radius:16px;padding:16px;
  box-shadow:var(--shadow);width:min(800px,94vw);max-height:88vh;overflow:auto;display:grid;gap:12px;
  transform: scale(0.9) translateY(20px);
  transition: all var(--transition-normal);
  position: relative;
  opacity: 0;
}
.modal.open .modal-card{
  transform: scale(1) translateY(0);
  opacity: 1;
  animation: modalCardSlideIn var(--transition-normal) var(--bounce);
}
@keyframes modalCardSlideIn {
  0% {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
  }
  50% {
    transform: scale(1.02) translateY(-2px);
    opacity: 0.9;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.modal.closing{
  opacity: 0;
  backdrop-filter: blur(0px);
  transition: all 0.2s ease;
}
.modal.closing .modal-card{
  transform: scale(0.95) translateY(10px);
  opacity: 0;
  transition: all 0.2s ease;
}

/* Confirm delete slide */
.confirm-delete{transition:all .3s ease}

/* Footer */
.main-footer{
  position:sticky; bottom:0; z-index:5;
  background:var(--bg-elev);
  padding-top:14px; margin-top:12px;
  flex-shrink:0;
  border-top:1px solid var(--border) !important;
}
.main-footer hr{
  display:none !important;
}
.side-footer{border-top:1px solid var(--border);padding-top:10px}
.linkish{text-decoration:underline dotted}
.tiny{font-size:.86em}

/* Settings */
.prefs-grid{display:grid;gap:8px}
.badge-on{color:var(--ok);font-weight:600;background:rgba(121,214,134,0.1);border-color:rgba(121,214,134,0.3)}
.badge-hidden{color:#b794f4;font-weight:600;font-size:12px;background:rgba(183,148,244,0.1);border-color:rgba(183,148,244,0.3)}
.badge-synced{color:var(--ok);font-weight:600;font-size:12px;background:rgba(121,214,134,0.1);border-color:rgba(121,214,134,0.3)}
.badge-unsynced{color:var(--warn);font-weight:600;font-size:12px;background:rgba(255,193,7,0.1);border-color:rgba(255,193,7,0.3)}
.badge-empty{color:#ff9800;font-weight:600;font-size:12px;background:rgba(255,152,0,0.1);border-color:rgba(255,152,0,0.3)}
.badge-conflict{color:#ff5252;font-weight:600;font-size:12px;background:rgba(255,82,82,0.1);border-color:rgba(255,82,82,0.3)}
.badge-local-changes{color:#7aa2ff;font-weight:600;font-size:12px;background:rgba(122,162,255,0.1);border-color:rgba(122,162,255,0.3)}
.badge-remote-changes{color:#9c27b0;font-weight:600;font-size:12px;background:rgba(156,39,176,0.1);border-color:rgba(156,39,176,0.3)}
.badge-unknown{color:var(--text-muted);font-weight:600;font-size:12px;background:rgba(154,165,180,0.1);border-color:rgba(154,165,180,0.3)}
.badge-server-only{color:#1976d2;font-weight:600;font-size:12px;background:rgba(25,118,210,0.1);border-color:rgba(25,118,210,0.3)}
.badge-syncing{color:var(--accent);font-weight:600;font-size:12px;background:rgba(122,162,255,0.1);border-color:rgba(122,162,255,0.3);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}

.sect-title{margin:6px 0}
.panel{margin-top:10px;border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--card)}
.spacer-lg{height:18px}
.spacer-md{height:12px}
.btn.confirm{background:var(--danger);color:white}

/* Workspace UI improvements */
.workspace-info{flex:1;min-width:0}
.workspace-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.workspace-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)}
.workspace-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Empty state */
.empty-state{
  text-align:center;padding:40px 20px;
  background:linear-gradient(135deg, rgba(122,162,255,.06), rgba(255,134,200,.04));
  border:2px dashed var(--border);border-radius:16px;margin:8px 0;
  animation: emptyStateFadeIn 0.6s ease;
}
@keyframes emptyStateFadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.empty-state-title{font-size:18px;color:var(--muted);margin-bottom:16px}
.empty-state .btn{padding:10px 20px;font-size:14px}

/* Folder detail */
.folder-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;margin-top:4px}
.folder-detail-head .note-title{font-size:22px;padding:4px 8px;margin:-4px -8px;border-radius:8px;border:2px solid transparent}
.folder-detail-head .note-title[contenteditable="true"]{border-color:var(--accent)}
.edit-pen{cursor:pointer;opacity:.6;font-size:18px}
.edit-pen:hover{opacity:1;color:var(--accent)}
.folder-icn{font-size:18px;color:var(--accent);font-weight:bold}
.star{
  cursor:pointer;font-size:18px;opacity:.8;
  transition: all var(--transition-fast);
  transform: scale(1);
}
.star:hover{
  opacity:1;
  transform: scale(1.2);
}
.star.starred{
  color: var(--warn);
  animation: starTwinkle 0.6s ease;
}
@keyframes starTwinkle {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Hidden */
.hidden{display:none!important}

/* Loading states */
.loading-skeleton {
  background: linear-gradient(90deg, var(--elev2) 25%, var(--border) 50%, var(--elev2) 75%);
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  border-radius: 8px;
}
@keyframes skeletonLoading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.loading-pulse {
  animation: loadingPulse 1.5s ease-in-out infinite;
}
@keyframes loadingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Hold-to-delete animation */
.holddel{position:relative;overflow:hidden}
.holddel.hold::after{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--danger),transparent);
  opacity:.25;transform:scaleX(var(--hold,0));transform-origin:left;transition:transform .1s ease;
}

/* MD View styling */
.md-view{max-height:120px;overflow:hidden;position:relative;font-size:13px;color:var(--muted);line-height:1.6}
.md-view.empty{text-align:center;padding:20px;opacity:.5}
.md-view h1,.md-view h2,.md-view h3,.md-view h4,.md-view h5,.md-view h6{margin:8px 0 4px;font-size:inherit;font-weight:600;color:var(--text)}
.md-view p{margin:4px 0;line-height:1.6}
.md-view ul{margin:4px 0;padding-left:20px}
.md-view ol{margin:4px 0;padding-left:20px}
.md-view pre{background:var(--elev2);padding:8px;border-radius:6px;overflow-x:auto;margin:8px 0}
.md-view code{background:var(--elev2);padding:2px 4px;border-radius:3px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.md-view pre code{background:transparent;padding:0}
.md-view a{color:var(--accent);text-decoration:underline}
.md-view img{max-width:100%;height:auto;border-radius:6px;margin:8px 0}

/* Task lists */
.md-view .task-list,.md-box .task-list{list-style:none;padding-left:0;margin:8px 0}
.md-view .task-list li,.md-box .task-list li{display:flex;align-items:center;gap:8px;margin:4px 0}
.md-view .task-list input[type="checkbox"],.md-box .task-list input[type="checkbox"]{margin:0;flex-shrink:0}

/* Tables */
.md-view .md-table,.md-box .md-table{border-collapse:collapse;width:100%;margin:12px 0;font-size:13px}
.md-view .md-table th,.md-view .md-table td,.md-box .md-table th,.md-box .md-table td{border:1px solid var(--border);padding:8px 12px;text-align:left}
.md-view .md-table th,.md-box .md-table th{background:var(--elev2);font-weight:600}
.md-view .md-table tr:hover,.md-box .md-table tr:hover{background:var(--elev2)}

/* Strikethrough */
.md-view del,.md-box del{opacity:.6;text-decoration:line-through}

/* Blockquote */
.md-view blockquote,.md-box blockquote{border-left:3px solid var(--accent);padding-left:12px;margin:8px 0;color:var(--muted);font-style:italic}

/* Horizontal rule */
.md-view hr,.md-box hr{border:none;border-top:1px solid var(--border);margin:16px 0}

/* --- Markdown extras --- */
.md-view .admonition { border:1px solid var(--border); border-left-width:4px; border-radius:10px; padding:10px 12px; background:var(--card); margin:10px 0; }
.md-view .admonition .admonition-title { font-weight:700; margin:0 0 6px; text-transform:uppercase; font-size:12px; letter-spacing:.02em; opacity:.8; }
.md-view .admonition.note    { border-left-color: var(--accent); }
.md-view .admonition.tip     { border-left-color: var(--ok); }
.md-view .admonition.info    { border-left-color: var(--accent2); }
.md-view .admonition.warning { border-left-color: var(--warn); }

.md-view .footnotes { font-size: 13px; color: var(--muted); }
.md-view .footnotes ol { padding-left: 20px; }
.md-view .footnote-ref a { text-decoration: none; }

.md-view .math-block { background: var(--elev2); border-radius: 6px; padding: 8px; overflow-x: auto; }

.md-view .toc { border:1px dashed var(--border); border-radius:10px; padding:8px 12px; margin:10px 0; }
.md-view .toc ul { margin: 6px 0; padding-left: 18px; }
.md-view .toc a { color: var(--accent); text-decoration: underline; }

/* Make markdown preview look like content with card background */
.md-box[data-mode="view"],
.md-box[data-mode="preview"]{
  background:var(--card);
  border:1px solid var(--border);
  border-style:solid;
  padding-top:8px;
}

/* Remove top margin from first element in preview */
.md-box[data-mode="view"] > :first-child,
.md-box[data-mode="preview"] > :first-child {
  margin-top:0;
}

/* Preview wrap and "N more lines" indicator - LEFT ALIGNED */
.md-preview-wrap {
  position: relative;
}

.md-more-lines {
  padding: 4px 0 0;
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* ===== Custom Scrollbars (accessible, subtle) ===== */
/* Design goals: slim by default, slightly larger on hover; rounded thumb; low-contrast track. */
/* Applies to all main scrollable areas without changing markup. */

/* Tokens */
:root{
  --sb-size: 12px;                 /* base thickness */
  --sb-size-hover: 14px;           /* on hover */
  --sb-track: color-mix(in oklab, var(--border) 55%, transparent);
  --sb-thumb: color-mix(in oklab, var(--accent) 55%, var(--border));
  --sb-thumb-hover: color-mix(in oklab, var(--accent) 70%, var(--border));
  --sb-thumb-active: color-mix(in oklab, var(--accent) 85%, var(--border));
}
:root.light{
  --sb-track: color-mix(in oklab, var(--border) 60%, transparent);
  --sb-thumb: color-mix(in oklab, var(--accent) 55%, var(--border));
  --sb-thumb-hover: color-mix(in oklab, var(--accent) 70%, var(--border));
  --sb-thumb-active: color-mix(in oklab, var(--accent) 85%, var(--border));
}

/* Targets: page and key scroll containers */
:where(html, body, .aside-top, .tree, .main-scroll, .todo-list, .md-view, .md-view pre, textarea, .modal-card){
  /* Firefox */
  scrollbar-width: thin; /* "auto" height/width but visually thin */
  scrollbar-color: var(--sb-thumb) transparent; /* transparent track; we draw track in WebKit */
  /* Keep layout stable where it matters */
  scrollbar-gutter: stable;
}

/* WebKit-based browsers */
:where(html, body, .aside-top, .tree, .main-scroll, .todo-list, .md-view, .md-view pre, textarea, .modal-card)::-webkit-scrollbar{
  width: var(--sb-size);
  height: var(--sb-size);
}

:where(html, body, .aside-top, .tree, .main-scroll, .todo-list, .md-view, .md-view pre, textarea, .modal-card)::-webkit-scrollbar-track{
  background: transparent; /* unobtrusive */
}

/* Create a floating, rounded thumb that does not touch track edges */
:where(html, body, .aside-top, .tree, .main-scroll, .todo-list, .md-view, .md-view pre, textarea, .modal-card)::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 4px solid transparent;      /* inner rounding/gap */
  background-clip: content-box;        /* keep the pill slim */
}

/* Hover states on the container make the thumb a tad larger/brighter */
:where(html, body, .aside-top, .tree, .main-scroll, .todo-list, .md-view, .md-view pre, textarea, .modal-card):hover::-webkit-scrollbar{
  width: var(--sb-size-hover);
  height: var(--sb-size-hover);
}
:where(html, body, .aside-top, .tree, .main-scroll, .todo-list, .md-view, .md-view pre, textarea, .modal-card):hover::-webkit-scrollbar-thumb{
  background: var(--sb-thumb-hover);
  border-width: 3px; /* slightly thicker */
}

/* Active drag state */
:where(html, body, .aside-top, .tree, .main-scroll, .todo-list, .md-view, .md-view pre, textarea, .modal-card)::-webkit-scrollbar-thumb:active{
  background: var(--sb-thumb-active);
}

/* Corner when both axes scroll */
:where(html, body, .aside-top, .tree, .main-scroll, .todo-list, .md-view, .md-view pre, textarea, .modal-card)::-webkit-scrollbar-corner{
  background: transparent;
}

/* Utility: apply to any custom scroll area developer adds later */
.nice-scroll{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}
.nice-scroll::-webkit-scrollbar{ width: var(--sb-size); height: var(--sb-size); }
.nice-scroll::-webkit-scrollbar-track{ background: transparent; }
.nice-scroll::-webkit-scrollbar-thumb{ background: var(--sb-thumb); border-radius:999px; border:4px solid transparent; background-clip:content-box; }
.nice-scroll:hover::-webkit-scrollbar{ width: var(--sb-size-hover); height: var(--sb-size-hover); }
.nice-scroll:hover::-webkit-scrollbar-thumb{ background: var(--sb-thumb-hover); border-width:3px; }
.nice-scroll::-webkit-scrollbar-thumb:active{ background: var(--sb-thumb-active); }

/* (Removed) In-Content Scroll Map: caused double rails. Keeping native-only. */
/* Add these to your main styles.css (not admin/styles.css) */

/* Connection indicator in header */
.connection-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
  font-size: 14px;
  color: #666;
}

.sync-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.sync-indicator.connected {
  background-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

.sync-indicator.disconnected {
  background-color: #f44336;
  box-shadow: 0 0 5px rgba(244, 67, 54, 0.5);
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.connection-count {
  font-size: 12px;
  color: #666;
  padding: 2px 8px;
  background: rgba(0,0,0,0.05);
  border-radius: 12px;
}

/* Workspace sync badges */
.badge-synced {
  background-color: #4CAF50;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}

.badge-syncing {
  background-color: #2196F3;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  animation: pulse 1s infinite;
}

.badge-unsynced {
  background-color: #FF9800;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}

.badge-hidden {
  background-color: #9E9E9E;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}

/* Modal fixes */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-content {
  background: #1e1e1e;
  padding: 30px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.modal-close:hover {
  color: #fff;
}

/* Hide any debug output */
.debug-output,
.console-output {
  display: none !important;
}