/* EventLocus Portal UI */
:root {
  --ink: #14161c; --soft: #565c6b; --faint: #8b91a1;
  --bg: #f4f5fa; --card: #fff; --line: #e7e9f0; --line-soft: #eef0f6;
  --brand: #4f46e5; --brand-deep: #3730a3; --brand-soft: #eef0ff;
  --ok: #0d9488; --warn: #d97706; --bad: #dc2626;
  --shadow-sm: 0 1px 2px rgba(20,22,28,.04), 0 2px 10px rgba(20,22,28,.05);
  --shadow: 0 8px 30px rgba(20,22,28,.1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Always reserve the scrollbar gutter so the centered layout never shifts sideways
   when navigating between tall (scrolling) and short (non-scrolling) sections. */
html { scrollbar-gutter: stable; }
body { font-family: "Inter", -apple-system, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; font-size: 14.5px; }
a { color: var(--brand); text-decoration: none; }
h1, h2, h3 { letter-spacing: -0.01em; }
input, textarea, select, button { font-family: inherit; font-size: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; border-radius: 10px; cursor: pointer; border: 1.5px solid transparent; transition: all .15s; padding: 10px 18px; font-size: 14px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); }
.btn-outline { background: #fff; color: var(--brand); border-color: var(--line); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-soft); }
.btn-ghost2 { background: transparent; color: var(--soft); }
.btn-ghost2:hover { background: var(--line-soft); color: var(--ink); }
.btn-danger { background: #fff; color: var(--bad); border-color: var(--line); }
.btn-danger:hover { border-color: var(--bad); background: #fef2f2; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }

/* Auth */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(140deg, #1a1735, #4f46e5); padding: 24px; }
.auth-card { background: #fff; border-radius: 20px; padding: 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow); }
.auth-brand { font-weight: 700; font-size: 17px; margin-bottom: 26px; display: flex; align-items: center; gap: 8px; }
.auth-logo { color: var(--brand); font-size: 19px; }
.auth-by { font-weight: 500; font-size: 12px; color: var(--faint); margin-left: 2px; }
.auth-card h1 { font-family: "Inter", -apple-system, sans-serif; font-size: 23px; margin-bottom: 8px; font-weight: 600; }
.auth-sub { color: var(--soft); margin-bottom: 24px; font-size: 14px; }
.auth-card label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 14px; color: var(--ink); }
.auth-card label small { font-weight: 400; color: var(--faint); }
.auth-card input { width: 100%; margin-top: 6px; border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 14px; outline: none; }
.auth-card input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.auth-card button { margin-top: 8px; padding: 12px; }
.auth-err { color: var(--bad); font-size: 13px; margin-top: 12px; min-height: 18px; }

/* Topbar */
.topbar { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tb-brand { font-weight: 700; display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.tb-back { color: var(--soft); font-weight: 600; font-size: 14px; }
.tb-back:hover { color: var(--ink); }
.tb-center { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.tb-center strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-slug { font-size: 12.5px; color: var(--faint); background: var(--line-soft); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.tb-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: 1 1 0; }
.tb-user { font-size: 13.5px; color: var(--soft); font-weight: 500; }
.tb-link { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 13.5px; }
.tb-link:hover { color: var(--ink); }
.tb-preview { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--brand); border: 1px solid var(--brand); border-radius: 8px; padding: 6px 12px; line-height: 1; white-space: nowrap; transition: background .12s, color .12s; }
.tb-preview:hover { background: var(--brand); color: #fff; }

/* Dashboard */
.wrap { max-width: 1280px; margin: 0 auto; padding: 34px 24px 80px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.dash-actions { display: flex; align-items: center; gap: 10px; }
.pmodal-sub { color: var(--soft); font-size: 13.5px; line-height: 1.5; margin: -6px 0 16px; }
.arch-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; margin-bottom: 20px; }
.arch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.arch-info { min-width: 0; }
.arch-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.page-title { font-family: "Inter", -apple-system, sans-serif; font-size: 28px; font-weight: 600; }
.page-sub { color: var(--soft); margin-top: 2px; }
/* workspace home / welcome view */
.home-view { padding: 8px 0; }
.home-view .page-sub { max-width: 60ch; margin-bottom: 24px; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.home-card { display: flex; flex-direction: column; gap: 8px; text-align: left; border: 1.5px solid var(--line); border-radius: 16px; padding: 22px; background: #fff; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, transform .1s; }
.home-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); }
.home-card-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--ink); }
.home-card-h .ws-group-chev { width: 13px; height: 13px; color: var(--brand); }
.home-card-d { color: var(--soft); font-size: 13.5px; line-height: 1.55; }
.home-hint { margin-top: 22px; color: var(--faint); font-size: 13.5px; }
@media (max-width: 700px) { .home-grid { grid-template-columns: 1fr; } }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-sm); }
.sc-num { display: block; font-family: "Inter", -apple-system, sans-serif; font-size: 28px; font-weight: 600; }
.sc-label { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.table-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); overflow-x: auto; }
.exec-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.exec-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); padding: 14px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.exec-table td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.exec-table tbody tr { cursor: pointer; transition: background .12s; }
.exec-table tbody tr:hover { background: #fafbff; }
.cell-org { font-weight: 650; }
.cell-event { font-size: 12.5px; color: var(--faint); }
.cell-date, .cell-updated { font-size: 13px; color: var(--soft); white-space: nowrap; }
.cell-days { font-weight: 700; font-variant-numeric: tabular-nums; }
.days-soon { color: var(--warn); }
.pbar { display: inline-block; width: 90px; height: 7px; background: var(--line-soft); border-radius: 99px; overflow: hidden; vertical-align: middle; }
.pbar-fill { height: 100%; background: var(--brand); border-radius: 99px; }
.pbar-done { background: var(--ok); }
.pbar-num { font-size: 12px; font-weight: 700; margin-left: 8px; color: var(--soft); }
.chip { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2.5px 8px; margin: 1.5px 3px 1.5px 0; background: var(--line-soft); color: var(--soft); }
.chip-miss { background: #fef3e2; color: #9a5b00; }
.chip-ok { background: #e6f7f4; color: var(--ok); }
.chip-key { background: #fdf3e0; color: #a06514; margin-top: 5px; }
.status { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 99px; padding: 4px 12px; white-space: nowrap; }
.st-intake { background: #eef0f6; color: var(--soft); }
.st-building { background: #eef0ff; color: var(--brand); }
.st-review { background: #fef3e2; color: #9a5b00; }
.st-live { background: #e6f7f4; color: var(--ok); }
.st-invite { background: var(--line-soft); color: var(--soft); }
.st-open { background: #eef0ff; color: var(--brand); }
.st-sub { background: #e6f7f4; color: var(--ok); }
/* Intake section */
.intake-review { background: #fef3e2; border-color: #f6d9a8; font-size: 14px; }
.intake-review a { color: var(--brand); font-weight: 600; }
.intake-invite-btns { display: inline-flex; gap: 8px; }
/* bulk invite (CSV / Excel) modal */
.bulk-drop { display: block; text-align: center; padding: 20px; border: 1.5px dashed var(--line); border-radius: 12px; background: #fafbff; color: var(--brand); font-weight: 600; font-size: 14px; cursor: pointer; }
.bulk-drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.bulk-summary { margin: 14px 0 8px; font-size: 14px; color: var(--ink); }
.bulk-skip { color: #b7791f; font-weight: 600; }
.bulk-list { list-style: none; margin: 0; max-height: 168px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.bulk-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; font-size: 13.5px; border-bottom: 1px solid var(--line-soft); }
.bulk-list li:last-child { border-bottom: 0; }
.bulk-list li small { color: var(--faint); }
.bulk-skipped { margin-top: 8px; font-size: 13px; color: var(--soft); }
.bulk-skipped summary { cursor: pointer; color: #b7791f; font-weight: 600; }
.bulk-skipped ul { margin: 8px 0 0; padding-left: 18px; }
.bulk-skipped li small { color: var(--faint); }
.invite-list { display: flex; flex-direction: column; gap: 8px; }
.invite-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.invite-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.invite-main strong { font-size: 14px; }
.invite-main small { color: var(--faint); font-size: 12px; }
.invite-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.copybox { display: flex; gap: 8px; margin: 6px 0 14px; }
.copybox input { flex: 1; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; font-family: monospace; font-size: 12.5px; background: #fafbff; color: var(--soft); }
/* Needs-approval + staging (intake review) */
.pill-review { display: inline-block; font-size: 10.5px; font-weight: 700; background: #fef3e2; color: #b45309; border: 1px solid #f6d9a8; border-radius: 99px; padding: 2px 9px; letter-spacing: .02em; vertical-align: middle; }
.spk-card.spk-pending { border-color: #f6d9a8; box-shadow: 0 0 0 2px #fef3e2; }
.spon-tile.spon-pending { border-color: #f6d9a8; }
.spon-pill { position: absolute; top: 6px; right: 8px; z-index: 3; font-size: 9px; padding: 2px 7px; }
.spon-approve { color: #0d9488 !important; font-weight: 800; }
.stage-card { border-color: #f6d9a8; }
.stage-row .stage-take { display: block; margin-top: 5px; }
.stage-row .stage-take em { display: inline-block; font-style: normal; font-size: 11.5px; color: var(--soft); background: var(--line-soft); border-radius: 6px; padding: 2px 8px; margin: 2px 5px 0 0; }
.st-archived { background: #f4f4f5; color: var(--faint); }
.cell-actions { white-space: nowrap; }
.cell-actions .btn { margin-left: 6px; }
.table-empty { padding: 44px; text-align: center; color: var(--faint); }

/* Workspace */
.ws { display: flex; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; gap: 18px 26px; padding: 26px 24px 80px; align-items: flex-start; align-content: flex-start; }
.ws-head { flex-basis: 100%; width: 100%; }   /* section title + blurb span the full width above both columns */
.ws-head:empty { display: none; }              /* home view has no header — collapse so columns start at the top */
.ws-head .sec-head { margin-bottom: 0; }        /* the .ws row-gap handles spacing below the header now */
.ws-side { width: 250px; flex-shrink: 0; position: sticky; top: 84px; }
.ws-progress { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.ws-progress-ring { width: 48px; height: 48px; flex-shrink: 0; }
.ws-progress-text { font-size: 12px; color: var(--soft); line-height: 1.45; }
.ws-progress-text .ok { color: var(--ok); }
.ws-nav { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 12px; box-shadow: var(--shadow-sm); }
/* collapsible nav groups */
.ws-group { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; text-align: left; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); padding: 11px 12px; border-radius: 9px; margin-top: 4px; }
.ws-group:first-child { margin-top: 0; }
.ws-group:hover { background: var(--line-soft); }
.ws-group-chev { width: 12px; height: 12px; color: var(--faint); transition: transform .18s; flex-shrink: 0; }
.ws-group.open .ws-group-chev { transform: rotate(90deg); }
.ws-group-label { flex: 1; }
.ws-group-badge { background: #fef3e2; color: #b45309; font-size: 11px; font-weight: 700; border-radius: 99px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.ws-group-items { padding: 2px 0 6px 6px; }
.ws-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; color: var(--soft); font-weight: 550; font-size: 13.5px; }
.ws-nav-item:hover { background: var(--line-soft); color: var(--ink); }
.ws-nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.ws-nav-label { flex: 1; }
.nb { width: 16px; height: 16px; flex-shrink: 0; }
.nav-count { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid #c3c8d8; color: var(--soft); font-size: 9.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ws-nav-item.active .nav-count { border-color: var(--brand); color: var(--brand); }
.ng { fill: #a7acbf; }
.ws-nav-item.active .ng { fill: var(--brand); }
.ws-nav-item.active .ng path[stroke], .ws-nav-item.active .ng [stroke="#8b91a1"] { stroke: var(--brand); }
/* legacy dots (speaker cards etc.) */
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-done { background: var(--ok); }
.dot-miss { background: var(--warn); }
.dot-open { background: #cbd0dd; }
.dot-na { background: #cbd0dd; opacity: .5; }
.ws-side-foot { margin-top: 14px; }
.ws-user { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.ws-user-av { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 11.5px; letter-spacing: .3px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ws-user-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-user-out { background: none; border: none; color: var(--faint); cursor: pointer; padding: 5px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color .12s, background .12s; }
.ws-user-out:hover { color: var(--brand); background: var(--line-soft); }
.ws-user-out svg { width: 17px; height: 17px; }
.ws-main { flex: 1; min-width: 0; }
.loading { padding: 60px; text-align: center; color: var(--faint); }

.sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sec-head h2 { font-family: "Inter", -apple-system, sans-serif; font-size: 27px; font-weight: 700; letter-spacing: -0.01em; }
.sec-head p { color: var(--soft); font-size: 13.5px; margin-top: 3px; max-width: 68ch; line-height: 1.5; min-height: 3em; }  /* reserve 2 lines so the layout doesn't shift on a 1- vs 2-line blurb */
.na-toggle { font-size: 13px; color: var(--soft); display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 13px; cursor: pointer; white-space: nowrap; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.card-admin { position: relative; }
/* "Admin only" marker — flags cards/sections a client can't see */
.admin-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-soft); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); font-size: 11px; font-weight: 700; letter-spacing: .01em; padding: 4px 10px 4px 8px; border-radius: 99px; white-space: nowrap; vertical-align: middle; }
.admin-pill svg { width: 11px; height: 11px; flex-shrink: 0; }
/* clean inline icons (replace emoji/clipart) */
svg.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.13em; flex-shrink: 0; }
.spk-drag svg.ic, .lay-grip svg.ic, .lvl-grip svg.ic, .spon-grip svg.ic { width: 16px; height: 16px; color: var(--faint); vertical-align: middle; }
.cust-pen svg.ic { width: 13px; height: 13px; }
.home-hint svg.ic { color: var(--brand); }
.admin-pill--corner { position: absolute; top: 16px; right: 16px; z-index: 2; }
.card-title { font-weight: 700; font-size: 15px; letter-spacing: .005em; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-title small { font-weight: 500; font-size: 12.5px; color: var(--faint); letter-spacing: 0; }
.muted { color: var(--faint); font-size: 13.5px; }
.muted.ok { color: var(--ok); }

.pform label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 14px; }
.pform label[hidden] { display: none; }   /* the block rule above would otherwise defeat the hidden attribute */
.pform input:not([type=color]):not([type=checkbox]), .pform textarea, .pform select { width: 100%; margin-top: 6px; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 13px; outline: none; background: #fff; }
.pform input:focus, .pform textarea:focus, .pform select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pform input[type=range], .pmodal input[type=range] { max-width: 360px; }   /* sliders read better short + left-aligned, never full-bleed */
/* inline styled select (e.g. Scroll animation "Effect") — a modern control with a custom chevron, not the raw OS dropdown */
.fx-select { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 0; }
.fx-select select { -webkit-appearance: none; appearance: none; margin: 0; min-width: 156px; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 36px 9px 13px; font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; outline: none; transition: border-color .15s, box-shadow .15s; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center; }
.fx-select select:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.fx-select select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* height-only resize: dragging the corner must not shrink the width (that would let the narrowed
   textarea sit beside its inline label and knock it out of line) */
.pform textarea { resize: vertical; display: block; }
/* image-URL fallback, hidden behind a reveal link to keep upload areas uncluttered */
.img-url { margin: -4px 0 14px; }
.img-url > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--soft); width: fit-content; }
.img-url > summary::-webkit-details-marker { display: none; }
.img-url > summary::before { content: "🔗"; font-size: 11px; opacity: .7; }
.img-url > summary:hover { color: var(--brand); }
.img-url[open] > summary { color: var(--faint); font-weight: 500; margin-bottom: 8px; }
.img-url[open] > summary::before { content: "×"; font-size: 15px; line-height: 1; opacity: 1; }
.img-url .img-url-field { margin-bottom: 0; }
/* email compose preview (invite modals) */
.email-preview-wrap { margin: 2px 0 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #f3f4f8; }
.email-preview-head { font-size: 12px; font-weight: 600; color: var(--faint); padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.email-subj { color: var(--ink); font-weight: 500; }
.email-frame { width: 100%; height: 320px; border: 0; display: block; background: #f3f4f8; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frow3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.pform-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.pform-warn { background: #fef2f2; border: 1.5px solid #fca5a5; border-radius: 12px; padding: 12px 15px; color: #b91c1c; font-size: 13.5px; line-height: 1.5; margin: 4px 0 12px; }
.pform-warn[hidden] { display: none; }
.pform-warn strong { color: #991b1b; }
.fieldnote { font-size: 12.5px; color: var(--faint); margin: -6px 0 14px; }
.fieldnote a { color: var(--brand); font-weight: 600; }
/* SEO section — search + social + favicon previews */
.seo-google { margin: 14px 0 4px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sg-crumb { font-size: 12.5px; color: #4d5156; }
.sg-title { font-size: 18px; color: #1a0dab; line-height: 1.3; margin: 3px 0 2px; }
.sg-desc { font-size: 13px; color: #4d5156; line-height: 1.55; }
.seo-social { display: flex; flex-direction: column; margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; max-width: 440px; background: #fff; }
.ss-img { aspect-ratio: 1200 / 630; background: var(--line-soft) center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 13px; }
.ss-meta { padding: 12px 15px; }
.ss-domain { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .03em; }
.ss-title { font-size: 15px; font-weight: 650; color: var(--ink); margin: 3px 0 2px; }
.ss-desc { font-size: 13px; color: var(--soft); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fav-row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.fav-tabpreview { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-bottom: none; border-radius: 9px 9px 0 0; padding: 8px 13px 9px; margin-top: 18px; box-shadow: 0 -1px 4px rgba(0,0,0,.04); }
.favtab { width: 16px; height: 16px; border-radius: 3px; background: var(--line-soft); flex-shrink: 0; overflow: hidden; }
.favtab img { width: 100%; height: 100%; object-fit: contain; display: block; }
.favtab-label { font-size: 12.5px; color: var(--soft); white-space: nowrap; }
/* Social Sharing section */
.social-lbl { display: inline-flex; align-items: center; gap: 8px; }
.social-ic { width: 15px; height: 15px; color: var(--soft); display: inline-flex; flex-shrink: 0; }
.social-ic svg { width: 100%; height: 100%; }
.social-preview { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0 4px; min-height: 30px; }
.social-pv-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--brand); }
.social-pv-ic svg { width: 16px; height: 16px; }
.checkline { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; cursor: pointer; }
.checkline input { width: auto !important; margin: 0 !important; }
.sub-lead { font-weight: 700; font-size: 15px; color: var(--ink); letter-spacing: .005em; margin: 4px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.sub-lead small { font-weight: 400; font-size: 12.5px; color: var(--faint); letter-spacing: 0; }
.pform-sep { border: none; border-top: 1px solid var(--line); margin: 30px 0 26px; }
.bh-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.pform .bh-heading { margin-bottom: 8px; }
.pform input.bh-input:not([type=color]) { flex: 0 0 auto; width: 96px; margin-top: 0; padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.bh-presets .btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.banner-framer { margin-bottom: 14px; }
.banner-frame { width: 100%; border-radius: 12px; overflow: hidden; background: #0c0c14; cursor: grab; touch-action: none; user-select: none; }
.banner-frame:active { cursor: grabbing; }
.banner-frame img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 14px; margin: 6px 0 14px; }
.colorrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.colorrow input { width: 46px; height: 34px; border: 1.5px solid var(--line); border-radius: 8px; padding: 2px; cursor: pointer; }
.colorrow span { font-size: 13px; color: var(--faint); font-family: monospace; }
.slugrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.slugrow input { flex: 1; margin-top: 0 !important; }
.slugrow span { color: var(--faint); font-size: 13.5px; white-space: nowrap; }

/* lists */
.ses-day { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.ses-row { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--line-soft); }
.ses-row:last-child { border-bottom: none; }
.ses-time { font-size: 12.5px; font-weight: 600; color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; width: 92px; flex-shrink: 0; }
.ses-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ses-main strong { font-size: 14px; }
.ses-main small { color: var(--faint); font-size: 12.5px; }
.row-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
.mini-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--soft); cursor: pointer; padding: 0 8px; white-space: nowrap; }
.mini-toggle input { margin: 0; accent-color: var(--brand); }
.track-list { display: flex; flex-wrap: wrap; gap: 8px; }
.track-pill { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--line); border-radius: 99px; padding: 2px 6px 2px 4px; font-size: 13px; font-weight: 600; }
.track-pill-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; font: inherit; color: inherit; padding: 4px 6px 4px 8px; border-radius: 99px; }
.track-pill-btn:hover { background: color-mix(in srgb, var(--tc) 12%, transparent); }
.pill-x { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 11px; padding: 2px 4px; }
.pill-x:hover { color: var(--bad); }
.sp-logo-mini { display: inline-block; width: 40px; margin-right: 8px; }
.sp-logo-mini img { max-height: 26px; max-width: 40px; object-fit: contain; }

/* sponsor tier walls — mirror the live site, but editable */
.spon-tier { margin-top: 18px; }
.spon-tier-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--faint); text-align: center; margin-bottom: 12px; }
.spon-wall { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.spon-tile { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; cursor: grab; transition: opacity .15s, box-shadow .15s, transform .15s; display: flex; flex-direction: column; }
.spon-tile.dragging { opacity: .35; box-shadow: 0 0 0 2px var(--brand); }
.spon-tile:hover { box-shadow: var(--shadow); }
.spon-large .spon-tile { flex: 1 1 300px; max-width: 360px; }
.spon-medium .spon-tile { flex: 1 1 210px; max-width: 260px; }
.spon-small .spon-tile { flex: 0 1 180px; }
.spon-logo { display: flex; align-items: center; justify-content: center; padding: 18px; background: #fff; }
.spon-large .spon-logo { height: 120px; }
.spon-medium .spon-logo { height: 92px; }
.spon-small .spon-logo { height: 66px; padding: 12px; }
.spon-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.spon-word { font-weight: 700; color: #3b4150; text-align: center; font-size: 17px; }
.spon-small .spon-word { font-size: 13px; font-weight: 600; color: var(--soft); }

/* sponsor levels editor */
.lvl-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.lvl-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.lvl-row.dragging { opacity: .4; box-shadow: 0 0 0 2px var(--brand); }
.lvl-grip { color: var(--faint); letter-spacing: -2px; cursor: grab; user-select: none; }
.lvl-name { flex: 1; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 14px; }
.lvl-size { border: 1.5px solid var(--line); border-radius: 8px; padding: 8px; font-family: inherit; font-size: 13px; background: #fff; }

/* session credit lines */
#creditLines { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.credit-line { display: flex; align-items: center; gap: 8px; }
.pform .credit-line select.cl-type { flex: 1 1 auto; width: auto; margin-top: 0; }
.pform .credit-line input.cl-val { flex: 0 0 120px; width: 120px; margin-top: 0; }
.spon-grip { position: absolute; top: 6px; left: 8px; color: var(--faint); font-size: 12px; letter-spacing: -2px; opacity: 0; transition: opacity .15s; text-shadow: 0 1px 2px #fff; }
.spon-tile:hover .spon-grip { opacity: 1; }
.spon-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line-soft); background: var(--bg); }
.spon-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* WYSIWYG glass preview — mirrors the section's background so the admin can gauge box opacity */
.spon-preview-bg { position: relative; background-size: cover; background-position: center; border-radius: 16px; padding: 8px 14px 20px; overflow: hidden; }
.spon-preview-bg::before { content: ""; position: absolute; inset: 0; background: var(--spon-screen, #0d0b1a); opacity: var(--spon-screen-op, .55); z-index: 0; pointer-events: none; }
.spon-preview-bg > .spon-tier { position: relative; z-index: 1; }
.spon-preview-bg .spon-tile { background: transparent; border-color: rgba(255,255,255,.28); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.spon-preview-bg .spon-logo { background: rgba(255,255,255, var(--spon-box-op, 1)); backdrop-filter: blur(9px) saturate(1.15); -webkit-backdrop-filter: blur(9px) saturate(1.15); }
.spon-preview-bg .spon-tier-label { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.spon-preview-bg.spon-light .spon-tier-label { color: #14161c; text-shadow: none; }
.spon-preview-bg .spon-bar { background: rgba(255,255,255,.92); border-top-color: rgba(255,255,255,.4); }
/* hotel glass gauge — a sample panel over the section's background */
.hglass-preview { position: relative; border-radius: 12px; padding: 24px; margin: 12px 0 16px; min-height: 118px; display: flex; align-items: center; background-size: cover; background-position: center; background-color: var(--line-soft); overflow: hidden; }
.hglass-preview.has-bg::before { content: ""; position: absolute; inset: 0; background: var(--hpv-screen, #0d0b1a); opacity: var(--hpv-screen-op, .55); }
.hgp-panel { position: relative; z-index: 1; display: inline-flex; flex-direction: column; gap: 6px; background: rgba(var(--hotel-box-rgb, 255,255,255), var(--hotel-box-op, 1)); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border: 1px solid rgba(255,255,255,.4); border-radius: 12px; padding: 15px 20px; box-shadow: var(--shadow-sm); }
.hgp-badge { align-self: flex-start; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--brand); color: #fff; border-radius: 99px; padding: 3px 9px; }
.hgp-name { font-weight: 700; font-size: 15px; }
.hgp-rate { font-weight: 700; font-size: 22px; }
.hgp-rate small { font-weight: 500; font-size: 11px; opacity: .7; }
.hgp-dark, .hgp-dark .hgp-name { color: var(--ink); }
.hgp-light, .hgp-light .hgp-name { color: #fff; }
.spon-tools { display: flex; gap: 2px; flex-shrink: 0; }
.spon-ico { background: none; border: none; cursor: pointer; color: var(--faint); font-size: 13px; padding: 3px 6px; border-radius: 6px; }
.spon-ico:hover { background: var(--line-soft); color: var(--ink); }
.spon-add-tier { border: 1.5px dashed var(--line); background: #fafbff; border-radius: 12px; color: var(--soft); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 18px 24px; flex: 1 1 220px; max-width: 300px; transition: all .15s; }
.spon-add-tier:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* speakers grid */
.spk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.spk-card { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: #fff; display: flex; flex-direction: column; position: relative; cursor: grab; transition: opacity .15s, box-shadow .15s; }
.spk-card.dragging { opacity: .35; box-shadow: 0 0 0 2px var(--brand); }
.spk-card.spk-hidden .spk-photo, .spk-card.spk-hidden .spk-body { opacity: .38; filter: grayscale(.6); }
.spk-drag { position: absolute; top: 8px; left: 10px; z-index: 2; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); font-size: 14px; letter-spacing: -2px; cursor: grab; user-select: none; }
.spk-show { position: absolute; top: 6px; right: 8px; z-index: 2; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.92); border-radius: 7px; padding: 4px 8px; cursor: pointer; box-shadow: var(--shadow-sm); }
.spk-show input { margin: 0; accent-color: var(--brand); }
.spk-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spk-count { margin: -6px 0 14px; }
.spk-photo { aspect-ratio: 1/1; background: var(--line-soft); }
.spk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spk-nophoto { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--faint); font-size: 13px; }
.spk-body { padding: 10px 12px 4px; }
.spk-body strong { display: block; font-size: 14px; }
.spk-body small { color: var(--faint); font-size: 12px; line-height: 1.35; display: block; }
.spk-card .row-actions { padding: 8px 8px 10px; margin-top: auto; }  /* pin Edit/Delete to the bottom regardless of 1- or 2-line role */

/* uploader — drag & drop, aspect-true preview */
.upl { display: flex; gap: 16px; align-items: flex-start; margin: 8px 0 16px; border: 1.5px dashed #c9cde0; border-radius: 14px; padding: 8px; background: #fafbff; transition: all .15s; }
.upl:hover { border-color: var(--brand); }
.upl.upl-drag { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-soft); }
.upl-preview { position: relative; width: 210px; max-width: 46%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--line-soft); flex-shrink: 0; cursor: pointer; }
.upl-preview img { width: 100%; height: 100%; object-fit: cover; }
.upl-empty { font-size: 12px; color: var(--soft); padding: 8px; text-align: center; line-height: 1.6; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.upl-empty svg { color: var(--brand); margin-bottom: 4px; }
.upl-empty strong { font-size: 12.5px; color: var(--ink); }
.upl-replace { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(16,14,34,.62); color: #fff; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .15s; }
.upl-preview:hover .upl-replace, .upl.upl-drag .upl-replace { opacity: 1; }
/* dark preview so a reverse-out (light) footer logo is visible while editing */
.upl-dark .upl-preview { background: #101024; }
.upl-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding-top: 4px; }
.upl-hint { font-size: 12px; color: var(--faint); line-height: 1.45; max-width: 220px; font-weight: 400; }
.upl-note { font-size: 12.5px; color: var(--warn); }

/* crop & frame */
.crop-bd { z-index: 400; }
.crop-modal { max-width: 540px; text-align: center; }
.crop-hint { margin-bottom: 14px; text-align: left; }
#cropCanvas { border-radius: 12px; cursor: grab; touch-action: none; max-width: 100%; box-shadow: var(--shadow-sm); }
#cropCanvas:active { cursor: grabbing; }
.crop-zoom { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.crop-zoom span { color: var(--faint); font-size: 17px; font-weight: 600; }
.crop-zoom input { flex: 1; accent-color: var(--brand); }

/* speaker live preview */
.pmodal.pmodal-wide { max-width: 800px; }
.pmodal.pmodal-narrow { max-width: 440px; }
.cf-input { width: 100%; margin: 0 0 2px; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 13px; font: inherit; outline: none; }
.cf-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pmodal.pmodal-session { max-width: 900px; }

/* field group — a lightly shaded, radiused cluster of related controls (the "edit session" look) */
.fgroup { background: #f7f8fc; border: 1px solid var(--line-soft); border-radius: 14px; padding: 15px 18px 17px; margin: 0 0 16px; }
.fgroup:last-child { margin-bottom: 0; }
.fgroup-head { display: flex; align-items: baseline; gap: 9px; font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: .005em; margin: 0 0 13px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.fgroup-head small { font-weight: 500; font-size: 12px; color: var(--faint); letter-spacing: 0; line-height: 1.4; }
.fgroup-head-btn { justify-content: space-between; align-items: center; }
/* Hero photo: upload box on the left, its controls to the right */
.hero-photo-split { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.hero-photo-upload { flex: 1 1 340px; min-width: 260px; }
.hero-photo-controls { flex: 1 1 400px; min-width: 300px; max-width: 560px; }
.hero-photo-controls .hero-slider { max-width: 340px; }   /* short, left-aligned — long sliders read as clumsy */
.fgroup > .checkgrid { margin: 0; }
.fgroup > .checkline { margin: 0; }
.fgroup > :last-child { margin-bottom: 0; }
/* the last field inside a group shouldn't carry its own bottom margin (the group padding handles it) */
.fgroup > .pform label:last-child, .fgroup > label:last-of-type { margin-bottom: 0; }
/* a form panel whose body is a stack of field groups: slim the outer card so the groups frame the content */
.pform.card.grouped { padding: 16px; }
.card.grouped .fgroup + .fgroup { margin-top: 0; }
.card.grouped .pform-actions { margin-top: 16px; }
/* a plain (non-shaded) group divider used at the top of a card body when a note precedes the groups */
.fgroup .fieldnote:last-child, .fgroup > p:last-child { margin-bottom: 0; }
/* inside the wide session modal, checkbox lists run three across */
.pmodal-session .fgroup > .checkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 18px; }
.pmodal-session #creditLines { margin-bottom: 10px; }
/* keep the Save/Cancel row pinned to the bottom of ANY tall, scrolling modal (the modal box is the scroll container).
   scoped to .pmodal so section forms that scroll with the page (Notifications, Settings) keep a normal-flow action row.
   justify-content is restated so every modal's buttons are consistently right-justified. */
.pmodal .pform-actions { position: sticky; bottom: -28px; margin: 18px -28px -28px; padding: 15px 28px; background: #fff; border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; z-index: 3; justify-content: flex-end; }
/* session-only docs & videos builder */
.sess-att { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sess-att-empty { margin: 0 0 8px; font-size: 13px; }
.sess-att-row { display: flex; align-items: center; gap: 8px; }
.sess-att-row input { flex: 1 1 auto; min-width: 0; margin: 0; border: 1.5px solid var(--line); border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 13.5px; background: #fff; }
.sess-att-row .sd-url { flex: 1 1 42%; }
.sess-att-src { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); background: var(--line-soft); border-radius: 6px; padding: 4px 9px; }
.sess-att-show { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; font-weight: 500; color: var(--soft); white-space: nowrap; cursor: pointer; }
.sess-att-show input { margin: 0; }
.spk-noemail { opacity: .55; } .spk-noemail small { color: var(--faint); }
/* Notifications recipients: breathing room under Select-all, a search box, and a scrolling list (≈3 rows tall) */
.checkline.selall-line { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rec-search { width: 100%; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 13.5px; background: #fff; }
.rec-search:focus { outline: none; border-color: var(--brand); }
/* fixed 3 columns + email stacked under the name so long name/email pairs never wrap */
.rec-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 200px; overflow-y: auto; padding-right: 4px; }
.rec-list .checkline { align-items: flex-start; }
.rec-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rec-who small { color: var(--faint); font-size: 12px; }
@media (max-width: 760px) { .rec-list { grid-template-columns: 1fr 1fr; } }
/* !important needed to beat the base `.checkline { display: flex !important }` */
.rec-list .checkline[hidden] { display: none !important; }
/* default view: only speakers with an email; the toggle relaxes this to show who's missing info */
.rec-list.hide-noemail .spk-noemail { display: none !important; }
.noemail-toggle { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--soft); }
.sess-att-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sess-att-input { flex: 1 1 220px; min-width: 0; border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 13.5px; background: #fff; }
/* current-document card in the Edit Document modal (upload hidden behind Replace) */
.doc-current { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 12px; }
.doc-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); }
.doc-current-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-current-main strong { font-size: 14px; }
.doc-current-main small { font-size: 12.5px; color: var(--soft); }
.doc-current-main a { color: var(--brand); font-weight: 600; }
/* Branding color-usage grid modal */
.cgrid-wrap { overflow-x: auto; margin: 4px 0 16px; }
.cgrid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cgrid th, .cgrid td { padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--line-soft); }
.cgrid thead th { font-weight: 700; color: var(--ink); vertical-align: bottom; }
.cgrid thead th span:last-child { display: block; margin-top: 6px; font-size: 12.5px; }
.cg-sw { display: inline-block; width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.cg-area { text-align: left; color: var(--soft); font-weight: 500; }
.cg-group td { text-align: left; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); background: var(--line-soft); }
.cg-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.cg-dash { color: var(--faint); opacity: .5; }
.spk-split { display: grid; grid-template-columns: 1fr 230px; gap: 26px; align-items: start; }
.spk-live { position: sticky; top: 0; }
.live-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 10px; }
.smock { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.smock-photo { position: relative; aspect-ratio: 1/1; background: var(--line-soft); }
.smock-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smock-blank { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--faint); font-size: 13px; }
.smock-badge { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: rgba(20,22,28,.72); color: #fff; border-radius: 6px; padding: 4px 9px; }
.smock-info { padding: 14px 16px 18px; }
.smock-name { font-size: 15.5px; font-weight: 650; }
.smock-role { font-size: 12px; color: var(--soft); margin-top: 3px; line-height: 1.4; min-height: 17px; }
.smock-link { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--brand); }
@media (max-width: 700px) { .spk-split { grid-template-columns: 1fr; } .spk-live { position: static; } }

/* wdye logo */
/* app footer — pin to the bottom on short pages via a full-height column */
body[data-page] { display: flex; flex-direction: column; min-height: 100vh; }
/* width:100% keeps these full-width (up to max-width) as flex items — without it, margin:auto
   makes them shrink-to-fit their content, so the centered layout drifts between sections */
body[data-page] .wrap, body[data-page] .ws { flex: 1 0 auto; width: 100%; }
.app-foot { background: #fff; border-top: 1px solid var(--line); flex-shrink: 0; }
.app-foot-in { max-width: 1280px; margin: 0 auto; padding: 18px 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.app-foot-meta { margin-top: 6px; color: var(--faint); font-size: 12px; }
/* "Powered by" stacked above the linked [wdye] lockup — shared footer treatment */
.pwby { flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; }
.pwby-pb { font-size: 12px; color: var(--faint); letter-spacing: .04em; }
.pwby-link { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; }
.pwby-mark { font-size: 22px; font-weight: 650; color: #3a3a3c; letter-spacing: .5px; line-height: 1; }
.pwby-mark b { color: #7a2ee6; font-weight: 700; }
.pwby-tag { font-size: 11.5px; color: var(--faint); font-weight: 500; letter-spacing: .2px; }
.pwby-tag sup { font-size: 7px; }
.pwby-link:hover .pwby-mark { color: #7a2ee6; }

.wdye-logo { display: inline-flex; align-items: baseline; gap: 10px; line-height: 1; }
.wdye-mark { font-size: 21px; font-weight: 650; color: #3a3a3c; letter-spacing: .5px; }
.wdye-mark b { color: #7a2ee6; font-weight: 700; }
.wdye-tag { font-size: 11.5px; color: var(--faint); font-weight: 500; letter-spacing: .2px; white-space: nowrap; }
.wdye-tag sup { font-size: 7px; }
.auth-brand .wdye-logo { flex-direction: column; gap: 4px; align-items: flex-start; }
.auth-brand .wdye-mark { font-size: 30px; }
.auth-brand .wdye-tag { font-size: 13px; }

/* site layout tiles */
.lay-fixed { border: 1.5px dashed var(--line); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; color: var(--faint); text-align: center; margin: 4px 0 10px; background: var(--bg); }
/* header/footer: fixed position (no drag) but still customizable */
.lay-fixed-cust { display: flex; align-items: center; gap: 12px; text-align: left; border-style: solid; background: #fff; padding: 11px 14px; }
.lay-fixed-name { flex: 1; font-weight: 600; font-size: 14px; color: var(--ink); display: flex; flex-direction: column; }
.lay-fixed-name small { font-weight: 400; font-size: 11.5px; color: var(--faint); }
#layList { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.lay-tile { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: 11px 14px; cursor: grab; transition: opacity .15s, box-shadow .15s; }
.lay-tile.dragging { opacity: .35; box-shadow: 0 0 0 2px var(--brand); }
.lay-tile.lay-off .lay-name { color: var(--faint); }
.lay-grip { color: var(--faint); letter-spacing: -2px; user-select: none; }
.lay-name { flex: 1; font-weight: 600; font-size: 14px; display: flex; flex-direction: column; }
.lay-name small { font-weight: 400; font-size: 11.5px; color: var(--faint); }
.lay-theme { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--soft); font-weight: 600; }
.lay-theme select { border: 1.5px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: 12.5px; background: #fff; }
.lay-theme-fixed { font-size: 11.5px; color: var(--faint); font-style: italic; }
.lay-vis { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--soft); cursor: pointer; border-left: 1px solid var(--line); padding-left: 12px; margin-left: 4px; white-space: nowrap; }
.lay-vis input { margin: 0; accent-color: var(--brand); }
.lay-tile.lay-hidden { opacity: .55; }
.lay-tile.lay-hidden .lay-name { text-decoration: line-through; text-decoration-color: var(--faint); }
.lay-tile.lay-hidden .lay-vis-label { color: var(--warn); }
.ws-nav-add { color: var(--brand) !important; font-weight: 650; }
.theme-strip { display: flex; gap: 10px; margin: 6px 0 16px; }
.theme-chip { flex: 1; text-align: center; border-radius: 10px; padding: 14px 8px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line); }
.th-light { background: #fff; color: #14161c; }
.th-soft { background: #f6f7fb; color: #14161c; }
.th-dark { background: #1a1735; color: #fff; border-color: #1a1735; }

/* Site Layout: per-section Customize button + stats dark/light segment */
.lay-cust { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: #fff; border-radius: 9px; padding: 5px 10px 5px 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--soft); cursor: pointer; }
.lay-cust:hover { border-color: var(--brand); color: var(--brand); }
.cust-dot { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; background-size: cover; background-position: center; }
.cust-lbl { min-width: 66px; text-align: left; }
.cust-pen { color: var(--faint); font-size: 11px; }
.lay-seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg-btn { border: none; background: #fff; padding: 6px 15px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--soft); cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.active { background: var(--brand); color: #fff; }

/* Customize modal */
.cust-seg { display: flex; gap: 8px; margin-bottom: 16px; }
.cust-tab { flex: 1; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 9px; font: inherit; font-size: 13px; font-weight: 600; color: var(--soft); cursor: pointer; }
.cust-tab.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.swatch-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.cust-sw { border: 2px solid var(--line); border-radius: 10px; padding: 18px 6px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; }
.cust-sw.sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cust-sw-custom { background: linear-gradient(135deg, #f5a3ff, #a3c4ff, #a3ffce); color: #14161c; border-color: transparent; }
.cust-colorwrap { margin-top: 14px; }
.cust-fill-seg { display: inline-flex; gap: 6px; background: var(--line-soft); border-radius: 9px; padding: 3px; margin-bottom: 12px; }
.fill-btn { border: none; background: none; border-radius: 7px; padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--soft); cursor: pointer; }
.fill-btn.active { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.grad-dirs { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.grad-dir { width: 48px; height: 34px; border-radius: 8px; border: 2px solid var(--line); cursor: pointer; padding: 0; transition: border-color .12s, box-shadow .12s; }
.grad-dir:hover { border-color: var(--brand); }
.grad-dir.sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* live preview of the hero photo overlay (colour + opacity), mirroring the site hero */
.hero-ovp { position: relative; margin-top: 12px; border-radius: 12px; overflow: hidden; aspect-ratio: 21 / 9; background: #1a1830; border: 1px solid var(--line); }
.hero-ovp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-ovp-scrim { position: absolute; inset: 0; }
.hero-ovp-text { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 14px; }
.hero-ovp-eyebrow { color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.hero-ovp-title { color: #fff; font-family: "Fraunces", Georgia, serif; font-size: clamp(18px, 3.4vw, 30px); font-weight: 600; line-height: 1.1; }
.hero-ovp-sub { color: #fff; font-size: 11px; opacity: .8; }
.hero-ovp-text.ovp-ink .hero-ovp-eyebrow, .hero-ovp-text.ovp-ink .hero-ovp-title, .hero-ovp-text.ovp-ink .hero-ovp-sub { color: #14161c; }
.cust-live { position: relative; margin: 16px 0; border-radius: 14px; padding: 26px 24px; min-height: 92px; display: flex; flex-direction: column; justify-content: center; gap: 6px; border: 1px solid var(--line); background-size: cover; background-position: center; overflow: hidden; }
/* preview mirrors the site: bg image on ::before (drag = focal %, scale = zoom), color screen on ::after, content above */
.cust-live.has-bg::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--cll-bg-img); background-size: cover; background-position: var(--cll-bg-pos, center); background-repeat: no-repeat; transform: scale(var(--cll-bg-zoom, 1)); transform-origin: var(--cll-bg-pos, center); }
.cust-live.has-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--cll-screen, #0d0b1a); opacity: var(--cll-screen-op, .5); }
.cust-live.has-bg > * { position: relative; z-index: 2; }
.poszoom { cursor: grab; touch-action: none; }
.poszoom.grabbing { cursor: grabbing; }
/* image-frame editor: orientation chips + a live preview with Zoom/Size (and Custom W/H) sliders to the right */
.shape-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.shape-chip { padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.shape-chip:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.shape-chip.sel { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.frame-ed { margin-top: 14px; }
.frame-ed-shapes { margin-bottom: 12px; }
.frame-ed-body { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-alt, #f6f7fb); }
.frame-ed-stage { flex: 1 1 300px; max-width: 100%; display: flex; align-items: flex-start; justify-content: center; }
.frame-ed-pv { position: relative; overflow: hidden; border-radius: 10px; width: 100%; }
.frame-ed-pv.framed { background: #0c0c14; }
.frame-ed-pv.framed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-ed-pv:not(.framed) img { width: 100%; height: auto; object-fit: contain; display: block; border-radius: 10px; }
.frame-ed-controls { flex: 0 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.frame-ed-slider { display: block; margin: 0; }
.frame-ed-slider[hidden] { display: none; }   /* the block rule above would otherwise defeat the hidden attribute */
.frame-ed-slider > span { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.frame-ed-slider > span b { color: var(--ink); }
.frame-ed-slider input[type=range] { width: 100%; margin: 0; display: block; }
.frame-ed-hint { font-size: 11.5px; color: var(--faint); margin: 0; }
/* Portal Users: gear button + per-user access modal */
.gear-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.gear-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.gear-btn .ic { width: 17px; height: 17px; }
.us-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.us-head h3 { margin: 0; }
.us-group { margin: 0 0 15px; }
.us-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.us-selall { border: none; background: none; color: var(--brand); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.us-selall:hover { text-decoration: underline; }
.us-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 18px; }
.us-checks .checkline { margin: 0; }
.us-super { margin-top: 8px; }
.us-super-line { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.us-super-line::before, .us-super-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.us-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.us-actions-right { display: flex; gap: 10px; }
@media (max-width: 560px) { .us-checks { grid-template-columns: 1fr; } }
.cll-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.cll-h { font-size: 21px; font-weight: 700; }
.cust-live.cl-dark { color: var(--cll-light, #fff); } .cust-live.cl-dark .cll-eyebrow { color: var(--cll-ebrow, var(--cll-accent, #e0a43b)); }
.cust-live.cl-light { color: var(--cll-dark, #14161c); } .cust-live.cl-light .cll-eyebrow { color: var(--cll-ebrow, var(--cll-primary, var(--brand))); }
.cust-ebrow { display: flex; align-items: center; gap: 14px; margin: 16px 0 -2px; flex-wrap: wrap; }
.cust-ebrow[hidden] { display: none; }
.ebrow-sws { display: flex; gap: 8px; }
.ebrow-sw { width: 30px; height: 30px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; padding: 0; transition: box-shadow .12s; }
.ebrow-sw:hover { box-shadow: 0 0 0 1.5px var(--soft); }
.ebrow-sw.sel { box-shadow: 0 0 0 2.5px var(--brand); }
.cll-body { font-size: 13.5px; line-height: 1.5; margin: 2px 0 0; max-width: 48ch; }
.cll-list { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cll-list li { position: relative; padding-left: 27px; font-size: 13px; line-height: 1.4; }
.cll-list li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.cust-live.cl-dark .cll-body { color: color-mix(in srgb, var(--cll-light, #fff) 82%, transparent); } .cust-live.cl-dark .cll-list li { color: color-mix(in srgb, var(--cll-light, #fff) 88%, transparent); } .cust-live.cl-dark .cll-list li::before { background: rgba(255,255,255,.14); color: var(--cll-accent, #e0a43b); }
.cust-live.cl-light .cll-body { color: color-mix(in srgb, var(--cll-dark, #14161c) 74%, transparent); } .cust-live.cl-light .cll-list li { color: color-mix(in srgb, var(--cll-dark, #14161c) 86%, transparent); } .cust-live.cl-light .cll-list li::before { background: color-mix(in srgb, var(--cll-primary, var(--brand)) 14%, #fff); color: var(--cll-primary, var(--brand)); }
/* legibility scrim when previewing over an image (mirrors the live site's .has-bg) */
.cust-live.has-bg.cl-dark .cll-eyebrow, .cust-live.has-bg.cl-dark .cll-h, .cust-live.has-bg.cl-dark .cll-body, .cust-live.has-bg.cl-dark .cll-list li { text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.5); }
.cust-live.has-bg.cl-light .cll-eyebrow, .cust-live.has-bg.cl-light .cll-h, .cust-live.has-bg.cl-light .cll-body, .cust-live.has-bg.cl-light .cll-list li { text-shadow: 0 1px 2px rgba(255,255,255,.92), 0 0 14px rgba(255,255,255,.82); }
.cust-textseg { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 16px 0 -2px; }
.cust-textseg[hidden] { display: none; }
.cts-label { font-weight: 600; font-size: 13px; }
.cust-textseg .cust-fill-seg { margin: 0; }
.cts-hint { font-size: 12px; color: var(--faint); flex-basis: 100%; }
.cust-divider { margin-top: 16px; }
.cust-divider-opts { margin-top: 12px; align-items: start; }
.cust-divider-opts[hidden] { display: none; }
.dv-thick { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }   /* cap the whole block so the %-readout stays aligned with the (short) slider */
.dv-thick-top { display: flex; justify-content: space-between; align-items: baseline; }
.dv-thick-top b { font-weight: 600; color: var(--soft); font-size: 12.5px; }
.dv-thick input[type=range] { width: 100%; margin: 0; accent-color: var(--brand); }
/* full-bleed divider line pinned to the bottom edge of the preview card */
.cll-divider { margin: 16px -24px -26px; height: 0; border-top: 2px solid transparent; }
.cll-divider[hidden] { display: none; }

/* info dumpster */
.dump-drop { border: 1.5px dashed #c9cde0; border-radius: 12px; background: #fafbff; padding: 18px; text-align: center; font-size: 13px; color: var(--soft); margin: -4px 0 14px; transition: all .15s; }
.dump-drop.upl-drag { border-color: var(--brand); background: var(--brand-soft); }
.dump-review { border-top: 1px solid var(--line-soft); margin-top: 18px; padding-top: 18px; }
.dump-counts { display: flex; gap: 8px; margin-bottom: 14px; }
.dump-counts .chip { font-size: 13px; padding: 6px 12px; background: var(--brand-soft); color: var(--brand-deep); }
.dump-list { list-style: none; margin: 0 0 16px; max-height: 220px; overflow-y: auto; }
.dump-list li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--soft); }
.dump-list li strong { color: var(--ink); }

/* hero style radios */
.herostyle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 16px; }
.herostyle-opt { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 500 !important; margin: 0 !important; }
.herostyle-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.herostyle-opt input { margin-top: 3px; accent-color: var(--brand); }
.herostyle-opt strong { display: block; font-size: 14px; }
.herostyle-opt small { color: var(--faint); font-size: 12px; line-height: 1.4; font-weight: 400; }

/* content blocks */
.allow-card { padding: 16px 18px; }
.allow-toggle { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500 !important; margin: 0 !important; cursor: pointer; }
.allow-toggle input { margin-top: 3px; accent-color: var(--brand); }
.allow-toggle strong { display: block; font-size: 14px; }
.allow-toggle small { color: var(--faint); font-size: 12px; line-height: 1.45; font-weight: 400; }
.block-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line-soft); cursor: grab; }
.block-row.dragging { opacity: .4; }
.block-thumb { width: 64px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--line-soft); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.block-thumb img { width: 100%; height: 100%; object-fit: cover; }
.block-noimg { font-size: 10px; color: var(--faint); }

/* font preview */
.font-preview { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin: -4px 0 16px; background: #fff; }
.fp-head { font-size: 22px; font-weight: 600; line-height: 1.2; margin-bottom: 6px; }
.fp-body { font-size: 13.5px; color: var(--soft); line-height: 1.55; }
/* big brand/accent color cards */
.colorcard { display: flex !important; flex-direction: column; gap: 8px; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; background: #fff; margin: 0 !important; cursor: pointer; transition: border-color .15s; }
.colorcard:hover { border-color: var(--brand); }
.colorcard .cc-name { font-weight: 600; font-size: 13px; }
.colorcard input[type=color] { width: 100%; height: 64px; border: 1px solid var(--line); border-radius: 10px; padding: 0; cursor: pointer; background: none; }
.colorcard input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.colorcard input[type=color]::-webkit-color-swatch { border: none; border-radius: 9px; }
.colorcard input[type=color]::-moz-color-swatch { border: none; border-radius: 9px; }
.cc-hex { font-family: monospace; font-size: 12px; color: var(--faint); text-align: center; }
/* typography: selector beside a live "Sample Output" example */
.type-split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; align-items: stretch; margin-bottom: 6px; }
.type-select { margin: 0 !important; }
.type-split .font-preview { margin: 0; position: relative; padding-top: 30px; display: flex; flex-direction: column; justify-content: center; }
.fp-legend { position: absolute; top: 9px; left: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #b9bdc9; }

/* status flow */
.status-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.status-step { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 18px; font-weight: 600; cursor: pointer; color: var(--soft); }
.status-step:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.status-step.current { background: var(--brand); border-color: var(--brand); color: #fff; }
.status-step:disabled { opacity: .45; cursor: not-allowed; }
.flow-arrow { color: var(--faint); }
.stage-note { font-size: 13.5px; color: var(--soft); line-height: 1.55; margin: 2px 0 0; }
.stage-note strong { color: var(--ink); font-weight: 600; }
.stage-note a { color: var(--brand); font-weight: 600; }
.review-gate { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.review-gate.review-gate-on { border-color: var(--brand); background: var(--brand-soft); }
.review-gate label { font-weight: 600; font-size: 13px; }
.review-gate label small { font-weight: 400; color: var(--faint); }
.pwrow { display: flex; gap: 8px; margin-top: 8px; }
.pwrow input { flex: 1; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 13px; font: inherit; outline: none; background: #fff; }
.pwrow input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pwrow .btn { flex-shrink: 0; }

/* activity */
.act-list { max-height: 300px; overflow-y: auto; }
.act-row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--soft); }
.act-row small { color: var(--faint); white-space: nowrap; }

/* modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(16,14,34,.55); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-backdrop[hidden] { display: none; }
.pmodal { background: #fff; border-radius: 18px; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow); padding: 28px; animation: mIn .2s ease; }
@keyframes mIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; } }
.pmodal h3 { font-family: "Inter", -apple-system, sans-serif; font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.code-big { font-family: monospace; font-size: 30px; font-weight: 700; letter-spacing: .06em; text-align: center; background: var(--brand-soft); color: var(--brand-deep); border-radius: 12px; padding: 18px; margin-bottom: 14px; }
.invite-text { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px; font-size: 12.5px; color: var(--soft); margin-bottom: 6px; }

/* toast */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; border-radius: 99px; padding: 11px 22px; z-index: 300; box-shadow: var(--shadow); }
.toast-bad { background: var(--bad); }

@media (max-width: 860px) {
  .ws { flex-direction: column; }
  .ws-side { width: 100%; position: static; }
  .frow, .frow3, .type-split { grid-template-columns: 1fr; }
  .pmodal-session .fgroup > .checkgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pmodal-session .fgroup > .checkgrid { grid-template-columns: 1fr; }
}