/* Monet Business Overview. Keep the banking surface calm, legible and tactile. */
body:has(#page-overview.active) { background:#f3f5ef; }
body:has(#page-overview.active)::before { display:none; }
body:has(#page-overview.active) .topbar { background:#f3f5eff2; box-shadow:none; border-bottom:1px solid #e2e7df; }
body:has(#page-overview.active) .sidebar { background:linear-gradient(165deg,#163e32,#112d25 70%); box-shadow:none; }
#page-overview { --ov-ink:#20382b; --ov-muted:#718073; --ov-line:#e5eae1; width:min(calc(100% - 80px),1280px); padding-top:36px; color:var(--ov-ink); }
#page-overview [hidden] { display:none !important; }
#page-overview button:focus-visible,#page-overview a:focus-visible { outline:2px solid #428765; outline-offset:4px; }
#page-overview .overview-page-head { align-items:center; gap:20px; margin-bottom:29px; }
#page-overview .overview-eyebrow { display:block; margin-bottom:12px; color:#768274; font-size:9px; font-weight:700; letter-spacing:.16em; }
#page-overview .page-head h1 { margin-bottom:10px; font:500 clamp(27px,2.5vw,36px)/1.15 'DM Sans',sans-serif; letter-spacing:-1.3px; }
#page-overview .page-head p { color:#788174; font-size:12px; line-height:1.6; }
#page-overview .overview-date { align-self:flex-end; padding-bottom:5px; color:#7b8479; font-size:11px; white-space:nowrap; }
#page-overview .overview-hero-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr); gap:22px; margin-bottom:18px; }
#page-overview .overview-balance { position:relative; isolation:isolate; overflow:hidden; padding:27px 30px 0; border:1px solid #254b35; border-radius:24px; color:#fff; background:radial-gradient(ellipse at 100% 0,#40614390,transparent 70%),linear-gradient(125deg,#183d2e,#183a2b 65%,#214731); box-shadow:0 10px 24px #1b3e2610,inset 0 1px 0 #fff1; }
#page-overview .overview-balance-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:#d5dfcf; }
#page-overview .overview-currency { display:inline-flex; align-items:center; gap:7px; padding:6px 10px 6px 6px; border:1px solid #e4efdb28; border-radius:30px; background:#ffffff08; color:#edf5e4; font-size:10px; font-weight:600; }
#page-overview .overview-currency img { display:block; width:20px; height:20px; border-radius:50%; }
#page-overview #availableBalance { display:block; width:max-content; max-width:100%; margin:17px 0 6px; overflow-wrap:anywhere; font:500 clamp(40px,4.1vw,62px)/1.05 'DM Sans',sans-serif; letter-spacing:-2.5px; font-variant-numeric:tabular-nums; }
#page-overview .overview-balance-caption { color:#b0c3ae; font-size:10px; }
#page-overview .overview-balance-actions { display:flex; gap:9px; align-items:center; margin:25px 0 26px; }
#page-overview .button { min-height:41px; padding:0 16px; border:1px solid #dfe6d8; border-radius:30px; box-shadow:none; background:#fff; color:var(--ov-ink); font-size:11px; font-weight:600; backdrop-filter:none; }
#page-overview .button:hover { box-shadow:0 4px 12px #163e3210; transform:translateY(-1px); }
#page-overview .button svg,#page-overview .overview-wallet-link svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#page-overview .button.lime { background:#daefbd; border-color:#daefbd; color:#28432b; }
#page-overview .button.primary { background:#1d412f; border-color:#1d412f; color:#fff; }
#page-overview .overview-fund { background:#ffffff0a; border-color:#d2e0ca3b; color:#e7efdf; }
#page-overview .overview-wallet-link { display:grid; place-items:center; width:41px; height:41px; border:1px solid #d2e0ca3b; border-radius:50%; background:transparent; color:#e7efdf; cursor:pointer; }
#page-overview .overview-wallet-link:hover { background:#ffffff16; }
#page-overview .overview-balance-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:47px; border-top:1px solid #deebd21a; color:#adbfaa; font-size:9px; }
#page-overview .overview-balance-foot>span { display:flex; align-items:center; gap:7px; }
#page-overview .overview-balance-foot i { width:5px; height:5px; border-radius:50%; background:#b4d692; box-shadow:0 0 0 3px #b4d69212; }
#page-overview .overview-balance-foot button { padding:8px 0; border:0; background:transparent; color:#d2e6be; font-size:10px; cursor:pointer; }
#page-overview .overview-balance-foot button span { margin-left:7px; }
#page-overview .overview-orbit { position:absolute; z-index:-1; width:310px; height:310px; right:-69px; top:34px; transform:rotate(-25deg); opacity:.45; pointer-events:none; }
#page-overview .overview-orbit svg { width:100%; height:100%; overflow:visible; fill:none; stroke:#cbe6ad28; stroke-width:.65; }
#page-overview .overview-orbit .overview-orbit-route { stroke:#d5ebbc; stroke-width:1; stroke-dasharray:3 4; }
#page-overview .overview-orbit .overview-orbit-point { fill:#e1f1bc; stroke:#d5ebbc33; stroke-width:9; }
#page-overview .overview-pulse { padding:26px 25px 10px; border:1px solid #e2e7dd; border-radius:24px; background:#fafbf7; }
#page-overview .overview-pulse-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:9px; color:#697768; font-size:8px; font-weight:700; letter-spacing:.14em; }
#page-overview .overview-pulse-heading>span+span { color:#8a9385; font-size:9px; font-weight:400; letter-spacing:0; }
#page-overview .overview-stat { display:flex; align-items:center; gap:13px; min-width:0; min-height:76px; border-bottom:1px solid var(--ov-line); }
#page-overview .overview-stat:last-child { border-bottom:0; }
#page-overview .overview-stat-icon { display:grid; flex:0 0 33px; width:33px; height:33px; place-items:center; border:1px solid #e2e8da; border-radius:11px; background:#edf2e5; color:#638157; }
#page-overview .overview-stat-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#page-overview .overview-stat>div { min-width:0; }
#page-overview .overview-stat>div>span { font-size:11px; font-weight:500; }
#page-overview .overview-stat small { display:block; margin-top:5px; color:#7c8977; font-size:9px; line-height:1.4; }
#page-overview .overview-stat>strong { margin-left:auto; max-width:50%; overflow-wrap:anywhere; font:500 clamp(17px,1.7vw,23px)/1.15 'DM Sans',sans-serif; letter-spacing:-.65px; text-align:right; font-variant-numeric:tabular-nums; }
#page-overview .setup-banner { gap:12px; padding:13px 17px; margin-bottom:26px; border:1px solid #e0e7d7; border-radius:14px; background:#eaf0df; box-shadow:none; backdrop-filter:none; }
#page-overview .setup-banner.complete { border-color:#e4e9dd; background:#edf1e7; }
#page-overview .setup-icon { width:29px; height:29px; border-radius:50%; font:500 14px 'DM Sans',sans-serif; background:#dce8cd; color:#547244; }
#page-overview .setup-banner h2 { margin-bottom:3px; font:600 11px/1.4 'DM Sans',sans-serif; }
#page-overview .setup-banner p { color:#7b8774; font-size:9px; }
#page-overview .setup-banner .button { min-height:30px; padding:0 12px; border:1px solid #d6e0cc; background:transparent; color:#436338; font-size:9px; white-space:nowrap; }
#page-overview .overview-main-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr); gap:22px; margin-bottom:24px; }
#page-overview .panel { border:1px solid #e2e7dd; border-radius:22px; background:#fcfdf9; box-shadow:0 2px 3px #284b2910; backdrop-filter:none; }
#page-overview .overview-chart-card { margin:0; }
#page-overview .overview-chart-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:24px 25px 0; }
#page-overview h2 { margin:0; font:600 15px/1.3 'DM Sans',sans-serif; letter-spacing:-.2px; }
#page-overview .overview-chart-heading p { margin:5px 0 0; color:#899081; font-size:10px; }
#page-overview .overview-chart-ranges { gap:1px; padding:3px; border:1px solid #e8ecdf; border-radius:30px; background:#f2f5ed; box-shadow:none; }
#page-overview .overview-chart-range { min-width:32px; height:27px; padding:0 7px; border-radius:20px; color:#798571; font:500 9px 'DM Sans',sans-serif; }
#page-overview .overview-chart-range.active { background:#fff; color:#2b4b34; box-shadow:0 2px 6px #20432810; }
#page-overview .overview-chart-head { flex-direction:row; align-items:center; padding:20px 25px 4px; }
#page-overview .overview-chart-value strong { margin:0; font:500 30px/1.1 'DM Sans',sans-serif; letter-spacing:-1px; }
#page-overview .overview-chart-value small { margin-top:7px; font-size:9px; color:#7e8977; }
#page-overview .overview-chart-legend { color:#809075; font-size:9px; font-weight:400; }
#page-overview .overview-chart-legend::before { width:6px; height:6px; border-radius:50%; background:#5f975b; }
#page-overview .overview-chart-wrap { min-height:181px; height:181px; padding:0 16px 0; }
#page-overview #overviewMoneyChart { min-height:181px; height:181px; }
#page-overview .overview-chart-empty { padding:24px 28px 45px; text-align:center; color:#697e60; font-size:11px; }
#page-overview .overview-chart-empty>span { padding:13px 16px; border-radius:14px; background:#fcfdf9e6; }
#page-overview .overview-chart-empty small { display:block; margin-top:7px; color:#929c89; font-size:9px; }
#page-overview .overview-chart-foot { flex-direction:row; padding:13px 25px; background:transparent; border-color:var(--ov-line); color:#8c9683; font-size:8px; }
#page-overview .panel-head { min-height:82px; padding:22px 25px; border-color:var(--ov-line); background:transparent; }
#page-overview .panel-head p { margin-top:6px; font-size:10px; color:#85907d; }
#page-overview .overview-accounts { display:flex; flex-direction:column; }
#page-overview .overview-accounts .panel-head { border-bottom:0; padding-bottom:15px; }
#page-overview .overview-accounts .overview-eyebrow { margin-bottom:8px; font-size:8px; }
#page-overview .overview-account-heading-icon svg { width:22px; height:22px; fill:none; stroke:#a1b197; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
#page-overview #overviewAccountList { padding:0 24px; flex:1; }
#page-overview .overview-account-row { display:flex; align-items:center; gap:11px; width:100%; min-height:65px; padding:10px 0; border:0; border-bottom:1px solid var(--ov-line); background:none; text-align:left; cursor:pointer; }
#page-overview .overview-account-row:hover .overview-account-arrow { transform:translate(2px,-2px); color:#45623d; }
#page-overview .overview-account-row:last-child { border-bottom:0; }
#page-overview .overview-account-icon { display:grid; place-items:center; width:31px; height:31px; flex:0 0 31px; overflow:hidden; border:1px solid #e8eddf; border-radius:50%; background:#e8eedf; color:#677e56; font-size:10px; font-weight:600; }
#page-overview .overview-account-icon img { display:block; width:100%; height:100%; object-fit:cover; }
#page-overview .overview-account-row strong { display:block; font-size:12px; font-weight:600; }
#page-overview .overview-account-row small { display:block; margin-top:4px; color:#7f8b77; font-size:9px; }
#page-overview .overview-account-detail { max-width:100px; margin-left:auto; color:#789267; font-size:9px; text-align:right; overflow-wrap:anywhere; }
#page-overview .overview-account-arrow { margin-left:4px; color:#a4b098; font-size:15px; transition:transform .2s; }
#page-overview .overview-account-more { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:9px 24px 17px; padding:9px 0; border:0; background:transparent; color:#4b7140; text-align:left; font-size:10px; font-weight:600; cursor:pointer; }
#page-overview .overview-account-more span { font-size:16px; }
#page-overview .overview-verification { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 24px; border-top:1px solid var(--ov-line); color:#829178; font-size:8px; }
#page-overview .overview-verification b { color:#617c53; font-weight:500; }
#page-overview .overview-accounts-empty { padding:10px 0 17px; color:#7e8b75; font-size:11px; text-align:center; }
#page-overview .overview-empty-bank { display:grid; place-items:center; width:34px; height:34px; margin:0 auto 12px; border-radius:50%; background:#eef3e7; color:#729863; font-size:19px; }
#page-overview .overview-accounts-empty strong { display:block; color:#426138; font-size:13px; font-weight:500; }
#page-overview .overview-accounts-empty p { max-width:230px; margin:8px auto 14px; font-size:10px; line-height:1.6; }
#page-overview .overview-recent { margin-bottom:30px; }
#page-overview .button.small { min-height:32px; padding:0 12px; font-size:9px; }
#page-overview th { padding:12px 25px; background:#f6f8f1; color:#8a9481; font:500 8px 'DM Sans',sans-serif; letter-spacing:.07em; }
#page-overview td { padding:17px 25px; border-color:#e9ede3; color:#6f7b66; font-size:10px; }
#page-overview td strong { color:#354c2e; font-weight:500; font-size:11px; }
#page-overview td small { margin-top:5px; color:#939b8b; font-size:9px; }
#page-overview tbody tr:last-child td { border-bottom:0; }
#page-overview tbody tr:hover { background:#f3f7ed; }
#page-overview .status-pill { padding:5px 8px; font-size:8px; box-shadow:none; border:0; }
#page-overview .empty { padding:32px 22px; }
#page-overview .empty-icon { border:1px solid #e2e9d8; border-radius:50%; background:#f0f5e9; box-shadow:none; color:#7a9366; }
#page-overview .empty h3 { color:#516748; font:500 15px 'DM Sans',sans-serif; }
#page-overview .empty p { max-width:340px; font-size:11px; color:#87937e; }
#page-overview .overview-news { margin-bottom:30px; }
#page-overview .overview-news-head { align-items:center; margin-bottom:15px; padding:0; }
#page-overview .overview-news-head h2 { font:500 17px 'DM Sans',sans-serif; }
#page-overview .overview-news-head p { margin-top:6px; color:#8d9686; font-size:10px; }
#page-overview .overview-news-head>span { font-size:8px; color:#96a08c; font-weight:500; letter-spacing:.08em; }
#page-overview .overview-news-grid { gap:12px; }
#page-overview .overview-news-card { grid-template-columns:1fr; gap:13px; align-items:start; padding:10px 10px 15px; border:1px solid #e2e8d9; border-radius:17px; background:#fafbf6; box-shadow:none; backdrop-filter:none; }
#page-overview .overview-news-image { width:100%; height:106px; border-radius:10px; background:#e7eddf; color:#557347; }
#page-overview .overview-news-card>span+span { padding:0 4px; }
#page-overview .overview-news-card strong { color:#5e6e55; font-size:11px; line-height:1.6; -webkit-line-clamp:2; }
#page-overview .overview-news-card small { margin-top:9px; color:#929d86; font-size:9px; }
#page-overview .overview-news-card:hover { border-color:#c8d7bc; box-shadow:0 7px 15px #28462b08; }
#page-overview .overview-footer { display:flex; justify-content:space-between; align-items:center; gap:18px; padding-top:20px; border-top:1px solid #e2e8d9; font-size:9px; color:#8d9983; }
#page-overview .overview-footer>span:first-child { font-size:13px; font-weight:600; color:#647956; }
#page-overview .overview-footer a { color:#728866; }
#page-overview.active .overview-balance,#page-overview.active .overview-pulse,#page-overview.active .overview-main-grid { animation:overview-enter .45s ease-out both; }
#page-overview.active .overview-pulse { animation-delay:.04s; }
#page-overview.active .overview-main-grid { animation-delay:.08s; }
@keyframes overview-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1700px) { #page-overview { padding-top:44px; } #page-overview .overview-balance { padding:30px 34px 0; } #page-overview .overview-balance-actions { margin:28px 0; } #page-overview .overview-pulse { padding:28px 28px 15px; } #page-overview .overview-stat { min-height:82px; } }
@media(min-width:821px) and (max-width:1180px) { #page-overview { width:calc(100% - 48px); } #page-overview .overview-hero-grid,#page-overview .overview-main-grid { gap:16px; grid-template-columns:minmax(0,1.3fr) minmax(265px,1fr); } #page-overview .overview-balance { padding:23px 23px 0; } #page-overview .overview-pulse { padding:24px 18px 10px; } #page-overview .overview-stat { gap:9px; } #page-overview .overview-date { display:none; } #page-overview .overview-chart-heading { align-items:flex-start; } #page-overview .overview-chart-heading p { max-width:140px; line-height:1.6; } #page-overview .overview-chart-head { padding-top:15px; } #page-overview .overview-chart-legend { display:none; } #page-overview .overview-stat-icon { width:29px; height:29px; flex-basis:29px; } }
@media(max-width:980px) and (min-width:821px) { #page-overview .overview-hero-grid,#page-overview .overview-main-grid { grid-template-columns:1fr; } #page-overview .overview-pulse { padding:20px; } #page-overview .overview-pulse-heading { margin-bottom:3px; } #page-overview .overview-stat { min-height:64px; } }
@media(max-width:820px) { #page-overview { width:calc(100% - 40px); padding-top:28px; } #page-overview .overview-page-head { align-items:flex-start; } #page-overview .overview-date { display:none; } #page-overview .overview-hero-grid,#page-overview .overview-main-grid { grid-template-columns:1fr; gap:17px; } #page-overview .overview-pulse { padding:22px 25px 12px; } #page-overview .overview-stat { min-height:67px; } #page-overview .overview-stat>strong { font-size:23px; } #page-overview .overview-balance { padding:25px 27px 0; } #page-overview #availableBalance { font-size:54px; } #page-overview .overview-chart-heading { padding-top:22px; } #page-overview .overview-chart-wrap,#page-overview #overviewMoneyChart { height:200px; min-height:200px; } #page-overview .overview-news-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #page-overview .overview-footer>span:nth-child(2) { display:none; } }
@media(max-width:480px) { #page-overview { width:calc(100% - 28px); padding-top:25px; padding-bottom:35px; } #page-overview .overview-page-head { margin-bottom:22px; } #page-overview .overview-eyebrow { font-size:8px; letter-spacing:.13em; } #page-overview .page-head h1 { font-size:28px; letter-spacing:-1.1px; } #page-overview .page-head p { max-width:290px; font-size:11px; } #page-overview .overview-balance { padding:22px 22px 0; border-radius:22px; } #page-overview #availableBalance { font-size:49px; } #page-overview .overview-balance-top { font-size:11px; } #page-overview .overview-orbit { right:-130px; opacity:.3; } #page-overview .overview-balance-caption { font-size:9px; } #page-overview .overview-balance-actions { gap:7px; margin:25px 0; } #page-overview .overview-balance-actions .button { padding:0 13px; font-size:10px; } #page-overview .overview-balance-foot { font-size:8px; } #page-overview .overview-balance-foot button { font-size:9px; } #page-overview .overview-pulse { padding:22px 20px 10px; } #page-overview .overview-stat { min-height:67px; } #page-overview .setup-banner { grid-template-columns:auto 1fr; gap:9px; padding:13px 15px; } #page-overview .setup-banner .button { grid-column:2; justify-self:start; } #page-overview .setup-banner p { line-height:1.6; } #page-overview .overview-chart-heading { padding:22px 20px 0; gap:10px; } #page-overview .overview-chart-heading h2 { font-size:14px; } #page-overview .overview-chart-heading p { max-width:160px; line-height:1.5; font-size:9px; } #page-overview .overview-chart-range { min-width:27px; height:27px; font-size:8px; padding:0 5px; } #page-overview .overview-chart-head { padding:18px 20px 0; } #page-overview .overview-chart-value strong { font-size:29px; } #page-overview .overview-chart-legend { display:none; } #page-overview .overview-chart-value small { max-width:250px; font-size:8px; } #page-overview .overview-chart-empty { font-size:10px; } #page-overview .overview-chart-foot { padding:13px 20px; } #page-overview .panel-head { padding:21px 20px; } #page-overview .overview-recent .panel-head { gap:8px; } #page-overview .overview-recent .panel-head h2 { font-size:14px; } #page-overview .overview-recent .panel-head p { max-width:165px; font-size:9px; line-height:1.5; } #page-overview .overview-recent .button { padding:0 10px; white-space:nowrap; font-size:8px; } #page-overview th,#page-overview td { padding:13px 14px; } #page-overview td strong { font-size:10px; } #page-overview .overview-news-head>span { display:none; } #page-overview .overview-news-head p { font-size:9px; } #page-overview .overview-news-card { padding:8px 8px 12px; gap:10px; border-radius:15px; } #page-overview .overview-news-image { height:91px; } #page-overview .overview-news-card strong { font-size:10px; } #page-overview .overview-news-card small { font-size:8px; } }
@media(max-width:360px) { #page-overview .overview-wallet-link { display:none; } #page-overview .overview-balance-actions .button { flex:1; white-space:nowrap; padding:0 10px; } #page-overview .overview-balance-foot { gap:8px; font-size:7px; } #page-overview .overview-balance-foot button { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { #page-overview *,#page-overview *::before,#page-overview *::after { animation:none !important; transition:none !important; } }