*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,sans-serif;max-width:600px; color:#111;margin:0 auto;padding:1rem;background:#f8f9fa}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:.5rem;border-bottom:2px solid #0066cc}
h1{font-size:1.5rem;color:#0066cc}
a{color:#0066cc; text-decoration:none;}
h2{color:#333;margin-bottom:1rem; font-size:1rem;}
button{background:#0066cc;color:white;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer}
button:hover{background:#0052a3}
button.secondary{background:#777} 
button.secondary:hover{background:#5a6268}
button.danger{background:#dc3545}
button.danger:hover{background:#c82333}
button.small{font-size:.875rem;padding:.25rem .5rem}
button.follow-btn{background: none; border: 1px solid #0066cc; color: #0066cc}
button.follow-btn:hover{background:#0066cc; color: white}
button.unfollow-btn{background:#777}
.auth-box,.form-box{background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:1rem;margin:1rem 0}
.tabs{display:flex;margin-bottom:1rem;border-bottom:1px solid #dee2e6}
.tab{flex:1;text-align:center;padding:.75rem;cursor:pointer;color:#333}
.tab.active{color:#0066cc;border-bottom:2px solid #0066cc}
input,textarea{resize: none; width:100%;padding:.5rem;margin-bottom:0.5rem;border:1px solid #ced4da;border-radius:4px;font-size:1rem}
input:focus,textarea:focus{outline:none;border-color:#0066cc}
.post, .comment{background:#fff;border:1px solid #e9ecef;border-radius:6px;padding:1rem;margin-bottom:1rem;position:relative}

.post-header{display:flex;justify-content:space-between;margin-bottom:.5rem}
.post-user{color:#0066cc;font-weight:600;text-decoration:none}
.post-user:hover{text-decoration:underline}
.post-time{color:#333;font-size:.8rem}
.post-content{line-height:1.5;margin-bottom:.5rem}
.post-actions{bottom:1rem;right:.5rem}
.login-prompt{margin-bottom:1rem;}
.char-count{color:#333}
.delete-link{margin-right:0.5rem;}
.comment-link, .delete-link, .post-time a{color:#333;text-decoration:none;font-size:.75rem;}
.delete-link:hover{color:#dc3545; text-decoration:underline;}
.load-more{text-align:center;margin:2rem 0}
.load-more button{width:100%}
.hidden{display:none}
.alert{background:#d4edda;color:#155724;border:1px solid #c3e6cb;border-radius:4px;padding:1rem;margin-bottom:1rem}
.alert.error{background:#f8d7da;color:#721c24;border-color:#f5c6cb}
.profile-header{background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem;text-align:center}
.profile-username{font-size:1.5rem;color:#333;margin-bottom:.5rem}
.profile-stats{display:flex;justify-content:center;gap:2rem;color:#333;flex-wrap:wrap;}
.confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    display: none;
}
.confirm-box {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
}
.confirm-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.ultra-minimal-features {
    margin: 1.5rem 0;
}
.ultra-minimal-features h3 {
    margin-top: 0;
    color: #333;
}
.ultra-minimal-features ul {
    list-style: none;
}
.ultra-minimal-features li {
    padding: 0.3rem 0;
}
.ultra-minimal-features li:last-child {
    border-bottom: none;
}
.follow-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}
.admin-actions {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #ddd;
    font-size: 0.8rem;
}

.admin-actions button {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
}

.user-status-suspended {
    color: #dc3545;
    font-weight: bold;
}

.user-status-verified {
    color: #28a745;
}

/* Comentarios con diseño diferente */
.comment {
    background: #f8f9fa;
    border-left: 4px solid #0066cc;
    border-radius: 0 8px 8px 0;
    margin-left: 20px;
    position: relative;
    padding: 12px 15px;
    margin-bottom: 10px;
}

/* Indicador visual de que es comentario */
.comment:before {
    content: "↳";
    position: absolute;
    left: -18px;
    top: 12px;
    color: #0066cc;
    font-size: 18px;
    font-weight: bold;
}

/* Post principal destacado */
.post-detail {
    background: white;
    border: 2px solid #0066cc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.1);
}

/* Comentarios más sutiles */
.comment .post-header {
    font-size: 0.9rem;
}

.comment .post-user {
    font-size: 0.95rem;
}

.comment .post-time {
    font-size: 0.8rem;
}