:root{
	--bg:#e9f0ff;
	--card:#ffffffcc;
	--muted:#6b7280;
	--accent:#2563eb;
	--accent-2:#00b4d8;
	--success:#16a34a;
	--danger:#ef4444;
	--glass: rgba(255,255,255,0.6);
	--glass-2: rgba(0,0,0,0.35);
	--shadow: 0 10px 30px rgba(32,41,60,0.08);
	--radius:14px;
}
[data-theme="dark"]{
	--bg: linear-gradient(180deg,#0f1724 0%, #071127 100%);
	--card: rgba(6,10,20,0.62);
	--muted:#98a0b3;
	--accent:#60a5fa;
	--accent-2:#61dafb;
	--glass: rgba(255,255,255,0.03);
	--glass-2: rgba(255,255,255,0.05);
	--shadow: 0 10px 40px rgba(2,6,23,0.7);
}
*{box-sizing:border-box}
/*body{
	margin:0;
	font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: var(--bg);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	color: #0b1220;
	padding:32px;
	transition: background .35s ease;
}
*/
.wrap{
	max-width:1100px;
	margin:0 auto;
	display:grid;
	grid-template-columns: 1fr 380px;
	gap:26px;
	align-items:start;
}
	/* Header card */
.panel{
	background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
	backdrop-filter: blur(8px) saturate(120%);
	border-radius: var(--radius);
	padding:20px;
	box-shadow: var(--shadow);
}
[data-theme="dark"] .panel{
	background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
}
.header{
	display:flex;
	gap:16px;
	align-items:center;
	justify-content:space-between;
}
.title{
	display:flex;
	gap:12px;
	align-items:center;
}
.logo{
	width:56px;
	height:56px;
	border-radius:12px;
	display:grid;
	place-items:center;
	font-weight:700;
	color:white;
	background: linear-gradient(135deg,var(--accent),var(--accent-2));
	box-shadow: 0 6px 18px rgba(37,99,235,0.18);
	font-size:18px;
}
h1{margin:0;font-size:20px;letter-spacing:0.3px}
p.lead{margin:0;color:var(--muted);font-size:13px}

/* Controls */
.controls{
	margin-top:18px;
	display:flex;
	gap:12px;
	align-items:center;
}
.search{
	flex:1;
	display:flex;
	gap:10px;
	align-items:center;
	background:var(--card);
	padding:8px;
	border-radius:12px;
	border:1px solid rgba(8,12,20,0.04);
}
.search input{
	border:0;outline:0;background:transparent;font-size:14px;padding:6px;width:100%;
}
.btn{
	background:var(--accent);
	color:white;padding:10px 14px;border-radius:10px;border:0;
	cursor:pointer;font-weight:600;
	box-shadow: 0 6px 18px rgba(37,99,235,0.12);
	transition:transform .12s ease, box-shadow .12s;
}
.btn.ghost{
	background:transparent;color:var(--accent);border:1px solid rgba(37,99,235,0.12);box-shadow:none;
}
.btn:active{transform:translateY(1px)}

/* Main list */
.list{
	margin-top:18px;
	display:flex;
	flex-direction:column;
	gap:12px;
}

.accordion{
	background:var(--card);
	border-radius:12px;padding:12px;border:1px solid rgba(2,6,23,0.03);
    transition:transform .18s ease, box-shadow .18s;
    overflow:hidden;
  }
  .accordion:hover{transform:translateY(-4px); box-shadow: 0 16px 40px rgba(5,10,30,0.06)}
  .acc-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
  }
  .acc-title{display:flex;gap:12px;align-items:center}
  .tag{
    padding:6px 10px;border-radius:999px;font-size:12px;background:linear-gradient(90deg,#fff,#f3f6ff);
    color:var(--muted);border:1px solid rgba(2,6,23,0.03)
  }
  .acc-body{
    margin-top:12px;display:grid;gap:8px;
  }

  .item{
    display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:10px;
    transition:background .12s, transform .12s;
    border:1px dashed transparent;
  }
  .item:hover{background:linear-gradient(90deg, rgba(37,99,235,0.03), rgba(0,180,216,0.02));transform:translateX(6px)}
  .item-left{display:flex;gap:12px;align-items:center}
  .badge{
    width:20px;height:20px;border-radius:8px;display:grid;place-items:center;font-weight:700;color:white;
    background:linear-gradient(135deg,#fb7185,#fb923c);
    flex-shrink:0;font-size:13px;
  }
  .meta{display:flex;flex-direction:column}
  .meta .name{font-weight:600}
  .meta .sub{font-size:12px;color:var(--muted)}

  .actions{display:flex;gap:4px;align-items:center}
  .action-btn{background:transparent;border:0;padding:4px;border-radius:8px;cursor:pointer;display:grid;place-items:center}
  .action-btn svg{width:15px;height:18px;opacity:1}
  .star{color:#fbbf24}
  .fav-count{font-size:12px;color:var(--muted);margin-left:6px}

  /* Right column - preview & favorites */
  .side{
    display:flex;flex-direction:column;gap:14px;
  }
  .preview{
    background:var(--card);border-radius:12px;padding:10px;min-height:200px;
    display:flex;flex-direction:column;gap:8px;
    align-items:stretch;
  }
  .preview iframe{
    border-radius:8px;border:0;height:340px;width:100%;
  }
  .preview .empty{display:grid;place-items:center;padding:32px;color:var(--muted);font-size:14px;text-align:center}

  .favorites{
    background:var(--card);padding:12px;border-radius:12px;
  }
  .fav-list{display:flex;flex-direction:column;gap:8px}
  .fav-chip{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));font-size:13px}

  /* toast & modal */
  .toast{
    position:fixed;right:20px;bottom:20px;background:var(--card);padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);display:none;align-items:center;gap:10px;border-left:4px solid var(--success);
  }
  .modal{
    position:fixed;left:0;top:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;
    background:rgba(2,6,23,0.5);z-index:60;padding:20px;
  }
  .modal .box{
    width:min(980px,98%);background:var(--card);padding:12px;border-radius:12px;box-shadow:var(--shadow);
  }

  /* small utilities */
  .muted{color:var(--muted);font-size:13px}
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
  .chip{padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,#fff,#f3f6ff);font-size:12px;color:var(--muted);cursor:pointer;border:1px solid rgba(2,6,23,0.03)}
  .chip.selected{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border:none;box-shadow:0 8px 30px rgba(37,99,235,0.12)}

  /* responsive */
  @media (max-width:980px){
    .wrap{grid-template-columns:1fr; padding:18px}
    .preview iframe{height:260px}
  }