/* =========================================================
   LOCAL MRKT — Manager (mobile web app)
   Black / white / yellow. Big touch targets.
   ========================================================= */
:root{
  --bg:#0B0B0B; --panel:#151515; --panel-2:#1d1d1d; --ink:#F4F3EE;
  --yellow:#F5C518; --yellow-d:#D9A700; --muted:rgba(244,243,238,.6);
  --line:rgba(244,243,238,.16); --green:#39C36E; --red:#F0563E;
  --f:"Archivo",system-ui,sans-serif; --m:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--f);
  -webkit-font-smoothing:antialiased; line-height:1.45;
  padding:0 0 env(safe-area-inset-bottom);
}
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
.hidden{ display:none !important; }
.wrap{ width:100%; max-width:640px; margin-inline:auto; padding:0 clamp(1rem,4vw,1.4rem); }
.hl{ color:var(--yellow); }

/* ---- top bar ---- */
.bar{ position:sticky; top:0; z-index:20; background:rgba(11,11,11,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top); }
.bar__row{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.bar__brand{ font-family:var(--f); font-weight:900; font-size:1.1rem; letter-spacing:.03em; text-transform:uppercase; }
.bar__brand small{ display:block; font-family:var(--m); font-weight:400; font-size:.56rem; letter-spacing:.16em; color:var(--muted); }
.bar__actions{ display:flex; gap:.5rem; }
.icon-btn{ width:40px; height:40px; border:1px solid var(--line); background:transparent; color:var(--ink);
  border-radius:9px; font-size:1.1rem; display:grid; place-items:center; transition:border-color .25s var(--ease); }
.icon-btn:active{ border-color:var(--yellow); }

/* ---- sections ---- */
.section{ padding:1.6rem 0 .4rem; }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.section__title{ font-family:var(--m); font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin:0; }
.section__title b{ color:var(--yellow); font-weight:700; }

/* ---- live slot cards ---- */
.slots{ display:grid; gap:.7rem; }
.slot{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem;
  display:flex; align-items:center; gap:.9rem; }
.slot--filled{ border-color:rgba(245,197,24,.4); }
.slot__no{ flex:none; width:34px; height:34px; border-radius:8px; background:var(--yellow); color:#161200;
  font-family:var(--f); font-weight:900; display:grid; place-items:center; font-size:.95rem; }
.slot--empty .slot__no{ background:var(--panel-2); color:var(--muted); }
.slot__body{ flex:1; min-width:0; }
.slot__name{ font-family:var(--f); font-weight:800; font-size:1.05rem; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slot__meta{ font-family:var(--m); font-size:.68rem; color:var(--muted); margin-top:.15rem; }
.slot--empty .slot__name{ color:var(--muted); font-weight:600; }
.slot__x{ flex:none; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:8px;
  padding:.5rem .7rem; font-family:var(--m); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
.slot__x:active{ border-color:var(--red); color:var(--red); }

/* ---- backlog list ---- */
.list{ display:grid; gap:.6rem; }
.item{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem; }
.item__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.item__name{ font-family:var(--f); font-weight:800; font-size:1rem; line-height:1.15; }
.item__meta{ font-family:var(--m); font-size:.66rem; color:var(--muted); margin-top:.2rem; word-break:break-all; }
.item__actions{ display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap; }
.chip{ border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:8px;
  padding:.5rem .8rem; font-family:var(--m); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
.chip--go{ background:var(--yellow); border-color:var(--yellow); color:#161200; font-weight:700; }
.chip:active{ transform:translateY(1px); }
.chip--del:active{ border-color:var(--red); color:var(--red); }

.empty-note{ font-family:var(--m); font-size:.78rem; color:var(--muted); padding:1.2rem; text-align:center;
  border:1px dashed var(--line); border-radius:12px; }

/* ---- primary buttons ---- */
.btn{ width:100%; border:0; border-radius:12px; padding:1rem; font-family:var(--m); font-size:.82rem;
  text-transform:uppercase; letter-spacing:.08em; background:var(--yellow); color:#161200; font-weight:700;
  transition:transform .2s var(--ease), background .25s var(--ease); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); font-weight:400; }
.btn--danger{ background:transparent; border:1px solid var(--red); color:var(--red); font-weight:400; }
.add-wrap{ padding:1.2rem 0 2rem; }

/* ---- setup / auth screen ---- */
.setup{ min-height:100dvh; display:flex; align-items:center; }
.setup__card{ width:100%; }
.setup h1{ font-family:var(--f); font-weight:900; text-transform:uppercase; font-size:2rem; margin:.2rem 0 .3rem; }
.setup h1 .hl{ color:var(--yellow); }
.setup p{ color:var(--muted); font-size:.92rem; margin:0 0 1.6rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.field label{ font-family:var(--m); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.field input{ background:var(--panel); border:1px solid var(--line); border-radius:10px; color:var(--ink);
  padding:.9rem 1rem; font-size:1rem; }
.field input:focus{ outline:none; border-color:var(--yellow); }
.hint{ font-family:var(--m); font-size:.68rem; color:var(--muted); margin:.2rem 0 1.4rem; }
.hint a{ color:var(--yellow); }

/* ---- modal ---- */
.modal{ position:fixed; inset:0; z-index:40; display:grid; place-items:end center; opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s; }
.modal.open{ opacity:1; visibility:visible; }
.modal__bd{ position:absolute; inset:0; background:rgba(0,0,0,.7); }
.modal__card{ position:relative; z-index:1; width:100%; max-width:640px; background:var(--panel);
  border:1px solid var(--line); border-radius:18px 18px 0 0; padding:1.4rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom));
  transform:translateY(20px); transition:transform .3s var(--ease); }
.modal.open .modal__card{ transform:none; }
.modal__title{ font-family:var(--f); font-weight:900; text-transform:uppercase; font-size:1.3rem; margin:0 0 1rem; }
.slotpick{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:1rem; }
.slotpick button{ border:1px solid var(--line); background:var(--panel-2); color:var(--ink); border-radius:12px;
  padding:1rem; font-family:var(--f); font-weight:800; text-align:left; }
.slotpick button:active{ border-color:var(--yellow); }
.slotpick small{ display:block; font-family:var(--m); font-weight:400; font-size:.62rem; color:var(--muted); margin-top:.2rem; text-transform:uppercase; letter-spacing:.06em; }

/* =========================================================
   MANAGER V2 — directly-editable buttons + open/closed toggle
   ========================================================= */
.section__note{ font-family:var(--m); font-size:.68rem; line-height:1.5; color:var(--muted);
  margin:-.4rem 0 1rem; }
.section__note b{ color:var(--ink); font-weight:700; }
.opt{ color:var(--muted); text-transform:none; letter-spacing:0; }

/* ---- button cards (override the old horizontal slot) ---- */
.slot{ display:block; padding:.95rem 1rem 1rem; }
.slot__head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.slot.is-open{ border-color:rgba(57,195,110,.42); }
.slot.is-closed{ border-color:rgba(245,197,24,.34); }
.slot__body{ margin:.7rem 0 .9rem; }
.slot__name--empty{ color:var(--muted); font-weight:600; }

/* status pill */
.pill{ font-family:var(--m); font-size:.58rem; text-transform:uppercase; letter-spacing:.12em;
  padding:.3rem .55rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.slot.is-open .pill{ color:var(--green); border-color:rgba(57,195,110,.55); background:rgba(57,195,110,.12); }
.slot.is-closed .pill{ color:var(--yellow); border-color:rgba(245,197,24,.5); background:rgba(245,197,24,.10); }

/* card footer: toggle + edit/clear */
.slot__foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.slot__btns{ display:flex; gap:.5rem; }
.slot__setup{ width:100%; }

/* ---- toggle switch ---- */
.switch{ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch__track{ position:relative; flex:none; width:46px; height:27px; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--line); transition:background .25s var(--ease), border-color .25s var(--ease); }
.switch__thumb{ position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%;
  background:var(--muted); transition:transform .25s var(--ease), background .25s var(--ease); }
.switch input:checked + .switch__track{ background:rgba(57,195,110,.24); border-color:var(--green); }
.switch input:checked + .switch__track .switch__thumb{ transform:translateX(19px); background:var(--green); }
.switch__cap{ font-family:var(--m); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); min-width:3.4em; }
.switch input:checked ~ .switch__cap{ color:var(--green); }

/* switch row inside the edit modal */
.switch-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; margin:.2rem 0 .4rem; }
.switch-row__title{ font-family:var(--f); font-weight:800; font-size:.95rem; display:block; }
.switch-row__sub{ font-family:var(--m); font-size:.6rem; color:var(--muted); display:block; margin-top:.15rem; }

/* backlog item info column */
.item__info{ min-width:0; }
.item__name{ overflow:hidden; text-overflow:ellipsis; }

/* ---- toast + loading ---- */
.toast{ position:fixed; left:50%; bottom:calc(1.2rem + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#111; font-family:var(--m); font-size:.76rem; padding:.7rem 1.1rem; border-radius:10px;
  opacity:0; visibility:hidden; transition:all .3s var(--ease); z-index:60; max-width:90vw; text-align:center; }
.toast.show{ opacity:1; visibility:visible; transform:translateX(-50%); }
.toast.err{ background:var(--red); color:#fff; }
.loading{ font-family:var(--m); font-size:.8rem; color:var(--muted); text-align:center; padding:2rem; }
.spin{ display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--yellow);
  border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; margin-right:.5rem; }
@keyframes sp{ to{ transform:rotate(360deg); } }