:root {
  --rm-bg: #f4f6ed;
  --rm-surface: #fbfdf7;
  --rm-surface-2: #eef4e4;
  --rm-panel: #e6efd7;
  --rm-border: #c2d2a9;
  --rm-border-strong: #9fb87c;
  --rm-accent: #669b36;
  --rm-accent-strong: #3f6a1f;
  --rm-accent-soft: #dff0c9;
  --rm-gold: #b48b42;
  --rm-text: #293523;
  --rm-muted: #68735f;
  --rm-shadow: 0 12px 30px rgba(54, 75, 38, 0.12);
  --rm-radius: 12px;
  --rm-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  background: var(--rm-bg);
}

body.remaked-modern {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% -4%, rgba(180, 139, 66, 0.12), transparent 28rem),
    radial-gradient(circle at 88% 2%, rgba(102, 155, 54, 0.09), transparent 30rem),
    linear-gradient(180deg, #fafbf5 0%, var(--rm-bg) 42%, #edf2e4 100%);
  color: var(--rm-text);
  font-family: var(--rm-font);
}

.remaked-shell {
  box-sizing: border-box;
  width: min(1180px, calc(100% - 24px));
  margin: 14px auto 56px;
}

.remaked-header {
  position: relative;
  z-index: 20;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--rm-border);
  border-radius: 14px;
  background: rgba(251, 253, 247, 0.98);
  box-shadow: 0 14px 36px rgba(54, 75, 38, 0.14);
}

.remaked-header-top,
.remaked-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-width: 0;
}

.remaked-header-top {
  justify-content: space-between;
  min-height: 39px;
  padding: 5px 9px 5px 11px;
  border-bottom: 1px solid #d8e3ca;
  background: linear-gradient(180deg, rgba(251,253,247,.98), rgba(244,248,236,.98));
}

.remaked-utilities {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
}

.remaked-utilities-controls {
  justify-content: flex-end;
}

.remaked-link,
.remaked-control,
.remaked-nav-button,
.remaked-segment-button,
.remaked-density-button {
  box-sizing: border-box;
  border: 0;
  font-family: var(--rm-font);
  text-decoration: none;
  white-space: nowrap;
}

.remaked-link {
  position: relative;
  padding: 6px 8px;
  border-radius: 7px;
  color: #4b5d3f;
  font-size: 11px;
  font-weight: 700;
  transition: background-color 120ms ease, color 120ms ease;
}

.remaked-link:hover,
.remaked-link:focus-visible {
  background: var(--rm-surface-2);
  color: var(--rm-accent-strong);
  outline: none;
}

.remaked-segment,
.remaked-density {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--rm-border);
  border-radius: 8px;
  background: #f3f7ec;
}

.remaked-segment-button,
.remaked-density-button,
.remaked-nav-button {
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.remaked-segment-button {
  min-width: 30px;
  padding: 5px 7px;
  border-radius: 6px;
  background: transparent;
  color: #627057;
  font-size: 10px;
  font-weight: 800;
}

.remaked-segment-button[aria-pressed="true"] {
  background: var(--rm-accent);
  color: #fff;
  box-shadow: 0 1px 4px rgba(63, 106, 31, 0.25);
}

.remaked-hero {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 59%) minmax(310px, 41%);
  height: 182px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.72), transparent 27%),
    linear-gradient(112deg, #f4f0d9 0%, #e7efd0 48%, #d6e4b9 100%);
  border-bottom: 1px solid #b7ca9d;
}

.remaked-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(246,248,232,.98) 0%, rgba(239,244,217,.92) 42%, rgba(235,242,213,.46) 60%, rgba(235,242,213,0) 77%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(69,92,42,.08));
}

.remaked-hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  min-width: 0;
  padding: 20px 28px;
}

.remaked-hero-eyebrow {
  margin-bottom: 5px;
  color: #698047;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.remaked-hero h1 {
  max-width: 620px;
  margin: 0;
  color: #2f3c22;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(31px, 3.25vw, 48px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.remaked-hero-meta {
  display: flex;
  align-items: center;
  margin-top: 13px;
  color: #68745e;
  font-size: 10px;
  font-weight: 700;
}

.remaked-version-badge {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  max-width: 100%;
  border: 1px solid rgba(126, 148, 98, .72);
  border-radius: 999px;
  background: rgba(241, 246, 232, .98);
  box-shadow:
    0 1px 4px rgba(54, 75, 38, .07),
    inset 0 1px 0 rgba(255, 255, 255, .68);
  line-height: 1;
  white-space: nowrap;
}

.remaked-version-badge-ui,
.remaked-version-badge-legacy {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 5px 9px;
}

.remaked-version-badge-ui {
  background: linear-gradient(180deg, #79aa48 0%, #5f9132 100%);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .055em;
  text-shadow: 0 1px 1px rgba(39, 72, 20, .24);
}

.remaked-version-badge-legacy {
  border-left: 1px solid rgba(114, 126, 89, .28);
  background: linear-gradient(180deg, rgba(246, 249, 238, .98), rgba(235, 241, 225, .98));
  color: #626c58;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.remaked-hero p {
  max-width: 560px;
  margin: 10px 0 0;
  color: #58634f;
  font-size: 12px;
  line-height: 1.35;
}

.remaked-hero-art {
  position: absolute;
  inset: 0 0 0 47%;
  z-index: 0;
  overflow: hidden;
}

.remaked-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #e8efd2 0%, rgba(232,239,210,.73) 14%, rgba(232,239,210,.09) 46%, rgba(22,32,16,.10) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(28,44,17,.12));
}

.remaked-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 54%;
  filter: saturate(.86) contrast(.94) brightness(.99) sepia(.05);
  transform: scale(1.02);
}

.remaked-nav-row {
  gap: 8px;
  padding: 7px 9px;
  background: linear-gradient(180deg, #f0f5e7 0%, #e9f1dd 100%);
}

.remaked-nav {
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #b8c9a0 transparent;
}

.remaked-nav-button {
  flex: 1 1 0;
  min-width: 76px;
  min-height: 31px;
  padding: 7px 11px;
  border: 1px solid #b8cba0;
  border-radius: 7px;
  background: #fbfdf8;
  color: #4f6242;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.remaked-nav-button:hover,
.remaked-nav-button:focus-visible {
  border-color: #8eae67;
  background: #e9f3dc;
  color: var(--rm-accent-strong);
  outline: none;
}

.remaked-nav-button[aria-pressed="true"] {
  border-color: #5e8d34;
  background: linear-gradient(180deg, #76aa45, #609238);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.28);
}

.remaked-density {
  flex: 0 0 auto;
}

.remaked-density-button {
  min-height: 27px;
  padding: 5px 7px;
  border-radius: 6px;
  background: transparent;
  color: #68755e;
  font-size: 9px;
  font-weight: 650;
}

.remaked-density-button[aria-pressed="true"] {
  background: #dce9cc;
  color: #46602f;
}

.remaked-app-frame {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 10px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  background: rgba(251, 253, 247, 0.94);
  box-shadow: 0 8px 24px rgba(54, 75, 38, 0.08);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.remaked-modern #body {
  display: flow-root;
  box-sizing: content-box;
  width: 992px;
  margin: 0 auto !important;
  font-family: var(--rm-font) !important;
  color: #46533e;
}

/* Source CSS sets font-family on each li/ul, not just the body. */
.remaked-modern #body :is(li, ul, table, td) {
  font-family: var(--rm-font) !important;
}

.remaked-modern #body:has([data-remaked-calculator-main]) {
  width: min(992px, 100%);
}

.remaked-modern #body [data-remaked-calculator-main] {
  box-sizing: border-box;
  width: 100% !important;
}
.remaked-modern #body [data-remaked-calculator-main] > ul:has(#Title) { display: none; }

.remaked-modern #body [data-remaked-calculator-main] > ul {
  width: 100%;
  clear: both;
}

.remaked-modern #body [data-remaked-calculator-main] > ul:not([data-remaked-calculator-columns]):not([data-remaked-calculator-code]) {
  display: flow-root;
}

.remaked-modern #body [data-remaked-calculator-main-row],
.remaked-modern #body [data-remaked-calculator-columns],
.remaked-modern #body [data-remaked-calculator-settings],
.remaked-modern #body [data-remaked-calculator-attribute-results] {
  display: flow-root;
  width: 100%;
}

.remaked-modern #body [data-remaked-calculator-columns] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 358px 216px;
  gap: 10px;
  padding-top: 6px;
}

.remaked-modern #body [data-remaked-calculator-columns] > :is(.line1, .line2),
.remaked-modern #body [data-remaked-calculator-settings] > :is(.line1, .line2),
.remaked-modern #body [data-remaked-calculator-attribute-results] > :is(.line1, .line2) {
  display: none;
}

.remaked-modern #body :is([data-remaked-calculator-character], #SkillSet, [data-remaked-calculator-effects], [data-remaked-calculator-attribute-column], #Status, #StatusView, [data-remaked-calculator-budget], [data-remaked-calculator-actions]) {
  box-sizing: border-box;
  float: none !important;
  width: 100% !important;
  min-width: 0;
  padding: 0 !important;
}

.remaked-modern #body :is(#SkillSet, [data-remaked-calculator-effects]) {
  overflow-x: auto;
}

.remaked-modern #body #SkillSet > ul {
  display: flex;
  min-width: 356px;
}

.remaked-modern #body #SkillSet > ul > li {
  flex-shrink: 0;
}

.remaked-modern #body [data-remaked-calculator-effects] > ul {
  min-width: 216px;
}

/* Progressive skill enhancement removes the fixed-width arrow matrix only
   when its source-delegating controls are available. */
.remaked-modern #body #SkillSet[data-remaked-skill-controls] {
  overflow: visible;
}
.remaked-modern #body #SkillSet[data-remaked-skill-controls] > ul {
  box-sizing: border-box;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rm-border);
}
.remaked-modern #body [data-remaked-skill-controls] li {
  box-sizing: border-box;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: none;
  color: var(--rm-text);
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.remaked-modern #body [data-remaked-skill-row] > [id^="TextSkill_"] {
  grid-column: 1 / -1;
  text-align: left !important;
  font-weight: 600;
}
.remaked-modern #body [data-remaked-skill-row] > [hidden] {
  display: none !important;
}
.remaked-modern #body [data-remaked-skill-group] > ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px;
}
.remaked-modern #body [data-remaked-skill-group] [id^="Skill_"] {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.remaked-modern #body [data-remaked-skill-caption] {
  color: #46543b;
  font-size: 12px;
}
.remaked-modern #body [data-remaked-skill-controls] :is(.remaked-skill-primary, .remaked-skill-bulk) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}
.remaked-modern #body [data-remaked-skill-controls] .remaked-skill-indicator {
  display: block;
}
.remaked-modern #body [data-remaked-skill-controls] .remaked-skill-indicator > ul {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  font-size: 12px;
}
.remaked-modern #body .remaked-skill-indicator > ul > li:first-child {
  flex: 1;
  min-width: 0;
}
.remaked-modern #body #remaked-potential-budget-label {
  width: auto !important;
  min-width: 35px;
  padding-inline: 2px;
}
.remaked-modern #body [data-remaked-skill-controls]:not([data-remaked-skill-expanded="true"]) .remaked-skill-bulk {
  display: none;
}
.remaked-modern #body #SkillSet[data-remaked-skill-controls] .remaked-skill-heading {
  display: block;
  padding: 6px;
  background: #e8f1db;
  border-radius: 4px;
  border-bottom: 0;
  margin-top: 8px;
}
.remaked-modern #body .remaked-skill-heading > li > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.remaked-modern #body .remaked-skill-heading [id^="TextSkill_"] {
  flex: 1;
  font-weight: 700;
}
.remaked-skill-tools p {
  margin: 5px 0;
  color: #46543b;
  font: 12px/1.5 var(--rm-font);
  white-space: normal;
  overflow-wrap: anywhere;
}
.remaked-modern #body [data-remaked-effect-tabs] {
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
}
.remaked-modern #body [data-remaked-effect-tabs] > ul {
  display: flex;
  gap: 4px;
}
.remaked-modern #body [data-remaked-effect-tabs] li {
  flex: 1;
  float: none;
  width: auto !important;
  margin: 0 !important;
  border: 0;
  background: none;
}
.remaked-modern #body [data-remaked-effect-tabs] .col_bg {
  display: none;
}
.remaked-modern #body [data-remaked-calculator-effects]:has([data-remaked-effect-tabs]) {
  overflow: visible;
}
.remaked-modern #body [data-remaked-calculator-effects]:has([data-remaked-effect-tabs]) > ul {
  min-width: 0;
  display: flow-root;
}
.remaked-modern #body :is(#SkillView, #POTView):has([data-remaked-effect-row]) {
  width: 100%;
}
.remaked-modern #body [data-remaked-effect-row] {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rm-border);
}
.remaked-modern #body [data-remaked-effect-row] li {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: none;
  min-width: 0;
  color: var(--rm-text);
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.remaked-modern #body [data-remaked-effect-row] > li:first-child {
  text-align: left !important;
}
.remaked-modern #body [data-remaked-effect-row] > .input_gt > ul {
  display: flex;
  font-variant-numeric: tabular-nums;
}
.remaked-modern #body [data-remaked-effect-row] > li:not([id]):not(.input_gt) {
  display: none;
}
.remaked-modern #body [data-remaked-calculator-effects]:has([data-remaked-effect-tabs]) #Msg {
  /* Source Message() initializes randomized Japanese ASCII jokes here, not
     simulation output. Keep the source/callbacks and museum untouched; do not
     let this decorative panel displace Modern's actual equipment controls. */
  display: none;
}

.remaked-modern #body [data-remaked-calculator-identity],
.remaked-modern #body [data-remaked-calculator-results] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.remaked-modern #body [data-remaked-calculator-identity] {
  grid-template-columns: 1fr;
}

.remaked-modern #body [data-remaked-calculator-identity] [data-remaked-calculator-pair] .input_gt {
  flex: 1 1 0;
  display: block;
  white-space: normal;
  text-align: right;
}

.remaked-modern #body [data-remaked-calculator-identity] .input_lt {
  max-width: 40%;
}

.remaked-modern #body [data-remaked-calculator-results] > ul {
  display: contents;
}

.remaked-modern #body [data-remaked-calculator-results] > ul > :not([data-remaked-calculator-pair]) {
  display: none;
}

.remaked-modern #body [data-remaked-calculator-pair] {
  box-sizing: border-box;
  float: none !important;
  min-width: 0;
  border: 1px solid var(--rm-border);
  border-radius: 4px;
  background: #f7fbf2;
}

.remaked-modern #body [data-remaked-calculator-pair] > ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 5px;
}

.remaked-modern #body [data-remaked-calculator-pair] :is(li, .help) {
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
  color: var(--rm-text);
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.remaked-modern #body [data-remaked-calculator-pair] .input_gt,
.remaked-modern #body [data-remaked-calculator-pair] .input_gt > ul {
  display: flex;
  flex: 0 0 auto;
  color: var(--rm-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.remaked-modern #body [data-remaked-calculator-settings] {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
}

/* All five inspectors retain their source IDs, selects and callbacks. Modern
   places their floating surfaces against the current viewport, not museum
   coordinates, and never inserts an open inspector into the workbench flow. */
.remaked-modern #body [data-remaked-calculator-overlays] {
  position: relative !important;
  float: none;
  width: 100%;
  height: auto;
}
.remaked-modern #body [data-remaked-native-panel]:not([hidden]) {
  display: block !important;
  float: none;
  width: 100%;
  height: auto;
  padding: 0 0 8px;
}
.remaked-modern #body [data-remaked-native-panel] > ul { float: none; width: 100%; display: flow-root; }
.remaked-modern #body [data-remaked-native-panel] .sub_win {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  box-sizing: border-box;
  float: none;
  width: min(100%, var(--rm-native-panel-width)) !important;
  max-width: 100%;
  overflow: hidden;
}
.remaked-modern #body .remaked-native-panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 6px; background: #e5eed8; border-bottom: 1px solid var(--rm-border);
}
.remaked-modern #body .remaked-native-panel-bar strong { font: 600 12px/1.4 var(--rm-font); }
.remaked-modern #body [data-remaked-panel-close] {
  font: 18px/1 var(--rm-font); background: #f7fbf2; color: var(--rm-text);
  border: 1px solid var(--rm-border); border-radius: 4px; min-width: 28px; min-height: 28px; cursor: pointer;
}
.remaked-modern #body .remaked-native-panel-content {
  display: flow-root; float: none; max-height: min(60vh, 560px); overflow: auto;
  overscroll-behavior: contain; width: 100%;
}
.remaked-modern #body [data-remaked-floating-panel]:not([hidden]) {
  position: fixed; z-index: 25; top: var(--rm-popup-top); left: var(--rm-popup-left);
  box-sizing: border-box; width: min(calc(100vw - 24px), var(--rm-native-panel-width));
  padding: 0; filter: drop-shadow(0 8px 18px rgba(41, 53, 35, .22));
}
.remaked-modern #body [data-remaked-floating-panel] .sub_win {
  width: 100% !important; background: #fbfdf7;
}
.remaked-modern #body [data-remaked-floating-panel] .remaked-native-panel-content {
  max-height: min(560px, calc(100dvh - var(--rm-popup-top) - 64px));
}
.remaked-modern #body [data-remaked-job-content] { width: 100% !important; box-sizing: border-box; }
.remaked-modern #body [data-remaked-job-layout] { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.remaked-modern #body [data-remaked-job-layout] :is(li, ul) {
  float: none; width: 100% !important; height: auto !important; min-width: 0;
}
.remaked-modern #body [data-remaked-job-layout] .head {
  box-sizing: border-box; padding: 4px; line-height: 1.4; font-weight: 600;
  background: var(--rm-surface-2) !important; color: var(--rm-text) !important;
}
.remaked-modern #body [data-remaked-job-layout] select {
  box-sizing: border-box; width: 100% !important; height: auto !important;
  border: 1px solid var(--rm-border); border-radius: 4px; font: 13px/1.4 var(--rm-font);
}
.remaked-modern #body [data-remaked-skill-list-prompt] {
  box-sizing: border-box; width: 100%; min-width: 0; padding: 8px;
  font: 13px/1.5 var(--rm-font); color: var(--rm-text); white-space: normal; overflow-wrap: anywhere;
}
.remaked-modern #body [data-remaked-skill-list-prompt] p { margin: 0 0 8px; white-space: normal; overflow-wrap: anywhere; }
.remaked-modern #body [data-remaked-floating-panel] #LearnView { width: 100% !important; box-sizing: border-box; }
.remaked-modern [data-remaked-skill-icon] { cursor: pointer; }
.remaked-modern [data-remaked-skill-icon]:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
.remaked-modern [data-remaked-skill-tooltip] {
  position: fixed !important; inset: auto; margin: 0; z-index: 40 !important;
  box-sizing: border-box; width: min(320px, calc(100vw - 16px)) !important;
  max-height: calc(100dvh - 16px); overflow: auto; overscroll-behavior: contain;
  padding: 10px !important; border: 1px solid var(--rm-border); border-radius: 6px;
  background: #fbfdf7 !important; color: var(--rm-text) !important; box-shadow: 0 6px 20px rgba(41, 53, 35, .24);
  font: 12px/1.45 var(--rm-font); text-align: left; white-space: normal;
}
.remaked-modern [data-remaked-skill-tooltip] > ul {
  display: flow-root; float: none; width: 100%; margin: 5px 0 0; padding: 0;
}
.remaked-modern [data-remaked-skill-tooltip] > ul > li {
  float: none; width: auto !important; height: auto !important; margin: 0 !important;
  padding: 0 !important; line-height: 1.45 !important; white-space: normal !important;
  overflow-wrap: anywhere; color: inherit !important;
}
.remaked-modern [data-remaked-skill-tooltip] > ul:first-child { margin-top: 0; font-weight: 700; font-size: 14px; }
.remaked-modern [data-remaked-skill-tooltip] > ul:nth-child(2) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
.remaked-modern [data-remaked-skill-tooltip] > ul:nth-child(3) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 6px; }
.remaked-modern [data-remaked-skill-tooltip] > ul:nth-child(4) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.remaked-modern [data-remaked-skill-tooltip] > ul:nth-child(2) > li:last-child,
.remaked-modern [data-remaked-skill-tooltip] > ul:nth-child(4) > li:last-child { display: none; }
.remaked-modern [data-remaked-skill-tooltip] > ul:nth-child(5),
.remaked-modern [data-remaked-skill-tooltip] > ul:nth-child(7) { font-weight: 600; }
.remaked-modern [data-remaked-skill-tooltip] > ul:last-child { margin-top: 10px; }
.remaked-modern #body :is(#ATKView, #RESView) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; box-sizing: border-box; width: 100% !important; }
.remaked-modern #body #RESView { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.remaked-modern #body :is(#ATKView, #RESView) > ul { display: contents; }
.remaked-modern #body [data-remaked-inspector-stat] { float: none; width: auto; height: auto; min-width: 0; }
.remaked-modern #body [data-remaked-inspector-stat] > ul { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px; background: #f7fbf2; border: 1px solid var(--rm-border); }
.remaked-modern #body [data-remaked-inspector-stat] li { float: none; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-size: 12px; line-height: 1.45; }
.remaked-modern #body [data-remaked-inspector-stat] .input_lt { color: var(--rm-text) !important; text-align: left !important; min-width: 0; white-space: normal !important; overflow-wrap: anywhere; background: transparent; }
.remaked-modern #body [data-remaked-inspector-stat] .input_lt .help { color: inherit; text-decoration: none; white-space: normal; }
.remaked-modern #body [data-remaked-inspector-stat] .input_gt { flex: 0 0 auto; display: flex; align-items: center; gap: 1px; background: transparent; }
.remaked-modern #body [data-remaked-inspector-stat] .input_gt > ul { display: contents; }
.remaked-modern #body #BUFFView { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr) repeat(2, minmax(0, 1.5fr)); gap: 5px; width: 100% !important; }
/* Keep five independent columns at FHD and QHD; stack by available panel width
   rather than the size of the browser surrounding the calculator. */
.remaked-modern #body [data-remaked-native-panel="4"] .remaked-native-panel-content { container-type: inline-size; }
.remaked-modern #body #BUFFView > ul { display: contents; }
.remaked-modern #body [data-remaked-buff-heading] { grid-column: 1 / -1; }
.remaked-modern #body [data-remaked-buff-column] { width: auto !important; min-width: 0; float: none; margin: 0 !important; padding: 0 !important; }
.remaked-modern #body [data-remaked-buff-column] ul { width: 100%; display: flow-root; }
.remaked-modern #body [data-remaked-buff-column] > ul { margin: 3px 0; }
.remaked-modern #body [data-remaked-buff-column] input { box-sizing: border-box; width: 100% !important; min-height: 26px; color: var(--rm-text) !important; font: 13px/1.4 var(--rm-font); }
.remaked-modern #body [data-remaked-buff-column] .input_lt { color: var(--rm-text) !important; background: transparent; }
.remaked-modern #body [data-remaked-buff-column] [id^="Buff"] { float: none; width: 100% !important; height: auto !important; padding: 0; border: 0; background: transparent; }
/* The preserved source .btn2 label contributes a 14px height and top padding.
   Center the real, potentially wrapped title inside both Buff and Honor
   buttons without changing their columns, click handlers or touch targets. */
.remaked-modern #body [data-remaked-buff] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 26px;
  border: 1px solid var(--rm-border);
  border-radius: 3px;
  background: #f7fbf2;
  color: var(--rm-text);
  padding: 3px;
  cursor: pointer;
  font: 12px/1.4 var(--rm-font);
  text-align: center;
}
.remaked-modern #body [data-remaked-buff] > [id^="TextBuff"] {
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  margin: 0;
  padding: 0 !important;
  text-align: center;
}
.remaked-modern #body [data-remaked-buff][aria-pressed="true"] { background: #d5e7bf; border-color: var(--rm-accent); }
.remaked-modern #body [data-remaked-buff] :is(div, span) { color: inherit !important; background: transparent !important; border: 0; font: inherit; white-space: normal; }
.remaked-modern #body [data-remaked-buff] .help { text-decoration: none; }
/* Legacy struck out effects without disabling their click handlers. In Modern
   this misleading strikethrough obscures real, applicable party buffs. */
.remaked-modern #body [data-remaked-buff] [id^="TextBuff_"],
.remaked-modern #body [data-remaked-buff] [id^="TextBuff_"] .help {
  text-decoration: none !important;
}
.remaked-modern #body [data-remaked-buff-column] select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 26px; font: 12px/1.4 var(--rm-font); }
/* Identical two-track geometry for EN/RU/JP/TW. The numeric control's
   position is determined by the column, never by the length of its label. */
.remaked-modern #body [data-remaked-buff-parameter] {
  display: grid !important; grid-template-columns: minmax(0, 1fr) var(--rm-buff-field-width, 38px);
  align-items: stretch; gap: 5px; box-sizing: border-box;
}
.remaked-modern #body [data-remaked-buff-parameter]:has(#InBuff_0) { --rm-buff-field-width: 44px; }
.remaked-modern #body [data-remaked-buff-parameter] > li {
  box-sizing: border-box; float: none; margin: 0 !important; width: auto !important; height: auto !important;
}
.remaked-modern #body [data-remaked-buff-parameter] > .input_lt {
  min-width: 0; min-height: 28px; display: flex; align-items: center; justify-content: flex-end;
  padding: 3px 0; font: 600 12px/1.4 var(--rm-font); text-align: right !important;
  border: 0; white-space: nowrap; overflow-wrap: normal;
}
.remaked-modern #body [data-remaked-buff-parameter] > .input_lt .help { font: inherit; }
.remaked-modern #body [data-remaked-buff-parameter] > li:has(input) { display: flex; min-width: 0; }
.remaked-modern #body [data-remaked-buff-parameter] input {
  box-sizing: border-box; width: 100% !important; min-width: 0;
  height: auto !important; min-height: 28px; border: 1px solid var(--rm-border); border-radius: 4px;
  padding: 3px 3px; background: #fff; font: 600 13px/1.4 var(--rm-font);
}
@media (max-width: 620px) {
  .remaked-modern #body [data-remaked-panel-close] { min-width: 44px; min-height: 44px; }
  .remaked-modern #body :is(#ATKView, #RESView, #BUFFView) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .remaked-modern #body [data-remaked-buff] { min-height: 44px; }
  .remaked-modern #body [data-remaked-buff-column] select { min-height: 44px; font-size: 16px; }
  .remaked-modern #body [data-remaked-buff-column] input { min-height: 44px; font-size: 16px; }
  .remaked-modern #body [data-remaked-buff-parameter] > .input_lt { min-height: 44px; }
}
@container (max-width: 820px) { .remaked-modern #body #BUFFView { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 430px) { .remaked-modern #body #BUFFView { grid-template-columns: 1fr; } }
/* Viewport fallback for browsers without CSS container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 940px) { .remaked-modern #body #BUFFView { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px) { .remaked-modern #body #BUFFView { grid-template-columns: 1fr; } }
}
@media (max-width: 360px) { .remaked-modern #body :is(#ATKView, #RESView, #BUFFView) { grid-template-columns: 1fr; } }

.remaked-modern #body [data-remaked-calculator-actions] {
  display: grid;
  gap: 4px;
}

.remaked-modern #body [data-remaked-calculator-actions] > ul {
  display: flex;
  gap: 4px;
}

.remaked-modern #body [data-remaked-calculator-action-source] {
  flex: 1;
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  height: auto !important;
}

.remaked-calculator-action,
.remaked-calculator-step {
  box-sizing: border-box;
  min-height: 28px;
  min-width: 28px;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--rm-border);
  border-radius: 5px;
  background: #f7fbf2;
  color: var(--rm-text);
  font: 600 12px/1.35 var(--rm-font);
  white-space: normal;
  cursor: pointer;
  touch-action: manipulation;
}

.remaked-calculator-action:hover,
.remaked-calculator-step:hover {
  background: #e8f1db;
  border-color: #789954;
}

.remaked-calculator-action[aria-pressed="true"] {
  background: var(--rm-accent-strong);
  color: white;
}

.remaked-calculator-action:focus-visible,
.remaked-calculator-step:focus-visible {
  outline-offset: 2px;
}

/* Shared action dimensions across EN/RU/JP/TW. Short labels stay on one
   line when space permits; narrow panels and custom terms wrap safely. */
.remaked-modern #body [data-remaked-calculator-actions] [data-remaked-calculator-action] {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 700 10.5px/1.02 var(--rm-font);
  white-space: normal;
}
@media (max-width: 620px) {
  .remaked-modern #body [data-remaked-calculator-actions] [data-remaked-calculator-action] {
    height: 44px;
    min-height: 44px;
    font-size: 11px;
    line-height: 1.1;
  }
}

.remaked-modern #body [data-remaked-calculator-attributes] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding-bottom: 6px !important;
}

.remaked-modern #body [data-remaked-calculator-attribute] {
  min-width: 0;
  padding: 5px;
  border: 1px solid var(--rm-border);
  border-radius: 5px;
  background: #f7fbf2;
}

.remaked-modern #body [data-remaked-calculator-attribute] > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.remaked-modern #body [data-remaked-calculator-attribute] .line1,
.remaked-modern #body [data-remaked-calculator-attribute] .line2 {
  display: none;
}

.remaked-modern #body [data-remaked-calculator-attribute] li,
.remaked-modern #body [data-remaked-calculator-level] > li {
  float: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  font-size: 12px;
  line-height: 1.5;
}

.remaked-modern #body [data-remaked-calculator-attribute] .input_gt > ul {
  display: flex;
  font-variant-numeric: tabular-nums;
}

.remaked-modern #body [data-remaked-calculator-attribute] [id^="Text_"] {
  color: var(--rm-text);
  background: transparent;
  font-weight: 700;
  margin-right: 5px !important;
}

/* Keep every base-stat editor on the same horizontal rails. The Legacy rows
   size their labels from proportional text, so STA/INT/etc. otherwise move the
   numeric field by a few pixels. A derived total such as SPR 40 → 54 must live
   in its own track and never push the input itself. */
.remaked-modern #body [data-remaked-calculator-attribute] > ul:first-child {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  column-gap: 3px;
}
.remaked-modern #body [data-remaked-calculator-attribute] > ul:first-child > [id^="Text_"] {
  box-sizing: border-box;
  width: 34px !important;
  min-width: 34px;
  margin: 0 !important;
}
.remaked-modern #body [data-remaked-calculator-attribute] > ul:first-child > .input_gt {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  column-gap: 4px;
  min-width: 0;
}
.remaked-modern #body [data-remaked-calculator-attribute] > ul:first-child > .input_gt > .remaked-calculator-number {
  grid-column: 1;
}
.remaked-modern #body [data-remaked-calculator-attribute] > ul:first-child > .input_gt > [data-remaked-number-total] {
  grid-column: 2;
  justify-self: start;
  margin-inline-start: 0;
  white-space: nowrap;
}

.remaked-modern #body [data-remaked-calculator-steps] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding-top: 4px !important;
}

.remaked-modern #body [data-remaked-calculator-level] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.remaked-modern #body [data-remaked-calculator-budget] .input_gt > ul {
  display: flex; align-items: center; gap: 2px;
}
.remaked-modern #body [data-remaked-calculator-budget] .input_gt > ul > li {
  float: none !important; width: auto !important; height: auto !important;
}

.remaked-modern #body [data-remaked-calculator-level] > [data-remaked-calculator-steps] {
  flex-basis: 100%;
}

.remaked-modern #body [data-remaked-calculator-code] {
  display: flex;
  align-items: center;
  gap: 5px;
}

.remaked-modern #body [data-remaked-calculator-code] > li:last-child {
  flex: 1;
  min-width: 0;
  width: auto !important;
}

.remaked-modern #body [data-remaked-calculator-code] input {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 28px;
}

.remaked-modern #body [data-remaked-calculator-code-actions] > li {
  width: 100% !important;
  height: auto !important;
}

.remaked-modern #body [data-remaked-calculator-code] > li {
  height: auto !important;
}

.remaked-modern #body [data-remaked-calculator-code-buttons] {
  position: static !important;
  display: flex;
  gap: 5px;
  height: auto !important;
  margin: 5px 0 0;
}

.remaked-modern #body [data-remaked-calculator-code-source] {
  flex: 1;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  background: transparent;
}

.remaked-modern #body [data-remaked-code-status] {
  width: 100%;
  margin-top: 5px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.remaked-modern #body [data-remaked-code-status]:empty { display: none; }
.remaked-modern #body [data-remaked-code-status][data-state="error"] { color: #8e2921; }

.remaked-modern #body [data-remaked-calculator-horse] {
  width: 100% !important;
  height: auto !important;
  margin-top: 8px;
}
.remaked-modern #body [data-remaked-calculator-horse-container] { width: 100%; }
.remaked-modern #body [data-remaked-calculator-horse] :is(td, ul, li) {
  height: auto !important;
  min-width: 0;
}
.remaked-modern #body [data-remaked-calculator-horse] tr:last-child ul { display: flex; }
.remaked-modern #body [data-remaked-calculator-horse] tr:last-child li { flex: 1; width: auto !important; }
.remaked-modern #body [data-remaked-calculator-horse] .input_gt { display: flex; align-items: center; justify-content: end; }
.remaked-modern #body [data-remaked-calculator-horse] .input_gt > ul { display: contents; }
.remaked-modern #body [data-remaked-calculator-horse] #Status_81 { width: auto !important; }

@media (max-width: 620px) {
  .remaked-modern #body [data-remaked-calculator-code] input { min-height: 44px; font-size: 16px; }
}

@media (max-width: 860px) {
  .remaked-modern #body [data-remaked-calculator-columns] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .remaked-modern #body [data-remaked-calculator-character] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .remaked-modern #body [data-remaked-calculator-columns] {
    grid-template-columns: minmax(0, 1fr);
  }
  .remaked-modern #body [data-remaked-calculator-attributes] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .remaked-modern #body [data-remaked-calculator-settings] {
    grid-template-columns: 1fr;
  }
  .remaked-modern #body [data-remaked-calculator-budget] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .remaked-modern #body [data-remaked-calculator-level] {
    flex-basis: 100%;
  }
  .remaked-modern #body [data-remaked-calculator-level] > [data-remaked-calculator-steps] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .remaked-calculator-action,
  .remaked-calculator-step {
    min-width: 44px;
    min-height: 44px;
    font-size: 13px;
  }
  .remaked-modern #body [data-remaked-calculator-attribute],
  .remaked-modern #body [data-remaked-calculator-results] {
    padding: 0;
  }
  .remaked-modern #body [data-remaked-calculator-attribute] {
    border: 0;
  }
  .remaked-modern #body [data-remaked-calculator-overlays] {
    position: relative !important;
    width: 100%;
  }
  .remaked-modern #body [data-remaked-calculator-overlays] .sub_win {
    box-sizing: border-box;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    max-width: 100%;
    overflow-x: auto;
  }
}

.remaked-modern .remaked-legacy-toolbar {
  display: none !important;
}

.remaked-modern #body .main {
  border: 1px solid #b4c99a !important;
  border-radius: 8px !important;
  background: #e6f1d9 !important;
  box-shadow: 0 5px 14px rgba(63, 83, 45, 0.10) !important;
}

.remaked-modern #body .sub_win {
  border-color: #afc594 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 7px rgba(62, 79, 49, 0.08);
}

.remaked-modern #body .head {
  background: #6c8751 !important;
  color: #fff !important;
  text-shadow: none !important;
}

.remaked-modern #body .col_bg {
  background: #dff0c9;
}

.remaked-modern #body .col_bg2 {
  background: #edf6e3;
}

.remaked-modern #body .title,
.remaked-modern #body #Msg1 {
  color: #5d8736;
  background: #f7fbf2;
  text-shadow: none;
}

.remaked-modern #body .btn1 div,
.remaked-modern #body .btn1_off div {
  color: #4f782d;
  background: #e0efcf;
  border-color: #9cbd75;
  text-shadow: none;
}

.remaked-modern #body .btn1 div:hover,
.remaked-modern #body .btn1_on div {
  color: #fff;
  background: #6d9d40;
  border-color: #5d8a35;
  text-shadow: none;
}

.remaked-modern #body .btn2 div,
.remaked-modern #body .btn2_off div {
  color: #4f5d48;
  background: #f3f8ed;
  border-color: #a9bf90;
}

.remaked-modern #body .btn2 div:hover,
.remaked-modern #body .btn2_on div {
  color: #fff;
  background: #73984f;
  border-color: #628642;
}

.remaked-modern #body select,
.remaked-modern #body input,
.remaked-modern #body textarea {
  color: #3e4b37;
  font-family: var(--rm-font) !important;
}

.remaked-modern #body select:focus-visible,
.remaked-modern #body input:focus-visible,
.remaked-modern #body textarea:focus-visible {
  outline: 2px solid rgba(102, 155, 54, 0.45);
  outline-offset: 1px;
}

@media (max-width: 860px) {
  .remaked-shell {
    width: calc(100% - 12px);
    margin-top: 6px;
  }

  .remaked-header {
    border-radius: 10px;
  }

  .remaked-header-top {
    gap: 6px;
    padding: 5px 6px;
  }

  .remaked-utilities {
    gap: 2px;
  }

  .remaked-link {
    padding: 5px 6px;
    font-size: 10px;
  }

  .remaked-version {
    display: none;
  }

  .remaked-hero {
    grid-template-columns: minmax(0, 62%) 38%;
    height: 154px;
  }

  .remaked-hero-copy {
    padding: 15px 18px;
  }

  .remaked-hero h1 {
    font-size: clamp(27px, 5.4vw, 38px);
  }

  .remaked-hero p {
    margin-top: 8px;
    font-size: 11px;
  }

  .remaked-hero-art {
    left: 47%;
  }

  .remaked-nav-row {
    display: block;
    padding: 6px;
  }

  .remaked-nav {
    padding-bottom: 3px;
  }

  .remaked-nav-button {
    flex-basis: 72px;
    min-height: 34px;
  }

  .remaked-density {
    margin-top: 5px;
    width: max-content;
  }

  .remaked-app-frame {
    padding: 6px;
    border-radius: 9px;
  }
}

@media (max-width: 520px) {
  .remaked-header-top {
    flex-wrap: wrap;
    justify-content: center;
    min-height: 0;
  }

  .remaked-utilities-primary,
  .remaked-utilities-controls {
    justify-content: center;
    width: 100%;
  }

  .remaked-link {
    flex: 0 0 auto;
  }

  .remaked-segment {
    margin-left: auto;
    margin-right: auto;
  }

  .remaked-hero {
    display: block;
    height: 126px;
  }

  .remaked-hero::before {
    background: linear-gradient(90deg, rgba(244,248,226,.98) 0%, rgba(239,245,219,.88) 55%, rgba(239,245,219,.16) 100%);
  }

  .remaked-hero-copy {
    width: 78%;
    height: 100%;
    padding: 12px 13px;
  }

  .remaked-hero-eyebrow {
    margin-bottom: 3px;
    font-size: 8px;
  }

  .remaked-hero h1 {
    font-size: 25px;
    line-height: .94;
  }

  .remaked-hero-meta {
    gap: 5px;
    margin-top: 8px;
    font-size: 8px;
  }

  .remaked-hero-badge {
    padding: 3px 6px;
    font-size: 7px;
  }

  .remaked-hero p,
  .remaked-hero-source {
    display: none;
  }

  .remaked-hero-art {
    left: 49%;
  }

  .remaked-hero-art img {
    object-position: 55% 53%;
  }

  .remaked-density {
    display: none;
  }

  .remaked-app-frame {
    border-left: 0;
    border-right: 0;
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .remaked-link,
  .remaked-nav-button,
  .remaked-segment-button,
  .remaked-density-button {
    transition: none;
  }
}

/* The inherited calculator uses fixed-width rows. Keep approved names inside
   their own label; the full text remains available in the native title. */
#body [data-remaked-game-name]:not(option),
#body [data-remaked-game-name] .help {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#body [data-remaked-game-name] .help {
  display: block;
  max-width: 100%;
}

#body [id^="LearnSkill_"] [data-remaked-game-name] {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Catalog additions belong to the native Skill List panel, not a second modal.
   Deliberate native details work on keyboard/touch without instant hover noise. */
.remaked-modern #body #remaked-skill-list-row[hidden] { display: none !important; }
.remaked-modern #body #remaked-skill-list-row,
.remaked-modern #body #remaked-skill-list-row #Tab_1_1,
.remaked-modern #body #remaked-skill-list-row #Tab_1_1 > ul,
.remaked-modern #body #remaked-skill-list-row .sub_win {
  display: block; float: none !important; position: static !important;
  width: 100% !important; height: auto !important; box-sizing: border-box;
}
.remaked-modern #body #remaked-skill-list-row #LearnView { width: 100% !important; display: flow-root; box-sizing: border-box; }
.remaked-modern #body [data-remaked-catalog-skills] {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px;
  clear: both; width: 100%; box-sizing: border-box;
  padding: 8px; color: #30412b; background: #f6f8ef;
}
.remaked-modern #body [data-remaked-catalog-skills][hidden] { display: none !important; }
.remaked-modern #body [data-remaked-catalog-skills] h3 { grid-column: 1 / -1; margin: 0 0 6px; font: inherit; font-weight: 700; }
.remaked-modern #body [data-remaked-skill-variant] {
  min-width: 0; max-width: 100%; box-sizing: border-box;
  border-top: 1px solid #c3d5ac; overflow-wrap: anywhere;
}
.remaked-modern #body [data-remaked-skill-variant] :is(summary, strong, span, div, dl, dt, dd, p) {
  min-width: 0; max-width: 100%; overflow-wrap: anywhere;
}
.remaked-modern #body [data-remaked-skill-variant] dl {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.remaked-modern #body [data-remaked-skill-variant] summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  list-style: none; min-width: 0; cursor: pointer; padding: 7px 2px; line-height: 1.5;
}
.remaked-modern #body [data-remaked-skill-variant] summary::-webkit-details-marker { display: none; }
.remaked-modern #body [data-remaked-skill-variant] summary::before {
  content: '▸'; flex: 0 0 12px; font-weight: 700;
}
.remaked-modern #body [data-remaked-skill-variant][open] summary::before { content: '▾'; }
.remaked-modern #body [data-remaked-skill-variant] summary :is(strong, span) {
  flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere;
}
.remaked-modern #body [data-remaked-skill-variant] summary span {
  margin-left: 0; color: #556449; font-weight: 400;
}
.remaked-modern #body [data-remaked-skill-variant] summary:focus-visible { outline: 2px solid #50792d; outline-offset: 2px; }
.remaked-modern #body [data-remaked-skill-variant] > div { padding: 0 4px 8px; white-space: normal; }
.remaked-modern #body [data-remaked-skill-variant] p { margin: 5px 0; line-height: 1.5; white-space: pre-line; }
.remaked-modern #body [data-remaked-skill-variant] dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 5px; margin: 6px 0; }
.remaked-modern #body [data-remaked-skill-variant] :is(dt, dd) { margin: 0; }
.remaked-modern #body [data-remaked-variant-bonus] { font-weight: 700; }
@media (max-width: 620px) {
  .remaked-modern #body [data-remaked-catalog-skills] { grid-template-columns: minmax(0, 1fr); }
  .remaked-modern #body [data-remaked-skill-variant] summary { min-height: 44px; box-sizing: border-box; }
}

/* Native modal semantics keep background controls out of the keyboard and
   accessibility tree. Preserve the established full-viewport overlay design. */
dialog.remaked-modal {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  margin: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  border: 0;
  overflow: hidden;
  color: var(--rm-text);
}
dialog.remaked-modal:not([open]) { display: none !important; }
dialog.remaked-modal::backdrop { background: transparent; }
.remaked-search-panel, .remaked-build-manager, .remaked-compare, .remaked-updates-panel { overscroll-behavior: contain; }

.remaked-skip-link {
  position: fixed;
  inset-inline-start: 12px; top: 12px;
  z-index: 2000;
  transform: translateY(-200%);
  padding: 12px;
  border: 1px solid var(--rm-border-strong);
  border-radius: 8px;
  background: var(--rm-surface);
  color: var(--rm-text);
}
.remaked-skip-link:focus { transform: none; }
#remaked-calculator { scroll-margin-top: 16px; }

.remaked-updates-overlay {
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(34, 43, 28, .46);
  font-family: var(--rm-font);
}
.remaked-updates-panel {
  box-sizing: border-box;
  width: min(640px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--rm-border-strong);
  border-radius: var(--rm-radius);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow);
  font-size: 15px; line-height: 1.6;
}
.remaked-updates-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.remaked-updates-header h2 { margin: 0; font: 28px/1.2 Georgia, serif; }
.remaked-updates-version { color: var(--rm-muted); font-size: 13px; }
.remaked-updates-user-version { margin: 6px 0 12px; font-size: 14px; font-weight: 600; color: var(--rm-text, #25351d); }
.remaked-updates-panel :is(ul, li) {
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-align: start;
}
.remaked-updates-panel ul { padding-inline-start: 22px; }
.remaked-updates-panel li + li { margin-top: 8px; }
.remaked-updates-links { display: flex; flex-wrap: wrap; gap: 12px; }
.remaked-updates-links .remaked-link { font-size: 13px; }

body.remaked-modern :is(button, a, input, select, textarea):focus-visible {
  outline: auto;
  outline-offset: 2px;
}
/* Desktop is a compact working calculator, not a stack of touch cards. The
   source-delegating controls and phone-size targets remain unchanged. */
.remaked-build-actions { display: flex; flex: 2 1 0; min-width: 0; border: 1px solid var(--rm-border-strong); border-radius: 7px; overflow: hidden; }
.remaked-modern .remaked-build-actions .remaked-tool-button { flex: 1; border: 0; border-radius: 0; }
.remaked-modern .remaked-build-actions .remaked-tool-button + .remaked-tool-button { border-inline-start: 1px solid var(--rm-border-strong); }
.remaked-modern .remaked-build-actions .remaked-tool-button:focus-visible { outline: 2px solid var(--rm-accent-strong); outline-offset: -3px; }
.remaked-modern #body :is(#Tab_5_1, #Tab_6_1, #SwitchUse_1)[hidden] { display: none !important; }
[data-remaked-skill-column-header] { display: none; }
.remaked-skill-tools-actions { display: flex; gap: 6px; align-items: start; }
.remaked-skill-tools-actions > button { flex: 1; }
.remaked-skill-help { position: relative; }
.remaked-skill-help > summary { box-sizing: border-box; display: grid; place-items: center; list-style: none; min-width: 28px; min-height: 28px; border: 1px solid var(--rm-border); border-radius: 5px; background: var(--rm-surface); color: var(--rm-text); font: 700 13px/1.4 var(--rm-font); cursor: pointer; }
.remaked-skill-help > summary::-webkit-details-marker { display: none; }
.remaked-skill-help[open] > summary { background: var(--rm-accent-soft); }
.remaked-skill-help > summary:focus-visible { outline: auto; outline-offset: 2px; }
.remaked-skill-help > p { position: absolute; right: 0; top: 100%; z-index: 30; box-sizing: border-box; width: min(340px, calc(100vw - 64px)); padding: 10px; border: 1px solid var(--rm-border-strong); border-radius: 5px; background: var(--rm-surface); box-shadow: var(--rm-shadow); }
@media (max-width: 620px) { .remaked-skill-help > summary { min-width: 44px; min-height: 44px; } }
@media (max-width: 860px) {
  .remaked-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
  .remaked-nav-button { min-width: 0; padding-inline: 2px; font-size: 11px; }
  .remaked-build-actions { grid-column: 1 / -1; min-width: 0; }
}
@media (min-width: 861px) {
  .remaked-utilities-primary {
    display: grid;
    grid-template-columns: 60px 82px 100px;
    gap: 5px;
    flex: 0 0 auto;
  }
  .remaked-utilities-primary .remaked-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .remaked-utilities-controls {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .remaked-modern #body [data-remaked-calculator-main] { display: grid; grid-template-columns: minmax(0, 1fr) 310px; column-gap: 6px; }
  .remaked-modern #body [data-remaked-calculator-main] > ul { grid-column: 1 / -1; }
  .remaked-modern #body [data-remaked-calculator-main] > [data-remaked-calculator-code] { grid-column: 1; }
  .remaked-modern #body [data-remaked-calculator-main] > [data-remaked-calculator-code-actions] { grid-column: 2; }
  .remaked-modern #body [data-remaked-calculator-code-buttons] { margin-top: 0; }
  .remaked-modern #body:has([data-remaked-calculator-main]) { width: 100%; }
  .remaked-modern #body [data-remaked-calculator-columns] { align-items: start; }
  .remaked-modern #body [data-remaked-calculator-settings] { padding-block: 4px; }
  .remaked-modern #body [data-remaked-calculator-identity] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .remaked-modern #body [data-remaked-effect-row] { padding-block: 2px; }
  .remaked-modern #body .main:has(#TextEquip_0) { width: 100% !important; box-sizing: border-box; }
  .remaked-modern #body [data-remaked-calculator-attribute-results] {
    display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 8px; align-items: start;
  }
  .remaked-modern #body [data-remaked-calculator-attributes] { grid-template-columns: 1fr; gap: 3px; padding-bottom: 0 !important; }
  .remaked-modern #body [data-remaked-calculator-attribute] { position: relative; padding: 3px; }
  .remaked-modern #body [data-remaked-calculator-attribute] > ul:first-child { padding-inline-end: 22px; }
  .remaked-modern #body [data-remaked-calculator-attribute] > ul:nth-child(2) { position: absolute; inset: 3px 3px auto auto; }
  .remaked-modern #body [data-remaked-calculator-pair] > ul { padding-block: 2px; }
  .remaked-hero { height: 100px; }
  /* Preserve the whole Pandora composition, including its logo. A very wide
     cover box used to crop a thin strip out of the middle of the source art. */
  .remaked-hero-art { inset: 0 0 0 auto; width: auto; aspect-ratio: 1200 / 352; }
  .remaked-hero-art img { object-fit: contain; object-position: center; transform: none; filter: none; }
  .remaked-hero::before { background: linear-gradient(90deg, rgba(246,248,232,.3), transparent 65%); }
  .remaked-hero-art::after { background: linear-gradient(90deg, #e8efd2, transparent 12%); }
  .remaked-hero-copy { padding: 12px 24px; }
  .remaked-hero h1 { font-size: 36px; line-height: 1; letter-spacing: -.025em; }
  .remaked-hero-eyebrow, .remaked-hero p { display: none; }
  .remaked-hero-meta { margin-top: 6px; }
  .remaked-hero-source { position: absolute; right: 12px; bottom: 6px; margin: 0; color: var(--rm-text); background: rgba(251, 253, 247, .9); padding: 2px 5px; border-radius: 3px; }
  .remaked-modern #body #SkillSet[data-remaked-skill-controls] > ul:not(.remaked-skill-heading),
  [data-remaked-skill-column-header] {
    display: grid;
    grid-template-columns: minmax(108px, 1.25fr) repeat(2, minmax(80px, 1fr));
    gap: 4px;
    align-items: center;
  }
  .remaked-modern #body #SkillSet[data-remaked-skill-controls] > ul:not(.remaked-skill-heading) { padding-block: 1px; }
  .remaked-modern #body #SkillSet[data-remaked-skill-controls] .remaked-skill-heading { margin-top: 4px; padding: 4px 6px; }
  .remaked-modern #body [data-remaked-skill-row] > [id^="TextSkill_"] { grid-column: auto; }
  /* 20px value + two 28px targets + two 2px gaps fit the 80px track exactly. */
  .remaked-modern #body [data-remaked-skill-group] > ul { grid-template-columns: minmax(20px, 1fr) 28px 28px; gap: 2px; align-items: center; }
  .remaked-modern #body [data-remaked-skill-group] [id^="Skill_"] { text-align: end; }
  .remaked-modern #body [data-remaked-skill-caption] { position: absolute; width: 1px !important; height: 1px !important; overflow: hidden; clip-path: inset(50%); }
  .remaked-modern #body [data-remaked-skill-controls] .remaked-skill-primary { display: contents; }
  /* +1 is wider in Linux system-font fallbacks. Keep the signed step on one
     line with room inside its 28px target, not a platform-dependent tall row. */
  .remaked-modern #body [data-remaked-skill-controls] .remaked-skill-primary button { white-space: nowrap; padding-inline: 2px; }
  .remaked-modern #body [data-remaked-skill-controls] .remaked-skill-bulk { grid-column: 1 / -1; }
  [data-remaked-skill-column-header] { margin-top: 8px; color: var(--rm-muted); font: 600 12px/1.4 var(--rm-font); text-align: center; }
}
@media (min-width: 861px) and (max-width: 1099px) {
  .remaked-modern #body [data-remaked-calculator-columns] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .remaked-modern #body [data-remaked-calculator-character] { grid-column: 1 / -1; }
}

[data-remaked-skill-column-copy] { display: none; }

.remaked-calculator-number {
  box-sizing: border-box; width: 58px; min-width: 44px; min-height: 28px;
  padding: 3px 4px; border: 1px solid var(--rm-border); border-radius: 4px;
  background: #fff; color: var(--rm-text); font: 600 13px/1.4 var(--rm-font);
  font-variant-numeric: tabular-nums; text-align: end;
}
/* Author display:grid/flex rules must not override the native hidden state of
   retained source values or optional total outputs. */
.remaked-modern #body [hidden] { display: none !important; }
.remaked-calculator-number[aria-invalid="true"] { border-color: #a13030; }
[data-remaked-number-total] { margin-inline-start: 4px; color: var(--rm-muted); font-variant-numeric: tabular-nums; }
#remaked-number-status { margin: 4px 0; color: #8c2828; font-size: 12px; }
#remaked-number-status:empty { display: none; }
@media (max-width: 620px) { .remaked-calculator-number { min-height: 44px; font-size: 16px; } }

/* A complete PC workbench, not a scaled-down phone card stack. Its minimum
   width comes from readable character + two complete branch + effect columns.
   No fixed panel heights, hidden stats, smaller targets or source DOM rewrites. */
@media (min-width: 1366px) {
  /* Recover the old readable Effects width from outer margins rather than
     re-compressing tabs, narrowing Skills or losing any calculated labels. */
  .remaked-shell { width: min(1440px, calc(100% - 8px)); margin-top: 10px; }
  .remaked-header { margin-bottom: 8px; }
  /* The product/version is already present in the real header. Keep the
     source node for its callbacks, without a second decorative desktop title. */
  .remaked-modern #body [data-remaked-calculator-main] > ul:has(#Title) { display: none; }
  .remaked-hero { height: 100px; }
  .remaked-hero-copy { padding-block: 8px; }
  .remaked-hero h1 { font-size: 32px; }
  .remaked-modern #body [data-remaked-calculator-columns] {
    grid-template-columns: minmax(0, 1fr) 568px 224px;
  }
  .remaked-modern #body [data-remaked-calculator-attribute-results] {
    grid-template-columns: 142px minmax(0, 1fr); align-items: start;
  }
  .remaked-modern #body [data-remaked-calculator-attributes] { gap: 2px; }
  .remaked-modern #body [data-remaked-calculator-attribute] { padding-block: 2px; }
  .remaked-modern #body [data-remaked-calculator-steps] {
    grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
  }
  .remaked-modern #body [data-remaked-calculator-steps] button {
    padding-inline: 2px; white-space: nowrap;
  }
  .remaked-modern #body [data-remaked-calculator-attribute] > [data-remaked-calculator-steps] { padding-top: 0 !important; }
  .remaked-modern #body [data-remaked-calculator-results] {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
  }
  .remaked-modern #body [data-remaked-calculator-results] [data-remaked-calculator-pair] > ul { padding-block: 1px; }
  .remaked-modern #body [data-remaked-calculator-settings] {
    /* Align level/budgets with attributes and leave enough width for native
       option labels in Linux as well as Windows system-font metrics. */
    grid-template-columns: 142px minmax(0, 1fr);
  }
  .remaked-modern #body [data-remaked-calculator-budget] {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px;
  }
  .remaked-modern #body [data-remaked-calculator-level] { grid-column: 1 / -1; }
  .remaked-modern #body [data-remaked-calculator-budget] > ul:not([data-remaked-calculator-level]) {
    display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 2px;
  }
  .remaked-modern #body [data-remaked-calculator-budget] > ul:not([data-remaked-calculator-level]) > li {
    float: none; width: auto !important; margin: 0; height: auto !important;
  }
  .remaked-modern #body [data-remaked-calculator-actions] {
    /* Equal tracks keep the compact 3x2 action matrix aligned in every locale. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
  }
  .remaked-modern #body [data-remaked-calculator-actions] > ul { display: contents; }
  .remaked-modern #body [data-remaked-calculator-horse-container] { grid-column: 1 / -1; }
  .remaked-modern #body [data-remaked-calculator-horse] {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; margin-top: 0;
  }
  .remaked-modern #body [data-remaked-calculator-horse] :is(tbody, tr) { display: contents; }
  .remaked-modern #body [data-remaked-calculator-horse] td { display: block; padding: 0; }
  .remaked-modern #body #SkillSet[data-remaked-skill-controls] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; align-content: start;
  }
  .remaked-skill-tools { grid-column: 1 / -1; grid-row: 1; }
  [data-remaked-skill-column-header] {
    grid-template-columns: repeat(2, minmax(108px, 1.25fr) minmax(80px, 1fr) minmax(80px, 1fr));
  }
  [data-remaked-skill-column-copy] { display: block; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="0"] { grid-column: 1; grid-row: 2; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="1"] { grid-column: 1; grid-row: 3; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="2"] { grid-column: 1; grid-row: 4; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="3"] { grid-column: 1; grid-row: 5; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="4"] { grid-column: 1; grid-row: 6; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="5"] { grid-column: 1; grid-row: 7; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="6"] { grid-column: 2; grid-row: 2; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="7"] { grid-column: 2; grid-row: 3; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="8"] { grid-column: 2; grid-row: 4; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="9"] { grid-column: 2; grid-row: 5; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="10"] { grid-column: 2; grid-row: 6; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="11"] { grid-column: 2; grid-row: 7; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="12"] { grid-column: 1; grid-row: 8; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="13"] { grid-column: 1; grid-row: 9; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="14"] { grid-column: 1; grid-row: 10; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="15"] { grid-column: 1; grid-row: 11; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="16"] { grid-column: 1; grid-row: 12; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="17"] { grid-column: 2; grid-row: 8; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="18"] { grid-column: 2; grid-row: 9; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="19"] { grid-column: 2; grid-row: 10; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="20"] { grid-column: 2; grid-row: 11; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="21"] { grid-column: 2; grid-row: 12; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="22"] { grid-column: 1 / -1; grid-row: 13; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="23"] { grid-column: 1; grid-row: 14; }
  .remaked-modern #body #SkillSet > [data-remaked-skill-row="24"] { grid-column: 2; grid-row: 14; }
  .remaked-modern #body [data-remaked-effect-row] {
    grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 4px;
  }
  .remaked-modern #body [data-remaked-effect-row] > li:empty { display: none; }
}

/* Hybrid C composition: separate editable character/skill controls from quiet
   calculated text. These are presentation groups, not another set of state. */
.remaked-modern #body [data-remaked-calculator-main] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.remaked-modern #body [data-remaked-calculator-columns] { padding-top: 0; gap: 12px; }
.remaked-modern #body [data-remaked-calculator-main] > ul > :is(.line1, .line2) { display: none; }
.remaked-modern #body :is([data-remaked-calculator-character], #SkillSet, [data-remaked-calculator-effects]) {
  border: 1px solid var(--rm-border);
  border-radius: 7px;
  background: var(--rm-surface);
  padding: 6px !important;
}
.remaked-modern #body .remaked-workbench-title {
  box-sizing: border-box;
  min-width: 0;
  margin: 0 0 6px;
  padding: 3px 6px;
  background: var(--rm-surface-2);
  color: var(--rm-text);
  font: 700 14px/1.5 var(--rm-font);
  text-align: start;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: anywhere;
}
.remaked-modern #body :is(#Status, #StatusView) > .remaked-workbench-title {
  grid-column: 1 / -1;
  font-size: 12px;
  margin-bottom: 2px;
  padding-inline: 4px;
}
.remaked-skill-tools-actions { align-items: start; }
.remaked-modern #body .remaked-skill-tools-actions > .remaked-workbench-title { flex: 1; margin-bottom: 0; }
.remaked-skill-tools-actions > button { flex: 0 1 auto; width: auto; padding-inline: 8px; }
.remaked-modern #body #StatusView [data-remaked-calculator-pair] {
  border: 0;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid #e2e9d8;
}
.remaked-modern #body .remaked-racial-description { box-sizing: border-box; float: none; clear: both; width: 100%; height: auto; grid-column: 1 / -1; padding: 7px 9px; border-top: 1px solid #b5ca93; font: 12px/1.45 var(--rm-font); white-space: normal; overflow-wrap: anywhere; }
.remaked-racial-description p { margin: 4px 0 0; }
.remaked-racial-description p:last-child:not([hidden]) { color: #665019; }
.remaked-modern #body #StatusView [data-remaked-calculator-pair] .input_gt { font-weight: 600; }
.remaked-modern #body [data-remaked-calculator-identity] [data-remaked-calculator-pair] { background: #fff; }
@media (min-width: 1366px) {
  .remaked-modern #body [data-remaked-calculator-columns] { grid-template-columns: minmax(0, 1fr) 582px 232px; }
}
@media (min-width: 861px) {
  /* Faint landscape extends the existing approved art across the banner;
     the primary, complete composition remains uncropped on the right. */
  .remaked-hero {
    background: linear-gradient(90deg, #f6f3df 0%, rgba(240,244,223,.96) 33%, rgba(240,244,223,.7) 59%, #e5edcf 78%), url('./pandora-hero.webp') left 40% / 240% auto no-repeat;
  }
  .remaked-hero-art::after { background: linear-gradient(90deg, #e5edcf, transparent 12%); }
}


/* Direct skill allocation: Adeptness is the only editable branch value.
   Potential is a class-defined read-only limit, so each group needs only its
   caption plus one value/control at every breakpoint. */
.remaked-modern #body [data-remaked-skill-group] > ul {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.remaked-modern #body [data-remaked-skill-group] .remaked-skill-number {
  width: 58px;
  justify-self: end;
}


/* Character point budgets share one compact geometry on the desktop
   workbench. Keep the compact retained Status/Skill/Potential row height and
   shrink Level to match it instead of making the three budget rows taller. */
@media (min-width: 621px) {
  .remaked-modern #body [data-remaked-calculator-budget] {
    gap: 0 !important;
  }
  .remaked-modern #body [data-remaked-calculator-budget] > ul {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 2px;
    width: 100%;
    height: 28px;
  }
  .remaked-modern #body [data-remaked-calculator-budget] > ul > li {
    box-sizing: border-box;
    float: none !important;
    width: auto !important;
    height: 28px !important;
    min-width: 0;
    margin: 0 !important;
  }
  .remaked-modern #body [data-remaked-calculator-budget] > ul > :is(.input_lt, .input_gt) {
    display: flex;
    align-items: center;
  }
  .remaked-modern #body #remaked-level-label {
    /* The generic Modern level reset removes the Legacy label padding. Restore
       the same tiny inset used by Status/Skill/Potential so Level does not sit
       flush against the left edge. */
    padding: 2px 1px 0 2px !important;
  }
  .remaked-modern #body [data-remaked-calculator-budget] > ul > .input_gt > ul {
    width: 100%;
    justify-content: flex-end;
  }
  .remaked-modern #body [data-remaked-calculator-level] {
    grid-column: auto;
  }
  .remaked-modern #body [data-remaked-calculator-level] .remaked-calculator-number {
    width: 100%;
    height: 28px;
    min-height: 28px;
    padding-block: 1px;
  }
}

/* A level decrease may leave a previously valid allocation over budget.
   Keep the values intact, but make the invalid budget impossible to miss. */
.remaked-modern #body [data-remaked-budget-deficit] {
  border-radius: 3px;
  background: #fff3f3;
}
.remaked-modern #body [data-remaked-budget-deficit] :is(.input_lt, .input_gt) {
  color: #8c2828 !important;
  font-weight: 700;
}
.remaked-modern #body [data-remaked-budget-deficit] .input_lt {
  background: #f4dede !important;
}
#remaked-budget-warning {
  margin: 2px 0 5px;
  padding: 2px 6px;
  border-left: 2px solid #a13030;
  color: #8c2828;
  font-size: 11px;
  line-height: 1.35;
}
#remaked-budget-warning:empty {
  display: none;
}


/* Compact alignment polish for the character and skill editors. Keep native
   number inputs (and therefore their browser-provided +/-1 spinner buttons),
   but trim unused horizontal space without assuming every skill is two-digit:
   the recovered skill table includes requirements up to 102. */
.remaked-modern {
  --rm-compact-number-width: 52px;
  --rm-attribute-number-width: 44px;
  --rm-skill-number-width: var(--rm-compact-number-width);
}
.remaked-modern #body [data-remaked-calculator-attribute] {
  position: relative;
}
.remaked-modern #body [data-remaked-calculator-attribute] > ul:first-child > .input_gt {
  grid-template-columns: var(--rm-attribute-number-width) minmax(0, 1fr);
}
.remaked-modern #body [data-remaked-calculator-attribute] .remaked-calculator-number {
  width: var(--rm-attribute-number-width);
}
.remaked-modern #body [data-remaked-skill-group] .remaked-skill-number {
  width: var(--rm-skill-number-width);
}

/* The retained 2P/3P cost is a second source row. In Modern it is a small
   read-only badge, so anchor it to the vertical middle of the stat card
   instead of leaving its text at the source row's top edge. */
.remaked-modern #body [data-remaked-calculator-attribute] > ul:nth-of-type(2) {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  pointer-events: none;
}
.remaked-modern #body [data-remaked-calculator-attribute] > ul:nth-of-type(2) > [id^="Status"][id$="_4"] {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Preserve the original input_lt2_2 translucent fill/color; Modern still
     owns the compact geometry, border reset and vertical centering here. */
  line-height: 1;
}

/* Riding source cells use Legacy top padding. Normalize only the Modern
   presentation so both Re Horse and the percentage sit on the visual midline. */
.remaked-modern #body [data-remaked-calculator-horse] tr:last-child > td > ul {
  min-height: 28px;
  align-items: stretch;
}
.remaked-modern #body [data-remaked-calculator-horse] #Text_19,
.remaked-modern #body [data-remaked-calculator-horse] tr:last-child .input_gt {
  box-sizing: border-box;
  min-height: 28px;
  margin: 0 !important;
  padding: 0 6px !important;
}
.remaked-modern #body [data-remaked-calculator-horse] #Text_19 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.remaked-modern #body [data-remaked-calculator-horse] tr:last-child .input_gt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.remaked-modern #body [data-remaked-calculator-horse] #Status_81 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Riding is the 28px companion of "Re Horse / %" on non-phone
   layouts, not a seventh 35px action. Preserve the 44px mobile touch target. */
@media (min-width: 621px) {
  .remaked-modern #body [data-remaked-calculator-horse] [data-remaked-calculator-action="Text_16"] {
    height: 28px;
    min-height: 28px;
  }
}

/* Headings follow the actual right-aligned value tracks, not the center of the
   flexible 80px source columns. This keeps Adeptness/Potential centered over
   their controls while the panel narrows. */
@media (min-width: 861px) {
  .remaked-modern #body #SkillSet[data-remaked-skill-controls] {
    /* Keep a small breathing strip at the right edge for headings in wide
       monospace/system-font fallbacks without changing control alignment. */
    padding-inline-end: 10px !important;
  }
  .remaked-modern #body [data-remaked-skill-group="Potential"] [data-remaked-skill-potential-value] {
    box-sizing: border-box;
    width: var(--rm-compact-number-width) !important;
    justify-self: end;
    text-align: end !important;
  }
  [data-remaked-skill-column-header] > span:nth-child(2),
  [data-remaked-skill-column-header] > span:nth-child(3),
  [data-remaked-skill-column-header] > span:nth-child(5),
  [data-remaked-skill-column-header] > span:nth-child(6) {
    box-sizing: border-box;
    /* Give the label 2px more breathing room than the 52px number field,
       then shift it 1px so both boxes keep the exact same visual center. */
    width: calc(var(--rm-compact-number-width) + 2px);
    justify-self: end;
    /* CI geometry shows the header track sits 2px to the right of the
       retained value track at the single-column desktop breakpoint. The
       wider caption box already shifts its center 1px left; one more pixel
       completes the alignment without clipping Adeptness. */
    transform: translateX(-1px);
    text-align: center;
    font-size: 11px;
    white-space: nowrap;
    overflow: visible;
  }
}

/* At the two-column desktop breakpoint, mirror the real 12px gap between the
   two skill-row columns. The 4px spacer plus the two normal 4px grid gaps makes
   the header geometry identical to the rows below it. */
@media (min-width: 1366px) {
  [data-remaked-skill-column-header] {
    grid-template-columns:
      minmax(108px, 1.25fr) minmax(80px, 1fr) minmax(80px, 1fr)
      4px
      minmax(108px, 1.25fr) minmax(80px, 1fr) minmax(80px, 1fr);
    column-gap: 4px;
  }
  [data-remaked-skill-column-header]::before {
    content: "";
    grid-column: 4;
    grid-row: 1;
  }
  [data-remaked-skill-column-header] > span:nth-child(1) { grid-column: 1; }
  [data-remaked-skill-column-header] > span:nth-child(2) { grid-column: 2; }
  [data-remaked-skill-column-header] > span:nth-child(3) { grid-column: 3; }
  [data-remaked-skill-column-header] > span:nth-child(4) { grid-column: 5; }
  [data-remaked-skill-column-header] > span:nth-child(5) { grid-column: 6; }
  [data-remaked-skill-column-header] > span:nth-child(6) { grid-column: 7; }
}


/* Modern 3.15: keep compact translated labels readable without changing the
   retained calculator's source values or callbacks. */
.remaked-modern #body [data-remaked-calculator-attribute] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  column-gap: 2px;
  align-items: center;
}
.remaked-modern #body [data-remaked-calculator-attribute] > ul:first-child {
  grid-column: 1;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 3px;
  min-width: 0;
  padding-inline-end: 0 !important;
}
.remaked-modern #body [data-remaked-calculator-attribute] > ul:first-child > [id^="Text_"] {
  width: 32px !important;
  min-width: 32px;
}
.remaked-modern #body [data-remaked-calculator-attribute] > ul:first-child > .input_gt {
  grid-template-columns: 44px minmax(32px, 1fr);
  column-gap: 2px;
  min-width: 0;
  overflow: visible;
}
.remaked-modern #body [data-remaked-calculator-attribute] .remaked-calculator-number {
  width: 44px;
  min-width: 44px;
}
.remaked-modern #body [data-remaked-calculator-attribute] [data-remaked-number-total] {
  min-width: 32px;
  overflow: visible;
  white-space: nowrap;
}
.remaked-modern #body [data-remaked-calculator-attribute] > ul:nth-of-type(2) {
  position: static;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  width: 16px;
  min-width: 16px;
}
.remaked-modern #body [data-remaked-calculator-attribute] > ul:nth-of-type(2) > [id^="Status"][id$="_4"] {
  width: 16px !important;
  min-width: 16px;
  font-size: 11px;
}

.remaked-modern #body [data-remaked-calculator-results] [id^="TextStatus_"][title]:not(:has(.help)) {
  cursor: help;
  text-decoration: underline;
}

@media (min-width: 621px) {
  .remaked-modern #body [data-remaked-picker-slot] {
    display: flex;
    align-items: center;
  }
  .remaked-modern #body [data-remaked-picker-slot] > [data-remaked-picker-slot-label] {
    box-sizing: border-box;
    width: 76px !important;
    min-width: 76px;
    padding-inline-end: 5px !important;
    text-align: left !important;
    white-space: nowrap;
    overflow: visible;
  }
  .remaked-modern #body [data-remaked-picker-slot] > .input_gt {
    box-sizing: border-box;
    width: calc(100% - 76px) !important;
    min-width: 0;
  }
}
.remaked-modern #body [data-remaked-equipment-reset] {
  box-sizing: border-box;
  width: 72px !important;
  min-width: 72px;
  max-width: 72px;
  padding-inline: 8px !important;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
}

/* Effect tabs share the same readable typography in every locale. The
   narrow horizontal padding/tracking fits descriptive Russian text inside the
   existing two equal-width controls without changing either button's geometry. */
.remaked-modern #body [data-remaked-effect-tabs] li,
.remaked-modern #body [data-remaked-effect-tabs] .remaked-calculator-action {
  min-width: 0;
}
.remaked-modern #body [data-remaked-effect-tabs] .remaked-calculator-action {
  white-space: nowrap;
  padding-inline: 2px;
  font-size: 11px;
  letter-spacing: -0.06em;
}

/* Russian skill headings are longer than the compact numeric controls. Keep
   their boxes inside the existing 80px tracks: Adeptness may break at its
   natural space, while Potential stays whole at a slightly smaller size. */
@media (min-width: 861px) {
  html[lang="ru"] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(2),
  html[lang="ru"] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(3),
  html[lang="ru"] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(5),
  html[lang="ru"] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(6) {
    width: 60px;
  }
  html[lang="ru"] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(2),
  html[lang="ru"] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(5) {
    white-space: normal;
    line-height: 1.15;
    font-size: 10px;
  }
  html[lang="ru"] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(3),
  html[lang="ru"] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(6) {
    white-space: nowrap;
    font-size: 9px;
    letter-spacing: -0.01em;
  }
}

/* Never shorten, ellipsize or wrap calculated result names. Result rows
   keep their compact height; the shared column layout must provide sufficient
   room for every text and its corresponding value in all four languages. */
.remaked-modern #body [data-remaked-calculator-results] [data-remaked-calculator-pair] > ul {
  box-sizing: border-box;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  overflow: visible;
}
.remaked-modern #body [data-remaked-calculator-results] [id^="TextStatus_"] {
  display: block;
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: normal;
  white-space: nowrap !important;
  line-height: 1.45;
}
.remaked-modern #body [data-remaked-calculator-results] [id^="TextStatus_"] .help {
  display: inline;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: normal;
  white-space: nowrap !important;
}
/* Phone screens are too narrow for two simultaneous full captions.
   One shared responsive track keeps the complete name and numeric value. */
@media (max-width: 860px) {
  .remaked-modern #body [data-remaked-calculator-results] {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Keep Character, Skills and Effects alongside each other, including the
   equipment-above-the-fold desktop contract. Skill input and Potential do not
   need the original 80px tracks: their actual input is 58px and the number
   is smaller. Reclaim unused track space without changing any skill text,
   target height or gameplay behavior. */
@media (min-width: 1366px) {
  .remaked-modern #body [data-remaked-calculator-columns] {
    /* Results use only the width they need; the reclaimed space stays in Skills.
       This exact desktop geometry is shared by RU/EN/JP/TW. */
    grid-template-columns: 600px minmax(0, 1fr) 232px;
    gap: 4px;
  }
  /* Base inputs retain their 44px fields and cost badges within a tighter
     left track. Give the freed pixels to the three result-label columns
     rather than shrinking the skill panel or hiding translated text. */
  .remaked-modern #body [data-remaked-calculator-attribute-results],
  .remaked-modern #body [data-remaked-calculator-settings] {
    grid-template-columns: 134px minmax(0, 1fr);
  }
  /* Keep the 2P cost badge clear of three-digit final stats even inside
     the 134px attribute track; the number fields themselves stay unchanged. */
  .remaked-modern #body [data-remaked-calculator-attribute] [data-remaked-number-total] {
    min-width: 30px;
    margin-inline-start: 2px;
  }
  .remaked-modern #body #SkillSet[data-remaked-skill-controls] > ul:not(.remaked-skill-heading) {
    grid-template-columns: minmax(102px, 1fr) 68px 54px;
    column-gap: 3px;
  }
  /* Keep the numeric input centered beneath its Learned heading rather
     than right-aligning a 52px field within a wider 68px value track. */
  .remaked-modern #body #SkillSet[data-remaked-skill-controls] .remaked-skill-number {
    justify-self: center;
  }
  .remaked-modern #body [data-remaked-skill-column-header] {
    grid-template-columns:
      minmax(102px, 1fr) 68px 54px
      4px
      minmax(102px, 1fr) 68px 54px;
    column-gap: 3px;
    min-height: 28px;
    align-items: center;
  }
  /* The headings and read-only potential values share stable tracks.
     In particular, "Потенциал" must remain one line in every language. */
  .remaked-modern #body #SkillSet[data-remaked-skill-controls] [data-remaked-skill-potential-value] {
    display: block;
    box-sizing: border-box;
    width: 54px;
    max-width: 54px;
    text-align: center;
  }
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(2),
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(3),
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(5),
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(6) {
    box-sizing: border-box;
    width: 100%;
    transform: none;
    overflow-wrap: normal;
    white-space: nowrap;
    text-align: center;
    font-size: 9px;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  /* The paired row has a two-pixel grid-gap offset from the combined header. */
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(2),
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(3),
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(5),
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(6) {
    transform: translateX(-2px);
  }
  .remaked-modern #body [data-remaked-calculator-results] {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.06fr) minmax(0, 1.06fr);
    gap: 1px;
  }
  .remaked-modern #body [data-remaked-calculator-results] [data-remaked-calculator-pair] > ul {
    height: 20px;
    min-height: 20px;
    max-height: 20px;
  }
}
/* One common compact font/spacing across all four result localizations. */
.remaked-modern #body [data-remaked-calculator-results] [data-remaked-calculator-pair] > ul {
  gap: 2px;
  padding-inline: 1px;
}
.remaked-modern #body [data-remaked-calculator-results] [data-remaked-calculator-pair] :is([id^="TextStatus_"], [id^="TextStatus_"] .help, .input_gt) {
  font-size: 10.75px;
}
/* Save the last few pixels for full-length translations without shrinking
   their font or the numeric-value cells. All locales share this tracking. */
.remaked-modern #body [data-remaked-calculator-results] [id^="TextStatus_"],
.remaked-modern #body [data-remaked-calculator-results] [id^="TextStatus_"] .help {
  letter-spacing: -0.03em;
}
/* Modern 3.78: numeric totals of 100+ cannot overlap the 2P/3P cost badge.
   Widen only the affected character sheet, never truncate actual numbers,
   and preserve the existing 44px spinner input / full Skills track. */
.remaked-modern #body [data-remaked-calculator-attribute][data-remaked-wide-total] > ul:first-child > .input_gt {
  grid-template-columns: 44px minmax(44px, 1fr);
}
.remaked-modern #body [data-remaked-calculator-attribute][data-remaked-wide-total] [data-remaked-number-total] {
  min-width: 44px;
  overflow: visible;
  white-space: nowrap;
}
@media (min-width: 621px) {
  .remaked-modern #body [data-remaked-calculator-attribute-results]:has([data-remaked-wide-total]),
  .remaked-modern #body [data-remaked-calculator-character]:has([data-remaked-wide-total]) [data-remaked-calculator-settings] {
    grid-template-columns: 156px minmax(0, 1fr);
  }
}

/* A deliberately unavailable mounted DEF needs an explanation, not a silently
   missing stat. Keep its note below the fixed one-line result rows. */
.remaked-modern #body [data-remaked-calculator-results] [data-remaked-mounted-defense-note] {
  box-sizing: border-box;
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 7px 9px;
  margin: 6px 0 2px;
  border-inline-start: 3px solid #77965f;
  border-radius: 4px;
  background: #edf4e5;
  color: #39512e;
  font: 12px/1.45 var(--rm-font);
  white-space: normal;
  overflow-wrap: anywhere;
}
.remaked-modern #body [data-remaked-calculator-results] [data-remaked-mounted-defense-note][hidden] {
  display: none !important;
}


/* Intermediate desktop (861–1365px): keep both Skill headings on one line
   with the exact same size on RU/EN/JP/TW. The previous RU-only rule allowed
   wrapping and made the header geometry language-dependent. */
@media (min-width: 861px) and (max-width: 1365px) {
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(2),
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(3),
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(5),
  html[lang] body.remaked-modern #body [data-remaked-skill-column-header] > span:nth-child(6) {
    box-sizing: border-box;
    width: 64px;
    max-width: 64px;
    justify-self: end;
    /* Center on the retained 52px control, not the wider 64px caption. */
    transform: translateX(4px);
    white-space: nowrap;
    overflow: visible;
    overflow-wrap: normal;
    font-size: 9px;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-align: center;
  }
}