.dstrc-portal-wrap {
    --dstrc-bg: #eef3f9;
    --dstrc-card: rgba(255, 255, 255, 0.78);
    --dstrc-border: rgba(126, 146, 180, 0.24);
    --dstrc-text: #243145;
    --dstrc-muted: #687488;
    --dstrc-accent: #566ee9;
    --dstrc-accent-soft: rgba(86, 110, 233, 0.12);
    --dstrc-success: #5ea66b;
    --dstrc-success-soft: rgba(94, 166, 107, 0.14);
    --dstrc-warning: #e0ad4f;
    --dstrc-warning-soft: rgba(224, 173, 79, 0.16);
    --dstrc-danger: #d2738a;
    --dstrc-danger-soft: rgba(210, 115, 138, 0.18);
    --dstrc-shadow: 14px 14px 34px rgba(29, 44, 72, 0.10), -14px -14px 32px rgba(255, 255, 255, 0.78);
    --dstrc-inset: inset 2px 2px 6px rgba(255, 255, 255, 0.68), inset -2px -2px 6px rgba(173, 189, 212, 0.24);
    color: var(--dstrc-text);
    background: transparent;
    max-width: 1240px;
    margin: 34px auto;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: inherit;
}

.dstrc-portal-wrap * {
    box-sizing: border-box;
}

.dstrc-hero-card,
.dstrc-portal-panel,
.dstrc-card,
.dstrc-stat-card,
.dstrc-highlight-card,
.dstrc-directory-card,
.dstrc-section-card {
    background: linear-gradient(145deg, rgba(253, 254, 255, 0.92), rgba(235, 241, 248, 0.88));
    border: 1px solid var(--dstrc-border);
    box-shadow: var(--dstrc-shadow);
}

.dstrc-hero-card,
.dstrc-portal-panel {
    border-radius: 28px;
}

.dstrc-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
    gap: 24px;
    padding: 34px;
}

.dstrc-hero-card-compact {
    grid-template-columns: 1fr;
}

.dstrc-hero-copy h1,
.dstrc-hero-copy h2,
.dstrc-user-meta h2 {
    margin: 0 0 10px;
    line-height: 1.18;
}

.dstrc-hero-copy p,
.dstrc-user-meta p,
.dstrc-card p,
.dstrc-section-card p,
.dstrc-highlight-card p {
    color: var(--dstrc-muted);
    line-height: 1.65;
}

.dstrc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--dstrc-accent);
    background: var(--dstrc-accent-soft);
    border-radius: 999px;
}

.dstrc-hero-actions,
.dstrc-portal-actions,
.dstrc-chip-row,
.dstrc-section-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dstrc-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 12px 18px;
    min-height: 46px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.dstrc-btn:hover {
    transform: translateY(-1px);
}

.dstrc-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #5c73ef 0%, #6f87ff 100%);
    box-shadow: 0 16px 28px rgba(92, 115, 239, 0.26);
}

.dstrc-btn-light {
    color: var(--dstrc-text);
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--dstrc-border);
    box-shadow: var(--dstrc-inset);
}

.dstrc-highlight-card,
.dstrc-card,
.dstrc-directory-card {
    border-radius: 22px;
    padding: 20px;
}

.dstrc-highlight-card ul,
.dstrc-meta-list {
    margin: 0;
    padding-left: 18px;
}

.dstrc-portal-panel {
    padding: 28px;
}

.dstrc-portal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.dstrc-user-card {
    display: flex;
    gap: 18px;
    align-items: center;
}

.dstrc-user-avatar,
.dstrc-directory-avatar {
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 12px 24px rgba(31, 47, 76, 0.12);
}

.dstrc-user-avatar {
    width: 92px;
    height: 92px;
}

.dstrc-directory-avatar {
    width: 64px;
    height: 64px;
}

.dstrc-grid {
    display: grid;
    gap: 20px;
}

.dstrc-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.dstrc-card h3,
.dstrc-card h2,
.dstrc-section-card strong {
    margin-top: 0;
}

.dstrc-meta-list li {
    margin-bottom: 8px;
}

.dstrc-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--dstrc-text);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--dstrc-border);
    box-shadow: var(--dstrc-inset);
}

.dstrc-chip-soft,
.dstrc-chip-row-soft .dstrc-chip {
    background: rgba(86, 110, 233, 0.08);
}

.dstrc-badge,
.dstrc-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.dstrc-badge-soft {
    color: var(--dstrc-accent);
    background: var(--dstrc-accent-soft);
}

.dstrc-status-ready {
    color: #2e6d41;
    background: var(--dstrc-success-soft);
}

.dstrc-status-soon {
    color: #8b6b1c;
    background: var(--dstrc-warning-soft);
}

.dstrc-status-off {
    color: #8d4455;
    background: var(--dstrc-danger-soft);
}

.dstrc-section-cards,
.dstrc-directory {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.dstrc-section-card,
.dstrc-directory-card {
    min-height: 150px;
}

.dstrc-directory-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.dstrc-muted {
    color: var(--dstrc-muted);
}

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

.dstrc-stat-card {
    border-radius: 20px;
    padding: 18px 20px;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dstrc-stat-card span {
    color: var(--dstrc-muted);
    font-size: 13px;
}

.dstrc-stat-card strong {
    font-size: 34px;
    line-height: 1.1;
    margin-top: 6px;
}

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

.dstrc-login-modal {
    position: fixed;
    inset: 0;
    z-index: 99998;
}

.dstrc-login-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 26, 44, 0.52);
    backdrop-filter: blur(4px);
}

.dstrc-login-dialog {
    position: relative;
    z-index: 1;
    width: min(100% - 32px, 520px);
    margin: 8vh auto 0;
    padding: 28px;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(237, 242, 248, 0.94));
    border: 1px solid var(--dstrc-border);
    box-shadow: 0 30px 60px rgba(11, 20, 38, 0.22);
}

.dstrc-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--dstrc-inset);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.dstrc-login-header {
    margin-bottom: 18px;
}

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

.dstrc-login-form label {
    display: grid;
    gap: 7px;
}

.dstrc-login-form input[type="text"],
.dstrc-login-form input[type="password"] {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--dstrc-inset);
    padding: 0 14px;
    font-size: 15px;
    color: var(--dstrc-text);
}

.dstrc-checkbox {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.dstrc-login-error {
    padding: 12px 14px;
    border-radius: 14px;
    color: #8b3447;
    background: rgba(222, 118, 144, 0.16);
}

body.dstrc-modal-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .dstrc-hero-card {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .dstrc-portal-panel {
        padding: 22px;
    }

    .dstrc-portal-header {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .dstrc-portal-wrap {
        margin: 22px auto;
        padding: 0 12px;
    }

    .dstrc-user-card {
        align-items: flex-start;
    }

    .dstrc-user-avatar {
        width: 72px;
        height: 72px;
    }

    .dstrc-login-dialog {
        padding: 24px 18px;
    }
}

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

.dstrc-regulation-card {
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(253, 254, 255, 0.92), rgba(235, 241, 248, 0.88));
    border: 1px solid var(--dstrc-border);
    box-shadow: var(--dstrc-shadow);
}

.dstrc-regulation-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dstrc-regulation-card h4 {
    margin: 0;
    line-height: 1.25;
}

.dstrc-regulation-card p {
    color: var(--dstrc-muted);
    margin-top: 0;
    margin-bottom: 16px;
}

.dstrc-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dstrc-prose-card {
    padding: 28px;
}

.dstrc-content-prose {
    font-size: 15px;
    line-height: 1.75;
    color: var(--dstrc-text);
}

.dstrc-content-prose > :first-child {
    margin-top: 0;
}

.dstrc-content-prose h1,
.dstrc-content-prose h2,
.dstrc-content-prose h3,
.dstrc-content-prose h4 {
    line-height: 1.25;
}

.dstrc-content-prose p,
.dstrc-content-prose li,
.dstrc-content-prose blockquote {
    color: var(--dstrc-text);
}

.dstrc-card-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.dstrc-front-toolbar {
    margin-bottom: 16px;
}

.dstrc-search-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--dstrc-muted);
}

.dstrc-search-input {
    width: min(100%, 420px);
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--dstrc-border);
    color: var(--dstrc-text);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: var(--dstrc-inset);
}

.dstrc-client-account-library {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.dstrc-client-account-card {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--dstrc-inset);
}

.dstrc-client-account-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.dstrc-client-account-head h4 {
    margin: 0;
}

.dstrc-account-field-list {
    display: grid;
    gap: 12px;
}

.dstrc-account-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
}

.dstrc-account-field-label {
    font-weight: 600;
}

.dstrc-account-field-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dstrc-inline-copy-btn,
.dstrc-inline-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: var(--dstrc-inset);
    color: var(--dstrc-text);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, color .18s ease;
}

button.dstrc-inline-copy-btn {
    font: inherit;
}

.dstrc-inline-copy-btn:hover,
.dstrc-inline-link:hover {
    transform: translateY(-1px);
}

.dstrc-inline-copy-btn.is-flashed {
    color: #1e6f43;
}

.dstrc-account-empty-search {
    margin-top: 14px;
    color: var(--dstrc-muted);
}

.dstrc-small-note {
    margin-top: 16px;
    font-size: 13px;
}

@media (max-width: 640px) {
    .dstrc-card-head-row,
    .dstrc-account-field-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.dstrc-front-notice {
    margin-bottom: 18px;
    border-radius: 18px;
    padding: 14px 16px;
    border: 1px solid var(--dstrc-border);
    box-shadow: var(--dstrc-inset);
}

.dstrc-front-notice p {
    margin: 0;
}

.dstrc-front-notice-success {
    background: var(--dstrc-success-soft);
    color: #2e6d41;
}

.dstrc-front-notice-error {
    background: var(--dstrc-danger-soft);
    color: #8d4455;
}

.dstrc-task-article {
    display: grid;
    gap: 18px;
}

.dstrc-task-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.dstrc-task-mini-stat {
    border-radius: 18px;
    padding: 14px 16px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--dstrc-inset);
}

.dstrc-task-mini-stat span {
    display: block;
    color: var(--dstrc-muted);
    font-size: 13px;
}

.dstrc-task-mini-stat strong {
    display: block;
    font-size: 24px;
    margin-top: 4px;
}

.dstrc-task-list {
    display: grid;
    gap: 16px;
}

.dstrc-task-card {
    border-radius: 22px;
    padding: 18px 18px 16px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--dstrc-inset);
}

.dstrc-task-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.dstrc-task-head h4 {
    margin: 0;
    font-size: 18px;
}

.dstrc-task-description {
    white-space: normal;
    line-height: 1.62;
    margin-bottom: 14px;
}

.dstrc-task-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.dstrc-task-meta-item {
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--dstrc-border);
    box-shadow: var(--dstrc-inset);
}

.dstrc-task-meta-item span {
    display: block;
    color: var(--dstrc-muted);
    font-size: 12px;
}

.dstrc-task-meta-item strong {
    display: block;
    margin-top: 4px;
}

.dstrc-task-inline-line {
    margin-bottom: 14px;
}

.dstrc-task-account-details {
    border-radius: 18px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: var(--dstrc-inset);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.dstrc-task-account-details summary {
    cursor: pointer;
    font-weight: 700;
}

.dstrc-task-account-grid {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.dstrc-task-account-row {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 10px 14px;
    align-items: start;
}

.dstrc-task-account-row > span {
    color: var(--dstrc-muted);
    font-size: 13px;
}

.dstrc-inline-copy-btn {
    border: 0;
    background: rgba(79, 110, 247, 0.08);
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--dstrc-text);
    box-shadow: var(--dstrc-inset);
}

.dstrc-task-status-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
}

.dstrc-task-status-form label {
    display: grid;
    gap: 6px;
}

.dstrc-task-status-form label span {
    color: var(--dstrc-muted);
    font-size: 13px;
}

.dstrc-task-status-form select {
    min-width: 180px;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.88);
    color: var(--dstrc-text);
    padding: 8px 12px;
    box-shadow: var(--dstrc-inset);
}

@media (max-width: 782px) {
    .dstrc-task-account-row {
        grid-template-columns: 1fr;
    }

    .dstrc-task-status-form {
        flex-direction: column;
        align-items: stretch;
    }

    .dstrc-task-status-form select,
    .dstrc-task-status-form .dstrc-btn {
        width: 100%;
    }
}


/* === v0.4.1 UX + login hotfix === */
.dstrc-grid-2,
.dstrc-section-cards,
.dstrc-directory,
.dstrc-client-account-library,
.dstrc-regulation-grid {
    grid-template-columns: minmax(0, 1fr);
}

.dstrc-section-card {
    min-height: auto;
    padding: 14px 12px;
    display: grid;
    gap: 10px;
}

.dstrc-section-card > * {
    margin: 0;
    padding-inline: 5px;
}

.dstrc-section-card p {
    line-height: 1.6;
}

.dstrc-task-description,
.dstrc-content-prose,
.dstrc-client-account-card,
.dstrc-regulation-card,
.dstrc-directory-card {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dstrc-portal-actions,
.dstrc-card-actions,
.dstrc-hero-actions,
.dstrc-account-field-actions,
.dstrc-task-status-form {
    row-gap: 10px;
}

.dstrc-task-inline-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.dstrc-quick-nav {
    position: fixed;
    top: 156px;
    right: max(18px, env(safe-area-inset-right));
    z-index: 50;
    display: grid;
    gap: 10px;
}

.dstrc-quick-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--dstrc-shadow);
    color: var(--dstrc-text);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dstrc-quick-nav-link:hover {
    transform: translateY(-1px);
}

.dstrc-quick-nav-link .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

#dstrc-front-profile,
#dstrc-front-regulations,
#dstrc-front-tasks,
#dstrc-front-sections,
#dstrc-front-overview,
#dstrc-front-links,
#dstrc-front-manager-regulations,
#dstrc-front-accounts,
#dstrc-front-team {
    scroll-margin-top: 110px;
}

.dstrc-worktype-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    border: 1px solid transparent;
}

.dstrc-worktype-link {
    color: inherit;
    text-decoration: none;
}

.dstrc-worktype-badge-1 {
    color: #335e80;
    background: rgba(74, 141, 191, 0.12);
    border-color: rgba(74, 141, 191, 0.18);
}

.dstrc-worktype-badge-2 {
    color: #6e5a22;
    background: rgba(220, 189, 84, 0.16);
    border-color: rgba(220, 189, 84, 0.22);
}

.dstrc-worktype-badge-3 {
    color: #2f6c4b;
    background: rgba(103, 185, 137, 0.14);
    border-color: rgba(103, 185, 137, 0.20);
}

.dstrc-worktype-badge-4 {
    color: #7e4d74;
    background: rgba(183, 126, 175, 0.14);
    border-color: rgba(183, 126, 175, 0.22);
}

.dstrc-worktype-badge-5 {
    color: #7d5537;
    background: rgba(216, 154, 102, 0.14);
    border-color: rgba(216, 154, 102, 0.20);
}

.dstrc-worktype-badge-6 {
    color: #8a4e61;
    background: rgba(219, 142, 164, 0.14);
    border-color: rgba(219, 142, 164, 0.20);
}

.dstrc-worktype-badge-7 {
    color: #355f67;
    background: rgba(118, 190, 201, 0.14);
    border-color: rgba(118, 190, 201, 0.20);
}

.dstrc-worktype-badge-8 {
    color: #5c5f2f;
    background: rgba(177, 198, 104, 0.14);
    border-color: rgba(177, 198, 104, 0.22);
}

@media (max-width: 1180px) {
    .dstrc-quick-nav {
        position: sticky;
        top: 12px;
        right: auto;
        grid-auto-flow: column;
        grid-template-columns: repeat(auto-fit, 46px);
        justify-content: flex-start;
        margin: 0 0 16px;
    }
}

@media (max-width: 640px) {
    .dstrc-quick-nav {
        gap: 8px;
    }

    .dstrc-quick-nav-link {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }
}


.dstrc-hero-actions .dstrc-btn,
.dstrc-portal-actions .dstrc-btn,
.dstrc-card-actions .dstrc-btn,
.dstrc-task-status-form .dstrc-btn,
.dstrc-account-field-actions .dstrc-inline-copy-btn,
.dstrc-account-field-actions .dstrc-inline-link {
    margin: 0;
}

/* v0.4.2 layout refinements */
.dstrc-portal-stack {
    display: grid;
    gap: 18px;
}

.dstrc-scroll-y-panel {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 8px;
}

.dstrc-scroll-y-panel-tasks {
    max-height: 540px;
}

.dstrc-scroll-y-panel-regulations {
    max-height: 420px;
}

.dstrc-collapsible-card {
    padding: 0;
    overflow: hidden;
}

.dstrc-collapsible-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
}

.dstrc-collapsible-summary::-webkit-details-marker {
    display: none;
}

.dstrc-collapsible-summary h3 {
    margin: 0 0 6px;
}

.dstrc-collapsible-content {
    padding: 0 20px 20px;
}

.dstrc-section-card {
    min-height: 138px;
}

.dstrc-section-card-inner {
    padding: 5px;
    display: grid;
    gap: 10px;
}

.dstrc-task-list {
    display: grid;
    gap: 16px;
}

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

.dstrc-card-head-row h3 {
    margin: 0 0 6px;
}

.dstrc-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.dstrc-btn-back {
    white-space: nowrap;
}

.dstrc-regulation-grid {
    display: grid;
    gap: 14px;
}

.dstrc-regulation-card {
    border-radius: 18px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--dstrc-border);
    box-shadow: var(--dstrc-inset);
}

.dstrc-regulation-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.dstrc-regulation-card h4 {
    margin: 0;
}

.dstrc-regulation-card h4 a {
    text-decoration: none;
}

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

.dstrc-resource-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--dstrc-border);
    box-shadow: var(--dstrc-inset);
}

.dstrc-resource-url {
    word-break: break-all;
    margin-top: 4px;
}

.dstrc-video-grid {
    display: grid;
    gap: 18px;
}

.dstrc-video-card {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--dstrc-border);
    box-shadow: var(--dstrc-inset);
}

.dstrc-video-card h4 {
    margin: 0 0 14px;
}

.dstrc-video-embed,
.dstrc-video-embed iframe,
.dstrc-video-embed video,
.dstrc-video-embed .wp-video,
.dstrc-video-embed .wp-video-shortcode {
    width: 100% !important;
    max-width: 100%;
}

.dstrc-video-embed iframe,
.dstrc-video-embed video {
    min-height: 280px;
    border: 0;
    border-radius: 16px;
    background: #000;
}

.dstrc-video-fallback-link {
    margin-top: 10px;
}

.dstrc-external-page-card .dstrc-card-head-row {
    margin-bottom: 0;
}

.dstrc-account-table-wrap {
    overflow: auto;
    border-radius: 18px;
    border: 1px solid var(--dstrc-border);
    box-shadow: var(--dstrc-inset);
}

.dstrc-account-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.78);
}

.dstrc-account-table th,
.dstrc-account-table td {
    padding: 14px 12px;
    vertical-align: top;
    border-bottom: 1px solid rgba(126, 146, 180, 0.18);
}

.dstrc-account-table th {
    text-align: left;
    font-size: 13px;
    color: var(--dstrc-muted);
    background: rgba(239, 244, 251, 0.9);
}

.dstrc-account-table-link-cell {
    display: grid;
    gap: 8px;
}

.dstrc-inline-copy-btn-compact {
    justify-content: flex-start;
}

.dstrc-front-toolbar {
    margin-bottom: 14px;
}

.dstrc-search-label {
    display: grid;
    gap: 8px;
}

.dstrc-search-input {
    width: min(100%, 420px);
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--dstrc-inset);
}

.dstrc-quick-nav {
    position: fixed;
    top: 160px;
    right: 18px;
    z-index: 50;
    display: grid;
    gap: 10px;
}

.dstrc-quick-nav-link {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--dstrc-text);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--dstrc-border);
    box-shadow: var(--dstrc-shadow);
}

@media (max-width: 1200px) {
    .dstrc-quick-nav {
        position: sticky;
        top: 12px;
        right: auto;
        grid-auto-flow: column;
        grid-template-columns: repeat(auto-fit, minmax(44px, 44px));
        width: max-content;
        margin: 0 0 14px auto;
    }
}

@media (max-width: 900px) {
    .dstrc-card-head-row,
    .dstrc-collapsible-summary,
    .dstrc-resource-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .dstrc-video-embed iframe,
    .dstrc-video-embed video {
        min-height: 220px;
    }
}

@media (max-width: 640px) {
    .dstrc-scroll-y-panel,
    .dstrc-scroll-y-panel-tasks,
    .dstrc-scroll-y-panel-regulations {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .dstrc-account-table {
        min-width: 620px;
    }
}


/* v0.5.0 task deadlines */
.dstrc-deadline-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid rgba(120, 125, 160, 0.18);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 12px 24px rgba(63, 72, 107, 0.08);
}

.dstrc-deadline-panel-compact {
    margin-top: 10px;
    padding: 12px;
}

.dstrc-deadline-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dstrc-deadline-dynamic-label {
    font-size: 13px;
    color: var(--dstrc-text-muted, #6b7280);
}

.dstrc-deadline-dynamic-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--dstrc-text, #1f2937);
}

.dstrc-deadline-meta-row {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 13px;
}

.dstrc-deadline-state {
    font-weight: 600;
}

.dstrc-deadline-progress-value {
    color: var(--dstrc-text-muted, #6b7280);
}

.dstrc-deadline-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(136, 144, 170, 0.12);
    overflow: hidden;
}

.dstrc-deadline-progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: rgba(72, 187, 120, 0.55);
    transition: width .35s ease;
}

.dstrc-deadline-alert {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(234, 88, 126, 0.14);
    color: #8b1d41;
    font-weight: 600;
}

.dstrc-deadline-alert[hidden] {
    display: none;
}

.dstrc-deadline-state-green {
    background: rgba(167, 243, 208, 0.22);
    border-color: rgba(52, 211, 153, 0.28);
}

.dstrc-deadline-state-green .dstrc-deadline-progress-bar {
    background: rgba(16, 185, 129, 0.58);
}

.dstrc-deadline-state-yellow {
    background: rgba(254, 240, 138, 0.22);
    border-color: rgba(250, 204, 21, 0.30);
}

.dstrc-deadline-state-yellow .dstrc-deadline-progress-bar {
    background: rgba(234, 179, 8, 0.55);
}

.dstrc-deadline-state-pink,
.dstrc-deadline-state-overdue {
    background: rgba(251, 207, 232, 0.24);
    border-color: rgba(236, 72, 153, 0.26);
}

.dstrc-deadline-state-pink .dstrc-deadline-progress-bar,
.dstrc-deadline-state-overdue .dstrc-deadline-progress-bar {
    background: rgba(219, 39, 119, 0.48);
}

.dstrc-deadline-state-completed {
    background: rgba(191, 219, 254, 0.20);
    border-color: rgba(96, 165, 250, 0.24);
}

.dstrc-task-completion-box {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(191, 219, 254, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.18);
}

.dstrc-task-completion-box span {
    font-size: 12px;
    color: var(--dstrc-text-muted, #6b7280);
}

.dstrc-task-completion-box strong {
    font-size: 15px;
}

.dstrc-task-completion-box small {
    color: var(--dstrc-text-muted, #6b7280);
}

.dstrc-task-completion-inline {
    display: flex;
    width: 100%;
    margin-top: 10px;
}

.dstrc-task-history-details {
    margin-top: 12px;
    border: 1px solid rgba(120, 125, 160, 0.14);
    border-radius: 14px;
    background: rgba(250, 250, 252, 0.72);
    overflow: hidden;
}

.dstrc-task-history-details summary {
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 600;
}

.dstrc-task-history-list {
    list-style: none;
    margin: 0;
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dstrc-task-history-item {
    display: grid;
    grid-template-columns: minmax(110px, 150px) 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(120, 125, 160, 0.10);
}

.dstrc-task-history-time {
    font-size: 12px;
    color: var(--dstrc-text-muted, #6b7280);
}

.dstrc-task-history-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dstrc-task-history-content span {
    line-height: 1.45;
}

.dstrc-task-mini-stats-manager {
    margin-top: 14px;
    margin-bottom: 14px;
}

.dstrc-scroll-y-panel-deadlines {
    max-height: 34rem;
}

.dstrc-manager-deadline-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.64);
    border: 1px solid rgba(120, 125, 160, 0.12);
}

.dstrc-manager-deadline-group + .dstrc-manager-deadline-group {
    margin-top: 14px;
}

.dstrc-manager-deadline-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dstrc-manager-deadline-group-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dstrc-manager-deadline-item {
    padding: 14px;
    border-radius: 16px;
    background: rgba(247, 248, 252, 0.85);
    border: 1px solid rgba(120, 125, 160, 0.12);
}

.dstrc-manager-deadline-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dstrc-deadline-extend-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

.dstrc-deadline-extend-actions form {
    margin: 0;
}

.dstrc-deadline-extend-label {
    font-size: 12px;
    color: var(--dstrc-text-muted, #6b7280);
    font-weight: 600;
}

.dstrc-deadline-extend-btn {
    min-height: 34px;
}

.dstrc-card-actions-compact {
    margin-top: 10px;
}

@media (max-width: 782px) {
    .dstrc-task-history-item {
        grid-template-columns: 1fr;
    }

    .dstrc-deadline-main,
    .dstrc-deadline-meta-row,
    .dstrc-manager-deadline-item-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Stage 5.1 — review flow, yearly stats and archives */
.dstrc-task-head-badges,
.dstrc-manager-deadline-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.dstrc-review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.dstrc-review-badge-pending {
    background: rgba(255, 233, 158, 0.32);
}

.dstrc-review-badge-rework {
    background: rgba(255, 202, 214, 0.34);
}

.dstrc-review-badge-accepted {
    background: rgba(186, 240, 203, 0.34);
}

.dstrc-review-status-box {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    display: grid;
    gap: 8px;
}

.dstrc-review-status-text,
.dstrc-review-status-meta {
    font-size: 13px;
    line-height: 1.5;
}

.dstrc-review-status-meta {
    color: var(--dstrc-text-muted, #6b7280);
}

.dstrc-review-actions-wrap {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.52);
    display: grid;
    gap: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dstrc-review-actions-head {
    font-weight: 700;
}

.dstrc-review-actions-row,
.dstrc-review-quick-days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dstrc-review-rework-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.dstrc-review-rework-form label {
    min-width: 220px;
    flex: 1 1 240px;
    display: grid;
    gap: 6px;
}

.dstrc-review-rework-form input[type="datetime-local"] {
    width: 100%;
}

.dstrc-review-quick-btn {
    white-space: nowrap;
}

.dstrc-badge-soft-ok {
    background: rgba(186, 240, 203, 0.34);
}

.dstrc-badge-soft-warn {
    background: rgba(255, 202, 214, 0.34);
}

.dstrc-archive-details,
.dstrc-archive-year-group,
.dstrc-archive-month-group,
.dstrc-manager-archive-employee-group {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.52);
    padding: 12px 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.dstrc-archive-details,
.dstrc-manager-archive-employee-group {
    margin-top: 14px;
}

.dstrc-archive-year-group + .dstrc-archive-year-group,
.dstrc-manager-archive-employee-group + .dstrc-manager-archive-employee-group {
    margin-top: 12px;
}

.dstrc-archive-month-group + .dstrc-archive-month-group {
    margin-top: 10px;
}

.dstrc-archive-details summary,
.dstrc-archive-year-group summary,
.dstrc-archive-month-group summary,
.dstrc-manager-archive-employee-group summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
}

.dstrc-archive-groups,
.dstrc-manager-archive-groups {
    display: grid;
    gap: 12px;
}

.dstrc-archive-task-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.dstrc-archive-task-card {
    border-radius: 16px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.7);
    display: grid;
    gap: 10px;
}

.dstrc-archive-task-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.dstrc-archive-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 13px;
    color: var(--dstrc-text-muted, #6b7280);
}

.dstrc-archive-task-foot {
    font-size: 12px;
}

.dstrc-manager-archive-employee-meta {
    margin: 8px 0 12px;
    font-size: 13px;
}

.dstrc-year-stats-table-wrap {
    max-height: 360px;
}

.dstrc-year-stats-table td,
.dstrc-year-stats-table th {
    vertical-align: middle;
}

/* Stage 6 — manager operating panel */
.dstrc-btn-danger {
    color: #8d4455;
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(210, 115, 138, 0.22);
    box-shadow: var(--dstrc-inset);
}

.dstrc-manager-report-section,
.dstrc-manager-workbench-section {
    display: block;
}

.dstrc-manager-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.dstrc-manager-report-card {
    border-radius: 22px;
    padding: 18px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.64);
    box-shadow: var(--dstrc-inset);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dstrc-manager-report-card.is-ok {
    background: linear-gradient(180deg, rgba(94, 166, 107, 0.10), rgba(255, 255, 255, 0.7));
}

.dstrc-manager-report-card.is-attention {
    background: linear-gradient(180deg, rgba(224, 173, 79, 0.12), rgba(255, 255, 255, 0.7));
}

.dstrc-manager-report-card.is-late {
    background: linear-gradient(180deg, rgba(210, 115, 138, 0.14), rgba(255, 255, 255, 0.72));
}

.dstrc-manager-report-head,
.dstrc-manager-workbench-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.dstrc-manager-report-user,
.dstrc-manager-workbench-user {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dstrc-manager-report-avatar,
.dstrc-manager-workbench-avatar {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 12px 22px rgba(31, 47, 76, 0.12);
}

.dstrc-manager-workbench-avatar {
    width: 80px;
    height: 80px;
}

.dstrc-manager-report-user strong,
.dstrc-manager-workbench-meta h4 {
    display: block;
    margin: 0 0 4px;
}

.dstrc-manager-workbench-meta h4 {
    font-size: 22px;
    line-height: 1.15;
}

.dstrc-manager-report-stats,
.dstrc-manager-workbench-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.dstrc-manager-report-stat,
.dstrc-manager-workbench-counter {
    min-height: 86px;
    border-radius: 18px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(126, 146, 180, 0.18);
    box-shadow: var(--dstrc-inset);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dstrc-manager-report-stat span,
.dstrc-manager-workbench-counter span {
    color: var(--dstrc-muted);
    font-size: 12px;
}

.dstrc-manager-report-stat strong,
.dstrc-manager-workbench-counter strong {
    margin-top: 6px;
    font-size: 24px;
    line-height: 1.1;
}

.dstrc-manager-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dstrc-manager-report-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(126, 146, 180, 0.18);
    box-shadow: var(--dstrc-inset);
    font-size: 12px;
}

.dstrc-manager-workbench-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dstrc-manager-workbench {
    border-radius: 24px;
    padding: 18px;
    border: 1px solid rgba(126, 146, 180, 0.22);
    background: rgba(255, 255, 255, 0.56);
    box-shadow: var(--dstrc-inset);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dstrc-manager-workbench-head {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(126, 146, 180, 0.12);
}

.dstrc-manager-details {
    border: 1px solid rgba(126, 146, 180, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--dstrc-inset);
}

.dstrc-manager-details summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 16px;
    font-weight: 700;
}

.dstrc-manager-details summary::-webkit-details-marker {
    display: none;
}

.dstrc-manager-details[open] summary {
    border-bottom: 1px solid rgba(126, 146, 180, 0.12);
}

.dstrc-manager-inline-form {
    padding: 16px;
}

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

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

.dstrc-front-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dstrc-front-form-field span {
    font-size: 13px;
    font-weight: 700;
    color: var(--dstrc-muted);
}

.dstrc-front-form-field input,
.dstrc-front-form-field select,
.dstrc-front-form-field textarea {
    width: 100%;
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid rgba(126, 146, 180, 0.20);
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--dstrc-text);
    box-shadow: var(--dstrc-inset);
    font: inherit;
}

.dstrc-front-form-field textarea {
    min-height: 150px;
    resize: vertical;
}

.dstrc-front-form-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dstrc-front-form-note,
.dstrc-front-small-note {
    margin-top: 10px;
    line-height: 1.65;
}

.dstrc-scroll-y-panel-manager {
    max-height: 880px;
    overflow: auto;
    padding-right: 6px;
}

.dstrc-manager-task-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dstrc-manager-task-card {
    background: rgba(255, 255, 255, 0.74);
}

.dstrc-manager-task-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 14px;
}

.dstrc-task-status-form-manager {
    margin: 0;
}

.dstrc-manager-delete-form {
    margin: 0;
}

.dstrc-manager-accounts-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 18px;
}

.dstrc-manager-accounts-form-card,
.dstrc-manager-accounts-library-card {
    border-radius: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(126, 146, 180, 0.18);
    box-shadow: var(--dstrc-inset);
}

.dstrc-manager-accounts-form-card h4,
.dstrc-manager-accounts-library-card h4 {
    margin-top: 0;
    margin-bottom: 8px;
}

@media (max-width: 980px) {
    .dstrc-manager-accounts-layout,
    .dstrc-manager-task-actions,
    .dstrc-manager-report-head,
    .dstrc-manager-workbench-head {
        grid-template-columns: 1fr;
        display: grid;
    }

    .dstrc-manager-task-actions {
        align-items: stretch;
    }
}

@media (max-width: 720px) {
    .dstrc-manager-report-grid {
        grid-template-columns: 1fr;
    }

    .dstrc-manager-report-stats,
    .dstrc-manager-workbench-counters,
    .dstrc-front-form-grid-2 {
        grid-template-columns: 1fr;
    }

    .dstrc-manager-inline-form,
    .dstrc-manager-accounts-form-card,
    .dstrc-manager-accounts-library-card,
    .dstrc-manager-workbench {
        padding: 14px;
    }
}

/* v0.6.1 — manager portal spacing, yearly table and employee border colors */
.dstrc-portal-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dstrc-portal-header,
.dstrc-front-notice {
    margin-bottom: 0;
}

.dstrc-portal-stack {
    gap: 24px;
}

#dstrc-front-profile,
#dstrc-front-regulations,
#dstrc-front-tasks,
#dstrc-front-sections,
#dstrc-front-overview,
#dstrc-front-links,
#dstrc-front-manager-regulations,
#dstrc-front-accounts,
#dstrc-front-team,
#dstrc-front-year-stats,
#dstrc-front-deadlines,
#dstrc-front-task-control,
#dstrc-front-archive,
#dstrc-front-team-reports,
#dstrc-front-accounts-workspace,
#dstrc-front-visual-settings {
    scroll-margin-top: 118px;
}

.dstrc-card .dstrc-task-mini-stats,
.dstrc-card .dstrc-table-wrap,
.dstrc-card .dstrc-scroll-y-panel,
.dstrc-card .dstrc-manager-report-grid,
.dstrc-card .dstrc-manager-accounts-layout,
.dstrc-card .dstrc-manager-archive-groups,
.dstrc-card .dstrc-visual-settings-table-wrap,
.dstrc-card .dstrc-account-table-wrap,
.dstrc-card .dstrc-meta-list,
.dstrc-card .dstrc-chip-row,
.dstrc-card .dstrc-section-cards {
    margin-top: 14px;
}

.dstrc-year-stats-table-wrap {
    margin-top: 18px;
    max-height: 380px;
    border-radius: 20px;
    border: 1px solid rgba(126, 146, 180, 0.18);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--dstrc-inset);
    overflow: auto;
}

.dstrc-year-stats-table {
    width: 100%;
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

.dstrc-year-stats-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(239, 244, 251, 0.96);
}

.dstrc-year-stats-table td,
.dstrc-year-stats-table th {
    padding: 14px 16px;
    vertical-align: middle;
    border-right: 1px solid rgba(126, 146, 180, 0.18);
    border-bottom: 1px solid rgba(126, 146, 180, 0.18);
}

.dstrc-year-stats-table td:last-child,
.dstrc-year-stats-table th:last-child {
    border-right: 0;
}

.dstrc-year-stats-table tbody tr:last-child td {
    border-bottom: 0;
}

.dstrc-manager-report-card,
.dstrc-manager-workbench,
.dstrc-manager-archive-employee-group {
    --dstrc-employee-border-color: rgba(126, 146, 180, 0.22);
    --dstrc-employee-border-width: 1px;
    border: var(--dstrc-employee-border-width) solid var(--dstrc-employee-border-color);
}

.dstrc-manager-workbench-head {
    display: grid;
    grid-template-columns: minmax(280px, 1.12fr) minmax(480px, 0.88fr);
    gap: 18px;
    align-items: start;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(126, 146, 180, 0.12);
}

.dstrc-manager-workbench-counters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-self: stretch;
}

.dstrc-manager-workbench-counter {
    min-height: 82px;
}

.dstrc-scroll-y-panel-team-workbench {
    margin-top: 18px;
    max-height: clamp(760px, 78vh, 1120px);
    overflow-y: auto;
    padding-right: 8px;
    scroll-snap-type: y proximity;
}

.dstrc-manager-workbench-list {
    gap: 20px;
}

.dstrc-manager-workbench {
    scroll-snap-align: start;
}

.dstrc-manager-visual-form {
    display: grid;
    gap: 16px;
}

.dstrc-visual-settings-table-wrap {
    overflow: auto;
    border-radius: 20px;
    border: 1px solid rgba(126, 146, 180, 0.18);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--dstrc-inset);
}

.dstrc-visual-settings-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
}

.dstrc-visual-settings-table th,
.dstrc-visual-settings-table td {
    padding: 14px 16px;
    vertical-align: middle;
    border-right: 1px solid rgba(126, 146, 180, 0.16);
    border-bottom: 1px solid rgba(126, 146, 180, 0.16);
}

.dstrc-visual-settings-table th:last-child,
.dstrc-visual-settings-table td:last-child {
    border-right: 0;
}

.dstrc-visual-settings-table tbody tr:last-child td {
    border-bottom: 0;
}

.dstrc-visual-settings-table thead th {
    background: rgba(239, 244, 251, 0.96);
    text-align: left;
    font-size: 13px;
    color: var(--dstrc-muted);
}

.dstrc-visual-settings-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dstrc-color-input {
    width: 76px;
    min-width: 76px;
    min-height: 46px;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(126, 146, 180, 0.18);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--dstrc-inset);
    cursor: pointer;
}

.dstrc-number-input {
    width: 96px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(126, 146, 180, 0.18);
    background: rgba(255, 255, 255, 0.82);
    color: var(--dstrc-text);
    box-shadow: var(--dstrc-inset);
    font: inherit;
}

.dstrc-border-preview {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    font-weight: 600;
    line-height: 1.3;
}

@media (max-width: 1180px) {
    .dstrc-manager-workbench-head {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .dstrc-manager-workbench-counters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dstrc-scroll-y-panel-team-workbench {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

@media (max-width: 520px) {
    .dstrc-manager-workbench-counters {
        grid-template-columns: 1fr;
    }
}

.dstrc-scroll-y-panel-manager {
    max-height: 34rem;
}

/* v0.7.0 — portal personalization, themes and unified UX */
.dstrc-portal-wrap {
    --dstrc-font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    --dstrc-font-size: 15px;
    font-family: var(--dstrc-font-family);
    line-height: 1.65;
}

.dstrc-portal-wrap.dstrc-font-ibm {
    --dstrc-font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

.dstrc-portal-wrap.dstrc-font-tahoma {
    --dstrc-font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}

.dstrc-portal-wrap.dstrc-font-roboto {
    --dstrc-font-family: Roboto, "Segoe UI", Arial, sans-serif;
}

.dstrc-portal-wrap.dstrc-font-times {
    --dstrc-font-family: "Times New Roman", Times, serif;
}

.dstrc-portal-wrap.dstrc-font-arial {
    --dstrc-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

[data-dstrc-portal-root],
[data-dstrc-portal-root] button,
[data-dstrc-portal-root] input,
[data-dstrc-portal-root] select,
[data-dstrc-portal-root] textarea {
    font-family: var(--dstrc-font-family);
}

.dstrc-portal-wrap p,
.dstrc-portal-wrap li,
.dstrc-portal-wrap label,
.dstrc-portal-wrap input,
.dstrc-portal-wrap select,
.dstrc-portal-wrap textarea,
.dstrc-portal-wrap button,
.dstrc-portal-wrap table,
.dstrc-portal-wrap .dstrc-muted,
.dstrc-portal-wrap .dstrc-inline-muted,
.dstrc-portal-wrap .dstrc-account-field-label,
.dstrc-portal-wrap .dstrc-inline-link {
    font-size: var(--dstrc-font-size);
}

.dstrc-portal-wrap .dstrc-chip,
.dstrc-portal-wrap .dstrc-badge,
.dstrc-portal-wrap .dstrc-status-pill,
.dstrc-portal-wrap .dstrc-eyebrow,
.dstrc-portal-wrap .dstrc-range-value,
.dstrc-portal-wrap .dstrc-task-type-badge,
.dstrc-portal-wrap .dstrc-quick-nav-link,
.dstrc-portal-wrap .dstrc-inline-copy-btn {
    font-size: calc(var(--dstrc-font-size) - 2px);
}

.dstrc-portal-wrap h1 {
    font-size: calc(var(--dstrc-font-size) + 18px);
}

.dstrc-portal-wrap h2 {
    font-size: calc(var(--dstrc-font-size) + 10px);
}

.dstrc-portal-wrap h3,
.dstrc-portal-wrap .dstrc-card-head-row h3 {
    font-size: calc(var(--dstrc-font-size) + 4px);
}

.dstrc-portal-wrap h4 {
    font-size: calc(var(--dstrc-font-size) + 1px);
}

.dstrc-portal-wrap table,
.dstrc-portal-wrap th,
.dstrc-portal-wrap td,
.dstrc-portal-wrap .dstrc-card p,
.dstrc-portal-wrap .dstrc-user-meta p,
.dstrc-portal-wrap .dstrc-highlight-card p,
.dstrc-portal-wrap .dstrc-section-card p,
.dstrc-portal-wrap .dstrc-content-prose,
.dstrc-portal-wrap .dstrc-resource-url {
    line-height: 1.68;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dstrc-hero-card,
.dstrc-portal-panel,
.dstrc-card,
.dstrc-highlight-card,
.dstrc-stat-card,
.dstrc-directory-card,
.dstrc-section-card,
.dstrc-login-dialog,
.dstrc-front-form-field,
.dstrc-pref-theme-group,
.dstrc-pref-theme-option {
    position: relative;
    overflow: hidden;
}

.dstrc-hero-card::before,
.dstrc-portal-panel::before,
.dstrc-card::before,
.dstrc-highlight-card::before,
.dstrc-login-dialog::before {
    content: '';
    position: absolute;
    inset: auto -40px -40px auto;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle at 35% 35%, rgba(210, 115, 138, 0.12), transparent 56%), radial-gradient(circle at 65% 60%, rgba(86, 110, 233, 0.08), transparent 62%);
    pointer-events: none;
}

.dstrc-hero-card::after,
.dstrc-portal-panel::after {
    content: '☁';
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 28px;
    line-height: 1;
    color: var(--dstrc-accent);
    opacity: 0.06;
    pointer-events: none;
}

.dstrc-portal-wrap.dstrc-theme-dark {
    --dstrc-bg: #111721;
    --dstrc-card: rgba(24, 31, 44, 0.92);
    --dstrc-border: rgba(141, 162, 202, 0.24);
    --dstrc-text: #edf3ff;
    --dstrc-muted: #b5bfd6;
    --dstrc-accent: #91a8ff;
    --dstrc-accent-soft: rgba(145, 168, 255, 0.18);
    --dstrc-success: #88d09a;
    --dstrc-success-soft: rgba(91, 166, 108, 0.24);
    --dstrc-warning: #edc36f;
    --dstrc-warning-soft: rgba(224, 173, 79, 0.24);
    --dstrc-danger: #e095ab;
    --dstrc-danger-soft: rgba(210, 115, 138, 0.24);
    --dstrc-shadow: 16px 16px 36px rgba(0, 0, 0, 0.34), -12px -12px 24px rgba(40, 50, 70, 0.42);
    --dstrc-inset: inset 2px 2px 7px rgba(255, 255, 255, 0.03), inset -2px -2px 7px rgba(0, 0, 0, 0.24);
}

.dstrc-theme-dark .dstrc-hero-card,
.dstrc-theme-dark .dstrc-portal-panel,
.dstrc-theme-dark .dstrc-card,
.dstrc-theme-dark .dstrc-stat-card,
.dstrc-theme-dark .dstrc-highlight-card,
.dstrc-theme-dark .dstrc-directory-card,
.dstrc-theme-dark .dstrc-section-card,
.dstrc-theme-dark .dstrc-login-dialog,
.dstrc-theme-dark .dstrc-front-form-field,
.dstrc-theme-dark .dstrc-pref-theme-group,
.dstrc-theme-dark .dstrc-pref-theme-option {
    background: linear-gradient(145deg, rgba(29, 37, 52, 0.96), rgba(17, 23, 34, 0.98));
}

.dstrc-theme-dark .dstrc-btn-light,
.dstrc-theme-dark .dstrc-inline-copy-btn,
.dstrc-theme-dark .dstrc-inline-link,
.dstrc-theme-dark .dstrc-task-inline-form select,
.dstrc-theme-dark .dstrc-search-input,
.dstrc-theme-dark .dstrc-front-form-field input,
.dstrc-theme-dark .dstrc-front-form-field select,
.dstrc-theme-dark .dstrc-front-form-field textarea,
.dstrc-theme-dark .dstrc-login-dialog input {
    color: var(--dstrc-text);
    background: rgba(16, 23, 34, 0.88);
    border-color: var(--dstrc-border);
    box-shadow: var(--dstrc-inset);
}

.dstrc-theme-dark .dstrc-chip,
.dstrc-theme-dark .dstrc-section-card,
.dstrc-theme-dark .dstrc-directory-card,
.dstrc-theme-dark .dstrc-quick-nav-link,
.dstrc-theme-dark .dstrc-account-field-row,
.dstrc-theme-dark .dstrc-resource-row,
.dstrc-theme-dark .dstrc-task-item,
.dstrc-theme-dark .dstrc-task-inline-form,
.dstrc-theme-dark .dstrc-visual-settings-table th,
.dstrc-theme-dark .dstrc-visual-settings-table td {
    background-color: rgba(18, 26, 38, 0.76);
}

.dstrc-theme-dark .dstrc-login-backdrop {
    background: rgba(6, 10, 16, 0.7);
}

.dstrc-theme-dark .dstrc-quick-nav-link .dashicons,
.dstrc-theme-dark a,
.dstrc-theme-dark .dstrc-inline-link {
    color: #d7e2ff;
}

.dstrc-theme-dark .dstrc-video-fallback-link a,
.dstrc-theme-dark .dstrc-resource-url,
.dstrc-theme-dark .dstrc-modal-close {
    color: var(--dstrc-muted);
}

.dstrc-theme-dark .dstrc-hero-card::before,
.dstrc-theme-dark .dstrc-portal-panel::before,
.dstrc-theme-dark .dstrc-card::before,
.dstrc-theme-dark .dstrc-highlight-card::before,
.dstrc-theme-dark .dstrc-login-dialog::before {
    background: radial-gradient(circle at 35% 35%, rgba(224, 149, 171, 0.18), transparent 56%), radial-gradient(circle at 65% 60%, rgba(145, 168, 255, 0.12), transparent 62%);
}

.dstrc-personalization-panel {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--dstrc-border);
    display: grid;
    gap: 16px;
}

.dstrc-portal-pref-chip-row {
    gap: 10px;
}

.dstrc-portal-prefs-form {
    display: grid;
    gap: 18px;
}

.dstrc-portal-prefs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    align-items: start;
}

.dstrc-pref-theme-group {
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--dstrc-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.52);
    box-shadow: var(--dstrc-inset);
}

.dstrc-pref-theme-group legend {
    padding: 0 8px;
    font-weight: 700;
}

.dstrc-pref-theme-options {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.dstrc-pref-theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--dstrc-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: var(--dstrc-inset);
}

.dstrc-pref-theme-option span {
    line-height: 1.45;
}

.dstrc-pref-select-field,
.dstrc-pref-range-field {
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.52);
    box-shadow: var(--dstrc-inset);
}

.dstrc-pref-select-field select,
.dstrc-pref-range-field input[type="range"] {
    width: 100%;
}

.dstrc-pref-range-field input[type="range"] {
    margin: 6px 0 0;
}

.dstrc-range-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--dstrc-accent);
    background: var(--dstrc-accent-soft);
}

.dstrc-pref-range-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.dstrc-pref-chat-volume-field .dstrc-btn {
    min-height: 38px;
}

.dstrc-theme-dark .dstrc-pref-chat-volume-field .dstrc-btn {
    border-color: rgba(248, 250, 252, 0.72);
}

.dstrc-btn-sm {
    min-height: 38px;
    padding: 9px 14px;
    font-size: 14px;
}

.dstrc-theme-dark .dstrc-pref-theme-group,
.dstrc-theme-dark .dstrc-pref-theme-option,
.dstrc-theme-dark .dstrc-pref-select-field,
.dstrc-theme-dark .dstrc-pref-range-field {
    background: rgba(17, 24, 35, 0.88);
}

.dstrc-portal-wrap table {
    border-collapse: separate;
    border-spacing: 0;
}

.dstrc-portal-wrap th,
.dstrc-portal-wrap td {
    vertical-align: top;
}

.dstrc-portal-wrap .dstrc-user-avatar,
.dstrc-portal-wrap .dstrc-directory-avatar,
.dstrc-portal-wrap .dstrc-manager-workbench-avatar,
.dstrc-portal-wrap .dstrc-manager-report-avatar,
.dstrc-portal-wrap .dstrc-user-thumb {
    border: 1px solid rgba(255, 255, 255, 0.44);
}

.dstrc-theme-dark .dstrc-user-avatar,
.dstrc-theme-dark .dstrc-directory-avatar,
.dstrc-theme-dark .dstrc-manager-workbench-avatar,
.dstrc-theme-dark .dstrc-manager-report-avatar,
.dstrc-theme-dark .dstrc-user-thumb {
    border-color: rgba(170, 189, 224, 0.2);
}

.dstrc-portal-wrap .dstrc-card > * + *,
.dstrc-portal-wrap .dstrc-portal-panel > * + *,
.dstrc-portal-wrap .dstrc-highlight-card > * + * {
    margin-top: 0;
}

@media (max-width: 782px) {
    .dstrc-portal-prefs-grid {
        grid-template-columns: 1fr;
    }

    .dstrc-hero-card::after,
    .dstrc-portal-panel::after {
        font-size: 22px;
        top: 12px;
        right: 14px;
    }
}


/* === v0.7.1 portal backgrounds, account avatars, dark theme and spacing hotfix === */

.dstrc-portal-wrap {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 80px);
    --dstrc-portal-background-image: none;
}

.dstrc-portal-wrap::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(238, 243, 249, 0.88) 0%, rgba(238, 243, 249, 0.78) 100%),
        var(--dstrc-portal-background-image);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.dstrc-portal-wrap.dstrc-theme-dark::before {
    background:
        linear-gradient(180deg, rgba(12, 18, 28, 0.88) 0%, rgba(12, 18, 28, 0.82) 100%),
        var(--dstrc-portal-background-image);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.dstrc-portal-wrap .dstrc-card > * + *,
.dstrc-portal-wrap .dstrc-portal-panel > * + *,
.dstrc-portal-wrap .dstrc-highlight-card > * + * {
    margin-top: 14px;
}

.dstrc-portal-stack > * + *,
.dstrc-portal-panel > * + *,
.dstrc-card > .dstrc-card-actions,
.dstrc-card > .dstrc-scroll-y-panel,
.dstrc-card > .dstrc-account-table-wrap,
.dstrc-card > .dstrc-manager-accounts-layout {
    margin-top: 16px;
}

.dstrc-task-card > * + *,
.dstrc-manager-task-card > * + * {
    margin-top: 16px;
}

.dstrc-task-inline-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 18px;
}

.dstrc-deadline-extend-actions {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(126, 146, 180, 0.14);
}

.dstrc-manager-details {
    margin-top: 18px;
}

.dstrc-manager-details .dstrc-front-form-grid {
    margin-top: 0;
}

.dstrc-front-form-field-full {
    grid-column: 1 / -1;
}

.dstrc-team-background-form .dstrc-front-form-grid,
.dstrc-portal-prefs-grid,
.dstrc-manager-inline-form .dstrc-front-form-grid {
    align-items: start;
}

.dstrc-account-title-wrap,
.dstrc-account-title-admin {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dstrc-account-title-stack,
.dstrc-account-title-admin-meta {
    display: grid;
    gap: 8px;
}

.dstrc-account-avatar,
.dstrc-account-avatar-admin,
.dstrc-task-account-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow: var(--dstrc-shadow);
    background: rgba(255, 255, 255, 0.86);
}

.dstrc-account-avatar-admin {
    width: 52px;
    height: 52px;
    min-width: 52px;
}

.dstrc-account-avatar-placeholder,
.dstrc-account-avatar-admin-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dstrc-muted);
    font-size: 20px;
}

.dstrc-task-account-row-avatar {
    align-items: center;
}

.dstrc-task-account-description,
.dstrc-account-description,
.dstrc-account-description-admin {
    white-space: pre-line;
    line-height: 1.65;
    color: var(--dstrc-text);
}

.dstrc-account-table {
    min-width: 980px;
}

.dstrc-account-table th,
.dstrc-account-table td {
    vertical-align: top;
}

.dstrc-account-table th:last-child,
.dstrc-account-table td:last-child {
    min-width: 220px;
}

.dstrc-employee-task-article {
    border-width: var(--dstrc-employee-border-width, 3px);
    border-style: solid;
    border-color: var(--dstrc-employee-border-color, rgba(126, 146, 180, 0.24));
    box-shadow:
        0 0 0 1px rgba(126, 146, 180, 0.12),
        var(--dstrc-shadow);
}

.dstrc-theme-dark {
    color-scheme: dark;
}

.dstrc-theme-dark .dstrc-hero-card,
.dstrc-theme-dark .dstrc-portal-panel,
.dstrc-theme-dark .dstrc-card,
.dstrc-theme-dark .dstrc-stat-card,
.dstrc-theme-dark .dstrc-highlight-card,
.dstrc-theme-dark .dstrc-directory-card,
.dstrc-theme-dark .dstrc-section-card,
.dstrc-theme-dark .dstrc-login-dialog,
.dstrc-theme-dark .dstrc-front-form-field,
.dstrc-theme-dark .dstrc-pref-theme-group,
.dstrc-theme-dark .dstrc-pref-theme-option,
.dstrc-theme-dark .dstrc-task-account-details,
.dstrc-theme-dark .dstrc-manager-details,
.dstrc-theme-dark .dstrc-account-table,
.dstrc-theme-dark .dstrc-account-table th,
.dstrc-theme-dark .dstrc-account-table td,
.dstrc-theme-dark .dstrc-scroll-y-panel {
    background: linear-gradient(145deg, rgba(27, 35, 49, 0.97), rgba(15, 20, 30, 0.98));
}

.dstrc-theme-dark .dstrc-account-table th {
    background: rgba(34, 44, 62, 0.94);
    color: #dbe5fb;
}

.dstrc-theme-dark .dstrc-btn-light,
.dstrc-theme-dark .dstrc-inline-copy-btn,
.dstrc-theme-dark .dstrc-inline-link,
.dstrc-theme-dark .dstrc-task-inline-form select,
.dstrc-theme-dark .dstrc-search-input,
.dstrc-theme-dark .dstrc-front-form-field input,
.dstrc-theme-dark .dstrc-front-form-field select,
.dstrc-theme-dark .dstrc-front-form-field textarea,
.dstrc-theme-dark .dstrc-login-dialog input,
.dstrc-theme-dark .dstrc-task-status-form select,
.dstrc-theme-dark .dstrc-manager-details select,
.dstrc-theme-dark .dstrc-manager-details input,
.dstrc-theme-dark .dstrc-manager-details textarea,
.dstrc-theme-dark input[type="datetime-local"],
.dstrc-theme-dark input[type="date"],
.dstrc-theme-dark input[type="time"],
.dstrc-theme-dark input[type="url"],
.dstrc-theme-dark input[type="text"],
.dstrc-theme-dark textarea,
.dstrc-theme-dark select {
    color: rgba(244, 248, 255, 0.96);
    background: rgba(19, 27, 39, 0.94);
    border: 1px solid rgba(192, 210, 244, 0.30);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05), inset -2px -2px 7px rgba(0, 0, 0, 0.30), 0 10px 22px rgba(0, 0, 0, 0.18);
}

.dstrc-theme-dark input::placeholder,
.dstrc-theme-dark textarea::placeholder {
    color: rgba(191, 203, 228, 0.72);
}

.dstrc-theme-dark .dstrc-task-meta-item,
.dstrc-theme-dark .dstrc-task-mini-stat,
.dstrc-theme-dark .dstrc-stat-card,
.dstrc-theme-dark .dstrc-account-field-row,
.dstrc-theme-dark .dstrc-resource-row,
.dstrc-theme-dark .dstrc-task-item,
.dstrc-theme-dark .dstrc-task-inline-form,
.dstrc-theme-dark .dstrc-visual-settings-table th,
.dstrc-theme-dark .dstrc-visual-settings-table td,
.dstrc-theme-dark .dstrc-manager-team-group,
.dstrc-theme-dark .dstrc-manager-report-card,
.dstrc-theme-dark .dstrc-manager-deadline-item {
    background: rgba(21, 29, 42, 0.82);
    border-color: rgba(196, 212, 244, 0.14);
}

.dstrc-theme-dark .dstrc-task-meta-item strong,
.dstrc-theme-dark .dstrc-task-mini-stat strong,
.dstrc-theme-dark .dstrc-stat-card strong,
.dstrc-theme-dark .dstrc-account-description,
.dstrc-theme-dark .dstrc-account-description-admin,
.dstrc-theme-dark .dstrc-task-account-description,
.dstrc-theme-dark .dstrc-account-table a,
.dstrc-theme-dark .dstrc-inline-copy-btn,
.dstrc-theme-dark .dstrc-front-form-field span,
.dstrc-theme-dark .dstrc-meta-list strong,
.dstrc-theme-dark .dstrc-task-account-row > span {
    color: rgba(244, 248, 255, 0.94);
}

.dstrc-theme-dark .dstrc-muted,
.dstrc-theme-dark .dstrc-inline-muted,
.dstrc-theme-dark .dstrc-card p,
.dstrc-theme-dark .dstrc-section-card p,
.dstrc-theme-dark .dstrc-user-meta p {
    color: rgba(196, 208, 232, 0.82);
}

.dstrc-theme-dark .dstrc-account-avatar,
.dstrc-theme-dark .dstrc-account-avatar-admin,
.dstrc-theme-dark .dstrc-task-account-avatar {
    border-color: rgba(196, 212, 244, 0.24);
    background: rgba(19, 27, 39, 0.94);
}

.dstrc-theme-dark .dstrc-inline-copy-btn:hover,
.dstrc-theme-dark .dstrc-btn-light:hover {
    border-color: rgba(210, 222, 250, 0.36);
}

.dstrc-theme-dark input[type="date"]::-webkit-calendar-picker-indicator,
.dstrc-theme-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dstrc-theme-dark input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.2);
}

@media (max-width: 782px) {
    .dstrc-account-table {
        min-width: 720px;
    }

    .dstrc-task-inline-line {
        align-items: stretch;
    }
}

#dstrc-front-appearance,
#dstrc-front-backgrounds {
    scroll-margin-top: 118px;
}


/* v0.7.2 — media picker, dark theme contrast and anchor stability hotfix */
.dstrc-anchor-spacer {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    scroll-margin-top: 118px;
}

.dstrc-card,
.dstrc-portal-panel,
.dstrc-manager-workbench,
.dstrc-manager-details,
.dstrc-task-card,
.dstrc-archive-details,
.dstrc-archive-year-group,
.dstrc-archive-month-group,
.dstrc-manager-archive-employee-group,
.dstrc-review-actions-wrap,
.dstrc-review-status-box,
.dstrc-task-history-details,
.dstrc-account-table-wrap,
.dstrc-year-stats-table-wrap,
.dstrc-visual-settings-table-wrap {
    overflow: visible;
}

.dstrc-media-picker {
    display: grid;
    gap: 12px;
    width: 100%;
}

.dstrc-media-picker-preview-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 220px);
    height: 132px;
    border-radius: 18px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--dstrc-inset);
    overflow: hidden;
}

.dstrc-media-picker-background .dstrc-media-picker-preview-wrap {
    width: min(100%, 320px);
    height: 160px;
}

.dstrc-media-picker-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dstrc-media-picker-preview.is-empty {
    opacity: 0;
}

.dstrc-media-picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dstrc-media-picker-field > .dstrc-media-picker {
    margin-top: 2px;
}

.dstrc-task-inline-line .dstrc-worktype-badge,
.dstrc-task-inline-line .dstrc-task-type-badge,
.dstrc-task-inline-line .dstrc-badge,
.dstrc-task-inline-line .dstrc-status-pill {
    margin-top: 2px;
}

.dstrc-theme-dark {
    --dstrc-card: rgba(18, 24, 30, 0.94);
    --dstrc-border: rgba(238, 246, 240, 0.38);
    --dstrc-text: #f4f8f6;
    --dstrc-muted: #d3ddd6;
    --dstrc-accent: #9fd8a5;
    --dstrc-accent-soft: rgba(48, 106, 58, 0.34);
    --dstrc-success: #8fd59b;
    --dstrc-success-soft: rgba(57, 114, 69, 0.32);
    --dstrc-warning: #f0cf7b;
    --dstrc-warning-soft: rgba(126, 100, 28, 0.34);
    --dstrc-danger: #f0a6bb;
    --dstrc-danger-soft: rgba(116, 42, 62, 0.34);
    --dstrc-shadow: 18px 18px 38px rgba(0, 0, 0, 0.36), -10px -10px 22px rgba(55, 78, 62, 0.12);
    --dstrc-inset: inset 1px 1px 0 rgba(255, 255, 255, 0.06), inset -2px -2px 8px rgba(0, 0, 0, 0.34);
}

.dstrc-theme-dark .dstrc-hero-card,
.dstrc-theme-dark .dstrc-portal-panel,
.dstrc-theme-dark .dstrc-card,
.dstrc-theme-dark .dstrc-stat-card,
.dstrc-theme-dark .dstrc-highlight-card,
.dstrc-theme-dark .dstrc-directory-card,
.dstrc-theme-dark .dstrc-section-card,
.dstrc-theme-dark .dstrc-login-dialog,
.dstrc-theme-dark .dstrc-regulation-card,
.dstrc-theme-dark .dstrc-resource-row,
.dstrc-theme-dark .dstrc-video-card,
.dstrc-theme-dark .dstrc-task-card,
.dstrc-theme-dark .dstrc-task-meta-item,
.dstrc-theme-dark .dstrc-task-mini-stat,
.dstrc-theme-dark .dstrc-task-account-details,
.dstrc-theme-dark .dstrc-task-history-details,
.dstrc-theme-dark .dstrc-task-history-item,
.dstrc-theme-dark .dstrc-review-actions-wrap,
.dstrc-theme-dark .dstrc-review-status-box,
.dstrc-theme-dark .dstrc-task-completion-box,
.dstrc-theme-dark .dstrc-archive-details,
.dstrc-theme-dark .dstrc-archive-year-group,
.dstrc-theme-dark .dstrc-archive-month-group,
.dstrc-theme-dark .dstrc-archive-task-card,
.dstrc-theme-dark .dstrc-manager-archive-employee-group,
.dstrc-theme-dark .dstrc-manager-report-card,
.dstrc-theme-dark .dstrc-manager-workbench,
.dstrc-theme-dark .dstrc-manager-workbench-counter,
.dstrc-theme-dark .dstrc-manager-report-stat,
.dstrc-theme-dark .dstrc-manager-details,
.dstrc-theme-dark .dstrc-manager-accounts-form-card,
.dstrc-theme-dark .dstrc-manager-accounts-library-card,
.dstrc-theme-dark .dstrc-manager-deadline-group,
.dstrc-theme-dark .dstrc-manager-deadline-item,
.dstrc-theme-dark .dstrc-deadline-panel,
.dstrc-theme-dark .dstrc-account-table-wrap,
.dstrc-theme-dark .dstrc-year-stats-table-wrap,
.dstrc-theme-dark .dstrc-visual-settings-table-wrap,
.dstrc-theme-dark .dstrc-border-preview,
.dstrc-theme-dark .dstrc-media-picker-preview-wrap,
.dstrc-theme-dark .dstrc-pref-theme-group,
.dstrc-theme-dark .dstrc-pref-theme-option,
.dstrc-theme-dark .dstrc-pref-select-field,
.dstrc-theme-dark .dstrc-pref-range-field,
.dstrc-theme-dark .dstrc-client-account-card {
    background: linear-gradient(145deg, rgba(25, 32, 38, 0.96), rgba(14, 19, 24, 0.98));
    border-color: rgba(238, 246, 240, 0.34);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05), inset -2px -2px 8px rgba(0, 0, 0, 0.34), 0 16px 32px rgba(0, 0, 0, 0.22);
}

.dstrc-theme-dark .dstrc-account-table,
.dstrc-theme-dark .dstrc-year-stats-table,
.dstrc-theme-dark .dstrc-visual-settings-table {
    background: rgba(14, 20, 25, 0.96);
}

.dstrc-theme-dark .dstrc-account-table th,
.dstrc-theme-dark .dstrc-year-stats-table thead th,
.dstrc-theme-dark .dstrc-visual-settings-table thead th {
    background: rgba(33, 46, 38, 0.94);
    color: #f4f8f6;
}

.dstrc-theme-dark .dstrc-account-table td,
.dstrc-theme-dark .dstrc-account-table th,
.dstrc-theme-dark .dstrc-year-stats-table td,
.dstrc-theme-dark .dstrc-year-stats-table th,
.dstrc-theme-dark .dstrc-visual-settings-table td,
.dstrc-theme-dark .dstrc-visual-settings-table th {
    border-color: rgba(238, 246, 240, 0.12);
}

.dstrc-theme-dark .dstrc-btn,
.dstrc-theme-dark .dstrc-inline-copy-btn,
.dstrc-theme-dark .dstrc-inline-link,
.dstrc-theme-dark .dstrc-quick-nav-link,
.dstrc-theme-dark .dstrc-search-input,
.dstrc-theme-dark .dstrc-login-form input[type="text"],
.dstrc-theme-dark .dstrc-login-form input[type="password"],
.dstrc-theme-dark .dstrc-front-form-field input,
.dstrc-theme-dark .dstrc-front-form-field select,
.dstrc-theme-dark .dstrc-front-form-field textarea,
.dstrc-theme-dark .dstrc-task-status-form select,
.dstrc-theme-dark .dstrc-review-rework-form input[type="datetime-local"],
.dstrc-theme-dark input[type="datetime-local"],
.dstrc-theme-dark input[type="date"],
.dstrc-theme-dark input[type="time"],
.dstrc-theme-dark input[type="url"],
.dstrc-theme-dark input[type="text"],
.dstrc-theme-dark select,
.dstrc-theme-dark textarea,
.dstrc-theme-dark .dstrc-color-input,
.dstrc-theme-dark .dstrc-number-input {
    color: #f4f8f6 !important;
    background: rgba(22, 31, 24, 0.96) !important;
    border: 1px solid rgba(244, 248, 246, 0.42) !important;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05), inset -2px -2px 8px rgba(0, 0, 0, 0.36), 0 12px 24px rgba(0, 0, 0, 0.18) !important;
}

.dstrc-theme-dark .dstrc-btn-light,
.dstrc-theme-dark .dstrc-inline-copy-btn,
.dstrc-theme-dark .dstrc-inline-link,
.dstrc-theme-dark .dstrc-quick-nav-link {
    color: #f4f8f6 !important;
}

.dstrc-theme-dark .dstrc-btn-primary {
    color: #f4f8f6;
    border: 1px solid rgba(244, 248, 246, 0.50) !important;
    background: linear-gradient(135deg, rgba(44, 102, 54, 0.98), rgba(71, 132, 83, 0.96));
    box-shadow: 0 16px 28px rgba(11, 31, 16, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dstrc-theme-dark .dstrc-btn-danger {
    color: #ffe8ee !important;
    border: 1px solid rgba(255, 230, 238, 0.46) !important;
    background: linear-gradient(135deg, rgba(98, 32, 49, 0.96), rgba(133, 48, 69, 0.94)) !important;
}

.dstrc-theme-dark .dstrc-front-form-field span,
.dstrc-theme-dark .dstrc-account-field-label,
.dstrc-theme-dark .dstrc-task-meta-item span,
.dstrc-theme-dark .dstrc-task-mini-stat span,
.dstrc-theme-dark .dstrc-stat-card span,
.dstrc-theme-dark .dstrc-task-account-row > span,
.dstrc-theme-dark .dstrc-review-status-meta,
.dstrc-theme-dark .dstrc-archive-task-meta,
.dstrc-theme-dark .dstrc-manager-archive-employee-meta,
.dstrc-theme-dark .dstrc-task-history-time,
.dstrc-theme-dark .dstrc-deadline-progress-value,
.dstrc-theme-dark .dstrc-deadline-dynamic-label,
.dstrc-theme-dark .dstrc-muted,
.dstrc-theme-dark .dstrc-inline-muted,
.dstrc-theme-dark .dstrc-card p,
.dstrc-theme-dark .dstrc-user-meta p,
.dstrc-theme-dark .dstrc-section-card p,
.dstrc-theme-dark .dstrc-highlight-card p {
    color: rgba(221, 232, 225, 0.86) !important;
}

.dstrc-theme-dark,
.dstrc-theme-dark h1,
.dstrc-theme-dark h2,
.dstrc-theme-dark h3,
.dstrc-theme-dark h4,
.dstrc-theme-dark strong,
.dstrc-theme-dark b,
.dstrc-theme-dark td,
.dstrc-theme-dark th,
.dstrc-theme-dark label,
.dstrc-theme-dark summary,
.dstrc-theme-dark .dstrc-content-prose,
.dstrc-theme-dark .dstrc-content-prose p,
.dstrc-theme-dark .dstrc-content-prose li,
.dstrc-theme-dark .dstrc-content-prose blockquote,
.dstrc-theme-dark .dstrc-review-status-text,
.dstrc-theme-dark .dstrc-task-meta-item strong,
.dstrc-theme-dark .dstrc-task-mini-stat strong,
.dstrc-theme-dark .dstrc-stat-card strong,
.dstrc-theme-dark .dstrc-manager-report-stat strong,
.dstrc-theme-dark .dstrc-manager-workbench-counter strong,
.dstrc-theme-dark .dstrc-account-description,
.dstrc-theme-dark .dstrc-account-description-admin,
.dstrc-theme-dark .dstrc-task-account-description,
.dstrc-theme-dark .dstrc-resource-url,
.dstrc-theme-dark .dstrc-account-table a,
.dstrc-theme-dark .dstrc-video-fallback-link a {
    color: #f4f8f6 !important;
}

.dstrc-theme-dark .dstrc-chip,
.dstrc-theme-dark .dstrc-manager-report-meta span,
.dstrc-theme-dark .dstrc-badge,
.dstrc-theme-dark .dstrc-status-pill,
.dstrc-theme-dark .dstrc-worktype-badge,
.dstrc-theme-dark .dstrc-review-badge,
.dstrc-theme-dark .dstrc-task-account-row,
.dstrc-theme-dark .dstrc-task-meta-item,
.dstrc-theme-dark .dstrc-task-mini-stat,
.dstrc-theme-dark .dstrc-manager-workbench-counter,
.dstrc-theme-dark .dstrc-manager-report-stat,
.dstrc-theme-dark .dstrc-review-status-box,
.dstrc-theme-dark .dstrc-task-history-item,
.dstrc-theme-dark .dstrc-task-completion-box,
.dstrc-theme-dark .dstrc-account-field-row {
    border-color: rgba(244, 248, 246, 0.16) !important;
}

.dstrc-theme-dark input::placeholder,
.dstrc-theme-dark textarea::placeholder {
    color: rgba(214, 224, 218, 0.62);
}

.dstrc-theme-dark input[type="date"]::-webkit-calendar-picker-indicator,
.dstrc-theme-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dstrc-theme-dark input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.4);
}

.dstrc-theme-dark .dstrc-account-avatar,
.dstrc-theme-dark .dstrc-account-avatar-admin,
.dstrc-theme-dark .dstrc-task-account-avatar,
.dstrc-theme-dark .dstrc-user-avatar,
.dstrc-theme-dark .dstrc-manager-report-avatar,
.dstrc-theme-dark .dstrc-manager-workbench-avatar {
    border-color: rgba(244, 248, 246, 0.22);
    background: rgba(22, 31, 24, 0.96);
}

.dstrc-theme-dark .dstrc-account-table-wrap,
.dstrc-theme-dark .dstrc-year-stats-table-wrap,
.dstrc-theme-dark .dstrc-visual-settings-table-wrap,
.dstrc-theme-dark .dstrc-scroll-y-panel,
.dstrc-theme-dark .dstrc-scroll-y-panel-team-workbench,
.dstrc-theme-dark .dstrc-scroll-y-panel-manager,
.dstrc-theme-dark .dstrc-scroll-y-panel-regulations,
.dstrc-theme-dark .dstrc-scroll-y-panel-tasks {
    scrollbar-color: rgba(159, 216, 165, 0.65) rgba(8, 13, 10, 0.42);
}

@media (max-width: 782px) {
    .dstrc-media-picker-preview-wrap,
    .dstrc-media-picker-background .dstrc-media-picker-preview-wrap {
        width: 100%;
        max-width: 100%;
    }
}

/* Chat MVP */
.dstrc-chat-widget {
    position: fixed;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    z-index: 120;
}

.dstrc-chat-toggle {
    appearance: none;
    width: 68px;
    height: 56px;
    border-radius: 22px;
    border: 1px solid rgba(188, 61, 79, 0.42);
    background: linear-gradient(145deg, rgba(255, 241, 244, 0.97), rgba(253, 215, 223, 0.93));
    box-shadow: 0 16px 34px rgba(154, 32, 53, 0.26), inset 1px 1px 0 rgba(255,255,255,.7);
    color: #b62744;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.dstrc-chat-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(154, 32, 53, 0.3), inset 1px 1px 0 rgba(255,255,255,.74);
}

.dstrc-akatsuki-cloud {
    width: 40px;
    height: 26px;
    display: block;
}

.dstrc-chat-panel {
    position: fixed;
    right: max(22px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(236,243,250,.96));
    border: 1px solid rgba(120, 142, 174, 0.26);
    border-radius: 28px;
    box-shadow: 0 24px 54px rgba(27, 43, 70, 0.24), inset 1px 1px 0 rgba(255,255,255,.84);
    padding: 16px;
    color: var(--dstrc-text);
}

.dstrc-chat-size-sm {
    width: min(340px, calc(100vw - 24px));
    height: min(430px, calc(100vh - 120px));
}

.dstrc-chat-size-md {
    width: min(430px, calc(100vw - 24px));
    height: min(620px, calc(100vh - 120px));
}

.dstrc-chat-size-lg {
    width: min(940px, calc(100vw - 32px));
    height: min(82vh, 760px);
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
}

.dstrc-chat-header,
.dstrc-chat-form-toolbar,
.dstrc-chat-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dstrc-chat-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dstrc-chat-header-title strong,
.dstrc-chat-header-subtitle {
    display: block;
}

.dstrc-chat-header-subtitle {
    color: var(--dstrc-muted);
    font-size: 12px;
    line-height: 1.4;
}

.dstrc-chat-header-cloud {
    display: inline-flex;
    width: 44px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(188, 61, 79, 0.12);
    color: #ba2c49;
}

.dstrc-chat-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dstrc-chat-size-btn,
.dstrc-chat-close,
.dstrc-chat-file-trigger {
    appearance: none;
    border: 1px solid var(--dstrc-border);
    background: rgba(255,255,255,.72);
    color: var(--dstrc-text);
    box-shadow: var(--dstrc-inset);
    cursor: pointer;
}

.dstrc-chat-size-btn,
.dstrc-chat-close {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.dstrc-chat-size-btn.is-active {
    background: rgba(86, 110, 233, 0.12);
    color: var(--dstrc-accent);
}

.dstrc-chat-close {
    font-size: 22px;
    line-height: 1;
}

.dstrc-chat-contacts-bar {
    border-radius: 18px;
    border: 1px solid rgba(120,142,174,.18);
    background: rgba(247, 250, 253, .78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    padding: 10px;
}

.dstrc-chat-contacts-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.dstrc-chat-contact {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 170px;
    padding: 9px 10px;
    border-radius: 16px;
    border: 1px solid rgba(120,142,174,.22);
    background: rgba(255,255,255,.88);
    color: var(--dstrc-text);
    cursor: pointer;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

.dstrc-chat-contact.is-active {
    border-color: rgba(86,110,233,.28);
    background: rgba(86,110,233,.11);
}

.dstrc-chat-contact img {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    object-fit: cover;
    flex: 0 0 auto;
}

.dstrc-chat-contact-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dstrc-chat-contact-meta strong,
.dstrc-chat-contact-meta small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dstrc-chat-contact-meta small {
    color: var(--dstrc-muted);
}

.dstrc-chat-messages-wrap {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 20px;
    border: 1px solid rgba(120,142,174,.2);
    background: rgba(243, 247, 252, .86);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.7);
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.dstrc-chat-loading,
.dstrc-chat-empty-state {
    color: var(--dstrc-muted);
    font-size: 13px;
    line-height: 1.5;
}

.dstrc-chat-loading.is-error {
    color: #c14f6a;
}

.dstrc-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
}

.dstrc-chat-message {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 88%;
}

.dstrc-chat-message-outgoing {
    align-self: flex-end;
    text-align: right;
}

.dstrc-chat-message-incoming {
    align-self: flex-start;
}

.dstrc-chat-bubble {
    padding: 12px 14px;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(33, 47, 74, 0.08);
    border: 1px solid rgba(120,142,174,.16);
}

.dstrc-chat-message-outgoing .dstrc-chat-bubble {
    background: rgba(183, 163, 235, 0.26);
}

.dstrc-chat-message-incoming .dstrc-chat-bubble {
    background: rgba(160, 231, 224, 0.28);
}

.dstrc-chat-message-text {
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.dstrc-chat-message-attachment {
    margin-top: 8px;
}

.dstrc-chat-message-attachment a {
    text-decoration: none;
    font-weight: 600;
}

.dstrc-chat-message-meta {
    font-size: 11px;
    color: var(--dstrc-muted);
}

.dstrc-chat-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 2px;
}

.dstrc-chat-file-trigger {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.dstrc-chat-file-trigger input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.dstrc-chat-file-trigger .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.dstrc-chat-file-meta {
    color: var(--dstrc-muted);
    font-size: 12px;
    line-height: 1.4;
    text-align: right;
    flex: 1 1 auto;
}

.dstrc-chat-textarea {
    width: 100%;
    min-height: 86px;
    resize: vertical;
    border-radius: 18px;
    border: 1px solid rgba(120,142,174,.22);
    padding: 12px 14px;
    background: rgba(255,255,255,.88);
    color: var(--dstrc-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
}

.dstrc-chat-send-btn {
    min-width: 138px;
}

.dstrc-theme-dark .dstrc-chat-toggle {
    background: linear-gradient(145deg, rgba(64, 15, 24, .98), rgba(101, 18, 35, .95));
    border-color: rgba(255,255,255,.62);
    box-shadow: 0 18px 38px rgba(0,0,0,.42), inset 1px 1px 0 rgba(255,255,255,.12);
    color: #ffd7df;
}

.dstrc-theme-dark .dstrc-chat-panel {
    background: linear-gradient(145deg, rgba(16, 19, 18, .98), rgba(22, 28, 25, .97));
    border-color: rgba(240, 247, 244, 0.52);
    box-shadow: 0 28px 54px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.06);
    color: #f4f8f6;
}

.dstrc-theme-dark .dstrc-chat-header-subtitle,
.dstrc-theme-dark .dstrc-chat-contact-meta small,
.dstrc-theme-dark .dstrc-chat-file-meta,
.dstrc-theme-dark .dstrc-chat-message-meta,
.dstrc-theme-dark .dstrc-chat-loading,
.dstrc-theme-dark .dstrc-chat-empty-state {
    color: rgba(240, 246, 243, 0.78);
}

.dstrc-theme-dark .dstrc-chat-header-cloud {
    background: rgba(31, 106, 78, 0.36);
    color: #d6fff0;
}

.dstrc-theme-dark .dstrc-chat-contacts-bar,
.dstrc-theme-dark .dstrc-chat-messages-wrap,
.dstrc-theme-dark .dstrc-chat-contact,
.dstrc-theme-dark .dstrc-chat-size-btn,
.dstrc-theme-dark .dstrc-chat-close,
.dstrc-theme-dark .dstrc-chat-file-trigger,
.dstrc-theme-dark .dstrc-chat-textarea {
    background: rgba(29, 35, 33, 0.96);
    color: #f6fbf8;
    border-color: rgba(247, 252, 249, 0.62);
    box-shadow: inset 0 0 0 1px rgba(34, 99, 74, 0.22), 0 8px 18px rgba(0,0,0,.18);
}

.dstrc-theme-dark .dstrc-chat-contact.is-active,
.dstrc-theme-dark .dstrc-chat-size-btn.is-active {
    background: rgba(31, 106, 78, 0.46);
    color: #ffffff;
    border-color: rgba(214, 255, 240, 0.82);
}

.dstrc-theme-dark .dstrc-chat-message-outgoing .dstrc-chat-bubble {
    background: rgba(96, 71, 140, 0.72);
    border-color: rgba(255,255,255,.22);
    color: #ffffff;
}

.dstrc-theme-dark .dstrc-chat-message-incoming .dstrc-chat-bubble {
    background: rgba(41, 112, 106, 0.78);
    border-color: rgba(255,255,255,.24);
    color: #ffffff;
}

.dstrc-theme-dark .dstrc-chat-message-attachment a,
.dstrc-theme-dark .dstrc-chat-message-meta,
.dstrc-theme-dark .dstrc-chat-contact,
.dstrc-theme-dark .dstrc-chat-toggle,
.dstrc-theme-dark .dstrc-chat-textarea,
.dstrc-theme-dark .dstrc-chat-size-btn,
.dstrc-theme-dark .dstrc-chat-close,
.dstrc-theme-dark .dstrc-chat-file-trigger {
    color: #ffffff;
}

.dstrc-theme-dark .dstrc-chat-textarea::placeholder {
    color: rgba(255,255,255,.66);
}

@media (max-width: 920px) {
    .dstrc-chat-widget {
        top: auto;
        bottom: max(18px, env(safe-area-inset-bottom));
    }

    .dstrc-chat-size-lg {
        width: calc(100vw - 18px);
        height: calc(100vh - 18px);
    }
}

@media (max-width: 640px) {
    .dstrc-chat-panel,
    .dstrc-chat-size-sm,
    .dstrc-chat-size-md,
    .dstrc-chat-size-lg {
        width: calc(100vw - 14px);
        height: min(78vh, calc(100vh - 32px));
        right: 7px;
        left: 7px;
        bottom: 7px;
        top: auto;
        transform: none;
    }

    .dstrc-chat-toggle {
        width: 62px;
        height: 52px;
        border-radius: 20px;
    }
}

/* === Chat hotfix v0.8.1 === */
.dstrc-chat-panel[hidden] {
    display: none !important;
}

.dstrc-chat-widget {
    z-index: 1200;
}

.dstrc-chat-toggle {
    position: relative;
    width: 58px;
    height: 48px;
    border-radius: 18px;
}

.dstrc-chat-toggle-badge,
.dstrc-chat-contact-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #d92c41;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(139, 17, 33, 0.34), inset 0 1px 0 rgba(255,255,255,.28);
}

.dstrc-chat-toggle-badge {
    top: -5px;
    right: -6px;
}

.dstrc-chat-panel {
    padding: 12px;
    border-radius: 24px;
}

.dstrc-chat-size-md {
    width: min(620px, calc(100vw - 28px));
    height: min(72vh, 720px);
}

.dstrc-chat-size-lg {
    width: min(1040px, calc(100vw - 36px));
    height: min(86vh, 820px);
}

.dstrc-chat-layout {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 62px;
    gap: 10px;
    height: 100%;
    min-height: 0;
    align-items: stretch;
}

.dstrc-chat-side,
.dstrc-chat-main {
    min-height: 0;
}

.dstrc-chat-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dstrc-chat-side-left {
    align-items: stretch;
}

.dstrc-chat-side-brand {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 7px;
    border-radius: 16px;
    border: 1px solid rgba(120,142,174,.22);
    background: rgba(248, 251, 253, .82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
}

.dstrc-chat-header-cloud {
    width: 36px;
    height: 28px;
    border-radius: 12px;
    align-self: center;
}

.dstrc-chat-side-brand strong {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
}

.dstrc-chat-header-subtitle {
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}

.dstrc-chat-side-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dstrc-chat-size-btn,
.dstrc-chat-close,
.dstrc-chat-clear {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dstrc-chat-clear .dashicons {
    width: 15px;
    height: 15px;
    font-size: 15px;
}

.dstrc-chat-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dstrc-chat-messages-wrap {
    padding: 10px;
    border-radius: 18px;
    flex: 1 1 auto;
    min-height: 0;
}

.dstrc-chat-messages {
    gap: 8px;
    padding-right: 2px;
}

.dstrc-chat-message {
    gap: 4px;
    max-width: 92%;
}

.dstrc-chat-bubble {
    padding: 8px 10px;
    border-radius: 14px;
}

.dstrc-chat-message-text {
    font-size: 12px;
    line-height: 1.45;
}

.dstrc-chat-message-meta,
.dstrc-chat-loading,
.dstrc-chat-empty-state {
    font-size: 10px;
    line-height: 1.4;
}

.dstrc-chat-form {
    gap: 7px;
}

.dstrc-chat-textarea {
    min-height: 68px;
    max-height: 180px;
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.4;
}

.dstrc-chat-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dstrc-chat-file-meta {
    font-size: 10px;
    line-height: 1.35;
    text-align: left;
}

.dstrc-chat-form-buttons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.dstrc-chat-send-btn {
    min-width: 100px;
    min-height: 36px;
    padding: 0 14px;
}

.dstrc-chat-file-trigger {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.dstrc-chat-file-trigger .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.dstrc-chat-side-right {
    padding-left: 2px;
}

.dstrc-chat-contacts-scroll {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

.dstrc-chat-contact {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 48px;
    min-width: 48px;
    padding: 6px 4px;
    border-radius: 14px;
}

.dstrc-chat-contact-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dstrc-chat-contact img {
    width: 28px;
    height: 28px;
    border-radius: 11px;
}

.dstrc-chat-contact-badge {
    top: -4px;
    right: -6px;
}

.dstrc-chat-contact-meta {
    gap: 1px;
    width: 100%;
    align-items: center;
    text-align: center;
}

.dstrc-chat-contact-meta strong,
.dstrc-chat-contact-meta small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

.dstrc-chat-contact-meta strong {
    font-size: 9px;
    line-height: 1.15;
}

.dstrc-chat-contact-meta small {
    font-size: 8px;
    line-height: 1.1;
}

.dstrc-chat-contact.is-active {
    transform: translateX(-1px);
}

.dstrc-theme-dark .dstrc-chat-toggle {
    background: linear-gradient(145deg, rgba(64, 15, 24, .98), rgba(105, 18, 35, .96));
    border-color: rgba(255,255,255,.82);
    box-shadow: 0 18px 40px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.14);
    color: #fff;
}

.dstrc-theme-dark .dstrc-chat-panel {
    background: linear-gradient(180deg, rgba(10, 13, 12, .99), rgba(14, 19, 17, .98));
    border-color: rgba(244, 250, 246, .76);
    box-shadow: 0 28px 64px rgba(0,0,0,.62), inset 0 0 0 1px rgba(39, 118, 82, .34);
    color: #fff;
}

.dstrc-theme-dark .dstrc-chat-side-brand,
.dstrc-theme-dark .dstrc-chat-messages-wrap,
.dstrc-theme-dark .dstrc-chat-contact,
.dstrc-theme-dark .dstrc-chat-size-btn,
.dstrc-theme-dark .dstrc-chat-close,
.dstrc-theme-dark .dstrc-chat-clear,
.dstrc-theme-dark .dstrc-chat-file-trigger,
.dstrc-theme-dark .dstrc-chat-textarea {
    background: rgba(23, 28, 26, .98);
    color: #fff;
    border-color: rgba(247, 252, 249, .84);
    box-shadow: inset 0 0 0 1px rgba(35, 126, 87, .42), 0 10px 24px rgba(0,0,0,.24);
}

.dstrc-theme-dark .dstrc-chat-header-cloud {
    background: rgba(28, 112, 75, .72);
    border: 1px solid rgba(228, 255, 243, .76);
    color: #fff;
}

.dstrc-theme-dark .dstrc-chat-header-subtitle,
.dstrc-theme-dark .dstrc-chat-contact-meta small,
.dstrc-theme-dark .dstrc-chat-file-meta,
.dstrc-theme-dark .dstrc-chat-message-meta,
.dstrc-theme-dark .dstrc-chat-loading,
.dstrc-theme-dark .dstrc-chat-empty-state {
    color: rgba(255,255,255,.86);
}

.dstrc-theme-dark .dstrc-chat-contact.is-active,
.dstrc-theme-dark .dstrc-chat-size-btn.is-active {
    background: rgba(28, 112, 75, .78);
    color: #fff;
    border-color: rgba(245, 255, 249, .96);
}

.dstrc-theme-dark .dstrc-chat-message-outgoing .dstrc-chat-bubble {
    background: rgba(98, 76, 144, .9);
    border-color: rgba(255,255,255,.4);
    color: #fff;
}

.dstrc-theme-dark .dstrc-chat-message-incoming .dstrc-chat-bubble {
    background: rgba(31, 120, 110, .92);
    border-color: rgba(255,255,255,.4);
    color: #fff;
}

.dstrc-theme-dark .dstrc-chat-message-attachment a,
.dstrc-theme-dark .dstrc-chat-textarea,
.dstrc-theme-dark .dstrc-chat-size-btn,
.dstrc-theme-dark .dstrc-chat-close,
.dstrc-theme-dark .dstrc-chat-clear,
.dstrc-theme-dark .dstrc-chat-contact,
.dstrc-theme-dark .dstrc-chat-file-trigger {
    color: #fff;
}

.dstrc-theme-dark .dstrc-chat-textarea::placeholder {
    color: rgba(255,255,255,.72);
}

@media (max-width: 960px) {
    .dstrc-chat-size-md,
    .dstrc-chat-size-lg {
        width: calc(100vw - 18px);
        height: min(82vh, calc(100vh - 18px));
        right: 9px;
        left: 9px;
        bottom: 9px;
        top: auto;
        transform: none;
    }

    .dstrc-chat-layout {
        grid-template-columns: 58px minmax(0, 1fr) 54px;
        gap: 7px;
    }

    .dstrc-chat-contact {
        width: 42px;
        min-width: 42px;
        padding: 5px 3px;
    }

    .dstrc-chat-contact img {
        width: 24px;
        height: 24px;
        border-radius: 9px;
    }

    .dstrc-chat-size-btn,
    .dstrc-chat-close,
    .dstrc-chat-clear {
        width: 30px;
        height: 30px;
    }
}

/* === Chat advanced v0.9.0 === */
.dstrc-chat-panel {
    --dstrc-chat-font-size: 12px;
}

.dstrc-chat-bubble-wrap {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.dstrc-chat-message-outgoing .dstrc-chat-bubble-wrap {
    justify-content: flex-end;
}

.dstrc-chat-message-edit {
    appearance: none;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 9px;
    border: 1px solid rgba(120,142,174,.26);
    background: rgba(255,255,255,.82);
    color: var(--dstrc-text);
    box-shadow: var(--dstrc-inset);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 2px;
}

.dstrc-chat-message-edit .dashicons {
    width: 13px;
    height: 13px;
    font-size: 13px;
}

.dstrc-chat-message-text,
.dstrc-chat-textarea {
    font-size: var(--dstrc-chat-font-size);
}

.dstrc-chat-message-meta,
.dstrc-chat-file-meta,
.dstrc-chat-edit-label {
    font-size: calc(var(--dstrc-chat-font-size) - 2px);
}

.dstrc-chat-message-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.dstrc-chat-message-outgoing .dstrc-chat-message-meta {
    justify-content: flex-end;
}

.dstrc-chat-message-edited {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: .9;
}

.dstrc-chat-edit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(120,142,174,.22);
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
}

.dstrc-chat-edit-cancel,
.dstrc-chat-file-remove {
    appearance: none;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 10px;
    border: 1px solid rgba(120,142,174,.24);
    background: rgba(255,255,255,.82);
    color: var(--dstrc-text);
    box-shadow: var(--dstrc-inset);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.dstrc-chat-file-remove[hidden],
.dstrc-chat-edit-row[hidden] {
    display: none !important;
}

.dstrc-chat-file-trigger.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.dstrc-chat-font-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 34px;
    min-height: 116px;
    padding: 8px 0;
    border-radius: 12px;
    border: 1px solid rgba(120,142,174,.22);
    background: rgba(255,255,255,.78);
    box-shadow: var(--dstrc-inset);
}

.dstrc-chat-font-stack-label {
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
}

.dstrc-chat-font-stack-label.is-large {
    font-size: 11px;
}

.dstrc-chat-font-range {
    appearance: none;
    -webkit-appearance: none;
    width: 74px;
    height: 16px;
    margin: 0;
    background: transparent;
    transform: rotate(-90deg);
}

.dstrc-chat-font-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(86,110,233,.26);
}

.dstrc-chat-font-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(86,110,233,.36);
    box-shadow: 0 4px 12px rgba(27,43,70,.18);
}

.dstrc-chat-font-range::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(86,110,233,.26);
}

.dstrc-chat-font-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(86,110,233,.36);
    box-shadow: 0 4px 12px rgba(27,43,70,.18);
}

.dstrc-theme-dark .dstrc-chat-message-edit,
.dstrc-theme-dark .dstrc-chat-edit-row,
.dstrc-theme-dark .dstrc-chat-edit-cancel,
.dstrc-theme-dark .dstrc-chat-file-remove,
.dstrc-theme-dark .dstrc-chat-font-stack {
    background: rgba(23, 28, 26, .98);
    color: #ffffff;
    border-color: rgba(247, 252, 249, .84);
    box-shadow: inset 0 0 0 1px rgba(35, 126, 87, .42), 0 10px 24px rgba(0,0,0,.24);
}

.dstrc-theme-dark .dstrc-chat-message-edit,
.dstrc-theme-dark .dstrc-chat-edit-cancel,
.dstrc-theme-dark .dstrc-chat-file-remove,
.dstrc-theme-dark .dstrc-chat-font-stack-label {
    color: #ffffff;
}

.dstrc-theme-dark .dstrc-chat-font-range::-webkit-slider-runnable-track,
.dstrc-theme-dark .dstrc-chat-font-range::-moz-range-track {
    background: rgba(52, 156, 103, .56);
}

.dstrc-theme-dark .dstrc-chat-font-range::-webkit-slider-thumb,
.dstrc-theme-dark .dstrc-chat-font-range::-moz-range-thumb {
    background: #ffffff;
    border-color: rgba(245,255,249,.88);
}

@media (max-width: 960px) {
    .dstrc-chat-font-stack {
        min-height: 104px;
        width: 30px;
    }

    .dstrc-chat-font-range {
        width: 66px;
    }

    .dstrc-chat-file-remove,
    .dstrc-chat-edit-cancel {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
}


.dstrc-manager-report-summary {
    margin-top: 14px;
    margin-bottom: 18px;
}

.dstrc-manager-report-summary .dstrc-task-mini-stat strong {
    font-size: 28px;
}


/* v1.0.2 — manager accounts stacking, compact background cards and portal instructions */
.dstrc-instruction-card {
    margin-bottom: 24px;
}

.dstrc-instruction-card .dstrc-collapsible-summary {
    align-items: flex-start;
}

.dstrc-instruction-card .dstrc-collapsible-summary p {
    margin: 0;
}

.dstrc-instruction-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 10px;
}

.dstrc-instruction-list li {
    margin: 0;
    line-height: 1.65;
}

.dstrc-manager-accounts-layout {
    grid-template-columns: 1fr;
    gap: 18px;
}

.dstrc-manager-accounts-form-card,
.dstrc-manager-accounts-library-card {
    width: 100%;
}

.dstrc-manager-accounts-library-card {
    display: grid;
    gap: 14px;
}

.dstrc-manager-accounts-library-card .dstrc-front-toolbar {
    margin-top: 0;
}

.dstrc-manager-accounts-library-scroll {
    max-height: 520px;
    overflow: auto;
    padding-right: 6px;
}

.dstrc-manager-accounts-library-scroll .dstrc-account-table-wrap {
    margin-bottom: 0;
}

.dstrc-team-background-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.dstrc-team-background-grid .dstrc-media-picker-field-background {
    min-height: 100%;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(126, 146, 180, 0.18);
    background: rgba(255, 255, 255, 0.64);
    box-shadow: var(--dstrc-inset);
}

.dstrc-team-background-grid .dstrc-media-picker {
    gap: 10px;
}

.dstrc-team-background-grid .dstrc-media-picker-background .dstrc-media-picker-preview-wrap {
    width: 100%;
    max-width: 100%;
    height: 118px;
}

.dstrc-team-background-grid .dstrc-media-picker-actions {
    gap: 8px;
}

.dstrc-team-background-grid .dstrc-media-picker-actions .dstrc-btn {
    min-height: 38px;
    padding: 9px 12px;
    font-size: 12px;
}

.dstrc-team-background-grid .dstrc-media-picker-field-background > span {
    font-size: 13px;
    line-height: 1.4;
}

.dstrc-theme-dark .dstrc-team-background-grid .dstrc-media-picker-field-background {
    background: linear-gradient(145deg, rgba(25, 32, 38, 0.96), rgba(14, 19, 24, 0.98));
    border-color: rgba(238, 246, 240, 0.34);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05), inset -2px -2px 8px rgba(0, 0, 0, 0.34), 0 16px 32px rgba(0, 0, 0, 0.22);
}

@media (max-width: 1180px) {
    .dstrc-team-background-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .dstrc-manager-accounts-library-scroll {
        max-height: 440px;
    }

    .dstrc-team-background-grid {
        grid-template-columns: 1fr;
    }
}


/* v1.0.4 — manager account editing and large media compatibility */
.dstrc-account-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dstrc-manager-account-edit-btn {
    min-width: 116px;
}

.dstrc-front-form-actions-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


.dstrc-front-inline-edit-state {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--dstrc-inset);
}

.dstrc-account-actions-cell {
    white-space: nowrap;
    width: 1%;
}

.dstrc-account-actions-cell .dstrc-inline-link {
    justify-content: center;
}

.dstrc-theme-dark .dstrc-front-inline-edit-state {
    background: rgba(18, 27, 24, 0.9);
    border-color: rgba(235, 243, 238, 0.58);
    color: #f4fff8;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* Subtasks */
.dstrc-subtasks-panel {
    margin: 18px 0;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--dstrc-border);
    background: rgba(255, 255, 255, 0.46);
    box-shadow: var(--dstrc-inset);
}

.dstrc-subtasks-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.dstrc-subtasks-caption {
    margin-top: 4px;
    font-size: 12px;
}

.dstrc-subtask-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dstrc-subtask-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(126, 146, 180, 0.26);
    background: rgba(255, 255, 255, 0.52);
}

.dstrc-subtask-row.is-complete {
    border-color: rgba(94, 166, 107, 0.38);
    background: rgba(94, 166, 107, 0.16);
}

.dstrc-subtask-toggle-form {
    margin: 0;
}

.dstrc-subtask-checkline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    min-width: 0;
}

.dstrc-subtask-checkline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--dstrc-success);
    flex: 0 0 auto;
}

.dstrc-subtask-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dstrc-subtask-text,
.dstrc-subtask-link {
    font-size: 13px;
    line-height: 1.4;
    color: var(--dstrc-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.dstrc-subtask-link:hover {
    text-decoration: underline;
}

.dstrc-subtask-row.is-complete .dstrc-subtask-text,
.dstrc-subtask-row.is-complete .dstrc-subtask-link {
    text-decoration: line-through;
}

.dstrc-subtask-url {
    font-size: 11px;
    line-height: 1.35;
    color: var(--dstrc-muted);
    overflow-wrap: anywhere;
}

.dstrc-subtask-tools summary,
.dstrc-subtask-create-details summary {
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--dstrc-text);
}

.dstrc-subtask-tools {
    align-self: start;
}

.dstrc-subtask-tools-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, 86vw);
    margin-top: 8px;
}

.dstrc-subtask-editor-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dstrc-subtask-editor-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dstrc-subtask-editor-form label span {
    font-size: 12px;
    font-weight: 600;
    color: var(--dstrc-muted);
}

.dstrc-subtask-editor-form input {
    width: 100%;
}

.dstrc-subtask-editor-form-inline,
.dstrc-subtask-delete-form {
    margin: 0;
}

.dstrc-subtask-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dstrc-subtask-create-details {
    margin-top: 12px;
}

.dstrc-subtask-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.dstrc-subtask-empty {
    padding: 8px 2px 2px;
}

.dstrc-btn-xs {
    min-height: 34px;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 12px;
}

.dstrc-subtasks-preview {
    margin-top: 10px;
}

.dstrc-subtasks-preview-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dstrc-subtasks-preview-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--dstrc-text);
}

.dstrc-subtasks-preview-list li.is-complete span:last-child {
    text-decoration: line-through;
}

.dstrc-subtask-preview-mark {
    color: var(--dstrc-success);
    font-weight: 700;
}

.dstrc-theme-dark .dstrc-subtasks-panel {
    background: rgba(14, 24, 20, 0.92);
    border-color: rgba(231, 243, 235, 0.30);
    box-shadow: inset 0 0 0 1px rgba(231, 243, 235, 0.06), 0 14px 28px rgba(0, 0, 0, 0.26);
}

.dstrc-theme-dark .dstrc-subtask-row {
    background: rgba(24, 36, 31, 0.94);
    border-color: rgba(236, 247, 239, 0.30);
}

.dstrc-theme-dark .dstrc-subtask-row.is-complete {
    background: rgba(43, 90, 58, 0.92);
    border-color: rgba(192, 236, 202, 0.45);
}

.dstrc-theme-dark .dstrc-subtask-text,
.dstrc-theme-dark .dstrc-subtask-link,
.dstrc-theme-dark .dstrc-subtask-tools summary,
.dstrc-theme-dark .dstrc-subtask-create-details summary {
    color: #f4f8f5;
}

.dstrc-theme-dark .dstrc-subtask-url,
.dstrc-theme-dark .dstrc-subtask-editor-form label span,
.dstrc-theme-dark .dstrc-subtasks-preview-list li,
.dstrc-theme-dark .dstrc-subtasks-caption {
    color: rgba(244, 248, 245, 0.78);
}

.dstrc-theme-dark .dstrc-subtask-editor-form input {
    color: #f4f8f5;
}

@media (max-width: 780px) {
    .dstrc-subtask-form-grid {
        grid-template-columns: 1fr;
    }

    .dstrc-subtask-row {
        grid-template-columns: 1fr;
    }

    .dstrc-subtask-tools-panel {
        width: 100%;
    }
}


/* v1.0.9 subtasks checklist hotfix */
.dstrc-subtasks-panel .dstrc-subtask-table-wrap {
    border: 1px solid rgba(126, 146, 180, 0.22);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.36);
}

.dstrc-subtasks-panel .dstrc-subtask-table-head,
.dstrc-subtasks-panel .dstrc-subtask-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 0;
}

.dstrc-subtasks-panel .dstrc-subtask-table-head.has-actions,
.dstrc-subtasks-panel .dstrc-subtask-row.has-actions {
    grid-template-columns: 42px minmax(0, 1fr) 70px;
}

.dstrc-subtasks-panel .dstrc-subtask-table-head {
    min-height: 38px;
    border-bottom: 1px solid rgba(126, 146, 180, 0.18);
    background: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dstrc-muted);
}

.dstrc-subtasks-panel .dstrc-subtask-th,
.dstrc-subtasks-panel .dstrc-subtask-content-cell,
.dstrc-subtasks-panel .dstrc-subtask-actions-cell {
    min-width: 0;
    padding: 8px 12px;
}

.dstrc-subtasks-panel .dstrc-subtask-th-check,
.dstrc-subtasks-panel .dstrc-subtask-toggle-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.dstrc-subtasks-panel .dstrc-subtask-list {
    gap: 0;
    max-height: 285px;
    overflow-y: auto;
}

.dstrc-subtasks-panel .dstrc-subtask-row {
    min-height: 44px;
    padding: 0;
    border: 0;
    border-top: 1px solid rgba(126, 146, 180, 0.16);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.52);
}

.dstrc-subtasks-panel .dstrc-subtask-row:first-child {
    border-top: 0;
}

.dstrc-subtasks-panel .dstrc-subtask-row.is-complete {
    background: rgba(94, 166, 107, 0.20);
}

.dstrc-subtasks-panel .dstrc-subtask-checkline {
    justify-content: center;
    align-items: center;
    min-height: 44px;
    gap: 0;
}

.dstrc-subtasks-panel .dstrc-subtask-checkline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.dstrc-subtasks-panel .dstrc-subtask-content-cell {
    display: flex;
    align-items: center;
}

.dstrc-subtasks-panel .dstrc-subtask-text,
.dstrc-subtasks-panel .dstrc-subtask-link {
    display: inline-block;
    width: 100%;
    font-size: 13px;
    line-height: 1.38;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.dstrc-subtasks-panel .dstrc-subtask-actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dstrc-subtasks-panel .dstrc-subtask-tools summary {
    font-size: 11px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 9px;
    border: 1px solid rgba(126, 146, 180, 0.24);
    background: rgba(255, 255, 255, 0.72);
}

.dstrc-subtasks-panel .dstrc-subtask-tools-panel {
    width: min(320px, 82vw);
}

.dstrc-subtasks-panel .dstrc-subtask-editor-form label span {
    font-size: 11px;
}

.dstrc-subtasks-panel .dstrc-subtask-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 12px;
}

.dstrc-subtasks-panel .dstrc-subtask-create-form input[type="text"] {
    width: 100%;
}

.dstrc-subtasks-panel .dstrc-subtask-empty {
    padding: 14px 12px;
}

.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-table-wrap {
    border-color: rgba(239, 246, 241, 0.28);
    background: rgba(18, 28, 23, 0.82);
}

.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-table-head {
    background: rgba(24, 35, 30, 0.96);
    border-bottom-color: rgba(239, 246, 241, 0.18);
    color: rgba(245, 248, 246, 0.82);
}

.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-row {
    background: rgba(21, 31, 27, 0.96);
    border-top-color: rgba(239, 246, 241, 0.12);
}

.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-row.is-complete {
    background: rgba(31, 87, 48, 0.96);
}

.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-text,
.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-link,
.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-empty,
.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtasks-caption {
    color: #f3f7f4;
}

.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-tools summary {
    color: #f3f7f4;
    border-color: rgba(239, 246, 241, 0.36);
    background: rgba(31, 46, 39, 0.92);
}

@media (max-width: 780px) {
    .dstrc-subtasks-panel .dstrc-subtask-table-head.has-actions,
    .dstrc-subtasks-panel .dstrc-subtask-row.has-actions {
        grid-template-columns: 38px minmax(0, 1fr) 62px;
    }

    .dstrc-subtasks-panel .dstrc-subtask-create-form {
        grid-template-columns: 1fr;
    }
}

/* v1.0.10 checklist layout patch */
.dstrc-subtasks-panel .dstrc-subtask-table-head.has-actions,
.dstrc-subtasks-panel .dstrc-subtask-row.has-actions {
    grid-template-columns: 42px minmax(0, 1fr) minmax(124px, 144px);
}

.dstrc-subtasks-panel .dstrc-subtask-actions-cell {
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.dstrc-subtasks-panel .dstrc-subtask-delete-form-inline {
    display: inline-flex;
    margin: 0;
}

.dstrc-subtasks-panel .dstrc-subtask-form-block {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(126, 146, 180, 0.2);
    background: rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.dstrc-subtasks-panel .dstrc-subtask-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dstrc-subtasks-panel .dstrc-subtask-create-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.dstrc-subtasks-panel .dstrc-subtask-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.dstrc-subtasks-panel .dstrc-subtask-field span {
    font-size: 12px;
    font-weight: 600;
    color: var(--dstrc-muted);
}

.dstrc-subtasks-panel .dstrc-subtask-create-form input[type="text"] {
    width: 100%;
    min-width: 0;
    min-height: 42px;
}

#dstrc-front-manager-checklist .dstrc-subtask-list {
    max-height: 255px;
}

.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-form-block {
    background: rgba(20, 31, 27, 0.96);
    border-color: rgba(239, 246, 241, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-field span,
.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-form-head {
    color: #f3f7f4;
}

@media (max-width: 780px) {
    .dstrc-subtasks-panel .dstrc-subtask-table-head.has-actions,
    .dstrc-subtasks-panel .dstrc-subtask-row.has-actions {
        grid-template-columns: 38px minmax(0, 1fr) minmax(98px, 112px);
    }

    .dstrc-subtasks-panel .dstrc-subtask-create-form,
    .dstrc-subtasks-panel .dstrc-subtask-form-head {
        flex-direction: column;
        align-items: stretch;
    }

    .dstrc-subtasks-panel .dstrc-subtask-actions-cell {
        gap: 6px;
    }
}


/* v1.0.11 checklist line alignment patch */
.dstrc-subtasks-panel .screen-reader-text,
#dstrc-front-manager-checklist .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dstrc-subtasks-panel .dstrc-subtask-table-head.has-actions,
.dstrc-subtasks-panel .dstrc-subtask-row.has-actions {
    grid-template-columns: 56px minmax(0, 1fr) 170px;
}

.dstrc-subtasks-panel .dstrc-subtask-th-check,
.dstrc-subtasks-panel .dstrc-subtask-toggle-form {
    width: 56px;
    min-width: 56px;
    min-height: 54px;
}

.dstrc-subtasks-panel .dstrc-subtask-checkline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    width: 100%;
    gap: 0;
}

.dstrc-subtasks-panel .dstrc-subtask-checkline input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border-radius: 5px !important;
    border: 1.5px solid rgba(120, 136, 158, 0.9) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 1px 2px rgba(84, 94, 112, 0.18) !important;
    display: grid !important;
    place-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    accent-color: initial !important;
    flex: 0 0 auto !important;
}

.dstrc-subtasks-panel .dstrc-subtask-checkline input[type="checkbox"]::after {
    content: "";
    width: 5px;
    height: 10px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 0.14s ease;
    margin-top: -1px;
}

.dstrc-subtasks-panel .dstrc-subtask-checkline input[type="checkbox"]:checked {
    border-color: rgba(72, 148, 86, 0.98) !important;
    background: linear-gradient(180deg, rgba(84, 170, 101, 0.98) 0%, rgba(61, 136, 76, 0.98) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(49, 102, 59, 0.22) !important;
}

.dstrc-subtasks-panel .dstrc-subtask-checkline input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1);
}

.dstrc-subtasks-panel .dstrc-subtask-row {
    min-height: 54px;
}

.dstrc-subtasks-panel .dstrc-subtask-content-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.dstrc-subtasks-panel .dstrc-subtask-text,
.dstrc-subtasks-panel .dstrc-subtask-link {
    display: block;
    width: 100%;
    min-width: 0;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.dstrc-subtasks-panel .dstrc-subtask-link::before,
.dstrc-subtasks-panel .dstrc-subtask-link::after {
    content: none !important;
    display: none !important;
}

.dstrc-subtasks-panel .dstrc-subtask-actions-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap !important;
    gap: 8px;
    white-space: nowrap;
    min-width: 170px;
}

.dstrc-subtasks-panel .dstrc-subtask-actions-cell .dstrc-btn,
.dstrc-subtasks-panel .dstrc-subtask-delete-form-inline .dstrc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    min-height: 34px;
    padding: 8px 12px;
    line-height: 1;
}

.dstrc-subtasks-panel .dstrc-subtask-delete-form-inline {
    display: inline-flex;
    margin: 0;
}

.dstrc-subtasks-panel .dstrc-subtask-form-block {
    margin-top: 16px;
}

.dstrc-subtasks-panel .dstrc-subtask-create-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.dstrc-subtasks-panel .dstrc-subtask-field {
    flex: 1 1 auto;
    min-width: 0;
}

.dstrc-subtasks-panel .dstrc-subtask-field input[type="text"] {
    width: 100%;
    min-width: 0;
}

.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-checkline input[type="checkbox"] {
    border-color: rgba(236, 244, 239, 0.78) !important;
    background: rgba(28, 43, 35, 0.98) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-checkline input[type="checkbox"]:checked {
    border-color: rgba(144, 232, 165, 0.96) !important;
    background: linear-gradient(180deg, rgba(48, 123, 67, 0.98) 0%, rgba(31, 92, 48, 0.98) 100%) !important;
}

.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-link::before,
.dstrc-theme-dark .dstrc-subtasks-panel .dstrc-subtask-link::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 900px) {
    .dstrc-subtasks-panel .dstrc-subtask-table-head.has-actions,
    .dstrc-subtasks-panel .dstrc-subtask-row.has-actions {
        grid-template-columns: 48px minmax(0, 1fr) 150px;
    }

    .dstrc-subtasks-panel .dstrc-subtask-th-check,
    .dstrc-subtasks-panel .dstrc-subtask-toggle-form {
        width: 48px;
        min-width: 48px;
        min-height: 50px;
    }

    .dstrc-subtasks-panel .dstrc-subtask-actions-cell {
        min-width: 150px;
        gap: 6px;
    }

    .dstrc-subtasks-panel .dstrc-subtask-actions-cell .dstrc-btn,
    .dstrc-subtasks-panel .dstrc-subtask-delete-form-inline .dstrc-btn {
        min-width: 66px;
        padding: 7px 10px;
    }
}

@media (max-width: 680px) {
    .dstrc-subtasks-panel .dstrc-subtask-table-head.has-actions,
    .dstrc-subtasks-panel .dstrc-subtask-row.has-actions {
        grid-template-columns: 44px minmax(0, 1fr) 132px;
    }

    .dstrc-subtasks-panel .dstrc-subtask-actions-cell {
        min-width: 132px;
    }

    .dstrc-subtasks-panel .dstrc-subtask-actions-cell .dstrc-btn,
    .dstrc-subtasks-panel .dstrc-subtask-delete-form-inline .dstrc-btn {
        min-width: 58px;
        font-size: 11px;
        padding: 7px 8px;
    }

    .dstrc-subtasks-panel .dstrc-subtask-create-form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Stage 4 · Leads */
.dstrc-lead-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dstrc-leads-table-wrap {
    overflow-x: auto;
}

.dstrc-lead-title-stack,
.dstrc-lead-material-stack,
.dstrc-lead-status-stack,
.dstrc-lead-address-stack,
.dstrc-lead-assignee-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dstrc-lead-title-stack strong,
.dstrc-lead-material-stack strong,
.dstrc-lead-assignee-stack strong {
    line-height: 1.35;
}

.dstrc-lead-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

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

.dstrc-lead-sla-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(148, 163, 184, 0.12);
    color: #334155;
}

.dstrc-lead-sla-chip.is-ok {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
}

.dstrc-lead-sla-chip.is-warn {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.dstrc-lead-sla-chip.is-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.dstrc-lead-sla-chip.is-waiting {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.dstrc-lead-sla-chip.is-muted {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.dstrc-lead-history-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.dstrc-lead-history-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dstrc-lead-history-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.dstrc-lead-history-list li span,
.dstrc-lead-history-list li em {
    font-size: 12px;
    color: #64748b;
}

.dstrc-leads-filter-form .dstrc-front-toolbar-wrap {
    align-items: flex-end;
}

.dstrc-leads-library-card,
.dstrc-lead-form-card {
    min-width: 0;
}

.dstrc-theme-dark .dstrc-lead-history-list li {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.16);
}

.dstrc-theme-dark .dstrc-lead-sla-chip {
    border-color: rgba(148, 163, 184, 0.14);
}

@media (max-width: 920px) {
    .dstrc-lead-form-grid {
        grid-template-columns: 1fr;
    }
}

#dstrc-front-overview-leads,
#dstrc-front-overview-deals,
#dstrc-front-overview-problems,
#dstrc-front-overview-logistics,
#dstrc-front-overview-team,
#dstrc-front-control-leads,
#dstrc-front-control-deals,
#dstrc-front-control-problems,
#dstrc-front-control-logistics,
#dstrc-front-control-team {
    scroll-margin-top: 118px;
}

.dstrc-dashboard-control-grid {
    margin-top: 20px;
}

.dstrc-dashboard-chip-row {
    margin-top: 10px;
}

.dstrc-dashboard-list-wrap {
    margin-top: 18px;
}

.dstrc-dashboard-list-wrap h4 {
    margin: 0 0 10px;
}

.dstrc-dashboard-list {
    padding-left: 20px;
}

.dstrc-dashboard-list li {
    margin-bottom: 10px;
}

.dstrc-dashboard-empty {
    margin: 10px 0 0;
}

.dstrc-dashboard-table-wrap {
    margin-top: 18px;
    border-radius: 20px;
    border: 1px solid rgba(126, 146, 180, 0.18);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--dstrc-inset);
    overflow: auto;
}

.dstrc-dashboard-table {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.dstrc-dashboard-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 14px 12px;
    text-align: left;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dstrc-muted);
    background: rgba(247, 250, 255, 0.95);
    border-bottom: 1px solid rgba(126, 146, 180, 0.18);
}

.dstrc-dashboard-table td {
    padding: 14px 12px;
    border-top: 1px solid rgba(126, 146, 180, 0.14);
    vertical-align: top;
}

.dstrc-dashboard-table tbody tr:first-child td {
    border-top: 0;
}

.dstrc-dashboard-table tbody tr:hover {
    background: rgba(86, 110, 233, 0.04);
}

.dstrc-theme-dark .dstrc-dashboard-table-wrap {
    background: rgba(27, 34, 49, 0.92);
    border-color: rgba(110, 138, 201, 0.22);
}

.dstrc-theme-dark .dstrc-dashboard-table thead th {
    background: rgba(20, 25, 36, 0.98);
    border-bottom-color: rgba(110, 138, 201, 0.18);
}

.dstrc-theme-dark .dstrc-dashboard-table td {
    border-top-color: rgba(110, 138, 201, 0.12);
}

.dstrc-theme-dark .dstrc-dashboard-table tbody tr:hover {
    background: rgba(110, 138, 201, 0.08);
}

/* Stage 8 — dashboard control center */
.dstrc-dashboard-overview-card {
    margin-top: 1.25rem;
}

.dstrc-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.dstrc-dashboard-kpi-grid {
    margin-top: 1rem;
}

.dstrc-dashboard-kpi-card em {
    display: block;
    margin-top: 0.35rem;
    font-style: normal;
}

.dstrc-dashboard-control-card .dstrc-stat-grid {
    margin-bottom: 1rem;
}

.dstrc-dashboard-dual-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.dstrc-dashboard-dual-list h4,
.dstrc-dashboard-control-card h4 {
    margin: 0 0 0.75rem;
}

.dstrc-dashboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dstrc-dashboard-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(20, 28, 45, 0.08);
    background: rgba(255, 255, 255, 0.55);
}

.dstrc-dashboard-list-item strong a {
    text-decoration: none;
}

.dstrc-dashboard-list-item p {
    margin: 0.35rem 0 0;
}

.dstrc-dashboard-severity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.dstrc-dashboard-severity-high {
    background: rgba(196, 40, 40, 0.12);
    color: #8f1d1d;
}

.dstrc-dashboard-severity-medium {
    background: rgba(197, 120, 0, 0.12);
    color: #8f5e00;
}

.dstrc-dashboard-severity-low {
    background: rgba(30, 88, 163, 0.12);
    color: #1f4f91;
}

.dstrc-dashboard-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.dstrc-dashboard-team-card {
    border-radius: 16px;
    border: 1px solid rgba(20, 28, 45, 0.08);
    background: rgba(255, 255, 255, 0.62);
    padding: 1rem;
}

.dstrc-dashboard-team-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.dstrc-dashboard-team-card-head p {
    margin: 0.3rem 0 0;
}

.dstrc-dashboard-team-metrics {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.dstrc-dashboard-team-metrics li {
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: rgba(20, 28, 45, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dstrc-dashboard-team-metrics li span {
    font-size: 0.78rem;
    color: rgba(20, 28, 45, 0.68);
}

.dstrc-dashboard-team-metrics li strong {
    font-size: 0.95rem;
}

@media (max-width: 782px) {
    .dstrc-dashboard-grid,
    .dstrc-dashboard-dual-list,
    .dstrc-dashboard-team-grid,
    .dstrc-dashboard-team-metrics {
        grid-template-columns: 1fr;
    }

    .dstrc-dashboard-list-item,
    .dstrc-dashboard-team-card-head {
        flex-direction: column;
    }
}

/* Stage 8.2 Lead Form Builder / premium leads UX */
.dstrc-leads-layout {
    align-items: flex-start;
    gap: 18px;
}

.dstrc-leads-editor-card,
.dstrc-leads-library-card,
.dstrc-leads-workspace-card,
.dstrc-lead-form-section,
.dstrc-account-table-wrap.dstrc-leads-table-wrap {
    min-width: 0;
}

.dstrc-leads-editor-head,
.dstrc-leads-library-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.dstrc-lead-schema-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dstrc-lead-form-section {
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,249,252,0.98));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.8);
    padding: 16px;
}

.dstrc-theme-dark .dstrc-lead-form-section {
    background: linear-gradient(180deg, rgba(24, 28, 38, 0.98), rgba(19, 22, 31, 0.98));
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255,255,255,0.04);
}

.dstrc-lead-form-section-head {
    margin-bottom: 12px;
}

.dstrc-lead-form-section-head h5 {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.dstrc-lead-form-grid,
.dstrc-leads-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dstrc-lead-form-field,
.dstrc-leads-filter-form .dstrc-front-form-field {
    min-width: 0;
}

.dstrc-lead-form-field > span,
.dstrc-leads-filter-form .dstrc-front-form-field > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dstrc-required-star {
    color: #d92d20;
    font-style: normal;
    font-weight: 700;
}

.dstrc-lead-schema-form input[type="text"],
.dstrc-lead-schema-form input[type="search"],
.dstrc-lead-schema-form input[type="email"],
.dstrc-lead-schema-form input[type="number"],
.dstrc-lead-schema-form input[type="datetime-local"],
.dstrc-lead-schema-form select,
.dstrc-lead-schema-form textarea,
.dstrc-leads-filter-form input[type="search"],
.dstrc-leads-filter-form select {
    width: 100%;
    min-width: 0;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: linear-gradient(180deg, rgba(245,247,250,1), rgba(255,255,255,1));
    box-shadow: inset 0 2px 7px rgba(15, 23, 42, 0.10), inset 0 -1px 0 rgba(255,255,255,0.75), 0 1px 0 rgba(255,255,255,0.65);
    padding: 11px 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dstrc-theme-dark .dstrc-lead-schema-form input[type="text"],
.dstrc-theme-dark .dstrc-lead-schema-form input[type="search"],
.dstrc-theme-dark .dstrc-lead-schema-form input[type="email"],
.dstrc-theme-dark .dstrc-lead-schema-form input[type="number"],
.dstrc-theme-dark .dstrc-lead-schema-form input[type="datetime-local"],
.dstrc-theme-dark .dstrc-lead-schema-form select,
.dstrc-theme-dark .dstrc-lead-schema-form textarea,
.dstrc-theme-dark .dstrc-leads-filter-form input[type="search"],
.dstrc-theme-dark .dstrc-leads-filter-form select {
    border-color: rgba(255,255,255,0.10);
    background: linear-gradient(180deg, rgba(14,18,27,1), rgba(21,26,38,1));
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.34), inset 0 -1px 0 rgba(255,255,255,0.04), 0 1px 0 rgba(255,255,255,0.03);
}

.dstrc-lead-schema-form textarea {
    resize: vertical;
    min-height: 110px;
}

.dstrc-lead-schema-form select[multiple] {
    min-height: 132px;
}

.dstrc-lead-client-lookup {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dstrc-lead-client-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow: auto;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255,255,255,0.98);
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(12px);
}

.dstrc-theme-dark .dstrc-lead-client-suggestions {
    border-color: rgba(255,255,255,0.10);
    background: rgba(16,20,28,0.98);
    box-shadow: 0 20px 36px rgba(0, 0, 0, 0.42);
}

.dstrc-lead-client-suggestion {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(244,246,249,1));
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06);
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dstrc-theme-dark .dstrc-lead-client-suggestion {
    border-color: rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(23, 28, 38, 1), rgba(17, 20, 29, 1));
}

.dstrc-lead-client-suggestion strong,
.dstrc-lead-client-suggestion span,
.dstrc-lead-title-stack strong,
.dstrc-lead-title-stack span,
.dstrc-lead-metadata-stack strong,
.dstrc-lead-metadata-stack span,
.dstrc-leads-table td,
.dstrc-leads-table th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dstrc-inline-hint {
    color: var(--dstrc-muted, #667085);
    font-size: 12px;
    line-height: 1.45;
}

.dstrc-lead-form-actions {
    gap: 10px;
}

.dstrc-leads-workspace-card .dstrc-btn,
.dstrc-leads-workspace-card button,
.dstrc-leads-workspace-card .button {
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 12px 18px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255,255,255,0.78), inset 0 -1px 0 rgba(15, 23, 42, 0.05);
    transform: translateY(0);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dstrc-leads-workspace-card .dstrc-btn:hover,
.dstrc-leads-workspace-card button:hover,
.dstrc-leads-workspace-card .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 24px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255,255,255,0.82), inset 0 -1px 0 rgba(15, 23, 42, 0.08);
}

.dstrc-leads-table-wrap {
    max-height: 760px;
    overflow: auto;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 14px 28px rgba(15, 23, 42, 0.08);
}

.dstrc-leads-table {
    table-layout: fixed;
    min-width: 980px;
}

.dstrc-leads-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(249,250,251,0.96);
    backdrop-filter: blur(8px);
}

.dstrc-theme-dark .dstrc-leads-table thead th {
    background: rgba(20,24,33,0.96);
}

.dstrc-leads-table td {
    vertical-align: top;
}

.dstrc-lead-title-stack,
.dstrc-lead-metadata-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dstrc-lead-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dstrc-card-actions-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.dstrc-card-actions-vertical .dstrc-inline-form,
.dstrc-card-actions-vertical .dstrc-inline-form button,
.dstrc-card-actions-vertical .dstrc-inline-form .dstrc-btn {
    width: 100%;
}

@media (max-width: 1024px) {
    .dstrc-lead-form-grid,
    .dstrc-leads-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Stage 8.3 standalone workspaces + compact premium lead UX */
.dstrc-portal-wrap-standalone,
.dstrc-portal-wrap-standalone * {
    box-sizing: border-box;
}

.dstrc-portal-wrap-standalone {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dstrc-standalone-workspace-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.dstrc-portal-wrap-standalone .dstrc-portal-panel,
.dstrc-portal-wrap-standalone .dstrc-card,
.dstrc-portal-wrap-standalone .dstrc-front-form-field,
.dstrc-portal-wrap-standalone .dstrc-lead-form-field,
.dstrc-portal-wrap-standalone .dstrc-manager-accounts-layout,
.dstrc-portal-wrap-standalone .dstrc-manager-accounts-library-card,
.dstrc-portal-wrap-standalone .dstrc-manager-accounts-form-card {
    min-width: 0;
    max-width: 100%;
}

.dstrc-portal-wrap-standalone .dstrc-card p,
.dstrc-portal-wrap-standalone .dstrc-card span,
.dstrc-portal-wrap-standalone .dstrc-card strong,
.dstrc-portal-wrap-standalone .dstrc-card label,
.dstrc-portal-wrap-standalone .dstrc-card th,
.dstrc-portal-wrap-standalone .dstrc-card td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dstrc-portal-wrap-standalone input[type="text"],
.dstrc-portal-wrap-standalone input[type="search"],
.dstrc-portal-wrap-standalone input[type="email"],
.dstrc-portal-wrap-standalone input[type="number"],
.dstrc-portal-wrap-standalone input[type="datetime-local"],
.dstrc-portal-wrap-standalone select,
.dstrc-portal-wrap-standalone textarea {
    max-width: 100%;
}

.dstrc-lead-form-grid,
.dstrc-leads-filter-grid {
    align-items: start;
}

.dstrc-lead-schema-form input[type="text"],
.dstrc-lead-schema-form input[type="search"],
.dstrc-lead-schema-form input[type="email"],
.dstrc-lead-schema-form input[type="number"],
.dstrc-lead-schema-form input[type="datetime-local"],
.dstrc-lead-schema-form select,
.dstrc-lead-schema-form textarea,
.dstrc-leads-filter-form input[type="search"],
.dstrc-leads-filter-form select {
    padding: 9px 11px;
    line-height: 1.32;
}

.dstrc-lead-schema-form textarea {
    min-height: 88px;
    white-space: pre-wrap;
}

.dstrc-lead-schema-form select[multiple] {
    min-height: 108px;
}

.dstrc-lead-form-field small.dstrc-inline-hint,
.dstrc-lead-client-lookup small.dstrc-inline-hint {
    margin-top: 4px;
}

.dstrc-leads-workspace-card .dstrc-card-actions,
.dstrc-leads-workspace-card .dstrc-front-form-actions,
.dstrc-leads-workspace-card .dstrc-front-form-actions-wrap {
    flex-wrap: wrap;
}


/* Stage 8.3 KPI workspace */
.dstrc-kpi-card,
.dstrc-kpi-team-card,
.dstrc-kpi-progress-item {
    min-width: 0;
}

.dstrc-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dstrc-kpi-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dstrc-kpi-progress-list {
    display: grid;
    gap: 12px;
}

.dstrc-kpi-progress-item,
.dstrc-kpi-team-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,251,0.98));
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.8);
    padding: 14px;
}

.dstrc-theme-dark .dstrc-kpi-progress-item,
.dstrc-theme-dark .dstrc-kpi-team-card {
    border-color: rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(24, 28, 38, 0.98), rgba(18, 22, 31, 0.98));
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.04);
}

.dstrc-kpi-progress-head,
.dstrc-kpi-team-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.dstrc-kpi-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.dstrc-kpi-metric-grid div,
.dstrc-kpi-user-cell {
    min-width: 0;
}

.dstrc-kpi-metric-grid span,
.dstrc-kpi-user-cell span {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    color: var(--dstrc-muted, #667085);
}

.dstrc-kpi-metric-grid strong,
.dstrc-kpi-user-cell strong {
    display: block;
    line-height: 1.35;
}

.dstrc-kpi-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255,255,255,0.9);
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}

.dstrc-kpi-status-pill.is-on_track {
    color: #067647;
    background: rgba(236, 253, 243, 0.98);
}

.dstrc-kpi-status-pill.is-attention {
    color: #b54708;
    background: rgba(255, 250, 235, 0.98);
}

.dstrc-kpi-status-pill.is-behind {
    color: #b42318;
    background: rgba(254, 242, 242, 0.98);
}

.dstrc-kpi-status-pill.is-not_configured {
    color: #475467;
    background: rgba(248, 250, 252, 0.98);
}

.dstrc-kpi-bar {
    position: relative;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.dstrc-kpi-bar + .dstrc-kpi-bar-caption,
.dstrc-kpi-bar-caption + .dstrc-kpi-bar {
    margin-top: 8px;
}

.dstrc-kpi-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(21,112,239,0.9), rgba(83,177,253,0.95));
}

.dstrc-kpi-bar-fill.is-pace.is-on_track {
    background: linear-gradient(90deg, rgba(6,118,71,0.95), rgba(18,183,106,0.95));
}

.dstrc-kpi-bar-fill.is-pace.is-attention {
    background: linear-gradient(90deg, rgba(181,71,8,0.95), rgba(247,144,9,0.95));
}

.dstrc-kpi-bar-fill.is-pace.is-behind {
    background: linear-gradient(90deg, rgba(180,35,24,0.95), rgba(240,68,56,0.95));
}

.dstrc-kpi-bar-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--dstrc-muted, #667085);
}

.dstrc-kpi-month-form,
.dstrc-kpi-actions {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.dstrc-kpi-month-form .dstrc-front-form-field {
    max-width: 260px;
}

.dstrc-kpi-manager-table-wrap {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    overflow: auto;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 14px 28px rgba(15, 23, 42, 0.08);
}

.dstrc-kpi-manager-table {
    min-width: 980px;
    table-layout: fixed;
}

.dstrc-kpi-target-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dstrc-kpi-target-field input[type="number"] {
    width: 100%;
}

.dstrc-kpi-target-field small {
    display: block;
    line-height: 1.5;
    color: var(--dstrc-muted, #667085);
    overflow-wrap: anywhere;
}

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

@media (max-width: 1100px) {
    .dstrc-kpi-summary-grid,
    .dstrc-kpi-metric-grid,
    .dstrc-kpi-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .dstrc-kpi-summary-grid,
    .dstrc-kpi-metric-grid,
    .dstrc-kpi-team-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dstrc-kpi-progress-head,
    .dstrc-kpi-team-card-head {
        flex-direction: column;
    }
}


/* Stage 8.4 billing / role regulations */
.dstrc-billing-workspace .dstrc-billing-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}
.dstrc-billing-party-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.dstrc-billing-party-card {
    min-height: 100%;
}
.dstrc-billing-workspace .dstrc-table-wrap {
    overflow-x: auto;
}
.dstrc-billing-workspace .dstrc-account-table td,
.dstrc-billing-workspace .dstrc-account-table th {
    white-space: normal;
}


/* Stage 8.5 KPI-first UX */
.dstrc-kpi-section {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dstrc-kpi-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.dstrc-kpi-section-head h4 {
    margin: 0 0 4px;
}

.dstrc-workspace-empty-state {
    border: 1px dashed rgba(59, 130, 246, 0.28);
    border-radius: 18px;
    padding: 18px 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(244,248,255,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 16px 30px rgba(15,23,42,0.06);
}

@media (max-width: 780px) {
    .dstrc-kpi-section-head {
        flex-direction: column;
    }
}

/* Stage 8.5 tail completion — workflow signals */
.dstrc-workflow-panel {
    margin: 0 0 18px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--dstrc-border);
    background: linear-gradient(145deg, rgba(252, 254, 255, 0.94), rgba(238, 244, 251, 0.9));
    box-shadow: var(--dstrc-shadow);
}

.dstrc-workflow-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.dstrc-workflow-panel-head > div {
    min-width: 0;
}

.dstrc-workflow-panel-head h4 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.25;
    word-break: break-word;
}

.dstrc-workflow-panel-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dstrc-accent);
}

.dstrc-workflow-metric-grid,
.dstrc-workflow-signal-grid {
    display: grid;
    gap: 12px;
}

.dstrc-workflow-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-bottom: 12px;
}

.dstrc-workflow-metric-card,
.dstrc-workflow-signal-card {
    min-width: 0;
    border-radius: 18px;
    border: 1px solid var(--dstrc-border);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 244, 251, 0.92));
    box-shadow: var(--dstrc-inset);
}

.dstrc-workflow-metric-card {
    padding: 14px 15px;
    display: grid;
    gap: 8px;
}

.dstrc-workflow-metric-card span,
.dstrc-workflow-metric-card small,
.dstrc-workflow-signal-card p,
.dstrc-workflow-signal-list li {
    color: var(--dstrc-muted);
}

.dstrc-workflow-metric-card span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.dstrc-workflow-metric-card strong {
    font-size: 15px;
    line-height: 1.45;
    color: var(--dstrc-text);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.dstrc-workflow-metric-card small {
    font-size: 12px;
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.dstrc-workflow-metric-card.is-overdue {
    border-color: rgba(210, 115, 138, 0.28);
    background: linear-gradient(145deg, rgba(255, 248, 250, 0.98), rgba(248, 236, 241, 0.9));
}

.dstrc-workflow-metric-card.is-warning {
    border-color: rgba(224, 173, 79, 0.28);
    background: linear-gradient(145deg, rgba(255, 252, 245, 0.98), rgba(249, 243, 227, 0.9));
}

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

.dstrc-workflow-signal-card {
    padding: 14px 15px;
}

.dstrc-workflow-signal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dstrc-workflow-signal-head strong {
    min-width: 0;
    font-size: 14px;
    color: var(--dstrc-text);
}

.dstrc-workflow-signal-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

.dstrc-workflow-signal-list li {
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.dstrc-workflow-signal-card-attention {
    border-color: rgba(224, 173, 79, 0.24);
}

.dstrc-workflow-signal-card-overdue {
    border-color: rgba(210, 115, 138, 0.24);
}

.dstrc-workflow-signal-card-risk {
    border-color: rgba(210, 115, 138, 0.24);
}

.dstrc-workflow-signal-card-approval {
    border-color: rgba(86, 110, 233, 0.22);
}

@media (max-width: 782px) {
    .dstrc-workflow-panel {
        padding: 16px;
    }

    .dstrc-workflow-panel-head {
        flex-direction: column;
        align-items: stretch;
    }

    .dstrc-workflow-metric-grid,
    .dstrc-workflow-signal-grid {
        grid-template-columns: 1fr;
    }
}


/* Stage 8.6 — KPI 2.0 by roles */
.dstrc-kpi-status-pill.is-exceeding,
.dstrc-kpi-status-inline.is-exceeding {
    color: #065f46;
    background: rgba(209, 250, 229, 0.98);
}

.dstrc-kpi-status-pill.is-lagging,
.dstrc-kpi-status-inline.is-lagging {
    color: #b54708;
    background: rgba(255, 247, 237, 0.98);
}

.dstrc-kpi-status-pill.is-critical,
.dstrc-kpi-status-inline.is-critical {
    color: #b42318;
    background: rgba(254, 242, 242, 0.98);
}

.dstrc-kpi-status-inline {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(15, 23, 42, 0.08);
    margin-top: 4px;
}

.dstrc-kpi-bar-fill.is-pace.is-exceeding {
    background: linear-gradient(90deg, rgba(5, 150, 105, 0.95), rgba(16, 185, 129, 0.95));
}

.dstrc-kpi-bar-fill.is-pace.is-lagging {
    background: linear-gradient(90deg, rgba(217, 119, 6, 0.95), rgba(251, 191, 36, 0.95));
}

.dstrc-kpi-bar-fill.is-pace.is-critical {
    background: linear-gradient(90deg, rgba(185, 28, 28, 0.95), rgba(248, 113, 113, 0.95));
}

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

.dstrc-kpi-period-card,
.dstrc-kpi-role-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,248,252,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 14px 28px rgba(15,23,42,0.08);
    padding: 16px;
}

.dstrc-kpi-period-form,
.dstrc-kpi-manager-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dstrc-kpi-period-form.is-compact {
    gap: 12px;
}

.dstrc-kpi-period-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dstrc-kpi-period-tab {
    position: relative;
}

.dstrc-kpi-period-tab input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dstrc-kpi-period-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,244,249,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 18px rgba(15,23,42,0.08);
    cursor: pointer;
    font-weight: 700;
}

.dstrc-kpi-period-tab input:checked + span {
    color: #ffffff;
    border-color: rgba(30, 64, 175, 0.5);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(59, 130, 246, 0.98));
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.28);
}

.dstrc-kpi-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.dstrc-kpi-role-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.dstrc-kpi-role-card-head h5 {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.3;
}

.dstrc-kpi-role-metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dstrc-kpi-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.dstrc-kpi-toggle input {
    margin-top: 3px;
}

.dstrc-kpi-toggle-ui {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dstrc-kpi-toggle-ui strong,
.dstrc-kpi-toggle-ui small {
    overflow-wrap: anywhere;
}

.dstrc-kpi-subsection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 960px) {
    .dstrc-kpi-dual-grid,
    .dstrc-kpi-role-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 780px) {
    .dstrc-kpi-role-card-head {
        flex-direction: column;
    }
}

/* Stage 8.7 documents and payments */
.dstrc-billing-workspace .dstrc-billing-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.dstrc-billing-workspace .dstrc-document-create-card,
.dstrc-billing-workspace .dstrc-document-editor-card,
.dstrc-billing-workspace .dstrc-billing-journal-card {
    margin-top: 16px;
}

.dstrc-billing-workspace .dstrc-document-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 16px;
}

.dstrc-billing-workspace .dstrc-documents-journal-scroll {
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
}

.dstrc-billing-workspace .dstrc-module-disabled-state {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dstrc-billing-workspace .dstrc-module-disabled-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dstrc-billing-workspace .dstrc-timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dstrc-billing-workspace .dstrc-timeline-list li {
    position: relative;
    padding: 10px 12px 10px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

.dstrc-billing-workspace .dstrc-timeline-list li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.75);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

@media (max-width: 900px) {
    .dstrc-billing-workspace .dstrc-document-editor-grid {
        grid-template-columns: 1fr;
    }
}

.dstrc-document-stage88-card {
    margin-top: 18px;
}

.dstrc-document-snapshot-fieldset {
    border: 1px solid rgba(160, 178, 212, 0.45);
    border-radius: 18px;
    padding: 14px 16px 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(245,248,255,0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), inset 0 -12px 22px rgba(165,179,211,0.08), 0 12px 28px rgba(24,42,82,0.06);
}

.dstrc-document-snapshot-fieldset legend {
    padding: 0 10px;
    font-weight: 700;
}

.dstrc-documents-stage88-form,
.dstrc-documents-email-form,
.dstrc-documents-lookup-form {
    margin-top: 14px;
}

.dstrc-deal-documents-panel .dstrc-inline-form {
    display: inline-flex;
    margin-right: 8px;
    margin-bottom: 8px;
}

.dstrc-deal-documents-panel .dstrc-btn-sm {
    padding: 8px 12px;
    font-size: 12px;
}


/* Stage 8.8 final document workflow */
.dstrc-document-workflow-hint {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(238,244,255,0.96) 0%, rgba(248,250,255,0.96) 100%);
    border: 1px solid rgba(150,170,215,0.35);
    color: #233047;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 24px rgba(20,38,80,0.06);
}

.dstrc-journal-change-list {
    margin: 10px 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dstrc-journal-change-list li {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dstrc-journal-change-list li::before {
    display: none !important;
}

.dstrc-journal-change-field {
    font-weight: 700;
}

.dstrc-journal-change-old {
    color: #7a879a;
}

.dstrc-journal-change-arrow {
    color: #2563eb;
    font-weight: 700;
}

.dstrc-journal-change-new {
    color: #1e3a8a;
    font-weight: 600;
}

.dstrc-deal-documents-panel .dstrc-action-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* Stage 8.9 — Пошаговый UX и роли */
.dstrc-workflow-panel-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dstrc-workflow-route {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.dstrc-workflow-route-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,252,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 10px 22px rgba(15,23,42,0.06);
}

.dstrc-workflow-route-step.is-done {
    border-color: rgba(34, 197, 94, 0.22);
    background: linear-gradient(180deg, rgba(245,255,249,0.98), rgba(239,251,243,0.96));
}

.dstrc-workflow-route-step.is-current {
    border-color: rgba(59, 130, 246, 0.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 14px 28px rgba(37,99,235,0.12);
}

.dstrc-workflow-route-step.is-upcoming {
    opacity: 0.88;
}

.dstrc-workflow-route-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(37,99,235,0.1);
    color: #1d4ed8;
    font-weight: 700;
    font-size: 13px;
}

.dstrc-workflow-route-step.is-done .dstrc-workflow-route-index {
    background: rgba(34,197,94,0.12);
    color: #15803d;
}

.dstrc-workflow-route-step strong {
    font-size: 14px;
    line-height: 1.4;
    color: #172033;
}

.dstrc-workflow-route-status {
    font-size: 12px;
    color: #64748b;
}

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

.dstrc-workflow-step-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,252,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 12px 24px rgba(15,23,42,0.06);
}

.dstrc-workflow-step-card h4,
.dstrc-workflow-step-card h5 {
    margin: 0 0 8px;
}

.dstrc-workflow-step-card-kicker {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.dstrc-workflow-checklist {
    margin: 10px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
}

.dstrc-workflow-checklist li {
    line-height: 1.5;
}

.dstrc-workflow-hint {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(248,250,255,0.96));
    color: #1e3a8a;
}

.dstrc-workflow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.dstrc-role-start-card .dstrc-card-head-row,
.dstrc-role-start-grid {
    display: grid;
    gap: 14px;
}

.dstrc-role-start-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 16px;
}

.dstrc-role-start-box {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,252,0.96));
}

.dstrc-role-start-route,
.dstrc-role-start-focus {
    margin: 10px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
}

.dstrc-compact-registry-table .column-title {
    min-width: 260px;
}

.dstrc-compact-registry-main {
    display: grid;
    gap: 6px;
}

.dstrc-compact-registry-status {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dstrc-compact-registry-table .dstrc-muted {
    display: block;
    margin-top: 4px;
}

@media (max-width: 782px) {
    .dstrc-workflow-route,
    .dstrc-workflow-step-grid,
    .dstrc-role-start-grid {
        grid-template-columns: 1fr;
    }

    .dstrc-workflow-actions {
        flex-direction: column;
        align-items: stretch;
    }
}