/* ============================================================ FXBITI Web Terminal: moldura Barra superior (marca, status, atalhos da conta, cotações ao vivo) + WebTerminal oficial do MetaTrader 5 encaixado embaixo. ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bar-h: 60px; --ticker-h: 32px; --acct-h: 0px; --top-h: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + var(--acct-h) + var(--ticker-h)); --bg: #111111; --bg-deep: #0b0b0c; --line: rgba(255, 255, 255, 0.07); --text: #e8eaed; --muted: #9aa1ad; --brand: #ff7a00; --brand-hi: #ffa04a; --brand-lo: #ee6800; --up: #16c784; --down: #f0515b; --warn: #f5b841; --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Sem cotações: a faixa some e o terminal sobe (classe no , onde a altura do topo é calculada) */ :root.no-ticker { --ticker-h: 0px; } /* A página não rola nem "quica"; o terminal rola por dentro dele mesmo. ATENÇÃO (iPhone, 26/09): não pôr position:fixed nem touch-action no html/body. No iPhone isso faz o terminal (que fica num iframe) só rolar com o dedo no cantinho da tela. */ html, body { height: 100%; width: 100%; background: var(--bg); overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-family: var(--font); color: var(--text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ===== Topo fixo ===== */ .top { position: fixed; inset: 0 0 auto 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: radial-gradient(600px 120px at 50% -60px, rgba(255, 122, 0, 0.10), transparent 70%), linear-gradient(180deg, #151515 0%, var(--bg) 100%); box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0, 0, 0, 0.45); touch-action: manipulation; /* toque duplo na barra não dá zoom */ } .bar { height: var(--bar-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); } .brand-group { display: flex; align-items: center; gap: 16px; min-width: 0; } .brand { display: flex; align-items: center; flex-shrink: 0; border-radius: 8px; } .brand:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 4px; } .logo { height: 38px; width: auto; display: block; } /* ===== Sinal do servidor (ao lado da logo) ===== */ .server-status { position: relative; display: flex; align-items: center; gap: 10px; padding-left: 16px; white-space: nowrap; } .server-status::before { /* divisória fina entre a logo e o sinal */ content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 30px; transform: translateY(-50%); background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent); } .signal { display: flex; align-items: flex-end; gap: 2px; height: 16px; } .signal i { width: 3px; border-radius: 1.5px; background: var(--up); box-shadow: 0 0 6px rgba(22, 199, 132, 0.55); animation: signal 2.4s ease-in-out infinite; } .signal i:nth-child(1) { height: 5px; } .signal i:nth-child(2) { height: 8px; animation-delay: .15s; } .signal i:nth-child(3) { height: 12px; animation-delay: .3s; } .signal i:nth-child(4) { height: 16px; animation-delay: .45s; } @keyframes signal { 0%, 60%, 100% { opacity: 1; } 30% { opacity: .35; } } .status-lines { display: flex; flex-direction: column; gap: 3px; line-height: 1; } .status-lines strong { font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: 0.01em; } .status-sub { font-size: 11px; font-weight: 600; color: var(--up); font-variant-numeric: tabular-nums; } .status-clock { color: var(--muted); font-weight: 500; } .server-status.is-warn .status-sub { color: var(--warn); } .server-status.is-warn .signal i { background: var(--warn); box-shadow: 0 0 6px rgba(245, 184, 65, 0.55); } .server-status.is-warn .signal i:nth-child(n+3) { background: rgba(255, 255, 255, 0.14); box-shadow: none; } /* ===== Botões ===== */ .actions { justify-self: end; display: flex; align-items: center; gap: 8px; } .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.09); font: 600 13.5px/1 var(--font); letter-spacing: 0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease; } .btn svg { width: 17px; height: 17px; flex-shrink: 0; } .btn:active { transform: translateY(1px) scale(0.985); } .btn:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 2px; } /* Reflexo que atravessa o botão (o "brilho") */ .btn::after { content: ""; position: absolute; inset: -1px; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.20) 48%, rgba(255, 255, 255, 0.05) 56%, transparent 70%); transform: translateX(-130%); transition: transform .7s ease; pointer-events: none; } .btn:hover::after { transform: translateX(130%); } .btn-ghost { color: var(--text); background: linear-gradient(180deg, #2a2e37 0%, #1d2027 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5); } .btn-ghost svg { color: #c3c8d1; transition: color .2s ease; } .btn-ghost:hover { color: #fff; border-color: rgba(255, 150, 60, 0.45); background: linear-gradient(180deg, #30353f 0%, #22262e 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 0 3px rgba(255, 122, 0, 0.10), 0 4px 14px rgba(0, 0, 0, 0.45); } .btn-ghost:hover svg { color: var(--brand-hi); } .btn-primary { color: #1a0c00; font-weight: 800; padding: 0 20px; border-color: rgba(255, 170, 90, 0.9); background: linear-gradient(180deg, var(--brand-hi) 0%, var(--brand) 52%, var(--brand-lo) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(120, 45, 0, 0.25), 0 6px 20px rgba(255, 122, 0, 0.35), 0 0 0 1px rgba(255, 122, 0, 0.25); } .btn-primary svg { stroke-width: 2.4; } .btn-primary::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.12) 56%, transparent 70%); animation: sheen 5.5s ease-in-out 1.2s infinite; } .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(120, 45, 0, 0.25), 0 8px 28px rgba(255, 122, 0, 0.5), 0 0 0 4px rgba(255, 122, 0, 0.16); } @keyframes sheen { 0%, 72% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } } /* Botão de suporte no formato do chat: o botão inteiro é o ícone (fundo preto, anel laranja girando em volta, marca FXB, bolinha verde de atendimento online e o nome) */ @property --ring-a { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes ring-spin { to { --ring-a: 360deg; } } .btn-support { position: relative; height: 40px; padding: 1.5px; border: 0; border-radius: 12px; cursor: pointer; background: conic-gradient(from var(--ring-a), #ffb24c, #e77e00 25%, rgba(231, 126, 0, 0.05) 45%, #ffd58a 60%, #e77e00 80%, #ffb24c); box-shadow: 0 0 14px rgba(231, 126, 0, 0.28); animation: ring-spin 3.2s linear infinite; transition: transform .12s ease, box-shadow .2s ease; } .btn-support:hover { box-shadow: 0 0 20px rgba(231, 126, 0, 0.5); } .btn-support:active { transform: translateY(1px) scale(0.985); } .btn-support:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 3px; } .sup-in { display: flex; align-items: center; gap: 9px; height: 100%; padding: 0 16px 0 5px; border-radius: 10.5px; background: linear-gradient(160deg, #17181b 0%, #0b0b0d 55%); color: #f2f2f3; font: 700 13.5px/1 var(--font); white-space: nowrap; } .sup-in img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; transform: scale(1.08); } .sup-dot { width: 8px; height: 8px; margin-left: 1px; border-radius: 50%; background: #45c07f; box-shadow: 0 0 0 0 rgba(69, 192, 127, 0.6); animation: sup-ping 2s ease-out infinite; } @keyframes sup-ping { 0% { box-shadow: 0 0 0 0 rgba(69, 192, 127, 0.6); } 80%, 100% { box-shadow: 0 0 0 7px rgba(69, 192, 127, 0); } } .btn-support[aria-expanded="true"] .sup-in { background: linear-gradient(160deg, #2a2016 0%, #120d08 60%); } .btn-support .unread { top: -3px; right: -3px; box-shadow: 0 0 0 2px #0b0b0d, 0 0 10px rgba(240, 81, 91, 0.8); } /* Marca FXB pequena (menu do celular) */ .avatar { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; padding: 1.5px; background: conic-gradient(from var(--ring-a), #ffb24c, #e77e00 25%, rgba(231, 126, 0, 0) 45%, #ffd58a 60%, #e77e00 80%, #ffb24c); animation: ring-spin 3.2s linear infinite; } .avatar img { display: block; width: 100%; height: 100%; border-radius: 7.5px; object-fit: cover; background: #0b0b0d; } .avatar::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: #45c07f; border: 2px solid #1f232b; } .support-label b { color: var(--brand-hi); font-weight: 800; letter-spacing: 0.01em; } .btn-menu { display: none; width: 40px; padding: 0; } /* Bolinha de mensagem nova do suporte */ .unread { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--down); box-shadow: 0 0 0 2px #1d2027, 0 0 10px rgba(240, 81, 91, 0.8); } .unread[hidden] { display: none; } /* ===== Faixa de cotações ===== */ .ticker { height: var(--ticker-h); display: flex; align-items: stretch; background: var(--bg-deep); border-top: 1px solid var(--line); overflow: hidden; } .ticker[hidden] { display: none; } .ticker-tag { position: relative; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 0 14px 0 max(20px, env(safe-area-inset-left, 0px)); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; background: var(--bg-deep); box-shadow: 16px 0 14px -2px var(--bg-deep); white-space: nowrap; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); animation: blink 1.6s ease-in-out infinite; } .ticker-tag.is-stale .live-dot { background: var(--muted); box-shadow: none; animation: none; } .ticker-tag.is-stale { color: var(--muted); } .ticker-tag.is-demo .live-dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); } @keyframes blink { 50% { opacity: .35; } } .ticker-viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%); } .ticker-track { display: flex; width: max-content; height: 100%; animation: ticker var(--ticker-dur, 60s) linear infinite; will-change: transform; } .ticker-viewport:hover .ticker-track { animation-play-state: paused; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tk { display: flex; align-items: center; gap: 8px; padding: 0 22px; font-size: 12.5px; white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, 0.05); } .tk-name { color: #b9bfca; font-weight: 700; letter-spacing: 0.02em; } .tk-price { color: #f4f5f7; font-weight: 600; font-variant-numeric: tabular-nums; padding: 2px 4px; margin: 0 -4px; border-radius: 4px; transition: background-color .6s ease, color .6s ease; } .tk-price.flash-up { background: rgba(22, 199, 132, 0.22); color: #fff; transition: none; } .tk-price.flash-down { background: rgba(240, 81, 91, 0.22); color: #fff; transition: none; } .tk-chg { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 11.5px; font-variant-numeric: tabular-nums; } .tk-chg.up { color: var(--up); } .tk-chg.down { color: var(--down); } .tk-chg.flat { color: var(--muted); } .tk-chg svg { width: 9px; height: 9px; fill: currentColor; stroke: none; } .tk-off { display: none; padding: 2px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .tk.is-closed .tk-off { display: inline-block; } .tk.is-closed .tk-price, .tk.is-closed .tk-chg { opacity: 0.6; } /* ===== Área do terminal ===== */ .stage { position: fixed; top: var(--top-h); /* Entalhe na horizontal: respeitado. Embaixo o terminal vai até o fim da tela (a barra de abas dele já tem altura própria; reservar a margem do tracinho aqui deixava uma faixa vazia grande no iPhone). */ left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px); bottom: 0; background: var(--bg); } .terminal { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; background: transparent; } .loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .4s ease; } .loader img { border-radius: 18px; box-shadow: 0 10px 40px rgba(255, 122, 0, 0.18); } .loader-bar { position: relative; width: 140px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .loader-bar i { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--brand), transparent); animation: load 1.2s ease-in-out infinite; } .loader-text { font-size: 13px; color: var(--muted); } .loader.is-done { opacity: 0; pointer-events: none; } @keyframes load { from { transform: translateX(-100%); } to { transform: translateX(250%); } } /* ===== Menu do celular ===== */ .menu { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) - 4px); right: max(12px, env(safe-area-inset-right, 0px)); width: min(260px, calc(100vw - 24px)); padding: 6px; border-radius: 14px; background: #181a1f; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4); transform-origin: top right; animation: pop .16s ease-out; } .menu[hidden] { display: none; } @keyframes pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } } .menu-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: 600 14.5px/1 var(--font); text-decoration: none; text-align: left; cursor: pointer; } .menu-item svg { width: 19px; height: 19px; color: var(--brand-hi); } .menu-item .avatar { width: 24px; height: 24px; margin: 0 -2px; } .menu-item .avatar::after { border-color: #181a1f; } .menu-item:hover, .menu-item:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; } .menu-item .unread { position: static; margin-left: auto; box-shadow: 0 0 10px rgba(240, 81, 91, 0.8); } .menu-item[hidden] { display: none; } /* ===== Folha de instalação (iPhone) ===== */ .sheet-backdrop { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .sheet-backdrop[hidden] { display: none; } .sheet { width: min(420px, 100%); padding: 24px 20px 20px; border-radius: 20px; background: #1a1c21; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); text-align: center; animation: pop .2s ease-out; } .sheet img { border-radius: 14px; } .sheet h2 { margin: 12px 0 16px; font-size: 18px; font-weight: 700; } .sheet ol { list-style: none; display: grid; gap: 10px; margin-bottom: 20px; text-align: left; } .sheet li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-size: 14.5px; } .sheet li svg { width: 22px; height: 22px; margin-left: auto; color: #4ea1ff; flex-shrink: 0; } .step { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 122, 0, 0.15); color: var(--brand-hi); font-weight: 800; font-size: 13px; flex-shrink: 0; } .sheet .btn { width: 100%; height: 46px; } /* ===== Conta conectada ===== */ .acct { justify-self: center; position: relative; min-width: 0; } .acct[hidden], .acct-on[hidden], .acct-off[hidden], .acct-menu[hidden], .acct-strip[hidden] { display: none; } .acct-off { display: flex; align-items: center; gap: 6px; } .btn-connect svg { color: var(--brand-hi); } /* "?" com a explicação ao passar o mouse, focar ou tocar */ .help { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04); color: #c3c8d1; font: 800 11.5px/1 var(--font); cursor: help; } .help:hover, .help:focus-visible, .help.is-open { color: #fff; border-color: var(--brand-hi); background: rgba(255, 122, 0, 0.14); outline: none; } .help-tip { position: absolute; z-index: 50; top: calc(100% + 10px); left: 50%; width: 290px; padding: 12px 14px; border-radius: 12px; background: #1f2228; border: 1px solid rgba(255, 178, 76, 0.35); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); color: #e7e8ea; font: 500 12.5px/1.5 var(--font); text-align: left; white-space: normal; cursor: default; opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; pointer-events: none; } .help:hover .help-tip, .help:focus-visible .help-tip, .help.is-open .help-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .acct-on { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 6px 0 5px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); color: var(--text); font-family: var(--font); cursor: pointer; transition: border-color .2s ease, background .2s ease; } .acct-on:hover, .acct-on[aria-expanded="true"] { border-color: rgba(255, 150, 60, 0.4); background: rgba(255, 255, 255, 0.06); } .acct-on:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 2px; } .acct-who { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 4px; } .acct-kind { padding: 4px 7px; border-radius: 6px; font: 800 10px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; } .acct-kind.is-real { color: #0c2b1f; background: linear-gradient(180deg, #4ee0a6, #16c784); } .acct-kind.is-demo { color: #2e2100; background: linear-gradient(180deg, #ffd370, #f5b841); } .acct-name { display: flex; flex-direction: column; gap: 2px; text-align: left; line-height: 1; } .acct-name b { font-size: 12.5px; font-weight: 700; color: #fff; } .acct-name small { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .acct-m { display: flex; flex-direction: column; gap: 3px; padding: 0 11px; border-left: 1px solid rgba(255, 255, 255, 0.08); text-align: left; line-height: 1; } .acct-m small { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .acct-m b { font-size: 14px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; border-radius: 4px; transition: background-color .6s ease; } .acct-m b.up { color: var(--up); } .acct-m b.down { color: var(--down); } .acct-m b.flash-up { background: rgba(22, 199, 132, 0.2); transition: none; } .acct-m b.flash-down { background: rgba(240, 81, 91, 0.2); transition: none; } .acct.is-stale .acct-m b { opacity: 0.55; } .acct-menu { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; min-width: 190px; padding: 6px; border-radius: 12px; background: #181a1f; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); } .acct-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 600 13.5px/1 var(--font); text-align: left; cursor: pointer; } .acct-menu button:hover, .acct-menu button:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; } .acct-menu svg { width: 17px; height: 17px; color: var(--brand-hi); } /* Faixa da conta no celular e tablet */ .acct-strip { display: none; width: 100%; height: var(--acct-h); align-items: center; gap: 0; padding: 0 max(12px, env(safe-area-inset-left, 0px)); border: 0; border-top: 1px solid var(--line); background: #121316; color: var(--text); font-family: var(--font); cursor: pointer; } .acct-strip .acct-m { flex-direction: row; align-items: baseline; gap: 5px; padding: 0 10px; } .acct-strip .acct-m b { font-size: 12.5px; } .acct-strip .acct-m small { font-size: 9.5px; } .acct-strip .acct-kind { margin-right: 2px; padding: 3px 6px; font-size: 9px; } /* Formulário de conectar */ .sheet-form { text-align: left; } .sheet-form h2 { margin: 0 0 6px; } .sheet-sub { margin-bottom: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.45; } .field { display: grid; gap: 7px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: #cfd4dc; } .field-head { display: flex; align-items: center; gap: 8px; } .field .help-tip { left: auto; right: -12px; transform: translate(0, -4px); } .field .help:hover .help-tip, .field .help:focus-visible .help-tip, .field .help.is-open .help-tip { transform: none; } .field input { height: 46px; padding: 0 14px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.12); background: #0f1013; color: #fff; font: 600 16px/1 var(--font); font-variant-numeric: tabular-nums; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .field input:focus { border-color: var(--brand-hi); box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.18); } .sheet-note { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.45; } .sheet-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--up); } .form-err { margin: -2px 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(240, 81, 91, 0.12); color: #ffb3b8; font-size: 13px; line-height: 1.4; } .form-err[hidden] { display: none; } .sheet-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; } .sheet-form .btn { width: 100%; height: 46px; } .sheet-form .btn[disabled] { opacity: .6; cursor: progress; } /* ===== Chat do suporte (script do support.fxbiti.com) ===== No trade o botão flutuante e o convite do chat ficam escondidos para não cobrir o terminal: o chat abre pelo botão Suporte da barra. O aviso de mensagem nova continua aparecendo. */ body .fxbs-root .fxbs-btn, body .fxbs-root .fxbs-label, body .fxbs-root .fxbs-teaser { display: none !important; } /* iPhone (26/09): a janela do chat, mesmo invisível (opacity 0 e pointer-events none), cobria o terminal e ROUBAVA o gesto de rolar: o terminal só rolava no cantinho da tela. Fechada, ela sai do layout de verdade. O iframe continua carregado, então o aviso de mensagem nova segue funcionando. */ body .fxbs-root:not(.fxbs-open) .fxbs-shell { display: none !important; } @media (min-width: 601px) { body .fxbs-root { top: calc(var(--top-h) + 10px) !important; bottom: auto !important; right: 16px !important; } body .fxbs-root .fxbs-shell { top: 0 !important; bottom: auto !important; height: min(640px, calc(100vh - var(--top-h) - 28px)) !important; } body .fxbs-root .fxbs-note { top: 0 !important; bottom: auto !important; } } @media (max-width: 600px) { body .fxbs-root .fxbs-note { bottom: 0 !important; } } /* ===== Responsivo ===== */ /* Botões da barra: iguais à versão aprovada pelo Dono (só o Suporte mudou). */ @media (max-width: 1240px) { .btn-install span { display: none; } .btn-install { width: 40px; padding: 0; } } @media (max-width: 1060px) { .status-clock { display: none; } } @media (max-width: 960px) { .status-lines { display: none; } .brand-group { gap: 14px; } .server-status { padding-left: 14px; } .btn-client span { display: none; } .btn-client { width: 40px; padding: 0; } } /* Só quando o "Conectar conta" estiver ligado: a barra compacta para caber a conta. Ainda não aprovado pelo Dono; revisar com ele antes de ligar ACCOUNT_CONNECT. */ @media (max-width: 1500px) { :root.acct-enabled .btn-install span, :root.acct-enabled .btn-client span { display: none; } :root.acct-enabled .btn-install, :root.acct-enabled .btn-client { width: 40px; padding: 0; } } @media (max-width: 1360px) { :root.acct-enabled .status-clock { display: none; } } @media (max-width: 1280px) { :root.acct-enabled .acct-on .acct-today { display: none; } } @media (max-width: 1180px) { :root.acct-enabled .status-lines { display: none; } :root.acct-enabled .acct-on .acct-name { display: none; } } @media (max-width: 1060px) { :root.acct-enabled .btn-withdraw span { display: none; } :root.acct-enabled .btn-withdraw { width: 40px; padding: 0; } } /* Tablet e celular: a conta sai da barra e vira uma faixa própria */ @media (max-width: 960px) { .acct-on, .acct-menu { display: none !important; } :root.has-acct { --acct-h: 30px; } :root.has-acct .acct-strip { display: flex; } } @media (max-width: 720px) { :root { --bar-h: 56px; --ticker-h: 30px; } :root.no-ticker { --ticker-h: 0px; } .bar { grid-template-columns: auto 1fr auto; gap: 10px; padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); } .logo { height: 32px; } .brand-group { gap: 10px; } .server-status { padding-left: 10px; } .server-status::before { height: 22px; } .signal { height: 13px; } .signal i:nth-child(1) { height: 4px; } .signal i:nth-child(2) { height: 7px; } .signal i:nth-child(3) { height: 10px; } .signal i:nth-child(4) { height: 13px; } .acct { display: none !important; } .actions .btn-ghost:not(.btn-menu), .actions .btn-support { display: none; } .btn-menu { display: inline-flex; } .btn { height: 40px; } .btn-primary { padding: 0 16px; } .ticker-tag { padding-left: max(14px, env(safe-area-inset-left, 0px)); } .tk { padding: 0 16px; font-size: 12px; } .acct-strip .acct-m { padding: 0 8px; } } @media (max-width: 380px) { .logo { height: 28px; } .btn-primary { padding: 0 13px; font-size: 13px; gap: 6px; } .ticker-tag #tickerTagText { display: none; } .ticker-tag { padding-right: 10px; } .acct-strip .acct-m small { display: none; } } @media (prefers-reduced-motion: reduce) { .signal i, .live-dot, .btn-primary::after, .loader-bar i, .avatar, .btn-support, .sup-dot { animation: none; } .btn::after { transition: none; } .ticker-track { animation: none; } .ticker-viewport { overflow-x: auto; scrollbar-width: none; } .ticker-viewport::-webkit-scrollbar { display: none; } } /* Medidor temporário de tela (diagnóstico do iPhone): lê as margens do aparelho. */ .diag-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }