.ps {
    width: min(100% - 24px, var(--nic-container));
    margin: 18px auto 40px;
}

.ps-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, .72fr);
    gap: 20px;
    min-height: 320px;
    padding: 28px 28px 18px;
    overflow: hidden;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 48%, rgba(255, 255, 255, .2) 100%);
}

.ps-kicker {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #5c6b88;
}

.ps-hero h1 {
    margin: 0;
    max-width: 640px;
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.02;
}

.ps-hero h1 span { color: var(--nic-orange); }

.ps-lead {
    max-width: 620px;
    margin: 12px 0 0;
    color: var(--nic-muted);
}

.ps-search {
    display: flex;
    gap: 12px;
    max-width: 760px;
    margin-top: 18px;
}

.ps-search-box,
.ps-dept {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #d7e1ee;
    border-radius: 12px;
    background: #fff;
}

.ps-search-box { flex: 1; }
.ps-dept { flex: 0 0 210px; }
.ps-search i { color: #8b97ab; }
.ps-search input,
.ps-search select {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--nic-ink);
    font: inherit;
    font-size: 14.5px;
}
.ps-search input:focus,
.ps-search select:focus { outline: none; }
.ps-search-box:focus-within,
.ps-dept:focus-within { border-color: var(--nic-orange); box-shadow: 0 0 0 3px rgba(244, 106, 10, .14); }

.ps-steps {
    display: flex;
    gap: 22px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.ps-steps li,
.ps-steps a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #8b95a8;
    font-size: 13px;
    text-decoration: none;
}

.ps-steps span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: #e7edf5;
    color: #607089;
    font-size: 12px;
    font-weight: 800;
}

.ps-steps i { display: none; }
.ps-steps strong { color: #31415f; font-size: 14px; }
.ps-steps small { color: #8b95a8; }
.ps-steps .is-current { color: var(--nic-orange); }
.ps-steps .is-current span { background: var(--nic-orange); color: #fff; }
.ps-steps .is-current strong { color: var(--nic-orange); }
.ps-steps .is-current small { color: #e07a2f; }
.ps-steps .is-current strong::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 4px;
    border-radius: 3px;
    background: var(--nic-orange);
}

.ps-hero-art {
    position: relative;
    min-height: 280px;
}

.ps-hero-art img {
    position: absolute;
    inset: -28px -28px -18px auto;
    width: 118%;
    height: calc(100% + 46px);
    object-fit: cover;
    object-position: 70% 45%;
    mask-image: linear-gradient(90deg, transparent, #000 18%);
}

.ps-sky {
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 8px;
    margin: 0;
    color: #12306a;
    font-size: 1.45rem;
}

.ps-heritage {
    position: absolute;
    z-index: 1;
    top: 8px;
    right: 0;
    margin: 0;
    color: #12306a;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: right;
}

.ps-heritage::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin: 8px 0 0 auto;
    border-radius: 4px;
    background: var(--nic-orange);
}

.ps-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 18px;
    margin-top: -42px;
    align-items: start;
}

.ps-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 4px 10px;
}

.ps-list h2 { margin: 0; font-size: 1.25rem; }
.ps-list-head p { margin: 0; color: #7d8aa0; font-size: 13px; font-weight: 600; }

.ps-table-wrap {
    overflow-x: auto;
    border: 1px solid #e6edf6;
    border-radius: 16px;
    background: #fff;
}

.ps table { width: 100%; border-collapse: separate; border-spacing: 0 8px; padding: 0 8px 8px; }
.ps th {
    padding: 8px 10px 0;
    color: #8b95a8;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}
.ps td {
    padding: 12px 10px;
    background: #fff;
    border-top: 1px solid #eef2f8;
    border-bottom: 1px solid #eef2f8;
    vertical-align: middle;
}
.ps td:first-child { border-left: 1px solid #eef2f8; border-radius: 12px 0 0 12px; }
.ps td:last-child { border-right: 1px solid #eef2f8; border-radius: 0 12px 12px 0; }
.ps tr.is-selected td { border-color: #ffc599; background: #fff8f3; }
.ps .ps-no {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef3fb;
    color: var(--nic-navy);
    font-size: 12px;
    font-weight: 800;
}
.ps tr.is-selected .ps-no { background: var(--nic-orange); color: #fff; }
.ps .ps-id { color: #607089; font-weight: 700; white-space: nowrap; }
.ps .ps-title { display: block; color: var(--nic-navy); font-weight: 800; }
.ps .ps-summary { display: block; margin-top: 2px; color: #66758f; font-size: 13px; font-weight: 500; }
.ps .ps-dept { display: flex; align-items: center; gap: 8px; color: #31415f; font-weight: 700; font-size: 13.5px; }
.ps .ps-dept i,
.ps-panel-title > i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e8f1ff;
    color: #2f6fd0;
}
.ps .ps-dept i.is-green,
.ps-panel-title > i.is-green { background: #e7f8ee; color: #1f9d55; }
.ps .ps-dept i.is-red,
.ps-panel-title > i.is-red { background: #ffe8ea; color: #d64550; }
.ps .ps-dept i.is-navy,
.ps-panel-title > i.is-navy { background: #e8eefb; color: #14386f; }
.ps-view {
    border: 0;
    background: transparent;
    color: #2f6fd0;
    font: inherit;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}
.ps tr.is-selected .ps-view {
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--nic-orange);
    color: #fff;
}

.ps-empty { margin: 12px 4px; color: var(--nic-muted); font-weight: 600; }

.ps-panel {
    position: relative;
    padding: 22px 20px 18px;
    border: 1px solid #e6edf6;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px -28px rgba(11, 31, 92, .7);
}
.ps-panel[hidden] { display: none; }
.ps-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f4f7fb;
    color: #607089;
    cursor: pointer;
}
.ps-code { margin: 0 0 4px; color: #8b95a8; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.ps-panel h2 { margin: 0 28px 14px 0; font-size: 1.35rem; }
.ps-panel-title { display: flex; gap: 12px; align-items: flex-start; }
.ps-panel-title > i {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    font-size: 18px;
}
.ps-panel-title h3 { margin: 0; font-size: 1.05rem; }
.ps-panel-title p { margin: 2px 0 0; color: #66758f; font-size: 13.5px; font-weight: 600; }
.ps-panel section { margin-top: 16px; }
.ps-panel h4 { margin: 0 0 6px; color: var(--nic-navy); font-size: 14px; }
.ps-panel h4 i { margin-right: 6px; color: #2f6fd0; }
.ps-panel section p { margin: 0; color: #4d5876; font-size: 14px; }
.ps-panel ul { margin: 0; padding-left: 1.1rem; color: #4d5876; font-size: 14px; }
.ps-panel li + li { margin-top: 4px; }
.ps-panel li::marker { color: var(--nic-orange); }
.ps-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    min-height: 48px;
    border-radius: 10px;
    background: var(--nic-orange);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}
.ps-select:hover { background: var(--nic-orange-600); color: #fff; }

@media (max-width: 1100px) {
    .ps-hero,
    .ps-board { grid-template-columns: 1fr; }
    .ps-board { margin-top: 16px; }
    .ps-hero-art { min-height: 220px; }
    .ps-hero-art img { position: relative; inset: auto; width: 100%; height: 220px; mask-image: none; border-radius: 16px; }
}

@media (max-width: 720px) {
    .ps-search,
    .ps-steps,
    .ps-list-head { flex-direction: column; align-items: stretch; }
    .ps-dept { flex-basis: auto; }
    .ps-steps { gap: 12px; }
}