#hub-container {
    width: 100%;
    max-width: none;
    height: 100vh;
    padding: 0;
    text-align: left;
    overflow: hidden;
}

/*
 * Shell stacking scale (coherent, no magic 9999):
 *   40  — rail chrome
 *   45  — home floating widgets
 *   49  — history backdrop
 *   50  — section panels (history, mobile phone)
 *   55  — floating menus (personalize picker)
 *   100 — global overlays (personalize modal via elevated content)
 */
.shell-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: 92px;
    padding: var(--space-4) var(--space-2);
    background: var(--surface-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Conteúdo mais alto que a viewport (janela baixa) rola em vez de cortar
       Celular / tema / Conta. margin-top:auto do .shell-controls resolve pra 0
       sob overflow, então os itens empilham naturalmente. */
    overflow-y: auto;
    scrollbar-width: thin;
}

.shell-brand {
    display: grid;
    place-items: center;
    height: 52px;
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.shell-brand img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.shell-brand img,
.shell-home .hub-main-logo {
    border-radius: 0;
    -webkit-mask-image: radial-gradient(circle, var(--text-primary) 55%, transparent 100%);
    mask-image: radial-gradient(circle, var(--text-primary) 55%, transparent 100%);
}

.shell-nav-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.shell-controls {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.shell-control-btn {
    width: 100%;
    min-height: 52px;
    padding: var(--space-1);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font: inherit;
    font-size: var(--font-xs);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.shell-control-btn i { font-size: 1.35rem; }
.shell-control-btn:hover:not(:disabled) {
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), .08);
    border-color: rgba(var(--primary-rgb), .28);
}
.shell-control-btn:disabled { opacity: .4; cursor: not-allowed; }

.shell-control-btn[aria-expanded="true"] {
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), .08);
    border-color: rgba(var(--primary-rgb), .28);
}

.shell-history-filters button,
.shell-history-clear {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-hover);
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
}

.shell-panel-settings {
    /* `* { margin: 0 }` (index.html) mata o `margin: auto` da UA para
       dialog:modal e o modal cola no canto superior esquerdo.
       .terms-gate-dialog compensa igual. */
    margin: auto;
    width: min(44rem, calc(100vw - var(--space-8)));
    max-height: calc(100dvh - var(--space-8));
    padding: var(--space-5);
    overflow-y: auto;
    border: 1px solid var(--modal-border);
    border-radius: var(--radius-xl);
    background: var(--modal-bg);
    color: var(--text-primary);
    box-shadow: var(--modal-shadow);
}

.shell-panel-settings::backdrop { background: rgba(var(--black-rgb), .65); }
.shell-panel-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.shell-panel-settings-header :is(h2, p) { margin: 0; }
.shell-panel-settings-header p { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--font-sm); }
.shell-panel-settings-close {
    padding: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.shell-panel-settings-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.shell-panel-settings-list { display: grid; gap: var(--space-1); }
.shell-panel-setting {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-hover);
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
}
.shell-panel-setting:hover { border-color: var(--border-hover); }
.shell-panel-setting input { margin: 0; accent-color: var(--primary-color); }
.shell-panel-setting input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.shell-panel-settings-actions { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
.shell-panel-reset {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
}
.shell-panel-reset:hover { border-color: var(--border-hover); background: var(--surface-hover); color: var(--text-primary); }
.shell-panel-reset:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.shell-history-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(var(--black-rgb), .65);
}
.shell-history-backdrop[hidden] { display: none; }

.shell-history-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 50;
    width: min(420px, calc(100vw - 92px));
    padding: var(--space-5);
    border-left: 1px solid var(--border-color);
    background: var(--surface-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform var(--transition-base);
}
.shell-history-panel.open { visibility: visible; pointer-events: auto; transform: translateX(0); }
.shell-history-header { display: flex; align-items: center; justify-content: space-between; }
.shell-history-header > div { display: flex; flex-direction: column; }
.shell-history-header span, .shell-history-state { color: var(--text-muted); font-size: var(--font-sm); }
.shell-history-header button {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
}
.shell-history-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.shell-history-filters button { flex: 1 1 auto; min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); }
.shell-history-filters button.active { color: var(--primary-color); border-color: rgba(var(--primary-rgb), .35); background: rgba(var(--primary-rgb), .1); }
.shell-history-state { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.shell-history-state[hidden] { display: none; }
.shell-history-state p { margin: 0; }
.shell-history-empty-icon { font-size: 2rem; color: var(--text-muted); opacity: .5; }
.shell-history-empty-hint { color: var(--text-muted); font-size: var(--font-xs); max-width: 22ch; }
.shell-history-list { min-height: 0; overflow-y: auto; display: grid; gap: var(--space-2); }
.shell-history-entry { position: relative; }
.shell-history-item {
    --history-channel: var(--primary-color);
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--history-channel);
    border-radius: var(--radius-md);
    background: var(--surface-hover);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.shell-history-item[data-app="exam"] { --history-channel: var(--ch-exam); }
.shell-history-item[data-app="evolve"] { --history-channel: var(--ch-evolve); }
.shell-history-item-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); padding-right: var(--space-5); }
.shell-history-origin { color: var(--history-channel); font-size: var(--font-xs); font-weight: 600; }
.shell-history-date { margin-left: auto; color: var(--text-muted); font-size: var(--font-xs); }
.shell-history-delete {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.shell-history-delete:hover { color: var(--error-color); }
.shell-history-preview { color: var(--text-secondary); font-size: var(--font-sm); line-height: var(--leading-base); }
.shell-history-clear { margin-top: var(--space-3); padding: var(--space-2); }
.shell-history-clear:hover { color: var(--error-color); border-color: rgba(var(--error-rgb), .3); }

.shell-mobile-panel {
    position: fixed;
    inset: var(--space-4) auto var(--space-4) 104px;
    z-index: 50;
    width: min(390px, calc(100vw - 120px));
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
}

.shell-mobile-panel[hidden] { display: none; }
.shell-mobile-header, .shell-mobile-header > div, .shell-mobile-send-all { display: flex; }
.shell-mobile-header { align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.shell-mobile-header > div { flex-direction: column; gap: 2px; }
.shell-mobile-header span, .shell-mobile-hint, .shell-mobile-empty { color: var(--text-muted); font-size: var(--font-sm); }
.shell-mobile-header button {
    display: grid;
    place-items: center;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
}
.shell-mobile-header button i { pointer-events: none; }
.shell-mobile-pairing { text-align: center; }
.shell-mobile-pairing p { margin: 0 0 var(--space-2); color: var(--text-secondary); }
.shell-mobile-qr { width: fit-content; margin: 0 auto var(--space-2); padding: var(--space-2); }
.shell-mobile-qr img, .shell-mobile-qr canvas { display: block; }
.shell-mobile-pairing code { display: block; overflow-wrap: anywhere; color: var(--text-muted); font-size: var(--font-xs); }
.shell-mobile-pair-btn, .shell-mobile-send-all button {
    border: 1px solid rgba(var(--primary-rgb), .3);
    border-radius: var(--radius-md);
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
    font: inherit;
    cursor: pointer;
}
.shell-mobile-pair-btn { width: 100%; margin: var(--space-3) 0; padding: var(--space-2); }
.shell-mobile-send-all { flex-wrap: wrap; gap: var(--space-2); }
.shell-mobile-send-all button { flex: 1 1 auto; min-width: 0; padding: var(--space-2); font-size: var(--font-xs); }
.shell-mobile-panel button:disabled { opacity: .4; cursor: not-allowed; }
.shell-mobile-hint { margin: var(--space-2) 0; }
.shell-mobile-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
/* Uma linha compacta: thumb 36px | nome truncado | remover — envio fica nos botões do painel */
.shell-mobile-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-hover);
    min-height: 0;
}
.shell-mobile-item img {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}
.shell-mobile-item > i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 1.25rem;
}
.shell-mobile-item > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-sm);
}
.shell-mobile-text {
    grid-column: 1 / -1;
    margin: 0;
    max-height: 12rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: var(--font-sm);
}
.shell-mobile-item-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.shell-mobile-item-action {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.shell-mobile-item-action:hover:not(:disabled) {
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.1);
}
.shell-mobile-item-remove:hover:not(:disabled) {
    color: var(--error-color);
    background: rgba(var(--error-rgb), 0.1);
}

.shell-controls .account-trigger { height: auto; border-radius: var(--radius-md); background: transparent; }
.shell-controls .account-trigger:hover { transform: none; }
.shell-controls .account-menu.open .account-trigger { transform: none; }

.shell-nav-item {
    --channel: var(--primary-color);
    --channel-rgb: var(--primary-rgb);
    min-height: 58px;
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: var(--font-xs);
    line-height: 1.15;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.shell-nav-item[data-shell-app="exam"] { --channel: var(--ch-exam, var(--primary-color)); --channel-rgb: var(--ch-exam-rgb, var(--primary-rgb)); }
.shell-nav-item[data-shell-app="evolve"] { --channel: var(--ch-evolve, var(--accent-color)); --channel-rgb: var(--ch-evolve-rgb, var(--accent-rgb)); }
.shell-nav-item[data-shell-app="calc"] { --channel: var(--ch-calc, var(--teal-color)); --channel-rgb: var(--ch-calc-rgb, var(--teal-rgb)); }
.shell-nav-item[data-shell-app="med"] { --channel: var(--ch-med, var(--warning-color)); --channel-rgb: var(--ch-med-rgb, var(--warning-rgb)); }

.shell-nav-item i { font-size: 1.45rem; }
.shell-nav-item:hover:not([aria-disabled="true"]) {
    color: var(--channel);
    background: rgba(var(--channel-rgb), 0.08);
}
.shell-nav-item.active {
    color: var(--channel);
    background: rgba(var(--channel-rgb), .08);
    border-color: rgba(var(--channel-rgb), .28);
    box-shadow: 0 0 18px rgba(var(--channel-rgb), .16);
}
.shell-nav-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.shell-content {
    position: fixed;
    inset: 0 0 0 92px;
    background-color: var(--bg-color);
    background-image: var(--body-gradient-1), var(--body-gradient-2);
}

.shell-view { width: 100%; height: 100%; }
.shell-view[hidden] { display: none !important; }

.shell-content.shell-panel-active {
    overflow: hidden;
}

.shell-content:not(.shell-panel-active) .shell-panel-workspace { display: contents; }
.shell-panel-tree { display: none; }

.shell-panel-active .shell-panel-workspace {
    --shell-panel-min-width: calc(var(--space-12) + var(--space-12) + var(--space-12) + var(--space-12));
    --shell-panel-min-height: calc(var(--space-12) + var(--space-12));
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.shell-panel-active .shell-panel-tree {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    pointer-events: none;
}

.shell-split,
.shell-split-pane,
.shell-panel-slot {
    display: flex;
    min-width: 0;
    min-height: 0;
}

.shell-split { flex: 1 1 0; }
.shell-split-row { flex-direction: row; }
.shell-split-column { flex-direction: column; }
.shell-split-pane { flex: 1 1 0; }
.shell-split-row > .shell-split-pane { min-width: var(--shell-panel-min-width); }
.shell-split-column > .shell-split-pane { min-height: var(--shell-panel-min-height); }
.shell-split-column > .shell-split-pane:has(> .shell-panel-slot[data-panel-slot="exam"]) {
    min-height: calc(var(--space-12) * 7);
}
.shell-panel-slot { flex: 1 1 0; }

.shell-splitter {
    position: relative;
    z-index: 3;
    flex: 0 0 var(--space-2);
    border-radius: var(--radius-full);
    pointer-events: auto;
    touch-action: none;
}

.shell-split-row > .shell-splitter { cursor: col-resize; }
.shell-split-column > .shell-splitter { cursor: row-resize; }
.shell-splitter::before {
    content: '';
    position: absolute;
    /* Quase invisível em repouso; nítido em hover/focus/drag. Hit area inalterada. */
    border-color: color-mix(in srgb, var(--border-color) 14%, transparent);
    transition: border-color var(--transition-fast);
}
.shell-split-row > .shell-splitter::before { inset: var(--space-2) 50%; border-left: 1px solid; }
.shell-split-column > .shell-splitter::before { inset: 50% var(--space-2); border-top: 1px solid; }
.shell-splitter:is(:hover, :focus-visible, :active)::before { border-color: var(--border-hover); }
.shell-splitter:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.shell-panel-active .shell-app-view {
    --panel-channel: var(--primary-color);
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 1;
    width: var(--panel-width);
    height: var(--panel-height);
    transform: translate3d(var(--panel-x), var(--panel-y), 0);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
}

.shell-resizing iframe,
.shell-panel-dragging iframe { pointer-events: none; }
.shell-panel-active .shell-app-view.is-dragging { opacity: .55; }
.shell-panel-active .shell-app-view.is-dragging .shell-panel-header { cursor: grabbing; }
.shell-panel-drop-target::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: var(--primary-glow);
    box-shadow: inset 0 0 0 var(--space-1) var(--panel-channel);
}
.shell-panel-drop-target[data-panel-drop-region="left"]::after { right: 50%; }
.shell-panel-drop-target[data-panel-drop-region="right"]::after { left: 50%; }
.shell-panel-drop-target[data-panel-drop-region="top"]::after { bottom: 50%; }
.shell-panel-drop-target[data-panel-drop-region="bottom"]::after { top: 50%; }
.shell-panel-status {
    position: absolute;
    inset: 0 auto auto 0;
    width: var(--space-1);
    height: var(--space-1);
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
    white-space: nowrap;
}

.shell-app-view[data-shell-view="exam"] { --panel-channel: var(--ch-exam); }
.shell-app-view[data-shell-view="evolve"] { --panel-channel: var(--ch-evolve); }
.shell-app-view[data-shell-view="calc"] { --panel-channel: var(--ch-calc); }
.shell-app-view[data-shell-view="med"] { --panel-channel: var(--ch-med); }

.shell-panel-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    cursor: grab;
    user-select: none;
}

.shell-panel-active .shell-panel-header { display: flex; }
.shell-panel-header strong {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shell-panel-header strong i { color: var(--panel-channel); font-size: var(--font-lg); }
.shell-panel-drag-handle:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.shell-panel-actions { display: flex; align-items: center; gap: var(--space-1); }
.shell-panel-header :is(a, button) {
    display: grid;
    place-items: center;
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.shell-panel-header :is(a, button):hover:not(:disabled) { color: var(--panel-channel); background: var(--surface-hover); }
.shell-panel-header :is(a, button):focus-visible { outline: none; box-shadow: var(--focus-ring); }
.shell-panel-header button:disabled { opacity: .4; cursor: not-allowed; }

/* Home em coluna, com rolagem quando cards e feedback ultrapassarem a viewport. */
.shell-home {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    padding: clamp(0.5rem, 2.5dvh, var(--space-8)) clamp(var(--space-3), 2vw, var(--space-8));
    text-align: center;
    gap: clamp(0.25rem, 1.2dvh, var(--space-4));
}

.shell-home > :not(.pix-widget) {
    width: min(100%, 1000px);
    margin-left: auto;
    margin-right: auto;
    flex-shrink: 0;
}

/* Reserva o rodapé onde o widget Pix (fixed, canto inferior direito) flutua, para
   ele não cobrir o CTA do último card em telas onde o grid chega perto da base
   (#21/#4). Some quando o usuário dispensa o Pix. Home rola (overflow-y: auto),
   então isto nunca comprime os cards. */
.shell-home:has(> .pix-widget:not([hidden])) {
    padding-bottom: clamp(8rem, 20dvh, 11rem);
}

.shell-home .logo-container {
    margin-bottom: 0;
}

.shell-home .logo-img,
.shell-home .hub-main-logo {
    width: clamp(3.5rem, 9dvh, 7.5rem);
    margin-bottom: clamp(0.15rem, 0.8dvh, var(--space-4));
}

.shell-home .logo-container h1 {
    font-size: clamp(1.5rem, 4dvh, var(--font-hero));
    margin-bottom: clamp(0.1rem, 0.4dvh, var(--space-2));
}

.shell-home .subtitle {
    font-size: clamp(0.8rem, 1.8dvh, var(--font-lg));
    margin-bottom: 0;
}

.shell-home .sub-banner {
    margin: 0;
}

.shell-home .sub-banner-inner {
    padding: clamp(0.5rem, 1.2dvh, var(--space-4)) clamp(0.75rem, 2vw, var(--space-6));
    gap: clamp(0.5rem, 1dvh, 1rem);
}

.shell-home .apps-grid {
    flex: 0 0 auto;
    align-content: stretch;
    gap: clamp(0.5rem, 1.5dvh, var(--space-5));
    grid-auto-rows: minmax(180px, auto);
}

.shell-home .app-card {
    min-height: 0;
    padding: clamp(0.6rem, 2dvh, var(--space-10)) clamp(0.65rem, 1.5vw, var(--space-8));
}

.shell-home .app-card--primary {
    padding-block: clamp(0.6rem, 2.5dvh, var(--space-12));
}

.shell-home .hub-app-icon {
    width: clamp(2.25rem, 5.5dvh, 4rem);
    height: clamp(2.25rem, 5.5dvh, 4rem);
    margin-bottom: clamp(0.35rem, 1dvh, 1.5rem);
}

.shell-home .app-card--primary .hub-app-icon {
    width: clamp(2.5rem, 6.5dvh, calc(var(--space-12) + var(--space-6)));
    height: clamp(2.5rem, 6.5dvh, calc(var(--space-12) + var(--space-6)));
}

.shell-home .hub-glyph-icon {
    font-size: clamp(1.5rem, 4dvh, 3.5rem);
}

.shell-home .hub-calc-icon,
.shell-home .hub-med-icon {
    height: clamp(2.25rem, 5.5dvh, 4rem);
    font-size: clamp(1.5rem, 4dvh, 3.5rem);
}

.shell-home .app-title {
    font-size: clamp(1rem, 2.5dvh, var(--font-2xl));
    margin-bottom: clamp(0.2rem, 0.6dvh, var(--space-3));
}

.shell-home .app-desc {
    font-size: clamp(0.7rem, 1.5dvh, var(--font-base));
    line-height: var(--leading-tight);
    margin-bottom: clamp(0.35rem, 1dvh, var(--space-8));
}

.shell-home .app-btn {
    padding: clamp(0.35rem, 0.9dvh, var(--space-3)) clamp(0.6rem, 1.2vw, var(--space-6));
    font-size: clamp(0.7rem, 1.3dvh, var(--font-sm));
}

:is(
    .sub-cta,
    .app-btn,
    .account-dropdown button,
    .shell-panel-reset,
    .shell-mobile-pair-btn,
    .shell-mobile-send-all button,
    .shell-history-filters button,
    .shell-history-clear,
    .feedback-widget-form button[type="submit"]
) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
}

/* Feedback fora do scroller da home: fixed real, sem hit-target deslocado. */
.shell-home[hidden] + .feedback-widget { display: none; }
.feedback-widget {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
}

.feedback-widget-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--surface-color);
    color: var(--text-secondary);
    box-shadow: var(--shadow-md);
    font: inherit;
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.feedback-widget-toggle i { font-size: 1.1rem; color: var(--accent-color); }

.feedback-widget-toggle:hover {
    background: var(--surface-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

.feedback-widget-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.feedback-widget-toggle[aria-expanded="true"] {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.feedback-widget-popover {
    width: min(calc(100vw - var(--space-8)), 300px);
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--surface-color);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

.feedback-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.feedback-widget-header strong {
    font-size: var(--font-sm);
    color: var(--text-primary);
}

.feedback-widget-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.feedback-widget-close:hover { color: var(--text-primary); background: var(--surface-hover); }
.feedback-widget-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.feedback-widget-hint {
    margin: 0 0 var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-xs);
    line-height: var(--leading-tight);
}

.feedback-widget-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.feedback-widget-form textarea {
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-sm);
}

.feedback-widget-form textarea::placeholder { color: var(--text-muted); }
.feedback-widget-form textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.feedback-widget-form button[type="submit"] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--primary-color);
    color: var(--text-on-accent);
    font: inherit;
    font-size: var(--font-sm);
    font-weight: 700;
    cursor: pointer;
}

.feedback-widget-form button[type="submit"]:hover:not(:disabled) { background: var(--primary-hover); }
.feedback-widget-form button[type="submit"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.feedback-widget-form button[type="submit"]:disabled { opacity: .6; cursor: wait; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.shell-home footer {
    margin-top: 0;
    gap: clamp(0.25rem, 0.8dvh, var(--space-4));
    font-size: clamp(0.7rem, 1.2dvh, var(--font-sm));
}

.shell-app-view iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--bg-color);
}

/* Skeleton até o app embutido revelar conteúdo autenticado. */
.shell-app-view { position: relative; }
.shell-app-view:not(:has(iframe[data-shell-loaded="true"]))::after {
    content: "Carregando\2026";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Só decoração: o overlay cobre o iframe inteiro e, sem isto, engole o
       clique do usuário no app enquanto o skeleton estiver visível. */
    pointer-events: none;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: var(--font-sm);
    background:
        linear-gradient(100deg, transparent 38%, rgba(var(--primary-rgb), .24) 50%, transparent 62%) var(--bg-color);
    background-size: 200% 100%;
    animation: shell-frame-shimmer 1.4s ease-in-out infinite;
}
.shell-app-view:has(iframe[data-shell-load-failed="true"])::after {
    content: "Não foi possível carregar";
    animation: none;
    background: var(--bg-color);
}
@keyframes shell-frame-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .shell-app-view:not(:has(iframe[data-shell-loaded="true"]))::after { animation: none; }
}

.hub-med-icon {
    height: 64px;
    display: grid;
    place-items: center;
    color: var(--ch-med, var(--warning-color));
    font-size: 56px;
}

.med-btn {
    color: var(--text-on-accent);
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.app-card:is(:hover, :focus-visible, :focus-within) .med-btn {
    color: var(--text-on-accent);
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.panel-btn {
    color: var(--text-on-accent);
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.app-card:is(:hover, :focus-visible, :focus-within) .panel-btn {
    color: var(--text-on-accent);
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

@media (max-width: 900px), (pointer: coarse) {
    .shell-panel-active .shell-panel-tree { flex-direction: column; }
    .shell-panel-active :is(.shell-split, .shell-split-pane) { display: contents; }
    .shell-panel-active .shell-splitter { display: none; }
    .shell-panel-active .shell-panel-slot {
        flex: 1 1 0;
        min-width: 0;
        min-height: var(--space-12);
    }
    .shell-panel-header { cursor: default; }
}

/* 640 alinhado ao restante do sistema (antes: 768, e antes disso 767 — 1px de buraco). */
@media (max-width: 640px) {
    .shell-panel-settings { width: calc(100% - var(--space-4)); max-width: calc(100vw - var(--space-4)); max-height: calc(100dvh - var(--space-4)); padding: var(--space-4); }

    .shell-rail {
        inset: auto 0 0;
        width: auto;
        height: 68px;
        padding: var(--space-1);
        overflow-x: auto;
        overflow-y: hidden;
        border: 0;
        border-top: 1px solid var(--border-color);
        flex-direction: row;
        scrollbar-width: none;
    }
    .shell-rail::-webkit-scrollbar { display: none; }

    .shell-brand { display: none; }
    .shell-nav-items { flex: 0 0 auto; flex-direction: row; gap: 0; height: 100%; }
    .shell-nav-item { flex: 0 0 var(--space-12); min-width: 0; min-height: 0; padding: var(--space-1); }
    .shell-nav-item i { font-size: 1.25rem; }
    .shell-controls { flex: 0 0 auto; flex-direction: row; gap: 0; height: 100%; margin: 0; min-width: 0; }
    .shell-controls > * { flex: 0 0 var(--space-12); min-width: 0; }
    .shell-control-btn { min-height: 0; height: 100%; padding: var(--space-1); }
    .shell-control-btn i { font-size: 1.2rem; }
    .shell-nav-item span,
    .shell-control-btn > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .shell-controls .account-dropdown { position: fixed; inset: auto var(--space-2) 76px auto; }
    .shell-mobile-panel { inset: auto var(--space-2) 76px; width: auto; max-height: calc(100vh - 90px); }
    .shell-history-panel { inset: 0 0 68px; width: 100%; }
    .shell-content { inset: 0 0 68px; }
    .shell-home {
        padding: clamp(0.5rem, 1.5dvh, 1.25rem) var(--space-4) clamp(0.5rem, 1.5dvh, 1rem);
        justify-content: flex-start;
    }
    /* Pix fica fora do fluxo (acima da bottom bar) para não roubar altura dos cards */
    .shell-home .pix-widget {
        position: fixed;
        bottom: calc(68px + var(--space-2));
        right: var(--space-2);
        margin: 0;
        width: auto;
    }
    .shell-home .apps-grid {
        flex: 0 0 auto;
        grid-auto-rows: auto;
    }
    .shell-home .app-card,
    .shell-home .app-card--primary {
        padding: clamp(0.5rem, 1.5dvh, 1.25rem) clamp(0.65rem, 2vw, 1.25rem);
    }
    .shell-home .app-card--primary .hub-app-icon {
        width: clamp(2.25rem, 5dvh, 4rem);
        height: clamp(2.25rem, 5dvh, 4rem);
    }
    .feedback-widget {
        top: var(--space-2);
        right: var(--space-2);
    }
}