/* FANTØM Hub · aplicação independente do site institucional.
   Tokens e componentes vêm da mesma identidade do site (paleta derivada de TØM, DEC-0001),
   copiados aqui para que o Hub funcione e seja publicado separadamente. */
:root {
  --bg: #050a0f;
  --fg: #e6f6f9;
  --muted: #8aa4ad;
  --cyan: #5ef0ff;
  --mag: #ff4fd8;
  --line: rgba(94, 240, 255, 0.16);
  --line-strong: rgba(94, 240, 255, 0.38);
  --f-brand: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; color: var(--fg); font: 400 16px/1.6 var(--f-body);
  background: radial-gradient(70% 55% at 85% 0%, rgba(94,240,255,.07), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(146,82,255,.06), transparent 70%), var(--bg); overflow-x: hidden }
img, svg { max-width: 100% }
a { color: inherit }
::selection { background: var(--cyan); color: var(--bg) }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px }
h1, h2, h3 { font-family: var(--f-brand); margin: 0; text-wrap: balance }
h3 { font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; margin-bottom: 10px }
p { margin: 0 }
.o { color: var(--cyan) }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; background: var(--cyan); color: var(--bg); padding: 10px 14px; font-weight: 600; text-decoration: none }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)) }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r) }

/* Componentes compartilhados com a identidade do site */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 .85rem/1 var(--f-brand); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--bg); background: var(--cyan); border: 1px solid var(--cyan); padding: 15px 22px; border-radius: 2px; cursor: pointer;
  box-shadow: 0 0 24px rgba(94,240,255,.25); transition: box-shadow .3s, transform .3s var(--ease) }
.btn:hover { box-shadow: 0 0 34px rgba(94,240,255,.5), -2px 0 0 var(--mag); transform: translateY(-1px) }
.btn:disabled { opacity: .5; cursor: default; transform: none }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); box-shadow: none }
.btn-ghost:hover { border-color: var(--cyan); box-shadow: none }
.btn-small { padding: 10px 14px; font-size: .72rem }
.lang { display: flex; border: 1px solid var(--line); border-radius: 2px }
.lang button, .seg button, .chips button { font: 500 .72rem/1 var(--f-mono); letter-spacing: .08em; color: var(--muted); background: none; border: 0; padding: 8px 9px; cursor: pointer; border-radius: 1px }
.lang button[aria-pressed="true"], .seg button[aria-pressed="true"], .chips button[aria-pressed="true"] { color: var(--bg); background: var(--cyan) }
.lang button:hover:not([aria-pressed="true"]), .seg button:hover:not([aria-pressed="true"]), .chips button:hover:not([aria-pressed="true"]) { color: var(--fg) }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chips button { border: 1px solid var(--line); padding: 9px 11px }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; width: max-content }
.eyebrow { font: 500 .75rem/1.2 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); margin: 0 0 14px }
.wordmark { font: 600 1.05rem/1 var(--f-brand); letter-spacing: .08em; color: var(--fg) }
.wordmark .o { color: var(--cyan); text-shadow: 0 0 12px rgba(94,240,255,.6) }
form { display: grid; gap: 16px }
label { display: grid; gap: 8px; font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
input, select, textarea { font: 400 1rem/1.4 var(--f-body); color: var(--fg); background: rgba(5,10,15,.6); border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; width: 100%; letter-spacing: 0; text-transform: none }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 1px var(--cyan) }
textarea { resize: vertical; min-height: 110px }
.form-status { font: 400 .85rem/1.4 var(--f-mono); color: var(--cyan) }
.demo-badge { display: inline-flex; align-items: center; gap: 8px; font: 500 .66rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mag); border: 1px solid rgba(255,79,216,.45); padding: 6px 8px; border-radius: 2px; background: rgba(255,79,216,.06) }
.demo-note { font: 400 .8rem/1.5 var(--f-mono); color: var(--muted); margin-top: 14px; max-width: 80ch }
.dock-label { font: 500 .62rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.muted { color: var(--muted) }
.notice { padding: 12px 14px; border-left: 2px solid #ffd84d; background: rgba(255,216,77,.06); font-size: .9rem }
.notice.ok { border-left-color: var(--cyan); background: rgba(94,240,255,.06) }

/* Cabeçalho próprio do Hub */
.hub-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter-r) 12px var(--gutter); background: rgba(5,10,15,.88); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
.hub-brand { display: flex; align-items: center; gap: 10px; text-decoration: none }
.hub-brand img { width: 34px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(94,240,255,.55)) }
.hub-brand small { font: 500 .62rem/1 var(--f-mono); letter-spacing: .16em; color: var(--cyan); border: 1px solid var(--line-strong); padding: 4px 6px; border-radius: 2px }
.hub-top-r { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.hub-site { font: 500 .72rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 8px 4px }
.hub-site:hover { color: var(--fg) }
.hub-session { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted) }
.hub-session i { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #5ef0ff, #9252ff); display: grid; place-items: center; font: 700 .64rem/1 var(--f-mono); color: #061018; font-style: normal }
main { flex: 1 }
.hub-foot { border-top: 1px solid var(--line); color: var(--muted); font: 400 .78rem/1.5 var(--f-mono); padding: 18px var(--gutter-r) calc(18px + env(safe-area-inset-bottom, 0px)) var(--gutter); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between }

/* Tela de entrada */
.login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 6vw, 80px); align-items: center; padding-block: clamp(40px, 10vh, 110px) }
.login-intro { display: grid; gap: 18px; justify-items: start }
.login-intro h1 { font-weight: 300; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.03em }
.login-intro p { color: var(--muted); font-size: 1.05rem; max-width: 46ch }
.rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; max-width: 52ch }
.rules li { padding: 10px 14px; border-left: 2px solid var(--cyan); background: rgba(94,240,255,.04); font-size: .9rem }
.auth { padding: 28px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(7,15,21,.85); display: grid; gap: 14px; align-content: start }
.auth h3 { font-size: 1.3rem; margin: 0 }
.auth .muted { font-size: .9rem }
.auth details summary { cursor: pointer; font: 500 .72rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.auth details[open] summary { margin-bottom: 12px }
.or { display: flex; align-items: center; gap: 12px; font: 500 .64rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line) }
.demo-enter { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(255,79,216,.35); border-radius: 6px; background: rgba(255,79,216,.05) }
.demo-enter .demo-badge { justify-self: start }
.demo-enter .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }

/* Aplicação do Hub (estilos preservados da versão anterior) */
.app { padding-block: 28px 40px; display: grid; gap: 18px }
.hubapp { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 620px; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: #070d13; box-shadow: 0 30px 90px rgba(0,0,0,.5) }
.h-side { border-right: 1px solid var(--line); padding: 18px 12px; display: grid; gap: 4px; align-content: start; background: #060b10 }
.h-brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 14px; font: 600 .95rem/1 var(--f-brand); letter-spacing: .06em }
.h-brand .o { color: var(--cyan) }
.h-brand small { font: 500 .58rem/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); margin-left: auto }
.h-side button { display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 0; color: var(--muted); padding: 10px 10px; border-radius: 4px; font: 500 .86rem/1 var(--f-body); cursor: pointer }
.h-side button:hover { color: var(--fg); background: rgba(94,240,255,.04) }
.h-side button[aria-selected="true"] { color: var(--fg); background: rgba(94,240,255,.1); box-shadow: inset 2px 0 0 var(--cyan) }
.h-side .cnt { margin-left: auto; font: 600 .62rem/1 var(--f-mono); background: var(--mag); color: #fff; border-radius: 999px; padding: 4px 6px }
.h-main { padding: 22px 26px; display: grid; gap: 20px; align-content: start; min-width: 0 }
.h-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center }
.h-top h3 { font-size: 1.4rem }
.h-top .tag { font: 500 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; background: rgba(94,240,255,.12); color: var(--cyan) }
.h-user { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted) }
.h-user i { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #5ef0ff, #9252ff); display: grid; place-items: center; font: 700 .7rem/1 var(--f-mono); color: #061018; font-style: normal }
.phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; margin-top: 4px }
.phases::before { content: ""; position: absolute; left: 10%; right: 10%; top: 11px; height: 2px; background: var(--line-strong) }
.phases .bar { position: absolute; left: 10%; top: 11px; height: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan) }
.phase { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: .78rem; color: var(--muted) }
.phase i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); background: #070d13; display: grid; place-items: center; font-style: normal; font: 600 .62rem/1 var(--f-mono) }
.phase.done i { background: var(--cyan); color: #061018; border-color: var(--cyan) }
.phase.now i { border-color: var(--mag); box-shadow: 0 0 0 4px rgba(255,79,216,.2); color: var(--mag) }
.phase b { color: var(--fg); font: 600 .82rem/1.2 var(--f-brand) }
.h-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px }
.h-card { border: 1px solid var(--line); border-radius: 6px; padding: 16px; background: rgba(10,20,27,.6); display: grid; gap: 12px; align-content: start; min-width: 0 }
.h-card h4 { font: 500 .66rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 }
.feed li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); font-size: .88rem }
.feed li:first-child { border-top: 0 }
.feed .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 .6rem/1 var(--f-mono); background: rgba(94,240,255,.12); color: var(--cyan) }
.feed .dot.mag { background: rgba(255,79,216,.14); color: var(--mag) }
.feed time { font: 400 .7rem/1.4 var(--f-mono); color: var(--muted); white-space: nowrap }
.feed small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px }
.kv { display: grid; gap: 6px; font-size: .9rem } .kv span { color: var(--muted); font-size: .78rem }
.pct { font: 300 2.6rem/1 var(--f-brand); color: var(--cyan) }
.decision { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(255,216,77,.35); border-radius: 6px; background: rgba(255,216,77,.04) }
.decision.closed { border-color: var(--line); background: none; opacity: .75 }
.decision h5 { font: 600 .95rem/1.3 var(--f-brand); margin: 0 }
.decision p { color: var(--muted); font-size: .86rem }
.decision .row { display: flex; gap: 8px; flex-wrap: wrap }
.decision textarea { min-height: 70px; font-size: .9rem }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.files li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; font-size: .9rem }
.files .ext { font: 700 .6rem/1 var(--f-mono); color: #061018; background: var(--cyan); border-radius: 3px; padding: 6px 0; text-align: center }
.files .ext.fig { background: var(--mag); color: #fff } .files .ext.lnk { background: #ffd84d }
.files .ext.up { background: #9252ff; color: #fff }
.files small { display: block; color: var(--muted); font-size: .76rem }
.thread { display: grid; gap: 10px }
.msg { max-width: 78%; padding: 10px 12px; border-radius: 10px; font-size: .9rem; display: grid; gap: 4px }
.msg.team { background: rgba(94,240,255,.08); border: 1px solid var(--line) }
.msg.me { justify-self: end; background: rgba(146,82,255,.14); border: 1px solid rgba(146,82,255,.3) }
.msg small { font: 400 .68rem/1 var(--f-mono); color: var(--muted) }
.msg .ctx { font: 500 .62rem/1 var(--f-mono); letter-spacing: .06em; color: var(--cyan) }
.composer { display: flex; gap: 8px; margin: 0 }
.composer input { flex: 1 }
.strip-ctl { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.strip-ctl .seg { border: 1px solid var(--line-strong); border-radius: 2px; display: inline-flex }
.h-proj { display: grid; gap: 6px; padding: 0 6px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line) }
.h-proj select { font-size: .82rem; padding: 8px }
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.tasks label { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font: 400 .88rem/1.35 var(--f-body); color: var(--fg) }
.tasks input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--cyan); flex: none }
.tasks .done span { color: var(--muted); text-decoration: line-through }
.tasks small { color: var(--muted); font: 400 .7rem/1 var(--f-mono); margin-left: 6px; text-decoration: none }
.item { border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; display: grid; gap: 10px; background: rgba(5,10,15,.35) }
.item.attn { border-color: rgba(255,216,77,.45); background: rgba(255,216,77,.04) }
.item-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between }
.item-head b { font: 600 .95rem/1.3 var(--f-brand) }
.pill { font: 500 .6rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--cyan); white-space: nowrap }
.pill.warn { color: #ffd84d; border-color: rgba(255,216,77,.5) } .pill.ok { color: #061018; background: var(--cyan); border-color: var(--cyan) } .pill.mag { color: var(--mag); border-color: rgba(255,79,216,.5) }
.meta { font: 400 .74rem/1.4 var(--f-mono); color: var(--muted) } .meta .late { color: var(--mag) }
.hist { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--line-strong); display: grid; gap: 6px; font-size: .82rem }
.hist li span { color: var(--muted); font: 400 .7rem/1 var(--f-mono); margin-right: 6px }
.hist li q { display: block; color: var(--fg); quotes: "“" "”"; margin-top: 2px }
.h-form { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 6px }
.h-form .row2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px }
.h-form .err { color: var(--mag); font-size: .82rem; min-height: 1em }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
details.item > summary { cursor: pointer; list-style: none } details.item > summary::-webkit-details-marker { display: none }
.notifs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.notifs li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 6px; font-size: .88rem }
.notifs li i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--mag); box-shadow: 0 0 6px var(--mag) }
.notifs li.read { opacity: .6 } .notifs li.read i { background: var(--line-strong); box-shadow: none }
.notifs small { display: block; color: var(--muted); font: 400 .7rem/1.4 var(--f-mono); margin-top: 3px }
.demo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 14px; background: rgba(255,79,216,.08); border-bottom: 1px solid rgba(255,79,216,.3); font-size: .82rem }
.hubwrap { border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,79,216,.35) }
.hubwrap .hubapp { border: 0; border-radius: 0 }

/* Canal com a equipe (pós-entrega) */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; padding-top: 18px }
.duo h2 { font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 14px }
.duo .lede { color: var(--muted); max-width: 46ch; margin-bottom: 14px }
.req-types { display: flex; flex-wrap: wrap; gap: 6px }
.preview-mail { white-space: pre-wrap; font: 400 .84rem/1.55 var(--f-mono); padding: 14px; border: 1px dashed var(--line-strong); border-radius: 4px; background: rgba(0,0,0,.3); overflow-wrap: anywhere }

@media (max-width: 900px) {
  .login { grid-template-columns: minmax(0, 1fr) }
  .hubapp { grid-template-columns: minmax(0, 1fr) }
  .h-side { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px }
  .h-brand { display: none }
  .h-side button { white-space: nowrap }
  .h-proj { border-bottom: 0; padding: 0 8px 0 0; margin: 0; min-width: 210px }
  .strip-ctl { margin-left: 0 }
  .h-grid, .duo { grid-template-columns: minmax(0, 1fr) }
  .phase { font-size: .66rem } .phase b { font-size: .7rem }
}
@media (max-width: 560px) { .h-main { padding: 16px } .msg { max-width: 92% } .hub-site { display: none } .demo-enter .row { grid-template-columns: minmax(0, 1fr) } .auth { padding: 20px } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* Modo servidor x demonstração: os mesmos componentes, sem misturar os dois. */
.server-only { display: none !important }
html.hub-server .demo-only { display: none !important }
html.hub-server span.server-only { display: inline-flex !important }
html.hub-server p.server-only { display: block !important }
.acct-links { display: flex; flex-wrap: wrap; gap: 6px 18px }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--cyan); font: 500 .8rem/1.3 var(--f-mono); letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start }
.link-btn:hover { color: var(--fg) }
.code-flow { display: grid; gap: 12px }
.code-flow #cfCode { font: 500 1.2rem/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase }