:root {
    --cc-bg: #0c0c0e;
    --cc-panel: #17171b;
    --cc-panel-2: #1e1e23;
    --cc-border: #2a2a30;
    --cc-text: #e8e8ea;
    --cc-muted: #9a9aa2;
    /* Brand blues sampled from the CineClaw wordmark. */
    --cc-accent: #03cdf5;
    --cc-accent-2: #015ff5;
    --cc-success: #2ecc71;
}

body {
    background: var(--cc-bg);
    color: var(--cc-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

a { text-decoration: none; }

/* The wordmark's "Cine" is white, so it only reads on the dark surfaces. */
.cc-logo-img {
    width: 100%;
    max-width: 190px;
    height: auto;
    display: block;
}

.cc-logo-auth {
    margin-inline: auto;
    max-width: 210px;
}

.cc-sidebar {
    width: 240px;
    min-height: 100vh;
    background: var(--cc-panel);
    border-right: 1px solid var(--cc-border);
    padding: 1.25rem 0.9rem;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    overflow-y: auto;
}

.cc-sidebar .nav-section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cc-muted);
    margin: 1.1rem 0.6rem 0.4rem;
}

.cc-sidebar .nav-link {
    color: var(--cc-text);
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cc-sidebar .nav-link:hover { background: var(--cc-panel-2); }
.cc-sidebar .nav-link.active { background: var(--cc-panel-2); color: var(--cc-accent); }

.cc-main {
    margin-left: 240px;
    padding: 1.75rem 2rem;
    min-height: 100vh;
}

/* Deliberately loud: an admin must never forget they are acting as someone else. */
.cc-impersonation-bar {
    background: linear-gradient(90deg, #b45309, #d97706);
    color: #fff;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.88rem;
}

.cc-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.btn-cc {
    background: linear-gradient(90deg, var(--cc-accent-2), var(--cc-accent));
    border: none;
    color: #fff;
    font-weight: 600;
}
.btn-cc:hover { color: #fff; opacity: 0.92; }

.cc-card {
    background: var(--cc-panel);
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    padding: 1.25rem;
}

.cc-card-hover:hover {
    border-color: var(--cc-accent);
    cursor: pointer;
}

.cc-badge {
    background: var(--cc-panel-2);
    color: var(--cc-muted);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.72rem;
}

.cc-avatar {
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--cc-border);
    background: var(--cc-panel-2);
    flex-shrink: 0;
}

.cc-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--cc-accent);
}

.cc-badge-plan {
    background: rgba(3, 205, 245, 0.12);
    color: var(--cc-accent);
    border: 1px solid rgba(3, 205, 245, 0.35);
}

.cc-plan-option {
    display: block;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    height: 100%;
    transition: border-color .15s, background .15s;
}
.cc-plan-option:hover { border-color: var(--cc-accent); }
.cc-plan-option.selected {
    border-color: var(--cc-accent);
    background: rgba(3, 205, 245, 0.07);
}

.cc-credits {
    background: var(--cc-panel-2);
    border: 1px solid var(--cc-border);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
}

.cc-step-list .step-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.88rem;
    color: var(--cc-muted);
}

.cc-step-list .step-item.done { color: var(--cc-text); }
.cc-step-list .step-item.active { color: var(--cc-accent); }

.step-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cc-border);
    flex-shrink: 0;
}
.step-item.done .step-dot { background: var(--cc-success); }
.step-item.active .step-dot { background: var(--cc-accent); animation: pulse 1s infinite; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(3,205,245,.5); }
    70% { box-shadow: 0 0 0 6px rgba(3,205,245,0); }
    100% { box-shadow: 0 0 0 0 rgba(3,205,245,0); }
}

.cc-wizard-step {
    border: 1px solid var(--cc-border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.6rem;
    cursor: pointer;
}
.cc-wizard-step.active {
    border-color: var(--cc-accent);
    background: rgba(3,205,245,0.08);
}

.form-control, .form-select {
    background: var(--cc-panel-2);
    border: 1px solid var(--cc-border);
    color: var(--cc-text);
}
.form-control:focus, .form-select:focus {
    background: var(--cc-panel-2);
    color: var(--cc-text);
    border-color: var(--cc-accent);
    box-shadow: 0 0 0 0.2rem rgba(3,205,245,.15);
}
.form-control::placeholder { color: var(--cc-muted); }

.form-check-input:checked { background-color: var(--cc-accent); border-color: var(--cc-accent); }

.scene-card { border: 1px solid var(--cc-border); border-radius: 12px; background: var(--cc-panel-2); }
.scene-thumb { aspect-ratio: 16/9; object-fit: cover; width: 100%; border-radius: 8px 8px 0 0; background:#000; }

.pagination .page-link {
    background: var(--cc-panel);
    border-color: var(--cc-border);
    color: var(--cc-text);
}
.pagination .page-link:hover { background: var(--cc-panel-2); color: var(--cc-accent); }
.pagination .page-item.active .page-link {
    background: var(--cc-accent-2);
    border-color: var(--cc-accent-2);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    background: var(--cc-panel);
    border-color: var(--cc-border);
    color: var(--cc-muted);
}

.table-cc { color: var(--cc-text); }
.table-cc th { color: var(--cc-muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; }
.table-cc td, .table-cc th { border-color: var(--cc-border) !important; vertical-align: middle; }