:root { color-scheme: light; }
body.front-modern {
  --front-bg: #f6f8fb;
  --front-surface: #ffffff;
  --front-soft: #eef4ff;
  --front-text: #172033;
  --front-muted: #667085;
  --front-line: #d9e2ef;
  --front-primary: #2563eb;
  --front-primary-dark: #1d4ed8;
  --front-primary-soft: #dbeafe;
  --front-accent: #f59e0b;
  --front-accent-soft: #fef3c7;
  --front-success: #047857;
  --front-success-soft: #dcfce7;
  --front-readers: #0284c7;
  --front-readers-soft: #e0f2fe;
  --front-shadow: 0 18px 50px rgba(23, 32, 51, .10);
  --front-hero-image: none;
  --front-hero-position: center right;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--front-bg);
  color: var(--front-text);
  font: 16px/1.55 Inter, Roboto, Arial, sans-serif;
}
body.front-modern.theme-lato { --front-primary: #0ea5e9; --front-primary-dark: #0369a1; --front-primary-soft: #e0f2fe; --front-accent: #f59e0b; --front-accent-soft: #fef3c7; --front-bg: #f7fbff; --front-hero-image: url('images/lato/hero-bg.png'); }
body.front-modern.theme-zima { --front-primary: #2563eb; --front-primary-dark: #1e40af; --front-primary-soft: #dbeafe; --front-accent: #38bdf8; --front-accent-soft: #e0f2fe; --front-bg: #f5f8ff; --front-hero-image: url('images/zima/hero-bg.png'); }
body.front-modern.theme-jesien { --front-primary: #b45309; --front-primary-dark: #78350f; --front-primary-soft: #ffedd5; --front-accent: #dc2626; --front-accent-soft: #fee2e2; --front-bg: #fff8f1; --front-hero-image: url('images/jesien/hero-bg.png'); }
body.front-modern.theme-wiosne { --front-primary: #16a34a; --front-primary-dark: #166534; --front-primary-soft: #dcfce7; --front-accent: #0ea5e9; --front-accent-soft: #e0f2fe; --front-bg: #f7fff9; --front-hero-image: url('images/wiosne/hero-bg.png'); }
body.front-modern.theme-gwiazdka { --front-primary: #be123c; --front-primary-dark: #881337; --front-primary-soft: #ffe4e6; --front-accent: #0f766e; --front-accent-soft: #ccfbf1; --front-bg: #fff8fa; --front-hero-image: url('images/gwiazdka/hero-bg.png'); }
body.front-modern.theme-wiosna { --front-primary: #16a34a; --front-primary-dark: #166534; --front-primary-soft: #dcfce7; --front-accent: #0ea5e9; --front-accent-soft: #e0f2fe; --front-bg: #f7fff9; --front-hero-image: url('images/wiosne/hero-bg.png'); }
body.front-modern.theme-historia { --front-primary: #7c3aed; --front-primary-dark: #5b21b6; --front-primary-soft: #ede9fe; --front-accent: #a16207; --front-accent-soft: #fef3c7; --front-bg: #faf8ff; --front-hero-image: url('images/historia/hero-bg.png'); }
body.front-modern.theme-katolicka { --front-primary: #0f766e; --front-primary-dark: #115e59; --front-primary-soft: #ccfbf1; --front-accent: #ca8a04; --front-accent-soft: #fef9c3; --front-bg: #f6fffd; --front-hero-image: url('images/katolicka/hero-bg.png'); }
body.front-modern.theme-psychologiczna { --front-primary: #7c3aed; --front-primary-dark: #5b21b6; --front-primary-soft: #ede9fe; --front-accent: #db2777; --front-accent-soft: #fce7f3; --front-bg: #fbf8ff; --front-hero-image: url('images/psychologiczna/hero-bg.png'); }
body.front-modern.theme-roku { --front-primary: #334155; --front-primary-dark: #0f172a; --front-primary-soft: #e2e8f0; --front-accent: #2563eb; --front-accent-soft: #dbeafe; --front-bg: #f8fafc; --front-hero-image: url('images/roku/hero-bg.png'); }
.front-modern * { box-sizing: border-box; }
.front-modern a { color: inherit; text-decoration: none; }
.front-wrap { width: min(1220px, calc(100% - 40px)); margin: 0 auto; }
.front-topbar { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--front-line); backdrop-filter: blur(14px); }
.front-nav { min-height: 74px; display: flex; align-items: center; gap: 24px; }
.front-logo { display: grid; gap: 0; font-weight: 800; color: var(--front-text); letter-spacing: 0; }
.front-logo span { font-size: 21px; }
.front-logo small { color: var(--front-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.front-menu-toggle { display: none; align-items: center; gap: 7px; min-height: 42px; border: 1px solid var(--front-line); border-radius: 8px; background: #fff; color: var(--front-text); font: inherit; font-weight: 800; padding: 8px 11px; cursor: pointer; }
.front-menu-toggle span { display: block; width: 17px; height: 2px; border-radius: 999px; background: currentColor; }
.front-menu-toggle em { font-style: normal; }
.front-menu,
.front-menu#navigation { display: block !important; margin-left: auto; }
.front-menu ul,
.front-menu#navigation ul { position: static !important; display: flex !important; list-style: none; align-items: center; gap: 4px; margin: 0; padding: 0; background: transparent !important; }
.front-menu li,
.front-menu#navigation li { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.front-menu li.home a { width: auto !important; min-width: 62px !important; height: auto !important; background: transparent !important; }
.front-menu li.home a:before { content: 'Start'; }
.front-menu a { display: inline-flex !important; min-height: 38px; align-items: center; padding: 8px 12px; border: 0 !important; border-radius: 8px; color: var(--front-muted) !important; font-weight: 700; font-size: 14px; background: transparent !important; box-shadow: none !important; text-decoration: none !important; }
.front-menu a:hover { background: var(--front-primary-soft) !important; color: var(--front-primary-dark) !important; text-decoration: none !important; }
.front-cta, .front-primary, .front-card-link, .front-card-vote, .vote, input[type='submit'].vote { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 8px; border: 0; padding: 10px 16px; background: var(--front-primary); color: #fff !important; font-weight: 800; cursor: pointer; }
.front-cta:hover, .front-primary:hover, .front-card-link:hover, .front-card-vote:hover, .vote:hover, input[type='submit'].vote:hover { background: var(--front-primary-dark); }
.front-page { padding-bottom: 54px; }
.front-hero { border-bottom: 1px solid var(--front-line); background-image: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 42%, rgba(255,255,255,.46) 70%, rgba(255,255,255,.22) 100%), linear-gradient(180deg, var(--front-primary-soft), rgba(255,255,255,0)), var(--front-hero-image); background-size: cover, cover, cover; background-position: center, center, var(--front-hero-position); background-repeat: no-repeat; }
.front-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 38px; align-items: end; padding: 58px 0 34px; }
.front-kicker, .front-eyebrow { display: inline-flex; color: var(--front-primary-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.front-hero h1 { max-width: 780px; margin: 10px 0 12px; font-size: clamp(38px, 6vw, 74px); line-height: .98; letter-spacing: 0; }
.front-hero p { max-width: 680px; margin: 0; color: var(--front-muted); font-size: 19px; }
.front-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.front-secondary { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--front-line); background: #fff; color: var(--front-text); font-weight: 800; }
.front-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.front-stats div { background: rgba(255,255,255,.84); border: 1px solid var(--front-line); border-radius: 10px; padding: 16px; box-shadow: var(--front-shadow); }
.front-stats strong { display: block; font-size: 32px; line-height: 1; }
.front-stats span { display: block; margin-top: 5px; color: var(--front-muted); font-size: 13px; font-weight: 700; }
.front-content { padding-top: 34px; }
.front-list-head, .front-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.front-list-head h2, .front-section-head h2, .front-page-title h1 { margin: 4px 0 0; font-size: 34px; line-height: 1.1; }
.front-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.front-filter-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 12px; border: 1px solid var(--front-line); border-radius: 999px; background: #fff; color: var(--front-muted); font-weight: 800; font-size: 13px; }
.front-filter-chip:hover, .front-filter-chip.is-active { background: var(--front-primary); border-color: var(--front-primary); color: #fff; }
.front-extra { color: var(--front-muted); margin-bottom: 20px; overflow-wrap: anywhere; }
.front-category-section { scroll-margin-top: 96px; margin: 34px 0 48px; }
.front-count { color: var(--front-muted); font-weight: 800; }
.front-books-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.front-book-card { display: flex; flex-direction: column; min-width: 0; background: var(--front-surface); border: 1px solid var(--front-line); border-radius: 10px; overflow: hidden; box-shadow: 0 12px 28px rgba(23,32,51,.07); transition: transform .18s ease, box-shadow .18s ease; }
.front-book-card:hover { transform: translateY(-3px); box-shadow: var(--front-shadow); }
.front-book-card.is-jury-winner { border-top: 5px solid var(--front-accent); }
.front-book-card.is-readers-winner { border-top: 5px solid var(--front-readers); }
.front-cover { display: block; padding: 18px 18px 0; background: linear-gradient(180deg, var(--front-soft), #fff); }
.front-cover img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 16px 28px rgba(15,23,42,.22); background: #e5e7eb; }
.front-card-body { display: flex; flex: 1; flex-direction: column; padding: 16px; }
.front-card-status { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin-bottom: 10px; }
.front-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; font-size: 11px; line-height: 1; font-weight: 800; }
.front-status-nomination { background: var(--front-accent-soft); color: #92400e; }
.front-status-jury { background: var(--front-success-soft); color: var(--front-success); }
.front-status-readers { background: var(--front-readers-soft); color: var(--front-readers); }
.front-status-neutral { background: #eef2f7; color: var(--front-muted); }
.front-book-title { display: -webkit-box; min-height: 52px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 18px; line-height: 1.25; font-weight: 800; color: var(--front-text); }
.front-book-title:hover { color: var(--front-primary-dark); }
.front-book-author { margin-top: 8px; color: var(--front-muted); font-weight: 700; }
.front-book-meta { margin-top: 8px; color: var(--front-primary-dark); font-size: 13px; font-weight: 800; }
.front-card-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: auto; padding-top: 14px; }
.front-card-vote { background: var(--front-accent); }
.front-card-vote:hover { background: #b45309; }
.front-empty, .message, .front-modern fieldset { background: #fff; border: 1px solid var(--front-line); border-radius: 10px; padding: 18px; box-shadow: var(--front-shadow); }
.front-partners-section { margin-top: 30px; }
.front-partners { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 18px; background: #fff; border: 1px solid var(--front-line); border-radius: 10px; }
.front-partners img { max-height: 70px; max-width: 180px; object-fit: contain; filter: grayscale(.15); }
.front-footer { margin-top: 50px; padding: 28px 0; border-top: 1px solid var(--front-line); background: #fff; }
.front-footer-grid { display: flex; justify-content: space-between; gap: 20px; align-items: center; color: var(--front-muted); }
.front-footer strong { color: var(--front-text); }
.front-footer p { margin: 2px 0 0; }
.front-footer-links { display: flex; flex-wrap: wrap; gap: 14px; font-weight: 700; }
.front-subpage { padding-top: 34px; }
.front-page-title { margin-bottom: 18px; }
.front-text-page .head, .front-text-page .headsub { margin-bottom: 18px; }
.front-text-page > .head, .front-text-page > .headsub { padding: 28px 0 8px; border-bottom: 1px solid var(--front-line); }
.front-text-page > .head h1, .front-text-page > .headsub h1 { margin: 0; color: var(--front-text); font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: 0; }
.front-text-page h1, .front-text-page h2, .front-vote-page h1, .front-results-page h1 { color: var(--front-text); }
.front-text-page > .text { background: #fff; border: 1px solid var(--front-line); border-radius: 12px; padding: 26px; box-shadow: var(--front-shadow); color: var(--front-text); font-size: 17px; line-height: 1.72; overflow-wrap: anywhere; }
.front-text-page > .text p { margin: 0 0 15px; }
.front-text-page > .text h2 { margin: 30px 0 12px; font-size: 28px; line-height: 1.18; }
.front-text-page > .text h3 { margin: 24px 0 10px; font-size: 22px; line-height: 1.22; }
.front-text-page > .text ul, .front-text-page > .text ol { margin: 14px 0; padding-left: 22px; }
.front-text-page > .text li { margin: 8px 0; }
.front-text-page > .text a { color: var(--front-primary-dark); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.front-text-page > .text table { width: 100% !important; border-collapse: collapse; margin: 18px 0; }
.front-text-page > .text th, .front-text-page > .text td { padding: 12px 14px; border: 1px solid var(--front-line); text-align: left; vertical-align: top; }
.front-text-page > .text th { background: #f8fafc; color: var(--front-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.front-vote-page form, .front-modern fieldset.form { display: grid; gap: 14px; }
.front-vote-page p, .front-modern fieldset p { margin: 0 0 12px; }
.front-vote-page label { display: block; margin-bottom: 6px; font-weight: 800; }
.front-modern input.text, .front-modern input[type='text'], .front-modern input[type='email'], .front-modern select, .front-modern textarea { width: 100%; min-height: 42px; border: 1px solid var(--front-line); border-radius: 8px; padding: 10px 12px; font: inherit; background: #fff; color: var(--front-text); }
.front-modern .rules { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; padding: 12px; border-radius: 8px; background: #f8fafc; }
.front-vote-form { display: grid; gap: 24px; }
.front-vote-intro { margin: 0 0 22px; border: 1px solid var(--front-line); border-radius: 12px; background: #fff; box-shadow: var(--front-shadow); overflow: hidden; }
.front-vote-intro summary { cursor: pointer; padding: 16px 18px; font-weight: 800; color: var(--front-text); list-style-position: inside; }
.front-vote-intro .front-extra { margin: 0; padding: 0 18px 18px; }
.front-voter-card, .front-vote-category { background: #fff; border: 1px solid var(--front-line); border-radius: 12px; padding: 22px; box-shadow: var(--front-shadow); }
.front-voter-card h2 { margin: 0 0 16px; font-size: 24px; }
.front-voter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.front-voter-grid label { display: grid; gap: 7px; margin: 0; }
.front-voter-grid label span { color: var(--front-muted); font-size: 12px; font-weight: 700; }
.front-voter-wide { grid-column: 1 / -1; }
.front-vote-picker { display: grid; gap: 18px; }
.front-vote-picker .front-page-title { margin-bottom: 0; }
.front-vote-picker .front-page-title p { max-width: 780px; margin: 8px 0 0; color: var(--front-muted); }
.front-vote-category-head { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin-bottom: 14px; }
.front-vote-category-head h3 { margin: 0; font-size: 25px; line-height: 1.15; }
.front-clear-vote { color: var(--front-muted); font-size: 13px; font-weight: 800; }
.front-clear-vote:hover { color: var(--front-primary-dark); }
.front-vote-empty { position: absolute; opacity: 0; pointer-events: none; }
.front-vote-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.front-vote-book { display: block; margin: 0; cursor: pointer; }
.front-vote-book input { position: absolute; opacity: 0; pointer-events: none; }
.front-vote-book-card { position: relative; display: grid; grid-template-rows: 255px auto 1fr auto; height: 100%; min-height: 390px; padding: 12px; border: 2px solid var(--front-line); border-radius: 12px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease; }
.front-vote-book-card img { display: block; width: 100%; height: 255px; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 22px rgba(15,23,42,.18); background: #f1f5f9; }
.front-vote-book-card strong { display: -webkit-box; min-height: 44px; margin-top: 12px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; line-height: 1.25; color: var(--front-text); }
.front-vote-book-card em { display: block; margin-top: 6px; color: var(--front-muted); font-style: normal; font-weight: 700; font-size: 13px; }
.front-vote-check { visibility: hidden; display: inline-flex; width: fit-content; margin-top: 10px; border-radius: 999px; padding: 5px 9px; background: #eef2f7; color: var(--front-muted); font-size: 12px; font-weight: 800; }
.front-vote-book:hover .front-vote-book-card { transform: translateY(-2px); box-shadow: var(--front-shadow); }
.front-vote-book input:checked + .front-vote-book-card { border-color: var(--front-primary); background: var(--front-primary-soft); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), var(--front-shadow); }
.front-vote-book input:checked + .front-vote-book-card .front-vote-check { visibility: visible; background: var(--front-primary); color: #fff; }
.front-rule { display: grid !important; grid-template-columns: 1fr auto; gap: 14px; align-items: start; margin: 0 0 12px !important; padding: 14px; border-radius: 10px; background: #f8fafc; }
.front-consents-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.front-consents-head h2 { margin: 0; }
.front-accept-all { min-height: 28px; border: 0; border-radius: 999px; padding: 4px 9px; background: var(--front-primary-soft); color: var(--front-primary-dark); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.front-accept-all:hover { background: var(--front-primary); color: #fff; }
.front-consents .front-rule { padding: 11px 12px; font-size: 13px; line-height: 1.4; }
.front-rule span { font-weight: 700; color: var(--front-text); }
.front-recaptcha { margin-top: 14px; overflow-x: auto; }
.front-submit-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.front-privacy-note { color: var(--front-muted); font-size: 13px; }
.front-book-detail { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 34px; align-items: start; background: #fff; border: 1px solid var(--front-line); border-radius: 12px; padding: 26px; box-shadow: var(--front-shadow); }
.front-detail-cover img { width: 100%; border-radius: 8px; box-shadow: 0 18px 35px rgba(15,23,42,.22); }
.front-detail-info h1 { margin: 6px 0 4px; font-size: clamp(34px, 5vw, 58px); line-height: 1; }
.front-detail-author { margin: 0 0 18px; color: var(--front-muted); font-size: 20px; font-weight: 800; }
.front-detail-info dl { display: grid; grid-template-columns: 150px 1fr; gap: 9px 14px; margin: 0 0 18px; }
.front-detail-info dt { color: var(--front-muted); font-weight: 800; }
.front-detail-info dd { margin: 0; }
.front-detail-desc { grid-column: 1 / -1; color: var(--front-text); font-size: 17px; }
.front-detail-desc p { margin-top: 0; }
.front-price-table { margin-top: 20px; }
.front-price-table table { width: 100%; border-collapse: collapse; }
.front-price-table th, .front-price-table td { padding: 10px; border-bottom: 1px solid var(--front-line); text-align: left; }
.front-results-board { display: grid; gap: 28px; }
.front-results-section { background: #fff; border: 1px solid var(--front-line); border-radius: 14px; padding: 22px; box-shadow: var(--front-shadow); }
.front-results-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 18px; }
.front-results-section-head h2 { margin: 4px 0 0; font-size: 30px; line-height: 1.1; }
.front-results-total { display: inline-flex; align-items: center; min-height: 34px; border-radius: 999px; padding: 7px 12px; background: var(--front-primary-soft); color: var(--front-primary-dark); font-size: 13px; font-weight: 800; white-space: nowrap; }
.front-results-list { display: grid; gap: 12px; }
.front-result-card { display: grid; grid-template-columns: 82px minmax(0, 1fr) 118px; gap: 16px; align-items: center; min-width: 0; border: 1px solid var(--front-line); border-radius: 12px; padding: 12px; background: #fff; }
.front-result-card.is-top-result { border-color: rgba(37,99,235,.32); background: linear-gradient(90deg, #fff 0%, #fff 56%, var(--front-accent-soft) 100%); }
.front-result-cover { display: block; width: 82px; }
.front-result-cover img { display: block; width: 82px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 18px rgba(15,23,42,.18); background: #e5e7eb; }
.front-result-main { min-width: 0; display: grid; gap: 6px; }
.front-result-rank { color: var(--front-muted); font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.front-result-title { color: var(--front-text); font-size: 18px; line-height: 1.22; font-weight: 900; }
.front-result-title:hover { color: var(--front-primary-dark); }
.front-result-author { color: var(--front-muted); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.front-result-meter { width: 100%; height: 12px; overflow: hidden; border-radius: 999px; background: #e5e7eb; }
.front-result-meter span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--front-primary), var(--front-accent)); }
.front-result-score { display: grid; gap: 3px; justify-items: end; text-align: right; }
.front-result-score strong { color: var(--front-primary-dark); font-size: 28px; line-height: 1; }
.front-result-score span { color: var(--front-muted); font-size: 13px; font-weight: 800; }
.front-results-old-stage { text-align: center; }
.front-results-old-stage a { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; border-radius: 8px; padding: 9px 14px; background: var(--front-primary); color: #fff; font-weight: 800; }
.front-recommend-page { display: grid; gap: 22px; }
.front-recommend-title h2 { margin: 8px 0 0; color: var(--front-muted); font-size: 20px; line-height: 1.25; }
.front-recommend-intro { max-width: 980px; color: var(--front-muted); font-size: 17px; }
.front-recommend-intro p { margin: 0 0 10px; }
.front-recommend-intro a { color: var(--front-primary-dark); font-weight: 800; }
.front-recommend-grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.front-recommend-form, .front-recommend-ranking, .front-recommend-alert { background: #fff; border: 1px solid var(--front-line); border-radius: 12px; box-shadow: var(--front-shadow); }
.front-recommend-form { display: grid; gap: 14px; padding: 20px; }
.front-recommend-form h3 { margin: 0; font-size: 22px; line-height: 1.2; }
.front-recommend-form label { display: grid; gap: 8px; font-weight: 800; }
.front-recommend-form input[type='submit'] { justify-self: start; margin-top: 4px; }
.front-recommend-ranking { min-width: 0; padding: 20px; }
.front-rank-table-wrap { width: 100%; overflow-x: auto; }
.front-rank-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.front-rank-table th, .front-rank-table td { padding: 12px 10px; border-bottom: 1px solid var(--front-line); text-align: left; vertical-align: middle; }
.front-rank-table th { color: var(--front-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.front-rank-position { width: 48px; color: var(--front-muted); font-weight: 800; }
.front-rank-login { width: 42%; overflow-wrap: anywhere; font-weight: 800; }
.front-rank-count { width: 105px; white-space: nowrap; color: var(--front-text); }
.front-rank-bar { min-width: 150px; }
.front-rank-bar span { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--front-primary), var(--front-accent)); }
.front-rank-empty { color: var(--front-muted); text-align: center; }
.front-recommend-alert { padding: 16px 18px; }
.front-recommend-alert strong { display: block; margin-bottom: 6px; }
.front-recommend-alert a { color: var(--front-primary-dark); overflow-wrap: anywhere; font-weight: 800; }
.front-recommend-alert.is-error { border-color: #fecaca; background: #fff1f2; color: #9f1239; }
.front-recommend-alert.is-success { border-color: var(--front-primary-soft); background: #f8fafc; }
.front-referral-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 14px; align-items: end; padding: 18px; border-color: rgba(37,99,235,.28); background: linear-gradient(135deg, #fff 0%, var(--front-accent-soft) 100%); }
.front-referral-link-box { min-width: 0; }
.front-referral-link-box strong { color: var(--front-primary-dark); font-size: 18px; }
.front-referral-link { display: flex; align-items: center; min-height: 46px; margin-top: 8px; padding: 11px 14px; border: 1px dashed rgba(37,99,235,.42); border-radius: 10px; background: rgba(255,255,255,.82); color: var(--front-text) !important; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.front-copy-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 8px; padding: 11px 15px; background: var(--front-primary); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.front-copy-link:hover, .front-copy-link.is-copied { background: var(--front-primary-dark); }
.front-copy-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.front-copy-message { grid-column: 1 / -1; min-height: 20px; color: var(--front-primary-dark); font-size: 14px; font-weight: 800; }
.front-recommend-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); gap: 28px; align-items: center; overflow: hidden; border: 1px solid var(--front-line); border-radius: 16px; background: linear-gradient(135deg, #fff 0%, var(--front-accent-soft) 100%); box-shadow: var(--front-shadow); }
.front-recommend-copy { padding: 34px; }
.front-recommend-copy h1 { margin: 8px 0 8px; font-size: clamp(34px, 5vw, 62px); line-height: 1; letter-spacing: 0; }
.front-recommend-copy h2 { margin: 0 0 16px; color: var(--front-muted); font-size: 22px; line-height: 1.25; }
.front-recommend-copy p { margin: 0 0 10px; color: var(--front-muted); font-size: 17px; line-height: 1.6; }
.front-recommend-copy a { color: var(--front-primary-dark); font-weight: 800; }
.front-recommend-hero img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: center; display: block; }
.front-schedule-page { display: grid; gap: 24px; }
.front-schedule-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); gap: 28px; align-items: center; overflow: hidden; border: 1px solid var(--front-line); border-radius: 16px; background: linear-gradient(135deg, #fff 0%, var(--front-primary-soft) 100%); box-shadow: var(--front-shadow); }
.front-schedule-copy { padding: 34px; }
.front-schedule-copy h1 { margin: 8px 0 8px; font-size: clamp(34px, 5vw, 62px); line-height: 1; letter-spacing: 0; }
.front-schedule-copy h2 { margin: 0; color: var(--front-muted); font-size: 22px; line-height: 1.25; }
.front-schedule-hero img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: center; display: block; }
.front-schedule-body { background: #fff; border: 1px solid var(--front-line); border-radius: 12px; padding: 26px; box-shadow: var(--front-shadow); color: var(--front-text); font-size: 17px; line-height: 1.7; }
.front-schedule-body p { margin: 0 0 14px; }
.front-schedule-body h2, .front-schedule-body h3 { margin: 26px 0 12px; line-height: 1.2; color: var(--front-text); }
.front-schedule-body ul, .front-schedule-body ol { margin: 14px 0; padding-left: 22px; }
.front-schedule-body li { margin: 8px 0; }
.front-schedule-body table { width: 100% !important; border-collapse: collapse; margin: 16px 0; background: #fff; }
.front-schedule-body th, .front-schedule-body td { padding: 12px 14px; border: 1px solid var(--front-line); text-align: left; vertical-align: top; }
.front-schedule-body th { background: #f8fafc; color: var(--front-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.front-about-page { display: grid; gap: 24px; }
.front-about-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); gap: 28px; align-items: center; overflow: hidden; border: 1px solid var(--front-line); border-radius: 16px; background: #fff; box-shadow: var(--front-shadow); }
.front-about-copy { padding: 34px; }
.front-about-copy .front-eyebrow { display: none; }
.front-about-copy h1 { margin: 0 0 8px; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.05; letter-spacing: 0; }
.front-about-copy h2 { margin: 0; color: var(--front-muted); font-size: 22px; line-height: 1.25; }
.front-about-hero img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: center; display: block; }
.front-about-body { background: #fff; border: 1px solid var(--front-line); border-radius: 12px; padding: 26px; box-shadow: var(--front-shadow); color: var(--front-text); font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
.front-about-body p { margin: 0 0 14px; }
.front-about-body h2, .front-about-body h3 { margin: 26px 0 12px; line-height: 1.2; color: var(--front-text); }
.front-about-body ul, .front-about-body ol { margin: 14px 0; padding-left: 22px; }
.front-about-body li { margin: 8px 0; }
.front-about-body table { width: 100% !important; border-collapse: collapse; margin: 16px 0; background: #fff; }
.front-about-body th, .front-about-body td { padding: 12px 14px; border: 1px solid var(--front-line); text-align: left; vertical-align: top; }
.front-about-body th { background: #f8fafc; color: var(--front-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.front-rules-page { display: grid; gap: 24px; }
.front-rules-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); gap: 28px; align-items: center; overflow: hidden; border: 1px solid var(--front-line); border-radius: 16px; background: linear-gradient(135deg, #fff 0%, var(--front-primary-soft) 100%); box-shadow: var(--front-shadow); }
.front-rules-copy { padding: 34px; }
.front-rules-copy h1 { margin: 8px 0 8px; font-size: clamp(38px, 5vw, 56px); line-height: 1; letter-spacing: 0; }
.front-rules-copy h2 { margin: 0; color: var(--front-muted); font-size: 22px; line-height: 1.25; }
.front-rules-hero img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: center; display: block; }
.front-rules-body { background: #fff; border: 1px solid var(--front-line); border-radius: 12px; padding: 26px; box-shadow: var(--front-shadow); color: var(--front-text); font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
.front-rules-body p { margin: 0 0 14px; }
.front-rules-body h2, .front-rules-body h3 { margin: 26px 0 12px; line-height: 1.2; color: var(--front-text); }
.front-rules-body .front-rules-full-title { margin: 0 0 20px; font-size: 26px; line-height: 1.25; color: var(--front-text); }
.front-rules-body ul, .front-rules-body ol { margin: 14px 0; padding-left: 22px; }
.front-rules-body li { margin: 8px 0; }
.front-rules-body table { width: 100% !important; border-collapse: collapse; margin: 16px 0; background: #fff; }
.front-rules-body th, .front-rules-body td { padding: 12px 14px; border: 1px solid var(--front-line); text-align: left; vertical-align: top; }
.front-rules-body th { background: #f8fafc; color: var(--front-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.front-prizes-page { display: grid; gap: 24px; }
.front-prizes-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); gap: 28px; align-items: center; overflow: hidden; border: 1px solid var(--front-line); border-radius: 16px; background: #fff; box-shadow: var(--front-shadow); }
.front-prizes-copy { padding: 34px; }
.front-prizes-copy h1 { margin: 8px 0 8px; font-size: clamp(38px, 5vw, 56px); line-height: 1; letter-spacing: 0; }
.front-prizes-copy h2 { margin: 0; color: var(--front-muted); font-size: 22px; line-height: 1.25; }
.front-prizes-hero img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: center; display: block; }
.front-prizes-body { background: #fff; border: 1px solid var(--front-line); border-radius: 12px; padding: 26px; box-shadow: var(--front-shadow); color: var(--front-text); font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
.front-prizes-body p { margin: 0 0 14px; }
.front-prizes-body h2, .front-prizes-body h3 { margin: 26px 0 12px; line-height: 1.2; color: var(--front-text); }
.front-prizes-body ul, .front-prizes-body ol { margin: 14px 0; padding-left: 22px; }
.front-prizes-body li { margin: 8px 0; }
.front-prizes-body table { width: 100% !important; border-collapse: collapse; margin: 16px 0; background: #fff; }
.front-prizes-body th, .front-prizes-body td { padding: 12px 14px; border: 1px solid var(--front-line); text-align: left; vertical-align: top; }
.front-prizes-body th { background: #f8fafc; color: var(--front-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.front-confirm-page { display: grid; gap: 24px; }
.front-confirm-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); gap: 28px; align-items: center; overflow: hidden; border: 1px solid var(--front-line); border-radius: 16px; background: #fff; box-shadow: var(--front-shadow); }
.front-confirm-copy { padding: 34px; }
.front-confirm-copy h1 { margin: 8px 0 8px; font-size: clamp(38px, 5vw, 56px); line-height: 1; letter-spacing: 0; }
.front-confirm-copy h2 { margin: 0; color: var(--front-muted); font-size: 22px; line-height: 1.25; }
.front-confirm-hero img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: center; display: block; }
.front-confirm-body { background: #fff; border: 1px solid var(--front-line); border-radius: 12px; padding: 26px; box-shadow: var(--front-shadow); color: var(--front-text); font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
.front-confirm-body p { margin: 0 0 14px; }
.front-confirm-body h2, .front-confirm-body h3 { margin: 26px 0 12px; line-height: 1.2; color: var(--front-text); }
.front-confirm-body ul, .front-confirm-body ol { margin: 14px 0; padding-left: 22px; }
.front-confirm-body li { margin: 8px 0; }
.front-confirm-body table { width: 100% !important; border-collapse: collapse; margin: 16px 0; background: #fff; }
.front-confirm-body th, .front-confirm-body td { padding: 12px 14px; border: 1px solid var(--front-line); text-align: left; vertical-align: top; }
.front-confirm-body th { background: #f8fafc; color: var(--front-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.front-confirm-form { display: grid; gap: 14px; max-width: 420px; }
.front-confirm-form label { display: grid; gap: 8px; font-weight: 800; }
.front-confirm-form input[type='submit'] { justify-self: start; }
.award, .award2 { display: inline-flex; margin: 8px 0; border-radius: 999px; padding: 6px 10px; background: var(--front-accent); color: #fff; font-weight: 800; font-size: 12px; }
.butt { margin: 18px 0; }
@media (max-width: 1050px) { .front-hero-grid { grid-template-columns: 1fr; } .front-books-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .front-stats { max-width: 560px; } }
@media (max-width: 780px) { .front-wrap { width: min(100% - 28px, 1220px); } .front-nav { flex-wrap: wrap; padding: 12px 0; } .front-menu-toggle { display: inline-grid; grid-template-columns: 17px auto; grid-template-rows: repeat(3, 2px); align-content: center; column-gap: 8px; row-gap: 4px; margin-left: auto; } .front-menu-toggle em { grid-row: 1 / 4; grid-column: 2; align-self: center; } .front-menu, .front-menu#navigation { display: none !important; order: 4; width: 100%; max-width: 100%; margin-left: 0; padding-top: 8px; } .front-menu-open .front-menu, .front-menu-open .front-menu#navigation { display: block !important; } .front-menu ul, .front-menu#navigation ul { width: 100%; max-width: 100%; flex-wrap: wrap; align-items: flex-start; gap: 4px; } .front-menu li, .front-menu#navigation li { width: 100% !important; border: 0 !important; } .front-menu a { width: 100%; min-height: 38px; padding: 8px 0; font-size: 14px; background: transparent !important; border: 0 !important; box-shadow: none !important; } .front-hero-grid { padding: 38px 0 26px; } .front-stats { grid-template-columns: 1fr 1fr 1fr; } .front-list-head, .front-section-head, .front-footer-grid { align-items: flex-start; flex-direction: column; } .front-filters { justify-content: flex-start; } .front-books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .front-book-detail { grid-template-columns: 1fr; padding: 18px; } .front-detail-cover { max-width: 300px; } }
@media (max-width: 780px) { .front-results-section { padding: 16px; } .front-results-section-head { align-items: flex-start; flex-direction: column; } .front-results-section-head h2 { font-size: 25px; } .front-result-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; } .front-result-cover, .front-result-cover img { width: 64px; } .front-result-score { grid-column: 2; grid-template-columns: auto auto; justify-content: space-between; justify-items: start; text-align: left; align-items: baseline; } .front-result-score strong { font-size: 24px; } .front-result-title { font-size: 16px; } }
@media (max-width: 780px) { .front-recommend-grid { grid-template-columns: 1fr; } .front-recommend-form input[type='submit'] { width: 100%; } .front-rank-table { table-layout: auto; } }
@media (max-width: 780px) { .front-recommend-hero { grid-template-columns: 1fr; } .front-recommend-copy { padding: 24px; } .front-recommend-copy h1 { font-size: 30px; } .front-recommend-copy p { font-size: 15px; } .front-recommend-hero img { min-height: 190px; max-height: 230px; } .front-referral-result { grid-template-columns: 1fr; } .front-copy-link { width: 100%; } }
@media (max-width: 780px) { .front-schedule-hero { grid-template-columns: 1fr; } .front-schedule-copy { padding: 24px; } .front-schedule-hero img { min-height: 210px; max-height: 300px; } .front-schedule-body { padding: 18px; overflow-x: auto; } }
@media (max-width: 780px) { .front-about-hero { grid-template-columns: 1fr; } .front-about-copy { padding: 24px; } .front-about-hero img { min-height: 210px; max-height: 300px; } .front-about-body { padding: 18px; overflow-x: auto; } }
@media (max-width: 780px) { .front-rules-hero { grid-template-columns: 1fr; } .front-rules-copy { padding: 24px; } .front-rules-copy h1 { font-size: 30px; line-height: 1.08; } .front-rules-copy h2 { font-size: 18px; } .front-rules-hero img { min-height: 190px; max-height: 230px; } .front-rules-body { padding: 18px; overflow-x: auto; } }
@media (max-width: 780px) { .front-prizes-hero { grid-template-columns: 1fr; } .front-prizes-copy { padding: 24px; } .front-prizes-copy h1 { font-size: 30px; line-height: 1.08; } .front-prizes-copy h2 { font-size: 18px; } .front-prizes-hero img { min-height: 190px; max-height: 230px; } .front-prizes-body { padding: 18px; overflow-x: auto; } }
@media (max-width: 780px) { .front-confirm-hero { grid-template-columns: 1fr; } .front-confirm-copy { padding: 24px; } .front-confirm-copy h1 { font-size: 30px; line-height: 1.08; } .front-confirm-copy h2 { font-size: 18px; } .front-confirm-hero img { min-height: 190px; max-height: 230px; } .front-confirm-body { padding: 18px; overflow-x: auto; } }
@media (max-width: 520px) { .front-books-grid { grid-template-columns: 1fr; } .front-stats { grid-template-columns: 1fr; } .front-hero h1 { font-size: 38px; } .front-card-actions { grid-template-columns: 1fr; } .front-detail-info dl { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .front-recommend-title h2 { font-size: 18px; } .front-recommend-intro { font-size: 15px; } .front-recommend-form, .front-recommend-ranking { padding: 16px; } .front-rank-table th:nth-child(4), .front-rank-table td:nth-child(4) { display: none; } .front-rank-position { width: 34px; } .front-rank-count { width: 82px; font-size: 13px; } }
@media (max-width: 640px) { .front-voter-grid { grid-template-columns: 1fr; } .front-voter-card, .front-vote-category { padding: 16px; } .front-vote-category { overflow: visible; } .front-vote-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 0; margin: 0; } .front-vote-book-card { grid-template-rows: 170px auto 1fr auto; min-height: 292px; padding: 8px; } .front-vote-book-card img { height: 170px; } .front-vote-book-card strong { min-height: 40px; font-size: 14px; } .front-vote-book-card em { font-size: 12px; } .front-vote-check { font-size: 11px; padding: 4px 7px; } .front-vote-category-head { align-items: flex-start; flex-direction: row; } .front-vote-picker .front-page-title h2 { font-size: 26px; } }
@media (max-width: 430px) { .front-vote-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .front-vote-book-card { grid-template-rows: 150px auto 1fr auto; min-height: 270px; } .front-vote-book-card img { height: 150px; } }