/* ==========================================================================
   cinema / components.css — 通用组件层
   命名：.c-*（component）。页面样式不得修改本文件内部实现。
   ========================================================================== */

/* ---------- 容器 ---------- */
.c-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

/* ---------- 按钮 ---------- */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 var(--sp-4);
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--fs-base);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.c-btn:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-strong);
}

.c-btn:active {
    transform: translateY(1px);
}

.c-btn[disabled],
.c-btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.c-btn--primary {
    border-color: transparent;
    background: var(--c-brand-gradient);
    color: var(--c-text-on-brand);
    font-weight: 600;
}

.c-btn--primary:hover {
    background: var(--c-brand-gradient);
    box-shadow: var(--shadow-brand);
}

.c-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--c-text-secondary);
}

.c-btn--ghost:hover {
    background: var(--c-surface-hover);
    color: var(--c-text);
}

.c-btn--sm {
    height: 30px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
}

.c-btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
}

.c-btn--block {
    display: flex;
    width: 100%;
}

/* ---------- 标签 / 徽标 ---------- */
.c-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    background: var(--c-surface-sunken);
    border: 1px solid transparent;
    color: var(--c-text-secondary);
    font-size: var(--fs-sm);
    line-height: 1;
    white-space: nowrap;
    transition: all var(--dur-fast) var(--ease);
}

.c-chip--action {
    cursor: pointer;
}

.c-chip--action:hover {
    background: var(--c-brand-softer);
    color: var(--c-brand);
    border-color: var(--c-brand-soft);
}

.c-chip[aria-pressed="true"],
.c-chip.is-active {
    background: var(--c-brand-soft);
    border-color: var(--c-brand-soft);
    color: var(--c-brand);
    font-weight: 600;
}

.c-chip--pan {
    background: transparent;
    border-color: var(--c-border);
}

.c-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: var(--r-xs);
    background: var(--c-surface-sunken);
    color: var(--c-text-secondary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.c-badge--brand { background: var(--c-brand-soft); color: var(--c-brand); }
.c-badge--success { background: var(--c-success-soft); color: var(--c-success); }
.c-badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.c-badge--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.c-badge--info { background: var(--c-info-soft); color: var(--c-info); }

/* 网盘品牌点 */
.c-pan-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-text-muted);
}

/* ---------- 卡片 ---------- */
.c-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition: border-color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease);
}

.c-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-divider);
}

.c-card__title {
    font-size: var(--fs-md);
    font-weight: 650;
}

.c-card__extra {
    margin-left: auto;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.c-card__body {
    padding: var(--sp-3) var(--sp-4);
}

/* ---------- 骨架屏 ---------- */
.c-skeleton {
    display: block;
    border-radius: var(--r-sm);
    background: linear-gradient(
        100deg,
        var(--c-surface-sunken) 30%,
        var(--c-surface-hover) 50%,
        var(--c-surface-sunken) 70%
    );
    background-size: 300% 100%;
    animation: c-shimmer 1.4s var(--ease) infinite;
}

@keyframes c-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* ---------- 空态 ---------- */
.c-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-7) var(--sp-4);
    color: var(--c-text-muted);
    font-size: var(--fs-base);
    text-align: center;
}

.c-empty__hint {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

/* ---------- 加载点 ---------- */
.c-dots {
    display: inline-flex;
    gap: 4px;
}

.c-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: c-pulse 1.1s var(--ease) infinite;
}

.c-dots i:nth-child(2) { animation-delay: 0.16s; }
.c-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes c-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    45% { opacity: 1; transform: scale(1); }
}

/* ---------- 分页 ---------- */
.c-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-5) 0;
    flex-wrap: wrap;
}

.c-pager__btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-secondary);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    transition: all var(--dur-fast) var(--ease);
}

.c-pager__btn:hover:not(:disabled) {
    border-color: var(--c-border-strong);
    color: var(--c-text);
}

.c-pager__btn[aria-current="page"] {
    border-color: transparent;
    background: var(--c-brand-gradient);
    color: var(--c-text-on-brand);
    font-weight: 700;
}

.c-pager__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.c-pager__info {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- 弹窗（dialog） ---------- */
.c-dialog-layer {
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: var(--c-scrim);
    backdrop-filter: blur(3px);
    animation: c-fade-in var(--dur) var(--ease);
}

.c-dialog-layer[hidden] {
    display: none;
}

.c-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - var(--sp-8));
    display: flex;
    flex-direction: column;
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    animation: c-dialog-in var(--dur) var(--ease);
    overflow: hidden;
}

.c-dialog--sm { max-width: 320px; }
.c-dialog--wide { max-width: 560px; }

.c-dialog__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-divider);
    font-size: var(--fs-md);
    font-weight: 650;
}

.c-dialog__close {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    color: var(--c-text-muted);
    transition: all var(--dur-fast) var(--ease);
}

.c-dialog__close:hover {
    background: var(--c-surface-hover);
    color: var(--c-text);
}

.c-dialog__body {
    padding: var(--sp-4);
    overflow-y: auto;
}

.c-dialog__foot {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--c-divider);
}

.c-dialog__foot .c-btn {
    flex: 1;
}

@keyframes c-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes c-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* ---------- 轻提示（toast） ---------- */
.c-toast-stack {
    position: fixed;
    top: var(--sp-5);
    left: 50%;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    transform: translateX(-50%);
    pointer-events: none;
}

.c-toast {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: min(80vw, 420px);
    padding: 9px var(--sp-4);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    box-shadow: var(--shadow-md);
    color: var(--c-text);
    font-size: var(--fs-base);
    animation: c-toast-in var(--dur) var(--ease);
}

.c-toast--success { border-color: var(--c-success-soft); color: var(--c-success); }
.c-toast--error { border-color: var(--c-danger-soft); color: var(--c-danger); }

.c-toast.is-leaving {
    animation: c-toast-out var(--dur) var(--ease) forwards;
}

@keyframes c-toast-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
}

@keyframes c-toast-out {
    to { opacity: 0; transform: translateY(-8px); }
}

/* ---------- 分段控件 / Tabs ---------- */
.c-tabs {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

.c-tab {
    position: relative;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    color: var(--c-text-secondary);
    font-size: var(--fs-sm);
    transition: all var(--dur-fast) var(--ease);
}

.c-tab:hover {
    background: var(--c-surface-hover);
    color: var(--c-text);
}

.c-tab[aria-selected="true"] {
    background: var(--c-brand-soft);
    color: var(--c-brand);
    font-weight: 600;
}

/* ---------- 输入 ---------- */
.c-field {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: 40px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--c-surface-sunken);
    border: 1px solid var(--c-border);
    transition: border-color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease);
}

.c-field:focus-within {
    border-color: var(--c-brand);
    background: var(--c-surface);
}

.c-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font-size: var(--fs-base);
}

.c-textarea {
    width: 100%;
    min-height: 92px;
    padding: 10px var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--c-surface-sunken);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    font-size: var(--fs-base);
    line-height: 1.55;
    resize: vertical;
    outline: none;
}

.c-textarea:focus {
    border-color: var(--c-brand);
    background: var(--c-surface);
}

/* ---------- 分割线 ---------- */
.c-hr {
    height: 1px;
    border: 0;
    margin: var(--sp-4) 0;
    background: var(--c-divider);
}

/* ---------- 列表行 ---------- */
.c-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 9px var(--sp-3);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}

.c-row:hover {
    background: var(--c-surface-hover);
}

.c-row__idx {
    width: 18px;
    flex: 0 0 auto;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--c-text-muted);
}

.c-row__idx.is-top {
    color: var(--c-accent);
}

.c-row__main {
    flex: 1;
    min-width: 0;
}

.c-row__title {
    font-size: var(--fs-base);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-row__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

/* 榜单行的副标题与右侧热度数字 */
.c-row__sub {
    display: block;
    margin-top: 1px;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--c-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-row__badge {
    flex: 0 0 auto;
    align-self: center;
    padding: 0 6px;
    border-radius: var(--r-xs);
    background: var(--c-surface-sunken);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    line-height: 17px;
    font-variant-numeric: tabular-nums;
}

/* ---------- 页面区块标题 ---------- */
.c-section {
    margin-top: var(--sp-6);
}

.c-section__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.c-section__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.c-section__title svg {
    color: var(--c-brand);
}

.c-section__more {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    transition: color var(--dur-fast) var(--ease);
}

.c-section__more:hover {
    color: var(--c-brand);
}


/* ---------- 可点击行 ---------- */
.c-row[data-keyword],
.c-row[data-resource] {
    cursor: pointer;
}

.c-row[data-keyword]:hover .c-row__title,
.c-row[data-resource]:hover .c-row__title {
    color: var(--c-brand);
}