:root {
    --ui-font-size: 16px;
    --bg: #edf3ee;
    --panel: rgba(255, 255, 255, 0.86);
    --panel-strong: rgba(255, 255, 255, 0.94);
    --line: rgba(42, 84, 61, 0.14);
    --line-strong: rgba(42, 84, 61, 0.22);
    --text: #1f242e;
    --muted: #617267;
    --muted-soft: #7d8f84;
    --primary: #2f6b4f;
    --primary-dark: #1f4d38;
    --secondary: #173c31;
    --secondary-dark: #102a22;
    --accent: #9fc2a9;
    --success: #2d7a58;
    --warning: #8b5d10;
    --danger: #992d2d;
    --shadow: 0 24px 70px rgba(31, 36, 46, 0.12);
    --shadow-soft: 0 18px 40px rgba(18, 32, 44, 0.08);
    --radius-xl: 34px;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 14px;
}

/* Lexaro public-interface studio */
.interface-studio { display: grid; gap: 18px; }
.interface-studio__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; }
.interface-studio__header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.interface-studio__notice { padding: 13px 16px; border-radius: 14px; font-weight: 700; }
.interface-studio__notice.is-error { color: #842c28; background: #fff0ee; border: 1px solid #efc8c3; }
.interface-studio__notice.is-info { color: #245064; background: #edf7fb; border: 1px solid #c9e3ed; }
.interface-studio__workspace { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); gap: 20px; align-items: start; }
.interface-controls { padding: 0; overflow: hidden; }
.interface-controls__tabs { display: flex; gap: 6px; padding: 12px; overflow-x: auto; border-bottom: 1px solid var(--border-color); background: rgba(245,247,246,.9); }
.interface-controls__tabs button { flex: 0 0 auto; border: 0; border-radius: 11px; padding: 10px 13px; background: transparent; color: var(--text-muted); font: inherit; font-weight: 800; cursor: pointer; }
.interface-controls__tabs button.is-active { background: #fff; color: var(--primary); box-shadow: 0 7px 22px rgba(17,48,39,.1); }
.interface-controls__pane { padding: 18px; }
.interface-control-section { padding: 18px; border: 1px solid var(--border-color); border-radius: 18px; background: #fff; }
.interface-control-section + .interface-control-section { margin-top: 14px; }
.interface-control-section__head { margin-bottom: 16px; }
.interface-control-section__head h4 { margin: 0 0 5px; color: var(--primary); font-size: 1rem; }
.interface-control-section__head p { margin: 0; color: var(--text-muted); font-size: .86rem; line-height: 1.8; }
.interface-toggle-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.form-group--wide { grid-column: 1 / -1; }
.theme-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.theme-preset-card { text-align: right; border: 1px solid var(--border-color); border-radius: 15px; background: #fff; padding: 12px; cursor: pointer; font: inherit; color: var(--text-color); transition: .2s ease; }
.theme-preset-card:hover, .theme-preset-card.is-selected { border-color: var(--primary); box-shadow: 0 9px 24px rgba(15,48,39,.11); transform: translateY(-1px); }
.theme-preset-card__swatches { display: flex; gap: 5px; margin-bottom: 9px; }
.theme-preset-card__swatches i { display: block; width: 30px; height: 18px; border-radius: 99px; background: var(--swatch); }
.color-control-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.color-control { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 13px; font-weight: 700; }
.color-control input { width: 48px; height: 34px; border: 0; padding: 0; background: none; cursor: pointer; }
.image-upload-card { display: grid; grid-template-columns: 150px 1fr; gap: 15px; align-items: center; padding: 12px; border-radius: 16px; background: var(--surface-soft); }
.image-upload-card img { width: 150px; height: 95px; object-fit: cover; border-radius: 12px; }
.image-upload-card__actions { margin-top: 10px; }
.section-order-list, .repeater-list, .client-editor-list { display: grid; gap: 10px; }
.section-order-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border-color); border-radius: 14px; background: #fff; }
.section-order-item.is-dragging { opacity: .45; }
.section-order-item__handle, .drag-handle { color: var(--text-muted); cursor: grab; font-size: 1.2rem; }
.section-order-item__buttons { display: flex; gap: 5px; }
.section-order-item__buttons button { width: 34px; height: 34px; border: 1px solid var(--border-color); border-radius: 10px; background: #fff; cursor: pointer; }
.repeater-card { display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: end; gap: 10px; padding: 12px; border: 1px solid var(--border-color); border-radius: 15px; background: var(--surface-soft); }
.client-editor-card { display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; padding: 14px; border: 1px solid var(--border-color); border-radius: 17px; background: #fff; }
.client-editor-card.is-dragging { opacity: .48; }
.client-editor-card__logo { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-soft); overflow: hidden; color: var(--text-muted); font-size: .75rem; }
.client-editor-card__logo img { width: 76px; height: 70px; object-fit: contain; }
.client-editor-card__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.client-editor-card__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.interface-controls__actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--border-color); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.button.danger-outline { border: 1px solid #d9aaa4; color: #903d34; background: #fff8f7; }
.button.small { min-height: 36px; padding: 7px 10px; font-size: .78rem; }
.interface-live-preview { position: sticky; top: 18px; padding: 12px; overflow: hidden; }
.interface-live-preview__bar { display: flex; justify-content: space-between; align-items: center; padding: 7px 6px 13px; color: var(--text-muted); }
.interface-live-preview__bar span { font-weight: 900; color: var(--primary); }
.mini-public-site { --preview-primary:#153650; --preview-secondary:#102a22; --preview-accent:#b89452; --preview-background:#f5f3ee; --preview-text:#17211d; --preview-muted:#66736d; --preview-overlay:#102a22; --preview-overlay-opacity:.78; overflow: hidden; border: 1px solid rgba(21,54,80,.14); border-radius: 20px; background: var(--preview-background); color: var(--preview-text); box-shadow: 0 20px 45px rgba(14,42,34,.12); }
.mini-public-site__nav { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #fff; }
.mini-public-site__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mini-public-site__brand img { width: 34px; height: 34px; object-fit: contain; }
.mini-public-site__brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-public-site button { border: 0; border-radius: 99px; background: var(--preview-accent); color: #fff; padding: 8px 12px; font: inherit; font-weight: 800; }
.mini-public-site__hero { position: relative; min-height: 300px; display: flex; align-items: center; padding: 28px; color: #fff; background-image: linear-gradient(rgba(16,42,34,var(--preview-overlay-opacity)),rgba(16,42,34,var(--preview-overlay-opacity))), var(--preview-hero-image); background-size: cover; background-position: center; }
.mini-public-site__hero > div { position: relative; z-index: 1; max-width: 420px; }
.mini-public-site__hero.is-centered { justify-content: center; text-align: center; }
.mini-public-site__hero small, .mini-public-site__flow small { color: var(--preview-accent); font-weight: 900; }
.mini-public-site__hero h2 { margin: 9px 0; font-size: clamp(1.55rem,3vw,2.35rem); }
.mini-public-site__hero p { color: rgba(255,255,255,.82); line-height: 1.8; }
.mini-public-site__flow { display: flex; flex-direction: column; }
.mini-public-site__flow > section { padding: 25px 22px; background: #fff; border-top: 1px solid rgba(21,54,80,.09); }
.mini-public-site__flow > section:nth-child(even) { background: var(--preview-background); }
.mini-public-site__flow h3 { margin: 7px 0; color: var(--preview-primary); }
.mini-public-site__flow p { margin: 0; color: var(--preview-muted); line-height: 1.8; font-size: .88rem; }
.mini-clients [data-preview-client-logos] { display: flex; gap: 8px; margin-top: 15px; overflow: hidden; }
.mini-clients [data-preview-client-logos] span { flex: 0 0 78px; height: 52px; display: grid; place-items: center; border-radius: 11px; background: #fff; border: 1px solid rgba(21,54,80,.1); }
.mini-clients [data-preview-client-logos] img { width: 66px; height: 40px; object-fit: contain; }
.mini-clients [data-preview-client-logos][data-style="grayscale-hover"] img, .mini-clients [data-preview-client-logos][data-style="grayscale"] img { filter: grayscale(1); opacity: .72; }
.mini-team-placeholders { display: flex; gap: 8px; margin-top: 12px; }
.mini-team-placeholders i { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,var(--preview-primary),var(--preview-secondary)); opacity: .8; }

@media (max-width: 1180px) {
    .interface-studio__workspace { grid-template-columns: 1fr; }
    .interface-live-preview { position: static; }
}
@media (max-width: 720px) {
    .interface-studio__header { align-items: stretch; flex-direction: column; }
    .interface-studio__header-actions, .interface-controls__actions { flex-direction: column; }
    .interface-studio__header-actions .button, .interface-controls__actions .button { width: 100%; }
    .theme-preset-grid, .color-control-grid, .client-editor-card__fields { grid-template-columns: 1fr; }
    .image-upload-card, .repeater-card, .client-editor-card { grid-template-columns: 1fr; }
    .image-upload-card img { width: 100%; height: 160px; }
    .client-editor-card__logo { width: 100%; height: 100px; }
    .client-editor-card__actions { flex-direction: row; flex-wrap: wrap; }
    .section-order-item { grid-template-columns: auto 1fr auto; }
    .section-order-item__buttons { grid-column: 2 / -1; }
    .mini-public-site__hero { min-height: 255px; padding: 22px 17px; }
}

/* WhatsApp connection center */
.whatsapp-control {
    --wa-green: #159a69;
    --wa-green-dark: #0d6f4d;
    --wa-green-soft: rgba(21, 154, 105, 0.11);
    --wa-amber: #b7791f;
    --wa-red: #b84040;
    display: grid;
    gap: 18px;
}

.whatsapp-control [hidden] {
    display: none !important;
}

.whatsapp-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 170px;
    padding: 30px 32px;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 20%, rgba(42, 199, 139, 0.16), transparent 32%),
        linear-gradient(135deg, rgba(8, 66, 49, 0.98), rgba(10, 91, 65, 0.94));
    color: #fff;
}

.whatsapp-hero::after {
    content: "";
    position: absolute;
    inset-inline-end: -68px;
    inset-block-start: -95px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.035), 0 0 0 70px rgba(255, 255, 255, 0.025);
    pointer-events: none;
}

.whatsapp-hero__copy {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.whatsapp-hero__copy h3 {
    margin: 10px 0 8px;
    color: #fff;
    font-size: clamp(1.45rem, 2vw, 2.05rem);
}

.whatsapp-hero__copy p {
    max-width: 660px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.9;
}

.whatsapp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.76rem;
    font-weight: 800;
}

.whatsapp-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #42d99b;
    box-shadow: 0 0 0 5px rgba(66, 217, 155, 0.15);
}

.whatsapp-status-badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 0 0 auto;
    min-width: 190px;
    padding: 15px 17px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
}

.whatsapp-status-badge__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
}

.whatsapp-status-badge.is-connected .whatsapp-status-badge__icon {
    background: #fff;
    color: var(--wa-green-dark);
}

.whatsapp-status-badge.is-pending .whatsapp-status-badge__icon {
    background: #fff4d9;
    color: var(--wa-amber);
}

.whatsapp-status-badge.is-offline .whatsapp-status-badge__icon {
    background: #ffe7e7;
    color: var(--wa-red);
}

.whatsapp-status-badge__copy {
    display: grid;
    gap: 2px;
}

.whatsapp-status-badge__copy small {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.7rem;
}

.whatsapp-status-badge__copy strong {
    color: #fff;
    font-size: 1rem;
}

.whatsapp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
    gap: 18px;
    align-items: stretch;
}

.whatsapp-device-card,
.whatsapp-qr-card,
.whatsapp-security-card {
    margin: 0;
}

.whatsapp-panel-head {
    align-items: flex-start;
    margin-bottom: 22px;
}

.whatsapp-refresh-button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--panel-strong);
    color: var(--primary-dark);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.whatsapp-refresh-button:hover {
    transform: translateY(-2px);
    border-color: rgba(21, 154, 105, 0.35);
    background: var(--wa-green-soft);
}

.whatsapp-refresh-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.whatsapp-refresh-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.whatsapp-control.is-busy .whatsapp-refresh-button svg {
    animation: whatsapp-spin 0.9s linear infinite;
}

.whatsapp-device-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 108px;
    padding: 20px;
    border: 1px solid rgba(21, 154, 105, 0.16);
    border-radius: 20px;
    background: linear-gradient(135deg, var(--wa-green-soft), rgba(21, 154, 105, 0.035));
}

.whatsapp-device-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--wa-green), var(--wa-green-dark));
    color: #fff;
    box-shadow: 0 12px 24px rgba(13, 111, 77, 0.2);
}

.whatsapp-device-icon svg,
.whatsapp-security-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.whatsapp-device-identity span,
.whatsapp-connection-summary span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.whatsapp-device-identity strong {
    color: var(--text);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    direction: ltr;
    unicode-bidi: plaintext;
}

.whatsapp-connection-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 17px;
    overflow: hidden;
}

.whatsapp-connection-summary > div {
    padding: 16px 18px;
}

.whatsapp-connection-summary > div + div {
        border-inline-start: 1px solid var(--line);
}

.whatsapp-connection-summary strong {
    color: var(--text);
    font-size: 0.88rem;
}

.whatsapp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.whatsapp-actions .button {
    min-width: 150px;
}

.whatsapp-qr-card {
    display: flex;
    flex-direction: column;
}

.whatsapp-qr-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 310px);
    aspect-ratio: 1;
    margin: auto;
    padding: 18px;
    border: 1px solid rgba(21, 154, 105, 0.22);
    border-radius: 26px;
    background:
        linear-gradient(90deg, var(--wa-green) 26px, transparent 0) top right/48px 3px no-repeat,
        linear-gradient(var(--wa-green) 26px, transparent 0) top right/3px 48px no-repeat,
        linear-gradient(-90deg, var(--wa-green) 26px, transparent 0) bottom left/48px 3px no-repeat,
        linear-gradient(0deg, var(--wa-green) 26px, transparent 0) bottom left/3px 48px no-repeat,
        #fff;
    box-shadow: inset 0 0 0 10px rgba(21, 154, 105, 0.035);
}

.whatsapp-qr-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.whatsapp-qr-loader {
    display: grid;
    place-items: center;
    gap: 12px;
    color: var(--muted);
    text-align: center;
}

.whatsapp-qr-loader span {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(21, 154, 105, 0.14);
    border-top-color: var(--wa-green);
    border-radius: 50%;
    animation: whatsapp-spin 0.9s linear infinite;
}

.whatsapp-qr-loader p {
    margin: 0;
    font-size: 0.8rem;
}

.whatsapp-qr-hint {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 0.74rem;
    text-align: center;
}

.whatsapp-security-card {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 20px;
    background: linear-gradient(135deg, rgba(21, 154, 105, 0.06), var(--panel-strong));
}

.whatsapp-security-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 16px;
    background: var(--wa-green-soft);
    color: var(--wa-green-dark);
}

.whatsapp-security-card .section-title {
    margin-bottom: 4px;
}

.whatsapp-notice {
    padding: 13px 16px;
    border: 1px solid rgba(21, 154, 105, 0.18);
    border-radius: 14px;
    background: var(--wa-green-soft);
    color: var(--wa-green-dark);
    font-size: 0.82rem;
    font-weight: 700;
}

.whatsapp-notice.is-error {
    border-color: rgba(184, 64, 64, 0.2);
    background: rgba(184, 64, 64, 0.09);
    color: var(--wa-red);
}

.whatsapp-notice.is-info {
    border-color: rgba(69, 111, 166, 0.2);
    background: rgba(69, 111, 166, 0.08);
    color: #345e91;
}

.whatsapp-modal {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

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

.whatsapp-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(5, 25, 19, 0.62);
    backdrop-filter: blur(5px);
    cursor: default;
}

.whatsapp-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--panel-strong);
    box-shadow: 0 28px 80px rgba(3, 31, 22, 0.25);
    text-align: center;
}

.whatsapp-modal__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 17px;
    background: rgba(184, 64, 64, 0.1);
    color: var(--wa-red);
    font-size: 1.3rem;
    font-weight: 900;
}

.whatsapp-modal__dialog h3 {
    margin: 0 0 8px;
    color: var(--text);
}

.whatsapp-modal__dialog p {
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}

.whatsapp-modal__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

@keyframes whatsapp-spin {
    to { transform: rotate(360deg); }
}

:root[data-theme="dark"] .whatsapp-qr-frame {
    background:
        linear-gradient(90deg, var(--wa-green) 26px, transparent 0) top right/48px 3px no-repeat,
        linear-gradient(var(--wa-green) 26px, transparent 0) top right/3px 48px no-repeat,
        linear-gradient(-90deg, var(--wa-green) 26px, transparent 0) bottom left/48px 3px no-repeat,
        linear-gradient(0deg, var(--wa-green) 26px, transparent 0) bottom left/3px 48px no-repeat,
        #fff;
}

@media (max-width: 920px) {
    .whatsapp-layout {
        grid-template-columns: 1fr;
    }

    .whatsapp-security-card {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .whatsapp-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 24px 20px;
    }

    .whatsapp-status-badge {
        width: 100%;
    }

    .whatsapp-device-card,
    .whatsapp-qr-card,
    .whatsapp-security-card {
        padding: 20px;
    }

    .whatsapp-connection-summary {
        grid-template-columns: 1fr;
    }

    .whatsapp-connection-summary > div + div {
        border-inline-start: 0;
        border-top: 1px solid var(--line);
    }

    .whatsapp-actions,
    .whatsapp-actions .button {
        width: 100%;
    }

    .whatsapp-security-card {
        align-items: flex-start;
    }

    .whatsapp-modal__actions {
        grid-template-columns: 1fr;
    }
}

* { box-sizing: border-box; }

html {
    font-size: var(--ui-font-size);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Tajawal', sans-serif;
    background:
        radial-gradient(circle at top left, rgba(47, 107, 79, 0.2), transparent 34%),
        radial-gradient(circle at bottom right, rgba(23, 60, 49, 0.18), transparent 28%),
        linear-gradient(135deg, #f5f9f5 0%, #e7efe7 100%);
    color: var(--text);
}

body.modal-open {
    overflow: hidden;
}

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

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 320px 1fr; }

.mobile-sidebar-backdrop,
.mobile-menu-trigger,
.mobile-sidebar-close {
    display: none;
}

.mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 16, 24, 0.44);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 30;
}

.sidebar {
    position: relative;
    overflow: hidden;
    height: 100vh;
    position: sticky;
    top: 0;
    padding: 28px 22px;
    border-left: 1px solid var(--line);
    background: rgba(15, 24, 33, 0.88);
    color: #eff6f1;
    backdrop-filter: blur(14px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.mobile-sidebar-close {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.mobile-sidebar-close span {
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.mobile-sidebar-close span:first-child {
    transform: rotate(45deg);
}

.mobile-sidebar-close span:last-child {
    transform: rotate(-45deg);
}

.sidebar-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(8px);
    pointer-events: none;
}

.sidebar-glow-top {
    width: 220px;
    height: 220px;
    top: -80px;
    right: -70px;
    background: radial-gradient(circle, rgba(108, 154, 123, 0.24), transparent 68%);
}

.sidebar-glow-bottom {
    width: 260px;
    height: 260px;
    left: -120px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
}

.brand-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center;
    padding: 18px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 22px;
}

.brand-mark {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #5f8f6b, #2f6b4f);
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
}

.brand-mark--logo {
    width: 100%;
    max-width: 220px;
    height: 150px;
    overflow: hidden;
    padding: 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.brand-mark--logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-card__copy {
    display: grid;
    gap: 6px;
    justify-items: center;
}

.brand-card h1, .topbar h2, .section-title, .metric-card h3, .panel-card h3 { margin: 0; }
.brand-card p, .topbar p, .panel-card p, .table-meta, .empty-state, .metric-card p { margin: 0; color: var(--muted); }
.sidebar .brand-card p { color: rgba(239, 246, 241, 0.75); }

.sidebar .brand-card h1 {
    font-size: 1.02rem;
}

.sidebar .brand-card p {
    font-size: 0.82rem;
    line-height: 1.5;
}

.sidebar-section-title {
    position: relative;
    z-index: 1;
    margin: 18px 6px 12px;
    color: rgba(239, 246, 241, 0.54);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.nav-menu {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
}

.nav-link {
    position: relative;
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    border-radius: 18px;
    color: rgba(247, 239, 230, 0.84);
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    overflow: hidden;
    transform: translateX(18px);
    opacity: 0;
    animation: navSlideIn 0.55s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: calc(var(--nav-delay) * 0.045s);
    transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 10%, rgba(255,255,255,0.12) 45%, transparent 80%);
    transform: translateX(120%);
    transition: transform 0.55s ease;
}

.nav-link:hover::before,
.nav-link.is-active::before {
    transform: translateX(-120%);
}

.nav-link:hover,
.nav-link.is-active {
    color: #fff;
    border-color: rgba(108, 154, 123, 0.24);
    background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 30px rgba(0,0,0,0.2);
    transform: translateX(-4px) scale(1.01);
}

.nav-link.is-active {
    background:
        linear-gradient(90deg, rgba(108, 154, 123, 0.2), transparent 45%),
        linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
}

.nav-link.is-active .nav-link-icon {
    background:
        radial-gradient(circle at 28% 26%, rgba(255,255,255,0.3), transparent 56%),
        linear-gradient(135deg, rgba(210, 181, 120, 0.42), rgba(111, 148, 124, 0.34));
    border-color: rgba(226, 210, 174, 0.34);
    color: #fffdf8;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 12px 26px rgba(138, 110, 56, 0.22),
        0 0 0 1px rgba(223, 202, 158, 0.1);
}

.nav-link.is-active .nav-link-icon svg {
    filter: drop-shadow(0 1px 2px rgba(44, 31, 10, 0.18));
}

.nav-link-icon {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(108, 154, 123, 0.28), rgba(47, 107, 79, 0.22));
    border: 1px solid rgba(255,255,255,0.08);
    color: #edf5ef;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}

.nav-link-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex: 0 0 auto;
}

.nav-link-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2px;
}

.nav-link-copy strong {
    font-size: 0.98rem;
    font-weight: 800;
}

.nav-link-copy small {
    color: rgba(239, 246, 241, 0.45);
    font-size: 0.73rem;
    transition: color 0.28s ease;
}

.nav-link:hover .nav-link-copy small,
.nav-link.is-active .nav-link-copy small {
    color: rgba(239, 246, 241, 0.72);
}

.nav-link-arrow {
    position: relative;
    z-index: 1;
    color: rgba(247, 239, 230, 0.38);
    font-size: 1.45rem;
    line-height: 1;
    transform: translateX(0);
    transition: transform 0.28s ease, color 0.28s ease;
}

.nav-link:hover .nav-link-arrow,
.nav-link.is-active .nav-link-arrow {
    color: rgba(247, 239, 230, 0.88);
    transform: translateX(-4px);
}

.sidebar-user-card {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.08);
}

.sidebar-user-avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #5f8f6b, #2f6b4f);
    color: #fff;
    font-weight: 800;
}

.sidebar-user-card strong {
    display: block;
    margin-bottom: 4px;
}

.sidebar-user-card p {
    margin: 0;
    color: rgba(247, 239, 230, 0.58);
    font-size: 0.84rem;
}

@keyframes navSlideIn {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.main-content {
    position: relative;
    padding: 28px;
    overflow: hidden;
}

.content-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 8%, rgba(47, 107, 79, 0.14), transparent 24%),
        radial-gradient(circle at 84% 12%, rgba(22, 60, 82, 0.12), transparent 26%);
}

.page-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 20px;
}

.topbar {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 22px;
    padding: 24px 26px;
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(16, 40, 56, 0.94), rgba(17, 32, 47, 0.9)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 60px rgba(16, 40, 56, 0.18);
}

.topbar-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.topbar-copy {
    display: grid;
    gap: 8px;
    width: 100%;
}

.topbar-copy .topbar-alert-strip--desktop {
    justify-content: flex-start;
}

.topbar-side {
    display: grid;
    gap: 10px;
    align-content: start;
    justify-items: end;
}

.topbar-alert-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
    justify-content: flex-end;
}

.topbar-alert-strip--mobile {
    display: none;
}

.topbar-alert-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 7px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
}

.topbar-alert-chip::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid transparent;
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
    opacity: 0;
    animation: topbarAlertPulse 2.6s ease-in-out infinite;
}

.topbar-alert-chip__count {
    width: 25px;
    height: 25px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 0.76rem;
    font-weight: 800;
    background: rgba(255,255,255,0.12);
    color: #fff;
    flex: 0 0 auto;
}

.topbar-alert-chip__copy {
    display: grid;
    gap: 1px;
}

.topbar-alert-chip__copy strong {
    font-size: 0.74rem;
    color: #fff;
}

.topbar-alert-chip__copy small {
    font-size: 0.64rem;
    color: rgba(255,255,255,0.72);
}

.topbar-alert-chip--progress {
    background: rgba(166, 123, 57, 0.14);
    border-color: rgba(181, 136, 69, 0.22);
}

.topbar-alert-chip--progress .topbar-alert-chip__count {
    background: rgba(181, 136, 69, 0.2);
}

.topbar-alert-chip--progress::after {
    border-color: rgba(181, 136, 69, 0.42);
}

.topbar-alert-chip--danger {
    background: rgba(153, 45, 45, 0.12);
    border-color: rgba(214, 126, 126, 0.22);
}

.topbar-alert-chip--danger .topbar-alert-chip__count {
    background: rgba(214, 126, 126, 0.18);
}

.topbar-alert-chip--danger::after {
    border-color: rgba(214, 126, 126, 0.46);
}

@keyframes topbarAlertPulse {
    0%, 30%, 100% {
        opacity: 0;
        box-shadow:
            0 0 0 0 rgba(255,255,255,0),
            0 0 0 0 rgba(16, 32, 24, 0);
    }
    52%, 82% {
        opacity: 1;
        box-shadow:
            0 0 0 2px rgba(255,255,255,0.16),
            0 0 0 8px rgba(255,255,255,0.08);
    }
}

.topbar-marquee {
    position: relative;
    display: block;
    min-height: 36px;
    overflow: hidden;
    width: 100%;
    margin: 0 0 2px;
}

.topbar-marquee__item {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-height: 36px;
    padding: 8px 18px;
    border-radius: 14px;
    background: rgba(108, 154, 123, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.topbar-marquee__item.is-active {
    opacity: 1;
    transform: translateY(0);
}

.eyebrow {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.topbar h2 {
    font-size: clamp(1.7rem, 2vw, 2.25rem);
    color: #fff;
}

.topbar p {
    color: rgba(255, 255, 255, 0.72);
}

.topbar-actions {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
    align-self: center;
    margin-top: 0;
    flex-direction: row;
}

.font-scale-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
}

.font-scale-button,
.font-scale-indicator {
    min-height: 48px;
}

.font-scale-button {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.font-scale-indicator {
    min-width: 74px;
    padding: 0 14px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.font-scale-indicator span {
    display: inline-block;
    min-width: 44px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.font-scale-controls .button:disabled {
    cursor: default;
    opacity: 0.58;
    transform: none;
    box-shadow: none;
}

.font-scale-controls .button:disabled:hover {
    transform: none;
}

.mobile-menu-trigger {
    display: none !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.mobile-menu-trigger:hover {
    background: rgba(255, 255, 255, 0.14);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.84rem;
    font-weight: 700;
}

.status-pill::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #63d29a;
    box-shadow: 0 0 0 6px rgba(99, 210, 154, 0.16);
}

.button {
    border: 0;
    border-radius: 16px;
    padding: 12px 18px;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.icon-button {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 16px;
    position: relative;
}

.icon-button svg {
    display: block;
    width: 22px;
    height: 22px;
    color: inherit;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.button:hover {
    transform: translateY(-2px);
}

.button.primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 14px 28px rgba(111, 74, 34, 0.2);
}

.button.ghost {
    background: rgba(255,255,255,0.9);
    color: var(--secondary);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.grid { display: grid; gap: 18px; }
.metrics-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 18px; }

.metric-card, .panel-card {
    background: var(--panel);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
}

.metric-card {
    position: relative;
    padding: 22px;
    overflow: hidden;
}

.metric-card::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 999px;
    top: -70px;
    left: -42px;
    background: radial-gradient(circle, rgba(47, 107, 79, 0.12), transparent 68%);
}

.metric-card strong {
    display: block;
    margin-top: 10px;
    font-size: 2rem;
    color: var(--secondary);
}

.dashboard-grid { grid-template-columns: 1.3fr 0.9fr; }
.panel-card {
    position: relative;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.78)),
        linear-gradient(120deg, rgba(213, 180, 139, 0.08), transparent 28%);
}

.section-title {
    margin-bottom: 10px;
    font-size: 1.18rem;
    color: var(--secondary-dark);
}

.section-kicker {
    margin: 0 0 10px;
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.section-head,
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.section-head-copy {
    display: grid;
    gap: 8px;
}

.panel-head.compact {
    margin-bottom: 14px;
}

.toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.toolbar-note {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.inline-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-dark);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed rgba(47, 107, 79, 0.35);
    transition: color 0.18s ease, border-color 0.18s ease;
}

.inline-link:hover,
.inline-link:focus {
    color: var(--primary);
    border-color: rgba(47, 107, 79, 0.7);
}

.inline-link__icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25d366;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}

.inline-link__icon svg {
    width: 13px;
    height: 13px;
    display: block;
}

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(16, 40, 56, 0.96), rgba(18, 32, 44, 0.94)),
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent);
    color: #fff;
    box-shadow: 0 30px 60px rgba(16, 40, 56, 0.16);
}

.page-hero::before,
.page-hero::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.page-hero::before {
    width: 280px;
    height: 280px;
    left: -120px;
    top: -120px;
    background: radial-gradient(circle, rgba(213, 180, 139, 0.18), transparent 70%);
}

.page-hero::after {
    width: 260px;
    height: 260px;
    right: -80px;
    bottom: -110px;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
}

.page-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 20px;
}

.page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
    gap: 20px;
    align-items: end;
}

.page-hero-copy h3 {
    margin: 0 0 12px;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.page-hero-copy p {
    margin: 0;
    max-width: 700px;
    color: rgba(255,255,255,0.76);
    line-height: 1.8;
}

.report-hero .page-hero-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
}

.report-hero-stack {
    display: grid;
    gap: 12px;
}

.hero-chip-row,
.stat-strip,
.info-grid,
.highlight-grid,
.list-grid {
    display: grid;
    gap: 14px;
}

.hero-chip-row {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.hero-chip {
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
}

.hero-chip strong,
.stat-box strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.25rem;
    color: #fff;
}

.hero-chip span,
.stat-box span {
    color: rgba(255,255,255,0.7);
    font-size: 0.88rem;
}

.stat-strip {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stat-box {
    padding: 18px 20px;
    border-radius: 22px;
    background: var(--panel-strong);
    border: 1px solid rgba(255,255,255,0.65);
    box-shadow: var(--shadow-soft);
}

.stat-box strong {
    color: var(--secondary-dark);
}

.stat-box span {
    color: var(--muted);
}

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

.info-card {
    padding: 20px;
    border-radius: 24px;
    background: var(--panel-strong);
    border: 1px solid rgba(255,255,255,0.65);
    box-shadow: var(--shadow-soft);
}

.info-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--secondary-dark);
    font-size: 1rem;
}

.info-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.client-workflow-panel {
    display: grid;
    gap: 18px;
    margin-top: 14px;
}

.client-workflow-panel--legacy {
    display: none;
}

.client-workflow-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.client-workflow-panel__intro {
    margin-top: 6px;
}

.client-workflow-panel__status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.client-workflow-panel__hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.client-workflow-track-wrap {
    display: flex;
    justify-content: center;
}

.client-workflow-track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 8px 0 4px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.client-workflow-step {
    position: relative;
    margin: 0;
    padding: 0;
    flex: 0 0 118px;
    min-width: 118px;
}

.client-workflow-step:not(:last-child) {
    padding-inline-end: 18px;
}

.client-workflow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    inset-inline-start: calc(50% + 20px);
    inset-inline-end: -2px;
    height: 3px;
    border-radius: 999px;
    background: rgba(160, 174, 192, 0.45);
}

.client-workflow-step__button {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: center;
    cursor: pointer;
    font: inherit;
}

.client-workflow-step__marker {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(160, 174, 192, 0.45);
    background: #fff;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    z-index: 1;
}

.client-workflow-step__marker::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: rgba(160, 174, 192, 0.3);
}

.client-workflow-step__label {
    display: block;
    min-height: 38px;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--secondary-dark);
}

.client-workflow-step--done::after {
    background: linear-gradient(90deg, rgba(34, 101, 77, 0.92), rgba(34, 101, 77, 0.4));
}

.client-workflow-step--done .client-workflow-step__marker {
    border-color: rgba(34, 101, 77, 0.95);
    background: rgba(34, 101, 77, 0.12);
}

.client-workflow-step--done .client-workflow-step__marker::after {
    background: rgba(34, 101, 77, 0.92);
}

@keyframes clientWorkflowCurrentPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(183, 117, 37, 0.12);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 7px rgba(183, 117, 37, 0.03);
    }
}

.client-workflow-step--current .client-workflow-step__marker {
    border-color: rgba(183, 117, 37, 0.95);
    background: rgba(183, 117, 37, 0.1);
    box-shadow: 0 0 0 5px rgba(183, 117, 37, 0.08);
    animation: clientWorkflowCurrentPulse 2.4s ease-in-out infinite;
}

.client-workflow-step--current .client-workflow-step__marker::after {
    background: rgba(183, 117, 37, 0.95);
}

.client-workflow-step--current .client-workflow-step__label {
    color: #8b5d10;
}

.client-workflow-step--upcoming .client-workflow-step__button:hover .client-workflow-step__marker,
.client-workflow-step--upcoming .client-workflow-step__button:focus-visible .client-workflow-step__marker {
    border-color: rgba(80, 109, 87, 0.65);
}

.client-workflow-step__button:hover .client-workflow-step__label,
.client-workflow-step__button:focus-visible .client-workflow-step__label {
    color: var(--primary-dark);
}

.client-workflow-step__button:focus-visible {
    outline: none;
}

.client-workflow-panel__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(102, 119, 102, 0.12);
}

.client-workflow-branches {
    display: grid;
    gap: 10px;
    padding-top: 4px;
    justify-items: center;
}

.client-workflow-branches__fork {
    display: grid;
    justify-items: center;
    gap: 6px;
}

.client-workflow-branches__fork-line {
    width: 2px;
    height: 20px;
    border-radius: 999px;
    background: rgba(160, 174, 192, 0.55);
}

.client-workflow-branches__fork-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(34, 101, 77, 0.92);
    box-shadow: 0 0 0 4px rgba(34, 101, 77, 0.08);
}

.client-workflow-branches__fork strong {
    font-size: 0.82rem;
    color: var(--secondary-dark);
    margin: 0;
}

.client-workflow-branches__grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.client-workflow-branch {
    display: grid;
    gap: 8px;
    padding: 12px 12px 10px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(247,249,246,0.94));
    border: 1px solid rgba(102, 119, 102, 0.12);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
}

.client-workflow-branch__head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.client-workflow-branch__head strong {
    margin: 0;
}

.client-workflow-branch__title {
    margin: 0;
    color: var(--secondary-dark);
    font-weight: 700;
    font-size: 0.88rem;
}

.client-workflow-branch__track {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
}

.client-workflow-branch-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

.client-workflow-branch-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 8px;
    inset-inline-start: calc(50% + 11px);
    inset-inline-end: -2px;
    height: 2px;
    border-radius: 999px;
    background: rgba(160, 174, 192, 0.45);
}

.client-workflow-branch-step__marker {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(160, 174, 192, 0.45);
    background: #fff;
    z-index: 1;
}

.client-workflow-branch-step__marker::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: rgba(160, 174, 192, 0.3);
}

.client-workflow-branch-step__label {
    font-size: 0.68rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--secondary-dark);
}

.client-workflow-branch-step--done::after {
    background: linear-gradient(90deg, rgba(34, 101, 77, 0.92), rgba(34, 101, 77, 0.4));
}

.client-workflow-branch-step--done .client-workflow-branch-step__marker {
    border-color: rgba(34, 101, 77, 0.95);
    background: rgba(34, 101, 77, 0.12);
}

.client-workflow-branch-step--done .client-workflow-branch-step__marker::after {
    background: rgba(34, 101, 77, 0.92);
}

.client-workflow-branch-step--current .client-workflow-branch-step__marker {
    border-color: rgba(183, 117, 37, 0.95);
    background: rgba(183, 117, 37, 0.1);
    box-shadow: 0 0 0 3px rgba(183, 117, 37, 0.08);
    animation: clientWorkflowCurrentPulse 2.4s ease-in-out infinite;
}

.client-workflow-branch-step--current .client-workflow-branch-step__marker::after {
    background: rgba(183, 117, 37, 0.95);
}

.client-workflow-branch-step--current .client-workflow-branch-step__label {
    color: #8b5d10;
}

.client-details-grid {
    margin-top: 22px;
}

@media (max-width: 720px) {
    .client-workflow-panel__header {
        flex-direction: column;
    }

    .client-workflow-panel__status {
        justify-content: flex-start;
    }

    .client-workflow-step {
        flex-basis: 104px;
        min-width: 104px;
    }

    .client-workflow-step__marker {
        width: 28px;
        height: 28px;
    }

    .client-workflow-step__marker::after {
        inset: 6px;
    }

    .client-workflow-step:not(:last-child)::after {
        top: 14px;
        inset-inline-start: calc(50% + 18px);
    }

    .client-workflow-step__label {
        min-height: 34px;
        font-size: 0.78rem;
    }

    .client-workflow-branch__head {
        flex-direction: column;
    }

    .client-workflow-branch__track {
        gap: 8px;
    }

    .client-workflow-branch-step:not(:last-child)::after {
        inset-inline-start: calc(50% + 14px);
    }
}

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

.highlight-card {
    padding: 22px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.76));
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: var(--shadow-soft);
}

.highlight-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--secondary-dark);
}

.highlight-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

@media (min-width: 992px) {
    .highlight-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
        align-items: start;
    }

    .highlight-card--primary {
        min-width: 0;
    }

    .highlight-card--secondary {
        min-width: 0;
    }
}

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

.dashboard-alert-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.dashboard-alert-card {
    position: relative;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(213, 180, 139, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.88), rgba(249, 246, 241, 0.84));
    border: 1px solid rgba(42, 84, 61, 0.08);
    box-shadow: 0 14px 28px rgba(18, 32, 44, 0.06);
}

.dashboard-alert-card::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(47, 107, 79, 0.86), rgba(213, 180, 139, 0.7));
}

.dashboard-alert-card__head {
    display: grid;
    gap: 6px;
    padding-inline-start: 9px;
}

.dashboard-alert-card .badge {
    justify-self: start;
    padding: 5px 9px;
    font-size: 0.69rem;
    letter-spacing: 0.01em;
}

.dashboard-alert-card__value {
    display: block;
    margin: 0;
    color: var(--secondary-dark);
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.dashboard-alert-card__meta {
    margin: 0;
    min-height: 2.5em;
    padding-inline-start: 9px;
    font-size: 0.79rem;
    line-height: 1.6;
    color: var(--muted);
}

.dashboard-alert-card__link {
    font-size: 0.79rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.dashboard-alert-card__link:hover {
    color: #fff;
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(47, 107, 79, 0.18);
}

.dashboard-alert-card__link:visited,
.dashboard-alert-card__link:focus,
.dashboard-alert-card__link:active {
    color: #fff;
}

.dashboard-quick-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-bottom: 18px;
}

.dashboard-quick-search input {
    min-width: 0;
}

.list-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 22px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(42, 84, 61, 0.1);
}

.list-card-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.list-card-header strong {
    color: var(--secondary-dark);
    font-size: 1rem;
}

.list-card-header p,
.list-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.list-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.report-overview-grid,
.report-main-grid {
    display: grid;
    gap: 18px;
}

.report-overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

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

.report-stat-card,
.report-kpi-block,
.report-alert-card {
    position: relative;
    overflow: hidden;
}

.report-stat-card {
    padding: 20px 22px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82)),
        linear-gradient(120deg, rgba(213, 180, 139, 0.08), transparent 32%);
    border: 1px solid rgba(255,255,255,0.58);
    box-shadow: var(--shadow-soft);
}

.report-stat-card span,
.report-kpi-block span,
.report-alert-card span {
    display: block;
}

.report-stat-card span {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.report-stat-card strong {
    display: block;
    margin: 10px 0 8px;
    color: var(--secondary-dark);
    font-size: 2rem;
}

.report-stat-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    font-size: 0.82rem;
}

.report-panel {
    padding: 24px;
}

.report-kpi-grid,
.report-alert-grid {
    display: grid;
    gap: 14px;
}

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

.report-kpi-block {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(42, 84, 61, 0.1);
}

.report-kpi-block span {
    color: var(--muted-soft);
    font-size: 0.8rem;
    font-weight: 800;
}

.report-kpi-block strong {
    display: block;
    margin: 10px 0 8px;
    color: var(--secondary-dark);
    font-size: 1.9rem;
}

.report-kpi-block p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    font-size: 0.82rem;
}

.report-finance-table-wrap {
    overflow-x: auto;
}

.report-finance-table {
    width: 100%;
    border-collapse: collapse;
}

.report-finance-table th,
.report-finance-table td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(42, 84, 61, 0.1);
    text-align: right;
}

.report-finance-table thead th {
    color: var(--secondary-dark);
    background: rgba(22, 60, 82, 0.05);
}

.report-finance-table tbody td {
    color: var(--muted);
    font-size: 0.9rem;
}

.report-activity-list,
.report-bar-list,
.report-timeline {
    display: grid;
    gap: 12px;
}

.report-timeline {
    max-height: 760px;
    overflow-y: auto;
    padding-left: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(47, 107, 79, 0.68) rgba(22, 60, 82, 0.08);
}

.report-timeline::-webkit-scrollbar {
    width: 10px;
}

.report-timeline::-webkit-scrollbar-track {
    background: rgba(22, 60, 82, 0.08);
    border-radius: 999px;
}

.report-timeline::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(95, 143, 107, 0.96), rgba(47, 107, 79, 0.92));
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.38);
}

.report-timeline::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(126, 166, 138, 0.98), rgba(47, 107, 79, 0.98));
}

.report-activity-row,
.report-timeline-item {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(42, 84, 61, 0.1);
    transition: transform 0.82s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.82s cubic-bezier(0.22, 1, 0.36, 1), filter 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

.report-activity-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.report-activity-row strong,
.report-timeline-item strong {
    color: var(--secondary-dark);
}

.report-activity-row p,
.report-timeline-item p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.report-activity-row span {
    min-width: 54px;
    height: 54px;
    padding: 0 10px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(108, 154, 123, 0.14);
    color: var(--primary-dark);
    font-size: 1.1rem;
    font-weight: 800;
}

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

.report-alert-card {
    padding: 18px;
    border-radius: 22px;
    color: #fff;
}

.report-alert-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 2rem;
}

.report-alert-card span {
    color: rgba(255,255,255,0.82);
}

.report-alert-card.is-blue {
    background: linear-gradient(135deg, #2d6988, #183b52);
}

.report-alert-card.is-gold {
    background: linear-gradient(135deg, #c18a47, #8f5e24);
}

.report-alert-card.is-red {
    background: linear-gradient(135deg, #b54b4b, #7e2525);
}

.report-alert-card.is-green {
    background: linear-gradient(135deg, #2f7b5b, #1e5c43);
}

.report-bar-row {
    display: grid;
    gap: 8px;
}

.report-bar-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.report-bar-head strong {
    color: var(--secondary-dark);
    font-size: 0.92rem;
}

.report-bar-head span {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.report-bar-track {
    height: 11px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(22, 60, 82, 0.08);
}

.report-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #5f8f6b, #2f6b4f);
}

.report-bar-fill.is-alt {
    background: linear-gradient(90deg, #4b89a9, #1f5d7d);
}

.report-bar-fill.is-green {
    background: linear-gradient(90deg, #4a9b76, #236347);
}

.report-timeline-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

.report-timeline-item.is-entering {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(5px);
}

.report-timeline-type {
    min-width: 72px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(108, 154, 123, 0.14);
    color: var(--primary-dark);
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
}

.report-timeline-type--success {
    background: rgba(47, 107, 79, 0.16);
    color: #21543d;
}

.report-timeline-type--warning {
    background: rgba(193, 138, 71, 0.16);
    color: #8b5d22;
}

.report-timeline-type--danger {
    background: rgba(181, 75, 75, 0.16);
    color: #8d2f2f;
}

.report-timeline-type--progress {
    background: rgba(75, 137, 169, 0.16);
    color: #255d78;
}

.report-timeline-item[data-tone="danger"] {
    border-color: rgba(181, 75, 75, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255, 246, 246, 0.84));
}

.report-timeline-item[data-tone="warning"] {
    border-color: rgba(193, 138, 71, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255, 249, 241, 0.84));
}

.report-timeline-item[data-tone="success"] {
    border-color: rgba(47, 107, 79, 0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(243, 250, 246, 0.84));
}

.report-timeline-item[data-tone="progress"] {
    border-color: rgba(75, 137, 169, 0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(242, 248, 251, 0.84));
}

.report-timeline-item time {
    color: var(--muted-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.report-brief-panel {
    display: grid;
    gap: 18px;
    padding: 24px;
    background:
        radial-gradient(circle at top left, rgba(47, 107, 79, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248, 250, 248, 0.88));
}

.report-brief-panel__head {
    align-items: center;
}

.report-brief-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.report-snapshot-grid,
.report-compact-grid {
    display: grid;
    gap: 18px;
}

.report-snapshot-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

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

.report-compact-grid--featured {
    align-items: stretch;
}

.report-compact-grid--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-snapshot-card {
    position: relative;
    overflow: hidden;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(42, 84, 61, 0.1);
    box-shadow: var(--shadow-soft);
}

.report-snapshot-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(47, 107, 79, 0.9), rgba(108, 154, 123, 0.55));
}

.report-snapshot-card span,
.report-team-row__meta span {
    display: block;
}

.report-snapshot-card span {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.report-snapshot-card strong {
    display: block;
    margin: 8px 0 6px;
    color: var(--secondary-dark);
    font-size: 1.55rem;
    line-height: 1.25;
}

.report-snapshot-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.6;
}

.report-snapshot-card.is-primary::before {
    background: linear-gradient(180deg, #1f5d7d, #4b89a9);
}

.report-snapshot-card.is-success::before {
    background: linear-gradient(180deg, #236347, #4a9b76);
}

.report-snapshot-card.is-danger::before {
    background: linear-gradient(180deg, #7e2525, #b54b4b);
}

.report-panel--soft {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(249, 251, 249, 0.88)),
        radial-gradient(circle at top right, rgba(22, 60, 82, 0.05), transparent 30%);
}

.report-kpi-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-kpi-block--compact {
    padding: 16px;
    border-radius: 18px;
}

.report-kpi-block--compact strong {
    font-size: 1.7rem;
}

.report-kpi-block--compact p {
    font-size: 0.8rem;
    line-height: 1.6;
}

.report-metric-stack,
.report-team-list {
    display: grid;
    gap: 10px;
}

.report-metric-row,
.report-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(42, 84, 61, 0.08);
}

.report-metric-row strong,
.report-team-row strong {
    color: var(--secondary-dark);
    font-size: 0.9rem;
}

.report-metric-row span {
    color: var(--primary-dark);
    font-size: 0.94rem;
    font-weight: 800;
}

.report-alert-grid--compact {
    margin-top: 14px;
}

.report-activity-row--compact,
.report-timeline--compact .report-timeline-item {
    padding: 14px 16px;
    border-radius: 16px;
}

.report-activity-row--compact span {
    min-width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 1rem;
}

.report-timeline--compact {
    max-height: 520px;
}

.report-team-row {
    align-items: flex-start;
}

.report-team-row p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.report-team-row__meta {
    display: grid;
    gap: 6px;
    text-align: left;
}

.report-team-row__meta span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(108, 154, 123, 0.14);
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
}

.data-table-card {
    display: grid;
    gap: 18px;
}

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.form-group { display: grid; gap: 8px; }
label { font-weight: 700; color: var(--secondary); }

input, select, textarea {
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.92);
    font: inherit;
    color: var(--text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgba(47, 107, 79, 0.4);
    box-shadow: 0 0 0 4px rgba(47, 107, 79, 0.08);
    background: #fff;
}

textarea { min-height: 110px; resize: vertical; }
.table-wrap {
    overflow-x: auto;
    border-radius: 22px;
    border: 1px solid rgba(42, 84, 61, 0.08);
    background: rgba(255,255,255,0.5);
}

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

th, td {
    text-align: right;
    padding: 16px 14px;
    border-bottom: 1px solid rgba(42, 84, 61, 0.12);
    vertical-align: middle;
}

thead th {
    color: var(--secondary);
    font-size: 0.9rem;
    background: rgba(22, 60, 82, 0.04);
}

tbody tr:hover {
    background: rgba(47, 107, 79, 0.035);
}

.finance-table thead th {
    font-size: 0.82rem;
}

.finance-table td {
    font-size: 0.84rem;
    padding-top: 13px;
    padding-bottom: 13px;
}

.finance-print-button {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 14px;
}

.finance-print-button svg {
    width: 18px;
    height: 18px;
}

.finance-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

.finance-shell--compact {
    grid-template-columns: 1fr;
}

.finance-metrics-grid {
    margin-top: 18px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.finance-metrics-grid .metric-card {
    padding: 14px 16px;
    border-radius: 18px;
}

.finance-metrics-grid .metric-card::after {
    width: 96px;
    height: 96px;
    top: -34px;
    left: -28px;
}

.finance-metrics-grid .metric-card p {
    font-size: 0.8rem;
}

.finance-metrics-grid .metric-card strong {
    margin-top: 6px;
    font-size: 1.28rem;
    line-height: 1.15;
}

.finance-control-panel,
.finance-entry-panel,
.finance-ledger-panel {
    display: grid;
    gap: 18px;
}

.finance-control-panel {
    width: 100%;
    min-width: 0;
}

.finance-ledger-panel {
    width: 100%;
}

.finance-panel-head {
    display: grid;
    gap: 8px;
}

.finance-panel-head--spread {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.finance-panel-head--ledger {
    margin-bottom: 4px;
}

.finance-create-modal {
    width: min(100%, 860px);
}

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

.finance-entry-form textarea {
    min-height: 118px;
}

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

.finance-control-grid--hero {
    grid-template-columns: minmax(320px, 1.08fr) minmax(280px, 0.92fr);
    gap: 18px;
    align-items: stretch;
}

.finance-control-intro {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(58, 112, 196, 0.09), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244, 248, 252, 0.94));
    border: 1px solid rgba(42, 84, 61, 0.08);
}

.finance-control-intro .finance-panel-head {
    gap: 10px;
}

.finance-control-intro .section-title {
    font-size: 1.34rem;
}

.finance-control-intro .table-meta {
    max-width: 680px;
    line-height: 1.9;
}

.finance-control-intro__actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.finance-identity-card,
.finance-control-note {
    display: grid;
    gap: 12px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(42, 84, 61, 0.1);
    box-shadow: var(--shadow-soft);
}

.finance-identity-card {
    background:
        radial-gradient(circle at top right, rgba(47, 107, 79, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(245, 251, 247, 0.96), rgba(255,255,255,0.92));
}

.finance-identity-card.is-ready {
    border-color: rgba(47, 107, 79, 0.18);
    box-shadow: 0 18px 30px rgba(47, 107, 79, 0.08);
}

.finance-identity-card__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.finance-identity-card__eyebrow,
.finance-control-note__label {
    color: var(--muted-soft);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.finance-identity-card strong,
.finance-control-note strong {
    color: var(--secondary-dark);
    font-size: 1.12rem;
}

.finance-identity-card__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(42, 84, 61, 0.08);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.finance-identity-card__check.is-ready {
    background: rgba(45, 122, 88, 0.12);
    color: var(--success);
}

.finance-identity-card .table-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(45, 122, 88, 0.12);
    color: var(--success);
    font-size: 0.82rem;
    font-weight: 800;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.finance-identity-card .table-link:hover {
    background: rgba(45, 122, 88, 0.18);
    color: var(--success);
    transform: translateY(-1px);
}

.finance-identity-card p,
.finance-control-note p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
    font-size: 0.88rem;
}

.finance-control-note {
    background: rgba(255,255,255,0.82);
}

.finance-entry-actions {
    display: flex;
    justify-content: flex-start;
}

.finance-search-form {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid rgba(47, 107, 79, 0.08);
    border-radius: 18px;
    background: rgba(248, 250, 248, 0.92);
}

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

.finance-search-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
}

.finance-table-wrap {
    overflow-x: auto;
}

.finance-ledger-panel #financeLedgerContent {
    transition: opacity 0.22s ease, transform 0.22s ease, filter 0.22s ease;
    transform-origin: top center;
}

.finance-ledger-panel #financeLedgerContent.is-loading,
.finance-ledger-panel #financeLedgerContent.is-switching {
    opacity: 0;
    transform: translateY(10px) scale(0.992);
    filter: blur(1px);
}

.finance-table {
    width: 100%;
    min-width: 1180px;
}

.finance-table thead th {
    white-space: nowrap;
}

.finance-table td {
    vertical-align: middle;
}

.finance-reference-button {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 800;
    color: var(--primary-dark);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.finance-reference-button:hover {
    color: var(--secondary-dark);
}

.finance-table-description {
    min-width: 220px;
    max-width: 320px;
    line-height: 1.7;
    color: var(--muted);
}

.finance-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.finance-table-actions .finance-print-button,
.finance-table-actions .finance-edit-button {
    min-width: 0;
}

.finance-table-row-cancelled {
    background: rgba(248, 248, 248, 0.96);
    opacity: 0.76;
    filter: saturate(0.12) grayscale(0.2);
}

.finance-table-row-cancelled td {
    color: #ababab;
}

.finance-table-row-cancelled .finance-reference-button {
    color: #9e9e9e;
}

.finance-table-row-cancelled .finance-print-button,
.finance-table-row-cancelled .finance-edit-button {
    color: #a8a8a8;
    border-color: #e3e3e3;
    background: #f7f7f7;
}

.finance-detail-modal {
    width: min(760px, 100%);
}

.finance-detail-grid {
    margin-bottom: 16px;
}

.finance-detail-notes {
    margin-top: 4px;
}

.finance-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.finance-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(42, 84, 61, 0.12);
    background: rgba(255,255,255,0.82);
    color: var(--secondary-dark);
    font-weight: 800;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.finance-pagination__link:hover {
    transform: translateY(-1px);
    background: rgba(47, 107, 79, 0.08);
    border-color: rgba(47, 107, 79, 0.18);
}

.finance-pagination__link.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.finance-pagination__link.is-disabled {
    opacity: 0.48;
    pointer-events: none;
}

.search-panel,
.search-result-panel {
    display: grid;
    gap: 18px;
}

.search-result-panel {
    padding: 18px;
    border-radius: 22px;
}

.search-result-panel .panel-head.compact {
    margin-bottom: 10px;
}

.search-result-panel .section-title {
    margin-bottom: 4px;
    font-size: 1.02rem;
}

.search-result-panel .toolbar-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(47, 107, 79, 0.08);
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
}

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

.search-global-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
}

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

.search-mini-list {
    gap: 10px;
}

.search-mini-list--clients,
.search-mini-list--cases,
.search-mini-list--finance {
    gap: 12px;
}

.search-mini-card {
    gap: 6px;
    padding: 12px 14px;
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(213, 180, 139, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.84), rgba(249, 246, 241, 0.8));
    border: 1px solid rgba(42, 84, 61, 0.08);
    box-shadow: 0 10px 18px rgba(18, 32, 44, 0.04);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.search-mini-card:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 107, 79, 0.18);
    box-shadow: 0 14px 22px rgba(18, 32, 44, 0.06);
}

.search-mini-card strong {
    margin-bottom: 1px;
    color: var(--secondary-dark);
    font-size: 0.95rem;
    line-height: 1.45;
}

.search-mini-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.search-mini-card--client {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(75, 137, 169, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.9), rgba(244, 249, 251, 0.82));
}

.search-mini-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(47, 107, 79, 0.14), rgba(75, 137, 169, 0.18));
    color: var(--secondary-dark);
    font-size: 1rem;
    font-weight: 800;
    flex-shrink: 0;
}

.search-mini-card__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.search-case-paper {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 14px 15px 14px;
    border-radius: 16px 16px 18px 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(247, 243, 238, 0.88));
    border: 1px solid rgba(42, 84, 61, 0.08);
    box-shadow: 0 10px 18px rgba(18, 32, 44, 0.04);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-case-paper:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 107, 79, 0.18);
    box-shadow: 0 14px 22px rgba(18, 32, 44, 0.06);
}

.search-case-paper::before {
    content: '';
    position: absolute;
    inset-inline-start: 14px;
    inset-inline-end: 14px;
    top: 0;
    height: 5px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(90deg, rgba(47, 107, 79, 0.85), rgba(213, 180, 139, 0.78));
}

.search-case-paper__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(47, 107, 79, 0.08);
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 800;
}

.search-case-paper__content {
    display: grid;
    gap: 5px;
}

.search-case-paper strong {
    color: var(--secondary-dark);
    font-size: 0.94rem;
    line-height: 1.5;
}

.search-case-paper p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.6;
}

.search-finance-slip {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 14px 15px;
    border-radius: 18px;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.96) 0,
            rgba(255,255,255,0.96) 11px,
            rgba(226, 231, 228, 0.38) 11px,
            rgba(226, 231, 228, 0.38) 12px
        );
    border: 1px solid rgba(42, 84, 61, 0.08);
    box-shadow: 0 10px 18px rgba(18, 32, 44, 0.04);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-finance-slip:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 107, 79, 0.18);
    box-shadow: 0 14px 22px rgba(18, 32, 44, 0.06);
}

.search-finance-slip::after {
    content: '';
    position: absolute;
    inset-inline-start: 12px;
    inset-inline-end: 12px;
    bottom: 0;
    border-bottom: 2px dashed rgba(42, 84, 61, 0.16);
}

.search-finance-slip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.search-finance-slip__type {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(47, 107, 79, 0.08);
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 800;
}

.search-finance-slip__head strong {
    color: var(--secondary-dark);
    font-size: 0.93rem;
}

.search-finance-slip p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.search-finance-slip__amount {
    display: inline-flex;
    width: fit-content;
    padding-bottom: 3px;
    color: var(--primary-dark);
    font-size: 0.94rem;
    font-weight: 800;
}

.search-more-button {
    justify-self: start;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 800;
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.search-more-button:hover,
.search-more-button:focus,
.search-more-button:active,
.search-more-button:visited {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

.finance-card-list {
    display: grid;
    gap: 14px;
}

.finance-card-list--compact {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.finance-record-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247, 243, 238, 0.94));
    border: 1px solid rgba(42, 84, 61, 0.1);
    box-shadow: 0 18px 32px rgba(18, 32, 44, 0.07);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.finance-record-card--compact {
    gap: 12px;
    padding: 15px;
    border-radius: 20px;
}

.finance-record-card:hover {
    transform: translateY(-2px);
    border-color: rgba(47, 107, 79, 0.22);
    box-shadow: 0 22px 36px rgba(18, 32, 44, 0.1);
}

.finance-record-card.is-invoice {
    background:
        radial-gradient(circle at top right, rgba(58, 112, 196, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245, 248, 255, 0.94));
}

.finance-record-card.is-receipt {
    background:
        radial-gradient(circle at top right, rgba(47, 107, 79, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241, 249, 244, 0.94));
}

.finance-record-card.is-installment {
    background:
        radial-gradient(circle at top right, rgba(176, 126, 40, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(252, 247, 239, 0.94));
}

.finance-record-card.is-cancelled {
    background: linear-gradient(180deg, rgba(250, 250, 250, 0.995), rgba(245, 245, 245, 0.985));
    border-color: #e8e8e8;
    box-shadow: none;
    filter: saturate(0.12) grayscale(0.2);
    opacity: 0.78;
}

.finance-record-card.is-cancelled:hover {
    transform: none;
    border-color: #e3e3e3;
    box-shadow: none;
}

.finance-record-card.is-cancelled .finance-record-card__type,
.finance-record-card.is-cancelled .finance-record-card__amount,
.finance-record-card.is-cancelled .finance-record-card__title strong,
.finance-record-card.is-cancelled .finance-record-card__title p,
.finance-record-card.is-cancelled .finance-record-card__meta strong,
.finance-record-card.is-cancelled .finance-record-card__meta em,
.finance-record-card.is-cancelled .finance-record-card__notes strong,
.finance-record-card.is-cancelled .finance-record-card__notes p {
    color: #b1b1b1;
}

.finance-record-card.is-cancelled .finance-record-card__meta,
.finance-record-card.is-cancelled .finance-record-card__notes {
    opacity: 0.58;
}

.finance-record-card.is-cancelled .finance-print-button,
.finance-record-card.is-cancelled .finance-edit-button {
    color: #a8a8a8;
    border-color: #e3e3e3;
    background: #f7f7f7;
}

.finance-record-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.finance-record-card__badge-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.finance-record-card__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(22, 60, 82, 0.08);
    color: var(--secondary-dark);
    font-size: 0.76rem;
    font-weight: 800;
}

.finance-record-card__amount {
    color: var(--secondary-dark);
    font-size: 1.08rem;
    line-height: 1.2;
}

.finance-record-card__title {
    display: grid;
    gap: 5px;
}

.finance-record-card__title strong {
    color: var(--secondary-dark);
    font-size: 0.94rem;
}

.finance-record-card__title p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

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

.finance-record-card__meta {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(42, 84, 61, 0.08);
}

.finance-record-card__meta strong {
    color: var(--secondary);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.finance-record-card__meta em {
    font-style: normal;
    color: var(--secondary-dark);
    font-size: 0.82rem;
    font-weight: 700;
}

.finance-record-card__notes {
    display: grid;
    gap: 5px;
    padding-top: 1px;
    border-top: 1px solid rgba(42, 84, 61, 0.08);
}

.finance-record-card__notes strong {
    color: var(--secondary);
    font-size: 0.72rem;
}

.finance-record-card__notes p {
    margin: 0;
    color: var(--muted);
    line-height: 1.72;
    font-size: 0.8rem;
}

.finance-record-card__actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.finance-record-card__actions .finance-print-button,
.finance-record-card__actions .finance-edit-button {
    width: auto;
    min-width: 0;
    padding: 9px 13px;
    gap: 8px;
}

.finance-record-card__actions .finance-print-button span,
.finance-record-card__actions .finance-edit-button {
    font-size: 0.8rem;
    font-weight: 800;
}

.office-identity-panel,
.office-identity-note {
    display: grid;
    gap: 18px;
}

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

.office-identity-assets-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.office-identity-sections {
    display: grid;
    gap: 22px;
}

.office-identity-section {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 26px;
    border: 1px solid rgba(21, 54, 80, 0.1);
    background:
        radial-gradient(circle at top right, rgba(215, 194, 138, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246, 249, 247, 0.98));
    box-shadow: 0 16px 34px rgba(16, 34, 28, 0.05);
}

.office-identity-section__head {
    display: grid;
    gap: 6px;
}

.office-identity-section__eyebrow {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(21, 54, 80, 0.08);
    color: var(--ink-strong);
    font-size: 0.76rem;
    font-weight: 800;
}

.office-identity-section__head strong {
    color: var(--ink-strong);
    font-size: 1.05rem;
}

.office-identity-section__head p,
.office-identity-upload-card__head p {
    margin: 0;
}

.office-identity-section__head p {
    color: var(--muted);
    max-width: 780px;
}

.office-identity-section-grid {
    display: grid;
    gap: 18px;
}

.office-identity-section-grid--double {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.office-identity-upload-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.office-identity-logo-preview {
    min-height: 180px;
    padding: 16px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(47, 107, 79, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(251, 253, 251, 0.96), rgba(244, 248, 245, 0.94));
    border: 1px solid rgba(42, 84, 61, 0.1);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-soft);
}

.office-identity-logo-preview img {
    width: 100%;
    max-height: 148px;
    object-fit: contain;
    display: block;
}

.office-identity-logo-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 140px;
    border-radius: 18px;
    border: 1px dashed rgba(42, 84, 61, 0.18);
    color: var(--muted-soft);
    font-size: 0.88rem;
    font-weight: 800;
}

.office-identity-upload-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(42, 84, 61, 0.1);
    box-shadow: var(--shadow-soft);
}

.office-identity-upload-card--asset {
    align-content: start;
}

.office-identity-upload-card__head {
    display: grid;
    gap: 6px;
}

.office-identity-upload-card__head strong {
    color: var(--ink-strong);
    font-size: 1rem;
}

.office-identity-asset-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.office-identity-asset-layout--template {
    grid-template-columns: 210px minmax(0, 1fr);
}

.office-identity-asset-fields {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.office-identity-logo-preview--template {
    min-height: 260px;
}

.office-identity-logo-preview--template img {
    max-height: 228px;
}

.office-identity-logo-preview--compact {
    min-height: 150px;
}

.office-identity-logo-preview--compact img {
    max-height: 118px;
}

.office-identity-remove {
    width: fit-content;
}

.office-identity-toggle {
    width: fit-content;
}

.office-identity-actions {
    display: flex;
    justify-content: flex-start;
}

.office-interface-preview {
    display: grid;
    gap: 18px;
    margin-top: 8px;
    padding: 20px;
    border-radius: 26px;
    border: 1px solid rgba(21, 54, 80, 0.14);
    background:
        radial-gradient(circle at top right, rgba(215, 194, 138, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244, 247, 246, 0.98));
    box-shadow: 0 18px 42px rgba(16, 34, 28, 0.08);
}

.panel-head--spread {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
}

.office-interface-master-toggle {
    align-self: center;
    justify-self: start;
    min-height: 48px;
    gap: 10px;
}

.office-interface-master-toggle.is-active {
    background: rgba(21, 54, 80, 0.12);
    border-color: rgba(21, 54, 80, 0.22);
}

.office-interface-master-toggle__icon {
    font-size: 1rem;
    line-height: 1;
}

.office-interface-notice {
    padding: 14px 16px;
    border-radius: 18px;
    font-weight: 700;
    line-height: 1.8;
}

.office-interface-notice.is-success {
    background: rgba(31, 123, 76, 0.12);
    color: #1f6e49;
    border: 1px solid rgba(31, 123, 76, 0.18);
}

.office-interface-notice.is-warning {
    background: rgba(180, 102, 26, 0.12);
    color: #9a5613;
    border: 1px solid rgba(180, 102, 26, 0.18);
}

.office-interface-preview__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 6px;
}

.office-interface-preview__chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(21, 54, 80, 0.08);
    color: #153650;
    font-size: 0.9rem;
    font-weight: 700;
}

.office-interface-preview__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 6px;
}

.office-interface-preview-card {
    position: relative;
    display: grid;
    gap: 14px;
    min-height: 240px;
    padding: 24px;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(21, 54, 80, 0.1);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(246, 248, 247, 0.96)),
        radial-gradient(circle at top left, rgba(215, 194, 138, 0.22), transparent 32%);
    box-shadow: 0 18px 34px rgba(19, 36, 51, 0.08);
}

.office-interface-preview-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 5px;
    background: linear-gradient(90deg, #153650, #d7c28a);
}

.office-interface-preview-card .section-kicker {
    width: fit-content;
    margin-bottom: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(21, 54, 80, 0.08);
    color: #153650;
    font-weight: 800;
}

.office-interface-preview-card__title {
    margin: 0;
    color: #102a22;
    font-size: 1.16rem;
    line-height: 1.6;
}

.office-interface-preview-card__text {
    margin: 0;
    color: var(--muted);
    line-height: 2;
    font-size: 0.94rem;
}

.office-interface-preview__footer {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    margin-top: 12px;
    padding: 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, #153650, #102a22);
    color: rgba(255,255,255,0.9);
}

.office-interface-preview__footer-panel {
    position: relative;
    padding: 4px 0;
    border-radius: 18px;
}

.office-interface-preview__footer strong {
    display: block;
    margin-bottom: 10px;
    color: #f2e6b8;
}

.office-interface-preview__footer p {
    margin: 0 0 8px;
    line-height: 1.9;
}

.office-interface-preview__footer p:last-child {
    margin-bottom: 0;
}

.office-interface-editor {
    display: grid;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.office-interface-editor[hidden],
.office-interface-preview__display[hidden] {
    display: none !important;
}

.office-interface-editor textarea {
    min-height: 120px;
    resize: vertical;
}

.office-interface-editor__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.office-interface-editor__grid--footer {
    grid-template-columns: 1fr;
}

.office-interface-editor-card {
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(21, 54, 80, 0.1);
    background: rgba(255,255,255,0.88);
    box-shadow: var(--shadow-soft);
}

.office-interface-editor-card--wide {
    width: 100%;
}

.office-interface-editor__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.table-link {
    color: var(--secondary);
    font-weight: 800;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.table-link:hover {
    color: var(--primary-dark);
    opacity: 0.9;
}

.topbar-admin-create-actions {
    display: flex;
    justify-content: flex-start;
}

.topbar-admin-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    align-items: start;
}

.topbar-admin-item {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(42, 84, 61, 0.12);
    box-shadow: var(--shadow-soft);
}

.topbar-admin-item--wide {
    width: 100%;
}

.case-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.case-card-grid--focused {
    grid-template-columns: minmax(0, 320px);
    justify-content: start;
}

.case-mini-card.is-collapsed {
    display: none;
}

.case-focused-toolbar {
    margin-top: 16px;
    align-items: center;
}

.case-selection-stage {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(520px, 1fr);
    gap: 18px;
    align-items: start;
}

.case-mini-card {
    display: block;
    position: relative;
    min-height: 300px;
    padding: 0;
    border-radius: 16px;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-decoration: none;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.case-mini-card__paper-shell {
    position: relative;
    display: block;
    min-height: 300px;
}

.case-mini-card__paper {
    display: block;
    position: relative;
    width: 100%;
    min-height: 300px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(143, 108, 36, 0.06) 0 14px, transparent 14px 100%),
        linear-gradient(180deg, #fffefb 0%, #f7f2e7 100%);
    border: 1px solid rgba(148, 116, 49, 0.16);
    box-shadow:
        0 16px 28px rgba(68, 54, 28, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

.case-mini-card__paper::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #f1e6c8 0%, #fffdf7 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    border-right: 1px solid rgba(148, 116, 49, 0.12);
    border-top: 1px solid rgba(148, 116, 49, 0.12);
    box-shadow: -3px 3px 10px rgba(109, 80, 22, 0.05);
}

.case-mini-card__paper::after {
    content: "";
    position: absolute;
    inset: 16px 14px 16px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 116, 49, 0.1);
    background:
        linear-gradient(180deg, rgba(149, 117, 51, 0.1) 0 3px, transparent 3px 100%),
        repeating-linear-gradient(
            180deg,
            transparent 0 24px,
            rgba(149, 117, 51, 0.055) 24px 25px
        );
    pointer-events: none;
}

.case-mini-card__paper-content {
    display: grid;
    align-content: start;
    gap: 8px;
    position: absolute;
    inset: 34px 24px 18px 24px;
    z-index: 2;
    padding: 0;
}

.case-mini-card__file-tab {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    justify-self: start;
    min-height: 26px;
    padding: 0 0 4px;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: #7a5d2d;
    font-size: 0.67rem;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(148, 116, 49, 0.12);
}

.case-mini-card__file-tab svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.case-mini-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.case-mini-card__head-badges {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.case-mini-card__tone-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.case-mini-card__number {
    color: #7b6336;
    font-size: 0.7rem;
    font-weight: 800;
    min-width: 0;
}

.case-mini-card:hover,
.case-mini-card.is-active {
    transform: translateY(-5px);
}

.case-mini-card.is-active {
    box-shadow: none;
}

.case-mini-card.is-active .case-mini-card__paper {
    background:
        linear-gradient(180deg, rgba(47, 107, 79, 0.2) 0 16px, transparent 16px 100%),
        linear-gradient(180deg, #f7fbf7 0%, #dbe8db 100%);
    border-color: rgba(47, 107, 79, 0.34);
    box-shadow:
        0 22px 38px rgba(47, 107, 79, 0.18),
        0 0 0 2px rgba(47, 107, 79, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    animation: activeCaseGlow 3.2s ease-in-out infinite;
}

.case-mini-card.is-active .case-mini-card__paper::before {
    background: linear-gradient(135deg, #cfe1d1 0%, #f8fbf6 100%);
    border-right-color: rgba(47, 107, 79, 0.18);
    border-top-color: rgba(47, 107, 79, 0.18);
}

.case-mini-card.is-active .case-mini-card__paper::after {
    border-color: rgba(47, 107, 79, 0.15);
    background:
        linear-gradient(180deg, rgba(47, 107, 79, 0.1) 0 3px, transparent 3px 100%),
        repeating-linear-gradient(
            180deg,
            transparent 0 24px,
            rgba(47, 107, 79, 0.05) 24px 25px
        );
}

.case-mini-card.is-active .case-mini-card__file-tab,
.case-mini-card.is-active .case-mini-card__number,
.case-mini-card.is-active .case-mini-card__detail strong,
.case-mini-card.is-active .case-mini-card__link,
.case-mini-card.is-active strong {
    color: #2f5b46;
}

.case-mini-card.is-active p,
.case-mini-card.is-active .case-mini-card__detail {
    color: rgba(47, 69, 57, 0.78);
}

.case-mini-card.is-active strong {
    border-bottom-color: rgba(47, 107, 79, 0.18);
}

.case-mini-card.is-active .case-mini-card__footer {
    border-top-color: rgba(47, 107, 79, 0.16);
}

.case-mini-card.is-active .case-mini-card__tone-badge {
    background: rgba(47, 107, 79, 0.14);
    border-color: rgba(47, 107, 79, 0.2);
    color: #2f6b4f;
}

.case-mini-card.is-active .badge {
    box-shadow: none;
    color: var(--secondary);
}

.case-mini-card--closed .case-mini-card__paper {
    background:
        linear-gradient(180deg, rgba(145, 148, 152, 0.035) 0 14px, transparent 14px 100%),
        linear-gradient(180deg, #fcfcfc 0%, #f3f3f3 100%);
    border-color: rgba(136, 140, 146, 0.1);
    box-shadow:
        0 8px 16px rgba(85, 89, 95, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    filter: grayscale(0.6) saturate(0.35) opacity(0.82);
}

.case-mini-card--closed .case-mini-card__paper::before {
    background: linear-gradient(135deg, #e7e7e8 0%, #fcfcfc 100%);
    border-right-color: rgba(136, 140, 146, 0.05);
    border-top-color: rgba(136, 140, 146, 0.05);
}

.case-mini-card--closed .case-mini-card__paper::after {
    border-color: rgba(136, 140, 146, 0.05);
    background:
        linear-gradient(180deg, rgba(120, 123, 128, 0.035) 0 3px, transparent 3px 100%),
        repeating-linear-gradient(
            180deg,
            transparent 0 24px,
            rgba(120, 123, 128, 0.018) 24px 25px
        );
}

.case-mini-card--closed .case-mini-card__file-tab,
.case-mini-card--closed .case-mini-card__number,
.case-mini-card--closed strong,
.case-mini-card--closed p,
.case-mini-card--closed .case-mini-card__detail,
.case-mini-card--closed .case-mini-card__detail strong,
.case-mini-card--closed .case-mini-card__link {
    color: #a0a4aa;
}

.case-mini-card--closed .case-mini-card__tone-badge {
    background: rgba(120, 123, 128, 0.05);
    border-color: rgba(120, 123, 128, 0.07);
    color: #a0a4aa;
}

.case-mini-card--closed .badge {
    background: rgba(120, 123, 128, 0.09);
    border-color: rgba(120, 123, 128, 0.12);
    color: #8a8f96;
}

.case-mini-card--closed .badge.success,
.case-mini-card--closed .badge.progress,
.case-mini-card--closed .badge.warning,
.case-mini-card--closed .badge.danger {
    background: rgba(120, 123, 128, 0.09);
    border-color: rgba(120, 123, 128, 0.12);
    color: #8a8f96;
}

.case-mini-card--closed strong {
    border-bottom-color: rgba(120, 123, 128, 0.05);
}

.case-mini-card--closed .case-mini-card__footer {
    border-top-color: rgba(120, 123, 128, 0.05);
}

.case-mini-card--fresh .case-mini-card__paper {
    background:
        linear-gradient(180deg, rgba(93, 123, 86, 0.08) 0 14px, transparent 14px 100%),
        linear-gradient(180deg, #fcfdfb 0%, #e7eee0 100%);
    border-color: rgba(118, 147, 108, 0.18);
    box-shadow:
        0 16px 28px rgba(72, 99, 63, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.case-mini-card--fresh .case-mini-card__paper::before {
    background: linear-gradient(135deg, #d7e5d0 0%, #fbfdf8 100%);
    border-right-color: rgba(118, 147, 108, 0.1);
    border-top-color: rgba(118, 147, 108, 0.1);
}

.case-mini-card--fresh .case-mini-card__paper::after {
    border-color: rgba(118, 147, 108, 0.1);
}

.case-mini-card--fresh .case-mini-card__file-tab,
.case-mini-card--fresh .case-mini-card__number,
.case-mini-card--fresh .case-mini-card__detail strong,
.case-mini-card--fresh .case-mini-card__link {
    color: #557247;
}

.case-mini-card--fresh .case-mini-card__tone-badge {
    background: rgba(93, 123, 86, 0.12);
    border-color: rgba(93, 123, 86, 0.16);
    color: #557247;
}

.case-mini-card--warning .case-mini-card__paper {
    background:
        linear-gradient(180deg, rgba(176, 133, 67, 0.07) 0 14px, transparent 14px 100%),
        linear-gradient(180deg, #fffdfa 0%, #f2e8d8 100%);
    border-color: rgba(191, 146, 79, 0.18);
    box-shadow:
        0 16px 28px rgba(150, 110, 53, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.case-mini-card--warning .case-mini-card__paper::before {
    background: linear-gradient(135deg, #edd9b3 0%, #fdf8ef 100%);
    border-right-color: rgba(191, 146, 79, 0.1);
    border-top-color: rgba(191, 146, 79, 0.1);
}

.case-mini-card--warning .case-mini-card__paper::after {
    border-color: rgba(191, 146, 79, 0.1);
}

.case-mini-card--warning .case-mini-card__file-tab,
.case-mini-card--warning .case-mini-card__number,
.case-mini-card--warning .case-mini-card__detail strong,
.case-mini-card--warning .case-mini-card__link {
    color: #8b5f26;
}

.case-mini-card--warning .case-mini-card__tone-badge {
    background: rgba(176, 133, 67, 0.11);
    border-color: rgba(176, 133, 67, 0.14);
    color: #8b5f26;
}

.case-mini-card--late .case-mini-card__paper {
    background:
        linear-gradient(180deg, rgba(144, 85, 76, 0.08) 0 14px, transparent 14px 100%),
        linear-gradient(180deg, #fffdfc 0%, #eededb 100%);
    border-color: rgba(163, 101, 92, 0.2);
    box-shadow:
        0 16px 28px rgba(124, 73, 66, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.case-mini-card--late .case-mini-card__paper::before {
    background: linear-gradient(135deg, #e4c1bc 0%, #fdf5f3 100%);
    border-right-color: rgba(163, 101, 92, 0.11);
    border-top-color: rgba(163, 101, 92, 0.11);
}

.case-mini-card--late .case-mini-card__paper::after {
    border-color: rgba(163, 101, 92, 0.1);
}

.case-mini-card--late .case-mini-card__file-tab,
.case-mini-card--late .case-mini-card__number,
.case-mini-card--late .case-mini-card__detail strong,
.case-mini-card--late .case-mini-card__link {
    color: #8a4d45;
}

.case-mini-card--late .case-mini-card__tone-badge {
    background: rgba(144, 85, 76, 0.12);
    border-color: rgba(144, 85, 76, 0.16);
    color: #8a4d45;
}

.case-mini-card.is-active .case-mini-card__file-tab {
    color: #2f6b4f;
}

.case-mini-card.is-active .case-mini-card__active-badge {
    background: linear-gradient(135deg, #2f6b4f, #3f8061);
    color: #fff;
    box-shadow: 0 10px 22px rgba(47, 107, 79, 0.24);
}

.case-mini-card__active-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 21px;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(47, 107, 79, 0.96), rgba(26, 73, 52, 0.94));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 20px rgba(47, 107, 79, 0.18);
}

.case-mini-card strong {
    color: #493922;
    font-size: 0.84rem;
    line-height: 1.38;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 116, 49, 0.12);
}

.case-mini-card p {
    margin: 0;
    color: #746444;
    line-height: 1.4;
    font-size: 0.69rem;
    font-weight: 700;
}

.case-mini-card__detail {
    display: block;
    color: #6c6047;
    font-size: 0.68rem;
    line-height: 1.42;
}

.case-mini-card__detail strong {
    display: inline;
    font-size: 0.68rem;
    color: #7b6234;
}

.case-mini-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 116, 49, 0.1);
}

.case-mini-card__link {
    color: #71592d;
    font-size: 0.69rem;
    font-weight: 800;
}

.case-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.case-head-actions--stacked {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.case-action-button {
    width: auto;
    min-width: 170px;
    flex: 0 1 auto;
    padding-right: 18px;
    padding-left: 18px;
    justify-content: center;
}

.case-sidebar-actions-panel .case-close-form {
    flex: 0 1 auto;
}

.case-sidebar-actions-panel .case-close-form .case-action-button {
    width: 100%;
}

.case-sidebar-actions-panel .case-head-actions {
    margin-bottom: 16px;
}

.case-file-shell {
    gap: 18px;
}

.case-file-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.case-overview-panel,
.case-stage-preview-panel,
.case-quick-edit-panel,
.case-selected-preview-panel,
.case-sidebar-actions-panel,
.case-timeline-panel,
.case-attachments-panel {
    padding: 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(210, 182, 120, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.97), rgba(245, 248, 246, 0.95));
    border: 1px solid rgba(42, 84, 61, 0.12);
    box-shadow: 0 24px 48px rgba(16, 31, 25, 0.08);
}

.case-stage-preview-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.case-stage-preview-panel__stage {
    display: grid;
    gap: 6px;
    margin: 12px 0 14px;
    padding: 12px 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(20, 56, 42, 0.06), rgba(210, 182, 120, 0.12));
    border: 1px solid rgba(42, 84, 61, 0.12);
    text-align: center;
}

.case-stage-preview-panel__stage strong {
    color: var(--secondary-dark);
    font-size: 1rem;
}

.case-stage-preview-panel__stage span {
    color: var(--muted);
    font-weight: 700;
    font-size: 0.76rem;
}

.case-stage-preview-panel__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

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

.case-stage-preview-panel {
    padding: 18px 18px 16px;
    display: grid;
    gap: 10px;
    margin-top: -10px;
}

.case-stage-preview-panel .section-title {
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.case-stage-preview-panel .table-meta {
    font-size: 0.82rem;
}

.case-stage-preview-panel__grid .info-card,
.case-stage-preview-panel__blocks .case-overview-section-card {
    padding: 14px;
    border-radius: 18px;
}

.case-stage-preview-panel__grid .info-card {
    min-height: 100%;
}

.case-stage-preview-panel .info-card strong,
.case-stage-preview-panel .mini-item strong,
.case-stage-preview-panel__blocks h4 {
    font-size: 0.9rem;
}

.case-stage-preview-panel .info-card p,
.case-stage-preview-panel .mini-item p {
    font-size: 0.8rem;
}

.case-rotator-panel {
    padding: 20px;
}

.case-rotator-panel__nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

.case-rotator-panel__titles {
    min-width: 0;
    text-align: center;
}

.case-rotator-panel__titles .section-title {
    margin: 4px 0 0;
    font-size: 1.05rem;
}

.case-rotator-panel__arrow {
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 16px;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.case-rotator-card {
    display: none;
}

.case-rotator-card.is-active {
    display: block;
}

.case-overview-panel__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.case-overview-panel__badge {
    min-width: 150px;
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(20, 56, 42, 0.06), rgba(210, 182, 120, 0.12));
    border: 1px solid rgba(42, 84, 61, 0.12);
    text-align: center;
}

.case-overview-panel__badge strong {
    color: var(--secondary-dark);
    font-size: 1.1rem;
}

.case-overview-panel__badge small {
    color: var(--muted);
    font-weight: 700;
}

.case-overview-panel__grid {
    margin-bottom: 18px;
}

.case-overview-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.case-overview-section-card {
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(42, 84, 61, 0.08);
}

.case-overview-section-card h4 {
    margin: 6px 0 14px;
    color: var(--secondary-dark);
    font-size: 1rem;
}

.case-quick-edit-panel__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.case-quick-edit-panel__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.case-quick-edit-panel form:not(.is-editing) input[readonly],
.case-quick-edit-panel form:not(.is-editing) textarea[readonly],
.case-quick-edit-panel form:not(.is-editing) select[disabled] {
    background: linear-gradient(180deg, rgba(247, 249, 248, 0.98), rgba(239, 244, 241, 0.98));
    color: var(--secondary-dark);
    border-style: dashed;
}

.case-file-preview-card {
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244, 247, 243, 0.96)),
        linear-gradient(135deg, rgba(47, 107, 79, 0.06), transparent 52%);
    border: 1px solid rgba(42, 84, 61, 0.12);
}

.case-file-preview-card__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.case-file-preview-card__eyebrow {
    color: var(--muted-soft);
    font-size: 0.74rem;
    font-weight: 800;
}

.case-file-preview-card strong {
    color: var(--secondary-dark);
    font-size: 1.12rem;
    line-height: 1.7;
}

.case-file-preview-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}

.case-file-preview-card__meta-list {
    display: grid;
    gap: 12px;
}

.case-file-preview-card__meta-list div {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(42, 84, 61, 0.045);
}

.case-file-preview-card__meta-list span {
    color: var(--muted-soft);
    font-size: 0.76rem;
    font-weight: 700;
}

.case-file-preview-card__meta-list strong {
    font-size: 0.96rem;
    color: var(--secondary-dark);
}

.metrics-grid--case-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
}

.case-rotator-panel__nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

.case-rotator-panel__titles {
    min-width: 0;
    text-align: center;
}

.case-rotator-panel__arrow {
    min-width: 52px;
    min-height: 52px;
    border-radius: 18px;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.case-rotator-card {
    display: none;
}

.case-rotator-card.is-active {
    display: block;
}

.case-timeline-panel .section-title {
    margin-bottom: 14px;
}

.report-timeline--case {
    gap: 10px;
    max-height: 430px;
    padding: 2px 4px 2px 0;
}

.report-timeline--case .report-timeline-item {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px 14px 14px 20px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(16, 31, 25, 0.05);
}

.report-timeline--case .report-timeline-item::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 8px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(210, 182, 120, 0.94), rgba(47, 107, 79, 0.72));
}

.report-timeline--case .report-timeline-type {
    min-width: 62px;
    padding: 7px 10px;
    font-size: 0.72rem;
    align-self: start;
}

.report-timeline-item__content {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.report-timeline-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.report-timeline-item__head strong {
    margin: 0;
    color: var(--secondary-dark);
    font-size: 0.92rem;
    line-height: 1.7;
}

.report-timeline-item__head time {
    flex-shrink: 0;
    color: var(--muted-soft);
    font-size: 0.74rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(22, 60, 82, 0.06);
}

.report-timeline-item__content .table-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.8;
}

.case-timeline-panel {
    padding: 18px;
}

.case-timeline-panel .section-kicker {
    margin-bottom: 4px;
}

.case-timeline-panel .section-title {
    margin-bottom: 12px;
    font-size: 1.02rem;
}

.case-timeline-panel .empty-state {
    min-height: 180px;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
}

.case-attachments-panel .case-attachment-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.case-head-actions .button.is-disabled {
    opacity: 0.58;
    pointer-events: none;
}

.case-close-confirm-modal {
    width: min(520px, calc(100% - 18px));
}

.case-close-confirm-modal__badge {
    background: linear-gradient(135deg, rgba(47, 107, 79, 0.16), rgba(213, 180, 139, 0.18));
    color: var(--primary-dark);
    border: 1px solid rgba(47, 107, 79, 0.12);
}

.case-lawyer-rating-card {
    display: grid;
    gap: 16px;
    margin-top: 18px;
    padding: 20px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(213, 180, 139, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.84), rgba(248, 246, 242, 0.8));
    border: 1px solid rgba(42, 84, 61, 0.08);
}

.case-lawyer-rating-card.is-excellent {
    background:
        radial-gradient(circle at top left, rgba(74, 155, 118, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(245, 252, 248, 0.92), rgba(237, 248, 241, 0.88));
    border-color: rgba(47, 107, 79, 0.14);
}

.case-lawyer-rating-card.is-good {
    background:
        radial-gradient(circle at top left, rgba(120, 167, 91, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(249, 252, 245, 0.92), rgba(243, 248, 238, 0.88));
    border-color: rgba(120, 167, 91, 0.14);
}

.case-lawyer-rating-card.is-fair {
    background:
        radial-gradient(circle at top left, rgba(213, 180, 139, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(255, 250, 244, 0.92), rgba(250, 245, 238, 0.88));
    border-color: rgba(213, 180, 139, 0.16);
}

.case-lawyer-rating-card.is-low {
    background:
        radial-gradient(circle at top left, rgba(214, 145, 86, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(255, 247, 241, 0.92), rgba(250, 241, 235, 0.88));
    border-color: rgba(214, 145, 86, 0.16);
}

.case-lawyer-rating-card.is-poor {
    background:
        radial-gradient(circle at top left, rgba(181, 75, 75, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(255, 245, 245, 0.92), rgba(249, 238, 238, 0.88));
    border-color: rgba(181, 75, 75, 0.16);
}

.case-lawyer-rating-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.case-lawyer-rating-card__score {
    display: grid;
    justify-items: end;
    gap: 4px;
    min-width: 120px;
}

.case-lawyer-rating-card__score strong {
    color: var(--secondary-dark);
    font-size: 1.4rem;
    line-height: 1;
}

.case-lawyer-rating-card__score span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.case-lawyer-rating-card__comment {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.64);
    border: 1px solid rgba(42, 84, 61, 0.08);
}

.case-lawyer-rating-card__comment strong {
    color: var(--secondary-dark);
}

.case-lawyer-rating-card__comment p,
.case-lawyer-rating-card__comment span {
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
}

.case-close-form {
    margin: 0;
}

.case-close-button {
    min-height: 42px;
}

.case-close-button:hover {
    color: #fff;
}

.case-reopen-button {
    min-height: 42px;
}

.case-file-shell {
    margin-top: 4px;
    scroll-margin-top: 24px;
    outline: none;
}

.case-file-shell.is-focus-landing {
    animation: caseDetailsArrival 0.82s cubic-bezier(.2,.7,.2,1);
}

.case-file-shell:focus,
.case-file-shell:focus-visible {
    outline: none;
}

.case-file-shell.is-focus-landing > .panel-card:first-child {
    border-color: rgba(197, 169, 109, 0.34);
    box-shadow:
        0 26px 54px rgba(17, 33, 27, 0.12),
        0 0 0 1px rgba(197, 169, 109, 0.1),
        0 0 0 12px rgba(47, 107, 79, 0.05);
}

@keyframes caseDetailsArrival {
    0% {
        opacity: 0.86;
        transform: translateY(26px) scale(0.988);
    }
    45% {
        opacity: 1;
        transform: translateY(-4px) scale(1.003);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes activeCaseGlow {
    0%, 100% {
        box-shadow:
            0 22px 38px rgba(47, 107, 79, 0.18),
            0 0 0 2px rgba(47, 107, 79, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }
    50% {
        box-shadow:
            0 28px 48px rgba(47, 107, 79, 0.26),
            0 0 0 4px rgba(47, 107, 79, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.94);
    }
}

.case-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.case-attachment-card {
    display: grid;
    gap: 12px;
    position: relative;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.78));
    border: 1px solid rgba(42, 84, 61, 0.12);
    box-shadow: var(--shadow-soft);
    transform-origin: center top;
    overflow: visible;
    transition:
        transform 0.96s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.96s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.96s cubic-bezier(0.22, 1, 0.36, 1),
        margin 0.96s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.96s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-attachment-card.is-removing {
    opacity: 0;
    transform: scale(0.965) translateY(-8px);
    filter: blur(3px);
    pointer-events: none;
}

.case-attachment-card.is-entering {
    opacity: 0;
    transform: translateY(24px) scale(0.982);
    filter: blur(6px);
}

.case-attachment-card__preview {
    display: grid;
    place-items: center;
    min-height: 120px;
    gap: 8px;
    position: relative;
    align-content: center;
    padding-top: 28px;
    border: 0;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(108, 154, 123, 0.22), transparent 38%),
        linear-gradient(145deg, rgba(22, 60, 82, 0.96), rgba(13, 26, 42, 0.98));
    cursor: pointer;
}

.case-attachment-card__title-badge {
    position: absolute;
    top: 10px;
    right: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case-attachment-card__preview.is-pdf {
    background:
        radial-gradient(circle at top right, rgba(220, 76, 70, 0.22), transparent 38%),
        linear-gradient(145deg, rgba(88, 18, 18, 0.98), rgba(44, 10, 10, 0.98));
}

.case-attachment-card__preview.is-document {
    background:
        radial-gradient(circle at top right, rgba(69, 138, 246, 0.2), transparent 38%),
        linear-gradient(145deg, rgba(18, 60, 116, 0.98), rgba(10, 33, 72, 0.98));
}

.case-attachment-card__preview.is-image {
    background:
        radial-gradient(circle at top right, rgba(108, 154, 123, 0.22), transparent 38%),
        linear-gradient(145deg, rgba(22, 92, 74, 0.98), rgba(10, 54, 43, 0.98));
}

.case-attachment-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    min-height: 68px;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border: 1px solid rgba(255,255,255,0.1);
}

.case-attachment-card__icon svg {
    width: 28px;
    height: 28px;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.case-attachment-card__icon.is-pdf {
    background: rgba(255, 255, 255, 0.08);
    color: #ffb3ae;
}

.case-attachment-card__icon.is-document {
    background: rgba(255, 255, 255, 0.08);
    color: #abd1ff;
}

.case-attachment-card__icon.is-image {
    background: rgba(255, 255, 255, 0.08);
    color: #b8f0ca;
}

.case-attachment-card__content {
    display: grid;
    gap: 10px;
}

.case-attachment-card > .case-attachment-card__content,
.case-attachment-card > .case-attachment-card__actions {
    display: none;
}

.case-attachment-card__details {
    display: grid;
    gap: 12px;
    position: absolute;
    top: calc(100% - 4px);
    right: 0;
    left: 0;
    z-index: 8;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 244, 238, 0.96));
    border: 1px solid rgba(42, 84, 61, 0.12);
    box-shadow: 0 22px 38px rgba(18, 32, 44, 0.14);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-14px);
    transition:
        max-height 0.82s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.52s ease,
        transform 0.82s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.82s ease;
    visibility: hidden;
}

.case-attachment-card.is-expanded .case-attachment-card__details {
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

.case-attachment-card.is-open-upward .case-attachment-card__details {
    top: auto;
    bottom: calc(100% - 4px);
    transform: translateY(14px);
}

.case-attachment-card.is-open-upward.is-expanded .case-attachment-card__details {
    transform: translateY(0);
}

.case-attachment-card.is-expanded .case-attachment-card__preview {
    box-shadow: 0 18px 30px rgba(18, 32, 44, 0.12);
}

.case-attachment-card.is-expanded {
    z-index: 9;
}

.case-attachment-card__content > span {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.case-attachment-card__line {
    display: grid;
    gap: 3px;
}

.case-attachment-card__line strong {
    margin: 0;
    color: var(--secondary);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.case-attachment-card__line p {
    margin: 0;
    color: var(--secondary-dark);
    font-size: 0.88rem;
    line-height: 1.7;
    word-break: break-word;
}

.case-attachment-card__actions {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

.case-attachment-card__actions form {
    flex: 0 0 auto;
    margin: 0;
}

.case-attachment-card__actions .button,
.case-attachment-card__actions form .button {
    width: auto;
    flex: 0 0 auto;
}

.case-attachment-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(15, 40, 60, 0.08);
}

.case-attachment-action svg {
    width: 20px;
    height: 20px;
}

.case-attachment-card__actions .button.ghost {
    border-color: rgba(42, 84, 61, 0.14);
    background: rgba(42, 84, 61, 0.08);
    color: var(--secondary-dark);
}

.case-attachment-card__actions .button.ghost:hover {
    border-color: rgba(47, 107, 79, 0.26);
    background: rgba(42, 84, 61, 0.14);
    color: var(--secondary-dark);
    box-shadow: 0 14px 24px rgba(33, 84, 63, 0.12);
}

.case-attachment-action--danger {
    border-color: rgba(153, 45, 45, 0.12);
    background: rgba(153, 45, 45, 0.08);
    color: var(--danger);
}

.case-attachment-action--danger:hover {
    border-color: rgba(153, 45, 45, 0.24);
    background: rgba(153, 45, 45, 0.14);
    color: var(--danger);
    box-shadow: 0 14px 24px rgba(153, 45, 45, 0.14);
}

.attachment-upload-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--line);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.attachment-upload-field__input {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: none;
}

.attachment-upload-field:focus-within {
    border-color: rgba(47, 107, 79, 0.4);
    box-shadow: 0 0 0 4px rgba(47, 107, 79, 0.08);
    background: #fff;
}

.attachment-upload-field__input::file-selector-button {
    margin-left: 12px;
    padding: 9px 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    box-shadow: 0 10px 20px rgba(18, 60, 82, 0.18);
}

.attachment-upload-field__input:hover::file-selector-button {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(18, 60, 82, 0.24);
}

.attachment-upload-field__input:focus {
    box-shadow: none;
}

.attachment-upload-grid {
    grid-template-columns: minmax(220px, 0.82fr) minmax(300px, 1.18fr);
    align-items: start;
}

.attachment-upload-grid__title input {
    min-height: 48px;
}

.attachment-upload-grid__file .form-help {
    display: block;
    margin-top: 8px;
}

.attachment-section-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(42, 84, 61, 0.12);
}

.form-help {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.7;
}

.attachment-delete-modal__badge {
    background: rgba(153, 45, 45, 0.12);
    color: var(--danger);
}

.attachment-delete-modal {
    width: min(100%, 520px);
}

.attachment-delete-modal__card {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding: 20px 22px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(153, 45, 45, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(250, 244, 238, 0.96), rgba(255, 255, 255, 0.88));
    border: 1px solid rgba(153, 45, 45, 0.12);
    box-shadow: 0 16px 28px rgba(25, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.attachment-delete-modal__label {
    color: var(--muted-soft);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.attachment-delete-modal__card strong {
    color: var(--secondary-dark);
    font-size: 1.08rem;
    line-height: 1.6;
    word-break: break-word;
}

.attachment-delete-modal__warning {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(153, 45, 45, 0.08);
    border: 1px solid rgba(153, 45, 45, 0.12);
}

.attachment-delete-modal__warning strong {
    color: var(--danger);
    font-size: 0.84rem;
}

.attachment-delete-modal__warning span {
    color: var(--secondary-dark);
    font-size: 0.9rem;
    line-height: 1.8;
}

.attachment-delete-modal__actions {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(42, 84, 61, 0.1);
    justify-content: flex-end;
}

.attachment-delete-modal__actions .button {
    min-width: 132px;
}

.attachment-preview-modal {
    width: min(100%, 860px);
}

.attachment-preview-modal__viewer {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.attachment-preview-modal__viewer img,
.attachment-preview-modal__viewer iframe {
    width: 100%;
    border: 0;
    border-radius: 20px;
    background: rgba(15, 24, 33, 0.04);
}

.attachment-preview-modal__viewer img {
    max-height: 70vh;
    object-fit: contain;
}

.attachment-preview-modal__viewer iframe {
    min-height: 70vh;
}

.attachment-preview-modal__fallback {
    padding: 22px;
    border-radius: 20px;
    background: rgba(255,255,255,0.74);
    border: 1px dashed rgba(42, 84, 61, 0.18);
    text-align: center;
}

.attachment-preview-modal__fallback strong,
.attachment-preview-modal__fallback p {
    margin: 0;
}

.attachment-preview-modal__fallback p {
    margin-top: 8px;
    color: var(--muted);
}

.topbar-admin-item.is-active {
    border-color: rgba(47, 107, 79, 0.24);
}

.topbar-admin-item.is-inactive {
    background: rgba(248, 248, 248, 0.85);
    border-color: rgba(153, 45, 45, 0.12);
}

.topbar-admin-item__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.topbar-admin-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(47, 107, 79, 0.12);
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 800;
}

.topbar-admin-item.is-inactive .topbar-admin-item__badge {
    background: rgba(153, 45, 45, 0.1);
    color: var(--danger);
}

.topbar-admin-item__id {
    color: var(--muted-soft);
    font-size: 0.76rem;
    font-weight: 700;
}

.topbar-admin-item__form {
    display: grid;
    gap: 10px;
}

.topbar-admin-item__form .form-group {
    gap: 6px;
}

.topbar-admin-item__form label {
    font-size: 0.78rem;
}

.topbar-admin-item__form input,
.topbar-admin-item__form select {
    padding: 10px 12px;
    font-size: 0.88rem;
    border-radius: 12px;
}

.topbar-admin-item__edit-row {
    display: grid;
    grid-template-columns: 110px auto;
    gap: 10px;
    align-items: end;
}

.topbar-admin-item__actions,
.topbar-admin-item__secondary-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.topbar-admin-item__actions .button,
.topbar-admin-item__secondary-actions .button {
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 0.82rem;
}

.topbar-admin-item__secondary-actions form {
    flex: 1 1 auto;
}

.topbar-admin-item__secondary-actions .button {
    width: 100%;
}

.client-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.client-filters {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.case-search-panel {
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(210, 182, 120, 0.1), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.9), rgba(246, 249, 247, 0.94));
    border: 1px solid rgba(42, 84, 61, 0.1);
}

.client-filters__grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.case-search-panel__footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding-top: 4px;
    border-top: 1px solid rgba(42, 84, 61, 0.08);
}

.case-search-panel__actions {
    margin: 0;
}

.case-search-panel__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.case-search-panel__results {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(47, 107, 79, 0.08);
    color: var(--primary-dark);
    font-size: 0.8rem;
    font-weight: 800;
}

.case-search-panel__focus-note {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(22, 60, 82, 0.06);
    color: var(--secondary-dark);
    font-size: 0.78rem;
    font-weight: 700;
}

.case-search-panel__show-all,
.case-search-panel__show-all:visited,
.case-search-panel__show-all:active {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border-color: #b54b4b;
    background: #b54b4b;
    color: #fff !important;
}

.case-search-panel__show-all:hover,
.case-search-panel__show-all:focus {
    border-color: #9f3b3b;
    background: #9f3b3b;
    color: #fff !important;
}

.client-case-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.client-linked-cases .case-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.client-linked-cases .case-mini-card {
    position: relative;
    display: grid;
    gap: 14px;
    min-height: 100%;
    padding: 22px 20px 18px;
    border-radius: 26px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246, 250, 247, 0.92)),
        linear-gradient(135deg, rgba(47, 107, 79, 0.07), transparent 52%);
    border: 1px solid rgba(42, 84, 61, 0.12);
    box-shadow: 0 20px 42px rgba(17, 33, 27, 0.08);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.client-linked-cases .case-mini-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, rgba(201, 168, 99, 0.92), rgba(56, 108, 80, 0.72));
}

.client-linked-cases .case-mini-card::after {
    content: '';
    position: absolute;
    width: 170px;
    height: 170px;
    top: -72px;
    left: -56px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 107, 79, 0.12), transparent 72%);
    pointer-events: none;
}

.client-linked-cases .case-mini-card:hover {
    transform: translateY(-5px);
    border-color: rgba(47, 107, 79, 0.24);
    box-shadow: 0 24px 48px rgba(17, 33, 27, 0.12);
}

.client-linked-cases .case-mini-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.client-linked-cases .case-mini-card__number {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(23, 60, 49, 0.06);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 800;
}

.client-linked-cases .case-mini-card strong {
    display: block;
    color: var(--secondary-dark);
    font-size: 1.08rem;
    line-height: 1.6;
}

.client-linked-cases .case-mini-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
}

.client-linked-cases .case-mini-card__detail {
    display: block;
    padding: 11px 14px;
    border-radius: 16px;
    background: rgba(42, 84, 61, 0.045);
    color: var(--muted);
    line-height: 1.7;
}

.client-linked-cases .case-mini-card__detail strong {
    display: inline;
    margin-left: 6px;
    color: var(--secondary);
    font-size: 0.92rem;
}

.client-linked-cases .case-mini-card .badge {
    box-shadow: none;
}

.client-linked-cases .case-mini-card__footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.client-linked-cases .case-mini-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-dark);
    font-weight: 800;
}

.client-linked-cases .case-mini-card__link::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d2b16d, #2f6b4f);
    box-shadow: 0 0 0 6px rgba(47, 107, 79, 0.08);
}

.client-case-card {
    display: block;
    position: relative;
    min-height: 272px;
    padding: 14px 14px 12px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fffdfa 0%, #f6f1e7 100%);
    border: 1px solid rgba(148, 112, 26, 0.1);
    box-shadow: 0 18px 34px rgba(30, 34, 40, 0.08);
    text-decoration: none;
    transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

.client-case-card:hover,
.client-case-card.is-active {
    transform: translateY(-6px);
    filter: saturate(1.02);
    box-shadow: 0 24px 40px rgba(30, 34, 40, 0.11);
}

.client-case-card.is-active {
    border-color: rgba(132, 170, 108, 0.24);
    background: linear-gradient(180deg, #fcfef9 0%, #f0f7e9 100%);
}

.client-case-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(132, 170, 108, 0.18);
    border: 1px solid rgba(132, 170, 108, 0.24);
    color: #5f8a4a;
    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1;
}

.client-case-card__info {
    position: absolute;
    top: 50%;
    right: 50%;
    left: auto;
    z-index: 2;
    display: grid;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    width: min(100% - 56px, 230px);
    transform: translate(61%, -34%);
}

.client-case-card__info strong {
    color: #5a3e0e;
    font-size: 0.84rem;
    line-height: 1.45;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(133, 97, 24, 0.16);
    text-shadow: 0 1px 0 rgba(255, 248, 222, 0.3);
}

.client-case-card__meta-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    position: relative;
    gap: 14px;
    width: min(100%, 230px);
    min-height: 72px;
    margin: 2px auto 0;
    padding: 11px 13px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 247, 214, 0.82), rgba(247, 228, 160, 0.72));
    border: 1px solid rgba(171, 127, 29, 0.18);
    box-shadow:
        0 12px 20px rgba(130, 95, 20, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.client-case-card__meta-card::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    right: 50%;
    width: 1px;
    background: rgba(157, 117, 32, 0.2);
    transform: translateX(50%);
}

.client-case-card__detail {
    display: grid;
    gap: 1px;
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 12px;
    background: transparent;
    color: #6a5730;
    font-size: 0.69rem;
    line-height: 1.35;
    text-align: center;
}

.client-case-card__detail + .client-case-card__detail {
    padding-top: 8px;
    border-top: 0;
    box-shadow: none;
    border-right: 0;
}

.client-case-card__meta-card .client-case-card__detail:first-child {
    text-align: right;
}

.client-case-card__meta-card .client-case-card__detail:last-child {
    text-align: left;
}

.client-case-card__folder {
    display: block;
    position: relative;
    width: 100%;
    min-height: 242px;
    padding-top: 0;
    color: #edc94a;
}

.client-case-card__folder svg {
    display: block;
    width: 118%;
    height: auto;
    margin: 0 -9% 0;
    transform: none;
    transform-origin: center bottom;
    filter: drop-shadow(0 18px 22px rgba(122, 86, 17, 0.18));
}

.client-case-card.is-active .client-case-card__folder {
    color: #c9dda1;
}

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

.contract-workspace__head {
    align-items: end;
}

.contract-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
    border: 1px solid rgba(42, 84, 61, 0.12);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.contract-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 32px rgba(22, 33, 27, 0.1);
}

.contract-card--draft {
    border-color: rgba(98, 106, 118, 0.2);
    background: linear-gradient(180deg, rgba(246,247,248,0.98), rgba(234,237,240,0.96));
}

.contract-card.is-editing {
    border-color: rgba(47, 107, 79, 0.22);
    box-shadow: 0 18px 34px rgba(18, 32, 44, 0.1);
}

.contract-card__summary {
    display: grid;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(42, 84, 61, 0.08);
}

.contract-card__summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.contract-card__status,
.contract-card__duration,
.contract-card__amount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.contract-card__duration {
    background: rgba(47, 107, 79, 0.1);
    color: var(--primary-dark);
}

.contract-card__amount {
    background: rgba(22, 60, 82, 0.08);
    color: var(--secondary-dark);
}

.contract-card__summary strong {
    color: var(--secondary-dark);
    font-size: 1.04rem;
    line-height: 1.5;
}

.contract-card__summary p {
    margin: 0;
    color: var(--primary-dark);
    font-size: 0.9rem;
    font-weight: 700;
}

.contract-card__detail {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.7;
}

.contract-card__detail strong {
    color: var(--secondary);
}

.contract-card__preview {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.9;
    padding-top: 6px;
    border-top: 1px dashed rgba(22, 60, 82, 0.12);
}

.contract-card__toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.contract-card__upload {
    margin: 0;
}

.contract-upload-button {
    cursor: pointer;
    border: 1px solid rgba(176, 126, 40, 0.24) !important;
    border-color: rgba(176, 126, 40, 0.24);
    background: rgba(176, 126, 40, 0.14) !important;
    color: #9d7520 !important;
    animation: contractUploadPulse 2.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.contract-upload-button:hover {
    border-color: rgba(176, 126, 40, 0.34) !important;
    background: rgba(176, 126, 40, 0.2) !important;
    color: #855f12 !important;
}

@keyframes contractUploadPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(176, 126, 40, 0.12);
        transform: translateY(0);
        filter: saturate(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(176, 126, 40, 0.12);
        transform: translateY(-1px);
        filter: saturate(1.08);
    }
}

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

.contract-form-grid--editor {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contract-card__actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.contract-card__delete {
    margin: 0;
}

.contract-card__delete .button {
    width: auto;
}

.contract-icon-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 14px;
}

.contract-icon-button svg {
    width: 18px;
    height: 18px;
}

.contract-card__toolbar .contract-icon-button--edit {
    border-color: rgba(45, 122, 88, 0.14);
    background: rgba(45, 122, 88, 0.14);
    color: var(--success);
}

.contract-card__toolbar .contract-icon-button--edit:hover {
    border-color: rgba(45, 122, 88, 0.24);
    background: rgba(45, 122, 88, 0.22);
    color: var(--success);
}

.contract-card__toolbar .contract-icon-button--print {
    border-color: rgba(22, 60, 82, 0.14);
    background: rgba(22, 60, 82, 0.1);
    color: var(--secondary);
}

.contract-card__toolbar .contract-icon-button--print:hover {
    border-color: rgba(22, 60, 82, 0.24);
    background: rgba(22, 60, 82, 0.16);
    color: var(--secondary-dark);
}

.contract-card__toolbar .contract-icon-button--view {
    border-color: rgba(58, 112, 196, 0.16);
    background: rgba(58, 112, 196, 0.1);
    color: #3a70c4;
}

.contract-card__toolbar .contract-icon-button--view:hover {
    border-color: rgba(58, 112, 196, 0.28);
    background: rgba(58, 112, 196, 0.16);
    color: #285aa8;
}

.contract-editor-modal__dialog {
    width: calc(100vw - 96px);
    max-width: none;
    min-width: calc(100vw - 96px);
    height: calc(100vh - 8px);
    max-height: calc(100vh - 8px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 0;
}

#contractEditorModal {
    padding: 0;
    overflow: hidden;
}

#contractEditorModal .event-modal__dialog {
    margin-inline: auto;
}

.contract-editor-modal__dialog::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.contract-editor-form {
    display: grid;
    gap: 18px;
}

.contract-editor {
    display: grid;
    gap: 12px;
}

.contract-editor__topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.contract-editor__topbar-copy {
    display: grid;
    gap: 4px;
}

.contract-editor__topbar-copy strong {
    color: var(--secondary-dark);
}

.contract-editor__topbar-copy span {
    color: var(--muted);
    font-size: 0.84rem;
}

.contract-editor__topbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.contract-editor__template-status {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 600;
}

.contract-editor__template-status.success {
    color: #17603c;
    background: rgba(46, 125, 84, 0.12);
}

.contract-editor__template-status.warning {
    color: #8a4b12;
    background: rgba(210, 132, 41, 0.14);
}

.contract-editor__toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 243, 0.98));
    border: 1px solid rgba(22, 60, 82, 0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.contract-toolbar-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.contract-font-size-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(22, 60, 82, 0.14);
    background: linear-gradient(180deg, #ffffff, #f6f8f7);
    color: var(--secondary-dark);
    font-weight: 700;
}

.contract-font-size-control span {
    font-size: 0.82rem;
    white-space: nowrap;
}

.contract-font-size-control select {
    min-width: 70px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 800;
    text-align: center;
    outline: none;
    cursor: pointer;
}

.contract-toolbar-divider {
    width: 1px;
    align-self: stretch;
    min-height: 38px;
    background: linear-gradient(180deg, rgba(22, 60, 82, 0.05), rgba(22, 60, 82, 0.18), rgba(22, 60, 82, 0.05));
}

.contract-format-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(22, 60, 82, 0.14);
    background: linear-gradient(180deg, #ffffff, #f6f8f7);
    color: var(--secondary-dark);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.contract-format-button svg {
    width: 20px;
    height: 20px;
    display: block;
    margin: auto;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.contract-format-button circle {
    fill: currentColor;
    stroke: none;
}

.contract-format-button:hover {
    background: linear-gradient(180deg, rgba(47, 107, 79, 0.08), rgba(47, 107, 79, 0.14));
    border-color: rgba(47, 107, 79, 0.24);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.contract-format-button.is-active {
    background: linear-gradient(135deg, rgba(47, 107, 79, 0.18), rgba(31, 77, 56, 0.24));
    border-color: rgba(31, 77, 56, 0.3);
    color: var(--primary-dark);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 20px rgba(31, 77, 56, 0.12);
}

.contract-table-builder {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 8;
    display: grid;
    gap: 10px;
    min-width: 220px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(22, 60, 82, 0.12);
    box-shadow: 0 18px 34px rgba(18, 32, 44, 0.16);
}

.contract-table-builder[hidden] {
    display: none !important;
}

.contract-table-builder strong {
    color: var(--secondary-dark);
    font-size: 0.95rem;
}

.contract-table-builder label {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.contract-table-builder input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(22, 60, 82, 0.14);
    background: #fff;
    color: var(--secondary-dark);
    font: inherit;
    outline: none;
}

.contract-table-builder__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.contract-editor__paper-wrap {
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(236, 240, 237, 0.95), rgba(245, 247, 245, 0.98));
}

.contract-editor__paper {
    min-height: 620px;
    padding: 34px 38px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(22, 60, 82, 0.12);
    box-shadow: 0 18px 30px rgba(22, 33, 27, 0.08);
    line-height: 2;
    color: #1f242e;
    font-size: 16px;
    direction: rtl;
    text-align: right;
    outline: none;
}

.contract-editor__paper h2,
.contract-editor__paper h3,
.contract-editor__paper p,
.contract-editor__paper ul,
.contract-editor__paper ol,
.contract-editor__paper table {
    margin: 0 0 14px;
}

.contract-editor__paper ul,
.contract-editor__paper ol {
    padding-right: 22px;
}

.contract-editor__paper table {
    width: 100%;
    border-collapse: collapse;
}

.contract-editor__paper td,
.contract-editor__paper th {
    border: 1px solid rgba(22, 60, 82, 0.16);
    padding: 10px;
    vertical-align: top;
}

.contract-editor__actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.contract-print-modal__dialog {
    width: min(1100px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.contract-signed-view-frame {
    width: 100%;
    display: block;
    height: min(46vh, 460px);
    min-height: 300px;
    max-height: 460px;
    border: 1px solid rgba(22, 60, 82, 0.12);
    border-radius: 20px;
    background: #fff;
    margin: 0;
    overflow: hidden;
}

.contract-print-modal__dialog::-webkit-scrollbar {
    width: 0;
    height: 0;
}

#contractPrintModal.is-signed-view .event-modal__badge,
#contractPrintModal.is-signed-view .event-modal__eyebrow,
#contractPrintModal.is-signed-view .event-modal__dialog h3,
#contractPrintModal.is-signed-view .event-modal__meta,
#contractPrintModal.is-signed-view .event-modal__notes {
    display: none;
}

#contractPrintModal.is-signed-view .contract-print-modal__dialog {
    width: min(1100px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    padding: 24px;
    overflow: hidden;
}

#contractPrintModal.is-signed-view .event-modal__close {
    top: 10px;
    left: 10px;
    z-index: 2;
}

#contractPrintModal.is-signed-view .event-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.client-case-card__detail strong {
    display: block;
    font-size: 0.53rem;
    color: #9d7520;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.client-case-card__detail em {
    font-style: normal;
    color: #573f10;
    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1.45;
}

.session-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.session-case-card__footer .button.ghost {
    border-color: rgba(42, 84, 61, 0.16);
    background: rgba(42, 84, 61, 0.08);
    color: var(--secondary-dark);
}

.session-case-card__footer .button.ghost:hover {
    border-color: rgba(47, 107, 79, 0.28);
    background: rgba(42, 84, 61, 0.14);
    color: var(--secondary-dark);
}

.sessions-panel {
    gap: 18px;
}

.sessions-panel-head {
    align-items: flex-start;
    gap: 18px;
}

.sessions-panel-intro {
    display: grid;
    gap: 10px;
    max-width: 720px;
}

.sessions-panel-intro .section-title {
    margin-bottom: 0;
}

.sessions-panel-intro .table-meta {
    margin: 0;
    line-height: 1.9;
}

.sessions-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.sessions-panel-actions--stacked {
    min-width: 0;
}

.session-filter-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    width: auto;
}

.session-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(42, 84, 61, 0.1);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245, 241, 235, 0.94));
    color: var(--secondary-dark);
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 18px rgba(18, 32, 44, 0.05), inset 0 1px 0 rgba(255,255,255,0.72);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.session-filter-chip span {
    color: var(--muted);
    line-height: 1;
}

.session-filter-chip strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(42, 84, 61, 0.08);
    color: var(--secondary);
    font-size: 0.8rem;
    line-height: 1;
}

.session-filter-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(47, 107, 79, 0.26);
    box-shadow: 0 14px 24px rgba(15, 40, 60, 0.08);
}

.session-filter-chip.is-active {
    background:
        radial-gradient(circle at top right, rgba(108, 154, 123, 0.22), transparent 34%),
        linear-gradient(180deg, rgba(236, 246, 240, 0.98), rgba(220, 237, 226, 0.96));
    border-color: rgba(47, 107, 79, 0.34);
    box-shadow: 0 22px 38px rgba(47, 107, 79, 0.14);
}

.session-filter-chip.is-active span {
    color: var(--secondary-dark);
}

.sessions-panel-cta {
    display: flex;
    justify-content: flex-start;
    width: auto;
    padding-top: 0;
    flex-shrink: 0;
}

.session-case-card {
    display: grid;
    gap: 10px;
    padding: 15px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(195, 160, 75, 0.09), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.8));
    border: 1px solid rgba(42, 84, 61, 0.12);
    box-shadow: var(--shadow-soft);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.session-case-card.is-today {
    border-color: rgba(195, 160, 75, 0.34);
    box-shadow: 0 20px 38px rgba(169, 131, 39, 0.12);
}

.session-case-card:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 107, 79, 0.28);
    box-shadow: 0 18px 34px rgba(18, 32, 44, 0.1);
}

.session-case-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.session-case-card__number {
    color: var(--secondary-dark);
    font-size: 0.78rem;
    font-weight: 800;
}

.session-case-card__title-block {
    display: grid;
    gap: 3px;
}

.session-case-card strong {
    color: var(--secondary-dark);
    font-size: 0.96rem;
    line-height: 1.45;
}

.session-case-card__title-block p {
    margin: 0;
    color: var(--primary-dark);
    line-height: 1.45;
    font-size: 0.82rem;
    font-weight: 700;
}

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

.session-case-card__detail {
    display: grid;
    gap: 3px;
    padding: 10px 11px;
    border-radius: 14px;
    background: rgba(245, 241, 232, 0.72);
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.session-case-card__detail strong {
    display: block;
    font-size: 0.69rem;
    color: var(--secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.session-case-card__detail em {
    font-style: normal;
    color: var(--secondary-dark);
    font-size: 0.81rem;
    font-weight: 700;
}

.session-case-card__notes {
    display: grid;
    gap: 4px;
    padding-top: 2px;
    border-top: 1px solid rgba(42, 84, 61, 0.08);
}

.session-case-card__notes strong {
    font-size: 0.74rem;
    color: var(--secondary);
}

.session-case-card__notes p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
    font-size: 0.79rem;
}

.session-case-card__footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.button--small {
    min-height: auto;
    padding: 9px 14px;
    font-size: 0.82rem;
}

.clients-layout {
    gap: 18px;
}

.clients-layout .panel-card {
    width: 100%;
}

.client-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 250px));
    gap: 16px;
    justify-content: start;
    align-items: start;
}

.client-mini-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    width: 250px;
    min-height: 138px;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(42, 84, 61, 0.14);
    box-shadow: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    text-align: right;
}

.client-mini-card:hover {
    transform: translateY(-2px);
    border-color: rgba(47, 107, 79, 0.22);
    background: #fcfdfc;
}

.client-mini-card.is-active {
    border-color: rgba(47, 107, 79, 0.28);
    background: #f6faf7;
}

.client-mini-card__content {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.client-mini-card__eyebrow {
    color: var(--muted-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.client-mini-card__content strong {
    color: var(--secondary-dark);
    font-size: 0.98rem;
    line-height: 1.5;
    min-height: 3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.client-mini-card__meta-row {
    display: grid;
    gap: 6px;
}

.client-mini-card__type {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 8px;
    background: #f1f6f2;
    border: 1px solid rgba(42, 84, 61, 0.08);
    color: var(--primary-dark);
    font-size: 0.74rem;
    font-weight: 800;
}

.contract-card__status.is-draft {
    color: #5f6470;
    background: rgba(95, 100, 112, 0.12);
}

.contract-card__status.is-final {
    color: #2d7a58;
    background: rgba(45, 122, 88, 0.14);
}

.contract-card__status.is-pending {
    color: #9d7520;
    background: rgba(176, 126, 40, 0.14);
}

.client-mini-card__meta {
    color: var(--muted);
    font-size: 0.82rem;
    min-height: 1.3em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-mini-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(42, 84, 61, 0.08);
}

.client-mini-card__chip {
    padding: 5px 8px;
    border-radius: 8px;
    background: #f5f7f5;
    color: var(--secondary-dark);
    font-size: 0.74rem;
    font-weight: 800;
}

.client-mini-card__hint {
    color: var(--muted-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

#clientCaseModal {
    padding: 0 !important;
    place-items: stretch !important;
    overflow: hidden;
}

#clientCaseModal .client-case-modal {
    position: fixed;
    inset: 0;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.985), rgba(248, 251, 248, 0.975)),
        linear-gradient(135deg, rgba(159, 194, 169, 0.1), transparent 42%);
}

.client-case-modal__banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 16px 32px;
    background: linear-gradient(135deg, rgba(18, 55, 40, 0.98), rgba(33, 79, 57, 0.96));
    color: rgba(255,255,255,0.94);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

#clientCaseModal .client-case-modal__close {
    position: static;
    justify-self: end;
    width: auto;
    min-width: 78px;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #b12727;
    background: #d22d2d;
    color: #fff;
    font: inherit;
    font-size: 0.74rem;
    line-height: 1;
    font-weight: 800;
    box-shadow: none;
    z-index: 3;
    cursor: pointer;
}

.client-case-modal__header {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    margin: 0 32px 22px;
    padding: 26px 0 20px;
    border-bottom: 2px solid rgba(42, 84, 61, 0.1);
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(248, 251, 248, 0.96));
}

#clientCaseModal .client-case-modal__header > .client-case-modal__close {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    margin-bottom: 0;
}

.client-case-modal__seal {
    grid-column: 1;
    grid-row: 1;
    width: 86px;
    height: 86px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow: 0 18px 34px rgba(16, 42, 34, 0.18);
}

.client-case-modal__copy {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    gap: 4px;
    padding-top: 2px;
}

.client-case-sheet {
    padding: 0 32px 32px;
    display: grid;
    gap: 20px;
}

.client-case-sheet__section-head {
    display: grid;
    gap: 5px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(42, 84, 61, 0.1);
}

.client-case-sheet__section-head strong {
    color: var(--secondary-dark);
    font-size: 1rem;
    font-weight: 900;
}

.client-case-sheet__section-head span {
    color: var(--muted-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.client-case-sheet__section-head--compact {
    gap: 4px;
    padding-bottom: 0;
    border-bottom: 0;
}

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

.client-case-sheet__item,
.client-case-sheet__notes,
.client-case-record {
    padding: 20px 22px;
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(42, 84, 61, 0.14);
    box-shadow: 0 14px 28px rgba(14, 23, 34, 0.06);
}

.client-case-sheet__item span,
.client-case-sheet__notes span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted-soft);
    font-size: 0.8rem;
    font-weight: 800;
}

.client-case-sheet__item strong {
    color: var(--secondary-dark);
    line-height: 1.7;
    font-size: 0.97rem;
}

.client-case-sheet__notes p {
    margin: 0;
    color: var(--text);
    line-height: 1.9;
}

.client-case-records {
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 22px;
    background: rgba(241, 246, 242, 0.76);
    border: 1px solid rgba(42, 84, 61, 0.12);
}

.client-case-records__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
}

.client-case-records__head span {
    color: var(--primary-dark);
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
}

.client-case-records__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-inline-end: 6px;
}

.client-case-record {
    height: 100%;
}

.client-case-record__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(42, 84, 61, 0.1);
}

.client-case-record__heading {
    display: grid;
    gap: 8px;
}

.client-case-record__serial {
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(16, 42, 34, 0.08);
    color: var(--secondary-dark);
    font-size: 0.74rem;
    font-weight: 800;
}

.client-case-record__head strong {
    color: var(--secondary-dark);
    font-size: 1rem;
    line-height: 1.6;
}

.client-case-record__head span {
    color: var(--primary-dark);
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
}

.client-case-record__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.client-case-record__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(47, 107, 79, 0.06);
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 700;
}

.client-case-record--empty {
    text-align: center;
    color: var(--muted);
    line-height: 1.8;
}

@media (max-width: 980px) {
    #clientCaseModal .client-case-modal {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .client-case-modal__banner,
    .client-case-modal__header,
    .client-case-sheet {
        padding-inline: 20px;
    }

    .client-case-modal__header {
        margin-inline: 0;
    }

    .client-case-sheet {
        padding-bottom: 24px;
    }

    .client-case-sheet__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-case-records__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .client-case-records__body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .client-case-modal__banner {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .client-case-modal__header {
        grid-template-columns: 1fr;
    }

    #clientCaseModal .client-case-modal__close {
        justify-self: stretch;
        grid-column: 1;
        grid-row: auto;
    }

    .client-case-modal__seal,
    .client-case-modal__copy {
        grid-column: 1;
        grid-row: auto;
    }

    .client-case-sheet__grid {
        grid-template-columns: 1fr;
    }
}

.toggle-panel {
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.toggle-panel.is-open {
    animation: panelReveal 0.28s ease;
}

@keyframes panelReveal {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.badge {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge.progress { background: rgba(47, 107, 79, 0.12); color: var(--primary-dark); }
.badge.active { background: rgba(34, 101, 77, 0.12); color: var(--success); }
.badge.pending { background: rgba(139, 93, 16, 0.12); color: var(--warning); }
.badge.success { background: rgba(34, 101, 77, 0.12); color: var(--success); }
.badge.warning { background: rgba(139, 93, 16, 0.12); color: var(--warning); }
.badge.danger { background: rgba(153, 45, 45, 0.12); color: var(--danger); }
.badge.cancelled { background: rgba(108, 108, 108, 0.18); color: #5f5f5f; }

.alert {
    padding: 16px 18px;
    margin-bottom: 18px;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.alert.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
}

.alert.success { background: rgba(34, 101, 77, 0.12); color: var(--success); border-color: rgba(34, 101, 77, 0.18); }
.alert.warning { background: rgba(139, 93, 16, 0.12); color: var(--warning); border-color: rgba(139, 93, 16, 0.18); }

.logout-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

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

.logout-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 19, 31, 0.56);
    backdrop-filter: blur(8px);
}

.logout-modal__dialog {
    position: relative;
    width: min(100%, 440px);
    padding: 28px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(108, 154, 123, 0.18), transparent 36%),
        linear-gradient(145deg, rgba(22, 60, 82, 0.96), rgba(13, 26, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 90px rgba(6, 14, 24, 0.34);
    color: #fff;
    text-align: center;
}

.logout-modal__badge {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(95, 143, 107, 0.95), rgba(47, 107, 79, 0.95));
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 14px 28px rgba(47, 107, 79, 0.2);
    margin-inline: auto;
}

.logout-modal__eyebrow {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
    font-weight: 700;
}

.logout-modal__dialog h3 {
    margin: 0 0 10px;
    color: #fff;
}

.logout-modal__dialog > p:last-of-type {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

.logout-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
}

.stack, .calendar-list, .mini-list { display: grid; gap: 18px; }

.hero-card {
    padding: 28px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(22, 60, 82, 0.92), rgba(13, 26, 42, 0.95));
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-card::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(108, 154, 123, 0.26), transparent 68%);
    left: -40px;
    bottom: -100px;
}

.hero-card p { color: rgba(255,255,255,0.75); max-width: 620px; }
.empty-state {
    padding: 34px 28px;
    text-align: center;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.42));
    border: 1px dashed rgba(42, 84, 61, 0.22);
    color: var(--muted);
    line-height: 1.8;
}

.mini-item {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.mini-item strong {
    display: block;
    margin-bottom: 6px;
    color: var(--secondary-dark);
}

.mini-item p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.calendar-app--full {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.calendar-stats-grid {
    margin-bottom: 18px;
}

.calendar-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.calendar-panel,
.calendar-side-panel {
    padding: 20px;
}

.calendar-panel {
    width: 100%;
}

.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 16px;
}

.calendar-toolbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.calendar-toolbar-actions .button {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid rgba(47, 107, 79, 0.18);
    background: rgba(238, 244, 239, 1);
    color: var(--secondary-dark);
    font-weight: 800;
    box-shadow: none;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.calendar-toolbar-actions .button:hover {
    transform: translateY(-2px);
    border-color: rgba(47, 107, 79, 0.3);
    background: rgba(230, 239, 231, 0.96);
}

.calendar-toolbar-actions .button.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 10px 18px rgba(47, 107, 79, 0.18);
}

.calendar-toolbar-actions .button.is-active:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.calendar-nav-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.calendar-nav-arrow {
    min-width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: currentColor;
    font-size: 0.9rem;
    line-height: 1;
    transition: transform 0.22s ease, color 0.22s ease;
}

.calendar-toolbar-actions .button:hover .calendar-nav-arrow {
    transform: translateX(1px);
}

.calendar-toolbar-actions .button.is-active .calendar-nav-arrow {
    color: #fff;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.calendar-weekdays div {
    padding: 10px 8px;
    text-align: center;
    border-radius: 14px;
    background: rgba(22, 60, 82, 0.08);
    color: var(--secondary-dark);
    font-weight: 800;
    font-size: 0.92rem;
}

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

.calendar-day {
    min-height: 154px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(42, 84, 61, 0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.calendar-day:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(18, 32, 44, 0.08), inset 0 1px 0 rgba(255,255,255,0.58);
}

.calendar-day.is-drop-target {
    border-color: rgba(47, 107, 79, 0.42);
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(232, 243, 236, 0.96));
    box-shadow: 0 0 0 4px rgba(47, 107, 79, 0.12), 0 18px 30px rgba(23, 60, 49, 0.08);
}

.calendar-day.is-muted {
    opacity: 0.58;
    background: rgba(255,255,255,0.5);
}

.calendar-day.is-today {
    border-color: rgba(58, 128, 95, 0.34);
    background: linear-gradient(180deg, rgba(241, 250, 244, 0.98), rgba(225, 242, 232, 0.96));
    box-shadow: 0 16px 30px rgba(58, 128, 95, 0.1), inset 0 1px 0 rgba(255,255,255,0.74);
}

.calendar-day.has-events {
    animation: calendarPulse 4.8s ease-in-out infinite;
    border-color: rgba(47, 107, 79, 0.24);
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(238, 244, 239, 0.96));
}

.calendar-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.calendar-day-numbers {
    display: grid;
    gap: 2px;
}

.calendar-day-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.calendar-day-numbers strong {
    font-size: 1.18rem;
    color: var(--secondary-dark);
    line-height: 1;
}

.calendar-today-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(58, 128, 95, 0.12);
    color: #2f6f52;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
}

.calendar-hijri-day {
    color: var(--muted-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.calendar-day-count {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 107, 79, 0.12);
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 800;
}

.calendar-day-body {
    display: grid;
    align-content: start;
    gap: 8px;
}

.calendar-icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: start;
}

.calendar-event {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 12px;
    background: rgba(238, 244, 239, 0.9);
    border: 1px solid rgba(42, 84, 61, 0.1);
    text-align: right;
    font: inherit;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.calendar-event:hover {
    transform: translateY(-2px);
    border-color: rgba(47, 107, 79, 0.28);
    background: rgba(230, 239, 231, 0.96);
}

.calendar-event-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(255,255,255,0.4);
}

.calendar-event-mark svg,
.calendar-event-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.calendar-event-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.calendar-event.is-draggable {
    cursor: grab;
}

.calendar-event.is-session {
    background: rgba(191, 77, 77, 0.12);
    border-color: rgba(191, 77, 77, 0.16);
}

.calendar-event.is-session:hover {
    background: rgba(191, 77, 77, 0.18);
    border-color: rgba(191, 77, 77, 0.24);
}

.calendar-event.is-session p {
    color: #8f2d2d;
}

.calendar-event.is-session .calendar-event-mark {
    background: rgba(191, 77, 77, 0.12);
}

.calendar-event.is-appointment {
    background: rgba(58, 112, 196, 0.12);
    border-color: rgba(58, 112, 196, 0.16);
}

.calendar-event.is-appointment:hover {
    background: rgba(58, 112, 196, 0.18);
    border-color: rgba(58, 112, 196, 0.24);
}

.calendar-event.is-appointment p {
    color: #305d9d;
}

.calendar-event.is-appointment .calendar-event-mark {
    background: rgba(58, 112, 196, 0.12);
}

.calendar-event.is-team {
    background: rgba(176, 126, 40, 0.14);
    border-color: rgba(176, 126, 40, 0.18);
}

.calendar-event.is-team:hover {
    background: rgba(176, 126, 40, 0.2);
    border-color: rgba(176, 126, 40, 0.26);
}

.calendar-event.is-team p {
    color: #8a6420;
}

.calendar-event.is-team .calendar-event-mark {
    background: rgba(176, 126, 40, 0.12);
}

.calendar-event-icon {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(42, 84, 61, 0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.74);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-dark);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: grab;
    box-shadow: none;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.calendar-event-icon:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 107, 79, 0.24);
    background: rgba(230, 239, 231, 0.96);
}

.calendar-event-icon.is-session {
    background: rgba(191, 77, 77, 0.14);
    border-color: rgba(191, 77, 77, 0.2);
    color: #9b2f2f;
}

.calendar-event-icon.is-session:hover {
    background: rgba(191, 77, 77, 0.2);
    border-color: rgba(191, 77, 77, 0.28);
}

.calendar-event-icon.is-appointment {
    background: rgba(58, 112, 196, 0.14);
    border-color: rgba(58, 112, 196, 0.2);
    color: #315fa5;
}

.calendar-event-icon.is-appointment:hover {
    background: rgba(58, 112, 196, 0.2);
    border-color: rgba(58, 112, 196, 0.28);
}

.calendar-event-icon.is-team {
    background: rgba(176, 126, 40, 0.14);
    border-color: rgba(176, 126, 40, 0.2);
    color: #9a6d1f;
}

.calendar-event-icon.is-team:hover {
    background: rgba(176, 126, 40, 0.2);
    border-color: rgba(176, 126, 40, 0.28);
}

.calendar-event-icon:focus-visible {
    outline: 3px solid rgba(47, 107, 79, 0.18);
    outline-offset: 2px;
}

.calendar-event-icon.is-dragging {
    opacity: 0.55;
    transform: scale(0.96);
}

.calendar-icon-overflow {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 60, 82, 0.06);
    color: var(--secondary-dark);
    font-size: 0.72rem;
    font-weight: 800;
    border: 1px solid rgba(22, 60, 82, 0.08);
    cursor: pointer;
    font: inherit;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    animation: calendarOverflowPulse 2.6s ease-in-out infinite;
}

.calendar-icon-overflow:hover {
    transform: translateY(-1px);
    background: rgba(22, 60, 82, 0.1);
    border-color: rgba(22, 60, 82, 0.14);
}

.calendar-event.is-draggable:active {
    cursor: grabbing;
}

.calendar-event.is-dragging {
    opacity: 0.55;
    transform: scale(0.98);
}

.calendar-event:focus-visible {
    outline: 3px solid rgba(47, 107, 79, 0.2);
    outline-offset: 2px;
}

.event-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
}

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

.event-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 28, 0.58);
    backdrop-filter: blur(10px);
}

.event-modal__dialog {
    position: relative;
    width: min(680px, 100%);
    padding: 28px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(108, 154, 123, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246, 240, 233, 0.96));
    border: 1px solid rgba(42, 84, 61, 0.16);
    box-shadow: 0 34px 70px rgba(14, 23, 34, 0.28);
    z-index: 1;
}

.event-modal__dialog--list {
    width: min(620px, 100%);
}

.event-modal__close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 14px;
    background: rgba(22, 60, 82, 0.08);
    color: var(--secondary-dark);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.event-modal__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(95, 143, 107, 0.96), rgba(47, 107, 79, 0.94));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(47, 107, 79, 0.18);
}

.event-modal__eyebrow {
    margin: 18px 0 8px;
    color: var(--muted-soft);
    font-size: 0.9rem;
    font-weight: 700;
}

.event-modal__dialog h3 {
    margin: 0 0 10px;
    color: var(--secondary-dark);
    font-size: 1.7rem;
}

.event-modal__meta {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 0.96rem;
}

.event-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.event-modal__card,
.event-modal__notes {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(42, 84, 61, 0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

.event-modal__card span,
.event-modal__notes span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.event-modal__card strong {
    color: var(--secondary-dark);
    font-size: 1rem;
    line-height: 1.7;
}

.event-modal__notes p {
    margin: 0;
    color: var(--text);
    line-height: 1.9;
}

.calendar-overflow-list {
    display: grid;
    gap: 10px;
    max-height: min(55vh, 520px);
    overflow-y: auto;
    padding-left: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(47, 107, 79, 0.62) rgba(23, 60, 49, 0.08);
}

.calendar-overflow-list::-webkit-scrollbar {
    width: 8px;
}

.calendar-overflow-list::-webkit-scrollbar-track {
    background: rgba(22, 60, 82, 0.08);
    border-radius: 999px;
}

.calendar-overflow-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(95, 143, 107, 0.95), rgba(47, 107, 79, 0.92));
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.38);
}

.calendar-overflow-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(126, 166, 138, 0.98), rgba(47, 107, 79, 0.98));
}

.calendar-overflow-item {
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(42, 84, 61, 0.1);
    background: rgba(238, 244, 239, 0.84);
    text-align: right;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.calendar-overflow-item:hover {
    transform: translateY(-2px);
}

.calendar-overflow-item strong {
    color: var(--secondary-dark);
    font-size: 0.95rem;
}

.calendar-overflow-item span,
.calendar-overflow-item small {
    color: var(--muted);
}

.calendar-overflow-item.is-session {
    background: rgba(191, 77, 77, 0.12);
    border-color: rgba(191, 77, 77, 0.16);
}

.calendar-overflow-item.is-session:hover {
    background: rgba(191, 77, 77, 0.18);
    border-color: rgba(191, 77, 77, 0.24);
}

.calendar-overflow-item.is-appointment {
    background: rgba(58, 112, 196, 0.12);
    border-color: rgba(58, 112, 196, 0.16);
}

.calendar-overflow-item.is-appointment:hover {
    background: rgba(58, 112, 196, 0.18);
    border-color: rgba(58, 112, 196, 0.24);
}

.calendar-overflow-item.is-team {
    background: rgba(176, 126, 40, 0.12);
    border-color: rgba(176, 126, 40, 0.16);
}

.calendar-overflow-item.is-team:hover {
    background: rgba(176, 126, 40, 0.18);
    border-color: rgba(176, 126, 40, 0.24);
}

.today-alert-modal {
    width: min(660px, 100%);
}

.today-alert-summary {
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(240, 246, 242, 0.92));
    border: 1px solid rgba(42, 84, 61, 0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.today-alert-summary__meta {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary-dark);
}

.today-alert-list {
    gap: 14px;
    padding-left: 2px;
}

.today-alert-item {
    gap: 10px;
    padding: 18px 20px;
    border-radius: 22px;
    box-shadow: 0 18px 30px rgba(16, 30, 43, 0.08), inset 0 1px 0 rgba(255,255,255,0.52);
}

.today-alert-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.today-alert-item__head strong {
    font-size: 1rem;
    line-height: 1.8;
}

.today-alert-item__type {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(42, 84, 61, 0.12);
    color: var(--secondary-dark);
    font-size: 0.8rem;
    font-weight: 800;
}

.today-alert-item__meta {
    font-size: 0.92rem;
    color: var(--muted);
}

.today-alert-item__status {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--secondary-dark);
}

.today-alert-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(42, 84, 61, 0.12);
}

.today-alert-dismiss {
    margin: 0;
    max-width: 320px;
}

.today-alert-actions {
    margin-top: 12px;
    justify-content: flex-end;
    align-self: flex-end;
}

.event-modal__form {
    display: grid;
    gap: 16px;
}

.event-modal__actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.event-modal__actions--danger {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(153, 45, 45, 0.14);
    justify-content: flex-end;
}

.button.danger {
    background: linear-gradient(135deg, #cb5b5b, #a12f2f);
    color: #fff;
    border-color: rgba(161, 47, 47, 0.36);
    box-shadow: 0 14px 28px rgba(161, 47, 47, 0.22);
}

.button.danger:hover {
    background: linear-gradient(135deg, #d46868, #b33636);
    box-shadow: 0 18px 30px rgba(161, 47, 47, 0.28);
}

.calendar-event strong,
.calendar-more {
    color: var(--secondary-dark);
    font-size: 0.85rem;
    font-weight: 800;
}

.calendar-event p,
.calendar-empty-day,
.calendar-more {
    margin: 0;
    line-height: 1.6;
}

.calendar-event p,
.calendar-empty-day {
    color: var(--muted);
    font-size: 0.82rem;
}

.calendar-event strong {
    display: block;
    margin: 0;
    font-size: 0.66rem;
    color: currentColor;
    opacity: 0.72;
}

.calendar-event p {
    color: var(--secondary-dark);
    font-weight: 700;
    margin: 0;
    font-size: 0.76rem;
}

.calendar-empty-day {
    padding: 10px 0;
}

.calendar-mini-stats {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.calendar-side-panel .panel-head {
    margin-bottom: 12px;
}

.calendar-side-panel .table-meta {
    font-size: 0.88rem;
    line-height: 1.7;
}

.calendar-side-panel .mini-item {
    padding: 12px 14px;
    border-radius: 16px;
}

.calendar-side-panel .mini-item strong {
    margin-bottom: 4px;
    font-size: 0.94rem;
}

.calendar-side-panel .mini-item p {
    font-size: 0.8rem;
    line-height: 1.55;
}

.calendar-side-panel .calendar-list {
    gap: 10px;
}

@media (max-width: 1180px) {
    .calendar-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .calendar-toolbar {
        flex-direction: column;
    }

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

    .calendar-weekdays div {
        text-align: right;
    }

    .event-modal__dialog {
        padding: 22px;
        border-radius: 24px;
    }

    .today-alert-footer,
    .today-alert-item__head {
        flex-direction: column;
        align-items: stretch;
    }

    .today-alert-dismiss {
        max-width: none;
    }

    .today-alert-actions {
        width: 100%;
        margin-top: 0;
        justify-content: flex-start;
    }

    .event-modal__grid {
        grid-template-columns: 1fr;
    }
}

@keyframes calendarPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(47, 107, 79, 0.02), 0 12px 24px rgba(47, 107, 79, 0.08), inset 0 1px 0 rgba(255,255,255,0.58);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(47, 107, 79, 0.12), 0 22px 38px rgba(47, 107, 79, 0.18), inset 0 1px 0 rgba(255,255,255,0.82);
    }
}

@keyframes calendarOverflowPulse {
    0%, 100% {
        background: rgba(22, 60, 82, 0.06);
        border-color: rgba(22, 60, 82, 0.08);
        box-shadow: 0 0 0 0 rgba(47, 107, 79, 0.02);
    }
    50% {
        background: rgba(108, 154, 123, 0.16);
        border-color: rgba(47, 107, 79, 0.2);
        box-shadow: 0 0 0 5px rgba(108, 154, 123, 0.1);
    }
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.permission-grid-wide {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.checkbox-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--line);
    cursor: pointer;
}

.checkbox-chip input {
    width: auto;
    margin: 0;
}

.checkbox-chip-strong {
    background: rgba(47, 107, 79, 0.1);
    border-color: rgba(47, 107, 79, 0.22);
}

.employee-page-grid {
    grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.25fr);
    align-items: start;
}

.employee-create-modal {
    width: min(100%, 680px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.employee-create-modal::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.employee-form-section {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.52);
    border: 1px solid rgba(42, 84, 61, 0.1);
}

.employee-section-head {
    margin-bottom: 14px;
}

.employee-section-head h4 {
    margin: 0 0 6px;
    color: var(--secondary);
}

.employee-section-head p {
    margin: 0;
    color: var(--muted);
}

.employee-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 250px));
    gap: 14px;
    justify-content: start;
}

.employee-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(47, 107, 79, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250, 252, 250, 0.88));
    border: 1px solid rgba(42, 84, 61, 0.12);
    box-shadow: var(--shadow-soft);
    min-height: 100%;
}

.employee-card-header,
.employee-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.employee-card-header strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 4px;
    color: var(--secondary-dark);
    line-height: 1.45;
}

.employee-card-header p {
    margin: 0;
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 0.82rem;
}

.employee-meta-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.employee-card-body {
    display: grid;
    gap: 10px;
}

.employee-profile-list {
    display: grid;
    gap: 8px;
}

.employee-profile-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(42, 84, 61, 0.08);
}

.employee-profile-item__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(47, 107, 79, 0.14), rgba(47, 107, 79, 0.08));
    color: var(--primary-dark);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.employee-profile-item__icon svg {
    width: 18px;
    height: 18px;
}

.employee-profile-item__content strong {
    display: block;
    margin: 0 0 3px;
    font-size: 0.74rem;
    color: var(--muted);
    font-weight: 700;
}

.employee-profile-item__content p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--secondary-dark);
    font-weight: 800;
}

.employee-profile-item--status-active .employee-profile-item__icon {
    background: linear-gradient(180deg, rgba(74, 163, 107, 0.2), rgba(74, 163, 107, 0.1));
    color: #237146;
}

.employee-profile-item--status-leave .employee-profile-item__icon {
    background: linear-gradient(180deg, rgba(215, 156, 59, 0.22), rgba(215, 156, 59, 0.1));
    color: #9a6711;
}

.employee-profile-item--status-suspended .employee-profile-item__icon {
    background: linear-gradient(180deg, rgba(194, 84, 84, 0.2), rgba(194, 84, 84, 0.1));
    color: #a33a3a;
}

.employee-profile-item--status-neutral .employee-profile-item__icon {
    background: linear-gradient(180deg, rgba(124, 130, 138, 0.18), rgba(124, 130, 138, 0.08));
    color: #5f6770;
}

.employee-info-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

.employee-info-grid .info-card {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(42, 84, 61, 0.08);
}

.employee-info-grid .info-card strong {
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.employee-info-grid .info-card p {
    font-size: 0.84rem;
    line-height: 1.6;
}

.employee-card-footer {
    padding-top: 6px;
    border-top: 1px solid rgba(42, 84, 61, 0.08);
    align-items: center;
}

.employee-card-footer .table-meta {
    font-size: 0.78rem;
}

.employee-card-footer .button {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
}

.employee-permission-toggle-row {
    display: flex;
    justify-content: flex-start;
}

.employee-permission-toggle-row--modal {
    margin-top: -2px;
}

.employee-permission-section[hidden] {
    display: none !important;
}

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

.employee-permission-grid--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.employee-permission-grid .checkbox-chip {
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 12px;
    gap: 8px;
}

.employee-permission-grid .checkbox-chip span {
    font-size: 0.84rem;
    line-height: 1.4;
}

.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.sessions-form-shell { display: grid; grid-template-columns: 1fr; gap: 18px; }

#postponedSessionDateGroup.is-alerting {
    animation: postponedDateShake 0.58s ease;
}

@keyframes postponedDateShake {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(5px);
    }
    40% {
        transform: translateX(-4px);
    }
    60% {
        transform: translateX(3px);
    }
    80% {
        transform: translateX(-2px);
    }
}

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

.login-shell::before,
.login-shell::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.login-shell::before {
    width: 360px;
    height: 360px;
    top: -120px;
    right: -100px;
    background: radial-gradient(circle, rgba(47, 107, 79, 0.18), transparent 70%);
}

.login-shell::after {
    width: 420px;
    height: 420px;
    left: -160px;
    bottom: -180px;
    background: radial-gradient(circle, rgba(22, 60, 82, 0.14), transparent 72%);
}

.login-card {
    width: min(100%, 460px);
    background: var(--panel);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    border-radius: 32px;
    padding: 26px;
}

.login-card-wide {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 460px);
    gap: 24px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.62);
}

.login-brand {
    margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(22, 60, 82, 0.96), rgba(13, 26, 42, 0.92));
}

.login-brand h1,
.login-brand p {
    color: #fff;
}

.login-showcase {
    display: grid;
    gap: 22px;
    padding: 10px;
}

.login-chip-row {
    grid-template-columns: 1fr;
}

.login-hero-chip {
    background: linear-gradient(135deg, rgba(16, 40, 56, 0.96), rgba(11, 28, 44, 0.92));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 34px rgba(16, 40, 56, 0.16);
}

.login-hero-chip strong {
    color: #ffffff;
}

.login-hero-chip span {
    color: rgba(255,255,255,0.72);
}

.login-showcase-copy {
    display: grid;
    gap: 12px;
    padding: 12px 4px;
}

.login-showcase-copy h2,
.login-panel-head h2 {
    margin: 0;
    color: var(--secondary-dark);
    font-size: clamp(1.9rem, 3vw, 2.7rem);
}

.login-showcase-copy p:last-child,
.login-panel-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}

.login-form-panel {
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 26px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82));
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: var(--shadow-soft);
}

.login-panel-head {
    display: grid;
    gap: 10px;
}

.login-submit {
    width: 100%;
    min-height: 52px;
}

.login-stage {
    position: relative;
    width: min(1240px, 100%);
    z-index: 1;
}

.login-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(10px);
    pointer-events: none;
    animation: loginOrbFloat 12s ease-in-out infinite;
}

.login-orb-one {
    width: 320px;
    height: 320px;
    top: -70px;
    right: 3%;
    background: radial-gradient(circle, rgba(214, 180, 139, 0.26), transparent 70%);
}

.login-orb-two {
    width: 420px;
    height: 420px;
    bottom: -120px;
    left: -40px;
    background: radial-gradient(circle, rgba(23, 58, 88, 0.22), transparent 72%);
    animation-delay: -4s;
}

.login-orb-three {
    width: 180px;
    height: 180px;
    top: 46%;
    left: 42%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 72%);
    animation-delay: -8s;
}

.login-experience {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, 470px);
    gap: 26px;
    padding: 28px;
    border-radius: 38px;
    background:
        linear-gradient(135deg, rgba(7, 18, 31, 0.9), rgba(13, 30, 48, 0.82)),
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 36px 90px rgba(7, 18, 31, 0.28);
    backdrop-filter: blur(24px);
}

.login-experience::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.05) 38%, transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 32%);
    pointer-events: none;
}

.login-background-image {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.96;
    background:
        linear-gradient(90deg, rgba(7, 18, 31, 0.18) 0%, rgba(7, 18, 31, 0.48) 40%, rgba(7, 18, 31, 0.72) 100%),
        linear-gradient(180deg, rgba(7, 18, 31, 0.04), rgba(7, 18, 31, 0.18)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 900'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23182c41'/%3E%3Cstop offset='100%25' stop-color='%230b1420'/%3E%3C/linearGradient%3E%3ClinearGradient id='window' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23d9ecf8' stop-opacity='.72'/%3E%3Cstop offset='100%25' stop-color='%2384a4bc' stop-opacity='.18'/%3E%3C/linearGradient%3E%3ClinearGradient id='wood' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%232f6b4f'/%3E%3Cstop offset='100%25' stop-color='%23183c2c'/%3E%3C/linearGradient%3E%3ClinearGradient id='gold' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23d7e7c9'/%3E%3Cstop offset='100%25' stop-color='%2384ad8b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1400' height='900' fill='url(%23bg)'/%3E%3Crect x='70' y='70' width='1260' height='430' rx='30' fill='%230f1d2c' opacity='.66'/%3E%3Crect x='96' y='98' width='1208' height='374' rx='22' fill='url(%23window)' opacity='.5'/%3E%3Cpath d='M96 286h1208' stroke='%23ffffff' stroke-opacity='.1' stroke-width='8'/%3E%3Cpath d='M398 98v374M700 98v374M1002 98v374' stroke='%23ffffff' stroke-opacity='.1' stroke-width='8'/%3E%3Cg opacity='.18'%3E%3Ccircle cx='1128' cy='172' r='92' fill='%23ffffff'/%3E%3Ccircle cx='1048' cy='236' r='54' fill='%23ffffff'/%3E%3C/g%3E%3Cg opacity='.34'%3E%3Crect x='1044' y='156' width='186' height='286' rx='18' fill='%234f7f5e'/%3E%3Crect x='1070' y='190' width='22' height='214' rx='8' fill='%23a6c4ad'/%3E%3Crect x='1102' y='190' width='22' height='214' rx='8' fill='%23a6c4ad'/%3E%3Crect x='1134' y='190' width='22' height='214' rx='8' fill='%23a6c4ad'/%3E%3Crect x='1166' y='190' width='22' height='214' rx='8' fill='%23a6c4ad'/%3E%3C/g%3E%3Cg opacity='.28'%3E%3Crect x='206' y='186' width='154' height='246' rx='18' fill='%234f7f5e'/%3E%3Crect x='232' y='218' width='20' height='184' rx='8' fill='%23a6c4ad'/%3E%3Crect x='261' y='218' width='20' height='184' rx='8' fill='%23a6c4ad'/%3E%3Crect x='290' y='218' width='20' height='184' rx='8' fill='%23a6c4ad'/%3E%3Crect x='319' y='218' width='20' height='184' rx='8' fill='%23a6c4ad'/%3E%3C/g%3E%3Crect x='208' y='540' width='984' height='54' rx='20' fill='url(%23wood)' opacity='.96'/%3E%3Crect x='290' y='594' width='820' height='146' rx='24' fill='url(%23wood)' opacity='.94'/%3E%3Crect x='338' y='740' width='66' height='108' rx='18' fill='%2313261d' opacity='.82'/%3E%3Crect x='996' y='740' width='66' height='108' rx='18' fill='%2313261d' opacity='.82'/%3E%3Cg opacity='.5'%3E%3Crect x='580' y='514' width='128' height='22' rx='11' fill='%23dbe9d8'/%3E%3Crect x='734' y='504' width='54' height='34' rx='14' fill='%23dbe9d8'/%3E%3Ccircle cx='1110' cy='520' r='22' fill='%23dbe9d8'/%3E%3C/g%3E%3Cg transform='translate(690 360)' opacity='.8'%3E%3Crect x='-10' y='-84' width='20' height='170' rx='10' fill='url(%23gold)'/%3E%3Crect x='-116' y='-52' width='232' height='14' rx='7' fill='url(%23gold)'/%3E%3Crect x='-52' y='86' width='104' height='16' rx='8' fill='url(%23gold)'/%3E%3Crect x='-70' y='102' width='140' height='14' rx='7' fill='url(%23gold)' opacity='.92'/%3E%3Cpath d='M-78 -38 -124 36' stroke='%239ac0a0' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M78 -38 124 36' stroke='%239ac0a0' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M-140 36h86c-8 26-28 40-43 40s-35-14-43-40Z' fill='url(%23gold)' opacity='.96'/%3E%3Cpath d='M54 36h86c-8 26-28 40-43 40s-35-14-43-40Z' fill='url(%23gold)' opacity='.96'/%3E%3Ccircle cx='0' cy='-52' r='10' fill='%23eef6e7'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center center;
    animation: loginBackgroundDrift 18s ease-in-out infinite;
}

.login-background-glint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 22% 26%, rgba(255,255,255,0.12), transparent 20%),
        radial-gradient(circle at 72% 34%, rgba(245, 215, 164, 0.12), transparent 18%),
        linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.08) 48%, transparent 72%);
    mix-blend-mode: screen;
    opacity: 0.12;
    animation: loginBackgroundGlint 6.5s ease-in-out infinite;
}

.login-story,
.login-portal {
    position: relative;
    z-index: 1;
    animation: loginPanelReveal 0.9s cubic-bezier(.2,.7,.2,1) both;
}

.login-portal {
    animation-delay: 0.12s;
}

.login-story {
    display: grid;
    gap: 28px;
    align-content: start;
    padding: 18px 12px 18px 8px;
    color: #fff;
}

.login-story-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.login-brand-logo {
    width: 140px;
    height: 140px;
    flex: 0 0 140px;
    padding: 4px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    animation: loginCardFloat 6.5s ease-in-out infinite;
}

.login-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.login-story-brand h1,
.login-story-copy h2,
.login-portal-head h2 {
    margin: 0;
}

.login-story-brand p,
.login-story-copy p,
.login-portal-head p {
    margin: 0;
}

.login-eyebrow,
.login-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.72);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.login-story-brand {
    display: grid;
    gap: 6px;
}

.login-story-brand h1 {
    font-size: clamp(1.45rem, 1.9vw, 1.9rem);
    color: #fff;
}

.login-story-brand p {
    color: rgba(255,255,255,0.72);
    font-size: 0.92rem;
}

.login-story-copy {
    display: grid;
    gap: 14px;
}

.login-story-copy h2 {
    font-size: clamp(2.2rem, 3.4vw, 3.6rem);
    line-height: 1.18;
    max-width: 760px;
}

.login-story-copy p {
    max-width: 650px;
    color: rgba(255,255,255,0.72);
    line-height: 1.95;
    font-size: 1.02rem;
}

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

.login-feature-card {
    position: relative;
    overflow: hidden;
    padding: 22px 20px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    animation: loginCardFloat 8s ease-in-out infinite;
}

.login-feature-card:nth-child(2) {
    animation-delay: -2s;
}

.login-feature-card:nth-child(3) {
    animation-delay: -4s;
}

.login-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 48%, transparent 68%);
    transform: translateX(120%);
    animation: loginCardSweep 7s linear infinite;
}

.login-feature-card strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-size: 1.08rem;
}

.login-feature-card p {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,0.72);
    line-height: 1.8;
}

.login-ticker {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.login-ticker span {
    display: inline-flex;
    padding: 11px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.78);
    animation: loginTickerPulse 5.5s ease-in-out infinite;
}

.login-ticker span:nth-child(2) {
    animation-delay: -1s;
}

.login-ticker span:nth-child(3) {
    animation-delay: -2s;
}

.login-ticker span:nth-child(4) {
    animation-delay: -3s;
}

.login-portal {
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 28px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.97), rgba(244, 247, 250, 0.9));
    border: 1px solid rgba(255,255,255,0.68);
    box-shadow:
        0 24px 48px rgba(7, 18, 31, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.8);
}

.login-portal-head {
    display: grid;
    gap: 12px;
}

.login-portal-head .login-kicker {
    background: rgba(16, 40, 56, 0.06);
    border-color: rgba(16, 40, 56, 0.08);
    color: var(--secondary);
}

.login-portal-head h2 {
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
    color: var(--secondary-dark);
}

.login-portal-head p {
    color: var(--muted);
    line-height: 1.85;
}

.login-form {
    gap: 16px;
}

.login-field label {
    font-size: 0.92rem;
}

.login-field input {
    min-height: 56px;
    border-radius: 18px;
    border-color: rgba(16, 40, 56, 0.12);
    background: linear-gradient(180deg, rgba(248,250,252,0.92), rgba(255,255,255,0.98));
}

.login-field input:focus {
    border-color: rgba(16, 40, 56, 0.22);
    box-shadow: 0 0 0 4px rgba(16, 40, 56, 0.08);
}

.login-submit-luxury {
    min-height: 58px;
    border-radius: 20px;
    background: linear-gradient(135deg, #173a58, #0c2236);
    box-shadow: 0 22px 34px rgba(12, 34, 54, 0.22);
}

.login-submit-luxury:hover {
    box-shadow: 0 26px 40px rgba(12, 34, 54, 0.28);
}

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

.login-metric {
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(16, 40, 56, 0.05), rgba(16, 40, 56, 0.02));
    border: 1px solid rgba(16, 40, 56, 0.08);
}

.login-metric strong {
    display: block;
    margin-bottom: 8px;
    color: var(--secondary-dark);
}

.login-metric span {
    color: var(--muted);
    line-height: 1.7;
    font-size: 0.88rem;
}

@keyframes loginOrbFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, -18px, 0) scale(1.04);
    }
}

@keyframes loginPanelReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loginCardFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes loginCardSweep {
    0% {
        transform: translateX(120%);
    }
    100% {
        transform: translateX(-130%);
    }
}

@keyframes loginTickerPulse {
    0%, 100% {
        transform: translateY(0);
        background: rgba(255,255,255,0.06);
    }
    50% {
        transform: translateY(-4px);
        background: rgba(255,255,255,0.1);
    }
}

@keyframes loginBackgroundDrift {
    0%, 100% {
        transform: scale(1) translate3d(0, 0, 0);
    }
    50% {
        transform: scale(1.04) translate3d(-10px, -8px, 0);
    }
}

@keyframes loginBackgroundGlint {
    0%, 100% {
        opacity: 0.08;
        transform: translateX(0) scale(1);
    }
    50% {
        opacity: 0.18;
        transform: translateX(-6px) scale(1.015);
    }
}

.welcome-body {
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(108, 154, 123, 0.22), transparent 22%),
        radial-gradient(circle at 82% 18%, rgba(65, 116, 148, 0.2), transparent 26%),
        linear-gradient(145deg, #0e2231 0%, #112f42 48%, #081521 100%);
    color: #fff;
}

.welcome-screen {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.welcome-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(12px);
    opacity: 0.7;
}

.welcome-glow-one {
    width: 320px;
    height: 320px;
    top: -80px;
    right: -40px;
    background: radial-gradient(circle, rgba(108, 154, 123, 0.28), transparent 66%);
}

.welcome-glow-two {
    width: 420px;
    height: 420px;
    bottom: -140px;
    left: -80px;
    background: radial-gradient(circle, rgba(92, 144, 178, 0.18), transparent 64%);
}

.welcome-card {
    position: relative;
    width: min(100%, 720px);
    padding: 42px 34px 36px;
    text-align: center;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
        linear-gradient(145deg, rgba(15, 34, 49, 0.9), rgba(8, 21, 33, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.welcome-logo {
    position: relative;
    z-index: 1;
    width: min(100%, 300px);
    height: 190px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
}

.welcome-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.welcome-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.08) 18%, transparent 38%);
    transform: translateX(120%);
    animation: loginCardSweep 2.6s linear infinite;
}

.welcome-kicker {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.welcome-card h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #fff;
}

.welcome-text,
.welcome-footnote {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.9;
}

.welcome-footnote {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.95rem;
}

.welcome-progress {
    width: min(100%, 420px);
    height: 12px;
    margin: 30px auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08);
}

.welcome-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9fc2a9 0%, #d6e6d8 48%, #ffffff 100%);
    box-shadow: 0 0 18px rgba(159, 194, 169, 0.4);
    animation: welcomeProgressFill 3.5s linear forwards;
}

.welcome-balance {
    position: relative;
    width: 168px;
    height: 160px;
    margin: 0 auto 26px;
    opacity: 0.92;
    animation: loginOrbFloat 5s ease-in-out infinite;
}

.welcome-balance-top,
.welcome-balance-beam,
.welcome-balance-arm,
.welcome-balance-pillar,
.welcome-balance-base,
.welcome-balance-pan,
.welcome-balance-chain {
    position: absolute;
    right: 50%;
    transform: translateX(50%);
}

.welcome-balance-top {
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, #d6e6d8, #6e9778);
}

.welcome-balance-beam {
    top: 20px;
    width: 126px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #9fc2a9, #dcebdd, #9fc2a9);
}

.welcome-balance-arm {
    top: 24px;
    width: 64px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(214, 230, 216, 0.95));
    transform-origin: right center;
}

.welcome-balance-arm-right {
    right: calc(50% - 2px);
    transform: rotate(-18deg);
}

.welcome-balance-arm-left {
    right: auto;
    left: calc(50% - 2px);
    transform: rotate(18deg);
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(240, 214, 178, 0.95), transparent);
}

.welcome-balance-chain {
    top: 49px;
    width: 2px;
    height: 36px;
    background: rgba(240, 214, 178, 0.92);
}

.welcome-balance-chain-right {
    right: calc(50% - 56px);
}

.welcome-balance-chain-left {
    right: auto;
    left: calc(50% - 56px);
}

.welcome-balance-pan {
    top: 82px;
    width: 46px;
    height: 18px;
    border: 2px solid rgba(240, 214, 178, 0.95);
    border-top: 0;
    border-radius: 0 0 24px 24px;
}

.welcome-balance-pan-right {
    right: calc(50% - 78px);
}

.welcome-balance-pan-left {
    right: auto;
    left: calc(50% - 78px);
}

.welcome-balance-pillar {
    top: 18px;
    width: 10px;
    height: 96px;
    border-radius: 999px;
    background: linear-gradient(180deg, #d6e6d8, #6e9778);
}

.welcome-balance-base {
    top: 112px;
    width: 110px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6e9778, #d6e6d8, #6e9778);
    box-shadow: 0 10px 26px rgba(110, 151, 120, 0.18);
}

@keyframes welcomeProgressFill {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@media (max-width: 1180px) {
    .app-shell, .dashboard-grid, .split, .employee-page-grid, .page-hero-grid { grid-template-columns: 1fr; }
    .report-compact-grid,
    .report-compact-grid--triple,
    .report-kpi-grid--compact {
        grid-template-columns: 1fr;
    }
    .login-card-wide { grid-template-columns: 1fr; }
    .login-experience,
    .login-feature-stack {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) and (max-width: 1366px) {
    .topbar-actions {
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .mobile-menu-trigger {
        display: inline-flex !important;
        order: 0;
    }
}

@media (max-width: 1180px) {
    .app-shell {
        display: block;
    }
    .login-story,
    .login-background-image,
    .login-background-glint,
    .login-orb {
        display: none !important;
    }
    .login-shell {
        padding: 16px;
    }
    .login-stage {
        min-height: 100vh;
        display: grid;
        align-items: center;
    }
    .login-experience {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }
    .login-experience::before {
        display: none !important;
    }
    .login-portal {
        width: min(100%, 460px);
        margin: 0 auto;
    }
    .mobile-sidebar-backdrop,
    .mobile-sidebar-close {
        display: inline-flex;
    }
    .mobile-sidebar-backdrop {
        display: block;
    }
    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88vw, 340px);
        height: 100vh;
        border-left: 0;
        border-right: 1px solid rgba(255,255,255,0.06);
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 40;
        padding-top: 74px;
        box-shadow: -18px 0 36px rgba(0, 0, 0, 0.22);
    }
    body.mobile-sidebar-open .sidebar {
        transform: translateX(0);
    }
    body.mobile-sidebar-open .mobile-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .main-content {
        min-height: 100vh;
        padding: 20px;
    }
    .topbar {
        padding: 20px 18px;
        border-radius: 24px;
    }
    .topbar-main {
        align-items: flex-start;
    }
    .topbar-copy {
        gap: 6px;
    }
    .topbar h2 {
        font-size: clamp(1.35rem, 5vw, 1.8rem);
    }
    .topbar-marquee__item {
        white-space: normal;
        min-height: 44px;
    }
}

@media (max-width: 780px) {
    .case-search-panel__footer {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .case-search-panel__meta {
        justify-content: flex-start;
    }

    .case-selection-stage,
    .case-file-layout,
    .case-overview-panel__hero,
    .case-overview-section-grid,
    .case-stage-preview-panel__blocks {
        grid-template-columns: 1fr;
    }

    .case-stage-preview-panel__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-timeline-item__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .report-timeline--case .report-timeline-item {
        padding: 13px 13px 13px 18px;
    }

    .metrics-grid--case-sidebar {
        grid-template-columns: 1fr 1fr;
    }

    .case-quick-edit-panel__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .main-content, .sidebar { padding: 18px; }
    .calendar-app--full {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    .topbar,
    .section-head,
    .panel-head,
    .client-panel-head,
    .sessions-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .employee-card-header,
    .employee-card-footer { flex-direction: column; }
    .report-brief-panel__head,
    .report-metric-row,
    .report-team-row,
    .report-timeline-item {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }
    .report-team-row__meta {
        width: 100%;
        text-align: right;
    }
    .topbar-admin-item__edit-row { grid-template-columns: 1fr; }
    .topbar {
        padding: 20px;
    }
    .topbar-main {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .topbar-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }

    .font-scale-controls {
        margin-inline-start: auto;
    }

    .mobile-menu-trigger {
        display: inline-flex !important;
        order: 0;
    }
    .page-hero,
    .panel-card,
    .metric-card {
        padding: 20px;
    }
    .finance-shell,
    .finance-shell--compact,
    .finance-control-grid,
    .finance-control-grid--hero,
    .office-identity-grid,
    .office-identity-assets-grid,
    .office-identity-section-grid--double,
    .office-identity-inline-grid,
    .office-identity-upload-row,
    .office-identity-asset-layout,
    .office-identity-asset-layout--template,
    .office-interface-preview__cards,
    .office-interface-preview__footer,
    .office-interface-editor__grid,
    .panel-head--spread {
        grid-template-columns: 1fr;
    }
    .finance-control-panel {
        width: 100%;
        min-width: 0;
    }
    .finance-entry-grid,
    .finance-record-card__meta-grid {
        grid-template-columns: 1fr;
    }
    .finance-panel-head--spread {
        grid-template-columns: 1fr;
    }
    .office-identity-remove {
        width: 100%;
    }
    .contract-form-grid {
        grid-template-columns: 1fr;
    }
    .contract-form-grid--editor {
        grid-template-columns: 1fr;
    }
    .contract-editor__paper {
        min-height: 520px;
        padding: 22px 18px;
    }
    .contract-print-modal__dialog {
        width: min(100%, calc(100vw - 24px));
        max-height: calc(100vh - 24px);
        overflow: hidden;
    }
    .contract-signed-view-frame {
        min-height: 240px;
        height: 36vh;
        max-height: 340px;
    }
    .employee-permission-grid,
    .employee-permission-grid--wide {
        grid-template-columns: 1fr;
    }
    .sessions-panel-actions,
    .session-filter-row {
        width: 100%;
        justify-content: flex-start;
    }
    .sessions-panel-actions--stacked,
    .sessions-panel-cta {
        width: 100%;
        min-width: 0;
    }
    .attachment-upload-grid {
        grid-template-columns: 1fr;
    }
    .session-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .session-case-card__meta-grid {
        grid-template-columns: 1fr;
    }
    .login-card,
    .login-card-wide,
    .login-form-panel {
        padding: 18px;
    }
    .login-experience,
    .login-portal {
        padding: 18px;
    }
    .login-story-copy h2 {
        font-size: 2rem;
    }
    .login-inline-metrics,
    .login-feature-stack {
        grid-template-columns: 1fr;
    }
    .login-story-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .login-portal {
        padding: 24px 20px;
        border-radius: 28px;
    }
    .login-portal-head p,
    .login-inline-metrics {
        display: none;
    }
    .welcome-card {
        padding: 32px 22px 28px;
    }
}

@media (max-width: 1180px) {
    .finance-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finance-table {
        min-width: 980px;
    }

    .finance-detail-modal {
        width: min(700px, calc(100% - 28px));
    }
}

@media (max-width: 980px) {
    .finance-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finance-control-intro,
    .finance-identity-card,
    .finance-search-form {
        padding: 18px;
    }

    .finance-control-intro .section-title {
        font-size: 1.18rem;
    }

    .finance-search-actions {
        flex-wrap: wrap;
    }

    .finance-table {
        min-width: 860px;
    }

    .finance-table thead th,
    .finance-table td {
        white-space: nowrap;
    }

    .finance-table-actions {
        flex-wrap: nowrap;
    }

    .finance-pagination {
        gap: 6px;
    }

    .finance-pagination__link {
        min-width: 38px;
        height: 38px;
        padding: 0 12px;
    }
}

@media (max-width: 780px) {
    .finance-metrics-grid {
        grid-template-columns: 1fr 1fr;
    }

    .finance-search-grid {
        grid-template-columns: 1fr;
    }

    .finance-control-intro,
    .finance-identity-card,
    .finance-search-form {
        padding: 16px;
        border-radius: 18px;
    }

    .finance-control-intro__actions,
    .finance-search-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .finance-search-actions .button,
    .finance-control-intro__actions .button,
    .finance-identity-card .button {
        width: 100%;
        justify-content: center;
    }

    .finance-table-wrap {
        margin-inline: 0;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .finance-table {
        min-width: 0;
        width: 100%;
    }

    .finance-table thead {
        display: none;
    }

    .finance-table,
    .finance-table tbody,
    .finance-table tr,
    .finance-table td {
        display: block;
        width: 100%;
    }

    .finance-table tr {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        border: 1px solid rgba(42, 84, 61, 0.08);
        background: rgba(255,255,255,0.88);
        box-shadow: var(--shadow-soft);
    }

    .finance-table td {
        padding: 10px 0;
        font-size: 0.82rem;
        border-bottom: 1px solid rgba(42, 84, 61, 0.08);
        text-align: right;
        white-space: normal;
    }

    .finance-table td:first-child {
        padding-top: 0;
        font-size: 0.92rem;
        font-weight: 800;
    }

    .finance-table td:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .finance-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: var(--muted-soft);
        font-size: 0.72rem;
        font-weight: 800;
    }

    .finance-reference-button {
        font-size: 0.82rem;
    }

    .finance-table-actions {
        justify-content: flex-start;
    }

    .finance-pagination {
        justify-content: stretch;
    }

    .finance-pagination__link {
        flex: 1 1 44px;
    }

    .finance-detail-modal {
        width: min(100%, calc(100% - 18px));
    }

    .finance-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .finance-metrics-grid {
        grid-template-columns: 1fr;
    }

    .finance-control-intro,
    .finance-identity-card,
    .finance-search-form,
    .finance-table tr {
        padding: 14px;
        border-radius: 16px;
    }

    .finance-panel-head .section-title,
    .finance-control-intro .section-title {
        font-size: 1.02rem;
    }

    .finance-metrics-grid .metric-card {
        padding: 12px 14px;
    }

    .finance-metrics-grid .metric-card strong {
        font-size: 1.12rem;
    }

    .finance-search-form {
        gap: 12px;
    }

    .finance-pagination__link {
        min-width: 34px;
        height: 36px;
        padding: 0 10px;
        font-size: 0.82rem;
    }
}

/* WhatsApp hero must remain dark after the shared panel-card rules. */
.panel-card.whatsapp-hero {
    background:
        radial-gradient(circle at 14% 20%, rgba(42, 199, 139, 0.16), transparent 32%),
        linear-gradient(135deg, rgba(8, 66, 49, 0.98), rgba(10, 91, 65, 0.94));
    color: #fff;
}

.panel-card.whatsapp-hero .whatsapp-hero__copy h3,
.panel-card.whatsapp-hero .whatsapp-status-badge__copy strong {
    color: #fff;
}

.panel-card.whatsapp-hero .whatsapp-hero__copy p,
.panel-card.whatsapp-hero .whatsapp-status-badge__copy small {
    color: rgba(255, 255, 255, 0.78);
}

/* Keep the connection summary beside the unchanged device card on wide screens. */
@media (min-width: 921px) {
    .whatsapp-control {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .whatsapp-control > .whatsapp-hero {
        grid-column: 1;
        grid-row: 1;
        min-height: 100%;
    }

    .whatsapp-control > .whatsapp-notice {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .whatsapp-control > .whatsapp-layout {
        display: contents;
    }

    .whatsapp-control .whatsapp-device-card {
        grid-column: 2;
        grid-row: 1;
    }

    .whatsapp-control .whatsapp-qr-card {
        grid-column: 1 / -1;
        grid-row: 3;
    }
}

.whatsapp-linking-progress {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(21, 154, 105, 0.2);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(21, 154, 105, 0.1), rgba(21, 154, 105, 0.035));
}

.whatsapp-linking-progress__spinner {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 3px solid rgba(21, 154, 105, 0.16);
    border-top-color: var(--wa-green);
    border-radius: 50%;
    animation: whatsapp-spin 0.8s linear infinite;
}

.whatsapp-linking-progress__copy {
    display: grid;
    gap: 3px;
}

.whatsapp-linking-progress__copy strong {
    color: var(--primary-dark);
    font-size: 0.86rem;
}

.whatsapp-linking-progress__copy small {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.7;
}

@media (max-width: 1180px) {
    .employee-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .employee-create-modal {
        width: min(720px, calc(100% - 28px));
    }
}

@media (max-width: 980px) {
    .employee-cards {
        grid-template-columns: 1fr;
    }

    .employee-card {
        padding: 18px;
    }

    .employee-card-header,
    .employee-card-footer {
        gap: 10px;
    }

    .employee-card-footer .button {
        align-self: flex-start;
    }

    .employee-profile-list {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .employee-profile-item {
        min-height: 100%;
    }

    .employee-create-modal {
        width: min(100%, calc(100% - 22px));
        max-height: calc(100vh - 24px);
    }
}

@media (max-width: 780px) {
    .metrics-grid {
        grid-template-columns: 1fr 1fr;
    }

    .client-panel-head .button {
        width: 100%;
        justify-content: center;
    }

    .employee-card {
        padding: 16px;
        border-radius: 18px;
    }

    .employee-card-header,
    .employee-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .employee-meta-badges {
        width: 100%;
    }

    .employee-meta-badges .badge {
        justify-content: center;
    }

    .employee-profile-list {
        grid-template-columns: 1fr;
    }

    .employee-profile-item {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 10px;
        border-radius: 12px;
    }

    .employee-profile-item__icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .employee-card-footer .button,
    .employee-card-footer .table-meta {
        width: 100%;
    }

    .employee-card-footer .button {
        justify-content: center;
    }

    .employee-form-section {
        padding: 12px;
    }

    .employee-section-head h4 {
        font-size: 1rem;
    }

    .employee-section-head p {
        font-size: 0.84rem;
        line-height: 1.7;
    }
}

@media (max-width: 520px) {
    .case-search-panel__meta {
        flex-direction: column;
        align-items: stretch;
    }

    .case-search-panel__results,
    .case-search-panel__focus-note,
    .case-search-panel__show-all {
        width: 100%;
        justify-content: center;
    }

    .case-stage-preview-panel__grid {
        grid-template-columns: 1fr;
    }

    .metrics-grid--case-sidebar {
        grid-template-columns: 1fr;
    }

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

    .dashboard-quick-search {
        grid-template-columns: 1fr;
    }

    .employee-card {
        padding: 14px;
    }

    .employee-card-header strong {
        font-size: 0.94rem;
    }

    .employee-card-header p,
    .employee-profile-item__content p {
        font-size: 0.8rem;
    }

    .employee-profile-item__content strong,
    .employee-card-footer .table-meta {
        font-size: 0.72rem;
    }

    .employee-create-modal {
        width: min(100%, calc(100% - 14px));
        padding: 18px;
        border-radius: 18px;
    }

    .employee-form-section {
        padding: 10px;
        border-radius: 14px;
    }

    .search-global-form__row {
        grid-template-columns: 1fr;
    }

    .search-results-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .search-results-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .topbar-alert-strip {
        gap: 8px;
    }

    .topbar-alert-chip {
        min-height: 42px;
    }
}

@media (max-width: 980px) {
    .topbar {
        padding: 18px 16px;
        border-radius: 22px;
    }

    .topbar-main {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .topbar-copy {
        gap: 8px;
    }

    .topbar-side {
        display: none;
    }

    .topbar-alert-strip--desktop {
        display: grid;
    }

    .topbar-alert-strip--mobile {
        display: none;
    }

    .topbar h2 {
        font-size: clamp(1.25rem, 4.2vw, 1.7rem);
        line-height: 1.35;
    }

    .topbar p {
        line-height: 1.8;
        font-size: 0.88rem;
    }

    .topbar-alert-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        justify-content: stretch;
    }

    .topbar-alert-chip {
        width: 100%;
        justify-content: flex-start;
    }

    .topbar-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }

    .topbar-actions .button {
        min-width: 48px;
        min-height: 48px;
    }
}

@media (max-width: 640px) {
    .topbar {
        padding: 16px 14px;
        border-radius: 22px;
        gap: 14px;
    }

    .topbar-marquee {
        min-height: 48px;
        margin-bottom: 0;
        padding: 8px 10px;
        border-radius: 14px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
    }

    .topbar-marquee__item {
        font-size: 0.84rem;
        line-height: 1.7;
        white-space: normal;
        align-items: center;
        text-align: right;
    }

    .topbar-copy .eyebrow {
        font-size: 0.72rem;
    }

    .topbar-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 150px;
        align-items: start;
        gap: 12px;
    }

    .topbar-copy {
        gap: 10px;
        min-width: 0;
    }

    .topbar-side {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr) 148px;
        gap: 8px;
        align-items: start;
    }

    .topbar-alert-strip--desktop {
        display: none;
    }

    .topbar-alert-strip--mobile {
        display: flex;
        align-items: stretch;
    }

    .topbar h2 {
        font-size: 1.16rem;
        line-height: 1.45;
    }

    .topbar p {
        font-size: 0.82rem;
        line-height: 1.8;
        padding: 8px 10px;
        border-radius: 12px;
        background: rgba(255,255,255,0.05);
        width: fit-content;
        max-width: 100%;
    }

    .topbar-alert-strip--mobile {
        gap: 10px;
        margin-top: 0;
    }

    .topbar-alert-chip {
        padding: 10px 12px;
        border-radius: 16px;
        min-height: 0;
        align-items: flex-start;
    }

    .topbar-alert-chip__count {
        width: 28px;
        height: 28px;
        font-size: 0.76rem;
        border-radius: 10px;
    }

    .topbar-alert-chip__copy {
        gap: 2px;
    }

    .topbar-alert-chip__copy strong {
        font-size: 0.76rem;
    }

    .topbar-alert-chip__copy small {
        font-size: 0.67rem;
        line-height: 1.6;
    }

    .topbar-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(40px, 1fr));
        align-content: start;
        gap: 8px;
        padding-top: 0;
        width: 100%;
    }

    .topbar-actions .button {
        width: 100%;
        justify-content: center;
        border-radius: 14px;
        min-height: 44px;
    }

    .font-scale-controls {
        display: grid;
        grid-template-columns: repeat(3, minmax(40px, 1fr));
        width: 100%;
        margin-inline-start: 0;
    }

    .font-scale-indicator {
        min-width: 0;
        padding: 0 10px;
    }
}

@media (max-width: 520px) {
    .topbar {
        padding: 14px 12px;
        border-radius: 20px;
    }

    .topbar-main {
        grid-template-columns: 1fr;
    }

    .topbar-side {
        grid-template-columns: minmax(0, 1fr) 132px;
    }

    .topbar h2 {
        font-size: 1.02rem;
    }

    .topbar p {
        width: 100%;
        font-size: 0.78rem;
    }

    .topbar-alert-strip {
        grid-template-columns: 1fr;
    }

    .topbar-actions {
        grid-template-columns: repeat(3, 44px);
        justify-content: flex-start;
        gap: 8px;
    }

    .topbar-actions .button {
        min-height: 44px;
        padding-inline: 0;
        width: 44px;
        min-width: 44px;
    }

    .font-scale-controls {
        grid-template-columns: repeat(3, 44px);
    }

    .font-scale-indicator span {
        min-width: 0;
        font-size: 0.72rem;
        letter-spacing: 0.02em;
    }
}