/* ==========================================================================
   Crimson — neutral black dark video theme with crimson accent
   Layers: 1 tokens (see critical.css) · 2 base · 3 layout · 4 components ·
           5 utilities. Mobile-first: base rules are mobile, desktop lives in
           min-width media queries only (480 / 768 / 1024).
   ========================================================================== */

/* --- 2. base ------------------------------------------------------------ */
h1,h2,h3,h4{margin:0 0 var(--cr-s3);line-height:1.25;font-weight:700;letter-spacing:-.01em}
h1{font-size:1.375rem}
h2{font-size:1.125rem}
h3{font-size:1rem}
p{margin:0 0 var(--cr-s3)}
a:hover{color:var(--cr-accent)}
:focus-visible{outline:2px solid var(--cr-accent);outline-offset:2px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:var(--cr-text);background:var(--cr-surface);border:1px solid var(--cr-border);border-radius:var(--cr-r-sm);padding:10px var(--cr-s3)}
input:focus,select:focus,textarea:focus{border-color:var(--cr-accent);outline:none}
::placeholder{color:var(--cr-muted)}
hr{border:0;border-top:1px solid var(--cr-border);margin:var(--cr-s5) 0}
table{width:100%;border-collapse:collapse}
::selection{background:var(--cr-accent);color:var(--cr-accent-ink)}

/* --- 3. layout ---------------------------------------------------------- */
.site-footer{border-top:1px solid var(--cr-border);padding:var(--cr-s6) 0;color:var(--cr-muted);font-size:.8125rem;font-family:var(--cr-mono)}
.lic-banner{padding:var(--cr-s3) var(--cr-s4);font-size:.875rem;text-align:center}
.lic-banner--info{background:var(--cr-surface-2)}
.lic-banner--warning{background:var(--cr-warn-bg);color:var(--cr-warn-ink)}
.lic-banner--alert{background:var(--cr-danger-bg);color:var(--cr-danger-ink)}

/* --- 4. components ------------------------------------------------------ */
/* 4.1 header + drawer */
.site-logo{display:flex;align-items:center;flex:none}
.cr-logo-img{display:block;height:44px;width:auto;max-width:none} @media(min-width:768px){.cr-logo-img{height:64px}.header-inner{min-height:80px!important}}
.search-form{flex:1;min-width:0}
.search-input{width:100%;height:40px;border-radius:var(--cr-r-sm);padding:0 var(--cr-s4);background:var(--cr-surface);font-family:var(--cr-mono);font-size:.875rem}
.menu-toggle{flex:none;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--cr-text);border-radius:2px}
.cr-drawer{position:fixed;inset:0;z-index:30;background:rgba(5,5,5,.7);backdrop-filter:blur(4px)}
.cr-drawer[hidden]{display:none}
.cr-drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(320px,86vw);background:var(--cr-surface);border-left:1px solid var(--cr-border);padding:var(--cr-s5) var(--cr-s4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--cr-s5)}
.main-nav .menu__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--cr-s1)}
.main-nav a,.auth-nav a,.auth-nav button,.lang-current{display:flex;align-items:center;min-height:44px;padding:0 var(--cr-s3);border-radius:var(--cr-r-sm);width:100%}
.main-nav a:hover{background:var(--cr-surface-2)}
.auth-nav{display:flex;flex-direction:column;gap:var(--cr-s1);border-top:1px solid var(--cr-border);padding-top:var(--cr-s4)}
.logout-form{margin:0}
.lang-dropdown{list-style:none;margin:var(--cr-s1) 0 0;padding:var(--cr-s1);background:var(--cr-surface-2);border:1px solid var(--cr-border);border-radius:var(--cr-r-sm)}
.lang-dropdown[hidden]{display:none}
.lang-dropdown a{display:flex;align-items:center;min-height:44px;padding:0 var(--cr-s3)}
.cr-footer-inner{display:flex;flex-direction:column;gap:var(--cr-s4)}
.cr-footer-nav .menu__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--cr-s4)}
.cr-copyright{margin:0}
@media (min-width:768px){
  .menu-toggle{display:none}
  .header-inner{gap:var(--cr-s5);min-height:60px}
  .search-form{max-width:400px;margin-left:auto}
  .cr-drawer{position:static;background:none;display:contents;backdrop-filter:none}
  .cr-drawer[hidden]{display:contents}
  .cr-drawer-panel{position:static;width:auto;border:0;background:none;padding:0;flex-direction:row;align-items:center;gap:var(--cr-s4);overflow:visible}
  .main-nav .menu__list{flex-direction:row;gap:var(--cr-s2)}
  .main-nav a,.auth-nav a,.auth-nav button,.lang-current{width:auto;min-height:40px}
  .auth-nav{flex-direction:row;border:0;padding-top:0}
  .lang-switcher{position:relative}
  .lang-dropdown{position:absolute;right:0;top:100%;min-width:140px;z-index:25}
}
/* 4.2 cards + grid */
.card-link{display:block}
.card-thumb{display:block;transition:transform .15s ease,box-shadow .15s ease}
.card-link:hover .card-thumb{transform:translateY(-2px);box-shadow:var(--cr-shadow)}
.card-duration{position:absolute;right:var(--cr-s2);bottom:var(--cr-s2);background:rgba(8,8,8,.85);color:var(--cr-text);font-size:.6875rem;font-weight:500;font-family:var(--cr-mono);padding:2px 6px;border-radius:var(--cr-r-sm)}
.card-title{margin:var(--cr-s2) 0 var(--cr-s1);font-size:.9375rem;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-link:hover .card-title{color:var(--cr-accent)}
.card-meta{margin:0;display:flex;flex-wrap:wrap;gap:var(--cr-s1);color:var(--cr-muted);font-size:.75rem;font-family:var(--cr-mono)}
/* 4.3 pagination + load more */
.sort-tabs{display:flex;gap:var(--cr-s2);overflow-x:auto;margin-bottom:var(--cr-s5);padding-bottom:var(--cr-s1);-webkit-overflow-scrolling:touch}
.sort-tab{flex:none;display:flex;align-items:center;min-height:44px;padding:0 var(--cr-s4);border-radius:var(--cr-r-sm);background:var(--cr-surface);color:var(--cr-muted);font-size:.8125rem;font-weight:600;font-family:var(--cr-mono);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.sort-tab.active{background:var(--cr-accent);color:var(--cr-accent-ink)}
.cr-load-more{display:flex;align-items:center;justify-content:center;min-height:48px;margin:var(--cr-s5) auto 0;max-width:320px;border-radius:var(--cr-r-sm);background:var(--cr-surface-2);font-weight:600;font-family:var(--cr-mono);font-size:.875rem;text-transform:uppercase;letter-spacing:.06em;width:100%}
.cr-load-more:hover{background:var(--cr-accent);color:var(--cr-accent-ink)}
.cr-load-more.is-loading{opacity:.6;pointer-events:none}
.pagination{display:flex;flex-wrap:wrap;gap:var(--cr-s2);justify-content:center;margin-top:var(--cr-s5)}
.page-link{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--cr-s3);border-radius:var(--cr-r-sm);background:var(--cr-surface);font-size:.875rem;font-family:var(--cr-mono)}
.page-link.active{background:var(--cr-accent);color:var(--cr-accent-ink);font-weight:700}
.page-ellipsis{display:flex;align-items:center;min-height:44px;color:var(--cr-muted)}
.empty-message{color:var(--cr-muted);padding:var(--cr-s6) 0;text-align:center}
/* 4.4 listings */
.breadcrumbs{margin-bottom:var(--cr-s4);font-size:.75rem;font-family:var(--cr-mono);color:var(--cr-muted)}
.cr-crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:var(--cr-s2);margin:0;padding:0}
.cr-crumbs li+li::before{content:"›";margin-right:var(--cr-s2);color:var(--cr-border)}
.breadcrumb-current{color:var(--cr-text)}
.page-title{margin-bottom:var(--cr-s3)}
.page-description{color:var(--cr-muted);max-width:70ch;margin-bottom:var(--cr-s5)}
.actor-profile{display:flex;gap:var(--cr-s4);align-items:flex-start;margin-bottom:var(--cr-s5)}
.actor-photo{width:88px;height:88px;border-radius:var(--cr-r);object-fit:cover;flex:none;background:var(--cr-surface-2)}
.actor-info h1{margin-bottom:var(--cr-s1)}
.actor-info .count{color:var(--cr-muted);font-size:.8125rem;font-family:var(--cr-mono)}
.actor-bio{color:var(--cr-muted);margin:var(--cr-s3) 0 0;max-width:70ch}
.result-count{color:var(--cr-muted);font-size:.8125rem;font-family:var(--cr-mono)}
.type-filter{display:flex;gap:var(--cr-s2);overflow-x:auto;margin-bottom:var(--cr-s4)}
.type-tab{flex:none;display:flex;align-items:center;min-height:44px;padding:0 var(--cr-s4);border-radius:var(--cr-r-sm);background:var(--cr-surface);font-size:.8125rem;font-family:var(--cr-mono)}
.type-tab.active{background:var(--cr-accent);color:var(--cr-accent-ink);font-weight:700}
@media (min-width:768px){.page-title{font-size:1.75rem}.actor-photo{width:120px;height:120px}}
/* 4.5 video detail */
.cr-ratio-16x9{position:relative;aspect-ratio:16/9;background:#070707;border-radius:var(--cr-r);overflow:hidden}
.cr-ratio-16x9 iframe,.cr-ratio-16x9 video,.cr-ratio-16x9 .external-player{position:absolute;inset:0;width:100%;height:100%;border:0}
.external-player{cursor:pointer}
.external-player-poster,.external-player-poster img{width:100%;height:100%;object-fit:cover}
.external-player-poster-empty{width:100%;height:100%;background:var(--cr-surface-2)}
.external-player-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;padding:0}
.external-player-play svg{width:100%;height:100%}
.external-player-duration{position:absolute;right:var(--cr-s3);bottom:var(--cr-s3);background:rgba(8,8,8,.85);color:var(--cr-text);font-size:.75rem;font-family:var(--cr-mono);padding:2px 6px;border-radius:var(--cr-r-sm)}
.video-title{margin:var(--cr-s4) 0 var(--cr-s3);font-size:1.25rem}
.item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cr-s2);color:var(--cr-muted);font-size:.8125rem;font-family:var(--cr-mono);margin-bottom:var(--cr-s4)}
.reaction-buttons{display:flex;gap:var(--cr-s2);margin-left:auto}
.reaction-btn{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--cr-s3);border-radius:var(--cr-r-sm);background:var(--cr-surface);font-size:.8125rem;font-family:var(--cr-mono)}
.reaction-btn.active{background:var(--cr-accent);color:var(--cr-accent-ink);font-weight:700}
.item-description{color:var(--cr-text);line-height:1.6}
.item-description.collapsible{max-height:6em;overflow:hidden;position:relative}
.item-description.collapsible.expanded{max-height:none}
.item-description.collapsible:not(.expanded)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5em;background:linear-gradient(to bottom,transparent,var(--cr-bg))}
.cr-more{min-height:44px;padding:0 var(--cr-s3);margin-bottom:var(--cr-s4);color:var(--cr-accent);font-weight:600;font-size:.8125rem;font-family:var(--cr-mono);text-transform:uppercase;letter-spacing:.04em}
.download-card{background:var(--cr-surface);border-radius:var(--cr-r);padding:var(--cr-s4);margin-bottom:var(--cr-s5);box-shadow:var(--cr-elev)}
.tag-list,.actor-list,.category-list{display:flex;flex-wrap:wrap;gap:var(--cr-s2);margin-bottom:var(--cr-s3)}
.tag-badge,.actor-badge,.category-badge{display:flex;align-items:center;min-height:44px;padding:0 var(--cr-s3);border-radius:var(--cr-r-sm);background:var(--cr-surface);font-size:.75rem;font-family:var(--cr-mono);color:var(--cr-muted)}
.tag-badge:hover,.actor-badge:hover,.category-badge:hover{color:var(--cr-accent-ink);background:var(--cr-accent)}
.related-section{margin-top:var(--cr-s6)}
.section-title{margin-bottom:var(--cr-s4);font-size:.8125rem;font-family:var(--cr-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--cr-muted)}
@media (min-width:768px){.video-title{font-size:1.625rem}.item-description.collapsible{max-height:9em}}

/* --- 4.6 core fallbacks --------------------------------------------------
   Core (app/templates/) still renders these pages/partials under Crimson:
   auth forms, flash, comments, error/static pages, and the gallery /
   category / actor grids. Class names below are core's — restyled with
   Crimson tokens. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--cr-s4);border-radius:var(--cr-r-sm);background:var(--cr-surface-2);color:var(--cr-text);font-weight:600;font-size:.9375rem}
.btn:hover{background:var(--cr-border)}
.btn-primary{background:var(--cr-accent);color:var(--cr-accent-ink)}
.btn-primary:hover{background:var(--cr-accent);opacity:.9}

.site-main{padding-left:var(--cr-s4);padding-right:var(--cr-s4)}
.site-main .container{padding-left:0;padding-right:0}

.flash{display:flex;align-items:center;justify-content:space-between;gap:var(--cr-s3);min-height:44px;padding:var(--cr-s3) var(--cr-s4);margin-bottom:var(--cr-s4);border-radius:var(--cr-r);font-size:.875rem}
.flash-success{background:var(--cr-success-bg);color:var(--cr-success-ink);box-shadow:inset 0 0 0 1px var(--cr-success-ring)}
.flash-error{background:var(--cr-danger-bg);color:var(--cr-danger-ink);box-shadow:inset 0 0 0 1px var(--cr-danger-ring)}
.flash-close{display:flex;align-items:center;justify-content:center;flex:none;min-width:44px;min-height:44px;font-size:1.25rem;line-height:1}

.auth-form-wrap{max-width:400px;margin:var(--cr-s6) auto}
.auth-form-wrap h1{margin-bottom:var(--cr-s5)}
.auth-form{display:flex;flex-direction:column;gap:var(--cr-s4)}
.form-group{display:flex;flex-direction:column;gap:var(--cr-s1)}
.form-group label{font-size:.8125rem;font-family:var(--cr-mono);color:var(--cr-muted)}
.form-error{background:var(--cr-danger-bg);color:var(--cr-danger-ink);box-shadow:inset 0 0 0 1px var(--cr-danger-ring);padding:var(--cr-s2) var(--cr-s3);border-radius:var(--cr-r-sm);font-size:.875rem;margin-bottom:var(--cr-s2)}
.auth-link{margin-top:var(--cr-s4);font-size:.875rem;color:var(--cr-muted)}
.auth-link a{color:var(--cr-accent)}

.profile-row{display:flex;justify-content:space-between;gap:var(--cr-s3);padding:var(--cr-s3) 0;border-bottom:1px solid var(--cr-border)}

.comments-section{margin-top:var(--cr-s6)}
.comment-form{margin-bottom:var(--cr-s5)}
.comment-form textarea{width:100%;font-family:inherit}
.comment-form .btn{margin-top:var(--cr-s2)}
.comment{padding:var(--cr-s3) 0;border-bottom:1px solid var(--cr-border)}
.comment-header{display:flex;align-items:center;gap:var(--cr-s2);margin-bottom:var(--cr-s1);font-size:.875rem}
.comment-date{color:var(--cr-muted);font-family:var(--cr-mono);font-size:.75rem}
.comment-body{color:var(--cr-text);line-height:1.5}
.comment-delete-btn{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--cr-muted)}
.comment-delete-btn:hover{color:var(--cr-accent)}
.comment-replies{margin-left:var(--cr-s5);border-left:2px solid var(--cr-border);padding-left:var(--cr-s3)}

.error-page{text-align:center;padding:var(--cr-s6) 0}
.error-page h1{font-size:3.5rem;color:var(--cr-muted);font-family:var(--cr-mono)}
.error-page p{color:var(--cr-muted);font-size:1.125rem;margin-bottom:var(--cr-s5)}
.back-link{color:var(--cr-accent);font-weight:700}

.static-page{max-width:70ch}
.page-content{margin:var(--cr-s5) 0;line-height:1.7}
.article-body{margin:var(--cr-s5) 0;line-height:1.7}
.article-body h2,.article-body h3{margin:var(--cr-s5) 0 var(--cr-s2)}
.article-body p{margin-bottom:var(--cr-s3)}
.article-body img{border-radius:var(--cr-r)}

.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--cr-s2);margin:var(--cr-s4) 0}
.gallery-item img{border-radius:var(--cr-r-sm)}
.category-grid{display:grid;grid-template-columns:1fr;gap:var(--cr-s3);margin:var(--cr-s5) 0}
.category-card{display:flex;align-items:center;gap:var(--cr-s3);padding:var(--cr-s3);border-radius:var(--cr-r);background:var(--cr-surface)}
.category-card:hover{background:var(--cr-surface-2)}
.category-card img{width:80px;height:60px;object-fit:cover;border-radius:var(--cr-r-sm)}
.actor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--cr-s4);margin:var(--cr-s5) 0}
.actor-card{text-align:center;color:var(--cr-text)}
.actor-card-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--cr-r);background:var(--cr-surface-2);margin-bottom:var(--cr-s2)}

.item-detail{margin-bottom:var(--cr-s6)}
.download-info{display:flex;gap:var(--cr-s4);font-size:.875rem;color:var(--cr-muted)}
.file-size{color:var(--cr-muted);font-family:var(--cr-mono)}
@media (min-width:480px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:768px){.category-grid{grid-template-columns:repeat(2,1fr)}}

/* --- 5. utilities ------------------------------------------------------- */
.cr-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.card-thumb,.external-player-poster{position:relative}