/* OPTODROP Admin Theme v3 — module settings page */
.od-settings { max-width: 1180px; margin: 0 auto; }
.od-settings-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin-bottom: 20px; padding: 30px; border: 1px solid var(--od-sidebar-line); border-radius: 28px; background: var(--od-sidebar); color: var(--od-sidebar-text); overflow: hidden; }
.od-settings-hero::after { content: ''; position: absolute; right: -45px; top: -55px; width: 180px; height: 180px; border: 48px solid rgba(183,240,0,.07); border-radius: 50%; pointer-events: none; }
.od-settings-hero__eyebrow { display: block; margin-bottom: 9px; color: var(--od-lime); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.od-settings-hero h2 { margin: 0 0 9px; color: var(--od-sidebar-text) !important; font-size: 25px; }
.od-settings-hero p { max-width: 620px; margin: 0; color: var(--od-sidebar-muted); font-size: 13px; }
.od-settings-hero__mark { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--od-lime); color: var(--od-lime-ink); font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 800; }
.od-settings-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 20px; align-items: start; }
.od-settings .panel { margin: 0; }
.od-settings .form-group { display: grid; grid-template-columns: minmax(160px, .38fr) minmax(0, 1fr); gap: 22px; margin: 0 !important; padding: 20px 0; }
.od-settings .form-group + .form-group { border-top: 1px solid var(--od-line); }
.od-settings .control-label { width: auto !important; padding-top: 10px; text-align: left !important; }
.od-settings .od-field { width: auto !important; }
.od-theme-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.od-theme-choice { position: relative; display: block; margin: 0; cursor: pointer; }
.od-theme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.od-theme-choice__frame { display: block; padding: 7px; border: 1px solid var(--od-line); border-radius: 18px; background: var(--od-surface-2); transition: border-color var(--od-motion), transform var(--od-motion), box-shadow var(--od-motion); }
.od-theme-choice:hover .od-theme-choice__frame { transform: translateY(-2px); border-color: var(--od-line-strong); box-shadow: var(--od-shadow-md); }
.od-theme-choice input:focus-visible + .od-theme-choice__frame { outline: 2px solid var(--od-lime); outline-offset: 3px; }
.od-theme-choice input:checked + .od-theme-choice__frame { border-color: var(--od-lime); box-shadow: 0 0 0 3px rgba(183,240,0,.13); }
.od-theme-preview { height: 112px; padding: 8px; border-radius: 13px; overflow: hidden; }
.od-theme-preview--dark { background: #0b0c0b; }
.od-theme-preview--light { background: #f1f1f1; }
.od-theme-preview__sidebar { float: left; width: 28%; height: 100%; padding: 7px 5px; border-radius: 8px; background: #090a09; }
.od-theme-preview__sidebar::before, .od-theme-preview__sidebar::after { content: ''; display: block; height: 8px; margin-bottom: 5px; border-radius: 5px; background: #262926; }
.od-theme-preview__sidebar::after { background: var(--od-lime); }
.od-theme-preview__content { margin-left: calc(28% + 7px); padding-top: 4px; }
.od-theme-preview__bar { width: 58%; height: 7px; margin-bottom: 7px; border-radius: 5px; background: #777d75; opacity: .45; }
.od-theme-preview__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.od-theme-preview__card { height: 58px; border: 1px solid rgba(128,128,128,.2); border-radius: 9px; background: #151615; }
.od-theme-preview--light .od-theme-preview__card { background: #fff; }
.od-theme-choice__label { display: flex; align-items: center; justify-content: space-between; padding: 10px 7px 5px; color: var(--od-text); font-size: 12px; font-weight: 650; }
.od-theme-choice__check { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--od-line-strong); border-radius: 50%; color: transparent; font-size: 9px; }
.od-theme-choice input:checked + .od-theme-choice__frame .od-theme-choice__check { border-color: var(--od-lime); background: var(--od-lime); color: var(--od-lime-ink); }
.od-settings-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.od-settings-toggle input { position: absolute; opacity: 0; }
.od-settings-toggle__track { position: relative; width: 46px; height: 26px; border-radius: 99px; background: var(--od-line-strong); transition: background var(--od-motion); }
.od-settings-toggle__track::after { content: ''; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--od-surface); box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: transform var(--od-motion); }
.od-settings-toggle input:checked + .od-settings-toggle__track { background: var(--od-lime); }
.od-settings-toggle input:checked + .od-settings-toggle__track::after { transform: translateX(20px); background: var(--od-lime-ink); }
.od-settings-toggle input:focus-visible + .od-settings-toggle__track { outline: 2px solid var(--od-lime); outline-offset: 3px; }
.od-settings-toggle__copy strong { display: block; color: var(--od-text); font-size: 12.5px; }
.od-settings-toggle__copy small { color: var(--od-muted); }
.od-settings-info { display: grid; gap: 14px; }
.od-settings-info__item { padding: 16px; border: 1px solid var(--od-line); border-radius: 16px; background: var(--od-surface-2); }
.od-settings-info__item span { display: block; margin-bottom: 5px; color: var(--od-muted); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.od-settings-info__item strong { color: var(--od-text); font-size: 13px; }
.od-settings-note { margin-top: 14px; padding: 15px 16px; border-radius: 16px; background: rgba(183,240,0,.11); color: var(--od-text-2); font-size: 12px; }
.od-settings-note .fa { color: var(--od-text); }

@media (max-width: 900px) {
  .od-settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .od-settings-hero { grid-template-columns: 1fr; padding: 24px; }
  .od-settings-hero__mark { display: none; }
  .od-settings .form-group { grid-template-columns: 1fr; gap: 8px; }
  .od-settings .control-label { padding-top: 0; }
  .od-theme-choice-grid { grid-template-columns: 1fr; }
}