#view-settings *{box-sizing:border-box;margin:0;padding:0}
html.v-settings, body.v-settings{overflow-x:clip;max-width:100%}
body.v-settings{background:var(--void);color:var(--txt1);font-family:"JetBrains Mono",ui-monospace,monospace;
  padding:24px 20px 90px;line-height:1.5}
body.v-settings::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 70% at 50% -8%,var(--s3) 0%,rgba(27,27,36,0) 62%)}
#view-settings .wrap{max-width:620px;margin:0 auto}
#view-settings header{display:flex;align-items:baseline;gap:14px;margin-bottom:28px;flex-wrap:wrap}
#view-settings h1{font-family:Fraunces,Georgia,serif;font-size:24px;font-weight:600;letter-spacing:-.02em;
  font-variation-settings:"SOFT" 40,"WONK" 1}
#view-settings .nav{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
#view-settings .back{font-family:inherit;font-size:10.5px;letter-spacing:.06em;
  padding:8px 16px 8px 13px;border-radius:100px;background:var(--s3);
  border:1px solid var(--edge2);color:var(--txt2);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:.16s;
  white-space:nowrap;flex:none}
#view-settings .back::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--lime);
  transform:rotate(45deg);opacity:.85;flex:none}
#view-settings .back:hover{border-color:var(--lime-txt);color:var(--txt1)}
/* the same pill the board carries, so the way to your cards looks identical
   wherever you are standing */
#view-settings .deckbtn{font-family:inherit;font-size:10.5px;letter-spacing:.06em;padding:8px 16px;
  border-radius:100px;background:var(--lime);border:0;color:var(--on-accent);font-weight:700;
  cursor:pointer;white-space:nowrap;flex:none;transition:.15s}
#view-settings .deckbtn:hover{background:var(--lime-hi)}
#view-settings section{margin-bottom:34px}
#view-settings h2{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:10px;margin-bottom:6px}
#view-settings h2 i{flex:1;height:1px;background:var(--edge)}
#view-settings .note{font-size:11.5px;color:var(--dim);line-height:1.6;margin-bottom:14px}
#view-settings .who{font-size:12.5px;color:var(--txt2)}
#view-settings .who b{color:var(--txt1);font-weight:400}
#view-settings .plan{display:inline-block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;background:var(--lime);color:var(--on-accent);font-weight:700;
  margin-left:8px}
#view-settings .dial{display:flex;gap:6px;flex-wrap:wrap}
#view-settings .pip{width:42px;height:42px;border-radius:12px;border:1px solid var(--edge);background:var(--s2);
  color:var(--dim);font-family:inherit;font-size:13px;cursor:pointer;transition:.14s}
#view-settings .pip:hover{border-color:var(--dim3);color:var(--txt1)}
#view-settings .pip.on{background:var(--lime);border-color:var(--lime-txt);color:var(--on-accent);font-weight:700}
#view-settings .cats{display:flex;flex-wrap:wrap;gap:7px}
#view-settings .cat{font-family:inherit;font-size:11.5px;padding:8px 12px 8px 13px;border-radius:100px;
  background:var(--s2);border:1px solid var(--edge);border-left:3px solid var(--cc);
  color:var(--txt2);display:inline-flex;align-items:center;gap:9px}
#view-settings .cat button{background:none;border:0;color:var(--dim);cursor:pointer;font-size:14px;
  line-height:1;padding:0 1px;font-family:inherit}
#view-settings .cat button:hover{color:var(--ember)}
#view-settings .addrow{display:flex;gap:7px;margin-top:12px}
#view-settings .addrow input{flex:1;padding:9px 13px;font-family:inherit;font-size:12px;background:var(--s1);
  border:1px solid var(--edge);border-radius:100px;color:var(--txt1)}
#view-settings .addrow input:focus{outline:none;border-color:var(--edge3)}
#view-settings .addrow button{font-family:inherit;font-size:11.5px;padding:9px 18px;border-radius:100px;
  background:var(--lime);border:0;color:var(--on-accent);font-weight:700;cursor:pointer}
#view-settings .addrow button:disabled{background:var(--s3);color:var(--dim);cursor:default}
#view-settings .danger{font-size:11px;color:var(--dim);margin-top:10px;line-height:1.6}
#view-settings .signout{font-family:inherit;font-size:11px;padding:9px 18px;border-radius:100px;
  background:transparent;border:1px solid var(--edge);color:var(--dim);cursor:pointer}
#view-settings .signout:hover{border-color:var(--ember);color:var(--ember)}
#view-settings .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(18px);
  background:var(--txt1);color:var(--s1);font-size:11.5px;padding:10px 18px;border-radius:100px;
  opacity:0;transition:.22s;pointer-events:none}
#view-settings .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══ THE HEADER BAR — one definition, pasted into each page's own stylesheet.
   ⛔ It lived in style.css, which only the auth page loads: deck, board and
   settings each carry their own inline <style>, so every pill rendered as a raw
   browser button. A shared component has to live somewhere every consumer of it
   actually reads. ══════════════════════════════════════════════════════════ */











@media (max-width: 640px) {
  body.v-settings{padding:16px 13px calc(50px + env(safe-area-inset-bottom))}
  #view-settings header{gap:10px;margin-bottom:22px;flex-wrap:wrap}
  #view-settings h1{font-size:20px;flex:none}
  
  
  #view-settings section{margin-bottom:28px}
  #view-settings .dial{gap:5px}
  #view-settings .pip{width:calc((100vw - 26px - 45px) / 10);min-width:28px;height:38px;font-size:12px}
  #view-settings .cat{font-size:11px;padding:7px 10px 7px 11px}
  #view-settings .addrow{flex-wrap:wrap}
  #view-settings .addrow input{flex:1 1 100%;font-size:16px}
  #view-settings .who{font-size:11.5px;line-height:1.7}
}



#view-settings .themes{display:flex;gap:10px;margin-top:12px}
#view-settings .tsw{flex:1;display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer;
  border:1px solid var(--edge2);border-radius:12px;background:transparent;
  color:var(--dim1);font:400 12px/1 "JetBrains Mono",ui-monospace,monospace}
#view-settings .tsw.on{border-color:var(--lime-txt);color:var(--txt1)}
#view-settings .sw{width:20px;height:20px;border-radius:6px;border:1px solid var(--edge2);flex:0 0 auto}
#view-settings .sw-l{background:linear-gradient(135deg,#EFEDE6 50%,#f4f1e8 50%)}
#view-settings .sw-d{background:linear-gradient(135deg,#08080b 50%,#f4f1e8 50%)}





@media (max-width:720px){
  /* ⛔ THE BOTTOM NAV CARRIES ALL OF THIS. Two controls for one destination is
     what the bar was built to end, and the pills were sitting on top of the
     page title. */
  
  
  #view-settings .pagename{display:none}

  /* content never runs under the bar, on any page */
  body.v-settings{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important}
}

#view-settings .grp{border:1px solid var(--edge2);border-radius:13px;padding:13px 15px;
  margin-bottom:9px}
#view-settings .grp b{font-family:"Fraunces",Georgia,serif;font-size:16px}
#view-settings .grp i{font-style:normal;color:var(--dim2)}
#view-settings .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#view-settings .row input{flex:1;min-width:180px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--edge2);background:var(--s0);color:var(--txt1);
  font:400 13px/1.4 "JetBrains Mono",ui-monospace,monospace}

#view-settings .mem{display:inline-flex;align-items:center;gap:4px;margin-right:8px}
#view-settings .rm{width:17px;height:17px;line-height:1;padding:0;border-radius:100px;
  border:1px solid var(--edge2);background:transparent;color:var(--dim2);cursor:pointer;
  font-size:12px}
#view-settings .rm:hover{border-color:var(--ember);color:var(--ember)}

#view-settings .gq{margin-top:11px}
#view-settings .gq:empty{display:none}
#view-settings .gqq{font-family:"Fraunces",Georgia,serif;font-size:17px;line-height:1.3;
  margin:6px 0 4px;color:var(--txt1)}
#view-settings .gq textarea{width:100%;margin-top:9px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--edge2);background:var(--s0);color:var(--txt1);resize:vertical;
  font:400 14px/1.5 "JetBrains Mono",ui-monospace,monospace}
#view-settings .gq .row{margin-top:8px}
#view-settings .note.warn{color:var(--amber)}
#view-settings .mtier{font:400 10px/1.4 "JetBrains Mono",monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim2)}

#view-settings .prove{border:1px solid var(--amber);background:rgba(169,118,26,.07);
  border-radius:13px;padding:14px 16px;margin-bottom:12px}
#view-settings .prove b{font-family:"Fraunces",Georgia,serif;font-size:16px}
#view-settings .prove input{max-width:150px}

#view-settings .rm.blk:hover{border-color:var(--txt1);color:var(--txt1)}

/* the one screen a new member reads, so it is allowed to be the loudest thing */
#view-settings .welcome{border:1px solid var(--lime-txt);
  background:rgba(201,242,74,.09);border-radius:13px;padding:15px 17px;margin-top:11px}
#view-settings .welcome b{font-family:"Fraunces",Georgia,serif;font-size:17px}
#view-settings .welcome p{font:400 12.5px/1.6 "JetBrains Mono",ui-monospace,monospace;
  color:var(--txt2);margin:9px 0}
#view-settings .welcome .row{margin-top:11px}

/* ⛔ The group controls were raw browser widgets sitting next to buttons that
   are styled everywhere else on the page. One class, matching the rest. */
#view-settings .b{padding:10px 16px;border-radius:100px;cursor:pointer;
  border:1px solid var(--txt1);background:var(--txt1);color:var(--s0);
  font:400 12px/1 "JetBrains Mono",ui-monospace,monospace;white-space:nowrap}
#view-settings .b:hover{opacity:.86}
#view-settings .b.ghost{background:transparent;color:var(--txt2);
  border-color:var(--edge2)}
#view-settings .b.ghost:hover{border-color:var(--txt1);color:var(--txt1);opacity:1}
#view-settings .b:disabled{opacity:.5;cursor:default}