/* ============================================================
   TeweekAi 视频教学站 —— 样式
   从源文件 teweekai-tutorials.html 原样迁移，视觉保持不变。
   仅新增了「内容加载失败」提示条样式（文件末尾）。
   ============================================================ */

/* ---------------- 基础 ---------------- */
:root{color-scheme:light;background:#edf4f7;}
html{margin:0;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:linear-gradient(125deg,#e9f0fa,#eef9f5);font-family:system-ui,sans-serif;}
button{-webkit-tap-highlight-color:transparent;}
button:focus-visible{outline:3px solid #117982;outline-offset:3px;}
noscript{display:block;margin:20px;padding:16px;border:1px solid #bed5dc;color:#183c47;background:#fff;}

/* ---------------- 组件 ---------------- */
#teweekai-guide { --tw-ink:#152a32;--tw-muted:#5c7179;--tw-paper:#fff;--tw-page:#f8fbfc;--tw-line:#e5edef;--tw-accent:#117982;--tw-soft:#e8f6f6;--tw-blue:#e2edfd;--tw-mint:#daf5ef;--tw-peach:#f8eee5;--tw-radius:20px;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--tw-ink);background:transparent;padding:12px 0; }
#teweekai-guide * {box-sizing:border-box;}
#teweekai-guide button {font:inherit;color:inherit;cursor:pointer;}
#teweekai-guide button:focus-visible {outline:3px solid var(--tw-accent);outline-offset:3px;}
#teweekai-guide [hidden] {display:none!important;}
#teweekai-guide .tw-phone {width:100%;max-width:430px;margin:0 auto;border:1px solid var(--tw-line);border-radius:28px;background:var(--tw-page);overflow:hidden;}
#teweekai-guide .tw-top {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:23px 22px 14px;background:var(--tw-paper);}
#teweekai-guide .tw-brand {display:flex;align-items:center;gap:8px;font-size:19px;letter-spacing:-.6px;font-weight:700;white-space:nowrap;}
#teweekai-guide .tw-brand em {font-style:normal;color:var(--tw-accent);}
#teweekai-guide .tw-logo {display:grid;place-items:center;background:var(--tw-soft);color:var(--tw-accent);width:30px;height:32px;border-radius:10px;}
#teweekai-guide .tw-logo svg {width:19px;height:19px;}
#teweekai-guide .tw-language {display:flex;padding:3px;gap:2px;border:1px solid var(--tw-line);border-radius:30px;background:var(--tw-page);}
#teweekai-guide .tw-language button {border:0;background:transparent;padding:7px 10px;min-height:34px;border-radius:24px;font-size:12px;font-weight:500;}
#teweekai-guide .tw-language button[aria-pressed="true"] {background:var(--tw-ink);color:var(--tw-paper);}
#teweekai-guide .tw-hero {position:relative;padding:27px 24px 26px;background:linear-gradient(115deg,var(--tw-blue),var(--tw-mint));overflow:hidden;}
#teweekai-guide .tw-hero:after {content:"";position:absolute;width:220px;height:220px;border-radius:50%;border:30px solid #ffffff50;right:-114px;top:6px;pointer-events:none;}
#teweekai-guide .tw-eyebrow {font-size:11px;font-weight:700;letter-spacing:2px;color:var(--tw-accent);margin-bottom:11px;}
#teweekai-guide h1 {position:relative;z-index:1;font-size:29px;line-height:1.2;letter-spacing:-.8px;font-weight:700;margin:0 0 12px;}
#teweekai-guide .tw-subtitle {position:relative;z-index:1;font-size:13px;line-height:1.8;max-width:285px;margin:0;color:var(--tw-muted);}
#teweekai-guide .tw-pair {display:flex;align-items:center;gap:7px;margin-top:22px;font-size:11px;letter-spacing:.2px;font-weight:500;color:var(--tw-ink);}
#teweekai-guide .tw-pair svg {width:15px;height:15px;}
#teweekai-guide .tw-plus {opacity:.5;margin:0 3px;}
#teweekai-guide .tw-categories {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:18px 18px 0;}
#teweekai-guide .tw-category {position:relative;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:10px;border:1px solid var(--tw-line);background:var(--tw-paper);border-radius:15px;padding:13px 11px;min-height:114px;}
#teweekai-guide .tw-category[aria-pressed="true"] {border-color:var(--tw-accent);background:var(--tw-soft);box-shadow:inset 0 -3px 0 var(--tw-accent);}
#teweekai-guide .tw-category-top {display:flex;align-items:center;justify-content:space-between;width:100%;color:var(--tw-muted);font-size:11px;letter-spacing:1px;}
#teweekai-guide .tw-category-top svg {height:19px;width:19px;}
#teweekai-guide .tw-category[aria-pressed="true"] .tw-category-top {color:var(--tw-accent);}
#teweekai-guide .tw-category-label {font-size:12px;line-height:1.5;font-weight:600;overflow-wrap:normal;}
#teweekai-guide .tw-main {padding:25px 19px 19px;}
#teweekai-guide .tw-section-heading {margin-bottom:17px;}
#teweekai-guide .tw-heading-row {display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
#teweekai-guide h2 {font-size:18px;line-height:1.4;letter-spacing:-.4px;margin:0;font-weight:650;}
#teweekai-guide .tw-count {font-size:11px;color:var(--tw-muted);white-space:nowrap;}
#teweekai-guide .tw-description {margin:6px 0 0;color:var(--tw-muted);font-size:12px;line-height:1.65;}
#teweekai-guide .tw-model-note {display:flex;align-items:flex-start;gap:7px;background:var(--tw-soft);border-radius:10px;padding:10px 12px;font-size:11px;line-height:1.6;margin:12px 0 0;color:var(--tw-accent);}
#teweekai-guide .tw-model-note svg {width:15px;height:15px;flex-shrink:0;margin-top:1px;}
#teweekai-guide .tw-feature {border:1px solid var(--tw-line);border-radius:var(--tw-radius);overflow:hidden;background:var(--tw-paper);}
#teweekai-guide .tw-video-button {padding:0;border:0;background:transparent;text-align:left;display:block;width:100%;}
#teweekai-guide .tw-cover {position:relative;aspect-ratio:16/9;background:linear-gradient(118deg,var(--tw-blue),var(--tw-mint));overflow:hidden;display:flex;align-items:center;justify-content:center;}
#teweekai-guide .tw-cover:before {content:"";position:absolute;width:210px;height:210px;border:1px solid #a6c2d288;border-radius:50%;right:-10px;top:-90px;}
#teweekai-guide .tw-cover:after {content:"";position:absolute;width:190px;height:190px;border:24px solid #ffffff40;border-radius:50%;left:-106px;bottom:-85px;}
#teweekai-guide .tw-cover-label {position:absolute;top:15px;left:16px;font-size:11px;letter-spacing:1.4px;font-weight:600;color:var(--tw-accent);}
#teweekai-guide .tw-cover-symbol {position:absolute;right:31px;bottom:25px;color:#648b9860;transform:rotate(-8deg);}
#teweekai-guide .tw-cover-symbol svg {width:77px;height:77px;stroke-width:1.1;}
#teweekai-guide .tw-play {display:grid;place-items:center;width:53px;height:53px;border-radius:50%;background:#ffffffed;color:var(--tw-accent);box-shadow:0 5px 20px #48798119;z-index:1;}
#teweekai-guide .tw-play svg {width:19px;height:19px;margin-left:3px;fill:currentColor;stroke-width:1;}
#teweekai-guide .tw-cover-bottom {position:absolute;left:16px;bottom:14px;font-size:11px;color:var(--tw-muted);}
#teweekai-guide .tw-feature-copy {padding:15px 16px 16px;}
#teweekai-guide .tw-video-meta {display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tw-accent);margin-bottom:7px;}
#teweekai-guide .tw-dot {width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;}
#teweekai-guide h3 {font-size:15px;line-height:1.5;font-weight:600;margin:0;}
#teweekai-guide .tw-feature-desc {font-size:12px;line-height:1.6;color:var(--tw-muted);margin:6px 0 0;}
#teweekai-guide .tw-list {margin-top:9px;}
#teweekai-guide .tw-row {display:flex;align-items:center;gap:13px;text-align:left;width:100%;background:transparent;border:0;border-bottom:1px solid var(--tw-line);padding:14px 0;}
#teweekai-guide .tw-row:last-child {border-bottom:0;}
#teweekai-guide .tw-mini {position:relative;flex:0 0 109px;aspect-ratio:16/10;border-radius:11px;background:var(--tw-mint);display:flex;align-items:center;justify-content:center;color:var(--tw-accent);overflow:hidden;}
#teweekai-guide .tw-mini.peach {background:var(--tw-peach);color:#8d715b;}
#teweekai-guide .tw-mini>svg {height:26px;width:26px;stroke-width:1.3;}
#teweekai-guide .tw-mini-play {position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--tw-paper);}
#teweekai-guide .tw-mini-play svg {width:9px;height:9px;fill:currentColor;margin-left:1px;}
#teweekai-guide .tw-row-copy {flex:1;min-width:0;}
#teweekai-guide .tw-row h3 {font-size:14px;line-height:1.6;overflow-wrap:anywhere;}
#teweekai-guide .tw-category-count {font-size:11px;line-height:1.4;color:var(--tw-muted);}
#teweekai-guide .tw-category {gap:8px;}
#teweekai-guide .tw-category-label {font-size:13px;}
#teweekai-guide .tw-heading-row {flex-wrap:wrap;}
#teweekai-guide .tw-row-meta {display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:7px;color:var(--tw-muted);font-size:11px;line-height:1.4;}
#teweekai-guide .tw-footer {margin:0 19px;padding:16px 0 23px;border-top:1px solid var(--tw-line);display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:11px;color:var(--tw-muted);letter-spacing:.1px;}
#teweekai-guide .tw-back {display:flex;align-items:center;gap:6px;border:0;background:transparent;font-size:12px;color:var(--tw-accent);padding:0;min-height:44px;margin-bottom:12px;}
#teweekai-guide .tw-back svg {width:16px;height:16px;}
#teweekai-guide .tw-detail {padding:10px 19px 22px;}
#teweekai-guide .tw-empty-video {aspect-ratio:16/9;background:#183c47;color:#e4f4f5;border-radius:var(--tw-radius);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;position:relative;padding:22px;}
#teweekai-guide .tw-empty-video svg {height:34px;width:34px;opacity:.6;stroke-width:1.3;}
#teweekai-guide .tw-empty-title {font-size:13px;font-weight:500;}
#teweekai-guide .tw-empty-label {font-size:11px;color:#9bb8c0;}
#teweekai-guide .tw-detail-heading {margin:20px 0 12px;}
#teweekai-guide .tw-detail-heading h2 {font-size:21px;}
#teweekai-guide .tw-detail-caption {font-size:12px;line-height:1.75;color:var(--tw-muted);margin:10px 0 23px;}
#teweekai-guide .tw-playlist {border:1px solid var(--tw-line);border-radius:var(--tw-radius);background:var(--tw-paper);padding:16px;}
#teweekai-guide .tw-playlist-title {font-size:13px;font-weight:600;margin:0 0 8px;}
#teweekai-guide .tw-episode {display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-radius:9px;padding:13px 10px;background:transparent;font-size:12px;line-height:1.5;}
#teweekai-guide .tw-episode[aria-current="true"] {background:var(--tw-soft);color:var(--tw-accent);}
#teweekai-guide .tw-episode-num {font-size:11px;opacity:.65;}
#teweekai-guide .tw-episode svg {height:14px;width:14px;margin-left:auto;flex-shrink:0;}
#teweekai-guide[data-layout="compact"] .tw-cover {aspect-ratio:2.4/1;}
@media (max-width:370px) {
  #teweekai-guide .tw-top {padding:18px 16px 12px;gap:8px;}
  #teweekai-guide .tw-brand {font-size:17px;gap:5px;}
  #teweekai-guide .tw-language button {padding:7px 8px;}
  #teweekai-guide .tw-hero {padding:25px 19px;}
  #teweekai-guide .tw-categories {padding-left:13px;padding-right:13px;gap:6px;}
  #teweekai-guide .tw-category {padding:11px 8px;}
  #teweekai-guide .tw-category-label {font-size:11px;}
  #teweekai-guide .tw-main {padding:22px 15px 15px;}
  #teweekai-guide .tw-mini {flex-basis:91px;}
  #teweekai-guide h2 {font-size:16px;}
}
@media (pointer:coarse) {#teweekai-guide .tw-language button {min-height:44px;}}

/* 独立网页：保留已确认的浅色配色，移动端铺满屏幕。 */
#teweekai-guide {padding:0;}
#teweekai-guide .tw-phone {max-width:480px;min-height:100vh;min-height:100svh;border:0;border-radius:0;}
#teweekai-guide .tw-language button {min-height:44px;}
#teweekai-guide .tw-category-label,#teweekai-guide .tw-subtitle {white-space:pre-line;}
#teweekai-guide .tw-category-label {font-size:13px;}
#teweekai-guide .tw-row-title {display:block;font-size:14px;font-weight:600;line-height:1.6;overflow-wrap:anywhere;}
#teweekai-guide .tw-row-meta {font-size:12px;}
#teweekai-guide .tw-count {font-size:12px;}
#teweekai-guide .tw-heading-row {flex-wrap:wrap;}
#teweekai-guide .tw-video-meta {flex-wrap:wrap;}
#teweekai-guide .tw-detail-heading h2 {overflow-wrap:anywhere;}
#teweekai-guide .tw-top {padding-top:max(20px,env(safe-area-inset-top));}
#teweekai-guide .tw-footer {padding-bottom:max(24px,env(safe-area-inset-bottom));}
#teweekai-guide .tw-player {display:block;width:100%;aspect-ratio:16/9;max-height:70vh;object-fit:contain;border-radius:var(--tw-radius);background:#183c47;}
#teweekai-guide .tw-empty-video {text-align:center;}
#teweekai-guide .tw-empty-label {line-height:1.7;}
#teweekai-guide .tw-player-error {padding:12px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;line-height:1.6;color:#8c3a2c;}
#teweekai-guide .tw-player-error button {border:1px solid var(--tw-line);border-radius:9px;min-height:44px;background:var(--tw-paper);padding:8px 12px;}
#teweekai-guide .tw-poster {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
#teweekai-guide .tw-mini-play {z-index:2;}
#teweekai-guide .tw-cover.has-poster:before {inset:0;width:100%;height:100%;border:0;border-radius:0;background:linear-gradient(180deg,#0006,transparent 45%,#0006);z-index:1;}
#teweekai-guide .tw-cover.has-poster .tw-cover-symbol {display:none;}
#teweekai-guide .tw-cover.has-poster .tw-cover-label,#teweekai-guide .tw-cover.has-poster .tw-cover-bottom {color:#fff;z-index:2;}
#teweekai-guide .tw-cover.has-poster .tw-play {z-index:2;}
#teweekai-guide .tw-category:hover,#teweekai-guide .tw-row:hover {background:var(--tw-soft);}
#teweekai-guide .tw-video-button:hover .tw-play {box-shadow:0 5px 24px #48798140;}
@media (min-width:600px) {
  #teweekai-guide {padding:30px 20px;}
  #teweekai-guide .tw-phone {min-height:0;border:1px solid var(--tw-line);border-radius:28px;box-shadow:0 16px 64px #4e758414;}
}
@media (max-width:370px) {#teweekai-guide .tw-category-label{font-size:12px;}}

/* ---------------- 新增：内容加载失败提示条 ---------------- */
#teweekai-guide .tw-load-error {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 19px 0;padding:12px 14px;border:1px solid #f0cfc8;background:#fdf0ee;color:#8c3a2c;border-radius:12px;font-size:13px;line-height:1.6;}
#teweekai-guide .tw-load-error button {border:1px solid #e0c3bb;border-radius:9px;min-height:40px;background:#fff;padding:6px 12px;color:#8c3a2c;font-size:13px;}

/* ---------------- 新增：产品切换器 ----------------
   只有一个产品时整个容器带 hidden，完全不占位，
   页面表现与单产品站点一致。 */
#teweekai-guide .tw-products {display:flex;gap:8px;padding:12px 18px 0;background:var(--tw-paper);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
#teweekai-guide .tw-products::-webkit-scrollbar {display:none;}
#teweekai-guide .tw-products-track {display:flex;gap:8px;}
#teweekai-guide .tw-product {flex:0 0 auto;display:flex;align-items:center;gap:7px;border:1px solid var(--tw-line);background:var(--tw-page);color:var(--tw-ink);border-radius:30px;padding:9px 15px;font-size:12.5px;font-weight:500;white-space:nowrap;min-height:40px;}
#teweekai-guide .tw-product svg {width:15px;height:15px;flex:0 0 15px;}
#teweekai-guide .tw-product[aria-pressed="true"] {background:var(--tw-ink);border-color:var(--tw-ink);color:var(--tw-paper);}
@media (min-width:600px) {
  #teweekai-guide .tw-products {padding-top:14px;}
}
@media (max-width:370px) {
  #teweekai-guide .tw-products {padding-left:13px;padding-right:13px;gap:6px;}
  #teweekai-guide .tw-product {padding:8px 12px;font-size:12px;}
}