/* ========================================================
   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;
    --avatar-bg: #0c2216;
    --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: var(--cur-link);

    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: var(--cur-link);
}


.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: var(--cur-link);

    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: var(--cur-unavailable);

    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: var(--cur-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: var(--cur-link);
}


.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: var(--cur-normal);
}


.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: var(--cur-link);
}


.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: var(--cur-link);

    flex-shrink: 0;
}


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

    color: white;
}


.icon-button:disabled {
    opacity: 0.35;

    cursor: var(--cur-normal);
}


.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: var(--cur-link);
}


.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: 22px 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: var(--cur-link);
}


.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: var(--cur-link);
}


.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 2: botões da direita só com ícone (Ajuda, Perfil, status). */
.topbar.fit-2 .help-link span,
.topbar.fit-2 .account-name,
.topbar.fit-2 .server-status #serverStatusText,
.topbar.fit-2 .lang-button .chevron {
    display: none;
}

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

    padding: 0;

    justify-content: center;
}

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

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

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

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

    padding: 0;

    justify-content: center;
}

/* Etapa 1: sem o selo "Central de suporte" (é o primeiro a sair, para os nomes dos botões caberem). */
.topbar.fit-1 .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: var(--cur-link);
}


.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: var(--cur-link);
}


.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: var(--cur-link);

    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: var(--cur-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: var(--cur-link);
}


.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: var(--cur-link);

    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: var(--cur-link);
}


.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: var(--cur-link);
}


.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: var(--cur-link);

    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: var(--cur-unavailable);

    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: var(--cur-link);

    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: var(--cur-link);
}


.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: var(--cur-link);

    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: var(--cur-unavailable);
}


@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: var(--cur-link);
}


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

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--avatar-bg);

    color: var(--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: var(--cur-link);
}


.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(--avatar-bg);

    color: var(--brand);

    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: var(--cur-link);
}


.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: var(--cur-link);
}


.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;

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

.account-avatar.has-photo {
    background-color: var(--avatar-bg);
    background-position: center;
    background-size: cover;

    color: transparent;
}


.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: var(--cur-link);
}


.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: var(--cur-link);

    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: var(--cur-link);
}


.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: calc(24px + var(--float-lift, 0px));

    z-index: 45;

    width: 56px;
    height: 56px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: none;

    cursor: var(--cur-link);

    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 (na moldura, o botão fica fora
   da página: ela recebe a classe has-shell-mark). */
body:has(.mark-fab) .toasts,
body.has-shell-mark .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: var(--cur-link);

    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: calc(16px + var(--float-lift, 0px));

        width: 52px;
        height: 52px;
    }

    body:has(.mark-fab) .toasts,
    body.has-shell-mark .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: var(--cur-link);

    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: var(--cur-link);
}


.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: var(--cur-link);

    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: var(--cur-link);

    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: var(--cur-unavailable);
}


.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: var(--cur-link);
}


.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 e sem divisor, só o espaço entre eles. */
.filters-flat {
    align-items: center;

    gap: 6px 26px;

    flex-wrap: wrap;

    padding: 2px 4px;
}


.filters-flat .picker {
    width: auto;
}


.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: var(--cur-link);
}


.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);
}


/* "Todas as telas": linha inteira no topo do menu, com a disposição real. */
.monitor-option.monitor-option-all {
    flex: 1 0 100%;

    justify-content: flex-start;

    gap: 10px;

    width: auto;
    height: auto;
    min-height: 48px;

    padding: 6px 12px 6px 8px;
}


.monitor-layout {
    flex: none;

    width: 64px;
    height: 36px;
}


.monitor-layout rect {
    fill: rgba(255, 255, 255, 0.05);

    stroke: currentColor;
    stroke-width: 1.2;
}


.monitor-layout text {
    fill: currentColor;

    font-family: var(--font, inherit);
    font-weight: 800;

    text-anchor: middle;
    dominant-baseline: central;
}


.monitor-all-text {
    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
}


/* ---------- 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: var(--cur-link);

    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: calc(22px + var(--float-lift, 0px));

    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: var(--cur-link);

    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: calc(12px + var(--float-lift, 0px));
    }

    .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: var(--cur-link);
}


.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;
}


/* ---------- Mark por voz ---------- */

.mark-mic.recording {
    background: var(--danger);

    border-color: var(--danger);

    color: white;

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

.mark-speaker.active,
.mark-hands.active {
    color: var(--brand);
}

.mark-hands.active {
    background: var(--brand-soft, rgba(52, 210, 122, .14));
}

.editor-flags {
    margin: 0;
    padding: 12px;

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

.editor-flags legend {
    padding: 0 6px;

    color: var(--muted);

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

.editor-flag {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    cursor: var(--cur-link);
}

.editor-flag input {
    margin-top: 3px;
}

.editor-flag small {
    display: block;

    color: var(--muted);
}


/* Mãos livres ligado: o botão do Mark pulsa, mesmo com o painel fechado. */
.mark-trigger.voice-live,
.mark-fab.voice-live {
    animation: markLive 1.8s ease-out infinite;
}

@keyframes markLive {
    0%   { box-shadow: 0 0 0 0 rgba(52, 210, 122, .55); }
    70%  { box-shadow: 0 0 0 12px rgba(52, 210, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 210, 122, 0); }
}


/* Recursos liberados: IAs dentro de "Selecionar outra IA". */
.editor-flag-group {
    margin-bottom: 10px;
}

.editor-flag-sub {
    display: grid;
    gap: 8px;

    margin: 8px 0 0 26px;
    padding-left: 12px;

    border-left: 2px solid var(--line);
}

.editor-flag-sub[hidden],
.editor-flag[hidden] {
    display: none;
}


/* ---------- Vários arquivos ao mesmo tempo ---------- */

.files-check-cell {
    display: grid;
    place-items: center;

    width: 22px;
}


.files-check {
    width: 18px;
    height: 18px;

    margin: 0;

    accent-color: var(--brand);

    cursor: var(--cur-link);
}


.files-modal.is-dragging .files-window {
    outline: 2px dashed var(--brand);
    outline-offset: -8px;
}


/* O botão "Baixar selecionados" some quando nada está marcado. */
.files-toolbar .btn[hidden] {
    display: none;
}


/* Criar pasta / enviar pasta na barra do gerenciador de arquivos. */
.files-toolbar .icon-button.disabled,
.files-toolbar .icon-button:disabled {
    opacity: 0.4;

    pointer-events: none;
}


.files-toolbar label.icon-button {
    cursor: var(--cur-link);
}


/* Porcentagem e MB enviados: números alinhados, sem quebrar a linha. */
.transfer-status {
    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}


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

.files-header-actions {
    display: flex;
    align-items: center;

    gap: 4px;
}


.files-mini-summary {
    margin-right: auto;
    margin-left: 12px;

    color: var(--spark);

    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


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


/* Cartão no canto, sem cobrir a tela remota nem tomar o mouse dela. */
.files-modal.is-minimized {
    place-items: end end;

    padding: 16px 16px 84px;

    background: transparent;
    backdrop-filter: none;

    pointer-events: none;

    animation: none;
}


.files-modal.is-minimized .files-window {
    width: min(380px, 100%);
    height: auto;
    max-height: 320px;

    pointer-events: auto;
}


.files-modal.is-minimized .files-header h2,
.files-modal.is-minimized .files-toolbar,
.files-modal.is-minimized .files-list {
    display: none;
}


.files-modal.is-minimized .files-transfers {
    max-height: 240px;

    overflow-y: auto;
}


/* ---------- Cancelar transferência ---------- */

/* Linha: ícone | nome | cancelar, depois o texto de andamento e a barra. */
.transfer-row .transfer-status {
    grid-column: 2 / -1;
}


.transfer-cancel {
    display: inline-grid;
    place-items: center;

    width: 24px;
    height: 24px;

    padding: 0;

    border: 0;
    border-radius: 6px;

    background: transparent;
    color: var(--text-3);

    cursor: var(--cur-link);
}


.transfer-cancel[hidden] {
    display: none;
}


.transfer-cancel:hover,
.transfer-cancel:focus-visible {
    background: rgba(251, 113, 133, 0.14);
    color: #fb7185;
}


.transfer-cancel .icon {
    width: 14px;
    height: 14px;

    color: inherit;
}


/* Relatórios → Suporte web (detalhes do atendimento por link) */
.assist-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px 18px;
}


.assist-detail {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 2px;
}


.assist-detail span {
    font-size: 12px;
    font-weight: 600;

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


.assist-detail strong {
    font-size: 14px;
    font-weight: 600;

    overflow-wrap: anywhere;
}


.assist-details[hidden] {
    display: none;
}


@media (max-width: 560px) {

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


/* ========================================================
   POLIMENTO GERAL — espaçamento e alinhamento
   (sem divisores "|", ritmo vertical único, nada estoura em 320 px)
   ======================================================== */

:root {
    --gap-section: 24px;
}


/* ---------- Menu e topo: sem "|" entre os itens ---------- */

.main-nav a + a {
    margin-left: 6px;
}

.main-nav a + a::before,
.topbar.fit-4 .main-nav a + a::before,
.topbar.fit-5 .main-nav a + a::before {
    display: none;
}

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

/* Telas bem estreitas (320 px): cabem logo, 6 ícones do menu e os botões. */
.topbar.fit-5 {
    padding-left: 10px;
    padding-right: 10px;
}

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

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

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

.topbar.fit-5 .account-button {
    padding: 0 2px;
}


/* ---------- Ritmo vertical: o mesmo espaço entre todos os blocos ---------- */

.toolbar,
.stats-grid,
.panel-section {
    margin-bottom: var(--gap-section);
}

.filters-bar {
    margin-bottom: var(--gap-section);
}

.filters-flat {
    margin-bottom: 20px;
}

.report-tabs.slide-switch {
    margin-bottom: 16px;
}


/* ---------- Filtros: juntos à esquerda, com o mesmo espaço ---------- */

.filters-bar.filters-flat .picker {
    flex: 0 0 auto;
}


/* ---------- Abas dos relatórios: nome inteiro, sem reticências ---------- */

.report-tabs.slide-switch {
    width: min(620px, 100%);
}

.report-tab.slide-option {
    white-space: nowrap;
}

@media (min-width: 601px) and (max-width: 700px) {

    .report-tab .tab-long {
        display: none;
    }

    .report-tab .tab-short {
        display: inline;
    }
}


/* ---------- Cartões de números ---------- */

.stat-card {
    min-width: 0;
}

.stat-value {
    overflow-wrap: anywhere;
}

@media (max-width: 360px) {

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


/* ---------- Códigos nunca quebram em duas linhas ---------- */

.mono {
    white-space: nowrap;
}


/* ---------- Busca + Exportar não estouram a tela ---------- */

.report-search {
    min-width: 0;
}

.report-search input {
    width: 100%;
}

@media (max-width: 420px) {

    .report-actions {
        flex-wrap: wrap;
    }

    .export-menu,
    .export-menu > .btn {
        width: 100%;
    }
}

/* 320 px: mais 6 px de folga no topo. */
.topbar.fit-5 .main-nav a,
.topbar.fit-5 .help-link {
    width: 26px;
}

.download-card {
    margin-bottom: var(--gap-section);
}


/* Dispositivos: atalho para atender pelo navegador (Suporte web) */
.code-alt {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 14px;
    padding: 11px 14px;

    border-radius: 12px;

    background: rgba(34, 197, 94, 0.07);

    border: 1px solid rgba(34, 197, 94, 0.22);

    color: var(--text-2);

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

    text-decoration: none;

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

.code-alt span {
    flex: 1;

    min-width: 0;
}

.code-alt .icon:first-child {
    color: var(--spark);
}

.code-alt:hover {
    background: rgba(34, 197, 94, 0.13);

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

    color: var(--text);
}

.code-alt:hover .icon:last-child {
    transform: translateX(3px);
}

.code-alt .icon:last-child {
    transition: transform 0.2s;
}

.toolbar-banner .toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}


/* ========================================================
   MOVIMENTO — entrada suave, hover e carregamento
   Só transform e opacity (leve), sempre respeitando
   "reduzir movimento" do sistema.
   ======================================================== */

:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes h4dRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes h4dFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes h4dPop {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: none; }
}

@keyframes h4dGlowLine {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

/* ---------- Páginas: o conteúdo entra em sequência ---------- */

body {
    animation: h4dFade 0.35s ease backwards;
}

main.container > * {
    animation: h4dRise 0.55s var(--motion-ease) backwards;
}

main.container > *:nth-child(2) { animation-delay: 0.05s; }
main.container > *:nth-child(3) { animation-delay: 0.1s; }
main.container > *:nth-child(4) { animation-delay: 0.15s; }
main.container > *:nth-child(5) { animation-delay: 0.2s; }
main.container > *:nth-child(n + 6) { animation-delay: 0.25s; }

/* Cartões de números e blocos de ajuda: um depois do outro. */
.stats-grid > .stat-card {
    animation: h4dPop 0.5s var(--motion-ease) backwards;
}

.stats-grid > .stat-card:nth-child(2) { animation-delay: 0.08s; }
.stats-grid > .stat-card:nth-child(3) { animation-delay: 0.16s; }
.stats-grid > .stat-card:nth-child(4) { animation-delay: 0.24s; }

.help-qa > .help-item {
    animation: h4dRise 0.5s var(--motion-ease) backwards;
}

.help-qa > .help-item:nth-child(2) { animation-delay: 0.05s; }
.help-qa > .help-item:nth-child(3) { animation-delay: 0.1s; }
.help-qa > .help-item:nth-child(4) { animation-delay: 0.15s; }
.help-qa > .help-item:nth-child(n + 5) { animation-delay: 0.2s; }

/* Estados vazios: a ilustração aparece e depois respira. */
.row-empty {
    animation: h4dPop 0.5s var(--motion-ease) backwards;
}

.row-empty .empty-art {
    animation: h4dRise 0.6s var(--motion-ease) 0.1s backwards;
}

/* ---------- Toque e passagem do mouse ---------- */

.stat-card,
.row-card,
.panel-section .device-card {
    transition:
        transform 0.25s var(--motion-ease),
        border-color 0.25s,
        box-shadow 0.25s,
        background 0.25s;
}

.stat-card:hover {
    transform: translateY(-3px);

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

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

.stat-card .stat-icon {
    transition: transform 0.3s var(--motion-ease), background 0.25s;
}

.stat-card:hover .stat-icon {
    transform: rotate(-8deg) scale(1.1);
}

.row-card:not(.skeleton):hover {
    transform: translateX(3px);

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

.main-nav a .icon {
    transition: transform 0.25s var(--motion-ease), color 0.2s;
}

.main-nav a:hover .icon {
    transform: translateY(-2px) scale(1.12);
}

.main-nav a[aria-current="page"] .icon {
    animation: h4dGlowLine 3s ease-in-out infinite;
}

.btn {
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s,
        box-shadow 0.25s,
        transform 0.2s var(--motion-ease);
}

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

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

.btn-primary .icon {
    transition: transform 0.25s var(--motion-ease);
}

.btn-primary:hover:not(:disabled) .icon {
    transform: scale(1.12);
}

.toolbar-art {
    transition: transform 0.4s var(--motion-ease);
}

.toolbar-banner:hover .toolbar-art {
    transform: translateY(-3px) scale(1.03);
}

/* ---------- Carregamento: o brilho passa pelas linhas ---------- */

.row-card.skeleton {
    background:
        linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);

    background-size: 200% 100%;

    animation: shimmer 1.3s linear infinite;
}

/* ---------- Reduzir movimento ---------- */

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

    body,
    main.container > *,
    .stats-grid > .stat-card,
    .help-qa > .help-item,
    .row-empty,
    .row-empty .empty-art,
    .main-nav a[aria-current="page"] .icon {
        animation: none !important;
    }

    .stat-card:hover,
    .row-card:not(.skeleton):hover,
    .btn:hover:not(:disabled),
    .toolbar-banner:hover .toolbar-art,
    .main-nav a:hover .icon,
    .stat-card:hover .stat-icon {
        transform: none !important;
    }
}


/* ========================================================
   Telas públicas (login, redefinir, baixar, atendimento por link):
   a barra do topo acompanha a rolagem e o conteúdo respira.
   ======================================================== */

.auth-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. */
.auth-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);
}

.auth-page .auth-top.scrolled::before {
    opacity: 1;
}

/* Espaço entre a barra e o cartão, mesmo em telas baixas. */
.auth-page .auth-main,
.auth-page .auth-main.auth-split {
    padding-top: 28px;
}

@media (max-width: 560px) {

    .auth-page .auth-main,
    .auth-page .auth-main.auth-split {
        padding-top: 20px;
    }
}


/* ========================================================
   Login e redefinir: a animação aparece sempre que cabe.
   - tela estreita e alta: fica EM CIMA do título e do cartão;
   - computador com pouca altura: encolhe em vez de sumir.
   ======================================================== */

@media (max-width: 980px) and (min-height: 860px) {

    .auth-split .auth-hero {
        display: flex;
    }

    .auth-split .hero-art {
        display: block;

        order: -1;

        width: min(100%, 260px);

        margin: 0 auto 4px;
    }
}

@media (min-width: 981px) and (max-height: 700px) {

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

/* Só some de vez em telas realmente baixas (antes: 620 px). */
@media (min-width: 981px) and (max-height: 620px) {

    .auth-split .hero-art {
        display: block;

        width: min(100%, 220px);
    }
}

@media (min-width: 981px) and (max-height: 520px) {

    .auth-split .hero-art {
        display: none;
    }
}


/* Menus de filtros (período, situação, técnico) ficam sempre por cima do que vem
   depois (cartões, listas), mesmo com as animações de entrada. */
.filters-bar {
    position: relative;

    z-index: 30;
}


/* ========================================================
   Título da página fixo junto com a barra (telas com espaço)
   ======================================================== */

@media (min-height: 460px) {

    main.container > .toolbar-banner.sticky-banner {
        position: sticky;
        top: calc(var(--site-header-h, 76px) + 4px);

        /* Abaixo da barra (40) e acima de filtros e listas. */
        z-index: 35;

        /* O degradê é translúcido: sem base opaca o conteúdo aparece por baixo. */
        background-color: var(--surface);

        transition: padding 0.2s var(--motion-ease), box-shadow 0.25s;
    }

    main.container > .toolbar-banner.sticky-banner.stuck {
        padding-top: 8px;
        padding-bottom: 8px;

        /* A faixa escura em cima tampa o vão entre a barra e o banner. */
        box-shadow:
            0 -4px 0 0 var(--bg),
            0 16px 32px -18px rgba(0, 0, 0, 0.95);
    }

    .sticky-banner.stuck .toolbar-title p,
    .sticky-banner.stuck .toolbar-art {
        display: none;
    }
}

/* Telas estreitas: ao grudar, o banner fica só com o título (busca e exportar
   voltam ao rolar para o topo), para não tomar a tela. */
@media (max-width: 699px) and (min-height: 460px) {

    .sticky-banner.stuck .report-actions,
    .sticky-banner.stuck .toolbar-actions,
    .sticky-banner.stuck > .btn {
        display: none;
    }
}


/* ========================================================
   Celular deitado (paisagem): pouca altura, então tudo fica mais compacto.
   O atributo data-phone-landscape vem do i18n.js (toque + paisagem + <= 520 px).
   ======================================================== */

html[data-phone-landscape] {
    --site-header-h: 52px;
}

html[data-phone-landscape] .topbar {
    height: 52px;
}

html[data-phone-landscape] .hero-compact,
html[data-phone-landscape] .toolbar-art {
    display: none;
}

html[data-phone-landscape] .toolbar {
    padding: 10px 14px;

    margin-bottom: 14px;
}

html[data-phone-landscape] .toolbar-title p {
    display: none;
}

html[data-phone-landscape] main.container > .toolbar-banner.sticky-banner {
    position: static;
}

html[data-phone-landscape] .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;
}

/* Login / redefinir / completar: cartão compacto, sem enfeite. */
html[data-phone-landscape] .auth-page .auth-main,
html[data-phone-landscape] .auth-page .auth-main.auth-split {
    padding-top: 12px;
    padding-bottom: 16px;
}

html[data-phone-landscape] .auth-split .auth-hero,
html[data-phone-landscape] .auth-card .auth-art {
    display: none;
}

html[data-phone-landscape] .auth-card {
    padding: 14px 18px;
}

/* Atendimento por link (cliente): duas colunas no lugar de uma. */
html[data-phone-landscape] .assist-client .assist-main-col {
    max-width: 960px;
}

html[data-phone-landscape] .page-art {
    display: none;
}

html[data-phone-landscape] #stateLive > .assist-main-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    align-items: start;
}

html[data-phone-landscape] #stateLive > .assist-main-col > .status,
html[data-phone-landscape] #stateLive > .assist-main-col > .alert,
html[data-phone-landscape] #stateLive > .assist-main-col > .row,
html[data-phone-landscape] #stateLive > .assist-main-col > .note,
html[data-phone-landscape] #stateLive > .assist-main-col > .app-card {
    grid-column: 1 / -1;
}

html[data-phone-landscape] #chatLog {
    height: 110px;
}

/* Sala do técnico: palco e conversa lado a lado, palco com a altura da tela. */
html[data-phone-landscape] .assist-grid {
    grid-template-columns: minmax(0, 1fr) 250px;
}

html[data-phone-landscape] .assist-stage {
    min-height: 0;

    height: calc(100vh - 150px);
}

html[data-phone-landscape] .assist-stage video {
    max-height: calc(100vh - 150px);
}

html[data-phone-landscape] .assist-log {
    height: 120px;
}

html[data-phone-landscape] .assist-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* O formulário e os blocos das telas públicas somem de verdade quando têm o
   atributo hidden (antes o display do .auth-form ganhava e o formulário ficava
   visível junto com a mensagem de sucesso: dois botões ao mesmo tempo). */
.auth-form[hidden],
.auth-card [hidden] {
    display: none !important;
}


/* ========================================================
   Páginas legais (Termos de uso)
   ======================================================== */

.legal-main {
    align-items: center;
    justify-content: flex-start;
}

.legal-card {
    width: 100%;
    max-width: 820px;

    padding: 34px 38px;

    border-radius: var(--radius);

    background:
        linear-gradient(160deg, rgba(34, 197, 94, 0.07), transparent 40%),
        var(--surface);

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

    box-shadow: var(--shadow);

    animation: h4dRise 0.55s var(--motion-ease, ease) backwards;
}

.legal-kicker {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 5px 12px;

    border-radius: 999px;

    background: rgba(34, 197, 94, 0.12);

    color: var(--spark);

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

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

.legal-kicker .icon {
    width: 14px;
    height: 14px;
}

.legal-head h1 {
    margin: 14px 0 6px;

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

.legal-updated {
    margin: 0 0 22px;

    font-size: 13.5px;

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

.legal-toc {
    margin-bottom: 26px;
    padding: 14px 18px;

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

    background: var(--bg);

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

.legal-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 6px 22px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.legal-toc a {
    color: var(--text-2);

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

    text-decoration: none;
}

.legal-toc a:hover {
    color: var(--spark);
}

.legal-section {
    margin-bottom: 26px;

    scroll-margin-top: 90px;
}

.legal-section h2 {
    margin: 0 0 10px;

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

.legal-section p,
.legal-section li {
    color: var(--text-2);

    line-height: 1.7;
}

.legal-section p {
    margin: 0 0 10px;
}

.legal-section ul {
    margin: 0 0 10px;
    padding-left: 22px;
}

.legal-section li {
    margin-bottom: 6px;
}

.legal-section li::marker {
    color: var(--brand);
}

.legal-section strong {
    color: var(--text);
}

.legal-section a,
.auth-terms-note a {
    color: var(--spark);
}

.legal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    gap: 10px;

    margin-top: 8px;
    padding-top: 20px;

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

.auth-terms-note {
    margin: 10px 0 0;

    font-size: 12.5px;

    color: var(--text-3);

    text-align: center;
}

@media (max-width: 640px) {

    .legal-card {
        padding: 22px 18px;
    }

    .legal-head h1 {
        font-size: 26px;
    }

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


/* Windows / Android: seletor e blocos por plataforma */
.platform-switch {
    display: inline-flex;
    gap: 4px;

    padding: 4px;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
}

.platform-switch button {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    height: 40px;
    padding: 0 16px;

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

    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: var(--cur-link);

    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.platform-switch button .icon {
    width: 20px;
    height: 20px;
}

.platform-switch button:hover {
    background: rgba(255, 255, 255, 0.06);
}

.platform-switch button[aria-selected="true"] {
    color: #04120a;

    background: linear-gradient(180deg, #34d26e, #16a34a);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
}

.get-hero .platform-switch {
    margin: 4px 0 18px;
}

body[data-platform="android"] [data-platform-only="windows"],
body[data-platform="windows"] [data-platform-only="android"] {
    display: none;
}

[data-platform-only] {
    animation: platform-in 0.4s ease both;
}

@keyframes platform-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.platform-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;

    margin: 24px 0 8px;
}

.platform-bar-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;

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

.download-icon .icon {
    width: 30px;
    height: 30px;
}

.download-icon-android {
    color: #fff;
}

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

    [data-platform-only] {
        animation: none;
    }
}

/* Sessão com um celular Android: segunda barra (entre o vídeo e a barra de baixo), só ícones */
.android-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 24px;

    min-height: 52px;
    padding: 6px 16px;

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

    flex-shrink: 0;
}

.android-bar[hidden] {
    display: none;
}

.android-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.android-end {
    gap: 12px;
}

.android-bar button[data-cmd] {
    display: grid;
    place-items: center;

    width: 44px;
    height: 40px;

    padding: 0;

    color: var(--text-2);

    background: none;
    border: 0;
    border-radius: 10px;
    cursor: var(--cur-link);

    transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.android-bar button[data-cmd] .icon {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.2s var(--motion-ease, ease);
}

/* Como o menu do site: o ícone clareia, sobe e cresce. */
.android-bar button[data-cmd]:hover {
    color: white;
}

.android-bar button[data-cmd]:hover .icon {
    transform: translateY(-2px) scale(1.12);
}

.android-bar button[data-cmd]:active .icon {
    transform: scale(0.94);
}

.android-bar button[data-cmd]:focus-visible {
    outline: 2px solid var(--spark);
    outline-offset: 2px;
}

/* Sem controle liberado, só o volume responde. */
.android-bar[data-control="off"] button[data-cmd]:not([data-cmd^="volume"]) {
    opacity: 0.38;
}

.android-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 12px;

    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;

    border-radius: 999px;
}

.android-chip .icon {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.android-chip[data-state="on"] {
    color: var(--spark);

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

.android-chip[data-state="off"] {
    color: #fbbf24;

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

.android-ask {
    height: 34px;
    padding: 0 14px;

    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 600;

    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 999px;
    cursor: var(--cur-link);

    transition: background 0.2s ease, transform 0.2s ease;
}

.android-ask:hover {
    background: rgba(34, 197, 94, 0.2);
    transform: translateY(-1px);
}

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

    .android-bar button[data-cmd]:hover .icon,
    .android-ask:hover {
        transform: none;
    }
}

/* Tela cheia: barra do Android fixa embaixo, sempre visível. */
.android-bar.android-floating {
    position: absolute;
    left: 50%;
    bottom: 14px;

    z-index: 9;

    max-width: calc(100% - 96px);
    min-height: 0;
    padding: 6px 14px;

    background: rgba(9, 14, 11, 0.9);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);

    transform: translateX(-50%);
}

.android-bar button[data-action] {
    display: grid;
    place-items: center;

    width: 44px;
    height: 40px;

    padding: 0;

    color: var(--text-2);

    background: none;
    border: 0;
    border-radius: 10px;
    cursor: var(--cur-link);

    transition: color 0.2s ease;
}

.android-bar button[data-action] .icon {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.2s ease;
}

.android-bar button[data-action]:hover {
    color: white;
}

.android-bar button[data-action]:hover .icon {
    transform: translateY(-2px) scale(1.12);
}

.android-bar button.flash {
    animation: android-flash 0.5s ease;
}

@keyframes android-flash {
    0% { color: var(--spark); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    100% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
}

.android-ask[hidden] {
    display: none;
}

.android-bar {
    position: relative;
}

.android-note {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);

    padding: 6px 14px;

    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;

    color: #052e16;
    background: var(--spark);
    border-radius: 999px;
    box-shadow: 0 10px 24px -10px rgba(34, 197, 94, 0.7);

    transform: translateX(-50%);
    animation: android-note 2.2s ease forwards;
    pointer-events: none;
}

.android-bar.android-floating {
    position: absolute;
}

@keyframes android-note {
    0% { opacity: 0; transform: translate(-50%, 6px); }
    12%, 80% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -4px); }
}

.android-terms {
    color: var(--text-2);

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

.android-terms[hidden] {
    display: none;
}

/* ---------- Barra de cima do Android: só navegação, com o nome que abre ao passar o mouse ---------- */
.android-nav-group {
    gap: 6px;
}

.android-bar button.android-nav {
    display: inline-flex;
    align-items: center;
    gap: 0;

    width: auto;
    height: 40px;
    padding: 0 11px;

    color: var(--text-2);

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: var(--cur-link);

    transition: color 0.2s ease, background 0.25s ease, border-color 0.25s ease, gap 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
}

.android-nav .icon {
    width: 22px;
    height: 22px;

    flex: none;

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

.android-nav-label {
    max-width: 0;

    overflow: hidden;

    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;

    opacity: 0;

    transition: max-width 0.28s ease, opacity 0.2s ease;
}

/* Passa o mouse: o botão abre para o lado, empurra os vizinhos e mostra o nome. */
.android-bar button.android-nav:hover,
.android-bar button.android-nav:focus-visible {
    gap: 8px;
    padding: 0 16px 0 12px;

    color: white;

    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 8px 22px -10px rgba(34, 197, 94, 0.7);
}

.android-nav:hover .android-nav-label,
.android-nav:focus-visible .android-nav-label {
    max-width: 90px;

    opacity: 1;
}

.android-nav:active {
    transform: scale(0.97);
}

/* ---------- Barra de baixo: relevo no hover, como o menu do site ---------- */
.session-dock .dock-btn .icon {
    transition: transform 0.2s ease;
}

.session-dock .dock-btn:hover:not(:disabled) {
    color: white;

    background: none;
}

.session-dock .dock-btn:hover:not(:disabled) .icon {
    transform: translateY(-2px) scale(1.12);
}

.session-dock .dock-btn:active:not(:disabled) .icon {
    transform: scale(0.94);
}

.session-dock .dock-btn.dock-danger:hover:not(:disabled) {
    color: #fca5a5;
}

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

/* Sem suporte no aplicativo Android (ainda): fica fora da barra. */
body[data-agent-platform="android"] #blockInputBtn {
    display: none !important;
}

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

    .session-dock .dock-btn:hover:not(:disabled) .icon {
        transform: none;
    }

    .android-nav-label {
        transition: none;
    }
}


/* ============================================================
   Sessão: botão Painel no topo e teste de velocidade
   ============================================================ */

.panel-link {
    text-decoration: none;
}

.session-bar-right > .panel-link {
    padding: 0 12px 0 11px;
}

@media (max-width: 560px) {

    .panel-link-text {
        display: none;
    }

    .session-bar-right > .panel-link {
        width: 36px;
        padding: 0;
        justify-content: center;
    }
}


.speed-list {
    width: 316px;
}

.speed-gauge-wrap {
    position: relative;

    padding: 4px 8px 0;
}

.speed-gauge {
    display: block;

    width: 100%;
    height: auto;
}

.speed-arc-bg,
.speed-arc {
    fill: none;

    stroke-width: 11;
    stroke-linecap: round;
}

.speed-arc-bg {
    stroke: rgba(255, 255, 255, 0.07);
}

.speed-arc {
    stroke: var(--brand);

    stroke-dasharray: 0 400;

    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.55));

    transition: stroke-dasharray 0.35s ease-out;
}

.speed-list.is-up .speed-arc {
    stroke: #38bdf8;

    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.55));
}

.speed-ticks text {
    fill: var(--text-3);

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

    text-anchor: middle;
}

/* ---- O guerreiro: transforma conforme a velocidade (data-form 0..3) ---- */

.hero {
    --hair: #17171d;
    --iris: #1b1b22;
    --skin: #f2c29b;
    --aura: 0;
    --bolts: 0;
    --rings: 0;
}

.speed-list[data-form="1"] .hero {
    --hair: #23232b;
    --aura: 0.35;
    --bolts: 0.55;
}

.speed-list[data-form="2"] .hero {
    --hair: #ffd23f;
    --iris: #19c7b8;
    --aura: 0.95;
    --bolts: 1;
}

.speed-list[data-form="3"] .hero {
    --hair: #7dff4d;
    --iris: transparent;
    --aura: 1;
    --bolts: 1;
    --rings: 1;
}

/* Lendário: aura verde, corpo maior, olhos em branco. */
.speed-list[data-form="3"] .hero-aura path {
    fill: url(#heroAuraGreen);
}

.speed-list[data-form="3"] .hero-body {
    transform: scale(1.16, 1.04);

    transform-origin: 100px 100px;
}

.speed-list[data-form="3"] .hero-eye {
    fill: #e9ffd0;
}

.speed-list[data-form="3"] .hero-bolts {
    stroke: #d6ff9e;
}

.speed-list[data-form="3"] .hero-ring {
    stroke: #8dff5c;
}

.hero-aura {
    opacity: var(--aura);

    transform-origin: 100px 100px;

    transition: opacity 0.5s ease;

    animation: heroFlame 0.9s ease-in-out infinite;
}

.speed-list[data-form="3"] .hero-aura {
    transform: scale(1.18);

    animation-duration: 0.55s;
}

.aura-side {
    animation: heroFlameSide 0.7s ease-in-out infinite alternate;

    transform-origin: 100px 100px;
}

.hero-ring {
    fill: none;
    stroke: #ffe680;
    stroke-width: 1.6;

    opacity: 0;

    transform-origin: 100px 74px;
}

.speed-list[data-form="3"] .hero-ring {
    animation: heroRing 1.3s ease-out infinite;
}

.speed-list[data-form="3"] .hero-ring.r2 {
    animation-delay: 0.65s;
}

.hero-bolts {
    fill: none;
    stroke: #fff6a8;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;

    opacity: 0;
}

.speed-list[data-form="1"] .hero-bolts {
    stroke: #cfe8ff;
    stroke-width: 1.2;

    animation: heroZap 1.6s steps(1) infinite;
}

.speed-list[data-form="2"] .hero-bolts,
.speed-list[data-form="3"] .hero-bolts {
    animation: heroZap 0.8s steps(1) infinite;
}

.speed-list[data-form="3"] .hero-bolts {
    animation-duration: 0.45s;
}

.hero-body {
    fill: #1f4f9e;

    stroke: #0f2a57;
    stroke-width: 1;
}

.hero-collar {
    fill: none;
    stroke: #f2a33a;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-neck {
    fill: #dba87f;
}

.hero-face {
    fill: var(--skin);

    stroke: rgba(0, 0, 0, 0.25);
    stroke-width: 0.8;
}

.hero-hair {
    fill: var(--hair);

    stroke: rgba(0, 0, 0, 0.45);
    stroke-width: 1.1;
    stroke-linejoin: round;

    transform-origin: 100px 62px;

    transition: fill 0.5s ease;
}

.speed-list[data-form="2"] .hero-hair {
    animation: heroHair 0.7s ease-in-out infinite alternate;

    filter: drop-shadow(0 0 4px rgba(255, 210, 63, 0.9));
}

.speed-list[data-form="3"] .hero-hair {
    animation: heroHairLegend 0.5s ease-in-out infinite alternate;

    filter: drop-shadow(0 0 6px rgba(125, 255, 77, 0.95));
}

.hero-eye {
    fill: #fff;
}

.hero-iris {
    fill: var(--iris);

    transition: fill 0.4s ease;
}

.hero-brow,
.hero-mouth {
    fill: none;
    stroke: #1a1a22;
    stroke-width: 2;
    stroke-linecap: round;
}

.hero-mouth {
    stroke-width: 1.4;
}

/* Clarão a cada transformação. */
.speed-flash {
    position: absolute;

    inset: 0;

    border-radius: 12px;

    background: radial-gradient(circle at 50% 62%, rgba(255, 244, 168, 0.95), rgba(255, 210, 63, 0.35) 45%, transparent 70%);

    opacity: 0;

    pointer-events: none;
}

.speed-flash.go {
    animation: heroFlash 0.55s ease-out;
}

.speed-list[data-form="3"] .speed-flash {
    background: radial-gradient(circle at 50% 62%, rgba(226, 255, 190, 0.95), rgba(125, 255, 77, 0.4) 45%, transparent 70%);
}

.speed-form {
    margin-top: 2px;

    text-align: center;

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

    letter-spacing: 0.05em;

    color: var(--text-3);

    transition: color 0.4s ease;
}

.speed-list[data-form="2"] .speed-form {
    color: #ffd23f;

    text-shadow: 0 0 10px rgba(255, 210, 63, 0.55);
}

.speed-list[data-form="2"] .speed-arc {
    stroke: #ffd23f;

    filter: drop-shadow(0 0 7px rgba(255, 210, 63, 0.75));
}

.speed-list[data-form="3"] .speed-arc {
    stroke: #7dff4d;

    filter: drop-shadow(0 0 8px rgba(125, 255, 77, 0.85));
}

.speed-list[data-form="3"] .speed-form {
    color: #7dff4d;

    text-shadow: 0 0 12px rgba(125, 255, 77, 0.65);
}

@keyframes heroFlame {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(0.97, 1.08); }
}

@keyframes heroFlameSide {
    from { transform: scale(1, 0.94) translateY(2px); }
    to { transform: scale(1.04, 1.1) translateY(-2px); }
}

@keyframes heroHair {
    from { transform: scale(1, 1) rotate(-0.8deg); }
    to { transform: scale(1.03, 1.07) rotate(0.8deg); }
}

@keyframes heroHairLegend {
    from { transform: scale(1.1, 1.18) rotate(-1.2deg); }
    to { transform: scale(1.16, 1.3) rotate(1.2deg); }
}

@keyframes heroRing {
    0% { transform: scale(0.7); opacity: 0.85; }
    100% { transform: scale(2.7); opacity: 0; }
}

@keyframes heroZap {
    0%, 55%, 100% { opacity: 0; }
    10%, 30% { opacity: var(--bolts); }
    20% { opacity: 0.15; }
    40% { opacity: var(--bolts); }
}

@keyframes heroFlash {
    0% { opacity: 0; }
    18% { opacity: 1; }
    100% { opacity: 0; }
}

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

    .hero-aura,
    .aura-side,
    .hero-hair,
    .hero-ring,
    .hero-bolts,
    .speed-flash.go {
        animation: none !important;
    }

    .speed-list[data-form="2"] .hero-bolts,
    .speed-list[data-form="3"] .hero-bolts {
        opacity: 0.8;
    }
}

.speed-readout {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 2px;
}

.speed-now {
    font-size: 30px;
    font-weight: 800;

    font-variant-numeric: tabular-nums;

    line-height: 1;
}

.speed-unit {
    margin-top: 2px;

    color: var(--text-3);

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

.speed-phase {
    margin-top: 2px;

    text-align: center;

    color: var(--text-2);

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

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

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

    gap: 6px;

    padding: 8px 4px 2px;
}

.speed-tile {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 8px 4px;

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

    background: rgba(255, 255, 255, 0.03);
}

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

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

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

.speed-tile b {
    margin-top: 2px;

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

    font-variant-numeric: tabular-nums;
}

.speed-tile em {
    color: var(--text-3);

    font-size: 10px;
    font-style: normal;
}

.speed-jitter {
    padding: 6px 10px 0;

    text-align: center;

    color: var(--text-3);

    font-size: 11px;
}

.speed-jitter b {
    color: var(--text-2);
}

.speed-bar {
    height: 3px;

    margin: 10px 8px 2px;

    border-radius: 3px;

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

    overflow: hidden;
}

.speed-bar i {
    display: block;

    height: 100%;
    width: 0;

    background: var(--brand);

    transition: width 0.4s linear;
}

.speed-run {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    width: calc(100% - 8px);
    min-height: 40px;

    margin: 6px 4px 2px;

    border: 1px solid rgba(34, 197, 94, 0.5);
    border-radius: 12px;

    background: rgba(34, 197, 94, 0.14);

    color: #d9f7e4;

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

    cursor: var(--cur-link);
}

.speed-run:hover {
    background: rgba(34, 197, 94, 0.22);
}

.speed-list.is-running .speed-run {
    border-color: rgba(239, 68, 68, 0.5);

    background: rgba(239, 68, 68, 0.12);

    color: #fecaca;
}

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

    .speed-arc,
    .speed-needle,
    .speed-bar i {
        transition: none;
    }
}


/* ---- Guerreiro v2: corpo musculoso, cabelo em camadas ---- */

.hero {
    --skin: #f0bf96;
    --skin-dark: #d49a72;
    --fur: #cfae7c;
}

.hero-body {
    fill: #1f4f9e;

    stroke: #0f2a57;
    stroke-width: 1;

    transition: fill 0.5s ease;
}

/* Sem camisa na forma lendária. */
.speed-list[data-form="3"] .hero-body {
    fill: var(--skin-dark);

    stroke: rgba(0, 0, 0, 0.35);
}

.hero-muscle {
    fill: none;
    stroke: rgba(0, 0, 0, 0.42);
    stroke-width: 1.2;
    stroke-linecap: round;

    opacity: 0;

    transition: opacity 0.5s ease;
}

.speed-list[data-form="2"] .hero-muscle {
    opacity: 0.35;
}

.speed-list[data-form="3"] .hero-muscle {
    opacity: 1;
}

.scar {
    fill: none;
    stroke: #9a4141;
    stroke-width: 1.2;
    stroke-linecap: round;
}

.hero-muscle .scar {
    opacity: 0.8;
}

.hero-fur {
    fill: var(--fur);

    stroke: #7b5d3a;
    stroke-width: 0.9;
    stroke-linejoin: round;
}

.hero-neck {
    fill: var(--skin-dark);
}

.hero-ear {
    fill: var(--skin-dark);

    stroke: rgba(0, 0, 0, 0.25);
    stroke-width: 0.6;
}

.hero-face {
    fill: var(--skin);

    stroke: rgba(0, 0, 0, 0.3);
    stroke-width: 0.9;
}

.hero-shade {
    fill: rgba(120, 60, 20, 0.18);
}

.hero-nose {
    fill: none;
    stroke: rgba(110, 55, 25, 0.7);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-eye {
    fill: #fff;

    stroke: rgba(0, 0, 0, 0.55);
    stroke-width: 0.6;
    stroke-linejoin: round;
}

.hero-brow {
    stroke-width: 2.8;
}

.hero-hair.back {
    filter: brightness(0.82);
}

.speed-list[data-form="2"] .hero-hair.back {
    filter: brightness(0.9) drop-shadow(0 0 3px rgba(255, 210, 63, 0.8));
}

.speed-list[data-form="3"] .hero-hair.back {
    filter: brightness(0.92) drop-shadow(0 0 5px rgba(125, 255, 77, 0.9));
}

.hero-shine {
    fill: rgba(255, 255, 255, 0.28);
}

.speed-list[data-form="0"] .hero-shine {
    fill: rgba(255, 255, 255, 0.1);
}

.aura-side.s2 {
    animation-duration: 0.55s;
    animation-direction: alternate-reverse;
}


/* ---- Teste de velocidade: botão ⓘ e legenda das transformações ---- */

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

    gap: 8px;
}

.speed-info-btn {
    flex: none;

    width: 22px;
    height: 22px;

    margin-right: 6px;

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

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

    color: var(--text-2);

    font: inherit;
    font-size: 12px;
    font-weight: 800;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;

    line-height: 1;

    cursor: var(--cur-link);
}

.speed-info-btn:hover,
.speed-info-btn[aria-expanded="true"] {
    border-color: var(--brand);

    color: #fff;

    background: rgba(34, 197, 94, 0.18);
}

.speed-legend {
    margin: 2px 4px 6px;
    padding: 10px 10px 8px;

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

    background: rgba(255, 255, 255, 0.03);
}

.speed-legend[hidden] {
    display: none;
}

.speed-legend-intro {
    margin: 0 0 8px;

    color: var(--text-3);

    font-size: 11.5px;
    line-height: 1.45;
}

.speed-legend ul {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.speed-legend li {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;

    gap: 8px;

    font-size: 12px;

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

.speed-legend li b {
    color: var(--text);

    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.speed-legend .chip {
    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #2a2a33;

    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.speed-legend li[data-form="1"] .chip {
    background: #cfe8ff;

    box-shadow: 0 0 6px rgba(207, 232, 255, 0.8);
}

.speed-legend li[data-form="2"] .chip {
    background: #ffd23f;

    box-shadow: 0 0 7px rgba(255, 210, 63, 0.85);
}

.speed-legend li[data-form="3"] .chip {
    background: #7dff4d;

    box-shadow: 0 0 7px rgba(125, 255, 77, 0.9);
}

/* A forma atual fica destacada na lista. */
.speed-list[data-form="0"] .speed-legend li[data-form="0"],
.speed-list[data-form="1"] .speed-legend li[data-form="1"],
.speed-list[data-form="2"] .speed-legend li[data-form="2"],
.speed-list[data-form="3"] .speed-legend li[data-form="3"] {
    color: var(--text);
    font-weight: 800;
}


.audio-diag {
    margin: -2px 10px 6px 42px;

    color: var(--text-3);

    font-size: 10.5px;
    font-variant-numeric: tabular-nums;

    line-height: 1.4;
}


/* ============================================================
   Celular na horizontal, em tela cheia: barra dividida nas duas laterais
   ============================================================ */

.session-stage.phone-split .session-dock.dock-floating {
    left: 6px;

    padding: 6px 4px;

    border-radius: 14px;
}

.session-stage.phone-split .session-dock.dock-floating.dock-right {
    left: auto;
    right: 6px;
}

/* A tela do computador fica entre as duas colunas, sem ícones por cima. */
.session-stage.phone-split > canvas#remoteScreen {
    width: calc(100% - 140px);
}

.session-stage.phone-split .dock-toggle {
    display: none;
}

.session-stage.phone-split .android-floating {
    display: none;
}

.rotate-hint {
    position: absolute;

    left: 50%;
    bottom: 22px;

    z-index: 12;

    max-width: calc(100% - 32px);

    padding: 10px 16px;

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

    background: rgba(9, 14, 11, 0.94);

    color: var(--text);

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

    text-align: center;

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

    transform: translateX(-50%);
}

.rotate-hint[hidden] {
    display: none;
}


/* Botão de velocidade do topo: só o ícone, sem borda. */
.auth-top .help-link.speed-link {
    justify-content: center;

    width: 38px;

    padding: 0;

    border-color: transparent;

    background: transparent;
}

.auth-top .help-link.speed-link:hover {
    background: rgba(255, 255, 255, 0.06);
}


/* Botões do topo (velocidade, ajuda e idioma): sem borda. */
.help-link,
.lang-button {
    border-color: transparent;
}

.help-link:hover,
.lang-button:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Telas estreitas: os botões do topo (entrar, velocidade, ajuda, idioma) ficam mais juntos. */
@media (max-width: 420px) {

    .auth-top {
        gap: 4px;
    }
}

/* Entrar fica depois do idioma, com o ícone de usuário. */
.auth-top .auth-enter,
.auth-top .help-enter {
    margin-left: 0;
}

.auth-top .auth-enter + .auth-help {
    margin-left: auto;
}

/* Ajuda do visitante em tela estreita: "Entrar" só com o ícone, para não passar da tela. */
@media (max-width: 560px) {

    .topbar-actions .auth-enter span {
        display: none;
    }

    .topbar-actions .auth-enter {
        padding: 0 12px;
    }
}

/* Telas muito estreitas (320 px): topo do visitante só com o símbolo da logo, para caber os botões. */
@media (max-width: 360px) {

    .auth-top .logo-word,
    .topbar.public-top .logo-word,
    .topbar.public-top .brand-subtitle {
        display: none;
    }

    .auth-top,
    .topbar.public-top {
        gap: 2px;
    }
}


/* ============================================================
   Botões do topo uniformes: tudo redondo, mesmo tamanho, mesmo ícone
   ============================================================ */

.main-nav a,
.topbar-actions .help-link,
.auth-top .help-link,
.lang-button,
.auth-top .auth-enter,
.topbar-actions .auth-enter {
    height: 38px;

    border-radius: 999px;
}

.main-nav a .icon,
.help-link .icon,
.lang-button .icon,
.auth-top .auth-enter .icon,
.topbar-actions .auth-enter .icon {
    width: 18px;
    height: 18px;
}

.topbar.fit-3 .main-nav a {
    width: 38px;
}

.main-nav a:hover,
.help-link:hover,
.lang-button:hover {
    background: rgba(255, 255, 255, 0.07);
}

/* Idioma: só o globo, sem fundo nem borda (a sigla e a setinha ficam só na lista). */
.lang-button {
    justify-content: center;

    gap: 6px;

    width: auto;
    min-width: 38px;

    padding: 0 10px;

    border-color: transparent;

    background: transparent;
}

.lang-button .chevron {
    display: none;
}

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

    padding: 0;
}

.topbar.fit-4 .lang-button {
    height: 32px;

    padding: 0 8px;
}

/* Telas bem estreitas: o globo continua (é o único sinal do idioma). */
.topbar.fit-5 .lang-button > .icon:first-child {
    display: inline-block;
}

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

.topbar.fit-5 .lang-button {
    height: 30px;

    padding: 0 6px;
}


/* ============================================================
   Celular: botão "Menu" reúne a navegação (a logo mostra a escrita inteira)
   ============================================================ */

.mobile-menu-button,
.mobile-menu {
    display: none;
}

@media (max-width: 760px) {

    .topbar .main-nav,
    .topbar .speed-link,
    .topbar .brand-subtitle,
    .topbar .server-status {
        display: none;
    }

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

    .topbar {
        justify-content: space-between;
    }

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

        width: 38px;
        height: 38px;

        padding: 0;

        border: 0;
        border-radius: 999px;

        background: transparent;

        color: #c9d6ce;

        cursor: pointer;
    }

    .mobile-menu-button .icon {
        width: 18px;
        height: 18px;

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

    .mobile-menu-button[aria-expanded="true"] {
        background: var(--brand-soft);

        color: var(--spark);
    }

    .mobile-menu {
        position: fixed;
        right: 12px;
        left: auto;

        z-index: 90;

        display: flex;
        flex-direction: column;

        gap: 2px;

        min-width: 220px;
        max-width: calc(100vw - 24px);

        padding: 8px;

        border: 0;
        border-radius: 20px;

        background: rgba(12, 19, 15, 0.98);

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

    .mobile-menu[hidden] {
        display: none;
    }

    .mobile-menu a {
        display: flex;
        align-items: center;

        gap: 12px;

        height: 46px;

        padding: 0 14px 0 8px;

        border-radius: 999px;

        color: var(--text);

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

        text-decoration: none;
    }

    .mobile-menu a .icon {
        flex: none;

        width: 34px;
        height: 34px;

        padding: 8px;

        border-radius: 50%;

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

        color: var(--spark);
    }

    .mobile-menu a:hover,
    .mobile-menu a.active {
        background: rgba(34, 197, 94, 0.12);
    }
}

/* Computador: o topo logado é mais largo que o conteúdo, para o menu mostrar os nomes. */
@media (min-width: 761px) {

    .site-header .topbar {
        max-width: 1600px;
    }
}

/* Celular: tudo do topo sem borda e do mesmo tamanho (38 px; 34 px em telas menores). */
@media (max-width: 760px) {

    .topbar .account-button {
        justify-content: center;

        width: 38px;
        height: 38px;

        padding: 0;

        border: 0;

        background: transparent;
    }

    .topbar .account-button .account-name,
    .topbar .account-button .chevron {
        display: none;
    }

    .topbar .help-link,
    .topbar .lang-button,
    .topbar .mobile-menu-button {
        border: 0;
    }

    .topbar .help-link .icon,
    .topbar .lang-button .icon,
    .topbar .mobile-menu-button .icon {
        width: 18px;
        height: 18px;
    }

    .mobile-menu-button:hover,
    .topbar .account-button:hover {
        background: rgba(255, 255, 255, 0.07);
    }
}

@media (max-width: 380px) {

    .topbar .help-link,
    .topbar .account-button,
    .topbar .mobile-menu-button {
        width: 34px;
        height: 34px;
    }

    .topbar .lang-button {
        height: 34px;

        padding: 0 6px;
    }

    .topbar .brand,
    .topbar .topbar-actions {
        gap: 2px;
    }
}

@media (max-width: 340px) {

    .topbar .logo-word {
        display: none;
    }
}


/* ============================================================
   Menu do celular: botão flutuante embaixo, à esquerda (igual ao "Tópicos")
   ============================================================ */

@media (max-width: 760px) {

    .mobile-menu-button {
        position: fixed;
        left: 12px;
        bottom: calc(12px + var(--float-lift, 0px));

        z-index: 45;

        display: inline-flex;
        align-items: center;
        gap: 8px;

        width: auto;
        height: 42px;

        padding: 0 15px;

        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);
    }

    .mobile-menu-button .icon {
        width: 18px;
        height: 18px;

        color: var(--spark);
    }

    .mobile-menu-button:hover,
    .mobile-menu-button[aria-expanded="true"] {
        border-color: var(--brand);

        background: rgba(9, 14, 11, 0.94);

        color: var(--spark);
    }

    .mobile-menu-button.above-topics {
        bottom: calc(66px + var(--float-lift, 0px));
    }

    .mobile-menu {
        top: auto;
        right: auto;

        max-height: calc(100vh - 120px);

        overflow-y: auto;
    }
}

/* Visitante: só o primeiro botão da direita empurra o grupo (velocidade e ajuda ficam juntos). */
.auth-top .auth-help + .auth-help {
    margin-left: 0;
}

/* O desenho do medidor ocupa menos área que os outros ícones: leve aumento para parecer igual. */
.help-link.speed-link .icon,
.mobile-menu a .icon.is-gauge {
    /* O desenho do medidor fica 1 ponto acima do centro da caixa do ícone: sobe/desce para alinhar. */
    transform: translateY(0.8px) scale(1.1);
}

/* Telas muito estreitas (320 px): nomes e abas não podem ficar cortados. */
@media (max-width: 380px) {

    .row-card,
    .saved-row {
        column-gap: 10px;

        padding: 12px 10px;
    }

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

        justify-self: start;
    }

    .report-tab.slide-option {
        gap: 4px;

        padding: 0 6px;

        font-size: 12.5px;
    }

    .report-tab.slide-option .icon {
        width: 13px;
        height: 13px;
    }
}

/* Telas de entrada: o botão do Mark não cobre o fim da página e "Esqueci minha senha" tem área de toque. */
.auth-page .auth-link {
    padding-top: 8px;
    padding-bottom: 8px;
}

@media (max-width: 600px) {

    .auth-page .auth-main {
        padding-bottom: 92px;
    }
}

/* Topo logado mais compacto, para o nome ao lado do ícone de velocidade caber sem recolher os outros. */
@media (min-width: 761px) {

    .site-header .main-nav a {
        padding: 0 9px;
    }

    .site-header .topbar-actions .help-link {
        padding: 0 11px;
    }
}


/* ============================================================
   Menu sempre completo em telas largas: se não couber, desce para uma segunda linha
   ============================================================ */

@media (min-width: 761px) {

    .topbar.fit-wrap {
        flex-wrap: wrap;

        height: auto;

        row-gap: 4px;

        padding-top: 12px;
        padding-bottom: 8px;
    }

    .topbar.fit-wrap .main-nav {
        order: 3;

        flex: 1 0 100%;

        justify-content: space-between;

        margin: 0;
    }

    .topbar.fit-wrap .main-nav a {
        padding: 0 7px;
    }

    .topbar.fit-wrap .topbar-actions {
        margin-left: auto;
    }
}

/* Rótulos dos cartões de números: quebram de linha em vez de ficarem cortados. */
.stat-label {
    overflow: visible;

    text-overflow: clip;
    white-space: normal;

    line-height: 1.3;
}

/* ============================================================
   Cabeçalho e rodapé com a mesma altura e o mesmo espaço lateral (uniformes)
   ============================================================ */

:root {
    --bar-h: 76px;
    --edge-gap: 16px;
}

@media (max-width: 600px) {

    :root {
        --bar-h: 64px;
    }
}

.site-footer,
.st-page .site-footer {
    box-sizing: border-box;

    justify-content: center;

    min-height: var(--bar-h);

    padding: 12px 32px;
}

@media (max-width: 600px) {

    .site-footer,
    .st-page .site-footer {
        padding: 12px 16px;
    }
}

/* O indicador de servidor perde o texto antes de o menu precisar quebrar de linha. */
.topbar.fit-1 .server-status #serverStatusText {
    display: none;
}

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

/* Topo logado: espaços internos um pouco menores para a barra de Dispositivos (com o indicador de servidor)
   caber numa linha em telas de 1366 px, com a barra de rolagem. */
@media (min-width: 761px) {

    .site-header .topbar {
        gap: 12px;
    }

    .site-header .topbar-actions {
        gap: 8px;
    }

    .site-header .main-nav a {
        padding: 0 8px;
    }
}

/* Botão Menu do celular: só as três linhas; o nome "Menu" aparece ao passar o mouse, tocar ou abrir. */
@media (max-width: 760px) {

    .mobile-menu-button {
        gap: 0;

        width: auto;
        min-width: 42px;
        height: 42px;

        padding: 0;

        justify-content: center;

        overflow: hidden;
    }

    .mobile-menu-button span {
        max-width: 0;

        overflow: hidden;

        opacity: 0;

        white-space: nowrap;

        transition: max-width 0.22s ease, opacity 0.18s ease, margin 0.22s ease;
    }

    .mobile-menu-button:hover,
    .mobile-menu-button:focus-visible,
    .mobile-menu-button[aria-expanded="true"] {
        gap: 8px;

        padding: 0 15px;
    }

    .mobile-menu-button:hover span,
    .mobile-menu-button:focus-visible span,
    .mobile-menu-button[aria-expanded="true"] span {
        max-width: 80px;

        opacity: 1;
    }
}

/* Menu do celular do mesmo tamanho do botão do Mark (56 px; 52 px em telas pequenas) e na mesma linha de base.
   O "Tópicos" fica centralizado nessa mesma linha. */
@media (max-width: 760px) {

    .mobile-menu-button {
        left: 24px;
        bottom: calc(24px + var(--float-lift, 0px));

        min-width: 56px;
        height: 56px;
    }

    .mobile-menu-button .icon {
        width: 22px;
        height: 22px;
    }

    .help-topics {
        left: 24px;
        bottom: calc(31px + var(--float-lift, 0px));
    }

    .mobile-menu-button.above-topics {
        bottom: calc(83px + var(--float-lift, 0px));
    }
}

@media (max-width: 600px) {

    .mobile-menu-button {
        left: 16px;
        bottom: calc(16px + var(--float-lift, 0px));

        min-width: 52px;
        height: 52px;
    }

    .help-topics {
        left: 16px;
        bottom: calc(21px + var(--float-lift, 0px));
    }

    .mobile-menu-button.above-topics {
        bottom: calc(73px + var(--float-lift, 0px));
    }
}


/* Cabelo do guerreiro: fios escuros e brilhos nas mechas (estilo Super Saiyajin). */
.hero-strand {
    fill: none;
    stroke: rgba(0, 0, 0, 0.32);
    stroke-width: 1;
    stroke-linecap: round;
}

.speed-list[data-form="2"] .hero-strand {
    stroke: rgba(150, 90, 0, 0.45);
}

.speed-list[data-form="3"] .hero-strand {
    stroke: rgba(20, 110, 20, 0.5);
}

.hero-hair {
    stroke-width: 1.2;
}


/* Rosto do guerreiro: olhos grandes e expressivos (estilo anime). */
.hero-eye {
    stroke: rgba(0, 0, 0, 0.35);
    stroke-width: 0.5;
}

.hero-pupil {
    fill: #07201c;
}

.speed-list[data-form="3"] .hero-pupil,
.speed-list[data-form="3"] .hero-glint {
    fill: transparent;
}

.hero-glint {
    fill: rgba(255, 255, 255, 0.95);
}

.hero-lid {
    fill: none;
    stroke: #14141a;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.hero-brow-fill {
    fill: #15151b;
}

.speed-list[data-form="2"] .hero-brow-fill {
    fill: #7a4b00;
}

.hero-blush {
    fill: rgba(224, 112, 96, 0.22);
}

.hero-nose {
    fill: none;
    stroke: rgba(120, 70, 40, 0.55);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-mouth {
    stroke: #7a2e22;
    stroke-width: 1.3;
}


/* ============================================================
   Forma lendária (Broly): grito, olhar furioso e tronco enorme
   ============================================================ */

.hero-mouth-open,
.hero-tongue,
.hero-teeth,
.hero-anger,
.hero-body-big {
    display: none;
}

.hero-mouth-open {
    fill: #4b0a0a;

    stroke: #1a0505;
    stroke-width: 1;
    stroke-linejoin: round;
}

.hero-tongue {
    fill: #d4636e;
}

.hero-teeth {
    fill: #fff;

    stroke: rgba(0, 0, 0, 0.35);
    stroke-width: 0.4;
}

.hero-anger {
    fill: none;
    stroke: rgba(70, 20, 10, 0.55);
    stroke-width: 1;
    stroke-linecap: round;
}

.hero-body-big {
    fill: var(--skin-dark);

    stroke: rgba(0, 0, 0, 0.45);
    stroke-width: 1;
    stroke-linejoin: round;
}

.speed-list[data-form="3"] .hero-mouth-open,
.speed-list[data-form="3"] .hero-tongue,
.speed-list[data-form="3"] .hero-teeth,
.speed-list[data-form="3"] .hero-anger,
.speed-list[data-form="3"] .hero-body-big {
    display: inline;
}

/* No lugar do corpo comum entra o tronco largo, de ombros arredondados. */
.speed-list[data-form="3"] .hero-body {
    display: none;
}

.speed-list[data-form="3"] .hero-mouth {
    display: none;
}

/* Sobrancelhas franzidas e olhos estreitos. */
.speed-list[data-form="3"] .hero-brow-fill,
.speed-list[data-form="3"] .hero-eye,
.speed-list[data-form="3"] .hero-lid {
    transform-box: fill-box;
    transform-origin: center;
}

.speed-list[data-form="3"] .hero-brow-fill.l {
    transform: translateY(1.6px) rotate(10deg) scaleY(1.7);
}

.speed-list[data-form="3"] .hero-brow-fill.r {
    transform: translateY(1.6px) rotate(-10deg) scaleY(1.7);
}

.speed-list[data-form="3"] .hero-brow-fill {
    fill: #16301a;
}

.speed-list[data-form="3"] .hero-eye {
    transform: scaleY(0.78);
}

/* Corpo largo e musculoso, com traços do trapézio e do peitoral. */
.speed-list[data-form="3"] .hero-muscle {
    transform: scale(1.22, 1.04);
    transform-origin: 100px 100px;
}

.speed-list[data-form="3"] .hero-muscle .trap {
    stroke-width: 1.4;
}

.speed-list[data-form="3"] .hero-fur {
    transform: scale(1.14, 1.04);
    transform-origin: 100px 100px;
}

.speed-list[data-form="3"] .hero-neck {
    transform: scale(1.25, 1);
    transform-origin: 100px 78px;
}

/* Luz verde da aura nas bordas do corpo e do rosto. */
.speed-list[data-form="3"] .hero-face,
.speed-list[data-form="3"] .hero-body-big {
    filter: drop-shadow(0 0 2.5px rgba(125, 255, 77, 0.65));
}

/* Guerreiro do teste de velocidade: uma imagem por estágio (forma 0 e 1 = Estágio 1, forma 2 = Estágio 2, forma 3 = Estágio 3). */
.hero-img {
    display: none;
}

.speed-list[data-form="0"] .hero-img-1,
.speed-list[data-form="1"] .hero-img-1 {
    display: inline;
}

.speed-list[data-form="2"] .hero-img-2 {
    display: inline;
}

.speed-list[data-form="3"] .hero-img-3 {
    display: inline;
}


/* ============================================================
   Equipes: lista, logotipo, membros e formulários
   ============================================================ */

.team-section {
    display: grid;
    gap: 16px;
}

.team-status {
    min-height: 1.4em;
    margin: 0;
    color: var(--brand);
    font-size: 14px;
}

.team-status.is-error {
    color: #f87171;
}

.team-empty,
.team-hint {
    margin: 0;
    color: var(--text-2);
    font-size: 14px;
}

.team-subtitle {
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: 800;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.team-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px;

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

    background: var(--surface);
    color: inherit;

    text-align: left;
    cursor: pointer;
}

.team-card.is-selected {
    border-color: var(--brand);
}

.team-card-body {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.team-card-name {
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-card-meta {
    color: var(--text-2);
    font-size: 13px;
}

.team-logo {
    display: grid;
    place-items: center;
    flex: none;

    width: 56px;
    height: 56px;

    border-radius: 16px;

    background: var(--avatar-bg);
    background-position: center;
    background-size: cover;

    color: var(--brand);

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

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

.team-logo.has-logo {
    color: transparent;
}

.team-logo-small {
    width: 44px;
    height: 44px;

    border-radius: 12px;

    font-size: 15px;
}

.team-tag {
    flex: none;
    padding: 4px 10px;

    border-radius: 999px;

    background: var(--surface-2);
    color: var(--text-2);

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

.team-tag.is-admin {
    color: #facc15;
}

.team-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.team-detail-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.team-detail-title h3 {
    margin: 0;
    overflow-wrap: anywhere;
}

.team-role {
    margin: 0;
    color: var(--text-2);
    font-size: 14px;
}

.team-form,
.team-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.team-form .auth-field {
    flex: 1 1 200px;
}

.team-members {
    display: grid;
    gap: 8px;
}

.team-member {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;

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

    background: var(--surface);
}

.team-member-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 180px;
}

.team-member-name {
    overflow-wrap: anywhere;
    font-weight: 700;
}

.team-member-email {
    overflow-wrap: anywhere;
    color: var(--text-2);
    font-size: 13px;
}

.team-remove {
    margin-left: auto;
}


/* Equipes: cabeçalho com logotipo grande, editável ao clicar */

.team-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.team-hero-text {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 220px;
}

.team-hero-text h3 {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 22px;
}

.team-site {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--brand);
    font-size: 14px;
}

.team-logo-edit {
    position: relative;
    flex: none;
    padding: 0;

    border: 0;
    border-radius: 22px;

    background: none;
    cursor: pointer;
}

.team-logo-edit:disabled {
    cursor: default;
}

.team-logo-large {
    width: 112px;
    height: 112px;

    border-radius: 22px;

    font-size: 32px;
}

.team-logo-overlay {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;

    border-radius: 22px;

    background: rgba(3, 10, 6, 0.72);
    color: #fff;

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

    opacity: 0;
    transition: opacity 0.2s ease;
}

.team-logo-edit:not(:disabled):hover .team-logo-overlay,
.team-logo-edit:not(:disabled):focus-visible .team-logo-overlay {
    opacity: 1;
}

.team-logo-overlay .icon {
    width: 20px;
    height: 20px;
}

@media (max-width: 480px) {
    .team-logo-large {
        width: 96px;
        height: 96px;
    }
}


/* Equipes: visual limpo e premium (cartões, grade de formulário, campos uniformes) */

.team-section {
    gap: 22px;
    padding: 28px;

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

    background: var(--surface);
}

.team-subtitle {
    margin: 0;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.team-hint,
.team-empty,
.team-site {
    line-height: 1.5;
}

.team-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

.team-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: end;
}

.team-form .auth-field {
    margin: 0;
}

.team-form .auth-field input,
.team-form .auth-field select {
    height: 44px;
}

.team-form > .btn,
.team-form > .btn-primary {
    grid-column: 1 / -1;
    justify-self: end;
}

.team-form .btn > .icon {
    display: none;
}

.team-form .btn {
    height: 44px;
    padding: 0 20px;
}

.team-found {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;

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

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

.team-found .btn {
    height: 44px;
}

.team-member {
    padding: 14px 16px;

    border-color: var(--line);
    border-radius: 14px;

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

.team-remove {
    height: 36px;
    padding: 0 14px;
}

.team-card {
    padding: 16px;
    border-radius: 16px;
}

.team-hero {
    padding-bottom: 6px;
}

.team-status {
    min-height: 0;
}

.team-status:empty {
    display: none;
}

@media (max-width: 560px) {
    .team-section {
        padding: 20px;
        border-radius: 16px;
    }

    .team-form > .btn,
    .team-form > .btn-primary {
        width: 100%;
        justify-self: stretch;
    }
}

.team-avatar {
    display: grid;
    place-items: center;
    flex: none;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: var(--avatar-bg);
    background-position: center;
    background-size: cover;

    color: var(--brand);

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

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

.team-avatar.has-logo {
    color: transparent;
}

.team-member-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.team-tag.is-ok {
    color: var(--brand);
}

.team-tag.is-warn {
    color: #facc15;
}


/* Administrativo: abas Usuários | Equipes */

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.admin-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;

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

    background: var(--surface);
    color: var(--text-2);

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.admin-tabs a[aria-current="page"] {
    border-color: var(--brand);
    color: var(--brand);
}


/* Equipes: foto da equipe (adicionar quando não há, editar e excluir quando há) */

.team-logo-add {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;

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

    background: var(--surface-2);
    color: var(--text-2);

    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.team-logo-add .icon {
    width: 20px;
    height: 20px;
    color: var(--brand);
}

.team-logo-edit:disabled {
    cursor: default;
}

.team-logo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.team-logo-actions .btn {
    height: 40px;
}


/* Equipes: cadastro de nova equipe e estado "Sem equipe" */

.team-empty-card {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 24px;

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

    background: var(--surface);
}

.new-team-form {
    display: grid;
    gap: 22px;
}

.new-team-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.new-team-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    flex: 1 1 360px;
    min-width: 0;
}

.new-team-fields .auth-field {
    margin: 0;
}

.new-member-add {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
    gap: 16px;
}

.new-member-add .auth-field {
    margin: 0;
}

.new-member-add .btn {
    height: 44px;
}

.new-team-actions {
    display: flex;
    justify-content: flex-end;
}

.new-team-actions .btn {
    height: 44px;
    padding: 0 24px;
}

.new-team-form input,
.new-team-form select {
    height: 44px;
}


/* Menu lateral (telas largas): recolhido com ícones, abre ao passar o mouse */

.side-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 76px;
    padding: 84px 10px 18px;
    overflow: hidden;

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

    background: var(--surface);

    transition: width 0.22s ease, box-shadow 0.22s ease;
}

.side-rail:hover,
.side-rail:focus-within {
    width: 236px;

    box-shadow: 12px 0 36px rgba(0, 0, 0, 0.35);
}

.side-rail-links,
.side-rail-sub {
    display: grid;
    gap: 4px;
}

.side-rail-links a,
.side-rail-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 12px;

    border: 0;
    border-radius: 12px;

    background: none;
    color: var(--text-2);

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.side-rail-links a > .icon,
.side-rail-toggle > .icon {
    flex: none;
    width: 20px;
    height: 20px;
}

.side-rail-links a > span,
.side-rail-toggle > span {
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.side-rail:hover .side-rail-links a > span,
.side-rail:hover .side-rail-toggle > span,
.side-rail:focus-within .side-rail-links a > span,
.side-rail:focus-within .side-rail-toggle > span {
    opacity: 1;
}

.side-rail-links a:hover,
.side-rail-toggle:hover {
    background: var(--surface-2);
    color: var(--text);
}

.side-rail-links a[aria-current="page"] {
    background: rgba(34, 197, 94, 0.12);
    color: var(--brand);
}

.side-rail-sub {
    padding-left: 14px;
}

.side-rail-sub a {
    font-size: 13px;
}

.side-rail-foot {
    display: grid;
    gap: 8px;
}

.side-rail-foot .help-link,
.side-rail-foot .lang-menu {
    position: relative;
}

body.has-rail {
    padding-left: 76px;
}

@media (min-width: 761px) {
    body.has-rail .topbar .main-nav {
        display: none;
    }
}

@media (max-width: 760px) {
    .side-rail {
        display: none;
    }

    body.has-rail {
        padding-left: 0;
    }
}


/* Equipes: modal de nova equipe (foto, nome e site; membros; ações) */

.team-dialog {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;

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

    background: var(--surface);
    color: inherit;
}

.team-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.team-dialog-form {
    display: grid;
    gap: 20px;
    padding: 26px;
}

.team-dialog-head h3 {
    margin: 0;
    font-size: 20px;
}

.team-dialog-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.team-dialog-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: end;
    gap: 14px;
    flex: 1 1 320px;
    min-width: 0;
}

.team-dialog-fields .auth-field,
.team-dialog-form > .auth-field {
    margin: 0;
}

.team-dialog-form .auth-field input,
.team-dialog-form .picker select {
    height: 44px;
}

.team-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.team-dialog-actions .btn {
    height: 44px;
    padding: 0 20px;
}

.team-dialog .team-found,
#memberNew {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 14px;
}

#memberNew .btn,
.team-dialog .team-found .btn {
    height: 44px;
}

.team-hint.is-error {
    color: #f87171;
}

/* O atributo hidden precisa vencer o display das classes de equipes. */
.team-logo-add[hidden],
.team-logo-actions[hidden],
.team-found[hidden],
.team-dialog-fields[hidden],
.team-empty-card[hidden] {
    display: none;
}

/* Equipes: editar e excluir foto só aparecem ao passar o mouse sobre o logotipo */

.team-logo-wrap {
    position: relative;
    flex: none;
}

.team-logo-wrap .team-logo-edit {
    display: block;
}

.team-logo-wrap .team-logo-actions {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border-radius: 22px;

    background: rgba(3, 10, 6, 0.72);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.team-logo-wrap:hover .team-logo-actions,
.team-logo-wrap:focus-within .team-logo-actions {
    opacity: 1;
    pointer-events: auto;
}

.team-logo-wrap .team-logo-actions[hidden] {
    display: none;
}

.team-logo-action {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;

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

    background: var(--surface);
    color: var(--brand);

    cursor: pointer;
}

.team-logo-action .icon {
    width: 18px;
    height: 18px;
}

.team-logo-action.is-danger {
    color: #f87171;
}

/* Minha equipe: conversa entre os membros e avisos */

.team-page {
    display: grid;
    gap: 20px;
}

.team-head-card {
    padding-bottom: 22px;
}

.chat-section {
    gap: 16px;
}

.chat-list {
    display: grid;
    gap: 10px;
    max-height: 420px;
    min-height: 160px;
    padding: 4px 2px;
    overflow-y: auto;
}

.chat-bubble {
    max-width: 82%;
    padding: 12px 14px;

    border: 1px solid var(--line);
    border-radius: 16px 16px 16px 4px;

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

.chat-bubble.is-mine {
    justify-self: end;

    border-radius: 16px 16px 4px 16px;

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

.chat-bubble.is-notice {
    border-color: rgba(250, 204, 21, 0.45);
}

.chat-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
}

.chat-name {
    font-weight: 700;
}

.chat-time {
    color: var(--text-2);
}

.chat-text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.chat-form {
    display: grid;
    gap: 12px;
}

.chat-form textarea {
    width: 100%;
    min-height: 64px;
    padding: 12px 14px;
    resize: vertical;
}

.chat-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.chat-actions .btn {
    height: 44px;
    padding: 0 20px;
}

/* Equipes: botão Editar verde, só com ícone; o nome aparece ao passar o mouse */

.team-card-edit {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    overflow: hidden;

    border: 0;
    border-radius: 999px;

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

    cursor: pointer;
    transition: width 0.2s ease, padding 0.2s ease, gap 0.2s ease;
}

.team-card-edit .icon {
    flex: none;
    width: 18px;
    height: 18px;
}

.team-card-edit .team-card-edit-label {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    transition: max-width 0.2s ease, opacity 0.15s ease;
}

.team-card-edit:hover,
.team-card-edit:focus-visible {
    width: auto;
    padding: 0 16px;
    gap: 8px;
}

.team-card-edit:hover .team-card-edit-label,
.team-card-edit:focus-visible .team-card-edit-label {
    max-width: 80px;
    opacity: 1;
}

/* Blocos de Minha equipe e equipes respeitam o atributo hidden */
.team-section[hidden],
.team-page[hidden],
.team-card-edit[hidden] {
    display: none;
}

/* Abas: o atributo hidden vence a cor e o display do link */
.admin-tabs a[hidden] {
    display: none;
}

/* Equipes: botão Excluir equipe à esquerda do modal de editar */
.team-dialog-actions .btn.is-danger {
    margin-right: auto;
    color: #f87171;
}

/* Barra do topo no estilo Netflix: sem faixa separadora, logo e ações na mesma linha, degradê que some na página */
.topbar {
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(3, 8, 5, 0.92) 0%, rgba(3, 8, 5, 0.55) 70%, rgba(3, 8, 5, 0) 100%);
}

.topbar::after {
    display: none;
}

/* Abas administrativas só aparecem quando o script liberar (hidden vence display flex) */
.admin-tabs[hidden] {
    display: none;
}

/* Menu lateral fixo à esquerda: logo no topo, itens na vertical, degradê suave; abre ao passar o mouse */
.side-rail {
    padding: 0 10px 18px;
    background: linear-gradient(90deg, rgba(3, 8, 5, 0.96) 0%, rgba(3, 8, 5, 0.78) 72%, rgba(3, 8, 5, 0.15) 100%);
    border-right: 0;
}

.side-rail-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 76px;
    margin: 0 -10px 12px;
    padding: 0 22px 0 20px;
    flex: none;
}

.side-rail-symbol {
    flex: none;
    width: 36px;
    height: 32px;
    fill: var(--brand);
    color: var(--brand);
}

.side-rail-word {
    display: none;
    flex: none;
    width: 128px;
    height: 26px;
    margin-left: 2px;
    fill: var(--text);
    color: var(--text);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.side-rail:hover .side-rail-word,
.side-rail:focus-within .side-rail-word {
    opacity: 1;
}

.side-rail {
    padding-top: 0;
}

/* Menu lateral começa logo abaixo da barra: a logo do topo nunca é coberta */
.side-rail {
    top: 76px;
    height: calc(100vh - 76px);
    padding: 14px 10px 18px;
}


/* Menu lateral: sem sombra nem linhas; item sob o mouse cresce um pouco */
.side-rail,
.side-rail:hover,
.side-rail:focus-within {
    box-shadow: none;
    border: 0;
}

.side-rail-links a {
    transform-origin: left center;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.side-rail-links a:hover,
.side-rail-links a:focus-visible {
    transform: scale(1.08);
}

/* Menu lateral: sem faixas de fundo; o destaque é só a cor e um leve crescimento */
.side-rail-links a,
.side-rail-links a:hover,
.side-rail-links a[aria-current="page"],
.side-rail-toggle:hover {
    background: none;
}

.side-rail-links a[aria-current="page"] {
    color: var(--brand);
}

.side-rail-links a:hover {
    color: var(--brand);
}

/* Botões do topo: mesmo destaque do menu lateral (cor e leve crescimento, sem faixa) */
.topbar-actions > a,
.topbar-actions > button {
    transition: transform 0.18s ease, color 0.18s ease;
}

.topbar-actions > a:hover,
.topbar-actions > a:focus-visible,
.topbar-actions > button:hover {
    transform: scale(1.08);
    color: var(--brand);
}

.topbar-actions > a[aria-current="page"] {
    color: var(--brand);
}

/* Menu do perfil: ícones à esquerda do texto */
.account-menu [role="menuitem"] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-menu [role="menuitem"] .icon {
    flex: none;
    width: 16px;
    height: 16px;
}

/* Menu do perfil: cabeçalho com foto, nome e e-mail */
.account-head {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.account-head-avatar {
    display: grid;
    place-items: center;
    flex: none;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: var(--avatar-bg);
    background-position: center;
    background-size: cover;

    color: var(--brand);
    font-size: 15px;
    font-weight: 800;
}

.account-head-avatar.has-photo {
    color: transparent;
}

.account-head-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

/* Equipes: cards não estouram a caixa e não esticam quando há só um */
.team-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
    justify-content: start;
}

.team-card {
    min-width: 0;
    overflow: hidden;
}

.team-card-body {
    min-width: 0;
}

.team-card-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-card .team-tag,
.team-card .team-card-edit {
    flex: none;
    white-space: nowrap;
}

/* Minha equipe: abas Conversa | Acessos (botões) e lista de acessos */
.admin-tabs .team-tab {
    cursor: pointer;
    font: inherit;
}

.admin-tabs .team-tab[aria-current="page"] {
    border-color: var(--brand);
    color: var(--brand);
}

.access-list {
    display: grid;
    gap: 10px;
}

.access-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 14px 16px;

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

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

.access-text {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1 1 260px;
}

.access-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.access-code {
    font-family: "JetBrains Mono", monospace;
    color: var(--brand);
    font-size: 14px;
    letter-spacing: 0.06em;
}

.access-link {
    color: var(--text-2);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.admin-tabs .team-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;

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

    background: var(--surface);
    color: var(--text-2);

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

.admin-tabs .team-tab .icon {
    width: 16px;
    height: 16px;
}

/* Minha equipe: botão Trocar no cabeçalho da equipe, à direita */
.team-head-card .team-hero {
    flex-wrap: nowrap;
}

.team-switch {
    margin-left: auto;
    flex: none;
    height: 40px;
    padding: 0 16px;
}

.team-switch .icon {
    width: 16px;
    height: 16px;
}

/* Minha equipe: cabeçalho fixo da equipe; Trocar como botão redondo que mostra o nome ao passar o mouse */
.team-page > .team-head-card {
    position: sticky;
    top: 12px;
    z-index: 5;
    backdrop-filter: blur(10px);
}

.team-switch {
    margin-left: auto;
}

.toolbar[hidden] {
    display: none;
}

/* Minha equipe: logotipo do cabeçalho do mesmo tamanho dos cards, em círculo; cabeçalho alinhado */
.team-page > .team-head-card {
    padding: 16px 20px;
}

.team-page > .team-head-card .team-hero {
    gap: 14px;
    align-items: center;
}

.team-logo.team-logo-round {
    border-radius: 50%;
}

/* Minha equipe: conversa em estilo de grupo (foto e nome; sua mensagem à direita) */
.chat-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

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

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

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: var(--avatar-bg);
    background-position: center;
    background-size: cover;

    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
}

.chat-avatar.has-photo {
    color: transparent;
}

.chat-column {
    display: grid;
    gap: 3px;
    min-width: 0;
    max-width: 72%;
}

.chat-row.is-mine .chat-column {
    justify-items: end;
}

.chat-row.is-mine .chat-bubble {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.35);
    border-radius: 16px 16px 4px 16px;
}

.chat-row .chat-bubble audio {
    display: block;
    max-width: 260px;
}

.chat-kind {
    margin-bottom: 8px;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px;

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

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

.chat-composer textarea {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    max-height: 120px;
    padding: 9px 4px;
    resize: none;

    border: 0;
    background: transparent;
}

.chat-tool {
    display: grid;
    place-items: center;
    flex: none;

    width: 40px;
    height: 40px;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--text-2);

    cursor: pointer;
}

.chat-tool svg {
    width: 20px;
    height: 20px;
}

.chat-tool[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.chat-tool.is-send {
    background: var(--brand);
    color: var(--on-brand);
}

.chat-tool.is-recording {
    color: #f87171;
    animation: chat-pulse 1s ease-in-out infinite;
}

@keyframes chat-pulse {
    50% {
        opacity: 0.5;
    }
}

/* Conversa: sem rolagem horizontal; áudio cabe no balão */
.chat-list {
    overflow-x: hidden;
}

.chat-row {
    min-width: 0;
    width: 100%;
}

.chat-row .chat-bubble audio {
    width: 240px;
    max-width: 100%;
}

/* Player de áudio do site (conversa da equipe) */
.audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 240px;
    max-width: 100%;
    padding: 4px 2px;
}

.audio-play {
    display: grid;
    place-items: center;
    flex: none;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

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

    cursor: pointer;
}

.audio-play svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.audio-bar {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 999px;

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

.audio-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;

    border-radius: 999px;

    background: var(--brand);
}

.audio-time {
    flex: none;
    min-width: 34px;
    color: var(--text-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Transcrição de áudio na conversa da equipe */
.audio-transcript {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

.transcribe-btn {
    justify-self: start;
    height: 30px;
    padding: 0 12px;

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

    background: var(--surface);
    color: var(--brand);

    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.transcribe-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.chat-text.is-transcript {
    color: var(--text-2);
    font-size: 13px;
    font-style: italic;
}

/* Minha equipe: botão Adicionar dispositivo no topo da aba, ao lado do título */
#accessAddBtn {
    height: 40px;
    padding: 0 16px;
}

/* Minha equipe: adicionar dispositivo avulso (campos em grade; cancelar em vermelho no rodapé) */
.access-new-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.access-new-form .auth-field {
    margin: 0;
}

.access-new-form input {
    height: 44px;
}

.team-dialog-actions .btn.is-cancel {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.45);
}

/* Janela de atenção antes de excluir ou desvincular */
.attention-dialog {
    width: min(420px, calc(100vw - 32px));
}

.attention-dialog .team-dialog-form {
    justify-items: center;
    text-align: center;
}

.attention-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;

    border-radius: 50%;

    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
}

.attention-icon svg {
    width: 28px;
    height: 28px;
}

.attention-title {
    margin: 0;
    font-size: 20px;
}

.attention-text {
    margin: 0;
    color: var(--text-2);
    line-height: 1.5;
}

.attention-dialog .team-dialog-actions {
    width: 100%;
}

.btn-danger-solid {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}


/* Rodapé das telas logadas: o mesmo rodapé público (referência: teste de velocidade); o Mark segue flutuante à direita */
.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 24px 40px;
    border-top: 1px solid var(--line);
    color: var(--text-3);
    font-size: 13px;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
}

.site-footer a {
    color: var(--text-2);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--spark);
}

.site-footer p {
    display: flex;
    gap: 6px;
    margin: 0;
}

.site-footer p span + span::before {
    content: "·";
    margin-right: 6px;
}


/* Espaço fixo entre o conteúdo e o rodapé, igual em todas as páginas (o espaço vem do fim do conteúdo) */
.site-footer {
    margin-top: 0;
}

main.container {
    padding-bottom: 56px;
}

/* Rodapé sempre no fim da tela: em página curta vai para o pé; em página longa fica logo depois do conteúdo */
body:has(> .site-footer) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body:has(> .site-footer) > main {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
}

main.st-main.st-wide,
main.st-main {
    padding-bottom: 56px;
}


/* Minha equipe: conteúdo centralizado e mais largo */
#teamArea {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* Gerenciar equipe dentro da página: cabeçalho fixo, igual ao da equipe */
.manage-head {
    position: sticky;
    top: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    backdrop-filter: blur(10px);
}

#panelManage .access-new-form {
    align-items: end;
}

/* Minha equipe: espaçamento na aba Membros e no bloco de informações */
#mgMembersPanel {
    display: grid;
    gap: 20px;
}

#mgMembersPanel[hidden] {
    display: none;
}

#mgMembers {
    gap: 12px;
}

#mgMembersPanel .team-member {
    gap: 14px;
    padding: 14px 16px;
}

#mgMembersPanel .team-member .picker,
#mgMembersPanel .team-member .team-remove {
    flex: none;
}

#mgMembersPanel .team-found,
#mgMembersPanel .access-new-form {
    margin-top: 4px;
}

#mgEdit .team-dialog-top {
    padding-bottom: 8px;
}

/* Minha equipe: barra de busca e botão Adicionar membro no topo da aba Membros */
.members-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.members-bar .report-search {
    flex: 1 1 240px;
    min-width: 0;
}

.members-bar .btn {
    height: 44px;
    padding: 0 18px;
}

#mgAddArea {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2);
}

#mgAddArea[hidden] {
    display: none;
}

.team-member[hidden] {
    display: none;
}

/* Membros: mesmo visual da aba de usuários (user-row) */
#mgMembers .user-row {
    margin: 0;
}

#mgMembers .user-row[hidden] {
    display: none;
}


/* Minha equipe: busca nos acessos e na conversa, no mesmo estilo da aba de relatórios */
.team-search {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.team-search .btn {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 18px;
}

.team-search .report-search {
    flex: 1 1 0;
    min-width: 0;
}

.team-hint[hidden],
.access-row[hidden],
.chat-row[hidden] {
    display: none;
}


/* Equipes: busca de membro nas janelas de criar e editar equipe, no mesmo estilo da Minha equipe */
.team-member-search {
    margin-bottom: 12px;
}


/* Administrativo (aba Usuários): cores e textos mais suaves, ícones sem fundo */
.users-list .user-tags > span {
    opacity: 0.8;
}


.users-list .user-tags .icon,
.users-list .user-tags .user-status .icon {
    background: none;
}


.users-list .user-info strong {
    color: rgba(230, 238, 233, 0.82);
    font-weight: 600;
}


.users-list .user-info span,
.users-list .user-info small {
    color: rgba(160, 176, 166, 0.85);
}


/* Minha equipe: a situação do membro vira botão para o master ativar ou inativar */
#mgMembers button.user-status {
    border: 0;
    font: inherit;
    cursor: pointer;
}


#mgMembers button.user-status:hover {
    filter: brightness(1.15);
}


/* Minha equipe: excluir equipe em vermelho, sem fundo cinza */
#mgDelete {
    background: transparent;
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.45);
}


#mgDelete:hover {
    background: rgba(248, 113, 113, 0.08);
}


/* Botões do site: fundo transparente, só a borda e o texto na cor do botão */
.btn {
    background: transparent;
    box-shadow: none;
    color: var(--text-2);
    border: 1px solid var(--line-strong);
}


.btn:hover {
    background: rgba(255, 255, 255, 0.04);
}


.btn.btn-primary {
    color: var(--spark);
    border-color: rgba(74, 222, 128, 0.55);
}


.btn.is-cancel {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.55);
}


/* Foto do membro (Minha equipe): centralizada e cortada no círculo, como as iniciais */
.user-avatar.has-logo {
    color: transparent;
    background-position: center;
    background-size: cover;
}


/* Minha equipe: a lista de membros sem bordas, com espaçamento uniforme entre os campos */
#mgMembers .user-row {
    border: 0;
    gap: 12px;
}

#mgMembers .user-row .picker,
#mgMembers .user-row .picker-button,
#mgMembers .user-row .user-status,
#mgMembers .user-row .static-tag,
#mgMembers .user-row .btn {
    border: 0;
}

#mgMembers .user-tags,
#mgMembers .user-actions {
    gap: 8px;
}

/* Papel e situação de quem só visualiza: mesmo botão, sem ação */
.static-tag {
    pointer-events: none;
    cursor: default;
}


/* Logo junto com o menu lateral: começa na mesma linha dos ícones (22 px) e fica acima da faixa do menu,
   em qualquer largura acima do celular. As ações do topo seguem a largura do conteúdo. */
@media (min-width: 521px) {
    body.has-rail .topbar {
        position: relative;
        z-index: 61;
        margin-left: -76px;
        /* o símbolo (39,5 px) fica centrado na coluna dos ícones do menu (centro em 32 px) */
        padding-left: calc(32px - 19.75px);
        /* margens iguais dos dois lados da barra (mesmo recuo da logo à esquerda) */
        padding-right: calc(32px - 19.75px);
    }
}


/* Logo: símbolo e nome não encolhem nem se sobrepõem (cada parte mantém o próprio tamanho) */
.topbar .logo > svg {
    flex: 0 0 auto;
}


/* Com o menu lateral, a barra do topo ocupa toda a largura (sem o limite de 1600 px das telas largas) */
body.has-rail .site-header .topbar {
    max-width: none;
}


/* Layout de computador vale até 521 px (1366 px a 250% de zoom = 546 px): menu lateral e logo continuam;
   o botão de celular só aparece abaixo de 521 px. */
@media (min-width: 521px) and (max-width: 760px) {
    /* a logo mantém o tamanho do computador junto com o menu lateral */
    body.has-rail .topbar .logo {
        font-size: 26px;
    }
}

/* Administrativo: título, abas (ícone + nome + linha embaixo da ativa) e barra fixa com busca e criar */
.admin-head {
    display: grid;
    gap: 8px;
    padding-top: 28px;
}

.admin-head-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
}

.admin-tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid var(--line);
}

.admin-tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px 10px;
    margin-bottom: -1px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    box-shadow: none;
    color: var(--text-3);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.admin-tabs a .icon {
    width: 20px;
    height: 20px;
}

.admin-tabs a[aria-current="page"] {
    color: var(--spark);
    border-bottom-color: var(--spark);
}

.admin-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    background: var(--ink);
}

.admin-bar .report-search {
    flex: 1 1 240px;
    min-width: 0;
}

/* Administrativo: cabeçalho fixo com a busca em cima e as abas (ícone + nome) embaixo */
.admin-head {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    gap: 6px;
    padding-top: 18px;
    background: var(--ink);
}

.admin-head .admin-bar {
    position: static;
    padding: 0;
    background: none;
}

/* Administrativo: contador ao lado do nome da aba */
.admin-tab-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--spark);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* Administrativo: cartões de resumo no topo da página de usuários */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.admin-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.admin-stat > .icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--spark);
}

.admin-stat.is-ok > .icon {
    color: var(--ok);
}

.admin-stat.is-warn > .icon {
    color: var(--warn);
}

.admin-stat strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
}

.admin-stat span {
    font-size: 12.5px;
    color: var(--text-3);
}

/* Administrativo: usuários em colunas (Usuário, Contato, Papel, Situação, Último acesso, Ações) */
#usersList {
    display: grid;
    gap: 8px;
}

.u-head,
#usersList .user-row {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
    align-items: center;
    column-gap: 16px;
}

.u-head {
    padding: 0 16px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
}

#usersList .user-row {
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.u-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.u-cell.u-user {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.u-cell.u-user .user-info {
    min-width: 0;
}

.u-cell.u-user .user-info span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-cell small {
    font-size: 11px;
    color: var(--text-3);
}

.u-cell.u-status .user-status + .user-status {
    margin-top: 4px;
}

#usersList .user-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .u-head {
        display: none;
    }

    .u-head,
    #usersList .user-row {
        grid-template-columns: 1fr;
    }
}

/* Abas do Administrativo: ícone à esquerda e nome à direita, com a linha embaixo da ativa */
.admin-tabs a {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 12px;
    font-size: 14px;
}

.admin-tabs a .icon {
    width: 18px;
    height: 18px;
}

/* Administrativo: usuários em cartões (grade de 3 colunas no computador), ações só com ícones */
.u-head {
    display: none;
}

#usersList {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

#usersList .user-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}

#usersList .u-user {
    grid-column: 1;
    grid-row: 1;
}

#usersList .u-status {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-end;
}

#usersList .u-contact {
    grid-column: 1 / span 2;
    grid-row: 2;
}

#usersList .u-role {
    grid-column: 1;
    grid-row: 3;
}

#usersList .u-last {
    grid-column: 2;
    grid-row: 3;
    align-items: flex-end;
    text-align: right;
}

#usersList .user-actions {
    grid-column: 1 / span 2;
    grid-row: 4;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

#usersList .user-actions .btn {
    height: 36px;
    padding: 0 10px;
}

#usersList .user-actions .btn span {
    display: none;
}

/* Equipes: cartões na mesma grade de 3 colunas, ações só com ícones (dev) */
.team-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.team-grid .team-card-edit-label {
    display: none;
}

.team-grid .team-card-edit {
    padding: 0 10px;
}

/* Administrativo (usuários): título com ícone à esquerda e resumo à direita, no tema do Help4Desk */
.admin-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
}

.admin-hero-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-hero-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--brand-soft);
    color: var(--spark);
}

.admin-hero-icon .icon {
    width: 28px;
    height: 28px;
}

.admin-hero-title h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
}

.admin-hero-title p {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--text-3);
}

.admin-stats-inline {
    margin-top: 0;
    flex: 1 1 520px;
    max-width: 680px;
}

.admin-stats-inline .admin-stat {
    padding: 12px 14px;
}

/* Administrativo: rodapé da lista com a contagem e os botões de página */
.users-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-3);
}

.users-pager-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.users-pager-btn {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-2);
    font-weight: 600;
    cursor: pointer;
}

.users-pager-btn.is-current {
    background: var(--spark);
    border-color: var(--spark);
    color: var(--ink);
}

.users-pager-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.users-pager-gap {
    padding: 0 4px;
}

/* Administrativo (computador): tudo cabe na tela, sem rolagem da página; a lista pagina e o modal ocupa a tela */
@media (min-width: 1101px) {
    html:has(body.admin-page),
    body.admin-page {
        height: 100%;
        overflow: hidden;
    }

    body.admin-page {
        display: flex;
        flex-direction: column;
    }

    body.admin-page > main.container {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin-top: 0;
        padding-bottom: 12px;
    }

    body.admin-page .site-footer {
        display: none;
    }

    body.admin-page > main.container > .admin-hero,
    body.admin-page > main.container > .admin-head,
    body.admin-page > main.container > .filters-bar,
    body.admin-page > main.container > .admin-hero + * {
        flex: 0 0 auto;
    }

    body.admin-page #usersList {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        align-content: start;
    }

    body.admin-page .users-pager {
        flex: 0 0 auto;
    }

    body.admin-page .user-editor {
        width: calc(100vw - 48px);
        max-width: none;
        height: calc(100dvh - 48px);
        max-height: none;
        overflow: auto;
    }
}

/* Administrativo (ajuste final): tamanhos menores e um único ritmo de espaçamento (10px) entre as partes */
.admin-head {
    gap: 10px;
    padding-top: 14px;
}

.admin-head-title {
    font-size: 20px;
}

.admin-hero {
    gap: 12px;
    margin-top: 14px;
}

.admin-hero-title {
    gap: 12px;
}

.admin-hero-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.admin-hero-icon .icon {
    width: 20px;
    height: 20px;
}

.admin-hero-title h1 {
    font-size: 20px;
}

.admin-hero-title p {
    margin-top: 2px;
    font-size: 12.5px;
}

.admin-stats,
.admin-stats-inline {
    gap: 8px;
    margin-top: 0;
}

.admin-stats-inline {
    display: flex;
    flex: 0 1 auto;
    max-width: none;
}

.admin-stats-inline .admin-stat {
    min-width: 150px;
}

@media (max-width: 760px) {
    .admin-stats-inline {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .admin-stats-inline .admin-stat {
        min-width: 0;
        padding: 8px;
    }
}

.admin-stat {
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
}

.admin-stat > .icon {
    width: 20px;
    height: 20px;
}

.admin-stat strong {
    font-size: 18px;
}

.admin-stat span {
    font-size: 12px;
}

.admin-bar {
    gap: 10px;
    padding: 10px 0;
}

.admin-bar .btn {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

.admin-tabs {
    gap: 20px;
}

.admin-tabs a {
    gap: 6px;
    padding: 6px 2px 8px;
    font-size: 13px;
}

.admin-tabs a .icon {
    width: 16px;
    height: 16px;
}

#usersList {
    gap: 10px;
}

#usersList .user-row {
    gap: 6px 10px;
    padding: 10px 12px;
    border-radius: 12px;
}

#usersList .user-row .user-info strong {
    display: block;
    line-height: 1.25;
}

#usersList .user-row .avatar,
#usersList .user-row .user-avatar {
    width: 32px;
    height: 32px;
}

#usersList .user-info strong {
    font-size: 13.5px;
}

#usersList .user-info span,
.u-cell span {
    font-size: 12px;
}

.u-cell small {
    font-size: 11px;
}

#usersList .user-actions {
    padding-top: 8px;
}

#usersList .user-actions .btn {
    height: 30px;
    padding: 0 8px;
}

.users-pager {
    margin-top: 10px;
    font-size: 12px;
}

.users-pager-buttons {
    gap: 4px;
}

.users-pager-btn {
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    font-size: 12px;
}

/* Administrativo: cartão de usuário no formato compacto (nome e situação no topo, papel com divisória, último acesso e ações embaixo) */
@media (min-width: 761px) {
    #usersList .user-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "user status"
            "contact contact"
            "role role"
            "last actions";
        gap: 4px 10px;
        padding: 9px 12px;
    }

    #usersList .u-user { grid-area: user; }
    #usersList .u-status { grid-area: status; align-items: flex-end; }
    #usersList .u-contact { grid-area: contact; }
    #usersList .u-role {
        grid-area: role;
        width: 100%;
        padding-top: 6px;
        border-top: 1px solid var(--line);
    }
    #usersList .u-last {
        grid-area: last;
        align-items: flex-start;
        text-align: left;
    }
    #usersList .user-actions {
        grid-area: actions;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: flex-end;
        padding-top: 0;
        border-top: 0;
    }

    #usersList .u-last span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text-3);
    }

    #usersList .u-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--spark);
    }

    #usersList .user-actions .btn {
        width: 26px;
        height: 26px;
        padding: 0;
        justify-content: center;
    }
}

/* Equipes: cartão de equipe no mesmo formato compacto dos usuários (logo e papel no topo, nome e membros no meio, ação embaixo) */
@media (min-width: 761px) {
    .team-grid .team-card {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo tag"
            "body body"
            "actions actions";
        gap: 6px 10px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .team-grid .team-logo { grid-area: logo; }
    .team-grid .team-card-body { grid-area: body; min-width: 0; }
    .team-grid .team-card-body .team-card-name {
        font-size: 13.5px;
        font-weight: 700;
    }
    .team-grid .team-card-body .team-card-meta {
        font-size: 12px;
        color: var(--text-3);
    }
    .team-grid .team-tag { grid-area: tag; justify-self: end; }
    .team-grid .team-card-edit {
        grid-area: actions;
        justify-self: end;
        width: 26px;
        height: 26px;
        padding: 0;
        justify-content: center;
    }
    .team-grid .team-card-edit-label {
        display: none;
    }
}

/* Administrativo (versão final): cartão com papel e situação à direita, e-mail e telefone lado a lado,
   ações que mostram o nome ao passar o mouse; resumo em uma faixa só; sem fundo preto atrás da barra */
.admin-bar,
.admin-head {
    background: none;
}

.admin-head {
    padding-top: 8px;
}

.admin-bar {
    padding: 6px 0;
}

.admin-hero {
    margin-top: 10px;
}

@media (min-width: 761px) {
    .admin-stats-inline {
        position: relative;
        flex: 0 0 auto;
        width: 480px;
        gap: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
    }

    .admin-stats-inline .admin-stat {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 14px 11px;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .admin-stats-inline .admin-stat + .admin-stat {
        border-left: 1px solid var(--line);
    }

    .admin-stats-bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        height: 3px;
        margin: 0;
        background: var(--line);
    }

    .admin-stats-bar b {
        display: block;
        width: 0;
        height: 100%;
        transition: width 0.3s ease;
    }

    .admin-stats-bar b:first-child {
        background: var(--ok);
    }

    .admin-stats-bar b:last-child {
        background: var(--warn);
    }

    #usersList .user-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "user status"
            "contact contact"
            "last actions";
        gap: 6px 10px;
        padding: 9px 12px;
    }

    #usersList .u-user {
        grid-area: user;
        min-width: 0;
    }

    #usersList .u-status {
        grid-area: status;
        align-items: flex-end;
        gap: 4px;
    }

    #usersList .u-contact {
        grid-area: contact;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px 12px;
        width: 100%;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--line);
    }

    #usersList .u-info {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        font-size: 12px;
        color: var(--text-2);
    }

    #usersList .u-info > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #usersList .u-info > .icon {
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
        color: var(--text-3);
    }

    #usersList .u-you-mark {
        display: inline-grid;
        place-items: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--brand-soft);
        color: var(--spark);
    }

    #usersList .u-you-mark .icon {
        width: 11px;
        height: 11px;
    }

    #usersList .u-last {
        grid-area: last;
        align-items: flex-start;
        text-align: left;
    }

    #usersList .user-actions {
        grid-area: actions;
        align-self: end;
        flex-wrap: nowrap;
        gap: 6px;
        padding-top: 0;
        border-top: 0;
    }

    #usersList .user-actions .btn {
        width: 26px;
        height: 26px;
        padding: 0;
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
        transition: width 0.18s ease, padding 0.18s ease;
    }

    #usersList .user-actions .btn:hover,
    #usersList .user-actions .btn:focus-visible {
        width: auto;
        padding: 0 10px;
    }

    #usersList .user-actions .btn:hover span,
    #usersList .user-actions .btn:focus-visible span {
        display: inline;
    }

    #usersList .user-row .user-status,
    #usersList .user-row .user-role-tag {
        font-size: 11px;
    }
}

/* Administrativo: cartão com foto à esquerda (situação e papel embaixo dela), nome, e-mail, telefone e rodapé
   com último acesso e ações; resumo com quatro partes; animações leves (com respeito a "reduzir movimento") */
@media (min-width: 761px) {
    .admin-stats-inline {
        width: 540px;
    }

    .admin-stats-inline .admin-stat.is-danger > .icon {
        color: var(--danger);
    }

    #statBarActive {
        background: var(--ok);
    }

    #statBarPending {
        background: var(--warn);
    }

    #statBarSuspended {
        background: var(--danger);
    }

    #usersList .user-row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "user contact"
            "foot foot";
        align-items: start;
        gap: 12px 14px;
        padding: 14px;
        border-radius: 14px;
        animation: userCardIn 0.35s ease both;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }

    #usersList .user-row:hover {
        transform: translateY(-2px);
        border-color: rgba(34, 197, 94, 0.35);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    }

    @keyframes userCardIn {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    #usersList .u-user {
        grid-area: user;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 96px;
    }

    #usersList .u-user .user-avatar {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    #usersList .u-tags {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    #usersList .u-contact {
        grid-area: contact;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        min-width: 0;
    }

    #usersList .u-name {
        display: flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
    }

    #usersList .u-info {
        font-size: 12.5px;
    }

    #usersList .u-foot {
        grid-area: foot;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
    }

    #usersList .u-last {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--text-3);
    }

    #usersList .user-actions {
        display: flex;
        gap: 6px;
        flex-wrap: nowrap;
        padding-top: 0;
        border-top: 0;
    }

    #usersList .user-status.disabled {
        color: var(--danger);
        background: rgba(244, 63, 94, 0.12);
        border-color: rgba(244, 63, 94, 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    #usersList .user-row,
    .admin-stats-bar b {
        animation: none;
        transition: none;
    }
}

/* Administrativo: rodapé do cartão em uma linha só (último acesso à esquerda, botões à direita), sem divisória,
   com o cartão esticado para o rodapé ficar sempre na mesma altura */
@media (min-width: 761px) {
    #usersList .user-row {
        grid-template-rows: minmax(0, 1fr) auto;
        align-items: stretch;
    }

    #usersList .u-foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 4px;
        padding-top: 14px;
        border-top: 0;
    }

    #usersList .u-last {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Administrativo: papel e situação numa pílula só ("Admin · Ativo"), na cor da situação, com o ícone no final */
@media (min-width: 761px) {
    #usersList .u-combo {
        flex-direction: row;
        gap: 6px;
        white-space: nowrap;
    }
}

/* Administrativo: cartão como na referência (avatar, nome e contato, situação no canto, papel com coroa, rodapé) */
@media (min-width: 761px) {
    #usersList .user-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "user contact status"
            "role role role"
            "foot foot foot";
        align-items: start;
        gap: 10px 12px;
        padding: 14px 16px;
    }

    #usersList .u-user {
        grid-area: user;
        width: auto;
        align-items: center;
    }

    #usersList .u-user .user-avatar {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    #usersList .u-contact {
        grid-area: contact;
        gap: 3px;
        min-width: 0;
    }

    #usersList .u-name {
        font-size: 15px;
        font-weight: 700;
    }

    #usersList .u-status {
        grid-area: status;
        align-items: flex-end;
    }

    #usersList .u-role-line {
        grid-area: role;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-2);
    }

    #usersList .u-role-line.is-admin {
        color: var(--warn);
    }

    #usersList .u-foot {
        grid-area: foot;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-top: 4px;
        border-top: 0;
        margin-top: 2px;
    }

    #usersList .u-last {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--text-3);
    }
}

/* Administrativo: cartão com a borda na cor da situação (verde ativo, amarelo pendente, vermelho suspenso),
   foto do tamanho do bloco de nome, e-mail e telefone, rodapé com papel, último acesso e botões redondos */
@media (min-width: 761px) {
    #usersList .user-row {
        grid-template-columns: 68px minmax(0, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "user contact"
            "foot foot";
        align-items: start;
        gap: 12px 16px;
        padding: 14px 16px;
        border-width: 1.5px;
    }

    #usersList .user-row.status-active {
        border-color: var(--ok);
    }

    #usersList .user-row.status-pending {
        border-color: var(--warn);
    }

    #usersList .user-row.status-disabled {
        border-color: var(--danger);
    }

    #usersList .u-user {
        grid-area: user;
        width: 68px;
    }

    #usersList .u-user .user-avatar {
        width: 68px;
        height: 68px;
        font-size: 22px;
    }

    #usersList .u-contact {
        grid-area: contact;
        gap: 8px;
        min-width: 0;
    }

    #usersList .u-line {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        font-size: 13px;
        color: var(--text-2);
    }

    #usersList .u-line > span,
    #usersList .u-line > strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #usersList .u-line > .icon {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        color: var(--text-3);
    }

    #usersList .u-name {
        font-size: 15px;
        font-weight: 700;
        color: var(--text);
    }

    #usersList .u-name > .icon {
        color: var(--text-3);
    }

    #usersList .u-you-mark {
        display: none;
    }

    #usersList .u-name:has(.u-you-mark) > .icon {
        color: var(--warn);
    }

    #usersList .u-foot {
        grid-area: foot;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
    }

    #usersList .u-role-line {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-2);
    }

    #usersList .u-role-line.is-admin {
        color: var(--warn);
    }

    #usersList .u-last {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--text-3);
    }

    #usersList .user-actions {
        display: flex;
        gap: 8px;
        flex-wrap: nowrap;
    }

    #usersList .user-actions .btn {
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
}

/* Administrativo: rodapé com papel e último acesso empilhados à esquerda e os botões à direita;
   botões não mudam de tamanho ao passar o mouse nem ao clicar; versão do celular alinhada como o computador */
@media (min-width: 761px) {
    #usersList .u-foot {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "role actions"
            "last actions";
        align-items: center;
        row-gap: 4px;
        column-gap: 12px;
    }

    #usersList .u-role-line {
        grid-area: role;
    }

    #usersList .u-last {
        grid-area: last;
    }

    #usersList .user-actions {
        grid-area: actions;
    }

    #usersList .user-actions .btn,
    #usersList .user-actions .btn:hover,
    #usersList .user-actions .btn:focus-visible {
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
        transform: none;
    }

    #usersList .user-actions .btn:hover span,
    #usersList .user-actions .btn:focus-visible span {
        display: none;
    }
}

@media (max-width: 760px) {
    #usersList .user-row {
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "user contact"
            "foot foot";
        align-items: start;
        gap: 12px;
        padding: 14px;
    }

    #usersList .u-user {
        grid-area: user;
        width: 56px;
    }

    #usersList .u-user .user-avatar {
        width: 56px;
        height: 56px;
        font-size: 19px;
    }

    #usersList .u-contact {
        grid-area: contact;
        gap: 6px;
        min-width: 0;
    }

    #usersList .u-line {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        font-size: 13px;
        color: var(--text-2);
    }

    #usersList .u-line > span,
    #usersList .u-line > strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #usersList .u-line > .icon {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        color: var(--text-3);
    }

    #usersList .u-name {
        font-size: 15px;
        font-weight: 700;
    }

    #usersList .u-foot {
        grid-area: foot;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "role actions"
            "last actions";
        align-items: center;
        row-gap: 4px;
        column-gap: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
    }

    #usersList .u-role-line {
        grid-area: role;
    }

    #usersList .u-last {
        grid-area: last;
    }

    #usersList .user-actions {
        grid-area: actions;
        display: flex;
        gap: 8px;
    }

    #usersList .user-actions .btn {
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    #usersList .user-actions .btn span {
        display: none;
    }
}

/* Administrativo (celular): os quatro resumos numa linha só */
@media (max-width: 760px) {
    .admin-stats-inline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .admin-stats-inline .admin-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 6px;
    }

    .admin-stats-inline .admin-stat span {
        font-size: 11px;
        white-space: normal;
    }
}

/* Administrativo (celular): papel e último acesso alinhados à esquerda, botões à direita */
@media (max-width: 760px) {
    #usersList .u-role-line,
    #usersList .u-last {
        justify-self: start;
        text-align: left;
    }
}

/* Administrativo: sem a linha abaixo do telefone; quando é você, os ícones ficam dourados;
   ao passar o mouse, o nome aparece num rótulo ao lado do botão (os botões não mudam de lugar) */
@media (min-width: 761px) {
    #usersList .u-foot {
        border-top: 0;
    }

    #usersList .user-row.is-self .u-line > .icon,
    #usersList .user-row.is-self .u-name > .icon {
        color: var(--warn);
    }

    #usersList .user-actions .btn {
        position: relative;
        overflow: visible;
    }

    #usersList .user-actions .btn span {
        display: block;
        position: absolute;
        right: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        padding: 4px 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--text);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    #usersList .user-actions .btn:hover span,
    #usersList .user-actions .btn:focus-visible span {
        display: block;
        opacity: 1;
    }
}

@media (max-width: 760px) {
    #usersList .u-foot {
        border-top: 0;
    }

    #usersList .user-row.is-self .u-line > .icon,
    #usersList .user-row.is-self .u-name > .icon {
        color: var(--warn);
    }
}

/* Botões de ícone (usuários e equipes): ao passar o mouse, o botão estica para a direita e mostra o nome do lado;
   o nome some do título visível mas continua no leitor de tela e na dica */
@media (min-width: 761px) {
    #usersList .user-actions .btn,
    .team-grid .team-card-edit {
        transition: width 0.2s ease, padding 0.2s ease, background 0.15s ease;
    }

    #usersList .user-actions .btn:hover,
    #usersList .user-actions .btn:focus-visible,
    .team-grid .team-card-edit:hover,
    .team-grid .team-card-edit:focus-visible {
        width: auto;
        padding: 0 12px 0 10px;
        gap: 6px;
        background: var(--surface-2);
    }

    #usersList .user-actions .btn:hover span,
    #usersList .user-actions .btn:focus-visible span,
    .team-grid .team-card-edit:hover .team-card-edit-label,
    .team-grid .team-card-edit:focus-visible .team-card-edit-label {
        display: inline;
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
        opacity: 1;
        transform: none;
        padding: 0;
        border: 0;
        background: none;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        color: var(--text);
    }

    .admin-tabs {
        border-bottom: 0;
    }
}

/* Administrativo: botões de ação com espaço fixo; ao passar o mouse, o botão expande por cima (sem empurrar o rodapé),
   com borda verde; sem linha entre o contato e o papel */
@media (min-width: 761px) {
    #usersList .u-contact {
        border-bottom: 0;
        padding-bottom: 0;
    }

    #usersList .user-actions {
        position: relative;
        width: 70px;
        justify-content: flex-end;
    }

    #usersList .user-actions .btn:hover,
    #usersList .user-actions .btn:focus-visible {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 32px;
        z-index: 2;
        border: 1px solid rgba(34, 197, 94, 0.45);
        background: var(--surface-2);
    }

    #usersList .user-actions {
        width: auto;
    }

    /* cada botão expande a partir da própria posição: o da direita fica no 0, os de trás somam 38px por botão */
    #usersList .user-actions .btn:nth-last-child(1):hover,
    #usersList .user-actions .btn:nth-last-child(1):focus-visible {
        right: 0;
    }

    #usersList .user-actions .btn:nth-last-child(2):hover,
    #usersList .user-actions .btn:nth-last-child(2):focus-visible {
        right: 38px;
    }

    #usersList .user-actions .btn:nth-last-child(3):hover,
    #usersList .user-actions .btn:nth-last-child(3):focus-visible {
        right: 76px;
    }

    #usersList .u-last {
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    #usersList .u-contact {
        border-bottom: 0;
        padding-bottom: 0;
    }
}

/* Administrativo: borda verde mais forte no botão expandido */
@media (min-width: 761px) {
    #usersList .user-actions .btn:hover,
    #usersList .user-actions .btn:focus-visible {
        border: 1px solid var(--spark);
    }
}

/* Administrativo: botão expandido com as pontas na mesma curva do círculo */
@media (min-width: 761px) {
    #usersList .user-actions .btn:hover,
    #usersList .user-actions .btn:focus-visible {
        border-radius: 999px;
    }
}

/* Administrativo: o último acesso exato fica no editor, ao lado dos botões */
.editor-last-seen {
    margin-right: auto;
    align-self: center;
    font-size: 12px;
    color: var(--text-3);
}

/* Administrativo: o botão expandido empurra o de editar (sem flutuar por cima) */
@media (min-width: 761px) {
    #usersList .user-row .user-actions {
        width: auto;
    }

    #usersList .user-row .user-actions .btn:hover,
    #usersList .user-row .user-actions .btn:focus-visible {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        z-index: auto;
    }
}

/* Administrativo: o nome do botão aparece só com o mouse em cima (sem o rótulo antigo que sumia devagar) */
@media (min-width: 761px) {
    #usersList .user-row .user-actions .btn span {
        display: none;
        position: static;
        padding: 0;
        border: 0;
        background: none;
        opacity: 1;
        transform: none;
        transition: none;
    }

    #usersList .user-row .user-actions .btn:hover span,
    #usersList .user-row .user-actions .btn:focus-visible span {
        display: inline;
    }
}

/* Administrativo: nome dos botões de ação sempre visível (pílulas com ícone e texto), sem efeito ao passar o mouse */
@media (min-width: 761px) {
    #usersList .user-row .user-actions .btn,
    #usersList .user-row .user-actions .btn:hover,
    #usersList .user-row .user-actions .btn:focus-visible {
        width: auto;
        height: 30px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: var(--surface-2);
        color: var(--text-2);
        font-size: 12px;
        font-weight: 600;
        transform: none;
    }

    #usersList .user-row .user-actions .btn span {
        display: inline;
        opacity: 1;
        white-space: nowrap;
    }

    #usersList .user-row .user-actions .btn:hover,
    #usersList .user-row .user-actions .btn:focus-visible {
        border-color: var(--spark);
        color: var(--text);
    }
}

/* Administrativo: sem a barra colorida do resumo; o conteúdo começa logo depois do menu lateral e vai até a borda direita do topo */
.admin-stats-bar {
    display: none;
}

@media (min-width: 761px) {
    body.admin-page > main.container {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Administrativo: três cartões por linha no computador (o conteúdo agora ocupa toda a largura) */
@media (min-width: 761px) {
    #usersList {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Administrativo: sem o brilho verde do topo; botão do Mark no canto inferior esquerdo, junto do menu; título logo abaixo do topo */
body.admin-page .hero-glow {
    display: none;
}

body.admin-page .mark-fab {
    left: 12px;
    right: auto;
}

@media (min-width: 761px) {
    body.admin-page > main.container {
        padding-top: 16px;
    }

    body.admin-page .admin-hero {
        margin-top: 0;
    }
}

/* Administrativo dentro da moldura: o botão do Mark fica no canto inferior esquerdo, junto do menu */
body:has(iframe[src*="/admin"]) .mark-fab {
    left: 12px;
    right: auto;
}

/* Administrativo: o cabeçalho vazio (só o brilho) some, e o título sobe para perto da barra superior */
body.admin-page > header.hero {
    display: none;
}

/* Administrativo: a área principal começa logo abaixo da barra superior (sem a margem negativa das outras páginas) */
html body.admin-page > main.container {
    margin-top: 0;
    padding-top: 18px;
}

/* Administrativo: cabeçalho no mesmo estilo do banner de Downloads (cartão com brilho e animação suave) */
body.admin-page .admin-hero.toolbar-banner {
    margin-top: 0;
    padding: 16px 20px;
    border-radius: 20px;
}

body.admin-page .admin-hero.toolbar-banner .admin-hero-icon {
    animation: adminHeroFloat 3.2s ease-in-out infinite;
}

@keyframes adminHeroFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.admin-page .admin-hero.toolbar-banner .admin-hero-icon {
        animation: none;
    }
}

/* Administrativo: filtros na mesma linha da busca (antes do Novo usuário); resumos sem bordas */
.admin-bar .admin-bar-filters {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.admin-stats-inline {
    border: 0;
    background: none;
}

.admin-stats-inline .admin-stat,
.admin-stats-inline .admin-stat + .admin-stat {
    border: 0;
    background: none;
}

.admin-hero-icon {
    border: 0;
}

/* Administrativo: busca, filtros e Novo usuário na mesma linha; ao passar o mouse, o Novo usuário fica verde com texto branco */
@media (min-width: 761px) {
    .admin-bar {
        flex-wrap: nowrap;
    }

    .admin-bar .report-search {
        flex: 1 1 0;
        min-width: 200px;
    }
}

#openCreateUser:hover,
#openCreateUser:focus-visible {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

/* Administrativo: cabeçalho em branco (título, ícone e abas), sem o fundo do ícone e sem a legenda */
body.admin-page .admin-hero.toolbar-banner h1,
body.admin-page .admin-hero.toolbar-banner .admin-hero-icon,
body.admin-page .admin-hero.toolbar-banner .admin-hero-icon .icon {
    color: #fff;
}

body.admin-page .admin-hero-icon {
    background: none;
    border: 0;
}

body.admin-page .admin-hero-title .admin-tabs {
    margin-top: 8px;
    border-bottom: 0;
}

body.admin-page .admin-hero-title .admin-tabs a {
    color: rgba(255, 255, 255, 0.6);
}

body.admin-page .admin-hero-title .admin-tabs a[aria-current="page"],
body.admin-page .admin-hero-title .admin-tabs a[aria-current="page"] .icon {
    color: #fff;
    border-bottom-color: #fff;
}

/* Administrativo dentro da moldura: a dica "Dúvidas? Fale com o Mark" fica do lado esquerdo, junto do botão do Mark */
body:has(iframe[src*="/admin"]) .mark-hint {
    left: 84px;
    right: auto;
}

/* Administrativo: o cabeçalho segue o fluxo normal (sem a posição fixa da classe toolbar), logo acima da busca */
body.admin-page .admin-hero.toolbar-banner {
    position: relative;
    top: auto;
    margin-bottom: 10px;
}

/* Administrativo: ícone de destaque, frase de apoio, barra e filtros mais compactos, espaçamento regular */
body.admin-page .admin-hero.toolbar-banner {
    padding: 14px 20px;
    margin-bottom: 14px;
}

body.admin-page .admin-hero-title {
    gap: 14px;
}

body.admin-page .admin-hero-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.18);
}

body.admin-page .admin-hero-icon .icon {
    width: 24px;
    height: 24px;
}

body.admin-page .admin-hero-title h1 {
    font-size: 18px;
    line-height: 1.2;
}

body.admin-page .admin-hero-title p {
    display: block;
    margin: 3px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

body.admin-page .admin-stats-inline .admin-stat strong {
    font-size: 16px;
}

body.admin-page .admin-stats-inline .admin-stat span {
    font-size: 11.5px;
}

body.admin-page .admin-bar {
    gap: 8px;
    padding: 4px 0 10px;
}

body.admin-page .admin-bar .report-search {
    height: 34px;
    font-size: 13px;
}

body.admin-page .admin-bar .btn {
    height: 34px;
    padding: 0 12px;
    font-size: 12.5px;
}

body.admin-page .admin-bar-filters {
    font-size: 12.5px;
    gap: 6px;
}

body.admin-page .admin-bar-filters .picker-button {
    height: 34px;
    padding: 0 10px;
    font-size: 12.5px;
}

/* Administrativo: ícone limpo (sem fundo); abas encostadas na borda de baixo do cabeçalho; busca mais acima */
body.admin-page .admin-hero.toolbar-banner {
    padding: 14px 20px 0;
    margin-bottom: 8px;
    align-items: stretch;
}

body.admin-page .admin-hero-title {
    align-self: stretch;
}

body.admin-page .admin-hero-title > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
}

body.admin-page .admin-hero-title .admin-tabs {
    margin: auto 0 0;
    padding-bottom: 0;
}

body.admin-page .admin-hero-title .admin-tabs a {
    padding-bottom: 10px;
}

body.admin-page .admin-hero-icon {
    width: auto;
    height: auto;
    background: none;
    border: 0;
    box-shadow: none;
}

body.admin-page .admin-hero-icon .icon {
    width: 34px;
    height: 34px;
    color: #fff;
}

body.admin-page .admin-bar {
    padding: 0 0 8px;
}

/* Cartão mais baixo: editar em cima de relatório (à direita); "Acessou" na mesma linha de "Administrador" */
@media (min-width: 761px) {
    #usersList .user-row {
        grid-template-columns: 52px minmax(0, 1fr) auto;
        grid-template-areas:
            "user contact actions"
            "foot foot foot";
        gap: 8px 12px;
        padding: 12px 14px;
    }

    #usersList .u-user {
        width: 52px;
    }

    #usersList .u-user .user-avatar {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }

    #usersList .user-row .u-foot {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        padding-top: 0;
        margin-top: 0;
        border-top: 0;
    }

    #usersList .user-row .u-last {
        white-space: nowrap;
    }

    #usersList .user-row .user-actions {
        grid-area: actions;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    #usersList .user-row .user-actions .btn {
        height: 28px;
    }
}

/* Administrativo no celular: a barra mostra só o logo e o nome fixo "Administrativo" */
@media (max-width: 760px) {
    body.admin-page .topbar .brand-subtitle {
        display: inline-flex;
    }

    body.admin-page .topbar .help-link,
    body.admin-page .topbar .lang-button,
    body.admin-page .topbar .account-button {
        display: none;
    }
}

/* Administrativo no celular: some o nome Help4Desk da barra (fica o logo e o nome Administrativo); os botões voltam
   para a linha de baixo do cartão, à direita, lado a lado */
@media (max-width: 760px) {
    body.admin-page .topbar .logo-word {
        display: none;
    }

    #usersList .user-row .user-actions {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
}

/* Administrativo no computador: botões lado a lado no rodapé do cartão (à direita); o título some, já que "Administrativo" fica fixo na barra */
@media (min-width: 761px) {
    body.admin-page .admin-hero-title h1,
    body.admin-page .admin-hero-title > div > p {
        display: none;
    }

    #usersList .user-row .u-foot {
        justify-content: space-between;
    }

    #usersList .user-row .user-actions {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
}

/* Administrativo no computador: a frase de apoio vira o subtítulo do cabeçalho; o último acesso volta para baixo do papel, com os botões à direita */
@media (min-width: 761px) {
    body.admin-page .admin-hero-title > div > p {
        display: block;
        margin: 4px 0 0;
    }

    #usersList .user-row .u-foot {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "role actions"
            "last actions";
        row-gap: 4px;
        column-gap: 12px;
        justify-content: normal;
    }

    #usersList .user-row .u-role-line {
        grid-area: role;
    }

    #usersList .user-row .u-last {
        grid-area: last;
    }

    #usersList .user-row .user-actions {
        grid-area: actions;
        justify-self: end;
    }
}

/* Administrativo no computador: ícone levantado para alinhar com o subtítulo; espaçamento uniforme de 12px entre cabeçalho, busca e cartões */
@media (min-width: 761px) {
    body.admin-page .admin-hero-icon {
        align-self: flex-start;
        margin-top: 6px;
    }

    body.admin-page .admin-hero.toolbar-banner {
        margin-bottom: 12px;
    }

    body.admin-page .admin-bar {
        padding: 0 0 12px;
    }

    #usersList {
        gap: 12px;
    }
}

/* Administrativo no computador: subtítulo um pouco maior */
@media (min-width: 761px) {
    body.admin-page .admin-hero-title > div > p {
        font-size: 13.5px;
    }
}

/* Administrativo no computador: um pouco mais de espaço entre as abas e a busca, e entre o telefone e o papel no cartão */
@media (min-width: 761px) {
    body.admin-page .admin-bar {
        padding-top: 8px;
    }

    #usersList .user-row .u-foot {
        margin-top: 6px;
    }
}

/* Administrativo no computador: um pouco mais de espaço entre a barra de busca e os cartões */
@media (min-width: 761px) {
    body.admin-page .admin-bar {
        padding-bottom: 16px;
    }
}

/* Administrativo no computador: a frase da parte administrativa aparece como título (menor), e a busca tem um pouco mais de espaço até os cartões */
@media (min-width: 761px) {
    body.admin-page .admin-hero-title > div > p {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        line-height: 1.25;
    }

    body.admin-page .admin-bar {
        padding-bottom: 22px;
    }
}

/* Administrativo no computador: a lista de usuários desce um pouco depois da barra de busca */
@media (min-width: 761px) {
    body.admin-page .admin-bar {
        padding-bottom: 30px;
    }
}

/* Administrativo no celular: barra só com o logo; título visível; busca, filtros e Novo usuário fixos no topo ao rolar;
   botão do Mark e botão do menu com o mesmo tamanho */
@media (max-width: 760px) {
    body.admin-page .topbar .brand-subtitle {
        display: none !important;
    }

    body.admin-page .admin-hero-title h1 {
        display: block;
    }

    body.admin-page .admin-head {
        position: sticky;
        top: 64px;
        z-index: 30;
        padding: 8px 0 10px;
        background: var(--ink);
    }

    body.admin-page .admin-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 0;
    }

    body.admin-page .admin-bar .report-search {
        flex: 1 1 0;
        min-width: 0;
        height: 38px;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 0 10px;
    }

    body.admin-page .admin-bar #openCreateUser {
        flex: 0 0 auto;
        height: 38px;
        padding: 0 12px;
        font-size: 13px;
        border-radius: 12px;
    }

    body.admin-page .admin-bar-filters {
        order: 3;
        flex: 0 0 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    body.admin-page .admin-bar-filters .picker {
        width: 100%;
    }

    body.admin-page .admin-bar-filters .picker-button {
        width: 100%;
        height: 38px;
        padding: 0 10px;
        font-size: 13px;
        border: 1px solid var(--line);
        border-radius: 12px;
    }

    .mobile-menu-button {
        height: 42px;
        min-width: 42px;
        bottom: 24px;
    }

    .mark-fab {
        width: 42px;
        height: 42px;
        bottom: 24px;
    }
}

/* Administrativo no celular: visual parecido com o do computador (cartão com avatar, botões com nome, espaçamentos iguais) */
@media (max-width: 760px) {
    body.admin-page .admin-hero-title h1 {
        font-size: 18px;
    }

    body.admin-page .admin-hero-title > div > p {
        display: block;
        font-size: 12.5px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
    }

    #usersList {
        gap: 12px;
    }

    #usersList .user-row {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 8px 12px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    #usersList .u-user {
        width: 52px;
    }

    #usersList .u-user .user-avatar {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }

    #usersList .user-row .user-actions .btn {
        height: 30px;
        padding: 0 10px;
        font-size: 12px;
        border-radius: 999px;
        gap: 4px;
    }

    #usersList .user-row .user-actions .btn span {
        display: inline;
    }

    #usersList .user-row .u-foot {
        margin-top: 6px;
    }
}

/* Administrativo no celular: botões com a largura do próprio texto (sem sobrepor) */
@media (max-width: 760px) {
    #usersList .user-row .user-actions {
        width: auto;
        flex-wrap: nowrap;
    }

    #usersList .user-row .user-actions .btn {
        width: auto;
        min-width: 0;
        white-space: nowrap;
    }
}

/* Administrativo no celular: busca em cima (largura toda); embaixo, os dois filtros e o Novo usuário na mesma linha;
   menu e ícones do topo de volta; editar e relatório empilhados; sem linha no rodapé; papel e último acesso alinhados */
@media (max-width: 760px) {
    body.admin-page .topbar .help-link,
    body.admin-page .topbar .lang-button,
    body.admin-page .topbar .account-button {
        display: revert;
    }

    body.admin-page .admin-bar {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 8px;
        align-items: center;
    }

    body.admin-page .admin-bar .report-search {
        grid-column: 1 / -1;
        order: 0;
    }

    body.admin-page .admin-bar-filters {
        display: contents;
    }

    body.admin-page .admin-bar-filters .picker {
        order: 1;
        min-width: 0;
    }

    body.admin-page .admin-bar-filters .picker-button {
        height: 36px;
        padding: 0 8px;
        font-size: 12px;
        gap: 4px;
    }

    body.admin-page .admin-bar-filters .picker-button .icon {
        width: 14px;
        height: 14px;
    }

    body.admin-page .admin-bar #openCreateUser {
        order: 2;
        height: 36px;
        padding: 0 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    #usersList .user-row .u-foot {
        border-top: 0;
        margin-top: 4px;
    }

    #usersList .user-row .user-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    #usersList .user-row .u-role-line,
    #usersList .user-row .u-last {
        justify-self: start;
        text-align: left;
    }
}

/* Administrativo no celular, conforme a referência: resumos em colunas (ícone, número, nome) sem caixas;
   busca só com linha embaixo; filtros sem caixa; editar e relatório só com ícone, lado a lado */
@media (max-width: 760px) {
    body.admin-page .admin-stats-inline {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        background: none;
        border: 0;
        padding: 0;
        margin-top: 10px;
    }

    body.admin-page .admin-stats-inline .admin-stat {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 0;
        border: 0;
        background: none;
    }

    body.admin-page .admin-stats-inline .admin-stat .icon {
        width: 18px;
        height: 18px;
    }

    body.admin-page .admin-stats-inline .admin-stat strong {
        font-size: 16px;
    }

    body.admin-page .admin-stats-inline .admin-stat span {
        font-size: 11px;
    }

    body.admin-page .admin-bar .report-search {
        height: 36px;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        padding: 0 4px;
    }

    body.admin-page .admin-bar-filters .picker-button {
        border: 0;
        background: none;
        padding: 0 4px;
        font-size: 13px;
        font-weight: 600;
    }

    #usersList .user-row .user-actions {
        flex-direction: row;
        align-items: center;
    }

    #usersList .user-row .user-actions .btn {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    #usersList .user-row .user-actions .btn span {
        display: none;
    }
}

/* Administrativo no celular: filtros só com ícone (o nome aparece ao tocar); Novo usuário mantém o texto;
   sem linhas dentro dos cartões; ícones do topo alinhados (ícone à esquerda, texto à direita) */
@media (max-width: 760px) {
    body.admin-page .topbar .help-link,
    body.admin-page .topbar .lang-button,
    body.admin-page .topbar .account-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    body.admin-page .topbar .speed-link {
        display: none;
    }

    body.admin-page .admin-bar-filters .picker-button {
        font-size: 0;
        gap: 0;
        transition: font-size 0.15s ease;
    }

    body.admin-page .admin-bar-filters .picker-button:focus-visible,
    body.admin-page .admin-bar-filters .picker-button:active,
    body.admin-page .admin-bar-filters .picker:focus-within .picker-button {
        font-size: 12px;
    }

    #usersList .user-row * {
        border-top: 0;
        border-bottom: 0;
    }
}

/* Administrativo no celular: no próprio cartão, os ícones (nome, e-mail, telefone) ficam dourados, como no computador */
@media (max-width: 760px) {
    #usersList .user-row.is-self .u-line > .icon,
    #usersList .user-row.is-self .u-name > .icon {
        color: var(--warn);
    }
}

/* Administrativo: se um conteúdo for maior que o espaço, o texto quebra dentro do cartão e o cartão cresce (não ultrapassa) */
#usersList {
    overflow: visible;
}

#usersList .user-row {
    height: auto;
    min-height: 0;
    max-height: none;
    min-width: 0;
    overflow: visible;
}

#usersList .user-row > * {
    min-width: 0;
}

#usersList .user-row .u-name,
#usersList .user-row .u-info > span,
#usersList .user-row .u-role-line,
#usersList .user-row .u-last {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#usersList .user-row .u-line,
#usersList .user-row .u-info {
    flex-wrap: wrap;
}

#usersList .user-row .user-actions {
    flex-wrap: wrap;
}

/* Administrativo no celular: sem fundo preto atrás da busca; resumo com número ao lado do ícone (cores do computador);
   filtros com o nome; menu dos filtros sobre a página; folga entre o ícone e o papel no cartão */
@media (max-width: 760px) {
    body.admin-page .admin-head {
        background: none;
    }

    body.admin-page .admin-stats-inline .admin-stat {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 6px;
    }

    body.admin-page .admin-stats-inline .admin-stat .icon {
        color: var(--spark);
    }

    body.admin-page .admin-stats-inline .admin-stat.is-ok .icon {
        color: var(--ok);
    }

    body.admin-page .admin-stats-inline .admin-stat.is-warn .icon {
        color: var(--warn);
    }

    body.admin-page .admin-stats-inline .admin-stat.is-danger .icon {
        color: var(--danger);
    }

    body.admin-page .admin-stats-inline .admin-stat strong {
        color: #fff;
    }

    body.admin-page .admin-stats-inline .admin-stat span {
        flex-basis: 100%;
    }

    body.admin-page .admin-bar-filters .picker-button {
        font-size: 11.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.admin-page .admin-bar-filters .picker-list {
        min-width: 200px;
        z-index: 80;
    }

    #usersList .user-row .u-role-line {
        gap: 8px;
    }
}

/* Celular (opção B): logo com o nome Administrativo ao lado; sem o nome Help4Desk e sem o título Gerenciamento administrativo (a legenda fica) */
@media (max-width: 760px) {
    body.admin-page .topbar .logo-word {
        display: none !important;
    }

    body.admin-page .topbar .brand-subtitle {
        display: inline-flex !important;
    }

    body.admin-page .admin-hero-title h1 {
        display: none;
    }
}

/* Celular: espaçamento um pouco maior entre as partes; ícone e texto do papel separados */
@media (max-width: 760px) {
    body.admin-page .admin-hero.toolbar-banner {
        margin-bottom: 14px;
    }

    body.admin-page .admin-bar {
        gap: 10px;
        padding-bottom: 12px;
    }

    #usersList {
        gap: 14px;
    }

    #usersList .user-row {
        padding: 14px 16px;
        gap: 10px 14px;
    }

    #usersList .user-row .u-role-line {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    #usersList .user-row .u-role-line > svg,
    #usersList .user-row .u-role-line .icon {
        margin-right: 2px;
    }
}

/* Celular: resumos alinhados (ícone e número na mesma linha, nome embaixo); ícones de contato centralizados com o texto */
@media (max-width: 760px) {
    body.admin-page .admin-stats-inline .admin-stat {
        display: grid;
        grid-template-columns: 18px auto;
        align-items: center;
        column-gap: 6px;
        row-gap: 2px;
    }

    body.admin-page .admin-stats-inline .admin-stat .icon {
        width: 18px;
        height: 18px;
    }

    body.admin-page .admin-stats-inline .admin-stat span {
        grid-column: 1 / -1;
    }

    #usersList .user-row .u-line {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #usersList .user-row .u-line > .icon {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        display: block;
    }
}

/* Celular: ao rolar, os cartões somem por trás da busca e dos filtros (a área fica com o fundo do site) */
@media (max-width: 760px) {
    body.admin-page .admin-head {
        background: var(--ink);
    }
}

/* Celular: a área da busca e dos filtros fica fixa com um degradê que some para baixo; o tema Matrix continua por trás */
@media (max-width: 760px) {
    body.admin-page .admin-head {
        background: linear-gradient(180deg, rgba(4, 8, 6, 0.96) 0%, rgba(4, 8, 6, 0.85) 60%, rgba(4, 8, 6, 0) 100%);
        padding-bottom: 22px;
        margin-bottom: -14px;
    }
}

/* Celular: filtros com o texto inteiro (sem reticências) e ícone separado do nome; frase do cabeçalho em destaque
   como no computador; resumos espaçados, com ícone e número na mesma linha e o nome embaixo */
@media (max-width: 760px) {
    body.admin-page .admin-hero-title > div > p {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        line-height: 1.25;
        margin: 0;
    }

    body.admin-page .admin-bar-filters {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    body.admin-page .admin-bar-filters .picker-button {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 11px;
        line-height: 1.2;
        gap: 6px;
        padding: 0 6px;
    }

    body.admin-page .admin-stats-inline {
        gap: 10px;
    }

    body.admin-page .admin-stats-inline .admin-stat {
        column-gap: 8px;
    }

    body.admin-page .admin-stats-inline .admin-stat span {
        font-size: 10.5px;
        white-space: nowrap;
    }
}

/* Celular: ícone bem junto do número nos resumos; texto logo embaixo */
@media (max-width: 760px) {
    body.admin-page .admin-stats-inline .admin-stat {
        column-gap: 4px;
    }
}

/* Celular: um botão "Filtros" com um menu (papel e situação); busca em cima e, embaixo, Filtros e Novo usuário */
@media (max-width: 760px) {
    body.admin-page .admin-bar-filters {
        display: none !important;
    }

    body.admin-page .admin-bar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    body.admin-page .mobile-filter {
        position: relative;
        order: 1;
    }

    body.admin-page .mobile-filter-btn {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: none;
        color: var(--text);
        font-size: 13px;
        font-weight: 600;
    }

    body.admin-page .mobile-filter-btn .icon {
        width: 16px;
        height: 16px;
    }

    body.admin-page .mobile-filter-panel {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        z-index: 80;
        width: min(280px, calc(100vw - 32px));
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    body.admin-page .mobile-filter-panel[hidden] {
        display: none;
    }

    body.admin-page .mobile-filter-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    body.admin-page .mobile-filter-group strong {
        font-size: 11.5px;
        color: var(--text-3);
    }

    body.admin-page .mobile-filter-option {
        width: 100%;
        padding: 8px 10px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: var(--text-2);
        font-size: 13px;
        text-align: left;
    }

    body.admin-page .mobile-filter-option.is-on {
        background: var(--brand-soft);
        color: var(--spark);
    }

    body.admin-page .admin-bar #openCreateUser {
        width: 100%;
        justify-content: center;
    }

    body.admin-page .admin-stats-inline .admin-stat {
        column-gap: 6px;
    }
}

/* Administrativo: relógio ao lado do último acesso no cartão */
#usersList .user-row .u-last .u-clock {
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    color: var(--text-3);
}

/* Administrativo: o relógio do último acesso tem o mesmo espaço até o texto que o ícone do papel (nas duas versões) */
#usersList .user-row .u-last {
    gap: 8px;
}

#usersList .user-row .u-last .u-clock {
    margin-right: 2px;
}

/* Administrativo: o relógio do último acesso tem o mesmo tamanho e a mesma cor do ícone do papel */
#usersList .user-row .u-last .u-clock {
    flex: 0 0 auto;
    width: var(--role-icon-size, 16px);
    height: var(--role-icon-size, 16px);
    color: var(--text-2);
    margin-right: 0;
}

/* Administrativo: o espaço entre o ícone e o texto é o mesmo no papel e no último acesso, nas duas versões */
#usersList .user-row .u-role-line,
#usersList .user-row .u-last {
    gap: 8px;
}

#usersList .user-row .u-role-line .icon,
#usersList .user-row .u-last .u-clock {
    margin-right: 0;
}

/* Administrativo: o último acesso é uma linha com ícone e texto, com o mesmo espaço do papel (nas duas versões) */
#usersList .user-row .u-last {
    display: flex;
    align-items: center;
    gap: 8px;
}

#usersList .user-row .u-role-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Administrativo: o relógio tem o mesmo tamanho (18px) do ícone do papel */
#usersList .user-row .u-last .u-clock {
    width: 18px;
    height: 18px;
}

/* Celular: resumos só com ícone e número (alinhados); o nome completo aparece em pílula ao lado ao passar o mouse ou tocar */
@media (max-width: 760px) {
    body.admin-page .admin-stats-inline .admin-stat {
        position: relative;
        display: grid;
        grid-template-columns: 18px auto;
        align-items: center;
        column-gap: 6px;
        row-gap: 0;
    }

    body.admin-page .admin-stats-inline .admin-stat .icon {
        width: 18px;
        height: 18px;
    }

    body.admin-page .admin-stats-inline .admin-stat strong {
        font-size: 16px;
        line-height: 1;
    }

    body.admin-page .admin-stats-inline .admin-stat span {
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        padding: 4px 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--text);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: 5;
    }

    body.admin-page .admin-stats-inline .admin-stat:hover span,
    body.admin-page .admin-stats-inline .admin-stat:focus-within span {
        opacity: 1;
    }
}

/* Celular: resumos espaçados; o nome completo aparece embaixo do número, no lugar onde antes ficava o texto */
@media (max-width: 760px) {
    body.admin-page .admin-stats-inline {
        gap: 12px;
        justify-items: start;
    }

    body.admin-page .admin-stats-inline .admin-stat {
        column-gap: 6px;
    }

    body.admin-page .admin-stats-inline .admin-stat span {
        left: 0;
        top: calc(100% + 4px);
        transform: none;
    }
}

/* Celular: mais espaço entre os quatro resumos */
@media (max-width: 760px) {
    body.admin-page .admin-stats-inline {
        gap: 20px;
        justify-content: space-between;
    }
}

/* Celular: o ícone do escudo alinhado com a frase de apoio; os resumos ficam abaixo do cabeçalho, sem a caixa */
@media (max-width: 760px) {
    body.admin-page .admin-hero-title {
        align-items: flex-start;
    }

    body.admin-page .admin-hero-icon {
        align-self: flex-start;
        margin-top: 2px;
    }

    body.admin-page .admin-stats-inline {
        margin: 10px 0 12px;
        padding: 0 4px;
        border: 0;
        background: none;
    }
}

/* Celular: o nome do resumo (pílula) aparece por cima da busca e dos filtros, sem ficar atrás */
@media (max-width: 760px) {
    body.admin-page .admin-stats-inline {
        position: relative;
        z-index: 40;
    }

    body.admin-page .admin-stats-inline .admin-stat span {
        z-index: 60;
    }
}

/* Celular: o nome do resumo não sai da tela (o último abre para a esquerda); os botões dos cartões mostram o nome em pílula ao passar o mouse ou tocar */
@media (max-width: 760px) {
    body.admin-page .admin-stats-inline .admin-stat:last-child span {
        left: auto;
        right: 0;
    }

    body.admin-page #usersList .user-row .user-actions .btn {
        position: relative;
        overflow: visible;
    }

    body.admin-page #usersList .user-row .user-actions .btn span {
        display: block;
        position: absolute;
        right: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        padding: 4px 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--text);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    body.admin-page #usersList .user-row .user-actions .btn:hover span,
    body.admin-page #usersList .user-row .user-actions .btn:focus-visible span {
        opacity: 1;
    }
}

/* Celular (página do Administrativo): Mark e menu com o mesmo tamanho e a mesma altura, cada um no seu canto;
   o nome Administrativo afastado do logo; o botão de ajuda mostra o nome em pílula ao passar o mouse */
@media (max-width: 760px) {
    body.admin-page .mark-fab {
        left: 24px;
        right: auto;
        bottom: 24px;
        width: 42px;
        height: 42px;
    }

    body.admin-page .mobile-menu-button {
        right: 24px;
        left: auto;
        bottom: 24px;
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    body.admin-page .topbar .brand-subtitle {
        margin-left: 12px;
    }

    body.admin-page .topbar .help-link {
        position: relative;
    }

    body.admin-page .topbar .help-link::after {
        content: attr(aria-label);
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        padding: 4px 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--text);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    body.admin-page .topbar .help-link:hover::after,
    body.admin-page .topbar .help-link:focus-visible::after {
        opacity: 1;
    }
}

/* Celular (administrativo): o rodapé tem espaço embaixo para os botões do Mark e do menu não cobrirem os textos */
@media (max-width: 760px) {
    body.admin-page .site-footer {
        padding-bottom: 96px;
    }
}

/* Celular (administrativo, dentro da moldura): Mark a 24px da borda esquerda, igual ao menu na direita */
@media (max-width: 760px) {
    body:has(iframe[src*="/admin"]) .mark-fab {
        left: 24px;
        bottom: 24px;
    }
}

/* Celular (administrativo): o Mark sobe um pouco; o menu continua no lugar */
@media (max-width: 760px) {
    body:has(iframe[src*="/admin"]) .mark-fab {
        bottom: 40px;
    }
}

/* Computador: o botão Filtros (só do celular e da janela dividida) não aparece; ficam os filtros normais */
@media (min-width: 1101px) {
    body.admin-page .mobile-filter {
        display: none;
    }
}

/* Computador: os filtros mostram o texto inteiro (Todos os papéis, Todas as situações) */
@media (min-width: 761px) {
    body.admin-page .admin-bar-filters .picker-button {
        font-size: 13px;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    body.admin-page .admin-bar-filters .picker-value {
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }
}

/* Equipes no Administrativo: mesmo visual dos usuários (cabeçalho em banner, busca, cartões compactos, botões com nome) */
body.admin-page .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.admin-page .team-grid .team-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas:
        "logo body tag"
        "foot foot foot";
    align-items: start;
    gap: 8px 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

body.admin-page .team-grid .team-logo {
    grid-area: logo;
    width: 52px;
    height: 52px;
}

body.admin-page .team-grid .team-card-body {
    grid-area: body;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.admin-page .team-grid .team-card-name {
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

body.admin-page .team-grid .team-card-meta {
    font-size: 12px;
    color: var(--text-3);
}

body.admin-page .team-grid .team-tag {
    grid-area: tag;
    justify-self: end;
}

body.admin-page .team-grid .team-card-edit {
    grid-area: foot;
    justify-self: end;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    gap: 6px;
}

body.admin-page .team-grid .team-card-edit-label {
    display: inline;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 760px) {
    body.admin-page .team-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Equipes no Administrativo: sem a caixa extra em volta da lista; o nome do botão de editar aparece */
body.admin-page .team-section {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

body.admin-page .team-grid .team-card-edit .team-card-edit-label {
    display: inline !important;
}

/* Equipes no Administrativo: aviso grande quando não há equipe */
body.admin-page .team-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    padding: 28px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 16px;
    background: var(--surface);
}

body.admin-page .team-empty-card .team-subtitle {
    font-size: 20px;
    font-weight: 800;
}

body.admin-page .team-empty-card .team-hint {
    font-size: 14px;
    color: var(--text-3);
}

/* Equipes: o aviso de sem equipe só aparece quando a pessoa não tem equipe */
body.admin-page .team-empty-card[hidden] {
    display: none;
}

/* Equipes no Administrativo: cartão como o de usuário (borda verde = ativa; linhas de membros e de papel com ícone; editar embaixo, à direita) */
body.admin-page .team-grid .team-card {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
        "logo body"
        "foot foot";
    border-color: var(--ok);
}

body.admin-page .team-grid .team-card-body {
    gap: 6px;
}

body.admin-page .team-grid .team-card-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-2);
}

body.admin-page .team-grid .team-card-line > .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

body.admin-page .team-grid .team-card-role.is-admin {
    color: var(--warn);
    font-weight: 600;
}

body.admin-page .team-grid .team-card-edit {
    grid-area: foot;
    justify-self: end;
}

/* Equipes no Administrativo: a paginação (Mostrando...) fica sempre no fim da página */
body.admin-page main.container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}

body.admin-page #teamsPager {
    margin-top: auto;
}

/* Equipes no Administrativo: ícone do papel embaixo da foto, alinhado com o botão de editar (que mostra o nome inteiro) */
body.admin-page .team-grid .team-card {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
        "logo body"
        "role foot";
    align-items: center;
}

body.admin-page .team-grid .team-card-role {
    grid-area: role;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    color: var(--text-2);
}

body.admin-page .team-grid .team-card-role.is-admin {
    color: var(--warn);
}

body.admin-page .team-grid .team-card-role > .icon {
    width: 18px;
    height: 18px;
}

body.admin-page .team-grid .team-card-edit {
    grid-area: foot;
    justify-self: end;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
}

body.admin-page .team-grid .team-card-edit-label {
    display: inline !important;
}

/* Equipes no Administrativo: botão de editar com o nome ao lado do ícone, sem efeito ao passar o mouse;
   sem o ícone de papel (quem vê o botão já é administrador); paginação no rodapé da tela */
body.admin-page .team-grid .team-card-edit {
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 0 12px;
    gap: 6px;
    transition: none;
    transform: none;
}

body.admin-page .team-grid .team-card-edit:hover,
body.admin-page .team-grid .team-card-edit:focus-visible {
    width: auto;
    transform: none;
}

body.admin-page .team-grid .team-card-edit-label {
    display: inline !important;
}

body.admin-page .team-grid .team-card-role {
    display: none;
}

body.admin-page main.container {
    min-height: calc(100vh - 110px);
}

/* Administrativo: o que está com o atributo hidden some de verdade (resumos, listas e barras de cada aba) */
body.admin-page [hidden] {
    display: none !important;
}

/* Celular (administrativo) espelhado: menu à esquerda; Mark à direita (com a dica e o painel do lado certo) */
@media (max-width: 760px) {
    body:has(iframe[src*="/admin"]) .mark-fab {
        left: auto;
        right: 24px;
        bottom: 40px;
    }

    body:has(iframe[src*="/admin"]) .mark-fab-label {
        left: auto;
        right: calc(100% + 10px);
    }

    body:has(iframe[src*="/admin"]) .mark-hint {
        left: auto;
        right: 84px;
    }

    body.admin-page .mobile-menu-button {
        left: 24px;
        right: auto;
        bottom: 24px;
    }

    body.admin-page .mobile-menu {
        left: 24px !important;
        right: auto !important;
    }
}

/* Janela média: o botão Novo usuário aparece; o botão do menu mostra o nome Menu */
@media (min-width: 521px) and (max-width: 1100px) {
    body.admin-page #openCreateUser:not([hidden]) {
        display: inline-flex !important;
        grid-column: 2;
    }

    .mobile-menu-button span {
        display: inline !important;
    }

    .mobile-menu-button {
        width: auto;
        padding: 0 14px;
        gap: 6px;
    }
}

/* Mark e menu na mesma altura e com a mesma margem lateral (páginas do Administrativo, celular e janela média);
   o botão Novo usuário fica visível e inteiro na linha de busca */
@media (max-width: 1100px) {
    body:has(iframe[src*="/admin"]) .mark-fab,
    body.admin-page .mobile-menu-button {
        bottom: 40px !important;
    }

    body:has(iframe[src*="/admin"]) .mark-fab {
        right: 24px !important;
        left: auto !important;
    }

    body.admin-page .mobile-menu-button {
        left: 24px !important;
        right: auto !important;
    }
}

@media (min-width: 521px) and (max-width: 1100px) {
    body.admin-page .admin-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
    }

    body.admin-page .admin-bar .report-search {
        grid-column: 1 / -1;
    }

    body.admin-page #openCreateUser {
        display: flex !important;
        min-width: 0;
        width: 100%;
        justify-content: center;
        white-space: nowrap;
    }
}

/* Administrativo: o ícone de Novo usuário nunca é espremido pelo texto (em qualquer largura) */
body.admin-page #openCreateUser {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

body.admin-page #openCreateUser > svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: block;
}

/* Janela média: volta ao layout de computador (lateral com ícones, topo normal, linha de busca numa só linha); o botão do menu some nessa faixa */
@media (min-width: 521px) and (max-width: 1100px) {
    .side-rail {
        display: flex;
    }

    body.has-rail {
        padding-left: 76px;
    }

    body.has-rail .topbar .main-nav {
        display: none;
    }

    .mobile-menu-button,
    .mobile-menu {
        display: none;
    }

    body.has-rail .topbar,
    body.has-rail .site-header .topbar {
        margin-left: -76px !important;
        padding-left: calc(32px - 19.75px);
    }

    .mobile-menu-button {
        display: none !important;
    }

    body.admin-page .admin-bar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }

    body.admin-page .admin-bar .report-search {
        flex: 1 1 0;
        min-width: 160px;
        grid-column: auto;
    }

    body.admin-page .admin-bar-filters {
        display: none !important;
        flex: 0 0 auto;
        gap: 8px;
        order: 0;
    }

    body.admin-page .mobile-filter {
        display: inline-flex;
    }

    body.admin-page #openCreateUser {
        width: auto;
        justify-content: initial;
        flex: 0 0 auto;
    }
}

/* Janela média (com a lateral de ícones): o Mark fica no lado esquerdo, como no computador */
@media (min-width: 521px) and (max-width: 1100px) {
    body:has(iframe[src*="/admin"]) .mark-fab {
        left: 24px !important;
        right: auto !important;
    }

    body:has(iframe[src*="/admin"]) .mark-fab-label {
        left: calc(100% + 10px) !important;
        right: auto !important;
    }

    body:has(iframe[src*="/admin"]) .mark-hint {
        left: 84px !important;
        right: auto !important;
    }
}

/* Administrativo no computador (janela média): espelho. Lateral de ícones à direita; Mark na mesma coluna dela (na vertical); logo à esquerda */
@media (min-width: 521px) and (max-width: 1100px) {
    body.has-rail:has(iframe[src*="/admin"]) {
        padding-left: 0 !important;
        padding-right: 76px !important;
    }

    body:has(iframe[src*="/admin"]) .side-rail {
        left: auto !important;
        right: 0 !important;
    }

    body.has-rail:has(iframe[src*="/admin"]) .topbar,
    body.has-rail:has(iframe[src*="/admin"]) .site-header .topbar {
        margin-left: 0 !important;
        margin-right: -76px !important;
        padding-left: 16px !important;
        padding-right: calc(32px - 19.75px) !important;
    }

    body:has(iframe[src*="/admin"]) .mark-fab {
        left: auto !important;
        right: 17px !important;
        bottom: 24px !important;
    }

    body:has(iframe[src*="/admin"]) .mark-fab-label {
        left: auto !important;
        right: calc(100% + 10px) !important;
    }

    body:has(iframe[src*="/admin"]) .mark-hint {
        left: auto !important;
        right: 92px !important;
    }
}

/* Administrativo no computador (janela média), espelho: o nome de cada item da lateral aparece ao passar o mouse, abrindo para a esquerda */
@media (min-width: 521px) and (max-width: 1100px) {
    body:has(iframe[src*="/admin"]) .side-rail {
        overflow: visible !important;
    }

    body:has(iframe[src*="/admin"]) .side-rail-links a {
        position: relative;
    }

    body:has(iframe[src*="/admin"]) .side-rail-links a > span {
        display: block !important;
        position: absolute;
        right: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        padding: 6px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--text);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    body:has(iframe[src*="/admin"]) .side-rail-links a:hover > span,
    body:has(iframe[src*="/admin"]) .side-rail-links a:focus-visible > span {
        opacity: 1;
    }
}

/* Administrativo no computador (janela media), dentro da propria pagina: os nomes da lateral aparecem ao passar o mouse, abrindo para a esquerda */
@media (min-width: 761px) and (max-width: 1100px) {
    body.admin-page .side-rail {
        overflow: visible !important;
    }

    body.admin-page .side-rail-links a {
        position: relative;
    }

    body.admin-page .side-rail-links a > span {
        display: block !important;
        position: absolute;
        right: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        padding: 6px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--text);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    body.admin-page .side-rail-links a:hover > span,
    body.admin-page .side-rail-links a:focus-visible > span {
        opacity: 1;
    }
}

/* Administrativo no computador (janela media): a lateral mantém 76px e não tem fundo; só os nomes aparecem por cima, ao passar o mouse */
@media (min-width: 761px) and (max-width: 1100px) {
    body.admin-page .side-rail,
    body.admin-page .side-rail:hover,
    body.admin-page .side-rail:focus-within {
        width: 76px !important;
        background: none !important;
        box-shadow: none !important;
    }
}

/* Administrativo no computador (janela media): o nome da lateral não é cortado (largura e overflow liberados) */
@media (min-width: 761px) and (max-width: 1100px) {
    body.admin-page .side-rail-links a > span {
        overflow: visible !important;
        width: auto !important;
        max-width: none !important;
        min-width: max-content !important;
        height: auto !important;
    }
}

/* Administrativo no computador (janela media): o nome da lateral aparece (exibido em bloco) */
@media (min-width: 761px) and (max-width: 1100px) {
    body.admin-page .side-rail .side-rail-links a > span {
        display: block !important;
        visibility: visible !important;
    }
}

/* Administrativo no computador (janela media): só o nome do item sob o mouse aparece, com fade (como o Mark) */
@media (min-width: 761px) and (max-width: 1100px) {
    body.admin-page .side-rail:hover .side-rail-links a > span,
    body.admin-page .side-rail:focus-within .side-rail-links a > span {
        opacity: 0 !important;
    }

    body.admin-page .side-rail .side-rail-links a:hover > span,
    body.admin-page .side-rail .side-rail-links a:focus-visible > span {
        opacity: 1 !important;
    }
}

/* Administrativo no computador (janela media): igual ao original, espelhado. Sombreado preto da lateral vai da direita para a esquerda; ao passar o mouse, todos os nomes aparecem */
@media (min-width: 761px) and (max-width: 1100px) {
    body.admin-page .side-rail,
    body.admin-page .side-rail:hover,
    body.admin-page .side-rail:focus-within {
        background: linear-gradient(270deg, rgba(3, 8, 5, 0.96) 0%, rgba(3, 8, 5, 0.78) 72%, rgba(3, 8, 5, 0.15) 100%) !important;
        box-shadow: none !important;
    }

    body.admin-page .side-rail:hover .side-rail-links a > span,
    body.admin-page .side-rail:focus-within .side-rail-links a > span {
        opacity: 1 !important;
    }
}

/* Administrativo no computador (janela media): o menu original, só espelhado: o nome abre para a esquerda do ícone, no mesmo estilo */
@media (min-width: 761px) and (max-width: 1100px) {
    body.admin-page .side-rail-links a {
        position: relative;
        flex-direction: row-reverse;
        justify-content: flex-start;
    }

    body.admin-page .side-rail-links a > span {
        display: block !important;
        position: static !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 10px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        font-size: inherit;
        font-weight: 500;
        color: inherit;
        text-align: right;
        white-space: nowrap;
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    body.admin-page .side-rail:hover .side-rail-links a > span,
    body.admin-page .side-rail:focus-within .side-rail-links a > span {
        opacity: 1 !important;
    }
}

/* Administrativo no computador (janela media): os nomes da lateral mais perto dos ícones */
@media (min-width: 761px) and (max-width: 1100px) {
    body.admin-page .side-rail-links a > span {
        margin: 0 4px 0 0 !important;
    }
}

/* Administrativo no computador (janela media): cada item da lateral tem a largura do icone; o nome abre para a esquerda sem empurrar o icone para fora */
@media (min-width: 761px) and (max-width: 1100px) {
    body.admin-page .side-rail-links a {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        padding: 0 12px !important;
        justify-content: center;
    }
}

/* Administrativo no computador (janela media): volta ao lado esquerdo, como estava antes do espelho (lateral, sombreado, nomes para a direita, Mark a esquerda) */
@media (min-width: 761px) and (max-width: 1100px) {
    body.admin-page .side-rail,
    body.admin-page .side-rail:hover,
    body.admin-page .side-rail:focus-within {
        left: 0 !important;
        right: auto !important;
        width: 76px !important;
        overflow: hidden !important;
        background: linear-gradient(90deg, rgba(3, 8, 5, 0.96) 0%, rgba(3, 8, 5, 0.78) 72%, rgba(3, 8, 5, 0.15) 100%) !important;
    }

    body.has-rail.admin-page {
        padding-left: 76px !important;
        padding-right: 0 !important;
    }

    body.has-rail.admin-page .topbar,
    body.has-rail.admin-page .site-header .topbar {
        margin-left: -76px !important;
        margin-right: 0 !important;
        padding-left: calc(32px - 19.75px) !important;
    }

    body.admin-page .side-rail-links a {
        position: relative;
        flex-direction: row;
        justify-content: flex-start;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 12px !important;
    }

    body.admin-page .side-rail-links a > span {
        display: block !important;
        position: static !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 0 0 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    body.admin-page .side-rail:hover .side-rail-links a > span,
    body.admin-page .side-rail:focus-within .side-rail-links a > span {
        opacity: 1 !important;
    }

    body:has(iframe[src*="/admin"]) .mark-fab {
        left: 24px !important;
        right: auto !important;
        bottom: 40px !important;
    }

    body:has(iframe[src*="/admin"]) .mark-fab-label {
        left: calc(100% + 10px) !important;
        right: auto !important;
    }

    body:has(iframe[src*="/admin"]) .mark-hint {
        left: 84px !important;
        right: auto !important;
    }
}

/* Administrativo (janela media): volta ao lado esquerdo com prioridade sobre o espelho do site */
@media (min-width: 521px) and (max-width: 1100px) {
    html body.admin-page.has-rail .side-rail,
    html body.admin-page.has-rail .side-rail:hover,
    html body.admin-page.has-rail .side-rail:focus-within {
        left: 0 !important;
        right: auto !important;
        background: linear-gradient(90deg, rgba(3, 8, 5, 0.96) 0%, rgba(3, 8, 5, 0.78) 72%, rgba(3, 8, 5, 0.15) 100%) !important;
    }

    html body.admin-page.has-rail {
        padding-left: 76px !important;
        padding-right: 0 !important;
    }

    html body.admin-page.has-rail .topbar,
    html body.admin-page.has-rail .site-header .topbar {
        margin-left: -76px !important;
        margin-right: 0 !important;
    }
}

/* Administrativo no computador (janela media): o Mark com 42px, igual ao tamanho do botão de menu */
@media (min-width: 761px) and (max-width: 1100px) {
    body:has(iframe[src*="/admin"]) .mark-fab {
        width: 42px !important;
        height: 42px !important;
    }
}

/* Administrativo no computador (janela media): ao passar o mouse na lateral, os nomes aparecem sobre a pagina, com o fundo escuro que some em fade */
@media (min-width: 761px) and (max-width: 1100px) {
    body.admin-page .side-rail:hover,
    body.admin-page .side-rail:focus-within {
        width: 240px !important;
        overflow: visible !important;
        background: linear-gradient(90deg, rgba(3, 8, 5, 0.96) 0%, rgba(3, 8, 5, 0.78) 45%, rgba(3, 8, 5, 0) 100%) !important;
        transition: width 0.2s ease;
    }

    body.admin-page .side-rail:hover .side-rail-links a > span,
    body.admin-page .side-rail:focus-within .side-rail-links a > span {
        opacity: 1 !important;
    }
}

/* Administrativo na janela media (761 a 1100 px): cards em uma coluna, como no celular, sem texto cortado */
@media (min-width: 761px) and (max-width: 1100px) {
    html body.admin-page #usersList,
    html body.admin-page #teamsList,
    html body.admin-page .team-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Mark na janela media (761 a 1100 px): canto direito, como no celular, na tela do administrativo e na tela do site */
@media (min-width: 761px) and (max-width: 1100px) {
    body:has(iframe[src*="/admin"]) .mark-fab,
    body:not(:has(iframe[src*="/admin"])) .mark-fab {
        left: auto !important;
        right: 24px !important;
        bottom: 24px !important;
    }
}

/* Alinhamento na janela media (761 a 1100 px): topo, resumo e conteudo usam a mesma margem de 16 px dos dois lados */
@media (min-width: 761px) and (max-width: 1100px) {
    html body.has-rail:not(:has(iframe[src*="/admin"])) .topbar,
    html body.has-rail:not(:has(iframe[src*="/admin"])) .site-header .topbar {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html body.admin-page .admin-stats-inline {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
        justify-content: space-between;
    }

    html body.admin-page .admin-stats-inline .admin-stat {
        padding-left: 0 !important;
    }
}


/* Administrativo no computador (a partir de 1101 px): resumo em linha dentro do cabecalho, busca larga com filtros ao lado, cartoes em tres colunas; o botao Filtros do celular some */
@media (min-width: 1101px) {
    body.admin-page .admin-hero.toolbar-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 24px;
    }

    body.admin-page .admin-hero .admin-stats-inline {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 22px;
        width: auto;
        margin: 0;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0;
        border: 0;
        background: none;
    }

    body.admin-page .mobile-filter {
        display: none !important;
    }

    body.admin-page .admin-bar-filters {
        display: flex !important;
    }

    body.admin-page .admin-bar .report-search {
        flex: 1 1 260px;
        width: auto;
        min-width: 0;
    }

    body.admin-page #usersList {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        align-content: start;
    }
}


/* Central de ajuda com a lateral de icones (computador): o botao Topicos fica depois da lateral, sem ficar por baixo dela */
@media (min-width: 761px) {
    body.has-rail .help-topics {
        left: 92px !important;
    }
}


/* Central de ajuda (computador): Topicos e Menu do lado direito, Mark do lado esquerdo; a lateral de icones nao cobre os botoes */
@media (min-width: 761px) {
    body:has(.help-topics) .help-topics {
        left: auto !important;
        right: 24px !important;
        z-index: 70;
    }

    body:has(.help-topics) .help-topics-list {
        left: auto;
        right: 0;
    }

    body:has(.help-topics) .mobile-menu-button {
        left: auto !important;
        right: 24px !important;
        z-index: 70;
    }

    body:has(.help-topics) .mobile-menu {
        left: auto !important;
        right: 24px !important;
    }

    body:has(.help-topics) .mark-fab {
        left: 24px !important;
        right: auto !important;
    }

    body:has(.help-topics) .mark-hint {
        left: 92px !important;
        right: auto !important;
    }
}


/* Celular: o botao Menu vai para o lado direito; o Mark passa para o esquerdo (sem sobrepor). Na Central de ajuda, o Topicos tambem vai para a direita */
@media (max-width: 760px) {
    html body .mobile-menu-button {
        left: auto !important;
        right: 24px !important;
    }

    html body .mobile-menu:not([hidden]) {
        left: auto !important;
        right: 24px !important;
    }

    html body .mark-fab {
        left: 24px !important;
        right: auto !important;
    }

    html body .mark-hint {
        left: 92px !important;
        right: auto !important;
    }

    html body:has(.help-topics) .help-topics {
        left: auto !important;
        right: 24px !important;
    }
}


/* Administrativo: cada aba mostra só o seu resumo (usuários ou equipes), também no computador */
body.admin-page .admin-stats-inline[hidden] {
    display: none !important;
}


/* Administrativo (computador): resumo com espaço certo entre ícone, número e texto, e sem cortar o último item */
@media (min-width: 1101px) {
    body.admin-page .admin-hero .admin-stats-inline {
        gap: 20px;
        flex: 0 0 auto;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat {
        gap: 10px;
        min-width: 0;
        white-space: nowrap;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat > .icon {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat > div {
        display: grid;
        gap: 2px;
        line-height: 1.1;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat strong {
        font-size: 18px;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat span {
        font-size: 11px;
    }
}


/* Administrativo na janela dividida (521 a 1100 px): busca, Filtros e Novo usuario numa so linha, com a mesma altura e o mesmo espaco */
@media (min-width: 521px) and (max-width: 1100px) {
    body.admin-page .admin-bar {
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }

    body.admin-page .admin-bar .report-search {
        flex: 1 1 0;
        min-width: 0;
        height: 42px;
    }

    body.admin-page .admin-bar .mobile-filter,
    body.admin-page .admin-bar #openCreateUser {
        flex: 0 0 auto;
        height: 42px;
        width: auto;
    }
}


/* Administrativo na janela dividida (521 a 1100 px): nome do resumo ao lado do numero, em uma linha, sem cortar o ultimo item */
@media (min-width: 521px) and (max-width: 1100px) {
    body.admin-page .admin-stats-inline {
        gap: 14px;
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
    }

    body.admin-page .admin-stats-inline .admin-stat {
        gap: 6px;
        min-width: 0;
    }

    body.admin-page .admin-stats-inline .admin-stat > div {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
        white-space: nowrap;
    }

    body.admin-page .admin-stats-inline .admin-stat strong {
        font-size: 15px;
    }

    body.admin-page .admin-stats-inline .admin-stat span {
        font-size: 11px;
    }
}


/* Administrativo (computador, a partir de 1101 px): resumo com nome ao lado do numero e nenhum item cortado na borda da caixa */
@media (min-width: 1101px) {
    body.admin-page .admin-hero.toolbar-banner {
        gap: 16px;
    }

    body.admin-page .admin-hero-title {
        min-width: 0;
        flex: 1 1 auto;
    }

    body.admin-page .admin-hero .admin-stats-inline {
        flex: 0 1 auto;
        min-width: 0;
        gap: 18px;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat > div {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
        white-space: nowrap;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat strong {
        font-size: 16px;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat span {
        font-size: 11px;
    }
}


/* Administrativo: resumo inteiro dentro da caixa (um pouco mais para a esquerda); nome em negrito e do mesmo tamanho do numero */
@media (min-width: 521px) {
    body.admin-page .admin-stats-inline .admin-stat strong {
        font-size: inherit;
    }

    body.admin-page .admin-stats-inline .admin-stat span {
        font-size: inherit;
        font-weight: 700;
    }
}

@media (min-width: 1101px) {
    body.admin-page .admin-hero .admin-stats-inline {
        margin-right: 28px;
    }
}

@media (min-width: 521px) and (max-width: 1100px) {
    body.admin-page .admin-stats-inline {
        margin-right: 16px;
    }
}


/* Nome do resumo com o mesmo tamanho do numero (computador e janela dividida) */
@media (min-width: 1101px) {
    body.admin-page .admin-hero .admin-stats-inline .admin-stat span {
        font-size: 16px;
        font-weight: 700;
    }
}

@media (min-width: 521px) and (max-width: 1100px) {
    body.admin-page .admin-stats-inline .admin-stat span {
        font-size: 15px;
        font-weight: 700;
    }
}


/* Resumo (janela dividida): itens com o tamanho do proprio conteudo, lado a lado e quebrando de linha quando nao cabem; sem espacos enormes e sem corte */
@media (min-width: 521px) and (max-width: 1100px) {
    body.admin-page .admin-stats-inline {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px 22px;
        grid-template-columns: none;
    }

    body.admin-page .admin-stats-inline .admin-stat {
        flex: 0 0 auto;
        width: auto;
    }

    body.admin-page .admin-stats-inline .admin-stat > div {
        white-space: nowrap;
    }
}


/* Resumo no computador: nome e numero no mesmo tamanho, sem sobrepor um item no outro e sem cortar o ultimo */
@media (min-width: 1101px) {
    body.admin-page .admin-hero .admin-stats-inline {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 14px 20px;
        max-width: 60%;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat strong,
    body.admin-page .admin-hero .admin-stats-inline .admin-stat span {
        font-size: 15px;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat > div {
        white-space: nowrap;
    }
}


/* Resumo no computador: ocupa a sobra do cabecalho; se faltar espaco, o item quebra de linha em vez de sobrepor o seguinte */
@media (min-width: 1101px) {
    body.admin-page .admin-hero-title {
        flex: 0 1 auto;
    }

    body.admin-page .admin-hero .admin-stats-inline {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
        justify-content: flex-end;
        gap: 12px 24px;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat {
        flex: 0 0 auto;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat > div {
        white-space: normal;
    }
}


/* Administrativo: resumo inteiro dentro da caixa (um pouco mais para a esquerda); nome em negrito e do mesmo tamanho do numero */
@media (min-width: 521px) {
    body.admin-page .admin-stats-inline .admin-stat strong {
        font-size: inherit;
    }

    body.admin-page .admin-stats-inline .admin-stat span {
        font-size: inherit;
        font-weight: 700;
    }
}

@media (min-width: 1101px) {
    body.admin-page .admin-hero .admin-stats-inline {
        margin-right: 28px;
    }
}

@media (min-width: 521px) and (max-width: 1100px) {
    body.admin-page .admin-stats-inline {
        margin-right: 16px;
    }
}


/* Nome do resumo com o mesmo tamanho do numero (computador e janela dividida) */
@media (min-width: 1101px) {
    body.admin-page .admin-hero .admin-stats-inline .admin-stat span {
        font-size: 16px;
        font-weight: 700;
    }
}

@media (min-width: 521px) and (max-width: 1100px) {
    body.admin-page .admin-stats-inline .admin-stat span {
        font-size: 15px;
        font-weight: 700;
    }
}


/* Resumo (janela dividida): itens com o tamanho do proprio conteudo, lado a lado e quebrando de linha quando nao cabem; sem espacos enormes e sem corte */
@media (min-width: 521px) and (max-width: 1100px) {
    body.admin-page .admin-stats-inline {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px 22px;
        grid-template-columns: none;
    }

    body.admin-page .admin-stats-inline .admin-stat {
        flex: 0 0 auto;
        width: auto;
    }

    body.admin-page .admin-stats-inline .admin-stat > div {
        white-space: nowrap;
    }
}


/* Resumo no computador: nome e numero no mesmo tamanho, sem sobrepor um item no outro e sem cortar o ultimo */
@media (min-width: 1101px) {
    body.admin-page .admin-hero .admin-stats-inline {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 14px 20px;
        max-width: 60%;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat strong,
    body.admin-page .admin-hero .admin-stats-inline .admin-stat span {
        font-size: 15px;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat > div {
        white-space: nowrap;
    }
}


/* Resumo no computador: ocupa a sobra do cabecalho; se faltar espaco, o item quebra de linha em vez de sobrepor o seguinte */
@media (min-width: 1101px) {
    body.admin-page .admin-hero-title {
        flex: 0 1 auto;
    }

    body.admin-page .admin-hero .admin-stats-inline {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
        justify-content: flex-end;
        gap: 12px 24px;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat {
        flex: 0 0 auto;
    }

    body.admin-page .admin-hero .admin-stats-inline .admin-stat > div {
        white-space: normal;
    }
}


/* Administrativo (celular): as abas Usuarios e Equipes ficam separadas do titulo e alinhadas com o texto dele */
@media (max-width: 760px) {
    body.admin-page .admin-hero-title .admin-tabs {
        margin-top: 14px;
    }

    body.admin-page .admin-hero-title .admin-tabs a {
        padding-left: 0;
    }
}


/* Administrativo (celular): borda colorida do cartao de usuario pela situacao (verde ativo, amarela pendente, vermelha suspenso) */
@media (max-width: 760px) {
    #usersList .user-row {
        border-width: 1.5px;
        border-style: solid;
    }

    #usersList .user-row.status-active {
        border-color: var(--ok);
    }

    #usersList .user-row.status-pending {
        border-color: var(--warn);
    }

    #usersList .user-row.status-disabled {
        border-color: var(--danger);
    }
}


/* Administrativo: aba Dispositivos (computadores online) */
.devices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.device-card {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.device-card-name {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
}

.device-card-line,
.device-card-code {
    margin: 2px 0;
    font-size: 13px;
    color: var(--text-2);
}

.devices-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 16px;
}


/* Administrativo: aba Dispositivos com as mesmas dimensoes das outras abas (computador e celular) */
#devicesView .admin-stats-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px 24px;
    margin: 0 0 14px;
}

#devicesView .admin-stats-inline .admin-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#devicesView .admin-stats-inline .admin-stat > .icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

#devicesView .admin-stats-inline .admin-stat > div {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

#devicesView .admin-stats-inline .admin-stat strong {
    font-size: 16px;
}

#devicesView .admin-stats-inline .admin-stat span {
    font-size: 12px;
    font-weight: 600;
}

#devicesView .devices-title {
    margin: 4px 0 12px;
    font-size: 16px;
}

#devicesView .device-card {
    padding: 14px 16px;
    border-color: var(--ok);
    border-radius: 16px;
}

@media (min-width: 1101px) {
    #devicesView .devices-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    #devicesView .admin-stats-inline .admin-stat strong {
        font-size: 18px;
    }
}

@media (max-width: 760px) {
    #devicesView .devices-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Administrativo: aba Dispositivos, estado vazio ocupa a largura da grade */
#devicesView .device-card-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border-style: dashed;
    color: var(--text-2);
    font-size: 14px;
}


/* Administrativo: cartao de dispositivo online (sistema, IP, MAC e acoes) */
#devicesView .device-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

#devicesView .device-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--avatar-bg, rgba(34, 197, 94, 0.12));
    color: var(--spark);
}

#devicesView .device-title {
    min-width: 0;
    flex: 1 1 auto;
}

#devicesView .device-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#devicesView .device-sub {
    font-size: 12px;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#devicesView .device-line {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

#devicesView .device-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}


/* Administrativo: botoes do cartao de dispositivo limpos; so icones quando a tela fica estreita */
#devicesView .device-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

#devicesView .device-actions .btn .icon {
    width: 16px;
    height: 16px;
}

@media (max-width: 1100px) {
    #devicesView .device-actions .btn span {
        display: none;
    }

    #devicesView .device-actions .btn {
        width: 36px;
        height: 36px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }
}

#devicesView .device-actions .btn {
    flex: 0 0 auto;
}

/* Administrativo (computador): os botoes do cartao quebram de linha dentro do cartao, sem sair da borda */
@media (min-width: 1101px) {
    #devicesView .device-actions {
        flex-wrap: wrap;
    }

    #devicesView .device-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
        padding: 8px 12px;
    }
}

/* Administrativo (Dispositivos): botao de informacoes ao lado do nome do computador */
#devicesView .device-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

#devicesView .device-name-row .device-name {
    min-width: 0;
}

#devicesView .device-name-row .btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

/* Administrativo (Dispositivos): so icones, todos do mesmo tamanho e alinhados (informacoes, salvar, redefinir e acessar) */
#devicesView .device-name-row .btn span,
#devicesView .device-actions .btn span {
    display: none;
}

#devicesView .device-name-row .btn,
#devicesView .device-actions .btn {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 0;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

/* Administrativo (Dispositivos): botoes do cartao na mesma linha, com acabamento limpo */
#devicesView .device-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
}

#devicesView .device-actions .btn,
#devicesView .device-name-row .btn {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#devicesView .device-actions .btn:hover,
#devicesView .device-name-row .btn:hover {
    background: var(--brand-soft);
    border-color: rgba(34, 197, 94, 0.45);
    color: var(--spark);
}

/* Administrativo (Dispositivos): especificacoes a esquerda, uma embaixo da outra; botoes de acao a direita */
#devicesView .device-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

#devicesView .device-body .specs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#devicesView .device-body .device-actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0;
    flex: 0 0 auto;
}

/* Administrativo (Dispositivos): versao do Help4Desk no canto do cartao, abaixo da etiqueta Online */
#devicesView .device-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

#devicesView .device-version {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
}

/* Administrativo (Dispositivos): especificacoes a esquerda com icones; acoes a direita em duas colunas */
#devicesView .device-body {
    align-items: flex-start;
}

#devicesView .device-body .specs {
    gap: 6px;
}

#devicesView .device-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

#devicesView .device-line .icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--spark);
}

#devicesView .device-body .device-actions {
    display: grid;
    grid-template-columns: repeat(2, 36px);
    gap: 8px;
    justify-content: end;
    flex-direction: initial;
    align-items: center;
}

/* Administrativo (Dispositivos): ao passar o mouse, o nome da acao aparece em pilula ao lado do botao (como a dica do Mark) */
#devicesView .device-actions .btn {
    position: relative;
}

#devicesView .device-hint {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 5;
}

#devicesView .device-actions .btn:hover .device-hint,
#devicesView .device-actions .btn:focus-visible .device-hint,
#devicesView .device-name-row .btn:hover .device-hint,
#devicesView .device-name-row .btn:focus-visible .device-hint {
    opacity: 1;
}

/* Administrativo (Dispositivos): janela de informacoes completas do computador */
.device-details-dialog {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    background: var(--ink-2);
    color: var(--text);
}

.device-details-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.device-details-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.device-details-head h3 {
    margin: 0;
    font-size: 18px;
}

.device-details-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    padding: 16px 20px 20px;
    overflow: auto;
}

.device-detail-block {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.device-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13.5px;
}

.device-detail-row span {
    color: var(--text-3);
}

.device-detail-row strong {
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* Administrativo (Dispositivos): janela de informacoes com acabamento premium */
.device-details-dialog {
    border: 1px solid rgba(34, 197, 94, 0.28);
    border-radius: 22px;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(34, 197, 94, 0.12), transparent 60%),
        var(--ink-2);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.device-details-dialog::backdrop {
    background: rgba(2, 6, 4, 0.7);
    backdrop-filter: blur(4px);
}

.device-details-head {
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.device-details-head h3 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.device-details-head .btn {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
}

.device-details-body {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    padding: 18px 22px 22px;
}

.device-detail-block {
    position: relative;
    padding: 14px 16px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
}

.device-detail-block::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: var(--spark);
    opacity: 0.7;
}

.device-detail-row {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    font-size: 13px;
}

.device-detail-block .device-detail-row:last-child {
    border-bottom: 0;
}

.device-detail-row span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
}

.device-detail-row strong {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}

/* Administrativo (Dispositivos): icones nos campos da janela de informacoes */
.device-detail-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.device-detail-row span .icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--spark);
    opacity: 0.85;
}

/* Administrativo (Dispositivos): bateria ao lado do nome do computador, so icone e porcentagem */
#devicesView .device-battery {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

#devicesView .device-battery .icon {
    width: 13px;
    height: 13px;
    color: var(--spark);
}

/* Administrativo (Dispositivos): o mesmo efeito ao passar o mouse em todos os botoes do cartao (informacoes, salvar, redefinir e acessar) */
#devicesView .device-actions .btn,
#devicesView .device-name-row .btn {
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#devicesView .device-actions .btn:hover,
#devicesView .device-actions .btn:focus-visible,
#devicesView .device-name-row .btn:hover,
#devicesView .device-name-row .btn:focus-visible {
    background: rgba(34, 197, 94, 0.14) !important;
    border-color: rgba(34, 197, 94, 0.55) !important;
    color: var(--spark) !important;
}

/* Administrativo (Dispositivos, celular e janela dividida): resumo em fluxo normal, uma linha, sem sobrepor o topo */
#devicesView .admin-stats-inline {
    position: static !important;
    top: auto !important;
    display: flex !important;
    flex-wrap: wrap;
    grid-template-columns: none !important;
    justify-content: space-between;
    gap: 10px 14px;
    margin: 0 0 14px;
    z-index: auto;
}

#devicesView .admin-stats-inline .admin-stat {
    flex: 0 1 auto;
    min-width: 0;
}

/* Administrativo (Dispositivos): efeito de passar o mouse igual e estavel em todos os botoes do cartao (sem a elevacao que fazia piscar) */
html body #devicesView .device-actions .btn,
html body #devicesView .device-name-row .btn {
    transform: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

html body #devicesView .device-actions .btn:hover,
html body #devicesView .device-actions .btn:focus-visible,
html body #devicesView .device-name-row .btn:hover,
html body #devicesView .device-name-row .btn:focus-visible {
    background-color: rgba(34, 197, 94, 0.14) !important;
    border-color: rgba(34, 197, 94, 0.55) !important;
    color: var(--spark) !important;
    transform: none !important;
}

/* Resumo de dispositivos: some nas abas de usuarios e equipes (inclusive quando esta dentro da aba Dispositivos) */
body.admin-page #devicesView .admin-stats-inline[hidden],
body.admin-page .admin-stats-inline[hidden] {
    display: none !important;
}

/* Downloads: codigo para instalar na Android TV pelo app Downloader */
.download-tv-code {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--text-2);
}


/* ============================================================
   VÁRIAS SESSÕES — abas no topo da página de acesso
   ============================================================ */

.session-tabs {
    --session-tabs-h: 44px;

    display: flex;
    align-items: flex-end;

    gap: 6px;

    height: var(--session-tabs-h);

    padding: 6px 10px 0;

    background: var(--bg);

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

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    flex-shrink: 0;

    position: relative;
    z-index: 960;
}


.session-tabs::-webkit-scrollbar {
    display: none;
}


.session-tab {
    position: relative;

    display: flex;
    align-items: center;

    flex: 0 1 230px;

    gap: 9px;

    min-width: 140px;
    height: 38px;

    padding: 0 8px 0 14px;

    border-radius: 12px 12px 0 0;

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

    color: var(--text-2);

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

    cursor: var(--cur-link, pointer);

    transition: background 0.2s, color 0.2s;
}


.session-tab:hover {
    background: rgba(255, 255, 255, 0.07);

    color: var(--text);
}


.session-tab:focus-visible {
    outline: 2px solid var(--spark);
    outline-offset: -2px;
}


.session-tab.on {
    background: var(--ink-2);

    color: var(--text);
}


.session-tab.on::before {
    content: "";

    position: absolute;
    left: 12px;
    right: 12px;
    top: 0;

    height: 2px;

    border-radius: 0 0 2px 2px;

    background: var(--brand);

    box-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
}


.session-tab-name {
    flex: 1;

    min-width: 0;

    overflow: hidden;

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


.session-tab-code {
    flex: none;

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

    letter-spacing: 0.06em;

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


.session-tab-dot {
    flex: none;

    width: 9px;
    height: 9px;

    border-radius: 50%;

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


.session-tab-dot.wait {
    background: var(--warn);
}


.session-tab-dot.live {
    background: var(--spark);

    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);

    animation: sessionTabRipple 1.8s ease-out infinite;
}


.session-tab-dot.bad {
    background: var(--danger);
}


@keyframes sessionTabRipple {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}


.session-tab-x,
.session-tab-new {
    position: relative;

    display: grid;
    place-items: center;

    flex: none;

    border: 0;

    background: none;

    color: var(--text-3);

    cursor: var(--cur-link, pointer);

    transition: background 0.2s, color 0.2s;
}


.session-tab-x {
    width: 24px;
    height: 24px;

    border-radius: 8px;
}


.session-tab-x .icon {
    width: 14px;
    height: 14px;
}


.session-tab-x:hover {
    background: rgba(244, 63, 94, 0.18);

    color: #fda4af;
}


.session-tab-new {
    align-self: center;

    width: 32px;
    height: 32px;

    margin-left: 2px;

    border-radius: 10px;
}


.session-tab-new:hover:not(:disabled),
.session-tab-new[aria-expanded="true"] {
    background: rgba(34, 197, 94, 0.12);

    color: var(--spark);
}


.session-tab-new:disabled {
    opacity: 0.4;

    cursor: default;
}


/* Nome do botão ao passar o mouse: pílula embaixo (a faixa fica no topo). */
.session-tab-hint {
    position: fixed;

    padding: 4px 10px;

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

    background: var(--ink-2);

    color: var(--text);

    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;

    pointer-events: none;

    opacity: 0;

    transition: opacity 0.15s;

    z-index: 970;
}


/* Moldura das abas extras: cobre a página inteira abaixo da faixa. */
.session-frames {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 44px;

    z-index: 950;

    background: var(--bg);
}


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


.session-frame {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


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


/* Menu "abrir outra sessão". */
.session-tabs-menu {
    position: fixed;

    z-index: 980;

    display: grid;

    gap: 10px;

    padding: 14px;

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

    background: var(--ink-2);

    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}


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


.session-tabs-form {
    display: flex;

    gap: 8px;
}


.session-tabs-form input {
    flex: 1;

    min-width: 0;
    height: 38px;

    padding: 0 12px;

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

    background: var(--bg);

    color: var(--text);

    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.08em;
}


.session-tabs-form input:focus {
    outline: none;

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


.session-tabs-error {
    margin: 0;

    color: #fda4af;

    font-size: 12.5px;
}


.session-tabs-title {
    color: var(--text-3);

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

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.session-tabs-list {
    display: grid;

    gap: 4px;

    max-height: 280px;

    overflow-y: auto;
}


.session-tabs-item {
    display: flex;
    align-items: center;

    gap: 10px;

    width: 100%;
    min-height: 38px;

    padding: 0 10px;

    border: 0;
    border-radius: 10px;

    background: none;

    color: var(--text);

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

    text-align: left;

    cursor: var(--cur-link, pointer);
}


.session-tabs-item:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
}


.session-tabs-item:disabled {
    color: var(--text-3);

    cursor: default;
}


.session-tabs-item-name {
    flex: 1;

    min-width: 0;

    overflow: hidden;

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


.session-tabs-empty {
    margin: 0;

    color: var(--text-3);

    font-size: 13px;
}


@media (max-width: 760px) {

    .session-tab {
        flex-basis: 170px;

        min-width: 116px;
    }

    .session-tab-code {
        display: none;
    }
}


.session-tab-x:hover .session-tab-hint,
.session-tab-x:focus-visible .session-tab-hint,
.session-tab-new:hover .session-tab-hint,
.session-tab-new:focus-visible .session-tab-hint {
    opacity: 1;
}


/* ============================================================
   AO PASSAR O MOUSE: TEXTO BRANCO EM TODOS OS BOTÕES
   ============================================================
   Os botões são transparentes com o texto na cor do botão. Regras antigas
   pintavam o fundo de verde sólido no hover (ex.: "Tentar novamente") e o
   texto verde sumia. Agora: fundo só tingido + texto e ícone brancos. */

.btn:hover:not(:disabled):not(.disabled),
.btn:focus-visible {
    color: #fff;
}

.btn.btn-primary:hover:not(:disabled):not(.disabled),
.btn.btn-primary:focus-visible,
.btn-connect:hover:not(:disabled) {
    background: rgba(74, 222, 128, 0.16);
    border-color: var(--spark);
    color: #fff;
    box-shadow: none;
}

.btn.is-cancel:hover:not(:disabled),
.btn-danger:hover,
.btn-danger-text:hover:not(:disabled),
.dock-danger:hover:not(:disabled),
.session-dock .dock-btn.dock-danger:hover:not(:disabled),
.transfer-cancel:hover,
.transfer-cancel:focus-visible {
    background: rgba(248, 113, 113, 0.16);
    color: #fff;
}

.btn-save-device:hover,
.picker-range-quick button:hover,
.filters-flat .picker-button:hover,
.dock-toggle:hover,
.help-chip:hover,
.help-topics-btn:hover,
.mobile-menu-button:hover,
.topbar-actions > button:hover,
.topbar-actions > a:hover,
#openCreateUser:hover,
#openCreateUser:focus-visible,
#usersList .user-row .user-actions .btn:hover,
#usersList .user-row .user-actions .btn:focus-visible {
    color: #fff;
}

.btn-save-device:hover .icon,
.btn:hover:not(:disabled):not(.disabled) .icon {
    color: #fff;
}

html body #devicesView .device-actions .btn:hover,
html body #devicesView .device-actions .btn:focus-visible,
html body #devicesView .device-name-row .btn:hover,
html body #devicesView .device-name-row .btn:focus-visible,
html body #devicesView .device-actions .btn:hover .icon,
html body #devicesView .device-name-row .btn:hover .icon {
    color: #fff !important;
}


/* ============================================================
   CAIXA DE MENSAGEM — Mark e conversa com o cliente
   ============================================================
   Mesmo visual da Conversa da equipe: barra arredondada, microfone à
   esquerda, campo no meio e enviar verde redondo à direita (sempre na
   mesma linha; a regra .chat-form da equipe empilhava os itens). */

.chat-form.chat-composer-form {
    display: flex;
    align-items: center;

    gap: 6px;

    margin: 10px 12px 12px;
    padding: 6px;

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

    background: var(--surface-2);

    transition: border-color 0.15s;
}


.chat-form.chat-composer-form:focus-within {
    border-color: rgba(74, 222, 128, 0.55);
}


.chat-form.chat-composer-form input {
    flex: 1;

    min-width: 0;
    height: 40px;

    padding: 0 10px;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
}


.chat-form.chat-composer-form input:focus {
    border: 0;

    outline: none;
}


.chat-composer-form .chat-tool .icon {
    width: 20px;
    height: 20px;
}


.chat-composer-form .chat-tool:hover:not(:disabled) {
    color: #fff;

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


.chat-composer-form .chat-tool.is-send:hover:not(:disabled) {
    background: var(--brand-strong);

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


.chat-composer-form .chat-tool:disabled {
    opacity: 0.45;

    cursor: default;
}


.chat-composer-form .chat-tool.recording {
    background: var(--danger);

    color: #fff;

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


/* Topo do Mark na sessão: Intelligence e captura de tela ao lado do nome. */
.mark-panel .chat-header .mark-intel:disabled {
    opacity: 0.45;

    cursor: default;
}


/* Mark Intelligence ligado: o brilho fica verde. */
.mark-panel .chat-header .mark-intel.active {
    background: var(--brand-soft);

    color: var(--brand);
}


/* Faixa embaixo do topo: sessão ativa e computador atendido. */
.mark-intel-bar {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;
    padding: 6px 14px;

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

    background: var(--surface-2);

    color: var(--text-2);

    font-size: 12px;
}


.mark-intel-bar[hidden] {
    display: none;
}


.mark-intel-text {
    overflow: hidden;

    min-width: 0;

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


.mark-intel-dot {
    flex: none;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--ok);

    box-shadow: 0 0 0 3px var(--ok-soft);
}


.mark-intel-bar.is-off .mark-intel-dot {
    background: var(--text-3);

    box-shadow: none;
}


/* Etapas do diagnóstico (o que o Mark está consultando). */
.mark-step-list {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin: 4px 0 0;
    padding: 0;

    list-style: none;

    font-size: 13px;
}


.mark-step-list li {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;
}


.mark-step-label {
    flex: 1;

    min-width: 0;

    overflow-wrap: anywhere;
}


.mark-step-list small {
    flex: none;

    color: var(--text-3);

    font-size: 11px;
}


.mark-step-icon {
    flex: none;

    width: 14px;
    height: 14px;

    border: 2px solid var(--line-strong);
    border-top-color: var(--brand);
    border-radius: 50%;

    animation: mark-step-spin 0.8s linear infinite;
}


.mark-step-list .is-ok .mark-step-icon,
.mark-step-list .is-error .mark-step-icon,
.mark-step-list .is-blocked .mark-step-icon {
    border: 0;

    animation: none;
}


.mark-step-list .is-ok .mark-step-icon {
    background: var(--ok);

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}


.mark-step-list .is-error .mark-step-icon,
.mark-step-list .is-blocked .mark-step-icon {
    background: var(--warn);

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}


.mark-step-cancel {
    margin-top: 8px;
    padding: 4px 12px;

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

    background: transparent;

    color: var(--text-2);

    font: inherit;
    font-size: 12px;

    cursor: var(--cur-link);
}


.mark-countdown {
    font-variant-numeric: tabular-nums;

    font-weight: 600;
}


.mark-wait-note {
    display: block;

    margin-top: 4px;

    color: var(--text-3);

    font-size: 12px;
}


.mark-retry:hover:not(:disabled) {
    border-color: var(--brand) !important;

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


.mark-step-cancel:hover:not(:disabled) {
    border-color: var(--danger);

    background: color-mix(in srgb, var(--danger) 18%, transparent);

    color: #fff;
}


/* Cartão de aprovação: o comando exato antes de rodar no cliente. */
.mark-approval {
    border: 1px solid var(--warn);
}


.mark-approval.is-approved {
    border-color: var(--brand);
}


.mark-approval.is-rejected,
.mark-approval.is-expired {
    border-color: var(--line-strong);

    opacity: 0.8;
}


.mark-approval-title {
    margin: 2px 0 8px;

    font-weight: 600;
}


/* Leitura da biblioteca (tabelas): linhas inteiras, rolagem dentro do quadro. */
.mark-output-table {
    max-width: 100%;
}


.mark-output-table pre {
    overflow-x: auto;

    white-space: pre !important;

    font-size: 11px;
}


.mark-choice .picker {
    display: block;

    margin: 4px 0 10px;
}


/* No chat, o seletor fica claro (verde) para não sumir no fundo escuro. */
.mark-choice .picker-button {
    border-color: var(--brand) !important;

    background: var(--brand-soft) !important;

    color: #fff !important;
}


.mark-choice .picker-button .icon,
.mark-choice .picker-button .picker-chevron {
    color: var(--brand) !important;
}


.mark-choice .picker-button:hover {
    background: color-mix(in srgb, var(--brand) 28%, transparent) !important;
}


.mark-plan-title {
    margin: 0 0 8px;

    font-weight: 600;
}


.mark-plan-steps {
    display: grid;
    gap: 10px;

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


.mark-plan-step {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;
}


.mark-approval-cmd {
    overflow: hidden;

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

    background: var(--bg);
}


.mark-approval-shell {
    display: block;

    padding: 4px 10px;

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

    color: var(--text-3);

    font-size: 11px;
}


.mark-approval-cmd pre,
.mark-output pre {
    overflow: auto;

    max-height: 220px;
    margin: 0;
    padding: 8px 10px;

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

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


.mark-approval-open {
    border-top: 1px solid var(--line);
}


.mark-approval-purpose {
    margin: 8px 0 0;

    color: var(--text-2);

    font-size: 13px;
}


.mark-approval-alerts {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin: 8px 0 0;
    padding: 0;

    list-style: none;

    color: var(--warn);

    font-size: 12px;
}


.mark-approval-alerts li::before {
    content: "! ";

    font-weight: 700;
}


.mark-approval-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 10px;
}


.mark-approval-actions button {
    min-height: 34px;
    padding: 6px 14px;

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

    background: transparent;

    color: var(--text);

    font: inherit;
    font-size: 13px;

    cursor: var(--cur-link);
}


.mark-approval-actions .mark-approval-yes {
    border-color: var(--brand);

    background: var(--brand);

    color: var(--on-brand);

    font-weight: 600;
}


.mark-approval-actions .mark-approval-yes:hover:not(:disabled) {
    background: var(--brand-strong);

    color: #fff;
}


.mark-approval-actions .mark-approval-no:hover:not(:disabled) {
    border-color: var(--danger);

    background: color-mix(in srgb, var(--danger) 18%, transparent);

    color: #fff;
}


.mark-approval-actions button:disabled {
    opacity: 0.5;

    cursor: default;
}


.mark-approval-status {
    margin: 8px 0 0;

    color: var(--text-2);

    font-size: 12px;
}


.mark-output summary {
    color: var(--text-2);

    font-size: 12px;

    cursor: var(--cur-link);
}


.mark-output pre {
    margin-top: 6px;

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

    background: var(--bg);
}


/* Saída de comando e tabelas do Mark: cartão com barra de título, contador,
   busca, cabeçalho fixo, selos e colunas técnicas em fonte mono. */
.mark-output-blocks {
    width: 100%;
    max-width: 100%;
}


.mark-output-head {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 0 10px;

    color: var(--text-2);

    font-size: 12px;
}


.mark-output-dot {
    flex: none;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
}


.mark-output-dot.is-ok {
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
}


.mark-table-card {
    overflow: hidden;

    margin: 0 0 10px;

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

    background: var(--surface);
}


.mark-table-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 10px 12px;

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

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


.mark-table-title {
    color: var(--text);

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


.mark-table-badge {
    flex: none;

    padding: 2px 9px;

    border-radius: 999px;

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

    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}


.mark-table-search {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 10px 12px 2px;
    padding: 0 10px;

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

    background: var(--bg);
}


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


.mark-table-search svg {
    flex: none;

    width: 14px;
    height: 14px;

    fill: none;
    stroke: var(--text-3);
    stroke-width: 2;
    stroke-linecap: round;
}


.mark-table-filter {
    flex: 1;
    min-width: 0;

    height: 32px;
    padding: 0;

    border: 0;

    background: transparent;
    color: var(--text);

    font: inherit;
    font-size: 12px;

    outline: none;
}


.mark-table-wrap {
    overflow: auto;

    max-height: 380px;
}


.mark-table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    font-size: 12.5px;
    line-height: 1.45;
}


.mark-table th,
.mark-table td {
    padding: 8px 12px;

    text-align: left;
    vertical-align: middle;

    overflow-wrap: anywhere;
}


.mark-table th {
    position: sticky;
    top: 0;
    z-index: 1;

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

    background: var(--surface);
    color: var(--text-3);

    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}


.mark-table td {
    border-bottom: 1px solid var(--line);

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


.mark-table td.is-main {
    color: var(--text);

    font-weight: 500;
}


.mark-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.015);
}


.mark-table tbody tr:last-child td {
    border-bottom: 0;
}


.mark-table tbody tr:hover td {
    background: var(--brand-soft);
}


.mark-cell-tech {
    color: var(--text-2);

    font-family: var(--mono);
    font-size: 11.5px;
    white-space: nowrap;
}


.mark-cell-empty {
    color: var(--text-3);
}


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

    padding: 2px 9px;

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

    background: var(--surface-2);
    color: var(--text-2);

    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}


.mark-pill.is-store,
.mark-pill.is-ok {
    border-color: rgba(34, 197, 94, 0.35);

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


.mark-pill.is-winget {
    border-color: rgba(96, 165, 250, 0.35);

    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
}


.mark-pill.is-bad {
    border-color: rgba(244, 63, 94, 0.35);

    background: rgba(244, 63, 94, 0.12);
    color: #fda4af;
}


.mark-pill.is-warn {
    border-color: rgba(251, 191, 36, 0.35);

    background: rgba(251, 191, 36, 0.12);
    color: var(--warn);
}


/* Campo/Valor: o campo como rótulo, estreito. */
.mark-table.is-kv td:first-child {
    width: 36%;

    color: var(--text-3);

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


.mark-table.is-kv td + td {
    color: var(--text);
}


.mark-table-none {
    margin: 0;
    padding: 14px 12px;

    color: var(--text-3);

    font-size: 12px;
    text-align: center;
}


/* Tabela que a IA escreveu na resposta (Markdown): mesmo cartão. */
.chat-content .mark-table-card,
.mark-bubble .mark-table-card {
    margin: 8px 0;
}


.mark-output-note {
    margin: 0 0 10px !important;

    white-space: pre-wrap;
}


/* Comando longo no cartão de aprovação: recolhido, abre para conferir. */
.mark-approval-cmd,
.mark-cmd-long,
.mark-output-blocks > * {
    min-width: 0;
    max-width: 100%;
}


.mark-cmd-long summary {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 8px 10px;

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

    background: var(--bg);

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

    cursor: var(--cur-link);
    list-style: none;
}


.mark-cmd-long summary::-webkit-details-marker {
    display: none;
}


.mark-cmd-long summary code {
    overflow: hidden;

    min-width: 0;
    max-width: 100%;

    color: var(--text);

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


.mark-cmd-long summary span {
    color: var(--brand);

    font-family: inherit;
    font-size: 11px;
}


.mark-cmd-long[open] summary span {
    color: var(--text-3);
}


.mark-cmd-long pre {
    margin-top: 6px;
}


/* Celular: cada linha vira um cartão (1ª coluna como título, depois rótulo + valor). */
@media (max-width: 560px) {
    .mark-table thead {
        display: none;
    }

    .mark-table,
    .mark-table tbody,
    .mark-table tr,
    .mark-table td {
        display: block;
        width: 100%;
    }

    .mark-table tr {
        padding: 10px 12px;

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

    .mark-table tbody tr:nth-child(even) td,
    .mark-table tbody tr:hover td {
        background: none;
    }

    .mark-table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.015);
    }

    .mark-table tbody tr:last-child {
        border-bottom: 0;
    }

    .mark-table td {
        display: grid;
        grid-template-columns: minmax(72px, 36%) 1fr;
        gap: 10px;
        align-items: center;

        padding: 3px 0;

        border-bottom: 0;
    }

    .mark-table td::before {
        content: attr(data-label);

        color: var(--text-3);

        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .mark-table td.is-main {
        display: block;

        padding-bottom: 6px;

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

    .mark-table td.is-main::before {
        content: none;
    }

    .mark-table td > .mark-pill,
    .mark-table td > .mark-cell-tech {
        justify-self: start;
    }

    .mark-table.is-kv tr {
        padding: 8px 12px;
    }

    .mark-table.is-kv td,
    .mark-table.is-kv td.is-main {
        display: block;
        width: 100%;

        padding: 0;

        font-size: 12.5px;
    }

    .mark-table.is-kv td.is-main {
        color: var(--text-3);

        font-size: 10.5px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .mark-table.is-kv td::before {
        content: none;
    }
}


@keyframes mark-step-spin {
    to {
        transform: rotate(360deg);
    }
}


@media (prefers-reduced-motion: reduce) {
    .mark-step-icon {
        animation: none;
    }
}

/* Sem botão à esquerda (conversa com o cliente, Mark fora da sessão): texto afastado da borda. */
.chat-form.chat-composer-form input:first-child {
    padding-left: 14px;
}



/* ============================================================
   CONVERSA — componente único (.h4d-chat)
   ============================================================
   Mesma mensagem em todas as conversas (equipe e sessão), montada por
   js/chat-ui.js: dos outros com foto à esquerda e nome no balão; minhas à
   direita em verde, sem nome; hora no canto do balão. */

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

    gap: 10px;
}


.h4d-chat-row {
    display: flex;
    align-items: flex-end;

    gap: 8px;

    min-width: 0;
    width: 100%;
}


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


.h4d-chat-face {
    display: grid;
    place-items: center;

    flex: none;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: rgba(34, 197, 94, 0.14);
    background-position: center;
    background-size: cover;

    color: var(--spark);

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


.h4d-chat-face.has-photo {
    color: transparent;
}


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

    gap: 3px;

    min-width: 0;
    max-width: 78%;

    padding: 8px 12px 6px;

    border: 1px solid var(--line);
    border-radius: 14px 14px 14px 4px;

    background: var(--surface-2);

    color: var(--text);

    font-size: 14px;
    line-height: 1.45;
}


.h4d-chat-row.is-mine .h4d-chat-bubble {
    border-color: #1d5a37;
    border-radius: 14px 14px 4px 14px;

    background: #123a24;
}


.h4d-chat-row.is-notice .h4d-chat-bubble {
    border-color: rgba(250, 204, 21, 0.45);
}


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

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


.h4d-chat-content {
    min-width: 0;

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


.h4d-chat-content p {
    margin: 0;
}


.h4d-chat-content audio {
    display: block;

    width: 240px;
    max-width: 100%;
}


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

    color: var(--text-3);

    font-size: 11px;
}


.h4d-chat-row.is-mine .h4d-chat-time {
    color: #86efac;
}


/* Caixa de mensagem: mesma fonte do resto (o campo não fica monoespaçado). */
.chat-composer textarea,
.chat-composer-form input {
    font-family: inherit;
    font-size: 14px;

    color: var(--text);
}


/* Mensagem do cliente: ícone de computador no lugar da foto. */
.h4d-chat-face.is-icon svg {
    width: 16px;
    height: 16px;
}

#chatAvatar .icon {
    width: 18px;
    height: 18px;
}


/* ============================================================
   LIGAÇÃO DE VOZ — botão no topo da conversa com o cliente, ao lado do X
   ============================================================
   Parado: só o telefone (do tamanho do X). Chamando: pisca. Em ligação:
   pílula vermelha com o tempo (clicar desliga). */

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

    flex: none;

    gap: 6px;

    min-width: 34px;
    height: 34px;

    padding: 0 9px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--spark);

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

    white-space: nowrap;

    cursor: var(--cur-link, pointer);

    transition: background 0.15s, color 0.15s;
}


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


.session-call-btn svg {
    width: 17px;
    height: 17px;
}


.session-call-btn[data-state="idle"] #callBtnText {
    display: none;
}


.session-call-btn:hover {
    background: rgba(74, 222, 128, 0.14);

    color: #fff;
}


.session-call-btn[data-state="ringing"] {
    background: rgba(74, 222, 128, 0.12);

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


.session-call-btn[data-state="live"] {
    border-radius: 999px;

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

    color: #fda4af;

    font-variant-numeric: tabular-nums;
}


.session-call-btn[data-state="live"]:hover,
.session-call-btn[data-state="ringing"]:hover {
    background: rgba(244, 63, 94, 0.26);

    color: #fff;
}


/* Aviso curto no botão (recusou, não atendeu...): mostra o texto. */
.session-call-btn[data-notice] #callBtnText {
    display: inline;

    max-width: 180px;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* Balão "Dúvidas? Fale com o Mark" com o Mark do lado esquerdo: o bico
   (canto reto) aponta para a esquerda e o balão entra vindo da esquerda. */
.mark-hint.from-left {
    border-radius: 14px 14px 14px 4px;
    transform: translateX(-10px) scale(0.96);
}

.mark-hint.from-left.show {
    transform: none;
}


/* Ligação: botão de mudo ao lado do botão de ligar (só em ligação). */
.session-call-mute {
    display: inline-grid;
    place-items: center;

    flex: none;

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--text-2);

    cursor: var(--cur-link, pointer);

    transition: background 0.15s, color 0.15s;
}

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

.session-call-mute svg {
    width: 17px;
    height: 17px;
}

.session-call-mute .call-mic-off,
.session-call-mute.is-muted .call-mic-on {
    display: none;
}

.session-call-mute.is-muted .call-mic-off {
    display: block;
}

.session-call-mute:hover {
    background: rgba(255, 255, 255, 0.07);

    color: #fff;
}

/* Mudo ligado: vermelho, para não esquecer. */
.session-call-mute.is-muted {
    background: rgba(244, 63, 94, 0.16);

    color: #fda4af;
}


/* ============================================================
   TERMINAL DO TÉCNICO (administrador, sem janela no cliente)
   ============================================================ */

.command-terminal span {
    color: var(--brand);

    font-weight: 600;
}


.term-panel {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 6;

    display: flex;
    flex-direction: column;

    width: min(780px, calc(100% - 24px));
    height: min(62vh, 560px);
    min-height: 280px;

    overflow: hidden;

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

    background: #050806;
    box-shadow: var(--shadow);
}


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


.term-head {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 12px;

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

    background: var(--surface);
}


.term-title {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;

    color: var(--text);

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


.term-title svg {
    flex: none;

    width: 18px;
    height: 18px;

    fill: none;
    stroke: var(--brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.term-badge {
    padding: 2px 8px;

    border-radius: 999px;

    background: rgba(251, 191, 36, 0.12);
    color: var(--warn);

    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.term-shells {
    display: inline-flex;

    margin-left: auto;
    padding: 3px;

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

    background: var(--bg);
}


.term-shell {
    padding: 4px 12px;

    border: 0;
    border-radius: 999px;

    background: transparent;
    color: var(--text-3);

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

    cursor: var(--cur-link);
}


.term-shell.is-on {
    background: var(--brand-soft);
    color: var(--brand);
}


.term-shell:hover:not(.is-on) {
    color: #fff;
}


.term-actions {
    display: flex;
    gap: 4px;
}


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

    width: 30px;
    height: 30px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: var(--text-2);

    cursor: var(--cur-link);
}


.term-icon:hover {
    background: var(--brand-soft);
    color: #fff;
}


.term-icon svg {
    width: 16px;
    height: 16px;

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


.term-note {
    margin: 0;
    padding: 8px 12px;

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

    color: var(--text-3);

    font-size: 11.5px;
}


.term-out {
    flex: 1;

    overflow: auto;

    padding: 10px 12px;

    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.5;
}


.term-entry + .term-entry {
    margin-top: 12px;
}


.term-line {
    color: var(--text);

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


.term-ps {
    color: var(--brand);
}


.term-result {
    margin-top: 4px;

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


.term-result.is-running {
    display: flex;
    align-items: center;
    gap: 8px;

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


.term-result.is-error .term-text,
.term-result.is-error:not(:has(.term-text)) {
    color: #fda4af;
}


.term-spin {
    width: 12px;
    height: 12px;

    border: 2px solid var(--line-strong);
    border-top-color: var(--brand);
    border-radius: 50%;

    animation: mark-step-spin 0.8s linear infinite;
}


.term-text {
    margin: 0;

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

    font: inherit;
}


.term-empty {
    margin: 0;

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


.term-meta {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 6px;

    color: var(--text-3);

    font-family: inherit;
    font-size: 11px;
}


.term-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--danger);
}


.term-dot.is-ok {
    background: var(--ok);
}


.term-toggle {
    margin-left: auto;
    padding: 2px 10px;

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

    background: transparent;
    color: var(--brand);

    font: inherit;
    font-size: 11px;

    cursor: var(--cur-link);
}


.term-toggle:hover {
    background: var(--brand-soft);
    color: #fff;
}


.term-table-wrap {
    overflow: auto;

    max-height: 320px;
    margin-top: 4px;

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


.term-table {
    width: 100%;

    border-collapse: collapse;

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


.term-table th,
.term-table td {
    padding: 6px 10px;

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

    text-align: left;
}


.term-table th {
    position: sticky;
    top: 0;

    background: var(--surface);
    color: var(--text-3);

    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}


.term-form {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    padding: 10px 12px;

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

    background: var(--surface);
}


.term-prompt {
    flex: none;

    max-width: 40%;
    padding-top: 7px;

    overflow: hidden;

    color: var(--brand);

    font-family: var(--mono);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.term-input {
    flex: 1;
    min-width: 0;

    min-height: 34px;
    padding: 7px 10px;

    resize: none;

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

    background: var(--bg);
    color: var(--text);

    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.45;

    outline: none;
}


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


.term-run {
    flex: none;

    height: 34px;
    padding: 0 16px;

    border: 0;
    border-radius: 8px;

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

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

    cursor: var(--cur-link);
}


.term-run.is-stop {
    background: var(--danger);
    color: #fff;
}


@media (max-width: 560px) {
    .term-panel {
        left: 8px;
        right: 8px;
        bottom: 8px;

        width: auto;
        height: 70vh;
    }

    .term-head {
        flex-wrap: wrap;
    }

    .term-shells {
        order: 3;

        margin-left: 0;
    }

    .term-prompt {
        display: none;
    }
}


/* Peso do comando no cartão de aprovação e aprovação automática (nível do técnico). */
.mark-weight {
    display: inline-flex;
    align-items: center;

    margin-left: 8px;
    padding: 1px 8px;

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

    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    vertical-align: 1px;
}


.mark-weight.is-leve {
    border-color: rgba(34, 197, 94, 0.35);

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


.mark-weight.is-pesado {
    border-color: rgba(251, 191, 36, 0.35);

    background: rgba(251, 191, 36, 0.12);
    color: var(--warn);
}


.mark-weight.is-muito_pesado {
    border-color: rgba(244, 63, 94, 0.35);

    background: rgba(244, 63, 94, 0.12);
    color: #fda4af;
}


.mark-approval-status.is-auto {
    color: var(--brand);
}


/* Perfil > Mark: níveis de permissão do Mark Intelligence. */
.intel-levels {
    display: grid;
    gap: 12px;

    margin-top: 6px;
    padding-top: 18px;

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


.intel-levels-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}


.intel-lock {
    padding: 2px 10px;

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

    color: var(--text-3);

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


.intel-levels .settings-hint {
    margin: 0;
}


.intel-options {
    display: grid;
    gap: 10px;
}


.intel-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 16px;

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

    background: var(--surface-2);

    cursor: var(--cur-link);

    transition: border-color 0.15s var(--motion-ease, ease), background 0.15s var(--motion-ease, ease);
}


.intel-option:hover {
    border-color: var(--line-strong);
}


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

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


.intel-option input {
    flex: none;

    width: 18px;
    height: 18px;
    margin: 2px 0 0;

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


.intel-option-body {
    display: grid;
    gap: 4px;

    min-width: 0;
}


.intel-option-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

    color: var(--text);

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


.intel-option-title em {
    padding: 1px 8px;

    border-radius: 999px;

    background: var(--surface);
    color: var(--text-3);

    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
}


.intel-dot {
    flex: none;

    width: 9px;
    height: 9px;

    border-radius: 50%;
}


.intel-dot.is-1 {
    background: var(--ok);
}


.intel-dot.is-2 {
    background: var(--warn);
}


.intel-dot.is-3 {
    background: var(--danger);
}


.intel-option-text {
    color: var(--text-2);

    font-size: 12.5px;
    line-height: 1.5;
}


.intel-always {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin: 0;
    padding: 12px 14px;

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

    color: var(--text-2);

    font-size: 12px;
    line-height: 1.5;
}


.intel-always .icon {
    flex: none;

    width: 16px;
    height: 16px;
    margin-top: 1px;

    color: var(--brand);
}


.intel-levels.is-locked .intel-option {
    opacity: 0.55;

    cursor: default;
}