body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    background: #12121a;
    color: #eaeaea;
}

header {
    padding: 1rem 2rem;
    background: #1c1c28;
    border-bottom: 1px solid #2c2c3c;
}

.header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

header a {
    color: #eaeaea;
    text-decoration: none;
}

.site-logo {
    display: inline-block;
}

.clapperboard {
    position: relative;
    width: 260px;
}

.clapper-stripes {
    height: 22px;
    background: repeating-linear-gradient(
        -45deg,
        #111 0 14px,
        #f2f2f2 14px 28px
    );
    border-radius: 3px 3px 0 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    transform-origin: 6% 100%;
    transform: rotate(-18deg);
    animation: clap 0.5s ease-out 0.3s 1 forwards;
}

@keyframes clap {
    0% { transform: rotate(-18deg); }
    60% { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}

.clapper-board {
    background: #14141c;
    border: 2px solid #111;
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 0.4rem 0.6rem;
}

.clapper-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.7rem;
    line-height: 1.4;
    color: #eaeaea;
}

.clapper-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9a9aa8;
}

.clapper-value {
    font-weight: bold;
    color: #e0a72d;
}

.clapper-line:first-child .clapper-value {
    font-size: 0.85rem;
}

main {
    padding: 1.5rem 2rem;
}

/* Centred column: content stops at 1200px on wide screens. */
.page, .header-inner {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.search-bar-buttons {
    display: flex;
    gap: 0.5rem;
}

.search-bar input[type="text"] {
    flex: 1 1 10rem;
    min-width: 8rem;
}

.search-bar select {
    max-width: 12rem;
}

.poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}

.review-body {
    white-space: pre-line;
}

button,
input[type="submit"],
.button-link {
    display: inline-block;
    background: #e0a72d;
    color: #12121a;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
.button-link:hover {
    background: #f0b93d;
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-search input[type="text"] {
    width: 16rem;
    max-width: 100%;
}

.row-actions {
    display: flex;
    gap: 0.5rem;
    white-space: nowrap;
}

.row-actions form {
    margin: 0;
}

.button-edit,
.button-delete {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}

.button-edit {
    background: #3a8fd0;
    color: #eaeaea;
}

.button-edit:hover {
    background: #4aa0e0;
}

.button-delete {
    background: #d0453a;
    color: #eaeaea;
}

.button-delete:hover {
    background: #e0554a;
}

input[type="text"],
input[type="date"],
input[type="number"],
textarea,
select {
    background: #1c1c28;
    color: #eaeaea;
    border: 1px solid #33334a;
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    font-family: inherit;
}

.admin-form label {
    display: block;
    margin-bottom: 0.9rem;
    max-width: 600px;
}

.admin-form label > input,
.admin-form label > textarea {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    box-sizing: border-box;
}

.admin-form textarea {
    resize: vertical;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #1c1c28;
    border-radius: 8px;
    overflow: hidden;
}

th, td {
    padding: 0.6rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid #2a2a3a;
}

th {
    background: #14141c;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #9a9aa8;
}

tr:hover td {
    background: #22222f;
}

.error {
    background: #3a1c1c;
    color: #ff8080;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.success {
    background: #1c3a24;
    color: #7be08c;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.edit-form {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.edit-form .edit-col {
    flex: 1 1 320px;
    max-width: 600px;
}

.edit-form .edit-col label {
    max-width: none;
}

.edit-submit {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 0.5rem;
}

.button-close {
    background: #4a4a5a;
    color: #eaeaea;
    margin-left: 0.5rem;
}

.button-close:hover {
    background: #5a5a6c;
}

.edit-poster-box {
    margin-bottom: 1rem;
}

.edit-poster {
    display: block;
    max-width: 220px;
    width: 100%;
    border-radius: 6px;
}

.tag-input {
    display: block;
    margin-top: 0.3rem;
}

.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #e0a72d;
    color: #12121a;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: bold;
}

.tag-chip-remove {
    background: transparent;
    border: none;
    color: #12121a;
    font-weight: bold;
    padding: 0;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.tag-text-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.char-counter {
    font-size: 0.8rem;
    color: #9a9aa8;
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
}

.char-counter.over-limit {
    color: #ff6a5a;
    font-weight: bold;
}

/* ---- TV pages ---- */
header nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
@media (max-width: 600px) {
    header { flex-wrap: wrap; gap: 0.5rem; padding: 1rem; }
    header nav { gap: 0.25rem 0.75rem; }
    main { padding: 1rem; }
}
.muted { color: #9a9aae; }
.notice { background: #1c1c28; border-left: 3px solid #3a8fd0; padding: 0.5rem 0.75rem; }
.poster-placeholder { background: #22222f; aspect-ratio: 2 / 3; width: 100%; border-radius: 4px; }

/* Watch History */
.history-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.history-head h1 { margin: 0; line-height: 1.1; }
.history-head-sub { color: #e0a72d; font-weight: 600; font-size: 0.95rem; }
.media-toggle { display: flex; gap: 0.25rem; background: #16161f; border: 1px solid #2c2c3c; border-radius: 10px; padding: 0.25rem; }
.media-toggle-option { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 7px; color: #b8b8c8; text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.media-toggle-option svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.media-toggle-option:hover { color: #eaeaea; background: #22222f; }
.media-toggle-option.active { background: #e0a72d; color: #12121a; }
.week-strip { display: flex; width: fit-content; box-sizing: border-box; align-items: stretch; gap: 0.25rem; background: #16161f; border: 1px solid #2c2c3c; border-radius: 10px; padding: 0.4rem; margin-bottom: 1.5rem; max-width: 100%; overflow-x: auto; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 3.4rem; padding: 0.45rem 0.3rem; border-radius: 7px; color: #eaeaea; text-decoration: none; font-size: 0.85rem; }
.week-day strong { font-size: 0.95rem; }
a.week-day:hover { background: #22222f; }
.week-day.empty { color: #6c6c80; }
.week-day.today { background: #2a2a3a; }
.week-dots { display: flex; align-items: center; gap: 3px; min-height: 0.9rem; color: #b8b8c8; font-size: 0.75rem; }
.week-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e0a72d; }
.week-arrow { display: flex; align-items: center; padding: 0 0.5rem; color: #b8b8c8; text-decoration: none; font-size: 1.5rem; border-radius: 7px; }
a.week-arrow:hover { background: #22222f; color: #eaeaea; }
.week-arrow.disabled { color: #3a3a4e; }
.history-day { scroll-margin-top: 1rem; margin-bottom: 1.75rem; }
.history-day h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 0.85rem; }
.history-card { display: flex; min-width: 0; height: 190px; background: #16161f; border: 1px solid #2c2c3c; border-radius: 10px; overflow: hidden; color: #eaeaea; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.history-card:hover, .history-card:focus-visible { border-color: #e0a72d; transform: translateY(-2px); }
.history-card-poster { width: 127px; height: 100%; object-fit: cover; flex-shrink: 0; border-radius: 0; aspect-ratio: auto; }
.history-card-info { position: relative; flex: 1; min-width: 0; padding: 0.7rem 0.75rem; background-size: cover; background-position: center; display: flex; flex-direction: column; gap: 0.2rem; }
.history-card-title { font-weight: 600; font-size: 0.92rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.history-card-show { color: #b8b8c8; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-card-when { color: #9a9aae; font-size: 0.78rem; }
.history-card-scores { gap: 0.25rem; margin: 0.15rem 0; }
.history-card-scores .score { font-size: 0.7rem; padding-right: 5px; }
.history-card-scores .score i { font-size: 0.6rem; padding: 2px 4px; }
.history-card-rating { position: absolute; right: 0.75rem; bottom: 0.6rem; font-weight: 700; font-size: 0.95rem; }
.history-card-rating span[aria-hidden] { color: #e0a72d; }
.history-card-rating.unrated span[aria-hidden] { color: #9a9aae; }
.history-empty { color: #9a9aae; }
.history-more { display: block; width: fit-content; margin: 0.5rem auto 2rem; padding: 0.5rem 1.25rem; border: 1px solid #2c2c3c; border-radius: 8px; color: #b8b8c8; text-decoration: none; }
.history-more:hover { color: #eaeaea; border-color: #e0a72d; }
.history-more.loading { pointer-events: none; opacity: 0.7; }
.show-panel .season-bars { margin-top: 0.5rem; }
@media (max-width: 600px) {
    .week-strip { padding: 0.3rem; gap: 0; }
    .week-day { min-width: 2.2rem; padding: 0.4rem 0.05rem; font-size: 0.72rem; }
    .week-arrow { padding: 0 0.25rem; }
    .history-card { height: 170px; }
    .history-card-poster { width: 113px; }
}

.show-hero { display: flex; gap: 1.5rem; padding: 1.5rem; background-size: cover; background-position: center top; border-radius: 8px; }
.show-poster { width: 180px; flex-shrink: 0; border-radius: 6px; }
.show-rating { font-weight: 600; }
@media (max-width: 600px) {
    .show-hero { flex-direction: column; padding: 1rem; }
    .show-poster { width: 120px; }
}

.season-bars { display: grid; gap: 6px; max-width: 640px; }
.season-bar-row { display: grid; grid-template-columns: 6rem 1fr 4.5rem; align-items: center; gap: 0.5rem; }
.season-bar-track { background: #1c1c28; height: 14px; }
.season-bar-fill { display: block; height: 100%; background: #3987e5; border-radius: 0 4px 4px 0; }

.heatmap-wrap { overflow-x: auto; }
.heatmap { border-collapse: separate; border-spacing: 2px; }
.heatmap th { font-weight: normal; color: #9a9aae; font-size: 0.8rem; padding: 0 4px; white-space: nowrap; }
.heatmap .cell { min-width: 28px; height: 28px; text-align: center; font-size: 0.75rem; border-radius: 4px; padding: 0; }
.b1 { background: #184f95; color: #ffffff; }
.b2 { background: #2a78d6; color: #ffffff; }
.b3 { background: #5598e7; color: #12121a; }
.b4 { background: #86b6ef; color: #12121a; }
.b5 { background: #cde2fb; color: #12121a; }
.watched-unrated { background: #4a4a5a; color: #e8e8f0; }
.unwatched { background: transparent; box-shadow: inset 0 0 0 1px #2e2e3e; }
.heatmap .cell.empty { background: transparent; }
.heatmap-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.8rem; align-items: center; }
.swatch { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin-right: 4px; border-radius: 3px; }
.trakt-connect, .trakt-panel { margin: 1.5rem 0; }
.trakt-code { font-size: 2rem; font-family: monospace; letter-spacing: 0.2em; }
.trakt-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.summary-tools { display: inline-flex; gap: 0.75rem; align-items: center; margin-left: 0.75rem; }
.summary-status { font-size: 0.9em; }
.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- Movie cards, score badges, review pop-up ---- */
.poster-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    background: #1c1c28;
    border: 1px solid #2c2c3c;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.poster-card:hover, .poster-card:focus-visible {
    transform: translateY(-3px);
    border-color: #2f8cff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.poster-card img, .poster-card .poster-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-bottom: 1px solid #2c2c3c;
    border-radius: 0;
}
.card-body { padding: 0.55rem 0.65rem 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.card-title { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.card-meta { color: #9a9aae; font-size: 0.8rem; }

.scores { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.score {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; font-weight: 700; line-height: 1;
    border-radius: 6px; padding: 2px 7px 2px 2px;
}
.score i { font-style: normal; font-size: 0.68rem; font-weight: 800; border-radius: 4px; padding: 3px 5px; }
.score-ihbm { background: #10203a; color: #6cb8ff; font-size: 0.9rem; }
.score-ihbm i { background: #2f8cff; color: #fff; }
.score-summary { color: #9a9aae; font-size: 0.85rem; }
.score-imdb { background: #2a2410; color: #f5c518; }
.score-imdb i { background: #f5c518; color: #000; }
.score-rt { background: #2a1512; color: #ff8a73; }
.score-rt i { background: #fa320a; color: #fff; }
.score-rt.rt-rotten i { background: #0ac855; color: #0b2b16; }
.score-metacritic { background: #1e1e1e; color: #eaeaea; }
.score-metacritic i { background: #ffffff; color: #000; }
.score-metacritic.mc-good i { background: #66cc33; color: #fff; }
.score-metacritic.mc-mixed i { background: #ffcc33; color: #000; }
.score-metacritic.mc-bad i { background: #ff0000; color: #fff; }
.score-trakt { background: #2a1018; color: #ff6f8a; }
.score-trakt i { background: #ed1c24; color: #fff; }
.score-tmdb { background: #0d2430; color: #7fd6e8; }
.score-tmdb i { background: #01b4e4; color: #0d253f; }

.movie-modal {
    width: min(860px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    padding: 0;
    border: 1px solid #3a3a4e;
    border-radius: 12px;
    background: #16161f;
    color: #eaeaea;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
.movie-modal::backdrop { background: rgba(6, 6, 10, 0.72); }
.modal-content { max-height: calc(100vh - 3rem); overflow-y: auto; }

.review-panel { padding: 1.25rem 1.5rem 1.5rem; }
.review-page .review-panel { background: #16161f; border: 1px solid #2c2c3c; border-radius: 12px; }
.panel-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-bottom: 0.25rem; }
.panel-full { color: #6cb8ff; text-decoration: none; font-size: 0.9rem; }
.panel-full:hover { text-decoration: underline; }
.panel-close { background: none; border: 1px solid #3a3a4e; color: #cfcfdc; border-radius: 6px; padding: 0.2rem 0.55rem; cursor: pointer; }
.panel-top { display: flex; gap: 1.25rem; }
.panel-poster { width: 200px; flex-shrink: 0; align-self: flex-start; border-radius: 8px; border: 1px solid #3a3a4e; }
.panel-facts { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.panel-title { margin: 0; font-size: 1.6rem; line-height: 1.2; }
.panel-year { color: #9a9aae; font-weight: 400; }
.panel-meta, .panel-cast { margin: 0; color: #9a9aae; font-size: 0.9rem; }
.panel-overview { margin: 0.25rem 0 0; color: #cfcfdc; font-size: 0.92rem; line-height: 1.5; }
.panel-label {
    margin: 1.25rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid #2c2c3c;
    font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6cb8ff;
}
.panel-label span { color: #9a9aae; letter-spacing: normal; text-transform: none; }
.review-panel .review-body { line-height: 1.6; }
.panel-tags { color: #e0a72d; font-size: 0.85rem; margin: 0.75rem 0 0; }
.back-link a { color: #6cb8ff; text-decoration: none; }

@media (max-width: 600px) {
    .movie-modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; margin: 0; }
    .modal-content { max-height: 100vh; }
    .panel-top { flex-direction: column; }
    .panel-poster { width: 140px; }
    .review-panel { padding: 1rem; }
    header { padding: 1rem; }
}


.wordpress-panel, .wordpress-tools { margin: 1.5rem 0; }
.poster-choices { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.poster-choice button { padding: 0; border: 3px solid transparent; background: none; cursor: pointer; }
.poster-choice.selected button { border-color: #e7b030; }
.poster-choice img { display: block; width: 185px; }

.review-body a { color: #6cb8ff; }
.review-body img { max-width: 100%; height: auto; }
.review-body blockquote { margin: 0.5rem 0 0.5rem 1rem; padding-left: 0.75rem; border-left: 3px solid #3a3a4a; color: #b8b8c8; font-style: italic; }
.review-body ul, .review-body ol { margin: 0.25rem 0; padding-left: 1.5rem; }
.review-body p { margin: 0; }

/* Admin sub-tabs and To review */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid #2c2c3c; margin-bottom: 1.25rem; }
.admin-tab { padding: 0.55rem 1rem; color: #b8b8c8; text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.admin-tab:hover { color: #eaeaea; }
.admin-tab.active { color: #eaeaea; border-bottom-color: #e0a72d; }
.tab-count { display: inline-block; min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: #e0a72d; color: #12121a; font-size: 0.75rem; text-align: center; }
.queue-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.queue-head p { margin: 0; }
.queue-poster { width: 46px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; display: block; }
.queue-dismissed { margin-top: 1.5rem; color: #b8b8c8; }
.queue-dismissed summary { cursor: pointer; }
.queue-dismissed li { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0; }
.queue-dismissed form { margin: 0; }
.button-small { padding: 0.2rem 0.6rem; font-size: 0.8rem; }