@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

#ctg-wrap *, #ctg-wrap *::before, #ctg-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }
#ctg-wrap { font-family: 'DM Sans', sans-serif; color: var(--ctg-primary); background: var(--ctg-bg); border-radius: 8px; overflow: hidden; }

/* HERO */
.ctg-hero { background: var(--ctg-primary); padding: 3.5rem 3rem 2.5rem; position: relative; overflow: hidden; }
.ctg-hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 50px 50px; }
.ctg-hero-glow { position: absolute; top: -100px; right: -100px; width: 450px; height: 450px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,.15) 0%, transparent 65%); pointer-events: none; }
.ctg-hero-body { position: relative; z-index: 2; max-width: 800px; }
.ctg-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.3); color: var(--ctg-accent); padding: .35rem 1rem; border-radius: 20px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.2rem; }
.ctg-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: .25rem; }
.ctg-hero h2 { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(1rem, 2.5vw, 1.5rem); font-weight: 400; color: rgba(255,255,255,.6); margin-bottom: 1rem; }
.ctg-hero p { font-size: .88rem; color: rgba(255,255,255,.45); max-width: 680px; line-height: 1.75; margin-bottom: 2rem; }
.ctg-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; }
.ctg-stat-n { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 900; color: var(--ctg-accent); }
.ctg-stat-l { font-size: .7rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .1em; margin-top: .15rem; }

/* SEARCH */
.ctg-search-wrap { background: #fff; padding: 2rem 3rem; border-bottom: 1px solid rgba(10,22,40,.08); }
.ctg-search-lbl { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ctg-accent); margin-bottom: .6rem; }
.ctg-search-box { display: flex; border: 2px solid var(--ctg-primary); border-radius: 4px; overflow: hidden; box-shadow: 0 4px 20px rgba(10,22,40,.07); }
.ctg-search-box input { flex: 1; padding: .9rem 1.2rem; border: none; outline: none; font-family: 'DM Sans', sans-serif; font-size: .95rem; color: var(--ctg-primary); background: #fff; }
.ctg-search-box input::placeholder { color: rgba(10,22,40,.35); }
.ctg-search-btn { background: var(--ctg-primary); color: var(--ctg-accent); border: none; padding: 0 1.8rem; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: opacity .2s; }
.ctg-search-btn:hover { opacity: .85; }
.ctg-hints { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.ctg-hint { background: var(--ctg-bg); border: 1px solid rgba(10,22,40,.1); padding: .3rem .85rem; border-radius: 20px; font-size: .73rem; color: #8892a4; cursor: pointer; transition: all .2s; }
.ctg-hint:hover { border-color: var(--ctg-accent); color: var(--ctg-accent); }

/* AI BOX */
#ctg-ai-box { display: none; margin-top: 1.2rem; border: 1px solid rgba(201,168,76,.25); border-radius: 6px; overflow: hidden; }
.ctg-ai-hd { background: var(--ctg-primary); padding: .7rem 1.2rem; display: flex; align-items: center; gap: .6rem; }
.ctg-ai-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ctg-accent); animation: ctgPulse 1.5s infinite; }
@keyframes ctgPulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.ctg-ai-hd span { font-size: .72rem; font-weight: 700; color: var(--ctg-accent); letter-spacing: .1em; text-transform: uppercase; }
.ctg-ai-body { padding: 1.2rem 1.5rem; background: #fff; font-size: .88rem; line-height: 1.75; color: #2d3748; }
.ctg-ai-ft { padding: .5rem 1.2rem; background: var(--ctg-bg); font-size: .7rem; color: #8892a4; border-top: 1px solid rgba(10,22,40,.06); }
.ctg-ai-ft a { color: var(--ctg-accent); }

/* CUSTOM BLOCKS */
.ctg-custom-block { padding: 1.5rem 3rem; background: #fff; border-bottom: 1px solid rgba(10,22,40,.06); }

/* TABLE */
.ctg-main { padding: 2rem 3rem; background: var(--ctg-bg); }
.ctg-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.ctg-count { font-size: .82rem; color: #8892a4; }
.ctg-count strong { color: var(--ctg-primary); }
.ctg-tabs { display:flex; gap:.4rem; flex-wrap:wrap; max-height:108px; overflow-y:auto; padding-bottom:2px; }
.ctg-tabs::-webkit-scrollbar { height:4px; width:4px; }
.ctg-tabs::-webkit-scrollbar-thumb { background:var(--ctg-accent); border-radius:2px; }
.ctg-tab { padding: .4rem 1rem; border: 1px solid rgba(10,22,40,.15); border-radius: 20px; font-size: .75rem; font-weight: 500; color: #8892a4; cursor: pointer; transition: all .18s; background: #fff; }
.ctg-tab.active, .ctg-tab:hover { background: var(--ctg-primary); color: var(--ctg-accent); border-color: var(--ctg-primary); }
.ctg-table-wrap { background: #fff; border-radius: 6px; overflow: hidden; border: 1px solid rgba(10,22,40,.08); box-shadow: 0 2px 12px rgba(10,22,40,.05); }
table.ctg-tbl { width: 100%; border-collapse: collapse; }
table.ctg-tbl thead th { background: var(--ctg-primary); color: rgba(255,255,255,.6); padding: .9rem 1.1rem; text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
table.ctg-tbl thead th:first-child, table.ctg-tbl thead th:nth-child(2) { color: var(--ctg-accent); width: 90px; }
table.ctg-tbl tbody tr.ctg-row { cursor: pointer; transition: background .15s; }
table.ctg-tbl tbody tr.ctg-row:hover { background: rgba(201,168,76,.06); }
table.ctg-tbl tbody tr.ctg-row:hover .ctg-title-cell { color: var(--ctg-accent); }
table.ctg-tbl tbody tr.ctg-row td { padding: .8rem 1.1rem; border-bottom: 1px solid rgba(10,22,40,.05); font-size: .84rem; vertical-align: middle; }
.ctg-old { font-weight: 700; color: var(--ctg-primary); font-family: monospace; font-size: .84rem; }
.ctg-new { color: #4a5568; font-family: monospace; font-size: .84rem; }
.ctg-title-cell { transition: color .15s; }
.ctg-ch-tag { display: inline-block; padding: .2rem .6rem; background: rgba(201,168,76,.1); color: var(--ctg-accent); border-radius: 3px; font-size: .7rem; font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctg-hl { background: rgba(201,168,76,.3); border-radius: 2px; padding: 0 2px; }
.ctg-no-results { text-align: center; padding: 3.5rem; color: #8892a4; font-size: .9rem; }
.ctg-loading-row { padding: 2rem; text-align: center; color: #8892a4; }

/* PAGINATION */
.ctg-pag { display: flex; justify-content: center; gap: .4rem; margin-top: 1.5rem; flex-wrap: wrap; }
.ctg-pg { width: 34px; height: 34px; border-radius: 4px; border: 1px solid rgba(10,22,40,.12); background: #fff; font-size: .8rem; font-weight: 600; color: var(--ctg-primary); cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; }
.ctg-pg.active { background: var(--ctg-primary); color: var(--ctg-accent); border-color: var(--ctg-primary); }
.ctg-pg:hover:not(.active) { border-color: var(--ctg-accent); color: var(--ctg-accent); }

/* CTA */
.ctg-cta { background: var(--ctg-primary); padding: 3.5rem 3rem; text-align: center; }
.ctg-cta h3 { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: #fff; margin-bottom: .8rem; }
.ctg-cta p { font-size: .88rem; color: rgba(255,255,255,.45); max-width: 560px; margin: 0 auto 1.8rem; line-height: 1.7; }
.ctg-cta-btn { display: inline-block; background: var(--ctg-accent); color: var(--ctg-primary); padding: .85rem 2rem; border-radius: 3px; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: opacity .2s; }
.ctg-cta-btn:hover { opacity: .88; color: var(--ctg-primary); }

/* MODAL */
.ctg-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(10,22,40,.8); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 1.5rem; }
.ctg-overlay.open { display: flex; }
.ctg-modal { background: #fff; border-radius: 8px; width: 100%; max-width: 680px; max-height: 85vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(10,22,40,.4); }
.ctg-modal-hd { background: var(--ctg-primary); padding: 1.5rem 2rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 2; }
.ctg-modal-badge { font-size: .7rem; font-weight: 700; color: var(--ctg-accent); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4rem; }
.ctg-modal-title { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.35; }
.ctg-modal-close { background: none; border: none; color: rgba(255,255,255,.5); font-size: 1.6rem; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; transition: color .2s; }
.ctg-modal-close:hover { color: var(--ctg-accent); }
.ctg-modal-body { padding: 1.8rem 2rem; }
.ctg-modal-map { display: flex; gap: 2rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(10,22,40,.08); flex-wrap: wrap; }
.ctg-map-lbl { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8892a4; margin-bottom: .3rem; }
.ctg-map-val { font-family: monospace; font-size: 1rem; font-weight: 700; color: var(--ctg-primary); }
.ctg-modal-ai { font-size: .9rem; line-height: 1.8; color: #2d3748; }
.ctg-modal-loading { color: #8892a4; font-style: italic; font-size: .88rem; }
.ctg-modal-ft { padding: 1rem 2rem; background: var(--ctg-bg); border-top: 1px solid rgba(10,22,40,.06); font-size: .72rem; color: #8892a4; }
.ctg-modal-ft a { color: var(--ctg-accent); }

@media (max-width: 768px) {
    .ctg-hero, .ctg-search-wrap, .ctg-main, .ctg-cta, .ctg-custom-block { padding-left: 1.2rem; padding-right: 1.2rem; }
    table.ctg-tbl thead th:nth-child(4), table.ctg-tbl tbody td:nth-child(4) { display: none; }
    .ctg-stats { gap: 1.5rem; }
    .ctg-controls { flex-direction: column; align-items: flex-start; }
}