.epgr {
--epgr-accent: #753649;
--epgr-star: #f5b301;
--epgr-star-off: #d9d9de;
--epgr-bg: transparent;
--epgr-card: #ffffff;
--epgr-text: #1f1d22;
--epgr-muted: #6b6870;
--epgr-border: #ececf0;
--epgr-radius: 14px;
--epgr-gap: 20px;
--epgr-cols: 3;
font-size: 15px;
line-height: 1.55;
color: var(--epgr-text);
background: var(--epgr-bg);
}
.epgr--dark {
--epgr-card: #1d1b20;
--epgr-text: #f4f2f5;
--epgr-muted: #a9a5ad;
--epgr-border: #2f2c33;
--epgr-star-off: #45414a;
}
@media (prefers-color-scheme: dark) {
.epgr--auto {
--epgr-card: #1d1b20;
--epgr-text: #f4f2f5;
--epgr-muted: #a9a5ad;
--epgr-border: #2f2c33;
--epgr-star-off: #45414a;
}
}
.epgr *, .epgr *::before, .epgr *::after { box-sizing: border-box; } .epgr-stars { position: relative; display: inline-block; font-size: 1.05em; line-height: 1; letter-spacing: 2px; white-space: nowrap; vertical-align: middle; }
.epgr-stars__bg { color: var(--epgr-star-off); }
.epgr-stars__fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--epgr-star); } .epgr-summary {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
margin-bottom: var(--epgr-gap); padding: 18px 22px;
background: var(--epgr-card); border: 1px solid var(--epgr-border); border-radius: var(--epgr-radius);
color: inherit; text-decoration: none;
}
.epgr-summary__main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.epgr-summary__name { flex-basis: 100%; font-weight: 600; font-size: 1.05em; }
.epgr-summary__score { font-size: 2em; font-weight: 700; line-height: 1; color: var(--epgr-accent); }
.epgr-summary .epgr-stars { font-size: 1.3em; }
.epgr-summary__count { color: var(--epgr-muted); font-size: .92em; }
.epgr-summary__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.epgr-btn {
display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
background: var(--epgr-accent); color: #fff !important; border: 1px solid var(--epgr-accent);
font-size: .9em; font-weight: 600; text-decoration: none !important; transition: opacity .2s;
}
.epgr-btn:hover, .epgr-btn:focus-visible { opacity: .88; }
.epgr-btn--ghost { background: transparent; color: var(--epgr-accent) !important; } .epgr--badge { display: inline-block; }
.epgr--badge .epgr-summary { margin: 0; padding: 10px 16px; border-radius: 999px; }
.epgr--badge .epgr-summary__score { font-size: 1.4em; }
.epgr--badge .epgr-summary__main::before { content: "G"; font-weight: 700; color: var(--epgr-accent); }
.epgr--badge a.epgr-summary:hover { border-color: var(--epgr-accent); } .epgr-track { display: grid; grid-template-columns: repeat(var(--epgr-cols), minmax(0, 1fr)); gap: var(--epgr-gap); }
.epgr--list .epgr-track { grid-template-columns: 1fr; }
.epgr-card {
display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px;
background: var(--epgr-card); border: 1px solid var(--epgr-border); border-radius: var(--epgr-radius);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.epgr-card__head { display: flex; align-items: center; gap: 12px; }
.epgr-avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; object-fit: cover; }
.epgr-avatar--initial { display: inline-flex; align-items: center; justify-content: center; background: var(--epgr-accent); color: #fff; font-weight: 600; font-size: 1.1em; }
.epgr-card__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.epgr-card__author { font-weight: 600; color: inherit !important; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.epgr-card__author:hover { color: var(--epgr-accent) !important; }
.epgr-card__date { font-size: .85em; color: var(--epgr-muted); }
.epgr-card__g { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--epgr-border); font-size: 12px; font-weight: 700; color: var(--epgr-muted); }
.epgr-card__text p { margin: 0; }
.epgr-more { margin-top: 6px; padding: 0; background: none; border: 0; color: var(--epgr-accent); font: inherit; font-size: .9em; font-weight: 600; cursor: pointer; }
.epgr-more:hover { text-decoration: underline; }
.epgr-card__source { margin-top: auto; font-size: .82em; color: var(--epgr-muted) !important; text-decoration: none !important; }
.epgr-card__source:hover { color: var(--epgr-accent) !important; } .epgr-slider { position: relative; }
.epgr--slider .epgr-track {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
scrollbar-width: none; padding-bottom: 4px;
}
.epgr--slider .epgr-track::-webkit-scrollbar { display: none; }
.epgr--slider .epgr-card {
flex: 0 0 calc((100% - (var(--epgr-cols) - 1) * var(--epgr-gap)) / var(--epgr-cols));
scroll-snap-align: start;
}
.epgr-nav {
position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; transform: translateY(-50%);
display: flex; align-items: center; justify-content: center; padding: 0;
border-radius: 50%; border: 1px solid var(--epgr-border); background: var(--epgr-card); color: var(--epgr-accent);
font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.epgr-prev { left: -14px; }
.epgr-next { right: -14px; }
.epgr-nav[disabled] { opacity: .35; cursor: default; }
.epgr-attribution { margin: 14px 0 0; font-size: .8em; color: var(--epgr-muted); text-align: right; }
.epgr-google { font-weight: 600; }
.epgr-admin-notice { padding: 12px 16px; border-left: 4px solid #d63638; background: #fff5f5; color: #50575e; font-size: 14px; }
@media (max-width: 1024px) {
.epgr--cols-3, .epgr--cols-4 { --epgr-cols: 2 !important; }
}
@media (max-width: 640px) {
.epgr { --epgr-cols: 1 !important; }
.epgr--slider .epgr-card { flex-basis: 85%; }
.epgr-prev { left: 4px; }
.epgr-next { right: 4px; }
.epgr-summary { padding: 16px; }
}