/* =========================================================
   CaSH-man Modern Elegant UI
   Layer final untuk tampilan modern dan elegan.
   File ini hanya mengubah tampilan, bukan logic aplikasi.
   ========================================================= */
:root{
  --bg:#edf2f7;
  --surface:#ffffff;
  --surface-soft:#f7fafc;
  --surface-muted:#eef4f8;
  --border:#d9e3ec;
  --border-strong:#bcc9d6;
  --text:#0c1725;
  --text-muted:#64748b;
  --text-subtle:#8b9aae;
  --primary:#082f49;
  --primary-hover:#061f32;
  --accent:#0f766e;
  --accent-soft:#dff7f4;
  --danger:#b42318;
  --danger-soft:#ffe4df;
  --warning:#b76e00;
  --warning-soft:#fff3d6;
  --info:#1d4ed8;
  --info-soft:#e4edff;
  --gold:#c59b45;
  --gold-soft:#fff5dc;
  --radius:22px;
  --radius-sm:14px;
  --shadow:0 18px 45px rgba(8,47,73,.08),0 2px 10px rgba(8,47,73,.05);
  --shadow-soft:0 10px 30px rgba(8,47,73,.06);
  --sidebar:292px;
}
html{background:linear-gradient(135deg,#e8f0f7 0%,#f8fbff 55%,#edf7f5 100%)}
body{
  background:
    radial-gradient(circle at 18% 10%,rgba(14,116,144,.13),transparent 28rem),
    radial-gradient(circle at 86% 18%,rgba(197,155,69,.12),transparent 26rem),
    linear-gradient(135deg,#eef4fa 0%,#fbfdff 52%,#edf6f4 100%);
  color:var(--text);
  font-size:14px;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.36;
  background-image:linear-gradient(rgba(8,47,73,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(8,47,73,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black 0%,transparent 78%);
}
button,input,select,textarea{font-family:'Inter','DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
::selection{background:rgba(15,118,110,.18)}

/* Shell */
.app-shell{position:relative;isolation:isolate}
.sidebar{
  width:var(--sidebar);
  margin:18px 0 18px 18px;
  height:calc(100vh - 36px);
  inset:0 auto 0 0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(8,47,73,.98),rgba(6,31,50,.98)),
    radial-gradient(circle at top left,rgba(255,255,255,.2),transparent 22rem);
  box-shadow:0 24px 70px rgba(8,47,73,.28);
}
.sidebar::before{
  content:"";
  position:absolute;
  inset:-110px -80px auto auto;
  width:260px;
  height:260px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(20,184,166,.22),transparent 68%);
}
.sidebar::after{
  content:"";
  position:absolute;
  inset:auto auto -100px -80px;
  width:240px;
  height:240px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(197,155,69,.18),transparent 68%);
}
.sidebar>*{position:relative;z-index:1}
.sidebar-brand{padding:24px 22px 18px;gap:14px}
.brand-mark,.brand-mark.small{
  border-radius:18px;
  background:linear-gradient(145deg,#ffffff,#d7e5ef);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 12px 30px rgba(0,0,0,.18);
}
.brand-mark.small{width:50px;height:50px}
.brand-mark img{border-radius:16px;padding:4px;object-fit:contain}
.sidebar-brand h2{color:#fff;font-size:25px;letter-spacing:-.04em}
.sidebar-brand .brand-copy{min-width:0}
.sidebar-brand span{color:rgba(226,240,248,.72);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:11px}
.sidebar-brand .brand-version{color:rgba(226,240,248,.76)!important;letter-spacing:.02em;text-transform:none}
.nav-list{padding:10px 16px 18px}
.nav-item{
  min-height:48px;
  margin:6px 0;
  padding:12px 14px;
  border:1px solid transparent;
  border-radius:16px;
  color:rgba(226,240,248,.74);
  font-weight:760;
  letter-spacing:-.01em;
}
.nav-item i{font-size:15px;color:rgba(226,240,248,.78)}
.nav-item:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.1);
  color:#fff;
}
.nav-item:hover i{color:#fff}
.nav-item.active{
  background:linear-gradient(135deg,#ffffff,#e8f4f8);
  color:#082f49;
  box-shadow:0 16px 36px rgba(0,0,0,.18);
}
.nav-item.active i{color:#0f766e}
.sidebar-footer{
  margin:0 16px 16px;
  padding:16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.session-name{color:#fff;font-size:13px;margin-bottom:8px}
.role-pill{background:rgba(20,184,166,.18);color:#bff8ef;border:1px solid rgba(20,184,166,.25)}
.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.main-panel{margin-left:calc(var(--sidebar) + 18px);padding:18px 18px 18px 0}
.page{padding:30px}
.topbar{
  margin:0 30px 18px;
  border:1px solid rgba(217,227,236,.82);
  border-radius:24px;
  background:rgba(255,255,255,.74);
  box-shadow:var(--shadow-soft);
}
.kicker{color:#0f766e}
.topbar h1{font-size:25px}

/* Controls */
.btn,.icon-btn,input,select,textarea{border-radius:14px}
.btn,.icon-btn{transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
.btn:hover,.icon-btn:hover{transform:translateY(-1px)}
.btn-primary{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(135deg,#0b3b5a,#082f49 55%,#061f32);
  color:#fff;
  box-shadow:0 14px 26px rgba(8,47,73,.22);
}
.btn-primary:hover{background:linear-gradient(135deg,#0d496d,#082f49 55%,#041827)}
.btn-secondary{
  background:rgba(255,255,255,.72);
  border-color:#d3dde8;
  color:#163044;
  box-shadow:0 8px 22px rgba(8,47,73,.05);
}
.btn-secondary:hover{background:#fff;border-color:#b8c8d7}
.icon-btn{background:#fff;border-color:#d9e3ec;color:#486174;box-shadow:0 8px 20px rgba(8,47,73,.05)}
input,select,textarea{
  border-color:#d8e2eb;
  background:rgba(255,255,255,.86);
  color:#0c1725;
}
input:focus,select:focus,textarea:focus{border-color:#0f766e;box-shadow:0 0 0 4px rgba(15,118,110,.13)}

/* Auth */
.auth-screen{
  padding:32px;
  background:
    radial-gradient(circle at 20% 10%,rgba(20,184,166,.16),transparent 28rem),
    radial-gradient(circle at 78% 12%,rgba(197,155,69,.17),transparent 24rem),
    linear-gradient(135deg,#071e2f 0%,#0b3b5a 44%,#eef5f7 44.2%,#f8fbff 100%);
}
.auth-layout{width:min(430px,100%);gap:18px}
.auth-brand{color:#fff;text-align:left;padding-left:8px}
.auth-logo{
  margin:0 0 16px;
  width:58px;
  height:58px;
  border-radius:20px;
  background:linear-gradient(145deg,#fff,#d9eaf1);
  color:#082f49;
  box-shadow:0 18px 44px rgba(0,0,0,.24);
}
.auth-brand h1{justify-content:flex-start;color:#fff;font-size:36px;letter-spacing:-.06em}
.auth-brand .brand-version{color:rgba(226,240,248,.82)!important}
.auth-brand p{color:rgba(226,240,248,.76);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.auth-panel{
  gap:19px;
  padding:32px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:30px;
  background:rgba(255,255,255,.86);
  box-shadow:0 26px 80px rgba(8,47,73,.22);
  backdrop-filter:blur(18px);
}
.auth-copy h2{font-size:27px;color:#082f49}
.auth-copy p{max-width:310px;color:#63788b;font-size:13px}
.auth-field{color:#486174;font-family:'Inter','DM Sans',sans-serif;font-size:11px;letter-spacing:.08em}
.auth-field input{height:48px;border-radius:16px;padding-left:42px;background:#fff}
.auth-field i{bottom:15px;color:#0f766e}
.auth-options button,.auth-sales button{color:#0f766e}
.auth-actions .btn{
  height:50px;
  border-radius:16px;
  background:linear-gradient(135deg,#0b3b5a,#082f49 54%,#061f32);
  box-shadow:0 16px 30px rgba(8,47,73,.26);
}
.auth-divider{background:#dce6ef}
.auth-footer{color:rgba(226,240,248,.7);text-align:left;padding-left:8px}
.auth-footer div{justify-content:flex-start;color:#bdeee7}

/* Dashboard */
#page-dashboard{padding:30px}
.dashboard-head{
  position:relative;
  overflow:hidden;
  align-items:center;
  min-height:188px;
  margin-bottom:24px;
  padding:30px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 85% 24%,rgba(20,184,166,.22),transparent 22rem),
    radial-gradient(circle at 62% 102%,rgba(197,155,69,.16),transparent 18rem),
    linear-gradient(135deg,#082f49,#0b3b5a 52%,#0f766e);
  box-shadow:0 25px 70px rgba(8,47,73,.22);
}
.dashboard-head::before{
  content:"";
  position:absolute;
  right:28%;
  top:-60px;
  width:200px;
  height:200px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
}
.dashboard-head::after{
  content:"Financial Control Center";
  position:absolute;
  right:30px;
  bottom:24px;
  color:rgba(255,255,255,.18);
  font-weight:900;
  font-size:58px;
  line-height:.8;
  letter-spacing:-.06em;
  max-width:520px;
  text-align:right;
}
.dashboard-head>*{position:relative;z-index:1}
.dashboard-head h2{color:#fff;font-size:42px;letter-spacing:-.06em}
.dashboard-head p{color:rgba(226,240,248,.78);font-weight:650}
.dashboard-actions .btn-secondary{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.dashboard-actions .btn-secondary:hover{background:rgba(255,255,255,.18)}
.dashboard-actions .btn-primary{background:#fff;color:#082f49;box-shadow:0 18px 34px rgba(0,0,0,.18)}
.dashboard-actions .btn-primary:hover{background:#ecf7f5;color:#061f32}
.dashboard-metrics{gap:18px;margin-bottom:24px}
.dashboard-metric{
  position:relative;
  overflow:hidden;
  min-height:174px;
  padding:22px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:26px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.dashboard-metric::after{
  content:"";
  position:absolute;
  right:-32px;
  top:-32px;
  width:110px;
  height:110px;
  border-radius:999px;
  background:rgba(15,118,110,.07);
}
.dashboard-metric span{font-family:'Inter','DM Sans',sans-serif;color:#64748b;font-weight:850;font-size:11px;letter-spacing:.08em}
.dashboard-metric strong{font-family:'Inter','DM Sans',sans-serif;color:#092033;font-size:25px;font-weight:850;letter-spacing:-.04em}
.dashboard-metric.balance{
  color:#fff;
  background:
    radial-gradient(circle at 80% 18%,rgba(255,255,255,.16),transparent 14rem),
    linear-gradient(145deg,#082f49,#061f32);
  border-color:rgba(255,255,255,.16);
}
.dashboard-metric.balance span,.dashboard-metric.balance small{color:rgba(226,240,248,.74)}
.dashboard-metric.balance strong{color:#fff;font-size:36px}
.dashboard-metric.balance::after{display:none}
.dashboard-metric.balance>i{border-radius:0;box-shadow:none;color:rgba(255,255,255,.18)}
.dashboard-metric>i{border-radius:17px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.dashboard-metric.income>i{background:#dff7f4;color:#0f766e}
.dashboard-metric.expense>i{background:#ffe4df;color:#b42318}
.dashboard-metric.dues>i{background:#e4edff;color:#1d4ed8}
.dues-progress{height:9px;border-radius:999px;background:#e6edf4;box-shadow:inset 0 1px 2px rgba(8,47,73,.08)}
.dues-progress span{background:linear-gradient(90deg,#0f766e,#14b8a6)}
.dashboard-grid{gap:20px;margin-bottom:24px}
.panel,.summary-box,.table-card,.dashboard-panel,.dashboard-table-card,.category-card{
  border:1px solid rgba(255,255,255,.82);
  border-radius:26px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.dashboard-panel{padding:24px}
.dashboard-panel-head h2,.dashboard-table-head h2,.panel-head h2{font-size:19px;color:#092033;letter-spacing:-.03em}
.dashboard-panel-head span{color:#78889a}
.dashboard-chart-legend{font-family:'Inter','DM Sans',sans-serif;color:#52687a;font-weight:750}
.dashboard-chart-legend i.income{background:#0f766e}
.dashboard-chart-legend i.expense{background:#b42318}
.cash-chart{border-bottom-color:#dce7ef;scrollbar-width:thin}
.bar-wrap{border-top-color:#edf3f7;border-bottom-color:#edf3f7}
.bar{width:19px;border-radius:999px 999px 4px 4px}
.bar.income{background:linear-gradient(180deg,#14b8a6,#0f766e)}
.bar.expense{background:linear-gradient(180deg,#fb7185,#b42318)}
.top-category-bar{height:10px;background:#e8eef5}
.top-category-bar span{border-radius:999px;background:linear-gradient(90deg,#082f49,#0f766e)}
.dashboard-table-card{overflow:hidden}
.dashboard-table-head{
  padding:18px 22px;
  border-bottom-color:#dce6ef;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(247,250,252,.72));
}
.dashboard-search input{background:#fff;border-color:#d7e1eb}
.dashboard-recent-table th,.data-table th{
  background:rgba(244,248,251,.86);
  color:#66798b;
  font-family:'Inter','DM Sans',sans-serif;
  font-weight:850;
  letter-spacing:.07em;
}
.dashboard-recent-table td,.data-table td{border-bottom-color:#e5edf3}
.dashboard-recent-table tbody tr:hover td,.data-table tbody tr:hover td{background:rgba(15,118,110,.035)}
.dashboard-category-pill{background:#edf7f6;color:#0f766e;border:1px solid #d4eeea}
.dashboard-status{color:#0f766e}
.dashboard-status i{background:#14b8a6}
.dashboard-table-foot{background:rgba(255,255,255,.7);border-top-color:#dce6ef}
.dashboard-pager button{border-color:#d6e1ea;border-radius:13px;background:#fff}

/* Tables / forms */
.toolbar{
  padding:14px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:24px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
}
.table-card{border-radius:26px}
.data-table th,.data-table td{padding:15px 18px}
.amount-income{color:#0f766e}
.amount-expense{color:#b42318}
.status-pill{border:1px solid transparent;padding:6px 10px}
.status-paid{background:#dff7f4;color:#0f766e;border-color:#c5eee8}
.status-partial{background:#fff3d6;color:#b76e00;border-color:#ffe1a4}
.status-unpaid,.status-inactive{background:#ffe4df;color:#b42318;border-color:#ffc9bf}
.status-active{background:#dff7f4;color:#0f766e;border-color:#c5eee8}
.empty-state,.empty-table{background:rgba(255,255,255,.66);border-radius:22px}
.mobile-only,.mobile-type-label{display:none}

/* Categories / reports */
.category-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 24px;
  padding:24px 30px;
  border:1px solid rgba(217,227,236,.86);
  background:rgba(255,255,255,.72);
  border-radius:28px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
}
.category-page-head h2{font-size:30px;color:#082f49}
.category-card{min-height:166px;padding:20px}
.category-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:#edf7f6;font-size:24px}
.category-card-btn{border-radius:12px}
.category-card-btn.edit{border-color:#cddcfa;background:#e4edff;color:#1d4ed8}
.category-card-btn.delete{border-color:#ffc9bf;background:#ffe4df;color:#b42318}
.summary-box{padding:18px}
.summary-box span{color:#65788a}
.summary-box strong{color:#082f49;letter-spacing:-.04em}

/* Modal */
.modal{
  border:1px solid rgba(255,255,255,.9);
  border-radius:28px;
  background:rgba(255,255,255,.92);
  box-shadow:0 30px 90px rgba(8,47,73,.32);
  backdrop-filter:blur(18px);
}
.modal::backdrop{background:rgba(6,31,50,.62);backdrop-filter:blur(8px)}
.modal h2{color:#082f49;letter-spacing:-.04em}
.modal header .icon-btn{background:#f1f6f9;border:1px solid #dce6ef}
.toast{border-radius:18px;border-color:#d7e1eb;box-shadow:var(--shadow)}

/* Mobile */
@media(max-width:1180px){
  .sidebar{margin:12px 0 12px 12px;height:calc(100vh - 24px)}
  .main-panel{margin-left:calc(var(--sidebar) + 12px);padding:12px 12px 12px 0}
}
@media(max-width:900px){
  :root{--sidebar:82px}
  .sidebar{border-radius:24px}
  .sidebar-brand{padding:18px 14px}
  .brand-mark.small{width:46px;height:46px}
  .nav-list{padding:8px 10px}
  .nav-item{justify-content:center;border-radius:17px}
  .topbar{margin:0 22px 18px}
  .page,#page-dashboard{padding:22px}
  .dashboard-head{align-items:flex-start;min-height:unset}
  .dashboard-head::after{display:none}
}
@media(max-width:640px){
  :root{--sidebar:0px}
  html,body{overflow-x:hidden}
  .app-shell,.main-panel{max-width:100vw;overflow-x:hidden}
  .main-panel{margin-left:0;padding:0 0 78px}
  .mobile-nav{
    margin:0 10px 10px;
    border:1px solid rgba(255,255,255,.82);
    border-radius:24px;
    background:rgba(255,255,255,.86);
    box-shadow:0 -16px 44px rgba(8,47,73,.16);
    backdrop-filter:blur(16px);
  }
  .mobile-nav-item{border-radius:17px;color:#65788a}
  .mobile-nav-item.active{background:#082f49;color:#fff}
  .topbar{margin:10px;border-radius:20px}
  .page,#page-dashboard{max-width:100%;padding:10px}
  .dashboard-head{
    gap:16px;
    margin-bottom:14px;
    padding:18px;
    border-radius:22px;
  }
  .dashboard-head h2{font-size:27px;line-height:1.08}
  .dashboard-head p{font-size:13px}
  .dashboard-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
  }
  .dashboard-actions .btn{
    width:auto;
    min-width:0;
    min-height:40px;
    padding-inline:10px;
    border-radius:14px;
    font-size:12px;
  }
  .dashboard-metrics{gap:12px;margin-bottom:16px}
  .dashboard-metric{
    min-height:unset;
    gap:12px;
    padding:18px;
    border-radius:22px;
  }
  .dashboard-metric span{margin-bottom:8px;font-size:10px}
  .dashboard-metric strong{font-size:24px;line-height:1.14}
  .dashboard-metric small{margin-top:8px}
  .dashboard-metric.balance{min-height:130px}
  .dashboard-metric.balance strong{font-size:32px}
  .dashboard-panel,.dashboard-table-card,.table-card,.panel{max-width:100%;border-radius:22px}
  .dashboard-panel{padding:18px}
  .dashboard-grid{gap:14px;margin-bottom:16px}
  .cash-chart{height:210px;gap:8px}
  .chart-col{min-width:44px}
  .bar-wrap{height:158px}
  .table-card,.dashboard-table-scroll{overflow:visible}
  .data-table,.dashboard-recent-table{
    display:block;
    width:100%;
    min-width:0;
    border-collapse:separate;
  }
  .data-table thead,.dashboard-recent-table thead{display:none}
  .data-table tbody,.dashboard-recent-table tbody{
    display:grid;
    gap:10px;
  }
  .data-table tbody tr,.dashboard-recent-table tbody tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) max-content;
    grid-template-areas:
      "date state"
      "main main"
      "category amount"
      "meta meta"
      "extra extra"
      "actions actions";
    gap:8px 12px;
    padding:14px;
    border:1px solid rgba(255,255,255,.82);
    border-radius:20px;
    background:rgba(255,255,255,.86);
    box-shadow:var(--shadow-soft);
  }
  .data-table tbody tr:hover td,.dashboard-recent-table tbody tr:hover td{background:transparent}
  .data-table td,.dashboard-recent-table td{
    display:block;
    min-width:0;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    vertical-align:unset;
  }
  .mobile-date{
    grid-area:date;
    align-self:center;
    color:#6b7f91;
    font-size:12px;
    font-weight:800;
  }
  .mobile-type,.mobile-status{
    grid-area:state;
    display:flex!important;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    max-width:170px;
    text-align:right;
  }
  .mobile-main{
    grid-area:main;
    color:#082033;
    font-size:15px;
    font-weight:800;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  .mobile-category{
    grid-area:category;
    align-self:end;
    color:#64748b;
    font-size:12px;
    font-weight:800;
    overflow-wrap:anywhere;
  }
  .mobile-amount{
    grid-area:amount;
    justify-self:end;
    align-self:end;
    text-align:right!important;
    font-size:18px;
    font-weight:900;
    line-height:1.15;
    white-space:nowrap;
  }
  .mobile-meta,.mobile-extra{
    color:#64748b;
    font-size:12px;
    font-weight:700;
    overflow-wrap:anywhere;
  }
  .mobile-meta{grid-area:meta}
  .mobile-extra{grid-area:extra}
  .mobile-actions{
    grid-area:actions;
    justify-self:end;
    text-align:right!important;
  }
  .mobile-actions .row-actions{justify-content:flex-end}
  .contribution-table .mobile-extra{display:none}
  .mobile-type-label{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:6px 9px;
    border:1px solid #d6e4ee;
    border-radius:999px;
    background:#eef6f8;
    color:#426275;
    font-size:11px;
    font-weight:850;
  }
  .mobile-only{display:inline}
  .desktop-only{display:none}
  .empty-row{
    display:block!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .empty-row .empty-table{
    display:block;
    padding:24px 16px!important;
    border:1px dashed #d6e2eb!important;
    border-radius:20px;
  }
  .toolbar{border-radius:22px}
  .category-page-head{margin:0 0 20px;padding:18px 14px;border-radius:24px}
  .category-section{margin-bottom:18px}
  .category-section-title{margin-bottom:10px;font-size:13px}
  .category-grid{gap:10px}
  .category-card{
    display:grid;
    grid-template-columns:46px minmax(0,1fr) max-content;
    grid-template-areas:
      "icon name actions"
      "icon type actions"
      "icon note actions";
    align-items:center;
    column-gap:12px;
    row-gap:3px;
    min-height:unset;
    padding:14px;
    border-radius:20px;
  }
  .category-icon{
    grid-area:icon;
    width:46px;
    height:46px;
    margin:0;
    border-radius:15px;
    font-size:23px;
  }
  .category-card strong{
    grid-area:name;
    min-width:0;
    color:#092033;
    font-size:15px;
    line-height:1.25;
    overflow-wrap:anywhere;
  }
  .category-card>span{
    grid-area:type;
    color:#64748b;
    font-size:12px;
    line-height:1.2;
  }
  .category-card>small{
    grid-area:note;
    color:#8b9aae;
    font-size:11px;
    line-height:1.2;
  }
  .category-card-actions{
    grid-area:actions;
    display:flex;
    justify-content:flex-end;
    gap:7px;
    margin:0;
  }
  .category-card-btn{
    width:38px;
    height:38px;
    min-height:38px;
    padding:0;
    border-radius:14px;
  }
  .category-card-btn .category-action-label{display:none}
}