/* Shared sidebar/layout rules (.dashboard, .sidebar*, .tool-page*,
   .account-popover-*) live in components.css — they are used on every
   page that injects sidebar.js, not just dashboard. */

/* ===== Dashboard Home Page ===== */
.dash-welcome{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-2xl) var(--space-2xl) var(--space-lg);
    position:relative;z-index:10;
}
.dash-greeting{
    font-size:var(--text-3xl);font-weight:500;line-height:1.2;
}
.dash-sub{
    color:var(--text-muted);font-size:var(--text-sm);margin-top:var(--space-xs);
}
.dash-header-right{display:flex;align-items:center;gap:var(--space-md)}
.dash-avatar{
    width:40px;height:40px;border-radius:50%;
    background:var(--neutral-hover-bg);color:var(--neutral);border:1px solid var(--neutral-border);
    display:flex;align-items:center;justify-content:center;
    font-weight:500;font-size:var(--text-base);
}
.dash-section{padding:0 var(--space-2xl) var(--space-2xl)}
.dash-section-title{
    font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-lg);
}
.dash-section-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:var(--space-lg);
}
.dash-section-header .dash-section-title{margin-bottom:0}
.dash-view-all{
    color:var(--neutral);font-size:var(--text-sm);font-weight:500;
}
.dash-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:var(--space-lg);
}
.dash-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:var(--space-xl);
    transition:all .3s var(--ease);display:block;
    text-decoration:none;color:inherit;
}
.dash-card:hover{
    border-color:var(--color-black-border);
}
.dash-card-primary{border-color:var(--neutral-border-hover)}
.dash-card-primary:hover{
    border-color:var(--color-gold-faint);
}
.dash-card-icon{
    width:48px;height:48px;border-radius:var(--radius-md);
    background:var(--bg-elevated);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:var(--space-md);color:var(--neutral);
}
.dash-card-primary .dash-card-icon{
    background:var(--neutral-hover-bg);
}
.dash-card h3{
    font-size:var(--text-base);font-weight:500;margin-bottom:var(--space-xs);
    color:var(--text-primary);
}
.dash-card p{
    color:var(--text-muted);font-size:var(--text-sm);line-height:1.5;
}
.dash-recent{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);overflow:hidden;
}
.dash-recent-item{
    display:flex;align-items:center;gap:var(--space-md);
    padding:var(--space-md) var(--space-lg);
    border-bottom:1px solid var(--border);font-size:var(--text-sm);
}
.dash-recent-item:last-child{border-bottom:none}
.dash-recent-title{flex:1;font-weight:500;color:var(--text-primary)}
.dash-recent-status{
    font-size:var(--text-xs);padding:2px 10px;
    border-radius:var(--radius-full);font-weight:500;
}
.status-completed{background:rgba(52,211,153,.1);color:var(--success)}
.status-processing,.status-producing{background:rgba(212,136,42,.1);color:var(--accent)}
.status-queued{background:rgba(96,165,250,.1);color:#60A5FA}
.status-failed,.status-error{background:rgba(248,113,113,.1);color:var(--error)}
.dash-recent-date{color:var(--text-muted);font-size:var(--text-xs)}
.dash-recent-item .btn{flex-shrink:0;font-size:var(--text-xs);padding:4px 12px}
.dash-empty{
    padding:var(--space-2xl);text-align:center;
    color:var(--text-muted);font-size:var(--text-sm);
}
.dash-empty .btn{margin-top:var(--space-md)}
.dash-plan-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:20px 24px;
    display:flex;align-items:center;justify-content:space-between;
    gap:var(--space-lg);
}
.dash-plan-info h3{font-size:var(--text-base);font-weight:500;margin-bottom:var(--space-xs)}
.dash-plan-info p{color:var(--text-muted);font-size:var(--text-sm)}

/* .main-content / .main-header / .user-info / .avatar / .content-area
   moved to components.css (shared layout). */

/* Create Video Form */
.create-form{max-width:700px;margin:0 auto}
.create-form .form-group{margin-bottom:var(--space-xl)}
.mode-selector{margin-bottom:var(--space-2xl)}

/* Asset Library row — sub-field inside Visual Media section */
.ga-library-row{margin-top:var(--space-md)}
.ga-preview-strip{margin-top:var(--space-md);margin-bottom:var(--space-md)}

/* Divider between basic fields and accordion sections */
.section-divider{
    display:flex;align-items:center;gap:var(--space-md);
    margin:var(--space-xl) 0;
    font-size:var(--text-xs);font-weight:500;
    text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);
}
.section-divider::before,.section-divider::after{
    content:'';flex:1;height:1px;background:var(--border);
}

/* Hint + character counter two-column row */
.hint-counter-row{
    display:flex;align-items:flex-start;
    justify-content:space-between;gap:var(--space-md);
    margin-top:var(--space-xs);
}
.hint-counter-row .form-hint{margin-top:0}
.hint-counter-row .form-hint:first-child{flex:1;min-width:0}
.hint-counter{flex-shrink:0;white-space:nowrap}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}
.voice-option{
    padding:var(--space-md);border:1px solid var(--border);
    border-radius:var(--radius-md);cursor:pointer;text-align:center;
    transition:all .2s;font-size:var(--text-sm);
}
.voice-option:hover{border-color:var(--border-hover)}
.voice-option.selected{border-color:var(--neutral-border-hover);background:var(--neutral-hover-bg)}
.voice-option-name{font-weight:500;margin-bottom:2px}
.voice-option-label{color:var(--text-muted);font-size:var(--text-xs)}

/* Video Table */
.video-table{width:100%;border-collapse:collapse}
.video-table th{
    text-align:left;padding:var(--space-md) var(--space-lg);
    font-size:var(--text-xs);font-weight:500;text-transform:uppercase;
    letter-spacing:.08em;color:var(--text-muted);
    border-bottom:1px solid var(--border);
}
.video-table td{
    padding:var(--space-md) var(--space-lg);
    font-size:var(--text-sm);border-bottom:1px solid var(--border);
    color:var(--text-secondary);vertical-align:middle;
}
.video-table tr:hover td{background:rgba(255,255,255,.02)}
.video-table .title-cell{color:var(--text-primary);font-weight:500}
.status-dot{
    width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:var(--space-sm);
}
.status-dot.completed{background:var(--success)}
.status-dot.processing{background:var(--gold);animation:pulse 1.5s infinite}
.status-dot.review_ready{background:var(--accent);animation:pulse 1.5s infinite}
.status-dot.queued{background:var(--info)}
.status-dot.failed{background:var(--error)}

/* ══════ VIDEOS PAGE — HERO + HEADER STRIP ══════ */
.vd-hero{
    position:relative;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;min-height:520px;
    padding:80px 24px 60px;border-radius:var(--radius-lg);overflow:hidden;
    background:var(--color-black-deep);
}
.vd-hero-bg{position:absolute;inset:0;z-index:0}
.vd-hero-img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.vd-hero-overlay{
    position:absolute;inset:0;
    background:
        linear-gradient(180deg,rgba(11,11,15,.45) 0%,rgba(11,11,15,.70) 40%,rgba(11,11,15,.92) 100%),
        radial-gradient(ellipse at center top,rgba(184,151,46,.07) 0%,transparent 60%);
}
.vd-hero-grain{
    position:absolute;inset:0;opacity:.04;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.04'/%3E%3C/svg%3E");
    background-size:180px 180px;
}
.vd-hero-brackets{position:absolute;inset:20px;pointer-events:none;z-index:1}
.vd-hero-brackets::before,.vd-hero-brackets::after{
    content:'';position:absolute;width:24px;height:24px;
    border-color:var(--color-gold-dim);border-style:solid;opacity:.35;
}
.vd-hero-brackets::before{top:0;left:0;border-width:1px 0 0 1px}
.vd-hero-brackets::after{bottom:0;right:0;border-width:0 1px 1px 0}
.vd-hero-content{
    position:relative;z-index:2;display:flex;flex-direction:column;
    align-items:center;max-width:560px;
    animation:vd-hero-entrance .8s cubic-bezier(.16,1,.3,1) .1s both;
}
.vd-hero-badge{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 14px;font-size:.7rem;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold);
    background:rgba(184,151,46,.08);border:1px solid var(--color-gold-faint);
    border-radius:20px;margin-bottom:var(--space-xl);
}
.vd-hero-title{
    font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;
    color:var(--color-ivory);letter-spacing:-.02em;line-height:1.25;
    margin:0 0 var(--space-lg);
}
.vd-hero-subtitle{
    font-size:.95rem;color:var(--text-muted);line-height:1.7;
    margin:0 0 var(--space-2xl);max-width:480px;
}
.vd-hero-features{
    position:relative;z-index:2;display:flex;align-items:center;gap:14px;
    margin-top:var(--space-2xl);
    animation:vd-hero-entrance .8s cubic-bezier(.16,1,.3,1) .35s both;
}
.vd-hero-feature{
    display:flex;align-items:center;gap:6px;
    font-size:.78rem;color:var(--text-muted);letter-spacing:.02em;
}
.vd-hero-feature-dot{
    width:3px;height:3px;border-radius:50%;background:var(--color-gold-dim);
}
@keyframes vd-hero-entrance{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:translateY(0)}
}

/* Header strip (populated state) */
.vd-header-strip{
    position:relative;border-radius:var(--radius-lg);
    overflow:hidden;margin-bottom:var(--space-xl);min-height:100px;
}
.vd-header-strip-bg{position:absolute;inset:0}
.vd-header-strip-img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.vd-header-strip-overlay{
    position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(11,11,15,.92) 0%,rgba(11,11,15,.80) 50%,rgba(11,11,15,.60) 100%);
}
.vd-header-strip-content{
    position:relative;z-index:2;display:flex;align-items:center;
    justify-content:space-between;padding:var(--space-xl) var(--space-2xl);
}
.vd-header-strip-title{
    font-size:1.4rem;font-weight:800;color:var(--text-primary);
    margin:0 0 2px;letter-spacing:-.02em;
}
.vd-header-strip-count{font-size:.82rem;color:var(--text-muted);margin:0}

/* Stuck note */
.vd-stuck-note{font-size:.72rem;color:var(--text-muted);margin-top:4px}
.vd-stuck-note a{color:var(--color-gold);text-decoration:underline}

/* Smooth page reveal — prevents hard display:none → display:block pop-in */
.page-reveal{opacity:0;transform:translateY(12px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.page-reveal.is-revealed{opacity:1;transform:translateY(0)}

/* Skeleton shimmer */
.vid-skeleton-bar{
    background:linear-gradient(90deg,var(--bg-card) 25%,rgba(255,255,255,.04) 50%,var(--bg-card) 75%);
    background-size:200% 100%;animation:shimmer 1.8s ease infinite;
    border-radius:6px;
}

@media(max-width:768px){
    .vd-hero{min-height:440px;padding:60px 20px 48px}
    .vd-hero-features{flex-wrap:wrap;justify-content:center;gap:10px}
    .vd-header-strip-content{flex-direction:column;align-items:flex-start;gap:var(--space-md);padding:var(--space-lg)}
}
@media(max-width:480px){
    .vd-hero{min-height:380px;padding:48px 16px 40px}
    .vd-hero-brackets{display:none}
}

/* Empty State (generic) */
.empty-state{
    text-align:center;padding:var(--space-5xl) var(--space-xl);
    color:var(--text-muted);
}
.empty-state-icon{font-size:4rem;margin-bottom:var(--space-lg);opacity:.3}
.empty-state h3{font-size:var(--text-xl);font-weight:500;color:var(--text-secondary);margin-bottom:var(--space-sm)}
.empty-state p{font-size:var(--text-sm);margin-bottom:var(--space-xl)}


/* ═══════════════════════════════════════════════════════
   DASHBOARD — Cinematic Card System
   ═══════════════════════════════════════════════════════ */

/* Ambient glow behind dashboard content */
.dash-ambient-glow {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-30%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(184,135,46,0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Welcome entrance */
.dash-cin-entrance {
    animation: dash-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes dash-entrance {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Tools Card Grid ── */
.dash-grid-cin {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* ── Base Card ── */
.dcard {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: dcard-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dcard:nth-child(1) { animation-delay: 0.15s; }
.dcard:nth-child(2) { animation-delay: 0.25s; }
.dcard:nth-child(3) { animation-delay: 0.3s; }
.dcard:nth-child(4) { animation-delay: 0.35s; }
.dcard:nth-child(5) { animation-delay: 0.4s; }
.dcard:nth-child(6) { animation-delay: 0.45s; }
.dcard:nth-child(7) { animation-delay: 0.5s; }
.dcard:nth-child(8) { animation-delay: 0.55s; }

@keyframes dcard-enter {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.dcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(184,151,46,0.15);
    border-color: rgba(184,151,46,0.25);
}

.dcard-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.dcard-info h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.dcard-info p {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ══════════════════════════════════════
   CREATE CARD — Helion Orb + Prompt
   ══════════════════════════════════════ */
.dcard-create {
    background: linear-gradient(135deg, rgba(184,135,46,0.06) 0%, var(--bg-card) 40%, var(--bg-card) 100%);
}
.dcard-create .dcard-visual {
    flex-direction: row;
    gap: 16px;
    height: auto;
    min-height: 60px;
    overflow: visible;
    justify-content: flex-start;
    padding: 0 4px;
}

/* Helion orb with glow + ring */
.dc-orb {
    position: relative;
    flex-shrink: 0;
}
.dc-orb svg,
.dc-orb img {
    display: block;
    filter: drop-shadow(0 0 12px rgba(184,135,46,0.4));
}
.dc-orb-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px solid rgba(184,151,46,0.25);
    animation: dc-ring-spin 8s linear infinite;
}
@keyframes dc-ring-spin {
    to { transform: rotate(360deg); }
}
.dc-orb-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,135,46,0.15) 0%, transparent 70%);
    animation: dc-orb-pulse 3s ease-in-out infinite;
}
@keyframes dc-orb-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

/* Typing prompt */
.dc-prompt {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dc-prompt-label {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.dc-prompt-bar {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    min-height: 38px;
    display: flex;
    align-items: center;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.dc-prompt-bar:has(.dc-typed-text:not(:empty)),
.dc-prompt-bar.typing {
    border-color: rgba(184,135,46,0.2);
    box-shadow: 0 0 16px rgba(184,135,46,0.06);
}
.dc-typed-text {
    color: rgba(255,255,255,0.7);
}
.dc-cursor {
    color: var(--accent);
    animation: dc-blink 1s step-end infinite;
    font-weight: 300;
}
@keyframes dc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ══════════════════════════════════════
   VIDEOS CARD — Mini Video Stack
   ══════════════════════════════════════ */
.dcard-videos .dcard-visual {
    flex-direction: column;
    gap: 6px;
}
.dc-vid-stack {
    display: flex;
    gap: 5px;
    align-items: center;
}
.dc-vid {
    width: 56px;
    height: 34px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dc-vid.shown {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.dc-vid-thumb {
    position: absolute;
    inset: 0;
    border-radius: 4px;
}
.dc-vid-1 .dc-vid-thumb {
    background: linear-gradient(135deg, #2a1a10 0%, #3a2818 50%, #1a1510 100%);
}
.dc-vid-2 .dc-vid-thumb {
    background: linear-gradient(135deg, #0d1828 0%, #1a2a3a 50%, #0d2030 100%);
}
.dc-vid-3 .dc-vid-thumb {
    background: linear-gradient(135deg, #0d2818 0%, #1a3828 50%, #0d2018 100%);
}
.dc-vid-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease 0.3s;
}
.dc-vid.shown .dc-vid-play { opacity: 0.8; }
.dc-vid-play svg { margin-left: 1px; }
.dc-vid-dur {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 0.45rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 0 3px;
    border-radius: 2px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.3s ease 0.4s;
}
.dc-vid.shown .dc-vid-dur { opacity: 1; }
.dc-video-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.dc-count-num {
    font-size: 1.3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #B8972E, #D4882A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-variant-numeric: tabular-nums;
}
.dc-count-label {
    font-size: 0.6rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ══════════════════════════════════════
   SEO CARD — Search Bar + Tags
   ══════════════════════════════════════ */
.dcard-seo .dcard-visual {
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}
.dc-search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.4);
    overflow: hidden;
}
.dc-search-text {
    opacity: 0;
    animation: dc-search-type 0.6s ease 1s forwards;
}
@keyframes dc-search-type {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}
/* Subtle scan line on search bar */
.dc-search-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(184,135,46,0.06), transparent);
    animation: dc-scan 3s ease-in-out 1.5s 1 forwards;
}
@keyframes dc-scan {
    from { left: -100%; }
    to { left: 100%; }
}
.dc-search-bar {
    position: relative;
    overflow: hidden;
}
.dc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.dc-tag {
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 20px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dc-tag.pop {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.dc-tag-1 { background: rgba(184,135,46,0.15); color: #B8972E; transition-delay: 1.2s; }
.dc-tag-2 { background: rgba(100,140,200,0.15); color: #8AB4F8; transition-delay: 1.4s; }
.dc-tag-3 { background: rgba(80,200,120,0.15); color: #50C878; transition-delay: 1.6s; }
.dc-tag-4 { background: rgba(200,100,150,0.15); color: #E8829B; transition-delay: 1.8s; }

/* ══════════════════════════════════════
   THUMBNAIL CARD — Real Image Grid
   ══════════════════════════════════════ */
.dcard-thumb .dcard-visual {
    flex-direction: column;
    gap: 4px;
}
.dc-thumb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    width: 75%;
    max-height: 85px;
}
.dc-thumb {
    aspect-ratio: 16/9;
    border-radius: 3px;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
/* <picture> wrapper must not become a layout box, or the img's height:100%
   resolves against the wrapper instead of .dc-thumb and the cover fit breaks. */
.dc-thumb picture { display: contents; }
.dc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dc-thumb.drawn {
    opacity: 1;
    transform: scale(1);
}
.dc-thumb-1 { transition-delay: 0.4s; }
.dc-thumb-2 { transition-delay: 0.55s; }
.dc-thumb-3 { transition-delay: 0.7s; }
.dc-thumb-4 { transition-delay: 0.85s; }

.dc-thumb-badge {
    font-size: 0.55rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.06em;
    opacity: 0;
    transition: opacity 0.5s ease 1.1s;
}
.dc-thumb-badge.shown { opacity: 1; }

/* ══════════════════════════════════════
   REPURPOSE CARD — Morphing Frame
   ══════════════════════════════════════ */
.dcard-repurpose .dcard-visual {
    flex-direction: column;
    gap: 6px;
}
.dc-morph-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.dc-morph-frame {
    width: 56px;
    height: 34px;
    border: 2px solid var(--accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 16px rgba(184,135,46,0.15);
}
.dc-morph-frame.square {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}
.dc-morph-frame.portrait {
    width: 28px;
    height: 50px;
    border-radius: 4px;
}
.dc-platforms {
    display: flex;
    gap: 12px;
}
.dc-plat {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-tertiary);
    transition: color 0.4s ease, transform 0.4s ease;
    letter-spacing: 0.05em;
}
.dc-plat.active {
    color: var(--accent);
    transform: scale(1.15);
}

/* ══════════════════════════════════════
   SCRIPT GENERATOR CARD — Writing Lines
   ══════════════════════════════════════ */
.dcard-script .dcard-visual {
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    padding: 4px 8px;
}
.dc-script-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.dc-sline {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateX(-12px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dc-sline.written {
    opacity: 1;
    transform: translateX(0);
}
.dc-sline-marker {
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--accent);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
}
.dc-sline.written .dc-sline-marker { opacity: 1; }
.dc-sline-text {
    height: 4px;
    width: 100%;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
}
.dc-sline.written .dc-sline-text {
    background: rgba(255,255,255,0.15);
}
.dc-sline-short { width: 60%; }
.dc-sline-med { width: 80%; }

/* Alternate marker colors for variety */
.dc-sline-2 .dc-sline-marker { background: #8AB4F8; }
.dc-sline-3 .dc-sline-marker { background: #50C878; }
.dc-sline-4 .dc-sline-marker { background: #E8829B; }

/* ══════════════════════════════════════
   HOOK GENERATOR CARD — Attention Bar
   ══════════════════════════════════════ */
.dcard-hook .dcard-visual {
    flex-direction: column;
    gap: 8px;
}
.dc-hook-anim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    position: relative;
}
.dc-hook-bar {
    width: 85%;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.dc-hook-zone {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30%;
    background: rgba(184,135,46,0.15);
    border-radius: 3px;
    transition: background 0.4s ease;
}
.dc-hook-zone.lit {
    background: rgba(184,135,46,0.35);
    box-shadow: 0 0 12px rgba(184,135,46,0.2);
}
.dc-hook-playhead {
    position: absolute;
    top: -2px;
    left: 0;
    width: 3px;
    height: 10px;
    background: var(--accent);
    border-radius: 2px;
    transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 6px rgba(184,135,46,0.5);
}
.dc-hook-playhead.sweep {
    left: 28%;
}
.dc-hook-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.4s ease;
}
.dc-hook-label.shown {
    opacity: 1;
    transform: translateY(0);
}
.dc-hook-sparks {
    position: absolute;
    top: -4px;
    left: 14%;
    width: 20px;
    height: 20px;
}
.dc-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    transition: all 0.5s ease;
}
.dc-spark.fire { opacity: 1; }
.dc-spark-1 { top: 0; left: 4px; }
.dc-spark-1.fire { transform: translate(-4px, -8px); opacity: 0; transition: all 0.6s ease; }
.dc-spark-2 { top: 2px; left: 10px; }
.dc-spark-2.fire { transform: translate(6px, -10px); opacity: 0; transition: all 0.7s ease 0.1s; }
.dc-spark-3 { top: 0; left: 16px; }
.dc-spark-3.fire { transform: translate(2px, -12px); opacity: 0; transition: all 0.5s ease 0.15s; }

/* ══════════════════════════════════════
   IDEAS GENERATOR CARD — Constellation
   ══════════════════════════════════════ */
.dcard-ideas .dcard-visual {
    /* uses base height: 76px */
}
.dc-ideas-constellation {
    position: relative;
    width: 85px;
    height: 60px;
}
.dc-idea-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.dc-idea-lines line {
    transition: opacity 0.6s ease;
}
.dc-idea-node {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(184,135,46,0.3);
    border: 1px solid rgba(184,135,46,0.2);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dc-idea-node.lit {
    opacity: 1;
    transform: scale(1);
    background: rgba(184,135,46,0.5);
    border-color: rgba(184,135,46,0.4);
    box-shadow: 0 0 8px rgba(184,135,46,0.3);
}
.dc-idea-1 { top: 6px; left: 46px; }     /* top center */
.dc-idea-2 { top: 28px; left: 14px; }     /* left */
.dc-idea-3 { top: 28px; left: 76px; }     /* right */
.dc-idea-4 { top: 52px; left: 30px; }     /* bottom-left */
.dc-idea-5 { top: 52px; left: 60px; }     /* bottom-right */

.dc-idea-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dc-idea-center.glow {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 0 6px rgba(184,135,46,0.4));
}

/* ══════════════════════════════════════
   PLAN STATUS CARD — Cinematic
   ══════════════════════════════════════ */
.dash-plan-cin {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
}
.dash-plan-orb {
    flex-shrink: 0;
    animation: dc-orb-pulse 4s ease-in-out infinite;
}
.dash-plan-orb svg {
    display: block;
}
.dash-plan-bar {
    margin-top: 8px;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}
.dash-plan-bar-fill {
    height: 100%;
    width: 0%;
    max-width: 100%;
    background: linear-gradient(90deg, #B8972E, #D4882A);
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Dashboard Responsive ── */
@media (max-width: 768px) {
    .dash-grid-cin {
        grid-template-columns: 1fr 1fr;
    }
    .dcard-create .dcard-visual {
        flex-direction: column;
        gap: 12px;
    }
}
@media (max-width: 480px) {
    .dash-grid-cin {
        grid-template-columns: 1fr;
    }
}

/* ── Dashboard Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .dcard { animation: none; opacity: 1; transform: none; }
    .dash-cin-entrance { animation: none; opacity: 1; transform: none; }
    .dc-orb-ring { animation: none; }
    .dc-orb-glow { animation: none; }
    .dc-cursor { animation: none; }
    .dc-vid { opacity: 1; transform: none; }
    .dc-vid-play { opacity: 0.8; }
    .dc-vid-dur { opacity: 1; }
    .dc-tag { opacity: 1; transform: none; }
    .dc-thumb { opacity: 1; transform: none; }
    .dc-search-text { opacity: 1; animation: none; }
    .dc-thumb-badge { opacity: 1; }
    .dc-sline { opacity: 1; transform: none; }
    .dc-sline-marker { opacity: 1; }
    .dc-hook-zone { background: rgba(184,135,46,0.35); }
    .dc-hook-playhead { left: 28%; }
    .dc-hook-label { opacity: 1; transform: none; }
    .dc-idea-node { opacity: 1; transform: none; }
    .dc-idea-center { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    .dc-idea-lines line { opacity: 0.4 !important; }
}

/* ====================================================================
   DASHBOARD REDESIGN — Section Labels, Workspace Grid, Hero, Library
   ==================================================================== */

/* ── Section Label — uppercase category headers ── */
.dash-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.dash-section-label--inline {
    margin-bottom: 0;
}

/* ── Hero Section — Create card is full-width, more prominent ── */
.dash-section--hero .dcard-create {
    border-color: rgba(184, 151, 46, 0.22);
    background: linear-gradient(135deg, rgba(184, 135, 46, 0.09) 0%, var(--bg-card) 45%, var(--bg-card) 100%);
}
.dash-section--hero .dcard-create .dcard-visual {
    min-height: 80px;
}
.dash-section--hero .dcard-create .dcard-info h3 {
    font-size: 1rem;
    font-weight: 600;
}

/* ── Workspace Grid — 4-column grid for library/management cards ── */
.dash-workspace-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* ── Library Card variant — compact, for workspace navigation cards ── */
.dcard-library {
    padding: 20px;
}
.dcard-library .dcard-visual {
    height: 64px;
}

/* ── Plan card orb — hide the decorative SVG to keep it slim ── */
.dash-plan-orb {
    display: none;
}