@font-face{
  font-family:"VelaSans";
  src:url("../assets/fonts/VelaSans-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --text:#0e0e0e;
  --muted:#6b7280;
  --border:#d6d8de;
  --border2:#e6e7eb;
  --radius:16px;
  --container:1180px;
  --black:#0e0e0e;
  --bg:#fff;
  --soft:#fafafa;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
[hidden]{ display:none !important; }

body{
  margin:0;
  font-family:"VelaSans",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
}

a{ color:inherit; }
button{ font:inherit; }
.muted{ color:var(--muted); }

/* Topbar */
.topbar{
  width:min(var(--container), calc(100% - 64px));
  margin:0 auto;
  padding:16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.topbar__inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.topbar__left{
  display:flex;
  align-items:center;
  gap:18px;
}

.logo{ height:22px; display:block; }

.brand{ display:flex; align-items:center; gap:14px; }
.brand__logo{ height:22px; display:block; }
.brand__divider{ width:1px; height:34px; background:var(--border2); display:block; }
.brand__title{ font-size:20px; font-weight:700; }

.pillBtn{
  height:36px;
  padding:0 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  border:1.5px solid #0e0e0e;
  transition:opacity .15s;
}
.pillBtn--light{ background:#fff; color:#0e0e0e; }
.pillBtn:hover{ opacity:.85; }

.nav{
  display:flex;
  gap:18px;
  align-items:center;
}

.nav__link{
  text-decoration:none;
  font-size:12.5px;
  font-weight:800;
  opacity:.9;
}

.nav__link:hover{ opacity:1; }

.nav__pill{
  border:1px solid var(--border2);
  border-radius:999px;
  padding:6px 12px;
  background:#fff;
  opacity:1;
}

.nav__pill.is-active{
  border-color:#cfd2da;
  box-shadow:0 0 0 3px rgba(2,2,2,.04);
}

.topbar__right{
  display:flex;
  align-items:center;
  gap:14px;
}

.iconBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-decoration:none;
  font-size:16px;
  color:#111;
}

.iconBtn__label{
  font-size:10px;
  font-weight:900;
  opacity:.7;
}

.avatarBtn{
  width:30px;
  height:30px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--border2);
  display:block;
  background:#f3f4f6;
}

.avatarBtn img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Page */
.page{
  width:min(var(--container), calc(100% - 64px));
  margin:0 auto;
  padding:18px 0 64px;
}

.titleRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.title{
  margin:0;
  font-size:26px;
  font-weight:900;
  letter-spacing:-0.02em;
}

.subtitle{
  margin-top:6px;
  font-size:12.5px;
  font-weight:700;
}

.counter{
  font-size:13px;
  font-weight:900;
  color:var(--muted);
  white-space:nowrap;
}

/* Grid */
.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

/* Card */
.card{
  border:1px solid var(--border2);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.card__cover{
  width:100%;
  aspect-ratio:3 / 4;
  background:#eee;
  border-bottom:1px solid var(--border2);
  cursor:pointer;
  overflow:hidden;
}

.card__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card__body{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

.card__title{
  font-size:12.5px;
  font-weight:900;
  margin:0;
  cursor:pointer;
  line-height:1.25;
}

.card__author{
  font-size:11.5px;
  font-weight:800;
  color:var(--muted);
  text-decoration:none;
  cursor:pointer;
}

.card__author:hover{ color:#2f3746; }

.card__price{
  font-size:13px;
  font-weight:900;
  margin-top:auto;
}

.actions{
  display:flex;
  gap:8px;
}

/* Buttons */
.btn{
  height:36px;
  border-radius:12px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .03s ease, opacity .15s ease, background .15s ease;
  flex:1 1 auto;
}

.btn:active{ transform:translateY(1px); }

.btn--dark{
  background:var(--black);
  color:#fff;
  border-color:var(--black);
}

.btn--dark:hover{ opacity:.92; }

.btn--light{
  background:#fff;
  border:1px solid var(--border);
  color:#111;
}

.btn--light:hover{ background:var(--soft); }

.btn--remove{
  background:#fff;
  border:1px solid var(--border2);
  color:var(--muted);
  font-size:16px;
  flex:0 0 36px;
  padding:0;
}

.btn--remove:hover{
  border-color:#e5b8b8;
  color:#c01818;
  background:#fff8f8;
}

/* Auth gate */
.emptyAuth{
  margin-top:22px;
  display:flex;
  justify-content:center;
}

.emptyAuth__box{
  width:min(520px, 100%);
  border:1px solid var(--border2);
  border-radius:18px;
  padding:18px;
  background:#fff;
}

.emptyAuth__title{
  font-weight:900;
  font-size:14px;
}

.emptyAuth__text{
  margin-top:8px;
  font-size:12.5px;
  font-weight:700;
}

.emptyAuth__box .btn{
  margin-top:14px;
  width:100%;
}

/* Empty state */
.emptyState{
  margin-top:16px;
  display:flex;
  justify-content:center;
}

.emptyState__box{
  width:min(560px, 100%);
  border:1px solid var(--border2);
  border-radius:18px;
  background:#fff;
  padding:28px 20px;
  text-align:center;
}

.emptyState__icon{
  font-size:36px;
  opacity:.25;
  margin-bottom:8px;
}

.emptyState__title{
  font-size:16px;
  font-weight:900;
}

.emptyState__text{
  margin-top:8px;
  font-size:12.5px;
  font-weight:700;
}

.emptyState__box .btn{
  margin-top:14px;
  width:100%;
}

/* Responsive */
@media (max-width: 1100px){
  .grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px){
  .topbar, .page{ width:calc(100% - 32px); }
  .titleRow{ flex-direction:column; align-items:flex-start; }
  .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px){
  .grid{ grid-template-columns:1fr; }
  .topbar{ flex-direction:column; align-items:flex-start; }
  .topbar__right{ width:100%; justify-content:space-between; }
}