:root{
  --bg:#0b1220;
  --panel:#0f1a2b;
  --panel2:#121f33;
  --text:#eaf1ff;
  --muted:#a9b7cf;
  --line:rgba(255,255,255,.10);
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --radius:14px;
  --chip:#1b2a44;
  --danger:#ff4d4d;
  --ok:#2ecc71;
  --warn:#f1c40f;
  --accent:#3a86ff;
}

body{
  background: linear-gradient(180deg, #0b1220, #070b12);
  color: var(--text);
}

.topbar{
  background: rgba(15,26,43,.92);
  border-bottom: 1px solid var(--line);
  padding: .8rem 0 .6rem;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}

.search-wrap{
  display:flex;
  align-items:center;
  gap:.5rem;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem .5rem;
}

.search-ico{
  opacity:.85;
  padding-left:.4rem;
}

.search-input{
  margin:0;
  border:0;
  background:transparent;
  color:var(--text);
  box-shadow:none;
}

.search-input:focus{
  outline:none;
  box-shadow:none;
}

.search-addtag{
  margin:0;
  border-radius: 999px;
  padding:.45rem .65rem;
}

.tags-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:.45rem;
  min-height: 1.8rem;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background: var(--chip);
  border:1px solid var(--line);
  color: var(--text);
  padding:.25rem .55rem;
  border-radius:999px;
  font-size:.85rem;
  line-height:1.2;
}

.chip .x{
  background: transparent;
  border:0;
  color: var(--muted);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  padding:0 .1rem;
}

.mini-label{
  color: var(--muted);
  font-size:.8rem;
  margin-bottom:.2rem;
}

.mini-select{
  margin:0;
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  height: 2.2rem;
}

.button.primary{
  background: var(--accent);
}

.expanded-on-mobile{
  width: 100%;
  margin: 0;
}

@media (min-width: 40em){
  .expanded-on-mobile{ width:auto; }
}

.channels-bar{
  background: rgba(18,31,51,.85);
  border-bottom: 1px solid var(--line);
  padding: .55rem 0;
  position: sticky;
  top: 84px;
  z-index: 40;
  backdrop-filter: blur(10px);
}

.channels-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.tab{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  user-select:none;
}

.badge{
  background: rgba(255,255,255,.10);
  border:1px solid var(--line);
  padding:.15rem .45rem;
  border-radius:999px;
  font-size:.78rem;
  color: var(--muted);
}

.filters-row{
  background: rgba(15,26,43,.65);
  border-bottom: 1px solid var(--line);
  padding: .45rem 0;
  position: sticky;
  top: 134px;
  z-index: 30;
  backdrop-filter: blur(10px);
}

.filters-inline{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}

.filters-title{
  color: var(--muted);
  font-size:.85rem;
}

.filters-chips{
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
}

.sort-inline{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.75rem;
  flex-wrap:wrap;
}

.sort-opt{
  color: var(--muted);
  font-size:.85rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

.deck{
  padding: .9rem 0 1.2rem;
}

.deck-grid{
  display:grid;
  gap: .9rem;
  align-items:start;
  min-height: calc(100vh - 220px);
  grid-template-columns: 1fr;
}

@media (min-width: 40em){
  .deck-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em){
  .deck-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.column{
  width: 100%;
  background: rgba(18,31,51,.70);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 420px;
}

.col-head{
  padding: .7rem .75rem .55rem;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid var(--line);
}

.col-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
}

.col-name{
  font-weight:700;
  font-size:1rem;
  margin:0;
}

.col-meta{
  display:flex;
  align-items:center;
  gap:.45rem;
}

.col-actions{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-top:.55rem;
  flex-wrap:wrap;
}

.col-actions .button{
  margin:0;
  border-radius: 10px;
  padding:.45rem .65rem;
}

.col-body{
  max-height: calc(100vh - 300px);
  overflow:auto;
  padding: .65rem .55rem .75rem;
}

.card{
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius: 14px;
  padding: .65rem .65rem .55rem;
  margin-bottom: .65rem;
}

.card-title{
  font-weight:700;
  margin:0;
  font-size: .98rem;
}

.card-sub{
  color: var(--muted);
  font-size:.82rem;
  margin-top:.2rem;
}

.card-tags{
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
  margin-top:.5rem;
}

.pill{
  background: rgba(46,204,113,.13);
  border: 1px solid rgba(46,204,113,.30);
  color: var(--text);
  padding:.2rem .5rem;
  border-radius:999px;
  font-size:.8rem;
}

.pill.blue{
  background: rgba(58,134,255,.14);
  border: 1px solid rgba(58,134,255,.35);
}

.pill.gray{
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  color: var(--muted);
}

.card-actions{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:.55rem;
}

.btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:.35rem .55rem;
  border-radius: 10px;
  cursor:pointer;
  font-size:.85rem;
}

.btn:hover{ background: rgba(255,255,255,.10); }

.btn.ok{ background: rgba(46,204,113,.14); border-color: rgba(46,204,113,.35); }
.btn.warn{ background: rgba(241,196,15,.14); border-color: rgba(241,196,15,.35); }
.btn.danger{ background: rgba(255,77,77,.14); border-color: rgba(255,77,77,.35); }

.platform-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  margin-right:.25rem;
  background: rgba(255,255,255,.25);
}

.dot-x{ background: #3a86ff; }
.dot-reddit{ background: #ff6a00; }
.dot-instagram{ background: #c13584; }
.dot-facebook{ background: #1877f2; }

.small-muted{
  color: var(--muted);
  font-size:.8rem;
}