/* ============================================================
   CompanyCard — product UI (app). Pairs with ../assets/styles.css tokens.
   ============================================================ */
body { background: var(--slate-50); }

/* ---------- App bar ---------- */
.app-bar { position: sticky; top: 0; z-index: 50; height: 64px; display: flex; align-items: center;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--slate-100); }
.app-bar .inner { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 20px; display: flex; align-items: center; gap: 14px; }
.app-bar .brand img { height: 28px; display: block; }
.app-bar .brand svg.logo-lockup { height: 28px; width: auto; display: block; }
.app-bar .sp { flex: 1; }
.app-bar .tab { color: var(--slate-600); font-weight: 500; font-size: .94rem; padding: 8px 12px; border-radius: 10px; }
.app-bar .tab:hover, .app-bar .tab.active { color: var(--ink); background: var(--slate-50); }
.app-bar .btn { padding: 9px 16px; }

/* ---------- Card visual (shared) ---------- */
.cc-card { position: relative; background: var(--cc-body, #fff); overflow: hidden; }
.cc-cover { height: 148px; }
.cc-avatar { width: 104px; height: 104px; border-radius: 30px; margin: -54px auto 0; border: 5px solid #fff;
  box-shadow: var(--shadow); display: grid; place-items: center; overflow: hidden; position: relative; z-index: 2;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 2rem; }
.cc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc-id { padding: 14px 24px 0; text-align: center; }
.cc-name { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--cc-name, var(--ink)); line-height: 1.15; }
.cc-title { color: var(--slate-500); margin-top: 4px; font-size: .98rem; }
.cc-tag { color: var(--slate-600); margin-top: 10px; font-size: .95rem; }
.cc-save { margin: 18px 24px 4px; width: calc(100% - 48px); display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--ink); color: #fff; border-radius: var(--r-full); padding: 15px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: .2s; }
.cc-save:hover { background: var(--ink-soft); transform: translateY(-1px); }
.cc-save svg { width: 20px; height: 20px; }
.cc-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 12px 24px 4px; }
.cc-act { width: 50px; height: 50px; border-radius: 15px; background: var(--violet-50); color: var(--indigo-600); display: grid; place-items: center; box-shadow: var(--shadow-xs); transition: .15s; }
.cc-act:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.cc-act svg { width: 22px; height: 22px; }
.cc-fields { padding: 10px 18px 24px; display: grid; gap: 10px; }
.cc-row { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 16px; background: var(--slate-50); transition: .15s; }
.cc-row:hover { background: var(--violet-50); }
.cc-row-ic { width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--indigo-600); display: grid; place-items: center; box-shadow: var(--shadow-xs); flex: 0 0 auto; }
.cc-row-ic svg { width: 20px; height: 20px; }
.cc-row-tx { flex: 1; min-width: 0; }
.cc-row-tx b { display: block; color: var(--ink); font-size: .95rem; }
.cc-row-tx span { color: var(--slate-500); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cc-row-go svg { width: 18px; height: 18px; color: var(--slate-400); }
.cc-empty { padding: 22px; text-align: center; color: var(--slate-400); font-size: .9rem; }

/* ===== Template system: dividers, icon styles, grid, dark ===== */
.cc-divider { position: relative; height: 32px; margin-top: -32px; color: var(--cc-body, #fff); z-index: 1; pointer-events: none; }
.cc-dsvg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* avatar positions */
.av-ring .cc-avatar { border-width: 6px; }
.av-banner .cc-cover { display: flex; align-items: center; justify-content: center; }
.av-banner .cc-avatar { margin: 0; width: 100px; height: 100px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.15); }
.av-banner .cc-id { padding-top: 18px; }
.av-left .cc-avatar { position: absolute; left: 22px; top: 102px; margin: 0; width: 86px; height: 86px; }
.av-left .cc-id { text-align: left; padding: 52px 24px 0; }

/* grid layout (icons + label, tap opens) */
.cc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; padding: 20px 22px 26px; }
.cc-gi { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.cc-gi-ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: var(--violet-50); color: var(--indigo-600); transition: transform .15s, box-shadow .2s; }
.cc-gi:hover .cc-gi-ic { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.cc-gi-ic svg { width: 24px; height: 24px; }
.cc-gi-l { font-size: .8rem; color: var(--slate-600); line-height: 1.25; }

/* icon styles — applied to quick-actions (.cc-act) and grid icons (.cc-gi-ic) */
.ico-round .cc-act, .ico-round .cc-gi-ic { border-radius: 50%; background: var(--ic, var(--cc-accent)); color: #fff; }
.ico-outline .cc-act, .ico-outline .cc-gi-ic { border-radius: 50%; background: transparent; color: var(--ic, var(--cc-accent)); box-shadow: inset 0 0 0 2px var(--ic, var(--cc-accent)); }
.ico-soft .cc-act, .ico-soft .cc-gi-ic { background: color-mix(in srgb, var(--ic, var(--cc-accent)) 13%, #fff); color: var(--ic, var(--cc-accent)); }
.cc-logo { position: absolute; top: 14px; left: 16px; width: 44px; height: 44px; object-fit: contain; z-index: 3; }
.av-banner .cc-logo { top: 12px; left: 50%; transform: translateX(-50%); }

/* dark templates */
.is-dark .cc-name { color: #fff; }
.is-dark .cc-title { color: rgba(255,255,255,.72); }
.is-dark .cc-tag { color: rgba(255,255,255,.82); }
.is-dark .cc-gi-l { color: rgba(255,255,255,.78); }
.is-dark .cc-empty { color: rgba(255,255,255,.5); }
.is-dark .cc-row { background: rgba(255,255,255,.07); }
.is-dark .cc-row-ic { background: rgba(255,255,255,.1); color: #fff; }
.is-dark .cc-row-tx b { color: #fff; }
.is-dark .cc-row-tx span { color: rgba(255,255,255,.6); }
.is-dark .cc-row-go svg { color: rgba(255,255,255,.5); }
.is-dark .cc-save { background: var(--cc-accent); color: #0b0a1f; }
.is-dark .cc-qrcap { color: rgba(255,255,255,.72); }

/* ===== Template gallery (picker) ===== */
.tpl-modal .modal-box { max-width: 760px; text-align: left; padding: 26px; }
.tpl-modal h3 { font-size: 1.3rem; }
.tpl-modal .sub { color: var(--slate-500); font-size: .92rem; margin-top: 4px; margin-bottom: 18px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; max-height: 64vh; overflow: auto; padding: 4px; }
.tpl-card { border: 2px solid var(--slate-200); border-radius: 18px; overflow: hidden; cursor: pointer; background: var(--slate-50); transition: .18s; }
.tpl-card:hover { border-color: var(--indigo-400, #818cf8); transform: translateY(-3px); box-shadow: var(--shadow); }
.tpl-card.on { border-color: var(--indigo-600); }
.tpl-thumb { height: 168px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; background: #fff; }
.tpl-thumb .cc-card { width: 230px; transform: scale(.64); transform-origin: top center; pointer-events: none; }
.tpl-name { padding: 10px 12px; font-weight: 600; font-size: .9rem; color: var(--ink); text-align: center; }

/* ---------- Builder ---------- */
.build { max-width: 1120px; margin: 0 auto; padding: 28px 20px 90px; display: grid; grid-template-columns: 1fr 384px; gap: 34px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--slate-100); border-radius: 20px; box-shadow: var(--shadow-sm); padding: 22px; margin-bottom: 18px; }
.panel h3 { font-size: 1.06rem; margin-bottom: 2px; }
.panel .hint { color: var(--slate-500); font-size: .85rem; margin-bottom: 16px; }
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
label.fl { display: block; font-weight: 600; font-size: .8rem; color: var(--slate-600); margin: 0 0 6px; }
.fl-sub { font-weight: 500; color: var(--slate-400); font-size: .72rem; margin-left: 4px; }
.inp { width: 100%; font-family: inherit; font-size: .95rem; padding: 12px 13px; border: 1px solid var(--slate-200); border-radius: 12px; background: var(--slate-50); color: var(--ink); transition: .15s; }
.inp:focus { outline: none; border-color: var(--indigo-500); background: #fff; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
textarea.inp { resize: vertical; min-height: 64px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sw-btn { width: 40px; height: 40px; border-radius: 12px; cursor: pointer; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--slate-200) inset; transition: .15s; }
.sw-btn:hover { transform: scale(1.06); }
.sw-btn.on { border-color: var(--ink); }
.photo { display: flex; align-items: center; gap: 14px; }
.photo .pv { width: 66px; height: 66px; border-radius: 16px; background: var(--grad-soft); display: grid; place-items: center; overflow: hidden; color: var(--indigo-600); font-weight: 700; font-family: var(--font-display); flex: 0 0 auto; }
.photo .pv img { width: 100%; height: 100%; object-fit: cover; }
.photo .btn { padding: 9px 14px; }
.links-list { display: grid; gap: 12px; margin-bottom: 14px; }
.link-item { border: 1px solid var(--slate-200); border-radius: 14px; padding: 12px; background: var(--slate-50); }
.link-item .top { display: flex; gap: 10px; align-items: center; margin-bottom: 9px; }
.link-item select { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--slate-200); background: #fff; font-family: inherit; font-size: .85rem; color: var(--ink); }
.link-item .rm { margin-left: auto; color: var(--slate-400); background: none; padding: 6px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.link-item .rm:hover { color: #e11d48; background: #fff; }
.link-item .rm svg { width: 18px; height: 18px; }
.btn-add { width: 100%; border: 1.5px dashed var(--slate-300); border-radius: 12px; padding: 12px; color: var(--indigo-600); font-weight: 600; background: #fff; cursor: pointer; transition: .15s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-add:hover { border-color: var(--indigo-500); background: var(--violet-50); }
.btn-add svg { width: 18px; height: 18px; }

/* preview column */
.preview-col { position: sticky; top: 86px; }
.pphone { width: 100%; max-width: 360px; margin-inline: auto; background: linear-gradient(160deg,#1b1930,#0b0a1f); border-radius: 44px; padding: 12px; box-shadow: var(--shadow-lg); }
.pphone .scr { background: #fff; border-radius: 33px; overflow: hidden; min-height: 520px; }
.preview-actions { display: flex; gap: 10px; max-width: 360px; margin: 16px auto 0; }
.preview-actions .btn { flex: 1; }

/* ---------- Dashboard ---------- */
.wrap-app { max-width: 1120px; margin: 0 auto; padding: 28px 20px 90px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.dash-head h1 { font-size: 1.7rem; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 20px; }
.ctile { border: 1px solid var(--slate-100); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); transition: .2s; }
.ctile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ctile .mini { position: relative; padding-bottom: 14px; }
.ctile .mini .mc { height: 64px; }
.ctile .mini .ma { width: 56px; height: 56px; border-radius: 17px; margin: -28px auto 0; border: 3px solid #fff; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; position: relative; z-index: 2; overflow: hidden; }
.ctile .mini .ma img { width: 100%; height: 100%; object-fit: cover; }
.ctile .mini .mt { text-align: center; padding: 8px 14px 0; }
.ctile .mini .mt b { color: var(--ink); font-family: var(--font-display); }
.ctile .mini .mt span { display: block; color: var(--slate-500); font-size: .82rem; }
.ctile .ops { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--slate-100); }
.ctile .ops .btn { flex: 1; padding: 9px; font-size: .85rem; }
.ctile .ops .ic { flex: 0 0 auto; width: 38px; padding: 0; display: grid; place-items: center; }
.ctile .ops .ic svg { width: 17px; height: 17px; }
.empty-state { text-align: center; padding: 76px 20px; }
.empty-state .em-ic { width: 76px; height: 76px; border-radius: 22px; background: var(--grad-soft); color: var(--indigo-600); display: grid; place-items: center; margin: 0 auto 20px; }
.empty-state .em-ic svg { width: 36px; height: 36px; }
.empty-state h2 { margin-bottom: 8px; }
.empty-state p { color: var(--slate-500); max-width: 380px; margin: 0 auto 22px; }

/* ---------- Viewer ---------- */
.viewer { min-height: 100vh; padding: 30px 18px 64px;
  background: radial-gradient(720px 380px at 50% -6%, rgba(139,92,246,.16), transparent 60%), var(--slate-50); }
.viewer .wrap { max-width: 420px; margin: 0 auto; }
.cc-shell { border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.viewer .qr-card { margin-top: 18px; background: #fff; border-radius: 22px; box-shadow: var(--shadow-sm); padding: 22px; text-align: center; }
.viewer .qr-card h3 { font-size: 1.05rem; }
.viewer .qr-card p { color: var(--slate-500); font-size: .88rem; margin-top: 3px; }
.qrbox { display: grid; place-items: center; }
.qrbox img, .qrbox canvas { display: block; border-radius: 8px; }
.cc-qr-fallback { color: var(--slate-400); font-size: .85rem; padding: 30px; }
.viewer .made { margin-top: 20px; text-align: center; }
.viewer .made a { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Share modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(11,10,31,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-box { background: #fff; border-radius: 24px; max-width: 420px; width: 100%; padding: 28px; text-align: center; box-shadow: var(--shadow-lg); position: relative; }
.modal-box h3 { font-size: 1.25rem; }
.modal-box .sub { color: var(--slate-500); font-size: .9rem; margin-top: 4px; }
.modal-box .qrbox { width: 192px; height: 192px; margin: 18px auto; padding: 12px; background: #fff; border: 1px solid var(--slate-200); border-radius: 18px; }
.share-link { display: flex; gap: 8px; margin-top: 6px; }
.share-link .inp { font-size: .85rem; }
.modal-x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--slate-100); color: var(--slate-600); display: grid; place-items: center; cursor: pointer; }
.modal-x:hover { background: var(--slate-200); }
.modal-x svg { width: 18px; height: 18px; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--r-full); font-weight: 600; font-size: .9rem; opacity: 0; transition: .3s; z-index: 200; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Cover image upload ---------- */
.cover-pv { width: 100%; height: 88px; border-radius: 12px; background: var(--grad-soft); overflow: hidden; margin-bottom: 10px; display: grid; place-items: center; color: var(--indigo-600); font-size: .85rem; }
.cover-pv img { width: 100%; height: 100%; object-fit: cover; }
.row-btns { display: flex; gap: 10px; }

/* ---------- Shape selector ---------- */
.shape-row { display: flex; gap: 10px; }
.shape-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; cursor: pointer; font-size: .78rem; color: var(--slate-600); transition: .15s; }
.shape-btn:hover { border-color: var(--indigo-500); }
.shape-btn.on { border-color: var(--ink); color: var(--ink); }
.shape-btn .sh { width: 30px; height: 30px; background: var(--grad); }
.shape-btn .sh.circle { border-radius: 50%; }
.shape-btn .sh.rounded { border-radius: 9px; }
.shape-btn .sh.square { border-radius: 3px; }

/* ---------- Switch (QR toggle) ---------- */
.switch-row { display: flex; align-items: center; gap: 14px; }
.switch-row .tx { flex: 1; }
.switch-row .tx b { display: block; color: var(--ink); font-size: .95rem; }
.switch-row .tx > span { color: var(--slate-500); font-size: .82rem; }
.switch { width: 50px; height: 28px; border-radius: var(--r-full); background: var(--slate-200); position: relative; cursor: pointer; flex: 0 0 auto; transition: background .2s; }
.switch.on { background: var(--indigo-500); }
.switch .kn { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform .2s; }
.switch.on .kn { transform: translateX(22px); }

/* ---------- In-card QR block ---------- */
.cc-qrblock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 24px 24px; }
.cc-qrbox { width: 148px; height: 148px; padding: 9px; background: #fff; border: 1px solid var(--slate-200); border-radius: 16px; display: grid; place-items: center; }
.cc-qrbox img, .cc-qrbox canvas { display: block; width: 100% !important; height: 100% !important; border-radius: 6px; }
.cc-qrcap { color: var(--slate-500); font-size: .82rem; font-weight: 600; }

/* ---------- Cropper ---------- */
.crop-box { background: #fff; border-radius: 24px; padding: 24px; width: 100%; max-width: 396px; text-align: center; box-shadow: var(--shadow-lg); }
.crop-box h3 { font-size: 1.15rem; margin-bottom: 16px; }
.crop-stage { position: relative; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #0b0a1f; cursor: grab; touch-action: none; user-select: none; }
.crop-stage:active { cursor: grabbing; }
.crop-img { position: absolute; top: 0; left: 0; max-width: none; -webkit-user-drag: none; user-select: none; }
.crop-ovl { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.crop-ovl.round { border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 0 0 2000px rgba(11,10,31,.4); }
.crop-zoom { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--slate-500); font-weight: 600; }
.crop-range { flex: 1; }
.crop-actions { display: flex; gap: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .build { grid-template-columns: 1fr; }
  .preview-col { position: static; order: -1; }
  .pphone { max-width: 330px; }
}
@media (max-width: 520px) {
  .grid2 { grid-template-columns: 1fr; }
  .app-bar .tab.hide-sm { display: none; }
}

/* ============================================================
   V2 CARD & PRODUCT POLISH — ui-ux-pro-max bold upgrade
   ============================================================ */

/* Card shell: deeper, more premium float */
.cc-shell { box-shadow: var(--shadow-xl); }

/* Avatar: layered float + subtle inner ring for depth */
.cc-avatar { box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.5); }

/* Primary save: spring depth, clear active state, focus ring */
.cc-save {
  box-shadow: 0 10px 24px rgba(11,10,31,.22), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) ease, background .2s ease;
}
.cc-save:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cc-save:active { transform: translateY(0) scale(.99); }
.cc-save:focus-visible { outline: none; box-shadow: var(--ring-offset); }

/* Quick-action + grid icons: spring hover + keyboard focus ring */
.cc-act, .cc-gi-ic { transition: transform var(--t) var(--ease-spring), box-shadow var(--t) ease, background .2s ease, color .2s ease; }
.cc-act:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-sm); }
.cc-act:focus-visible { outline: none; box-shadow: var(--ring); }
.cc-gi:focus-visible { outline: none; }
.cc-gi:focus-visible .cc-gi-ic { box-shadow: var(--ring); }

/* Rows: hairline + smooth hover slide + focus ring */
.cc-row { border: 1px solid rgba(15,23,42,.04); transition: background var(--t) ease, transform var(--t) var(--ease-spring); }
.cc-row:hover { transform: translateX(2px); }
.cc-row:focus-visible { outline: none; box-shadow: var(--ring); }
.is-dark .cc-row { border-color: rgba(255,255,255,.07); }

/* QR block: premium frame */
.cc-qrbox { box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(15,23,42,.04); }

/* Builder swatches / shapes: clearer selected state + spring */
.sw-btn, .shape-btn { transition: transform var(--t) var(--ease-spring), border-color .15s ease, box-shadow .2s ease; }
.sw-btn.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.shape-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-xs); }

/* Inputs: hover affordance (focus already styled) */
.inp:hover { border-color: var(--slate-300); }

/* Add-link button: spring */
.btn-add { transition: border-color .15s ease, background .15s ease, transform var(--t) var(--ease-spring); }
.btn-add:hover { transform: translateY(-1px); }

/* Template picker cards: premium lift */
.tpl-card { transition: transform var(--t) var(--ease-spring), border-color .18s ease, box-shadow .2s ease; }
.tpl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tpl-card.on { box-shadow: 0 0 0 1px var(--indigo-600); }

/* Dashboard tiles: premium lift */
.ctile { transition: transform var(--t) var(--ease-spring), box-shadow var(--t) ease; }
.ctile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* App-bar active tab: brand emphasis */
.app-bar .tab { position: relative; transition: color .2s ease, background .2s ease; }
.app-bar .tab.active { background: var(--violet-50); color: var(--indigo-700); }

/* Phone preview frame: premium float */
.pphone { box-shadow: var(--shadow-xl); }

/* Modal: stronger scrim (ui-ux-pro-max: 40–60% black) */
.modal { background: rgba(11,10,31,.62); }

@media (prefers-reduced-motion: reduce) {
  .cc-save, .cc-act, .cc-gi-ic, .cc-row, .sw-btn, .shape-btn, .btn-add, .tpl-card, .ctile { transition: none !important; }
  .cc-save:hover, .cc-act:hover, .cc-row:hover, .shape-btn:hover, .btn-add:hover, .tpl-card:hover, .ctile:hover { transform: none !important; }
}

/* ============================================================
   TEAM ROLLOUT — onboarding wizard + team dashboard
   ============================================================ */
.wiz { max-width: 1080px; margin: 0 auto; padding: 26px 20px 40px; }
.wiz-steps { display:flex; align-items:center; max-width:760px; margin:6px auto 30px; }
.wiz-steps .st { display:flex; align-items:center; gap:10px; }
.wiz-steps .dot { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.85rem;
  background:var(--slate-100); color:var(--slate-500); flex:0 0 auto; transition:.25s; }
.wiz-steps .st.on .dot { background:var(--grad); color:#fff; box-shadow:var(--shadow-glow); }
.wiz-steps .st.done .dot { background:var(--indigo-600); color:#fff; }
.wiz-steps .lab { font-size:.86rem; font-weight:600; color:var(--slate-500); white-space:nowrap; }
.wiz-steps .st.on .lab, .wiz-steps .st.done .lab { color:var(--ink); }
.wiz-steps .line { flex:1; height:2px; background:var(--slate-200); border-radius:2px; margin:0 12px; }
.wiz-steps .st.done + .line { background:var(--indigo-500); }
@media(max-width:680px){ .wiz-steps .lab{ display:none; } .wiz-steps .line{ margin:0 6px; } }

.wiz-card { background:#fff; border:1px solid var(--slate-100); border-radius:22px; box-shadow:var(--shadow-sm); padding:26px; }
.wiz-card h2 { font-size:1.4rem; }
.wiz-card .hint { color:var(--slate-500); margin-top:4px; margin-bottom:20px; }
.wiz-2col { display:grid; grid-template-columns: 1fr 326px; gap:28px; align-items:start; }
@media(max-width:860px){ .wiz-2col{ grid-template-columns:1fr; } }

.src-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:620px){ .src-grid{ grid-template-columns:1fr; } }
.src-card { text-align:left; border:1.5px solid var(--slate-200); border-radius:16px; padding:18px; background:#fff; cursor:pointer;
  display:flex; gap:14px; align-items:flex-start; transition:transform .18s var(--ease-spring), border-color .15s, box-shadow .2s; width:100%; }
.src-card:hover { border-color:#818cf8; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.src-card.on { border-color:var(--indigo-600); box-shadow:0 0 0 1px var(--indigo-600), var(--shadow-sm); }
.src-card .ic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto; background:var(--slate-50); }
.src-card .ic img { width:26px; height:26px; }
.src-card .ic svg { width:24px; height:24px; color:var(--indigo-600); }
.src-card .tx b { font-family:var(--font-display); font-size:1.02rem; color:var(--ink); display:block; }
.src-card .tx p { font-size:.85rem; color:var(--slate-500); margin-top:3px; }
.src-card .chk2 { margin-left:auto; width:22px; height:22px; border-radius:50%; border:2px solid var(--slate-300); flex:0 0 auto; display:grid; place-items:center; color:#fff; align-self:center; }
.src-card.on .chk2 { background:var(--indigo-600); border-color:var(--indigo-600); }
.src-card .chk2 svg { width:13px; height:13px; opacity:0; }
.src-card.on .chk2 svg { opacity:1; }
.src-panel { margin-top:20px; }
.src-panel[hidden]{ display:none; }

.dropzone { border:2px dashed var(--slate-300); border-radius:16px; padding:34px 20px; text-align:center; background:var(--slate-50); transition:.18s; cursor:pointer; }
.dropzone:hover, .dropzone.drag { border-color:var(--indigo-500); background:var(--violet-50); }
.dropzone .dz-ic { width:52px; height:52px; border-radius:15px; background:#fff; box-shadow:var(--shadow-xs); color:var(--indigo-600); display:grid; place-items:center; margin:0 auto 12px; }
.dropzone .dz-ic svg{ width:26px; height:26px; }
.dropzone b { color:var(--ink); }
.dropzone span { color:var(--slate-500); font-size:.9rem; display:block; margin-top:4px; }

.map-list { display:grid; gap:10px; margin-top:4px; }
.map-row { display:grid; grid-template-columns: 132px 1fr; gap:12px; align-items:center; }
.map-row label { margin:0; font-weight:600; font-size:.86rem; color:var(--slate-600); }
.map-row select { width:100%; padding:10px 12px; border:1px solid var(--slate-200); border-radius:10px; background:#fff; font-family:inherit; font-size:.9rem; color:var(--ink); }

.people { border:1px solid var(--slate-100); border-radius:14px; overflow:hidden; }
.people-bar { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--slate-50); border-bottom:1px solid var(--slate-100); font-size:.88rem; color:var(--slate-600); flex-wrap:wrap; }
.people-bar .grow{ flex:1; }
.people-bar .link { color:var(--indigo-600); font-weight:600; cursor:pointer; background:none; font-size:.86rem; }
.people-scroll { max-height:330px; overflow:auto; }
.p-row { display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--slate-100); }
.p-row:last-child{ border-bottom:none; }
.p-row .av { width:38px; height:38px; border-radius:11px; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.82rem; flex:0 0 auto; font-family:var(--font-display); }
.p-row .tx { flex:1; min-width:0; }
.p-row .tx b { color:var(--ink); font-size:.94rem; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-row .tx span { color:var(--slate-500); font-size:.82rem; }
.p-row .dept { font-size:.74rem; font-weight:600; color:var(--indigo-700); background:var(--violet-50); padding:3px 9px; border-radius:var(--r-full); white-space:nowrap; }
.p-row .cbx { width:22px; height:22px; border-radius:7px; border:2px solid var(--slate-300); display:grid; place-items:center; cursor:pointer; color:#fff; flex:0 0 auto; }
.p-row .cbx.on { background:var(--indigo-600); border-color:var(--indigo-600); }
.p-row .cbx svg{ width:13px; height:13px; opacity:0; } .p-row .cbx.on svg{ opacity:1; }
.p-row .rm { color:var(--slate-400); background:none; padding:6px; cursor:pointer; border-radius:8px; }
.p-row .rm:hover{ color:#e11d48; background:var(--slate-50); }
.p-row .rm svg{ width:17px; height:17px; }

.connect-box { background:#fff; border-radius:22px; max-width:430px; width:100%; padding:0; overflow:hidden; box-shadow:var(--shadow-lg); text-align:left; }
.connect-top { padding:20px 24px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--slate-100); }
.connect-top .glyph{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; }
.connect-top b { font-size:1.05rem; }
.connect-top span{ display:block; color:var(--slate-500); font-size:.82rem; }
.connect-body { padding:18px 24px; }
.scope { display:flex; gap:11px; align-items:flex-start; padding:8px 0; color:var(--slate-600); font-size:.9rem; }
.scope svg{ width:18px; height:18px; color:var(--accent); flex:0 0 auto; margin-top:1px; }
.connect-foot { padding:14px 24px 22px; display:flex; gap:10px; }
.acct { display:flex; align-items:center; gap:10px; background:var(--slate-50); border-radius:12px; padding:10px 12px; margin-bottom:14px; }
.acct .a { width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.8rem; }
.acct b{ font-size:.9rem; color:var(--ink); } .acct span{ font-size:.8rem; color:var(--slate-500); }

.seg { display:flex; gap:6px; background:var(--slate-100); padding:5px; border-radius:14px; }
.seg button { flex:1; padding:11px; border-radius:10px; font-weight:600; font-size:.9rem; color:var(--slate-600); background:none; }
.seg button.on { background:#fff; color:var(--ink); box-shadow:var(--shadow-xs); }

.sum-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 18px; }
@media(max-width:620px){ .sum-grid{ grid-template-columns:1fr; } }
.sum { background:var(--slate-50); border-radius:14px; padding:14px 16px; }
.sum .k { font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--ink); display:flex; align-items:center; gap:8px; }
.sum .k .dotc{ width:14px; height:14px; border-radius:50%; }
.sum .l { color:var(--slate-500); font-size:.84rem; margin-top:4px; }

.prov { text-align:center; padding:26px 10px; }
.prov .bar { height:8px; border-radius:6px; background:var(--slate-100); overflow:hidden; max-width:380px; margin:18px auto 0; }
.prov .bar i { display:block; height:100%; width:0; background:var(--grad); transition:width .4s ease; }
.done-hero { text-align:center; padding:18px 10px; }
.done-hero .big { width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg,#22C55E,#16A34A); color:#fff; display:grid; place-items:center; margin:0 auto 18px; box-shadow:var(--shadow-glow-accent); }
.done-hero .big svg{ width:42px; height:42px; }

.wiz-foot { position:sticky; bottom:16px; z-index:20; margin-top:22px; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--slate-200); border-radius:16px; padding:13px 16px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow); }
.wiz-foot .grow{ flex:1; }
.wiz-foot .muted{ color:var(--slate-500); font-size:.88rem; }

.wiz-preview { position:sticky; top:84px; }
.wiz-phone { width:100%; max-width:290px; margin:0 auto; background:linear-gradient(160deg,#1b1930,#0b0a1f); border-radius:38px; padding:10px; box-shadow:var(--shadow-xl); }
.wiz-phone .scr { background:#fff; border-radius:30px; overflow:hidden; min-height:430px; }
.wiz-preview .cap { text-align:center; color:var(--slate-500); font-size:.82rem; margin-top:12px; }
.lock-badge{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; color:var(--indigo-700); background:var(--violet-50); border:1px solid var(--violet-100); padding:5px 11px; border-radius:var(--r-full); }
.lock-badge svg{ width:13px; height:13px; }

/* team dashboard */
.team-hero { background:var(--grad-ink); color:#fff; border-radius:22px; padding:24px 26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.team-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(420px 200px at 88% 0%, rgba(168,85,247,.38), transparent 60%); }
.team-hero > *{ position:relative; }
.team-hero .logo { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.14); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:#fff; flex:0 0 auto; overflow:hidden; }
.team-hero .logo img{ width:100%; height:100%; object-fit:cover; }
.team-hero h1 { color:#fff; font-size:1.5rem; }
.team-hero .sub { color:rgba(255,255,255,.72); font-size:.92rem; margin-top:2px; }
.team-hero .brandchip { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:6px 12px; border-radius:var(--r-full); font-size:.8rem; font-weight:600; color:#fff; }
.team-hero .brandchip .dotc{ width:12px; height:12px; border-radius:50%; }
.team-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0; }
@media(max-width:680px){ .team-stats{ grid-template-columns:repeat(2,1fr); } }
.tstat { background:#fff; border:1px solid var(--slate-100); border-radius:16px; padding:18px; box-shadow:var(--shadow-xs); }
.tstat .k { font-family:var(--font-display); font-weight:800; font-size:1.8rem; }
.tstat .l { color:var(--slate-500); font-size:.86rem; margin-top:2px; }
.member-table { background:#fff; border:1px solid var(--slate-100); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); }
.mt-head, .m-row { display:grid; grid-template-columns: 2.4fr 1.4fr 1fr 96px; gap:12px; align-items:center; padding:13px 18px; }
.mt-head { background:var(--slate-50); border-bottom:1px solid var(--slate-100); font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.m-row { border-bottom:1px solid var(--slate-100); }
.m-row:last-child{ border-bottom:none; }
.m-row .who { display:flex; align-items:center; gap:12px; min-width:0; }
.m-row .who .av { width:40px; height:40px; border-radius:12px; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:700; font-family:var(--font-display); flex:0 0 auto; }
.m-row .who b{ color:var(--ink); display:block; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-row .who span{ color:var(--slate-500); font-size:.82rem; }
.pill { font-size:.76rem; font-weight:700; padding:4px 11px; border-radius:var(--r-full); display:inline-block; }
.pill.active{ background:#ECFDF5; color:#15803D; }
.pill.invited{ background:var(--violet-50); color:var(--indigo-700); }
.m-row .ops{ display:flex; gap:6px; justify-content:flex-end; }
.m-row .ops .ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--slate-50); color:var(--slate-600); cursor:pointer; }
.m-row .ops .ic:hover{ background:var(--violet-50); color:var(--indigo-600); }
.m-row .ops .ic svg{ width:16px; height:16px; }
@media(max-width:640px){ .mt-head{ display:none; } .m-row{ grid-template-columns:1fr auto; } .m-row .dept-col, .m-row .status-col{ display:none; } }

/* review: per-employee detail + personal links editor */
.p-item { border-bottom:1px solid var(--slate-100); }
.p-item:last-child { border-bottom:none; }
.p-item .p-row { border-bottom:none; }
.p-edit { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--slate-50); color:var(--slate-500); flex:0 0 auto; cursor:pointer; transition:background .15s, color .15s; }
.p-edit:hover { background:var(--violet-50); color:var(--indigo-600); }
.p-edit svg { width:18px; height:18px; transition:transform .2s; }
.p-item.open .p-edit svg { transform:rotate(180deg); }
.p-detail { padding:2px 16px 18px 48px; background:var(--slate-50); }
.p-detail .fl { font-size:.76rem; margin-bottom:5px; }
.p-detail .mini-links { display:grid; gap:8px; margin-top:6px; }
.p-detail .ml-row { display:grid; grid-template-columns:142px 1fr 34px; gap:8px; align-items:center; }
.p-detail .ml-row select, .p-detail .ml-row input { width:100%; padding:9px 11px; border:1px solid var(--slate-200); border-radius:9px; font-family:inherit; font-size:.86rem; background:#fff; color:var(--ink); }
.p-detail .ml-rm { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:none; color:var(--slate-400); cursor:pointer; }
.p-detail .ml-rm:hover { color:#e11d48; background:#fff; }
.p-detail .ml-add { color:var(--indigo-600); font-weight:600; font-size:.86rem; background:none; cursor:pointer; margin-top:10px; }
@media(max-width:560px){ .p-detail{ padding-left:16px; } .p-detail .ml-row{ grid-template-columns:1fr 1fr 34px; } }

/* step 1 designer — Company / Per-employee scope toggles */
.scope-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.scope-toggle { display:inline-flex; background:var(--slate-100); border-radius:var(--r-full); padding:3px; gap:2px; flex:0 0 auto; }
.scope-toggle button { font-size:.73rem; font-weight:600; padding:5px 10px; border-radius:var(--r-full); color:var(--slate-500); white-space:nowrap; cursor:pointer; transition:color .15s, background .15s; }
.scope-toggle button.on { background:#fff; color:var(--indigo-700); box-shadow:var(--shadow-xs); }
.scope-toggle button[data-sc="employee"].on { color:#0E7490; }
.link-item .top select { flex:1; min-width:88px; }
.link-item .top .scope-toggle { flex:0 0 auto; }
.emp-note { font-size:.84rem; color:var(--slate-600); background:var(--slate-50); border:1px dashed var(--slate-300); border-radius:11px; padding:10px 13px; display:flex; align-items:center; gap:9px; }
.emp-note::before { content:""; width:8px; height:8px; border-radius:50%; background:#0E7490; flex:0 0 auto; }

/* employee claim page — locked (company) rows */
.locked-panel { background:linear-gradient(180deg,#fff,var(--slate-50)); }
.locked-panel h3 svg { color:var(--indigo-600); }
.locked-row { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; background:#fff; border:1px solid var(--slate-100); margin-top:8px; }
.locked-row .lr-ic { width:38px; height:38px; border-radius:11px; background:var(--slate-50); color:var(--indigo-600); display:grid; place-items:center; flex:0 0 auto; }
.locked-row .lr-ic svg { width:19px; height:19px; }
.locked-row .lr-tx { flex:1; min-width:0; }
.locked-row .lr-tx b { display:block; color:var(--ink); font-size:.92rem; }
.locked-row .lr-tx span { color:var(--slate-500); font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.locked-row .lr-lock { width:16px; height:16px; color:var(--slate-400); flex:0 0 auto; }

/* ============================================================
   BUILDER CONTROLS — custom colour, colour gallery, icon styles,
   per-link display, brand icon colours
   ============================================================ */

/* ---- Theme colour: custom picker + "see more" ---- */
.theme-tools { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.theme-tool { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--slate-200); border-radius:var(--r-full);
  background:#fff; cursor:pointer; font-size:.82rem; font-weight:600; color:var(--slate-600);
  transition:transform var(--t) var(--ease-spring), border-color .15s ease, color .15s ease; }
.theme-tool:hover { border-color:var(--indigo-500); color:var(--indigo-700); transform:translateY(-1px); }
.theme-tool.custom .dot { width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(15,23,42,.12);
  background:conic-gradient(from 90deg,#ef4444,#f59e0b,#22c55e,#0ea5e9,#6366f1,#a855f7,#ef4444); }
.theme-tool.custom.on { border-color:var(--ink); color:var(--ink); }
.theme-tool.custom.on .dot { box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 1px var(--ink); }
.theme-tool.more svg { width:15px; height:15px; }

/* colour gallery modal */
.color-modal .modal-box { max-width:392px; text-align:left; }
.color-modal h3 { font-size:1.25rem; }
.palette { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:18px 0 2px; }
.palette .sw-btn { width:100%; height:auto; aspect-ratio:1; border-radius:14px; }

/* ---- Icon style selector (4 designs) ---- */
.icostyle-row { display:flex; gap:10px; }
.icostyle-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:13px 6px;
  border:1px solid var(--slate-200); border-radius:14px; background:#fff; cursor:pointer; font-size:.74rem; font-weight:600; color:var(--slate-500);
  transition:transform var(--t) var(--ease-spring), border-color .15s ease, color .15s ease, box-shadow .2s ease; }
.icostyle-btn:hover { border-color:var(--indigo-500); transform:translateY(-2px); box-shadow:var(--shadow-xs); }
.icostyle-btn.on { border-color:var(--ink); color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.ics-pv { width:40px; height:40px; display:grid; place-items:center; }
.ics-pv svg { width:21px; height:21px; }
.ics-pv.soft { border-radius:12px; background:color-mix(in srgb, var(--indigo-600) 13%, #fff); color:var(--indigo-600); }
.ics-pv.solid { border-radius:50%; background:var(--indigo-600); color:#fff; }
.ics-pv.outline { border-radius:50%; background:transparent; color:var(--indigo-600); box-shadow:inset 0 0 0 2px var(--indigo-600); }
.ics-pv.plain { background:transparent; color:var(--indigo-600); }

/* ---- Per-link display toggle (Icon vs Strip) ---- */
.link-item .top { flex-wrap:wrap; }
.link-item .top .rm { margin-left:0; }
.disp-toggle { display:inline-flex; background:var(--slate-100); border-radius:var(--r-full); padding:3px; gap:2px; flex:0 0 auto; margin-left:auto; }
.disp-toggle button { font-size:.72rem; font-weight:600; padding:5px 11px; border-radius:var(--r-full); color:var(--slate-500);
  white-space:nowrap; cursor:pointer; transition:color .15s ease, background .15s ease; }
.disp-toggle button.on { background:#fff; color:var(--indigo-700); box-shadow:var(--shadow-xs); }

/* ---- 4th icon design (plain glyph, no container) + brand colour on strip chips ---- */
.ico-plain .cc-act, .ico-plain .cc-gi-ic { background:transparent; color:var(--ic, var(--cc-accent)); box-shadow:none; }
.ico-plain .cc-act:hover, .ico-plain .cc-gi:hover .cc-gi-ic { box-shadow:none; }
.cc-row-ic { color:var(--ic, var(--cc-accent)); }

/* ---- Save-contact button controls ---- */
#save-opts[hidden] { display:none; }
.save-colors { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.save-colors .sw-btn { width:30px; height:30px; border-radius:10px; }
.save-colors .save-custom { background:conic-gradient(from 90deg,#ef4444,#f59e0b,#22c55e,#0ea5e9,#6366f1,#a855f7,#ef4444); }

/* ============================================================
   FREEMIUM — PRO badges, locks, sign-up, plan chips, checkout
   ============================================================ */

/* PRO badge + per-control lock */
.pro-pill { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; font-family:var(--font-display); font-weight:800;
  font-size:.6rem; letter-spacing:.06em; line-height:1; color:#fff; background:var(--grad); padding:3px 7px; border-radius:var(--r-full);
  box-shadow:0 1px 4px rgba(99,102,241,.35); text-transform:uppercase; }
.pro-pill.sm { font-size:.54rem; padding:2px 6px; }
.pro-pill.lg { font-size:.78rem; padding:5px 12px; letter-spacing:.1em; }
.pro-lock { position:absolute; top:6px; right:6px; z-index:2; font-family:var(--font-display); font-weight:800; font-size:.5rem; letter-spacing:.05em;
  color:#fff; background:var(--grad); padding:2px 5px; border-radius:var(--r-full); box-shadow:0 1px 3px rgba(99,102,241,.4); text-transform:uppercase; }
.icostyle-btn { position:relative; }
body.is-pro .pro-pill, body.is-pro .pro-lock { display:none; }

/* sub-toggle (branded QR) */
.switch-row.sub { margin-top:12px; padding-top:12px; border-top:1px dashed var(--slate-200); }
.switch-row.sub[hidden] { display:none; }

/* live "uses Pro" note under the preview */
.pro-note { display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:11px 13px; border-radius:13px; font-size:.84rem; color:var(--indigo-800,#3730a3);
  background:var(--violet-50); border:1px solid var(--violet-100); line-height:1.4; }
.pro-note[hidden] { display:none; }
.pro-note .pro-pill { flex:0 0 auto; margin-top:1px; }

/* sign-up modal */
.btn-google { gap:10px; border:1px solid var(--slate-200)!important; background:#fff; color:var(--ink)!important; font-weight:600; }
.btn-google:hover { background:var(--slate-50); border-color:var(--slate-300)!important; }
.or { display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--slate-400); font-size:.82rem; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--slate-200); }
.su-fine { color:var(--slate-400); font-size:.76rem; margin-top:14px; }
#signup-modal .btn-block, #signup-modal .field { margin-bottom:0; }
#signup-modal .modal-box { max-width:392px; }

/* dashboard account chip + upgrade */
.plan-chip { display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:800; font-size:.66rem; letter-spacing:.08em;
  color:#fff; background:var(--grad); padding:5px 11px; border-radius:var(--r-full); text-transform:uppercase; box-shadow:var(--shadow-xs); }
.btn-upgrade { border:1px solid var(--violet-100)!important; background:var(--violet-50); color:var(--indigo-700)!important; font-weight:700; }
.btn-upgrade:hover { background:var(--violet-100); }

/* ---------- Checkout page ---------- */
.co-secure { display:inline-flex; align-items:center; gap:7px; color:var(--slate-500); font-size:.86rem; font-weight:600; }
.co-secure svg { width:16px; height:16px; }
.co-wrap { max-width:1000px; margin:0 auto; padding:22px 20px 80px; }
.co-back { display:inline-flex; align-items:center; gap:6px; color:var(--slate-500); font-weight:600; font-size:.9rem; margin-bottom:18px; }
.co-back:hover { color:var(--ink); }
.co-back svg { width:18px; height:18px; }
.co-grid { display:grid; grid-template-columns:1fr 400px; gap:42px; align-items:start; }
@media(max-width:860px){ .co-grid{ grid-template-columns:1fr; gap:28px; } }
.co-head { margin-bottom:22px; }
.co-head .pro-pill.lg { margin-bottom:12px; }
.co-head h1 { font-size:1.9rem; line-height:1.1; }
.co-head p { color:var(--slate-500); margin-top:8px; font-size:.98rem; }
.co-head p b { color:var(--ink); }
.co-seg { max-width:360px; margin-bottom:20px; }
.co-seg .save { font-size:.66rem; font-weight:800; color:#15803D; background:#ECFDF5; padding:2px 7px; border-radius:var(--r-full); margin-left:6px; }
.co-price { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.co-price .amt { display:flex; align-items:baseline; font-family:var(--font-display); font-weight:800; color:var(--ink); }
.co-price .cur { font-size:1.4rem; margin-right:2px; }
.co-price .amt #co-amt { font-size:3.1rem; line-height:1; }
.co-price .per { font-size:1rem; color:var(--slate-500); font-weight:600; margin-left:6px; }
.co-bill { color:var(--slate-500); font-size:.9rem; }
.co-feats { display:grid; gap:12px; margin-top:6px; }
.co-feats li { display:flex; align-items:flex-start; gap:11px; list-style:none; }
.co-feats li svg { width:21px; height:21px; flex:0 0 auto; color:#16A34A; margin-top:1px; }
.co-feats li span { font-size:.92rem; color:var(--slate-600); }
.co-feats li b { display:block; color:var(--ink); font-weight:600; font-size:.95rem; }
.co-feats li.hot span { color:var(--indigo-700); }
.co-feats li.hot b { color:var(--indigo-700); }

.co-card { background:#fff; border:1px solid var(--slate-100); border-radius:20px; box-shadow:var(--shadow); padding:24px; position:sticky; top:84px; }
.co-summary { border-bottom:1px solid var(--slate-100); padding-bottom:16px; margin-bottom:18px; }
.co-summary .row { display:flex; justify-content:space-between; align-items:center; font-size:.92rem; color:var(--slate-600); margin-bottom:8px; }
.co-summary .row:last-child { margin-bottom:0; }
.co-summary .row b { color:var(--ink); font-weight:700; }
.co-summary .row.muted { color:var(--slate-400); font-size:.82rem; }
.inp-icon { position:relative; }
.inp-icon svg { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:22px; height:22px; color:var(--slate-300); pointer-events:none; }
.co-pay { margin-top:6px; position:relative; }
.co-pay.loading .lbl { opacity:0; }
.co-pay.loading::after { content:""; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:co-spin .7s linear infinite; }
@keyframes co-spin { to { transform:rotate(360deg); } }
.co-fine { display:flex; align-items:flex-start; gap:7px; color:var(--slate-400); font-size:.76rem; margin-top:12px; line-height:1.4; }
.co-fine svg { width:14px; height:14px; flex:0 0 auto; margin-top:1px; }
.co-later { display:block; width:100%; text-align:center; margin-top:14px; color:var(--slate-500); font-weight:600; font-size:.9rem; background:none; cursor:pointer; padding:8px; }
.co-later:hover { color:var(--ink); }
@media(max-width:860px){ .co-card{ position:static; } }