/* ============= BLOG ============= */

.blog-wrapper { max-width: 800px; margin: 0 auto; padding: 40px 20px; }

.blog-title { text-align: center; font-size: 80px; letter-spacing: 10px; margin: 0 0 10px; transition: transform 0.3s ease; }
.blog-title:hover { color: #aa00ff; transform: scale(1.05); }
.blog-subtitle { text-align: center; font-size: 20px; letter-spacing: 4px; color: #2a8800; margin: 0 0 40px; }

.btn-new-post {
    display: block; width: 100%; background: transparent; border: 1px dotted #48ff00;
    color: #48ff00; font-family: "Handjet", sans-serif; font-size: 22px; letter-spacing: 4px;
    padding: 14px; cursor: pointer; transition: all 0.3s ease; margin-bottom: 40px; text-align: center;
}
.btn-new-post:hover { border-color: #aa00ff; color: #aa00ff; transform: scale(1.01); }

.compose-box {
    border: 1px dotted #48ff00; background: rgba(72,255,0,0.03);
    padding: 30px; margin-bottom: 40px; display: none;
    max-width: 600px; margin-left: auto; margin-right: auto;
}
.compose-box.open { display: block; }
.compose-box:hover { border-color: #aa00ff; }
.compose-box input,
.compose-box textarea {
    width: 100%; box-sizing: border-box;
    background: transparent; border: 1px dotted #48ff00; color: #48ff00;
    font-family: "Handjet", sans-serif; font-size: 20px; padding: 12px;
    margin-bottom: 16px; outline: none; resize: vertical; transition: border-color 0.3s ease;
}
.compose-box input:focus, .compose-box textarea:focus { border-color: #aa00ff; }
.compose-box textarea { min-height: 160px; }
.compose-box input::placeholder, .compose-box textarea::placeholder { color: #1a5500; }
.compose-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.compose-row label {
    font-size: 16px; letter-spacing: 2px; color: #2a8800; cursor: pointer;
    border: 1px dotted #2a8800; padding: 8px 16px; transition: all 0.3s ease;
}
.compose-row label:hover { border-color: #aa00ff; color: #aa00ff; }
.compose-row input[type="file"] { display: none; }
#img-preview { max-height: 120px; max-width: 200px; object-fit: cover; border: 1px dotted #48ff00; display: none; }
.btn-submit {
    margin-left: auto; background: transparent; border: 1px dotted #48ff00; color: #48ff00;
    font-family: "Handjet", sans-serif; font-size: 20px; letter-spacing: 3px;
    padding: 10px 30px; cursor: pointer; transition: all 0.3s ease;
}
.btn-submit:hover { border-color: #aa00ff; color: #aa00ff; transform: scale(1.02); }
.btn-cancel {
    background: transparent; border: 1px dotted #ff4444; color: #ff4444;
    font-family: "Handjet", sans-serif; font-size: 18px; letter-spacing: 2px;
    padding: 10px 24px; cursor: pointer; transition: all 0.3s ease;
}
.btn-cancel:hover { background: rgba(255,68,68,0.1); }

#feed { display: flex; flex-direction: column; gap: 30px; }
.post-card {
    border: 1px dotted #48ff00;
    background: rgba(72,255,0,0.03);
    padding: 28px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.post-card:hover { border-color: #aa00ff; background: rgba(170,0,255,0.05); }
.post-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; font-size: 14px; letter-spacing: 2px; color: #2a8800;
}
.post-author { color: #48ff00; font-size: 16px; }
.post-author span { color: #aa00ff; }
.post-date { font-size: 13px; color: #1a5500; }
.post-title {
    font-size: 36px; letter-spacing: 3px; color: #48ff00;
    margin: 0 0 14px; line-height: 1.2; cursor: pointer; transition: color 0.3s ease;
}
.post-title:hover { color: #aa00ff; }
.post-body { font-size: 20px; line-height: 1.8; color: #48ff00; margin: 0 0 16px; white-space: pre-wrap; }
.post-body.truncated { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.post-img { 
    width: 100%; 
    height: auto;
    max-height: none;
    object-fit: contain;
    border: 1px dotted #48ff00; 
    margin-bottom: 16px; 
    display: block; 
}

.post-actions {
    display: flex; gap: 20px; align-items: center;
    border-top: 1px dotted #0d2200; padding-top: 14px; margin-top: 14px; flex-wrap: wrap;
}
.action-btn {
    background: transparent; border: none; color: #2a8800; font-family: "Handjet", sans-serif;
    font-size: 18px; letter-spacing: 2px; cursor: pointer; padding: 4px 0;
    transition: all 0.3s ease; display: flex; align-items: center; gap: 6px;
}
.action-btn:hover { color: #aa00ff; transform: scale(1.05); }
.action-btn.liked { color: #aa00ff; }
.read-more {
    background: transparent; border: none; color: #1a5500; font-family: "Handjet", sans-serif;
    font-size: 16px; letter-spacing: 2px; cursor: pointer; padding: 0; transition: color 0.3s ease;
}
.read-more:hover { color: #aa00ff; }
.delete-post-btn {
    margin-left: auto; background: transparent; border: none; color: #3a0000;
    font-family: "Handjet", sans-serif; font-size: 16px; letter-spacing: 2px;
    cursor: pointer; transition: color 0.3s ease;
}
.delete-post-btn:hover { color: #ff4444; }

.comments-section { margin-top: 20px; border-top: 1px dotted #0d2200; padding-top: 20px; display: none; }
.comments-section.open { display: block; }
.comment {
    border-left: 1px dotted #48ff00; padding: 8px 14px; margin-bottom: 12px;
    background: rgba(72,255,0,0.02); transition: all 0.3s ease; position: relative;
}
.comment:hover { border-left-color: #aa00ff; background: rgba(170,0,255,0.04); }
.comment-meta { font-size: 13px; color: #2a8800; letter-spacing: 2px; margin-bottom: 4px; }
.comment-meta span { color: #aa00ff; }
.comment-text { font-size: 18px; color: #48ff00; }
.delete-comment-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: #3a0000; cursor: pointer;
    font-size: 14px; font-family: "Handjet", sans-serif; opacity: 0; transition: all 0.3s ease;
}
.comment:hover .delete-comment-btn { opacity: 1; }
.delete-comment-btn:hover { color: #ff4444; }
.comment-form { display: flex; gap: 10px; margin-top: 10px; }
.comment-form input {
    flex: 1; background: transparent; border: 1px dotted #48ff00; color: #48ff00;
    font-family: "Handjet", sans-serif; font-size: 18px; padding: 8px 14px;
    outline: none; transition: border-color 0.3s ease;
}
.comment-form input:focus { border-color: #aa00ff; }
.comment-form input::placeholder { color: #1a5500; }
.comment-form button {
    background: transparent; border: 1px dotted #48ff00; color: #48ff00;
    font-family: "Handjet", sans-serif; font-size: 16px; letter-spacing: 2px;
    padding: 8px 20px; cursor: pointer; transition: all 0.3s ease;
}
.comment-form button:hover { border-color: #aa00ff; color: #aa00ff; }

.feed-empty { text-align: center; font-size: 24px; letter-spacing: 4px; color: #1a5500; padding: 60px 0; }
.feed-loading { text-align: center; font-size: 28px; letter-spacing: 4px; color: #2a8800; padding: 40px 0; animation: pulse 1s infinite; }
.btn-load-more {
    display: block; width: 100%; background: transparent; border: 1px dotted #1a5500;
    color: #1a5500; font-family: "Handjet", sans-serif; font-size: 18px; letter-spacing: 3px;
    padding: 14px; cursor: pointer; transition: all 0.3s ease; margin-top: 30px;
}
.btn-load-more:hover { border-color: #48ff00; color: #48ff00; }

#toast {
    position: fixed; bottom: 30px; left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #000; border: 1px dotted #48ff00; color: #48ff00;
    font-family: "Handjet", sans-serif; font-size: 18px; letter-spacing: 3px;
    padding: 12px 30px; transition: transform 0.3s ease; z-index: 999;
}
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.error { border-color: #ff4444; color: #ff4444; }

.comment-reply {
    margin-left: 40px;
    border-left: 2px solid #48ff00;
    padding-left: 12px;
    margin-top: 8px;
}

.reply-btn {
    background: none;
    border: none;
    color: #48ff00;
    cursor: pointer;
    font-family: Handjet, monospace;
    font-size: 12px;
    margin-left: 12px;
    padding: 2px 6px;
}

.reply-btn:hover {
    background: #1a3a00;
    border-radius: 4px;
}

.comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.reply-form input {
    flex: 1;
    background: #0a1f00;
    border: 1px solid #2a5f00;
    color: #48ff00;
    padding: 6px;
    font-family: Handjet, monospace;
}

.reply-form button {
    background: #1a3a00;
    border: 1px solid #48ff00;
    color: #48ff00;
    cursor: pointer;
    font-family: Handjet, monospace;
    padding: 4px 8px;
}