.mg-dialog {
  --mg-ink: #f3e8df;
  --mg-soft: #c2b3c3;
  --mg-gold: #e2c28a;
  --mg-line: #493a49;
  width: min(780px, calc(100vw - 32px));
  max-width: none;
  max-height: min(90vh, 820px);
  max-height: min(90dvh, 820px);
  margin: auto;
  padding: 0;
  border: 1px solid #675142;
  border-radius: 16px;
  background: #1b151e;
  color: var(--mg-ink);
  box-shadow: 0 30px 100px #080609be;
  font: 14px/1.55 "DM Sans", sans-serif;
  overflow: hidden;
}
.mg-dialog[open] { display: flex; flex-direction: column; }
.mg-dialog::backdrop { background: #08060ac9; }
.mg-dialog *, .mg-dialog *::before, .mg-dialog *::after { box-sizing: border-box; }
.mg-dialog [hidden] { display: none !important; }
.mg-dialog :is(h2,h3,h4,p) { margin: 0; }
.mg-dialog h2, .mg-dialog h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; line-height: 1.06; }
.mg-dialog h2 { font-size: 42px; }
.mg-dialog h3 { margin-bottom: 12px; font-size: 31px; }
.mg-dialog h4 { margin: 17px 0 5px; color: var(--mg-gold); font-size: 13px; font-weight: 600; }
.mg-dialog p { overflow-wrap: anywhere; }
.mg-dialog p + p { margin-top: 9px; }
.mg-dialog button { cursor: pointer; color: inherit; font: inherit; }
.mg-dialog :is(button,a,input,select,textarea):focus-visible {
  outline: 2px solid var(--mg-gold);
  outline-offset: 3px;
}
.mg-dialog h3:focus { outline: none; }
.mg-dialog :is(input:not([type="checkbox"]),select,textarea) {
  width: 100%; min-width: 0; min-height: 40px;
  padding: 8px 11px; color-scheme: dark;
  border: 1px solid var(--mg-line); border-radius: 7px;
  color: var(--mg-ink); background: #130f17;
  font: 13px/1.4 "DM Sans", sans-serif;
}
.mg-dialog textarea { resize: vertical; }
.mg-dialog ::placeholder { color: #ac9daf; }
.mg-dialog .mg-head {
  flex: 0 0 auto; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 24px 28px 18px;
  background: radial-gradient(ellipse at right top, #50394b66, transparent 68%);
}
.mg-dialog .mg-caption { margin: 0 0 6px; font: 600 10px/1.5 "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .15em; color: var(--mg-gold); }
.mg-dialog .mg-close { flex: 0 0 36px; height: 36px; padding: 0; border: 1px solid var(--mg-line); border-radius: 50%; background: #251c29; font-size: 24px; line-height: 1; }
.mg-dialog .mg-close:hover { background: #342838; }
.mg-tabs { display: flex; flex: 0 0 auto; gap: 22px; padding: 0 28px; border-bottom: 1px solid var(--mg-line); }
.mg-dialog .mg-tab { position: relative; min-height: 43px; padding: 8px 0; border: 0; color: var(--mg-soft); background: none; font-size: 13px; }
.mg-dialog .mg-tab[aria-selected="true"] { color: var(--mg-gold); font-weight: 600; }
.mg-tab[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--mg-gold); }
.mg-body { min-height: 0; min-width: 0; overflow-y: auto; scrollbar-color: #675564 #1b151e; overscroll-behavior: contain; }
.mg-panel { padding: 22px 28px 28px; min-width: 0; }
.mg-dialog .mg-intro { margin-bottom: 18px; color: var(--mg-soft); }
.mg-toolbar { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 12px; margin: 0 0 15px; }
.mg-control { display: grid; gap: 5px; min-width: 0; }
.mg-label { color: var(--mg-soft); font-size: 12px; }
.mg-gallery { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; align-items: stretch; }
.mg-dialog .mg-gallery-card {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  min-width: 0; padding: 8px 7px 10px; border: 1px solid #3b303d; border-radius: 8px;
  background: #231b26; transition: border-color .2s, background .2s;
}
.mg-dialog .mg-gallery-card:hover { border-color: #9a7e58; background: #2b212d; }
.mg-gallery-card span { font-size: 12px; line-height: 1.3; }
.mg-art { display: block; width: 100%; height: auto; aspect-ratio: .58; object-fit: contain; border-radius: 3px; }
.mg-reversed { transform: rotate(180deg); }
.mg-no-results { grid-column: 1 / -1; padding: 16px 0; color: var(--mg-soft); }
.mg-dialog .mg-text-button { width: fit-content; padding: 4px 0; min-height: 32px; border: 0; background: none; color: var(--mg-gold); font-size: 13px; }
.mg-dialog .mg-text-button:hover { text-decoration: underline; }
.mg-card-detail { display: grid; align-items: start; grid-template-columns: minmax(90px,.7fr) minmax(0,1.8fr); gap: 24px; padding: 15px 0 4px; }
.mg-plate { align-self: start; padding: 13px; border: 1px solid #625040; border-radius: 10px; background: radial-gradient(ellipse at 50% 60%, #4b3842, #2a2029); }
.mg-dialog .mg-fine { color: var(--mg-soft); font-size: 13px; }
.mg-sources { padding: 0; margin: 12px 0 0; list-style: none; }
.mg-sources li { padding: 11px 0; border-top: 1px solid var(--mg-line); }
.mg-dialog .mg-sources a { color: var(--mg-gold); font-size: 13px; text-decoration: underline; text-decoration-color: #937452; text-underline-offset: 3px; }
.mg-dialog .mg-sources .mg-fine { margin-top: 4px; }
.mg-compare-form { display: grid; gap: 12px; }
.mg-compare-rows { display: grid; gap: 9px; }
.mg-compare-row { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--mg-line); border-radius: 9px; background: #231b26; }
.mg-thumb { flex: 0 0 46px; display: grid; place-items: center; width: 46px; height: 77px; border: 1px solid #685542; border-radius: 4px; color: var(--mg-gold); background: #302432; }
.mg-thumb .mg-art { width: 100%; height: 100%; }
.mg-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; flex: 1 1 auto; }
.mg-selection .mg-control { flex: 1 1 175px; }
.mg-switch { display: inline-flex; align-items: center; gap: 5px; padding: 5px 2px; font-size: 12px; color: var(--mg-soft); }
.mg-switch input { width: 16px; height: 16px; accent-color: #dbc087; }
.mg-dialog .mg-primary { justify-self: start; min-height: 41px; padding: 8px 16px; border: 1px solid #e7c896; border-radius: 7px; background: #daba86; color: #241b15; font-size: 13px; font-weight: 600; }
.mg-comparison:not(:empty), .mg-shell-detail { margin-top: 17px; padding: 18px; border: 1px solid #5c473e; border-radius: 9px; background: linear-gradient(110deg,#2f222e,#211a24); }
.mg-dialog .mg-question { color: var(--mg-gold); font-size: 13px; }
.mg-pair { margin: 13px 0; border-top: 1px solid var(--mg-line); }
.mg-shell-options { display: flex; flex-wrap: wrap; gap: 7px; }
.mg-dialog .mg-number { width: 37px; height: 37px; padding: 0; border: 1px solid var(--mg-line); border-radius: 50%; color: var(--mg-soft); background: #231b26; font-size: 13px; }
.mg-dialog .mg-number[aria-pressed="true"] { border-color: var(--mg-gold); color: #211920; background: var(--mg-gold); }
@media (max-width:630px) {
  .mg-dialog { width: calc(100vw - 20px); }
  .mg-dialog .mg-head { padding: 17px 17px 10px; }
  .mg-dialog h2 { font-size: 35px; }
  .mg-tabs { gap: 15px; padding-inline: 17px; }
  .mg-dialog .mg-tab { font-size: 12px; }
  .mg-panel { padding: 16px 17px 22px; }
  .mg-gallery { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
  .mg-card-detail { gap: 13px; }
  .mg-plate { padding: 7px; }
}
@media (max-width:420px) {
  .mg-toolbar { grid-template-columns: 1fr; }
  .mg-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .mg-card-detail { display: flex; flex-direction: column; }
  .mg-plate { width: 110px; }
  .mg-selection { display: grid; gap: 2px; }
}