/* ── Creator pages (link-in-bio) ───────────────────────────────────────────
   Every colour is a theme token from style.css, so light and dark mode work
   with no overrides and no second colour system. The four themes only
   rearrange tokens:

     default  inherits the page palette (follows the visitor's preference)
     dark     the server pins data-theme="dark", so it inherits the dark tokens
     sunset   replaces the background with a warm token gradient
     minimal  removes borders and card fills

   Layout targets 360 / 768 / 1024px, with 44px tap targets. */

.creator-body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text)}

.creator-wrap{width:100%;max-width:560px;margin:0 auto;padding:34px 18px 40px;display:flex;flex-direction:column;gap:22px;flex:1;min-width:0}

/* ── Header ─────────────────────────────────────────────────────────────── */
.creator-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.creator-avatar{width:112px;height:112px;border-radius:50%;object-fit:cover;border:3px solid var(--surface);box-shadow:var(--shadow-md);background:var(--surface-2)}
.creator-avatar-fallback{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2.6rem;font-weight:800;color:var(--accent);background:var(--accent-soft);border:3px solid var(--accent-border);text-transform:uppercase}
.creator-name{font-family:var(--font-display);font-size:clamp(1.5rem,5vw,1.95rem);line-height:1.2;font-weight:800;margin:2px 0 0;overflow-wrap:anywhere}
.creator-bio{color:var(--text-2);font-size:.98rem;line-height:1.6;max-width:46ch;margin:0;overflow-wrap:anywhere}

.creator-socials{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:2px}
.creator-socials a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface);color:var(--text-2);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.creator-socials a:hover,.creator-socials a:focus-visible{color:var(--accent);border-color:var(--accent-border);transform:translateY(-2px)}
.creator-socials svg{width:21px;height:21px}

/* ── Link cards ─────────────────────────────────────────────────────────── */
.creator-links{display:flex;flex-direction:column;gap:12px}
.creator-link{display:flex;align-items:center;gap:13px;min-height:60px;padding:13px 16px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.creator-link:hover,.creator-link:focus-visible{transform:translateY(-2px);border-color:var(--accent-border);box-shadow:var(--shadow-md)}
.creator-link-emoji{font-size:1.35rem;line-height:1;flex:0 0 auto;width:30px;text-align:center}
.creator-link-text{display:flex;flex-direction:column;min-width:0;flex:1}
.creator-link-title{font-weight:600;font-size:.97rem;overflow-wrap:anywhere}
.creator-link-sub{color:var(--muted);font-size:.83rem;overflow-wrap:anywhere}

.creator-contact{align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-full);border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:.9rem;text-decoration:none}
.creator-contact svg{width:17px;height:17px}

/* ── Footer (the viral loop) ────────────────────────────────────────────── */
.creator-foot{margin-top:auto;padding:26px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:.82rem}
.creator-foot a{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);text-decoration:none;min-height:44px;padding:0 8px}
.creator-foot a:hover{color:var(--accent)}
.creator-foot .mark{width:22px;height:22px}
.creator-foot-note{font-size:.76rem}

/* ── Empty states (404 / unpublished) ───────────────────────────────────── */
.creator-empty{align-items:center;text-align:center;justify-content:center;gap:14px}
.creator-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--r-full);background:var(--accent);color:var(--surface);font-weight:700;text-decoration:none;box-shadow:var(--shadow-md)}
.creator-cta:hover{background:var(--accent-hover)}

/* ── Themes ───────────────────────────────────────────────────────────────
   Only tokens are rearranged - no colour literals - so every theme keeps its
   contrast in both the light and the dark palette. */
[data-creator-theme=sunset]{background:linear-gradient(170deg,var(--gold-soft),var(--danger-soft) 55%,var(--bg) 100%)}
[data-creator-theme=sunset] .creator-body{background:transparent}
[data-creator-theme=sunset] .creator-link{border-color:var(--gold-border)}
[data-creator-theme=sunset] .creator-link:hover{border-color:var(--danger-border)}
[data-creator-theme=sunset] .creator-avatar-fallback{color:var(--danger);background:var(--gold-soft);border-color:var(--gold-border)}
[data-creator-theme=sunset] .creator-cta{background:var(--danger)}

[data-creator-theme=minimal] .creator-link{border-color:transparent;background:transparent;box-shadow:none;padding-left:4px;padding-right:4px}
[data-creator-theme=minimal] .creator-link:hover{background:var(--surface-2);border-color:transparent;transform:none}
[data-creator-theme=minimal] .creator-socials a{border-color:transparent;background:transparent}
[data-creator-theme=minimal] .creator-avatar{border-color:transparent;box-shadow:none}
[data-creator-theme=minimal] .creator-cta{background:var(--text);color:var(--bg)}

@media (min-width:768px){
  .creator-wrap{padding:46px 24px 52px;gap:24px}
  .creator-avatar{width:128px;height:128px}
}
@media (max-width:520px){
  .creator-wrap{padding:26px 14px 32px}
  .creator-avatar{width:96px;height:96px}
  .creator-link{padding:12px 13px;gap:11px}
}
@media (prefers-reduced-motion:reduce){
  .creator-link,.creator-socials a{transition:none}
  .creator-link:hover,.creator-socials a:hover{transform:none}
}



/* ── Editor & analytics pages ─────────────────────────────────────────────
   Only what the design system does not already provide: the two-column editor
   layout, the link rows, the theme picker and the phone-shaped preview. */

.creator-editor{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.creator-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.creator-form{display:flex;flex-direction:column;gap:12px}
.creator-form-row{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
.creator-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.creator-check{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--text-2)}
.creator-check input{width:18px;height:18px;accent-color:var(--accent)}

.creator-linklist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}

.creator-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.creator-theme{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;padding:12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.creator-theme:hover:not(:disabled){border-color:var(--accent-border);transform:translateY(-2px)}
.creator-theme.is-on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.creator-theme.is-locked{opacity:.55;cursor:not-allowed}
.creator-theme strong{font-size:.88rem}
.creator-theme small{color:var(--muted);font-size:.74rem;line-height:1.45}
.creator-theme em{font-size:.7rem;font-style:normal;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.06em}
.creator-theme-dot{width:100%;height:26px;border-radius:var(--r-sm);border:1px solid var(--border)}
.ct-default{background:linear-gradient(90deg,var(--surface) 60%,var(--accent-soft))}
.ct-dark{background:linear-gradient(90deg,var(--surface-3) 60%,var(--accent))}
.ct-sunset{background:linear-gradient(90deg,var(--gold-soft) 40%,var(--danger-soft))}
.ct-minimal{background:linear-gradient(90deg,var(--surface-2),var(--surface-3))}

.creator-socials-edit{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.creator-social-row{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:10px;font-size:.86rem;color:var(--text-2)}
.creator-social-row input{min-width:0}

.creator-phone{max-width:340px;margin:0 auto;border:1px solid var(--border-strong);border-radius:22px;padding:8px;background:var(--surface-2);box-shadow:var(--shadow-md)}
.cp-row{display:flex;align-items:center;gap:14px;margin-top:10px}
.cp-row .creator-avatar{width:72px;height:72px;font-size:1.6rem;flex:0 0 auto}

/* Homepage creator section.
   This band sits inside .sec-block, which centres text, so it keeps the site's
   centred heading rhythm and then switches to a left-aligned two-column
   showcase (page preview + points) exactly like the features grid does. */
.creator-sec .creator-lede{max-width:62ch;margin:14px auto 0}
.creator-showcase{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:34px;text-align:left}

.creator-preview{width:100%;max-width:320px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px 20px;box-shadow:var(--shadow-md)}
.creator-preview-avatar{width:66px;height:66px;margin:0 auto 12px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent);font-family:var(--font-display);font-size:1.35rem;font-weight:800}
.creator-preview-name{text-align:center;font-family:var(--font-display);font-size:1.06rem;font-weight:800}
.creator-preview-bio{text-align:center;color:var(--muted);font-size:.82rem;margin-top:3px}
.creator-preview-links{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.creator-preview-link{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);min-width:0}
.creator-preview-link svg{width:16px;height:16px;flex:0 0 auto;color:var(--accent)}
.creator-preview-link b{flex:1;min-width:0;font-size:.85rem;font-weight:600;overflow-wrap:anywhere}
.creator-preview-link em{flex:0 0 auto;font-family:var(--font-mono);font-style:normal;font-size:.7rem;color:var(--muted)}
.creator-preview-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);text-align:center;font-size:.72rem;color:var(--muted)}

.creator-points{list-style:none;margin:0;padding:0}
.creator-points li{padding:16px 0;border-top:1px solid var(--border)}
.creator-points li:first-child{border-top:0;padding-top:0}
.creator-points li:last-child{padding-bottom:0}
.creator-points b{display:block;font-size:.96rem;font-weight:700;color:var(--text)}
.creator-points span{display:block;margin-top:5px;font-size:.88rem;line-height:1.6;color:var(--text-2)}
.creator-points code{font-family:var(--font-mono);font-size:.82rem;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:1px 5px}

.creator-hero-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:32px}
.creator-text-link{position:relative;font-size:.92rem;font-weight:600;color:var(--accent);text-decoration:none;padding-bottom:2px}
.creator-text-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent-border)}
.creator-text-link:hover::after{background:var(--accent)}
.creator-hero-note{font-size:.82rem;margin:14px auto 0;max-width:52ch}

@media (min-width:900px){
  .creator-showcase{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;margin-top:38px}
}
.creator-phone iframe{width:100%;height:520px;border:0;border-radius:14px;background:var(--surface);display:block}

/* ── Link list (editor) ───────────────────────────────────────────────────
   Mobile-first: information on the first row, actions on the second, wrapping
   naturally. From 600px the actions move beside the text. Every control is at
   least 40px tall, and no glyph depends on an emoji font. */
.cl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cl-hint{margin-top:6px;font-size:.83rem}
.cl-form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.cl-form-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}

.cl-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.cl-empty{padding:14px 2px;font-size:.86rem}
.cl-item{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);overflow:hidden}
.cl-item.is-hidden{opacity:.7}
.cl-main{display:flex;align-items:center;gap:12px;padding:13px 14px;min-width:0}
.cl-icon{flex:0 0 auto;width:42px;height:42px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border-strong);color:var(--text-2);font-size:1rem;font-weight:700;overflow:hidden}
.cl-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cl-title{font-size:.93rem;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.cl-meta{font-size:.75rem;color:var(--muted);overflow-wrap:anywhere}
.cl-code{font-family:var(--font-mono);color:var(--text-2)}
.cl-flag{flex:0 0 auto;font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border-strong);border-radius:var(--r-full);padding:3px 8px}

.cl-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 14px 13px}
.cl-move{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-full);overflow:hidden;background:var(--surface)}
.cl-iconbtn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--text-2);cursor:pointer;padding:0}
.cl-iconbtn+.cl-iconbtn{border-left:1px solid var(--border)}
.cl-iconbtn svg{width:16px;height:16px}
.cl-iconbtn:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}
.cl-iconbtn:disabled{opacity:.45;cursor:not-allowed}
.cl-btn{min-height:42px;padding:0 15px;border-radius:var(--r-full);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);font-size:.85rem;font-weight:600;font-family:inherit;cursor:pointer}
.cl-btn:hover{color:var(--accent);border-color:var(--accent-border)}
.cl-btn-danger{color:var(--danger)}
.cl-btn-danger:hover{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger)}

@media (min-width:520px){
  .cl-form-row{grid-template-columns:minmax(0,1fr) 132px}
}
@media (min-width:600px){
  .cl-item{display:flex;align-items:center;gap:10px}
  .cl-main{flex:1;padding:13px 16px}
  .cl-actions{padding:13px 16px;flex-wrap:nowrap}
}

#toast.error{background:var(--danger);border-color:var(--danger)}

@media (min-width:960px){
  .creator-editor{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:22px}
  .creator-col:last-child{position:sticky;top:18px}
}
@media (max-width:520px){
  .creator-phone{max-width:none}
  .creator-phone iframe{height:440px}
  .creator-social-row{grid-template-columns:1fr}
}