:root{
  --bg:#111; --panel:#222; --ink:#eee; --muted:#aaa;
  --accent:#f00; --link:#0cf; --border:#333; --soft:#444;
}

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.45}
a{color:var(--link);text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Nav */
.as-nav{display:flex;gap:6px;overflow-x:auto;background:var(--panel);border-bottom:2px solid var(--accent);padding:8px}
.as-nav a{flex:0 0 auto;padding:8px 12px;white-space:nowrap;border-radius:6px}
.as-nav a:hover{background:#333}

/* Containers */
.as-wrap{max-width:1100px;margin:0 auto;padding:12px}
.as-card{background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:12px}
.as-box{background:#111;border:1px solid var(--border);border-radius:8px;padding:10px}

/* Buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:6px;cursor:pointer}
.btn:hover{background:#c00}
.action-buttons{display:flex;gap:8px;flex-wrap:wrap}
.action-buttons a{background:var(--accent);color:#fff;padding:8px 12px;border-radius:4px}
.action-buttons a:hover{background:#c00}
.cover-banner{width:100%;height:200px;background:#000 center/cover no-repeat;border-bottom:3px solid var(--accent);border-radius:6px}
.profile-header{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px;margin-top:-20px}
.profile-header .avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);background:#000}
.mention-menu{position:absolute;display:none;background:#111;border:1px solid var(--border);border-radius:6px;padding:6px;z-index:9999}

/* Grids */
.as-grid{display:grid;gap:12px}
.as-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.as-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.as-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.as-grid.cols-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.as-grid.cols-4,.as-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.as-grid.cols-2,.as-grid.cols-3,.as-grid.cols-4{grid-template-columns:1fr}}

/* Masonry (Pinterest) */
.as-masonry{column-width:260px;column-gap:12px}
@media (max-width:900px){.as-masonry{column-width:220px}}
@media (max-width:600px){.as-masonry{column-width:160px}}
.as-pin{break-inside:avoid;background:#111;border:1px solid var(--border);border-radius:10px;margin:0 0 12px;padding:8px}
.as-pin img{border-radius:8px}

/* Media helpers */
.as-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);background:#000}
.as-cover{width:100%;height:160px;object-fit:cover;border:1px solid var(--border);background:#000;border-radius:8px}

/* Sticky top header space */
.as-sticky{position:sticky;top:0;z-index:20}

/* Footer nav (mobile) */
.as-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:2px solid var(--accent);display:flex;justify-content:space-around;padding:8px 6px}
.as-bottom-nav a{color:var(--link)}

/* Typography */
h1,h2,h3{color:var(--accent)}
.meta{color:var(--muted);font-size:.9em}

/* Feed card (Twitter-like) */
.tweet{background:#111;border:1px solid var(--border);border-radius:10px;padding:12px}
.tweet .row{display:flex;gap:12px}
.tweet .actions{display:flex;gap:16px;margin-top:6px;color:var(--muted)}

/* Utility */
.mt-1{margin-top:8px}.mt-2{margin-top:12px}.mt-3{margin-top:16px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:16px}
.grid-gap{gap:12px}