@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#0F1115; --surface:#171A21; --surface-2:#1E222B; --border:#2A303B;
  --text:#ECEDF1; --text-dim:#9BA1AC; --accent:#6C5CE7; --accent-dim:#4A3FA0; --crest:#F2A93B;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:'Inter',sans-serif;
  min-height:100vh;
}
h1{font-family:'Space Grotesk',sans-serif;}
.screen{min-height:100vh;}

/* AUTH */
#screen-auth{display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-box{max-width:360px; width:100%; text-align:center;}
.logo{
  width:52px; height:52px; border-radius:14px; background:var(--accent);
  margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:24px;
}
.auth-box h1{font-size:26px; font-weight:700; margin-bottom:6px;}
.tagline{color:var(--text-dim); font-size:14px; margin-bottom:24px;}
input, textarea{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:11px 12px; font-size:14px; font-family:'Inter',sans-serif;
  width:100%; margin-bottom:10px;
}
input::placeholder, textarea::placeholder{color:var(--text-dim);}
textarea{resize:vertical; min-height:70px;}
.btn{
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:11px 20px; font-weight:600; font-size:14px; cursor:pointer; width:100%;
}
.btn:hover{background:var(--accent-dim);}
.btn-ghost{
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer;
}
.error{color:#E4785A; font-size:12px; min-height:16px; display:block; margin-top:4px;}
.switch{font-size:13px; color:var(--text-dim); margin-top:14px;}
.switch a{color:var(--accent); cursor:pointer;}

/* APP SHELL */
.topbar{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10;
}
.logo-small{
  width:28px; height:28px; border-radius:7px; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; flex-shrink:0;
}
.brand{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px;}
.tabs{display:flex; gap:6px; margin-left:auto;}
.tab{
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; font-family:'Inter',sans-serif;
}
.tab.active{border-color:var(--accent); color:var(--accent);}

main{max-width:560px; margin:0 auto; padding:16px;}
.view{display:block;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px;}
.composer{margin-bottom:16px;}
.composer-row{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:8px;}
.composer-row .error{margin-top:0; min-height:auto;}

/* FEED POSTS */
#feed-list{display:flex; flex-direction:column; gap:8px;}
.post{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; gap:10px;}
.post-avatar{width:32px; height:32px; border-radius:50%; flex-shrink:0;}
.post-name{font-size:13px; font-weight:600;}
.post-time{font-size:12px; color:var(--text-dim); font-weight:400; margin-left:6px;}
.post-text{font-size:13px; margin-top:2px; word-break:break-word;}
.empty{text-align:center; color:var(--text-dim); font-size:13px; padding:24px 0;}

/* PROFILE */
.profile-banner{height:90px; background:var(--crest); border-radius:12px 12px 0 0;}
.profile-body{border-radius:0 0 12px 12px; border-top:none;}
.profile-head{display:flex; align-items:flex-end; gap:12px; margin-top:-30px; margin-bottom:14px;}
.avatar{width:60px; height:60px; border-radius:50%; background:var(--accent); border:3px solid var(--surface);}
.profile-name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; padding-bottom:4px;}
.field-label{display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; margin-top:10px;}
.swatches{display:flex; gap:8px; margin-bottom:16px;}
.swatch{width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent;}
.swatch.selected{border-color:var(--text);}
.saved-msg{color:var(--text-dim); font-size:12px; margin-left:10px;}
.member-badge{
  display:inline-block; margin-top:2px; font-size:11px; color:var(--crest);
  border:1px solid var(--border); border-radius:999px; padding:2px 8px;
}
.invite-box{margin-top:20px; padding-top:16px; border-top:1px solid var(--border);}
.ts-line{font-size:12px; color:var(--text-dim); margin-bottom:8px;}
.invite-row{display:flex; gap:8px;}
.invite-row input{margin-bottom:0; font-size:12px; color:var(--text-dim);}
.invite-row .btn-ghost{white-space:nowrap;}

/* MOBILE */
@media (max-width:480px){
  .tabs{gap:4px;}
  .tab{padding:7px 10px; font-size:12px;}
  main{padding:12px;}
}