/* Only the course opening area; titles, catalog, favorites and player sizing stay owned by their existing styles. */
.cop{box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;color:#fff;text-align:left;font-family:inherit}
.cop *{box-sizing:border-box}.cop [hidden]{display:none!important}
.cop .cop-tabs{display:flex;align-items:stretch;gap:26px;flex:none;height:32px;min-width:0}
.cop .cop-tab{position:relative;flex:none;padding:0 0 8px;margin:0;border:0;border-radius:0;background:transparent;color:#9eb1ca;font:inherit;font-size:14px;font-weight:500;line-height:24px;white-space:nowrap;cursor:pointer}
.cop .cop-tab[aria-selected=true]{color:#fff;font-weight:700}.cop-tab[aria-selected=true]:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:2px;background:#69aaff}
.cop .cop-body{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;min-width:0}.cop .cop-copy{min-width:0;flex:1}
.cop .cop-price{display:block;color:#fff;font-size:36px;line-height:1.25;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cop .cop-description{margin:6px 0 0;color:#bac9dc;font-size:13px;line-height:1.55;white-space:pre-line;min-height:40px}
.cop .cop-actions{display:flex;align-items:center;gap:8px;flex:none}
.cop .cop-primary,.cop .cop-cart{display:inline-flex;align-items:center;justify-content:center;flex:none;height:44px;min-height:44px;margin:0;padding:0 22px;border:1px solid transparent;border-radius:10px;background:#2864dc;color:#fff;font:inherit;font-size:15px;font-weight:600;line-height:1.4;cursor:pointer;text-decoration:none}
.cop .cop-primary{min-width:156px}.cop .cop-primary:hover{background:#2057c5}.cop .cop-cart{width:44px;min-width:44px;padding:0;border-color:#8195b0;background:transparent;color:#d1dff1}.cop .cop-cart:hover{background:#ffffff10}.cop .cop-cart.is-added{color:#90bcff;border-color:#90bcff}
.cop-cart-icon{display:block;width:22px;height:22px;background:currentColor;mask:url('/assets/img/cart-cart3.svg') center/contain no-repeat;-webkit-mask:url('/assets/img/cart-cart3.svg') center/contain no-repeat}.cop-cart.is-added .cop-cart-icon{mask-image:url('/assets/img/cart-cart-check.svg');-webkit-mask-image:url('/assets/img/cart-cart-check.svg')}
.cop .cop-status{margin:0;color:#ffd0c9;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.cop .cop-empty{margin:0;color:#bac9dc}.cop button:disabled{opacity:.6;cursor:wait}.cop button:focus-visible{outline:2px solid #90bcff;outline-offset:3px}
.detail-opening.cop{margin-top:16px}.learn-opening.cop{width:440px;max-width:100%;padding:18px;border:1px solid #334961;border-radius:12px;background:#17263e}.learn-opening.cop .cop-body{display:block}.learn-opening.cop .cop-actions{margin-top:12px}.learn-opening.cop .cop-primary{flex:1}
/* Mini-program web-view: use the existing 16:9 surface, including on narrow phones. */
.player-shell.has-opening-panel,.card #opening.has-opening-panel,#shell.has-opening-panel{background:#17263e}
.player-shell.has-opening-panel .playback-overlay{padding:0;overflow:hidden}
.player-shell.has-opening-panel .playback-overlay-inner{height:100%;min-height:0;margin:0;gap:0}
.player-shell.has-opening-panel #opening-title,.player-shell.has-opening-panel #opening-notice,.player-shell.has-opening-panel #login{display:none!important}
.player-shell.has-opening-panel #opening-choices.cop{width:100%;height:100%;min-width:0;max-width:none;margin:0;padding:12px;gap:7px;display:flex;flex:1;overflow:auto}
.player-shell .cop .cop-tabs{gap:22px;height:27px}.player-shell .cop .cop-tab{font-size:13px;line-height:20px;padding-bottom:7px}
.player-shell .cop .cop-body{display:flex;flex:1;flex-direction:column;align-items:stretch;justify-content:space-between;gap:6px;min-height:0}.player-shell .cop .cop-copy{display:flex;flex-direction:column;justify-content:center;flex:1}
.player-shell .cop .cop-price{font-size:28px;line-height:1.2}.player-shell .cop .cop-description{font-size:11px;line-height:1.4;min-height:0;margin-top:5px}.player-shell .cop .cop-actions{width:100%}
.player-shell .cop .cop-primary,.player-shell .cop .cop-cart{height:40px;min-height:40px;font-size:14px}.player-shell .cop .cop-primary{flex:1;min-width:0;padding:0 10px}.player-shell .cop .cop-cart{width:40px;min-width:40px}
.player-shell .cop .cop-status{flex:none;font-size:11px}.player-shell .cop[aria-busy=true]{cursor:wait}
@media(max-width:680px){.detail-opening.cop .cop-body{align-items:stretch;flex-direction:column;gap:10px}.detail-opening.cop .cop-actions{width:100%}.detail-opening.cop .cop-primary{flex:1;min-width:0}.cop .cop-price{font-size:30px}}
@media(max-width:360px){.player-shell.has-opening-panel #opening-choices.cop{padding:8px;gap:4px}.player-shell .cop .cop-tabs{height:24px;gap:16px}.player-shell .cop .cop-tab{font-size:12px;line-height:19px;padding-bottom:5px}.player-shell .cop .cop-price{font-size:23px}.player-shell .cop .cop-description{margin-top:3px;font-size:10px}.player-shell .cop .cop-primary,.player-shell .cop .cop-cart{height:36px;min-height:36px;font-size:12px}.player-shell .cop .cop-cart{width:36px;min-width:36px}}

/* Guest prompt is outside the media frame so its 16:9 dimensions never change. */
.guest-login-notice{margin:0 0 12px;text-align:center;color:#60738e;font-size:13px;line-height:1.6}
.guest-login-notice p{margin:0 0 2px}.guest-login-notice #login{display:inline-block;margin:0 0 0 4px;padding:3px 0;border:0;border-radius:0;background:transparent;color:#2864dc;font:inherit;font-size:14px;line-height:1.6;cursor:pointer}
.guest-login-notice #login:focus-visible{outline:2px solid #2864dc;outline-offset:3px}
.cop-cart-toast{position:fixed;z-index:10000;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100vw - 40px);padding:12px 16px;border-radius:8px;background:rgba(23,38,60,.9);color:#fff;font:14px/1.5 system-ui,-apple-system,sans-serif;text-align:center;pointer-events:none}
.cop-cart-toast[hidden],.guest-login-notice[hidden]{display:none!important}