/* -----------------------------
       Prevent layout jitter (autosave + notice)
    ------------------------------ */
    .card-head {
      align-items: flex-start;
      gap: 0.9rem;
    }

    .autosave-row {
      margin-top: 0.35rem;
    }

    #autosave-pill {
      display: block;
      width: 100%;
      text-align: left;
      height: 1.25rem;
      line-height: 1.25rem;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      will-change: auto;
      transform: translateZ(0);
      user-select: none;
      transition: none !important;
      animation: none !important;
    }

    .submission-notice {
      margin-top: 0.55rem;
      line-height: 1.45;
      min-height: 2.9em;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      transition: none !important;
      animation: none !important;
    }

    /* -----------------------------
       Page polish
    ------------------------------ */
    body.page-submit-problem {
      --sp-surface-0: color-mix(in srgb, var(--card) 78%, var(--page-bg-soft));
      --sp-surface-1: color-mix(in srgb, var(--card) 88%, var(--page-bg-soft));
      --sp-surface-2: color-mix(in srgb, var(--card) 94%, var(--page-bg-soft));
      --sp-surface-3: color-mix(in srgb, var(--card) 98%, var(--page-bg-soft));
      --sp-surface-accent: linear-gradient(180deg,
          color-mix(in srgb, var(--accent-soft) 70%, var(--card)),
          color-mix(in srgb, var(--card) 94%, var(--page-bg-soft)));
      --sp-surface-accent-strong: linear-gradient(180deg,
          color-mix(in srgb, var(--accent-soft) 95%, var(--card)),
          color-mix(in srgb, var(--card) 92%, var(--page-bg-soft)));
      --sp-surface-info: linear-gradient(180deg,
          color-mix(in srgb, var(--border-soft) 18%, var(--card)),
          color-mix(in srgb, var(--card) 92%, var(--page-bg-soft)));
      --sp-surface-danger: linear-gradient(180deg,
          color-mix(in srgb, #ef4444 10%, var(--card)),
          color-mix(in srgb, var(--card) 96%, var(--page-bg-soft)));
      --sp-border-soft: var(--border-soft);
      --sp-border-strong: color-mix(in srgb, var(--border-soft) 78%, var(--text-soft));
      --sp-border-accent: color-mix(in srgb, var(--accent) 32%, var(--border-soft));
      --sp-shadow: var(--shadow-soft);
      --sp-shadow-accent: 0 14px 30px color-mix(in srgb, var(--accent) 16%, transparent);
      --sp-highlight: inset 0 1px 0 color-mix(in srgb, var(--page-bg-soft) 72%, transparent);
      --sp-highlight-soft: inset 0 1px 0 color-mix(in srgb, var(--page-bg-soft) 46%, transparent);
      --sp-placeholder: color-mix(in srgb, var(--text-soft) 84%, var(--card));
      --sp-danger: #b91c1c;
      --sp-danger-soft: color-mix(in srgb, #ef4444 14%, var(--card));
      background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 8%, transparent), transparent 22%),
        radial-gradient(circle at top right, color-mix(in srgb, var(--border-soft) 18%, transparent), transparent 20%),
        linear-gradient(180deg, var(--page-bg-soft), var(--page-bg));
    }

    body.page-submit-problem main {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 2rem 1.4rem 3rem;
    }

    body.page-submit-problem .submit-top {
      margin-top: 0;
      padding-top: 0;
    }

    body.page-submit-problem #submit-problem {
      width: 100%;
      max-width: none !important;
      margin-left: 0 !important;
    }

    .section-title {
      letter-spacing: 0.08em;
    }

    .section-subtitle {
      max-width: 760px;
      line-height: 1.7;
    }

    .content-block {
      border-radius: 1.35rem;
      border: 1px solid var(--sp-border-soft);
      background: var(--sp-surface-1);
      box-shadow: var(--sp-shadow), var(--sp-highlight-soft);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .content-block h2 {
      font-size: 1.08rem;
      line-height: 1.3;
      color: var(--text-main);
    }

    .clean-list {
      line-height: 1.75;
    }

    .problem-link {
      font-weight: 700;
    }

    .mini-btn {
      border-radius: 999px;
      padding: 0.58rem 0.95rem;
      font-weight: 700;
    }

    /* -----------------------------
       Core card styling
    ------------------------------ */
    .form-card#submit-problem {
      border-radius: 1.55rem;
      border: 1px solid var(--sp-border-soft);
      background: var(--sp-surface-accent);
      box-shadow: var(--sp-shadow), var(--sp-highlight);
      overflow: hidden;
      position: relative;
      isolation: isolate;
    }

    .form-card#submit-problem::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 140px;
      background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--border-soft) 26%, transparent), transparent 26%);
      pointer-events: none;
      z-index: 0;
    }

    .form-card#submit-problem .card-inner {
      position: relative;
      z-index: 1;
      padding: 1.1rem 1.1rem 1.2rem;
    }

    .card-head-left {
      display: flex;
      align-items: flex-start;
      gap: 0.95rem;
      min-width: 0;
    }

    .spark {
      width: 3.15rem;
      height: 3.15rem;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border: 1px solid var(--sp-border-accent);
      background: linear-gradient(180deg, var(--sp-surface-3), color-mix(in srgb, var(--accent-soft) 100%, var(--card)));
      box-shadow: var(--sp-shadow-accent), var(--sp-highlight);
      color: var(--accent);
      font-weight: 900;
      font-size: 1.18rem;
    }

    .card-title {
      margin: 0;
      font-size: 1.65rem;
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: var(--text-main);
    }

    .card-sub {
      margin-top: 0.35rem;
      color: var(--text-soft);
      line-height: 1.62;
      max-width: 60ch;
      font-size: 0.98rem;
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 0.7rem;
    }

    .tiny-pill {
      display: inline-flex;
      align-items: center;
      padding: 0.42rem 0.78rem;
      border-radius: 999px;
      border: 1px solid var(--sp-border-strong);
      background: var(--sp-surface-0);
      color: var(--text-soft);
      font-size: 0.82rem;
      font-weight: 700;
      line-height: 1;
      box-shadow: var(--sp-highlight);
    }

    .tiny-pill.good {
      border-color: var(--sp-border-accent);
      background: color-mix(in srgb, var(--accent-soft) 100%, var(--card));
      color: var(--accent);
    }

    .submission-notice,
    .field-help,
    .field-meta {
      color: var(--text-soft);
    }

    /* -----------------------------
       Form rhythm + input system
    ------------------------------ */
    .field-group {
      margin-top: 1rem;
    }

    .field-label {
      display: block;
      margin-bottom: 0.42rem;
      color: var(--text-main);
      font-weight: 800;
      font-size: 0.97rem;
      letter-spacing: -0.01em;
    }

    .field-help {
      margin-top: 0.35rem;
      line-height: 1.5;
      font-size: 0.9rem;
    }

    .field-meta {
      margin-top: 0.45rem;
      display: flex;
      gap: 0.75rem;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .counter {
      font-weight: 700;
      color: var(--text-main);
    }

    /* Avoid iOS zoom and give unified styling */
    input[type="text"],
    input[type="url"],
    input[type="number"],
    input[type="datetime-local"],
    select,
    textarea {
      font-size: 16px;
    }

    #submit-problem input[type="text"],
    #submit-problem input[type="url"],
    #submit-problem input[type="number"],
    #submit-problem input[type="datetime-local"],
    #submit-problem select,
    #submit-problem textarea {
      width: 100%;
      box-sizing: border-box;
      border-radius: 1rem;
      border: 1px solid var(--sp-border-strong);
      background: var(--sp-surface-2);
      color: var(--text-main);
      padding: 0.9rem 1rem;
      line-height: 1.5;
      box-shadow: var(--sp-highlight-soft), var(--sp-shadow);
      transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
    }

    #submit-problem textarea {
      resize: vertical;
      min-height: 120px;
    }

    #submit-problem input[type="datetime-local"] {
      min-height: 52px;
    }

    #submit-problem input::placeholder,
    #submit-problem textarea::placeholder {
      color: var(--sp-placeholder);
      opacity: 1;
    }

    #submit-problem input[type="text"]:focus,
    #submit-problem input[type="url"]:focus,
    #submit-problem input[type="number"]:focus,
    #submit-problem input[type="datetime-local"]:focus,
    #submit-problem textarea:focus,
    #submit-problem select:focus,
    #submit-problem .tagbox-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow:
        0 0 0 4px var(--focus-ring),
        var(--sp-shadow-accent);
      background: var(--sp-surface-3);
    }

    .select-nice {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 3rem !important;
      background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
      background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px);
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
    }

    .title-preview {
      margin-top: 0.65rem;
      padding: 0.8rem 0.9rem;
      border-radius: 1rem;
      border: 1px solid var(--sp-border-soft);
      background: var(--sp-surface-1);
      box-shadow: var(--sp-highlight);
    }

    .title-preview .label {
      font-size: 0.8rem;
      font-weight: 800;
      text-transform: none;
      color: var(--text-soft);
      margin-bottom: 0.35rem;
    }

    #title-preview-render {
      color: var(--text-main);
      font-weight: 700;
      line-height: 1.45;
      min-height: 1.5rem;
    }

    /* -----------------------------
       Challenge sections
    ------------------------------ */
    #challenge-fields,
    #paid-challenge-fields {
      margin-top: 1rem;
    }

    #challenge-fields {
      padding: 1rem;
      border-radius: 1.15rem;
      border: 1px solid var(--sp-border-soft);
      background: var(--sp-surface-info);
      box-shadow: var(--sp-shadow), var(--sp-highlight);
    }

    #paid-challenge-fields {
      padding: 0.95rem;
      border-radius: 1rem;
      border: 1px solid var(--sp-border-accent);
      background: var(--sp-surface-accent-strong);
      box-shadow: var(--sp-shadow-accent), var(--sp-highlight);
    }

    /* -----------------------------
       Checkbox rows
    ------------------------------ */
    #submit-problem input[type="checkbox"] {
      width: 1.1rem;
      height: 1.1rem;
      flex: 0 0 auto;
      accent-color: var(--accent);
    }

    #submit-problem label[for="is-paid-challenge"],
    #submit-problem label[for="problem-anon"] {
      display: inline-block;
      line-height: 1.4;
    }

    /* -----------------------------
       Attachment area
    ------------------------------ */
    #challenge-attachment-input {
      flex: 1 1 230px;
      min-width: 220px;
      padding: 0.78rem 0.85rem !important;
      background: var(--sp-surface-2);
    }

    .attachment-link-entry {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0.6rem;
      align-items: center;
      margin-top: 0.6rem;
    }

    #manual-attachment-url {
      min-height: 88px;
      resize: vertical;
    }

    #attachment-upload-status {
      min-height: 1.2rem;
    }

    #attachment-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    #attachment-list .prob-tag {
      border: 1px solid var(--sp-border-soft);
      background: var(--sp-surface-2);
      color: var(--text-main);
      border-radius: 999px;
      padding: 0.48rem 0.74rem;
      font-size: 0.82rem;
      font-weight: 700;
      line-height: 1.2;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-shadow: var(--sp-highlight);
      transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    }

    #attachment-list .prob-tag:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, #ef4444 35%, var(--border-soft));
      background: var(--sp-danger-soft);
    }

    /* -----------------------------
       Tag area
    ------------------------------ */
    .tagbox {
      margin-top: 0.55rem;
      position: relative;
      padding: 0.9rem;
      border-radius: 1.1rem;
      border: 1px solid var(--sp-border-soft);
      background: var(--sp-surface-1);
      box-shadow: var(--sp-highlight), var(--sp-shadow);
    }

    .tagbox-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }

    .tagbox-input {
      width: 100%;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 0.75rem 0 0.45rem !important;
      font-size: 1rem;
      color: var(--text-main);
    }

    .tagbox-input::placeholder {
      color: var(--text-soft);
    }

    .tagbox-meta {
      display: flex;
      gap: 0.75rem;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 0.3rem;
      font-size: 0.84rem;
      color: var(--text-soft);
    }

    .tagpill {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      padding: 0.42rem 0.65rem;
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent-soft) 100%, var(--card));
      border: 1px solid var(--sp-border-accent);
      color: var(--accent);
      font-size: 0.83rem;
      font-weight: 800;
      line-height: 1;
      box-shadow: var(--sp-highlight-soft);
    }

    .tagpill button {
      border: none;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font: inherit;
      padding: 0;
      line-height: 1;
    }

    .tagbox-menu {
      position: absolute;
      left: 0.9rem;
      right: 0.9rem;
      top: calc(100% - 0.2rem);
      z-index: 25;
      display: none;
      border: 1px solid var(--sp-border-soft);
      border-radius: 0.95rem;
      background: var(--sp-surface-3);
      box-shadow: var(--sp-shadow);
      overflow: hidden;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .tagbox-menu.open {
      display: block;
    }

    .tagopt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
      padding: 0.72rem 0.85rem;
      cursor: pointer;
      transition: background 0.12s ease;
    }

    .tagopt:hover,
    .tagopt[aria-selected="true"] {
      background: color-mix(in srgb, var(--accent-soft) 100%, var(--card));
    }

    .tagopt small {
      color: var(--text-soft);
      font-weight: 700;
    }

    .tag-suggest-wrap {
      margin-top: 0.7rem;
      padding: 0.75rem 0.8rem;
      border-radius: 1rem;
      border: 1px dashed var(--sp-border-strong);
      background: var(--sp-surface-0);
    }

    .tag-suggest-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.7rem;
      flex-wrap: wrap;
      margin-bottom: 0.65rem;
      color: var(--text-soft);
      font-size: 0.86rem;
    }

    .tag-suggest-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }

    .tag-chip {
      border: 1px solid var(--sp-border-soft);
      background: var(--sp-surface-2);
      color: var(--text-soft);
      border-radius: 999px;
      padding: 0.46rem 0.72rem;
      font-weight: 700;
      font-size: 0.83rem;
      line-height: 1;
      cursor: pointer;
      transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
    }

    .tag-chip:hover {
      transform: translateY(-1px);
      border-color: var(--sp-border-accent);
      color: var(--text-main);
    }

    .tag-chip.active {
      border-color: var(--sp-border-accent);
      background: color-mix(in srgb, var(--accent-soft) 100%, var(--card));
      color: var(--accent);
    }

    .tag-suggest-note {
      margin-top: 0.6rem;
      color: var(--text-soft);
      line-height: 1.55;
      font-size: 0.87rem;
    }

    /* -----------------------------
       LaTeX tools
    ------------------------------ */
    .latex-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      align-items: center;
      margin-top: 0.6rem;
      padding: 0.55rem 0.65rem;
      border-radius: 1rem;
      border: 1px solid var(--sp-border-soft);
      background: var(--sp-surface-0);
    }

    .latex-toolbar-label {
      white-space: nowrap;
      opacity: 0.9;
      margin-right: 0.25rem;
      font-weight: 800;
      color: var(--text-main);
    }

    .latex-btn {
      border-radius: 999px;
      padding: 0.52rem 0.82rem;
      line-height: 1;
      white-space: nowrap;
      touch-action: manipulation;
      border: 1px solid var(--sp-border-strong);
      background: linear-gradient(180deg, var(--sp-surface-3), var(--sp-surface-1));
      color: var(--text-soft);
      font-weight: 800;
      font-size: 0.86rem;
      box-shadow: var(--sp-highlight), var(--sp-shadow);
      transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
      cursor: pointer;
    }

    .latex-btn:hover {
      transform: translateY(-1px);
      border-color: var(--sp-border-accent);
      background: linear-gradient(180deg, var(--sp-surface-3), color-mix(in srgb, var(--accent-soft) 100%, var(--card)));
      color: var(--text-main);
      box-shadow: var(--sp-highlight), var(--sp-shadow-accent);
    }

    /* -----------------------------
       Editor grid
    ------------------------------ */
    .editor-grid {
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      border-radius: 1.2rem;
      border: 1px solid var(--sp-border-soft);
      background: linear-gradient(180deg, var(--sp-surface-1), var(--sp-surface-2));
      box-shadow: var(--sp-highlight), var(--sp-shadow);
    }

    .editor-grid .eg-track {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      width: 100%;
      max-width: 100%;
    }

    .editor-grid .eg-panel {
      min-width: 0;
      padding: 0.95rem;
    }

    .editor-grid .eg-panel:first-child {
      border-right: 1px solid var(--sp-border-soft);
    }

    #problem-body-input {
      width: 100%;
      box-sizing: border-box;
      min-height: 320px;
      resize: vertical;
      border-radius: 1rem;
      line-height: 1.6;
      tab-size: 2;
      background: var(--sp-surface-3);
    }

    .preview-card {
      border-radius: 1rem;
      border: 1px solid var(--sp-border-soft);
      background: var(--sp-surface-2);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 320px;
      box-shadow: var(--sp-highlight), var(--sp-shadow);
    }

    .preview-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.78rem 0.95rem;
      border-bottom: 1px solid var(--sp-border-soft);
      user-select: none;
      background: var(--sp-surface-0);
    }

    .preview-head strong {
      font-size: 0.98rem;
      color: var(--text-main);
    }

    .preview-head span {
      color: var(--text-soft);
      font-weight: 700;
      font-size: 0.86rem;
    }

    #problem-preview {
      padding: 0.92rem 0.95rem;
      overflow: auto;
      max-width: 100%;
      min-height: 0;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      word-break: break-word;
      line-height: 1.65;
      color: var(--text-main);
    }

    #problem-preview .preview-text {
      white-space: pre-wrap;
    }

    #problem-preview mjx-container[jax="SVG"][display="true"] {
      display: block;
      overflow-x: auto;
      overflow-y: hidden;
      max-width: 100%;
    }

    /* -----------------------------
       Converter panel
    ------------------------------ */
    .sp-converter-panel {
      margin-top: 0.85rem;
      border: 1px solid var(--sp-border-soft);
      border-radius: 1.1rem;
      background: linear-gradient(180deg, var(--sp-surface-1), var(--sp-surface-2));
      padding: 0.85rem;
      box-shadow: var(--sp-highlight), var(--sp-shadow);
    }

    .editor-grid > .sp-converter-panel {
      margin: 0.9rem 0.95rem 0.95rem;
      grid-column: 1 / -1;
    }

    .sp-converter-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.55rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }

    .sp-converter-title {
      margin: 0;
      font-size: 1rem;
      font-weight: 900;
      color: var(--text-main);
      letter-spacing: -0.01em;
    }

    .sp-converter-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 0.8rem;
      align-items: start;
    }

    .sp-converter-col {
      min-width: 0;
    }

    .sp-converter-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 0.5rem;
    }

    .sp-converter-file-row {
      margin-top: 0.45rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      padding: 0.55rem 0.65rem;
      border: 1px dashed var(--sp-border-strong);
      border-radius: 0.85rem;
      background: var(--sp-surface-1);
    }

    .sp-converter-file-input {
      display: none;
    }

    .sp-converter-file-name {
      font-size: 0.82rem;
      color: var(--text-soft);
      max-width: 22ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sp-converter-format-row {
      margin-top: 0.55rem;
      padding: 0.6rem 0.7rem;
      border: 1px solid var(--sp-border-accent);
      border-radius: 0.9rem;
      background: var(--sp-surface-accent-strong);
      display: flex;
      gap: 0.55rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .sp-converter-format-label {
      font-size: 0.8rem;
      font-weight: 800;
      color: var(--text-main);
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    .sp-converter-format-select {
      min-width: 220px;
      border-radius: 0.7rem;
      border: 1px solid var(--sp-border-accent);
      background: var(--sp-surface-3);
      color: var(--text-main);
      padding: 0.45rem 0.6rem;
      font-size: 0.84rem;
      font-weight: 700;
    }

    .sp-converter-format-select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--focus-ring);
    }

    .sp-converter-panel.is-collapsed .sp-converter-body {
      display: none;
    }

    #sp_latexStatus {
      margin-top: 0.55rem;
      min-height: 1.2rem;
      font-size: 0.84rem;
      color: var(--text-soft);
    }

    #sp_latexPreview {
      margin-top: 0.5rem;
      max-height: 210px;
      overflow: auto;
      border-radius: 0.85rem;
      border: 1px solid var(--sp-border-soft);
      background: var(--sp-surface-1);
      padding: 0.55rem 0.65rem;
      -webkit-overflow-scrolling: touch;
    }

    #sp_latexPreview .md-math {
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      margin: 0.22rem 0;
    }

    #sp_latexExplain {
      margin-top: 0.55rem;
      border: 1px solid var(--sp-border-soft);
      border-radius: 0.85rem;
      background: var(--sp-surface-1);
      padding: 0.6rem 0.7rem;
      font-size: 0.84rem;
      color: var(--text-soft);
      display: none;
    }

    #sp_latexExplain .converter-explain-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.45rem;
      flex-wrap: wrap;
      margin-bottom: 0.35rem;
    }

    #sp_latexExplain .converter-explain-title {
      display: inline-block;
      font-weight: 800;
      color: var(--text-main);
      margin: 0;
    }

    #sp_latexExplain ul {
      margin: 0;
      padding-left: 1rem;
    }

    #sp_latexExplain li {
      margin: 0.18rem 0;
    }

    /* -----------------------------
       Buttons and banners
    ------------------------------ */
    #submit-btn.btn.btn-primary {
      width: 100%;
      margin-top: 1.15rem;
      min-height: 58px;
      border: none;
      border-radius: 999px;
      font-size: 1.03rem;
      font-weight: 900;
      letter-spacing: -0.01em;
      background: linear-gradient(180deg,
          color-mix(in srgb, var(--accent) 88%, var(--page-bg-soft)),
          var(--accent) 100%);
      color: var(--text-main);
      box-shadow: var(--sp-shadow-accent), inset 0 1px 0 color-mix(in srgb, var(--page-bg-soft) 26%, transparent);
      transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
    }

    #submit-btn.btn.btn-primary:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 24%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--page-bg-soft) 26%, transparent);
      filter: saturate(1.02);
    }

    #submit-btn.btn.btn-primary:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }

    .error-banner {
      display: none;
      margin-top: 0.85rem;
      padding: 0.85rem 0.95rem;
      border-radius: 1rem;
      border: 1px solid color-mix(in srgb, #ef4444 24%, var(--border-soft));
      background: var(--sp-surface-danger);
      color: var(--sp-danger);
      box-shadow: 0 8px 18px color-mix(in srgb, #ef4444 10%, transparent);
    }

    .error-banner.show {
      display: block;
    }

    .error-banner .title {
      font-weight: 900;
      margin-bottom: 0.2rem;
    }

    .error-banner .body {
      line-height: 1.5;
    }

    /* -----------------------------
       Mobile edit/preview tabs
    ------------------------------ */
    .mobile-edit-tabs {
      display: none;
      gap: 0.55rem;
      flex-wrap: wrap;
      margin-top: 0.7rem;
      margin-bottom: 0.95rem;
    }

    .mobile-edit-tabs .tabbtn {
      flex: 1;
      border-radius: 999px;
      border: 1.5px solid var(--sp-border-strong);
      background: var(--sp-surface-1);
      padding: 0.62rem 1.05rem;
      font-weight: 900;
      font-size: 0.94rem;
      cursor: pointer;
      color: var(--text-soft);
      transition: 0.15s ease-out;
      touch-action: manipulation;
      box-shadow: var(--sp-highlight);
    }

    .mobile-edit-tabs .tabbtn.active {
      border-color: var(--accent);
      color: var(--accent);
      background: color-mix(in srgb, var(--accent-soft) 100%, var(--card));
    }

    /* Desktop */
    @media (min-width: 901px) {
      #submit-problem .preview-card {
        display: flex;
      }
    }

    /* Tablet / mobile */
    @media (max-width: 900px) {
      .sp-converter-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .editor-grid > .sp-converter-panel {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        margin-bottom: 0.75rem;
      }

      .mobile-edit-tabs {
        display: flex;
        margin-bottom: 1rem;
      }

      .editor-grid .eg-track {
        grid-template-columns: 1fr;
      }

      .editor-grid .eg-panel:first-child {
        border-right: none;
      }

      #submit-problem .preview-card {
        display: none;
        min-height: 300px;
      }

      #submit-problem .preview-card.mobile-show {
        display: flex;
      }

      #problem-body-input {
        min-height: 300px;
      }

      #submit-problem .editor-grid,
      #submit-problem .editor-grid .eg-track,
      #submit-problem .editor-grid .eg-panel,
      #submit-problem #problem-body-input,
      #submit-problem #preview-card,
      #submit-problem #problem-preview {
        width: 100% !important;
        max-width: 100% !important;
      }

      #submit-problem #problem-body-input,
      #submit-problem #preview-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      #submit-problem .editor-grid {
        overflow: visible !important;
      }
    }

    body.theme-dark.page-submit-problem {
      --sp-surface-0: color-mix(in srgb, var(--card) 90%, var(--page-bg));
      --sp-surface-1: color-mix(in srgb, var(--card) 94%, var(--page-bg));
      --sp-surface-2: color-mix(in srgb, var(--card) 98%, var(--page-bg));
      --sp-surface-3: color-mix(in srgb, var(--card) 100%, var(--page-bg));
      --sp-surface-accent: linear-gradient(180deg,
          color-mix(in srgb, var(--accent-soft) 38%, var(--card)),
          color-mix(in srgb, var(--card) 100%, var(--page-bg)));
      --sp-surface-accent-strong: linear-gradient(180deg,
          color-mix(in srgb, var(--accent-soft) 58%, var(--card)),
          color-mix(in srgb, var(--card) 98%, var(--page-bg)));
      --sp-surface-info: linear-gradient(180deg,
          color-mix(in srgb, var(--border-soft) 14%, var(--card)),
          color-mix(in srgb, var(--card) 98%, var(--page-bg)));
      --sp-surface-danger: linear-gradient(180deg,
          color-mix(in srgb, #ef4444 14%, var(--card)),
          color-mix(in srgb, var(--card) 98%, var(--page-bg)));
      --sp-border-strong: color-mix(in srgb, var(--border-soft) 90%, var(--text-soft));
      --sp-highlight: inset 0 1px 0 color-mix(in srgb, var(--page-bg-soft) 6%, transparent);
      --sp-highlight-soft: inset 0 1px 0 color-mix(in srgb, var(--page-bg-soft) 4%, transparent);
      --sp-placeholder: color-mix(in srgb, var(--text-soft) 92%, var(--card));
      --sp-danger: #fca5a5;
    }

    @media (max-width: 600px) {
      body.page-submit-problem main {
        padding: 1.35rem 0.95rem 2.4rem;
      }

      .form-card#submit-problem .card-inner {
        padding: 0.95rem 0.9rem 1rem;
      }

      .card-title {
        font-size: 1.35rem;
      }

      .card-sub {
        font-size: 0.93rem;
      }

      .spark {
        width: 2.8rem;
        height: 2.8rem;
      }

      .content-block {
        border-radius: 1.15rem;
      }

      .latex-toolbar {
        padding: 0.5rem 0.55rem;
      }

      #submit-btn.btn.btn-primary {
        min-height: 54px;
      }
    }

    @media (max-width: 700px) {
      .attachment-link-entry {
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        scroll-behavior: auto !important;
      }
    }