/* B63 Hub additions on top of Filament: ticket thread, stats, small polish. Colours follow b63.eu. */
:root { --hub-violet: #6a4cff; --hub-lime: #d6ff3d; --hub-ink: #0c0b12; --hub-sand: #f3f1ea; --hub-line: #e3e0d6; --hub-muted: #5d5969; }
.dark { --hub-sand: rgba(255,255,255,.04); --hub-line: rgba(255,255,255,.1); --hub-muted: #a1a1aa; }

.hub-msg { border: 1px solid var(--hub-line); border-radius: 14px; padding: 14px 16px; background: #fff; max-width: 52rem; }
.dark .hub-msg { background: rgba(255,255,255,.03); }
.hub-msg--staff { border-left: 3px solid var(--hub-violet); }
.hub-msg--client { margin-left: auto; background: var(--hub-sand); }
.hub-msg__meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; color: var(--hub-muted); margin-bottom: 6px; }
.hub-msg__who { font-weight: 600; color: inherit; }
.hub-msg--staff .hub-msg__who { color: var(--hub-violet); }
.hub-msg__body { font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.hub-msg__files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 10px; }
.hub-msg__files a { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hub-line); }
.hub-msg__files a:hover { border-color: var(--hub-violet); color: var(--hub-violet); }
.hub-note { font-size: .875rem; padding: 10px 14px; border-radius: 10px; background: var(--hub-sand); color: var(--hub-muted); }

.hub-hero { border-radius: 18px; padding: 26px 26px 22px; background: var(--hub-ink); color: #fff; position: relative; overflow: hidden; }
.hub-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(106,76,255,.55), transparent 70%); }
.hub-hero h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
.hub-hero p { color: rgba(255,255,255,.7); margin: 0; }
.hub-hero .hub-pill { display: inline-block; margin-top: 14px; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--hub-lime); color: var(--hub-ink); }

.hub-progress { height: 8px; border-radius: 999px; background: var(--hub-sand); overflow: hidden; border: 1px solid var(--hub-line); }
.hub-progress > span { display: block; height: 100%; background: var(--hub-violet); border-radius: 999px; }
.hub-stages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hub-stages span { font-size: .72rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hub-line); color: var(--hub-muted); }
.hub-stages span.is-done { background: var(--hub-sand); color: inherit; }
.hub-stages span.is-current { background: var(--hub-violet); border-color: var(--hub-violet); color: #fff; }

.hub-toplist { display: grid; gap: 6px; font-size: .875rem; }
.hub-toplist div { display: flex; justify-content: space-between; gap: 1rem; padding: 6px 0; border-bottom: 1px solid var(--hub-line); }
.hub-toplist span:first-child { overflow-wrap: anywhere; }
.hub-toplist span:last-child { font-variant-numeric: tabular-nums; color: var(--hub-muted); }

.fi-simple-layout { background: radial-gradient(1200px 500px at 50% -10%, rgba(106,76,255,.12), transparent 60%); }