* { box-sizing: border-box; }
body {
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    margin: 0; background: #f0f2f5; color: #1c1e21;
}
a { color: #1877f2; text-decoration: none; }
.navbar {
    background: #fff; padding: 12px 24px; display: flex;
    justify-content: space-between; align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.1); position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: bold; font-size: 20px; color: #1877f2; }
.nav-links { display: flex; gap: 16px; align-items: center; }
.user-badge { background: #e7f3ff; color: #1877f2; padding: 4px 10px; border-radius: 12px; font-size: 14px; }
.container { max-width: 680px; margin: 20px auto; padding: 0 12px; }

.composer, .post, .friend-card, .profile-card, .auth-box {
    background: #fff; border-radius: 8px; padding: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1); margin-bottom: 16px;
}
.auth-box { max-width: 380px; margin: 80px auto; }
.composer textarea {
    width: 100%; border: none; resize: vertical; min-height: 80px;
    font-size: 15px; padding: 8px; outline: none;
}
.preview-wrap { margin: 10px 0; }
.preview-wrap img { max-width: 100%; max-height: 300px; border-radius: 8px; }
.composer-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    border-top: 1px solid #e4e6eb; padding-top: 10px; align-items: center;
}
.photo-btn { cursor: pointer; padding: 8px 12px; border-radius: 6px; background: #f0f2f5; }
.composer-actions select, .composer-actions button {
    padding: 8px 12px; border-radius: 6px; border: none; cursor: pointer;
}
.composer-actions button { background: #1877f2; color: #fff; font-weight: 600; }

.post-header { margin-bottom: 8px; }
.post-content { white-space: pre-wrap; margin: 8px 0; }

.post-actions { display: flex; gap: 12px; border-top: 1px solid #e4e6eb; padding-top: 8px; margin-top: 8px; }
.post-actions button {
    background: none; border: none; cursor: pointer; color: #65676b;
    padding: 6px 10px; border-radius: 6px; font-size: 14px;
}
.post-actions button.liked { color: #e41e3f; }

.comments { border-top: 1px solid #e4e6eb; padding-top: 8px; margin-top: 8px; }
.comment { padding: 6px 0; font-size: 14px; }
.comment .muted { color: #65676b; font-size: 12px; }
.reply-btn { background: none; border: none; color: #1877f2; cursor: pointer; font-size: 12px; padding: 2px 0; }
.comment-form, .reply-form { display: flex; gap: 6px; margin-top: 6px; }
.comment-form input, .reply-form input {
    flex: 1; padding: 8px 12px; border: 1px solid #ccd0d5; border-radius: 16px; outline: none;
}
.comment-form button, .reply-form button {
    border: none; background: #1877f2; color: #fff; padding: 0 14px; border-radius: 16px; cursor: pointer;
}
.muted { color: #65676b; }
.error { color: #d93025; padding: 8px; background: #fce8e6; border-radius: 6px; margin-bottom: 10px; }
.success { color: #1a7f37; padding: 8px; background: #e6f4ea; border-radius: 6px; margin-bottom: 10px; }

.auth-box h1 { margin-top: 0; }
.auth-box input { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #ccd0d5; border-radius: 6px; font-size: 15px; }
.auth-box button { width: 100%; padding: 12px; background: #1877f2; color: #fff; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; }

.friend-card { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; }
.friend-card button { background: #1877f2; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; margin-left: 6px; }
.friend-card button[data-dec="reject"] { background: #e4e6eb; color: #1c1e21; }
h2 { font-size: 18px; margin-top: 24px; }

/* ---------- Markdown toolbar ---------- */
.md-toolbar {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 6px 0; border-bottom: 1px solid #e4e6eb; margin-bottom: 6px;
}
.md-toolbar button {
    background: #f0f2f5; border: 1px solid #e4e6eb; color: #1c1e21;
    padding: 4px 10px; border-radius: 5px; cursor: pointer;
    font-size: 13px; line-height: 1.2;
}
.md-toolbar button:hover { background: #e4e6eb; }

/* ---------- Markdown output ---------- */
.post-content .md-p, .md-preview .md-p { margin: 0 0 10px; line-height: 1.55; }
.post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content h5, .post-content h6,
.md-preview h1, .md-preview h2, .md-preview h3,
.md-preview h4, .md-preview h5, .md-preview h6 {
    margin: 12px 0 6px; line-height: 1.3;
}
.post-content h1, .md-preview h1 { font-size: 22px; }
.post-content h2, .md-preview h2 { font-size: 19px; }
.post-content h3, .md-preview h3 { font-size: 17px; }
.post-content h4, .md-preview h4,
.post-content h5, .md-preview h5,
.post-content h6, .md-preview h6 { font-size: 15px; color: #65676b; }

.post-content ul, .md-preview ul,
.post-content ol, .md-preview ol { margin: 6px 0 10px; padding-left: 24px; }
.post-content li, .md-preview li { line-height: 1.5; }

.post-content blockquote, .md-preview blockquote {
    border-left: 4px solid #1877f2; background: #f5f8ff;
    margin: 8px 0; padding: 8px 12px; border-radius: 0 6px 6px 0;
    color: #38424d;
}

.md-table {
    border-collapse: collapse; margin: 8px 0; width: 100%;
    font-size: 14px;
}
.md-table th, .md-table td {
    border: 1px solid #ccd0d5; padding: 6px 10px;
    text-align: left; vertical-align: top;
}
.md-table thead th { background: #f5f6f7; font-weight: 600; }

.post-content code.md-inline-code, .md-preview code {
    background: #f0f2f5; padding: 1px 5px; border-radius: 4px;
    font-size: 13px; font-family: ui-monospace, Menlo, monospace;
}
.md-code {
    background: #1c1e21; color: #f0f2f5; padding: 10px 12px;
    border-radius: 6px; overflow-x: auto; font-size: 13px;
}

.post-content sup, .md-preview sup { font-size: 0.75em; vertical-align: super; }
.post-content sub, .md-preview sub { font-size: 0.75em; vertical-align: sub; }

.md-preview-btn {
    background: #e7f3ff; color: #1877f2; border: none;
    padding: 6px 12px; border-radius: 6px; cursor: pointer;
    font-size: 13px; margin-top: 4px;
}
.md-preview {
    border: 1px dashed #ccd0d5; border-radius: 6px;
    padding: 10px 12px; margin-top: 8px; background: #fafbfc;
    font-size: 15px;
}

.comment-content { line-height: 1.45; }
.comment-content p { margin: 0 0 6px; }
.comment-content table.md-table { font-size: 13px; }

.md-help { margin-top: 10px; font-size: 13px; }
.md-help summary { cursor: pointer; color: #1877f2; }
.md-help-table { margin-top: 8px; border-collapse: collapse; }
.md-help-table td { padding: 3px 10px; border-bottom: 1px solid #f0f2f5; }
.md-help-table td:first-child { color: #65676b; white-space: nowrap; }

.md-link {
    color: #1877f2;
    text-decoration: none;
    word-break: break-all;
}
.md-link:hover { text-decoration: underline; }

/* ---------- Link preview card ---------- */
.link-preview {
    display: flex;
    gap: 12px;
    border: 1px solid #e4e6eb;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px 0;
    text-decoration: none;
    color: inherit;
    background: #fafbfc;
    transition: background .15s;
}
.link-preview:hover { background: #f0f2f5; }
.lp-image {
    flex: 0 0 140px;
    background: #e4e6eb;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.lp-image img {
    width: 140px; height: 140px;
    object-fit: cover; display: block;
}
.lp-body { flex: 1; padding: 10px 12px 10px 0; min-width: 0; }
.lp-site {
    font-size: 12px; color: #65676b; text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 4px;
}
.lp-title {
    font-weight: 600; font-size: 15px; line-height: 1.3;
    margin-bottom: 4px; color: #1c1e21;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lp-desc {
    font-size: 13px; color: #65676b; line-height: 1.4;
    margin-bottom: 4px;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lp-url {
    font-size: 12px; color: #1877f2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 520px) {
    .link-preview { flex-direction: column; }
    .lp-image, .lp-image img { width: 100%; height: 180px; flex: none; }
    .lp-body { padding: 10px 12px; }
}

/* ---------- Share ---------- */
.share-btn {
    background: none; border: none; cursor: pointer;
    color: #65676b; padding: 6px 10px; border-radius: 6px; font-size: 14px;
}
.share-btn:hover { background: #f0f2f5; color: #1877f2; }
.share-internal:hover { background: #fff6e0; color: #b26a00; }

/* ---------- Toast ---------- */
#toast {
    position: fixed; left: 50%; bottom: 30px;
    transform: translateX(-50%) translateY(20px);
    background: #1c1e21; color: #fff;
    padding: 10px 18px; border-radius: 24px;
    font-size: 14px; opacity: 0;
    transition: opacity .2s, transform .2s;
    pointer-events: none; z-index: 1000;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Admin ---------- */
.admin-tag {
    background: #f7b500; color: #1c1e21; font-size: 10px;
    padding: 2px 6px; border-radius: 4px; font-weight: bold;
    margin-left: 4px; vertical-align: middle;
}
.admin-del-post, .admin-del-comment {
    background: none; border: none; cursor: pointer;
    font-size: 14px; padding: 2px 6px; border-radius: 4px;
    color: #d93025;
}
.admin-del-post:hover, .admin-del-comment:hover { background: #fce8e6; }
.admin-table {
    width: 100%; border-collapse: collapse; background: #fff;
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.1); margin-bottom: 20px;
}
.admin-table th, .admin-table td {
    padding: 10px 12px; text-align: left;
    border-bottom: 1px solid #e4e6eb; font-size: 14px;
}
.admin-table th { background: #f5f6f7; font-weight: 600; }
.ban-tag {
    background: #d93025; color: #fff; font-size: 10px;
    padding: 2px 6px; border-radius: 4px; font-weight: bold;
}
.ok-tag {
    background: #d1f4d8; color: #1a7f37; font-size: 10px;
    padding: 2px 6px; border-radius: 4px; font-weight: bold;
}
.actions-cell { display: flex; gap: 4px; flex-wrap: wrap; }
.ok-btn, .warn-btn, .danger-btn {
    color: #fff; border: none; padding: 5px 9px;
    border-radius: 5px; cursor: pointer; font-size: 12px;
}
.ok-btn { background: #1a7f37; }
.warn-btn { background: #f7b500; color: #1c1e21; }
.danger-btn { background: #d93025; }
.ok-btn:hover { background: #166a2e; }
.warn-btn:hover { background: #d99e00; }
.danger-btn:hover { background: #b7261c; }
code {
    background: #f0f2f5; padding: 2px 6px; border-radius: 4px;
    font-size: 12px;
}
/* ---------- Notification bell ---------- */
.notif-wrap { position: relative; display: inline-block; }
.notif-bell {
    background: none; border: none; cursor: pointer;
    font-size: 18px; padding: 4px 8px; border-radius: 6px;
    position: relative; color: #1c1e21;
}
.notif-bell:hover { background: #f0f2f5; }
.notif-badge {
    position: absolute; top: -2px; right: -2px;
    background: #e41e3f; color: #fff; font-size: 10px;
    font-weight: bold; padding: 1px 5px; border-radius: 10px;
    min-width: 16px; text-align: center; line-height: 1.3;
}
.notif-panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 340px; max-height: 440px;
    background: #fff; border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
    overflow: hidden; z-index: 100;
    display: flex; flex-direction: column;
}
.notif-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid #e4e6eb;
}
.notif-mark-all {
    background: none; border: none; color: #1877f2;
    font-size: 12px; cursor: pointer;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { overflow-y: auto; max-height: 380px; }
.notif-item {
    padding: 10px 14px; border-bottom: 1px solid #f0f2f5;
    cursor: pointer; transition: background .12s;
}
.notif-item:hover { background: #f5f6f7; }
.notif-item.unread { background: #e7f3ff; }
.notif-item.unread:hover { background: #d6eaff; }
.notif-text { font-size: 14px; line-height: 1.4; color: #1c1e21; }
.notif-text a { color: #1877f2; }
.notif-time { font-size: 12px; color: #65676b; margin-top: 2px; }
.notif-empty { padding: 24px; text-align: center; color: #65676b; font-size: 14px; }
.lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,.9);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000; cursor: zoom-out; padding: 20px;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }
/* ---------- Composer media preview ---------- */
.media-preview {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 10px 0; padding: 8px;
    background: #f7f8fa; border-radius: 8px;
    border: 1px dashed #ccd0d5;
}
.media-tile {
    position: relative;
    width: 140px; height: 140px;
    border-radius: 8px; overflow: hidden;
    background: #e4e6eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.media-tile img,
.media-tile video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.media-remove {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(0,0,0,.7); color: #fff;
    border: none; cursor: pointer; font-size: 16px;
    line-height: 1; display: flex; align-items: center; justify-content: center;
}
.media-remove:hover { background: #d93025; }

/* ---------- Post media grid ---------- */
.post-media {
    display: grid; gap: 4px; margin: 10px 0;
    max-width: 100%;
    border-radius: 8px; overflow: auto;
}

.post-media.double { grid-template-columns: 1fr 1fr; }
.post-media.multi  { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
.post-media.multi .media-item:first-child {
    grid-column: 1 / -1;
    grid-row: span 1;
}

.media-item { overflow: hidden; background: #000; }
.media-item img,
.media-item video {
    width: 100%; height: 100%;
    display: block; object-fit: cover;
}
/* ---------- Single media: fit to width, respect aspect ratio ---------- */
.post-media.single {
    display: block;          /* no grid for a single item */
    grid-template-columns: none;
    width: 100%;
    object-fit: cover;
    background: transparent; /* don't show black bar unless video */
}

.post-media.single .media-item {
    width: 100%;
    background: transparent;
}

/* Image: scale to container width, never taller than 80vh */
.post-media.single .media-item.image {
    line-height: 0;         /* kill the inline-gap under <img> */
}

.post-media.single .media-item.image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 30vh;       /* cap on tall portraits */
    object-fit: cover;    /* preserve aspect ratio when max-height kicks in */
    border-radius: 8px;
    background: #f0f2f5;    /* subtle fill for letterbox areas */
}

/* Video: keep black background, contain within 80vh */
.post-media.single .media-item.video {
    border-radius: 8px;
    
}

.post-media.single .media-item.video video {
    display: block;
    width: 100%;
    max-height: 30vh;
    height: auto;
    object-fit: cover;
    background: #000;
}
/* Keep video controls usable, don't let object-fit hide them */
.media-item video { background: #000; }

@media (max-width: 520px) {
    .post-media.multi { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .media-tile { width: 100px; height: 100px; }
}

@media (max-width: 520px) {
    .notif-panel { width: 300px; right: -40px; }
}