:root{
  --bg:#f4f5f7;
  --panel:#ffffff;
  --text:#1a1d24;
  --muted:#68707d;
  --border:#e3e6ea;
  --accent:#0d9488;
  --accent-dark:#0f766e;
  --danger:#dc2626;
  --radius:16px;
  --shadow:0 8px 24px rgba(20,20,30,0.08);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
[hidden]{display:none!important;}

/* ---------- Layout ---------- */
.wrap{max-width:960px;margin:0 auto;padding:32px 20px 80px;}
.wrap-narrow{max-width:420px;margin:0 auto;padding:32px 16px 60px;}
header.top{text-align:center;margin-bottom:28px;}
header.top h1{font-size:1.6rem;margin:0 0 6px;}
header.top p{color:var(--muted);margin:0;font-size:0.95rem;}

.topnav{
  display:flex;align-items:center;justify-content:space-between;
  max-width:960px;margin:0 auto;padding:18px 20px 0;
}
.topnav .brand{font-weight:700;}
.topnav .navlinks{display:flex;gap:14px;align-items:center;font-size:0.88rem;}
.topnav .navlinks a{color:var(--muted);font-weight:600;}
.topnav .navlinks a.primary{color:var(--accent);}

/* ---------- Grid / panels ---------- */
.creator-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px;align-items:start;}
@media (max-width:760px){.creator-grid{grid-template-columns:1fr;}}
.panel{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;
}
.panel h2{font-size:1.05rem;margin:0 0 16px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:0.82rem;font-weight:600;color:var(--muted);margin-bottom:5px;}
.field input, .field textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  font-size:0.95rem;background:#fff;color:var(--text);font-family:inherit;
}
.field input:focus, .field textarea:focus{
  outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent);
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:480px){.row2{grid-template-columns:1fr;}}

.swatches{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;}
.swatch.selected{border-color:#1a1d24;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:12px;border:none;
  font-size:0.95rem;font-weight:600;cursor:pointer;
  background:var(--accent);color:#fff;width:100%;
}
.btn:hover{background:var(--accent-dark);}
.btn:disabled{opacity:0.6;cursor:not-allowed;}
.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border);}
.btn.secondary:hover{background:#f0f1f3;}
.btn.small{width:auto;padding:8px 14px;font-size:0.85rem;}
.btn.danger{background:var(--danger);}
.btn.danger:hover{background:#b91c1c;}

/* ---------- Live preview (phone mock) ---------- */
.preview-shell{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;position:sticky;top:20px;
}
.phone{border:8px solid #1a1d24;border-radius:28px;padding:14px;background:#0c0d10;max-width:280px;margin:0 auto;}
.phone-screen{background:#fff;border-radius:16px;overflow:hidden;min-height:360px;}

/* ---------- Card component ---------- */
.card{padding:28px 22px 22px;text-align:center;}
.avatar{
  width:76px;height:76px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.6rem;font-weight:700;margin:0 auto 14px;
}
.card h2{margin:0 0 2px;font-size:1.2rem;}
.card .role{color:var(--muted);font-size:0.9rem;margin:0 0 18px;}
.actions{display:flex;flex-direction:column;gap:10px;}
.action{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--border);background:#fafbfc;font-weight:600;font-size:0.9rem;text-align:left;
}
.action:hover{background:#f0f1f3;}
.action svg{flex-shrink:0;width:20px;height:20px;}
.action .ic{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;
}

/* ---------- Full-screen card view ---------- */
#cardView .card{
  background:var(--panel);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);
}
.card-topbar{height:70px;border-radius:20px 20px 0 0;margin-bottom:-40px;}
.brand-footer{text-align:center;margin-top:22px;font-size:0.78rem;color:var(--muted);}
.brand-footer a{font-weight:600;color:var(--accent);}

.share-box{
  margin-top:20px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;text-align:center;
}
.share-box summary{cursor:pointer;font-weight:600;font-size:0.9rem;color:var(--muted);}
#qrcodeCard{margin:14px auto 10px;display:inline-block;}
#qrcodeCard img,#qrcodeCard canvas{border-radius:8px;}

.linkbox{display:flex;gap:8px;margin-top:14px;}
.linkbox input{
  flex:1;padding:9px 10px;border:1px solid var(--border);border-radius:8px;
  font-size:0.82rem;color:var(--muted);background:#fafbfc;
}

.hint{font-size:0.78rem;color:var(--muted);margin-top:6px;}
.qr-panel{text-align:center;margin-top:20px;}
#qrcode{display:inline-block;margin:14px auto;}
#qrcode img,#qrcode canvas{border-radius:8px;box-shadow:var(--shadow);}
.btnrow{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;}

/* ---------- Auth ---------- */
.auth-shell{max-width:380px;margin:60px auto;padding:0 16px;}
.tabs{display:flex;gap:6px;background:#eceef1;border-radius:12px;padding:4px;margin-bottom:20px;}
.tabs button{
  flex:1;border:none;background:none;padding:9px 0;border-radius:9px;
  font-weight:600;font-size:0.9rem;color:var(--muted);cursor:pointer;
}
.tabs button.active{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.error-banner{
  background:#fef2f2;border:1px solid #fecaca;color:#991b1b;
  border-radius:10px;padding:10px 12px;font-size:0.85rem;margin-bottom:14px;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1a1d24;color:#fff;padding:10px 18px;border-radius:10px;
  font-size:0.88rem;font-weight:600;opacity:0;transition:opacity .2s, transform .2s;
  pointer-events:none;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.center-note{text-align:center;color:var(--muted);font-size:0.9rem;margin-top:18px;}
.center-note a{color:var(--accent);font-weight:600;}

.spinner-wrap{display:flex;align-items:center;justify-content:center;padding:80px 20px;color:var(--muted);}