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

:root {
  --bg-primary: #0a0a0c;
  --bg-secondary: #111114;
  --bg-tertiary: #18181c;
  --bg-card: #16161a;
  --bg-card-hover: #1c1c21;
  --border-color: #2a2a30;
  --border-subtle: #1f1f25;
  --text-primary: #e8e8ec;
  --text-secondary: #9898a4;
  --text-tertiary: #68687a;
  --accent: #6c5ce7;
  --accent-glow: rgba(108,92,231,0.15);
  --accent-hover: #7c6ef7;
  --green: #00cec9;
  --orange: #e17055;
  --pink: #fd79a8;
  --yellow: #ffeaa7;
  --blue: #74b9ff;
  --grid-dot: rgba(255,255,255,0.035);
  --sidebar-width: 240px;
  --topbar-height: 48px;
  --card-radius: 12px;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.3), 0 0 0 1px var(--border-subtle);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--border-color);
  --shadow-card-drag: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px var(--accent);
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* Light theme */
.theme-light {
  --bg-primary: #f5f5f7;
  --bg-secondary: #eeeef0;
  --bg-tertiary: #e5e5e9;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --border-color: #d5d5dc;
  --border-subtle: #e0e0e6;
  --text-primary: #1a1a1f;
  --text-secondary: #6b6b7a;
  --text-tertiary: #9898a4;
  --grid-dot: rgba(0,0,0,0.05);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px var(--border-subtle);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px var(--border-color);
  --shadow-card-drag: 0 16px 48px rgba(0,0,0,0.15), 0 0 0 1px var(--accent);
}

html,body {
  height:100%;
  overflow:hidden;
  font-family:var(--font-body);
  background:var(--bg-primary);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
}

/* ═══════ SIDEBAR ═══════ */
.sidebar {
  position:fixed;
  left:0;top:0;bottom:0;
  width:var(--sidebar-width);
  background:var(--bg-secondary);
  border-right:1px solid var(--border-subtle);
  z-index:100;
  display:flex;
  flex-direction:column;
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.sidebar.collapsed { transform:translateX(calc(-1 * var(--sidebar-width))); }

.sidebar-brand {
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--border-subtle);
}
.sidebar-brand .logo {
  width:28px;height:28px;
  background:linear-gradient(135deg,var(--accent),var(--pink));
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:#fff;
}
.sidebar-brand span { font-weight:600;font-size:15px;letter-spacing:-0.3px; }

.sidebar-section {
  padding:12px 12px 4px;
}
.sidebar-section-title {
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--text-tertiary);padding:0 8px 8px;
}

.grid-list { list-style:none;flex:1;overflow-y:auto;padding:0 12px; }
.grid-item {
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:8px;cursor:pointer;
  font-size:13.5px;color:var(--text-secondary);
  transition:all var(--transition);
  margin-bottom:2px;
  position:relative;
}
.grid-item:hover { background:var(--bg-tertiary);color:var(--text-primary); }
.grid-item.active { background:var(--accent-glow);color:var(--accent-hover);font-weight:500; }
.grid-item .dot {
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.grid-item .grid-name { flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.grid-item .card-count {
  font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);
}

.sidebar-bottom {
  padding:12px;border-top:1px solid var(--border-subtle);
}
.sidebar-btn {
  display:flex;align-items:center;gap:8px;
  width:100%;padding:8px 12px;border:none;border-radius:8px;
  background:transparent;color:var(--text-secondary);cursor:pointer;
  font-size:13px;font-family:var(--font-body);
  transition:all var(--transition);
}
.sidebar-btn:hover { background:var(--bg-tertiary);color:var(--text-primary); }
.sidebar-btn svg { width:16px;height:16px;opacity:0.6; }

.add-grid-btn {
  background:var(--accent);color:#fff !important;
  font-weight:500;justify-content:center;
  margin-bottom:6px;
}
.add-grid-btn:hover { background:var(--accent-hover);color:#fff !important; }

/* ═══════ TOPBAR ═══════ */
.topbar {
  position:fixed;
  top:0;left:var(--sidebar-width);right:0;
  height:var(--topbar-height);
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border-subtle);
  display:flex;align-items:center;
  padding:0 16px;z-index:90;
  transition:left 0.3s cubic-bezier(0.4,0,0.2,1);
  gap:8px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.sidebar.collapsed ~ .topbar { left:0; }

.toggle-sidebar-btn {
  width:32px;height:32px;border:none;border-radius:6px;
  background:transparent;color:var(--text-secondary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);
}
.toggle-sidebar-btn:hover { background:var(--bg-tertiary);color:var(--text-primary); }

.topbar-title {
  font-size:14px;font-weight:500;color:var(--text-primary);
  flex:1;padding-left:4px;
}

.topbar-actions { display:flex;gap:4px;align-items:center; }

.topbar-btn {
  height:32px;padding:0 10px;border:1px solid var(--border-color);border-radius:8px;
  background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;
  font-size:12px;font-family:var(--font-body);font-weight:500;
  display:flex;align-items:center;gap:5px;
  transition:all var(--transition);
}
.topbar-btn:hover { background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--text-tertiary); }
.topbar-btn svg { width:14px;height:14px; }

.topbar-btn.accent {
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.topbar-btn.accent:hover { background:var(--accent-hover);border-color:var(--accent-hover); }

.zoom-control {
  display:flex;align-items:center;gap:2px;
  font-size:11px;font-family:var(--font-mono);color:var(--text-tertiary);
}
.zoom-btn {
  width:28px;height:28px;border:none;border-radius:6px;
  background:transparent;color:var(--text-secondary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:all var(--transition);
}
.zoom-btn:hover { background:var(--bg-tertiary);color:var(--text-primary); }

/* ═══════ CANVAS ═══════ */
.canvas-wrapper {
  position:fixed;
  top:var(--topbar-height);
  left:var(--sidebar-width);
  right:0;bottom:0;
  overflow:hidden;
  background:var(--bg-primary);
  transition:left 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor:grab;
}
.sidebar.collapsed ~ .canvas-wrapper { left:0; }

.canvas {
  position:absolute;
  width:10000px;height:10000px;
  background-image:radial-gradient(circle,var(--grid-dot) 1px,transparent 1px);
  background-size:32px 32px;
  transform-origin:0 0;
}

/* ═══════ CARDS ═══════ */
.card {
  position:absolute;
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow-card);
  min-width:180px;min-height:120px;
  cursor:default;
  transition:box-shadow 0.25s ease;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.card:hover { box-shadow:var(--shadow-card-hover); }
.card.dragging {
  box-shadow:var(--shadow-card-drag);
  opacity:0.95;z-index:999 !important;
  cursor:grabbing;
}

.card-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 6px;
  cursor:grab;
  flex-shrink:0;
}
.card-header:active { cursor:grabbing; }

.card-type-badge {
  font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:1px;
  padding:3px 7px;border-radius:4px;
  background:var(--bg-tertiary);color:var(--text-tertiary);
}
.card-type-badge.ai { background:rgba(108,92,231,0.15);color:var(--accent); }
.card-type-badge.web { background:rgba(0,206,201,0.12);color:var(--green); }
.card-type-badge.link { background:rgba(116,185,255,0.12);color:var(--blue); }

.card-actions {
  display:flex;gap:2px;opacity:0;
  transition:opacity var(--transition);
}
.card:hover .card-actions { opacity:1; }

.card-action-btn {
  width:24px;height:24px;border:none;border-radius:5px;
  background:transparent;color:var(--text-tertiary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);font-size:13px;
}
.card-action-btn:hover { background:var(--bg-tertiary);color:var(--text-primary); }
.card-action-btn.delete:hover { color:#e74c3c; }

.card-body {
  flex:1;padding:4px 14px 14px;overflow-y:auto;
  font-size:13.5px;line-height:1.65;color:var(--text-secondary);
}
.card-body::-webkit-scrollbar { width:4px; }
.card-body::-webkit-scrollbar-thumb { background:var(--border-color);border-radius:2px; }

.card-body .card-title {
  font-size:15px;font-weight:600;color:var(--text-primary);
  margin-bottom:6px;outline:none;
}
.card-body .card-content {
  outline:none;white-space:pre-wrap;word-break:break-word;
}
.card-body .card-content:empty::before {
  content:'Start typing...';color:var(--text-tertiary);
}

/* Resize handle */
.card-resize {
  position:absolute;bottom:0;right:0;
  width:20px;height:20px;cursor:nwse-resize;
  opacity:0;transition:opacity var(--transition);
}
.card:hover .card-resize { opacity:1; }
.card-resize::after {
  content:'';position:absolute;bottom:4px;right:4px;
  width:8px;height:8px;
  border-right:2px solid var(--text-tertiary);
  border-bottom:2px solid var(--text-tertiary);
  border-radius:0 0 2px 0;
}

/* AI Card specific */
.ai-response {
  background:var(--bg-tertiary);border-radius:8px;
  padding:10px 12px;margin-top:8px;
  font-size:13px;line-height:1.6;color:var(--text-secondary);
  border:1px solid var(--border-subtle);
}
.ai-prompt {
  width:100%;padding:8px 10px;border:1px solid var(--border-color);
  border-radius:8px;background:var(--bg-tertiary);
  color:var(--text-primary);font-family:var(--font-body);font-size:12.5px;
  resize:none;outline:none;
  margin-top:8px;
}
.ai-prompt::placeholder { color:var(--text-tertiary); }
.ai-prompt:focus { border-color:var(--accent); }

.ai-provider {
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;color:var(--text-tertiary);font-weight:500;
  margin-top:6px;
}
.ai-provider .provider-dot {
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}

/* Website card */
.web-url {
  font-family:var(--font-mono);font-size:11px;color:var(--green);
  opacity:0.7;margin-bottom:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.web-preview {
  background:var(--bg-tertiary);border-radius:8px;
  padding:10px 12px;font-size:12.5px;line-height:1.5;
  color:var(--text-secondary);border:1px solid var(--border-subtle);
}

/* Grid link card */
.grid-link-target {
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:8px;
  background:var(--bg-tertiary);border:1px solid var(--border-subtle);
  cursor:pointer;transition:all var(--transition);
  margin-top:4px;
}
.grid-link-target:hover { background:var(--bg-card-hover);border-color:var(--accent); }
.grid-link-target .link-arrow {
  font-size:16px;color:var(--blue);
}
.grid-link-target span {
  font-size:13px;color:var(--text-primary);font-weight:500;
}

/* ═══════ ADD CARD MENU ═══════ */
.add-card-menu {
  position:fixed;
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
  padding:6px;
  z-index:200;
  min-width:200px;
  display:none;
}
.add-card-menu.visible { display:block;animation:menuIn 0.15s ease; }

@keyframes menuIn {
  from { opacity:0;transform:translateY(-4px);scale:0.96; }
  to { opacity:1;transform:translateY(0);scale:1; }
}

.menu-item {
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:8px;cursor:pointer;
  font-size:13px;color:var(--text-secondary);
  transition:all var(--transition);
}
.menu-item:hover { background:var(--bg-tertiary);color:var(--text-primary); }
.menu-item .menu-icon {
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.menu-item .menu-icon.note { background:rgba(255,234,167,0.12);color:var(--yellow); }
.menu-item .menu-icon.ai { background:rgba(108,92,231,0.15);color:var(--accent); }
.menu-item .menu-icon.web { background:rgba(0,206,201,0.12);color:var(--green); }
.menu-item .menu-icon.link { background:rgba(116,185,255,0.12);color:var(--blue); }

/* ═══════ SETTINGS MODAL ═══════ */
.modal-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,0.5);
  z-index:300;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.modal-overlay.visible { display:flex;animation:fadeIn 0.2s ease; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.modal {
  background:var(--bg-secondary);border:1px solid var(--border-color);
  border-radius:16px;width:90%;max-width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  animation:modalIn 0.25s ease;
}
@keyframes modalIn {
  from { opacity:0;transform:translateY(12px)scale(0.97); }
  to { opacity:1;transform:translateY(0)scale(1); }
}
.modal-header {
  padding:20px 24px 12px;display:flex;align-items:center;justify-content:space-between;
}
.modal-header h3 { font-size:16px;font-weight:600; }
.modal-close {
  width:28px;height:28px;border:none;border-radius:6px;
  background:transparent;color:var(--text-tertiary);cursor:pointer;
  font-size:18px;display:flex;align-items:center;justify-content:center;
}
.modal-close:hover { background:var(--bg-tertiary);color:var(--text-primary); }

.modal-body { padding:8px 24px 24px; }
.setting-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--border-subtle);
}
.setting-row:last-child { border-bottom:none; }
.setting-label { font-size:13.5px;color:var(--text-secondary); }

/* Toggle switch */
.toggle {
  width:40px;height:22px;border-radius:11px;
  background:var(--bg-tertiary);border:1px solid var(--border-color);
  cursor:pointer;position:relative;transition:all var(--transition);
}
.toggle.on { background:var(--accent);border-color:var(--accent); }
.toggle::after {
  content:'';position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform var(--transition);
}
.toggle.on::after { transform:translateX(18px); }

/* Theme selector */
.theme-options { display:flex;gap:8px; }
.theme-opt {
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  border:2px solid transparent;transition:all var(--transition);
  display:flex;align-items:center;justify-content:center;
}
.theme-opt:hover { border-color:var(--text-tertiary); }
.theme-opt.active { border-color:var(--accent); }
.theme-opt.dark-t { background:#0a0a0c; }
.theme-opt.light-t { background:#f5f5f7; }

/* ═══════ MOBILE ═══════ */
.mobile-fab {
  display:none;
  position:fixed;bottom:24px;right:24px;
  width:56px;height:56px;border-radius:16px;
  background:var(--accent);color:#fff;
  border:none;cursor:pointer;z-index:90;
  box-shadow:0 4px 20px rgba(108,92,231,0.4);
  font-size:24px;
  align-items:center;justify-content:center;
  transition:all var(--transition);
}
.mobile-fab:hover { background:var(--accent-hover);transform:scale(1.05); }

.mobile-bottom-bar {
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:56px;background:var(--bg-secondary);
  border-top:1px solid var(--border-subtle);
  z-index:95;align-items:center;justify-content:space-around;
  padding:0 8px;
}
.mobile-tab {
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:none;background:transparent;color:var(--text-tertiary);
  cursor:pointer;font-size:10px;font-family:var(--font-body);
  padding:6px 12px;border-radius:8px;
  transition:all var(--transition);
}
.mobile-tab.active { color:var(--accent); }
.mobile-tab svg { width:20px;height:20px; }

/* Empty state */
.empty-state {
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;
  opacity:0.4;
}
.empty-state .empty-icon { font-size:48px;margin-bottom:12px; }
.empty-state p { font-size:14px;color:var(--text-tertiary);line-height:1.6; }
.empty-state .shortcut {
  display:inline-block;margin-top:8px;
  font-family:var(--font-mono);font-size:11px;
  background:var(--bg-tertiary);padding:4px 8px;border-radius:5px;
  color:var(--text-tertiary);border:1px solid var(--border-subtle);
}

/* ═══════ MINIMAP ═══════ */
.minimap {
  position:fixed;bottom:16px;right:16px;
  width:140px;height:90px;
  background:var(--bg-secondary);border:1px solid var(--border-color);
  border-radius:8px;z-index:80;overflow:hidden;
  opacity:0.7;transition:opacity var(--transition);
}
.minimap:hover { opacity:1; }
.minimap-viewport {
  position:absolute;border:1.5px solid var(--accent);
  border-radius:2px;pointer-events:none;
  background:rgba(108,92,231,0.06);
}
.minimap-card {
  position:absolute;background:var(--accent);
  opacity:0.3;border-radius:1px;
}

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:768px) {
  :root { --sidebar-width:0px; }
  .sidebar {
    width:280px;
    transform:translateX(-280px);
    z-index:200;
  }
  .sidebar.open { transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,0.5); }
  .sidebar.collapsed { transform:translateX(-280px); }
  .topbar { left:0; }
  .canvas-wrapper { left:0; }
  .mobile-fab { display:flex; }
  .mobile-bottom-bar { display:flex; }
  .canvas-wrapper { bottom:56px; }
  .minimap { display:none; }
  .topbar-btn .btn-text { display:none; }
  .topbar-btn { padding:0 8px; }
  .zoom-control { display:none; }
}

@media(min-width:769px) {
  .sidebar { transform:translateX(0); }
}

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-color);border-radius:3px; }

/* Selection */
::selection { background:var(--accent);color:#fff; }