:root {
    color-scheme: light;
    --blue: #4b6f91;
    --blue-dark: #2b587a;
    --line: #cfd8e1;
    --soft: #eef3f8;
    --page: #ffffff;
    --background: #e9edf1;
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
    margin: 0;
    background: var(--background);
    color: #222;
    font: 12px/1.45 Tahoma, Verdana, Arial, sans-serif;
}

a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.page {
    width: min(760px, calc(100% - 24px));
    margin: 24px auto;
    background: var(--page);
    border: 1px solid #b7c5d2;
}

.push-permission-prompt {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
    display: grid;
    grid-template-columns: 36px minmax(180px, 1fr) auto auto;
    gap: 9px;
    align-items: center;
    width: min(520px, calc(100vw - 36px));
    padding: 11px;
    border: 1px solid #8ca6bc;
    border-radius: 9px;
    background: #f4f8fb;
    color: #29475f;
    box-shadow: 0 5px 18px rgba(32, 51, 67, .24);
}

.push-permission-prompt > .fa-bell {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #4f7699;
    color: #fff;
    font-size: 16px;
}

.push-permission-prompt strong,
.push-permission-prompt span {
    display: block;
}

.push-permission-prompt span {
    margin-top: 2px;
    color: #607385;
    font-size: 12px;
}

.push-permission-prompt .button {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .push-permission-prompt {
        right: 10px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        grid-template-columns: 34px minmax(0, 1fr) auto;
        width: calc(100vw - 20px);
        padding: 10px;
    }

    .push-permission-prompt > .icon-action-button {
        position: absolute;
        top: -9px;
        right: -4px;
        width: 28px;
        min-width: 28px;
        height: 28px;
        border-radius: 50%;
    }
}

.page-wide {
    width: min(960px, calc(100% - 24px));
}

.header {
    min-height: 34px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--blue);
    border-bottom: 1px solid #365772;
    color: #fff;
}

.logo { color: #fff; font-size: 14px; font-weight: bold; letter-spacing: .3px; }
.logo:hover { text-decoration: none; }

.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 12px; }
.nav a, .link-button { color: #fff; font: inherit; }
.nav .is-unread { font-weight: bold; }
.nav-form { display: inline; margin: 0; }
.link-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.link-button:hover { text-decoration: underline; }

.content { min-height: 180px; padding: 18px; overflow-wrap: anywhere; }
.footer { padding: 8px 14px; border-top: 1px solid #d8e0e7; background: #f5f7f9; color: #6f7780; font-size: 10px; }

h1, h2, h3 { color: #2d455b; font-weight: normal; }
h1 { margin: 0 0 16px; font-size: 19px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }

table { max-width: 100%; border-collapse: collapse; }
td, th { vertical-align: top; }
img { max-width: 100%; height: auto; }

input, textarea, select, button {
    max-width: 100%;
    font: 12px Tahoma, Verdana, Arial, sans-serif;
}

input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea, select {
    padding: 5px 6px;
    border: 1px solid #9eacb8;
    border-radius: 0;
    background: #fff;
}

button, .button {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #365772;
    border-radius: 0;
    background: #5a7fa3;
    color: #fff;
    cursor: pointer;
}

button:hover, .button:hover { background: #4b6f91; text-decoration: none; }
.actions { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.notice { padding: 10px; border: 1px solid var(--line); background: #f7f9fb; color: #5c6670; }
.form-error { color: #a32626; }
.auth-blocked-card { max-width: 520px; margin: 0 0 14px; padding: 12px; border: 1px solid #d5a8a8; background: #fff1f1; color: #5e2e2e; }
.auth-blocked-card strong, .auth-blocked-card h1 { color: #7a2d2d; }
.auth-blocked-card p { margin: 7px 0 0; }
.auth-blocked-page { margin: 0; }
.bot-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.stacked-form { width: 340px; max-width: 100%; }
.stacked-form label { display: block; margin: 0 0 10px; color: #3d4852; }
.stacked-form input { display: block; width: 100%; margin-top: 3px; }
.stacked-form small { color: #68727c; }

.feed-item { padding: 10px 0 14px; border-bottom: 1px solid #dce3e9; }
.feed-item:last-child { border-bottom: 0; }
.feed-meta { margin-bottom: 8px; color: #555; }
.feed-meta span { margin-left: 5px; color: #818a92; font-size: 10px; }
.feed-item img { display: block; max-width: 420px; max-height: 520px; border: 1px solid #ccd5dd; padding: 3px; }
.feed-wall-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; }
.feed-wall-actions a { font-size: 11px; }
.feed-comment-form { display: flex; gap: 5px; margin-top: 6px; }
.feed-comment-form input[type="text"] { flex: 1; min-width: 160px; }

.dialog-row { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 9px; border-bottom: 1px solid #dce3e9; color: #222; text-decoration: none; }
.dialog-row:hover { background: #f7f9fb; text-decoration: none; }
.dialog-row:active { background: #e7eef5; }
.dialog-unread { background: var(--soft); font-weight: bold; }
.dialog-person > * { display: block; }
.online-status { color: #7d858c; font-size: 10px; }
.online-status.online { color: #3c8b3c; }
.profile-link, .dialog-preview span { color: #777; font-size: 10px; }
.dialog-preview span { display: block; margin-top: 4px; }
.dialog-preview { overflow-wrap: anywhere; }

.message-page { display: grid; gap: 10px; }
.message-dialog-header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.message-back { display: inline-block; padding: 5px 7px; border: 1px solid #c3ced8; background: #eef3f8; }
.message-dialog-title { min-width: 0; }
.message-dialog-title h1 { margin: 0 0 2px; font-size: 16px; }
.message-thread { display: flex; flex-direction: column; gap: 7px; min-height: 180px; padding: 8px; border: 1px solid #d4dde6; background: #f5f7f9; }
.message-empty { margin: 0; }
.message-date-separator { align-self: center; margin: 3px 0; padding: 3px 8px; border: 1px solid #c7d0d8; background: #eef3f8; color: #5f6b75; font-size: 10px; }
.message-bubble { width: fit-content; max-width: 78%; padding: 7px 8px; border: 1px solid #c4d2de; background: #fff; box-shadow: 1px 1px 0 rgba(0,0,0,.06); overflow-wrap: anywhere; }
.message-bubble.is-own { align-self: flex-end; background: #e0ebf4; border-color: #aebfd0; }
.message-bubble.is-other { align-self: flex-start; }
.message-bubble.is-unread { outline: 1px solid #88a8c4; }
.message-author { margin-bottom: 3px; color: #2d455b; font-weight: bold; font-size: 11px; }
.message-body { white-space: normal; line-height: 1.4; }
.message-meta { display: flex; justify-content: flex-end; gap: 5px; margin-top: 4px; color: #737d86; font-size: 10px; }
.message-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: end; padding: 8px; border: 1px solid #c6d2dc; background: #eef3f8; }
.message-compose textarea { width: 100%; min-height: 42px; max-height: 140px; resize: vertical; }
.message-compose button { min-width: 96px; }
.message-compose.is-sending button { opacity: .65; cursor: wait; }
.message-compose-status { grid-column: 1 / -1; min-height: 12px; color: #68727c; font-size: 10px; }
.message-new-button { position: fixed; left: 50%; bottom: 74px; z-index: 25; transform: translateX(-50%); border-color: #496f90; background: #eef3f8; color: #2b587a; box-shadow: 2px 2px 0 rgba(0,0,0,.16); }
.message-new-button[hidden] { display: none; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.section-title h2, .section-title h3 { margin: 0 0 7px; }
.section-title span { color: #78828b; font-size: 10px; }

.wall { margin-top: 20px; }
.wall-form { margin: 10px 0 14px; padding: 10px; border: 1px solid var(--line); background: var(--soft); }
.wall-form > label { display: block; margin-bottom: 4px; color: #43566a; font-weight: bold; }
.wall-form textarea { display: block; width: 100%; resize: vertical; }
.textarea-counter { margin-top: 3px; color: #7a858f; font-size: 10px; text-align: right; }
.textarea-counter.is-near-limit { color: #9f3030; }
.wall-form-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.button-secondary { border-color: #9aabb9; background: #eef2f5; color: #324c65; }
.button-secondary:hover { background: #dfe7ed; }
.graffiti-editor { margin-top: 9px; padding: 8px; border: 1px solid #aebdca; background: #dfe7ee; }
.graffiti-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; margin-bottom: 7px; }
.graffiti-toolbar label { display: flex; align-items: center; gap: 5px; color: #455866; }
.graffiti-toolbar-label { color: #455866; white-space: nowrap; }
.graffiti-group { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.graffiti-tools { display: inline-flex; gap: 3px; align-items: center; }
.graffiti-tool { width: 30px; height: 26px; padding: 0; border: 1px solid #7d8f9d; background: #f7f9fb; color: #233f58; line-height: 24px; text-align: center; font-size: 13px; }
.graffiti-tool:hover { background: #e6eef5; }
.graffiti-tool.is-selected { outline: 2px solid #203f5b; background: #fff; }
.graffiti-tool i { pointer-events: none; }
.graffiti-palette { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 320px; }
.graffiti-color { position: relative; display: inline-block; width: 26px; height: 26px; min-height: 0 !important; padding: 0 !important; border: 1px solid #7d8f9d; border-radius: 0; outline: 1px solid #fff; background: #eef3f8 !important; background-image: none !important; color: transparent; -webkit-appearance: none; appearance: none; box-shadow: none; overflow: hidden; }
.graffiti-color::before { content: ""; position: absolute; inset: 3px; display: block; background: var(--graffiti-color); border: 1px solid rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.graffiti-color.color-blue::before { background: #1f4f7a; }
.graffiti-color.color-light-blue::before { background: #5b84aa; }
.graffiti-color.color-sky::before { background: #6aa8d8; }
.graffiti-color.color-teal::before { background: #2f9c9b; }
.graffiti-color.color-purple::before { background: #7a4d9c; }
.graffiti-color.color-pink::before { background: #c24b8a; }
.graffiti-color.color-red::before { background: #d22f2f; }
.graffiti-color.color-orange::before { background: #e2752d; }
.graffiti-color.color-green::before { background: #23823b; }
.graffiti-color.color-light-green::before { background: #72a83a; }
.graffiti-color.color-yellow::before { background: #f2c230; }
.graffiti-color.color-brown::before { background: #8b5b32; }
.graffiti-color.color-black::before { background: #111111; }
.graffiti-color.color-gray::before { background: #666666; }
.graffiti-color.color-silver::before { background: #c9d2dc; }
.graffiti-color.color-white::before { background: #ffffff; }
.graffiti-color.is-selected { outline: 2px solid #203f5b; }
.graffiti-editor canvas { display: block; width: 480px; max-width: 100%; height: auto; aspect-ratio: 8 / 5; border: 1px solid #8797a5; background: #fff; cursor: crosshair; touch-action: none; }
.graffiti-help { margin: 5px 0 0; color: #687784; font-size: 10px; }
.wall-post { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 9px; padding: 10px 0; border-bottom: 1px solid #dce3e9; }
.wall-avatar img { width: 44px; height: 44px; border: 1px solid #c7d0d8; object-fit: cover; }
.wall-post-meta { margin-bottom: 5px; }
.wall-post-meta a { font-weight: bold; }
.wall-post-meta span { margin-left: 5px; color: #818a92; font-size: 10px; }
.wall-post-text { white-space: normal; overflow-wrap: anywhere; }
.wall-graffiti { display: block; width: 480px; max-width: 100%; margin-top: 7px; border: 1px solid #bac6d0; background: #fff; }
.wall-photo { display: block; max-width: 100%; width: min(520px, 100%); margin-top: 7px; border: 1px solid #bac6d0; background: #fff; }
.wall-post-options { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 7px; }
.wall-post-options label { display: grid; gap: 3px; font-size: 11px; color: #455866; }
.wall-font-serif { font-family: Georgia, "Times New Roman", serif; font-size: 14px; }
.wall-font-mono { font-family: "Courier New", monospace; }
.wall-font-hand { font-family: "Comic Sans MS", "Trebuchet MS", cursive; font-size: 14px; }
.wall-post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; color: #6f7780; font-size: 11px; }
.wall-like-form { margin: 0; }
.wall-like-form button { min-height: 0; padding: 3px 8px; }
.wall-comments { margin-top: 7px; border-top: 1px solid #e1e7ed; }
.wall-comment { padding: 6px 0; border-bottom: 1px solid #edf1f4; }
.wall-comment-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 2px; font-size: 10px; color: #7a858f; }
.wall-comment-meta a { font-weight: bold; }
.wall-comment-body { overflow-wrap: anywhere; }
.wall-comment-delete { margin-top: 2px; }
.wall-comment-form { display: flex; gap: 5px; margin-top: 7px; }
.wall-comment-form input[type="text"] { flex: 1; min-width: 140px; }
.wall-delete-form { margin-top: 4px; }
.text-danger-button { padding: 0; border: 0; background: transparent; color: #9f3030; font-size: 10px; }
.text-danger-button:hover { background: transparent; text-decoration: underline; }

.friend-requests-inline { margin: 0 0 14px; padding: 9px; border: 1px solid #c4d2de; background: var(--soft); }
.friend-requests-inline h3 { margin: 0 0 7px; }
.friend-request-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid #d6e0e8; }
.friend-request-row:first-of-type { border-top: 0; }
.friend-request-row form { margin: 0; }
.friend-list { display: grid; gap: 8px; margin: 8px 0 16px; }
.friend-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px; border: 1px solid #d8e0e7; background: #fff; }
.friend-card:hover { border-color: #b9c8d5; background: #f8fafc; }
.friend-avatar { display: block; width: 50px; height: 50px; padding: 2px; border: 1px solid #ccd5dd; background: #f5f7f9; }
.friend-avatar img { display: block; width: 44px; height: 44px; object-fit: cover; }
.friend-card-main { min-width: 0; display: grid; gap: 3px; }
.friend-name { display: block; overflow: hidden; color: #2b587a; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; }
.friend-card-action { margin: 0; }
.friend-card-action button { white-space: nowrap; }
.friend-request-card { grid-template-columns: minmax(0, 1fr) auto; }

.admin-user { padding: 10px 0; border-bottom: 1px solid #dce3e9; }
.admin-user.is-blocked { background: #fff1f1; }
.admin-user.is-deactivated { background: #fff8df; border-left: 3px solid #c4932f; padding-left: 8px; }
.admin-user-main { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.admin-user-main strong { min-width: 180px; }
.admin-user-main span { color: #68727c; }
.admin-user-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin-top: 8px; }
.admin-user-actions form { margin: 0; }
.admin-block-form { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-delete-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.admin-search-form { display: flex; flex-wrap: wrap; align-items: end; gap: 7px; margin: 10px 0; padding: 8px; border: 1px solid #c8d5df; background: #f6f8fa; }
.admin-search-form label { display: grid; gap: 3px; color: #3d4852; }
.admin-search-form input { width: 240px; }
.admin-summary { color: #68727c; font-size: 11px; }
.admin-card { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; margin: 10px 0; padding: 10px; border: 1px solid #c8d5df; background: #f7f9fb; }
.admin-card.is-blocked { background: #fff1f1; border-color: #d5a8a8; }
.admin-card.is-deactivated { background: #fff8df; border-color: #c4932f; }
.admin-card h3 { margin: 0 0 7px; font-weight: bold; }
.admin-card-identity { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.admin-card-avatar { display: block; width: 112px; height: 112px; padding: 3px; border: 1px solid #b9c8d5; background: #fff; }
.admin-card-avatar img { display: block; width: 104px; height: 104px; object-fit: cover; }
.admin-card-main p { margin: 4px 0; }
.admin-account-status { display: inline-block; padding: 2px 6px; border: 1px solid #b9c8d5; background: #fff; color: #405b72; font-weight: bold; }
.admin-card-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; align-content: start; }
.admin-card-stats span { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 1px 5px; min-width: 0; padding: 6px; border: 1px solid #d8e0e7; background: #fff; color: #3d4852; }
.admin-card-stats i { grid-row: 1 / span 2; color: #51789a; text-align: center; }
.admin-card-stats b { overflow: hidden; color: #263d52; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.admin-card-stats small { overflow: hidden; color: #78838d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.admin-profile-overview { margin: 12px 0; padding: 10px; border: 1px solid #c8d5df; background: #f7f9fb; }
.admin-profile-overview .section-title { margin-bottom: 8px; }
.admin-profile-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-profile-columns dl { margin: 0; border: 1px solid #d8e0e7; background: #fff; }
.admin-profile-columns dl > div { display: grid; grid-template-columns: minmax(110px, 42%) minmax(0, 1fr); border-bottom: 1px solid #e3e8ec; }
.admin-profile-columns dl > div:last-child { border-bottom: 0; }
.admin-profile-columns dt, .admin-profile-columns dd { margin: 0; padding: 6px; overflow-wrap: anywhere; }
.admin-profile-columns dt { color: #66737e; background: #f3f6f8; font-weight: bold; }
.admin-profile-texts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.admin-profile-texts > div { padding: 8px; border: 1px solid #d8e0e7; background: #fff; }
.admin-profile-texts p { margin: 5px 0 0; overflow-wrap: anywhere; }
.admin-card-actions { display: grid; gap: 9px; margin: 12px 0; padding: 10px; border: 1px solid #c8d5df; background: #eef3f8; }
.admin-card-actions h3 { margin: 0; font-weight: bold; }
.admin-card-actions form { margin: 0; padding-top: 8px; border-top: 1px solid #d8e0e7; }
.admin-card-actions textarea { display: block; width: 100%; margin-top: 4px; }
.admin-system-message { display: grid; gap: 5px; }
.admin-activity { margin-top: 14px; }
.admin-activity-list { display: grid; gap: 7px; margin-top: 9px; }
.admin-activity-list article { padding: 8px; border: 1px solid #d8e0e7; background: #fff; }
.admin-activity-list strong { color: #2d455b; }
.admin-activity-list span { display: block; margin-top: 2px; color: #7a858f; font-size: 10px; }
.admin-activity-list p { margin: 5px 0; overflow-wrap: anywhere; }
.admin-rating-history { padding: 10px; border: 1px solid #c8d5df; background: #f7f9fb; }
.rating-history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rating-history-head .rating-delta { flex: 0 0 auto; }
.admin-activity-list .rating-delta { display: inline-flex; margin-top: 0; }
.invite-row { display: grid; grid-template-columns: minmax(160px, 1fr) auto auto; gap: 6px 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid #dce3e9; }
.invite-row a, .invite-row small, .invite-row form { grid-column: 1 / -1; }
.invite-row small { color: #9f3030; }
.danger-button { border-color: #842b2b; background: #a33a3a; }
.danger-button:hover { background: #8c2f2f; }
.upload-status { display: block; margin-top: 6px; color: #506273; }
.image-preview { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; align-items: center; margin: 7px 0; padding: 6px; border: 1px solid #c8d4df; background: #fff; color: #55616c; font-size: 10px; }
.image-preview[hidden] { display: none; }
.image-preview img { display: block; width: 76px; height: 76px; object-fit: cover; border: 1px solid #ccd5dd; background: #eef3f7; }
.image-preview span { overflow-wrap: anywhere; }
.upload-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.staging-banner {
    padding: 7px 12px;
    border-bottom: 1px solid #c8a84d;
    background: #fff2b8;
    color: #604b08;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

.staging-banner i { margin-right: 5px; }
.upload-status-message {
    min-width: 0;
    overflow-wrap: anywhere;
}
.upload-progress-track {
    display: block;
    height: 11px;
    border: 1px solid #aebdca;
    background: #e5edf3;
    overflow: hidden;
}
.upload-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(#6f9fc5, #3d77a5);
    transition: width .22s ease;
}
.upload-progress-fill.is-active {
    background-image: repeating-linear-gradient(
        45deg,
        #3d77a5 0,
        #3d77a5 8px,
        #6f9fc5 8px,
        #6f9fc5 16px
    );
    animation: upload-progress-stripes .8s linear infinite;
}
.upload-step-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}
.upload-step {
    padding: 3px 4px;
    border: 1px solid #d4dde6;
    background: #f8fafc;
    color: #6c7882;
    text-align: center;
    font-size: 10px;
}
.upload-step.is-current {
    border-color: #6f92ad;
    background: #e4eef7;
    color: #26445d;
    font-weight: bold;
}
.upload-step.is-done {
    border-color: #a8c2a4;
    background: #edf7eb;
    color: #2f6330;
}
.upload-retry-button {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid #8b4545;
    background: linear-gradient(#fff, #f5dcdc);
    color: #842b2b;
    cursor: pointer;
}
.upload-retry-button:hover {
    background: #f0cccc;
}
@keyframes upload-progress-stripes {
    from { background-position: 0 0; }
    to { background-position: 24px 0; }
}
.message-notice { position: fixed; right: 12px; bottom: 12px; z-index: 20; width: 280px; max-width: calc(100% - 24px); padding: 10px; border: 1px solid #365772; background: #eef3f8; box-shadow: 2px 2px 0 rgba(0,0,0,.18); color: #243d54; }
.notification-toggle { font: inherit; }
.notification-list { display: grid; gap: 8px; margin-top: 10px; }
.notification-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px; border: 1px solid #c8d5df; background: #f7f9fb; }
.notification-icon { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid #b8c7d3; border-radius: 50%; background: linear-gradient(#fff, #e7eef5); color: #315a7a; font-size: 13px; }
.notification-item strong { display: block; color: #2d455b; }
.notification-item span { display: block; margin-top: 2px; color: #7a858f; font-size: 10px; }
.notification-item p { margin: 5px 0 0; color: #3d4852; }
.notification-message { background: #eef5fb; }
.notification-friend_request { background: #f2f7ef; }
.notification-photo_like, .notification-photo_tag { background: #fff8e5; }
.notification-announcement { background: #fff4d2; border-color: #d6bf78; }
.notification-group_invite { background: #eef7f2; }
.notification-group_event { background: #eef5fa; }
.notification-profile_gift { background: #fff5f7; border-color: #dcc2ca; }
.muted { color: #74808a; font-size: 10px; }
.back-to-top { position: fixed; right: 10px; bottom: 10px; z-index: 30; padding: 5px 8px; border: 1px solid #365772; background: #eef3f8; color: #2b587a; box-shadow: 2px 2px 0 rgba(0,0,0,.14); font-size: 11px; }
.back-to-top[hidden] { display: none; }

.profile-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 14px; align-items: start; }
.profile-sidebar { display: grid; gap: 10px; }
.avatar-box { border: 1px solid #d7d7d7; padding: 5px; text-align: center; background: #fff; }
.avatar-box img { width: 180px; max-width: 100%; }
.profile-main { min-width: 0; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.profile-actions form { margin: 0; display: inline; }
.profile-info-table td:first-child { width: 120px; color: #53606b; }
.profile-likes { margin: 10px 0; padding: 7px; border: 1px solid #d8e0e7; background: #f8fafc; color: #3d4852; }
.profile-photos { margin: 12px 0; }
.profile-photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.profile-photo-card { margin: 0; padding: 5px; border: 1px solid #d8e0e7; background: #fff; }
.profile-photo-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #ccd5dd; }
.profile-photo-card figcaption { margin-top: 4px; }
.profile-photo-card button { width: 100%; padding: 3px 5px; min-height: 0; }

.rating-box { padding: 8px; border: 1px solid #c4d2de; background: #f7f9fb; }
.rating-summary { display: grid; grid-template-columns: auto minmax(70px, 1fr); gap: 7px; align-items: center; cursor: pointer; list-style: none; }
.rating-summary::-webkit-details-marker { display: none; }
.rating-title { color: #2d455b; font-weight: bold; border-bottom: 1px dotted #2d455b; }
.rating-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: #2d455b; }
.rating-scale { position: relative; display: block; height: 16px; border: 1px solid #8197aa; background: #fff; padding: 1px; overflow: hidden; }
.rating-scale span { display: block; height: 100%; background: #4b6f91; }
.rating-scale b { position: absolute; inset: 1px auto 1px 1px; display: block; background: linear-gradient(90deg, #d7a92e, #f9de74); opacity: .95; }
.rating-scale i { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; color: #10263a; font-style: normal; font-size: 11px; font-weight: bold; text-shadow: 0 1px 0 rgba(255,255,255,.75); }
.rating-details { display: grid; gap: 6px; margin-top: 7px; }
.rating-box small { color: #6f7780; }
.rating-box.is-gold { border-color: #b79335; background: #fff8dc; }
.rating-box.is-gold .rating-scale { border-color: #9a7a20; }
.rating-box.is-gold .rating-scale span { background: #d4af37; }
.points-request-form { display: grid; gap: 5px; margin-top: 7px; }
.points-request-form label { display: grid; gap: 3px; color: #455866; }
.points-request-form input { width: 100%; }
.points-request-form button { width: 100%; }
.rating-history-mini { display: grid; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px solid #d8e0e7; }
.rating-history-mini strong { color: #2d455b; font-size: 11px; }
.rating-history-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 6px; align-items: start; }
.rating-history-row small { overflow-wrap: anywhere; line-height: 1.3; }
.rating-delta { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 2px 5px; border: 1px solid #c8d5df; background: #fff; color: #53606b; font-size: 10px; font-weight: bold; white-space: nowrap; }
.rating-delta.is-positive { border-color: #b7d4bc; background: #eef8ef; color: #2d7140; }
.rating-delta.is-negative { border-color: #e0b8b8; background: #fff1f1; color: #a33b3b; }
.rating-delta.is-neutral { border-color: #d4dbe2; background: #f7f9fb; color: #6f7780; }

.side-block { border: 1px solid #d8e0e7; background: #f8fafc; padding: 8px; }
.side-block-title { display: flex; justify-content: space-between; border-bottom: 1px solid #e1e7ed; margin-bottom: 7px; padding-bottom: 4px; color: #2d455b; }
.mini-friends { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.mini-friends a { display: block; font-size: 10px; overflow: hidden; }
.mini-friends img { width: 44px; height: 44px; border: 1px solid #c7d0d8; object-fit: cover; display: block; margin: 0 auto 3px; }
.mini-albums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mini-albums a { display: block; text-decoration: none; color: #2b587a; border: 1px solid #d8e0e7; background: #fff; padding: 5px; }
.mini-albums img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #eef3f7; margin-bottom: 4px; }
.mini-albums span, .mini-albums small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-audio, .audio-list { display: grid; gap: 8px; }
.audio-row, .audio-item { padding: 7px; border: 1px solid #d8e0e7; background: #fff; }
.audio-row strong, .audio-item strong { display: block; color: #2d455b; }
.audio-row span, .audio-item span, .audio-item small { display: block; color: #6f7780; font-size: 10px; }
audio { width: 100%; height: 30px; margin-top: 5px; }

.profile-gifts {
    margin: 14px 0;
    padding: 10px;
    border: 1px solid #c8d5df;
    background: #f7f9fb;
}
.profile-gifts-title { margin-bottom: 9px; }
.profile-gifts-title h2 { display: flex; gap: 6px; align-items: center; }
.profile-gifts-title h2 i { color: #b84e68; }
.gift-success { margin: 0 0 9px; }
.gift-composer { margin: 0 0 10px; }
.gift-composer > summary {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    width: max-content;
    list-style: none;
    cursor: pointer;
}
.gift-composer > summary::-webkit-details-marker { display: none; }
.gift-form {
    display: grid;
    gap: 9px;
    margin-top: 8px;
    padding: 9px;
    border: 1px solid #c8d5df;
    background: #eef3f8;
}
.gift-form fieldset { min-width: 0; margin: 0; padding: 8px; border: 1px solid #b8c8d5; background: #fff; }
.gift-form legend { padding: 0 5px; color: #2d455b; font-weight: bold; }
.gift-catalog { display: grid; grid-template-columns: repeat(8, minmax(54px, 1fr)); gap: 6px; }
.gift-choice { min-width: 0; cursor: pointer; }
.gift-choice input { position: absolute; opacity: 0; pointer-events: none; }
.gift-choice span {
    display: grid;
    place-items: center;
    gap: 3px;
    min-height: 58px;
    padding: 5px 3px;
    border: 1px solid #c2cfda;
    background: linear-gradient(#fff, #edf2f6);
    color: var(--gift-color);
    text-align: center;
}
.gift-choice i { font-size: 23px; filter: drop-shadow(0 1px 0 #fff); }
.gift-choice small { max-width: 100%; overflow: hidden; color: #586875; font-size: 9px; text-overflow: ellipsis; }
.gift-choice input:checked + span { border-color: #365d7e; outline: 2px solid #7092af; outline-offset: 1px; background: #e6f0f8; }
.gift-choice input:focus-visible + span { outline: 2px solid #173e5f; outline-offset: 2px; }
.gift-message-label { display: grid; gap: 4px; color: #3d4e5d; }
.gift-message-label textarea { width: 100%; resize: vertical; }
.gift-anonymous { display: flex; gap: 6px; align-items: center; width: max-content; }
.gift-anonymous input { width: 16px; height: 16px; margin: 0; }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 8px; }
.gift-card {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border: 1px solid #d2dbe3;
    background: #fff;
}
.gift-card-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid #c8d3dc;
    border-radius: 4px;
    background: linear-gradient(#fff, #eef2f5);
    color: var(--gift-color);
    font-size: 27px;
}
.gift-card-body { min-width: 0; }
.gift-sender { display: block; overflow: hidden; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; }
.gift-card-body p { margin: 5px 0; overflow-wrap: anywhere; color: #3d4852; line-height: 1.35; }
.gift-card-body time { color: #7b8790; font-size: 9px; }
.gift-delete-form { margin: 0; }
.gift-delete-form .icon-action-button { width: 26px; min-width: 26px; height: 26px; min-height: 26px; padding: 0; }
.gift-empty { margin: 0; }

@media (max-width: 600px) {
    .profile-gifts { margin: 10px 0; padding: 8px; }
    .gift-composer > summary { width: 100%; justify-content: center; min-height: 42px; }
    .gift-form { padding: 8px; }
    .gift-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gift-choice span { min-height: 62px; }
    .gift-choice i { font-size: 25px; }
    .gift-form > button { width: 100%; min-height: 42px; }
    .gift-grid { grid-template-columns: 1fr; }
    .gift-card { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 9px; }
    .gift-card-icon { width: 54px; height: 54px; font-size: 29px; }
}

.settings-form label, .upload-panel label { display: block; margin-bottom: 9px; color: #3d4852; }
.settings-form textarea, .settings-form input[type="text"], .settings-form input[type="date"], .settings-form select,
.upload-panel input[type="text"], .upload-panel select { width: 100%; margin-top: 3px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.inline-form, .upload-panel { margin: 0 0 12px; padding: 9px; border: 1px solid var(--line); background: var(--soft); }
.inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.checkbox-line { display: flex !important; align-items: center; gap: 6px; }
.media-tools { display: grid; gap: 10px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.photo-card { margin: 0; padding: 6px; border: 1px solid #d8e0e7; background: #fff; }
.photo-thumb-link, .feed-photo-link { display: block; color: inherit; text-decoration: none; }
.photo-thumb-link:hover img, .feed-photo-link:hover img { border-color: #6b8ead; }
.photo-card img { width: 100%; height: 110px; object-fit: cover; border: 1px solid #ccd5dd; }
.photo-card figcaption { margin-top: 4px; color: #6f7780; font-size: 10px; }
.photo-card-actions, .photo-tag-form, .feed-like-form { margin-top: 5px; }
.photo-card-actions { display: grid; gap: 4px; }
.photo-card-actions form, .photo-card-actions button { width: 100%; }
.photo-tag-form { display: flex; gap: 5px; flex-wrap: wrap; }
.photo-tag-form select { max-width: 100%; }
.photo-tags { margin: 5px 0; font-size: 11px; color: #5f6f7c; }
.photo-tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.photo-tag-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border: 1px solid #d8e0e7; background: #fff; }
.photo-tag-chip form { margin: 0; }
.mini-danger-button { min-height: 0; padding: 0 4px; border: 1px solid #c6a0a0; background: #fff2f2; color: #9a2f2f; line-height: 17px; cursor: pointer; }
.photo-view-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 11px; }
.photo-view-card { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; align-items: start; }
.photo-view-image-wrap { padding: 8px; border: 1px solid #c8d5df; background: #fff; text-align: center; }
.photo-view-image { max-width: 100%; max-height: 720px; border: 1px solid #d8e0e7; }
.photo-view-side { display: grid; gap: 9px; }
.photo-view-owner, .photo-view-box { padding: 8px; border: 1px solid #d8e0e7; background: #f7f9fb; }
.photo-view-owner small { display: block; margin-top: 4px; color: #6f7780; font-size: 10px; }
.photo-view-like button { width: 100%; }
.photo-view-box h3 { margin: 0 0 6px; color: #2d455b; font-size: 13px; }
.photo-likers { margin: 0; padding-left: 17px; }
.photo-likers li { margin-bottom: 3px; }
.photo-view-delete { text-align: right; }
.photo-comments { margin-top: 12px; padding: 9px; border: 1px solid #c8d5df; background: #f7f9fb; }
.photo-comment-list { display: grid; gap: 7px; margin-bottom: 10px; }
.photo-comment { padding: 7px; border: 1px solid #d8e0e7; background: #fff; }
.photo-comment-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; color: #6f7780; font-size: 11px; }
.photo-comment-meta a { font-weight: bold; }
.photo-comment-body { line-height: 1.35; }
.photo-comment-delete { margin-top: 4px; text-align: right; }
.photo-comment-form { display: grid; gap: 5px; }
.photo-comment-form textarea { width: 100%; }
.admin-score-form { display: flex; flex-wrap: wrap; gap: 5px; align-items: end; }
.admin-score-form input { width: 80px; }
.announcements { display: grid; gap: 8px; margin-bottom: 12px; }
.announcement { border: 1px solid #b6c5d2; background: #fff8d8; padding: 8px; }
.announcement strong { display: block; color: #6f4d00; margin-bottom: 3px; }
.announcement p { margin: 0; }
.admin-announcements { border: 1px solid #c8d5df; background: #f6f8fa; padding: 10px; margin-bottom: 12px; }
.announcement-admin-list { display: grid; gap: 6px; margin-top: 8px; }
.announcement-admin-list article { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-top: 1px solid #d8e0e7; padding-top: 6px; }
.compact-user-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 12px; }
.compact-user-list a, .compact-user-list span { border: 1px solid #d8e0e7; background: #fff; padding: 5px 7px; }
.points-transfer-form { display: flex !important; flex-wrap: wrap; gap: 6px; align-items: end; }
.points-transfer-form input { width: 90px; }
.search-form-panel { margin: 0 0 14px; padding: 10px; border: 1px solid #c8d5df; background: #eef3f8; }
.search-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.search-form-grid label { display: grid; gap: 3px; color: #3d4852; }
.search-form-grid label span { font-size: 11px; color: #536473; }
.search-form-grid input { width: 100%; }
.search-form-actions { margin-top: 9px; text-align: right; }
.search-form-actions button { min-width: 110px; }
.search-users-table, .search-results-list { display: grid; gap: 7px; margin: 8px 0 12px; }
.search-user-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px; border: 1px solid #d3dde6; background: #fff; }
.search-user-card:hover { border-color: #b9c8d5; background: #f8fafc; }
.search-user-name { display: block; font-weight: bold; }
.search-user-meta { display: block; margin-top: 2px; color: #6f7780; font-size: 10px; }
.search-rating { min-width: 58px; padding: 4px 6px; border: 1px solid #8aa0b4; background: #eef3f8; color: #223c55; text-align: center; font-weight: bold; }
.search-rating::after { content: " бал."; font-weight: normal; color: #6f7780; }
.search-back { margin-top: 15px; }

@media (max-width: 600px) {
    body { font-size: 13px; }
    .page { width: calc(100% - 8px); margin: 4px auto; }
    .header { display: block; padding: 8px 10px; }
    .logo { display: block; margin-bottom: 7px; }
    .nav { justify-content: flex-start; gap: 6px 8px; border-top: 1px solid rgba(255,255,255,.25); padding-top: 7px; }
    .nav a, .nav .link-button { padding: 4px 5px; border: 1px solid rgba(255,255,255,.25); }
    .content { padding: 10px 8px; }
    .footer { padding: 8px 10px; }

    form table, form tbody, form tr, form td { display: block; width: 100% !important; }
    form td { padding: 3px 0; }
    form input[type="text"], form input[type="email"], form input[type="password"], form input[type="date"], form textarea, form select { width: 100%; }

    .content > table[width="100%"] > tbody > tr > td { display: block; width: 100% !important; }
    .content > table[width="100%"] > tbody > tr > td:first-child { margin-bottom: 10px; }
    textarea { width: 100%; }
    button, .button { min-height: 34px; padding: 7px 10px; }
    .feed-list { display: grid; gap: 8px; }
    .feed-item { padding: 8px; border: 1px solid #d8e0e7; background: #f8fafc; }
    .feed-meta { margin-bottom: 6px; }
    .feed-item img { width: 100%; max-width: 100%; max-height: none; padding: 2px; background: #fff; }
    .feed-like-form button { width: 100%; margin-top: 4px; }
    .feed-wall-actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
    .feed-comment-form { display: grid; grid-template-columns: 1fr auto; }
    .dialog-list { display: grid; gap: 7px; }
    .dialog-row { grid-template-columns: 1fr; gap: 5px; padding: 10px; border: 1px solid #d8e0e7; background: #fff; }
    .dialog-unread { background: #eef3f8; }
    .dialog-person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: baseline; }
    .dialog-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dialog-person .online-status { text-align: right; }
    .dialog-person .profile-link { grid-column: 1 / -1; }
    .dialog-preview { font-size: 12px; }
    .dialog-preview span { margin-top: 3px; }
    .message-page { display: flex; flex-direction: column; gap: 8px; min-height: calc(100vh - 112px); margin: -2px -2px 0; }
    @supports (height: 100dvh) {
        .message-page { min-height: calc(100dvh - 112px); }
    }
    .message-dialog-header { position: sticky; top: 0; z-index: 5; grid-template-columns: 1fr; gap: 6px; padding: 8px; border: 1px solid #c8d5df; background: #f7f9fb; }
    .message-back { width: max-content; }
    .message-dialog-title h1 { font-size: 15px; }
    .message-thread { flex: 1 1 auto; min-height: 42vh; padding: 7px 7px 14px; border-color: #c8d5df; background: #eef2f6; }
    .message-bubble { max-width: 86%; padding: 8px; font-size: 13px; }
    .message-author { font-size: 11px; }
    .message-meta { font-size: 10px; }
    .message-compose { position: static; z-index: 1; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 8px; border-color: #b9c8d5; box-shadow: none; }
    .message-compose textarea { min-height: 54px; max-height: 112px; font-size: 16px; line-height: 1.35; resize: vertical; }
    .message-compose button { width: 100%; min-width: 0; padding-left: 8px; padding-right: 8px; }
    .message-compose-status { text-align: center; }
    .message-date-separator { font-size: 11px; }
    .message-new-button { bottom: 12px; }
    .profile-layout { grid-template-columns: 1fr; gap: 10px; }
    .profile-sidebar { order: 1; }
    .profile-main { order: 2; }
    .avatar-box img { width: 160px; }
    .mini-friends { grid-template-columns: repeat(4, 1fr); }
    .mini-albums { grid-template-columns: repeat(3, 1fr); }
    .profile-actions { display: grid; grid-template-columns: 1fr; }
    .profile-actions .button, .profile-actions button { width: 100%; text-align: center; }
    .settings-grid { grid-template-columns: 1fr; }
    .profile-photo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .profile-photo-card { padding: 4px; }
    .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .photo-card { padding: 4px; }
    .photo-card img { height: 118px; }
    .photo-view-card { grid-template-columns: 1fr; gap: 8px; }
    .photo-view-nav { gap: 6px; }
    .photo-view-image-wrap { padding: 4px; }
    .photo-view-image { width: 100%; max-height: none; }
    .photo-view-side { gap: 7px; }
    .photo-view-delete { text-align: left; }
    .photo-comments { padding: 7px; }
    .photo-comment-meta { display: grid; gap: 2px; }
    .photo-comment-delete { text-align: left; }
    .inline-form { display: grid; grid-template-columns: 1fr; }
    .wall-form { padding: 8px; }
    .wall-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wall-form-actions button { width: 100%; }
    .wall-post-options { display: grid; grid-template-columns: 1fr; }
    .wall-post-actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
    .wall-comment-form { display: grid; grid-template-columns: 1fr auto; }
    .points-transfer-form { display: grid !important; grid-template-columns: 1fr; }
    .rating-summary { grid-template-columns: 1fr; }
    .rating-history-row { grid-template-columns: 48px minmax(0, 1fr); }
    .rating-history-head { align-items: flex-start; }
    .search-user-card { grid-template-columns: 1fr; }
    .search-rating { width: max-content; }
    .wall-post { grid-template-columns: 38px minmax(0, 1fr); gap: 7px; }
    .wall-avatar img { width: 36px; height: 36px; }
    .graffiti-editor { padding: 6px; }
    .graffiti-toolbar { display: grid; grid-template-columns: 1fr; align-items: flex-start; gap: 8px; }
    .graffiti-group { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px 7px; }
    .graffiti-group-size { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .graffiti-group-size label { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-column: 1 / -1; }
    .graffiti-group-size button { width: 100%; }
    .graffiti-tools, .graffiti-palette { width: 100%; }
    .graffiti-palette { gap: 5px; max-width: none; }
    .graffiti-tool, .graffiti-color { width: 34px; height: 32px; }
    .graffiti-tool { line-height: 30px; font-size: 14px; }
    .graffiti-editor canvas { width: 100%; min-height: 190px; }
    .image-preview { grid-template-columns: 64px minmax(0, 1fr); }
    .image-preview img { width: 62px; height: 62px; }
    .upload-status-rich:not(:empty) { padding: 7px; }
    .upload-status-head { align-items: stretch; flex-direction: column; }
    .upload-retry-button { width: 100%; min-height: 34px; }
    .upload-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .upload-step { font-size: 11px; }
    .back-to-top { right: 8px; bottom: 8px; }
    .friend-request-row { align-items: flex-start; }
    .admin-user-main, .admin-user-actions { display: block; }
    .admin-user-main > *, .admin-user-actions > * { display: block; margin-bottom: 6px; }
    .admin-search-form { display: grid; grid-template-columns: 1fr; }
    .admin-search-form input, .admin-search-form button, .admin-search-form .button { width: 100%; }
    .admin-card { grid-template-columns: 1fr; padding: 8px; }
    .admin-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-card-identity { grid-template-columns: 80px minmax(0, 1fr); gap: 9px; }
    .admin-card-avatar { width: 80px; height: 80px; }
    .admin-card-avatar img { width: 72px; height: 72px; }
    .admin-profile-columns, .admin-profile-texts { grid-template-columns: 1fr; }
    .admin-profile-columns dl > div { grid-template-columns: minmax(92px, 38%) minmax(0, 1fr); }
    .admin-card-actions { padding: 8px; }
    .admin-block-form, .admin-delete-form, .admin-score-form { display: grid; grid-template-columns: 1fr; }
    .admin-score-form input, .admin-card-actions button { width: 100%; }
    .admin-activity-list article { padding: 7px; }
    .notification-item { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; }
    .notification-item .button { width: 100%; text-align: center; }
    .invite-row { grid-template-columns: 1fr; }
}

/* Groups */
.group-actions-top {
    margin: 10px 0 12px;
}

.group-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 7px;
    align-items: end;
    margin: 0 0 12px;
    padding: 9px;
    border: 1px solid var(--line);
    background: var(--soft);
}

.group-search-form label {
    display: grid;
    gap: 3px;
    color: #3d4852;
}

.group-search-form input {
    width: 100%;
}

.group-panel {
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid var(--line);
    background: var(--soft);
}

.group-panel h3 {
    margin-top: 0;
}

.group-list {
    display: grid;
    gap: 8px;
}

.group-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
    border: 1px solid #d3dde6;
    background: #fff;
}

.group-card:hover {
    border-color: #b9c8d5;
    background: #f8fafc;
}

.group-card-avatar img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid #b7c4cf;
    background: #eef3f8;
}

.group-card-title {
    display: inline-block;
    margin-bottom: 2px;
    font-weight: bold;
    color: #264b6d;
}

.group-card-meta {
    color: #6d7a85;
    font-size: 10px;
}

.group-policy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding: 2px 6px;
    border: 1px solid #bccbd7;
    background: #edf3f8;
    color: #40596f;
    font-size: 10px;
    line-height: 1.35;
}

.group-policy-badge.is-open {
    border-color: #a8c9ad;
    background: #eef8ef;
    color: #35633d;
}

.group-policy-badge.is-invite {
    background: #f2f2f2;
    color: #5f6468;
}

.group-request-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #65727d;
    font-size: 11px;
}

.group-card p {
    margin: 6px 0 0;
    color: #3d4852;
}

.group-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.group-card-actions form {
    margin: 0;
}

.group-join-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #f5f9fc;
}

.group-join-panel form {
    margin: 0;
}

.group-request-list {
    display: grid;
    gap: 7px;
}

.group-request-card {
    padding: 7px;
    border: 1px solid #d5dfe7;
    background: #fff;
}

.group-request-card > a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    font-weight: bold;
}

.group-request-card img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border: 1px solid #b8c6d1;
}

.group-request-card > small {
    display: block;
    margin-top: 4px;
    color: #77838d;
}

.group-moderation-log summary {
    cursor: pointer;
    color: #315b7d;
    font-weight: bold;
}

.group-event-list {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.group-event-list article {
    display: grid;
    gap: 2px;
    padding: 6px;
    border-left: 3px solid #9fb6c9;
    background: #fff;
    font-size: 10px;
}

.group-event-list small,
.group-event-list time {
    color: #73808a;
}

.group-create-form textarea,
.group-discussion-form textarea {
    width: 100%;
    resize: vertical;
}

.group-hero {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    background: #fff;
    overflow: hidden;
}

.group-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 132px;
    max-height: 132px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(135deg, rgba(255,255,255,.28) 25%, transparent 25%) 0 0 / 18px 18px,
        linear-gradient(#e6edf4, #cad8e5);
}

.group-cover.is-empty {
    background-size: 18px 18px, auto;
}

.group-cover.has-image {
    background: #dce7f0;
}

.group-cover-image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 132px;
    object-fit: cover;
}

.group-cover span {
    padding: 4px 9px;
    border: 1px solid #b8c8d5;
    background: rgba(255,255,255,.55);
    color: #6d7a85;
    font-size: 11px;
}

.group-hero-body {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    background: linear-gradient(#fff, #f8fbfd);
}

.group-avatar {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border: 1px solid #aebfcd;
    background: #eef3f8;
}

.group-hero h2 {
    margin: 0 0 4px;
}

.group-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 12px;
    align-items: start;
}

.group-main {
    min-width: 0;
}

.group-main input,
.group-main textarea,
.group-main select {
    max-width: 100%;
}

.group-main .wall-form,
.group-main .inline-form {
    background: #f7fafc;
}

.group-sidebar {
    display: grid;
    gap: 0;
    min-width: 0;
}

.group-sidebar .stacked-form,
.group-sidebar .inline-form {
    width: 100%;
}

.group-sidebar .stacked-form input,
.group-sidebar .stacked-form textarea,
.group-sidebar .stacked-form select,
.group-sidebar .inline-form input,
.group-sidebar .inline-form textarea,
.group-sidebar .inline-form select {
    display: block;
    width: 100%;
    margin-top: 3px;
}

.group-sidebar .stacked-form textarea {
    min-height: 76px;
    resize: vertical;
}

.group-sidebar .upload-status {
    display: block;
    margin-top: 5px;
}

.group-manage-panel {
    display: grid;
    gap: 10px;
}

.group-manage-panel h3 {
    margin-bottom: 0;
}

.group-manage-panel .stacked-form {
    margin: 0;
    padding: 8px;
    border: 1px solid #d8e1e8;
    background: #f8fafc;
}

.group-manage-panel button {
    width: 100%;
}

.group-discussion-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
}

.group-discussion-form label,
.group-main .wall-form > label,
.group-main .wall-post-options label {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.group-discussion-form input,
.group-discussion-form textarea,
.group-main .wall-form textarea,
.group-main .wall-post-options input,
.group-main .wall-post-options select {
    width: 100%;
}

.group-discussion-form textarea {
    min-height: 70px;
}

.group-discussion-form button {
    justify-self: start;
    min-width: 154px;
    max-width: 100%;
}

.group-main .wall-form {
    display: grid;
    gap: 8px;
}

.group-main .wall-form > label {
    margin-bottom: 0;
}

.group-main .wall-form textarea {
    min-height: 72px;
}

.group-main .wall-post-options {
    display: grid;
    grid-template-columns: minmax(130px, 170px) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    margin-top: 0;
}

.group-main .wall-post-options small {
    line-height: 1.35;
}

.group-main .wall-form-actions {
    margin-top: 0;
}

.group-main .wall-form-actions button {
    min-width: 120px;
}

.group-album-create-form,
.group-photo-upload-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
}

.group-album-create-form label,
.group-photo-upload-form label {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.group-album-create-form input,
.group-photo-upload-form input,
.group-photo-upload-form select {
    width: 100%;
}

.group-album-create-form button,
.group-photo-upload-form button {
    justify-self: start;
    min-width: 120px;
    max-width: 100%;
}

.group-album-list {
    display: grid;
    gap: 10px;
}

.group-album {
    padding: 8px;
    border: 1px solid #d8e1e8;
    background: #fff;
}

.group-album-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8ee;
}

.group-album-header h4 {
    margin: 0;
    color: #264b6d;
    font-size: 13px;
}

.group-album-header span {
    color: #6d7a85;
    font-size: 10px;
}

.group-album-header form {
    margin: 0;
}

.group-album-header .text-danger-button {
    width: 30px;
    min-height: 28px;
    padding: 0;
}

.group-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.group-photo-card {
    margin: 0;
    padding: 6px;
    border: 1px solid #d8e1e8;
    background: #f8fafc;
}

.group-photo-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid #b9c8d5;
    background: #eef3f8;
}

.group-photo-card figcaption {
    margin-top: 5px;
    color: #6d7a85;
    font-size: 10px;
    line-height: 1.3;
}

.group-photo-card form {
    margin-top: 5px;
}

.group-photo-card button {
    width: 100%;
}

.group-image-form,
.group-leave-form {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #d8e1e8;
}

.group-manage-panel .group-image-form {
    margin-top: 0;
}

.group-danger-zone {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #e1b4b4;
    background: #fff6f6;
}

.group-danger-zone strong {
    color: #9b2d2d;
}

.group-danger-zone small {
    color: #7a5a5a;
}

.group-members {
    display: grid;
    gap: 7px;
}

.group-member {
    padding: 7px;
    border: 1px solid #d8e1e8;
    background: #fff;
}

.group-member > a {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    font-weight: bold;
}

.group-member img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border: 1px solid #c7d0d8;
}

.group-member small {
    display: block;
    margin: 3px 0;
    color: #6d7a85;
}

.group-role-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    margin-top: 5px;
}

.group-member form:not(.group-role-form) {
    margin-top: 5px;
}

.group-member button,
.group-member select {
    width: 100%;
}

.discussion-list {
    display: grid;
    gap: 7px;
}

.discussion-card {
    padding: 8px;
    border: 1px solid #d8e1e8;
    background: #fff;
}

.discussion-card strong,
.discussion-title {
    display: block;
    color: #264b6d;
    font-weight: bold;
}

.discussion-card span {
    display: block;
    margin-top: 2px;
    color: #6d7a85;
    font-size: 10px;
}

.discussion-card p {
    margin: 6px 0 0;
}

.discussion-topic-meta {
    margin: 8px 0 0;
    color: #5f6f7c;
}

.discussion-thread {
    display: grid;
    gap: 8px;
}

.discussion-message {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    border: 1px solid #d8e1e8;
    background: #fff;
}

.discussion-message-avatar img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border: 1px solid #c7d0d8;
    background: #eef3f8;
}

.discussion-message-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 4px;
    color: #6d7a85;
    font-size: 10px;
}

.discussion-message-meta a {
    font-weight: bold;
}

.discussion-message-text {
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.discussion-message-delete {
    margin-top: 7px;
}

.discussion-reply-form {
    display: grid;
    gap: 8px;
}

.discussion-reply-form label {
    display: grid;
    gap: 3px;
}

.discussion-reply-form textarea {
    width: 100%;
    resize: vertical;
}

.discussion-reply-form button {
    justify-self: start;
    min-width: 130px;
}

.group-delete-confirm {
    display: grid;
    gap: 4px;
}

.group-delete-confirm span {
    color: #7a3a3a;
    font-weight: bold;
    overflow-wrap: anywhere;
}

.group-delete-confirm input {
    width: 100%;
}

@media (max-width: 760px) {
    .page-wide {
        width: min(760px, calc(100% - 16px));
    }

    .group-layout {
        grid-template-columns: 1fr;
    }

    .group-cover {
        height: 105px;
        max-height: 105px;
    }

    .group-cover-image {
        max-height: 105px;
    }

    .group-hero-body {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 9px;
    }

    .group-avatar {
        width: 70px;
        height: 70px;
    }

    .group-card {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
    }

    .group-card-avatar img {
        width: 48px;
        height: 48px;
    }

    .group-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .group-card-actions button,
    .group-card-actions .button {
        width: 100%;
    }

    .group-search-form {
        grid-template-columns: 1fr;
    }

    .group-search-form button,
    .group-search-form .button {
        width: 100%;
        text-align: center;
    }

    .group-panel {
        padding: 8px;
    }

    .group-join-panel {
        display: grid;
        grid-template-columns: 1fr;
    }

    .group-join-panel form,
    .group-join-panel button {
        width: 100%;
    }

    .group-role-form {
        grid-template-columns: 1fr auto;
    }

    .group-discussion-form {
        grid-template-columns: 1fr;
    }

    .group-discussion-form button {
        width: 100%;
    }

    .group-main .wall-post-options {
        grid-template-columns: 1fr;
    }

    .group-main .wall-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .group-main .wall-form-actions button {
        width: 100%;
    }

    .group-album-create-form button,
    .group-photo-upload-form button {
        width: 100%;
    }

    .group-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discussion-message {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 7px;
    }

    .discussion-message-avatar img {
        width: 34px;
        height: 34px;
    }

    .discussion-reply-form button {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .group-hero-body {
        grid-template-columns: 1fr;
    }

    .group-avatar {
        margin-top: -48px;
        box-shadow: 0 0 0 3px #fff;
    }

    .group-card-actions {
        grid-template-columns: 1fr;
    }
}

/* Conservative UI polish: still early-web, but less tiring to use. */
:root {
    --panel: #f7f9fb;
    --panel-strong: #eef3f8;
    --line-strong: #b8c6d3;
    --text-muted: #66727d;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #203f5b;
    outline-offset: 1px;
}

@media (min-width: 760px) {
    .page {
        width: min(820px, calc(100% - 32px));
        box-shadow: 2px 2px 0 rgba(70, 90, 110, .16);
    }
}

.nav a,
.nav .link-button {
    border: 1px solid transparent;
    padding: 2px 4px;
}

.nav a:hover,
.nav .link-button:hover {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.08);
    text-decoration: none;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.04);
}

button,
.button {
    box-shadow: 1px 1px 0 rgba(0,0,0,.12);
}

button:disabled,
.button[aria-disabled="true"] {
    opacity: .65;
    cursor: wait;
}

.notice,
.upload-panel,
.inline-form,
.wall-form,
.side-block,
.rating-box,
.photo-comments,
.admin-card,
.admin-card-actions,
.admin-announcements {
    border-color: var(--line-strong);
}

.section-title {
    margin: 4px 0 10px;
    padding-bottom: 2px;
}

.feed-item,
.wall-post,
.dialog-row,
.search-user-card,
.photo-card,
.notification-item,
.admin-user {
    transition: background-color .12s ease, border-color .12s ease;
}

.feed-item {
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid #d8e0e7;
    background: #fff;
}

.feed-item:hover,
.wall-post:hover,
.photo-card:hover,
.search-user-card:hover,
.dialog-row:hover {
    border-color: #b9c8d5;
    background: #f8fafc;
}

.feed-meta,
.wall-post-meta,
.photo-card figcaption,
.search-user-meta,
.dialog-preview span {
    color: var(--text-muted);
}

.wall-post {
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid #d8e0e7;
    background: #fff;
}

.wall-post:last-child,
.feed-item:last-child {
    border-bottom: 1px solid #d8e0e7;
}

.wall-form textarea,
.message-compose textarea {
    line-height: 1.45;
}

.wall-post-options small,
.upload-panel small,
.stacked-form small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
}

.upload-status:not(:empty) {
    display: block;
    margin-top: 8px;
    padding: 7px 8px;
    border: 1px solid #c4d2de;
    background: #fff;
    color: #2d455b;
}

.upload-status.upload-status-rich:not(:empty) {
    display: grid;
    gap: 7px;
    padding: 8px;
    border-color: #b7c9d8;
    background: linear-gradient(#fff, #f1f6fa);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.upload-status.upload-status-rich.is-error {
    border-color: #d6a2a2;
    background: #fff4f4;
    color: #842b2b;
}

.upload-status.upload-status-rich.is-done {
    border-color: #9ec09b;
    background: #f2faf0;
    color: #2f6330;
}

.media-tools {
    margin-bottom: 12px;
}

.album-block {
    margin: 14px 0 18px;
}

.photo-album-tools .inline-form,
.photo-upload-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.photo-album-create-form label,
.photo-upload-panel label {
    display: grid;
    gap: 3px;
    margin: 0;
}

.photo-album-create-form input,
.photo-upload-panel input[type="file"],
.photo-upload-panel select {
    width: 100%;
}

.photo-upload-panel .checkbox-line {
    grid-column: 1 / -1;
}

.photo-upload-panel .upload-status {
    grid-column: 1 / -1;
}

.album-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.album-overview-card {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid #d8e0e7;
    background: #fff;
    color: #2b587a;
    text-decoration: none;
    box-shadow: 1px 1px 0 rgba(0,0,0,.05);
}

.album-overview-card:hover {
    border-color: #b9c8d5;
    background: #f8fafc;
    text-decoration: none;
}

.album-overview-cover {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border: 1px solid #cbd6df;
    background: #eef3f8;
    color: #7790a5;
    font-size: 30px;
    overflow: hidden;
}

.album-overview-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-overview-title {
    overflow: hidden;
    color: #264b6d;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.album-overview-count {
    color: #6d7a85;
    font-size: 10px;
}

.album-block .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}

.photo-grid {
    align-items: start;
}

.photo-card {
    box-shadow: 1px 1px 0 rgba(0,0,0,.05);
}

.photo-card button,
.photo-card .button {
    min-height: 28px;
}

.search-user-card {
    box-shadow: 1px 1px 0 rgba(0,0,0,.04);
}

.search-user-name {
    font-size: 13px;
}

.search-rating {
    background: linear-gradient(#f7fbff, #e5edf4);
}

.dialog-row {
    border: 1px solid #d8e0e7;
    margin-bottom: 7px;
    background: #fff;
}

.dialog-unread {
    border-color: #9fb6ca;
}

.message-thread {
    max-height: 62vh;
    overflow-y: auto;
}

.message-bubble {
    box-shadow: 1px 1px 0 rgba(0,0,0,.08);
}

.message-emoji-toolbar {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    border: 1px solid #c8d3dd;
    background: #f7fafc;
}

.message-compose .message-emoji-button {
    width: auto;
    min-width: 36px;
    min-height: 34px;
    padding: 4px 7px;
    border: 1px solid #9caebd;
    background: linear-gradient(#fff, #eef3f8);
    color: #1f3548;
    font-size: 20px;
    line-height: 1;
    box-shadow: 1px 1px 0 rgba(0,0,0,.08);
}

.message-compose .message-emoji-button:hover,
.message-compose .message-emoji-button:focus {
    background: #e3edf6;
    border-color: #6f8aa0;
}

.message-typing {
    width: max-content;
    max-width: 82%;
    margin: 0 0 6px 8px;
    padding: 4px 8px;
    border: 1px solid #c8d3dd;
    background: #f7fafc;
    color: #5a6874;
    font-size: 11px;
    font-style: italic;
}

.message-typing[hidden] {
    display: none;
}

.profile-info-table {
    width: 100%;
}

.profile-info-table td {
    padding: 4px 3px;
    border-bottom: 1px solid #edf1f4;
}

.avatar-box,
.mini-albums a,
.mini-friends img,
.profile-photo-card,
.photo-card,
.photo-view-image-wrap {
    box-shadow: 1px 1px 0 rgba(0,0,0,.04);
}

@media (max-width: 600px) {
    body {
        background: #eef2f6;
    }

    h1 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    h2 {
        font-size: 17px;
    }

    .content {
        padding: 10px;
    }

    input,
    textarea,
    select {
        font-size: 16px;
    }

    button,
    .button,
    .nav a,
    .nav .link-button {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .nav a,
    .nav .link-button,
    .nav-form button {
        width: 100%;
        text-align: center;
    }

    .nav-form {
        display: block;
    }

    .feed-item,
    .wall-post,
    .dialog-row,
    .search-user-card {
        margin-bottom: 8px;
        border-color: #cbd7e1;
    }

    .message-thread {
        max-height: none;
        overflow-y: visible;
    }

    .message-bubble {
        max-width: 90%;
    }

    .message-emoji-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 7px;
        -webkit-overflow-scrolling: touch;
    }

    .message-compose .message-emoji-button {
        flex: 0 0 auto;
        width: 42px;
        min-width: 42px;
        min-height: 42px;
        padding: 4px;
        font-size: 22px;
    }

    .upload-panel,
    .wall-form,
    .inline-form {
        padding: 10px;
    }

    .upload-status:not(:empty) {
        font-size: 13px;
    }

    .photo-card-actions {
        gap: 5px;
    }

    .photo-card button,
    .photo-tag-form button,
    .photo-tag-form select {
        width: 100%;
    }

    .mini-friends span,
    .mini-albums span {
        font-size: 11px;
    }

    .profile-info-table,
    .profile-info-table tbody,
    .profile-info-table tr,
    .profile-info-table td {
        display: block;
        width: 100% !important;
    }

    .profile-info-table td:first-child {
        padding-bottom: 0;
        border-bottom: 0;
        font-size: 11px;
    }
}

/* Bootstrap-like buttons, kept conservative for the 2006 visual language. */
button:not(.link-button):not(.text-danger-button):not(.mini-danger-button):not(.graffiti-tool):not(.graffiti-color):not(.mobile-nav-item):not(.mobile-menu-row):not(.dialog-menu-toggle):not(.dialog-menu-action),
.button {
    border-color: #2e6da4;
    border-radius: 4px;
    background: linear-gradient(#5f91be, #337ab7);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 1px 1px 0 rgba(0,0,0,.13);
    text-shadow: 0 -1px 0 rgba(0,0,0,.18);
}

button:not(.link-button):not(.text-danger-button):not(.mini-danger-button):not(.graffiti-tool):not(.graffiti-color):not(.mobile-nav-item):not(.mobile-menu-row):not(.dialog-menu-toggle):not(.dialog-menu-action):hover,
.button:hover {
    border-color: #204d74;
    background: linear-gradient(#477da9, #286090);
    color: #fff;
}

.button-secondary,
button.button-secondary {
    border-color: #adadad;
    background: linear-gradient(#ffffff, #e6e6e6);
    color: #333;
    text-shadow: 0 1px 0 #fff;
}

.button-secondary:hover,
button.button-secondary:hover {
    border-color: #8c8c8c;
    background: linear-gradient(#eeeeee, #d4d4d4);
    color: #333;
}

.danger-button,
button.danger-button {
    border-color: #ac2925;
    background: linear-gradient(#e27c79, #d9534f);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.18);
}

.danger-button:hover,
button.danger-button:hover {
    border-color: #761c19;
    background: linear-gradient(#ce5f5b, #c9302c);
    color: #fff;
}

.text-danger-button {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border: 1px solid #d2a0a0;
    border-radius: 4px;
    background: linear-gradient(#ffffff, #f3dddd);
    color: #8f2c2c;
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(0,0,0,.08);
}

.text-danger-button:hover {
    border-color: #b85a5a;
    background: linear-gradient(#f8e8e8, #eec3c3);
    color: #701c1c;
    text-decoration: none;
}

.link-button,
.link-button:hover,
.text-danger-button,
.text-danger-button:hover,
.mini-danger-button,
.mini-danger-button:hover {
    text-shadow: none;
}

.mobile-bottom-nav,
.mobile-menu-backdrop,
.mobile-menu-panel {
    display: none;
}

@media (max-width: 600px) {
    .page {
        margin-bottom: calc(74px + env(safe-area-inset-bottom));
    }

    .header {
        min-height: 38px;
    }

    .logo {
        margin-bottom: 0;
    }

    .nav-desktop {
        display: none;
    }

    .content {
        padding-bottom: 86px;
    }

    .footer {
        padding-bottom: 76px;
    }

    .mobile-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 80;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 3px 5px calc(4px + env(safe-area-inset-bottom));
        border-top: 1px solid #98adbf;
        background: linear-gradient(#f7fafc, #dce6ef);
        box-shadow: 0 -2px 8px rgba(30, 52, 70, .22);
    }

    .mobile-nav-item {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 54px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        padding: 4px 2px;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
        color: #284964;
        font: 10px/1.15 Tahoma, Verdana, Arial, sans-serif;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        box-shadow: none;
        text-shadow: none;
    }

    .mobile-nav-item:hover,
    .mobile-nav-item:focus-visible,
    .mobile-nav-item.is-unread {
        border-color: #adc0d1;
        background: #fff;
        color: #173953;
        text-decoration: none;
    }

    .mobile-nav-item i {
        font-size: 18px;
        line-height: 1;
    }

    .mobile-nav-item span {
        overflow: hidden;
        max-width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-item em,
    .mobile-menu-row em {
        min-width: 17px;
        padding: 1px 5px;
        border: 1px solid #7b2c2c;
        border-radius: 9px;
        background: #b84545;
        color: #fff;
        font-style: normal;
        font-size: 10px;
        line-height: 14px;
        text-align: center;
    }

    .mobile-nav-item em:empty,
    .mobile-menu-row em:empty {
        display: none;
    }

    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 75;
        display: block;
        background: rgba(20, 35, 48, .22);
    }

    .mobile-menu-panel {
        position: fixed;
        right: 8px;
        bottom: calc(68px + env(safe-area-inset-bottom));
        z-index: 90;
        display: block;
        width: min(304px, calc(100% - 16px));
        max-height: min(470px, calc(100dvh - 96px));
        overflow-y: auto;
        padding: 8px;
        border: 1px solid #9fb1c0;
        background: #eef3f8;
        box-shadow: 2px 2px 0 rgba(0,0,0,.16), 0 8px 22px rgba(30, 52, 70, .22);
    }

    .mobile-menu-panel[hidden],
    .mobile-menu-backdrop[hidden],
    .mobile-menu-row[hidden] {
        display: none !important;
    }

    .mobile-menu-title {
        margin: 0 0 6px;
        padding: 4px 6px;
        border-bottom: 1px solid #c2ced8;
        color: #2d455b;
        font-weight: bold;
    }

    .mobile-menu-row {
        display: grid;
        width: 100%;
        min-height: 38px;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        gap: 7px;
        align-items: center;
        margin: 0 0 5px;
        padding: 7px 8px;
        border: 1px solid #bfd0df;
        border-radius: 4px;
        background: #fff;
        color: #26465f;
        font: 13px Tahoma, Verdana, Arial, sans-serif;
        text-align: left;
        text-decoration: none;
        box-shadow: 1px 1px 0 rgba(0,0,0,.05);
        cursor: pointer;
    }

    .mobile-menu-row:hover,
    .mobile-menu-row:focus-visible,
    .mobile-menu-row.is-unread {
        border-color: #93aec5;
        background: #f8fbfd;
        text-decoration: none;
    }

    .mobile-menu-row i {
        color: #476b8c;
        text-align: center;
    }

    .mobile-menu-form {
        margin: 0;
    }

    .mobile-menu-form .mobile-menu-row {
        margin-bottom: 0;
    }

    body.has-mobile-menu {
        overflow: hidden;
    }

    .message-page {
        min-height: calc(100vh - 188px);
    }

    @supports (height: 100dvh) {
        .message-page {
            min-height: calc(100dvh - 188px);
        }
    }

    .message-new-button,
    .back-to-top {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .media-tools {
        gap: 8px;
    }

    .media-tools .inline-form,
    .upload-panel {
        margin-bottom: 10px;
        padding: 10px;
        border-color: #b8c6d3;
        background: #eef4f9;
    }

    .media-tools .inline-form input[type="text"],
    .media-tools .inline-form button,
    .upload-panel select,
    .upload-panel input[type="file"],
    .upload-panel button {
        width: 100%;
    }

    .photo-album-tools .inline-form,
    .photo-upload-panel {
        grid-template-columns: 1fr;
    }

    .album-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .upload-panel input[type="file"] {
        display: block;
        margin-top: 5px;
        padding: 7px;
        border: 1px solid #b7c5d2;
        background: #fff;
        font-size: 13px;
    }

    .upload-panel small {
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.35;
    }

    .checkbox-line {
        align-items: flex-start;
        line-height: 1.35;
    }

    .album-block {
        margin: 14px 0 18px;
    }

    .album-block .section-title {
        align-items: center;
        gap: 8px;
    }

    .album-block .section-title h3 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .album-block .section-title span {
        flex: 0 0 auto;
        font-size: 12px;
    }

    .photo-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .photo-card {
        display: grid;
        gap: 6px;
        padding: 8px;
        border-color: #c5d1dc;
        background: #fff;
    }

    .photo-card img {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .photo-card figcaption,
    .photo-tags {
        font-size: 12px;
        line-height: 1.35;
    }

    .photo-card-actions {
        gap: 6px;
    }

    .photo-card-actions button,
    .photo-tag-form button,
    .photo-card > form .text-danger-button {
        min-height: 34px;
        padding-right: 7px;
        padding-left: 7px;
        font-size: 12px;
        white-space: normal;
    }

    .photo-tag-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .photo-tag-form select {
        width: 100%;
    }

    .friend-requests-inline {
        padding: 10px;
    }

    .friend-request-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 8px 0;
    }

    .friend-request-row form,
    .friend-request-row button {
        width: 100%;
    }

    .friend-list {
        gap: 9px;
    }

    .friend-card {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 8px;
        padding: 9px;
    }

    .friend-avatar {
        width: 52px;
        height: 52px;
    }

    .friend-avatar img {
        width: 46px;
        height: 46px;
    }

    .friend-card-main {
        align-self: center;
    }

    .friend-card-action {
        grid-column: 1 / -1;
        width: 100%;
    }

    .friend-card-action button {
        width: 100%;
        min-height: 34px;
        white-space: normal;
    }

    .friend-request-card {
        grid-template-columns: 1fr;
    }

    .compact-user-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .compact-user-list a,
    .compact-user-list span {
        display: block;
        width: 100%;
    }

    .compact-user-list .inline-form,
    .compact-user-list button {
        width: 100%;
        margin-top: 6px;
    }

    .search-form-panel {
        padding: 10px;
        border-color: #b8c6d3;
    }

    .search-form-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .search-form-grid label span {
        font-size: 12px;
    }

    .search-form-actions {
        display: grid;
        margin-top: 10px;
        text-align: left;
    }

    .search-form-actions button {
        width: 100%;
        min-height: 36px;
    }

    .search-users-table,
    .search-results-list {
        gap: 9px;
    }

    .search-user-card {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 10px;
    }

    .search-user-name {
        font-size: 14px;
    }

    .search-user-meta {
        font-size: 12px;
        line-height: 1.35;
    }

    .search-rating {
        width: 100%;
        padding: 6px 8px;
        text-align: left;
    }

    .search-back .button {
        width: 100%;
        justify-content: center;
    }
}

.field-hint {
    display: block;
    margin-top: 3px;
    color: #66727d;
    font-size: 10px;
    line-height: 1.3;
}

.messages-title {
    margin-bottom: 8px;
}

.messages-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.messages-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid #c4d0db;
    background: #f5f8fb;
    color: #2b587a;
    text-decoration: none;
}

.messages-tabs a.is-active {
    border-color: #7894ad;
    background: #dce8f2;
    color: #173b59;
    font-weight: bold;
}

.dialog-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    padding: 0;
}

.dialog-main {
    display: grid;
    grid-template-columns: 48px minmax(150px, 190px) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 9px;
    color: #222;
    text-decoration: none;
}

.dialog-main:hover {
    text-decoration: none;
}

.dialog-avatar {
    display: block;
    width: 42px;
    height: 42px;
    padding: 2px;
    border: 1px solid #c7d0d8;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
}

.dialog-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.dialog-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 7px 6px 0;
}

.dialog-menu-toggle {
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-color: #b9c8d5;
    background: linear-gradient(#fff, #e7eef5);
    color: #315a7a;
}

.dialog-menu-panel {
    position: absolute;
    top: calc(100% - 3px);
    right: 7px;
    z-index: 40;
    display: grid;
    min-width: 178px;
    padding: 5px;
    border: 1px solid #aab9c6;
    background: #fff;
    box-shadow: 2px 3px 8px rgba(34, 54, 72, .18);
}

.dialog-menu-panel[hidden] {
    display: none;
}

.dialog-menu-panel form {
    margin: 0;
}

.dialog-menu-action {
    display: flex;
    width: 100%;
    min-height: 32px;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: #244967;
    text-align: left;
    text-shadow: none;
    box-shadow: none;
}

.dialog-menu-action:hover {
    background: #eaf1f7;
    color: #173b59;
}

.dialog-menu-action.is-danger {
    color: #9d2c2c;
}

.announcement-head {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: space-between;
}

.announcement-actions,
.notification-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}

.announcement-actions form,
.notification-actions form {
    margin: 0;
}

.icon-action-button,
button.icon-action-button {
    display: inline-flex;
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #9aabb9;
    border-radius: 3px;
    background: #eef2f5;
    color: #324c65;
    box-shadow: 1px 1px 0 rgba(0,0,0,.08);
    text-shadow: none;
    text-decoration: none;
    line-height: 1;
}

.icon-action-button:hover,
button.icon-action-button:hover {
    background: #dfe7ed;
    text-decoration: none;
}

.icon-action-button.is-danger,
button.icon-action-button.is-danger {
    border-color: #c69c9c;
    background: #fff1f1;
    color: #9f3030;
}

.icon-action-button.is-danger:hover,
button.icon-action-button.is-danger:hover {
    background: #f7dddd;
}

.album-titlebar {
    align-items: center;
}

.album-titlebar > div {
    min-width: 0;
}

.album-titlebar h3 {
    margin-bottom: 2px;
}

.album-delete-form {
    margin: 0;
}

.photo-card {
    position: relative;
}

.photo-card-meta {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: space-between;
}

.photo-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.photo-card-actions form,
.photo-delete-form {
    margin: 0;
}

.photo-action-button,
button.photo-action-button {
    display: inline-flex;
    width: 100%;
    min-height: 30px;
    gap: 5px;
    align-items: center;
    justify-content: center;
    padding: 5px 7px;
    border: 1px solid #9aabb9;
    border-radius: 4px;
    background: linear-gradient(#f7fbff, #e3ebf2);
    color: #324c65;
    box-shadow: 1px 1px 0 rgba(0,0,0,.08);
    text-shadow: none;
    white-space: nowrap;
}

.photo-action-button:hover,
button.photo-action-button:hover {
    background: #dfe7ed;
}

.photo-action-button.is-active,
button.photo-action-button.is-active {
    border-color: #6f8fa9;
    background: #dfeaf3;
    color: #244660;
}

.photo-like-button.is-liked,
button.photo-like-button.is-liked {
    border-color: #ba8d9d;
    background: #fff0f4;
    color: #9b2c4a;
}

.photo-action-button.is-danger,
button.photo-action-button.is-danger {
    border-color: #c69c9c;
    background: #fff1f1;
    color: #9f3030;
}

.photo-action-button.is-danger:hover,
button.photo-action-button.is-danger:hover {
    background: #f7dddd;
}

.photo-card .photo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin: 6px 0;
}

.photo-card .photo-tag-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 6px;
    border: 1px solid #ccd7e0;
    background: #f7f9fb;
    color: #2b587a;
    font-size: 10px;
}

.photo-delete-form {
    margin-top: 5px;
}

.system-event-list {
    display: grid;
    gap: 8px;
}

.system-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px;
    border: 1px solid #c8d5df;
    background: #fff;
}

.system-event-head {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    align-items: baseline;
}

.system-event-head strong {
    padding: 2px 5px;
    border: 1px solid #b8c6d3;
    background: #eef3f8;
    color: #2d455b;
    font-size: 11px;
}

.system-event-head span {
    color: #7a858f;
    font-size: 10px;
}

.system-event p {
    margin: 6px 0;
    color: #3d4852;
}

.system-event-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    font-size: 11px;
}

.system-event-context {
    align-self: start;
    min-width: 180px;
}

.system-event-context summary {
    cursor: pointer;
    color: #2b587a;
}

.system-event-context dl {
    margin: 6px 0 0;
    padding: 6px;
    border: 1px solid #d8e0e7;
    background: #f7f9fb;
}

.system-event-context dt {
    color: #53606b;
    font-size: 10px;
}

.system-event-context dd {
    margin: 0 0 5px;
    overflow-wrap: anywhere;
}

.admin-title-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.remember-login {
    margin-top: -2px;
    color: #4f5f6c;
}

.photo-view-main {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.photo-main-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
    gap: 6px;
    padding: 7px;
    border: 1px solid #c8d5df;
    background: #eef3f8;
}

.photo-main-actions form {
    margin: 0;
}

.photo-icon-button,
button.photo-icon-button {
    display: inline-flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid #8ca3b6;
    border-radius: 4px;
    background: linear-gradient(#ffffff, #e3ebf2);
    color: #27465f;
    box-shadow: 1px 1px 0 rgba(0,0,0,.08);
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
}

.photo-icon-button:hover,
button.photo-icon-button:hover {
    background: #dfe9f1;
    text-decoration: none;
}

.photo-icon-button.is-like.is-liked,
button.photo-icon-button.is-like.is-liked,
.photo-comment-action.is-liked,
button.photo-comment-action.is-liked {
    border-color: #b67e91;
    background: #fff0f4;
    color: #9b2c4a;
}

.photo-icon-button.is-danger,
button.photo-icon-button.is-danger,
.photo-comment-action.is-danger,
button.photo-comment-action.is-danger {
    border-color: #c69c9c;
    background: #fff1f1;
    color: #9f3030;
}

.photo-icon-button.is-danger:hover,
button.photo-icon-button.is-danger:hover,
.photo-comment-action.is-danger:hover,
button.photo-comment-action.is-danger:hover {
    background: #f7dddd;
}

.photo-view-image-wrap {
    overflow: hidden;
}

.photo-comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-top: 6px;
}

.photo-comment-actions form {
    margin: 0;
}

.photo-comment-action,
button.photo-comment-action,
.photo-comment-reply summary {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 7px;
    border: 1px solid #c3d0db;
    border-radius: 4px;
    background: #f7f9fb;
    color: #365772;
    font-size: 11px;
    cursor: pointer;
    list-style: none;
}

.photo-comment-reply summary::-webkit-details-marker {
    display: none;
}

.photo-comment-reply[open] summary {
    background: #e6eef5;
}

.photo-comment-reply form {
    display: grid;
    gap: 5px;
    width: min(360px, 100%);
    margin-top: 6px;
    padding: 7px;
    border: 1px solid #d5dee6;
    background: #f8fafc;
}

.photo-comment-reply textarea {
    width: 100%;
}

.photo-comment-replies {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    padding-left: 14px;
    border-left: 2px solid #d8e3eb;
}

.photo-comment.is-reply {
    padding: 7px;
    border-color: #e1e7ed;
    background: #fbfcfd;
}

.photo-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 42px 12px 16px;
    background: rgba(10, 18, 26, .92);
}

.photo-fullscreen[hidden] {
    display: none;
}

.photo-fullscreen img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 68px);
    border: 1px solid #536879;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,.08);
    object-fit: contain;
}

.photo-fullscreen-close,
button.photo-fullscreen-close {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 101;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #8094a4;
    border-radius: 50%;
    background: #f7f9fb;
    color: #243d54;
}

body.has-photo-fullscreen {
    overflow: hidden;
}

@media (max-width: 600px) {
    .field-hint {
        font-size: 12px;
    }

    .dialog-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: start;
    }

    .dialog-main {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 8px;
        padding: 10px 4px 10px 10px;
    }

    .dialog-avatar {
        grid-row: 1 / span 2;
        width: 44px;
        height: 44px;
    }

    .dialog-person,
    .dialog-preview {
        grid-column: 2;
    }

    .dialog-menu {
        align-self: start;
        padding: 9px 8px 0 0;
    }

    .dialog-menu-toggle {
        min-width: 38px;
        min-height: 38px;
    }

    .dialog-menu-panel {
        right: 8px;
        min-width: 190px;
    }

    .dialog-menu-action {
        min-height: 38px;
        font-size: 13px;
    }

    .notification-item {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
        padding: 8px;
    }

    .notification-icon {
        width: 30px;
        height: 30px;
    }

    .notification-actions {
        display: grid;
        grid-auto-flow: row;
        gap: 5px;
    }

    .announcement-head {
        align-items: flex-start;
    }

    .announcement-actions {
        flex-wrap: nowrap;
    }

    .album-titlebar {
        display: flex;
        flex-direction: row;
    }

    .photo-card-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .photo-tag-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .photo-card .photo-tag-chip {
        font-size: 12px;
    }

    .photo-main-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        padding: 6px;
    }

    .photo-icon-button,
    button.photo-icon-button {
        min-height: 38px;
        gap: 4px;
        padding: 6px 5px;
        font-size: 11px;
        white-space: normal;
    }

    .photo-view-box {
        padding: 9px;
    }

    .photo-comment-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, auto));
        justify-content: start;
    }

    .photo-comment-reply {
        grid-column: span 2;
    }

    .photo-comment-reply form {
        width: calc(100vw - 44px);
        max-width: 100%;
    }

    .photo-comment-replies {
        padding-left: 9px;
    }

    .photo-fullscreen {
        padding: 48px 6px 10px;
    }

    .photo-fullscreen img {
        max-height: calc(100dvh - 64px);
    }

    .system-event {
        grid-template-columns: 1fr;
    }

    .system-event-context {
        min-width: 0;
    }
}

/* Activity feed final overrides. Keep near EOF so older feed rules above do not win accidentally. */
.feed-list {
    display: grid;
    gap: 10px;
}

.feed-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.feed-meta > i {
    width: 16px;
    color: #557895;
    text-align: center;
}

.feed-meta span {
    margin-left: auto;
    color: #818a92;
    font-size: 10px;
}

.feed-photo-link {
    max-width: 440px;
}

.feed-photo-link img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.feed-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
}

.feed-actions form {
    margin: 0;
}

.feed-actions button,
.feed-comment-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 3px;
    text-decoration: none;
}

.feed-comment-link {
    border: 1px solid #b8c9d8;
    background: #eef4f8;
    color: #2e516e;
}

.feed-comment-link:hover {
    border-color: #8faec7;
    background: #e2edf5;
}

.feed-activity-meta {
    padding-bottom: 5px;
}

.feed-activity-preview,
.feed-activity-text {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid #d4dee7;
    background: #f8fafc;
    color: inherit;
    text-decoration: none;
}

.feed-activity-preview:hover,
.feed-activity-text:hover {
    border-color: #aac0d2;
    background: #f2f7fb;
}

.feed-activity-preview img {
    width: 58px;
    height: 58px;
    max-width: 58px;
    max-height: 58px;
    object-fit: cover;
    padding: 2px;
    border: 1px solid #ccd5dd;
    background: #fff;
}

.feed-activity-preview span,
.feed-activity-text {
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.feed-activity-text {
    grid-template-columns: 1fr;
}

.feed-activity-text em {
    display: block;
    margin-top: 5px;
    color: #7a858f;
    font-size: 11px;
    font-style: normal;
}

.feed-announcement {
    padding: 9px;
    border: 1px solid #e1c46a;
    background: #fff7d6;
}

.feed-announcement p {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
}

.feed-item_photo_like .feed-meta > i,
.feed-actions .fa-heart {
    color: #b64242;
}

@media (max-width: 640px) {
    .feed-meta {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 2px 5px;
        font-size: 12px;
    }

    .feed-meta span {
        grid-column: 2;
        margin-left: 0;
        font-size: 11px;
    }

    .feed-photo-link,
    .feed-photo-link img {
        width: 100%;
        max-width: 100%;
    }

    .feed-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px;
    }

    .feed-actions button,
    .feed-comment-link {
        width: 100%;
        min-height: 36px;
    }

    .feed-comment-form {
        grid-template-columns: 1fr auto;
        gap: 6px;
    }

    .feed-comment-form input[type="text"] {
        width: 100%;
        min-width: 0;
    }

    .feed-activity-preview {
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 7px;
    }

    .feed-activity-preview img {
        width: 52px;
        height: 52px;
        max-width: 52px;
        max-height: 52px;
    }
}

/* Search 2.0 cards. Keep near EOF so older search rules above do not win accidentally. */
.search-user-card-v2 {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
}

.search-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #b9c8d5;
    border-radius: 50%;
    background: linear-gradient(#f9fbfd, #dfe8ef);
    color: #35536d;
    font-weight: bold;
    overflow: hidden;
    text-decoration: none;
}

.search-user-avatar:hover {
    border-color: #7f9bb2;
    text-decoration: none;
}

.search-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-user-main {
    min-width: 0;
}

.search-user-presence {
    display: inline-block;
    margin-top: 2px;
}

.search-user-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.search-user-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 6px;
    border: 1px solid #d6e0e8;
    background: #f8fafc;
    color: #516272;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.search-user-tag i {
    color: #587996;
}

.search-user-score {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.search-user-score small {
    color: #7a858f;
    font-size: 10px;
}

.search-users-table-compact .search-user-card-v2 {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 8px;
}

.search-users-table-compact .search-user-avatar {
    width: 38px;
    height: 38px;
}

.search-users-table-compact .search-user-tags {
    display: none;
}

@media (max-width: 640px) {
    .search-user-card-v2,
    .search-users-table-compact .search-user-card-v2 {
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: start;
    }

    .search-user-avatar,
    .search-users-table-compact .search-user-avatar {
        width: 42px;
        height: 42px;
    }

    .search-user-score {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .search-user-score .search-rating {
        width: auto;
        min-width: 92px;
    }

    .search-user-tags {
        gap: 5px;
    }

    .search-user-tag {
        font-size: 11px;
    }
}

/* Mobile layout hotfixes: keep near EOF so older responsive rules cannot squeeze text columns. */
.checkbox-line input[type="checkbox"],
.checkbox-line input[type="radio"] {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 16px;
    margin: 0;
}

.checkbox-line span {
    min-width: 0;
}

.message-compose-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    align-items: end;
    min-width: 0;
}

.message-send-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.message-send-button i {
    display: none;
}

@media (max-width: 640px) {
    .stacked-form .checkbox-line,
    .remember-login {
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: 100%;
        line-height: 1.35;
    }

    .stacked-form .checkbox-line input[type="checkbox"] {
        width: 20px !important;
        height: 20px;
        margin-top: 0;
    }

    .feed-meta,
    .feed-activity-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 3px 6px;
        min-width: 0;
        font-size: 13px;
        line-height: 1.35;
    }

    .feed-meta > i {
        flex: 0 0 18px;
        width: 18px;
    }

    .feed-meta a,
    .feed-meta strong {
        min-width: 0;
        max-width: 100%;
    }

    .feed-meta span {
        flex: 0 0 100%;
        margin-left: 24px;
        font-size: 11px;
    }

    .feed-activity-preview,
    .feed-activity-text {
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }

    body.has-message-page {
        background: #e9eff5;
        overflow-x: hidden;
    }

    body.has-message-page .page {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
        border-left: 0;
        border-right: 0;
        display: flex;
        flex-direction: column;
    }

    body.has-message-page .content {
        flex: 1 1 auto;
        display: flex;
        padding: 0;
        overflow: visible;
    }

    body.has-message-page .header,
    body.has-message-page .content > .announcements {
        display: none !important;
    }

    body.has-message-page .footer,
    body.has-message-page .mobile-bottom-nav,
    body.has-message-page .mobile-menu-backdrop,
    body.has-message-page .mobile-menu-panel {
        display: none !important;
    }

    body.has-message-page .message-page {
        width: 100%;
        min-width: 0;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
        gap: 0;
        background: #e9eff5;
    }

    body.has-message-page .message-dialog-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        top: 0;
        z-index: 20;
        margin: 0;
        padding: 7px 9px;
        border-width: 0 0 1px;
        background: #f8fbfd;
        box-shadow: 0 1px 3px rgba(34, 54, 72, .08);
    }

    body.has-message-page .message-back {
        width: auto;
        min-height: 36px;
        padding: 7px 9px;
        white-space: nowrap;
    }

    body.has-message-page .message-dialog-title h1 {
        margin: 0 0 2px;
        overflow: hidden;
        font-size: 16px;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.has-message-page .message-thread {
        flex: 1 1 auto;
        min-height: 0;
        padding: 10px 8px 154px;
        border: 0;
        background: linear-gradient(#eef3f8, #e4edf5);
        overflow-y: visible;
    }

    body.has-message-page .message-bubble {
        max-width: 84%;
        border-radius: 13px;
        box-shadow: 0 1px 2px rgba(33, 52, 68, .10);
    }

    body.has-message-page .message-bubble.is-own {
        background: #dbeaf5;
    }

    body.has-message-page .message-compose {
        position: fixed;
        right: 0;
        bottom: var(--message-keyboard-inset, 0px);
        left: 0;
        z-index: 35;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: none;
        gap: 5px;
        margin: 0;
        padding: 6px 8px calc(7px + env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-color: #b7c8d6;
        background: rgba(238, 244, 249, .94);
        box-shadow: 0 -2px 10px rgba(33, 52, 68, .12);
        backdrop-filter: blur(8px);
        transition: none;
    }

    body.has-message-page .message-emoji-toolbar {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        padding: 0 1px 3px;
        border: 0;
        background: transparent;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.has-message-page .message-compose .message-emoji-button {
        flex: 0 0 auto;
        width: 36px;
        min-width: 36px;
        min-height: 34px;
        padding: 3px;
        border-radius: 8px;
        font-size: 20px;
    }

    body.has-message-page .message-compose-row {
        grid-template-columns: minmax(0, 1fr) 40px;
        gap: 6px;
        align-items: end;
        padding: 5px;
        border: 1px solid #b5c7d6;
        border-radius: 22px;
        background: #fff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }

    body.has-message-page .message-compose textarea {
        min-height: 36px;
        max-height: 112px;
        padding: 8px 7px;
        border: 0;
        background: transparent;
        box-shadow: none;
        line-height: 1.35;
        resize: none;
        overflow-y: auto;
    }

    body.has-message-page .message-compose textarea:focus {
        outline: 0;
    }

    body.has-message-page .message-send-button {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        border-radius: 50%;
        box-shadow: none;
    }

    body.has-message-page .message-send-button i {
        display: inline-block;
        font-size: 15px;
    }

    body.has-message-page .message-send-button span {
        display: none;
    }

    body.has-message-page .message-compose-status {
        min-height: 12px;
        text-align: center;
    }

    body.has-message-page .message-compose-status:empty {
        display: none;
    }

    body.has-message-keyboard .message-compose {
        padding-bottom: 7px;
    }

    body.has-message-keyboard .message-emoji-toolbar {
        display: none;
    }

    body.has-message-page .message-new-button {
        bottom: calc(82px + env(safe-area-inset-bottom));
    }
}

/* Shared writing controls: retro on desktop, thumb-friendly on small screens. */
.compact-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: end;
    min-width: 0;
}

.compact-composer input[type="text"],
.compact-composer textarea {
    min-width: 0;
}

.compact-composer-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

@media (max-width: 640px) {
    .compact-composer,
    .feed-comment-form.compact-composer,
    .wall-comment-form.compact-composer,
    .photo-comment-form.compact-composer,
    .discussion-reply-form.compact-composer,
    .photo-comment-reply .compact-composer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        gap: 6px;
        align-items: end;
        width: 100%;
        max-width: 100%;
        margin: 8px 0 0;
        padding: 5px;
        border: 1px solid #b5c7d6;
        border-radius: 23px;
        background: #fff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(33,52,68,.08);
    }

    .compact-composer input[type="text"],
    .compact-composer textarea {
        grid-column: 1;
        width: 100%;
        min-width: 0;
        min-height: 38px;
        max-height: 116px;
        margin: 0;
        padding: 9px 8px;
        border: 0;
        border-radius: 17px;
        background: transparent;
        box-shadow: none;
        font-size: 16px;
        line-height: 1.35;
        resize: none;
    }

    .compact-composer input[type="text"]:focus,
    .compact-composer textarea:focus {
        outline: 0;
    }

    .compact-composer .compact-composer-send,
    .photo-comment-reply .compact-composer .compact-composer-send {
        grid-column: 2;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        border-radius: 50%;
        box-shadow: none;
    }

    .compact-composer .compact-composer-send span {
        display: none;
    }

    .composer-card {
        width: 100%;
        max-width: 100%;
        padding: 10px !important;
        border: 1px solid #b8c8d5 !important;
        border-radius: 10px;
        background: linear-gradient(#f1f6fa, #e7eff6) !important;
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(33,52,68,.08);
    }

    .composer-card input[type="text"],
    .composer-card textarea,
    .composer-card select {
        width: 100%;
        min-width: 0;
        padding: 9px 10px;
        border-color: #aebfcd;
        border-radius: 8px;
        background: #fff;
        font-size: 16px;
        line-height: 1.35;
        box-shadow: inset 0 1px 2px rgba(35,55,72,.06);
    }

    .composer-card textarea {
        min-height: 82px;
        resize: vertical;
    }

    .composer-card .composer-card-submit {
        width: 100%;
        min-height: 42px;
        border-radius: 8px;
        font-size: 14px;
    }

    .wall-form.composer-card .wall-form-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .photo-comment-reply .compact-composer {
        width: min(100%, 360px);
        padding: 5px;
        border-color: #b5c7d6;
        background: #fff;
    }
}