[x-cloak] {
    display: none !important;
}

.video-studio-section {
    height: min(100dvh, 860px);
    min-height: 620px;
    padding: 0.75rem 0;
    scroll-margin-top: 0;
    background: #f3f1ed !important;
}

.video-studio {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(100% - 2rem, 1120px);
    height: 100%;
    margin: 0 auto;
}

.video-studio__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 48px;
    margin-bottom: 0.5rem;
}

.video-studio__header h2 {
    margin: 0.2rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
}

.video-studio__summary {
    max-width: 30rem;
    margin: 0;
    color: #667078;
    font-size: 0.84rem;
    text-align: right;
}

.video-studio__eyebrow {
    margin: 0;
    color: var(--color-agave-dark, #214d48);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
}

.video-studio__grid {
    position: relative;
    display: grid;
    grid-template-areas: "history creator stage";
    grid-template-columns: 190px minmax(420px, 1.2fr) minmax(280px, 0.8fr);
    min-height: 0;
    overflow: hidden;
    border: 1px solid #d5d1ca;
    border-radius: 8px;
    background: #fbfcfa;
    box-shadow: 0 22px 54px -38px rgba(31, 41, 48, 0.42);
}

.video-history-panel {
    grid-area: history;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid #ddd9d2;
    background: #f8f7f4;
}

.history-container {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
}

.history-container__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 0.85rem;
    border-bottom: 1px solid #e0ddd7;
}

.history-container__header h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: #29333a;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0;
}

.history-container__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.history-container__actions > span {
    color: #8a9196;
    font-size: 0.66rem;
}

.history-list {
    display: grid;
    gap: 0.35rem;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0.6rem;
    overflow-y: auto;
}

.history-list__empty {
    padding: 3rem 0.5rem;
    color: #92999d;
    font-size: 0.78rem;
    text-align: center;
}

.history-item {
    min-width: 0;
}

.history-item__button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 68px;
    gap: 0.55rem;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.55rem;
    background: transparent;
    text-align: left;
}

.history-item__button:hover {
    border-color: #d3cdc3;
    background: #f8faf8;
    transform: none;
}

.history-item.is-active .history-item__button {
    border-color: #8da9a3;
    background: #edf5f2;
    box-shadow: inset 3px 0 0 var(--color-agave, #2f6d64);
}

.history-item__visual {
    display: grid;
    width: 34px;
    height: 42px;
    place-items: center;
    border-radius: 5px;
    color: #536068;
    background: #e8e6e1;
}

.history-item__visual--success {
    color: #296257;
    background: #dcece7;
}

.history-item__visual--processing {
    color: #8b6421;
    background: #f8e9c7;
}

.history-item__visual--failed {
    color: #9d3b45;
    background: #f6dfe2;
}

.history-item__content {
    min-width: 0;
}

.history-item__content strong,
.history-item__content small,
.history-item__content time {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item__content strong {
    color: #263139;
    font-size: 0.76rem;
    font-weight: 700;
}

.history-item__content small,
.history-item__content time {
    margin-top: 0.12rem;
    color: #7b858b;
    font-size: 0.62rem;
}

.history-item__status {
    min-width: 2.1rem;
    border-radius: 999px;
    padding: 0.2rem 0.38rem;
    color: #59636a;
    background: #e7e6e2;
    font-size: 0.6rem;
    font-weight: 800;
    text-align: center;
}

.history-item__status--success {
    color: #23574e;
    background: #d7ebe5;
}

.history-item__status--processing {
    color: #795817;
    background: #f8e3b5;
}

.history-item__status--failed {
    color: #8a2935;
    background: #f4d9dd;
}

.video-studio__workspace {
    grid-area: stage;
    min-width: 0;
    min-height: 0;
    background: #eeece8;
}

.video-stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-width: 0;
    min-height: 0;
    background: #e6eeeb;
}

.video-stage__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #f7f4ee;
}

.video-stage__header > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.video-stage__header h3 {
    margin: 0;
    color: #f7f4ee !important;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
}

.video-stage__status-dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: #d59a28;
    box-shadow: 0 0 0 4px rgba(213, 154, 40, 0.12);
}

.video-stage__selection {
    color: #adb6bb;
    font-size: 0.66rem;
}

.result-area,
.result-shell,
.result-state {
    height: 100%;
    min-height: 0;
}

.result-state {
    overflow: auto;
}

.video-stage-empty,
.video-result-status {
    display: grid;
    height: 100%;
    min-height: 0;
    place-items: center;
    align-content: center;
    gap: 0.55rem;
    padding: 2rem;
    color: #d5dbde;
    text-align: center;
}

.video-stage-empty__icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 0.3rem;
    place-items: center;
    border: 1px solid #4b555b;
    border-radius: 8px;
    color: #d2a64c;
    background: #f5f8f6;
}

.video-stage-empty p,
.video-result-status p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.video-stage-empty > span:last-child,
.video-result-status small {
    color: #929da3;
    font-size: 0.74rem;
}

.video-result-status strong {
    margin-top: 0.35rem;
    color: #e4b95f;
    font-size: 0.72rem;
}

.video-result-status__spinner {
    width: 42px;
    height: 42px;
    margin-bottom: 0.4rem;
    border: 3px solid #465057;
    border-top-color: #e0ad46;
    border-radius: 999px;
    animation: video-studio-spin 0.85s linear infinite;
}

.video-result-status--failed > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #a94350;
    font-weight: 800;
}

.video-result {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 1rem;
}

.video-result__notice {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    color: #a9d8c9;
    font-size: 0.78rem;
}

.video-result__player {
    width: 100%;
    min-height: 0;
    flex: 1;
    border-radius: 6px;
    background: #31504c;
    object-fit: contain;
}

.video-result__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.8rem;
}

.video-result__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    margin: 0;
}

.video-result__meta div {
    display: flex;
    gap: 0.35rem;
    font-size: 0.68rem;
}

.video-result__meta dt {
    color: #88949a;
}

.video-result__meta dd {
    margin: 0;
    color: #e5e9eb;
    font-weight: 700;
}

.video-result__download {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 0.4rem;
    min-height: 36px !important;
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    color: #252b30;
    background: #f0c05d;
    font-size: 0.7rem;
    font-weight: 800;
}

.video-result__prompt {
    margin-top: 0.8rem;
    border-top: 1px solid #3c4449;
    padding-top: 0.75rem;
    color: #bac2c6;
}

.video-result__prompt summary {
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}

.video-result__prompt p {
    margin: 0.6rem 0 0;
    color: #aeb7bb;
    font-size: 0.72rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

.video-studio__creator {
    grid-area: creator;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid #d7d3cc;
    background: #fbfcfa;
}

.video-composer {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0.9rem;
    background: #fbfcfa;
}

.video-composer__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: none;
    margin-bottom: 0.65rem;
}

.video-composer__heading > div:first-child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.video-composer__step {
    color: #263139;
    font-size: 0.8rem;
    font-weight: 800;
}

.video-composer__ready {
    border-radius: 999px;
    padding: 0.18rem 0.45rem;
    color: #2d665c;
    background: #e3f0ec;
    font-size: 0.62rem;
    font-weight: 700;
}

.video-composer__review-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.video-composer__review-actions button {
    min-height: auto !important;
    padding: 0;
    color: #42665f;
    font-size: 0.68rem;
    font-weight: 700;
}

.video-composer__sources {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    gap: 0.6rem;
}

.video-composer__image-source {
    position: relative;
    order: 2;
    flex: none;
    min-height: 132px;
    overflow: hidden;
    border: 1px solid #c9d1cd;
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    background: #f4f7f5;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.video-studio[data-input-mode="image"] .video-composer__image-source {
    order: 1;
    min-height: 150px;
}

.video-composer__image-source.has-image,
.video-studio[data-input-mode="image"] .video-composer__image-source.has-image {
    min-height: 94px;
}

.video-composer__image-source.is-dragging {
    border-color: #b6533e;
    box-shadow: 0 0 0 3px rgba(182, 83, 62, 0.13);
}

.video-composer__image-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

.video-composer__image-heading strong {
    color: #33413f;
    font-size: 0.7rem;
}

.video-composer__image-heading span {
    border-radius: 999px;
    padding: 0.12rem 0.38rem;
    color: #49645e;
    background: #e0e9e5;
    font-size: 0.56rem;
    font-weight: 800;
}

.video-studio[data-input-mode="image"] .video-composer__image-heading span {
    color: #8b3c2d;
    background: #f4ded7;
}

.video-composer__image-empty,
.video-composer__image-selected {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
}

.video-composer__image-empty {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
}

.video-composer__image-selected {
    grid-template-columns: 64px minmax(0, 1fr) auto;
}

.video-composer__image-choose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 68px;
    flex-direction: column;
    gap: 0.3rem;
    border: 1px solid #aebdb7;
    border-radius: 6px;
    padding: 0.65rem;
    color: #345f57;
    background: #edf3f0;
    font-size: 0.72rem;
    font-weight: 800;
}

.video-composer__image-choose-icon {
    width: 28px;
    height: 28px;
    flex: none;
}

.video-composer__image-choose strong {
    line-height: 1.3;
    white-space: nowrap;
}

.video-composer__image-choose:hover:not(:disabled) {
    border-color: #527d75;
    background: #e3ece8;
}

.video-composer__image-copy {
    min-width: 0;
}

.video-composer__image-empty .video-composer__image-copy {
    text-align: center;
}

.video-composer__image-copy p,
.video-composer__image-copy small {
    display: block;
    margin: 0;
    color: #66736f;
    font-size: 0.62rem;
    line-height: 1.45;
}

.video-composer__image-copy small {
    margin-top: 0.1rem;
    color: #858f8b;
    font-size: 0.57rem;
}

.video-composer__image-selected img {
    width: 64px;
    height: 48px;
    border-radius: 5px;
    background: #e5e9e6;
    object-fit: contain;
}

.video-composer__filename {
    overflow: hidden;
    color: #394945 !important;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-composer__image-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.video-composer__image-actions button {
    min-height: auto !important;
    padding: 0.2rem 0;
    color: #396a61;
    font-size: 0.62rem;
    font-weight: 800;
}

.video-composer__image-actions button:last-child {
    color: #984a3a;
}

.video-composer__editor {
    position: relative;
    order: 1;
    min-height: 132px;
    flex: 1;
    overflow: hidden;
    border: 1px solid #cbc8c2;
    border-radius: 8px;
    background: #f8faf8;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.video-studio[data-input-mode="image"] .video-composer__editor {
    order: 2;
}

.video-composer__editor:focus-within {
    border-color: #527d75;
    box-shadow: 0 0 0 3px rgba(47, 109, 100, 0.12);
}

.video-composer__editor textarea {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0 !important;
    padding: 0.8rem 0.85rem 2rem;
    color: #29333a;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.82rem;
    line-height: 1.7;
    resize: none;
}

.video-composer__editor textarea:focus {
    outline: 0;
    box-shadow: none !important;
}

.video-composer__count {
    position: absolute;
    right: 0.7rem;
    bottom: 0.5rem;
    color: #949a9e;
    font-size: 0.62rem;
}

.video-composer__drop-message {
    position: absolute;
    inset: 0;
    display: grid;
    z-index: 3;
    place-items: center;
    border-radius: 7px;
    color: #7f3829;
    background: rgba(248, 228, 219, 0.96);
    font-size: 0.82rem;
    font-weight: 800;
    pointer-events: none;
}

.video-composer__controls {
    display: grid;
    flex: none;
    gap: 1rem;
    margin-top: 0.75rem;
}

.video-composer__settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.video-composer__settings label,
.video-composer__credits {
    display: grid;
    gap: 0.2rem;
    margin: 0;
}

.video-composer__model-summary {
    display: grid;
    grid-column: 1 / -1;
    gap: 0.2rem;
}

.video-composer__model-summary span {
    color: #747e84;
    font-size: 0.59rem;
    font-weight: 700;
}

.video-composer__model-summary strong {
    display: flex;
    align-items: center;
    min-height: 36px;
    border: 1px solid #d4d0ca;
    border-radius: 6px;
    padding: 0 0.55rem;
    color: #344047;
    background: #f7f6f3;
    font-size: 0.68rem;
}

.video-composer__settings label > span,
.video-composer__credits > span {
    color: #747e84;
    font-size: 0.59rem;
    font-weight: 700;
}

.video-composer__settings select {
    width: 100%;
    min-width: 0;
    height: 36px;
    border: 1px solid #d4d0ca;
    border-radius: 6px;
    padding: 0 1.7rem 0 0.55rem;
    color: #344047;
    background: #f7f6f3;
    font-size: 0.68rem;
    font-weight: 700;
}

.video-composer__settings label:first-child select {
    min-width: 0;
}

.video-composer__settings label:first-child {
    grid-column: 1 / -1;
}

.video-composer__dialogue-language {
    grid-column: 1 / -1;
}

.video-composer__credits {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    align-items: center;
    min-width: 0;
    border-top: 1px solid #ebe8e2;
    padding-top: 0.55rem;
}

.video-composer__credits strong {
    text-align: right;
    color: #263139;
    font-size: 0.72rem;
}

.video-composer__actions {
    display: grid;
    gap: 0.5rem;
}

.video-composer__primary,
.video-composer__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    gap: 0.45rem;
    border-radius: 6px;
    padding: 0.65rem 1rem;
    color: #fff;
    background: var(--color-terracotta, #b6533e);
    box-shadow: 0 10px 22px -16px rgba(133, 55, 38, 0.8);
    font-size: 0.76rem;
    font-weight: 800;
}

.video-composer__primary {
    color: #fff;
    background: var(--color-terracotta, #b6533e);
    box-shadow: 0 10px 22px -16px rgba(133, 55, 38, 0.8);
}

.video-composer__secondary {
    border: 1px solid #d4d0ca;
    color: #40504d;
    background: #f7f6f3;
}

.video-composer__primary:hover:not(:disabled) {
    background: var(--color-terracotta-dark, #853726);
    transform: none;
}

.video-composer__secondary:hover:not(:disabled) {
    border-color: #bfc7c3;
    background: #ebe8e2;
}

.video-composer__primary:disabled,
.video-composer__secondary:disabled {
    color: #8c8a85;
    background: #ddd9d2;
    box-shadow: none;
}

.video-composer__spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 999px;
    animation: video-studio-spin 0.8s linear infinite;
}

.video-composer__note {
    flex: none;
    margin: 0.5rem 0 0;
    color: #7d868b;
    font-size: 0.64rem;
}

.video-composer__error {
    margin-top: 0.65rem;
    border: 1px solid #e5bfc4;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    color: #8d303b;
    background: #fff1f2;
    font-size: 0.72rem;
}

@keyframes video-studio-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1120px) {
    .video-studio__grid {
        grid-template-areas:
            "creator stage"
            "history history";
        grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
        grid-template-rows: minmax(0, 1fr) 128px;
    }

    .video-history-panel {
        border-top: 1px solid #d7d3cc;
        border-right: 0;
    }

    .history-container {
        grid-template-rows: 36px minmax(0, 1fr);
    }

    .history-container__header {
        min-height: 36px;
        padding: 0 0.65rem;
    }

    .history-list {
        display: flex;
        gap: 0.4rem;
        padding: 0.35rem;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .history-list__empty {
        flex: 1;
        padding: 1.1rem 0.5rem;
    }

    .history-item {
        flex: 0 0 190px;
    }

    .history-item__button {
        height: 100%;
        min-height: 58px;
    }
}

@media (min-width: 681px) and (max-width: 1120px) {
    .video-composer__sources {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        flex: none;
        min-height: clamp(110px, 18vh, 132px);
    }

    .video-composer__editor,
    .video-composer__image-source,
    .video-studio[data-input-mode="image"] .video-composer__image-source {
        height: clamp(110px, 18vh, 132px);
        min-height: clamp(110px, 18vh, 132px);
    }

    .video-studio[data-input-mode="text"] .video-composer__editor {
        grid-column: 1 / -1;
    }

    .video-composer__image-empty .video-composer__image-copy,
    .video-composer__image-selected .video-composer__image-copy small {
        display: none;
    }

    .video-composer__image-choose {
        min-height: 68px;
        padding: 0.4rem;
        font-size: 0.66rem;
    }

    .video-composer__image-choose strong {
        text-align: center;
        white-space: normal;
    }

    .video-composer__image-selected {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 0.1rem 0.4rem;
    }

    .video-composer__image-selected img {
        grid-row: 1 / 3;
        width: 40px;
        height: 34px;
    }

    .video-composer__image-actions {
        grid-column: 2;
        justify-content: flex-start;
        gap: 0.25rem;
    }

    .video-composer__image-actions button {
        font-size: 0.56rem;
        white-space: nowrap;
    }

    .video-composer__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-height: 720px) and (min-width: 681px) {
    .video-studio-section {
        min-height: 560px;
    }

    .video-studio__header {
        min-height: 40px;
    }

    .video-studio__header h2 {
        font-size: 1.05rem;
    }

    .video-composer {
        padding: 0.7rem;
    }

    .video-composer__editor {
        min-height: 110px;
    }

    .video-composer__controls {
        gap: 0.65rem;
        margin-top: 0.55rem;
    }

    .video-composer__settings {
        gap: 0.4rem;
    }

    .video-composer__note {
        display: none;
    }
}

@media (max-width: 680px) {
    .video-studio-section {
        height: 100dvh;
        min-height: 0;
        padding: 0;
    }

    .video-studio {
        width: 100%;
    }

    .video-studio__header {
        min-height: 44px;
        gap: 0.75rem;
        margin: 0;
        padding: 0.35rem 0.65rem;
    }

    .video-studio__header h2 {
        margin-top: 0.05rem;
        font-size: 0.95rem;
    }

    .video-studio__eyebrow {
        font-size: 0.52rem;
    }

    .video-studio__summary {
        display: none;
    }

    .video-studio__grid {
        grid-template-areas:
            "creator"
            "stage"
            "history";
        grid-template-columns: 1fr;
        grid-template-rows: 60% 22% 18%;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .video-studio__workspace {
        min-height: 0;
    }

    .video-studio__creator {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid #d7d3cc;
        border-left: 0;
    }

    .video-history-panel {
        min-height: 0;
    }

    .history-container {
        grid-template-rows: 32px minmax(0, 1fr);
    }

    .history-container__header {
        min-height: 32px;
    }

    .history-container__header h3 {
        font-size: 0.72rem;
    }

    .history-item {
        flex-basis: 170px;
    }

    .history-item__button {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        min-height: 52px;
        gap: 0.4rem;
        padding: 0.4rem;
    }

    .history-item__visual {
        width: 28px;
        height: 36px;
    }

    .video-stage__header {
        min-height: 38px;
        padding: 0 0.75rem;
    }

    .video-stage-empty,
    .video-result-status {
        gap: 0.3rem;
        padding: 0.75rem;
    }

    .video-stage-empty__icon {
        width: 42px;
        height: 42px;
        margin-bottom: 0.1rem;
    }

    .video-stage-empty p,
    .video-result-status p {
        font-size: 0.78rem;
    }

    .video-stage-empty > span:last-child,
    .video-result-status small {
        font-size: 0.64rem;
    }

    .video-result {
        padding: 0.6rem;
    }

    .video-result__notice {
        margin-bottom: 0.4rem;
    }

    .video-result__footer {
        gap: 0.5rem;
        margin-top: 0.45rem;
    }

    .video-result__download {
        min-height: 32px !important;
        padding: 0.35rem 0.55rem;
    }

    .video-result__prompt {
        margin-top: 0.45rem;
        padding-top: 0.4rem;
    }

    .video-composer {
        padding: 0.65rem;
    }

    .video-composer__heading {
        margin-bottom: 0.45rem;
    }

    .video-composer__review-actions {
        gap: 0.45rem;
    }

    .video-composer__editor {
        min-height: 110px;
    }

    .video-composer__image-source,
    .video-studio[data-input-mode="image"] .video-composer__image-source {
        min-height: 116px;
        padding: 0.45rem 0.55rem;
    }

    .video-composer__image-source.has-image,
    .video-studio[data-input-mode="image"] .video-composer__image-source.has-image {
        min-height: 78px;
    }

    .video-composer__image-heading {
        margin-bottom: 0.3rem;
    }

    .video-composer__image-selected {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .video-composer__image-selected img {
        width: 48px;
        height: 38px;
    }

    .video-composer__editor textarea {
        padding: 0.65rem 0.7rem 1.8rem;
        font-size: 0.76rem;
        line-height: 1.55;
    }

    .video-composer__controls {
        gap: 0.55rem;
        margin-top: 0.55rem;
    }

    .video-composer__settings {
        gap: 0.4rem;
    }

    .video-composer__settings select {
        height: 32px;
    }

    .video-composer__model-summary strong {
        min-height: 32px;
    }

    .video-composer__credits {
        padding-top: 0.35rem;
    }

    .video-composer__primary,
    .video-composer__secondary {
        min-height: 38px;
        padding: 0.5rem 0.75rem;
    }

    .video-composer__note {
        margin-top: 0.35rem;
    }
}

@media (max-width: 420px), (max-height: 650px) {
    .video-composer__note {
        display: none;
    }

    .video-composer__heading {
        gap: 0.35rem;
    }

    .video-composer__ready {
        display: none;
    }

    .video-composer__sources {
        gap: 0.4rem;
    }

    .video-composer__image-copy p {
        display: none;
    }

    .video-composer__image-source,
    .video-studio[data-input-mode="image"] .video-composer__image-source {
        min-height: 104px;
    }

    .video-composer__image-source.has-image,
    .video-studio[data-input-mode="image"] .video-composer__image-source.has-image {
        min-height: 72px;
    }

    .video-composer__image-choose {
        min-height: 54px;
        flex-direction: row;
    }

    .video-composer__image-choose-icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 360px) {
    .video-composer__heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .video-composer__review-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .video-composer__editor {
        min-height: 70px;
    }
}

@media (max-width: 680px) and (max-height: 650px) {
    .video-studio__grid {
        grid-template-rows: 65% 18% 17%;
    }

    .video-stage-empty__icon {
        display: none;
    }

    .video-composer {
        padding: 0.5rem 0.65rem;
    }

    .video-composer__heading {
        margin-bottom: 0.35rem;
    }

    .video-composer__editor {
        min-height: 82px;
    }

    .video-composer__controls {
        gap: 0.4rem;
        margin-top: 0.4rem;
    }

    .video-composer__settings {
        gap: 0.3rem;
    }

    .video-composer__settings select {
        height: 30px;
    }

    .video-composer__primary,
    .video-composer__secondary {
        min-height: 36px;
    }
}

/* Page-scoped visual system: washi white, jade, vermilion, and brass. */
:root {
    --douga-washi: #f7f9f6;
    --douga-paper: #fbfcfa;
    --douga-mist: #e9f0ed;
    --douga-line: #cbd8d3;
    --douga-ink: #24343a;
    --douga-muted: #687874;
    --douga-jade: #267267;
    --douga-jade-deep: #28534f;
    --douga-vermilion: #c8624b;
    --douga-vermilion-deep: #9e4838;
    --douga-brass: #c59632;
}

.site-body {
    color: var(--douga-ink);
    background: var(--douga-washi);
}

.site-header {
    border-top: 2px solid var(--douga-vermilion) !important;
    border-bottom-color: var(--douga-line) !important;
    background: rgba(250, 252, 249, 0.96) !important;
    box-shadow: 0 8px 26px -24px rgba(36, 52, 58, 0.7) !important;
}

.site-brand-mark {
    background: var(--douga-jade) !important;
    box-shadow: 0 7px 18px -12px rgba(38, 114, 103, 0.85) !important;
}

.site-account-button {
    border-color: var(--douga-jade-deep) !important;
    color: #ffffff !important;
    background: var(--douga-jade-deep) !important;
}

.site-account-button:hover {
    border-color: var(--douga-vermilion-deep) !important;
    background: var(--douga-vermilion-deep) !important;
}

.site-primary-nav a,
.site-account-link {
    color: #445752 !important;
}

.site-primary-nav a:hover,
.site-account-link:hover {
    color: var(--douga-vermilion-deep) !important;
}

.site-main > section:first-child {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--douga-line);
    background: #fbfcfa !important;
}

.site-main > section:first-child::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--douga-vermilion);
    content: "";
}

.site-main [class*="tracking-"] {
    letter-spacing: 0 !important;
}

.site-main .text-indigo-700 {
    color: var(--douga-jade) !important;
}

.site-main .bg-indigo-600 {
    color: #ffffff !important;
    background: var(--douga-vermilion) !important;
    box-shadow: 0 10px 22px -17px rgba(158, 72, 56, 0.9);
}

.site-main .hover\:bg-indigo-700:hover {
    background: var(--douga-vermilion-deep) !important;
}

.site-main .text-slate-950,
.site-main .text-slate-800 {
    color: var(--douga-ink) !important;
}

.site-main .text-slate-700 {
    color: #566965 !important;
}

.site-main .bg-slate-50 {
    background: #eef3f0 !important;
}

.site-main .bg-white {
    background: #fbfcfa !important;
}

.site-main .border-slate-200,
.site-main .border-slate-300 {
    border-color: var(--douga-line) !important;
}

.site-main .rounded-xl,
.site-main .rounded-2xl {
    border-radius: 8px !important;
}

.site-main article.rounded-2xl,
.site-main li.rounded-2xl {
    border-color: var(--douga-line) !important;
    background: var(--douga-paper) !important;
    box-shadow: 0 14px 34px -30px rgba(36, 52, 58, 0.75);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.site-main article.rounded-2xl:hover,
.site-main li.rounded-2xl:hover {
    border-color: #91aaa2 !important;
    box-shadow: 0 18px 38px -30px rgba(38, 114, 103, 0.72);
    transform: translateY(-2px);
}

.site-main .bg-slate-900 {
    color: #f7faf8 !important;
    background: var(--douga-jade-deep) !important;
}

.site-main .bg-slate-900 .text-slate-100 {
    color: #dce7e3 !important;
}

.site-main .bg-slate-900 .text-amber-100 {
    color: #f2d99f !important;
}

.site-main .bg-slate-900 .bg-white {
    color: var(--douga-jade-deep) !important;
    background: var(--douga-paper) !important;
}

.video-studio-section {
    border-top: 1px solid #d7e1dd;
    border-bottom: 1px solid #d7e1dd;
    background: #edf3f0 !important;
}

.video-studio__header {
    color: var(--douga-ink);
}

.video-studio__eyebrow {
    color: var(--douga-jade);
    letter-spacing: 0;
}

.video-studio__summary {
    color: var(--douga-muted);
}

.video-studio__grid {
    border-color: #bdcdc7;
    background: var(--douga-paper);
    box-shadow: 0 24px 52px -42px rgba(36, 67, 62, 0.75);
    animation: douga-studio-enter 0.46s ease-out both;
}

.video-studio__creator {
    border-color: var(--douga-line);
    background: var(--douga-paper);
}

.video-composer {
    background: var(--douga-paper);
}

.video-composer__step {
    color: var(--douga-ink);
}

.video-composer__ready {
    color: #205f56;
    background: #e1efea;
}

.video-composer__review-actions button {
    color: var(--douga-jade);
    transition: color 0.16s ease;
}

.video-composer__review-actions button:hover {
    color: var(--douga-vermilion-deep);
}

.video-composer__editor {
    border-color: #bac9c3;
    background: #fcfdfc;
}

.video-composer__editor:focus-within {
    border-color: var(--douga-jade);
    box-shadow: 0 0 0 3px rgba(38, 114, 103, 0.13);
}

.video-composer__image-source.is-dragging {
    border-color: var(--douga-vermilion);
    box-shadow: 0 0 0 3px rgba(200, 98, 75, 0.14);
}

.video-composer__editor textarea {
    color: var(--douga-ink);
}

.video-composer__image-source,
.video-composer__settings select,
.video-composer__model-summary strong {
    border-color: #c5d1cc;
    color: #394c48;
    background: #f5f8f6;
}

.video-composer__image-choose:hover:not(:disabled) {
    border-color: var(--douga-jade);
    color: var(--douga-jade-deep);
    background: #e8f1ed;
}

.video-composer__settings label > span,
.video-composer__model-summary span,
.video-composer__credits > span,
.video-composer__note,
.video-composer__filename {
    color: var(--douga-muted);
}

.video-composer__credits {
    border-top-color: #dce5e1;
}

.video-composer__credits strong {
    color: var(--douga-ink);
}

.video-composer__primary {
    color: #ffffff;
    background: var(--douga-vermilion);
    box-shadow: 0 12px 24px -18px rgba(158, 72, 56, 0.9);
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.video-composer__secondary {
    border-color: #c5d1cc;
    color: var(--douga-jade-deep);
    background: #f5f8f6;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.video-composer__primary:hover:not(:disabled) {
    background: var(--douga-vermilion-deep);
    box-shadow: 0 15px 28px -18px rgba(158, 72, 56, 0.95);
    transform: translateY(-1px);
}

.video-composer__secondary:hover:not(:disabled) {
    border-color: var(--douga-jade);
    background: #e8f1ed;
}

.video-composer__primary:disabled,
.video-composer__secondary:disabled {
    color: #77827e;
    background: #dce3e0;
}

.video-composer__error {
    border-color: #e1b5ab;
    color: #893d30;
    background: #fff4f1;
}

.video-studio__workspace {
    background: #e6eeeb;
}

.video-stage {
    background-color: #e6eeeb;
    background-image:
        linear-gradient(rgba(69, 105, 98, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69, 105, 98, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
}

.video-stage__header {
    border-bottom-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    background: var(--douga-jade-deep);
}

.video-stage__header h3 {
    color: #ffffff !important;
}

.video-stage__status-dot {
    background: var(--douga-brass);
    box-shadow: 0 0 0 4px rgba(197, 150, 50, 0.17);
    animation: douga-signal 2.4s ease-in-out infinite;
}

.video-stage__selection {
    color: #d9e7e2;
}

.video-stage-empty,
.video-result-status {
    color: #38514c;
}

.video-stage-empty__icon {
    border-color: #a8bdb5;
    color: var(--douga-vermilion);
    background: rgba(248, 250, 248, 0.9);
    box-shadow: 0 14px 28px -24px rgba(38, 83, 79, 0.85);
}

.video-stage-empty > span:last-child,
.video-result-status small {
    color: #6f817c;
}

.video-result-status strong,
.video-result__notice {
    color: var(--douga-jade-deep);
}

.video-result-status__spinner {
    border-color: #b8c9c3;
    border-top-color: var(--douga-vermilion);
}

.video-result-status--failed > span {
    color: #ffffff;
    background: #b34f43;
}

.video-result__player {
    background: #31504c;
}

.video-result__meta dt,
.video-result__prompt p {
    color: #647772;
}

.video-result__meta dd,
.video-result__prompt summary {
    color: var(--douga-ink);
}

.video-result__prompt {
    border-top-color: #c7d4cf;
    color: var(--douga-ink);
}

.video-result__download {
    color: #ffffff;
    background: var(--douga-vermilion);
}

.video-history-panel {
    border-color: var(--douga-line);
    background: #f5f8f6;
}

.history-container__header {
    border-bottom-color: #d6e0dc;
    background: #eef4f1;
}

.history-container__header h3,
.history-item__content strong {
    color: var(--douga-ink);
}

.history-container__actions > span,
.history-item__content small,
.history-item__content time,
.history-list__empty {
    color: var(--douga-muted);
}

.history-item__button {
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.history-item__button:hover {
    border-color: #aebfb8;
    background: #f8faf8;
}

.history-item.is-active .history-item__button {
    border-color: #73a096;
    background: #e3efeb;
    box-shadow: inset 3px 0 0 var(--douga-jade);
}

.history-item__visual {
    color: #536b66;
    background: #e2e9e6;
}

.history-item__visual--success,
.history-item__status--success {
    color: #235d54;
    background: #d9ebe5;
}

.history-item__visual--processing,
.history-item__status--processing {
    color: #7a5b20;
    background: #f5e7c5;
}

.history-item__visual--failed,
.history-item__status--failed {
    color: #8e3b3f;
    background: #f4dedc;
}

@keyframes douga-studio-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes douga-signal {
    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(197, 150, 50, 0.14);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(197, 150, 50, 0.04);
    }
}

@media (max-width: 680px) {
    .video-composer__sources {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        flex: none;
        min-height: 110px;
    }

    .video-composer__editor,
    .video-composer__image-source,
    .video-studio[data-input-mode="image"] .video-composer__image-source {
        height: 110px;
        min-height: 110px;
    }

    .video-studio[data-input-mode="text"] .video-composer__editor {
        grid-column: 1 / -1;
    }

    .video-composer__image-empty .video-composer__image-copy,
    .video-composer__image-selected .video-composer__image-copy small {
        display: none;
    }

    .video-composer__image-choose {
        min-height: 62px;
        flex-direction: column;
        padding: 0.35rem;
        font-size: 0.62rem;
    }

    .video-composer__image-choose strong {
        text-align: center;
        white-space: normal;
    }

    .video-composer__image-selected {
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 0.1rem 0.3rem;
    }

    .video-composer__image-selected img {
        grid-row: 1 / 3;
        width: 32px;
        height: 28px;
    }

    .video-composer__image-actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .video-composer__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) and (max-height: 650px) {
    .video-studio__grid {
        grid-template-rows: 75% 14% 11%;
    }

    .video-composer__sources {
        min-height: 88px;
    }

    .video-composer__editor,
    .video-composer__image-source,
    .video-studio[data-input-mode="image"] .video-composer__image-source {
        height: 88px;
        min-height: 88px;
    }

    .video-stage-empty,
    .video-result-status {
        padding: 0.25rem;
    }

    .video-stage-empty > span:last-child,
    .video-result-status small {
        display: none;
    }
}

@media (max-width: 360px) {
    .video-composer__sources {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .video-composer__image-actions {
        gap: 0.25rem;
    }

    .video-composer__image-actions button {
        font-size: 0.52rem;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-studio__grid,
    .video-stage__status-dot,
    .site-main article.rounded-2xl,
    .site-main li.rounded-2xl,
    .video-composer__primary {
        animation: none !important;
        transition: none !important;
    }
}