.submit-modal {
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 0;
    margin: auto;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 20px 50px rgba(18, 32, 74, 0.25);
}

.submit-modal::backdrop { background: rgba(18, 32, 74, 0.45); }

.submit-modal form { padding: 1.25rem 1.5rem 1.5rem; }

.submit-modal__header { display: flex; align-items: center; justify-content: space-between; }
.submit-modal__header h2 { margin: 0; font-size: 1.3rem; color: var(--color-primary); }

.submit-modal__close {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
}

.submit-modal__intro { margin: 0.25rem 0 1rem; font-size: 0.88rem; color: var(--color-text-muted); }

.submit-modal__error {
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    background: var(--color-danger-bg);
    color: #991b1b;
    font-size: 0.9rem;
}

.submit-modal__field { margin-bottom: 0.9rem; }
.submit-modal__field > label { display: block; margin-bottom: 0.3rem; font-size: 0.88rem; font-weight: 600; }

.submit-modal input:not([type=file]),
.submit-modal select,
.submit-modal textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-bg);
    font: inherit;
    font-size: 16px;
    color: inherit;
}

.submit-modal input:focus,
.submit-modal select:focus,
.submit-modal textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(27, 42, 87, 0.12);
}

.submit-modal textarea { resize: vertical; }

.submit-modal__file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.submit-modal__file:hover { border-color: var(--color-primary); color: var(--color-primary); }
.submit-modal__file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.submit-modal__preview { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; }

.submit-modal__rules { margin: 1rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); }
.submit-modal__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }

.submit-toast {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: calc(100vw - 2rem);
    padding: 0.75rem 1.1rem;
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    box-shadow: 0 8px 24px rgba(18, 32, 74, 0.3);
    animation: submit-toast 6s forwards;
}

@keyframes submit-toast {
    0%, 85% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

.submit-modal__hp { position: absolute; left: -9999px; }

/* Same form styles as a full page (long content, e.g. guides) */
.submit-page { width: min(860px, 100%); max-height: none; margin: 1rem 0 3rem; box-shadow: none; }
.submit-page .ql-editor { min-height: 320px; font-size: 1rem; }

.submit-modal__subject:empty { display: none; }
.submit-modal__subject { margin: -0.5rem 0 1rem; font-weight: 700; color: var(--color-primary); }
.submit-modal__radios { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.submit-modal__radios label { display: flex; align-items: flex-start; gap: 0.4rem; font-weight: 400; cursor: pointer; max-width: 100%; }
.submit-modal__radios input[type="radio"] { width: auto; flex: none; margin: 0.25rem 0 0; }
.submit-modal__previews { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.submit-modal__previews:empty { display: none; }

@media (max-width: 768px) {
    .submit-toast { bottom: calc(var(--tabbar-h, 0px) + 1rem); }
}

/* ⓘ with tips sits right after the title */
.submit-modal__header .submit-modal__tips-btn { margin-right: auto; margin-left: 0.5rem; }

.submit-modal .submit-modal__field--check label { display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; font-weight: 600; }
.submit-modal .submit-modal__field--check input[type=checkbox] { flex: none; width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; padding: 0; }
.submit-modal .submit-modal__field--check label span { flex: 1; }
.submit-modal__hint { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--color-text-muted); }