:root {
	--bg: #09090d;
	--surface: #111118;
	--surface-2: #191922;
	--border: rgba(255, 255, 255, .1);
	--text: #f5f5f7;
	--muted: #9b9ba8;
	--accent: #f5c451;
	--accent-dark: #d9a92f;
	--danger: #ef5c6c;
	--radius: 18px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #ffe29a; }
.text-secondary { color: var(--muted) !important; }
.site-header { background: rgba(9, 9, 13, .86); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px); }
.navbar { min-height: 68px; }
.navbar-brand { display: flex; align-items: center; gap: .7rem; color: #fff; font-weight: 800; letter-spacing: -.03em; }
.navbar-brand:hover { color: #fff; }
.brand-icon, .auth-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #111; box-shadow: 0 8px 24px rgba(245,196,81,.2); }
.btn { border-radius: 10px; font-weight: 650; }
.btn-accent { --bs-btn-color:#15120a; --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent); --bs-btn-hover-color:#15120a; --bs-btn-hover-bg:#ffe08a; --bs-btn-hover-border-color:#ffe08a; }
.form-control, .form-select, .input-group-text { background-color: #15151d; border-color: var(--border); color: var(--text); min-height: 46px; }
.form-control:focus, .form-select:focus { background-color: #191921; color: var(--text); border-color: rgba(245,196,81,.65); box-shadow: 0 0 0 .2rem rgba(245,196,81,.12); }
.form-control::placeholder { color: #6e6e7a; }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f5c451' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-label { color: #d7d7dd; font-size: .86rem; font-weight: 650; }
.form-text { color: #747482; }
.hero-section { position: relative; overflow: hidden; padding: clamp(70px, 10vw, 135px) 0 clamp(60px, 8vw, 100px); background: radial-gradient(circle at 77% 20%, rgba(103,68,166,.24),transparent 30%), radial-gradient(circle at 20% 10%,rgba(245,196,81,.13),transparent 25%); border-bottom: 1px solid var(--border); }
.hero-section__glow { position: absolute; width: 420px; height: 420px; left: 35%; top: 20%; border-radius: 50%; filter: blur(100px); background: rgba(245,196,81,.055); pointer-events: none; }
.eyebrow { display: block; color: var(--accent); font-weight: 800; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .7rem; }
.hero-section h1 { font-size: clamp(2.7rem, 6vw, 5.6rem); line-height: .96; letter-spacing: -.065em; font-weight: 850; }
.hero-section h1 span { color: var(--muted); }
.hero-section .lead { max-width: 690px; color: var(--muted); margin: 1.5rem 0 0; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: rgba(20,20,27,.72); backdrop-filter: blur(15px); }
.stats-grid div { padding: 1.4rem; border: 1px solid var(--border); }
.stats-grid strong, .stats-grid span { display: block; }
.stats-grid strong { font-size: 1.8rem; color: #fff; }
.stats-grid span { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.section-heading h2 { font-weight: 800; letter-spacing: -.035em; }
.filter-panel, .admin-panel, .suggestion-card { padding: 1.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.movie-card { display: block; width: 100%; padding: 0; border: 0; color: var(--text); background: none; text-align: left; }
.movie-card__poster { position: relative; display: block; aspect-ratio: 2/3; border-radius: 14px; overflow: hidden; background: var(--surface-2); box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.movie-card__poster img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.movie-card__type, .movie-card__score { position: absolute; top: .65rem; z-index: 2; padding: .34rem .55rem; border-radius: 8px; font-size: .7rem; font-weight: 800; backdrop-filter: blur(8px); }
.movie-card__type { left: .65rem; background: rgba(0,0,0,.7); }
.movie-card__score { right: .65rem; color: #19130a; background: var(--accent); }
.movie-card__overlay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 3rem; background: rgba(4,4,8,.45); opacity: 0; transition: opacity .3s; }
.movie-card:hover .movie-card__poster img, .movie-card:focus-visible .movie-card__poster img { transform: scale(1.045); filter: saturate(.75); }
.movie-card:hover .movie-card__overlay, .movie-card:focus-visible .movie-card__overlay { opacity: 1; }
.movie-card__content { display: block; padding: .9rem .15rem 0; }
.movie-card__content strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .94rem; }
.movie-card__content small { color: var(--muted); }
#catalogGrid { transition: opacity .2s; }
#catalogGrid.is-loading { opacity: .35; }
.catalog-loading { position: absolute; left: 0; right: 0; z-index: 3; }
.empty-state { padding: 4rem 1rem; text-align: center; color: var(--muted); }
.empty-state > i { display: block; margin-bottom: 1rem; color: var(--accent); font-size: 2.8rem; }
.empty-state h3 { color: var(--text); font-size: 1.3rem; }
.page-link { color: var(--muted); background: var(--surface); border-color: var(--border); }
.page-link:hover { color: var(--accent); background: var(--surface-2); border-color: var(--border); }
.page-item.active .page-link { color: #111; background: var(--accent); border-color: var(--accent); }
.movie-modal .modal-content, .suggestion-modal { color: var(--text); background: #101016; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.movie-modal__close { position: absolute; z-index: 5; top: 1rem; right: 1rem; padding: .7rem; border-radius: 50%; background-color: rgba(0,0,0,.6); }
.modal-loader { min-height: 480px; display: grid; place-items: center; }
.title-detail__hero { min-height: 420px; display: flex; align-items: flex-end; padding: 5rem 2rem 2rem; background-size: cover; background-position: center 28%; }
.title-detail__poster { width: 100%; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.title-detail h2 { max-width: 900px; margin: 0; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; font-weight: 850; letter-spacing: -.05em; }
.title-detail__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.title-detail__rating strong { font-size: 1.75rem; color: var(--accent); }
.title-detail__rating small { color: var(--muted); font-size: .9rem; }
.rating-stars { position: relative; display: inline-block; font-size: clamp(.9rem, 2vw, 1.3rem); letter-spacing: .12em; white-space: nowrap; }
.rating-stars__back { color: #3a3a42; }
.rating-stars__front { position: absolute; overflow: hidden; left: 0; top: 0; color: var(--accent); }
.genre-chip { padding: .4rem .7rem; border: 1px solid var(--border); border-radius: 100px; color: #c6c6cf; font-size: .76rem; }
.my-review { margin-top: 2rem; padding: 1.5rem; border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0; background: #181821; }
.my-review blockquote { margin: .8rem 0 1rem; font-size: 1.1rem; line-height: 1.7; }
.my-review small { color: var(--muted); }
.title-meta { padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.title-meta dt { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.title-meta dd { color: var(--muted); }
.site-footer { padding: 2rem 0; border-top: 1px solid var(--border); color: var(--muted); }
.auth-section { min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 4rem 0; background: radial-gradient(circle at center,rgba(245,196,81,.08),transparent 35%); }
.auth-card { width: min(100%, 460px); margin: auto; padding: clamp(1.5rem,5vw,2.5rem); border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: 0 35px 80px rgba(0,0,0,.32); }
.auth-icon { width: 58px; height: 58px; font-size: 1.4rem; }
.admin-nav { background: #0e0e14; border-bottom: 1px solid var(--border); }
.admin-nav a { flex: 0 0 auto; padding: .85rem 1rem; color: var(--muted); font-size: .88rem; font-weight: 650; border-bottom: 2px solid transparent; }
.admin-nav a:hover { color: var(--accent); border-color: var(--accent); }
.admin-content { min-height: calc(100vh - 190px); }
.admin-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: .8rem; height: 100%; padding: 1.2rem; border: 1px solid var(--border); border-radius: 15px; color: var(--text); background: var(--surface); }
.admin-stat i { grid-row: 1/3; color: var(--accent); font-size: 1.6rem; }
.admin-stat strong { font-size: 1.55rem; line-height: 1; }
.admin-stat span { color: var(--muted); font-size: .75rem; }
.admin-stat--link:hover { color: var(--text); border-color: rgba(245,196,81,.45); transform: translateY(-2px); }
.table-dark-custom { --bs-table-bg: transparent; --bs-table-color: #d9d9df; --bs-table-border-color: var(--border); }
.table-dark-custom thead th { color: var(--muted); font-size: .73rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.admin-thumb { width: 44px; height: 62px; border-radius: 6px; object-fit: cover; }
.selected-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 12px; background: var(--surface-2); }
.tmdb-result { width: 100%; padding: 0; overflow: hidden; color: var(--text); text-align: left; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); transition: border-color .2s, transform .2s; }
.tmdb-result:hover { border-color: var(--accent); transform: translateY(-3px); }
.tmdb-result img { display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover; }
.tmdb-result__body { display: block; padding: .7rem; }
.tmdb-result__body strong, .tmdb-result__body small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tmdb-result__body small { color: var(--muted); font-size: .72rem; }
.rating-picker { display: flex; flex-wrap: nowrap; gap: clamp(.1rem, .5vw, .4rem); }
.rating-picker__star { padding: .1rem; border: 0; color: var(--accent); background: transparent; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1; transition: transform .15s; }
.rating-picker__star:hover { transform: scale(1.16); }
.suggestion-card { transition: border-color .2s; }
.suggestion-card:hover { border-color: rgba(245,196,81,.35); }
.suggestion-status { padding: .3rem .55rem; border-radius: 100px; font-size: .7rem; font-weight: 700; background: #292934; color: #c2c2cd; }
.suggestion-status--pending { background: rgba(245,196,81,.14); color: var(--accent); }
.suggestion-status--approved, .suggestion-status--added { background: rgba(61,191,127,.14); color: #62d99e; }
.suggestion-status--rejected { background: rgba(239,92,108,.14); color: #ff8895; }
.alert { border-radius: 12px; }

@media (max-width: 767.98px) {
	.site-header .navbar-brand span:last-child { display: none; }
	.hero-section { padding-top: 60px; }
	.stats-grid div { padding: 1rem; }
	.title-detail__hero { min-height: 380px; padding: 5rem 1rem 1.5rem; }
	.title-detail h2 { font-size: 1.8rem; }
	.movie-modal .modal-dialog { margin: .5rem; }
	.rating-picker { overflow-x: auto; padding-bottom: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
