@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";
/* [project]/src/modules/persona_manager/styles/persona-studio.css [app-client] (css) */
@font-face {
  font-family: Bebas Neue;
  src: url("https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2") format("woff2");
  font-display: swap;
}

.persona-studio {
  --background: #f6f8ff;
  --foreground: #12161f;
  --card-bg: #fafcffcc;
  --card-bg-solid: #fff;
  --primary: #4055ff;
  --primary-foreground: #f6f8ff;
  --secondary: #dde4f9;
  --muted: #e6ebf9;
  --muted-foreground: #5c6375;
  --accent: #00949b;
  --border: #d2d7e5;
  --destructive: #d40924;
  --accent-h: 270;
  --accent-h2: 300;
  --color-background: #f6f8ff;
  --color-foreground: #12161f;
  --color-card: #fff;
  --color-card-foreground: #12161f;
  --color-muted: #e6ebf9;
  --color-muted-foreground: #5c6375;
  --color-border: #d2d7e5;
  --color-input: #d2d7e5;
  --color-secondary: #dde4f9;
  --color-secondary-foreground: #12161f;
  --radius-sm: .5rem;
  --radius-md: .625rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --density-pad: 1.25rem;
  --density-gap: 1.5rem;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  background-attachment: fixed;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

@supports (color: lab(0% 0 0)) {
  .persona-studio {
    --background: lab(97.6253% .0680089 -3.78776);
    --foreground: lab(7.09447% .629641 -7.27823);
    --card-bg: lab(98.8131% .0265837 -1.89835 / .8);
    --primary: lab(43.9452% 38.4761 -88.5684);
    --primary-foreground: lab(97.6253% .0680089 -3.78776);
    --secondary: lab(90.5441% .401288 -11.2571);
    --muted: lab(92.9267% .200748 -7.53934);
    --muted-foreground: lab(41.8093% .647396 -11.1455);
    --accent: lab(55.4663% -61.3902 -25.0384);
    --border: lab(85.9662% .209242 -7.53478);
    --destructive: lab(45.5382% 69.8881 46.2994);
    --color-background: lab(97.6253% .0680089 -3.78776);
    --color-foreground: lab(7.09447% .629641 -7.27823);
    --color-card: lab(100% 0 0);
    --color-card-foreground: lab(7.09447% .629641 -7.27823);
    --color-muted: lab(92.9267% .200748 -7.53934);
    --color-muted-foreground: lab(41.8093% .647396 -11.1455);
    --color-border: lab(85.9662% .209242 -7.53478);
    --color-input: lab(85.9662% .209242 -7.53478);
    --color-secondary: lab(90.5441% .401288 -11.2571);
    --color-secondary-foreground: lab(7.09447% .629641 -7.27823);
  }
}

.persona-studio[data-density="compact"], .persona-studio [data-density="compact"] {
  --density-pad: .875rem;
  --density-gap: 1rem;
}

.persona-studio[data-theme="dark"], .persona-studio [data-theme="dark"] {
  --background: #09090b;
  --foreground: #e2e4eb;
  --card-bg: #ffffff0d;
  --card-bg-solid: #18181be6;
  --muted: #1e212b;
  --muted-foreground: #888fa2;
  --border: #ffffff1f;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

@supports (color: lab(0% 0 0)) {
  .persona-studio[data-theme="dark"], .persona-studio [data-theme="dark"] {
    --background: lab(2.51142% .232123 -.889981);
    --foreground: lab(90.6652% .0699461 -3.78664);
    --card-bg: lab(100% 0 0 / .05);
    --card-bg-solid: lab(8.307% .588819 -2.17513 / .9);
    --muted: lab(12.8655% .553653 -7.38313);
    --muted-foreground: lab(59.2168% .522286 -11.1996);
    --border: lab(100% 0 0 / .12);
  }
}

.persona-studio[data-theme="dark"] {
  background: radial-gradient(1200px 800px at 10% -10%, oklch(.35 .18 var(--accent-h) / .35), transparent 60%), radial-gradient(1000px 700px at 110% 110%, oklch(.4 .18 var(--accent-h2) / .3), transparent 60%), #0a0a1a;
  background-attachment: fixed;
}

.persona-studio *, .persona-studio :before, .persona-studio :after {
  box-sizing: border-box;
}

.persona-studio .font-bebas {
  letter-spacing: .05em;
  font-family: Bebas Neue, Inter, sans-serif;
}

.persona-studio .glass {
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px oklch(.5 .05 var(--accent-h) / .1), inset 0 1px 0 #ffffff40;
  border: 1px solid #ffffff80;
  border: 1px solid lab(100% 0 0 / .5);
}

@supports (color: lab(0% 0 0)) {
  .persona-studio .glass {
    box-shadow: 0 8px 32px oklch(.5 .05 var(--accent-h) / .1), inset 0 1px 0 lab(100% 0 0 / .25);
  }
}

.persona-studio[data-theme="dark"] .glass, .persona-studio[data-theme="dark"] .glass-card, .persona-studio [data-theme="dark"] .glass, .persona-studio [data-theme="dark"] .glass-card {
  background: #ffffff0d;
  background: lab(100% 0 0 / .05);
  border-color: #ffffff1f;
  border-color: lab(100% 0 0 / .12);
  box-shadow: 0 8px 32px #0006, inset 0 1px #ffffff0f;
  box-shadow: 0 8px 32px lab(0% 0 0 / .4), inset 0 1px lab(100% 0 0 / .06);
}

.persona-studio .glass-card {
  background: var(--card-bg-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px #ffffffb3, 0 4px 16px #4d473c0f;
  box-shadow: 0 1px lab(100% 0 0 / .7), 0 4px 16px lab(30.4446% 1.38746 7.72033 / .06);
}

.persona-studio .glass-primary {
  background: linear-gradient(135deg, oklch(.55 .25 var(--accent-h) / .95) 0%, oklch(.5 .22 var(--accent-h2) / .95) 100%);
  color: #fff;
  box-shadow: 0 8px 24px oklch(.55 .25 var(--accent-h) / .35), inset 0 1px 0 #ffffff40;
  border: 1px solid #ffffff40;
  border: 1px solid lab(100% 0 0 / .25);
}

@supports (color: lab(0% 0 0)) {
  .persona-studio .glass-primary {
    box-shadow: 0 8px 24px oklch(.55 .25 var(--accent-h) / .35), inset 0 1px 0 lab(100% 0 0 / .25);
  }
}

.persona-studio .grad-text {
  background: linear-gradient(100deg, oklch(.55 .25 var(--accent-h)) 0%, oklch(.5 .22 var(--accent-h2)) 100%);
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}

.persona-studio .grad-bg {
  background: linear-gradient(135deg, oklch(.55 .25 var(--accent-h)) 0%, oklch(.5 .22 var(--accent-h2)) 100%);
}

.persona-studio .grad-bg-soft {
  background: linear-gradient(135deg, oklch(.85 .1 var(--accent-h) / .55) 0%, oklch(.85 .09 var(--accent-h2) / .55) 100%);
}

.persona-studio .btn {
  border-radius: var(--radius-md);
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid #0000;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1rem;
  font-family: Bebas Neue, sans-serif;
  font-size: .875rem;
  transition: all .25s;
  display: inline-flex;
}

.persona-studio .btn-primary {
  background: linear-gradient(to right, oklch(.55 .25 var(--accent-h)), oklch(.5 .22 var(--accent-h2)));
  color: #fff;
  box-shadow: 0 8px 20px oklch(.55 .25 var(--accent-h) / .35);
}

.persona-studio .btn-primary:hover {
  box-shadow: 0 12px 28px oklch(.55 .25 var(--accent-h) / .45);
  transform: translateY(-1px)scale(1.02);
}

.persona-studio .btn-ghost {
  color: var(--foreground);
  border-color: var(--border);
  background: none;
}

.persona-studio .btn-ghost:hover {
  background: oklch(.55 .25 var(--accent-h) / .1);
  transform: translateY(-1px);
}

.persona-studio .btn-sm {
  padding: .4rem .75rem;
  font-size: .75rem;
}

.persona-studio .chip {
  letter-spacing: .04em;
  background: oklch(.55 .25 var(--accent-h) / .12);
  color: oklch(.45 .22 var(--accent-h));
  border: 1px solid oklch(.55 .25 var(--accent-h) / .2);
  border-radius: 9999px;
  align-items: center;
  gap: .35rem;
  padding: .25rem .625rem;
  font-size: .7rem;
  font-weight: 600;
  display: inline-flex;
}

.persona-studio[data-theme="dark"] .chip, .persona-studio [data-theme="dark"] .chip {
  background: oklch(.55 .25 var(--accent-h) / .25);
  color: oklch(.85 .1 var(--accent-h));
  border-color: oklch(.55 .25 var(--accent-h) / .4);
}

.persona-studio .chip-muted {
  color: var(--muted-foreground);
  border-color: var(--border);
  background: #6d717e1a;
  background: lab(47.6814% .289828 -7.49383 / .1);
}

.persona-studio .tab {
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  color: var(--muted-foreground);
  border: 1px solid #0000;
  border-radius: 9999px;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem;
  font-family: Bebas Neue, sans-serif;
  font-size: .8rem;
  transition: all .2s;
  display: inline-flex;
}

.persona-studio .tab:hover {
  color: var(--foreground);
  background: oklch(.55 .25 var(--accent-h) / .08);
}

.persona-studio .tab-active {
  background: linear-gradient(to right, oklch(.55 .25 var(--accent-h)), oklch(.5 .22 var(--accent-h2)));
  color: #fff;
  box-shadow: 0 6px 16px oklch(.55 .25 var(--accent-h) / .35);
}

.persona-studio .tab-letter {
  opacity: .75;
  border: 1px solid;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 1.1rem;
  height: 1.1rem;
  font-family: Bebas Neue, sans-serif;
  font-size: .7rem;
  display: inline-flex;
}

.persona-studio .tab-active .tab-letter {
  opacity: 1;
  border-color: #fff;
}

.persona-studio .input {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--foreground);
  background: #ffffff80;
  background: lab(100% 0 0 / .5);
  outline: none;
  width: 100%;
  padding: .55rem .8rem;
  font-family: Inter, sans-serif;
  font-size: .875rem;
  transition: all .2s;
}

.persona-studio .input:focus {
  border-color: oklch(.55 .25 var(--accent-h));
  box-shadow: 0 0 0 3px oklch(.55 .25 var(--accent-h) / .15);
}

.persona-studio[data-theme="dark"] .input, .persona-studio [data-theme="dark"] .input {
  background: #ffffff0d;
  background: lab(100% 0 0 / .05);
}

.persona-studio ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.persona-studio ::-webkit-scrollbar-track {
  background: oklch(.95 .01 var(--accent-h) / .35);
  border-radius: 8px;
}

.persona-studio ::-webkit-scrollbar-thumb {
  background: oklch(.7 .05 var(--accent-h) / .5);
  border-radius: 8px;
}

.persona-studio ::-webkit-scrollbar-thumb:hover {
  background: oklch(.55 .15 var(--accent-h) / .7);
}

.persona-studio .section-letter {
  letter-spacing: .02em;
  font-family: Bebas Neue;
  font-size: 3rem;
  line-height: 1;
}

.persona-studio .bar-track {
  background: oklch(.55 .05 var(--accent-h) / .12);
  border-radius: 9999px;
  height: 8px;
  position: relative;
  overflow: hidden;
}

.persona-studio .bar-fill {
  background: linear-gradient(to right, oklch(.55 .25 var(--accent-h)), oklch(.5 .22 var(--accent-h2)));
  border-radius: 9999px;
  height: 100%;
  transition: width .6s;
}

.persona-studio .bar-avg {
  background: var(--muted-foreground);
  opacity: .6;
  width: 2px;
  position: absolute;
  top: -4px;
  bottom: -4px;
}

.persona-studio .heat-cell {
  aspect-ratio: 1;
  border: 1px solid #ffffff4d;
  border: 1px solid lab(100% 0 0 / .3);
  border-radius: 6px;
  position: relative;
}

@keyframes persona-studio-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.persona-studio .animate-float {
  animation: 6s ease-in-out infinite persona-studio-float;
}

@keyframes persona-studio-pulse-soft {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .6;
  }
}

.persona-studio .pulse-soft {
  animation: 2.4s ease-in-out infinite persona-studio-pulse-soft;
}

.persona-studio .muted {
  color: var(--muted-foreground);
}

.persona-studio .border-soft {
  border: 1px solid var(--border);
}

.persona-studio .tab-scroll {
  scrollbar-width: none;
  overflow-x: auto;
}

.persona-studio .tab-scroll::-webkit-scrollbar {
  display: none;
}

.persona-studio .prose-narrative p {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.7;
}

.persona-studio .prose-narrative p:first-of-type {
  color: var(--foreground);
  font-size: 1.15rem;
}

.persona-studio .prose-narrative strong {
  color: var(--foreground);
  font-weight: 700;
}

.persona-studio .prose-narrative em {
  color: oklch(.45 .2 var(--accent-h));
  font-style: normal;
  font-weight: 600;
}

.persona-studio .drop-cap:first-letter {
  float: left;
  background: linear-gradient(135deg, oklch(.55 .25 var(--accent-h)), oklch(.5 .22 var(--accent-h2)));
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
  margin: .35rem .75rem 0 0;
  font-family: Bebas Neue;
  font-size: 4.5rem;
  line-height: .85;
}

.persona-studio .divider {
  background: linear-gradient(to right, transparent, var(--border), transparent);
  border: 0;
  height: 1px;
}