:root{
    --bg:#F7FAFC; --surface:#FFFFFF; --surface-2:#EBF4FA;
    --text:#0A1F2E; --text-dim:#4A6B7C; --border:#D0E4F0;
    --accent:#0A61A6; --accent-ink:#084D85; --accent-soft:#E6F6FC;
    --like:#F43F5E; --like-soft:rgba(244,63,94,.10);
    --radius-xs:6px; --radius-sm:10px; --radius-md:12px; --radius-full:999px;
    /* مقیاس فاصله‌گذاری — هر مقداری که واقعاً توی طراحی استفاده شده، یه توکنه */
    --space-0:0px; --space-1:1px; --space-2:2px; --space-3:3px; --space-4:4px; --space-5:5px; --space-6:6px; --space-7:7px; --space-8:8px; --space-9:9px; --space-10:10px; --space-11:11px; --space-12:12px; --space-13:13px; --space-14:14px; --space-16:16px; --space-18:18px; --space-20:20px; --space-22:22px; --space-24:24px; --space-26:26px; --space-28:28px; --space-30:30px; --space-40:40px; --space-44:44px;
    /* مقیاس سایز فونت */
    --fs-11:11px; --fs-11-5:11.5px; --fs-12:12px; --fs-12-5:12.5px; --fs-13:13px; --fs-13-5:13.5px; --fs-14:14px; --fs-14-5:14.5px; --fs-15:15px; --fs-15-5:15.5px; --fs-16:16px; --fs-17:17px; --fs-19:19px; --fs-20:20px; --fs-28:28px; --fs-32:32px; --fs-34:34px;
    --shadow:0 1px 3px rgba(10,97,166,.08); --shadow-lg:0 8px 24px rgba(10,97,166,.14);
    color-scheme: light;
  }
  :root[data-theme="dark"], :root:not([data-theme="light"]):not([data-theme="dark"]) { }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0B1420; --surface:#122536; --surface-2:#1A3348;
      --text:#F0F7FC; --text-dim:#A8C8DC; --border:#1E3A50;
      --accent:#0DA6DF; --accent-ink:#3BB8E8; --accent-soft:#0F2A3D;
      --like:#F43F5E; --like-soft:rgba(244,63,94,.18);
      --shadow:0 1px 3px rgba(0,0,0,.3); --shadow-lg:0 8px 24px rgba(0,0,0,.4);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0B1420; --surface:#122536; --surface-2:#1A3348;
    --text:#F0F7FC; --text-dim:#A8C8DC; --border:#1E3A50;
    --accent:#0DA6DF; --accent-ink:#3BB8E8; --accent-soft:#0F2A3D;
    --like:#F43F5E; --like-soft:rgba(244,63,94,.18);
    --shadow:0 1px 3px rgba(0,0,0,.3); --shadow-lg:0 8px 24px rgba(0,0,0,.4);
    color-scheme: dark;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{overscroll-behavior-y:none; scroll-padding-top:env(safe-area-inset-top, 0px);}
  body{
    background:var(--bg); color:var(--text);
    font-family:'Vazirmatn', Tahoma, sans-serif;
    min-height:100vh;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit;}

  .app{
    max-width:1080px; margin:0 auto;
    display:grid;
    grid-template-columns: 76px minmax(0,600px) 300px;
    min-height:100vh;
  }
  @media (max-width:900px){
    .app{grid-template-columns: 68px minmax(0,1fr);}
    .app .col-right{display:none;}
  }
  @media (max-width:640px){
    .app{grid-template-columns: 1fr; padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px));}
    .app .col-left{display:none;}
  }

  /* ---- right nav (RTL: first column visually on the right) ---- */
  .col-left{
    border-inline-start:1px solid var(--border);
    position:sticky; top:0; height:100vh;
    display:flex; flex-direction:column; align-items:center;
    padding-top:18px; gap:var(--space-6);
  }
  .brand{
    width:40px; height:40px; border-radius:var(--radius-sm);
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:var(--fs-17); margin-bottom:var(--space-14);
  }
  .nav-btn{
    width:48px; height:48px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--text); border:none; background:transparent; cursor:pointer;
    font-size:var(--fs-20);
  }
  .nav-btn.active{background:var(--accent-soft); color:var(--accent-ink);}
  .nav-btn:hover{background:var(--surface-2);}
  .theme-toggle{
    margin-top:auto; margin-bottom:var(--space-18);
    width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
    background:var(--surface); color:var(--text); cursor:pointer; font-size:var(--fs-16);
  }

  /* ---- center column ---- */
  .col-main{border-inline-start:1px solid var(--border); border-inline-end:1px solid var(--border); min-width:0;}
  .topbar{
    position:sticky; top:0; z-index:5;
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(10px);
    padding:calc(var(--space-14) + env(safe-area-inset-top, var(--space-0))) var(--space-18) var(--space-14); border-bottom:1px solid var(--border);
  }
  .topbar h1{margin:0; font-size:var(--fs-17); font-weight:700;}
  .topbar .sub{margin:var(--space-2) 0 0; font-size:var(--fs-12-5); color:var(--text-dim);}

  .composer{
    display:flex; gap:var(--space-12); padding:var(--space-16) var(--space-18); border-bottom:1px solid var(--border);
  }
  .avatar{width:44px; height:44px; border-radius:50%; background:var(--surface-2); flex:none;
    display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--text-dim); overflow:hidden;}
  .composer textarea{
    flex:1; resize:none; border:none; background:transparent; color:var(--text);
    font-family:inherit; font-size:var(--fs-16); line-height:1.6; min-height:26px; outline:none;
  }
  .composer textarea::placeholder{color:var(--text-dim);}
  .composer-foot{display:flex; justify-content:flex-end; margin-top:var(--space-8);}
  .btn-primary{
    background:var(--accent); color:#fff; border:none; border-radius:var(--radius-full);
    padding:var(--space-8) var(--space-20); font-weight:700; font-size:var(--fs-14); cursor:pointer;
  }
  .btn-primary:hover{filter:brightness(1.06);}

  .post{
    display:flex; gap:var(--space-12); padding:var(--space-14) var(--space-18); border-bottom:1px solid var(--border);
    cursor:pointer;
  }
  .post:hover{background:var(--surface-2);}
  .post .avatar{width:44px;height:44px;font-size:var(--fs-16);}
  .post-body{flex:1; min-width:0;}
  .post-head{display:flex; align-items:baseline; gap:var(--space-6); flex-wrap:wrap; font-size:var(--fs-14-5);}
  .post-head .name{font-weight:700;}
  .post-head .handle, .post-head .dot, .post-head .time{color:var(--text-dim); font-size:var(--fs-13-5);}
  .post-text{margin:var(--space-4) 0 0; font-size:var(--fs-15-5); line-height:1.85; white-space:pre-wrap;}
  .orig-toggle{
    display:inline-flex; align-items:center; gap:var(--space-5); margin-top:var(--space-8);
    background:none; border:1px solid var(--border); color:var(--accent-ink);
    border-radius:var(--radius-full); padding:var(--space-4) var(--space-12); font-size:var(--fs-12-5); cursor:pointer;
  }
  .orig-toggle:hover{background:var(--accent-soft);}
  .orig-box{
    margin-top:var(--space-8); padding:var(--space-10) var(--space-12); border-radius:var(--radius-sm);
    background:var(--surface-2); border:1px solid var(--border);
    font-size:var(--fs-14); line-height:1.7; color:var(--text-dim); direction:ltr; text-align:left;
    display:none;
  }
  .orig-box.open{display:block;}
  .post-actions{display:flex; align-items:center; gap:var(--space-28); margin-top:var(--space-12); color:var(--text-dim);}
  .act{
    display:flex; align-items:center; gap:var(--space-6); background:none; border:none;
    color:inherit; font-size:var(--fs-13-5); cursor:pointer; padding:var(--space-4) var(--space-8); border-radius:var(--radius-full);
    transition:background .15s, color .15s;
  }
  .act:hover{color:var(--accent-ink); background:var(--accent-soft);}
  .act.like:hover{color:var(--like); background:var(--like-soft);}
  .act .n{font-variant-numeric: tabular-nums;}
  .act.liked{color:var(--like);}
  .act svg{width:18px; height:18px; flex:none;}
  .nav-btn svg, .bottom-nav button svg, .theme-toggle svg, .back-btn svg{
    width:22px; height:22px; display:block;
  }
  .back-btn{display:inline-flex; align-items:center; justify-content:center;}
  .icon-btn{display:inline-flex; align-items:center; justify-content:center;}
  .more-btn{
    background:none; border:none; color:var(--text-dim); cursor:pointer;
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    margin-inline-start:auto; flex:none;
  }
  .more-btn:hover{background:var(--surface-2);}
  .more-btn svg{width:18px; height:18px;}
  .more-menu{position:relative;}
  .more-pop{
    position:absolute; top:34px; inset-inline-end:0; z-index:20;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
    box-shadow:var(--shadow-lg); padding:var(--space-6); min-width:190px; display:none;
  }
  .more-pop.open{display:block;}
  .more-pop button{
    display:flex; align-items:center; gap:var(--space-8); width:100%; text-align:start; background:none; border:none;
    color:var(--text); padding:var(--space-9) var(--space-10); border-radius:var(--radius-xs); font-size:var(--fs-13-5); cursor:pointer;
  }
  .more-pop button:hover{background:var(--surface-2);}
  .more-pop button.danger{color:var(--like);}
  .more-pop svg{width:16px; height:16px; flex:none;}

  .share-menu{
    position:relative;
  }
  .share-pop{
    position:absolute; bottom:32px; inset-inline-end:0; z-index:20;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
    box-shadow:var(--shadow-lg); padding:var(--space-6); min-width:170px;
    display:none;
  }
  .share-pop.open{display:block;}
  .share-pop button{
    display:flex; width:100%; text-align:start; background:none; border:none;
    color:var(--text); padding:var(--space-9) var(--space-10); border-radius:var(--radius-xs); font-size:var(--fs-13-5); cursor:pointer;
  }
  .share-pop button:hover{background:var(--surface-2);}

  /* ---- right sidebar widgets ---- */
  .col-right{padding:var(--space-16); position:sticky; top:0; height:100vh; overflow:auto;}
  .widget{background:var(--surface-2); border-radius:var(--radius-md); padding:var(--space-14); margin-bottom:var(--space-16);}
  .widget h3{margin:0 0 var(--space-10); font-size:var(--fs-15-5);}
  .trend{padding:var(--space-8) 0; font-size:var(--fs-13-5); border-top:1px solid var(--border);}
  .trend:first-of-type{border-top:none;}
  .trend .tag{font-weight:700; display:block;}
  .trend .meta{color:var(--text-dim); font-size:var(--fs-12);}

  /* ---- mobile bottom nav ---- */
  .bottom-nav{
    display:none;
  }
  @media (max-width:640px){
    .bottom-nav{
      display:flex; align-items:stretch; position:fixed; bottom:0; inset-inline:0;
      height:calc(54px + env(safe-area-inset-bottom, 0px));
      padding-bottom:env(safe-area-inset-bottom, 0px);
      background:color-mix(in srgb, var(--surface) 94%, transparent);
      backdrop-filter:blur(14px);
      border-top:1px solid var(--border);
      z-index:30;
    }
    .bottom-nav button{
      flex:1; background:none; border:none; color:var(--text-dim);
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
      font-family:inherit; font-size:var(--fs-11); font-weight:500; position:relative;
      -webkit-tap-highlight-color:transparent;
    }
    .bottom-nav button svg{width:23px; height:23px;}
    .bottom-nav button.active{color:var(--accent);}
    .bottom-nav button:active{opacity:.55;}
  }

  /* ---- profile view ---- */
  .cover{height:140px; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-ink) 100%);}
  .profile-head{padding:0 var(--space-18) var(--space-14); border-bottom:1px solid var(--border);}
  .profile-avatar{
    width:88px; height:88px; border-radius:50%; background:var(--surface-2);
    border:4px solid var(--surface); margin-top:calc(var(--space-44) * -1);
    display:flex; align-items:center; justify-content:center; font-size:var(--fs-32); font-weight:700; color:var(--text-dim);
  }
  .profile-name{font-size:var(--fs-19); font-weight:800; margin:var(--space-10) 0 0;}
  .profile-handle{color:var(--text-dim); font-size:var(--fs-14); margin:var(--space-2) 0 var(--space-8);}
  .profile-bio{font-size:var(--fs-14-5); line-height:1.8; margin:0 0 var(--space-10);}
  .profile-stats{display:flex; gap:var(--space-18); font-size:var(--fs-13-5); color:var(--text-dim); margin-bottom:var(--space-12);}
  .profile-stats b{color:var(--text);}
  .follow-btn{
    background:var(--text); color:var(--bg); border:none; border-radius:var(--radius-full);
    padding:var(--space-8) var(--space-22); font-weight:700; font-size:var(--fs-13-5); cursor:pointer; margin-bottom:var(--space-12);
  }
  .tabs{display:flex; border-bottom:1px solid var(--border);}
  .tab{
    flex:1; text-align:center; padding:var(--space-13) 0; font-size:var(--fs-14); font-weight:600;
    color:var(--text-dim); border-bottom:3px solid transparent; cursor:pointer; background:none; border-top:none; border-inline:none;
  }
  .tab.active{color:var(--text); border-bottom-color:var(--accent);}

  /* ---- single post view ---- */
  .back-row{display:flex; align-items:center; gap:var(--space-16); padding:var(--space-12) var(--space-18); border-bottom:1px solid var(--border);}
  .back-btn{background:none; border:none; font-size:var(--fs-19); color:var(--text); cursor:pointer; border-radius:50%; width:36px; height:36px;}
  .back-btn:hover{background:var(--surface-2);}
  .post-detail .post-text{font-size:var(--fs-19); line-height:1.9;}
  .post-detail-meta{padding:var(--space-10) var(--space-18); color:var(--text-dim); font-size:var(--fs-13); border-bottom:1px solid var(--border);}
  .post-detail-actions{display:flex; gap:var(--space-30); padding:var(--space-12) var(--space-18); border-bottom:1px solid var(--border); color:var(--text-dim);}
  .reply{display:flex; gap:var(--space-12); padding:var(--space-14) var(--space-18); border-bottom:1px solid var(--border);}

  .view{display:none;}
  .view.active{display:block;}

  .auth-wrap{padding:var(--space-24) var(--space-18); max-width:380px; margin:0 auto;}
  .auth-tabs{display:flex; border:1px solid var(--border); border-radius:var(--radius-full); padding:var(--space-4); margin-bottom:var(--space-22);}
  .auth-tab{
    flex:1; background:none; border:none; border-radius:var(--radius-full); padding:var(--space-9) 0;
    font-size:var(--fs-14); font-weight:600; color:var(--text-dim); cursor:pointer;
  }
  .auth-tab.active{background:var(--accent); color:#fff;}
  .auth-form{display:none; flex-direction:column; gap:var(--space-16);}
  .auth-form.active{display:flex;}
  .auth-form label{font-size:var(--fs-13-5); color:var(--text-dim); display:flex; flex-direction:column; gap:var(--space-6);}
  .auth-form input{
    font-family:inherit; font-size:var(--fs-15); padding:var(--space-11) var(--space-13); border-radius:var(--radius-sm);
    border:1px solid var(--border); background:var(--surface-2); color:var(--text); outline:none;
  }
  .auth-form input:focus{border-color:var(--accent);}
  .auth-submit{width:100%; padding:var(--space-11) 0; font-size:var(--fs-15); margin-top:var(--space-4);}
  .auth-hint{font-size:var(--fs-13); color:var(--text-dim); text-align:center; margin:var(--space-2) 0 0;}
  .auth-hint a{color:var(--accent-ink); font-weight:600;}
  .comment-composer{border-bottom:1px solid var(--border);}

  body:not(.logged-in) .auth-gated{display:none;}
  body.logged-in .guest-only{display:none;}

  .guest-preview{margin-top:var(--space-26); text-align:center;}
  .divider-line{display:block; height:1px; background:var(--border); margin-bottom:var(--space-18);}
  .guest-link{
    background:none; border:none; color:var(--text-dim); font-family:inherit;
    font-size:var(--fs-13); text-decoration:underline; cursor:pointer;
  }
  .guest-link:hover{color:var(--accent-ink);}

  .guest-cta{
    display:none; align-items:center; justify-content:space-between; gap:var(--space-12);
    margin:var(--space-12) var(--space-18); padding:var(--space-14) var(--space-16); border-radius:var(--radius-md);
    background:var(--accent-soft); border:1px solid var(--border);
  }
  .guest-cta p{margin:0; font-size:var(--fs-13-5); color:var(--text);}
  .guest-cta button{
    background:var(--accent); color:#fff; border:none; border-radius:var(--radius-full);
    padding:var(--space-8) var(--space-18); font-size:var(--fs-13); font-weight:700; cursor:pointer; flex:none;
  }
  #view-post.guest .post-detail-actions,
  #view-post.guest .comment-composer{display:none;}
  #view-post.guest .guest-cta{display:flex;}
  #view-post.guest .back-btn{display:none;}

  .settings-section{padding:var(--space-14) var(--space-18) var(--space-6); font-size:var(--fs-13); color:var(--text-dim);}
  .blocked-row{
    display:flex; align-items:center; gap:var(--space-12); padding:var(--space-12) var(--space-18); border-bottom:1px solid var(--border);
  }
  .blocked-row .avatar{width:40px; height:40px; font-size:var(--fs-15); flex:none;}
  .blocked-row .info{flex:1; min-width:0;}
  .blocked-row .info .name{font-weight:700; font-size:var(--fs-14);}
  .blocked-row .info .handle{color:var(--text-dim); font-size:var(--fs-12-5);}
  .unblock-btn{
    background:none; border:1px solid var(--border); color:var(--text);
    border-radius:var(--radius-full); padding:var(--space-6) var(--space-16); font-size:var(--fs-12-5); cursor:pointer; flex:none;
  }
  .unblock-btn:hover{background:var(--surface-2);}
  .blocked-banner{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-12);
    margin:var(--space-14) var(--space-18); padding:var(--space-14) var(--space-16); border-radius:var(--radius-md);
    background:var(--like-soft); border:1px solid var(--border);
  }
  .blocked-banner p{margin:0; font-size:var(--fs-13-5); color:var(--text);}
  .blocked-banner button{
    background:var(--text); color:var(--bg); border:none; border-radius:var(--radius-full);
    padding:var(--space-7) var(--space-16); font-size:var(--fs-12-5); font-weight:700; cursor:pointer; flex:none;
  }

  body:not(.is-admin) .admin-only{display:none;}

  .modal-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:90;
    display:none; align-items:center; justify-content:center; padding:var(--space-20);
  }
  .modal-overlay.open{display:flex;}
  .modal-box{
    background:var(--surface); border-radius:var(--radius-md); padding:var(--space-20);
    width:100%; max-width:420px; max-height:85vh; overflow:auto;
  }
  .modal-box h3{margin:0 0 var(--space-14); font-size:var(--fs-16);}
  .modal-box select, .modal-box textarea{
    width:100%; font-family:inherit; font-size:var(--fs-14); padding:var(--space-10) var(--space-12);
    border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2);
    color:var(--text); margin-bottom:var(--space-12); resize:vertical;
  }
  .modal-actions{display:flex; justify-content:flex-end; gap:var(--space-8);}
  .modal-actions button{border-radius:var(--radius-full); padding:var(--space-8) var(--space-18); font-size:var(--fs-13-5); cursor:pointer; border:none; font-family:inherit;}
  .modal-actions .cancel-btn{background:var(--surface-2); color:var(--text);}
  .modal-actions .submit-btn{background:var(--like); color:#fff; font-weight:700;}

  .admin-filter{display:flex; gap:var(--space-6); padding:var(--space-12) var(--space-18); flex-wrap:wrap;}
  .admin-filter button{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
    border-radius:var(--radius-full); padding:var(--space-6) var(--space-14); font-size:var(--fs-12-5); cursor:pointer; font-family:inherit;
  }
  .admin-filter button.active{background:var(--accent); color:#fff; border-color:var(--accent);}
  .report-card{padding:var(--space-14) var(--space-18); border-bottom:1px solid var(--border);}
  .report-card .report-meta{font-size:var(--fs-12); color:var(--text-dim); margin-bottom:var(--space-6);}
  .report-card .report-reason{
    display:inline-block; background:var(--like-soft); color:var(--like);
    border-radius:var(--radius-xs); padding:var(--space-2) var(--space-8); font-size:var(--fs-11-5); font-weight:700; margin-inline-end:var(--space-6);
  }
  .report-card .report-comment{font-size:var(--fs-13-5); margin:var(--space-6) 0; line-height:1.7;}
  .report-card .report-post{
    background:var(--surface-2); border-radius:var(--radius-sm); padding:var(--space-10) var(--space-12); margin:var(--space-8) 0; font-size:var(--fs-13);
    color:var(--text-dim); line-height:1.7;
  }
  .report-actions{display:flex; gap:var(--space-8); margin-top:var(--space-8);}
  .report-actions button{
    border-radius:var(--radius-full); padding:var(--space-6) var(--space-14); font-size:var(--fs-12-5); cursor:pointer; border:none; font-family:inherit;
  }
  .report-actions .dismiss-btn{background:var(--surface-2); color:var(--text);}
  .report-actions .hide-btn{background:var(--like); color:#fff; font-weight:700;}
  .report-card.resolved{opacity:.55;}

  .admin-search{padding:var(--space-12) var(--space-18);}
  .admin-search input{
    width:100%; font-family:inherit; font-size:var(--fs-14); padding:var(--space-10) var(--space-14);
    border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  }
  .user-row{
    display:flex; align-items:center; gap:var(--space-12); padding:var(--space-12) var(--space-18); border-bottom:1px solid var(--border); flex-wrap:wrap;
  }
  .user-row .avatar{width:40px; height:40px; font-size:var(--fs-15); flex:none;}
  .user-row .info{flex:1; min-width:160px;}
  .user-row .info .name{font-weight:700; font-size:var(--fs-14); display:flex; align-items:center; gap:var(--space-6);}
  .user-row .info .handle{color:var(--text-dim); font-size:var(--fs-12-5);}
  .user-row .info .email{color:var(--text-dim); font-size:var(--fs-11-5);}
  .role-badge{
    font-size:var(--fs-11); font-weight:700; border-radius:var(--radius-xs); padding:var(--space-2) var(--space-8);
    background:var(--accent-soft); color:var(--accent-ink);
  }
  .status-badge{
    font-size:var(--fs-11); font-weight:700; border-radius:var(--radius-xs); padding:var(--space-2) var(--space-8);
    background:var(--like-soft); color:var(--like);
  }
  .user-actions{display:flex; gap:var(--space-6); flex:none;}
  .user-actions button{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    border-radius:var(--radius-full); padding:var(--space-6) var(--space-12); font-size:var(--fs-12); cursor:pointer; font-family:inherit;
  }
  .user-actions button:hover{background:var(--accent-soft);}
  .user-actions button:disabled{opacity:.4; cursor:not-allowed;}

  .feed-tabs{
    display:flex; gap:var(--space-6); padding:var(--space-10) var(--space-18); overflow-x:auto;
    border-bottom:1px solid var(--border); scrollbar-width:none;
  }
  .feed-tabs::-webkit-scrollbar{display:none;}
  .feed-tab{
    background:none; border:none; color:var(--text-dim); font-family:inherit;
    font-size:var(--fs-13-5); padding:var(--space-6) var(--space-14); border-radius:var(--radius-full); cursor:pointer;
    white-space:nowrap; flex:none;
  }
  .feed-tab:hover{background:var(--surface-2);}
  .feed-tab.active{background:var(--accent); color:#fff; font-weight:700;}
  .feed-tab-add{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; cursor:pointer; flex:none; font-size:var(--fs-17); font-family:inherit; line-height:1;
  }
  .list-picker-row{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-10);
    padding:var(--space-10) 0; border-bottom:1px solid var(--border);
  }
  .list-picker-row:last-child{border-bottom:none;}
  .list-picker-row .list-name{font-size:var(--fs-14); cursor:pointer;}
  .list-picker-row .list-name:hover{color:var(--accent-ink);}
  .list-picker-row-actions{display:flex; gap:var(--space-6); flex:none;}
  .list-picker-row-actions button{
    border-radius:var(--radius-full); padding:var(--space-5) var(--space-12); font-size:var(--fs-12); cursor:pointer; border:none; font-family:inherit;
  }
  .subscribe-btn{background:var(--accent); color:#fff;}
  .unsubscribe-btn{background:var(--surface-2); border:1px solid var(--border); color:var(--text);}

  .member-row{
    display:flex; align-items:center; gap:var(--space-10); padding:var(--space-10) 0; border-bottom:1px solid var(--border);
  }
  .member-row:last-child{border-bottom:none;}
  .member-row .avatar{width:38px; height:38px; font-size:var(--fs-14); flex:none; cursor:pointer;}
  .member-row .info{flex:1; min-width:0; cursor:pointer;}
  .member-row .info .name{font-size:var(--fs-13-5); font-weight:700;}
  .member-row .info .handle{font-size:var(--fs-12); color:var(--text-dim);}
  .follow-btn-sm{
    border-radius:var(--radius-full); padding:var(--space-6) var(--space-14); font-size:var(--fs-12); cursor:pointer; border:none; font-family:inherit; flex:none;
  }
  .follow-btn-sm.follow{background:var(--accent); color:#fff;}
  .follow-btn-sm.unfollow{background:var(--surface-2); border:1px solid var(--border); color:var(--text);}

  .suggestion-card{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-10);
    padding:var(--space-14) var(--space-18); border-bottom:1px solid var(--border); cursor:pointer;
  }
  .suggestion-card:hover{background:var(--surface-2);}
  .suggestion-card .handle{font-weight:700; font-size:var(--fs-14);}
  .suggestion-card .meta{font-size:var(--fs-12); color:var(--text-dim); margin-top:var(--space-2);}
  .suggestion-count-badge{
    background:var(--accent-soft); color:var(--accent-ink); font-weight:700;
    font-size:var(--fs-12); border-radius:var(--radius-full); padding:var(--space-3) var(--space-10); flex:none;
  }
  .suggestion-detail-item{
    border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-10) var(--space-12); margin-bottom:var(--space-10); font-size:var(--fs-13);
  }
  .suggestion-detail-item .who{font-weight:700; margin-bottom:var(--space-4);}
  .suggestion-detail-item .list-name{color:var(--text-dim); font-size:var(--fs-12); margin-bottom:var(--space-4);}
  .profile-link{
    display:inline-block; color:var(--accent-ink); font-size:var(--fs-13); margin-bottom:var(--space-14); text-decoration:underline;
  }

  .my-list-row{
    display:flex; align-items:center; gap:var(--space-10); padding:var(--space-10) var(--space-18); border-bottom:1px solid var(--border);
  }
  .my-list-row .list-name{flex:1; font-size:var(--fs-14);}
  .my-list-row-actions{display:flex; gap:var(--space-4); flex:none;}
  .my-list-row-actions button{
    background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    width:28px; height:28px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .my-list-row-actions button:disabled{opacity:.3; cursor:not-allowed;}
  .my-list-row-actions svg{width:14px; height:14px;}

  .badge-lang{
    font-size:var(--fs-11); background:var(--surface-2); color:var(--text-dim);
    border-radius:var(--radius-xs); padding:var(--space-1) var(--space-6); margin-inline-start:var(--space-2);
  }

  /* ---- extra bits for the API-wired views ---- */
  .empty-state{padding:var(--space-40) var(--space-18); text-align:center; color:var(--text-dim); font-size:var(--fs-14);}
  .spinner-row{padding:var(--space-24); text-align:center; color:var(--text-dim); font-size:var(--fs-13);}
  .comment-item{display:flex; gap:var(--space-10); padding:var(--space-12) var(--space-18); border-bottom:1px solid var(--border);}
  .comment-item .post-text{font-size:var(--fs-14-5); margin-top:var(--space-2);}
  .load-more{display:block; width:calc(100% - 36px); margin:var(--space-14) var(--space-18); padding:var(--space-10) 0;
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
    color:var(--text); font-family:inherit; font-size:var(--fs-13-5); cursor:pointer;}
  .load-more:hover{background:var(--accent-soft);}
  .account-card{padding:var(--space-24) var(--space-18);}
  .account-row{display:flex; align-items:center; gap:var(--space-14); margin-bottom:var(--space-18);}
  .account-row .avatar{width:56px; height:56px; font-size:var(--fs-20);}
  .account-row .name{font-size:var(--fs-17); font-weight:700;}
  .account-row .handle{color:var(--text-dim); font-size:var(--fs-13-5);}
  .form-error{color:var(--like); font-size:var(--fs-12-5); margin:calc(var(--space-8) * -1) 0 0;}
  .toast{
    position:fixed; bottom:76px; left:50%; transform:translateX(-50%);
    background:var(--text); color:var(--bg); padding:var(--space-9) var(--space-18); border-radius:var(--radius-full);
    font-size:var(--fs-13); opacity:0; pointer-events:none; transition:opacity .2s;
    z-index:50;
  }
  .toast.show{opacity:1;}
  @media (min-width:641px){ .toast{ bottom:24px; } }

  /* ---- avatars with real images ---- */
  .avatar{position:relative; overflow:hidden;}
  .avatar img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; border-radius:inherit;
  }

  /* ---- media gallery (images/video attached to a post) ---- */
  .media-grid{
    display:grid; gap:var(--space-3); margin-top:var(--space-10); border-radius:var(--radius-md); overflow:hidden;
    border:1px solid var(--border);
  }
  .media-grid.count-1{grid-template-columns:1fr;}
  .media-grid.count-2{grid-template-columns:1fr 1fr;}
  .media-grid.count-3{grid-template-columns:1fr 1fr;}
  .media-grid.count-3 .media-item:first-child{grid-row:span 2;}
  .media-grid.count-4{grid-template-columns:1fr 1fr;}
  .media-item{position:relative; background:var(--surface-2); aspect-ratio:1/1; cursor:pointer;}
  .media-grid.count-1 .media-item{aspect-ratio:16/10;}
  .media-item img, .media-item video{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .media-item .play-badge{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-34); color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5); pointer-events:none;
  }
  .lightbox{
    position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:100;
    display:none; align-items:center; justify-content:center; padding:var(--space-24);
  }
  .lightbox.open{display:flex;}
  .lightbox img, .lightbox video{max-width:100%; max-height:100%; border-radius:var(--radius-sm);}
  .lightbox-close{
    position:absolute; top:18px; inset-inline-end:18px; background:none; border:none;
    color:#fff; font-size:var(--fs-28); cursor:pointer; line-height:1;
  }