/* Hidden native file input */
input[file-input] {
    display: none;
}

/* Modal overlay */
modaloverlay {
    z-index: 1000;
    background: #00000080;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    position: fixed;
    top: 0;
    left: 0;
}

/* Open overlay state */
modaloverlay[open] {
    opacity: 1;
    pointer-events: auto;
}

/* Closing overlay state */
modaloverlay[closing] {
    opacity: 0;
    pointer-events: none;
}

/* Modal box */
modalbox {
    background: #fff;
    border-radius: 1rem;
    flex-direction: column;
    gap: 0.9375rem;
    padding: 1.25rem;
    display: flex;
    box-shadow: 0 0.625rem 1.5625rem #0003;
    overflow: visible;
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Open modal transition */
modaloverlay[open] modalbox {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Hidden modal transition */
modaloverlay[closing] modalbox,
modaloverlay[modal-swapping] modalbox {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
}

/* Upload modal size */
modalbox[upload-modal] {
    width: 50rem;
    max-height: 80vh;
}

/* Meta modal size */
modalbox[meta-modal] {
    width: 23.75rem;
    max-width: 90vw;
}

/* Access modal size */
modalbox[access-modal] {
    width: min(48rem, 92vw);
    max-height: 86vh;
    overflow: auto;
}

/* Upload list */
uploadlist {
    overflow: auto;
    flex: 1;
    display: block;
    max-height: 60vh;
}

/* Progress rows */
uploadprogress,
processprogress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.8rem;
}

/* Upload progress spacing */
uploadprogress {
    margin-top: 0.5rem;
}

/* Progress bars */
uploadprogress progress[upload-progress],
processprogress progress[process-progress] {
    width: 100%;
    height: 0.6rem;
    border-radius: 999rem;
    overflow: hidden;
    appearance: none;
}

/* WebKit progress track */
uploadprogress progress[upload-progress]::-webkit-progress-bar,
processprogress progress[process-progress]::-webkit-progress-bar {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999rem;
}

/* WebKit progress value */
uploadprogress progress[upload-progress]::-webkit-progress-value,
processprogress progress[process-progress]::-webkit-progress-value {
    background: #2f80ed;
    border-radius: 999rem;
}

/* Gecko progress value */
uploadprogress progress[upload-progress]::-moz-progress-bar,
processprogress progress[process-progress]::-moz-progress-bar {
    background: #2f80ed;
    border-radius: 999rem;
}

/* Upload counter */
uploadcount {
    min-width: 4rem;
    font-weight: 600;
    text-align: right;
}

/* Hidden process row */
processprogress[hidden] {
    display: none;
}

/* Process counter */
processcount {
    min-width: 6rem;
    font-weight: 600;
    text-align: right;
}

/* Overlay action rows */
uploadactions,
modalactions,
confirmactions {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
}

confirmoverlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 1200;
    transition: opacity 0.16s ease;
}

confirmoverlay[open] {
    opacity: 1;
    pointer-events: auto;
}

confirmbox {
    width: 24rem;
    max-width: 90vw;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.625rem 1.5625rem #0003;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

confirmoverlay[open] confirmbox {
    opacity: 1;
    transform: translateY(0) scale(1);
}

confirmbox input[confirm-input] {
    width: auto;
    border: 0.0625rem solid #d7d7d7;
    border-radius: 0.5rem;
    padding: 0.55rem 0.7rem;
}

uploadrow {
    border-bottom: 0.0625rem solid #eee;
    padding: 0.625rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
}

uploadname {
    width: 100%;
    font-weight: bold;
}

selector[upload-lang],
selector[upload-course] {
    width: 9.375rem;
}

input[upload-order] {
    width: 3.75rem;
    padding: 0.5rem;
    border: 0.0625rem solid #ddd;
    border-radius: 0.5rem;
}

input[upload-note] {
    flex: 1;
    padding: 0.5rem;
    border: 0.0625rem solid #ddd;
    border-radius: 0.5rem;
}

select[upload-conflict] {
    padding: 0.5rem;
    border: 0.0625rem solid #ddd;
    border-radius: 0.5rem;
    background: #fff;
    min-width: 8.5rem;
}

uploadlist selector items {
    z-index: 1002;
}

details[upload-diagnostics],
details[upload-preview] {
    width: 100%;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

details[upload-diagnostics] {
    background: #fff1f0;
    border: 0.0625rem solid #ffa39e;
}

details[upload-diagnostics] summary,
details[upload-preview] summary {
    cursor: pointer;
}

details[upload-diagnostics] ul {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
    max-height: 7.5rem;
    overflow: auto;
}

details[upload-diagnostics] button[data-action="upload-jump-line"] {
    border: none;
    background: transparent;
    color: #cf1322;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

details[upload-preview] {
    background: #fafafa;
    border: 0.0625rem solid #eee;
}

pre[code-preview] {
    margin: 0;
    max-height: 12rem;
    overflow: auto;
    background: #fafafa;
    border: 0.0625rem solid #eee;
    border-radius: 0.5rem;
    padding: 0.4rem;
    font-family: var(--font-family-ui);
    line-height: 1.3;
}

previewline {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.5rem;
    padding: 0.2rem 0.4rem;
    border-left: 0.2rem solid transparent;
}

previewline[error-line] {
    background: #fff1f0;
    border-left-color: #ff4d4f;
}

previewline[focus-line] {
    outline: 0.1rem solid #ff4d4f;
}

lineno {
    color: #8c8c8c;
    text-align: right;
}

linetext {
    white-space: pre-wrap;
    word-break: break-word;
}

small[upload-ok],
small[preview-cut] {
    width: 100%;
    display: block;
}

small[upload-ok] {
    color: #389e0d;
}

small[preview-cut] {
    color: #8c8c8c;
}

portal {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2999;
}

items[data-portal="1"] {
    pointer-events: auto;
}

modalbox[meta-modal] metalist {
    max-height: 18rem;
    overflow: auto;
    border: 0.0625rem solid rgba(0, 0, 0, 0.12);
    border-radius: 0.8rem;
    margin: 0.5rem 0 0.8rem;
    background: rgba(255, 255, 255, 0.6);
}

modalbox[meta-modal] metaentry {
    padding: 0.65rem 0.8rem;
    border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

modalbox[meta-modal] metaentry:last-child {
    border-bottom: none;
}

modalbox[meta-modal] metaentry:hover {
    background: rgba(0, 0, 0, 0.05);
}

modalbox[meta-modal] metaempty {
    padding: 0.8rem;
    opacity: 0.7;
}

modalbox[meta-modal] button#meta_add_btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

modalbox[meta-modal] img[lang-card-preview] {
    display: block;
    width: 100%;
    height: 10rem;
    object-fit: cover;
    border-radius: 0.8rem;
    border: 0.0625rem solid rgba(0, 0, 0, 0.12);
    margin: 0.4rem 0 0.8rem;
    background: rgba(0, 0, 0, 0.04);
}

modalbox[meta-modal] img[lang-card-preview][hidden] {
    display: none;
}

modalbox[meta-modal] color-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.4rem 0;
}

modalbox[meta-modal] input[color-picker] {
    width: 3rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 0.6rem;
    border: 0.0625rem solid rgba(0, 0, 0, 0.2);
    background: transparent;
}