/* ==========================================================================
   漫剧资源站 · 前台样式
   设计语言：绿色系 / 移动优先窄列 / 柔和圆角卡片
   ========================================================================== */

:root {
    --primary: #2f9e6b;
    --primary-dark: #24805a;
    --accent: #7dcaa4;
    --deep: #0f2418;
    --green: #2fbf71;
    --bg: #f3faf6;
    --card: #ffffff;
    --text: #163226;
    --muted: #6a8f7a;
    --line: #d5eadc;
    --soft: #e8f6ee;
    --gold: #eda313;
    --danger: #e5484d;
    --radius: 20px;
    --shadow-sm: 0 3px 12px rgba(31, 89, 62, .08);
    --shadow-md: 0 8px 22px rgba(31, 89, 62, .12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

.container { max-width: 480px; margin: 0 auto; padding: 10px 14px 6px; }

.site-foot {
    max-width: 480px;
    margin: 22px auto 96px;
    padding: 0 14px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

.site-foot a { color: var(--muted); }

.page-topbar { max-width: 480px; margin: 0 auto; padding: 10px 14px 0; }

.page-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, .95);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 8px 17px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    box-shadow: 0 6px 16px rgba(31, 89, 62, .10);
}

/* --------------------------------------------------------------------------
   Hero：左文案 + 右深色热门榜
   -------------------------------------------------------------------------- */
.hero {
    display: flex;
    gap: 14px;
    background: var(--card);
    border-radius: var(--radius);
    padding: 18px 16px;
    box-shadow: 0 6px 20px rgba(31, 129, 88, .10);
    margin-top: 10px;
}

.hero-main { flex: 1.12; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }

.hero-label {
    background: var(--soft);
    color: var(--primary);
    border: 1px solid var(--accent);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.hero-main h1 {
    font-size: 34px;
    line-height: 1.15;
    margin: 10px 0 6px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.hero-main p { color: #5f8473; font-size: 13px; line-height: 1.6; }

.hero-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), var(--green));
    color: #fff;
    font-weight: 700;
    padding: 9px 22px;
    border-radius: 999px;
    margin-top: 14px;
    box-shadow: 0 5px 14px rgba(47, 158, 107, .34);
    font-size: 14px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.hero-btn:active { transform: scale(.97); }

.hero-hot {
    flex: 1;
    background: linear-gradient(160deg, #14301f, var(--deep));
    border-radius: 16px;
    padding: 12px 11px;
    color: #fff;
    min-width: 0;
}

.hero-hot-title { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; color: #a8e3c1; }

.hero-hot-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 12px;
    padding: 6px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    margin-bottom: 6px;
    transition: background .2s ease;
}

.hero-hot-item:last-child { margin-bottom: 0; }
.hero-hot-item:hover { background: rgba(255, 255, 255, .13); }
.hero-hot-item .hot-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-hot-item em {
    font-style: normal;
    background: #e5484d;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.4;
}

.mini-icon {
    width: 22px;
    height: 30px;
    flex: none;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
}

.mini-icon-img { width: 100%; height: 100%; object-fit: cover; }

.hero-hot-empty { font-size: 12px; color: #9fc5b0; padding: 8px 2px; }

/* --------------------------------------------------------------------------
   搜索
   -------------------------------------------------------------------------- */
.search-box { margin-top: 20px; }

.search-form { display: flex; gap: 8px; align-items: center; }

.search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 0 6px 0 18px;
    min-width: 0;
    box-shadow: 0 2px 10px rgba(47, 158, 107, .06);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.search-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(125, 202, 164, .22);
}

.search-input-wrap input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 13px 0;
    font-size: 14px;
    background: transparent;
    min-width: 0;
    color: var(--text);
}

.search-clear {
    border: 0;
    background: #eef6f1;
    color: #7ba18d;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

.search-clear:hover { background: #e0efe6; }
.search-clear.is-hidden { visibility: hidden; }

.search-form > button {
    background: linear-gradient(135deg, var(--primary), var(--green));
    color: #fff;
    border: 0;
    padding: 13px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 5px 14px rgba(47, 158, 107, .30);
}

/* --------------------------------------------------------------------------
   列表标题 / 卡片
   -------------------------------------------------------------------------- */
.list-title {
    font-size: 19px;
    font-weight: 800;
    margin: 14px 0 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.list-title small { color: #8aa897; font-size: 12px; font-weight: 400; }

/* 首页热门提示条（替代列表标题） */
.hot-tip {
    display: flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #ffffff, #f4fbf7);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px 12px;
    margin: 18px 0 12px;
    box-shadow: 0 3px 12px rgba(31, 89, 62, .06);
}

.hot-tip-ico {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 9px;
    background: var(--soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.hot-tip-text { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.55; color: #4f7461; font-weight: 600; }

.hot-tip-btn {
    flex: none;
    background: linear-gradient(135deg, #38c47a, #23a45f);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(47, 191, 113, .3);
    transition: transform .18s ease, box-shadow .18s ease;
}

.hot-tip-btn:hover { box-shadow: 0 6px 14px rgba(47, 191, 113, .38); }
.hot-tip-btn:active { transform: scale(.97); }

.card-list { display: flex; flex-direction: column; gap: 12px; }

.card {
    display: flex;
    gap: 12px;
    background: var(--card);
    border-radius: 18px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(213, 234, 220, .75);
    transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.card-poster {
    position: relative;
    width: 80px;
    height: 107px;
    flex: none;
    border-radius: 12px;
    overflow: hidden;
    background: var(--soft);
}

.card-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-poster img { transform: scale(1.04); }

.poster-badge {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(15, 36, 24, .74);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    padding: 2px 7px;
    border-bottom-right-radius: 9px;
    letter-spacing: .5px;
    backdrop-filter: blur(2px);
}

.card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.card-name { font-size: 16px; font-weight: 800; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-name a { color: var(--text); }

.card-synopsis {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-tags { margin-top: 6px; overflow: hidden; white-space: nowrap; }

.tag {
    display: inline-block;
    background: var(--soft);
    color: #1d8f59;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    margin: 2px 4px 0 0;
    line-height: 1.5;
}

.tag-cat { background: #f3f8f4; color: #78927f; }

.card-foot { margin-top: auto; padding-top: 7px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }

.card-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gold); font-weight: 700; flex-wrap: wrap; }
.card-meta .eps { color: #8aa897; font-weight: 500; font-size: 11.5px; }

.score { color: var(--gold); font-weight: 800; font-size: 12.5px; }

.stars { position: relative; display: inline-block; font-size: 12px; letter-spacing: .5px; line-height: 1; vertical-align: -1px; }
.stars-bg { color: #e3ece6; }
.stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--gold); }

.btn-get {
    align-self: center;
    background: linear-gradient(135deg, #38c47a, #23a45f);
    color: #fff;
    font-weight: 800;
    font-size: 12.5px;
    padding: 8px 13px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(47, 191, 113, .30);
    transition: transform .18s ease, box-shadow .18s ease;
}

.btn-get:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(47, 191, 113, .38); }

/* 空状态 / 分页 */
.empty-state { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty-state span { font-size: 34px; display: block; margin-bottom: 8px; }
.empty-state p { font-size: 13.5px; margin-bottom: 12px; }

.pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 20px 0 4px; flex-wrap: wrap; }
.pager a, .pager span {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--primary);
}
.pager .current { background: linear-gradient(135deg, var(--primary), var(--green)); color: #fff; border-color: transparent; }

/* --------------------------------------------------------------------------
   漫剧合集
   -------------------------------------------------------------------------- */
.collection-head { margin: 14px 2px 16px; }
.collection-head h1 { font-size: 23px; font-weight: 800; letter-spacing: -.3px; }
.collection-sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.collection-intro {
    font-size: 12.5px;
    line-height: 1.7;
    color: #55786a;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 12px;
    margin-top: 10px;
}

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }

.grid-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    padding: 7px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(213, 234, 220, .7);
    transition: transform .2s ease, box-shadow .2s ease;
}

.grid-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.grid-poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: var(--soft);
}

.grid-poster img { width: 100%; height: 100%; object-fit: cover; }

.grid-name {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    margin-top: 7px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-score {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--gold);
    font-weight: 700;
    margin-top: 3px;
}

.grid-score .stars { font-size: 9.5px; }
.grid-score .score { font-size: 11px; }

/* --------------------------------------------------------------------------
   详情页
   -------------------------------------------------------------------------- */
body.detail-page {
    background:
        radial-gradient(circle at 12% 4%, #d8f0e2 0, rgba(216, 240, 226, 0) 42%),
        radial-gradient(circle at 92% 26%, #cfeadd 0, rgba(207, 234, 221, 0) 40%),
        linear-gradient(180deg, #eaf7f0 0%, #f5fbf7 46%, #f3faf6 100%);
    background-attachment: fixed;
}

.detail { margin-top: 4px; }

.detail-summary {
    background: linear-gradient(var(--card), var(--card)) padding-box,
                linear-gradient(135deg, var(--primary), #b8e6cd, var(--accent), var(--primary)) border-box;
    border: 3px solid transparent;
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 16px 36px rgba(31, 89, 62, .14), 0 4px 10px rgba(15, 36, 24, .04);
}

.detail-head { display: flex; gap: 13px; align-items: flex-start; }

.detail-poster {
    position: relative;
    width: 98px;
    height: 131px;
    flex: none;
    border-radius: 14px;
    overflow: hidden;
    background: var(--soft);
    box-shadow: 0 8px 18px rgba(15, 36, 24, .16);
}

.detail-poster img { width: 100%; height: 100%; object-fit: cover; }

.detail-head-info { flex: 1; min-width: 0; }

.detail h1 { font-size: 21px; font-weight: 800; line-height: 1.35; }

.detail-meta { margin-top: 8px; }
.detail-sub { color: var(--muted); font-size: 12.5px; margin-top: 6px; }

.detail-desc { margin: 14px 0 2px; color: #42604f; font-size: 14px; line-height: 1.75; }

.notice-box {
    background: linear-gradient(#fffafa, #fffafa) padding-box,
                linear-gradient(135deg, #e5484d, #f3b6b8, #e5484d) border-box;
    border: 3px solid transparent;
    border-radius: 20px;
    padding: 16px;
    margin: 20px 0 0;
    text-align: center;
    box-shadow: 0 14px 32px rgba(114, 40, 52, .10), 0 4px 10px rgba(229, 72, 77, .06);
}

.notice-title { color: #c22633; font-size: 17px; font-weight: 800; line-height: 1.55; }
.notice-box p { color: #7d5a60; font-size: 12.5px; line-height: 1.7; margin-top: 5px; }

.step {
    position: relative;
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, var(--primary), #bfe8d1, var(--accent), #6dbf94, var(--primary)) border-box;
    border: 3px solid transparent;
    border-radius: 24px;
    padding: 22px 16px 20px;
    margin-top: 26px;
    box-shadow: 0 18px 38px rgba(31, 89, 62, .13), 0 5px 12px rgba(15, 36, 24, .04);
}

.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(34px) scale(.985);
    transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
}

.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.step-no {
    flex: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--primary);
    background: var(--soft);
    border: 1px solid #b9e2ca;
    border-radius: 999px;
    padding: 4px 12px;
}

.step-head h2 { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 800; line-height: 1.45; }

.step p { font-size: 13.5px; line-height: 1.75; color: #42604f; }

.step-textbox { background: #f5fbf7; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-top: 4px; }

.step.step-center > p { text-align: center; }

.step-hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.7; text-align: center; }

.platform-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 26px; margin: 8px 0 14px; }

.platform-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    cursor: pointer;
    transition: transform .2s ease;
}

.platform-btn .platform-name { font-size: 13px; font-weight: 700; color: var(--text); }
.platform-icon { width: 58px; height: 58px; border-radius: 16px; filter: drop-shadow(0 6px 12px rgba(15, 36, 24, .18)); }
.platform-btn:active { transform: scale(.95); }

.copy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; align-items: stretch; }

.copy-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 8px;
    background: #f8fdfa;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 5px 14px rgba(31, 89, 62, .06);
}

.copy-field-head { font-size: 11px; font-weight: 800; color: var(--muted); line-height: 1.4; }

.share-text {
    width: 100%;
    border: 1.5px solid #dbeae1;
    border-radius: 11px;
    padding: 8px;
    font-size: 12px;
    line-height: 1.5;
    background: #fff;
    color: #3d5548;
    resize: none;
    overflow: hidden;
    min-height: 34px;
    font-family: ui-monospace, SFMono-Regular, Menlo, "PingFang SC", monospace;
    word-break: break-word;
}

.copy-pill {
    display: block;
    width: 100%;
    margin: auto 0 0;
    padding: 7px 4px;
    background: #fff;
    border: 1.5px solid var(--accent);
    color: var(--primary);
    font-weight: 800;
    font-size: 11.5px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease;
}

.copy-pill:hover { background: var(--soft); }
.copy-pill.is-done { background: var(--primary); color: #fff; border-color: var(--primary); }

.example-fig { margin-top: 14px; text-align: center; }
.example-fig img { width: min(100%, 300px); border-radius: 16px; border: 1.5px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); margin: 0 auto; }
.example-fig figcaption { font-size: 12px; color: var(--muted); margin-top: 7px; }

.btn-gradient {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, var(--primary), #43b97f, var(--green));
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    padding: 15px 20px;
    border-radius: 999px;
    text-align: center;
    box-shadow: 0 10px 22px rgba(47, 158, 107, .32);
    margin: 10px 0 4px;
    border: 0;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.btn-gradient:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(47, 158, 107, .38); }
.btn-gradient[disabled] { background: #cfe4d8; box-shadow: none; cursor: not-allowed; transform: none; }

.btn-ghost {
    display: inline-block;
    background: #fff;
    color: var(--primary);
    border: 1.5px solid var(--accent);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin: 8px 6px 0 0;
}

/* --------------------------------------------------------------------------
   提交页
   -------------------------------------------------------------------------- */
.submit-head { margin-top: 12px; }
.submit-item {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
}
.submit-poster { width: 58px; height: 78px; border-radius: 10px; overflow: hidden; flex: none; background: var(--soft); }
.submit-poster img { width: 100%; height: 100%; object-fit: cover; }
.submit-head h1 { font-size: 18px; font-weight: 800; }
.submit-tip { font-size: 12.5px; color: var(--muted); margin: 12px 4px 0; line-height: 1.7; }

.submit-form { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }

.upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.upload-zone {
    position: relative;
    aspect-ratio: 3 / 3.6;
    border: 2px dashed var(--accent);
    border-radius: 16px;
    background: #f8fdfa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    overflow: hidden;
    color: #6d9e84;
    transition: border-color .2s ease, background .2s ease;
}

.upload-zone:active { background: var(--soft); }
.upload-zone.has-file { border-style: solid; border-color: var(--primary); background: #fff; }
.upload-icon { font-size: 24px; line-height: 1; }
.upload-text { font-size: 12px; font-weight: 600; }

.upload-preview { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upload-zone.has-file .upload-preview { display: block; }
.upload-zone.has-file .upload-icon,
.upload-zone.has-file .upload-text { display: none; }

.upload-count { text-align: center; font-size: 13px; color: var(--muted); font-weight: 600; }
.upload-count b { color: var(--primary); }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.field input {
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
    color: var(--text);
    outline: 0;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(125, 202, 164, .2); }

.rules { list-style: none; background: #f4fbf7; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.rules li { font-size: 12.5px; color: #567a66; line-height: 1.9; padding-left: 12px; position: relative; }
.rules li:before { content: "·"; position: absolute; left: 0; color: var(--primary); font-weight: 800; }

.privacy { font-size: 12px; color: var(--muted); text-align: center; }

.reviewing { text-align: center; padding: 40px 16px; background: #fff; border-radius: 18px; margin-top: 18px; box-shadow: var(--shadow-sm); }
.reviewing h2 { font-size: 18px; margin: 10px 0 4px; }
.reviewing p { color: var(--muted); font-size: 13px; }

.spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto 10px;
    border: 4px solid var(--line);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.error-box {
    background: #fdeeee;
    border: 1.5px solid #f6c2c4;
    color: #b02a2f;
    border-radius: 14px;
    padding: 11px 14px;
    margin: 12px 0;
    font-size: 13.5px;
    line-height: 1.7;
}

/* 提交成功 */
.result-card {
    background: #fff;
    border-radius: 22px;
    padding: 24px 18px;
    margin-top: 14px;
    text-align: center;
    box-shadow: 0 14px 34px rgba(31, 89, 62, .13);
    border: 3px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, var(--primary), var(--accent), var(--primary));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.result-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #35c07a, #1f9a58);
    color: #fff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(47, 191, 113, .35);
    animation: pop .4s cubic-bezier(.22, 1.4, .36, 1) both;
}

.result-icon.pending { background: linear-gradient(135deg, #f0b429, #d99512); box-shadow: 0 8px 20px rgba(237, 163, 19, .3); }

@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.result-card h1 { font-size: 19px; font-weight: 800; }
.result-sub { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.7; }

.uuid-box { background: #f5fbf7; border: 1.5px dashed var(--accent); border-radius: 14px; padding: 12px; margin: 16px 0; }
.uuid-label { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.uuid-box code { display: block; font-size: 12.5px; word-break: break-all; color: var(--text); margin: 5px 0 8px; font-family: ui-monospace, Menlo, monospace; }

.claim-box { margin-top: 14px; text-align: center; }
.claim-title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.claim-tip { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   查询页
   -------------------------------------------------------------------------- */
.query-panel { background: #fff; border-radius: 20px; padding: 20px 16px; margin-top: 12px; box-shadow: var(--shadow-sm); }
.query-panel h1 { font-size: 20px; font-weight: 800; }
.query-sub { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.7; }

.query-form { display: flex; gap: 8px; margin-top: 14px; }
.query-form input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    outline: 0;
}
.query-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(125, 202, 164, .2); }
.query-form button {
    background: linear-gradient(135deg, var(--primary), var(--green));
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 0 20px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.order-card { border: 1.5px solid var(--line); border-left: 5px solid var(--gold); border-radius: 16px; padding: 14px; margin-top: 16px; background: #fbfefc; }
.order-card.is-ok { border-left-color: var(--green); }
.order-card.is-bad { border-left-color: var(--danger); }

.order-head { display: flex; gap: 12px; align-items: flex-start; }
.order-poster { width: 52px; height: 70px; border-radius: 10px; overflow: hidden; flex: none; background: var(--soft); }
.order-poster img { width: 100%; height: 100%; object-fit: cover; }
.order-info { flex: 1; min-width: 0; }
.order-info h2 { font-size: 16px; font-weight: 800; }
.order-uuid, .order-time { font-size: 11.5px; color: var(--muted); word-break: break-all; margin-top: 2px; }

.status-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; white-space: nowrap; }
.status-badge.approved { background: var(--green); }
.status-badge.pending { background: var(--gold); }
.status-badge.rejected { background: var(--danger); }

.pending-tip { font-size: 13px; color: #8a6a12; background: #fdf7e6; border-radius: 12px; padding: 10px 12px; margin-top: 12px; }

.query-help { background: #fff; border-radius: 18px; padding: 16px; margin-top: 14px; box-shadow: var(--shadow-sm); }
.query-help h2 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.query-help dt { font-size: 13px; font-weight: 700; margin-top: 10px; }
.query-help dd { font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* --------------------------------------------------------------------------
   悬浮工具箱 / 客服
   -------------------------------------------------------------------------- */
body.modal-lock { overflow: hidden; }

.tool-dock { position: fixed; right: 18px; bottom: 24px; width: 56px; height: 56px; z-index: 50; }

.tool-fab, .chat-fab {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary), var(--green));
    color: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(47, 158, 107, .42);
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.tool-dock.is-open .tool-fab { transform: scale(.94) rotate(12deg); }

.tool-sat {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(.35);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
    z-index: 2;
}

.tool-sat-chat, .tool-sat-status { background: linear-gradient(135deg, #3fb883, #278f60); box-shadow: 0 8px 18px rgba(31, 89, 62, .3); }
.tool-dock.is-open .tool-sat { opacity: 1; pointer-events: auto; }
.tool-dock.is-open .tool-sat-chat { transform: translate(-62px, -8px) scale(1); }
.tool-dock.is-open .tool-sat-status { transform: translate(-12px, -66px) scale(1); }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 36, 24, .42);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

.modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.chat-panel, .status-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(92vw, 400px);
    max-height: 84vh;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .25);
    z-index: 60;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -42%) scale(.88);
    transition: opacity .32s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1);
}

.chat-panel.is-open, .status-panel.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.chat-head { display: flex; justify-content: space-between; align-items: flex-start; background: linear-gradient(135deg, var(--primary), #46b981); color: #fff; padding: 13px 15px; }
.chat-title { font-weight: 800; font-size: 15px; }
.chat-sub { font-size: 11px; opacity: .88; margin-top: 2px; }
.chat-close { background: transparent; border: 0; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; }

.chat-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 9px; border-bottom: 1px solid var(--line); }
.chat-q { border: 1.5px solid var(--accent); background: #fff; color: var(--primary); border-radius: 999px; padding: 5px 10px; font-size: 11.5px; cursor: pointer; font-weight: 600; }
.chat-q:hover { background: var(--soft); }

.chat-body { padding: 10px; overflow-y: auto; height: 280px; background: #f7fcf9; }
.chat-msg { margin: 8px 0; max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.chat-msg.user { background: #d9f2e4; margin-left: auto; color: #14432c; }
.chat-msg.bot { background: #fff; border: 1px solid var(--line); }

.chat-input { display: flex; gap: 6px; padding: 9px; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; min-width: 0; font-size: 13px; outline: 0; }
.chat-input button { background: var(--primary); color: #fff; border: 0; border-radius: 999px; padding: 0 16px; cursor: pointer; font-weight: 700; font-size: 13px; }
.chat-note { font-size: 10.5px; color: var(--muted); padding: 0 10px 9px; }

.status-panel-body { padding: 14px 14px 16px; background: #f7fcf9; }
.dock-tip { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin-bottom: 12px; }

/* 顶部领取播报 */
.award-toast {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 28px);
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(31, 143, 92, .96), rgba(47, 191, 113, .96));
    color: #fff;
    box-shadow: 0 10px 26px rgba(20, 80, 50, .26);
    transform: translate(-50%, -170%);
    opacity: 0;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
    pointer-events: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.award-toast.is-show { transform: translate(-50%, 0); opacity: 1; }

.award-avatar {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.award-text { overflow: hidden; text-overflow: ellipsis; }

.award-check { color: #c8f7dd; font-weight: 800; font-size: 12px; }

/* 复制提示 */
.toast {
    position: fixed;
    left: 50%;
    bottom: 110px;
    transform: translate(-50%, 12px);
    background: rgba(15, 36, 24, .9);
    color: #fff;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 999px;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    .hero { gap: 10px; padding: 14px 12px; }
    .hero-main h1 { font-size: 28px; }
    .hero-hot { padding: 10px 8px; }
    .card { padding: 10px; gap: 10px; }
    .card-poster { width: 72px; height: 96px; }
    .btn-get { padding: 7px 11px; font-size: 12px; }
    .card-synopsis { -webkit-line-clamp: 2; font-size: 12px; }
    .platform-row { gap: 18px; }
    .platform-icon { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .js-reveal [data-reveal] { opacity: 1; transform: none; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }