.ph-shoutbox { width: 100%; box-sizing: border-box; }

.ph-shoutbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    font-weight: 700;
    padding: 8px 10px;
    border: 1px solid #0a6ed1;
    background: rgba(10, 110, 209, .15);
    color: #0af;
    border-radius: 4px 4px 0 0;
}

.ph-shoutbox-messages {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid #0a6ed1;
    border-top: none;
    background: rgba(2, 8, 20, .6);
    padding: 6px 0;
}

.ph-shoutbox-menu .ph-shoutbox-messages { max-height: 220px; }

.ph-shoutbox-message {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    font-size: .9em;
    line-height: 1.45;
    word-break: break-word;
}

.ph-shoutbox-message:hover { background: rgba(10, 110, 209, .08); }
.ph-shoutbox-message-own { background: rgba(26, 138, 58, .08); }
.ph-shoutbox-message-deleted,
.ph-shoutbox-message-hidden { opacity: .55; }

.ph-shoutbox-avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(10, 110, 209, .35);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8em;
    overflow: hidden;
}

.ph-shoutbox-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.ph-shoutbox-content { flex: 1 1 auto; min-width: 0; }

.ph-shoutbox-user { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

.ph-shoutbox-username { font-weight: 700; color: #7cf; }

.ph-shoutbox-group { font-size: .75em; color: #6a8aaa; }

.ph-shoutbox-text { color: #d9ecff; }

.ph-shoutbox-edit-note { color: #6a8aaa; font-size: .75em; }

.ph-shoutbox-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.ph-shoutbox-time { font-size: .72em; color: #6a8aaa; }

.ph-shoutbox-actions { display: inline-flex; gap: 2px; }

.ph-shoutbox-action {
    background: none;
    border: none;
    color: #6a8aaa;
    cursor: pointer;
    font-size: .9em;
    padding: 0 3px;
    text-decoration: none;
}

.ph-shoutbox-action:hover { color: #0af; }

.ph-shoutbox-empty,
.ph-shoutbox-note {
    padding: 12px;
    color: #6a8aaa;
    text-align: center;
    font-size: .9em;
}

.ph-shoutbox-form { padding: 8px 10px; border: 1px solid #0a6ed1; border-top: none; background: rgba(10, 110, 209, .05); }

.ph-shoutbox-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    background: #0a1628;
    border: 1px solid #0a6ed1;
    color: #d9ecff;
    font-family: inherit;
    border-radius: 4px;
    resize: vertical;
}

.ph-shoutbox-form-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

.ph-shoutbox-button {
    padding: 6px 14px;
    background: #0a6ed1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: .85em;
}

.ph-shoutbox-button:hover { background: #0a8af0; }

.ph-char-count { margin-left: auto; color: #6a8aaa; font-size: .75em; }

.ph-emote { display: inline-block; vertical-align: middle; width: 18px; height: 18px; object-fit: contain; margin: 0 1px; }

.ph-smiley-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 4px;
    padding: 8px;
    margin-top: 8px;
    background: #0a1628;
    border: 1px solid #0a6ed1;
    border-radius: 6px;
    max-height: 160px;
    overflow-y: auto;
}
.ph-smiley {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    line-height: 0;
}
.ph-smiley:hover { background: rgba(10, 110, 209, .25); }
.ph-smiley .ph-emote { width: 22px; height: 22px; }

.ph-alert { padding: 8px 10px; margin-bottom: 8px; border-radius: 4px; font-size: .88em; }
.ph-success { background: rgba(26, 138, 58, .2); border: 1px solid #1a8a3a; color: #5f5; }
.ph-error { background: rgba(204, 51, 51, .2); border: 1px solid #c33; color: #f55; }

.ph-shoutbox-private-link { text-decoration: none; font-size: .85em; color: #8ab; }
.ph-shoutbox-private-link:hover { color: #0af; }

.ph-shoutbox-unread {
    background: #c33;
    color: #fff;
    border-radius: 9px;
    padding: 0 7px;
    font-size: .8em;
    font-weight: 700;
}

.ph-shoutbox-muted { opacity: .5; }

.ph-user-menu { position: relative; display: inline-block; }

.ph-user-menu-toggle {
    background: none;
    border: none;
    color: #7cf;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
}

.ph-user-menu-popup {
    display: none;
    position: absolute;
    z-index: 50;
    left: 0;
    top: 100%;
    min-width: 160px;
    background: #0a1628;
    border: 1px solid #0a6ed1;
    border-radius: 4px;
    padding: 6px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}

.ph-user-menu-popup.open { display: block; }

.ph-user-menu-popup a,
.ph-user-menu-popup button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 12px;
    background: none;
    border: none;
    color: #d9ecff;
    cursor: pointer;
    font-size: .85em;
    text-decoration: none;
    box-sizing: border-box;
}

.ph-user-menu-popup a:hover,
.ph-user-menu-popup button:hover { background: rgba(10, 110, 209, .15); color: #0af; }

.ph-captcha { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .85em; color: #8ab; }
.ph-captcha-input { width: 60px !important; }

.ph-shoutbox-private { border: 1px solid #0a6ed1; border-radius: 4px; overflow: hidden; }

.ph-pm-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: rgba(10, 110, 209, .1); }

.ph-pm-tab {
    padding: 5px 12px;
    border: 1px solid #0a6ed1;
    border-radius: 4px;
    color: #8ab;
    text-decoration: none;
    font-size: .85em;
}

.ph-pm-tab:hover { color: #0af; }
.ph-pm-tab-active { background: #0a6ed1; color: #fff; }
.ph-pm-new { margin-left: auto; background: #1a8a3a; border-color: #1a8a3a; color: #fff; }

.ph-pm-content { padding: 8px; }

.ph-pm-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid rgba(10, 110, 209, .2);
    font-size: .88em;
}

.ph-pm-row:hover { background: rgba(10, 110, 209, .08); }
.ph-pm-unread { background: rgba(204, 51, 51, .1); }
.ph-pm-from { font-weight: 700; color: #7cf; }
.ph-pm-subject a { color: #d9ecff; text-decoration: none; }
.ph-pm-subject a:hover { color: #0af; }
.ph-pm-date, .ph-pm-status { color: #6a8aaa; }

.ph-pm-actions .ph-inline-form { display: inline; }
.ph-link-delete { background: none; border: none; color: #c33; cursor: pointer; font-size: .8em; }

.ph-pm-conversation { border: 1px solid #0a6ed1; border-radius: 4px; overflow: hidden; }

.ph-pm-conv-header {
    padding: 10px;
    background: rgba(10, 110, 209, .15);
    color: #0af;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
}

.ph-pm-back { color: #8ab; text-decoration: none; font-weight: 400; font-size: .85em; }

.ph-pm-messages { max-height: 420px; overflow-y: auto; padding: 10px; }

.ph-pm-message { margin-bottom: 10px; max-width: 80%; }

.ph-pm-message-theirs { margin-right: auto; }
.ph-pm-message-mine { margin-left: auto; text-align: right; }

.ph-pm-message-head { font-size: .78em; color: #6a8aaa; margin-bottom: 2px; }

.ph-pm-message-body {
    display: inline-block;
    text-align: left;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(10, 110, 209, .12);
    border: 1px solid #0a6ed1;
    color: #d9ecff;
    font-size: .9em;
    word-break: break-word;
}

.ph-pm-form { padding: 10px; border-top: 1px solid #0a6ed1; }

.ph-pm-field { margin-bottom: 10px; }
.ph-pm-field label { display: block; color: #8ab; font-size: .85em; margin-bottom: 3px; }

.ph-pm-compose select,
.ph-pm-compose .ph-input { width: 100%; box-sizing: border-box; padding: 8px; background: #0a1628; border: 1px solid #0a6ed1; color: #d9ecff; font-family: inherit; border-radius: 4px; }

.ph-pm-blocked-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid rgba(10, 110, 209, .2);
}

.ph-report-form { padding: 10px; border: 1px solid #0a6ed1; border-radius: 4px; max-width: 560px; }

.ph-report-field { margin-bottom: 10px; }
.ph-report-field label { display: block; color: #8ab; font-size: .85em; margin-bottom: 4px; }
.ph-report-reason { display: inline-block; margin-right: 12px; color: #d9ecff; font-size: .9em; }

.ph-quote {
    border-left: 3px solid #0a6ed1;
    padding: 4px 10px;
    margin: 6px 0;
    background: rgba(10, 110, 209, .08);
    color: #8ab;
}

.ph-code {
    display: inline-block;
    background: #0a1628;
    border: 1px solid #0a6ed1;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: Consolas, monospace;
    font-size: .85em;
}

.ph-link { color: #4da6ff; }

.ph-shoutbox-form textarea.ph-shoutbox-input { min-height: 44px; }

/* Admin */
.psb-admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; }

.psb-tab {
    padding: 6px 14px;
    border: 1px solid #0a6ed1;
    border-radius: 4px;
    color: #8ab;
    text-decoration: none;
    font-size: .88em;
}

.psb-tab:hover { color: #0af; }
.psb-tab-active { background: #0a6ed1; color: #fff; }

.psb-filter { margin-bottom: 15px; }
.psb-filter input[type="text"],
.psb-filter select { background: #0a1628; border: 1px solid #0a6ed1; color: #d9ecff; padding: 6px; border-radius: 4px; }

.psb-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: .72em;
    background: rgba(10, 110, 209, .2);
    color: #8ab;
    margin-right: 3px;
}

.psb-badge-del { background: rgba(204, 51, 51, .25); color: #f66; }
.psb-badge-ok { background: rgba(26, 138, 58, .25); color: #5f5; }

.psb-actions { white-space: nowrap; }
.psb-actions .btn { margin-right: 3px; }

.psb-bulk { margin-top: 10px; }
.psb-bulk select { background: #0a1628; border: 1px solid #0a6ed1; color: #d9ecff; padding: 6px; border-radius: 4px; }

.psb-pager { margin-top: 14px; display: flex; gap: 4px; flex-wrap: wrap; }
.psb-page { padding: 4px 10px; border: 1px solid #0a6ed1; border-radius: 3px; color: #8ab; text-decoration: none; font-size: .85em; }
.psb-page-current { background: #0a6ed1; color: #fff; }

@media (max-width: 640px) {
    .ph-pm-row { grid-template-columns: 1fr 2fr; }
    .ph-pm-date, .ph-pm-status { display: none; }
    .ph-pm-message { max-width: 100%; }
}