/* Ziggy app — ajustes sobre o Framework7 8 + tema Yui. A cor principal (#5C68E2) é injetada no arranque
   (Framework7 `colors`), aqui só o que a Yui não cobre e a integração do componente do Ziggy. */
:root {
    --zg-a: #A585FF;
    --zg-b: #5C68E2;
    --f7-navbar-height: 56px;
    --f7-login-screen-bg-color: var(--background-color);
}
html, body { overscroll-behavior-y: none; }

/* ---- barra de navegação: título com subtítulo (empresa) */
.navbar .title { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.navbar .nav-title { font-weight: 600; font-size: 17px; color: var(--title-color); }
.navbar .nav-subtitle { font-size: 11.5px; font-weight: 400; color: var(--text-color); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar .icon { color: var(--title-color); }

/* ---- o componente do Ziggy dentro da página (em vez de ocupar a janela toda) */
.page-main .page-content.zg-host { padding: 0; overflow: hidden; position: relative; }
/* a barra é do Framework7: o painel começa abaixo dela (o page-content do F7 começa por baixo da navbar) */
.zg-host .zg-page .zg-panel { position: absolute; inset: 0; top: var(--f7-safe-area-top); }
/* sem barra de topo: cada separador começa abaixo da área segura do telemóvel */
.page-main .page-content.tab { padding-top: calc(var(--f7-safe-area-top) + 6px); }
.chat-new { position: absolute; top: calc(var(--f7-safe-area-top) + 10px); right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card-color); border: 1px solid var(--line-color); color: var(--zg-b); box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.chat-new .icon { font-size: 20px; }
.dark .chat-new { background: #232738; border-color: #2b3040; color: var(--zg-a); }
.zg-host .zg-head { display: none; }                                 /* cabeçalho do componente: já temos a navbar */
.zg-host .zg-root { font-family: "Rubik", -apple-system, "Segoe UI", Roboto, sans-serif; }
.zg-host .zg-body { padding-bottom: 1rem; }
.zg-host .zg-foot { padding-bottom: calc(.6rem + var(--f7-safe-area-bottom)); }

/* ---- painel lateral */
.panel .profile-image img { width: 96px; background: #fff; }
.panel .profile-name { font-size: 18px; }
.panel .profile-subtitle { text-align: center; padding: 0 16px; }
.panel-foot { text-align: center; font-size: 12px; color: var(--text-color); margin: 24px 0 8px; }

/* ---- tema escuro: paleta do Ziggy (sobrepõe a da Yui, que é azulada) e o componente do chat */
.dark {
    --title-color: #eef0f8;
    --text-color: #a2a8bd;
    --background-color: #12141c;
    --light-gray: #232738;
    --card-color: #1c1f2b;
    --line-color: #2b3040;
    --f7-list-item-border-color: rgba(255,255,255,.08);
    --f7-page-bg-color: #12141c;
    --f7-navbar-bg-color: #171a25;
    --f7-panel-bg-color: #171a25;
    --f7-dialog-bg-color: #1c1f2b;
    --f7-dialog-text-color: #eef0f8;
    --f7-toast-bg-color: #2b3040;
    --zg-bg: #1c1f2b;
    --zg-bg-soft: #12141c;
    --zg-fg: #eef0f8;
    --zg-muted: #a2a8bd;
    --zg-line: #2b3040;
    --zg-user: #2a2f55;
}
:root { --card-color: #ffffff; --line-color: #e5e7f0; }
.dark .navbar .navbar-bg { background: var(--f7-navbar-bg-color); }
.dark .navbar .nav-title, .dark .navbar .icon { color: #fff; }
.dark .panel .profile-image img { background: #232738; }
.dark input[type="text"], .dark input[type="password"], .dark input[type="email"] { background-color: var(--light-gray); color: var(--title-color); }
.dark ::placeholder { color: #7c8499; }

/* ---- interruptor claro/escuro da Yui (ícone lua/sol): na barra do chat e por cima do cartão do login */
.login-topbar { width: 100%; max-width: 420px; margin: 0 auto 10px; display: flex; justify-content: flex-end; }
.switch-theme--login { width: 42px; height: 42px; border-radius: 50%; background: var(--card-color); border: 1px solid var(--line-color); box-shadow: 0 6px 18px rgba(31,35,51,.08); color: var(--title-color); }
.switch-theme--login .icon { font-size: 22px; }

/* ---- ecrã de entrada: fundo com gradiente e cartão */
.login-screen-content {
    padding: 24px 16px; display: flex; flex-direction: column; justify-content: center; min-height: 100%;
    background:
        radial-gradient(60% 40% at 20% 0%, rgba(165,133,255,.28), transparent 70%),
        radial-gradient(50% 40% at 100% 100%, rgba(92,104,226,.24), transparent 70%),
        var(--background-color);
}
.login-card { box-sizing: border-box;
    width: 100%; max-width: 420px; margin: 0 auto; padding: 24px 22px 18px;
    background: var(--card-color); border: 1px solid var(--line-color); border-radius: 22px;
    box-shadow: 0 20px 50px rgba(31,35,51,.10);
}
.dark .login-card { box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.login-screen .signin-image img { width: 46%; max-width: 200px; margin: 0 auto; }
.login-screen h1 { margin: 6px 0 4px; font-size: 26px; }
.login-lead { color: var(--text-color); margin: 0 0 22px; font-size: 15px; line-height: 1.4; }
.login-screen form input { margin-bottom: 14px; }
.login-remember { display: flex; align-items: center; gap: 10px; margin: 2px 4px 16px; font-size: 14px; color: var(--text-color); }
.login-remember .icon-checkbox { flex: 0 0 auto; }
.login-button { --f7-button-bg-color: var(--zg-b); background: linear-gradient(135deg, var(--zg-a), var(--zg-b)); border-radius: 12px; font-weight: 600; height: 48px; line-height: 48px; box-shadow: 0 10px 24px rgba(92,104,226,.28); }
.login-error { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(220,53,69,.10); color: #dc3545; font-size: 13px; }
.login-screen .signin-links { margin: 22px 0 8px; font-size: 14px; }
.login-screen .signin-links a { color: var(--zg-b); }

/* ---- login: o gradiente vive no ecrã fixo (não no conteúdo que faz scroll), como na primeira versão */
.login-screen {
    background:
        radial-gradient(60% 40% at 20% 0%, rgba(165,133,255,.28), transparent 70%),
        radial-gradient(50% 40% at 100% 100%, rgba(92,104,226,.24), transparent 70%),
        var(--background-color);
}
.login-screen .page, .login-screen .page-content { background: transparent; }
.login-card { position: relative; }
.switch-theme--login { position: absolute; top: 12px; right: 12px; }
/* campos com etiqueta por cima e mais contraste (a versão anterior) */
.field { display: block; text-align: left; margin-bottom: 12px; }
.field span { display: block; font-size: 12px; font-weight: 600; color: var(--text-color); margin: 0 0 4px 4px; text-transform: uppercase; letter-spacing: .04em; }
.login-screen form .field input { margin-bottom: 0; height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-color); background: var(--background-color); color: var(--title-color); font-weight: 500; }
.login-screen form .field input:focus { border-color: var(--zg-b); box-shadow: 0 0 0 3px rgba(92,104,226,.18); }
.dark .login-screen form .field input { background: #12141c; border-color: #2b3040; }

/* ---- barra de menu flutuante (a tabbar da Yui, estilo Instagram/Facebook) */
:root { --tabbar-h: 52px; --tabbar-gap: 12px; }
.floating-tabbar.toolbar {
    position: absolute; left: 16px; right: 16px; width: auto; bottom: calc(var(--tabbar-gap) + var(--f7-safe-area-bottom)); top: auto;
    height: var(--tabbar-h); border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid var(--line-color); box-shadow: 0 14px 40px rgba(31,35,51,.18);
    --f7-toolbar-height: var(--tabbar-h); --f7-tabbar-link-active-color: var(--zg-b); --f7-tabbar-link-inactive-color: var(--text-color);
}
.floating-tabbar.toolbar::before, .floating-tabbar.toolbar::after { display: none; }   /* sem a linha de cima do F7 */
.dark .floating-tabbar.toolbar { background: rgba(23,26,37,.86); border-color: #2b3040; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.floating-tabbar .toolbar-inner { padding: 0 8px; }
.floating-tabbar .tab-link { transition: color .2s; }                 /* só ícones, como no Instagram */
.floating-tabbar .tab-link .icon { font-size: 26px; }
.floating-tabbar .tabbar-label { display: none; }
.floating-tabbar .tab-link-active { color: var(--zg-b); }             /* o ativo só muda de cor */
.dark .floating-tabbar .tab-link-active { color: var(--zg-a); }
/* o conteúdo de cada separador deixa espaço para a barra; o chat encosta o campo de escrita acima dela */
.page-main .page-content.tab { padding-bottom: calc(var(--tabbar-h) + var(--tabbar-gap) * 2 + var(--f7-safe-area-bottom)); }
.page-main .page-content.zg-host { padding-bottom: 0; }
.zg-host .zg-page .zg-panel { bottom: calc(var(--tabbar-h) + var(--tabbar-gap) * 2 + var(--f7-safe-area-bottom)); }
.zg-host .zg-foot { padding-bottom: .6rem; }
.nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; margin-left: 12px; }
.hidden { display: none !important; }

/* ---- Início: indicadores */
.dash-hello { padding: 18px 16px 6px; }
.dash-greet { margin: 0; font-size: 22px; font-weight: 600; color: var(--title-color); }
.dash-period { margin: 2px 0 0; font-size: 13px; color: var(--text-color); }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 16px; }
.kpi { border-radius: 18px; padding: 14px 14px 12px; background: var(--card-color); border: 1px solid var(--line-color); box-shadow: var(--block-shadow); }
.kpi--hero { grid-column: 1 / -1; background: linear-gradient(135deg, var(--zg-a), var(--zg-b)); color: #fff; border: 0; }
.kpi-label { font-size: 12px; font-weight: 500; color: var(--text-color); text-transform: uppercase; letter-spacing: .04em; }
.kpi--hero .kpi-label { color: rgba(255,255,255,.8); }
.kpi-value { font-size: 24px; font-weight: 600; color: var(--title-color); margin-top: 4px; line-height: 1.1; }
.kpi--hero .kpi-value { font-size: 32px; color: #fff; }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 999px; background: var(--light-gray); color: var(--title-color); }
.kpi--hero .kpi-delta { background: rgba(255,255,255,.18); color: #fff; }
.kpi-delta.up { color: #17c653; } .kpi-delta.down { color: #ff6b6b; }
.kpi--hero .kpi-delta.up, .kpi--hero .kpi-delta.down { color: #fff; }
.kpi-hint { font-size: 11.5px; color: var(--text-color); margin-top: 6px; }
.trend { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 12px; }
.trend-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.trend-bar i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: rgba(255,255,255,.35); min-height: 4px; }
.trend-bar i.now { background: #fff; }
.trend-bar span { font-size: 9.5px; color: rgba(255,255,255,.8); }
.dash-list .item-after { font-weight: 600; color: var(--title-color); }
.dash-list .item-subtitle { font-size: 12px; }
.dash-cta { margin: 14px 16px 4px; }
.list-empty { padding: 18px 16px; color: var(--text-color); font-size: 14px; text-align: center; }

/* ---- Insights e Conversas */
.cards-list { padding: 4px 8px; }
.insight-card { display: block; margin: 0 0 10px; border-radius: 16px; border: 1px solid var(--line-color); background: var(--card-color); box-shadow: var(--block-shadow); color: inherit; }
.insight-card .card-content-padding { padding: 12px 14px; }
.section-title { padding-left: 10px; padding-right: 10px; }
.insight-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.insight-title { font-weight: 600; color: var(--title-color); font-size: 15px; line-height: 1.25; }
.insight-sub { font-size: 12px; color: var(--text-color); margin-top: 2px; }
.insight-body { font-size: 13.5px; color: var(--text-color); line-height: 1.45; }
.insight-ask { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--zg-b); }
.colored-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.colored-icon .icon { font-size: 20px; }
.colored-icon.red { background: #ffe1dd; color: #e04a3a; } .colored-icon.yellow { background: #fff3c4; color: #b8860b; }
.colored-icon.green { background: #dcf7e3; color: #17a34a; } .colored-icon.blue { background: #dfe8ff; color: var(--zg-b); } .colored-icon.gray { background: var(--light-gray); color: var(--text-color); }
.dark .colored-icon.red { background: rgba(224,74,58,.2); } .dark .colored-icon.yellow { background: rgba(184,134,11,.22); }
.dark .colored-icon.green { background: rgba(23,163,74,.2); } .dark .colored-icon.blue { background: rgba(92,104,226,.25); }
.section-title { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 8px; font-weight: 600; color: var(--title-color); }
.section-title .link { font-size: 13px; font-weight: 500; color: var(--zg-b); }

/* ---- a Yui estica as imagens do conteúdo a 100%: dentro do Ziggy mandam as regras do componente */
.zg-host img { width: auto; max-width: 100%; border-radius: 0; }
.zg-host .zg-hero { width: 4.5rem; }
.zg-host .zg-row-avatar { width: 1.7rem; height: 1.7rem; }
.zg-host .zg-avatar img { width: 82%; height: 82%; }
.zg-host .zg-body { width: 100%; }
.zg-host .zg-msg table { width: 100%; }
/* a Yui redefine todos os input[type=text] (44px, margem 20px, fundo cinza): dentro do Ziggy mandam as regras do componente */
.zg-host .zg-composer textarea { height: auto; min-height: 26px; margin: 0; padding: 3px 6px; width: 100%; border: 0; border-radius: 0; background: transparent; color: var(--zg-fg); font-weight: 400; font-size: 15px; }
.zg-host .zg-composer { background: var(--card-color); border-color: var(--line-color); border-radius: 18px; }
.dark .zg-host .zg-composer { background: #1c1f2b; border-color: #2b3040; }
.dark .zg-host .zg-tool { background: #232738; color: #a2a8bd; }
.zg-host .zg-foot { padding: 8px 12px calc(10px + var(--f7-safe-area-bottom)); }
.zg-host .zg-note { display: none; }                                  /* o aviso aparece como notificação no arranque */
.zg-host .zg-body { padding: 12px 10px; }                             /* margens laterais como no resto da app */

/* ---- Início: as colunas não podem crescer com o conteúdo (senão o cartão sai do ecrã) */
.kpi-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px 10px; }
.kpi { min-width: 0; }
.dash-hello { padding-left: 10px; padding-right: 10px; }
.dash-cta { margin-left: 10px; margin-right: 10px; }

/* ---- notificação de arranque (a da Yui) */
.notification { --f7-notification-bg-color: var(--card-color); }
.notification .notification-icon img { width: 28px; height: 28px; border-radius: 50%; }

/* ---- respostas sem o avatar do Ziggy: a cor e o alinhamento à esquerda chegam */
.zg-host .zg-row-avatar { display: none; }
.zg-host .zg-row { max-width: 94%; }

/* ---- cartões de insight: ícone mais junto do título (a Yui dá-lhe margem e tamanho próprios) */
.insight-head { gap: 10px; }
.insight-head .colored-icon, .item-media .colored-icon { width: 40px; height: 40px; min-width: 40px; margin: 0; border-radius: 12px; }
.insight-head .colored-icon .icon { font-size: 20px; }
.insight-meta { min-width: 0; }

/* ---- filtros de horizonte (chips) e cartões de insight mais compactos */
.chips-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.chips-row::-webkit-scrollbar { display: none; }
.chip-filter { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-color); background: var(--card-color); color: var(--text-color); font-size: 13px; font-weight: 500; }
.chip-filter.active { background: linear-gradient(135deg, var(--zg-a), var(--zg-b)); color: #fff; border-color: transparent; }
.insight-card .insight-head { gap: 10px; align-items: center; margin-bottom: 6px; }
.insight-card .insight-head .colored-icon { width: 36px; height: 36px; min-width: 36px; margin: 0; border-radius: 10px; }
.insight-card .insight-head .colored-icon .icon { font-size: 18px; }
.insight-card .insight-title { font-size: 15px; }

/* ---- app instalada no ecrã inicial (sem barra de endereço): o F7 mete a área segura DENTRO da toolbar e
   empurrava os ícones para cima; a nossa pílula já fica acima da área segura, por isso a toolbar não leva padding */
.floating-tabbar.toolbar, .floating-tabbar.toolbar .toolbar-inner { padding-bottom: 0; height: var(--tabbar-h); box-sizing: border-box; }
.floating-tabbar.toolbar .toolbar-inner { align-items: center; }
.floating-tabbar .tab-link { height: var(--tabbar-h); }

/* ---- valores dos indicadores: um pouco mais pequenos, para caberem sempre no cartão */
.kpi-value { font-size: clamp(17px, 5.6vw, 22px); letter-spacing: -.01em; white-space: nowrap; }
.kpi--hero .kpi-value { font-size: clamp(26px, 8.5vw, 32px); }

/* ---- app instalada: o painel do chat já termina acima da barra e da área segura, por isso a caixa de pergunta
   não leva a área segura outra vez (ficava uma margem morta por baixo) */
.zg-host .zg-foot { padding: 8px 12px 10px !important; }
.floating-tabbar.toolbar { padding-bottom: 0 !important; }
.floating-tabbar.toolbar .toolbar-inner { padding-bottom: 0 !important; height: var(--tabbar-h) !important; }

/* ---- caixa de pergunta flutuante e translúcida (como o compositor do Claude no iPhone) */
.zg-host .zg-foot { position: absolute; left: 0; right: 0; bottom: 0; background: transparent !important; border-top: 0 !important; padding: 0 10px 10px !important; z-index: 2; }
.zg-host .zg-composer { background: rgba(255,255,255,.80); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(31,35,51,.10); box-shadow: 0 12px 34px rgba(31,35,51,.16); border-radius: 22px; padding: 10px 12px 8px; }
.dark .zg-host .zg-composer { background: rgba(28,31,43,.72); border-color: rgba(255,255,255,.08); box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.zg-host .zg-composer:focus-within { border-color: rgba(92,104,226,.6); box-shadow: 0 12px 34px rgba(92,104,226,.22); }
.zg-host .zg-body { padding-bottom: 120px !important; }             /* as mensagens passam por baixo da caixa */
.zg-host .zg-tobottom { top: -2.6rem; }

/* ---- barra do menu mais abaixo */
:root { --tabbar-gap: 6px; }

/* ---- lista dos melhores clientes: nome numa linha (cortado com reticências), valor à direita, margem por baixo */
.dash-list .item-content { padding-left: 10px; }
.dash-list .item-media { margin-right: 10px; }
.dash-list .item-media .colored-icon { width: 38px; height: 38px; min-width: 38px; border-radius: 12px; margin: 0; }
.dash-list .item-inner { display: block; padding-right: 10px; min-width: 0; }
.dash-list .item-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dash-list .item-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--title-color); }
.dash-list .item-after { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--title-color); }
.dash-list .item-subtitle { display: block; font-size: 12px; color: var(--text-color); margin-top: 2px; }

/* ---- barra do menu ainda mais abaixo: na app instalada entra pela área do indicador de casa (fica a 20px do
   fundo), no browser fica a 8px */
:root { --tabbar-bottom: max(8px, calc(var(--f7-safe-area-bottom) - 14px)); }
.floating-tabbar.toolbar { bottom: var(--tabbar-bottom); }
.page-main .page-content.tab { padding-bottom: calc(var(--tabbar-h) + var(--tabbar-bottom) + 16px); }
.zg-host .zg-page .zg-panel { bottom: calc(var(--tabbar-h) + var(--tabbar-bottom) + 10px); }

/* ---- lista de conversas: título numa linha com reticências, data à direita sempre visível */
#conversations-list .item-content { padding-left: 10px; }
#conversations-list .item-media { margin-right: 10px; }
#conversations-list .item-media .colored-icon { width: 38px; height: 38px; min-width: 38px; border-radius: 12px; margin: 0; }
#conversations-list .item-inner { display: block; padding-right: 10px; min-width: 0; }
#conversations-list .item-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#conversations-list .item-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--title-color); }
#conversations-list .item-after { flex: 0 0 auto; font-size: 13px; color: var(--text-color); }

/* ---- tabelas nas respostas: no telemóvel a bolha ocupa a largura toda, a tabela é compacta e, se não couber,
   faz scroll horizontal com a primeira coluna fixa */
.zg-host .zg-row, .zg-host .zg-row .zg-msg, .zg-host .zg-msg-bot { max-width: 100%; }
.zg-host .zg-msg table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; font-size: 12.5px; line-height: 1.3; white-space: nowrap; margin: 6px 0; border-radius: 10px; }
.zg-host .zg-msg table thead th { position: sticky; top: 0; }
.zg-host .zg-msg table th, .zg-host .zg-msg table td { padding: 6px 8px; border: 1px solid var(--zg-line); vertical-align: top; }
.zg-host .zg-msg table th:first-child, .zg-host .zg-msg table td:first-child { position: sticky; left: 0; background: var(--zg-bg); z-index: 1; white-space: normal; min-width: 96px; max-width: 150px; }
.zg-host .zg-msg table th { background: var(--zg-bg-soft); font-weight: 600; }
.zg-host .zg-msg table th:first-child { background: var(--zg-bg-soft); }
.zg-host .zg-msg table td:not(:first-child) { text-align: right; }

/* ---- perfil: sair e tema na própria lista; «instalar» só aparece quando o browser o permite */
.is-hidden { display: none !important; }
.profile-links .logout-link, .profile-links .logout-link .icon { color: #dc3545; }
.profile-links a { text-transform: none; }

/* ---- perfil: o mesmo fundo com gradiente e o mesmo cartão do login, com o Ziggy inteiro */
.profile-screen {
    background:
        radial-gradient(60% 40% at 20% 0%, rgba(165,133,255,.28), transparent 70%),
        radial-gradient(50% 40% at 100% 100%, rgba(92,104,226,.24), transparent 70%),
        var(--background-color);
    background-repeat: no-repeat; background-size: 100% 100%;
    padding-left: 16px; padding-right: 16px;
}
.profile-card { margin-top: 10px; padding-top: 22px; text-align: center; }
.profile-card .signin-image img { width: 42%; max-width: 180px; margin: 0 auto; }
.profile-card h1 { margin: 8px 0 2px; font-size: 22px; }
.profile-card .login-lead { margin: 0 0 8px; }
.profile-card .profile-links { text-align: left; margin: 6px 0 0; }
.profile-card .profile-links a { padding: 12px 4px; }
.profile-card .panel-foot { margin: 14px 0 4px; }

/* ---- ícones dos insights com contraste no escuro (fundo translúcido da cor + ícone claro) */
.dark .colored-icon.red { background: rgba(224,74,58,.22); color: #ff8a7a; }
.dark .colored-icon.yellow { background: rgba(230,180,40,.22); color: #f5c542; }
.dark .colored-icon.green { background: rgba(23,198,83,.22); color: #4ade80; }
.dark .colored-icon.blue { background: rgba(165,133,255,.22); color: #c4b0ff; }
.dark .colored-icon.gray { background: rgba(255,255,255,.10); color: #d5d9e6; }
.colored-icon.gray { background: #e8eaf1; color: #5b6478; }

/* ---- ícones dos insights: cor mais discreta (fundo quase neutro, glifo na cor mas suave) */
.dark .colored-icon.red { background: rgba(224,74,58,.12); color: #e39a90; }
.dark .colored-icon.yellow { background: rgba(230,180,40,.12); color: #d9bf6a; }
.dark .colored-icon.green { background: rgba(23,198,83,.12); color: #7fcf9a; }
.dark .colored-icon.blue { background: rgba(165,133,255,.12); color: #b3a3e6; }
.dark .colored-icon.gray { background: rgba(255,255,255,.07); color: #b7bccb; }
.colored-icon.red { background: #fbe9e6; color: #c8695c; } .colored-icon.yellow { background: #fbf3d6; color: #b39a3a; }
.colored-icon.green { background: #e4f6ea; color: #4f9f6a; } .colored-icon.blue { background: #ebe8fb; color: #7a72c9; }