* {
    box-sizing: border-box;
}

#mainWrapper {
    min-height: calc(100svh - 64px);
    padding: 68px 0 44px;
    background: var(--tw-bg);
    color: var(--tw-ink);
}

#mainWrapper h1 {
    margin: 0;
    color: var(--tw-ink);
    font-family: inherit;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.12;
    text-align: center;
}

#mainWrapper h1 span { color: var(--tw-accent); }

#mainWrapper .intro {
    margin: 10px 0 24px;
    color: var(--tw-muted);
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
}

#urlForm {
    width: 100%;
    max-width: 840px;
    margin-inline: auto;
}

#urlForm .url-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px;
    gap: 12px;
    align-items: center;
}

#urlForm label,
#downloadForm .quality-label {
    display: block;
    margin-bottom: 8px;
    color: var(--tw-muted);
    font-size: 14px;
    font-weight: 500;
}

#urlForm .input-container {
    position: relative;
    min-width: 0;
}

#urlForm .url-form__note {
    margin: 8px 0 0;
    color: var(--tw-muted);
    font-size: 12px;
    line-height: 1.4;
}

#urlForm input {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 50px 0 16px;
    border: 1px solid var(--tw-line);
    border-radius: 10px;
    background: var(--tw-panel);
    color: var(--tw-ink);
    font: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color .2s ease;
}

#urlForm input::placeholder {
    color: var(--tw-muted);
}

#urlForm input:hover {
    border-color: var(--tw-accent);
}

#urlForm input.is-valid {
    border-color: #8eaf9a;
    background: var(--tw-panel);
}

#urlForm input.is-valid:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--tw-panel) inset;
    -webkit-text-fill-color: var(--tw-ink);
}

html[data-theme="dark"] #urlForm input.is-valid { border-color: #658a73; }

#urlForm input:focus {
    border-color: transparent;
    outline: 2px solid var(--tw-accent);
    outline-offset: 0;
    box-shadow: none;
}

#urlForm input.is-valid:focus { border-color: transparent; outline-color: #8eaf9a; }
html[data-theme="dark"] #urlForm input.is-valid:focus { border-color: transparent; outline-color: #658a73; }

#mainWrapper button:focus-visible {
    outline: 2px solid var(--tw-accent);
    outline-offset: 2px;
}

#urlForm .clear-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--tw-muted);
    font-size: 17px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

#urlForm .clear-btn:hover {
    border-color: var(--tw-line);
    background: var(--tw-soft);
    color: var(--tw-ink);
}

#urlForm .clear-btn[hidden],
#fetchButton[hidden],
#urlFound[hidden],
#formats[hidden],
.video-info[hidden],
.video-info [hidden],
#downloadHelper[hidden],
#downloadStatus[hidden],
#videoPreview[hidden],
#downloadForm .quality-trigger__copy small[hidden],
#downloadForm .quality-trigger[hidden],
#downloadForm .quality-search[hidden],
#downloadForm .quality-menu[hidden],
#downloadForm .quality-option[hidden],
#downloadForm .quality-empty[hidden] {
    display: none !important;
}

#fetchButton,
#downloadButton {
    min-height: 50px;
    padding: 0 21px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

#fetchButton {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding-inline: 12px;
    border: 1px solid #171717;
    background: #171717;
    color: #fff;
    text-overflow: ellipsis;
}

.url-form__found {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 50px;
    color: #42775c;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.url-form__found i { font-size: 15px; }
html[data-theme="dark"] .url-form__found { color: #a4cbb0; }

#fetchButton:not(:disabled):hover {
    border-color: #383838;
    background: #383838;
}

#fetchButton:disabled,
#downloadButton:disabled {
    border-color: #d7d7d7;
    background: #e9e9e9;
    color: #888;
    cursor: default;
}

.video-info {
    margin-top: 18px;
    padding: 10px;
    border: 1px solid var(--tw-line);
    border-radius: 12px;
    background: var(--tw-panel);
}

.video-info__details { display: grid; grid-template-columns: 132px minmax(0, 1fr) 126px; align-items: center; gap: 14px; }
.video-info__details--compact { grid-template-columns: 72px minmax(0, 1fr) auto; }
.video-info__skeleton { display: flex; align-items: center; gap: 14px; }
.video-info__details img,
.video-info__skeleton-image {
    flex: none;
    display: block;
    width: 132px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: var(--tw-soft);
    object-fit: cover;
}
.video-info__copy { display: grid; min-width: 0; gap: 6px; }
.video-info__copy strong {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--tw-ink);
    font-size: 15px;
    line-height: 1.35;
}
.video-info__meta { display: flex; flex-wrap: wrap; gap: 0 8px; min-width: 0; color: var(--tw-muted); font-size: 13px; }
.video-info__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-info__meta span:not([hidden]) + span::before { content: "·"; margin-right: 8px; }
.video-info__side { display: grid; justify-items: end; gap: 2px; min-width: 0; text-align: right; }
.video-info__side > span { color: var(--tw-muted); font-size: 11px; white-space: nowrap; }
.video-info__side > strong { color: var(--tw-ink); font-size: 16px; font-weight: 650; white-space: nowrap; }
.video-info__change { align-self: start; padding: 4px 0; color: var(--tw-accent); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.video-info__change:hover { text-decoration: underline; text-underline-offset: 3px; }
.video-info__change:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 3px; }
.video-info__skeleton-lines { display: grid; flex: 1; gap: 10px; }
.video-info__skeleton-lines span { display: block; width: 76%; height: 13px; border-radius: 4px; }
.video-info__skeleton-lines span:last-child { width: 35%; }
.video-info__skeleton-lines .video-info__loading { width: auto; height: auto; background: none; color: var(--tw-muted); font-size: 12px; animation: none; }
.video-info--square .video-info__details img,
.video-info--square .video-info__skeleton-image { width: 72px; height: 72px; aspect-ratio: 1; }
.video-info__skeleton-image,
.video-info__skeleton-lines span {
    background: linear-gradient(100deg, var(--tw-soft) 15%, var(--tw-line) 40%, var(--tw-soft) 65%);
    background-size: 200% 100%;
    animation: video-info-pulse 1.5s ease-in-out infinite;
}
.video-info__error { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 10px; color: var(--tw-muted); font-size: 14px; }
.video-info__error i { color: var(--tw-accent); font-size: 19px; }
.video-info__retry { margin-left: auto; padding: 7px 10px; border: 1px solid var(--tw-line); border-radius: 7px; background: var(--tw-panel); color: var(--tw-ink); font: inherit; font-size: 12px; cursor: pointer; }
.video-info__retry:hover { background: var(--tw-soft); }
@keyframes video-info-pulse { to { background-position-x: -200%; } }

@media (prefers-reduced-motion: reduce) {
    .video-info__skeleton-image,
    .video-info__skeleton-lines span { animation: none; }
}

#formats {
    width: 100%;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--tw-line);
}

#formats h2 {
    margin: 0 0 16px;
    color: var(--tw-ink);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
}

#downloadForm .quality-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#downloadForm .quality-field {
    min-width: 0;
}

#downloadForm .quality-picker {
    position: relative;
}

#downloadForm .quality-picker:focus-within {
    z-index: 5;
}

#downloadForm .quality-trigger,
#downloadForm .quality-search {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 0 14px;
    border: 1px solid var(--tw-line);
    border-radius: 10px;
    background: var(--tw-panel);
    color: var(--tw-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 400;
}

#downloadForm .quality-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease;
}

#downloadForm .quality-trigger:hover,
#downloadForm .quality-trigger[aria-expanded="true"] {
    border-color: var(--tw-accent);
}

#downloadForm .quality-trigger__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

#downloadForm .quality-trigger__copy strong,
#downloadForm .quality-trigger__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#downloadForm .quality-trigger__copy strong { font-size: 14px; font-weight: 500; }
#downloadForm .quality-trigger__copy small { color: var(--tw-muted); font-size: 11px; }

#downloadForm .quality-trigger i {
    flex: none;
    color: var(--tw-muted);
    font-size: 12px;
}

#downloadForm .quality-search {
    display: flex;
    align-items: center;
    gap: 10px;
    border-color: var(--tw-accent);
    color: var(--tw-muted);
}

#downloadForm .quality-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tw-ink);
    font: inherit;
    font-size: 14px;
}

#downloadForm .quality-search input::placeholder {
    color: var(--tw-muted);
}

#downloadForm .quality-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 10;
    max-height: 240px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--tw-line);
    border-radius: 10px;
    background: var(--tw-panel);
}

#downloadForm .quality-menu.is-upward {
    top: auto;
    bottom: calc(100% + 6px);
}

#downloadForm .quality-option {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tw-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.quality-option__label { font-weight: 500; }
.quality-option__detail { color: var(--tw-muted); font-size: 11px; line-height: 1.35; }

#downloadForm .quality-option:hover,
#downloadForm .quality-option:focus-visible,
#downloadForm .quality-option[aria-selected="true"] {
    background: var(--tw-soft);
}

#downloadForm .quality-empty {
    margin: 0;
    padding: 12px 10px;
    color: var(--tw-muted);
    font-size: 14px;
}

#videoPreview {
    margin-top: 16px;
}

#videoPreview iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 1px solid var(--tw-line);
    border-radius: 10px;
    background: var(--tw-soft);
}

#downloadForm .download-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
}
#downloadForm .download-actions--end { justify-content: flex-end; }

.preview-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid var(--tw-line);
    border-radius: 9px;
    background: var(--tw-panel);
    color: var(--tw-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.preview-toggle:hover { border-color: var(--tw-muted); background: var(--tw-soft); }

.download-actions__group { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.download-actions__group > span { color: var(--tw-muted); font-size: 12px; }

.download-status {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    overflow: hidden;
    margin-top: 16px;
    padding: 13px 15px 16px;
    border: 1px solid var(--tw-line);
    border-radius: 11px;
    background: var(--tw-panel);
}
.download-status__icon { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tw-soft); color: var(--tw-ink); }
.download-status__copy { display: grid; gap: 3px; min-width: 0; }
.download-status__copy strong { color: var(--tw-ink); font-size: 14px; }
.download-status__copy span { color: var(--tw-muted); font-size: 12px; line-height: 1.4; }
.download-status__bar { display: none; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--tw-line); }
.download-status[data-state="progress"] .download-status__bar { display: block; }
.download-status[data-state="progress"] .download-status__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--tw-accent); animation: download-progress 1.6s ease-in-out infinite; }
.download-status[data-state="complete"] { border-color: #a5c7ae; background: #f4faf5; }
.download-status[data-state="complete"] .download-status__icon { background: #dceee0; color: #326846; }
.download-status[data-state="failed"] { border-color: #deb8ae; background: #fff8f5; }
.download-status[data-state="failed"] .download-status__icon { background: #fae8e2; color: #a94733; }
html[data-theme="dark"] .download-status[data-state="complete"] { border-color: #416d50; background: #132119; }
html[data-theme="dark"] .download-status[data-state="failed"] { border-color: #894d41; background: #261713; }
@keyframes download-progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.is-spinning { animation: download-spin 1s linear infinite; }
@keyframes download-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .download-status__bar::before,
    .is-spinning { animation: none !important; }
}

#downloadButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #171717;
    background: #171717;
    color: #fff;
}

#downloadButton:not(:disabled):hover {
    border-color: #383838;
    background: #383838;
}

html[data-theme="dark"] #fetchButton:not(:disabled),
html[data-theme="dark"] #downloadButton:not(:disabled) {
    border-color: var(--tw-ink);
    background: var(--tw-ink);
    color: var(--tw-bg);
}

html[data-theme="dark"] #fetchButton:not(:disabled):hover,
html[data-theme="dark"] #downloadButton:not(:disabled):hover {
    border-color: #d5d5d5;
    background: #d5d5d5;
}

html[data-theme="dark"] #fetchButton:disabled,
html[data-theme="dark"] #downloadButton:disabled {
    border-color: var(--tw-line);
    background: #242424;
    color: #888;
}

@media (max-width: 900px) {
    #mainWrapper { min-height: calc(100svh - 110px); }
}

@media (max-width: 640px) {
    #mainWrapper {
        padding: 38px 0 44px;
    }

    #mainWrapper .intro {
        margin-bottom: 20px;
    }

    #urlForm .url-form__row,
    #downloadForm .quality-grid {
        grid-template-columns: 1fr;
    }

    .url-form__found { justify-content: flex-start; min-height: 34px; }

    #fetchButton,
    #downloadButton {
        width: 100%;
    }

    #downloadForm .download-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        gap: 12px;
    }

    .download-actions__group { align-items: stretch; width: 100%; text-align: center; }
    .preview-toggle { justify-self: start; }
    .video-info__details { grid-template-columns: 108px minmax(0, 1fr); gap: 8px 12px; }
    .video-info__details--compact { grid-template-columns: 72px minmax(0, 1fr); }
    .video-info__side { grid-column: 2; justify-items: start; text-align: left; }
    .video-info__side > strong { font-size: 14px; }
    .video-info__change { padding: 0; }
    .video-info__details img,
    .video-info__skeleton-image { width: 108px; }
}