:root{
  --bg:#fbf5ea;
  --paper:#fffaf1;
  --ink:#1f1b16;
  --muted:#6e6256;
  --line:rgba(31,27,22,.10);
  --shadow: 0 14px 40px rgba(31,27,22,.12);
  --shadow2: 0 8px 24px rgba(31,27,22,.10);
  --radius: 22px;
  --accent:#c77b4a;
  --accent2:#d79063;
  --danger:#c0392b;
  --ok:#1e7c3a;
  --focus: rgba(199,123,74,.20);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 12% 0%, #fff3da 0%, transparent 60%),
    radial-gradient(900px 600px at 88% 0%, #fff0e6 0%, transparent 60%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
audio{width:100%}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(7px);
}
.cardlite{
  background:rgba(255,255,255,.58);
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.tiny{font-size:.85rem}
.row{display:flex;gap:12px;align-items:center}
.spacer{flex:1}
.hr{height:1px;background:var(--line);margin:14px 0}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;}
.brandleft{display:flex;align-items:center;gap:12px}
.brandlogo{width:40px;height:40px;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow2);background:var(--paper);}
.brandlogo img{width:100%;height:100%;object-fit:cover}
.brandname{font-weight:900;letter-spacing:.2px;font-size:1.05rem}
.badge{padding:.35rem .6rem;border-radius:999px;border:1px solid rgba(199,123,74,.22);background:rgba(199,123,74,.10);color:rgba(99,64,40,.95);font-weight:800;}
.verified{display:inline-flex;align-items:center;gap:6px;padding:.22rem .55rem;border-radius:999px;border:1px solid rgba(30,124,58,.22);background:rgba(30,124,58,.10);color:rgba(16,86,38,.95);font-weight:950;font-size:.82rem;}
.verified::before{content:"✓";font-weight:1100}
.btn{appearance:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.72rem 1rem;font-weight:850;cursor:pointer;transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;}
.btn:hover{transform: translateY(-1px)} .btn:active{transform: translateY(0px)} .btn:disabled{opacity:.65;cursor:not-allowed;transform:none}
.btn.primary{background: linear-gradient(180deg, var(--accent2), var(--accent));color:#fff;border-color: rgba(0,0,0,.05);}
.btn.ghost{background:transparent}
.btn.danger{background: linear-gradient(180deg, #e05a4f, var(--danger)); color:#fff;border-color: rgba(0,0,0,.05)}
.btn.tiny{padding:.42rem .72rem;font-size:.9rem}
.btn.soft{background:rgba(255,255,255,.55)}
.input,.textarea{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:16px;padding:.85rem 1rem;outline:none;color:var(--ink);}
.textarea{min-height:110px;border-radius:18px;resize:vertical;line-height:1.35}
.input:focus,.textarea:focus{border-color: rgba(199,123,74,.55);box-shadow: 0 0 0 4px var(--focus);}
.label{display:flex;flex-direction:column;gap:.45rem;font-weight:800}
.msg{margin-top:10px;font-weight:850}
.msg.ok{color:var(--ok)} .msg.err{color:var(--danger)}
.shell{max-width:1200px;margin:0 auto;padding:18px 16px 86px;display:grid;gap:14px;grid-template-columns:300px 1fr;grid-template-rows:auto 1fr;}
.sidebar{grid-row:1 / span 2;padding:14px;position:sticky;top:14px;height:calc(100vh - 28px);display:flex;flex-direction:column}
.nav{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.nav a{padding:.75rem .9rem;border-radius:16px;border:1px solid transparent;color:var(--muted);font-weight:900;}
.nav a.active{color:var(--ink);background:linear-gradient(180deg, rgba(215,144,99,.22), rgba(199,123,74,.10));border-color: rgba(199,123,74,.18);}
.profilechip{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;}
.avatar{width:42px;height:42px;border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.06);background: radial-gradient(circle at 30% 30%, #ffe2c9, #f2c7a0);display:grid;place-items:center;font-weight:900;}
.avatar img{width:100%;height:100%;object-fit:cover}
.topbar{grid-column:2}
.topbarinner{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.58);backdrop-filter: blur(7px);}
.title{font-weight:1000;font-size:1.05rem}
.main{grid-column:2;display:flex;flex-direction:column;gap:14px}
.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
@media (max-width: 980px){.shell{grid-template-columns:1fr}.sidebar{display:none}.topbar{grid-column:1}.main{grid-column:1}.grid2{grid-template-columns:1fr}}
.bottomnav{display:none;}
@media (max-width: 980px){.bottomnav{display:flex;position:fixed;left:16px;right:16px;bottom:14px;padding:10px;justify-content:space-around;gap:6px;border-radius:999px;}
.bottomnav a,.bottomnav button{width:72px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid transparent;font-weight:950;color:var(--muted);background:transparent;}
.bottomnav a.active{color:var(--ink);background:linear-gradient(180deg, rgba(215,144,99,.22), rgba(199,123,74,.10));border-color: rgba(199,123,74,.18);}}
.composer{padding:14px}
.composerhead{display:flex;gap:12px;align-items:center}
.composeractions{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.filebox{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filebox input[type="file"]{display:none}
.filepill{padding:.55rem .85rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.55);font-weight:900;cursor:pointer;}
.preview{margin-top:10px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.55);}
.preview img,.preview video{width:100%;max-height:420px;object-fit:cover}
.toolbar{padding:10px 12px}
.toolbarinner{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{padding:.55rem .85rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.45);font-weight:950;cursor:pointer;user-select:none;}
.pill.active{background:linear-gradient(180deg, rgba(215,144,99,.22), rgba(199,123,74,.10));border-color: rgba(199,123,74,.35)}
.search{display:flex;gap:8px;align-items:center}
.search .input{min-width:220px}
@media (max-width: 520px){ .search .input{min-width:160px}}
.feed{display:flex;flex-direction:column;gap:12px}
.post{padding:14px;overflow:hidden}
.posthead{display:flex;gap:10px;align-items:center}
.author{font-weight:1000}
.metarow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.posttext{margin:10px 2px 10px;white-space:pre-wrap;line-height:1.35}
.postmedia{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.55);}
.postmedia img,.postmedia video{width:100%;max-height:520px;object-fit:cover}
.postactions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.gridThumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.thumb{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.55);position:relative}
.thumb img,.thumb video{width:100%;height:120px;object-fit:cover}
.thumb .tag{position:absolute;left:8px;top:8px}
@media (max-width:520px){ .thumb img,.thumb video{height:100px} }
.modal{position:fixed;inset:0;z-index:50;background:rgba(31,27,22,.38);display:grid;place-items:center;padding:18px;}
.modal.hidden{display:none}
.modalcard{width:min(860px,100%); padding:14px}
.modalhead{display:flex;align-items:center;gap:10px}