/*! OPTB Dark Settings v1.0 — sleek, tunnel-like settings page */
:root{ --ds-ink:#e7eaf6; --ds-bg:#0b1022; --ds-accent:#2b8be2 }
#optb-settings{ position:fixed; inset:0; z-index:999995; display:none; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ds-ink) }
#optb-settings.open{ display:grid }

/* Background */
#optb-settings .bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1000px 600px at 20% 20%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(1200px 700px at 80% 15%, rgba(147,197,253,.18), transparent 65%),
    linear-gradient(180deg, #0b1022, #0e1636);
  filter: saturate(120%);
}

/* Shell */
#optb-settings .shell{ position:relative; margin:auto; width:min(1100px,94vw); max-height:88vh;
  background:rgba(10,13,30,.70); border:1px solid rgba(255,255,255,.08); border-radius:24px;
  box-shadow:0 50px 160px rgba(0,0,0,.55); backdrop-filter: blur(12px); overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto
}
#optb-settings .head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08) }
#optb-settings .brand{ font-weight:900; letter-spacing:.02em }
#optb-settings .close{ background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--ds-ink); border-radius:12px; padding:8px 12px; cursor:pointer }

/* Body: two columns */
#optb-settings .body{ display:grid; grid-template-columns: 320px 1fr; gap:16px; padding:16px 18px; overflow:auto }
#optb-settings .nav{ border-right:1px solid rgba(255,255,255,.08); padding-right:12px }
#optb-settings .nav .item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:900; }
#optb-settings .nav .item.active{ background: rgba(59,130,246,.16); outline:2px solid var(--ds-accent) }

#optb-settings .pane{ padding-left:6px; display:grid; gap:14px }
#optb-settings h3{ margin:0; font-size:18px }
#optb-settings .muted{ opacity:.8; font-size:13px }
#optb-settings .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
#optb-settings .card{ border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); border-radius:16px; padding:12px }

#optb-settings .chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); font-weight:900; cursor:pointer }
#optb-settings .chip.active{ background:var(--ds-accent); border-color:transparent }

/* Palette chips + color pickers */
#optb-settings .palette{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
#optb-settings .swatch{ width:22px; height:22px; border-radius:999px; border:1px solid rgba(255,255,255,.3) }
#optb-settings .picker{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06) }
#optb-settings input[type="color"]{ appearance:none; -webkit-appearance:none; width:28px; height:28px; border:none; background:transparent; padding:0; border-radius:999px; overflow:hidden }

/* Inputs */
#optb-settings .input{ display:grid; gap:6px }
#optb-settings .input input, #optb-settings .input select{ width:100%; min-height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#fff; padding:8px 10px }
#optb-settings .input input[type="range"]{ appearance:auto; height:6px; padding:0 }

/* Footer actions */
#optb-settings .actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-top:1px solid rgba(255,255,255,.08) }
#optb-settings .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color:#fff; font-weight:900; cursor:pointer }
#optb-settings .btn.primary{ background:#2b8be2; border-color:transparent; box-shadow:0 18px 48px rgba(43,139,226,.45) }

/* Launcher floating button */
#optb-settings-launch{ position:fixed; left:16px; bottom:16px; z-index:999994 }
#optb-settings-launch .fab{ display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border-radius:999px; background:#111827; color:#fff; border:1px solid rgba(255,255,255,.14); font-weight:900; box-shadow:0 16px 38px rgba(17,24,39,.45); cursor:pointer }

@media (max-width:960px){
  #optb-settings .body{ grid-template-columns:1fr }
  #optb-settings .nav{ border:0; padding:0; display:flex; gap:8px; overflow:auto }
}