/* ============================================
   GRUDGE STUDIO — WCS Dark Fantasy Theme
   Matches Warlord Crafting Suite styling
   ============================================ */
:root {
  /* WCS Core Palette */
  --bg-dark: hsl(225 30% 6%);
  --bg-panel: hsl(225 28% 10%);
  --bg-card: hsl(225 25% 14%);
  --bg-input: hsl(225 28% 8%);
  --border: hsl(43 60% 30%);
  --border-bright: hsl(43 50% 40%);
  --border-dim: hsl(220 15% 25%);
  --text: hsl(45 30% 90%);
  --text-dim: hsl(45 15% 60%);
  --accent: hsl(43 85% 55%);
  --accent-light: hsl(43 90% 70%);
  --accent-dark: hsl(43 70% 35%);
  --accent-glow: rgba(212, 175, 55, 0.3);
  --green: hsl(142 71% 29%);
  --yellow: hsl(43 85% 55%);
  --blue: hsl(220 60% 35%);
  --danger: hsl(0 65% 40%);
  --crimson: hsl(0 65% 40%);
  --stone: hsl(220 15% 25%);
  --bronze: hsl(30 60% 40%);
  --parchment: hsl(40 35% 75%);
  /* WCS Fonts */
  --font: 'Spectral SC', 'Inter', serif;
  --font-heading: 'Cinzel Decorative', 'Cinzel', serif;
  --font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --font-fell: 'IM Fell English SC', serif;
  --font-uncial: 'Uncial Antiqua', cursive;
  --font-orbitron: 'Orbitron', sans-serif;
  --font-rajdhani: 'Rajdhani', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --accent-cyan: hsl(195 100% 50%);
  --accent-cyan-glow: rgba(0, 191, 255, 0.3);
  /* Panels */
  --panel: linear-gradient(180deg, hsl(225 25% 14%) 0%, hsl(225 28% 10%) 50%, hsl(225 25% 8%) 100%);
  --panel2: linear-gradient(180deg, rgba(40,45,55,0.95) 0%, rgba(30,35,45,0.98) 100%);
  --shadow: 0 4px 12px rgba(0,0,0,0.5);
  --radius: 4px;
  --transition: 150ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  background:
    radial-gradient(ellipse at top, hsl(225 30% 12%) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, hsl(225 25% 6%) 0%, transparent 50%),
    linear-gradient(180deg, hsl(225 30% 6%) 0%, hsl(225 28% 10%) 50%, hsl(225 30% 6%) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--text-dim); font-family: var(--font-fell); }

/* ============ LOGIN ============ */
.login-screen {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 75% 75%, rgba(180, 130, 40, 0.05) 0%, transparent 40%),
    radial-gradient(ellipse at center, hsl(225 28% 10%) 0%, var(--bg-dark) 70%);
}
.login-card {
  text-align: center; padding: 3rem;
  background: var(--panel);
  border: 2px solid var(--border); border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 0 60px var(--accent-glow),
    0 0 0 1px rgba(0,0,0,0.3);
  max-width: 420px; width: 100%;
  position: relative;
}
.login-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 2px; padding: 1px;
  background: linear-gradient(180deg, rgba(212,175,55,0.3) 0%, rgba(160,120,40,0.1) 50%, rgba(100,80,30,0.2) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  pointer-events: none;
}
.login-logo { font-size: 4rem; margin-bottom: 0.5rem; filter: drop-shadow(0 0 12px rgba(212,175,55,0.4)); }
.login-title {
  font-family: var(--font-heading); font-size: 1.8rem; letter-spacing: 2px;
  background: linear-gradient(180deg, hsl(43 90% 70%) 0%, hsl(43 85% 55%) 50%, hsl(35 70% 45%) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.login-subtitle { color: var(--text-dim); margin-bottom: 2rem; font-family: var(--font-fell); }
.login-btn {
  width: 100%; padding: 0.9rem; font-size: 1rem;
  font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.05em;
  background: linear-gradient(180deg, hsl(43 70% 45%) 0%, hsl(38 65% 35%) 50%, hsl(35 60% 28%) 100%);
  color: hsl(225 30% 10%); border: 2px solid hsl(43 50% 50%); border-radius: var(--radius);
  cursor: pointer; transition: all var(--transition);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.4);
}
.login-btn:hover {
  background: linear-gradient(180deg, hsl(43 80% 55%) 0%, hsl(43 70% 45%) 50%, hsl(38 65% 35%) 100%);
  border-color: hsl(43 60% 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 12px rgba(212,175,55,0.4), 0 4px 8px rgba(0,0,0,0.4);
  transform: scale(1.02);
}
.login-features { margin-top: 1.5rem; color: var(--text-dim); font-size: 0.9rem; line-height: 2; font-family: var(--font-fell); }

/* ============ STUDIO SHELL ============ */
.studio-shell { display: flex; flex-direction: column; height: 100vh; }

/* Top Bar */
.top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 1rem; height: 52px;
  background: linear-gradient(180deg, hsl(225 28% 12%) 0%, hsl(225 30% 8%) 100%);
  border-bottom: 2px solid var(--border); flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.top-bar-left { display: flex; align-items: center; gap: 0.6rem; }
.top-bar-logo { font-size: 1.3rem; filter: drop-shadow(0 0 6px rgba(212,175,55,0.3)); }
.top-bar-title {
  font-family: var(--font-heading); font-size: 0.9rem; letter-spacing: 1.5px;
  background: linear-gradient(180deg, hsl(43 90% 70%) 0%, hsl(43 85% 55%) 50%, hsl(35 70% 45%) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.top-bar-right { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.user-badge {
  background: hsl(225 25% 15%); padding: 0.2rem 0.6rem; border-radius: 2px;
  border: 1px solid var(--border); color: var(--accent-light);
  font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 0.05em;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.status-text { color: var(--text-dim); font-family: var(--font-fell); }

/* Body */
.studio-body { display: flex; flex: 1; overflow: hidden; }

/* Sidebar */
.sidebar {
  width: 190px;
  background: linear-gradient(180deg, hsl(225 25% 12%) 0%, hsl(225 28% 8%) 100%);
  border-right: 2px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0;
  box-shadow: 4px 0 12px rgba(0,0,0,0.3);
}
.sidebar-nav { display: flex; flex-direction: column; padding: 0.6rem; gap: 2px; }
.nav-btn {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.75rem;
  background: transparent; border: 1px solid transparent; color: var(--text-dim);
  font-size: 0.85rem; border-radius: var(--radius); cursor: pointer;
  transition: all var(--transition); text-align: left;
  font-family: var(--font-heading); letter-spacing: 0.02em;
}
.nav-btn:hover {
  background: hsl(225 25% 15%); color: var(--text);
  border-color: hsl(43 40% 25%);
}
.nav-btn.active {
  background: linear-gradient(180deg, hsl(43 70% 45%) 0%, hsl(38 65% 35%) 100%);
  color: hsl(225 30% 10%); border-color: hsl(43 50% 50%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.3);
}
.nav-icon { font-size: 1.1rem; width: 24px; text-align: center; }

/* Main Content */
.main-content { flex: 1; overflow-y: auto; padding: 1.2rem; }
.view { display: none; height: 100%; }
.view.active { display: flex; flex-direction: column; }
.view-title {
  font-family: var(--font-heading); font-size: 1.1rem; margin-bottom: 1rem;
  color: var(--accent-light); text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  letter-spacing: 0.04em;
}
.section-title {
  font-size: 0.9rem; margin: 1rem 0 0.5rem;
  color: var(--text-dim); font-family: var(--font-heading); letter-spacing: 0.02em;
}

/* Stats Row */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.stat-card {
  position: relative;
  background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 1rem; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.3), var(--shadow);
}
.stat-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 2px; padding: 1px;
  background: linear-gradient(180deg, rgba(212,175,55,0.3) 0%, rgba(160,120,40,0.1) 50%, rgba(100,80,30,0.2) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  pointer-events: none;
}
.stat-card .stat-num { font-size: 1.6rem; font-weight: 700; color: var(--accent-light); font-family: var(--font-heading); }
.stat-card .stat-label { font-size: 0.8rem; color: var(--text-dim); font-family: var(--font-fell); }

/* Services Grid */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem; }
.svc-card {
  position: relative;
  background: var(--panel2); border: 2px solid var(--border-dim); border-radius: var(--radius);
  padding: 0.8rem; cursor: pointer; transition: all var(--transition);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), var(--shadow);
}
.svc-card:hover { border-color: var(--border); box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 12px rgba(212,175,55,0.12); transform: translateY(-1px); }
.svc-card .svc-name { font-weight: 600; margin-bottom: 0.2rem; font-family: var(--font-heading); font-size: 0.85rem; color: hsl(43 90% 70%); }
.svc-card .svc-desc { font-size: 0.8rem; color: var(--text-dim); font-family: var(--font-fell); }
.svc-card .svc-status { font-size: 0.75rem; margin-top: 0.3rem; }

/* Activity Log */
.activity-log { max-height: 200px; overflow-y: auto; }
.activity-item {
  display: flex; justify-content: space-between; padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-dim); font-size: 0.85rem; font-family: var(--font-fell);
}

/* ============ 3D EDITOR ============ */
.editor3d-layout { display: flex; flex-direction: column; height: 100%; }
.editor3d-toolbar {
  display: flex; gap: 4px; padding: 0.5rem;
  background: linear-gradient(180deg, hsl(225 25% 14%) 0%, hsl(225 28% 10%) 100%);
  border-bottom: 2px solid var(--border); flex-wrap: wrap;
}
.tool-btn {
  padding: 0.4rem 0.75rem;
  background: linear-gradient(180deg, hsl(225 25% 22%) 0%, hsl(225 28% 15%) 100%);
  border: 1px solid hsl(43 40% 25%); color: hsl(43 70% 65%);
  border-radius: var(--radius); cursor: pointer; font-size: 0.82rem;
  font-family: var(--font-heading); letter-spacing: 0.02em;
  transition: all var(--transition);
}
.tool-btn:hover {
  border-color: var(--border-bright); color: var(--accent-light);
  box-shadow: 0 0 8px rgba(212,175,55,0.15); transform: translateY(-1px);
}
.toolbar-sep { width: 1px; background: var(--border); margin: 0 4px; }
.editor3d-viewport { flex: 1; position: relative; background: hsl(225 30% 5%); min-height: 300px; }
.editor3d-viewport canvas { display: block; width: 100% !important; height: 100% !important; }
.editor3d-panel {
  width: 100%; max-height: 180px; overflow-y: auto; padding: 0.6rem;
  background: linear-gradient(180deg, hsl(225 25% 12%) 0%, hsl(225 28% 8%) 100%);
  border-top: 2px solid var(--border);
}
.editor3d-panel h3 { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.4rem; font-family: var(--font-heading); }
.props-panel { font-size: 0.85rem; }
.props-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.3rem; }
.props-row label { width: 60px; color: var(--text-dim); font-family: var(--font-fell); }
.props-row input {
  width: 60px; background: var(--bg-input); border: 1px solid var(--border-dim);
  color: var(--text); padding: 2px 4px; border-radius: 2px; font-size: 0.8rem;
}
.props-row input:focus { border-color: var(--accent); outline: none; }
.scene-list { font-size: 0.85rem; font-family: var(--font-fell); }
.scene-item {
  padding: 0.3rem 0.5rem; cursor: pointer; border-radius: var(--radius);
  transition: background var(--transition);
}
.scene-item:hover { background: hsl(225 25% 15%); }
.scene-item.selected {
  background: linear-gradient(180deg, hsl(43 70% 45%) 0%, hsl(38 65% 35%) 100%);
  color: hsl(225 30% 10%);
}

/* ============ AI AGENTS ============ */
.agents-layout { display: flex; height: 100%; gap: 0; }
.agents-sidebar {
  width: 210px;
  background: linear-gradient(180deg, hsl(225 25% 12%) 0%, hsl(225 28% 8%) 100%);
  border-right: 2px solid var(--border);
  padding: 0.6rem; overflow-y: auto; flex-shrink: 0;
}
.agents-sidebar h3 { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.5rem; font-family: var(--font-heading); letter-spacing: 0.04em; }
.agent-item {
  padding: 0.5rem; border-radius: var(--radius); cursor: pointer; margin-bottom: 2px;
  transition: all var(--transition); font-size: 0.85rem;
  border: 1px solid transparent; font-family: var(--font-heading); letter-spacing: 0.01em;
}
.agent-item:hover { background: hsl(225 25% 15%); border-color: hsl(43 40% 25%); }
.agent-item.active {
  background: linear-gradient(180deg, hsl(43 70% 45%) 0%, hsl(38 65% 35%) 100%);
  color: hsl(225 30% 10%); border-color: hsl(43 50% 50%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.agent-item .agent-icon { margin-right: 0.3rem; }
.agents-chat { flex: 1; display: flex; flex-direction: column; }
.chat-messages { flex: 1; overflow-y: auto; padding: 0.8rem; }
.chat-msg {
  margin-bottom: 0.6rem; padding: 0.6rem; border-radius: var(--radius);
  max-width: 85%; white-space: pre-wrap; font-size: 0.9rem; line-height: 1.5;
  font-family: var(--font-fell);
}
.chat-msg.user {
  background: hsl(225 25% 15%); margin-left: auto;
  border: 1px solid hsl(43 40% 25%);
}
.chat-msg.assistant {
  background: var(--panel2); border: 1px solid var(--border-dim);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.2);
}
.chat-input-row {
  display: flex; gap: 0.4rem; padding: 0.5rem;
  background: linear-gradient(180deg, hsl(225 25% 12%) 0%, hsl(225 28% 8%) 100%);
  border-top: 2px solid var(--border);
}
.chat-input {
  flex: 1; background: var(--bg-input); border: 2px solid var(--border-dim);
  color: var(--text); padding: 0.5rem; border-radius: var(--radius); resize: none;
  font-family: var(--font); font-size: 0.9rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.chat-input:focus { border-color: var(--accent); outline: none; }
.chat-send-btn {
  padding: 0.5rem 1rem;
  background: linear-gradient(180deg, hsl(43 70% 45%) 0%, hsl(38 65% 35%) 50%, hsl(35 60% 28%) 100%);
  color: hsl(225 30% 10%); border: 2px solid hsl(43 50% 50%); border-radius: var(--radius);
  cursor: pointer; font-weight: 600; font-family: var(--font-heading); letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.3);
  transition: all var(--transition);
}
.chat-send-btn:hover {
  background: linear-gradient(180deg, hsl(43 80% 55%) 0%, hsl(43 70% 45%) 50%, hsl(38 65% 35%) 100%);
  border-color: hsl(43 60% 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 12px rgba(212,175,55,0.4);
}

/* ============ ASSETS ============ */
.assets-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.assets-controls { display: flex; gap: 0.5rem; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.8rem; overflow-y: auto; flex: 1; }
.asset-card {
  position: relative;
  background: var(--panel2); border: 2px solid var(--border-dim); border-radius: var(--radius);
  padding: 0.6rem; text-align: center; cursor: pointer;
  transition: all var(--transition);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.asset-card:hover { border-color: var(--border); box-shadow: 0 0 12px rgba(212,175,55,0.15); transform: translateY(-1px); }
.asset-card img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; margin-bottom: 0.3rem; }
.asset-card .asset-name { font-size: 0.8rem; color: var(--text-dim); word-break: break-word; font-family: var(--font-fell); }
.asset-preview {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; z-index: 1000; max-width: 500px; width: 90%;
  box-shadow: 0 0 60px var(--accent-glow), var(--shadow);
}
.asset-preview img { width: 100%; max-height: 300px; object-fit: contain; image-rendering: pixelated; }

/* ============ KV STORAGE ============ */
.kv-controls { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.kv-value { height: 80px; resize: vertical; }
.kv-btn-row { display: flex; gap: 0.4rem; }
.kv-result {
  background: var(--bg-input); border: 2px solid var(--border-dim); border-radius: var(--radius);
  padding: 1rem; overflow: auto; flex: 1; white-space: pre-wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--text);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
}

/* ============ APP LAUNCHER ============ */
.launcher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.launcher-card {
  position: relative;
  background: var(--panel); border: 2px solid var(--border-dim); border-radius: var(--radius);
  padding: 1.2rem; cursor: pointer; transition: all var(--transition);
  text-decoration: none; color: var(--text); display: block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), var(--shadow);
}
.launcher-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 2px; padding: 1px;
  background: linear-gradient(180deg, rgba(212,175,55,0.2) 0%, rgba(160,120,40,0.05) 50%, rgba(100,80,30,0.1) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  pointer-events: none; opacity: 0; transition: opacity var(--transition);
}
.launcher-card:hover {
  border-color: var(--border); transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(212,175,55,0.15), 0 8px 24px rgba(0,0,0,0.4);
}
.launcher-card:hover::before { opacity: 1; }
.launcher-card .lc-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.launcher-card .lc-title { font-weight: 700; margin-bottom: 0.3rem; font-family: var(--font-heading); font-size: 0.9rem; color: hsl(43 90% 70%); }
.launcher-card .lc-desc { font-size: 0.8rem; color: var(--text-dim); font-family: var(--font-fell); }
.launcher-card .lc-url { font-size: 0.75rem; color: var(--accent); margin-top: 0.4rem; word-break: break-all; }

/* ============ SHARED ============ */
.text-input, .select-input {
  background: var(--bg-input); border: 2px solid var(--border-dim); color: var(--text);
  padding: 0.5rem 0.7rem; border-radius: var(--radius); font-family: var(--font); font-size: 0.9rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  transition: border-color var(--transition);
}
.text-input:focus, .select-input:focus { border-color: var(--accent); outline: none; }
.btn {
  padding: 0.5rem 1rem; border: 2px solid hsl(43 50% 35%); border-radius: var(--radius);
  cursor: pointer; font-weight: 600; font-family: var(--font-heading); font-size: 0.85rem;
  letter-spacing: 0.03em; transition: all var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(180deg, hsl(43 70% 45%) 0%, hsl(38 65% 35%) 100%);
  color: hsl(225 30% 10%); border-color: hsl(43 50% 50%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.3);
}
.btn-primary:hover {
  background: linear-gradient(180deg, hsl(43 80% 55%) 0%, hsl(43 70% 45%) 100%);
  box-shadow: 0 0 10px rgba(212,175,55,0.3);
}
.btn-secondary {
  background: linear-gradient(180deg, hsl(225 25% 22%) 0%, hsl(225 28% 15%) 100%);
  color: hsl(43 70% 65%); border-color: hsl(43 40% 25%);
}
.btn-secondary:hover {
  background: linear-gradient(180deg, hsl(225 25% 26%) 0%, hsl(225 28% 18%) 100%);
  border-color: hsl(43 50% 35%); color: var(--accent-light);
  box-shadow: 0 0 8px rgba(212,175,55,0.15);
}
.btn-danger {
  background: linear-gradient(180deg, hsl(0 55% 35%) 0%, hsl(0 50% 28%) 100%);
  color: hsl(0 0% 90%); border-color: hsl(0 40% 40%);
}

/* ============ WCS Scrollbar ============ */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: hsl(225 30% 8%); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, hsl(43 50% 35%) 0%, hsl(35 45% 25%) 100%);
  border: 1px solid hsl(43 40% 40%); border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, hsl(43 60% 45%) 0%, hsl(35 50% 30%) 100%);
}

/* ============ Rarity Colors ============ */
.rarity-common { color: hsl(0 0% 70%); }
.rarity-uncommon { color: hsl(120 60% 50%); }
.rarity-rare { color: hsl(220 80% 60%); }
.rarity-epic { color: hsl(280 70% 60%); }
.rarity-legendary { color: hsl(35 100% 55%); }

/* ============ Gold Text Utility ============ */
.gold-text {
  background: linear-gradient(180deg, hsl(43 90% 75%) 0%, hsl(43 85% 55%) 40%, hsl(35 70% 40%) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ============ CHARACTER HUB ============ */
.char-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.char-controls { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.char-status { font-size: 0.8rem; margin-right: 0.5rem; font-family: var(--font-fell); }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.8rem; overflow-y: auto; flex: 1; }
.char-card {
  position: relative;
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--panel2); border: 2px solid var(--border-dim); border-radius: var(--radius);
  padding: 0.8rem; cursor: pointer; transition: all var(--transition);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.char-card:hover { border-color: var(--border); box-shadow: 0 0 12px rgba(212,175,55,0.15); transform: translateY(-1px); }
.char-card.selected { border-color: var(--accent); box-shadow: 0 0 16px var(--accent-glow), inset 0 0 12px rgba(212,175,55,0.08); }
.char-icon { font-size: 2rem; flex-shrink: 0; }
.char-info { flex: 1; min-width: 0; }
.char-name { font-family: var(--font-heading); font-size: 0.95rem; color: hsl(43 90% 70%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-meta { font-size: 0.8rem; color: var(--text-dim); font-family: var(--font-fell); }
.char-profs { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.2rem; font-family: var(--font-fell); }
.char-health-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: hsl(0 30% 20%); border-radius: 0 0 2px 2px;
}
.char-hp { height: 100%; background: linear-gradient(90deg, hsl(0 65% 40%), hsl(120 60% 35%)); border-radius: 0 0 2px 2px; transition: width 0.3s; }

/* Character Detail */
.char-detail {
  background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 1rem; margin-top: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), var(--shadow);
}
.char-detail h3 { font-family: var(--font-heading); font-size: 1rem; color: hsl(43 90% 70%); margin-bottom: 0.6rem; }
.detail-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.detail-label { font-size: 0.8rem; color: var(--text-dim); font-family: var(--font-fell); }
.detail-val { font-size: 0.9rem; font-weight: 600; }
.detail-section { margin-bottom: 0.6rem; }
.attr-row, .equip-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.attr-pill {
  display: inline-flex; gap: 0.3rem; padding: 0.2rem 0.5rem;
  background: hsl(225 25% 15%); border: 1px solid var(--border-dim);
  border-radius: 2px; font-size: 0.8rem;
}
.attr-name { color: var(--text-dim); font-family: var(--font-fell); }
.attr-val { color: var(--accent-light); font-weight: 600; }
.equip-pill {
  display: inline-block; padding: 0.2rem 0.5rem;
  background: hsl(225 25% 18%); border: 1px solid hsl(43 40% 25%);
  border-radius: 2px; font-size: 0.78rem; color: hsl(43 70% 65%);
  font-family: var(--font-fell);
}

/* ============ GAME SAVE MANAGER ============ */
.saves-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.saves-controls { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.save-status-text { font-size: 0.8rem; margin-right: 0.5rem; font-family: var(--font-fell); }
.saves-layout { display: flex; gap: 0.8rem; flex: 1; overflow: hidden; }
.save-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; }
.save-item {
  background: var(--panel2); border: 2px solid var(--border-dim); border-radius: var(--radius);
  padding: 0.6rem; cursor: pointer; transition: all var(--transition);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.save-item:hover { border-color: var(--border); box-shadow: 0 0 10px rgba(212,175,55,0.1); }
.save-header { display: flex; justify-content: space-between; align-items: center; }
.save-name { font-family: var(--font-heading); font-size: 0.9rem; color: hsl(43 90% 70%); }
.save-version { font-size: 0.75rem; color: var(--accent); font-family: var(--font-fell); }
.save-meta { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.2rem; font-family: var(--font-fell); }
.save-preview {
  flex: 1; min-width: 300px;
  background: var(--bg-input); border: 2px solid var(--border-dim); border-radius: var(--radius);
  padding: 1rem; overflow: auto; white-space: pre-wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--text);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
}

/* ============ ENHANCED ASSETS (Vault) ============ */
.vault-header { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.vault-upload-btn {
  padding: 0.4rem 0.8rem;
  background: linear-gradient(180deg, hsl(225 25% 22%) 0%, hsl(225 28% 15%) 100%);
  border: 1px solid hsl(43 40% 25%); color: hsl(43 70% 65%);
  border-radius: var(--radius); cursor: pointer; font-size: 0.82rem;
  font-family: var(--font-heading); transition: all var(--transition);
}
.vault-upload-btn:hover { border-color: var(--border-bright); color: var(--accent-light); }
.vault-item {
  background: var(--panel2); border: 2px solid hsl(43 40% 25%); border-radius: var(--radius);
  padding: 0.6rem; text-align: center; cursor: pointer;
  transition: all var(--transition);
}
.vault-item:hover { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }

/* ============ DEPLOY MANAGER ============ */
.lc-status { font-size: 0.75rem; margin-top: 0.3rem; font-family: var(--font-fell); }
.lc-deploy-btn { width: 100%; }

/* ============ WCS ANIMATIONS ============ */
@keyframes gem-glow {
  0% { box-shadow: 0 0 0px currentColor; border-color: currentColor; }
  50% { box-shadow: 0 0 15px currentColor; border-color: #fff; }
  100% { box-shadow: 0 0 0px currentColor; border-color: currentColor; }
}
.animate-gem-glow { animation: gem-glow 2s infinite; }

@keyframes arcane-pulse {
  0% { box-shadow: 0 0 0px currentColor; border-color: currentColor; }
  50% { box-shadow: 0 0 20px currentColor; border-color: #fff; transform: rotate(-45deg) scale(1.1); }
  100% { box-shadow: 0 0 0px currentColor; border-color: currentColor; }
}
.animate-arcane-pulse { animation: arcane-pulse 3s infinite; }

@keyframes simmer {
  0% { transform: scale(1); box-shadow: 0 0 0px red; }
  50% { transform: scale(1.05); box-shadow: 0 0 15px currentColor; }
  100% { transform: scale(1); box-shadow: 0 0 0px red; }
}
.animate-simmer { animation: simmer 2.5s infinite; }

@keyframes glow-pulse {
  0% { box-shadow: 0 0 0px currentColor; transform: scale(1); }
  50% { box-shadow: 0 0 15px currentColor; transform: scale(1.1); }
  100% { box-shadow: 0 0 0px currentColor; transform: scale(1); }
}
.animate-glow-pulse { animation: glow-pulse 2s infinite; }

@keyframes gear-spin {
  0% { box-shadow: 0 0 0px currentColor; }
  50% { box-shadow: 0 0 15px currentColor; }
  100% { box-shadow: 0 0 0px currentColor; }
}
.animate-gear-spin { animation: gear-spin 4s linear infinite; }

/* WCS Text utilities */
.text-shadow-glow { text-shadow: 0 0 10px currentColor; }
.grudge-bg-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 75% 75%, rgba(180, 130, 40, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(100, 80, 40, 0.03) 0%, transparent 60%);
}

/* WCS Fantasy Panel — gilded frame */
.fantasy-panel {
  position: relative;
  background: var(--panel);
  border: 2px solid hsl(43 60% 35%);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 0 30px rgba(212,175,55,0.08),
    var(--shadow);
}
.fantasy-panel::before {
  content: ''; position: absolute; inset: 0; border-radius: 2px; padding: 1px;
  background: linear-gradient(180deg, rgba(212,175,55,0.3) 0%, rgba(160,120,40,0.1) 50%, rgba(100,80,30,0.2) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  pointer-events: none;
}

/* ============ ACCOUNT CARD ============ */
.account-card { margin-bottom: 1rem; }
.account-card-inner {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1rem;
  background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), var(--shadow);
}
.account-avatar { font-size: 2.5rem; flex-shrink: 0; }
.account-info { flex-shrink: 0; min-width: 100px; }
.account-name { font-family: var(--font-heading); font-size: 1rem; color: var(--accent-light); }
.account-id { font-size: 0.7rem; color: var(--text-dim); font-family: var(--font-mono); }
.account-role { font-size: 0.75rem; font-weight: 700; margin-top: 0.2rem; font-family: var(--font-heading); letter-spacing: 0.05em; }
.account-links { flex: 1; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.account-link-item {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem;
  background: hsl(225 25% 12%); border: 1px solid var(--border-dim); border-radius: var(--radius);
  font-size: 0.78rem; font-family: var(--font-fell);
}
.account-link-icon { font-size: 1rem; }
.account-link-status { color: var(--text-dim); font-size: 0.72rem; }
.account-link-status.linked { color: var(--green); }
.btn-xs { padding: 0.2rem 0.5rem; font-size: 0.7rem; }

/* ============ APP REGISTRY ============ */
.registry-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.registry-tabs { display: flex; gap: 2px; }
.registry-tab {
  padding: 0.4rem 0.8rem; background: hsl(225 25% 15%); border: 1px solid var(--border-dim);
  color: var(--text-dim); border-radius: var(--radius); cursor: pointer;
  font-family: var(--font-heading); font-size: 0.78rem; transition: all var(--transition);
}
.registry-tab:hover { border-color: hsl(43 40% 30%); color: var(--text); }
.registry-tab.active {
  background: linear-gradient(180deg, hsl(43 70% 45%), hsl(38 65% 35%));
  color: hsl(225 30% 10%); border-color: hsl(43 50% 50%);
}
.registry-search { width: 200px; }
.registry-count { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 0.5rem; font-family: var(--font-fell); }
.registry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.registry-card {
  background: var(--panel2); border: 2px solid var(--border-dim); border-radius: var(--radius);
  padding: 0.7rem; transition: all var(--transition);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.registry-card:hover { border-color: var(--border); transform: translateY(-1px); box-shadow: 0 0 12px rgba(212,175,55,0.12); }
.registry-card-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.registry-card-icon { font-size: 1.5rem; flex-shrink: 0; }
.registry-card-body { flex: 1; min-width: 0; }
.registry-card-title { font-family: var(--font-heading); font-size: 0.82rem; color: hsl(43 90% 70%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.registry-card-name { font-size: 0.68rem; color: var(--text-dim); font-family: var(--font-mono); }
.registry-card-sub { font-size: 0.65rem; color: var(--accent); font-family: var(--font-fell); }
.registry-tag {
  padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.6rem;
  font-family: var(--font-orbitron); letter-spacing: 0.05em; text-transform: uppercase; flex-shrink: 0;
}
.registry-card-status { font-size: 0.7rem; margin-top: 0.3rem; }
.registry-deploy-btn { width: 100%; margin-top: 0.4rem; font-size: 0.72rem; }
.registry-section { margin-top: 1.5rem; }
.registry-site-controls { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.sites-list { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.site-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.4rem 0.6rem; background: hsl(225 25% 12%);
  border: 1px solid var(--border-dim); border-radius: var(--radius); font-size: 0.75rem;
}
.site-sub { color: var(--accent-light); font-family: var(--font-mono); font-size: 0.72rem; }
.site-suffix { color: var(--text-dim); }
.site-dir { color: var(--text-dim); font-family: var(--font-fell); font-size: 0.68rem; }

/* ============ DEPLOY MANAGER ============ */
.deploy-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; height: calc(100% - 2.5rem); }
.deploy-panel {
  background: var(--panel); border: 2px solid var(--border-dim); border-radius: var(--radius);
  padding: 0.8rem; overflow-y: auto;
}
.deploy-panel:last-child { grid-column: 1 / -1; max-height: 200px; }
.deploy-app-list { display: grid; gap: 4px; }
.deploy-app-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0.6rem; background: hsl(225 25% 12%);
  border: 1px solid var(--border-dim); border-radius: var(--radius);
}
.deploy-app-name { font-family: var(--font-heading); font-size: 0.8rem; color: hsl(43 90% 70%); }
.deploy-app-sub { font-size: 0.68rem; color: var(--text-dim); font-family: var(--font-mono); }
.fs-browser { font-family: var(--font-mono); font-size: 0.78rem; }
.fs-item {
  display: flex; justify-content: space-between; padding: 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.03); cursor: pointer;
}
.fs-item:hover { background: hsl(225 25% 15%); }
.fs-item-name { color: var(--accent-light); }
.fs-item-name.dir { color: var(--accent-cyan); }
.fs-item-size { color: var(--text-dim); font-size: 0.7rem; }
.deploy-log { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); }
.deploy-log-item { padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.deploy-log-item .success { color: var(--green); }
.deploy-log-item .fail { color: var(--danger); }

/* ============ CODE PLAYGROUND ============ */
.code-playground-layout { display: flex; flex-direction: column; height: calc(100% - 2.5rem); }
.code-toolbar { display: flex; gap: 0.4rem; align-items: center; padding: 0.5rem 0; flex-wrap: wrap; }
.code-editor-mount {
  flex: 1; min-height: 200px;
  background: hsl(225 30% 6%); border: 2px solid var(--border-dim); border-radius: var(--radius);
  overflow: hidden;
}
.code-editor-mount .cm-editor { height: 100%; }
.code-editor-mount .cm-scroller { overflow: auto; }
.code-output {
  height: 120px; overflow: auto; margin-top: 0.5rem;
  background: var(--bg-input); border: 2px solid var(--border-dim); border-radius: var(--radius);
  padding: 0.6rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
}

/* ============ ENGINE THEME (3D Editor) ============ */
.theme-engine {
  --e-bg: hsl(220 25% 8%);
  --e-border: hsl(195 60% 30%);
  --e-accent: var(--accent-cyan);
  --e-glow: var(--accent-cyan-glow);
}
.theme-engine .editor3d-toolbar {
  background: linear-gradient(180deg, hsl(220 25% 14%) 0%, hsl(220 28% 10%) 100%);
  border-bottom-color: var(--e-border);
}
.theme-engine .tool-btn {
  border-color: hsl(195 40% 25%); color: hsl(195 80% 65%);
  font-family: var(--font-orbitron); font-size: 0.72rem; letter-spacing: 0.04em;
}
.theme-engine .tool-btn:hover {
  border-color: var(--e-accent); color: var(--e-accent);
  box-shadow: 0 0 8px var(--e-glow);
}
.theme-engine .tool-btn.active {
  background: linear-gradient(180deg, hsl(195 60% 30%), hsl(195 50% 22%));
  color: #fff; border-color: var(--e-accent);
  box-shadow: 0 0 12px var(--e-glow);
}
.theme-engine .editor3d-panel {
  background: linear-gradient(180deg, hsl(220 25% 12%), hsl(220 28% 8%));
  border-top-color: var(--e-border);
}
.theme-engine .editor3d-panel h3 {
  font-family: var(--font-orbitron); color: var(--e-accent); font-size: 0.75rem;
  text-shadow: 0 0 8px var(--e-glow);
}
.theme-engine .editor3d-viewport {
  position: relative;
}
.theme-engine .editor3d-viewport::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,191,255,0.015) 2px, rgba(0,191,255,0.015) 4px);
  z-index: 1;
}

/* Transform mode indicators */
.transform-mode-bar {
  display: flex; gap: 2px; padding: 0 0.3rem;
}
.transform-mode-btn {
  padding: 0.3rem 0.6rem; background: hsl(220 25% 18%); border: 1px solid hsl(195 40% 25%);
  color: hsl(195 60% 55%); border-radius: var(--radius); cursor: pointer;
  font-family: var(--font-orbitron); font-size: 0.68rem; letter-spacing: 0.05em;
  transition: all var(--transition);
}
.transform-mode-btn.active {
  background: hsl(195 50% 22%); border-color: var(--accent-cyan); color: #fff;
  box-shadow: 0 0 8px var(--accent-cyan-glow);
}
.scene-name-input {
  background: var(--bg-input); border: 1px solid var(--border-dim); color: var(--text);
  padding: 0.25rem 0.5rem; border-radius: var(--radius); font-size: 0.78rem;
  font-family: var(--font-mono); width: 140px;
}
.scene-name-input:focus { border-color: var(--accent-cyan); outline: none; }