@charset "UTF-8";
#patrol-wiki {
    --bg: #121a24;
    --panel: #18232f;
    --panel-2: #1e2b3a;
    --panel-3: #243342;
    --line: rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .14);

    --gold: #f0a828;
    --gold-2: #ffcb61;
    --blue: #3b7ddd;
    --red: #e2453c;
    --green: #22c55e;
    --teal: #14b8a6;
    --violet: #a855f7;

    --text: #eef4fb;
    --muted: #90a2b6;
    --faint: #6c8098;

    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;

    --mono: "JetBrains Mono", "Consolas", "SFMono-Regular", ui-monospace, monospace;
    --display: "Oswald", "Rajdhani", "Franklin Gothic Medium", "Arial Narrow", sans-serif;

    background: var(--bg);
    color: var(--text);
}

#patrol-wiki *,
#patrol-wiki *::before,
#patrol-wiki *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------- каркас */

#patrol-wiki .cpd-app {
    display: flex;
    gap: 26px;
    align-items: stretch;
    height: calc(100vh - 90px);
    min-height: 720px;
}

#patrol-wiki .cpd-side {
    width: 310px;
    flex-shrink: 0;
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px 22px;
    overflow: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

/* сигнатура отдела: проблесковая лента поверх сайдбара */
#patrol-wiki .cpd-side::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: linear-gradient(90deg,
    var(--blue) 0 25%, var(--red) 25% 50%,
    var(--blue) 50% 75%, var(--red) 75% 100%);
    background-size: 200% 100%;
    animation: cpd-lightbar 3.2s linear infinite;
}

@keyframes cpd-lightbar {
    to {
        background-position: -200% 0;
    }
}

#patrol-wiki .cpd-side::-webkit-scrollbar,
#patrol-wiki .cpd-main::-webkit-scrollbar {
    width: 6px;
}

#patrol-wiki .cpd-side::-webkit-scrollbar-thumb,
#patrol-wiki .cpd-main::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 20px;
}

#patrol-wiki .cpd-main {
    flex: 1;
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 38px 40px 60px;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------- бренд */

#patrol-wiki .cpd-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}

#patrol-wiki .cpd-brand-badge {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #16202b;
    background: linear-gradient(140deg, var(--gold-2), var(--gold));
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(240, 168, 40, .3);
}

#patrol-wiki .cpd-brand h3 {
    margin: 0;
    font-family: var(--display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
}

#patrol-wiki .cpd-brand p {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .4px;
}

#patrol-wiki .cpd-side-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.6px;
    color: var(--faint);
    margin: 24px 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#patrol-wiki .cpd-side-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* --------------------------------------------------------------- меню */

#patrol-wiki .cpd-nav {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: #cbd9e7;
    font-size: 14.5px;
    padding: 11px 14px;
    border-radius: var(--r-sm);
    margin-bottom: 4px;
    cursor: pointer;
    text-align: left;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}

#patrol-wiki .cpd-nav i {
    width: 20px;
    font-size: 16px;
    color: var(--faint);
    transition: color .2s;
}

#patrol-wiki .cpd-nav:hover {
    background: var(--panel-2);
    color: #fff;
    transform: translateX(3px);
}

#patrol-wiki .cpd-nav:hover i {
    color: var(--gold);
}

#patrol-wiki .cpd-nav.active {
    background: linear-gradient(90deg, rgba(240, 168, 40, .18), transparent 85%);
    border-left-color: var(--gold);
    color: #fff;
    font-weight: 600;
}

#patrol-wiki .cpd-nav.active i {
    color: var(--gold);
}

#patrol-wiki .cpd-nav:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

#patrol-wiki .cpd-nav.disabled {
    opacity: .45;
    cursor: default;
}

#patrol-wiki .cpd-nav.disabled:hover {
    background: none;
    transform: none;
}

#patrol-wiki .cpd-tag {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    padding: 3px 8px;
    border-radius: 20px;
    background: var(--panel-3);
    color: var(--muted);
}

#patrol-wiki .cpd-tag.gold {
    background: rgba(240, 168, 40, .18);
    color: var(--gold-2);
}

#patrol-wiki .cpd-tag.red {
    background: rgba(226, 69, 60, .18);
    color: #ff8f88;
}

#patrol-wiki .cpd-tag.live {
    background: rgba(226, 69, 60, .18);
    color: #ff8f88;
    animation: cpd-pulse 1.8s ease-in-out infinite;
}

@keyframes cpd-pulse {
    50% {
        opacity: .45;
    }
}

/* --------------------------------------------------------------- шапка */

#patrol-wiki .cpd-head {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 34px;
}

#patrol-wiki .cpd-head-ico {
    width: 66px;
    height: 66px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #16202b;
    border-radius: 16px;
    background: linear-gradient(140deg, var(--gold-2), var(--gold));
}

#patrol-wiki .cpd-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}

#patrol-wiki .cpd-head h1 {
    margin: 0;
    font-family: var(--display);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
}

#patrol-wiki .cpd-head p {
    margin: 12px 0 0;
    max-width: 820px;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.75;
}

#patrol-wiki h2.cpd-h2 {
    font-family: var(--display);
    font-size: 24px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff;
    margin: 46px 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

#patrol-wiki h2.cpd-h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line-strong), transparent);
}

#patrol-wiki h2.cpd-h2 span.num {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--gold);
    letter-spacing: 0;
}

/* --------------------------------------------------------------- блоки */

#patrol-wiki .cpd-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

#patrol-wiki .cpd-grid-2 {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}

#patrol-wiki .cpd-card {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 22px 24px;
    transition: border-color .2s, transform .2s, background .2s;
}

#patrol-wiki .cpd-card:hover {
    border-color: rgba(240, 168, 40, .45);
    transform: translateY(-3px);
}

#patrol-wiki .cpd-card h4 {
    margin: 0 0 10px;
    font-size: 17px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

#patrol-wiki .cpd-card h4 i {
    color: var(--gold);
}

#patrol-wiki .cpd-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.7;
}

#patrol-wiki .cpd-note {
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    background: var(--panel-2);
    margin: 24px 0;
}

#patrol-wiki .cpd-note i {
    font-size: 20px;
    color: var(--blue);
    margin-top: 2px;
}

#patrol-wiki .cpd-note.warn {
    border-left-color: var(--gold);
}

#patrol-wiki .cpd-note.warn i {
    color: var(--gold);
}

#patrol-wiki .cpd-note.danger {
    border-left-color: var(--red);
}

#patrol-wiki .cpd-note.danger i {
    color: var(--red);
}

#patrol-wiki .cpd-note strong {
    display: block;
    margin-bottom: 6px;
    color: #fff;
}

#patrol-wiki .cpd-note p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

/* списки прав / обязанностей / запретов */

#patrol-wiki .cpd-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#patrol-wiki .cpd-list li {
    position: relative;
    padding: 12px 0 12px 34px;
    border-bottom: 1px solid var(--line);
    color: #c6d5e4;
    line-height: 1.65;
}

#patrol-wiki .cpd-list li:last-child {
    border-bottom: none;
}

#patrol-wiki .cpd-list li::before {
    position: absolute;
    left: 0;
    top: 12px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

#patrol-wiki .cpd-list.do li::before {
    content: "✓";
    background: rgba(34, 197, 94, .16);
    color: var(--green);
}

#patrol-wiki .cpd-list.can li::before {
    content: "→";
    background: rgba(59, 125, 221, .16);
    color: var(--blue);
}

#patrol-wiki .cpd-list.dont li::before {
    content: "✕";
    background: rgba(226, 69, 60, .16);
    color: var(--red);
}

/* --------------------------------------------------------- тен-коды */

#patrol-wiki .cpd-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

#patrol-wiki .cpd-code {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--panel-2);
    border: 1px solid var(--line);
    transition: border-color .18s, background .18s;
}

#patrol-wiki .cpd-code:hover {
    border-color: rgba(240, 168, 40, .5);
    background: var(--panel-3);
}

#patrol-wiki .cpd-code b {
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 700;
    color: #16202b;
    background: linear-gradient(140deg, var(--gold-2), var(--gold));
    padding: 5px 9px;
    border-radius: 6px;
    flex-shrink: 0;
    min-width: 62px;
    text-align: center;
}

#patrol-wiki .cpd-code.crit b {
    background: linear-gradient(140deg, #ff7d75, var(--red));
    color: #fff;
}

#patrol-wiki .cpd-code span {
    font-size: 14px;
    color: #cbd9e7;
    line-height: 1.4;
}

#patrol-wiki .cpd-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 11px 16px;
    margin-bottom: 20px;
}

#patrol-wiki .cpd-search i {
    color: var(--faint);
}

#patrol-wiki .cpd-search input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 15px;
}

#patrol-wiki .cpd-search input::placeholder {
    color: var(--faint);
}

/* --------------------------------------------------------- маркировки */

#patrol-wiki .cpd-mark {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

#patrol-wiki .cpd-mark-letter {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #16202b;
    background: var(--gold);
}

#patrol-wiki .cpd-mark-letter.blue {
    background: var(--blue);
    color: #fff;
}

#patrol-wiki .cpd-mark-letter.red {
    background: var(--red);
    color: #fff;
}

#patrol-wiki .cpd-mark-letter.teal {
    background: var(--teal);
    color: #06231f;
}

#patrol-wiki .cpd-mark b {
    display: block;
    color: #fff;
    font-size: 15px;
}

#patrol-wiki .cpd-mark span {
    color: var(--muted);
    font-size: 13.5px;
}

/* радио-примеры */

#patrol-wiki .cpd-radio {
    background: #0f1720;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 16px;
}

#patrol-wiki .cpd-radio-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muted);
}

#patrol-wiki .cpd-radio-top i {
    color: var(--red);
}

#patrol-wiki .cpd-radio-body {
    padding: 16px 18px;
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 2;
    color: #b9d3ea;
    white-space: pre-wrap;
}

#patrol-wiki .cpd-copy {
    margin-left: auto;
    background: none;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    border-radius: 6px;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 4px 10px;
    cursor: pointer;
    transition: .18s;
}

#patrol-wiki .cpd-copy:hover {
    color: #16202b;
    background: var(--gold);
    border-color: var(--gold);
}

/* --------------------------------------------------------- таблицы */

#patrol-wiki .cpd-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

#patrol-wiki table.cpd-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

#patrol-wiki table.cpd-table th {
    background: var(--panel-3);
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-align: left;
    padding: 14px 16px;
    white-space: nowrap;
}

#patrol-wiki table.cpd-table td {
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    color: #cbd9e7;
    font-size: 14px;
    vertical-align: middle;
}

#patrol-wiki table.cpd-table tbody tr:hover td {
    background: rgba(255, 255, 255, .025);
}

#patrol-wiki .cpd-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--panel-3);
    color: var(--muted);
}

#patrol-wiki .cpd-chip.gold {
    background: rgba(240, 168, 40, .16);
    color: var(--gold-2);
}

#patrol-wiki .cpd-chip.green {
    background: rgba(34, 197, 94, .16);
    color: #6ee7a0;
}

#patrol-wiki .cpd-chip.red {
    background: rgba(226, 69, 60, .16);
    color: #ff8f88;
}

#patrol-wiki .cpd-chip.blue {
    background: rgba(59, 125, 221, .16);
    color: #8ab6f5;
}

#patrol-wiki code,
#patrol-wiki .cpd-cmd {
    font-family: var(--mono);
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(59, 125, 221, .16);
    color: #9ec5fb;
    font-size: 13px;
}

/* --------------------------------------------------------- лекции/бинды */

#patrol-wiki .cpd-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    padding: 18px 20px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text);
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}

#patrol-wiki .cpd-tile:hover {
    border-color: rgba(240, 168, 40, .5);
    transform: translateY(-3px);
}

#patrol-wiki .cpd-tile-ico {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--gold);
    background: rgba(240, 168, 40, .12);
}

#patrol-wiki .cpd-tile b {
    display: block;
    font-size: 15px;
    color: #fff;
    margin-bottom: 3px;
}

#patrol-wiki .cpd-tile small {
    color: var(--faint);
    font-size: 12px;
    letter-spacing: .6px;
}

#patrol-wiki .cpd-tile-go {
    margin-left: auto;
    color: var(--faint);
}

/* модалка материала */

.cpd-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    background: rgba(6, 11, 17, .78);
    backdrop-filter: blur(4px);
}

.cpd-modal.open {
    display: flex;
}

.cpd-modal-box {
    width: min(920px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    background: #18232f;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.cpd-modal-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 26px;
    background: #1e2b3a;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.cpd-modal-head h3 {
    margin: 0;
    font-size: 19px;
    color: #fff;
}

.cpd-modal-close {
    margin-left: auto;
    background: none;
    border: none;
    color: #90a2b6;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.cpd-modal-close:hover {
    color: #fff;
}

.cpd-modal-body {
    padding: 26px;
    color: #cbd9e7;
    line-height: 1.8;
}

/* --------------------------------------------------------- график */

#patrol-wiki .cpd-week-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

#patrol-wiki .cpd-week-title {
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
}

#patrol-wiki .cpd-week-range {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--gold);
}

#patrol-wiki .cpd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: var(--panel-2);
    color: #d6e3f0;
    font-size: 13.5px;
    cursor: pointer;
    transition: .18s;
}

#patrol-wiki .cpd-btn:hover {
    background: var(--panel-3);
    color: #fff;
}

#patrol-wiki .cpd-btn.primary {
    background: linear-gradient(140deg, var(--gold-2), var(--gold));
    border-color: transparent;
    color: #16202b;
    font-weight: 700;
}

#patrol-wiki .cpd-btn.primary:hover {
    filter: brightness(1.08);
}

#patrol-wiki .cpd-btn.ghost-red {
    border-color: rgba(226, 69, 60, .5);
    color: #ff8f88;
    background: transparent;
}

#patrol-wiki .cpd-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

#patrol-wiki .cpd-sched {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    min-width: 880px;
}

#patrol-wiki .cpd-sched th {
    background: var(--panel-3);
    color: #dbe6f2;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 8px;
    border-radius: 8px;
    text-align: center;
}

#patrol-wiki .cpd-sched th small {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--gold);
    letter-spacing: 0;
    margin-top: 3px;
}

#patrol-wiki .cpd-sched th.today {
    outline: 1px solid var(--gold);
}

#patrol-wiki .cpd-sched td {
    background: var(--panel-2);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    font-size: 13.5px;
    color: #cbd9e7;
    min-width: 104px;
}

#patrol-wiki .cpd-sched td.name {
    text-align: left;
    min-width: 210px;
    font-weight: 600;
    color: #fff;
    border-left: 4px solid var(--gold);
}

#patrol-wiki .cpd-sched td.name.chief {
    border-left-color: var(--red);
}

#patrol-wiki .cpd-sched td.name.curator {
    border-left-color: var(--violet);
}

#patrol-wiki .cpd-sched td.name.vacant {
    color: #ff8f88;
    font-style: italic;
}

#patrol-wiki .cpd-sched td.st-done {
    background: rgba(34, 197, 94, .16);
    color: #85e7ab;
}

#patrol-wiki .cpd-sched td.st-failed {
    background: rgba(226, 69, 60, .18);
    color: #ff9a93;
}

#patrol-wiki .cpd-sched td.st-warned {
    background: rgba(59, 125, 221, .18);
    color: #9ec5fb;
}

#patrol-wiki .cpd-sched td.st-no_position {
    background: rgba(240, 168, 40, .16);
    color: var(--gold-2);
}

#patrol-wiki .cpd-sched td.st-day_off {
    background: rgba(20, 184, 166, .14);
    color: #6fdccd;
}

#patrol-wiki .cpd-sched td.editable {
    cursor: pointer;
}

#patrol-wiki .cpd-sched td.editable:hover {
    outline: 1px dashed var(--gold);
}

#patrol-wiki .cpd-sched input.cell-input,
#patrol-wiki .cpd-sched input.name-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
}

#patrol-wiki .cpd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 22px;
    padding: 18px 22px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

#patrol-wiki .cpd-legend span {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--muted);
}

#patrol-wiki .cpd-legend i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}

/* --------------------------------------------------------- отчёты */

#patrol-wiki .cpd-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 26px;
    margin-bottom: 32px;
}

#patrol-wiki .cpd-field label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 7px;
}

#patrol-wiki .cpd-field.full {
    grid-column: 1 / -1;
}

#patrol-wiki .cpd-input,
#patrol-wiki select.cpd-input,
#patrol-wiki textarea.cpd-input,
#patrol-wiki input.cpd-input {
    width: 100%;
    background: #131c26;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: #fff;
    padding: 11px 14px;
    font-size: 14.5px;
    outline: none;
    transition: border-color .18s;
}

#patrol-wiki .cpd-input:focus {
    border-color: var(--gold);
}

#patrol-wiki .cpd-input::placeholder {
    color: var(--faint);
}

#patrol-wiki .cpd-error {
    color: #ff8f88;
    font-size: 12.5px;
    margin-top: 6px;
}

#patrol-wiki .cpd-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 0 30px;
}

#patrol-wiki .cpd-bar-row {
    display: grid;
    grid-template-columns: 210px 1fr 54px;
    align-items: center;
    gap: 14px;
}

#patrol-wiki .cpd-bar-row span {
    font-size: 13.5px;
    color: var(--muted);
}

#patrol-wiki .cpd-bar-track {
    height: 10px;
    border-radius: 20px;
    background: var(--panel-3);
    overflow: hidden;
}

#patrol-wiki .cpd-bar-fill {
    height: 100%;
    border-radius: 20px;
    width: 0;
    transition: width .9s cubic-bezier(.22, .8, .3, 1);
}

#patrol-wiki .cpd-bar-row b {
    text-align: right;
    font-family: var(--mono);
    font-size: 13px;
    color: #fff;
}

/* --------------------------------------------------------- аналитика */

#patrol-wiki .cpd-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 34px;
}

#patrol-wiki .cpd-kpi {
    position: relative;
    padding: 22px 24px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

#patrol-wiki .cpd-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--gold);
}

#patrol-wiki .cpd-kpi.blue::before {
    background: var(--blue);
}

#patrol-wiki .cpd-kpi.green::before {
    background: var(--green);
}

#patrol-wiki .cpd-kpi.red::before {
    background: var(--red);
}

#patrol-wiki .cpd-kpi small {
    display: block;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 10px;
}

#patrol-wiki .cpd-kpi b {
    font-family: var(--display);
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

#patrol-wiki .cpd-kpi i.trend {
    font-style: normal;
    font-size: 12.5px;
    color: var(--muted);
    margin-left: 8px;
}

#patrol-wiki .cpd-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 150px;
    padding: 18px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

#patrol-wiki .cpd-spark div {
    flex: 1;
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--gold), rgba(240, 168, 40, .25));
    transition: height .8s cubic-bezier(.22, .8, .3, 1);
}

#patrol-wiki .cpd-spark div:hover {
    background: var(--gold-2);
}

#patrol-wiki .cpd-period {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

#patrol-wiki .cpd-period a {
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--muted);
    background: var(--panel-2);
    border: 1px solid var(--line);
    text-decoration: none;
}

#patrol-wiki .cpd-period a.active {
    background: rgba(240, 168, 40, .16);
    border-color: rgba(240, 168, 40, .5);
    color: var(--gold-2);
}

#patrol-wiki .cpd-rank-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: var(--r-sm);
    background: var(--panel-2);
    border: 1px solid var(--line);
    margin-bottom: 8px;
}

#patrol-wiki .cpd-place {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 13px;
    background: var(--panel-3);
    color: var(--muted);
}

#patrol-wiki .cpd-rank-row:nth-child(1) .cpd-place {
    background: linear-gradient(140deg, var(--gold-2), var(--gold));
    color: #16202b;
    font-weight: 700;
}

#patrol-wiki .cpd-rank-name {
    min-width: 190px;
    color: #fff;
    font-size: 14.5px;
}

#patrol-wiki .cpd-rank-row .cpd-bar-track {
    flex: 1;
}

#patrol-wiki .cpd-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--faint);
}

#patrol-wiki .cpd-empty i {
    font-size: 40px;
    display: block;
    margin-bottom: 16px;
    color: var(--panel-3);
}

/* --------------------------------------------------------- адаптив */

@media (max-width: 1100px) {
    #patrol-wiki .cpd-app {
        flex-direction: column;
        height: auto;
    }

    #patrol-wiki .cpd-side {
        width: 100%;
        max-height: none;
    }

    #patrol-wiki .cpd-main {
        padding: 28px 20px 44px;
    }

    #patrol-wiki .cpd-bar-row {
        grid-template-columns: 130px 1fr 44px;
    }
}

@media (max-width: 640px) {
    #patrol-wiki .cpd-head {
        flex-direction: column;
        gap: 16px;
    }

    #patrol-wiki .cpd-head h1 {
        font-size: 29px;
    }

    #patrol-wiki .cpd-form {
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #patrol-wiki *,
    #patrol-wiki *::before {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   ДОБАВЛЕНО: карточки руководства, типографика модалки, бинды
   ========================================================================== */

/* ------------------------------------------------- руководство с фото */

#patrol-wiki .cpd-leaders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

#patrol-wiki .cpd-leader {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--panel-2);
    border: 1px solid var(--line);
    transition: border-color .2s, transform .2s;
}

#patrol-wiki .cpd-leader:hover {
    transform: translateY(-4px);
    border-color: rgba(240, 168, 40, .5);
}

#patrol-wiki .cpd-leader-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, var(--panel-3), var(--bg));
    overflow: hidden;
}

#patrol-wiki .cpd-leader-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.9);
    transition: transform .4s ease, filter .3s;
}

#patrol-wiki .cpd-leader:hover .cpd-leader-photo img {
    transform: scale(1.04);
    filter: saturate(1.05);
}

/* заглушка, когда фото не загружено */
#patrol-wiki .cpd-leader-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    color: rgba(240, 168, 40, .28);
}

#patrol-wiki .cpd-leader-photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(to top, rgba(19, 26, 36, .96), transparent);
    pointer-events: none;
}

#patrol-wiki .cpd-leader-info {
    position: absolute;
    inset: auto 0 0 0;
    padding: 18px 20px;
    z-index: 2;
}

#patrol-wiki .cpd-leader-rank {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #16202b;
    background: linear-gradient(140deg, var(--gold-2), var(--gold));
    padding: 3px 9px;
    border-radius: 5px;
    margin-bottom: 9px;
}

#patrol-wiki .cpd-leader-rank.dep {
    background: var(--panel-3);
    color: var(--gold-2);
}

#patrol-wiki .cpd-leader-name {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .6px;
    color: #fff;
    line-height: 1.2;
}

#patrol-wiki .cpd-leader-name.vacant {
    color: var(--faint);
    font-style: italic;
}

/* ------------------------------------------- типографика внутри модалки */
/* шаблоны лекций написаны под стили Police Academy, которых здесь нет,
   поэтому задаём читаемые цвета принудительно */

.cpd-modal-body,
.cpd-modal-body p,
.cpd-modal-body li,
.cpd-modal-body td,
.cpd-modal-body th,
.cpd-modal-body span,
.cpd-modal-body div,
.cpd-modal-body small,
.cpd-modal-body blockquote {
    color: #cbd9e7;
}

.cpd-modal-body h1,
.cpd-modal-body h2,
.cpd-modal-body h3,
.cpd-modal-body h4,
.cpd-modal-body h5,
.cpd-modal-body strong,
.cpd-modal-body b {
    color: #fff;
}

.cpd-modal-body h2 {
    font-size: 22px;
    margin: 28px 0 14px;
}

.cpd-modal-body h3 {
    font-size: 18px;
    margin: 24px 0 12px;
}

.cpd-modal-body ul,
.cpd-modal-body ol {
    padding-left: 22px;
}

.cpd-modal-body li {
    margin-bottom: 8px;
}

.cpd-modal-body a {
    color: #ffcb61;
}

.cpd-modal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
}

.cpd-modal-body th,
.cpd-modal-body td {
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 10px 12px;
    text-align: left;
}

.cpd-modal-body th {
    background: #243342;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* блоки-заглушки из чужих стилей не должны рушить фон */
.cpd-modal-body .lecture-document,
.cpd-modal-body .pa-card,
.cpd-modal-body .pa-text-block,
.cpd-modal-body pre {
    background: transparent;
    color: #cbd9e7;
}

/* ------------------------------------------------------ карточки биндов */

#patrol-wiki .cpd-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

#patrol-wiki .cpd-bind-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    height: 100%;
    padding: 26px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--text);
    cursor: pointer;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

#patrol-wiki .cpd-bind-card:hover {
    transform: translateY(-8px);
    border-color: rgba(240, 168, 40, .55);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .32);
}

#patrol-wiki .cpd-bind-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

#patrol-wiki .cpd-bind-ico {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    margin-bottom: 18px;
}

#patrol-wiki .cpd-bind-ico.gold {
    background: linear-gradient(135deg, #ffcb61, #f0a828);
    color: #16202b;
}

#patrol-wiki .cpd-bind-ico.blue {
    background: linear-gradient(135deg, #4f8ff0, #2d6fe0);
}

#patrol-wiki .cpd-bind-ico.green {
    background: linear-gradient(135deg, #4ade80, #16a34a);
}

#patrol-wiki .cpd-bind-ico.red {
    background: linear-gradient(135deg, #ff7d75, #e2453c);
}

#patrol-wiki .cpd-bind-ico.purple {
    background: linear-gradient(135deg, #c084fc, #a855f7);
}

#patrol-wiki .cpd-bind-ico.cyan {
    background: linear-gradient(135deg, #67e8f9, #0dcaf0);
    color: #06222b;
}

#patrol-wiki .cpd-bind-ico.slate {
    background: linear-gradient(135deg, #64748b, #334155);
}

#patrol-wiki .cpd-bind-card h4 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #fff;
}

#patrol-wiki .cpd-bind-card p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
    flex: 1;
}

#patrol-wiki .cpd-bind-open {
    font-weight: 700;
    font-size: 14px;
    color: var(--gold);
    transition: transform .25s;
}

#patrol-wiki .cpd-bind-card:hover .cpd-bind-open {
    transform: translateX(6px);
}

/* ---------------------------------------- подсветка бинда в модалке */

.cpd-modal-body pre.cpd-bind-code {
    margin: 0;
    padding: 24px;
    border-radius: 14px;
    background: #0f1720;
    border: 1px solid rgba(255, 255, 255, .07);
    font-family: var(--mono, "JetBrains Mono", Consolas, monospace);
    font-size: 14.5px;
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
    color: #dbe7f4;
}

.cpd-modal-body .b-me {
    color: #ff66c4;
    font-weight: 700;
}

.cpd-modal-body .b-do {
    color: #ffb347;
    font-weight: 700;
}

.cpd-modal-body .b-b,
.cpd-modal-body .b-try {
    color: #9ca3af;
    font-weight: 700;
}

.cpd-modal-body .b-wait {
    color: #38bdf8;
    font-weight: 700;
}

.cpd-modal-body .b-var {
    color: #c084fc;
    font-weight: 700;
}

.cpd-modal-body .b-radio {
    color: #4ade80;
    font-weight: 700;
}

/* кнопка копирования в шапке модалки */

.cpd-modal-copy {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(140deg, #ffcb61, #f0a828);
    color: #16202b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s;
}

.cpd-modal-copy:hover {
    filter: brightness(1.08);
}

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

.cpd-modal-head .cpd-modal-close {
    margin-left: 14px;
}

/* ==========================================================================
   ДОКУМЕНТ CPD — оформление лекций
   ========================================================================== */

/* закрытие всегда поверх содержимого */
.cpd-modal-box {
    position: relative;
}

.cpd-modal-box .cpd-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(20, 28, 38, .55);
    border: none;
    color: #cbd9e7;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.cpd-modal-box .cpd-modal-close:hover {
    background: #e2453c;
    color: #fff;
}

.cpd-modal-head {
    padding-right: 70px;
}

/* --- режим документа --- */

.cpd-modal-box.doc {
    width: min(880px, 100%);
    background: #f7f5f0;
    border-color: rgba(0, 0, 0, .12);
    border-radius: 6px;
}

.cpd-modal-box.doc .cpd-modal-head {
    display: none;
}

.cpd-modal-box.doc .cpd-modal-body {
    padding: 0;
}

.cpd-modal-box.doc .cpd-modal-close {
    background: rgba(22, 32, 43, .08);
    color: #5b6a7a;
}

.cpd-modal-box.doc .cpd-modal-close:hover {
    background: #e2453c;
    color: #fff;
}

.cpd-doc {
    position: relative;
    padding: 46px 56px 30px;
    color: #1b2530;
    font-family: "Georgia", "Times New Roman", serif;
}

/* проблесковая лента отдела вместо обычной шапки */
.cpd-doc::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg,
    #2d6fe0 0 25%, #e2453c 25% 50%,
    #2d6fe0 50% 75%, #e2453c 75% 100%);
}

.cpd-doc-head {
    display: grid;
    grid-template-columns: 72px 1fr 96px;
    align-items: center;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(27, 37, 48, .18);
}

.cpd-doc-logo {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: contain;
}

.cpd-doc-center {
    text-align: center;
}

.cpd-doc-gov {
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    color: #7a8894;
    text-transform: uppercase;
}

.cpd-doc-dep {
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 13px;
    letter-spacing: 2.6px;
    color: #97a3ae;
    text-transform: uppercase;
    margin-top: 5px;
}

.cpd-doc-rule {
    width: 180px;
    height: 2px;
    margin: 12px auto;
    background: linear-gradient(90deg, transparent, #b8860b, transparent);
}

.cpd-doc-unit {
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #16202b;
    text-transform: uppercase;
    line-height: 1.1;
}

.cpd-doc-kind {
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 11px;
    letter-spacing: 5px;
    color: #8b7327;
    text-transform: uppercase;
    margin-top: 8px;
}

/* штамп «для служебного пользования» */
.cpd-doc-stamp {
    justify-self: end;
    padding: 8px 12px;
    border: 2px solid rgba(184, 134, 11, .7);
    border-radius: 40px;
    transform: rotate(-8deg);
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #b8860b;
    text-align: center;
    line-height: 1.2;
    opacity: .85;
}

.cpd-doc-title {
    text-align: center;
    margin: 34px 0 30px;
}

.cpd-doc-title h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #16202b;
    line-height: 1.25;
}

.cpd-doc-underline {
    display: block;
    width: 120px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #f0a828, #b8860b);
}

.cpd-doc-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8a97a3;
}

.cpd-doc-meta button {
    font: inherit;
    letter-spacing: 1.4px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(184, 134, 11, .5);
    background: transparent;
    color: #8b7327;
    cursor: pointer;
    transition: .2s;
}

.cpd-doc-meta button:hover {
    background: #b8860b;
    border-color: #b8860b;
    color: #fff;
}

/* текст документа: переопределяем тёмную тему модалки */
.cpd-modal-body .cpd-doc,
.cpd-modal-body .cpd-doc p,
.cpd-modal-body .cpd-doc li,
.cpd-modal-body .cpd-doc td,
.cpd-modal-body .cpd-doc div,
.cpd-modal-body .cpd-doc span {
    color: #24313f;
}

.cpd-modal-body .cpd-doc h1,
.cpd-modal-body .cpd-doc h2,
.cpd-modal-body .cpd-doc h3,
.cpd-modal-body .cpd-doc h4,
.cpd-modal-body .cpd-doc strong,
.cpd-modal-body .cpd-doc b {
    color: #16202b;
}

.cpd-doc-body {
    font-size: 16.5px;
    line-height: 1.85;
}

.cpd-doc-body p {
    margin: 0 0 13px;
}

.cpd-doc-body h3 {
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 17px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin: 30px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(27, 37, 48, .14);
}

.cpd-doc-body ul,
.cpd-doc-body ol {
    padding-left: 24px;
    margin: 0 0 16px;
}

.cpd-doc-body li {
    margin-bottom: 8px;
}

.cpd-doc-body a {
    color: #1d4ed8;
}

.cpd-doc-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 15px;
}

.cpd-doc-body th,
.cpd-doc-body td {
    border: 1px solid rgba(27, 37, 48, .18);
    padding: 9px 12px;
}

.cpd-doc-body th {
    background: rgba(184, 134, 11, .1);
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* служебные префиксы в тексте лекции */
.cpd-modal-body .cpd-doc .doc-ooc {
    color: #8a97a3;
    font-weight: 700;
}

.cpd-modal-body .cpd-doc .doc-me {
    color: #a1367f;
    font-weight: 700;
}

.cpd-modal-body .cpd-doc .doc-do {
    color: #9a6512;
    font-weight: 700;
}

.cpd-modal-body .cpd-doc .doc-radio {
    color: #1d6b3f;
    font-weight: 700;
}

.cpd-doc-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid rgba(27, 37, 48, .16);
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #94a1ad;
}

@media (max-width: 720px) {
    .cpd-doc {
        padding: 34px 22px 24px;
    }

    .cpd-doc-head {
        grid-template-columns: 48px 1fr;
        gap: 14px;
    }

    .cpd-doc-logo {
        width: 44px;
        height: 44px;
    }

    .cpd-doc-stamp {
        display: none;
    }

    .cpd-doc-unit {
        font-size: 22px;
    }

    .cpd-doc-title h2 {
        font-size: 23px;
    }

    .cpd-doc-body {
        font-size: 15.5px;
    }
}

@media print {
    .cpd-modal-close,
    .cpd-doc-meta button {
        display: none;
    }
}

/* ==========================================================================
   ДОБАВЛЕНО: панель действий графика и меню ячейки
   ========================================================================== */

#patrol-wiki .cpd-actions {
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

#patrol-wiki .cpd-actions-sep {
    width: 1px;
    height: 26px;
    background: var(--line-strong);
    margin: 0 4px;
}

#patrol-wiki .cpd-week-pick {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: var(--panel-2);
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
}

#patrol-wiki .cpd-week-pick i {
    color: var(--gold);
}

#patrol-wiki .cpd-week-pick input[type="date"] {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13.5px;
    font-family: var(--mono);
    cursor: pointer;
    color-scheme: dark;
}

/* ячейка: поле задачи + кнопка меню */

#patrol-wiki .cell-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

#patrol-wiki .cell-wrap .cell-input {
    flex: 1;
    min-width: 0;
    text-align: center;
}

#patrol-wiki .cell-menu {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
}

#patrol-wiki td:hover .cell-menu,
#patrol-wiki .cell-menu:focus-visible {
    opacity: 1;
}

#patrol-wiki .cell-menu:hover {
    background: var(--gold);
    color: #16202b;
}

/* всплывающее меню */

.cpd-cell-popup {
    position: absolute;
    z-index: 1300;
    min-width: 210px;
    max-height: 340px;
    overflow-y: auto;
    padding: 8px;
    background: #1b2734;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}

.cpd-cell-popup[hidden] {
    display: none;
}

.cpd-cell-popup-title {
    padding: 8px 10px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6c8098;
}

.cpd-cell-popup button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #cbd9e7;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.cpd-cell-popup button:hover {
    background: rgba(240, 168, 40, .16);
    color: #fff;
}

.cpd-cell-popup .dot {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #243342;
}

.cpd-cell-popup .dot.st-done {
    background: #22c55e;
}

.cpd-cell-popup .dot.st-failed {
    background: #e2453c;
}

.cpd-cell-popup .dot.st-warned {
    background: #3b7ddd;
}

.cpd-cell-popup .dot.st-no_position {
    background: #f0a828;
}

.cpd-cell-popup .dot.st-day_off {
    background: #14b8a6;
}

/* цветовые метки блоков графика в меню строки */
.cpd-cell-popup .dot.gr-chief {
    background: #e2453c;
}

.cpd-cell-popup .dot.gr-inspector {
    background: #f0a828;
}

.cpd-cell-popup .dot.gr-curator {
    background: #a855f7;
}

/* имя в ячейке остаётся по левому краю */
#patrol-wiki td.name .cell-wrap .name-input {
    text-align: left;
}

/* ==========================================================================
   ИНСТРУКЦИЯ ПО ГРАФИКУ
   ========================================================================== */

#patrol-wiki .cpd-help {
    margin-bottom: 20px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: var(--r-md);
    overflow: hidden;
}

#patrol-wiki .cpd-help summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    cursor: pointer;
    color: #dbe6f2;
    font-size: 14.5px;
    font-weight: 600;
    list-style: none;
    user-select: none;
    transition: background .18s;
}

#patrol-wiki .cpd-help summary::-webkit-details-marker {
    display: none;
}

#patrol-wiki .cpd-help summary:hover {
    background: var(--panel-3);
}

#patrol-wiki .cpd-help summary > i:first-child {
    color: var(--gold);
    font-size: 17px;
}

#patrol-wiki .cpd-help-arrow {
    margin-left: auto;
    color: var(--faint);
    transition: transform .2s;
}

#patrol-wiki .cpd-help[open] .cpd-help-arrow {
    transform: rotate(180deg);
}

#patrol-wiki .cpd-help-body {
    padding: 6px 22px 24px;
    border-top: 1px solid var(--line);
}

#patrol-wiki .cpd-help-step {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

#patrol-wiki .cpd-help-step:last-child {
    border-bottom: none;
}

#patrol-wiki .cpd-help-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(240, 168, 40, .16);
    color: var(--gold-2);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
}

#patrol-wiki .cpd-help-step.danger .cpd-help-num {
    background: rgba(226, 69, 60, .18);
    color: #ff8f88;
}

#patrol-wiki .cpd-help-step b {
    display: block;
    margin-bottom: 7px;
    color: #fff;
    font-size: 15px;
}

#patrol-wiki .cpd-help-step p {
    margin: 0 0 9px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

#patrol-wiki .cpd-help-step p:last-child {
    margin-bottom: 0;
}

#patrol-wiki .cpd-help-step p b {
    display: inline;
    margin: 0;
    font-size: inherit;
    color: var(--gold-2);
}

#patrol-wiki .cpd-help-warn {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px !important;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    background: rgba(226, 69, 60, .1);
    color: #ffb3ad !important;
}

#patrol-wiki .cpd-help-warn i {
    color: var(--red);
    margin-top: 3px;
}

/* ------------------------------------------------ сворачивание меню */
/* Классы кнопок (.cpd-nav) не менялись — их знает cpd_wiki.js.
   В свёрнутом виде остаются иконки, подпись всплывает из data-label. */

#patrol-wiki .cpd-side {
    transition: width .25s ease, padding .25s ease;
}

#patrol-wiki .cpd-side-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 22px;
    padding: 11px 14px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

#patrol-wiki .cpd-side-toggle:hover {
    border-color: rgba(240, 168, 40, .45);
    color: #fff;
}

#patrol-wiki .cpd-side-toggle i {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    color: var(--gold);
    transition: transform .25s ease;
}

#patrol-wiki .cpd-side-toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

#patrol-wiki .cpd-app.is-collapsed .cpd-side-toggle i {
    transform: rotate(180deg);
}

/* ---------- свёрнутое состояние ---------- */

#patrol-wiki .cpd-app.is-collapsed .cpd-side {
    width: 84px;
    padding: 26px 12px;
}

#patrol-wiki .cpd-app.is-collapsed .cpd-brand {
    justify-content: center;
    gap: 0;
    padding-bottom: 18px;
}

#patrol-wiki .cpd-app.is-collapsed .cpd-brand > div:last-child,
#patrol-wiki .cpd-app.is-collapsed .cpd-side-title,
#patrol-wiki .cpd-app.is-collapsed .cpd-tag:not(.live),
#patrol-wiki .cpd-app.is-collapsed .cpd-nav > span:not(.cpd-tag),
#patrol-wiki .cpd-app.is-collapsed .cpd-side-toggle > span {
    display: none;
}

#patrol-wiki .cpd-app.is-collapsed .cpd-brand-badge {
    width: 46px;
    height: 46px;
    font-size: 19px;
}

#patrol-wiki .cpd-app.is-collapsed .cpd-nav,
#patrol-wiki .cpd-app.is-collapsed .cpd-side-toggle {
    justify-content: center;
    gap: 0;
    padding: 13px 0;
    position: relative;
}

#patrol-wiki .cpd-app.is-collapsed .cpd-nav:hover {
    transform: none;
}

#patrol-wiki .cpd-app.is-collapsed .cpd-nav i {
    width: auto;
    font-size: 18px;
}

/* непроверенные отчёты сжимаются в точку у края иконки */
#patrol-wiki .cpd-app.is-collapsed .cpd-nav .cpd-tag.live {
    position: absolute;
    top: 7px;
    right: 12px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 0;
    border-radius: 50%;
}

/* ---------- всплывающая подпись ---------- */

#patrol-wiki .cpd-app.is-collapsed .cpd-nav::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 13px;
    border-radius: var(--r-sm);
    background: var(--panel-3);
    border: 1px solid rgba(240, 168, 40, .35);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 50;
}

#patrol-wiki .cpd-app.is-collapsed .cpd-nav:hover::after {
    opacity: 1;
}

/* ---------- на узких экранах меню снова лентой ---------- */

@media (max-width: 1100px) {
    #patrol-wiki .cpd-app.is-collapsed {
        flex-direction: column;
        height: auto;
    }

    #patrol-wiki .cpd-app.is-collapsed .cpd-side,
    #patrol-wiki .cpd-side {
        width: 100%;
        padding: 12px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #patrol-wiki .cpd-brand,
    #patrol-wiki .cpd-side-title,
    #patrol-wiki .cpd-side-toggle {
        display: none;
    }

    #patrol-wiki .cpd-nav {
        width: auto;
        margin-bottom: 0;
        white-space: nowrap;
        padding: 11px 16px;
    }

    #patrol-wiki .cpd-nav:hover {
        transform: none;
    }

    #patrol-wiki .cpd-nav::after {
        content: none;
    }
}