/* components.css — WEBTOON × jciyuan · 通用组件 */

/* ---------- 类型徽章(WEBTOON GENRE 标志) ---------- */
.genre{display:inline-flex;align-items:center;padding:3px 12px;border-radius:6px;font-size:11px;font-weight:700;color:#fff;line-height:1.8;white-space:nowrap}
.g-love{background:var(--rose)}
.g-sweet{background:var(--sweet)}
.g-youth{background:var(--youth)}
.g-campus{background:var(--campus)}
.g-heal{background:var(--heal)}
.g-comedy{background:var(--comedy)}
.g-fantasy{background:var(--fantasy)}
.g-ancient{background:var(--ancient)}
.g-city{background:var(--city)}
.g-daily{background:var(--daily)}
.g-adventure{background:var(--adventure)}
.g-grow{background:var(--grow)}
.g-motive{background:var(--motive)}
.g-moe{background:var(--moe)}
.g-office{background:var(--office)}
.g-def{background:#868b93}

/* ---------- 标签 chip(状态类) ---------- */
.tag{display:inline-flex;align-items:center;padding:2px 11px;border-radius:99px;font-size:12px;font-weight:600;background:var(--surface-2);color:var(--text-dim);line-height:1.7}
.tag-free{background:var(--green-soft);color:var(--green-dark)}
.tag-paid{background:#2c2f36;color:#ffd257}
.tag-hot{background:linear-gradient(135deg,#ff4d6d,#ff8a3d);color:#fff}
.t-green{background:var(--green-soft);color:var(--green-dark)}
.t-gold{background:#fff6df;color:#d99a00}
.t-red{background:#ffecec;color:var(--red)}
.t-cyan{background:#e0f7fb;color:#0090aa}

/* ---------- 筛选 chip ---------- */
.chip{display:inline-flex;align-items:center;padding:8px 18px;border-radius:99px;font-size:14px;font-weight:600;background:var(--surface);border:1.5px solid var(--border);color:var(--text-dim);cursor:pointer;transition:all .15s;user-select:none}
.chip:hover{border-color:var(--green);color:var(--green-dark)}
.chip.on{background:var(--dark);border-color:var(--dark);color:#fff}
.chip.on-green{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 22px;height:44px;border-radius:10px;font-size:15px;font-weight:700;line-height:1;transition:all .18s;white-space:nowrap;user-select:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(0,220,100,.35)}
.btn-primary:hover{background:var(--green-dark)}
.btn-gold{background:linear-gradient(135deg,#ffc23d,#ff9500);color:#fff;box-shadow:0 6px 18px rgba(255,150,0,.32)}
.btn-gold:hover{filter:brightness(1.05)}
.btn-ghost{background:var(--surface);color:var(--text);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--green);color:var(--green-dark);background:var(--green-soft)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:#282a33}
.btn-sm{height:34px;padding:0 15px;font-size:13px;border-radius:8px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- 表单 ---------- */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--text-dim);margin-bottom:8px}
.form-input{width:100%;height:46px;padding:0 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-size:15px;color:var(--text);transition:all .15s}
.form-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(0,220,100,.13)}
textarea.form-input{height:auto;padding:12px 16px;resize:vertical;min-height:90px}
select.form-input{cursor:pointer}

/* ---------- 弹窗 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(13,14,17,.66);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all .2s;padding:20px}
.modal-mask.open{opacity:1;visibility:visible}
.modal{background:var(--surface);border-radius:20px;padding:34px;width:440px;max-width:94%;max-height:88vh;overflow:auto;text-align:center;box-shadow:var(--shadow-lg);transform:translateY(14px);transition:transform .25s}
.modal-mask.open .modal{transform:translateY(0)}
.modal h3{margin-bottom:14px}
.qr-modal .qr-amount{font-family:var(--num);font-size:2.2rem;font-weight:800;margin:4px 0 10px}
.qr-modal .qr-img{width:210px;height:210px;object-fit:cover;border-radius:14px;border:1px solid var(--border);margin:0 auto}
.qr-modal .qr-hint{font-size:13px;color:var(--text-dim);margin:14px 0 20px;line-height:1.7}
.qr-modal p{color:var(--text-dim);font-size:14px}

/* ---------- 空状态 ---------- */
.empty{padding:70px 30px;text-align:center;color:var(--text-dim);background:var(--surface);border:1.5px dashed var(--border);border-radius:var(--radius)}
.empty h3{color:var(--text);margin-bottom:8px}

/* ---------- 区块标题(WEBTOON 粗黑+绿色装饰) ---------- */
.section{padding:52px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px}
.section-head h2{display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:900}
.section-head h2::before{content:"";width:8px;height:24px;border-radius:99px;background:var(--green)}
.section-head .more{font-size:14px;font-weight:600;color:var(--text-dim);display:inline-flex;align-items:center;gap:4px;transition:color .15s}
.section-head .more:hover{color:var(--green-dark)}

/* ---------- 通用网格 ---------- */
.grid{display:grid;gap:22px}
.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.grid-5{grid-template-columns:repeat(4,1fr)}.grid-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.grid-5,.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}.section{padding:38px 0}}

/* ---------- 章节行 ---------- */
.chapter-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;font-size:14px;transition:all .15s;cursor:pointer}
.chapter-item:hover{border-color:var(--green);box-shadow:var(--shadow-sm);transform:translateX(4px)}

/* ---------- 动画 ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}