/* === 共享 CSS 类库 — Apple 风格 === */

/* Layout */
.flex { display: flex; }
.iflex { display: inline-flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap4 { gap: 4px; }
.gap6 { gap: 6px; }
.gap8 { gap: 8px; }
.gap12 { gap: 12px; }
.gap16 { gap: 16px; }
.gap20 { gap: 20px; }

/* Text sizes */
.t10 { font-size: 10px; }
.t11 { font-size: 11px; }
.t12 { font-size: 12px; }
.t13 { font-size: 13px; }
.t14 { font-size: 14px; }
.t15 { font-size: 15px; }
.t16 { font-size: 16px; }

/* Font weights */
.w400 { font-weight: 400; }
.w500 { font-weight: 500; }
.w600 { font-weight: 600; }
.w700 { font-weight: 700; }

/* Text colors */
.c-muted { color: #8e8e93; }
.c-sub { color: #86868b; }
.c-body { color: #1d1d1f; }
.c-pri { color: #4A9EFF; }
.c-white { color: #fff; }
.c-ok { color: #34c759; }
.c-err { color: #ff3b30; }

/* Card — Apple: generous padding, barely-there shadow, big radius */
.card { background: #fff; border-radius: 20px; padding: 28px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.025); border: 1px solid rgba(0,0,0,.03); }
.card-sm { border-radius: 16px; padding: 18px; }

/* Rounded */
.r6 { border-radius: 10px; }
.r8 { border-radius: 12px; }
.r10 { border-radius: 14px; }
.r12 { border-radius: 18px; }

/* Backgrounds */
.bg-w { background: #fff; }
.bg-muted { background: #f5f5f7; }
.bg-hint { background: #f0f0f5; }
.bg-ok-light { background: #e8f8ed; }

/* Misc */
.pre-wrap { white-space: pre-wrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pointer { cursor: pointer; }
.hide { display: none; }

/* Thumbnail cards */
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.thumb-card { position: relative; cursor: pointer; }
.thumb-card-img { width: 100%; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #e8e8ed, #d1d1d6); display: flex; align-items: center; justify-content: center; }
.thumb-card-img img { width: 100%; height: 100%; object-fit: cover; }
.thumb-card-del { position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; background: #ff3b30; color: #fff; border: none; font-size: 11px; cursor: pointer; line-height: 1; z-index: 2; }
.thumb-card-name { font-size: 11px; color: #8e8e93; font-weight: 500; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Section header */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-header h2 { font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.section-header .badge { font-size: 13px; color: #8e8e93; font-weight: 400; }

/* Sidebar badges */
.si-badge { background: #4A9EFF; color: #fff; font-size: 10px; padding: 1px 7px; border-radius: 12px; min-width: 18px; text-align: center; font-weight: 600; }

/* Empty state */
.empty { text-align: center; padding: 72px 24px; color: #8e8e93; font-size: 14px; line-height: 2; }

/* Platform tabs bar */
.plat-tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 6px; background: #f0f0f5; border-radius: 16px; }
.plat-tab { flex: 1; text-align: center; font-size: 13px; padding: 10px 14px; border-radius: 14px; cursor: pointer; border: none; background: transparent; color: #8e8e93; font-weight: 500; transition: all .2s; }
.plat-tab.act { background: #4A9EFF; color: #fff; border-radius: 14px; }

/* ===== 全局加载条 ===== */
@keyframes kfApiLoad{0%{width:0}30%{width:40%}70%{width:75%}100%{width:90%}}
#apiBar{position:fixed;top:0;left:0;height:3px;z-index:99999;background:linear-gradient(90deg,#4A9EFF,#A0D8FF);opacity:0;pointer-events:none;transition:opacity .2s}
#apiBar.on{opacity:1;animation:kfApiLoad 8s ease-out forwards}
#apiBar.done{width:100%!important;animation:none;opacity:0}

/* ===== 全局错误横幅 ===== */
#errBanner{position:fixed;top:48px;left:50%;transform:translateX(-50%);z-index:99998;background:#ff3b30;color:#fff;padding:10px 20px;border-radius:12px;font-size:13px;font-weight:500;box-shadow:0 4px 16px rgba(255,59,48,.3);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
#errBanner.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(4px)}
#errBanner.retry{cursor:pointer;background:#ff9500}
#errBanner.retry::after{content:' 点击重试';font-size:11px;opacity:.8}

/* ===== 知识科普体：标题/字幕可视化模板卡片 ===== */
#ksSubtitleTemplateCards { scrollbar-width: thin; }
.ks-tpl-card { flex: 0 0 auto; width: 110px; cursor: pointer; padding: 6px; border: 2px solid transparent; border-radius: 12px; background: #fff; transition: all .15s; }
.ks-tpl-card:hover { border-color: #b9d8ff; }
.ks-tpl-card.active { border-color: #4A9EFF; background: #eef6ff; }