/* Fantasy Command — design system
   One stylesheet for the landing page, the auth page and the app, so a change to spacing
   or colour lands everywhere at once. */

:root{
  --bg:#0a0c10; --bg2:#0f1218; --card:#141821; --card2:#1a1f2a;
  --line:#242a36; --line2:#2f3644;
  --txt:#e9ecf1; --dim:#98a1b2; --faint:#6b7484;
  --acc:#4f8cff; --acc2:#7c5cff; --go:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --qb:#a78bfa; --rb:#34d399; --wr:#60a5fa; --te:#fbbf24; --k:#94a3b8; --dst:#f472b6;
  --r:12px; --r2:8px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px; margin:0 auto; padding:0 22px}
.hidden{display:none !important}

/* ---------- top navigation ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(10,12,16,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; gap:18px; height:62px}
.brand{display:flex; align-items:center; gap:10px; font-weight:750; font-size:17px;
  letter-spacing:-.02em; color:var(--txt)}
.brand:hover{text-decoration:none}
.mark{
  width:28px; height:28px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  display:grid; place-items:center; font-size:15px; font-weight:800; color:#fff;
}
.navspace{flex:1}
.navlink{color:var(--dim); font-size:14px; font-weight:500}
.navlink:hover{color:var(--txt); text-decoration:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:var(--r2); border:1px solid var(--line2);
  background:var(--card2); color:var(--txt); font:600 14px var(--sans);
  cursor:pointer; transition:.15s; white-space:nowrap;
}
.btn:hover{background:#222836; text-decoration:none}
.btn.primary{
  background:linear-gradient(135deg,var(--acc),var(--acc2)); border-color:transparent;
  color:#fff; box-shadow:0 4px 16px rgba(79,140,255,.28);
}
.btn.primary:hover{filter:brightness(1.08)}
.btn.big{padding:14px 26px; font-size:16px}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.55; cursor:not-allowed}

/* ---------- landing ---------- */
.hero{padding:84px 0 68px; text-align:center; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-40% 20% auto; height:460px;
  background:radial-gradient(ellipse at center,rgba(79,140,255,.16),transparent 70%);
  pointer-events:none;
}
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:5px 13px; border-radius:999px;
  border:1px solid var(--line2); background:var(--card); color:var(--dim);
  font-size:12.5px; font-weight:600; letter-spacing:.02em; margin-bottom:22px;
}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--go)}
h1.big{
  font-size:clamp(34px,5.2vw,58px); line-height:1.06; letter-spacing:-.03em;
  font-weight:800; margin:0 0 18px;
}
h1.big em{
  font-style:normal;
  background:linear-gradient(120deg,var(--acc),var(--acc2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{font-size:clamp(16px,2vw,19px); color:var(--dim); max-width:660px; margin:0 auto 30px}
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.mini{color:var(--faint); font-size:13px; margin-top:16px}

.section{padding:56px 0; border-top:1px solid var(--line)}
.eyebrow{
  color:var(--acc); font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; margin:0 0 10px;
}
h2.sec{font-size:clamp(24px,3.4vw,34px); letter-spacing:-.02em; margin:0 0 12px; font-weight:750}
.secsub{color:var(--dim); max-width:640px; margin:0 0 34px}

.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.feature{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; transition:.18s;
}
.feature:hover{border-color:var(--line2); transform:translateY(-2px)}
.feature .ico{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--card2); border:1px solid var(--line2); font-size:17px; margin-bottom:14px;
}
.feature h3{margin:0 0 7px; font-size:16px; font-weight:700; letter-spacing:-.01em}
.feature p{margin:0; color:var(--dim); font-size:14px}

.note{
  border-left:3px solid var(--line2); padding:2px 0 2px 16px; color:var(--dim);
  font-size:14px; margin:26px 0 0;
}
.foot{border-top:1px solid var(--line); padding:26px 0 40px; color:var(--faint); font-size:13px}

/* ---------- auth page ---------- */
.authWrap{min-height:100vh; display:grid; place-items:center; padding:40px 20px}
.authCard{
  width:100%; max-width:432px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:30px 28px 26px; box-shadow:var(--shadow);
}
.authLogo{display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 4px}
.authTagline{text-align:center; color:var(--dim); font-size:14px; margin:0 0 22px}
/* Auth tabs, taken from FieldSync (public/auth.css .authTab).
   Two segmented buttons whose active state is a background fill read as a half-filled box
   when the fill is close to the strip colour -- which is exactly the fault I shipped here.
   FieldSync solved this long ago by making the active state an UNDERLINE instead: the tabs
   are transparent, the container carries a bottom border, and .active draws a 2px accent
   bar via ::after. There is no ambiguity possible, because nothing is filled. */
.authTabs{display:flex; border-bottom:1px solid var(--line); margin-bottom:22px}
.authTab{
  flex:1; border:0; background:transparent; padding:12px 10px; cursor:pointer;
  font:800 14px var(--sans); color:var(--faint); position:relative; transition:.15s;
}
.authTab:hover{color:var(--dim)}
.authTab.active{color:var(--txt)}
.authTab.active::after{
  content:""; position:absolute; bottom:-1px; left:16px; right:16px; height:2px;
  background:var(--acc); border-radius:2px;
}
.authForm{display:flex; flex-direction:column; gap:14px}
.authRow{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.authField{display:flex; flex-direction:column; gap:6px}
.authField label{font-size:12.5px; font-weight:600; color:var(--dim); letter-spacing:.01em}
.authField input{
  padding:11px 13px; border-radius:var(--r2); border:1px solid var(--line2);
  background:var(--bg2); color:var(--txt); font:15px var(--sans); transition:.15s;
}
.authField input:focus{
  outline:0; border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,140,255,.16);
}
.authField input::placeholder{color:var(--faint)}
.authBtn{
  margin-top:4px; padding:12px; border:0; border-radius:var(--r2);
  background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff;
  font:700 15px var(--sans); cursor:pointer; transition:.15s;
}
.authBtn:hover{filter:brightness(1.08)}
.authBtn:disabled{opacity:.6; cursor:progress}
.authError{
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35); color:#fca5a5;
  padding:9px 12px; border-radius:var(--r2); font-size:13.5px;
}
.authOk{
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.35); color:#86efac;
  padding:9px 12px; border-radius:var(--r2); font-size:13.5px;
}
.authHint{color:var(--faint); font-size:12.5px; text-align:center; margin:14px 0 0}
/* .authForgotRow / .authForgotLink / .authFormInfo, from FieldSync public/auth.css */
.authForgotRow{display:flex; justify-content:center; margin-top:2px}
.authForgotLink{
  border:0; background:transparent; color:var(--acc); font:600 13px var(--sans);
  cursor:pointer; padding:4px
}
.authForgotLink:hover{text-decoration:underline}
.authFormInfo{color:var(--dim); font-size:13.5px; margin:0 0 4px; text-align:center}

/* ---------- app shell ---------- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:22px}
.tab{
  padding:11px 18px; border:0; background:transparent; color:var(--dim);
  font:600 14.5px var(--sans); cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:.15s;
}
.tab:hover{color:var(--txt)}
.tab.active{color:var(--txt); border-bottom-color:var(--acc)}
.panel{padding-bottom:60px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; margin-bottom:16px}
.card h3{margin:0 0 4px; font-size:15px; font-weight:700}
.card .sub{color:var(--dim); font-size:13.5px; margin:0 0 14px}
.cols{display:grid; gap:16px; grid-template-columns:1.35fr 1fr}
@media(max-width:900px){.cols{grid-template-columns:1fr} .authRow{grid-template-columns:1fr}}

.hero2{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 22px; text-align:center; margin-bottom:18px}
.hero2 .kick{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin-bottom:8px}
.hero2 .name{font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-.02em}
.hero2 .meta{color:var(--dim); font-size:14px; margin-top:6px}
.hero2.go{border-color:rgba(34,197,94,.4); background:linear-gradient(180deg,rgba(34,197,94,.07),var(--card))}

.plist{display:flex; flex-direction:column}
.prow{display:flex; align-items:center; gap:12px; padding:11px 2px;
  border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.tag{
  font:700 10.5px var(--sans); letter-spacing:.05em; padding:3px 7px; border-radius:5px;
  min-width:38px; text-align:center; color:#0a0c10; background:var(--k);
}
.tag.QB{background:var(--qb)} .tag.RB{background:var(--rb)} .tag.WR{background:var(--wr)}
.tag.TE{background:var(--te)} .tag.K{background:var(--k)} .tag.DST{background:var(--dst)}
.pname{font-weight:600; flex:1; min-width:0}
.pname small{display:block; color:var(--faint); font-weight:400; font-size:12.5px}
.pnum{color:var(--dim); font-size:13px; font-variant-numeric:tabular-nums; text-align:right}

.alert{background:rgba(245,158,11,.09); border:1px solid rgba(245,158,11,.3);
  color:#fcd34d; padding:11px 14px; border-radius:var(--r2); font-size:14px; margin-bottom:12px}
.empty{color:var(--dim); text-align:center; padding:38px 12px}
.spin{display:inline-block; width:15px; height:15px; border:2px solid var(--line2);
  border-top-color:var(--acc); border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
code.k{background:var(--bg2); border:1px solid var(--line); border-radius:5px;
  padding:1px 6px; font-size:13px}