:root {
  --ink: #011537;
  --ink-2: #24304a;
  --muted: #566078;
  --line: #e2e7ef;
  --bg: #f4f6fa;
  --card: #ffffff;
  --brand: #0055ec;
  --brand-2: #003fc0;
  --brand-sky: #01a3f3;
  --brand-grad: linear-gradient(100deg, #0055ec 0%, #01a3f3 100%);
  --brand-soft: #e6f1ff;
  --accent: #ff6b3d;
  --ok: #0f9d58;
  --ok-soft: #e5f6ec;
  --warn: #b86e00;
  --warn-soft: #fff4e0;
  --danger: #d92d20;
  --danger-soft: #fdecea;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(1, 21, 55, .04), 0 6px 20px rgba(1, 21, 55, .05);
  --shadow-lg: 0 24px 60px rgba(1, 21, 55, .16);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --serif: 'DM Serif Display', Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 15px; -webkit-font-smoothing: antialiased; }
img, canvas, video { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.hidden { display: none !important; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; padding: 11px 18px; font: 600 14.5px/1 var(--font); cursor: pointer; transition: .15s ease; text-decoration: none !important; white-space: nowrap; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #fff; border-color: #d4d0c6; }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: #fadad6; }
.btn-lg { padding: 15px 24px; font-size: 16px; border-radius: 12px; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Forms */
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--ink-2); }
input, select, textarea { width: 100%; font: 15px var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; outline: none; transition: border .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31, 79, 255, .15); }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
input[type=color] { padding: 3px; height: 44px; cursor: pointer; }
input[type=checkbox] { width: auto; }
.field { margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.alert { padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; }
.alert-error { background: var(--danger-soft); color: #9b1c13; }
.alert-ok { background: var(--ok-soft); color: #0b6b3c; }
.alert-warn { background: var(--warn-soft); color: #7a4a00; }
.alert-info { background: var(--brand-soft); color: #1636a8; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #edf1f7; color: var(--ink-2); }
.badge-brand { background: var(--brand-soft); color: var(--brand-2); }
.badge-ok { background: var(--ok-soft); color: #0b6b3c; }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-dark { background: var(--ink); color: #fff; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: -.02em; text-decoration: none !important; }
.logo-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; }
.logo-mark svg { width: 18px; height: 18px; }
.logo em { font-style: normal; color: var(--brand); }

/* ---------- Marketing site ---------- */
.site-nav { position: sticky; top: 0; z-index: 30; background: rgba(248, 247, 243, .85); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; }
.site-nav.scrolled { border-bottom-color: var(--line); }
.site-nav .container { display: flex; align-items: center; height: 68px; gap: 26px; }
.site-nav .links { display: flex; gap: 22px; }
.site-nav .links a { color: var(--ink-2); font-weight: 600; font-size: 14.5px; }
@media (max-width: 760px) { .site-nav .links { display: none; } }

.hero { padding: 72px 0 40px; }
.hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
@media (max-width: 900px) { .hero .container { grid-template-columns: 1fr; } }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 13px; color: var(--brand-2); background: var(--brand-soft); padding: 6px 12px; border-radius: 999px; margin-bottom: 20px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 62px); letter-spacing: -.035em; margin-bottom: 18px; }
.hero h1 .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; color: var(--brand); }
.hero p.lead { font-size: 18.5px; color: var(--ink-2); max-width: 540px; margin-bottom: 26px; }
.hero-form { display: flex; gap: 8px; background: #fff; padding: 7px; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); max-width: 560px; }
.hero-form input { border: 0; box-shadow: none !important; }
.hero-note { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.hero-visual { position: relative; min-height: 460px; }
.mock { position: absolute; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); background: #ddd; }
.mock.post { width: 54%; aspect-ratio: 4 / 5; left: 0; top: 30px; transform: rotate(-3deg); }
.mock.story { width: 40%; aspect-ratio: 9 / 16; right: 4%; top: 0; transform: rotate(4deg); }
.mock canvas { width: 100%; height: 100%; }
.chip-float { position: absolute; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.chip-float .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

.logos { padding: 18px 0 50px; color: var(--muted); font-size: 13px; text-align: center; }

.section { padding: 80px 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 44px); }
.section-head p { color: var(--muted); font-size: 17px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.step .n { width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 16px; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feature { padding: 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.feature .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 14px; }
.feature .ic svg { width: 22px; height: 22px; }
.feature h3 { font-size: 17px; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: 14.5px; margin: 0; }

.dark-band { background: var(--ink); color: #fff; border-radius: 24px; padding: 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.dark-band p { color: #b9bfcc; }
@media (max-width: 800px) { .dark-band { grid-template-columns: 1fr; padding: 34px; } }
.compare { display: grid; gap: 10px; }
.compare div { display: flex; justify-content: space-between; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-weight: 600; }
.compare div.win { background: var(--brand); }

.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; position: relative; }
.price-card.featured { border: 2px solid var(--brand); box-shadow: 0 20px 50px rgba(31, 79, 255, .15); }
.price-card .tag { position: absolute; top: -12px; left: 28px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.price-card h3 { font-size: 18px; }
.price { font-size: 44px; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 2px; }
.price small { font-size: 15px; color: var(--muted); font-weight: 600; }
.price-card ul { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 10px; flex: 1; }
.price-card li { display: flex; gap: 10px; font-size: 14.5px; }
.price-card li::before { content: ''; flex: 0 0 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230f9d58'%3E%3Cpath d='M8.3 13.3 4.9 9.9l1.2-1.2 2.2 2.2 5.6-5.6 1.2 1.2z'/%3E%3C/svg%3E") center/14px no-repeat; }
.price-card li.no { color: var(--muted); }
.price-card li.no::before { background: #edf1f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239aa0ab'%3E%3Cpath d='M5 9h10v2H5z'/%3E%3C/svg%3E") center/12px no-repeat; }

.faq { max-width: 760px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 10px; }
.faq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 12px 0 0; color: var(--muted); }

.cta { text-align: center; padding: 70px 20px; background: linear-gradient(135deg, var(--brand), #6a3dff); color: #fff; border-radius: 24px; }
.cta h2 { font-size: clamp(28px, 3.5vw, 42px); }
.cta p { color: rgba(255, 255, 255, .85); font-size: 17px; }

.site-footer { padding: 40px 0 50px; color: var(--muted); font-size: 14px; }
.site-footer .container { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.site-footer a { color: var(--muted); }

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }
.auth-main { display: flex; flex-direction: column; padding: 28px; }
.auth-box { width: 100%; max-width: 400px; margin: auto; padding: 30px 0; }
.auth-box h1 { font-size: 30px; }
.auth-side { background: var(--ink); color: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.auth-side h2 { font-size: 32px; font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.auth-side p { color: #b9bfcc; }
.auth-side .quote { margin-top: 30px; padding: 20px; background: rgba(255, 255, 255, .06); border-radius: 14px; }

/* ---------- App shell ---------- */
.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: #fff; border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.sidebar .logo { padding: 4px 8px 20px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 14.5px; cursor: pointer; text-decoration: none !important; border: 0; background: none; width: 100%; text-align: left; font-family: var(--font); }
.nav-item svg { width: 18px; height: 18px; opacity: .75; }
.nav-item:hover { background: #eef2f8; }
.nav-item.active { background: var(--brand-soft); color: var(--brand-2); }
.nav-item.active svg { opacity: 1; }
.sidebar .bottom { margin-top: auto; display: grid; gap: 10px; }
.usage-box { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; font-size: 13px; }
.usage-bar { height: 7px; background: #e2e7ef; border-radius: 99px; overflow: hidden; margin: 8px 0; }
.usage-bar span { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .3s; }
.main { padding: 30px 38px 60px; min-width: 0; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 28px; margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.mobile-bar { display: none; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 50; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .mobile-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
  .main { padding: 22px 16px 60px; }
}

.announce { background: var(--ink); color: #fff; padding: 10px 16px; font-size: 14px; text-align: center; }

/* Create flow */
.stepper { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.stepper div { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--muted); padding: 7px 12px 7px 7px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.stepper div span { width: 22px; height: 22px; border-radius: 50%; background: #efede7; display: grid; place-items: center; font-size: 12px; }
.stepper div.on { color: var(--ink); border-color: var(--ink); }
.stepper div.on span { background: var(--ink); color: #fff; }
.stepper div.done span { background: var(--ok); color: #fff; }

.url-bar { display: flex; gap: 10px; }
@media (max-width: 600px) { .url-bar { flex-direction: column; } }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.photo { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #eee; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.hero-pick { border-color: var(--brand); }
.photo .ph-tag { position: absolute; left: 6px; top: 6px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 99px; }
.photo .ph-x { position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.photo-add { aspect-ratio: 4 / 3; border: 2px dashed #d4d0c6; border-radius: 10px; display: grid; place-items: center; color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; text-align: center; background: #fff; }
.photo-add:hover { border-color: var(--brand); color: var(--brand); }

.out-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .out-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .out-grid { grid-template-columns: 1fr; } }
.out-opt { position: relative; display: flex; gap: 12px; padding: 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: .15s; user-select: none; }
.out-opt:hover { border-color: #cfcabe; }
.out-opt.on { border-color: var(--brand); background: #f7f9ff; box-shadow: 0 0 0 3px rgba(31, 79, 255, .1); }
.out-opt.locked { cursor: pointer; opacity: .6; background: #f7f9fc; }
.out-opt .box { flex: 0 0 22px; height: 22px; border-radius: 6px; border: 1.5px solid #cfcabe; display: grid; place-items: center; margin-top: 1px; }
.out-opt.radio .box { border-radius: 50%; }
.out-opt.on .box { background: var(--brand); border-color: var(--brand); }
.out-opt.on .box::after { content: ''; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.out-opt b { display: block; font-size: 14.5px; }
.out-opt small { color: var(--muted); font-size: 12.5px; }
.out-opt .lock { position: absolute; right: 10px; top: 10px; }

.tpl-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.tpl-picker button { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 14px; font: 600 13.5px var(--font); cursor: pointer; }
.tpl-picker button.on { border-color: var(--ink); background: var(--ink); color: #fff; }

.results { display: grid; gap: 20px; }
.result { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.result-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.result-head h3 { margin: 0; font-size: 17px; }
.preview-wrap { background: repeating-conic-gradient(#edf1f7 0 25%, #f4f6fa 0 50%) 0 0 / 20px 20px; border-radius: 12px; padding: 18px; display: grid; place-items: center; }
.preview-wrap canvas, .preview-wrap video { box-shadow: var(--shadow-lg); border-radius: 6px; }
.pv-post canvas { width: min(100%, 460px); height: auto; }
.pv-story canvas, .pv-story video { width: min(100%, 300px); height: auto; }
.pv-flyer canvas { width: min(100%, 440px); height: auto; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }
.copy-block { position: relative; }
.copy-block textarea { padding-right: 84px; min-height: 120px; font-size: 14px; background: #fcfbf8; }
.copy-block .btn { position: absolute; right: 8px; top: 8px; }
.progress { height: 8px; border-radius: 99px; background: #eceae3; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--brand); width: 0; transition: width .2s; }

.history { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.h-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: .15s; }
.h-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.h-card .thumb { aspect-ratio: 16 / 10; background: #e2e7ef center/cover; }
.h-card .body { padding: 14px; }
.h-card .body b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty svg { width: 48px; height: 48px; margin: 0 auto 12px; opacity: .5; }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } }

/* Tables (admin) */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); background: #f7f9fc; white-space: nowrap; }
td { padding: 12px 14px; border-bottom: 1px solid #edf1f7; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td select { padding: 6px 8px; font-size: 13px; width: auto; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.stat .v { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.stat .l { color: var(--muted); font-size: 13px; font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 10px; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars .b i { display: block; width: 100%; max-width: 34px; background: var(--brand); border-radius: 5px 5px 2px 2px; min-height: 2px; }
.bars .b span { font-size: 10.5px; color: var(--muted); }
.bars .b em { font-style: normal; font-size: 11px; font-weight: 700; }
.sys-list { display: grid; gap: 10px; }
.sys-list div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf1f7; font-size: 14px; }

/* Modal + toast */
.modal-bg { position: fixed; inset: 0; background: rgba(13, 19, 33, .5); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal { background: #fff; border-radius: 18px; padding: 26px; width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); }
.modal h3 { font-size: 20px; }
.toast-wrap { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; }
.toast { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); animation: up .25s ease; }
.toast.err { background: var(--danger); }
@keyframes up { from { opacity: 0; transform: translateY(8px); } }

.legal { max-width: 760px; margin: 0 auto; padding: 50px 20px 80px; }
.legal h1 { font-size: 36px; }
.legal h2 { font-size: 20px; margin-top: 30px; }

/* ---------- v2: onboarding, brand profile, smart photos ---------- */
.seg { display: inline-flex; background: #edf1f7; border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 7px 13px; border-radius: 8px; font: 600 13px var(--font); color: var(--ink-2); cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tpl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tpl-cards button { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 8px; cursor: pointer; font: 700 13px var(--font); display: grid; gap: 6px; }
.tpl-cards button canvas { width: 100%; height: auto; border-radius: 6px; }
.tpl-cards button.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,79,255,.15); }
.palettes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.palettes button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px; display: flex; gap: 2px; cursor: pointer; }
.palettes i { width: 16px; height: 22px; border-radius: 4px; display: block; }
.tone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tone-grid button { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 12px 14px; cursor: pointer; font-family: var(--font); }
.tone-grid button b { display: block; font-size: 14px; }
.tone-grid button small { color: var(--muted); font-size: 12.5px; }
.tone-grid button.on { border-color: var(--brand); background: #f7f9ff; box-shadow: 0 0 0 3px rgba(31,79,255,.1); }
.upload-box { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px dashed #d4d0c6; border-radius: 12px; background: #fcfbf8; margin-top: 6px; }
.upload-prev { width: 84px; height: 84px; border-radius: 12px; background: #e6ebf2; display: grid; place-items: center; overflow: hidden; flex: 0 0 84px; color: var(--muted); font-size: 26px; }
.upload-prev.round { border-radius: 50%; }
.upload-prev img { width: 100%; height: 100%; object-fit: contain; }
.upload-prev.round img { object-fit: cover; }
.privacy-note { display: flex; gap: 10px; align-items: flex-start; background: var(--ok-soft); color: #0b5c35; border-radius: 10px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 16px; }
.privacy-note svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }
label.check { display: flex; gap: 9px; align-items: center; font-weight: 600; font-size: 14px; margin: 12px 0 0; cursor: pointer; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs a { padding: 10px 14px; font-weight: 700; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none !important; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }

body.wizard-mode .sidebar, body.wizard-mode .mobile-bar { display: none; }
body.wizard-mode .app-shell { grid-template-columns: 1fr; }
.wizard { max-width: 1120px; margin: 0 auto; }
.wizard-top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.wiz-progress { flex: 1; display: flex; gap: 6px; }
.wiz-progress i { flex: 1; height: 6px; border-radius: 99px; background: #e2e7ef; }
.wiz-progress i.on { background: var(--brand); }
.wizard-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .wizard-body { grid-template-columns: 1fr; } .wiz-preview { display: none; } }

.photo .ph-room { position: absolute; left: 6px; bottom: 6px; background: rgba(13,19,33,.72); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.photo .ph-roles { position: absolute; left: 6px; top: 6px; display: flex; gap: 3px; flex-wrap: wrap; max-width: calc(100% - 34px); }
.photo .ph-roles span { background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 99px; }
.photo.broken { opacity: .3; }
.photos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.reel-strip { margin-top: 16px; padding: 14px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 12px; }
.reel-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.reel-item { flex: 0 0 104px; font-size: 11.5px; }
.ri-img { width: 104px; height: 150px; border-radius: 10px; background: #ddd center/cover; position: relative; }
.ri-img span { position: absolute; left: 6px; top: 6px; background: var(--ink); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 11px; }
.ri-room { font-weight: 700; margin-top: 5px; }
.ri-text { color: var(--muted); line-height: 1.3; margin-top: 2px; }
.ri-ctl { display: flex; gap: 3px; margin-top: 5px; }
.ri-ctl button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-size: 12px; padding: 3px 0; }
.ri-ctl button[disabled] { opacity: .35; cursor: default; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pm-grid label.check { margin-top: 8px; font-size: 13.5px; }
.key-status { font-size: 13px; margin-top: 8px; }

/* ---------- v3: design studio, reel editor ---------- */
.spin-dot { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--brand); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
.spin-dot.big { width: 28px; height: 28px; border-width: 3px; }
.progress-steps { background: var(--brand-soft); color: #1636a8; padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.tpl-picker button { display: inline-flex; align-items: center; gap: 6px; }
.tpl-picker button i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.studio { margin-bottom: 20px; }
.studio-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; }
.studio-row select { width: auto; min-width: 180px; }
.theme-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-chips button { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 12px; font: 600 13.5px var(--font); cursor: pointer; }
.theme-chips button.on { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(13,19,33,.1); }
.theme-chips .sw { display: inline-flex; border-radius: 5px; overflow: hidden; border: 1px solid rgba(0,0,0,.12); }
.theme-chips .sw i { width: 10px; height: 18px; display: block; }
[data-panel].on { background: var(--ink); color: #fff; border-color: var(--ink); }
.panel { border-top: 1px solid var(--line); margin-top: 14px; }
.field.span-2 { grid-column: span 2; }
@media (max-width: 720px) { .field.span-2 { grid-column: span 1; } }
.rw { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rw button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 11px; font: 600 12px var(--font); cursor: pointer; color: var(--ink-2); }
.rw button:hover { border-color: var(--brand); color: var(--brand); }
.pv-flyer canvas { width: min(100%, 620px); }
.carousel-row { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; }
.car-slide { flex: 0 0 230px; display: grid; gap: 6px; justify-items: center; }
.car-slide canvas { width: 230px; height: auto; border-radius: 6px; box-shadow: var(--shadow); }
.car-edit { margin-top: 10px; }
.car-field { margin-bottom: 8px; }
.reel-studio { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .reel-studio { grid-template-columns: 1fr; } }
.reel-preview .preview-wrap canvas { width: min(100%, 300px); }
.player-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.scrub { flex: 1; height: 8px; border-radius: 99px; background: #e5e2da; cursor: pointer; overflow: hidden; }
.scrub span { display: block; height: 100%; background: var(--brand); width: 0; }
.reel-controls .seg { flex-wrap: wrap; }
.scene-list { display: grid; gap: 10px; margin: 8px 0 10px; }
.scene-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: center; background: #f7f9fc; border: 1px solid var(--line); border-radius: 12px; padding: 8px; position: relative; }
.sc-thumb { width: 74px; height: 96px; border-radius: 8px; background: #ddd center/cover; cursor: pointer; position: relative; }
.sc-thumb span { position: absolute; left: 5px; top: 5px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.sc-thumb:hover { outline: 2px solid var(--brand); }
.sc-fields { display: grid; gap: 6px; }
.sc-fields input { padding: 8px 10px; font-size: 14px; }
.sc-side { display: grid; gap: 6px; }
.sc-side select { padding: 6px 8px; font-size: 13px; }
.sc-ctl { display: flex; gap: 3px; }
.sc-ctl button { border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; padding: 3px 8px; }
.sc-ctl button[disabled] { opacity: .35; }
.sc-room { position: absolute; left: 92px; bottom: -2px; font-size: 11px; }
.add-more { margin-top: 20px; }
.chips-select { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip-check { border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px; margin: 0; background: #fff; }

/* ---------- layout containment: nothing may widen the page ---------- */
html, body { max-width: 100%; overflow-x: clip; }
.app-shell { grid-template-columns: 240px minmax(0, 1fr); }
@media (max-width: 900px) { .app-shell { grid-template-columns: minmax(0, 1fr); } }
.main, .results, .result, .card, .studio, .panel, .reel-studio > *, .two-col > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.results { grid-template-columns: minmax(0, 1fr); }
.preview-wrap { overflow: hidden; }
.preview-wrap canvas, .preview-wrap video { max-width: 100%; height: auto; }
.carousel-row { max-width: 100%; }
.theme-chips, .studio-row, .result-head, .page-head { min-width: 0; }
.studio-row > div { min-width: 0; max-width: 100%; }
.studio-row select { max-width: 100%; }
textarea, input, select { max-width: 100%; }
@media (max-width: 600px) {
  .scene-row { grid-template-columns: 60px minmax(0, 1fr); }
  .sc-side { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
  .sc-room { display: none; }
  .grid-2[style*="1fr 2fr"] { grid-template-columns: 1fr !important; }
  .page-head .btn { width: 100%; }
}
/* sidebar stays with you while scrolling */
@media (min-width: 901px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; align-self: start; }
}

/* ---------- v4: viral reels, tap-to-edit photos, Design with AI ---------- */
.modal { max-height: calc(100vh - 32px); overflow-y: auto; }
.modal:has(.pin-stage), .modal:has(.slot-stage), .modal:has(#aiFmt) { max-width: 660px; }
.btn-ai { background: linear-gradient(135deg, #6d4bff, #ff4f9a); color: #fff; border: 0; box-shadow: 0 4px 14px rgba(109, 75, 255, .3); }
.btn-ai:hover { filter: brightness(1.06); }
.concepts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.concepts button { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; font: 13px var(--font); color: var(--ink); transition: border .15s, box-shadow .15s; }
.concepts button .em { font-size: 20px; line-height: 1.1; }
.concepts button .small { font-size: 11.5px; line-height: 1.35; }
.concepts button.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31, 79, 255, .14); background: #f7f9ff; }
.music-info { margin-top: 10px; background: #f1f4f9; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.pins { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pin-chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; }
.pin-add { border: 1px dashed #b9b3a6; background: transparent; border-radius: 999px; padding: 3px 10px; font: 600 12px var(--font); color: var(--ink-2); cursor: pointer; }
.pin-add:hover { border-color: var(--brand); color: var(--brand); }
.pin-stage { position: relative; border-radius: 12px; overflow: hidden; background: #111; cursor: crosshair; touch-action: none; user-select: none; }
.pin-stage img { display: block; width: 100%; height: auto; pointer-events: none; }
.pin { position: absolute; transform: translate(-50%, -50%); cursor: grab; display: flex; align-items: center; gap: 6px; }
.pin i { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.4); flex: none; }
.pin span { position: absolute; left: 26px; white-space: nowrap; background: #fff; color: #111; font: 700 13px var(--font); padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.pin-list { display: grid; gap: 8px; margin-top: 12px; }
.pin-row { gap: 8px; }
.pin-row input { padding: 8px 10px; }
.pin-n { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 12px; display: grid; place-items: center; flex: none; }
.slot-stage { display: grid; place-items: center; background: repeating-conic-gradient(#eee 0 25%, #f8f8f8 0 50%) 0 0 / 20px 20px; border-radius: 12px; padding: 12px; }
.slot-stage canvas { display: block; border-radius: 6px; cursor: grab; touch-action: none; box-shadow: 0 4px 18px rgba(0,0,0,.2); height: auto; }
.slot-stage canvas:active { cursor: grabbing; }
.slot-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 200px; overflow-y: auto; }
.slot-photos button { aspect-ratio: 4/3; border: 2px solid transparent; border-radius: 8px; background: #ddd center/cover; cursor: pointer; padding: 0; }
.slot-photos button.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(31, 79, 255, .25); }
.chip-btn { border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 12px; background: #fff; font: 600 13px var(--font); color: var(--ink-2); cursor: pointer; }
.chip-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ai-result { border: 1.5px solid #d9d0ff; background: linear-gradient(180deg, #faf8ff, #fff 120px); }
.ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ai-card { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ai-card .preview-wrap { max-width: 100%; }
.ai-meta { display: grid; gap: 2px; min-width: 0; }
.ai-meta .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-wrap canvas { transition: filter .15s; }
.tpl-ai-note { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #f4f0ff, #fff0f6); font-size: 13.5px; }
.pin-row { display: flex; flex-wrap: nowrap; align-items: center; }
.pin-row input { flex: 1; min-width: 0; }
.pin-row .btn { flex: none; }
.scene-row .sc-room { position: static; grid-column: 2 / -1; margin-top: -2px; }
@media (min-width: 901px) { .reel-studio .reel-preview { position: sticky; top: 16px; align-self: start; } }

/* ---------- v5: logo versions, color row, theme previews, AI edit ---------- */
.logo-versions { margin-top: 10px; }
.lv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lv-grid > div { display: grid; gap: 4px; justify-items: center; text-align: center; }
.lv-img { width: 100%; height: 76px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; background: #fff; padding: 8px; }
.lv-img img { max-width: 100%; max-height: 58px; object-fit: contain; }
.lv-check { background: repeating-conic-gradient(#e9e9e9 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.lv-dark { background: #1d2230; }
.color-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.color-row button, .color-row label { margin: 0; cursor: pointer; }
.cr-def { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 11px 5px 6px; font: 600 12.5px var(--font); color: var(--ink-2); }
.cr-def i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.1); }
.cr-theme { background: conic-gradient(#56503f 0 25%, #c2a15e 0 50%, #1d3a57 0 75%, #e8b4a8 0) !important; }
.cr-def.on { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 2px rgba(13,19,33,.12); }
.cr-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); padding: 0; }
.cr-sw.on { box-shadow: 0 0 0 2px var(--ink); }
.cr-custom { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed #b9b3a6; font-weight: 700; color: var(--ink-2); position: relative; overflow: hidden; }
.cr-custom.on { border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ink); color: transparent; }
.cr-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: 0; }
.theme-chips button { display: grid; gap: 4px; padding: 5px; }
.theme-chips .tp { position: relative; display: grid; place-items: center; width: 116px; height: 58px; border-radius: 7px; font-size: 15px; line-height: 1.05; letter-spacing: .02em; border: 1px solid rgba(0,0,0,.08); overflow: hidden; padding: 6px 6px 10px; text-align: center; }
.theme-chips .tp em { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.theme-chips .tp small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; margin-top: 3px; }
.theme-chips .tn { font-size: 12px; font-weight: 700; text-align: center; }
.ai-note { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #f4f0ff, #fff0f6); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; font-size: 13.5px; }
.trk-list { display: grid; gap: 6px; margin-top: 8px; }
.trk-row { background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stats-grid .stat .big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0; }
.ai-bars { display: flex; align-items: flex-end; gap: 12px; height: 180px; padding-top: 10px; }
.ai-bar { flex: 1; display: grid; justify-items: center; align-content: end; gap: 4px; min-width: 0; }
.ai-bar i { display: block; width: 70%; max-width: 46px; background: linear-gradient(180deg, #6d4bff, #0055ec); border-radius: 6px 6px 2px 2px; }
.ai-bar .v { font-size: 12px; font-weight: 700; }
.ai-strip { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--ink); padding: 14px 18px; }

/* ---------- v8: social posting ---------- */
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.social-card { display: grid; gap: 10px; align-content: start; }
.sc-acct { gap: 8px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.sc-acct img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.share-accts { display: grid; gap: 8px; }
.share-acct { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 0; cursor: pointer; font-weight: 400; }
.share-acct:has(input:checked) { border-color: var(--brand); background: #f7f9ff; }
.share-acct input { width: auto; }
.share-acct img, .share-acct .sa-ic { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #edf1f7; font-size: 18px; flex: none; }
.share-acct > span:last-child { display: grid; line-height: 1.25; }
.share-tt { margin-top: 10px; background: #f1f4f9; border-radius: 10px; padding: 10px 12px; }
.share-tt .check { margin: 4px 0; }
.share-tt .disabled { opacity: .55; }
.share-status { display: grid; gap: 6px; margin-top: 10px; }
.share-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #fff; }
.share-row.s-done { border-color: #b7e4c7; background: #f3fbf5; }
.share-row.s-failed { border-color: #f5c2c7; background: #fff5f5; }
.redir-list { display: grid; gap: 4px; }
.redir-list code { background: #f1f4f9; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; word-break: break-all; }
.setup-guide { margin-top: 10px; }
.setup-guide summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.setup-guide li { margin: 6px 0; }
.share-tt label.check { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.share-tt label.check input { width: auto; margin: 0; }
.share-tt label.check .small { font-weight: 400; }
.sc-acct { flex-wrap: nowrap; }
.sc-acct b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- v12: banners, jump bar, template picker, colors, billing, team, scheduling ---------- */
.banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; font-size: 14px; text-align: center; }
.banner-dark { background: #2b1d5c; color: #fff; }
.banner-warn { background: var(--warn-soft); color: #7a4a00; border-bottom: 1px solid #f3d9a8; }
.btn-light { background: #fff; color: var(--ink); }
.jumpbar { position: sticky; top: 0; z-index: 30; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 12px; margin: 0 0 16px; background: rgba(246,244,239,.94); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 12px; }
.jumpbar::-webkit-scrollbar { display: none; }
.jumpbar button { flex: 0 0 auto; border: 1px solid transparent; background: transparent; padding: 7px 13px; border-radius: 999px; font: 700 13px var(--font); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.jumpbar button:hover { background: #fff; border-color: var(--line); }
.jumpbar button.on { background: var(--ink); color: #fff; }
.jumpbar button[data-j=top] { margin-left: auto; }
.result { scroll-margin-top: 80px; }

.tplp { position: relative; }
.tplp-btn { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 6px 12px 6px 6px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.tplp-btn:hover, .tplp.open .tplp-btn { border-color: var(--ink); }
.tplp-name { display: grid; min-width: 0; flex: 1; }
.tplp-name b { font-size: 14.5px; }
.tplp-name small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tplp-caret { color: var(--muted); }
.tplp .tp { position: relative; display: grid; place-items: center; width: 96px; height: 50px; flex: 0 0 auto; border-radius: 7px; font-size: 13px; line-height: 1.05; letter-spacing: .02em; border: 1px solid rgba(0,0,0,.08); overflow: hidden; padding: 4px 6px 9px; text-align: center; }
.tplp .tp em { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.tplp .tp small { display: block; font-size: 9px; font-weight: 600; letter-spacing: .08em; margin-top: 2px; }
.tplp-panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: min(640px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(13,19,33,.18); padding: 12px; }
.tplp-top input { padding: 10px 12px; }
.tplp-cats { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.tplp-cats button { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; padding: 5px 11px; border-radius: 999px; font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.tplp-cats button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tplp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: 360px; overflow-y: auto; padding: 2px; }
.tplp-grid button { display: grid; gap: 4px; justify-items: start; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 6px; cursor: pointer; font: inherit; }
.tplp-grid button:hover { border-color: #b9bcc6; }
.tplp-grid button.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,79,255,.15); }
.tplp-grid .tp { width: 100%; height: 66px; font-size: 15px; }
.tplp-grid canvas { width: 100%; height: auto; border-radius: 6px; background: #f1f4f9; aspect-ratio: 4 / 5; }
.tplp-cn { font-weight: 700; font-size: 13px; }
.tplp-cd { font-size: 11px; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tplp-canvas { max-height: 440px; }
@media (max-width: 640px) { .tplp-panel { position: fixed; left: 16px; right: 16px; top: 70px; width: auto; } .tplp-grid { grid-template-columns: repeat(2, 1fr); max-height: 60vh; } }
.cr-more { margin-left: 4px; }
.cr-more.on { border-color: var(--brand); color: var(--brand); }
.ce-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ce-f { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; cursor: pointer; margin: 0; }
.ce-f input { width: 44px; height: 36px; padding: 2px; border-radius: 8px; flex: 0 0 auto; }
.ce-f span { display: grid; }

.bill-toggle { display: flex; justify-content: center; margin: 6px 0 22px; }
.bill-toggle .seg button { padding: 9px 18px; }
.save-pill { display: inline-block; margin-left: 6px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.pro-pill { display: inline-block; margin-left: 4px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; letter-spacing: .04em; }
.tag.tag-soft { background: var(--ink-2); }
.share-when { margin-top: 12px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: 600 13px var(--font); cursor: pointer; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.dup-list { display: grid; gap: 8px; margin-top: 12px; }
.dup-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }
.dup-row:hover { border-color: var(--ink); }
.danger-zone { border-color: #f3c7c2; }
@media (max-width: 700px) { .card table { display: block; overflow-x: auto; } .card table td, .card table th { white-space: nowrap; } }
.mu-grid { display: grid; gap: 12px; margin-top: 14px; }
.mu-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.pay-list, .bk-list { display: grid; gap: 6px; margin-top: 8px; }
.pay-row { padding: 8px 0; border-bottom: 1px solid #edf1f7; gap: 8px; flex-wrap: wrap; }
.pay-row:last-child { border-bottom: 0; }
.bk-list { max-height: 420px; overflow-y: auto; }
.em-frame { width: 100%; height: 360px; border: 1px solid var(--line); border-radius: 10px; background: #f1f4f9; }
.err-stack { white-space: pre-wrap; font-size: 11px; max-height: 200px; overflow: auto; background: #f1f4f9; padding: 8px; border-radius: 8px; }
.legal ul, .legal ol { padding-left: 22px; line-height: 1.7; } .legal li { margin: 4px 0; } .legal-foot { text-align: center; padding: 0 20px 40px; color: var(--muted); font-size: 14px; }
/* homepage examples */
.ba { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.6fr); gap: 22px; align-items: center; }
.ba-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #e6ebf2; color: var(--ink-2); padding: 5px 10px; border-radius: 999px; margin-bottom: 12px; }
.ba-tag-on { background: var(--brand); color: #fff; }
.ba-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; filter: saturate(.9); }
.ba-arrow { font-size: 34px; color: var(--muted); }
.ba-grid { display: grid; grid-template-columns: 1.1fr .7fr 1fr 1fr; gap: 12px; align-items: end; }
.ba-grid figure, .tpl-strip figure { margin: 0; }
.ba-grid canvas, .tpl-strip canvas { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow); display: block; background: #eee; }
.ba-grid figcaption, .tpl-strip figcaption { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 6px; text-align: center; }
.tpl-strip { display: grid; grid-template-columns: repeat(8, minmax(130px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
@media (max-width: 900px) { .ba { grid-template-columns: 1fr; } .ba-arrow { transform: rotate(90deg); justify-self: center; } .ba-grid { grid-template-columns: 1fr 1fr; } .tpl-strip { grid-template-columns: repeat(8, 150px); } }
.price-card ul { align-content: start; }
/* v13: photo strips + slot editor */
.slot-strip { margin-top: 12px; }
.ss-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.ss-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.ss-thumb { flex: 0 0 auto; display: grid; gap: 4px; justify-items: center; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 6px; cursor: pointer; font: 600 11.5px var(--font); color: var(--ink-2); position: relative; max-width: 130px; }
.ss-thumb:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,79,255,.12); }
.ss-thumb canvas { height: 64px; width: auto; max-width: 116px; border-radius: 5px; display: block; }
.ss-thumb span { max-width: 116px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-thumb em { position: absolute; top: 2px; right: 2px; font-style: normal; font-size: 9.5px; background: var(--brand); color: #fff; border-radius: 999px; padding: 1px 6px; }
.slot-hl { position: absolute; pointer-events: none; border: 3px solid #0055ec; box-shadow: 0 0 0 9999px rgba(13,19,33,.35); border-radius: 4px; z-index: 3; }
.slot-tabs { margin-bottom: 4px; }
.slot-zoom { gap: 8px; margin-top: 10px; flex-wrap: nowrap; }
.slot-zoom input { flex: 1; }
.slot-photos { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; max-height: 300px !important; gap: 8px !important; }
.slot-photos button { position: relative; aspect-ratio: 4/3; }
.slot-photos button span { position: absolute; left: 4px; bottom: 4px; right: 4px; background: rgba(0,0,0,.6); color: #fff; font: 600 10.5px var(--font); border-radius: 4px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ex-tabs { flex-wrap: wrap; }
.pv-extra canvas { width: 100%; max-width: 760px; height: auto; object-fit: contain; }
.ex-lock { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; justify-items: center; background: rgba(246,244,239,.72); backdrop-filter: blur(6px); border-radius: 12px; }
/* v13: content studio */
.studio-filter { display: grid; gap: 6px; margin-bottom: 14px; }
.studio-filter input { max-width: 420px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.st-card { display: grid; gap: 6px; }
.st-card a { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.st-card canvas { width: 100%; aspect-ratio: 4 / 5; height: auto; border-radius: 10px; background: #e6ebf2; box-shadow: var(--shadow); transition: transform .15s; }
.st-card a:hover canvas { transform: translateY(-3px); }
.st-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.st-prev canvas { width: 100%; height: auto; cursor: grab; touch-action: none; }
.st-ai { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.st-ai input { flex: 1; min-width: 200px; }
.st-cur { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.st-cur > span { width: 92px; height: 70px; border-radius: 8px; background: #e7e3da center/cover; flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .st-editor { grid-template-columns: 1fr; } }
.studio-filter .tplp-cats { flex-wrap: wrap; }
/* v14: tap-to-edit text */
.text-hl { position: absolute; pointer-events: none; border: 2px dashed #0055ec; background: rgba(31,79,255,.08); border-radius: 4px; z-index: 3; }
.text-pop { position: absolute; z-index: 120; width: 320px; max-width: calc(100% - 8px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(13,19,33,.22); padding: 12px; }
.text-pop .tp-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.text-pop input, .text-pop textarea { font-size: 15px; }
.pro-lock { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; background: linear-gradient(90deg, #eef2ff, #f5efff); border: 1px solid #d9defa; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.pro-lock > div { display: grid; gap: 2px; }
.locked-preview table { opacity: .75; }
.pro-list { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
/* v14: settings + account row */
.acct-row { padding: 0 2px; }
.acct-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.acct-link:hover, .acct-link.active { background: var(--brand-soft); }
.acct-av { width: 34px; height: 34px; border-radius: 50%; background: var(--ink) center/cover; color: #fff; display: grid; place-items: center; font: 700 12px var(--font); flex: 0 0 auto; }
.acct-txt { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.acct-txt b, .acct-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.acct-link .gear { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); }
.settings-tabs { flex-wrap: wrap; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.settings-grid h3, .card > h3 { font-size: 18px; }
.nav-item .pro-pill { margin-left: auto; }
.sidebar .nav-item { white-space: nowrap; }
/* v15: carousel viewer */
.car-zoom { position: relative; cursor: zoom-in; display: block; }
.car-zoom span { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(13,19,33,.65); color: #fff; display: grid; place-items: center; font-size: 15px; opacity: 0; transition: opacity .15s; }
.car-zoom:hover span { opacity: 1; }
.slide-viewer { position: fixed; inset: 0; z-index: 90; background: rgba(10,12,18,.88); display: flex; align-items: center; justify-content: center; gap: 18px; padding: 20px; }
.sv-stage { display: grid; gap: 10px; justify-items: center; max-height: 100%; }
.sv-stage canvas { max-height: calc(100vh - 140px); max-width: min(78vw, 720px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #222; }
.sv-bar { display: flex; align-items: center; gap: 12px; width: 100%; color: #fff; flex-wrap: wrap; }
.sv-bar .muted { color: rgba(255,255,255,.65); }
.sv-count { font-weight: 700; }
.sv-nav { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: #0d1321; font-size: 34px; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.sv-nav:disabled { opacity: .25; cursor: default; }
.sv-close { position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 20px; cursor: pointer; }
.sv-dots { display: flex; gap: 8px; }
.sv-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.35); padding: 0; cursor: pointer; }
.sv-dots button.on { background: #fff; }
@media (max-width: 640px) { .slide-viewer { gap: 6px; padding: 10px; } .sv-nav { width: 40px; height: 40px; font-size: 26px; } .sv-stage canvas { max-width: calc(100vw - 110px); } }
.is-locked { opacity: .6; } .st-editor [disabled] { background: #f1f4f9; color: var(--ink-2); cursor: not-allowed; }
.sidebar .nav-item svg { flex: 0 0 auto; }
.reel-cover { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; } .reel-cover canvas { width: 64px; height: auto; border-radius: 6px; flex: 0 0 auto; }
/* v16 */
.save-offer { display: grid; gap: 10px; background: linear-gradient(135deg, #eef2ff, #f6efff); border: 1px solid #d5dbfb; border-radius: 14px; padding: 16px; margin: 12px 0; position: relative; }
.save-offer > div:nth-child(2), .save-alt > div { display: grid; gap: 2px; }
.so-badge { justify-self: start; background: var(--ok); color: #fff; font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.save-alt { display: flex; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; flex-wrap: wrap; }
.lose-list { margin: 0 0 12px; padding-left: 18px; line-height: 1.6; color: var(--ink-2); }
.explain { display: none; background: #fff8e6; border: 1px solid #f3e2b3; color: #6b4e00; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; line-height: 1.45; margin: 8px 0; }
body.simple .explain { display: block; }
body.simple .adv { display: none !important; }
.mode-switch { display: flex; align-items: center; gap: 8px; padding: 0 6px 10px; }
.mode-switch .seg button { padding: 5px 10px; font-size: 12.5px; }
.import-help { margin-top: 14px; border: 1px solid #d9defa; background: #f6f8ff; border-radius: 12px; padding: 14px; display: grid; gap: 12px; }
.ih-opt { display: flex; gap: 12px; align-items: flex-start; }
.ih-opt p { margin: 4px 0 8px; }
.ih-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 13px var(--font); }
.bm-btn { display: inline-block; background: linear-gradient(135deg, #0055ec, #7a3cff); color: #fff !important; font-weight: 800; padding: 9px 16px; border-radius: 999px; text-decoration: none; cursor: grab; margin-right: 8px; box-shadow: 0 4px 14px rgba(31,79,255,.3); }
.paste-box { min-height: 64px; border: 2px dashed #b9c2ee; border-radius: 10px; background: #fff; padding: 12px; outline: none; }
.paste-box:empty::before { content: attr(data-ph); color: var(--muted); }
.paste-box:focus { border-color: var(--brand); }
.tabsbar button.on { background: var(--ink); color: #fff; }
.tabsbar button[data-j=all] { margin-left: auto; border-color: var(--line); background: #fff; }
.tabsbar button[data-j=all].on { background: var(--ink); color: #fff; }

/* v16 restyle lock */
.lock-note{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.style-locked #themeChips,.style-locked #colorRow{opacity:.55;filter:grayscale(.4);cursor:not-allowed}
.style-locked #themeChips *,.style-locked #colorRow *{pointer-events:none}
.lv-tap{cursor:crosshair;outline:2px dashed transparent;transition:outline-color .15s}
.lv-tap:hover{outline-color:var(--brand,#0055ec)}
.lv-tools{margin-top:10px;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fafafa}
.lv-tip{font-size:13px}
/* v16 layout picker */
.tplp-hint{margin:8px 2px 8px}
.tplp-grid button[data-f]{position:relative}
.tplp-schemes{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.tplp-sl{display:grid;gap:2px;margin-bottom:8px}
.tplp-sc{display:flex;flex-wrap:wrap;gap:6px;max-height:120px;overflow-y:auto}
.tplp-sc button{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px 5px 7px;font:600 12.5px var(--font);cursor:pointer}
.tplp-sc button i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.12);margin-right:-2px}
.tplp-sc button i:last-of-type{margin-right:4px}
.tplp-sc button.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,79,255,.15)}
.tplp-sc .tplp-brand{background:conic-gradient(var(--brand),#ffb547,var(--brand))}
.tplp-sc .tplp-ai{border-style:dashed;padding-left:11px}
.tplp-panel{max-height:min(80vh,760px);overflow-y:auto}
/* v16 drag & drop */
.drop-on{outline:3px dashed var(--brand,#0055ec)!important;outline-offset:3px;background-image:linear-gradient(rgba(31,79,255,.06),rgba(31,79,255,.06))}
canvas.drop-on{outline-offset:-3px}
/* v16 setup helpers */
.notsure{border:1.5px dashed #c9b8ff;background:linear-gradient(135deg,#faf7ff,#f3f8ff);border-radius:14px;padding:14px 16px;margin-bottom:18px}
.notsure input{flex:1;min-width:0}
.lf{border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:10px;background:#fff}
.lf-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.lf-grid button{width:150px;height:84px;border:1.5px solid var(--line);border-radius:10px;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px;cursor:pointer;padding:8px;display:grid;place-items:center}
.lf-grid button:hover{border-color:var(--brand)}
.lf-grid img{max-width:100%;max-height:100%}
.dd-hint{margin-top:4px}
.wiz-bar{height:8px;border-radius:99px;background:#e2e7ef;overflow:hidden;flex:1;min-width:120px}
.wiz-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#7c5cff);border-radius:99px;transition:width .4s}
.wiz-note{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#fff7e6;border:1px solid #f3dfb0;font-size:14px}
.wiz-saved{font-size:12.5px;color:var(--muted)}
/* v16 my reel concepts */
.my-concepts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mc{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:600 13px var(--font);cursor:pointer}
.mc.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,79,255,.15)}
.mc i{font-style:normal;color:var(--muted);padding:0 2px}
.mc i:hover{color:#b91c1c}
.mc-new{border-style:dashed}
/* v16 help + chips */
.chips-select .chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:600 12.5px var(--font);cursor:pointer;margin:0 6px 6px 0}
.chips-select .chip:hover{border-color:var(--brand)}
.help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.help-card h3{font-size:18px;margin:14px 0 4px}
.help-vid{border-radius:12px;overflow:hidden;background:#0f1115;aspect-ratio:16/10}
.help-vid video{width:100%;height:100%;display:block;object-fit:contain;background:#0f1115}
.help-novid{display:grid;place-items:center;height:100%;color:#cbd0d8;font-weight:600;padding:20px;text-align:center}
.help-steps{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14.5px}
.help-links{display:flex;flex-wrap:wrap;gap:8px}
.help-terms{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:0;font-size:14.5px}
.help-terms dt{font-weight:700}.help-terms dd{margin:0;color:var(--muted)}
@media(max-width:640px){.help-terms{grid-template-columns:1fr;gap:2px 0}.help-terms dd{margin-bottom:8px}}
/* v17 enhance */
.enh-list{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px;font-size:14.5px}
.enh-bar{height:8px;border-radius:99px;background:#e2e7ef;overflow:hidden;margin-top:12px}
.enh-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#7c5cff);transition:width .3s}
/* v17 enhance */
.enh-list{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px;font-size:14.5px}
.enh-bar{height:8px;border-radius:99px;background:#e2e7ef;overflow:hidden;margin-top:12px}
.enh-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#7c5cff);transition:width .3s}
/* v19 walkthroughs */
.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:6px;max-height:420px;overflow-y:auto;padding:2px}
.wk-ph{position:relative;aspect-ratio:4/3;border-radius:10px;border:3px solid transparent;background-size:cover;background-position:center;cursor:pointer;overflow:hidden;opacity:.65}
.wk-ph.on{border-color:var(--brand);opacity:1}
.wk-ph b{position:absolute;top:6px;left:6px;background:var(--brand);color:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:13px}
.wk-ph span{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:11px;padding:10px 6px 4px;text-align:left}
.wk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.wk-item{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;padding:12px}
.wk-thumb{width:84px;height:84px;border-radius:10px;background:#ddd center/cover;flex:0 0 auto;position:relative;overflow:hidden}
.wk-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wk-stage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.wk-canvas{position:relative;background:#0f1115;border-radius:12px;overflow:hidden;margin:0 auto}
.wk-player.vertical .wk-canvas{max-width:340px;aspect-ratio:9/16}
.wk-player.wide .wk-canvas{aspect-ratio:16/9}
.wk-canvas canvas{width:100%;height:100%;display:block}
.wk-wait{position:absolute;inset:0;display:grid;place-items:center;color:#cbd0d8;text-align:center;padding:20px;font-weight:600}
.wk-clips{display:grid;gap:8px;max-height:720px;overflow-y:auto}
.wk-clip{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}
.wk-clip .wk-thumb{width:64px;height:64px}
.wk-clip>div:nth-child(2){flex:1;min-width:0}
.wk-clip.failed{border-color:#f0b4b4;background:#fff7f7}
@media(max-width:900px){.wk-stage{grid-template-columns:1fr}}
/* v28 start options */
.start-seg{display:flex;flex-wrap:wrap;margin-bottom:16px}
.start-seg button{flex:1;min-height:44px;font-size:15px}
.addr-card{display:flex;gap:16px;border:1.5px solid var(--line);border-radius:14px;padding:14px;background:#fff;align-items:center}
.addr-card img,.addr-noimg{width:200px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#eee;flex:0 0 auto;display:grid;place-items:center;color:var(--muted)}
.addr-info h3{font-size:20px;margin:8px 0 2px}.addr-info p{margin:2px 0}
.addr-others{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
@media(max-width:640px){.addr-card{flex-direction:column;align-items:stretch}.addr-card img,.addr-noimg{width:100%}}
/* v28 start options */
.start-seg{display:flex;flex-wrap:wrap;margin-bottom:16px}
.start-seg button{flex:1;min-height:44px;font-size:15px}
.addr-card{display:flex;gap:16px;border:1.5px solid var(--line);border-radius:14px;padding:14px;background:#fff;align-items:center}
.addr-card img,.addr-noimg{width:200px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#eee;flex:0 0 auto;display:grid;place-items:center;color:var(--muted)}
.addr-info h3{font-size:20px;margin:8px 0 2px}.addr-info p{margin:2px 0}
.addr-others{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
@media(max-width:640px){.addr-card{flex-direction:column;align-items:stretch}.addr-card img,.addr-noimg{width:100%}}
/* v29 listing picker */
.pick-modal{max-width:520px}
.pick-list{display:grid;gap:14px;margin-top:14px;max-height:62vh;overflow-y:auto;padding:2px}
.pick{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.pick-img{position:relative;aspect-ratio:16/9;background:#eef0f4;display:grid;place-items:center;color:var(--muted);font-size:14px;text-align:center;padding:0}
.pick-img span{padding:18px}
.pick-img img{width:100%;height:100%;object-fit:cover;display:block}
.pick-img b{position:absolute;right:10px;bottom:10px;background:rgba(13,19,33,.82);color:#fff;font-size:13px;padding:4px 10px;border-radius:999px}
.pick-body{padding:14px 16px 16px}
.pick-price{font-size:24px;font-weight:800;letter-spacing:-.02em}
.pick-addr{color:var(--muted);margin-top:2px}
.pick-facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:14.5px;font-weight:600}

/* v31: the listing picker always fits the screen, no scrolling to reach the button */
.pick-modal{max-width:500px;max-height:calc(100dvh - 32px);display:flex;flex-direction:column;padding:20px 22px}
.pick-modal h3{margin:0}
.pick-list{max-height:none;overflow:visible;flex:1;min-height:0;margin-top:10px;gap:10px}
.pick-list:has(.pick:nth-child(2)){overflow-y:auto}
.pick{display:flex;flex-direction:column;min-height:0}
.pick-img{aspect-ratio:auto;height:clamp(110px,30dvh,260px);flex:0 1 auto}
.pick-body{padding:10px 14px 14px}
.pick-price{font-size:22px}
.pick-body .btn{margin-top:10px!important}
#pickNone{margin-top:10px!important}

/* v35: picker never clips the details; photo is a fixed band whatever shape the picture is */
.pick-list{display:block;overflow:visible;flex:0 1 auto;max-height:none}
.pick-list:has(.pick:nth-child(2)){overflow-y:auto;flex:1 1 auto}
.pick{display:block;overflow:hidden;margin-bottom:10px}
.pick-img{position:relative;height:min(28dvh,230px);min-height:96px;aspect-ratio:auto;flex:none;overflow:hidden}
.pick-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pick-old{background:#fff4e0;border:1px solid #f3d9a4;border-radius:10px;padding:8px 10px;font-size:14px;margin-top:8px}
.addr-sug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 30px rgba(13,19,33,.14);overflow:hidden}
.addr-sug button{display:block;width:100%;text-align:left;border:0;background:#fff;padding:12px 14px;font:500 15.5px var(--font);cursor:pointer}
.addr-sug button:hover,.addr-sug button.on{background:#eef2ff}

.enh-opts{display:grid;gap:10px;margin:12px 0;padding:12px 14px;border:1px solid var(--line,#e2e7ef);border-radius:12px}
.enh-opts .check{display:block;line-height:1.4}
.enh-opts .check input{margin-right:6px;vertical-align:-2px}

.modal.modal-wide{max-width:640px}
.enh-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:min(34vh,300px);overflow-y:auto;padding:8px;border:1px solid var(--line,#e2e7ef);border-radius:12px;background:#f4f6fa}
.enh-pick button{position:relative;aspect-ratio:4/3;padding:0;border:3px solid transparent;border-radius:10px;overflow:hidden;background:#ddd;cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s}
.enh-pick button img{width:100%;height:100%;object-fit:cover;display:block}
.enh-pick button.on{opacity:1;border-color:var(--brand,#1f6f5c)}
.enh-pick button i{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:var(--brand,#1f6f5c);color:#fff;font-style:normal;font-size:13px;line-height:22px;text-align:center;display:none}
.enh-pick button.on i{display:block}
.enh-pick button em{position:absolute;left:4px;bottom:4px;font-style:normal;font-size:10.5px;background:rgba(0,0,0,.6);color:#fff;border-radius:6px;padding:1px 5px}
.enh-pick button:disabled{cursor:default}

.ph-ai{position:absolute;left:6px;bottom:27px;font-size:10.5px;font-weight:600;line-height:1;padding:4px 6px;border-radius:6px;background:rgba(17,20,28,.72);color:#fff;pointer-events:none;white-space:nowrap}
.ph-ai.new{background:#7c3aed}

/* Property Launch AI brand */
.logo .logo-img{height:34px;width:auto;display:block}
.sidebar .logo .logo-img{height:30px;max-width:100%}
.btn-primary{background:var(--brand-grad);border-color:transparent}
.btn-primary:hover{filter:brightness(1.06)}

/* ===== v43: calmer app shell ===== */
h1, h2, h3 { text-wrap: balance; }
.main { padding: 36px 44px 72px; max-width: 1280px; }
.page-head h1 { font-size: 30px; letter-spacing: -.03em; }
.card { border-color: transparent; box-shadow: 0 0 0 1px rgba(1, 21, 55, .06), var(--shadow); border-radius: 16px; }
.btn { transition: transform .15s ease, filter .2s ease, background-color .2s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(1px) scale(.985); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.badge, .usage-box, .h-card .muted, .home-listing .muted { font-variant-numeric: tabular-nums; }
.sidebar { padding: 22px 14px 16px; gap: 2px; border-right: 0; box-shadow: 1px 0 0 rgba(1, 21, 55, .07); overflow-y: auto; }
.sidebar .logo { padding: 2px 8px 18px; }
.nav-new { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 2px 12px; padding: 12px 14px; border-radius: 12px; font-size: 15px; box-shadow: 0 8px 20px rgba(0, 85, 236, .22); }
.nav-new svg { width: 16px; height: 16px; }
.nav-new.active { box-shadow: 0 8px 20px rgba(0, 85, 236, .22), 0 0 0 3px rgba(0, 85, 236, .16); }
.nav-item { transition: background-color .18s ease, color .18s ease; font-weight: 550; padding: 9px 12px; }
.nav-item.active { font-weight: 650; }
.nav-group { margin: 16px 12px 4px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.nav-logout { border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; padding: 4px 12px 0; text-align: left; }
.nav-logout:hover { color: var(--ink); text-decoration: underline; }
/* listing page toolbar */
.studio { padding: 16px 18px; }
.studio-bar { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.studio-status { display: grid; gap: 4px; margin-right: 8px; }
.studio-status label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 0; }
.studio-status select { width: auto; min-width: 170px; }
#lookBtn .caret { display: inline-block; transition: transform .2s ease; }
#lookBtn.on { background: var(--brand-soft); color: var(--brand-2); border-color: transparent; }
#lookBtn.on .caret { transform: rotate(180deg); }
.look-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.studio-tip { margin: 12px 0 0; }
/* home */
.home { display: grid; gap: 40px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.home-hero-main { padding: 8px 0; align-self: center; }
.eyebrow { margin: 0 0 10px; color: var(--brand); font-weight: 650; font-size: 14px; }
.home h1 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.035em; line-height: 1.05; margin: 0 0 12px; }
.home .lede { font-size: 17px; color: var(--muted); max-width: 46ch; margin: 0 0 22px; }
.btn-lg { padding: 14px 24px; font-size: 16px; border-radius: 12px; }
.home-steps { list-style: none; counter-reset: st; margin: 0; padding: 22px 24px; display: grid; gap: 16px; background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px rgba(1, 21, 55, .06), var(--shadow); align-content: center; }
.home-steps li { counter-increment: st; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; }
.home-steps li::before { content: counter(st); grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-2); font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.home-steps b { font-size: 15px; }
.home-steps span { color: var(--muted); font-size: 14px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sec-head h2 { font-size: 20px; margin: 0; letter-spacing: -.02em; }
.sec-head a { margin-left: auto; font-weight: 600; font-size: 14px; }
.home-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.home-listing { display: grid; background: #fff; border-radius: 16px; overflow: hidden; text-decoration: none !important; color: inherit; box-shadow: 0 0 0 1px rgba(1, 21, 55, .06), var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.home-listing:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0, 85, 236, .18), 0 16px 34px rgba(1, 21, 55, .12); }
.home-listing .thumb { aspect-ratio: 16 / 10; background: #dfe6f0 center / cover; }
.home-listing .body { display: grid; gap: 2px; padding: 12px 14px 14px; }
.home-empty { display: grid; gap: 4px; padding: 26px; border-radius: 16px; border: 1.5px dashed #cfd8e6; max-width: 620px; }
.home-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-tool { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 16px; background: #fff; text-decoration: none !important; color: inherit; box-shadow: 0 0 0 1px rgba(1, 21, 55, .06); transition: transform .2s ease, box-shadow .2s ease; }
.home-tool.wide { grid-column: span 2; background: linear-gradient(135deg, #011537 0%, #06306f 100%); color: #fff; }
.home-tool.wide span { color: rgba(255, 255, 255, .78); }
.home-tool.wide em { color: #7cc8ff; }
.home-tool:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0, 85, 236, .18), 0 16px 34px rgba(1, 21, 55, .12); }
.home-tool b { font-size: 16.5px; display: flex; align-items: center; gap: 8px; }
.home-tool span { color: var(--muted); font-size: 14.5px; max-width: 52ch; }
.home-tool em { font-style: normal; font-weight: 650; font-size: 14px; color: var(--brand); margin-top: 6px; }
@media (max-width: 980px) { .home-hero { grid-template-columns: 1fr; } .home-tools { grid-template-columns: 1fr; } .home-tool.wide { grid-column: auto; } .main { padding: 22px 18px 60px; } }

/* ===== v44: one button system — blue for the main action, white outline for the rest, soft blue for AI ===== */
.btn-dark { background: var(--brand); color: #fff; }
.btn-dark:hover { background: var(--brand-2); }
.btn-ghost { background: #fff; border-color: #d5dce8; color: var(--ink); }
.btn-ghost:hover { background: #f4f7fb; border-color: #b9c4d6; }
.btn-ai, .btn-ai:hover { background: var(--brand-soft); color: var(--brand-2); border: 1px solid transparent; box-shadow: none; filter: none; }
.btn-ai:hover { background: #d6e7ff; }
.btn-primary[data-share], #stPost.btn-primary { background: #fff; color: var(--ink); border-color: #d5dce8; box-shadow: none; }
.btn-primary[data-share]:hover, #stPost.btn-primary:hover { background: #f4f7fb; border-color: #b9c4d6; filter: none; }
.concepts .em:empty { display: none; }
.result-head .actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.start-card.collapsed { display: none; }
.start-again { margin: 0 0 12px; }
.linklike { border: 0; background: none; padding: 0; font: inherit; color: var(--brand); font-weight: 600; cursor: pointer; }
.linklike:hover { text-decoration: underline; }
.more-details { margin: 4px 0 14px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; }
.more-details summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 14.5px; }
.more-details[open] { padding-bottom: 6px; }
.ct-sum { display: flex; align-items: center; gap: 12px; }

/* v45: sidebar always fits the screen, banners included */
.sidebar { height: calc(100dvh - var(--top-h, 0px)); padding-top: 18px; padding-bottom: 12px; }
.sidebar .logo { padding-bottom: 14px; }
.nav-item { padding-top: 8px; padding-bottom: 8px; }
.nav-group { margin-top: 12px; }
.sidebar .bottom { gap: 8px; padding-top: 8px; }
.sidebar .usage-box { padding: 12px 14px; }
@media (max-height: 760px) { .nav-item { padding-top: 6px; padding-bottom: 6px; font-size: 14px; } .nav-new { padding: 10px 14px; margin-bottom: 8px; } .nav-group { margin-top: 8px; } }
@media (max-width: 900px) { .sidebar { height: 100dvh; } }

.enh-cta { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--brand-soft); }
.enh-cta-txt { display: grid; line-height: 1.25; font-size: 13px; }
.enh-cta-txt .muted { font-size: 12px; }
.enh-cta .btn-ai { background: var(--brand); color: #fff; }
.enh-cta .btn-ai:hover { background: var(--brand-2); }
@media (max-width: 720px) { .enh-cta { flex-wrap: wrap; } }

/* ===== v47 ===== */
.tplp-back { position: fixed; inset: 0; z-index: 200; background: rgba(1, 21, 55, .42); display: grid; place-items: center; padding: 16px; }
.tplp-panel.tplp-modal { position: static; width: min(900px, 100%); max-height: min(88dvh, 820px); display: flex; flex-direction: column; overflow: hidden; padding: 18px 20px 16px; border: 0; border-radius: 18px; }
.tplp-head { display: flex; align-items: center; margin-bottom: 12px; }
.tplp-head h3 { margin: 0; font-size: 20px; }
.tplp-x { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.tplp-x:hover { background: #f4f7fb; }
.tplp-modal .tplp-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tplp-groups { display: flex; gap: 6px; flex-wrap: wrap; }
.tplp-groups button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font: 600 13.5px var(--font); color: var(--ink-2); cursor: pointer; }
.tplp-groups button:hover { background: #f4f7fb; }
.tplp-groups button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tplp-modal .tplp-q { margin-left: auto; width: 220px; max-width: 100%; }
.tplp-modal .tplp-grid { flex: 1 1 auto; min-height: 160px; max-height: none; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tplp-modal .tplp-schemes { margin-top: 12px; }
.tplp-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.slot-hl { position: absolute; pointer-events: none; border: 3px solid var(--brand); border-radius: 6px; box-shadow: 0 0 0 3px rgba(0, 85, 236, .18); z-index: 3; }
.studio-title { margin: 0 0 12px; font-size: 16px; }
.jumpbar { background: rgba(255, 255, 255, .94); }
.photo { transition: border-color .15s ease, box-shadow .15s ease; }
.photo:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 85, 236, .16); }
.ph-preview { position: fixed; z-index: 150; pointer-events: none; background: #fff; padding: 6px; border-radius: 14px; box-shadow: 0 24px 60px rgba(1, 21, 55, .28), 0 0 0 1px rgba(1, 21, 55, .08); display: grid; gap: 4px; }
.ph-preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.ph-preview span { font-size: 12.5px; font-weight: 600; padding: 2px 6px 4px; }
.fit-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 4px 0 12px; }
.fit-demo figure { margin: 0; display: grid; justify-items: center; gap: 10px; text-align: center; }
.fit-demo .phone { position: relative; width: 120px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #0b1730; box-shadow: 0 0 0 4px #0b1730, 0 12px 26px rgba(1, 21, 55, .22); }
.fit-demo .phone i { position: absolute; inset: 0; background: center / cover no-repeat; }
.fit-demo .phone.fit i { background-size: contain; }
.fit-demo .phone.fit i.blur { background-size: cover; filter: blur(10px) brightness(.9); transform: scale(1.2); }
.fit-demo figcaption { display: grid; gap: 2px; font-size: 13px; }
.fit-demo figcaption span { color: var(--muted); }

.fit-demo .phone canvas { width: 100%; height: 100%; display: block; }
#genNote b { color: var(--ink); }

/* ===== v49 ===== */
.vid-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vid-opt { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 16px 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.vid-opt:hover { border-color: #b9c4d6; }
.vid-opt.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 85, 236, .14); }
.vid-opt em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--brand-2); background: var(--brand-soft); border-radius: 999px; padding: 3px 10px; margin-top: 6px; }
.vid-ic { height: 58px; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.vid-ic i { display: block; border-radius: 6px; background: linear-gradient(160deg, #0055ec, #01a3f3); }
.vid-ic i.t { width: 30px; height: 54px; } .vid-ic i.w { width: 62px; height: 35px; }
@media (max-width: 560px) { .vid-opts { grid-template-columns: 1fr; } }
.reel-studio.wide .pv-story canvas, .reel-studio.wide .pv-story video { width: min(100%, 560px); }
.modal.pm-modal { max-width: 860px; }
.pm { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.pm-img img { width: 100%; max-height: min(64dvh, 520px); object-fit: contain; border-radius: 12px; background: #eef2f8; display: block; }
.pm-side { display: grid; gap: 12px; }
.pm-side h3 { margin: 0; font-size: 20px; }
.pm-q { margin: 4px 0 -4px; font-weight: 600; font-size: 14.5px; }
.pm-uses { display: grid; gap: 8px; }
.pm-use { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s ease, background-color .15s ease; }
.pm-use:hover { border-color: #b9c4d6; }
.pm-use i { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #c3ccda; display: grid; place-items: center; }
.pm-use.on { border-color: var(--brand); background: var(--brand-soft); }
.pm-use.on i { background: var(--brand); border-color: var(--brand); }
.pm-use.on i::after { content: '✓'; color: #fff; font-style: normal; font-size: 13px; font-weight: 700; }
.pm-use span { display: grid; line-height: 1.3; } .pm-use small { color: var(--muted); font-size: 12.5px; }
.pm-room summary { cursor: pointer; font-size: 13.5px; color: var(--brand); font-weight: 600; }
.pm-room select { margin-top: 8px; }
.pm-foot { margin-top: 4px; }
@media (max-width: 720px) { .pm { grid-template-columns: 1fr; } .pm-img img { max-height: 36dvh; } }
.reel-studio.wide { grid-template-columns: 1fr; } .reel-studio.wide .pv-story canvas, .reel-studio.wide .pv-story video { width: min(100%, 640px); }

/* ===== v51 ===== */
.btn-primary, .nav-new, .btn-dark { background-origin: border-box; background-repeat: no-repeat; }
.vid-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; padding: 6px; border-radius: 14px; background: #eef2f8; }
.vid-tabs button { display: grid; gap: 1px; justify-items: center; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font: inherit; color: var(--ink-2); white-space: nowrap; transition: background-color .15s ease, box-shadow .15s ease; }
.vid-tabs button b { font-size: 15px; } .vid-tabs button span { font-size: 12.5px; color: var(--muted); }
.vid-tabs button:hover { background: rgba(255, 255, 255, .6); }
.vid-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(1, 21, 55, .12), 0 0 0 1px rgba(1, 21, 55, .05); }
.reel-studio.wide .reel-preview { position: static; }
.reel-cover.wide canvas { width: 160px; height: auto; }

/* ===== v52: video editor ===== */
.sc-thumb em { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 11px; font-weight: 700; text-align: center; color: #fff; background: rgba(1, 21, 55, .72); padding: 3px 0; border-radius: 0 0 8px 8px; }
.scene-row[draggable=true] { cursor: grab; } .scene-row.dragging { opacity: .45; } .scene-row.drop-here { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 85, 236, .15); }
.sc-grip { color: var(--muted); padding: 2px 4px; letter-spacing: -2px; cursor: grab; user-select: none; }
.edge-row { background: #fff; border-style: dashed; cursor: default; } .edge-row .sc-fields b { font-size: 14px; }
.h-note { display: none; margin: 0 0 6px; }
.reel-studio.wide .h-note { display: block; }
.reel-studio.wide #rConcept, .reel-studio.wide #rMine, .reel-studio.wide label:has(+ #rConcept), .reel-studio.wide .field:has(#rHook), .reel-studio.wide div:has(> #rEnergy), .reel-studio.wide div:has(> #rCap), .reel-studio.wide div:has(> #rFrame),
.reel-studio.wide #top5Box, .reel-studio.wide .pins, .reel-studio.wide .field:has(#rQ), .reel-studio.wide .field:has(#rCta), .reel-studio.wide div:has(> label > #rSfx), .reel-studio.wide .explain { display: none !important; }

/* v55: video looks */
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; }
.looks button { display: grid; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #0b1730; color: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.looks button b { line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.looks button span { font-size: 11.5px; color: rgba(255,255,255,.7); line-height: 1.3; }
.looks button:hover { transform: translateY(-1px); border-color: #7fb4ff; }
.looks button.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 85, 236, .22); }
.reel-studio.wide div:has(> #rLook) { display: none !important; }

/* v57 */
.look-panel .tplp { width: 330px; max-width: 100%; flex: 0 0 auto; }
.look-panel .tplp-btn { max-width: none; }
@media (min-width: 1100px) { .look-panel .studio-row { flex-wrap: nowrap; align-items: flex-end; } .look-panel .studio-row > div:has(.color-row) { flex: 1 1 auto; min-width: 0; } .look-panel .studio-row > div:has(#sizeSeg) { flex: 0 0 auto; } }
.scrub { height: 10px; touch-action: none; position: relative; transition: height .12s ease; }
.scrub:hover, .scrub.dragging { height: 14px; }
.scrub.dragging { cursor: grabbing; }

/* v58 */
.suggest-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #f1c96b; background: #fff7df; color: #6b4a00; border-radius: 999px; padding: 5px 12px 5px 6px; font: 600 13px var(--font); cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.suggest-chip i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: #e0a100; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.suggest-chip:hover { background: #ffefc2; transform: translateY(-1px); }

/* v59 */
.edge-row .sc-fields { gap: 6px; } .edge-row .sc-fields input { padding: 8px 10px; font-size: 14px; }
.reel-studio .field:has(#rHook), .reel-studio .grid-2:has(#rQ) { display: none !important; }
.add-shape { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; background: #f1f4f9; font-size: 14px; }
.add-shape button { margin-left: auto; }

/* ---- v60: journey, share hub, voiceover, leads ---- */
.journey { padding: 16px 18px; margin-bottom: 16px; }
.journey-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 12px; }
.journey-steps { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.journey-steps i { flex: 1 1 14px; min-width: 10px; height: 2px; background: var(--line); }
.journey-steps button { flex: none; border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 999px; padding: 7px 14px; font: 600 13px var(--font); cursor: pointer; white-space: nowrap; transition: border-color .15s ease, background-color .15s ease; }
.journey-steps button:hover { border-color: var(--brand); color: var(--brand); }
.journey-steps button.done { background: var(--brand-soft); border-color: transparent; color: var(--brand-2); }
.journey-steps button.on { background: var(--ink); border-color: var(--ink); color: #fff; cursor: default; }
.share-kind { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.share-kind p { margin: 4px 0 10px; }
.share-kind-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.share-link { display: flex; flex-wrap: wrap; gap: 6px; }
.share-link input { flex: 1 1 100%; font-size: 13px; }
.voice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: #f1f4f9; }
.voice-row > div { flex: 1 1 240px; display: flex; flex-direction: column; font-size: 14px; }
.nav-count { margin-left: auto; background: var(--brand); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
tr.lead-new td { background: #f6faff; }

/* ---- v61 ---- */
.vo-lines { max-height: 46vh; overflow: auto; display: grid; gap: 10px; margin: 6px 0 14px; padding-right: 4px; }
.vo-line { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; }
.vo-line img, .vo-line > span { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: #e7ebf2; }
.vo-line label { font-size: 12px; margin-bottom: 3px; }
.vo-line textarea { min-height: 0; font-size: 14px; padding: 8px 10px; }
.lead-dot { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.nav-count { background: var(--danger); }

/* ---- v64: first-visit questions, plan suggestion, tour ---- */
.hello { max-width: 760px; margin: 0 auto; padding: 6vh 0 40px; }
.hello-steps { display: flex; gap: 6px; margin-bottom: 26px; }
.hello-steps i { flex: 1; height: 5px; border-radius: 99px; background: var(--line); }
.hello-steps i.done { background: var(--brand); } .hello-steps i.on { background: var(--brand-grad); }
.hello-eyebrow { font-size: 13px; font-weight: 700; color: var(--brand); margin: 0 0 8px; }
.hello h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; margin: 0 0 6px; }
.hello-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0 8px; }
.hello-opts button { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; font: 600 15px var(--font); color: var(--ink); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.hello-opts button:hover { border-color: #b9c6dc; }
.hello-opts button:active { transform: scale(.985); }
.hello-opts button[aria-checked=true] { border-color: var(--brand); background: var(--brand-soft); }
.hello-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #f1f4f9; display: grid; place-items: center; color: var(--ink-2); }
.hello-opts button[aria-checked=true] .hello-ic { background: #fff; color: var(--brand); }
.hello-tick { margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #c7d0de; }
.hello-opts button[aria-checked=true] .hello-tick { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.500' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.hello-nav { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.hello-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; margin: 22px 0 16px; box-shadow: var(--shadow); }
.hello-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.hello-price b { font-size: 40px; line-height: 1; } .hello-price span { color: var(--muted); }
.hello-card ul { margin: 14px 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; }
.hello-card li { padding-left: 28px; position: relative; }
.hello-card li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f9d58' stroke-width='3.500' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
@media (max-width: 640px) { .hello-opts { grid-template-columns: 1fr; } .hello { padding-top: 16px; } }
.tour { position: fixed; inset: 0; z-index: 300; }
.tour-hole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(1, 21, 55, .58); outline: 2px solid #fff; transition: left .16s ease-out, top .16s ease-out, width .16s ease-out, height .16s ease-out; pointer-events: none; will-change: left, top, width, height; }
.tour-pop { position: fixed; width: min(360px, calc(100vw - 24px)); background: #fff; border-radius: 16px; padding: 18px 18px 14px; box-shadow: var(--shadow-lg); transition: left .16s ease-out, top .16s ease-out; }
.tour-pop h3 { margin: 0 0 6px; font-size: 18px; } .tour-pop p { margin: 0; color: var(--ink-2); font-size: 14.500px; line-height: 1.5; }
.tour-pop ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); display: grid; gap: 6px; }
.tour-count { font-size: 11px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand) !important; margin-bottom: 6px !important; }
.tour-nav { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-pop { transition: none; } }

/* ---- v65 ---- */
.hello.hello-plan { max-width: 1040px; }
.hello-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin: 22px 0 14px; }
.hello-plans .hello-card { margin: 0; padding: 22px; display: flex; flex-direction: column; position: relative; box-shadow: none; }
.hello-plans .hello-card.best { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); }
.hello-plans h3 { margin: 0 0 8px; font-size: 18px; }
.hello-plans .hello-price b { font-size: 34px; }
.hello-plans ul { margin: 12px 0 18px; font-size: 14px; flex: 1; align-content: start; }
.hello-plans .btn { width: 100%; justify-content: center; }
.hello-tag { position: absolute; top: -12px; left: 20px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.hello-why { font-size: 12px; font-weight: 700; color: var(--brand); margin: 10px 0 0; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 860px) { .hello-plans { grid-template-columns: 1fr; } .hello-plans .hello-card.best { order: -1; } }
.title-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.title-chips button { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 4px 11px; font: 600 12.5px var(--font); color: var(--ink-2); cursor: pointer; }
.title-chips button:hover { border-color: var(--brand); color: var(--brand); }
.tour-pop { max-height: calc(100vh - 24px); overflow: auto; }

.hello-plans ul.why { flex: none; margin-bottom: 6px; }

/* ---- v66 ---- */
.tour { pointer-events: none; } .tour-pop { pointer-events: auto; }
.tour-try { font-size: 12.5px !important; color: var(--brand) !important; font-weight: 600; margin-top: 8px !important; }
.home-tool .pro-pill, .home-tool.wide .pro-pill { color: #fff; background: var(--brand); justify-self: start; }
.home-tool.wide .pro-pill { background: #fff; color: var(--ink); }
body:has(.modal-bg) .tour, body:has(.text-pop) .tour .tour-pop { visibility: hidden; }

/* ---- v67: Photo Lab ---- */
.lab-meter { font-size: 13.5px; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; }
.lab-src { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lab-src > div:first-child { display: flex; flex-direction: column; }
.lab-src-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lab-src-row select { min-width: 220px; }
.lab { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.lab-list { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; position: sticky; top: 12px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; gap: 10px; }
.lab-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lab-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: auto; }
.lab-thumb { position: relative; border: 2px solid transparent; border-radius: 10px; padding: 0; overflow: hidden; cursor: pointer; background: #eef1f6; aspect-ratio: 4 / 3; }
.lab-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-thumb.on { border-color: var(--brand); }
.lab-tl { position: absolute; left: 4px; bottom: 4px; font-size: 10.5px; font-weight: 600; color: #fff; background: rgba(1, 21, 55, .62); padding: 1px 6px; border-radius: 6px; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-badge { position: absolute; right: 4px; top: 4px; font-size: 10.5px; font-weight: 700; color: #6b4a00; background: #ffe9a8; padding: 1px 6px; border-radius: 99px; }
.lab-badge.ok { color: #fff; background: var(--ok); }
.lab-all { width: 100%; justify-content: center; }
.lab-main { display: grid; gap: 12px; min-width: 0; }
.lab-stage { background: #0b1220; border-radius: 16px; overflow: hidden; display: grid; place-items: center; min-height: 320px; }
.lab-single, .lab-work { position: relative; width: 100%; }
.lab-single img, .lab-work img { display: block; width: 100%; max-height: 64vh; object-fit: contain; }
.lab-work > div { position: absolute; inset: auto 0 0 0; background: rgba(1, 21, 55, .78); color: #fff; padding: 10px 14px; font-weight: 600; }
.ba { position: relative; width: 100%; user-select: none; touch-action: none; cursor: ew-resize; outline: none; }
.ba img { display: block; width: 100%; max-height: 64vh; object-fit: contain; pointer-events: none; }
.ba-new { position: absolute; inset: 0; }
.ba-new img { width: 100%; height: 100%; }
.ba-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.ba:focus-visible .ba-knob { outline: 3px solid var(--brand); }
.ba-tag { position: absolute; top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(1, 21, 55, .6); padding: 4px 9px; border-radius: 99px; pointer-events: none; }
.ba-tag.l { left: 10px; } .ba-tag.r { right: 10px; }
.lab-vers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lab-vers > button:not(.btn) { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 5px 12px; font: 600 13px var(--font); cursor: pointer; color: var(--ink-2); }
.lab-vers > button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.lab-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.lab-panel h3 { font-size: 16px; margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; }
.lab-tips { display: grid; gap: 8px; }
.lab-tip { display: flex; gap: 14px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.lab-tip p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); }
.lab-tip.done { opacity: .6; }
.lab-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.lab-tools button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left; font: 600 14px var(--font); color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.lab-tools button:hover { border-color: var(--brand); } .lab-tools button:active { transform: scale(.98); }
.lab-tools button span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.lab-tools button.locked { opacity: .65; }
.lab-adj { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px; }
.lab-adj label { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 10px; font-size: 13.5px; margin: 0; }
.lab-save { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.lab-empty { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; }
.lab-empty ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }
.lab-empty-art { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: linear-gradient(90deg, #cfd8e6 50%, #8fb7ff 50%); }
.lab-empty-art span:first-child { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #fff; }
.lab-empty-art span:last-child { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: #fff; }
@media (max-width: 900px) { .lab { grid-template-columns: 1fr; } .lab-list { position: static; max-height: none; } .lab-thumbs { grid-template-columns: repeat(4, 1fr); } .lab-empty { grid-template-columns: 1fr; } }

.lab-stage { min-height: 0; }
.ba { aspect-ratio: 4 / 3; max-height: 66vh; max-width: 100%; margin: 0 auto; }
.ba img, .ba .ba-new img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.lab-single img { max-height: 66vh; }

/* ---- v68: Photo Lab tools ---- */
.lab-src { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.lab-src-txt { display: flex; flex-direction: column; gap: 2px; }
.lab-src-row select { width: auto; min-width: 200px; max-width: 280px; }
@media (max-width: 900px) { .lab-src { grid-template-columns: 1fr; } }
.lab-list-tools { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.lab-tools-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lab-panel h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 16px 0 8px; }
.lab-tools button.on { border-color: var(--brand); background: var(--brand-soft); }
.lab-opt:empty { display: none; }
.lab-opt.open { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.lab-sliders { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 22px; margin: 10px 0 14px; }
.lab-sliders label { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; font-size: 13.5px; margin: 0; }
.lab-sliders output { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.lab-opts { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; margin: 8px 0 12px; }
.lab-opts label { display: grid; gap: 4px; font-size: 13px; margin: 0; } .lab-opts label.check { display: flex; align-items: center; gap: 8px; }
.lab-opts select, .lab-opts input:not([type=checkbox]) { min-width: 200px; }
.lab-note { font-size: 12.5px; color: #6b4a00; background: #fff7df; border: 1px solid #f1d58a; border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; }
.lab-cost { font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; margin-left: 4px; }
.lab-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 50vh; overflow: auto; margin: 10px 0 14px; }
.lab-pick label { position: relative; display: grid; gap: 4px; font-size: 12px; cursor: pointer; margin: 0; }
.lab-pick img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 2px solid transparent; }
.lab-pick input { position: absolute; top: 6px; left: 6px; }
.lab-pick input:checked + img { border-color: var(--brand); }

/* ---- v69: Ask AI ---- */
.chat { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; height: calc(100vh - 170px); min-height: 480px; }
.chat-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.chat-side .btn { justify-content: center; }
.chat-list { overflow: auto; display: grid; gap: 2px; align-content: start; }
.chat-list a { display: block; padding: 8px 10px; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list a:hover { background: #eef2f8; } .chat-list a.on { background: var(--brand-soft); color: var(--brand-2); font-weight: 600; }
.chat-main { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; min-height: 0; overflow: hidden; }
.chat-log { flex: 1; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; flex-direction: column; gap: 8px; max-width: min(720px, 92%); }
.msg.user { align-self: flex-end; align-items: flex-end; } .msg.assistant { align-self: flex-start; }
.bubble { padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.msg.user .bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.msg.assistant .bubble { background: #f1f4f9; color: var(--ink); border-bottom-left-radius: 5px; }
.typing { display: flex; gap: 4px; padding: 14px 16px; } .typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6bb; animation: chatdot 1.2s infinite ease-in-out; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatdot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: .6; } }
.chat-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.chat-card > div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.chat-card.listing img { width: 120px; height: 84px; object-fit: cover; border-radius: 10px; }
.chat-card.confirm { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); justify-content: space-between; }
.chat-card.link { font-weight: 600; text-decoration: none; }
.chat-card.designs { display: block; }
.chat-designs { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.chat-designs figure { margin: 0; width: 200px; }
.chat-designs canvas { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 6px 18px rgba(1, 21, 55, .14); display: block; }
.chat-designs figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; margin-top: 6px; }
.chat-more { flex-basis: 100%; margin: 4px 0 0; }
.chat-empty { margin: auto; text-align: center; max-width: 560px; }
.chat-ideas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.chat-ideas button { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 8px 14px; font: 500 14px var(--font); cursor: pointer; color: var(--ink-2); }
.chat-ideas button:hover { border-color: var(--brand); color: var(--brand); }
.chat-in { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-in textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; font-size: 15px; }
@media (max-width: 860px) { .chat { grid-template-columns: 1fr; height: auto; } .chat-side { flex-direction: row; overflow-x: auto; } .chat-list { display: flex; } .chat-main { height: 70vh; } }

/* ---- v70 ---- */
.chat-card.old { font-size: 13px; color: var(--muted); background: #f6f8fb; border-style: dashed; }
.home-ask { margin-top: 18px; }
.home-ask-box { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 8px 8px 8px 14px; box-shadow: var(--shadow); }
.home-ask-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.home-ask-ic { color: var(--brand); display: grid; }
.home-ask-box input { flex: 1; border: 0; outline: none; font-size: 16px; background: transparent; padding: 8px 0; min-width: 0; box-shadow: none; }
.home-ask-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.home-ask-ideas button { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 12px; font: 500 13px var(--font); cursor: pointer; color: var(--ink-2); }
.home-ask-ideas button:hover { border-color: var(--brand); color: var(--brand); }
/* the sidebar never squeezes its logo; on shorter screens the menu tightens up instead */
.sidebar > * { flex-shrink: 0; }
.sidebar .logo { overflow: visible; }
@media (max-height: 920px) { .sidebar .nav-item { padding-top: 7px; padding-bottom: 7px; } .sidebar .nav-group { margin-top: 8px; } .sidebar .logo { padding-bottom: 10px; } }
@media (max-height: 800px) { .sidebar .nav-item { padding-top: 5px; padding-bottom: 5px; font-size: 14px; } .sidebar .mode-switch { display: none; } }

.chat-stale { align-self: center; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; background: #fff7df; border: 1px solid #f1d58a; border-radius: 14px; padding: 10px 14px; font-size: 14px; color: #6b4a00; max-width: 640px; text-align: center; }
#chatStaleSlot .chat-stale { margin: 0 12px 10px; max-width: none; }

/* v72: video in Ask AI */
.chat-designs figure.chat-video { width: 250px; }
.chat-designs figure.chat-video.wide { width: min(420px, 100%); flex-basis: 100%; }
.chat-vbox { position: relative; }
.chat-vbox canvas { cursor: pointer; }
.chat-vplay { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; border: 0; background: rgba(1, 21, 55, .62); color: #fff; font-size: 22px; cursor: pointer; padding-left: 4px; }
.chat-vplay[hidden] { display: none; }
.chat-vbar { height: 6px; border-radius: 4px; background: #e6ebf2; margin-top: 8px; cursor: pointer; overflow: hidden; }
.chat-vbar span { display: block; height: 100%; width: 0; background: var(--brand); }
.chat-vtabs { display: flex; gap: 4px; margin-bottom: 6px; }
.chat-vtabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.chat-vtabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chat-vnote { margin: 6px 0 0; }

/* v72: walkthrough shot planning */
.wk-plan { margin: 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; }
.wk-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 12px; }
.wk-shot { display: flex; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.wk-shot .wk-thumb { width: 64px; height: 84px; flex: none; border-radius: 8px; background-size: cover; background-position: center; }
.wk-shot-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; }
.wk-shot-sel { display: flex; gap: 6px; flex-wrap: wrap; }
.wk-shot-sel select { font-size: 13px; padding: 4px 6px; max-width: 100%; }
.wk-sim { display: inline-block; font-size: 11px; font-weight: 700; color: #8a5a00; background: #fff4dc; border-radius: 999px; padding: 1px 8px; }
.wk-fix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wk-fix .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; height: auto; padding: 10px 12px; white-space: normal; }
.wk-fix .btn span { font-size: 12px; line-height: 1.35; margin-top: 2px; font-weight: 400; color: var(--muted); }
.wk-fix-more { margin-top: 12px; } .wk-fix-more summary { cursor: pointer; font-weight: 600; font-size: 14px; } .wk-fix-more .wk-shot-sel { margin-top: 8px; }
@media (max-width: 560px) { .wk-fix { grid-template-columns: 1fr; } }
.chat-video figcaption { flex-wrap: wrap; gap: 6px; }
.chat-video figcaption .row { flex-wrap: nowrap; }
.chat-video [data-vplay] { min-width: 92px; }

/* v76: design suggestions */
.sg-list { display: flex; flex-direction: column; gap: 8px; }
.sg-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.sg-item > div { display: flex; flex-direction: column; gap: 2px; }
.sg-item .btn { flex: none; }
.sg-good { background: #eefaf2; border-radius: 12px; padding: 12px 14px; }
.suggest-chip.calm { background: #fff; border-color: var(--line); color: var(--ink); }
.suggest-chip.calm i { background: var(--brand); }
.suggest-chip.calm:hover { background: #f4f7fb; }
.sg-item.urgent { border-color: #f1c96b; background: #fffbef; }
.sg-tag { display: inline-block; font-size: 11px; font-weight: 700; color: #6b4a00; background: #ffe9a8; border-radius: 999px; padding: 1px 8px; margin-right: 4px; vertical-align: 1px; }

/* v80: first five minutes */
.first-run { max-width: 720px; margin: 7vh auto 40px; padding: 0 16px; }
.first-run h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; margin: 0 0 10px; letter-spacing: -0.02em; }
.first-run .lede { font-size: 17px; color: var(--muted); margin: 0 0 22px; max-width: 600px; }
.start-box { display: flex; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 8px; box-shadow: 0 12px 34px rgba(1, 21, 55, .10); }
.start-box input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 17px; padding: 12px 14px; background: transparent; }
.start-box .btn { white-space: nowrap; }
.first-contact { margin: 18px 0 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.first-contact summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.first-contact .grid-2 { margin-top: 12px; }
.first-alt { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.first-steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.first-steps li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); }
.first-steps li b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft, #e6f1ff); color: var(--brand); display: grid; place-items: center; font-size: 13px; }
.home-hero .start-box { margin-top: 8px; max-width: 620px; }
.make-yours { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: linear-gradient(90deg, #eef5ff, #fff); border: 1px solid #cfe0ff; border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; }
.make-yours > div { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; }
.make-yours span { color: var(--muted); font-size: 14px; }
@media (max-width: 640px) {
  .first-run { margin-top: 24px; }
  .start-box { flex-direction: column; border-radius: 16px; }
  .start-box .btn { width: 100%; }
  .first-steps { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
  .first-alt .btn { flex: 1; }
}
body.wizard-mode .main { margin: 0 auto; width: 100%; }
.mini-meter { display: inline-block; vertical-align: middle; width: 70px; height: 6px; border-radius: 4px; background: #dbe5f3; overflow: hidden; margin: 0 4px 0 6px; }
.mini-meter i { display: block; height: 100%; background: var(--brand); }
.first-run .start-saved { margin: 10px 0 0; text-align: center; color: var(--ink-2, #475569); }
/* captions live under their design */
.cap-under { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.cap-more { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.cap-more summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.cap-more[open] summary { margin-bottom: 10px; }
/* "?" help: what this page is, and a tour of it */
.help-q { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.help-q:hover { border-color: var(--brand); color: var(--brand); }
.help-fab { position: fixed; top: calc(var(--top-h, 0px) + 16px); right: 20px; z-index: 45; }
.page-head { padding-right: 48px; }
body.wizard-mode .help-fab { display: none; }
@media (max-width: 900px) { .help-fab { display: none; } .page-head { padding-right: 0; } }
/* Photo Lab: step 1 is choosing photos, shown as cards of the agent's listings */
.lab-chooser { margin-bottom: 16px; }
.lab-chooser-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.lab-chooser-head h3 { margin: 0; font-size: 18px; } .lab-chooser-head p { margin: 2px 0 0; }
.lab-step { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; display: grid; place-items: center; flex: none; }
.lab-gens { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.lab-gen { text-align: left; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.lab-gen:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(0, 85, 236, .12); }
.lab-gen-img { aspect-ratio: 4 / 3; border-radius: 10px; background: #e9eef6 center / cover no-repeat; margin-bottom: 4px; }
.lab-gen b { font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-chooser .lab-src-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.lab-from { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; }
.lab-more { justify-self: center; border: 0; background: var(--brand); color: #fff; font: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 85, 236, .25); }
.lab-side { display: grid; gap: 12px; min-width: 0; }
@media (min-width: 1280px) {
  .lab { grid-template-columns: 220px minmax(0, 1fr); }
  .lab-main { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .lab-main > .lab-stage, .lab-main > .lab-vers { grid-column: 1; }
  .lab-side { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding-right: 2px; }
  .lab-main > .lab-save { grid-column: 1 / -1; }
  .lab-more { display: none; }
}
/* Settings & branding: side menu + page */
.set-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.set-nav { position: sticky; top: calc(var(--top-h, 0px) + 16px); display: flex; flex-direction: column; gap: 2px; }
.set-nav > a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.set-nav > a svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.set-nav > a:hover { background: #eef2f8; }
.set-nav > a.on { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(15, 23, 42, .08), inset 0 0 0 1px var(--line); }
.set-nav > a.on svg { opacity: 1; }
.set-group { margin: 14px 12px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.set-meter { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; margin-bottom: 4px; }
.set-foot { display: flex; flex-direction: column; gap: 6px; margin: 16px 12px 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.set-foot a { color: var(--muted); text-decoration: none; } .set-foot a:hover { color: var(--brand); }
.set-body { min-width: 0; }
.set-body > .tabs { display: none; }
.set-brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
.set-form { padding: 26px 28px; }
.set-form .field { margin-bottom: 16px; }
.set-preview { position: sticky; top: calc(var(--top-h, 0px) + 16px); }
.set-save { display: flex; align-items: center; gap: 12px; margin: 24px -28px -26px; padding: 16px 28px; border-top: 1px solid var(--line); background: #fafbfd; border-radius: 0 0 var(--radius, 16px) var(--radius, 16px); position: sticky; bottom: 0; }
.color-pair { display: flex; gap: 12px; }
.swatch { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px 6px 6px; background: #fff; cursor: pointer; margin: 0; font-weight: 600; font-size: 14px; }
.swatch input[type=color] { width: 40px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.swatch input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .swatch input[type=color]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.set-body .settings-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 1250px) { .set-brand { grid-template-columns: 1fr; } .set-preview { position: static; max-width: 460px; } }
@media (max-width: 900px) {
  .set-layout { grid-template-columns: 1fr; gap: 14px; }
  .set-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .set-nav > a { white-space: nowrap; flex: none; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .set-meter, .set-group, .set-foot { display: none; }
  .set-form { padding: 20px; } .set-save { margin: 20px -20px -20px; padding: 14px 20px; }
}
.set-brand { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.set-form { container-type: inline-size; }
@container (max-width: 600px) { .set-form .grid-2:has(.color-pair) { grid-template-columns: 1fr; } }
@container (max-width: 400px) { .set-form .grid-2 { grid-template-columns: 1fr; } }
.nav-item { min-width: 0; }
.nav-item .pro-pill { flex: none; font-size: 9px; padding: 1px 5px; margin-left: auto; }
.sidebar { overflow-x: hidden; }
@media (max-width: 1250px) { .set-brand { grid-template-columns: minmax(0, 1fr); } .set-preview { position: static; } }
@media (max-width: 600px) { .lab-gens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .lab-gen b { font-size: 13px; } }
/* Starter badge */
.pro-pill.starter { background: #0f766e; }
.crumb { display: inline-block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--brand); }
/* Editing Studio: pick a tool */
.ps-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.ps-tool { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none !important; color: inherit; box-shadow: 0 0 0 1px rgba(1, 21, 55, .06), var(--shadow); transition: transform .18s ease, box-shadow .18s ease; }
.ps-tool:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--brand), 0 16px 34px rgba(1, 21, 55, .12); }
.ps-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #dfe6f1; }
.ps-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-photo img:first-child { filter: saturate(.7) brightness(.86) contrast(.95); }
.ps-photo img.after { clip-path: inset(0 0 0 50%); filter: saturate(1.2) brightness(1.06) contrast(1.05); }
.ps-photo i { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.ps-photo em { position: absolute; bottom: 12px; left: 12px; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: rgba(13, 19, 33, .6); padding: 4px 10px; border-radius: 999px; }
.ps-photo em.r { left: auto; right: 12px; }
.ps-video .play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.ps-video .play::after { content: ''; position: absolute; left: 27px; top: 21px; border: 13px solid transparent; border-left: 20px solid var(--brand); border-right: 0; }
.ps-video img { animation: psPan 9s ease-in-out infinite alternate; transform-origin: 30% 40%; }
@keyframes psPan { from { transform: scale(1.08) translate(-2%, 1%); } to { transform: scale(1.16) translate(2%, -1.5%); } }
@media (prefers-reduced-motion: reduce) { .ps-video img { animation: none; } }
.ps-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.ps-body b { font-size: 20px; letter-spacing: -.01em; } .ps-body > span { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.ps-go { color: var(--brand) !important; font-weight: 700; margin-top: 6px; }
/* Refer a friend */
.ref-hero { margin-bottom: 18px; }
.ref-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ref-steps > div { display: flex; gap: 10px; align-items: flex-start; background: #f5f8fd; border-radius: 14px; padding: 14px; font-size: 14px; line-height: 1.45; }
.ref-steps > div > b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 14px; }
.ref-link { display: flex; gap: 8px; } .ref-link input { flex: 1; min-width: 0; font-weight: 600; }
.ref-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.ref-stats .card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; } .ref-stats b { font-size: 28px; letter-spacing: -.02em; }
@media (max-width: 900px) { .ref-steps { grid-template-columns: 1fr; } .ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ref-link { flex-direction: column; } }
.nav-item .nav-l { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .pro-pill { flex: 0 0 64px; text-align: center; margin-left: 6px; font-size: 9.5px; padding: 3px 0; }
.sidebar .nav-group { margin-top: 14px; }
/* "?" sits in its own space above the page and scrolls with it, so it never covers page content */
.app-shell { position: relative; }
.help-fab { position: absolute; top: 18px; right: 22px; }
@media (min-width: 901px) { .main { padding-top: 66px; } .page-head { padding-right: 0; } }
/* locked tools: greyed out with a clear "unlocks with" note */
.is-locked { position: relative; }
.is-locked > :not(.lock-cover) { opacity: .45; filter: grayscale(.6); pointer-events: none; user-select: none; }
.lock-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: inherit; background: rgba(245, 247, 251, .35); }
.lock-cover b { font-size: 16px; }
.lock-ic { width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); position: relative; }
.lock-ic::before { content: ''; position: absolute; left: 13px; top: 18px; width: 14px; height: 11px; border-radius: 2px; background: var(--ink); }
.lock-ic::after { content: ''; position: absolute; left: 15px; top: 10px; width: 10px; height: 10px; border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; box-sizing: border-box; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }
/* sign-up checks */
.name-pair { gap: 12px; }
.field-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.field-note.ok { color: #0f766e; } .field-note.bad { color: #b42318; } .field-note.warn { color: #9a6700; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.pw-meter i { height: 5px; border-radius: 3px; background: #e5e9f0; transition: background .2s; }
.pw-meter[data-s="1"] i:nth-child(-n+1) { background: #e5484d; }
.pw-meter[data-s="2"] i:nth-child(-n+2) { background: #f5a524; }
.pw-meter[data-s="3"] i:nth-child(-n+3) { background: #2fb371; }
.pw-meter[data-s="4"] i { background: #11845b; }
/* setup: "describe your style" first; the details stay hidden unless they want them */
.style-simple > :not(#notSure):not(.ns-keep) { display: none !important; }
.style-simple #notSure { border-style: solid; padding: 20px; }
.style-simple #notSure > b { font-size: 18px; display: block; margin-bottom: 4px; }
.style-simple #nsText { font-size: 15px; padding: 12px 14px; }
.ns-manual { margin-top: 12px; }
.ns-pick { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.ns-pick-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.ns-pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.ns-pick-grid > div { display: flex; flex-direction: column; gap: 2px; } .ns-pick-grid b { display: flex; gap: 6px; align-items: center; font-size: 14.5px; }
.ns-sw { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); display: inline-block; }
.profile-warn { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; }
.nav-item .pro-pill { flex: 0 0 58px; font-size: 9px; letter-spacing: .05em; }
.lab-meter:empty { display: none; }
.home-manual { margin: 12px 0 0; font-size: 14.5px; } .home-manual a { font-weight: 600; }
.blurred { filter: blur(4px); user-select: none; color: var(--muted); }

/* v87 sidebar: sized to the screen height so the whole menu fits without scrolling; badges in one column */
.app-shell { grid-template-columns: 268px minmax(0, 1fr); }
@media (max-width: 900px) { .app-shell { grid-template-columns: minmax(0, 1fr); } }
.sidebar { overflow-y: auto; gap: 0; padding-top: clamp(10px, 2vh, 20px); }
.sidebar .logo { margin-bottom: clamp(6px, 1.4vh, 14px); }
.sidebar .nav-new { padding: clamp(8px, 1.3vh, 12px) 16px; font-size: 15px; margin-bottom: clamp(6px, 1.2vh, 12px); }
.sidebar .nav-item { padding: clamp(5px, 1.05vh, 10px) 12px; font-size: 14.5px; gap: 11px; }
.sidebar .nav-item svg { width: 19px; height: 19px; }
.sidebar .nav-group { margin: clamp(6px, 1.4vh, 14px) 12px 2px; font-size: 11.5px; }
.sidebar .bottom { padding-top: clamp(6px, 1vh, 12px); }
.sidebar .usage-box { padding: clamp(8px, 1.3vh, 14px); }
.nav-item .pro-pill { flex: 0 0 56px; font-size: 9px; }
.app-shell { grid-template-columns: 276px minmax(0, 1fr); }
@media (max-width: 900px) { .app-shell { grid-template-columns: minmax(0, 1fr); } }
.nav-item .pro-pill { flex: 0 0 54px; }
.nav-item .pro-pill { flex: 0 0 50px; font-size: 8.5px; letter-spacing: .04em; margin-left: 4px; }
.app-shell { grid-template-columns: 288px minmax(0, 1fr); }
@media (max-width: 900px) { .app-shell { grid-template-columns: minmax(0, 1fr); } }
.ent-strip.app { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 18px 22px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(1, 21, 55, .06), var(--shadow); }
.ent-strip.app b { display: block; font-size: 17px; } .ent-strip.app span { color: var(--muted); font-size: 14px; }
.st-card.owned b::after { content: ' · unlocked'; color: #0f766e; font-size: 12px; font-weight: 700; }
.home-manual { padding-left: 22px; }
/* support chat (shared) */
.sc { display: flex; flex-direction: column; gap: 10px; }
.sc-log { max-height: 380px; min-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.sc-log.sc-static { max-height: 60vh; }
.sc-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; background: #f1f4f9; color: #011537; }
.sc-msg p { margin: 0 0 6px; } .sc-msg p:last-child { margin: 0; } .sc-msg ul { margin: 4px 0; padding-left: 18px; }
.sc-msg.user { align-self: flex-end; background: #0055ec; color: #fff; border-bottom-right-radius: 4px; }
.sc-msg.ai, .sc-msg.agent { align-self: flex-start; border-bottom-left-radius: 4px; }
.sc-msg.agent { background: #e8f6f1; }
.sc-who { display: block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; opacity: .65; margin-bottom: 3px; }
.sc-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.sc-typing span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: scDot 1s infinite ease-in-out; }
.sc-typing span:nth-child(2) { animation-delay: .15s; } .sc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes scDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.sc-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-ref { border: 1px solid #d9dfe8; background: #fff; border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: #0055ec; cursor: pointer; }
.sc-form { display: flex; gap: 8px; }
.sc-form input { flex: 1; min-width: 0; border: 1px solid #d9dfe8; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14.5px; }
.sc-human { background: #fff8e6; border: 1px solid #f5d98b; border-radius: 12px; padding: 12px; }
.sc-human input { flex: 1; min-width: 0; border: 1px solid #d9dfe8; border-radius: 10px; padding: 8px 10px; font: inherit; }
.sc-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.sc .linklike, .lp-chat .linklike { background: none; border: 0; padding: 0; color: #0055ec; font: inherit; font-weight: 600; cursor: pointer; }
/* Help & support page */
.sup-search { padding: 14px; margin-bottom: 16px; position: relative; }
.sup-search input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 16px; }
.sup-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.sup-list a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; font-weight: 600; color: var(--ink); }
.sup-list a:hover { background: #f1f5fb; }
.sup-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.sup-act { display: flex; flex-direction: column; gap: 4px; text-align: left; background: #fff; border: 0; border-radius: 16px; padding: 16px; box-shadow: 0 0 0 1px rgba(1, 21, 55, .06), var(--shadow); cursor: pointer; font: inherit; color: inherit; text-decoration: none !important; }
.sup-act:hover { box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.sup-act b { font-size: 16px; } .sup-act span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.sup-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.sup-side { position: sticky; top: 16px; display: grid; gap: 16px; }
.sup-chat.pulse { box-shadow: 0 0 0 3px var(--brand), var(--shadow); transition: box-shadow .3s; }
.sup-h { font-size: 17px; margin: 0 0 10px; }
.sup-faq { display: grid; gap: 8px; margin-bottom: 24px; }
.sup-faq details { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(1, 21, 55, .06); padding: 12px 16px; }
.sup-faq summary { cursor: pointer; font-weight: 700; }
.sup-faq .sup-body { margin-top: 10px; }
.sup-body { color: var(--ink-2); font-size: 15px; line-height: 1.6; } .sup-body p { margin: 0 0 10px; } .sup-body ul { margin: 0 0 10px; padding-left: 20px; }
.sup-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sup-cat { display: flex; flex-direction: column; gap: 6px; padding: 16px; } .sup-cat b { margin-bottom: 4px; } .sup-cat a { font-size: 14px; text-decoration: none; }
.sup-article { max-width: 760px; padding: 28px 32px; } .sup-article h1 { margin: 4px 0 14px; font-size: 28px; }
.sup-helpful { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sup-tickets { display: grid; gap: 6px; } .sup-tickets button { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; font: inherit; cursor: pointer; }
.sup-dot { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--brand); border-radius: 999px; padding: 2px 8px; align-self: flex-start; }
@media (max-width: 1100px) { .sup-grid { grid-template-columns: 1fr; } .sup-side { position: static; } .sup-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* admin support inbox */
.sup-admin { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.sup-threads { padding: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 75vh; overflow: auto; }
.sup-threads a { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.sup-threads a:hover, .sup-threads a.on { background: #eef3fb; } .sup-threads a .badge { align-self: flex-start; }
.sup-msgs { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; max-height: 52vh; overflow: auto; }
.sup-m { padding: 10px 12px; border-radius: 12px; background: #f1f4f9; max-width: 85%; } .sup-m.agent { background: #e8f6f1; align-self: flex-end; } .sup-m.user { background: #fff; border: 1px solid var(--line); }
.sup-thread textarea { width: 100%; }
@media (max-width: 1000px) { .sup-admin { grid-template-columns: 1fr; } }
.plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1250px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .plan-grid { grid-template-columns: 1fr; } }
.ent-card { background: linear-gradient(180deg, #f6f8fc, #fff); }
/* Content studio editor: the design stays in view on the left; options are compact on the right */
.st-editor { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 22px; }
.st-editor > div:first-child { position: sticky; top: 16px; }
.st-prev { display: flex; justify-content: center; }
.st-prev canvas { width: auto; max-width: 100%; max-height: calc(100vh - 230px); }
.st-editor > .card { padding: 18px; }
.st-editor .field { margin-bottom: 10px; }
.st-editor label { font-size: 13px; margin-bottom: 4px; }
.st-editor input, .st-editor select, .st-editor textarea { padding: 8px 10px; font-size: 14px; }
.st-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: end; }
.st-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; margin-top: 4px; }
.st-fields .field.wide { grid-column: 1 / -1; }
.st-cur > span { width: 72px; height: 54px; }
@media (max-width: 1000px) { .st-editor { grid-template-columns: 1fr; } .st-editor > div:first-child { position: static; } }
.st-prev canvas { max-height: calc(100vh - 150px); }
.st-editor > .card { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.st-buy { padding: 12px 16px; } .st-buy .row { flex-wrap: nowrap; }
@media (max-width: 1000px) { .st-editor > .card { position: static; max-height: none; } }
.st-prev canvas { height: calc(100vh - 170px); width: 100%; max-height: none; object-fit: contain; }
.st-editor .st-buy { display: block; margin: 0 0 14px; padding: 12px 14px; }
.st-editor .st-buy > div:first-child { margin-bottom: 10px; }
.st-editor .st-buy .row { justify-content: flex-start; }
.st-editor .alert-ok { margin: 0 0 12px; }
.st-prev canvas { height: calc(100vh - 240px); }
.st-editor .st-buy .row { display: flex; flex-direction: row; gap: 8px; } .st-editor .st-buy .row .btn { width: auto; }

/* v90 plan cards: pitch, CTA above the list, lead line */
.price-card { padding: 30px 24px 24px; }
.price-card h3 { font-size: 20px; letter-spacing: -.01em; }
.price-card .pc-pitch { margin: 6px 0 14px; color: var(--muted); font-size: 14px; line-height: 1.45; min-height: 41px; }
.price-card .price { margin-top: 0; }
.price-card .pc-cta { display: grid; gap: 6px; margin: 18px 0 4px; }
.price-card .pc-cta .btn { width: 100%; justify-content: center; white-space: nowrap; }
.price-card .pc-note { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; min-height: 18px; }
.price-card ul { margin: 14px 0 0; padding-top: 16px; border-top: 1px solid var(--line); gap: 9px; }
.price-card li { font-size: 14px; line-height: 1.4; }
.price-card li.lead { font-weight: 700; color: var(--ink); }
.price-card li.lead::before { display: none; }
.price-card .tag-dark { background: var(--ink); }
.price-card.featured { border: 2px solid var(--brand); box-shadow: 0 22px 50px rgba(0, 85, 236, .16); }
.price-card.featured .tag { background: linear-gradient(100deg, #0055ec, #01a3f3); }
.ent-card { background: linear-gradient(180deg, #f3f6fb 0%, #fff 60%); }
/* v90 critical profile banner */
.alert-crit { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 18px; border-radius: 14px; background: #fff1f0; border: 1px solid #f4b4ae; color: #8a1c12; box-shadow: 0 6px 18px rgba(180, 35, 24, .08); }
.alert-crit > svg { flex: 0 0 26px; width: 26px; height: 26px; color: #d92d20; }
.alert-crit > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.alert-crit b { font-size: 15px; color: #7a1a10; }
.alert-crit span { font-size: 13.5px; }
.alert-crit .btn { flex: 0 0 auto; background: #d92d20; color: #fff; border: 0; white-space: nowrap; }
.alert-crit .btn:hover { background: #b42318; }
@media (max-width: 640px) { .alert-crit { flex-wrap: wrap; } .alert-crit .btn { width: 100%; justify-content: center; } }
/* v90 sidebar auto-fit levels (added by fitSidebar until nothing scrolls) */
.sidebar.sb-d1 .nav-item { padding-top: 5px; padding-bottom: 5px; }
.sidebar.sb-d1 .nav-group { margin-top: 8px; }
.sidebar.sb-d2 .mode-switch { display: none; }
.sidebar.sb-d2 .logo { padding-bottom: 6px; margin-bottom: 4px; }
.sidebar.sb-d2 .nav-new { padding-top: 8px; padding-bottom: 8px; margin-bottom: 6px; }
.sidebar.sb-d3 .nav-item { padding-top: 3px; padding-bottom: 3px; font-size: 13.5px; }
.sidebar.sb-d3 .nav-item svg { width: 17px; height: 17px; }
.sidebar.sb-d3 .nav-group { margin-top: 5px; margin-bottom: 0; font-size: 11px; }
.sidebar.sb-d3 .usage-box { padding: 7px 10px; font-size: 12px; }
.sidebar.sb-d4 .nav-group { display: none; }
.sidebar.sb-d4 .nav-item { padding-top: 2px; padding-bottom: 2px; }
.sidebar.sb-d5 .usage-box { display: none; }
.sidebar.sb-d5 .logo { padding-top: 0; padding-bottom: 2px; }
.st-editor .st-opts { align-items: start; } .st-editor .st-opts .field { margin-top: 0; } .st-editor #stSize { height: 64px; }
/* v91 plan colors: Starter is blue, Pro is black; tags line up on every card */
.pro-pill { background: #0b1220; }
.pro-pill.starter { background: var(--brand); }
.home-tool .pro-pill { background: #0b1220; color: #fff; }
.home-tool .pro-pill.starter, .home-tool.wide .pro-pill.starter { background: var(--brand); color: #fff; }
.home-tool.wide .pro-pill:not(.starter) { background: #fff; color: #0b1220; }
.plan-grid { padding-top: 14px; }
.price-card { border: 2px solid var(--line); }
.price-card.featured { border-color: var(--brand); }
.price-card.is-current { border-color: var(--ok); box-shadow: none; }
.price-card .tag { top: -13px; left: 22px; height: 26px; line-height: 26px; padding: 0 12px; font-size: 12px; font-weight: 800; border-radius: 999px; white-space: nowrap; color: #fff; }
.price-card .tag-blue { background: linear-gradient(100deg, #0055ec, #01a3f3); }
.price-card .tag-dark { background: #0b1220; }
.price-card .tag-ok { background: var(--ok); }
.price-card.pc-pro .btn-dark, .price-card.pc-ent .btn-dark { background: #0b1220; }
.keep-credits { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft, #e6f1ff); color: #0b2a5b; font-size: 13.5px; }
.sched-credit { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: #eef4ff; color: #0b2a5b; font-size: 13px; line-height: 1.45; }
.sched-credit svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--brand); }

/* v92 plan pills: soft gradient chips. Starter = brand blue, Pro = deep graphite with a light edge. */
.pro-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  height: 18px; padding: 0 7px; border-radius: 6px;
  font: 800 9px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, #3a4558 0%, #161d2b 55%, #0b1220 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 6px rgba(11, 18, 32, .22);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.pro-pill.starter {
  background: linear-gradient(135deg, #2f7bff 0%, #0055ec 55%, #0046c4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 6px rgba(0, 85, 236, .28);
}
.sidebar .nav-item .pro-pill { flex: 0 0 56px; width: 56px; height: 18px; padding: 0; margin-left: 6px; font-size: 8.5px; letter-spacing: .08em; }
.sidebar .nav-item.active .pro-pill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 2px #fff; }
.home-tool .pro-pill, .home-tool.wide .pro-pill:not(.starter) { color: #fff; }
.home-tool.wide .pro-pill:not(.starter) { background: linear-gradient(135deg, #ffffff, #dfe7f5); color: #0b1220; text-shadow: none; }
.pro-pill { display: inline-block; line-height: 18px; text-align: center; vertical-align: middle; }
.sidebar .nav-item .pro-pill { flex: 0 0 50px; width: 50px; margin-left: 4px; font-size: 8px; letter-spacing: .07em; line-height: 18px; padding: 0; }
.sidebar .nav-item .pro-pill:not(.starter) { background: linear-gradient(135deg, #4a5568 0%, #1e2636 50%, #0f1626 100%); }
/* v93 per-design look lock */
.look-lock { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; height: 28px; padding: 0 4px 0 10px; border: 1px solid #f1d39a; border-radius: 999px; background: #fff8eb; color: #7a4a00; font: 700 12px var(--font); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.look-lock svg { width: 14px; height: 14px; }
.look-lock span { margin-left: 4px; padding: 0 9px; height: 20px; line-height: 20px; border-radius: 999px; background: linear-gradient(135deg, #2f7bff, #0055ec); color: #fff; font-size: 11px; }
.look-lock:hover { border-color: #e2b55c; background: #fff2d6; }
.look-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fff8eb; border: 1px solid #f6dfb2; color: #6b4300; font-size: 13px; line-height: 1.45; }
@media (max-width: 700px) { .look-lock span { display: none; } }
.team-close-warn { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff1f0; border: 1px solid #f4b4ae; color: #7a1a10; font-size: 13.5px; line-height: 1.45; }
.team-close-warn svg { flex: 0 0 22px; width: 22px; height: 22px; color: #d92d20; margin-top: 1px; }
.team-close-warn b { display: block; margin-bottom: 2px; }
/* v93: every row of the plan cards lines up (name, pitch, price, price note, button, list) */
@supports (grid-template-rows: subgrid) {
  .plan-grid { grid-auto-rows: auto; row-gap: 0; }
  .plan-grid > .price-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .plan-grid > .price-card > .pc-pitch { min-height: 0; }
  .plan-grid > .price-card > .price { align-self: end; }
  .plan-grid > .price-card > ul { align-self: start; }
}
@media (max-width: 1250px) { .plan-grid { row-gap: 16px; } }
.price-card .price { line-height: 1.05; }
.price-card.pc-ent .price { font-size: 44px; letter-spacing: -.02em; }
/* v95 top-up: buy any number of credits */
.topup-card { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.topup-card .tu-copy { flex: 1 1 280px; display: grid; gap: 4px; }
.topup-card .tu-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tu-step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.tu-step input { width: 64px; border: 0; border-radius: 0; text-align: center; font-weight: 700; padding: 9px 4px; -moz-appearance: textfield; box-shadow: none; }
.tu-step input::-webkit-outer-spin-button, .tu-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tu-btn { width: 38px; height: 40px; border: 0; background: #f3f6fb; font: 700 18px var(--font); color: var(--ink); cursor: pointer; }
.tu-btn:hover { background: #e6eefb; }
.tu-quick { display: inline-flex; gap: 6px; }
.tu-quick .chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: 700 12.5px var(--font); cursor: pointer; }
.tu-quick .chip.on { border-color: var(--brand); color: var(--brand); background: #eef4ff; }
/* home tool badges match the sidebar ones */
.home-tool b .pro-pill { width: 50px; height: 18px; line-height: 18px; padding: 0; font-size: 8px; letter-spacing: .07em; margin-left: 8px; vertical-align: 2px; border-radius: 6px; }
.hello-plans.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .hello-plans.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .hello-plans.four { grid-template-columns: 1fr; } }
.hello-card.ent { background: linear-gradient(180deg, #f3f6fb 0%, #fff 60%); }
.hello-card li.lead { font-weight: 700; padding-left: 0; }
.hello-card li.lead::before { display: none; }
.hello.hello-plan { max-width: 1240px; }