/* FUTURE TRADER — Community-spezifisches CSS (ergänzt site.css) */

/* ---- Modal ---- */
.ft-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.ft-modal[hidden]{ display:none; }
.ft-modal__backdrop{ position:absolute; inset:0; background:rgba(3,3,3,.78); backdrop-filter:blur(4px); }
.ft-modal__panel{ position:relative; width:min(420px,92vw); max-height:90vh; overflow-y:auto; background:#0a0a0c; border:1px solid var(--border);
  border-radius:14px; padding:1.8rem; box-shadow:0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,94,0,.15); }
.ft-modal__x{ position:absolute; top:.7rem; right:.9rem; background:none; border:none; color:var(--dim); font-size:1.6rem; cursor:pointer; line-height:1; }
.ft-modal__title{ font-size:1.5rem; margin:.3rem 0 0; }
.ft-or{ text-align:center; color:var(--dim); font-family:'JetBrains Mono',monospace; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.1em; margin:1rem 0; }
.ft-modal__actions{ display:flex; gap:.6rem; margin-top:.4rem; }
.ft-modal__actions .btn{ flex:1; }
.ft-modal__msg{ font-size:.82rem; margin:.2rem 0 .8rem; }

/* ---- Community-Formularfelder (Modal/Composer/Profil nutzen .field OHNE .input-Klasse) ---- */
.field input:not([type=file]), .field select, .field textarea{
  width:100%; background:#070709; border:1px solid var(--border); color:var(--white);
  padding:.85rem 1rem; font-family:'JetBrains Mono',monospace; font-size:.9rem; border-radius:0;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,94,0,.12);
}
.field textarea{ min-height:90px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:#54545c; }
.field input[type=file]{ width:100%; color:var(--dim); font-family:'JetBrains Mono',monospace; font-size:.82rem; padding:.6rem 0; }

/* ---- Account-Control im Header ---- */
.ft-account{ display:flex; align-items:center; gap:.6rem; }
.ft-account__name{ font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--white); }
/* Im mobilen Menü: Login/Account-Buttons volle Breite */
.mobile-menu .ft-account{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.mobile-menu .ft-account .btn{ flex:1 1 100%; }
.mobile-menu .ft-account__name{ flex:1 1 100%; text-align:center; padding:.5rem 0; }

/* ---- Composer ---- */
.ft-composer{ border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.02); padding:1.4rem; margin-bottom:2rem; }
.ft-composer__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
@media(max-width:640px){ .ft-composer__row{ grid-template-columns:1fr; } }
.ft-locked{ text-align:center; padding:2rem 1rem; border:1px dashed var(--border); border-radius:14px; background:rgba(255,255,255,.015); margin-bottom:2rem; }

/* ---- Feed-Card ---- */
.ft-pred{ border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.02); padding:1.3rem 1.4rem; margin-bottom:1.2rem; }
.ft-pred__head{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.7rem; }
.ft-pred__user{ font-family:'JetBrains Mono',monospace; font-size:.84rem; color:var(--white); }
.ft-pred__time{ color:var(--dim); font-size:.74rem; margin-left:auto; }
.ft-badge{ font-family:'JetBrains Mono',monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.18rem .5rem; border-radius:6px; border:1px solid var(--border); }
.ft-badge--long{ color:#2fe6a0; border-color:rgba(47,230,160,.5); }
.ft-badge--short{ color:#ff6b6b; border-color:rgba(255,107,107,.5); }
.ft-badge--status{ color:var(--dim); }
.ft-pred__levels{ display:flex; gap:1.2rem; flex-wrap:wrap; font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--dim); margin:.5rem 0; }
.ft-pred__levels b{ color:var(--white); }
.ft-pred__chart{ max-width:100%; border-radius:10px; border:1px solid var(--border); margin:.6rem 0; }
.ft-pred__foot{ display:flex; align-items:center; gap:1rem; margin-top:.6rem; flex-wrap:wrap; }
.ft-vote{ display:flex; align-items:center; gap:.4rem; }
.ft-vote button{ background:none; border:1px solid var(--border); color:var(--dim); border-radius:8px; cursor:pointer; padding:.25rem .55rem; font-size:.9rem; }
.ft-vote button.is-active{ color:var(--orange); border-color:var(--orange); }
.ft-vote__score{ font-family:'JetBrains Mono',monospace; min-width:2ch; text-align:center; color:var(--white); }
.ft-link{ background:none; border:none; color:var(--dim); cursor:pointer; font-size:.8rem; }
.ft-link:hover{ color:var(--orange); }
.ft-disclaimer{ font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--dimmer); margin-top:.5rem; }

/* ---- Kommentare ---- */
.ft-comments{ margin-top:.8rem; border-top:1px solid var(--border); padding-top:.8rem; }
.ft-comment{ font-size:.86rem; color:var(--dim); padding:.35rem 0; }
.ft-comment b{ color:var(--white); font-family:'JetBrains Mono',monospace; font-size:.78rem; }

/* ---- Mobile-Feinschliff Community (≤600px) ---- */
@media (max-width:600px){
  /* 16px → verhindert iOS-Auto-Zoom beim Fokus */
  .field input:not([type=file]), .field select, .field textarea{ font-size:16px; }
  /* Größere Tap-Ziele in der Feed-Card-Fußzeile */
  .ft-pred__foot{ gap:.6rem 1.1rem; }
  .ft-vote button{ min-width:40px; min-height:40px; font-size:1rem; }
  .ft-vote__score{ font-size:1rem; }
  .ft-link{ min-height:40px; display:inline-flex; align-items:center; font-size:.85rem; }
  /* Modal kompakter auf kleinen Screens */
  .ft-modal__panel{ padding:1.4rem 1.2rem; }
  .ft-modal__title{ font-size:1.35rem; }
}