/* One working video, with an explicit original and latest exported version. */
.project-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--color-line); border-radius: .75rem; background: var(--color-surface); color: var(--color-text); font-size: .8125rem; font-weight: 600; }
.project-pill > svg { color: var(--color-primary); }
.project-pill i { width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-primary); }
.project-pill-icon { width: 2.75rem; padding: .5rem; }
.project-pill-icon i { position: absolute; right: .3rem; top: .3rem; }
.header-actions > .project-pill { display: none; }
.has-current-project .mobile-nav { grid-template-columns: repeat(3, 1fr); }
.mobile-nav > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 3rem; padding: 0; border: 0; border-radius: 1.125rem; color: var(--color-primary); background: rgb(36 92 228 / .06); font-size: .75rem; font-weight: 550; }
.current-project-card { display: flex; align-items: center; gap: 1rem; width: min(100%, 42rem); margin: 0 auto 1.75rem; padding: .875rem 1rem; text-align: start; border: 1px solid var(--color-line); border-radius: 1rem; background: var(--color-surface); box-shadow: var(--shadow); }
.project-poster { display: grid; place-items: center; width: 4rem; height: 4rem; flex-shrink: 0; overflow: hidden; border-radius: .625rem; color: var(--color-primary); background: var(--color-tint); }
.project-poster > img { grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; }
.project-poster > svg { grid-area: 1/1; width: 1.5rem; height: 1.5rem; }
.project-poster:has(img:not([hidden])) > svg { display: none; }
.project-card-copy { display: flex; flex: 1; flex-direction: column; gap: .2rem; min-width: 0; }
.project-card-copy > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 600; }
.project-card-copy > span:last-child { color: var(--color-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.project-card-label { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; color: var(--color-muted); font-size: .6875rem; font-weight: 550; }
.project-version { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: .125rem .375rem; border-radius: .375rem; background: var(--color-tint); color: var(--color-primary); font-size: .6875rem; font-weight: 550; line-height: 1.5; }
.project-card-open { display: flex; align-items: center; gap: .375rem; color: var(--color-primary); font-size: .8125rem; font-weight: 600; flex-shrink: 0; }
.project-card-open > svg { width: 1rem; height: 1rem; }
.project-sheet { width: min(calc(100% - 1.5rem), 36rem); }
.project-sheet .auth-header h2 { font-size: 1.25rem; }
.project-sheet .sheet-body { display: flex; flex-direction: column; gap: 1rem; padding-top: .75rem; }
.project-preview { display: grid; place-items: center; min-height: 6rem; border-radius: .75rem; overflow: hidden; background: var(--slate-50); }
.project-preview > video { width: 100%; max-height: min(25dvh, 15rem); object-fit: contain; }
.project-preview > svg { margin: 2rem; width: 2rem; height: 2rem; color: var(--color-muted); }
.project-details { min-width: 0; }
.project-details > strong { display: block; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.4; }
.project-details > p { margin-top: .25rem; color: var(--color-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.project-details > .project-version { margin-top: .5rem; }
.project-versions { display: flex; gap: .25rem; padding: .25rem; border-radius: .75rem; background: var(--slate-50); }
.project-versions > button { flex: 1; min-height: 2.75rem; padding: .5rem; border: 1px solid transparent; border-radius: .5rem; background: transparent; color: var(--color-muted); font-size: .8125rem; font-weight: 550; }
.project-versions > button[aria-pressed="true"] { border-color: var(--color-line); background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 3px rgb(20 30 45 / .05); }
.project-versions > button:disabled { cursor: default; }
.project-next > h3 { font-size: .875rem; }
.project-next > p, .project-note { font-size: .8125rem; line-height: 1.55; color: var(--color-muted); }
.project-next > p { margin-top: .25rem; }
.project-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.project-tools > button { display: flex; align-items: center; gap: .625rem; min-height: 3rem; padding: .625rem .75rem; border: 1px solid var(--color-line); border-radius: .625rem; background: var(--color-surface); text-align: start; font-size: .8125rem; font-weight: 550; }
.project-tools > button > svg { width: 1.125rem; height: 1.125rem; color: var(--color-primary); }
.project-tools > button > span { overflow-wrap: anywhere; }
.project-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.project-footer > p { font-size: .75rem; color: var(--color-muted); }
.project-clear { color: var(--color-danger); }
.project-reset-confirm { grid-column: 1/-1; padding-top: .25rem; }
.project-reset-confirm > strong { font-size: .9375rem; }
.project-reset-confirm > p { margin-top: .375rem; color: var(--color-muted); font-size: .8125rem; }
.project-reset-confirm > div { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .875rem; }
.project-danger { min-height: 2.75rem; padding: .625rem 1rem; border: 0; border-radius: .625rem; color: var(--white); background: var(--color-danger); font-size: .875rem; font-weight: 600; }
.project-sheet[data-confirming] .project-footer > p, .project-sheet[data-confirming] #project-reset { display: none; }
.cut-header-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.cut-workspace-header > strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .current-project-card:hover, .project-tools > button:hover, .project-pill:hover { border-color: var(--slate-400); background: var(--slate-50); } }
@media (min-width: 800px) { .header-actions > .project-pill { display: inline-flex; } }
@media (max-width: 599px) { .current-project-card { gap: .75rem; padding: .75rem; } .project-poster { width: 3.25rem; height: 3.25rem; } .project-card-open { font-size: 0; gap: 0; } .project-card-open > svg { width: 1.25rem; height: 1.25rem; } .cut-header-actions { gap: .25rem; } }