.watch-history-link { position:absolute; right:20px; top:20px; color:var(--forest); font-size:.88rem; font-weight:750; text-decoration:none; }
.watch-history-link span { margin-left:4px; }.watch-detail-section { padding:54px 0 100px; max-width:960px; }.watch-detail-header { display:flex; align-items:center; gap:28px; margin:30px 0 44px; }.watch-detail-header > img,.detail-cover-placeholder { width:128px; height:190px; object-fit:cover; border-radius:4px; box-shadow:8px 12px 24px rgba(20,37,31,.18); flex:0 0 auto; }.watch-detail-header h1 { margin:8px 0; font-family:Georgia,serif; font-size:clamp(2.5rem,5vw,4.2rem); letter-spacing:-.05em; }.watch-detail-header .eyebrow { margin:12px 0 0; }.detail-authors { margin:0; font-size:1.08rem; }
.ranking-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin:0 0 24px; }.ranking-summary-grid article { padding:22px 24px; border:1px solid #dce4d9; border-radius:16px; background:#fff; }.ranking-summary-grid p { margin:0; color:#52635c; font-weight:700; }.ranking-summary-grid h2 { margin:10px 0 2px; font-family:Georgia,serif; font-size:3.2rem; letter-spacing:-.06em; }.ranking-summary-grid span,.ranking-summary-grid small { display:block; color:#63736b; }.ranking-summary-grid strong { display:block; margin-top:16px; }.trend-up { color:#227646; }.trend-down { color:#af4d38; }.trend-flat { color:#63736b; }
.ranking-chart-card { padding:30px; border:1px solid #dce4d9; border-radius:20px; background:#fff; }.chart-heading { display:flex; justify-content:space-between; gap:20px; align-items:start; }.chart-heading h2 { margin:7px 0 20px; font-family:Georgia,serif; font-size:2rem; }.chart-heading > p { margin:6px 0; color:#63736b; font-size:.9rem; }.chart-scroll { overflow-x:auto; }.ranking-chart { display:block; width:100%; min-width:700px; color:#718078; font:12px Inter,system-ui,sans-serif; }.chart-grid { stroke:#e3e8e1; stroke-width:1; }.chart-line { fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }.chart-point { stroke:#fff; stroke-width:3; }.chart-legend { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:8px; font-size:.88rem; color:#52635c; }.chart-legend span { display:inline-flex; align-items:center; gap:7px; }.chart-legend i { display:block; width:10px; height:10px; border-radius:50%; }.chart-note { margin:20px 0 0; color:#63736b; font-size:.9rem; }.ranking-empty { margin-top:20px; }
@media (max-width:760px) { .watch-card { padding:20px 20px 56px; }.watch-history-link { position:static; align-self:end; margin-left:auto; }.watch-detail-header { align-items:start; gap:18px; }.watch-detail-header > img,.detail-cover-placeholder { width:88px; height:132px; }.ranking-chart-card { padding:22px 14px; }.chart-heading { display:block; }.chart-heading > p { margin-bottom:16px; } }
.confirmation-backdrop { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; background:rgba(20,37,31,.42); }.confirmation-dialog { width:min(100%,480px); padding:30px; border-radius:20px; background:var(--paper); box-shadow:0 24px 70px rgba(20,37,31,.28); }.confirmation-dialog h2 { margin:7px 0 12px; font-family:Georgia,serif; font-size:2.2rem; letter-spacing:-.04em; }.confirmation-dialog > p:not(.eyebrow) { color:#52635c; line-height:1.55; }.confirmation-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:26px; }.confirmation-actions button { border:0; cursor:pointer; font:inherit; }.confirmation-actions .secondary { background:transparent; border:1px solid var(--forest); }.danger { color:#fff; background:#9f4d3d; }