@charset "UTF-8";

/* 青少年模式 / 未成年人保护 — 对齐全站暗色赛博主题 */

:root {
  --youth-panel: #121c26;
  --youth-panel-2: #0d151d;
  --youth-line: rgba(95, 119, 132, .28);
  --youth-text: #d8e3ea;
  --youth-dim: #9fb0ba;
  --youth-accent: #50dfbb;
  --youth-warn: #ff9a5a;
}

.in-header__youth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-right: 12px;
  padding: 0 12px;
  border: 1px solid rgba(80, 223, 187, .35);
  border-radius: 6px;
  background: rgba(80, 223, 187, .08);
  color: var(--youth-accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 30px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}

.in-header__youth:hover {
  background: rgba(80, 223, 187, .16);
  border-color: rgba(80, 223, 187, .55);
  color: #7af0d0;
}

.in-header__youth[data-on="1"] {
  border-color: rgba(255, 154, 90, .45);
  background: rgba(255, 154, 90, .12);
  color: var(--youth-warn);
}

/* 固定在顶栏下方，滚动时始终可见（不用 sticky：body overflow-x:clip 会使其失效） */
.youth-banner {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 9990;
  width: 100%;
  box-sizing: border-box;
  background:
    linear-gradient(90deg, rgba(255, 154, 90, .22), rgba(80, 223, 187, .16) 45%, rgba(255, 154, 90, .18)),
    linear-gradient(180deg, #1a2a24 0%, #132018 100%);
  border-top: 2px solid #ff9a5a;
  border-bottom: 2px solid rgba(80, 223, 187, .55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  animation: youth-banner-in .35s ease-out;
}

body:has(.cyber-dock) .youth-banner {
  top: 72px;
  left: var(--cyber-dock-w, 72px);
  width: calc(100% - var(--cyber-dock-w, 72px));
  right: auto;
}

/* comic-hall 顶栏高度 76px（无 cyber-dock 时） */
body:not(:has(.cyber-dock)) .in-header ~ .youth-banner,
body:not(:has(.cyber-dock)) .youth-banner {
  top: 76px;
}

.youth-banner-spacer {
  display: none;
  width: 100%;
  height: 0;
  pointer-events: none;
}

body.youth-mode-on .youth-banner-spacer {
  display: block;
  height: var(--youth-banner-h, 56px);
}

@keyframes youth-banner-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 阅读页：顶栏滑动隐藏时，青少年提示同步上滑隐藏 */
.p-read .youth-banner {
  transition: transform .22s ease, opacity .18s ease;
  will-change: transform;
}

.p-read.read-header-hidden .youth-banner {
  transform: translateY(calc(-100% - var(--read-header-h, 60px)));
  opacity: 0;
  pointer-events: none;
}

.p-read .youth-banner-spacer {
  transition: height .22s ease;
}

.p-read.read-header-hidden .youth-banner-spacer {
  height: 0 !important;
}

.youth-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  width: min(1240px, 94vw);
  margin: 0 auto;
  padding: 14px 0;
  color: #f2f7fa;
  font-size: 14px;
  line-height: 1.5;
}

.youth-banner__inner strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 4px;
  background: #ff9a5a;
  color: #1a120c;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

.youth-banner__inner strong::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a120c;
  box-shadow: 0 0 0 3px rgba(26, 18, 12, .25);
  animation: youth-pulse 1.4s ease-in-out infinite;
}

@keyframes youth-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.85); }
}

.youth-banner__inner span {
  flex: 1;
  min-width: 240px;
  color: #e8f4ef;
  font-size: 14px;
  font-weight: 500;
}

.youth-banner__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(8, 16, 14, .45);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}

.youth-banner__link:hover {
  background: rgba(255, 154, 90, .35);
  border-color: #ff9a5a;
  color: #fff;
}

@media (max-width: 768px) {
  .youth-banner__inner {
    padding: 12px 0;
    gap: 10px;
  }
  .youth-banner__inner strong {
    font-size: 13px;
  }
  .youth-banner__inner span {
    min-width: 100%;
    font-size: 13px;
  }
}

.youth-age-badge,
.youth-age-badge--inline {
  display: none !important;
}

/* 主页标题后的 18+ 行内标识（不适龄作品） */
.youth-title-18 {
  display: inline-block !important;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  border: 1px solid rgba(255, 94, 95, .55);
  background: rgba(255, 94, 95, .16);
  color: #ff6b6b;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  vertical-align: middle;
  white-space: nowrap;
  pointer-events: none;
}

.comic__title .youth-title-18,
.comic-title .youth-title-18,
.comic-name .youth-title-18,
.user-comic-item--name .youth-title-18,
.cyber-rank-item .name .youth-title-18,
.cyber-card .comic__title .youth-title-18,
.hall-comic-card .comic__title .youth-title-18,
.common-comic-item .comic__title .youth-title-18,
.in-comic--type-b .comic__title .youth-title-18,
.cs-item .comic__title .youth-title-18,
.top-list__box-item .comic__title .youth-title-18 {
  position: static;
  top: auto;
  left: auto;
}

/* 仅列表封面相对定位以挂角标；勿改 .de-info__cover（详情页依赖 absolute 布局） */
.cover,
.top-list__cover,
.guess-item .cover,
.comic-item .cover,
.common-comic-item .cover,
.rank-item .cover,
.daily__item .cover,
.top-list__item .cover {
  position: relative;
}

.p-detail .de-info__cover {
  position: absolute !important;
}

.p-detail .de-info__cover .youth-age-badge {
  top: 12px;
  left: 12px;
}

.youth-modal {
  padding: 22px 22px 18px;
  background: var(--youth-panel);
  color: var(--youth-text);
}

.youth-modal__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #e8f2f6;
}

.youth-modal__desc {
  margin: 0 0 14px;
  color: var(--youth-dim);
  font-size: 13px;
}

.youth-modal__input {
  display: block;
  width: 100%;
  height: 42px;
  margin-bottom: 16px;
  padding: 0 12px;
  border: 1px solid var(--youth-line);
  border-radius: 8px;
  background: var(--youth-panel-2);
  color: var(--youth-text);
  font-size: 18px;
  letter-spacing: 8px;
  text-align: center;
  outline: none;
  box-sizing: border-box;
  -webkit-text-security: disc;
  text-security: disc;
}

.youth-modal__input:focus {
  border-color: rgba(80, 223, 187, .55);
}

.youth-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.youth-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: var(--youth-accent);
  color: #081016;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.youth-modal__btn--ghost {
  background: rgba(255, 255, 255, .08);
  color: var(--youth-text);
}

.youth-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 16, .82);
}

.youth-lock-card {
  width: min(420px, 90vw);
  padding: 28px 24px;
  border-radius: 10px;
  border: 1px solid var(--youth-line);
  background: var(--youth-panel);
  text-align: center;
  color: var(--youth-text);
}

.youth-lock-card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--youth-accent);
}

.youth-lock-card p {
  margin: 0 0 18px;
  color: var(--youth-dim);
  line-height: 1.6;
}

.footer-compliance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 8px 0 4px;
  justify-content: center;
}

.footer-compliance a {
  color: #9fb0ba;
  font-size: 13px;
  text-decoration: none;
}

.footer-compliance a:hover {
  color: var(--youth-accent);
}

/* 专页 */
.youth-page {
  width: min(960px, 94vw);
  margin: 28px auto 56px;
  color: var(--youth-text);
}

.youth-page__hero {
  padding: 28px 28px 24px;
  border: 1px solid var(--youth-line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 20%, rgba(80, 223, 187, .12), transparent 40%),
    var(--youth-panel);
}

.youth-page__hero h1 {
  margin: 0 0 8px;
  font-size: 28px;
  color: #e8f2f6;
}

.youth-page__hero p {
  margin: 0;
  color: var(--youth-dim);
  line-height: 1.6;
}

.youth-page__panel {
  margin-top: 18px;
  padding: 22px 24px;
  border: 1px solid var(--youth-line);
  border-radius: 12px;
  background: var(--youth-panel-2);
}

.youth-page__panel h2 {
  margin: 0 0 12px;
  font-size: 18px;
  color: #e8f2f6;
}

.youth-page__panel p,
.youth-page__panel li {
  color: var(--youth-dim);
  line-height: 1.7;
  font-size: 14px;
}

.youth-page__panel ul {
  margin: 0;
  padding-left: 18px;
}

.youth-page__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(80, 223, 187, .08);
  border: 1px solid rgba(80, 223, 187, .25);
  color: var(--youth-accent);
  font-weight: 600;
}

.youth-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.youth-form .form-row {
  margin-bottom: 14px;
}

.youth-form label {
  display: block;
  margin-bottom: 6px;
  color: var(--youth-dim);
  font-size: 13px;
}

.youth-form input,
.youth-form select,
.youth-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--youth-line);
  border-radius: 8px;
  background: var(--youth-panel);
  color: var(--youth-text);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.youth-form textarea {
  min-height: 120px;
  resize: vertical;
}

.youth-form input:focus,
.youth-form select:focus,
.youth-form textarea:focus {
  border-color: rgba(80, 223, 187, .5);
}

@media (max-width: 768px) {
  .in-header__youth {
    margin-right: 8px;
    padding: 0 8px;
    font-size: 12px;
  }
  .in-header__youth .j-youth-mode-text-full {
    display: none;
  }
}

/* 用户中心 · 青少年监护密码 */
.youth-pin-page__tip {
  margin: 0 0 14px;
  color: #9fb0ba;
  line-height: 1.7;
  font-size: 13px;
}

.youth-pin-page__tip strong {
  color: #50dfbb;
  font-weight: 700;
}

.youth-pin-page__status {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(80, 223, 187, .28);
  background: rgba(80, 223, 187, .08);
  color: #d8e3ea;
  font-size: 13px;
}

.youth-pin-page__code-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.youth-pin-page__code-row .layui-input {
  flex: 1;
  min-width: 0;
}

.youth-pin-page__pic {
  height: 38px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.youth-pin-page input[name="youth_guard_pin"],
.youth-pin-page input[name="youth_guard_pin2"] {
  -webkit-text-security: disc;
  text-security: disc;
  letter-spacing: .35em;
}

.youth-pin-page .layui-form-mid {
  color: #9fb0ba !important;
}

/* 提示弹窗：成功用绿勾；尽量单行显示 */
.layui-layer-msg {
  min-width: max-content !important;
  max-width: min(92vw, 720px) !important;
  white-space: nowrap !important;
}

.layui-layer-msg .layui-layer-content {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: visible !important;
  line-height: 24px !important;
}

.layui-layer-msg .layui-layer-content.layui-layer-padding {
  padding-right: 20px !important;
}

.youth-toast--ok .layui-layer-ico {
  background-position: -30px 0 !important; /* ico1 对勾 */
}

.youth-toast.youth-toast--ok {
  border-color: rgba(80, 223, 187, .35) !important;
}