input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
  border-radius: 2px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f8f9fc;
  border: 1px solid #6b7280;
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f8f9fc;
  border: 1px solid #6b7280;
  cursor: pointer;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root {
  --color-background-primary: light-dark(rgba(255, 255, 255, 1), rgba(48, 48, 46, 1));
  --color-background-secondary: light-dark(rgba(245, 244, 237, 1), rgba(38, 38, 36, 1));
  --color-text-primary: light-dark(rgba(20, 20, 19, 1), rgba(250, 249, 245, 1));
  --color-text-secondary: light-dark(rgba(61, 61, 58, 1), rgba(194, 192, 182, 1));
  --font-mono: ui-monospace, monospace;
}
  .app { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem; }
  .header { border-bottom: 2px solid #1a5fd4; padding-bottom: 1rem; margin-bottom: 1.5rem; }
  .header h1 { margin-bottom:0;font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: #0d3d8a; font-family: 'Georgia', serif; }
  .header p { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; }
  .layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; }
  .panel { background: #f4f8ff; border: 0.5px solid #b5d4f4; border-radius: 10px; padding: 1.25rem; }
  .panel-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #185fa5; margin-bottom: 1rem; }
  .field { margin-bottom: 1rem; }
  .field label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 5px; }
  .field label span { font-weight: 600; color: #185fa5; font-size: 13px; }
  input[type=range] { width: 100%; accent-color: #1a5fd4; }
  .divider { border: none; border-top: 0.5px solid #b5d4f4; margin: 1rem 0; }
  .toggles { display: flex; flex-direction: column; gap: 8px; }
  .toggle-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--color-text-secondary); }
  .toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
  .toggle input { opacity: 0; width: 0; height: 0; }
  .slider-t { position: absolute; inset: 0; background: #ccc; border-radius: 20px; cursor: pointer; transition: background 0.2s; }
  .slider-t:before { content: ''; position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; left: 3px; top: 3px; transition: transform 0.2s; }
  .toggle input:checked + .slider-t { background: #1a5fd4; }
  .toggle input:checked + .slider-t:before { transform: translateX(16px); }
  .output-area { min-height: 400px; }
  .output-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
  .output-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #185fa5; }
  .output-actions { display: flex; gap: 6px; }
  .action-btn { padding: 5px 10px; font-size: 12px; border: 0.5px solid #b5d4f4; background: #fff; border-radius: 6px; cursor: pointer; color: #185fa5; display: flex; align-items: center; gap: 4px; transition: background 0.15s; }
  .action-btn:hover { background: #e6f1fb; }
  .action-btn.copied { background: #eaf3de; border-color: #97c459; color: #3b6d11; }
.output-area { 
  min-width: 0;
}
  .output-box {max-height:640px; overflow:auto; background: #fff; border: 0.5px solid #b5d4f4; border-radius: 10px; padding: 1.25rem 1.5rem; min-height: 360px; font-family: 'Georgia', serif; font-size: 15px; line-height: 1.85; color: var(--color-text-primary); }
  .output-box p { margin-bottom: 1em; }
  .output-box p:last-child { margin-bottom: 0; }
  .output-box ul, .output-box ol { margin-bottom: 1em; padding-left: 1.5em; }
  .output-box li { margin-bottom: 0.25em; }
  .output-box pre { font-family: var(--font-mono); font-size: 13px; background: none!important; border: none!important; padding: 0!important; overflow-x: auto; white-space: pre-wrap!important; line-height: 1.6; margin-bottom: 1em; }
.output-box ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.output-box ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}
  .stat-bar { display: flex; gap: 8px; margin-bottom: 0.75rem; flex-wrap: wrap; }
  .stat { font-size: 11px; color: #185fa5; background: #e6f1fb; border-radius: 5px; padding: 3px 8px; }
  .select-field { width: 100%; padding: 6px 8px; border: 0.5px solid #b5d4f4; border-radius: 6px; background: #fff; font-size: 13px; color: var(--color-text-primary); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23185fa5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px; cursor: pointer; }
  #listCountField { display: none; }

@media (max-width: 992px) {
  .layout {
    grid-template-columns: 1fr;
  }
  
  .app {
    padding: 1rem 0.5rem;
  }
}