:root{
  color-scheme:light;
  --bg:#f0f2f5;
  --card:#ffffff;
  --surface:#ffffff;
  --surface-2:#e4e6eb;
  --text:#1c1e21;
  --muted:#65676b;
  --accent:#3157a4;
  --accent-hover:#274783;
  --border:#d8dde6;
  --input-bg:#ffffff;
  --input-text:#1c1e21;
  --success-bg:#e8f5e9;
  --success-text:#1b5e20;
  --error-bg:#ffebee;
  --error-text:#8e1b1b;
  --shadow:0 1px 2px rgba(0,0,0,.04);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#18191a;
  --card:#242526;
  --surface:#242526;
  --surface-2:#3a3b3c;
  --text:#e4e6eb;
  --muted:#b0b3b8;
  --accent:#6f9cff;
  --accent-hover:#8ab0ff;
  --border:#3e4042;
  --input-bg:#3a3b3c;
  --input-text:#e4e6eb;
  --success-bg:#183a26;
  --success-text:#b7f3ca;
  --error-bg:#4a2024;
  --error-text:#ffc7cc;
  --shadow:0 1px 2px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font:16px system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);transition:background-color .2s ease,color .2s ease}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
.topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border);display:flex;gap:20px;align-items:center;justify-content:space-between;padding:12px 4vw;box-shadow:var(--shadow)}
.brand{font-size:1.5rem;font-weight:800}
.topbar nav{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.container{width:min(1050px,94vw);margin:24px auto}
.grid{display:grid;grid-template-columns:280px 1fr;gap:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
input,textarea,select,button{font:inherit}
input,textarea,select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;margin:5px 0 12px;background:var(--input-bg);color:var(--input-text)}
input::placeholder,textarea::placeholder{color:var(--muted)}
textarea{min-height:100px;resize:vertical}
button,.btn{display:inline-block;border:0;border-radius:9px;padding:10px 14px;background:var(--accent);color:#fff;cursor:pointer}
button:hover,.btn:hover{filter:brightness(1.06);color:#fff}
.btn.secondary{background:var(--surface-2);color:var(--text)}
.avatar{width:48px;height:48px;border-radius:14px;object-fit:cover;background:var(--surface-2)}
.avatar.big{width:120px;height:120px}
.post-head{display:flex;gap:10px;align-items:center}
.post-img{max-width:100%;border-radius:12px;margin-top:12px}
.meta{color:var(--muted);font-size:.9rem}
.actions{display:flex;gap:8px;margin-top:12px}
.alert{padding:10px 12px;border-radius:9px;margin:10px 0}
.alert.success{background:var(--success-bg);color:var(--success-text)}
.alert.error{background:var(--error-bg);color:var(--error-text)}
.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.footer{text-align:center;color:var(--muted);padding:30px}
.admin-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.badge{display:inline-block;padding:3px 7px;border-radius:999px;background:var(--surface-2);color:var(--text);font-size:.8rem}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--text);font-size:.9rem;line-height:1;cursor:pointer;white-space:nowrap}
.theme-toggle:hover{filter:none;background:var(--card);color:var(--text)}
.theme-toggle .theme-icon{font-size:1rem}
hr{border:0;border-top:1px solid var(--border)}
table{color:var(--text)}

@media(max-width:760px){
  .grid{grid-template-columns:1fr}
  .topbar{align-items:flex-start;flex-direction:column;gap:10px}
  .topbar nav{justify-content:flex-start;width:100%}
  .container{margin-top:14px}
  .theme-toggle{margin-left:auto}
}

/* Responsive navigation and device-friendly layout */
.topbar{padding-left:max(4vw,env(safe-area-inset-left));padding-right:max(4vw,env(safe-area-inset-right))}
.topbar-main{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:7px;padding:8px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--text);line-height:1}
.menu-toggle:hover{filter:none;background:var(--card);color:var(--text)}
.topbar nav a{display:inline-flex;align-items:center;min-height:40px;padding:7px 2px;font-weight:600}
img,video{max-width:100%;height:auto}
table{width:100%;border-collapse:collapse}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
button,.btn,a,input,select,textarea{-webkit-tap-highlight-color:transparent}

@media (min-width:761px) and (max-width:1024px){
  .topbar{gap:14px;padding-top:10px;padding-bottom:10px}
  .topbar nav{gap:10px}
  .container{width:min(960px,95vw);margin:18px auto}
  .grid{grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:16px}
  .card{padding:15px}
}

@media(max-width:760px){
  body{font-size:15px}
  .topbar{display:block;padding-top:10px;padding-bottom:10px}
  .topbar-main{width:100%}
  .brand{font-size:1.35rem}
  .topbar-actions{flex-shrink:0}
  .theme-toggle{margin-left:0;min-height:40px}
  .menu-toggle{display:inline-flex;min-height:40px}
  .topbar nav{display:none;width:100%;padding-top:10px;margin-top:8px;border-top:1px solid var(--border);gap:4px;max-height:calc(100vh - 82px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .topbar nav.is-open{display:flex;flex-direction:column;align-items:stretch}
  .topbar nav a{width:100%;min-height:44px;padding:11px 8px;border-radius:8px}
  .topbar nav a:hover{background:var(--surface-2)}
  .container{width:min(100% - 24px,680px);margin:12px auto;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .card{border-radius:12px;padding:14px;margin-bottom:12px}
  .list-row{align-items:flex-start;flex-wrap:wrap}
  .actions{flex-wrap:wrap}
  button,.btn{min-height:44px}
  input,textarea,select{min-height:44px;font-size:16px}
  textarea{min-height:110px}
  .avatar.big{width:96px;height:96px}
  .post-head{align-items:flex-start}
  .admin-nav{gap:6px}
  .admin-nav a{min-height:42px;display:inline-flex;align-items:center}
  table{min-width:620px}
}

@media(max-width:420px){
  .theme-label,.menu-label{display:none}
  .theme-toggle,.menu-toggle{width:42px;padding:8px}
  .brand{font-size:1.25rem}
  .container{width:min(100% - 16px,680px)}
  .card{padding:12px}
}


/* HamSocial 1.0.3: hardened phone/tablet header */
@media (max-width:900px){
  .topbar{
    display:block !important;
    padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left)) !important;
  }
  .topbar-main{display:flex !important;width:100%;align-items:center;justify-content:space-between}
  .topbar-actions{display:flex !important;margin-left:auto}
  .theme-toggle,.menu-toggle{display:inline-flex !important;visibility:visible !important;opacity:1 !important}
  .topbar nav{
    display:none !important;
    width:100% !important;
    margin:10px 0 0 !important;
    padding:8px 0 0 !important;
    border-top:1px solid var(--border);
    max-height:calc(100dvh - 72px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .topbar nav.is-open{display:flex !important;flex-direction:column;align-items:stretch}
  .topbar nav a{display:flex;width:100%;min-height:46px;padding:11px 10px;border-radius:9px}
  .container{width:calc(100% - 24px);max-width:680px;margin:12px auto}
  .grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .theme-label,.menu-label{display:none}
  .theme-toggle,.menu-toggle{width:44px;height:44px;padding:0}
  .topbar-actions{gap:6px}
  .brand{font-size:1.35rem}
  .container{width:calc(100% - 16px)}
  .card{padding:14px}
  h1{font-size:1.65rem}
  h2{font-size:1.3rem}
}


/* HamSocial 1.0.5: clickable profile images in composer and feed */
.create-post-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.create-post-row textarea{
  flex:1;
  min-width:0;
  margin:0;
}
.create-post-avatar-link,.post-avatar-link{
  display:inline-flex;
  flex:0 0 auto;
  border-radius:14px;
  text-decoration:none;
}
.create-post-avatar-link:focus-visible,.post-avatar-link:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:3px;
}
.create-post-avatar{
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:14px;
}
@media (max-width:480px){
  .create-post-row{gap:10px}
  .create-post-avatar{width:44px;height:44px}
}


/* HamSocial 1.0.6: feed without profile summary widget */
.feed-layout{
  width:100%;
  max-width:760px;
  margin:0 auto;
}
.feed-main{
  width:100%;
  min-width:0;
}


/* HamSocial 1.0.8: friends search-only directory */
.friend-search-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.friend-search-row input{
  flex:1;
  min-width:0;
  margin:0;
}
.friend-search-results{
  margin-top:16px;
  display:grid;
  gap:8px;
}
.friend-search-result{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
  color:inherit;
}
.friend-search-result:hover{
  background:var(--surface-hover, rgba(127,127,127,.08));
}
.friend-result-avatar{
  width:52px;
  height:52px;
  object-fit:cover;
  flex:0 0 52px;
}
.friend-result-details{
  display:flex;
  flex-direction:column;
  min-width:0;
}
@media (max-width:480px){
  .friend-search-row{
    align-items:stretch;
  }
  .friend-search-row button{
    flex:0 0 auto;
  }
}


/* HamSocial 1.0.9: friend request action in search results */
.friend-search-result{
  justify-content:space-between;
}
.friend-result-profile{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
  color:inherit;
  text-decoration:none;
}
.friend-request-form{
  flex:0 0 auto;
  margin:0;
}
.friend-request-form button{
  white-space:nowrap;
}
@media (max-width:480px){
  .friend-search-result{
    align-items:center;
    gap:8px;
  }
  .friend-request-form button{
    padding:9px 10px;
    font-size:.9rem;
  }
}


/* HamSocial 1.0.10: friend post/request notification bell */
.notification-menu{position:relative;display:inline-flex}
.notification-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px;
}
.bell-icon{font-size:1.15rem;line-height:1}
.notification-badge{
  position:absolute;
  top:-2px;
  right:-3px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  background:#d93025;
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  line-height:19px;
  text-align:center;
  box-shadow:0 0 0 2px var(--surface, #fff);
}
.notification-dropdown{
  position:absolute;
  z-index:1000;
  top:calc(100% + 8px);
  right:0;
  width:min(380px,calc(100vw - 24px));
  max-height:min(540px,70vh);
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface, #fff);
  box-shadow:0 12px 35px rgba(0,0,0,.22);
}
.notification-dropdown-head,.notifications-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.notification-dropdown-head{
  position:sticky;
  top:0;
  z-index:1;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface, #fff);
}
.notification-empty{padding:18px 14px;color:var(--muted)}
.notification-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-bottom:1px solid var(--border);
  color:inherit;
  text-decoration:none;
}
.notification-item:last-child{border-bottom:0}
.notification-item.unread{background:rgba(49,116,255,.10)}
.notification-item:hover{background:rgba(127,127,127,.10)}
.notification-avatar{width:42px;height:42px;object-fit:cover;flex:0 0 42px}
.notification-copy{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.notifications-page .notification-item{border-radius:9px;margin:6px 0;border:1px solid var(--border)}
@media (max-width:480px){
  .notification-dropdown{position:fixed;top:64px;right:8px;left:8px;width:auto;max-height:calc(100dvh - 80px)}
  .notification-toggle{width:44px;height:44px}
}


/* HamSocial 1.0.13: friend-request actions on requester profile */
.profile-friend-request{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:10px;
}
.profile-friend-request p{margin-top:0}
.profile-friend-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media (max-width:480px){
  .profile-friend-actions button{
    flex:1;
    min-width:120px;
  }
}


/* HamSocial 1.0.14: friends widget and public read-only friend list */
.friends-widget-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.friends-widget-grid,.public-friend-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.friend-widget-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  color:inherit;
  text-decoration:none;
}
.friend-widget-item:hover{
  background:rgba(127,127,127,.08);
}
.friend-widget-item > span{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.friend-widget-avatar{
  width:48px;
  height:48px;
  object-fit:cover;
  flex:0 0 48px;
}
@media (max-width:600px){
  .friends-widget-grid,.public-friend-list{
    grid-template-columns:1fr;
  }
}


/* HamSocial 1.0.15: friend management */
.friend-management-item{
  flex-direction:column;
  align-items:stretch;
}
.friend-widget-profile{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:inherit;
  text-decoration:none;
}
.friend-widget-profile > span{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.friend-manage-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.friend-manage-actions button{
  flex:1;
  min-width:90px;
}
.btn.danger{
  border-color:#b3261e;
  color:#b3261e;
}
[data-theme="dark"] .btn.danger{
  color:#ff8a80;
  border-color:#ff8a80;
}


/* HamSocial 1.0.18: login acknowledgement */
.login-card{
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.login-acknowledgement{
  margin:0 0 16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(127,127,127,.06);
}
.login-ack-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  cursor:pointer;
}
.login-ack-label input{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:2px 0 0;
}
#login-credentials{
  border:0;
  padding:0;
  margin:0;
  min-width:0;
}
#login-credentials:disabled{
  opacity:.55;
}


/* HamSocial 1.0.20: Friend/Pending + Block profile actions */
.profile-friend-actions form{
  margin:0;
}
.profile-friend-actions form button{
  min-width:100px;
}


/* HamSocial 1.0.21: blocking privacy and blocked users page */
.friends-widget-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.blocked-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.blocked-user-list{
  display:grid;
  gap:10px;
}
.blocked-user-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
}
.blocked-user-item form{margin:0}
@media (max-width:600px){
  .blocked-page-head{flex-direction:column}
  .blocked-user-item{align-items:stretch;flex-direction:column}
  .blocked-user-item form button{width:100%}
}


/* HamSocial 1.0.22: blocked user count */
.blocked-count-badge{
  margin-left:4px;
  vertical-align:middle;
}


/* HamSocial 1.0.23: label friend count */
.friends-count-label{
  display:inline-flex;
  align-items:center;
  gap:5px;
}


/* HamSocial 1.0.25: friends header icon and separate unread counts */
.friend-header-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--border);
  background:var(--surface, transparent);
}
.friend-header-button:hover{
  background:rgba(127,127,127,.10);
}
.friend-header-button:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:2px;
}
.friend-header-icon{
  font-size:1.15rem;
  line-height:1;
}
.friend-request-badge{
  position:absolute;
  top:-2px;
  right:-3px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  background:#d93025;
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  line-height:19px;
  text-align:center;
  box-shadow:0 0 0 2px var(--surface, #fff);
}
@media (max-width:480px){
  .friend-header-button{
    width:44px;
    height:44px;
  }
}


/* HamSocial 1.0.26: unseen bell count + friend-request dropdown */
.friend-header-menu{
  position:relative;
  display:inline-flex;
}
.friend-request-dropdown{
  position:absolute;
  z-index:1001;
  top:calc(100% + 8px);
  right:0;
  width:min(380px,calc(100vw - 24px));
  max-height:min(540px,70vh);
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 12px 35px rgba(0,0,0,.22);
}
.friend-request-dropdown-head{
  position:sticky;
  top:0;
  z-index:1;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.header-friend-request{
  padding:12px;
  border-bottom:1px solid var(--border);
}
.header-friend-request:last-child{
  border-bottom:0;
}
.header-friend-profile{
  display:flex;
  align-items:center;
  gap:10px;
  color:inherit;
  text-decoration:none;
}
.header-friend-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.header-friend-actions form{
  flex:1;
  margin:0;
}
.header-friend-actions button{
  width:100%;
}
@media (max-width:480px){
  .friend-request-dropdown{
    position:fixed;
    top:64px;
    right:8px;
    left:8px;
    width:auto;
    max-height:calc(100dvh - 80px);
  }
}


/* HamSocial 1.0.27: accepted request status in friend dropdown */
.header-friend-now-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  padding:7px 10px;
  border-radius:999px;
  background:var(--success-bg);
  color:var(--success-text);
  font-weight:700;
  font-size:.9rem;
}


/* HamSocial 1.0.28: bell unseen alert count */
.notification-badge{
  min-width:19px;
  height:19px;
  padding:0 5px;
  line-height:19px;
}


/* HamSocial 1.0.32: reactions, sharing and hiding */
.post-actions{
  align-items:center;
  flex-wrap:wrap;
}
.inline-post-action{
  display:inline;
  margin:0;
}
.reaction-btn{
  background:var(--surface-2);
  color:var(--text);
}
.reaction-btn:hover{
  color:var(--text);
}
.reaction-btn.selected-reaction{
  background:var(--accent);
  color:#fff;
}
.shared-post-box{
  margin:12px 0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(127,127,127,.05);
}
@media (max-width:600px){
  .post-actions > button,
  .post-actions > a,
  .post-actions .inline-post-action{
    flex:1 1 calc(50% - 8px);
  }
  .post-actions .inline-post-action button{
    width:100%;
  }
}


/* HamSocial 1.0.36: reaction summary + inline comments */
.post-engagement-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.reaction-summary-button,
.comments-count-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:auto;
  padding:4px 6px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  font-size:.9rem;
  text-decoration:none;
}
.reaction-summary-button:hover,
.comments-count-link:hover{
  background:var(--surface-2);
  color:var(--text);
}
.reaction-mini-icons{
  display:inline-flex;
  align-items:center;
  margin-right:2px;
}
.reaction-mini-icons span{
  margin-left:-2px;
}
.inline-reactions{
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:auto;
}
.reaction-icon-btn{
  width:34px;
  height:34px;
  min-height:34px;
  padding:0;
  border-radius:14px;
  background:transparent;
  color:inherit;
  font-size:1.18rem;
}
.reaction-icon-btn:hover{
  background:var(--surface-2);
}
.reaction-icon-btn.selected-reaction{
  background:var(--accent);
}
.reaction-summary-popover{
  position:absolute;
  z-index:10;
  margin-top:6px;
  width:220px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.reaction-summary-popover div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:6px 0;
}
.secondary-post-actions{
  margin-top:8px;
}
.feed-comments{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.feed-comment{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:9px 0;
}
.feed-comment-avatar{
  width:34px;
  height:34px;
  flex:0 0 34px;
}
.feed-comment-body{
  min-width:0;
  flex:1;
  padding:8px 10px;
  border-radius:10px;
  background:var(--surface-2);
}
.no-comments{
  padding:4px 0;
}
@media (max-width:600px){
  .post-engagement-row{
    gap:6px;
  }
  .inline-reactions{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }
  .reaction-summary-popover{
    width:min(220px,calc(100% - 28px));
  }
}


/* HamSocial 1.0.41: inline comment field below every feed post */
.inline-comment-form{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
}
.inline-comment-avatar-link{
  display:inline-flex;
  flex:0 0 auto;
}
.inline-comment-avatar{
  width:36px;
  height:36px;
  flex:0 0 36px;
}
.inline-comment-form input[type="text"]{
  flex:1;
  min-width:0;
  margin:0;
  border-radius:999px;
  padding:10px 14px;
}
.inline-comment-form button{
  flex:0 0 auto;
}
@media (max-width:520px){
  .inline-comment-form{
    align-items:center;
  }
  .inline-comment-form button{
    padding:9px 11px;
  }
}


/* HamSocial 1.0.42: compact single-line engagement layout */
.compact-engagement-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.compact-engagement-row::-webkit-scrollbar{display:none}
.compact-inline-reactions{
  display:inline-flex;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
  margin-left:0;
  width:auto;
}
.compact-inline-reactions .reaction-icon-btn{
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
  padding:0;
  border-radius:14px;
  font-size:1.08rem;
}
.engagement-separator{
  color:var(--muted);
  flex:0 0 auto;
}
.compact-summary-button,
.compact-comments-link{
  flex:0 0 auto;
  white-space:nowrap;
  margin:0;
}
.compact-summary-button .reaction-mini-icons{
  display:none;
}
.compact-secondary-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.compact-secondary-actions .inline-post-action{
  flex:1;
}
.compact-secondary-actions .inline-post-action button{
  width:100%;
}
@media (max-width:600px){
  .compact-engagement-row{
    gap:4px;
    flex-wrap:nowrap;
  }
  .compact-inline-reactions{
    width:auto;
    margin-left:0;
    justify-content:flex-start;
  }
  .compact-inline-reactions .reaction-icon-btn{
    width:30px;
    height:30px;
    min-width:30px;
    min-height:30px;
    font-size:1rem;
  }
  .compact-secondary-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}


/* HamSocial 1.0.43: Facebook-style post engagement, actions, and comments */
.fb-engagement-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 2px 8px;
  color:var(--muted);
  font-size:.9rem;
}
.fb-reaction-summary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:auto;
  padding:3px 5px;
  border:0;
  background:transparent;
  color:var(--muted);
}
.fb-reaction-summary:hover{
  background:var(--surface-2);
  color:var(--text);
}
.fb-engagement-counts{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.fb-engagement-counts a{
  color:var(--muted);
}
.fb-action-bar{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  padding:5px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.fb-action-button{
  width:100%;
  min-height:40px;
  padding:8px 6px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
}
.fb-action-button:hover{
  background:var(--surface-2);
  color:var(--text);
}
.fb-action-button.selected-reaction{
  color:var(--accent);
}
.fb-action-form{
  margin:0;
}
.fb-react-control{
  position:relative;
}
.fb-reaction-picker{
  position:absolute;
  z-index:20;
  left:0;
  bottom:calc(100% + 7px);
  display:flex;
  align-items:center;
  gap:3px;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.fb-reaction-picker .reaction-icon-btn{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  padding:0;
  border-radius:14px;
  font-size:1.2rem;
  background:transparent;
  transition:transform .12s ease,background-color .12s ease;
}
.fb-reaction-picker .reaction-icon-btn:hover{
  transform:scale(1.18);
  background:var(--surface-2);
}
.feed-comments{
  margin-top:10px;
  padding-top:0;
  border-top:0;
}
.feed-comment{
  margin:8px 0;
}
.feed-comment-body{
  background:var(--surface-2);
  border-radius:16px;
  padding:8px 11px;
}
.inline-comment-form{
  margin-top:10px;
}
.inline-comment-form input[type="text"]{
  background:var(--surface-2);
  border-color:transparent;
}
.inline-comment-form button{
  border-radius:999px;
}
@media (max-width:600px){
  .fb-action-bar{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .fb-hide-form{
    grid-column:1 / -1;
  }
  .fb-engagement-summary{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .fb-reaction-picker{
    max-width:calc(100vw - 32px);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* HamSocial 1.0.44: fix Facebook-style post actions */
.fb-reaction-picker[hidden],
.reaction-summary-popover[hidden]{
  display:none !important;
}

.fb-action-bar{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.fb-hide-form{
  grid-column:1 / -1;
}

.fb-hide-form .fb-action-button{
  min-height:34px;
  font-size:.9rem;
  font-weight:500;
  color:var(--muted);
  border-top:1px solid var(--border);
  border-radius:0;
}

@media (min-width:700px){
  .fb-action-bar{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:600px){
  .fb-action-bar{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .fb-hide-form{
    grid-column:1 / -1;
  }
}


/* HamSocial 1.0.45: reveal comment composer only after Comment is pressed */
.inline-comment-form[hidden]{
  display:none !important;
}


/* HamSocial 1.0.46: replies and reactions on comments */
.feed-comment-content{
  flex:1;
  min-width:0;
}
.feed-comment-thread{
  margin:8px 0;
}
.comment-actions-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:3px 0 0 8px;
  font-size:.78rem;
}
.comment-action-link,
.comment-reaction-count{
  border:0;
  background:transparent;
  color:var(--muted);
  min-height:auto;
  padding:2px 4px;
  font-weight:700;
  font-size:.78rem;
}
.comment-action-link:hover,
.comment-reaction-count:hover{
  background:transparent;
  color:var(--accent);
}
.selected-comment-reaction{
  color:var(--accent);
}
.comment-react-control{
  position:relative;
}
.comment-reaction-picker[hidden],
.comment-reaction-summary[hidden],
.comment-reply-form[hidden]{
  display:none !important;
}
.comment-reaction-picker{
  position:absolute;
  z-index:30;
  left:0;
  bottom:calc(100% + 5px);
  display:flex;
  align-items:center;
  gap:2px;
  padding:5px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.comment-reaction-picker button{
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
  padding:0;
  border-radius:14px;
  background:transparent;
  font-size:1rem;
}
.comment-reaction-picker button:hover{
  background:var(--surface-2);
  transform:scale(1.1);
}
.comment-mini-reactions{
  display:inline-flex;
}
.comment-mini-reactions span{
  margin-left:-2px;
}
.comment-reaction-summary{
  width:210px;
  margin:5px 0 7px 8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
}
.comment-reaction-summary div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:3px 0;
}
.comment-reply-form{
  display:flex;
  align-items:center;
  gap:7px;
  margin:7px 0 8px 8px;
}
.comment-reply-form input{
  flex:1;
  min-width:0;
  margin:0;
  border-radius:999px;
  background:var(--surface-2);
  border-color:transparent;
}
.comment-reply-form button{
  flex:0 0 auto;
  border-radius:999px;
}
.reply-comment{
  margin-left:34px;
  margin-top:8px;
}
.reply-avatar{
  width:30px;
  height:30px;
  flex:0 0 30px;
}
@media (max-width:600px){
  .reply-comment{
    margin-left:22px;
  }
  .comment-reaction-picker{
    max-width:min(330px,calc(100vw - 42px));
    overflow-x:auto;
  }
}


/* HamSocial 1.0.50: shared post opens original post */
.shared-post-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.shared-post-link:hover .shared-post-box{
  background:var(--surface-2);
}


/* HamSocial 1.0.51: reliable shared-post navigation */
.shared-post-clickable{
  cursor:pointer;
}
.shared-post-clickable:hover{
  background:var(--surface-2);
}
.shared-post-clickable:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}


/* HamSocial 1.0.52: consistent Facebook-style controls on individual post pages */
.post-page-comment-form[hidden]{
  display:none !important;
}
.post-page-comment-form{
  margin-top:12px;
}
#comments .post-page-comment-form textarea{
  min-height:86px;
}


/* HamSocial 1.0.54: reply fields stay under the exact post/comment being answered */
.post-page-comment-form{
  margin:10px 0 16px;
  padding:10px;
  border-top:1px solid var(--border);
}
.inline-comment-form{
  margin:10px 0 12px;
  padding-top:8px;
  border-top:1px solid var(--border);
}
.comment-reply-form{
  margin:6px 0 8px 0;
}
.reply-comment .comment-reply-form{
  margin-left:0;
}


/* HamSocial 1.0.55: @mentions and #hashtags in comments */
.comment-mention,
.comment-hashtag{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}
.comment-mention:hover,
.comment-hashtag:hover{
  text-decoration:underline;
}
.hashtag-result{
  padding:12px 0;
  border-top:1px solid var(--border);
}
.hashtag-result:first-of-type{
  border-top:0;
}
.hashtag-result-user{
  display:flex;
  align-items:center;
  gap:8px;
  color:inherit;
  text-decoration:none;
}
.hashtag-result-body{
  margin:8px 0 5px;
}


/* HamSocial 1.0.57: live @mention and #hashtag suggestions */
.tag-autocomplete-panel{
  position:absolute;
  z-index:5000;
  max-height:320px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 12px 32px rgba(0,0,0,.24);
}
.tag-autocomplete-panel[hidden]{
  display:none !important;
}
.tag-autocomplete-title{
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  color:var(--muted);
  font-size:.8rem;
  font-weight:700;
}
.tag-autocomplete-item{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:48px;
  padding:8px 10px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text);
  text-align:left;
}
.tag-autocomplete-item:hover,
.tag-autocomplete-item:focus{
  background:var(--surface-2);
}
.tag-autocomplete-avatar{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:14px;
  object-fit:cover;
}
.tag-autocomplete-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}
@media (max-width:520px){
  .tag-autocomplete-panel{
    max-height:260px;
  }
}

.login-account-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.login-register-button{
  min-width:110px;
  text-align:center;
  font-weight:600;
}
.login-forgot-link{font-weight:600}
@media (max-width:520px){
  .login-account-actions{align-items:stretch;flex-direction:column}
  .login-account-actions .btn{text-align:center}
}

.registration-acknowledgement{
  margin:16px 0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2, rgba(127,127,127,.06));
}
.registration-ack-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  line-height:1.45;
}
.registration-ack-label input{
  width:auto;
  margin-top:4px;
  flex:0 0 auto;
}
button:disabled,
button:disabled:hover{
  opacity:.55;
  cursor:not-allowed;
  filter:none;
}

/* HamSocial local alphanumeric CAPTCHA */
.captcha-block{margin:1rem 0;}
.captcha-block>label{display:block;margin-bottom:.45rem;font-weight:600;}
.captcha-image-row{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-bottom:.55rem;}
.captcha-image-row img{display:block;max-width:100%;height:auto;border:1px solid var(--border,#d1d5db);border-radius:8px;background:#f3f4f6;}
.captcha-refresh{width:auto!important;min-width:92px;align-self:center;}
.captcha-block input{text-transform:uppercase;letter-spacing:.12em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-weight:700;}


/* HamSocial 1.0.62: administrator-managed login banner */
.login-banner-wrap{max-width:820px;margin:0 auto 18px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--surface);box-shadow:0 4px 18px rgba(0,0,0,.08)}
.login-banner-image{display:block;width:100%;aspect-ratio:820/312;object-fit:cover}
.admin-banner-preview{max-width:820px;margin:16px 0 20px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.admin-banner-preview img{display:block;width:100%;aspect-ratio:820/312;object-fit:cover}
.banner-upload-form{margin-top:16px}
.banner-remove-form{margin-top:12px}
@media(max-width:600px){.login-banner-wrap{border-radius:9px;margin-bottom:12px}}

/* Professional administrator access-required page */
.access-required-page{max-width:820px;margin:0 auto 36px}
.access-required-banner{margin-bottom:20px}
.access-required-card{max-width:680px;margin:0 auto;text-align:center;padding:clamp(28px,5vw,48px)}
.access-required-icon{width:76px;height:76px;margin:0 auto 18px;display:grid;place-items:center;border-radius:14px;font-size:34px;background:var(--surface-2);border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.access-required-card h1{margin:0 0 12px;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.1}
.access-required-lead{font-size:1.08rem;margin:0 auto 10px;max-width:560px}
.access-required-card .meta{max-width:560px;margin:0 auto}
.access-required-actions{display:flex;justify-content:center;margin-top:26px}
.access-required-primary{min-width:190px;text-align:center}
@media(max-width:600px){.access-required-page{margin-bottom:22px}.access-required-card{padding:26px 20px}.access-required-icon{width:66px;height:66px;font-size:30px}.access-required-primary{width:100%}}

/* Larger top-level profile photos in the feed */
.feed-post-avatar{width:150px;height:150px;flex:0 0 150px;object-fit:cover;border-radius:14px}
@media(max-width:600px){.feed-post-avatar{width:150px;height:150px;flex-basis:150px}}

/* HamSocial 1.0.90 - Create Post avatar matches 150x150 feed avatars */
.create-post-avatar{
  width:150px!important;
  height:150px!important;
  min-width:150px!important;
  max-width:150px!important;
  flex:0 0 150px!important;
  object-fit:cover;
  border-radius:14px;
}
.create-post-avatar-link{
  width:150px;
  min-width:150px;
  flex:0 0 150px;
  align-self:flex-start;
}
.create-post-row{
  align-items:flex-start;
}
@media(max-width:600px){
  .create-post-avatar,.create-post-avatar-link{
    width:150px!important;
    min-width:150px!important;
    max-width:150px!important;
  }
  .create-post-avatar{height:150px!important;flex-basis:150px!important}
  .create-post-avatar-link{flex-basis:150px!important}
}

/* HamSocial 1.0.91 - standardize profile/avatar images at 100x100 */
.avatar,
.feed-post-avatar,
.create-post-avatar,
.composer-avatar{
  width:100px!important;
  height:100px!important;
  min-width:100px!important;
  max-width:100px!important;
  flex:0 0 100px!important;
  object-fit:cover;
  border-radius:14px;
}
.create-post-avatar-link,
.post-avatar-link{
  width:100px!important;
  min-width:100px!important;
  max-width:100px!important;
  flex:0 0 100px!important;
}
@media(max-width:600px){
  .avatar,
  .feed-post-avatar,
  .create-post-avatar,
  .composer-avatar{
    width:100px!important;
    height:100px!important;
    min-width:100px!important;
    max-width:100px!important;
    flex-basis:100px!important;
  }
  .create-post-avatar-link,
  .post-avatar-link{
    width:100px!important;
    min-width:100px!important;
    max-width:100px!important;
    flex-basis:100px!important;
  }
}

/* HamSocial 1.0.92 - Audience and Post button on one row */
.post-controls{
  display:flex;
  align-items:flex-end;
  gap:14px;
  width:100%;
}
.post-controls .audience-control{
  flex:1 1 auto;
  margin:0;
}
.post-controls .audience-control select{
  width:100%;
}
.post-controls .post-submit{
  flex:0 0 auto;
  margin:0;
  min-height:48px;
  padding-left:24px;
  padding-right:24px;
}
@media(max-width:600px){
  .post-controls{
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    gap:10px;
  }
  .post-controls .audience-control{min-width:0}
  .post-controls .post-submit{white-space:nowrap}
}

/* HamSocial 1.0.93 - match Post button height to Audience dropdown */
.post-controls{
  align-items:flex-end;
}
.post-controls .audience-control select,
.post-controls .post-submit{
  height:64px!important;
  min-height:64px!important;
  box-sizing:border-box;
}
.post-controls .post-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:0!important;
  padding-bottom:0!important;
}

/* HamSocial 1.0.94 - exact Audience/Post height matching */
.post-controls{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end!important;
  gap:14px;
}
.post-controls .audience-control{
  display:grid!important;
  grid-template-rows:auto 1fr;
  margin:0!important;
}
.post-controls .audience-control select{
  height:100%!important;
  min-height:72px!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.post-controls .post-submit{
  height:72px!important;
  min-height:72px!important;
  align-self:end!important;
  margin:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
@media(max-width:600px){
  .post-controls{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
  }
  .post-controls .audience-control select,
  .post-controls .post-submit{
    height:72px!important;
    min-height:72px!important;
  }
}


/* HamSocial 1.0.95 - softer, more subtle light mode */
html[data-theme="light"],
body[data-theme="light"],
[data-theme="light"]{
  --bg:#f2f3f5;
  --surface:#f8f9fa;
  --surface-2:#eceff2;
  --surface-3:#e5e8ec;
  --text:#252a31;
  --muted:#69717c;
  --border:#d4d9df;
  --primary:#5f83d8;
  --primary-strong:#4f72c5;
  --danger:#b85c64;
  --success:#4f8465;
  --shadow:0 8px 24px rgba(35,40,48,.08);
  background:#f2f3f5!important;
  color:#252a31!important;
}

[data-theme="light"] body{
  background:linear-gradient(180deg,#f4f5f7 0%,#eef0f3 100%)!important;
  color:#252a31!important;
}

[data-theme="light"] header,
[data-theme="light"] .site-header,
[data-theme="light"] .topbar{
  background:rgba(246,247,249,.96)!important;
  border-color:#d4d9df!important;
  box-shadow:0 1px 0 rgba(35,40,48,.05)!important;
}

[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .modal-content,
[data-theme="light"] .dropdown-menu{
  background:#f8f9fa!important;
  border-color:#d4d9df!important;
  box-shadow:0 6px 18px rgba(35,40,48,.06)!important;
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select{
  background:#eceff2!important;
  color:#252a31!important;
  border-color:#cfd5dc!important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder{
  color:#7b838e!important;
  opacity:1!important;
}

[data-theme="light"] .btn.secondary,
[data-theme="light"] button.secondary,
[data-theme="light"] .admin-nav .btn{
  background:#e7eaee!important;
  color:#30363f!important;
  border-color:#ccd2d9!important;
}

[data-theme="light"] button,
[data-theme="light"] .btn,
[data-theme="light"] .post-submit{
  box-shadow:none!important;
}

[data-theme="light"] .meta,
[data-theme="light"] .muted,
[data-theme="light"] small{
  color:#707884!important;
}

[data-theme="light"] hr,
[data-theme="light"] .divider{
  border-color:#d9dde2!important;
}

[data-theme="light"] .alert{
  box-shadow:none!important;
}

[data-theme="light"] .alert.success{
  background:#e8f1eb!important;
  border-color:#bfd4c6!important;
  color:#365b43!important;
}

[data-theme="light"] .alert.error{
  background:#f4e7e8!important;
  border-color:#ddbfc3!important;
  color:#7a3f46!important;
}

[data-theme="light"] a:not(.btn){
  color:#4f72c5;
}

[data-theme="light"] .badge{
  background:#e4e8ed!important;
  color:#3b424c!important;
  border-color:#cfd5dc!important;
}


/* HamSocial 1.0.96 - subtle cool-color light theme */
html[data-theme="light"],
body[data-theme="light"],
[data-theme="light"]{
  --bg:#e9f1f7;
  --surface:#eef5fa;
  --surface-2:#e1edf5;
  --surface-3:#d8e8f1;
  --text:#243746;
  --muted:#5d7484;
  --border:#bfd3df;
  --primary:#527fc7;
  --primary-strong:#426eaf;
  --danger:#a95d70;
  --success:#4d8178;
  --shadow:0 8px 24px rgba(43,78,101,.09);
  background:#e9f1f7!important;
  color:#243746!important;
}
[data-theme="light"] body{
  background:linear-gradient(180deg,#eaf4f8 0%,#e3eff5 55%,#e7f1f7 100%)!important;
  color:#243746!important;
}
[data-theme="light"] header,
[data-theme="light"] .site-header,
[data-theme="light"] .topbar{
  background:#e2eef5!important;
  border-color:#bfd3df!important;
  box-shadow:0 1px 0 rgba(43,78,101,.08)!important;
}
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .modal-content,
[data-theme="light"] .dropdown-menu{
  background:#edf6fa!important;
  border-color:#c3d7e2!important;
  box-shadow:0 6px 18px rgba(43,78,101,.07)!important;
}
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select{
  background:#dcebf3!important;
  color:#243746!important;
  border-color:#b8cedb!important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder{
  color:#657e8e!important;
  opacity:1!important;
}
[data-theme="light"] .btn.secondary,
[data-theme="light"] button.secondary,
[data-theme="light"] .admin-nav .btn{
  background:#d6e7f0!important;
  color:#294252!important;
  border-color:#b7cedb!important;
}
[data-theme="light"] .meta,
[data-theme="light"] .muted,
[data-theme="light"] small{
  color:#607888!important;
}
[data-theme="light"] hr,
[data-theme="light"] .divider{
  border-color:#c5d8e2!important;
}
[data-theme="light"] .alert.success{
  background:#dcefe9!important;
  border-color:#afd2c8!important;
  color:#35645c!important;
}
[data-theme="light"] .alert.error{
  background:#f0e2e8!important;
  border-color:#d8b7c3!important;
  color:#754656!important;
}
[data-theme="light"] a:not(.btn){
  color:#426eaf;
}
[data-theme="light"] .badge{
  background:#d8e9f1!important;
  color:#304d5d!important;
  border-color:#b8cfdb!important;
}


/* HamSocial 1.0.97 - slightly darker cool-color light theme */
html[data-theme="light"],
body[data-theme="light"],
[data-theme="light"]{
  --bg:#d7e6f0;
  --surface:#dfedf4;
  --surface-2:#cfE1ec;
  --surface-3:#c4dae6;
  --text:#203544;
  --muted:#526d7e;
  --border:#a9c3d2;
  --primary:#4b75b8;
  --primary-strong:#3d64a0;
  --shadow:0 8px 24px rgba(38,72,94,.11);
  background:#d7e6f0!important;
  color:#203544!important;
}
[data-theme="light"] body{
  background:linear-gradient(180deg,#d9e9f1 0%,#d0e2ec 55%,#d5e6ef 100%)!important;
}
[data-theme="light"] header,
[data-theme="light"] .site-header,
[data-theme="light"] .topbar{
  background:#cddfe9!important;
  border-color:#a9c3d2!important;
}
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .modal-content,
[data-theme="light"] .dropdown-menu{
  background:#dcebf2!important;
  border-color:#aec7d5!important;
}
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select{
  background:#c9dde8!important;
  color:#203544!important;
  border-color:#9fbccc!important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder{
  color:#587485!important;
}
[data-theme="light"] .btn.secondary,
[data-theme="light"] button.secondary,
[data-theme="light"] .admin-nav .btn{
  background:#c5dae5!important;
  color:#243e4e!important;
  border-color:#9fbcca!important;
}
[data-theme="light"] .badge{
  background:#c6dce7!important;
  color:#294858!important;
  border-color:#a1bdcb!important;
}


/* HamSocial 1.0.98 - Ham wordmark treatment */
.brand-ham{
  color:#fff!important;
  -webkit-text-stroke:1.25px #000;
  paint-order:stroke fill;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

/* HamSocial 1.0.99 - Ham lettering remains white, outline removed */
.brand-ham{
  color:#fff!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
}


/* HamSocial 1.1.00 - wordmark entrance animation */
.brand-ham,
.brand-social{
  display:inline-block;
  transform-origin:center;
  will-change:transform,opacity,filter;
}

.brand-ham{
  animation:hamsocialHamIntro .8s cubic-bezier(.2,.8,.2,1) both;
}

.brand-social{
  animation:hamsocialSocialIntro .9s .12s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes hamsocialHamIntro{
  0%{
    opacity:0;
    transform:translateX(-18px) scale(.92);
    filter:blur(5px);
  }
  60%{
    opacity:1;
    transform:translateX(3px) scale(1.03);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateX(0) scale(1);
    filter:blur(0);
  }
}

@keyframes hamsocialSocialIntro{
  0%{
    opacity:0;
    transform:translateX(18px) scale(.92);
    filter:blur(5px);
  }
  60%{
    opacity:1;
    transform:translateX(-3px) scale(1.03);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateX(0) scale(1);
    filter:blur(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .brand-ham,
  .brand-social{
    animation:none!important;
    transform:none!important;
    filter:none!important;
    opacity:1!important;
  }
}

/* HamSocial CQ navigation */
.cq-admin-table td{vertical-align:top}


/* HamSocial 1.1.02 - Admin portal menu navigation */
.admin-menu-shell{
  margin:0 0 20px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.admin-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}

.admin-menu-title{
  display:block;
  font-size:18px;
  line-height:1.2;
}

.admin-menu-subtitle{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:13px;
}

.admin-menu-toggle{
  display:none;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 14px;
}

.admin-menu-panel{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}

.admin-menu-group{
  padding:16px;
  border-right:1px solid var(--border);
}

.admin-menu-group:nth-child(4){
  border-right:0;
}

.admin-menu-group-return{
  grid-column:1/-1;
  border-top:1px solid var(--border);
  border-right:0;
  padding:10px 16px;
  background:var(--surface-2);
}

.admin-menu-group-title{
  margin:0 0 8px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.admin-menu-link{
  display:block;
  padding:10px 11px;
  margin:2px 0;
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}

.admin-menu-link:hover,
.admin-menu-link:focus-visible{
  background:var(--surface-3);
  color:var(--primary);
}

.admin-menu-link.active{
  background:var(--primary);
  color:#fff;
}

@media(max-width:900px){
  .admin-menu-panel{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .admin-menu-group:nth-child(2){
    border-right:0;
  }
  .admin-menu-group:nth-child(3),
  .admin-menu-group:nth-child(4){
    border-top:1px solid var(--border);
  }
}

@media(max-width:760px){
  .admin-menu-toggle{
    display:inline-flex;
  }

  .admin-menu-panel{
    display:none;
    grid-template-columns:1fr;
  }

  .admin-menu-panel.open{
    display:grid;
  }

  .admin-menu-group{
    border-right:0!important;
    border-top:1px solid var(--border);
    padding:12px 14px;
  }

  .admin-menu-group:first-child{
    border-top:0;
  }

  .admin-menu-group-return{
    grid-column:auto;
  }

  .admin-menu-link{
    padding:12px 12px;
  }
}


/* HamSocial 1.1.35: useful three-column desktop feed */
.feed-page .container{
  width:min(1480px,96vw);
  max-width:none;
}
.feed-page .feed-layout{
  display:grid;
  grid-template-columns:minmax(220px,260px) minmax(560px,760px) minmax(230px,290px);
  justify-content:center;
  align-items:start;
  gap:20px;
  width:100%;
  max-width:none;
  margin:0 auto;
}
.feed-page .feed-main{width:100%;min-width:0}
.feed-sidebar{min-width:0}
.feed-sidebar-sticky{position:sticky;top:92px}
.feed-sidebar .card{padding:14px;margin-bottom:14px}
.feed-sidebar h3{margin:0;font-size:1rem}
.sidebar-profile-link{
  display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0
}
.sidebar-profile-link>span,.sidebar-member>span,.sidebar-cq-item>span:last-child{
  display:flex;flex-direction:column;min-width:0
}
.sidebar-profile-link strong,.sidebar-member strong,.sidebar-cq-item strong{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.sidebar-profile-avatar{width:64px;height:64px;flex:0 0 64px;border-radius:16px}
.sidebar-quick-nav{display:grid;gap:5px;margin-top:10px}
.sidebar-quick-nav a{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;
  min-height:43px;padding:8px 9px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:650
}
.sidebar-quick-nav a:hover,.sidebar-quick-nav a.active{background:var(--surface-2)}
.sidebar-count{
  min-width:26px;padding:3px 7px;border-radius:999px;background:var(--surface-2);
  text-align:center;font-size:.78rem
}
.sidebar-count-alert{background:var(--accent);color:#fff}
.sidebar-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.sidebar-section-head a{font-size:.82rem;text-decoration:none;color:var(--accent)}
.sidebar-member-list,.sidebar-cq-list{display:grid;gap:5px}
.sidebar-member,.sidebar-cq-item{
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;color:inherit;text-decoration:none;min-width:0
}
.sidebar-member:hover,.sidebar-cq-item:hover{background:var(--surface-2)}
.sidebar-member-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:12px}
.sidebar-cq-icon{
  display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:11px;
  background:var(--surface-2);font-size:.78rem;font-weight:900;color:var(--accent)
}
.sidebar-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.sidebar-stat-grid a{
  display:flex;flex-direction:column;gap:3px;padding:11px;border:1px solid var(--border);
  border-radius:11px;color:inherit;text-decoration:none;background:var(--surface-2)
}
.sidebar-stat-grid strong{font-size:1.35rem}
.sidebar-stat-grid span{font-size:.75rem;color:var(--muted);line-height:1.2}
.sidebar-tag-list{display:grid;gap:4px}
.sidebar-tag-list a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 7px;
  border-radius:9px;text-decoration:none;color:inherit
}
.sidebar-tag-list a:hover{background:var(--surface-2)}
.sidebar-tag-list span{font-weight:750;color:var(--accent);min-width:0;overflow:hidden;text-overflow:ellipsis}
.sidebar-tag-list small{color:var(--muted);white-space:nowrap}
.sidebar-tip-card p{line-height:1.5;margin:9px 0 12px}
.sidebar-cq-button{width:100%;text-align:center}

/* Medium desktop/tablet: keep the feed roomy and remove sidebars before they become cramped. */
@media(max-width:1179px){
  .feed-page .container{width:min(900px,95vw)}
  .feed-page .feed-layout{display:block;max-width:760px}
  .feed-page .feed-sidebar{display:none}
}

/* Large desktop: slightly wider center feed on very wide displays. */
@media(min-width:1500px){
  .feed-page .feed-layout{
    grid-template-columns:minmax(230px,270px) minmax(640px,780px) minmax(240px,300px);
    gap:24px;
  }
}


/* HamSocial 1.1.36: social-network style profile page */
.profile-page .container{
  width:min(1180px,95vw);
  max-width:none;
}
.profile-layout{
  display:grid;
  grid-template-columns:minmax(240px,290px) minmax(0,780px);
  gap:22px;
  justify-content:center;
  align-items:start;
}
.profile-sidebar{min-width:0}
.profile-sidebar-sticky{position:sticky;top:92px}
.profile-identity-card{text-align:center;padding:22px 18px}
.profile-main-avatar{
  width:100px;height:100px;border-radius:20px;display:block;margin:0 auto 14px;
  object-fit:cover
}
.profile-identity-card h1{font-size:1.35rem;line-height:1.2;margin:0 0 5px;overflow-wrap:anywhere}
.profile-userid{color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.profile-stat-row{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 14px
}
.profile-stat-row>a,.profile-stat-row>div{
  display:flex;flex-direction:column;gap:2px;padding:10px 6px;
  border:1px solid var(--border);border-radius:11px;background:var(--surface-2);
  text-decoration:none;color:inherit
}
.profile-stat-row strong{font-size:1.15rem}
.profile-stat-row span{font-size:.75rem;color:var(--muted)}
.profile-edit-toggle{width:100%}
.profile-friend-request{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.profile-friend-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.profile-friend-actions form{margin:0}
.profile-quick-details h2{font-size:1rem;margin:0 0 12px}
.profile-detail-row{
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:start;
  padding:10px 0;border-bottom:1px solid var(--border)
}
.profile-detail-row:last-child{border-bottom:0}
.profile-detail-row>span:last-child{display:flex;flex-direction:column;min-width:0}
.profile-detail-row small{color:var(--muted);font-size:.72rem;margin-bottom:2px}
.profile-detail-row strong,.profile-detail-row a{font-size:.88rem;overflow-wrap:anywhere}
.profile-main-column{min-width:0}
.profile-overview-card{padding:22px}
.profile-overview-head,.profile-edit-panel-head,.profile-section-title{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px
}
.profile-overview-head h2,.profile-edit-panel-head h2,.profile-section-title h2{
  margin:2px 0 0;font-size:1.35rem
}
.profile-eyebrow{
  color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em
}
.profile-bio{font-size:1rem;line-height:1.6;margin:18px 0}
.profile-empty-bio{margin:18px 0;padding:14px;border:1px dashed var(--border);border-radius:10px}
.profile-overview-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:18px
}
.profile-overview-facts>div{
  display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--border);
  border-radius:11px;background:var(--surface-2);min-width:0
}
.profile-overview-facts span{font-size:.72rem;color:var(--muted)}
.profile-overview-facts strong{font-size:.88rem;overflow-wrap:anywhere}
.profile-edit-panel{scroll-margin-top:100px}
.profile-edit-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:14px
}
.profile-edit-wide{grid-column:1/-1}
.profile-edit-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.profile-posts-section{margin-top:20px}
.profile-section-title{align-items:center;margin:0 4px 12px}
.profile-post-card{padding:18px}
.profile-post-avatar{width:50px;height:50px;border-radius:14px}
.profile-post-card>p{font-size:1rem;line-height:1.6}
.profile-post-footer{display:flex;justify-content:flex-end;margin-top:12px}
.profile-no-posts{text-align:center;padding:30px 20px}

@media(max-width:900px){
  .profile-page .container{width:min(760px,94vw)}
  .profile-layout{display:block}
  .profile-sidebar-sticky{position:static}
  .profile-sidebar{margin-bottom:16px}
  .profile-identity-card{text-align:left}
  .profile-main-avatar{margin:0 0 14px}
  .profile-friend-actions{justify-content:flex-start}
  .profile-quick-details{display:none}
  .profile-stat-row{max-width:320px}
}
@media(max-width:600px){
  .profile-page .container{width:94vw}
  .profile-overview-head{align-items:flex-start}
  .profile-edit-toggle-secondary{display:none}
  .profile-overview-facts{grid-template-columns:1fr}
  .profile-edit-grid{grid-template-columns:1fr}
  .profile-edit-wide{grid-column:auto}
  .profile-section-title{margin-left:0;margin-right:0}
}


/* HamSocial 1.1.37: desktop messaging workspace */
.messages-page .container{
  width:min(1500px,96vw);
  max-width:none;
  margin-top:18px;
}
.messages-workspace{
  display:grid;
  grid-template-columns:minmax(250px,310px) minmax(520px,760px) minmax(220px,280px);
  gap:18px;
  justify-content:center;
  align-items:stretch;
  min-height:calc(100vh - 155px);
}
.messages-conversations-panel,
.messages-chat-panel,
.messages-details-panel{min-width:0}
.messages-conversations-card,
.messages-chat-card{height:calc(100vh - 155px);min-height:580px;margin-bottom:0}
.messages-conversations-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.messages-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 18px 12px
}
.messages-panel-head h1{margin:2px 0 0;font-size:1.35rem}
.messages-eyebrow{
  color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em
}
.messages-compose-button,.message-compose-close{
  display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:12px;
  background:var(--accent);color:#fff;font-size:1.2rem;font-weight:800
}
.message-compose-close{background:var(--surface-2);color:var(--text);font-size:1.5rem}
.conversation-search-wrap{padding:0 14px 12px}
.conversation-search{margin:0}
.conversation-list{
  overflow-y:auto;min-height:0;flex:1;padding:2px 8px 12px;
  scrollbar-width:thin
}
.conversation-item{
  display:grid;grid-template-columns:50px minmax(0,1fr);gap:10px;
  padding:10px;border-radius:12px;color:inherit;text-decoration:none;margin:2px 0
}
.conversation-item:hover{background:var(--surface-2)}
.conversation-item.active{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent)}
.conversation-item.unread .conversation-title-row strong{font-weight:900}
.conversation-avatar{width:50px;height:50px;flex:0 0 50px;border-radius:14px}
.conversation-copy{min-width:0}
.conversation-title-row,.conversation-preview-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0
}
.conversation-title-row strong{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem
}
.conversation-title-row time{font-size:.68rem;color:var(--muted);white-space:nowrap}
.conversation-preview-row{margin-top:4px}
.conversation-preview-row>span{
  color:var(--muted);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.conversation-unread-badge{
  display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.68rem
}
.conversation-list-empty{
  display:flex;flex-direction:column;gap:5px;padding:24px 14px;text-align:center;color:var(--muted)
}
.conversation-list-empty strong{color:var(--text)}
.messages-chat-card{
  display:flex;flex-direction:column;padding:0;overflow:hidden
}
.messages-chat-header{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--border);flex:0 0 auto
}
.messages-chat-person{
  display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0;flex:1
}
.messages-chat-person>span{display:flex;flex-direction:column;min-width:0}
.messages-chat-person strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.messages-chat-person small{color:var(--muted)}
.messages-chat-avatar{width:48px;height:48px;border-radius:14px}
.messages-mobile-back{display:none;font-size:2rem;text-decoration:none;color:var(--text)}
.messages-thread{
  flex:1;min-height:0;overflow-y:auto;padding:18px 18px 22px;
  background:color-mix(in srgb,var(--surface-2) 38%,transparent);
  scrollbar-width:thin
}
.message-date-separator{display:flex;align-items:center;justify-content:center;margin:14px 0}
.message-date-separator span{
  padding:4px 9px;border-radius:999px;background:var(--surface-2);
  color:var(--muted);font-size:.7rem;font-weight:700
}
.message-row{display:flex;align-items:flex-end;gap:8px;margin:7px 0}
.message-row.mine{justify-content:flex-end}
.message-avatar{width:32px;height:32px;border-radius:10px;flex:0 0 32px}
.message-bubble-wrap{max-width:min(76%,560px)}
.message-row.mine .message-bubble-wrap{display:flex;flex-direction:column;align-items:flex-end}
.message-bubble{
  padding:10px 13px;border-radius:16px 16px 16px 5px;
  background:var(--surface-2);color:var(--text);line-height:1.45;overflow-wrap:anywhere
}
.message-row.mine .message-bubble{
  background:var(--accent);color:#fff;border-radius:16px 16px 5px 16px
}
.message-time{font-size:.66rem;color:var(--muted);margin:3px 5px 0}
.messages-thread-empty{
  min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:6px;color:var(--muted);padding:30px
}
.messages-thread-empty strong{color:var(--text);font-size:1.05rem}
.messages-empty-icon{font-size:2rem}
.messages-reply-form{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;
  padding:12px;border-top:1px solid var(--border);background:var(--card)
}
.messages-reply-form textarea{
  min-height:48px;max-height:150px;margin:0;resize:vertical
}
.messages-send-button{height:48px;min-width:72px}
.messages-empty-state-card{
  min-height:calc(100vh - 155px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px
}
.messages-empty-state-card h2{margin:8px 0}
.messages-empty-state-card p{max-width:420px;color:var(--muted);line-height:1.5}
.messages-details-sticky{position:sticky;top:92px}
.message-member-card{text-align:center;padding:20px 16px}
.message-member-avatar{
  width:92px;height:92px;border-radius:20px;display:block;margin:0 auto 12px
}
.message-member-card h2{font-size:1.15rem;margin:0 0 4px;overflow-wrap:anywhere}
.message-member-bio{font-size:.84rem;line-height:1.5;color:var(--muted);margin:14px 0}
.message-member-details{display:grid;gap:6px;text-align:left;margin:14px 0}
.message-member-details>div{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;padding:9px 0;
  border-top:1px solid var(--border)
}
.message-member-details>div>span:last-child{display:flex;flex-direction:column}
.message-member-details small{font-size:.68rem;color:var(--muted)}
.message-member-details strong{font-size:.82rem}
.message-profile-button{width:100%;text-align:center}
.message-help-card h3{font-size:.95rem;margin:0 0 7px}
.message-help-card p{line-height:1.45;margin:0}
.message-compose-overlay{
  position:fixed;inset:0;z-index:4000;background:rgba(0,0,0,.58);
  display:flex;align-items:center;justify-content:center;padding:18px
}
.message-compose-overlay[hidden]{display:none}
.message-compose-dialog{width:min(560px,96vw);margin:0;max-height:90vh;overflow-y:auto}
.message-compose-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px
}
.message-compose-head h2{margin:2px 0 0}
.message-compose-actions{display:flex;gap:9px;flex-wrap:wrap}
body.message-compose-open{overflow:hidden}

/* Medium desktop: remove the details rail but keep the real two-pane messenger. */
@media(max-width:1199px) and (min-width:761px){
  .messages-page .container{width:min(1050px,96vw)}
  .messages-workspace{grid-template-columns:minmax(240px,300px) minmax(0,1fr)}
  .messages-details-panel{display:none}
}

/* Phone/tablet portrait: conversation list and chat become focused screens. */
@media(max-width:760px){
  .messages-page .container{width:94vw;margin-top:12px}
  .messages-workspace{display:block;min-height:0}
  .messages-conversations-card,.messages-chat-card{height:auto;min-height:calc(100vh - 140px)}
  .messages-details-panel{display:none}
  .messages-workspace.has-active-conversation .messages-conversations-panel{display:none}
  .messages-workspace.no-active-conversation .messages-chat-panel{display:none}
  .messages-mobile-back{display:inline-flex;align-items:center}
  .messages-view-profile{display:none}
  .messages-thread{min-height:calc(100vh - 320px);max-height:none}
  .messages-reply-form{
    position:sticky;bottom:0;grid-template-columns:minmax(0,1fr) auto;
    padding-bottom:max(12px,env(safe-area-inset-bottom))
  }
  .message-bubble-wrap{max-width:84%}
  .conversation-list{overflow:visible}
}


/* HamSocial 1.1.38: desktop Friends workspace */
.friends-page .container{
  width:min(1480px,96vw);
  max-width:none;
}
.friends-workspace{
  display:grid;
  grid-template-columns:minmax(210px,250px) minmax(560px,760px) minmax(240px,290px);
  gap:20px;
  justify-content:center;
  align-items:start;
}
.friends-sidebar-left,.friends-main-column,.friends-sidebar-right{min-width:0}
.friends-sidebar-sticky{position:sticky;top:92px}
.friends-eyebrow{
  color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em
}
.friends-nav-card h1{font-size:1.35rem;margin:3px 0 14px}
.friends-section-nav{display:grid;gap:5px}
.friends-section-nav a{
  display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;
  padding:9px;border-radius:10px;color:inherit;text-decoration:none;font-weight:650
}
.friends-section-nav a:hover{background:var(--surface-2)}
.friends-section-nav b{
  min-width:24px;padding:3px 6px;border-radius:999px;background:var(--surface-2);
  text-align:center;font-size:.72rem
}
.friends-stats-card h3{font-size:.95rem;margin:0 0 10px}
.friends-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.friends-stats-grid>div{
  display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface-2)
}
.friends-stats-grid strong{font-size:1.2rem}
.friends-stats-grid span{font-size:.7rem;color:var(--muted)}
.friends-section-head,.friends-section-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.friends-section-head h2,.friends-section-title h2{font-size:1.2rem;margin:2px 0 0}
.friends-find-card{scroll-margin-top:95px}
.friends-search-form{margin-top:14px}
.friends-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.friends-search-row input{margin:0}
.friends-search-results{display:grid;gap:10px;margin-top:16px}
.friend-discovery-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2)
}
.friend-discovery-profile{
  display:flex;align-items:center;gap:12px;min-width:0;flex:1;color:inherit;text-decoration:none
}
.friend-discovery-avatar{width:58px;height:58px;flex:0 0 58px;border-radius:15px}
.friend-discovery-copy{display:flex;flex-direction:column;min-width:0}
.friend-discovery-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-discovery-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:5px;font-size:.75rem;color:var(--muted)}
.friend-discovery-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.friend-discovery-actions form{margin:0}
.friend-status-badge{font-weight:700}
.friends-search-prompt{
  display:flex;gap:12px;align-items:flex-start;padding:18px;margin-top:14px;
  border:1px dashed var(--border);border-radius:12px;background:var(--surface-2)
}
.friends-search-prompt>span{font-size:1.4rem}
.friends-search-prompt p{margin:3px 0 0;line-height:1.45}
.friends-list-section,.friends-sent-section{margin-top:20px;scroll-margin-top:95px}
.friends-section-title{margin:0 4px 11px}
.friends-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.friend-card{margin:0;padding:14px}
.friend-card-profile{
  display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;min-width:0
}
.friend-card-avatar{width:64px;height:64px;flex:0 0 64px;border-radius:16px}
.friend-card-profile>span{display:flex;flex-direction:column;min-width:0}
.friend-card-profile strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-card-profile small{color:var(--muted);font-size:.75rem;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-card-actions{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:13px;padding-top:11px;border-top:1px solid var(--border)
}
.friend-card-manage{display:flex;gap:6px;margin:0}
.friend-card-manage button{font-size:.78rem;padding:8px 9px}
.friends-empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:5px;color:var(--muted);padding:26px 18px
}
.friends-empty-state strong{color:var(--text)}
.friends-empty-icon{font-size:1.8rem}
.friends-empty-card{min-height:180px}
.friends-sent-card{padding:5px 14px}
.friends-sent-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border)
}
.friends-sent-row:last-child{border-bottom:0}
.friends-sent-row>a{
  display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;min-width:0
}
.friends-sent-row>a>span{display:flex;flex-direction:column}
.friends-sent-row small{color:var(--muted)}
.friends-requests-card{scroll-margin-top:95px}
.friends-compact-empty{display:flex;align-items:center;gap:8px;color:var(--muted);padding:8px 0}
.friends-compact-empty p{margin:0}
.friend-request-card{
  padding:11px 0;border-bottom:1px solid var(--border)
}
.friend-request-card:last-child{border-bottom:0}
.friend-request-card>a{
  display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none
}
.friend-request-card>a>span{display:flex;flex-direction:column;min-width:0}
.friend-request-card small{color:var(--muted)}
.friends-request-avatar{width:46px;height:46px;flex:0 0 46px;border-radius:13px}
.friend-request-meta{display:flex;gap:8px;flex-wrap:wrap;margin:7px 0}
.friend-request-actions{display:flex;gap:7px;margin-top:9px}
.friend-request-actions button{flex:1}
.friends-suggestion-list{display:grid;gap:4px}
.friend-suggestion-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 0
}
.friend-suggestion-item>a{
  display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;min-width:0
}
.friend-suggestion-item>a>span{display:flex;flex-direction:column;min-width:0}
.friend-suggestion-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}
.friend-suggestion-item small{color:var(--muted);font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friends-suggestion-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:12px}
.friend-suggestion-item form{margin:0}
.friend-suggestion-item button{padding:7px 10px;font-size:.76rem}

@media(max-width:1179px){
  .friends-page .container{width:min(950px,95vw)}
  .friends-workspace{grid-template-columns:minmax(200px,240px) minmax(0,1fr)}
  .friends-sidebar-right{display:none}
}
@media(max-width:760px){
  .friends-page .container{width:94vw}
  .friends-workspace{display:block}
  .friends-sidebar-sticky{position:static}
  .friends-sidebar-left{margin-bottom:14px}
  .friends-stats-card{display:none}
  .friends-section-nav{
    display:flex;overflow-x:auto;gap:7px;padding-bottom:2px;-webkit-overflow-scrolling:touch
  }
  .friends-section-nav a{
    display:flex;flex:0 0 auto;min-height:40px;padding:8px 10px;background:var(--surface-2)
  }
  .friends-section-nav a span:first-child{display:none}
  .friends-card-grid{grid-template-columns:1fr}
  .friend-discovery-card{align-items:flex-start;flex-direction:column}
  .friend-discovery-actions{width:100%}
  .friends-search-row{grid-template-columns:1fr}
}


/* HamSocial 1.1.39: administrative dashboard */
.admin-dashboard-page .container{
  width:min(1540px,97vw);
  max-width:none;
  margin-top:18px;
}
.admin-dashboard-layout{
  display:grid;
  grid-template-columns:minmax(220px,255px) minmax(620px,820px) minmax(230px,290px);
  gap:20px;
  justify-content:center;
  align-items:start;
}
.admin-dashboard-nav,
.admin-dashboard-main,
.admin-dashboard-health{min-width:0}
.admin-dashboard-sticky{position:sticky;top:92px}

/* Convert the existing admin menu into a persistent left navigation only on dashboard. */
.admin-dashboard-page .admin-menu-shell{
  margin:0;
  border-radius:14px;
  overflow:hidden;
}
.admin-dashboard-page .admin-menu-head{
  padding:15px;
}
.admin-dashboard-page .admin-menu-toggle{display:none!important}
.admin-dashboard-page .admin-menu-panel{
  display:block!important;
}
.admin-dashboard-page .admin-menu-group{
  padding:11px 12px;
  border:0!important;
  border-top:1px solid var(--border)!important;
}
.admin-dashboard-page .admin-menu-group:first-child{border-top:0!important}
.admin-dashboard-page .admin-menu-group-return{display:none}
.admin-dashboard-page .admin-menu-group-title{
  margin:0 0 4px;
  font-size:.67rem;
}
.admin-dashboard-page .admin-menu-link{
  padding:8px 9px;
  margin:1px 0;
  font-size:.85rem;
}

.admin-dashboard-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px;
}
.admin-dashboard-hero h1{
  margin:3px 0 7px;
  font-size:1.6rem;
}
.admin-dashboard-hero p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}
.admin-dashboard-eyebrow{
  color:var(--muted);
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.admin-dashboard-hero-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.admin-dashboard-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.admin-stat-card{
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px;
  margin:0;
  color:inherit;
  text-decoration:none;
  min-width:0;
}
.admin-stat-card:hover{background:var(--surface-2)}
.admin-stat-card.attention{box-shadow:inset 3px 0 0 #d49b23,var(--shadow)}
.admin-stat-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:12px;
  background:var(--surface-2);
}
.admin-stat-card>span:last-child{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.admin-stat-card strong{font-size:1.35rem}
.admin-stat-card small{color:var(--muted);font-size:.72rem}

.admin-dashboard-two-up{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.admin-dashboard-panel{padding:17px}
.admin-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.admin-panel-head h2{font-size:1.1rem;margin:2px 0 0}
.admin-panel-head>a{font-size:.78rem;text-decoration:none;color:var(--accent);white-space:nowrap}
.admin-empty-state{
  padding:20px 8px;
  text-align:center;
  color:var(--muted);
}

.admin-recent-user-list,
.admin-security-list{display:grid}
.admin-recent-user{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto auto;
  gap:9px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid var(--border);
  color:inherit;
  text-decoration:none;
}
.admin-recent-user:last-child{border-bottom:0}
.admin-recent-avatar{width:38px;height:38px;border-radius:11px}
.admin-recent-user-copy{display:flex;flex-direction:column;min-width:0}
.admin-recent-user-copy strong,
.admin-recent-user-copy small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.admin-recent-user-copy small{color:var(--muted);font-size:.7rem}
.admin-recent-user time{font-size:.68rem;color:var(--muted);white-space:nowrap}
.admin-status-pill{
  padding:3px 6px;
  border-radius:999px;
  font-size:.65rem;
  font-weight:800;
  background:var(--surface-2);
}
.admin-status-pill.active{color:#2e8b57}
.admin-status-pill.pending{color:#b27a13}

.admin-security-event{
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid var(--border);
}
.admin-security-event:last-child{border-bottom:0}
.admin-security-dot,
.admin-health-indicator{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--muted);
}
.admin-security-dot.good,
.admin-health-indicator.good{background:#2fa66a}
.admin-security-dot.bad,
.admin-health-indicator.bad{background:#d84e4e}
.admin-health-indicator.neutral{background:#d49b23}
.admin-security-event>span:nth-child(2){
  display:flex;
  flex-direction:column;
  min-width:0;
}
.admin-security-event strong{font-size:.78rem}
.admin-security-event small{color:var(--muted);font-size:.68rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-security-event time{font-size:.65rem;color:var(--muted);white-space:nowrap}

.admin-quick-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.admin-quick-grid a{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:2px 9px;
  padding:11px;
  border:1px solid var(--border);
  border-radius:11px;
  color:inherit;
  text-decoration:none;
  background:var(--surface-2);
}
.admin-quick-grid a:hover{filter:brightness(1.04)}
.admin-quick-grid a>span{
  grid-row:1/3;
  display:grid;
  place-items:center;
  font-size:1.1rem;
}
.admin-quick-grid strong{font-size:.82rem}
.admin-quick-grid small{font-size:.67rem;color:var(--muted);line-height:1.25}

.admin-health-card,
.admin-version-card,
.admin-attention-card{padding:15px}
.admin-health-list{display:grid}
.admin-health-row{
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid var(--border);
}
.admin-health-row:last-child{border-bottom:0}
.admin-health-row>span:last-child{display:flex;flex-direction:column}
.admin-health-row strong{font-size:.8rem}
.admin-health-row small{font-size:.68rem;color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
.admin-platform-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--border);
  font-size:.78rem;
}
.admin-platform-line:last-child{border-bottom:0}
.admin-platform-line span{color:var(--muted)}
.admin-attention-card>a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--border);
  color:inherit;
  text-decoration:none;
  font-size:.78rem;
}
.admin-attention-card>a:last-child{border-bottom:0}
.admin-attention-card>a span{color:var(--muted)}
.admin-return-button{
  width:100%;
  text-align:center;
  margin-top:4px;
}

@media(max-width:1250px){
  .admin-dashboard-page .container{width:min(1120px,96vw)}
  .admin-dashboard-layout{
    grid-template-columns:minmax(210px,245px) minmax(0,1fr);
  }
  .admin-dashboard-health{display:none}
}
@media(max-width:900px){
  .admin-dashboard-page .container{width:min(900px,95vw)}
  .admin-dashboard-layout{display:block}
  .admin-dashboard-sticky{position:static}
  .admin-dashboard-nav{margin-bottom:14px}
  .admin-dashboard-page .admin-menu-toggle{display:inline-flex!important}
  .admin-dashboard-page .admin-menu-panel{display:none!important}
  .admin-dashboard-page .admin-menu-panel.open{display:grid!important}
  .admin-dashboard-page .admin-menu-group-return{display:block}
  .admin-dashboard-page .admin-menu-group{
    border-top:1px solid var(--border)!important;
  }
  .admin-dashboard-two-up{grid-template-columns:1fr}
}
@media(max-width:650px){
  .admin-dashboard-page .container{width:calc(100% - 16px)}
  .admin-dashboard-hero{align-items:flex-start;flex-direction:column}
  .admin-dashboard-hero-actions{width:100%;justify-content:flex-start}
  .admin-dashboard-stat-grid{grid-template-columns:1fr 1fr}
  .admin-quick-grid{grid-template-columns:1fr 1fr}
  .admin-recent-user{
    grid-template-columns:38px minmax(0,1fr) auto;
  }
  .admin-recent-user time{display:none}
}
@media(max-width:420px){
  .admin-dashboard-stat-grid,
  .admin-quick-grid{grid-template-columns:1fr}
}


/* HamSocial 1.1.40: polished login form and actions */
.login-page .container{
  width:min(720px,94vw);
}
.login-page .login-card{
  max-width:560px;
  padding:22px;
}
.login-page .login-card h1{
  margin-top:0;
  margin-bottom:18px;
}
.login-page #login-credentials{
  display:block;
}
.login-page #login-credentials:disabled{
  opacity:.58;
}
.login-page #login-credentials:not(:disabled){
  opacity:1;
}
.login-page #login-credentials input,
.login-page #login-credentials textarea,
.login-page #login-credentials select{
  background:var(--input-bg)!important;
  color:var(--input-text)!important;
  border-color:var(--border)!important;
  box-shadow:none;
}

/* Prevent browsers/password managers from forcing bright autofill colors. */
.login-page input:-webkit-autofill,
.login-page input:-webkit-autofill:hover,
.login-page input:-webkit-autofill:focus,
.login-page input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--input-text)!important;
  caret-color:var(--input-text)!important;
  -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset!important;
  box-shadow:0 0 0 1000px var(--input-bg) inset!important;
  transition:background-color 99999s ease-out 0s;
}
.login-page input:autofill{
  background:var(--input-bg)!important;
  color:var(--input-text)!important;
}
.login-page #login-captcha-answer{
  letter-spacing:.11em;
  font-weight:700;
}

.login-primary-button{
  width:100%;
  min-height:48px;
  margin-top:4px;
  font-weight:800;
  font-size:1rem;
}
.login-page #login-credentials:disabled .login-primary-button{
  cursor:not-allowed;
}

.login-account-actions{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.login-secondary-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.login-secondary-button{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  width:100%;
  text-align:center;
  font-weight:750;
}
.login-forgot-link{
  display:block;
  width:max-content;
  max-width:100%;
  margin:15px auto 0;
  padding:5px 8px;
  color:var(--accent);
  text-align:center;
  font-weight:650;
  text-decoration:none;
}
.login-forgot-link:hover,
.login-forgot-link:focus-visible{
  text-decoration:underline;
}
.login-acknowledgement{
  background:var(--surface-2);
}
.login-page .captcha-image-row{
  align-items:center;
}

@media(max-width:520px){
  .login-page .login-card{
    padding:16px;
  }
  .login-secondary-actions{
    grid-template-columns:1fr;
  }
  .login-secondary-button{
    min-height:48px;
  }
}


/* HamSocial 1.1.41: collision spark when Ham and Social meet */
.brand-collision{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  isolation:isolate;
  overflow:visible;
}
.brand-collision .brand-ham,
.brand-collision .brand-social{
  position:relative;
  z-index:2;
}

/* Zero-width element lives exactly at the seam between Ham and Social. */
.brand-spark{
  position:relative;
  z-index:3;
  display:inline-block;
  width:0;
  height:1em;
  overflow:visible;
  pointer-events:none;
  vertical-align:baseline;
}

/* Core flash */
.brand-spark::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  background:#fff;
  box-shadow:
    0 0 5px 2px rgba(255,255,255,.95),
    0 0 11px 4px rgba(255,219,84,.92),
    0 0 18px 7px rgba(103,152,255,.62);
  animation:hamsocialCollisionFlash .42s .48s cubic-bezier(.15,.85,.25,1) both;
}

/* Six small spark rays */
.brand-spark i{
  position:absolute;
  left:0;
  top:50%;
  width:11px;
  height:2px;
  margin-top:-1px;
  border-radius:999px;
  transform-origin:0 50%;
  opacity:0;
  background:linear-gradient(90deg,#fff 0 35%,#ffd94f 70%,rgba(255,217,79,0) 100%);
  filter:drop-shadow(0 0 2px rgba(255,220,80,.95));
  animation:hamsocialSparkRay .46s .48s ease-out both;
}
.brand-spark i:nth-child(1){--spark-angle:-78deg;--spark-distance:13px}
.brand-spark i:nth-child(2){--spark-angle:-38deg;--spark-distance:17px}
.brand-spark i:nth-child(3){--spark-angle:4deg;--spark-distance:14px}
.brand-spark i:nth-child(4){--spark-angle:48deg;--spark-distance:16px}
.brand-spark i:nth-child(5){--spark-angle:91deg;--spark-distance:12px}
.brand-spark i:nth-child(6){--spark-angle:152deg;--spark-distance:14px}

@keyframes hamsocialCollisionFlash{
  0%,12%{
    opacity:0;
    transform:translate(-50%,-50%) scale(0);
  }
  32%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.45);
  }
  55%{
    opacity:.92;
    transform:translate(-50%,-50%) scale(.82);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.12);
  }
}

@keyframes hamsocialSparkRay{
  0%,12%{
    opacity:0;
    transform:rotate(var(--spark-angle)) translateX(0) scaleX(.1);
  }
  28%{
    opacity:1;
    transform:rotate(var(--spark-angle)) translateX(1px) scaleX(.9);
  }
  68%{
    opacity:.9;
    transform:rotate(var(--spark-angle)) translateX(var(--spark-distance)) scaleX(.65);
  }
  100%{
    opacity:0;
    transform:rotate(var(--spark-angle)) translateX(calc(var(--spark-distance) + 6px)) scaleX(.15);
  }
}

/* Tiny impact pulse on the words reinforces the collision without changing layout. */
.brand-collision .brand-ham{
  animation:
    hamsocialHamIntro .8s cubic-bezier(.2,.8,.2,1) both,
    hamsocialHamImpact .25s .50s ease-out both;
}
.brand-collision .brand-social{
  animation:
    hamsocialSocialIntro .9s .12s cubic-bezier(.2,.8,.2,1) both,
    hamsocialSocialImpact .25s .50s ease-out both;
}
@keyframes hamsocialHamImpact{
  0%,100%{text-shadow:none}
  45%{text-shadow:-2px 0 7px rgba(255,220,79,.78)}
}
@keyframes hamsocialSocialImpact{
  0%,100%{text-shadow:none}
  45%{text-shadow:2px 0 7px rgba(255,220,79,.78)}
}

@media (prefers-reduced-motion: reduce){
  .brand-spark{display:none!important}
  .brand-collision .brand-ham,
  .brand-collision .brand-social{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    text-shadow:none!important;
  }
}

/* HamSocial 1.1.42: member registration date on profile */
.profile-registered-date{
  margin-top:5px;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.35;
}