:root{
  --bg:#dfc8a2; --ink:#1b1b1b; --teal:#195e83; --purple:#6b5cff;
  --card:#ffffff; --soft: rgba(0,0,0,.08); --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
/* Header */
.topbar{position:sticky;top:0;z-index:50;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--teal);color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.15)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}
.logo{width:44px;height:44px;border-radius:12px;background:#ffffff14;padding:6px}
.brand .name{font-weight:800}
.top-actions{display:flex;gap:6px;flex-wrap:wrap}
.tbtn{background:#0f4d69;color:#eaf7ff;border:none;border-radius:999px;padding:6px 12px;font-weight:700;cursor:pointer}
.tbtn:hover{background:#0a3f55}
/* Chips */
.chips{display:flex;gap:8px;overflow:auto;padding:8px 10px;background:#f0e6d2;border-bottom:1px solid rgba(0,0,0,.08)}
.chip{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:6px 12px;white-space:nowrap;cursor:pointer}
.chip.active{border-color:var(--teal);color:var(--teal);font-weight:800}
/* Layout */
.views{max-width:1100px;margin:10px auto;padding:0 10px 90px}
.section{background:var(--card);border-radius:var(--radius);box-shadow:0 10px 26px var(--soft);padding:12px;margin:0 0 12px}
.view{display:none}.view.active{display:block}
.row{display:flex;gap:10px}.between{justify-content:space-between}.center{align-items:center}
.input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #d9c7a8;background:#fff}
.select{padding:8px 10px;border:1px solid #d9c7a8;border-radius:10px}
.btn{background:#0f4d69;color:#eaf7ff;border:none;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}
.btn.primary{background:var(--teal);color:#fff}
.muted{color:rgba(0,0,0,.6);font-size:.9rem}
/* Feeds */
.vfeed{display:flex;flex-direction:column;gap:12px}
.post{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.06)}
.pimg{width:100%;height:62vh;object-fit:cover;background:#eee}
.pmeta{padding:10px 12px}
.masonry{columns:2;column-gap:10px}
.pin{break-inside:avoid;background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.06);box-shadow:0 8px 18px rgba(0,0,0,.06);margin:0 0 10px}
.pin img{width:100%;display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.06)}
.card img{width:100%;height:160px;object-fit:cover}
.card .meta{padding:10px 12px}
/* Profile */
.profile-head{display:flex;gap:12px;align-items:center}
.avatar{width:64px;height:64px;border-radius:16px;background:#ddd}
.ps-tabs{display:flex;gap:6px;margin:10px 0}
.pstab{flex:1;background:#eee;border:none;border-radius:12px;padding:8px 0;cursor:pointer}
.pstab.active{background:#f3efe6;font-weight:800}
.hidden{display:none!important}
/* Bottom nav */
.bottom{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid rgba(0,0,0,.08);display:flex;justify-content:space-around;padding:8px 0 16px;z-index:60}
.btab{background:transparent;border:none;color:#111;font-weight:700;cursor:pointer}
.btab.active{color:var(--teal)}
/* Footer */
.footer{text-align:center;padding:20px 0 110px;color:rgba(0,0,0,.7)}
.footer .legal{color:var(--purple);text-decoration:none}
.footer .legal:hover{text-decoration:underline}
@media (min-width:900px){ .masonry{columns:3} }