/* vclass — app.css　原創「基因健康綠 + DNA 螺旋」視覺 */
:root{
  --vc-ink:#0F2A1E; --vc-ink-2:#33493D;
  --vc-green:#2FA15A; --vc-green-deep:#1B6B45;
  --vc-mint:#E9F4EC; --vc-mint-2:#D6EBDB;
  --vc-paper:#FBFDFB; --vc-amber:#E0A53B;
  --vc-line:#DCE7DF; --vc-shadow:0 18px 40px -22px rgba(15,42,30,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--vc-paper);color:var(--vc-ink);
  font-family:"Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  -webkit-font-smoothing:antialiased}
.vc-mono{font-family:"Space Grotesk","Noto Sans TC",sans-serif;letter-spacing:.04em}
a{text-decoration:none;color:inherit}
::selection{background:var(--vc-mint-2)}

.vc-helix .rung{stroke:var(--vc-green);stroke-width:3;stroke-linecap:round}
.vc-helix .node{fill:var(--vc-green)}

/* 導覽列 */
.vc-nav{position:sticky;top:0;z-index:60;background:rgba(251,253,251,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--vc-line);transition:box-shadow .25s}
.vc-nav.is-scrolled{box-shadow:0 10px 30px -24px rgba(15,42,30,.6)}
.vc-brand{display:flex;align-items:center;gap:.6rem;font-weight:900;font-size:1.35rem;letter-spacing:-.01em}
.vc-brand .glyph{width:34px;height:34px;border-radius:11px;
  background:linear-gradient(150deg,var(--vc-green),var(--vc-green-deep));display:grid;place-items:center;flex:0 0 auto}
.vc-navlink{font-weight:500;color:var(--vc-ink-2);padding:.4rem .2rem;position:relative}
.vc-navlink:hover{color:var(--vc-ink)}
.vc-navlink.active{color:var(--vc-ink)}
.vc-navlink.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--vc-green)}
.vc-iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--vc-line);background:#fff;
  display:grid;place-items:center;color:var(--vc-ink-2);transition:.18s}
.vc-iconbtn:hover{border-color:var(--vc-green);color:var(--vc-green-deep)}
.vc-btn{border:none;border-radius:12px;font-weight:700;padding:.62rem 1.15rem;cursor:pointer;transition:.18s;font-family:inherit;display:inline-flex;align-items:center;gap:.4rem}
.vc-btn-primary{background:var(--vc-green);color:#fff}
.vc-btn-primary:hover{background:var(--vc-green-deep);color:#fff}
.vc-btn-ghost{background:#fff;color:var(--vc-ink);border:1px solid var(--vc-line)}
.vc-btn-ghost:hover{border-color:var(--vc-green)}
.vc-btn-sm{padding:.4rem .8rem;font-size:.85rem;border-radius:10px}
.vc-avatar{width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(150deg,var(--vc-green),var(--vc-green-deep));color:#fff;display:grid;place-items:center;font-weight:700}

/* 廣告輪播 */
.vc-hero{position:relative;padding:clamp(1.2rem,3vw,2.2rem) 0 .4rem}
.vc-carousel{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--vc-shadow)}
.vc-slide{position:relative;min-height:340px;display:none;grid-template-columns:1.15fr .85fr;background:var(--vc-mint)}
.vc-slide.active{display:grid}
.vc-slide.has-image{display:none;grid-template-columns:1fr}
.vc-slide.has-image.active{display:block}
.vc-slide.has-image img{display:block;width:100%;height:clamp(300px,42vw,460px);object-fit:cover}
@media(max-width:767px){.vc-slide{grid-template-columns:1fr;min-height:300px}}
.vc-slide__body{padding:clamp(1.6rem,3.5vw,3rem);display:flex;flex-direction:column;justify-content:center;z-index:2}
.vc-eyebrow{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--vc-green-deep);margin-bottom:.9rem;display:flex;align-items:center;gap:.55rem}
.vc-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--vc-amber)}
.vc-slide h2{font-weight:900;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.18;margin:0 0 .7rem}
.vc-slide__sub{color:var(--vc-ink-2);font-size:1.02rem;max-width:34ch;margin-bottom:1.4rem}
.vc-slide__art{position:relative;overflow:hidden}
.vc-slide__art .panel{position:absolute;inset:0;
  background:radial-gradient(120% 120% at 80% 10%, rgba(47,161,90,.16), transparent 60%),linear-gradient(160deg,#fff,var(--vc-mint-2))}
.vc-rail{position:absolute;top:0;bottom:0;left:-4px;width:120px;opacity:.9}
.vc-dots{display:flex;gap:.45rem;justify-content:center;margin-top:1rem}
.vc-dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--vc-mint-2);cursor:pointer;padding:0;transition:.2s}
.vc-dots button.active{width:26px;border-radius:6px;background:var(--vc-green)}

/* 區段標題 */
.vc-sec{padding:clamp(1.6rem,4vw,2.8rem) 0}
.vc-sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.3rem}
.vc-sec__title{font-weight:900;font-size:clamp(1.3rem,2.6vw,1.7rem);margin:0;display:flex;align-items:center;gap:.6rem}
.vc-sec__title .tick{width:10px;height:24px;border-radius:4px;background:var(--vc-green);display:inline-block}
.vc-sec__sub{color:var(--vc-ink-2);font-size:.92rem;margin:.25rem 0 0}

/* 橫向捲動（我的學習）*/
.vc-rowscroll{display:flex;gap:1rem;overflow-x:auto;padding:.3rem .1rem 1rem;scroll-snap-type:x mandatory}
.vc-rowscroll::-webkit-scrollbar{height:8px}
.vc-rowscroll::-webkit-scrollbar-thumb{background:var(--vc-mint-2);border-radius:99px}
.vc-mini{flex:0 0 300px;scroll-snap-align:start;background:#fff;border:1px solid var(--vc-line);
  border-radius:18px;overflow:hidden;cursor:pointer;transition:.2s;display:flex;flex-direction:column}
.vc-mini:hover{transform:translateY(-3px);box-shadow:var(--vc-shadow);border-color:var(--vc-mint-2)}
.vc-mini__cover{height:120px;position:relative;overflow:hidden}
.vc-mini__body{padding:.85rem .95rem 1rem}
.vc-mini__title{font-weight:700;font-size:.96rem;line-height:1.35;margin:0 0 .55rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vc-prog{height:7px;border-radius:99px;background:var(--vc-mint);overflow:hidden}
.vc-prog>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--vc-amber),#caa23a);transition:width 1s ease}
.vc-prog-meta{display:flex;justify-content:space-between;font-size:.74rem;color:var(--vc-ink-2);margin-top:.4rem}
.vc-prog-meta .pct{font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--vc-green-deep)}

/* 課程卡片 */
.vc-card{background:#fff;border:1px solid var(--vc-line);border-radius:20px;overflow:hidden;
  cursor:pointer;height:100%;display:flex;flex-direction:column;transition:.2s}
.vc-card:hover{transform:translateY(-4px);box-shadow:var(--vc-shadow);border-color:var(--vc-mint-2)}
.vc-card:focus-visible{outline:3px solid var(--vc-green);outline-offset:2px}
.vc-cover{position:relative;aspect-ratio:16/9;overflow:hidden}
.vc-cover>img{width:100%;height:100%;object-fit:cover;display:block}
.vc-cover__art{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr}
.vc-cover__rail{width:54px;position:relative}
.vc-cover__panel{position:relative;padding:1rem 1.1rem;display:flex;flex-direction:column;justify-content:center}
.vc-cover__role{font-family:"Space Grotesk",sans-serif;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vc-green-deep);margin-bottom:.35rem}
.vc-cover__title{font-weight:900;font-size:1.12rem;line-height:1.25;color:var(--vc-ink)}
.vc-badge-time{position:absolute;right:.6rem;bottom:.6rem;background:rgba(15,42,30,.86);color:#fff;
  font-family:"Space Grotesk",sans-serif;font-size:.72rem;font-weight:500;padding:.2rem .55rem;border-radius:8px}
.vc-lock{position:absolute;top:.6rem;right:.6rem;width:28px;height:28px;border-radius:9px;
  background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--vc-ink-2);box-shadow:0 6px 14px -8px rgba(0,0,0,.4)}
.vc-card__body{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.vc-card__title{font-weight:700;font-size:1rem;line-height:1.4;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vc-instr{display:flex;align-items:center;gap:.5rem;color:var(--vc-ink-2);font-size:.85rem;margin-top:auto}
.vc-instr .ic{width:24px;height:24px;border-radius:50%;background:var(--vc-mint);color:var(--vc-green-deep);display:grid;place-items:center;font-size:.72rem;font-weight:700}
.vc-favbtn{position:absolute;top:.6rem;left:.6rem;width:30px;height:30px;border-radius:9px;border:none;
  background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--vc-ink-2);cursor:pointer;z-index:3}
.vc-favbtn.on{color:#e0533b}

/* 視窗 */
.vc-modal-mask{position:fixed;inset:0;background:rgba(15,42,30,.5);backdrop-filter:blur(3px);z-index:120;display:none;place-items:center;padding:1.2rem}
.vc-modal-mask.show{display:grid}
.vc-modal{background:#fff;border-radius:22px;max-width:560px;width:100%;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);overflow:hidden}
.vc-tag-soft{display:inline-flex;align-items:center;gap:.4rem;background:var(--vc-mint);color:var(--vc-green-deep);font-size:.74rem;font-weight:700;padding:.25rem .6rem;border-radius:99px}

/* 表單 / 卡片容器 */
.vc-panel{background:#fff;border:1px solid var(--vc-line);border-radius:20px;padding:1.6rem;box-shadow:var(--vc-shadow)}
.vc-label{font-weight:700;font-size:.85rem;margin-bottom:.35rem;display:block}
.vc-input,.vc-textarea,.vc-select{width:100%;border:1px solid var(--vc-line);border-radius:12px;padding:.6rem .8rem;font-family:inherit;font-size:.95rem;background:#fff;color:var(--vc-ink)}
.vc-input:focus,.vc-textarea:focus,.vc-select:focus{outline:none;border-color:var(--vc-green);box-shadow:0 0 0 3px rgba(47,161,90,.15)}
.vc-textarea{min-height:90px;resize:vertical}
.vc-alert{border-radius:12px;padding:.7rem 1rem;font-size:.9rem;margin-bottom:1rem}
.vc-alert-error{background:#fdeceb;color:#a3271c;border:1px solid #f3c6c1}
.vc-alert-ok{background:var(--vc-mint);color:var(--vc-green-deep);border:1px solid var(--vc-mint-2)}
.vc-alert-info{background:#eef4fb;color:#22507e;border:1px solid #cfe0f1}

/* 播放器頁 */
.vc-player-wrap{background:#000;border-radius:18px;overflow:hidden;aspect-ratio:16/9}
.vc-player-wrap video{width:100%;height:100%;display:block;background:#000}
.vc-player-empty{aspect-ratio:16/9;border-radius:18px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,var(--vc-ink),#15402c);text-align:center}

/* 頁尾 */
.vc-foot{border-top:1px solid var(--vc-line);margin-top:1.5rem;padding:2rem 0;color:var(--vc-ink-2);font-size:.85rem}

/* 後台側欄 */
.vc-admin-tab{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:12px;font-weight:700;color:var(--vc-ink-2);border:1px solid transparent}
.vc-admin-tab.active{background:var(--vc-mint);color:var(--vc-green-deep)}
.vc-table{width:100%;border-collapse:collapse}
.vc-table th,.vc-table td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--vc-line);font-size:.9rem;vertical-align:middle}
.vc-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--vc-ink-2)}
.vc-pill{font-size:.72rem;font-weight:700;padding:.18rem .55rem;border-radius:99px}
.vc-pill.on{background:var(--vc-mint);color:var(--vc-green-deep)}
.vc-pill.off{background:#f0eeec;color:#7a756f}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* 未開通（付費）課程卡片 */
.vc-card.is-locked .vc-cover { opacity: .82; }
.vc-card.is-locked:hover     { border-color: var(--vc-line); }