:root {
  color-scheme: dark;
  --ink: #071025;
  --panel: rgba(15, 25, 54, 0.76);
  --line: rgba(255, 255, 255, 0.1);
  --muted: #9aa7c7;
  --white: #f8faff;
  --violet: #8c72ff;
  --cyan: #4ee4f2;
  --pink: #ff75c8;
  --green: #67e8b2;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--white); background: #050a18; overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.aurora { position: fixed; width: 42rem; height: 42rem; filter: blur(110px); opacity: .17; border-radius: 50%; pointer-events: none; }
.aurora-one { background: var(--violet); left: -20rem; top: -14rem; }
.aurora-two { background: var(--cyan); right: -22rem; bottom: -20rem; }
[hidden] { display: none !important; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(440px, 100%); padding: 42px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, rgba(20,31,67,.96), rgba(10,17,38,.95)); box-shadow: 0 28px 100px rgba(0,0,0,.42); }
.login-card h1 { font-size: 2.35rem; margin: 10px 0 8px; letter-spacing: -.04em; }
.muted { color: var(--muted); line-height: 1.6; }
.brand-mark { width: 46px; height: 46px; position: relative; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 30% 20%, #c8c0ff, var(--violet) 42%, #3d42d9); box-shadow: 0 12px 28px rgba(126,97,255,.35); }
.brand-mark::before { content: ""; width: 23px; height: 18px; border: 2px solid white; border-radius: 4px 4px 9px 9px; transform: perspective(15px) rotateX(-9deg); }
.brand-mark span { position: absolute; width: 38px; height: 18px; border: 1.5px solid rgba(255,255,255,.75); border-radius: 50%; transform: rotate(-18deg); }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .16em; font-size: .69rem; font-weight: 800; color: var(--cyan); }
label { display: grid; gap: 8px; color: #dfe5f8; font-size: .88rem; font-weight: 650; }
label > span { display: flex; justify-content: space-between; gap: 12px; }
label small { color: var(--muted); font-weight: 500; }
input, textarea, select { width: 100%; min-width: 0; color: var(--white); background: rgba(4,9,23,.72); border: 1px solid rgba(255,255,255,.13); border-radius: 13px; padding: 14px 15px; outline: 0; transition: border-color .2s, box-shadow .2s; }
textarea { resize: vertical; min-height: 122px; line-height: 1.5; }
input:focus, textarea:focus, select:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(140,114,255,.14); }
.login-card label { margin: 26px 0 16px; }
.primary, .secondary, .quiet { border: 0; border-radius: 12px; padding: 12px 17px; color: white; font-weight: 750; }
.primary { background: linear-gradient(135deg, #7661ff, #a06cff 62%, #dc6fe9); box-shadow: 0 10px 24px rgba(118,97,255,.27); }
.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.secondary { background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.quiet { background: transparent; color: var(--muted); text-align: left; }
.wide { width: 100%; }
.form-error { min-height: 21px; color: #ff9fb5; font-size: .84rem; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 25px 18px; border-right: 1px solid var(--line); background: rgba(5,10,24,.72); backdrop-filter: blur(28px); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; color: white; text-decoration: none; padding: 0 8px 28px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.03rem; }
.brand small { color: var(--muted); margin-top: 1px; }
nav { display: grid; gap: 6px; }
.nav-item { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; border-radius: 12px; padding: 12px; color: var(--muted); background: transparent; }
.nav-item.active { color: white; background: rgba(140,114,255,.14); }
.nav-item span { color: var(--cyan); }
.sidebar-note { margin-top: auto; padding: 14px; border: 1px solid rgba(103,232,178,.14); border-radius: 14px; background: rgba(103,232,178,.06); display: flex; gap: 10px; }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { font-size: .78rem; }
.sidebar-note small { color: var(--muted); font-size: .68rem; margin-top: 3px; line-height: 1.4; }
.status-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
#logout-button { margin-top: 12px; }
main { width: min(1120px, calc(100vw - 250px)); margin: 0 auto; padding: 32px 46px 80px; }
.topbar, .panel-heading, .panel-actions, .library-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar h1 { margin: 5px 0 0; font-size: 1.72rem; letter-spacing: -.035em; }
.privacy-pill { border: 1px solid rgba(103,232,178,.2); background: rgba(103,232,178,.07); border-radius: 999px; padding: 9px 13px; color: #bff6dc; font-size: .78rem; }
.privacy-pill span { color: var(--green); margin-right: 5px; }
.steps { list-style: none; margin: 38px auto 26px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); width: min(620px, 100%); }
.steps li { position: relative; text-align: center; color: #8a97b7; }
.steps li:not(:last-child)::after { content: ""; position: absolute; height: 1px; left: calc(50% + 19px); right: calc(-50% + 19px); top: 16px; background: rgba(255,255,255,.1); }
.steps li.done:not(:last-child)::after { background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.steps span { position: relative; z-index: 1; width: 33px; height: 33px; margin: auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #0a1229; font-size: .76rem; font-weight: 800; }
.steps small { display: block; margin-top: 8px; font-size: .7rem; }
.steps li.active, .steps li.done { color: white; }
.steps li.active span { border-color: var(--violet); background: linear-gradient(145deg, #6c56ef, #9f73ff); box-shadow: 0 0 22px rgba(140,114,255,.36); }
.steps li.done span { border-color: var(--cyan); color: var(--cyan); }
.workspace { min-height: 550px; }
.step-panel { padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(18,29,62,.82), rgba(9,17,38,.8)); box-shadow: 0 25px 70px rgba(0,0,0,.2); }
.panel-heading { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 24px; }
.panel-heading h2, .library-head h2 { margin: 4px 0 0; font-size: 1.42rem; letter-spacing: -.025em; }
.tip { color: var(--muted); font-size: .74rem; padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.05); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field-grid > * { min-width: 0; }
.field-grid .full { grid-column: 1 / -1; }
#action-url-field > span { display: block; }
#action-url-help { display: block; margin-top: 6px; line-height: 1.4; overflow-wrap: anywhere; }
.toggle-row { grid-template-columns: auto auto 1fr; justify-content: start; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(4,9,23,.35); }
.toggle-row > input { position: absolute; opacity: 0; width: 1px; }
.toggle { width: 42px; height: 24px; border-radius: 999px; background: #34405d; padding: 3px; transition: .2s; }
.toggle::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: white; transition: .2s; }
.toggle-row input:checked + .toggle { background: var(--violet); }
.toggle-row input:checked + .toggle::after { transform: translateX(18px); }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row > span:last-child { display: block; min-width: 0; }
.toggle-row small { margin-top: 3px; }
.panel-actions { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px; }
.panel-actions button { min-width: 134px; }
.drop-zone { position: relative; min-height: 250px; border: 1.5px dashed rgba(140,114,255,.45); border-radius: 18px; overflow: hidden; background: rgba(140,114,255,.045); display: grid; place-items: center; text-align: center; cursor: pointer; }
.drop-zone:hover { border-color: var(--cyan); }
.drop-zone input { position: absolute; opacity: 0; pointer-events: none; }
#upload-prompt { display: grid; justify-items: center; gap: 9px; }
#upload-prompt small { color: var(--muted); }
.upload-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--cyan); background: rgba(78,228,242,.1); font-size: 1.4rem; }
#upload-preview { width: 100%; height: 250px; object-fit: cover; }
.fit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.fit-grid div { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.fit-grid strong, .fit-grid small { display: block; font-size: .7rem; }
.fit-grid small { color: var(--muted); margin-top: 2px; }
.shape { display: block; height: 17px; border: 1px solid var(--violet); border-radius: 3px; margin-bottom: 9px; opacity: .8; }
.shape.phone { width: 35px; } .shape.tablet { width: 44px; } .shape.square { width: 20px; } .shape.notification { width: 37px; }
.preview-stage { display: grid; grid-template-columns: .9fr 1fr; align-items: center; gap: 46px; padding: 10px 30px; }
.phone-frame { width: 270px; min-height: 480px; margin: auto; padding: 10px; border: 5px solid #293451; border-radius: 37px; background: #090f22; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.phone-top { display: flex; justify-content: space-between; align-items: center; font-size: .57rem; padding: 4px 9px 12px; }
.phone-top i { width: 70px; height: 18px; border-radius: 999px; background: #02040b; }
.app-preview { padding: 13px 10px; }
.preview-kicker { color: var(--cyan); font-size: .56rem; text-transform: uppercase; letter-spacing: .13em; }
.app-preview > h3 { margin: 5px 0 18px; font-size: 1.16rem; }
.campaign-card { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: linear-gradient(145deg, #1a2652, #101935); }
.campaign-card img { width: 100%; height: 90px; object-fit: cover; display: block; background: linear-gradient(135deg, #553dda, #56d2ec); }
.campaign-card div { padding: 14px; }
.campaign-card small { color: var(--cyan); font-size: .5rem; letter-spacing: .13em; }
.campaign-card h4 { margin: 5px 0 6px; font-size: .84rem; }
.campaign-card p { margin: 0; color: #b5bfd8; font-size: .63rem; line-height: 1.45; }
.preview-copy h3 { margin: 12px 0 8px; font-size: 1.35rem; }
.preview-copy p, .preview-copy li { color: var(--muted); line-height: 1.55; font-size: .84rem; }
.preview-copy ul { list-style: none; padding: 0; }
.preview-copy li::before { content: "✓"; color: var(--green); margin-right: 8px; }
.success-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: rgba(103,232,178,.1); }
.publish-options { display: grid; gap: 12px; max-width: 700px; margin: auto; }
.choice { grid-template-columns: auto auto 1fr; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); cursor: pointer; }
.choice.active { border-color: rgba(140,114,255,.6); background: rgba(140,114,255,.08); }
.choice input { width: auto; accent-color: var(--violet); }
.choice-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--cyan); background: rgba(78,228,242,.08); }
.choice strong, .choice small { display: block; }
.choice small { margin-top: 3px; }
.publish-summary { max-width: 700px; margin: 20px auto 0; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(118,97,255,.13), rgba(78,228,242,.06)); display: flex; gap: 13px; }
.publish-summary > span { color: var(--cyan); }
.publish-summary p { margin: 5px 0 0; color: var(--muted); font-size: .8rem; }
.glow { box-shadow: 0 0 34px rgba(140,114,255,.28); }
.library-head { margin: 38px 0 22px; }
.campaign-list { display: grid; gap: 12px; }
.campaign-row { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.campaign-row img { width: 100px; height: 58px; object-fit: cover; border-radius: 10px; background: #172143; }
.campaign-row h3 { margin: 0 0 5px; font-size: .95rem; }
.campaign-row p { margin: 0; color: var(--muted); font-size: .76rem; }
.row-actions { display: flex; gap: 7px; }
.row-actions button { border: 1px solid var(--line); background: rgba(255,255,255,.05); color: white; border-radius: 9px; padding: 8px 10px; font-size: .72rem; }
.badge { display: inline-block; margin-left: 7px; padding: 3px 6px; border-radius: 999px; background: rgba(78,228,242,.1); color: var(--cyan); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
.empty { text-align: center; padding: 60px; color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; }
.toast { position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: 360px; padding: 14px 18px; border: 1px solid rgba(103,232,178,.26); border-radius: 13px; color: #dcfff0; background: rgba(11,43,38,.95); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 12px; }
  .sidebar .brand { min-width: 0; padding: 0; margin: 0; }
  .sidebar nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .nav-item { min-width: 0; justify-content: center; padding: 10px 8px; font-size: .8rem; }
  .sidebar-note { display: none; } #logout-button { grid-column: 2; grid-row: 1; margin: 0; text-align: right; }
  main { width: 100%; max-width: 100%; min-width: 0; padding: 24px 18px 60px; }
  .topbar { align-items: flex-start; } .privacy-pill { display: none; }
  .preview-stage { grid-template-columns: 1fr; padding: 0; }
}
@media (max-width: 620px) {
  .step-panel { padding: 20px; } .panel-heading { align-items: flex-start; } .tip { display: none; }
  .field-grid { grid-template-columns: 1fr; } .field-grid .full { grid-column: auto; }
  .fit-grid { grid-template-columns: 1fr 1fr; }
  .campaign-row { grid-template-columns: 70px 1fr; } .campaign-row img { width: 70px; } .row-actions { grid-column: 1 / -1; }
  .steps small { font-size: .66rem; }
  .toggle-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .toggle-row > input { grid-column: 1; }
  .toggle-row > .toggle { grid-column: 1; grid-row: 1; }
  .toggle-row > span:last-child { grid-column: 2; grid-row: 1; }
}
@media (max-width: 360px) {
  .sidebar { padding: 18px 14px; }
  main { padding-inline: 12px; }
  .step-panel { padding: 18px; }
  .nav-item { font-size: .76rem; gap: 6px; }
}