:root[data-appearance="bento"] {
  --green:#56edc5;
  --muted:#adbdc2;
  --line:#a6d5d92e;
  --surface:#1b292ee8;
  --raised:#2a3d44;
  --surface-border:#a6d5d93b;
  --surface-shadow:0 6px 18px #0003,inset 0 1px 0 #ffffff0a;
  --glass:rgba(27,41,46,.88);
  --bento-mint:#56edc5;
  --bento-cyan:#63c8ed;
  --bento-rose:#f394ac;
  --bento-gold:#eaca83;
  background:#10171b;
  color:#f0f5f6;
}
[data-appearance="bento"] body { background:#10171b; }
[data-appearance="bento"] .sidebar {
  background:rgba(23,36,42,.9);
  border-color:var(--surface-border);
  box-shadow:8px 0 30px #0002;
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
}
[data-appearance="bento"] .brand { font-size:20px; }
[data-appearance="bento"] .brand-mark { background:#56edc51f; border:1px solid #56edc552; color:var(--green); }
[data-appearance="bento"] .sidebar nav button { border:1px solid transparent; color:#b4c5cb; }
[data-appearance="bento"] .sidebar nav button.active { background:#56edc51a; border-color:#56edc542; color:#79f6d3; box-shadow:inset 3px 0 var(--green)!important; }
[data-appearance="bento"] main { max-width:1800px; }
[data-appearance="bento"] main > header { padding-bottom:22px; border-bottom:1px solid var(--line); }
[data-appearance="bento"] h1 { font-size:30px; }
[data-appearance="bento"] .eyebrow { color:#95b2bc; }
[data-appearance="bento"] button { border-color:var(--surface-border); }
[data-appearance="bento"] button:hover { background:#30464d; }
[data-appearance="bento"] .primary { background:#56edc5; border-color:#89ffdf; color:#082c25; box-shadow:0 3px 14px #56edc51a!important; }
[data-appearance="bento"] .primary:hover { background:#82f8d7; }
[data-appearance="bento"] .text-button:hover { background:#56edc512; }
[data-appearance="bento"] .icon-button, [data-appearance="bento"] .header-actions a { background:#a6d5d90c; border-color:var(--surface-border); }
[data-appearance="bento"] input, [data-appearance="bento"] select, [data-appearance="bento"] textarea { background:#101e25; border-color:#759ba855; }
[data-appearance="bento"] input:focus-visible, [data-appearance="bento"] select:focus-visible, [data-appearance="bento"] textarea:focus-visible { background:#152a31; }
[data-appearance="bento"] :is(button,a,input,select,textarea):focus-visible { outline-color:#8afbdd; }
[data-appearance="bento"] .overview-account-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:14px; }
[data-appearance="bento"] .overview-account-card, [data-appearance="bento"] .operation-account-card { position:relative; border:1px solid var(--account-color,#63c8ed66); background:linear-gradient(135deg,var(--account-tint,#1b3742),#1a2830 88%); box-shadow:var(--surface-shadow); }
[data-appearance="bento"] :is(.overview-account-card,.operation-account-card):nth-child(4n+1) { --account-color:#eb8da66b; --account-tint:#3c2937; }
[data-appearance="bento"] :is(.overview-account-card,.operation-account-card):nth-child(4n+2) { --account-color:#63c8ed6b; --account-tint:#203b4b; }
[data-appearance="bento"] :is(.overview-account-card,.operation-account-card):nth-child(4n+3) { --account-color:#bd9ee66b; --account-tint:#342e48; }
[data-appearance="bento"] :is(.overview-account-card,.operation-account-card):nth-child(4n+4) { --account-color:#56edc56b; --account-tint:#203f38; }
[data-appearance="bento"] .overview-account-card:hover, [data-appearance="bento"] .operation-account-card:hover { border-color:#b1eee9; }
[data-appearance="bento"] .operation-account-card[aria-expanded="true"] { border-color:var(--green); box-shadow:inset 3px 0 var(--green),var(--surface-shadow); }
[data-appearance="bento"] .overview-account-card strong { font-size:23px; }
[data-appearance="bento"] .overview-account-name { font-size:13px; }
[data-appearance="bento"] .overview-account-name > svg { background:#ffffff0d; border:1px solid #ffffff12; border-radius:50%; box-sizing:content-box; padding:4px; width:14px; height:14px; }
[data-appearance="bento"] .overview-dashboard[data-overview-style="accent"] .overview-accounts { border-left:0; padding-left:0; }
[data-appearance="bento"] .overview-dashboard[data-overview-layout="cockpit"] .overview-summary { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; }
[data-appearance="bento"] .overview-dashboard[data-overview-style="accent"] .overview-salary { padding:20px; border:1px solid #63c8ed66; border-left:3px solid var(--bento-cyan); border-radius:8px; background:var(--glass); box-shadow:var(--surface-shadow); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
[data-appearance="bento"] .salary-primary > strong { color:#effcfe; font-size:32px; }
[data-appearance="bento"] .salary-metrics { gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); }
[data-appearance="bento"] .salary-metric .salary-edit { min-height:44px; }
[data-appearance="bento"] .salary-received { background:transparent; }
[data-appearance="bento"] .overview-stats { gap:12px!important; }
[data-appearance="bento"] .overview-stat { border:1px solid #56edc54a; background:linear-gradient(135deg,#214139,#1a292e 90%); box-shadow:var(--surface-shadow); border-radius:8px; padding:18px; gap:5px; }
[data-appearance="bento"] .overview-stat:nth-child(2) { background:linear-gradient(135deg,#2c3548,#1b2931 90%); border-color:#93b6e25c; }
[data-appearance="bento"] .overview-stat:nth-child(3) { background:linear-gradient(135deg,#3c2937,#22282f 90%); border-color:#f394ac5c; }
[data-appearance="bento"] .overview-stat:nth-child(4) { background:linear-gradient(135deg,#3f3a28,#252b2b 90%); border-color:#eaca835c; }
[data-appearance="bento"] .overview-stat > strong { color:#f8fcfd; font-size:25px; }
.overview-stat > .overview-stat-icon { display:none; }
[data-appearance="bento"] .overview-stat > .overview-stat-icon { display:grid; place-items:center; width:34px; height:34px; margin-bottom:4px; border:1px solid #56edc52b; border-radius:8px; color:var(--bento-mint); background:#56edc514; }
[data-appearance="bento"] .overview-stat:nth-child(2) .overview-stat-icon { color:#9fc8ff; background:#93b6e214; border-color:#93b6e22b; }
[data-appearance="bento"] .overview-stat:nth-child(3) .overview-stat-icon { color:var(--bento-rose); background:#f394ac14; border-color:#f394ac2b; }
[data-appearance="bento"] .overview-stat:nth-child(4) .overview-stat-icon { color:var(--bento-gold); background:#eaca8314; border-color:#eaca832b; }
.overview-account-badge { display:none; }
[data-appearance="bento"] .overview-account-badge { position:absolute; top:16px; left:16px; display:grid; place-items:center; width:34px; height:34px; background:#ffffff0c; border:1px solid var(--account-color); border-radius:8px; color:#d5eef6; }
[data-appearance="bento"] .overview-account-name { min-height:34px; align-items:center; padding-left:44px; }
[data-appearance="bento"] .overview-dashboard[data-overview-layout="cockpit"] .overview-charts { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:16px; border-bottom:0; }
[data-appearance="bento"] .overview-dashboard[data-overview-style="accent"] .overview-charts > .overview-section { padding:18px; border:1px solid #bd9ee650; border-left:3px solid #bd9ee6; border-radius:8px; background:var(--glass); box-shadow:var(--surface-shadow); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
[data-appearance="bento"] .overview-dashboard[data-overview-style="accent"] .overview-charts > .overview-monthly-chart { border-color:#63c8ed50; border-left-color:var(--bento-cyan); }
[data-appearance="bento"] .overview-charts .section-heading h2 { font-size:16px; }
[data-appearance="bento"] .portfolio-chart-surface { background:#08161c50; border-radius:6px; }
[data-appearance="bento"] .portfolio-chart-controls { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; }
[data-appearance="bento"] .portfolio-chart-controls .field { width:auto; margin-bottom:0; }
[data-appearance="bento"] .portfolio-chart-controls select { font-size:12px; padding-inline:8px; }
[data-appearance="bento"] .portfolio-periods { gap:2px; }
[data-appearance="bento"] .portfolio-periods button { width:34px; min-height:36px; height:36px; font-size:12px; }
[data-appearance="bento"] .portfolio-evolution { padding:8px 0 4px; }
[data-appearance="bento"] .portfolio-chart-heading { min-height:86px; margin-top:18px; }
[data-appearance="bento"] .portfolio-chart-surface { height:250px; }
[data-appearance="bento"] .portfolio-periods { border-color:var(--line); background:#0c1b22; }
[data-appearance="bento"] .portfolio-periods button[aria-pressed="true"] { background:#56edc51f; color:#7df4d3; border-color:#56edc566; }
[data-appearance="bento"] .monthly-pie { max-width:220px; }
[data-appearance="bento"] .monthly-pie-hole { display:block; fill:#18292f; pointer-events:auto; }
[data-appearance="bento"] .monthly-pie-center { display:block; fill:#f0f5f6; font:600 16px 'Segoe UI',Arial,sans-serif; text-anchor:middle; pointer-events:none; }
[data-appearance="bento"] .monthly-pie-caption { display:block; fill:#adbdc2; font:11px 'Segoe UI',Arial,sans-serif; text-anchor:middle; pointer-events:none; }
.monthly-pie-hole, .monthly-pie-center, .monthly-pie-caption { display:none; }
[data-appearance="bento"] .monthly-pie-legend li { font-size:12px; }
[data-appearance="bento"] .monthly-pie-tooltip { background:#203b43; border:1px solid var(--line); }
[data-appearance="bento"] .monthly-pie-tooltip { min-height:40px; margin:0 0 8px; padding:8px; }
[data-appearance="bento"] .overview-dashboard > .overview-section { padding-top:10px; }
[data-appearance="bento"] .table-scroll { border-color:var(--surface-border); }
[data-appearance="bento"] th { background:#25383f; color:#c8dce1; }
[data-appearance="bento"] th:first-child, [data-appearance="bento"] td:first-child { background:#142229; }
[data-appearance="bento"] tfoot td, [data-appearance="bento"] tfoot td:first-child { background:#1f3b35; }
[data-appearance="bento"] .operation-toolbar, [data-appearance="bento"] .movement-toolbar { border-color:#a6d5d926; }
[data-appearance="bento"] .account-transactions { background:#142127; }
[data-appearance="bento"] .account-transactions .section-heading { background:#1d3038; }
[data-appearance="bento"] .transaction-icon { border:1px solid #63c8ed33; background:#63c8ed14; color:#8edafb; }
[data-appearance="bento"] .transaction-icon.credit { background:#56edc514; color:#79f6d3; border-color:#56edc533; }
[data-appearance="bento"] .tag { background:#56edc519; color:#8ef8d9; }
[data-appearance="bento"] .tag.pending { background:#eaca8319; color:#f4d89f; }
[data-appearance="bento"] .monthly-group-card { background:var(--glass); box-shadow:var(--surface-shadow); }
[data-appearance="bento"] .monthly-group-card[aria-expanded="true"] { background:#263f45; }
[data-appearance="bento"] .monthly-card-totals > span:last-child strong { color:#b7ced7; font-size:17px; }
[data-appearance="bento"] .monthly-card-totals > span:first-child strong { color:#f5fcfe; font-size:23px; }
[data-appearance="bento"] .stat, [data-appearance="bento"] .bank-card, [data-appearance="bento"] .draft-card { background:var(--glass); border-color:var(--surface-border); }
[data-appearance="bento"] dialog { background:rgba(23,36,43,.98); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
[data-appearance="bento"] .dialog-summary { background:#a6d5d910; }
[data-appearance="bento"] .notice { background:#203a47; color:#d1e8f2; }
[data-appearance="bento"] .notice.warning { background:#3a3224; color:#f6d89b; }
[data-appearance="bento"] .month-start-summary th, [data-appearance="bento"] .month-start-summary td { background:transparent; }
[data-appearance="bento"] .month-start-summary tr:nth-child(4), [data-appearance="bento"] .month-start-summary tr:last-child { background:#56edc514; }
[data-appearance="bento"] #toast { background:#b7f5df; color:#092b24; }
@media(min-width:1280px) {
  [data-appearance="bento"] .sidebar { inset:12px auto 12px 12px; width:220px; border:1px solid var(--surface-border); border-radius:8px; padding:24px 16px; }
  [data-appearance="bento"] main { margin-left:244px; padding:26px 28px; }
  [data-appearance="bento"] .sidebar nav { margin-top:30px; gap:4px; }
  [data-appearance="bento"] .sidebar nav button { padding:10px; font-size:13px; }
}
@media(max-width:1100px) {
  [data-appearance="bento"] .overview-dashboard[data-overview-layout="cockpit"] .overview-summary { grid-template-columns:1fr; }
}
@media(max-width:1000px) {
  [data-appearance="bento"] .overview-dashboard[data-overview-layout="cockpit"] .overview-charts { grid-template-columns:1fr; }
}
@media(max-width:640px) {
  [data-appearance="bento"] h1 { font-size:25px; }
  [data-appearance="bento"] main > header { margin-bottom:18px; padding-bottom:18px; }
  [data-appearance="bento"] .sidebar { background:rgba(17,32,38,.97); }
  [data-appearance="bento"] .sidebar nav button.active { box-shadow:inset 0 3px var(--green)!important; }
  [data-appearance="bento"] .overview-account-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(200px,70%); overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#56edc555 transparent; }
  [data-appearance="bento"] .overview-account-card { padding:16px; }
  [data-appearance="bento"] .overview-account-card { scroll-snap-align:start; }
  [data-appearance="bento"] .overview-dashboard[data-overview-style="accent"] .overview-salary { padding:16px; }
  [data-appearance="bento"] .overview-dashboard[data-overview-layout="cockpit"] .overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px!important; }
  [data-appearance="bento"] .overview-stat { padding:14px; }
  [data-appearance="bento"] .overview-stat > strong { font-size:20px; }
  [data-appearance="bento"] .overview-stat > span { font-size:11px; }
  [data-appearance="bento"] .overview-dashboard[data-overview-style="accent"] .overview-charts > .overview-section { padding:16px; }
  [data-appearance="bento"] .monthly-card-totals { gap:12px; }
  [data-appearance="bento"] .portfolio-chart-controls { grid-template-columns:minmax(0,1fr) auto; }
  [data-appearance="bento"] .portfolio-chart-controls .field { grid-column:1 / -1; }
  [data-appearance="bento"] .portfolio-periods button { width:38px; min-height:40px; }
  [data-appearance="bento"] .salary-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:380px) {
  [data-appearance="bento"] .overview-dashboard[data-overview-layout="cockpit"] .overview-stats { grid-template-columns:1fr; }
  [data-appearance="bento"] .salary-metrics { grid-template-columns:1fr; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  [data-appearance="bento"] { --glass:#1b292e; }
  [data-appearance="bento"] .sidebar, [data-appearance="bento"] dialog { background:#17242a; }
}
@media(prefers-reduced-transparency:reduce) {
  [data-appearance="bento"] { --glass:#1b292e; }
  [data-appearance="bento"] .sidebar, [data-appearance="bento"] dialog { background:#17242a; backdrop-filter:none; -webkit-backdrop-filter:none; }
}
