:root { --red: #e62b36; --dark: #0c0d10; --panel: #14161b; --line: #282b32; --muted: #9398a3; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--dark); }
body { margin: 0; background: var(--dark); color: #f6f6f3; font-family: Inter, "Microsoft YaHei", Arial, sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-shell { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 90% 4%, rgba(168,28,38,.22), transparent 28%), #0c0d10; }
.topbar { width: min(1180px, calc(100% - 40px)); height: 82px; margin: 0 auto; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand { display: flex; align-items: center; color: #fff; text-decoration: none; }
.brand > span, .footer-brand span { width: 34px; height: 34px; display: grid; place-items: center; margin-right: 10px; background: var(--red); border-radius: 5px 5px 5px 1px; font-size: 18px; font-weight: 900; }
.brand b { font-size: 24px; letter-spacing: 2px; }
.brand em { margin-left: 10px; color: #717680; font-size: 9px; font-style: normal; letter-spacing: 2px; }
.topbar nav { display: flex; gap: 38px; margin-left: 90px; }
.topbar nav a { position: relative; padding: 31px 0 28px; color: #a7abb2; font-size: 13px; text-decoration: none; }
.topbar nav a:hover, .topbar nav a.active { color: #fff; }
.topbar nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); }
.header-stat { margin-left: auto; display: flex; align-items: center; gap: 9px; color: #777c85; }
.admin-entry { margin-left: auto; padding: 8px 12px; border: 1px solid #34363c; color: #a7abb2; font-size: 10px; text-decoration: none; }
.admin-entry:hover { border-color: var(--red); color: #fff; }
.admin-entry + .header-stat { margin-left: 18px; }
.header-stat small { font-size: 10px; }
.header-stat strong { color: #fff; font-size: 25px; font-family: Georgia, serif; }
main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hero { min-height: 520px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; }
.eyebrow, .section-heading span, .dialog-kicker { color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: 3px; }
.hero h1 { margin: 17px 0 18px; font-size: clamp(48px, 6vw, 82px); line-height: 1.06; letter-spacing: -4px; }
.hero h1 em { color: var(--red); font-style: normal; }
.hero-copy > p { max-width: 490px; color: #9ca0a8; font-size: 14px; line-height: 1.9; }
.hero-copy > a { display: inline-flex; align-items: center; gap: 22px; margin-top: 26px; padding: 13px 17px 13px 22px; border: 1px solid #34363c; color: #fff; font-size: 12px; text-decoration: none; }
.hero-copy > a b { width: 23px; height: 23px; display: grid; place-items: center; background: var(--red); }
.hero-stage { position: relative; height: 420px; perspective: 800px; }
.hero-stage::before { content: ""; position: absolute; inset: 45px 30px 25px; border: 1px solid #2a2c32; transform: rotate(-3deg); }
.film-frame { position: absolute; width: 175px; height: 270px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 25px 45px rgba(0,0,0,.45); }
.film-frame::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 18px, rgba(255,255,255,.035) 19px 20px); }
.film-frame span { position: relative; color: rgba(255,255,255,.65); font-size: 10px; letter-spacing: 4px; }
.film-frame b { position: relative; margin-top: 6px; font: 700 31px/1.1 Georgia, "Microsoft YaHei", serif; }
.frame-one { left: 9%; top: 75px; background: linear-gradient(160deg, #872a34, #241317); transform: rotate(-8deg); }
.frame-two { left: 37%; top: 25px; z-index: 2; width: 195px; height: 315px; background: linear-gradient(160deg, #263a50, #10151d); transform: rotate(3deg); }
.frame-three { right: 4%; top: 90px; background: linear-gradient(160deg, #56624b, #182019); transform: rotate(9deg); }
.play-mark { position: absolute; z-index: 4; left: 46%; top: 43%; width: 72px; height: 72px; display: grid; place-items: center; padding-left: 5px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(230,43,54,.86); box-shadow: 0 0 0 10px rgba(230,43,54,.12); font-style: normal; }
.filter-section { padding: 44px 0 28px; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; }
.section-heading h2 { margin: 6px 0 0; font-size: 33px; }
.section-heading p { color: #7f848d; font-size: 12px; }
.section-heading p b { color: var(--red); font-size: 20px; }
.filter-row { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.categories { display: flex; flex-wrap: wrap; gap: 7px; }
.categories button { padding: 8px 13px; border: 1px solid #2b2e34; background: #15171b; color: #9a9fa8; border-radius: 3px; font-size: 11px; cursor: pointer; }
.categories button:hover, .categories button.active { border-color: var(--red); background: var(--red); color: #fff; }
.search { min-width: 255px; height: 35px; margin-left: auto; display: flex; align-items: center; border: 1px solid #2b2e34; background: #15171b; }
.search span { padding: 0 8px 2px 12px; color: #646a74; font-size: 20px; }
.search input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: 11px; }
.search input::placeholder { color: #5f646c; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 30px; padding-bottom: 70px; }
.drama-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.drama-card { min-width: 0; display: grid; grid-template-columns: 154px 1fr; min-height: 246px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); transition: transform .2s, border-color .2s; }
.drama-card:hover { transform: translateY(-3px); border-color: #4a3034; }
.poster { position: relative; min-height: 246px; overflow: hidden; padding: 13px; }
.poster::before { content: ""; position: absolute; inset: 0; opacity: .27; background: repeating-linear-gradient(120deg, transparent 0 22px, rgba(255,255,255,.09) 23px 24px); }
.poster-index { position: relative; color: rgba(255,255,255,.54); font-size: 8px; letter-spacing: 2px; }
.poster > i { position: absolute; right: -8px; top: 35px; color: rgba(255,255,255,.10); font: 900 100px/1 Georgia, serif; }
.poster > div { position: absolute; left: 13px; right: 13px; bottom: 25px; display: grid; gap: 7px; }
.poster > div small { color: rgba(255,255,255,.7); font-size: 9px; letter-spacing: 3px; }
.poster > div strong { font: 700 22px/1.3 Georgia, "Microsoft YaHei", serif; }
.poster-score { position: absolute; right: 9px; bottom: 8px; color: rgba(255,255,255,.45); font: italic 12px Georgia, serif; }
.card-copy { min-width: 0; padding: 18px 16px; }
.card-meta { display: flex; align-items: center; justify-content: space-between; }
.card-meta span { padding: 3px 6px; background: rgba(230,43,54,.14); color: #ff6972; font-size: 8px; }
.card-meta small { color: #666c75; font-size: 9px; }
.card-copy h3 { margin: 14px 0 8px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.card-copy > p { height: 48px; margin: 0; overflow: hidden; color: #858a93; font-size: 10px; line-height: 1.65; }
.tag-row { display: flex; gap: 7px; margin-top: 8px; color: #b36e74; font-size: 9px; }
.resource-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.resource-actions button { height: 31px; padding: 0 7px; border: 1px solid #30333a; background: #1a1c21; color: #b7bbc2; font-size: 9px; cursor: pointer; }
.resource-actions button:hover { border-color: var(--red); color: #fff; }
.resource-actions i { display: inline-grid; width: 18px; height: 18px; place-items: center; margin-right: 3px; border-radius: 2px; background: #292c33; color: #fff; font-style: normal; font-size: 8px; }
.empty { min-height: 300px; grid-column: 1/-1; display: grid; place-content: center; gap: 8px; border: 1px dashed #2d3037; color: #777d86; text-align: center; }
.empty b { color: #d7d8da; }
.pagination { grid-column: 1 / -1; min-height: 70px; margin-top: 8px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); background: #111318; }
.page-summary { color: #737881; font-size: 9px; }
.page-buttons { display: flex; align-items: center; gap: 5px; }
.page-number-wrap { display: flex; align-items: center; gap: 5px; }
.page-number-wrap i { padding: 0 3px; color: #656a72; font-style: normal; }
.page-buttons button { min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid #30333a; background: #191b20; color: #a6aab2; font-size: 9px; cursor: pointer; }
.page-buttons button:hover:not(:disabled), .page-buttons button.active { border-color: var(--red); background: var(--red); color: #fff; }
.page-buttons button:disabled { opacity: .35; cursor: not-allowed; }
.ranking { align-self: start; border: 1px solid var(--line); background: #111318; }
.ranking-title { padding: 20px; border-bottom: 1px solid var(--line); }
.ranking-title span { float: right; color: var(--red); font: italic 700 10px Georgia, serif; }
.ranking-title h2 { margin: 0 0 4px; font-size: 18px; }
.ranking-title small { color: #686d75; font-size: 9px; }
.ranking > button { width: 100%; min-height: 66px; display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 0; border-bottom: 1px solid #22252b; background: transparent; color: #fff; text-align: left; cursor: pointer; }
.ranking > button:hover { background: #191b20; }
.ranking > button > b { color: #565b64; font: italic 18px Georgia, serif; }
.ranking > button:nth-of-type(-n+3) > b { color: var(--red); }
.ranking > button span { min-width: 0; flex: 1; display: grid; gap: 5px; }
.ranking > button strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ranking > button small { color: #686d75; font-size: 8px; }
.ranking > button em { color: #d3a05a; font: italic 11px Georgia, serif; }
.ranking-note { margin: 14px; padding: 15px; border-left: 2px solid var(--red); background: #191b20; }
.ranking-note b { font-size: 10px; }
.ranking-note p { margin: 8px 0 0; color: #747a84; font-size: 9px; line-height: 1.7; }
.ranking-note code { color: #d7888e; }
.legal-note { margin-bottom: 70px; padding: 22px 25px; display: flex; align-items: center; gap: 22px; border: 1px solid #33282a; background: #151315; }
.legal-note b { flex: 0 0 auto; color: #ff6972; font-size: 12px; }
.legal-note p { margin: 0; color: #858991; font-size: 11px; line-height: 1.8; }
footer { min-height: 150px; display: flex; align-items: center; width: min(1180px, calc(100% - 40px)); margin: 0 auto; border-top: 1px solid var(--line); color: #777c85; }
.footer-brand { display: flex; align-items: center; color: #fff; }
.footer-brand b { font-size: 20px; }
footer p { margin-left: 45px; font-size: 11px; }
footer > small { margin-left: auto; font-size: 9px; }
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.84); backdrop-filter: blur(6px); }
.resource-dialog { position: relative; width: min(520px, 100%); padding: 34px; border: 1px solid #373940; background: #15171c; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.resource-dialog::before { content: ""; position: absolute; left: 0; top: 0; width: 70px; height: 3px; background: var(--red); }
.close { position: absolute; right: 15px; top: 12px; border: 0; background: transparent; color: #777c85; font-size: 23px; cursor: pointer; }
.resource-dialog h2 { margin: 8px 0 18px; font-size: 25px; }
.dialog-drama { display: flex; justify-content: space-between; padding: 12px; background: #1d1f25; }
.dialog-drama b { font-size: 12px; }
.dialog-drama span { color: #7d828b; font-size: 10px; }
.resource-dialog form label { display: block; margin: 19px 0 10px; color: #9da1a8; font-size: 11px; }
.captcha { height: 62px; display: flex; align-items: center; justify-content: center; gap: 18px; border: 1px dashed #583338; background: repeating-linear-gradient(-45deg,#1c1719,#1c1719 10px,#21191c 10px,#21191c 20px); color: #ff5c66; font: 26px Georgia, serif; }
.captcha b { display: inline-block; }
.verify-row { display: flex; gap: 8px; margin-top: 12px; }
.verify-row input { min-width: 0; flex: 1; height: 39px; padding: 0 12px; border: 1px solid #30333a; outline: 0; background: #101115; color: #fff; }
.verify-row input:focus { border-color: var(--red); }
.verify-row button { padding: 0 19px; border: 1px solid var(--red); background: var(--red); color: #fff; cursor: pointer; }
.resource-dialog form > small { display: block; margin-top: 12px; color: #5e636c; font-size: 9px; }
.error { display: block; margin-top: 8px; color: #ff5e68; font-size: 10px; }
.link-result { display: grid; gap: 8px; }
.link-result > div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 10px 12px; border: 1px solid #2b2e34; font-size: 11px; }
.link-result span { color: #777c85; }
.link-result code { overflow-wrap: anywhere; color: #e7656d; }
.link-result a { margin-top: 4px; padding: 12px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; }

.admin-shell { width: min(1180px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; padding-bottom: 70px; }
.admin-header { height: 78px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.admin-header > div { display: flex; align-items: center; }
.admin-header > div span { width: 32px; height: 32px; margin-right: 10px; display: grid; place-items: center; border-radius: 4px; background: var(--red); font-weight: 800; }
.admin-header > div b { font-size: 17px; }
.admin-header nav { margin-left: auto; display: flex; align-items: center; gap: 16px; color: #777c85; font-size: 10px; }
.admin-header nav a { color: #a8acb4; text-decoration: none; }
.admin-header nav a:hover { color: #fff; }
.admin-hero { min-height: 210px; display: flex; align-items: center; justify-content: space-between; }
.admin-hero small { color: var(--red); font-size: 9px; letter-spacing: 3px; }
.admin-hero h1 { margin: 8px 0; font-size: 38px; }
.admin-hero p { margin: 0; color: #80858e; font-size: 11px; }
.admin-hero > strong { display: grid; color: #fff; font: 700 54px/1 Georgia, serif; text-align: right; }
.admin-hero > strong small { margin-top: 8px; color: #777c85; letter-spacing: 1px; }
.import-panel, .resource-manager { margin-bottom: 22px; border: 1px solid var(--line); background: #13151a; }
.panel-title, .manager-title { min-height: 65px; padding: 13px 17px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.panel-title > div, .manager-title > div { display: grid; gap: 5px; }
.panel-title > div:last-child { margin-left: auto; display: flex; grid-auto-flow: column; gap: 8px; }
.panel-title b, .manager-title b { font-size: 13px; }
.panel-title span, .manager-title span { color: #70757e; font-size: 9px; }
.panel-title button { padding: 7px 11px; border: 1px solid #34373e; background: transparent; color: #a8acb4; font-size: 9px; cursor: pointer; }
.import-panel textarea { width: 100%; height: 360px; display: block; resize: vertical; padding: 18px; border: 0; outline: 0; background: #0f1014; color: #d9dadd; font: 11px/1.7 Consolas, monospace; }
.import-actions { padding: 12px 16px; display: flex; align-items: center; }
.import-actions span { color: #92969e; font-size: 10px; }
.import-actions button { margin-left: auto; padding: 10px 18px; border: 0; background: var(--red); color: #fff; font-size: 10px; cursor: pointer; }
.import-actions button:disabled { opacity: .5; }
.manager-title input { width: 250px; height: 34px; margin-left: auto; padding: 0 11px; border: 1px solid #30333a; outline: 0; background: #0e1013; color: #fff; font-size: 10px; }
.admin-table { overflow-x: auto; }
.table-head, .table-row { min-width: 780px; display: grid; grid-template-columns: 1.4fr 1fr .55fr .4fr .6fr; gap: 14px; align-items: center; padding: 11px 16px; }
.table-head { background: #1a1c21; color: #777c85; font-size: 9px; }
.table-row { min-height: 66px; border-top: 1px solid #22252b; font-size: 10px; }
.table-row:first-of-type { border-top: 0; }
.table-row > span { min-width: 0; }
.table-row > span:nth-child(1), .table-row > span:nth-child(2) { display: grid; gap: 5px; }
.table-row small { overflow: hidden; color: #6f747d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.table-row i { display: inline-grid; width: 23px; height: 23px; margin-right: 5px; place-items: center; background: #24272d; color: #5d626b; border-radius: 3px; font-style: normal; font-size: 8px; }
.table-row i.ready { background: rgba(41,151,101,.16); color: #53ce91; }
.table-row button { margin-right: 6px; padding: 5px 9px; border: 1px solid #34373e; background: transparent; color: #aeb2b9; font-size: 8px; cursor: pointer; }
.table-row button.danger { border-color: #542a30; color: #dc6670; }
.admin-denied { width: 100%; min-height: 100vh; display: grid; place-items: center; background: #0c0d10; text-align: center; }
.admin-denied > div { width: min(440px, 90%); padding: 50px; border: 1px solid var(--line); background: #14161b; }
.admin-denied span { color: var(--red); font: 700 46px Georgia, serif; }
.admin-denied h1 { margin: 12px 0; }
.admin-denied p { color: #858a93; font-size: 11px; }
.admin-denied a { display: block; margin-top: 10px; padding: 10px; border: 1px solid #34373e; color: #fff; font-size: 10px; text-decoration: none; }
.admin-login { width: 100%; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 75% 10%, rgba(180,25,37,.2), transparent 35%), #0c0d10; }
.admin-login > section { width: min(420px, 100%); padding: 42px; border: 1px solid #292c32; background: #14161b; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.login-brand { display: flex; align-items: center; color: #fff; text-decoration: none; }
.login-brand span { width: 34px; height: 34px; margin-right: 9px; display: grid; place-items: center; border-radius: 4px; background: var(--red); font-weight: 800; }
.login-brand b { font-size: 21px; }
.admin-login > section > small { display: block; margin-top: 35px; color: var(--red); font-size: 8px; letter-spacing: 3px; }
.admin-login h1 { margin: 8px 0; font-size: 29px; }
.admin-login p { margin: 0 0 28px; color: #777d86; font-size: 10px; }
.admin-login form { display: grid; gap: 9px; }
.admin-login label { margin-top: 7px; color: #a3a7ae; font-size: 10px; }
.admin-login input { height: 43px; padding: 0 13px; border: 1px solid #30333a; outline: 0; background: #0e1013; color: #fff; font-size: 11px; }
.admin-login input:focus { border-color: var(--red); }
.admin-login form button { height: 43px; margin-top: 12px; border: 0; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.admin-login form button:disabled { opacity: .55; }
.login-error { color: #ff6872; font-size: 10px; }
.back-home { display: block; margin-top: 20px; color: #737881; font-size: 9px; text-align: center; text-decoration: none; }

@media (max-width: 900px) {
  .topbar nav { display: none; }
  .hero { min-height: 700px; grid-template-columns: 1fr; padding: 65px 0 25px; }
  .hero-stage { height: 370px; }
  .content-layout { grid-template-columns: 1fr; }
  .ranking { order: -1; }
  .ranking > button { width: 50%; float: left; }
  .ranking-note { clear: both; }
}
@media (max-width: 640px) {
  .topbar, main, footer { width: min(100% - 24px, 1180px); }
  .brand em, .header-stat small { display: none; }
  .admin-entry { margin-left: auto; }
  .hero { min-height: 630px; padding-top: 48px; }
  .hero h1 { font-size: 48px; letter-spacing: -2px; }
  .hero-stage { height: 310px; transform: scale(.85); transform-origin: left top; width: 118%; }
  .film-frame { width: 145px; height: 225px; }
  .frame-two { width: 160px; height: 260px; }
  .filter-row { align-items: stretch; flex-direction: column; }
  .search { width: 100%; margin-left: 0; }
  .content-layout { gap: 18px; }
  .drama-grid { grid-template-columns: 1fr; }
  .drama-card { grid-template-columns: 132px 1fr; }
  .poster { min-height: 232px; }
  .pagination { align-items: stretch; flex-direction: column; }
  .page-buttons { overflow-x: auto; padding-bottom: 2px; }
  .ranking > button { width: 100%; float: none; }
  .legal-note { align-items: flex-start; flex-direction: column; gap: 8px; }
  footer { align-items: flex-start; flex-direction: column; gap: 13px; padding: 28px 0; }
  footer p, footer > small { margin: 0; }
  .resource-dialog { padding: 28px 20px; }
  .admin-shell { width: min(100% - 24px, 1180px); }
  .admin-header nav span { display: none; }
  .admin-hero { align-items: flex-start; flex-direction: column; justify-content: center; gap: 28px; }
  .admin-hero > strong { text-align: left; }
  .manager-title { align-items: stretch; flex-direction: column; gap: 12px; }
  .manager-title input { width: 100%; margin-left: 0; }
  .import-actions { align-items: stretch; flex-direction: column; gap: 10px; }
  .import-actions button { margin-left: 0; }
  .dialog-drama { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }

/* PHP edition additions */
[hidden] { display: none !important; }
body.modal-open { overflow: hidden; }
.categories a { padding: 8px 13px; border: 1px solid #2b2e34; background: #15171b; color: #9a9fa8; border-radius: 3px; font-size: 11px; text-decoration: none; }
.categories a:hover, .categories a.active { border-color: var(--red); background: var(--red); color: #fff; }
.ranking .ranking-item { width: 100%; min-height: 66px; display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-bottom: 1px solid #22252b; background: transparent; color: #fff; text-align: left; text-decoration: none; }
.ranking .ranking-item:hover { background: #191b20; }
.ranking .ranking-item > b { color: #565b64; font: italic 18px Georgia, serif; }
.ranking .ranking-item:nth-of-type(-n+3) > b { color: var(--red); }
.ranking .ranking-item span { min-width: 0; flex: 1; display: grid; gap: 5px; }
.ranking .ranking-item strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ranking .ranking-item small { color: #686d75; font-size: 8px; }
.ranking .ranking-item em { color: #d3a05a; font: italic 11px Georgia, serif; }
.page-buttons .page-button { min-width: 32px; height: 32px; padding: 0 9px; display: grid; place-items: center; border: 1px solid #30333a; background: #191b20; color: #a6aab2; font-size: 9px; text-decoration: none; }
.page-buttons .page-button:hover, .page-buttons .page-button.active { border-color: var(--red); background: var(--red); color: #fff; }
.page-buttons .page-button.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.captcha { width: 100%; cursor: pointer; }
.captcha:disabled, .verify-row button:disabled { opacity: .55; cursor: wait; }
.admin-header nav form, .row-actions form { margin: 0; }
.logout-button { padding: 0; border: 0; background: transparent; color: #a8acb4; font-size: 10px; cursor: pointer; }
.logout-button:hover { color: #fff; }
.admin-flash { margin-bottom: 22px; padding: 12px 15px; border: 1px solid rgba(41,151,101,.45); background: rgba(41,151,101,.12); color: #65d69c; font-size: 10px; }
.admin-flash.error { border-color: #633139; background: rgba(230,43,54,.1); color: #ff727b; }
.manager-title form { margin-left: auto; }
.manager-title form input { margin-left: 0; }
.row-actions { display: flex; align-items: center; }
.row-actions form { display: inline-flex; }
.error-text { color: #ff6872 !important; }

.install-page { min-height: 100vh; padding: 38px 18px; background: radial-gradient(circle at 75% 8%, rgba(180,25,37,.18), transparent 32%), #0c0d10; }
.install-shell { width: min(760px, 100%); margin: auto; }
.install-header { margin-bottom: 22px; text-align: center; }
.install-header > span { color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: 3px; }
.install-header h1 { margin: 9px 0 7px; font-size: 31px; }
.install-header p { margin: 0; color: #858a93; font-size: 11px; }
.install-card { margin-bottom: 16px; padding: 24px; border: 1px solid #292c32; background: #14161b; box-shadow: 0 12px 38px rgba(0,0,0,.24); }
.install-card h2 { margin: 0 0 16px; font-size: 15px; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.check-item { min-height: 39px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #2d3037; color: #a6aab2; font-size: 10px; }
.check-item b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.check-item.passed b { background: #299765; }
.check-item.failed { border-color: #623038; background: rgba(230,43,54,.08); color: #ff727b; }
.check-item.failed b { background: var(--red); }
.form-help { margin: -8px 0 16px; color: #777d86; font-size: 10px; }
.form-error { margin-bottom: 16px; padding: 10px 12px; border: 1px solid #633139; background: rgba(230,43,54,.08); color: #ff727b; font-size: 10px; overflow-wrap: anywhere; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.form-grid + h2 { margin-top: 27px; }
.form-grid label { display: grid; gap: 7px; color: #a3a7ae; font-size: 10px; }
.form-grid label.full { grid-column: 1/-1; }
.form-grid input { width: 100%; height: 41px; padding: 0 11px; border: 1px solid #30333a; outline: 0; background: #0e1013; color: #fff; }
.form-grid input:focus { border-color: var(--red); }
.install-submit { width: 100%; height: 44px; margin-top: 22px; border: 0; background: var(--red); color: #fff; font-weight: 700; cursor: pointer; }
.install-submit:disabled { opacity: .5; cursor: not-allowed; }
.install-success { padding: 42px 28px; text-align: center; }
.status-icon { width: 58px; height: 58px; margin: 0 auto 17px; display: grid; place-items: center; border-radius: 50%; background: #299765; color: #fff; font-size: 28px; }
.install-success h2 { margin-bottom: 9px; font-size: 21px; }
.install-success p { margin: 0; color: #858a93; font-size: 11px; }
.install-success small { display: block; margin-top: 17px; color: #666c75; font-size: 9px; }
.install-actions { margin-top: 23px; display: flex; justify-content: center; gap: 9px; }
.install-actions a { min-width: 120px; padding: 11px 15px; border: 1px solid #34373e; color: #b5b9c0; font-size: 10px; text-decoration: none; }
.install-actions a.primary-link { border-color: var(--red); background: var(--red); color: #fff; }

@media (max-width: 900px) { .ranking .ranking-item { width: 50%; float: left; } }
@media (max-width: 640px) {
  .ranking .ranking-item { width: 100%; float: none; }
  .manager-title form { width: 100%; margin-left: 0; }
  .check-grid, .form-grid { grid-template-columns: 1fr; }
  .form-grid label.full { grid-column: auto; }
  .install-page { padding: 24px 10px; }
  .install-card { padding: 19px 15px; }
  .install-actions { flex-direction: column; }
}