:root{
  --bg:#030305;
  --panel:#0b1222;
  --panel2:rgba(15,23,42,.75);
  --border:rgba(148,163,184,.18);
  --border2:rgba(56,189,248,.22);
  --fg:#e2e8f0;
  --sub:#94a3b8;
  --cyan:#38bdf8;
  --pink:#fb37a0;
  --purple:#a78bfa;
  --grad:linear-gradient(135deg,var(--pink),var(--cyan));

  /* aliases used by LandingStyle.css / DashboardStyle.css */
  --neon-cyan: var(--cyan);
  --neon-pink: var(--pink);
  --neon-purple: var(--purple);
  --gradient-primary: var(--grad);
  --shadow: 0 12px 40px rgba(0,0,0,.55);
  --radius:18px;
  --radius-sm:14px;
  --radius-pill:999px;

  --nav-width: 280px;
  --header-height: 78px;

  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{margin:0; height:100%; font-family:var(--sans); color:var(--fg);}

html{background:var(--bg); overflow-x:hidden;}
body{
  background:
    radial-gradient(circle at 10% 12%, rgba(251,55,160,.14), transparent 40%),
    radial-gradient(circle at 92% 18%, rgba(56,189,248,.12), transparent 42%),
    radial-gradient(circle at 55% 110%, rgba(167,139,250,.10), transparent 46%),
    linear-gradient(180deg, rgba(2,6,23,.55), rgba(0,0,0,.90)),
    var(--bg);
  background-color: var(--bg);
  overflow-x:hidden;
}

/* animated aura + subtle scan texture */
body::before{
  content:"";
  position:fixed;
  inset:-25vh -25vw;
  pointer-events:none;
  z-index:-1;
  background:
    conic-gradient(from 140deg,
      rgba(56,189,248,.0),
      rgba(56,189,248,.18),
      rgba(251,55,160,.16),
      rgba(167,139,250,.18),
      rgba(56,189,248,.0)
    );
  filter: blur(28px);
  opacity:.75;
  animation: bgspin 18s linear infinite;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.018) 1px,
      transparent 3px,
      transparent 7px
    );
  opacity:.10;
  mix-blend-mode: overlay;
}

@keyframes bgspin{
  to{ transform: rotate(360deg); }
}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--fg);
}

a{color:inherit}
.hidden{display:none !important;}
.muted{color:var(--sub);}
.small{font-size:12px;}
kbd{
  font-family:var(--mono);
  font-size: 11px;
  padding:2px 6px;
  border-radius:8px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}

/* ============ Topbar ============ */
.topbar{
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-height);
  padding: 10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  background: rgba(2,6,23,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.topbar-left, .topbar-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-mark{
  width:38px;
  height:38px;
  border-radius:14px;
  overflow:hidden;
  background: var(--grad);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 25px rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-mark-img{width:100%; height:100%; object-fit:cover; display:block;}
.logo-text{
  font-size:18px;
  font-weight:800;
  letter-spacing:.04em;
}

/* Pills in header */
.credits-pill, .user-pill{
  padding:7px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  color: var(--sub);
  font-size:12px;
  display:flex;
  align-items:center;
  gap: 8px;
  max-width: 60vw;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.credits-pill span, .user-pill b{color:var(--fg); font-weight:650}

/* ============ Buttons (Variant 2 style) ============ */
.btn{
  border:none;
  cursor:pointer;
  user-select:none;
  border-radius: var(--radius-pill);
  padding:10px 14px;
  font-weight:800;
  font-size:13px;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
  transition: transform .08s ease, filter .12s ease, opacity .12s ease;
  text-decoration:none;
}
.btn:active{transform: translateY(1px)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}

.btn.primary{
  color:#071018;
  background: var(--grad);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}
.btn.primary:hover{filter: brightness(1.08);}

.btn.ghost{
  color: var(--fg);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
}
.btn.ghost:hover{filter: brightness(1.05);}

/* Busy glow ring + orbit effect (used by app.js helper: .is-busy + .btn-spinner) */
.btn.is-busy{
  position:relative;
  overflow:hidden;
}
.btn.is-busy::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: conic-gradient(from 180deg,
    rgba(56,189,248,0),
    rgba(56,189,248,.95),
    rgba(251,55,160,.90),
    rgba(56,189,248,0)
  );
  filter: blur(12px);
  opacity:.55;
  animation: orbit 1.4s linear infinite;
}
.btn.is-busy > *{position:relative; z-index:2}
@keyframes orbit{to{transform:rotate(360deg)}}

.btn-spinner{
  width:18px;
  height:18px;
  border:none;
  background: conic-gradient(from 90deg, rgba(56,189,248,1), rgba(251,55,160,1), rgba(56,189,248,1));
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%);
  mask: radial-gradient(circle, transparent 55%, #000 56%);
  border-radius:999px;
  animation: spin .75s linear infinite;
  flex:0 0 auto;
}
@keyframes spin{to{transform: rotate(360deg)}}

/* Small inline spinner used in session/status lines */
.ui-spinner{
  width:14px;
  height:14px;
  border:none;
  background: conic-gradient(from 90deg, rgba(56,189,248,1), rgba(251,55,160,1), rgba(56,189,248,1));
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%);
  mask: radial-gradient(circle, transparent 55%, #000 56%);
  border-radius:999px;
  animation: spin .75s linear infinite;
  display:inline-block;
  vertical-align: -2px;
  margin-right:8px;
}

/* ============ Inputs ============ */
.input, .textarea, .select,
input[type="text"], input[type="email"], input[type="password"], textarea, select{
  border-radius: var(--radius-sm);
  border:1px solid rgba(51,65,85,.9);
  background: rgba(15,23,42,.95);
  color: var(--fg);
  padding: 10px 12px;
  outline:none;
  font-size:13px;
}
textarea{min-height: 120px; resize: vertical;}
.input:focus, .textarea:focus, .select:focus,
input:focus, textarea:focus, select:focus{
  border-color: rgba(56,189,248,.75);
}

/* ============ Main layout shell ============ */
.main{
  padding: 18px;
}
.main-layout{
  max-width: 1200px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: var(--nav-width) 1fr;
  gap: 16px;
  align-items:start;
}
.content-area{min-height: 60vh; overflow-x:hidden;}

/* ============ Sidebar ============ */
.sidebar{
  position: sticky;
  top: calc(var(--header-height) + 16px);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,23,42,.75), rgba(2,6,23,.92));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 14px;
  overflow:hidden;
}
.sidebar-section-label{
  font-size: 11px;
  color: var(--sub);
  letter-spacing:.10em;
  text-transform:uppercase;
  margin: 10px 6px 8px;
}
.nav-link{
  width:100%;
  text-align:left;
  border:none;
  cursor:pointer;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 4px 0;
  color: var(--fg);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  transition: filter .12s ease, transform .08s ease, border-color .12s ease;
}
.nav-link:hover{filter: brightness(1.06);}
.nav-link:active{transform: translateY(1px);}
.nav-link.active{
  border-color: rgba(56,189,248,.30);
  background: linear-gradient(135deg, rgba(251,55,160,.12), rgba(56,189,248,.10));
}
.nav-link.disabled{
  opacity:.45;
  pointer-events:none;
}

/* ============ Views + Panels ============ */
.view{display:none;}
.view.visible{display:block;}

.panel{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,23,42,.75), rgba(2,6,23,.90));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 16px;
  overflow:hidden;
}

.panel-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.panel-header h1, .panel-header h2{
  margin:0;
  font-size:16px;
}
.panel-header p{margin:3px 0 0; font-size:12px; color: var(--sub);}

/* ============ Shared "Studio" Header (image + tts reuse these classes) ============ */
.image-header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.image-header-main h1{
  margin:0;
  font-size:16px;
}
.image-header-main p{margin:3px 0 0; font-size:12px; color: var(--sub);}

.image-session-pill{
  padding:7px 10px;
  border-radius: var(--radius-pill);
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(59,130,246,.55);
  min-width: 140px;
}
.image-session-label{
  font-size:10px;
  color: var(--sub);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom: 2px;
}
.image-session-value{
  font-size:12px;
  display:flex;
  align-items:center;
}

/* Generate strip shared */
.image-generate-strip{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: var(--radius-pill);
  background: rgba(2,6,23,.65);
  border: 1px solid rgba(55,65,81,.9);
}

/* ============ Mobile navigation ============ */
.mobile-nav-toggle{display:none;}

@media (max-width: 1100px){
  .main{padding: 14px;}
  .main-layout{grid-template-columns: 240px 1fr;}
}

@media (max-width: 900px){
  :root{--header-height: 64px;}
  .main-layout{display:block;}

  /* Mobile nav becomes an overlay so it never sits behind panels */
  .sidebar{
    position: fixed;
    left: 14px;
    right: 14px;
    top: calc(var(--header-height) + 10px);
    z-index: 95;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 14px;
    pointer-events: none;
    transition: max-height .28s ease, opacity .18s ease, padding .18s ease;
  }
  body.nav-open .sidebar{
    max-height: calc(100vh - var(--header-height) - 24px);
    opacity: 1;
    overflow-y:auto;
    padding: 14px;
    pointer-events: auto;
  }

  /* Dim the page + prevent background scroll while nav is open */
  body.nav-open{overflow:hidden;}
  body.nav-open::before{
    content:"";
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(2,6,23,.55);
    backdrop-filter: blur(10px);
  }

  .mobile-nav-toggle{display:inline-flex;}
  .user-pill{display:none;}
  .logo-text{display:none;}
  .credits-pill{max-width: 55vw;}
}


@media (max-width: 520px){
  :root{--header-height: 56px;}
  .topbar{flex-wrap: wrap;}
  .credits-pill{font-size: 12px;}
}


/* ============ App shell + footer ============ */
#app{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
 overflow-x:hidden;}
.main{flex:1;}
.footer{
  padding: 18px 18px 26px;
  text-align:center;
  color: rgba(226,232,240,.55);
  font-size: 12px;
  letter-spacing: .02em;
}


/* Prevent accidental horizontal drift (trackpad) */
html, body { overscroll-behavior-x: none; }

/* Lock background scroll when a modal is open */
body.modal-open{overflow:hidden;}