.pe-copy-body {
    margin: 0;
    background: #edf2f6;
}

.pe-copy {
    --pe-blue: #1f75bb;
    --pe-blue-dark: #195f98;
    --pe-gold: #f5a400;
    --pe-border: #d9e1e8;
    --pe-text: #334150;
    --pe-muted: #73808c;
    --pe-bg: #edf2f6;
    background: var(--pe-bg);
    color: var(--pe-text);
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
}

.pe-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.pe-profile-cover {
    position: relative;
    min-height: 238px;
    background: linear-gradient(90deg, rgba(22, 67, 105, 0.78), rgba(31, 117, 187, 0.22)), var(--pe-cover) center/cover no-repeat;
}

.pe-topbar {
    display: flex;
    justify-content: center;
    gap: 14px;
    align-items: center;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.94);
    color: #334150;
    font-size: 14px;
    border-bottom: 1px solid rgba(217, 225, 232, 0.9);
}

.pe-topbar strong {
    color: var(--pe-blue);
}

.pe-profile-head {
    display: grid;
    grid-template-columns: 190px 1fr 190px;
    gap: 22px;
    align-items: end;
    margin-top: -82px;
    position: relative;
    z-index: 2;
}

.pe-avatar-wrap {
    width: 186px;
    height: 186px;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid var(--pe-border);
    box-shadow: 0 8px 20px rgba(28, 48, 66, 0.18);
    padding: 7px;
}

.pe-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

.pe-profile-title,
.pe-head-score,
.pe-panel,
.pe-disclaimer,
.pe-stream-head,
.pe-review-card,
.pe-empty {
    background: #ffffff;
    border: 1px solid var(--pe-border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(28, 48, 66, 0.08);
}

.pe-profile-title {
    min-height: 146px;
    padding: 22px 24px;
}

.pe-copy-label {
    margin: 0 0 8px;
    color: var(--pe-blue);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.pe-profile-title h1 {
    margin: 0 0 7px;
    color: #24313e;
    font-size: 32px;
    line-height: 1.15;
}

.pe-profile-title p:not(.pe-copy-label) {
    margin: 0;
    color: var(--pe-muted);
    font-size: 16px;
}

.pe-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 18px;
    font-size: 14px;
}

.pe-profile-actions a {
    color: var(--pe-blue);
    font-weight: 700;
    text-decoration: none;
}

.pe-head-score {
    min-height: 146px;
    padding: 20px;
    text-align: center;
}

.pe-head-score strong {
    display: block;
    color: var(--pe-blue);
    font-size: 40px;
    line-height: 1;
}

.pe-stars {
    display: block;
    color: var(--pe-gold);
    font-size: 19px;
    letter-spacing: 0;
    margin: 6px 0 4px;
}

.pe-stars-large {
    font-size: 24px;
}

.pe-disclaimer {
    margin-top: 18px;
    padding: 14px 18px;
    color: #4b5a66;
    border-left: 4px solid var(--pe-blue);
    line-height: 1.5;
}

.pe-layout {
    display: grid;
    grid-template-columns: 306px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 22px 0 54px;
}

.pe-sidebar {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 18px;
}

.pe-panel {
    padding: 18px;
}

.pe-score-card {
    text-align: center;
}

.pe-score-main {
    color: var(--pe-blue);
    font-size: 56px;
    line-height: 1;
    font-weight: 700;
}

.pe-score-card strong {
    display: block;
    font-size: 20px;
    margin-bottom: 10px;
}

.pe-score-card p {
    margin: 6px 0;
    color: var(--pe-muted);
    font-size: 14px;
}

.pe-panel h2,
.pe-stream-head h2 {
    margin: 0 0 14px;
    color: var(--pe-blue);
    font-size: 21px;
    font-weight: 400;
}

.pe-bar-row {
    display: grid;
    grid-template-columns: 58px 1fr 34px;
    gap: 8px;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    color: #42515e;
    font: inherit;
    font-size: 13px;
    padding: 5px 0;
    cursor: pointer;
    text-align: left;
}

.pe-bar-row:hover span {
    color: var(--pe-blue);
    text-decoration: underline;
}

.pe-bar-row i {
    display: block;
    height: 13px;
    background: #eef3f7;
    border: 1px solid #d2dce5;
    border-radius: 2px;
    overflow: hidden;
}

.pe-bar-row b {
    display: block;
    height: 100%;
    background: var(--pe-gold);
}

.pe-bar-row em {
    color: var(--pe-muted);
    font-style: normal;
    text-align: right;
}

.pe-filter-panel label,
.pe-stream-head label {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    color: #4c5a67;
    font-size: 13px;
    font-weight: 700;
}

.pe-filter-panel input,
.pe-filter-panel select,
.pe-stream-head select {
    width: 100%;
    height: 38px;
    border: 1px solid #c7d2dc;
    border-radius: 3px;
    background: #ffffff;
    color: #293744;
    font: inherit;
    font-weight: 400;
    padding: 0 10px;
}

.pe-filter-panel button,
.pe-load-row button {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--pe-blue-dark);
    border-radius: 3px;
    background: var(--pe-blue);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.pe-stream {
    display: grid;
    gap: 14px;
}

.pe-stream-head {
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 16px;
    align-items: end;
    padding: 18px;
}

.pe-stream-head h2 {
    margin-bottom: 0;
}

.pe-stream-head label {
    margin-bottom: 0;
}

.pe-review-list {
    display: grid;
    gap: 14px;
}

.pe-review-card {
    display: grid;
    grid-template-columns: 142px 1fr;
    min-height: 158px;
}

.pe-review-score {
    padding: 18px 14px;
    text-align: center;
    border-right: 1px solid var(--pe-border);
}

.pe-review-score strong {
    display: block;
    color: var(--pe-blue);
    font-size: 24px;
    line-height: 1;
}

.pe-review-score span:last-child {
    display: block;
    color: #5f6e7c;
    font-size: 13px;
    margin-top: 7px;
}

.pe-review-body {
    padding: 18px 20px 16px;
}

.pe-review-text {
    margin: 0 0 18px;
    color: #293744;
    font-size: 16px;
    line-height: 1.58;
    white-space: pre-line;
}

.pe-review-topic-box {
    border-top: 1px solid #eef2f5;
    padding-top: 13px;
    color: #5e6d7a;
    font-size: 13px;
}

.pe-review-topic-box strong {
    display: block;
    color: #354350;
    font-size: 14px;
    margin-top: 3px;
}

.pe-review-subline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 12px;
    color: #77838e;
    font-size: 13px;
}

.pe-review-subline span:first-child {
    color: #aeb8c2;
    font-size: 11px;
}

.pe-load-row {
    padding: 4px 0 0;
}

.pe-empty {
    padding: 24px;
    color: var(--pe-muted);
}

@media (max-width: 940px) {
    .pe-profile-head,
    .pe-layout {
        grid-template-columns: 1fr;
    }

    .pe-profile-head {
        margin-top: -72px;
    }

    .pe-avatar-wrap {
        margin: 0 auto;
    }

    .pe-sidebar {
        position: static;
    }
}

@media (max-width: 650px) {
    .pe-shell {
        width: min(100% - 22px, 1120px);
    }

    .pe-topbar,
    .pe-profile-actions {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 14px;
    }

    .pe-profile-cover {
        min-height: 190px;
    }

    .pe-profile-title h1 {
        font-size: 27px;
    }

    .pe-stream-head,
    .pe-review-card {
        grid-template-columns: 1fr;
    }

    .pe-review-score {
        border-right: 0;
        border-bottom: 1px solid var(--pe-border);
    }
}

.pe-simple-footer {
    display: flex;
    justify-content: center;
    padding: 32px 16px 46px;
    background: var(--pe-bg);
}

.pe-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid var(--pe-blue-dark);
    border-radius: 3px;
    background: var(--pe-blue);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    padding: 0 20px;
}

.pe-back-button:hover,
.pe-back-button:focus {
    background: var(--pe-blue-dark);
    color: #ffffff;
    text-decoration: none;
}