
:root {
  --color-grape: #671daf;
  --color-mardi: #8d267c;
  --color-mauve: #7e1f86;
  --color-gold: #f6d87c;
  --color-ink: #0b032d;
  --radius-2xl: 1.25rem;
  --shadow-soft: 0 10px 25px rgba(0,0,0,.15);
  --glass: rgba(255,255,255,.08);
}
body.lunamyst-body { background:#0b032d; color:#fff; }
.lunamyst-theme {
  color: #fff;
  background: radial-gradient(1100px 600px at 70% -20%, rgba(255,255,255,.06), transparent 60%),
              radial-gradient(800px 400px at -10% 120%, rgba(126,31,134,.25), transparent 60%),
              var(--color-ink);
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
}
.lunamyst-card {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-2xl);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
}
.lunamyst-button {
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  background: linear-gradient(135deg, var(--color-grape), var(--color-mardi));
  color:#fff;font-weight:600;text-decoration:none;cursor:pointer;
}
.lunamyst-nav {
  position: sticky; top:0; z-index: 10;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; backdrop-filter: blur(10px);
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.lunamyst-tabs { display:flex; gap:.5rem; }
.lunamyst-tab {
  padding:.55rem .85rem; border-radius: 999px; border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06); color:#fff; text-decoration:none; font-weight:600; font-size:.9rem;
}
.lunamyst-tab.active { background: linear-gradient(135deg, var(--color-grape), var(--color-mauve)); }
.lunamyst-section { padding: 1rem; }
.lunamyst-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.lunamyst-badge { display:inline-flex; gap:.35rem; padding:.3rem .6rem;border-radius:999px;background:rgba(246,216,124,.15);color:var(--color-gold);border:1px solid rgba(246,216,124,.35);font-size:.75rem; }

/* Install modal */
.lunamyst-install-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter: blur(3px); display:none; z-index:999999; }
.lunamyst-install-modal { position:fixed; inset:auto 1rem 1rem auto; max-width: 380px; background: var(--glass); border:1px solid rgba(255,255,255,.15); border-radius: var(--radius-2xl); padding: 1rem; color:#fff; display:none; z-index:1000000; }
.lunamyst-install-modal .actions { display:flex; gap:.5rem; margin-top:.75rem; }
.lunamyst-install-modal .close { background:transparent; border:none; color:#fff; cursor:pointer; font-size:1rem; }
.lunamyst-hidden { display:none !important; }

/* Login */
.lunamyst-login { max-width: 420px; margin: 2rem auto; }
.lunamyst-login form { display:flex; flex-direction:column; gap:.6rem; }
.lunamyst-input { padding:.7rem .9rem; border-radius:.75rem; border:1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color:#fff; }
.lunamyst-input::placeholder { color: rgba(255,255,255,.6); }
