:root {
  --mp-blue: #009CEA;
  --mp-green: #7CBB00;
  --mp-orange: #D66B07;
  --mp-yellow: #EAAA00;
  --mp-red: #ef4444;
  --mp-dark: #243447;
  --mp-muted: #64748b;
  --mp-border: #e6edf4;
}
html, body { max-width:100%; overflow-x:hidden; }
* { box-sizing:border-box; }
body { background:#f6f8fb; color:var(--mp-dark); font-family:Arial, Helvetica, sans-serif; }
.mp-batch-page { padding-bottom:20px; }
.mp-nav-wrap { max-width:1120px; margin:18px auto 16px; padding:0 15px; }
.mp-nav-wrap .navbar { margin:0; min-height:100px; background:#fff; border:0; border-radius:18px; box-shadow:0 12px 32px rgba(15,23,42,.08); }
.mp-nav-wrap .navbar-brand { height:auto; padding:12px 15px; }
.mp-nav-wrap .navbar-brand img { max-height:78px; width:auto; display:block; }
.mp-nav-wrap .navbar-nav { margin-top:24px; }
.mp-nav-wrap .navbar-nav>li>a { color:#fff!important; font-weight:800; padding:13px 18px; line-height:20px; border-radius:999px; box-shadow:0 10px 22px rgba(15,23,42,.14); margin:0 5px; transition:all .15s ease; }
.mp-nav-wrap .navbar-nav>li>a:hover,.mp-nav-wrap .navbar-nav>li>a:focus { color:#fff!important; text-decoration:none; filter:brightness(.97); transform:translateY(-2px); }
.mp-nav-wrap .navbar-toggle { margin-top:30px; margin-right:15px; }
.mp-hero { margin:26px auto 22px; padding:38px 32px; border-radius:30px; background:radial-gradient(circle at top right, rgba(0,156,234,.18), transparent 34%), linear-gradient(135deg,#fff 0%,#eef8ff 100%); border:1px solid rgba(0,156,234,.16); box-shadow:0 14px 38px rgba(15,23,42,.10); display:grid; grid-template-columns:92px minmax(0,1fr); gap:24px; align-items:center; }
.mp-hero-icon { width:92px; height:92px; border-radius:24px; background:var(--mp-blue); display:flex; align-items:center; justify-content:center; font-size:44px; color:#fff; box-shadow:0 14px 28px rgba(0,156,234,.22); }
.mp-eyebrow { display:inline-block; padding:7px 12px; border-radius:999px; background:rgba(0,156,234,.13); color:#006da3; font-weight:900; margin-bottom:14px; }
.mp-hero h1 { margin:0 0 12px; font-size:40px; line-height:1.12; font-weight:900; color:#1f2937; }
.mp-hero p { font-size:18px; line-height:1.55; color:var(--mp-muted); max-width:850px; margin:0; }
.mp-actions { margin-top:22px; }
.mp-btn { display:inline-block; border:0; padding:13px 20px; border-radius:14px; font-weight:800; text-decoration:none!important; margin:0 8px 10px 0; cursor:pointer; }
.mp-btn-primary { background:var(--mp-blue); color:#fff!important; box-shadow:0 10px 22px rgba(0,156,234,.22); }
.mp-btn-secondary { background:#fff; color:var(--mp-dark)!important; border:1px solid #d8e2eb; }
.mp-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start; }
.mp-card { background:#fff; border:1px solid var(--mp-border); border-radius:24px; padding:24px; box-shadow:0 10px 24px rgba(15,23,42,.07); margin-bottom:22px; }
.mp-card h2,.mp-card h3 { margin-top:0; font-weight:900; }
.mp-card p { color:var(--mp-muted); line-height:1.65; font-size:16px; }
.mp-progress { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.mp-stat { background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px; padding:12px 15px; min-width:120px; }
.mp-stat strong { display:block; font-size:26px; color:var(--mp-blue); line-height:1; }
.mp-extra-box { background:#fffdf5; border:1px solid #f1c27d; border-radius:20px; padding:16px; margin:14px 0 18px; }
.mp-grid-note { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.mp-note-pill { background:#eef8ff; border:1px solid #bfdff3; color:#0f3554; border-radius:14px; padding:10px; text-align:center; font-weight:800; }
.mp-label-bank { position:sticky; top:10px; z-index:40; background:rgba(248,250,252,.98); border:2px dashed #9fd9f4; border-radius:22px; padding:14px; margin:18px 0 22px; box-shadow:0 12px 28px rgba(15,23,42,.12); backdrop-filter:blur(6px); max-width:100%; }
.mp-label-bank h3 { margin:0 0 6px; font-size:20px; }
.mp-label-tip { margin:0 0 10px; color:var(--mp-muted); font-size:14px; font-weight:700; }
.mp-selected-helper { display:none; margin:0 0 10px; padding:9px 11px; border-radius:12px; background:#eef8ff; border:1px solid #9fd9f4; color:#006da3; font-weight:900; }
.mp-selected-helper.is-visible { display:block; }
.mp-labels { display:flex; flex-wrap:wrap; gap:10px; min-height:54px; max-width:100%; }
.mp-label { border:0; border-radius:999px; padding:12px 16px; background:var(--mp-blue); color:#fff; font-weight:900; box-shadow:0 10px 20px rgba(0,156,234,.18); cursor:grab; user-select:none; touch-action:manipulation; max-width:100%; font-size:16px; }
.mp-label.is-selected { outline:4px solid rgba(234,170,0,.45); box-shadow:0 12px 26px rgba(234,170,0,.24); background:var(--mp-yellow); color:#412600; }
.mp-label.is-dragging { opacity:.45; transform:scale(.96); }
.mp-board { background:#eef8ff; border:2px solid #9fd9f4; border-radius:24px; padding:22px; margin-top:18px; }
.mp-match-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.mp-match-card { background:#fff; border:2px solid #e2e8f0; border-radius:22px; padding:16px; min-height:160px; }
.mp-match-card.is-correct { border-color:var(--mp-green); background:#f3fbeb; }
.mp-match-card.is-wrong { border-color:var(--mp-red); background:#fff1f2; }
.mp-match-card h3 { margin:0 0 10px; font-size:20px; line-height:1.35; color:#0f3554; }
.mp-match-card p { margin:0 0 12px; font-weight:800; color:var(--mp-muted); line-height:1.45; }
.mp-balloon-number, .mp-line-display, .mp-big-number { min-height:62px; border-radius:14px; background:#f8fafc; border:1px solid #d8e2eb; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; font-weight:900; color:#16283a; margin-bottom:12px; }
.mp-big-number { font-size:25px; }
.mp-line-display { font-size:20px; line-height:1.45; white-space:pre-line; }
.mp-balloon-number { font-size:34px; background:linear-gradient(180deg,#ffe7f0,#fff); border:1px solid #f6bfd5; position:relative; }
.mp-balloon-number:before { content:'🎈'; font-size:38px; margin-right:10px; }
.mp-drop-zone { min-height:70px; border:2px dashed #007bb8; border-radius:18px; background:#fff; padding:10px; display:flex; align-items:center; justify-content:center; color:var(--mp-muted); font-weight:800; text-align:center; cursor:pointer; max-width:100%; overflow-wrap:anywhere; }
.mp-drop-zone:hover,.mp-drop-zone.is-over { border-color:var(--mp-blue); background:#eef8ff; }
.mp-drop-zone.is-correct { border-color:var(--mp-green); background:#f3fbeb; }
.mp-drop-zone.is-wrong { border-color:var(--mp-red); background:#fff1f2; }
.mp-feedback { margin-top:16px; min-height:24px; font-weight:800; }
.mp-feedback.good { color:#3f7d00; }
.mp-feedback.bad { color:#b91c1c; }
.mp-result-box { display:none; border-radius:22px; padding:20px; margin-top:18px; background:#eef8ff; border:1px solid #9fd9f4; }
.mp-result-box.is-visible { display:block; }
.mp-result-box strong { display:block; font-size:24px; color:#006da3; margin-bottom:6px; }
.mp-correction-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.mp-correction-item { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:11px 12px; font-size:16px; }
.mp-side-list { list-style:none; padding:0; margin:0; }
.mp-side-list li { padding:10px 0; border-bottom:1px solid #e2e8f0; color:#334155; line-height:1.45; }
.mp-side-list li:last-child { border-bottom:0; }
.mp-footer { margin:22px 0 30px; padding:22px; border-radius:22px; background:#fff; border:1px solid var(--mp-border); color:var(--mp-muted); }
.mp-footer a { color:var(--mp-blue); font-weight:700; }
@media (max-width:1199px) { .mp-layout { grid-template-columns:1fr; } }
@media (max-width:991px) { .mp-hero h1 { font-size:34px; } .mp-match-grid,.mp-correction-list,.mp-grid-note { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) {
  body.mp-batch-page { padding-bottom:260px; }
  .mp-nav-wrap { margin:0 auto 14px; padding-left:0; padding-right:0; }
  .mp-nav-wrap .navbar { min-height:82px; border-radius:0 0 18px 18px; }
  .mp-nav-wrap .navbar-brand { padding:10px 15px; }
  .mp-nav-wrap .navbar-brand img { max-height:62px; }
  .mp-nav-wrap .navbar-nav { margin-top:0; }
  .mp-nav-wrap .navbar-nav>li>a { display:block; margin:6px 10px; border-radius:16px; text-align:left; }
  .mp-nav-wrap .navbar-toggle { margin-top:23px; }
  .mp-hero { grid-template-columns:1fr; margin-top:16px; padding:26px 20px; border-radius:22px; }
  .mp-hero-icon { width:74px; height:74px; font-size:36px; }
  .mp-hero h1 { font-size:30px; }
  .mp-hero p { font-size:16px; }
  .mp-card { padding:18px; }
  .mp-grid-note, .mp-correction-list, .mp-match-grid { grid-template-columns:1fr; }
  .mp-label-bank { position:fixed; left:10px; right:10px; bottom:10px; z-index:9999; max-height:240px; overflow-y:auto; overflow-x:hidden; margin:0; padding:10px; border-radius:18px; box-shadow:0 12px 32px rgba(15,23,42,.24); }
  .mp-label-bank h3 { font-size:16px; margin:0 0 6px; }
  .mp-label-tip, .mp-selected-helper { font-size:12px; line-height:1.25; }
  .mp-labels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; }
  .mp-label { width:100%; min-width:0; white-space:normal; text-align:center; padding:9px 7px; font-size:15px; line-height:1.2; border-radius:14px; }
  .mp-board { padding:16px; scroll-margin-bottom:260px; }
  .mp-drop-zone { width:100%; min-width:0; min-height:60px; }
  .mp-actions .mp-btn { width:100%; text-align:center; margin-right:0; }
  .mp-footer { margin-bottom:270px; }
  .mp-footer .text-right { text-align:left!important; margin-top:10px; }
}
@media (max-width:360px) { .mp-labels { grid-template-columns:1fr; } body.mp-batch-page { padding-bottom:270px; } }