.gp-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 80px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.gp-console {
    position: relative;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.gp-console-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.gp-eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e01f1f;
}

.gp-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.gp-count-num {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.gp-count-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}
.gp-count.is-filtered .gp-count-num { color: #e01f1f; }

.gp-title {
    margin: 14px 0 0;
    font-size: clamp(25px, 4vw, 36px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.08;
    color: #141414;
}
.gp-title span {
    background: linear-gradient(98deg, #e01f1f, #ff5b5b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gp-sub {
    margin: 10px 0 0;
    max-width: 56ch;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
}

.gp-search-wrap {
    position: relative;
    margin-top: 22px;
    display: flex;
    align-items: center;
}
.gp-search-icon {
    position: absolute;
    left: 18px;
    display: inline-flex;
    color: var(--muted);
    pointer-events: none;
    transition: color .2s cubic-bezier(.16, 1, .3, 1);
}
.gp-search-icon svg { width: 21px; height: 21px; }
.gp-search {
    width: 100%;
    height: 58px;
    padding: 0 52px 0 50px;
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: #f6f6f7;
    color: #161616;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    transition: border-color .22s cubic-bezier(.16, 1, .3, 1),
                background .22s cubic-bezier(.16, 1, .3, 1),
                box-shadow .22s cubic-bezier(.16, 1, .3, 1);
}
.gp-search::placeholder { color: #9a9aa2; font-weight: 500; }
.gp-search:focus {
    border-color: #e01f1f;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(224, 31, 31, .12);
}
.gp-search-wrap:focus-within .gp-search-icon { color: #e01f1f; }
.gp-search-clear {
    position: absolute;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .18s cubic-bezier(.16, 1, .3, 1), color .18s cubic-bezier(.16, 1, .3, 1);
}
.gp-search-clear svg { width: 16px; height: 16px; }
.gp-search-clear:hover { background: rgba(224, 31, 31, .1); color: #e01f1f; }

.gp-rails { margin-top: 28px; }
.gp-rail { margin-bottom: 34px; }
.gp-rail:last-child { margin-bottom: 8px; }

.gp-rail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.gp-rail-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #141414;
}
.gp-rail-count {
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    background: #f1f1f3;
    padding: 2px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.gp-rail-arrows {
    margin-left: auto;
    display: inline-flex;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s cubic-bezier(.16, 1, .3, 1);
}
.gp-rail.is-scrollable .gp-rail-arrows { opacity: 1; pointer-events: auto; }
.gp-rail-arrow {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: #50505a;
    cursor: pointer;
    transition: border-color .18s cubic-bezier(.16, 1, .3, 1),
                background .18s cubic-bezier(.16, 1, .3, 1),
                color .18s cubic-bezier(.16, 1, .3, 1),
                opacity .18s cubic-bezier(.16, 1, .3, 1);
}
.gp-rail-arrow svg { width: 16px; height: 16px; }
.gp-rail-arrow:hover { border-color: rgba(224, 31, 31, .4); color: #e01f1f; background: #fff5f5; }
.gp-rail-arrow:disabled { opacity: .3; cursor: default; pointer-events: none; }

.gp-rail-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 2px 6px;
    margin: -2px -2px 0;
}
.gp-rail-track::-webkit-scrollbar { display: none; }
.gp-rail-track > .showcase-card-wrap {
    flex: 0 0 172px;
    width: 172px;
    scroll-snap-align: start;
}
.gp-rail-track > .gp-skel-card { flex: 0 0 172px; width: 172px; }

.gp-rail-enter > .gp-rail-track > .showcase-card-wrap {
    opacity: 0;
    animation: gp-card-in .5s cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: var(--enter-delay, 0ms);
}

.gp-skel-rail-title {
    display: block;
    height: 22px;
    width: 170px;
    border-radius: 6px;
}
.gp-rails-empty {
    padding: 60px 20px;
    text-align: center;
    font-size: 14px;
    color: var(--muted);
}

.gp-results { margin-top: 28px; }
.gp-results-head {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
}

#gp-grid { min-height: 200px; }

.gp-skel-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
.gp-skel-thumb { width: 100%; aspect-ratio: 1 / 1; }
.gp-skel-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.gp-skel-line { height: 11px; width: 80%; border-radius: 5px; }
.gp-skel-line-2 { width: 50%; }
.gp-skel-thumb, .gp-skel-line, .gp-skel-rail-title {
    background: linear-gradient(100deg, #ededf0 30%, #f6f6f8 50%, #ededf0 70%);
    background-size: 200% 100%;
    animation: gp-shimmer 1.2s ease-in-out infinite;
}
@keyframes gp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gp-grid-enter > .showcase-card-wrap {
    opacity: 0;
    animation: gp-card-in .5s cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: var(--enter-delay, 0ms);
}
@keyframes gp-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gp-empty, .gp-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 64px 20px;
}
.gp-empty-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #f4f4f5;
    color: var(--muted);
    margin-bottom: 18px;
}
.gp-empty-icon svg { width: 36px; height: 36px; }
.gp-empty-title { margin: 0; font-size: 19px; font-weight: 800; color: #1a1a1a; letter-spacing: -.01em; }
.gp-empty-sub { margin: 8px 0 0; font-size: 14px; color: var(--muted); max-width: 42ch; line-height: 1.5; }
.gp-empty-cta {
    margin-top: 20px;
    border: none;
    border-radius: 11px;
    padding: 11px 22px;
    background: #e01f1f;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s cubic-bezier(.16, 1, .3, 1), transform .2s cubic-bezier(.16, 1, .3, 1);
}
.gp-empty-cta:hover { background: #c41a1a; transform: translateY(-1px); }

[data-theme="dark"] .gp-console { border-bottom-color: #22222b; }
[data-theme="dark"] .gp-eyebrow { color: #ff6b6b; }
[data-theme="dark"] .gp-count-num { color: #f4f4f5; }
[data-theme="dark"] .gp-count.is-filtered .gp-count-num { color: #ff6b6b; }
[data-theme="dark"] .gp-title { color: #f4f4f5; }
[data-theme="dark"] .gp-title span { background: linear-gradient(98deg, #ff5b5b, #ff8f8f); -webkit-background-clip: text; background-clip: text; }
[data-theme="dark"] .gp-search {
    border-color: #26262e;
    background: #1b1b21;
    color: #f4f4f5;
}
[data-theme="dark"] .gp-search::placeholder { color: #6c6c76; }
[data-theme="dark"] .gp-search:focus {
    border-color: #ff6b6b;
    background: #1e1e25;
    box-shadow: 0 0 0 4px rgba(255, 107, 107, .14);
}
[data-theme="dark"] .gp-search-wrap:focus-within .gp-search-icon { color: #ff6b6b; }
[data-theme="dark"] .gp-search-clear:hover { background: rgba(255, 107, 107, .14); color: #ff6b6b; }
[data-theme="dark"] .gp-rail-title { color: #f4f4f5; }
[data-theme="dark"] .gp-rail-count { background: #1c1c22; color: #8a8a94; }
[data-theme="dark"] .gp-rail-arrow { background: #1b1b21; border-color: #26262e; color: #b6b6c0; }
[data-theme="dark"] .gp-rail-arrow:hover { border-color: rgba(255, 107, 107, .5); color: #ff6b6b; background: #1e1e25; }
[data-theme="dark"] .gp-skel-card { background: #15151a; border-color: #22222b; }
[data-theme="dark"] .gp-skel-thumb, [data-theme="dark"] .gp-skel-line, [data-theme="dark"] .gp-skel-rail-title {
    background: linear-gradient(100deg, #1c1c22 30%, #26262e 50%, #1c1c22 70%);
    background-size: 200% 100%;
}
[data-theme="dark"] .gp-empty-icon { background: #1a1a1f; color: #6c6c76; }
[data-theme="dark"] .gp-empty-title { color: #f4f4f5; }

@media (max-width: 720px) {
    .gp-main { padding: 18px 14px 64px; }
    .gp-console { padding-bottom: 18px; }
    .gp-count-num { font-size: 22px; }
    .gp-search { height: 52px; font-size: 15px; }
    .gp-rail-title { font-size: 17px; }
    .gp-rail-arrows { display: none; }
    .gp-rail-track { gap: 11px; }
    .gp-rail-track > .showcase-card-wrap,
    .gp-rail-track > .gp-skel-card { flex-basis: 150px; width: 150px; }
    .gp-rail { margin-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .gp-grid-enter > .showcase-card-wrap,
    .gp-rail-enter > .gp-rail-track > .showcase-card-wrap { animation: none; opacity: 1; }
    .gp-skel-thumb, .gp-skel-line, .gp-skel-rail-title { animation: none; }
}