/* =========================================================
   GenieSphere — Genie Settings Panel (Suggest / Assist / Automate)
   Shared CSS — safe, calm, mobile-friendly
   ========================================================= */

.genie-settings{margin:16px 0 22px}
.gs-head{margin-bottom:10px}
.gs-title{font-weight:800;font-size:1.05rem}
.gs-sub{opacity:.85;font-size:.92rem;margin-top:3px}

.gs-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  padding:14px;
}

.gs-row{margin-bottom:10px}
.gs-label{font-weight:700}
.gs-help{opacity:.78;font-size:.92rem;margin-top:2px}

.gs-options{display:grid;gap:10px;margin:10px 0 14px}
.gs-option{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  cursor:pointer;
}
.gs-option:hover{border-color:rgba(255,255,255,.18)}
.gs-option input{margin-top:4px}
.gs-option-title{font-weight:800}
.gs-option-desc{opacity:.82;font-size:.92rem;margin-top:2px}

.gs-scope{
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:12px;
  margin-top:10px;
}

.gs-check{
  display:flex;
  gap:10px;
  align-items:center;
  margin:8px 0;
  opacity:.95;
}

.gs-check input{transform:translateY(1px)}

.gs-note{
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  font-size:.92rem;
  opacity:.92;
}

.gs-links{
  margin-top:12px;
  opacity:.85;
  font-size:.92rem;
}

.gs-link{text-decoration:underline}
.gs-dot{margin:0 8px;opacity:.6}

/* Mobile spacing tweaks */
@media (max-width: 520px){
  .gs-card{padding:12px}
  .gs-option{padding:10px}
}