/* PackageIntel v2 — Toolify.ai pixel-perfect design */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #FFFFFF;
  --bg2: #F9FAFB;
  --bg3: #F3F4F6;
  --surface: #FFFFFF;
  --indigo: #6366F1;
  --indigo-light: #EEF2FF;
  --indigo-dark: #4F46E5;
  --text: #111827;
  --text2: #6B7280;
  --text3: #9CA3AF;
  --border: #E5E7EB;
  --green: #22C55E;
  --green-bg: #F0FDF4;
  --green-border: #BBF7D0;
  --red: #EF4444;
  --amber: #F59E0B;
  --blue: #3B82F6;
  --blue-bg: #EFF6FF;
  --blue-border: #BFDBFE;
  --font: 'Inter', -apple-system, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased; }
a { color:var(--indigo); text-decoration:none; }

/* Sponsor bar */
.topbar { background:var(--indigo); color:#fff; text-align:center; padding:10px 16px; font-size:13px; }
.topbar b { font-weight:600; }

/* Header */
.header { height:60px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 32px; position:sticky; top:0; z-index:100; }
.logo { font-size:22px; font-weight:800; color:var(--indigo); margin-right:40px; }
.nav { display:flex; gap:28px; flex:1; }
.nav a { color:var(--text2); font-size:14px; font-weight:500; }
.nav a:hover { color:var(--indigo); }
.header-right { display:flex; gap:12px; align-items:center; }
.btn-outline { padding:7px 18px; border:1px solid var(--border); border-radius:8px; font-size:13px; font-weight:600; color:var(--text); background:#fff; cursor:pointer; }
.btn-primary { padding:7px 18px; background:var(--indigo); color:#fff; border-radius:8px; font-size:13px; font-weight:600; border:none; cursor:pointer; }

/* Breadcrumb */
.breadcrumb { padding:16px 0; font-size:13px; color:var(--text3); }
.breadcrumb a { color:var(--text2); }
.breadcrumb span { margin:0 6px; color:var(--border); }

/* Container */
.container { max-width:1200px; margin:0 auto; padding:0 32px; }

/* Tool Detail Hero */
.tool-hero { display:flex; gap:20px; align-items:flex-start; padding:8px 0 24px; }
.tool-icon { width:72px; height:72px; border-radius:16px; background:var(--indigo-light); display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; color:var(--indigo); flex-shrink:0; overflow:hidden; }
.tool-icon img { width:100%; height:100%; object-fit:cover; }
.tool-meta { flex:1; }
.tool-name { font-size:28px; font-weight:800; margin-bottom:2px; }
.tool-actions { display:flex; gap:10px; align-items:center; margin-top:8px; }
.btn-green { padding:8px 24px; background:var(--green); color:#fff; border-radius:8px; font-size:14px; font-weight:700; border:none; cursor:pointer; }
.rating { display:flex; align-items:center; gap:4px; }
.stars { color:var(--amber); font-size:16px; letter-spacing:1px; }
.rating-num { font-size:14px; font-weight:700; color:var(--text); }
.rating-count { font-size:13px; color:var(--text3); margin-left:4px; }
.saved { font-size:13px; color:var(--text3); }

/* Screenshot */
.screenshot { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:0 0 24px; background:var(--bg2); }
.screenshot img { width:100%; display:block; }
.screenshot-placeholder { height:300px; display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:14px; }

/* Info table */
.info-table { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:24px; }
.info-row { display:flex; border-bottom:1px solid var(--border); font-size:14px; }
.info-row:last-child { border-bottom:none; }
.info-label { width:160px; padding:12px 16px; background:var(--bg2); color:var(--text2); font-weight:500; flex-shrink:0; }
.info-value { flex:1; padding:12px 16px; }

/* Tags */
.tags { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.pill { padding:5px 14px; border-radius:20px; font-size:12px; font-weight:600; }
.pill-blue { background:var(--blue-bg); color:var(--blue); border:1px solid var(--blue-border); }
.pill-green { background:var(--green-bg); color:var(--green); border:1px solid var(--green-border); }
.pill-gray { background:var(--bg3); color:var(--text2); border:1px solid var(--border); }
.pill-indigo { background:var(--indigo-light); color:var(--indigo); }
.cat-link { color:var(--blue); font-size:13px; font-weight:500; margin-right:12px; }
.cat-link::before { content:'#'; }

/* Tab bar */
.tab-bar { display:flex; border-bottom:2px solid var(--border); margin:24px 0 0; }
.tab-item { padding:12px 24px; font-size:14px; font-weight:600; color:var(--text3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
.tab-item.active { color:var(--indigo); border-bottom-color:var(--indigo); }

/* Sponsored row */
.sponsor-row { display:flex; gap:16px; padding:20px 0; overflow-x:auto; }
.sponsor-card { min-width:220px; border:1px solid var(--border); border-radius:12px; padding:16px; flex-shrink:0; }
.sponsor-card-name { font-size:14px; font-weight:700; margin-bottom:4px; }
.sponsor-card-desc { font-size:12px; color:var(--text2); line-height:1.5; margin-bottom:8px; }
.sponsor-card .btn-outline { font-size:11px; padding:4px 12px; }
.sponsor-card-img { width:100%; height:100px; background:var(--bg2); border-radius:8px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:12px; }

/* Content sections */
.content-section { padding:28px 0; }
.content-section h2 { font-size:20px; font-weight:700; margin-bottom:16px; }
.content-section h3 { font-size:16px; font-weight:600; margin:20px 0 8px; }
.content-section p { font-size:15px; line-height:1.8; color:var(--text2); margin-bottom:12px; }

/* Green checkmark list */
.check-list { list-style:none; padding:0; }
.check-list li { padding:6px 0; font-size:14px; display:flex; align-items:center; gap:8px; }
.check-list li::before { content:'✅'; font-size:14px; }

/* Numbered use cases */
.use-case { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--bg3); }
.use-num { width:32px; height:32px; background:var(--indigo-light); color:var(--indigo); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0; }
.use-text { font-size:14px; line-height:1.6; }

/* FAQ accordion */
.faq { border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-q { padding:14px 20px; font-size:15px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-q::after { content:'+'; font-size:20px; color:var(--text3); font-weight:400; }
.faq-q.open::after { content:'−'; }
.faq-a { display:none; padding:0 20px 16px; font-size:14px; line-height:1.7; color:var(--text2); }
.faq-a.open { display:block; }

/* Analytics */
.chart-placeholder { background:var(--bg2); border:1px solid var(--border); border-radius:12px; height:200px; display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:14px; }

/* Alternatives grid */
.alt-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.alt-card { border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:box-shadow .2s; }
.alt-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); }
.alt-thumb { height:140px; background:var(--bg2); display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:13px; border-bottom:1px solid var(--border); }
.alt-body { padding:14px 16px; }
.alt-name { font-size:15px; font-weight:700; margin-bottom:4px; }
.alt-name a { color:var(--text); }
.alt-desc { font-size:12px; color:var(--text2); line-height:1.5; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.alt-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.alt-tag { font-size:10px; padding:2px 8px; border-radius:4px; background:var(--bg3); color:var(--text2); }
.alt-bar { height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.alt-bar-fill { height:100%; background:var(--indigo); border-radius:3px; }
.alt-meta { display:flex; justify-content:space-between; font-size:11px; color:var(--text3); margin-top:4px; }
.alt-open { display:block; text-align:center; padding:8px; border-top:1px solid var(--border); font-size:13px; font-weight:600; color:var(--indigo); }

/* 2-column layout */
.layout-2col { display:grid; grid-template-columns:1fr 340px; gap:32px; padding:24px 0 40px; }
.sidebar-card { border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:16px; }
.sidebar-card h4 { font-size:14px; font-weight:700; margin-bottom:12px; }
.sidebar-link { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--bg3); font-size:13px; }
.sidebar-link:last-child { border-bottom:none; }

/* CTA */
.cta { background:linear-gradient(135deg, var(--indigo), #818CF8); border-radius:16px; padding:40px; text-align:center; color:#fff; margin:32px 0; }
.cta h3 { font-size:24px; font-weight:800; margin-bottom:8px; }
.cta p { opacity:.9; font-size:15px; }
.cta button, .cta a { display:inline-block; margin-top:16px; padding:12px 32px; background:rgba(255,255,255,.2); border-radius:10px; color:#fff; font-weight:700; font-size:15px; border:none; cursor:pointer; }

/* Footer */
.footer { background:#111827; color:#9CA3AF; padding:48px 32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; max-width:1200px; margin:0 auto; }
.footer h5 { color:#fff; font-size:14px; margin-bottom:16px; }
.footer a { color:#9CA3AF; font-size:13px; display:block; padding:4px 0; }
.footer a:hover { color:#fff; }
.footer-bottom { text-align:center; padding-top:24px; margin-top:24px; border-top:1px solid #374151; font-size:12px; }

/* Category page */
.cat-hero { padding:32px 0; }
.cat-hero h1 { font-size:32px; font-weight:800; margin-bottom:12px; }
.cat-hero h1 em { font-style:normal; color:var(--indigo); }
.cat-hero p { font-size:15px; color:var(--text2); line-height:1.8; max-width:700px; }
.cat-filters { display:flex; gap:12px; margin:20px 0; }
.cat-filters select { padding:8px 16px; border:1px solid var(--border); border-radius:8px; font-family:var(--font); font-size:13px; background:#fff; }

/* Tool list card (category page) */
.tl-card { border:1px solid var(--border); border-radius:12px; padding:20px 24px; margin-bottom:16px; transition:border-color .2s; }
.tl-card:hover { border-color:var(--indigo); }
.tl-top { display:flex; gap:16px; align-items:flex-start; }
.tl-icon { width:52px; height:52px; border-radius:14px; background:var(--indigo-light); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:var(--indigo); flex-shrink:0; }
.tl-info { flex:1; }
.tl-info h2 { font-size:18px; font-weight:700; margin-bottom:2px; }
.tl-info h2 a { color:var(--text); }
.tl-info p { font-size:13px; color:var(--text2); line-height:1.6; }
.tl-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.tl-right .stars { font-size:14px; }
.tl-right .meta { font-size:12px; color:var(--text3); }
.btn-view { padding:7px 18px; background:var(--indigo); color:#fff; border-radius:8px; font-size:13px; font-weight:600; border:none; cursor:pointer; }
.tl-tabs { display:flex; border-top:1px solid var(--border); margin-top:12px; }
.tl-tab { flex:1; padding:10px; text-align:center; font-size:12px; font-weight:600; color:var(--text3); cursor:pointer; border-top:2px solid transparent; margin-top:-1px; }
.tl-tab.active { color:var(--indigo); border-top-color:var(--indigo); }
.tl-tab-content { display:none; padding:12px 0; font-size:13px; color:var(--text2); line-height:1.7; }
.tl-tab-content.active { display:block; }
.tl-tags { display:flex; gap:6px; margin-top:8px; }

/* Pagination */
.pagination { display:flex; gap:6px; justify-content:center; padding:32px 0; }
.page-num { padding:8px 14px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-weight:500; color:var(--text); }
.page-num.active { background:var(--indigo); color:#fff; border-color:var(--indigo); }

/* Compare hero cards */
.cmp-heroes { display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:center; margin-bottom:32px; }
.cmp-card { border:1px solid var(--border); border-radius:16px; padding:32px; text-align:center; }
.cmp-vs { font-size:28px; font-weight:800; color:var(--text3); padding:0 20px; }
.cmp-table { width:100%; border-collapse:collapse; }
.cmp-table th { padding:14px 16px; text-align:center; font-size:14px; font-weight:700; border-bottom:2px solid var(--border); }
.cmp-table th:first-child { text-align:left; }
.cmp-table td { padding:12px 16px; text-align:center; font-size:14px; border-bottom:1px solid var(--bg3); }
.cmp-table td:first-child { text-align:left; color:var(--text2); }
.cmp-win { color:var(--green); font-weight:700; }
.cmp-lose { color:var(--text3); }

/* Responsive */
@media(max-width:768px) {
  .layout-2col { grid-template-columns:1fr; }
  .alt-grid { grid-template-columns:1fr; }
  .cmp-heroes { grid-template-columns:1fr; }
  .cmp-vs { padding:12px 0; }
  .nav { display:none; }
  .tool-hero { flex-direction:column; }
  .info-label { width:120px; }
  .footer-grid { grid-template-columns:1fr; }
  .cat-hero h1 { font-size:24px; }
}