.gv-mode-dialog{width:min(1080px,calc(100% - 40px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);margin:auto;padding:0;border:1px solid #aeb6cb;border-radius:16px;background:rgba(43,46,57,.97);color:#f4f6fb;box-shadow:0 24px 70px #05081066,inset 0 1px 5px #ffffff66;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#91a0ba #30333f}
.gv-mode-dialog::backdrop{background:#070b13a6;backdrop-filter:blur(5px)}
.gv-mode-page{box-sizing:border-box;letter-spacing:0}
.gv-mode-page *{box-sizing:border-box;letter-spacing:0}
.gv-mode-header{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid #ffffff24;min-height:80px}
.gv-mode-header h1{flex:1;min-width:0;margin:0;font-size:22px;line-height:1.3;color:#fff}
.gv-mode-stage{perspective:1500px;overflow:hidden;margin:0 20px;padding:30px 0 8px;touch-action:pan-y}
.gv-mode-drift{transform-style:preserve-3d}
.gv-mode-track{position:relative;height:calc(var(--mode-width,270px) + 185px);transform-style:preserve-3d}
.gv-mode-card{position:absolute;top:0;left:0;width:var(--mode-width,270px);height:calc(var(--mode-width,270px) + 76px);transform-style:preserve-3d;transition:transform 500ms cubic-bezier(.22,.8,.25,1),opacity 300ms ease;isolation:isolate}
.gv-mode-lift{height:100%;transform-style:preserve-3d;transition:transform 300ms cubic-bezier(.22,.8,.25,1)}
@media(hover:hover){.gv-mode-card:hover .gv-mode-lift{transform:translateY(-10px)}}
.gv-mode-card:focus-within .gv-mode-lift{transform:translateY(-8px)}
.gv-mode-flipper{height:100%;position:relative;transform-style:preserve-3d;transition:transform 550ms cubic-bezier(.22,.8,.25,1)}
.gv-mode-card.is-flipped .gv-mode-flipper{transform:rotateY(180deg)}
.gv-mode-card.is-settled{transform-style:flat;transition:none}
.gv-mode-card.is-settled .gv-mode-lift,.gv-mode-card.is-settled .gv-mode-flipper{transform:none;transform-style:flat;transition:none}
.gv-mode-card.is-settled .gv-mode-front{visibility:hidden}
.gv-mode-card.is-settled .gv-mode-reverse{transform:none;backface-visibility:visible;-webkit-backface-visibility:visible}
.gv-mode-front,.gv-mode-reverse{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 14px 28px #05081040;border:1px solid #cad4e5}
.gv-mode-front{background:#fff;transform:translateZ(1px);color:#172c44}
.gv-mode-art{padding:0;border:0;display:block;width:100%;aspect-ratio:1;cursor:pointer;background:#e3eaf0}
.gv-mode-art img{display:block;width:100%;height:100%;object-fit:cover}
.gv-mode-caption{height:76px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.gv-mode-caption h2{font-size:20px;margin:0;white-space:nowrap;color:#172c44}
.gv-mode-choose{border:0;background:transparent;color:#155bac;font-weight:700;font-size:15px;display:flex;align-items:center;min-height:44px;padding:8px 0 8px 8px;cursor:pointer}
.gv-mode-reverse{background:#121721;color:#fff;padding:20px;transform:rotateY(180deg) translateZ(1px);display:flex;flex-direction:column;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;text-shadow:none}
.gv-mode-reverse-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#b9c7d8;font-size:13px}
.gv-mode-close{height:40px;width:40px;border:1px solid #79869b;border-radius:5px;background:#353c4a;color:#fff;font-size:25px;cursor:pointer;flex:none}
.gv-mode-reverse h2{font-size:23px;margin:15px 0 18px;line-height:1.4;color:#fff}
.gv-mode-course{font-size:16px;font-weight:600;line-height:1.6;margin:0 0 10px;overflow-wrap:anywhere}
.gv-mode-position{font-size:15px;margin:0;color:#d5dfef}.gv-mode-wrong{display:block;width:100%;min-height:44px;margin:0;padding:10px 14px;border:1px solid #726cff;border-radius:6px;background:#5c54ed;color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}.gv-mode-wrong[hidden]{display:none!important}.gv-mode-wrong:disabled{opacity:.6;cursor:wait}.gv-mode-wrong:focus-visible{outline:3px solid #fff;outline-offset:2px}
.gv-mode-actions{margin-top:auto;padding-top:0;display:grid;gap:10px}
.gv-mode-actions button{width:100%;min-height:44px;border-radius:5px;cursor:pointer;font-size:16px;font-weight:600}
.gv-mode-primary{border:1px solid #8980fb;background:#6552ec;color:#fff}
.gv-mode-secondary{border:1px solid #71819a;background:#202b3a;color:#fff}
.gv-mode-footer{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 24px;border-top:1px solid #ffffff24;background:#ffffff06}
.gv-mode-footer button{min-height:48px;font-size:17px;font-weight:700;border:1px solid #96a6c2;border-radius:6px;cursor:pointer;background:transparent;color:#e2eafa}
.gv-mode-footer #gv-mode-confirm{background:#5964ee;border-color:#7d88ff;color:#fff}
.gv-mode-page button:focus-visible{outline:3px solid #edb332;outline-offset:3px}
.gv-study .gv-parts[hidden],.gv-study .gv-association-play[hidden]{display:none}
.gv-media-load-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.gv-media-load-actions button{min-height:42px;padding:8px 16px;border:1px solid #8194b3;border-radius:5px;background:#202b3d;color:#fff;cursor:pointer;font:inherit;font-size:14px}
.gv-media-load-actions button:focus-visible{outline:3px solid #edb332;outline-offset:3px}
.gv-media-load-actions button:disabled{opacity:.6;cursor:wait}
.gv-mode-compact .gv-mode-card{height:calc(var(--mode-width) + 88px)}
.gv-mode-compact .gv-mode-caption{height:88px;padding:10px 12px}
.gv-mode-compact .gv-mode-reverse{padding:14px}
.gv-mode-compact .gv-mode-reverse h2{font-size:20px;margin:10px 0}
.gv-mode-compact .gv-mode-course{font-size:14px;line-height:1.5;margin-bottom:6px}
.gv-mode-compact .gv-mode-actions{padding-top:0;gap:10px}
@media(max-width:700px){
 .gv-mode-dialog{width:calc(100% - 16px);max-height:calc(100vh - 16px);max-height:calc(100svh - 16px);border-radius:12px}
 .gv-mode-header{flex-wrap:wrap;gap:10px;padding:14px 16px}
 .gv-mode-header h1{font-size:20px}
 .gv-mode-stage{margin:0 8px;padding-top:24px}
 .gv-mode-footer{padding:12px;gap:10px}
 .gv-mode-footer button{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.gv-mode-card,.gv-mode-lift,.gv-mode-flipper{transition:none}.gv-mode-drift{animation:none!important}}

/* Same three cards and workflow as desktop, with flat Safari-safe hit testing. */
.gv-mode-touch-compatible .gv-mode-stage { perspective:none; padding-top:22px; }
.gv-mode-touch-compatible .gv-mode-drift,
.gv-mode-touch-compatible .gv-mode-track,
.gv-mode-touch-compatible .gv-mode-card,
.gv-mode-touch-compatible .gv-mode-lift,
.gv-mode-touch-compatible .gv-mode-flipper { transform-style:flat; }
.gv-mode-touch-compatible .gv-mode-track { height:max(380px,calc(var(--mode-width) + 140px)); }
.gv-mode-touch-compatible .gv-mode-card { height:max(340px,calc(var(--mode-width) + 76px)); }
.gv-mode-touch-compatible .gv-mode-lift,
.gv-mode-touch-compatible .gv-mode-card.is-flipped .gv-mode-flipper { transform:none; }
.gv-mode-touch-compatible .gv-mode-front,
.gv-mode-touch-compatible .gv-mode-reverse { transform:none; backface-visibility:visible; -webkit-backface-visibility:visible; }
.gv-mode-touch-compatible .gv-mode-front[hidden],
.gv-mode-touch-compatible .gv-mode-reverse[hidden] { display:none; }
.gv-mode-touch-compatible .gv-mode-front { bottom:auto; }
.gv-mode-touch-compatible .gv-mode-caption { padding:10px; }
.gv-mode-touch-compatible .gv-mode-caption h2 { font-size:18px; }
.gv-mode-touch-compatible .gv-mode-reverse { padding:14px; overflow-y:auto; }
.gv-mode-touch-compatible .gv-mode-reverse h2 { font-size:20px; margin:10px 0; }
.gv-mode-touch-compatible .gv-mode-course { font-size:14px; line-height:1.5; }
.gv-mode-touch-compatible .gv-mode-close { min-width:44px; min-height:44px; }
@media (max-width:700px) {
  .gv-mode-touch-compatible .gv-mode-caption { padding:6px; height:auto; min-height:70px; flex-wrap:wrap; gap:0; }
  .gv-mode-touch-compatible .gv-mode-caption h2 { font-size:14px; }
  .gv-mode-touch-compatible .gv-mode-choose { font-size:13px; padding:4px; }
  .gv-mode-touch-compatible .gv-mode-reverse { padding:12px; }
  .gv-mode-touch-compatible .gv-mode-reverse h2 { font-size:18px; line-height:1.35; margin:8px 0 10px; }
  .gv-mode-touch-compatible .gv-mode-course { font-size:13px; line-height:1.45; }
  .gv-mode-touch-compatible .gv-mode-position { font-size:13px; }
  .gv-mode-touch-compatible .gv-mode-wrong,
  .gv-mode-touch-compatible .gv-mode-actions button { min-height:44px; padding:8px 10px; font-size:14px; line-height:1.35; }
}