:root { color-scheme: light; --bg: #f6f7fb; --panel: #fff; --text: #202333; --muted: #697386; --accent: #6354eb; }
body { background: radial-gradient(ellipse at 80% 0, #ece9ff 0, transparent 45%), #f6f7fb; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; min-height: 100vh; }
a { text-decoration: none; }
a:hover { color: #4939c9; }
a:focus-visible { outline: 3px solid #8073f7; }
.catalog-shell { width: min(1160px, calc(100% - 64px)); }
.catalog-header { padding: 26px 0; border-color: #e3e5ef; }
.catalog-brand { color: #202333; font-size: 22px; display: inline-flex; align-items: center; gap: 12px; }
.catalog-brand::before { content: "P"; display: grid; place-items: center; width: 40px; height: 40px; background: #6957f5; color: #fff; border-radius: 13px; font-size: 20px; }
.catalog-header nav a { font-size: 14px; color: #626b7d; padding: 8px 14px; border-radius: 10px; }
.catalog-header nav a:last-child { color: #5945dd; background: #ebe7ff; font-weight: 600; }
.breadcrumbs { font-size: 13px; padding-top: 24px; }
.catalog-intro { max-width: none; padding: 32px 0 34px; }
.catalog-intro .eyebrow { margin: 0 0 10px; font-weight: 600; }
h1 { font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -.035em; margin: 0 0 14px; line-height: 1.3; }
.catalog-intro > p:not(.eyebrow) { color: #667085; margin: 6px 0; font-size: 15px; }
.catalog-intro > .muted { font-size: 13px !important; }
.catalog-grid { gap: 22px; counter-reset: category; }
.catalog-card { padding: 28px; border: 1px solid #e3e5ef; border-radius: 22px; box-shadow: 0 6px 24px #24205605; position: relative; transition: transform .18s, box-shadow .18s; }
.catalog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px #3c316b0c; }
.catalog-card::before { counter-increment: category; content: "0" counter(category); font-size: 24px; font-weight: 750; color: #7665ec; background: #f0edff; border-radius: 15px; width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 24px; }
.catalog-card > .eyebrow { position: absolute; top: 36px; right: 26px; margin: 0; font-size: 12px; color: #697386; background: #f6f7fa; padding: 4px 10px; border-radius: 20px; letter-spacing: 0; }
.catalog-card h2 { font-size: 20px; line-height: 1.5; margin: 0 0 12px; min-height: 60px; }
.catalog-card h2 a { color: #242637; }
.catalog-card > p:not(.eyebrow) { font-size: 14px; line-height: 1.85; color: #667085; margin: 0 0 18px; }
.catalog-card > .muted { padding: 14px 16px; background: #f7f8fc; border-radius: 12px; align-self: stretch; font-size: 12px !important; }
.catalog-card .catalog-button { width: 100%; text-align: center; background: #6653ed; border: 0; border-radius: 12px; padding: 12px 16px; color: #fff; font-size: 14px; font-weight: 600; }
.catalog-button::after { content: " →"; margin-left: 8px; }
.catalog-button:hover { background: #5542dc; color: #fff; }
footer { margin-top: 38px; padding: 22px 0 32px; border-top: 1px solid #e3e5ef; font-size: 12px; }
footer p { margin-top: 0; }
@media (max-width: 760px) { .catalog-shell { width: calc(100% - 32px); } .catalog-header { flex-direction: row; align-items: center; padding: 18px 0; } .catalog-header nav { gap: 4px; } .catalog-header nav a { padding: 7px; font-size: 12px; } .catalog-brand { font-size: 17px; gap: 8px; } .catalog-brand::before { width: 32px; height: 32px; border-radius: 10px; font-size: 16px; } .catalog-intro { padding: 26px 0; } .catalog-grid { grid-template-columns: 1fr; gap: 16px; } .catalog-card { padding: 24px; } .catalog-card h2 { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .catalog-card { transition: none; } .catalog-card:hover { transform: none; } }