*{box-sizing:border-box}
:root{
  --bg:#efede8;--panel:#f8f7f4;--panel2:#e5e1da;--text:#252825;--muted:#77756f;
  --line:#d7d1c7;--gold:#b08a45;--green:#587264;--brown:#765c4a;--shadow:0 10px 30px rgba(63,55,45,.08)
}
html{background:var(--bg)}
body{margin:0;font-family:"Chakra Petch",system-ui,sans-serif;color:var(--text);background:
linear-gradient(135deg,#f1efeb 0%,#e8e5df 58%,#ded8cc 100%);min-height:100vh}
a{color:inherit;text-decoration:none} a:hover{color:var(--green)}
button,input,textarea{font:inherit}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px max(18px,calc((100vw - 1180px)/2));background:rgba(239,237,232,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(160,150,138,.25)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:21px}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;color:#fff;background:linear-gradient(145deg,var(--green),var(--gold),var(--brown));box-shadow:var(--shadow)}
.topnav{display:flex;align-items:center;gap:14px;font-size:14px}.topnav a{padding:7px 9px;border-radius:10px}.topnav .nav-cta{background:var(--text);color:#fff}
.shell{width:min(1180px,calc(100% - 28px));margin:22px auto 50px}
.layout{display:grid;grid-template-columns:minmax(0,720px) 1fr;gap:22px;align-items:start}.feed{min-width:0}.sidebar{position:sticky;top:82px}
.card{background:rgba(248,247,244,.86);border:1px solid rgba(197,187,173,.65);border-radius:22px;box-shadow:var(--shadow)}
.hero-mini{margin-bottom:18px;padding:24px;border-radius:24px;color:#fff;background:linear-gradient(120deg,#646b66 0%,#806d5c 55%,#9e824f 100%);display:flex;justify-content:space-between;gap:20px;align-items:end;box-shadow:var(--shadow)}
.hero-mini h1{font-size:clamp(27px,5vw,42px);line-height:1.05;margin:6px 0 10px}.hero-mini p{max-width:600px;margin:0;color:#f1eee7}.eyebrow{font-size:11px;letter-spacing:.18em;opacity:.85}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600}.btn.primary{background:linear-gradient(120deg,var(--green),#687d65);color:#fff;border-color:transparent}.hero-mini .btn{white-space:nowrap}.btn.tiny{padding:6px 9px;font-size:12px}
.compose{padding:16px;margin-bottom:16px}.compose textarea,.compose input,.stack input,.chat-compose input,.comment-form textarea,.emoji-admin-form input{width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;outline:none}.compose textarea:focus,.compose input:focus,.stack input:focus,.chat-compose input:focus,.comment-form textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(88,114,100,.10)}
.compose-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.file-label{border:1px dashed var(--line);padding:11px 13px;border-radius:14px;cursor:pointer;background:#f5f2ec}.file-label input{display:none}.compose-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.post-card{padding:16px;margin-bottom:16px;overflow:hidden}.post-head{display:flex;align-items:center;gap:10px}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(145deg,var(--brown),var(--gold))}.avatar.large{width:70px;height:70px;font-size:28px}.avatar.small{width:36px;height:36px;font-size:14px;flex:0 0 auto}.author{font-weight:700}.meta,.muted{color:var(--muted);font-size:13px}.small{font-size:12px}.post-body{font-size:16px;line-height:1.65;margin:14px 2px}.inline-emoji{width:24px;height:24px;object-fit:contain;vertical-align:-6px}
.media-grid{display:grid;gap:6px;border-radius:18px;overflow:hidden;margin-top:12px;background:#d8d2c8;align-items:start}
.media-grid>a{display:flex;align-items:center;justify-content:center;min-width:0;height:330px;overflow:hidden;background:#111}
.media-grid img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#111}
.media-grid video{display:block;width:100%;height:auto;max-height:72vh;object-fit:contain;background:#111}
.media-grid.count-1{grid-template-columns:1fr}
.media-grid.count-1>a{height:min(72vh,680px)}
.media-grid.count-2,.media-grid.count-3,.media-grid.count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.media-grid.count-3>*:first-child{grid-row:auto}
.video-link{margin-top:12px;padding:11px 13px;background:#ece8df;border-radius:12px}.post-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}.reaction-chip{display:inline-flex;align-items:center;gap:5px;background:#eee9df;border-radius:999px;padding:4px 8px}.reaction-chip img,.emoji-btn img{width:20px;height:20px;object-fit:contain}.reaction-chip .emoji-char{font-size:19px;line-height:1}.reaction-picker{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap;max-height:168px;overflow-y:auto;padding:6px;border-radius:12px;background:rgba(238,233,223,.55);scrollbar-gutter:stable}.emoji-btn{border:0;background:#eee9df;border-radius:10px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}.emoji-btn .emoji-char{font-size:24px;line-height:1}.emoji-shortcode{font-size:9px;line-height:1.1;overflow-wrap:anywhere}.emoji-btn:hover{transform:translateY(-1px)}
.sidebar{padding:20px}.sidebar h3{margin-top:0;font-size:24px}.side-stat{display:flex;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line)}.side-stat b{font-size:24px;color:var(--brown)}.side-stat span{color:var(--muted)}
.narrow{max-width:760px;margin:auto}.comments{padding:18px}.comments h2{margin-top:0}.comment-form{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:18px}.comment-form textarea{min-height:68px;resize:vertical}.comment{padding:13px 0;border-top:1px solid var(--line)}.comment .meta{margin-left:7px}.guest-gate{padding:14px;background:#eeeae3;border-radius:12px;margin-bottom:15px}
.auth-wrap{max-width:460px;margin:50px auto;padding:24px}.auth-wrap h1{margin-top:0}.stack{display:grid;gap:14px}.stack label{display:grid;gap:6px;font-size:13px}
.profile-head{padding:22px;display:flex;align-items:center;gap:14px;margin-bottom:16px}.profile-head h1{margin:0}.profile-head .btn{margin-left:auto}
.chat-shell{height:min(74vh,760px);min-height:520px;display:flex;flex-direction:column;overflow:hidden}.chat-title{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#698c6d;margin-right:8px}.messages-pane{flex:1;overflow:auto;padding:18px;background:linear-gradient(180deg,rgba(248,247,244,.8),rgba(233,229,221,.55))}.msg{max-width:78%;margin-bottom:12px}.msg.mine{margin-left:auto;text-align:right}.msg-name{font-size:11px;color:var(--muted);margin-bottom:3px}.bubble{display:inline-block;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid var(--line);text-align:left;line-height:1.5}.msg.mine .bubble{background:#dfe8df;border-color:#c8d6c9}.msg-time{font-size:10px;color:var(--muted);margin-top:3px}.chat-compose{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:12px;border-top:1px solid var(--line);background:#f8f7f4}.emoji-toggle{border:1px solid var(--line);background:#fff;border-radius:12px;width:44px;cursor:pointer}.emoji-panel{display:flex;gap:7px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--line);background:#f3efe7}.emoji-panel.hidden{display:none}.insert-emoji{width:38px;height:38px;border:0;border-radius:10px;background:#e8e2d7;display:grid;place-items:center;cursor:pointer}.insert-emoji img{width:26px;height:26px;object-fit:contain}
.dm-layout{display:grid;grid-template-columns:280px 1fr;gap:18px}.dm-users{height:min(74vh,760px);overflow:auto;padding:12px}.dm-users h3{padding:0 8px}.dm-users a{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px}.dm-users a:hover,.dm-users a.active{background:#e8e2d8}.dm-users small{display:block;color:var(--muted)}
.notice{padding:12px 14px;border-radius:14px;margin-bottom:14px}.notice.success{background:#dce7de;color:#3b6045}.notice.error{background:#ecdede;color:#854343}.empty{text-align:center;color:var(--muted);padding:30px}
.footer{width:min(1180px,calc(100% - 28px));margin:0 auto 24px;padding-top:18px;border-top:1px solid rgba(140,130,120,.25);display:flex;justify-content:space-between;gap:14px;font-size:12px}
.admin-shell{max-width:1280px}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{padding:18px}.stat b{display:block;font-size:30px;color:var(--gold)}.stat span{color:var(--muted)}.admin-section{padding:18px;margin-top:18px}.admin-section h2{margin-top:0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line);vertical-align:top}td small{display:block;color:var(--muted)}.actions{display:flex;gap:6px}.actions form{display:inline}.emoji-admin-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px}.emoji-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:14px}.emoji-admin-item{display:flex;align-items:center;gap:10px;padding:10px;background:#ece8e0;border-radius:14px}.emoji-admin-item img{width:42px;height:42px;object-fit:contain}.emoji-admin-item small{display:block;color:var(--muted)}.emoji-admin-item form{margin-left:auto}
@media(max-width:850px){.layout{grid-template-columns:1fr}.sidebar{display:none}.dm-layout{grid-template-columns:1fr}.dm-users{height:auto;display:flex;overflow:auto}.dm-users h3{display:none}.dm-users a{min-width:160px}.admin-stats{grid-template-columns:1fr 1fr}.emoji-admin-form{grid-template-columns:1fr}.topnav{gap:4px;overflow:auto}.topnav a{white-space:nowrap}.topbar{padding:10px 14px}}
@media(max-width:600px){.shell{width:min(100% - 16px,1180px);margin-top:10px}.topbar{align-items:flex-start}.brand span:last-child{display:none}.topnav{font-size:12px}.topnav a{padding:7px}.hero-mini{padding:18px;align-items:flex-start;flex-direction:column}.compose-row{grid-template-columns:1fr}.post-card{padding:12px;border-radius:16px}.card{border-radius:16px}.media-grid.count-2,.media-grid.count-3,.media-grid.count-4{grid-template-columns:1fr}.media-grid>a,.media-grid.count-1>a{height:min(62vh,520px)}.media-grid video{max-height:62vh}.comment-form{grid-template-columns:1fr}.profile-head{align-items:flex-start;flex-wrap:wrap}.profile-head .btn{margin-left:0;width:100%}.chat-shell{height:calc(100vh - 145px);min-height:480px}.msg{max-width:88%}.footer{flex-direction:column}.admin-stats{grid-template-columns:1fr 1fr}.compose-foot{align-items:flex-end}}


/* MyFam Unicode Emoji: force a color-emoji capable fallback font. */
.emoji-char,
.emoji-btn .emoji-char,
.reaction-chip .emoji-char,
.insert-emoji .emoji-char{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif !important;
  font-style:normal;
  font-weight:400;
  font-variant:normal;
  text-rendering:auto;
}


/* Legacy shortcode Emoji display fix */
.emoji-char{
  display:inline-block;
  min-width:1em;
  text-align:center;
  vertical-align:-0.08em;
}
.reaction-chip .emoji-char{font-size:20px}
.emoji-btn .emoji-char{font-size:25px}
.emoji-btn{
  overflow:hidden;
}


/* ===== MyFam Account / Profile / Password Reset ===== */
.stack textarea,
.stack select{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:12px;
  outline:none;
  font:inherit;
}
.stack textarea:focus,
.stack select:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(88,114,100,.10);
}
.stack textarea{min-height:96px;resize:vertical}
.field-help{font-size:12px;color:var(--muted);line-height:1.45}
.profile-photo{
  width:86px;
  height:86px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  flex:0 0 auto;
  border:3px solid rgba(176,138,69,.35);
  background:#e8e2d8;
  box-shadow:0 8px 24px rgba(63,55,45,.10);
}
.profile-photo.preview{
  width:110px;
  height:110px;
  margin-bottom:8px;
}
.profile-main{min-width:0;flex:1}
.profile-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.profile-private{
  padding:18px;
  margin-bottom:16px;
}
.profile-private h2,
.settings-card h2{margin:0 0 14px}
.profile-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.profile-info-item{
  padding:12px 14px;
  border:1px solid var(--line);
  background:#f4f1eb;
  border-radius:14px;
  min-width:0;
}
.profile-info-item b{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.profile-info-item span{overflow-wrap:anywhere}
.settings-wrap{max-width:820px;margin:auto;display:grid;gap:16px}
.settings-card{padding:20px}
.settings-divider{border:0;border-top:1px solid var(--line);margin:20px 0}
.auth-switch{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 18px;
}
.auth-switch a{
  padding:8px 11px;
  border-radius:11px;
  background:#eee9df;
  font-size:13px;
}
.auth-switch a.active{background:var(--text);color:#fff}
.reset-note{
  padding:12px 14px;
  background:#f3efe7;
  border:1px solid var(--line);
  border-radius:13px;
  font-size:13px;
  line-height:1.55;
}
.photo-input-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.photo-input-row .photo-meta{flex:1;min-width:220px}
.danger-note{
  background:#fff4d8;
  border:1px solid #ead7a5;
  border-radius:13px;
  padding:12px 14px;
  font-size:13px;
}
.setup-box{
  max-width:760px;
  margin:30px auto;
  padding:22px;
}
.setup-list{line-height:1.8}
@media(max-width:600px){
  .profile-info-grid{grid-template-columns:1fr}
  .profile-head{align-items:center}
  .profile-actions{width:100%;margin-left:0}
  .profile-actions .btn{flex:1}
  .profile-photo{width:76px;height:76px}
}
.post-author-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.post-author-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.post-author-avatar .avatar {
    width: 100%;
    height: 100%;
}