:root { 
  --bg:#0b0d13; --text:#e5e7eb; --muted:#94a3b8; 
  --brand:#7dd3fc; --brand2:#60a5fa; --card:#111827; --accent:#10b981; 
}
* { box-sizing:border-box; }
body { margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color:var(--text); background:linear-gradient(180deg,#0a0c12,#0b0d13); }
.wrap { max-width:980px; margin:0 auto; padding:24px; }

/* === Header & Nav === */
.site-header { border-bottom:1px solid #1f2937; position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(6px); background:rgba(11,13,19,.75); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px; }
.brand { font-weight:700; text-decoration:none; color:var(--text); }
.brand span { color:var(--brand); }
.nav { display:flex; align-items:center; gap:16px; }
.nav a { color:var(--muted); text-decoration:none; }
.nav a:hover, .nav a:focus-visible { color:#fff; outline:none; }

.hero { padding:40px 0 28px; }
h1, h2 { line-height:1.2; margin:0 0 8px; }

/* === Buttons === */
.btn { display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; border:1px solid #2a2f3b; transition:transform .04s ease, box-shadow .16s ease, opacity .16s ease; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline:2px solid var(--brand2); outline-offset:2px; }
.btn[disabled], .btn.disabled { opacity:.55; pointer-events:none; }

.btn.primary { background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#0b0d13; border:0; font-weight:700; box-shadow:0 4px 16px rgba(96,165,250,.2); }
.btn.primary:hover { box-shadow:0 6px 20px rgba(96,165,250,.28); }

.btn.ghost { color:var(--text); background:transparent; }
.btn.ghost:hover { border-color:#384152; }

/* === Cards & Sections === */
.card { background:var(--card); border:1px solid #1f2937; border-radius:16px; padding:20px; transition:border-color .2s ease, box-shadow .2s ease; }
.card:hover { border-color:#2a3342; box-shadow:0 6px 24px rgba(2,6,23,.35); }

.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.price { font-size:28px; font-weight:800; }
.per { font-size:14px; color:var(--muted); }

/* === Footer === */
.site-footer { border-top:1px solid #1f2937; color:var(--muted); }
.legal a { color:var(--muted); margin-left:12px; }

/* === Auth Forms === */
.auth-form { display:grid; gap:12px; max-width:380px; }
.auth-form input {
  width:100%; padding:12px; border-radius:10px;
  border:1px solid #2a2f3b; background:#0f141d; color:#e5e7eb;
}
.auth-form input::placeholder { color:#6b7280; }
.auth-form input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.25); }
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color:#e5e7eb;
  -webkit-box-shadow:0 0 0px 1000px #0f141d inset;
  transition:background-color 9999s ease-in-out 0s;
}

/* === Notices & Messages === */
.notice { margin-top:12px; min-height:1.4em; font-size:14px; padding:8px 10px; border-radius:8px; border:1px solid transparent; }
.notice.ok   { color:#10b981; background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.25); }
.notice.err  { color:#fca5a5; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.25); }
.notice.warn { color:#fbbf24; background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.25); }
.msg { margin-top:12px; min-height:1.2em; color:var(--muted); } /* back-compat */

/* === Video Embed (for howto.html) === */
.video-embed { margin:20px 0; }
.video-frame {
  position:relative; width:100%; border-radius:16px; overflow:hidden;
  border:1px solid #1f2937; background:#0f141d; box-shadow:0 6px 24px rgba(2,6,23,.25);
}
.video-frame::before { content:""; display:block; padding-top:56.25%; } /* 16:9 */
.video-frame iframe, 
.video-frame .placeholder {
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-frame .placeholder {
  display:grid; place-items:center; color:var(--muted); font-size:14px;
  background:repeating-linear-gradient(
    45deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 10px,
    rgba(255,255,255,.04) 10px, rgba(255,255,255,.04) 20px
  );
}

/* === Interaction cursors === */
button, .btn { cursor:pointer; }
button:disabled, .btn.disabled, .btn[disabled] { cursor:not-allowed; }

/* === Utilities === */
.hidden { display:none !important; }
.muted { color:var(--muted); }

.updated { color:var(--muted); font-size:14px; }