/* Brand: purple and pink primary. Hex values are close approximations, replace with the official ones here. */
:root{
  --purple:#5b2a86; --purple-deep:#3f1b61; --pink:#d6006f; --pink-hover:#bf0063;
  --text:#2a1a3d; --muted:#5d4d70; --line:#ddd2ea; --bg-a:#f6effc; --bg-b:#fde9f3;
  --card:#ffffff; --skel-a:#efe6f7; --skel-b:#f9f3fd; --danger:#b00020; --ok:#1b7a3d;
  --radius:20px;
}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);background:var(--bg-a);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.backdrop{position:fixed;inset:0;z-index:-1;
  background:radial-gradient(60rem 40rem at 10% -10%,rgba(91,42,134,.22),transparent 60%),
             radial-gradient(50rem 36rem at 100% 0,rgba(214,0,111,.16),transparent 60%),
             linear-gradient(160deg,var(--bg-a),var(--bg-b))}

.topbar{position:sticky;top:12px;z-index:5;margin:12px 16px 0;padding:10px 16px;display:flex;align-items:center;gap:10px;max-width:640px;margin-inline:auto;width:calc(100% - 32px)}
.brandmark{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--purple),var(--pink))}
.brandname{font-weight:700;letter-spacing:.2px;color:var(--text)}

.wrap{max-width:640px;margin:0 auto;padding:20px 16px 56px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;box-shadow:0 6px 24px rgba(60,20,90,.08)}
h1{margin:0 0 8px;font-size:1.6rem;line-height:1.2;color:var(--purple)}

.lead{margin:0 0 20px;color:var(--muted)}

label{display:block;font-weight:600;margin-bottom:6px}
.field input{width:100%;min-height:48px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--card);color:var(--text);font:inherit;transition:border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.field input::placeholder{color:#6f6180}

.field input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(122,47,176,.18);outline:none}
.field input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.error{margin:8px 0 0;color:var(--danger);font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:14px;border:0;
  font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.btn.primary{width:100%;margin-top:14px;background:var(--pink);color:#fff;box-shadow:0 6px 16px rgba(214,0,111,.28)}
.btn.primary:hover{background:var(--pink-hover)}
.btn.primary[disabled]{cursor:progress;opacity:.9}
.btn.secondary{background:transparent;color:var(--purple);border:1.5px solid var(--purple)}

.hint{margin:12px 0 0;font-size:.875rem;color:var(--muted)}

.result{margin-top:16px;outline:none}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 6px 24px rgba(60,20,90,.08)}
.panel h2{margin:0 0 4px;font-size:1rem;color:var(--muted);font-weight:600}
.site-badge{display:flex;align-items:center;gap:12px;margin:10px 0 16px;padding:14px 16px;border-radius:18px;color:var(--text)}
.site-badge .name{font-size:1.25rem;font-weight:800;line-height:1.25;overflow-wrap:break-word;word-break:normal;min-width:0;color:var(--purple-deep)}

.tick{flex:none;width:32px;height:32px;color:var(--ok)}
.steps{margin:0 0 16px;padding-left:20px}
.steps li{margin:6px 0}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.actions .btn{flex:1 1 200px}
.sites{list-style:none;margin:10px 0 16px;padding:0;display:grid;gap:10px}
.sites li{padding:12px 14px;border:1px solid var(--line);border-radius:14px;font-weight:700;display:flex;justify-content:space-between;gap:10px;align-items:center}
.sites .btn{min-height:40px;padding:8px 14px;font-size:.9rem}
.note{color:var(--muted);margin:0 0 14px}
.skeleton.w1{width:55%}.skeleton.w2{width:90%;margin-top:12px}.skeleton.w3{width:70%;margin-top:12px}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;
  padding:10px 18px;border-radius:999px;font-weight:600;color:var(--text);animation:toast-in 220ms var(--ease) both}

@media (max-width:420px){h1{font-size:1.4rem}.card{padding:20px 16px}}

.site-logo{flex:none;height:56px;max-width:120px;width:auto;object-fit:contain;border-radius:8px;background:#fff;padding:4px}
.site-logo.sm{height:36px;max-width:72px;padding:2px}
.site-row{display:flex;align-items:center;gap:10px;min-width:0}
.sites .btn.primary{width:auto;margin:0;box-shadow:none}
.textlink{color:var(--purple);font-weight:600}