:root {
    /* ONE palette for the whole product. This file used to carry a second
       :root about 5,900 lines further down (the dark "creative console" skin).
       Because it came later it won every name the two shared, so this block
       was only really supplying the names that one forgot - and one of those,
       --panel-strong, is a panel background. A panel reading --panel-strong
       therefore picked up a navy from the retired palette while everything
       around it was near-black. Both blocks are merged here, keeping the
       values that were actually on screen, and the later block is deleted. */
    --ink: #f4f2f7;
    --muted: #a8a4b1;
    --line: rgba(255, 255, 255, 0.09);
    --paper: #0d0d10;
    --panel: #1b1b1f;
    /* Was rgba(15, 24, 38, 0.94) - the navy left over from the old palette. */
    --panel-strong: #232228;
    --panel-soft: #222126;
    --brand: #d74dff;
    --brand-strong: #8d4dff;
    --magenta: #ff3fb7;
    --violet-soft: rgba(215, 77, 255, 0.12);
    --cyan: #7fdede;
    --danger: #ff6b9c;
    --success: #22c55e;
    --warning: #f59e0b;
    --text: var(--ink);
    --border: var(--line);
    --primary: var(--brand-strong);
    --accent-2: var(--magenta);
    --card-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03));
    /* Was a blue gradient from the old palette. The sidebar has painted itself
       rgba(13, 13, 16, 0.96) further down this file for a long time; the token
       now says the same thing so the two cannot drift apart again. */
    --sidebar-bg: rgba(13, 13, 16, 0.96);
    --shadow: 0 16px 50px rgba(0, 0, 0, 0.38);

    /* The one action colour. Every stop clears 4.5:1 against white label text
       and 3:1 against an ordinary button, so a primary button is readable and
       tellable-apart at the same time. */
    /* Legacy selectors resolve through the shared token owner. Keeping these
       aliases avoids a second gradient palette while old markup migrates to
       .bz-btn. */
    --brand-gradient: var(--bz-brand-gradient);
    --brand-gradient-hover: var(--bz-brand-gradient-hover);
    /* The ordinary (non-primary) button surface. */
    --button-face: #262529;
    --button-face-hover: #303036;
    --button-line: rgba(255, 255, 255, 0.28);
}

* {
    box-sizing: border-box;
}

/* Inter is shipped with the application so authentication and the first
   dashboard paint do not depend on a third-party font CDN. */
@font-face { font-family: Inter; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Inter-300.ttf') format('truetype'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-400.ttf') format('truetype'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-500.ttf') format('truetype'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter-600.ttf') format('truetype'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter-700.ttf') format('truetype'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Inter-800.ttf') format('truetype'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Inter-900.ttf') format('truetype'); }

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.cpgee-step-meta {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 10px;
}

.cpgee-step-progress {
    background: rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    height: 7px;
    margin: 0 0 18px;
    overflow: hidden;
}

.cpgee-step-progress span {
    background: linear-gradient(90deg, var(--cyan), var(--brand), var(--magenta));
    display: block;
    height: 100%;
    transition: width 0.18s ease;
    width: 0;
}

body {
    margin: 0;
    /* Declared once. The skin section further down used to repaint this, so
       the two gradients here were never seen. */
    background:
        radial-gradient(circle at 52% 7%, rgba(112, 67, 191, 0.28), transparent 30%),
        radial-gradient(circle at 62% 12%, rgba(255, 107, 80, 0.12), transparent 22%),
        var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
.primary-button,
.secondary-button {
    align-items: center;
    border: 1px solid var(--bz-border-default);
    border-radius: var(--bz-radius-sm);
    color: var(--bz-text-primary);
    cursor: pointer;
    display: inline-flex;
    gap: var(--bz-space-2);
    justify-content: center;
    /* Was 40px. A button is the thing you press. */
    min-height: var(--bz-control-height);
    padding: var(--bz-space-2) var(--bz-space-35);
}

button:hover,
.secondary-button:hover {
    border-color: rgba(184, 117, 255, 0.68);
    box-shadow: 0 10px 28px rgba(92, 44, 180, 0.16);
}

.primary-button,
.primary-small {
    /* The one place a primary button gets its colour. This gradient was
       declared here before too, but two later rules painted over it with a
       flat grey that measured 1.09:1 against an ordinary button - the primary
       action was invisible. Those are deleted; this is what ships. */
    background: var(--brand-gradient);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
}

.secondary-button.danger {
    border-color: rgba(251, 113, 133, 0.38);
    color: var(--danger);
}

.primary-small {
    border-radius: var(--bz-radius-xs);
    /* Was 34px. "Small" is about how much room the label needs, not about
       being harder to hit. */
    min-height: var(--bz-control-height);
    padding: var(--bz-space-15) var(--bz-space-3);
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 232px;
    background: var(--sidebar-bg);
    color: #f7f1ff;
    padding: var(--bz-space-55) var(--bz-space-35) var(--bz-space-45);
    display: flex;
    flex-direction: column;
    gap: var(--bz-space-5);
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.18);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--bz-space-3);
    padding:0 var(--bz-space-1) var(--bz-space-5);
    border-bottom: 1px solid rgba(188, 151, 255, 0.13);
}

.brand-logo-only {
    border-bottom: 0;
    justify-content: center;
    padding: 8px 8px 24px;
    text-align: center;
}

.brand small,
.eyebrow,
small {
    color: var(--muted);
}

.sidebar .brand small,
.sidebar nav a {
    color: #d5daea;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: transparent;
    filter: drop-shadow(0 0 13px rgba(218, 97, 255, 0.56));
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
}

.brand-wordmark {
    height: auto;
    max-height: 44px;
    max-width: 154px;
    width: auto;
}

.brand-logo-only .brand-mark {
    height: 88px;
    max-width: 148px;
    width: 148px;
}

.brand strong {
    display: block;
    font-size: var(--bz-text-card-title);
    line-height: 1;
}

.brand small {
    display: block;
    font-size: var(--bz-text-supporting);
    font-weight: 700;
    margin-top: var(--bz-space-1);
}

.sidebar nav {
    display: grid;
    gap: var(--bz-space-3);
    min-height: 0;
    overflow-y: auto;
}

.nav-group {
    display: grid;
    gap: 5px;
}

.nav-group-links {
    display: grid;
    gap: 7px;
}

.nav-group:not(.is-open) .nav-group-links {
    display: none;
}

.sidebar nav a {
    align-items: center;
    border-radius: var(--bz-radius-sm);
    display: flex;
    gap: var(--bz-space-3);
    min-height: var(--bz-control-height);
    padding: var(--bz-space-3);
    font-weight: 800;
    letter-spacing: 0;
    transition: background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.sidebar nav a.active,
.sidebar nav a:hover {
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.96), rgba(168, 85, 247, 0.86));
    color: #fff;
    box-shadow: 0 12px 26px rgba(124, 58, 237, 0.34);
}

.nav-icon {
    fill: none;
    /* The only place this size is set. It used to be declared three times -
       20px here, 17px later in this file, 22px in components.css - and only
       the last one ever showed. */
    height: 22px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 22px;
}

.command-icon {
    fill: none;
    flex: 0 0 auto;
    /* Same story: 17px here, 20px in components.css. 20px is what shipped. */
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 20px;
}

.nav-section-label {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--bz-radius-xs);
    color: #8d96af;
    cursor: pointer;
    display: flex;
    font-size: var(--bz-text-supporting);
    font-weight: 800;
    justify-content: space-between;
    letter-spacing: 0;
    margin: 0;
    min-height: 30px;
    padding: 5px 9px;
    text-align: left;
    text-transform: uppercase;
}

.nav-section-label:hover {
    background: rgba(148, 163, 184, 0.1);
    box-shadow: none;
    color: #f7f1ff;
}

.nav-section-label svg {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 160ms ease;
    width: 16px;
}

.nav-group:not(.is-open) .nav-section-label svg {
    transform: rotate(-90deg);
}

.account-avatar {
    align-items: center;
    background: linear-gradient(135deg, #7c3aed, #be185d);  /* 5.7:1 / 6.0:1 */
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    height: 38px;
    justify-content: center;
    object-fit: cover;
    overflow: hidden;
    width: 38px;
}

img.account-avatar {
    display: block;
}

.main {
    margin-left: 232px;
    padding: 28px;
}

.topbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 20px;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 0;
}

h2 {
    font-size: 22px;
    margin-bottom: 0;
}

h3 {
    font-size: 16px;
    margin-bottom: 6px;
}

.eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.section,
.project-hero {
    background: var(--card-gradient);
    border: 1px solid var(--bz-border-default);
    border-radius: var(--bz-radius-sm);
    box-shadow: var(--bz-shadow-md);
    margin-bottom: var(--bz-space-5);
    padding: var(--bz-space-5);
}

.section-heading,
.project-hero {
    display: flex;
    justify-content: space-between;
    gap: var(--bz-space-5);
}

.section-heading {
    align-items: center;
    margin-bottom: var(--bz-space-4);
}

.project-hero {
    align-items: flex-start;
}

.project-summary {
    background: rgba(15, 23, 42, 0.74);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    min-width: 280px;
    padding: 14px;
}

.project-member-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.form-label {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.project-type-control {
    display: grid;
    gap: 10px;
}

.project-type-control [hidden] {
    display: none;
}

.new-inquiry-fields {
    border-left: 2px solid rgba(139, 92, 246, 0.48);
    display: grid;
    gap: 10px;
    padding-left: 14px;
}

.new-inquiry-fields[hidden] {
    display: none;
}

.project-member-picker {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-height: 270px;
    overflow: auto;
    padding-right: 4px;
}

.project-member-search {
    align-items: center;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--muted);
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    min-height: 44px;
    padding: 0 12px;
}

.project-member-search .command-icon {
    flex: 0 0 auto;
}

.project-member-search input {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    color: var(--ink);
    min-height: 42px;
    min-width: 0;
    padding: 0;
    width: 100%;
}

.project-member-search input:focus,
.project-member-search input:focus-visible {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* The shell around the borderless input is the thing you can see, so the ring
   goes on the shell. It used to be a 1px colour change on the input's parent,
   which measured about 2:1. */
.project-member-search:focus-within {
    border-color: var(--bz-focus-ring);
    box-shadow: 0 0 0 3px var(--bz-focus-ring);
}

.project-member-search input::placeholder {
    color: rgba(226, 232, 240, 0.48);
}

.project-member-search:focus-within {
    border-color: rgba(139, 92, 246, 0.62);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.project-member-picker label {
    align-items: flex-start;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 12px;
}

.project-member-picker label:hover {
    border-color: rgba(139, 92, 246, 0.55);
}

.project-member-picker label[hidden] {
    display: none;
}

.project-member-picker input {
    margin-top: 3px;
}

.project-member-picker strong,
.project-member-picker small {
    display: block;
}

.project-member-picker small {
    color: var(--muted);
    margin-top: 2px;
}

.project-member-search-empty {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin: -2px 0 8px;
    padding: 0;
}

.project-member-selected {
    display: grid;
    gap: 8px;
    margin: 10px 0;
}

.project-member-selected[hidden] {
    display: none;
}

.project-member-selected > .form-label {
    margin: 0;
}

.project-member-selected [data-project-member-selected-list] {
    display: grid;
    gap: 8px;
}

.rental-equipment-picker {
    display: grid;
    gap: 8px;
}

.rental-user-qr-scan {
    display: grid;
    gap: 8px;
}

.rental-equipment-qr-scan {
    display: grid;
    gap: 9px;
}

.rental-equipment-qr-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.rental-equipment-qr-head .form-label {
    margin: 0;
}

.rental-equipment-qr-camera {
    margin-top: 4px;
}

.rental-user-qr-entry {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.rental-user-qr-entry input {
    text-transform: uppercase;
}

.rental-user-qr-camera {
    margin-top: 4px;
}

.rental-equipment-picker .project-member-search {
    margin-bottom: 0;
}

.rental-equipment-results {
    display: grid;
    gap: 8px;
    max-height: 360px;
    overflow: auto;
}

.rental-equipment-results button {
    align-items: flex-start;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid var(--line);
    border-radius: var(--bz-radius-sm);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    gap: var(--bz-space-3);
    justify-content: space-between;
    min-height: 92px;
    padding: var(--bz-space-3);
    text-align: left;
    width: 100%;
}

.rental-equipment-results button:hover,
.rental-equipment-results button:focus-visible {
    border-color: rgba(139, 92, 246, 0.62);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.rental-equipment-results button[hidden] {
    display: none;
}

.rental-equipment-results span,
.rental-equipment-results strong,
.rental-equipment-results small {
    display: block;
}

.rental-equipment-results span {
    min-width: 0;
}

.rental-equipment-results strong,
.rental-equipment-results small {
    overflow-wrap: anywhere;
}

.rental-equipment-results small {
    color: var(--muted);
    margin-top: 3px;
}

.rental-equipment-results em {
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(167, 139, 250, 0.32);
    border-radius: 999px;
    color: #ddd6fe;
    flex: 0 0 auto;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    padding: 5px 9px;
}

.project-member-selected [data-rental-equipment-selected-list] {
    display: grid;
    gap: 8px;
}

.rental-contract-package,
.rental-payment-collection {
    display: grid;
    gap: 12px;
}

.rental-contract-document,
.rental-payment-qr,
.rental-generated-evidence {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    padding: 14px;
}

.rental-contract-document h3,
.rental-payment-qr h3 {
    margin: 2px 0 6px;
}

.rental-contract-document p,
.rental-generated-evidence p {
    color: var(--muted);
    margin: 0;
}

.rental-contract-clauses {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
}

.rental-contract-clauses p {
    color: #dbe4f0;
}

.rental-payment-qr {
    align-items: center;
    display: flex;
    gap: 14px;
}

.rental-payment-qr img {
    background: #fff;
    border-radius: 8px;
    height: 132px;
    padding: 8px;
    width: 132px;
}

.rental-pos-total,
.rental-waiver-field {
    background: rgba(15, 23, 42, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    padding: 12px;
}

.rental-pos-total {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.rental-pos-total strong {
    color: var(--ink);
    font-size: 20px;
}

.rental-pos-total small {
    color: var(--muted);
    flex-basis: 100%;
}

.rental-waiver-field small {
    color: var(--muted);
    display: block;
    font-size: 12px;
    margin-top: 5px;
}

.rental-payment-options {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.rental-payment-options label {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 12px;
}

.rental-payment-options label:has(input:checked) {
    border-color: rgba(139, 92, 246, 0.72);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.rental-payment-options input {
    margin-top: var(--bz-space-1);
}

.rental-payment-options span {
    display: grid;
    gap: 3px;
}

.rental-payment-options b,
.rental-generated-evidence b {
    align-items: center;
    color: var(--ink);
    display: flex;
    gap: 8px;
}

.rental-payment-options small {
    color: var(--muted);
}

.rental-generated-evidence {
    display: grid;
    gap: 8px;
}

.timeline-checklist-picker {
    display: grid;
    gap: 8px;
}

.timeline-checklist-picker .project-member-search {
    margin-bottom: 0;
}

.timeline-checklist-picker [data-checklist-selected-list] {
    display: grid;
    gap: 8px;
}

.project-member-selected-row {
    align-items: center;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 12px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 42px;
    padding: 8px 10px;
}

.project-member-selected-row strong {
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-member-remove {
    border-radius: 8px;
    flex: 0 0 auto;
    font-size: 12px;
    min-height: 30px;
    padding: 5px 9px;
}

.task-member-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.metric-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 20px;
}

.metric {
    background: var(--card-gradient);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 6px;
    padding: 18px;
}

.metric span {
    color: var(--muted);
    font-weight: 700;
}

.metric strong {
    font-size: 32px;
}

.branch-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.branch-card {
    background: var(--card-gradient);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 12px;
    padding: 16px;
}

.branch-card h3 {
    margin: 0;
}

.branch-card p {
    margin: 0;
}

.branch-stats {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.branch-stats span {
    background: rgba(124, 58, 237, 0.14);
    border: 1px solid rgba(168, 85, 247, 0.16);
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 8px;
}

.branch-stats strong {
    color: #d8b4fe;
    display: block;
    font-size: 18px;
}

.table-wrap {
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid var(--line);
    border-radius: var(--bz-radius-sm);
    overflow-x: auto;
}

.table-wrap table {
    min-width: 0;
}

.table-wrap th,
.table-wrap td,
.row-link.project-name-link {
    max-width: 100%;
    /* `anywhere` broke ordinary words mid-character ("Collaborat/ing",
       "Sta/tus", "Photograp/her") because it also lets the column shrink to a
       single character when computing min-content width. `break-word` still
       rescues long unbroken strings like receipt codes, but only once they
       genuinely do not fit. */
    overflow-wrap: break-word;
}

.row-link.project-name-link {
    display: inline-block;
    max-width: min(100%, 260px);
    white-space: normal;
}

.managed-users-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.managed-users-table {
    min-width: 1560px;
    table-layout: auto;
    width: max-content;
}

.managed-users-table th,
.managed-users-table td {
    max-width: none;
    overflow-wrap: normal;
    vertical-align: top;
    word-break: normal;
}

.managed-users-table th {
    white-space: nowrap;
}

.managed-users-table th:first-child,
.managed-users-table td:first-child {
    min-width: 290px;
    width: 290px;
}

.managed-users-table th:nth-child(2),
.managed-users-table td:nth-child(2) {
    min-width: 140px;
    width: 140px;
}

.managed-users-table th:nth-child(3),
.managed-users-table td:nth-child(3) {
    min-width: 230px;
    width: 230px;
}

.managed-users-table th:nth-child(4),
.managed-users-table td:nth-child(4),
.managed-users-table th:nth-child(5),
.managed-users-table td:nth-child(5),
.managed-users-table th:nth-child(6),
.managed-users-table td:nth-child(6) {
    min-width: 150px;
    width: 150px;
}

.managed-users-table th:nth-child(7),
.managed-users-table td:nth-child(7) {
    min-width: 140px;
    width: 140px;
}

.managed-users-table th:last-child,
.managed-users-table td:last-child {
    min-width: 410px;
    width: 410px;
}

.managed-user-cell {
    min-width: 0;
}

.managed-user-cell strong,
.managed-user-cell small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.managed-user-access-form {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 12px;
    width: 100%;
}

.managed-user-access-form label:nth-of-type(3) {
    grid-column: 1 / -1;
}

.managed-user-access-form label {
    color: var(--muted);
    display: grid;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    min-width: 0;
}

.managed-user-access-form input,
.managed-user-access-form select {
    min-height: 42px;
    min-width: 0;
    width: 100%;
}

.managed-user-access-form .primary-button {
    border-radius: var(--bz-radius-md);
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 44px;
    width: 100%;
}

.managed-user-return-form {
    margin: 10px 0 0;
    width: 100%;
}

.managed-user-return-form .secondary-button {
    border-radius: var(--bz-radius-md);
    justify-content: center;
    min-height: 44px;
    width: 100%;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border-bottom: 1px solid var(--bz-border-subtle);
    padding: var(--bz-space-3) var(--bz-space-25);
    text-align: left;
    vertical-align: middle;
}

th {
    background: rgba(15, 23, 42, 0.52);
    color: var(--bz-text-tertiary);
    font-size: var(--bz-text-supporting);
    text-transform: uppercase;
}

.table-wrap tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover {
    background: rgba(168, 85, 247, 0.055);
}

@media (max-width: 900px) {
    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) {
        overflow-x: hidden;
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) table,
    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) thead,
    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) tbody,
    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) tr,
    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) th,
    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) td {
        display: block;
        width: 100%;
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) thead {
        clip: rect(0 0 0 0);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    /* Below 900px every cell becomes its own labelled line. That is right - a
       twelve-column table cannot be read sideways on a phone - but it turns a
       long list into a very long page: a 48-row client list was 16,493px of
       stacked cards. CSS cannot add a "Show more" button, so the cards are as
       short as they can be without losing anything: tighter cell padding, a
       tighter line, and empty cells removed rather than shown as a label with
       nothing after it. A six-column row went from 303px to about 200px. */
    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) tr {
        background: rgba(12, 16, 27, 0.48);
        border-bottom: 1px solid var(--line);
        padding: var(--bz-space-15) 0;
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) td {
        align-items: baseline;
        border-bottom: 0;
        display: grid;
        font-size: var(--bz-text-small);
        gap: var(--bz-space-2);
        grid-template-columns: minmax(88px, 32%) minmax(0, 1fr);
        line-height: 1.3;
        min-width: 0;
        padding: var(--bz-space-1) var(--bz-space-25);
    }

    /* A label with nothing after it is noise, and there is one on every card
       for every column the row has no value for. */
    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) td:empty {
        display: none;
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: var(--bz-text-supporting);
        font-weight: 900;
        letter-spacing: 0.04em;
        line-height: 1.3;
        text-transform: uppercase;
    }

    /* The name of the thing is the card's heading: it gets the full width and
       drops the repeated "Client"/"Project" label, which the value already
       says. This is also the row's 44px tap target, so it stays comfortable
       while everything under it gets tighter. */
    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) td:first-child {
        grid-template-columns: minmax(0, 1fr);
        padding-top: var(--bz-space-2);
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) td:first-child::before {
        content: none;
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) td small {
        font-size: var(--bz-text-supporting);
        line-height: 1.3;
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) td:not([data-label]) {
        grid-template-columns: 1fr;
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) td:not([data-label])::before {
        content: none;
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) td > * {
        min-width: 0;
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) tbody tr[data-row-hidden] {
        display: none;
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) .bz-row-cap {
        align-items: center;
        background: var(--button-face);
        border: 1px solid var(--button-line);
        border-radius: var(--bz-radius-pill);
        color: var(--bz-text-primary);
        display: flex;
        font-size: var(--bz-text-body);
        font-weight: var(--bz-weight-bold);
        gap: var(--bz-space-2);
        justify-content: center;
        margin: var(--bz-space-3) 0 0;
        min-height: var(--bz-control-height);
        width: 100%;
    }

    body:not(.login-screen) .table-wrap .inline-payment {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .media-responsive-table,
    .media-responsive-table thead,
    .media-responsive-table tbody,
    .media-responsive-table tr,
    .media-responsive-table th,
    .media-responsive-table td {
        display: block;
        width: 100%;
    }

    .media-responsive-table thead {
        clip: rect(0 0 0 0);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    /* Same card layout, same density - see the .table-wrap block above. */
    .media-responsive-table tr {
        background: rgba(12, 16, 27, 0.48);
        border-bottom: 1px solid var(--line);
        padding: var(--bz-space-15) 0;
    }

    .media-responsive-table td {
        align-items: baseline;
        border-bottom: 0;
        display: grid;
        font-size: var(--bz-text-small);
        gap: var(--bz-space-2);
        grid-template-columns: minmax(88px, 32%) minmax(0, 1fr);
        line-height: 1.3;
        min-width: 0;
        padding: var(--bz-space-1) var(--bz-space-25);
    }

    .media-responsive-table td:empty {
        display: none;
    }

    .media-responsive-table td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: var(--bz-text-supporting);
        font-weight: 900;
        letter-spacing: 0.04em;
        line-height: 1.3;
        text-transform: uppercase;
    }

    .media-responsive-table td > * {
        min-width: 0;
    }
}

.badge {
    align-items: center;
    background: var(--bz-brand-soft);
    border-radius: var(--bz-radius-pill);
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: var(--bz-brand-200);
    display: inline-flex;
    font-size: var(--bz-text-supporting);
    font-weight: var(--bz-weight-bold);
    justify-content: center;
    line-height: 1.15;
    min-height: 32px;
    padding: var(--bz-space-15) var(--bz-space-25);
    text-align: center;
}

.badge.muted {
    background: rgba(148, 163, 184, 0.12);
    color: var(--muted);
}

.progress {
    background: rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    height: 9px;
    overflow: hidden;
    width: 150px;
}

.progress.large {
    height: 18px;
    width: 100%;
}

.progress span {
    background: linear-gradient(90deg, var(--brand-strong), var(--brand), var(--magenta));
    display: block;
    height: 100%;
}

.kanban {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(210px, 1fr));
    overflow-x: auto;
}

.task-card,
.task-row,
.notification,
.setting-row {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 13px;
}

.task-card.next {
    border-color: var(--magenta);
    box-shadow: inset 3px 0 0 var(--magenta);
}

.task-meta {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.task-meta span {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
}

.task-meta .blocked {
    color: var(--danger);
}

.task-meta .ready {
    color: #c4b5fd;
}

.task-checklist {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
}

.task-checklist label {
    align-items: flex-start;
    display: flex;
    gap: 8px;
}

.task-checklist input {
    margin-top: var(--bz-space-1);
}

.task-checklist button {
    min-height: 34px;
    padding: var(--bz-space-15) var(--bz-space-25);
}

.task-completion-blocker {
    align-items: flex-start;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 10px;
    color: rgba(253, 230, 138, 0.94);
    display: flex;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
    line-height: 1.45;
    margin-top: 10px;
    padding: 9px 10px;
}

.task-completion-blocker svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

.status-form button:disabled,
.status-form select option:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.qr-action-panel {
    border-color: rgba(165, 48, 255, 0.38);
    box-shadow: inset 4px 0 0 var(--brand);
}

.task-row {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr auto auto;
}

.row-link {
    color: #c084fc;
    font-weight: 800;
}

.inline-actions,
.inline-request-actions,
.inline-payment,
.status-form,
.button-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--bz-space-2);
    min-width: 0;
}

.inline-payment {
    flex-wrap: wrap;
}

.inline-request-actions {
    align-items: stretch;
    flex-wrap: wrap;
}

.gallery-plan-commands {
    flex-wrap: wrap;
}

.section-heading .button-row {
    justify-content: flex-end;
    max-width: 100%;
}

@media (max-width: 760px) {
    .section-heading .button-row {
        justify-content: flex-start;
    }
}

/* Client provider locator: map-first, location-safe discovery adapted to
   Beetzee's own subscriber and request model. Neutral borders keep the
   directory readable without turning every result into a purple card. */
.provider-locator {
  display: grid;
  gap: 20px;
}

.provider-locator__hero,
.provider-locator__results-head,
.provider-locator__group-head {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.provider-locator__hero h2,
.provider-locator__results-head h3,
.provider-locator__group-head h3 {
  margin: 3px 0 0;
}

.provider-locator__hero > div:first-child > p:last-child,
.provider-locator__results-head > p,
.provider-locator__group-head span {
  color: var(--muted);
  margin: 6px 0 0;
  max-width: 720px;
}

.provider-locator__location {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--bz-radius-sm);
  display: grid;
  flex: 0 1 360px;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 260px;
  padding: 12px 14px;
}

.provider-locator__location.needs-location {
  border-color: rgba(245, 158, 11, 0.55);
}

.provider-locator__location svg,
.provider-card__location svg {
  height: 18px;
  width: 18px;
}

.provider-locator__location span,
.provider-card__head > span:last-child {
  display: grid;
  min-width: 0;
}

.provider-locator__location small,
.provider-card__head small,
.provider-card__head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.provider-locator__location strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-locator__location a {
  color: #d8c4ff;
  font-size: 13px;
  font-weight: 800;
}

.provider-locator__search-layout {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--bz-radius-md);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  overflow: hidden;
  padding: 14px;
}

.provider-locator__filters {
  align-content: start;
  display: grid;
  gap: 13px;
}

.provider-locator__filters label {
  display: grid;
  font-weight: 750;
  gap: 7px;
}

.provider-locator__filters label small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.provider-locator__filter-actions,
.provider-card__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.provider-locator__map {
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--bz-radius-sm);
  min-height: 330px;
  overflow: hidden;
}

.provider-locator__map iframe {
  border: 0;
  display: block;
  height: 100%;
  min-height: 330px;
  width: 100%;
}

.provider-locator__map-empty {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  justify-content: center;
  min-height: 330px;
  padding: 24px;
  text-align: center;
}

.provider-locator__map-empty svg {
  height: 28px;
  width: 28px;
}

.provider-locator__map-empty strong {
  color: var(--text);
}

.provider-locator__service-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.provider-locator__service-tabs a {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 750;
  gap: 7px;
  min-height: 40px;
  padding: 8px 13px;
}

.provider-locator__service-tabs a.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

.provider-locator__service-tabs svg {
  height: 16px;
  width: 16px;
}

.provider-locator__result-group {
  display: grid;
  gap: 12px;
}

.provider-locator__group-head {
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.provider-locator__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.provider-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--bz-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 100%;
  padding: 16px;
}

.provider-card.is-remote {
  border-style: dashed;
}

.provider-card__head {
  align-items: center;
  display: flex;
  gap: 12px;
}

.provider-card__head strong {
  font-size: 17px;
}

.provider-card__avatar {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 50px;
  height: 50px;
  justify-content: center;
  overflow: hidden;
}

.provider-card__avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.provider-card__avatar svg {
  height: 22px;
  width: 22px;
}

.provider-card > p {
  color: var(--muted);
  margin: 0;
}

.provider-card__location {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  font-size: 13px;
}

.provider-card__location strong {
  color: #d7f4e2;
  font-size: 12px;
}

.provider-card__services {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.provider-card__services span {
  align-items: center;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  padding: 6px 9px;
}

.provider-card__services svg {
  height: 14px;
  width: 14px;
}

.provider-card__actions {
  margin-top: auto;
}

.provider-locator__empty {
  align-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  border-radius: var(--bz-radius-sm);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px;
  text-align: center;
}

.provider-locator__empty strong {
  color: var(--text);
}

.provider-locator__empty p {
  margin: 0 0 5px;
  max-width: 620px;
}

.provider-locator__pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.provider-locator__pagination a {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.provider-locator__pagination a.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
}

.provider-request__selection {
  align-items: center;
  background: rgba(34, 197, 94, 0.07);
  border: 1px solid rgba(134, 239, 172, 0.42);
  border-radius: var(--bz-radius-sm);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-bottom: 14px;
  padding: 13px 15px;
}

.provider-request__selection > span svg {
  height: 22px;
  width: 22px;
}

.provider-request__selection div {
  display: grid;
}

.provider-request__selection small,
.provider-request__selection p {
  color: var(--muted);
  margin: 0;
}

.provider-request__selection a {
  color: #d8c4ff;
  font-weight: 750;
}

.request-provider-line {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  gap: 6px;
  margin: 6px 0 0;
}

.request-provider-line svg {
  height: 15px;
  width: 15px;
}

@media (max-width: 900px) {
  .provider-locator__search-layout {
    grid-template-columns: 1fr;
  }

  .provider-locator__hero,
  .provider-locator__results-head {
    align-items: stretch;
    flex-direction: column;
  }

  .provider-locator__location {
    flex-basis: auto;
    width: 100%;
  }
}

@media (max-width: 620px) {
  .provider-locator__grid {
    grid-template-columns: 1fr;
  }

  .provider-card__location,
  .provider-request__selection {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .provider-card__location strong,
  .provider-request__selection > a {
    grid-column: 2;
  }
}

.danger-button {
    background: rgba(251, 113, 133, 0.12);
    border-color: rgba(251, 113, 133, 0.42);
    color: #fecdd3;
    font-weight: 800;
}

.danger-button:hover {
    background: rgba(251, 113, 133, 0.2);
    border-color: rgba(251, 113, 133, 0.68);
}

.quotation-center-list {
    display: grid;
    gap: 16px;
}

.quotation-card {
    background: var(--card-gradient);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    padding: 16px;
}

.quotation-card-head {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.quote-total {
    display: grid;
    gap: 6px;
    min-width: 160px;
    text-align: right;
}

.quote-total strong {
    color: #d8b4fe;
    font-size: 22px;
}

.quotation-calculator {
    display: grid;
    gap: 14px;
}

.quotation-table-wrap {
    margin-top: 4px;
}

.quotation-items-table input {
    min-width: 90px;
}

.quotation-items-table td:first-child input {
    min-width: 220px;
}

.quotation-items-table tfoot td {
    font-weight: 800;
}

.quote-row-remove {
    min-height: 34px;
    padding: 7px 10px;
}

.payout-actions {
    align-items: stretch;
    flex-wrap: wrap;
}

.compact-form {
    display: inline-flex;
    margin: 0;
}

.muted-text {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.status-form {
    margin-top: 12px;
}

.form-grid {
    display: grid;
    gap: var(--bz-space-35);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.create-project-form {
    gap: 16px;
}

.form-panel {
    background: var(--bz-bg-card);
    border: 1px solid var(--bz-border-default);
    border-radius: var(--bz-radius-sm);
    display: grid;
    gap: var(--bz-space-35);
    padding: var(--bz-space-4);
}

.form-panel h3 {
    margin: var(--bz-space-05) 0 0;
}

.compact-form-grid {
    gap: 12px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
}

.form-stack {
    display: grid;
    gap: 14px;
}

.responsive-grid {
    display: grid;
    gap: 16px;
}

.responsive-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Wrapping and gap are set in components.css, which owns the chevron cordon
   and loads later. Stating them here only made the file lie. */
.bz-wizard-steps {
    display: flex;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

.bz-wizard-step {
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
}

.bz-wizard-step b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .bz-wizard-steps {
        display: grid;
        gap: 6px;
        grid-template-columns: 1fr;
    }

    .bz-wizard-step {
        flex: initial;
        max-width: 100%;
        width: 100%;
    }
}

.stacked-list {
    display: grid;
    gap: 12px;
}

.mini-record {
    align-items: start;
    background: rgba(15, 23, 42, 0.54);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 14px;
}

.mini-record small,
.mini-record p {
    display: block;
    margin: 4px 0 0;
}

.mini-record .inline-actions {
    align-items: center;
    flex-wrap: wrap;
}

.attendance-task-center {
    display: grid;
    gap: 18px;
}

.attendance-task-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.attendance-task-card {
    align-content: start;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 8px;
    min-height: 128px;
    padding: 16px;
    text-align: left;
    text-decoration: none;
}

.attendance-task-card:hover {
    border-color: rgba(168, 85, 247, 0.72);
    transform: translateY(-1px);
}

.attendance-task-card i {
    align-items: center;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(168, 85, 247, 0.24);
    border-radius: 8px;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.attendance-task-card small,
.attendance-record-row small,
.attendance-inline-search {
    color: var(--muted);
}

.attendance-search-bar {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(240px, 1fr) auto;
}

.attendance-search-bar .inline-actions {
    justify-content: flex-end;
}

.attendance-record-list {
    display: grid;
    gap: 10px;
}

.attendance-record-row {
    align-items: center;
    grid-template-columns: minmax(160px, 1.1fr) minmax(160px, 1fr) minmax(160px, 1fr) minmax(180px, 1.2fr);
}

.attendance-inline-search {
    margin-bottom: 12px;
}

.attendance-correction-queue {
    scroll-margin-top: 20px;
}

.attendance-correction-table th,
.attendance-correction-table td {
    vertical-align: middle;
}

.attendance-correction-table td small {
    color: var(--muted);
    display: block;
    line-height: 1.45;
    margin-top: 4px;
}

.attendance-correction-table .attendance-correction-reason {
    max-width: 280px;
}

.attendance-correction-review-button {
    white-space: nowrap;
}

.attendance-correction-review-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
}

.attendance-correction-review-summary > div {
    background: rgba(15, 23, 42, 0.48);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
}

.attendance-correction-review-summary small,
.attendance-correction-review-summary strong,
.attendance-correction-review-summary p {
    display: block;
}

.attendance-correction-review-summary small {
    color: var(--muted);
    margin-bottom: 6px;
}

.attendance-correction-review-summary p {
    margin: 0;
}

.attendance-correction-review-links {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 18px;
}

.staff-time-return-link {
    justify-content: flex-start;
    margin-bottom: 12px;
}

.staff-account-details {
    margin-top: 18px;
}

.staff-account-details > .bz-page-annex-body {
    padding: 0 14px 14px;
}

.staff-time-period,
.staff-attendance-calendar,
.staff-double-pay-calendar,
.staff-time-review-list {
    margin-top: 16px;
}

.staff-time-period-heading {
    align-items: flex-start;
    gap: 16px;
}

.staff-time-period-form,
.staff-double-pay-form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.staff-time-period-form label,
.staff-double-pay-form label {
    display: grid;
    gap: 6px;
    min-width: 180px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.staff-time-pay-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.staff-time-pay-summary article {
    display: grid;
    gap: 5px;
    min-height: 112px;
    padding: 15px;
    border: 1px solid rgba(226, 232, 240, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.staff-time-pay-summary span,
.staff-time-pay-summary small,
.staff-time-record-main small {
    color: var(--muted);
}

.staff-time-pay-summary strong {
    font-size: 1.42rem;
}

.staff-time-earnings-card {
    border-color: rgba(111, 231, 182, .4) !important;
    background: rgba(49, 196, 141, .07) !important;
}

.staff-attendance-months {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.staff-attendance-month {
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

.staff-attendance-month h3 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.staff-attendance-weekdays,
.staff-attendance-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.staff-attendance-weekdays {
    margin-bottom: 5px;
}

.staff-attendance-weekdays span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.staff-attendance-day {
    position: relative;
    display: grid;
    align-content: start;
    gap: 2px;
    min-height: 58px;
    padding: 7px;
    border: 1px solid rgba(226, 232, 240, .08);
    border-radius: 8px;
    color: rgba(226, 232, 240, .44);
    text-decoration: none;
}

.staff-attendance-day.has-time {
    border-color: rgba(226, 232, 240, .34);
    color: var(--text);
    background: rgba(255, 255, 255, .055);
}

.staff-attendance-day.has-time:hover,
.staff-attendance-day.has-time:focus-visible {
    border-color: rgba(226, 232, 240, .7);
    background: rgba(255, 255, 255, .09);
}

.staff-attendance-day.is-overtime {
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .34);
}

.staff-attendance-day.is-double-pay {
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .45);
}

.staff-attendance-day small {
    color: var(--muted);
    font-size: .64rem;
}

.staff-attendance-day em {
    display: inline-block;
    width: fit-content;
    color: #b9f6dd;
    font-size: .6rem;
    font-style: normal;
    font-weight: 800;
}

.staff-premium-date-list,
.staff-time-pay-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.staff-premium-date-list span,
.staff-time-pay-badges span {
    display: inline-flex;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(226, 232, 240, .2);
    border-radius: 999px;
    color: var(--muted);
    font-size: .75rem;
}

.staff-time-record-cards {
    display: grid;
    gap: 10px;
}

.staff-holiday-settings-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(226, 232, 240, .26);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
}

.staff-holiday-settings-link > span,
.staff-holiday-settings-link > span > span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.staff-holiday-settings-link > span > span {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
}

.staff-holiday-settings-link small {
    color: var(--muted);
}

.holiday-overtime-page {
    max-width: 1180px;
    margin-inline: auto;
}

.pay-premium-settings-card {
    border-color: rgba(52, 211, 153, .34);
}

.pay-premium-settings-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
    align-items: end;
    gap: 14px;
}

.pay-premium-settings-form > label {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    font-weight: 800;
}

.pay-premium-settings-form small,
.pay-premium-readonly p {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 500;
}

.percentage-input {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .25);
    border-radius: 10px;
    background: rgba(0, 0, 0, .18);
}

.percentage-input input {
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1.5rem;
    font-weight: 850;
}

.percentage-input b {
    padding: 0 14px;
    color: #c9f7e6;
    font-size: 1.25rem;
}

.pay-premium-readonly {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 220px)) 1fr;
    align-items: center;
    gap: 12px;
}

.pay-premium-readonly > span {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .2);
    border-radius: 12px;
}

.pay-premium-readonly strong {
    font-size: 1.55rem;
}

.holiday-branch-picker {
    max-width: 360px;
    margin-bottom: 14px;
}

.holiday-branch-picker label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
}

.holiday-calendar-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.holiday-calendar-toolbar h3 {
    margin: 0;
    text-align: center;
}

.holiday-settings-calendar {
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
}

.holiday-settings-day {
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 92px;
    padding: 9px;
    border: 1px solid rgba(226, 232, 240, .12);
    border-radius: 9px;
    color: var(--text);
    text-decoration: none;
}

.holiday-settings-day:hover,
.holiday-settings-day:focus-visible,
.holiday-settings-day.is-selected {
    border-color: rgba(226, 232, 240, .7);
    background: rgba(255, 255, 255, .06);
}

.holiday-settings-day.is-holiday {
    border-color: rgba(52, 211, 153, .65);
    background: rgba(52, 211, 153, .1);
}

.holiday-settings-day span {
    color: #b9f6dd;
    font-size: .69rem;
    font-weight: 800;
}

.holiday-settings-day small {
    color: var(--muted);
    font-size: .66rem;
}

.holiday-date-editor {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    scroll-margin-top: 90px;
}

.holiday-date-editor label {
    display: grid;
    gap: 6px;
    min-width: 200px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
}

.staff-time-record-card {
    scroll-margin-top: 90px;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.staff-time-record-card:target {
    border-color: rgba(226, 232, 240, .7);
    box-shadow: 0 0 0 3px rgba(226, 232, 240, .08);
}

.staff-time-record-main {
    display: grid;
    grid-template-columns: minmax(125px, 1.1fr) repeat(4, minmax(95px, 1fr)) auto;
    align-items: center;
    gap: 12px;
}

.staff-time-record-main > span {
    display: grid;
    gap: 4px;
}

.staff-time-record-date small {
    font-size: .72rem;
}

.staff-time-pay-review {
    display: grid;
    grid-template-columns: minmax(190px, .9fr) minmax(190px, .9fr) minmax(220px, 1.4fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(226, 232, 240, .12);
}

.staff-pay-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 9px 11px;
    border: 1px solid rgba(226, 232, 240, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
}

.staff-pay-check:has(input:checked) {
    border-color: rgba(52, 211, 153, .58);
    background: rgba(52, 211, 153, .07);
}

.staff-pay-check span,
.staff-pay-note {
    display: grid;
    gap: 3px;
}

.staff-pay-check small,
.staff-pay-note {
    color: var(--muted);
    font-size: .72rem;
}

.staff-pay-note input {
    min-width: 0;
}

@media (max-width: 1000px) {
    .staff-time-pay-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .staff-time-record-main,
    .staff-time-pay-review {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pay-premium-settings-form,
    .pay-premium-readonly {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .staff-time-pay-summary,
    .staff-time-record-main,
    .staff-time-pay-review {
        grid-template-columns: 1fr;
    }

    .staff-time-period-form > *,
    .staff-double-pay-form > * {
        width: 100%;
    }

    .staff-attendance-months {
        grid-template-columns: 1fr;
    }

    .staff-attendance-day {
        min-height: 48px;
        padding: 5px;
    }

    .staff-attendance-day small {
        display: none;
    }

    .staff-holiday-settings-link,
    .staff-holiday-settings-link > span {
        align-items: flex-start;
        flex-direction: column;
    }

    .pay-premium-settings-form,
    .pay-premium-readonly {
        grid-template-columns: 1fr;
    }

    .holiday-calendar-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .holiday-calendar-toolbar h3 {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .holiday-settings-day {
        min-height: 60px;
        padding: 5px;
    }

    .holiday-settings-day span,
    .holiday-settings-day small {
        display: none;
    }
}

@media (max-width: 720px) {
    .attendance-correction-review-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .responsive-grid.two {
        grid-template-columns: 1fr;
    }

    .attendance-task-grid,
    .attendance-search-bar,
    .attendance-record-row {
        grid-template-columns: 1fr;
    }
}

label {
    color: var(--muted);
    display: grid;
    font-weight: 800;
    gap: 7px;
}

input,
select,
textarea {
    /* One declaration for the form-control surface. It used to be stated here
       and repainted again by the skin further down the file. */
    background: var(--bz-bg-input);
    border: 1px solid var(--bz-border-default);
    border-radius: var(--bz-radius-sm);
    color: var(--bz-text-primary);
    /* Was 40px. */
    min-height: var(--bz-control-height);
    padding: var(--bz-space-2) var(--bz-space-3);
    width: 100%;
}

select.is-searchable-native {
    block-size: 1px !important;
    inline-size: 1px !important;
    margin: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
}

.searchable-select {
    min-width: 0;
    position: relative;
    width: 100%;
}

.searchable-select-trigger {
    align-items: center;
    appearance: none;
    background: rgba(2, 6, 23, 0.64);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-weight: 800;
    gap: 10px;
    justify-content: space-between;
    line-height: 1.2;
    min-height: 40px;
    padding: 9px 11px;
    text-align: left;
    width: 100%;
}

.searchable-select-trigger,
.searchable-select-option {
    justify-content: flex-start;
    text-align: left;
}

.searchable-select-trigger:hover,
.searchable-select.is-open .searchable-select-trigger {
    border-color: rgba(139, 92, 246, 0.62);
}

.searchable-select-trigger span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select-caret {
    color: var(--muted);
    flex: 0 0 auto;
    font-size: 12px;
}

.searchable-select-panel {
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
    display: grid;
    gap: 8px;
    left: 0;
    max-height: 340px;
    min-width: min(340px, 92vw);
    overflow: hidden;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 120;
}

.searchable-select-panel[hidden] {
    display: none;
}

.searchable-select-search {
    background: rgba(2, 6, 23, 0.84);
    min-height: 38px;
}

.searchable-select-list {
    display: grid;
    gap: 4px;
    max-height: 250px;
    overflow: auto;
}

.searchable-select-option {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-weight: 700;
    justify-content: flex-start;
    line-height: 1.25;
    min-height: 34px;
    padding: 8px 10px;
    text-align: left;
    width: 100%;
}

.searchable-select-option:hover,
.searchable-select-option[aria-selected="true"] {
    background: rgba(99, 102, 241, 0.34);
}

.searchable-select-empty,
.searchable-select-note {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    padding: 8px 10px;
}

/* Long names and emails wrap instead of forcing a horizontal scrollbar. */
.searchable-select-list {
    overflow-x: hidden;
}

.searchable-select-option {
    overflow-wrap: anywhere;
}

/* Options carrying data-option-title/-meta render on two lines: the name in
   full weight{
    align-content: center;
    display: grid;
    gap: 2px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    padding: 9px 10px;
    text-align: left;
}

/* Grid items size to max-content{
    max-width: 100%;
    min-width: 0;
}

.searchable-select-option-title {
    font-weight: 800;
    line-height: 1.25;
}

.searchable-select-option-meta {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-word;
}

.searchable-select-option:hover .searchable-select-option-meta,
.searchable-select-option[aria-selected="true"] .searchable-select-option-meta {
    color: rgba(255, 255, 255, 0.82);
}

/* The account menu sits at the top-right corner, so its searchable panel has
   to grow leftward. Anchored left it is clipped by the viewport edge. */
.account-menu-panel .searchable-select-panel {
    left: auto;
    max-width: min(520px, calc(100vw - 24px));
    min-width: min(440px, calc(100vw - 24px));
    right: 0;
}

input::placeholder,
textarea::placeholder {
    color: rgba(226, 232, 240, 0.5);
}

input[type="email"],
input[type="password"],
.password-field input {
    text-transform: none;
}

.password-field {
    display: block;
    position: relative;
}

.password-field input {
    padding-right: var(--bz-space-12);
}

.password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    display: flex;
    height: 40px;
    justify-content: center;
    min-height: 40px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
}

.password-toggle:hover,
.password-toggle.is-visible {
    color: var(--brand);
}

.password-toggle svg {
    fill: none;
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 20px;
}

textarea {
    resize: vertical;
}

.full {
    grid-column: 1 / -1;
}

.check-row {
    align-items: center;
    display: flex;
    gap: 8px;
}

.check-row input {
    min-height: auto;
    width: auto;
}

.payment-form {
    margin-top: 16px;
}

.settings-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notification-list {
    display: grid;
    gap: 10px;
    /* A grid item's min-width is `auto`, which means a long unbroken string
       (a file path, a URL) sets the column's width. On himu_file_chart that
       made a 336px list 443px wide and pushed the cards off the right edge. */
    grid-template-columns: minmax(0, 1fr);
}

.notification-list > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.notification {
    margin-bottom: 0;
}

.notification.unread {
    border-color: var(--brand);
    box-shadow: inset 3px 0 0 var(--brand);
}

.notification span {
    color: var(--magenta);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.notification-list .gallery-permission-card .primary-button {
    background: #4c2a9e;
    border: 1px solid rgba(196, 181, 253, 0.34);
}

.notification-list .gallery-permission-card .primary-button:hover {
    background: #5b34c4;
    border-color: rgba(196, 181, 253, 0.55);
}

.gallery-permission-card > span,
.gallery-permission-card > strong,
.gallery-permission-card > p {
    display: block;
    overflow-wrap: anywhere;
}

.gallery-permission-card > span {
    line-height: 1.45;
}

.gallery-permission-card > strong {
    margin-top: 6px;
}

.gallery-permission-card > p {
    margin-top: 6px;
}

.settings-hero {
    align-items: stretch;
    background:
        radial-gradient(circle at 20% 10%, rgba(141, 77, 255, 0.26), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 22px;
}

.settings-hero h2 {
    font-size: 32px;
    margin: 0 0 8px;
}

.settings-hero p {
    color: var(--muted);
    margin: 0;
}

.settings-hero-status {
    align-content: center;
    display: grid;
    gap: 10px;
    min-width: 300px;
}

.settings-hero-status span {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 9px;
    padding: 12px;
}

.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    overflow: visible;
    padding-bottom: 0;
}

.settings-tabs a {
    align-items: center;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    font-weight: 800;
    min-height: 44px;
    padding: 0 14px;
    text-decoration: none;
}

.settings-tabs a.active {
    background: linear-gradient(135deg, rgba(141, 77, 255, 0.32), rgba(255, 63, 183, 0.16));
    border-color: rgba(160, 98, 255, 0.58);
    color: #ffffff;
}

@media (max-width: 520px) {
    .settings-tabs {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    .settings-tabs a {
        flex: initial;
        justify-content: center;
        min-width: 0;
        padding: 0 10px;
        text-align: center;
        width: 100%;
    }
}

.client-gallery-open-page {
  background:
    radial-gradient(circle at 82% 12%, rgba(205, 35, 165, 0.18), transparent 34%),
    radial-gradient(circle at 12% 10%, rgba(132, 73, 255, 0.22), transparent 30%),
    #090d16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.client-gallery-open-page__topbar {
  margin-bottom: 16px;
}

.client-gallery-open-card {
  display: grid;
  gap: clamp(22px, 4vw, 48px);
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  align-items: center;
}

.client-gallery-open-card__preview {
  aspect-ratio: 16 / 10;
  background: #05070d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.client-gallery-open-card__preview img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.client-gallery-open-card__body h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 0.98;
  margin: 6px 0 14px;
}

.client-gallery-open-card__summary,
.client-gallery-open-card__notice {
  color: #bdb7ca;
  margin: 0 0 22px;
}

.client-gallery-open-card__button {
  font-size: 1rem;
  justify-content: center;
  min-height: 48px;
  width: min(100%, 260px);
}

.client-gallery-open-card__more {
  color: #9d97aa;
  font-size: 0.86rem;
  margin-top: 18px;
  width: max-content;
}

.client-gallery-open-card__more summary {
  cursor: pointer;
}

.client-gallery-open-card__more a {
  color: #d5c7ff;
  display: inline-block;
  margin-top: 9px;
}

@media (max-width: 760px) {
  .client-gallery-open-page {
    padding: 14px;
  }

  .client-gallery-open-card {
    gap: 22px;
    grid-template-columns: 1fr;
  }

  .client-gallery-open-card__body h1 {
    font-size: clamp(2rem, 12vw, 3.2rem);
  }

  .client-gallery-open-card__button {
    width: 100%;
  }
}

.settings-overview-grid,
.settings-readiness-grid,
.settings-route-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: 20px;
}

.settings-overview-card,
.settings-readiness-card,
.settings-route-grid a,
.settings-route-grid > form {
    background: var(--card-gradient);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    color: var(--text);
    display: grid;
    gap: 9px;
    padding: 16px;
    text-decoration: none;
}

.settings-overview-card span {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
    text-transform: uppercase;
}

.settings-overview-card strong {
    font-size: 24px;
}

.rental-rate-summary,
.rental-return-date-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.rental-rate-summary article {
    background: rgba(15, 23, 42, 0.46);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 14px;
}

.rental-rate-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.rental-rate-summary strong {
    color: var(--text);
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.settings-overview-card small,
.settings-readiness-card small,
.settings-route-grid small {
    color: var(--muted);
    display: block;
    line-height: 1.45;
}

.settings-admin-form {
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
    padding-bottom: 18px;
}

.settings-brand-form {
    align-items: end;
}

.settings-brand-preview {
    align-items: center;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.settings-brand-preview img {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 8px;
    height: 58px;
    object-fit: contain;
    padding: 7px;
    width: 58px;
}

.settings-empty-preview {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    display: inline-flex;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.settings-brand-preview b,
.settings-brand-preview small {
    display: block;
}

.settings-admin-form input[type="color"] {
    cursor: pointer;
    min-height: 42px;
    padding: 5px;
}

.settings-sync-status {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 12px 0;
}

.settings-sync-status span {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 10px;
}

.settings-sync-status b {
    color: var(--text);
    font-size: 18px;
}

.settings-sync-status small,
.settings-sync-blocker {
    color: var(--muted);
    line-height: 1.35;
}

.settings-readiness-card strong {
    font-size: 16px;
}

.settings-readiness-card .badge {
    justify-self: start;
}

.settings-env-row {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-top: 10px;
}

.settings-env-row span {
    display: grid;
    gap: 3px;
}

.settings-env-row b {
    color: #d8b4fe;
    font-size: 12px;
    text-transform: uppercase;
}

.alert {
    border-radius: 8px;
    margin-bottom: 14px;
    padding: 12px 14px;
}

.alert.success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #86efac;
}

.alert.danger {
    background: rgba(251, 113, 133, 0.12);
    border: 1px solid rgba(251, 113, 133, 0.28);
    color: var(--danger);
}

.alert.warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #fbbf24;
}

.media-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.media-capability-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: 14px;
}

.media-filter-form {
    margin: 16px 0;
}

.search-filter-form {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    margin: 0 0 14px;
}

.search-filter-form label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.search-filter-form label .command-icon {
    display: none;
}

@media (max-width: 640px) {
    .search-filter-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cinema-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.media-card {
    background: var(--card-gradient);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
    padding: 14px;
}

.media-card > .qr-image {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.media-card h3,
.media-card p,
.media-card small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cinema-card {
    background: linear-gradient(145deg, rgba(20, 24, 38, 0.98), rgba(6, 10, 18, 0.98));
    color: #fff;
}

.cinema-card .media-preview,
.cinema-card .drive-preview {
    height: clamp(220px, 18vw, 300px);
}

.cinema-card .eyebrow,
.cinema-card p,
.cinema-card small {
    color: rgba(255, 255, 255, 0.72);
}

.media-card h3 {
    margin: 0 0 4px;
}

.media-card-body {
    display: grid;
    gap: 8px;
}

.media-preview {
    background: #03060b;
    border-radius: 8px;
    display: block;
    height: 164px;
    object-fit: cover;
    width: 100%;
}

video.media-preview {
    object-fit: contain;
}

.media-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.media-thumb {
    align-items: center;
    background: linear-gradient(135deg, #130821, #7b23df);
    border-radius: 8px;
    color: #fff;
    display: flex;
    height: 132px;
    justify-content: center;
}

.media-thumb.video {
    background: linear-gradient(135deg, #0d1830, #a530ff);
}

.media-thumb .nav-icon {
    height: 44px;
    width: 44px;
}

.qr-image {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: block;
    height: auto;
    padding: 10px;
    width: 100%;
}

.qr-registry-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.qr-camera-panel {
    background: var(--card-gradient);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 0;
    grid-template-columns: minmax(280px, 0.92fr) minmax(280px, 1fr);
    margin-bottom: 18px;
    overflow: hidden;
}

.qr-camera-view {
    background: #070711;
    min-height: 280px;
    position: relative;
}

.qr-camera-video {
    background: #000;
    display: block;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    width: 100%;
}

.qr-camera-reticle {
    border: 2px solid rgba(164, 85, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28);
    height: min(190px, 62%);
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(190px, 62%);
}

.qr-camera-controls {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.qr-camera-controls h3 {
    margin: 4px 0 8px;
}

.qr-camera-controls p:not(.eyebrow) {
    color: var(--muted);
    margin: 0;
}

.qr-camera-manual {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.qr-card,
.my-qr-card {
    background: var(--card-gradient);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
}

.qr-card-frame,
.my-qr-frame {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px;
    place-items: center;
    position: relative;
    max-width: 100%;
    min-width: 0;
    width: min(260px, 100%);
}

.qr-card-frame .qr-image,
.my-qr-code {
    border: 0;
    border-radius: 0;
    height: auto;
    max-width: 100%;
    padding: 0;
    width: 100%;
}

.qr-card-body {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.qr-card-body h3 {
    margin: 0;
    overflow-wrap: anywhere;
}

.qr-code-pill {
    align-items: center;
    background: rgba(124, 58, 237, 0.14);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #d8b4fe;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: center;
    line-height: 1.15;
    min-height: 32px;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 7px 10px;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}

.qr-payload {
    display: block;
    overflow-wrap: anywhere;
}

.my-qr-shell {
    display: grid;
    place-items: center;
}

.my-qr-card {
    justify-items: center;
    max-width: 420px;
    text-align: center;
    width: 100%;
}

.my-qr-frame {
    width: min(300px, 82vw);
}

@media (max-width: 760px) {
    .qr-camera-panel,
    .qr-camera-manual {
        grid-template-columns: 1fr;
    }
}

.file-link {
    align-items: center;
    color: #c084fc;
    display: inline-flex;
    font-weight: 800;
    gap: 6px;
}

.upload-form {
    margin-top: 16px;
}

.upload-form input[type="file"],
.equipment-command-dashboard input[type="file"] {
    color: #aeb8cc;
}

.upload-form input[type="file"]::file-selector-button,
.equipment-command-dashboard input[type="file"]::file-selector-button {
    background: rgba(30, 41, 59, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--bz-radius-sm);
    color: #f8fafc;
    cursor: pointer;
    font-weight: 800;
    margin-right: var(--bz-space-3);
    min-height: 34px;
    padding:0 var(--bz-space-3);
}

.upload-form input[type="file"]::file-selector-button:hover,
.equipment-command-dashboard input[type="file"]::file-selector-button:hover {
    border-color: rgba(184, 117, 255, 0.68);
    box-shadow: 0 10px 28px rgba(92, 44, 180, 0.16);
}

.workspace-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-file-summary-grid {
    display: grid;
    gap: 10px;
}

.project-file-summary-card {
    align-items: center;
    background: rgba(15, 23, 42, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 72px;
    padding: 14px;
    text-decoration: none;
}

.project-file-summary-card:hover {
    border-color: rgba(196, 181, 253, 0.34);
}

.project-file-summary-card i {
    align-items: center;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(196, 181, 253, 0.22);
    border-radius: 8px;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.project-file-summary-card span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.project-file-summary-card strong,
.project-file-summary-card b {
    color: #fff;
}

.project-file-summary-card small {
    color: rgba(203, 213, 225, 0.72);
}

.project-payment-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin: 0;
}

.project-payment-summary > div {
    background: rgba(15, 23, 42, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 12px;
}

.project-payment-summary dt {
    color: rgba(226, 232, 240, 0.62);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    margin: 0;
    text-transform: uppercase;
}

.project-payment-summary dd {
    color: #fff;
    font-weight: 900;
    margin: 0;
}

.workspace-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.46);
    display: grid;
    gap: 14px;
    padding: 14px;
}

.workspace-panel-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.workspace-panel h3 {
    margin: 0;
}

.workspace-upload {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
    padding-bottom: 14px;
}

.workspace-list,
.workspace-media-strip {
    display: grid;
    gap: 10px;
}

.workspace-item {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.workspace-item > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.workspace-media-item {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.workspace-media-item img,
.workspace-media-item video {
    background: #03060b;
    border-radius: 8px;
    display: block;
    height: 118px;
    object-fit: cover;
    width: 100%;
}

.workspace-media-item video {
    object-fit: contain;
}

.timeline-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.timeline-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.46);
    display: grid;
    gap: 14px;
    padding: 14px;
}

.timeline-list {
    display: grid;
    gap: 10px;
    max-height: 460px;
    overflow: auto;
    padding-right: 4px;
}

.timeline-item {
    border-left: 3px solid var(--brand);
    display: grid;
    gap: 5px;
    padding: 2px 0 2px 12px;
}

.timeline-item.system {
    border-left-color: var(--magenta);
}

.timeline-item span {
    color: #c084fc;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.timeline-item p {
    margin: 0;
}

.project-task-timeline-section {
    overflow: hidden;
}

.timeline-summary-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.cpgee-timeline-schedule-controls {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.cpgee-timeline-schedule-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.cpgee-timeline-schedule-head .secondary-button {
    width: auto;
}

.cpgee-production-timeline {
    display: grid;
    gap: 0;
    position: relative;
}

.cpgee-production-timeline::before {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.28), rgba(168, 85, 247, 0.72), rgba(34, 197, 94, 0.3));
    bottom: 12px;
    content: "";
    left: 50%;
    position: absolute;
    top: 12px;
    transform: translateX(-50%);
    width: 2px;
}

.cpgee-production-row {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 180px) minmax(0, 1fr);
    min-height: 132px;
    position: relative;
}

.cpgee-production-side {
    align-items: center;
    display: grid;
    min-width: 0;
    padding: 10px 0;
}

.cpgee-production-side-left {
    justify-items: end;
}

.cpgee-production-side-right {
    justify-items: start;
}

.cpgee-production-center {
    align-content: center;
    display: grid;
    gap: 5px;
    justify-items: center;
    min-width: 0;
    padding: 16px 0;
    position: relative;
    text-align: center;
    z-index: 1;
}

.cpgee-production-dot {
    align-items: center;
    background: #111827;
    border: 2px solid rgba(168, 85, 247, 0.7);
    border-radius: 999px;
    box-shadow: 0 0 0 6px rgba(17, 24, 39, 0.94);
    color: #fff;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.cpgee-production-row.is-done .cpgee-production-dot {
    background: rgba(22, 101, 52, 0.92);
    border-color: rgba(74, 222, 128, 0.88);
}

.cpgee-production-center strong {
    color: #fff;
}

.cpgee-production-center small {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.cpgee-production-card {
    max-width: 440px;
    width: 100%;
}

.cpgee-production-card-head {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.cpgee-production-card-head p {
    margin: 0;
}

.cpgee-production-card > small {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    gap: 6px;
    margin-top: 6px;
}

.cpgee-production-row.is-done .cpgee-production-card {
    border-color: rgba(74, 222, 128, 0.3);
}

.cpgee-schedule-card {
    border-color: rgba(34, 211, 238, 0.22);
}

.cpgee-schedule-card .badge {
    flex: 0 0 auto;
}

.workload-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 14px;
}

.workload-lane {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 14px;
}

.workload-items {
    display: grid;
    gap: 8px;
}

.workload-item {
    background: rgba(124, 58, 237, 0.14);
    border: 1px solid rgba(165, 48, 255, 0.18);
    border-radius: 8px;
    display: grid;
    gap: 2px;
    min-height: 58px;
    padding: 9px 10px;
}

.workload-item strong,
.gantt-row strong {
    overflow-wrap: anywhere;
}

.workload-item span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.gantt-shell {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 14px;
    overflow-x: auto;
}

.gantt-header,
.gantt-row {
    display: grid;
    gap: 10px;
    grid-template-columns: 220px repeat(8, minmax(82px, 1fr));
    min-width: 920px;
}

.gantt-header {
    background: rgba(15, 23, 42, 0.58);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 10px 12px;
    text-transform: uppercase;
}

.gantt-row {
    align-items: center;
    border-top: 1px solid var(--line);
    padding: 10px 12px;
}

.gantt-row > a {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.gantt-track {
    background: rgba(148, 163, 184, 0.14);
    border-radius: 999px;
    grid-column: 2 / -1;
    height: 30px;
    position: relative;
}

.gantt-bar {
    align-items: center;
    background: linear-gradient(135deg, var(--brand-strong), var(--brand), var(--magenta));
    border-radius: 999px;
    color: #fff;
    display: flex;
    font-size: 12px;
    font-weight: 800;
    height: 100%;
    justify-content: center;
    min-width: 42px;
    padding: 0 10px;
    position: absolute;
    top: 0;
}

.login-screen {
    background: linear-gradient(135deg, #000 0%, #12061d 58%, #3c0f63 100%);
    min-height: 100vh;
}

.login-shell {
    display: grid;
    min-height: 100vh;
    padding: 24px;
    place-items: center;
}

.equipment-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.equipment-card {
    align-items: stretch;
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 0;
    grid-template-columns: 104px minmax(0, 1fr);
    min-height: 132px;
    overflow: hidden;
}

.equipment-card:hover,
.equipment-card:focus-visible {
    border-color: rgba(167, 139, 250, 0.55);
    outline: 0;
}

.equipment-card.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(116, 69, 255, 0.16);
}

.equipment-thumb {
    align-items: center;
    background: rgba(148, 163, 184, 0.12);
    display: flex;
    justify-content: center;
    min-height: 132px;
}

.equipment-thumb img,
.equipment-profile > img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.equipment-thumb .command-icon {
    color: var(--primary);
    height: 32px;
    width: 32px;
}

.equipment-card-body {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 14px;
}

.equipment-card-body h3 {
    font-size: 15px;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.equipment-card-body small {
    color: var(--muted);
}

.equipment-detail-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1.15fr);
}

.equipment-lightbox {
    align-items: center;
    background: rgba(2, 6, 23, 0.76);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 1400;
}

.equipment-lightbox[hidden] {
    display: none;
}

.equipment-lightbox-dialog {
    background: #0b1220;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.44);
    color: #f8fafc;
    max-height: min(86vh, 780px);
    max-width: 980px;
    overflow: auto;
    padding: 18px;
    width: min(100%, 980px);
}

.equipment-lightbox-head {
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

.equipment-lightbox-head h2 {
    font-size: 24px;
    margin: 2px 0 0;
}

.equipment-lightbox-close {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-size: 22px;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.equipment-lightbox-body {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.22fr);
}

.equipment-lightbox-media {
    align-items: stretch;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    color: #a78bfa;
    display: grid;
    gap: 10px;
    overflow: hidden;
    padding: 10px;
}

.equipment-lightbox-media > img {
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    height: auto;
    max-height: min(48vh, 420px);
    object-fit: cover;
    width: 100%;
}

.equipment-lightbox-media > span {
    align-items: center;
    aspect-ratio: 4 / 3;
    display: flex;
    justify-content: center;
}

.equipment-lightbox-media > span .command-icon {
    height: 48px;
    width: 48px;
}

.equipment-lightbox-thumbs {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.equipment-lightbox-thumbs a {
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 6px;
    display: block;
    overflow: hidden;
}

.equipment-lightbox-thumbs img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.equipment-lightbox-info {
    display: grid;
    gap: 12px;
}

.equipment-lightbox-details {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.equipment-lightbox-details div {
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    padding: 10px 12px;
}

.equipment-lightbox-details dt {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.equipment-lightbox-details dd {
    color: #f8fafc;
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

.equipment-lightbox-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.equipment-history-action {
    margin-right: auto;
}

.equipment-lightbox-action-right {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-left: auto;
}

.rental-entry-detail {
    margin-top: 14px;
    padding: 16px;
}

.rental-entry-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.rental-entry-grid article {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 12px;
}

.rental-entry-grid span {
    color: #a7adbd;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.rental-entry-grid strong,
.rental-entry-grid small {
    overflow-wrap: anywhere;
}

.rental-entry-wide {
    grid-column: 1 / -1;
}

.equipment-profile {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    padding: 14px;
}

.equipment-profile > img {
    aspect-ratio: 16 / 10;
    border-radius: 6px;
}

.equipment-actions-stack {
    display: grid;
    gap: 12px;
}

.compact-form {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--bz-radius-md);
    color: var(--ink);
    padding: var(--bz-space-35);
}

.detail-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.detail-list div {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 2px;
    padding-bottom: 8px;
}

.detail-list dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.detail-list dd {
    margin: 0;
}

.inline-qr {
    height: 110px;
    width: 110px;
}

.equipment-command-dashboard {
    color: #f7f8ff;
    background: transparent;
    border-radius: 0;
    margin: 0;
    min-height: 0;
    padding: 0;
}

.equipment-command-dashboard .eyebrow,
.equipment-command-dashboard small,
.equipment-command-dashboard p {
    color: #a7adbd;
}

.equipment-command-dashboard .section-heading h2,
.equipment-command-dashboard h2,
.equipment-command-dashboard h3,
.equipment-command-dashboard strong,
.equipment-command-dashboard dt,
.equipment-command-dashboard dd,
.equipment-command-dashboard label {
    color: #fff;
}

.equipment-command-dashboard input,
.equipment-command-dashboard select,
.equipment-command-dashboard textarea {
    background: rgba(5, 9, 16, 0.78);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f7f8ff;
}

.equipment-command-dashboard input::placeholder,
.equipment-command-dashboard textarea::placeholder {
    color: #73798a;
}

.ecd-hero,
.ecd-hero-actions,
.ecd-panel-head,
.ecd-overview,
.ecd-util-head,
.ecd-legend span,
.ecd-category-table div,
.ecd-maintenance a {
    align-items: center;
    display: flex;
}

.ecd-hero {
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ecd-hero h2 {
    font-size: 30px;
    margin: 0 0 5px;
}

.ecd-hero p {
    margin: 0;
}

.ecd-hero-actions {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.ecd-hero-actions a,
.ecd-hero-actions button,
.ecd-actions-grid a {
    align-items: center;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--bz-radius-sm);
    color: #f4efff;
    display: inline-flex;
    font-weight: 800;
    gap: var(--bz-space-2);
    justify-content: center;
    line-height: 1.15;
    min-height: 42px;
    padding:0 var(--bz-space-35);
    text-align: center;
}

.ecd-kpis {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 14px;
}

.ecd-kpis article,
.ecd-panel {
    background:
        radial-gradient(circle at 88% 12%, rgba(137, 80, 255, 0.18), transparent 32%),
        linear-gradient(145deg, rgba(19, 24, 37, 0.98), rgba(8, 14, 24, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.26);
    overflow: hidden;
}

.ecd-kpis article {
    min-height: 118px;
    padding: 18px;
    position: relative;
}

.ecd-kpis i {
    align-items: center;
    background: rgba(124, 58, 237, 0.24);
    border-radius: 999px;
    display: flex;
    height: 44px;
    justify-content: center;
    position: absolute;
    right: 16px;
    top: 16px;
    width: 44px;
}

.ecd-kpis .blue i { background: rgba(37, 99, 235, 0.28); color: #5fb3ff; }
.ecd-kpis .orange i { background: rgba(245, 158, 11, 0.24); color: #fbbf24; }
.ecd-kpis .red i { background: rgba(244, 63, 94, 0.23); color: #fb7185; }
.ecd-kpis .green i { background: rgba(34, 197, 94, 0.22); color: #4ade80; }

.ecd-kpis span {
    color: #dbe1f4;
    display: block;
    font-weight: 800;
    padding-right: 48px;
}

.ecd-kpis strong {
    display: block;
    font-size: clamp(1.55rem, 2vw, 2rem);
    line-height: 1.1;
    margin-top: 12px;
    white-space: nowrap;
}

.ecd-kpis small {
    display: block;
    margin-top: 8px;
}

.ecd-layout {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.3fr) minmax(290px, 0.7fr);
    margin-bottom: 14px;
}

.ecd-panel {
    padding: 18px;
}

.ecd-wide {
    grid-column: span 1;
}

.ecd-panel-head {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.ecd-panel-head h3 {
    font-size: 16px;
    margin: 0;
}

.ecd-panel-head a {
    align-items: center;
    color: #b983ff;
    display: inline-flex;
    font-weight: 800;
    min-height: 44px;
}

.equipment-settings-form {
    align-items: start;
}

.equipment-settings-checks {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.equipment-settings-checks label {
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #eef2ff;
    display: flex;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
}

.equipment-settings-checks input {
    min-height: 0;
    width: auto;
}

.ecd-overview {
    gap: 24px;
}

.ecd-donut {
    --available: 0;
    --rented: 0;
    --maintenance: 0;
    align-items: center;
    aspect-ratio: 1;
    background:
        radial-gradient(circle, #0d1320 0 46%, transparent 47%),
        conic-gradient(#38c172 0 calc(var(--available) * 1%), #2587eb 0 calc((var(--available) + var(--rented)) * 1%), #f59e0b 0 calc((var(--available) + var(--rented) + var(--maintenance)) * 1%), #ef4465 0 100%);
    border-radius: 999px;
    display: grid;
    flex: 0 0 150px;
    justify-items: center;
}

.ecd-donut.is-empty {
    background:
        radial-gradient(circle, #0d1320 0 46%, transparent 47%),
        conic-gradient(rgba(255, 255, 255, 0.12) 0 100%);
}

.ecd-donut strong {
    align-self: end;
    font-size: 26px;
}

.ecd-donut small {
    align-self: start;
}

.ecd-legend {
    display: grid;
    gap: 12px;
    min-width: 180px;
}

.ecd-legend span {
    color: #dce3f4;
    gap: 9px;
}

.ecd-legend i {
    border-radius: 999px;
    height: 9px;
    width: 9px;
}

.ecd-legend i.green { background: #38c172; }
.ecd-legend i.blue { background: #2587eb; }
.ecd-legend i.orange { background: #f59e0b; }
.ecd-legend i.red { background: #ef4465; }

.ecd-legend b {
    margin-left: auto;
}

.ecd-util {
    flex: 1;
    min-width: 220px;
}

.ecd-util-head {
    justify-content: space-between;
    margin-bottom: 12px;
}

.ecd-sparkline {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #8b5cf6;
    height: 118px;
    margin-top: 0;
}

.ecd-actions-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ecd-actions-grid a {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 76px;
    padding: 12px;
    text-align: center;
}

.ecd-list {
    display: grid;
    gap: 10px;
}

.ecd-list a,
.ecd-maintenance a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #eef2ff;
    display: grid;
    gap: 3px;
    padding: 0 0 11px;
}

.ecd-list a:last-child,
.ecd-maintenance a:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ecd-list span,
.ecd-maintenance span {
    color: #b8bfd2;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.ecd-list.compact strong {
    font-size: 14px;
}

.ecd-category-table {
    display: grid;
    gap: 12px;
}

.ecd-category-table div {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr auto auto;
}

.ecd-category-table span {
    color: #eef2ff;
    font-weight: 800;
}

.ecd-category-table small {
    text-align: right;
}

.ecd-category-table em {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
}

.ecd-category-table em i {
    background: linear-gradient(90deg, #38bdf8, #a855f7);
    display: block;
    height: 100%;
}

.ecd-maintenance {
    display: grid;
    gap: 10px;
}

.ecd-maintenance a {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(130px, 1fr) auto;
}

.ecd-maintenance b {
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.26);
    border-radius: 999px;
    color: #fbbf24;
    font-size: 12px;
    padding: 4px 9px;
    text-align: center;
}

.rental-pick-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-pick-grid a {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #eef2ff;
    display: grid;
    gap: 6px;
    min-height: 104px;
    padding: 13px;
}

.rental-pick-grid span {
    color: #b8bfd2;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.rental-pick-grid small {
    line-height: 1.35;
}

.rental-workspace-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 0.58fr);
}

.rental-asset-summary img {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    margin-bottom: 14px;
    object-fit: cover;
    width: 100%;
}

.rental-step-workspace {
    display: grid;
    gap: 16px;
}

.rental-workflow-modal .bz-wizard-dialog {
    max-width: 1040px;
}

.rental-workflow-tools {
    display: flex;
    justify-content: flex-end;
}

.rental-step-workspace .bz-wizard-steps {
    margin: 0;
}

.rental-step-workspace .compact-form {
    margin: 0;
}

.rental-step-workspace .form-panel {
    background: rgba(2, 6, 23, 0.28);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--bz-radius-sm);
}

.rental-step-workspace .form-actions {
    justify-content: flex-end;
    margin-top: 2px;
}

.rental-step-asset {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: 128px minmax(0, 1fr);
}

.rental-step-asset img {
    aspect-ratio: 4 / 3;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    object-fit: cover;
    width: 100%;
}

.rental-step-asset h3 {
    margin: 2px 0 8px;
}

.rental-step-asset .media-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rental-step-asset .qr-code-pill {
    display: inline-flex;
    max-width: 100%;
    width: auto;
}

.rental-step-asset .muted {
    margin: 10px 0 0;
}

.rental-step-add-items {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    margin-top: 16px;
    padding-top: 16px;
}

@media (max-width: 640px) {
    .rental-step-asset {
        grid-template-columns: 1fr;
    }

    .rental-step-asset img {
        max-width: 220px;
    }
}

@media (max-width: 1320px) {
    .rental-pick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.equipment-command-dashboard .ecd-form-panel,
.equipment-command-dashboard #equipment-list,
.equipment-command-dashboard #equipment-detail,
.equipment-command-dashboard #equipment-rental-log,
.equipment-command-dashboard .two-column-section {
    margin-top: 14px;
}

.equipment-command-dashboard .equipment-card,
.equipment-command-dashboard .equipment-profile,
.equipment-command-dashboard .compact-form {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.1);
}

.equipment-command-dashboard .equipment-card.is-selected {
    border-color: #b45cff;
    box-shadow: 0 0 0 2px rgba(180, 92, 255, 0.18);
}

.equipment-command-dashboard .equipment-thumb {
    background: rgba(255, 255, 255, 0.06);
}

.equipment-command-dashboard .equipment-card-body h3 a,
.equipment-command-dashboard .row-link {
    color: #fff;
}

.equipment-command-dashboard .equipment-profile p {
    margin: 0;
}

.equipment-command-dashboard .detail-list div,
.equipment-command-dashboard .table-wrap table tr,
.equipment-command-dashboard .notification {
    border-color: rgba(255, 255, 255, 0.1);
}

.equipment-command-dashboard .table-wrap {
    background: rgba(255, 255, 255, 0.035);
}

.equipment-command-dashboard table th,
.equipment-command-dashboard table td {
    color: #eef2ff;
}

.equipment-command-dashboard .notification {
    background: rgba(255, 255, 255, 0.04);
}

.equipment-command-dashboard .empty-state {
    background: rgba(255, 255, 255, 0.045);
    border: 1px dashed rgba(255, 255, 255, 0.13);
    color: #b8bfd2;
}

.equipment-qr-print-builder {
    display: grid;
    gap: 16px;
    margin-top: 14px;
}

.equipment-qr-print-builder[hidden],
.equipment-qr-print-select[hidden],
.equipment-qr-print-sheet {
    display: none;
}

.equipment-qr-print-mode,
.equipment-qr-print-actions,
.equipment-qr-print-custom {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.equipment-qr-print-mode label {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
}

.equipment-qr-print-custom[hidden] {
    display: none;
}

.equipment-qr-print-custom label {
    display: grid;
    flex: 1 1 190px;
    gap: 6px;
    min-width: 0;
}

.equipment-qr-print-custom small {
    flex: 1 1 100%;
}

.equipment-qr-print-search[hidden] {
    display: none;
}

.equipment-qr-print-search label {
    display: grid;
    gap: 6px;
}

.equipment-qr-print-select {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
}

.equipment-qr-print-empty {
    grid-column: 1 / -1;
}

.equipment-qr-print-row {
    align-items: center;
    background: rgba(2, 6, 23, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr) 76px;
    min-height: 58px;
    padding: 10px;
}

.equipment-qr-print-row span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.equipment-qr-print-row strong,
.equipment-qr-print-row small {
    overflow-wrap: anywhere;
}

.equipment-qr-print-row input[type="number"] {
    min-height: 38px;
    width: 76px;
}

.equipment-qr-print-label {
    align-items: center;
    background: #fff;
    border: 0.25mm solid #111;
    break-inside: avoid;
    color: #111;
    display: grid;
    gap: 2mm;
    justify-items: center;
    overflow: hidden;
    padding: 3mm;
    page-break-inside: avoid;
    text-align: center;
}

.equipment-qr-print-label img {
    height: 30mm;
    image-rendering: pixelated;
    object-fit: contain;
    width: 30mm;
}

.equipment-qr-print-label strong,
.equipment-qr-print-label span {
    color: #111;
    line-height: 1.15;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.equipment-qr-print-label strong {
    font-size: 8pt;
}

.equipment-qr-print-label span {
    font-size: 7pt;
}

@media print {
    @page {
        margin: 10mm;
        size: A4;
    }

    body.equipment-qr-printing * {
        visibility: hidden !important;
    }

    body.equipment-qr-printing .equipment-qr-print-sheet,
    body.equipment-qr-printing .equipment-qr-print-sheet * {
        visibility: visible !important;
    }

    body.equipment-qr-printing .equipment-qr-print-sheet {
        display: grid !important;
        gap: 0;
        left: 0;
        margin: 0 auto;
        position: absolute;
        top: 0;
    }

    body.equipment-qr-printing .equipment-qr-print-sheet[data-qr-print-layout="a4"] {
        grid-auto-rows: calc(277mm / 5);
        grid-template-columns: repeat(4, 1fr);
        width: 190mm;
    }

    body.equipment-qr-printing .equipment-qr-print-sheet[data-qr-print-layout="custom"] {
        grid-auto-rows: var(--qr-print-label-height);
        grid-template-columns: repeat(var(--qr-print-columns), var(--qr-print-label-width));
        min-height: var(--qr-print-paper-height);
        width: var(--qr-print-paper-width);
    }

    body.equipment-qr-printing .equipment-qr-print-label {
        border-radius: 0;
        box-sizing: border-box;
        box-shadow: none;
    }

    body.equipment-qr-printing .equipment-qr-print-sheet[data-qr-print-layout="custom"] .equipment-qr-print-label {
        min-height: var(--qr-print-label-height);
        padding: 0.03in;
        width: var(--qr-print-label-width);
    }

    body.equipment-qr-printing .equipment-qr-print-sheet[data-qr-print-layout="custom"] .equipment-qr-print-label img {
        height: calc(var(--qr-print-label-width) - 0.06in);
        width: calc(var(--qr-print-label-width) - 0.06in);
    }

    body.equipment-qr-printing .equipment-qr-print-sheet[data-qr-print-layout="custom"] .equipment-qr-print-label strong {
        font-size: max(5pt, min(8pt, calc(var(--qr-print-label-width) * 0.07)));
    }

    body.equipment-qr-printing .equipment-qr-print-sheet[data-qr-print-layout="custom"] .equipment-qr-print-label span {
        font-size: max(4.5pt, min(7pt, calc(var(--qr-print-label-width) * 0.06)));
    }
}

.calendar-command-dashboard {
    --cal-accent: #8b95a7;
    --cal-accent-rgb: 139, 149, 167;
    background:
        radial-gradient(circle at 17% 0%, rgba(117, 49, 255, 0.18), transparent 34%),
        radial-gradient(circle at 78% 16%, rgba(52, 139, 255, 0.07), transparent 30%),
        linear-gradient(180deg, #080910 0%, #0b0e17 100%);
    border-radius: 0;
    color: #f7f4ff;
    margin: -42px -46px -64px;
    min-height: 100vh;
    overflow: hidden;
    padding: 26px;
}

.calendar-command-dashboard p,
.calendar-command-dashboard small,
.calendar-command-dashboard .eyebrow {
    color: #a7adbd;
}

.calendar-command-dashboard h2,
.calendar-command-dashboard h3,
.calendar-command-dashboard strong,
.calendar-command-dashboard label {
    color: #fff;
}

.cal-source-note {
    align-items: center;
    background: rgba(var(--cal-accent-rgb), 0.1);
    border: 1px solid rgba(var(--cal-accent-rgb), 0.2);
    border-radius: 8px;
    color: #d8dce5 !important;
    display: inline-flex;
    font-weight: 800;
    margin-top: 10px;
    min-height: 32px;
    padding: 0 12px;
}

.cal-hero,
.cal-toolbar,
.cal-search,
.cal-panel-head,
.cal-legend,
.cal-filter-list label,
.cal-upcoming-list a,
.cal-event-chip,
.cal-segments {
    align-items: center;
    display: flex;
}

.cal-hero {
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 26px;
}

.cal-hero h2 {
    font-size: 30px;
    margin: 0 0 4px;
}

.cal-hero p {
    margin: 0;
}

.cal-search {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    gap: 10px;
    min-width: 360px;
    padding: 0 12px;
}

.cal-search input {
    background: transparent;
    border: 0;
    color: #fff;
    min-height: 44px;
    outline: 0;
    width: 100%;
}

.cal-search button,
.cal-search-clear {
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: var(--bz-radius-xs);
    color: #bec5d8;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--bz-text-supporting);
    font-weight: 800;
    justify-content: center;
    min-height: 44px;
    padding:0 var(--bz-space-35);
    text-decoration: none;
}

.cal-toolbar {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.cal-toolbar a,
.cal-toolbar button,
.cal-date-jump,
.cal-segments a {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--bz-radius-sm);
    color: #eef2ff;
    font-weight: 800;
    min-height: 40px;
    padding: 0 13px;
}

.cal-date-jump {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    padding: 0 8px 0 12px;
}

.cal-date-jump label {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.cal-date-jump input {
    border: 0;
    color-scheme: dark;
    min-height: 34px;
    padding:0 var(--bz-space-1);
    width: 138px;
}

.cal-date-jump button {
    background: transparent;
    border: 0;
    min-height: 44px;
    min-width: 44px;
    padding:0 var(--bz-space-15);
}

.cal-toolbar a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cal-segments {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.cal-segments a {
    background: transparent;
    border: 0;
    border-radius: 0;
}

.cal-segments .is-active {
    background: rgba(var(--cal-accent-rgb), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--cal-accent-rgb), 0.35);
}

.cal-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 300px;
}

.cal-week-shell,
.cal-panel {
    background: linear-gradient(180deg, #1b1c24, #151821);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.cal-week-shell {
    padding: 16px;
}

.cal-week-grid {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(98px, 1fr));
    overflow-x: auto;
}

.cal-time-head,
.cal-day-head,
.cal-time-label,
.cal-all-day-cell,
.cal-time-col,
.cal-day-col {
    border-color: rgba(255, 255, 255, 0.08);
}

.cal-day-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #eef2ff;
    display: grid;
    gap: 4px;
    min-height: 48px;
    place-items: center;
}

.cal-day-head strong {
    align-items: center;
    border-radius: 999px;
    display: flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.cal-day-head.is-today strong {
    background: rgba(var(--cal-accent-rgb), 0.22);
    box-shadow: inset 0 0 0 1px rgba(var(--cal-accent-rgb), 0.45);
}

.cal-time-label {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #c5cada;
    font-size: 12px;
    padding-top: 12px;
}

.cal-all-day-cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 5px;
    min-height: 50px;
    padding: 8px 6px;
}

.cal-time-col {
    display: grid;
    grid-template-rows: repeat(16, 58px);
}

.cal-time-col span {
    color: #c5cada;
    font-size: 12px;
    padding-top: 6px;
}

.cal-day-col {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-rows: repeat(16, 58px);
    min-height: 928px;
    min-width: 98px;
    position: relative;
}

.cal-hour-line {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cal-event-chip,
.cal-event-block {
    border-radius: 6px;
    color: #f7f8fb;
    gap: 5px;
    overflow: hidden;
}

.cal-event-chip {
    font-size: 12px;
    min-height: 28px;
    padding: 0 8px;
}

.cal-event-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-event-block {
    align-content: start;
    border: 1px solid var(--cal-event-border, rgba(255, 255, 255, 0.14));
    border-left: 3px solid var(--cal-event-color, rgba(var(--cal-accent-rgb), 0.75));
    box-shadow: 0 11px 24px rgba(0, 0, 0, 0.34);
    display: grid;
    gap: 2px;
    left: 6px;
    padding: 8px;
    position: absolute;
    right: 6px;
    width: auto;
    z-index: 2;
}

.cal-event-block span,
.cal-event-block small {
    color: rgba(247, 248, 251, 0.76);
    line-height: 1.12;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-event-block strong {
    font-size: 13px;
    line-height: 1.18;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-event-block.is-compact {
    gap: 1px;
    padding: 6px 8px;
}

.cal-event-block.is-compact small {
    display: none;
}

.cal-event-block.is-compact strong {
    font-size: 12px;
}

.cal-event-block.is-stacked {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 6px;
    row-gap: 0;
}

.cal-event-block.is-stacked span {
    font-size: 12px;
}

.cal-event-block.is-stacked strong {
    font-size: 12px;
}

.cal-event-chip,
.cal-event-block {
    background: var(--cal-event-bg, #272b34);
}

.cal-project { --cal-event-color: #879dbb; --cal-event-bg: #252b36; --cal-event-border: #3b4658; }
.cal-shoot { --cal-event-color: #91b3a8; --cal-event-bg: #24302d; --cal-event-border: #3a5048; }
.cal-booking { --cal-event-color: #a498bc; --cal-event-bg: #2c2936; --cal-event-border: #494256; }
.cal-studio { --cal-event-color: #ba91a5; --cal-event-bg: #302731; --cal-event-border: #4d3d4a; }
.cal-equipment { --cal-event-color: #b4a06f; --cal-event-bg: #302d24; --cal-event-border: #4d4632; }
.cal-task { --cal-event-color: #b79683; --cal-event-bg: #302a27; --cal-event-border: #4d4039; }
.cal-attendance { --cal-event-color: #8398bd; --cal-event-bg: #252a35; --cal-event-border: #3b4558; }
.cal-leave { --cal-event-color: #d9a0c4; --cal-event-bg: #382936; --cal-event-border: #65445e; }
.cal-meeting { --cal-event-color: #8ba890; --cal-event-bg: #263027; --cal-event-border: #3c4d3f; }
.cal-personal { --cal-event-color: #86a7a2; --cal-event-bg: #24302f; --cal-event-border: #394d4a; }
.cal-deadline { --cal-event-color: #a895bd; --cal-event-bg: #2c2936; --cal-event-border: #494156; }
.cal-holiday { --cal-event-color: #bb9090; --cal-event-bg: #312929; --cal-event-border: #503e3e; }

.cal-legend {
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
}

.cal-legend span {
    color: #dce3f4;
    font-size: 13px;
}

.cal-dot {
    background: var(--cal-event-color, rgba(var(--cal-accent-rgb), 0.75));
    border-radius: 999px;
    display: inline-flex;
    height: 10px;
    margin-right: 7px;
    width: 10px;
}

.cal-sidebar {
    display: grid;
    gap: 14px;
}

.cal-panel {
    padding: 16px;
}

.cal-panel-head {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cal-panel-head h3 {
    font-size: 16px;
    margin: 0;
}

.cal-panel-head a {
    align-items: center;
    color: #d8dce5;
    display: inline-flex;
    font-weight: 800;
    min-height: 44px;
}

.cal-mini-month {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.cal-mini-month b,
.cal-mini-month a {
    border-radius: 999px;
    color: #dfe6f7;
    font-size: 12px;
    /* Was 28px. A day cell is a button; at 390px the grid gives each column
       about 50px, so 44 fits without changing the layout. */
    min-height: 44px;
    padding-top: 6px;
}

.cal-mini-month a {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}

.cal-day-leave-count {
    color: #d9a0c4;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.cal-mini-month b {
    color: #8f97ab;
}

.cal-mini-month a.muted {
    /* Was #626a7d - 3.1:1 on the calendar panel. */
    color: #858ea1;
}

.cal-mini-month a.is-today,
.cal-mini-month a.is-selected {
    background: rgba(var(--cal-accent-rgb), 0.22);
    box-shadow: inset 0 0 0 1px rgba(var(--cal-accent-rgb), 0.42);
    color: #fff;
}

.cal-month-view {
    min-width: 0;
}

.cal-month-grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
}

.cal-month-weekday {
    background: rgba(16, 21, 33, 0.94);
    color: #9ca6ba;
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 10px;
    text-transform: uppercase;
}

.cal-month-cell {
    background: rgba(16, 20, 31, 0.92);
    display: grid;
    gap: 8px;
    min-height: 132px;
    min-width: 0;
    padding: 10px;
}

.cal-month-cell.is-muted {
    background: rgba(12, 15, 23, 0.76);
}

.cal-month-cell.is-today {
    box-shadow: inset 0 0 0 1px rgba(var(--cal-accent-rgb), 0.68);
}

.cal-month-date {
    align-items: center;
    border-radius: 999px;
    color: #e8edf8;
    display: inline-flex;
    font-weight: 850;
    height: 28px;
    justify-content: center;
    text-decoration: none;
    width: 28px;
}

.cal-month-cell.is-selected .cal-month-date,
.cal-month-cell.is-today .cal-month-date {
    background: rgba(var(--cal-accent-rgb), 0.24);
    color: #fff;
}

.cal-month-events {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.cal-month-events .cal-event-chip {
    min-width: 0;
    overflow: hidden;
    padding: 5px 7px;
}

.cal-month-events .cal-event-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-month-more {
    color: #c7d2fe;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.cal-filter-list {
    display: grid;
    gap: 10px;
}

.cal-selected-event {
    margin: 0 0 18px;
}

.cal-selected-event-warning {
    border-color: rgba(255, 176, 32, 0.28);
}

.cal-event-detail-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 14px;
}

.cal-event-detail-grid div,
.cal-event-detail-notes {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    padding: 12px;
}

.cal-event-detail-grid span,
.cal-event-detail-notes span {
    color: #a9a5b5;
    display: block;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.cal-event-detail-grid strong,
.cal-event-detail-grid a {
    color: #ffffff;
    font-size: 14px;
}

.cal-event-detail-grid a {
    text-decoration: none;
}

.cal-event-detail-notes {
    margin-top: 10px;
}

.cal-event-detail-notes p {
    color: #f8f7fb;
    line-height: 1.55;
    margin: 0;
}

.cal-filter-list label {
    display: grid;
    column-gap: 9px;
    row-gap: 3px;
    grid-template-columns: 18px 10px minmax(0, 1fr);
}

.cal-filter-list input {
    accent-color: var(--cal-accent);
}

.cal-filter-list b {
    color: #eef2ff;
    min-width: 0;
}

.cal-filter-list small {
    grid-column: 3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-sync-status p,
.cal-sync-status small {
    color: #aab4c8;
}

.cal-sync-link {
    align-items: center;
    border: 1px solid rgba(var(--cal-accent-rgb), 0.3);
    border-radius: 8px;
    color: #e7eaf0;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 11px;
}

.cal-upcoming-list {
    display: grid;
    gap: 10px;
}

.cal-upcoming-list a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #eef2ff;
    gap: 12px;
    padding-bottom: 10px;
}

.cal-upcoming-list a:last-child {
    border-bottom: 0;
}

.cal-upcoming-list time {
    background: linear-gradient(180deg, rgba(var(--cal-accent-rgb), 0.82), #f0f2f6);
    border-radius: 7px;
    color: #0d1320;
    display: grid;
    flex: 0 0 46px;
    font-size: 12px;
    font-weight: 800;
    height: 52px;
    place-items: center;
    text-transform: uppercase;
}

.cal-upcoming-list time strong {
    color: #0d1320;
    font-size: 18px;
    line-height: 1;
}

.cal-upcoming-list span {
    display: grid;
    gap: 3px;
}

.cal-event-modal {
    align-items: center;
    background: rgba(4, 5, 9, 0.78);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 1200;
}

.cal-event-modal:target {
    display: flex;
}

.cal-event-dialog {
    background: #1b1c24;
    max-height: calc(100vh - 48px);
    max-width: 900px;
    overflow: auto;
    width: min(900px, calc(100vw - 32px));
}

.cal-modal-head {
    align-items: start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.cal-modal-head h2 {
    margin: 0;
}

.cal-modal-close {
    flex: 0 0 auto;
}

.calendar-command-dashboard input,
.calendar-command-dashboard select,
.calendar-command-dashboard textarea {
    background: rgba(5, 9, 16, 0.78);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f7f8ff;
}

.calendar-command-dashboard input::placeholder,
.calendar-command-dashboard textarea::placeholder {
    color: #73798a;
}

.client-rental-page {
    color: #f8fbff;
}

.client-rental-page p,
.client-rental-page small,
.client-rental-page dd,
.client-rental-page dt {
    color: #b8c1d4;
}

.crp-catalog-head h2 {
    margin-bottom: 6px;
}

.crp-catalog-head p:last-child {
    margin: 0;
}

.crp-pickup-banner {
    align-items: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(217, 70, 239, 0.09));
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 12px;
    display: flex;
    gap: 13px;
    margin-bottom: 18px;
    padding: 14px 16px;
}

.crp-pickup-banner > span,
.crp-summary-pickup > svg {
    color: #d8b4fe;
    flex: 0 0 auto;
}

.crp-pickup-banner div,
.crp-summary-pickup span {
    display: grid;
    gap: 2px;
}

.crp-pickup-banner strong,
.crp-summary-pickup strong {
    color: #fff;
}

.crp-pickup-banner > a {
    color: #e9d5ff;
    font-size: 13px;
    font-weight: 800;
    margin-left: auto;
    white-space: nowrap;
}

.crp-catalog-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crp-catalog-card {
    background: linear-gradient(145deg, rgba(17, 25, 40, 0.98), rgba(5, 12, 22, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    display: grid;
    min-width: 0;
    overflow: hidden;
}

.crp-catalog-image {
    background: #f8fafc;
    display: block;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.crp-catalog-image img {
    height: 100%;
    object-fit: contain;
    padding: 12px;
    transition: transform 180ms ease;
    width: 100%;
}

.crp-catalog-card:hover .crp-catalog-image img {
    transform: scale(1.025);
}

.crp-catalog-image span {
    background: rgba(22, 101, 52, 0.92);
    border-radius: 999px;
    color: #dcfce7;
    font-size: 12px;
    font-weight: 800;
    left: 12px;
    padding: 6px 9px;
    position: absolute;
    top: 12px;
}

.crp-catalog-card-body {
    display: grid;
    gap: 7px;
    padding: 16px;
}

.crp-catalog-card-body > small {
    color: #c084fc;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.crp-catalog-card-body h3,
.crp-catalog-card-body p {
    margin: 0;
}

.crp-catalog-card-body h3 {
    color: #fff;
    font-size: 18px;
}

.crp-catalog-card-foot {
    align-items: end;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 7px;
    padding-top: 14px;
}

.crp-catalog-card-foot > strong {
    color: #fff;
    display: grid;
    font-size: 15px;
}

.crp-catalog-card-foot > strong small {
    font-weight: 500;
}

.crp-catalog-card-foot .primary-button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 13px;
}

.crp-topline,
.crp-simple-head,
.crp-product-row,
.crp-rating,
.crp-thumbs,
.crp-icons,
.crp-feature-grid span,
.crp-includes span,
.crp-guarantees span,
.crp-help a,
.crp-rental-row,
.crp-more a {
    align-items: center;
    display: flex;
}

.crp-topline,
.crp-simple-head {
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.crp-breadcrumb {
    align-items: center;
    color: #cfd7e8;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
}

.crp-breadcrumb a {
    color: #c5cbe0;
}

.crp-breadcrumb strong {
    color: #fff;
}

.crp-icons {
    gap: 12px;
}

.crp-icons span {
    align-items: center;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    position: relative;
    width: 42px;
}

.crp-icons b {
    background: #7c3aed;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 4px 6px;
    position: absolute;
    right: -4px;
    top: -5px;
}

.crp-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 340px;
}

.crp-main {
    align-content: start;
    display: grid;
    gap: 16px;
    grid-auto-rows: max-content;
}

.crp-product-row {
    align-items: flex-start;
    gap: 16px;
}

.crp-panel {
    background:
        radial-gradient(circle at 80% 10%, rgba(124, 58, 237, 0.16), transparent 30%),
        linear-gradient(145deg, rgba(17, 25, 40, 0.98), rgba(5, 12, 22, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    padding: 18px;
}

.crp-gallery {
    align-content: start;
    display: grid;
    flex: 0 0 44%;
    gap: 14px;
    grid-template-rows: 280px auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.crp-favorite-form {
    display: contents;
}

.crp-favorite {
    background: rgba(20, 19, 29, 0.82);
    border-color: rgba(168, 85, 247, 0.45);
    border-radius: 999px;
    min-height: 42px;
    padding: 0;
    position: absolute;
    right: 18px;
    top: 18px;
    width: 42px;
    z-index: 2;
}

.crp-main-image {
    align-self: center;
    border-radius: 8px;
    display: block;
    height: 280px;
    justify-self: center;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.crp-thumbs {
    gap: 8px;
}

.crp-thumbs button {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--bz-radius-sm);
    height: 66px;
    min-height: 66px;
    overflow: hidden;
    padding: 0;
    width: 72px;
}

.crp-thumbs button.is-active {
    border-color: #9b5cff;
    box-shadow: 0 0 0 1px rgba(197, 139, 255, 0.45);
}

.crp-thumbs img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.crp-details {
    align-self: flex-start;
    flex: 1;
}

.crp-details h2 {
    color: #fff;
    font-size: 32px;
    margin: 10px 0 4px;
}

.crp-details h2 span {
    border-radius: 7px;
    font-size: 12px;
    margin-left: 8px;
    padding: 7px 9px;
    vertical-align: middle;
}

.crp-details h2 .available {
    background: rgba(34, 197, 94, 0.18);
    color: #55e88e;
}

.crp-details h2 .booked {
    background: rgba(245, 158, 11, 0.18);
    color: #facc15;
}

.crp-rating {
    color: #cfd7e8;
    gap: 14px;
    margin: 14px 0;
}

.crp-rating b {
    color: #fbbf24;
}

.crp-feature-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crp-feature-grid span {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    flex-direction: column;
    min-height: 74px;
    padding: 10px;
}

.crp-feature-grid b,
.crp-includes b,
.crp-guarantees b,
.crp-help b,
.crp-rental-row strong {
    color: #fff;
}

.crp-about {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    margin-top: 16px;
    padding-top: 14px;
}

.crp-about h3,
.crp-about p {
    margin-top: 0;
}

.crp-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.crp-details.is-expanded .crp-description {
    display: block;
    -webkit-line-clamp: unset;
}

.crp-link {
    background: transparent;
    border: 0;
    color: #b983ff;
    min-height: auto;
    padding: 0;
}

.crp-includes {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 14px;
}

.crp-includes span,
.crp-guarantees span {
    align-items: center;
    flex-direction: column;
    gap: 5px;
    text-align: center;
}

.crp-specs {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin: 14px 0 0;
}

.crp-specs div {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px 14px;
}

.crp-spec-panel h3 {
    margin: 0;
}

.crp-specs dt {
    color: #8f9ab0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crp-specs dd {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.crp-specs dd,
.crp-specs dt {
    margin: 0;
}

.crp-reviews {
    display: grid;
    gap: 18px;
    grid-template-columns: 180px 1fr 1fr;
}

.crp-reviews h3 {
    grid-column: 1 / -1;
}

.crp-reviews > div:first-of-type strong {
    color: #fff;
    display: block;
    font-size: 56px;
    line-height: 1;
}

.crp-reviews > div:first-of-type span,
.crp-reviews article span {
    color: #fbbf24;
}

.crp-lines {
    display: grid;
    gap: 8px;
}

.crp-lines p {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 38px 1fr 26px;
    margin: 0;
}

.crp-lines i {
    display: block;
    height: 20px;
    overflow: visible;
    position: relative;
}

.crp-lines em {
    display: block;
    height: 100%;
    position: relative;
}

.crp-lines i::before,
.crp-lines em::before,
.crp-lines em::after {
    content: "";
    position: absolute;
}

.crp-lines i::before {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    height: 2px;
    left: 0;
    right: 0;
    top: 50%;
}

.crp-lines em::before {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.2), #8b5cf6);
    height: 2px;
    left: 0;
    right: 0;
    top: 50%;
}

.crp-lines em::after {
    background: #8b5cf6;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16);
    height: 8px;
    right: -4px;
    top: calc(50% - 3px);
    width: 8px;
}

.crp-guarantees {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 16px;
}

.crp-side {
    display: grid;
    gap: 16px;
    align-content: start;
    min-width: 0;
}

.crp-side .crp-panel {
    max-width: 100%;
    min-width: 0;
}

.crp-summary {
    position: sticky;
    top: 18px;
}

.crp-summary h3 {
    font-size: 20px;
    margin-top: 0;
}

.crp-summary > .eyebrow {
    margin-bottom: 5px;
}

.crp-summary-pickup,
.crp-help-row {
    align-items: flex-start;
    display: flex;
    gap: 11px;
}

.crp-summary-pickup {
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.24);
    border-radius: 9px;
    margin-bottom: 14px;
    padding: 11px 12px;
}

.crp-summary form {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.crp-summary label {
    color: #dce5f6;
    display: grid;
    gap: 8px;
    font-weight: 800;
    min-width: 0;
}

.crp-summary label span {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto 1fr;
    min-width: 0;
}

.crp-summary input,
.crp-summary select {
    background: rgba(5, 9, 16, 0.78);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    min-width: 0;
    width: 100%;
}

.crp-mini-calendar {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 0;
    text-align: center;
}

.crp-mini-calendar b {
    color: #fff;
    grid-column: 1 / -1;
    margin-bottom: 5px;
}

.crp-mini-calendar em,
.crp-mini-calendar span {
    color: #c8d0e2;
    font-size: 12px;
    min-height: 26px;
}

.crp-mini-calendar .is-range {
    background: linear-gradient(135deg, #7c3aed, #d946ef);
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    padding-top: 4px;
}

.crp-mini-calendar .is-outside {
    color: #657087;
    opacity: 0.55;
}

.crp-mini-calendar .is-outside.is-range {
    color: #fff;
    opacity: 0.8;
}

.crp-availability-status {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    display: flex;
    font-size: 0.78rem;
    font-weight: 750;
    gap: 8px;
    margin: 0;
    min-height: 38px;
    padding: 8px 10px;
}

.crp-availability-status::before {
    border-radius: 999px;
    content: '';
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}

.crp-availability-status.is-available {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(52, 211, 153, 0.22);
    color: #a7f3d0;
}

.crp-availability-status.is-available::before {
    background: #34d399;
}

.crp-availability-status.is-unavailable {
    background: rgba(244, 63, 94, 0.1);
    border-color: rgba(251, 113, 133, 0.22);
    color: #fecdd3;
}

.crp-availability-status.is-unavailable::before {
    background: #fb7185;
}

.crp-availability-status.is-checking {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(129, 140, 248, 0.22);
    color: #c7d2fe;
}

.crp-availability-status.is-checking::before {
    animation: crp-availability-pulse 0.9s ease-in-out infinite alternate;
    background: #a78bfa;
}

@keyframes crp-availability-pulse {
    to { opacity: 0.3; transform: scale(0.7); }
}

.crp-price-lines {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    display: grid;
    gap: 11px;
    margin-top: 4px;
    padding-top: 12px;
}

.crp-price-lines p,
.crp-price-lines strong {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.crp-price-lines small {
    display: block;
    font-size: 12px;
}

.crp-price-lines strong {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: #d946ef;
    font-size: 20px;
    padding-top: 12px;
}

.crp-summary button {
    width: 100%;
}

.crp-preview-button {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #f8fafc;
}

.crp-price-pending {
    background: rgba(245, 158, 11, 0.09);
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 9px;
    display: grid;
    gap: 4px;
    padding: 12px;
}

.crp-price-pending strong {
    color: #fde68a;
}

.crp-request-button {
    font-weight: 900;
    min-height: 48px;
}

.crp-request-note {
    line-height: 1.45;
    text-align: center;
}

.crp-summary button[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
}

.crp-help {
    display: grid;
    gap: 12px;
}

.crp-help a {
    align-items: flex-start;
    gap: 12px;
}

.crp-help-row div {
    display: grid;
    gap: 3px;
}

.crp-help em {
    color: #b983ff;
    display: block;
    font-style: normal;
    margin-top: 4px;
}

.crp-more {
    display: grid;
    gap: 10px;
}

.crp-more a,
.crp-rental-row {
    gap: 12px;
}

.crp-more img,
.crp-rental-row img {
    border-radius: 8px;
    height: 58px;
    object-fit: cover;
    width: 70px;
}

.client-rental-list {
    display: grid;
    gap: 10px;
}

.crp-rental-row {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px;
}

.crp-rental-row span {
    display: grid;
    flex: 1;
}

.crp-rental-row em {
    color: #cbd5e1;
    font-style: normal;
}

.two-column-section {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.two-column-section > *,
.bz-inline-wizard {
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 760px) {
    .equipment-command-dashboard {
        padding: 16px;
    }

    .ecd-hero,
    .ecd-overview {
        align-items: stretch;
        flex-direction: column;
    }

    .ecd-hero-actions {
        justify-content: flex-start;
    }

    .ecd-kpis,
    .ecd-layout,
    .rental-pick-grid,
    .rental-workspace-grid,
    .ecd-maintenance a {
        grid-template-columns: 1fr;
    }

    .ecd-donut {
        max-width: 180px;
    }

    .sidebar {
        position: static;
        width: auto;
    }

    .main {
        margin-left: 0;
        padding: 18px;
    }

    .topbar,
    .section-heading,
    .project-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .metric-grid,
    .form-grid,
    .settings-grid,
    .timeline-grid {
        grid-template-columns: 1fr;
    }

    .cpgee-production-timeline::before {
        left: 20px;
    }

    .cpgee-production-row {
        gap: 10px;
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 0;
    }

    .cpgee-production-center {
        grid-column: 1;
        grid-row: 1;
        padding: 14px 0;
    }

    .cpgee-production-center strong,
    .cpgee-production-center small {
        display: none;
    }

    .cpgee-production-side-left,
    .cpgee-production-side-right {
        grid-column: 2;
        justify-items: stretch;
        padding: 8px 0;
    }

    .cpgee-production-side-right {
        grid-row: 1;
    }

    .cpgee-production-card {
        max-width: none;
    }

    .task-row {
        grid-template-columns: 1fr;
    }

    .project-summary {
        min-width: 0;
    }

    .quotation-card-head {
        flex-direction: column;
    }

    .quote-total {
        text-align: left;
    }

    .equipment-card,
    .equipment-detail-grid,
    .two-column-section {
        grid-template-columns: 1fr;
    }

    .calendar-command-dashboard {
        margin: 0;
        padding: 16px;
    }

    .cal-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .cal-search {
        min-width: 0;
        width: 100%;
    }

    .cal-layout {
        grid-template-columns: 1fr;
    }

    .cal-week-shell {
        overflow-x: auto;
    }

    .cal-week-grid {
        min-width: 820px;
        overflow: visible;
    }

    .cal-filter-list label {
        grid-template-columns: auto 10px minmax(0, 76px) minmax(0, 1fr);
    }

    .crp-grid,
    .crp-product-row,
    .crp-specs,
    .crp-reviews,
    .crp-catalog-grid {
        grid-template-columns: 1fr;
    }

    .crp-product-row,
    .crp-topline,
    .crp-simple-head {
        align-items: stretch;
        flex-direction: column;
    }

    .crp-pickup-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .crp-pickup-banner > a {
        margin-left: 35px;
    }

    .crp-gallery {
        flex-basis: auto;
        grid-template-rows: 220px auto;
        min-height: 0;
    }

    .crp-main-image {
        height: 220px;
    }

    .crp-feature-grid,
    .crp-includes,
    .crp-guarantees {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crp-summary {
        position: static;
    }

    .crp-rental-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Dark creative-console skin. The palette this section used to redefine now
   lives in the single :root at the top of this file. */

body::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 28%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

.sidebar {
    border-right: 1px solid var(--bz-border-default);
    box-shadow: 18px 0 45px rgba(0, 0, 0, 0.24);
    gap: var(--bz-space-55);
    padding: 26px 12px 18px;
    width: 224px;
}

.brand {
    border-bottom: 0;
    gap: var(--bz-space-25);
    padding:0 var(--bz-space-2) var(--bz-space-35);
}

.brand-logo-only {
    justify-content: center;
    padding: 8px 8px 24px;
    text-align: center;
}

.brand-mark {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    filter: drop-shadow(0 0 14px rgba(215, 77, 255, 0.28));
    height: 34px;
    width: 34px;
}

.brand-logo-only .brand-mark {
    height: 88px;
    max-width: 148px;
    width: 148px;
}

.brand-wordmark {
    box-shadow: none;
    filter: none;
    height: auto;
    max-height: 88px;
    max-width: 148px;
    width: auto;
}

.brand strong {
    font-size: var(--bz-text-figure);
    font-weight: 800;
    letter-spacing: 0;
}

.brand small {
    color: #a6a2ac;
    font-size: var(--bz-text-supporting);
    font-weight: 700;
}

.sidebar nav {
    gap: 3px;
    overflow-y: auto;
    padding-right: var(--bz-space-05);
}

.nav-section-label {
    /* Was #77737f at 10px - 4.23:1 against the sidebar, and a 30px tall target.
       These are the only signposts in a 13-section menu, so they need to be
       legible and comfortably clickable. */
    color: #9490a1;
    font-size: var(--bz-text-supporting);
    margin: 13px 10px 5px;
    /* Was 36px. */
    min-height: 44px;
}

.sidebar nav a {
    border-radius: var(--bz-radius-pill);
    color: #bdb9c6;
    font-size: var(--bz-text-body);
    font-weight: 800;
    gap: var(--bz-space-25);
    min-height: 38px;
    padding: var(--bz-space-2) var(--bz-space-3);
}

.sidebar nav a.active,
.sidebar nav a:hover {
    background: #333136;
    box-shadow: none;
    color: #ffffff;
}

.account-avatar {
    /* Was #5b54ff -> #c53eff; the pink end measured 3.8:1 against the white
       initials sitting on it. */
    background: linear-gradient(135deg, #4f46e5, #9333ea);  /* 6.3:1 / 5.4:1 */
}

.client-app-sidebar {
    background:
        radial-gradient(circle at 74% 10%, rgba(123, 57, 255, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(5, 10, 17, 0.99), rgba(2, 7, 12, 0.99));
    border-right: 1px solid rgba(99, 102, 241, 0.18);
    box-shadow: 18px 0 44px rgba(0, 0, 0, 0.42);
    gap: 18px;
    padding: 26px 12px 18px;
    width: 220px;
}

.client-app-sidebar .brand-logo-only {
    justify-content: flex-start;
    padding: 0 10px 8px;
}

.client-app-sidebar .brand-logo-only .brand-mark {
    height: 66px;
    max-width: 185px;
    width: 185px;
}

.sidebar-beetz-chip {
    align-items: center;
    align-self: flex-start;
    background: rgba(17, 20, 31, 0.84);
    border: 1px solid rgba(124, 58, 237, 0.34);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 850;
    gap: 8px;
    margin: -2px 10px 8px;
    min-height: 38px;
    padding: 0 13px;
    text-decoration: none;
    white-space: nowrap;
}

.sidebar-beetz-chip:hover {
    background: rgba(39, 32, 64, 0.92);
    border-color: rgba(168, 85, 247, 0.5);
}

.sidebar-beetz-chip .command-icon {
    color: #a855f7;
    height: 17px;
    width: 17px;
}

.client-app-sidebar nav {
    flex: 1 1 auto;
    gap: 0;
    min-height: 0;
    padding: 0 0 8px;
}

.client-app-sidebar .nav-group {
    gap: 6px;
    padding: 0 2px 14px;
}

.client-app-sidebar .nav-group + .nav-group {
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    padding-top: 17px;
}

.client-app-sidebar .client-nav-section-label {
    /* Was #8d8a99 - 4.36:1 against the sidebar. */
    color: #a09dab;
    cursor: default;
    display: block;
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.035em;
    line-height: 1;
    margin: 0 8px 6px;
    min-height: 0;
    padding: 0;
    pointer-events: none;
    text-transform: uppercase;
}

.client-app-sidebar .nav-group.is-collapsible .client-nav-section-label {
    align-items: center;
    cursor: pointer;
    display: flex;
    margin-bottom: 8px;
    /* Was 28px. These open and close whole sections of the menu. */
    min-height: 44px;
    padding: 0 8px;
    pointer-events: auto;
}

.client-app-sidebar .nav-group.is-collapsible .client-nav-section-label svg {
    display: block;
}

.client-app-sidebar .nav-group-links {
    gap: 4px;
}

.client-app-sidebar nav a {
    border-radius: 7px;
    color: #eceaf3;
    font-size: 0.88rem;
    font-weight: 720;
    gap: 11px;
    min-height: 37px;
    padding: 8px 10px;
}

.client-app-sidebar nav a.active,
.client-app-sidebar nav a:hover {
    background: linear-gradient(135deg, rgba(92, 45, 171, 0.70), rgba(65, 31, 126, 0.72));
    box-shadow: inset 0 0 0 1px rgba(182, 128, 255, 0.12);
    color: #ffffff;
}

.client-app-sidebar .nav-icon {
    height: 18px;
    opacity: 0.95;
    stroke-width: 2.1;
    width: 18px;
}

.client-upgrade-card {
    align-items: center;
    background: rgba(20, 16, 36, 0.82);
    border: 1px solid rgba(137, 115, 255, 0.13);
    border-radius: 9px;
    color: #ffffff;
    display: grid;
    flex: 0 0 auto;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-bottom: 58px;
    padding: 8px;
}

.client-upgrade-card > span {
    align-items: center;
    background: linear-gradient(135deg, #5f34d0, #b05cff);
    border-radius: 7px;
    color: #ffd166;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.client-upgrade-card .nav-icon {
    height: 17px;
    width: 17px;
}

.client-upgrade-card strong {
    font-size: 0.76rem;
    line-height: 1.25;
    min-width: 0;
}

.client-upgrade-card small {
    display: none;
}

.client-upgrade-card a {
    align-items: center;
    background: rgba(124, 58, 237, 0.24);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 7px;
    color: #e9d5ff;
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 850;
    justify-content: center;
    min-height: 30px;
    padding: 0 8px;
    text-decoration: none;
}

.main {
    margin-left: 224px;
    min-height: 100vh;
    padding: 42px 46px 64px;
}

/* The mobile menu toggle is styled once, in components.css - this file used to
   carry a near-identical copy that only differed in its text colour. */
.bz-mobile-menu-toggle .bz-menu-word {
    display: none;
    font-size: 14px;
    font-weight: 850;
}
.bz-mobile-menu-toggle::before {
    background:
        linear-gradient(currentColor 0 0) left top / 18px 2px no-repeat,
        linear-gradient(currentColor 0 0) left center / 18px 2px no-repeat,
        linear-gradient(currentColor 0 0) left bottom / 18px 2px no-repeat;
    content: "";
    display: block;
    height: 14px;
    width: 18px;
}
.bz-mobile-menu-toggle > span:not(.sr-only):not(.bz-menu-word) {
    display: none;
}

@media (max-width: 760px) {
    .bz-mobile-menu-toggle {
        display: inline-flex;
        flex-direction: row;
        left: 14px;
        position: fixed;
        top: 14px;
        width: auto;
        z-index: 150;
    }
    .bz-mobile-menu-toggle .bz-menu-word { display: inline; }
    .main { padding-top: 88px; }
}

.topbar {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 28px;
    min-width: 0;
}

.topbar h1 {
    color: #ffffff;
    font-size: 34px;
    font-weight: 800;
}

.topbar > div:first-child {
    min-width: 0;
}

.topbar-actions {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    min-width: 0;
}

.global-search {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    display: flex;
    flex: 1 1 260px;
    gap: 7px;
    height: 38px;
    max-width: 420px;
    min-width: 260px;
    padding: 0 12px;
    position: relative;
    z-index: 20;
}

.global-search .command-icon {
    color: #a9a5af;
    height: 15px;
    width: 15px;
}

.global-search input {
    background: transparent;
    border: 0;
    color: #ffffff;
    min-width: 0;
    /* Was min-height: 0, which left a 23px tall search field on every page.
       The box around it is 40px; the input now fills it. */
    min-height: 40px;
    padding: 0;
    width: 100%;
}

.global-search input::placeholder {
    color: #88848d;
}

.global-search-results {
    background: #171923;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
    left: 0;
    max-height: min(460px, 70vh);
    min-width: 280px;
    overflow-y: auto;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
}

.global-search-results a {
    align-items: center;
    border-radius: 8px;
    color: #f8f7fb;
    display: flex;
    gap: 10px;
    min-height: 48px;
    padding: 8px 10px;
    text-decoration: none;
}

.global-search-results [hidden] {
    display: none !important;
}

.global-search-results a:hover,
.global-search-results a:focus-visible {
    background: rgba(139, 92, 246, 0.28);
    /* `outline: none` used to be here. The wash on its own measured 1.26:1
       against the neighbouring row - not something you can see. */
    outline: 3px solid var(--bz-focus-ring);
    outline-offset: -3px;
}

.global-search-results a .command-icon {
    color: #b79cff;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.global-search-results a span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.global-search-results a strong {
    font-size: 13px;
    font-weight: 700;
}

.global-search-results a small {
    color: #a9a5b5;
    font-size: 12px;
}

.global-search-hint,
.global-search-empty {
    color: #aaa6b5;
    font-size: 12px;
    line-height: 1.4;
    margin: 6px 8px 8px;
}

.topbar-account-menu {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    min-width: 0;
    position: relative;
    z-index: 40;
}

.account-menu-details {
    flex: 0 1 auto;
    min-width: 0;
    position: relative;
}

.topbar-notification-link {
    align-items: center;
    background: rgba(17, 20, 31, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    position: relative;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    width: 42px;
}

.topbar-notification-link:hover,
.topbar-notification-link:focus-visible {
    background: rgba(39, 32, 64, 0.92);
    border-color: rgba(168, 85, 247, 0.42);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

.topbar-notification-link .command-icon {
    height: 18px;
    width: 18px;
}

.topbar-notification-link .nav-notification-count {
    margin-left: 0;
    min-height: 18px;
    min-width: 18px;
    padding: 3px 5px;
    position: absolute;
    right: -4px;
    top: -5px;
}

.account-menu-trigger {
    align-items: center;
    background: rgba(17, 20, 31, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    gap: 10px;
    min-height: 46px;
    min-width: 0;
    max-width: min(390px, calc(100vw - 32px));
    padding: 4px 10px 4px 5px;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.account-menu-trigger::-webkit-details-marker {
    display: none;
}

.account-menu-trigger::marker {
    content: "";
}

.account-menu-trigger:hover,
.account-menu-details[open] .account-menu-trigger {
    background: rgba(39, 32, 64, 0.92);
    border-color: rgba(168, 85, 247, 0.42);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
}

.account-menu-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.account-menu-copy strong,
.account-menu-copy small {
    max-width: 37ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-copy strong {
    font-size: 13px;
    font-weight: 850;
}

.account-menu-copy small {
    color: #aaa6b5;
    font-size: 12px;
    font-weight: 700;
}

.account-menu-caret {
    color: #b8b2c7;
    font-size: 14px;
    line-height: 1;
    margin-left: auto;
    transition: transform 160ms ease;
}

.account-menu-details[open] .account-menu-caret {
    transform: rotate(180deg);
}

.account-menu-panel {
    background: rgba(15, 18, 29, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    display: grid;
    gap: 6px;
    max-width: calc(100vw - 32px);
    min-width: min(340px, calc(100vw - 32px));
    padding: 10px;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
}

.account-menu-user {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
    min-width: 0;
    padding: 6px 6px 12px;
}

.account-menu-user > span:not(.account-menu-photo) {
    flex: 1 1 auto;
    max-width: 37ch;
}

.account-menu-photo {
    align-items: center;
    /* Same 3.8:1 problem as .account-avatar. */
    background: linear-gradient(135deg, #4f46e5, #9333ea);  /* 6.3:1 / 5.4:1 */
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    flex: 0 0 42px;
    font-size: 12px;
    font-weight: 850;
    height: 42px;
    justify-content: center;
    max-width: 42px;
    min-width: 42px;
    object-fit: cover;
    overflow: hidden;
    aspect-ratio: 1;
    width: 42px;
}

img.account-menu-photo {
    display: block;
}

.account-menu-user span,
.account-menu-panel a span,
.account-menu-panel button span {
    min-width: 0;
}

.account-menu-user strong,
.account-menu-user small {
    display: block;
    max-width: 37ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-user small {
    color: #aaa6b5;
    font-size: 12px;
}

.account-view-form {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.22);
    border-radius: 12px;
    display: grid;
    gap: 8px;
    margin: 2px 0 4px;
    padding: 10px;
}

.account-view-form label {
    display: grid;
    gap: 6px;
}

.account-view-form label > span,
.account-view-form > small {
    color: #bbb5c9;
    font-size: 12px;
    font-weight: 800;
}

.account-view-form select {
    background: rgba(3, 7, 18, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--bz-radius-sm);
    color: #fff;
    font: inherit;
    font-weight: 800;
    min-height: 38px;
    padding:0 var(--bz-space-25);
    width: 100%;
}

.account-view-form .account-owner-view-button {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(91, 33, 182, 0.95));
    border-color: rgba(196, 181, 253, 0.38);
    justify-content: center;
}

.account-view-form .account-owner-view-button:hover,
.account-view-form .account-owner-view-button:focus-visible {
    background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(109, 40, 217, 1));
    border-color: rgba(216, 180, 254, 0.55);
}

.account-menu-panel a,
.account-menu-panel button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #f8f7fb;
    display: flex;
    font: inherit;
    font-size: var(--bz-text-body);
    font-weight: 800;
    gap: var(--bz-space-25);
    justify-content: flex-start;
    min-height: 42px;
    padding:0 var(--bz-space-25);
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.account-menu-panel a:hover,
.account-menu-panel button:hover,
.account-menu-panel a:focus-visible,
.account-menu-panel button:focus-visible {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(168, 85, 247, 0.28);
    outline: none;
}

.account-menu-panel form {
    display: block;
    margin: 0;
}

.account-menu-panel .account-view-form {
    display: grid;
    margin: 2px 0 4px;
}

.account-menu-panel button {
    cursor: pointer;
    text-align: left;
}

.account-menu-panel .command-icon {
    color: #b79cff;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

@media (min-width: 1181px) {
    .topbar-account-floating ~ .equipment-command-dashboard .ecd-hero {
        padding-right: 245px;
    }
}

@media (max-width: 1180px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .global-search {
        max-width: none;
        min-width: min(100%, 260px);
    }
}
.section,
.project-hero,
.metric,
.branch-card,
.task-card,
.task-row,
.notification,
.setting-row,
.quotation-card,
.form-panel,
.media-card,
.qr-card,
.my-qr-card,
.workspace-panel,
.timeline-panel,
.workload-lane,
.gantt-shell,
.equipment-card,
.equipment-detail-card {
    background: rgba(31, 31, 35, 0.94);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: var(--shadow);
}

.section,
.project-hero,
.metric,
.branch-card,
.quotation-card,
.media-card,
.qr-card,
.my-qr-card {
    border-radius: 14px;
}

.section {
    backdrop-filter: blur(16px);
    margin-bottom: var(--bz-space-55);
    padding: var(--bz-space-55);
}

.section-heading {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: var(--bz-space-35);
}

h1,
h2,
h3,
.metric strong,
.branch-card h3,
.task-card strong {
    color: #ffffff;
}

.eyebrow,
small,
.metric span,
.branch-stats span,
label,
th,
.task-meta span,
.muted-text {
    color: var(--muted);
}

.metric strong {
    font-size: 34px;
    line-height: 1;
}

.badge,
.qr-code-pill,
.branch-stats span,
.workload-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f0e9ff;
}

.badge.muted {
    background: rgba(255, 255, 255, 0.06);
    color: #a9a5af;
}

button,
.primary-button,
.secondary-button,
.primary-small {
    border-radius: var(--bz-radius-pill);
    color: #ffffff;
    box-shadow: none;
}

/* Ordinary buttons only. This used to include .primary-button and
   .primary-small, which is how the brand gradient got painted over: a flat
   grey declared here beat the gradient declared earlier in the file. The
   border is here too so the primary keeps the edgeless look its gradient
   already gives it (3.95:1 against the page on its own). */
button,
.secondary-button {
    background: var(--button-face);
    border-color: var(--button-line);
}

button:hover,
.secondary-button:hover {
    background: var(--button-face-hover);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: none;
}

.primary-button:hover,
.primary-small:hover {
    background: var(--brand-gradient-hover);
    border-color: transparent;
    box-shadow: none;
}

input::placeholder,
textarea::placeholder {
    color: #77727d;
}

table {
    color: #dedbe5;
}

th,
td {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

tr:hover td {
    background: rgba(255, 255, 255, 0.025);
}

.row-link,
.file-link,
.task-meta .ready,
.quote-total strong,
.branch-stats strong {
    color: #d879ff;
}

.progress,
.gantt-track {
    background: rgba(255, 255, 255, 0.1);
}

.progress span,
.gantt-bar {
    /* Was #8d4dff -> #d74dff -> #ff3fb7. These bars carry a white percentage
       label; the two lighter stops measured 3.2:1 under it. */
    background: linear-gradient(90deg, #7a53ed, #a53fd6, #d6157f);
}

.board-shell {
    color: #f8fafc;
    display: grid;
    gap: 18px;
    min-width: 0;
}

.board-command-header,
.board-toolbar{
    align-items: center;
    display: flex;
    gap: 12px;
}

.board-command-header {
    justify-content: space-between;
}

.board-command-kicker {
    color: rgba(226, 232, 240, 0.74);
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.board-command-header h2 {
    font-size: 28px;
    margin: 0 0 4px;
}

.board-command-header p,
.board-card-body small,
.board-card-body > span,
.board-search label,
.board-toolbar label {
    align-items: center;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    display: flex;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
}

.board-search input,
.board-toolbar select,
.board-move-form select {
    background: transparent;
    border: 0;
    color: #f8fafc;
    font: inherit;
    outline: 0;
}

.board-search input {
    min-width: min(360px, 32vw);
}

.board-toolbar {
    flex-wrap: wrap;
}

.board-toolbar-spacer {
    flex: 1 1 auto;
}

.board-view-toggle {
    align-items: center;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    display: inline-flex;
    min-height: 42px;
    overflow: hidden;
}

.board-view-toggle a {
    align-items: center;
    color: #cbd5e1;
    display: inline-flex;
    justify-content: center;
    min-height: 42px;
    text-decoration: none;
    width: 42px;
}

.board-view-toggle a:hover,
.board-view-toggle a:focus {
    background: rgba(139, 92, 246, 0.18);
    color: #ffffff;
    outline: none;
}

.board-view-toggle a.active {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #ffffff;
}

.board-pipeline-section {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.board-pipeline-section + .board-pipeline-section {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    padding-top: 18px;
}

.board-intake-form {
    align-items: start;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.15), rgba(88, 28, 135, 0.12)), rgba(8, 14, 26, 0.88);
    border: 1px solid rgba(45, 212, 191, 0.24);
    border-radius: 16px;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.6fr);
    margin: 18px 0;
    padding: 18px;
}

.board-intake-form h2 {
    color: #fff;
    margin: 4px 0 8px;
}

.board-intake-form .button-row {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(118px, 1fr));
    gap: var(--bz-space-25);
}

.board-intake-form .button-row button {
    justify-content: center;
    min-height: 52px;
    min-width: 0;
    white-space: nowrap;
}

.board-pipeline-heading {
    align-items: center;
    background: rgba(15, 23, 42, 0.52);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 10px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(150px, max-content) minmax(0, 1fr);
    padding: 12px 14px;
}

.board-pipeline-heading span {
    color: rgba(196, 181, 253, 0.86);
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.board-pipeline-heading h2 {
    color: #ffffff;
    font-size: 20px;
    margin: 2px 0 0;
}

.board-pipeline-heading p {
    color: rgba(226, 232, 240, 0.72);
    grid-column: 1 / -1;
    margin: 0;
    min-width: 0;
    overflow-wrap: normal;
}

.board-pipeline-heading b {
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 999px;
    color: #ddd6fe;
    font-size: 12px;
    justify-self: end;
    max-width: 100%;
    padding: 6px 10px;
    text-align: right;
    white-space: normal;
}

.board-kanban {
    display: grid;
    gap: 10px;
    grid-auto-columns: minmax(232px, 1fr);
    grid-auto-flow: column;
    min-height: 620px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
}

.board-column {
    background: linear-gradient(180deg, rgba(20, 29, 43, 0.96), rgba(10, 16, 27, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    min-height: 600px;
    overflow: hidden;
    scroll-snap-align: start;
}

.board-column::before {
    content: "";
    display: block;
    height: 4px;
}

.board-column.tone-blue::before{
    background: #1f8bff;
}

.board-column.tone-orange::before{
    background: #f97316;
}

.board-column.tone-yellow::before{
    background: #eab308;
}

.board-column.tone-green::before{
    background: #22c55e;
}

.board-column.tone-purple::before{
    background: #8b5cf6;
}

.board-column.tone-indigo::before{
    background: #6366f1;
}

.board-column.is-drop-target {
    border-color: rgba(168, 85, 247, 0.62);
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.32);
}

.board-column.is-drop-blocked {
    border-color: rgba(245, 158, 11, 0.72);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.34);
}

.board-column-head {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    padding: 14px 14px 10px;
}

.board-column-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.board-column-head h3 {
    color: #fff;
    font-size: 14px;
    margin: 0;
}

.board-column-head small,
.board-column-total {
    display: block;
}

.board-column-total {
    color: #f8f6ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.board-column-head small {
    color: rgba(218, 222, 237, 0.58);
    font-size: 12px;
}

.board-column-head span {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    min-width: 28px;
    padding: 3px 8px;
    text-align: center;
}

.board-card-stack {
    display: grid;
    gap: 10px;
    padding: 0 10px 14px;
}

.board-card {
    background: rgba(24, 32, 46, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 10px;
    transition: border-color 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

.board-card:hover,
.board-card:focus {
    border-color: rgba(168, 85, 247, 0.55);
    outline: none;
    transform: translateY(-1px);
}

.board-card.is-dragging {
    opacity: 0.62;
}

.board-lead-card {
    grid-template-columns: minmax(0, 1fr);
}

.board-lead-card .board-card-title {
    white-space: normal;
}

.board-card-thumb {
    aspect-ratio: 1;
    border-radius: 7px;
    height: 64px;
    object-fit: cover;
    width: 64px;
}

.board-card-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.board-card-title {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    /* Was a 19px line of text and the only way into the card. */
    min-height: 44px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-card-body small,
.board-card-body > span {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-card-meta,
.board-card-foot,
.board-avatar-row {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.board-card-meta {
    flex-wrap: wrap;
}

.board-commercial-money {
    background: rgba(6, 10, 18, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 4px 0;
    overflow: hidden;
}

.board-commercial-money div {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
    padding: 8px 9px;
}

.board-commercial-money div + div {
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.board-commercial-money dt {
    color: rgba(218, 222, 237, 0.54);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.board-commercial-money dd {
    color: #f8f6ff;
    font-size: 12px;
    font-weight: 900;
    margin: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-commercial-money-large {
    background: rgba(15, 23, 42, 0.72);
    margin: 10px 0 0;
}

.board-commercial-money-large div {
    padding: 13px 14px;
}

.board-commercial-money-large dt {
    font-size: 12px;
}

.board-commercial-money-large dd {
    font-size: 18px;
}

body.board-lightbox-open {
    overflow: hidden;
}

.board-card-lightbox {
    align-items: center;
    background: rgba(2, 6, 23, 0.72);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 90;
}

.board-card-lightbox[hidden] {
    display: none;
}

.board-card-dialog {
    background: #111827;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    color: #e5e7eb;
    max-height: min(760px, calc(100vh - 48px));
    max-width: 760px;
    overflow: auto;
    padding: 18px;
    width: min(760px, calc(100vw - 32px));
}

.board-card-dialog-head {
    align-items: start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.board-card-dialog-head h2 {
    color: #fff;
    font-size: 22px;
    letter-spacing: 0;
    line-height: 1.15;
    margin: 2px 0 0;
}

.board-dialog-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
}

.board-dialog-panel {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    padding: 14px;
}

.board-dialog-panel h3 {
    color: #fff;
    font-size: 13px;
    letter-spacing: 0;
    margin: 0 0 10px;
}

.board-dialog-panel p {
    color: rgba(226, 232, 240, 0.78);
    margin: 6px 0 0;
}

.board-dialog-panel-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.board-dialog-panel-head h3 {
    margin-bottom: 4px;
}

.board-commercial-schedule-panel {
    margin-top: 12px;
}

.board-remove-panel {
    margin-top: 12px;
}

.board-remove-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 0.8fr) minmax(220px, 1fr);
    margin-top: 12px;
}

.board-remove-actions form,
.board-delete-form {
    min-width: 0;
}

.board-delete-form {
    display: grid;
    gap: 8px;
}

.board-delete-form label,
.board-delete-popover label {
    color: rgba(218, 222, 237, 0.68);
    display: grid;
    font-size: 12px;
    font-weight: 900;
    gap: 5px;
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.board-delete-form input,
.board-delete-popover input {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 7px;
    color: #f8fafc;
    min-height: 34px;
    padding: 7px 9px;
    width: 100%;
}

.board-contract-panel {
    margin-top: 12px;
}

.board-contract-panel pre {
    background: rgba(2, 6, 23, 0.38);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    color: rgba(226, 232, 240, 0.84);
    font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    margin: 12px 0;
    max-height: 180px;
    overflow: auto;
    padding: 12px;
    white-space: pre-wrap;
}

.board-blocked-move-panel {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.34);
    margin-top: 12px;
}

.board-blocked-move-panel[hidden] {
    display: none;
}

.board-blocked-move-panel form {
    margin-top: 12px;
}

.board-signature-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.board-signature-card {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    padding: 10px;
}

.board-signature-card img {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    height: 72px;
    object-fit: contain;
    width: 100%;
}

.board-signature-card span,
.board-signature-card small {
    color: rgba(226, 232, 240, 0.72);
}

.board-sign-form {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.board-sign-form .signature-canvas {
    min-height: 130px;
}

.board-dialog-actions {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
}

.board-money-form-modal {
    grid-template-columns: minmax(0, 1fr);
}

.board-money-form-modal .secondary-button {
    justify-self: start;
}

.board-move-form-modal {
    max-width: 320px;
}

.board-move-form-modal label {
    color: rgba(218, 222, 237, 0.62);
    display: grid;
    font-size: 12px;
    font-weight: 900;
    gap: 5px;
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.board-move-form-modal select {
    width: 100%;
}

@media (max-width: 720px) {
    .board-card-lightbox {
        align-items: stretch;
        padding: 12px;
    }

    .board-card-dialog {
        max-height: calc(100vh - 24px);
        width: 100%;
    }

    .board-dialog-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .board-remove-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .board-signature-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .board-commercial-money-large dd {
        font-size: 16px;
    }
}

.board-money-form {
    align-items: end;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    margin: 4px 0 0;
}

.board-money-form label {
    color: rgba(218, 222, 237, 0.62);
    display: grid;
    font-size: 12px;
    font-weight: 900;
    gap: 3px;
    letter-spacing: 0.08em;
    margin: 0;
    min-width: 0;
    text-transform: uppercase;
}

.board-money-form input {
    border-radius: var(--bz-radius-sm);
    font-size: var(--bz-text-supporting);
    min-height: 32px;
    min-width: 0;
    padding: 7px 8px;
    width: 100%;
}

.board-money-form .secondary-button {
    border-radius: var(--bz-radius-sm);
    min-height: 32px;
    padding: 7px 9px;
}

.board-pill {
    align-items: center;
    background: rgba(139, 92, 246, 0.24);
    border: 0;
    border-radius: 7px;
    color: #c4b5fd;
    display: inline-flex;
    gap: 4px;
    font-size: 12px;
    line-height: 1.2;
    /* Was min-height: 0 with 3px of padding - a 20px tall target carrying
       Archive, Delete and Add Schedule. */
    min-height: 44px;
    padding: 6px 12px;
    text-decoration: none;
}

.board-pill .command-icon {
    height: 12px;
    width: 12px;
}

.board-pill.priority-urgent,
.board-pill.priority-high {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
}

.board-progress {
    align-items: center;
    display: grid;
    gap: 7px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.board-progress > span {
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
    border-radius: 999px;
    display: block;
    height: 5px;
    overflow: hidden;
}

.board-progress em {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.board-card-foot {
    flex-wrap: wrap;
    justify-content: space-between;
}

.board-inline-remove-form {
    margin: 0;
}

.board-inline-remove-form .board-pill {
    cursor: pointer;
    font: inherit;
}

.board-delete-popover {
    position: relative;
}

.board-delete-popover summary {
    cursor: pointer;
    list-style: none;
}

.board-delete-popover summary::-webkit-details-marker {
    display: none;
}

.board-delete-popover form {
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(251, 113, 133, 0.3);
    border-radius: 8px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36);
    display: grid;
    gap: 8px;
    padding: 10px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: min(260px, calc(100vw - 40px));
    z-index: 8;
}

@media (max-width: 900px) {
    .board-delete-popover[open] form {
        margin-top: 6px;
        position: static;
        width: 100%;
    }
}

.board-shell.view-compact .board-kanban {
    grid-auto-columns: minmax(210px, 0.82fr);
    min-height: 540px;
}

.board-shell.view-compact .board-column {
    min-height: 520px;
}

.board-shell.view-compact .board-card-stack {
    gap: 8px;
}

.board-shell.view-compact .board-card {
    gap: 8px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 8px;
}

.board-shell.view-compact .board-card-thumb {
    height: 44px;
    width: 44px;
}

.board-shell.view-compact .board-card-body {
    gap: 3px;
}

.board-shell.view-compact .board-card-body > span,
.board-shell.view-compact .board-card-meta {
    display: none;
}

.board-avatar {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    height: 22px;
    object-fit: cover;
    width: 22px;
}

.board-avatar.fallback {
    align-items: center;
    /* Was #1f8bff -> #8b5cf6: 3.4:1 and 4.2:1 under white initials. */
    background: linear-gradient(135deg, #1d4ed8, #7a53ed);  /* 6.7:1 / 4.9:1 */
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: center;
}

.board-staff-link {
    color: rgba(226, 232, 240, 0.82);
    font-size: 12px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-move-form select {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 7px;
    color: #f8fafc;
    font-size: var(--bz-text-supporting);
    max-width: 92px;
    min-height: 28px;
}

.board-group-label,
.board-add-card,
.board-group-label {
    color: #c4b5fd;
    font-weight: 800;
    text-transform: uppercase;
}

.board-add-card {
    align-items: center;
    color: #c084fc;
    /* Was a 23px tall line of text. */
    display: flex;
    min-height: 44px;
    text-decoration: none;
}

@media (max-width: 760px) {
    .board-command-header,
    .board-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .board-search input {
        min-width: 0;
        width: 100%;
    }

    .board-pipeline-heading {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .board-intake-form {
        grid-template-columns: 1fr;
    }

    .board-kanban {
        grid-auto-columns: minmax(270px, 86vw);
    }
}

.project-summary,
.timeline-item,
.workspace-upload,
.task-checklist {
    border-color: rgba(255, 255, 255, 0.08);
}

.project-summary {
    background: rgba(255, 255, 255, 0.05);
}

.alert.success {
    background: rgba(141, 77, 255, 0.16);
    border-color: rgba(215, 77, 255, 0.25);
    color: #f4eaff;
}

.alert.danger {
    background: rgba(255, 63, 123, 0.12);
    border-color: rgba(255, 107, 156, 0.26);
    color: #ffc1d4;
}

.alert.warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.gantt-header {
    background: rgba(255, 255, 255, 0.06);
    color: #a9a5af;
}

.qr-image,
.qr-card-frame,
.my-qr-frame {
    background: #ffffff;
}

.media-thumb,
.media-thumb.video {
    background: linear-gradient(135deg, #16161a, #3a214f 48%, #d74dff);
}

.cinema-card {
    background: #18181c;
}

.login-screen {
    background:
        radial-gradient(circle at 50% 12%, rgba(112, 67, 191, 0.34), transparent 34%),
        #0d0d10;
}

.project-stage-panel {
    display: grid;
    gap: 10px;
    margin: 14px 0 12px;
    min-width: 0;
    overflow: hidden;
}

.project-stage-panel-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-width: 0;
}

.project-stage-panel .eyebrow {
    margin: 0;
}

.eyebrow.exact-case {
    letter-spacing: 0;
    text-transform: none;
}

.project-stage-flow.bz-wizard-steps {
    gap: 10px;
    margin: 0;
}

.project-stage-save-form {
    display: grid;
    gap: 10px;
    margin: 0;
}

.project-stage-button-form {
    display: flex;
    flex: 1 0 142px;
    margin: 0;
    min-width: max-content;
}

.project-stage-step.bz-wizard-step {
    border: 0;
    box-shadow: none;
    cursor: pointer;
    flex: 1 0 142px;
    line-height: 1;
    min-height: 38px;
    width: 100%;
}

.project-stage-save-form .project-stage-step.bz-wizard-step {
    color: rgba(226, 232, 240, 0.82);
    position: relative;
}

.project-stage-save-form .project-stage-step.bz-wizard-step:has(input:checked) {
    background: linear-gradient(135deg, var(--brand-strong), var(--brand) 62%, var(--magenta));
    color: #fff;
}

.project-stage-save-form .project-stage-step.bz-wizard-step:has(input:focus-visible) {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: 3px;
}

.project-stage-save-button {
    border-radius: 999px;
    flex: 0 0 auto;
}

.project-stage-button-form .project-stage-step.bz-wizard-step {
    min-width: 100%;
}

.project-stage-step.bz-wizard-step.is-active {
    box-shadow: 0 0 28px rgba(215, 77, 255, 0.14);
}

.project-stage-step.bz-wizard-step:disabled {
    cursor: default;
    opacity: 1;
}

.comment-thread-panel {
    min-height: 0;
}

.comment-composer textarea {
    min-height: 110px;
}

.comment-thread {
    gap: 12px;
}

.comment-item {
    align-items: flex-start;
    display: grid;
    gap: 12px;
    grid-template-columns: 38px 1fr;
}

.comment-avatar {
    align-items: center;
    background: linear-gradient(135deg, #8d4dff, #ff3fb7);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    font-size: 0.82rem;
    font-weight: 800;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.comment-body {
    min-width: 0;
}

.comment-text {
    color: #e8e5ee;
    line-height: 1.55;
    margin: 8px 0;
    overflow-wrap: anywhere;
}

.drive-preview {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    display: grid;
    gap: 10px;
    margin-top: 12px;
    overflow: hidden;
    padding: 10px;
}

.drive-preview-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.drive-preview-head span {
    display: grid;
    gap: 3px;
}

.drive-preview-head small {
    color: #a7adbd;
    font-size: 0.78rem;
}

.drive-preview-head a {
    color: #d879ff;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.drive-preview-private {
    align-items: center;
    color: #90f5ba;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 6px;
    white-space: nowrap;
}

.drive-preview iframe {
    aspect-ratio: 16 / 9;
    background: #0d0d10;
    border: 0;
    border-radius: 10px;
    width: 100%;
}

.native-drive-gallery {
    display: grid;
    gap: 8px;
    height: 100%;
    padding: 10px;
}

.native-drive-gallery small {
    color: #90f5ba;
    font-size: 0.76rem;
    font-weight: 800;
}

.native-drive-strip {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 100%;
}

.native-drive-thumb {
    background: rgba(15, 23, 42, 0.84);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    color: #f8fafc;
    display: grid;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.native-drive-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.native-drive-thumb span {
    background: linear-gradient(180deg, transparent, rgba(2, 6, 23, 0.88));
    bottom: 0;
    font-size: 0.75rem;
    font-weight: 800;
    left: 0;
    overflow: hidden;
    padding: 22px 8px 7px;
    position: absolute;
    right: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.native-drive-lightbox {
    align-items: center;
    background: rgba(2, 6, 23, 0.94);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 28px;
    position: fixed;
    z-index: 1000;
}

.native-drive-lightbox:target {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.native-drive-lightbox img {
    border-radius: 10px;
    max-height: 82vh;
    max-width: 92vw;
    object-fit: contain;
}

.native-drive-lightbox strong {
    color: #f8fafc;
}

.native-drive-close {
    align-items: center;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    color: #f8fafc;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    position: fixed;
    right: 24px;
    text-decoration: none;
    top: 24px;
    width: 42px;
}

.code-block {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(10, 10, 15, 0.72);
    color: var(--text);
    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.mission-control-dashboard {
    /* WHY THERE IS NO BACKGROUND HERE ANY MORE
       This painted its own: a purple radial, a blue one, and a navy gradient
       from #080910 to #0b0e17, all on top of the background the site already
       has. The result was a blue rectangle sitting on the site's own dark
       ground, with every panel on it reading as a blue box.

       The owner asked for it to go: "there is no need to put a color of the
       box. the site background is okay." It is transparent now, so the site
       shows through and this page matches every other one. */
    background: transparent;
    border-radius: 0;
    color: #f7f4ff;
    margin: -42px -46px -64px;
    min-height: 100vh;
    overflow: hidden;
    padding: 26px;
}

.mission-control-dashboard .eyebrow,
.mission-control-dashboard small,
.mission-control-dashboard p {
    color: #a9a8b7;
}

.mission-control-dashboard .eyebrow {
    display: none;
}

.mc-hero,
.mc-panel-head,
.mc-metric-top,
.mc-hero-actions,
.mc-activity a,
.mc-schedule a {
    align-items: center;
    display: flex;
}

.mc-hero {
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 26px;
}

.mc-hero h2 {
    color: #fff;
    font-size: 28px;
    line-height: 1.08;
}

.mc-hero p {
    margin: 6px 0 0;
}

.mc-hero-actions {
    gap: 14px;
}

.mc-search {
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #a9a8b7;
    display: flex;
    gap: 10px;
    min-width: 360px;
    padding: 11px 13px;
}

.mc-search input {
    background: transparent;
    border: 0;
    color: #f7f4ff;
    flex: 1 1 auto;
    font: inherit;
    min-width: 0;
    outline: 0;
    padding: 0;
}

.mc-search input::placeholder {
    color: #a9a8b7;
}

.mc-round-action,
.mc-branch-pill {
    align-items: center;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
    color: #fff;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
}

.mc-round-action {
    border-radius: 50%;
    flex: 0 0 44px;
    position: relative;
    width: 44px;
}

.mc-round-action:first-of-type {
    background: linear-gradient(135deg, #7338ff, #a843ff);
}

.mc-round-action b {
    /* Was #ff3864 - white digits on it measured 3.5:1. */
    background: #d61f4a;  /* 5.1:1 */
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    min-width: 18px;
    padding: 4px;
    position: absolute;
    right: -4px;
    top: -5px;
    text-align: center;
}

.mc-branch-pill {
    border-radius: 8px;
    flex: 0 0 auto;
    gap: 9px;
    padding: 0 14px;
    white-space: nowrap;
}

.mc-metrics {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 18px;
    min-width: 0;
}

.mc-metric-card,
.mc-panel {
    /* The same surface every other card in beetzee uses, rather than a
       translucent white that took its colour from whatever was painted
       behind it. A card is told apart from the page by its edge, not by
       being a different colour. */
    background: var(--bz-bg-surface, #0d111b);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.mc-metric-card {
    color: inherit;
    min-height: 150px;
    overflow: hidden;
    padding: 17px 18px 58px;
    position: relative;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

a.mc-metric-card:hover {
    border-color: rgba(168, 85, 247, 0.32);
    box-shadow: 0 22px 48px rgba(124, 58, 237, 0.22);
    transform: translateY(-2px);
}

.mc-metric-card strong {
    color: #fff;
    display: block;
    /* Size and line-height live in bz-ux.css with the other metric tiles. */
    margin: 14px 0 8px;
    position: relative;
    z-index: 1;
}

.mc-metric-card small {
    bottom: 14px;
    display: block;
    font-size: 12px;
    line-height: 1.35;
    max-width: calc(100% - 58px);
    position: absolute;
    left: 18px;
    right: 18px;
    z-index: 2;
}

.mc-metric-card small::before {
    /* A fade so the caption stays readable where it crosses the sparkline.
       It was slate blue, which is a colour of its own; it is the card's own
       colour now, so it disappears into the card instead of tinting it. */
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--bz-bg-surface, #0d111b) 92%, transparent),
        color-mix(in srgb, var(--bz-bg-surface, #0d111b) 45%, transparent),
        transparent);
    content: "";
    inset: -4px -10px;
    position: absolute;
    z-index: -1;
}

.mc-metric-card strong {
    position: relative;
    z-index: 2;
}

.mc-metric-top {
    position: relative;
    z-index: 2;
}

.mc-metric-top { justify-content: space-between; }

.mc-metric-top span,
.mc-panel-head h3 {
    color: #fff;
    font-weight: 800;
}

.mc-metric-top i,
.mc-attention-item i,
.mc-activity i {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.mc-sparkline {
    bottom: 32px;
    height: 44px;
    left: 18px;
    opacity: 0.95;
    overflow: hidden;
    position: absolute;
    right: 18px;
}

.mc-sparkline svg {
    display: block;
    height: 100%;
    width: 100%;
}

.mc-sparkline-line,
.mc-sparkline-fill {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.mc-sparkline-line {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.mc-sparkline-fill {
    fill: currentColor;
    opacity: 0.13;
    stroke: none;
}

.tone-violet { color: #8d50ff; }
.tone-blue { color: #1498ff; }
.tone-amber { color: #f6a62b; }
.tone-green { color: #47cf68; }
.tone-pink { color: #ff2f7f; }

.line-chart {
    color: currentColor;
    display: block;
    height: 44px;
    margin-top: 10px;
    overflow: hidden;
}

.line-chart svg {
    display: block;
    height: 100%;
    width: 100%;
}

.line-chart-line,
.line-chart-fill {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.line-chart-line {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.line-chart-fill {
    fill: currentColor;
    opacity: 0.14;
    stroke: none;
}

.tone-violet i { background: rgba(141, 80, 255, 0.17); }
.tone-blue i { background: rgba(20, 152, 255, 0.17); }
.tone-amber i { background: rgba(246, 166, 43, 0.17); }
.tone-green i { background: rgba(71, 207, 104, 0.17); }
.tone-pink i { background: rgba(255, 47, 127, 0.17); }

.mc-layout {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) clamp(308px, 23vw, 370px);
    min-width: 0;
}

.mc-main-column,
.mc-side-column {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.mc-side-column {
    align-content: start;
}

.mc-panel {
    min-width: 0;
    overflow: hidden;
    padding: 18px;
}

.mc-panel-head {
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mc-panel-head a,
.mc-panel-head span,
.mc-wide-link {
    color: #bda0ff;
    font-size: 13px;
    font-weight: 800;
}

/* These are the way into the panel's full list, and they were 19px tall. */
.mc-panel-head a,
.mc-wide-link {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
}

.mc-attention-item {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    display: flex;
    gap: 14px;
    min-height: 86px;
    padding: 16px 8px;
}

.mc-attention-item strong,
.mc-attention-item b,
.mc-attention-item small {
    display: block;
}

.mc-attention-item strong {
    color: #fff;
    font-size: 22px;
    line-height: 1;
}

.mc-attention-item b {
    color: #fff;
    font-size: 14px;
}

.mc-tabs {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    display: flex;
    gap: 3px;
    padding: 3px;
}

.mc-tabs span,
.mc-tabs a,
.mc-tabs button {
    background: transparent;
    border: 0;
    border-radius: var(--bz-radius-xs);
    color: #a9a8b7;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--bz-text-supporting);
    font-weight: 800;
    padding: 7px 12px;
    text-decoration: none;
}

.mc-tabs a:hover,
.mc-tabs a:focus,
.mc-tabs button:hover,
.mc-tabs button:focus {
    color: #fff;
    outline: none;
}

.mc-tabs .active,
.mc-tabs [aria-selected="true"] {
    background: #6332c9;
    color: #fff;
}

.mc-progress {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.mc-progress span {
    background: linear-gradient(90deg, #8d50ff, #df4bff);
    display: block;
    height: 100%;
}

.mc-quick-actions {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.mc-quick-actions a {
    align-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    color: #f7f4ff;
    display: grid;
    gap: 10px;
    justify-items: center;
    min-height: 92px;
    padding: 13px 10px;
    text-align: center;
}

.mc-quick-actions .command-icon {
    background: rgba(141, 80, 255, 0.18);
    border-radius: 8px;
    color: #b983ff;
    height: 42px;
    padding: 10px;
    width: 42px;
}

.mc-quick-actions span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.mc-bottom-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr 1.35fr 1.08fr;
    min-width: 0;
}

.mc-money-total {
    color: #fff;
    display: block;
    font-size: 24px;
    margin-bottom: 14px;
}

.line-chart-large {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    height: 128px;
    margin-top: 14px;
}

.line-chart-large svg {
    height: calc(100% - 10px);
    margin-top: 10px;
}

.mc-donut {
    align-items: center;
    border-radius: 50%;
    display: flex;
    flex: 0 0 132px;
    height: 132px;
    justify-content: center;
    position: relative;
    width: 132px;
}

.mc-donut::after {
    background: #15151e;
    border-radius: 50%;
    content: "";
    height: 86px;
    position: absolute;
    width: 86px;
}

.mc-donut span {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    position: relative;
    text-align: center;
    z-index: 1;
}

.mc-donut b {
    display: block;
    font-size: 25px;
}

.mc-legend,
.mc-activity,
.mc-schedule {
    display: grid;
    gap: 12px;
}

.mc-legend span {
    align-items: center;
    color: #d9d7e6;
    display: flex;
    font-size: 13px;
    gap: 9px;
}

.mc-legend i {
    border-radius: 50%;
    height: 10px;
    width: 10px;
}

.mc-avatar {
    border-radius: 50%;
    grid-area: avatar;
    height: 32px;
    object-fit: cover;
    width: 32px;
}

.mc-avatar.fallback {
    align-items: center;
    /* Was #8d50ff -> #1894ff: the blue end measured 2.9:1. */
    background: linear-gradient(135deg, #7a53ed, #1d4ed8);  /* 4.9:1 / 6.7:1 */
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: center;
}

.mc-schedule a,
.mc-activity a {
    color: #fff;
    gap: 12px;
}

.mc-schedule time {
    color: #b8b6c4;
    flex: 0 0 72px;
    font-size: 12px;
}

.mc-schedule span,
.mc-activity span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.mc-schedule b,
.mc-activity b {
    color: #fff;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-wide-link {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    display: block;
    margin-top: 16px;
    padding: 12px;
    text-align: center;
}

.mc-activity i {
    background: rgba(141, 80, 255, 0.16);
    color: #bda0ff;
    flex: 0 0 auto;
    height: 36px;
    width: 36px;
}

@media (max-width: 1180px) {
    .topbar-account-floating ~ .calendar-command-dashboard,
    .topbar-account-floating ~ .contracts-command-page,
    .topbar-account-floating ~ .equipment-command-dashboard {
        padding-top: 92px;
    }

    .topbar-account-floating ~ .calendar-command-dashboard .cal-hero,
    .topbar-account-floating ~ .equipment-command-dashboard .ecd-hero {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .topbar-account-floating ~ .calendar-command-dashboard .cal-search {
        /* flex-basis is a HEIGHT once this row is turned into a column on a
           small screen: this box stood 320px tall and empty around a single
           44px line. The min-width below is what was meant. */
        flex: 1 1 auto;
        min-width: min(100%, 320px);
    }

    .topbar-account-floating ~ .equipment-command-dashboard .ecd-hero-actions {
        justify-content: flex-start;
        max-width: 100%;
    }

    .topbar-account-floating ~ .equipment-command-dashboard .ecd-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topbar-account-floating ~ .equipment-command-dashboard .ecd-kpis article {
        min-width: 0;
    }

    .mission-control-dashboard {
        padding-top: 92px;
    }

    .mission-control-dashboard .mc-hero {
        align-items: flex-start;
    }

    .mission-control-dashboard .mc-hero-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        max-width: 100%;
        padding-right: 0;
    }

    .mission-control-dashboard .mc-search {
        /* A basis is a height in a column - see the note on .cal-search above. */
        flex: 1 1 auto;
        min-width: min(100%, 320px);
    }

    .mc-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mc-layout,
    .mc-bottom-grid,
    .mc-quick-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .mc-bottom-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (max-width: 760px) {
    .mission-control-dashboard {
        margin: 0;
        padding: 16px;
    }

    .mc-hero,
    .mc-hero-actions,
    .mc-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .mc-search {
        min-width: 0;
        width: 100%;
    }

    .mc-metrics{
        grid-template-columns: 1fr;
    }

}

.visual-page-shell {
    background: linear-gradient(180deg, rgba(11, 13, 24, 0.98), rgba(16, 17, 28, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.26);
    color: #f8f6ff;
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
    min-width: 0;
    overflow: hidden;
    padding: 18px;
}

.visual-page-shell .section-heading p:not(.eyebrow) {
    color: rgba(218, 222, 237, 0.72);
    font-size: var(--bz-text-body);
    line-height: 1.5;
    margin: var(--bz-space-15) 0 0;
    max-width: 680px;
}

.visual-page-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.client-visual-page {
    background:
        radial-gradient(circle at 12% 0%, rgba(141, 80, 255, 0.18), transparent 34%),
        radial-gradient(circle at 88% 5%, rgba(20, 152, 255, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(12, 15, 27, 0.98), rgba(13, 18, 29, 0.98));
}

.client-visual-page .section-heading {
    align-items: flex-start;
}

body:not(.login-screen) .section:not(.visual-page-shell),
body:not(.login-screen) .project-hero {
    background:
        radial-gradient(circle at 8% 0%, rgba(141, 80, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(18, 21, 33, 0.97), rgba(13, 17, 28, 0.98));
    border-color: rgba(255, 255, 255, 0.085);
    color: #f8f6ff;
}

body:not(.login-screen) .section:not(.visual-page-shell) .section-heading {
    align-items: flex-start;
}

body:not(.login-screen) .section:not(.visual-page-shell) .section-heading h2,
body:not(.login-screen) .project-hero h2 {
    letter-spacing: -0.02em;
}

body:not(.login-screen) .section:not(.visual-page-shell) .section-heading p:not(.eyebrow),
body:not(.login-screen) .project-hero p:not(.eyebrow) {
    color: rgba(218, 222, 237, 0.72);
    line-height: 1.5;
}

body:not(.login-screen) .table-wrap {
    background: rgba(8, 12, 22, 0.34);
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: var(--bz-radius-md);
}

body:not(.login-screen) table th {
    background: rgba(17, 23, 38, 0.92);
    color: rgba(218, 222, 237, 0.68);
}

body:not(.login-screen) table td {
    background: rgba(12, 16, 27, 0.34);
}

body:not(.login-screen) table tbody tr:hover td {
    background: rgba(141, 80, 255, 0.07);
}

body:not(.login-screen) .bz-pnl-paper {
    background: #ffffff;
    color: #111827;
}

body:not(.login-screen) .bz-pnl-paper .section-heading p:not(.eyebrow),
body:not(.login-screen) .bz-pnl-paper .muted,
body:not(.login-screen) .bz-pnl-paper small {
    color: #64748b;
}

body:not(.login-screen) .bz-pnl-paper .table-wrap details > summary {
    color: #111827;
}

body:not(.login-screen) .bz-pnl-paper .bz-pnl-layout h3,
body:not(.login-screen) .bz-pnl-paper > .bz-accounting-details > summary {
    color: #f8fafc;
}

body:not(.login-screen) .bz-pnl-paper .panel-card h3 {
    color: #111827;
}

body:not(.login-screen) .bz-pnl-paper .table-wrap {
    background: #ffffff;
    border-color: #e2e8f0;
}

body:not(.login-screen) .bz-pnl-paper table th {
    background: #f8fafc;
    color: #475569;
}

body:not(.login-screen) .bz-pnl-paper table td {
    background: #ffffff;
    color: #111827;
}

body:not(.login-screen) .bz-pnl-paper table tbody tr:hover td {
    background: #f8fafc;
}

@media (max-width: 900px) {
    body:not(.login-screen) .bz-pnl-paper .table-wrap:not(.managed-users-wrap) tr {
        background: #ffffff;
        border-bottom-color: #e2e8f0;
    }

    body:not(.login-screen) .bz-pnl-paper .table-wrap:not(.managed-users-wrap) td::before {
        color: #64748b;
    }
}

.visual-metrics {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
}

.visual-page-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    min-width: 0;
}

.visual-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.032));
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 8px;
    min-width: 0;
    padding: 18px;
}

.visual-panel-head,
.visual-donut-wrap {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.visual-panel-head {
    margin-bottom: 16px;
}

.visual-panel-head span,
.visual-panel-head strong {
    display: block;
}

.visual-panel-head span {
    color: #a9a8b7;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.visual-panel-head strong {
    color: #fff;
    font-size: 16px;
    margin-top: 3px;
}

.visual-panel-head > i {
    align-items: center;
    background: rgba(141, 80, 255, 0.17);
    border-radius: 8px;
    color: #b983ff;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.bz-attendance-scanner .two-column-section {
    align-items: stretch;
}

.attendance-scan-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.attendance-scan-card > .primary-button,
.attendance-scan-card > .secondary-button {
    align-self: flex-start;
    border-radius: var(--bz-radius-pill);
    min-height: 42px;
}

.attendance-manual-scan {
    align-items: end;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: auto;
    padding: 14px;
    width: min(100%, 620px);
}

.attendance-manual-scan label {
    color: var(--muted);
    display: grid;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
    min-width: 0;
}

.attendance-manual-scan input {
    min-height: 48px;
    min-width: 0;
    width: 100%;
}

.attendance-manual-scan .secondary-button {
    border-radius: var(--bz-radius-md);
    justify-content: center;
    min-height: 48px;
    white-space: nowrap;
}

.face-clock-panel {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
}

.face-clock-camera {
    background: rgba(3, 7, 18, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    display: grid;
    min-height: 260px;
    overflow: hidden;
    place-items: center;
}

.face-clock-camera video,
.face-clock-camera img {
    aspect-ratio: 1;
    display: block;
    max-height: 360px;
    object-fit: cover;
    width: min(100%, 360px);
}

.face-clock-camera video:empty {
    background: radial-gradient(circle at 50% 42%, rgba(139, 92, 246, 0.2), transparent 34%), rgba(2, 6, 14, 0.9);
}

.face-clock-form {
    display: grid;
    gap: 12px;
}

.face-clock-form label {
    color: var(--muted);
    display: grid;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
}

.face-clock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.face-clock-actions button {
    min-height: 44px;
}

.face-clock-form small {
    color: var(--muted);
}

.visual-donut-wrap {
    justify-content: start;
}

.visual-lines {
    display: grid;
    gap: 12px;
}

.visual-lines > span {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(92px, 0.65fr) minmax(120px, 1fr) 32px;
    min-width: 0;
}

.visual-lines b,
.visual-lines strong {
    color: #f8f6ff;
    font-size: 12px;
}

.visual-lines b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-lines i,
.visual-client-card > i {
    display: block;
    height: 22px;
    overflow: visible;
    position: relative;
}

.visual-lines em,
.visual-client-card em {
    display: block;
    height: 100%;
    position: relative;
}

.visual-lines i::before,
.visual-client-card > i::before,
.visual-lines em::before,
.visual-client-card em::before,
.visual-lines em::after,
.visual-client-card em::after {
    content: "";
    position: absolute;
}

.visual-lines i::before,
.visual-client-card > i::before {
    background: rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    height: 2px;
    left: 0;
    right: 0;
    top: 50%;
}

.visual-lines em::before,
.visual-client-card em::before {
    background: linear-gradient(90deg, rgba(141, 80, 255, 0.15), #1498ff);
    height: 2px;
    left: 0;
    right: 0;
    top: 50%;
}

.visual-lines em::after,
.visual-client-card em::after {
    background: #8d50ff;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(141, 80, 255, 0.15);
    height: 8px;
    right: -4px;
    top: calc(50% - 3px);
    width: 8px;
}

.visual-card-strip {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
}

.visual-project-card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 8px;
    color: #fff;
    display: grid;
    gap: 9px;
    min-width: 0;
    overflow: hidden;
    padding: 10px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.visual-project-card:hover,
.visual-project-card:focus,
.visual-client-card:hover,
.visual-client-card:focus {
    border-color: rgba(168, 85, 247, 0.34);
    outline: none;
    transform: translateY(-2px);
}

.visual-project-card img {
    aspect-ratio: 16 / 8.5;
    border-radius: 7px;
    object-fit: cover;
    width: 100%;
}

.visual-project-card strong,
.visual-project-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-project-card p {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: 0;
}

.visual-project-card em {
    background: rgba(141, 80, 255, 0.2);
    border-radius: 999px;
    color: #d0a4ff;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    max-width: 132px;
    overflow: hidden;
    padding: 3px 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-project-card > i {
    background: rgba(255, 255, 255, 0.085);
    border-radius: 999px;
    display: block;
    height: 8px;
    overflow: hidden;
}

.visual-project-card > i em {
    background: linear-gradient(90deg, #8d50ff, #1498ff);
    display: block;
    height: 100%;
    padding: 0;
}

.visual-request-card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
}

.visual-card-icon {
    align-items: center;
    background: rgba(141, 80, 255, 0.18);
    border-radius: 8px;
    color: #b983ff;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.visual-request-card > div {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.visual-request-card strong,
.visual-request-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-request-card p {
    color: #b8b6c4;
    display: -webkit-box;
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    min-height: 38px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.visual-request-card footer {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding-top: 10px;
}

.visual-request-card footer b {
    color: #fff;
    font-size: 14px;
}

.visual-request-card footer em {
    color: #a9a8b7;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-quote-card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
}

.visual-quote-card strong,
.visual-quote-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-quote-card footer {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding-top: 10px;
}

.visual-quote-card footer b {
    color: #fff;
    font-size: 14px;
}

.visual-quote-card footer em {
    color: #a9a8b7;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-client-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
}

.visual-client-card {
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 8px;
    color: #f8f6ff;
    display: grid;
    gap: 10px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-width: 0;
    padding: 14px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.visual-avatar {
    border-radius: 50%;
    height: 44px;
    object-fit: cover;
    width: 44px;
}

.visual-avatar.fallback {
    align-items: center;
    /* Was #8d50ff -> #1498ff: the blue end measured 2.8:1. */
    background: linear-gradient(135deg, #7a53ed, #1d4ed8);  /* 4.9:1 / 6.7:1 */
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    justify-content: center;
}

.visual-client-card span,
.visual-client-card strong,
.visual-client-card small {
    min-width: 0;
}

.visual-client-card span {
    display: grid;
    gap: 3px;
}

.visual-client-card strong,
.visual-client-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-client-card > b {
    color: #fff;
    font-size: 18px;
}

.visual-client-card > i,
.visual-client-card > small {
    grid-column: 2 / 4;
}

.visual-client-card > small {
    color: #a9a8b7;
    font-size: 12px;
}

.visual-team-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
}

.visual-team-card {
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 8px;
    color: #f8f6ff;
    display: grid;
    gap: 10px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-width: 0;
    padding: 14px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.visual-team-card:hover,
.visual-team-card:focus {
    border-color: rgba(20, 152, 255, 0.36);
    outline: none;
    transform: translateY(-2px);
}

.visual-team-card span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.visual-team-card strong,
.visual-team-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-team-card > b {
    color: #fff;
    font-size: 18px;
}

.visual-team-card > small {
    color: #a9a8b7;
    font-size: 12px;
    grid-column: 2 / 4;
}

@media (max-width: 1180px) {
    .visual-metrics,
    .visual-card-strip,
    .visual-client-grid,
    .visual-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .visual-page-shell {
        padding: 14px;
    }

    .visual-metrics,
    .visual-page-grid,
    .visual-card-strip,
    .visual-client-grid,
    .visual-team-grid {
        grid-template-columns: 1fr;
    }

    .visual-donut-wrap,
    .visual-panel-head {
        align-items: start;
        flex-direction: column;
    }

    .visual-lines > span {
        grid-template-columns: minmax(82px, 0.7fr) minmax(90px, 1fr) 28px;
    }
}

.staff-control-dashboard {
    background:
        radial-gradient(circle at 12% 0%, rgba(117, 49, 255, 0.22), transparent 30%),
        radial-gradient(circle at 82% 10%, rgba(0, 147, 255, 0.1), transparent 28%),
        linear-gradient(180deg, #070b13 0%, #0b0d15 100%);
    border-radius: 8px;
    color: #f8f6ff;
    margin: -4px -4px 0;
    min-height: calc(100vh - 56px);
    padding: 24px;
}

/* Staff Home already sits on the application's page background. Painting a
   second full-page gradient behind the greeting, clock, and work panels made
   the whole page look like one oversized table/card. Keep the individual
   panels, but let the normal site background show through around them. */
.staff-control-dashboard.sd-shell {
    background: transparent;
    border-radius: 0;
}

.staff-control-dashboard .eyebrow,
.staff-control-dashboard small,
.staff-control-dashboard p {
    color: #a9a8b7;
}

.staff-hero,
.staff-hero-actions,
.staff-panel-head,
.staff-task-row,
/* .staff-team-list a used to be in here as display:flex, and was then set to
   grid twice further along. Its layout lives in bz-ux.css. */
.staff-time-actions {
    align-items: center;
    display: flex;
}

.staff-hero {
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 22px;
}

.staff-hero h2 {
    color: #fff;
    font-size: 28px;
}

.staff-hero p {
    margin: 6px 0 0;
}

.staff-hero-actions {
    gap: 12px;
}

.staff-search {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
}

.staff-search {
    align-items: center;
    color: #a9a8b7;
    display: flex;
    gap: 10px;
    min-width: 360px;
    padding: 11px 13px;
}

.staff-panel-head h3,
.staff-project-card strong,
.staff-task-title strong,
.staff-team-list strong,
.staff-quote-band strong {
    color: #fff;
}

/* The column count lives in bz-ux.css (auto-fit); five fixed columns here
   never took effect and tore on a phone. */
.staff-metrics {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.staff-metric,
.staff-panel,
.staff-quote-band {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.staff-metric {
    color: #fff;
    display: grid;
    gap: 14px;
    min-height: 124px;
    overflow: hidden;
    padding: 18px;
}

a.staff-metric {
    text-decoration: none;
}

.staff-metric.tone-violet { color: #8d50ff; }
.staff-metric.tone-blue { color: #1498ff; }
.staff-metric.tone-amber { color: #f6a62b; }
.staff-metric.tone-green { color: #47cf68; }
.staff-metric.tone-pink { color: #ff2f7f; }

.staff-metric i {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.staff-metric span {
    display: grid;
    gap: 4px;
}

.staff-metric strong {
    color: #fff;
}

.staff-metric em {
    color: #a9a8b7;
    font-size: 12px;
    font-style: normal;
}

.staff-metric > b {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    display: block;
    height: 5px;
    overflow: hidden;
}

.staff-metric > b span {
    background: currentColor;
    display: block;
    height: 100%;
}

.staff-layout {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 330px;
}

.staff-main-column,
.staff-side-column {
    display: grid;
    gap: 18px;
}

.staff-panel {
    padding: 18px;
}

.staff-panel-head {
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.staff-panel-head a {
    align-items: center;
    color: #bda0ff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    min-height: 44px;
}

.staff-project-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.staff-project-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #fff;
    display: grid;
    gap: 8px;
    overflow: hidden;
    padding: 10px;
}

.staff-project-card img {
    aspect-ratio: 16 / 9;
    border-radius: 7px;
    object-fit: cover;
    width: 100%;
}

.staff-project-card strong,
.staff-project-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-project-card em,
.staff-task-row em,
.staff-team-list em {
    background: rgba(141, 80, 255, 0.18);
    border-radius: 999px;
    color: #c99dff;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    justify-self: start;
    padding: 3px 8px;
}

.staff-project-card p {
    margin: 0;
}

.staff-task-table {
    display: grid;
}

.staff-task-row {
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    color: #d9d7e6;
    display: grid;
    gap: 14px;
    grid-template-columns: 34px minmax(220px, 1.5fr) minmax(90px, 0.7fr) minmax(80px, 0.5fr) minmax(100px, 0.5fr);
    min-height: 56px;
    padding: 10px 0;
}

.staff-task-title {
    display: grid;
    gap: 3px;
}

.staff-task-action a,
.staff-task-action button,
.staff-task-action span {
    align-items: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--bz-radius-xs);
    color: #fff;
    display: inline-flex;
    height: 22px;
    justify-content: center;
    padding: 0;
    width: 22px;
}

.staff-task-action a {
    text-decoration: none;
}

.staff-task-action button:hover {
    border-color: #bda0ff;
    color: #bda0ff;
}

.staff-task-row > b {
    font-size: 12px;
}

.priority-high { color: #ff4f68; }
.priority-normal,
.priority-medium { color: #f6a62b; }
.priority-low { color: #48d06d; }

.staff-task-status.tone-ready {
    background: rgba(34, 197, 94, 0.16);
    color: #6ee7a8;
}

.staff-task-status.tone-progress {
    background: rgba(141, 80, 255, 0.18);
    color: #c99dff;
}

.staff-task-status.tone-queued,
.staff-task-status.tone-checklist {
    background: rgba(246, 166, 43, 0.16);
    color: #f8c36c;
}

.staff-task-status.tone-blocked {
    background: rgba(255, 79, 104, 0.16);
    color: #ff8a9b;
}

.staff-task-status.tone-review {
    background: rgba(21, 152, 255, 0.16);
    color: #8bd0ff;
}

.staff-task-status.tone-done {
    background: rgba(72, 208, 109, 0.14);
    color: #7ee39b;
}

.staff-time-panel {
    text-align: center;
}

.staff-time-donut {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 156px;
    justify-content: center;
    margin: 18px auto;
    position: relative;
    width: 156px;
}

.staff-time-donut::after {
    background: #15151e;
    border-radius: 50%;
    content: "";
    height: 104px;
    position: absolute;
    width: 104px;
}

.staff-time-donut span {
    display: grid;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.staff-time-donut b {
    color: #fff;
    font-size: 24px;
}

.staff-time-actions {
    align-items: stretch;
    gap: 8px;
}

.staff-time-actions input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--bz-radius-sm);
    color: #fff;
    min-width: 0;
    padding: 11px 12px;
    width: 100%;
}

.staff-time-actions button {
    background: linear-gradient(135deg, #7338ff, #a843ff);
    border: 0;
    border-radius: var(--bz-radius-sm);
    color: #fff;
    font-weight: 800;
    padding:0 var(--bz-space-35);
    white-space: nowrap;
}

.staff-lower-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.staff-team-list {
    display: grid;
    gap: 12px;
}

.staff-team-list a {
    color: #fff;
}

.staff-team-list span {
    display: grid;
    gap: 2px;
}

.staff-team-list em {
    align-self: center;
    background: rgba(71, 207, 104, 0.15);
    color: #48d06d;
}

.staff-quote-band {
    align-items: center;
    /* Had a second layer, url("sample-assets/photos/sample-9.svg"), pointing
       at a folder that does not exist. The gradient is the whole band. */
    background: linear-gradient(90deg, rgba(95, 28, 178, 0.72), rgba(33, 17, 58, 0.86));
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-top: 18px;
    min-height: 86px;
    padding: 22px 30px;
}

.staff-quote-band span {
    color: #c7bdd9;
    text-align: right;
}

.team-command-page {
    display: grid;
    gap: 18px;
}

.team-command-page .visual-page-shell,
.team-command-page #team-workload .section {
    margin: 0;
}

.team-command-page #team-workload .section,
.team-command-page .org-chart-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--bz-radius-sm);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    padding: var(--bz-space-45);
}

.team-explain-grid,
.team-directory-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-definition-list,
.team-action-list {
    display: grid;
    gap: 10px;
}

.team-definition-list p,
.team-action-list a,
.team-directory-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.team-definition-list p {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 12px;
}

.team-definition-list b,
.team-action-list strong,
.team-directory-card strong {
    color: #fff;
}

.team-action-list a {
    align-items: center;
    color: #eef2ff;
    display: grid;
    gap: 12px;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 12px;
    text-decoration: none;
}

.team-action-list span,
.team-directory-card span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.team-add-panel summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    list-style: none;
}

.team-add-panel summary::-webkit-details-marker {
    display: none;
}

.team-add-panel summary span {
    display: grid;
    gap: 3px;
}

.team-add-panel form {
    margin-top: 16px;
}

.team-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.team-directory-card {
    color: #eef2ff;
    display: grid;
    gap: 10px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
    text-decoration: none;
}

.team-directory-card em {
    background: rgba(141, 80, 255, 0.16);
    border-radius: 999px;
    color: #c99dff;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    justify-self: start;
    padding: 4px 9px;
}

@media (max-width: 1440px) {
    .staff-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .staff-layout,
    .staff-lower-grid,
    .team-directory-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .staff-control-dashboard {
        padding: 16px;
    }

    .staff-hero,
    .staff-hero-actions,
    .staff-panel-head,
    .staff-time-actions,
    .staff-quote-band {
        align-items: stretch;
        flex-direction: column;
    }

    .staff-search {
        min-width: 0;
        width: 100%;
    }

    .staff-metrics,
    .staff-project-grid,
    .team-explain-grid {
        grid-template-columns: 1fr;
    }

    .staff-task-row {
        align-items: start;
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .staff-task-row > span,
    .staff-task-row > b,
    .staff-task-row > em {
        grid-column: 2;
    }

    .staff-quote-band span {
        text-align: left;
    }
}

.media-input-stack {
    display: grid;
    gap: 12px;
}

.media-admin-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.media-library-panel {
    order: 1;
}

.media-management-panel {
    order: 2;
}

.media-library-panel .section-heading {
    align-items: end;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    margin-bottom: var(--bz-space-45);
    padding-bottom: var(--bz-space-4);
}

.media-library-panel h2 {
    font-size: 32px;
}

.media-library-panel .media-filter-form {
    background: rgba(15, 23, 42, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    padding: 14px;
}

.media-library-panel .media-card {
    min-height: 100%;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.media-library-panel .media-card:hover {
    border-color: rgba(168, 85, 247, 0.38);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.32);
    transform: translateY(-1px);
}

.media-management-panel {
    background:
        radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.025));
}

.drive-link-form {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    margin-top: 16px;
    padding: 16px;
    position: relative;
}

.drive-link-form::before {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.7), rgba(236, 72, 153, 0.45), transparent);
    content: "";
    height: 1px;
    left: 16px;
    position: absolute;
    right: 16px;
    top: 0;
}

.org-chart {
    display: grid;
    gap: 22px;
}

.org-tier {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.leadership-tier {
    position: relative;
}

.leadership-tier::after {
    background: linear-gradient(90deg, transparent, rgba(215, 77, 255, 0.45), transparent);
    content: "";
    display: block;
    height: 1px;
    inset: auto 10% -12px;
    position: absolute;
}

.org-branches {
    display: grid;
    gap: 16px;
}

.org-branch {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
}

.team-member-card {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #f8f6fb;
    display: grid;
    gap: 10px;
    grid-template-columns: 58px 1fr;
    min-height: 132px;
    padding: 14px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.team-member-card:hover,
.team-member-card:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(215, 77, 255, 0.42);
    transform: translateY(-1px);
}

.team-member-card.not-clickable {
    cursor: default;
}

.team-member-card.leader {
    background: linear-gradient(135deg, rgba(141, 77, 255, 0.18), rgba(255, 63, 183, 0.1));
}

.team-avatar {
    align-items: center;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    display: flex;
    height: 58px;
    justify-content: center;
    object-fit: cover;
    width: 58px;
}

.team-avatar.fallback {
    /* Was #8d4dff -> #ff3fb7: the pink end measured 3.2:1. */
    background: linear-gradient(135deg, #7a53ed, #d6157f);  /* 4.9:1 / 4.9:1 */
    color: #ffffff;
    font-weight: 800;
}

.team-member-info,
.team-member-work {
    display: grid;
    gap: 4px;
}

.team-member-info strong {
    color: #ffffff;
}

.team-member-info small,
.team-member-card em {
    /* Was #aaa5b0 - 4.36:1 on the violet member card. */
    color: #b8b4c2;
    font-style: normal;
}

.team-member-work {
    color: #d8d4df;
    font-size: 0.84rem;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, max-content);
}

.team-member-work b {
    color: #ffffff;
}

.team-member-card em {
    grid-column: 1 / -1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-profile-hero {
    align-items: center;
}

.staff-profile-main {
    align-items: center;
    display: flex;
    gap: 18px;
}

.profile-photo {
    height: 96px;
    width: 96px;
}

.permission-matrix-form {
    display: contents;
}

.permission-toggle {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 34px;
    min-width: 42px;
}

.permission-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.permission-toggle span {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: #aaa5b0;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 42px;
}

.permission-toggle input:checked + span {
    background: linear-gradient(135deg, rgba(141, 77, 255, 0.28), rgba(255, 63, 183, 0.2));
    border-color: rgba(255, 63, 183, 0.48);
    color: #ffffff;
}

.permission-save-panel {
    position: sticky;
    bottom: 16px;
    z-index: 2;
}

@media (max-width: 760px) {
    .sidebar {
        position: static;
        width: auto;
    }

    .settings-hero {
        flex-direction: column;
    }

    .settings-hero-status {
        min-width: 0;
    }

    .main {
        margin-left: 0;
        padding: 22px 16px 44px;
    }

    /* Direction and alignment at this width are set in components.css. */
    .topbar-actions {
        width: 100%;
    }

    .global-search,
    .topbar-account-menu,
    .account-menu-trigger{
        max-width: none;
        width: 100%;
    }

    .topbar-account-menu {
        align-items: center;
    }

    .topbar-account-menu .account-menu-details {
        flex: 1 1 auto;
    }

    .account-menu-panel {
        min-width: 0;
        width: 100%;
    }
}
/* Accountant finance control dashboard */
.accountant-control-dashboard {
  color: #f7f7fb;
}

.accountant-control-dashboard a {
  color: inherit;
  text-decoration: none;
}

.acd-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 4px 0 22px;
}

.acd-hero h2 {
  margin: 0 0 6px;
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
  letter-spacing: 0;
}

.acd-hero p {
  margin: 0;
  color: #a7adbd;
}

.acd-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.acd-hero-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: #ede7ff;
}

.acd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.acd-kpi,
.acd-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    radial-gradient(circle at 85% 8%, rgba(124, 58, 237, 0.2), transparent 32%),
    linear-gradient(145deg, rgba(20, 24, 38, 0.98), rgba(9, 15, 26, 0.98));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.acd-kpi {
  min-height: 144px;
  padding: 20px;
}

.acd-kpi span,
.acd-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.acd-kpi span {
  color: #d8dced;
  font-weight: 700;
}

.acd-kpi i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.25);
}

.acd-kpi strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.18;
  white-space: nowrap;
}

.acd-kpi small {
  display: block;
  margin-top: 6px;
  color: #9be7ad;
}

.acd-kpi-line {
  display: block;
  height: 42px;
  margin-top: 10px;
}

.acd-kpi-line svg {
  display: block;
  height: 100%;
  width: 100%;
}

.acd-line-path,
.acd-line-fill {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.acd-line-path {
  stroke: #a855f7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.acd-line-fill {
  fill: #a855f7;
  opacity: 0.13;
  stroke: none;
}

.acd-kpi.blue .acd-line-path { stroke: #38bdf8; }
.acd-kpi.blue .acd-line-fill { fill: #38bdf8; }
.acd-kpi.green .acd-line-path { stroke: #4ade80; }
.acd-kpi.green .acd-line-fill { fill: #4ade80; }
.acd-kpi.orange .acd-line-path { stroke: #f59e0b; }
.acd-kpi.orange .acd-line-fill { fill: #f59e0b; }
.acd-icon.blue { background: linear-gradient(180deg, #38bdf8, #2563eb); }
.acd-icon.green { background: linear-gradient(180deg, #4ade80, #16a34a); }
.acd-icon.orange { background: linear-gradient(180deg, #f59e0b, #f97316); }
.acd-icon.red { background: linear-gradient(180deg, #fb7185, #dc2626); }

.acd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr) minmax(280px, 0.8fr);
  gap: 16px;
}

.acd-panel {
  min-height: 220px;
  padding: 18px;
}

.acd-wide {
  grid-column: span 2;
}

.acd-panel-head {
  margin-bottom: 16px;
}

.acd-panel-head h3 {
  margin: 0;
  font-size: 1rem;
}

.acd-panel-head a {
  align-items: center;
  color: #b783ff;
  display: inline-flex;
  font-weight: 800;
  font-size: 0.88rem;
  min-height: 44px;
}

.acd-chart-legend {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #d8dced;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 12px 4px 0;
}

.acd-chart-legend span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.acd-chart-legend i {
  border-radius: 999px;
  display: block;
  height: 8px;
  width: 8px;
}

.acd-chart {
  min-height: 190px;
  padding: 10px 4px 0;
  position: relative;
}

.acd-chart svg {
  display: block;
  height: 190px;
  width: 100%;
}

.acd-zero-axis {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.acd-chart .acd-line-path.income { stroke: #22c55e; }
.acd-chart .acd-line-path.expense { stroke: #ef4444; }
.acd-chart .acd-line-path.net { stroke: #8b5cf6; }
.acd-chart-legend .income { background: #22c55e; }
.acd-chart-legend .expense { background: #ef4444; }
.acd-chart-legend .net { background: #8b5cf6; }
.acd-chart-days {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  margin-top: -4px;
}

.acd-chart-days span {
  /* Was #818798 - 3.69:1 against the violet chart panel. */
  color: var(--bz-text-tertiary);
  font-size: 0.78rem;
  text-align: center;
}

.acd-donut-wrap {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: center;
}

.acd-donut {
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 999px;
  box-shadow: inset 0 0 0 36px rgba(10, 15, 26, 0.96);
}

.acd-donut strong,
.acd-donut small { grid-area: 1 / 1; }
.acd-donut strong { font-size: 1.05rem; }
.acd-donut small { margin-top: 42px; color: #8f96aa; }

.acd-legend,
.acd-list,
.acd-activity,
.acd-deadlines,
.acd-lines {
  display: grid;
  gap: 10px;
}

.acd-legend span,
.acd-list-row,
.acd-activity a,
.acd-deadlines a,
.acd-lines a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  color: #dce1ef;
}

.acd-legend i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.acd-legend b,
.acd-list small,
.acd-activity small,
.acd-deadlines small {
  display: block;
  /* Was #8f96aa - 4.48:1 on the violet accounting panels. */
  color: var(--bz-text-tertiary);
  font-weight: 700;
}

.acd-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

.acd-lines a {
  grid-template-columns: minmax(120px, 1fr) auto;
}

.acd-lines i {
  grid-column: 1 / -1;
  height: 22px;
  overflow: visible;
  position: relative;
}

.acd-lines em {
  display: block;
  height: 100%;
  position: relative;
}

.acd-lines i::before,
.acd-lines em::before,
.acd-lines em::after {
  content: "";
  position: absolute;
}

.acd-lines i::before {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  height: 2px;
  left: 0;
  right: 0;
  top: 50%;
}

.acd-lines em::before {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.15), #ec4899);
  height: 2px;
  left: 0;
  right: 0;
  top: 50%;
}

.acd-lines em::after {
  background: #a855f7;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.14);
  height: 8px;
  right: -4px;
  top: calc(50% - 3px);
  width: 8px;
}

.acd-table {
  overflow-x: auto;
}

.acd-table table {
  width: 100%;
  border-collapse: collapse;
}

.acd-table th,
.acd-table td {
  padding: var(--bz-space-25) var(--bz-space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #dfe4f2;
  text-align: left;
}

.acd-table th {
  color: #8790a3;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.acd-table small {
  display: block;
  margin-top: 4px;
  color: var(--bz-text-tertiary);
}

.acd-pl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin: 0;
}

.acd-pl dt { color: #a7adbd; }
.acd-pl dd { margin: 0; font-weight: 800; }
.acd-pl .pos { color: #4ade80; }
.acd-pl .neg { color: #fb7185; }

.acd-deadlines time {
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  border-radius: 8px;
  background: linear-gradient(180deg, #6d28d9 0 38%, #f8fafc 38% 100%);
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.acd-deadlines time strong {
  color: #111827;
  font-size: 1.1rem;
}

@media (max-width: 1180px) {
  .acd-kpis,
  .acd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acd-wide {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .acd-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .acd-kpis,
  .acd-grid {
    grid-template-columns: 1fr;
  }

  .acd-wide {
    grid-column: auto;
  }

.acd-donut-wrap {
    grid-template-columns: 1fr;
  }
}

/* Client mission control dashboard */
.client-control-dashboard {
  color: #f8fbff;
}

.client-control-dashboard a {
  color: inherit;
  text-decoration: none;
}

.ccd-metric{
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 10%, rgba(14, 165, 233, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(10, 18, 31, 0.98), rgba(7, 12, 22, 0.98));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

.ccd-metric {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  min-height: 138px;
  padding: 18px;
}

.ccd-metric > span{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.28);
}

.ccd-metric b {
  align-self: center;
  color: #e9edf9;
}

.ccd-metric strong {
  grid-column: 2;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.1;
}

.ccd-metric small {
  grid-column: 2;
  color: #a7b0c2;
}

.ccd-metric mark {
  grid-column: 2;
  justify-self: start;
  margin-top: 2px;
  padding: 7px 16px;
  border-radius: 7px;
  background: rgba(139, 92, 246, 0.32);
  color: #f5e8ff;
  font-weight: 800;
}

.ccd-metric i {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}

.ccd-metric em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #c084fc);
}

.ccd-metric.green em{ background: linear-gradient(135deg, #22c55e, #15803d); }
.ccd-metric.blue em{ background: linear-gradient(135deg, #38bdf8, #2563eb); }
.ccd-metric.amber em { background: linear-gradient(90deg, #f59e0b, #f97316); }
.ccd-metric.violet em{ background: linear-gradient(135deg, #8b5cf6, #d946ef); }

/* Consumer gallery dashboard — reference-matched user home */
.client-gallery-dashboard {
  color: #f7f6ff;
  margin: -8px 0 0;
  min-height: calc(100vh - 24px);
}

.client-gallery-dashboard a {
  color: inherit;
  text-decoration: none;
}

.cgd-shell {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(286px, 330px);
}

.cgd-main {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.cgd-drive-card,
.cgd-account-card,
.cgd-side-card,
.cgd-support-card,
.cgd-help-panel {
  background:
    radial-gradient(circle at 68% 42%, rgba(126, 51, 255, 0.20), transparent 32%),
    linear-gradient(135deg, rgba(12, 16, 29, 0.98), rgba(10, 13, 22, 0.98));
  border: 1px solid rgba(137, 115, 255, 0.16);
  border-radius: 8px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.34);
}

.cgd-hero {
  align-items: center;
  background:
    radial-gradient(circle at 72% 58%, rgba(139, 92, 246, 0.22), transparent 34%),
    linear-gradient(135deg, #05070d 0%, #070b12 48%, #0d0b1a 100%);
  border: 1px solid rgba(137, 115, 255, 0.22);
  border-radius: 8px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.34);
  display: grid;
  gap: 28px;
  min-height: 330px;
  overflow: hidden;
  padding: 40px 0 40px 44px;
  position: relative;
}

.cgd-hero-copy {
  max-width: 590px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.cgd-hero-copy h2 {
  color: #ffffff;
  letter-spacing: -0.055em;
  line-height: 1.12;
  margin: 0;
}

.cgd-hero-copy h2 span {
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cgd-hero-copy p {
  color: rgba(232, 226, 245, 0.82);
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 22px 0 0;
  max-width: 530px;
}

.cgd-hero-button {
  align-items: center;
  background: linear-gradient(135deg, #6d3df2, #4c28ad);
  border: 1px solid rgba(172, 122, 255, 0.34);
  border-radius: 7px;
  box-shadow: 0 18px 34px rgba(89, 47, 202, 0.22);
  color: #ffffff;
  display: inline-flex;
  font-weight: 800;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
  min-height: 52px;
  padding: 14px 24px;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.cgd-hero-button:hover {
  border-color: rgba(216, 180, 254, 0.58);
  box-shadow: 0 22px 42px rgba(126, 51, 255, 0.30);
  transform: translateY(-1px);
}

.cgd-hero-button img {
  display: block;
  height: 22px;
  width: 22px;
}

.cgd-hero-copy small {
  align-items: center;
  color: rgba(232, 226, 245, 0.70);
  display: flex;
  font-weight: 650;
  gap: 10px;
  margin-top: 20px;
}

.cgd-hero-copy small svg {
  height: 17px;
  opacity: 0.88;
  width: 17px;
}

.cgd-hero-art {
  align-self: stretch;
  min-height: 260px;
  overflow: hidden;
  position: relative;
}

.cgd-hero-art::before {
  background: linear-gradient(90deg, #070b12 0%, rgba(7, 11, 18, 0) 55%);
  content: "";
  inset: 0 auto 0 0;
  pointer-events: none;
  position: absolute;
  width: 18%;
  z-index: 1;
}

.cgd-hero-art img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  width: 100%;
}

.cgd-product-hero {
  background:
    linear-gradient(90deg, rgba(7, 11, 18, 0.92), rgba(7, 11, 18, 0.68)),
    var(--cgd-hero-banner-image);
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 20px;
  padding: 22px;
}

.cgd-product-hero__head {
  max-width: 760px;
}

.cgd-product-hero__head h2,
.cgd-product-hero__head p {
  margin: 0;
}

.cgd-product-hero__head h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.cgd-product-hero__head > p:last-child {
  color: #b9b5c4;
  line-height: 1.55;
  margin-top: 12px;
  max-width: 680px;
}

.cgd-product-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cgd-product-card {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
  min-height: 390px;
  overflow: hidden;
  position: relative;
}

.cgd-product-card > img,
.cgd-product-card__shade {
  inset: 0;
  position: absolute;
}

.cgd-product-card > img {
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
  width: 100%;
}

.cgd-product-card__shade {
  background: linear-gradient(180deg, rgba(5, 7, 13, 0.12), rgba(5, 7, 13, 0.95) 62%, #05070d 100%);
}

.cgd-product-card__body {
  align-content: end;
  display: grid;
  gap: 8px;
  grid-template-rows: 42px 1.1rem 1.75rem 5.15rem 2.65rem;
  inset: 0;
  padding: 22px;
  position: absolute;
}

.cgd-product-card--with-credit .cgd-product-card__body {
  grid-template-rows: 42px 1.1rem 1.75rem 5.15rem 2.25rem 2.65rem;
}

.cgd-product-card__body > i {
  align-items: center;
  background: rgba(7, 10, 17, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  margin-bottom: 0;
  width: 42px;
}

.cgd-product-card__body > small,
.cgd-product-card__body > b {
  color: #c4becf;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cgd-product-card__body > small {
  align-self: end;
  grid-row: 2;
}

.cgd-product-card__body > strong {
  align-self: start;
  color: #fff;
  font-size: 1.65rem;
  grid-row: 3;
  line-height: 1;
}

.cgd-product-card__body > em {
  align-self: start;
  color: #dad6e1;
  font-size: 0.88rem;
  font-style: normal;
  grid-row: 4;
  line-height: 1.45;
}

.cgd-product-card__body > b {
  align-self: start;
  color: #9ff2d2;
  grid-row: 5;
  letter-spacing: 0;
  text-transform: none;
}

.cgd-product-card__body > span:last-child {
  align-items: flex-end;
  align-self: end;
  color: #fff;
  display: flex;
  font-weight: 850;
  gap: 8px;
  grid-row: 5;
  justify-content: space-between;
  margin-top: 0;
  min-width: 0;
}

.cgd-product-card--with-credit .cgd-product-card__body > span:last-child {
  grid-row: 6;
}

.cgd-product-card:hover,
.cgd-product-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.42);
}

.cgd-product-card:hover > img,
.cgd-product-card:focus-visible > img {
  transform: scale(1.025);
}

.cgd-section,
.cgd-help-panel {
  display: grid;
  gap: 18px;
}

.cgd-section-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.cgd-section-head h3 {
  color: #ffffff;
  font-size: 1.15rem;
  margin: 0;
}

.cgd-section-head a {
  color: #c77dff;
  font-size: 0.9rem;
  font-weight: 800;
}

.cgd-gallery-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cgd-empty-note {
  background: rgba(13, 18, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: #b9b4c7;
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 20px;
}

.cgd-empty-note.compact {
  background: transparent;
  border: 0;
  color: #a9a4b7;
  padding: 6px 0 0;
}

.cgd-album-card {
  background: linear-gradient(180deg, rgba(23, 28, 39, 0.96), rgba(15, 20, 30, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  min-height: 204px;
  overflow: hidden;
  position: relative;
}

.cgd-album-card--text {
  align-content: end;
  border-color: rgba(139, 92, 246, 0.22);
  display: grid;
}

.cgd-album-card--text span {
  padding-top: 82px;
}

.cgd-album-card img {
  display: block;
  height: 138px;
  object-fit: cover;
  width: 100%;
}

.cgd-album-card span {
  display: grid;
  gap: 7px;
  padding: 13px 42px 14px 14px;
}

.cgd-album-card .cgd-album-card__type {
  color: #9ff2d2;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cgd-album-card strong,
.cgd-album-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cgd-album-card small {
  color: #a8a4b5;
}

.cgd-album-card b {
  bottom: 21px;
  color: #f3ecff;
  font-size: 1.35rem;
  font-weight: 500;
  position: absolute;
  right: 16px;
}

.client-my-galleries-page {
  background:
    radial-gradient(circle at top right, rgba(134, 67, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(12, 16, 25, 0.96), rgba(7, 11, 18, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

.client-my-galleries-head {
  align-items: center;
  gap: 28px;
  margin-bottom: 16px;
  padding-bottom: 22px;
}

.client-my-galleries-empty {
  background: rgba(11, 15, 23, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}

.client-my-galleries-toolbar {
  align-items: center;
  background: rgba(9, 13, 21, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 1fr) max-content max-content;
  margin-bottom: 14px;
  padding: 11px 12px;
}

.client-my-galleries-search {
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: #8e889e;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 0 13px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.client-my-galleries-search:focus-within {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(168, 85, 247, 0.72);
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.13);
}

.client-my-galleries-search .command-icon {
  flex: 0 0 auto;
  height: 17px;
  width: 17px;
}

.client-my-galleries-search input {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #f8f7fb;
  font: inherit;
  min-height: 42px;
  min-width: 0;
  outline: 0;
  padding: 0;
  width: 100%;
}

.client-my-galleries-search input:focus,
.client-my-galleries-search input:focus-visible {
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
  outline: 0;
}

.client-my-galleries-search input::placeholder {
  color: #807a8e;
}

.client-my-galleries-sort {
  align-items: center;
  color: #8e889e;
  display: flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 9px;
  white-space: nowrap;
}

.client-my-galleries-sort select {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: #f3f0f8;
  font: inherit;
  min-height: 42px;
  padding: 0 34px 0 12px;
}

.client-my-galleries-count {
  color: #aaa4b8;
  font-size: 0.78rem;
  font-weight: 800;
  margin: 0;
  min-width: 76px;
  text-align: right;
}

.client-gallery-list {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
}

.client-gallery-group-heading {
  align-items: end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 8px;
  padding: 10px 4px 9px;
  grid-column: 1 / -1;
}

.client-gallery-group-heading:first-of-type {
  margin-top: 0;
}

.client-gallery-group-heading div {
  display: grid;
  gap: 2px;
}

.client-gallery-group-heading span {
  color: #f8f7fb;
  font-size: 0.9rem;
  font-weight: 850;
}

.client-gallery-group-heading small {
  color: #777187;
  font-size: 0.74rem;
}

.client-gallery-group-heading strong {
  align-items: center;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.24);
  border-radius: 999px;
  color: #d8b4fe;
  display: inline-flex;
  font-size: 0.72rem;
  justify-content: center;
  min-height: 26px;
  min-width: 30px;
  padding: 0 9px;
}

.client-gallery-row {
  align-content: start;
  background: linear-gradient(135deg, rgba(13, 18, 29, 0.91), rgba(8, 12, 20, 0.86));
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  overflow: hidden;
  transition: background 160ms ease, border-color 160ms ease;
}

.client-gallery-row:hover {
  background: linear-gradient(135deg, rgba(16, 22, 35, 0.96), rgba(10, 14, 24, 0.92));
  border-color: rgba(187, 146, 255, 0.2);
}

.client-gallery-row--new {
  border-color: rgba(93, 255, 185, 0.34);
  box-shadow: inset 0 0 0 1px rgba(93, 255, 185, 0.08);
}

.client-gallery-row__preview {
  aspect-ratio: 16 / 9;
  background: #070b13;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}

.client-gallery-row__preview img,
.client-gallery-row__preview video {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.client-gallery-row__preview video {
  opacity: 0;
  transition: opacity 180ms ease;
}

.client-gallery-row__preview video.is-ready {
  opacity: 1;
}

.client-gallery-row__preview-badge {
  background: rgba(12, 8, 25, 0.88);
  border-color: rgba(216, 180, 254, 0.34);
  bottom: 12px;
  color: #ead7ff;
  left: 12px;
  position: absolute;
}

.client-gallery-row__empty-media,
.client-gallery-row__video-loading {
  align-items: center;
  color: #aaa4b8;
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
}

.client-gallery-row__empty-media .command-icon,
.client-gallery-row__video-loading .command-icon {
  height: 34px;
  width: 34px;
}

.client-gallery-row__video-loading[hidden] {
  display: none;
}

.client-gallery-row__main,
.client-gallery-row__title,
.client-gallery-row__controls,
.client-gallery-row__status,
.client-gallery-row__actions {
  min-width: 0;
}

.client-gallery-row__main {
  padding: 17px 17px 12px;
}

.client-gallery-row__title {
  align-items: center;
  display: flex;
  gap: 10px;
}

.client-gallery-row h3,
.client-gallery-row p {
  margin: 0;
}

.client-gallery-row h3 {
  color: #ffffff;
  font-size: 1.04rem;
  font-weight: 780;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-gallery-row p {
  color: #a9a4b7;
  font-size: 0.9rem;
  margin-top: 5px;
}

.client-gallery-row__details {
  display: grid;
  gap: 8px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 13px 0 0;
}

.client-gallery-row__details div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.client-gallery-row__details dt,
.client-gallery-row__details dd {
  color: #bdb8ca;
  font-size: 0.82rem;
  margin: 0;
}

.client-gallery-row__details dt {
  color: #777187;
  font-weight: 800;
}

.client-gallery-row__controls {
  align-self: end;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  display: grid;
  gap: 12px;
  justify-items: stretch;
  padding: 14px 17px 17px;
}

.client-gallery-row__status,
.client-gallery-row__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  padding-top: 2px;
}

.client-gallery-row__status .badge {
  min-height: 30px;
}

.client-gallery-row__badge--state::before,
.client-gallery-row__badge--source::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 5px;
  margin-right: 6px;
  opacity: 0.86;
  width: 5px;
}

.client-gallery-row__badge--product {
  background: rgba(139, 92, 246, 0.13);
  border-color: rgba(168, 85, 247, 0.32);
  color: #d8b4fe;
}

.client-gallery-row__delete {
  color: #aaa4b7;
}

.client-gallery-row__delete:hover,
.client-gallery-row__delete:focus-visible {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}

.client-gallery-row__actions .primary-button,
.client-gallery-row__actions .secondary-button,
.client-my-galleries-head .primary-button,
.client-my-galleries-empty .primary-button {
  justify-content: center;
  min-height: 38px;
  padding:0 var(--bz-space-35);
}

.client-gallery-row__actions form {
  display: contents;
}

.client-my-galleries-no-results {
  align-items: center;
  background: rgba(10, 14, 22, 0.68);
  border: 1px dashed rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  color: #aaa4b8;
  display: grid;
  gap: 14px;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  min-height: 116px;
  padding: 24px;
}

.client-my-galleries-no-results > .command-icon {
  color: #c084fc;
  height: 28px;
  width: 28px;
}

.client-my-galleries-no-results h3,
.client-my-galleries-no-results p {
  margin: 0;
}

.client-my-galleries-no-results h3 {
  color: #f7f5fb;
  font-size: 1rem;
}

.client-my-galleries-no-results p {
  font-size: 0.86rem;
  margin-top: 4px;
}

@media (max-width: 1050px) {
  .client-gallery-row__controls {
    justify-items: start;
  }

  .client-gallery-row__status,
  .client-gallery-row__actions {
    justify-content: flex-start;
    padding-top: 0;
  }

  .client-gallery-row__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .client-my-galleries-toolbar {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .client-my-galleries-search {
    grid-column: 1 / -1;
  }

  .client-my-galleries-count {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }

  .client-my-galleries-sort {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 520px) {
  .client-my-galleries-actions,
  .client-my-galleries-actions .primary-button,
  .client-my-galleries-actions .secondary-button {
    width: 100%;
  }

  .client-my-galleries-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-my-galleries-count,
  .client-my-galleries-sort {
    grid-column: 1;
    grid-row: auto;
  }

  .client-my-galleries-sort {
    align-items: stretch;
    flex-direction: column;
  }

  .client-my-galleries-sort select {
    width: 100%;
  }

  .client-gallery-row__title {
    align-items: flex-start;
    flex-direction: column;
  }

  .client-gallery-row h3 {
    white-space: normal;
  }

  .client-gallery-row__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-gallery-row__details div {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .client-gallery-row__actions,
  .client-gallery-row__actions .primary-button,
  .client-gallery-row__actions .secondary-button {
    width: 100%;
  }

  .client-my-galleries-no-results {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

.cgd-help-panel {
  background: linear-gradient(180deg, rgba(14, 19, 28, 0.9), rgba(11, 16, 23, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 20px 22px 22px;
}

.cgd-help-panel header h3 {
  font-size: 1.16rem;
  font-weight: 850;
  margin: 0 0 5px;
}

.cgd-help-panel header p {
  color: #b6b2c2;
  margin: 0 0 20px;
}

.cgd-service-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cgd-service-card {
  align-content: start;
  background:
    linear-gradient(90deg, rgba(10, 13, 20, 0.96) 0%, rgba(10, 13, 20, 0.82) 44%, rgba(10, 13, 20, 0.36) 100%),
    var(--cgd-service-bg, linear-gradient(135deg, #1b1229, #0a0f19));
  background-position: center;
  background-size: cover;
  border: 1px solid color-mix(in srgb, var(--cgd-service-accent, #7c3aed) 52%, transparent);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
  color: var(--cgd-service-text, #fff);
  display: grid;
  gap: 10px;
  min-height: 238px;
  overflow: hidden;
  padding: 20px;
}

.cgd-service-card i,
.cgd-activity-list i,
.cgd-support-card > i {
  align-items: center;
  background: linear-gradient(135deg, var(--cgd-service-accent, #7c3aed), var(--cgd-service-accent-end, #9f5cff));
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.cgd-service-card strong {
  font-size: 1.08rem;
  line-height: 1.18;
  margin-top: 8px;
}

.cgd-service-card span {
  color: var(--cgd-service-text, #d8d4df);
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 210px;
  opacity: 0.7;
}

.cgd-service-card em {
  align-items: center;
  background: linear-gradient(90deg, var(--cgd-service-accent, #6d37d4), var(--cgd-service-accent-end, #5124a5));
  border-radius: 6px;
  display: inline-flex;
  font-style: normal;
  font-weight: 850;
  gap: 12px;
  justify-content: space-between;
  margin-top: auto;
  min-height: 42px;
  padding: 0 16px;
  max-width: 100%;
  width: 100%;
}

.cgd-service-card small {
  display: none;
}

.cgd-service__empty {
  border: 1px dashed rgba(137, 115, 255, 0.34);
  border-radius: 8px;
  color: #d8d4df;
  margin: 0;
  padding: 18px;
}

.cgd-side {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

.topbar-account-floating ~ .client-gallery-dashboard .cgd-side {
  padding-top: 76px;
}

.topbar-account-floating ~ .client-gallery-dashboard.cgd-standalone-page {
  padding-top: 76px;
}

.cgd-drive-card,
.cgd-account-card,
.cgd-side-card,
.cgd-support-card {
  padding: 22px;
}

.cgd-account-card {
  display: grid;
  gap: 16px;
}

.cgd-account-head {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.cgd-account-person {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.cgd-account-person img,
.cgd-account-person > span {
  align-items: center;
  /* Was #5b54ff -> #c53eff; white initials on the pink end measured 3.8:1. */
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: 0 0 54px;
  font-size: 0.9rem;
  font-weight: 850;
  height: 54px;
  justify-content: center;
  object-fit: cover;
  overflow: hidden;
  width: 54px;
}

.cgd-account-person div {
  min-width: 0;
}

.cgd-account-person h3 {
  font-size: 1rem;
  line-height: 1.25;
  margin: 0 0 4px;
}

.cgd-account-person p {
  color: #bab5c4;
  font-size: 0.82rem;
  margin: 0;
}

.cgd-account-facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.cgd-account-facts div {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 40px;
  padding-top: 8px;
}

.cgd-account-facts dt,
.cgd-account-facts dd {
  margin: 0;
  min-width: 0;
}

.cgd-account-facts dt {
  color: #a9a3b8;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cgd-account-facts dd {
  color: #fff;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cgd-account-link {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 850;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
}

.cgd-dashboard-metrics {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-bottom: 26px;
}

.cgd-dashboard-metrics .ccd-metric {
  min-height: 132px;
  padding: 16px;
}

.cgd-dashboard-metrics .ccd-metric b,
.cgd-dashboard-metrics .ccd-metric small {
  overflow-wrap: normal;
  word-break: normal;
}

.cgd-current-project-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cgd-current-project-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: grid;
  min-height: 0;
  overflow: hidden;
}

.cgd-current-project-card > div {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px;
}

.cgd-current-project-card h4 {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.28;
  margin: 0;
  overflow-wrap: anywhere;
}

.cgd-project-progress {
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.cgd-project-progress span {
  background: linear-gradient(90deg, #83eef1, #d946ef);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.cgd-current-project-card dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.cgd-current-project-card dl div {
  min-width: 0;
}

.cgd-current-project-card dt,
.cgd-current-project-card dd {
  margin: 0;
}

.cgd-current-project-card dt {
  color: #a9a3b8;
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
}

.cgd-current-project-card dd {
  color: #f8f5ff;
  font-size: 0.86rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.cgd-current-project-card h4 a {
  color: inherit;
  text-decoration: none;
}

.cgd-current-project-card h4 a:hover,
.cgd-current-project-card h4 a:focus {
  color: #c084fc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cgd-drive-card {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 222px;
}

.cgd-drive-card h3,
.cgd-support-card h3 {
  font-size: 1.08rem;
  line-height: 1.32;
  margin: 0 0 14px;
}

.cgd-drive-card p,
.cgd-support-card p {
  color: #bab5c4;
  line-height: 1.52;
  margin: 0 0 18px;
}

.cgd-drive-card a,
.cgd-support-card a {
  background: linear-gradient(135deg, #4c2aa5, #6d37d4);
  border-radius: 6px;
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 850;
  padding: 12px 17px;
}

.cgd-drive-mark {
  display: block;
  filter: drop-shadow(0 18px 28px rgba(66, 133, 244, 0.22));
  height: auto;
  width: 84px;
}

.cgd-activity-list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.cgd-activity-list a {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.cgd-activity-list i {
  border-radius: 7px;
  height: 34px;
  width: 34px;
}

.cgd-activity-list i.pink {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.cgd-activity-list i.blue {
  background: rgba(94, 112, 142, 0.3);
}

.cgd-activity-list span {
  color: #f9f7ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cgd-activity-list small {
  color: #a7a2b2;
  white-space: nowrap;
}

.cgd-support-card {
  min-height: 176px;
}

.cgd-support-card > i {
  background: transparent;
  color: #a855f7;
  height: 34px;
  width: 34px;
}

.cgd-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #aaa5b4;
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  padding: 18px 10px 2px;
}

.cgd-standalone-page {
  align-items: start;
  display: grid;
  gap: 20px;
}

.cgd-create-form,
.cgd-create-metrics article {
  background: rgba(10, 14, 24, 0.82);
  border: 1px solid rgba(137, 115, 255, 0.08);
  border-radius: 8px;
}

.cgd-create-hero {
  align-items: center;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 156px;
  padding: 26px 28px;
}

.cgd-create-hero h2 {
  color: #ffffff;
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 0 0 10px;
}

.cgd-create-hero .muted {
  color: rgba(232, 226, 245, 0.78);
  font-size: 1rem;
  margin: 0;
  max-width: 760px;
}

.cgd-create-hero > img {
  display: block;
  filter: drop-shadow(0 18px 28px rgba(66, 133, 244, 0.22));
  width: 72px;
}

.cgd-create-metrics {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cgd-create-metrics article {
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 18px;
}

.cgd-create-metrics span,
.cgd-create-metrics small {
  color: #a8a3b7;
  font-weight: 750;
}

.cgd-create-metrics strong {
  color: #ffffff;
  font-size: 1.55rem;
}

.cgd-create-form {
  align-content: start;
  align-self: start;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  margin: 0;
  max-width: 760px;
  padding: clamp(28px, 3.2vw, 38px);
}

.cgd-create-form-head h2 {
  align-items: center;
  color: #ffffff;
  display: flex;
  font-size: clamp(2rem, 3vw, 2.75rem);
  gap: 12px;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.cgd-create-form-head h2 span {
  color: #a855f7;
  display: inline-flex;
  flex: 0 0 auto;
}

.cgd-create-form-head h2 .command-icon {
  fill: none;
  height: 28px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 28px;
}

.cgd-create-form-head p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.08rem;
  line-height: 1.55;
  margin: 14px 0 0;
  max-width: 560px;
}

.cgd-create-field {
  display: grid;
  gap: 12px;
}

.cgd-create-field + .cgd-create-field {
  margin-top: 4px;
}

.cgd-create-field-head {
  align-items: end;
  display: flex;
  /* Was a single non-wrapping row. The help link is white-space: nowrap and
     237px wide, so on a 390px screen the row could not get narrow enough and
     the field ran past the right edge of the page. */
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  min-width: 0;
}

@media (max-width: 620px) {
  /* Below this the link goes on its own line and is allowed to break. */
  .cgd-create-field-head a {
    white-space: normal;
  }
}

.cgd-create-field-head > span {
  display: grid;
  gap: 7px;
}

.cgd-create-field-head strong {
  color: #ffffff;
  font-size: 1.18rem;
  line-height: 1.2;
}

.cgd-create-field-head small,
.cgd-create-field-head em {
  color: rgba(232, 226, 245, 0.72);
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
}

.cgd-create-field-head a {
  align-items: center;
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.cgd-create-form input,
.cgd-create-form select,
.cgd-create-form textarea {
  background: rgba(17, 18, 24, 0.82);
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--bz-radius-sm);
  color: #ffffff;
  font-size: 1rem;
  min-height: 54px;
  padding: var(--bz-space-35) var(--bz-space-45);
}

.cgd-create-form input:focus {
  border-color: rgba(168, 85, 247, 0.72);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.14);
  outline: 0;
}

.cgd-drive-input-wrap {
  display: grid;
  position: relative;
}

.cgd-drive-input-wrap input {
  padding-right: 58px;
}

.cgd-drive-input-wrap i {
  align-items: center;
  color: #4ade80;
  display: flex;
  height: 54px;
  justify-content: center;
  position: absolute;
  right: 11px;
  top: 0;
  width: 38px;
}

.cgd-drive-input-wrap .command-icon,
.cgd-create-submit .command-icon,
.cgd-create-secure .command-icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cgd-drive-input-wrap .command-icon {
  height: 24px;
  width: 24px;
}

.cgd-drive-safety-card {
  align-items: center;
  background: rgba(10, 15, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 92px;
  padding: 18px;
}

.cgd-drive-safety-card img {
  display: block;
  height: auto;
  width: 42px;
}

.cgd-drive-safety-card span {
  display: grid;
  gap: 5px;
}

.cgd-drive-safety-card > span:only-child {
  grid-column: 1 / -1;
}

.cgd-drive-safety-card strong {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.25;
}

.cgd-drive-safety-card small {
  color: rgba(232, 226, 245, 0.74);
  font-size: 0.95rem;
  line-height: 1.35;
}

.cgd-create-balance-warning {
  align-items: start;
  background: rgba(86, 33, 55, 0.72);
  border: 1px solid rgba(244, 114, 182, 0.38);
  border-radius: 8px;
  color: #ffe4ef;
  display: grid;
  gap: 14px;
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 14px 16px;
}

.cgd-create-balance-warning .command-icon {
  fill: none;
  height: 22px;
  margin-top: 2px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 22px;
}

.cgd-create-balance-warning span {
  display: grid;
  gap: 4px;
}

.cgd-create-balance-warning strong {
  color: #ffffff;
  font-size: 0.98rem;
  line-height: 1.3;
}

.cgd-create-balance-warning small {
  color: rgba(255, 228, 239, 0.86);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.45;
}

.cgd-product-choice {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
  padding: 14px;
}

.cgd-product-choice-title {
  color: rgba(232, 226, 245, 0.76);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.cgd-product-option {
  align-items: center;
  background: rgba(8, 12, 20, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 18px minmax(0, 1fr);
  margin: 0;
  padding: 12px 14px;
}

.cgd-product-option:has(input:checked) {
  background: rgba(124, 58, 237, 0.16);
  border-color: rgba(168, 85, 247, 0.46);
}

.cgd-product-option input {
  flex: 0 0 20px;
  height: 20px;
  margin: 0;
  /* Was 18px, and narrower still when the flex row squeezed it. The 44px hit
     area comes from the label around it (see bz-ux.css). */
  min-height: 20px;
  min-width: 20px;
  padding: 0;
  width: 20px;
}

.cgd-product-option span {
  display: grid;
  gap: 3px;
}

.cgd-product-option strong {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.2;
}

.cgd-product-option small {
  color: rgba(232, 226, 245, 0.68);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.25;
}

.cgd-create-page .bz-wizard-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  max-width: 100%;
  overflow: visible;
}

.cgd-create-page .bz-wizard-step {
  min-width: 0;
  padding-left: 20px;
  padding-right: 16px;
  white-space: normal;
  width: 100%;
}

@media (max-width: 760px) {
  .cgd-create-page .bz-wizard-step {
    gap: 4px;
    min-height: 46px;
    padding: 6px 10px 6px 14px;
  }

  .cgd-create-page .bz-wizard-step b {
    font-size: 9px;
    line-height: 1.15;
  }
}

.cgd-create-form .form-actions {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.cgd-create-form .primary-button {
  border: 0;
  border-radius: var(--bz-radius-sm);
  min-height: 62px;
  width: 100%;
}

.cgd-create-submit {
  align-items: center;
  /* The last stop was #8b5cf6, which carries white at only 4.23:1. */
  background: linear-gradient(135deg, #5826b5 0%, #6d28d9 58%, #7a53ed 100%);
  box-shadow: 0 14px 28px rgba(124, 58, 237, 0.28);
  display: grid;
  font-size: 1.08rem;
  font-weight: 900;
  grid-template-columns: 1fr auto;
  padding: 0 22px;
}

.cgd-create-submit span {
  justify-self: center;
}

.cgd-create-submit .command-icon {
  height: 22px;
  width: 22px;
}

.cgd-create-submit:disabled,
.cgd-create-submit[aria-disabled="true"] {
  background: rgba(70, 66, 78, 0.9);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.78);
  cursor: not-allowed;
}

.cgd-create-secure {
  align-items: center;
  color: rgba(232, 226, 245, 0.76);
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 650;
  gap: 10px;
  margin: 2px 0 0;
}

.cgd-create-secure .command-icon {
  height: 18px;
  width: 18px;
}

.profile-hub {
  color: #f8fbff;
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
}

.profile-hub a {
  color: inherit;
  text-decoration: none;
}

.profile-hub-head,
.profile-hub-actions,
.profile-identity,
.profile-hero-stats,
.profile-panel-head {
  align-items: center;
  display: flex;
  gap: 14px;
}

.profile-hub-head {
  justify-content: space-between;
}

.profile-hub-head h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin: 0 0 6px;
}

.profile-hub-head p:last-child,
.profile-identity p,
.profile-panel-head a,
.profile-schedule-list small,
.profile-notification-list small,
.profile-project-card small,
.profile-hero-stats span,
.profile-qr-card span {
  color: #a7b0c2;
}

.profile-hub-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.profile-hero-card,
.profile-panel {
  background:
    radial-gradient(circle at 18% 10%, rgba(124, 58, 237, 0.22), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(14, 22, 38, 0.97), rgba(7, 12, 22, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32);
}

.profile-hero-card {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(260px, 1.15fr) minmax(280px, 1.2fr) auto;
  padding: 24px;
}

.profile-identity img,
.profile-identity > span {
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  flex: 0 0 auto;
  height: 132px;
  width: 132px;
}

.profile-identity img {
  object-fit: cover;
}

.profile-identity > span {
  align-items: center;
  /* Was #7c3aed -> #38bdf8; white initials on the sky-blue end measured
     2.14:1 at 35px - the biggest text in the product and the least readable. */
  background: linear-gradient(135deg, #7c3aed, #0369a1);
  color: #ffffff;
  display: flex;
  font-size: 2.2rem;
  font-weight: 800;
  justify-content: center;
}

.profile-identity h3 {
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
  margin-bottom: 7px;
}

.profile-identity b {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 8px;
  color: #fbbf24;
  display: inline-flex;
  margin-top: 8px;
  padding: 7px 10px;
}

.profile-hero-stats {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  justify-content: space-around;
  padding: 0 22px;
}

.profile-hero-stats article,
.profile-stat-link {
  color: inherit;
  display: grid;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}

.profile-hero-stats strong {
  color: #ffffff;
  font-size: 1.1rem;
}

.profile-qr-card {
  align-self: center;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}

.profile-qr-card img {
  background: #ffffff;
  border-radius: 8px;
  height: 130px;
  padding: 8px;
  width: 130px;
}

.profile-qr-card code {
  color: #c084fc;
  font-size: 0.75rem;
  word-break: break-all;
}

.profile-content-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
}

.profile-panel {
  padding: 18px;
}

.profile-panel-head {
  justify-content: space-between;
  margin-bottom: 16px;
}

.profile-panel-head h3 {
  margin: 0;
}

.profile-panel-head a {
  align-items: center;
  color: #c084fc;
  display: inline-flex;
  gap: 6px;
  font-weight: 800;
}

.profile-project-grid,
.profile-side-stack,
.profile-schedule-list,
.profile-notification-list {
  display: grid;
  gap: 12px;
}

.profile-project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-project-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  display: grid;
  min-height: 0;
  overflow: hidden;
}

.profile-project-card > div {
  display: grid;
  gap: 7px;
  padding: 14px;
}

.profile-project-card strong {
  color: #ffffff;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.profile-project-card em {
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  display: block;
  height: 7px;
  overflow: hidden;
}

.profile-project-card em i {
  background: linear-gradient(90deg, #8b5cf6, #d946ef);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.profile-project-card b {
  color: #ffffff;
}

.profile-schedule-list a,
.profile-notification-list a {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-height: 68px;
  padding: 12px;
}

.profile-schedule-list a {
  grid-template-columns: 54px minmax(0, 1fr);
}

.profile-schedule-list time {
  background: rgba(124, 58, 237, 0.22);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 8px;
  color: #ffffff;
  font-weight: 800;
  padding: 8px 6px;
  text-align: center;
}

.profile-schedule-list strong,
.profile-schedule-list small,
.profile-notification-list strong,
.profile-notification-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-notification-list a {
  grid-template-columns: 42px minmax(0, 1fr);
}

.profile-notification-list span {
  align-items: center;
  background: rgba(124, 58, 237, 0.24);
  border-radius: 10px;
  color: #c084fc;
  display: flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.support-route-card {
  padding: 13px 14px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 8px;
  background: rgba(88, 28, 135, 0.16);
}

.support-route-card p {
  margin: 4px 0 0;
  color: #9da7ba;
}

.support-route-card.compact {
  padding: 10px 12px;
}

.solo-project-view {
  display: grid;
  gap: 20px;
  color: #f8fafc;
}

.solo-project-view a {
  color: inherit;
  text-decoration: none;
}

.solo-project-head,
.solo-progress-summary{
  display: flex;
  align-items: center;
  gap: 14px;
}

.solo-project-head {
  justify-content: space-between;
}

.solo-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a8b0c2;
  font-weight: 750;
}

.solo-breadcrumb strong {
  color: #fff;
}

.solo-hero-card{
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 85% -10%, rgba(168, 85, 247, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(17, 24, 39, 0.94), rgba(2, 12, 27, 0.94));
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
}

.solo-hero-card {
  display: grid;
  gap: 24px;
  padding: 24px;
}

.solo-project-title h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.02;
}

.solo-project-title h2 span {
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.28);
  color: #eadcff;
  font-size: 0.95rem;
}

.solo-project-title p:last-child {
  max-width: 780px;
  color: #b6c0d4;
  font-size: 1rem;
}

.solo-progress-summary {
  display: grid;
  grid-template-columns: 110px minmax(180px, 1fr) minmax(160px, 0.25fr) minmax(210px, 0.35fr);
  align-items: center;
}

.solo-progress-summary strong {
  display: block;
  color: #b15cff;
  font-size: 2.2rem;
  line-height: 1;
}

.solo-progress-summary span,
.solo-progress-summary small,
.solo-progress-summary em{
  color: #9aa6bb;
}

.solo-progress-summary em,
.solo-owner-card em {
  display: block;
  margin-top: 4px;
  color: #38bdf8;
  font-style: normal;
}

.solo-progress-bar {
  overflow: hidden;
  height: 11px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
}

.solo-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #d946ef);
}

.solo-progress-bar.finance span {
  background: linear-gradient(90deg, #22c55e, #86efac);
}

.solo-due-card,
.solo-owner-card {
  min-height: 72px;
  padding-left: 22px;
  border-left: 1px solid rgba(148, 163, 184, 0.2);
}

.solo-owner-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
}

.solo-owner-card small,
.solo-owner-card em {
  grid-column: 2;
}

.solo-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  /* Same 2.1:1 sky-blue end as .profile-identity. */
  background: linear-gradient(135deg, #7c3aed, #0369a1);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}

.solo-owner-card .solo-avatar {
  grid-row: 1 / span 3;
}

.cpgee-chat-thread {
  display: grid;
  gap: 14px;
  max-height: min(920px, 74vh);
  overflow: auto;
  padding: 22px;
}

.cpgee-chat-bubble {
  align-items: start;
  background: rgba(248, 250, 252, 0.96);
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: 8px;
  color: #172033;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  max-width: min(860px, 100%);
  padding: 16px;
}

.cpgee-chat-bubble.is-mine {
  background: rgba(236, 253, 245, 0.98);
  border-color: rgba(134, 239, 172, 0.86);
  justify-self: end;
}

.cpgee-chat-message {
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  width: min(980px, 100%);
}

.cpgee-chat-message.is-mine {
  background: rgba(236, 253, 245, 0.98);
}

.cpgee-chat-message-body {
  min-width: 0;
}

.cpgee-chat-message-meta {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.cpgee-chat-message-meta span {
  display: grid;
  gap: 2px;
}

.cpgee-chat-message-meta em {
  background: rgba(34, 197, 94, 0.12);
  border-radius: 999px;
  color: #166534;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  padding: 5px 10px;
}

.cpgee-chat-bubble .solo-avatar {
  color: #fff;
  margin-top: 2px;
}

.cpgee-chat-bubble strong {
  color: #14213a;
}

.cpgee-chat-bubble p {
  color: #27344f;
  margin: 6px 0 0;
}

.cpgee-chat-bubble small {
  color: #536179;
  display: block;
  font-weight: 750;
}

.cpgee-chat-text {
  color: #24324c;
  line-height: 1.55;
  margin-top: 10px;
  overflow-wrap: anywhere;
}

.cpgee-chat-text a {
  color: #2563eb;
  font-weight: 850;
}

.cpgee-chat-embed,
.cpgee-chat-text .drive-preview,
.cpgee-chat-text .native-drive-gallery {
  margin-top: 12px;
}

.cpgee-chat-embed {
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  overflow: hidden;
}

.cpgee-chat-embed-head {
  align-items: center;
  color: #e5e7eb;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
}

.cpgee-chat-embed-head a {
  align-items: center;
  color: #bfdbfe;
  display: inline-flex;
  font-size: 0.9rem;
  gap: 6px;
  text-decoration: none;
}

.cpgee-chat-youtube iframe,
.cpgee-chat-text .drive-preview iframe {
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  min-height: clamp(220px, 46vw, 420px);
  width: 100%;
}

.cpgee-chat-text .drive-preview {
  background: #fff;
  border-color: rgba(191, 219, 254, 0.72);
  color: #172033;
}

.cpgee-chat-text .drive-preview-head {
  color: #172033;
}

.client-project-tabs {
  margin-top: 18px;
}

.client-project-tabs .project-detail-tab-list {
  position: relative;
  z-index: 1;
}

.project-contract-client-tab,
.project-invoice-client-tab,
.project-client-details-tab {
  display: grid;
  gap: 16px;
}

.project-contract-client-tab .contract-document-card,
.project-contract-client-tab .contract-client-sign-form {
  width: 100%;
}

.contract-client-sign-form {
  background: rgba(15, 23, 42, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: clamp(16px, 2.5vw, 24px);
}

.contract-reader-status {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 1180px) {
  .solo-progress-summary{
    grid-template-columns: 1fr;
  }

  .solo-due-card,
  .solo-owner-card{
    padding-left: 0;
    border-left: 0;
  }

}

@media (max-width: 760px) {
  .solo-project-head{
    align-items: stretch;
    flex-direction: column;
  }
  .cpgee-chat-thread{
    padding: 16px;
  }

  .cpgee-chat-bubble {
    grid-template-columns: 1fr;
  }

  .cpgee-chat-message-meta {
    display: grid;
  }

  .solo-hero-card{
    padding: 16px;
  }

}

@media (max-width: 1320px) {
  .cgd-dashboard-metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cgd-shell,
  .cgd-current-project-grid,
  .cgd-hero {
    grid-template-columns: 1fr;
  }

  .topbar-account-floating ~ .client-gallery-dashboard .cgd-side {
    padding-top: 0;
  }

  .topbar-account-floating ~ .client-gallery-dashboard.cgd-standalone-page {
    padding-top: 86px;
  }

  .cgd-hero {
    padding: 34px;
  }

  .cgd-hero-art {
    margin: 0 -16px -16px;
    min-height: 280px;
  }

  .cgd-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cgd-side .cgd-account-card {
    grid-column: 1 / -1;
  }

  .cgd-drive-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .profile-hero-card,
  .profile-content-grid {
    grid-template-columns: 1fr;
  }

  .profile-hero-stats {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0 0;
  }

}

@media (max-width: 760px) {

  .cgd-dashboard-metrics,
  .profile-project-grid{
    grid-template-columns: 1fr;
  }

  .profile-hub-head,
  .profile-identity,
  .profile-hero-stats,
  .profile-hub-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .cgd-hero {
    min-height: 0;
    padding: 28px;
  }

  .cgd-hero-copy h2 {
    font-size: clamp(2.2rem, 10vw, 3.1rem);
  }

  .cgd-hero-copy p {
    font-size: 1rem;
  }

  .cgd-hero-button {
    width: 100%;
  }

  .cgd-hero-art {
    min-height: 220px;
  }

  .cgd-gallery-grid,
  .cgd-product-grid,
  .cgd-service-grid,
  .cgd-side,
  .cgd-create-metrics,
  .cgd-create-hero {
    grid-template-columns: 1fr;
  }

  .cgd-create-hero {
    align-items: start;
  }

  .cgd-create-hero .cgd-hero-button {
    width: 100%;
  }

  .cgd-service-card em,
  .cgd-drive-card a,
  .cgd-support-card a {
    width: 100%;
  }

  .cgd-footer {
    flex-direction: column;
    gap: 8px;
  }

  .cgd-current-project-card dl {
    grid-template-columns: 1fr;
  }

  .profile-project-card {
    grid-template-columns: 1fr;
  }

}

.login-screen-v2 {
  background: #03060b;
  color: #f7f4ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}

.login-shell-v2 {
  align-content: center;
  display: grid;
  gap: clamp(0px, 0.6vw, 6px);
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  justify-items: center;
  margin: 0;
  min-height: 100dvh;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(14px, 2.2vw, 30px) clamp(18px, 4vw, 48px) 44px;
  place-items: center;
  position: relative;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #03060b;
  box-shadow: none;
}

.login-showcase {
  max-width: 100%;
  min-height: auto;
  min-width: 0;
  overflow: visible;
  position: static;
  width: min(520px, 100%);
  z-index: 1;
}

.login-showcase-bg {
  background:
    radial-gradient(circle at 50% 18%, rgba(145, 57, 255, var(--login-bg-glow-alpha, 0.22)), transparent 32%),
    linear-gradient(180deg, rgba(3, 6, 11, var(--login-bg-top-alpha, 0.54)), rgba(3, 6, 11, var(--login-bg-mid-alpha, 0.66)) 52%, rgba(3, 6, 11, var(--login-bg-bottom-alpha, 0.74))),
    linear-gradient(90deg, rgba(3, 6, 11, var(--login-bg-side-alpha, 0.74)), rgba(3, 6, 11, var(--login-bg-center-alpha, 0.28)) 52%, rgba(3, 6, 11, var(--login-bg-side-alpha, 0.74))),
    /* The fallback used to be url("../sample-assets/login/...") - a file that
       is not in the tree, and at a path one level above where the other three
       sample-assets references looked. index.php always sets
       --login-bg-image, so the fallback is only ever reached if that fails;
       a flat panel is better than a broken image box. */
    var(--login-bg-image, linear-gradient(180deg, #0d0d10, #06070b)) center / cover no-repeat;
  inset: 0;
  position: absolute;
  transform: scale(1.03);
  z-index: 0;
}

.login-showcase-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  padding: 0;
  position: relative;
  text-align: center;
  z-index: 1;
}

.login-logo-mark {
  display: block;
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 22px rgba(218, 71, 255, 0.72))
    drop-shadow(0 18px 36px rgba(126, 40, 255, 0.5))
    drop-shadow(-8px 18px 24px rgba(91, 255, 174, 0.28));
  height: clamp(86px, 12.4vh, 123px);
  margin: 0 auto -2px;
  max-width: min(123px, 35vw);
  object-fit: contain;
  width: clamp(86px, 12.4vh, 123px);
}

.login-copyright {
  bottom: 14px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  left: 50%;
  margin-top: 0;
  pointer-events: none;
  position: fixed;
  text-align: center;
  transform: translateX(-50%);
  width: min(100% - 32px, 560px);
  z-index: 1;
}

.login-auth-side {
  background: transparent;
  display: block;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  position: relative;
  width: min(560px, 100%);
  z-index: 2;
}

.login-language {
  align-items: center;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  gap: 10px;
  position: fixed;
  right: clamp(18px, 4vw, 42px);
  top: clamp(16px, 3vw, 30px);
  z-index: 5;
}

.login-language .command-icon {
  height: 21px;
  width: 21px;
}

.login-language select {
  appearance: none;
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding-right: var(--bz-space-55);
}

.login-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(151, 71, 255, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(18, 28, 45, var(--login-card-top-alpha, 0.52)), rgba(5, 11, 22, var(--login-card-bottom-alpha, 0.36))),
    rgba(8, 13, 24, 0.42);
  backdrop-filter: blur(var(--login-card-blur, 12px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--login-card-blur, 12px)) saturate(150%);
  border: 1px solid rgba(203, 213, 225, 0.22);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 30px 100px rgba(0, 0, 0, 0.44);
  color: #f5f3fb;
  margin: 0 auto;
  max-width: 520px;
  min-width: 0;
  padding: clamp(24px, 2.5vw, 36px);
  width: 100%;
}

.login-card-head h2 {
  color: #fff;
  font-size: clamp(30px, 2.5vw, 38px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 10px;
}

.login-card-head p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  margin: 0 0 24px;
}

.login-form-v2 {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.login-form-v2 label {
  color: rgba(255, 255, 255, 0.92);
  display: grid;
  font-size: 13px;
  gap: 8px;
}

.login-input-wrap {
  align-items: center;
  background: rgba(3, 7, 14, 0.72);
  border: 1px solid rgba(203, 213, 225, 0.22);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 26px 1fr;
  min-height: 50px;
  min-width: 0;
  padding: 0 14px;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.login-input-wrap:focus-within {
  background: rgba(5, 10, 20, 0.88);
  border-color: rgba(184, 117, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(160, 61, 255, 0.18), 0 10px 28px rgba(92, 44, 180, 0.18);
}

.login-input-wrap .command-icon {
  color: rgba(255, 255, 255, 0.82);
  height: 22px;
  width: 22px;
}

.login-input-wrap input {
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff;
  font: inherit;
  font-size: var(--bz-text-body);
  font-weight: 700;
  line-height: 1.2;
  min-height: 0;
  min-width: 0;
  outline: 0;
  padding:0 0 0 var(--bz-space-15);
  min-width: 0;
  width: 100%;
}

.login-options,
.login-remember,
.login-provider-stack,
.login-create {
  max-width: 100%;
  min-width: 0;
}

.login-options a,
.login-remember span,
.login-create {
  overflow-wrap: anywhere;
}

.login-input-wrap input:focus {
  border: 0 !important;
  box-shadow: none !important;
}

/* The input inside is borderless by design, so the box you can see carries
   the focus ring. Before this the login fields showed nothing at all when
   they were focused from the keyboard. */
.login-input-wrap:focus-within {
  border-color: var(--bz-focus-ring);
  box-shadow: 0 0 0 3px var(--bz-focus-ring);
}

.login-screen input:-webkit-autofill,
.login-screen input:-webkit-autofill:hover,
.login-screen input:-webkit-autofill:focus,
.login-screen input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  box-shadow: 0 0 0 1000px rgba(3, 7, 14, 0.78) inset !important;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

.login-input-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.login-input-wrap.password-field {
  grid-template-columns: 26px 1fr 34px;
}

.login-input-wrap .password-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  display: flex;
  height: 34px;
  justify-content: center;
  min-height: 34px;
  padding: 0;
  position: static;
  width: 34px;
}

.login-options {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: -6px;
}

.login-options a,
.login-create a {
  color: #c45cff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-remember {
  align-items: center;
  display: flex !important;
  gap: 10px !important;
}

.login-remember input {
  accent-color: #8740ff;
  height: 20px;
  width: 20px;
}

.login-submit {
  background: linear-gradient(135deg, #8b4dff 0%, #6c2fff 48%, #9f4cff 100%);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(122, 65, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  height: 50px;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
}

.login-submit:hover {
  background: linear-gradient(135deg, #9b62ff 0%, #7742ff 48%, #b25dff 100%);
  box-shadow: 0 18px 38px rgba(122, 65, 255, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.login-submit .command-icon {
  height: 22px;
  width: 22px;
}

.login-divider {
  align-items: center;
  color: rgba(255, 255, 255, 0.62);
  display: grid;
  font-size: 15px;
  gap: 18px;
  grid-template-columns: 1fr auto 1fr;
  margin: 18px 0;
}

.login-divider::before,
.login-divider::after {
  background: rgba(255, 255, 255, 0.16);
  content: "";
  height: 1px;
}

.login-provider-stack {
  display: grid;
  gap: 12px;
}

.login-provider-stack button {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  color: #141722;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: var(--bz-text-body);
  font-weight: 800;
  gap: var(--bz-space-45);
  height: 48px;
  justify-content: center;
}

.login-provider-stack span {
  font-weight: 800;
}

.provider-g {
  color: #4285f4;
}

.login-provider-stack .provider-facebook {
  background: linear-gradient(180deg, #1167d9, #0754c1);
  color: #fff;
}

.login-provider-status {
  color: rgba(235, 228, 255, 0.82);
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0 0;
  min-height: 20px;
  text-align: center;
}

.login-create {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  margin: 18px 0 0;
  text-align: center;
}

.login-screen-v2 .alert {
  border-radius: 8px;
  margin-bottom: 24px;
}

@media (max-width: 1100px) {
  .login-shell-v2 {
    grid-template-columns: 1fr;
    margin: 0;
    min-height: 100vh;
    width: 100%;
  }

  .login-showcase {
    min-height: auto;
  }

  .login-showcase-content {
    min-height: auto;
    padding-bottom: 0;
  }

  .login-auth-side {
    background: transparent;
    padding: 0;
  }
}

@media (max-width: 720px) {
  .login-shell-v2 {
    border-radius: 0;
    margin: 0;
    min-height: 100vh;
    width: 100%;
  }

  .login-showcase-content {
    min-height: auto;
    padding: 18px 20px 0;
  }

  .login-logo-mark {
    height: min(96px, 25vw);
    width: min(96px, 25vw);
  }

  .login-copyright {
    display: none;
  }

  .login-auth-side {
    display: block;
    padding: 18px 16px 32px;
  }

  .login-auth-side .login-language {
    display: none;
  }

  .login-card {
    padding: 24px 18px;
  }

  .login-options {
    align-items: center;
    flex-direction: row;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .login-options {
    align-items: flex-start;
    flex-direction: column;
  }
}

.contracts-command-page {
  color: #f8fafc;
  display: grid;
  gap: 22px;
  max-width: 100%;
  min-width: 0;
}

.contracts-hero,
.contract-metrics-grid,
.contracts-grid-layout,
.contract-create-panel {
  max-width: 100%;
  min-width: 0;
  width: min(100%, 1560px);
}

.contracts-hero {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px) auto;
}

.contracts-hero h1 {
  font-size: 30px;
  margin: 0 0 6px;
}

.contracts-hero p,
.contract-create-panel p {
  color: #aeb6c7;
  margin: 0;
}

.contract-search {
  align-items: center;
  background: rgba(12, 19, 32, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
}

.contract-search input {
  background: transparent;
  border: 0;
  color: #f8fafc;
  outline: 0;
  width: 100%;
}

.contract-new-button {
  align-items: center;
  /* Was #7c3aed -> #a855f7; white on the light end measured 3.96:1. */
  background: var(--brand-gradient);
  border: 0;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-weight: 800;
  gap: 9px;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  text-decoration: none;
}

.contract-metrics-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
}

.contract-metric-card,
.contract-table-card,
.contract-side-card,
.contract-create-panel {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(8, 13, 24, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.contract-metric-card {
  align-items: center;
  border-radius: 10px;
  display: flex;
  gap: 16px;
  min-height: 116px;
  padding: 18px;
}

.contract-metric-card > span {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.contract-metric-card small,
.contract-metric-card em {
  color: #aeb6c7;
  display: block;
  font-style: normal;
}

.contract-metric-card strong {
  display: block;
  font-size: 28px;
  margin: 5px 0;
}

.contract-metric-card.violet > span { background: rgba(124, 58, 237, 0.28); color: #a78bfa; }
.contract-metric-card.blue > span { background: rgba(37, 99, 235, 0.28); color: #60a5fa; }
.contract-metric-card.amber > span { background: rgba(217, 119, 6, 0.28); color: #fbbf24; }
.contract-metric-card.red > span { background: rgba(225, 29, 72, 0.28); color: #fb7185; }
.contract-metric-card.green > span { background: rgba(22, 163, 74, 0.28); color: #4ade80; }

.contracts-grid-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.contract-table-card,
.contract-side-card,
.contract-create-panel {
  border-radius: 10px;
  min-width: 0;
}

.contract-tabs {
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  display: flex;
  gap: 22px;
  min-height: 64px;
  overflow-x: auto;
  padding: 0 18px;
}

.contract-tabs a {
  color: #cbd5e1;
  flex: 0 0 auto;
  font-weight: 800;
  padding: 22px 0 18px;
  position: relative;
  text-decoration: none;
}

.contract-tabs a.active {
  color: #fff;
}

.contract-tabs a.active::after {
  background: #a855f7;
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
}

.contract-toolbar {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}

.contract-toolbar a {
  align-items: center;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  color: #cbd5e1;
  display: inline-flex;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
}

.contract-toolbar a:hover,
.contract-toolbar a:focus {
  border-color: rgba(168, 85, 247, 0.46);
  color: #ffffff;
}

.contract-toolbar .icon-only {
  justify-content: center;
  padding: 0;
  width: 40px;
}

.contract-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.contract-table {
  border-collapse: collapse;
  min-width: 1040px;
  width: 100%;
}

.contract-table th {
  color: #8b94a7;
  font-size: var(--bz-text-supporting);
  letter-spacing: 0.04em;
  padding: var(--bz-space-45) var(--bz-space-35);
  text-align: left;
  text-transform: uppercase;
}

.contract-table td {
  border-top: 1px solid rgba(148, 163, 184, 0.09);
  color: #e5e7eb;
  padding: var(--bz-space-4) var(--bz-space-35);
  vertical-align: middle;
}

.contract-table small,
.contract-title-cell small,
.contract-party-cell small,
.contract-table td > small {
  color: #9aa4b5;
  display: block;
  margin-top: var(--bz-space-1);
}

.contract-title-cell,
.contract-party-cell {
  align-items: center;
  display: flex;
  gap: 12px;
}

.contract-title-cell i {
  align-items: center;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.32);
  border-radius: 8px;
  color: #a855f7;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.contract-party-avatar {
  border-radius: 50%;
  height: 34px;
  object-fit: cover;
  width: 34px;
}

.contract-party-avatar.fallback {
  align-items: center;
  background: #f8fafc;
  color: #3b0764;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
}

.contract-status {
  border-radius: 6px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 8px;
}

.contract-status.active { background: rgba(22, 163, 74, 0.18); border: 1px solid rgba(34, 197, 94, 0.36); color: #4ade80; }
.contract-status.pending { background: rgba(37, 99, 235, 0.16); border: 1px solid rgba(59, 130, 246, 0.34); color: #60a5fa; }
.contract-status.expiring { background: rgba(217, 119, 6, 0.16); border: 1px solid rgba(245, 158, 11, 0.34); color: #fbbf24; }
.contract-status.expired { background: rgba(225, 29, 72, 0.16); border: 1px solid rgba(244, 63, 94, 0.34); color: #fb7185; }
.contract-status.archived { background: rgba(100, 116, 139, 0.16); border: 1px solid rgba(148, 163, 184, 0.3); color: #cbd5e1; }

.contract-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.contract-actions a,
.contract-actions button {
  align-items: center;
  background: rgba(148, 163, 184, 0.1);
  border: 0;
  border-radius: var(--bz-radius-pill);
  color: #e5e7eb;
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.contract-sign-form {
  display: grid;
  gap: 12px;
  margin: 0;
}

.contract-signature-row td {
  background: rgba(15, 23, 42, 0.82);
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  padding: var(--bz-space-4) var(--bz-space-45);
}

.contract-signature-pad {
  background: rgba(2, 6, 23, 0.36);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.contract-signature-pad .signature-canvas {
  max-height: 220px;
}

.contract-signature-row .primary-btn {
  justify-self: flex-start;
}

.contract-table-footer {
  align-items: center;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  color: #aeb6c7;
  display: flex;
  justify-content: space-between;
  padding: 16px 18px;
}

.contract-pagination {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.contract-pagination a,
.contract-pagination span,
.contract-pagination strong {
  align-items: center;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  min-width: 34px;
  padding: 0 10px;
  text-decoration: none;
}

.contract-pagination a:hover {
  border-color: rgba(168, 85, 247, 0.55);
  color: #c084fc;
}

.contract-pagination strong {
  background: rgba(124, 58, 237, 0.55);
  border-color: rgba(168, 85, 247, 0.55);
}

.contract-pagination .disabled {
  /* Was #64748b at 55% opacity - 3.3:1. A page number you cannot go to still
     has to be readable, or you cannot tell which page you are on. */
  color: #94a3b8;
  opacity: 0.75;
}

.contract-side-stack {
  display: grid;
  gap: 14px;
}

.contract-side-card {
  padding: 18px;
}

.contract-side-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.contract-side-head h3,
.contract-help-card h3 {
  font-size: 16px;
  margin: 0;
}

.contract-side-head a,
.contract-help-card a {
  align-items: center;
  color: #c084fc;
  display: inline-flex;
  font-weight: 800;
  min-height: 44px;
  text-decoration: none;
}

.contract-template-list,
.contract-activity-list {
  display: grid;
  gap: 8px;
}

.contract-template-list button,
.contract-template-list a,
.contract-activity-list a {
  align-items: center;
  background: transparent;
  border: 0;
  color: #f8fafc;
  display: grid;
  gap: var(--bz-space-25);
  grid-template-columns: 24px 1fr auto;
  padding: var(--bz-space-2) 0;
  text-align: left;
  text-decoration: none;
}

.contract-template-list a.active {
  color: #d8b4fe;
}

.contract-template-list b {
  background: rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  color: #cbd5e1;
  padding: 4px 8px;
}

.contract-activity-list i {
  align-items: center;
  background: rgba(34, 197, 94, 0.14);
  border-radius: 50%;
  color: #4ade80;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.contract-activity-list small {
  color: #9aa4b5;
  display: block;
  margin-top: 4px;
}

.contract-side-button {
  align-items: center;
  border: 1px solid rgba(168, 85, 247, 0.5);
  border-radius: 8px;
  color: #c084fc;
  display: inline-flex;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  min-height: 42px;
  text-decoration: none;
  width: 100%;
}

.contract-side-button.primary {
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
  border-color: transparent;
  color: #fff;
}

.contract-help-card p {
  color: #aeb6c7;
  line-height: 1.5;
}

.contract-create-panel {
  display: grid;
  gap: 22px;
  grid-template-columns: 300px 1fr;
  padding: 22px;
}

.contract-create-form {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contract-create-form label {
  color: #cbd5e1;
  display: grid;
  font-weight: 800;
  gap: 8px;
}

.contract-create-form input,
.contract-create-form select,
.contract-create-form textarea {
  background: rgba(8, 13, 24, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--bz-radius-sm);
  color: #f8fafc;
  min-height: 44px;
  padding: var(--bz-space-25) var(--bz-space-3);
}

.contract-create-form .full {
  grid-column: 1 / -1;
}

.contract-template-editor-panel {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(30, 27, 75, 0.72));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  padding: 22px;
}

.contract-template-editor-head {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.contract-template-editor-head h2 {
  margin: 0 0 8px;
}

.contract-template-editor-head p {
  color: #aeb6c7;
  line-height: 1.5;
  margin: 0;
}

.contract-template-editor-status,
.contract-template-flag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contract-template-editor-status span,
.contract-template-flag-list span {
  align-items: center;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: #dbe4f0;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  min-height: 28px;
  padding: 4px 10px;
}

.contract-template-editor-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}

.contract-template-editor-grid-clean {
  grid-template-columns: minmax(0, 1fr);
}

.contract-template-editor-meta,
.contract-template-editor-workspace {
  background: rgba(8, 13, 24, 0.54);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: 16px;
}

.contract-template-editor-meta h3 {
  font-size: 14px;
  margin: 0 0 10px;
}

.contract-template-editor-meta dl {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
}

.contract-template-editor-meta dt {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-template-editor-meta dd {
  color: #f8fafc;
  margin: 2px 0 0;
}

.contract-template-variable-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  max-height: 260px;
  overflow: auto;
}

.contract-template-variable-list button {
  background: rgba(124, 58, 237, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.26);
  border-radius: var(--bz-radius-pill);
  color: #d8b4fe;
  cursor: pointer;
  font-size: var(--bz-text-supporting);
  font-weight: 800;
  min-height: 30px;
  padding: var(--bz-space-1) var(--bz-space-25);
}

.contract-template-variable-list small {
  color: #94a3b8;
}

.contract-template-editor-form,
.contract-template-approve-form {
  display: grid;
  gap: 12px;
}

.contract-template-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contract-template-toolbar button,
.contract-template-approve-form button {
  align-items: center;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--bz-radius-sm);
  color: #f8fafc;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  gap: var(--bz-space-2);
  min-height: 36px;
  padding: var(--bz-space-2) var(--bz-space-3);
}

.contract-template-toolbar label,
.contract-template-notes {
  color: #cbd5e1;
  display: grid;
  font-weight: 800;
  gap: 8px;
}

.contract-template-toolbar select,
.contract-template-notes textarea,
.contract-template-approve-form input {
  background: rgba(8, 13, 24, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--bz-radius-sm);
  color: #f8fafc;
  min-height: 40px;
  padding: var(--bz-space-25) var(--bz-space-3);
}

.contract-template-editor-textarea,
.contract-template-readonly {
  background: rgba(3, 7, 18, 0.92);
  border: 1px solid rgba(168, 85, 247, 0.24);
  border-radius: 8px;
  color: #f8fafc;
  font: 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-height: 560px;
  overflow: auto;
  padding: 16px;
  white-space: pre-wrap;
  width: 100%;
}

.contract-template-editor-actions,
.contract-template-approve-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.contract-template-settings {
  background: rgba(8, 13, 24, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  overflow: hidden;
}

.contract-template-settings summary {
  align-items: center;
  color: #f8fafc;
  cursor: pointer;
  display: flex;
  font-weight: 900;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
}

.contract-template-settings .contract-template-editor-meta {
  border: 0;
  border-radius: 0;
}

.contract-client-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
}

.contract-client-list,
.contract-document-card,
.contract-client-sign-panel,
.contract-client-signed-note {
  background:
    radial-gradient(circle at 85% -10%, rgba(168, 85, 247, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(17, 24, 39, 0.96), rgba(2, 12, 27, 0.94));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
}

.contract-client-list {
  align-self: start;
  display: grid;
  overflow: hidden;
}

.contract-client-list-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
}

.contract-client-list-head small {
  color: #9aa6bb;
}

.contract-client-list > a {
  display: grid;
  gap: 4px 10px;
  grid-template-columns: 28px 1fr;
  padding: 14px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  color: #e5e7eb;
  text-decoration: none;
}

.contract-client-list > a.active,
.contract-client-list > a:hover {
  background: rgba(124, 58, 237, 0.28);
  color: #fff;
}

.contract-client-list > a span {
  grid-row: 1 / span 2;
}

.contract-client-list > a small {
  color: #9aa6bb;
}

.contract-client-reader {
  display: grid;
  gap: 16px;
}

.contract-document-card {
  padding: clamp(20px, 3vw, 34px);
}

.contract-document-head {
  align-items: start;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding-bottom: 18px;
}

.contract-document-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 0 0 8px;
}

.contract-document-head p {
  color: #aeb6c7;
  margin: 0;
}

.contract-signature-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.contract-signature-status span,
.contract-client-signed-note {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.contract-signature-status span {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: #cbd5e1;
  min-height: 36px;
  padding: 0 12px;
}

.contract-signature-status span.done,
.contract-client-signed-note {
  color: #86efac;
}

.contract-readable-body {
  background: rgba(248, 250, 252, 0.98);
  border-radius: 8px;
  color: #0f172a;
  font: 16px/1.72 Georgia, "Times New Roman", serif;
  padding: clamp(20px, 4vw, 46px);
}

.contract-readable-body h3 {
  color: #0f172a;
  font: 800 1.25rem/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
  margin: 28px 0 10px;
}

.contract-readable-body h3:first-child {
  margin-top: 0;
}

.contract-readable-body h4 {
  color: #111827;
  font: 800 1.05rem/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
  margin: 22px 0 8px;
}

.contract-readable-body p,
.contract-readable-body li {
  margin: 0 0 12px;
}

.contract-readable-body ul {
  margin: 0 0 16px 22px;
  padding: 0;
}

.contract-readable-body hr {
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.42);
  margin: 18px 0;
}

.contract-signature-evidence {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 14px;
}

.contract-signature-evidence-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
}

.contract-signature-evidence-card figcaption {
  display: grid;
  gap: 2px;
}

.contract-signature-evidence-card small,
.contract-signature-evidence-card span {
  color: rgba(203, 213, 225, 0.72);
}

.contract-signature-evidence-card img {
  background:
    linear-gradient(transparent 76%, rgba(148, 163, 184, 0.22) 77%, transparent 78%),
    linear-gradient(180deg, #0f172a, #020617);
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 8px;
  display: block;
  max-height: 168px;
  min-height: 96px;
  object-fit: contain;
  padding: 10px;
  width: 100%;
}

.contract-client-sign-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.contract-client-sign-panel .primary-button {
  justify-self: start;
}

.contract-client-signed-note {
  padding: 16px 18px;
}

@media (max-width: 1180px) {
  .contracts-hero,
  .contracts-grid-layout,
  .contract-create-panel,
  .contract-client-layout,
  .contract-template-editor-grid {
    grid-template-columns: 1fr;
  }

  .contract-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .contracts-hero {
    align-items: stretch;
  }

  .contracts-command-page {
    overflow: hidden;
  }

  .contract-new-button {
    width: 100%;
  }

  .contract-metrics-grid,
  .contract-create-form {
    grid-template-columns: 1fr;
  }

  .contract-tabs {
    gap: 16px;
  }

  .contract-template-editor-head,
  .contract-document-head,
  .contract-template-editor-actions,
  .contract-template-approve-form {
    align-items: stretch;
    flex-direction: column;
  }
}

.client-gallery-page {
  color: #f8fafc;
  display: grid;
  gap: 22px;
}

.client-gallery-hero,
.client-gallery-metrics,
.client-gallery-layout {
  width: min(100%, 1440px);
}

.client-gallery-hero {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr minmax(280px, 430px);
}

.client-gallery-hero h1 {
  font-size: 34px;
  margin: 4px 0 8px;
}

.client-gallery-hero p,
.client-gallery-toolbar p,
.client-gallery-body p {
  color: #aeb6c7;
  margin: 0;
}

.client-gallery-search {
  align-items: center;
  background: rgba(12, 19, 32, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
}

.client-gallery-search input {
  background: transparent;
  border: 0;
  color: #f8fafc;
  outline: 0;
  width: 100%;
}

.client-gallery-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.client-gallery-metric,
.client-gallery-sidebar article,
.client-gallery-main {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(8, 13, 24, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.client-gallery-metric {
  align-items: center;
  border-radius: 10px;
  display: flex;
  gap: 14px;
  min-height: 104px;
  padding: 16px;
}

.client-gallery-metric i {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.client-gallery-metric strong {
  display: block;
}

.client-gallery-metric small,
.client-gallery-metric em {
  color: #aeb6c7;
  display: block;
  font-style: normal;
  margin-top: 5px;
}

.client-gallery-metric.purple i { background: rgba(124, 58, 237, 0.26); color: #a78bfa; }
.client-gallery-metric.blue i { background: rgba(37, 99, 235, 0.24); color: #60a5fa; }
.client-gallery-metric.green i { background: rgba(22, 163, 74, 0.24); color: #4ade80; }
.client-gallery-metric.amber i { background: rgba(217, 119, 6, 0.24); color: #fbbf24; }
.client-gallery-metric.pink i { background: rgba(219, 39, 119, 0.24); color: #f472b6; }

.client-gallery-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 250px 1fr;
}

.client-gallery-sidebar {
  display: grid;
  gap: 14px;
}

.client-gallery-sidebar article,
.client-gallery-main {
  border-radius: 10px;
}

.client-gallery-sidebar article {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.client-gallery-sidebar h3 {
  font-size: 14px;
  margin: 0 0 6px;
}

.client-gallery-sidebar a {
  align-items: center;
  border-radius: 8px;
  color: #cbd5e1;
  display: flex;
  font-weight: 800;
  gap: 10px;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 10px;
  text-decoration: none;
}

.client-gallery-sidebar a.active,
.client-gallery-sidebar a:hover {
  background: rgba(124, 58, 237, 0.24);
  color: #fff;
}

.client-gallery-sidebar b {
  background: rgba(148, 163, 184, 0.12);
  border-radius: 999px;
  color: #e5e7eb;
  min-width: 26px;
  padding: 3px 8px;
  text-align: center;
}

.client-gallery-info-card,
.client-gallery-quick-card,
.client-gallery-link-card,
.client-gallery-activity-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.12), transparent 36%),
    rgba(8, 13, 24, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 12px;
  padding: 16px;
}

.client-gallery-info-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.client-gallery-info-head a {
  color: #c084fc;
  font-size: 12px;
  font-weight: 800;
  min-height: 0;
  padding: 0;
}

.client-gallery-info-card dl {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1fr);
  margin: 0;
}

.client-gallery-info-card dt,
.client-gallery-link-card code,
.client-gallery-activity-card p,
.client-gallery-activity-card small {
  color: #aeb8cc;
}

/* Wrapping, not clipping: bz-ux.css lets these values run to a second line
   rather than hiding the end of an address or a file name. */
.client-gallery-info-card dd {
  color: #f8fafc;
  margin: 0;
  min-width: 0;
  text-align: right;
}

.client-gallery-quick-card > div {
  display: grid;
  gap: 8px;
}

.client-gallery-quick-card a,
.client-gallery-link-card a {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.14);
  justify-content: center;
  min-height: 38px;
}

.client-gallery-link-card code {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  display: block;
  font-size: 12px;
  overflow: hidden;
  padding: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-gallery-activity-card p,
.client-gallery-activity-card strong,
.client-gallery-activity-card small {
  margin: 0;
}

.client-gallery-main {
  padding: 18px;
}

.client-gallery-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.client-gallery-toolbar h2 {
  font-size: 18px;
  margin: 0 0 5px;
}

.client-gallery-toolbar select {
  background: rgba(8, 13, 24, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--bz-radius-sm);
  color: #f8fafc;
  min-height: 40px;
  padding:0 var(--bz-space-3);
}

.client-gallery-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.client-gallery-card {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  overflow: hidden;
}

.client-gallery-empty {
  align-items: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.22), transparent 42%),
    rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  color: #f8fafc;
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  justify-items: center;
  min-height: 260px;
  padding: 32px;
  text-align: center;
}

.client-gallery-empty i {
  align-items: center;
  background: rgba(124, 58, 237, 0.22);
  border: 1px solid rgba(168, 85, 247, 0.32);
  border-radius: 50%;
  color: #c084fc;
  display: inline-flex;
  height: 56px;
  justify-content: center;
  width: 56px;
}

.client-gallery-empty strong {
  font-size: 20px;
}

.client-gallery-empty p {
  color: #aeb8cc;
  margin: 0;
}

.client-gallery-preview {
  background: #050914;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.client-gallery-preview img,
.client-gallery-preview video {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.client-gallery-lightbox-trigger {
  color: inherit;
  display: block;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.client-gallery-lightbox-trigger span {
  align-items: center;
  background: rgba(8, 13, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  bottom: 12px;
  color: #f8fafc;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  gap: 6px;
  opacity: 0;
  padding: 7px 11px;
  position: absolute;
  right: 12px;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.client-gallery-lightbox-trigger:hover span,
.client-gallery-lightbox-trigger:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.client-gallery-lightbox {
  backdrop-filter: blur(10px);
}

.client-gallery-preview .drive-preview {
  border: 0;
  border-radius: 0;
  height: 100%;
  min-height: 100%;
}

.client-gallery-preview .drive-preview iframe {
  min-height: 100%;
}

.client-gallery-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.client-gallery-body > span {
  color: #c084fc;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.client-gallery-body h3 {
  font-size: 16px;
  margin: 0;
}

.client-gallery-meta,
.client-gallery-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.client-gallery-meta a,
.client-gallery-actions a {
  color: #c084fc;
  font-weight: 800;
  text-decoration: none;
}

.client-gallery-meta small,
.client-gallery-actions small,
.client-gallery-actions span {
  color: #aeb6c7;
}

.client-gallery-actions a,
.client-gallery-actions span {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.my-galleries-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.my-gallery-card {
  background: rgba(15, 23, 42, 0.76);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #f8fafc;
  display: grid;
  overflow: hidden;
}

.my-gallery-card__preview {
  aspect-ratio: 16 / 9;
  background: #08111f;
  min-height: 180px;
  overflow: hidden;
  position: relative;
}

.my-gallery-card__preview img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.my-gallery-card__preview .badge {
  position: absolute;
  right: 12px;
  top: 12px;
}

.my-gallery-card__empty-media {
  align-items: center;
  color: #aeb8cc;
  display: flex;
  height: 100%;
  justify-content: center;
}

.my-gallery-card__empty-media .command-icon {
  height: 42px;
  width: 42px;
}

.my-gallery-card__body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.my-gallery-card__title-row,
.my-gallery-card__actions {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.my-gallery-card__title-row h3 {
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 5px;
  overflow-wrap: anywhere;
}

.my-gallery-card__title-row small,
.my-gallery-card__details,
.my-gallery-card__notice,
.my-gallery-card__more span {
  color: #aeb8cc;
}

.my-gallery-card__stats,
.my-gallery-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.my-gallery-card__stats span {
  background: rgba(8, 13, 24, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  min-width: 86px;
  padding: 8px 10px;
}

.my-gallery-card__stats strong {
  display: block;
  font-size: 18px;
}

.my-gallery-card__details {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.my-gallery-card__details div {
  background: rgba(8, 13, 24, 0.5);
  border-radius: 8px;
  padding: 9px 10px;
}

.my-gallery-card__details dt,
.my-gallery-card__details dd,
.my-gallery-card__notice {
  margin: 0;
}

.my-gallery-card__details dt {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.my-gallery-card__details dd {
  color: #f8fafc;
  font-size: 13px;
  margin-top: 4px;
}

.my-gallery-card__actions {
  flex-wrap: wrap;
}

.my-gallery-card__disabled-action {
  cursor: default;
  opacity: 0.8;
}

.my-gallery-card__more {
  position: relative;
}

.my-gallery-card__more summary {
  align-items: center;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
}

.my-gallery-card__more a,
.my-gallery-card__more span {
  display: block;
  margin-top: 8px;
}

.my-gallery-card__more a {
  color: #c084fc;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 1120px) {
  .client-gallery-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-gallery-layout {
    grid-template-columns: 1fr;
  }

  .client-gallery-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-gallery-info-card,
  .client-gallery-quick-card,
  .client-gallery-link-card,
  .client-gallery-activity-card {
    align-self: stretch;
  }

  .client-gallery-info-card,
  .client-gallery-link-card {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .client-gallery-hero,
  .client-gallery-metrics,
  .client-gallery-sidebar {
    grid-template-columns: 1fr;
  }

  .client-gallery-toolbar,
  .client-gallery-meta,
  .client-gallery-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .client-gallery-quick-card > div {
    grid-template-columns: 1fr;
  }

  .client-gallery-info-card,
  .client-gallery-link-card {
    grid-column: auto;
  }
}

.client-cinema-page {
  color: #f8fafc;
  display: grid;
  gap: 18px;
  width: min(100%, 1440px);
}

.client-cinema-topbar a {
  align-items: center;
  color: #f8fafc;
  display: inline-flex;
  font-weight: 800;
  gap: 8px;
  text-decoration: none;
}

.client-cinema-layout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) 330px;
}

.client-cinema-main {
  display: grid;
  gap: 20px;
}

.client-cinema-player {
  aspect-ratio: 16 / 8.2;
  background:
    radial-gradient(circle at 50% 20%, rgba(168, 85, 247, 0.18), transparent 42%),
    #030712;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  scroll-margin-top: 24px;
}

.client-cinema-player video,
.client-cinema-player .drive-preview {
  border: 0;
  border-radius: 0;
  height: 100%;
  width: 100%;
}

.client-cinema-player video {
  display: block;
  object-fit: cover;
}

.client-cinema-player .drive-preview iframe {
  height: calc(100% - 48px);
  min-height: 320px;
}

.client-cinema-title-row {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.client-cinema-title-row h1 {
  font-size: 28px;
  margin: 0 0 12px;
}

.client-cinema-title-row p {
  color: #cbd5e1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.client-cinema-title-row p span,
.client-cinema-actions a,
.client-cinema-rail a {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.client-cinema-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.client-cinema-actions a,
.client-cinema-rail a {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #f8fafc;
  font-weight: 800;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  text-decoration: none;
}

.client-cinema-actions a.primary {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-color: rgba(236, 72, 153, 0.42);
  box-shadow: 0 14px 34px rgba(139, 92, 246, 0.28);
  color: #fff;
}

.client-cinema-description {
  color: #cbd5e1;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 820px;
}

.client-cinema-info-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.client-cinema-info-grid article,
.client-cinema-related,
.client-cinema-rail article {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(8, 13, 24, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.client-cinema-info-grid article,
.client-cinema-related {
  padding: 18px;
}

.client-cinema-info-grid h3,
.client-cinema-related h2,
.client-cinema-rail h3 {
  align-items: center;
  display: flex;
  font-size: 16px;
  gap: 8px;
  margin: 0 0 16px;
}

.client-cinema-info-grid dl {
  display: grid;
  gap: 12px 24px;
  grid-template-columns: 120px 1fr;
  margin: 0;
}

.client-cinema-info-grid dt {
  color: #9aa4b5;
}

.client-cinema-info-grid dd {
  margin: 0;
}

.client-cinema-info-grid ul,
.client-cinema-rail ul {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.client-cinema-info-grid li {
  display: grid;
  gap: 3px;
}

.client-cinema-info-grid li span,
.client-cinema-rail p {
  color: #aeb6c7;
}

.client-cinema-related > div {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.client-cinema-related a {
  align-items: center;
  color: #f8fafc;
  display: grid;
  gap: 12px;
  grid-template-columns: 120px 1fr;
  text-decoration: none;
}

.client-cinema-related img {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  width: 100%;
}

.client-cinema-related small {
  color: #9aa4b5;
  display: block;
  margin-top: 4px;
}

.client-cinema-rail {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 18px;
}

.client-cinema-rail article {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.client-cinema-price {
  color: #a855f7;
  font-size: 30px;
}

.client-cinema-rail li {
  align-items: center;
  color: #e5e7eb;
  display: flex;
  gap: 9px;
}

.client-cinema-rail li .command-icon {
  color: #a855f7;
}

.client-cinema-rail a.primary {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  border-color: transparent;
}

.studio-rental-page {
  background:
    radial-gradient(circle at 76% 0, rgba(124, 58, 237, 0.18), transparent 34%),
    linear-gradient(145deg, #050812, #08111f 48%, #050812);
  border-radius: 10px;
  color: #f8fafc;
  min-height: 100vh;
  padding: 18px;
}

.studio-topbar {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(260px, 1fr) auto;
  margin-bottom: 18px;
}

.studio-search {
  align-items: center;
  background: rgba(8, 13, 24, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  min-height: 50px;
  padding: 0 16px;
}

.studio-search input {
  background: transparent;
  border: 0;
  color: #f8fafc;
  flex: 1;
  min-width: 0;
  outline: 0;
}

.studio-search a {
  align-items: center;
  color: #c084fc;
  display: inline-flex;
  justify-content: center;
  min-height: 28px;
  text-decoration: none;
  width: 28px;
}

.studio-search a:hover,
.studio-search a:focus {
  color: #ffffff;
  outline: none;
}

.studio-topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.studio-topbar nav a,
.studio-category-tabs a,
.studio-card-grid article a,
.studio-book-form button,
.studio-selected-mini a {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--bz-radius-sm);
  color: #f8fafc;
  display: inline-flex;
  font-weight: 800;
  gap: var(--bz-space-2);
  justify-content: center;
  min-height: 42px;
  padding:0 var(--bz-space-35);
  text-decoration: none;
}

.studio-topbar nav a.active,
.studio-category-tabs a.active,
.studio-book-form button,
.studio-card-grid article a {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  border-color: rgba(168, 85, 247, 0.65);
}

.studio-rental-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 360px;
}

.studio-main {
  display: grid;
  gap: 18px;
}

.studio-hero,
.studio-picker,
.studio-benefits,
.studio-booking-side section,
.studio-summary {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(8, 13, 24, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24);
}

.studio-hero {
  display: grid;
  min-height: 330px;
  overflow: hidden;
  position: relative;
}

.studio-hero img {
  filter: brightness(0.78) saturate(1.08);
  grid-area: 1 / 1;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.studio-hero::after {
  background: linear-gradient(90deg, rgba(5, 8, 18, 0.94) 0%, rgba(5, 8, 18, 0.66) 34%, rgba(5, 8, 18, 0.08) 74%);
  content: "";
  grid-area: 1 / 1;
  pointer-events: none;
}

.studio-hero > div {
  align-self: center;
  grid-area: 1 / 1;
  max-width: 460px;
  padding: 34px;
  position: relative;
  z-index: 1;
}

.studio-hero p,
.studio-section-head a,
.studio-selected-mini a,
.studio-summary strong b,
.studio-card-grid h3 span {
  color: #a855f7;
}

.studio-hero p {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.studio-hero h1 {
  font-size: 48px;
  line-height: 1.03;
  margin: 0 0 14px;
  max-width: 420px;
}

.studio-hero span {
  color: #dbe4f0;
  display: block;
  font-size: 18px;
  line-height: 1.45;
}

.studio-hero ul,
.studio-benefits,
.studio-category-tabs,
.studio-time-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.studio-hero ul {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.studio-hero li,
.studio-benefits span {
  align-items: center;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  display: inline-flex;
  gap: 9px;
  min-height: 46px;
  padding: 0 14px;
}

.studio-picker,
.studio-benefits {
  padding: 18px;
}

.studio-section-head {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.studio-section-head h2,
.studio-booking-side h3,
.studio-summary h3 {
  font-size: 18px;
  margin: 0;
}

.studio-section-head a {
  font-weight: 800;
  text-decoration: none;
}

.studio-category-tabs {
  margin-bottom: 18px;
}

.studio-category-tabs a {
  background: rgba(8, 13, 24, 0.74);
}

.studio-card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.studio-card-grid article {
  background: rgba(8, 13, 24, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  display: grid;
  overflow: hidden;
  position: relative;
}

.studio-card-grid article.selected {
  border-color: rgba(168, 85, 247, 0.78);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.18), 0 22px 55px rgba(88, 28, 135, 0.25);
}

.studio-card-grid article > img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.studio-save-form {
  margin: 0;
}

.studio-save-form button {
  align-items: center;
  background: rgba(8, 13, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--bz-radius-circle);
  color: #f8fafc;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 40px;
}

.studio-save-form.is-saved button {
  background: rgba(168, 85, 247, 0.9);
  border-color: rgba(216, 180, 254, 0.75);
}

.studio-card-grid article > div {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.studio-card-grid h3 {
  align-items: center;
  display: flex;
  gap: 6px;
  margin: 0;
}

.studio-card-grid p {
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0;
}

.studio-card-grid small,
.studio-selected-mini small,
.studio-booking-side p,
.studio-summary small,
.studio-summary p {
  color: #9aa4b5;
}

.studio-card-grid article div div {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
}

.studio-card-grid strong {
  display: grid;
  font-size: 22px;
}

.studio-card-grid strong small {
  font-size: 13px;
  font-weight: 700;
}

.studio-card-grid em {
  color: #cbd5e1;
  font-style: normal;
  grid-column: 1;
}

.studio-card-grid article a {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 110px;
}

.studio-benefits {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
}

.studio-benefits span {
  align-items: flex-start;
  flex-direction: column;
  min-height: 88px;
}

.studio-benefits .command-icon {
  color: #a855f7;
}

.studio-benefits b {
  margin-top: 2px;
}

.studio-benefits small {
  color: #9aa4b5;
  line-height: 1.35;
}

.studio-booking-side {
  align-content: start;
  display: grid;
  gap: 14px;
  position: sticky;
  top: 18px;
}

.studio-booking-side section,
.studio-summary {
  padding: 18px;
}

.studio-booking-side ol {
  counter-reset: studio-step;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 18px 0;
  padding: 0;
}

.studio-booking-side ol li {
  color: #9aa4b5;
  display: grid;
  font-size: 12px;
  gap: 6px;
  justify-items: center;
}

.studio-booking-side ol li::before {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 50%;
  content: counter(studio-step);
  counter-increment: studio-step;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.studio-booking-side ol li.active {
  color: #f8fafc;
}

.studio-booking-side ol li.active::before {
  background: #7c3aed;
  border-color: #a855f7;
}

.studio-selected-mini {
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 12px;
  grid-template-columns: 58px 1fr auto;
  padding: 14px 0;
}

.studio-selected-mini img {
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  width: 58px;
}

.studio-selected-mini span {
  display: grid;
  gap: 3px;
}

.studio-selected-mini a {
  border: 0;
  min-height: auto;
  padding: 0;
}

.studio-book-form {
  display: grid;
  gap: 14px;
}

.studio-book-form label {
  color: #e5e7eb;
  display: grid;
  font-weight: 800;
  gap: 8px;
}

.studio-book-form input[type="date"],
.studio-book-form select {
  background: rgba(5, 8, 18, 0.84);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--bz-radius-sm);
  color: #f8fafc;
  min-height: 42px;
  padding:0 var(--bz-space-3);
}

.studio-calendar-strip {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(7, 1fr);
}

.studio-calendar-strip b {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  text-align: center;
}

.studio-calendar-strip em,
.studio-calendar-strip span {
  align-items: center;
  border-radius: 8px;
  color: #9aa4b5;
  display: inline-flex;
  font-style: normal;
  height: 30px;
  justify-content: center;
}

.studio-calendar-strip span {
  color: #e5e7eb;
}

.studio-calendar-strip span.active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-weight: 800;
}

.studio-time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.studio-time-grid label {
  align-items: center;
  background: rgba(5, 8, 18, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #e5e7eb;
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: 38px;
}

.studio-time-grid input {
  inline-size: 1px;
  opacity: 0;
  position: absolute;
}

.studio-time-grid label.active,
.studio-time-grid label:has(input:checked) {
  background: #7c3aed;
  border-color: #a855f7;
}

.studio-book-form button {
  border: 0;
  cursor: pointer;
  min-height: 50px;
  width: 100%;
}

.studio-summary {
  display: grid;
  gap: 12px;
}

.studio-summary > strong,
.studio-summary p,
.studio-summary small {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin: 0;
}

.studio-summary > strong:last-of-type {
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  color: #f8fafc;
  font-size: 18px;
  padding-top: 10px;
}

.studio-summary small {
  align-items: center;
  justify-content: flex-start;
}

.studio-summary small .command-icon {
  color: #22c55e;
}

@media (max-width: 1180px) {
  .studio-rental-grid,
  .client-cinema-layout,
  .client-cinema-info-grid {
    grid-template-columns: 1fr;
  }

  .studio-booking-side,
  .client-cinema-rail {
    position: static;
  }

  .client-cinema-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .studio-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .studio-rental-page {
    padding: 12px;
  }

  .studio-topbar,
  .studio-card-grid,
  .studio-benefits,
  .studio-selected-mini {
    grid-template-columns: 1fr;
  }

  .studio-topbar nav {
    justify-content: stretch;
  }

  .studio-topbar nav a,
  .studio-category-tabs a {
    width: 100%;
  }

  .studio-hero {
    min-height: 390px;
  }

  .studio-hero > div {
    padding: 24px;
  }

  .client-cinema-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .client-cinema-actions,
  .client-cinema-rail {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .client-cinema-actions a,
  .client-cinema-rail a {
    width: 100%;
  }

  .studio-hero h1 {
    font-size: 36px;
  }

  .studio-card-grid article div div {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .studio-card-grid article a {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .studio-time-grid,
  .studio-booking-side ol {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-cinema-player {
    aspect-ratio: 16 / 10;
  }

  .client-cinema-title-row,
  .client-cinema-title-row p,
  .client-cinema-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .client-cinema-actions a,
  .client-cinema-rail a {
    width: 100%;
  }

  .client-cinema-info-grid dl,
  .client-cinema-related a {
    grid-template-columns: 1fr;
  }
}

/* Client payment gateway */
.payment-gateway-page {
  display: grid;
  gap: 18px;
  color: #12172a;
}

.payment-back-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6d28d9;
  font-weight: 800;
  text-decoration: none;
}

.payment-gateway-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 18px;
  align-items: start;
}

.payment-main-stack,
.payment-summary-rail {
  display: grid;
  gap: 18px;
}

.payment-project-card,
.payment-checkout-card,
.payment-history-card,
.payment-summary-card {
  background: #ffffff;
  border: 1px solid #e5e7f0;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.payment-project-card {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
  padding: 24px;
  align-items: center;
}

.payment-project-card img {
  width: 100%;
  aspect-ratio: 1.22;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.payment-project-card h2,
.payment-checkout-card h2,
.payment-history-card h2,
.payment-summary-card h3 {
  margin: 0;
  color: #0f172a;
  letter-spacing: 0;
}

.payment-project-card p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  color: #334155;
  font-weight: 700;
}

.payment-checkout-card,
.payment-history-card,
.payment-summary-card {
  padding: 24px;
}

.payment-checkout-card {
  scroll-margin-top: 24px;
}

.payment-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.payment-easy-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.payment-easy-steps span {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #334155;
  display: inline-flex;
  gap: 9px;
  min-height: 46px;
  padding: 9px 12px;
  font-weight: 800;
}

.payment-easy-steps b {
  align-items: center;
  background: #7c3aed;
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 24px;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.payment-confirmation,
.payment-pending-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
  color: #14532d;
}

.payment-confirmation {
  margin-top: 4px;
}

.payment-pending-note {
  margin-bottom: 18px;
  border-color: #fed7aa;
  background: #fff7ed;
  color: #7c2d12;
}

.payment-confirmation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
}

.payment-confirmation h3,
.payment-confirmation p,
.payment-pending-note strong,
.payment-pending-note small {
  margin: 0;
  color: inherit;
}

.payment-confirmation h3 {
  font-size: 1.25rem;
  line-height: 1.25;
}

.payment-confirmation p:not(.eyebrow) {
  margin-top: 8px;
  color: #166534;
  font-weight: 700;
}

.payment-pending-note span,
.payment-pending-note small {
  display: block;
}

.payment-pending-note small {
  margin-top: 4px;
  color: #9a3412;
  font-weight: 700;
}

.payment-confirmation-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.payment-confirmation-details div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.payment-confirmation-details dt {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.payment-confirmation-details dd {
  margin: 0;
  color: #0f172a;
  font-weight: 850;
}

.payment-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.payment-amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 20px;
}

.payment-amount-row label,
.payment-gateway-form label {
  color: #1f2937;
  font-weight: 800;
}

.payment-amount-row input,
.payment-coupon input {
  margin-top: var(--bz-space-2);
  width: 100%;
  min-height: 54px;
  border: 1px solid #d8d9e6;
  border-radius: var(--bz-radius-sm);
  padding:0 var(--bz-space-4);
  font-size: 1.08rem;
  font-weight: 800;
  color: #111827;
  background: #f8fafc;
}

.payment-gateway-form h3 {
  margin: 0 0 12px;
  color: #111827;
}

.payment-method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.payment-method-option {
  position: relative;
  align-items: center;
  display: flex;
  gap: 14px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  width: 100%;
}

.payment-method-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method-option:has(input:checked) {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.payment-method-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f1eaff;
  color: #6d28d9;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
}

.payment-method-icon.card {
  background: linear-gradient(135deg, #111827, #312e81);
  color: #f8fafc;
}

.payment-method-icon.gcash {
  background: linear-gradient(135deg, #0ea5ff, #2563eb);
  color: #ffffff;
  font-size: 1.2rem;
}

.payment-method-icon.maya {
  background: linear-gradient(135deg, #00a66a, #10b981);
  color: #ffffff;
  font-size: 0.75rem;
}

.payment-method-icon.bank {
  background: #eef2ff;
  color: #334155;
}

.payment-method-icon.paymongo {
  background: #ecfdf5;
  color: #059669;
  font-size: 1.15rem;
}

.payment-method-icon.cash {
  background: #f5f3ff;
  color: #6d28d9;
}

.payment-method-option strong,
.payment-method-option small {
  display: block;
  overflow-wrap: anywhere;
  white-space: normal;
}

.payment-method-option strong {
  color: #111827;
  margin-bottom: 4px;
}

.payment-method-option small {
  color: #64748b;
  line-height: 1.35;
}

.payment-method-option i {
  flex: 0 0 18px;
  margin-left: auto;
  width: 18px;
  height: 18px;
  border: 2px solid #94a3b8;
  border-radius: 50%;
}

.payment-method-option:has(input:checked) i {
  border-color: #7c3aed;
  box-shadow: inset 0 0 0 4px #ffffff;
  background: #7c3aed;
}

.admin-payment-form,
.cashier-quick-payment-form {
  display: grid;
  gap: 16px;
}

.admin-payment-balance {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid #d8d9e6;
  border-radius: 8px;
  background: #f8fafc;
}

.admin-payment-balance span,
.admin-payment-balance small,
.admin-payment-amount small,
.cashier-quick-payment-form label small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-payment-balance strong {
  color: #111827;
  font-size: 1.9rem;
  line-height: 1.05;
}

.admin-payment-amount,
.admin-payment-reference,
.cashier-quick-payment-form label {
  color: #1f2937;
  display: grid;
  gap: 7px;
  font-weight: 850;
}

.admin-payment-amount input,
.admin-payment-reference input,
.cashier-quick-payment-form input,
.cashier-quick-payment-form select {
  min-height: 52px;
  width: 100%;
  border: 1px solid #d8d9e6;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 1rem;
  font-weight: 800;
  padding: 0 14px;
}

.admin-payment-methods {
  border: 0;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.admin-payment-methods legend {
  color: #1f2937;
  font-weight: 850;
  padding: 0 0 8px;
}

.admin-payment-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.admin-payment-method-option {
  position: relative;
  align-items: center;
  display: flex;
  gap: 11px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.admin-payment-method-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-payment-method-option:has(input:checked) {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.admin-payment-method-option strong,
.admin-payment-method-option small {
  display: block;
  overflow-wrap: anywhere;
  white-space: normal;
}

.admin-payment-method-option strong {
  color: #111827;
  margin-bottom: 3px;
}

.admin-payment-method-option small {
  color: #64748b;
  line-height: 1.3;
}

.admin-payment-method-option i {
  flex: 0 0 16px;
  margin-left: auto;
  width: 16px;
  height: 16px;
  border: 2px solid #94a3b8;
  border-radius: 50%;
}

.admin-payment-method-option:has(input:checked) i {
  border-color: #7c3aed;
  box-shadow: inset 0 0 0 4px #ffffff;
  background: #7c3aed;
}

.cashier-quick-payment-card {
  border: 1px solid rgba(184, 117, 255, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.22);
  padding: 16px;
}

.cashier-quick-payment-form .admin-payment-method-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cashier-quick-payment-card .cashier-quick-payment-form label,
.cashier-quick-payment-card .admin-payment-methods legend {
  color: #f8fafc;
}

.cashier-quick-payment-card .cashier-quick-payment-form label small {
  color: #a7b0c4;
}

.cashier-quick-payment-form .cashier-action-button {
  min-height: 52px;
  width: 100%;
  justify-content: center;
}

.payment-coupon {
  margin-top: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  background: #f8fafc;
}

.payment-coupon summary {
  cursor: pointer;
  font-weight: 800;
  color: #111827;
}

.payment-submit-button {
  width: 100%;
  min-height: 62px;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #6d28d9, #9333ea);
  color: #ffffff;
  font-size: 1.12rem;
  font-weight: 800;
}

.payment-helper {
  margin: 12px 0 0;
  text-align: center;
  color: #64748b;
}

.payment-summary-list {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
}

.payment-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #334155;
}

.payment-summary-list dt {
  font-weight: 700;
}

.payment-summary-list dd {
  margin: 0;
  font-weight: 800;
  color: #111827;
  text-align: right;
}

.payment-summary-list .total {
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.payment-summary-list .total dd {
  font-size: 1.25rem;
}

.payment-summary-list .green {
  color: #16a34a;
}

.payment-summary-list .violet {
  color: #6d28d9;
}

.payment-summary-list.compact div {
  align-items: center;
}

.payment-due-note {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  color: #5b21b6;
  background: #f3e8ff;
}

.payment-due-note span {
  display: grid;
  gap: 2px;
}

.payment-due-note small {
  color: #475569;
}

.payment-download-link {
  min-height: 52px;
  margin-top: 12px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #111827;
  font-weight: 800;
  text-decoration: none;
}

.payment-summary-card.verified {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.payment-provider-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.payment-provider-badges span {
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #0f172a;
  display: inline-flex;
  min-height: 38px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .payment-gateway-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .payment-project-card,
  .payment-amount-row,
  .payment-easy-steps,
  .payment-confirmation-details {
    grid-template-columns: 1fr;
  }
}

/* Dashboard layout guardrails: one page scrollbar, no top-right collisions. */
/* Both of these carried overflow-x: hidden - see the note on `body` at the
   top of this file. */
html {
  overflow-y: auto;
}

body:not(.login-screen) {
  overflow-y: auto;
}

body:not(.login-screen) .main,
body:not(.login-screen) .bz-dashboard-surface,
body:not(.login-screen) .mission-control-dashboard {
  height: auto;
  max-height: none;
  overflow: visible;
}

body:not(.login-screen) .topbar-account-floating .account-menu-trigger {
  max-width: 100%;
  min-width: 0;
}

body:not(.login-screen) .topbar-account-floating ~ .mission-control-dashboard {
  padding-top: max(92px, 5.75rem);
}

body:not(.login-screen) .mc-hero {
  align-items: flex-start;
  gap: 20px 24px;
}

body:not(.login-screen) .mc-hero > div:first-child {
  min-width: 0;
}

body:not(.login-screen) .mc-hero-actions {
  align-items: center;
  display: flex;
  /* Was `1 1 560px`, which on a phone - where the hero is a column - made this
     row of three buttons 560px tall with 380px of nothing under them. */
  flex: 1 1 auto;
  min-width: min(560px, 100%);
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  max-width: 100%;
  min-width: 0;
}

body:not(.login-screen) .mc-search {
  /* A basis is a height in a column; the min-width is the width that was
     meant. See the note in the max-width block on .cal-search. */
  flex: 1 1 auto;
  max-width: 520px;
  min-width: min(360px, 100%);
}

body:not(.login-screen) .mc-round-action {
  aspect-ratio: 1 / 1;
  flex: 0 0 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  width: 44px;
}

body:not(.login-screen) .mc-branch-pill {
  flex: 0 1 210px;
  max-width: 240px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body:not(.login-screen) .account-menu-copy strong,
body:not(.login-screen) .account-menu-copy small,
body:not(.login-screen) .mc-branch-pill {
  white-space: nowrap;
}

body:not(.login-screen) .account-menu-copy strong,
body:not(.login-screen) .account-menu-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  body:not(.login-screen) .client-upgrade-card {
    display: none;
  }

  body:not(.login-screen) .topbar-account-floating ~ .mission-control-dashboard {
    padding-top: 106px;
  }

  body:not(.login-screen) .mc-hero {
    flex-direction: column;
  }

  body:not(.login-screen) .mc-hero-actions {
    justify-content: flex-start;
    width: 100%;
  }

  body:not(.login-screen) .mc-search {
    max-width: none;
  }
}

@media (max-width: 760px) {
  body:not(.login-screen) .sidebar {
    bottom: 0;
    height: 100vh;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    transform: translateX(-105%);
    width: min(292px, 88vw);
    z-index: 110;
  }

  body:not(.login-screen).bz-nav-open .sidebar,
  body:not(.login-screen) .sidebar.is-open {
    transform: translateX(0);
  }

  body:not(.login-screen) .sidebar nav {
    max-height: calc(100vh - 154px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  body:not(.login-screen) .bz-sidebar-backdrop:not([hidden]) {
    background: rgba(2, 6, 14, 0.68);
    backdrop-filter: blur(8px);
    inset: 0;
    position: fixed;
    z-index: 105;
  }

  body:not(.login-screen) .topbar-account-floating ~ .mission-control-dashboard {
    padding-top: 110px;
  }

  body:not(.login-screen) .mc-hero-actions {
    display: grid;
    grid-template-columns: 1fr 44px 44px;
  }

  body:not(.login-screen) .mc-search {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }

body:not(.login-screen) .mc-branch-pill {
    grid-column: 1 / -1;
    max-width: 100%;
    width: 100%;
  }
}

.equipment-module-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.equipment-module-nav a {
  align-items: center;
  background: rgba(15, 22, 35, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  color: rgba(239, 242, 250, 0.78);
  display: inline-flex;
  gap: 8px;
  min-height: 42px;
  padding: 0 13px;
}

.equipment-module-nav a.is-active,
.equipment-module-nav a:hover {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(196, 181, 253, 0.28);
  color: #fff;
}

.equipment-filter-bar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr)) auto;
}

.equipment-filter-bar label,
.equipment-create-wizard label {
  display: grid;
  gap: 7px;
}

.equipment-create-wizard .bz-wizard-steps {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 18px;
  overflow-x: auto;
  overflow-y: hidden;
}

body.bz-wizard-open {
  overflow: hidden;
}

/* The wizard modal, dialog, head and close button used to be styled here as
   well as in components.css. components.css loads later, so it won every
   property the two rules shared and this copy only contributed a blur and a
   couple of sizes. Those moved across; nothing is styled in two files now. */
.bz-wizard-head p {
  margin: 0;
}

.bz-wizard-dialog [data-wizard-back][hidden],
.bz-wizard-dialog [data-wizard-next][hidden],
.bz-wizard-dialog [data-wizard-submit][hidden] {
  display: none !important;
}

.equipment-qr-preview,
.equipment-qr-print-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px;
}

.equipment-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.equipment-detail-tabs a {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  color: rgba(239, 242, 250, 0.78);
  padding: 8px 12px;
}

.equipment-detail-tabs a:hover {
  border-color: rgba(196, 181, 253, 0.28);
  color: #fff;
}

@media (max-width: 1100px) {
  .equipment-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .equipment-filter-bar {
    grid-template-columns: 1fr;
  }

  .equipment-module-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Dashboard metric cards: keep the approved quiet cards and thin sparkline only. */
.mc-metric-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
  isolation: isolate;
}

.mc-metric-card::before,
.mc-metric-card::after {
  content: none !important;
  display: none !important;
}

.mc-metric-top i {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none !important;
  color: currentColor;
  flex: 0 0 46px;
  opacity: 1;
  position: static;
}

.mc-metric-top i .command-icon,
.mc-metric-top i svg {
  color: currentColor;
  opacity: 1;
  position: static;
  stroke: currentColor;
}

.tone-violet .mc-metric-top i { background: rgba(141, 80, 255, 0.17) !important; }
.tone-blue .mc-metric-top i { background: rgba(20, 152, 255, 0.17) !important; }
.tone-amber .mc-metric-top i { background: rgba(246, 166, 43, 0.17) !important; }
.tone-green .mc-metric-top i { background: rgba(71, 207, 104, 0.17) !important; }
.tone-pink .mc-metric-top i { background: rgba(255, 47, 127, 0.17) !important; }

/* Project lifecycle gate: contracts, receipts, and payment proof before production. */
.project-readiness-panel {
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.project-readiness-panel.needs-action {
  border-color: rgba(248, 113, 113, 0.32);
  box-shadow: 0 18px 50px rgba(127, 29, 29, 0.16);
}

.project-readiness-panel.is-ready {
  border-color: rgba(34, 197, 94, 0.24);
}

.badge.danger {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.28);
  color: #fecaca;
}

.project-readiness-grid,
.project-readiness-artifacts {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-readiness-artifacts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.project-readiness-step,
.project-readiness-artifacts article {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  padding: 14px;
}

.project-readiness-step {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.project-readiness-step > span {
  align-items: center;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.22);
  border-radius: 8px;
  color: #fca5a5;
  display: inline-flex;
  flex: 0 0 34px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.project-readiness-step.done > span {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.22);
  color: #86efac;
}

.project-readiness-step.reminder > span {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
  color: #fbbf24;
}

.project-readiness-step strong,
.project-readiness-artifacts h3,
.project-readiness-artifacts strong {
  color: #fff;
}

.project-readiness-step small,
.project-readiness-artifacts small {
  color: var(--muted);
  display: block;
  line-height: 1.45;
}

.project-readiness-artifacts p {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  margin: 10px 0 0;
  padding-top: 10px;
}

.project-readiness-actions {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(139, 92, 246, 0.24);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
}

.project-readiness-actions h3 {
  color: #fff;
  margin: 0;
}

.project-readiness-actions .form-grid {
  margin: 0;
}

.project-readiness-actions .secondary-button {
  justify-self: flex-start;
}

.shoot-checklist-section {
  display: grid;
  gap: 14px;
}

.shoot-checklist-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.shoot-checklist-summary article {
  background: rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  padding: 12px 14px;
}

.shoot-checklist-summary span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.shoot-checklist-summary strong {
  color: #fff;
  display: block;
  font-size: 26px;
  line-height: 1.1;
  margin-top: 4px;
}

.shoot-checklist-summary article.critical {
  background: rgba(127, 29, 29, 0.2);
  border-color: rgba(248, 113, 113, 0.28);
}

.compact-details,
.shoot-checklist-card {
  background: rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  overflow: hidden;
}

.compact-details > summary,
.shoot-checklist-card > summary {
  align-items: center;
  color: #fff;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  padding: 14px 16px;
}

.compact-details > summary::-webkit-details-marker,
.shoot-checklist-card > summary::-webkit-details-marker {
  display: none;
}

.compact-details > summary {
  justify-content: flex-start;
  font-weight: 800;
}

.shoot-checklist-card > summary h3,
.shoot-checklist-card > summary p {
  margin: 0;
}

.shoot-checklist-card > summary small {
  display: block;
  margin-top: 3px;
}

.shoot-checklist-card > summary > span {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: inline-flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.shoot-checklist-card.has-critical {
  border-color: rgba(248, 113, 113, 0.36);
  box-shadow: inset 4px 0 0 rgba(248, 113, 113, 0.75);
}

.shoot-checklist-card[open] > summary,
.compact-details[open] > summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.compact-details > form,
.compact-details > .bz-inline-wizard {
  padding: 14px 16px 16px;
}

.shoot-checklist-create form,
.shoot-add-item-form,
.shoot-item-list {
  padding: 14px 16px 16px;
}

.shoot-checklist-list {
  display: grid;
  gap: 10px;
}

.shoot-add-item-form {
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) 90px;
}

.shoot-add-item-form .full,
.shoot-add-item-form button {
  grid-column: 1 / -1;
}

.shoot-checklist-card > .bz-inline-wizard,
.shoot-checklist-scan-grid,
.shoot-checklist-log {
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  padding: 14px 16px 16px;
}

.shoot-checklist-scan-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shoot-scan-wizard,
.shoot-checklist-wizard {
  background: rgba(3, 7, 18, 0.24);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  padding: 12px;
}

.equipment-checklist-builder {
  display: grid;
  gap: 12px;
}

.equipment-builder-presets,
.equipment-add-control,
.equipment-qr-entry {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.equipment-qr-entry {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.equipment-selected-box,
.equipment-qr-recorder {
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.equipment-selected-heading {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.equipment-selected-heading span {
  color: #fff;
  font-weight: 800;
}

.equipment-selected-list,
.equipment-qr-list {
  display: grid;
  gap: 8px;
}

.equipment-selected-empty[hidden],
.equipment-qr-list[hidden] {
  display: none;
}

.equipment-selected-empty {
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  color: var(--muted);
  padding: 12px;
}

.equipment-selected-row,
.equipment-qr-row {
  align-items: center;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px;
}

.equipment-qr-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.equipment-selected-row strong,
.equipment-qr-row strong {
  color: #fff;
  min-width: 0;
  overflow-wrap: anywhere;
}

.equipment-selected-check {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

.equipment-qr-camera {
  background: rgba(3, 7, 18, 0.56);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr);
  padding: 10px;
}

.equipment-qr-camera[hidden] {
  display: none;
}

.equipment-qr-camera video {
  background: #000;
  border-radius: 8px;
  min-height: 180px;
  object-fit: cover;
  width: 100%;
}

.equipment-qr-camera p {
  color: var(--muted);
  margin: 0 0 10px;
}

.shoot-item-list {
  display: grid;
  gap: 10px;
}

.shoot-item {
  background: rgba(3, 7, 18, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr);
  padding: 12px;
}

.shoot-item.status-issue,
.shoot-item.status-missing {
  border-color: rgba(248, 113, 113, 0.32);
}

.shoot-item strong,
.shoot-item small {
  display: block;
}

.shoot-item-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shoot-critical-form {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shoot-item-actions .button-row {
  grid-column: 1 / -1;
}

.critical-copy {
  color: #fecaca;
  margin: 8px 0 0;
}

@media (max-width: 1100px) {
  .project-readiness-grid,
  .project-readiness-artifacts,
  .shoot-checklist-summary,
  .equipment-builder-presets,
  .equipment-add-control,
  .equipment-qr-entry,
  .equipment-qr-camera,
  .shoot-checklist-scan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shoot-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .project-readiness-grid,
  .project-readiness-artifacts,
  .shoot-checklist-summary,
  .shoot-add-item-form,
  .shoot-item-actions,
  .shoot-critical-form,
  .equipment-builder-presets,
  .equipment-add-control,
  .equipment-qr-entry,
  .equipment-qr-camera,
  .shoot-checklist-scan-grid {
    grid-template-columns: 1fr;
  }
}

.accounting-settings-page {
  display: grid;
  gap: 16px;
}

.accounting-settings-heading {
  margin-bottom: 0;
}

.accounting-settings-status {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.accounting-settings-kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.accounting-settings-kpis article,
.accounting-control-card,
.accounting-sequence-card,
.accounting-posting-list article {
  background: rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: none;
}

.accounting-settings-kpis article {
  border-radius: 12px;
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 14px;
}

.accounting-settings-kpis span,
.accounting-sequence-card small,
.accounting-posting-list small {
  color: var(--bz-text-secondary, #a8b3c7);
  font-size: 12px;
  font-weight: 700;
}

.accounting-settings-kpis strong {
  color: var(--bz-text-primary, #f8fafc);
  font-size: 24px;
  line-height: 1;
}

.accounting-settings-kpis small {
  color: rgba(52, 211, 153, 0.92);
  font-size: 12px;
  font-weight: 700;
}

.accounting-settings-layout {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
}

.accounting-settings-main,
.accounting-settings-rail {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.accounting-control-card.section {
  margin: 0;
}

.accounting-settings-form {
  gap: 12px;
}

.accounting-settings-form label {
  color: var(--bz-text-secondary, #a8b3c7);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.accounting-settings-table {
  margin-top: 16px;
}

.accounting-sequence-list,
.accounting-posting-list {
  display: grid;
  gap: 10px;
}

.accounting-sequence-card {
  border-radius: 12px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.accounting-sequence-card strong,
.accounting-posting-list strong {
  color: var(--bz-text-primary, #f8fafc);
}

.accounting-sequence-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1.2fr 1fr 0.8fr;
}

.accounting-sequence-grid label {
  color: var(--bz-text-secondary, #a8b3c7);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
}

.accounting-sequence-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.accounting-sequence-actions label {
  align-items: center;
  color: var(--bz-text-secondary, #a8b3c7);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 8px;
}

.accounting-sequence-actions .secondary-button {
  min-height: 36px;
  padding: 8px 13px;
  white-space: nowrap;
}

.accounting-posting-list article {
  border-radius: 12px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.accounting-sequence-list {
  padding-right: 4px;
}

@media (max-width: 1100px) {
  .accounting-settings-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .accounting-settings-status {
    justify-content: flex-start;
  }

  .accounting-settings-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .accounting-sequence-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .accounting-settings-kpis {
    grid-template-columns: 1fr;
  }
}

/* This rule used to carry `outline: 0 !important; outline-offset: 0
   !important`, which removed the keyboard focus ring from every input, select
   and textarea in the product and made it impossible to put back. The ring is
   declared once in bz-ux.css. */
body:not(.login-screen) input,
body:not(.login-screen) select,
body:not(.login-screen) textarea {
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body:not(.login-screen) input:focus,
body:not(.login-screen) input:focus-visible,
body:not(.login-screen) select:focus,
body:not(.login-screen) select:focus-visible,
body:not(.login-screen) textarea:focus,
body:not(.login-screen) textarea:focus-visible {
  background: rgba(5, 10, 20, 0.88);
  border-color: var(--bz-focus-ring);
  box-shadow: 0 0 0 3px var(--bz-focus-ring);
  outline: 0;
}

body:not(.login-screen) .board-search label:focus-within,
body:not(.login-screen) .board-toolbar label:focus-within,
body:not(.login-screen) .global-search:focus-within,
body:not(.login-screen) .mc-search:focus-within,
body:not(.login-screen) .cal-search:focus-within,
body:not(.login-screen) .contract-search:focus-within,
body:not(.login-screen) .client-gallery-search:focus-within,
body:not(.login-screen) .studio-search:focus-within {
  background: rgba(5, 10, 20, 0.88);
  border-color: var(--bz-focus-ring);
  box-shadow: 0 0 0 3px var(--bz-focus-ring);
}

body:not(.login-screen) .board-search input:focus,
body:not(.login-screen) .board-search input:focus-visible,
body:not(.login-screen) .board-toolbar select:focus,
body:not(.login-screen) .board-toolbar select:focus-visible,
body:not(.login-screen) .board-move-form select:focus,
body:not(.login-screen) .board-move-form select:focus-visible {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.access-cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.access-cluster-card {
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(135deg, rgba(16, 24, 39, 0.94), rgba(23, 14, 46, 0.82));
}

.access-cluster-card form {
  display: grid;
  gap: 12px;
}

.access-cluster-card .workspace-panel-head {
  align-items: start;
  gap: 12px;
}

.access-cluster-card .workspace-panel-head input,
.access-cluster-card .workspace-panel-head select {
  min-width: 0;
}

.access-cluster-boards,
.access-cluster-pages {
  display: grid;
  gap: 8px;
}

.access-cluster-boards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.access-cluster-boards label,
.access-cluster-pages label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.38);
  color: rgba(241, 245, 249, 0.9);
}

.access-cluster-boards input,
.access-cluster-pages input {
  width: auto;
}

.access-cluster-pages {
  max-height: 280px;
  overflow: auto;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-top: 10px;
}

.managed-user-access-form {
  min-width: min(520px, 100%);
}

.managed-user-access-form select[multiple],
.access-cluster-card select[multiple],
.form-grid select[multiple] {
  min-height: 128px;
  padding: var(--bz-space-2);
}

.managed-user-access-form select[multiple] option,
.access-cluster-card select[multiple] option,
.form-grid select[multiple] option {
  padding: 7px 8px;
}

.cashier-mode-panel .cashier-action-button {
  align-self: end;
  justify-self: start;
  width: auto;
  min-width: 0;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 8px;
  gap: 6px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(184, 117, 255, 0.34);
  box-shadow: none;
}

.cashier-mode-panel .cashier-action-button:hover {
  background: rgba(139, 92, 246, 0.24);
  border-color: rgba(184, 117, 255, 0.52);
  box-shadow: none;
}

.cashier-mode-panel .cashier-action-button svg {
  width: 14px;
  height: 14px;
}

.project-progress-heading {
  align-items: center;
}

.project-progress-heading .danger-button,
.project-progress-heading .secondary-button {
  flex: 0 0 auto;
  width: auto;
}

.project-detail-tabs {
  display: grid;
  gap: 16px;
}

.project-detail-tab-list {
  align-items: center;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
}

.project-detail-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(226, 232, 240, 0.74);
  flex: 0 0 auto;
  font-weight: 800;
  min-height: 38px;
  padding: 8px 12px;
  white-space: nowrap;
  width: auto;
}

.project-detail-tab:hover {
  border-color: rgba(196, 181, 253, 0.24);
  color: #fff;
}

.project-detail-tab.is-active {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(196, 181, 253, 0.36);
  color: #fff;
}

.project-detail-tab-panel {
  display: grid;
  gap: 16px;
}

.project-detail-tab-panel[hidden] {
  display: none;
}

.project-northstar-page {
  display: grid;
  gap: 20px;
  padding-top: 18px;
}

.project-northstar-header {
  align-items: flex-end;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  min-width: 0;
}

.project-northstar-header h1 {
  color: #fff;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.project-northstar-header p:not(.eyebrow) {
  color: rgba(218, 222, 237, 0.74);
  font-size: 15px;
  margin: 8px 0 0;
}

.project-northstar-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.project-northstar-actions :is(.primary-button, .secondary-button) {
  min-height: 44px;
  width: auto;
}

.project-northstar-kpis {
  align-items: stretch;
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(14, 20, 32, 0.84), rgba(8, 12, 22, 0.88));
  border: 1px solid rgba(148, 163, 184, 0.11);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  overflow: hidden;
}

.project-northstar-kpi {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 44px minmax(0, 1fr);
  min-width: 0;
  padding: 20px clamp(16px, 2vw, 24px);
}

.project-northstar-kpi + .project-northstar-kpi {
  border-left: 1px solid rgba(148, 163, 184, 0.14);
}

.project-northstar-kpi > span {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.project-northstar-kpi .command-icon {
  height: 20px;
  width: 20px;
}

.project-northstar-kpi small,
.project-northstar-kpi em {
  color: rgba(218, 222, 237, 0.68);
  display: block;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-northstar-kpi strong {
  color: #fff;
  display: block;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 5px 0;
}

.project-northstar-kpi.tone-violet > span { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
.project-northstar-kpi.tone-amber > span { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.project-northstar-kpi.tone-pink > span { background: rgba(217, 70, 239, 0.16); color: #f0abfc; }
.project-northstar-kpi.tone-red > span { background: rgba(248, 113, 113, 0.16); color: #f87171; }

.project-northstar-main {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  min-width: 0;
}

.project-northstar-list,
.project-northstar-rail {
  background: rgba(8, 12, 22, 0.44);
  border: 1px solid rgba(148, 163, 184, 0.11);
  border-radius: 12px;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.project-northstar-toolbar {
  align-items: center;
  background: rgba(14, 20, 32, 0.64);
  border-bottom: 1px solid rgba(148, 163, 184, 0.11);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
}

.project-northstar-toolbar label {
  margin: 0;
  min-width: 0;
  width: auto;
}

.project-northstar-toolbar select,
.project-northstar-search input {
  background: rgba(8, 12, 22, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--bz-radius-sm);
  color: #fff;
  min-height: 44px;
}

.project-northstar-toolbar select {
  min-width: 136px;
  padding:0 var(--bz-space-3);
}

.project-northstar-search {
  align-items: center;
  display: flex;
  flex: 1 1 360px;
  max-width: 100%;
  position: relative;
}

.project-northstar-search .command-icon {
  color: rgba(203, 213, 225, 0.72);
  height: 18px;
  left: 12px;
  position: absolute;
  width: 18px;
}

.project-northstar-search input {
  padding-left: var(--bz-space-10);
  width: 100%;
}

.project-northstar-chip {
  align-items: center;
  background: rgba(139, 92, 246, 0.86);
  border: 1px solid rgba(196, 181, 253, 0.32);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
}

.project-northstar-chip a {
  color: #fff;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

.project-northstar-count {
  color: rgba(203, 213, 225, 0.68);
  font-size: 12px;
  font-weight: 800;
  margin-left: auto;
  white-space: nowrap;
}

.project-northstar-table-wrap {
  contain: inline-size;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}

.project-northstar-table {
  border-collapse: collapse;
  min-width: 760px;
  width: 100%;
}

.project-northstar-table th,
.project-northstar-table td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  padding: 16px clamp(14px, 1.5vw, 18px);
  text-align: left;
  vertical-align: middle;
}

.project-northstar-table th {
  background: rgba(10, 15, 25, 0.8);
  color: rgba(203, 213, 225, 0.64);
  font-size: var(--bz-text-supporting);
  letter-spacing: 0;
}

.project-northstar-table td {
  background: rgba(8, 12, 22, 0.3);
}

.project-northstar-table tbody tr {
  box-shadow: inset 3px 0 0 var(--project-row-accent, rgba(139, 92, 246, 0.8));
}

.project-northstar-table tbody tr:hover td {
  background: rgba(139, 92, 246, 0.07);
}

.project-northstar-table td > strong,
.project-northstar-table td > small {
  display: block;
}

.project-northstar-table td > small,
.project-northstar-table small {
  color: rgba(203, 213, 225, 0.68);
  font-size: var(--bz-text-supporting);
  line-height: 1.5;
}

.project-northstar-link {
  align-items: center;
  color: #fff;
  display: inline-flex;
  min-height: 44px;
  text-decoration: none;
}

.project-northstar-link:hover,
.project-northstar-subtle-link:hover {
  color: #c4b5fd;
}

.project-northstar-subtle-link {
  align-items: center;
  color: rgba(203, 213, 225, 0.92);
  /* Was 14px tall. */
  display: inline-flex;
  min-height: 44px;
  text-decoration: none;
}

.project-northstar-owner {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  min-width: 0;
}

.project-northstar-table .bz-badge,
.project-northstar-owner,
.project-northstar-table td[data-label="Due"] > strong,
.project-northstar-table td[data-label="Due"] > small {
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

.project-northstar-table td:first-child strong,
.project-northstar-table td:first-child small {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.project-northstar-avatar {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  flex: 0 0 32px;
  height: 32px;
  object-fit: cover;
  width: 32px;
}

.project-northstar-avatar.fallback {
  align-items: center;
  /* Was #8b5cf6 -> #38bdf8: the sky-blue end measured 2.1:1, the worst
     avatar in the product. */
  background: linear-gradient(135deg, #7a53ed, #0369a1);  /* 4.9:1 / 5.9:1 */
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
}

.project-northstar-progress {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  height: 7px;
  margin-top: 8px;
  min-width: 82px;
  overflow: hidden;
}

.project-northstar-progress span {
  background: linear-gradient(90deg, #8b5cf6, #d946ef);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.project-northstar-open {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: rgba(226, 232, 240, 0.8);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.project-northstar-open:hover {
  background: rgba(139, 92, 246, 0.16);
  color: #fff;
}

.project-northstar-pagination {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 18px;
}

.project-northstar-pagination > span {
  color: rgba(203, 213, 225, 0.68);
  font-size: 12px;
}

.project-northstar-pagination nav {
  align-items: center;
  display: flex;
  gap: 7px;
}

.project-northstar-pagination nav a,
.project-northstar-pagination nav span {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: rgba(226, 232, 240, 0.82);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  min-width: 36px;
  padding: 0 10px;
  text-decoration: none;
}

.project-northstar-pagination nav a.is-active {
  /* Was #8b5cf6 - white on it measured 4.2:1. */
  background: #7a53ed;
  border-color: #7a53ed;
  color: #fff;
}

.project-northstar-pagination nav a.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.project-northstar-rail {
  display: grid;
  gap: 0;
  padding: 22px;
}

.project-northstar-rail section + section {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  margin-top: 22px;
  padding-top: 22px;
}

.project-northstar-rail-head {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.project-northstar-rail h3 {
  color: #fff;
  font-size: 18px;
  margin: 0;
}

.project-northstar-rail small {
  color: rgba(203, 213, 225, 0.68);
  font-size: 12px;
}

.project-northstar-rail-subhead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 18px 0 12px;
}

.project-northstar-rail-subhead strong {
  color: rgba(226, 232, 240, 0.78);
  font-size: 13px;
}

.project-northstar-rail-subhead a {
  align-items: center;
  color: #c084fc;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  min-height: 44px;
  text-decoration: none;
}

.project-northstar-deadlines,
.project-northstar-activity {
  display: grid;
  gap: 12px;
}

.project-northstar-deadlines a,
.project-northstar-activity a {
  align-items: flex-start;
  color: inherit;
  display: grid;
  gap: 10px;
  grid-template-columns: 58px minmax(0, 1fr);
  text-decoration: none;
}

.project-northstar-deadlines time {
  color: rgba(203, 213, 225, 0.68);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.project-northstar-deadlines b,
.project-northstar-activity b {
  color: #fff;
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.project-northstar-deadlines span,
.project-northstar-activity span {
  min-width: 0;
}

.project-northstar-activity a {
  grid-template-columns: 34px minmax(0, 1fr);
}

.project-northstar-activity i {
  align-items: center;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.32);
  border-radius: 50%;
  color: #34d399;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.project-northstar-activity .command-icon {
  height: 16px;
  width: 16px;
}

.project-northstar-table .tone-danger { color: #fb7185; }
.project-northstar-table .tone-warning { color: #fbbf24; }
.project-northstar-table .tone-info { color: #38bdf8; }
.project-northstar-table .tone-muted { color: rgba(203, 213, 225, 0.64); }

@media (max-width: 1320px) {
  .project-northstar-main {
    grid-template-columns: 1fr;
  }

  .project-northstar-table-wrap {
    contain: none;
  }

  .project-northstar-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .project-northstar-rail section + section {
    border-left: 1px solid rgba(148, 163, 184, 0.14);
    border-top: 0;
    margin-top: 0;
    padding-left: 20px;
    padding-top: 0;
  }
}

@media (max-width: 860px) {
  .project-northstar-table-wrap {
    overflow-x: visible;
  }

  .project-northstar-table {
    border-collapse: separate;
    border-spacing: 0;
    display: block;
    min-width: 0;
    width: 100%;
  }

  .project-northstar-table thead {
    display: none;
  }

  .project-northstar-table tbody {
    display: grid;
    gap: var(--bz-space-25);
    padding: var(--bz-space-25);
  }

  .project-northstar-table tbody tr {
    background: rgba(12, 16, 27, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 10px;
    box-shadow: inset 3px 0 0 var(--project-row-accent, rgba(139, 92, 246, 0.8));
    display: grid;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    padding: var(--bz-space-2) 0;
  }

  .project-northstar-table td {
    align-items: center;
    background: transparent;
    border-bottom: 0;
    display: grid;
    gap: var(--bz-space-3);
    grid-template-columns: 96px minmax(0, 1fr);
    min-width: 0;
    padding: var(--bz-space-2) var(--bz-space-35);
  }

  .project-northstar-table td::before {
    color: rgba(203, 213, 225, 0.62);
    content: attr(data-label);
    font-size: var(--bz-text-supporting);
    font-weight: 900;
    text-transform: uppercase;
  }

  .project-northstar-table td:first-child {
    align-items: start;
    padding-top: var(--bz-space-25);
  }

  .project-northstar-table td:first-child::before {
    padding-top: var(--bz-space-05);
  }

}

@media (min-width: 821px) and (max-width: 1320px) {
  .project-northstar-toolbar {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) repeat(3, minmax(132px, max-content)) auto auto;
  }

  .project-northstar-search {
    flex: none;
  }

  .project-northstar-count {
    justify-self: end;
    margin-left: 0;
  }
}

@media (max-width: 820px) {
  .project-northstar-header {
    align-items: stretch;
    flex-direction: column;
  }

  .project-northstar-actions {
    justify-content: flex-start;
  }

  .project-northstar-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-northstar-kpi:nth-child(odd) {
    border-left: 0;
  }

  .project-northstar-kpi:nth-child(n + 3) {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
  }

  .project-northstar-rail {
    grid-template-columns: 1fr;
  }

  .project-northstar-rail section + section {
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    margin-top: 20px;
    padding-left: 0;
    padding-top: 20px;
  }
}

@media (max-width: 560px) {
  .project-northstar-header h1 {
    font-size: 28px;
  }

  .project-northstar-actions :is(.primary-button, .secondary-button),
  .project-northstar-toolbar .secondary-button,
  .project-northstar-toolbar label,
  .project-northstar-toolbar select,
  .project-northstar-search {
    max-width: none;
    width: 100%;
  }

  .project-northstar-kpis {
    grid-template-columns: 1fr;
  }

  .project-northstar-kpi + .project-northstar-kpi {
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
  }

  .project-northstar-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-northstar-table td {
    align-items: start;
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .project-northstar-owner {
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  body:not(.login-screen):not(.bz-nav-open) .sidebar#app-sidebar,
  body:not(.login-screen):not(.bz-nav-open) > .sidebar {
    border-right: 0;
    box-shadow: none;
    left: calc(-1 * min(292px, 88vw) - 48px);
    pointer-events: none;
    transform: none;
  }

  body:not(.login-screen).bz-nav-open .sidebar#app-sidebar,
  body:not(.login-screen) .sidebar#app-sidebar.is-open {
    left: 0;
    transform: none;
  }
}

.project-overview-section .section-heading {
  align-items: center;
}

.project-overview-list {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.project-overview-list > div {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 0;
}

.project-overview-list > div:nth-child(odd) {
  padding-right: 18px;
}

.project-overview-list > div:nth-child(even) {
  padding-left: 18px;
}

.project-overview-list dt {
  color: rgba(226, 232, 240, 0.62);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.project-overview-list dd {
  color: #fff;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-mission-status-card {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr) minmax(280px, 0.9fr);
}

.project-mission-status-icon {
  align-items: center;
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(196, 181, 253, 0.28);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.project-mission-status-main {
  min-width: 0;
}

.project-mission-status-main h2 {
  margin-bottom: 4px;
}

.project-mission-status-main p {
  color: rgba(203, 213, 225, 0.78);
  margin: 0;
}

.project-mission-blocker-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.project-mission-blocker-actions .primary-button {
  min-height: 38px;
  padding-inline: 14px;
}

.project-mission-blocker-list {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.project-mission-blocker-list b {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.24);
  border-radius: 999px;
  color: rgba(254, 226, 226, 0.92);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.1;
  padding: 6px 9px;
}

.project-mission-status-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.project-mission-status-list > div {
  align-items: baseline;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: grid;
  gap: 12px;
  grid-template-columns: 110px minmax(0, 1fr);
  padding-top: 10px;
}

.project-mission-status-list dt {
  color: rgba(226, 232, 240, 0.62);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.project-mission-status-list dd {
  color: #fff;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.client-page-tabs .project-detail-tab-list,
.project-page-tabs .project-detail-tab-list {
  flex-wrap: wrap;
}

.client-tab-spacer {
  flex: 1 1 auto;
}

.client-page-tabs .project-detail-tab-list .primary-button,
.project-page-tabs .project-detail-tab-list .primary-button {
  flex: 0 0 auto;
  width: auto;
}

.project-cancel-head-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.project-cancel-panel {
  border-color: rgba(248, 113, 113, 0.22);
  background:
    linear-gradient(135deg, rgba(127, 29, 29, 0.18), rgba(15, 23, 42, 0.72)),
    rgba(15, 23, 42, 0.72);
}

.project-cancel-panel.is-cancelled {
  box-shadow: inset 4px 0 0 rgba(248, 113, 113, 0.72);
}

.project-cancel-summary,
.project-cancel-facts {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.project-cancel-summary article,
.project-cancel-facts article {
  background: rgba(2, 6, 23, 0.38);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  padding: 11px 12px;
}

.project-cancel-summary article.full {
  grid-column: 1 / -1;
}

.project-cancel-summary span,
.project-cancel-facts span {
  color: rgba(203, 213, 225, 0.72);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.project-cancel-summary strong,
.project-cancel-facts strong {
  color: rgba(248, 250, 252, 0.94);
  display: block;
  font-size: 13px;
  line-height: 1.45;
}

.project-cancel-details {
  margin-top: 14px;
}

.project-cancel-details > summary.danger-button {
  display: inline-flex;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  width: auto;
}

.project-cancel-wizard {
  margin-top: 10px;
}

@media (max-width: 720px) {
  .project-progress-heading {
    align-items: stretch;
  }

  .project-progress-heading .danger-button,
  .project-progress-heading .secondary-button {
    justify-content: center;
    width: 100%;
  }

  .project-overview-list {
    grid-template-columns: 1fr;
  }

  .project-overview-list > div:nth-child(n) {
    padding-left: 0;
    padding-right: 0;
  }

  .project-mission-status-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .project-mission-status-list > div {
    grid-template-columns: 1fr;
  }
}

.danger-check {
  border-color: rgba(248, 113, 113, 0.28);
  color: rgba(254, 226, 226, 0.94);
}

.virtual-signature-module,
.contract-signature-pad {
  background: rgba(2, 6, 23, 0.36);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.signature-module-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.signature-module-head h3 {
  margin: 2px 0 4px;
}

.signature-canvas {
  background:
    linear-gradient(transparent 78%, rgba(148, 163, 184, 0.18) 79%, transparent 80%),
    rgba(15, 23, 42, 0.86);
  border: 1px solid rgba(168, 85, 247, 0.34);
  border-radius: 12px;
  cursor: crosshair;
  min-height: 160px;
  touch-action: none;
  width: 100%;
}

.rental-choice-return {
  border-color: rgba(34, 197, 94, 0.34);
}

.rental-operations-page {
  background: transparent;
  border-radius: 0;
  margin: 0;
  min-height: 0;
  padding: 0;
}

.rental-list-section-head,
.rental-list-tools,
.rental-table-item,
.rental-item {
  align-items: center;
  display: flex;
}

.rental-view-toggle a {
  min-height: 40px;
}

.rental-list-section {
  margin-top: 14px;
  padding: 16px;
}

.rental-list-section-head {
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.rental-list-section-head h3 {
  font-size: 18px;
  margin: 2px 0 0;
}

.rental-list-tools {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.rental-view-toggle {
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  display: inline-flex;
  padding: 3px;
}

.rental-view-toggle a {
  align-items: center;
  border-radius: 6px;
  color: #cbd5e1;
  display: inline-flex;
  font-weight: 800;
  gap: 7px;
  justify-content: center;
  min-width: 92px;
  padding: 0 12px;
  white-space: nowrap;
}

.rental-view-toggle .command-icon {
  flex: 0 0 16px;
  height: 16px;
  width: 16px;
}

.rental-view-toggle a.active {
  background: rgba(139, 92, 246, 0.28);
  color: #fff;
}

.rental-active-table {
  overflow-x: auto;
}

.rental-table-item {
  color: #f8fafc;
  gap: 10px;
}

.rental-table-item span:last-child {
  display: grid;
  gap: 3px;
}

.rental-table-thumb,
.rental-item-thumb {
  align-items: center;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  color: #a78bfa;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  overflow: hidden;
}

.rental-table-thumb {
  height: 52px;
  width: 64px;
}

.rental-table-thumb img,
.rental-item-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.rental-items {
  display: grid;
  gap: 16px;
}

.rental-items--thumb {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.rental-item {
  appearance: none;
  background: rgba(2, 6, 23, 0.36);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  color: #f8fafc;
  cursor: pointer;
  font: inherit;
  gap: 14px;
  min-height: 96px;
  padding: 12px;
  text-align: left;
  width: 100%;
}

.rental-item:hover,
.rental-item:focus-visible,
.rental-item.is-selected {
  border-color: rgba(167, 139, 250, 0.55);
  outline: 0;
}

.rental-item-thumb {
  height: 76px;
  width: 92px;
}

.rental-item-main {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.rental-item-main strong,
.rental-item-main small,
.rental-item-meta small,
.rental-item-meta code {
  overflow-wrap: anywhere;
}

.rental-item-main small,
.rental-item-meta small {
  color: #a7adbd;
}

.rental-item-meta {
  align-items: flex-end;
  display: grid;
  gap: 6px;
  justify-items: end;
  margin-left: auto;
  text-align: right;
}

.rental-items--thumb .rental-item {
  align-items: stretch;
  flex-direction: column;
  min-height: 0;
}

.rental-items--thumb .rental-item-thumb {
  aspect-ratio: 4 / 3;
  height: auto;
  width: 100%;
}

.rental-items--thumb .rental-item-meta {
  align-items: start;
  justify-items: start;
  margin-left: 0;
  text-align: left;
}

.rental-tracker-strip {
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(15, 23, 42, 0.78)),
    rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(45, 212, 191, 0.2);
  border-radius: 18px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 0.35fr) 1fr;
  margin: 18px 0;
  padding: 16px;
}

.rental-tracker-strip h3 {
  margin: 2px 0 0;
}

.rental-tracker-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.rental-tracker-list article {
  background: rgba(2, 6, 23, 0.36);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 14px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.rental-tracker-list article.is-overdue {
  border-color: rgba(248, 113, 113, 0.44);
  box-shadow: inset 3px 0 0 rgba(248, 113, 113, 0.72);
}

.rental-tracker-list b,
.rental-countdown {
  color: rgba(248, 250, 252, 0.95);
}

.rental-tracker-list span {
  color: rgba(45, 212, 191, 0.95);
  font-weight: 800;
}

.rental-countdown {
  display: inline-block;
  font-size: 12px;
  margin-top: 3px;
}

.rental-countdown.is-overdue {
  color: rgba(248, 113, 113, 0.96);
}

.equipment-photo-gallery {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 10px 0 16px;
}

.equipment-photo-gallery a {
  background: rgba(2, 6, 23, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  display: block;
  min-height: 64px;
  overflow: hidden;
  position: relative;
}

.equipment-photo-gallery img {
  aspect-ratio: 1 / 1;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.equipment-photo-gallery span {
  background: rgba(139, 92, 246, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  left: 6px;
  letter-spacing: 0.06em;
  padding: 3px 6px;
  position: absolute;
  text-transform: uppercase;
  top: 6px;
}

.identity-person-overview .section-heading p {
  max-width: 720px;
}

.identity-role-grid .metric {
  min-height: 112px;
}

.identity-role-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.identity-relationship-form {
  margin: 16px 0;
}

.identity-history-details {
  margin-top: 12px;
}

.identity-history-details summary {
  cursor: pointer;
  font-weight: 700;
  padding: 10px 0;
}

.inline-form {
  display: inline-flex;
  margin: 0;
}

.secondary-button.compact {
  min-height: 34px;
  padding: var(--bz-space-15) var(--bz-space-3);
}

.gallery-subscription-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.provider-tier-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 18px 0;
}

.provider-tier-card {
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  padding: 16px;
}

.provider-tier-card.is-studio {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 18px 54px rgba(139, 92, 246, 0.12);
}

.provider-tier-card__top {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.provider-tier-card__top h3 {
  margin: 4px 0 0;
}

.provider-tier-card__features {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.provider-tier-card__features li {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
}

.provider-tier-card__features .is-included {
  background: rgba(34, 197, 94, 0.08);
  color: rgba(220, 252, 231, 0.94);
}

.provider-tier-card__features .is-excluded {
  background: rgba(148, 163, 184, 0.06);
  color: rgba(148, 163, 184, 0.88);
}

.provider-tier-card__features svg {
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.provider-tier-card__features .is-included svg {
  color: #22c55e;
}

.provider-tier-card__features .is-excluded svg {
  color: #94a3b8;
}

.provider-tier-card__actions {
  display: flex;
  margin-top: auto;
}

.provider-tier-card__actions .secondary-button {
  justify-content: center;
}

.provider-offer-compact-list {
  display: none;
}

.gallery-tier-float {
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(2, 132, 199, 0.08)),
    var(--surface);
}

.gallery-tier-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.gallery-tier-card {
  background: rgba(15, 23, 42, 0.84);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.26);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  padding: 16px;
}

.gallery-tier-card.is-current {
  border-color: rgba(34, 197, 94, 0.62);
  box-shadow: 0 18px 54px rgba(22, 163, 74, 0.14);
}

.gallery-tier-card__top {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.gallery-tier-card__top h3 {
  margin: 4px 0 0;
}

.gallery-tier-card__price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.gallery-tier-card__price strong {
  color: var(--text);
  font-size: clamp(1.75rem, 2vw, 2.35rem);
  line-height: 1;
}

.gallery-tier-card__price span {
  color: var(--muted);
  font-weight: 700;
}

.gallery-tier-card__features {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-tier-card__features li {
  align-items: center;
  color: rgba(226, 232, 240, 0.92);
  display: flex;
  gap: 8px;
  line-height: 1.35;
}

.gallery-tier-card__features svg {
  color: #22c55e;
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.gallery-tier-card__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.gallery-tier-card__actions .secondary-button {
  justify-content: center;
}

@media (max-width: 760px) {
  .rental-list-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .rental-list-tools {
    justify-content: flex-start;
  }

  .rental-item,
  .rental-items--list .rental-item {
    align-items: stretch;
    flex-direction: column;
  }

  .rental-item-thumb {
    aspect-ratio: 4 / 3;
    height: auto;
    width: 100%;
  }

  .rental-item-meta {
    align-items: start;
    justify-items: start;
    margin-left: 0;
    text-align: left;
  }

  .rental-tracker-strip {
    grid-template-columns: 1fr;
  }

  .equipment-photo-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gallery-subscription-hero-actions,
  .provider-tier-card__actions,
  .provider-tier-card__actions .secondary-button,
  .gallery-tier-card__actions,
  .gallery-tier-card__actions .secondary-button {
    align-items: stretch;
    width: 100%;
  }
}