:root {
    --ink: #f8f7ff;
    --muted: #9ca7bd;
    --line: rgba(148, 163, 184, 0.18);
    --paper: #050914;
    --panel: rgba(13, 22, 35, 0.84);
    --panel-strong: rgba(15, 24, 38, 0.94);
    --brand: #a855f7;
    --brand-strong: #7c3aed;
    --magenta: #ec4899;
    --violet-soft: rgba(124, 58, 237, 0.18);
    --cyan: #38bdf8;
    --danger: #fb7185;
    --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));
    --sidebar-bg: linear-gradient(180deg, #070b15 0%, #0a1020 54%, #050914 100%);
    --shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

* {
    box-sizing: border-box;
}

.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;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 17% 0%, rgba(124, 58, 237, 0.2), transparent 32%),
        radial-gradient(circle at 85% 8%, rgba(14, 165, 233, 0.12), transparent 28%),
        linear-gradient(180deg, #050914 0%, #07101c 100%);
    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;
    outline: 0;
    outline-offset: 0;
}

button,
.primary-button,
.secondary-button {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.74);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
}

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 {
    background: linear-gradient(135deg, var(--brand-strong), var(--brand) 62%, var(--magenta));
    border-color: var(--brand);
    color: #fff;
    font-weight: 700;
}

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

.primary-small {
    border-radius: 7px;
    min-height: 34px;
    padding: 7px 11px;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 232px;
    background: var(--sidebar-bg);
    color: #f7f1ff;
    padding: 22px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-right: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.18);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 20px;
    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,
.user-chip span,
.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: 22px;
    line-height: 1;
}

.brand small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}

.sidebar nav {
    display: grid;
    gap: 12px;
    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: 8px;
    display: flex;
    gap: 12px;
    min-height: 46px;
    padding: 11px 13px;
    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;
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 20px;
}

.command-icon {
    fill: none;
    flex: 0 0 auto;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 17px;
}

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

.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);
}

.sidebar-account {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    margin-top: auto;
    overflow: hidden;
}

.account-main {
    align-items: center;
    display: flex;
    gap: 12px;
    padding: 12px;
}

.account-avatar {
    align-items: center;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    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;
}

.account-main strong,
.account-main small {
    display: block;
}

.account-main small {
    color: #aeb3cd;
    font-weight: 700;
    line-height: 1.2;
}

.account-row {
    border-top: 1px solid rgba(148, 163, 184, 0.13);
    margin: 0;
}

.account-row button,
.account-row > span {
    align-items: center;
    background: transparent;
    border: 0;
    color: #e8e8f6;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    gap: 9px;
    min-height: 42px;
    padding: 0 13px;
    text-align: left;
    width: 100%;
}

.account-row button:hover {
    color: #fff;
}

.logout-form {
    margin-top: auto;
}

.logout-form button {
    width: 100%;
    background: transparent;
    color: #fff;
}

.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;
}

.user-chip {
    background: var(--card-gradient);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 2px;
    min-width: 220px;
    padding: 12px 14px;
}

.section,
.project-hero {
    background: var(--card-gradient);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    padding: 20px;
}

.section-heading,
.project-hero {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.section-heading {
    align-items: center;
    margin-bottom: 16px;
}

.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;
    outline: 0 !important;
    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;
    outline: 0 !important;
}

.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: 8px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 92px;
    padding: 12px;
    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: 4px;
}

.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: 8px;
    overflow-x: auto;
}

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

.table-wrap th,
.table-wrap td,
.row-link.project-name-link {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

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

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

.managed-users-table {
    min-width: 1120px;
    table-layout: fixed;
}

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

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

.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: 12px;
    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: 12px;
    justify-content: center;
    min-height: 42px;
    width: 100%;
}

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

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 12px 10px;
    text-align: left;
    vertical-align: middle;
}

th {
    background: rgba(15, 23, 42, 0.52);
    color: var(--muted);
    font-size: 12px;
    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;
    }

    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: 10px 0;
    }

    body:not(.login-screen) .table-wrap:not(.managed-users-wrap) td {
        align-items: start;
        border-bottom: 0;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
        min-width: 0;
        padding: 8px 10px;
    }

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

    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 .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;
    }

    .media-responsive-table tr {
        background: rgba(12, 16, 27, 0.48);
        border-bottom: 1px solid var(--line);
        padding: 10px 0;
    }

    .media-responsive-table td {
        align-items: start;
        border-bottom: 0;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
        min-width: 0;
        padding: 8px 10px;
    }

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

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

.badge {
    align-items: center;
    background: rgba(124, 58, 237, 0.18);
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: center;
    line-height: 1.15;
    min-height: 32px;
    padding: 5px 9px;
    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;
}

.kanban-column {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 220px;
    padding: 12px;
}

.kanban-column h3 {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.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);
}

.kanban-project-card {
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.kanban-project-card:hover,
.kanban-project-card:focus {
    border-color: rgba(139, 92, 246, 0.42);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    outline: none;
    transform: translateY(-1px);
}

.board-stage-groups {
    display: grid;
    gap: 18px;
}

.board-stage-group {
    display: grid;
    gap: 10px;
}

.board-stage-group-heading {
    align-items: end;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.board-stage-group-heading h3 {
    margin: 0;
}

.board-stage-group-heading span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.card-title-link {
    color: inherit;
    text-decoration: none;
}

.card-title-link:hover {
    text-decoration: underline;
}

.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: 4px;
}

.task-checklist button {
    min-height: 34px;
    padding: 6px 10px;
}

.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: 8px;
    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: 980px) {
    .section-heading .button-row {
        justify-content: flex-start;
    }
}

.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: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

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

.form-panel h3 {
    margin: 2px 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));
}

.bz-wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

.bz-wizard-step {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    flex: 1 1 132px;
    gap: 7px;
    max-width: 100%;
    min-width: 0;
}

.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);
    display: grid;
    gap: 8px;
    min-height: 128px;
    padding: 16px;
    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;
}

@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 {
    background: rgba(2, 6, 23, 0.64);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    min-height: 40px;
    padding: 9px 11px;
    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: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 {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    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;
}

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: 48px;
}

.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;
}

.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;
}

.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;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.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%;
    }
}

.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: 11px;
    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-sync-blocker {
    border-left: 3px solid var(--accent-2);
    padding-left: 10px;
}

.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);
}

.empty-state {
    color: var(--muted);
    padding: 16px 0;
}

.board-wide {
    overflow-x: auto;
    padding-bottom: 8px;
}

.board-wide .kanban-column {
    min-width: 260px;
}

.board-stage-group:first-child .board-wide {
    grid-template-columns: repeat(4, minmax(230px, 1fr));
}

.board-stage-group:last-child .board-wide {
    grid-template-columns: repeat(7, minmax(230px, 1fr));
}

.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"],
.solo-upload-form input[type="file"],
.equipment-command-dashboard input[type="file"] {
    color: #aeb8cc;
}

.upload-form input[type="file"]::file-selector-button,
.solo-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: 8px;
    color: #f8fafc;
    cursor: pointer;
    font-weight: 800;
    margin-right: 12px;
    min-height: 34px;
    padding: 0 12px;
}

.upload-form input[type="file"]::file-selector-button:hover,
.solo-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: 11px;
    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;
}

.login-panel {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    max-width: 480px;
    padding: 30px;
    width: 100%;
}

.login-panel .brand-mark {
    margin-bottom: 18px;
    width: 112px;
    height: 112px;
    background-color: transparent;
    background-size: contain;
    border: 0;
    box-shadow: none;
}

.demo-logins {
    border-top: 1px solid var(--line);
    color: var(--muted);
    display: grid;
    font-size: 13px;
    gap: 5px;
    margin-top: 18px;
    padding-top: 14px;
}

.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: 11px;
    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: 11px;
    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: 12px;
    color: var(--ink);
    padding: 14px;
}

.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: 11px;
    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: 8px;
    color: #f4efff;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    line-height: 1.15;
    min-height: 42px;
    padding: 0 14px;
    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 {
    color: #b983ff;
    font-weight: 800;
}

.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: 8px;
}

.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: 1180px) {
    .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: 6px;
    color: #bec5d8;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    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: 8px;
    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 4px;
    width: 138px;
}

.cal-date-jump button {
    background: transparent;
    border: 0;
    min-height: 34px;
    padding: 0 6px;
}

.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: 11px;
}

.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 {
    color: #d8dce5;
    font-weight: 800;
}

.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;
    min-height: 28px;
    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: 9px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.cal-mini-month b {
    color: #8f97ab;
}

.cal-mini-month a.muted {
    color: #626a7d;
}

.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: 11px;
    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: 11px;
    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: 10px;
    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-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: 11px;
    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 {
    display: grid;
    gap: 16px;
}

.crp-product-row {
    align-items: stretch;
    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 {
    display: grid;
    flex: 0 0 44%;
    gap: 14px;
    min-height: 390px;
    overflow: hidden;
    position: relative;
}

.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: 8px;
    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 {
    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-details hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    margin: 18px 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: 12px 54px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crp-specs div {
    display: grid;
    grid-template-columns: 160px 1fr;
}

.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 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-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-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 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: 980px) {
    .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 {
        grid-template-columns: 1fr;
    }

    .crp-product-row,
    .crp-topline,
    .crp-simple-head {
        align-items: stretch;
        flex-direction: column;
    }

    .crp-gallery {
        flex-basis: 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;
    }
}

/* Suno-inspired dark creative-console theme for beetzee. */
:root {
    --ink: #f4f2f7;
    --muted: #9b97a4;
    --line: rgba(255, 255, 255, 0.09);
    --paper: #0d0d10;
    --panel: #1b1b1f;
    --panel-soft: #222126;
    --brand: #d74dff;
    --brand-strong: #8d4dff;
    --magenta: #ff3fb7;
    --violet-soft: rgba(215, 77, 255, 0.12);
    --cyan: #7fdede;
    --danger: #ff6b9c;
    --shadow: 0 16px 50px rgba(0, 0, 0, 0.38);
}

body {
    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%),
        #0d0d10;
    color: var(--ink);
}

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 {
    background: rgba(13, 13, 16, 0.96);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 18px 0 45px rgba(0, 0, 0, 0.24);
    gap: 22px;
    padding: 26px 12px 18px;
    width: 224px;
}

.brand {
    border-bottom: 0;
    gap: 10px;
    padding: 0 8px 14px;
}

.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: 24px;
    font-weight: 800;
    letter-spacing: 0;
}

.brand small {
    color: #a6a2ac;
    font-size: 11px;
    font-weight: 700;
}

.sidebar nav {
    gap: 3px;
    overflow-y: auto;
    padding-right: 2px;
}

.nav-section-label {
    color: #77737f;
    font-size: 10px;
    margin: 13px 10px 5px;
}

.sidebar nav a {
    border-radius: 999px;
    color: #bdb9c6;
    font-size: 14px;
    font-weight: 800;
    gap: 10px;
    min-height: 38px;
    padding: 8px 12px;
}

.sidebar nav a.active,
.sidebar nav a:hover {
    background: #333136;
    box-shadow: none;
    color: #ffffff;
}

.nav-icon {
    height: 17px;
    width: 17px;
}

.sidebar-account {
    background: #16161a;
    border-color: rgba(255, 255, 255, 0.11);
    border-radius: 10px;
}

.account-main {
    padding: 10px;
}

.account-avatar {
    background: linear-gradient(135deg, #5b54ff, #c53eff);
}

.account-row {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.account-row button,
.account-row > span {
    color: #d8d5df;
}

.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 {
    gap: 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 {
    color: #8d8a99;
    cursor: default;
    display: block;
    font-size: 0.64rem;
    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 {
    cursor: pointer;
    display: flex;
    margin-bottom: 8px;
    min-height: 28px;
    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 {
    background:
        radial-gradient(circle at 78% 0%, rgba(138, 92, 246, 0.22), transparent 42%),
        linear-gradient(145deg, rgba(23, 18, 44, 0.98), rgba(15, 12, 29, 0.98));
    border: 1px solid rgba(137, 115, 255, 0.13);
    border-radius: 8px;
    color: #ffffff;
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding: 16px 14px;
}

.client-upgrade-card > span {
    align-items: center;
    background: linear-gradient(135deg, #5f34d0, #b05cff);
    border-radius: 7px;
    color: #ffd166;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.client-upgrade-card .nav-icon {
    height: 17px;
    width: 17px;
}

.client-upgrade-card strong {
    font-size: 0.86rem;
    line-height: 1.25;
}

.client-upgrade-card small {
    color: #beb8ce;
    font-size: 0.76rem;
    line-height: 1.55;
}

.client-upgrade-card a {
    align-items: center;
    background: linear-gradient(135deg, #6f3bd8, #4b279f);
    border-radius: 5px;
    color: #fff;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 850;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    text-decoration: none;
}

.main {
    margin-left: 224px;
    min-height: 100vh;
    padding: 42px 46px 64px;
}

/* The mobile menu is a plainly labelled control, never a floating mystery shape. */
.bz-mobile-menu-toggle {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #f8f7ff;
    display: none;
    gap: 8px;
    min-height: 0;
    padding: 6px 0;
}
.bz-mobile-menu-toggle .bz-menu-word {
    display: none;
    font-size: 14px;
    font-weight: 700;
}
.bz-mobile-menu-toggle > span:not(.sr-only):not(.bz-menu-word) {
    background: #f8f7ff;
    border-radius: 2px;
    display: block;
    height: 2px;
    margin: 2px 0;
    width: 18px;
}

@media (max-width: 980px) {
    .bz-mobile-menu-toggle {
        display: inline-flex;
        flex-direction: row;
        left: 16px;
        position: fixed;
        top: 14px;
        width: auto;
        z-index: 120;
    }
    .bz-mobile-menu-toggle .bz-menu-word { display: inline; }
    .main { padding-top: 76px; }
}

.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;
    min-height: 0;
    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.2);
    outline: none;
}

.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: 11px;
}

.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-beetz-chip {
    align-items: center;
    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;
    min-height: 42px;
    padding: 0 14px;
    text-decoration: none;
    white-space: nowrap;
}

.account-beetz-chip:hover {
    background: rgba(39, 32, 64, 0.92);
    border-color: rgba(168, 85, 247, 0.5);
}

.account-beetz-chip .command-icon {
    color: #a855f7;
}

.account-menu-details {
    position: relative;
}

.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: 11px;
    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 {
    flex: 1 1 auto;
    max-width: 37ch;
}

.account-menu-photo {
    align-items: center;
    background: linear-gradient(135deg, #5b54ff, #c53eff);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    flex: 0 0 42px;
    font-size: 12px;
    font-weight: 850;
    height: 42px;
    justify-content: center;
    object-fit: cover;
    overflow: hidden;
    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: 11px;
    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: 8px;
    color: #fff;
    font: inherit;
    font-weight: 800;
    min-height: 38px;
    padding: 0 10px;
    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: 14px;
    font-weight: 800;
    gap: 10px;
    justify-content: flex-start;
    min-height: 42px;
    padding: 0 10px;
    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;
}

.topbar-account-floating {
    position: absolute;
    right: 28px;
    top: 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);
    }
}

.user-chip,
.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: 22px;
    padding: 22px;
}

.section-heading {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 14px;
}

h1,
h2,
h3,
.account-main strong,
.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;
}

.user-chip {
    border-radius: 10px;
    min-width: 210px;
}

.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 {
    background: #2b2a30;
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #ffffff;
    box-shadow: none;
}

button:hover,
.secondary-button:hover {
    background: #343238;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

.primary-button,
.primary-small {
    background: #323038;
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.primary-button:hover,
.primary-small:hover {
    background: #3a3741;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

input,
select,
textarea {
    background: #151519;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8f6fb;
}

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,
.card-title-link:hover,
.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 {
    background: linear-gradient(90deg, #8d4dff, #d74dff, #ff3fb7);
}

.kanban-column {
    background: rgba(22, 22, 26, 0.94);
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.kanban-column h3 {
    color: #ffffff;
}

.kanban-project-card:hover,
.kanban-project-card:focus {
    border-color: rgba(215, 77, 255, 0.42);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
}

.board-stage-group-heading {
    padding: 0 2px;
}

.board-stage-group-heading h3 {
    color: #ffffff;
}

.board-shell {
    color: #f8fafc;
    display: grid;
    gap: 18px;
    min-width: 0;
}

.board-command-header,
.board-toolbar,
.board-stage-strip,
.board-legend {
    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-stage-strip span,
.board-card-body small,
.board-card-body > span,
.board-empty {
    color: rgba(226, 232, 240, 0.72);
}

.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-stage-strip {
    flex-wrap: wrap;
}

.board-stage-strip span {
    background: rgba(15, 23, 42, 0.56);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    padding: 9px 12px;
}

.board-stage-strip b {
    color: #fff;
    display: block;
    font-size: 12px;
}

.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: 10px;
}

.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: 11px;
    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;
}

.reports-board-inline .board-kanban {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
    min-height: 0;
    overflow-x: visible;
    scroll-snap-type: none;
}

.reports-board-inline .board-column {
    min-height: 280px;
}

.reports-board-inline .board-delete-popover[open] form {
    margin-top: 6px;
    position: static;
    width: 100%;
}

.reports-board-inline .board-delete-popover form {
    left: 0;
    right: auto;
}

.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,
.board-legend i.tone-blue {
    background: #1f8bff;
}

.board-column.tone-orange::before,
.board-legend i.tone-orange {
    background: #f97316;
}

.board-column.tone-yellow::before,
.board-legend i.tone-yellow {
    background: #eab308;
}

.board-column.tone-green::before,
.board-legend i.tone-green {
    background: #22c55e;
}

.board-column.tone-purple::before,
.board-legend i.tone-purple {
    background: #8b5cf6;
}

.board-column.tone-indigo::before,
.board-legend i.tone-indigo {
    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: 10px;
}

.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 {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-card-body small,
.board-card-body > span {
    font-size: 11px;
    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: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.board-commercial-money dd {
    color: #f8f6ff;
    font-size: 11px;
    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: 11px;
}

.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: 10px;
    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: 10px;
    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: 9px;
    font-weight: 900;
    gap: 3px;
    letter-spacing: 0.08em;
    margin: 0;
    min-width: 0;
    text-transform: uppercase;
}

.board-money-form input {
    border-radius: 8px;
    font-size: 11px;
    min-height: 32px;
    min-width: 0;
    padding: 7px 8px;
    width: 100%;
}

.board-money-form .secondary-button {
    border-radius: 8px;
    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: 10px;
    line-height: 1.2;
    min-height: 0;
    padding: 3px 6px;
    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: 11px;
    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;
    background: linear-gradient(135deg, #1f8bff, #8b5cf6);
    color: #fff;
    display: inline-flex;
    font-size: 9px;
    font-weight: 800;
    justify-content: center;
}

.board-staff-link {
    color: rgba(226, 232, 240, 0.82);
    font-size: 11px;
    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: 11px;
    max-width: 92px;
    min-height: 28px;
}

.board-group-label,
.board-add-card,
.board-empty {
    font-size: 12px;
    margin: 0;
    padding: 7px;
    text-align: center;
}

.board-group-label {
    color: #c4b5fd;
    font-weight: 800;
    text-transform: uppercase;
}

.board-add-card {
    color: #c084fc;
    text-decoration: none;
}

.board-legend {
    background: rgba(15, 23, 42, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
}

.board-legend span {
    align-items: center;
    color: #f8fafc;
    display: inline-flex;
    font-size: 12px;
    gap: 7px;
}

.board-legend i {
    border-radius: 999px;
    display: inline-block;
    height: 10px;
    width: 10px;
}

@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;
}

.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;
}

.login-panel {
    background: rgba(31, 31, 35, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #f4f2f7;
}

.project-stage-panel {
    display: grid;
    gap: 10px;
    margin: 14px 0 12px;
    min-width: 0;
    overflow: hidden;
}

.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-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-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.72rem;
    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 {
    background:
        radial-gradient(circle at 17% 0%, rgba(117, 49, 255, 0.22), transparent 34%),
        radial-gradient(circle at 78% 16%, rgba(52, 139, 255, 0.08), 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;
}

.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-status-wrap,
.mc-workload a,
.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 {
    background: #ff3864;
    border-radius: 999px;
    font-size: 10px;
    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 {
    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);
}

.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;
    font-size: 29px;
    line-height: 1;
    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 {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.32), rgba(15, 23, 42, 0));
    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: #a26bff;
    font-size: 13px;
    font-weight: 800;
}

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

.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: 6px;
    color: #a9a8b7;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    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-project-strip {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(170px, 220px));
    justify-content: start;
    overflow: visible;
}

.mc-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;
    min-width: 0;
    overflow: hidden;
    padding: 10px;
}

.mc-project-card img {
    aspect-ratio: 16 / 8.35;
    border-radius: 7px;
    object-fit: cover;
    width: 100%;
}

.mc-project-card strong,
.mc-project-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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-project-card p {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.mc-project-card b {
    color: #fff;
}

.mc-project-card em {
    background: rgba(141, 80, 255, 0.2);
    border-radius: 999px;
    color: #c99dff;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    max-width: 110px;
    overflow: hidden;
    padding: 3px 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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-status-wrap {
    gap: 20px;
    min-width: 0;
}

.mc-project-progress-panel .mc-status-wrap {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(178px, 1fr) minmax(76px, auto);
}

.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-dashboard-donut {
    flex-basis: clamp(178px, 15vw, 210px);
    height: clamp(178px, 15vw, 210px);
    width: clamp(178px, 15vw, 210px);
}

.mc-dashboard-donut::after {
    height: 54%;
    width: 54%;
}

.mc-dashboard-donut span {
    font-size: 13px;
}

.mc-dashboard-donut b {
    font-size: 32px;
}

.mc-legend,
.mc-workload,
.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-workload a {
    color: #f7f4ff;
    display: grid;
    gap: 10px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas:
        "avatar name percent"
        "avatar bar bar";
    min-width: 0;
}

.mc-avatar {
    border-radius: 50%;
    grid-area: avatar;
    height: 32px;
    object-fit: cover;
    width: 32px;
}

.mc-avatar.fallback {
    align-items: center;
    background: linear-gradient(135deg, #8d50ff, #1894ff);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    justify-content: center;
}

.mc-workload a > span:not(.mc-avatar) {
    grid-area: name;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-workload i {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    grid-area: bar;
    height: 7px;
    overflow: hidden;
}

.mc-workload i b {
    background: linear-gradient(90deg, #8d50ff, #df4bff);
    display: block;
    height: 100%;
}

.mc-workload em {
    color: #a9a8b7;
    font-size: 12px;
    font-style: normal;
    grid-area: percent;
    text-align: right;
}

.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: #a26bff;
    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: 1 1 320px;
        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 {
        flex: 1 1 360px;
        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);
    }

    .mc-project-strip {
        grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
    }
}

@media (max-width: 900px) {
    .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,
    .mc-attention-grid {
        grid-template-columns: 1fr;
    }

    .mc-project-strip {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
        overflow: visible;
        padding-bottom: 0;
    }

    .mc-project-card {
        min-width: 0;
    }
}

.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: 14px;
    line-height: 1.5;
    margin: 6px 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: 12px;
}

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);
}

.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: 999px;
    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: 12px;
    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: 11px;
    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;
    background: linear-gradient(135deg, #8d50ff, #1498ff);
    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-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,
.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;
}

.staff-metrics {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    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;
    font-size: 28px;
    line-height: 1;
}

.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 {
    color: #a26bff;
    font-size: 13px;
    font-weight: 800;
}

.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: 11px;
    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: 6px;
    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: #a26bff;
    color: #a26bff;
}

.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: 8px;
    color: #fff;
    min-width: 0;
    padding: 11px 12px;
    width: 100%;
}

.staff-time-actions button {
    background: linear-gradient(135deg, #7338ff, #a843ff);
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-weight: 800;
    padding: 0 14px;
    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;
    display: grid;
    gap: 10px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
}

.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;
    background:
        linear-gradient(90deg, rgba(95, 28, 178, 0.72), rgba(33, 17, 58, 0.86)),
        url("sample-assets/photos/sample-9.svg") right center / 240px 100% no-repeat;
    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: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    padding: 18px;
}

.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: 18px;
    padding-bottom: 16px;
}

.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 {
    background: linear-gradient(135deg, #8d4dff, #ff3fb7);
    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 {
    color: #aaa5b0;
    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: 980px) {
    .sidebar {
        position: static;
        width: auto;
    }

    .settings-hero {
        flex-direction: column;
    }

    .settings-hero-status {
        min-width: 0;
    }

    .main {
        margin-left: 0;
        padding: 22px 16px 44px;
    }

    .topbar-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .global-search,
    .topbar-account-menu,
    .account-menu-trigger,
    .user-chip {
        max-width: none;
        width: 100%;
    }

    .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 {
  color: #b783ff;
  font-weight: 800;
  font-size: 0.88rem;
}

.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 {
  color: #818798;
  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;
  color: #8f96aa;
  font-weight: 700;
}

.acd-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.72rem;
  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: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #dfe4f2;
  text-align: left;
}

.acd-table th {
  color: #8790a3;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.acd-table small {
  display: block;
  margin-top: 4px;
  color: #8f96aa;
}

.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-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 2px 0 22px;
}

.ccd-hero h2 {
  margin: 0 0 6px;
  font-size: clamp(1.75rem, 2.5vw, 2.4rem);
  letter-spacing: 0;
}

.ccd-hero p {
    color: #a7b0c2;
}

.ccd-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.ccd-metric,
.ccd-panel {
  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,
.ccd-list i {
  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,
.ccd-list i.green { background: linear-gradient(135deg, #22c55e, #15803d); }
.ccd-metric.blue em,
.ccd-list i.blue { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.ccd-metric.amber em { background: linear-gradient(90deg, #f59e0b, #f97316); }
.ccd-metric.violet em,
.ccd-list i.purple { background: linear-gradient(135deg, #8b5cf6, #d946ef); }

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

.ccd-beetz-breakdown {
  margin-bottom: 16px;
}

.beetz-branch-breakdown {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.beetz-branch-breakdown article {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 12px;
}

.beetz-branch-breakdown span,
.beetz-branch-breakdown small {
  color: #a7b0c2;
}

.beetz-branch-breakdown strong {
  color: #fff;
  font-size: 1.12rem;
}

.ccd-panel {
  padding: 18px;
}

.ccd-wide {
  grid-column: span 2;
}

.ccd-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ccd-panel-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.ccd-panel-head a {
  color: #c084fc;
  font-weight: 800;
}

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

.ccd-project-card {
  position: relative;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.ccd-project-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
  border-radius: 6px;
}

.ccd-project-card > b {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(109, 40, 217, 0.95);
  font-size: 1.15rem;
}

.ccd-project-card strong,
.ccd-project-card small,
.ccd-project-card > span {
  display: block;
  margin-top: 10px;
}

.ccd-project-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin: 14px 0;
}

.ccd-project-card dt {
  color: #9099ad;
  font-size: 0.78rem;
}

.ccd-project-card dd {
  margin: 0;
  font-weight: 800;
}

.ccd-project-card > span,
.ccd-panel-button {
  display: grid;
  place-items: center;
  min-height: 42px;
  margin-top: 12px;
  border-radius: 7px;
  background: rgba(139, 92, 246, 0.18);
  color: #eadcff;
  font-weight: 800;
}

/* 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;
  grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1.1fr);
  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;
  font-size: clamp(2.25rem, 3.6vw, 4rem);
  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-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 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.06);
  border-radius: 8px;
}

.client-my-galleries-head {
  align-items: center;
}

.client-my-galleries-empty {
  background: rgba(11, 15, 23, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}

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

.client-gallery-row {
  align-items: center;
  background: rgba(10, 14, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 18px;
}

.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__main,
.client-gallery-row__title,
.client-gallery-row__status,
.client-gallery-row__actions {
  min-width: 0;
}

.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: 1rem;
  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: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 12px 0 0;
}

.client-gallery-row__details div {
  display: flex;
  gap: 6px;
}

.client-gallery-row__details dt,
.client-gallery-row__details dd {
  color: #bdb8ca;
  font-size: 0.82rem;
  margin: 0;
}

.client-gallery-row__details dt {
  color: #817b93;
  font-weight: 800;
}

.client-gallery-row__status,
.client-gallery-row__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.client-gallery-row__actions .primary-button,
.client-gallery-row__actions .secondary-button,
.client-my-galleries-head .primary-button,
.client-my-galleries-empty .primary-button {
  min-height: 38px;
  padding: 0 14px;
}

.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;
  width: max-content;
}

.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;
  background: linear-gradient(135deg, #5b54ff, #c53eff);
  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,
.cgd-account-person p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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-qr {
  align-items: center;
  display: grid;
  gap: 6px;
  justify-items: center;
  max-width: 84px;
}

.cgd-account-qr img {
  background: #fff;
  border-radius: 6px;
  display: block;
  height: 72px;
  padding: 5px;
  width: 72px;
}

.cgd-account-qr code {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #d8d4e8;
  display: block;
  font-size: 0.62rem;
  max-width: 84px;
  overflow: hidden;
  padding: 3px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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(5, minmax(0, 1fr));
  margin-bottom: 26px;
}

.cgd-dashboard-metrics .ccd-metric {
  min-height: 132px;
  padding: 16px;
}

.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;
  grid-template-columns: 152px minmax(0, 1fr);
  min-height: 216px;
  overflow: hidden;
}

.cgd-current-project-card > img {
  height: 100%;
  min-height: 216px;
  object-fit: cover;
  width: 100%;
}

.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: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.cgd-current-project-card dd {
  color: #f8f5ff;
  font-size: 0.86rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cgd-current-project-card a {
  align-items: center;
  background: rgba(139, 92, 246, 0.24);
  border: 1px solid rgba(192, 132, 252, 0.36);
  border-radius: 6px;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 850;
  justify-content: center;
  justify-self: start;
  min-height: 38px;
  padding: 9px 16px;
}

.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 i.gray {
  background: rgba(148, 163, 184, 0.18);
}

.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;
  gap: 16px;
  justify-content: space-between;
}

.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;
  color: #a855f7;
  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: 8px;
  color: #ffffff;
  font-size: 1rem;
  min-height: 54px;
  padding: 14px 18px;
}

.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 {
  height: 18px;
  margin: 0;
  min-height: 18px;
  padding: 0;
  width: 18px;
}

.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: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  overflow: visible;
}

.cgd-create-page .bz-wizard-step {
  flex: 1 1 128px;
  min-width: min(128px, 100%);
}

@media (max-width: 760px) {
  .cgd-create-page .bz-wizard-step {
    flex-basis: calc(50% - 5px);
  }
}

@media (max-width: 420px) {
  .cgd-create-page .bz-wizard-step {
    flex-basis: 100%;
  }
}

.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: 8px;
  min-height: 62px;
  width: 100%;
}

.cgd-create-submit {
  align-items: center;
  background: linear-gradient(135deg, #5826b5 0%, #7c3aed 58%, #8b5cf6 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;
  background: linear-gradient(135deg, #7c3aed, #38bdf8);
  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-stat-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.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;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 152px;
  overflow: hidden;
}

.profile-project-card img {
  height: 100%;
  min-height: 152px;
  object-fit: cover;
  width: 100%;
}

.profile-project-card > div {
  display: grid;
  gap: 7px;
  padding: 14px;
}

.profile-project-card strong {
  color: #ffffff;
  font-size: 1.05rem;
}

.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;
}

.ccd-schedule,
.ccd-list,
.ccd-media-grid {
  display: grid;
  gap: 12px;
}

.ccd-schedule a,
.ccd-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.ccd-schedule time {
  display: grid;
  place-items: center;
  width: 44px;
  height: 54px;
  border-radius: 8px;
  background: linear-gradient(180deg, #6d28d9 0 38%, #f8fafc 38% 100%);
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.ccd-schedule time strong {
  color: #111827;
  font-size: 1.1rem;
}

.ccd-schedule b,
.ccd-list strong {
  display: block;
}

.ccd-schedule small,
.ccd-list small {
  display: block;
  margin-top: 3px;
  color: #9aa4b7;
}

.ccd-schedule em {
  display: inline-block;
  width: max-content;
  margin-top: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.22);
  color: #e9d5ff;
  font-style: normal;
  font-size: 0.76rem;
}

.ccd-media-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ccd-media-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 7px;
}

.ccd-media-grid strong,
.ccd-media-grid small {
  display: block;
  margin-top: 8px;
}

.ccd-media-grid small {
  color: #8ee6a2;
}

.ccd-media-grid.video a {
  min-height: 118px;
  padding: 14px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55)),
    url("sample-assets/photos/sample-8.svg") center / cover;
}

.ccd-media-grid.video span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.ccd-list i {
  color: #fff;
}

.ccd-list b {
  color: #fff;
}

.ccd-beetz-banner {
  align-items: center;
  background:
    radial-gradient(circle at 60% 18%, rgba(216, 180, 254, 0.28), transparent 18%),
    radial-gradient(circle at 78% 50%, rgba(124, 58, 237, 0.42), transparent 24%),
    linear-gradient(100deg, rgba(42, 16, 84, 0.96), rgba(90, 34, 180, 0.78), rgba(9, 15, 28, 0.96));
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(76, 29, 149, 0.24);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin-top: 18px;
  min-height: 106px;
  overflow: hidden;
  padding: 24px 30px;
}

.ccd-beetz-banner b,
.ccd-beetz-banner small,
.ccd-beetz-banner em {
  display: block;
}

.ccd-beetz-banner b {
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
}

.ccd-beetz-banner small {
  color: #ddd6fe;
  margin-top: 4px;
}

.ccd-beetz-banner em {
  background: rgba(139, 92, 246, 0.56);
  border-radius: 7px;
  color: #ffffff;
  font-style: normal;
  font-weight: 800;
  margin-top: 13px;
  padding: 8px 18px;
  width: max-content;
}

.ccd-beetz-banner strong {
  color: #ffffff;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
}

.ccd-beetz-banner .command-icon {
  color: #f5e8ff;
}

.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-actions,
.solo-progress-summary,
.solo-panel-head,
.solo-review-panel,
.solo-review-form > div {
  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-outline-button,
.solo-primary-button,
.solo-question-card a,
.solo-question-card button,
.solo-review-form button,
.solo-upload-form button,
.solo-message-form button,
.solo-next-milestone a,
.solo-next-milestone button,
.solo-payment-card a,
.solo-payment-card button,
.solo-panel-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.solo-outline-button,
.solo-payment-card a,
.solo-payment-card button,
.solo-panel-head button {
  border: 1px solid rgba(226, 232, 240, 0.28);
  background: rgba(15, 23, 42, 0.42);
  color: #f8fafc;
}

.solo-primary-button,
.solo-question-card a,
.solo-question-card button,
.solo-review-form button,
.solo-upload-form button,
.solo-message-form button,
.solo-next-milestone a,
.solo-next-milestone button {
  border: 0;
  background: linear-gradient(135deg, #7c3aed, #b43dff);
  color: #fff;
  box-shadow: 0 18px 36px rgba(124, 58, 237, 0.22);
}

.solo-hero-card,
.solo-tabs-card,
.solo-panel {
  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,
.solo-panel small,
.solo-panel dt {
  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;
  background: linear-gradient(135deg, #7c3aed, #38bdf8);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}

.solo-owner-card .solo-avatar {
  grid-row: 1 / span 3;
}

.solo-stage-rail {
  display: grid;
  grid-template-columns: repeat(11, minmax(118px, 1fr));
  gap: 0;
  overflow-x: auto;
  padding: 10px 0 2px;
}

.solo-stage-rail span {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 118px;
  color: #9aa6bb;
}

.solo-stage-rail span::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 30px;
  right: 0;
  height: 2px;
  background: rgba(148, 163, 184, 0.24);
}

.solo-stage-rail i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.35);
  background: #0b1120;
  color: #cbd5e1;
  font-style: normal;
  font-weight: 800;
}

.solo-stage-rail .done i {
  border-color: #4ade80;
  background: #16a34a;
  color: #fff;
}

.solo-stage-rail .active {
  color: #e9d5ff;
}

.solo-stage-rail .active i {
  border-color: #a855f7;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18);
}

.solo-tabs-card {
  overflow: hidden;
}

.solo-tabs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.solo-tabs a,
.solo-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #cbd5e1;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.solo-tabs a.active,
.solo-tabs button.active {
  border-color: #c084fc;
  color: #fff;
  text-shadow: 0 0 18px rgba(192, 132, 252, 0.55);
}

.solo-tabs span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.4);
  color: #fff;
  font-size: 0.78rem;
}

.solo-tab-panel {
  display: none;
  padding: 16px;
}

.solo-tab-panel.active {
  display: block;
}

.solo-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
  gap: 16px;
}

.solo-left-stack,
.solo-right-stack {
  display: grid;
  gap: 16px;
}

.solo-panel {
  padding: 22px;
}

.solo-overview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
  gap: 24px;
}

.solo-overview-card h3,
.solo-panel h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
}

.solo-overview-card p {
  color: #c5cee0;
}

.solo-overview-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  margin: 24px 0 0;
}

.solo-overview-card dd,
.solo-payment-card dd {
  margin: 4px 0 0;
  color: #fff;
  font-weight: 800;
}

.solo-overview-card img {
  width: 100%;
  min-height: 220px;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.solo-status-card {
  display: grid;
  grid-template-columns: auto 1fr minmax(220px, 0.45fr);
  gap: 18px;
  align-items: center;
}

.solo-status-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #d946ef);
}

.solo-status-card p {
  color: #b6c0d4;
}

.solo-next-milestone {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  border-left: 1px solid rgba(148, 163, 184, 0.16);
}

.solo-next-milestone a,
.solo-next-milestone button {
  margin-top: 6px;
}

.solo-panel-head {
  justify-content: space-between;
  margin-bottom: 14px;
}

.solo-panel-head a,
.solo-panel-head button {
  color: #d38cff;
  font-weight: 800;
}

.solo-team-card {
  display: grid;
  gap: 14px;
}

.solo-team-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.solo-team-row.muted {
  opacity: 0.86;
}

.solo-team-row small,
.solo-document-list small,
.solo-message-list small {
  display: block;
  margin-top: 4px;
}

.solo-payment-card > strong {
  color: #4ade80;
  font-size: 1.65rem;
}

.solo-payment-card > span {
  float: right;
  color: #fff;
  font-weight: 800;
}

.solo-payment-card p {
  margin: 6px 0 12px;
  color: #aab5c9;
}

.solo-payment-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0 0;
}

.solo-question-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}

.solo-question-card p {
  margin: 0;
  color: #aab5c9;
}

.solo-timeline-list,
.solo-document-list,
.solo-message-list {
  display: grid;
  gap: 12px;
}

.solo-timeline-list article,
.solo-document-list article,
.solo-message-list article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
}

.solo-timeline-list article > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  font-weight: 800;
}

.solo-timeline-list .done {
  background: rgba(34, 197, 94, 0.22);
  color: #86efac;
}

.solo-timeline-list .review {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}

.solo-media-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.solo-media-tile {
  display: block;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
}

.solo-media-tile img,
.solo-media-tile.video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 7px;
}

.solo-media-tile.video {
  display: grid;
  align-content: end;
  min-height: 180px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.65)),
    url("sample-assets/photos/sample-8.svg") center / cover;
}

.solo-media-tile strong,
.solo-media-tile small {
  display: block;
  margin-top: 8px;
}

.solo-upload-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}

.solo-upload-form label,
.solo-message-form,
.solo-review-form {
  display: grid;
  gap: 7px;
}

.solo-upload-form input,
.solo-message-form textarea,
.solo-review-form textarea {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.6);
  color: #fff;
  padding: 12px;
}

.solo-message-form {
  margin-bottom: 18px;
}

.solo-message-list p {
  margin: 6px 0;
  color: #d6deea;
}

.solo-review-panel {
  justify-content: space-between;
}

.solo-review-panel p {
  margin: 0;
  color: #aab5c9;
}

.solo-review-form {
  min-width: min(520px, 100%);
}

.solo-review-form button:first-child {
  background: linear-gradient(135deg, #16a34a, #22c55e);
}

@media (max-width: 1180px) {
  .solo-progress-summary,
  .solo-main-grid,
  .solo-overview-card,
  .solo-status-card,
  .solo-review-panel {
    grid-template-columns: 1fr;
  }

  .solo-due-card,
  .solo-owner-card,
  .solo-next-milestone {
    padding-left: 0;
    border-left: 0;
  }

  .solo-media-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .solo-project-head,
  .solo-actions,
  .solo-question-card,
  .solo-review-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .solo-hero-card,
  .solo-panel {
    padding: 16px;
  }

  .solo-overview-card dl,
  .solo-upload-form,
  .solo-media-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .ccd-metrics,
  .cgd-dashboard-metrics,
  .ccd-layout {
    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(3, minmax(0, 1fr));
  }

  .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;
  }

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

  .ccd-wide {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .ccd-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .ccd-metrics,
  .cgd-dashboard-metrics,
  .ccd-layout,
  .ccd-project-grid,
  .profile-stat-grid,
  .profile-project-grid,
  .ccd-media-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-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 {
    grid-template-columns: 1fr;
  }

  .cgd-current-project-card > img {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .cgd-current-project-card dl {
    grid-template-columns: 1fr;
  }

  .profile-project-card {
    grid-template-columns: 1fr;
  }

  .profile-project-card img {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .ccd-wide {
    grid-column: auto;
  }

  .ccd-beetz-banner {
    grid-template-columns: 1fr;
    padding: 22px;
  }
}

.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;
  overflow: 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 {
  min-height: auto;
  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))),
    var(--login-bg-image, url("../sample-assets/login/beetzee-login-camera-r5.png")) 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(118px, 17vh, 168px);
  margin: 0 auto -2px;
  max-width: min(168px, 48vw);
  object-fit: contain;
  width: clamp(118px, 17vh, 168px);
}

.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;
  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: 22px;
}

.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;
  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;
}

.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;
  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: 14px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 0;
  min-width: 0;
  outline: 0;
  padding: 0 0 0 6px;
  width: auto;
}

.login-input-wrap input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.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: 14px;
  font-weight: 800;
  gap: 18px;
  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(132px, 34vw);
    width: min(132px, 34vw);
  }

  .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;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  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: 11px;
  letter-spacing: 0.04em;
  padding: 18px 14px;
  text-align: left;
  text-transform: uppercase;
}

.contract-table td {
  border-top: 1px solid rgba(148, 163, 184, 0.09);
  color: #e5e7eb;
  padding: 16px 14px;
  vertical-align: middle;
}

.contract-table small,
.contract-title-cell small,
.contract-party-cell small,
.contract-table td > small {
  color: #9aa4b5;
  display: block;
  margin-top: 4px;
}

.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: 999px;
  color: #e5e7eb;
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

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

.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 {
  color: #64748b;
  opacity: 0.55;
}

.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 {
  color: #c084fc;
  font-weight: 800;
  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: 10px;
  grid-template-columns: 24px 1fr auto;
  padding: 8px 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: 8px;
  color: #f8fafc;
  min-height: 44px;
  padding: 10px 12px;
}

.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-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: 11px;
  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: 999px;
  color: #d8b4fe;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  min-height: 30px;
  padding: 4px 10px;
}

.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: 8px;
  color: #f8fafc;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
}

.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: 8px;
  color: #f8fafc;
  min-height: 40px;
  padding: 10px 12px;
}

.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;
}

@media (max-width: 1180px) {
  .contracts-hero,
  .contracts-grid-layout,
  .contract-create-panel,
  .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-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;
  font-size: 26px;
  line-height: 1;
}

.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;
}

.client-gallery-info-card dd {
  color: #f8fafc;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-gallery-quick-card > div {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.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: 8px;
  color: #f8fafc;
  min-height: 40px;
  padding: 0 12px;
}

.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: 11px;
  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: 11px;
  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: 8px;
  color: #f8fafc;
  display: inline-flex;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  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: 50%;
  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: 8px;
  color: #f8fafc;
  min-height: 42px;
  padding: 0 12px;
}

.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-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.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: 8px;
  width: 100%;
  min-height: 54px;
  border: 1px solid #d8d9e6;
  border-radius: 8px;
  padding: 0 16px;
  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: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.payment-method-option {
  position: relative;
  min-height: 92px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.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.68rem;
}

.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;
}

.payment-method-option strong {
  color: #111827;
  margin-bottom: 4px;
}

.payment-method-option small {
  color: #64748b;
  line-height: 1.35;
}

.payment-method-option i {
  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;
}

.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-method-grid {
    grid-template-columns: 1fr;
  }
}

/* Dashboard layout guardrails: one page scrollbar, no top-right collisions. */
html {
  overflow-x: hidden;
  overflow-y: auto;
}

body:not(.login-screen) {
  overflow-x: hidden;
  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 {
  max-width: min(390px, calc(100vw - 36px));
  z-index: 30;
}

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;
  flex: 1 1 560px;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  max-width: 100%;
  min-width: 0;
}

body:not(.login-screen) .mc-search {
  flex: 1 1 360px;
  max-width: 520px;
  min-width: min(360px, 100%);
}

body:not(.login-screen) .mc-round-action {
  flex: 0 0 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: 1280px) {
  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: 980px) {
  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 {
    right: 16px;
    top: 16px;
  }

  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;
}

.bz-wizard-modal {
  align-items: center;
  background: rgba(3, 7, 18, 0.72);
  backdrop-filter: blur(12px);
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 22px;
  position: fixed;
  z-index: 1200;
}

.bz-wizard-modal[hidden] {
  display: none;
}

.bz-wizard-dialog {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(24, 18, 38, 0.98));
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 12px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  display: grid;
  gap: 14px;
  max-height: min(86vh, 900px);
  max-width: 980px;
  overflow: auto;
  padding: 18px;
  width: min(100%, 980px);
}

.bz-wizard-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.bz-wizard-head h2,
.bz-wizard-head p {
  margin: 0;
}

.bz-wizard-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 38px;
  font-size: 24px;
  height: 38px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 38px;
}

.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 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: 11px;
  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 input[type="checkbox"] {
  accent-color: #8b5cf6;
  box-shadow: none;
  height: 16px;
  min-height: 16px;
  min-width: 16px;
  width: 16px;
}

.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;
  }
}

body:not(.login-screen) input,
body:not(.login-screen) select,
body:not(.login-screen) textarea {
  outline: 0 !important;
  outline-offset: 0 !important;
  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: 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);
  outline: 0 !important;
  outline-offset: 0 !important;
}

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: 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);
}

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;
  outline: 0 !important;
}

.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: 8px;
}

.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;
}

.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.1), transparent 36%),
    linear-gradient(180deg, rgba(14, 20, 32, 0.92), rgba(8, 12, 22, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.14);
  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 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;
}

.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: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  min-width: 0;
}

.project-northstar-list,
.project-northstar-rail {
  background: rgba(8, 12, 22, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.project-northstar-toolbar {
  align-items: center;
  background: rgba(14, 20, 32, 0.76);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
}

.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: 8px;
  color: #fff;
  min-height: 42px;
}

.project-northstar-toolbar select {
  min-width: 130px;
  padding: 0 12px;
}

.project-northstar-search {
  align-items: center;
  display: flex;
  flex: 1 1 260px;
  max-width: 420px;
  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: 40px;
  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;
}

.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: 860px;
  width: 100%;
}

.project-northstar-table th,
.project-northstar-table td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding: 16px 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: 12px;
  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: 12px;
  line-height: 1.5;
}

.project-northstar-link {
  color: #fff;
  text-decoration: none;
}

.project-northstar-link:hover,
.project-northstar-subtle-link:hover {
  color: #c4b5fd;
}

.project-northstar-subtle-link {
  color: rgba(203, 213, 225, 0.78);
  text-decoration: none;
}

.project-northstar-owner {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  min-width: 0;
}

.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;
  background: linear-gradient(135deg, #8b5cf6, #38bdf8);
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  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 {
  background: #8b5cf6;
  border-color: #8b5cf6;
  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 {
  color: #c084fc;
  font-size: 12px;
  font-weight: 800;
  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: 1180px) {
  .project-northstar-main {
    grid-template-columns: 1fr;
  }

  .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: 10px;
    padding: 10px;
  }

  .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: 8px 0;
  }

  .project-northstar-table td {
    align-items: center;
    background: transparent;
    border-bottom: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: 96px minmax(0, 1fr);
    min-width: 0;
    padding: 8px 14px;
  }

  .project-northstar-table td::before {
    color: rgba(203, 213, 225, 0.62);
    content: attr(data-label);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .project-northstar-table td:first-child {
    align-items: start;
    padding-top: 10px;
  }

  .project-northstar-table td:first-child::before {
    padding-top: 2px;
  }

  .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: 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: 980px) {
  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: 11px;
  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-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: 11px;
  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: 11px;
  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 {
  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: 10px;
  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: 6px 12px;
}

@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));
  }
}