/* Layout */
.container { max-width: 900px; margin: 40px auto; padding: 0 16px; }
.panel { border: 1px solid #e6ecf5; border-radius: 10px; padding: 12px; margin: 12px 0; background: #fff; box-shadow: 0 4px 12px rgba(16,24,40,.03); }
.panel h3 { margin: 0 0 8px; font-size: 1.05rem; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hint { font-size: 12px; color: #6b7a90; }
.kv { font-size: 13px; color: #425569; }
.kv strong { color: #0b1526; }
.code { background:#0b1526; color:#d7e3ef; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px; border-radius:8px; padding:10px; max-height: 260px; overflow:auto; border:1px solid #152238; margin-top:8px; }

/* Reusable option selector layout */
.option-selector {
  width: 100%;
}

.option-selector select {
    width: 100%;
    padding: 6px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #ffffff;
    margin-top: 3px;
}

.option-selector label { font-size: 13px; color: #425569; margin-bottom: 3px; display: block; }

/* Dark mode for option selector */
body.theme-minimal-dark .option-selector select,
body.theme-round-borders-dark .option-selector select {
  background: #2a2a2a;
  color: #e0e0e0;
  border-color: #444;
}

body.theme-minimal-dark .option-selector select option,
body.theme-round-borders-dark .option-selector select option {
  background: #2a2a2a;
  color: #e0e0e0;
}

body.theme-minimal-dark .option-selector label,
body.theme-round-borders-dark .option-selector label {
  color: #cbd5e1;
}

/* Theme selector (reuse) */
.theme-selector { position: absolute; top: 10px; left: 10px; z-index: 1001; display: flex; align-items: center; background: white; border: 1px solid #ccc; border-radius: 6px; padding: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.theme-label { font-size: 12px; color: #666; font-weight: 500; padding: 4px 8px 4px 12px; border-right: 1px solid #eee; background: #f8f9fa; border-radius: 4px 0 0 4px; white-space: nowrap; }
.theme-selector select { padding: 4px 8px; border: none; background: transparent; color: #333; font-size: 12px; cursor: pointer; min-width: 120px; border-radius: 0 4px 4px 0; }
.theme-selector select:focus { outline: none; }

/* Dark mode for theme selector */
body.theme-minimal-dark .theme-selector,
body.theme-round-borders-dark .theme-selector {
  background: #2a2a2a;
  border-color: #444;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.theme-minimal-dark .theme-label,
body.theme-round-borders-dark .theme-label {
  color: #aaa;
  background: #1e1e1e;
  border-right-color: #444;
}

body.theme-minimal-dark .theme-selector select,
body.theme-round-borders-dark .theme-selector select {
  color: #e0e0e0;
  background: transparent;
}

body.theme-minimal-dark .theme-selector select option,
body.theme-round-borders-dark .theme-selector select option {
  background: #2a2a2a;
  color: #e0e0e0;
}

/* Dark tweaks */
body.theme-minimal-dark, body.theme-round-borders-dark { background:#1a1a1a; color:#e0e0e0; }
body.theme-minimal-dark .panel, body.theme-round-borders-dark .panel { background:#242424; border-color:#3a3a3a; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
body.theme-minimal-dark .kv strong, body.theme-round-borders-dark .kv strong { color:#e0e0e0; }
body.theme-minimal-dark .kv, body.theme-round-borders-dark .kv { color:#94a3b8; }
body.theme-minimal-dark .hint, body.theme-round-borders-dark .hint { color:#94a3b8; }