@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

  :root{
    --ink:#232B26; --slate:#5C6B62; --faint:#8A968E; --paper:#F2F3EF; --card:#FFFFFF;
    --border:#E1E4DD; --line:#EAECE5; --sage:#833D8C; --sageDark:#5E2C68; --gold:#B08A3E; --clay:#B3705A;
  }
  html[data-theme="dark"]{
    --ink:#EDEFEA; --slate:#B7C0BA; --faint:#828D85; --paper:#181A17; --card:#222620;
    --border:#343830; --line:#2B2F29; --sage:#A855B3; --sageDark:#C58ECF; --gold:#D4B364; --clay:#D0947A;
  }
  body, .card, .post-card, input, textarea{ transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
  *{ box-sizing:border-box; }
  html{ overscroll-behavior-y: none; }
  .app-shell{ display:flex; flex-direction:column; height:100vh; height:100dvh; }
  body{ margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',-apple-system,sans-serif; overscroll-behavior-y: none; height:100%; }
  h1,h2,h3,.display{ font-family:'Fraunces',Georgia,serif; }
  button{ font-family:inherit; }
  input,textarea{ font-family:inherit; }
  .btn{ font-weight:600; font-size:14px; padding:10px 18px; border-radius:8px; cursor:pointer; border:none; transition:transform .1s ease, opacity .1s ease, background-color .15s ease; }
  .btn:active, .footer-nav a:active, .footer-nav button:active, .dm-list-item:active, .friend-row button:active, .menu-row:active, .card button:active{ transform:scale(0.96); opacity:0.85; }
  a{ transition:color .15s ease; }
  .btn-primary{ background:var(--sage); color:#fff; }
  .btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--border); }
  .btn-ghost{ background:transparent; color:var(--slate); border:none; }
  .btn-danger{ background:transparent; color:var(--clay); border:1px solid rgba(179,112,90,0.35); }
  .btn-small{ font-size:13px; padding:6px 12px; }
  .btn:disabled{ opacity:.5; cursor:default; }
  .input{ width:100%; box-sizing:border-box; padding:10px 12px; border-radius:8px; border:1px solid var(--border); font-size:14px; outline:none; }
  .card{ background:var(--card); border:1px solid var(--border); border-radius:12px; }
  .avatar{ border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; flex-shrink:0; }
  .err{ color:var(--clay); font-size:12.5px; margin:6px 0; }
  .empty{ border:1px dashed var(--border); border-radius:12px; padding:34px 18px; text-align:center; color:var(--faint); font-size:13.5px; }
  a{ color:inherit; }
  ::placeholder{ color:var(--faint); }

  #app{ min-height:100vh; overscroll-behavior:none; }
  .center-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
  .auth-box{ width:100%; max-width:380px; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:28px; }
  .crest{ display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .crest img{ width:100%; height:100%; object-fit:contain; border-radius:8px; }

  .topbar{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--card); position:sticky; top:0; z-index:15; }
  .topbar-icons button, .topbar-icons a{ background:none; border:none; cursor:pointer; color:var(--ink); padding:5px; text-decoration:none; }
  .content{ padding-bottom:66px; -webkit-overflow-scrolling:touch; }
  .content.no-scroll{ overflow:hidden; padding:0 0 66px; box-sizing:border-box; }

  .footer-nav{ position:fixed; bottom:0; left:0; right:0; background:var(--card); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-around; padding:9px 0 11px; z-index:30; }
  .footer-nav button, .footer-nav a{ background:none; border:none; padding:6px; cursor:pointer; color:var(--faint); position:relative; text-decoration:none; display:flex; }
  .footer-nav button.active, .footer-nav a.active{ color:var(--sageDark); }
  .badge{ position:absolute; top:0; right:-2px; background:var(--clay); color:#fff; font-size:9.5px; font-weight:700; border-radius:8px; padding:1px 4px; }
  .msg-toast{ position:fixed; top:10px; left:10px; right:10px; z-index:100; max-width:420px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(35,43,38,0.18); padding:12px 14px; display:flex; align-items:center; gap:10px; cursor:pointer; animation:toastIn .25s ease-out; }
  @keyframes toastIn{ from{ transform:translateY(-14px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

  .feed-wrap, .friends-wrap, .profile-wrap{ max-width:560px; margin:0 auto; padding:22px 16px 20px; }
  .section-title{ font-size:22px; margin:0 0 18px; }

  .post-card{ background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:18px; overflow:hidden; }
  .post-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; }
  .post-media{ width:100%; max-height:70vh; background:var(--paper); display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .post-media img, .post-media video{ width:100%; height:auto; max-height:70vh; object-fit:contain; display:block; }
  .post-body{ padding:12px 14px; }
  .post-actions{ display:flex; align-items:center; gap:16px; margin-bottom:8px; }
  .icon-btn{ display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; color:var(--slate); font-size:13px; font-weight:500; }
  .comment-row{ font-size:13px; color:var(--slate); margin-bottom:6px; }
  .comment-row b{ color:var(--ink); }

  .friend-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
  .friend-meta{ flex:1; min-width:0; }


  .sheet-overlay{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; }
  .sheet-backdrop{ position:absolute; inset:0; background:rgba(20,22,19,0.4); }
  .sheet{ position:relative; width:100%; max-height:66vh; background:var(--card); border-radius:16px 16px 0 0; display:flex; flex-direction:column; }

  .modal-overlay{ position:fixed; inset:0; background:rgba(35,43,38,0.4); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
  .modal{ background:var(--card); border-radius:14px; padding:22px; width:100%; max-width:400px; }

  .dm-shell{ display:flex; height:100%; }
  .dm-list{ width:100%; max-width:260px; border-right:1px solid var(--border); flex-shrink:0; overflow-y:auto; }
  .dm-list-item{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 16px; background:transparent; border:none; cursor:pointer; text-align:left; }
  .dm-list-item.active{ background:var(--paper); }
  .dm-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .dm-header{ padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
  .dm-messages{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:8px; }
  .bubble{ padding:8px 13px; border-radius:14px; font-size:13.5px; max-width:70%; }
  .bubble.me{ align-self:flex-end; background:var(--sage); color:#fff; }
  .bubble.them{ align-self:flex-start; background:var(--card); color:var(--ink); border:1px solid var(--border); }
  .dm-input{ padding:14px; border-top:1px solid var(--border); display:flex; gap:8px; }

  .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .grid3 .cell{ position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:var(--paper); }
  .grid3 .cell img, .grid3 .cell video{ width:100%; height:100%; object-fit:cover; }
  .grid3 .cell button{ position:absolute; bottom:6px; right:6px; background:rgba(35,43,38,0.55); border:none; border-radius:6px; padding:5px; cursor:pointer; }

  @media (max-width:640px){ .dm-list{ max-width:120px; } }