/* YourHood: “classic social network era” */
:root{
  --bg1:#d7e7ff;
  --bg2:#f7fbff;
  --line:#7aa7ff;
  --deep:#1b3b86;
  --ink:#10224b;
  --box:#ffffff;
  --shadow: rgba(0,0,0,.12);
  --hot:#ff4fb1;
  --lime:#59ff8a;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 10%, #ffffff 0, transparent 35%),
    radial-gradient(circle at 80% 20%, #ffffff 0, transparent 30%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

a{color:#0a4bd6; text-decoration:none}
a:hover{text-decoration:underline}

.yh-wrap{width:980px; max-width:calc(100% - 24px); margin:0 auto}
.yh-main{padding:14px 0 18px}

.yh-header{
  background: linear-gradient(180deg, #b9d2ff, #6e9cff);
  border-bottom: 3px solid var(--deep);
  box-shadow: 0 8px 0 rgba(255,255,255,.35) inset;
}
.yh-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  gap:12px;
}

.yh-logo-link{display:flex; align-items:center; gap:10px}
.yh-logo-badge{
  display:inline-flex;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  border-radius:10px;
  font-weight:900;
  letter-spacing:1px;
  color:#fff;
  background:
    linear-gradient(135deg, #ff6cc6, #6b7bff);
  border:2px solid rgba(255,255,255,.7);
  box-shadow: 0 5px 0 rgba(0,0,0,.18);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.yh-logo-text{
  font-size:26px;
  font-weight:900;
  color:#fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.yh-logo-sub{
  font-size:11px;
  color:#0b2b74;
  margin-left:56px;
  margin-top:2px;
  font-weight:700;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.yh-nav{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.yh-nav-link{
  display:inline-block;
  padding:6px 10px;
  background: linear-gradient(180deg, #ffffff, #d9e7ff);
  border:1px solid #2c55b8;
  border-radius:4px;
  font-size:12px;
  font-weight:700;
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
  color:#0b2b74;
}
.yh-nav-link:hover{filter:brightness(1.03)}

.yh-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:12px;
}
.yh-box{
  background:var(--box);
  border:2px solid var(--line);
  box-shadow: 0 10px 0 rgba(0,0,0,.05), 0 1px 18px var(--shadow);
}
.yh-box-title{
  padding:8px 10px;
  font-weight:900;
  color:#fff;
  background: linear-gradient(180deg, #2d63ff, #1034a0);
  border-bottom:2px solid #0b256f;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  font-size:13px;
}
.yh-box-body{padding:10px}

.yh-feature{
  padding:8px;
  border:1px dashed #88aaff;
  background: linear-gradient(180deg, #ffffff, #f1f6ff);
  margin-bottom:8px;
}
.yh-feature b{color:#0b2b74}
.yh-kicker{
  font-size:12px;
  line-height:1.45;
}

.yh-form label{display:block; font-size:12px; font-weight:700; margin:6px 0 3px}
.yh-form input, .yh-form textarea, .yh-form select{
  width:100%;
  border:1px solid #2c55b8;
  padding:8px;
  background:#fff;
  font-family:inherit;
  font-size:12px;
}
.yh-form textarea{min-height:110px; resize:vertical}

.yh-btn{
  display:inline-block;
  border:1px solid #0b256f;
  background: linear-gradient(180deg, #fff, #d9e7ff);
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
  font-size:12px;
}
.yh-btn.yh-btn-hot{
  border-color:#7a124f;
  background: linear-gradient(180deg, #ffe6f4, #ff7cc8);
}
.yh-btn:active{transform:translateY(1px)}

.yh-wall-tools{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-bottom:8px;
}
.yh-chip{
  font-size:11px;
  padding:4px 7px;
  border:1px solid #2c55b8;
  background:#f1f6ff;
  font-weight:700;
  cursor:pointer;
  user-select:none;
}
.yh-chip:hover{filter:brightness(1.02)}

.yh-post{
  border:1px solid #88aaff;
  background: linear-gradient(180deg, #ffffff, #f7faff);
  margin-bottom:10px;
}
.yh-post-h{
  padding:8px 10px;
  background: linear-gradient(180deg, #fff, #e8f0ff);
  border-bottom:1px solid #88aaff;
  font-size:12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.yh-post-meta b{color:#0b2b74}
.yh-post-body{padding:10px; font-size:12px; line-height:1.45}
.yh-post-actions{
  display:flex; gap:10px; font-size:11px; align-items:center; flex-wrap:wrap;
}
.yh-action{cursor:pointer; font-weight:900; color:#0a4bd6}
.yh-action.danger{color:#b0003a}
.yh-like{color:#0b7a3a}

.bb-me{color:var(--hot); font-weight:900}
.bb-img-wrap{margin:8px 0}
.bb-img{
  max-width:100%;
  width:auto;
  height:auto;
  border:2px solid #88aaff;
  background:#fff;
  box-shadow: 0 8px 0 rgba(0,0,0,.05);
}
.bb-yt{
  margin:10px 0;
  border:2px solid #88aaff;
  background:#000;
  box-shadow: 0 8px 0 rgba(0,0,0,.05);
}
.bb-yt iframe{
  width:100%;
  height:260px;
  border:0;
  display:block;
}

.yh-modal{
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:999;
}
.yh-modal.open{display:flex}
.yh-modal-card{
  width:740px; max-width:100%;
  background:#fff;
  border:3px solid var(--deep);
  box-shadow: 0 20px 0 rgba(0,0,0,.10);
}
.yh-modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px;
  background: linear-gradient(180deg, #2d63ff, #1034a0);
  color:#fff;
  font-weight:900;
}
.yh-modal-close{cursor:pointer; font-weight:900}
.yh-modal-body{padding:10px}
.yh-comment-scroll{
  border:1px solid #88aaff;
  max-height:280px;
  overflow:auto;
  background: linear-gradient(180deg, #ffffff, #f7faff);
  padding:8px;
}
.yh-comment{
  border:1px dashed #88aaff;
  background:#fff;
  padding:6px 8px;
  margin-bottom:6px;
  font-size:12px;
}
.yh-comment-meta{font-size:11px; margin-bottom:4px}
.yh-footer{
  border-top: 3px solid var(--deep);
  background: linear-gradient(180deg, #d9e7ff, #b9d2ff);
  padding:12px 0 18px;
}
.yh-footer-inner{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.yh-footer-box{
  border:2px solid var(--line);
  background:#fff;
  padding:10px;
  box-shadow: 0 8px 0 rgba(0,0,0,.05);
}
.yh-footer-title{font-weight:900; color:#0b2b74; margin-bottom:4px}
.yh-footer-text{font-size:12px; line-height:1.4}

/* Profile layout */
.yh-profile-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:12px;
}
.yh-profile-name{
  font-size:18px;
  font-weight:900;
  color:#0b2b74;
}
.yh-muted{font-size:11px;color:#385aa3;font-weight:700}
.hr{height:1px;background:#88aaff;margin:10px 0}

/* ===== Inline Edit UI ===== */
.yh-post-edit {
  padding: 10px;
  border-top: 1px solid #88aaff;
  background: linear-gradient(180deg, #ffffff, #f1f6ff);
}

.yh-post-edit-ta {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid #2c55b8;
  padding: 8px;
  font-family: inherit;
  font-size: 12px;
}

.yh-post-edit-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

/* ===== Button loading spinner ===== */
.yh-btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
  padding-left: 30px;
}

.yh-btn.is-loading::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid rgba(0,0,0,.2);
  border-top-color: rgba(0,0,0,.75);
  border-radius: 50%;
  animation: yhspin .8s linear infinite;
}

@keyframes yhspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== Soft delete fade-out ===== */
.yh-fade-out {
  animation: yhfade .25s ease forwards;
}

@keyframes yhfade {
  to {
    opacity: 0;
    transform: translateY(6px);
    height: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
  }
}

/* ===== Toast notification bubble ===== */
.yh-toast {
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 2000;
  background: linear-gradient(180deg, #ffffff, #d9e7ff);
  border: 2px solid #2c55b8;
  box-shadow: 0 10px 0 rgba(0,0,0,.12);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  color: #0b2b74;
  border-radius: 6px;
  max-width: 280px;
}

.yh-toast small {
  display: block;
  font-weight: 700;
  color: #385aa3;
  margin-top: 2px;
}
/* Avatars */
.yh-avatar {
  display:block;
  border:2px solid #88aaff;
  background:#fff;
  box-shadow: 0 6px 0 rgba(0,0,0,.08);
}

.yh-avatar-feed {
  width:40px;
  height:40px;
  border-radius:6px;
}

.yh-avatar-profile {
  width:120px;
  height:120px;
  border-radius:10px;
}

.yh-post-meta-flex{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Tiny comment avatars (24px) */
.yh-avatar-comment {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

/* Comment meta row alignment */
.yh-comment-meta-flex{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ===== Avatar frame wrapper ===== */
.yh-avatar-wrap{
  position: relative;
  display: inline-block;
  line-height: 0;
}

.yh-avatar-wrap img{
  display:block;
}

/* Common frame overlay */
.yh-avatar-wrap::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 14px;
  pointer-events:none;
  box-shadow: 0 8px 0 rgba(0,0,0,.10);
}

/* A tighter frame for small avatars if you ever use it elsewhere */
.yh-avatar-wrap.yh-small::after{
  inset:-4px;
  border-radius: 10px;
}

/* Helper: no frame */
.yh-frame-none::after{
  inset: 0;
  box-shadow:none;
  border:0;
  background:none;
}

/* Frames (SVG data-URI patterns) */
.yh-frame-skulls::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='none'/%3E%3Ctext x='6' y='22' font-size='18'%3E%E2%98%A0%3C/text%3E%3Ctext x='30' y='50' font-size='18'%3E%E2%98%A0%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  border: 3px solid #9aa0a6;
  outline: 2px solid rgba(0,0,0,.55);
}

.yh-frame-flames::after{
  background:
    linear-gradient(180deg, rgba(255,120,0,.35), rgba(0,0,0,.35)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Ctext x='8' y='24' font-size='18'%3E%F0%9F%94%A5%3C/text%3E%3Ctext x='30' y='48' font-size='18'%3E%F0%9F%94%A5%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  border: 3px solid #ff7a00;
  outline: 2px solid rgba(0,0,0,.55);
}

.yh-frame-glitter::after{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,.25), transparent 45%),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.20), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ctext x='8' y='26' font-size='18'%3E%E2%9C%A8%3C/text%3E%3Ctext x='36' y='54' font-size='18'%3E%E2%9C%A8%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  border: 3px solid #c5b3ff;
  outline: 2px solid rgba(0,0,0,.55);
}

.yh-frame-flowery::after{
  background:
    linear-gradient(180deg, rgba(120,255,180,.18), rgba(0,0,0,.22)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ctext x='8' y='26' font-size='18'%3E%F0%9F%8C%B8%3C/text%3E%3Ctext x='36' y='54' font-size='18'%3E%F0%9F%8C%B8%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  border: 3px solid #66d19e;
  outline: 2px solid rgba(0,0,0,.55);
}

.yh-frame-cars::after{
  background:
    linear-gradient(180deg, rgba(120,160,255,.22), rgba(0,0,0,.28)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ctext x='8' y='28' font-size='18'%3E%F0%9F%9A%97%3C/text%3E%3Ctext x='40' y='58' font-size='18'%3E%F0%9F%9A%97%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  border: 3px solid #6aa2ff;
  outline: 2px solid rgba(0,0,0,.55);
}

.yh-frame-animals::after{
  background:
    linear-gradient(180deg, rgba(255,210,120,.18), rgba(0,0,0,.28)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='62'%3E%3Ctext x='8' y='26' font-size='18'%3E%F0%9F%90%BE%3C/text%3E%3Ctext x='34' y='54' font-size='18'%3E%F0%9F%90%BE%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  border: 3px solid #ffcc66;
  outline: 2px solid rgba(0,0,0,.55);
}

.yh-btn-hot{
  font-weight: 900;
}

/* Admin star badge */
.yh-admin-star{
  color: #ffcc33;
  text-shadow: 0 1px 0 #000;
  font-size: 0.95em;
  vertical-align: middle;
  margin-left: 2px;
}