/* Luna Cloud: shared styles (same look as the Luna panel). Light + dark (follows the system unless chosen). */
:root {
  --bg:#fff4f8; --card:#ffffff; --card2:#fffafc; --line:#fbdbe7; --line2:#f5c6d8;
  --text:#4b2140; --dim:#9a6a86; --faint:#c79ab3;
  --pink:#ff5fa2; --rose:#ff8fbf; --violet:#b98cff; --green:#22a978; --amber:#b0701a; --red:#e5486f; --blue:#4567c9;
  --grad: linear-gradient(135deg, #ff7eb3 0%, #ff9fcc 45%, #c9a2ff 100%);
  --grad-soft: linear-gradient(135deg, #ffe3ef 0%, #fff0f7 50%, #f1e6ff 100%);
  --shadow: 0 12px 34px rgba(255,95,162,.12), 0 2px 6px rgba(185,140,255,.08);
  --radius: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#140b14; --card:#1f121e; --card2:#251624; --line:#3a2238; --line2:#4a2c47;
    --text:#f6e3ef; --dim:#c79bb5; --faint:#8f6a82; --amber:#f5c26b; --blue:#a9c3ff;
    --grad-soft: linear-gradient(135deg, #2a1628 0%, #241422 50%, #231a33 100%);
    --shadow: 0 12px 34px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg:#140b14; --card:#1f121e; --card2:#251624; --line:#3a2238; --line2:#4a2c47;
  --text:#f6e3ef; --dim:#c79bb5; --faint:#8f6a82; --amber:#f5c26b; --blue:#a9c3ff;
  --grad-soft: linear-gradient(135deg, #2a1628 0%, #241422 50%, #231a33 100%);
  --shadow: 0 12px 34px rgba(0,0,0,.35);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--text); font:15px/1.6 Nunito, Quicksand, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(900px 520px at 90% -10%, rgba(201,162,255,.22), transparent 60%),
              radial-gradient(800px 480px at -10% 100%, rgba(255,126,179,.18), transparent 60%), var(--bg);
  background-attachment: fixed; min-height:100vh;
}
h1, h2, h3, .brand b { font-family: Quicksand, Nunito, system-ui, sans-serif; letter-spacing:-.2px; }
a { color:var(--pink); }
.wrap { max-width:1160px; margin:0 auto; padding:0 20px; }
.muted { color:var(--dim); }
.small { font-size:13px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size:13px; overflow-wrap:anywhere; }

/* top bar */
.top { position:sticky; top:0; z-index:20; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:16px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand .logo { width:38px; height:38px; border-radius:13px; display:grid; place-items:center; font-size:19px; background:var(--grad); box-shadow:0 8px 22px rgba(255,95,162,.3); }
.brand b { font-size:20px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.top nav { margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.top nav a { color:var(--dim); text-decoration:none; font-weight:700; padding:8px 12px; border-radius:12px; }
.top nav a:hover { color:var(--text); background:var(--card2); }

/* buttons + inputs */
.btn, button { font:inherit; font-weight:800; border-radius:14px; padding:10px 18px; border:1px solid var(--line2); background:var(--card); color:var(--text); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn:hover, button:hover { border-color:var(--rose); }
.btn.go, button.go { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(255,95,162,.28); }
.btn.big { padding:14px 26px; font-size:16px; }
button.bad, .btn.bad { color:var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 8%, var(--card)); }
button:disabled { opacity:.55; cursor:default; }
input, select, textarea { width:100%; font:inherit; font-weight:700; color:var(--text); background:var(--card2); border:1px solid var(--line); border-radius:13px; padding:11px 13px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,95,162,.15); }
label.f { display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:800; color:var(--dim); }
label.chk { display:flex; align-items:center; gap:8px; font-weight:700; cursor:pointer; }
label.chk input { width:auto; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color:var(--pink); }
label.chk { font-size:14px; }
/* buttons inside tables: one compact size */
td button, td .btn { padding:7px 14px; font-size:13px; border-radius:11px; min-width:72px; }
td .row { flex-wrap:nowrap; }

/* cards */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.card h2 { margin:0 0 4px; font-size:19px; }
.grid { display:grid; gap:16px; }
.g2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.pill { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:800; background:var(--card2); color:var(--dim); border:1px solid var(--line); }
.pill.ok { color:var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 10%, var(--card)); }
.pill.warn { color:var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: color-mix(in srgb, var(--amber) 10%, var(--card)); }
.pill.bad { color:var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 10%, var(--card)); }
.pill.pink { color:var(--pink); border-color: color-mix(in srgb, var(--pink) 40%, transparent); background: color-mix(in srgb, var(--pink) 10%, var(--card)); }
.note { color:var(--amber); font-weight:700; font-size:13px; }
.err { color:var(--red); font-weight:700; min-height:1px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.stats { display:flex; gap:28px; flex-wrap:wrap; }
.stats div { display:flex; flex-direction:column; font-size:12.5px; font-weight:700; color:var(--dim); }
.stats b { font-size:20px; color:var(--text); font-variant-numeric:tabular-nums; }
.kpi .v { font-size:28px; font-weight:800; font-family:Quicksand, sans-serif; font-variant-numeric:tabular-nums; }
.kpi .l { color:var(--dim); font-weight:700; font-size:13px; }

/* tables */
.table { overflow-x:auto; border:1px solid var(--line); border-radius:16px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:11px 13px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:14px; }
th { color:var(--pink); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; font-weight:800; background:var(--card2); }
tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--card2); }

/* plans */
.plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
.plan { position:relative; display:flex; flex-direction:column; gap:10px; }
.plan.featured { border:2px solid var(--pink); }
.plan .tag { position:absolute; top:-12px; right:18px; background:var(--grad); color:#fff; font-size:12px; font-weight:800; padding:3px 12px; border-radius:99px; }
.plan .price { font-size:38px; font-weight:800; font-family:Quicksand, sans-serif; }
.plan .price span { font-size:15px; color:var(--dim); font-weight:700; }
.plan ul { margin:0; padding-left:18px; color:var(--dim); font-weight:600; }
.plan .btn { margin-top:auto; }

#toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px); background:var(--grad); color:#fff; font-weight:800; padding:12px 20px; border-radius:16px;
  box-shadow:0 14px 40px rgba(255,95,162,.35); opacity:0; pointer-events:none; transition: opacity .25s, transform .3s; z-index:100; max-width:90vw; text-align:center; }
#toast.show { opacity:1; transform:translate(-50%, 0); }

@media (max-width: 880px) {
  .g2, .g3, .g4 { grid-template-columns:1fr; }
  .top nav a.hide-m { display:none; }
}

/* never show the browser's own autofill colour inside Luna's fields */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:autofill { -webkit-text-fill-color:var(--text); caret-color:var(--text); transition:background-color 600000s 0s, color 600000s 0s; -webkit-box-shadow:0 0 0 1000px transparent inset; }