.pci-shell {
    --pci-accent: var(--erp-primary, #078c95);
    margin: 16px 0 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--erp-border, #dce4e5) 78%, var(--pci-accent));
    border-radius: 18px;
    background: var(--erp-card, #fff);
    color: var(--erp-text, #1d2939);
    box-shadow: var(--shadow-md, 0 10px 25px rgba(15, 23, 42, .08));
}

.pci-shell summary::-webkit-details-marker { display: none; }
.pci-shell summary::marker { content: ''; }

.pci-context-bar {
    display: grid;
    grid-template-columns: 48px minmax(190px, 1fr) minmax(320px, auto) auto;
    align-items: center;
    gap: 13px;
    min-height: 76px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    background:
        radial-gradient(circle at 7% 0, color-mix(in srgb, var(--pci-accent) 13%, transparent), transparent 31%),
        linear-gradient(115deg, var(--erp-card, #fff), var(--erp-surface-muted, #f8fafc));
}

.pci-context-bar:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pci-accent) 35%, transparent);
    outline-offset: -3px;
}

.pci-avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(145deg, #0ba1a8, #056a72);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: 0 8px 22px rgba(7, 140, 149, .22);
}

.pci-identity { min-width: 0; }
.pci-identity small,
.pci-identity strong,
.pci-identity em { display: block; }
.pci-identity small {
    color: var(--pci-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}
.pci-identity strong {
    overflow: hidden;
    margin-top: 2px;
    color: var(--erp-heading, #101828);
    font-size: 17px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pci-identity em {
    overflow: hidden;
    margin-top: 2px;
    color: var(--erp-text-light, #667085);
    font-size: 11px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pci-chips {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    flex-wrap: wrap;
}
.pci-chips b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--erp-border, #dce4e5);
    border-radius: 999px;
    background: var(--erp-surface-elevated, #fff);
    color: var(--erp-text, #1d2939);
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}
.pci-chips b i { color: var(--pci-accent); }
.pci-chips .is-verified {
    border-color: color-mix(in srgb, #10b981 45%, var(--erp-border, #dce4e5));
    background: color-mix(in srgb, #10b981 9%, var(--erp-card, #fff));
    color: color-mix(in srgb, #10b981 75%, var(--erp-heading, #101828));
}

.pci-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--erp-text-light, #667085);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.pci-toggle i { transition: transform .2s ease; }
.pci-shell[open] .pci-toggle i { transform: rotate(180deg); }
.pci-closed-label { display: none; }
.pci-shell:not([open]) .pci-open-label { display: none; }
.pci-shell:not([open]) .pci-closed-label { display: inline; }

.pci-panel {
    border-top: 1px solid var(--erp-border, #dce4e5);
    padding: 17px;
    background: color-mix(in srgb, var(--erp-bg, #f5f7f7) 58%, var(--erp-card, #fff));
}

.pci-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}
.pci-panel-head small {
    display: block;
    color: var(--pci-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}
.pci-panel-head h2 {
    margin: 2px 0 3px;
    color: var(--erp-heading, #101828);
    font-size: 19px;
    line-height: 1.25;
}
.pci-panel-head p {
    margin: 0;
    color: var(--erp-text-light, #667085);
    font-size: 11px;
}
.pci-panel-head button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid color-mix(in srgb, var(--pci-accent) 70%, #fff);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--erp-primary, #078c95), var(--erp-primary-dark, #056a72));
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 6px 16px rgba(7, 140, 149, .2);
    cursor: pointer;
    white-space: nowrap;
}
.pci-panel-head button:hover { filter: brightness(1.06); }
.pci-panel-head button:focus-visible { outline: 3px solid color-mix(in srgb, var(--pci-accent) 35%, transparent); outline-offset: 2px; }

.pci-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
    gap: 11px;
}
.pci-card {
    --pci-tone: var(--pci-accent);
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    overflow: visible;
    border: 1px solid var(--erp-border, #dce4e5);
    border-top: 3px solid var(--pci-tone);
    border-radius: 13px;
    background: var(--erp-card, #fff);
}
.pci-card.is-green { --pci-tone: #10b981; }
.pci-card.is-amber { --pci-tone: #f59e0b; }
.pci-card.is-blue { --pci-tone: #3b82f6; }
.pci-card.is-violet { --pci-tone: #8b5cf6; }
.pci-card.is-cyan { --pci-tone: #06b6d4; }
.pci-card > header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 13px 10px;
}
.pci-card.is-pinned {
    border-color: color-mix(in srgb, var(--pci-tone) 48%, var(--erp-border, #dce4e5));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--pci-tone) 12%, transparent);
}
.pci-card.is-stale {
    border-top-color: #f59e0b;
}
.pci-card.is-dismissed {
    min-height: 66px;
    border-style: dashed;
    border-top-width: 1px;
    opacity: .7;
}
.pci-card.is-dismissed > ul,
.pci-card.is-dismissed > footer,
.pci-card.is-dismissed > .pci-card-status,
.pci-card.is-dismissed > .pci-corrections { display: none; }
.pci-card.is-dismissed > header h3::after {
    content: ' · Dismissed for you';
    color: var(--erp-text-light, #667085);
    font-size: 9px;
    font-weight: 650;
}
.pci-card > header > span {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pci-tone) 12%, var(--erp-card, #fff));
    color: var(--pci-tone);
}
.pci-card > header small {
    display: block;
    color: var(--pci-tone);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pci-card > header h3 {
    margin: 3px 0 0;
    color: var(--erp-heading, #101828);
    font-size: 13px;
    line-height: 1.35;
}
.pci-card-actions {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}
.pci-card-actions > summary {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--erp-border, #dce4e5);
    border-radius: 9px;
    background: var(--erp-surface-muted, #f8fafc);
    color: var(--erp-text-light, #667085);
    cursor: pointer;
    list-style: none;
}
.pci-card-actions > summary::-webkit-details-marker,
.pci-card-note-form > summary::-webkit-details-marker { display: none; }
.pci-card-actions > summary::marker,
.pci-card-note-form > summary::marker { content: ''; }
.pci-card-actions[open] > summary,
.pci-card-actions > summary:hover {
    border-color: var(--pci-tone);
    color: var(--pci-tone);
}
.pci-card-menu {
    position: absolute;
    z-index: 30;
    top: 35px;
    right: 0;
    display: grid;
    width: min(270px, calc(100vw - 54px));
    padding: 7px;
    border: 1px solid var(--erp-border, #dce4e5);
    border-radius: 12px;
    background: var(--erp-card, #fff);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .18);
}
.pci-card-menu form { margin: 0; }
.pci-card-menu button,
.pci-card-note-form > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--erp-text, #1d2939);
    font: inherit;
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}
.pci-card-menu button:hover,
.pci-card-note-form > summary:hover { background: var(--erp-surface-muted, #f8fafc); color: var(--pci-tone); }
.pci-card-note-form { border-top: 1px solid var(--erp-border, #dce4e5); }
.pci-card-note-form > form {
    display: grid;
    gap: 7px;
    padding: 7px 5px 5px;
}
.pci-card-note-form label {
    display: grid;
    gap: 4px;
    color: var(--erp-text-light, #667085);
    font-size: 9px;
    font-weight: 800;
}
.pci-card-note-form textarea {
    min-height: 64px;
    resize: vertical;
    padding: 8px;
    border: 1px solid var(--erp-border, #dce4e5);
    border-radius: 8px;
    background: var(--erp-bg, #f5f7f7);
    color: var(--erp-text, #1d2939);
    font: inherit;
    font-size: 10px;
    line-height: 1.4;
}
.pci-card-note-form > form > button {
    justify-content: center;
    background: var(--pci-accent);
    color: #fff;
}
.pci-card-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 13px 8px;
}
.pci-card-status span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 4px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pci-tone) 10%, var(--erp-card, #fff));
    color: var(--pci-tone);
    font-size: 8px;
    font-weight: 850;
}
.pci-card-status .is-warning { background: color-mix(in srgb, #f59e0b 13%, var(--erp-card, #fff)); color: #b45309; }
.pci-card ul {
    display: grid;
    align-content: start;
    flex: 1 1 auto;
    gap: 0;
    margin: 0;
    padding: 0 13px 8px;
    list-style: none;
}
.pci-card li { margin: 0; padding: 0; }
.pci-card li + li { border-top: 1px solid color-mix(in srgb, var(--erp-border, #dce4e5) 72%, transparent); }
.pci-card li a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    padding: 8px 3px;
    color: inherit;
    text-decoration: none;
}
.pci-card li a:hover span { color: var(--pci-tone); }
.pci-card li a:focus-visible { outline: 2px solid var(--pci-tone); outline-offset: -1px; border-radius: 6px; }
.pci-card li span,
.pci-card li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pci-card li span {
    color: var(--erp-heading, #101828);
    font-size: 11px;
    font-weight: 750;
}
.pci-card li small {
    grid-column: 1;
    margin-top: 2px;
    color: var(--erp-text-light, #667085);
    font-size: 9px;
}
.pci-card li i {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--erp-text-light, #667085);
    font-size: 11px;
}
.pci-card > footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px;
    padding: 9px 13px;
    border-top: 1px solid var(--erp-border, #dce4e5);
    background: var(--erp-surface-muted, #f8fafc);
    color: var(--erp-text-light, #667085);
    font-size: 8px;
    line-height: 1.45;
}
.pci-corrections {
    display: grid;
    gap: 5px;
    margin: 3px 13px 10px;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--pci-tone) 25%, var(--erp-border, #dce4e5));
    border-radius: 9px;
    background: color-mix(in srgb, var(--pci-tone) 6%, var(--erp-card, #fff));
}
.pci-corrections strong {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--pci-tone);
    font-size: 9px;
}
.pci-corrections p {
    margin: 0;
    color: var(--erp-text, #1d2939);
    font-size: 9px;
    line-height: 1.45;
}
.pci-corrections p + p { padding-top: 5px; border-top: 1px solid var(--erp-border, #dce4e5); }
.pci-corrections em {
    display: block;
    margin-top: 3px;
    color: #b45309;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
}
.pci-card > footer > i { color: var(--pci-tone); }
.pci-card > footer a { color: var(--pci-tone); font-weight: 800; text-decoration: none; white-space: nowrap; }

.pci-safety {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 9px 2px 0;
    color: var(--erp-text-light, #667085);
    font-size: 9px;
}
.pci-safety span { display: inline-flex; align-items: center; gap: 5px; }
.pci-safety span i { color: var(--pci-accent); }
.pci-safety em { margin-left: auto; font-style: normal; }

html[data-erp-theme="dark"] .pci-shell {
    border-color: #2a4558;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .28);
}
html[data-erp-theme="dark"] .pci-context-bar {
    background:
        radial-gradient(circle at 7% 0, rgba(15, 174, 181, .17), transparent 32%),
        linear-gradient(115deg, #102337, #0f1c2d);
}
html[data-erp-theme="dark"] .pci-card {
    border-color: #2a3f54;
    background: #111f31;
}
html[data-erp-theme="dark"] .pci-card > header > span { background: color-mix(in srgb, var(--pci-tone) 16%, #111f31); }
html[data-erp-theme="dark"] .pci-card > footer { border-color: #293e52; background: #0e1b2b; }
html[data-erp-theme="dark"] .pci-chips b { border-color: #30475d; background: #132438; }
html[data-erp-theme="dark"] .pci-card-menu { border-color: #30475d; background: #111f31; box-shadow: 0 18px 42px rgba(0, 0, 0, .42); }
html[data-erp-theme="dark"] .pci-card-actions > summary,
html[data-erp-theme="dark"] .pci-card-note-form textarea { border-color: #30475d; background: #0e1b2b; }
html[data-erp-theme="dark"] .pci-card-note-form { border-color: #2a3f54; }

@media (max-width: 1050px) {
    .pci-context-bar { grid-template-columns: 48px minmax(170px, 1fr) auto; }
    .pci-chips { grid-column: 1 / -1; justify-content: flex-start; padding-left: 61px; }
    .pci-toggle { grid-column: 3; grid-row: 1; }
}

@media (max-width: 700px) {
    .pci-shell { margin: 12px 0; border-radius: 14px; }
    .pci-context-bar { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; padding: 11px; }
    .pci-avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; }
    .pci-identity strong { font-size: 14px; }
    .pci-chips { grid-column: 1 / -1; padding-left: 0; }
    .pci-chips b:nth-child(3) { display: none; }
    .pci-toggle span { display: none !important; }
    .pci-panel { padding: 12px; }
    .pci-panel-head { align-items: flex-start; }
    .pci-panel-head h2 { font-size: 17px; }
    .pci-panel-head p { display: none; }
    .pci-panel-head button { min-height: 36px; padding: 8px 10px; font-size: 10px; }
    .pci-card-grid { grid-template-columns: 1fr; }
    .pci-card-menu { position: fixed; top: auto; right: 16px; bottom: 16px; left: 16px; width: auto; }
    .pci-safety { flex-wrap: wrap; gap: 7px 12px; }
    .pci-safety em { width: 100%; margin-left: 0; }
}