/* assets/css/portfolio-home.css */ /* Catálogo após a escolha da carteira. */ #companiesView .workspace {padding-bottom:24px} #companiesView .portfolio-toolbar {margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #e0e8f0} #companiesView .portfolio-back {min-height:40px;padding:9px 12px;border:1px solid #dce5ef;border-radius:10px;background:#fff;font-size:12px;text-decoration:none} #companiesView .portfolio-back:hover {background:#f2f6fb;border-color:#adc1d5} #companiesView .portfolio-owner {font-size:12px;color:#546e87} #companiesView .search-card {padding:24px;margin-bottom:18px;border:1px solid #dce5ef;border-radius:16px;background:#fff;box-shadow:0 3px 14px #203c5704} #companiesView .directory-heading {margin-bottom:20px} #companiesView .directory-heading h2 {margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.4px;color:#29435d} #companiesView .directory-heading p {margin:0;color:#718399;line-height:1.6} #companiesView .directory-controls {padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} #companiesView .directory-controls input,#companiesView .directory-controls select {min-height:48px;border-radius:10px;background:#f8fafc;font-size:14px} /* A borda pertence ao conjunto ícone + campo; o input fica dentro dela. */ #companiesView .directory-controls .search-wrap { box-sizing:border-box;height:48px;min-height:48px; border:1px solid #9eafc2;border-radius:10px;background:#fff; box-shadow:0 1px 2px #203c5704; } #companiesView .directory-controls .search-wrap:hover {border-color:#7e97b1} #companiesView .directory-controls .search-wrap:focus-within { border-color:#547b9f;background:#fff;box-shadow:0 0 0 3px #547b9f18; } #companiesView .directory-controls .search-wrap input { box-sizing:border-box;height:100%;min-height:0;border:0; border-radius:0!important;background:transparent!important; } #companiesView .directory-controls .search-wrap > span {color:#738ba3} #companiesView .company-filters {margin-top:16px;gap:8px} #companiesView .company-filter {min-height:38px;padding:8px 13px;border-radius:8px;font-size:12px} #companiesView .company-filter.active {background:#eaf1f9;border-color:#c9d9e9;color:#2c5275} #companiesView .search-meta {margin-top:16px;padding:14px 0 0;border-top:1px solid #edf1f6;color:#7a8b9e} #companiesView #companyCount {color:#445f78;font-weight:550} #companiesView .grid {border-radius:16px;border-color:#dce5ef} #companiesView .company-card.company-row {min-height:82px;padding:16px 22px;gap:16px} #companiesView .company-row-name {font-size:14px} #companiesView .company-row-code {width:50px;height:40px;border-radius:10px;background:#edf3f9;border-color:#dce6f1;color:#456784} #companiesView .company-row-action b {width:30px;height:30px;border-radius:9px} #companiesView .company-card.company-row:hover {background:#f7faff;box-shadow:inset 3px 0 #6b91b4} @media(max-width:760px) { #companiesView .search-card {padding:18px} #companiesView .directory-heading {gap:14px;margin-bottom:16px} #companiesView .directory-heading #addCompany {width:auto;min-height:44px} #companiesView .directory-controls {padding:0} #companiesView .search-meta {align-items:flex-start;gap:8px;flex-wrap:wrap} #companiesView .company-card.company-row {grid-template-columns:46px minmax(0,1fr) auto;padding:15px 12px;gap:10px} #companiesView .company-row-code {width:44px;height:38px;font-size:11px} #companiesView .company-row-name {font-size:13px;white-space:normal;overflow-wrap:anywhere} #companiesView .company-row-action > span {display:none} } @media(prefers-reduced-motion:reduce) { #portfolioPicker,#portfolioPicker .portfolio-access {animation:none} #portfolioPicker .portfolio-entry,#portfolioPicker .portfolio-entry-arrow {transition:none} #portfolioPicker .portfolio-entry:hover,#portfolioPicker .portfolio-entry:active,#portfolioPicker .portfolio-entry:hover .portfolio-entry-arrow {transform:none} } /* Entrada da carteira: movimento curto, com sequência limitada mesmo em listas grandes. */ @keyframes portfolioWorkspaceEnter { from {opacity:0;transform:translateY(10px)} to {opacity:1;transform:none} } @keyframes portfolioCompanyEnter { from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:none} } #companiesView .hero:not([hidden]) { animation:portfolioWorkspaceEnter 280ms cubic-bezier(.22,1,.36,1) both; } #companiesView .hero:not([hidden]) + .overview { animation:portfolioWorkspaceEnter 300ms 35ms cubic-bezier(.22,1,.36,1) both; } #companiesView .workspace:not([hidden]) .portfolio-toolbar { animation:portfolioWorkspaceEnter 300ms 55ms cubic-bezier(.22,1,.36,1) both; } #companiesView .workspace:not([hidden]) .search-card { animation:portfolioWorkspaceEnter 320ms 75ms cubic-bezier(.22,1,.36,1) both; } #companiesView .workspace:not([hidden]) .company-card.company-row { animation:portfolioCompanyEnter 300ms cubic-bezier(.22,1,.36,1) both; animation-delay:calc(90ms + min(var(--row-index,0) * 18ms,126ms)); } #portfolioPicker .portfolio-entry:active {background:#eaf2fa;box-shadow:inset 0 1px 3px #2948650a} @media(prefers-reduced-motion:reduce) { #companiesView .hero,#companiesView .overview, #companiesView .portfolio-toolbar,#companiesView .search-card, #companiesView .company-card.company-row {animation:none} } /* Home: one responsive frame, a single motion rhythm, no clipped content. */ .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) {width:100%;max-width:1480px;margin-inline:auto;padding-inline:clamp(20px,4vw,60px)} .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) > main {width:100%;max-width:none;margin-inline:0} .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) > :is(.topbar,footer) {margin-inline:0} #portfolioPicker {box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;width:100%;max-width:none;min-height:0;margin:18px auto 22px;padding:0;border:0;border-radius:0;background:none;box-shadow:none} #portfolioPicker[hidden] {display:none!important} #portfolioPicker::before,#portfolioPicker::after {content:none} #portfolioPicker .portfolio-home-topline {display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:0} #portfolioPicker .portfolio-brand {display:flex;align-items:center;gap:10px;color:#203a50} #portfolioPicker .portfolio-brand img {width:32px;height:32px;object-fit:contain;border-radius:9px} #portfolioPicker .portfolio-brand > span {font-size:21px;font-weight:650;letter-spacing:-.6px;line-height:1.1} #portfolioPicker .portfolio-brand small {display:block;margin-top:4px;font-size:7px;letter-spacing:1.3px;font-weight:500;color:#61758a} #portfolioPicker .portfolio-date {font-size:11px;color:#61758a;text-transform:capitalize;text-align:right} #portfolioPicker .portfolio-heading {position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:center;gap:clamp(24px,4vw,60px);min-width:0;margin:0;padding:clamp(24px,3vw,40px);border:1px solid #2e4b68;border-radius:23px;background:linear-gradient(115deg,#14283e,#203e58);color:#fff;text-align:left} #portfolioPicker .portfolio-heading::after {content:"";position:absolute;z-index:-1;inset:auto -180px -340px auto;width:650px;height:650px;border:1px solid #c3ddfa18;border-radius:50%;box-shadow:0 0 0 60px #c3ddfa05,0 0 0 120px #c3ddfa03;pointer-events:none} #portfolioPicker .home-intro-copy {min-width:0} #portfolioPicker .portfolio-eyebrow {display:flex;align-items:center;gap:9px;margin:0 0 20px;font-size:12px;font-weight:500;color:#c4d5e4} #portfolioPicker .portfolio-eyebrow::before {content:"";width:6px;height:6px;border-radius:50%;background:#9dc5ff;box-shadow:0 0 12px #82b4ff44} #portfolioPicker h1 {margin:0 0 20px;font-size:clamp(34px,3.6vw,48px);line-height:1.13;font-weight:600;letter-spacing:-.045em;color:#fff} #portfolioPicker h1 em {font-style:normal;font-weight:450;color:#acd0ff} #portfolioPicker .portfolio-heading p {max-width:48ch;margin:0;font-size:13px;line-height:1.8;color:#c5d5e3} #portfolioPicker .home-visual {position:relative;isolation:isolate;min-width:0;padding:20px;border:1px solid #c9e0ff24;border-radius:16px;background:#ffffff05;box-shadow:0 12px 36px #0000000c} #portfolioPicker .home-visual-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:8px;font-weight:550;letter-spacing:1.4px;color:#b7cce2} #portfolioPicker .home-live-flow {display:grid;grid-template-columns:1fr;margin:12px 0 16px;color:#e0ebfa} #portfolioPicker .home-flow-node {position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-height:38px;font-size:12px;font-weight:550} #portfolioPicker .home-flow-node::before {content:"";position:absolute;z-index:-1;inset:-4px -8px;border-radius:10px;background:linear-gradient(90deg,#b6d7ff1c,transparent);opacity:0;pointer-events:none} #portfolioPicker .home-flow-node::after {content:"";position:absolute;right:4px;width:4px;height:4px;border-radius:50%;background:#bddaff;opacity:.2;pointer-events:none} #portfolioPicker .home-flow-symbol {display:inline-flex;flex:none} #portfolioPicker .home-flow-node svg {box-sizing:content-box;width:18px;height:18px;padding:8px;border:1px solid #b4d0f12b;border-radius:10px;background:#b4d0f108;fill:none;stroke:#acd0ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} #portfolioPicker .home-flow-node small {display:block;margin-top:3px;font-size:10px;line-height:1.5;font-weight:400;color:#b2c7dd} #portfolioPicker .home-flow-track {position:relative;width:1px;height:9px;margin:3px 0 3px 17px;background:#abc9ee35} #portfolioPicker .home-flow-track::after {content:"";position:absolute;left:-1px;top:0;width:3px;height:3px;border-radius:50%;background:#c3dcff;opacity:0} #portfolioPicker .portfolio-home-summary {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0;padding:13px 0 0;border:0;border-top:1px solid #c9e0ff20} #portfolioPicker .portfolio-home-summary > span {display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px 9px;padding:0;border:0;border-radius:0;background:transparent} #portfolioPicker .portfolio-home-summary .home-stat-label {grid-column:1/-1;font-size:7px;letter-spacing:1.2px;color:#adc4dd} #portfolioPicker .portfolio-home-summary strong {font-size:23px;line-height:1.2;font-weight:500;letter-spacing:-.7px;color:#fff;font-variant-numeric:tabular-nums} #portfolioPicker .portfolio-home-summary > span > span:last-child {font-size:10px;line-height:1.4;color:#c0d0e2} #portfolioPicker .portfolio-access {display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);align-items:center;gap:26px;min-width:0;margin:0;padding:0;border:0;background:none;box-shadow:none} #portfolioPicker .portfolio-access::before {content:none} #portfolioPicker .portfolio-access-heading {margin:0;padding:0} #portfolioPicker .portfolio-access-kicker {display:block;margin:0 0 7px;font-size:8px;letter-spacing:1.4px;font-weight:600;color:#5d7288} #portfolioPicker .portfolio-section-title {margin:0;font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.4px;color:#243e55} #portfolioPicker .portfolio-access-heading p {margin:7px 0 0;font-size:12px;line-height:1.6;color:#60758a} #portfolioPicker .portfolio-list {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:0} #portfolioPicker .portfolio-entry {position:relative;box-sizing:border-box;display:grid;grid-template-columns:44px minmax(0,1fr) 30px;grid-template-rows:auto auto;align-items:center;gap:7px 13px;width:100%;min-height:104px;margin:0;padding:17px 20px;border:1px solid #d9e4ee;border-radius:14px;background:#fff;box-shadow:0 3px 16px #24466505;text-align:left;cursor:pointer;transition:transform .22s,border-color .22s,box-shadow .22s} #portfolioPicker .portfolio-entry::before {content:"";position:absolute;inset:18px auto 18px 0;width:2px;border-radius:2px;background:#6b98bd;opacity:0;transition:opacity .22s} #portfolioPicker .portfolio-entry::after {content:none} #portfolioPicker .portfolio-entry:hover {transform:translateY(-2px);border-color:#8aafca;box-shadow:0 8px 20px #2446650b} #portfolioPicker .portfolio-entry:hover::before {opacity:1} #portfolioPicker .portfolio-entry:focus-visible {outline:2px solid #547fa2;outline-offset:4px} #portfolioPicker .portfolio-entry-label {grid-column:1/3;grid-row:1;font-size:8px;letter-spacing:1.15px;font-weight:550;color:#63778a} #portfolioPicker .portfolio-avatar {grid-column:1;grid-row:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid #dfe9f1;border-radius:11px;background:#eff5fa;color:#466f90;font-size:20px;font-weight:500} #portfolioPicker .portfolio-entry-info {grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:3px;min-width:0} #portfolioPicker .portfolio-entry-info strong {font-size:18px;line-height:1.3;letter-spacing:-.3px;font-weight:600;color:#29475f;overflow-wrap:anywhere} #portfolioPicker .portfolio-entry-quantity {font-size:11px;line-height:1.5;font-weight:400;color:#63778a} #portfolioPicker .portfolio-entry-preview {display:none} #portfolioPicker .portfolio-entry-action {grid-column:3;grid-row:1/3;display:flex;align-items:center;margin:0;padding:0;border:0;border-radius:0;background:transparent} #portfolioPicker .portfolio-entry-action > span:first-child {display:none} #portfolioPicker .portfolio-entry-arrow {display:grid;place-items:center;width:30px;height:32px;border:0;background:transparent;border-radius:8px;color:#426b8b;font-size:21px;line-height:1;transition:translate .22s} #portfolioPicker .portfolio-entry:hover .portfolio-entry-arrow {translate:3px 0} #portfolioPicker .portfolio-loading {margin:0;padding:25px 0;font-size:12px;color:#71899f} #portfolioPicker .home-ambient {position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit} #portfolioPicker .home-ambient i {position:absolute;right:0;top:-30%;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,#8bbdff18,transparent 70%)} #portfolioPicker .home-ambient i+i {right:50%;top:65%;width:250px;height:250px;opacity:.6} @keyframes homeEntrance {from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} @keyframes homeStageFocus {0%,36%,100%{opacity:0}7%,26%{opacity:1}} @keyframes homeNodeDot {0%,36%,100%{opacity:.2}7%,26%{opacity:1}} @keyframes homeFlowConnect {0%,5%,100%{opacity:0;transform:translateY(0)}15%{opacity:1}30%{opacity:0;transform:translateY(9px)}} @keyframes homeAmbientDrift {from{transform:translate3d(-10px,0,0)}to{transform:translate3d(14px,12px,0)}} @media(prefers-reduced-motion:no-preference) { #portfolioPicker .portfolio-home-topline {animation:homeEntrance .4s ease-out backwards} #portfolioPicker .portfolio-heading {animation:homeEntrance .5s .06s ease-out backwards} #portfolioPicker .portfolio-access {animation:homeEntrance .5s .14s ease-out backwards} #portfolioPicker .home-ambient i {animation:homeAmbientDrift 18s ease-in-out infinite alternate} #portfolioPicker .home-flow-node::before {animation:homeStageFocus 9s ease-in-out infinite} #portfolioPicker .home-flow-node::after {animation:homeNodeDot 9s ease-in-out infinite} #portfolioPicker .home-flow-node:nth-of-type(2)::before,#portfolioPicker .home-flow-node:nth-of-type(2)::after {animation-delay:3s} #portfolioPicker .home-flow-node:nth-of-type(3)::before,#portfolioPicker .home-flow-node:nth-of-type(3)::after {animation-delay:6s} #portfolioPicker .home-flow-track::after {animation:homeFlowConnect 9s ease-in-out infinite;animation-delay:1.5s} #portfolioPicker .home-flow-track:nth-of-type(2)::after {animation-delay:4.5s} } #portfolioPicker[data-motion="paused"] .home-ambient i, #portfolioPicker[data-motion="paused"] .home-live-flow *::before, #portfolioPicker[data-motion="paused"] .home-live-flow *::after {animation-play-state:paused!important} html[data-theme="dark"] #portfolioPicker .home-visual {background:#ffffff03;border-color:#ffffff20!important;box-shadow:none} @media(min-width:1000px) { .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) > .topbar {height:56px;min-height:56px} .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) > footer {min-height:32px;padding:8px 0} #portfolioPicker {margin:12px auto;gap:16px;max-width:none} #portfolioPicker .portfolio-heading {min-height:clamp(260px,calc(100svh - 300px),460px);padding:26px 34px} } @media(min-width:1000px) and (max-height:640px) { .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) > .topbar {height:48px;min-height:48px} .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) > footer {min-height:28px;padding:6px 0} #portfolioPicker {margin:10px auto;gap:12px} #portfolioPicker .portfolio-heading {min-height:240px;padding:18px 28px;gap:24px} #portfolioPicker h1 {font-size:36px;margin-bottom:16px} #portfolioPicker .portfolio-eyebrow {margin-bottom:15px} #portfolioPicker .home-visual {padding:10px 14px} #portfolioPicker .home-flow-node {min-height:28px;font-size:11px;line-height:1.35} #portfolioPicker .home-flow-node small {margin-top:1px;font-size:9px;line-height:1.3} #portfolioPicker .home-flow-node svg {width:14px;height:14px;padding:6px} #portfolioPicker .home-flow-track {height:5px;margin:1px 0 1px 13px} #portfolioPicker .home-live-flow {margin:6px 0} #portfolioPicker .portfolio-home-summary {padding-top:8px} #portfolioPicker .portfolio-home-summary strong {font-size:20px} #portfolioPicker .portfolio-entry {min-height:94px;padding:13px 17px} } @media(max-width:999px) { #portfolioPicker .portfolio-heading {grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:22px;padding:25px} #portfolioPicker h1 {font-size:36px} #portfolioPicker .home-visual {padding:15px} } @media(max-width:760px) { #portfolioPicker {gap:20px;margin:18px auto 24px} #portfolioPicker .portfolio-heading {grid-template-columns:minmax(0,1fr);gap:24px;padding:24px;border-radius:19px} #portfolioPicker h1 {font-size:clamp(32px,7.5vw,42px)} #portfolioPicker .portfolio-heading p {font-size:12px} #portfolioPicker .home-desktop-break {display:none} #portfolioPicker .portfolio-access {grid-template-columns:minmax(0,1fr);gap:14px} #portfolioPicker .portfolio-date {max-width:135px;font-size:10px;line-height:1.5} #portfolioPicker .portfolio-brand > span {font-size:20px} #portfolioPicker .portfolio-entry {min-height:100px;padding:16px 18px} } @media(prefers-reduced-motion:reduce) { #portfolioPicker .portfolio-entry:hover,#portfolioPicker .portfolio-entry:active {transform:none} #portfolioPicker .portfolio-entry:hover .portfolio-entry-arrow {translate:none} } /* assets/css/base-maintenance.css */ #companyPanel .base-cleanup {flex-basis:100%;width:100%;margin-top:14px;padding-top:13px;border-top:1px solid #e1e8f0;min-width:0;} #companyPanel .base-cleanup > summary {cursor:pointer;color:#61778e;font-size:11px;line-height:1.6;} #companyPanel .base-cleanup p {font-size:11px;line-height:1.65;margin:10px 0;color:#75879a;} #companyPanel .base-cleanup-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0;} #companyPanel .base-cleanup-fields label {display:flex;flex-direction:column;gap:6px;font-size:11px;color:#61778e;min-width:0;} #companyPanel .base-cleanup-fields select {width:100%;min-height:38px;padding:8px 10px;border:1px solid #cbd8e6;border-radius:8px;background:#fff;color:#385773;font-size:12px;} #companyPanel .base-cleanup button {width:auto;min-height:36px;padding:8px 11px;font-size:11px;border-radius:8px;cursor:pointer;} #companyPanel .base-cleanup button:disabled {opacity:.5;cursor:default;} #companyPanel .base-cleanup-confirmation {margin-top:12px;padding:12px;border:1px solid #e8d5d1;border-radius:9px;background:#fffaf9;} #companyPanel #baseCleanupSummary {margin-top:0;color:#67504a;} #companyPanel #confirmBaseCleanup {border:1px solid #9e5750!important;background:#9e5750!important;color:#fff!important;margin-right:7px;} #companyPanel .base-cleanup :focus-visible {outline:2px solid #6485a6;outline-offset:3px;} @media(max-width:560px) {#companyPanel .base-cleanup-fields {grid-template-columns:1fr;} #companyPanel .base-cleanup button {min-height:44px;}} /* Aprendizado e classificação compartilham a linha em telas maiores. */ #companyPanel .tool-pane[data-pane="base"] .stack-forms { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; } #companyPanel .tool-pane[data-pane="base"] .stack-forms > .modern-form { grid-column:auto; min-width:0; min-height:0; padding:18px!important; gap:10px; } #companyPanel .tool-pane[data-pane="base"] .stack-forms > .base-management, #companyPanel .tool-pane[data-pane="base"] .base-period-card {grid-column:1/-1;min-width:0;} #companyPanel .tool-pane[data-pane="base"] .form-card-header {padding-bottom:12px;margin-bottom:2px;gap:10px;} #companyPanel .tool-pane[data-pane="base"] .form-card-header strong {font-size:15px;} #companyPanel .tool-pane[data-pane="base"] .form-card-header small {font-size:12px;line-height:1.5;} #companyPanel .tool-pane[data-pane="base"] .file-drop-shell {min-width:0;padding:12px;gap:8px;} #companyPanel .tool-pane[data-pane="base"] .file-drop-title {font-size:12px;} #companyPanel .tool-pane[data-pane="base"] .file-drop-hint {font-size:11px;line-height:1.5;} #companyPanel .tool-pane[data-pane="base"] input[type="file"] {width:100%;min-width:0;max-width:100%;font-size:12px;} #companyPanel .tool-pane[data-pane="base"] .file-selection {max-height:160px;} #companyPanel .tool-pane[data-pane="base"] .modern-form > .helper:empty {display:none;} #companyPanel .tool-pane[data-pane="base"] button[type="submit"] {min-height:42px;padding:10px 12px;font-size:12px;} @media(max-width:850px) { #companyPanel .tool-pane[data-pane="base"] .stack-forms {grid-template-columns:minmax(0,1fr);} } /* Meses salvos: somente consulta, junto aos indicadores da base. */ #companyPanel .base-saved-periods {clear:both;margin-top:14px;padding-top:12px;border-top:1px solid #d7e2ed;min-width:0;} #companyPanel .saved-periods-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;} #companyPanel .saved-periods-heading>strong {font-size:12px;color:#46627c;font-weight:600;} #companyPanel .saved-periods-heading button {width:auto;min-height:34px;padding:7px 11px!important;font-size:11px;} #companyPanel .base-saved-periods #savedPeriodsMessage {font-size:11px;line-height:1.6;color:#758b9f;margin:8px 0 0!important;} #companyPanel #savedPeriodsList {display:grid;gap:9px;margin-top:12px;} #companyPanel #savedPeriodsList[hidden] {display:none;} #companyPanel .saved-period-bank {display:grid;grid-template-columns:minmax(130px,190px) minmax(0,1fr);align-items:start;gap:10px;padding:9px 11px;border:1px solid #dce6ef;border-radius:9px;background:#ffffffa6;min-width:0;} #companyPanel .saved-period-bank>strong {font-size:11px;line-height:1.6;color:#4c6882;font-weight:550;padding-top:3px;overflow-wrap:anywhere;} #companyPanel .saved-period-months {display:flex;flex-wrap:wrap;gap:5px;min-width:0;} #companyPanel .saved-period-months>span {display:block;padding:4px 7px;border:1px solid #dce6f0;border-radius:5px;background:#f4f8fc;color:#526e87;font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums;} @media(max-width:600px){#companyPanel .saved-period-bank {grid-template-columns:minmax(0,1fr);gap:7px;}#companyPanel .saved-periods-heading button {min-height:44px;}} /* assets/css/admin-auth.css */ #adminAuthDialog {box-sizing:border-box;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid #dce5ef;border-radius:17px;background:#fff;color:#2e465e;box-shadow:0 20px 70px #142c4a26;} #adminAuthDialog::backdrop {background:#14243b55;backdrop-filter:blur(3px);} #adminAuthDialog #adminAuthForm {display:block;margin:0;} #adminAuthDialog .admin-auth-heading {display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;} #adminAuthDialog .admin-auth-badge {display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#edf3f9;color:#6483a0;} #adminAuthDialog svg {width:19px;height:19px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;} #adminAuthDialog #adminAuthClose {display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:#8292a2;font-size:22px;cursor:pointer;} #adminAuthDialog h2 {margin:0 0 7px;font-size:18px;letter-spacing:-.4px;font-weight:600;} #adminAuthDialog p {margin:0 0 20px;font-size:12px;line-height:1.7;color:#7b8c9d;} #adminAuthDialog label {display:block;margin-bottom:7px;font-size:11px;font-weight:500;color:#61778e;} #adminAuthDialog input {box-sizing:border-box;width:100%;height:42px;padding:10px 12px;border:1px solid #bfcfdf;border-radius:8px;background:#fafcfe;color:#2d465e;font-size:14px;} #adminAuthDialog #adminAuthError {margin:9px 0 0;color:#a4554c;font-size:11px;} #adminAuthDialog .admin-auth-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:22px;} #adminAuthDialog .admin-auth-actions button {min-height:38px;padding:8px 14px;border:1px solid #dce5ef;border-radius:8px;background:#fff;color:#65809a;font-size:12px;cursor:pointer;} #adminAuthDialog #adminAuthConfirm {background:#315979;border-color:#315979;color:#fff;} #adminAuthDialog :focus-visible {outline:2px solid #7095b5;outline-offset:3px;} @media(max-width:560px){#adminAuthDialog .admin-auth-actions button {min-height:44px;}} /* assets/css/tool-preparation.css */ /* Compacta apenas a preparação. Prévia, tabelas, totais e diálogos de resultados não recebem regras deste arquivo. */ #companyPanel .panel-head {padding:14px 18px!important;margin-bottom:10px;gap:14px;} #companyPanel .panel-head h2 {font-size:20px;line-height:1.3;margin:4px 0;} #companyPanel .panel-head p {margin:0;} #companyPanel .panel-quick-info {margin-top:6px;gap:5px;} #companyPanel .back-button {margin-bottom:9px;} #companyPanel .tool-tabs {margin:10px 0 14px;padding:4px;gap:7px;} #companyPanel .tool-tab {min-height:42px;padding:10px 13px;} #companyPanel .tool-card {row-gap:14px;} #companyPanel .tool-card > .tool-intro:first-child {padding:14px 18px!important;min-height:0;} #companyPanel .tool-intro .tool-visual-icon {width:36px!important;height:36px!important;margin:0 12px 5px 0!important;border-radius:10px!important;} #companyPanel .tool-intro h3 {font-size:18px;margin:2px 0 5px;line-height:1.3;} #companyPanel .tool-intro > p {font-size:12px;line-height:1.65;margin:4px 0!important;} #companyPanel .tool-intro .tool-feature-list {gap:6px 18px;margin-top:8px;font-size:11px;} #companyPanel .tool-intro .tool-flow {margin-top:10px;padding-top:9px;} #companyPanel .tool-intro #baseStats {margin-top:10px;} #companyPanel form.preparation-form {padding:16px 18px!important;gap:10px;min-width:0;} #companyPanel .preparation-form > .form-card-header {padding-bottom:10px;margin-bottom:2px;gap:10px;} #companyPanel .preparation-form > .form-card-header strong {font-size:15px;line-height:1.4;} #companyPanel .preparation-form > .form-card-header small {font-size:12px;line-height:1.5;margin-top:3px;} #companyPanel .preparation-form .file-drop-shell {padding:10px;gap:5px;min-width:0;} #companyPanel .preparation-form input[type="file"] {width:100%;min-width:0;max-width:100%;} #companyPanel .preparation-form > .helper:empty {display:none;} #companyPanel .preparation-form .bank-selector {padding:10px;gap:9px;} #companyPanel .preparation-form .bank-selector-options {gap:7px;} #companyPanel .preparation-form .bank-choice {padding:7px 10px;min-height:44px;} #companyPanel .preparation-form .bank-select-all {min-height:36px;padding:7px 10px;} #companyPanel .preparation-form .standard-period-card {margin:5px 0;padding:10px 12px;min-width:0;} #companyPanel .preparation-form .standard-period-card .period-fields {gap:12px;} #companyPanel .preparation-form .standard-period-card .period-fields > div {gap:4px;} #companyPanel .preparation-form .standard-period-card p {margin-top:7px;font-size:11px;line-height:1.5;} #companyPanel .preparation-form .period-fields input[type="date"] {min-height:40px;padding:9px 11px!important;} #companyPanel .preparation-form > button[type="submit"] {min-height:42px;padding:10px 14px;} #companyPanel .preparation-form #advancedFields {gap:12px;} #companyPanel .preparation-form .reconcile-bank-file {padding:10px;gap:6px;} @media(max-width:760px) { #companyPanel .panel-head {padding:13px 15px!important;gap:10px;} #companyPanel .panel-head h2 {font-size:18px;overflow-wrap:anywhere;} #companyPanel .tool-tabs {gap:6px;} #companyPanel .tool-tab {min-height:44px;padding:10px 11px;} #companyPanel .tool-card > .tool-intro:first-child {padding:13px 15px!important;} #companyPanel form.preparation-form {padding:15px!important;} #companyPanel .preparation-form > button[type="submit"] {min-height:44px;} #companyPanel .preparation-form .bank-select-all {min-height:44px;} #companyPanel .preparation-form .standard-period-card .period-fields {gap:8px;} #companyPanel .preparation-form .period-fields input[type="date"] {min-height:44px;padding:9px 7px!important;} } /* Auditoria da leitura, separada da tabela de conferência diária. */ .statement-reading {margin-top:16px;padding:14px 16px;border:1px solid #dbe5ef;border-radius:12px;background:#fff;min-width:0;} .statement-reading>summary {font-size:12px;font-weight:600;color:#456780;cursor:pointer;line-height:1.6;} .statement-reading>p {font-size:11px!important;color:#7a8da1;line-height:1.7;margin:12px 0;} .statement-reading-controls {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0;} .statement-reading-controls input {flex:1;min-width:180px;min-height:40px;padding:9px 12px;border:1px solid #cfdde9;border-radius:8px;font-size:12px;background:#fafcfe;} .statement-reading-count {font-size:11px;color:#75899d;} .statement-reading-scroll {max-height:420px;overflow:auto;border:1px solid #e1e8f0;border-radius:8px;} .statement-reading-table {width:100%;min-width:720px;border-collapse:collapse;font-size:12px;} .statement-reading-table th,.statement-reading-table td {padding:10px 12px;border-bottom:1px solid #e8edf3;text-align:left;line-height:1.6;} .statement-reading-table th {position:sticky;top:0;background:#f0f5fa;color:#4a637b;font-size:11px;z-index:1;} .statement-reading-table td.numeric {text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;} .statement-reading>summary:focus-visible,.statement-reading-controls input:focus-visible {outline:2px solid #5d83a5;outline-offset:3px;} @media(max-width:600px){.statement-reading {padding:12px;}.statement-reading-controls input {min-height:44px;}} /* assets/css/company-directory.css */ /* Portfolio directory: one compact toolbar and a consistent company identity. */ #companiesView {--directory-accent:#426baf;--directory-soft:#edf3fc;--directory-line:#dce5f0;--directory-muted:#667991} #companiesView .hero.directory-hero {max-width:none;padding:10px 0 16px;margin:0;border:0;background:none} #companiesView .portfolio-toolbar {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 8px;padding:0;border:0} #companiesView .portfolio-back {display:inline-flex;align-items:center;min-height:28px;padding:5px 0;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer;transition:color .18s,translate .18s} #companiesView .portfolio-back:hover {color:var(--directory-accent);translate:-3px 0} #companiesView .portfolio-owner {display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--border);border-radius:20px;color:var(--muted);font-size:10px} #companiesView .portfolio-owner::before {content:"";width:5px;height:5px;border-radius:50%;background:var(--directory-accent)} #companiesView .directory-intro {display:flex;align-items:center;justify-content:space-between;gap:32px} #companiesView .directory-title {min-width:0} #companiesView .directory-title .eyebrow {margin:0 0 7px;color:var(--directory-accent);font-size:9px;letter-spacing:1.7px;font-weight:650} #companiesView .directory-title h1 {margin:0 0 7px;font-size:clamp(24px,2.4vw,32px);font-weight:650;letter-spacing:-1px;line-height:1.2;color:var(--text)} #companiesView .directory-title p {margin:0;font-size:12px;line-height:1.6;color:var(--muted)} #companiesView .overview {display:flex;flex:none;gap:0;margin:0;padding:0;border:0;background:none} #companiesView .overview-card {display:block;flex:none;min-height:0;padding:0 24px!important;border:0;border-left:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none} #companiesView .overview-card:first-child {padding-left:0!important;border:0} #companiesView .overview-card:last-child {padding-right:0!important} #companiesView .overview-card > div {display:flex;flex-direction:column;align-items:flex-start;gap:5px} #companiesView .overview-card strong {color:var(--text);font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-.8px;font-variant-numeric:tabular-nums} #companiesView .overview-card div>span {font-size:10px;line-height:1.5;color:var(--muted);white-space:nowrap} #companiesView .workspace {padding:0 0 32px;border:0} #companiesView .search-card {margin:0 0 14px;padding:12px 18px 0;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 3px 18px #203c5703} #companiesView .directory-controls {display:grid;grid-template-columns:minmax(220px,1fr) 180px 190px auto;align-items:center;gap:10px;padding:0;border:0;background:transparent!important;box-shadow:none} #companiesView .directory-controls :is(input,select) {min-width:0;width:100%;min-height:42px;font-size:12px;font-weight:450;line-height:1.4} #companiesView .directory-controls select {padding:10px 30px 10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);cursor:pointer} #companiesView .directory-controls .search-wrap {display:flex;align-items:center;gap:10px;min-width:0;height:44px;padding:0 8px 0 13px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--muted);transition:border-color .2s,box-shadow .2s} #companiesView .directory-controls .search-wrap:focus-within {border-color:#779bd2;box-shadow:0 0 0 3px #426baf12} #companiesView .directory-search-icon {display:grid;place-items:center;flex:none;width:18px;height:18px} #companiesView .directory-search-icon svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round} #companiesView .directory-controls .search-wrap input {flex:1;min-width:0;width:0;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:none!important} #companiesView #companySearchClear {display:grid;place-items:center;flex:none;width:28px;height:28px;min-height:28px;padding:0;border:0;border-radius:7px;background:transparent!important;color:var(--muted)!important;font-size:21px;line-height:1;cursor:pointer} #companiesView #companySearchClear:hover {background:var(--accent-soft)!important} #companiesView #addCompany {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:10px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:11px;white-space:nowrap;cursor:pointer;transition:border-color .2s,background .2s} #companiesView #addCompany > span {font-size:17px;line-height:1;color:var(--directory-accent)} #companiesView #addCompany:hover {border-color:#9bb4d6;background:var(--directory-soft)} #companiesView .directory-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;border-top:1px solid var(--border);padding:10px 0} #companiesView .company-filters {display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:0} #companiesView .company-filter {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:11px;line-height:1.4;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s,border-color .18s} #companiesView .company-filter:hover {background:var(--bg);color:var(--text)} #companiesView .company-filter.active {background:var(--directory-soft);color:#365f9e;border-color:#d3e0f4;font-weight:600} #companiesView .filter-count {display:inline-grid;place-items:center;min-width:21px;height:19px;padding:0 4px;border-radius:5px;background:#647c9410;color:inherit;font-size:9px;font-weight:600;font-variant-numeric:tabular-nums} #companiesView .directory-views {display:flex;align-items:center;flex:none;gap:2px;margin:0;padding:3px;border:1px solid var(--border);border-radius:9px;background:var(--bg)} #companiesView .directory-views button {display:flex;align-items:center;justify-content:center;gap:6px;min-height:28px;padding:5px 9px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;transition:background .18s,color .18s} #companiesView .directory-views button[aria-pressed=true] {background:var(--surface);border-color:var(--border);color:var(--text);box-shadow:0 1px 4px #203c5707} #companiesView .directory-views svg {width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round} #companiesView .directory-results-heading {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:0 0 10px} #companiesView .directory-results-heading h2 {margin:0;color:var(--text);font-size:13px;font-weight:600;letter-spacing:-.2px} #companiesView .search-meta {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0;padding:0;border:0} #companiesView #companyCount {color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums} #companiesView .directory-reset {min-height:30px;padding:5px 8px;border:0;border-radius:7px;background:var(--directory-soft);color:var(--directory-accent);font-size:10px;cursor:pointer} #companiesView #companyGrid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:14px;min-width:0;padding:0;border:0;border-radius:0;background:transparent!important;overflow:visible} #companiesView #companyGrid .company-card.company-row {position:relative;display:flex;flex-direction:column;align-items:stretch;gap:16px;min-width:0;min-height:184px;height:auto;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 2px 8px #203c5703;text-align:left;cursor:pointer;animation:none;transition:translate .22s ease,border-color .22s,box-shadow .22s,background .22s;transform:none;isolation:isolate} #companiesView .company-row::before {content:"";position:absolute;inset:-1px 16px auto;height:1px;background:linear-gradient(90deg,transparent,#7ea4dc,transparent);opacity:0;transition:opacity .22s;pointer-events:none} #companiesView .company-row-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0} #companiesView .company-row-code {display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:39px;width:auto;height:28px;padding:0 9px;border:1px solid #d9e5f5;border-radius:7px;background:#eef4fc;color:#466da8;font-size:11px;font-weight:650;letter-spacing:.2px;font-variant-numeric:tabular-nums} #companiesView .company-row-main {display:block;flex:1;min-width:0} #companiesView .company-row-name {display:block;margin:0;color:var(--text);font-size:12px;font-weight:600;line-height:1.6;letter-spacing:.05px;white-space:normal;text-overflow:clip;overflow:visible;overflow-wrap:anywhere} #companiesView .company-row-meta {display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px;color:var(--muted)} #companiesView .company-row-regime {font-size:9px;font-weight:500;line-height:1.5;letter-spacing:.45px;color:var(--muted)} #companiesView .mini-status {display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:transparent;font-size:9px;font-weight:450;line-height:1.5;color:var(--muted)} #companiesView .mini-status::before {content:"";flex:none;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7} #companiesView .company-row[data-has-tools=true] .mini-status {color:#5c799e} #companiesView .company-row-footer {display:flex;align-items:center;justify-content:space-between;gap:6px;padding-top:11px;border-top:1px solid var(--border)} #companiesView .company-row-details {display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;color:var(--muted);font-size:10px;font-weight:450;line-height:1.6} #companiesView .company-row-details > span+span {display:inline-flex;align-items:center;gap:8px} #companiesView .company-row-details > span+span::before {content:"";width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.45} #companiesView .company-row[data-has-tools=false] .company-tool-count {color:var(--muted)} #companiesView .company-row-action {display:flex;align-items:center;flex:none;gap:7px;color:var(--directory-accent)} #companiesView .company-row-action > span {display:none;font-size:10px;white-space:nowrap} #companiesView .company-row-action b {display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:7px;background:var(--bg);color:var(--directory-accent);font-size:16px;font-weight:400;transition:translate .22s,background .22s} #companiesView #companyGrid .company-row:hover {border-color:#a4bbdb;box-shadow:0 9px 23px #203c570b;translate:0 -3px;background:var(--surface)} #companiesView .company-row:hover::before {opacity:1} #companiesView .company-row:hover .company-row-action b {translate:2px -2px;background:var(--directory-soft)} #companiesView #companyGrid .company-row:active {translate:0 0} #companiesView #companyGrid .company-row:focus-visible {outline:2px solid #6e97cf;outline-offset:3px;z-index:1} #companiesView #companyGrid[data-view=list] {grid-template-columns:minmax(0,1fr);gap:8px} #companiesView #companyGrid[data-view=list] .company-row {display:grid;grid-template-columns:145px minmax(0,1fr) 230px;align-items:center;gap:20px;min-height:86px;padding:15px 18px} #companiesView #companyGrid[data-view=list] .company-row-heading {align-items:flex-start;flex-direction:column;gap:5px} #companiesView #companyGrid[data-view=list] .company-row-footer {height:100%;border:0;border-left:1px solid var(--border);padding:0 0 0 18px} #companiesView #companyGrid[data-view=list] .company-row-details {flex-direction:column;align-items:flex-start;gap:2px} #companiesView #companyGrid[data-view=list] .company-row-details > span+span::before {display:none} #companiesView #companyGrid[data-view=list] .company-row-action > span {display:block} #companiesView .directory-empty {grid-column:1/-1;display:grid;justify-items:center;gap:12px;padding:48px 20px;border:1px dashed var(--border);border-radius:14px;text-align:center;background:var(--surface)} #companiesView .directory-empty strong {color:var(--text);font-size:16px;font-weight:600} #companiesView .directory-empty p {max-width:450px;margin:0;color:var(--muted);font-size:13px;line-height:1.7} #companiesView .directory-empty button {min-height:40px;padding:9px 14px;border:1px solid var(--border);border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:12px;cursor:pointer} html[data-theme=dark] #companiesView {--directory-accent:#9ebff2;--directory-soft:#1b293e;--directory-line:#313642} html[data-theme=dark] #companiesView .directory-hero .overview-card {background:transparent!important;box-shadow:none} html[data-theme=dark] #companiesView .workspace .directory-controls {background:transparent!important} html[data-theme=dark] #companiesView .workspace .portfolio-back {background:transparent!important} html[data-theme=dark] #companiesView .workspace .company-filter {border-color:transparent!important;background:transparent!important} html[data-theme=dark] #companiesView .workspace .company-filter.active {border-color:#415778!important;background:#1b293e!important;color:#c0d6f9!important} html[data-theme=dark] #companiesView .workspace .filter-count {background:#ffffff09} html[data-theme=dark] #companiesView #companyGrid .company-row {border-color:#303239!important;background:#151619!important;box-shadow:0 2px 8px #00000008!important} html[data-theme=dark] #companiesView #companyGrid .company-row:hover {border-color:#596c87!important;background:#1a1e25!important;box-shadow:0 9px 23px #0000001c!important} html[data-theme=dark] #companiesView #companyGrid .company-row-code {background:#1c2839!important;border-color:#2d405b!important;color:#acc9f0!important} html[data-theme=dark] #companiesView #companyGrid .company-row-footer {border-color:#2a2e36!important} html[data-theme=dark] #companiesView #companyGrid .mini-status {background:transparent!important;color:#9eafc5!important} html[data-theme=dark] #companiesView #companyGrid .company-row-action b {background:#202631!important;color:#acc9f0!important} @keyframes directoryArrival {from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}} @media(prefers-reduced-motion:no-preference) { #companiesView.active .directory-hero:not([hidden]) {animation:directoryArrival .38s ease-out both} #companiesView.active .workspace:not([hidden]) .search-card {animation:directoryArrival .4s .05s ease-out both} #companiesView #companyGrid:not([data-searching=true]) .company-row[data-reveal=true] {animation:directoryArrival .36s calc(var(--row-index,0)*28ms) cubic-bezier(.2,.7,.2,1) backwards} } @media(min-width:1700px) {#companiesView #companyGrid[data-view=cards] {grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:1150px) { #companiesView .overview-card {padding:0 17px!important} #companiesView .directory-controls {grid-template-columns:minmax(180px,1fr) 155px 165px auto} #companiesView #companyGrid {grid-template-columns:repeat(2,minmax(0,1fr))} } @media(min-width:761px) and (max-width:860px) { #companiesView .directory-controls {grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto} #companiesView #addCompany {grid-column:3;grid-row:2} #companiesView #regimeFilter {grid-column:1;grid-row:2} #companiesView #companySort {grid-column:2;grid-row:2} #companiesView .directory-controls .search-wrap {grid-column:1/-1} } @media(max-width:760px) { #companiesView .hero.directory-hero {padding:12px 0 18px} #companiesView .portfolio-toolbar {margin-bottom:16px} #companiesView .directory-intro {align-items:flex-start;flex-direction:column;gap:18px} #companiesView .directory-title h1 {font-size:26px} #companiesView .overview {width:100%;justify-content:flex-start} #companiesView .overview-card {flex:1;padding:0 14px!important} #companiesView .overview-card strong {font-size:22px} #companiesView .overview-card div>span {font-size:10px} #companiesView .search-card {padding:13px 13px 0;border-radius:13px;margin-bottom:18px} #companiesView .directory-controls {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} #companiesView .directory-controls .search-wrap {grid-column:1/-1} #companiesView #regimeFilter {grid-column:1;grid-row:2} #companiesView #companySort {grid-column:2;grid-row:2} #companiesView #addCompany {grid-column:1/-1;grid-row:3;min-height:36px;padding:7px 12px} #companiesView .directory-controls :is(input,select) {font-size:16px;min-height:42px} #companiesView .directory-toolbar {align-items:flex-start;flex-wrap:wrap;gap:10px;margin-top:12px;padding:10px 0} #companiesView .company-filters {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:5px} #companiesView .company-filter {justify-content:space-between;font-size:11px;min-height:38px;padding:8px 9px} #companiesView .directory-views {margin-left:auto} #companiesView .directory-results-heading h2 {font-size:12px} #companiesView .search-meta {gap:4px} #companiesView #companyGrid {grid-template-columns:minmax(0,1fr);gap:11px} #companiesView #companyGrid .company-card.company-row {min-height:170px;padding:16px;gap:13px} #companiesView .company-row-name {font-size:13px} #companiesView .company-row-action > span {display:block} #companiesView #companyGrid[data-view=list] .company-row {grid-template-columns:62px minmax(0,1fr);min-height:120px;gap:10px 12px;padding:14px} #companiesView #companyGrid[data-view=list] .company-row-heading {grid-column:1;grid-row:1/3;align-self:start} #companiesView #companyGrid[data-view=list] .mini-status {font-size:8px} #companiesView #companyGrid[data-view=list] .company-row-footer {grid-column:2;height:auto;border:0;border-top:1px solid var(--border);padding:8px 0 0} #companiesView #companyGrid[data-view=list] .company-row-details {flex-direction:row;flex-wrap:wrap;gap:4px 8px;font-size:9px} #companiesView #companyGrid[data-view=list] .company-row-action > span {display:none} } @media(hover:none) {#companiesView #companyGrid .company-row:hover {translate:0 0;box-shadow:none}} @media(prefers-reduced-motion:reduce) { #companiesView .directory-hero,#companiesView .search-card,#companiesView #companyGrid .company-row {animation:none!important;transition:none!important} #companiesView .company-row-action b,#companiesView .company-row::before,#companiesView .portfolio-back {transition:none} #companiesView #companyGrid .company-row:hover,#companiesView .company-row:hover .company-row-action b,#companiesView .portfolio-back:hover {translate:none} } /* assets/css/themes.css */ /* Theme controls are shared by every page. No filters: original assets retain their colors. */ .topbar-actions {display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0} .theme-toggle {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 11px;border:1px solid #dbe4ee;border-radius:11px;background:#ffffffa6;color:#526c84;cursor:pointer;font-size:11px;font-weight:550} .theme-toggle:hover {background:#eaf1f8;border-color:#b7cadc} .theme-toggle:focus-visible {outline:2px solid #5286bf;outline-offset:3px} /* Reveal a single theme snapshot rather than transitioning every table cell. */ html[data-theme-transition="active"]::view-transition-old(root), html[data-theme-transition="active"]::view-transition-new(root) {animation:none;mix-blend-mode:normal} html[data-theme-transition="active"]::view-transition-old(root) {z-index:1} html[data-theme-transition="active"]::view-transition-new(root) {z-index:2} html[data-theme-transition="active"]::view-transition-group(root) {animation-duration:460ms} @media(prefers-reduced-motion:no-preference) { .theme-toggle svg {animation:themeIconAppear .32s ease-out} @keyframes themeIconAppear {from{opacity:.3;transform:rotate(-35deg) scale(.7)}to{opacity:1;transform:none}} } .theme-toggle svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .theme-sun {display:none} html[data-theme="dark"] .theme-moon {display:none} html[data-theme="dark"] .theme-sun {display:block} @media(max-width:760px) {.topbar-actions{gap:6px}.theme-toggle{min-width:38px;padding:8px}#themeToggleLabel{display:none}.topbar .status-pill{max-width:145px;text-align:center;line-height:1.4}} /* A restrained refinement of the portfolio action, in both themes. */ #portfolioPicker .portfolio-entry-action {padding:0;border:0;border-radius:0;background:transparent} #portfolioPicker .portfolio-entry-arrow {background:#dfeaf4} #portfolioPicker .portfolio-entry:hover .portfolio-entry-action {background:transparent} html[data-theme="dark"] { color-scheme:dark;--bg:#080808;--surface:#141414;--surface-2:#141414;--surface-soft:#101010; --border:#333333;--line:#333333;--text:#ededed;--ink:#ededed;--muted:#ababab;--ink-muted:#ababab; --accent:#8cbcf3;--accent-soft:#17243a;--action:#2864d7;--tool-accent:#8cbcf3;--panel-shadow:0 6px 24px #00000018; --dark-text:#ededed;--dark-muted:#ababab;--dark-accent:#8ab8ff;--dark-success:#87d8b9;--dark-error:#f3a6ad;--dark-warning:#e5c391; background:var(--bg);scrollbar-color:#505050 var(--bg); } html[data-theme="dark"] body {background:var(--bg);color:var(--text)} html[data-theme="dark"] ::selection {background:#386292;color:#fff} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) {color:var(--text)} /* Raise only color specificity, preserving all component dimensions and layouts. */ html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(h1,h2,h3,h4,h5,h6,strong,label,legend,summary,.company-row-name,.form-card-header,.fiscal-detail-title,.fiscal-ai-source-title) {color:var(--dark-text)!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(p,small,.helper,.eyebrow,.company-row-meta,.company-row-action,.portfolio-date,.portfolio-eyebrow,.portfolio-access-kicker,.portfolio-entry-label,.portfolio-entry-quantity,.file-drop-hint,.preview-note,.preview-subtitle,.form-card-header small,.topbar-title,.directory-heading p,.tool-feature-list,.period-help,.base-cleanup,.fiscal-ai-card-description,.fiscal-ai-inline-status,.fiscal-ai-executive-kicker,.fiscal-ai-executive-coverage,.fiscal-ai-source,.fiscal-summary-top,.fiscal-workflow-button,.fiscal-account-resolution-heading,.bank-investments-note) {color:var(--dark-muted)!important} html[data-theme="dark"] :is(main,dialog) :where(*) {border-color:var(--border)!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(.search-card,.directory-controls,.overview-card,.panel-head,.tool-card,.modern-form,.preview-sheet,.preview-results,.preview-table-scroll,.daily-table-scroll,.daily-review,.daily-table,.report-result,.result-card,.summary-card,.company-card,.portfolio-entry,.company-dialog,.preview-dialog,.admin-auth-dialog,.bank-investments,.fiscal-setup,.fiscal-results-card,.fiscal-summary,.fiscal-detail,.fiscal-investigation,.fiscal-ai,.fiscal-ai-account,.fiscal-account-dialog,.fiscal-account-dialog-body,.fiscal-ai-source,.fiscal-ai-evidence,.fiscal-account-resolution,.fiscal-document-panel,.fiscal-evidence-card) {background:var(--surface)!important;color:var(--text)!important;box-shadow:0 4px 20px #00000012} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(.tool-intro,.period-card,.bank-selector,.bank-choice,.file-drop-shell,.preview-sheet-head,.preview-commandbar,.preview-table-tools,.daily-toolbar,.daily-summary,.preview-summary-item,.mini-metrics > span,.summary-metric,.form-card-icon,.tool-visual-icon,.overview-icon,.company-row-code,.company-row-action b,.portfolio-avatar,.portfolio-feature-icon,.portfolio-entry-action,.portfolio-entry-arrow,.file-selection,.file-selection-item,.tool-flow,.upload-progress,.upload-visual-status,.base-cleanup-confirmation,.base-periods,.base-period-bank,.base-period-item,.fiscal-next-step,.fiscal-summary-pending,.fiscal-review-toolbar,.fiscal-detail-metric-difference,.fiscal-ai-icon,.fiscal-ai-source-panel,.fiscal-ai-account-nav,.fiscal-ai-executive,.fiscal-ai-evidence,.fiscal-ai-account-resolution,.fiscal-ai-source.is-ready,.fiscal-ai-heading-tools .fiscal-ai-provider,.fiscal-ai-local-note,.fiscal-ai-method,.fiscal-ai-context,.fiscal-ai-document-summary) {background:var(--surface-2)!important;color:var(--dark-accent)!important;box-shadow:none!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {background:#0d0d0d!important;color:var(--text)!important;border-color:#424242!important;caret-color:#8ab8ff;box-shadow:none} html[data-theme="dark"] :is(input,textarea)::placeholder {color:#969696!important;opacity:1} html[data-theme="dark"] input::file-selector-button {background:#252525;color:#e2e2e2;border:1px solid #505050;border-radius:7px;padding:7px 11px;margin-right:10px} html[data-theme="dark"] :is(input[type=checkbox],input[type=radio]) {accent-color:#8cbcf3} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(input,select,textarea,button,a,summary):focus-visible {outline:2px solid #91c6ff!important;outline-offset:3px;box-shadow:none!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(button,.secondary-action,.preview-expand) {background:var(--surface-2)!important;color:#dddddd!important;border-color:#3d3d3d!important;box-shadow:none!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(button,.secondary-action,.preview-expand):hover:not(:disabled) {background:#292929!important;border-color:#626262!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(button[type=submit]:not(.secondary-action),.preview-download,.daily-download,.bank-investments-download,.fiscal-ai-primary,#adminAuthConfirm) {background:#2864d7!important;color:#fff!important;border-color:#417de8!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(button[type=submit]:not(.secondary-action),.preview-download,.daily-download,.bank-investments-download,.fiscal-ai-primary,#adminAuthConfirm):hover:not(:disabled) {background:#3474e5!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(.tool-tab.active,.main-nav-btn.active,.company-filter.active,.bank-choice.selected,[aria-pressed=true],.is-selected,.is-current) {background:#17243a!important;color:#c2d8ff!important;border-color:#507db6!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) button:disabled {opacity:.48;cursor:not-allowed} /* Tables: headers, zebra rows, hover, editors and semantic balance colors. */ html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(table,tbody,td) {background:var(--surface)!important;color:#dedede!important;box-shadow:none} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) th {background:#232323!important;color:#d8d8d8!important;border-color:#3d3d3d!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) tr:nth-child(even) td {background:#191919!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) tbody tr:hover td {background:#292929!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(.is-success,.is-success p,.is-success strong,.status-success,.fiscal-status-ok,.daily-balance.is-balanced,.match-ok,.positive,.online) {color:var(--dark-success)!important;background:#16382f!important;border-color:#396858!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(.is-warning,.is-warning p,.is-warning strong,.preview-row-warning,.preview-pending-summary,.fiscal-warnings,.accounts-pending,.status-warning) {color:var(--dark-warning)!important;background:#3a3023!important;border-color:#6e5940!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(.is-error,.is-error p,.is-error strong,.base-stat-error,.is-different,.daily-balance.is-different,.negative,.status-error,.fiscal-account-resolution-error,[role=alert]) {color:var(--dark-error)!important;background:#3b252e!important;border-color:#76434f!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(#confirmBaseCleanup,.danger-action) {background:#853e50!important;color:#fff!important;border-color:#b66677!important} /* AI tokens also apply when the fiscal styles are loaded after theme selection. */ html[data-theme="dark"] #fiscalView {--fw-ink:#ededed;--fw-text:#d2d2d2;--fw-muted:#ababab;--fw-border:#333333;--fw-light:#1e1e1e;--fw-accent:#9ac4f2;--fw-focus:#91c6ff;--studio-line:#333333;--studio-blue:#9ac4f2} html[data-theme="dark"] #fiscalView .fiscal-ai {--ai-ink:#ededed;--ai-muted:#ababab;--ai-blue:#8ab8ff;--ai-line:#333333} html[data-theme="dark"] #fiscalView :is(.fiscal-ai-value strong,.fiscal-detail-metric strong,.fiscal-ai-card-description,.fiscal-ai-nav-account,.fiscal-ai-value small,.fiscal-ai-source-title,.fiscal-ai-executive-kicker,.fiscal-ai-card-description) {color:#d4d4d4!important} html[data-theme="dark"] #fiscalView :is(.fiscal-ai-value,.fiscal-ai-account-summary,.fiscal-ai-toolbar,.fiscal-company-result,.fiscal-workflow-nav,.fiscal-detail-metric,.fiscal-account-dialog-header,.fiscal-account-dialog-footer) {background:transparent!important;border-color:var(--border)!important} html[data-theme="dark"] :is(dialog,.company-dialog,.admin-auth-dialog,.fiscal-account-dialog) {background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;box-shadow:0 24px 90px #0008!important} html[data-theme="dark"] dialog::backdrop {background:#000000b3;backdrop-filter:blur(4px)} html[data-theme="dark"] .topbar {border-color:#2d2d2d} html[data-theme="dark"] .topbar :is(.sidebar-toggle,.theme-toggle) {background:#1e1e1e!important;color:#d6d6d6!important;border-color:#3d3d3d!important} html[data-theme="dark"] .topbar .status-pill {background:#141414;color:#ababab;border-color:#333333} html[data-theme="dark"] .topbar .status-pill.online {background:#16382f!important;color:#87d8b9!important;border-color:#396858!important} html[data-theme="dark"] .topbar-title strong {color:#ededed} html[data-theme="dark"] footer {color:#a3a3a3;border-color:#2d2d2d} html[data-theme="dark"] #portfolioPicker :is(.portfolio-brand,.portfolio-brand>span,.portfolio-section-title,.portfolio-tools-heading h2) {color:#ededed!important} html[data-theme="dark"] #portfolioPicker .portfolio-heading {background:linear-gradient(115deg,#191919,#0e0e0e);border-color:#383838!important} html[data-theme="dark"] #portfolioPicker .portfolio-heading h1 {color:#fff!important} html[data-theme="dark"] #portfolioPicker h1 em {color:#8ab8ff} html[data-theme="dark"] #portfolioPicker .portfolio-heading p {color:#bdbdbd!important} html[data-theme="dark"] #portfolioPicker .portfolio-home-summary>span {background:transparent;border-color:transparent!important} html[data-theme="dark"] #portfolioPicker .portfolio-home-summary strong {color:#fff!important} html[data-theme="dark"] #portfolioPicker .portfolio-feature:hover,html[data-theme="dark"] #portfolioPicker .portfolio-feature[open] {background:#141414} html[data-theme="dark"] #portfolioPicker .portfolio-feature {border-color:#333333} html[data-theme="dark"] #portfolioPicker .portfolio-entry:hover {background:#202020!important} html[data-theme="dark"] #portfolioPicker .portfolio-entry-action {background:transparent!important} html[data-theme="dark"] #portfolioPicker .portfolio-entry-action>span:first-child {color:#a9caff} html[data-theme="dark"] #portfolioPicker .portfolio-feature-toggle {color:#a6a6a6} html[data-theme="dark"] :is(.company-card,.file-drop-shell):hover {background:#242424!important} html[data-theme="dark"] a {color:#8ab8ff} @media(prefers-reduced-motion:reduce) {.theme-toggle{transition:none}} html[data-theme="dark"] .availability-page main {background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:0 12px 40px #0003} html[data-theme="dark"] .availability-page :is(h1,.brand,.hours) {color:var(--text)} html[data-theme="dark"] .availability-page :is(p,.label,.foot) {color:var(--muted);border-color:var(--border)} /* Fixed-color fiscal surfaces, including sections mounted after document reading. */ html[data-theme="dark"] #fiscalView :is(.fiscal-form,.fiscal-setup-heading,.fiscal-upload-item,.fiscal-company-auto,.fiscal-table-count,.fiscal-reading-guide,.fiscal-unmapped,.fiscal-ai-no-results,.fiscal-ai-documentary,.fiscal-ai-case,.fiscal-ai-cases-more,.fiscal-doc-reader,.fiscal-doc-stage,.fiscal-doc-empty,.fiscal-doc-accounts,.fiscal-inline-host,.fiscal-detail-table,.fiscal-account-analysis,.fiscal-account-analysis.is-docked) {background:var(--surface)!important;color:var(--text)!important} html[data-theme="dark"] #fiscalView :is(.fiscal-setup-filetype,.fiscal-step-index,.fiscal-upload-symbol,.fiscal-form-actions,.fiscal-summary-icon,.fiscal-progress,.fiscal-investigation-step,.fiscal-investigation-metric,.fiscal-ai-loading,.fiscal-ai-loading-orbit,.fiscal-ai-loading-time,.fiscal-ai-loading-meter,#fiscal242AIMessage,.fiscal-usage-footer,.fiscal-ai-account-chevron,.fiscal-ai-conclusion,.fiscal-ai-document-summary,.fiscal-ai-case-strength,.fiscal-ai-case-action,.fiscal-doc-totals > div,.fiscal-doc-badge,.fiscal-doc-balance,.fiscal-doc-search-totals,.fiscal-doc-pagination,.fiscal-doc-account,.fiscal-account-opinion-conclusion,.fiscal-account-opinion-hypothesis,.fiscal-account-opinion-local,.fiscal-account-situation-symbol,.fiscal-ai-executive-coverage) {background:var(--surface-2)!important;color:var(--dark-accent)!important} html[data-theme="dark"] #fiscalView :is(.fiscal-ai-checklist li,.fiscal-ai-finding-list li,.fiscal-ai-step-documents > li,.fiscal-difference-reading,.fiscal-accum-breakdown,.fiscal-detail-metrics) {background:var(--surface-2)!important;color:var(--text)!important} html[data-theme="dark"] #fiscalView :is(.fiscal-ai-checklist > li,.fiscal-account-opinion-steps > li,.fiscal-ai-loading-stages li)::before {background:#242424;color:#d4d4d4} html[data-theme="dark"] #fiscalView input[type=file]::file-selector-button {background:#252525!important;color:#e2e2e2!important;border:1px solid #505050!important} html[data-theme="dark"] #fiscalView :is(.fiscal-status-ok,.fiscal-doc-badge-conciliado,.fiscal-ai-status-conciliado) {background:#16382f!important;color:#87d8b9!important} html[data-theme="dark"] #fiscalView :is(.fiscal-status-review,.fiscal-status-alert,.fiscal-ai-status-alerta,.fiscal-doc-badge-valor_diferente,.fiscal-doc-badge-conta_diferente) {background:#3a3023!important;color:#e5c391!important} html[data-theme="dark"] #fiscalView #fiscal242Rows > .fiscal-result-row {background:var(--surface)!important;color:var(--text)!important} html[data-theme="dark"] #fiscalView #fiscal242Rows > .fiscal-result-row:nth-child(even) {background:#191919!important} html[data-theme="dark"] #fiscalView #fiscal242Rows > .fiscal-result-row:hover,html[data-theme="dark"] #fiscalView #fiscal242Rows > .fiscal-result-row.selected {background:#292929!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(.saved-period-bank,.saved-period-months>span,.preview-metric,.preview-intro,.preview-sheet-badge,.preview-sheet-switcher,.preview-mini-meta,.file-selection-summary,.base-stat-chip,.base-stat,.task-metric,.admin-auth-badge) {background:var(--surface-2)!important;color:var(--dark-accent)!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(.search-wrap,.grid,.daily-reconciliation,.empty-state,.base-management,.tool-result) {background:var(--surface)!important;color:var(--text)!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(.process-visual-status,.process-status-icon,.classification-coverage-track,.tool-flow i) {background:var(--surface-2)!important;color:var(--dark-accent)!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) .helper {background:transparent!important} /* Floating guides are mounted outside the main workspace. */ html[data-theme="dark"] :is(.company-tool-guide,.company-tool-guide-heading) {background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)!important} html[data-theme="dark"] .company-tool-guide strong {color:var(--text)!important} html[data-theme="dark"] .company-tool-guide :is(p,small) {color:var(--muted)!important} html[data-theme="dark"] .company-tool-guide-index,html[data-theme="dark"] #companyToolGuideClose {background:var(--surface-2)!important;color:var(--dark-accent)!important} html[data-theme="dark"] #fiscalView :is(.fiscal-ai-audit,.fiscal-doc-total-difference,.fiscal-doc-lookup-difference) {color:var(--dark-accent)!important} html[data-theme="dark"] #fiscalView :is(.fiscal-ai-audit,.fiscal-doc-total-difference,.fiscal-doc-lookup-difference) {background:var(--surface-2)!important} html[data-theme="dark"] #fiscalView .fiscal-warnings p {background:#3a3023!important;color:#e5c391!important;border-color:#6e5940!important} /* Neutral black surfaces; blue identifies actions and the current location. */ html[data-theme="dark"] .sidebar {background:#101010!important;border-right-color:#303030!important;color:var(--text)} html[data-theme="dark"] .sidebar :is(.brand,.brand strong) {color:var(--text)} html[data-theme="dark"] .sidebar :is(.nav-caption,.sidebar-note,.sidebar-note small) {color:var(--muted);border-color:var(--border)} html[data-theme="dark"] .app-shell #mainSidebar .main-nav-btn {transition:background-color .18s ease,color .18s ease!important;color:#c9c9c9!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important} html[data-theme="dark"] .app-shell #mainSidebar .main-nav-btn:hover:not(:disabled) {background:#242424!important;border-color:transparent!important;color:#fff!important} html[data-theme="dark"] .app-shell #mainSidebar .main-nav-btn.active, html[data-theme="dark"] .app-shell #mainSidebar .main-nav-btn.active:hover:not(:disabled) {background:#17243a!important;border-color:transparent!important;color:#d5e4ff!important;box-shadow:inset 3px 0 #80adff!important} html[data-theme="dark"] .app-shell #mainSidebar .sidebar-close {background:transparent!important;border-color:transparent!important;box-shadow:none!important} html[data-theme="dark"] .app-shell #mainSidebar .sidebar-close:hover:not(:disabled) {background:#242424!important;border-color:transparent!important} html[data-theme="dark"] .statement-reading {background:var(--surface);border-color:var(--border);color:var(--text)} html[data-theme="dark"] .statement-reading :is(p,.statement-reading-count) {color:var(--muted)} html[data-theme="dark"] #companyPanel :is(.field-group,.tool-tabs) {background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)!important} html[data-theme="dark"] #companyPanel .field-group:focus-within {border-color:#507db6!important;box-shadow:0 0 0 2px #8ab8ff1c} html[data-theme="dark"] .sidebar-backdrop {background:#00000070} html[data-theme="dark"] dialog::backdrop {background:#000000b3!important} /* The search wrapper owns its border and focus ring, including keyboard focus. */ html #companiesView .directory-controls .search-wrap {border:1px solid #ced8e4!important;border-radius:11px!important;background:#fafbfd;box-shadow:none!important;transition:border-color .16s ease,box-shadow .16s ease} html #companiesView .directory-controls .search-wrap:focus-within {border-color:#507cbb!important;box-shadow:0 0 0 2px #507cbb1f!important} html #companiesView .directory-controls #companySearch, html #companiesView .directory-controls #companySearch:focus, html #companiesView .directory-controls #companySearch:focus-visible {border:0!important;border-radius:0!important;outline:none!important;box-shadow:none!important;background:transparent!important} html[data-theme="dark"] #companiesView .directory-controls .search-wrap {border-color:#3b3b3b!important;background:#101010!important} html[data-theme="dark"] #companiesView .directory-controls .search-wrap:focus-within {border-color:#7198ce!important;box-shadow:0 0 0 2px #8ab8ff18!important} /* Quiet, consistent edges for preparation surfaces, without changing result layouts. */ html #companyPanel :is(.panel-head,.tool-card,.modern-form,.tool-intro) {border-radius:16px!important} html #companyPanel .modern-form :is(.field-group,.bank-selector,.period-card) {border-radius:12px!important} html[data-theme="dark"] #companyPanel :is(.panel-head,.tool-card,.modern-form,.tool-intro) {border-color:#383838!important;box-shadow:none!important} html[data-theme="dark"] #companyPanel .modern-form :is(.field-group,.bank-selector,.period-card) {border-color:#303030!important;box-shadow:none!important} html[data-theme="dark"] #companyPanel .modern-form .field-group:focus-within {border-color:#303030!important;box-shadow:none!important} html[data-theme="dark"] #companyPanel .modern-form .file-drop-shell {border-color:#414141!important;box-shadow:none!important;border-radius:11px!important} html[data-theme="dark"] #companyPanel .modern-form .file-drop-shell:focus-within {border-color:#7198ce!important;box-shadow:0 0 0 2px #8ab8ff18!important} html[data-theme="dark"] #companyPanel .modern-form :is(input:not([type=file]):not([type=checkbox]):not([type=radio]),select,textarea):focus-visible {outline:none!important;border-color:#7198ce!important;box-shadow:0 0 0 2px #8ab8ff18!important} html[data-theme="dark"] #companyPanel .modern-form input[type=file]:focus-visible {outline:none!important;border-color:transparent!important;box-shadow:none!important} /* Result cards are created after the upload; cover their inner surfaces too. */ html[data-theme="dark"] .daily-reconciliation .daily-summary {background:transparent!important} html[data-theme="dark"] :is(.daily-reconciliation,.preview-dialog) :is(.daily-summary > div,.daily-rule), html[data-theme="dark"] .preview-dialog-header, html[data-theme="dark"] #companyPanel :is(.tool-result-metrics > span,#baseStats > span) {background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--border)!important;box-shadow:none!important} html[data-theme="dark"] :is(.daily-reconciliation,.preview-dialog) :is(.daily-summary small,.daily-rule span) {color:var(--muted)!important} html[data-theme="dark"] :is(.daily-reconciliation,.preview-dialog) :is(.daily-summary strong,.daily-rule strong,.daily-rule b) {color:var(--text)!important} html[data-theme="dark"] :is(.daily-reconciliation,.preview-dialog) .daily-status.is-ok, html[data-theme="dark"] :is(.daily-reconciliation,.preview-dialog) .daily-table td.daily-balance.is-zero {background:#16382f!important;color:var(--dark-success)!important} html[data-theme="dark"] :is(.daily-reconciliation,.preview-dialog) .daily-status.is-review {background:#3a3023!important;color:var(--dark-warning)!important} html[data-theme="dark"] :is(.daily-reconciliation,.preview-dialog) .daily-filter.active {background:#17243a!important;color:#c2d8ff!important;border-color:#507db6!important} html[data-theme="dark"] :is(#reconcileResult,#ledgerResult,.preview-dialog) .bank-investments :is(.bank-investments-note,.bank-investments-rule,.bank-investments-preview-totals) {background:var(--surface-2)!important;color:var(--muted)!important;border-color:var(--border)!important} html[data-theme="dark"] :is(#reconcileResult,#ledgerResult,.preview-dialog) .bank-investments :is(input,select,input:read-only) {background:#0d0d0d!important;color:var(--text)!important;border-color:#424242!important} html[data-theme="dark"] :is(#reconcileResult,#ledgerResult,.preview-dialog) .bank-investments label {color:var(--text)!important} /* Fiscal styles use theme-aware colors even when loaded after document reading. */ html[data-theme="dark"] #fiscalView { --fiscal-surface:#141414;--fiscal-soft:#141414;--fiscal-line:#353535; --fiscal-copy:#dedede;--fiscal-muted:#b2b2b2; --fiscal-success:#87d8b9;--fiscal-error:#f3a6ad;--fiscal-warning:#e5c391; --fw-shadow:none; } html[data-theme="dark"] #fiscalView :is(.fiscal-account-dialog-header,.fiscal-account-dialog-footer,.fiscal-account-opinion,.fiscal-account-opinion-conclusion,.fiscal-comparison-bridge,.fiscal-reading-guide,.fiscal-summary-pending) {background:var(--surface-2)!important;border-color:var(--border)!important;color:var(--text)!important} html[data-theme="dark"] #fiscalView :is(.fiscal-result-row,.fiscal-document-row,.fiscal-ai-nav-account):hover {background:#242424!important} html[data-theme="dark"] #fiscalView :is(.fiscal-result-row.selected,.fiscal-ai-nav-account.is-selected,.fiscal-workflow-button.active,.fiscal-account-review-filter[aria-pressed=true]) {background:#17243a!important;color:#c2d8ff!important;border-color:#507db6!important} html[data-theme="dark"] #fiscalView :is(input,select,textarea):focus-visible {outline:none!important;border-color:#7198ce!important;box-shadow:0 0 0 2px #8ab8ff20!important} html[data-theme="dark"] #fiscalView :is(.fiscal-summary,.fiscal-results-card,.fiscal-account-dialog,.fiscal-ai-account) {box-shadow:none!important;border-color:#333!important} html[data-theme="dark"] #fiscalView :is(.fiscal-ai-loading-meter,.fiscal-progress) {background:#292929!important} html[data-theme="dark"] #fiscalView :is(.fiscal-ai-loading-meter > span,.fiscal-progress-matches) {background:#7198ce!important} html[data-theme="dark"] #fiscalView .fiscal-account-dialog [role=tab][aria-selected=true] {background:transparent!important;color:#b9d3ff!important;border-bottom-color:#80adff!important;box-shadow:none!important} html[data-theme="dark"] #fiscalView .fiscal-account-dialog .fiscal-account-analysis-button {background:#2864d7!important;color:#fff!important;border-color:#417de8!important} html[data-theme="dark"] #fiscalView .fiscal-account-dialog .fiscal-account-analysis-button:hover:not(:disabled) {background:#245ac0!important} /* Flat interiors: headings and explanatory rows belong to their parent panel. */ html[data-theme="dark"] :is(.global-view,#companyPanel,#fiscalView,dialog) .tool-card > div:first-child, html[data-theme="dark"] #companyPanel .tool-card > .tool-intro, html[data-theme="dark"] #fiscalView :is(.fiscal-account-dialog-header,.fiscal-account-dialog-footer,.fiscal-comparison-bridge,.fiscal-detail-metrics,.fiscal-difference-reading,.fiscal-next-step,.fiscal-summary-pending), html[data-theme="dark"] :is(.daily-reconciliation,.preview-dialog) :is(.daily-toolbar,.daily-rule), html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) :is(.preview-sheet-head,.preview-commandbar,.preview-table-tools,.preview-intro,.form-card-header,.tool-flow) {background:transparent!important;background-image:none!important;box-shadow:none!important} html[data-theme="dark"] :is(#companyPanel,#fiscalView,.app-shell,dialog) th {background:var(--surface)!important} /* Preserve component boundaries; transparent wrappers never become extra cards. */ html[data-theme="dark"] #companyPanel :is(.tool-card,.tool-tabs), html[data-theme="dark"] #companiesView :is(.grid,.directory-controls) {background:transparent!important;background-image:none!important;box-shadow:none!important} html[data-theme="dark"] #companyPanel .tool-card {border:0!important} html[data-theme="dark"] .app-shell #companyPanel .tool-card :is(.tool-intro,.tool-flow) {background:transparent!important;background-image:none!important;box-shadow:none!important} /* The dropzone owns the dashed edge; its native input has no second box. */ html[data-theme="dark"] .app-shell :is(#companyPanel,#ledgerView,#fiscalView) :is(.file-drop-shell,.reconcile-bank-file,.fiscal-upload-item,.field-group:has(.file-drop-shell)) {background:transparent!important;background-image:none!important;box-shadow:none!important;border-color:#454545!important} html[data-theme="dark"] .app-shell :is(#companyPanel,#ledgerView,#fiscalView) .file-drop-shell:hover {background:transparent!important;border-color:#666!important} html[data-theme="dark"] .app-shell :is(#companyPanel,#ledgerView,#fiscalView) .file-drop-shell:focus-within, html[data-theme="dark"] .app-shell :is(#companyPanel,#ledgerView,#fiscalView) .file-drop-shell.is-dragging {border-color:#7198ce!important;outline:2px solid #7198ce;outline-offset:2px} html[data-theme="dark"] .app-shell :is(#companyPanel,#ledgerView,#fiscalView) input[type=file] {background:transparent!important;border:0!important;outline:none!important;box-shadow:none!important} html[data-theme="dark"] .app-shell .file-drop-shell :is(.file-selection,.file-selection-item,.file-selection-summary) {background:transparent!important;box-shadow:none!important} /* Small labels, progress markers and decorative icons need their own dark colors. */ html[data-theme="dark"] .app-shell :is(.company-code,.bank-selector-head > span,.period-card .optional,.reconcile-bank-file .optional) {color:#b2b2b2!important} html[data-theme="dark"] .app-shell .panel-quick-info > span {background:transparent!important;color:#bdbdbd!important;border-color:#454545!important} html[data-theme="dark"] .app-shell .tool-feature-list span {color:var(--muted)!important} html[data-theme="dark"] .app-shell .tool-feature-list b {background:#16382f!important;color:var(--dark-success)!important} html[data-theme="dark"] .app-shell .tool-flow span {color:var(--muted)!important} html[data-theme="dark"] .app-shell .tool-flow span b {background:#202020!important;color:#c8c8c8!important;border-color:#484848!important} html[data-theme="dark"] .app-shell .tool-flow span.active {color:#b9d3ff!important} html[data-theme="dark"] .app-shell .tool-flow span.active b {background:#2864d7!important;color:#fff!important;border-color:#7198ce!important} html[data-theme="dark"] .app-shell .tool-flow span.completed b {background:#16382f!important;color:var(--dark-success)!important;border-color:#396858!important} html[data-theme="dark"] .app-shell .tool-flow i {background:#3a3a3a!important} html[data-theme="dark"] .app-shell .tool-flow span.completed + i {background:#396858!important} html[data-theme="dark"] .app-shell .form-card-icon {background:transparent!important;color:var(--dark-accent)!important} html[data-theme="dark"] .app-shell :is(#companyPanel,#companiesView,#fiscalView) :is(.tool-tab.active,.company-filter.active,[aria-pressed=true]):hover:not(:disabled) {background:#1d2d48!important;color:#c2d8ff!important;border-color:#7198ce!important} html[data-theme="dark"] .app-shell #companyPanel .bank-choice.selected {background:#17243a!important;border-color:#507db6!important} html[data-theme="dark"] .app-shell #companyPanel .bank-choice input {accent-color:#8cbcf3!important} html[data-theme="dark"] .app-shell :is(.file-drop-hint,.tool-feature-list span) {font-size:11px;line-height:1.6} html[data-theme="dark"] #companiesView :is(.company-row-regime,.mini-status,.portfolio-owner,.search-meta) {color:var(--muted)!important} html[data-theme="dark"] #companiesView #companyCount {color:var(--muted)!important} html[data-theme="dark"] #companiesView .company-row[data-availability="api_ready"] .mini-status {color:var(--dark-success)!important} /* Keep table sorting controls visually inside the column heading. */ html[data-theme="dark"] .app-shell th button {background:transparent!important;color:inherit!important;border-color:transparent!important} html[data-theme="dark"] .app-shell th button:hover:not(:disabled) {background:#242424!important;border-color:transparent!important} /* Inline fiscal results follow the row surface, including zebra and hover states. */ html[data-theme="dark"] #fiscalView :is(.fiscal-account-type,.fiscal-accum-tag,.fiscal-difference-number) {background:transparent!important;color:var(--dark-accent)!important;box-shadow:none!important} html[data-theme="dark"] #fiscalView #fiscal242Rows .fiscal-account-link, html[data-theme="dark"] #fiscalView #fiscal242Rows .fiscal-account-link:hover:not(:disabled) {background:transparent!important;box-shadow:none!important} /* Compact connection state. Keeps topbar height unchanged. */ .topbar .connection-pill { display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:34px;max-width:205px;padding:7px 10px; cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s; font-size:11px;line-height:1.25; } .topbar .connection-pill::before {display:none!important} .topbar .connection-indicator { box-sizing:border-box;display:inline-block;flex:none;width:8px;height:8px; border:1.5px solid currentColor;border-radius:50%;opacity:.75; } .topbar .connection-label {display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar .connection-pill[data-connection="checking"], .topbar .connection-pill[data-connection="waking"] {color:#496581;background:#f1f5fa;border-color:#d9e4f1} .topbar .connection-pill[data-connection="waking"] .connection-indicator { width:11px;height:11px;border:2px solid #a2b6cb;border-top-color:#39699e;opacity:1; animation:razyncConnectSpin 1.1s linear infinite; } .topbar .connection-pill[data-connection="offline"], .topbar .connection-pill[data-connection="unconfigured"] {color:#866535;background:#faf7f0;border-color:#e9dfcf} .topbar .connection-pill[data-connection="offline"] .connection-indicator {background:#ad8650;border-color:#ad8650} .topbar .connection-pill[data-connection="online"] .connection-indicator {background:#3e9b76;border-color:#3e9b76} .topbar .connection-pill:focus-visible {outline:2px solid #568ac7;outline-offset:2px} @keyframes razyncConnectSpin {to {transform:rotate(360deg)}} html[data-theme="dark"] .topbar .connection-pill {background:#1b1b1b!important;border-color:#393939!important;color:#c4c4c4!important} html[data-theme="dark"] .topbar .connection-pill[data-connection="online"] {color:#9bdabc!important} html[data-theme="dark"] .topbar .connection-pill[data-connection="waking"], html[data-theme="dark"] .topbar .connection-pill[data-connection="checking"] {color:#b5cdf1!important} html[data-theme="dark"] .topbar .connection-pill[data-connection="offline"] {color:#ddc292!important} @media(max-width:760px) { .topbar .connection-pill {min-width:0;max-width:145px;padding:7px 8px;gap:5px} .topbar .connection-label {max-width:114px;font-size:10px} } @media(prefers-reduced-motion:reduce) { .topbar .connection-pill,.topbar .connection-indicator {animation:none!important;transition:none!important} } /* Higher specificity than the generic dark-mode button rule. */ html[data-theme="dark"] .app-shell .topbar #apiStatus.connection-pill { background:#171717!important;border-color:#393939!important; color:#c4c4c4!important;box-shadow:none!important; } html[data-theme="dark"] .app-shell .topbar #apiStatus[data-connection="online"] {color:#9bdabc!important} html[data-theme="dark"] .app-shell .topbar #apiStatus[data-connection="checking"], html[data-theme="dark"] .app-shell .topbar #apiStatus[data-connection="waking"] {color:#b5cdf1!important} html[data-theme="dark"] .app-shell .topbar #apiStatus[data-connection="offline"] {color:#ddc292!important} /* assets/css/sidebar-motion.css */ /* Navigation motion uses the existing open/closed state; focus and inert stay unchanged. */ #mainSidebar {isolation:isolate;transition:transform 360ms cubic-bezier(.16,1,.3,1),opacity 220ms ease,visibility 0s} body.sidebar-collapsed #mainSidebar {transition:transform 240ms cubic-bezier(.4,0,.6,1),opacity 180ms ease,visibility 0s 240ms} .sidebar-backdrop {transition:opacity 280ms ease,visibility 0s} body.sidebar-collapsed .sidebar-backdrop {transition:opacity 220ms ease,visibility 0s 240ms} #mainSidebar::before {content:"";position:absolute;inset:0 0 auto;height:260px;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 15% 0%,#9ac8ff14,transparent 70%);opacity:.6} #mainSidebar .brand {opacity:1;transform:none;transition:opacity 300ms 60ms ease,transform 440ms 60ms cubic-bezier(.16,1,.3,1)} #mainSidebar .brand-logo {transform:rotate(0deg);transition:transform 500ms 70ms cubic-bezier(.16,1,.3,1)} #mainSidebar .nav-caption {opacity:1;transform:none;transition:opacity 300ms 100ms ease,transform 380ms 100ms cubic-bezier(.16,1,.3,1)} #mainSidebar .main-nav-btn {--nav-delay:120ms;position:relative;opacity:1;transform:none;transition:opacity 300ms var(--nav-delay) ease,transform 400ms var(--nav-delay) cubic-bezier(.16,1,.3,1),background-color 180ms ease,color 180ms ease} #mainSidebar .main-nav-btn:nth-child(2) {--nav-delay:165ms} #mainSidebar .main-nav-btn:nth-child(3) {--nav-delay:210ms} #mainSidebar .main-nav-btn:nth-child(4) {--nav-delay:255ms} #mainSidebar .main-nav-btn::before {transition:transform 260ms cubic-bezier(.16,1,.3,1)} #mainSidebar .sidebar-note {opacity:1;transform:none;transition:opacity 350ms 280ms ease,transform 400ms 280ms cubic-bezier(.16,1,.3,1)} body.sidebar-collapsed #mainSidebar :is(.brand,.nav-caption,.main-nav-btn,.sidebar-note) {opacity:0;transform:translateX(-12px);transition-delay:0s} body.sidebar-collapsed #mainSidebar .brand-logo {transform:rotate(-8deg);transition-delay:0s} #mainSidebar .sidebar-close svg {transition:transform 280ms cubic-bezier(.16,1,.3,1)} #sidebarToggle .sidebar-toggle-hint {transition:transform 280ms cubic-bezier(.16,1,.3,1)} body:not(.sidebar-collapsed) #sidebarToggle .sidebar-toggle-hint {transform:rotate(180deg)} @keyframes sidebarAmbient {0%,100%{opacity:.4}50%{opacity:.9}} @keyframes sidebarNotePulse {0%,100%{box-shadow:0 0 0 0 #9bc5ff00}45%{box-shadow:0 0 0 5px #9bc5ff10}70%{box-shadow:0 0 0 8px #9bc5ff00}} @media(prefers-reduced-motion:no-preference) { body:not(.sidebar-collapsed) #mainSidebar::before {animation:sidebarAmbient 9s ease-in-out infinite} body:not(.sidebar-collapsed) #mainSidebar .sidebar-dot {animation:sidebarNotePulse 4s 400ms ease-out infinite} } @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { body:not(.sidebar-collapsed) #mainSidebar .main-nav-btn:hover {transform:translateX(3px);transition-delay:0s} #mainSidebar .main-nav-btn:hover::before {transform:scale(1.08)} #mainSidebar .sidebar-close:hover svg {transform:rotate(90deg)} #mainSidebar .brand:hover .brand-logo {transform:translateY(-2px) rotate(-4deg);transition-delay:0s} body.sidebar-collapsed #sidebarToggle:hover .sidebar-toggle-hint {transform:translateX(2px)} } html[data-theme=dark] .app-shell #mainSidebar .main-nav .main-nav-btn {transition:opacity 300ms var(--nav-delay) ease,transform 400ms var(--nav-delay) cubic-bezier(.16,1,.3,1),background-color 180ms ease,color 180ms ease!important} html[data-theme=dark] body.sidebar-collapsed .app-shell #mainSidebar .main-nav .main-nav-btn {transition-delay:0s!important} @media(prefers-reduced-motion:reduce) { #mainSidebar,body.sidebar-collapsed #mainSidebar,.sidebar-backdrop,body.sidebar-collapsed .sidebar-backdrop, #mainSidebar *,#mainSidebar *::before,#mainSidebar *::after,#sidebarToggle .sidebar-toggle-hint {animation:none!important;transition:none!important} #mainSidebar::before {animation:none} } /* assets/css/home-welcome.css */ /* Razync welcome: an editorial entrance and an interactive product illustration. */ #companiesView #portfolioPicker {--home-ink:#1c3048;--home-muted:#6a7c90;--home-blue:#3067c7;--home-line:#dde6ef;--home-paper:#fff;--home-soft:#f0f5fc;max-width:1180px;display:grid;grid-template-columns:1fr;gap:24px;margin:24px auto 28px;padding:0;background:none;border:0;box-shadow:none} #companiesView #portfolioPicker[hidden] {display:none!important} #companiesView #portfolioPicker::before,#companiesView #portfolioPicker::after {display:none} #companiesView #portfolioPicker .portfolio-home-topline {display:flex;justify-content:space-between;align-items:center;gap:20px} #companiesView #portfolioPicker .portfolio-brand {display:flex;align-items:center;gap:11px;color:var(--home-ink)} #companiesView #portfolioPicker .brand-mark {display:grid;place-items:center;width:38px;height:38px} #companiesView #portfolioPicker .brand-mark img {width:36px;height:36px;border-radius:10px} #companiesView #portfolioPicker .brand-wordmark {display:block;font-size:22px;line-height:1.1;letter-spacing:-.7px;font-weight:650} #companiesView #portfolioPicker .brand-name {display:block} #companiesView #portfolioPicker .brand-wordmark small {display:block;margin-top:5px;font-size:7px;letter-spacing:1.5px;font-weight:500;color:var(--home-muted)} #companiesView #portfolioPicker .portfolio-date {font-size:11px;color:var(--home-muted);text-transform:capitalize} #companiesView #portfolioPicker .portfolio-heading {position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:70px;min-height:0;margin:0;padding:16px 0 0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;color:var(--home-ink)} #companiesView #portfolioPicker .portfolio-heading::before,#companiesView #portfolioPicker .portfolio-heading::after {display:none} #companiesView #portfolioPicker .home-intro-copy {min-width:0;position:relative;z-index:1;padding:8px 0} #companiesView #portfolioPicker .portfolio-eyebrow {display:flex;align-items:center;gap:8px;margin:0 0 20px;font-size:11px;font-weight:500;color:var(--home-muted)} #companiesView #portfolioPicker .portfolio-eyebrow::before {content:"";width:5px;height:5px;border-radius:50%;background:#6f99db;box-shadow:0 0 0 4px #6f99db10} #companiesView #portfolioPicker h1 {margin:0 0 22px;font-size:clamp(44px,4.7vw,64px);font-weight:600;line-height:1.05;letter-spacing:-.055em;color:var(--home-ink)} #companiesView #portfolioPicker h1 em {display:inline-block;font-style:normal;font-weight:500;color:var(--home-blue)} #companiesView #portfolioPicker h1 em::after {display:none} #companiesView #portfolioPicker .portfolio-heading .home-intro-copy > p {max-width:36ch;margin:0;font-size:14px;line-height:1.8;color:var(--home-muted)} #companiesView #portfolioPicker .portfolio-access {display:block;max-width:420px;margin-top:30px;padding:0;border:0;background:none;box-shadow:none} #companiesView #portfolioPicker .portfolio-access::before {display:none} #companiesView #portfolioPicker .portfolio-access-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px!important;padding:0} #companiesView #portfolioPicker .portfolio-access-kicker {font-size:7px;letter-spacing:1.4px;font-weight:600;color:var(--home-muted);margin:0} #companiesView #portfolioPicker .portfolio-section-title {margin:0;font-size:12px;letter-spacing:-.1px;line-height:1.4;font-weight:550;color:var(--home-ink)} #companiesView #portfolioPicker .portfolio-list {display:grid;gap:12px} #companiesView #portfolioPicker .portfolio-entry {display:grid;position:relative;isolation:isolate;overflow:hidden;grid-template-columns:44px minmax(0,1fr) 76px;grid-template-rows:auto auto;align-items:center;gap:6px 13px;width:100%;min-height:94px;margin:0;padding:17px 19px;border:1px solid #355c89;border-radius:12px;background:linear-gradient(110deg,#1c3858,#2c5687);box-shadow:0 8px 22px #1c38580a;text-align:left;cursor:pointer;transform:none;transition:border-color .25s,box-shadow .25s} #companiesView #portfolioPicker .portfolio-entry::before {content:"";display:block;position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(200px circle at var(--pointer-x,80%) var(--pointer-y,50%),#bddbff24,transparent 80%);opacity:.4;pointer-events:none;transition:opacity .25s} #companiesView #portfolioPicker .portfolio-entry::after {content:"";position:absolute;inset:-20% auto -20% -40%;width:25%;background:linear-gradient(100deg,transparent,#cce3ff16,transparent);transform:skewX(-15deg) translateX(-150%);pointer-events:none} #companiesView #portfolioPicker .portfolio-entry:hover {transform:none;border-color:#6993c2;box-shadow:0 12px 30px #1c385818} #companiesView #portfolioPicker .portfolio-entry:hover::before {opacity:1} #companiesView #portfolioPicker .portfolio-entry-label {grid-column:2;grid-row:1;font-size:7px;letter-spacing:1.25px;color:#b3c9e1} #companiesView #portfolioPicker .portfolio-avatar {grid-column:1;grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border:1px solid #c4ddff1a;border-radius:10px;background:#c4ddff0b;animation:none;transform:none} #companiesView #portfolioPicker .wallet-folder {width:34px;height:34px;overflow:visible} #companiesView #portfolioPicker .wallet-back {fill:#6698d0;stroke:#aacdf7;stroke-width:.8} #companiesView #portfolioPicker .wallet-sheet {fill:#e4f0ff;stroke:#fff;stroke-width:.6} #companiesView #portfolioPicker .wallet-lines {stroke:#80a5d1;stroke-width:1.1;stroke-linecap:round} #companiesView #portfolioPicker .wallet-front {fill:#83afe4;stroke:#c2ddff;stroke-width:.8} #companiesView #portfolioPicker .portfolio-entry-info {grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:3px;min-width:0} #companiesView #portfolioPicker .portfolio-entry-info strong {font-size:18px;letter-spacing:-.35px;font-weight:600;line-height:1.3;color:#fff} #companiesView #portfolioPicker .portfolio-entry-quantity {font-size:11px;color:#b8cee5} #companiesView #portfolioPicker .portfolio-entry-preview {display:none} #companiesView #portfolioPicker .portfolio-entry-action {grid-column:3;grid-row:1/3;display:flex;align-items:center;justify-content:flex-end;gap:7px;border:0;padding:0;background:transparent;color:#edf5ff} #companiesView #portfolioPicker .portfolio-entry-action > span:first-child {display:block;font-size:11px;font-weight:550} #companiesView #portfolioPicker .portfolio-entry-arrow {display:grid;place-items:center;width:28px;height:30px;border:1px solid #b9d7ff20;border-radius:8px;background:#c4ddff0a;color:#fff;font-size:18px;animation:none;transition:translate .25s} #companiesView #portfolioPicker .portfolio-entry:hover .portfolio-entry-arrow {translate:3px 0} #companiesView #portfolioPicker .portfolio-entry:focus-visible {outline:2px solid #6e9ee4;outline-offset:4px} /* The preview is an illustration with explicit, keyboard-accessible stage controls. */ #companiesView #portfolioPicker .showcase-wrap {position:relative;min-width:0;perspective:1200px} #companiesView #portfolioPicker .showcase-aura {position:absolute;z-index:-1;inset:-40px -25px 30px;overflow:hidden;pointer-events:none;border-radius:40%} #companiesView #portfolioPicker .showcase-aura i {position:absolute;inset:10% 0 10% 0;border-radius:40% 60% 55% 45%;background:radial-gradient(ellipse,#b9d3fa45,transparent 70%)} #companiesView #portfolioPicker .showcase-aura i+i {inset:30% 0 0 30%;background:radial-gradient(ellipse,#cddff866,transparent 70%)} #companiesView #portfolioPicker .home-showcase {position:relative;min-width:0;overflow:hidden;border:1px solid #d8e3f0;border-radius:19px;background:var(--home-paper);box-shadow:0 22px 65px #254c7c0c,0 3px 8px #254c7c04;transform:rotate(-1deg);transition:transform .4s cubic-bezier(.16,1,.3,1)} #companiesView #portfolioPicker .showcase-top {display:flex;align-items:center;justify-content:space-between;gap:12px;height:42px;padding:0 20px;border-bottom:1px solid var(--home-line);background:#f9fbfe;color:#7e90a5;font-size:7px;letter-spacing:1.35px} #companiesView #portfolioPicker .showcase-window-dots {display:flex;gap:4px} #companiesView #portfolioPicker .showcase-window-dots i {display:block;width:4px;height:4px;border-radius:50%;background:#cbd7e5} #companiesView #portfolioPicker .showcase-mark {font-size:8px;letter-spacing:-.4px;color:#9aacc0} #companiesView #portfolioPicker .showcase-panels {padding:15px 24px 20px} #companiesView #portfolioPicker .showcase-panel[hidden] {display:none!important} #companiesView #portfolioPicker .showcase-art {position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:18px;height:190px} #companiesView #portfolioPicker .showcase-art::before {content:"";position:absolute;z-index:-1;width:220px;height:150px;background:radial-gradient(ellipse,#d8e7fd55,transparent 70%);border-radius:50%} #companiesView #portfolioPicker .scene-paper {position:relative;display:flex;flex-direction:column;gap:8px;box-sizing:border-box;width:108px;height:138px;padding:13px 12px;border:1px solid #d2e0f1;border-radius:10px;background:#fff;box-shadow:0 8px 22px #355c8d0a} #companiesView #portfolioPicker .scene-source {transform:rotate(-8deg)} #companiesView #portfolioPicker .scene-model {background:linear-gradient(145deg,#fff,#edf5ff);transform:rotate(6deg)} #companiesView #portfolioPicker .paper-format {font-size:7px;letter-spacing:1px;color:#7e98b9;font-weight:600} #companiesView #portfolioPicker .scene-paper > svg {width:22px;height:22px;fill:none;stroke:#6e96c7;stroke-width:1.4} #companiesView #portfolioPicker .scene-paper > i {width:90%;height:2px;border-radius:2px;background:#d7e2ef} #companiesView #portfolioPicker .scene-paper > i:nth-last-of-type(1) {width:60%} #companiesView #portfolioPicker .scene-paper small {margin-top:auto;font-size:8px;color:#6883a4} #companiesView #portfolioPicker .paper-mini-grid {display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px} #companiesView #portfolioPicker .paper-mini-grid i {height:11px;border-radius:2px;background:#d5e6fc} #companiesView #portfolioPicker .paper-mini-grid i:nth-child(even) {background:#e6eef8} #companiesView #portfolioPicker .paper-check {position:absolute;right:-9px;bottom:24px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e8f4ef;border:3px solid var(--home-paper)} #companiesView #portfolioPicker .paper-check svg {width:15px;height:15px;stroke:#548b75;stroke-width:1.8} #companiesView #portfolioPicker .scene-transfer {width:48px} #companiesView #portfolioPicker .scene-transfer svg {width:100%;height:24px;fill:none;stroke:#a1bce1;stroke-width:1.3} #companiesView #portfolioPicker .scene-spark {position:absolute;right:12%;top:14%;color:#94b4df;font-size:14px} #companiesView #portfolioPicker .spark-two {left:8%;top:auto;bottom:15%;right:auto;font-size:9px;opacity:.5} #companiesView #portfolioPicker .showcase-copy {min-height:82px;text-align:left} #companiesView #portfolioPicker .scene-index {display:block;font-size:7px;font-weight:600;letter-spacing:1.35px;color:#7f99b8;margin-bottom:8px} #companiesView #portfolioPicker .showcase-copy h2 {margin:0 0 7px;font-size:21px;letter-spacing:-.55px;font-weight:550;line-height:1.3;color:var(--home-ink)} #companiesView #portfolioPicker .showcase-copy p {max-width:40ch;margin:0;font-size:12px;line-height:1.7;color:var(--home-muted)} #companiesView #portfolioPicker .showcase-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--home-line)} #companiesView #portfolioPicker .home-showcase .showcase-step {position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:48px;padding:12px 5px;border:0;border-radius:0;background:transparent;color:#7b8da2;font-size:10px;font-weight:500;cursor:pointer;box-shadow:none} #companiesView #portfolioPicker .home-showcase .showcase-step > span {font-size:8px;color:#9bafc6} #companiesView #portfolioPicker .home-showcase .showcase-step[aria-pressed=true] {background:#f3f7fd;color:var(--home-blue)} #companiesView #portfolioPicker .showcase-step > i {position:absolute;bottom:0;left:12px;right:12px;height:2px;overflow:hidden;border-radius:3px} #companiesView #portfolioPicker .showcase-step > i::after {content:"";display:block;width:100%;height:100%;background:#80a7e0;transform-origin:left;transform:scaleX(0)} #companiesView #portfolioPicker .showcase-step[aria-pressed=true] > i::after {transform:scaleX(1)} #companiesView #portfolioPicker .showcase-playback {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 15px;border-top:1px solid var(--home-line);color:#8596aa;font-size:8px} #companiesView #portfolioPicker .home-showcase .showcase-pause {min-height:24px;padding:3px 5px;border:0;border-radius:5px;background:transparent;color:#6f89aa;box-shadow:none;font-size:9px;cursor:pointer} #companiesView #portfolioPicker .home-showcase button:focus-visible {outline:2px solid #749fe0;outline-offset:-3px} #companiesView #portfolioPicker .portfolio-home-summary {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:18px 8px 0;padding:0;border:0;background:none} #companiesView #portfolioPicker .portfolio-home-summary > span {display:flex;align-items:center;gap:8px;min-width:0;margin:0;padding:0;background:none;border:0} #companiesView #portfolioPicker .portfolio-home-summary > span+span {justify-content:flex-end} #companiesView #portfolioPicker .portfolio-home-summary strong {font-size:20px;line-height:1.2;font-weight:550;letter-spacing:-.7px;color:var(--home-ink)} #companiesView #portfolioPicker .portfolio-home-summary :is(.home-stat-label,#portfolioWalletLabel) {font-size:10px;line-height:1.5;letter-spacing:0;color:var(--home-muted)} /* The two other scenes are diagrams, not customer data or completed checks. */ #companiesView #portfolioPicker .scene-ledger {display:flex;flex-direction:column;gap:11px;width:94px;height:126px;padding:14px 12px;border:1px solid #d2e0f1;border-radius:10px;background:#fff;box-shadow:0 8px 20px #355c8d08} #companiesView #portfolioPicker .scene-ledger b {font-size:7px;letter-spacing:1px;color:#7e98b9;margin-bottom:4px} #companiesView #portfolioPicker .scene-ledger i {height:4px;border-radius:2px;background:linear-gradient(90deg,#c6daf4 65%,#edf3fa 65%);transform-origin:left} #companiesView #portfolioPicker .ledger-left {transform:rotate(-7deg)} #companiesView #portfolioPicker .ledger-right {transform:rotate(7deg)} #companiesView #portfolioPicker .scene-balance {position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid #cee4d9;border-radius:50%;background:#edf7f1;box-shadow:0 0 0 8px #edf7f144} #companiesView #portfolioPicker .scene-balance svg {width:24px;height:24px;stroke:#5c8f78;stroke-width:1.7} #companiesView #portfolioPicker .scene-connector {position:absolute;z-index:-1;width:180px;height:1px;left:50%;top:50%;translate:-50% 0;background:#b7cce7} #companiesView #portfolioPicker .scene-classify {display:block} #companiesView #portfolioPicker .scene-label {position:absolute;display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #d4e1f1;border-radius:8px;background:#fff;box-shadow:0 6px 15px #355c8d08;color:#7490b3;font-size:9px} #companiesView #portfolioPicker .scene-label svg {width:15px;height:15px;stroke:#7c9fc9;stroke-width:1.4} #companiesView #portfolioPicker .label-one {left:8%;top:25px;transform:rotate(-8deg)} #companiesView #portfolioPicker .label-two {right:8%;top:20px;transform:rotate(8deg)} #companiesView #portfolioPicker .label-three {left:50%;top:5px;transform:translateX(-50%)} #companiesView #portfolioPicker .scene-folder {position:absolute;z-index:1;left:50%;bottom:20px;translate:-50% 0;display:flex;align-items:end;justify-content:space-between;width:164px;height:90px;padding:17px;border:1px solid #a8c8ee;border-radius:4px 12px 12px 12px;background:linear-gradient(145deg,#c4dcfa,#e1edfd);box-shadow:0 10px 23px #355c8d0d} #companiesView #portfolioPicker .scene-folder > i {position:absolute;left:-1px;top:-12px;width:60px;height:15px;border:1px solid #a8c8ee;border-bottom:0;border-radius:7px 7px 0 0;background:#c4dcfa} #companiesView #portfolioPicker .scene-folder b {font-size:10px;color:#5e85b6;font-weight:550} #companiesView #portfolioPicker .scene-folder svg {width:20px;height:20px;stroke:#618cbd;stroke-width:1.7} /* Deliberate motion, with one active scene at a time. */ @keyframes entrance {from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}} @keyframes auraDrift {0%,100%{transform:translate(-10px,0) rotate(-12deg);opacity:.65}50%{transform:translate(15px,12px) rotate(15deg);opacity:1}} @keyframes sceneFloat {0%,100%{translate:0 0}50%{translate:0 -11px}} @keyframes sourceFloat {0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-11deg) translateY(-9px)}} @keyframes modelFloat {0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(9deg) translateY(-11px)}} @keyframes flowSignal {0%,100%{stroke-dashoffset:80;opacity:.35}50%{stroke-dashoffset:0;opacity:1}} @keyframes checkDraw {0%,10%{stroke-dashoffset:25;opacity:.4}55%,100%{stroke-dashoffset:0;opacity:1}} @keyframes rowReveal {from{scale:.65 1;opacity:.4}to{scale:1 1;opacity:1}} @keyframes stepProgress {from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes walletLight {0%,60%{transform:skewX(-15deg) translateX(-150%)}100%{transform:skewX(-15deg) translateX(700%)}} @keyframes folderPaper {0%,100%{translate:0 0}50%{translate:0 -4px}} @media(prefers-reduced-motion:no-preference) { #companiesView #portfolioPicker .portfolio-home-topline {animation:entrance .7s .05s cubic-bezier(.16,1,.3,1) both} #companiesView #portfolioPicker .home-intro-copy {animation:entrance .9s .12s cubic-bezier(.16,1,.3,1) both} #companiesView #portfolioPicker .showcase-wrap {animation:entrance 1s .22s cubic-bezier(.16,1,.3,1) both} #companiesView #portfolioPicker .showcase-aura i {animation:auraDrift 16s ease-in-out infinite} #companiesView #portfolioPicker .showcase-aura i+i {animation-delay:-8s} #companiesView #portfolioPicker .showcase-panel:not([hidden]) .showcase-copy {animation:entrance .55s ease-out both} #companiesView #portfolioPicker .showcase-panel:not([hidden]) .scene-source {animation:sourceFloat 5s ease-in-out infinite} #companiesView #portfolioPicker .showcase-panel:not([hidden]) .scene-model {animation:modelFloat 5s -1s ease-in-out infinite} #companiesView #portfolioPicker .scene-transfer svg path {stroke-dasharray:25 70;animation:flowSignal 2.8s linear infinite} #companiesView #portfolioPicker .paper-check path,#companiesView #portfolioPicker .scene-balance path,#companiesView #portfolioPicker .scene-folder path {stroke-dasharray:25;animation:checkDraw 2.6s ease-out both} #companiesView #portfolioPicker .scene-spark {animation:sceneFloat 6s ease-in-out infinite} #companiesView #portfolioPicker .spark-two {animation-delay:-3s} #companiesView #portfolioPicker .scene-ledger i {animation:rowReveal .7s .15s ease-out both} #companiesView #portfolioPicker .scene-ledger i:nth-of-type(2) {animation-delay:.3s} #companiesView #portfolioPicker .scene-ledger i:nth-of-type(3) {animation-delay:.45s} #companiesView #portfolioPicker .scene-ledger i:nth-of-type(4) {animation-delay:.6s} #companiesView #portfolioPicker .scene-label {animation:sceneFloat 5s ease-in-out infinite} #companiesView #portfolioPicker .label-two {animation-delay:-2s} #companiesView #portfolioPicker .label-three {animation-delay:-3.5s} #companiesView #portfolioPicker .showcase-step[aria-pressed=true] > i::after {animation:stepProgress 5.6s linear both} #companiesView #portfolioPicker .portfolio-entry::after {animation:walletLight 10s ease-in-out infinite} #companiesView #portfolioPicker .wallet-sheet,#companiesView #portfolioPicker .wallet-lines {animation:folderPaper 6s ease-in-out infinite} } #companiesView #portfolioPicker .home-showcase[data-playing=false] .showcase-step > i::after {animation-play-state:paused} #companiesView #portfolioPicker .home-showcase[data-art-motion=paused] .showcase-panels *,#companiesView #portfolioPicker .home-showcase[data-playing=false] .showcase-panels *::after {animation-play-state:paused} #companiesView #portfolioPicker[data-motion=paused] *,#companiesView #portfolioPicker[data-motion=paused] *::before,#companiesView #portfolioPicker[data-motion=paused] *::after {animation-play-state:paused!important} /* Dark mode stays neutral, with blue reserved for the illustration and actions. */ html[data-theme=dark] #companiesView #portfolioPicker {--home-ink:#edf0f5;--home-muted:#9da9b9;--home-blue:#a0c4ff;--home-line:#303741;--home-paper:#171b21;--home-soft:#1c2532} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-heading {background:none!important;border:0!important;box-shadow:none} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-heading h1 {color:#edf0f5!important} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-heading p {color:var(--home-muted)!important} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-entry {background:linear-gradient(110deg,#1c2b40,#263e5e)!important;border-color:#425e82!important;box-shadow:none} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-entry:hover {background:linear-gradient(110deg,#22334b,#2d486e)!important} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-entry-label {color:#b3c9e1!important} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-entry-info strong {color:#fff!important} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-entry-quantity {color:#b8cee5!important} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-avatar {background:#c4ddff0b!important;border-color:#c4ddff1a!important} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-entry-action {background:transparent!important;box-shadow:none!important} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-entry-arrow {background:#c4ddff0a!important;color:#fff!important} html[data-theme=dark] #companiesView #portfolioPicker .home-showcase {background:var(--home-paper);border-color:#343e4b;box-shadow:0 22px 65px #0002} html[data-theme=dark] #companiesView #portfolioPicker .showcase-top {background:#1c2129} html[data-theme=dark] #companiesView #portfolioPicker .showcase-art::before {background:radial-gradient(ellipse,#38629722,transparent 70%)} html[data-theme=dark] #companiesView #portfolioPicker .scene-paper,html[data-theme=dark] #companiesView #portfolioPicker .scene-ledger,html[data-theme=dark] #companiesView #portfolioPicker .scene-label {background:#202c3d;border-color:#405572} html[data-theme=dark] #companiesView #portfolioPicker .scene-model {background:linear-gradient(145deg,#25364d,#1f2e42)} html[data-theme=dark] #companiesView #portfolioPicker .scene-paper > i {background:#3f5572} html[data-theme=dark] #companiesView #portfolioPicker .paper-mini-grid i {background:#45648e} html[data-theme=dark] #companiesView #portfolioPicker .paper-mini-grid i:nth-child(even) {background:#334b6c} html[data-theme=dark] #companiesView #portfolioPicker .paper-check,html[data-theme=dark] #companiesView #portfolioPicker .scene-balance {background:#243c34;border-color:var(--home-paper)} html[data-theme=dark] #companiesView #portfolioPicker .paper-check path,html[data-theme=dark] #companiesView #portfolioPicker .scene-balance path {stroke:#91bca7} html[data-theme=dark] #companiesView #portfolioPicker .scene-ledger i {background:linear-gradient(90deg,#45648e 65%,#293c56 65%)} html[data-theme=dark] #companiesView #portfolioPicker .scene-folder {background:linear-gradient(145deg,#304d72,#263f5e);border-color:#597a9e} html[data-theme=dark] #companiesView #portfolioPicker .scene-folder > i {background:#304d72;border-color:#597a9e} html[data-theme=dark] #companiesView #portfolioPicker .scene-folder b {color:#b5cdeb} html[data-theme=dark] #companiesView #portfolioPicker .home-showcase .showcase-step,html[data-theme=dark] #companiesView #portfolioPicker .home-showcase .showcase-pause {background:transparent!important;border:0!important;color:#a7b7cd!important;box-shadow:none!important} html[data-theme=dark] #companiesView #portfolioPicker .home-showcase .showcase-step[aria-pressed=true] {background:#23334b!important;color:#c3d9fa!important} html[data-theme=dark] #companiesView #portfolioPicker .home-showcase .showcase-step:hover,html[data-theme=dark] #companiesView #portfolioPicker .home-showcase .showcase-pause:hover {background:#263449!important} @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { #companiesView #portfolioPicker .home-showcase:hover {transform:rotate(0deg)} } /* Keep the working entrance within normal laptop heights. */ @media(min-width:1000px) and (max-height:760px) { #companiesView #portfolioPicker {margin:12px auto 18px;gap:16px} #companiesView #portfolioPicker .portfolio-heading {gap:48px;padding-top:5px} #companiesView #portfolioPicker h1 {font-size:50px;margin-bottom:18px} #companiesView #portfolioPicker .portfolio-eyebrow {margin-bottom:16px} #companiesView #portfolioPicker .portfolio-heading .home-intro-copy > p {font-size:13px} #companiesView #portfolioPicker .portfolio-access {margin-top:23px} #companiesView #portfolioPicker .portfolio-access-heading {margin-bottom:10px!important} #companiesView #portfolioPicker .portfolio-entry {min-height:86px;padding:14px 17px} #companiesView #portfolioPicker .showcase-top {height:34px;padding-inline:17px} #companiesView #portfolioPicker .showcase-panels {padding:12px 20px 15px} #companiesView #portfolioPicker .showcase-art {height:130px;gap:17px} #companiesView #portfolioPicker .scene-paper {width:88px;height:112px;padding:10px;gap:6px} #companiesView #portfolioPicker .scene-paper > svg {width:18px;height:18px} #companiesView #portfolioPicker .paper-mini-grid {gap:4px;margin-top:5px} #companiesView #portfolioPicker .paper-mini-grid i {height:8px} #companiesView #portfolioPicker .showcase-copy {min-height:70px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:18px} #companiesView #portfolioPicker .showcase-copy p {font-size:11px;line-height:1.6} #companiesView #portfolioPicker .scene-index {margin-bottom:6px;font-size:7px} #companiesView #portfolioPicker .home-showcase .showcase-step {min-height:42px;padding-block:10px} #companiesView #portfolioPicker .showcase-playback {padding-block:4px} #companiesView #portfolioPicker .portfolio-home-summary {margin-top:13px} #companiesView #portfolioPicker .scene-ledger {height:108px;width:84px;padding:10px;gap:8px} #companiesView #portfolioPicker .scene-folder {height:72px;width:144px;bottom:8px;padding:13px} #companiesView #portfolioPicker .scene-label {padding:6px 9px} #companiesView #portfolioPicker .label-one {top:12px} #companiesView #portfolioPicker .label-two {top:10px} #companiesView #portfolioPicker .label-three {top:-4px} } @media(min-width:1000px) and (max-height:600px) { #companiesView #portfolioPicker {margin-block:8px;gap:12px} #companiesView #portfolioPicker .portfolio-heading {gap:40px} #companiesView #portfolioPicker h1 {font-size:44px;margin-bottom:15px} #companiesView #portfolioPicker .portfolio-eyebrow {margin-bottom:12px;font-size:10px} #companiesView #portfolioPicker .portfolio-access {margin-top:18px} #companiesView #portfolioPicker .portfolio-entry {min-height:80px;padding-block:11px} #companiesView #portfolioPicker .showcase-art {height:104px} #companiesView #portfolioPicker .scene-paper {height:96px;width:80px;padding:9px;gap:4px} #companiesView #portfolioPicker .scene-paper small {font-size:7px} #companiesView #portfolioPicker .showcase-copy {min-height:65px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:17px} #companiesView #portfolioPicker .showcase-playback {font-size:7px} #companiesView #portfolioPicker .scene-ledger {height:94px;padding:9px;gap:6px} #companiesView #portfolioPicker .scene-folder {height:58px;width:132px;bottom:0} #companiesView #portfolioPicker .scene-folder b {font-size:9px} #companiesView #portfolioPicker .scene-label {padding:5px 7px;font-size:8px} } @media(max-width:999px) { #companiesView #portfolioPicker .portfolio-heading {gap:32px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} #companiesView #portfolioPicker h1 {font-size:45px} #companiesView #portfolioPicker .scene-paper {width:92px;height:124px} #companiesView #portfolioPicker .showcase-art {gap:12px} #companiesView #portfolioPicker .scene-transfer {width:30px} #companiesView #portfolioPicker .showcase-panels {padding-inline:16px} } @media(max-width:760px) { #companiesView #portfolioPicker {gap:24px;margin:18px auto 26px} #companiesView #portfolioPicker .portfolio-heading {grid-template-columns:1fr;gap:32px;padding:0} #companiesView #portfolioPicker .home-intro-copy {padding:0} #companiesView #portfolioPicker h1 {font-size:clamp(43px,11vw,58px)} #companiesView #portfolioPicker .portfolio-heading .home-intro-copy > p {font-size:13px} #companiesView #portfolioPicker .portfolio-date {max-width:125px;text-align:right;font-size:9px;line-height:1.5} #companiesView #portfolioPicker .portfolio-access {margin-top:24px;max-width:none} #companiesView #portfolioPicker .portfolio-entry {padding:16px;min-height:90px;grid-template-columns:40px minmax(0,1fr) 70px;gap:6px 10px} #companiesView #portfolioPicker .portfolio-avatar {width:40px;height:40px} #companiesView #portfolioPicker .portfolio-entry-info strong {font-size:17px} #companiesView #portfolioPicker .home-showcase {transform:none;border-radius:16px} #companiesView #portfolioPicker .showcase-art {height:170px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:19px} #companiesView #portfolioPicker .showcase-top {padding-inline:15px} #companiesView #portfolioPicker .portfolio-home-summary {margin-top:14px} #companiesView #portfolioPicker .showcase-aura {inset:-15px 0 0} } @media(prefers-reduced-motion:reduce) { #companiesView #portfolioPicker *,#companiesView #portfolioPicker *::before,#companiesView #portfolioPicker *::after {animation:none!important;transition:none!important} #companiesView #portfolioPicker .home-showcase {transform:none} #companiesView #portfolioPicker .showcase-pause {display:none} #companiesView #portfolioPicker .portfolio-entry::after {display:none} #companiesView #portfolioPicker .showcase-step[aria-pressed=true] > i::after {transform:scaleX(1)} #companiesView #portfolioPicker .paper-check path,#companiesView #portfolioPicker .scene-balance path,#companiesView #portfolioPicker .scene-folder path {stroke-dasharray:none} } /* A clearer, level showcase with readable headings and compact stage controls. */ #companiesView #portfolioPicker .home-showcase,#companiesView #portfolioPicker .home-showcase:hover {transform:none} #companiesView #portfolioPicker .showcase-top {height:48px;padding-inline:22px;gap:10px;background:transparent} #companiesView #portfolioPicker .showcase-window-dots {display:none} #companiesView #portfolioPicker .showcase-title {font-size:12px;line-height:1.4;font-weight:550;letter-spacing:-.1px;color:var(--home-ink)} #companiesView #portfolioPicker .showcase-mark {font-size:9px;letter-spacing:0;color:var(--home-muted);padding:4px 7px;border:1px solid var(--home-line);border-radius:6px} #companiesView #portfolioPicker .showcase-panels {padding:12px 24px 10px} #companiesView #portfolioPicker .showcase-art {height:175px} #companiesView #portfolioPicker .showcase-copy {min-height:96px} #companiesView #portfolioPicker .scene-index {font-size:8px;letter-spacing:1.2px;margin-bottom:7px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:20px;margin-bottom:8px;line-height:1.3} #companiesView #portfolioPicker .showcase-copy p {font-size:12px;line-height:1.75;max-width:42ch} #companiesView #portfolioPicker .showcase-steps {gap:3px;margin:0 14px 10px;padding:4px;border:0;border-radius:11px;background:var(--home-soft)} #companiesView #portfolioPicker .home-showcase .showcase-step {min-height:40px;padding:10px 6px;gap:5px;font-size:11px;border-radius:8px;transition:background-color .2s,color .2s,box-shadow .2s} #companiesView #portfolioPicker .home-showcase .showcase-step[aria-pressed=true] {background:var(--home-paper);color:var(--home-blue);box-shadow:0 2px 7px #2d4d760a} #companiesView #portfolioPicker .showcase-step > i {bottom:3px;left:13px;right:13px;height:1.5px} #companiesView #portfolioPicker .showcase-playback {padding:5px 17px;border-top:1px solid var(--home-line);font-size:9px;line-height:1.5;color:var(--home-muted)} #companiesView #portfolioPicker .home-showcase .showcase-pause {min-height:30px;padding:5px 7px;font-size:10px} html[data-theme=dark] #companiesView #portfolioPicker .showcase-top {background:transparent} html[data-theme=dark] #companiesView #portfolioPicker .showcase-steps {background:#11161e} html[data-theme=dark] #companiesView #portfolioPicker .home-showcase .showcase-step[aria-pressed=true] {background:#27364c!important;box-shadow:none!important} @media(min-width:1000px) and (max-height:760px) { #companiesView #portfolioPicker .showcase-top {height:40px;padding-inline:20px} #companiesView #portfolioPicker .showcase-panels {padding:9px 20px 5px} #companiesView #portfolioPicker .showcase-art {height:126px} #companiesView #portfolioPicker .showcase-copy {min-height:82px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:18px;margin-bottom:6px} #companiesView #portfolioPicker .showcase-copy p {font-size:11px;line-height:1.65} #companiesView #portfolioPicker .showcase-steps {margin:0 11px 8px} #companiesView #portfolioPicker .home-showcase .showcase-step {min-height:36px;padding-block:8px;font-size:10px} #companiesView #portfolioPicker .showcase-playback {padding-block:3px;font-size:8px} #companiesView #portfolioPicker .home-showcase .showcase-pause {min-height:26px;font-size:9px} } @media(min-width:1000px) and (max-height:600px) { #companiesView #portfolioPicker .showcase-top {height:36px} #companiesView #portfolioPicker .showcase-art {height:102px} #companiesView #portfolioPicker .showcase-copy {min-height:77px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:17px} #companiesView #portfolioPicker .showcase-playback {font-size:7px} } @media(max-width:760px) { #companiesView #portfolioPicker .showcase-top {padding-inline:17px;height:44px} #companiesView #portfolioPicker .showcase-panels {padding-inline:18px} #companiesView #portfolioPicker .showcase-art {height:164px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:19px} #companiesView #portfolioPicker .showcase-playback {padding-inline:12px;font-size:8px} } /* Keep the whole welcome alive, including a scene held for reading. */ #companiesView #portfolioPicker .showcase-aura::before {content:"";position:absolute;inset:15% 8% 8%;border:1px solid #8eb4eb35;border-radius:42% 58% 61% 39% / 54% 43% 57% 46%;pointer-events:none} #companiesView #portfolioPicker .showcase-aura i {background:radial-gradient(ellipse,#b1cff959,transparent 70%)} #companiesView #portfolioPicker .showcase-aura i+i {background:radial-gradient(ellipse,#c0daf975,transparent 70%)} #companiesView #portfolioPicker .scene-ledger {position:relative;overflow:hidden} #companiesView #portfolioPicker .scene-ledger::after {content:"";position:absolute;left:12px;right:12px;top:34px;height:1px;background:#7ba8e8;box-shadow:0 0 6px #7ba8e840;opacity:0;pointer-events:none} #companiesView #portfolioPicker .portfolio-avatar {position:relative} #companiesView #portfolioPicker .portfolio-avatar::after {content:"";position:absolute;inset:-3px;border:1px solid #c8e0ff24;border-radius:12px;opacity:0;pointer-events:none} @keyframes welcomeAmbientMove {0%,100%{background-position:0% 0%,100% 100%}50%{background-position:100% 60%,0% 40%}} @keyframes welcomeContour {0%,100%{transform:rotate(-14deg) scale(.96);opacity:.45}50%{transform:rotate(16deg) scale(1.04);opacity:.9}} @keyframes welcomeTitleLight {0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} @keyframes welcomeBrandFloat {0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -2px;rotate:-3deg}} @keyframes welcomeGridCell {0%,100%{opacity:.45;scale:.94}45%,65%{opacity:1;scale:1}} @keyframes welcomeLedgerRows {0%,100%{scale:.86 1;opacity:.6}45%,65%{scale:1 1;opacity:1}} @keyframes welcomeLedgerScan {0%,8%{opacity:0;translate:0 0}20%{opacity:.7}75%{opacity:.5;translate:0 52px}90%,100%{opacity:0;translate:0 52px}} @keyframes welcomeBalancePulse {0%,100%{box-shadow:0 0 0 6px #9ac6af0b;scale:1}50%{box-shadow:0 0 0 12px #9ac6af00;scale:1.04}} @keyframes welcomeCheckLoop {0%,8%{stroke-dashoffset:25;opacity:.4}42%,80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.45}} @keyframes welcomeFolderBob {0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @keyframes welcomeAvatarHalo {0%,100%{opacity:0;scale:.97}50%{opacity:.6;scale:1.04}} @media(prefers-reduced-motion:no-preference) { #companiesView #portfolioPicker .showcase-aura::before {animation:welcomeContour 14s ease-in-out infinite} #companiesView #portfolioPicker .brand-mark img {animation:welcomeBrandFloat 5s ease-in-out infinite} #companiesView #portfolioPicker h1 em {color:transparent;background:linear-gradient(110deg,var(--home-blue) 15%,#759ce0 50%,var(--home-blue) 85%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;animation:welcomeTitleLight 7s ease-in-out infinite} #companiesView #portfolioPicker .paper-mini-grid i {animation:welcomeGridCell 3.4s ease-in-out infinite} #companiesView #portfolioPicker .paper-mini-grid i:nth-child(2) {animation-delay:.25s} #companiesView #portfolioPicker .paper-mini-grid i:nth-child(3) {animation-delay:.5s} #companiesView #portfolioPicker .paper-mini-grid i:nth-child(4) {animation-delay:.75s} #companiesView #portfolioPicker .paper-mini-grid i:nth-child(5) {animation-delay:1s} #companiesView #portfolioPicker .paper-mini-grid i:nth-child(6) {animation-delay:1.25s} #companiesView #portfolioPicker .scene-ledger i {animation:welcomeLedgerRows 3.6s ease-in-out infinite} #companiesView #portfolioPicker .scene-ledger i:nth-of-type(2) {animation-delay:.25s} #companiesView #portfolioPicker .scene-ledger i:nth-of-type(3) {animation-delay:.5s} #companiesView #portfolioPicker .scene-ledger i:nth-of-type(4) {animation-delay:.75s} #companiesView #portfolioPicker .scene-ledger::after {animation:welcomeLedgerScan 3.6s ease-in-out infinite} #companiesView #portfolioPicker .ledger-right::after {animation-delay:.45s} #companiesView #portfolioPicker .scene-balance {animation:welcomeBalancePulse 3.6s ease-in-out infinite} #companiesView #portfolioPicker .paper-check path,#companiesView #portfolioPicker .scene-balance path,#companiesView #portfolioPicker .scene-folder path {animation:welcomeCheckLoop 3.8s ease-in-out infinite} #companiesView #portfolioPicker .scene-folder {animation:welcomeFolderBob 4.6s ease-in-out infinite} #companiesView #portfolioPicker .portfolio-avatar::after {animation:welcomeAvatarHalo 5s ease-in-out infinite} } #companiesView #portfolioPicker .showcase-wrap:has(.home-showcase[data-art-motion=paused]) .showcase-aura, #companiesView #portfolioPicker .showcase-wrap:has(.home-showcase[data-art-motion=paused]) .showcase-aura *, #companiesView #portfolioPicker .showcase-wrap:has(.home-showcase[data-art-motion=paused]) .showcase-aura::before {animation-play-state:paused} html[data-theme=dark] #companiesView #portfolioPicker .showcase-aura::before {border-color:#7399d024!important} html[data-theme=dark] #companiesView #portfolioPicker .showcase-aura i {background:radial-gradient(ellipse,#4c74ae2b,transparent 70%)} html[data-theme=dark] #companiesView #portfolioPicker .showcase-aura i+i {background:radial-gradient(ellipse,#36557933,transparent 70%)} @media(prefers-reduced-motion:reduce) { #companiesView #portfolioPicker .scene-ledger::after,#companiesView #portfolioPicker .portfolio-avatar::after {display:none} #companiesView #portfolioPicker .paper-check path,#companiesView #portfolioPicker .scene-balance path,#companiesView #portfolioPicker .scene-folder path {stroke-dasharray:none} } /* Clean backdrop: the page itself is the background, with no large painted halo. */ #companiesView #portfolioPicker .portfolio-heading, html[data-theme=dark] #companiesView #portfolioPicker .portfolio-heading {background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important} #companiesView #portfolioPicker .portfolio-heading::before, #companiesView #portfolioPicker .portfolio-heading::after, #companiesView #portfolioPicker .showcase-aura, #companiesView #portfolioPicker .showcase-wrap::before, #companiesView #portfolioPicker .showcase-wrap::after, #companiesView #portfolioPicker .showcase-art::before {display:none!important} #companiesView #portfolioPicker .showcase-panel .showcase-copy {animation:none!important;opacity:1!important;transform:none!important} #companiesView #portfolioPicker .portfolio-avatar::after {display:none} html[data-theme=dark] #companiesView #portfolioPicker {--home-ink:#e9edf4;--home-muted:#a1abb9;--home-blue:#91b5ee;--home-line:#282d35;--home-paper:#111316;--home-soft:#171b22} html[data-theme=dark] #companiesView #portfolioPicker .home-showcase {background:#111316;border-color:#2b313b;box-shadow:0 8px 24px #00000018} html[data-theme=dark] #companiesView #portfolioPicker .showcase-top {background:#111316} html[data-theme=dark] #companiesView #portfolioPicker .showcase-copy h2 {color:#e9edf4} html[data-theme=dark] #companiesView #portfolioPicker .showcase-copy p {color:#a1abb9!important} html[data-theme=dark] #companiesView #portfolioPicker .scene-index {color:#91a8c8} html[data-theme=dark] #companiesView #portfolioPicker .scene-paper, html[data-theme=dark] #companiesView #portfolioPicker .scene-ledger, html[data-theme=dark] #companiesView #portfolioPicker .scene-label {background:#1b2431;border-color:#35465d;box-shadow:0 7px 16px #0000000d} html[data-theme=dark] #companiesView #portfolioPicker .scene-model {background:linear-gradient(145deg,#202e42,#192330)} html[data-theme=dark] #companiesView #portfolioPicker .paper-format, html[data-theme=dark] #companiesView #portfolioPicker .scene-ledger b {color:#9aafcb} html[data-theme=dark] #companiesView #portfolioPicker .scene-paper small {color:#9caec7!important} html[data-theme=dark] #companiesView #portfolioPicker .scene-label {color:#a0b6d4} html[data-theme=dark] #companiesView #portfolioPicker .paper-mini-grid i {background:#345273} html[data-theme=dark] #companiesView #portfolioPicker .paper-mini-grid i:nth-child(even) {background:#293f5b} html[data-theme=dark] #companiesView #portfolioPicker .scene-ledger i {background:linear-gradient(90deg,#3b577b 65%,#25354c 65%)} html[data-theme=dark] #companiesView #portfolioPicker .paper-check, html[data-theme=dark] #companiesView #portfolioPicker .scene-balance {background:#1d3028;border-color:#111316} html[data-theme=dark] #companiesView #portfolioPicker .paper-check path, html[data-theme=dark] #companiesView #portfolioPicker .scene-balance path {stroke:#a0c5b0} html[data-theme=dark] #companiesView #portfolioPicker .scene-folder {background:linear-gradient(145deg,#29415e,#1d3048);border-color:#435f80} html[data-theme=dark] #companiesView #portfolioPicker .scene-folder > i {background:#29415e;border-color:#435f80} html[data-theme=dark] #companiesView #portfolioPicker .showcase-steps {background:#0b0d10} html[data-theme=dark] #companiesView #portfolioPicker .home-showcase .showcase-step[aria-pressed=true] {background:#1e2b3e!important;color:#bdd2f0!important} html[data-theme=dark] #companiesView #portfolioPicker .home-showcase .showcase-step:hover, html[data-theme=dark] #companiesView #portfolioPicker .home-showcase .showcase-pause:hover {background:#1a2330!important} html[data-theme=dark] #companiesView #portfolioPicker .showcase-playback {background:#101215;color:#9ba6b6} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-entry {background:linear-gradient(110deg,#151d29,#1d2c41)!important;border-color:#334964!important;box-shadow:0 5px 16px #0000000d} html[data-theme=dark] #companiesView #portfolioPicker .portfolio-entry:hover {background:linear-gradient(110deg,#1a2534,#22344d)!important;border-color:#4b688e!important} @keyframes showcaseArtArrive {from{transform:translateY(7px) scale(.985)}to{transform:none}} @keyframes showcasePaperSway {0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-10deg) translateY(-7px)}} @keyframes showcaseModelSway {0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(8deg) translateY(-8px)}} @media(prefers-reduced-motion:no-preference) { #companiesView #portfolioPicker .showcase-panel:not([hidden]) .showcase-art {animation:showcaseArtArrive .45s cubic-bezier(.16,1,.3,1) both} #companiesView #portfolioPicker .showcase-panel:not([hidden]) .scene-source {animation:showcasePaperSway 4.8s ease-in-out infinite} #companiesView #portfolioPicker .showcase-panel:not([hidden]) .scene-model {animation:showcaseModelSway 4.8s -.8s ease-in-out infinite} } /* An open composition: no frame, painted panels or boxed stage navigation. */ #companiesView #portfolioPicker .home-showcase, html[data-theme=dark] #companiesView #portfolioPicker .home-showcase {overflow:visible;border:0!important;border-radius:0;background:transparent!important;background-image:none!important;box-shadow:none!important;transform:none} #companiesView #portfolioPicker .showcase-top, html[data-theme=dark] #companiesView #portfolioPicker .showcase-top {height:38px;padding:0;border:0!important;background:transparent!important} #companiesView #portfolioPicker .showcase-title {font-size:13px;font-weight:550;letter-spacing:-.15px} #companiesView #portfolioPicker .showcase-mark {padding:0;border:0!important;border-radius:0;background:transparent;color:var(--home-muted);font-size:9px} #companiesView #portfolioPicker .showcase-panels {padding:7px 0 5px} #companiesView #portfolioPicker .showcase-copy {min-height:92px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:21px;line-height:1.35} #companiesView #portfolioPicker .showcase-copy p {max-width:39ch} #companiesView #portfolioPicker .showcase-steps, html[data-theme=dark] #companiesView #portfolioPicker .showcase-steps {gap:14px;margin:0;padding:0;border:0!important;border-radius:0;background:transparent!important;box-shadow:none} #companiesView #portfolioPicker .home-showcase .showcase-step {min-height:40px;padding:9px 0 11px;border-radius:0;font-size:11px;gap:6px;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--home-muted)} #companiesView #portfolioPicker .home-showcase .showcase-step[aria-pressed=true] {background:transparent!important;box-shadow:none!important;color:var(--home-blue);font-weight:600} #companiesView #portfolioPicker .home-showcase .showcase-step[aria-pressed=true] > span {color:var(--home-blue)} #companiesView #portfolioPicker .showcase-step > i {bottom:0;left:0;right:0;height:2px;border-radius:2px;background:#c6d4e52e} #companiesView #portfolioPicker .showcase-step > i::after {background:#739bd7} #companiesView #portfolioPicker .showcase-playback, html[data-theme=dark] #companiesView #portfolioPicker .showcase-playback {padding:9px 0 0;border:0!important;background:transparent!important;font-size:9px} #companiesView #portfolioPicker .home-showcase .showcase-pause {padding-inline:0;background:transparent!important;border:0!important;box-shadow:none!important;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s} #companiesView #portfolioPicker .home-showcase .showcase-pause:hover {text-decoration-color:currentColor;background:transparent!important} #companiesView #portfolioPicker .portfolio-home-summary {margin:17px 0 0;padding:0;border:0;background:transparent} html[data-theme=dark] .app-shell #companiesView #portfolioPicker .home-showcase .showcase-step, html[data-theme=dark] .app-shell #companiesView #portfolioPicker .home-showcase .showcase-step[aria-pressed=true], html[data-theme=dark] .app-shell #companiesView #portfolioPicker .home-showcase .showcase-step:hover, html[data-theme=dark] .app-shell #companiesView #portfolioPicker .home-showcase .showcase-pause:hover {background:transparent!important;border:0!important;box-shadow:none!important} html[data-theme=dark] .app-shell #companiesView #portfolioPicker .home-showcase .showcase-step {color:#92a1b6!important} html[data-theme=dark] .app-shell #companiesView #portfolioPicker .home-showcase .showcase-step[aria-pressed=true] {color:#b7cef0!important} html[data-theme=dark] #companiesView #portfolioPicker .showcase-step > i {background:#51678324} @media(hover:hover) and (pointer:fine) { #companiesView #portfolioPicker .home-showcase .showcase-step:hover {color:var(--home-blue)} html[data-theme=dark] .app-shell #companiesView #portfolioPicker .home-showcase .showcase-step:hover {color:#c0d4ef!important} } @media(min-width:1000px) and (max-height:760px) { #companiesView #portfolioPicker .showcase-top {height:32px} #companiesView #portfolioPicker .showcase-panels {padding:4px 0 3px} #companiesView #portfolioPicker .showcase-copy {min-height:80px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:19px} #companiesView #portfolioPicker .showcase-steps {gap:12px;margin:0;padding:0} #companiesView #portfolioPicker .home-showcase .showcase-step {min-height:36px;padding:8px 0 10px;font-size:10px} #companiesView #portfolioPicker .showcase-playback {padding:6px 0 0} #companiesView #portfolioPicker .portfolio-home-summary {margin-top:12px} } @media(min-width:1000px) and (max-height:600px) { #companiesView #portfolioPicker .showcase-copy {min-height:75px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:18px} } @media(max-width:760px) { #companiesView #portfolioPicker .showcase-top {padding:0} #companiesView #portfolioPicker .showcase-panels {padding-inline:0} #companiesView #portfolioPicker .showcase-copy h2 {font-size:20px} #companiesView #portfolioPicker .showcase-steps {gap:10px} #companiesView #portfolioPicker .showcase-playback {padding-inline:0} } /* Keep the wallet and its totals together; readable controls on an open canvas. */ #companiesView #portfolioPicker {--home-muted:#586b80} html[data-theme=dark] #companiesView #portfolioPicker {--home-muted:#a1abb9} #companiesView #portfolioPicker .portfolio-access-heading {flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px} #companiesView #portfolioPicker .portfolio-access-kicker {font-size:9px;letter-spacing:1.15px} #companiesView #portfolioPicker .portfolio-section-title {font-size:14px} #companiesView #portfolioPicker .portfolio-access .portfolio-home-summary {display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 24px;margin:14px 0 0} #companiesView #portfolioPicker .portfolio-home-summary > span+span {justify-content:flex-start} #companiesView #portfolioPicker .portfolio-home-summary strong {font-size:16px} #companiesView #portfolioPicker .portfolio-home-summary :is(.home-stat-label,#portfolioWalletLabel) {font-size:11px} #companiesView #portfolioPicker .showcase-mark {font-size:11px} #companiesView #portfolioPicker .scene-index {font-size:10px;letter-spacing:1.1px;color:var(--home-muted)} #companiesView #portfolioPicker .showcase-copy p {font-size:13px;line-height:1.7} #companiesView #portfolioPicker .home-showcase .showcase-step {font-size:12px} #companiesView #portfolioPicker .home-showcase .showcase-step > span {font-size:10px;opacity:1} #companiesView #portfolioPicker .showcase-playback {font-size:11px} #companiesView #portfolioPicker .home-showcase .showcase-pause {font-size:11px;min-height:30px;color:var(--home-muted)} #companiesView #portfolioPicker .home-showcase .showcase-step:focus-visible, #companiesView #portfolioPicker .home-showcase .showcase-pause:focus-visible {outline:2px solid var(--home-blue);outline-offset:4px} @media(min-width:1000px) and (min-height:761px) { #companiesView #portfolioPicker .portfolio-heading {min-height:clamp(440px,calc(100svh - 260px),640px);padding-top:0} } @media(min-width:1000px) and (max-height:760px) { #companiesView #portfolioPicker .portfolio-access {margin-top:22px} #companiesView #portfolioPicker .portfolio-access-heading {gap:3px;margin-bottom:9px!important} #companiesView #portfolioPicker .portfolio-access .portfolio-home-summary {margin-top:10px} #companiesView #portfolioPicker .showcase-copy p {font-size:12px} #companiesView #portfolioPicker .home-showcase .showcase-step {font-size:11px} #companiesView #portfolioPicker .showcase-playback, #companiesView #portfolioPicker .home-showcase .showcase-pause {font-size:10px} } @media(max-width:760px) { #companiesView #portfolioPicker .portfolio-access {max-width:100%} #companiesView #portfolioPicker .showcase-copy {min-height:100px} } /* One calm, centered composition: illustration, outcome, then navigation. */ #companiesView #portfolioPicker .home-showcase {max-width:470px;margin-inline:auto} #companiesView #portfolioPicker .showcase-top {justify-content:center;height:auto;min-height:30px;margin-bottom:0} #companiesView #portfolioPicker .showcase-title {font-size:17px;font-weight:550;letter-spacing:-.25px;color:var(--home-ink)} #companiesView #portfolioPicker .showcase-panels {padding:0} #companiesView #portfolioPicker .showcase-art {height:155px;gap:22px} #companiesView #portfolioPicker .showcase-copy {min-height:84px;padding:0;text-align:center} #companiesView #portfolioPicker .scene-index {display:none} #companiesView #portfolioPicker .showcase-copy h2 {font-size:23px;line-height:1.3;letter-spacing:-.5px;margin:0 0 9px} #companiesView #portfolioPicker .showcase-copy p {font-size:13px;line-height:1.7;max-width:40ch;margin:0 auto} #companiesView #portfolioPicker .showcase-steps {gap:0;margin:6px 0 0} #companiesView #portfolioPicker .home-showcase .showcase-step {justify-content:center;min-height:46px;padding:10px 3px 14px;font-size:13px;gap:7px} #companiesView #portfolioPicker .home-showcase .showcase-step > span {font-size:11px;color:var(--home-muted)} #companiesView #portfolioPicker .showcase-step > i {height:2px;left:10px;right:10px;background:var(--home-line)} #companiesView #portfolioPicker .showcase-playback {padding:7px 10px 0;font-size:11px} #companiesView #portfolioPicker .scene-transfer {position:relative;width:50px} #companiesView #portfolioPicker .scene-transfer svg path {animation:none;stroke-dasharray:none;stroke:#7c9ec8;opacity:.8} #companiesView #portfolioPicker .scene-transfer::after {content:"";position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--home-blue)} #companiesView #portfolioPicker .scene-balance path, #companiesView #portfolioPicker .paper-check path {stroke-dasharray:none;animation:none} #companiesView #portfolioPicker .scene-paper {border-color:#c0d0e3} #companiesView #portfolioPicker .scene-paper small {color:#536e91} #companiesView #portfolioPicker .scene-ledger b {color:#59789f} @keyframes workflowSignal {0%{translate:0 0;opacity:0}15%,75%{opacity:1}100%{translate:43px 0;opacity:0}} @media(prefers-reduced-motion:no-preference) { #companiesView #portfolioPicker .scene-transfer::after {animation:workflowSignal 2.6s ease-in-out infinite} } #companiesView #portfolioPicker .home-showcase[data-art-motion=paused] .scene-transfer::after {animation-play-state:paused} @media(prefers-reduced-motion:reduce) { #companiesView #portfolioPicker .scene-transfer::after {display:none} } @media(min-width:1000px) and (max-height:760px) { #companiesView #portfolioPicker .showcase-top {min-height:26px;margin-bottom:3px} #companiesView #portfolioPicker .showcase-art {height:135px} #companiesView #portfolioPicker .showcase-copy {min-height:80px;padding-top:3px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:20px} #companiesView #portfolioPicker .showcase-copy p {font-size:12px} #companiesView #portfolioPicker .showcase-steps {margin-top:4px} #companiesView #portfolioPicker .showcase-playback {padding-top:7px} } @media(min-width:1000px) and (max-height:600px) { #companiesView #portfolioPicker .showcase-art {height:104px} #companiesView #portfolioPicker .showcase-copy {min-height:88px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:18px} } @media(max-width:760px) { #companiesView #portfolioPicker .home-showcase {width:100%} #companiesView #portfolioPicker .showcase-art {height:155px;gap:16px} #companiesView #portfolioPicker .showcase-copy {min-height:96px} #companiesView #portfolioPicker .showcase-copy h2 {font-size:20px} #companiesView #portfolioPicker .home-showcase .showcase-step {font-size:12px;gap:5px} } /* Balance the headline with the compact product walkthrough. */ #companiesView #portfolioPicker h1 {font-size:clamp(42px,4.2vw,56px);line-height:1.08} @media(min-width:1000px) and (max-height:760px) { #companiesView #portfolioPicker h1 {font-size:48px} } @media(min-width:1000px) and (max-height:600px) { #companiesView #portfolioPicker h1 {font-size:42px} } @media(max-width:760px) { #companiesView #portfolioPicker h1 {font-size:clamp(36px,8.5vw,48px)} } /* One header and a balanced working entrance, scoped to the home only. */ .home-header-brand,.home-header-date {display:none} .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) .home-header-brand {display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0;color:var(--text,#1c3048)} .home-header-brand img {display:block;object-fit:contain;border-radius:9px;flex:none;transition:transform .25s} .home-header-brand strong {display:block;font-size:20px;letter-spacing:-.6px;line-height:1.2} .home-header-brand small {display:block;font-size:8px;line-height:1.4;letter-spacing:.6px;color:var(--muted,#586b80)} .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) .topbar-title {display:none} .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) .home-header-date {display:block;margin-right:12px;font-size:11px;text-transform:capitalize;color:var(--muted,#586b80)} #companiesView #portfolioPicker {margin:0 auto;gap:0} #companiesView #portfolioPicker .portfolio-heading {min-height:0;padding:24px 0;gap:clamp(32px,4vw,56px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #companiesView #portfolioPicker .home-intro-copy {padding:0} #companiesView #portfolioPicker .portfolio-access {max-width:460px;margin-top:26px} #companiesView #portfolioPicker .portfolio-entry {min-height:100px;padding:19px 21px;grid-template-columns:48px minmax(0,1fr) 92px;gap:6px 15px;border-color:#587eaa;box-shadow:0 8px 28px #18324d12} #companiesView #portfolioPicker .portfolio-avatar {width:48px;height:48px} #companiesView #portfolioPicker .portfolio-entry-info strong {font-size:20px} #companiesView #portfolioPicker .portfolio-entry-action {font-size:12px} #companiesView #portfolioPicker .portfolio-entry-action > span:first-child {font-size:12px} #companiesView #portfolioPicker:has(#portfolioList > .portfolio-entry:only-child) .portfolio-home-summary {display:none} #companiesView #portfolioPicker .home-showcase {max-width:500px;width:100%} #companiesView #portfolioPicker .showcase-art {height:180px;gap:24px} #companiesView #portfolioPicker .scene-paper {width:102px;height:132px;padding:12px;gap:8px} #companiesView #portfolioPicker .scene-ledger {width:98px;height:128px;padding:13px;gap:10px} #companiesView #portfolioPicker .showcase-copy {min-height:88px} #companiesView #portfolioPicker .showcase-copy p {font-size:13px;max-width:36ch} html[data-theme=dark] #companiesView #portfolioPicker {--home-muted:#b2bdcc} @media(min-width:1000px) { .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) main #companiesView.active {min-height:calc(100svh - 104px);display:grid;align-items:center} #companiesView #portfolioPicker .portfolio-heading {padding:24px 0 48px} } @media(min-width:1000px) and (max-height:640px) { .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) main #companiesView.active {min-height:calc(100svh - 90px)} #companiesView #portfolioPicker .portfolio-heading {padding:18px 0 28px} #companiesView #portfolioPicker .showcase-art {height:135px} #companiesView #portfolioPicker .scene-paper {width:88px;height:112px;padding:10px;gap:6px} #companiesView #portfolioPicker .scene-ledger {width:84px;height:108px;padding:10px;gap:8px} #companiesView #portfolioPicker .portfolio-entry {min-height:90px;padding:14px 18px} } @media(max-width:760px) { .app-shell:has(#companiesView.active #portfolioPicker:not([hidden])) .home-header-date {display:none} .home-header-brand small {display:none} .home-header-brand strong {font-size:18px} .home-header-brand img {width:28px;height:28px} #companiesView #portfolioPicker .portfolio-heading {grid-template-columns:minmax(0,1fr);gap:38px;padding:24px 0 32px} #companiesView #portfolioPicker .portfolio-access {max-width:none} #companiesView #portfolioPicker .portfolio-entry {grid-template-columns:40px minmax(0,1fr) 70px;padding:16px;gap:6px 10px} #companiesView #portfolioPicker .portfolio-avatar {width:40px;height:40px} #companiesView #portfolioPicker .portfolio-entry-info strong {font-size:18px} #companiesView #portfolioPicker .showcase-art {height:160px;gap:16px} } @media(hover:hover) and (prefers-reduced-motion:no-preference) { .home-header-brand:hover img {transform:rotate(-6deg)} } /* assets/css/global-tool-preparation.css */ /* Preparation panels only: result tables retain their full width. */ :is(#converterView,#ledgerView) > .page-head {max-width:1000px;margin-inline:auto} :is(#converterView,#ledgerView) > .global-tool-preparation {display:grid;grid-template-columns:minmax(0,1fr);gap:20px;width:100%;max-width:1000px;margin:0 auto 24px;padding:24px 28px;border:1px solid #dce5ef;border-radius:16px;background:#fff;box-shadow:0 4px 20px #263e5704;box-sizing:border-box} :is(#converterView,#ledgerView) .global-tool-intro {position:static;min-height:0;margin:0;padding:0 0 18px;border:0;border-bottom:1px solid #e7edf4;border-radius:0;background:transparent;box-shadow:none} :is(#converterView,#ledgerView) .global-tool-intro h3 {margin:0 0 7px;font-size:18px;letter-spacing:-.35px;color:var(--text)} :is(#converterView,#ledgerView) .global-tool-intro p {max-width:none;margin:0;font-size:12px;line-height:1.7;color:var(--muted)} :is(#globalConverterForm,#ledgerForm) {display:grid;grid-template-columns:minmax(0,1fr);gap:20px;min-width:0;width:100%;margin:0;padding:0;border:0;background:transparent;box-shadow:none} :is(#converterView,#ledgerView) .global-upload-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start} :is(#converterView,#ledgerView) .global-upload-field {display:grid;gap:9px;min-width:0} :is(#converterView,#ledgerView) .global-upload-field > label {display:block;margin:0;font-size:12px;font-weight:600;color:var(--text)} :is(#converterView,#ledgerView) .global-upload-field .file-drop-shell {display:grid;align-content:center;justify-items:center;gap:12px;min-width:0;min-height:132px;width:100%;padding:20px 16px;border:1px dashed #aebfd4;border-radius:12px;background:#f8fafd;box-sizing:border-box} :is(#globalConverterForm,#ledgerForm) input[type=file] {display:block;width:100%;max-width:460px;min-width:0;min-height:44px;margin:0;justify-self:center;padding:8px!important;border:0!important;background:transparent!important;font-size:12px;box-sizing:border-box} :is(#globalConverterForm,#ledgerForm) input[type=file]::file-selector-button {margin-right:12px;padding:9px 13px;border:1px solid #cbd9e8;border-radius:8px;background:#fff;color:#35587c;font:inherit;font-weight:600;cursor:pointer} :is(#converterView,#ledgerView) .file-drop-hint {justify-content:center;text-align:center;font-size:11px;line-height:1.6;max-width:46ch} :is(#converterView,#ledgerView) .file-selection {justify-self:stretch;width:100%;box-sizing:border-box;text-align:left} :is(#converterView,#ledgerView) .global-tool-controls {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding-top:18px;border-top:1px solid #e7edf4} :is(#converterView,#ledgerView) .global-tool-controls .standard-period-card {min-width:0;width:100%;max-width:480px;grid-column:1;grid-row:1;margin:0;padding:12px 14px;border:1px solid #dce5ef;border-radius:10px;background:#fafcfe;box-sizing:border-box} :is(#converterView,#ledgerView) .global-tool-controls legend {font-size:12px;font-weight:600} :is(#converterView,#ledgerView) .global-tool-controls legend span {font-size:11px;font-weight:400;color:var(--muted)} :is(#converterView,#ledgerView) .global-tool-controls .period-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} :is(#converterView,#ledgerView) .global-tool-controls .period-fields > div {display:grid;gap:6px;min-width:0} :is(#converterView,#ledgerView) .global-tool-controls input[type=date] {width:100%;min-width:0;min-height:42px;box-sizing:border-box;border:1px solid #ccd9e7;border-radius:8px;background:#fff;padding:9px 10px;font-size:12px;color:var(--text)} :is(#converterView,#ledgerView) .global-tool-controls .standard-period-card p {margin:9px 0 0;font-size:11px;line-height:1.5;color:var(--muted)} :is(#converterView,#ledgerView) .global-tool-action {display:grid;grid-column:2;grid-row:1;min-width:220px;align-self:end} :is(#converterView,#ledgerView) .global-tool-action > button[type=submit] {width:100%;min-height:44px;margin:0;padding:12px 20px;border:1px solid #2864d7;border-radius:9px;background:#2864d7;color:#fff;font-size:12px;font-weight:600;cursor:pointer} :is(#converterView,#ledgerView) .global-tool-action > button[type=submit]:hover:not(:disabled) {background:#2157bd} :is(#globalConverterForm,#ledgerForm) > .helper {margin:0;font-size:12px;line-height:1.6} :is(#globalConverterForm,#ledgerForm) > .helper:empty {display:none} html[data-theme=dark] :is(#converterView,#ledgerView) .global-tool-intro {background:transparent!important;border-color:#303030!important} html[data-theme=dark] :is(#converterView,#ledgerView) .global-tool-controls {border-color:#303030!important} html[data-theme=dark] .app-shell :is(#converterView,#ledgerView) .global-upload-field .file-drop-shell {background:transparent!important;border-color:#454545!important;box-shadow:none!important} html[data-theme=dark] .app-shell :is(#converterView,#ledgerView) .global-upload-field .file-drop-shell:hover {background:transparent!important;border-color:#7198ce!important} html[data-theme=dark] .app-shell :is(#globalConverterForm,#ledgerForm) input[type=file] {background:transparent!important;border:0!important;box-shadow:none!important} @media(max-width:760px) { :is(#converterView,#ledgerView) > .global-tool-preparation {padding:20px;gap:18px;border-radius:13px} :is(#converterView,#ledgerView) .global-upload-grid {grid-template-columns:minmax(0,1fr);gap:18px} :is(#converterView,#ledgerView) .global-upload-field .file-drop-shell {min-height:116px;padding:16px 12px} :is(#converterView,#ledgerView) .global-tool-controls {grid-template-columns:minmax(0,1fr);gap:18px} :is(#converterView,#ledgerView) .global-tool-controls .standard-period-card {grid-column:1;grid-row:auto;max-width:none} :is(#converterView,#ledgerView) .global-tool-action {grid-column:1;grid-row:auto;min-width:0;width:100%} } html[data-theme=dark] :is(#globalConverterForm,#ledgerForm) input[type=file]::file-selector-button {background:#252525;color:#e2e2e2;border-color:#505050}