/* Content Repurposer · a PrimeLayer Studio build — vibrant creator studio theme. */
@font-face{font-family:"Sora";src:url("/assets/fonts/sora-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;}

:root{
  /* base — deep aubergine-navy */
  --page:#0f1020; --page-2:#141327; --ink-void:#0a0a17;
  --card:#191830; --card-2:#201f3c; --card-3:#252344;
  --text:#f4f2ff; --text-2:#c3bfe0; --muted:#8f8ab5;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.14);

  /* studio identity gradient magenta -> orange */
  --g1:#ec4899; --g2:#f97316;
  --grad:linear-gradient(120deg,#ec4899 0%,#f472b6 30%,#fb7185 55%,#f97316 100%);
  --grad-soft:linear-gradient(120deg,rgba(236,72,153,.18),rgba(249,115,22,.18));

  /* channel accents */
  --ch-linkedin:#38bdf8; --ch-x:#a78bfa; --ch-email:#fb923c;
  --ch-ad:#ec4899; --ch-tags:#22d3ee;

  --good:#34d399; --neg:#fb7185;
  --radius:20px;
  --font:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow:0 2px 6px rgba(0,0,0,.35),0 24px 60px -20px rgba(120,40,120,.55);
  --glow:0 0 0 1px rgba(255,255,255,.05),0 20px 50px -24px rgba(236,72,153,.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1000px 520px at 82% -8%,rgba(249,115,22,.20),transparent 60%),
    radial-gradient(900px 520px at 8% 4%,rgba(236,72,153,.24),transparent 58%),
    radial-gradient(800px 700px at 50% 120%,rgba(167,139,250,.16),transparent 60%),
    var(--page);
  background-attachment:fixed;
}

/* ---------- topbar (this demo's own header; sits below injected navy nav) ---------- */
.topbar{
  display:flex; align-items:center; gap:14px;
  padding:16px 26px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(25,24,48,.85),rgba(15,16,32,.55));
  backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.01em; font-size:15px;}
.brand .logo{
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  font-size:18px; background:var(--grad); box-shadow:0 8px 22px -8px rgba(236,72,153,.8);
}
.brand .brand-name{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:800;
}
.brand .sub{color:var(--muted); font-weight:600; font-size:12.5px; letter-spacing:.01em;}
.topbar .spacer{flex:1;}
.topbar .badge{
  font-size:12px; color:var(--text-2); font-weight:600;
  border:1px solid var(--border-2); padding:5px 12px; border-radius:999px;
  display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.03);
}
.topbar .badge .dot{width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 10px var(--good);}

/* ---------- layout ---------- */
.wrap{max-width:1060px; margin:0 auto; padding:44px 26px 80px;}

.hero{margin-bottom:30px;}
.hero-kicker{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--g1); padding:5px 13px; border-radius:999px;
  background:var(--grad-soft); border:1px solid rgba(236,72,153,.35); margin-bottom:16px;
}
.hero h1{
  margin:0; font-size:clamp(34px,6vw,52px); font-weight:800; letter-spacing:-.03em; line-height:1.03;
}
.hero h1 .grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{margin:16px 0 0; color:var(--text-2); font-size:16.5px; max-width:660px;}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px;
}
.input-card{position:relative; overflow:hidden;}
.input-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad);
}

/* input */
.field label{display:block; font-size:12.5px; font-weight:700; color:var(--text-2); margin-bottom:6px; letter-spacing:.01em;}
.field .opt{color:var(--muted); font-weight:500;}
.field input,textarea{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--text);
  background:var(--ink-void); border:1px solid var(--border-2); border-radius:12px;
  padding:12px 14px; outline:none; transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder,textarea::placeholder{color:var(--muted);}
.field input:focus,textarea:focus{border-color:var(--g1); box-shadow:0 0 0 3px rgba(236,72,153,.22);}
textarea{min-height:250px; resize:vertical; line-height:1.6;}

.notes-head{display:flex; align-items:baseline; justify-content:space-between; margin:2px 0 7px;}
.notes-head label{font-size:12.5px; font-weight:700; color:var(--text-2);}
.link-btn{
  background:none; border:none; cursor:pointer; padding:0; font-family:inherit;
  font-size:12.5px; font-weight:700; color:var(--g1);
}
.link-btn:hover{color:var(--g2); text-decoration:underline;}

.actions{display:flex; align-items:center; gap:14px; margin-top:20px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:inherit;
  font-size:15px; font-weight:700; color:#fff; cursor:pointer;
  background:var(--grad); background-size:160% 160%; border:none; border-radius:13px;
  padding:13px 24px; box-shadow:0 12px 28px -12px rgba(236,72,153,.85);
  transition:transform .12s,box-shadow .2s,background-position .4s;
}
.btn:hover{transform:translateY(-2px); background-position:100% 0; box-shadow:0 18px 36px -14px rgba(249,115,22,.9);}
.btn:active{transform:translateY(0);}
.btn.ghost{
  background:rgba(255,255,255,.04); color:var(--text); border:1px solid var(--border-2);
  box-shadow:none;
}
.btn.ghost:hover{background:rgba(255,255,255,.09); border-color:var(--g1); transform:translateY(-2px);}
.btn:disabled{opacity:.6; cursor:default; transform:none;}
.btn .spinner{width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.hint{color:var(--muted); font-size:12.5px;}
.hint em{color:var(--text-2); font-style:normal; font-weight:700;}

.banner{margin-top:18px; padding:13px 15px; border-radius:12px; font-size:13.5px; display:flex; gap:10px; align-items:flex-start;}
.banner.error{background:rgba(251,113,133,.12); border:1px solid rgba(251,113,133,.4); color:#ffc2cd;}
.banner .i{font-weight:900; color:var(--neg);}

/* ---------- results ---------- */
#results{margin-top:26px; display:none;}
#results.show{display:block; animation:riseIn .5s cubic-bezier(.2,.7,.2,1) both;}
@keyframes riseIn{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);}}

.doc{padding:34px 36px;}
@media (max-width:620px){.doc{padding:24px 18px;}}

.doc-head{border-bottom:1px solid var(--border); padding-bottom:20px; margin-bottom:24px;}
.doc-head .eyebrow{
  display:flex; align-items:center; gap:10px;
  color:var(--g1); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
}
.sample-tag{
  display:inline-block; vertical-align:middle;
  background:var(--grad); color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em;
  padding:3px 9px; border-radius:999px; text-transform:uppercase;
}
.doc-head h2{margin:12px 0 0; font-size:30px; font-weight:800; letter-spacing:-.025em;}
.doc-head .summary{font-size:15.5px; line-height:1.65; color:var(--text-2); margin:14px 0 0;}

/* channel cards — color-coded by order (LinkedIn, X, Email, Ad, Hashtags) */
.channel{
  --accent:var(--g1);
  border:1px solid var(--border); border-radius:16px;
  background:linear-gradient(180deg,var(--card-3),var(--card));
  margin-bottom:20px; overflow:hidden; position:relative;
  transition:transform .16s,box-shadow .22s,border-color .22s;
}
.channel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent);}
.channel:last-child{margin-bottom:0;}
.channel:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 22px 44px -26px var(--accent);}

.doc>.channel:nth-of-type(2){--accent:var(--ch-linkedin);}  /* LinkedIn */
.doc>.channel:nth-of-type(3){--accent:var(--ch-x);}         /* X / Twitter */
.doc>.channel:nth-of-type(4){--accent:var(--ch-email);}     /* Email */
.doc>.channel:nth-of-type(5){--accent:var(--ch-ad);}        /* Ad Copy */
.doc>.channel:nth-of-type(6){--accent:var(--ch-tags);}      /* Hashtags */

.ch-head{
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent);
}
.ch-head .ch-ico{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-size:13px; font-weight:900; color:#fff; flex:none;
  background:var(--accent); box-shadow:0 6px 16px -6px var(--accent);
}
.ch-head .ch-label{font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--text);}
.ch-head .ch-copy{margin-left:auto; padding:8px 15px; font-size:12.5px;}
.ch-body{padding:18px;}

/* linkedin */
.linkedin-body{white-space:pre-wrap; font-size:14.5px; line-height:1.65; color:var(--text);}

/* tweet thread */
.tweet{display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--border);}
.tweet:first-child{padding-top:0;}
.tweet:last-child{border-bottom:none; padding-bottom:0;}
.tweet .n{
  flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:900; color:#fff; background:var(--ch-x);
  box-shadow:0 6px 16px -6px var(--ch-x);
}
.tweet .txt{font-size:14.5px; line-height:1.6; white-space:pre-wrap; color:var(--text);}

/* email */
.email-inner{border:1px solid var(--border); border-radius:13px; overflow:hidden;}
.email-inner .e-subj{
  padding:12px 15px; border-bottom:1px solid var(--border); font-weight:700; font-size:14px;
  color:var(--text); background:rgba(251,146,60,.1);
}
.email-inner .e-subj span{color:var(--muted); font-weight:600;}
.email-inner .e-body{padding:15px; white-space:pre-wrap; font-size:14px; line-height:1.65; color:var(--text-2);}

/* ad copy */
.ad{
  border:1px solid var(--border); border-radius:13px; padding:15px 16px; margin-bottom:11px;
  background:rgba(236,72,153,.07);
}
.ad:last-child{margin-bottom:0;}
.ad .ad-h{font-weight:800; font-size:15px; letter-spacing:-.01em; color:var(--text);}
.ad .ad-b{color:var(--text-2); font-size:14px; line-height:1.55; margin-top:5px;}

/* hashtags */
.tags{display:flex; flex-wrap:wrap; gap:9px;}
.tag{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:700; color:#083344;
  padding:5px 13px; border-radius:999px; background:var(--ch-tags);
  box-shadow:0 6px 14px -8px var(--ch-tags);
}

.usage{margin-top:22px; text-align:center; color:var(--muted); font-size:12px;}
.foot-note{color:var(--muted); font-size:12px; margin-top:40px; text-align:center; line-height:1.6;}