/* ===== READER SPOTLIGHT — COMPACT PREMIUM ===== */

.reader-spotlight {
 margin-top: 34px;
}

.reader-spotlight-bg {
 position: relative;
 border: 1px solid var(--line);
 border-radius: 28px;
 overflow: hidden;
 min-height: 660px;
 background:
 linear-gradient(120deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.46) 38%, rgba(0,0,0,.24) 62%, rgba(0,0,0,.48) 100%),
 url("https://images.unsplash.com/photo-1495020689067-958852a7765e?auto=format&fit=crop&w=1600&q=80");
 background-size: cover;
 background-position: center;
 box-shadow: 0 24px 60px rgba(0,0,0,.06);
}

.reader-spotlight-overlay {
 position: absolute;
 inset: 0;
 pointer-events: none;
 background:
 linear-gradient(120deg, rgba(255,255,255,.08) 0 16%, transparent 16% 43%, rgba(255,255,255,.06) 43% 58%, transparent 58% 100%),
 radial-gradient(circle at 14% 18%, rgba(255,255,255,.12), transparent 26%);
}

.reader-spotlight-inner {
 position: relative;
 z-index: 2;
 min-height: 660px;
 padding: 34px;
 display: grid;
 grid-template-columns: minmax(0, 1fr) 420px;
 gap: 24px;
 align-items: end;
}

.reader-spotlight-content {
 max-width: 700px;
 color: #fff;
 padding-right: 10px;
}

.reader-spotlight-kicker {
 display: inline-flex;
 margin-bottom: 14px;
 color: #f3f4f6;
 font-size: 11px;
 font-weight: 950;
 text-transform: uppercase;
 letter-spacing: .13em;
}

.reader-spotlight-content h2 {
 margin: 0;
 font-size: clamp(42px, 5vw, 74px);
 line-height: .92;
 letter-spacing: -0.08em;
 font-weight: 900;
 max-width: 650px;
}

.reader-spotlight-content p {
 margin: 16px 0 0;
 max-width: 620px;
 color: #eef2f7;
 font-size: 18px;
 line-height: 1.38;
}

.reader-spotlight-actions {
 margin-top: 24px;
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}

.reader-spotlight-actions a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 46px;
 padding: 0 18px;
 border-radius: 999px;
 font-size: 14px;
 font-weight: 900;
 transition: .18s ease;
}

.reader-spotlight-actions a:first-child {
 background: #fff;
 color: #111;
}

.reader-spotlight-actions a:last-child {
 border: 1px solid rgba(255,255,255,.4);
 color: #fff;
 background: rgba(255,255,255,.06);
 backdrop-filter: blur(10px);
}

.reader-spotlight-actions a:hover {
 background: var(--red);
 border-color: var(--red);
 color: #fff;
}

.reader-spotlight-mini-note {
 margin-top: 22px;
 width: min(100%, 560px);
 border: 1px solid rgba(255,255,255,.18);
 border-radius: 18px;
 padding: 14px 16px;
 background: rgba(255,255,255,.10);
 backdrop-filter: blur(12px);
}

.reader-spotlight-mini-note b {
 display: block;
 margin-bottom: 5px;
 font-size: 14px;
 line-height: 1.15;
}

.reader-spotlight-mini-note span {
 display: block;
 color: #e5e7eb;
 font-size: 13px;
 line-height: 1.35;
}

/* FORM CARD INSIDE PHOTO */

.reader-spotlight-form {
 align-self: center;
 width: 100%;
 border: 1px solid rgba(255,255,255,.22);
 border-radius: 24px;
 padding: 18px;
 background: rgba(255,255,255,.86);
 backdrop-filter: blur(18px);
 -webkit-backdrop-filter: blur(18px);
 box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

.reader-spotlight-form-head {
 margin-bottom: 14px;
 padding-bottom: 12px;
 border-bottom: 1px solid rgba(17,17,17,.08);
}

.reader-spotlight-form-head span {
 display: inline-flex;
 margin-bottom: 8px;
 color: var(--red);
 font-size: 10px;
 font-weight: 950;
 text-transform: uppercase;
 letter-spacing: .12em;
}

.reader-spotlight-form-head h3 {
 margin: 0;
 font-size: 34px;
 line-height: .96;
 letter-spacing: -0.06em;
 color: #111;
}

.reader-spotlight-form-head p {
 margin: 10px 0 0;
 color: #555;
 font-size: 13px;
 line-height: 1.35;
}

/* RESET TABLE FORM */

.reader-spotlight-form-body table,
.reader-spotlight-form-body tbody,
.reader-spotlight-form-body tr,
.reader-spotlight-form-body td {
 display: block !important;
 width: 100% !important;
 border: 0 !important;
 padding: 0 !important;
 margin: 0 !important;
}

.reader-spotlight-form-body table {
 border-collapse: collapse !important;
}

.reader-spotlight-form-body tr {
 margin-bottom: 10px !important;
}

.reader-spotlight-form-body td:first-child {
 margin-bottom: 5px !important;
 color: #444;
 font-size: 12px;
 font-weight: 850;
 line-height: 1.2;
}

.reader-spotlight-form-body td:first-child font {
 color: var(--red) !important;
}

/* INPUTS */

.reader-spotlight-form-body input[type="text"],
.reader-spotlight-form-body input[type="email"],
.reader-spotlight-form-body textarea {
 width: 100% !important;
 max-width: 100%;
 border: 1px solid rgba(17,17,17,.10) !important;
 border-radius: 14px !important;
 background: rgba(255,255,255,.92) !important;
 padding: 11px 13px !important;
 color: #111;
 font-size: 14px;
 line-height: 1.35;
 outline: none;
 box-shadow: none !important;
}

.reader-spotlight-form-body input[type="text"]:focus,
.reader-spotlight-form-body input[type="email"]:focus,
.reader-spotlight-form-body textarea:focus {
 border-color: #111 !important;
 background: #fff !important;
}

.reader-spotlight-form-body textarea {
 min-height: 110px;
 resize: vertical;
}

/* FILES */

.reader-spotlight-form-body input[type="file"] {
 width: 100% !important;
 border: 1px dashed rgba(17,17,17,.18) !important;
 border-radius: 14px !important;
 background: rgba(255,255,255,.8) !important;
 padding: 8px !important;
 font-size: 12px;
 color: #555;
 cursor: pointer;
}

.reader-spotlight-form-body input[type="file"]::file-selector-button {
 margin-right: 8px;
 border: 0;
 border-radius: 999px;
 background: #111;
 color: #fff;
 padding: 7px 10px;
 font-size: 12px;
 font-weight: 900;
 cursor: pointer;
}

/* hide extra file rows */
.reader-spotlight-form-body tr:nth-child(6),
.reader-spotlight-form-body tr:nth-child(7),
.reader-spotlight-form-body tr:nth-child(8),
.reader-spotlight-form-body tr:nth-child(9) {
 display: none !important;
}

/* rename upload labels */
.reader-spotlight-form-body tr:nth-child(4) td:first-child,
.reader-spotlight-form-body tr:nth-child(5) td:first-child {
 font-size: 0;
}

.reader-spotlight-form-body tr:nth-child(4) td:first-child::before {
 content: "???? ??? ?????";
 font-size: 12px;
}

.reader-spotlight-form-body tr:nth-child(5) td:first-child::before {
 content: "?????????????? ????";
 font-size: 12px;
}

/* security row */
.reader-spotlight-form-body input[name="f5"] {
 width: 88px !important;
 display: inline-flex;
 margin-right: 8px;
 text-align: center;
 font-weight: 900;
}

.reader-spotlight-form-body img {
 display: inline-block;
 vertical-align: middle;
 max-height: 34px;
 border-radius: 8px;
}

/* submit */

.reader-spotlight-form-body td[colspan="2"] {
 text-align: stretch !important;
}

.reader-spotlight-form-body td[colspan="2"] br {
 display: none;
}

.reader-spotlight-form-body input[type="submit"] {
 width: 100%;
 min-height: 46px;
 border: 0 !important;
 border-radius: 999px !important;
 background: #111 !important;
 color: #fff !important;
 padding: 0 16px !important;
 font-size: 14px;
 font-weight: 950;
 cursor: pointer;
}

.reader-spotlight-form-body input[type="submit"]:hover {
 background: var(--red) !important;
}

/* SHARE */

.reader-spotlight-share {
 margin-top: 14px;
 padding-top: 12px;
 border-top: 1px solid rgba(17,17,17,.08);
 display: grid;
 gap: 8px;
}

.reader-spotlight-share > span {
 color: #666;
 font-size: 12px;
 font-weight: 800;
}

.reader-spotlight-share-btn,
.reader-spotlight-share-btn * {
 max-width: 100%;
}

.reader-spotlight-share-btn a,
.reader-spotlight-share-btn button,
.reader-spotlight-share-btn input {
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 width: 100%;
 min-height: 40px;
 padding: 0 14px !important;
 border-radius: 999px !important;
 border: 1px solid rgba(17,17,17,.10) !important;
 background: rgba(255,255,255,.92) !important;
 color: #111 !important;
 font-size: 13px !important;
 font-weight: 900 !important;
 text-decoration: none !important;
 cursor: pointer;
}

.reader-spotlight-share-btn a:hover,
.reader-spotlight-share-btn button:hover,
.reader-spotlight-share-btn input:hover {
 background: #111 !important;
 border-color: #111 !important;
 color: #fff !important;
}

/* RESPONSIVE */

@media (max-width: 1180px) {
 .reader-spotlight-inner {
 grid-template-columns: minmax(0, 1fr) 390px;
 padding: 28px;
 }

 .reader-spotlight-content h2 {
 font-size: clamp(38px, 5vw, 60px);
 }
}

@media (max-width: 1040px) {
 .reader-spotlight-bg {
 min-height: auto;
 }

 .reader-spotlight-inner {
 min-height: auto;
 grid-template-columns: 1fr;
 align-items: stretch;
 }

 .reader-spotlight-content {
 max-width: 100%;
 padding-right: 0;
 }

 .reader-spotlight-form {
 max-width: 560px;
 width: 100%;
 margin-top: 18px;
 }

 .reader-spotlight-content h2 {
 max-width: 100%;
 }

 .reader-spotlight-content p {
 max-width: 100%;
 }
}

@media (max-width: 720px) {
 .reader-spotlight-bg {
 border-radius: 22px;
 }

 .reader-spotlight-inner {
 padding: 18px;
 gap: 16px;
 }

 .reader-spotlight-content h2 {
 font-size: 34px;
 line-height: .96;
 letter-spacing: -0.06em;
 }

 .reader-spotlight-content p {
 font-size: 15px;
 }

 .reader-spotlight-actions {
 flex-direction: column;
 }

 .reader-spotlight-actions a {
 width: 100%;
 }

 .reader-spotlight-mini-note {
 width: 100%;
 }

 .reader-spotlight-form {
 padding: 16px;
 border-radius: 20px;
 }

 .reader-spotlight-form-head h3 {
 font-size: 28px;
 }

 .reader-spotlight-form-body textarea {
 min-height: 96px;
 }
}
 
/* READER LIVE SIGNALS — LINKS + RULES */

.reader-live-signals {
 margin-top: 22px;
 width: min(100%, 620px);
 border: 1px solid rgba(255,255,255,.18);
 border-radius: 20px;
 background: rgba(255,255,255,.10);
 backdrop-filter: blur(14px);
 overflow: hidden;
}

.reader-live-head {
 min-height: 44px;
 padding: 0 14px;
 border-bottom: 1px solid rgba(255,255,255,.16);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}

.reader-live-head span {
 color: #fff;
 font-size: 13px;
 font-weight: 950;
 letter-spacing: -0.02em;
}

.reader-live-head b {
 display: inline-flex;
 align-items: center;
 min-height: 24px;
 padding: 0 9px;
 border-radius: 999px;
 background: #fff;
 color: #111;
 font-size: 10px;
 font-weight: 950;
 text-transform: uppercase;
 letter-spacing: .08em;
}

.reader-live-list {
 display: grid;
}

/* clickable messages */

.reader-live-item {
 display: grid;
 grid-template-columns: 54px 1fr;
 gap: 10px;
 padding: 12px 14px;
 border-bottom: 1px solid rgba(255,255,255,.12);
 color: inherit;
 text-decoration: none;
 transition: background .18s ease;
}

.reader-live-item:hover {
 background: rgba(255,255,255,.09);
 color: inherit;
}

.reader-live-item time {
 color: #fff;
 font-size: 13px;
 font-weight: 950;
 line-height: 1.1;
}

.reader-live-item h3 {
 margin: 0;
 color: #fff;
 font-size: 14px;
 line-height: 1.15;
 letter-spacing: -0.025em;
}

.reader-live-item p {
 margin: 4px 0 0;
 color: #d1d5db;
 font-size: 12px;
 line-height: 1.3;
}

.reader-live-item:hover h3 {
 text-decoration: underline;
 text-underline-offset: 3px;
}

/* rules block */

.reader-live-rules {
 padding: 13px 14px 14px;
 background: rgba(0,0,0,.18);
}

.reader-live-rules b {
 display: block;
 margin-bottom: 6px;
 color: #fff;
 font-size: 13px;
 line-height: 1.15;
 font-weight: 950;
}

.reader-live-rules p {
 margin: 0;
 color: #d1d5db;
 font-size: 12px;
 line-height: 1.38;
}

.reader-live-rules p + p {
 margin-top: 7px;
}

.reader-live-rules a {
 color: #fff;
 font-weight: 900;
 text-decoration: underline;
 text-underline-offset: 3px;
}

.reader-live-rules a:hover {
 color: #fff;
 opacity: .78;
}

/* ????? ?????? ?????? ??????? ?? ??????????? ????? ??????? ????????? */
.reader-spotlight-mini-note {
 display: none;
}

/* mobile */

@media (max-width: 720px) {
 .reader-live-signals {
 width: 100%;
 margin-top: 18px;
 }

 .reader-live-item {
 grid-template-columns: 48px 1fr;
 padding: 11px 12px;
 }

 .reader-live-item h3 {
 font-size: 13.5px;
 }

 .reader-live-item p,
 .reader-live-rules p {
 font-size: 12px;
 }
}
 /* READER LIVE HEAD BUTTON */

.reader-live-head-actions {
 display: flex;
 align-items: center;
 gap: 8px;
}

.reader-live-head-actions a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 24px;
 padding: 0 10px;
 border: 1px solid rgba(255,255,255,.28);
 border-radius: 999px;
 background: rgba(255,255,255,.08);
 color: #fff;
 font-size: 10px;
 font-weight: 950;
 text-transform: uppercase;
 letter-spacing: .06em;
 text-decoration: none;
 white-space: nowrap;
}

.reader-live-head-actions a:hover {
 background: #fff;
 border-color: #fff;
 color: #111;
}

@media (max-width: 720px) {
 .reader-live-head {
 align-items: flex-start;
 flex-direction: column;
 padding: 12px;
 }

 .reader-live-head-actions {
 width: 100%;
 justify-content: space-between;
 }

 .reader-live-head-actions a {
 flex: 1;
 }
}