body {
    font-family: system-ui, sans-serif;
    max-width: 720px;
    margin: 32px auto;
    padding: 0 16px;
    color: #222
}

h1 {
    font-size: 1.4rem
}

.banner {
    background: #fffbe6;
    border: 1px solid #ecc;
    padding: 12px;
    border-radius: 6px;
    margin: 16px 0
}

#drop {
    border: 2px dashed #aaa;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: background .15s
}

#drop.over {
    background: #f0f8ff;
    border-color: #0af
}

#file {
    display: none
}

input[type=url] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    font-size: .95rem
}

.row {
    display: flex;
    gap: 8px;
    margin: 12px 0;
    flex-wrap: wrap
}

button {
    padding: 8px 16px;
    background: #0066cc;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: .9rem
}

button:disabled {
    background: #999
}

progress {
    width: 100%;
    height: 8px;
    display: none
}

#status {
    margin: 12px 0;
    min-height: 1.4em
}

.err {
    color: #c00
}

textarea {
    width: 100%;
    height: 240px;
    margin-top: 12px;
    font-size: .85rem;
    box-sizing: border-box;
    resize: vertical
}

.dl {
    display: inline-block;
    margin: 4px 4px 0 0;
    padding: 6px 12px;
    background: #f0f0f0;
    color: #0066cc;
    border-radius: 4px;
    text-decoration: none;
    font-size: .85rem;
    border: 1px solid #ccc
}

.opt {
    display: block;
    margin: 4px 0 8px;
    font-size: .9rem;
    color: #444
}

.opt input[type=text] {
    padding: 4px 6px;
    font-size: .9rem
}

#ping {
    font-size: .85rem;
    align-self: center
}

#ping.live {
    color: #127a2e
}

#ping.stale {
    color: #888
}

#cancel {
    background: #c0392b
}

/* Telegram theme. The `tg` class is set by tg.ts only inside Telegram, so the
   ordinary browser palette above is untouched; each var falls back to it. */
.tg body {
    background: var(--tg-bg-color, #fff);
    color: var(--tg-text-color, #222)
}

.tg button {
    background: var(--tg-button-color, #0066cc);
    color: var(--tg-button-text-color, #fff)
}

.tg .dl {
    background: var(--tg-secondary-bg-color, #f0f0f0);
    color: var(--tg-link-color, #0066cc)
}

.tg .opt,
.tg .hint {
    color: var(--tg-hint-color, #444)
}

.tg textarea,
.tg input[type=url] {
    background: var(--tg-secondary-bg-color, #fff);
    color: var(--tg-text-color, #222);
    border: 1px solid var(--tg-hint-color, #ccc)
}

#jobs {
    margin-top: 28px;
    border-top: 1px solid #ddd;
    padding-top: 12px
}

#jobs h2 {
    font-size: 1.05rem;
    margin: 0 0 4px
}

.hint {
    font-size: .85rem;
    color: #666;
    margin: 0 0 10px
}

#jobList {
    list-style: none;
    margin: 0;
    padding: 0
}

#jobList li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: .9rem
}

.job-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.job-meta {
    font-size: .75rem;
    color: #888;
    white-space: nowrap
}

.tg .job-meta,
.tg .job-status {
    color: var(--tg-hint-color, #888)
}

.job-status {
    font-size: .8rem;
    color: #888
}

#jobList button {
    padding: 5px 10px;
    font-size: .8rem;
    white-space: nowrap
}