:root {
    /* Color Variables */
    --mred: #FF9D9F;
    --myellow: #FFD38C;
    --mgreen: #CBE070;
    --mdarkgreen: #11893A;
    --mdarkred: #C53131;
    --mblue: #9FADE3;
    --mviolet: #AE8FC0;
    --mdarkblue: #0881d8;
    --mbutbkghv: #0056b3;
    --mbutbkgac: #003d7a;
    --mmesborder: #ccc;

    --primary: #00A4E9; /* Blue */
    --success: #00D672; /* Green */
    --warning: #FF6433; /* Orange */
    --error: #FF2337; /* Red */
    --secondary: #F8AE3C; /* Yellow */

    --bgyellow: #FFCD66;
    --bbyellow: #E0A424;
    --bggreen: #64B461;
    --bbgreen: #3E943B;
    --bgred: #ff2337;
    --bbred: #B81422;
    --bgorange: #FF6433;
    --bborange: #C43D1C;
    --bgwhite: #F5F5F5;
    --bggrey: #CFCFCF;
}

/* --- Dark Theme --- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-scheme-background: #252525;
        --color-scheme-text-color: #EFEFEF;
        --mapp: #B9B9C8;
        --mmessage: #2b2b2b;
        --mdesc: #B9B9C8;
        --mbkg: #383838;
        --msbkg: #2B2B2B; /* Container background */
        --mhbkg: #454545; /* Header/Input background */
        --mhbor: #FF595E;
        --mborder: #666666;
        --mactive: #B9B9C8;
        --minactive: #FF5C5F;
        --mexited: #F9B236;
        --mmenu: #838282;
        --hoo: #454545;
        --imgbkg: #2B2B2B;
        --mheader: #000000;
        --msearch: #3B3B3B;
        --mplaceholdertext: #C9C9C9;
    }
}

/* --- Light Theme --- */
@media (prefers-color-scheme: light) {
    :root {
        --color-scheme-background: #F8F8F8;
        --color-scheme-text-color: #555657;
        --mapp: #313140;
        --mmessage: #e1e1e1;
        --mdesc: #696969;
        --mbkg: #F5F5F5;
        --msbkg: #FCFCFC; /* Container background */
        --mhbkg: #EEEEEE; /* Header/Input background */
        --mhbor: #FF6368;
        --mborder: #CFCFCF;
        --mmenu: #909090;
        --mactive: #5E6E18;
        --minactive: #FF5C5F;
        --mexited: #F9B236;
        --hoo: #FBFBFB;
        --imgbkg: #EBEBEB;
        --mheader: #FFFFFF;
        --msearch: #FBFBFB;
        --mplaceholdertext: #808080;
    }
}


html {
  background: var(--color-scheme-background);
  color: var(--color-scheme-text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.25;
  margin: 0;
  display: flex;
  justify-content: center;
}

body {
  margin: 8px 18px;
  max-width: 760px;
  width: 100%;
  box-sizing: border-box;
}

header h1, h1 {
  margin: 6px 0 2px;
  color: var(--placeholder);
  font-size: 1.2rem;
}

pre {
  background: var(--mhbkg);
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--mborder);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 5px 0 10px;
}


code { font-family: "Courier New", monospace; }

.placeholder {
  color: var(--primary);
  font-weight: 600;
}

.panel-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.panel-header span {
  font-size: 0.8rem;
  opacity: 0.7;
}

.panel-body { display: block; }
.panel.open .panel-body { display: block; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2px;
}

th, td {
  border: 1px solid var(--mborder);
  padding: 8px;
  font-size: 0.85rem;
  vertical-align: top;
}

th {
  background: var(--mhbkg);
  font-weight: 600;
}

.required {
  font-weight: 600;
  color: var(--primary);
}

.subtitle {
  margin: 0 0 10px;
  color: var(--mplaceholdertext);
  font-size: 0.9rem;
}

.panel {
  background: var(--msbkg);
  padding: 8px;
  border: 1px solid var(--mborder);
  border-radius: 6px;
  margin-bottom: 12px;
}

.row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.row.small {
  max-width: 240px;
}

label {
  font-weight: 600;
  color: var(--placeholder);
}

input,
select {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--mborder);
  background: var(--mhbkg);
  color: var(--mplaceholdertext);
  font-size: 0.85rem;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--mborder);
  background: var(--mhbkg);
  color: var(--mplaceholdertext);
  font-size: 0.85rem;
  box-sizing: border-box;
  overflow-x: auto;
  white-space: nowrap;
}


textarea {
  resize: vertical;
}

.field-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.field-row > input,
.field-row > textarea,
.field-row > select {
  flex: 1;
}

/* --- Inline Controls Flexbox and Size (FIXED) --- */
.inline-controls {
  display: flex;
  flex-direction: row; /* FIX: Changed to row to put buttons on one line */
  gap: 6px;
}

.inline-controls button {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 1.2rem;
  border-radius: 6px;
  border: 1px solid var(--mborder);
  background: var(--bg);
  cursor: pointer;
  /*transition: all 0.2s ease-out;*/
}

/* --- Inline Controls Color Styles --- */

/* Remove default border for colored buttons and add a subtle shadow */
.inline-controls .add,
.inline-controls .remove {
  border: none;
  color: white;
  /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
}

/* Color for the 'Add' button (Success) */
.inline-controls .add {
  background-color: var(--primary);
}

.inline-controls .add:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}

/* Color for the 'Remove' button (Error) */
.inline-controls .remove {
  background-color: var(--warning);
}

.inline-controls .remove:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}


.inline-controls button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}

.section-toggle {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--placeholder);
  font-size: 0.9rem;
  border: none;
  font-weight: 700;
  padding: 6px 0;
  cursor: pointer;
}

.section-body {
  padding: 6px 0 0 0;
}

.controls {
  margin-top: 8px;
}

/* --- Global Button Group Styles --- */

.clear-form-btn,
.button-group button {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--mborder);
  transition: all 0.2s ease-out;
}

/* Style for the 'Clear Form' button (Warning) */
.clear-form-btn {
  background-color: var(--warning);
  color: white;
  border-color: var(--warning);
}

.clear-form-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}

/* --- Main Action Button Styles --- */

.button-group {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.button-group button {
  flex: 1;
}

/* Style for 'Copy JSON' button (Primary) */
#copyJsonBtn {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

#copyJsonBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}

/* Style for 'Clear Output' button (Warning) */
#clearOutputBtn {
  background-color: var(--warning);
  color: white;
  border-color: var(--warning);
}

#clearOutputBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}

/* --- Output and Footer Styles --- */

#output {
  font-family: monospace;
  font-size: 0.95rem;
  min-height: 180px;
  width: 100%;
  padding: 10px;
  border-radius: 6px;
}

.invalid {
  border-color: var(--error) !important;
  box-shadow: 0 2px 6px rgba(255, 35, 55, 0.12);
}

footer.copyright {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  color: var(--mborder);
  font-size: 0.8rem;
}

/* --- Media Queries --- */

@media (max-width: 720px) {
  .inline-controls button {
    width: 40px;
  }
}