@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===== Global theme ===== */
:root{
  --bg-1: #0b1020;
  --bg-2: #071229;
  --glass-1: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.04);
  --accent-1: #7c5cff;
  --accent-2: #22d3ee;
}

/* disable text selection for dashboard UI */
* { user-select: none; -webkit-user-select: none; -moz-user-select: none; }

/* body */
html,body,#root{height:100%}
body {
  @apply antialiased;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(124,92,255,0.12), transparent 6%),
              radial-gradient(900px 500px at 90% 90%, rgba(34,211,238,0.06), transparent 6%),
              linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: #e6eef8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* glass panel helper */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border-radius: 14px;
}

/* layout helpers */
.app-shell { display: grid; grid-template-columns: 76px 1fr 340px; min-height:100vh; gap:24px; }
@media (max-width:1024px){ .app-shell { grid-template-columns: 64px 1fr; } .right-dock{display:none} }

/* floating topbar */
.topbar {
  position: sticky; top: 18px; z-index: 40;
  margin: 0 28px;
  padding: 12px 18px;
  border-radius: 12px;
}

/* side menu icon button */
.side-btn { width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:12px; }

/* tool card visual */
.tool-card {
  border-radius: 14px;
  padding: 18px;
  transition: transform .28s cubic-bezier(.2,.9,.4,1), box-shadow .28s;
  box-shadow: 0 6px 18px rgba(2,6,23,0.45);
}

/* lock overlay */
.lock-overlay{
  position:absolute; inset:0; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(2,6,23,0.0), rgba(2,6,23,0.45));
}

/* decorative spotlight (mouse follow) */
.spotlight {
  position: fixed; pointer-events: none; inset:0; z-index:5;
  mix-blend-mode: screen;
}

/* animated subtle grid background */
.grid-decor {
  position: absolute; inset:0; background-image:
   linear-gradient(transparent 95%, rgba(255,255,255,0.02) 95%),
   linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.02) 95%);
  background-size: 160px 160px, 160px 160px;
  opacity: 0.06; transform: translateZ(0);
}