:root { --bg:#07070c; --panel:#11111a; --line:#ffffff1a; --text:#eef0ff; --mute:#9aa0b8; --pink:#ff4fd8; --cyan:#7cf3ff; --lime:#b6ff3b; --warn:#ffc34d; --bad:#ff5a7a; }
* { box-sizing: border-box; }
html, body { margin:0; background: radial-gradient(1200px 600px at 70% -10%, #2a1146 0%, transparent 60%), radial-gradient(900px 500px at 0% 110%, #0b3140 0%, transparent 60%), var(--bg); color: var(--text); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; min-height: 100vh; }
a { color: var(--cyan); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 24px; }
.top { display:flex; align-items:center; justify-content:space-between; padding: 18px 24px; }
.logo { display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.02em; color: var(--text); text-decoration:none; }
.logo img { border-radius: 7px; } .logo i { width:22px; height:22px; border-radius:50%; background: radial-gradient(circle at 50% 50%, var(--pink) 0 30%, transparent 32%), conic-gradient(from 200deg, var(--cyan), transparent 40%, var(--pink) 70%, var(--cyan)); box-shadow: 0 0 18px #7cf3ff66; }
.card { background: linear-gradient(180deg, #ffffff0b, #ffffff05); border:1px solid var(--line); border-radius: 18px; padding: 28px; backdrop-filter: blur(10px); }
.auth { max-width: 420px; margin: 6vh auto; }
h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.01em; } h2 { margin: 0 0 12px; } .sub { color: var(--mute); margin: 0 0 22px; }
label { display:block; font-size: 13px; color: var(--mute); margin: 12px 0 0; }
input, select, textarea { width:100%; margin-top:6px; padding: 11px 12px; border-radius: 10px; border:1px solid var(--line); background:#0c0c14; color: var(--text); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid #7cf3ff55; border-color: #7cf3ff88; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 16px; border-radius: 10px; border:1px solid var(--line); background:#ffffff0d; color: var(--text); font: 600 14px/1 inherit; cursor:pointer; text-decoration:none; }
.btn:hover { background:#ffffff18; }
.btn.primary { background: linear-gradient(90deg, var(--pink), #a24dff 50%, var(--cyan)); border: 0; color:#0a0a12; }
.btn.block { width:100%; margin-top: 18px; padding: 13px; }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.row { display:flex; gap: 12px; align-items: center; } .row > * { flex: 1; }
.muted { color: var(--mute); } .small { font-size: 13px; }
.err { color: var(--bad); min-height: 20px; margin-top: 10px; font-size: 14px; } .okmsg { color: var(--lime); margin-top: 10px; font-size: 14px; }
.divider { display:flex; align-items:center; gap: 10px; color: var(--mute); font-size: 12px; margin: 18px 0 4px; } .divider:before, .divider:after { content:""; flex:1; height:1px; background: var(--line); }
.check { display:flex; gap:10px; align-items:flex-start; color: var(--mute); } .check input { width:auto; margin-top:4px; }
.tag { display:inline-block; font: 600 11px/1 ui-monospace, monospace; padding: 4px 7px; border-radius: 6px; border:1px solid var(--line); color: var(--mute); }
.tag.warn { color: var(--warn); border-color: #ffc34d55; } .tag.ok { color: var(--lime); border-color: #b6ff3b55; } .tag.bad { color: var(--bad); border-color: #ff5a7a55; }
/* landing */
.hero { display:grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items:center; min-height: 70vh; }
.hero h1 { font-size: 52px; line-height: 1.05; } .hero h1 b { background: linear-gradient(90deg, var(--pink), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orbit { position: relative; height: 460px; perspective: 900px; }
.ring { position:absolute; inset:0; transform-style: preserve-3d; animation: spin 26s linear infinite; }
.ring .c { position:absolute; left: 50%; top: 50%; width: 120px; height: 213px; margin: -106px 0 0 -60px; border-radius: 14px; box-shadow: 0 10px 40px #0008; border: 1px solid #ffffff22; }
@keyframes spin { from { transform: rotateY(0deg) rotateX(-8deg); } to { transform: rotateY(360deg) rotateX(-8deg); } }
.features { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0; }
/* plans */
.plans { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.plan { cursor:pointer; position: relative; } .plan.sel { outline: 2px solid var(--cyan); box-shadow: 0 0 30px #7cf3ff33; }
.plan .price { font-size: 34px; font-weight: 700; margin: 8px 0; } .plan .price small { font-size: 14px; color: var(--mute); font-weight: 500; }
/* steps */
.steps { display:flex; gap: 8px; margin: 10px 0 24px; flex-wrap: wrap; }
.steps span { padding: 7px 12px; border-radius: 999px; border:1px solid var(--line); color: var(--mute); font-size: 13px; }
.steps span.on { color: #0a0a12; background: var(--cyan); border-color: transparent; font-weight: 600; } .steps span.done { color: var(--lime); border-color: #b6ff3b55; }
.persona { display:flex; gap: 14px; align-items:center; padding: 14px; border:1px solid var(--line); border-radius: 14px; margin: 10px 0; }
.av { width: 40px; height: 40px; border-radius: 50%; flex: none; display:grid; place-items:center; font-weight: 700; color:#0a0a12; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.socials { display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.soc { border: 1px solid var(--line); border-radius: 12px; padding: 10px; font-size: 13px; }
table { width:100%; border-collapse: collapse; font-size: 14px; } th, td { text-align:left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--mute); font-weight: 500; }
.tabs { display:flex; gap: 6px; margin: 10px 0 18px; } .tabs button.on { background: #7cf3ff22; border-color: #7cf3ff66; }
.legal { max-width: 820px; } .legal h2 { margin-top: 28px; } .banner { border:1px solid #ffc34d66; background:#ffc34d14; color: var(--warn); padding: 12px 14px; border-radius: 12px; margin: 12px 0; font-size: 14px; }
footer.f { color: var(--mute); font-size: 13px; text-align:center; padding: 30px; } footer.f a { color: var(--mute); }
@media (max-width: 800px) { .hero, .plans, .features { grid-template-columns: 1fr; } .socials { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: 38px; } .orbit { height: 320px; overflow: hidden; } }
.topnav { display:flex; align-items:center; gap: 14px; } .topnav > a:not(.btn) { color: var(--mute); text-decoration:none; font-size: 14px; } .topnav > a:not(.btn):hover { color: var(--text); }
.center { text-align:center; } section { margin: 48px 0; }
.features.four { grid-template-columns: repeat(4, 1fr); } .num { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#7cf3ff22; color: var(--cyan); font-weight:700; }
.plan.featured { outline: 1px solid #ff4fd888; } .plan .badge { position:absolute; top:-10px; right:16px; background: var(--pink); color:#0a0a12; font: 700 11px/1 inherit; padding: 5px 8px; border-radius: 999px; }
table.compare td, table.compare th { text-align:center; } table.compare td:first-child, table.compare th:first-child { text-align:left; } table.compare .hl { background: #7cf3ff0d; }
.empty-state { text-align:center; padding: 30px 10px; color: var(--mute); } .empty-state .orb { width:54px; height:54px; margin: 0 auto 10px; border-radius:50%; background: radial-gradient(circle at 35% 35%, #7cf3ff, #a24dff 55%, transparent 70%); opacity:.7; }
.badge-n { display:inline-grid; place-items:center; min-width:18px; height:18px; padding: 0 5px; margin-left:6px; border-radius:999px; background: var(--pink); color:#0a0a12; font: 700 11px/1 inherit; }
@media (max-width: 800px) { .features.four { grid-template-columns: 1fr 1fr; } .topnav > a:not(.btn) { display:none; } .top { padding: 12px 14px; } .wrap { padding: 14px; } .card { padding: 18px; } table { font-size: 13px; } .row { flex-wrap: wrap; } .tabs { flex-wrap: wrap; } }

.plan .sel-mark { display:none; position:absolute; top:12px; right:12px; font-size:11px; font-weight:700; color:#0b0c12; background:var(--cyan); border-radius:999px; padding:3px 9px; }
.plan.sel .sel-mark { display:inline-block; }

.persona .persona-actions { margin-left: auto; display: flex; gap: 6px; }
.btn.small { padding: 5px 10px; font-size: 12px; }
input[type=color] { padding: 2px !important; height: 40px; cursor: pointer; min-width: 56px; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; } input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }

@media (max-width: 800px) { .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); } .socials > * { min-width: 0; overflow-wrap: anywhere; } }
@media (max-width: 520px) { .persona { flex-wrap: wrap; } .persona .av { width: 34px; height: 34px; } .persona > div:not(.av) { flex-basis: 100%; min-width: 0; } }

/* sales demo banner */
.demo-banner { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; max-width: min(760px, 94vw);
  background: #1b1430ee; border: 1px solid #ffc34d88; color: #fff; padding: 9px 14px; border-radius: 12px; font-size: 13px; line-height: 1.4;
  box-shadow: 0 6px 30px #0008; text-align: center; }
.demo-banner b { color: #ffc34d; } .demo-banner a { color: #7cf3ff; margin-left: 4px; }
.demo-banner .db-short { display: none; } .demo-banner .db-x { background: none; border: 0; color: inherit; opacity: .6; margin-left: 8px; font-size: 16px; cursor: pointer; padding: 0 2px; }
.demo-banner.min .db-long, .demo-banner.min .db-short, .demo-banner.min a { display: none; }
.imp-warn { color: var(--warn); }
/* emergency posting pause (Admin → Posting queue) */
.banner.bad { border-color: #ff5a7a88; background: #ff5a7a1a; color: #ffd0da; } .banner.bad b { color: var(--bad); }
.banner .btn { margin-left: 8px; }
.pausebox { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 0 0 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pausebox.on { border-color: #ff5a7a88; background: #ff5a7a10; }
.pausebox p { margin: 0; flex: 1 1 280px; } .pausebox input { flex: 1 1 220px; margin: 0; } .pausebox .btn { flex: none; }
.btn.danger { border-color: #ff5a7a88; color: #ffd0da; background: #ff5a7a22; } .btn.danger:hover { background: #ff5a7a33; }
/* error pages (pages/error.html) */
.errpage .tag { margin: 0 0 14px; } .errpage h1 { font-size: 26px; } .errpage code { color: var(--text); }
/* Round 9 mobile pass: wide admin tables scroll sideways inside their card instead of being cut off */
@media (max-width: 800px) { .card table:not(.compare) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .card table:not(.compare) th, .card table:not(.compare) td { min-width: 96px; } .card table:not(.compare) td:first-child { min-width: 140px; } }
[data-scroll-x]:focus-visible { outline: 2px solid #7cf3ff99; outline-offset: 2px; }
.backupline { margin: 8px 0 12px; color: var(--mute); } .backupline.warn { color: #ffb86b; }
/* Round 11: posting-queue rows that won't go out as things stand */
tr.blocked td { background: #ffc34d0a; } .jb { color: var(--warn); }
/* Round 11 phone polish: socials card = avatar + name on one line, platforms below at full width (it used to waste a
   column on the avatar); the persona form stacks instead of squeezing the name field to ~180 px */
.soc-persona { display: block; } .soc-head { display: flex; gap: 10px; align-items: center; }
.soc-head .av { width: 34px; height: 34px; font-size: 12px; }
@media (max-width: 520px) {
  #personaForm.row { flex-direction: column; align-items: stretch !important; gap: 8px; }
  #personaForm.row > * { flex: none !important; width: 100%; }
  #personaForm input[type=color] { width: 64px; }
}

/* Round 13: on touch screens every text box is at least 16px. iPhone Safari zooms the whole page in when you tap a
   smaller one (and does not zoom back out), which pushed forms, the schedule dialog and the review caption off screen. */
@media (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]), select, textarea { font-size: 16px !important; }
}