/* ========================================================
   HELP4DESK — TOKENS
   ======================================================== */

:root {
    color-scheme: dark;

    --ink: #040806;
    --ink-2: #0b120e;
    --ink-3: #15201a;
    --ink-line: rgba(255, 255, 255, 0.08);

    --brand: #22c55e;
    --brand-strong: #16a34a;
    --brand-soft: rgba(34, 197, 94, 0.12);
    --spark: #4ade80;
    --on-brand: #03140a;

    --bg: #060a08;
    --surface: #0d1410;
    --surface-2: #131c17;
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.14);
    --text: #e6eee9;
    --text-2: #a0b0a6;
    --text-3: #6c7d73;

    --ok: #4ade80;
    --ok-soft: rgba(74, 222, 128, 0.12);
    --warn: #fbbf24;
    --danger: #f43f5e;

    --radius: 18px;
    --radius-sm: 12px;

    --shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 10px 28px -14px rgba(0, 0, 0, 0.7);

    --shadow-hover:
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 22px 44px -18px rgba(34, 197, 94, 0.3);

    --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", Consolas, monospace;
}


* {
    box-sizing: border-box;
}


html {
    -webkit-text-size-adjust: 100%;
}


body {
    margin: 0;

    font-family: var(--font);

    background: var(--bg);

    color: var(--text);

    -webkit-font-smoothing: antialiased;
}


button,
input {
    font: inherit;
}


/* Quebra de linha mais natural: títulos equilibrados,
   parágrafos sem palavra órfã e sem hifenização. */
h1,
h2,
h3,
.empty-title {
    text-wrap: balance;
}


p,
.empty-description,
.code-hint,
.device-sub {
    text-wrap: pretty;
}


body {
    hyphens: manual;
}


.status-pill,
.count-chip,
.eyebrow,
.server-status,
.brand-subtitle,
.toolbar-title h2,
.device-meta {
    white-space: nowrap;
}


.icon-sprite {
    display: none;
}


.icon {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ========================================================
   HERO
   ======================================================== */

.hero {
    position: relative;

    /* Transparente: o fundo Matrix (matrix.js) aparece atrás do topo. */
    background: transparent;

    color: white;

    padding-bottom: 88px;
}


/* A camada ocupa o cabeçalho e recorta o brilho; assim os menus
   (idioma, perfil) podem passar da borda sem serem cortados. */
.hero-glow {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    /* O brilho some aos poucos antes da borda: sem "linha" no fundo,
       mesmo em cabeçalhos baixos (Usuários, Meu perfil). */
    -webkit-mask-image: linear-gradient(to bottom, black 35%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 35%, transparent 100%);
}


.hero-glow::before {
    content: "";

    position: absolute;

    width: 720px;
    height: 720px;

    right: -160px;
    top: -320px;

    background:
        radial-gradient(
            circle,
            rgba(34, 197, 94, 0.32),
            rgba(74, 222, 128, 0.08) 45%,
            transparent 70%
        );

    pointer-events: none;
}


.topbar,
.hero-body,
.container {
    position: relative;

    max-width: 1200px;

    margin: 0 auto;

    padding-left: 32px;
    padding-right: 32px;
}


.topbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    height: 76px;

    border-bottom: 1px solid var(--ink-line);
}


.brand {
    display: flex;
    align-items: center;

    gap: 16px;
}


/* ========================================================
   LOGO (vetorial, inline — sem URL de imagem exposta)
   ======================================================== */

.logo {
    display: inline-flex;
    align-items: center;

    gap: 0.3em;

    font-size: 26px;

    color: white;

    text-decoration: none;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}


/* O nome define a altura (1em); o símbolo fica só um pouco
   maior, mantendo as proporções de cada parte da arte. */
.logo-symbol {
    display: block;

    height: 1.3em;
    width: calc(1.3em * 590 / 505);

    flex-shrink: 0;

    pointer-events: none;
}


.logo-word {
    display: block;

    height: 1em;

    /* Na arte original o nome fica um pouco abaixo do centro do
       símbolo; sem isso ele parece "subir". */
    transform: translateY(0.14em);
    width: calc(1em * 1496 / 310);

    flex-shrink: 0;

    pointer-events: none;
}


.brand-subtitle {
    padding: 5px 11px;

    border: 1px solid var(--ink-line);

    border-radius: 999px;

    color: #a6b5ac;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.02em;
}


.topbar-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}


.lang-menu {
    position: relative;
}


.lang-button {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    height: 36px;

    padding: 0 10px 0 11px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--ink-line);

    color: #c5d3ca;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.04em;

    cursor: pointer;

    transition:
        background 0.15s,
        border-color 0.15s;
}


.lang-button:hover,
.lang-button[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);

    border-color: var(--line-strong);
}


.lang-button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}


.lang-button .icon {
    width: 15px;
    height: 15px;
}


.lang-button .chevron {
    width: 14px;
    height: 14px;

    color: var(--text-3);

    transition: transform 0.15s;
}


.lang-button[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}


.lang-list {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    z-index: 50;

    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 180px;

    padding: 6px;

    border-radius: 14px;

    background: var(--ink-2);

    border: 1px solid var(--line-strong);

    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);

    animation: menuIn 0.14s ease;
}


.lang-list[hidden] {
    display: none;
}


.lang-list-title {
    padding: 6px 10px 4px;

    color: var(--text-3);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.lang-list button {
    display: flex;
    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 9px 10px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--text);

    font-size: 14px;
    font-weight: 600;

    text-align: left;

    cursor: pointer;
}


.lang-list button:hover,
.lang-list button:focus-visible {
    background: rgba(255, 255, 255, 0.06);

    outline: none;
}


.lang-code {
    display: inline-grid;
    place-items: center;

    min-width: 30px;
    height: 22px;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.06);

    color: var(--text-2);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.04em;
}


.lang-list button[aria-checked="true"] {
    color: var(--spark);
}


.lang-list button[aria-checked="true"] .lang-code {
    background: var(--brand);

    color: var(--on-brand);
}


.lang-list button[aria-checked="true"]::after {
    content: "";

    width: 7px;
    height: 7px;

    margin-left: auto;

    border-radius: 50%;

    background: var(--brand);
}


.server-status {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 7px 14px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--ink-line);

    color: #c5d3ca;

    font-size: 13px;
    font-weight: 600;
}


.status-dot {
    position: relative;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #64748b;
}


.server-status.online .status-dot {
    background: #22c55e;
}


.server-status.online .status-dot::after {
    content: "";

    position: absolute;
    inset: -4px;

    border-radius: 50%;

    border: 2px solid #22c55e;

    animation: ping 1.8s ease-out infinite;
}


.server-status.offline .status-dot {
    background: #f43f5e;
}


.hero-body {
    display: grid;

    grid-template-columns: 1.1fr 1fr;

    align-items: center;

    gap: 48px;

    padding-top: 56px;
}


.eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 6px 12px 6px 10px;

    border-radius: 999px;

    background: rgba(74, 222, 128, 0.1);

    color: var(--spark);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.eyebrow .icon {
    width: 14px;
    height: 14px;

    animation: twinkle 3s ease-in-out infinite;
}


.hero-copy h1 {
    margin: 20px 0 16px;

    font-size: clamp(34px, 4.6vw, 52px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.03em;
}


.hero-copy .accent {
    display: block;

    background:
        linear-gradient(
            90deg,
            #86efac,
            var(--spark)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    /* Espaço extra para o "g" e o "." não serem recortados
       pelo background-clip: text. */
    padding: 0 0.08em 0.14em 0;
    margin-bottom: -0.14em;
}


.hero-copy p {
    max-width: 440px;

    margin: 0;

    color: #9fb0a6;

    font-size: 16px;

    line-height: 1.6;
}


/* ========================================================
   CARTÃO DE CÓDIGO
   ======================================================== */

.code-card {
    position: relative;

    padding: 26px;

    border-radius: 22px;

    background:
        linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.03)
        );

    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 30px 60px -30px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(12px);
}


.code-card-head {
    display: flex;

    gap: 14px;

    margin-bottom: 20px;
}


.code-card-icon {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--brand),
            #4ade80
        );

    box-shadow: 0 8px 20px -6px rgba(34, 197, 94, 0.7);

    color: var(--on-brand);
}


.code-card-icon .icon {
    width: 20px;
    height: 20px;
}


.code-card h2 {
    margin: 0 0 3px;

    font-size: 18px;
    font-weight: 700;
}


.code-card p {
    margin: 0;

    color: #9fb0a6;

    font-size: 14px;
}


.code-form {
    display: flex;

    gap: 10px;
}


.code-input {
    flex: 1;

    min-width: 0;

    height: 56px;

    padding: 0 16px;

    border-radius: 14px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    background: rgba(0, 0, 0, 0.45);

    color: white;

    font-family: var(--mono);
    font-size: 24px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-align: center;

    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}


.code-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}


.code-input:focus {
    outline: none;

    border-color: #86efac;

    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
}


.code-input.invalid {
    border-color: #f43f5e;

    animation: shake 0.35s;
}


.code-hint {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 16px;

    color: #7f9086;

    font-size: 13px;
}


.code-hint .icon {
    width: 16px;
    height: 16px;

    color: #4ade80;
}


/* ========================================================
   BOTÕES
   ======================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 0;

    border-radius: 12px;

    /* Tamanho único: botões lado a lado com o mesmo texto. */
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background 0.15s,
        transform 0.15s,
        box-shadow 0.15s,
        color 0.15s;
}


.btn:active:not(:disabled) {
    transform: translateY(1px);
}


.btn:focus-visible {
    outline: 3px solid rgba(34, 197, 94, 0.4);
    outline-offset: 2px;
}


.btn:disabled {
    cursor: not-allowed;

    opacity: 0.6;
}


.btn-primary:disabled {
    background: rgba(255, 255, 255, 0.06);

    color: var(--text-3);

    box-shadow: none;

    opacity: 1;
}


.btn-primary.checking {
    cursor: progress;
}


/* Mesma altura dos outros botões (lado a lado ficam alinhados);
   só o "Conectar por código" é maior, acompanhando o campo do código. */
.btn-primary {
    height: 44px;

    padding: 0 22px;

    background: var(--brand);

    color: var(--on-brand);

    box-shadow: 0 10px 24px -10px rgba(34, 197, 94, 0.9);
}


.btn-primary:hover:not(:disabled) {
    background: var(--brand-strong);
}


.btn-primary .icon {
    transition: transform 0.15s;
}


.btn-primary:hover:not(:disabled) .icon {
    transform: translateX(3px);
}


.btn-ghost {
    height: 44px;

    padding: 0 16px;

    background: var(--surface);

    border: 1px solid var(--line);

    color: var(--text);
}


.btn-ghost:hover {
    border-color: var(--line-strong);

    background: var(--surface-2);
}


.btn-ghost.loading .icon {
    animation: spin 0.8s linear infinite;
}


/* ========================================================
   TOOLBAR
   ======================================================== */

.container {
    margin-top: -48px;

    padding-bottom: 64px;
}


.toolbar {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 18px 20px;

    margin-bottom: 22px;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}


.toolbar-title h2 {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 0 0 3px;

    font-size: 19px;
    font-weight: 800;

    letter-spacing: -0.02em;
}


.toolbar-title p {
    margin: 0;

    color: var(--text-3);

    font-size: 13px;
}


.count-chip {
    min-width: 26px;

    padding: 2px 9px;

    border-radius: 999px;

    background: var(--brand-soft);

    color: var(--brand);

    font-size: 13px;
    font-weight: 800;

    text-align: center;
}


.toolbar-actions {
    display: flex;

    gap: 10px;

    min-width: 0;
}


.search {
    display: flex;
    align-items: center;

    gap: 8px;

    width: 280px;
    min-width: 0;
    height: 44px;

    padding: 0 14px;

    border: 1px solid var(--line);

    border-radius: 12px;

    background: var(--surface-2);

    color: var(--text-3);

    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}


.search:focus-within {
    border-color: var(--brand);

    background: var(--surface);

    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}


.search input {
    flex: 1;

    min-width: 0;

    border: 0;

    background: transparent;

    color: var(--text);

    font-size: 14px;

    outline: none;
}


/* ========================================================
   DISPOSITIVOS
   ======================================================== */

.devices {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(310px, 1fr)
        );

    gap: 18px;
}


.device-card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 20px;

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    transition:
        transform 0.2s,
        box-shadow 0.2s,
        border-color 0.2s;

    animation: rise 0.35s ease both;
}


.device-card:not(.skeleton):hover {
    transform: translateY(-3px);

    border-color: rgba(34, 197, 94, 0.35);

    box-shadow: var(--shadow-hover);
}


.device-head {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 18px;
}


.device-avatar {
    position: relative;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            var(--ink-3),
            var(--ink)
        );

    color: var(--spark);

    border: 1px solid var(--line-strong);

    flex-shrink: 0;
}


.device-avatar .icon {
    width: 22px;
    height: 22px;
}


.device-avatar::after {
    content: "";

    position: absolute;

    right: -3px;
    bottom: -3px;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #22c55e;

    border: 3px solid var(--surface);
}


.device-avatar.offline::after {
    background: #94a3b8;
}


.device-title {
    min-width: 0;

    flex: 1;
}


.device-name {
    font-size: 16px;
    font-weight: 800;

    letter-spacing: -0.01em;

    line-height: 1.3;

    overflow-wrap: anywhere;
}


/* Quebra em até 2 linhas em vez de cortar com "…". */
.device-sub {
    margin-top: 3px;

    color: var(--text-3);

    font-size: 13px;

    line-height: 1.4;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    overflow: hidden;
}


.status-pill {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 4px 10px;

    border-radius: 999px;

    background: var(--ok-soft);

    color: var(--ok);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    flex-shrink: 0;
}


.status-pill::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}


.status-pill.offline {
    background: rgba(148, 163, 184, 0.12);

    color: #64748b;
}


.specs {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-bottom: 14px;
}


.spec.wide {
    grid-column: 1 / -1;
}


.device-meta {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-bottom: 14px;

    color: var(--text-3);

    font-size: 12px;
    font-weight: 600;
}


.device-meta .icon {
    width: 14px;
    height: 14px;
}


.spec {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;

    padding: 10px 12px;

    border-radius: var(--radius-sm);

    background: var(--surface-2);
}


.spec .icon {
    width: 17px;
    height: 17px;

    color: var(--brand);
}


.spec-text {
    min-width: 0;
}


.spec-label {
    display: block;

    color: var(--text-3);

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}


.spec-value {
    display: block;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.35;

    overflow-wrap: anywhere;
}


.spec-pair {
    display: grid;

    grid-template-columns: auto 1fr 1fr;

    column-gap: 10px;
}


.spec-value.nowrap {
    overflow-wrap: normal;

    white-space: nowrap;
}


.spec-value.mono {
    font-family: var(--mono);
    font-size: 12.5px;
}


.btn-connect {
    width: 100%;
    height: 46px;

    margin-top: auto;

    background: var(--brand-soft);

    color: var(--spark);
}


.btn-connect:hover:not(:disabled) {
    background: var(--brand);

    color: var(--on-brand);

    box-shadow: 0 10px 24px -10px rgba(34, 197, 94, 0.9);
}


/* ========================================================
   ESTADOS
   ======================================================== */

.skeleton {
    min-height: 268px;

    background:
        linear-gradient(
            100deg,
            var(--surface) 30%,
            var(--surface-2) 50%,
            var(--surface) 70%
        );

    background-size: 200% 100%;

    animation: shimmer 1.3s linear infinite;
}


.empty {
    grid-column: 1 / -1;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 56px 24px;

    background: var(--surface);

    border: 1px dashed var(--line-strong);

    border-radius: var(--radius);

    text-align: center;
}


.empty-icon {
    display: grid;
    place-items: center;

    width: 64px;
    height: 64px;

    margin-bottom: 16px;

    border-radius: 20px;

    background: var(--brand-soft);

    color: var(--brand);
}


.empty-icon .icon {
    width: 28px;
    height: 28px;
}


.empty.error .empty-icon {
    background: rgba(244, 63, 94, 0.12);

    color: var(--danger);
}


.empty-title {
    margin-bottom: 6px;

    font-size: 17px;
    font-weight: 800;
}


.empty-description {
    max-width: 380px;

    color: var(--text-2);

    font-size: 14px;

    line-height: 1.55;
}


/* ========================================================
   NOTIFICAÇÕES
   ======================================================== */

.toasts {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 10000;

    display: flex;
    flex-direction: column;

    gap: 10px;

    width: min(380px, calc(100vw - 32px));

    pointer-events: none;
}


.toast {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 14px 14px 14px 16px;

    border-radius: 14px;

    background: var(--ink-2);

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #e6efe9;

    font-size: 14px;

    line-height: 1.45;

    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);

    pointer-events: auto;

    animation: toastIn 0.25s ease both;
}


.toast.leaving {
    animation: toastOut 0.2s ease forwards;
}


.toast-icon {
    margin-top: 1px;
}


.toast.success .toast-icon { color: #4ade80; }
.toast.error .toast-icon { color: #fb7185; }
.toast.warning .toast-icon { color: #fbbf24; }
.toast.info .toast-icon { color: var(--spark); }


.toast-message {
    flex: 1;
}


.toast-close {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    border: 0;
    border-radius: 6px;

    background: transparent;

    color: #7f9086;

    cursor: pointer;
}


.toast-close:hover {
    background: rgba(255, 255, 255, 0.08);

    color: white;
}


.toast-close .icon {
    width: 14px;
    height: 14px;
}


.toast-spinner {
    width: 18px;
    height: 18px;

    margin-top: 1px;

    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--spark);

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

    flex-shrink: 0;
}


/* ========================================================
   PÁGINA DA SESSÃO
   ======================================================== */

.session-page {
    display: flex;
    flex-direction: column;

    height: 100vh;
    height: 100dvh;

    overflow: hidden;
}


.session-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    min-height: 64px;

    padding: 10px 20px;

    background: var(--ink-2);

    border-bottom: 1px solid var(--ink-line);

    flex-shrink: 0;
}


.session-bar-left,
.session-bar-right {
    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 0;
}


.session-bar-right {
    gap: 10px;

    flex-shrink: 0;
}


.session-logo {
    font-size: 20px;

    flex-shrink: 0;
}


.session-divider {
    width: 1px;
    height: 32px;

    background: var(--ink-line);

    flex-shrink: 0;
}


.session-device {
    min-width: 0;
}


.session-device-name {
    font-size: 15px;
    font-weight: 800;

    letter-spacing: -0.01em;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.session-device-meta {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 3px;

    white-space: nowrap;
}


.session-code {
    padding: 2px 8px;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.06);

    color: var(--text-2);

    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.04em;
}


.session-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: var(--text-2);

    font-size: 12px;
    font-weight: 700;
}


.session-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--warn);
}


.session-status[data-state="live"] {
    color: var(--spark);
}


.session-status[data-state="live"] .session-status-dot {
    background: var(--brand);

    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);

    animation: blink 1.6s ease-in-out infinite;
}


.session-status[data-state="ended"] .session-status-dot {
    background: #64748b;
}


.session-status[data-state="searching"] .session-status-dot,
.session-status[data-state="waiting"] .session-status-dot,
.session-status[data-state="connecting"] .session-status-dot {
    animation: blink 1.2s ease-in-out infinite;
}


.session-timer {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: var(--text-3);

    font-family: var(--mono);
    font-size: 12px;
}


.session-timer[hidden] {
    display: none;
}


.session-timer .icon {
    width: 13px;
    height: 13px;
}


a.btn {
    text-decoration: none;
}


.btn-sm {
    height: 38px;

    padding: 0 14px;

    font-size: 13px;
}


.btn-sm .icon {
    width: 16px;
    height: 16px;
}


.session-bar .btn-ghost {
    background: rgba(255, 255, 255, 0.04);

    border-color: var(--ink-line);

    color: var(--text);
}


.btn-danger {
    background: rgba(244, 63, 94, 0.12);

    border: 1px solid rgba(244, 63, 94, 0.35);

    color: #fda4af;
}


.btn-danger:hover {
    background: var(--danger);

    border-color: var(--danger);

    color: white;
}


.btn-danger[hidden] {
    display: none;
}


.session-stage {
    position: relative;

    flex: 1;

    min-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #030604;

    overflow: hidden;
}


.session-stage > canvas#remoteScreen {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    outline: none;

    cursor: default;
}


.session-panel {
    position: absolute;
    inset: 0;

    z-index: 3;

    display: grid;
    place-items: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(34, 197, 94, 0.12),
            transparent 55%
        ),
        rgba(3, 6, 4, 0.94);

    animation: fadeIn 0.2s ease;
}


.session-panel[hidden] {
    display: none;
}


.session-panel-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(440px, 100%);

    padding: 32px 28px 28px;

    border-radius: 22px;

    background: var(--surface);

    border: 1px solid var(--line-strong);

    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);

    text-align: center;
}


.session-panel-icon {
    display: grid;
    place-items: center;

    width: 64px;
    height: 64px;

    margin-bottom: 18px;

    border-radius: 20px;

    background: var(--brand-soft);

    color: var(--spark);
}


.session-panel[data-variant="error"] .session-panel-icon {
    background: rgba(244, 63, 94, 0.12);

    color: #fb7185;
}


.session-panel-icon .icon {
    width: 28px;
    height: 28px;
}


.session-panel h1 {
    margin: 0 0 8px;

    font-size: 22px;
    font-weight: 800;

    letter-spacing: -0.02em;
}


.session-panel p {
    margin: 0 0 24px;

    color: var(--text-2);

    font-size: 14px;

    line-height: 1.55;
}


.session-panel-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 10px;

    width: 100%;
}


.session-panel-actions .btn {
    flex: 1 1 160px;

    height: 46px;
}


.btn-icon {
    width: 38px;

    padding: 0;
}


.btn-icon[hidden] {
    display: none;
}


/* Tela cheia: o palco ocupa tudo, sem a barra. */
.session-stage:fullscreen {
    width: 100vw;
    height: 100vh;
}


.session-stage:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
}


/* Tela cheia por CSS (celular/iPhone, onde a API real não serve para div). */
.session-stage.pseudo-fullscreen {
    position: fixed;
    inset: 0;

    z-index: 200;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    margin: 0;
    border-radius: 0;
}


/* ---------- Monitores ---------- */

.monitor-switch {
    display: inline-flex;
    align-items: center;

    gap: 2px;

    height: 38px;

    padding: 3px 3px 3px 10px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid var(--ink-line);

    color: var(--text-3);
}


.monitor-switch[hidden] {
    display: none;
}


.monitor-switch .icon {
    width: 15px;
    height: 15px;

    margin-right: 4px;
}


.monitor-switch button {
    min-width: 30px;
    height: 30px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--text-2);

    font-weight: 800;

    cursor: pointer;
}


.monitor-switch button:hover {
    color: white;
}


.monitor-switch button[aria-pressed="true"] {
    background: var(--brand);

    color: var(--on-brand);
}


/* ---------- Botões auxiliares ---------- */

.badge {
    min-width: 18px;

    padding: 1px 6px;

    border-radius: 999px;

    background: var(--danger);

    color: white;

    font-size: 11px;
    font-weight: 800;

    text-align: center;
}


.badge[hidden] {
    display: none;
}


.icon-button {
    display: inline-grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--text-2);

    cursor: pointer;

    flex-shrink: 0;
}


.icon-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);

    color: white;
}


.icon-button:disabled {
    opacity: 0.35;

    cursor: default;
}


.btn-icon-only {
    width: 42px;
    height: 42px;

    padding: 0;

    flex-shrink: 0;
}


.btn-icon-only[hidden] {
    display: none;
}


/* ---------- Chat ---------- */

.chat-panel {
    position: absolute;

    top: 12px;
    right: 12px;
    bottom: 12px;

    z-index: 5;

    display: flex;
    flex-direction: column;

    width: min(360px, calc(100% - 24px));

    background: var(--ink-2);

    border: 1px solid var(--line-strong);
    border-radius: 18px;

    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);

    overflow: hidden;

    animation: fadeIn 0.15s ease;
}


.chat-panel[hidden] {
    display: none;
}


.chat-header {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 10px 12px 14px;

    border-bottom: 1px solid var(--line);
}


.chat-avatar {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: var(--brand);

    color: var(--on-brand);

    font-size: 13px;
    font-weight: 800;

    flex-shrink: 0;
}


.chat-title {
    display: flex;
    flex-direction: column;

    min-width: 0;

    flex: 1;
}


.chat-title strong {
    font-size: 14px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.chat-title span {
    color: var(--text-3);

    font-size: 12px;
}


.chat-messages {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 14px 12px;

    overflow-y: auto;
}


.chat-empty {
    margin: auto 12px;

    color: var(--text-3);

    font-size: 13px;

    text-align: center;

    line-height: 1.5;
}


.chat-empty[hidden] {
    display: none;
}


.chat-row {
    display: flex;
}


.chat-row.mine {
    justify-content: flex-end;
}


.chat-bubble {
    display: flex;
    flex-direction: column;

    gap: 3px;

    max-width: 82%;

    padding: 7px 10px 5px;

    border-radius: 12px 12px 12px 4px;

    background: var(--surface-2);

    border: 1px solid var(--line);
}


.chat-row.mine .chat-bubble {
    border-radius: 12px 12px 4px 12px;

    background: #123a24;

    border-color: #1d5a37;
}


.chat-name {
    color: var(--spark);

    font-size: 11px;
    font-weight: 700;
}


.chat-row.mine .chat-name {
    color: #86efac;
}


.chat-content {
    font-size: 14px;

    line-height: 1.4;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


.chat-time {
    align-self: flex-end;

    color: var(--text-3);

    font-size: 10px;
}


.chat-notice {
    align-self: center;

    max-width: 90%;

    margin: 2px 0;

    padding: 5px 10px;

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.04);

    color: var(--text-2);

    font-size: 12px;

    text-align: center;
}


.chat-file {
    display: grid;

    grid-template-columns: auto 1fr;

    align-items: center;

    gap: 8px 10px;

    min-width: 200px;
}


.chat-file-icon {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 10px;

    background: var(--brand);

    color: var(--on-brand);
}


.chat-file-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.chat-file-text strong {
    font-size: 13px;

    overflow-wrap: anywhere;
}


.chat-file-text small {
    color: var(--text-2);

    font-size: 11px;
}


.chat-file progress,
.chat-file .btn {
    grid-column: 1 / -1;
}


.chat-file .btn {
    width: 100%;
}


.chat-audio {
    width: 240px;
    max-width: 100%;
    height: 40px;
}


progress {
    width: 100%;
    height: 4px;

    border: 0;
    border-radius: 2px;

    background: var(--line);

    appearance: none;
}


progress::-webkit-progress-bar {
    background: var(--line);
    border-radius: 2px;
}


progress::-webkit-progress-value {
    background: var(--brand);
    border-radius: 2px;
}


progress::-moz-progress-bar {
    background: var(--brand);
}


.chat-form {
    display: flex;

    gap: 8px;

    padding: 10px;

    border-top: 1px solid var(--line);
}


.chat-form input {
    flex: 1;

    min-width: 0;

    height: 42px;

    padding: 0 12px;

    border: 1px solid var(--line-strong);
    border-radius: 12px;

    background: var(--surface);

    color: var(--text);

    font-size: 14px;

    outline: none;
}


.chat-form input:focus {
    border-color: var(--brand);
}


#chatMicBtn.recording {
    background: var(--danger);

    border-color: var(--danger);

    color: white;

    animation: blink 1.2s ease-in-out infinite;
}


/* ---------- Gerenciador de arquivos ---------- */

.files-modal {
    position: absolute;
    inset: 0;

    z-index: 6;

    display: grid;
    place-items: center;

    padding: 20px;

    background: rgba(2, 5, 3, 0.7);

    backdrop-filter: blur(4px);

    animation: fadeIn 0.15s ease;
}


.files-modal[hidden] {
    display: none;
}


.files-window {
    display: flex;
    flex-direction: column;

    width: min(760px, 100%);
    height: min(560px, 100%);

    background: var(--ink-2);

    border: 1px solid var(--line-strong);
    border-radius: 18px;

    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);

    overflow: hidden;
}


.files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 12px 12px 18px;

    border-bottom: 1px solid var(--line);
}


.files-header h2 {
    margin: 0;

    font-size: 16px;
    font-weight: 800;
}


.files-toolbar {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 10px 12px;

    border-bottom: 1px solid var(--line);
}


.files-path {
    flex: 1;

    min-width: 0;

    padding: 8px 12px;

    border-radius: 10px;

    background: var(--surface);

    color: var(--text-2);

    font-family: var(--mono);
    font-size: 12px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    direction: rtl;
    text-align: left;
}


.files-toolbar .btn {
    flex-shrink: 0;

    cursor: pointer;
}


.files-toolbar .btn.disabled {
    opacity: 0.4;

    pointer-events: none;
}


.files-list {
    flex: 1;

    padding: 6px;

    overflow-y: auto;
}


.files-row {
    display: grid;

    grid-template-columns: auto 1fr auto auto;

    align-items: center;

    gap: 12px;

    padding: 8px 10px;

    border-radius: 10px;
}


.files-row:hover,
.files-row:focus-visible {
    background: rgba(255, 255, 255, 0.04);

    outline: none;
}


.files-row.is-dir {
    cursor: pointer;
}


.files-icon {
    display: grid;
    place-items: center;

    color: var(--text-3);
}


.files-row.is-dir .files-icon {
    color: var(--spark);
}


.files-name {
    min-width: 0;

    font-size: 14px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.files-meta {
    color: var(--text-3);

    font-size: 12px;

    white-space: nowrap;
}


.files-loading {
    display: grid;
    place-items: center;

    height: 100%;
}


.files-message {
    margin: 40px 0;

    color: var(--text-3);

    text-align: center;
}


.files-message.error {
    color: #fb7185;
}


.files-transfers {
    max-height: 132px;

    overflow-y: auto;

    border-top: 1px solid var(--line);
}


.files-transfers:empty {
    display: none;
}


.transfer-row {
    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 4px 10px;

    padding: 8px 16px;

    font-size: 13px;
}


.transfer-row .icon {
    width: 16px;
    height: 16px;

    color: var(--spark);
}


.transfer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.transfer-status {
    color: var(--text-3);

    font-size: 12px;
}


.transfer-row progress {
    grid-column: 1 / -1;
}


.transfer-row.done .transfer-status {
    color: var(--spark);
}


.transfer-row.failed .transfer-status {
    color: #fb7185;
}


@media (max-width: 1100px) {

    .session-bar .btn-label {
        display: none;
    }
}


@media (max-width: 600px) {

    .files-row {
        grid-template-columns: auto 1fr auto;
    }

    .files-meta {
        display: none;
    }

    .files-toolbar .btn span {
        display: none;
    }
}


/* ---------- Login ---------- */

.auth-page {
    position: relative;

    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    overflow-x: hidden;
}


.auth-page .hero-glow {
    position: fixed;
}


.auth-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 18px 32px 0;
}


.auth-top-logo {
    font-size: 24px;
}


@media (max-width: 560px) {

    .auth-top {
        padding: 14px 16px 0;
    }

    .auth-top-logo {
        font-size: 20px;
    }
}


.auth-main {
    position: relative;
    z-index: 1;

    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 18px;

    padding: 24px 16px 48px;
}


.auth-card {
    width: min(420px, 100%);

    padding: 32px 28px 28px;

    border-radius: 22px;

    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));

    border: 1px solid var(--line-strong);

    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(12px);
}


.auth-logo {
    font-size: 26px;

    margin-bottom: 22px;
}


.auth-card h1 {
    margin: 0 0 18px;

    font-size: 22px;
    font-weight: 800;

    letter-spacing: -0.02em;
}


.auth-notice {
    margin: -6px 0 16px;

    padding: 10px 12px;

    border-radius: 12px;

    background: var(--brand-soft);

    color: var(--spark);

    font-size: 13px;

    line-height: 1.45;
}


.auth-notice[hidden] {
    display: none;
}


.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 4px;

    margin-bottom: 18px;

    padding: 4px;

    border-radius: 12px;

    background: rgba(0, 0, 0, 0.3);
}


.auth-tabs button {
    height: 36px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--text-2);

    font-weight: 700;

    cursor: pointer;
}


.auth-tabs button[aria-selected="true"] {
    background: var(--surface-2);

    color: var(--text);
}


.auth-form {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


.auth-field {
    display: flex;
    flex-direction: column;

    gap: 6px;

    color: var(--text-2);

    font-size: 13px;
    font-weight: 600;
}


.auth-field[hidden] {
    display: none;
}


.auth-field input {
    width: 100%;
    height: 46px;

    padding: 0 14px;

    border: 1px solid var(--line-strong);
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.35);

    color: var(--text);

    font-size: 15px;

    outline: none;
}


.auth-field input:focus {
    border-color: var(--brand);

    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}


.password-wrap {
    position: relative;

    display: block;
}


.password-wrap input {
    padding-right: 46px;
}


.password-wrap .icon-button {
    position: absolute;

    top: 6px;
    right: 6px;
}


.password-wrap .icon-button[aria-pressed="true"] {
    color: var(--spark);
}


.auth-message {
    margin: 0;

    padding: 10px 12px;

    border-radius: 12px;

    background: rgba(244, 63, 94, 0.12);

    color: #fda4af;

    font-size: 13px;

    line-height: 1.45;
}


.auth-message[data-type="info"] {
    background: var(--brand-soft);

    color: var(--spark);
}


.auth-message[hidden] {
    display: none;
}


.auth-submit {
    height: 48px;

    margin-top: 4px;
}


.auth-divider {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 20px 0 14px;

    color: var(--text-3);

    font-size: 12px;
}


.auth-divider::before,
.auth-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background: var(--line-strong);
}


.auth-google {
    width: 100%;
    height: 46px;
}


.google-icon {
    width: 18px;
    height: 18px;
}


.auth-foot {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    max-width: 420px;

    margin: 0;

    color: var(--text-3);

    font-size: 12px;

    text-align: center;
}


.auth-foot .icon {
    width: 15px;
    height: 15px;

    color: var(--spark);
}


/* ---------- Login ilustrado ---------- */

.auth-split {
    flex-direction: row;
    align-items: center;
    justify-content: center;

    gap: clamp(32px, 6vw, 88px);

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 16px 32px 48px;
}


.auth-side {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;

    width: min(420px, 100%);

    flex-shrink: 0;
}


.auth-hero {
    flex: 1;

    min-width: 0;
    max-width: 560px;
}


.auth-hero-title {
    margin: 18px 0 14px;

    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.03em;
}


.auth-hero-title .accent {
    display: block;

    background: linear-gradient(90deg, #86efac, var(--spark));

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    padding: 0 0.08em 0.14em 0;
    margin-bottom: -0.14em;
}


.auth-hero-text {
    max-width: 460px;

    margin: 0;

    color: #9fb0a6;

    font-size: 16px;

    line-height: 1.6;
}


.hero-art {
    display: block;

    /* Acompanha a altura da tela para os destaques caberem. */
    width: min(100%, 520px, 48vh);
    height: auto;

    margin: 14px 0 8px;

    overflow: visible;
}


.auth-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.auth-features li {
    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 14px;

    border-radius: 16px;

    background: var(--surface);

    border: 1px solid var(--line);
}


.auth-features strong {
    display: block;

    margin-bottom: 3px;

    font-size: 14px;
    font-weight: 800;
}


.auth-features strong + span {
    color: var(--text-3);

    font-size: 12.5px;

    line-height: 1.45;
}


.feat-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 11px;

    background: var(--brand-soft);

    color: var(--spark);
}


.feat-icon .icon {
    width: 17px;
    height: 17px;
}


/* Ícone colado ao texto, mesmo quando a frase quebra. */
.auth-page .auth-foot {
    max-width: 380px;

    text-align: left;
}


.auth-art {
    display: block;

    width: min(240px, 100%);
    height: auto;

    margin: -4px auto 12px;
}


/* ---------- Ilustrações: estados vazios e faixas ---------- */

.empty-art {
    width: 160px;
    height: auto;

    margin-bottom: 12px;
}


.toolbar-banner {
    background:
        linear-gradient(
            110deg,
            rgba(34, 197, 94, 0.11),
            var(--surface) 60%
        );
}


.toolbar-art {
    margin-left: auto;

    flex-shrink: 0;
}


.toolbar-art svg {
    display: block;

    width: 150px;
    height: auto;
}


/* ---------- Animações das ilustrações ---------- */

.art-flow {
    fill: none;

    stroke: #4ade80;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 3 7;

    opacity: 0.8;

    animation: artFlow 1.4s linear infinite;
}


.art-flow-danger {
    stroke: #fb7185;
}


.art-float {
    animation: artFloat 5s ease-in-out infinite;
}


.art-float-late {
    animation-delay: -2.5s;
}


.art-dot {
    animation: artDot 1.4s ease-in-out infinite;
}


.art-dot:nth-of-type(2) {
    animation-delay: 0.2s;
}


.art-dot:nth-of-type(3) {
    animation-delay: 0.4s;
}


.art-ping {
    transform-box: fill-box;
    transform-origin: center;

    animation: artPing 2.6s ease-out infinite;
}


.art-cursor {
    animation: artCursor 2.6s ease-in-out infinite;
}


.art-twinkle {
    transform-box: fill-box;
    transform-origin: center;

    animation: artTwinkle 3s ease-in-out infinite;
}


.art-twinkle-late {
    animation-delay: -1.5s;
}


.art-zz {
    fill: #86efac;

    font: 800 14px var(--font);

    animation: artZz 2.6s ease-in-out infinite;
}


.art-zz-late {
    font-size: 11px;

    animation-delay: -1.3s;
}


@keyframes artFlow {
    to { stroke-dashoffset: -20; }
}


@keyframes artFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}


@keyframes artDot {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}


@keyframes artPing {
    0%, 35% { transform: scale(0.4); opacity: 0; }
    40% { opacity: 0.9; }
    85%, 100% { transform: scale(2); opacity: 0; }
}


@keyframes artCursor {
    0%, 100% { transform: translate(-16px, -12px); }
    35%, 70% { transform: translate(0, 0); }
}


@keyframes artTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1); }
}


@keyframes artZz {
    0% { opacity: 0; transform: translateY(4px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-6px); }
}


@media (prefers-reduced-motion: reduce) {

    .art-flow,
    .art-float,
    .art-dot,
    .art-ping,
    .art-cursor,
    .art-twinkle,
    .art-zz {
        animation: none !important;
    }
}


@media (max-width: 980px) {

    .auth-split {
        flex-direction: column;

        gap: 22px;

        padding: 4px 16px 40px;
    }

    .auth-hero {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;

        text-align: center;
    }

    .hero-art {
        width: min(100%, 400px);

        margin: 8px auto 0;
    }

    .auth-features {
        display: none;
    }
}


@media (max-width: 640px) {

    .toolbar-art {
        display: none;
    }
}


@media (max-width: 560px) {

    .auth-hero-title {
        margin: 14px 0 6px;

        font-size: 28px;
    }

    .auth-hero-text {
        display: none;
    }

    .hero-art {
        width: min(100%, 300px);
    }
}


/* ---------- Menu principal na barra (Painel | Dispositivos | ...) ----------
   Fica logo depois do selo "Central de suporte". Quando não cabe (tela
   estreita ou zoom), account.js recolhe a barra em etapas (.fit-1 a .fit-4)
   até sobrar só o ícone de cada item. */

.topbar {
    gap: 16px;
}


.topbar .brand,
.topbar .topbar-actions {
    flex-shrink: 0;
}


.main-nav {
    display: flex;
    align-items: center;

    margin-right: auto;

    flex-shrink: 0;
}


.main-nav a {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    height: 36px;

    padding: 0 11px;

    border-radius: 10px;

    color: #a6b5ac;

    font-size: 13.5px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition: background 0.15s, color 0.15s;
}


/* Separador fininho entre os itens. */
.main-nav a + a {
    margin-left: 9px;
}


.main-nav a + a::before {
    content: "";

    position: absolute;

    left: -5px;
    top: 50%;

    width: 1px;
    height: 16px;

    transform: translateY(-50%);

    background: rgba(255, 255, 255, 0.12);

    pointer-events: none;
}


.main-nav a .icon {
    width: 16px;
    height: 16px;
}


/* Sem caixa: o item atual só fica verde (ícone e nome). */
.main-nav a:hover {
    color: white;
}


.main-nav a[aria-current="page"] {
    color: var(--spark);
}


/* Etapa 1: botões da direita só com ícone (Ajuda, Perfil, status). */
.topbar.fit-1 .help-link span,
.topbar.fit-1 .account-name,
.topbar.fit-1 .server-status #serverStatusText,
.topbar.fit-1 .lang-button .chevron {
    display: none;
}

.topbar.fit-1 .help-link {
    width: 38px;

    padding: 0;

    justify-content: center;
}

.topbar.fit-1 .server-status {
    padding: 9px;
}

.topbar.fit-1 .account-button {
    padding: 0 3px;
}

/* Etapa 2: menu só com ícones (o nome aparece ao passar o mouse). */
.topbar.fit-2 .main-nav a span {
    display: none;
}

.topbar.fit-2 .main-nav a {
    width: 36px;

    padding: 0;

    justify-content: center;
}

/* Etapa 3: sem o selo "Central de suporte". */
.topbar.fit-3 .brand-subtitle {
    display: none;
}

/* Etapa 4: só o símbolo da logo, tudo mais junto. */
.topbar.fit-4 .logo-word {
    display: none;
}

.topbar.fit-4,
.topbar.fit-4 .topbar-actions {
    gap: 6px;
}

.topbar.fit-4 .main-nav a + a {
    margin-left: 5px;
}

.topbar.fit-4 .main-nav a + a::before {
    left: -3px;
}

.topbar.fit-4 .main-nav a,
.topbar.fit-4 .help-link {
    width: 32px;
    height: 32px;
}

.topbar.fit-4 .lang-button {
    padding: 0 7px;
}

/* Etapa 5 (telas bem estreitas): sem a bolinha do servidor e sem o globo
   (a sigla do idioma continua), espaços mínimos. */
.topbar.fit-5 .server-status,
.topbar.fit-5 .lang-button > .icon:first-child {
    display: none;
}

.topbar.fit-5,
.topbar.fit-5 .topbar-actions {
    gap: 4px;
}

.topbar.fit-5 .main-nav a + a {
    margin-left: 3px;
}

.topbar.fit-5 .main-nav a + a::before {
    left: -2px;
}

.topbar.fit-5 .main-nav a,
.topbar.fit-5 .help-link {
    width: 30px;
}


/* ---------- Cards de números ---------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 22px;
}


.stat-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;

    column-gap: 12px;
    row-gap: 2px;

    align-items: center;

    padding: 18px;

    border-radius: var(--radius);

    background: var(--surface);

    border: 1px solid var(--line);

    min-width: 0;
}


.stat-icon {
    grid-row: 1 / 3;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 13px;

    background: var(--brand-soft);

    color: var(--spark);
}


.stat-label {
    color: var(--text-3);

    font-size: 12.5px;
    font-weight: 700;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.stat-value {
    font-size: 26px;
    font-weight: 800;

    letter-spacing: -0.02em;

    line-height: 1.15;

    white-space: nowrap;
}


.stat-hint {
    grid-column: 1 / -1;

    margin-top: 8px;

    color: var(--text-3);

    font-size: 12px;

    min-height: 1em;
}


/* ---------- Seções e listas ---------- */

.panel-section {
    margin-bottom: 26px;
}


.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;
}


.section-head h3 {
    display: flex;
    align-items: center;

    gap: 9px;

    margin: 0;

    font-size: 16px;
    font-weight: 800;
}


.section-head h3 .icon {
    color: var(--spark);
}


.row-list {
    display: flex;
    flex-direction: column;

    gap: 8px;

    transition: opacity 0.15s;
}


.row-list.loading {
    opacity: 0.55;
}


.row-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;

    align-items: center;

    gap: 14px;

    padding: 12px 14px;

    border-radius: 14px;

    background: var(--surface);

    border: 1px solid var(--line);
}


.row-card.skeleton {
    display: block;

    min-height: 64px;
}


.saved-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}


.row-icon {
    position: relative;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.05);

    color: var(--text-2);
}


.row-icon::after {
    content: "";

    position: absolute;

    right: -2px;
    bottom: -2px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    border: 2px solid var(--surface);

    background: #64748b;
}


.row-icon.status-ok,
.row-icon.status-live {
    background: var(--brand-soft);

    color: var(--spark);
}


.row-icon.status-ok::after,
.row-icon.status-live::after {
    background: var(--ok);
}


.row-icon.status-danger::after {
    background: var(--danger);
}


.row-icon.status-warn::after {
    background: var(--warn);
}


.row-main {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.row-main strong {
    display: flex;
    align-items: center;

    gap: 6px;

    font-size: 14.5px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.row-sub {
    display: flex;
    flex-wrap: wrap;

    gap: 0 6px;

    color: var(--text-3);

    font-size: 12.5px;
}


.row-sub .mono,
.code-field {
    font-family: var(--mono);

    letter-spacing: 0.04em;
}


.lock-badge {
    width: 14px;
    height: 14px;

    color: var(--spark);
}


.row-when {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 3px;

    color: var(--text-2);

    font-size: 12.5px;

    white-space: nowrap;
}


.row-when small {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color: var(--text-3);

    font-size: 12px;
}


.row-when small .icon {
    width: 12px;
    height: 12px;
}


.status-chip {
    padding: 4px 10px;

    border-radius: 999px;

    background: rgba(148, 163, 184, 0.12);

    color: #94a3b8;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


.status-chip.ok {
    background: var(--ok-soft);

    color: var(--ok);
}


.status-chip.live {
    background: rgba(56, 189, 248, 0.12);

    color: #38bdf8;
}


.status-chip.danger {
    background: rgba(244, 63, 94, 0.12);

    color: #fb7185;
}


.status-chip.warn {
    background: rgba(251, 191, 36, 0.12);

    color: #fbbf24;
}


.row-buttons {
    display: flex;
    align-items: center;

    gap: 6px;
}


.row-action {
    color: var(--spark);
}


.btn.disabled {
    opacity: 0.45;

    pointer-events: none;
}


.row-empty {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 6px;

    padding: 28px 20px;

    border-radius: var(--radius);

    border: 1px dashed var(--line-strong);

    background: var(--surface);

    text-align: center;
}


.row-empty .empty-art {
    width: 130px;

    margin-bottom: 4px;
}


.row-empty span {
    max-width: 420px;

    color: var(--text-2);

    font-size: 13.5px;

    line-height: 1.5;
}


.row-empty .btn {
    margin-top: 8px;
}


.row-note {
    margin: 6px 0 0;

    color: var(--text-3);

    font-size: 12.5px;

    text-align: center;
}


/* ---------- Cadastro de dispositivo ---------- */

.editor-avatar .icon {
    width: 24px;
    height: 24px;
}


.field-optional {
    color: var(--text-3);

    font-style: normal;
    font-weight: 500;
}


.field-hint {
    color: var(--text-3);

    font-size: 12px;

    line-height: 1.4;
}


.check-field {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--text-2);

    font-size: 13.5px;

    cursor: pointer;
}


.check-field input {
    width: 17px;
    height: 17px;

    accent-color: var(--brand);
}


.editor-spacer {
    flex: 1;
}


.btn-danger-text {
    color: #fb7185;
}


.btn-danger-text:hover:not(:disabled) {
    background: rgba(244, 63, 94, 0.1);

    color: #fda4af;
}


.editor-history {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 14px;

    border-radius: 14px;

    border: 1px solid var(--line);

    background: var(--surface);

    color: var(--text);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


.editor-history span {
    flex: 1;
}


.editor-history .icon:first-child {
    color: var(--spark);
}


.editor-history:hover {
    border-color: rgba(74, 222, 128, 0.35);
}


/* Card online: Conectar + Salvar lado a lado. */
.device-actions {
    display: flex;

    gap: 8px;

    margin-top: auto;
}


.device-actions .btn-connect {
    flex: 1;

    width: auto;

    margin-top: 0;
}


.btn-save-device {
    width: 46px;
    height: 46px;

    padding: 0;

    justify-content: center;

    background: rgba(255, 255, 255, 0.05);

    color: var(--text-2);

    flex-shrink: 0;
}


.btn-save-device:hover {
    background: var(--brand-soft);

    color: var(--spark);
}


/* ---------- Relatórios: filtros ---------- */

.filters-bar {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 18px;
}


.filter {
    position: relative;

    display: flex;
    align-items: center;
}


.filter .icon {
    position: absolute;

    left: 12px;

    width: 16px;
    height: 16px;

    color: var(--text-3);

    pointer-events: none;
}


.filter select {
    height: 42px;

    max-width: 100%;

    padding: 0 14px 0 36px;

    border: 1px solid var(--line-strong);
    border-radius: 12px;

    background: var(--surface);

    color: var(--text);

    font: inherit;
    font-size: 14px;

    cursor: pointer;
}


.filter[hidden] {
    display: none;
}


.filter-search {
    flex: 1;

    min-width: 220px;
}


/* ---------- Downloads ---------- */

.download-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 26px;

    padding: 24px;

    border-radius: var(--radius);

    background:
        linear-gradient(
            120deg,
            rgba(34, 197, 94, 0.12),
            var(--surface) 55%
        );

    border: 1px solid rgba(74, 222, 128, 0.22);
}


.download-app {
    display: flex;
    align-items: center;

    gap: 16px;

    min-width: 0;
}


.download-icon {
    display: grid;
    place-items: center;

    width: 64px;
    height: 64px;

    border-radius: 18px;

    background: var(--brand);

    color: white;

    font-size: 30px;

    flex-shrink: 0;
}


.download-app h3 {
    margin: 0 0 3px;

    font-size: 19px;
    font-weight: 800;
}


.download-app p {
    margin: 0;

    color: var(--text-2);

    font-size: 13.5px;
}


.download-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;
}


.download-meta span:not(:empty) {
    padding: 3px 9px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.06);

    color: var(--text-2);

    font-size: 12px;
    font-weight: 600;
}


.download-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}


.download-card .auth-message {
    flex-basis: 100%;

    margin: 0;
}


.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.steps li {
    display: flex;
    flex-direction: column;

    gap: 6px;

    padding: 18px;

    border-radius: var(--radius);

    background: var(--surface);

    border: 1px solid var(--line);
}


.step-number {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    margin-bottom: 4px;

    border-radius: 50%;

    background: var(--brand-soft);

    color: var(--spark);

    font-weight: 800;
}


.steps strong {
    font-size: 15px;
}


.steps span:last-child {
    color: var(--text-2);

    font-size: 13.5px;

    line-height: 1.5;
}


.release-notes {
    padding: 18px 20px;

    border-radius: var(--radius);

    background: var(--surface);

    border: 1px solid var(--line);

    color: var(--text-2);

    font-size: 14px;

    line-height: 1.6;
}


.release-notes p {
    margin: 0 0 8px;
}


.release-notes ul {
    margin: 0;
    padding-left: 20px;
}


/* ---------- Ajuda ---------- */

.faq-list {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-bottom: 20px;
}


.faq-item {
    border-radius: 14px;

    background: var(--surface);

    border: 1px solid var(--line);

    overflow: hidden;
}


.faq-item[open] {
    border-color: rgba(74, 222, 128, 0.28);
}


.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 16px 18px;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    list-style: none;
}


.faq-item summary::-webkit-details-marker {
    display: none;
}


.faq-item summary .chevron {
    color: var(--text-3);

    transition: transform 0.2s;
}


.faq-item[open] summary .chevron {
    transform: rotate(180deg);

    color: var(--spark);
}


.faq-item p {
    margin: 0;

    padding: 0 18px 18px;

    color: var(--text-2);

    font-size: 14px;

    line-height: 1.6;
}


.help-contact {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 14px 16px;

    border-radius: 14px;

    background: var(--brand-soft);

    color: var(--spark);

    font-size: 13.5px;
}


/* ---------- Responsivo ---------- */

@media (max-width: 1000px) {

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    .row-card,
    .saved-row {
        grid-template-columns: auto minmax(0, 1fr) auto;

        row-gap: 8px;
    }

    .session-row .row-when {
        grid-column: 2;
        grid-row: 2;

        flex-direction: row;
        align-items: center;

        gap: 10px;
    }

    .session-row .row-status {
        grid-column: 3;
        grid-row: 1;
    }

    .session-row .row-action {
        grid-column: 3;
        grid-row: 2;

        justify-self: end;
    }

    .saved-row .status-chip {
        display: none;
    }

    .steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .filter,
    .filter select {
        flex: 1 1 160px;

        width: 100%;
    }
}


@media (max-width: 600px) {

    .stats-grid {
        gap: 10px;
    }

    .stat-card {
        padding: 14px;

        column-gap: 10px;
    }

    .stat-icon {
        width: 36px;
        height: 36px;
    }

    .stat-value {
        font-size: 22px;
    }

    .section-head .btn span {
        display: none;
    }

    /* Títulos dos números em até duas linhas, sem cortar. */
    .stat-label {
        white-space: normal;

        line-height: 1.25;
    }

    .filter,
    .filter select,
    .filter-search {
        flex: 1 1 100%;

        min-width: 0;
    }

    .saved-row .row-buttons .btn span {
        display: none;
    }

    .download-actions,
    .download-actions .btn {
        width: 100%;
    }
}


/* ---------- Downloads: aviso do Windows (SmartScreen) ---------- */

.warn-card {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);

    align-items: center;

    gap: 24px;

    padding: 20px;

    border-radius: var(--radius);

    background: rgba(251, 191, 36, 0.06);

    border: 1px solid rgba(251, 191, 36, 0.3);
}


.warn-icon {
    color: #fbbf24 !important;
}


.warn-art {
    display: block;

    width: 100%;
    height: auto;
}


.warn-num {
    fill: #052e16;

    font: 800 12px var(--font);
}


.warn-pulse {
    animation: warnPulse 2.4s ease-in-out infinite;
}


.warn-pulse-late {
    animation-delay: 1.2s;
}


@keyframes warnPulse {
    0%, 100% { stroke-opacity: 1; }
    50% { stroke-opacity: 0.25; }
}


.warn-text p {
    margin: 0;

    color: var(--text-2);

    font-size: 14px;

    line-height: 1.6;
}


.warn-steps {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin: 14px 0;
    padding-left: 20px;
}


.warn-steps li {
    color: var(--text-2);

    font-size: 14px;

    line-height: 1.55;
}


.warn-steps li::marker {
    color: #fbbf24;

    font-weight: 800;
}


.warn-steps strong {
    display: block;

    color: var(--text);
}


.warn-text .warn-hint {
    padding: 10px 12px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.04);

    color: var(--text-3);

    font-size: 12.5px;
}


@media (max-width: 760px) {

    .warn-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .warn-art {
        max-width: 300px;

        margin: 0 auto;
    }
}


@media (prefers-reduced-motion: reduce) {

    .warn-pulse {
        animation: none;
    }
}


/* ---------- Relatórios: menu Exportar ---------- */

.export-menu {
    position: relative;

    flex-shrink: 0;
}


.export-menu .chevron {
    width: 15px;
    height: 15px;

    transition: transform 0.15s;
}


.export-menu [aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}


.export-menu .btn.busy {
    cursor: progress;
}


.export-menu .btn.busy > .icon:first-child {
    animation: spin 1s linear infinite;
}


.export-list {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    z-index: 60;

    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 280px;

    padding: 6px;

    border-radius: 14px;

    background: var(--ink-2);

    border: 1px solid var(--line-strong);

    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}


.export-list[hidden] {
    display: none;
}


.export-list button {
    display: flex;
    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 10px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: var(--text);

    font: inherit;

    text-align: left;

    cursor: pointer;
}


.export-list button:hover,
.export-list button:focus-visible {
    background: rgba(255, 255, 255, 0.06);

    outline: none;
}


.export-list strong {
    display: block;

    font-size: 14px;
}


.export-list small {
    display: block;

    color: var(--text-3);

    font-size: 12px;
}


.file-badge {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 10px;

    font-size: 10.5px;
    font-weight: 800;

    letter-spacing: 0.03em;

    flex-shrink: 0;
}


.file-badge.pdf {
    background: rgba(244, 63, 94, 0.14);

    color: #fb7185;
}


.file-badge.xlsx {
    background: var(--brand-soft);

    color: var(--spark);
}


.file-badge.csv {
    background: rgba(148, 163, 184, 0.14);

    color: #cbd5e1;
}


/* ---------- Ajuda no topo (ao lado do idioma) ---------- */

.help-link {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    height: 38px;

    padding: 0 13px;

    border: 1px solid var(--ink-line);
    border-radius: 999px;

    color: #c9d6ce;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition: background 0.15s, color 0.15s, border-color 0.15s;
}


.help-link .icon {
    width: 16px;
    height: 16px;
}


.help-link:hover {
    background: rgba(255, 255, 255, 0.05);

    color: white;
}


.help-link[aria-current="page"] {
    color: var(--spark);
}


/* Faixa do título: título à esquerda, desenho e botão à direita. */
@media (max-width: 900px) {

    .toolbar.toolbar-banner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .toolbar-banner .toolbar-title {
        flex: 1 1 220px;

        min-width: 0;
    }
}


@media (max-width: 640px) {

    .toolbar-banner > .btn,
    .toolbar-banner > .export-menu {
        margin-left: auto;
    }
}


@media (max-width: 480px) {

    .toolbar-banner > .btn,
    .toolbar-banner > .export-menu,
    .toolbar-banner > .export-menu > .btn {
        flex: 1 1 100%;

        width: 100%;
    }
}


/* Usuários: "Editar" à direita do card também no celular. */
@media (max-width: 760px) {

    .users-list .user-row {
        grid-template-columns: auto minmax(0, 1fr) auto;

        align-items: center;
    }

    .user-row .user-avatar {
        grid-row: 1 / span 2;

        align-self: start;
    }

    .user-row .user-tags {
        grid-column: 2;
        grid-row: 2;

        min-width: 0;
    }

    .user-row .user-tags > span {
        max-width: 100%;

        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-row .user-actions {
        grid-column: 3;
        grid-row: 1 / span 2;

        flex-direction: column;
        align-items: stretch;

        justify-self: end;
    }
}


@media (max-width: 1100px) {

    .help-link span {
        display: none;
    }

    .help-link {
        width: 38px;

        padding: 0;

        justify-content: center;
    }
}


.row-flag {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color: var(--spark);
}


.row-flag .icon {
    width: 12px;
    height: 12px;
}


/* ---------- Página pública /baixar ---------- */

.get-main {
    flex-direction: column;
    align-items: center;

    gap: 28px;

    width: 100%;
    max-width: 980px;

    margin: 0 auto;

    padding: 24px 24px 48px;
}


.get-hero {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 640px;

    text-align: center;
}


.get-hero .auth-hero-text {
    margin: 0 auto;
}


.get-button {
    height: 56px;

    margin-top: 26px;

    padding: 0 30px;

    font-size: 17px;
}


.get-meta {
    margin: 12px 0 0;

    color: var(--text-3);

    font-size: 13px;
}


.get-hero .auth-message {
    margin-top: 14px;
}


.get-steps {
    display: flex;
    flex-direction: column;

    gap: 18px;

    width: 100%;
}


.warn-title {
    display: block;

    margin-bottom: 6px;

    color: var(--text);

    font-size: 15px;
}


/* ---------- Perfil e configurações ---------- */

.settings-stack {
    display: flex;
    flex-direction: column;

    gap: 22px;
}


.settings-card {
    display: flex;
    flex-direction: column;

    gap: 18px;

    padding: 22px 24px;

    border-radius: var(--radius);

    background: var(--surface);

    border: 1px solid var(--line);

    box-shadow: var(--shadow);
}


.settings-head {
    display: flex;
    align-items: center;

    gap: 10px;
}


.settings-head .icon {
    width: 19px;
    height: 19px;

    color: var(--spark);
}


.settings-head h3 {
    margin: 0;

    font-size: 17px;
    font-weight: 800;
}


.settings-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.settings-field {
    display: flex;
    flex-direction: column;

    gap: 6px;

    min-width: 0;
}


.settings-label {
    color: var(--text-2);

    font-size: 13px;
    font-weight: 600;
}


.settings-readonly {
    display: flex;
    align-items: center;

    gap: 10px;

    height: 46px;

    padding: 0 14px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid var(--line);

    min-width: 0;
}


.settings-readonly .icon {
    width: 16px;
    height: 16px;

    color: var(--text-3);
}


.settings-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text-2);

    font-size: 14.5px;
}


.role-badge {
    padding: 3px 10px;

    border-radius: 999px;

    background: var(--brand-soft);

    color: var(--spark);

    font-size: 12.5px;
    font-weight: 800;
}


.settings-google {
    padding: 3px 9px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.06);

    color: var(--text-2);

    font-size: 12px;
    font-weight: 700;
}


.settings-google[hidden],
.settings-card .auth-field[hidden] {
    display: none;
}


.settings-hint {
    margin: -6px 0 0;

    color: var(--text-2);

    font-size: 13.5px;

    line-height: 1.5;
}


.settings-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;
}


.settings-foot-end {
    justify-content: flex-end;
}


.settings-meta {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--text-3);

    font-size: 12.5px;
}


.settings-meta .icon {
    width: 14px;
    height: 14px;
}


.settings-foot .btn-sm {
    min-width: 120px;

    justify-content: center;
}


/* Só a nova senha (conta só com Google): ocupa a linha inteira. */
.settings-row.single {
    grid-template-columns: minmax(0, 1fr);
}


@media (max-width: 640px) {

    .settings-card {
        padding: 18px;
    }

    .settings-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-foot .btn-sm {
        flex: 1 1 100%;
    }
}


/* ---------- Picker (menus de escolha com ícones) ---------- */

.picker {
    position: relative;

    display: flex;

    min-width: 0;
}


.picker[hidden] {
    display: none;
}


.picker select {
    display: none;
}


.picker-button {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    width: 100%;
    height: 42px;

    padding: 0 12px 0 13px;

    border: 1px solid var(--line-strong);
    border-radius: 12px;

    background: var(--surface);

    color: var(--text);

    font: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: border-color 0.15s, background 0.15s;
}


.picker-button:hover {
    border-color: rgba(74, 222, 128, 0.35);
}


.picker-button[aria-expanded="true"] {
    border-color: var(--brand);

    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}


.picker-lead {
    display: grid;
    place-items: center;

    color: var(--spark);
}


.picker-lead .icon {
    width: 16px;
    height: 16px;
}


.picker-value {
    flex: 1;

    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    text-align: left;
}


.picker-chevron {
    width: 15px;
    height: 15px;

    color: var(--text-3);

    transition: transform 0.15s;
}


.picker-button[aria-expanded="true"] .picker-chevron {
    transform: rotate(180deg);
}


.picker-list {
    position: absolute;

    top: calc(100% + 6px);
    left: 0;

    z-index: 70;

    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 240px;

    padding: 6px;

    border-radius: 14px;

    background: var(--ink-2);

    border: 1px solid var(--line-strong);

    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}


.picker-list[hidden] {
    display: none;
}


/* Calendário aberto: as opções somem e ficam só as datas. */
.picker-list.ranging .picker-option {
    display: none;
}


.picker-list.ranging {
    min-width: min(330px, calc(100vw - 16px));
}


.picker-option {
    display: flex;
    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 9px 10px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: var(--text);

    font: inherit;
    font-size: 14px;

    text-align: left;

    cursor: pointer;
}


.picker-option:hover,
.picker-option:focus-visible {
    background: rgba(255, 255, 255, 0.06);

    outline: none;
}


.picker-option[aria-selected="true"] {
    background: var(--brand-soft);
}


.picker-option-icon {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.05);

    color: var(--text-2);

    flex-shrink: 0;
}


.picker-option-icon .icon {
    width: 15px;
    height: 15px;
}


.picker-option[aria-selected="true"] .picker-option-icon {
    background: rgba(34, 197, 94, 0.18);

    color: var(--spark);
}


.picker-option-icon[data-tone="ok"] { color: var(--ok); }
.picker-option-icon[data-tone="live"] { color: #38bdf8; }
.picker-option-icon[data-tone="danger"] { color: #fb7185; }
.picker-option-icon[data-tone="warn"] { color: #fbbf24; }


.picker-option-text {
    flex: 1;

    min-width: 0;
}


.picker-option-text strong {
    display: block;

    font-weight: 600;
}


.picker-option-text small {
    display: block;

    color: var(--text-3);

    font-size: 12px;
}


.picker-check {
    width: 16px;
    height: 16px;

    color: var(--spark);

    opacity: 0;
}


.picker-option[aria-selected="true"] .picker-check {
    opacity: 1;
}


.picker-range {
    display: flex;
    flex-direction: column;

    gap: 12px;

    padding: 8px 6px 4px;
}


.picker-range[hidden] {
    display: none;
}


.picker-range-title {
    font-size: 14px;
    font-weight: 800;
}


.picker-range-quick {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.picker-range-quick button {
    padding: 6px 11px;

    border: 1px solid var(--line-strong);
    border-radius: 999px;

    background: transparent;

    color: var(--text-2);

    font: inherit;
    font-size: 12.5px;
    font-weight: 600;

    cursor: pointer;
}


.picker-range-quick button:hover {
    border-color: rgba(74, 222, 128, 0.4);

    color: var(--spark);
}


.picker-range-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
}


.picker-range-fields label {
    display: flex;
    flex-direction: column;

    gap: 5px;

    color: var(--text-2);

    font-size: 12.5px;
    font-weight: 600;
}


.picker-range-fields input {
    height: 40px;

    padding: 0 10px;

    border: 1px solid var(--line-strong);
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.35);

    color: var(--text);

    font: inherit;
    font-size: 14px;

    color-scheme: dark;
}


.picker-range-fields input:focus {
    border-color: var(--brand);

    outline: none;
}


.picker-range-error {
    margin: 0;

    color: #fb7185;

    font-size: 12.5px;
}


.picker-range-actions {
    display: flex;
    justify-content: flex-end;

    gap: 8px;
}


/* A barra de filtros sempre preenche a largura toda, sem vãos:
   - largo: filtros (larguras iguais) + busca maior, numa linha só;
   - médio: filtros dividem a 1ª linha e a busca ocupa a 2ª inteira;
   - celular: um por linha. */
.filters-bar .picker {
    flex: 1 1 0;

    min-width: 0;
}


.filters-bar .filter-search {
    flex: 1.6 1 0;

    min-width: 0;
}


@media (max-width: 1099px) {

    .filters-bar .filter-search {
        flex-basis: 100%;
    }
}


@media (max-width: 600px) {

    .filters-bar .picker {
        flex: 1 1 100%;
    }
}


/* ---------- Usuários: perfil e situação com ícones ---------- */

.editor-choices {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


.choice-field {
    margin: 0;
    padding: 0;

    border: 0;

    min-width: 0;
}


.choice-field legend {
    margin-bottom: 7px;
    padding: 0;

    color: var(--text-2);

    font-size: 13px;
    font-weight: 600;
}


.choice-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;
}


.choice-group.with-hints {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


.choice {
    position: relative;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    border: 1px solid var(--line-strong);
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.25);

    cursor: pointer;

    transition: border-color 0.15s, background 0.15s;
}


.with-hints .choice {
    align-items: flex-start;
}


.choice input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.choice:hover {
    border-color: rgba(74, 222, 128, 0.35);
}


.choice:has(input:checked) {
    border-color: var(--brand);

    background: var(--brand-soft);
}


.choice:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}


.choice-icon {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);

    color: var(--text-2);

    flex-shrink: 0;
}


.choice-icon .icon {
    width: 16px;
    height: 16px;
}


.choice:has(input:checked) .choice-icon {
    background: var(--brand);

    color: var(--on-brand);
}


.choice[data-tone="ok"] .choice-icon { color: var(--ok); }
.choice[data-tone="warn"] .choice-icon { color: #fbbf24; }
.choice[data-tone="danger"] .choice-icon { color: #fb7185; }


.choice[data-tone="warn"]:has(input:checked) {
    border-color: #fbbf24;

    background: rgba(251, 191, 36, 0.1);
}


.choice[data-tone="warn"]:has(input:checked) .choice-icon {
    background: #fbbf24;

    color: #1c1405;
}


.choice[data-tone="danger"]:has(input:checked) {
    border-color: #fb7185;

    background: rgba(244, 63, 94, 0.1);
}


.choice[data-tone="danger"]:has(input:checked) .choice-icon {
    background: #fb7185;

    color: #2a0610;
}


.choice-text {
    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.choice-text strong {
    font-size: 13.5px;
}


.choice-text small {
    color: var(--text-3);

    font-size: 12px;

    line-height: 1.35;
}


.choice-field:disabled .choice {
    cursor: not-allowed;

    opacity: 0.55;
}


@media (max-width: 480px) {

    .choice-group,
    .choice-group.with-hints {
        grid-template-columns: minmax(0, 1fr);
    }
}


.segmented.segmented-3 {
    grid-template-columns: repeat(3, 1fr);
}


/* ---------- Barra superior fixa ----------
   Logo, menu, idioma e perfil ficam no topo ao rolar. O hero entra por
   baixo (margem negativa) para o brilho verde continuar atrás da barra. */

:root {
    --site-header-h: 77px;
}


.site-header {
    position: sticky;
    top: 0;
    z-index: 40;

    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;

    border-bottom: 1px solid transparent;
}


.site-header.scrolled {
    background: rgba(6, 10, 8, 0.86);

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

    border-bottom-color: var(--ink-line);

    box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.9);
}


.site-header + .hero {
    margin-top: calc(-1 * var(--site-header-h));

    padding-top: var(--site-header-h);
}


@media (max-width: 600px) {

    :root {
        --site-header-h: 65px;
    }
}


/* ---------- Fundo estilo Matrix (matrix.js) ---------- */

.matrix-bg {
    position: fixed;
    inset: 0;

    z-index: -1;

    width: 100%;
    height: 100%;

    opacity: 0.17;

    pointer-events: none;
}


/* ---------- Telefone com país (phone.js) ---------- */

.phone-field {
    position: relative;

    display: flex;

    height: 46px;

    border: 1px solid var(--line-strong);
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.35);

    transition: border-color 0.15s;
}


.phone-field:focus-within {
    border-color: var(--brand);
}


.phone-field.invalid {
    border-color: #fb7185;
}


.phone-country {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 0 10px 0 12px;

    border: 0;
    border-right: 1px solid var(--line-strong);
    border-radius: 12px 0 0 12px;

    background: transparent;

    color: var(--text);

    font: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    flex-shrink: 0;
}


.phone-country:hover {
    background: rgba(255, 255, 255, 0.04);
}


.phone-flag {
    width: 22px;
    height: 15px;

    border-radius: 3px;

    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);

    flex-shrink: 0;
}


.phone-flag-box {
    display: inline-flex;
}


.phone-chevron {
    width: 14px;
    height: 14px;

    color: var(--text-3);
}


.phone-field .phone-number {
    flex: 1;

    min-width: 0;
    height: 100%;

    padding: 0 12px;

    border: 0;

    background: transparent;

    color: var(--text);

    font: inherit;
    font-size: 15px;

    outline: none;
}


.phone-list {
    position: absolute;

    top: calc(100% + 6px);
    left: 0;

    z-index: 80;

    display: flex;
    flex-direction: column;

    gap: 6px;

    min-width: 290px;
    max-height: 340px;

    padding: 8px;

    border-radius: 14px;

    background: var(--ink-2);

    border: 1px solid var(--line-strong);

    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}


.phone-list[hidden] {
    display: none;
}


.phone-search {
    position: relative;

    display: flex;
    align-items: center;
}


.phone-search .icon {
    position: absolute;

    left: 10px;

    width: 15px;
    height: 15px;

    color: var(--text-3);
}


.phone-search input {
    width: 100%;
    height: 38px;

    padding: 0 10px 0 32px;

    border: 1px solid var(--line-strong);
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.35);

    color: var(--text);

    font: inherit;
    font-size: 14px;
}


.phone-search input:focus {
    border-color: var(--brand);

    outline: none;
}


.phone-options {
    display: flex;
    flex-direction: column;

    gap: 2px;

    overflow-y: auto;
}


.phone-option {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 8px 9px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--text);

    font: inherit;
    font-size: 14px;

    text-align: left;

    cursor: pointer;
}


.phone-option:hover,
.phone-option:focus-visible {
    background: rgba(255, 255, 255, 0.06);

    outline: none;
}


.phone-option[aria-selected="true"] {
    background: var(--brand-soft);
}


.phone-option-name {
    flex: 1;

    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.phone-option-ddi {
    color: var(--text-3);

    font-family: var(--mono);
    font-size: 13px;
}


.phone-empty {
    margin: 6px 4px;

    color: var(--text-3);

    font-size: 13px;
}


/* ---------- Disjuntor (Papel e Situação no editor de usuário) ---------- */

.editor-choices {
    gap: 12px;
}


.switch-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);

    align-items: center;

    column-gap: 12px;
    row-gap: 6px;

    min-width: 0;
}


.switch-label {
    grid-column: 1;

    color: var(--text-2);

    font-size: 13px;
    font-weight: 600;
}


.slide-switch {
    position: relative;

    display: grid;
    grid-template-columns: repeat(var(--count), minmax(0, 1fr));

    grid-column: 2;

    height: 44px;

    padding: 4px;

    border-radius: 999px;

    background: rgba(0, 0, 0, 0.4);

    border: 1px solid var(--line-strong);

    --thumb: var(--brand);
    --thumb-text: var(--on-brand);
}


.slide-switch[data-tone="ok"] {
    --thumb: var(--brand);
    --thumb-text: var(--on-brand);
}


.slide-switch[data-tone="warn"] {
    --thumb: #fbbf24;
    --thumb-text: #1c1405;
}


.slide-switch[data-tone="danger"] {
    --thumb: #f43f5e;
    --thumb-text: #fff;
}


.slide-thumb {
    position: absolute;

    top: 4px;
    bottom: 4px;
    left: 4px;

    width: calc((100% - 8px) / var(--count));

    border-radius: 999px;

    background: var(--thumb);

    box-shadow: 0 6px 16px -6px var(--thumb);

    transform: translateX(calc(100% * var(--index)));

    transition: transform 0.22s cubic-bezier(0.3, 0.7, 0.2, 1), background 0.2s;
}


.slide-option {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 0;

    color: var(--text-2);

    font-size: 13.5px;
    font-weight: 700;

    cursor: pointer;

    transition: color 0.2s;
}


.slide-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.slide-option .icon {
    width: 15px;
    height: 15px;

    flex-shrink: 0;
}


.slide-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.slide-option:has(input:checked) {
    color: var(--thumb-text);
}


.slide-option:has(input:focus-visible) {
    outline: 2px solid var(--spark);
    outline-offset: 2px;

    border-radius: 999px;
}


.switch-hint {
    grid-column: 2;

    color: var(--text-3);

    font-size: 12px;

    line-height: 1.4;
}


.switch-row.is-disabled .slide-switch {
    opacity: 0.55;
}


.switch-row.is-disabled .slide-option {
    cursor: not-allowed;
}


@media (max-width: 420px) {

    .switch-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .switch-label,
    .slide-switch,
    .switch-hint {
        grid-column: 1;
    }
}


/* Botão grande só ao lado do campo do código (mesma altura dele). */
.code-form .btn-primary {
    height: 56px;
}


/* ---------- Administrador em dourado ---------- */

:root {
    --gold: #f2c14e;
    --gold-strong: #d99a1e;
    --gold-soft: rgba(242, 193, 78, 0.14);
    --gold-text: #2a1c03;
}


.slide-switch[data-tone="gold"] {
    --thumb: linear-gradient(135deg, #fde68a, var(--gold) 45%, var(--gold-strong));
    --thumb-text: var(--gold-text);
}


.slide-switch[data-tone="gold"] .slide-thumb {
    box-shadow: 0 6px 16px -6px var(--gold-strong);
}


.user-role-tag.admin,
.role-badge.admin {
    background: var(--gold-soft);

    color: var(--gold);
}


/* ---------- Alinhamento em colunas (listas) ----------
   Etiquetas e botões com largura fixa: de uma linha para outra tudo
   começa e termina no mesmo lugar. */

@media (min-width: 761px) {

    .users-list .user-row {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .users-list .user-tags {
        display: grid;
        /* Papel e depois situação (Administrador · Ativo). */
        grid-template-columns: 124px 192px;

        justify-items: stretch;
    }

    .users-list .user-actions {
        display: grid;
        grid-template-columns: 112px 124px;

        gap: 8px;
    }

    .users-list .user-actions .btn {
        width: 100%;
    }
}


.users-list .user-tags > span {
    text-align: center;
}


/* Celular: coluna de botões com a mesma largura em todas as linhas. */
@media (max-width: 760px) {

    .users-list .user-actions {
        width: 112px;
    }

    .users-list .user-actions .btn {
        width: 100%;
    }
}


/* Situação das sessões (Painel e Relatórios) com largura fixa; o botão
   "Resumo" fica embaixo, na mesma coluna e com a mesma largura. */
.session-row .status-chip {
    min-width: 104px;

    text-align: center;
}


.row-status {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 6px;

    min-width: 104px;
}


.row-status .summary-toggle {
    justify-content: center;
}


.saved-row .status-chip {
    min-width: 72px;

    text-align: center;
}


/* Etiquetas com ícone (Usuários e Perfil), no estilo do disjuntor. */
.user-status,
.user-role-tag,
.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;
}


/* Texto encurta com "..." e o ícone fica sempre inteiro. */
.user-tags > span {
    min-width: 0;
    max-width: 100%;
}


.user-tags .tag-text {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.user-status .icon,
.user-role-tag .icon,
.role-badge .icon {
    width: 13px;
    height: 13px;

    flex-shrink: 0;
}


.user-tags .user-status.disabled {
    background: rgba(244, 63, 94, 0.12);

    color: #fb7185;
}


/* Telas bem estreitas: botões numa linha própria, embaixo, lado a lado. */
@media (max-width: 440px) {

    .users-list .user-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .users-list .user-row .user-actions {
        grid-column: 1 / -1;
        grid-row: 3;

        display: grid;
        grid-template-columns: 1fr 1fr;

        width: 100%;
    }
}


/* Tablet: botões de Usuários só com ícone (nome no passar do mouse),
   para sobrar espaço para o nome e o e-mail. */
@media (min-width: 761px) and (max-width: 1099px) {

    .users-list .user-actions {
        grid-template-columns: 40px 40px;
    }

    .users-list .user-actions .btn {
        padding: 0;
    }

    .users-list .user-actions .btn span {
        display: none;
    }
}


.picker-option-icon[data-tone="gold"] {
    color: var(--gold);
}


.users-empty-icon {
    width: 28px;
    height: 28px;

    margin-bottom: 4px;

    color: var(--spark);
}


/* Só administradores (o papel vem no <body data-role>). */
body[data-role="technician"] .admin-only {
    display: none !important;
}


.saved-section {
    margin-bottom: 22px;
}


/* ---------- Páginas públicas: Entrar, logo, barra fixa, agradecimento ---------- */

/* Logo é link para o início, sem arrastar nem abrir a imagem. */
.logo {
    -webkit-user-drag: none;
    user-select: none;
}


.logo svg {
    pointer-events: none;
}


.auth-top {
    gap: 10px;
}


.auth-top .auth-enter {
    margin-left: auto;
}


/* /baixar rola: a barra fica fixa, com fundo ao rolar (largura toda). */
.get-page .auth-top {
    position: sticky;
    top: 0;
    z-index: 40;

    padding-bottom: 12px;
}


/* Fundo numa camada própria: recortar a barra cortaria o menu de idioma. */
.get-page .auth-top::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;

    background: rgba(6, 10, 8, 0.94);
    box-shadow: 0 0 0 100vmax rgba(6, 10, 8, 0.94);
    clip-path: inset(0 -100vmax);
}


.get-page .auth-top.scrolled::before {
    opacity: 1;
}


.get-after,
.downloaded .get-before {
    display: none;
}


.downloaded .get-after {
    display: block;
}


.downloaded p.get-after {
    display: block;
}


/* ---------- Login e redefinir: cabe na tela, sem rolar ---------- */

html.no-scroll,
html.no-scroll body {
    height: 100%;

    overflow: hidden;

    overscroll-behavior: none;
}


/* Celular/tablet (empilhado): só o título acima do cartão. */
@media (max-width: 980px) {

    .auth-split .hero-art,
    .auth-split .auth-hero-text {
        display: none;
    }

    .auth-split .auth-hero-title {
        margin-bottom: 0;
    }
}


@media (max-width: 980px) and (max-height: 720px) {

    .auth-split .auth-hero {
        display: none;
    }
}


/* Computador com pouca altura (ou zoom): menos enfeite. */
@media (min-width: 981px) and (max-height: 780px) {

    .auth-split .auth-features {
        display: none;
    }
}


@media (min-width: 981px) and (max-height: 620px) {

    .auth-split .hero-art {
        display: none;
    }
}


/* Pouca altura (zoom alto): cartão mais compacto para caber sem rolar. */
@media (max-height: 560px) {

    .auth-card {
        padding: 18px 20px;
    }

    .auth-card h1 {
        margin-bottom: 10px;

        font-size: 18px;
    }

    .auth-tabs {
        margin-bottom: 10px;
    }

    .auth-form {
        gap: 8px;
    }

    .auth-field input,
    .auth-submit {
        height: 40px;
    }

    .auth-divider {
        margin: 8px 0;
    }

    .auth-top {
        padding-top: 8px;
    }
}


@media (max-height: 700px) {

    .auth-card .auth-art {
        display: none;
    }

    .auth-main {
        padding-top: 8px;
        padding-bottom: 16px;
    }
}


/* ---------- Conta (topo) ---------- */

.account-menu {
    position: relative;
}


.account-menu:empty {
    display: none;
}


.account-button {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    height: 38px;

    padding: 0 12px 0 4px;

    border: 1px solid var(--ink-line);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.05);

    color: var(--text);

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}


.account-avatar {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--brand);

    color: var(--on-brand);

    font-size: 11px;
    font-weight: 800;
}


.account-name {
    max-width: 140px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.account-list {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    z-index: 60;

    display: flex;
    flex-direction: column;

    min-width: 230px;

    padding: 6px;

    border-radius: 14px;

    background: var(--ink-2);

    border: 1px solid var(--line-strong);

    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}


.account-list[hidden] {
    display: none;
}


.account-head {
    display: flex;
    flex-direction: column;

    gap: 2px;

    padding: 8px 10px 10px;

    border-bottom: 1px solid var(--line);

    margin-bottom: 4px;
}


.account-head span {
    color: var(--text-3);

    font-size: 12px;
}


.account-list a,
.account-list button {
    display: block;

    width: 100%;

    padding: 9px 10px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--text);

    font-size: 14px;
    font-weight: 600;

    text-align: left;
    text-decoration: none;

    cursor: pointer;
}


.account-list a:hover,
.account-list button:hover {
    background: rgba(255, 255, 255, 0.06);
}


.account-logout {
    color: #fda4af !important;
}


/* ---------- Administração ---------- */

.hero-compact {
    padding-bottom: 72px;
}


.users-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.user-row {
    display: grid;

    grid-template-columns: auto 1fr auto auto auto;

    align-items: center;

    gap: 14px;

    padding: 14px 16px;

    border-radius: var(--radius);

    background: var(--surface);

    border: 1px solid var(--line);
}


.user-row.status-pending {
    border-color: rgba(251, 191, 36, 0.4);
}


.user-avatar {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background: var(--surface-2);

    color: var(--spark);

    font-size: 13px;
    font-weight: 800;
}


.user-info {
    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.user-info span,
.user-info small {
    color: var(--text-3);

    font-size: 12px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.user-you {
    padding: 1px 6px;

    border-radius: 6px;

    background: var(--brand-soft);

    color: var(--spark) !important;

    font-size: 11px;
}


.user-status {
    padding: 4px 10px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


.user-status.active {
    background: var(--ok-soft);

    color: var(--ok);
}


.user-status.pending {
    background: rgba(251, 191, 36, 0.12);

    color: #fbbf24;
}


.user-status.disabled {
    background: rgba(148, 163, 184, 0.12);

    color: #94a3b8;
}


.user-role {
    height: 36px;

    padding: 0 10px;

    border: 1px solid var(--line-strong);
    border-radius: 10px;

    background: var(--surface-2);

    color: var(--text);

    font: inherit;
    font-size: 13px;
}


.user-actions {
    display: flex;

    gap: 6px;
}


@media (max-width: 760px) {

    .user-row {
        grid-template-columns: auto 1fr;
    }

    .user-status,
    .user-role,
    .user-actions {
        grid-column: 2;
        justify-self: start;
    }

    .account-name {
        display: none;
    }

    .account-button {
        padding-right: 4px;
    }
}


/* ---------- Latência ---------- */

.latency-chip {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    height: 30px;

    padding: 0 10px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid var(--ink-line);

    color: var(--text-2);

    font-family: var(--mono);
    font-size: 12px;

    white-space: nowrap;
}


.latency-chip[hidden] {
    display: none;
}


.latency-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #64748b;
}


.latency-chip[data-level="good"] .latency-dot { background: var(--brand); }
.latency-chip[data-level="ok"] .latency-dot { background: var(--warn); }
.latency-chip[data-level="bad"] .latency-dot { background: var(--danger); }
.latency-chip[data-level="good"] { color: var(--spark); }


/* ---------- Menu de controles ---------- */

.controls-menu {
    position: relative;
}


#controlsBtn.has-off {
    border-color: rgba(251, 191, 36, 0.5);

    color: #fbbf24;
}


.controls-list {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    z-index: 60;

    display: flex;
    flex-direction: column;

    gap: 2px;

    width: 280px;
    max-height: calc(100dvh - 90px);

    padding: 8px;

    overflow-y: auto;

    border-radius: 16px;

    background: var(--ink-2);

    border: 1px solid var(--line-strong);

    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.75);

    animation: menuIn 0.14s ease;
}


.controls-list[hidden] {
    display: none;
}


.controls-title {
    padding: 8px 10px 6px;

    color: var(--text-3);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.control-switch {
    display: flex;
    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 10px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: var(--text);

    font-size: 14px;
    font-weight: 600;

    text-align: left;

    cursor: pointer;
}


.control-switch:hover {
    background: rgba(255, 255, 255, 0.05);
}


.control-switch .icon {
    color: var(--spark);
}


.control-switch[aria-checked="false"] .icon {
    color: var(--text-3);
}


.control-switch > span:not(.switch) {
    flex: 1;
}


.switch {
    position: relative;

    width: 38px;
    height: 22px;

    border-radius: 999px;

    background: var(--line-strong);

    transition: background 0.15s;

    flex-shrink: 0;
}


.switch::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: white;

    transition: transform 0.15s;
}


.control-switch[aria-checked="true"] .switch {
    background: var(--brand);
}


.control-switch[aria-checked="true"] .switch::after {
    transform: translateX(16px);
}


.segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 4px;

    margin: 0 6px;

    padding: 4px;

    border-radius: 12px;

    background: rgba(0, 0, 0, 0.3);
}


.segmented button {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4px;

    padding: 8px 4px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--text-2);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.segmented button[aria-pressed="true"] {
    background: var(--brand);

    color: var(--on-brand);
}


.controls-hint {
    margin: 8px 10px 4px;

    color: var(--text-3);

    font-size: 12px;

    line-height: 1.45;
}


.controls-divider {
    height: 1px;

    margin: 6px 4px;

    background: var(--line);
}


.controls-list .tool-button {
    background: transparent;
}


.controls-list .tool-button:hover {
    background: rgba(255, 255, 255, 0.05);
}


/* Itens só para celular. */
body:not(.is-touch) .touch-only {
    display: none !important;
}


/* ---------- Topo compacto: só ícones ---------- */

@media (max-width: 1100px) {

    /* Status vira só a bolinha; idioma só o globo; perfil só o avatar. */
    /* O idioma continua mostrando a sigla (PT, ES, EN). */
    .server-status #serverStatusText,
    .lang-button .chevron,
    .account-name {
        display: none;
    }

    .server-status {
        padding: 9px;
    }

    .lang-button {
        padding: 0 10px;

        gap: 5px;
    }

    .account-button {
        padding: 0 3px;
    }
}


/* ---------- Barra da sessão no celular ----------
   Em cima: computador, código, status e tempo.
   Embaixo: sub-barra com todas as funções, alinhadas. */

@media (max-width: 760px) {

    .session-bar {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;

        gap: 0;

        padding: 10px 12px 0;
    }

    .session-bar {
        position: relative;
    }

    /* Linha de cima: logo, computador e, à direita, idioma e perfil. */
    .session-bar-left {
        flex: none;

        gap: 10px;

        padding-right: 118px;
    }

    .session-bar .session-logo {
        font-size: 26px;
    }

    .session-bar .session-logo .logo-word,
    .session-bar .session-divider {
        display: none;
    }

    .session-bar-right > .lang-menu,
    .session-bar-right > .account-menu {
        position: absolute;

        top: 15px;
    }

    .session-bar-right > .lang-menu {
        right: 52px;
    }

    .session-bar-right > .account-menu {
        right: 12px;
    }

    .session-device-name {
        font-size: 16px;
    }

    .session-bar-right {
        flex: none;

        width: 100%;

        margin: 10px 0 0;

        padding: 8px 0;

        border-top: 1px solid var(--line);

        flex-wrap: nowrap;
        justify-content: space-between;

        gap: 4px;
    }

    .session-bar-right .btn-sm,
    .session-bar-right .lang-button,
    .session-bar-right .account-button {
        position: relative;

        width: 32px;
        height: 34px;

        padding: 0;

        justify-content: center;

        border-radius: 10px;

        flex-shrink: 0;
    }

    /* Globo + sigla: um pouco mais largo que os outros. */
    .session-bar-right .lang-button {
        width: auto;

        padding: 0 7px;

        gap: 4px;

        font-size: 11px;
    }

    .session-bar-right .latency-chip .unit {
        display: none;
    }

    .session-bar-right .account-avatar {
        width: 26px;
        height: 26px;

        font-size: 10px;
    }

    .session-bar-right .icon {
        width: 16px;
        height: 16px;
    }

    .session-bar-right .latency-chip {
        height: 34px;

        padding: 0 7px;

        gap: 4px;

        border-radius: 10px;

        font-size: 11px;
    }

    .session-bar-right .monitor-switch {
        height: 34px;
    }

    /* Contador do chat sobre o ícone. */
    .session-bar-right #chatBadge {
        position: absolute;

        top: -5px;
        right: -5px;

        min-width: 16px;

        padding: 0 4px;

        font-size: 10px;
    }

    /* Na sub-barra já há Chat, Arquivos e Tela cheia. */
    #drawerChatBtn,
    #drawerFilesBtn,
    #drawerFullscreenBtn {
        display: none !important;
    }

}


/* Mensagem nova enquanto o chat está fechado (aviso no Controles). */
#controlsBtn {
    position: relative;
}


#controlsBtn.has-unread::after {
    content: "";

    position: absolute;

    top: 5px;
    right: 5px;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--danger);

    box-shadow: 0 0 0 2px var(--ink-2);
}


/* ---------- Usuários: lista, editor e perfil ---------- */

img.user-avatar,
.account-avatar img,
.editor-avatar img {
    object-fit: cover;
}


img.user-avatar {
    width: 40px;
    height: 40px;

    border-radius: 50%;
}


.account-avatar {
    overflow: hidden;
}


.account-avatar img {
    width: 100%;
    height: 100%;
}


.user-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 6px;
}


.user-role-tag {
    padding: 4px 10px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.05);

    color: var(--text-2);

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


.user-row {
    grid-template-columns: auto 1fr auto auto;
}


.user-editor {
    width: min(480px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);

    padding: 0;

    border: 1px solid var(--line-strong);
    border-radius: 20px;

    background: var(--ink-2);

    color: var(--text);

    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);

    overflow-y: auto;
}


.user-editor::backdrop {
    background: rgba(2, 5, 3, 0.7);

    backdrop-filter: blur(4px);
}


.editor-form {
    display: flex;
    flex-direction: column;

    gap: 14px;

    padding: 22px;
}


.editor-head,
.profile-head {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 4px;
}


.editor-head h2,
.profile-head h3 {
    margin: 0;

    font-size: 18px;
    font-weight: 800;
}


.editor-head span,
.profile-head span {
    color: var(--text-3);

    font-size: 13px;
}


.editor-avatar {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background: var(--brand);

    color: var(--on-brand);

    font-size: 17px;
    font-weight: 800;

    overflow: hidden;

    flex-shrink: 0;
}


img.editor-avatar,
.editor-avatar img {
    width: 52px;
    height: 52px;

    border-radius: 50%;
}


.editor-row {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;
}


.auth-field select {
    width: 100%;
    height: 46px;

    padding: 0 12px;

    border: 1px solid var(--line-strong);
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.35);

    color: var(--text);

    font: inherit;
    font-size: 15px;
}


.auth-field select:disabled {
    opacity: 0.55;
}


.editor-reset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 8px;

    padding: 14px;

    border-radius: 14px;

    background: var(--surface);

    border: 1px solid var(--line);
}


.editor-reset p {
    margin: 0;

    color: var(--text-2);

    font-size: 13px;

    line-height: 1.45;
}


.editor-reset-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.editor-link {
    display: flex;

    gap: 8px;

    width: 100%;
}


.editor-link[hidden] {
    display: none;
}


.editor-link input {
    flex: 1;

    min-width: 0;

    height: 38px;

    padding: 0 10px;

    border: 1px solid var(--line-strong);
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.35);

    color: var(--text-2);

    font-family: var(--mono);
    font-size: 12px;
}


.editor-actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;
}


.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 18px;

    align-items: start;
}


.profile-card {
    display: flex;
    flex-direction: column;

    gap: 14px;

    padding: 22px;

    border-radius: var(--radius);

    background: var(--surface);

    border: 1px solid var(--line);

    box-shadow: var(--shadow);
}


.profile-card h3 {
    margin: 0;

    font-size: 17px;
}


.profile-card .auth-field[hidden] {
    display: none;
}


.auth-link {
    align-self: flex-end;

    margin: -6px 0 0;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--spark);

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}


.auth-link:hover {
    text-decoration: underline;
}


.auth-link[hidden],
.auth-tabs[hidden],
.auth-done[hidden],
.forgot-hidden {
    display: none !important;
}


.auth-done {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


@media (max-width: 760px) {

    .user-row {
        grid-template-columns: auto 1fr;
    }

    .user-tags,
    .user-actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .editor-row {
        grid-template-columns: 1fr;
    }
}


/* ---------- Ferramentas no celular ---------- */

.tools-handle {
    position: absolute;

    top: 50%;
    right: 0;

    z-index: 4;

    display: grid;
    place-items: center;

    width: 22px;
    height: 72px;

    transform: translateY(-50%);

    border: 1px solid var(--line-strong);
    border-right: 0;
    border-radius: 12px 0 0 12px;

    background: rgba(11, 18, 14, 0.85);

    color: var(--spark);

    backdrop-filter: blur(8px);

    cursor: pointer;

    transition: right 0.2s ease;
}


.tools-handle[hidden] {
    display: none;
}


.tools-handle .icon {
    width: 16px;
    height: 16px;

    transition: transform 0.2s ease;
}


.tools-open .tools-handle {
    right: 220px;
}


.tools-open .tools-handle .icon {
    transform: rotate(180deg);
}


.tools-drawer {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 4;

    display: flex;
    flex-direction: column;

    gap: 6px;

    width: 220px;

    padding: 18px 12px;

    background: rgba(11, 18, 14, 0.94);

    border-left: 1px solid var(--line-strong);

    backdrop-filter: blur(12px);

    animation: drawerIn 0.2s ease;
}


.tools-drawer[hidden] {
    display: none;
}


.tools-title {
    padding: 0 8px 8px;

    color: var(--text-3);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.tool-button {
    display: flex;
    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 12px;

    border: 1px solid transparent;
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.04);

    color: var(--text);

    font-size: 15px;
    font-weight: 600;

    text-align: left;

    cursor: pointer;
}


.tool-button[hidden] {
    display: none;
}


.tool-button .icon {
    color: var(--spark);
}


.tool-button:active {
    background: var(--brand-soft);

    border-color: rgba(34, 197, 94, 0.35);
}


/* Fica fora da vista, mas focável para abrir o teclado. */
.mobile-keyboard-input {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 1px;
    height: 1px;

    padding: 0;

    border: 0;

    opacity: 0;

    font-size: 16px;

    resize: none;

    pointer-events: none;
}


@keyframes drawerIn {
    from { transform: translateX(100%); }
}


@media (max-width: 760px) {

    .session-bar .btn-ghost span:not(.badge),
    #endSessionText {
        display: none;
    }

    .session-device-meta {
        flex-wrap: wrap;

        row-gap: 4px;
    }
}


/* ========================================================
   LOADING
   ======================================================== */

.remote-loading {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 16px;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(34, 197, 94, 0.18),
            transparent 55%
        ),
        #030604;

    z-index: 2;

    opacity: 1;

    transition:
        opacity 0.25s ease;
}


.remote-loading-logo {

    font-size: 34px;

    animation:
        remoteLogoPulse
        2s ease-in-out infinite;
}


.remote-loading span {

    color: #9fb0a6;

    font-size: 14px;

    text-align: center;
}


.remote-spinner {

    width: 28px;

    height: 28px;

    border: 3px solid
        rgba(255, 255, 255, 0.12);

    border-top-color: var(--spark);

    border-radius: 50%;

    animation:
        spin
        0.8s linear infinite;
}


/* ========================================================
   ANIMAÇÕES
   ======================================================== */

@keyframes spin {
    to { transform: rotate(360deg); }
}


@keyframes ping {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}


@keyframes twinkle {
    0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
    50% { transform: scale(0.75) rotate(45deg); opacity: 0.7; }
}


@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}


@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}


@keyframes shimmer {
    to { background-position: -200% 0; }
}


@keyframes shake {
    25% { transform: translateX(-6px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}


@keyframes toastIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}


@keyframes toastOut {
    to { opacity: 0; transform: translateX(16px); }
}


@keyframes menuIn {
    from { opacity: 0; transform: translateY(-4px); }
}


@keyframes fadeIn {
    from { opacity: 0; }
}


@keyframes remoteLogoPulse {

    0%,
    100% {
        opacity: 0.65;
        transform: scale(0.98);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ========================================================
   RESPONSIVO
   ======================================================== */

@media (max-width: 900px) {

    .hero-body {
        grid-template-columns: minmax(0, 1fr);

        gap: 28px;

        padding-top: 36px;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search {
        flex: 1;
        width: auto;
    }
}


@media (max-width: 760px) {

    .brand-subtitle {
        display: none;
    }
}


@media (max-width: 600px) {

    .topbar,
    .hero-body,
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .topbar {
        height: 64px;
    }

    .topbar .logo {
        font-size: 20px;
    }

    .lang-button .chevron {
        display: none;
    }

    .brand-subtitle,
    .server-status span:last-child {
        display: none;
    }

    .server-status {
        padding: 9px;
    }

    .hero {
        padding-bottom: 72px;
    }

    .code-card {
        padding: 20px;
    }

    .code-form {
        flex-direction: column;
    }

    .code-input {
        font-size: 22px;
    }

    .code-form .btn-primary {
        height: 52px;
    }

    .toolbar-actions .btn-ghost span {
        display: none;
    }

    .devices {
        grid-template-columns: minmax(0, 1fr);
    }

    .toasts {
        right: 16px;
        bottom: 16px;
    }
}


/* ---------- Mark (assistente com IA) ---------- */

/* Botão flutuante (Painel e Dispositivos). */
.mark-fab {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 45;

    width: 56px;
    height: 56px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: none;

    cursor: pointer;

    box-shadow: 0 14px 30px -10px rgba(34, 197, 94, 0.6), 0 0 0 1px rgba(134, 239, 172, 0.25);

    transition: transform 0.15s ease, box-shadow 0.15s ease;
}


.mark-fab:hover {
    transform: translateY(-2px) scale(1.04);
}


.mark-fab.active {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.45), 0 14px 30px -10px rgba(34, 197, 94, 0.6);
}


.mark-fab svg,
.mark-avatar svg,
.mark-btn-avatar svg,
.mark-intro-avatar svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* Avisos sobem para não ficar atrás do botão. */
body:has(.mark-fab) .toasts {
    bottom: 96px;
}


/* Janela fora da sessão: presa ao canto, acima do botão. */
.mark-floating {
    position: fixed;

    top: auto;
    right: 24px;
    bottom: 92px;

    z-index: 46;

    width: min(380px, calc(100vw - 32px));
    height: min(580px, calc(100dvh - 150px));
}


.mark-avatar {
    padding: 0;

    background: none;
}


.mark-btn-avatar {
    display: inline-flex;

    width: 18px;
    height: 18px;

    flex-shrink: 0;
}


.mark-trigger.active {
    border-color: var(--brand);

    color: var(--spark);
}


.mark-panel .chat-content {
    white-space: normal;
}


.mark-bubble {
    max-width: 90%;
}


.mark-content p {
    margin: 0 0 6px;
}


.mark-content .mark-heading {
    margin-top: 8px;

    font-weight: 700;
}


.mark-content > :first-child {
    margin-top: 0;
}


.mark-content > :last-child {
    margin-bottom: 0;
}


.mark-content ul,
.mark-content ol {
    margin: 2px 0 6px;

    padding-left: 20px;
}


.mark-content li {
    margin: 3px 0;
}


.mark-content code {
    padding: 1px 5px;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.07);

    font-family: var(--mono);
    font-size: 12.5px;
}


.mark-intro {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    margin: auto 4px;

    text-align: center;
}


.mark-intro-avatar {
    width: 64px;
    height: 64px;
}


.mark-intro p {
    margin: 0;

    color: var(--text-2);

    font-size: 13.5px;
    line-height: 1.5;
}


.mark-chips {
    display: flex;
    flex-direction: column;

    gap: 8px;

    width: 100%;
}


.mark-chip {
    width: 100%;
    min-height: 40px;

    padding: 8px 12px;

    border: 1px solid var(--line-strong);
    border-radius: 12px;

    background: var(--surface);

    color: var(--text);

    font: inherit;
    font-size: 13px;

    text-align: left;

    cursor: pointer;

    transition: border-color 0.15s ease, background 0.15s ease;
}


.mark-chip:hover {
    border-color: var(--brand);

    background: var(--surface-2);
}


.mark-screen-tag {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #86efac;

    font-size: 12px;
}


.mark-screen-tag .icon {
    width: 14px;
    height: 14px;
}


.mark-typing {
    display: inline-flex;

    gap: 4px;

    padding: 6px 2px 4px;
}


.mark-typing i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--spark);

    animation: markDot 1s ease-in-out infinite;
}


.mark-typing i:nth-child(2) {
    animation-delay: 0.15s;
}


.mark-typing i:nth-child(3) {
    animation-delay: 0.3s;
}


@keyframes markDot {
    0%, 80%, 100% {
        opacity: 0.25;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}


.mark-error {
    color: #fca5a5;
}


@media (max-width: 600px) {

    .mark-fab {
        right: 16px;
        bottom: 16px;

        width: 52px;
        height: 52px;
    }

    body:has(.mark-fab) .toasts {
        bottom: 84px;
    }

    .mark-floating {
        right: 16px;
        left: 16px;
        bottom: 80px;

        width: auto;
        height: calc(100dvh - 150px);
    }
}



/* ---------- Mark: resumo do atendimento ---------- */

.mark-summary {
    display: flex;
    flex-direction: column;

    gap: 10px;

    width: 100%;

    margin: 4px 0 18px;

    padding: 14px 16px;

    border: 1px solid var(--line-strong);
    border-radius: 14px;

    background: var(--surface-2);

    text-align: left;
}


.mark-summary[hidden] {
    display: none;
}


.mark-summary-head {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 14px;
}


.mark-summary-avatar {
    display: inline-flex;

    width: 24px;
    height: 24px;

    flex-shrink: 0;
}


.mark-summary-avatar svg {
    display: block;

    width: 100%;
    height: 100%;
}


.mark-summary-body {
    color: var(--text);

    font-size: 13px;
    line-height: 1.5;
}


.mark-summary-body[hidden] {
    display: none;
}


.mark-summary-body p {
    margin: 0 0 6px;
}


.mark-summary-body ul,
.mark-summary-body ol {
    margin: 0;

    padding-left: 18px;
}


.mark-summary-body li {
    margin: 3px 0;
}


.mark-summary-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;
}


.mark-summary-status {
    color: var(--text-3);

    font-size: 12px;
}


.mark-summary-status.error {
    color: #fca5a5;
}


.mark-summary-btn {
    margin-left: auto;
}


/* Relatórios / Painel: "Resumo" abre o texto do Mark embaixo da sessão. */
/* Botão "Resumo": destacado (chip verde) e mostra se está aberto. */
.summary-toggle {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    height: 22px;

    padding: 0 8px 0 7px;

    border: 1px solid rgba(74, 222, 128, 0.35);
    border-radius: 999px;

    background: rgba(34, 197, 94, 0.12);

    color: var(--spark);

    font: inherit;
    font-size: 11.5px;
    font-weight: 700;

    cursor: pointer;

    transition: background 0.15s ease, border-color 0.15s ease;
}


.summary-toggle:hover {
    border-color: var(--brand);

    background: rgba(34, 197, 94, 0.2);
}


.summary-toggle .icon {
    width: 12px;
    height: 12px;
}


.summary-toggle .summary-chevron {
    transition: transform 0.15s ease;
}


.summary-toggle[aria-expanded="true"] .summary-chevron {
    transform: rotate(180deg);
}


.session-summary {
    grid-column: 1 / -1;

    padding: 10px 12px;

    border-radius: 10px;

    background: var(--surface-2);

    color: var(--text-2);

    font-size: 13px;
    line-height: 1.5;
}


.session-summary[hidden] {
    display: none;
}


.session-summary p {
    margin: 0 0 4px;
}


.session-summary ul {
    margin: 0;

    padding-left: 18px;
}



/* ---------- Relatórios: abas Sessões / Conversas com o Mark ---------- */
/* Mesmo "disjuntor" do editor de Usuários (.slide-switch). */

.report-tabs.slide-switch {
    width: min(460px, 100%);

    margin-bottom: 14px;
}


.report-tab.slide-option {
    padding: 0 12px;

    border: 0;

    background: none;

    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
}


.report-tab.slide-option[aria-selected="true"] {
    color: var(--thumb-text);
}


.report-tab.slide-option:not([aria-selected="true"]):hover {
    color: var(--text);
}


.report-tab.slide-option:focus-visible {
    outline: 2px solid var(--spark);
    outline-offset: 2px;

    border-radius: 999px;
}


.mark-row {
    grid-template-columns: auto minmax(0, 1fr) auto;

    cursor: pointer;
}


.mark-row .chevron {
    transition: transform 0.15s ease;
}


.mark-row.open .chevron {
    transform: rotate(180deg);
}


.mark-transcript {
    grid-column: 1 / -1;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 12px;

    border-radius: 12px;

    background: var(--surface-2);

    cursor: auto;
}


.mark-transcript[hidden] {
    display: none;
}


.mark-msg {
    align-self: flex-start;

    max-width: 88%;

    padding: 7px 10px;

    border: 1px solid var(--line);
    border-radius: 12px 12px 12px 4px;

    background: var(--surface);
}


.mark-msg.mine {
    align-self: flex-end;

    border-color: #1d5a37;
    border-radius: 12px 12px 4px 12px;

    background: #123a24;
}


.mark-msg-name {
    display: block;

    margin-bottom: 2px;

    color: var(--spark);

    font-size: 11px;
    font-weight: 700;
}


.mark-msg.mine .mark-msg-name {
    color: #86efac;
}


.mark-msg-text {
    font-size: 13px;
    line-height: 1.5;

    overflow-wrap: anywhere;
}


.mark-msg-text p {
    margin: 0 0 4px;
}


.mark-msg-text > :last-child {
    margin-bottom: 0;
}


.mark-msg-text ul {
    margin: 2px 0;

    padding-left: 18px;
}


@media (max-width: 600px) {

    .report-tabs.slide-switch {
        width: 100%;
    }
}


/* ---------- Mark: balão "Dúvidas? Fale com o Mark" ---------- */

.mark-hint {
    position: fixed;

    right: 92px;
    bottom: 34px;

    z-index: 45;

    max-width: min(260px, calc(100vw - 120px));

    padding: 10px 14px;

    border: 1px solid rgba(134, 239, 172, 0.35);
    border-radius: 14px 14px 4px 14px;

    background: #123a24;

    color: var(--text);

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    text-align: left;

    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7);

    cursor: pointer;

    opacity: 0;
    transform: translateX(10px) scale(0.96);

    transition: opacity 0.35s ease, transform 0.35s ease;
}


.mark-hint.show {
    opacity: 1;
    transform: none;

    animation: markHintNudge 2.4s ease-in-out 0.5s 2;
}


@keyframes markHintNudge {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: translateY(-3px);
    }
}


.mark-open .mark-hint {
    display: none;
}


@media (max-width: 600px) {

    .mark-hint {
        right: 78px;
        bottom: 24px;
    }
}


/* Aba "Conversas com o Mark": o que é das sessões some de verdade. */
#reportStats[hidden],
#filterStatusWrap[hidden],
.export-menu[hidden],
#sessionsSection[hidden],
#markSection[hidden] {
    display: none !important;
}


.report-tab .tab-short {
    display: none;
}


@media (max-width: 600px) {

    .report-tab .tab-long {
        display: none;
    }

    .report-tab .tab-short {
        display: inline;
    }
}



/* Aviso do Mark (limite, sem conexão): no balão dele, discreto. */
.mark-soft .chat-content {
    color: var(--text-2);

    font-style: italic;
}



/* ========================================================
   SESSÃO: barra de baixo com ícones sem borda, separados por "|"
   ======================================================== */

.session-dock {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 56px;

    padding: 6px 14px;

    background: var(--ink-2);

    border-top: 1px solid var(--ink-line);

    flex-shrink: 0;

    overflow-x: auto;
    scrollbar-width: none;
}


.session-dock::-webkit-scrollbar {
    display: none;
}


.session-dock > * {
    position: relative;

    display: flex;
    align-items: center;

    flex-shrink: 0;
}


.session-dock > [hidden] {
    display: none !important;
}


/* Separador fininho entre os itens que estão aparecendo. */
.session-dock > :not([hidden]) ~ :not([hidden]) {
    margin-left: 13px;
}


.session-dock > :not([hidden]) ~ :not([hidden])::before {
    content: "";

    position: absolute;

    top: 50%;
    left: -7px;

    width: 1px;
    height: 18px;

    background: var(--line-strong);

    transform: translateY(-50%);
}


.dock-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 40px;

    padding: 0;

    border: 0;
    border-radius: 10px;

    background: none;

    color: var(--text-2);

    text-decoration: none;

    cursor: pointer;

    transition: background 0.15s ease, color 0.15s ease;
}


.dock-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);

    color: var(--text);
}


.dock-btn:disabled {
    opacity: 0.4;

    cursor: not-allowed;
}


.dock-btn[aria-expanded="true"],
.dock-btn.active {
    background: rgba(34, 197, 94, 0.12);

    color: var(--spark);
}


.dock-btn .icon {
    width: 20px;
    height: 20px;
}


/* O nome fica escondido (vai no title / leitor de tela). */
.session-dock .dock-btn .btn-label {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip-path: inset(50%);

    white-space: nowrap;
}


.dock-danger {
    color: #fb7185;
}


.dock-danger:hover:not(:disabled) {
    background: rgba(244, 63, 94, 0.15);

    color: #fda4af;
}


/* Mark: avatar redondo, igual nas outras páginas. */
.dock-btn.mark-trigger .mark-btn-avatar {
    width: 30px;
    height: 30px;

    border-radius: 50%;

    box-shadow: 0 6px 16px -8px rgba(34, 197, 94, 0.8);
}


.session-dock #chatBadge {
    position: absolute;

    top: 2px;
    right: 2px;

    min-width: 16px;

    padding: 0 4px;

    font-size: 10px;
}


/* Comandos do Windows: nome à esquerda, atalho à direita. */
.command-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    width: 100%;
    min-height: 38px;

    padding: 8px 10px;

    border: 0;
    border-radius: 10px;

    background: none;

    color: var(--text);

    font: inherit;
    font-size: 13px;

    text-align: left;

    cursor: pointer;
}


.command-item:hover {
    background: rgba(255, 255, 255, 0.06);
}


.command-item kbd {
    padding: 2px 7px;

    border: 1px solid var(--line-strong);
    border-radius: 6px;

    background: rgba(0, 0, 0, 0.3);

    color: var(--text-2);

    font-family: var(--mono);
    font-size: 11px;

    white-space: nowrap;
}


/* Latência ao lado do "Ao vivo", sem borda. */
.session-device-meta .latency-chip {
    height: auto;

    padding: 0;

    border: 0;

    background: none;

    gap: 5px;
}


/* Topo: só computador, status, idioma e perfil. */
@media (max-width: 760px) {

    .session-bar {
        flex-direction: row;
        align-items: center;

        gap: 10px;

        padding: 10px 12px;
    }

    .session-bar-left {
        flex: 1 1 auto;

        padding-right: 0;
    }

    .session-bar-right {
        flex: none;

        width: auto;

        margin: 0;

        padding: 0;

        border-top: 0;

        gap: 6px;
    }

    .session-bar-right > .lang-menu,
    .session-bar-right > .account-menu {
        position: static;
    }

    .session-dock {
        padding: 6px 8px;
    }

    .session-dock > :not([hidden]) ~ :not([hidden]) {
        margin-left: 9px;
    }

    .session-dock > :not([hidden]) ~ :not([hidden])::before {
        left: -5px;
    }

    .dock-btn {
        width: 36px;
    }
}


/* Celular estreito: sem separadores, para caber tudo. */
@media (max-width: 480px) {

    .session-dock {
        justify-content: space-between;
    }

    .session-dock > :not([hidden]) ~ :not([hidden]) {
        margin-left: 2px;
    }

    .session-dock > :not([hidden]) ~ :not([hidden])::before {
        display: none;
    }

    .dock-btn {
        width: 33px;
    }

    .dock-btn .icon {
        width: 18px;
        height: 18px;
    }

    .dock-btn.mark-trigger .mark-btn-avatar {
        width: 26px;
        height: 26px;
    }
}



/* ---------- Relatórios: filtros numa linha, busca ao lado do Exportar ---------- */

.report-actions {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-left: auto;
}


/* Busca sem caixa: só uma linha embaixo. */
.report-search {
    display: flex;
    align-items: center;

    gap: 8px;

    width: 240px;
    height: 40px;

    padding: 0 2px;

    border: 0;
    border-bottom: 1px solid var(--line-strong);

    background: none;

    color: var(--text-3);

    transition: border-color 0.15s;
}


.report-search:focus-within {
    border-bottom-color: var(--brand);
}


.report-search .icon {
    width: 16px;
    height: 16px;

    flex-shrink: 0;
}


.report-search input {
    flex: 1;

    min-width: 0;

    border: 0;

    background: none;

    color: var(--text);

    font: inherit;
    font-size: 14px;

    outline: none;
}


/* Filtros achatados: sem caixa, separados por "|". */
.filters-flat {
    align-items: center;

    gap: 0;

    flex-wrap: wrap;

    padding: 2px 4px;
}


.filters-flat .picker {
    width: auto;
}


.filters-flat .picker + .picker::before {
    content: "";

    align-self: center;

    width: 1px;
    height: 20px;

    margin: 0 4px;

    background: var(--line-strong);
}


.filters-flat .picker-button {
    width: auto;

    height: 38px;

    border: 0;

    background: none;

    font-size: 14px;
}


.filters-flat .picker-button:hover {
    color: var(--spark);
}


.filters-flat .picker-button[aria-expanded="true"] {
    border: 0;

    box-shadow: none;

    color: var(--spark);
}


@media (max-width: 760px) {

    .report-actions {
        width: 100%;

        margin: 10px 0 0;
    }

    .report-search {
        flex: 1;

        width: auto;
    }
}


/* Grupos dentro do menu de Comandos do Windows. */
.command-group {
    margin: 10px 2px 2px;

    color: var(--text-3);

    font-size: 10.5px;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.command-group:first-of-type {
    margin-top: 2px;
}


/* Aviso de "cliente bloqueado" sobre a tela remota. */
.input-blocked-banner {
    position: absolute;
    top: 14px;
    left: 50%;

    z-index: 6;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    border-radius: 999px;

    background: rgba(244, 63, 94, 0.92);

    color: #fff;

    font-size: 13px;
    font-weight: 700;

    box-shadow: 0 10px 26px -10px rgba(244, 63, 94, 0.8);

    transform: translateX(-50%);

    pointer-events: none;

    animation: fadeIn 0.2s ease;
}


.input-blocked-banner[hidden] {
    display: none;
}


.input-blocked-banner .icon {
    width: 15px;
    height: 15px;
}


/* Menu do botão Encerrar (energia). */
.power-list .power-item {
    justify-content: flex-start;
}


.power-list .power-item .icon {
    width: 17px;
    height: 17px;

    flex-shrink: 0;
}


/* Verde = encerrar o acesso; amarelo = reiniciar; vermelho = desligar. */
.power-list .power-end {
    color: #4ade80;
}


.power-list .power-end:hover {
    background: rgba(34, 197, 94, 0.14);
}


.power-list .power-restart {
    color: #facc15;
}


.power-list .power-restart:hover {
    background: rgba(250, 204, 21, 0.14);
}


.power-list .power-off {
    color: #fca5a5;
}


.power-list .power-off:hover {
    background: rgba(244, 63, 94, 0.14);
}


/* Aviso de UAC (permissão do Windows) sobre a tela remota. */
.uac-overlay {
    position: absolute;
    inset: 0;

    z-index: 7;

    display: grid;
    place-items: center;

    padding: 20px;

    background: rgba(2, 5, 3, 0.78);

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

    animation: fadeIn 0.2s ease;
}


.uac-overlay[hidden] {
    display: none;
}


.uac-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    max-width: 420px;

    padding: 28px 26px;

    border-radius: 18px;

    background: var(--ink-2);

    border: 1px solid var(--line-strong);

    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);

    text-align: center;
}


.uac-card .icon {
    width: 38px;
    height: 38px;

    color: var(--spark);
}


.uac-card strong {
    font-size: 16px;
}


.uac-card p {
    margin: 0;

    color: var(--text-2);

    font-size: 13.5px;
    line-height: 1.5;
}



/* ---------- Sessão: monitores (ícone com número + mini menu "Tela") ---------- */

.monitor-btn,
.monitor-option {
    position: relative;
}


.monitor-num {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -62%);

    font-size: 9.5px;
    font-weight: 800;

    line-height: 1;

    pointer-events: none;
}


.monitor-list {
    width: auto;
}


.monitor-options {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.monitor-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 42px;

    padding: 0;

    border: 1px solid var(--line-strong);
    border-radius: 10px;

    background: none;

    color: var(--text-2);

    cursor: pointer;
}


.monitor-option .icon {
    width: 26px;
    height: 26px;
}


.monitor-option .monitor-num {
    font-size: 11px;
}


.monitor-option:hover {
    color: var(--text);

    border-color: var(--brand);
}


.monitor-option[aria-checked="true"] {
    border-color: var(--brand);

    background: rgba(34, 197, 94, 0.14);

    color: var(--spark);
}


/* ---------- Tela cheia: barra em coluna à esquerda ---------- */

.session-dock.dock-floating {
    position: absolute;

    /* Centralizado sem transform/backdrop-filter: eles prenderiam os menus
       (position: fixed) dentro da coluna. */
    top: 0;
    bottom: 0;
    left: 12px;

    z-index: 8;

    flex-direction: column;
    justify-content: center;

    height: max-content;
    min-height: 0;
    max-height: calc(100% - 24px);

    margin: auto 0;

    padding: 8px 5px;

    border: 1px solid var(--line-strong);
    border-radius: 16px;

    background: rgba(9, 14, 11, 0.94);

    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);

    overflow-x: hidden;
    overflow-y: auto;
}


.session-dock.dock-floating > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0;
    margin-top: 9px;
}


.session-dock.dock-floating > :not([hidden]) ~ :not([hidden])::before {
    top: -5px;
    left: 50%;

    width: 18px;
    height: 1px;

    transform: translateX(-50%);
}


.session-dock.dock-floating.dock-hidden {
    display: none;
}


.dock-toggle {
    position: absolute;

    top: 50%;
    left: 66px;

    z-index: 9;

    display: grid;
    place-items: center;

    width: 22px;
    height: 44px;

    padding: 0;

    border: 1px solid var(--line-strong);
    border-radius: 0 10px 10px 0;

    background: rgba(9, 14, 11, 0.9);

    color: var(--text-2);

    cursor: pointer;

    transform: translateY(-50%);
}


.dock-toggle[hidden] {
    display: none;
}


.dock-toggle:hover {
    color: var(--spark);
}


.dock-toggle .icon {
    width: 16px;
    height: 16px;

    transition: transform 0.15s ease;
}


/* Barra escondida: a alça vai para a borda e a seta inverte. */
.dock-toggle.collapsed {
    left: 0;
}


.dock-toggle.collapsed .icon {
    transform: rotate(180deg);
}



/* ========================================================
   AJUDA (pública e logada): seções abertas, ilustrações,
   busca e botão fixo de tópicos
   ======================================================== */

.help-page {
    max-width: 1080px;
}


.help-page [hidden] {
    display: none !important;
}


.help-hero {
    position: relative;

    display: grid;
    gap: 22px;

    padding: 34px 34px 28px;

    border: 1px solid var(--line);
    border-radius: 24px;

    background:
        radial-gradient(120% 140% at 100% 0%, rgba(34, 197, 94, 0.16), transparent 55%),
        var(--surface);

    box-shadow: var(--shadow);
}


.help-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    width: fit-content;

    padding: 5px 11px;

    border-radius: 999px;

    background: var(--brand-soft);

    color: var(--spark);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}


.help-kicker .icon {
    width: 14px;
    height: 14px;
}


.help-hero h1 {
    margin: 14px 0 8px;

    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.02em;
}


.help-hero p {
    max-width: 620px;

    margin: 0;

    color: var(--text-2);

    font-size: 15px;
    line-height: 1.6;
}


.help-search {
    display: flex;
    align-items: center;
    gap: 10px;

    max-width: 560px;

    margin-top: 20px;
    padding: 0 16px;

    border: 1px solid var(--line-strong);
    border-radius: 14px;

    background: var(--ink-2);

    transition: border-color 0.15s, box-shadow 0.15s;
}


.help-search:focus-within {
    border-color: var(--brand);

    box-shadow: 0 0 0 4px var(--brand-soft);
}


.help-search .icon {
    flex-shrink: 0;

    width: 18px;
    height: 18px;

    color: var(--text-3);
}


.help-search input {
    flex: 1;

    min-width: 0;
    height: 48px;

    border: 0;

    background: none;

    color: var(--text);

    font: inherit;
    font-size: 15px;

    outline: none;
}


.help-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.help-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 13px;

    border: 1px solid var(--line-strong);
    border-radius: 999px;

    color: var(--text-2);

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition: color 0.15s, border-color 0.15s, background 0.15s;
}


.help-chip .icon {
    width: 15px;
    height: 15px;
}


.help-chip:hover,
.help-chip.active {
    border-color: var(--brand);

    background: var(--brand-soft);

    color: var(--spark);
}


.help-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin: 28px 0 0;
    padding: 28px;

    border: 1px dashed var(--line-strong);
    border-radius: 18px;

    color: var(--text-2);
}


.help-empty .icon {
    width: 18px;
    height: 18px;
}


/* ---------- seções ---------- */

.help-section {
    margin-top: 22px;
    padding: 28px 30px 30px;

    border: 1px solid var(--line);
    border-radius: 24px;

    background: var(--surface);

    scroll-margin-top: 92px;
}


.help-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}


.help-section-text {
    min-width: 0;
}


.help-section-num {
    color: var(--text-3);

    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
}


.help-section h2 {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 6px 0 8px;

    font-size: 22px;
    letter-spacing: -0.01em;
}


.help-section-icon {
    display: grid;
    place-items: center;

    flex-shrink: 0;

    width: 38px;
    height: 38px;

    border-radius: 12px;

    background: var(--brand-soft);

    color: var(--spark);
}


.help-section-icon .icon {
    width: 19px;
    height: 19px;
}


.help-section-head p {
    max-width: 540px;

    margin: 0;

    color: var(--text-2);

    line-height: 1.6;
}


/* Ilustrações */
.help-art {
    flex-shrink: 0;

    width: 200px;
}


.help-art svg {
    display: block;

    width: 100%;
    height: auto;

    overflow: visible;
}


.help-art .a-card { fill: #101a14; stroke: rgba(134, 239, 172, 0.22); }
.help-art .a-bar { fill: #17241c; }
.help-art .a-chip { fill: #11261a; stroke: rgba(74, 222, 128, 0.45); }
.help-art .a-line { fill: rgba(255, 255, 255, 0.1); }
.help-art .a-dot { fill: rgba(255, 255, 255, 0.22); }
.help-art .a-soft { fill: rgba(34, 197, 94, 0.18); }
.help-art .a-brand { fill: #22c55e; }
.help-art .a-spark { fill: #4ade80; }
.help-art .a-dark { fill: #052e16; }
.help-art .a-red { fill: #f43f5e; }
.help-art .a-code { fill: #4ade80; font: 700 15px var(--mono); letter-spacing: 0.06em; }
.help-art .a-stroke { fill: none; stroke: #4ade80; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.help-art .a-stroke-dark { fill: none; stroke: #052e16; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.help-art .a-stroke-dark-fill { fill: none; stroke: #052e16; stroke-width: 4; }
.help-art .a-dash { fill: none; stroke: #4ade80; stroke-width: 3; stroke-dasharray: 6 6; }


.help-sub {
    margin: 26px 0 12px;

    color: var(--text-3);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* Passo a passo numerado */
.help-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;

    counter-reset: help-step;
}


.help-steps li {
    position: relative;

    padding: 18px 18px 18px 60px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: var(--surface-2);

    counter-increment: help-step;
}


.help-steps li::before {
    content: counter(help-step);

    position: absolute;
    top: 16px;
    left: 16px;

    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--brand);

    color: var(--on-brand);

    font-weight: 800;
}


.help-steps strong,
.help-tool strong {
    display: block;

    margin-bottom: 4px;

    font-size: 14.5px;
}


.help-steps p,
.help-tool p {
    margin: 0;

    color: var(--text-2);

    font-size: 13.5px;
    line-height: 1.55;
}


/* Ferramentas da barra */
.help-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.help-tool {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 14px 16px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: var(--surface-2);
}


.help-tool-icon {
    display: grid;
    place-items: center;

    flex-shrink: 0;

    width: 36px;
    height: 36px;

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.05);

    color: var(--text);
}


.help-tool-icon .icon {
    width: 18px;
    height: 18px;
}


.help-tool-mark .help-tool-icon {
    background: var(--brand);

    color: var(--on-brand);
}


.help-tool-end .help-tool-icon {
    background: rgba(244, 63, 94, 0.14);

    color: #fb7185;
}


/* Perguntas (todas abertas) */
.help-qa {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 22px;
}


.help-sub + .help-qa {
    margin-top: 0;
}


.help-question {
    padding: 18px 20px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: var(--surface-2);
}


.help-question h3 {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin: 0 0 8px;

    font-size: 15px;
    line-height: 1.4;
}


.help-question h3 .icon {
    flex-shrink: 0;

    width: 17px;
    height: 17px;

    margin-top: 2px;

    color: var(--spark);
}


.help-question p {
    margin: 0;

    color: var(--text-2);

    font-size: 14px;
    line-height: 1.65;
}


.help-more {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-top: 22px;
    padding: 22px 26px;

    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 20px;

    background: linear-gradient(120deg, rgba(34, 197, 94, 0.12), transparent 70%), var(--surface);
}


.help-more-icon {
    display: grid;
    place-items: center;

    flex-shrink: 0;

    width: 44px;
    height: 44px;

    border-radius: 14px;

    background: var(--brand);

    color: var(--on-brand);
}


.help-more-icon .icon {
    width: 22px;
    height: 22px;
}


.help-more p {
    margin: 4px 0 0;

    color: var(--text-2);
}


/* ---------- botão fixo de tópicos ---------- */

.help-topics {
    position: fixed;
    left: 22px;
    bottom: 22px;

    z-index: 45;
}


.help-topics-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    height: 46px;

    padding: 0 18px;

    border: 1px solid rgba(34, 197, 94, 0.45);
    border-radius: 999px;

    background: rgba(9, 14, 11, 0.94);

    color: var(--text);

    font: inherit;
    font-size: 14px;
    font-weight: 700;

    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.9);

    cursor: pointer;

    transition: border-color 0.15s, color 0.15s;
}


.help-topics-btn .icon {
    width: 18px;
    height: 18px;

    color: var(--spark);
}


.help-topics-btn:hover,
.help-topics-btn[aria-expanded="true"] {
    border-color: var(--brand);

    color: var(--spark);
}


.help-topics-list {
    position: absolute;
    left: 0;
    bottom: 56px;

    width: 280px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);

    padding: 8px;

    border: 1px solid var(--line-strong);
    border-radius: 18px;

    background: rgba(11, 18, 14, 0.98);

    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.95);

    overflow-y: auto;
}


.help-topics-title {
    padding: 8px 10px 6px;

    color: var(--text-3);

    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.help-topics-list a {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px;

    border-radius: 11px;

    color: var(--text-2);

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}


.help-topics-list a .icon {
    flex-shrink: 0;

    width: 17px;
    height: 17px;
}


.help-topics-list a:hover {
    background: rgba(255, 255, 255, 0.06);

    color: var(--text);
}


.help-topics-list a.active {
    background: var(--brand-soft);

    color: var(--spark);
}


.help-topics-list .help-topics-top {
    margin-top: 4px;

    border-top: 1px solid var(--line);
    border-radius: 0 0 11px 11px;
}


/* Botão Entrar no topo (visitante) */
.help-enter {
    white-space: nowrap;
}


html:has(.help-page) {
    scroll-behavior: smooth;
}


@media (prefers-reduced-motion: reduce) {

    html:has(.help-page) {
        scroll-behavior: auto;
    }
}


@media (max-width: 900px) {

    .help-steps,
    .help-qa,
    .help-tools {
        grid-template-columns: minmax(0, 1fr);
    }

    .help-art {
        width: 150px;
    }
}


@media (max-width: 640px) {

    .help-hero {
        padding: 24px 18px 20px;

        border-radius: 20px;
    }

    .help-section {
        padding: 20px 16px 18px;

        border-radius: 20px;
    }

    .help-section-head {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 10px;
    }

    .help-art {
        width: 132px;
    }

    .help-section h2 {
        font-size: 19px;
    }

    .help-topics {
        left: 12px;
        bottom: 12px;
    }

    .help-topics-btn {
        height: 42px;

        padding: 0 15px;
    }

    .help-more {
        align-items: flex-start;

        padding: 18px;
    }
}



/* Páginas sem login: [Entrar] [Ajuda] [Idioma] à direita. */
.auth-help {
    flex-shrink: 0;

    justify-content: center;

    width: 38px;

    padding: 0;
}


.auth-top .auth-help {
    margin-left: auto;
}


.auth-top .auth-enter + .auth-help {
    margin-left: 0;
}


.auth-help:hover,
.auth-help[aria-current="page"] {
    border-color: var(--brand);

    color: var(--spark);
}



/* Visitante em tela estreita: "Entrar" só com o ícone. */
@media (max-width: 420px) {

    .help-enter span {
        display: none;
    }

    .help-enter {
        padding: 0 12px;
    }
}



/* Ajuda do visitante: topo igual ao das outras páginas sem login. */
.topbar.public-top {
    max-width: 1180px;
    height: auto;

    margin: 0 auto;
    padding: 8px 32px 12px;

    border-bottom-color: transparent;
}


.topbar.public-top .logo {
    font-size: 24px;
}


/* Celular: "Entrar" só com o ícone para caber Entrar, Ajuda e idioma. */
@media (max-width: 420px) {

    .auth-top .auth-enter span {
        display: none;
    }

    .auth-top .auth-enter {
        padding: 0 12px;
    }
}


@media (max-width: 560px) {

    .topbar.public-top {
        padding: 8px 16px 12px;
    }

    .topbar.public-top .logo {
        font-size: 20px;
    }
}



/* Agente do cliente sem administrador (aviso de alguns segundos). */
.elevation-banner {
    max-width: calc(100% - 32px);

    background: rgba(250, 204, 21, 0.95);

    color: #1c1500;

    text-align: center;

    box-shadow: 0 10px 26px -10px rgba(250, 204, 21, 0.7);
}


.elevation-banner .icon {
    flex-shrink: 0;
}



/* UAC com visão ao vivo (agente novo): aviso discreto, sem cobrir a tela. */
.uac-live-hint {
    background: rgba(250, 204, 21, 0.95);

    color: #1c1500;

    box-shadow: 0 10px 26px -10px rgba(250, 204, 21, 0.7);
}


.uac-live-hint .icon {
    flex-shrink: 0;
}


/* ---------- Quem está com o dispositivo aberto ---------- */

.session-operators {
    min-width: 0;

    color: var(--warn);

    font-family: inherit;
}


.session-operators span {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    max-width: 40ch;
}


.device-in-use {
    color: var(--warn);
}


.saved-row .in-use {
    color: var(--warn);
}


/* ---------- Contato por e-mail ---------- */

.auth-contact a,
.contact-link {
    color: var(--spark);

    font-weight: 600;

    text-decoration: none;

    overflow-wrap: anywhere;
}


.auth-contact a:hover,
.contact-link:hover {
    text-decoration: underline;
}


.auth-contact {
    margin-top: 6px;
}


/* Aviso de segurança e contato alinham pela mesma borda. */
.auth-page .auth-foot {
    justify-content: flex-start;

    width: 100%;
}


/* ---------- Conta mestre ---------- */

.editor-note {
    margin: 0;

    color: var(--text-2);

    font-size: 13px;
    line-height: 1.5;
}


/* ---------- Chamados ---------- */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


.tickets-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    gap: 12px;

    margin-bottom: 16px;
}


.tickets-search {
    flex: 1 1 240px;

    min-width: 0;
}


.tickets-status-filter {
    flex: 0 1 220px;

    min-width: 0;
}


.auth-field textarea,
.auth-field select {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--line-strong);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.03);

    color: var(--text);

    font: inherit;
}


.auth-field textarea {
    min-height: 96px;

    resize: vertical;

    line-height: 1.5;
}


.auth-field textarea:focus,
.auth-field select:focus {
    outline: none;

    border-color: var(--brand);
}


.ticket-row {
    cursor: pointer;
}


.ticket-row:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}


.ticket-dialog {
    width: min(640px, calc(100vw - 24px));
}


.ticket-head {
    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;
}


.ticket-head h2 {
    overflow-wrap: anywhere;
}


.ticket-description p,
.ticket-message p {
    margin: 0;

    color: var(--text);

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    line-height: 1.55;
}


.ticket-thread {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.ticket-message {
    padding: 12px 14px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.025);
}


.ticket-message.staff {
    border-color: rgba(34, 197, 94, 0.35);

    background: var(--brand-soft);
}


.ticket-message header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin-bottom: 6px;
}


.ticket-message small {
    color: var(--text-3);
}


.ticket-badge {
    padding: 2px 8px;

    border-radius: 999px;

    background: var(--brand-soft);

    color: var(--spark);

    font-size: 11px;
    font-weight: 700;
}


.ticket-files,
.attach-list {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin: 10px 0 0;
    padding: 0;

    list-style: none;
}


.ticket-files li,
.attach-list li {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;

    color: var(--text-2);

    font-size: 13px;
}


.ticket-files a,
.attach-name {
    min-width: 0;

    overflow: hidden;

    color: var(--spark);

    text-overflow: ellipsis;
    white-space: nowrap;
}


.ticket-files .icon,
.attach-list .icon {
    flex-shrink: 0;

    width: 15px;
    height: 15px;
}


.attach-list .icon-button {
    margin-left: auto;
}


.attach-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 8px;
}


.attach-hint {
    color: var(--text-3);
}


.attach-box .auth-message {
    margin: 0;
}


.ticket-reply {
    display: flex;
    flex-direction: column;

    gap: 12px;
}


.ticket-reply-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;
}


.ticket-status-select {
    flex: 0 1 220px;
}


.tickets-list {
    padding-bottom: 90px;
}