/* ==========================================================================
   LUMIQ_WAPSHELL v1.0.0 — application stylesheet
   NOTE: base.html emits a :root override AFTER this stylesheet with the
   colours saved in Admin → Settings → Branding. Values here are fallbacks.
   ========================================================================== */
/* --------------------------------------------------------------------------
   LUMIQ BRAND — from Lumiq Internal Brand Guidelines V2
   Palette   Orange #F5821E · White #FFFFFF · Black #000000 · Dark Grey #333333
   Headlines League Spartan SemiBold, ALL CAPS
   Body      Albert Sans Regular / Bold, sentence case
   Hierarchy White is the primary background. Black is the primary text.
             Orange is an ACCENT — used sparingly for CTAs and emphasis.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;600;700&family=Albert+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    --sidebar-w: 248px;

    /* Brand */
    --brand: #F5821E;             /* Lumiq Orange */
    --brand-dark: #D96A0B;        /* pressed / hover */
    --brand-2: #FF9D4D;           /* lighter orange for gradients */
    --brand-soft: rgba(245, 130, 30, .22);
    --brand-softer: rgba(245, 130, 30, .10);

    /* Core neutrals */
    --ink-black: #000000;         /* Black */
    --ink: #000000;               /* primary text */
    --ink-grey: #333333;          /* Dark Grey — body copy */
    --muted: #6B6B6B;             /* secondary text, still AA on white */
    --line: #E4E4E7;
    --bg: #F7F7F8;                /* off-white app canvas */

    --sidebar-bg: #000000;
    --sidebar-text: #F2F2F2;

    /* Type */
    --font-head: "League Spartan", "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --card-radius: 14px;

    /* Status — kept semantic, not brand */
    --ok: #15803D;
    --warn: #B45309;
    --crit: #C2261B;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink-grey);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: var(--brand-dark); }
a:hover { color: var(--brand); }

/* Headlines: League Spartan SemiBold, ALL CAPS, tight leading.
   The guidelines are explicit — headlines are never lowercase or italic. */
h1, h2, h3 {
    margin: 0 0 10px;
    font-family: var(--font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .2px;
    line-height: 1.05;
    color: var(--ink-black);
}
h1 { font-size: 30px; }
h2 { font-size: 23px; }
h3 { font-size: 17px; letter-spacing: .4px; }

/* h4 stays sentence case — it acts as a subheading (Albert Sans Bold). */
h4 {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--ink-black);
}

strong, b { font-weight: 700; color: var(--ink-black); }

/* ---------------- Public pages (login / register / home) ---------------- */
.public-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 12% 18%, rgba(245, 130, 30, .38), transparent 46%),
        radial-gradient(circle at 88% 84%, rgba(245, 130, 30, .16), transparent 52%),
        var(--ink-black);
    padding: 24px;
}
.public-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    padding: 38px;
    width: 100%;
    max-width: 430px;
}
.public-card.wide { max-width: 560px; }
.public-card h1 { font-size: 23px; margin-bottom: 4px; }
.public-card .sub { color: var(--muted); margin-bottom: 24px; font-size: 13.5px; }
.public-logo {
    width: 56px; height: 56px; border-radius: 15px;
    background: linear-gradient(140deg, var(--brand) 0%, var(--brand-dark) 100%);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-black); font-size: 26px; margin-bottom: 18px;
}
.public-foot {
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--muted); text-align: center;
}

/* ------------------------------- Layout -------------------------------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: fixed; top: 0; bottom: 0; left: 0;
    overflow-y: auto;
    transition: transform .25s ease;
    z-index: 1000;
    display: flex; flex-direction: column;
}
.sidebar .brand {
    display: flex; align-items: center; gap: 11px;
    padding: 18px 20px;
    color: #fff; font-weight: 700; font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sidebar .brand .logo {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(140deg, var(--brand-2), var(--brand));
    color: var(--ink-black);
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    flex: 0 0 34px;
}
.sidebar .brand .btxt { min-width: 0; }
.sidebar .brand .btxt small {
    display: block; font-weight: 500; font-size: 11px;
    color: rgba(255, 255, 255, .45); letter-spacing: .3px;
}
.nav-section { padding: 12px 0; }
.nav-section.bottom { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .08); }
.nav-title {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
    color: rgba(255, 255, 255, .35); padding: 10px 20px 6px; font-weight: 700;
}
.nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px; color: rgba(242,242,242,.62); font-weight: 500; font-size: 13.5px;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}
.nav-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.nav-link.active {
    background: linear-gradient(90deg, var(--brand-soft), transparent 85%);
    color: #fff; border-left-color: var(--brand); font-weight: 600;
}
.nav-link i { width: 17px; height: 17px; flex: 0 0 17px; }
.nav-badge {
    margin-left: auto; font-size: 10px; font-weight: 700;
    background: var(--brand); color: var(--ink-black); border-radius: 999px; padding: 1px 7px;
}

.main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    background: #fff; height: 60px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 500;
}
.topbar h2 { font-size: 17px; margin: 0; }
.content { padding: 24px; flex: 1; }
.hamburger { display: none; background: none; border: none; font-size: 22px; cursor: pointer; }

/* -------------------------------- Cards -------------------------------- */
.card {
    background: #fff; border-radius: var(--card-radius);
    border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    margin-bottom: 20px;
}
.card-header {
    padding: 15px 20px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; gap: 12px;
}
.card-body { padding: 20px; }
.card-body.tight { padding: 0; }

/* ----------------------------- Stat cards ------------------------------ */
.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px; margin-bottom: 20px;
}
.stat {
    background: #fff; border-radius: var(--card-radius); padding: 18px 20px;
    border: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.stat .label { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
.stat .value { font-size: 25px; font-weight: 700; line-height: 1.15; }
.stat .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat .icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; color: #fff;
    flex: 0 0 42px;
}
.icon.indigo { background: var(--brand); }
.icon.sky { background: var(--brand-2); }
.icon.green { background: var(--ok); }
.icon.orange { background: var(--warn); }
.icon.red { background: var(--crit); }

/* ------------------------------- Meters -------------------------------- */
.meter { height: 8px; border-radius: 999px; background: #EDEDEF; overflow: hidden; margin-top: 10px; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .4s ease; }
.meter.ok > span { background: var(--ok); }
.meter.warning > span { background: var(--warn); }
.meter.critical > span { background: var(--crit); }

/* ------------------------------- Tables -------------------------------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13.5px; }
th { background: #FAFAFA; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
tbody tr:hover { background: #FAFAFA; }
tbody tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

/* ------------------------------ Elements ------------------------------- */
.pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: #F1F1F2; color: var(--ink-grey); text-transform: uppercase; letter-spacing: .3px;
}
.pill.ok, .pill.active { background: #dcfce7; color: #15803d; }
.pill.warn, .pill.pending_approval { background: #fef3c7; color: #b45309; }
.pill.crit, .pill.disabled, .pill.rejected { background: #fee2e2; color: #b91c1c; }
.pill.muted { background: #F1F1F2; color: var(--muted); }

.badge-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.badge-dot.ok { background: var(--ok); }
.badge-dot.warning { background: var(--warn); }
.badge-dot.critical { background: var(--crit); }
.badge-dot.unknown { background: #94a3b8; }

.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 9px; border: 1px solid transparent;
    font-weight: 600; font-size: 13.5px; cursor: pointer; font-family: inherit;
    transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(.95); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn i { width: 15px; height: 15px; }
/* Lumiq Orange on Black: 9.9:1 contrast and the brand's signature pairing. */
.btn-primary { background: var(--brand); color: var(--ink-black); font-weight: 700; }
.btn-primary:hover { background: var(--brand-2); filter: none; }
.btn-dark { background: var(--ink-black); color: #fff; }
.btn-outline {
    background: transparent; color: var(--brand-dark); border-color: var(--brand);
    font-weight: 700;
}
.btn-outline:hover { background: var(--brand-softer); filter: none; }
.btn-light { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-danger { background: var(--crit); color: #fff; }
.btn-success { background: var(--ok); color: #fff; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 7px; }
.btn-block { width: 100%; justify-content: center; }

label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 6px; color: var(--ink-grey); }
/* v2.6.0: tel/date/month added. The signup wizard and the sales enquiry form
   use them for phone numbers and card expiry, and without them those inputs
   fell through to the browser default -- a differently sized, differently
   bordered box sitting next to a styled one on the same row. */
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=color], input[type=tel], input[type=date],
input[type=month], select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line);
    border-radius: 9px; font-size: 14px; font-family: inherit; background: #fff;
    color: var(--ink);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-softer);
}
input[type=color] { padding: 3px; height: 40px; }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 5px; }

.alert { padding: 12px 15px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-ok { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-info { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.alert-warn { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

.flex { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }

/* Definition list used by the specs page */
.spec-list { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 13.5px; }
.spec-list dt { color: var(--muted); font-weight: 500; }
.spec-list dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }

/* Permission checkbox grid */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.perm-grid label {
    display: flex; align-items: center; gap: 8px; font-weight: 500;
    font-size: 13px; margin: 0; padding: 8px 10px; border: 1px solid var(--line);
    border-radius: 8px; cursor: pointer; background: #fff;
}
.perm-grid label:hover { background: var(--brand-softer); border-color: var(--brand); }
.perm-grid input { width: auto; }

/* Progress bar (updater) */
.progress { height: 9px; background: #EDEDEF; border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand); width: 0; transition: width .4s ease; }

/* Toast */
#toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 2000;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast-item {
    background: var(--ink-black); color: #fff; padding: 11px 17px; border-radius: 10px;
    font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    animation: toastIn .2s ease;
}
.toast-item.ok { background: #15803d; }
.toast-item.err { background: #b91c1c; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Drop zone for package upload */
.dropzone {
    border: 2px dashed var(--line); border-radius: 12px; padding: 28px;
    text-align: center; color: var(--muted); cursor: pointer; background: #FAFAFA;
    transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: var(--brand-softer); color: var(--brand); }

/* ----------------------------- Responsive ------------------------------ */
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: none; }
    .main { margin-left: 0; }
    .hamburger { display: block; }
    .field-row { grid-template-columns: 1fr; }
    .content { padding: 16px; }
    th, td { padding: 10px 14px; }
}

/* ------------------------------------------------------------- v1.0.0 additions */
/* Card header alias — both .card-header and .card-head are used across templates. */
.card-head {
    padding: 15px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-head h3, .card-header h3 { font-size: 14.5px; margin: 0; font-weight: 650; }

/* Stat card aliases.
   .stat is a flex row (icon on the right). Cards built from stat-label /
   stat-value / stat-foot instead need those children on their own lines, so
   allow wrapping and make them full width. */
.stat { flex-wrap: wrap; }
.stat > .stat-label,
.stat > .stat-value,
.stat > .stat-foot,
.stat > .meter { flex: 0 0 100%; }

.stat-label { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
.stat-value { font-size: 25px; font-weight: 700; line-height: 1.15; }
.stat-foot  { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Two-column responsive layout */
.two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    align-items: start;
}

/* Button rows */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Welcome banner */
.welcome-card { background: linear-gradient(135deg, var(--brand-softer), #fff); }

/* Link list (portal shortcuts) */
.link-list { list-style: none; padding: 0; margin: 0 0 14px; }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list li:last-child { border-bottom: none; }
.link-list a {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 4px; color: var(--ink); text-decoration: none;
    font-size: 13.5px; border-radius: 8px;
}
.link-list a:hover { background: var(--brand-softer); }
.link-list a i { width: 18px; height: 18px; color: var(--brand); margin-top: 2px; flex: 0 0 18px; }

/* Error pages */
.public-body { background: var(--bg); }
.error-code {
    font-size: 62px; font-weight: 800; line-height: 1;
    color: var(--brand); letter-spacing: -2px;
}

/* Misc */
.nowrap { white-space: nowrap; }
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; background: #F1F1F2; padding: 1px 6px; border-radius: 5px;
}
/* ==========================================================================
   LUMIQ_WAPSHELL v1.1.0 — marketplace, multi-tenant portal & app chrome
   Appended to v1.0.0 rules above. Uses the same custom properties so the
   Admin → Settings → Branding override keeps working everywhere.
   ========================================================================== */

/* ---------------------------------------------------------------- helpers */
.form-section {
    margin: 0 0 22px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--line);
}
.form-section:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 10px; }
.form-section > h4 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--muted); margin: 0 0 14px; font-weight: 700;
}

.section-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 26px 0 12px;
}
.section-title:first-child { margin-top: 4px; }
.section-title h3 { margin: 0; font-size: 16px; }
.section-title .muted { font-size: 12.5px; }

.tick {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--muted);
    margin: 12px 0 8px; cursor: pointer; user-select: none;
}
.tick input { margin: 0; accent-color: var(--brand); }

.avatar {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--ink-grey), var(--ink-black));
    color: var(--brand); font-weight: 700; font-size: 13px; letter-spacing: .3px;
    text-transform: uppercase;
}
.avatar.lg { width: 62px; height: 62px; flex: 0 0 62px; border-radius: 18px; font-size: 22px; }

/* ------------------------------------------------------------ chips / row */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: #F1F1F2; color: var(--ink-grey);
    border: 1px solid transparent;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    text-decoration: none; transition: .15s;
}
a.chip:hover { background: var(--brand-softer); color: var(--brand-dark); }
.chip.on, .chip.active {
    background: var(--brand); color: var(--ink-black); border-color: var(--brand);
}
.chip i { width: 14px; height: 14px; }

.table-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.table-chips code { background: var(--brand-softer); color: var(--brand-dark); }

/* ================================================================== STORE */
.store-hero {
    display: flex; align-items: center; gap: 20px;
    padding: 26px 28px; margin-bottom: 18px;
    border-radius: var(--card-radius);
    background:
        radial-gradient(circle at 92% 0%, rgba(245, 130, 30, .55), transparent 58%),
        var(--ink-black);
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.store-hero h2 { margin: 0 0 4px; font-size: 21px; color: #fff; }
.store-hero p { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .78); max-width: 620px; }
/* The global "strong { color: ink-black }" rule paints the company's own
   name in near-black on this near-black panel, which read as a blank gap.
   White, and slightly brighter than the sentence around it, so the name is
   emphasis rather than a hole. */
.store-hero p strong { color: #fff; }
.store-hero-icon {
    width: 58px; height: 58px; flex: 0 0 58px; border-radius: 17px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
}
.store-hero-icon i { width: 28px; height: 28px; color: #fff; }

.store-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--card-radius); padding: 14px 16px; margin-bottom: 20px;
}
.store-search { display: flex; gap: 8px; flex: 1 1 260px; }
.store-search input {
    flex: 1; min-width: 0;
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px;
    font-size: 13.5px; font-family: inherit; background: #FAFAFA;
}
.store-search input:focus {
    outline: none; border-color: var(--brand); background: #fff;
    box-shadow: 0 0 0 3px var(--brand-softer);
}

/* --------------------------------------------------------- the store grid */
.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 16px;
}
.featured-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.store-card {
    display: flex; flex-direction: column; gap: 14px;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--card-radius); padding: 18px;
    color: var(--ink); text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.store-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-soft);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .10);
}
.store-card.static:hover { transform: none; box-shadow: none; }
.store-card.feature {
    background: linear-gradient(150deg, #fff 55%, var(--brand-softer));
    border-color: var(--brand-soft);
}
.store-card-head { display: flex; align-items: flex-start; gap: 14px; }
.store-card-body { flex: 1; display: flex; flex-direction: column; }
.store-card-body h4 { margin: 0 0 3px; font-size: 15px; line-height: 1.25; }
.store-card-body p {
    margin: 0; font-size: 12.8px; color: var(--muted); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.store-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 12px; color: var(--muted);
}
.store-meta .pill { font-size: 11px; }

.store-icon {
    width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff;
    box-shadow: inset 0 -14px 24px rgba(0, 0, 0, .13);
}
.store-icon i { width: 23px; height: 23px; color: #fff; stroke-width: 2.1; }
.store-icon.sm { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; }
.store-icon.sm i { width: 17px; height: 17px; }
.store-icon.lg { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 17px; }
.store-icon.lg i { width: 29px; height: 29px; }
.store-icon.xl { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 22px; }
.store-icon.xl i { width: 40px; height: 40px; }

/* ======================================================= APP DETAIL PAGE */
.detail-hero { overflow: hidden; }
.detail-hero > .card-body { padding: 26px 28px; }
.detail-top { display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; }
.detail-headline { flex: 1 1 320px; min-width: 0; }
.detail-headline h1 { font-size: 26px; margin: 2px 0 6px; letter-spacing: -.4px; }
.detail-tagline { margin: 0 0 12px; font-size: 15px; color: var(--muted); }
.detail-facts {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 12.5px;
}
.detail-action {
    flex: 0 0 220px; width: 220px;
    display: flex; flex-direction: column; gap: 2px;
}
.detail-action .hint { margin: 6px 0 0; }
.detail-action form { margin: 0; }
.installed-note {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--ok);
    margin: 10px 0 2px; justify-content: center; text-align: center;
}
.installed-note i { width: 14px; height: 14px; flex: 0 0 14px; }

.highlight-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px; margin-top: 18px;
}
.highlight { display: flex; gap: 12px; align-items: flex-start; }
.highlight strong { font-size: 13.5px; display: block; margin-bottom: 2px; }
.highlight p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.highlight-icon {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-softer); color: var(--brand);
}
.highlight-icon i { width: 17px; height: 17px; }

.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 0; font-size: 13.5px;
    border-bottom: 1px dashed var(--line);
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li i {
    width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px;
    color: var(--ok); stroke-width: 3;
}

/* ==================================================== PORTAL / LAUNCHER */
.app-launcher {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.launch-tile {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 20px 12px; text-align: center;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--card-radius); color: var(--ink); text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.launch-tile:hover {
    transform: translateY(-3px); border-color: var(--brand-soft);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
}
.launch-tile strong { font-size: 13px; line-height: 1.3; }
.launch-tile span { font-size: 11.5px; color: var(--muted); }
.launch-tile.add { border-style: dashed; background: #FAFAFA; }
.launch-icon {
    width: 52px; height: 52px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff;
    box-shadow: inset 0 -14px 22px rgba(0, 0, 0, .13);
}
.launch-icon i { width: 25px; height: 25px; color: #fff; stroke-width: 2.1; }
.launch-icon.ghost {
    background: var(--brand-softer); color: var(--brand); box-shadow: none;
    border: 1px dashed var(--brand-soft);
}
.launch-icon.ghost i { color: var(--brand); }

.installed-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--card-radius); padding: 18px;
    display: flex; flex-direction: column; gap: 14px;
}
.installed-head { display: flex; align-items: flex-start; gap: 13px; }
.installed-head h4 { margin: 0 0 3px; font-size: 15px; }
.installed-head .muted { font-size: 12.5px; }
.installed-card .btn-row { margin-top: auto; }

/* ------------------------------------------------- sidebar company chip */
.company-chip {
    display: flex; align-items: center; gap: 11px;
    margin: 4px 14px 16px; padding: 11px 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
}
.company-avatar {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--brand-2), var(--brand));
    color: var(--ink-black); font-weight: 700; font-size: 13px; text-transform: uppercase;
}
.company-meta { min-width: 0; }
.company-meta strong {
    display: block; font-size: 13px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.company-meta span {
    display: block; font-size: 11px; color: rgba(242, 242, 242, .55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.app-dot {
    width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff;
}
.app-dot i { width: 12px; height: 12px; color: #fff; stroke-width: 2.4; }

/* ============================================ ADMIN — marketplace listings */
.listing-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.listing-main { flex: 1 1 320px; min-width: 0; }
.listing-main h4 { margin: 0 0 4px; font-size: 15px; }
.listing-main p { margin: 6px 0 0; font-size: 12.8px; color: var(--muted); }
.listing-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center; justify-content: flex-end;
}
.listing-actions form { margin: 0; }

/* ============================================= APP CHROME (app_base.html) */
.app-header {
    display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
    padding: 18px 20px; margin-bottom: 16px;
    border-radius: var(--card-radius);
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--app-color, var(--brand));
}
.app-header-icon {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--app-color, var(--brand)); color: #fff;
    box-shadow: inset 0 -12px 20px rgba(0, 0, 0, .14);
}
.app-header-icon i { width: 22px; height: 22px; color: #fff; stroke-width: 2.1; }
.app-header-text { flex: 1; min-width: 0; }
.app-header-text h3 { margin: 0; font-size: 17px; }
.app-header-text span { font-size: 12.8px; color: var(--muted); }
.app-header-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.app-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 18px; padding-bottom: 2px;
}
.app-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 9px;
    font-size: 13px; font-weight: 600;
    color: var(--muted); text-decoration: none;
    border: 1px solid transparent; transition: .15s;
}
.app-tab:hover { background: #F1F1F2; color: var(--ink); }
.app-tab.active {
    background: #fff; color: var(--app-color, var(--brand));
    border-color: var(--line);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .07);
}
.app-tab i { width: 15px; height: 15px; }

/* ================================================================ CRM app */
.note-item {
    padding: 12px 0; border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}
.note-item:last-child { border-bottom: none; }
.note-item .muted { font-size: 11.5px; display: block; margin-top: 4px; }

.pipeline-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px; align-items: start;
}
.pipeline-col {
    background: #F4F4F5; border: 1px solid var(--line);
    border-radius: 12px; overflow: hidden;
}
.pipeline-col-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 11px 13px;
    background: #fff; border-bottom: 1px solid var(--line);
}
.pipeline-col-head strong { font-size: 13px; }
.pipeline-col-head span { font-size: 11.5px; color: var(--muted); }
.pipeline-col-body {
    padding: 11px; display: flex; flex-direction: column; gap: 10px;
    min-height: 90px;
}
.deal-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: 10px; padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
.deal-card a { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.deal-card a:hover { color: var(--brand); }
.deal-value {
    display: block; margin: 5px 0 8px;
    font-size: 15px; font-weight: 700; color: var(--ok);
}
.deal-move { display: flex; gap: 6px; margin: 0; }
.deal-move select {
    flex: 1; min-width: 0; padding: 5px 7px; font-size: 11.5px;
    border: 1px solid var(--line); border-radius: 7px;
    font-family: inherit; background: #FAFAFA;
}
.pipeline-empty {
    text-align: center; font-size: 12px; color: #9aa3b2;
    padding: 16px 6px; border: 1px dashed #cfd6e2; border-radius: 9px;
}

/* ========================================================== Analytics app */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
}
.metric-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--card-radius); padding: 17px;
}
.metric-card h4 {
    margin: 0 0 6px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
}
.metric-value {
    font-size: 27px; font-weight: 800; letter-spacing: -1px;
    color: var(--ink); line-height: 1.15;
}
.metric-card .muted { font-size: 12px; }
.sparkline {
    width: 100%; height: 44px; margin-top: 10px; display: block;
    overflow: visible;
}
.sparkline polyline, .sparkline path {
    fill: none; stroke: var(--brand); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

/* =========================================================== Helpdesk app */
.reply-item {
    padding: 13px 15px; margin-bottom: 11px;
    background: #f8fafc; border: 1px solid var(--line);
    border-left: 3px solid var(--brand); border-radius: 10px;
    font-size: 13.5px;
}
.reply-item:last-child { margin-bottom: 0; }
.reply-item .muted { font-size: 11.5px; }
.reply-item p { margin: 7px 0 0; white-space: pre-wrap; }
.reply-item.internal {
    background: #fffbeb; border-color: #fde68a; border-left-color: var(--warn);
}

.pill.prio-urgent { background: #fee2e2; color: #b91c1c; }
.pill.prio-high   { background: #ffedd5; color: #c2410c; }
.pill.prio-normal { background: #F1F1F2; color: var(--ink-grey); }
.pill.prio-low    { background: #F1F1F2; color: var(--muted); }

.pill.state-open        { background: #dbeafe; color: #1d4ed8; }
.pill.state-in_progress { background: #fef3c7; color: #b45309; }
.pill.state-waiting     { background: #ede9fe; color: #6d28d9; }
.pill.state-resolved    { background: #dcfce7; color: #15803d; }

tr.overdue { background: #fff7f7; }
tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.overdue .mono, td.overdue { color: var(--crit); font-weight: 600; }

/* ====================================================== PUBLIC LANDING */
.land-nav {
    position: sticky; top: 0; z-index: 40;
    background: rgba(0, 0, 0, .92);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Generic centred container. Only the nav and footer lay their children out
   in a row -- the hero and content sections must stay stacked. */
.land-inner { max-width: 1120px; margin: 0 auto; padding: 14px 24px; }
.land-nav .land-inner,
.land-foot .land-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.land-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
    background: linear-gradient(140deg, var(--brand-2), var(--brand));
    color: var(--ink-black); font-size: 16px; line-height: 1;
}
.land-logo img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.land-nav .flex { display: flex; align-items: center; gap: 10px; }
.land-nav strong { color: #fff; font-weight: 800; letter-spacing: -.3px; font-size: 16px; }

.land-hero {
    background:
        radial-gradient(circle at 50% -10%, rgba(245, 130, 30, .42), transparent 55%),
        radial-gradient(circle at 88% 105%, rgba(245, 130, 30, .20), transparent 45%),
        var(--ink-black);
    color: #fff; padding: 84px 24px 92px; text-align: center;
}
.land-hero h1 {
    font-size: 44px; line-height: 1.1; letter-spacing: -1.4px;
    margin: 0 auto 16px; max-width: 780px; color: #fff;
}
.land-hero p {
    font-size: 17px; color: rgba(255, 255, 255, .8);
    max-width: 620px; margin: 0 auto 28px; line-height: 1.6;
}
.land-hero .btn-row { justify-content: center; }
.land-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; margin-bottom: 20px; border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 12px; font-weight: 700; letter-spacing: .7px;
    text-transform: uppercase; color: #fff;
}

.land-section { padding: 66px 24px; }
.land-section > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.land-section.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.land-h2 {
    font-size: 29px; letter-spacing: -.7px; text-align: center; margin: 0 0 10px;
}
.land-sub {
    text-align: center; color: var(--muted); font-size: 15px;
    max-width: 580px; margin: 0 auto 38px; line-height: 1.6;
}

.land-steps {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px;
}
.land-step {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--card-radius); padding: 26px 22px;
}
.land-step h3 { font-size: 16.5px; margin: 14px 0 8px; }
.land-step p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.step-num {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--brand-2), var(--brand));
    color: var(--ink-black); font-weight: 800; font-size: 15px;
}

.land-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 20px;
}
.land-feature { text-align: left; }
.land-feature h4 { font-size: 15px; margin: 13px 0 7px; }
.land-feature p { margin: 0; color: var(--muted); font-size: 13.2px; line-height: 1.6; }
.land-ficon {
    width: 44px; height: 44px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-softer); color: var(--brand);
}
.land-ficon i { width: 21px; height: 21px; }

.land-foot {
    background: var(--ink-black); color: rgba(242, 242, 242, .6);
    padding: 34px 24px; font-size: 12.8px;
}
.land-foot a { color: rgba(242, 242, 242, .85); }
.land-foot a:hover { color: #fff; }
.land-foot .land-inner { padding: 0; flex-wrap: wrap; }

/* ============================================================ RESPONSIVE */
@media (max-width: 900px) {
    .detail-action { flex: 1 1 100%; width: 100%; }
    .detail-headline h1 { font-size: 22px; }
    .store-hero { flex-direction: column; align-items: flex-start; text-align: left; }
    .land-hero h1 { font-size: 33px; }
    .land-hero { padding: 60px 20px 66px; }
    .land-section { padding: 48px 20px; }
    .listing-actions { justify-content: flex-start; width: 100%; }
}
@media (max-width: 560px) {
    .store-grid, .featured-grid { grid-template-columns: 1fr; }
    .app-launcher { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
    .store-icon.xl { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 18px; }
    .store-icon.xl i { width: 30px; height: 30px; }
    .land-hero h1 { font-size: 27px; }
}

/* ================================================================= PRINT */
@media print {
    .land-nav, .app-tabs, .detail-action, .store-filters { display: none !important; }
    .store-hero, .land-hero { background: #fff !important; color: #000 !important; }
    .store-card, .metric-card, .installed-card { break-inside: avoid; }
}

/* ==========================================================================
   LUMIQ BRAND LAYER — v1.2.0
   Applied per Lumiq Internal Brand Guidelines V2.

   Palette hierarchy of use:
     White #FFFFFF   primary background / negative space
     Black #000000   primary text, logo, strong design elements
     Grey  #333333   body copy, dividers, icons, subtle UI
     Orange #F5821E  key accents, buttons, highlights, links —
                     "best applied sparingly to create impact"

   Typography:
     Headlines   League Spartan SemiBold, ALL CAPS, leading 100%
     Subheading  Albert Sans Bold, sentence case, 24px
     Body        Albert Sans Regular, sentence case, 16px, leading 120%
     Caption     Albert Sans Regular, 14px
     Button      Albert Sans Bold, sentence case
   ========================================================================== */

/* --- Contrast: white on Lumiq Orange is only 2.3:1 and fails WCAG.
       Black on Lumiq Orange is 9.9:1 and is the brand's signature pairing.
       Every solid-orange surface therefore carries black glyphs. ---------- */
.store-icon,
.launch-icon,
.app-dot,
.stat .icon.indigo,
.stat .icon.sky { color: var(--ink-black); }
.store-icon i,
.launch-icon i,
.app-dot i { color: var(--ink-black); }
.app-header-icon { color: var(--ink-black); }
.app-header-icon i { color: var(--ink-black); }
.meter > span, .progress > span { background: var(--brand); }

/* --- Buttons are Albert Sans Bold, sentence case (never shouted). -------- */
.btn { font-family: var(--font-body); text-transform: none; letter-spacing: 0; }

/* --- Headlines are League Spartan, ALL CAPS. These elements are data,
       labels or UI furniture rather than headlines, so they opt out. ------ */
.pill, .chip, .app-tab, .badge-dot, .nav-badge,
.store-card-body h4, .installed-head h4, .listing-main h4,
.land-feature h4, .metric-card h4, .stat-value, .metric-value,
.deal-card a, .launch-tile strong, .company-meta strong,
.spec-list dd, code, .mono, .error-code {
    font-family: var(--font-body);
}
.store-card-body h4, .installed-head h4, .listing-main h4,
.land-feature h4, .deal-card a {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--ink-black);
}
/* Numeric displays stay tabular so columns line up. */
.stat-value, .metric-value, .error-code, .mono {
    font-variant-numeric: tabular-nums;
}

/* --- Headline scale. Brand spec: 36px web headline, 100% leading. -------- */
.land-hero h1 {
    font-family: var(--font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -.5px;
    line-height: 1.0;
}
.land-h2 {
    font-family: var(--font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -.2px;
    line-height: 1.02;
}
.detail-headline h1 { letter-spacing: -.2px; line-height: 1.02; }
.store-hero h2 { letter-spacing: .2px; }

/* --- Subheading: Albert Sans Bold, sentence case. ----------------------- */
.land-sub, .detail-tagline, .store-hero p {
    font-family: var(--font-body);
    text-transform: none;
}

/* --- Links: orange, used sparingly, underlined on hover for clarity. ---- */
.content a:not(.btn):not(.chip):not(.store-card):not(.launch-tile):not(.app-tab):not(.nav-link):hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Focus ring: orange, visible on both white and black surfaces. ------ */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Rounded abstract shapes + subtle gradients are core to the brand's
       visual style, so cards get a slightly softer, deeper elevation. ---- */
.card, .store-card, .installed-card, .metric-card, .land-step, .stat {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .045);
}
.card { border: 1px solid var(--line); }

/* --- Selection uses the accent. ---------------------------------------- */
::selection { background: var(--brand); color: var(--ink-black); }

/* --- Scrollbar inside the black sidebar. -------------------------------- */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14); border-radius: 8px;
}
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* --- Topbar gets a hairline so the white content area reads as a
       distinct plane from the white topbar. ---------------------------- */
.topbar { border-bottom: 1px solid var(--line); }

/* =========================================================================
   v1.3.0 — Cloud operations (cluster, autoscale, backups, security)
   ========================================================================= */

/* --- node cards -------------------------------------------------------- */
.node-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}
.node {
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    background: #fff;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.node:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.node::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--line);
}
.node.is-primary::before { background: var(--brand); }
.node.is-healthy::before { background: var(--ok); }
.node.is-down::before    { background: var(--crit); }
.node.is-draining::before{ background: var(--warn); }

.node-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 4px;
}
.node-name {
    font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
    letter-spacing: .3px; font-size: 15px; color: var(--ink-black);
    word-break: break-all; line-height: 1.25;
}
.node-url {
    font-size: 12px; color: var(--muted); text-decoration: none;
    word-break: break-all; display: inline-block; margin-bottom: 12px;
}
.node-url:hover { color: var(--brand); text-decoration: underline; }

.node-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin: 12px 0 14px;
}
.node-metric .k {
    font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--muted); font-weight: 700;
}
.node-metric .v {
    font-family: var(--font-head); font-size: 19px; font-weight: 600;
    color: var(--ink-black); line-height: 1.2;
}
.node-metric .v.warn { color: var(--warn); }
.node-metric .v.crit { color: var(--crit); }
.node-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; border-top: 1px solid var(--line); padding-top: 10px;
    font-size: 12px; color: var(--muted);
}

/* --- rule cards -------------------------------------------------------- */
.rule {
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: var(--card-radius);
    background: #fff; padding: 16px 18px; margin-bottom: 14px;
}
.rule.state-ok        { border-left-color: var(--ok); }
.rule.state-breaching { border-left-color: var(--warn); background: #FFFBF5; }
.rule.state-triggered { border-left-color: var(--crit); background: #FEF6F5; }
.rule.state-cooling   { border-left-color: #6B7280; }
.rule.is-off { opacity: .62; border-left-color: var(--line); background: #FAFAFA; }

.rule-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.rule-name {
    font-family: var(--font-head); text-transform: uppercase; font-weight: 600;
    font-size: 15px; letter-spacing: .3px; color: var(--ink-black);
}
.rule-summary {
    font-size: 13px; color: var(--ink-grey); margin-top: 5px; line-height: 1.55;
    max-width: 74ch;
}
.rule-meta {
    display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px;
    padding-top: 11px; border-top: 1px dashed var(--line);
    font-size: 12px; color: var(--muted);
}
.rule-meta b { color: var(--ink-black); font-weight: 600; }
.rule-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

/* --- the rule builder -------------------------------------------------- */
.builder {
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--card-radius); padding: 18px;
}
.builder-sentence {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 14px; color: var(--ink-black); line-height: 2.5;
}
.builder-sentence .word { color: var(--ink-grey); font-weight: 500; }
.builder-sentence select,
.builder-sentence input {
    padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
    font-family: var(--font-body); font-size: 13px; background: #fff;
    color: var(--ink-black);
}
.builder-sentence select:focus,
.builder-sentence input:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-softer);
}
.builder-sentence input[type="number"] { width: 84px; }
.builder-preview {
    margin-top: 14px; padding: 12px 14px; border-radius: 10px;
    background: var(--ink-black); color: #fff; font-size: 13px;
    line-height: 1.6; border-left: 4px solid var(--brand);
}
.builder-preview b { color: var(--brand-2, #FF9D4D); font-weight: 600; }

/* --- timeline ---------------------------------------------------------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
    content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
    width: 2px; background: var(--line);
}
.tl-item { position: relative; padding: 0 0 20px 4px; }
.tl-item::before {
    content: ""; position: absolute; left: -23px; top: 4px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #fff; border: 2px solid var(--muted);
}
.tl-item.ok::before      { border-color: var(--ok); background: var(--ok); }
.tl-item.blocked::before { border-color: var(--warn); background: var(--warn); }
.tl-item.error::before   { border-color: var(--crit); background: var(--crit); }
.tl-when {
    font-size: 11px; color: var(--muted); text-transform: uppercase;
    letter-spacing: .5px; font-weight: 700;
}
.tl-what { font-size: 14px; color: var(--ink-black); margin: 2px 0 3px; font-weight: 500; }
.tl-detail { font-size: 12.5px; color: var(--ink-grey); line-height: 1.55; }

/* --- sparkline / uptime bars ------------------------------------------- */
.spark {
    display: flex; align-items: flex-end; gap: 2px; height: 64px;
    padding: 6px 0; overflow: hidden;
}
.spark i {
    flex: 1 1 auto; min-width: 2px; background: var(--brand);
    border-radius: 2px 2px 0 0; opacity: .82; display: block;
}
.spark i.hot { background: var(--crit); opacity: 1; }
.spark i.warm { background: var(--warn); }

.uptime-bar { display: flex; gap: 2px; height: 34px; align-items: stretch; }
.uptime-bar i {
    flex: 1 1 auto; min-width: 3px; border-radius: 2px; background: var(--ok);
    display: block;
}
.uptime-bar i.degraded { background: var(--warn); }
.uptime-bar i.down     { background: var(--crit); }
.uptime-bar i.none     { background: var(--line); }

/* --- misc -------------------------------------------------------------- */
.kv { display: grid; grid-template-columns: 190px 1fr; gap: 9px 16px; font-size: 13.5px; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; color: var(--ink-black); word-break: break-word; }

.danger-zone {
    border: 1px solid #F0C4C0; border-radius: var(--card-radius);
    background: #FEF7F6; padding: 16px 18px;
}
.danger-zone h4 {
    font-family: var(--font-head); text-transform: uppercase;
    color: var(--crit); font-size: 14px; margin: 0 0 6px;
}

.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.check {
    display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
    cursor: pointer; transition: border-color .14s ease, background .14s ease;
}
.check:hover { border-color: var(--brand); background: var(--brand-softer); }
.check input { margin-top: 3px; accent-color: var(--brand); flex: none; }
.check .t { font-size: 13.5px; color: var(--ink-black); font-weight: 600; }
.check .d { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }

.mode-picker { display: grid; gap: 10px; }
.mode-opt {
    display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px;
    border: 2px solid var(--line); border-radius: 11px; cursor: pointer;
    background: #fff; transition: all .14s ease;
}
.mode-opt:hover { border-color: var(--brand); }
.mode-opt input { margin-top: 3px; accent-color: var(--brand); flex: none; }
.mode-opt.sel { border-color: var(--brand); background: var(--brand-softer); }
.mode-opt .t {
    font-family: var(--font-head); text-transform: uppercase; font-size: 13px;
    font-weight: 600; letter-spacing: .4px; color: var(--ink-black);
}
.mode-opt .d { font-size: 12.5px; color: var(--ink-grey); margin-top: 3px; line-height: 1.5; }

.hint { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

.sim-banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; border-radius: 11px; margin-bottom: 18px;
    background: var(--ink-black); color: #fff; font-size: 13.5px;
}
.sim-banner .tag {
    background: var(--brand); color: #000; font-weight: 700; font-size: 11px;
    padding: 3px 9px; border-radius: 20px; text-transform: uppercase;
    letter-spacing: .6px; font-family: var(--font-head);
}
.sim-banner .grow { flex: 1 1 auto; min-width: 200px; }

@media (max-width: 720px) {
    .kv { grid-template-columns: 1fr; gap: 3px 0; }
    .kv dt { margin-top: 9px; }
    .builder-sentence { line-height: 2.1; }
}

/* ==========================================================================
   v2.4.0 — SETTINGS HUB
   Settings is now a section, not a page: a second-level menu on the left and
   the chosen panel on the right. The reference design was a blue CRM; this is
   the same *structure* rendered in the Lumiq palette — black rail, orange as
   the accent that marks position, white as the working surface.
   ========================================================================== */
.set-shell {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ------------------------------------------------------------- sub-menu -- */
.set-nav {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    padding: 8px;
    /* Sticks while a long panel scrolls, so you can always jump sideways
       without scrolling back to the top first. */
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.set-nav-group { padding: 2px 0 6px; }
.set-nav-group + .set-nav-group {
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding-top: 10px;
}
.set-nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 8px;
    font-family: var(--font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 11px;
    color: var(--muted);
}
.set-nav-title i { width: 13px; height: 13px; }

.set-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-grey);
    /* The 2px bar is transparent, not absent, so nothing shifts on select. */
    border-left: 2px solid transparent;
    margin-bottom: 1px;
}
.set-nav a i { width: 15px; height: 15px; flex: 0 0 15px; color: var(--muted); }
.set-nav a:hover { background: var(--bg); color: var(--ink-black); }
.set-nav a:hover i { color: var(--ink-grey); }
.set-nav a.active {
    background: var(--brand-softer);
    border-left-color: var(--brand);
    color: var(--ink-black);
    font-weight: 700;
}
.set-nav a.active i { color: var(--brand); }

/* --------------------------------------------------------------- panel -- */
.set-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    overflow: hidden;
    min-width: 0;
}
.set-panel-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.set-panel-head h3 { margin: 0; }
.set-panel-head .muted { margin: 4px 0 0; font-size: 12.5px; }
.set-panel-body { padding: 20px; }
.set-panel-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--bg);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* A settings row: label on the left, control on the right. Reads as a list
   of decisions rather than a wall of inputs. */
.set-row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    align-items: start;
}
.set-row:last-child { border-bottom: 0; }
.set-row > label,
.set-row .set-label {
    margin: 7px 0 0;
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-black);
}
.set-row .set-label small {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.45;
}
.set-row .field { margin-bottom: 0; }
.set-control { min-width: 0; }
/* .hint is inline elsewhere in the app, which put it alongside a max-width
   input instead of under it. Inside a settings row it always sits below. */
.set-control .hint { display: block; max-width: 560px; }
.set-control > .hint:first-child { margin-top: 0; }
.set-narrow { max-width: 300px; }
.set-mid { max-width: 460px; }
/* Stripe keys and price IDs are long opaque strings. Truncating them mid-key
   is how you end up pasting half a secret, so these get the full width. */
.set-wide { max-width: 100%; width: 100%; }

/* v2.7.0. The payments page carries four separate decisions (connection,
   prices, tax, failed payments) and running them together as one column made
   the dangerous ones easy to change by accident. This heading divides them. */
.set-group-head {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
    margin: 26px 0 0;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
}
.set-group-head:first-child { margin-top: 0; }
/* The row that follows a group heading already has the heading's rule above
   it, so it must not draw a second line straight underneath. */
.set-group-head + .set-row { padding-top: 12px; }

/* v2.9.0. A price on a store tile. Brand orange rather than the grey of
   the category chips, because on a tile full of metadata the one thing that
   costs money should not look like metadata. */
.pill.price {
    background: var(--brand-softer, #FDF0E3);
    color: var(--brand-dark, #C2610A);
}

/* The price above the Install button. Deliberately the largest thing in
   that column: a customer should not be able to click Install without
   having seen the amount. */
.price-box {
    text-align: center;
    padding: 14px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #FAFAFA;
}
.price-box .price-amount {
    display: block;
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 700;
    color: var(--ink-black);
    line-height: 1.15;
}
.price-box .price-per {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}
.price-box .hint { display: block; margin-top: 8px; text-align: center; }
.price-box.included .price-amount { font-size: 20px; color: var(--ok, #15803d); }

/* What an existing install actually costs them. */
.price-note {
    margin: 10px 0 12px;
    padding: 10px 12px;
    border-radius: 9px;
    background: #FAFAFA;
    font-size: 13px;
    color: var(--ink-grey);
}
.price-note .hint { display: block; margin-top: 5px; }

/* v2.9.0. One installed app on the company page: who they are, what they
   pay, and the controls to change it. The controls sit on their own line so
   a mis-aimed click cannot hit "Free for them". */
.app-charge-row {
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
}
.app-charge-row:last-of-type { border-bottom: 0; }
.app-charge-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 10px 0 0 44px;
}
.app-charge-form input[type="number"] { max-width: 110px; padding-left: 25px; }
@media (max-width: 700px) {
    .app-charge-form { margin-left: 0; }
}

/* v2.9.0. App pricing: three tier prices per app, side by side, each with
   its own little label. A settings row per tier per app would have run to
   dozens of rows on one page. Collapses to a single column on a phone. */
.tier-prices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 560px;
}
.tier-price > span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted);
    margin-bottom: 5px;
}
/* The dollar sign is part of the control, not the value, so the operator
   never has to wonder whether to type it (and cents are never implied). */
.tier-price .money-wrap { position: relative; }
.tier-price .money-wrap::before {
    content: "$";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--muted);
    pointer-events: none;
}
.tier-price input { padding-left: 25px; width: 100%; }
@media (max-width: 700px) {
    .tier-prices { grid-template-columns: minmax(0, 1fr); }
}

/* A priced app's row is the one an operator can cost a customer money with,
   so when charging is on the row is tinted rather than looking identical to
   an included one. */
.app-price-row { padding: 16px 0; border-bottom: 1px dashed var(--line); }
.app-price-row:last-of-type { border-bottom: 0; }
.app-price-head { display: flex; align-items: center; gap: 12px; }
.app-price-head .store-icon { flex: 0 0 auto; }
.app-price-body { margin: 12px 0 0 52px; }
@media (max-width: 700px) {
    .app-price-body { margin-left: 0; }
}

/* Several related on/off toggles that belong on one line together, rather
   than one settings row per checkbox. */
.check-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 18px 8px 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-black);
    cursor: pointer;
}
.check-inline input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--brand);
    cursor: pointer;
}
/* Inline validation text, e.g. a rejected ABN. */
.err { color: #b91c1c; }

.set-section-title {
    font-family: var(--font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 12px;
    color: var(--muted);
    margin: 22px 0 2px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.set-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ------------------------------------------------------ landing tiles -- */
.set-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}
.set-tile {
    display: block;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink-grey);
}
.set-tile:hover {
    border-color: var(--brand);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    color: var(--ink-grey);
}
.set-tile .set-tile-top {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
}
.set-tile i { width: 16px; height: 16px; color: var(--brand); flex: 0 0 16px; }
.set-tile strong { font-size: 13.5px; }
.set-tile p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------- menu editor -- */
.menu-editor { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.menu-row {
    display: grid;
    grid-template-columns: 30px 1fr 92px 110px;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.menu-row:last-child { border-bottom: 0; }
.menu-row.is-hidden { background: var(--bg); }
.menu-row.is-hidden .menu-name { color: var(--muted); text-decoration: line-through; }
.menu-row .menu-name { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13.5px; }
.menu-row .menu-name i { width: 15px; height: 15px; color: var(--muted); }
.menu-row input[type=number] { width: 100%; padding: 7px 9px; }
.menu-grip { color: var(--line); text-align: center; }
.menu-head {
    display: grid;
    grid-template-columns: 30px 1fr 92px 110px;
    gap: 12px;
    padding: 9px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
}

/* ------------------------------------------------------------- toggle --- */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
    width: 40px; height: 22px; border-radius: 999px;
    background: #D4D4D8; position: relative; transition: background .15s ease;
    flex: 0 0 40px;
}
.switch .track::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--brand-softer); }
/* A locked-on switch must still read as ON. At .5 it looked greyed out, i.e.
   exactly like "off" — the opposite of what it means. */
.switch input:disabled + .track { opacity: .75; cursor: not-allowed; }
.switch .switch-text { font-size: 13px; color: var(--ink-grey); }

/* ------------------------------------------------------ email templates -- */
.tpl-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
.tpl-list { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.tpl-list a {
    display: block; padding: 10px 13px; font-size: 13px; color: var(--ink-grey);
    border-bottom: 1px solid var(--line); border-left: 2px solid transparent;
}
.tpl-list a:last-child { border-bottom: 0; }
.tpl-list a:hover { background: var(--bg); }
.tpl-list a.active {
    background: var(--brand-softer); border-left-color: var(--brand);
    font-weight: 700; color: var(--ink-black);
}
.tpl-list a small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.token {
    display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; background: var(--bg); border: 1px solid var(--line);
    border-radius: 6px; padding: 2px 7px; margin: 0 5px 5px 0; color: var(--ink-grey);
    cursor: pointer;
}
.token:hover { border-color: var(--brand); color: var(--brand-dark); }
textarea.tpl-body { min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; }

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 900px) {
    .set-shell { grid-template-columns: 1fr; }
    .set-nav { position: static; max-height: none; }
    .set-row { grid-template-columns: 1fr; gap: 6px; }
    .set-row > label, .set-row .set-label { margin-top: 0; }
    .tpl-layout { grid-template-columns: 1fr; }
    .menu-row, .menu-head { grid-template-columns: 24px 1fr 70px 90px; gap: 8px; }
}

/* ------------------------------------------------- v2.5.0 email settings -- */
/* The small circled "i" beside a label. `title` carries the explanation, so
   this stays a hint rather than another paragraph competing with the field. */
.info-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--muted);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    cursor: help;
    vertical-align: 1px;
    user-select: none;
}
.info-dot:hover { background: var(--ink-black); }

/* ------------------------------------------------------- v2.5.0 code editor */
/* A transparent textarea sits exactly on top of a highlighted <pre>. Every
   metric that affects glyph position MUST be identical on both, or the
   caret drifts away from the text as you type. That is why the font stack,
   size, line-height, padding, letter-spacing and tab-size are declared once
   here and inherited by both layers. */
.ce-wrap {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #fbfbfc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.65;
    letter-spacing: 0;
    tab-size: 2;
}
.ce-wrap:focus-within { border-color: var(--brand); }

.ce-gutter {
    flex: 0 0 auto;
    padding: 12px 8px 12px 12px;
    text-align: right;
    color: #a1a1aa;
    background: #f4f4f5;
    border-right: 1px solid var(--line);
    user-select: none;
    white-space: pre;
    overflow: hidden;
    font: inherit;
    line-height: inherit;
}

.ce-scroller { position: relative; flex: 1 1 auto; min-width: 0; }

.ce-highlight,
.ce-input {
    margin: 0;
    padding: 12px;
    border: 0;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    tab-size: inherit;
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
}

.ce-highlight {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    color: #18181b;
    will-change: transform;
}

.ce-input {
    position: relative;
    display: block;
    width: 100%;
    min-height: 340px;
    resize: vertical;
    background: transparent;
    color: transparent;      /* the <pre> underneath supplies the colour */
    caret-color: #18181b;
    overflow: auto;
    outline: none;
}
.ce-input::selection { background: rgba(37, 99, 235, .22); }

/* Token colours. Muted on purpose — this is a settings page, not an IDE. */
.ce-tag     { color: #7c3aed; }
.ce-attr    { color: #2563eb; }
.ce-string  { color: #15803d; }
.ce-comment { color: #9ca3af; font-style: italic; }
.ce-punct   { color: #6b7280; }
.ce-token   {
    color: #b45309;
    background: #fef3c7;
    border-radius: 3px;
    font-weight: 600;
}

/* --------------------------------------------------------- editor tabs -- */
.ce-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}
.ce-tab {
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    background: #f4f4f5;
    border: 1px solid var(--line);
    border-bottom-color: transparent;
    border-radius: 7px 7px 0 0;
    cursor: pointer;
}
.ce-tab:hover { color: var(--ink-black); }
.ce-tab.active {
    color: var(--ink-black);
    background: #fbfbfc;
}
.ce-pane { display: none; }
.ce-pane.active { display: block; }
.ce-pane .ce-wrap { border-radius: 0 8px 8px 8px; }

.ce-preview {
    width: 100%;
    min-height: 340px;
    border: 1px solid var(--line);
    border-radius: 0 8px 8px 8px;
    background: #fff;
}

.ce-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 0;
}
.ce-note {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 0;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .ce-input, .ce-preview { min-height: 240px; }
}

/* --------------------------------------------------------------------------
   v2.6.0 — Pricing, plan choice and the signup wizard
   -------------------------------------------------------------------------- */

/* --- the public pricing page --------------------------------------------- */
.price-hero { text-align: center; padding: 56px 24px 8px; }
.price-hero h1 {
    font-family: var(--font-head); font-size: 40px; line-height: 1.1;
    letter-spacing: -1px; margin: 0 0 12px;
}
.price-hero p {
    color: var(--muted); font-size: 16px; max-width: 620px;
    margin: 0 auto 8px; line-height: 1.6;
}
.price-note {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--brand-softer); color: var(--ink);
    border: 1px solid var(--brand-soft); border-radius: 999px;
    padding: 7px 16px; font-size: 13px; font-weight: 600; margin-top: 14px;
}

/* v2.6.0: five tiers, not four. Five equal columns at 1120px would give each
   card ~200px, which is narrower than the longest feature line and forces a
   ragged wrap in every card. The business tiers get their own 4-up row and
   the individual tier is presented separately above it, because they are
   different products for different buyers rather than points on one ladder. */
.plan-grid {
    display: grid; gap: 20px; max-width: 1180px; margin: 36px auto;
    padding: 0 24px; grid-template-columns: repeat(4, 1fr); align-items: start;
}
@media (max-width: 1080px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .plan-grid { grid-template-columns: 1fr; } }

/* The individual tier: one wide card, visually separated from the business
   ladder so nobody reads "Solo" as the cheap end of the company pricing. */
.plan-solo-wrap { max-width: 1180px; margin: 36px auto 0; padding: 0 24px; }
.plan-solo {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 24px 28px; display: flex; align-items: center; gap: 26px;
    flex-wrap: wrap;
}
.plan-solo .solo-main { flex: 1 1 340px; min-width: 260px; }
.plan-solo .plan-name { margin-bottom: 2px; }
.plan-solo .solo-price {
    font-family: var(--font-head); font-size: 34px; line-height: 1;
    color: var(--ink);
}
.plan-solo .solo-feat {
    display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0;
    padding: 0; list-style: none;
}
.plan-solo .solo-feat li {
    font-size: 13px; color: var(--muted); display: flex; gap: 7px;
    align-items: center;
}
.plan-solo .solo-feat li::before {
    content: "✓"; color: var(--brand); font-weight: 700;
}

.audience-head {
    max-width: 1180px; margin: 44px auto 0; padding: 0 24px;
}
.audience-head h2 {
    font-family: var(--font-head); font-size: 23px; margin: 0 0 4px;
    color: var(--ink);
}
.audience-head p { color: var(--muted); font-size: 13.5px; margin: 0; }

@media (max-width: 640px) {
    .plan-solo { flex-direction: column; align-items: flex-start; gap: 16px; }
}

.plan-card {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 26px 22px; display: flex; flex-direction: column;
    position: relative; height: 100%;
}
.plan-card.is-featured {
    border-color: var(--brand); box-shadow: 0 12px 34px rgba(245,130,30,.16);
}
.plan-flag {
    position: absolute; top: -11px; left: 22px; background: var(--brand);
    color: var(--ink-black); font-size: 11px; font-weight: 800;
    letter-spacing: .6px; text-transform: uppercase;
    padding: 4px 11px; border-radius: 999px;
}
.plan-name {
    font-family: var(--font-head); font-size: 19px; font-weight: 800;
    margin: 0 0 4px;
}
.plan-seats { color: var(--muted); font-size: 12.5px; margin-bottom: 16px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 2px; }
.plan-amount {
    font-family: var(--font-head); font-size: 40px; font-weight: 800;
    letter-spacing: -1.5px; line-height: 1;
}
.plan-per { color: var(--muted); font-size: 13px; font-weight: 600; }
.plan-gst { color: var(--muted); font-size: 12px; min-height: 17px; margin-bottom: 16px; }
.plan-blurb {
    font-size: 13px; color: var(--ink-grey); line-height: 1.55;
    margin-bottom: 18px; min-height: 40px;
}
.plan-feat { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.plan-feat li {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 13px; color: var(--ink-grey); padding: 5px 0; line-height: 1.45;
}
.plan-feat svg { width: 15px; height: 15px; color: var(--brand); flex: 0 0 15px; margin-top: 2px; }
.plan-card .btn { width: 100%; justify-content: center; }

/* --- "how it works" ------------------------------------------------------ */
.how-strip { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 52px 24px; }
.how-grid {
    max-width: 1120px; margin: 0 auto; display: grid; gap: 28px;
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .how-grid { grid-template-columns: 1fr; } }
.how-step .how-num {
    width: 30px; height: 30px; border-radius: 9px; background: var(--brand-softer);
    color: var(--brand-dark); display: grid; place-items: center;
    font-weight: 800; font-size: 14px; margin-bottom: 11px;
    border: 1px solid var(--brand-soft);
}
.how-step h3 { font-size: 15px; margin: 0 0 6px; font-weight: 700; }
.how-step p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }

/* --- comparison table ---------------------------------------------------- */
.cmp-wrap { max-width: 1120px; margin: 52px auto; padding: 0 24px; }
/* A five-column comparison cannot compress below about 470px, so on a phone
   it must scroll INSIDE this box. Without it the table set the width of the
   document and every other section -- hero, plan cards, FAQ -- inherited a
   horizontal scrollbar it had no reason to have. */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; border-collapse: collapse; background: #fff;
    border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    min-width: 560px; }
.cmp-table th, .cmp-table td {
    padding: 13px 16px; text-align: left; font-size: 13.5px;
    border-bottom: 1px solid var(--line);
}
.cmp-table thead th {
    background: var(--bg); font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
}
.cmp-table td:not(:first-child), .cmp-table th:not(:first-child) { text-align: center; }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-yes { color: #15803d; font-weight: 700; }
.cmp-no  { color: var(--muted); }

/* --- FAQ ----------------------------------------------------------------- */
.faq-wrap { max-width: 820px; margin: 0 auto 64px; padding: 0 24px; }
.faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-item h4 { margin: 0 0 7px; font-size: 14.5px; font-weight: 700; }
.faq-item p { margin: 0; font-size: 13.5px; color: var(--ink-grey); line-height: 1.65; }

/* --- signup wizard ------------------------------------------------------- */
.wiz-steps {
    display: flex; align-items: center; gap: 0; margin: 0 0 26px;
    padding: 0; list-style: none; flex-wrap: wrap;
}
.wiz-steps li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.wiz-steps li + li::before {
    content: ""; width: 26px; height: 1px; background: var(--line); margin: 0 10px;
}
.wiz-dot {
    width: 23px; height: 23px; border-radius: 50%; display: grid;
    place-items: center; font-size: 11.5px; font-weight: 700;
    background: var(--bg); border: 1px solid var(--line); color: var(--muted);
}
.wiz-steps li.is-active { color: var(--ink); font-weight: 700; }
.wiz-steps li.is-active .wiz-dot {
    background: var(--brand); border-color: var(--brand); color: var(--ink-black);
}
.wiz-steps li.is-done .wiz-dot {
    background: var(--ink-black); border-color: var(--ink-black); color: #fff;
}

/* Plan chooser inside the wizard */
.pick-grid { display: grid; gap: 12px; margin-bottom: 8px; }
.pick {
    display: block; border: 1.5px solid var(--line); border-radius: 12px;
    padding: 15px 16px; cursor: pointer; background: #fff; position: relative;
    transition: border-color .12s, background .12s;
}
.pick:hover { border-color: var(--brand-2); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pick-name { font-weight: 700; font-size: 14.5px; }
.pick-cost { font-weight: 800; font-size: 16px; white-space: nowrap; }
.pick-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.pick input:checked + .pick-body { color: inherit; }
.pick.is-picked { border-color: var(--brand); background: var(--brand-softer); }
.pick input:focus-visible + .pick-body { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Order summary */
.summary-box {
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    padding: 16px 18px; margin: 18px 0;
}
.summary-row {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 13.5px; padding: 5px 0; color: var(--ink-grey);
}
.summary-row.is-total {
    border-top: 1px solid var(--line); margin-top: 8px; padding-top: 11px;
    font-weight: 800; color: var(--ink); font-size: 15px;
}
.summary-row .muted { color: var(--muted); }
.trial-banner {
    display: flex; gap: 11px; align-items: flex-start;
    background: #F0FDF4; border: 1px solid #BBF7D0; color: #14532D;
    border-radius: 11px; padding: 13px 15px; font-size: 13px;
    line-height: 1.55; margin-bottom: 18px;
}
.trial-banner svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }

/* Card entry */
.card-fields { display: grid; gap: 12px; grid-template-columns: 1fr 1fr 1fr; }
.card-fields .span-3 { grid-column: 1 / -1; }
.pay-secure {
    display: flex; align-items: center; gap: 7px; color: var(--muted);
    font-size: 12px; margin-top: 10px;
}
.pay-secure svg { width: 14px; height: 14px; }
.dummy-note {
    background: #FEF9C3; border: 1px solid #FDE68A; color: #713F12;
    border-radius: 10px; padding: 11px 14px; font-size: 12.5px;
    line-height: 1.55; margin-bottom: 16px;
}

/* ------------------------------------------------- contact sales (v2.6.0) */
.sales-wrap { max-width: 1040px; margin: 0 auto; padding: 52px 24px 70px; }

.sales-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
    align-items: start;
}
.sales-h1 {
    font-family: var(--font-head); font-size: 34px; line-height: 1.15;
    margin: 0 0 14px; color: var(--ink);
}
.sales-lead {
    font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 26px;
}

.sales-points { display: grid; gap: 16px; }
.sales-point { display: flex; gap: 13px; align-items: flex-start; }
.sales-point svg {
    width: 19px; height: 19px; flex: 0 0 19px; margin-top: 2px;
    stroke: var(--brand);
}
.sales-point strong {
    display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px;
}
.sales-point span { font-size: 13px; color: var(--muted); line-height: 1.5; }

.sales-card {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 30px 28px; box-shadow: 0 4px 22px rgba(0, 0, 0, .05);
}
.sales-card h2 {
    font-family: var(--font-head); font-size: 21px; margin: 0 0 6px;
    color: var(--ink);
}

.sales-done {
    max-width: 560px; margin: 0 auto; text-align: center;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 44px 34px; box-shadow: 0 4px 22px rgba(0, 0, 0, .05);
}
.sales-done h1 {
    font-family: var(--font-head); font-size: 27px; margin: 0 0 12px;
    color: var(--ink);
}
.sales-done p { font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; }
.sales-tick {
    width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 20px;
    background: #DCFCE7; display: flex; align-items: center;
    justify-content: center;
}
.sales-tick svg { width: 28px; height: 28px; stroke: #15803D; stroke-width: 3; }

@media (max-width: 860px) {
    .sales-grid { grid-template-columns: 1fr; gap: 32px; }
    .sales-h1 { font-size: 27px; }
}

/* --------------------------------------------- signup wizard (v2.6.0) */
.wiz-wrap { max-width: 780px; margin: 0 auto; padding: 40px 24px 70px; }
.wiz-wrap.is-wide { max-width: 980px; }

.wiz-card {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 32px 34px; box-shadow: 0 4px 22px rgba(0, 0, 0, .05);
}
.wiz-h1 {
    font-family: var(--font-head); font-size: 25px; margin: 0 0 6px;
    color: var(--ink);
}
.wiz-sub {
    color: var(--muted); font-size: 13.5px; line-height: 1.6;
    margin: 0 0 22px;
}
.wiz-card .field-row.thirds {
    grid-template-columns: 2fr 1fr 1fr;
}
.wiz-actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 26px; padding-top: 20px;
    border-top: 1px solid var(--line);
}
.wiz-actions .spacer { flex: 1; }
.wiz-back {
    font-size: 13px; color: var(--muted); text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.wiz-back:hover { color: var(--ink); }
.wiz-legend {
    font-family: var(--font-head); font-size: 15px; margin: 26px 0 14px;
    padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink);
}
.wiz-legend:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

/* The two big "who are you" choices on step one. */
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.type-card {
    display: block; cursor: pointer; background: #fff; text-align: left;
    border: 2px solid var(--line); border-radius: 14px; padding: 22px 22px;
    transition: border-color .12s, box-shadow .12s;
}
.type-card:hover { border-color: var(--brand-2); }
.type-card input { position: absolute; opacity: 0; pointer-events: none; }
.type-card.is-picked, .type-card:has(input:checked) {
    border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-softer);
}
.type-card .tc-icon {
    width: 38px; height: 38px; border-radius: 10px; display: grid;
    place-items: center; background: var(--brand-softer); margin-bottom: 14px;
}
.type-card .tc-icon svg { width: 19px; height: 19px; stroke: var(--brand); }
.type-card h3 {
    font-family: var(--font-head); font-size: 17px; margin: 0 0 6px;
    color: var(--ink);
}
.type-card p { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }
.type-card .tc-price {
    display: inline-block; margin-top: 12px; font-size: 12.5px;
    font-weight: 700; color: var(--ink);
}
@media (max-width: 640px) { .type-grid { grid-template-columns: 1fr; } }

/* An inline confirmation that a typed ABN really is a valid ABN. */
.abn-state { font-size: 12px; margin-top: 5px; min-height: 16px; }
.abn-ok { color: #15803D; }
.abn-bad { color: #B91C1C; }

.check-row {
    display: flex; gap: 10px; align-items: flex-start; margin: 14px 0;
    font-size: 13.5px; line-height: 1.55;
}
.check-row input[type=checkbox] { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 16px; }
.check-row label { font-weight: 400; margin: 0; font-size: 13.5px; }

/* Plan chooser additions (v2.6.0) — the wizard renders name/sub stacked and
   shows a live "fits N people" hint driven by the seat count. */
.pick-name, .pick-sub { display: block; }
.pick-cost { text-align: right; }
.pick-per { font-weight: 600; font-size: 12px; color: var(--muted); }
.pick-gst {
    display: block; font-weight: 500; font-size: 11.5px; color: var(--muted);
    margin-top: 2px;
}
.pick-note {
    display: block; margin-top: 9px; font-size: 12.5px; color: var(--muted);
    line-height: 1.5;
}
.pick-note a { color: var(--brand-dark); }
.pick-fit {
    display: inline-block; margin-top: 9px; font-size: 11.5px;
    font-weight: 700; color: #15803D; background: #DCFCE7;
    border-radius: 999px; padding: 3px 10px;
}
.pick.is-suggested { border-color: var(--brand-2); }
/* A disabled tier (Enterprise) must not look clickable — it is an enquiry,
   not a selection, and offering it as a choice here would provision a
   company on a plan with no agreed price. */
.pick:has(input:disabled) { cursor: default; opacity: .82; background: var(--bg); }
.pick:has(input:disabled):hover { border-color: var(--line); }

/* Over-band notice on the plan step. Shown when the seat count only
   Enterprise can cover, where there is no self-serve plan to select. */
.pick-over {
    display: flex; gap: 11px; align-items: flex-start; margin-top: 18px;
    padding: 14px 16px; border-radius: 12px; background: #FFF7ED;
    border: 1px solid #FED7AA; font-size: 13.5px; line-height: 1.6;
    color: #7C2D12;
}
.pick-over svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }
.pick-over a { color: var(--brand); font-weight: 700; }

/* --------------------------------------------------------------------------
   Stripe Elements mount (v2.7.0)

   The card fields are an iframe served by Stripe, so we cannot style their
   insides from here -- only the box they sit in. It is made to match the
   app's own inputs exactly, because a payment field that looks foreign is a
   payment field people abandon.
   -------------------------------------------------------------------------- */
.stripe-mount {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    min-height: 44px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Stripe adds these classes to the mount element itself. */
.stripe-mount.StripeElement--focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-softer);
}
.stripe-mount.StripeElement--invalid { border-color: #b91c1c; }
/* stripe.js failed to load, so the box explains itself instead of sitting
   there empty and unusable. */
.stripe-mount-failed {
    border-style: dashed;
    border-color: #b91c1c;
    color: #b91c1c;
    font-size: 13px;
    line-height: 1.5;
    background: #fef2f2;
}

/* ------------------------------------------------- Lumiq logo (v2.8.2) ---
   Real artwork, recovered from the brand guidelines, replacing the "◆"
   placeholder. The wordmark is a wide PNG (894x184), so every rule below
   sizes by HEIGHT and lets width follow; setting a width instead squashes
   the mark, which the guidelines forbid ("Do not alter the proportions").
   object-fit is contain, never cover, for the same reason -- cover would
   crop the trailing full stop off the logo.                                */
.brand-logo {
    display: block;
    width: auto;
    object-fit: contain;
    /* The artwork carries its own clear space, so no extra padding. */
}

/* Public site header (dark bar) - the white wordmark. */
.land-logo-img {
    height: 30px;
    max-width: 168px;
}
/* When the wordmark is present it replaces BOTH the emoji tile and the
   company-name text, so the header does not read "LUMIQ. LUMIQ". */
.land-nav .land-brand { display: flex; align-items: center; gap: 10px; }

/* Sign-in card and the welcome card (light background) - black wordmark. */
.public-logo-img {
    height: 42px;
    max-width: 230px;
    margin: 0 auto 18px;
}

/* Admin/portal sidebar (dark) - white wordmark, tucked to the same
   optical size as the old 34px emoji tile. */
.sidebar .brand .brand-logo {
    height: 30px;
    max-width: 168px;
}

/* Footer marks sit quieter than header marks. */
.land-foot .brand-logo { height: 24px; max-width: 132px; opacity: .85; }

@media (max-width: 640px) {
    .land-logo-img { height: 25px; max-width: 132px; }
    .public-logo-img { height: 36px; max-width: 190px; }
}

/* ---------------------------------------------------------------- v2.9.0
   Signup step 5: choose your apps.

   Multi-select sibling of `.pick` above. The checkbox is visible on
   purpose (see v290_c_css.py) -- this is the one wizard step where more
   than one answer is allowed, and the control has to say so. */
.app-pick-list {
    display: grid; gap: 10px; margin: 4px 0 18px;
}
.app-pick {
    display: flex; align-items: center; gap: 13px;
    border: 1.5px solid var(--line); border-radius: 12px;
    padding: 13px 15px; cursor: pointer; background: #fff;
    transition: border-color .12s, background .12s;
}
.app-pick:hover { border-color: var(--brand-2); }
.app-pick.is-picked { border-color: var(--brand); background: var(--brand-softer); }
.app-pick:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
.app-pick input[type="checkbox"] {
    width: 18px; height: 18px; flex: 0 0 18px; margin: 0;
    accent-color: var(--brand); cursor: pointer;
}
.app-pick .store-icon { flex-shrink: 0; }
.app-pick-main { flex: 1; min-width: 0; }
.app-pick-name {
    display: block; font-weight: 700; font-size: 14.5px; color: var(--ink-black);
}
.app-pick-sub {
    display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-pick-cost {
    font-weight: 800; font-size: 15.5px; white-space: nowrap;
    color: var(--ink-black); text-align: right;
}
.app-pick-per { font-weight: 600; font-size: 12px; color: var(--muted); }
.app-pick-free {
    font-weight: 700; font-size: 12px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ok);
}

/* Running total. Display only -- the charged figure is the one the server
   stored in the session and re-checks at confirm. */
.app-total {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 17px; margin-bottom: 8px; font-size: 14px;
}
.app-total-figure { white-space: nowrap; }
.app-total-figure strong { font-size: 19px; color: var(--ink-black); }
.app-total-figure .muted { font-size: 12.5px; }

@media (max-width: 560px) {
    .app-pick { gap: 11px; padding: 12px 13px; }
    .app-pick .store-icon.sm { width: 30px; height: 30px; flex: 0 0 30px; }
    .app-pick .store-icon.sm i { width: 15px; height: 15px; }
    .app-pick-cost { font-size: 14px; }
    .app-total { padding: 13px 14px; }
    .app-total-figure strong { font-size: 17px; }
}

/* ===================================================== v2.10.0 page header
   The topbar carried a single word and nothing else. This band gives each
   main screen a title, a line of purpose, and the figures that matter,
   before the reader has to scroll or interpret a table. */
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding: 0 0 18px; margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.page-head-main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.page-head-icon {
    flex: none;
    width: 42px; height: 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-softer); color: var(--brand);
    border: 1px solid var(--brand-soft);
}
.page-head-icon i { width: 20px; height: 20px; }
.page-head-text { min-width: 0; }
.page-head-text h1 {
    margin: 0; font-family: var(--font-head);
    font-size: 22px; line-height: 1.2; letter-spacing: -.01em;
    color: var(--ink-black);
}
.page-head-text p {
    margin: 5px 0 0; font-size: 13px; color: var(--muted);
    max-width: 68ch; line-height: 1.5;
}
.page-head-stats { display: flex; gap: 26px; flex-wrap: wrap; padding-top: 2px; }
.page-head-stat { display: flex; flex-direction: column; gap: 2px; }
.phs-value {
    font-family: var(--font-head); font-size: 19px; font-weight: 700;
    color: var(--ink-black); line-height: 1.1;
}
.phs-value.brand { color: var(--brand); }
.phs-value.ok    { color: #12805C; }
.phs-value.warn  { color: #9A6700; }
.phs-value.crit  { color: #B42318; }
.phs-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 600;
}
@media (max-width: 700px) {
    .page-head { gap: 14px; }
    .page-head-stats { gap: 18px; }
    .page-head-text h1 { font-size: 19px; }
}

/* ------------------------------------------- money column + totals row */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-total { font-size: 15px; color: var(--ink-black); }
tfoot .total-row td {
    background: var(--bg);
    border-top: 2px solid var(--line);
    padding-top: 13px; padding-bottom: 13px;
}

/* --------------------------------------------------- v2.10.0 detail tabs
   The company page had nine cards open at once down a two-column scroll.
   These group them the way Settings is grouped. They are real links with
   a ?tab= so a view can be linked to and survives a refresh -- a
   JavaScript-only toggle would lose the operator's place on every save. */
.detail-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    margin: 0 0 20px;
}
.detail-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 15px; margin-bottom: -1px;
    font-size: 13px; font-weight: 600; color: var(--muted);
    text-decoration: none; border: 1px solid transparent;
    border-bottom: 2px solid transparent; transition: .15s;
}
.detail-tab:hover { color: var(--ink); background: #F1F1F2; }
.detail-tab.active {
    color: var(--brand); border-bottom-color: var(--brand);
    background: none;
}
.detail-tab i { width: 15px; height: 15px; }
.detail-tab .tab-count {
    font-size: 11px; font-weight: 700; padding: 1px 7px;
    border-radius: 999px; background: var(--line); color: var(--ink-grey);
}
.detail-tab.active .tab-count { background: var(--brand-soft); color: var(--brand-dark); }
@media (max-width: 700px) {
    .detail-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .detail-tab { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   The billing summary is a <table class="kv">, but `.kv` was written as a
   two-column CSS *grid* for <dl> lists. On a table those grid rules apply to
   the <tbody>, not to the cells, so every row collapsed into the 190px label
   column and values wrapped one word per line -- "09 / October / 2026" down
   three lines. It only became obvious once the card was on its own tab with
   room to spare beside it.

   Restoring table layout for this one case, rather than changing `.kv`,
   because the dl form of it is used correctly in several other places.
   -------------------------------------------------------------------------- */
table.kv {
    display: table; width: 100%; border-collapse: collapse;
    font-size: 13.5px;
}
table.kv tr { border-bottom: 1px solid var(--line); }
table.kv tr:last-child { border-bottom: none; }
table.kv th {
    text-align: left; vertical-align: top; white-space: nowrap;
    width: 140px; padding: 9px 14px 9px 0;
    color: var(--muted); font-weight: 600;
}
table.kv td {
    vertical-align: top; padding: 9px 0;
    color: var(--ink-black); word-break: break-word;
}
@media (max-width: 700px) {
    table.kv th { width: 110px; white-space: normal; }
}

/* A tab holding a single card should use the width it has. `.two-col` would
   leave a wide empty column beside it, which reads as though something
   failed to load -- and the Business details form is long enough that the
   extra width genuinely helps. */
.one-col { display: block; }
.one-col > div { display: block; }

/* ==========================================================================
   THE COMPANY SHELL (v2.11.0)
   ==========================================================================
   The company side moved from a left sidebar to a dark topbar plus a bottom
   navigation bar. Everything here is prefixed and scoped to `.portal-body`
   or a `p*` class so it cannot reach the platform admin shell, which keeps
   its sidebar. That isolation is deliberate: the two shells are now
   different designs and must be able to change independently.

   Built on the existing tokens (--brand, --line, --bg, --card-radius) so an
   operator's branding still drives the company side, rather than hard-coding
   the orange from the mockups.
   ========================================================================== */

.portal-body {
    margin: 0;
    background: var(--bg);
    /* Room for the fixed bottom bar, plus the iOS home indicator. Without
       this the last card on a long page sits underneath the navigation. */
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------- dark topbar */
.pbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 18px;
    padding: 0 20px; height: 60px;
    background: var(--sidebar-bg); color: var(--sidebar-text);
}
.pbar-brand {
    display: flex; align-items: center; gap: 9px;
    color: inherit; text-decoration: none; flex: 0 0 auto;
}
.pbar-brand img { height: 26px; width: auto; display: block; }
.pbar-logo { color: var(--brand); font-size: 20px; line-height: 1; }
.pbar-word {
    font-family: var(--font-head); font-weight: 700;
    font-size: 19px; letter-spacing: .01em;
}

/* The search sits in the middle on wide screens, exactly as designed. */
.pbar-search {
    position: relative; flex: 1 1 auto;
    max-width: 520px; margin: 0 auto;
}
.pbar-search svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: rgba(255, 255, 255, .55);
    pointer-events: none;
}
.pbar-search input {
    width: 100%; height: 36px; box-sizing: border-box;
    padding: 0 12px 0 34px;
    border-radius: 9px; border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .07); color: #fff;
    font: inherit; font-size: 13.5px;
}
.pbar-search input::placeholder { color: rgba(255, 255, 255, .5); }
.pbar-search input:focus {
    outline: none; border-color: var(--brand);
    background: rgba(255, 255, 255, .12);
}
/* Chrome adds its own clear button; it collides with the dark field. */
.pbar-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.pbar-right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------- account / workspace menu
   A <details> element rather than a JS dropdown: it opens without
   JavaScript, closes on Escape natively, and is keyboard reachable for
   free. */
.pmenu { position: relative; }
.pmenu > summary {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 9px 5px 5px; border-radius: 999px;
    cursor: pointer; list-style: none;
    background: rgba(255, 255, 255, .07);
}
.pmenu > summary::-webkit-details-marker { display: none; }
.pmenu > summary:hover { background: rgba(255, 255, 255, .13); }
.pmenu > summary svg { width: 15px; height: 15px; opacity: .7; }
.pmenu-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    font-weight: 700; font-size: 12.5px;
}
.pmenu-name {
    font-size: 13.5px; font-weight: 600; max-width: 190px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmenu-drop {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px;
    background: #fff; color: var(--ink); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
    padding: 6px; z-index: 50;
}
.pmenu-head {
    display: block; padding: 9px 11px 11px;
    border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.pmenu-head strong { display: block; font-size: 13.5px; }
.pmenu-head span { color: var(--muted); font-size: 12px; }
.pmenu-drop a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: 8px;
    color: var(--ink-grey); text-decoration: none; font-size: 13.5px;
}
.pmenu-drop a:hover { background: var(--bg); color: var(--ink); }
.pmenu-drop a svg { width: 16px; height: 16px; color: var(--muted); }
.pmenu-out {
    border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px !important;
}

/* --------------------------------------------------------------- content */
.pmain {
    padding: 26px 28px 8px;
    max-width: 1360px; margin: 0 auto;
}

/* ------------------------------------------------------- bottom navigation */
.pnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: stretch;
    background: #fff; border-top: 1px solid var(--line);
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .05);
}
.pnav-item {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 11px 8px; border-radius: 11px;
    color: var(--muted); text-decoration: none;
    font-size: 13.5px; font-weight: 600;
}
.pnav-item svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pnav-item span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pnav-item:hover { color: var(--ink); background: var(--bg); }
.pnav-item.active { color: var(--brand); background: var(--brand-softer); }

/* ------------------------------------------------------------- hero band */
.phero {
    position: relative; overflow: hidden;
    border-radius: 16px; margin: 0 0 18px;
    background: #121212; color: #fff;
    padding: 26px 30px;
    display: flex; align-items: center; gap: 26px;
}
/* The warm glow from the mockups, done in CSS rather than as an image so it
   follows the operator's brand colour and costs no download. */
.phero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(120% 150% at 78% 50%,
            color-mix(in srgb, var(--brand) 42%, transparent) 0%,
            transparent 62%);
}
.phero-text { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.phero-eyebrow {
    display: block; text-transform: uppercase; letter-spacing: .1em;
    font-size: 11px; font-weight: 700; color: var(--brand-2);
    margin-bottom: 9px;
}
.phero h2 {
    font-family: var(--font-head); font-size: 27px; line-height: 1.15;
    margin: 0 0 9px; color: #fff;
}
.phero p {
    margin: 0 0 17px; color: rgba(255, 255, 255, .76);
    font-size: 14px; max-width: 60ch;
}
.phero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.phero .btn-ghost {
    background: transparent; color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
}
.phero .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
/* The tick list on the right of the marketplace hero. */
.phero-points {
    position: relative; z-index: 1; flex: 0 0 auto;
    display: grid; gap: 9px;
}
.phero-point {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: rgba(255, 255, 255, .86);
}
.phero-point svg { width: 15px; height: 15px; color: var(--brand-2); }

/* --------------------------------------------------------- the plan rail */
.pplan {
    background: #121212; color: #fff; border-radius: 16px;
    padding: 20px 22px; position: relative; overflow: hidden;
}
.pplan-label {
    text-transform: uppercase; letter-spacing: .1em;
    font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .6);
}
.pplan h3 {
    font-family: var(--font-head); font-size: 24px; margin: 6px 0 2px;
    color: #fff;
}
.pplan-sub { color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.pplan-list { list-style: none; margin: 15px 0 17px; padding: 0; display: grid; gap: 8px; }
.pplan-list li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 12.5px; color: rgba(255, 255, 255, .84);
}
.pplan-list svg { width: 14px; height: 14px; color: var(--brand); flex: 0 0 auto; margin-top: 2px; }
.pplan-crown {
    position: absolute; right: 20px; top: 20px;
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--brand) 22%, transparent);
    color: var(--brand);
}

/* ------------------------------------------------------------ stat strip */
.pstats {
    display: grid; gap: 14px; margin: 0 0 18px;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.pstat {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--card-radius); padding: 15px 17px;
    display: flex; align-items: center; gap: 14px; min-width: 0;
}
.pstat-icon {
    width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
    display: grid; place-items: center;
}
.pstat-icon svg { width: 19px; height: 19px; }
.pstat-body { min-width: 0; }
.pstat-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.pstat-value {
    font-size: 25px; font-weight: 700; line-height: 1.1; margin: 1px 0 0;
    font-family: var(--font-head);
}
.pstat-value.sm { font-size: 19px; }
.pstat-sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.pstat-sub a { color: var(--brand); font-weight: 600; }
/* Soft icon tints. Named by hue rather than meaning so a page can pick
   what reads best beside its neighbours. */
.tint-brand { background: var(--brand-softer); color: var(--brand); }
.tint-indigo { background: rgba(79, 70, 229, .12); color: #4F46E5; }
.tint-green { background: rgba(21, 128, 61, .12); color: var(--ok); }
.tint-sky { background: rgba(14, 165, 233, .12); color: #0EA5E9; }

/* --------------------------------------------------------- content columns */
.pcols {
    display: grid; gap: 18px; align-items: start;
    grid-template-columns: 1fr 1fr 1fr;
}
.pcols-main {
    display: grid; gap: 18px; align-items: start;
    grid-template-columns: 2fr 1fr;
}

/* ----------------------------------------------------------- list rows */
.prow {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid var(--line);
}
.prow:last-child { border-bottom: none; }
.prow-icon {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
    display: grid; place-items: center; color: #fff;
}
.prow-icon svg { width: 16px; height: 16px; }
.prow-icon.ghost {
    background: var(--bg); color: var(--muted); border: 1px solid var(--line);
}
.prow-body { min-width: 0; flex: 1 1 auto; }
.prow-body strong { display: block; font-size: 13.5px; }
.prow-body span { color: var(--muted); font-size: 12px; }
.prow-when { color: var(--muted); font-size: 11.5px; white-space: nowrap; }

/* Quick actions -- a list of links that behaves like a menu. */
.pactions { display: grid; }
.pactions a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 10px;
    text-decoration: none; color: var(--ink);
    border-bottom: 1px solid var(--line);
}
.pactions a:last-child { border-bottom: none; }
.pactions a:hover { background: var(--brand-softer); }
.pactions .prow-icon { background: var(--bg); color: var(--brand); border: 1px solid var(--line); }
.pactions strong { display: block; font-size: 13.5px; }
.pactions span { color: var(--muted); font-size: 12px; }
.pactions .chev { margin-left: auto; color: var(--muted); }
.pactions .chev svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- search page */
.psearch-group { margin-bottom: 22px; }
.psearch-group h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); margin: 0 0 8px;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
    .pcols { grid-template-columns: 1fr 1fr; }
    .pcols-main { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .pmain { padding: 20px 16px 8px; }
    .pcols { grid-template-columns: 1fr; }
    .phero { flex-direction: column; align-items: flex-start; padding: 22px; }
    .phero-points { grid-template-columns: 1fr 1fr; }
    /* The wordmark and the company name both compete with the search box
       on a phone; the search keeps the space because it is the useful one. */
    .pmenu-name { display: none; }
    .pbar { gap: 12px; padding: 0 14px; }
}
@media (max-width: 620px) {
    .phero h2 { font-size: 22px; }
    .phero-points { display: none; }
    /* Labels below icons, the way a phone tab bar reads. */
    .pnav { padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
    .pnav-item { flex-direction: column; gap: 4px; font-size: 10.5px; padding: 7px 2px; }
    .pnav-item svg { width: 20px; height: 20px; }
    .pbar-word { display: none; }
}

/* ==========================================================================
   THE COMPANY DASHBOARD (v2.11.0)
   ==========================================================================
   The pieces the redesigned dashboard and the search page need on top of the
   shell above. Same isolation rule as the rest of this section: every
   selector is `p*`-prefixed or nested inside one, so nothing here can reach
   the platform admin shell.
   ========================================================================== */

/* -------------------------------------------------- greeting / date header */
.phead-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; margin: 0 0 18px;
}
.phead-greet h1 {
    font-family: var(--font-head); font-size: 28px; line-height: 1.15;
    margin: 0;
}
.phead-sub { color: var(--ink-grey); font-size: 14px; margin: 5px 0 0; }
.phead-date { text-align: right; flex: 0 0 auto; }
.phead-date > strong { display: block; font-size: 13.5px; }

/* The service-status reading. Real words from the status collector, with a
   colour that matches them -- never a made-up uptime percentage. */
.pstatus {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
    font-size: 12px; font-weight: 600; color: var(--muted);
    text-decoration: none;
}
a.pstatus:hover { text-decoration: underline; }
.pstatus .pdot {
    width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: currentColor;
}
.pstatus.ok { color: var(--ok); }
.pstatus.warning { color: var(--warn); }
.pstatus.critical { color: var(--crit); }

/* ------------------------------------------------------- hero + plan rail */
.phero-row {
    display: grid; gap: 18px; align-items: stretch;
    grid-template-columns: minmax(0, 1fr) 300px;
    margin: 0 0 18px;
}
/* The hero already carries its own bottom margin for the marketplace page;
   inside this row the grid gap does that job instead. */
.phero-row .phero { margin: 0; }

/* ------------------------------------------------------------ list tweaks */
.prow-list { list-style: none; margin: 0; padding: 0; }
/* Cards whose content is a full-width list: keep the vertical padding but
   drop the horizontal, so row separators run the width of the card. */
.card-body.tight-x { padding-left: 0; padding-right: 0; }
.card-body.tight-x .prow { padding-left: 17px; padding-right: 17px; }
.card-body.tight-x .pactions { padding: 0 6px; }
.card-body.tight-x .pempty { padding-left: 17px; padding-right: 17px; }

/* A plain inline link that reads as an action. */
.lnk {
    color: var(--brand); font-weight: 600; font-size: 12.5px;
    text-decoration: none;
}
.lnk:hover { text-decoration: underline; }

/* An empty state inside a dashboard column -- honest and quiet, not a
   placeholder pretending there is data. */
.pempty { text-align: center; padding: 26px 18px; color: var(--muted); }
.pempty svg { width: 26px; height: 26px; opacity: .45; }
.pempty h3 {
    font-family: var(--font-head); font-size: 16px; margin: 11px 0 5px;
    color: var(--ink);
}
.pempty p { margin: 9px 0 0; font-size: 13px; }
.pempty .btn { margin-top: 15px; }

/* The smallest button, for the trailing action on a dense list row. */
.btn-xs {
    padding: 5px 11px; font-size: 12px; border-radius: 8px;
    flex: 0 0 auto;
}

/* ------------------------------------------------- carried-over page actions
   The pages not yet redesigned still fill the old `topbar_actions` block.
   The new shell has no topbar slot for them, so they sit here above the
   page title rather than being dropped. */
.pacts-bar {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
}

/* ------------------------------------------------------------- search page */
.psearch-box { margin-bottom: 18px; }
.psearch-field {
    display: flex; align-items: center; gap: 11px;
}
.psearch-field > svg { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }
.psearch-field input {
    flex: 1 1 auto; min-width: 0; height: 40px; box-sizing: border-box;
    padding: 0 13px; border: 1px solid var(--line); border-radius: 10px;
    font: inherit; font-size: 14px; background: #fff;
}
.psearch-field input:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-softer);
}
.psearch-count { margin: 0 0 12px; font-size: 13px; }

@media (max-width: 1100px) {
    /* The plan rail stops being a rail and becomes a band under the hero. */
    .phero-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .phead-row { flex-direction: column; gap: 10px; }
    .phead-greet h1 { font-size: 23px; }
    .phead-date { text-align: left; }
    .psearch-field { flex-wrap: wrap; }
    .psearch-field input { width: 100%; }
    .psearch-field .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------- headline case, company side
   NOTE FOR THE OPERATOR -- this is a deliberate, flagged deviation.

   The base stylesheet says: "Headlines: League Spartan SemiBold, ALL CAPS
   ... headlines are never lowercase or italic." Every supplied v2.11.0
   mockup instead shows sentence case on the company side ("Good to see
   you, Bobi.", "Everything you need. Right here.").

   Those two instructions cannot both be followed, so the newer and more
   specific one wins for the company shell ONLY, and the rule is written
   here in one place where it can be deleted in a single edit if the brand
   guideline should prevail after all. The platform admin side is not
   touched and remains ALL CAPS.
   ------------------------------------------------------------------------ */
.portal-body h1,
.portal-body h2,
.portal-body h3,
.portal-body .page-head-text h1 {
    text-transform: none;
    letter-spacing: -.01em;
}
/* The two small eyebrows stay all-caps -- they are labels rather than
   headlines, and the mockups show them capitalised. The stat-card labels
   are NOT included: the mockup prints those in sentence case
   ("Installed apps"), which is also how they read best at 12px. */
.portal-body .phero-eyebrow,
.portal-body .pplan-label { text-transform: uppercase; }

/* ===========================================================================
   v2.12.0 -- Marketplace + My Apps
   Built to the supplied mockups, inside the v2.11.0 company shell. Reuses
   that release's vocabulary (.pbar/.pnav/.pstat) rather than inventing a
   parallel one, so the two pages inherit the shell's spacing and colour.
   Prefix: .pm- (page: marketplace)  .pa- (page: apps)
   =========================================================================== */

/* ------------------------------------------------------------ shared header */
.pg-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; margin: 0 0 18px;
}
.pg-head-text h1 { margin: 0 0 4px; font-size: 30px; line-height: 1.15; }
.pg-head-text p { margin: 0; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------- two-column layout */
.pg-cols {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px; align-items: start;
}
@media (max-width: 1100px) { .pg-cols { grid-template-columns: minmax(0, 1fr); } }

.pg-rail { display: flex; flex-direction: column; gap: 16px; }
.pg-rail-card {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 16px;
}
.pg-rail-card h4 {
    margin: 0 0 4px; font-size: 15px; text-transform: none; letter-spacing: -.01em;
}
.pg-rail-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.pg-rail-icon {
    width: 38px; height: 38px; border-radius: 10px; display: grid;
    place-items: center; margin-bottom: 10px; background: var(--brand-softer);
    color: var(--brand-dark);
}
.pg-rail-icon i { width: 19px; height: 19px; }

/* category browse list (real categories, with real counts) */
.pg-cats { list-style: none; margin: 8px 0 0; padding: 0; }
.pg-cats li + li { border-top: 1px solid var(--line); }
.pg-cats a {
    display: flex; align-items: center; gap: 10px; padding: 10px 2px;
    color: var(--ink); text-decoration: none; font-size: 14px;
}
.pg-cats a:hover { color: var(--brand-dark); }
.pg-cats .pg-cat-count {
    margin-left: auto; font-size: 12px; color: var(--muted);
    background: var(--bg); border-radius: 999px; padding: 2px 8px;
}
.pg-cats a[aria-current="true"] { color: var(--brand-dark); font-weight: 600; }

/* -------------------------------------------------------------- filter bar */
.pg-filters {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 16px;
}
.pg-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    border-radius: 999px; border: 1px solid var(--line); background: #fff;
    font-size: 13px; color: var(--ink-grey); text-decoration: none;
    white-space: nowrap;
}
.pg-chip:hover { border-color: var(--brand-2); color: var(--brand-dark); }
.pg-chip.on {
    background: var(--brand); border-color: var(--brand); color: #fff;
    font-weight: 600;
}
.pg-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pg-search {
    position: relative; display: flex; align-items: center;
}
.pg-search i {
    position: absolute; left: 11px; width: 15px; height: 15px; color: var(--muted);
    pointer-events: none;
}
.pg-search input {
    width: 210px; padding: 8px 12px 8px 32px; border: 1px solid var(--line);
    border-radius: 10px; font-size: 13px; background: #fff; color: var(--ink);
}
.pg-search input:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.pg-sort { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pg-sort select {
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
    font-size: 13px; background: #fff; color: var(--ink);
}
.pg-viewtoggle { display: flex; gap: 4px; }
.pg-viewtoggle a {
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 9px; color: var(--muted);
    background: #fff;
}
.pg-viewtoggle a.on { background: var(--brand-softer); border-color: var(--brand); color: var(--brand-dark); }
.pg-viewtoggle i { width: 16px; height: 16px; }
@media (max-width: 720px) {
    .pg-tools { margin-left: 0; width: 100%; }
    .pg-search { flex: 1; }
    .pg-search input { width: 100%; }
}

/* ------------------------------------------------------- marketplace hero */
.pm-hero {
    position: relative; overflow: hidden; border-radius: 16px;
    background: linear-gradient(105deg, #101013 0%, #1c1a19 52%, #35210f 100%);
    color: #fff; padding: 26px 28px; margin: 0 0 18px;
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.pm-hero-text { flex: 1; min-width: 260px; }
.pm-hero-eyebrow {
    display: inline-block; font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand-2); margin-bottom: 8px;
    font-weight: 700;
}
.pm-hero h2 {
    margin: 0 0 8px; font-size: 26px; line-height: 1.2; color: #fff;
    text-transform: none; letter-spacing: -.015em;
}
.pm-hero p { margin: 0 0 16px; color: #C9C6C2; font-size: 14px; max-width: 56ch; line-height: 1.55; }
.pm-hero .btn-row { gap: 10px; }
.pm-hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pm-hero-points li {
    display: flex; align-items: center; gap: 9px; font-size: 13px; color: #E8E5E2;
}
.pm-hero-points i { width: 16px; height: 16px; color: var(--brand-2); flex-shrink: 0; }

/* -------------------------------------------------------------- app tiles */
.pg-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.pg-tile {
    display: flex; flex-direction: column; gap: 10px; padding: 15px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    text-decoration: none; color: var(--ink); min-width: 0;
}
.pg-tile:hover { border-color: var(--brand-2); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.pg-tile-head { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.pg-tile-icon {
    width: 42px; height: 42px; border-radius: 11px; display: grid;
    place-items: center; color: #fff; flex-shrink: 0;
}
.pg-tile-icon i { width: 21px; height: 21px; }
.pg-tile-id { min-width: 0; flex: 1; }
.pg-tile-id h4 {
    margin: 0; font-size: 14.5px; line-height: 1.25; text-transform: none;
    letter-spacing: -.01em; overflow-wrap: anywhere;
}
.pg-tile-cat { font-size: 12px; color: var(--muted); }
.pg-tile-desc {
    margin: 0; font-size: 13px; color: var(--ink-grey); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.pg-tile-foot {
    display: flex; align-items: center; gap: 8px; margin-top: auto;
    flex-wrap: wrap;
}
.pg-price {
    font-size: 12.5px; font-weight: 600; color: var(--ink);
    background: var(--bg); border-radius: 8px; padding: 5px 9px;
}
.pg-price.free { color: var(--muted); font-weight: 500; }
.pg-tile-foot .btn { margin-left: auto; }
.pg-tag {
    font-size: 11.5px; padding: 3px 8px; border-radius: 999px;
    background: var(--bg); color: var(--muted);
}
.pg-tag.ok { background: rgba(22,163,74,.10); color: #15803D; font-weight: 600; }
.pg-tag.off { background: rgba(180,83,9,.10); color: #B45309; font-weight: 600; }
.pg-tag.locked { background: var(--bg); color: var(--muted); }

/* list view (My Apps toggle) */
.pg-grid.as-list { grid-template-columns: minmax(0, 1fr); }
.pg-grid.as-list .pg-tile { flex-direction: row; align-items: center; gap: 14px; }
.pg-grid.as-list .pg-tile-head { flex: 1; align-items: center; }
.pg-grid.as-list .pg-tile-desc { display: none; }
.pg-grid.as-list .pg-tile-foot { margin-top: 0; width: auto; }
@media (max-width: 640px) {
    .pg-grid.as-list .pg-tile { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------- My Apps: recent list */
.pa-recent { list-style: none; margin: 10px 0 0; padding: 0; }
.pa-recent li + li { border-top: 1px solid var(--line); }
.pa-recent a {
    display: flex; align-items: center; gap: 10px; padding: 9px 2px;
    text-decoration: none; color: var(--ink); font-size: 13.5px;
}
.pa-recent a:hover { color: var(--brand-dark); }
.pa-recent .pa-recent-icon {
    width: 28px; height: 28px; border-radius: 8px; display: grid;
    place-items: center; color: #fff; flex-shrink: 0;
}
.pa-recent .pa-recent-icon i { width: 14px; height: 14px; }
.pa-recent .pa-recent-when { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ----------------------------------------------------------- empty states */
.pg-empty {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 42px 24px; text-align: center;
}
.pg-empty i { width: 34px; height: 34px; color: var(--muted); opacity: .5; }
.pg-empty h3 { margin: 14px 0 6px; font-size: 17px; text-transform: none; letter-spacing: -.01em; }
.pg-empty p { margin: 0 auto 16px; color: var(--muted); font-size: 14px; max-width: 46ch; line-height: 1.55; }