:root{
  --bg:#0b0f17;
  --panel:#111418;
  --muted:#98a0b0;
  --text:#e9eef8;
  --accent:#5b7cfa;
  --card-bg:#0f1720;
  --radius:10px;
  --gap:14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg, #06101a 0%, #07101a 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px clamp(16px, 3vw, 40px);
  gap:12px;
  position:sticky;
  top:0;
  background:linear-gradient(180deg, rgba(6,10,14,0.9), rgba(6,10,14,0.6));
  backdrop-filter: blur(6px);
  z-index:20;
  border-bottom:1px solid rgba(255,255,255,0.03);
}

.brand{display:flex;align-items:center;gap:12px}
.brand h1{margin:0;font-size:18px;font-weight:700;letter-spacing:0.2px}

.controls{display:flex;gap:8px;align-items:center}
#search{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.04);
  color:var(--text);
  padding:8px 12px;
  border-radius:8px;
  min-width:280px;
}
.btn{
  padding:8px 10px;
  border-radius:8px;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  box-shadow:none;
}
.btn.primary{
  background:linear-gradient(90deg,var(--accent),#3e5bf0);
  color:white;
}
.btn:active{transform:translateY(1px)}

.main{
  max-width:1200px;
  margin:28px auto;
  padding:0 clamp(16px, 3vw, 40px);
}

/* Section row */
.section{
  margin-bottom:28px;
}
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.section-header h2{margin:0;font-size:16px}
.section-controls{display:flex;gap:8px;align-items:center}

/* Horizontal scroller */
.row{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
}
.card{
  width:260px;
  background:var(--card-bg);
  border-radius:10px;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow: 0 10px 30px rgba(2,6,12,0.6);
  border:1px solid rgba(255,255,255,0.03);
}
.thumb{
  height:150px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:10px}
.meta{display:flex;gap:8px;align-items:flex-start}
.logo{
  width:36px;height:36px;border-radius:6px;background:rgba(255,255,255,0.03);flex:0 0 36px;display:flex;align-items:center;justify-content:center;overflow:hidden
}
.logo img{width:100%;height:100%;object-fit:cover}
.info{flex:1}
.title{font-weight:700;font-size:14px;line-height:1.1;margin-bottom:6px;max-height:2.6em;overflow:hidden}
.small{font-size:12px;color:var(--muted)}
.card-actions{display:flex;gap:8px;margin-top:10px}
.card-actions a, .card-actions button{
  flex:1;padding:7px 8px;border-radius:8px;background:rgba(255,255,255,0.02);color:var(--text);font-weight:600;border:0;cursor:pointer;text-align:center
}
.card-actions a{display:inline-block;text-decoration:none}

.empty-note{color:var(--muted);padding:10px}

/* Modal */
.modal-root{display:none}
.modal-root.active{display:block;position:fixed;inset:0;z-index:60}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45)}
.modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  max-width:920px;width:94%;background:white;color:#0b0f17;border-radius:12px;box-shadow:0 30px 80px rgba(3,6,10,0.6);padding:18px;z-index:61;
}
.modal-form{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.modal-form label{display:block;font-size:13px;color:#3b4250}
.modal-form input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);margin-top:6px}
.modal-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.modal h2{margin:0 0 8px 0}

/* Responsive */
@media (max-width:720px){
  .modal-form{grid-template-columns:1fr}
  .card{width:80vw}
  #search{min-width:140px}
}