.finance-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 20px 22px;
    margin: 0 0 22px
}

.finance-panel[hidden] {
    display: none
}

.finance-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px
}

.finance-heading h2 {
    font-size: 18px;
    margin: 0 0 3px
}

.finance-heading p:not(.eyebrow) {
    font-size: 12px;
    color: var(--muted);
    margin: 0
}

.export-button {
    background: #176b4b;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 9px 13px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap
}

.export-button:hover {
    background: #10583d
}

.finance-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0
}

.finance-controls label {
    font-size: 11px;
    color: var(--muted)
}

.finance-controls select,
.finance-controls input {
    font: inherit;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 9px;
    background: #fff;
    color: var(--ink);
    margin-left: 5px
}

.finance-controls #financeRange {
    font-size: 11px;
    color: var(--muted)
}

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

.finance-metric {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #fafbf9
}

.finance-metric>span {
    font-size: 11px;
    color: var(--muted)
}

.finance-metric strong {
    font-size: 22px;
    color: var(--ink)
}

.finance-metric strong small {
    font-size: 11px;
    font-weight: 500
}

.finance-metric>small {
    font-size: 10px;
    color: var(--muted)
}

.metric-received {
    border-left: 4px solid #27824f;
    background: #f4faf5
}

.metric-deposit {
    border-left: 4px solid #d99b27;
    background: #fffaf0
}

.metric-unpaid {
    border-left: 4px solid #c74b41;
    background: #fff7f5
}

.finance-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--line);
    margin-top: 16px
}

.finance-tabs button {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    padding: 9px 12px;
    cursor: pointer
}

.finance-tabs button.active {
    color: var(--green);
    border-color: var(--green);
    font-weight: 600
}

.finance-rows {
    max-height: 280px;
    overflow: auto
}

.finance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 7px;
    border-bottom: 1px solid #eef1ee
}

.finance-row>div {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.finance-row>div>b {
    font-size: 12px;
    overflow-wrap: anywhere
}

.finance-row small {
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px
}

.income-amount {
    color: #21814b;
    font-size: 12px;
    white-space: nowrap
}

.debt-amount {
    color: #b54037;
    font-size: 12px;
    white-space: nowrap
}

.finance-type {
    font-size: 10px;
    color: #98691e;
    background: #fff3d9;
    border-radius: 99px;
    padding: 2px 7px;
    margin-left: 4px;
    font-weight: 500
}

.finance-empty {
    padding: 25px;
    text-align: center;
    color: var(--muted);
    font-size: 12px
}

.finance-note {
    font-size: 10px;
    line-height: 1.5;
    color: #89928c;
    margin: 11px 0 0
}

@media(max-width:700px) {
    .finance-panel {
        padding: 15px 13px
    }

    .finance-metrics {
        grid-template-columns: 1fr
    }

    .finance-heading h2 {
        font-size: 16px
    }

    .finance-controls {
        flex-wrap: wrap
    }

    .finance-controls #financeRange {
        width: 100%;
        margin-left: 0
    }

    .finance-row {
        align-items: flex-start
    }

    .finance-note {
        font-size: 9px
    }
}

.tabs button.home-filter-all {
    background: #176b4b;
    color: #fff
}

.tabs button.home-filter-design {
    background: #f0eafb;
    color: #654b91
}

.tabs button.home-filter-designing {
    background: #e8effb;
    color: #365d91
}

.tabs button.home-filter-production {
    background: #fff5d7;
    color: #85670d
}

.tabs button.home-filter-producing {
    background: #fff0df;
    color: #995d1e
}

.tabs button.home-filter-produced {
    background: #e5f3e9;
    color: #276b3e
}

.tabs button.home-filter-done {
    background: #eef1ee;
    color: #526057
}

.tabs button.home-filter-all.active {
    box-shadow: 0 0 0 2px #a8cbb6
}

.tabs button.home-filter-design.active {
    box-shadow: 0 0 0 2px #bca7dc
}

.tabs button.home-filter-designing.active {
    box-shadow: 0 0 0 2px #a9bfdf
}

.tabs button.home-filter-production.active {
    box-shadow: 0 0 0 2px #ddc66b
}

.tabs button.home-filter-producing.active {
    box-shadow: 0 0 0 2px #e2b57f
}

.tabs button.home-filter-produced.active {
    box-shadow: 0 0 0 2px #9acba7
}

.tabs button.home-filter-done.active {
    box-shadow: 0 0 0 2px #aeb9b1
}

.status-chip {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    transition: filter .15s, transform .15s
}

.status-chip:hover {
    filter: brightness(.96);
    transform: translateY(-1px)
}

.status-chip:focus-visible {
    outline: 2px solid #416f59;
    outline-offset: 2px
}

.detail-dialog {
    width: min(650px, calc(100vw - 28px));
    max-height: min(88vh, 820px);
    overflow: auto;
    padding: 24px
}

.detail-head {
    position: sticky;
    top: -24px;
    background: white;
    z-index: 2;
    padding: 2px 0 12px
}

.detail-content {
    padding: 13px 0 3px
}

.detail-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #f1f7f3, #f8faf8);
    border: 1px solid #e2ece5;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px
}

.detail-hero-main {
    min-width: 0
}

.detail-badges {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap
}

.detail-type {
    background: #e3eee7;
    color: #286548;
    font-size: 10px;
    font-weight: 700;
    border-radius: 99px;
    padding: 4px 9px
}

.detail-hero h3 {
    font-size: 18px;
    line-height: 1.35;
    margin: 9px 0 3px;
    overflow-wrap: anywhere
}

.detail-hero-main p {
    font-size: 11px;
    color: var(--muted);
    margin: 0
}

.detail-hero-main p b {
    color: #37483d
}

.detail-deadline {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #e8f3eb;
    color: #286548
}

.detail-deadline span {
    font-size: 10px;
    font-weight: 600
}

.detail-deadline strong {
    font-size: 14px
}

.detail-deadline.overdue {
    background: #fde9e7;
    color: #a53630
}

.detail-section {
    margin: 13px 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 13px 15px
}

.detail-section h3,
.payment-summary h3 {
    font-size: 12px;
    margin: 0 0 11px;
    color: #3d5044
}

.detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.detail-info-grid>div {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.detail-info-grid span,
.detail-spec {
    font-size: 11px;
    color: var(--muted)
}

.detail-info-grid b {
    font-size: 12px;
    color: var(--ink);
    overflow-wrap: anywhere
}

.detail-info-grid b.pickup-done {
    color: #257347
}

.detail-info-grid b.pickup-pending {
    color: #a45b19
}

.detail-spec {
    padding: 10px 11px;
    border-radius: 8px;
    background: #f7f9f7;
    color: #38453d;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.payment-summary {
    margin: 13px 0;
    background: #f8faf8;
    border: 1px solid #e5ebe6;
    border-radius: 11px;
    padding: 14px 15px
}

.payment-figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.payment-figures>div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: white;
    border: 1px solid #e9edea;
    border-radius: 9px;
    padding: 10px
}

.payment-figures span {
    font-size: 10px;
    color: var(--muted)
}

.payment-figures b {
    font-size: 13px;
    color: #26362c
}

.payment-figures b.paid-figure {
    color: #247446
}

.payment-figures .balance-figure.has-balance {
    background: #fff2ef;
    border-color: #f2d3cf
}

.payment-figures .balance-figure.has-balance b,
.payment-figures .balance-figure.has-balance span {
    color: #ad3c32
}

.payment-figures .balance-figure.settled {
    background: #edf7ef;
    border-color: #d5e9d9
}

.payment-figures .balance-figure.settled b {
    color: #247446
}

.detail-note {
    margin: 13px 0;
    background: #fff8e8;
    border-left: 4px solid #e0ae3d;
    border-radius: 8px;
    padding: 11px 13px
}

.detail-note>b {
    font-size: 11px;
    color: #835f14
}

.detail-note p {
    font-size: 12px;
    line-height: 1.55;
    color: #51492f;
    margin: 5px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

@media(max-width:560px) {
    .detail-dialog {
        padding: 17px
    }

    .detail-head {
        top: -17px
    }

    .detail-hero {
        align-items: flex-start;
        flex-direction: column
    }

    .detail-deadline {
        align-items: flex-start;
        padding: 8px 10px
    }

    .payment-figures {
        grid-template-columns: 1fr
    }

    .detail-info-grid {
        gap: 10px
    }
}

.status-note-callout,
.status-note-current {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #f0d49e;
    border-left: 4px solid #d28a22;
    border-radius: 9px;
    background: #fff7e8;
    color: #634716;
    text-align: left;
    font-size: 11px;
}

.status-note-callout b,
.status-note-current b {
    color: #82500c;
    font-size: 10px;
    font-weight: 700;
}

.status-note-callout span,
.status-note-current p {
    margin: 0;
    color: #503a19;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.status-note-inline {
    grid-column: 1 / -1;
    display: block;
    padding: 7px 9px;
    border-left: 3px solid #d28a22;
    border-radius: 6px;
    background: #fff7e8;
    color: #634716;
    font-size: 10px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.status-note-inline b {
    color: #82500c;
    margin-right: 4px;
}

.home-status-note {
    margin: 8px 0 0;
}

.detail-status-note {
    margin: 12px 0;
}

.status-note-input {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
}

.status-note-input textarea {
    width: 100%;
    min-height: 72px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
}

.dark-theme .status-note-callout,
.dark-theme .status-note-current,
.dark-theme .status-note-inline {
    border-color: #6d5733;
    border-left-color: #e6ad54;
    background: #3a3023;
    color: #f2d79d;
}

.dark-theme .status-note-callout b,
.dark-theme .status-note-current b,
.dark-theme .status-note-inline b,
.dark-theme .status-note-callout span,
.dark-theme .status-note-current p,
.dark-theme .status-note-inline {
    color: #f2d79d;
}

.dark-theme .status-note-input textarea {
    border-color: #59476b;
    background: #2a2038;
    color: #f0eaf8;
    color-scheme: dark;
}

.pickup-confirm-dialog {
    width: min(470px, calc(100vw - 28px));
    border: 1px solid #eadedb;
    border-radius: 17px;
    padding: 25px;
    box-shadow: 0 22px 75px #14251c40
}

.pickup-confirm-dialog::backdrop {
    background: #18251fa6;
    backdrop-filter: blur(2px)
}

.pickup-confirm-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 15px;
    background: #e6f3e9;
    color: #247446;
    font-size: 24px;
    font-weight: 700
}

.pickup-confirm-icon.needs-payment {
    background: #c94338;
    color: white
}

.pickup-confirm-dialog>.eyebrow,
.pickup-confirm-dialog>h2 {
    text-align: center
}

.pickup-confirm-dialog>h2 {
    font-size: 19px;
    margin: 0 0 7px
}

.pickup-confirm-job {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    margin: 0 0 17px
}

.pickup-due-alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 17px 15px;
    background: #fff0ed;
    border: 2px solid #df7a6e;
    border-radius: 13px;
    text-align: center
}

.pickup-due-alert>span {
    font-size: 12px;
    color: #a5332c;
    font-weight: 700
}

.pickup-due-alert>strong {
    font-size: 32px;
    line-height: 1.15;
    color: #b52f29
}

.pickup-due-alert>strong small {
    font-size: 13px
}

.pickup-due-alert label {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #6e3934
}

.pickup-due-alert input {
    width: 100%;
    border: 2px solid #d96a60;
    border-radius: 9px;
    background: white;
    padding: 11px 12px;
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    text-align: center;
    color: #92251f;
    outline-color: #b83c32
}

.pickup-reminder {
    color: #8e4a42;
    font-size: 10px
}

.pickup-paid-alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 17px;
    background: #edf7ef;
    border: 1px solid #cfe5d4;
    border-radius: 12px;
    color: #247446
}

.pickup-paid-alert strong {
    font-size: 16px
}

.pickup-paid-alert span {
    font-size: 13px
}

.pickup-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap
}

.pickup-confirm-actions button {
    font-size: 12px
}

.pickup-confirm-actions button.collect-payment {
    background: #b83c32;
    border-color: #b83c32
}

.pickup-confirm-actions button.collect-payment:hover {
    background: #9f3028
}

.pickup-error {
    color: #a52e28;
    font-size: 11px;
    text-align: center;
    min-height: 14px;
    margin: 8px 0 0
}

@media(max-width:520px) {
    .pickup-confirm-dialog {
        padding: 19px
    }

    .pickup-due-alert>strong {
        font-size: 28px
    }

    .pickup-confirm-actions {
        flex-direction: column-reverse
    }

    .pickup-confirm-actions button {
        width: 100%
    }
}

.job.home-job {
    padding: 16px 18px 17px;
    border-left: 5px solid #aeb9b1;
    border-radius: 13px;
    box-shadow: 0 2px 8px #17261c08
}

.home-job.status-wait_design {
    border-left-color: #8865b1
}

.home-job.status-designing {
    border-left-color: #537dbd
}

.home-job.status-designed {
    border-left-color: #278354
}

.home-job.status-production {
    border-left-color: #d7ae31
}

.home-job.status-producing {
    border-left-color: #df9338
}

.home-job.status-produced {
    border-left-color: #d15a32
}

.home-job.status-done {
    border-left-color: #849188
}

.home-job .jobtop {
    align-items: center
}

.home-job h3 {
    font-size: 16px;
    margin: 13px 0 7px
}

.home-job .status-chip {
    font-size: 11px;
    padding: 6px 10px
}

.home-job .status-chip.status-wait_design {
    background: #f0eafb;
    color: #654b91
}

.home-job .status-chip.status-designing {
    background: #eaf0fb;
    color: #4267a5
}

.home-job .status-chip.status-designed {
    background: #e6f4ec;
    color: #176b4b
}

.home-job .status-chip.status-production {
    background: #fff5d7;
    color: #85670d
}

.home-job .status-chip.status-producing {
    background: #fff1dc;
    color: #a9681e
}

.home-job .status-chip.status-produced {
    background: #fdebe2;
    color: #a84928
}

.home-job .status-chip.status-done {
    background: #eef1ee;
    color: #59645d
}

.home-job-line {
    font-size: 12px;
    color: #77847b;
    line-height: 1.55;
    margin-top: 5px;
    overflow-wrap: anywhere
}

.home-job-detail {
    color: #526158;
    margin-top: 7px
}

.home-job-note {
    margin-top: 7px;
    padding: 7px 9px;
    background: #fff8e8;
    border-left: 3px solid #e0ae3d;
    border-radius: 6px;
    color: #72591c
}

.home-job-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px
}

.pickup-cta {
    border: 0;
    border-radius: 8px;
    background: #176b4b;
    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 9px 13px;
    cursor: pointer
}

.pickup-cta:hover {
    background: #10583d
}

.home-status {
    border: 0;
    font-family: inherit;
    cursor: pointer
}

.home-status:hover {
    filter: brightness(.96);
    transform: translateY(-1px)
}

.home-status:focus-visible {
    outline: 2px solid #416f59;
    outline-offset: 2px
}

@media(max-width:700px) {
    .job.home-job {
        padding: 14px
    }

    .home-job h3 {
        font-size: 15px
    }

    .home-job-line {
        font-size: 11px
    }
}

.status-confirm-dialog {
    width: min(430px, calc(100vw - 28px));
    border: 1px solid #dfe8e1;
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 20px 70px #14251c35;
    text-align: center
}

.status-confirm-dialog::backdrop {
    background: #18251f99;
    backdrop-filter: blur(2px)
}

.status-confirm-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    margin: 0 auto 13px;
    background: #e7f2ea;
    color: #176b4b;
    font-size: 25px;
    font-weight: 700
}

.status-confirm-dialog>.eyebrow {
    margin-bottom: 5px
}

.status-confirm-dialog h2 {
    font-size: 19px;
    margin: 0 0 7px
}

.status-confirm-job {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 17px
}

.status-change-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 10px;
    border-radius: 11px;
    background: #f5f7f5
}

.status-change-preview span {
    border-radius: 99px;
    background: #fff;
    border: 1px solid #e4e9e5;
    padding: 6px 11px;
    color: #405047;
    font-size: 11px;
    font-weight: 600
}

.status-change-preview b {
    color: #819087
}

.status-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 19px
}

.status-confirm-actions button {
    font-size: 12px
}

#bell svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle
}

.notification-welcome {
    margin-bottom: 18px
}

.notification-list {
    display: grid;
    gap: 10px;
    max-width: 980px
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    padding: 15px 17px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s
}

.notification-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px #17261c0d
}

.notification-item.is-unread {
    background: #f5faf6;
    border-color: #cfe1d3
}

.notification-icon {
    flex: 0 0 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e8f2eb;
    color: #176b4b;
    font-size: 20px;
    font-weight: 700
}

.notification-icon.design-alert {
    background: #f0eafb;
    color: #654b91
}

.notification-icon.production-alert {
    background: #fff3df;
    color: #a9681e
}

.notification-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 5px
}

.notification-title-line {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap
}

.notification-title-line strong {
    font-size: 14px
}

.for-you-badge,
.unread-badge {
    border-radius: 99px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700
}

.for-you-badge {
    background: #176b4b;
    color: #fff
}

.unread-badge {
    background: #fde8e5;
    color: #ad382f
}

.notification-job {
    font-size: 12px;
    font-weight: 600;
    color: #435249
}

.notification-meta,
.notification-created {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5
}

.notification-arrow {
    font-size: 22px;
    color: #8a978f;
    align-self: center
}

.notification-empty {
    padding: 55px 20px;
    text-align: center;
    border: 1px dashed #d9e1da;
    border-radius: 14px;
    background: #fafbf9;
    color: var(--muted)
}

.notification-empty>span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    border-radius: 15px;
    background: #edf3ef;
    color: #176b4b;
    font-size: 23px
}

.notification-empty strong {
    display: block;
    color: #35463b;
    font-size: 14px
}

.notification-empty p {
    font-size: 11px;
    margin: 5px 0 0
}

@media(max-width:560px) {
    .notification-item {
        padding: 13px;
        gap: 10px
    }

    .notification-icon {
        flex-basis: 34px;
        height: 34px
    }

    .notification-title-line strong {
        font-size: 13px
    }
}

.notifications-dialog {
    width: min(680px, calc(100vw - 28px));
    max-height: min(82vh, 760px);
    padding: 21px;
    border: 1px solid #dfe8e1;
    border-radius: 16px;
    box-shadow: 0 22px 75px #14251c40
}

.notifications-dialog::backdrop {
    background: #18251f99;
    backdrop-filter: blur(2px)
}

.notifications-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid #edf0ed;
    margin-bottom: 12px
}

.notifications-heading h2 {
    margin: 0 0 4px;
    font-size: 19px
}

.notifications-heading .eyebrow {
    margin: 0 0 3px
}

.notifications-unread {
    font-size: 11px;
    color: var(--muted);
    margin: 0
}

.notification-list {
    display: grid;
    gap: 8px;
    max-height: calc(82vh - 125px);
    overflow: auto;
    padding: 2px
}

.notification-item.is-unread {
    background: #e9f5ec;
    border-color: #d6eadb
}

.notification-item.is-read {
    background: #fff;
    border-color: var(--line)
}

.notification-item.is-read:hover {
    background: #fafbf9
}

.notification-empty {
    padding: 40px 18px
}

.notifications-dialog .notification-item {
    padding: 12px 14px
}

@media(max-width:560px) {
    .notifications-dialog {
        padding: 15px
    }

    .notifications-dialog .notification-item {
        padding: 11px;
        gap: 9px
    }
}

.dark-theme .finance-controls select,
.dark-theme .finance-controls input {
    color-scheme: dark;
    background: #2a2038;
    color: #f0eaf8;
    border-color: #59476b;
}

.dark-theme .finance-controls select:focus-visible,
.dark-theme .finance-controls input:focus-visible {
    border-color: #9a73e8;
    outline: 2px solid #9a73e844;
    outline-offset: 1px;
}

.spec-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.spec-section-heading h3 {
    margin: 0;
}

.spec-section-heading > span {
    border-radius: 999px;
    padding: 5px 9px;
    background: #fff4df;
    color: #8b5b16;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

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

.detail-spec-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #e7e1ef;
    border-left: 4px solid #a79bb5;
    border-radius: 9px;
    background: #faf9fc;
}

.detail-spec-card.spec-size {
    border-color: #d9c8f2;
    border-left-color: #7044cf;
    background: #f5effc;
}

.detail-spec-card.spec-orientation {
    border-color: #f0d3ae;
    border-left-color: #dc8d31;
    background: #fff7ed;
}

.detail-spec-card.spec-content {
    border-color: #bfe2dc;
    border-left-color: #169988;
    background: #eff9f7;
}

.detail-spec-card.spec-design {
    border-color: #cbd5f2;
    border-left-color: #647dd8;
    background: #f1f4ff;
}

.detail-spec-card.spec-quantity {
    border-color: #cce4d2;
    border-left-color: #379768;
    background: #f0f8f2;
}

.detail-spec-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.detail-spec-label {
    color: #61596d;
    font-size: 11px;
    font-weight: 600;
}

.detail-spec-flag {
    border-radius: 999px;
    padding: 3px 7px;
    background: #fff;
    color: #7b4bc0;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.detail-spec-value {
    color: #251b36;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.detail-spec-empty {
    padding: 14px;
    border: 1px dashed #d9d1e2;
    border-radius: 9px;
    background: #faf9fc;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.dark-theme .spec-section-heading > span {
    background: #3a3023;
    color: #f0cd91;
}

.dark-theme .detail-spec-card {
    border-color: #493b5d;
    border-left-color: #756284;
    background: #292331;
}

.dark-theme .detail-spec-card.spec-size {
    border-color: #604b7b;
    border-left-color: #b79ae9;
    background: #352844;
}

.dark-theme .detail-spec-card.spec-orientation {
    border-color: #74563d;
    border-left-color: #e6a45b;
    background: #382c27;
}

.dark-theme .detail-spec-card.spec-content {
    border-color: #326259;
    border-left-color: #58c6b5;
    background: #203532;
}

.dark-theme .detail-spec-card.spec-design {
    border-color: #46587c;
    border-left-color: #9aaef1;
    background: #252d45;
}

.dark-theme .detail-spec-card.spec-quantity {
    border-color: #3e6148;
    border-left-color: #77c692;
    background: #23362c;
}

.dark-theme .detail-spec-label {
    color: #c6b9d7;
}

.dark-theme .detail-spec-flag {
    background: #443254;
    color: #eadfff;
}

.dark-theme .detail-spec-value {
    color: #f0eaf8;
}

.dark-theme .detail-spec-empty {
    border-color: #493b5d;
    background: #292331;
    color: #b7abc8;
}

@media(max-width:560px) {
    .detail-spec-grid {
        grid-template-columns: 1fr;
    }

    .spec-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.notification-heading-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.owner-notice-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 9px;
    padding: 9px 12px;
    background: var(--brand-purple, #7044cf);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.owner-notice-open:hover {
    filter: brightness(.94);
}

.owner-notice-open[hidden] {
    display: none;
}

.owner-notice-dialog {
    width: min(500px, calc(100vw - 28px));
    max-height: min(86vh, 760px);
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 22px 75px #14251c40;
}

.owner-notice-dialog::backdrop {
    background: #18251f99;
    backdrop-filter: blur(2px);
}

.owner-notice-dialog form {
    display: grid;
    gap: 14px;
}

.owner-notice-dialog .notifications-heading {
    margin-bottom: 0;
}

.owner-notice-dialog label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.owner-notice-dialog input,
.owner-notice-dialog select,
.owner-notice-dialog textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
}

.owner-notice-dialog textarea {
    min-height: 104px;
    resize: vertical;
}

.owner-notice-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 2px;
}

.owner-notice-status {
    margin: 0;
    color: var(--green);
    font-size: 12px;
}

.dark-theme .owner-notice-dialog {
    border-color: #493b5d;
    background: #241b31;
    color: #f0eaf8;
}

.dark-theme .owner-notice-dialog .notifications-heading {
    border-color: #493b5d;
}

.dark-theme .owner-notice-dialog input,
.dark-theme .owner-notice-dialog select,
.dark-theme .owner-notice-dialog textarea {
    border-color: #59476b;
    background: #2a2038;
    color: #f0eaf8;
    color-scheme: dark;
}

@media(max-width:560px) {
    .notification-heading-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .owner-notice-open {
        padding: 8px 9px;
        font-size: 11px;
    }

    .owner-notice-dialog {
        padding: 16px;
    }
}