/* =========================
   SPACES PROFILE DIRECTORY
========================= */

.hw-spaces-explorer{
max-width:720px;
margin:auto;
padding:16px;
font-family:var(--hw-font-family-base);
color:var(--hw-color-text-strong);
}

.hw-spaces-title{
font-family:var(--hw-font-family-display);
font-size:18px;
font-weight:700;
margin:0 0 12px;
color:var(--hw-color-text-strong);
line-height:1.15;
}

.hw-spaces-section{
background:var(--hw-app-surface);
border:1px solid var(--hw-app-line);
border-radius:16px;
box-shadow:var(--hw-app-shadow);
padding:12px;
margin-bottom:14px;
}

.hw-section-title{
display:flex;
align-items:center;
gap:8px;
margin:0 0 12px;
font-size:12px;
font-weight:700;
color:var(--hw-color-text-strong);
line-height:1.2;
}

.hw-section-title svg{
flex:0 0 auto;
color:var(--hw-color-primary);
}

.hw-spaces-list{
display:flex;
flex-direction:column;
gap:10px;
}

/* SEARCH */

.hw-search-wrap{
position:relative;
margin-bottom:14px;
}

.hw-search-wrap svg{
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
color:#883ca6;
}

.hw-space-search, #hw-space-search{
width:100%;
padding:12px 12px 12px 36px;
border-radius:12px;
border:1px solid var(--hw-app-line);
background:var(--hw-app-surface);
font-size:12px;
color:var(--hw-color-text-strong);
box-shadow:var(--hw-app-shadow);
outline:none;
transition:border-color .18s ease, box-shadow .18s ease;
}

.hw-space-search:focus, #hw-space-search:focus{
border-color:rgba(136,60,166,.32);
box-shadow:0 0 0 3px rgba(136,60,166,.10);
}

/* TRENDING */

.hw-trending-row{
display:flex;
gap:10px;
overflow-x:auto;
margin-bottom:0;
padding-bottom:2px;
scrollbar-width:none;
}

.hw-trending-row::-webkit-scrollbar{
display:none;
}

.hw-trending-space{
min-width:140px;
background:var(--hw-app-surface-soft);
border:1px solid var(--hw-app-line);
border-radius:12px;
padding:12px;
text-decoration:none;
color:var(--hw-color-text-strong);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.hw-trending-name{
font-weight:700;
font-size:11px;
line-height:1.2;
margin-bottom:4px;
}

.hw-space-info {
	text-align: left;
	line-height: 1.4em;
}

.hw-trending-count{
font-size:11px;
color:var(--hw-color-muted);
}

/* SPACE LIST */

.hw-space-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;

padding:12px;

border:1px solid var(--hw-app-line);
border-radius:12px;

background:var(--hw-app-surface);
box-shadow:var(--hw-app-shadow);
}

.hw-space-main{
display:flex;
gap:12px;
flex:1;
text-decoration:none;
color:inherit;
min-width:0;
}

.hw-space-dir-avatar{
width:34px;
height:34px;
background:var(--hw-app-surface-soft);
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
color:var(--hw-color-primary);
flex:0 0 auto;
}

@media only screen and (max-width: 767px) {
    .hw-space-dir-avatar {
	display: none;
}
}

.hw-space-dir-name{
font-weight:700;
font-size:12px;
color:var(--hw-color-text-strong);
line-height:1.2;
}

.hw-space-desc{
font-size:12px;
color:var(--hw-color-muted);
margin-top:2px;
}

.hw-space-meta{
font-size:11px;
color:var(--hw-color-muted);
margin-top:4px;
}

.hw-meta-dot{
margin:0 4px;
}

.hw-space-active{
color:var(--hw-color-secondary);
font-weight:600;
}

.hw-space-quiet{
color:var(--hw-color-muted);
}

.hw-space-actions{
display:flex;
align-items:center;
flex:0 0 auto;
}

/* FOLLOW BUTTON */

.hw-follow-space{
background:var(--hw-color-primary);
border:1px solid var(--hw-color-primary);
color:#fff;
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:700;
cursor:pointer;
white-space:nowrap;
transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}

.hw-follow-space:hover{
background:var(--hw-color-primary-strong);
transform:translateY(-1px);
}

.hw-follow-space.is-following{
background:var(--hw-app-surface);
color:var(--hw-color-primary);
border:1px solid rgba(136,60,166,.28);
}

@media only screen and (max-width: 767px) {
    .hw-spaces-explorer{
        padding:10px;
    }

    .hw-spaces-title{
        font-size:16px;
        margin-bottom:10px;
    }

    .hw-spaces-section{
        padding:10px;
        margin-bottom:10px;
        border-radius:14px;
    }

    .hw-space-row{
        padding:10px;
        align-items:flex-start;
    }

    .hw-space-main{
        gap:10px;
    }

    .hw-space-actions{
        margin-left:4px;
    }

    .hw-follow-space{
        padding:6px 10px;
        font-size:11px;
    }
}

/* =========================
   SPACES PROFILE PAGE
========================= */

.hw-space-header {
    border-radius:12px;
    margin-bottom:20px;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
    justify-content:space-between;
    align-items:center;
}

.hw-space-follow-btn {
    padding:6px 16px;
    border-radius:20px;
    border:1px solid #883ca6;
    background:#883ca6;
    color:#fff;
    font-weight:600;
    cursor:pointer;
}

.hw-space-follow-btn.is-following {
    background:#fff;
    color:#883ca6;
}

.hw-profile-wrapper {
    max-width:600px;
    margin:0px auto;
    padding:2px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

.hw-profile-card {
    background:#fff;
    border-radius:18px;
    padding:10px;
    box-shadow:0 6px 20px rgba(0,0,0,.06);
    margin-bottom:20px;
    text-align:center;
}

.hw-avatar {
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 12px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e5e7eb;
}

.hw-realname {
    font-size:14px;
    color:#6b7280;
}

.hw-bio {
    margin-top:10px;
    font-size:14px;
}

.hw-post {
    background:#fff;
    border-radius:14px;
    padding:16px;
    margin-bottom:14px;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
}

.hw-follow-btn {
    padding:5px 5px;
    border-radius:10px;
    border:1px solid #883ca6;
    background:#883ca6;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:all .2s ease;
}

.hw-follow-btn.is-following {
    background:#fff;
    color:#883ca6;
}

.hw-avatar-wrapper {
    position: relative;
    display: inline-block;
}

.hw-avatar-edit {
    position: absolute;
    bottom: 20px;
    right: 10px;
    background: #fff;
    color: #660c9b;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    border: 1px solid #fdfdfd;
}

/* Stats */

.hw-profile-stats{
    display:flex;
    justify-content:space-between;
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid #f3deff4f;
}

.hw-stat{
    padding: 0px 20px;
    text-align:center;
    text-decoration:none;
}

.hw-stat-like{
    padding: 0px 20px;
    text-align:center;
    text-decoration:none;
}

/* Hide Likes stat on mobile */
@media (max-width: 767px){
    .hw-stat-like{
        display:none;
    }
}

.hw-stat-num{
    display:block;
    font-weight:600;
    font-size:14px;
    color:#111;
    text-align: left;
}

.hw-stat-label{
    display:block;
    font-size:11px;
    color:#777;
    margin-top:-5px;
}

/* Settings and Other Buttons */

.hw-profile-actions{
    margin-top:10px;
    display: flex;
}

.hw-profile-settings{
    display:inline-block;
    padding: 0px 10px;
    font-size:12px;
    border-radius:10px;
    border:1px solid #ffffff00;
    text-decoration:none;
    color:#333;
    background: #c751fd10;
}

/* Social links */
.hw-social-trigger{
  margin-top:10px;
  display:flex;
  justify-content:center;
}

.hw-social-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
}

.hw-social-btn svg{ opacity:.85; }

/* Modal */

/* ===============================
   MODAL BOX
================================ */

.hw-modal-box{
    width:100%;
    max-width:420px;
    background:#ffffff;
    border-radius:18px;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
    overflow:hidden;
    animation:hwModalIn .2s ease;
}

/* ===============================
   MODAL HEADER
================================ */

.hw-modal-h{
    padding:16px 20px;
    border-bottom:1px solid #f1f5f9;
}

.hw-modal-title{
    font-size:16px;
    font-weight:600;
    color:#111827;
}

/* ===============================
   CLOSE BUTTON
================================ */

.hw-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	border: none;
	background: #9f58da1f;
	font-size: 13px;
	cursor: pointer;
	color: #40038ad4;
	padding: 2px 2px 0px 2px;
	border-radius: 8px;
	border: 1px solid #40038a1f;
}

.hw-modal-close:hover{
    color:#111;
    background: #40038a1a;
}

/* ===============================
   MODAL BODY
================================ */

.hw-modal-body{
    padding:6px 0;
}

/* ===============================
   SOCIAL ROW
================================ */

.hw-social-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 20px;
    text-decoration:none;
    color:#111;
    font-size:15px;
    transition:background .15s ease;
}

.hw-social-row:hover{
    background:#f9fafb;
}

/* subtle divider */

.hw-social-row:not(:last-child){
    border-bottom:1px solid #f3f4f6;
}

/* ===============================
   SOCIAL NAME
================================ */

.hw-social-name{
    font-weight:500;
}

/* ===============================
   MODAL ANIMATION
================================ */

@keyframes hwModalIn{
    from{
        transform:translateY(10px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* ===============================
   MEDIA GRID (Profile Media Tab)
================================ */

.hw-media-grid-mode .hw-post-card {

    padding:0;
    margin:0;
    border-radius:0;
    box-shadow:none;
    background:none;

}

.hw-profile-posts.hw-media-grid-mode{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:4px;
}

.hw-media-grid-mode .hw-post-header,
.hw-media-grid-mode .hw-content,
.hw-media-grid-mode .hw-actions {

    display:none;

}

.hw-media-grid-mode .hw-post-media {

    margin:0;

}

.hw-media-grid-mode .hw-media-item {

    aspect-ratio:1/1;
    overflow:hidden;

}

.hw-media-grid-mode .hw-media-item img {

    width:100%;
    height:100%;
    object-fit:cover;
    cursor:pointer;

}

.hw-media-grid-mode .hw-post-media{
margin:0;
height:100%;
}

/* USER LIST FOLLOWERS/FOLLOWING PAGES */

.hw-user-list{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
}

.hw-user-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid #f3f4f6;
}

.hw-user-row:last-child{
    border-bottom:none;
}

.hw-user-row-avatar img{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e5e7eb;  
}

.hw-user-row-info{
    flex:1;
    min-width:0;
}

.hw-user-row-name{
    text-decoration:none;
    color:#111827;
    font-weight:600;
}

/* ===============================
   PROFILE SUBTITLE (Followers/Following)
================================ */

.hw-profile-subtitle{
    padding:14px 16px 10px;
}

.hw-profile-subtitle h3{
    font-size:15px !important;
    font-weight:700;
    margin:0;
}

.hw-profile-subtitle p{
    font-size:12px;
    color:#6b7280;
    margin:2px 0 0;
}

.hw-profile-topbar{
display:flex;
align-items:center;
gap:12px;
background:#fff;
position:sticky;
top:0;
z-index:10;
}

.hw-back-feed{
display:flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:20%;
cursor:pointer;
background:#c751fd10;
}

.hw-back-feed:hover{
background:#f5f5f5;
}

/* =========================================
     SPACES TAB CSS PARTIALS
========================================= */

    /* FIX space tabs layout */

.hw-space-wrapper .hw-feed-tab{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center;
gap:4px;
}

.hw-space-wrapper .hw-feed-tab svg{
display:block;
margin:0 auto;
}

.hw-feed-tabs{
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:6px;
    margin:8px 0 14px;
    padding:6px 4px 10px;
    border-bottom:1px solid #eceff3;
    background:#fff;
}

.hw-feed-tab{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:64px;
    padding:8px 10px;
    border-radius:12px;
    text-decoration:none;
    color:#6b7280;
    transition:all .18s ease;
}

.hw-feed-tab svg{
    display:block;
    opacity:.9;
}

.hw-feed-tab-label{
    font-size:10px;
    font-weight:600;
    line-height:1;
    letter-spacing:.01em;
}

.hw-feed-tab:hover{
    color:#111827;
    background:#f8fafc;
}

.hw-feed-tab.active{
    color:#883ca6;
}

.hw-feed-tab.active::after{
    content:"";
    position:absolute;
    bottom:-11px;
    left:50%;
    transform:translateX(-50%);
    width:22px;
    height:3px;
    border-radius:999px;
    background:#883ca6;
}

/* mobile-first tighter look */
@media (max-width: 767px){
    .hw-feed-tabs{
        position:sticky;
        top:0;
        z-index:20;
        padding-top:8px;
    }

    .hw-feed-tab{
        min-width:58px;
        padding:8px 6px;
    }

    .hw-feed-tab-label{
        font-size:10px;
        display: none;
    }
}

    /* ===============================
   SPACE HEADER PARTIALS
================================ */

.hw-space-header{
padding:16px;
border-bottom:1px solid #eceff3;
background:linear-gradient(135deg,#a2f7a74f,#ead6ff) !important;
}

/* top row */

.hw-space-header-top{
display:flex;
align-items:center;
gap:12px;
}

/* space avatar */

.hw-space-avatar{
width:44px;
height:44px;
border-radius:12px;
background:#883ca6;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:18px;
flex-shrink:0;
}

/* title block */

.hw-space-name{
font-size:18px;
font-weight:700;
margin:0;
line-height:1.2;
}

.hw-space-slug {
    font-size: 12px;
    color: #009651;
    font-weight: 600;
}

/* description */

.hw-space-description{
margin-top:8px;
font-size:14px;
color:#4b5563;
}

/* stats */

.hw-space-stats {
    margin-top: -10px;
    display: flex;
    gap: 16px;
    font-size: 11px;
    /* margin-left: auto; */
    justify-content: flex-end;
    margin-right: 5px;
}

.hw-space-stat{
text-decoration:none;
color:#6b7280;
}

.hw-space-stat strong{
display:block;
font-size:14px;
color:#111827;
margin-bottom: -8px;
}

/* follow button */

.hw-space-follow-btn{
padding:6px 14px;
border-radius:999px;
border:1px solid #883ca6;
background:#883ca6;
color:#fff;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:.2s;
margin-left: auto;
}

.hw-space-follow-btn.is-following{
background:#fff;
color:#883ca6;
}

.hw-space-about{
margin-top:10px;
padding-top:10px;
border-top:1px solid #f1f3f5;
    text-align: left;
}

.hw-space-description{
font-size:12px;
color:#4b5563;
line-height:1.5;
}