/* =====================================================================================
   UPCLIENT ADMIN - LAYOUT (LEFT BAR, TOP BAR, CONTENT), CARDS, FORMS, TABLES, BUTTONS, SIGN-IN PAGES
   THE CORPORATE LOOK: DEEP NAVY #13213a FOR HEADINGS AND MAIN BUTTONS, THE BRAND RED #ff2d60 (--brand) FOR "WHERE YOU ARE" FILLS (ACTIVE TAB, MENU MARKER, YOUR CIRCLE) AND THE DEEPER #d81f52 (--pink) FOR SMALL RED TEXT AND ICONS (READS BETTER),
   NAVY FOR WHAT YOU'VE CHOSEN, QUIET GREY BACKGROUNDS. INTER (TEXT) + INTER TIGHT (HEADINGS). EVERY RULE IS SET ONCE HERE - NO OVERRIDE FILES.
   DARK MODE: css/theme-dark.css (ONLY WHILE html[data-scheme=dark]). THE PUBLIC WEBSITE: css/public.css; THE SIGNATURE GENERATOR: + css/site.css.
   ===================================================================================== */
:root { --card: #ffffff; --green: #17a05d; --green-soft: #e7f6ee; --amber: #b26b00; --amber-soft: #fff4e0; --red: #c4223f; --red-soft: #fdecef; --radius: 12px; --left: 240px; --font: 'Inter', Arial, Helvetica, sans-serif; --font-head: 'Inter Tight', 'Inter', Arial, Helvetica, sans-serif; --cream: #f6f4ef; --ink: #13213a; --ink-2: #46526a; --muted: #7a8396; --line: #e4e6eb; --bg: #f5f6f8; --indigo: #1f3a68; --indigo-soft: #ebeff6; --pink: #d81f52; --pink-dark: #b8173f; --brand: #ff2d60; --shadow: 0 1px 2px rgba(19,33,58,.05), 0 1px 3px rgba(19,33,58,.04); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; font: 14px/1.2 var(--font); }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; margin: 0 0 12px; letter-spacing: -.015em; font-weight: 600; }
h1 { font-size: 23px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
b, strong { font-weight: 600; }
p { margin: 0 0 12px; }
code { background: #f0eff5; padding: 1px 6px; border-radius: 5px; font-size: 11px; word-break: break-all; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
/* ---------- LEFT BAR ---------- */
.left-company { margin: 0 14px 12px; padding: 11px 13px; border-radius: 10px; font-size: 11px; background: var(--bg); border: 1px solid var(--line); }
.left-company b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.left-company span { color: var(--ink-2); }
.left-company a { color: var(--pink); font-size: 10.5px; font-weight: 600; }
.left-menu li a:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.left-menu li a.on { background: var(--bg); color: var(--ink); font-weight: 600; }
.left-menu li a.on i { color: var(--pink); }
.left-menu li a.on:before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand); }
.left-menu .left-head { padding: 16px 12px 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.left-mfa b { display: block; color: var(--ink); margin-bottom: 4px; }
.left-mfa .btn { margin-top: 8px; }
.left-mfa .link { color: var(--ink-2); font-size: 10px; margin-left: 8px; cursor: pointer; transform: translateY(4px); display: inline-block; }
/* ---------- MAIN + TOP BAR ---------- */
#main-bar { margin-left: var(--left); min-height: 100vh; }
#top-bar { position: sticky; top: 0; z-index: 20; height: 62px; display: flex; align-items: center; gap: 14px; padding: 0 28px; background: rgba(245,245,248,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
#top-bar .top-title { font-size: 16px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
/* A PAGE'S OWN BUTTONS ON THE RIGHT OF THE TOP BAR (admin/bar-top.php $topActions) - e.g. Save design, ALWAYS IN VIEW */
#top-bar .top-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.field .hint.url-err { color: var(--red); }
@media (max-width: 700px) { .ed-stage-actions .ed-dirty { display: none !important; } }
#menu-toggle { display: none; background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--ink); padding: 6px; }
.top-user { position: relative; }
.top-user-btn { display: flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); padding: 4px; border-radius: 30px; }
.top-user-btn .avatar { background: var(--brand); } /* YOUR OWN CIRCLE (TOP RIGHT) IN THE BRAND RED - THE TEAM LIST'S STAY NAVY */
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--indigo); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; font-size: 20px; }
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }
.menu-pop { position: absolute; right: 0; top: 46px; min-width: 210px; background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(35,31,32,.16); padding: 6px; display: none; }
.menu-pop.open { display: block; }
.menu-pop .menu-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 11px; }
.menu-pop .menu-who b { display: block; font-size: 12px; }
.menu-pop a { display: block; padding: 8px 10px; border-radius: 7px; color: var(--ink); font-size: 12px; }
.menu-pop a:hover { background: var(--bg); text-decoration: none; }
#content { padding: 28px; max-width: 1440px; } /* ONE WIDTH FOR EVERY ADMIN PAGE (PARAGRAPHS KEEP THEIR OWN READING WIDTH, e.g. .page-intro) */
/* ---------- CARDS / GRID ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: 22px; margin: 0 0 18px; box-shadow: none; border: 1px solid var(--line); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { font-size: 26px; font-weight: 800; line-height: 1.1; }
.stat-label { color: var(--muted); font-size: 12.5px; }
.page-intro { color: var(--ink-2); margin: -4px 0 20px; max-width: 760px; font-size: 14px; font-weight: 600; }
/* ---------- BUTTONS ---------- */
.btn:hover { text-decoration: none; background: #1c2d4c; }
.btn:disabled { opacity: 1; background: #d5d9e1; color: #fff; box-shadow: none; cursor: not-allowed; }
.btn.alt { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #cfd3dc; }
.btn.alt:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.btn.dark { background: var(--indigo); }
.btn.dark:hover { background: #18305a; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #d5d9e1; }
.btn.ghost:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.danger { background: #fff; color: var(--red); box-shadow: inset 0 0 0 1.5px #f1b9c4; }
.btn.danger:hover { background: var(--red-soft); }
.btn.sm { border-radius: 7px; font-size: 12.5px; padding: 7px 12px; }
.btn.block { width: 100%; }
.btn.google { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #d8d7e0; font-weight: 600; }
.btn.google:hover { background: #fafafa; }
.btn.google img { width: 18px; height: 18px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* BUTTONS LINE UP BY THEIR MIDDLE (NOT THE TEXT BASELINE, WHICH AN ICON SHIFTS); A <label class="btn"> (FILE UPLOADS) INSIDE A .field KEEPS THE BUTTON LOOK */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; padding: 9px 16px; font: 600 14px/1.2 var(--font); cursor: pointer; color: #fff; text-decoration: none; transition: background .15s, box-shadow .15s; white-space: nowrap; vertical-align: middle; background: var(--ink); border-radius: 8px; letter-spacing: 0; }
[hidden] { display: none !important; }
/* ALSO FOR .btn (inline-flex) AND OTHER STYLED ELEMENTS */
.field label.btn { display: inline-flex; margin: 0; font-weight: 600; }
.field label.btn:not(.sm) { font-size: 13px; }
.link { color: var(--indigo); cursor: pointer; }
/* ---------- FORMS ---------- */
.field { margin: 0 0 14px; }
.field label { display: block; font-weight: 600; margin: 0 0 5px; font-size: 13px; }
.field label.check { display: flex; font-weight: 400; } /* A TICK BOX INSIDE A FIELD - THE BOX BESIDE ITS TEXT, NOT A BLOCK LABEL */
.field .hint { color: var(--muted); margin-top: 4px; font-size: 11.5px; line-height: 1.2; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #d9d8e1; border-radius: 6px; font: 13px var(--font); color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(55,57,148,.14); }
input.err, select.err, textarea.err { border-color: var(--red); }
textarea { min-height: 70px; resize: vertical; }
input[type=color] { width: 54px; height: 40px; padding: 3px; border: 1px solid #d9d8e1; border-radius: 9px; background: #fff; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check { display: flex; gap: 7px; align-items: flex-start; margin: 0 0 10px; cursor: pointer; }
/* ON / OFF SWITCHES - A CHECKBOX WITH class="switch" (e.g. Signature design -> Banner) */
input[type=checkbox].switch { width: 40px; height: 22px; border-radius: 22px; border: 0; background: #cfd4dd; position: relative; flex: none; }
input[type=checkbox].switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(19,33,58,.25); transition: transform .18s; }
input[type=checkbox].switch:checked { background: var(--ink); background-image: none; }
input[type=checkbox].switch:checked::after { transform: translateX(18px); }
.ed-switch-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fcfcfd; cursor: pointer; margin: 0 0 14px; }
.ed-switch-row > span { display: flex; flex-direction: column; gap: 2px; }
.ed-switch-row small { color: var(--muted); font-size: 12px; }
.comp-box { margin: 0 0 18px; } .comp-box .badge { margin-left: 6px; font-size: 10.5px; vertical-align: 1px; } /* admin/plan - AN UPCLIENT ADMIN'S COMPLIMENTARY SWITCH */
.ed-ban-info .note { margin-bottom: 10px; }
#ed:has(input[data-bind="design.banner_on"]:not(:checked)) .ed-ban-info, #ed:has(input[data-bind="design.banner_on"]:not(:checked)) #ed-ban-on { display: none; } /* THE BANNER SWITCH OFF: NOTHING ELSE TO SET */
/* CHECKBOXES - OUR OWN: 18px, ROUNDED, NAVY WITH A WHITE TICK WHEN ON. CENTRED ON THE LABEL'S FIRST LINE AT ANY TEXT SIZE (1lh = ONE LINE OF THE LABEL) */
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; flex: none; margin: 0; border: 1.5px solid #b9c0cc; border-radius: 5px; background: var(--card) center / 12px 12px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; }
input[type=checkbox]:hover { border-color: var(--ink); }
input[type=checkbox]:checked { background-color: var(--ink); border-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(19,33,58,.18); }
input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
.check input[type=checkbox] { margin-top: calc((1lh - 18px) / 2); }
.check input:not([type=checkbox]) { margin-top: 4px; accent-color: var(--indigo); }
.radio-cards { display: grid; gap: 10px; }
.radio-card { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.radio-card input { margin-top: 4px; accent-color: var(--indigo); }
.radio-card:has(input:checked) { border-color: var(--indigo); background: var(--indigo-soft); }
.radio-card b { display: block; }
/* ---------- MESSAGES / BADGES ---------- */
.note { padding: 11px 14px; border-radius: 9px; margin: 0 0 14px; font-size: 12px; }
.note.ok { background: var(--green-soft); color: #11663d; }
.note.bad { background: var(--red-soft); color: #9b1c35; }
.note.warn { background: var(--amber-soft); color: #7a4a00; }
.note.info { background: var(--indigo-soft); color: #2b2d7a; }
.trial-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; } .trial-bar > i { font-size: 18px; } .trial-bar > span { flex: 1; } .trial-bar .btn { flex: none; } /* THE BUSINESS TRIAL (admin/layout-top) */
@media (max-width: 640px) { .trial-bar { flex-wrap: wrap; } }
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-weight: 600; background: #efeef4; color: var(--ink-2); white-space: nowrap; font-size: 11.5px; }
.badge.ok { background: var(--green-soft); color: #11663d; }
.badge.warn { background: var(--amber-soft); color: #7a4a00; }
.badge.bad { background: var(--red-soft); color: #9b1c35; }
.badge.indigo { background: var(--indigo-soft); color: var(--indigo); }
#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(30px); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 12px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 100; max-width: calc(100% - 32px); }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.bad { background: var(--red); }
/* ---------- TABLES ---------- */
.table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th { text-align: left; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 11px; }
table.list td { padding: 11px 10px; border-bottom: 1px solid #f0eff4; vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr.click { cursor: pointer; }
table.list tr.click:hover td { background: #fafafc; }
.who { display: flex; align-items: center; gap: 10px; }
.who b { display: block; font-weight: 600; }
.who span { color: var(--muted); font-size: 11px; }
/* ---------- MODAL ---------- */
dialog.modal { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100% - 32px)); box-shadow: 0 20px 60px rgba(35,31,32,.3); }
dialog.modal.wide { width: min(760px, calc(100% - 32px)); }
dialog.modal::backdrop { background: rgba(35,31,32,.45); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 15px; }
.modal-close { background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--muted); line-height: 1; }
.modal-body { padding: 20px 22px; max-height: 70vh; overflow-y: auto; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* ---------- SIGNATURE PREVIEW / INSTALL ---------- */
.sig-preview { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: #fff; overflow-x: auto; }
#sig-show { font: 12px/1.3 Arial, Helvetica, sans-serif; color: #222; } /* LIKE AN EMAIL - THE SIGN-OFF HAS NO FONT OF ITS OWN */
.sig-preview .mail-fake { color: var(--muted); font-size: 11px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px dashed var(--line); }
.install { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); }
.install:first-of-type { border-top: 0; padding-top: 4px; }
.install-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; background: var(--indigo-soft); color: var(--indigo); }
.install-body { flex: 1; min-width: 0; }
.install-body h3 { margin: 2px 0 4px; }
.steps { margin: 8px 0 0; padding-left: 20px; font-size: 12px; }
.steps li { margin-bottom: 5px; }
.qr svg { width: 150px; height: 150px; display: block; }
.copy-box { display: flex; gap: 8px; align-items: center; }
.copy-box input { font-family: Consolas, monospace; font-size: 11px; }
/* REFER A BUSINESS (admin/referrals) - HOW IT WORKS, NUMBERED */
.ref-steps { margin: 0 0 12px; padding-left: 20px; }
.ref-steps li { margin-bottom: 8px; font-size: 13px; line-height: 1.2; }
/* ---------- CHECKLIST (HOME) ---------- */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.checklist li:first-child { border-top: 0; }
.checklist .tick { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #d9d8e1; display: flex; align-items: center; justify-content: center; flex: none; font-size: 11px; color: #fff; }
.checklist li.done .tick { background: var(--green); border-color: var(--green); }
.checklist li.done .ck-title { color: var(--muted); text-decoration: line-through; }
.checklist .ck-body { flex: 1; }
.checklist .ck-title { font-weight: 600; }
.checklist .ck-text { font-size: 12px; color: var(--muted); }
/* ---------- HOME DASHBOARD (admin/home - lib/functions-dashboard.php): THE SET-UP RING, FIVE NUMBERS, THE ACTIVITY CHART, THE SIDE CARDS ---------- */
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px 18px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-head .page-intro { margin-bottom: 0; }
.setup-ring { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 40px; background: var(--card); cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.setup-ring:hover { border-color: var(--ink); }
.setup-ring-dial { width: 48px; height: 48px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: radial-gradient(var(--card) 58%, transparent 60%), conic-gradient(var(--brand) calc(var(--p) * 1%), var(--line) 0); }
.setup-ring-dial b { font-size: 12.5px; }
.setup-ring-text { display: flex; flex-direction: column; gap: 2px; }
.setup-ring-text small { color: var(--muted); font-size: 12px; }
.setup-ring > i { color: var(--muted); font-size: 12px; transition: transform .2s; }
.setup-ring[aria-expanded="true"] > i { transform: rotate(180deg); }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0 0 18px; }
.dash-kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dash-kpi-top { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.dash-kpi-top i { color: var(--m); font-size: 14px; width: 16px; text-align: center; }
.dash-kpi-num { font: 600 26px/1.1 var(--font-head); letter-spacing: -.02em; }
.dash-kpi-num em { font: 600 12px var(--font); font-style: normal; padding: 2px 7px; border-radius: 20px; vertical-align: 4px; letter-spacing: 0; }
.dash-kpi-num em.up { background: var(--green-soft); color: #11663d; }
.dash-kpi-num em.down { background: var(--red-soft); color: #9b1c35; }
.dash-spark { display: block; width: 100%; height: 30px; }
.dash-kpi-foot { color: var(--muted); font-size: 11.5px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-main .ed-chips a { padding: 7px 13px; border-radius: 20px; font: 600 11px var(--font); color: var(--ink-2); text-decoration: none; }
.dash-main .ed-chips a.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(35,31,32,.15); }
.dash-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 10px; }
.dash-legend button { display: inline-flex; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; background: none; padding: 4px 0 6px; font: 600 12.5px var(--font); color: var(--muted); cursor: pointer; }
.dash-legend button.on { color: var(--ink); border-bottom-color: var(--m); }
.dash-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--m); }
.dash-chart { display: block; width: 100%; height: auto; }
.dash-chart .dash-gl { stroke: var(--line); stroke-width: 1; }
.dash-chart .dash-lab { fill: var(--muted); font: 11px var(--font); }
.dash-chart .dash-hit { fill: transparent; cursor: default; }
.dash-chart .dash-hit:hover { fill: rgba(19,33,58,.12); }
.dash-locked { position: relative; }
.dash-locked .dash-chart { filter: blur(3px); opacity: .55; }
.dash-locked-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px; }
.dash-locked-msg span { color: var(--ink-2); font-size: 13px; max-width: 360px; line-height: 1.4; }
.dash-locked-msg .btn { margin-top: 6px; }
.dash-list, .dash-feed, .dash-top { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.35; }
.dash-list li:first-child { border-top: 0; padding-top: 0; }
.dash-list li > i { width: 18px; text-align: center; flex: none; }
.dash-list li > span { flex: 1; min-width: 0; }
.dash-list li.t-warn > i { color: var(--amber); }
.dash-list li.t-bad > i { color: var(--red); }
.dash-try-item { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0 -12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.dash-try-item:hover { background: var(--bg); text-decoration: none; }
.dash-try-item > i:first-child { width: 36px; height: 36px; border-radius: 10px; background: var(--indigo-soft); color: var(--indigo); display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.dash-try-item span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-try-item small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.dash-try-item > i:last-child { color: var(--muted); font-size: 12px; }
.dash-feed li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dash-feed li:first-child { border-top: 0; padding-top: 0; }
.dash-feed li > i { width: 18px; text-align: center; color: var(--indigo); flex: none; }
.dash-feed li > span { flex: 1; min-width: 0; }
.dash-feed small { color: var(--muted); white-space: nowrap; font-size: 12px; }
.dash-top li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.dash-top li:first-child { border-top: 0; padding-top: 0; }
.dash-top li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-top small { color: var(--muted); font-size: 12px; }
.dash-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--indigo-soft); color: var(--indigo); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.dash-sig { overflow-x: auto; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
/* CAMPAIGNS: THE ALWAYS-ON BANNERS (admin/campaigns) AND THE SIGNATURE'S BANNER SPOTS (lib/editor-ui.php - Signature design -> Banner) */
.ao-rows { display: flex; flex-direction: column; }
.ao-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.ao-row:first-child { border-top: 0; padding-top: 0; }
.ao-row:last-child { padding-bottom: 0; }
.ao-pic { width: 180px; flex: none; aspect-ratio: 4 / 1; border-radius: 8px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); border: 1px solid var(--line); }
.ao-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ao-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ao-text .small { line-height: 1.35; }
@media (max-width: 700px) { .ao-row { flex-wrap: wrap; } .ao-pic { width: 100%; } }
/* BANNERS (admin/campaigns) - ONE ROW PER BANNER: PICTURE, NAME AND WHEN, STATUS, CLICKS, ACTIONS */
.ban-list { display: flex; flex-direction: column; }
.ban-row { display: flex; align-items: center; gap: 16px; padding: 12px 10px; margin: 0 -10px; border-radius: 10px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.ban-row:first-child { border-top: 0; }
.ban-row:hover { background: var(--bg); text-decoration: none; }
.ban-row .ao-pic { width: 160px; }
.ban-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ban-text small { color: var(--muted); font-size: 12.5px; }
.ban-clicks { width: 80px; text-align: right; font-size: 12.5px; color: var(--muted); }
.ban-clicks b { color: var(--ink); font-size: 14px; }
.ban-acts { display: flex; gap: 4px; }
@media (max-width: 760px) { .ban-row { flex-wrap: wrap; } .ban-row .ao-pic { width: 100%; } .ban-clicks { width: auto; text-align: left; } }
.ed-spot { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 0 10px; background: #fcfcfd; }
.ed-spot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ed-spot-pic { width: 100%; }
/* ---------- SIGN-IN PAGES ---------- */
/* THE ORIGINAL UPCLIENT HERO: CREAM, THE ILLUSTRATION BOTTOM RIGHT, DARK LOGO AND BIG BOLD HEADING */
body.auth { background: #fff; min-height: 100vh; display: flex; }
.auth-side { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: 40px 56px; color: var(--ink); position: relative; background: linear-gradient(180deg, rgba(19,33,58,.5) 0, rgba(19,33,58,0) 22%), var(--scene, url('../img/people/signin.jpg?v=6')) var(--scene-pos, 32% center) / cover no-repeat; }
.auth-side img { height: 40px; margin-bottom: 9vh; align-self: flex-start; }
.auth-side .auth-home { align-self: flex-start; display: block; margin-bottom: 9vh; }
.auth-side .auth-home img { display: block; margin: 0; }
/* THE LOGO GOES BACK TO THE WEBSITE */
.auth-side h1 { font-size: 44px; line-height: 1.02; max-width: 520px; margin-bottom: 18px; letter-spacing: -.01em; }
.auth-side h1 span { color: var(--pink); }
.auth-side p { color: var(--ink-2); font-size: 16px; max-width: 460px; }
/* THE SIGN-IN SCREENS' FIELDS - 17px LIKE THE PUBLIC SITE (PHONES DON'T ZOOM IN WHEN ONE IS TAPPED) */
.auth .auth-main input:not([type=checkbox]):not([type=radio]), .auth .auth-main select, .auth .auth-main textarea { font-size: 17px; padding: 12px 14px; }
.auth-side ul { list-style: none; padding: 0; margin: 20px 0 0; color: var(--ink-2); font-size: 14px; }
.auth-side li { margin-bottom: 8px; }
.auth-side li i { color: var(--pink); width: 22px; }
.hero-divider { width: 60px; height: 4px; border-radius: 2px; background: var(--pink); margin: 0 0 20px; }
.auth-main { width: 520px; max-width: 100%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.auth-box { width: 100%; max-width: 400px; }
.auth-box h2 { font-size: 24px; margin-bottom: 6px; }
.auth-box .sub { color: var(--muted); margin-bottom: 22px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; margin: 18px 0; }
.or:before, .or:after { content: ''; flex: 1; height: 1px; background: #dcdbe3; }
.auth-foot { margin-top: 18px; font-size: 12px; color: var(--ink-2); text-align: center; }
.code-input { font-size: 24px !important; letter-spacing: 10px; text-align: center; font-family: Consolas, monospace !important; }
.backup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; font-family: Consolas, monospace; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin: 12px 0; }
/* ---------- SMALL SCREENS ---------- */
@media (max-width: 980px) {
	.grid-3 { grid-template-columns: 1fr 1fr; }
	.auth-side { display: none; }
	.auth-main { width: 100%; }
}
@media (max-width: 820px) {
	#left-bar { transform: translateX(-100%); transition: transform .2s; }
	html.menu-open #left-bar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.4); }
	html.menu-open #menu-shade { display: block; } /* BEHIND THE OPEN MENU (100), ABOVE EVERYTHING ELSE - js/admin.js */
	#main-bar { margin-left: 0; }
	#menu-toggle { display: block; }
	#top-bar { padding: 0 16px; }
	#content { padding: 18px 16px; }
	.grid-2, .grid-3, .field-row { grid-template-columns: 1fr; }
	.top-user-name { display: none; }
}
/* ---------- SIGNATURE EDITOR (lib/editor-ui.php, js/editor.js) ---------- */
.ed { --ed-top: 86px; display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 26px; align-items: start; }
.page-design .ed { --ed-top: 80px; }
/* DESKTOP: THE PANEL STAYS IN VIEW (STICKY), NEVER TALLER THAN THE SCREEN - ITS TAB SCROLLS INSIDE IT */
.ed-panel { background: #fff; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; position: sticky; top: var(--ed-top); max-height: calc(100vh - var(--ed-top) - 18px); display: flex; flex-direction: column; }
.ed-panel-head { display: none; }
.ed-fab, .ed-backdrop { display: none; }
.ed-tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: #fcfcfd; }
.ed-tabs.ed-tabs-6 { grid-template-columns: repeat(3, 1fr); } /* THE SIGNATURE MAKER (create.php) - SIX TABS, TWO ROWS OF THREE */
.ed-tabs button { border: 0; background: none; padding: 11px 4px 9px; cursor: pointer; font: 600 10.5px var(--font); color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; border-bottom: 2px solid transparent; white-space: nowrap; }
.ed-tabs button i { font-size: 13px; }
.ed-tabs button:hover { color: var(--ink); }
.ed-tabs button.on { color: var(--ink); border-bottom-color: var(--pink); background: #fff; }
.ed-tabs button.on i { color: var(--pink); }
/* A CARD WITH TABS ACROSS ITS TOP (js/admin.js - admin/cards, admin/form): THE SAME TABS, EDGE TO EDGE; ONE PANE SHOWS */
.card.tabbed { padding-top: 0; overflow: visible; }
.tabbed > .ed-tabs { margin: 0 -22px 20px; grid-template-columns: repeat(var(--n, 4), 1fr); border-radius: var(--radius) var(--radius) 0 0; }
.tabbed > .ed-tabs button { font-size: 12px; padding: 13px 4px 11px; }
.tabbed > .ed-tabs button:first-child { border-top-left-radius: var(--radius); }
.tabbed > .ed-tabs button:last-child { border-top-right-radius: var(--radius); }
.tabbed > [data-pane]:not(.on) { display: none; }
.tabbed > [data-pane] > h2:first-child { margin-top: 0; }
.tabbed .pane-sep { border: 0; border-top: 1px solid var(--line); margin: 22px 0 18px; }
@media (max-width: 560px) { .tabbed > .ed-tabs button span { display: none; } .tabbed > .ed-tabs button i { font-size: 15px; } }
.ed-tab { display: none; padding: 20px 22px 24px; overflow-y: auto; overscroll-behavior: contain; }
.ed-tab.on { display: block; flex: 1; min-height: 0; }
.ed-tab h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 10px; font-family: var(--font); }
.ed-tab h3:first-child { margin-top: 0; }
.ed-range input[type=range] { width: 100%; }
.ed-val { float: right; color: var(--muted); font-weight: 400; display: inline-flex; align-items: center; gap: 3px; }
.field .ed-num, .ed-num { width: 52px; height: auto; min-height: 0; box-shadow: none; padding: 2px 4px; border: 1px solid transparent; border-radius: 6px; background: none; font: inherit; color: var(--ink); text-align: right; -moz-appearance: textfield; appearance: textfield; }
.ed-num::-webkit-inner-spin-button, .ed-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field .ed-num:hover, .ed-num:hover { border-color: var(--line); background: #fff; }
.field .ed-num:focus, .ed-num:focus { border-color: var(--pink); background: #fff; outline: 0; }
.ed-colours { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ed-colours input[type=color] { width: 40px; height: 32px; }
.ed-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.ed-swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.ed-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--bg); padding: 4px; border-radius: 30px; margin: 0 0 12px; }
.ed-chips button { border: 0; background: none; padding: 7px 13px; border-radius: 20px; font: 600 11px var(--font); color: var(--ink-2); cursor: pointer; }
.ed-chips button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(35,31,32,.15); }
.ed-templates { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ed-tpl { display: flex; align-items: center; gap: 14px; text-align: left; border: 2px solid var(--line); border-radius: 12px; background: #fff; padding: 8px; cursor: pointer; font: 11px var(--font); color: var(--ink-2); position: relative; }
.ed-tpl:hover { border-color: #c9c7d6; }
.ed-tpl.on { border-color: var(--ink); background: #eef1f6; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ed-tpl b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 2px; }
.ed-tpl-text { flex: 1; min-width: 0; }
.ed-tpl-tick { font-size: 16px; opacity: 0; margin-right: 6px; color: var(--ink); }
.ed-tpl.on .ed-tpl-tick { opacity: 1; }
.ed-tpl span { font-size: 10px; line-height: 1.3; display: block; }
.ed-tpl-thumb { width: 150px; height: 84px; flex: none; overflow: hidden; border-radius: 8px; background: var(--bg); position: relative; pointer-events: none; }
.ed-tpl-wire { display: block; width: 100%; height: 100%; background: #fff; } /* THE LAYOUT WIREFRAMES (ucSigTemplateWire) */
/* THE LAYOUT LIBRARY (lib/editor-ui.php): FILTER CHIPS, THEN TWO COLUMNS OF CARDS - THE WIREFRAME ON TOP, THE NAME UNDER IT */
.ed-tpl-filter { margin: 0 0 12px; }
.ed-tpl-filter .muted { font-weight: 400; margin-left: 2px; }
.ed-tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ed-tpl-grid .ed-tpl { flex-direction: column; align-items: stretch; gap: 8px; padding: 6px 6px 9px; }
.ed-tpl-grid .ed-tpl-thumb { width: 100%; height: auto; aspect-ratio: 150 / 84; }
.ed-tpl-grid .ed-tpl-text { padding: 0 4px; }
.ed-tpl-grid .ed-tpl b { font-size: 12px; }
.ed-tpl-grid .ed-tpl span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ed-tpl-grid .ed-tpl-tick { position: absolute; top: 10px; right: 8px; margin: 0; background: #fff; border-radius: 50%; }
.ed-tpl-grid .ed-tpl[hidden] { display: none; }
/* THE LAYOUT TAB'S SUB-TABS (lib/editor-ui.php): Layouts | Customise - A TWO-PART SWITCH ACROSS THE PANEL */
.ed-subtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--bg); border-radius: 10px; margin: 0 0 16px; }
.ed-subtabs button { border: 0; background: none; border-radius: 7px; padding: 9px 8px; font: 600 12.5px var(--font); color: var(--ink-2); cursor: pointer; }
.ed-subtabs button i { margin-right: 5px; }
.ed-subtabs button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(19,33,58,.14); }
[data-subpane][hidden] { display: none; }
[data-subpane="edit"] .ed-customise { margin-top: 0; }
/* THE CHOSEN LAYOUT'S TILE: A Customise BUTTON (OPENS THE OTHER SUB-TAB) */
.ed-tpl-grid .ed-tpl .ed-tpl-edit { display: none; align-self: flex-start; margin: 2px 4px 0; padding: 4px 9px; border-radius: 20px; background: var(--ink); color: #fff; font: 600 11px var(--font); cursor: pointer; }
.ed-tpl-edit i { margin-right: 3px; }
.ed-tpl-grid .ed-tpl.on .ed-tpl-edit { display: inline-block; } /* (.ed-tpl-grid: STRONGER THAN THE GRID'S OWN span RULE) */
.ed-tpl-edit:hover { background: var(--pink); }
/* CUSTOMISE THE CHOSEN LAYOUT (UNDER THE LIBRARY) */
.ed-customise { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.ed-customise h3 { margin: 0 0 12px; font-size: 14px; }
.ed-customise .ed-switch-row { margin: 0 0 12px; background: var(--card); }
.ed-customise [hidden], .ed-tab [data-show-if][hidden] { display: none; } /* (OVER .field-row'S OWN display) */
.ed-customise .ed-chips { margin-bottom: 0; }
.ed-customise-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.ed-customise-head h3 { margin: 0; }
.ed-customise h4 { margin: 16px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ed-customise .field { margin-bottom: 12px; }
.ed-customise .field > label { font-size: 12.5px; }
.ed-customise .ed-chips button { padding: 6px 10px; }
.ed-customise .ed-switch-row { padding: 9px 12px; margin: 0 0 8px; }
.ed-customise .ed-switch-row b { font-size: 13px; }
.ed-customise .ed-switch-row small { font-size: 11.5px; }
.ed-lo-sub { padding: 2px 0 0 14px; border-left: 2px solid var(--line); margin: -4px 0 12px; } /* A SWITCH'S OWN SETTINGS, SHOWN WHILE IT'S ON */
.ed-tpl-inner { transform: scale(.42); transform-origin: 0 0; width: 238%; padding: 10px 12px; }
/* BIGGER INSIDE THE SAME BOX - THE RIGHT-HAND EDGE (BANNERS, LONG LINES) IS CROPPED */
.ed-fields { list-style: none; margin: 0; padding: 0; }
.ed-fields li { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.ed-fields .check { margin: 0; }
.ed-move button { border: 0; background: var(--bg); width: 30px; height: 28px; border-radius: 6px; cursor: pointer; color: var(--ink-2); margin-left: 4px; }
.ed-move button:disabled { opacity: .3; cursor: default; }
.ed-social label { display: flex; align-items: center; gap: 8px; }
.ed-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ed-upload-img { width: 64px; height: 64px; border-radius: 10px; border: 1px dashed #d0cfda; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 20px; overflow: hidden; }
.ed-upload-img.photo { border-radius: 50%; }
.ed-upload-img img { max-width: 100%; max-height: 100%; }
.ed-stage { min-width: 0; }
.ed-stage-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; position: sticky; top: 62px; z-index: 15; background: var(--bg); padding: 8px 0; margin-top: -8px; } /* STICKY UNDER THE TOP BAR (62px) - VIEW, DEVICE AND SAVE STAY IN REACH */
.ed-stage-left { display: flex; gap: 10px; flex-wrap: wrap; }
.ed-stage-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ed-stage-actions .ed-dirty { font-size: 12.5px; font-weight: 600; color: #b45309; white-space: nowrap; }
.ed-stage-actions .ed-dirty i { font-size: 7px; vertical-align: 2px; margin-right: 3px; }
.ed-stage-actions .btn.dirty { box-shadow: 0 0 0 3px rgba(55,57,148,.22); }
.ed-mail { background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(35,31,32,.12); overflow: hidden; transition: max-width .25s; max-width: 100%; margin: 0 auto; }
.ed-mail.mobile { max-width: 380px; }
.ed-mail-top { padding: 12px 16px; background: #f4f3f7; display: flex; gap: 7px; }
.ed-mail-top span { width: 11px; height: 11px; border-radius: 50%; background: #dddbe4; }
.ed-mail-top span:first-child { background: #ff6159; }
.ed-mail-top span:nth-child(2) { background: #ffbd2e; }
.ed-mail-top span:nth-child(3) { background: #28c941; }
.ed-mail-head { padding: 10px 22px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); }
.ed-mail-head div { padding: 4px 0; }
.ed-mail-head b { display: inline-block; width: 64px; color: var(--muted); font-weight: 500; }
.ed-mail-head:has(.ed-from) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; } /* To / Subject ON THE LEFT, From ON THE RIGHT */
.ed-mail-head > div:not(.ed-from) { grid-column: 1; }
.ed-mail-head .ed-from { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 8px; padding: 0; min-width: 0; }
.ed-mail-head .ed-from b { flex: none; width: auto; }
.ed-mail-head .ed-from select { width: auto; max-width: 100%; min-width: 0; padding: 4px 30px 4px 10px; font-size: 12.5px; font-weight: 600; min-height: 0; height: auto; border-radius: 8px; color: var(--ink); }
.ed-mail-body { padding: 22px 22px 28px; font: 13px/1.2 Arial, Helvetica, sans-serif; color: #222; }
.ed-mail-body > p { margin: 0 0 12px; }
.ed-sig { margin: 12px -6px 0; padding: 6px; overflow-x: auto; }
/* THE PADDING KEEPS THE CLICK-TO-EDIT OUTLINES INSIDE THE SCROLL BOX */
.ed-actions { margin-top: 18px; }
/* PHONES / TABLETS: THE PANEL SLIDES OUT FROM THE LEFT (THE "EDIT SIGNATURE" BUTTON, OR TAPPING PART OF THE PREVIEW) */
@media (max-width: 1100px) {
	.ed { grid-template-columns: minmax(0, 1fr); }
	/* THE SIGNATURE SCROLLS SIDEWAYS IN ITS WINDOW INSTEAD OF WIDENING THE PAGE */
	.ed-mail-body { padding: 18px 16px 22px; }
	.ed-stage-bar .ed-chips { margin-bottom: 8px; }
	.ed-panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 80; width: min(440px, 92vw); max-height: none; border-radius: 0 18px 18px 0; transform: translateX(-105%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); box-shadow: 0 0 40px rgba(35,31,32,.25); }
	.ed.drawer-open .ed-panel { transform: none; }
	.ed-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); flex: none; }
	.ed-close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); }
	.ed-backdrop { position: fixed; inset: 0; z-index: 75; background: rgba(35,31,32,.45); }
	.ed.drawer-open .ed-backdrop { display: block; }
	.ed-fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: 18px; z-index: 70; border: 0; border-radius: 40px; padding: 14px 22px; background: var(--ink); color: #fff; font: 600 13px var(--font); box-shadow: 0 10px 30px rgba(19,33,58,.35); cursor: pointer; }
	.ed.drawer-open .ed-fab { display: none; }
}
.ed-banner { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 0 12px; background: #fcfcfd; }
.ed-banner .btn-row { margin: 10px 0 12px; }
.ed-banner-img { border-radius: 8px; overflow: hidden; background: var(--bg); min-height: 60px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; margin-bottom: 7px; }
.ed-banner-img img { display: block; width: 100%; height: auto; }
/* CLICK-TO-EDIT PREVIEW + RATING / RSVP CARDS */
.ed-hint { font-size: 11px; color: var(--ink-2); margin: 0 0 10px; display: flex; align-items: center; gap: 7px; }
.ed-hint i { color: var(--pink); }
.ed-sig [data-ed] { cursor: pointer; border-radius: 3px; transition: outline-color .15s; outline: 2px dashed transparent; outline-offset: 2px; }
.ed-sig [data-ed]:hover { outline-color: var(--pink); }
@keyframes edflash { 0% { box-shadow: 0 0 0 0 rgba(255,45,96,.55); } 100% { box-shadow: 0 0 0 12px rgba(255,45,96,0); } }
.ed-flash { animation: edflash .9s ease-out 2; border-radius: 10px; }
.ed-form-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ed-form-head b i { color: var(--pink); margin-right: 4px; }
/* BANNER STUDIO (THE PROMOTE TAB) */
.ed-promote { font-size: 20px; margin: 0 0 6px; }
.ed-banner-mode { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
/* BANNER SLIDES (js/studio.js slideBar - THE BANNER PAGE) */
.st-slides { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 0; }
.st-slides .ed-chips { margin: 0; }
.st-slides [data-slide] { touch-action: none; user-select: none; position: relative; } /* DRAG TO REORDER (js/studio.js) */
.st-slides .ed-chips:has(.st-grip) [data-slide] { cursor: grab; }
.st-grip { font-size: 9px; margin-right: 6px; opacity: .45; }
.st-slides [data-slide].st-dragging { cursor: grabbing; opacity: .55; }
.st-slides [data-slide].st-drop-before { box-shadow: -3px 0 0 var(--pink); }
.st-slides [data-slide].st-drop-after { box-shadow: 3px 0 0 var(--pink); }
.st-delay { margin: 10px 0 0; color: var(--ink-2); }
.st-delay select { width: auto; display: inline-block; padding: 5px 28px 5px 10px; margin: 0 4px; font-size: 12px; }
.st-gif-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; line-height: 1.4; }
.st-gif-note i { margin-top: 2px; }
.st-slides-locked { margin: 10px 0 0; }
.ed-banner-mode .ed-chips { margin: 0; }
.ed-goals { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 6px; margin: 12px 0; }
/* EVERY ROW AS TALL AS THE TALLEST - ALL THE SAME */
.ed-goal { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 4px 7px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 10px var(--font); color: var(--ink-2); line-height: 1; text-align: center; justify-content: center; }
.ed-goal i { font-size: 16px; color: var(--muted); }
.ed-goal:hover { border-color: #c9c7d6; }
.ed-goal.on { border-color: var(--ink); background: #eef1f6; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ed-goal.on i { color: var(--ink); }
/* EDITOR - A SMALL x IN EVERY TEXT FIELD THAT HAS SOMETHING IN IT (js/editor.js) */
.ed-inp { position: relative; display: block; }
.ed-inp input { padding-right: 36px; }
.ed-inp textarea { padding-right: 36px; }
.ed-x { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--bg); color: var(--muted); cursor: pointer; display: none; font-size: 14px; line-height: 24px; padding: 0; text-align: center; }
.ed-inp.ta .ed-x { top: 8px; transform: none; }
.ed-inp.has-val .ed-x { display: block; }
.ed-x:hover { background: #ffe6ed; color: var(--pink); }
/* =====================================================================================
   INSTALL WIZARD (admin/signature) - 1. PICK YOUR EMAIL APPS (CARDS)  2. STEPS PER APP (ACCORDION), TICKED OFF
   ===================================================================================== */
.wz-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 12px; margin-right: 6px; vertical-align: 2px; }
.wz-group { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; }
.wz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.wz-card { position: relative; display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, background .15s; }
.wz-card:hover { border-color: var(--indigo); }
.wz-card > i { font-size: 20px; width: 28px; text-align: center; color: var(--indigo); flex: none; }
.wz-card span { display: flex; flex-direction: column; min-width: 0; }
.wz-card small { color: var(--muted); font-size: 12px; line-height: 1.3; margin-top: 2px; }
.wz-card em { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: .15s; }
.wz-card.on { border-color: var(--indigo); background: var(--indigo-soft); box-shadow: 0 0 0 3px rgba(55,57,148,.12); }
.wz-card.on em { opacity: 1; transform: none; }
.wz-progress { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 4px 0 14px; }
.wz-progress span { display: block; height: 100%; width: 0; background: var(--green, #17a05d); transition: width .3s; }
.wz-app { border: 1px solid var(--line); border-radius: 12px; margin-top: 10px; overflow: hidden; }
.wz-app-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.wz-app-head span { flex: 1; display: flex; flex-direction: column; }
.wz-app-icon { font-size: 18px; width: 26px; text-align: center; color: var(--indigo); }
.wz-state { font-size: 12px; color: var(--muted); }
.wz-app.done .wz-state { color: #11663d; font-weight: 700; }
.wz-app.done .wz-app-icon { color: #17a05d; }
.wz-chev { transition: transform .2s; color: var(--muted); }
.wz-app.open .wz-chev { transform: rotate(180deg); }
.wz-app-body { display: none; padding: 0 16px 16px 54px; }
.wz-app.open .wz-app-body { display: block; }
.wz-app.open { border-color: var(--indigo); }
.wz-list { margin: 0; padding-left: 20px; }
.wz-list li { margin: 0 0 10px; padding-left: 4px; line-height: 1.5; }
.wz-list li .btn { margin: 2px 0; }
.wz-extra { margin-top: 16px; padding: 14px; border-radius: 10px; background: var(--bg); }
.wz-extra p { margin: 4px 0 10px; }
.wz-phone { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.wz-phone .wz-list { flex: 1; min-width: 220px; }
.wz-done-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.wz-app.done .wz-done { background: var(--green-soft); color: #11663d; border-color: transparent; }
/* DOCUMENTS (admin/documents): THE PLAN BAR, THE DROP SPOT, A CARD PER DOCUMENT WITH ITS FIRST PAGE (OR ITS TYPE'S ICON) */
.doc-kpis { margin-bottom: 18px; }
.doc-kpis .card { margin: 0; }
.doc-bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin-top: 12px; }
.doc-bar span { display: block; height: 100%; background: var(--indigo); border-radius: 6px; }
.doc-bar.full span { background: var(--brand); }
.doc-drop { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 26px 18px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.doc-drop:hover, .doc-drop.over { border-color: var(--indigo); background: var(--indigo-soft); }
.doc-drop > i { font-size: 30px; color: var(--indigo); }
.doc-drop span { display: flex; flex-direction: column; gap: 3px; }
.doc-drop small { color: var(--muted); font-size: 12.5px; }
.doc-progress { padding: 26px 18px; text-align: center; color: var(--ink-2); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 18px; }
.doc-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.doc-thumb { position: relative; display: flex; align-items: flex-start; justify-content: center; height: 190px; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line); }
.doc-thumb img { width: 100%; height: auto; display: block; }
.doc-thumb > i { font-size: 54px; align-self: center; color: var(--muted); }
.doc-thumb.t-doc > i, .doc-thumb.t-docx > i { color: #2b579a; }
.doc-thumb.t-xls > i, .doc-thumb.t-xlsx > i { color: #217346; }
.doc-thumb.t-ppt > i, .doc-thumb.t-pptx > i { color: #c43e1c; }
.doc-thumb.t-pdf > i { color: #d81f52; }
.doc-type { position: absolute; left: 10px; bottom: 10px; padding: 2px 8px; border-radius: 20px; background: rgba(19,33,58,.85); color: #fff; font-size: 11px; font-weight: 700; }
.doc-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.doc-title { overflow-wrap: anywhere; line-height: 1.3; }
.doc-used { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.doc-used .badge { white-space: normal; }
.doc-actions { display: flex; gap: 4px; margin-top: auto; padding-top: 10px; }
.doc-actions .btn:first-child { margin-right: auto; }
.doc-actions .btn.ghost { padding-left: 9px; padding-right: 9px; }
/* THE WIZARD'S QUESTIONS (admin/signature): STEP DOTS, ANSWER BUTTONS, "Likely" TAGS, "How do I tell" TIPS. AND WHERE IT'S INSTALLED (THE LEFT COLUMN) */
.wz-dots { display: flex; gap: 6px; margin: 0 0 18px; counter-reset: wzd; }
.wz-dots span { flex: 1; font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 8px; border-top: 3px solid var(--line); counter-increment: wzd; }
.wz-dots span::before { content: counter(wzd) ". "; }
.wz-dots span.past { border-color: var(--indigo); color: var(--ink-2); }
.wz-dots span.on { border-color: var(--brand); color: var(--ink); }
.wz-found { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--indigo-soft); margin: 10px 0 14px; }
.wz-found > i { color: var(--indigo); font-size: 16px; margin-top: 2px; }
.wz-ask { font-size: 15px; margin: 20px 0 10px; }
.wz-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.wz-found + .wz-opts { margin-top: 16px; }
.ed-goal.ed-goal-limited { position: relative; } /*(LIMITED EDITION BANNER GOALS - js/studio.js)*/
.ed-goal-tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 20px; background: var(--brand); color: #fff; font: 700 9.5px/1.5 var(--font); font-style: normal; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
/*THE REPLY VIEW'S OPTIONS (lib/editor-ui.php #ed-reply-opts) - A SLIM BAR ABOVE THE PREVIEW*/
.ed-reply-opts { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 13px; color: var(--ink-2); }
.ed-reply-opts .ed-chips { margin: 0; }
.ed-reply-banner { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.ed-reply-banner input { margin: 0; accent-color: var(--indigo); } /*(ROOM FOR A "Likely" PILL ABOVE THE FIRST ROW)*/
.wz-opt { position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; font: inherit; color: inherit; }
.wz-opt:hover { border-color: var(--indigo); }
.wz-opt > i { font-size: 18px; color: var(--indigo); margin-top: 2px; width: 22px; text-align: center; flex: none; }
.wz-opt span { display: flex; flex-direction: column; }
.wz-opt small { color: var(--muted); font-size: 12px; line-height: 1.3; margin-top: 2px; }
.wz-opt.on { border-color: var(--indigo); background: var(--indigo-soft); box-shadow: 0 0 0 3px rgba(55,57,148,.12); }
.wz-card > .wz-likely, .wz-opt > .wz-likely { position: absolute; top: -9px; left: 12px; width: auto; text-align: left; line-height: 1.5; padding: 1px 8px; border-radius: 20px; background: var(--brand); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.wz-share { display: flex; gap: 6px; }
.wz-share input { flex: 1; min-width: 0; font-size: 12.5px; }
.wz-tell { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--bg); }
.wz-tell summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.wz-tell ul { margin: 10px 0 6px; padding-left: 18px; }
.wz-tell li { margin-bottom: 6px; line-height: 1.45; }
.wz-nav { margin-top: 20px; }
.wz-where { list-style: none; margin: 0; padding: 0; }
.wz-where li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.wz-where li:first-child { border-top: 0; padding-top: 0; }
.wz-where li > i { font-size: 17px; width: 24px; text-align: center; color: var(--indigo); margin-top: 1px; flex: none; }
.wz-where small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.wz-where-none { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1.5px dashed var(--line); border-radius: 12px; }
.wz-where-none > i { font-size: 26px; color: var(--muted); }
.wz-where-none p { margin: 0; line-height: 1.45; }
.sig-offscreen { position: absolute; left: -10000px; top: 0; width: 760px; } /* THE SIGNATURE THE COPY BUTTONS COPY (admin/signature) */
.wz-all { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: var(--green-soft); color: #11663d; }
@media (max-width: 600px) {
	.wz-cards { grid-template-columns: minmax(0, 1fr); }
	.wz-app-body { padding-left: 16px; }
}
/* BANNER STUDIO - "BACKGROUND, FONT & LAYOUT" (js/studio.js), FOLDED AWAY UNTIL WANTED */
.ed-more { border: 1px solid var(--line); border-radius: 10px; background: #fff; margin: 0 0 12px; }
.ed-more summary { cursor: pointer; padding: 10px 12px; font-weight: 700; font-size: 11.5px; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-more summary::-webkit-details-marker { display: none; }
.ed-more summary::after { content: ''; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin: -3px 4px 0 auto; flex: none; transition: transform .2s; }
.ed-more[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
.ed-more summary i { color: var(--pink); }
.ed-more-sum { order: 5; flex-basis: 100%; padding-left: 21px; margin-top: -4px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* WHAT'S SET, ON ITS OWN LINE UNDER THE TITLE WHILE FOLDED (js/studio.js) */
.ed-more-body { padding: 2px 12px 8px; }
/* "Upload and link to a document" UNDER A LINK (js/studio.js, lib/editor-ui.php, admin/campaign) - WHEN THE COMPANY HAS NO DOCUMENTS YET */
.ed-doc-up { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--indigo); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ed-doc-up:hover { text-decoration: underline; }
.ed-more-label { display: block; font-size: 10px; font-weight: 700; color: var(--muted); margin: 0 0 6px; }
.ed-more .ed-colours .ed-chips { margin: 0; }
.ed-more .check { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; }
/* MY COMPANIES - THE SWITCHER IN THE LEFT BAR'S COMPANY CARD (admin/bar-left) */
.left-switch { margin-top: 6px; }
.left-switch summary { cursor: pointer; color: var(--pink); font-size: 10.5px; font-weight: 600; list-style: none; }
.left-switch summary::-webkit-details-marker { display: none; }
.left-switch summary::after { content: ' \25BE'; }
.left-switch[open] summary { margin-bottom: 6px; }
.left-switch button { display: block; width: 100%; text-align: left; border: 0; background: rgba(255,255,255,.65); border-radius: 7px; padding: 7px 9px; margin-top: 4px; font: 600 11px var(--font); color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.left-switch button:hover { background: #fff; }
.left-switch button.on { background: #fff; box-shadow: inset 3px 0 0 var(--ink); }
.left-switch button small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.left-switch button.add { background: none; color: var(--pink); padding-left: 2px; }
/* =====================================================================================
   FORMS - THE PUBLIC FORM (form.php) AND THE BUILDER'S PREVIEW SHARE .uf-; --uf = THE COMPANY'S COLOUR
   ===================================================================================== */
.uf { --uf: var(--pink); padding: 0; overflow: hidden; }
.uf-cover { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.uf-body { padding: 28px 30px 30px; }
.uf-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; }
.uf-brand img { height: 40px; max-width: 160px; object-fit: contain; }
.uf-title { font-size: 24px; line-height: 1.25; margin: 0 0 8px; }
.uf-intro { color: var(--ink-2); margin-bottom: 22px; line-height: 1.55; }
.uf-field { margin: 0 0 20px; }
.uf-field.bad input, .uf-field.bad textarea, .uf-field.bad select { border-color: var(--red, #d93025); }
.uf-label { display: block; font-weight: 700; margin-bottom: 6px; }
.uf-req { color: var(--uf); margin-left: 3px; }
.uf-help { color: var(--muted); font-size: 11.5px; margin: -2px 0 8px; line-height: 1.45; }
.uf-field input[type=text], .uf-field input[type=email], .uf-field input[type=tel], .uf-field input[type=number], .uf-field input[type=date], .uf-field textarea, .uf-field select { width: 100%; }
.uf-heading { padding-top: 6px; border-top: 1px solid var(--line); }
.uf-heading h3 { margin: 12px 0 4px; font-size: 16px; }
.uf-opts { display: grid; gap: 6px; }
.uf-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; line-height: 1.4; }
.uf-opt input { margin: 3px 0 0; accent-color: var(--uf); flex: none; }
.uf-opt input[type=checkbox] { margin: calc((1lh - 18px) / 2) 0 0; }
.uf-opt input[type=checkbox]:checked { background-color: var(--uf); border-color: var(--uf); }
.uf-opt:has(input:checked) { border-color: var(--uf); }
.uf-consent { border: 0; padding: 0; background: none; }
.uf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.uf-pill { cursor: pointer; }
.uf-pill input { position: absolute; opacity: 0; pointer-events: none; }
.uf-pill span { display: inline-block; min-width: 46px; text-align: center; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 600; background: #fff; }
.uf-pill input:checked + span { background: var(--uf); border-color: var(--uf); color: #fff; }
.uf-pill input:focus-visible + span { outline: 2px solid var(--uf); outline-offset: 2px; }
.uf-nps .uf-pill span { min-width: 0; width: 38px; padding: 9px 0; }
.uf-ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 5px; max-width: 460px; }
.uf-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.uf-stars input { position: absolute; opacity: 0; pointer-events: none; }
.uf-stars label { font-size: 28px; color: #dcdae3; cursor: pointer; transition: color .1s; }
.uf-stars input:checked ~ label, .uf-stars label:hover, .uf-stars label:hover ~ label { color: #f5b301; }
.uf-err { color: var(--red, #d93025); font-size: 11px; margin-top: 5px; }
.uf-err:empty { display: none; }
.uf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.uf-submit { background: var(--uf); border-color: var(--uf); padding-left: 28px; padding-right: 28px; }
.uf-done { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 12px; background: var(--green-soft); color: #11663d; font-size: 14px; }
.uf-done[hidden] { display: none; }
.uf-done i { font-size: 24px; color: var(--green); }
.uf-foot { text-align: center; color: var(--muted); font-size: 11px; margin-top: 18px; }
.uf-foot a { color: var(--muted); }
/* A COMPETITION (form.php): THE PRIZE, THE TERMS LINK UNDER THE BUTTON, THE TERMS PAGE */
.uf-prize { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; margin: 0 0 22px; background: color-mix(in srgb, var(--uf) 9%, #fff); border: 1.5px solid color-mix(in srgb, var(--uf) 30%, #fff); }
.uf-prize > i { font-size: 26px; color: var(--uf); flex: none; }
.uf-prize small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--uf); }
.uf-prize b { display: block; font-size: 16px; line-height: 1.3; }
.uf-prize span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.uf-square .uf-prize { border-radius: 2px; }
.uf-terms-link { font-size: 11.5px; color: var(--muted); margin: 12px 0 0; }
.uf-terms-link a { color: var(--muted); text-decoration: underline; }
.uf-terms { line-height: 1.6; color: var(--ink-2); }
/* A FORM'S LOOK (THE BUILDER'S Design TAB - lib/functions-forms.php ucFormLook): .uf-stage = THE PAGE BEHIND IT (ITS WIDTH DECIDES "SIDE BY SIDE"),
   --uf-band = THE COLOUR BAND, .uf-card / .uf-split / .uf-plain = THE LAYOUT, .uf-square = SQUARE CORNERS */
.uf-stage { container-type: inline-size; }
.uf-band { height: 64px; background: var(--uf-band, var(--uf)); }
.uf.uf-plain { background: transparent; border: 0; box-shadow: none; }
.uf.uf-plain .uf-body { padding-left: 4px; padding-right: 4px; }
@container (min-width: 480px) {
	.uf-split:has(> .uf-cover) { display: grid; grid-template-columns: 40% minmax(0, 1fr); }
	.uf-split > .uf-cover { width: 100%; height: 100%; max-height: none; object-fit: cover; }
}
.uf.uf-square { border-radius: 2px; }
.uf-font, .uf-font h1, .uf-font h3, .uf-font input, .uf-font textarea, .uf-font select, .uf-font button { font-family: var(--uf-font); } /* ITS OWN FONT (Design tab) */
.uf-square .uf-opt, .uf-square .uf-pill span, .uf-square .uf-field input, .uf-square .uf-field textarea, .uf-square .uf-field select, .uf-square .uf-submit, .uf-square .uf-done { border-radius: 2px; }
/* THE BUILDER'S LAYOUT TILES (A LITTLE DRAWING OF EACH) */
.bc-lay.fl-lay i { width: 72px; height: 52px; border-radius: 6px; border: 1px solid #e6e4ec; background: #f6f4ef; position: relative; overflow: hidden; }
.bc-lay.fl-lay i::after { content: ''; position: absolute; left: 18px; top: 7px; width: 36px; height: 38px; border-radius: 4px; border: 0;
	background: linear-gradient(#e6e4ec, #e6e4ec) 6px 10px / 22px 3px no-repeat, linear-gradient(#e6e4ec, #e6e4ec) 6px 17px / 16px 3px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 6px 28px / 14px 5px no-repeat, #fff; }
.bc-lay.fl-lay-split i::after { left: 7px; width: 58px; background: linear-gradient(160deg, #b9b6c6, #6b6875) 0 0 / 22px 100% no-repeat, linear-gradient(#e6e4ec, #e6e4ec) 28px 10px / 22px 3px no-repeat, linear-gradient(#e6e4ec, #e6e4ec) 28px 17px / 16px 3px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 28px 28px / 14px 5px no-repeat, #fff; }
.bc-lay.fl-lay-plain i { background: #fff; }
.bc-lay.fl-lay-plain i::after { left: 10px; width: 52px; background: linear-gradient(#e6e4ec, #e6e4ec) 4px 10px / 30px 3px no-repeat, linear-gradient(#e6e4ec, #e6e4ec) 4px 17px / 22px 3px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 4px 28px / 16px 5px no-repeat, transparent; }
.fb-stage { padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); }
.fb-stage > .card { margin: 0; }
@media (max-width: 600px) {
	.uf-body { padding: 22px 18px; }
	.uf-title { font-size: 20px; }
}
/* THE BUILDER (admin/form) - QUESTIONS ON THE LEFT, A STICKY PREVIEW ON THE RIGHT */
.fb-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
/* THE EDITORS' SAVE BAR STAYS IN VIEW UNDER THE TOP BAR WHILE SCROLLING; WITH UNSAVED CHANGES (.dirty) THE SAVE BUTTON STANDS OUT */
.fb-top:has(.btn) { position: sticky; top: 62px; z-index: 15; background: var(--bg); margin: -10px -4px 18px; padding: 10px 4px; }
.fb-top.dirty #bc-save, .fb-top.dirty .btn-save { box-shadow: 0 0 0 3px rgba(216,31,82,.25); }
.dirty-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--amber-soft); color: var(--amber); font-size: 10.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px; }
.dirty-pill:before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.fb-top h1 { margin: 4px 0 4px; font-size: 24px; }
.fb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.fb-preview { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
.fb-preview .uf-body { pointer-events: none; }
.fb-field { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: #fff; }
.fb-field.open { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(55,57,148,.08); }
.fb-field-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; }
.fb-field-head > i { width: 20px; text-align: center; color: var(--indigo); }
.fb-field-head > span:first-of-type { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fb-field-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.fb-field-head small { color: var(--muted); font-size: 10px; }
.fb-tools { display: flex; gap: 2px; }
.fb-tools button { border: 0; background: none; width: 28px; height: 28px; border-radius: 6px; color: var(--muted); cursor: pointer; }
.fb-tools button:hover:not(:disabled) { background: var(--bg); color: var(--ink); }
.fb-tools button:disabled { opacity: .3; cursor: default; }
.fb-field-body { padding: 4px 14px 14px 44px; border-top: 1px solid var(--line); padding-top: 14px; }
.fb-add { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.fb-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 6px; }
.fb-type { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 10px; font: 600 11px var(--font); color: var(--ink-2); cursor: pointer; text-align: left; }
.fb-type i { color: var(--pink); width: 16px; text-align: center; }
.fb-type:hover { border-color: var(--indigo); color: var(--ink); }
@media (max-width: 1100px) {
	.fb { grid-template-columns: minmax(0, 1fr); }
	.fb-preview { position: static; max-height: none; }
	.fb-field-body { padding-left: 14px; }
}
/* FORM TEMPLATES (admin/forms - "New form") */
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ft { border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 14px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.ft:hover { border-color: var(--indigo); }
.ft i { font-size: 20px; color: var(--pink); margin-bottom: 8px; display: block; }
.ft b { display: block; }
.ft small { color: var(--muted); }
/* FORM RESULTS (admin/form-results) */
.fr-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.fr-sum .card { margin: 0; }
/* JOINING A COMPANY ALREADY ON UPCLIENT (admin/welcome, admin/team, admin/home - lib/functions-join.php) */
.w-join { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--indigo); border-radius: 12px; background: var(--indigo-soft); margin-bottom: 4px; }
.w-join > i { font-size: 24px; color: var(--indigo); margin-top: 2px; }
.w-join b { display: block; font-size: 14px; }
.w-join span { display: block; font-size: 12px; color: var(--ink-2); margin: 3px 0 12px; }
.join-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.join-row:first-of-type { border-top: 0; }
.join-row > div { flex: 1; min-width: 0; }
.join-row .btn-row { flex: none; }
/* A COMPETITION'S DRAW (admin/form-results) */
.comp-top { margin-bottom: 16px; }
.comp-top .card { margin: 0; }
.comp-win { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; position: relative; }
.comp-win.first { border-color: #f5b301; background: #fffaf0; }
.comp-win .comp-place { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.comp-win.first .comp-place { color: #9a6b00; }
.comp-win b { font-size: 15px; }
.comp-win .fr-redraw { position: absolute; top: 10px; right: 10px; }
.fr-q h3 { margin: 4px 0 12px; font-size: 14px; }
.fr-bar { display: flex; align-items: center; gap: 10px; font-size: 11px; margin-bottom: 6px; }
.fr-bar > span { width: 130px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-bar > div { flex: 1; height: 10px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.fr-bar > div i { display: block; height: 100%; background: var(--indigo); border-radius: 6px; }
.fr-bar > em { width: 34px; text-align: right; font-style: normal; color: var(--muted); }
.fr-table td { vertical-align: top; max-width: 260px; }
.menu-pop .menu-head { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 2px; border-top: 1px solid var(--line); margin-top: 6px; }
.menu-pop a.on { font-weight: 600; }
.menu-pop a.on i { color: var(--pink); }
input[type=date], input[type=time] { min-height: 43px; }
input:disabled, select:disabled, textarea:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
/* MY SIGNATURE (admin/signature) - WIDE SCREENS: THE PREVIEW STAYS IN VIEW ON THE LEFT, THE INSTALL STEPS ON THE RIGHT */
@media (min-width: 1280px) {
	.sig-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px; align-items: start; }
	.sig-side { position: sticky; top: 80px; }
	.sig-side .sig-preview { overflow-x: auto; }
	.sig-main .wz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.back-btn { margin-bottom: 6px; }
.fb-logo-img img { height: 34px; max-width: 140px; object-fit: contain; display: block; border: 1px solid var(--line); border-radius: 6px; padding: 3px; background: #fff; }
/* SLIDERS - THE BROWSER'S OWN RANGE INPUT (KEYBOARD, TOUCH, SCREEN READERS), STYLED: A THICK TRACK FILLED UP TO THE THUMB (--fill, SET BY
   js/editor.js showRange), A LARGE THUMB, AND A TALL TOUCH AREA - BIGGER STILL ON PHONES AND TABLETS */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; margin: 0; --fill: 50%; }
input[type=range]:focus { outline: none; box-shadow: none; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(to right, var(--ink) 0, var(--ink) var(--fill), #e4e6eb var(--fill), #e4e6eb 100%); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 8px; background: #e6e4ec; }
input[type=range]::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--ink); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); box-shadow: 0 2px 6px rgba(35,31,32,.25); transition: transform .12s; border-color: var(--ink); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); box-shadow: 0 2px 6px rgba(35,31,32,.25); border-color: var(--ink); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(19,33,58,.18); }
@media (pointer: coarse) {
	input[type=range] { height: 44px; }
	input[type=range]::-webkit-slider-runnable-track { height: 10px; }
	input[type=range]::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -10px; }
	input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
}
.ed-wide-note { margin-top: 2px; color: #9a5b00; }
.ed-wide-note[hidden] { display: none; }
/* DROPDOWNS - OUR OWN ARROW, SET IN FROM THE EDGE (THE BROWSER'S SITS TIGHT AGAINST IT) */
select:not([multiple]) { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237b7885' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px; }
select:disabled { background-image: none; }
.ed-last .field { margin-bottom: 0; }
.ed-form .ed-fields { margin: 0; }
.ed-form .ed-fields li:last-child { border-bottom: 0; padding-bottom: 0; }
.ed-last .ed-range, .ed-form > .ed-range:last-child { margin-bottom: 0; }
/* BANNER STUDIO - THE BACKGROUND PHOTO'S ANCHOR (3 x 3), AND CHIP ROWS THAT SLIDE SIDEWAYS WHEN THEY DON'T FIT (js/studio.js) */
.ed-anchor-row { display: flex; gap: 12px; align-items: center; margin: -4px 0 14px; }
.ed-anchor { display: grid; grid-template-columns: repeat(3, 18px); gap: 4px; padding: 5px; border-radius: 8px; background: var(--bg); flex: none; }
.ed-anchor button { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #c9c7d6; background: #fff; padding: 0; cursor: pointer; }
.ed-anchor button:hover { border-color: var(--indigo); }
.ed-anchor button.on { background: var(--ink); border-color: var(--ink); }
.ed-more .ed-chips { display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #d9d8e1 transparent; scroll-behavior: smooth; cursor: grab; padding-bottom: 6px; }
.ed-more .ed-chips::-webkit-scrollbar { height: 4px; }
.ed-more .ed-chips::-webkit-scrollbar-thumb { background: #d9d8e1; border-radius: 4px; }
.ed-more .ed-chips button { padding: 7px 10px; white-space: nowrap; flex: 1 0 auto; }
.ed-more .ed-chips.dragging { cursor: grabbing; scroll-behavior: auto; }
.ed-more .ed-chips.dragging button { pointer-events: none; }
/* MY DIGITAL BUSINESS CARD (admin/signature) */
.bc { display: flex; gap: 18px; align-items: flex-start; }
.bc-qr { width: 132px; flex: none; border: 1px solid var(--line); border-radius: 12px; padding: 4px; background: #fff; }
.bc-qr svg { display: block; width: 100%; height: auto; }
.bc-body { flex: 1; min-width: 0; }
.bc-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 11px; color: var(--ink-2); align-items: baseline; }
.bc-stats b { font-size: 16px; color: var(--ink); margin-right: 3px; }
.bc-stats em { font-style: normal; color: var(--muted); font-size: 10px; }
@media (max-width: 600px) {
	.bc { flex-direction: column; }
}
/* THE BRAND (admin/company) - THE LOGO AND THE COLOURS */
.brand-logo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand-logo > span { width: 150px; height: 64px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 8px; color: #c9c7d6; font-size: 22px; }
.brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.brand-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.field .brand-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; margin: 0; }
.brand-col input[type=color] { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; flex: none; cursor: pointer; background: none; }
.brand-col span { display: flex; flex-direction: column; line-height: 1.25; }
.brand-col b { font-size: 11.5px; }
.brand-col small { color: var(--muted); font-size: 10px; }
/* THE BANNERS' BRAND FONT (admin/company - lib/functions-fonts.php): THE CURRENT ONE, AND THE GOOGLE FONTS SEARCH WITH A SAMPLE LINE */
.bf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bf-sample { font-size: 22px; font-weight: 700; margin-right: 6px; line-height: 1.2; }
.bf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 280px; overflow-y: auto; margin: 10px 0 0; padding: 2px; }
.bf-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.bf-item:hover { border-color: var(--indigo); }
.bf-item.on { border-color: var(--indigo); background: var(--indigo-soft); }
.bf-item small { color: var(--muted); font-size: 11px; }
.bf-prev { margin-top: 14px; padding: 18px 20px; border-radius: 10px; background: var(--ink); color: #fff; }
.bf-prev b { display: block; font-size: 26px; font-weight: 800; line-height: 1.15; }
.bf-prev span { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; opacity: .85; }
/* WHERE A PERSON'S SIGNATURE IS INSTALLED (admin/team) - GREEN: SEEN IN AN EMAIL THIS MONTH; GREY: INSTALLED; RED: NEEDS ATTENTION */
.inst-apps { display: inline-flex; gap: 7px; margin-right: 8px; font-size: 13px; vertical-align: middle; }
.inst-live { color: var(--green, #17a05d) !important; }
.inst-set { color: #9a97a8 !important; }
.inst-problem { color: #d93a3a !important; }
.inst-list { list-style: none; margin: 8px 0 0; padding: 0; }
.inst-list li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.inst-list li > i { width: 18px; text-align: center; margin-top: 3px; }
.team-card { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 11.5px; }
.team-card i { color: var(--pink); }
/* PHONES: iOS ZOOMS THE PAGE INTO ANY BOX WITH TEXT UNDER 16px WHEN IT'S TAPPED - SO 16px THERE */
@media (max-width: 600px) and (pointer: coarse) {
	input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search], select, textarea { font-size: 14px; }
}
/* BUSINESS CARDS (admin/cards) - SETTINGS ON THE LEFT, A PHONE-SHAPED LIVE PREVIEW ON THE RIGHT */
.bc-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.bc-preview-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.bc-preview-head select { width: auto; min-width: 180px; padding-top: 6px; padding-bottom: 6px; }
.bc-phone { width: 100%; max-width: 340px; margin: 16px auto 70px; border-radius: 34px; border: 9px solid #231f20; overflow: hidden; background: #fff; box-shadow: 0 14px 36px rgba(35,31,32,.16); }
/* THE BOTTOM MARGIN LEAVES ROOM FOR THE SHADOW INSIDE THE SCROLLING PREVIEW COLUMN */
.bc-phone iframe { display: block; width: 100%; height: min(660px, calc(100vh - 250px)); min-height: 420px; border: 0; }
/* FITS THE SCREEN - THE CARD SCROLLS INSIDE THE PHONE */
.bc-where > div { padding: 14px 0; border-top: 1px solid var(--line); }
.bc-where > div:first-child { border-top: 0; padding-top: 0; }
.bc-where p { margin: 4px 0 8px; }
.bc-code { font-family: Consolas, monospace; font-size: 10px; min-height: 0; background: var(--bg); }
.bc-why { display: block; font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.ed-fields li.off label { color: var(--muted); cursor: not-allowed; }
.ed-fields li.off .bc-why { color: #9a5b00; }
.fb-preview .bc-phone + * { margin-top: 0; }
.ed-fields .ed-move { display: flex; gap: 2px; flex: none; margin-left: 8px; }
/* SECTION TABS IN THE TOP BAR, BESIDE THE TITLE (admin/subnav.php) - BUTTONS, LIKE THE EDITOR'S CHIPS */
#top-bar:has(.subnav) .top-title { flex: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { padding: 7px 16px; border-radius: 22px; font-weight: 600; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; text-decoration: none; }
.subnav a:hover { color: var(--ink); background: rgba(255,255,255,.6); text-decoration: none; }
@media (max-width: 700px) {
	#top-bar:has(.subnav) .top-title { display: none; }
}
/* BUSINESS CARD LAYOUTS (admin/cards) - A TINY DRAWING OF EACH */
.bc-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.bc-lay { border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 8px 9px; cursor: pointer; text-align: center; font: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bc-lay:hover { border-color: #c9c7d6; }
.bc-lay.on { border-color: var(--ink); background: #eef1f6; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.bc-lay b { font-size: 11px; margin-top: 6px; }
.bc-lay small { font-size: 10px; color: var(--muted); line-height: 1.25; }
.bc-lay i { display: block; width: 46px; height: 70px; border-radius: 7px; border: 1px solid #e6e4ec; position: relative; overflow: hidden; background: linear-gradient(#e6e4ec, #e6e4ec) 9px 44px / 28px 3px no-repeat, linear-gradient(#e6e4ec, #e6e4ec) 9px 51px / 22px 3px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 0 0 / 100% 18px no-repeat, #fff; }
.bc-lay i::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #c9c7d6; border: 2px solid #fff; left: 13px; top: 10px; }
.bc-lay-left i::after { left: 5px; }
.bc-lay-left i { background: linear-gradient(#e6e4ec, #e6e4ec) 6px 44px / 28px 3px no-repeat, linear-gradient(#e6e4ec, #e6e4ec) 6px 51px / 22px 3px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 0 0 / 100% 18px no-repeat, #fff; }
.bc-lay-photo i { background: linear-gradient(#e6e4ec, #e6e4ec) 9px 48px / 28px 3px no-repeat, linear-gradient(#e6e4ec, #e6e4ec) 9px 55px / 22px 3px no-repeat, linear-gradient(160deg, #b9b6c6, #6b6875) 0 0 / 100% 38px no-repeat, #fff; }
.bc-lay-photo i::after { display: none; }
.bc-lay-minimal i { background: linear-gradient(var(--ink), var(--ink)) 15px 6px / 16px 4px no-repeat, linear-gradient(#e6e4ec, #e6e4ec) 9px 44px / 28px 3px no-repeat, linear-gradient(#e6e4ec, #e6e4ec) 9px 51px / 22px 3px no-repeat, #fff; }
.bc-lay-minimal i::after { top: 16px; background: #fff; border-color: #c9c7d6; border-width: 1px; }
.bc-lay-dark i { background: linear-gradient(#55525f, #55525f) 9px 44px / 28px 3px no-repeat, linear-gradient(#55525f, #55525f) 9px 51px / 22px 3px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 0 0 / 100% 18px no-repeat, #1c1b22; border-color: #1c1b22; }
.bc-lay-dark i::after { border-color: #1c1b22; background: #55525f; }
.bc-lay-spotlight i { background: linear-gradient(#7d8db0, #7d8db0) 9px 44px / 28px 3px no-repeat, linear-gradient(#fff, #fff) 9px 52px / 12px 12px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 0 14px / 100% 100% no-repeat, #f1f0f5; }
.bc-lay-spotlight i::after { width: 28px; height: 24px; border-radius: 2px; left: 7px; top: 6px; border: 0; background: linear-gradient(160deg, #b9b6c6, #6b6875); }
.bc-lay-compact i { background: linear-gradient(#e6e4ec, #e6e4ec) 24px 12px / 16px 3px no-repeat, linear-gradient(#e6e4ec, #e6e4ec) 24px 19px / 12px 3px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 6px 34px / 34px 6px no-repeat, #fff; }
.bc-lay-compact i::after { left: 5px; top: 9px; }
.bc-lay-arch i { background: radial-gradient(ellipse 34px 9px at 23px 33px, #fff 96%, transparent 100%), linear-gradient(#fff, #fff) 15px 6px / 16px 4px no-repeat, linear-gradient(#e6e4ec, #e6e4ec) 9px 47px / 28px 3px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 8px 56px / 30px 5px no-repeat, linear-gradient(var(--indigo), var(--indigo)) 0 0 / 100% 32px no-repeat, #fff; }
.bc-sub { margin: 22px 0 4px; font-size: 13px; }
/* COMPANY -> THE WAY TO THE PLAN (admin/company) */
.co-plan { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.co-plan:hover { text-decoration: none; border-color: #c9c7d6; }
.co-plan > i { font-size: 22px; color: var(--ink-2); }
.co-plan > span:first-of-type { flex: 1; } .co-plan b { display: block; } .co-plan small { color: var(--muted); line-height: 1.35; display: block; margin-top: 2px; }
/* PROFILE - ONE PERSON (admin/profile) */
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pf-head .who b { font-size: 17px; }
.pf-avatar { width: 52px; height: 52px; font-size: 20px; overflow: hidden; flex: none; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
#ed-person-photo .ed-upload-img { width: 56px; height: 56px; }
/* OWN SOCIAL LINKS - TWO COLUMNS (admin/profile, THE EDITOR'S PERSON BOX) */
.pf-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .pf-socials { grid-template-columns: 1fr; } }
/* THE EDITOR'S PERSON BOX - TABS */
.ed-person-tabs { margin: 0 -22px 18px; grid-template-columns: repeat(var(--n, 3), 1fr); }
.ed-person-tabs button { font-size: 12px; }
/* THE EDITOR'S SOCIAL TAB (A COMPANY) - WHICH NETWORKS, THEIR ORDER, WHOSE LINK */
.ed-soc-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ed-soc-list .check { flex: 1; min-width: 0; }
.ed-soc-list .check > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ed-soc-list .check b { white-space: nowrap; }
.ed-soc-list .check img { flex: none; }
.ed-soc-list .ed-soc-link { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ed-soc-tag { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 99px; background: #eef0f4; color: var(--ink-2); flex: none; }
.ed-soc-tag.own { background: #fde8ef; color: var(--pink); }
.ed-soc-list li.none .check { color: var(--muted); cursor: not-allowed; }
.ed-soc-list li.none img { opacity: .45; }
/* THE EDITOR'S LOGO TAB - WHILE THE LAYOUT HIDES THE LOGO */
.ed-logo-off { line-height: 1.45; }
.ed-logo-off-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bc-icons button i { font-size: 15px; margin-right: 4px; color: var(--ink-2); }
.bc-lay-arch i::after { top: 19px; width: 18px; height: 18px; left: 12px; }
/* MY BUSINESS CARD (admin/card) - WAYS TO USE IT */
.bc-ways > div { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.bc-ways > div:first-child { border-top: 0; padding-top: 0; }
.bc-ways > div > i { width: 38px; height: 38px; border-radius: 10px; background: var(--indigo-soft); color: var(--indigo); display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.bc-ways p { margin: 3px 0 0; }
.sig-side .bc-phone { margin-top: 8px; }
.fb-preview:has(.bc-phone) { padding: 0 24px; margin: 0 -24px; }
/* SIDE ROOM FOR THE SHADOW TOO */
.subnav a.on { background: var(--brand); color: #fff; box-shadow: none; }
/* THE ACTIVE TAB - RED */
/* BULK UPLOAD (admin/team) */
.imp-steps { padding-left: 18px; margin: 0 0 8px; }
.imp-steps li { margin-bottom: 4px; }
.imp-counts { display: flex; gap: 18px; margin: 16px 0 10px; font-size: 12px; }
.imp-counts b { font-size: 18px; margin-right: 3px; }
/* INTEGRATIONS (admin/integrations) */
.int-head { margin: 22px 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.int-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } /* TWO CARDS ACROSS THE FULL WIDTH (IN LINE WITH THE WIDE ONES), ONE ON A NARROW SCREEN */
@media (max-width: 900px) { .int-grid { grid-template-columns: 1fr; } }
.int-grid .card { margin: 0; }
.int-top { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.int-top > i { width: 44px; height: 44px; border-radius: 12px; background: var(--indigo-soft); color: var(--indigo); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.int-top h2 { margin: 0 0 2px; font-size: 15px; }
/* PERMISSIONS (admin/permissions) - A LABEL WITH ITS DESCRIPTION UNDERNEATH */
.perm-list .check { padding: 8px 0; margin: 0; border-bottom: 1px solid var(--line); }
.perm-list .check:last-child { border-bottom: 0; }
.perm-list .check > span { display: flex; flex-direction: column; }
.perm-list .check small { color: var(--muted); font-size: 10.5px; }
/* THE COMPANY SWITCHER (TOP OF THE LEFT BAR - admin/bar-left.php) - LIKE WP ENGINE'S: THE COMPANY, AND A SEARCHABLE LIST TO SWITCH OR ADD ONE */
.co-btn:hover { border-color: #c9c7d6; background: #fff; }
.co-av { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font: normal 700 12px var(--font); flex: none; }
.co-av.co-all { background: var(--indigo-soft); color: var(--indigo); font-size: 11px; }
.co-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.co-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.co-name small { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-ico { color: var(--indigo); font-size: 13px; }
.co-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--indigo); border-radius: 9px; padding: 0 10px; margin-bottom: 6px; }
.co-search input { border: 0 !important; box-shadow: none !important; padding: 8px 0; }
.co-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: 600 12px var(--font); color: var(--ink); text-align: left; text-decoration: none; }
.co-item:hover { background: var(--bg); text-decoration: none; }
.co-item .co-av { width: 26px; height: 26px; font-size: 10px; }
.co-item span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.co-item small { color: var(--muted); font-weight: 400; font-size: 10px; }
.co-item.on { background: var(--indigo-soft); }
.co-tick { color: var(--indigo); font-size: 10px; }
.co-add { color: var(--pink); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; }
/* THE TABS ON A WHITE BAR */
.subnav { display: inline-flex; gap: 4px; padding: 4px; border-radius: 30px; background: #fff; flex: 1 1 auto; max-width: max-content; overflow-x: auto; scrollbar-width: none; margin-right: auto; border: 1px solid var(--line); }
/* =====================================================================================
   THE LEFT BAR - OPEN (240px) OR COLLAPSED TO ICONS (72px, WIDE SCREENS - THE MENU BUTTON; html.lb-closed, REMEMBERED IN admin/head.php).
   NOTHING INSIDE CHANGES SIZE OR MOVES: EVERY PART KEEPS THE FULL WIDTH AND THE BAR SIMPLY GETS NARROWER (IT CLIPS), WHILE THE WORDS FADE.
   THE LOGO MARK, THE COMPANY'S INITIAL AND EVERY ICON SHARE ONE CENTRE LINE, 36px FROM THE LEFT, OPEN OR CLOSED.
   ===================================================================================== */
#left-bar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--left); background: #fff; color: var(--ink); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 30; overflow: hidden; }
#left-bar > *:not(script, dialog) { width: 240px; flex-shrink: 0; }
#left-bar > .left-mfa, #left-bar > .left-me { width: 212px; } /* THE BOXES WITH 14px SIDE MARGINS - 240 LESS THE MARGINS */
#left-logo { display: block; padding: 24px 0 20px 23px; width: 240px; }
#left-logo img { height: 32px; display: block; clip-path: inset(0 0 0 0); transition: clip-path .24s cubic-bezier(.4, 0, .2, 1); }
.left-menu { list-style: none; margin: 0; padding: 4px 10px; flex: 1; overflow-y: auto; overflow-x: hidden; }
.left-menu li a { display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 16px; border-radius: 8px; color: var(--ink-2); font-size: 13.5px; position: relative; white-space: nowrap; }
.left-menu li a i { width: 20px; text-align: center; color: var(--muted); font-size: 15px; flex: none; }
.left-menu li a span, .left-menu .left-head, .left-mfa, .co-name, .co-ico { transition: opacity .16s; }
.co-switch { position: relative; margin: 0 11px 12px; width: 218px !important; }
.co-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; font: inherit; color: inherit; text-align: left; transition: background .2s, border-color .2s; }
.left-mfa { margin: 12px 14px 16px; padding: 12px; border-radius: 10px; font-size: 11px; color: var(--ink-2); width: 212px !important; background: var(--bg); border: 1px solid var(--line); }
@media (min-width: 821px) {
	#menu-toggle { display: block; margin-left: -8px; }
	#left-bar { transition: width .24s cubic-bezier(.4, 0, .2, 1); }
	#main-bar { transition: margin-left .24s cubic-bezier(.4, 0, .2, 1); }
	html.lb-closed { --left: 72px; }
	html.lb-closed #left-logo img { clip-path: inset(0 calc(100% - 30px) 0 0); }
	html.lb-closed .left-menu li a span, html.lb-closed .left-menu .left-head, html.lb-closed .co-name, html.lb-closed .co-ico { opacity: 0; }
	html.lb-closed .left-mfa { opacity: 0; visibility: hidden; transition: opacity .16s, visibility 0s .16s; }
	html.lb-closed .co-btn { border-color: transparent; background: transparent; }
	html.lb-closed .left-menu li a.on, html.lb-closed .left-menu li a:hover { background: transparent; }
	html.lb-closed .left-menu li a.on i { color: var(--pink); }
}
/* THE COMPANY LIST FLOATS ABOVE THE PAGE (POSITIONED BY admin/bar-left.php) - THE BAR ITSELF CLIPS */
.co-pop { position: fixed; top: calc(100% + 6px); left: 0; width: 260px; min-width: 0; background: #fff; border-radius: 12px; box-shadow: 0 12px 34px rgba(35,31,32,.18); padding: 8px; z-index: 50; max-height: 420px; overflow-y: auto; }
/* THE COLOUR PICKER (js/admin.js) - HEX FIRST, THE PAGE'S COLOURS, THEN THE BROWSER'S PICKER */
.uc-pick { position: fixed; z-index: 1000; width: 214px; padding: 10px; background: #fff; border-radius: 12px; box-shadow: 0 12px 34px rgba(35,31,32,.2); border: 1px solid var(--line); }
.uc-pick-row { display: flex; gap: 8px; align-items: center; }
.uc-pick-now { width: 36px; height: 36px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.uc-pick-row input { flex: 1; min-width: 0; font: 600 13px ui-monospace, Consolas, monospace !important; text-transform: lowercase; padding: 7px 9px !important; }
.uc-pick-row input.bad { border-color: var(--red) !important; }
.uc-pick-sw { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 10px; }
.uc-pick-sw button { aspect-ratio: 1; border: 0; border-radius: 5px; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.uc-pick-sw button:hover { transform: scale(1.12); }
.uc-pick-more { width: 100%; margin-top: 10px; padding: 7px; border: 0; border-radius: 7px; background: var(--bg); color: var(--ink-2); font: 600 11px var(--font); cursor: pointer; }
.uc-pick-more:hover { background: var(--indigo-soft); color: var(--indigo); }
/* HOW IT WORKS (admin/guide) - NUMBERED STEPS IN TWO STAGES, EACH CLICKING THROUGH */
.hiw-stage { margin: 26px 0 12px; font-size: 17px; }
.hiw-stage:first-of-type { margin-top: 8px; }
.hiw-stage span { font-size: 11.5px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.hiw { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.hiw-step { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.hiw-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hiw-num { width: 30px; height: 30px; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.hiw-top i { font-size: 20px; color: var(--indigo); }
.hiw-step h3 { margin: 0 0 6px; font-size: 14.5px; }
.hiw-step p { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.hiw-step .btn-row { gap: 8px; }
/* IDEAS FOR YOUR BUSINESS (admin/ideas) - BUSINESS TYPES, THEN ONE TYPE'S SETUP WITH A LIVE PREVIEW */
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.idea-tile { position: relative; display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
a.idea-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(35,31,32,.12); text-decoration: none; }
.idea-tile h3 { margin: 14px 0 6px; font-size: 15px; }
.idea-tile p { margin: 0 0 16px; font-size: 12px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.idea-go { font-weight: 600; font-size: 12px; color: var(--pink); }
.idea-mine { position: absolute; top: 18px; right: 18px; }
.idea-soon { background: transparent; box-shadow: none; border: 1.5px dashed #d8d6e2; }
.idea-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--indigo-soft); color: var(--indigo); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.idea-head { display: flex; gap: 14px; align-items: center; margin-bottom: 4px; }
.idea-points, .idea-camps { list-style: none; margin: 0; padding: 0; }
.idea-points li, .idea-camps li { padding: 6px 0 6px 26px; position: relative; font-size: 12.5px; line-height: 1.45; }
.idea-points li i, .idea-camps li i { position: absolute; left: 0; top: 9px; color: var(--green, #17a05d); }
.idea-camps li i { color: var(--pink); }
.idea-camps { margin-bottom: 12px; }
.idea-input { margin-top: 6px; max-width: 220px; }
.perm-list .check.off { opacity: .6; }
.idea-prev .sig-preview { overflow-x: auto; }
.idea-card-off { margin: 4px 4px 0; display: flex; gap: 8px; align-items: center; }
.idea-card-off i { font-size: 14px; color: var(--indigo); }
/* AGENCY (admin/agency, admin/agency-rollout) */
.ag-bar { width: 120px; height: 6px; border-radius: 3px; background: #ebeaf1; overflow: hidden; margin-bottom: 3px; }
.ag-bar span { display: block; height: 100%; background: var(--green, #17a05d); border-radius: 3px; }
.ag-clients tr.ag-here td { background: var(--indigo-soft); }
.ag-clients select { width: auto; padding: 6px 30px 6px 10px; }
.ag-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ag-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.ag-step { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
.ag-step > span { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; background: #ebeaf1; color: var(--ink-2); }
.ag-step.done > span { background: var(--green, #17a05d); color: #fff; }
.ag-step b { display: block; font-size: 12px; }
.ag-step small { color: var(--muted); font-size: 10.5px; line-height: 1.35; display: block; }
.ag-people td .btn + .btn { margin-left: 4px; }
@media (max-width: 900px) {
	.ag-steps { grid-template-columns: 1fr 1fr; }
}
/* CUSTOM TEMPLATE (admin/design-html) - THE CODE, THE FIELDS, THE PLACEHOLDERS, THE CHECKS */
.tpl-cols .sig-side { position: sticky; top: 84px; align-self: start; }
.tpl-code { width: 100%; font: 10.5px/1.5 ui-monospace, Consolas, 'Courier New', monospace !important; tab-size: 2; white-space: pre; overflow-x: auto; min-height: 380px; resize: vertical; }
.tpl-vars { display: flex; flex-direction: column; gap: 8px; }
/* A FIELD: NAME, LABEL, TYPE AND REMOVE ON ONE LINE, ITS VALUE UNDERNEATH */
.tpl-var { display: grid; grid-template-columns: 1fr 1fr 110px auto; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.tpl-var > [data-f="value"], .tpl-var > .tpl-val { grid-column: 1 / 4; grid-row: 2; }
.tpl-var > label { grid-column: 1 / -1; margin: 0; font-weight: 600; font-size: 11.5px; }
.tpl-var > label ~ * { grid-column: 1 / -1; grid-row: auto; }
.tpl-val { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tpl-val code { font-size: 10px; color: var(--muted); }
.tpl-val input[type=color] { width: 38px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }
.tpl-pic { width: 110px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: repeating-conic-gradient(#6f6c80 0% 25%, #97949f 0% 50%) 50% / 12px 12px; display: flex; align-items: center; justify-content: center; padding: 4px; color: #c9c7d6; overflow: hidden; } /* MID-TONE: WHITE AND DARK PICTURES BOTH SHOW */
.tpl-pic img { max-width: 100%; max-height: 100%; display: block; }
.tpl-wh { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); }
.tpl-wh input { width: 64px; padding: 6px 8px !important; }
.tpl-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.tpl-keys button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font: inherit; }
.tpl-keys button:hover { border-color: var(--indigo); background: var(--indigo-soft); }
.tpl-keys code { font-size: 10px; color: var(--indigo); background: none; padding: 0; }
.tpl-keys span { font-size: 10px; color: var(--muted); }
.tpl-preview { overflow-x: auto; }
.tpl-checks { list-style: none; margin: 0; padding: 0; }
.tpl-checks li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.45; }
.tpl-checks li:first-child { border-top: 0; padding-top: 0; }
.tpl-checks li i { margin-top: 3px; }
.tpl-checks li.ok i { color: var(--green, #17a05d); }
.tpl-checks li.warn i { color: #d98b00; }
.tpl-checks li.bad i { color: var(--red); }
@media (max-width: 700px) {
	.tpl-var { grid-template-columns: 1fr 1fr auto; }
	.tpl-var > select { grid-column: 1 / 3; }
	.tpl-var > [data-f="value"], .tpl-var > .tpl-val { grid-column: 1 / -1; grid-row: auto; }
}
.tpl-cols .card-head select { width: auto; min-width: 0; padding-top: 6px; padding-bottom: 6px; }
.ag-sample { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.ag-sample .field { margin-bottom: 10px; }
/* DOWNLOAD ALL (admin/agency-rollout #ag-zip) - TWO CHOICES */
.ag-zip-opt { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.ag-zip-opt + .ag-zip-opt { margin-top: 10px; }
.ag-zip-opt:hover { border-color: var(--ink-2); text-decoration: none; }
.ag-zip-opt i { font-size: 20px; margin-top: 2px; color: var(--ink-2); }
.ag-zip-opt b { display: block; margin-bottom: 3px; }
.ag-zip-opt small { color: var(--muted); line-height: 1.4; }
@media (max-width: 900px) {
	.ag-sample { grid-template-columns: 1fr 1fr; }
}
/* ADDRESS - UP TO 3 LINES (lib/functions.php ucAddressLines) */
.addr-lines { display: flex; flex-direction: column; gap: 6px; }
.ag-sub { font-size: 12px; margin: 6px 0 10px; }
.ag-sub span { font-weight: 400; color: var(--muted); }
/* CUSTOM TEMPLATE STUDIO (admin/design-html) - THE STARTING POINTS, THE CLICKABLE SIGNATURE, THE PANEL THAT CHANGES IT */
.tpl-starts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tpl-start-item { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); }
.tpl-start-item:hover { border-color: var(--pink); box-shadow: 0 6px 20px rgba(35,31,32,.08); }
.tpl-start-item b { font-size: 12.5px; margin-top: 6px; }
.tpl-start-item small { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.tpl-start-prev { display: block; height: 150px; overflow: hidden; border-radius: 8px; background: #f7f7fa; position: relative; pointer-events: none; }
.tpl-start-prev > span { display: block; transform: scale(.48); transform-origin: top left; width: 208%; padding: 14px; }
.tpl-start-own .tpl-start-prev { display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--indigo); }
.tpl-studio { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.tpl-inspector { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; padding: 18px; }
.ins-sec { padding: 4px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; border-radius: 10px; transition: background .3s, box-shadow .3s; }
.ins-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.ins-sec h3 { font-size: 13px; margin: 0 0 10px; }
.ins-sec h3 small { font-weight: 400; color: var(--muted); font-size: 10px; margin-left: 4px; }
.ins-sec .field { margin-bottom: 8px; }
.ins-sec .field label { font-size: 10.5px; margin-bottom: 3px; }
.ins-head { display: flex; justify-content: space-between; align-items: center; }
.ins-head h3 { margin: 0 0 10px; }
.ins-flash { box-shadow: 0 0 0 3px var(--pink); background: #fff5f7; }
.ins-focus { padding: 12px; border-radius: 10px; background: var(--indigo-soft); margin-bottom: 14px; }
.tpl-var2 { padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: #fff; transition: background .3s, box-shadow .3s; }
.tpl-var2-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tpl-var2-head label { font-weight: 600; font-size: 11px; margin: 0; }
.tpl-cog { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; }
.tpl-cog:hover { color: var(--indigo); }
.tpl-var2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.tpl-var2-set small { grid-column: 1 / -1; }
.tpl-preview [data-tf], .tpl-preview [data-tt], .tpl-preview img[data-src] { cursor: pointer; transition: outline-color .15s; outline: 2px dashed transparent; outline-offset: 2px; }
.tpl-preview [data-tf]:hover, .tpl-preview [data-tt]:hover, .tpl-preview img[data-src]:hover { outline-color: rgba(255,45,96,.6); }
.tpl-preview .tpl-sel { outline: 2px solid var(--pink) !important; }
.tpl-advanced summary { cursor: pointer; font-weight: 600; font-size: 13px; }
@media (max-width: 1100px) {
	.tpl-studio { grid-template-columns: 1fr; }
	.tpl-inspector { position: static; max-height: none; }
}
/* SET IT UP (admin/design-html) - WHAT EACH PART OF PASTED HTML IS */
.setup-h { font-size: 12px; margin: 14px 0 6px; }
.setup-list td { vertical-align: top; padding: 8px 10px; }
.setup-list td:first-child { width: 50%; }
.setup-list select { width: 100%; }
.setup-text { font-weight: 600; word-break: break-word; }
.tpl-lib-item { cursor: default; }
.tpl-lib-item:hover { border-color: var(--line); box-shadow: none; }
img[src$="upclient-bm.svg"] { content: url('../img/upclient-bm-navy.svg'); }
.auth-side img[src$="upclient-bm.svg"] { content: url('../img/upclient-bm-w.svg'); }
.auth-side > :not(img):not(.auth-home) { display: none; }
.btn[disabled] { opacity: 1; background: #d5d9e1; color: #fff; box-shadow: none; cursor: not-allowed; }
/* PLAN CARDS (Settings -> Company & plan - admin/company.php): BIG PRICE, TICKED FEATURES, YOUR PLAN OUTLINED IN NAVY WITH A TICK IN THE CORNER */
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan-card { position: relative; display: flex; flex-direction: column; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); padding: 24px 24px 22px; }
.plan-card.on { background: #fff; border: 2px solid var(--ink); padding: 23px 23px 21px; box-shadow: 0 10px 30px rgba(19,33,58,.08); }
.plan-card h3 { font-size: 17px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.plan-cur { font: 600 11.5px var(--font); color: var(--ink); background: var(--indigo-soft); padding: 3px 9px; border-radius: 20px; letter-spacing: 0; }
.plan-tick { position: absolute; top: -11px; right: -11px; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 0 0 4px #fff; }
.plan-price { font: 600 34px/1.05 var(--font-head); color: var(--ink); letter-spacing: -.02em; }
.plan-per { font-size: 13.5px; color: var(--muted); margin: 6px 0 18px; }
.plan-list { list-style: none; padding: 16px 0 0; margin: 0 0 18px; border-top: 1px solid var(--line); font-size: 14px; flex: 1; }
.plan-list li { display: flex; gap: 10px; padding: 4px 0; color: var(--ink-2); }
.plan-list i { color: var(--ink); font-size: 12px; margin-top: 5px; }
.plan-card .btn { align-self: flex-start; }
@media (max-width: 900px) { .plan-cards { grid-template-columns: minmax(0, 1fr); } }
/* BILLING (UNDER THE PLAN CARDS) - MONTHLY / ANNUAL, THE NEXT CHARGE, THE CARD, INVOICE DETAILS, PAST INVOICES (lib/functions-billing.php) */
.plan-save { margin-left: 4px; padding: 1px 7px; border-radius: 20px; background: var(--green-soft); color: #11663d; font-size: 10.5px; }
.bill-box { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.bill-box .note .btn { margin-left: 8px; }
.bill-rows { display: flex; flex-direction: column; gap: 10px; }
.bill-rows > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bill-rows > div > span { width: 110px; color: var(--muted); font-size: 13px; }
.bill-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0 14px; align-items: start; margin-top: 20px; max-width: 760px; }
.bill-details .btn { margin-top: 23px; }
@media (max-width: 700px) { .bill-details { grid-template-columns: minmax(0, 1fr); } .bill-details .btn { margin-top: 0; justify-self: start; } }
/* PHONES (UP TO 820px): THE UPCLIENT MARK BESIDE THE MENU BUTTON, AND "YOU" (NAME, PROFILE, APPEARANCE, SIGN OUT) IN THE SLIDE-OUT MENU INSTEAD OF THE TOP BAR */
.top-mark, .left-me { display: none; }
@media (max-width: 820px) {
	.top-mark { display: block; flex: none; } .top-mark img { height: 35px; width: auto; display: block; }
	#top-bar .top-user { display: none; }
	#left-bar { z-index: 100; } /* THE SLIDE-OUT MENU ABOVE EVERYTHING (THE EDITOR'S FLOATING BUTTON IS 70, ITS PANEL 80) */
	#left-bar { overflow-y: auto; } #left-bar .left-menu { flex: none; overflow: visible; } /* THE WHOLE MENU SCROLLS - NOTHING HIDES BEHIND "YOU" */
	#left-bar { width: min(320px, 86vw); } #left-bar > *:not(script, dialog), #left-bar > .left-mfa, #left-bar > .left-me { width: auto; } #left-bar > .left-mfa { width: auto !important; } /* WIDER ON PHONES - THE PAGE STILL PEEKS OUT TO TAP SHUT */
	.left-me { display: block; margin: 8px 14px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
	.left-me-who { display: flex; gap: 10px; align-items: center; padding: 0 2px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
	.left-me-who .avatar { background: var(--brand); flex: none; width: 30px; height: 30px; font-size: 15px; } .left-me-who div { min-width: 0; }
	.left-me-who b { display: block; font-size: 13px; } .left-me-who span:not(.avatar) { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.left-me > a { display: flex; align-items: center; gap: 8px; padding: 6px 4px; color: var(--ink); font-size: 13px; }
	.left-me .menu-seg { margin: 6px 0; } .left-me .menu-seg button { padding: 5px 3px; font-size: 10.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .left-me .menu-seg button i { display: none; } /* NO ICONS HERE - THE WORDS FIT WITH ROOM TO SPARE */
}
#menu-shade { display: none; position: fixed; inset: 0; z-index: 99; background: rgba(19,33,58,.35); }

.radio-card.off { opacity: .55; cursor: not-allowed; } .radio-card.off .badge { margin-left: 6px; font-size: 10.5px; } /* A CHOICE THE PLAN DOESN'T INCLUDE (admin/campaign WHO SEES IT) */

/* SET-UP STEPS (Integrations -> Google Workspace / Microsoft 365, AND THE INSTALL WIZARD): A STATUS LINE WITH A "Set up" BUTTON THAT OPENS NUMBERED STEPS;
   A DONE STEP GETS A TICK. admin/workspace-box.php, admin/addin-box.php - THE BUTTON IS .setup-toggle (js/admin.js) */
.setup { margin-top: 4px; }
.setup-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: var(--bg); }
.setup-state { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.35; }
.setup-state > i { font-size: 18px; color: var(--muted); flex: none; }
.setup-state.done > i { color: var(--green); }
.setup-state.part > i { color: var(--amber); }
.setup-state.bad > i { color: var(--red); }
.setup-state small { display: block; color: var(--muted); font-size: 12.5px; }
.setup-toggle .fa-chevron-down { font-size: 11px; transition: transform .15s; margin-left: 2px; }
.setup.open .setup-toggle .fa-chevron-down { transform: rotate(180deg); }
.setup-steps { list-style: none; margin: 14px 0 0; padding: 0; display: none; }
.setup.open .setup-steps { display: block; }
.setup-steps > li { display: flex; gap: 12px; padding: 0 0 18px; position: relative; }
.setup-steps > li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 2px; background: var(--line); } /* THE LINE BETWEEN THE NUMBERS */
.setup-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--card); border: 2px solid var(--line); color: var(--ink-2); }
.setup-steps > li.done .setup-num { background: var(--green); border-color: var(--green); color: #fff; }
.setup-body { flex: 1; min-width: 0; padding-top: 3px; }
.setup-body > b { display: block; font-size: 14px; margin-bottom: 3px; }
.setup-body > p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.setup-body > p:last-child { margin-bottom: 0; }
.setup-body .wz-share { margin: 0 0 10px; }
.setup-body .done-note { color: #11663d; font-size: 13px; font-weight: 600; }
.setup-foot { margin: 0; font-size: 12.5px; color: var(--muted); }
.setup-live { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
/* HOME'S GUIDE (admin/home "Get set up") - THE SAME NUMBERED STEPS; THE ONE YOU'RE ON OPEN AND MARKED, LATER ONES QUIETER */
.guide .setup-steps { display: block; margin-top: 6px; }
.guide-steps > li.on .setup-num { background: var(--ink); border-color: var(--ink); color: var(--card); }
.guide-steps > li.on > .setup-body > b { font-size: 15.5px; }
.guide-steps > li.later > .setup-body > b { color: var(--ink-2); font-weight: 600; }
.guide-steps > li.later > .setup-body > p { margin: 0; }
/* THE INSTALL BLOCK (admin/install-box.php) - THIS COMPUTER'S LIKELY APPS AS BIG BUTTONS, THEN THE PHONE */
.ib { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-top: 4px; }
.ib-part { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.ib-head { display: block; font-size: 13.5px; margin-bottom: 10px; } .ib-head i { color: var(--indigo); margin-right: 4px; }
.ib-apps { display: grid; gap: 8px; margin-bottom: 10px; }
.ib-app { width: 100%; } .ib-app small { display: block; color: var(--muted); font-size: 12px; } .ib-app span { flex: 1; } .ib-app .ib-go { color: var(--muted); font-size: 14px; }
.ib-phone-row { display: flex; gap: 14px; align-items: flex-start; } .ib-phone-row .qr { width: 110px; flex: none; } .ib-phone-row .qr svg { width: 100%; height: auto; display: block; } .ib-phone-row p { margin: 0; line-height: 1.45; }
@media (max-width: 900px) { .ib { grid-template-columns: minmax(0, 1fr); } }
.setup-facts { color: var(--ink-2); }
/* SOMETHING THAT NEEDS THE ADMIN, WITH ITS FIX - RIGHT UNDER THE STATUS, NEVER INSIDE Settings (admin/workspace-box, admin/addin-box) */
.setup-need { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--amber-soft); }
.setup-need > b { display: block; font-size: 13.5px; } .setup-need > b i { color: var(--amber); margin-right: 4px; }
.setup-need > p { margin: 4px 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.setup-need .wz-share { margin: 0 0 10px; }
/* Settings' RARE ACTIONS (DISCONNECT) - UNDER THE STEPS, ONLY WHEN OPEN */
.setup-more { display: none; padding: 12px 0 0 40px; border-top: 1px dashed var(--line); }
.setup.open .setup-more { display: block; }
.setup-live > p { margin: 0 0 10px; font-size: 13px; }
/* ADD PEOPLE FROM GOOGLE / MICROSOFT (js/admin.js [data-pick]) - A TICK LIST OF THE STAFF LIST */
.modal.pick { width: min(680px, calc(100% - 32px)); }
.pick-note { margin: 0 0 12px; }
.pick-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pick-tools .pick-find { flex: 1; min-width: 180px; }
.pick-tools .check { margin: 0; align-items: center; }
.pick-tools .check input[type=checkbox] { margin-top: 0; }
.modal.notice .pick-tools { gap: 16px; }
.pick-list { border: 1px solid var(--line); border-radius: 10px; max-height: 46vh; overflow-y: auto; }
.pick-list > p, .pick-list > .note { margin: 12px; }
.pick-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pick-row:last-child { border-bottom: 0; }
.pick-row:hover { background: var(--bg); }
.pick-row input { margin-top: 3px; flex: none; }
.pick-row b { display: block; font-size: 13.5px; }
.pick-row small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; word-break: break-word; }
.pick-row.off { cursor: default; opacity: .6; }
.modal.pick .modal-foot { align-items: center; }
.modal.pick .modal-foot .check { margin: 0; align-items: center; }
.modal.pick .modal-foot .check input[type=checkbox] { margin-top: 0; }
.modal.pick .pick-count { margin-right: auto; }
/* THE PICKER'S / HEADS-UP WINDOW'S EXTRAS: WHERE EACH PERSON EMAILS (AMBER: THIS CONNECTION WON'T REACH IT), WHEN THEY WERE TOLD (js/admin.js ucNotice) */
.pick-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; }
.pick-where { color: var(--ink-2); }
.pick-where.warn { color: #7a4a00; }
.pick-told { color: #11663d; }
.pick-warn { margin: 0 0 12px; }
.pick-tell-too { margin-right: 4px; }
.notice-fields { display: grid; grid-template-columns: 190px 1fr; gap: 14px; margin-bottom: 12px; align-items: start; }
.notice-fields .field { margin: 0; }
.notice-fields label { white-space: nowrap; }
.notice-fields input, .notice-fields textarea { box-sizing: border-box; height: 42px; min-height: 42px; }
.notice-fields textarea { resize: vertical; padding-top: 10px; line-height: 1.3; }
.notice-fields small { display: block; margin-top: 5px; font-size: 12px; }
@media (max-width: 560px) { .notice-fields { grid-template-columns: 1fr; } }
.notice-prev { margin: 0 0 14px; }
.notice-prev summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.notice-prev iframe { display: block; width: 100%; height: 340px; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.modal.notice { width: min(700px, calc(100% - 32px)); }
.nt-sent { text-align: center; padding: 18px 10px 8px; }
/* "Your team's signatures are updating" (admin/sig-updating.php) */
.su-note { font-size: 13px; margin-bottom: 18px; }
.su-note ul { list-style: none; margin: 8px 0 10px; padding: 0; }
.su-note li { display: flex; gap: 8px; margin: 0 0 5px; line-height: 1.45; }
.su-note li i { width: 16px; margin-top: 3px; flex: none; text-align: center; }
.nt-sent > i { font-size: 40px; color: var(--green); }
.nt-sent h3 { margin: 12px 0 6px; font-size: 18px; }
.nt-sent p { margin: 0 0 8px; }
/* Integrations - WHERE THE COMPANY'S EMAIL IS DELIVERED */
.int-mailhost { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin: 0 0 18px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; }
.int-mailhost > i { font-size: 18px; margin-top: 2px; color: var(--ink-2); }
.su-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.su-act #su-said { color: #11663d; font-weight: 600; }
.su-act #su-said.bad { color: #9b1c35; }
/* Integrations - "Every app, every phone" (NOT BUILT YET - I'M INTERESTED) */
.int-wide { margin: 0; }
.ss-ask { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-ask input { flex: 1; min-width: 220px; }
.mk-show .mk-strip { margin-top: 10px; }
/* DRAG TO REORDER (js/sortable.js) - THE GRIP ON EACH ITEM, AND THE ITEM WHILE IT'S DRAGGED */
.drag-handle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; align-self: stretch; color: #a3a8b6; cursor: grab; touch-action: none; }
.drag-handle:hover { color: var(--ink); }
.ed-fields li .drag-handle { margin-right: 6px; }
.ed-fields li > label { flex: 1; min-width: 0; }
.is-dragging { position: relative; z-index: 2; background: var(--card); box-shadow: 0 8px 22px rgba(19,33,58,.16); border-radius: 8px; }
body.is-sorting, body.is-sorting * { cursor: grabbing !important; user-select: none; }
/* THE FORM BUILDER'S QUESTIONS: ON A LIGHT GREY PANEL, EACH ONE A CLEARLY OUTLINED WHITE CARD (NOT WHITE ON WHITE) */
#fb-fields { background: var(--bg); border-radius: 12px; padding: 10px; }
#fb-fields .fb-field { border-color: #d6d9e2; box-shadow: 0 1px 2px rgba(19,33,58,.06); }
#fb-fields .fb-field:last-child { margin-bottom: 0; }
#fb-fields .fb-field-head { gap: 10px; padding-left: 6px; }
/* (THE FORM BUILDER'S ROW: THE GRIP IS NOW ITS FIRST span - .fb-field-head > span:first-of-type ABOVE MEANT THE QUESTION TEXT) */
.fb-field-head > span.drag-handle { flex: 0 0 18px; flex-direction: row; }
.fb-field-head > span.drag-handle + i + span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* THE PICTURE LIBRARY (js/admin.js ucLibraryPick) - THE "Library" BUTTON BESIDE AN UPLOAD, AND THE WINDOW OF PICTURES */
.uc-lib-btn { margin-left: 6px; }
.modal.uc-lib { width: min(760px, calc(100% - 32px)); }
.uc-lib-tabs { margin-bottom: 14px; }
.uc-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.uc-lib-item { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.uc-lib-pick { display: grid; place-items: center; width: 100%; height: 110px; padding: 8px; border: 0; cursor: pointer; background: repeating-conic-gradient(#f1f2f6 0 25%, #fff 0 50%) 0 0 / 14px 14px; } /* (A CHECKERBOARD - TRANSPARENT LOGOS SHOW) */
.uc-lib-pick img { max-width: 100%; max-height: 94px; object-fit: contain; }
.uc-lib-pick:hover { outline: 2px solid var(--pink); outline-offset: -2px; }
.uc-lib-meta { display: block; padding: 6px 8px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); }
.uc-lib-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 6px; background: rgba(255,255,255,.92); color: var(--muted); cursor: pointer; opacity: 0; }
.uc-lib-item:hover .uc-lib-del, .uc-lib-del:focus { opacity: 1; }
.uc-lib-del:hover { color: var(--red); }
.pick-row .pick-invite, .pick-row .pick-invited { margin-top: 6px; } .pick-row .pick-invite { display: inline-flex; }

/* EMAIL SIGNATURE -> INSTALL: "My signature | Everyone at <company>" (admin/signature) AND THE EVERYONE TAB (admin/rollout-team.php) */
.rt-tabs { display: inline-flex; margin: 0 0 16px; background: var(--card); border: 1px solid var(--line); }
.rt-tabs a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 9px 16px; border-radius: 20px; font: 600 13px var(--font); color: var(--ink-2); }
.rt-tabs a.on { background: var(--ink); color: var(--card); } .rt-tabs a:hover { text-decoration: none; }
.rt-table button.link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--indigo); }
.rt-progress { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; } .rt-progress > div:first-child { flex: none; } .rt-progress .wz-progress { flex: 1; min-width: 160px; margin: 0; }
.rt-sys { margin: 0 0 12px; display: inline-flex; flex-wrap: wrap; }
.rt-apps { margin-top: 12px; } .rt-apps summary { cursor: pointer; }
.rt-table td { vertical-align: top; }
.rt-app-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); margin: 0 4px 4px 0; white-space: nowrap; }
.rt-app-tag.live { background: var(--green-soft); border-color: transparent; } .rt-app-tag.problem { background: var(--red-soft); border-color: transparent; }
.rt-log summary { cursor: pointer; }
@media (max-width: 600px) { .rt-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .rt-tabs a { justify-content: center; text-align: center; padding: 9px 8px; } }
/* COMPANY -> OVERVIEW (admin/overview) */
.co-ov-head { display: flex; align-items: center; gap: 16px; } .co-ov-head > div { flex: 1; min-width: 0; }
.co-ov-logo { width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; font-size: 24px; color: var(--muted); }
.co-ov-logo img { max-width: 86%; max-height: 86%; object-fit: contain; }
.co-ov { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 18px; }
.co-ov-tile { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; margin: 0; transition: border-color .15s, box-shadow .15s; }
.co-ov-tile:hover { text-decoration: none; border-color: var(--ink-2); }
.co-ov-tile > i { font-size: 20px; color: var(--indigo); margin-bottom: 6px; }
.co-ov-tile > b { font-size: 26px; font-family: var(--font-head, inherit); }
.co-ov-tile > span { color: var(--ink-2); font-size: 13px; }
.co-ov-tile .wz-progress { margin: 6px 0 0; }
.co-ov-tile > em { font-style: normal; font-weight: 600; font-size: 13px; margin-top: auto; padding-top: 10px; color: var(--indigo); }
.co-ov-details { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; }
.co-ov-details i { color: var(--muted); } .co-ov-details li.ok i { color: var(--green); }
/* A SETTING ON AN INTEGRATIONS CARD (admin/integrations - UpClient for Windows' PICTURES) */
.int-setting { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .int-setting > b { display: block; margin-bottom: 6px; } .int-setting .check { margin: 0 0 6px; align-items: flex-start; }

/* PHONES: BIGGER TEXT - MADE BY tools/phone-text.php, DON'T EDIT BY HAND */
@media (max-width: 600px) {
	body { font-size: 15.5px; }
	input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: 16px !important; } /* (UNDER 16px AN iPHONE ZOOMS IN WHEN A FIELD IS TAPPED) */
	.left-company, .left-company a, .left-mfa .link, .menu-pop .menu-who, table.list th, .who span, .copy-box input, .dash-main .ed-chips a, .dash-chart .dash-lab, .or, .ed-tabs button, .ed-chips button, .ed-customise h4, .ed-hint, .st-grip, .ed-goal, .wz-card em, .doc-type, .ed-goal-tag, .wz-card > .wz-likely, .wz-opt > .wz-likely, .ed-more-label, .left-switch summary, .left-switch button, .dirty-pill, .fb-field-head small, .fb-type, .comp-win .comp-place, .fr-bar, .menu-pop .menu-head, .brand-col small, .bf-item small, .ed-soc-tag, .int-head, .perm-list .check small, .co-name small, .co-item small, .co-tick, .left-mfa, .uc-pick-more, .ag-step > span, .ag-step small, .tpl-wh, .tpl-keys span, .tpl-start-item small, .ins-sec h3 small, .ins-sec .field label, .tpl-var2-head label, .plan-save { font-size: 12.5px; }
	.field .hint, .dash-kpi-foot, .ed-customise .ed-switch-row small, .wz-group, .ed-more summary, .brand-col b, .team-card, .ed-soc-list .ed-soc-link, .hiw-stage span, .tpl-var > label, .tpl-checks li, .plan-cur, .uc-lib-meta { font-size: 13px; }
	.menu-pop .menu-who b, .menu-pop a, .ed-switch-row small, .note, #toast, .steps, .checklist .ck-text, .setup-ring-text small, .dash-kpi-num em, .dash-try-item small, .dash-feed small, .dash-top small, .auth-foot, .tabbed > .ed-tabs button, .ed-tab h3, .ed-banner-img, .st-delay select, .wz-num, .wz-card small, .wz-state, .wz-dots span, .wz-opt small, .wz-where small, .fb-field-head b, .w-join span, .ed-person-tabs button, .imp-counts, .co-name b, .co-item, .hiw-num, .hiw-step p, .idea-tile p, .idea-go, .ag-step b, .ag-sub, .setup-h, .ib-app small, .pick-tags, .notice-fields small, .rt-app-tag { font-size: 13.5px; }
	.small, .left-company b, .stat-label, .btn.sm, .setup-ring-dial b, .dash-kpi-top, .dash-legend button, .ban-text small, .ban-clicks, .ed-subtabs button, .ed-customise .field > label, .ed-stage-actions .ed-dirty, .doc-drop small, .wz-share input, .ed-doc-up, .idea-points li, .idea-camps li, .tpl-start-item b, .setup-state small, .setup-foot, .pick-row small, .rt-table button.link { font-size: 14px; }
	.field label.btn:not(.sm), .field label, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search], select, textarea, .trial-bar, .ref-steps li, .dash-locked-msg span, .dash-list li, .dash-feed li, .ed-customise .ed-switch-row b, .ed-reply-opts, .wz-tell summary, .inst-apps, .co-ico, .uc-pick-row input, .ins-sec h3, .tpl-advanced summary, .bill-rows > div > span, .setup-num, .setup-body > p, .setup-body .done-note, .setup-need > p, .setup-live > p, .notice-prev summary, .su-note, .rt-tabs a, .co-ov-tile > span, .co-ov-tile > em { font-size: 14.5px; }
	table.list, .left-menu li a, .plan-per, .setup-state, .ib-head, .setup-need > b, .pick-row b, .int-mailhost, .co-ov-details { font-size: 15px; }
	body, .page-intro, .btn, .ban-clicks b, .auth-side ul, .ed-customise h3, .ed-x, .w-join b, .fr-q h3, .plan-list, .setup-body > b, .ib-app .ib-go, .rt-progress { font-size: 15.5px; }
	.hiw-step h3 { font-size: 16px; }
	h3, .modal-head h2, .wz-ask, .comp-win b, .bf-prev span, .int-top h2, .idea-tile h3 { font-size: 17px; }
	.guide-steps > li.on > .setup-body > b { font-size: 17.5px; }
}
/* END OF PHONES: BIGGER TEXT */