/* The extension panel is built for a narrow Twitch panel; on the website it sits in a centred column under a slim login bar. */
html,
body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-deep);
}
#webbar {
    width: 100%;
    max-width: 560px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-bottom: 0;
    font-size: 13px;
}
#webbar a.home {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    margin-right: auto;
}
#webbar .who {
    color: var(--muted);
}
#webbar button {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    border-radius: 8px;
    padding: 5px 12px;
}
#webbar button.ghost {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--line);
}
#app {
    width: 100%;
    max-width: 560px;
    flex: 1 1 0;
    height: auto;
    border: 1px solid var(--line);
    border-top: 0;
}
@media (max-width: 560px) {
    #webbar,
    #app {
        border-left: 0;
        border-right: 0;
    }
}