/* GMT Optimizer — accounts / fleet / chat styling.
   ================================================
   One themed stylesheet for every Phase 2/3 component, built on the console's
   own design tokens (assets/app.css) so the login, profile, fleet and chat read
   as the same product — warm dark cards, the #F5A623 amber accent, Share Tech
   Mono for figures. The JS modules only emit class names; all look lives here. */

/* ---------- shared primitives ---------- */
.gmt-btn-primary{
  background:var(--purple);color:#0A0A0A;border:none;border-radius:12px;
  padding:.65rem 1rem;font-weight:700;font-family:var(--sans);font-size:.88rem;
  cursor:pointer;transition:var(--transition)}
.gmt-btn-primary:hover{background:var(--purple-soft)}
.gmt-btn-primary:disabled{opacity:.55;cursor:default}
.gmt-btn-ghost{
  background:var(--bg-input);border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:.42rem .8rem;font-size:.8rem;font-family:var(--sans);
  cursor:pointer;transition:var(--transition)}
.gmt-btn-ghost:hover{border-color:var(--purple);color:var(--purple-soft)}
.gmt-field{
  width:100%;background:var(--bg-input);border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:.6rem .7rem;font-size:.9rem;font-family:var(--sans)}
.gmt-field:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-glow)}
.gmt-field::placeholder{color:var(--text4)}

/* ---------- header: account slot + online count ---------- */
#gmtAccountSlot{display:flex;align-items:center;gap:.5rem;font-size:.82rem}
.gmt-acc-btn{
  background:var(--bg-input);border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:.4rem .7rem;cursor:pointer;font-size:.8rem;font-family:var(--sans);
  transition:var(--transition)}
.gmt-acc-btn:hover{border-color:var(--purple);color:var(--purple-soft)}
.gmt-acc-name{font-family:var(--mono);color:var(--purple-soft);cursor:pointer}
.gmt-acc-name:hover{text-decoration:underline}
.gmt-acc-av{width:24px;height:24px;border-radius:50%;object-fit:cover;
  border:1px solid var(--card-border);vertical-align:middle}
#gmtOnline{display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--mono);font-size:.72rem;color:var(--text3)}
#gmtOnline .dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84}

/* ---------- modals (login + profile) ---------- */
.gmt-modal-bg{position:fixed;inset:0;background:rgba(6,7,9,.74);backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;z-index:10001}
.gmt-modal-bg.show{display:flex}
.gmt-modal{width:min(370px,92vw);background:linear-gradient(180deg,var(--bg2),var(--bg));
  border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:1.6rem;
  box-shadow:var(--sh,0 26px 64px -18px rgba(0,0,0,.72))}
.gmt-modal h3{margin:0 0 .25rem;font-size:1.15rem;color:var(--text);font-family:var(--sans)}
.gmt-modal .sub{font-size:.78rem;color:var(--text3);margin-bottom:1rem}
.gmt-modal label{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);margin:.7rem 0 .28rem;font-weight:700}
.gmt-modal input,.gmt-modal textarea{width:100%;background:var(--bg-input);border:1px solid var(--border);
  color:var(--text);border-radius:10px;padding:.6rem .7rem;font-size:.9rem;font-family:var(--sans)}
.gmt-modal textarea{resize:vertical;font-family:inherit}
.gmt-modal input:focus,.gmt-modal textarea:focus{outline:none;border-color:var(--purple);
  box-shadow:0 0 0 3px var(--purple-glow)}
.gmt-modal .go{width:100%;margin-top:1rem;background:var(--purple);color:#0A0A0A;border:none;
  border-radius:12px;padding:.72rem;font-weight:700;cursor:pointer;font-size:.9rem;font-family:var(--sans);
  transition:var(--transition)}
.gmt-modal .go:hover{background:var(--purple-soft)}
.gmt-modal .go:disabled{opacity:.55;cursor:default}
.gmt-modal .swap{margin-top:.9rem;text-align:center;font-size:.78rem;color:var(--text3)}
.gmt-modal .swap a{color:var(--purple-soft);cursor:pointer}
.gmt-modal .pw-hint{margin-top:.35rem;font-size:.7rem;color:var(--text4)}
.gmt-modal .gmt-inapp{margin:.2rem 0 1rem;padding:.6rem .7rem;font-size:.76rem;line-height:1.5;
  color:var(--warm,#FFF4E0);background:rgba(245,166,35,.1);border:1px solid var(--card-border);border-radius:10px}
.gmt-inapp-copy{margin-top:.4rem;background:var(--purple);color:#0A0A0A;border:none;border-radius:8px;
  padding:.35rem .7rem;font-size:.74rem;font-weight:700;font-family:var(--sans);cursor:pointer;display:inline-block}
.gmt-modal .err{margin-top:.7rem;font-size:.78rem;color:var(--red);min-height:1em}
.gmt-modal .ok{margin-top:.7rem;font-size:.78rem;color:#7bd88f;min-height:1em}
.gmt-modal .note{margin-top:.7rem;font-size:.7rem;color:var(--text4);line-height:1.45}
.gmt-modal .x{float:right;background:none;border:none;color:var(--text4);font-size:1.2rem;cursor:pointer;line-height:1}
.gmt-prof-avwrap{text-align:center}
.gmt-prof-av{display:block;width:88px;height:88px;border-radius:50%;object-fit:cover;
  margin:.4rem auto .2rem;border:2px solid var(--card-border);background:var(--bg-input)}
.gmt-prof-avbtn{font-size:.74rem;color:var(--purple-soft);cursor:pointer;background:none;border:none}

/* ---------- results gate: hide the data, prompt signup (fleet stays usable) ----------
   Full-viewport and opaque (z-190: above the header at 100, below the fleet editor
   at 200 and the login modal at 10001, so those still open on top). Opaque so there
   are no hard blur edges — nothing shows behind it. Background matches the Edit
   Setup page for a branded, intentional look. */
.gmt-resgate{position:fixed;inset:0;z-index:190;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(60px,14vh,150px) 1.2rem 2rem;background:#0a0a0a;
  background-image:radial-gradient(ellipse 80% 60% at 20% -10%,rgba(245,166,35,.10),transparent 60%),
    radial-gradient(ellipse 70% 50% at 110% 10%,rgba(245,166,35,.05),transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 110%,rgba(245,166,35,.04),transparent 60%);
  background-attachment:fixed}
.gmt-resgate .card{width:min(440px,94vw);text-align:center;background:var(--bg-card);border:1px solid var(--card-border);
  border-radius:var(--radius-sm);padding:2.1rem 1.85rem;box-shadow:var(--sh,0 26px 64px -18px rgba(0,0,0,.72))}
.gmt-resgate .card h3{margin:0 0 .5rem;font-family:var(--sans);font-size:1.3rem;color:var(--text)}
.gmt-resgate .card p{margin:0 0 1.2rem;color:var(--text3);font-size:.86rem;line-height:1.55}
.gmt-resgate .fleetstat{font-family:var(--mono);color:var(--purple-soft);font-size:1rem;margin:.2rem 0 1rem}
.gmt-resgate .btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.gmt-resgate .btns .gmt-btn-primary,.gmt-resgate .btns .gmt-btn-ghost{padding:.72rem 1.25rem;font-size:.9rem}
.gmt-resgate .lyd{margin-top:.95rem;font-size:.78rem;color:var(--text3)}
.gmt-resgate .lyd a{color:var(--purple-soft);cursor:pointer}

/* ---------- signup / signin prompt (logged-out) ---------- */
.gmt-welcome{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--bg-card);border:1px solid var(--card-border);border-radius:var(--radius-sm);
  padding:.9rem 1.1rem;margin:0 auto 1rem;max-width:920px}
.gmt-welcome .wtxt{flex:1;min-width:200px}
.gmt-welcome .wtxt b{color:var(--text);font-family:var(--sans);font-size:.95rem}
.gmt-welcome .wtxt span{display:block;color:var(--text3);font-size:.78rem;margin-top:.15rem}
.gmt-welcome .wbtns{display:flex;gap:.5rem}
.gmt-welcome .wx{background:none;border:none;color:var(--text4);font-size:1.1rem;cursor:pointer}

/* ---------- fleet builder ---------- */
.fleet-panel{margin:.2rem 0 .4rem}
.fleet-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.fleet-summary{font-family:var(--mono);font-size:.72rem;color:var(--text3)}
.fleet-summary strong{color:var(--purple-soft)}
.fleet-rows{display:flex;flex-direction:column;gap:.4rem}
.fleet-empty{font-size:.75rem;color:var(--text4);padding:.5rem 0}
.fleet-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr) auto;
  gap:.35rem;align-items:center}
.fleet-col,.fleet-in{background:var(--bg-input);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:.45rem .5rem;font-size:.8rem;min-width:0;width:100%;font-family:var(--sans)}
.fleet-in{font-family:var(--mono)}
.fleet-col{font-size:.72rem}
.fleet-in:focus,.fleet-col:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 2px var(--purple-glow)}
.fleet-in::placeholder{color:var(--text4)}
.fleet-del{background:none;border:none;color:var(--text4);font-size:1.1rem;cursor:pointer;padding:0 .2rem;line-height:1}
.fleet-del:hover{color:var(--red)}
.fleet-add{background:var(--bg-input);border:1px dashed var(--card-border);color:var(--text2);
  border-radius:10px;padding:.55rem;width:100%;cursor:pointer;font-size:.8rem;margin-top:.5rem;font-family:var(--sans)}
.fleet-add:hover{border-color:var(--purple);color:var(--purple-soft)}
@media(max-width:560px){
  .fleet-row{grid-template-columns:1fr 1fr auto;grid-auto-rows:auto}
  .fleet-col{grid-column:1/3}.fleet-code{grid-column:3/4}}

/* ---------- chat: right-side dock (collapses to a rail) ---------- */
.gmt-chat{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:340px;z-index:500;
  background:linear-gradient(180deg,var(--bg2),var(--bg));border-left:1px solid var(--card-border);
  box-shadow:-14px 0 40px -20px rgba(0,0,0,.7);display:flex;flex-direction:row;overflow:hidden;
  transition:width .2s var(--ease,ease)}
.gmt-chat.collapsed{width:42px}
.gmt-chat-body{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.gmt-chat.collapsed .gmt-chat-body{display:none}
/* the thin collapsed rail: click to expand */
.gmt-chat-rail{display:none;flex-direction:column;align-items:center;gap:.6rem;width:42px;flex:0 0 42px;
  padding-top:.6rem;cursor:pointer;color:var(--text3);background:var(--bg-input)}
.gmt-chat.collapsed .gmt-chat-rail{display:flex}
.gmt-chat-rail:hover{color:var(--purple-soft)}
.gmt-chat-rail .rail-btn{background:none;border:none;color:inherit;font-size:1.2rem;cursor:pointer;line-height:1}
.gmt-chat-rail .rail-label{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.18em;color:var(--text3)}
.gmt-chat-rail .rail-n{font-family:var(--mono);font-size:.7rem;color:var(--purple-soft);
  background:var(--bg-card);border-radius:8px;padding:.15rem .25rem;margin-top:auto;margin-bottom:.6rem}
.gmt-chat-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem .95rem;
  border-bottom:1px solid var(--border)}
.gmt-chat-head .t{font-weight:700;color:var(--text);font-size:.9rem;font-family:var(--sans)}
.gmt-chat-head .o{font-family:var(--mono);font-size:.7rem;color:var(--text3)}
.gmt-chat-ctl{display:flex;align-items:center;gap:.2rem}
.gmt-chat-ctl .ci{background:none;border:none;color:var(--text4);font-size:1.15rem;cursor:pointer;line-height:1;padding:.1rem .3rem;border-radius:6px}
.gmt-chat-ctl .ci:hover{color:var(--purple-soft);background:var(--bg-input)}
.gmt-chat-list{flex:1;overflow-y:auto;padding:.6rem .85rem;display:flex;flex-direction:column;gap:.45rem}
.gmt-msg{display:flex;gap:.5rem;align-items:flex-start;font-size:.82rem;line-height:1.4;color:var(--text2);word-break:break-word}
.gmt-msg-txt{min-width:0}
.gmt-msg-av{width:24px;height:24px;border-radius:50%;flex:0 0 auto;object-fit:cover;margin-top:1px}
.gmt-msg-mono{display:inline-flex;align-items:center;justify-content:center;color:#0A0A0A;font-family:var(--mono);font-size:.72rem;font-weight:700}
.gmt-msg .u{font-weight:700;font-family:var(--mono);cursor:pointer}
.gmt-msg .u:hover{text-decoration:underline}

/* detached popout window: chat fills the whole viewport */
.gmt-chat.popout{position:fixed;inset:0;width:100%;height:100%;max-width:none;border:none;border-radius:0}

/* ---- mobile: a side dock is awkward on a phone ----
   Collapsed = a floating pill button bottom-right; expanded = full screen. */
@media(max-width:700px){
  .gmt-chat.gmt-dock.collapsed{top:auto;bottom:16px;right:16px;height:auto;width:auto;
    background:transparent;border:none;box-shadow:none}
  .gmt-chat.gmt-dock.collapsed .gmt-chat-rail{flex-direction:row;width:auto;height:auto;flex:none;
    padding:.6rem .95rem;gap:.4rem;background:var(--purple);color:#0A0A0A;border-radius:24px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);align-items:center}
  .gmt-chat.gmt-dock.collapsed .gmt-chat-rail::before{content:'💬';font-size:1rem}
  .gmt-chat.gmt-dock.collapsed .rail-btn{display:none}
  .gmt-chat.gmt-dock.collapsed .rail-label{writing-mode:horizontal-tb;font-size:.8rem;letter-spacing:0;
    color:#0A0A0A;font-weight:700}
  .gmt-chat.gmt-dock.collapsed .rail-n{margin:0;background:rgba(0,0,0,.22);color:#0A0A0A}
  .gmt-chat.gmt-dock:not(.collapsed){inset:0;width:100vw;height:100dvh;border-left:none;border-radius:0}
  .gmt-chat-ctl [data-pop]{display:none}            /* popout window is pointless on mobile */
  .gmt-chat-head{padding:.85rem 1rem}               /* bigger tap targets */
  .gmt-chat-ctl .ci{font-size:1.4rem;padding:.2rem .45rem}
  .gmt-chat-list{padding:.7rem 1rem;gap:.6rem}
  .gmt-chat-foot{padding:.7rem 1rem env(safe-area-inset-bottom,1rem)}
  #gmtOnline{display:none}                          /* redundant on mobile — the chat pill shows it */
}

/* user card: a Twitch-style popover anchored near the clicked username */
.gmt-uc{position:fixed;width:min(300px,92vw);z-index:10002;background:var(--bg-card);border:1px solid var(--card-border);
  border-radius:var(--radius-sm);box-shadow:var(--sh,0 26px 64px -18px rgba(0,0,0,.72));overflow:hidden;display:none}
.gmt-uc .uc-x{position:absolute;top:.5rem;right:.6rem;z-index:2;background:rgba(0,0,0,.4);border:none;color:#fff;
  width:22px;height:22px;border-radius:50%;font-size:1rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.uc-loading{color:var(--text3);font-size:.85rem;text-align:center;padding:1.4rem}
.uc-banner{height:56px}
.uc-head{display:flex;align-items:flex-end;gap:.7rem;padding:0 1rem;margin-top:-26px}
.uc-av{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:3px solid var(--bg-card);background:var(--bg-input)}
.uc-mono{display:inline-flex;align-items:center;justify-content:center;color:#0A0A0A;font-family:var(--mono);font-size:1.4rem;font-weight:700}
.uc-idwrap{padding-bottom:.15rem;min-width:0}
.uc-name{font-family:var(--sans);font-size:1.05rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:.4rem}
.uc-user{font-family:var(--mono);font-size:.76rem;color:var(--text3)}
.uc-role{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;padding:.1rem .4rem;border-radius:6px;font-weight:700}
.uc-role-admin{background:var(--purple);color:#0A0A0A}
.uc-role-mod{background:var(--bg-input);color:var(--purple-soft);border:1px solid var(--card-border)}
.uc-bio{font-size:.82rem;color:var(--text2);line-height:1.5;margin:.6rem 1rem 0}
.uc-info{padding:.7rem 1rem 1rem;font-size:.82rem;color:var(--text2);display:flex;flex-direction:column;gap:.45rem}
.uc-info b{color:var(--text);font-family:var(--mono)}
.uc-ic{display:inline-block;width:1.2em;text-align:center}
.uc-actions{padding:0 1rem 1rem;text-align:center}
.uc-ban{color:var(--red)!important;border-color:rgba(255,77,77,.4)!important}
.gmt-msg .mod{opacity:0;margin-left:.3rem;font-size:.72rem;cursor:pointer}
.gmt-msg:hover .mod{opacity:.85}
.gmt-msg .mod:hover{opacity:1}
.gmt-chat-foot{padding:.6rem .85rem;border-top:1px solid var(--border)}
.gmt-chat-foot textarea{width:100%;resize:none;background:var(--bg-input);border:1px solid var(--border);
  color:var(--text);border-radius:10px;padding:.5rem .6rem;font-size:.85rem;font-family:var(--sans);height:38px}
.gmt-chat-foot textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 2px var(--purple-glow)}
.gmt-chat-login{width:100%;background:var(--purple);color:#0A0A0A;border:none;border-radius:10px;
  padding:.55rem;font-weight:700;cursor:pointer;font-family:var(--sans)}
.gmt-chat-login:hover{background:var(--purple-soft)}
.gmt-flash{font-size:.72rem;color:var(--amber,#FF8A3D);min-height:1em;margin-top:.25rem}