@import "/ui.css";
@import "/d/home.css";

html,body{height:100%}
#app{height:100dvh; display:flex; overflow:hidden}

.sidebar{width:240px; flex:none; box-sizing:border-box; background:color-mix(in srgb, var(--card) 97%, var(--bg)); border-right:1px solid var(--line);
  padding:22px 14px 18px; display:flex; flex-direction:column; gap:4px; overflow-y:auto}
.sidebar .brand{display:flex; align-items:center; gap:8px; padding:0 10px 18px; color:var(--fg); text-decoration:none; font-size:20px; font-weight:700; letter-spacing:-0.3px}
.sidebar .brand-mark{width:28px; height:28px; border-radius:8px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; flex:none}
.nav-item{display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:10px; color:var(--fg); text-decoration:none; font-size:14px; font-weight:500}
.nav-item svg{color:var(--muted2); flex:none}
.nav-item.on{background:var(--fill); font-weight:600}
.nav-item.on svg{color:var(--accent)}
.nav-badge{margin-left:auto; background:var(--accent); color:var(--on-accent); border-radius:999px; min-width:20px; height:20px; padding:0 6px; box-sizing:border-box; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center}

.main{flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden}
.topbar{display:flex; align-items:center; gap:16px; padding:20px 28px 14px; flex:none}
.topbar-title{display:flex; flex-direction:column; gap:2px; flex:0 1 auto; min-width:0}
.topbar-title a{color:var(--muted); text-decoration:none; font-size:13px}
.topbar-title h1{font-size:28px; line-height:1.25; padding-bottom:2px; font-weight:700; letter-spacing:-.5px; white-space:nowrap; max-width:360px; overflow:hidden; text-overflow:ellipsis}
.month-switch{display:flex; align-items:center; background:var(--fill); border-radius:12px; padding:3px; flex:none}
.month-switch button{border:0; background:none; width:32px; height:32px; font-size:18px}
.month-switch button[disabled]{color:var(--chev)}
.month-switch span{font-size:14px; font-weight:600; padding:0 8px; white-space:nowrap}
.sync-btn2{border:0; background:var(--fill); border-radius:999px; height:38px; padding:0 14px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:6px; flex:none}
.sync-btn2 > span{display:inline-flex}
.sync-btn2 svg{display:block}
.sync-btn2 .spinning{animation:spin 1s linear infinite}
.sync-btn2[disabled]{opacity:.5}

.topsearch{position:relative; flex:1 1 200px; min-width:0; max-width:460px; margin-left:auto}
.topbar .offline-pill{flex:none; white-space:nowrap}

.content{flex:1; overflow-y:auto; padding:0 28px 24px; display:flex; flex-direction:column; gap:16px}
.kpi{background:var(--card); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:2px}
.kpi .k-label{font-size:12px; color:var(--muted); font-weight:600}
.kpi .k-val{font-size:22px; font-weight:700; letter-spacing:-.3px}
.kpi .k-sub{font-size:12px; color:var(--muted2)}

.chart-card{background:var(--card); border-radius:20px; padding:16px 18px 12px; display:flex; flex-direction:column; gap:8px; min-width:0}
.chart-head{display:flex; justify-content:space-between; align-items:center}
.panel-card{background:var(--card); border-radius:20px; padding:8px 18px 10px}
.panel-card-head{display:flex; justify-content:space-between; align-items:center; padding:8px 0 4px}
.list-row{display:flex; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; width:100%; text-align:left; background:none; border-left:0; border-right:0; border-top:0}
.list-row:last-child{border-bottom:0}
.list-row.selected{background:var(--fill); border-radius:10px}
.list-row .lr-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.list-row .lr-line{display:flex; justify-content:space-between; font-size:14px}

table.d-table{width:100%; border-collapse:collapse; font-size:14px}
table.d-table th{text-align:left; font-size:12px; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line)}
table.d-table td{padding:8px; border-bottom:1px solid var(--line); vertical-align:middle}
table.d-table tr.group-row td{padding:12px 8px 4px; font-size:12px; font-weight:600; color:var(--muted); border-bottom:0; text-transform:uppercase}
table.d-table tbody tr.data-row{cursor:pointer}
table.d-table tbody tr.data-row:hover,table.d-table tbody tr.data-row:focus-visible{background:var(--fill)}
table.d-table tbody tr.data-row.selected{background:var(--fill)}
table.d-table td.amt{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.d-table .link-btn{white-space:nowrap}
table.d-table td.amt .orig{font-size:12px; color:var(--muted2); font-weight:400}
.cell-merchant{display:flex; align-items:center; gap:10px; min-width:0}
.cell-merchant .cm-name{font-weight:500}
.cell-merchant .cm-sub{font-size:12px; color:var(--muted2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px}
.faded-row{opacity:.5}


.list-with-panel{display:flex; gap:16px; flex:1; min-height:0}
.list-with-panel .list-col{flex:1; min-width:0; overflow-y:auto; background:var(--card); border-radius:20px; padding:8px 18px}
aside.detail-panel{width:390px; box-sizing:border-box; flex:none; background:var(--card); border-radius:20px; padding:20px; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:14px}
aside.detail-panel input,aside.detail-panel select,aside.detail-panel .dir-group,aside.detail-panel .apply-to{width:100%; box-sizing:border-box}
.panel-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.panel-close{width:28px; height:28px; border-radius:14px; background:var(--fill); display:flex; align-items:center; justify-content:center; flex:none}
.panel-section{display:flex; flex-direction:column; gap:6px}
.apply-to{display:flex; background:var(--fill); border-radius:10px; padding:3px}
.apply-to button{flex:1; border:0; background:none; padding:8px 0; font-size:13px; border-radius:8px}
.apply-to button.on{background:var(--card); font-weight:600}
.field{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); min-width:0}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; min-width:0}
.field-grid .field{gap:4px}
.limit-fields{row-gap:12px}
.dir-group{display:flex; width:100%; box-sizing:border-box; background:var(--fill); border-radius:10px; padding:3px}
.dir-group button{flex:1; min-width:0; border:0; background:none; padding:6px 0; font-size:13px; border-radius:8px}
.dir-group button.on{background:var(--card); font-weight:600}
.override-row{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:13px}
.override-row:last-child{border-bottom:0}
.suggest-chips button{background:var(--fill)}

.rules-tabs{display:flex; flex-wrap:wrap; min-width:0; background:var(--fill); border-radius:10px; padding:3px}
.rules-tabs button{flex:none; white-space:nowrap; border:0; background:none; padding:8px 14px; font-size:14px; border-radius:8px}
.rules-tabs button.on{background:var(--card); font-weight:600}
.rules-tabs button.advanced{margin-left:7px; position:relative}
.rules-tabs button.advanced::before{content:""; position:absolute; left:-4px; top:8px; bottom:8px; border-left:1px solid var(--line)}
.rules-tabs .count{font-size:12px; font-weight:500; color:var(--muted); margin-left:2px}
.rules-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:var(--card); border-radius:var(--r); padding:12px var(--s4)}
.rules-actions{display:flex; gap:12px; flex:1 0 auto; justify-content:flex-end}
.rules-actions input{width:200px}
.rules-actions .secondary-btn{width:auto; padding:0 16px; white-space:nowrap}
.list-col > .hint{margin:12px 8px 4px}
table.d-table .narrow{width:1%; white-space:nowrap; padding-left:24px}
table.d-table th.amt{text-align:right}

.bank-card{background:var(--card); border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:10px}
.bank-card-head{display:flex; justify-content:space-between; align-items:center}
.acct-input{border:0; border-radius:0; background:none; padding:2px 0; font-size:14px; width:100%}

@media(max-width:1100px){
  .sidebar{width:212px; padding:18px 10px}
  .nav-item{white-space:nowrap}
  .topbar{flex-wrap:wrap; row-gap:10px; padding:16px 20px 12px}
  .topbar-title{margin-right:auto}
  .topsearch{order:5; flex-basis:100%; max-width:none; margin-left:0}
  .content{padding:0 20px 20px}
}
@media(max-width:960px){
  .list-with-panel{flex-direction:column}
  aside.detail-panel{width:auto}
}
.list-row > .bullet{flex:1; min-width:0; margin:0}
.status-pill{white-space:nowrap}
.ring + div > .status-pill{white-space:normal; border-radius:14px}
.panel-card-head a{color:var(--accent); text-decoration:none; font-size:14px}
aside.detail-panel .ask-opt input{width:auto}
.list-with-panel .list-col:has(> .chat){background:none; border-radius:0; padding:0 var(--s4)}
.ask-desk{display:flex; gap:16px; flex:1; min-height:0}
.ask-desk > .chats{width:280px; flex:none; overflow-y:auto}
.ask-main{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column}
aside.detail-panel .sheet-field-card,aside.detail-panel .list-card{background:var(--fill)}
aside.detail-panel .check-row{display:flex; justify-content:space-between; align-items:center}
aside.detail-panel .check-row input{width:auto}

.sec-card{background:var(--card); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:10px}
.sec-card.tight{gap:0}
.sec-card h2{font-size:22px; font-weight:700}
.sec-card .sec-desc{margin:0}
.sec-card .sec-form > .sec-label:first-child{margin-top:4px}
.sec-card-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px}
.sec-card-head .muted{font-size:13px}
.topbar-right{margin-left:auto; font-size:14px; color:var(--muted)}
.topbar-right b{color:var(--fg); font-weight:600}
.sec-card .sec-form{gap:10px}
.sec-primary.sm{height:36px; padding:0 14px; font-size:14px}
dialog.privacy{border:0; padding:0; margin:0; width:100vw; height:100vh; max-width:none; max-height:none; background:transparent; color:var(--fg); cursor:pointer}
dialog.privacy[open]{display:grid; place-items:center}
dialog.privacy::backdrop{background:color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px)}
dialog.privacy span{background:var(--card); color:var(--muted); border-radius:999px; padding:10px 18px; font-size:15px; font-weight:600}
.spend-controls{justify-content:flex-start; gap:12px; flex-wrap:wrap; margin:12px 0 16px}
.spend-controls .spend-seg{flex:none}
.spend-controls .spend-seg button{padding:6px 14px}
.spend-controls label{display:flex; align-items:center; gap:6px; font-size:13px}
.spend-controls .spend-nav{margin-left:auto; gap:4px}
.spend-kpis{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:16px}
.spend-cols{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:start}
.spend-row{display:grid; grid-template-columns:minmax(130px,1fr) 76px 40px 72px 72px; gap:8px; align-items:center; width:100%; padding:10px 0; border:0; border-bottom:1px solid var(--line); background:none; text-align:right; font-size:14px}
.spend-row > :first-child{text-align:left}
.spend-row-head{font-size:12px; padding-top:4px}
@media (max-width:1100px){.spend-cols{grid-template-columns:1fr} .spend-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sidebar.fade-y{--fade-pad:22px; --fade-pad-b:18px; --fade-x:14px; --fade-gap:4px; --fade-bg:color-mix(in srgb, var(--card) 97%, var(--bg))}
.content.fade-y{--fade-gap:16px; --fade-pad-b:24px; --fade-x:28px}
aside.detail-panel.fade-y{--fade-gap:14px; --fade-pad:20px; --fade-x:20px}
.list-col > .secondary-btn{margin:12px 0}
.list-col.fade-y{--fade-pad:8px; --fade-x:18px}
@media(max-width:1100px){.sidebar.fade-y{--fade-pad:18px; --fade-x:10px} .content.fade-y{--fade-pad-b:20px; --fade-x:20px}}
.list-col.fade-y,aside.detail-panel.fade-y{--fade-bg:var(--card)}
.chats.fade-y{--fade-gap:var(--s3)}
.pay-scrim{position:fixed; inset:0; z-index:20; background:var(--scrim)}
html.drawer-open{overflow:hidden}
aside.pay-drawer{position:fixed; top:0; right:0; bottom:0; z-index:21; width:min(480px,100vw); box-sizing:border-box; padding:22px 24px 24px; overflow-y:auto; overscroll-behavior:contain; background:var(--bg);
  border-left:1px solid var(--line); box-shadow:-24px 0 48px rgb(0 0 0/.35)}
@media (prefers-color-scheme:dark){aside.pay-drawer{background:#1c1c1e; --card:#2c2c2e; --fill:#3a3a3c; --track:#48484a; --line:#48484a}}
.pay-drawer .pd-amount-big{font-size:30px; line-height:36px}
.pay-drawer .pd-ask > p{font-size:15px; line-height:20px}
.pay-drawer .pd-btns > button{min-height:44px; border-radius:12px; font-size:15px}
@media(max-width:1340px){
  .pay-drawer .pd-btns{flex-direction:column}
  .pay-drawer .pd-btns > button{flex:none; width:100%}
}
table.d-table tbody tr.data-row.selected td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.tx-row.selected{background:var(--fill); border-radius:10px}
.pay-count-row{align-items:flex-start; justify-content:space-between; gap:var(--s5)}
.pay-count{margin-top:12px}
.pay-count-row .in-card{flex:0 1 520px; min-width:0}
.pay-table th{height:44px; padding:0 8px}
.pay-table th.amt{text-align:right}
.pay-table .th-sort{display:inline-flex; align-items:center; gap:4px; min-height:44px; font-size:12px; font-weight:600; color:inherit}
.pay-table th[aria-sort=descending] .th-sort{color:var(--fg)}
.pay-table td{height:54px}
.pay-table .cm-text{min-width:0}
.pay-table .cm-line{display:flex; align-items:center; gap:6px; min-width:0}
.pay-table .cm-name{font-size:17px; line-height:22px}
.pay-table .cm-sub{max-width:none}
.pay-table .cm-fold{display:none}
.pay-table .col-account,.pay-table .col-date{color:var(--muted)}
.pay-table tr.data-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
@media(max-width:1100px){
  .pay-count-row{flex-direction:column; align-items:stretch; gap:var(--s2)}
  .pay-count{margin-top:0}
  .pay-count-row .in-card{flex:none}
  .pay-table .col-account,.pay-table .col-date{display:none}
  .pay-table .cm-fold{display:inline}
  .pay-table .cm-pending::after{content:" · "}
}

.topbar-back{display:flex; align-items:center; gap:2px; flex:none; max-width:180px; min-height:40px; padding:0 12px 0 8px; border-radius:12px; background:var(--fill); color:var(--fg); font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.spend-page{container-type:inline-size}
.spend-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start}
.spend-main,.spend-side{display:flex; flex-direction:column; gap:16px; min-width:0}
.spend-grid .sp-summary{padding:20px 24px 24px; border-radius:20px}
.spend-grid .sp-card{padding:8px 24px 12px; border-radius:20px}
.spend-grid .hm-big{font-size:56px; line-height:64px}
@container (min-width:1100px){
  .spend-grid{grid-template-columns:minmax(0,1fr) 380px}
  .spend-grid .sp-summary{display:grid; grid-template-columns:360px minmax(0,1fr); gap:32px; align-items:end}
  .spend-grid .sp-chart{border-top:0; padding-top:0}
}

.nav-settings{margin-top:auto}
.nav-item .warn-dot,.st-item .warn-dot{position:static; display:inline-block; margin-left:auto; border:0; width:8px; height:8px}
.st-desk{display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start}
.st-list{display:flex; flex-direction:column; gap:4px; position:sticky; top:0}
.st-item{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; color:var(--fg); text-decoration:none}
.st-item.on{background:var(--fill)}
.st-item-title{display:flex; align-items:center; font-weight:600}
.st-item-sum{font-size:13px; line-height:18px}
.st-list-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; padding:10px 12px; font-size:13px}
.st-list-foot .link-btn{white-space:nowrap}
.st-panel{display:flex; flex-direction:column; gap:16px; min-width:0}
.cx-desk,.su-desk{max-width:760px}
@media(max-width:1100px){
  .st-people{grid-template-columns:1fr}
  .cx-cols{grid-template-columns:1fr}
}