/* Celestial Usher — frontend styles. CSS variables driven by config. */
:root {
  --cu-bg-0: #1A0B2E;
  --cu-bg-1: #2A1248;
  --cu-ink-0: #F6F1FF;
  --cu-ink-1: #C9BFE0;
  --cu-ink-2: #8B7FA8;
  --cu-line: rgba(246,241,255,0.10);
  --cu-line-2: rgba(246,241,255,0.18);
  --cu-accent: #FF6B9D;
  --cu-pink: #FF6B9D;
  --cu-violet: #A78BFA;
  --cu-sun: #FFD93D;
  --cu-mint: #4ECDC4;
  --cu-bg-intensity: 1;
  --cu-serif: "Instrument Serif", "Fraunces", Georgia, serif;
  --cu-sans: "Geist", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cu-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
.cu-theme-midnight { --cu-bg-0:#0B0B2A; --cu-bg-1:#161640; --cu-ink-0:#F5E6C8; --cu-ink-1:#C9BFA0; --cu-ink-2:#8B7F70; --cu-accent:#E8C547; --cu-pink:#E8C547; --cu-violet:#6B4FBB; --cu-sun:#F5E6C8; --cu-mint:#A78BFA; }
.cu-theme-rose     { --cu-bg-0:#2A0F2C; --cu-bg-1:#3D1B40; --cu-ink-0:#FFEFE6; --cu-ink-1:#E8C9C5; --cu-ink-2:#A88B8B; --cu-accent:#FFB4A2; --cu-pink:#FFB4A2; --cu-violet:#CDB4DB; --cu-sun:#FFD6A5; --cu-mint:#FFC8DD; }
.cu-theme-jade     { --cu-bg-0:#0F2027; --cu-bg-1:#19353D; --cu-ink-0:#E6FFF7; --cu-ink-1:#B5D8C7; --cu-ink-2:#7E988A; --cu-accent:#4ECDC4; }
.cu-light          { --cu-bg-0:#F7F2FA; --cu-bg-1:#FFFFFF; --cu-ink-0:#1A0B2E; --cu-ink-1:#4B3A6B; --cu-ink-2:#7E6F92; --cu-line:rgba(26,11,46,0.10); --cu-line-2:rgba(26,11,46,0.18); }

#celestial-usher-root, .celestial-usher-inline { font-family: var(--cu-sans); }

/* Floating launcher */
.cu-launcher {
  position: fixed; right: 24px; bottom: 24px; z-index: 999998;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--cu-violet), var(--cu-pink) 70%, var(--cu-sun));
  color: #1a0b2e; font-weight: 600; font-family: var(--cu-sans);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.6), 0 0 28px -6px var(--cu-accent);
  transition: transform .2s ease;
}
.cu-launcher:hover { transform: translateY(-2px); }
.cu-launcher .cu-spark { animation: cu-twinkle 2.5s ease-in-out infinite; }
@keyframes cu-twinkle { 0%,100%{opacity:.5;transform:rotate(0)} 50%{opacity:1;transform:rotate(180deg)} }

/* Modal scrim + sheet */
.cu-scrim { position: fixed; inset: 0; z-index: 999999; background: rgba(10,4,30,0.7); backdrop-filter: blur(8px); animation: cu-fade .25s ease; }
.cu-sheet { position: fixed; inset: 24px; z-index: 1000000; background: var(--cu-bg-0); color: var(--cu-ink-0);
  border-radius: 28px; overflow: auto; border: 1px solid var(--cu-line-2); animation: cu-rise .35s cubic-bezier(.2,.7,.2,1); }
@keyframes cu-fade { from{opacity:0} to{opacity:1} }
@keyframes cu-rise { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.cu-close { position: fixed; top: 40px; right: 40px; z-index: 1000001;
  width: 40px; height: 40px; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; line-height: 1; font-size: 18px;
  background: rgba(20, 10, 40, 0.65); backdrop-filter: blur(10px);
  border: 1px solid var(--cu-line-2); color: var(--cu-ink-0);
  cursor: pointer; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.cu-close:hover { background: rgba(40, 20, 70, 0.85); border-color: var(--cu-accent); transform: rotate(90deg); }
.cu-close:focus-visible { outline: 2px solid var(--cu-accent); outline-offset: 2px; }
.cu-close svg { display: block; }

/* Cosmos backdrop inside sheet */
.cu-cosmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.cu-cosmos .cu-grad { position: absolute; border-radius: 50%; filter: blur(80px); opacity: calc(0.5 * var(--cu-bg-intensity)); animation: cu-drift 30s ease-in-out infinite; }
.cu-cosmos .g1 { width: 60vw; height: 60vw; left: -10vw; top: -20vw; background: radial-gradient(circle,var(--cu-pink),transparent 60%); }
.cu-cosmos .g2 { width: 55vw; height: 55vw; right: -15vw; top: 20vh; background: radial-gradient(circle,var(--cu-violet),transparent 60%); animation-delay: -10s; }
.cu-cosmos .g3 { width: 45vw; height: 45vw; left: 20vw; bottom: -20vw; background: radial-gradient(circle,var(--cu-mint),transparent 60%); animation-delay: -20s; }
@keyframes cu-drift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(4vw,-3vh) scale(1.06)} 66%{transform:translate(-3vw,4vh) scale(.96)} }

.cu-app { position: relative; z-index: 1; }
.cu-glass { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid var(--cu-line); border-radius: 28px; backdrop-filter: blur(14px); }
.cu-light .cu-glass { background: rgba(255,255,255,0.6); }

.cu-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; border:1px solid var(--cu-line-2); background:rgba(255,255,255,0.04); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--cu-ink-1); }
.cu-pill .cu-dot { width:6px; height:6px; border-radius:50%; background:var(--cu-accent); box-shadow:0 0 10px var(--cu-accent); }
.cu-display { font-family: var(--cu-serif); font-weight:400; letter-spacing:-0.02em; line-height:.95; }
.cu-italic { font-style: italic; }
.cu-num { font-family: var(--cu-mono); font-variant-numeric: tabular-nums; }

.cu-btn-primary { display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; background:var(--cu-accent); color:#1a0b2e; border:none; font-weight:600; cursor:pointer; box-shadow:0 10px 40px -10px var(--cu-accent); transition:transform .2s ease, filter .2s ease; }
.cu-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.cu-btn-primary:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.cu-btn-ghost { display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; background:rgba(255,255,255,0.06); color:var(--cu-ink-0); border:1px solid var(--cu-line-2); cursor:pointer; }
.cu-btn-ghost:hover { background:rgba(255,255,255,0.12); }

.cu-input, .cu-textarea { width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--cu-line-2); color:var(--cu-ink-0); padding:18px 20px; border-radius:18px; font-size:18px; outline:none; font-family: inherit; }
.cu-input:focus, .cu-textarea:focus { border-color: var(--cu-accent); }
.cu-light .cu-input, .cu-light .cu-textarea { background: rgba(0,0,0,0.04); }

.cu-chip { padding:14px 18px; border-radius:16px; background:rgba(255,255,255,0.04); border:1px solid var(--cu-line-2); display:flex; align-items:center; gap:12px; font-size:16px; cursor:pointer; text-align:left; color: inherit; font: inherit; transition: all .18s ease; }
.cu-chip:hover { background:rgba(255,255,255,0.09); transform: translateX(2px); }
.cu-chip.sel { background: color-mix(in oklab, var(--cu-accent) 18%, transparent); border-color: var(--cu-accent); }

@keyframes cu-fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes cu-fadeOut { from{opacity:1;transform:none} to{opacity:0;transform:translateY(-28px)} }
.cu-in  { animation: cu-fadeUp .55s cubic-bezier(.2,.7,.2,1) both; }
.cu-out { animation: cu-fadeOut .35s cubic-bezier(.5,0,.7,.3) both; }

@keyframes cu-bounce { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-4px);opacity:1} }
@keyframes cu-spin { to { transform: rotate(360deg); } }

.cu-grid-2 { display:grid; grid-template-columns: minmax(220px,280px) 1fr; gap:60px; align-items:start; }
.cu-grid-pkg { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media (max-width: 900px) { .cu-grid-2 { grid-template-columns: 1fr !important; gap: 30px !important; } .cu-grid-pkg { grid-template-columns: 1fr !important; } }

.cu-progress { position: sticky; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.06); }
.cu-progress > i { display:block; height: 100%; background: linear-gradient(90deg, var(--cu-violet), var(--cu-pink), var(--cu-sun)); transition: width .55s cubic-bezier(.2,.7,.2,1); }