:root { --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg1:#F6F7F9; --accent:#1f2937; --ok:#15803d; --warn:#b45309; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
body {
  font-family:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg, #F6F7F9 0%, #9AA3AF 100%);
  background-attachment:fixed;
  display:flex; align-items:flex-start; justify-content:center;
  padding:32px 16px;
}
.card {
  width:100%; max-width:520px; background:#ffffff;
  border:1px solid var(--line); border-radius:24px;
  box-shadow:0 18px 50px rgba(31,41,55,.10);
  padding:36px 28px;
}
.head { text-align:center; }
.logo { width:80px; height:80px; border-radius:20px; box-shadow:0 8px 22px rgba(31,41,55,.16); display:block; margin:0 auto; }
h1 { font-family:'Montserrat', sans-serif; font-weight:800; letter-spacing:.14em; font-size:24px; margin:16px 0 4px; }
.sub { color:var(--muted); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 24px; }
.lead { font-weight:600; font-size:15px; line-height:1.5; margin:0 0 16px; }
.lbl { display:block; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 6px; }
input {
  width:100%; font:inherit; font-size:17px; padding:12px 14px;
  border:1px solid #cfd4dc; border-radius:12px; outline:none; background:#fff;
}
input:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(31,41,55,.12); }
#code { letter-spacing:.3em; text-align:center; font-weight:700; }
.btn {
  display:block; width:100%; margin-top:14px; padding:13px 16px;
  font:inherit; font-weight:700; font-size:15px; color:#fff;
  background:var(--accent); border:0; border-radius:12px; cursor:pointer;
}
.btn:hover:not(:disabled) { filter:brightness(1.15); }
.btn:disabled { background:#cbd5e1; color:#475569; cursor:not-allowed; }
.btn.small { width:auto; margin:0; padding:9px 14px; font-size:13px; }
.link { background:none; border:0; padding:0; font:inherit; font-size:13px; color:var(--muted); text-decoration:underline; cursor:pointer; }
.msg { min-height:20px; font-size:13px; line-height:1.5; margin:12px 0 0; color:var(--muted); }
.msg.err { color:#b91c1c; font-weight:600; }
.msg.ok  { color:var(--ok); font-weight:600; }
.who { font-size:13px; color:var(--muted); margin:0 0 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.who b { color:var(--ink); word-break:break-all; }
.note { font-size:12.5px; color:var(--muted); line-height:1.6; margin:18px 0 0; text-align:center; }

.dev { border:1px solid var(--line); border-radius:18px; padding:16px; margin:0 0 14px; background:#fafafb; }
.dev-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; }
.dev-name { font-family:'Montserrat', sans-serif; font-weight:700; font-size:16px; }
.dev-meta { font-size:12px; color:var(--muted); margin-top:2px; }
.pill { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:#e5e7eb; color:#374151; white-space:nowrap; }
.pill.on  { background:#dcfce7; color:var(--ok); }
.pill.off { background:#fee2e2; color:#991b1b; }

.plan { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; margin-top:10px; }
.plan-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.plan-name { font-weight:800; font-size:14px; }
.plan-desc { font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:4px; }
.price { font-family:'Montserrat', sans-serif; font-weight:800; font-size:22px; white-space:nowrap; }
.price span { font-family:'Manrope', sans-serif; font-weight:600; font-size:12px; color:var(--muted); }
.plan-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.status { font-size:12.5px; font-weight:700; }
.status.on { color:var(--ok); }
.status.warn { color:var(--warn); }
.empty { text-align:center; color:var(--muted); font-size:14px; line-height:1.6; padding:12px 0; }

.foot { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); color:#9aa3af; font-size:12px; line-height:1.7; text-align:center; }
.foot a { color:#6b7280; text-decoration:none; }
.foot a:hover { text-decoration:underline; }
@media (max-width:380px){ .card{ padding:28px 18px; } h1{ font-size:21px; } .price{ font-size:19px; } }