/* Video module styles. */
.video-module { --accent:#00897b; --accent-dk:#00695c; --accent-sft:#e0f2f1; background:#f5f7fa; min-height:100vh; }

/* md-button teal primary */
.video-module md-button.md-primary:not([disabled]) { color:#fff; background:var(--accent); }
.video-module md-button.md-primary:not([disabled]):hover,
.video-module md-button.md-primary:not([disabled]):focus { background:var(--accent-dk); }
.video-module md-button.md-primary:not([disabled]):not(.md-raised) { background:transparent; color:var(--accent); }
.video-module md-button.md-primary:not([disabled]):not(.md-raised):hover { background:var(--accent-sft); }

/* Shared teal CTA look (Add, empty/error CTAs, focus-primary, save) */
.video-module .video-add-btn, .video-module .video-empty-cta, .video-module .video-error-retry,
.video-module .video-focus-actions md-button.video-focus-primary-btn,
.video-module md-button.video-save-btn {
  background:var(--accent)!important; color:#fff!important; border-radius:8px!important;
  text-transform:none!important; font-weight:600!important; letter-spacing:0!important;
  padding:0 20px!important; height:40px!important; box-shadow:0 2px 8px rgba(0,137,123,.25)!important;
}
.video-module .video-add-btn:hover, .video-module .video-empty-cta:hover, .video-module .video-error-retry:hover,
.video-module .video-focus-actions md-button.video-focus-primary-btn:hover,
.video-module md-button.video-save-btn:not([disabled]):hover { background:var(--accent-dk)!important; }
.video-module .video-add-btn { height:42px!important; }
.video-module md-button.video-save-btn[disabled] { box-shadow:none!important; }

/* Header */
.video-module .video-header { margin-bottom:16px; }
.video-module .video-page-title { margin:0; font-size:32px; font-weight:600; letter-spacing:-.5px; color:#1a2332; }
.video-module .video-page-sub { margin-top:2px; font-size:13px; font-weight:500; color:#64748b; }

/* Filter bar */
.video-module .video-filter-bar { position:sticky; top:0; z-index:2; background:#fff; padding:16px 20px; border-radius:12px; margin-bottom:24px; box-shadow:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06); }
.video-module .video-tag-filter { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.video-module .video-tag-filter-hint { margin-top:6px; font-size:11px; color:#94a3b8; font-style:italic; }
.video-module .video-tag-chip { display:inline-flex; align-items:center; padding:6px 14px; border-radius:20px; background:#f1f5f9; color:#475569; font-size:13px; font-weight:500; cursor:pointer; user-select:none; border:1px solid transparent; transition:all .15s ease; }
.video-module .video-tag-chip small { margin-left:4px; opacity:.65; font-weight:400; }
.video-module .video-tag-chip:hover:not(.small) { background:#e2e8f0; color:#1e293b; }
.video-module .video-tag-chip.selected { background:var(--accent); color:#fff; border-color:var(--accent-dk); box-shadow:0 2px 6px rgba(0,137,123,.3); }
.video-module .video-tag-chip.small { padding:3px 10px; font-size:11px; margin:0 6px 0 0; cursor:default; background:#eef2f7; color:#64748b; }
.video-module .video-clear-filters { border:0; background:transparent; color:var(--accent); font-size:13px; font-weight:600; cursor:pointer; padding:6px 12px; border-radius:6px; transition:background-color .15s ease; }
.video-module .video-clear-filters:hover { background:var(--accent-sft); color:var(--accent-dk); }

/* Grid + Card */
.video-module .video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:24px; align-items:stretch; }
.video-module .video-card { display:flex; flex-direction:column; min-height:100%; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); transition:transform .2s ease, box-shadow .2s ease; }
.video-module .video-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(15,23,42,.12),0 4px 10px rgba(15,23,42,.06); }

/* Thumbnail */
.video-module .video-thumb { position:relative; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1e293b,#334155 50%,#475569); cursor:pointer; overflow:hidden; }
.video-module .video-thumb::before, .video-module .video-thumb::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:1; }
.video-module .video-thumb::before { background:radial-gradient(circle at 30% 30%,rgba(59,130,246,.18),transparent 60%),radial-gradient(circle at 70% 70%,rgba(168,85,247,.15),transparent 55%); }
.video-module .video-thumb::after { background:linear-gradient(to top,rgba(0,0,0,.55),transparent 45%); }
.video-module .video-thumb.has-image::before { background:none; }
.video-module .video-thumb-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .4s ease; }
.video-module .video-card:hover .video-thumb-img { transform:scale(1.03); }
.video-module .video-thumb-play { position:relative; z-index:2; filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)); transition:transform .2s ease; }
.video-module .video-card:hover .video-thumb-play { transform:scale(1.08); }
.video-module .video-thumb-title { position:absolute; bottom:12px; left:16px; right:16px; z-index:2; color:#fff; font-size:15px; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* WATCHED + NEW badges */
.video-module .video-viewed-ribbon, .video-module .video-new-badge { position:absolute; top:12px; z-index:3; padding:4px 10px; border-radius:6px; color:#fff; font-size:10px; font-weight:700; letter-spacing:.8px; }
.video-module .video-viewed-ribbon { right:12px; background:rgba(34,197,94,.95); box-shadow:0 2px 6px rgba(0,0,0,.25); backdrop-filter:blur(4px); }
.video-module .video-new-badge { left:12px; background:linear-gradient(135deg,#f59e0b,#f97316); font-weight:800; letter-spacing:1px; box-shadow:0 2px 8px rgba(249,115,22,.4); }

/* Card body */
.video-module .video-body { padding:16px 18px 8px; }
.video-module .video-title-row { display:flex; align-items:flex-start; gap:8px; }
.video-module .video-card-title { flex:1; margin:0; font-size:17px; font-weight:600; color:#0f172a; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.video-module .video-viewed-check { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#dcfce7; color:#15803d; font-size:13px; font-weight:700; margin-top:2px; }
.video-module .video-description-wrap { margin:6px 0 12px; }
.video-module .video-description { margin:0; font-size:13px; line-height:1.5; color:#64748b; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.video-module .video-description.expanded { display:block; -webkit-line-clamp:unset; line-clamp:unset; overflow:visible; }
.video-module .video-description-toggle { display:inline-block; margin-top:4px; padding:0; border:0; background:none; color:var(--accent); font-size:12px; font-weight:600; cursor:pointer; }
.video-module .video-description-toggle:hover { color:var(--accent-dk); text-decoration:underline; }
.video-module .video-card-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }

/* Card actions (icon row) */
.video-module .video-card-actions { display:flex; align-items:center; flex-wrap:nowrap; gap:4px; padding:8px 12px; min-height:48px; border-top:1px solid #f1f5f9; margin-top:auto; }
.video-module .video-card-actions-primary, .video-module .video-card-actions-admin { display:flex; align-items:center; flex-wrap:nowrap; gap:4px; }
.video-module .video-card-actions-primary { margin-right:auto; }
.video-module .video-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:0; border-radius:8px; background:transparent; color:#64748b; cursor:pointer; text-decoration:none; transition:background-color .15s ease, color .15s ease, transform .1s ease; }
.video-module .video-icon-btn:hover { background:#eef2f7; color:var(--accent); }
.video-module .video-icon-btn:active { transform:scale(.94); }
.video-module .video-icon-btn.danger:hover { background:#fee2e2; color:#dc2626; }

/* Empty / Error states */
.video-module .video-empty, .video-module .video-error { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.video-module .video-empty { padding:80px 20px; color:#94a3b8; }
.video-module .video-error { padding:60px 20px; color:#78909c; }
.video-module .video-empty-icon { font-size:48px; opacity:.35; margin-bottom:4px; }
.video-module .video-empty-text { font-size:17px; font-weight:600; color:#64748b; }
.video-module .video-empty-sub { font-size:14px; color:#94a3b8; }
.video-module .video-error-icon { display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#fee2e2; color:#dc2626; font-size:28px; font-weight:700; margin-bottom:8px; }
.video-module .video-error-title { font-size:17px; font-weight:600; color:#334155; }
.video-module .video-error-text { font-size:13px; color:#94a3b8; }

/* Focus view overlay */
.video-module .video-focus-backdrop { position:fixed; inset:0; z-index:100; display:flex; justify-content:center; align-items:flex-start; padding:40px 24px; overflow-y:auto; background:rgba(15,23,42,.82); backdrop-filter:blur(4px); animation:videoFade .18s ease-out; }
.video-module .video-focus { position:relative; width:100%; max-width:1100px; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.4); animation:videoPopIn .22s ease-out; }
.video-module .video-focus-close { position:absolute; top:12px; right:12px; z-index:2; display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:rgba(15,23,42,.75); color:#fff; font-size:22px; line-height:1; cursor:pointer; transition:background-color .15s ease, transform .15s ease; }
.video-module .video-focus-close:hover { background:rgba(15,23,42,.95); transform:scale(1.08); }
.video-module .video-focus-player { position:relative; aspect-ratio:16/9; width:100%; background:#000; }
.video-module .video-focus-player iframe, .video-module .video-preview-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-module .video-focus-body { padding:24px 28px 20px; }
.video-module .video-focus-title-row { display:flex; align-items:flex-start; gap:12px; }
.video-module .video-focus-title { flex:1; margin:0; font-size:24px; font-weight:700; color:#0f172a; line-height:1.3; letter-spacing:-.3px; }
.video-module .video-focus-meta { margin-top:6px; font-size:12px; color:#94a3b8; }
.video-module .video-focus-meta strong { color:#475569; font-weight:600; }
.video-module .video-focus-description { margin:14px 0 16px; font-size:14px; line-height:1.6; color:#475569; white-space:pre-wrap; }
.video-module .video-focus-actions { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:20px; padding-top:16px; border-top:1px solid #f1f5f9; }
.video-module .video-focus-actions md-button { margin:2px!important; border-radius:8px!important; text-transform:none!important; font-weight:600!important; letter-spacing:0!important; }
@media (max-width:720px) { .video-module .video-focus-backdrop { padding:0; } .video-module .video-focus { border-radius:0; min-height:100vh; max-width:100%; } }

/* Loading skeleton */
.video-module .video-skeleton { pointer-events:none; }
.video-module .video-skeleton:hover { transform:none; box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); }
.video-module .video-skeleton-thumb, .video-module .video-skeleton-line { background:linear-gradient(90deg,#eef2f7,#f8fafc 50%,#eef2f7); background-size:800px 100%; animation:videoShimmer 1.4s linear infinite; }
.video-module .video-skeleton-thumb { aspect-ratio:16/9; }
.video-module .video-skeleton-line { height:12px; border-radius:4px; margin:10px 0; }
.video-module .video-skeleton-line.long { width:85%; }
.video-module .video-skeleton-line.short { width:40%; }

/* Edit form */
.video-module .video-field { margin-bottom:28px; }
.video-module .video-field md-input-container { margin:0!important; padding-bottom:0!important; }
.video-module .video-field md-input-container .md-errors-spacer { display:none; }
.video-module .video-field-label { display:block; font-size:12px; font-weight:500; color:rgba(0,0,0,.6); margin-bottom:4px; }
.video-module .video-field-hint { margin-top:6px; padding-left:2px; font-size:12px; line-height:1.4; color:#607d8b; }
.video-module .video-preview-frame { position:relative; aspect-ratio:16/9; width:100%; background:#000; border-radius:8px; overflow:hidden; }

/* Load more */
.video-module .video-loadmore { margin-top:32px; padding-bottom:24px; }
.video-module .video-loadmore md-button { border-radius:8px!important; text-transform:none!important; font-weight:600!important; }

/* Animations */
@keyframes videoFade { from { opacity:0; } to { opacity:1; } }
@keyframes videoPopIn { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes videoShimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }