/*! OPTB Guided Tunnel v1.1 (Sectors + Simple Edit) */
:root{ --tunnel-ink:#e7eaf6; --tunnel-bg:#0b1022; --tunnel-accent:#2b8be2 }
#optb-tunnel{ position:fixed; inset:0; z-index:999999; display:none; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--tunnel-ink) }
#optb-tunnel.open{ display:grid }
#optb-tunnel .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%);
}
#optb-tunnel .shell{ position:relative; margin:auto; width:min(1040px,94vw); max-height:86vh;
  background:rgba(10,13,30,.65); 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-tunnel .head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.08) }
#optb-tunnel .brand{ font-weight:900; letter-spacing:.02em }
#optb-tunnel .close{ background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--tunnel-ink); border-radius:12px; padding:8px 12px; cursor:pointer }
#optb-tunnel .body{ display:grid; gap:18px; padding:18px 20px; overflow:auto }
#optb-tunnel h2{ font-size:22px; margin:0 }
#optb-tunnel .muted{ opacity:.8; font-size:14px }
#optb-tunnel .grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px }
#optb-tunnel .card{ border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); border-radius:16px; padding:14px; cursor:pointer; transition:.2s }
#optb-tunnel .card:hover{ transform: translateY(-2px) }
#optb-tunnel .card.active{ outline:2px solid var(--tunnel-accent); background: rgba(59,130,246,.14) }
#optb-tunnel .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
#optb-tunnel .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-tunnel .chip.active{ background:var(--tunnel-accent); border-color:transparent }

/* Color palette + pickers */
#optb-tunnel .palette{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
#optb-tunnel .swatch{ width:22px; height:22px; border-radius:999px; border:1px solid rgba(255,255,255,.3) }
#optb-tunnel .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-tunnel input[type="color"]{ appearance:none; -webkit-appearance:none; width:28px; height:28px; border:none; background:transparent; padding:0; border-radius:999px; overflow:hidden }

#optb-tunnel .actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-top:1px solid rgba(255,255,255,.08) }
#optb-tunnel .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-tunnel .btn.primary{ background:#2b8be2; border-color:transparent; box-shadow:0 18px 48px rgba(43,139,226,.45) }

/* Loader */
#optb-tunnel .loader{ position:fixed; inset:0; display:none; place-items:center; backdrop-filter: blur(4px); }
#optb-tunnel .loader.show{ display:grid }
#optb-tunnel .spinner{ width:80px; height:80px; border-radius:50%; border:6px solid rgba(255,255,255,.16); border-top-color:#2b8be2; animation: spin 1s linear infinite }
#optb-tunnel .stage{ margin-top:12px; text-align:center; font-weight:800; opacity:.9 }
@keyframes spin{ to{ transform: rotate(360deg) } }

/* Focused viewing — hide extra UIs */
body.optb-view-focus #nitro-controls,
body.optb-view-focus #optb-oneclick,
body.optb-view-focus #optb-simple,
body.optb-view-focus #optb-lib,
body.optb-view-focus #optb-wizard-launch{ display:none !important }

/* Sticky edit button */
#optb-edit-sticky{ position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 99990; display:none }
#optb-edit-sticky.show{ display:block }
#optb-edit-sticky .edit-btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; background:#0b5cf5; color:#fff; font-weight:900; border:1px solid transparent; box-shadow:0 16px 48px rgba(11,92,245,.45); cursor:pointer }

/* Simple Edit Overlay (dark, same style as tunnel) */
#optb-simple-edit{ position:fixed; right:16px; top:16px; z-index:999991; display:none }
#optb-simple-edit.show{ display:block }
#optb-simple-edit .panel{ width: min(360px, 92vw); background: rgba(10,13,30,.75); border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow:0 28px 80px rgba(0,0,0,.5); backdrop-filter: blur(10px); color:#fff }
#optb-simple-edit .head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.1); font-weight:900 }
#optb-simple-edit .body{ padding:12px 14px; display:grid; gap:12px }
#optb-simple-edit .row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
#optb-simple-edit .btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color:#fff; cursor:pointer; font-weight:800 }
#optb-simple-edit .btn.primary{ background:#2b8be2; border-color:transparent }
#optb-simple-edit .small{ opacity:.8; font-size:12px }
#optb-simple-edit .group{ border-top:1px dashed rgba(255,255,255,.14); padding-top:10px }