/* System Screens handoff: support cards; preparation content from the legacy page. */
.drmvpv2-support{--navy:#071b4d;--blue:#0b63e5;--yellow:#ffbd1a;--line:#d8e2ef;--soft:#f3f7fc;--muted:#60728e;--green:#08b94e;--shadow:0 18px 50px rgba(7,27,77,.12);color:var(--navy);font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;line-height:1.65}
.drmvpv2-support,.drmvpv2-support *,.drmvpv2-support *::before,.drmvpv2-support *::after{box-sizing:border-box}
.drmvpv2-support[hidden],.drmvpv2-support [hidden]{display:none!important}
.drmvpv2-support a{color:inherit}
.drmvpv2-support.system-main{min-height:640px;background:linear-gradient(150deg,#f6f9fd 0,#fff 48%,#f0f5fc 100%)}
.drmvpv2-support .page-hero{padding:72px 30px 52px;text-align:center;background:radial-gradient(circle at 82% 12%,rgba(255,189,26,.18),transparent 24%),linear-gradient(150deg,#edf5ff,#fff)}
.drmvpv2-support .eyebrow{margin:0 0 14px;color:var(--blue);font-size:13px;font-weight:900;letter-spacing:.16em}
.drmvpv2-support .page-hero h1{margin:0;font-size:46px;line-height:1.25}
.drmvpv2-support .content-wrap{max-width:1240px;margin:auto;padding:48px 30px 80px}
.drmvpv2-support .support-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:30px}
.drmvpv2-support .support-tabs button{min-height:44px;padding:0 18px;border:1px solid #cddaea;border-radius:999px;background:#fff;color:var(--navy);font:inherit;font-weight:900;white-space:nowrap;cursor:pointer}
.drmvpv2-support .support-tabs button.active{border-color:var(--blue);background:var(--blue);color:#fff}
.drmvpv2-support .support-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.drmvpv2-support .support-card{min-width:0;min-height:210px;display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(7,27,77,.07)}
.drmvpv2-support .support-card i{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#eaf2ff;color:var(--blue);font-size:21px;font-style:normal}
.drmvpv2-support .support-card h2{margin:18px 0 7px;font-size:20px}
.drmvpv2-support .support-card h3{margin:0 0 7px;font-size:20px}
.drmvpv2-support .support-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.drmvpv2-support .support-video-links{display:grid;grid-auto-rows:1fr;gap:12px;margin-top:auto;padding-top:15px}
/* 2026-10-08 確認表第 15 項：每支影片一個同尺寸入口，完整顯示影片名稱（不截斷）。 */
.drmvpv2-support .support-video-item{display:flex;min-width:0}
.drmvpv2-support .support-video-entry{display:flex;align-items:center;gap:14px;width:100%;min-height:84px;padding:10px 12px 10px 10px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--navy);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.drmvpv2-support .support-video-entry:hover{border-color:var(--blue);box-shadow:0 8px 20px rgba(11,99,229,.12)}
/* 素材狀態表第 8 項：封面槽 16:9；沒有封面或封面失敗時顯示同尺寸「文字＋線性圖示卡」，img 由 JS 移除、alt 空字串不出現破圖。 */
.drmvpv2-support .support-video-cover{position:relative;flex:0 0 112px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#eaf2ff}
.drmvpv2-support .support-video-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drmvpv2-support .support-video-cover-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--blue);font-size:12px;font-weight:800;line-height:1.2}
/* 案 419 塊 3a：站上現有 YouTube 播放鍵（Dr.MVP 設計端已登入原型 .youtube-player-mark，member6b.css:183-184）的縮小版 96x68→44x31，圓角、三角形等比；紅 #ff0033＋白三角。 */
.drmvpv2-support .support-yt-mark{width:44px;height:31px;display:grid;place-items:center;border-radius:9px;background:#ff0033;box-shadow:0 6px 14px rgba(255,0,51,.25)}
.drmvpv2-support .support-yt-mark:after{content:"";margin-left:3px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid #fff}
.drmvpv2-support .support-video-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.drmvpv2-support .support-video-name{font-size:15px;font-weight:900;line-height:1.45;overflow-wrap:anywhere}
.drmvpv2-support .support-video-action{color:var(--blue);font-size:14px;font-weight:900}
.drmvpv2-support .support-preparation>h2{margin:32px 0 18px;font-size:26px}
.drmvpv2-support .support-preparation>h2:first-child{margin-top:0}
.drmvpv2-support .support-preparation .support-card{min-height:0}
.drmvpv2-support .support-preparation p+h3{margin-top:20px}
.drmvpv2-support .support-downloads{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.drmvpv2-support .support-downloads a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:10px;background:var(--blue);color:#fff;text-decoration:none;font-size:14px;font-weight:800}
.drmvpv2-support .drmvpv2-support-video-modal{position:fixed;inset:0;z-index:1040;display:grid;place-items:center;padding:20px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));background:rgba(3,15,43,.62)}
.drmvpv2-support .support-video-panel{width:min(900px,100%);max-height:88vh;overflow:auto;padding:28px;border-radius:22px;background:#fff;box-shadow:var(--shadow)}
.drmvpv2-support .support-video-head{display:flex;align-items:flex-start;gap:15px}
.drmvpv2-support .support-video-head>div{flex:1;min-width:0}
.drmvpv2-support .support-video-head h2{margin:0;font-size:24px;overflow-wrap:anywhere}
/* 確認表第 16 項：圓形「×」關閉（點擊區 44×44，依第 1 項）。 */
.drmvpv2-support .support-video-close{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#eef3fa;color:var(--navy);font:inherit;font-size:26px;line-height:1;cursor:pointer}
.drmvpv2-support .support-video-player{position:relative;width:100%;padding-top:56.25%;margin-top:22px;background:var(--navy)}
.drmvpv2-support .support-video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.drmvpv2-support .support-video-fallback{display:inline-block;margin-top:16px;color:var(--blue);font-weight:900}
/* 素材狀態表第 8 項：影片無法播放；疊在 16:9 播放區內，不改變視窗尺寸。 */
.drmvpv2-support .support-video-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;overflow:auto;color:#fff;text-align:center}
.drmvpv2-support .support-video-error p{margin:0;max-width:30em;font-size:16px;line-height:1.7}
.drmvpv2-support .support-video-error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.drmvpv2-support .support-video-retry,.drmvpv2-support .support-video-original{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid #fff;border-radius:999px;font:inherit;font-size:15px;font-weight:900;text-decoration:none;cursor:pointer}
.drmvpv2-support .support-video-retry{background:#fff;color:var(--navy)}
.drmvpv2-support .support-video-original{background:transparent;color:#fff}
.drmvpv2-support button:focus-visible,.drmvpv2-support a:focus-visible,.drmvpv2-support [role="tabpanel"]:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(max-width:1100px){.drmvpv2-support .support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){
    .drmvpv2-support .page-hero{padding:52px 18px 38px}
    .drmvpv2-support .page-hero h1{font-size:32px}
    .drmvpv2-support .content-wrap{padding:34px 18px 60px}
    .drmvpv2-support .support-tabs{justify-content:flex-start;overflow:auto}
    .drmvpv2-support .support-grid{grid-template-columns:1fr}
    .drmvpv2-support .support-video-panel{padding:20px 16px}
    .drmvpv2-support .support-video-head h2{font-size:20px}
    .drmvpv2-support .support-video-error{gap:10px;padding:14px}
    .drmvpv2-support .support-video-error p{font-size:14px;line-height:1.6}
}