/* ManaDrama Studio Pro — ManaResource native skin
   Keeps the original Gemini/React engine but maps its visual system to the
   ManaResource theme tokens. */

html, body { min-height: 100%; }
body { margin: 0; background: var(--bg-main); color: var(--text-main); }
#root { min-height: calc(100vh - 72px); }

.manadrama-app {
  --md-900: 248 248 246;
  --md-800: 255 255 255;
  --md-700: 224 224 220;
  --md-600: 255 210 28;
  --md-500: 210 168 0;
  --md-400: 24 24 24;
  --md-300: 75 75 75;
  --md-100: 102 102 102;
  --md-accent: 255 210 28;
  --md-accent-hover: 218 173 0;
  --md-success: 22 163 74;
  --md-warning: 217 119 6;
  --md-danger: 220 38 38;
  --md-bg: var(--bg-main);
  --md-card: var(--bg-card);
  --md-text: var(--text-main);
  --md-heading: var(--text-heading);
  --md-muted: var(--text-muted);
  color: var(--md-text);
}

body.theme-midnight .manadrama-app {
  --md-900: 13 13 15;
  --md-800: 28 29 33;
  --md-700: 58 59 64;
  --md-600: 255 210 28;
  --md-500: 255 224 91;
  --md-400: 237 237 237;
  --md-300: 212 212 216;
  --md-100: 161 161 170;
  --md-accent: 255 210 28;
  --md-accent-hover: 230 187 0;
  --md-bg: var(--bg-main);
}

body.theme-cream .manadrama-app {
  --md-900: 243 232 210;
  --md-800: 255 253 248;
  --md-700: 224 214 194;
  --md-600: 216 169 0;
  --md-500: 173 133 0;
  --md-400: 43 41 36;
  --md-300: 74 70 62;
  --md-100: 116 111 101;
  --md-accent: 216 169 0;
  --md-accent-hover: 181 140 0;
  --md-bg: var(--bg-main);
}

body.theme-clean .manadrama-app {
  --md-900: 248 250 252;
  --md-800: 255 255 255;
  --md-700: 226 232 240;
  --md-600: 255 210 28;
  --md-500: 202 164 0;
  --md-400: 15 23 42;
  --md-300: 71 85 105;
  --md-100: 100 116 139;
  --md-accent: 255 210 28;
  --md-accent-hover: 220 178 0;
  --md-bg: var(--bg-main);
}

/* Tailwind utility color bridge */
.manadrama-app .bg-mana-900 { background-color: rgb(var(--md-900)) !important; }
.manadrama-app .bg-mana-800 { background-color: rgb(var(--md-800)) !important; }
.manadrama-app .bg-mana-700 { background-color: rgb(var(--md-700)) !important; }
.manadrama-app .bg-mana-600 { background-color: rgb(var(--md-600)) !important; }
.manadrama-app .bg-mana-accent { background-color: rgb(var(--md-accent)) !important; }
.manadrama-app .bg-mana-accentHover { background-color: rgb(var(--md-accent-hover)) !important; }
.manadrama-app .bg-mana-success { background-color: rgb(var(--md-success)) !important; }
.manadrama-app .bg-mana-warning { background-color: rgb(var(--md-warning)) !important; }
.manadrama-app .bg-mana-danger { background-color: rgb(var(--md-danger)) !important; }

.manadrama-app .text-mana-100 { color: rgb(var(--md-100)) !important; }
.manadrama-app .text-mana-300 { color: rgb(var(--md-300)) !important; }
.manadrama-app .text-mana-400 { color: rgb(var(--md-400)) !important; }
.manadrama-app .text-mana-500 { color: rgb(var(--md-500)) !important; }
.manadrama-app .text-mana-600 { color: rgb(var(--md-600)) !important; }
.manadrama-app .text-mana-accent { color: rgb(var(--md-accent)) !important; }
.manadrama-app .text-mana-success { color: rgb(var(--md-success)) !important; }
.manadrama-app .text-mana-warning { color: rgb(var(--md-warning)) !important; }
.manadrama-app .text-mana-danger { color: rgb(var(--md-danger)) !important; }
.manadrama-app .text-white { color: var(--md-heading) !important; }

.manadrama-app .border-mana-900,
.manadrama-app .border-mana-800,
.manadrama-app .border-mana-700,
.manadrama-app .border-mana-600,
.manadrama-app .border-mana-500,
.manadrama-app .border-mana-400 { border-color: rgb(var(--md-700)) !important; }
.manadrama-app .border-mana-accent { border-color: rgb(var(--md-accent)) !important; }
.manadrama-app .border-mana-success { border-color: rgb(var(--md-success)) !important; }
.manadrama-app .border-mana-warning { border-color: rgb(var(--md-warning)) !important; }
.manadrama-app .border-mana-danger { border-color: rgb(var(--md-danger)) !important; }

.manadrama-app .glass-panel {
  background: var(--bg-card) !important;
  color: var(--text-main);
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: blur(12px);
}

.manadrama-app input,
.manadrama-app textarea,
.manadrama-app select {
  color: var(--text-main) !important;
  background-color: var(--bg-card) !important;
  border-color: var(--border-strong) !important;
}
.manadrama-app option { color: var(--text-main); background: var(--bg-card); }
.manadrama-app input::placeholder,
.manadrama-app textarea::placeholder { color: var(--text-muted) !important; }

.manadrama-app .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.manadrama-app .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.manadrama-app .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.manadrama-app .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Native ManaResource page framing */
.mdrama-intro {
  border-bottom: 1px solid var(--border-color);
  background: var(--gradient-hero);
  padding: 20px clamp(18px, 4vw, 48px);
}
.mdrama-intro-inner { max-width: 1500px; margin: 0 auto; display:flex; gap:16px; align-items:center; justify-content:space-between; }
.mdrama-intro h1 { margin:0; font-size:clamp(20px,2vw,28px); font-weight:900; color:var(--text-heading); }
.mdrama-intro p { margin:5px 0 0; color:var(--text-muted); font-size:13px; }
.mdrama-badge { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:999px; background:var(--accent-soft); color:var(--text-heading); border:1px solid var(--border-color); font-size:11px; font-weight:900; white-space:nowrap; }

@media (max-width: 760px) {
  #root { min-height: calc(100vh - 64px); }
  .mdrama-intro-inner { align-items:flex-start; flex-direction:column; }
  .mdrama-badge { white-space:normal; }
  .manadrama-app .w-64 { width: 190px !important; }
  .manadrama-app .p-8 { padding: 20px !important; }
}