@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&family=Instrument+Serif:ital@0;1&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* ── Light ── */

:root {
  color-scheme: light;
  --bg: #e8e3dc;
  --bg-elevated: rgba(255,255,255,0.5);
  --bg-subtle: rgba(255,255,255,0.25);
  --border: rgba(0, 0, 0, 0.06);
  --border-hover: rgba(0, 0, 0, 0.12);
  --text-1: #171717;
  --text-2: #444444;
  --text-3: #666666;
  --accent: #FF9500;
  --accent-hover: #E68600;
  --accent-subtle: rgba(255, 149, 0, 0.06);
  --success: #00A870;
  --danger: #E5484D;
  --card-glass-bg: rgba(255,255,255,0.35);
  --card-glass-border: rgba(255,255,255,0.5);
  --card-glass-border-hover: rgba(255,255,255,0.7);
  --card-glass-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.7);
  --card-glass-shadow-hover: 0 8px 32px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.45);
  --glass-shadow: 0 0 0 0.5px rgba(0,0,0,0.06), 0 8px 40px rgba(0,0,0,0.1), inset 0 0.5px 0 rgba(255,255,255,0.5);
}

/* ── Dark ── */

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090b;
  --bg-elevated: rgba(255,255,255,0.06);
  --bg-subtle: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.12);
  --text-1: rgba(255,255,255,0.9);
  --text-2: rgba(255,255,255,0.7);
  --text-3: rgba(255,255,255,0.45);
  --accent: #FF9500;
  --accent-hover: #FFB733;
  --accent-subtle: rgba(255,149,0,0.06);
  --success: #34d399;
  --danger: #f87171;
  --card-glass-bg: rgba(255,255,255,0.04);
  --card-glass-border: rgba(255,255,255,0.08);
  --card-glass-border-hover: rgba(255,255,255,0.14);
  --card-glass-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15), inset 0 0.5px 0 rgba(255,255,255,0.06);
  --card-glass-shadow-hover: 0 8px 32px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2), inset 0 0.5px 0 rgba(255,255,255,0.1);
  --glass-bg: rgba(20,20,20,0.78);
  --glass-border: rgba(255,255,255,0.08);
  --glass-shadow: 0 0 0 0.5px rgba(0,0,0,0.3), 0 8px 40px rgba(0,0,0,0.4), inset 0 0.5px 0 rgba(255,255,255,0.04);
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background .3s, color .3s;
}

h1,h2,h3,h4 { font-family: 'Space Grotesk', sans-serif; }

/* ── Card (glass-aware) ── */

.card {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: var(--card-glass-bg);
  border: 1px solid var(--card-glass-border);
  border-radius: 12px;
  padding: 3px;
  box-shadow:
    var(--card-glass-shadow),
    inset 2px 2px 1px 0 rgba(255,255,255,0.08),
    inset -1px -1px 1px 1px rgba(255,255,255,0.04);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.card:hover {
  border-color: var(--card-glass-border-hover);
  border-radius: 16px;
  padding: 6px;
  box-shadow:
    var(--card-glass-shadow-hover),
    inset 2px 2px 1px 0 rgba(255,255,255,0.12),
    inset -1px -1px 1px 1px rgba(255,255,255,0.06);
}

[data-theme="light"] .card {
  box-shadow:
    var(--card-glass-shadow),
    inset 2px 2px 1px 0 rgba(255,255,255,0.25),
    inset -1px -1px 1px 1px rgba(255,255,255,0.15);
}

[data-theme="light"] .card:hover {
  box-shadow:
    var(--card-glass-shadow-hover),
    inset 2px 2px 1px 0 rgba(255,255,255,0.35),
    inset -1px -1px 1px 1px rgba(255,255,255,0.2);
}

/* ── Glass (Apple Spotlight style) ── */

.glass {
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
}

/* ── Button ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s ease;
  width: 100%;
}

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

.btn-accent:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn-accent:active:not(:disabled) { transform: scale(0.98); }

.btn-accent:disabled { opacity: 0.25; cursor: not-allowed; }

/* ── Progress ── */

.progress-track { height: 4px; border-radius: 2px; background: rgba(0,0,0,0.08); overflow: hidden; }

[data-theme="dark"] .progress-track { background: rgba(255,255,255,0.25); }

.progress-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 1s cubic-bezier(.16,1,.3,1); }

/* ── Theme toggle ── */

.theme-toggle {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text-2); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all .15s;
}

.theme-toggle:hover { border-color: var(--border-hover); color: var(--text-1); }

/* ── Gradient mesh animation ── */

.admin-gradient-mesh {
  overflow: hidden;
  pointer-events: none;
}

.gradient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.gradient-blob-1 {
  width: 55%;
  height: 50%;
  top: -5%;
  left: -5%;
  animation: meshDrift1 35s ease-in-out infinite;
}

.gradient-blob-2 {
  width: 45%;
  height: 40%;
  top: 5%;
  right: -5%;
  animation: meshDrift2 40s ease-in-out infinite;
}

.gradient-blob-3 {
  width: 50%;
  height: 55%;
  bottom: -10%;
  left: 20%;
  animation: meshDrift3 38s ease-in-out infinite;
}

.gradient-blob-4 {
  width: 35%;
  height: 35%;
  top: 40%;
  right: 10%;
  animation: meshDrift4 45s ease-in-out infinite;
}

@keyframes meshDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(2%, 3%) scale(1.02); }
  66% { transform: translate(-1.5%, 1.5%) scale(0.99); }
}

@keyframes meshDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-2.5%, 2%) scale(0.98); }
  66% { transform: translate(1.5%, -2.5%) scale(1.02); }
}

@keyframes meshDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(2.5%, -1.5%) scale(1.01); }
  66% { transform: translate(-2%, 2.5%) scale(0.99); }
}

@keyframes meshDrift4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-1.5%, -2%) scale(1.03); }
  66% { transform: translate(2%, 1.5%) scale(0.97); }
}

/* ── Spinner ── */

@keyframes spin { to { transform: rotate(360deg); } }

.spinner { width:14px; height:14px; border:2px solid var(--accent); border-top-color:transparent; border-radius:50%; animation: spin .6s linear infinite; }

/* ── Slow background scroll ── */

@keyframes bgScroll {
  from { background-position: 0% 0%; }
  to { background-position: 0% -100%; }
}

/* ── Glass ambient shimmer (slow-moving caustic) ── */

@keyframes glassShimmer {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* ── GlassInput placeholder ── */

.glass-input::-moz-placeholder {
  color: var(--text-3);
  -moz-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.glass-input::placeholder {
  color: var(--text-3);
  transition: color 0.2s ease;
}

.glass-input:focus::-moz-placeholder {
  color: var(--text-3);
  opacity: 0.6;
}

.glass-input:focus::placeholder {
  color: var(--text-3);
  opacity: 0.6;
}

/* ── Landing-style glass ── */

.glass-landing {
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.1);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.3),
    inset 2px 2px 1px 0 rgba(255,255,255,0.15),
    inset -1px -1px 1px 1px rgba(255,255,255,0.1);
}

[data-theme="light"] .glass-landing {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.1),
    inset 2px 2px 1px 0 rgba(255,255,255,0.35),
    inset -1px -1px 1px 1px rgba(255,255,255,0.25);
}

/* ── Liquid Glass hover (search pill) ── */

.liquid-glass-pill {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquid-glass-pill:hover {
  padding: 8px 8px 8px 25px !important;
  border-radius: 999px;
}

/* ── Liquid Glass hover (Lucas menu/button style) ── */

.liquid-glass-hover {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquid-glass-hover:hover {
  padding: 66px 62px !important;
  border-radius: 32px;
}

.liquid-glass-hover:hover > div {
  border-radius: 32px;
}

/* ── Dashboard panel hover (Lucas style — padding expansion) ── */

.liquid-panel-hover {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquid-panel-hover:hover {
  padding: 8px !important;
  border-radius: 20px;
}

.liquid-panel-hover:hover .liquid-panel-refraction {
  opacity: 1 !important;
}

/* ── Admin glass content wrapper ── */

.admin-glass-content {
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  box-shadow:
    0 6px 6px rgba(0,0,0,0.1),
    0 0 20px rgba(0,0,0,0.05),
    inset 2px 2px 1px 0 rgba(255,255,255,0.1),
    inset -1px -1px 1px 1px rgba(255,255,255,0.06);
}

[data-theme="light"] .admin-glass-content {
  background: rgba(255,255,255,0.45);
  border-color: rgba(255,255,255,0.5);
  box-shadow:
    0 6px 6px rgba(0,0,0,0.04),
    0 0 20px rgba(0,0,0,0.03),
    inset 2px 2px 1px 0 rgba(255,255,255,0.4),
    inset -1px -1px 1px 1px rgba(255,255,255,0.25);
}

/* ── Agent Me markdown ── */

.agent-markdown p { margin: 0 0 8px; }

.agent-markdown p:last-child { margin: 0; }

.agent-markdown strong { color: #fff; font-weight: 600; }

.agent-markdown ol, .agent-markdown ul { margin: 6px 0; padding-left: 20px; }

.agent-markdown li { margin: 4px 0; }

.agent-markdown li::marker { color: #FF9500; }

.agent-markdown code { background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.agent-markdown h1, .agent-markdown h2, .agent-markdown h3 { color: #fff; font-weight: 700; margin: 8px 0 4px; font-size: 14px; }

.agent-markdown a { color: #FF9500; text-decoration: none; }

.agent-markdown a:hover { text-decoration: underline; }

.agent-chat-input {
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  color: #fff;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 2px 2px 1px 0 rgba(255,255,255,0.08), inset -1px -1px 1px 1px rgba(255,255,255,0.04);
}

.agent-chat-input::-moz-placeholder { color: rgba(255,255,255,0.4); }

.agent-chat-input::placeholder { color: rgba(255,255,255,0.4); }

.agent-chat-input:focus { border-color: rgba(255,149,0,0.3); background: rgba(255,255,255,0.08); }

[data-theme="light"] .agent-chat-input {
  background: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.5);
  color: #171717;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), inset 2px 2px 1px 0 rgba(255,255,255,0.4), inset -1px -1px 1px 1px rgba(255,255,255,0.25);
}

[data-theme="light"] .agent-chat-input::-moz-placeholder { color: rgba(0,0,0,0.4); }

[data-theme="light"] .agent-chat-input::placeholder { color: rgba(0,0,0,0.4); }

[data-theme="light"] .agent-chat-input:focus { background: rgba(255,255,255,0.85); }

.agent-chat-text-primary { color: #fff; }

.agent-chat-text-secondary { color: rgba(255,255,255,0.4); }

[data-theme="light"] .agent-chat-text-primary { color: #171717; }

[data-theme="light"] .agent-chat-text-secondary { color: rgba(0,0,0,0.4); }

[data-theme="light"] .agent-markdown strong { color: #171717; }

[data-theme="light"] .agent-markdown code { background: rgba(0,0,0,0.06); color: #171717; }

[data-theme="light"] .agent-markdown h1,
[data-theme="light"] .agent-markdown h2,
[data-theme="light"] .agent-markdown h3 { color: #171717; }

/* ── Autofill fix ── */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  background-color: transparent !important;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Scrollbar ── */

::-webkit-scrollbar { width:5px; }

::-webkit-scrollbar-track { background:transparent; }

::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ── Mobile responsive ── */

@media (max-width: 640px) {
  .admin-glass-content {
    padding: 16px 16px 32px !important;
    border-radius: 14px;
    margin: 0 -8px;
  }
}