/* Modern Sleek Dark/Indigo Theme Social Network */
:root {
    --bg-primary: #0b0f19;
    --bg-card: #151c2c;
    --bg-hover: #1e293b;
    --accent: #6366f1;
    --accent-hover: #4f46e5;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --text-primary: #f8fafc;
    --text-muted: #94a3b8;
    --border: rgba(255, 255, 255, 0.08);
    --danger: #ef4444;
    --success: #10b981;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
body { background: var(--bg-primary); color: var(--text-primary); display: flex; justify-content: center; min-height: 100vh; padding: 15px; }

.app-container { width: 100%; max-width: 1120px; margin: 0 auto; }
.card { background: var(--bg-card); border-radius: 16px; padding: 20px; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.35); backdrop-filter: blur(10px); }
.hidden { display: none !important; }

/* Auth Box */
.auth-box { max-width: 440px; margin: 60px auto; text-align: center; }
.auth-box h1 { font-size: 30px; font-weight: 800; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
.tabs { display: flex; gap: 8px; margin: 20px 0; background: var(--bg-primary); padding: 4px; border-radius: 10px; border: 1px solid var(--border); }
.tabs button { flex: 1; padding: 10px; background: transparent; border: 0; color: var(--text-muted); border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
.tabs button.active { background: var(--accent); color: white; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }

input, textarea { width: 100%; padding: 12px 16px; margin: 8px 0; background: var(--bg-primary); border: 1px solid var(--border); color: white; border-radius: 10px; font-size: 14px; outline: none; transition: 0.2s; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
button { padding: 10px 18px; background: var(--accent); color: white; border: 0; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #dc2626; }
.btn-secondary { background: var(--bg-hover); color: var(--text-primary); }
.btn-secondary:hover { background: #334155; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; }

/* Header Navbar */
header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; margin-bottom: 20px; }
.nav-profile { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); transition: transform 0.2s; cursor: pointer; }
.avatar:hover { transform: scale(1.05); }
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

.nav-buttons { display: flex; gap: 10px; align-items: center; }

/* Grid Layout */
.layout-grid { display: grid; grid-template-columns: 310px 1fr; gap: 20px; }
.sidebar { display: flex; flex-direction: column; gap: 16px; }

/* Feed & Posts */
.post-create textarea { resize: none; min-height: 80px; }
.post-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 18px; }
.post-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.post-author { display: flex; align-items: center; gap: 12px; }
.post-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin-top: 12px; border: 1px solid var(--border); }
.post-actions { display: flex; gap: 16px; margin: 14px 0 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px 0; }
.action-btn { background: transparent; color: var(--text-muted); padding: 6px 12px; border-radius: 6px; }
.action-btn:hover { background: var(--bg-hover); color: white; }
.action-btn.active { color: #f43f5e; font-weight: bold; }

/* Comments */
.comments-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.comment-item { display: flex; gap: 10px; background: var(--bg-primary); padding: 10px 14px; border-radius: 10px; font-size: 13px; border: 1px solid var(--border); }

/* Friend List & Requests UI */
.request-card { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: var(--bg-primary); border-radius: 10px; margin-top: 8px; border: 1px solid var(--border); }
.status-badge { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; }
.status-online { background: var(--success); color: var(--success); }
.status-offline { background: var(--text-muted); color: var(--text-muted); }

/* Chat Window */
.chat-window { display: flex; flex-direction: column; height: 520px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg-bubble { max-width: 72%; padding: 10px 16px; border-radius: 16px; font-size: 14px; line-height: 1.4; word-break: break-word; }
.msg-me { background: var(--accent-gradient); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-them { background: var(--bg-hover); align-self: flex-start; border-bottom-left-radius: 4px; border: 1px solid var(--border); }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

@media (max-width: 820px) {
    .layout-grid { grid-template-columns: 1fr; }
}

.admin-table-wrap { overflow-x: auto; }
.nav-buttons { flex-wrap: wrap; }
@media(max-width:600px) { header.card { flex-wrap:wrap; gap:12px; } .nav-buttons { width:100%; gap:6px; } .nav-buttons button { flex:1; padding:10px 8px; } }
/* v5: compact responsive community layout */
:root{color-scheme:dark;--shadow:0 10px 30px #0002}html[data-theme=light]{color-scheme:light;--bg-primary:#f0f2f8;--bg-card:#fff;--bg-hover:#e9ecf5;--text-primary:#172139;--text-muted:#56647b;--border:#dce1ec;--shadow:0 6px 25px #25375909}body{display:block;padding:22px 24px 40px}input,textarea,select{color:var(--text-primary);font-size:16px}select{background:var(--bg-primary);border:1px solid var(--border);padding:10px;border-radius:10px;min-width:0;max-width:100%}button{min-height:40px}button:disabled{opacity:.55;cursor:wait;transform:none}.card{box-shadow:var(--shadow);margin-bottom:18px;backdrop-filter:none}h1{font-size:27px;letter-spacing:-.6px;margin-bottom:16px}h2{font-size:17px;margin-bottom:12px}p{line-height:1.65}.muted,small{color:var(--text-muted);font-size:13px;line-height:1.6}label{display:block;font-size:14px;color:var(--text-muted);text-align:left}hr{border:0;border-top:1px solid var(--border);margin:22px 0}.link{background:transparent;color:var(--text-primary)}.link:hover{background:var(--bg-hover);color:var(--text-primary)}a{color:#8588ff}.brand{font-size:19px;font-weight:800;gap:12px;padding:0}.brand em{color:#9b91ff;font-style:normal}.header-right{display:flex;align-items:center;gap:12px}.avatar-button{padding:0;background:transparent;min-height:0}.main-nav{display:flex;gap:8px;margin-bottom:24px}.main-nav button{flex:1;background:transparent;color:var(--text-muted);padding:12px;white-space:nowrap}.main-nav button.active{background:var(--bg-hover);color:var(--text-primary)}.main-nav button>span{font-size:20px}.main-nav b{font-size:10px;background:#ef4444;color:white;padding:1px 5px;border-radius:10px;margin-left:4px}.main-nav b:empty{display:none}.feed-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 20px}.feed-heading h1{margin:4px 0 0}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#9b91ff}.feed-layout{display:grid;grid-template-columns:minmax(0,740px) minmax(230px,1fr);gap:24px}main{min-width:0}.about-card{height:fit-content;position:sticky;top:24px}.about-card h2{font-size:22px;line-height:1.4;margin:14px 0}.about-card button{margin-top:20px}.post-create{margin-bottom:22px}.post-create textarea{min-height:76px;margin:0 0 10px;resize:vertical}.composer-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.composer-tools>button{margin-left:auto}.file-button{display:inline-flex;align-items:center;cursor:pointer;background:var(--bg-hover);color:var(--text-primary);padding:10px 12px;border-radius:10px;font-size:13px}.file-button input{position:absolute;width:1px;height:1px;opacity:0}.file-button:focus-within{outline:2px solid var(--accent)}.preview{position:relative;margin-bottom:12px}.preview img{max-height:240px;max-width:100%;border-radius:12px}.preview button{position:absolute;top:8px;left:8px}progress{width:100%;margin-top:12px;accent-color:var(--accent)}.post-img{max-height:650px;object-fit:contain;background:var(--bg-primary)}.post-header{gap:10px;align-items:flex-start}.post-author{min-width:0}.post-author b{overflow-wrap:anywhere}.author-button{background:none;padding:0;min-height:0;color:var(--text-primary);text-align:left}.post-copy{white-space:pre-wrap;overflow-wrap:anywhere}.post-actions{gap:4px;flex-wrap:wrap}.action-btn{font-size:13px}.action-btn:hover{color:var(--text-primary)}details.post-menu{position:relative}details summary{cursor:pointer;list-style:none;padding:5px 12px;font-weight:bold}details summary::-webkit-details-marker{display:none}.menu-items{position:absolute;right:0;top:30px;min-width:160px;padding:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);z-index:3}.menu-items button{display:block;width:100%;text-align:left;background:transparent;color:var(--text-primary);font-size:13px;padding:8px}.menu-items button:hover{background:var(--bg-hover)}.comment-item{align-items:flex-start;padding:10px}.comment-body{min-width:0;overflow-wrap:anywhere;flex:1}.comment-item.reply{margin-left:24px}.reply-context{display:block;font-size:11px;color:var(--text-muted)}.comment-reply{background:none;min-height:0;padding:4px 0;color:#aaa4ff;font-size:11px}.inline-form{display:flex;gap:8px;align-items:center;margin-top:12px}.inline-form input{margin:0;min-width:0}.reply-indicator{font-size:12px;color:var(--text-muted);margin-top:8px}.two-col,.chat-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}.chat-layout{grid-template-columns:300px minmax(0,1fr)}.person-row,.notification{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.person-name{display:flex;gap:10px;align-items:center;min-width:0}.person-actions{display:flex;gap:6px;flex-wrap:wrap}.notification{padding:14px;border-radius:10px;justify-content:flex-start;cursor:pointer}.notification.unread{background:var(--bg-hover)}.notification p{font-size:14px}.notification:focus{outline:2px solid var(--accent)}.profile-cover{width:100%;height:210px;object-fit:cover;border-radius:14px}.profile-info{display:flex;gap:18px;align-items:center;margin:16px 0}.profile-info .avatar{width:80px;height:80px}.profile-bio{white-space:pre-wrap}.profile-actions{display:flex;flex-wrap:wrap;gap:8px}.preferences label{display:flex;align-items:center;gap:10px;margin:14px 0}.preferences input{width:auto}.preferences button{margin:6px 4px 0 0}.section-title{margin:24px 0 14px}.brand-icon{width:65px;height:65px;border-radius:18px;margin-bottom:15px}.auth-box form>button{width:100%;margin-top:8px}.auth-box p{margin:12px 0}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--text-primary);color:var(--bg-primary);padding:14px 20px;border-radius:14px;box-shadow:0 10px 40px #0004;max-width:90vw;z-index:20;font-size:14px}.error-banner{padding:12px 16px;background:#4b1828;color:#fff;border-radius:12px;display:flex;align-items:center;gap:12px;margin-bottom:16px;position:relative;z-index:10}.error-banner span{flex:1;font-size:13px}.error-banner button{white-space:nowrap}dialog{margin:auto;width:calc(100% - 32px);max-width:540px;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);padding:24px;border-radius:18px}dialog::backdrop{background:#0009}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}table{border-collapse:collapse;width:100%;font-size:13px}td,th{padding:12px;text-align:left;border-bottom:1px solid var(--border)}.report-row{padding:16px 0;border-bottom:1px solid var(--border)}.report-row p{white-space:pre-wrap;overflow-wrap:anywhere}.empty{text-align:center;color:var(--text-muted);padding:28px 16px;font-size:14px}#snow{position:fixed;inset:0;pointer-events:none;z-index:5;width:100%;height:100%}.post-card:target{outline:2px solid var(--accent)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #a9a1ff;outline-offset:3px}
@media(max-width:820px){body{padding:12px 12px calc(100px + env(safe-area-inset-bottom))}.desktop-only{display:none!important}.feed-layout,.two-col,.chat-layout{grid-template-columns:1fr}.main-nav{position:fixed;bottom:0;left:0;right:0;padding:8px 4px calc(8px + env(safe-area-inset-bottom));margin:0;background:var(--bg-card);border-top:1px solid var(--border);z-index:15;gap:0}.main-nav button{flex-direction:column;font-size:10px;padding:5px 2px;gap:3px;min-width:0;border-radius:10px}.main-nav button>span{font-size:20px;line-height:24px}.main-nav button.active{color:#aba5ff;background:transparent}.card,.post-card{padding:16px;border-radius:16px}header.card{flex-wrap:nowrap;margin-bottom:20px;padding:12px 14px}.brand{font-size:16px}.brand .avatar{width:36px;height:36px}.header-right .avatar{width:34px;height:34px}h1{font-size:24px}.feed-heading{margin-bottom:16px}.eyebrow{font-size:9px}.feed-heading>button{font-size:12px;padding:8px 10px}.post-actions{justify-content:space-between}.action-btn{padding:6px}.toast{bottom:calc(90px + env(safe-area-inset-bottom))}.chat-window{height:60vh;min-height:360px}.chat-layout>aside{max-height:190px;overflow:auto}.profile-cover{height:150px}.profile-info .avatar{width:60px;height:60px}.person-actions button{padding:7px;font-size:11px}.post-author{gap:8px}.post-author b{font-size:14px}.post-img{max-height:none}.auth-box{margin:20px auto}.composer-tools select{font-size:12px;max-width:140px}.composer-tools>button{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.main-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.main-nav button>span{position:relative}.main-nav b{position:absolute;top:-5px;right:-11px}.comment-reply{color:var(--text-muted);text-decoration:underline}.msg-me small{color:#f1efff}

.friend-state{display:inline-flex;align-items:center;padding:10px 14px;border-radius:10px;background:var(--bg-hover);color:var(--success);font-weight:600;font-size:14px}#adminSearch{flex:1;min-width:150px}#mediaStatus{margin:12px 0}.header-right{flex-wrap:wrap}.profile-actions{align-items:center}

/* Community + live rooms */
.main-nav{overflow-x:auto}.main-nav>button{flex:1;min-width:85px}
.community-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:20px;align-items:start}
.community-messages{height:480px;overflow:auto;overscroll-behavior:contain;margin:15px 0;border-block:1px solid #8884}
.community-message{padding:14px 4px;border-bottom:1px solid #8883;overflow-wrap:anywhere}
.community-message>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.community-message small{opacity:.65;font-size:11px}
.community-message p{white-space:pre-wrap}.community-photo{max-width:100%;max-height:300px;object-fit:contain;border-radius:14px}
#communityVideo{min-height:100px;margin-top:15px}#communityVideo iframe{border:0;border-radius:14px;max-width:100%}
#communityLivePanel{max-width:1100px;margin:25px auto;padding:20px}
@media(max-width:760px){.community-layout{grid-template-columns:1fr}.community-messages{height:400px}.main-nav>button{font-size:11px;min-width:72px}#communityVideo iframe{height:65vh}}

/* Private-chat attachments fit narrow screens. */
#chatForm{flex-wrap:wrap}#chatForm>input[name=message]{flex:1 1 180px;min-width:0}#chatForm label{font-size:.85rem;max-width:100%}#chatForm input[type=file]{max-width:220px;width:100%}.msg-bubble img{display:block;margin-top:6px;border-radius:10px}