:root{--pink:#ff66b3;--pink2:#ff9ad4;--purple:#795fd1;--blue:#5b8cff;--green:#19ad70;--red:#ef5073;--text:#332b49;--muted:#7c718e;--glass:rgba(255,255,255,.72);--line:rgba(214,190,225,.55);--shadow:0 12px 35px rgba(131,86,145,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 8% 5%,#ffd7ee 0,transparent 28%),radial-gradient(circle at 95% 12%,#dbe2ff 0,transparent 30%),linear-gradient(135deg,#fff3fa,#f3efff 48%,#eef4ff);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}.glass-card{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,249,253,.68));border:1px solid rgba(255,255,255,.84);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.login-body{display:grid;place-items:center;padding:24px;overflow:hidden}.login-shell{width:min(1050px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;position:relative;z-index:2}.login-brand{padding:40px}.premium-badge{display:inline-block;background:linear-gradient(90deg,#5e49b2,#db75bd);color:#fff;padding:8px 18px;border-radius:999px;font-weight:900;letter-spacing:2px}.login-brand h1,.brand-script{font-family:"Segoe Script","Brush Script MT",cursive;color:#694ba7;text-shadow:0 3px 0 #fff}.login-brand h1{font-size:88px;line-height:1;margin:20px 0 8px}.login-brand p{font-size:19px;line-height:1.7;max-width:560px;color:#6f617b}.bank-preview{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.bank-preview span{padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid #ead8ef;font-weight:800}.login-card{border-radius:30px;padding:36px}.login-icon{width:68px;height:68px;border-radius:22px;background:linear-gradient(145deg,#ffe3f3,#e9e7ff);display:grid;place-items:center;font-size:32px}.login-card h2{font-size:31px;margin:18px 0 5px}.login-card p,.login-card small{color:var(--muted)}label{display:grid;gap:7px;font-size:13px;font-weight:800;color:#675a80;margin-top:18px}input,select{width:100%;height:46px;border:1px solid #e6d7ec;border-radius:14px;background:rgba(255,255,255,.88);padding:0 13px;outline:none;color:var(--text)}input:focus,select:focus{border-color:#d994e4;box-shadow:0 0 0 3px rgba(222,143,219,.16)}.password-wrap{position:relative}.password-wrap input{padding-right:50px}.password-wrap button{position:absolute;right:5px;top:5px;width:38px;height:36px;border:0;background:transparent}.primary-btn,.mini-btn{border:0;color:#fff;background:linear-gradient(90deg,var(--pink),var(--pink2));box-shadow:0 8px 18px rgba(255,102,179,.23);font-weight:900;border-radius:14px}.primary-btn{width:100%;min-height:48px;margin-top:22px}.primary-btn.compact{width:auto;min-height:42px;margin:0;padding:0 16px}.mini-btn{height:42px;padding:0 16px}.soft-btn{height:42px;padding:0 16px;border-radius:14px;border:1px solid #e5d6eb;background:rgba(255,255,255,.8);font-weight:800}.form-message{min-height:24px;margin-top:12px;color:#4d7b60;font-weight:700}.form-message.error{color:#ba3157}.flower{position:fixed;font-size:180px;color:rgba(255,129,190,.18);z-index:0}.flower-a{left:-40px;top:-40px}.flower-b{right:-30px;bottom:-60px}
.app-shell{display:flex;min-height:100vh;padding:14px;gap:14px}.sidebar{width:245px;height:calc(100vh - 28px);position:sticky;top:14px;flex:0 0 245px;padding:20px 14px;border-radius:28px;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow);backdrop-filter:blur(18px);overflow:auto}.brand-block{text-align:center;padding:4px 8px 18px}.premium-badge.small{font-size:11px;padding:6px 12px}.brand-title{font-size:20px;font-weight:900;letter-spacing:2px;color:#5d4d91;margin-top:10px}.brand-script{font-size:47px;line-height:1;margin:5px 0}.version-ribbon{display:inline-block;background:linear-gradient(90deg,#ffd0e9,#f4d8ff);padding:5px 18px;border-radius:999px;color:#8b4f85;font-weight:900}.nav-menu{display:grid;gap:8px}.nav-item{width:100%;border:1px solid #ead5ec;border-radius:15px;background:rgba(255,255,255,.67);min-height:43px;padding:0 13px;text-align:left;color:#574a75;font-weight:850}.nav-item.active,.nav-item:hover{background:linear-gradient(90deg,#ff72bf,#ff9ed7);color:#fff;box-shadow:0 8px 18px rgba(255,102,179,.22)}.logout-btn{width:100%;height:42px;margin-top:18px;border:1px solid #e7d2e6;background:#fff;border-radius:14px;color:#a8446e;font-weight:900}.main-content{flex:1;min-width:0}.topbar{border-radius:27px;padding:14px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}.menu-toggle{display:none;width:42px;height:42px;border-radius:13px;border:0;background:#fff}.top-slogan{text-align:center;font-family:"Segoe Script",cursive;font-weight:800;font-size:21px;color:#6b476e}.month-tabs{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-top:10px}.month-tabs span{text-align:center;padding:7px 3px;border-radius:10px;background:linear-gradient(#dbe7ff,#cddaff);font-size:11px;font-weight:900;color:#5f72b5}.month-tabs span.active{background:linear-gradient(#ff8dcb,#ff61ad);color:#fff}.date-time{display:flex;gap:9px}.date-time div{background:rgba(255,255,255,.75);border:1px solid #ecdcf0;border-radius:17px;padding:11px 13px;font-weight:850;white-space:nowrap}.notice{margin:12px 0;padding:12px 15px;border-radius:14px;background:#e0f7eb;color:#13724c;font-weight:800}.notice.error{background:#ffe4eb;color:#ad3156}.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:14px 0}.stat-card{border-radius:21px;padding:16px;min-height:122px}.stat-card span,.stat-card strong,.stat-card small{display:block}.stat-card span{text-transform:uppercase;font-size:12px;font-weight:900;color:#5662a0}.stat-card strong{font-size:23px;margin-top:11px;color:#242851}.stat-card small{margin-top:10px;color:var(--muted)}.stat-card.green strong{color:var(--green)}.stat-card.red strong{color:var(--red)}.stat-card canvas{width:100%;height:40px;margin-top:7px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}.center-column,.right-column{display:grid;gap:14px;align-content:start}.two-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel{border-radius:23px;padding:17px}.panel-title{font-size:17px;font-weight:950;color:#525ca0;text-transform:uppercase;margin-bottom:12px}.panel-title.pink{color:#f34892}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.summary-list{display:grid;gap:11px}.summary-list div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed rgba(150,122,170,.27);padding-bottom:9px}.summary-list b{color:#303a75}.donut-layout{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:center}.category-list{display:grid;gap:10px}.category-list div{display:flex;justify-content:space-between;font-size:12px;font-weight:800}.category-list span{display:flex;align-items:center;gap:7px}.category-list i{width:10px;height:10px;border-radius:3px}.chart-panel canvas{width:100%;height:260px}.account-list,.bank-list{display:grid;gap:8px}.account-row,.bank-list button{border:1px solid #eadbed;background:rgba(255,255,255,.7);border-radius:14px;padding:11px 12px;text-align:left}.account-row{display:flex;justify-content:space-between;align-items:center}.account-row span b,.account-row span small{display:block}.account-row small{color:var(--muted);margin-top:3px}.account-row strong{color:#35437f}.bank-list button{font-weight:850;color:#554970}.note-form{display:grid;grid-template-columns:1fr auto;gap:8px}.notes-list{display:grid;gap:7px;margin-top:11px}.note-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;background:rgba(255,255,255,.57);border-radius:11px;padding:8px}.note-row button{border:0;background:transparent;font-size:17px}.note-row.done span{text-decoration:line-through;opacity:.55}.goal-item{margin-bottom:17px}.goal-item>div:first-child{display:flex;justify-content:space-between;font-weight:850;font-size:13px}.progress{height:9px;background:#e1e4fb;border-radius:999px;margin-top:7px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#6a90ff,#ff83c8);border-radius:inherit}blockquote{margin:0;color:#6e5f79;line-height:1.7;font-style:italic}.muted{color:var(--muted);font-size:13px}.link-button{border:0;background:transparent;color:#5a72d9;font-weight:900}.table-wrap{width:100%;overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th{text-align:left;text-transform:uppercase;font-size:11px;color:#6a6288;background:rgba(255,255,255,.35);padding:11px;border-bottom:1px solid #e4d8ea}td{padding:11px;border-bottom:1px solid rgba(222,211,231,.65);font-size:12px}.income-text{color:var(--green);font-weight:850}.expense-text{color:var(--red);font-weight:850}.empty{text-align:center;color:var(--muted);padding:24px}.filters{display:grid;grid-template-columns:1.1fr .9fr 1.5fr 1fr 1fr auto auto;gap:8px;margin:12px 0 16px}.filters input,.filters select{height:42px}.table-btn{border:1px solid #dcd3e8;border-radius:9px;padding:6px 9px;background:#fff;font-weight:800;margin-right:5px}.table-btn.danger{color:#b93961;background:#fff0f4;border-color:#f1ced9}dialog{border:0;border-radius:24px;padding:0;background:transparent;max-width:min(720px,calc(100% - 24px));width:100%}dialog::backdrop{background:rgba(39,25,54,.42);backdrop-filter:blur(4px)}.modal-card{background:linear-gradient(145deg,#fff,#fff5fb);border-radius:24px;padding:22px;box-shadow:0 25px 60px rgba(52,31,65,.25)}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0;color:#6b4aa1}.modal-head button{border:0;background:#f5e9f4;border-radius:10px;width:36px;height:36px;font-size:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid .wide{grid-column:span 2}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}
@media(max-width:1350px){.stats-grid{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr}.right-column{grid-template-columns:repeat(3,1fr)}}@media(max-width:1080px){.app-shell{padding:10px}.sidebar{position:fixed;z-index:20;left:0;top:0;height:100vh;margin:0;border-radius:0 25px 25px 0;transform:translateX(-105%);transition:.25s}.sidebar.open{transform:translateX(0)}.menu-toggle{display:block}.topbar{grid-template-columns:auto 1fr}.date-time{grid-column:1/-1;justify-content:flex-end}.filters{grid-template-columns:repeat(3,1fr)}.right-column{grid-template-columns:1fr 1fr}.login-shell{grid-template-columns:1fr}.login-brand{text-align:center;padding:10px}.login-brand h1{font-size:64px}.login-brand p{margin-inline:auto}.bank-preview{justify-content:center}}@media(max-width:760px){.stats-grid,.two-panels,.right-column,.filters,.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.month-tabs{grid-template-columns:repeat(4,1fr)}.topbar{grid-template-columns:auto 1fr;padding:12px}.top-slogan{font-size:17px}.date-time{display:grid;grid-template-columns:1fr}.date-time div{white-space:normal}.donut-layout{grid-template-columns:1fr;justify-items:center}.login-card{padding:25px}.login-brand h1{font-size:52px}}
.side-donut {
  grid-template-columns: 1fr;
  justify-items: center;
}

.side-donut .category-list {
  width: 100%;
  margin-top: 5px;
}

.side-donut canvas {
  max-width: 190px;
}

/* Polesan visual dashboard */
.dashboard-body {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  background:
    linear-gradient(rgba(255, 247, 251, 0.72), rgba(241, 243, 255, 0.76)),
    url('/assets/bg-kawaii.png') center top / 420px auto repeat;
}

.dashboard-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.32), transparent 22%),
    radial-gradient(circle at 88% 28%, rgba(255,255,255,.22), transparent 24%),
    radial-gradient(circle at 45% 82%, rgba(255,255,255,.18), transparent 25%);
  z-index: 0;
}

.dashboard-body .app-shell {
  position: relative;
  z-index: 1;
}

.sidebar {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  scrollbar-gutter: stable;
}

.sidebar::-webkit-scrollbar {
  width: 8px;
  height: 0;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(121,95,209,.38);
  border-radius: 999px;
}

.brand-block {
  overflow: hidden;
}

.brand-script {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 36px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: visible;
  letter-spacing: -1px;
}

@media(max-width:1080px) {
  .brand-script {
    font-size: 34px;
  }
}
/* =========================
   BLUE THEME OVERRIDE
   ========================= */
:root{
  --blue-1:#5b8cff;
  --blue-2:#8cc4ff;
  --blue-3:#eaf5ff;
  --blue-4:#d7ecff;
  --blue-5:#b9d8ff;
  --blue-6:#6f91d9;
  --text-main:#3f3c69;
  --text-soft:#6673a7;
  --border-blue:#c6dcff;
  --card-bg:rgba(255,255,255,.88);
}

/* background utama dashboard samakan nuansa login */
.dashboard-body{
  background: linear-gradient(180deg, #cfeaff 0%, #dff3ff 100%) !important;
}

.app-shell,
.main-content{
  background: transparent !important;
}

/* card / panel / sidebar */
.sidebar,
.glass-card,
.panel,
.stat-card,
.topbar,
.modal-card,
#transactionDialog::backdrop{
  border-color: var(--border-blue) !important;
}

.sidebar,
.glass-card,
.panel,
.stat-card,
.topbar,
.modal-card{
  background: var(--card-bg) !important;
  box-shadow: 0 10px 28px rgba(91,140,255,.10) !important;
}

/* brand kiri */
.brand-title,
.brand-script,
.top-slogan,
.panel-title,
.summary-list b,
.summary-list span,
.goal-item span,
.goal-item b,
.stat-card span,
.stat-card strong,
.account-row b,
.account-row strong,
.note-row span,
.table-wrap th,
.table-wrap td,
blockquote{
  color: var(--text-main) !important;
}

/* hilangkan nuansa pink */
.panel-title.pink,
.pink{
  color: var(--blue-1) !important;
}

/* tombol / menu aktif / badge */
.nav-item.active,
.primary-btn,
.mini-btn,
.version-ribbon,
.month-tabs .active,
.logout-btn:hover{
  background: linear-gradient(90deg, var(--blue-1), var(--blue-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.primary-btn,
.mini-btn,
.logout-btn,
.version-ribbon{
  box-shadow: 0 8px 20px rgba(91,140,255,.18) !important;
}

/* menu biasa */
.nav-item{
  border: 1px solid var(--border-blue) !important;
  color: var(--text-main) !important;
  background: rgba(255,255,255,.86) !important;
}

.nav-item span{
  color: var(--text-main) !important;
}

/* top date time */
.date-time > div{
  background: rgba(255,255,255,.9) !important;
  border: 1px solid var(--border-blue) !important;
  color: var(--text-main) !important;
}

/* bulan */
.month-tabs span{
  background: #e6f1ff !important;
  color: #5f79b9 !important;
  border: 1px solid #d2e4ff !important;
}

/* notice */
.notice{
  background: #e7f7ef !important;
  color: #16744c !important;
  border: 1px solid #b7e6ca !important;
}
.notice.error{
  background: #fff0f0 !important;
  color: #ba3b3b !important;
  border: 1px solid #f0b6b6 !important;
}

/* ringkasan */
.summary-list div{
  border-bottom: 1px dashed #d9e7ff !important;
}

/* progress */
.progress{
  background: #dfeeff !important;
}
.progress i{
  background: linear-gradient(90deg, var(--blue-1), var(--blue-2)) !important;
}

/* rekening kanan */
.account-row{
  border: 1px solid #dbe9ff !important;
  background: rgba(255,255,255,.82) !important;
}
.account-row:hover{
  background: #edf6ff !important;
}

/* table */
.table-wrap table{
  border-collapse: collapse;
}
.table-wrap th{
  color: #5870b8 !important;
}
.table-wrap td{
  border-top: 1px solid #e4efff !important;
}

/* input / select */
input,
select,
textarea{
  border: 1px solid var(--border-blue) !important;
  color: var(--text-main) !important;
  background: rgba(255,255,255,.95) !important;
}

input::placeholder,
textarea::placeholder{
  color: #8b97be !important;
}

/* tombol kecil */
.soft-btn,
.link-button,
.table-btn{
  border: 1px solid var(--border-blue) !important;
  color: var(--text-main) !important;
  background: #f6fbff !important;
}

.table-btn.danger{
  color: #c13f5a !important;
}

/* chart / donut box */
.donut-layout,
.chart-panel canvas{
  background: transparent !important;
}

/* text warna nominal */
.income-text{
  color: #19ad70 !important;
}
.expense-text{
  color: #ef5073 !important;
}

/* bank section */
.bank-form-card,
.bank-list-card,
.bank-manage-row{
  border-color: var(--border-blue) !important;
}

.bank-count,
.currency-badge{
  background: #eaf5ff !important;
  color: #4f71b6 !important;
  border: 1px solid #d0e4ff !important;
}
/* Background dashboard sama nuansa login biru */
.dashboard-body{
  background: linear-gradient(180deg, #cfeaff 0%, #dff3ff 100%) !important;
  background-attachment: fixed !important;
}
/* Combo chart IDR & USD */
.combo-chart-panel {
  min-height: 360px;
}

.combo-chart-panel canvas {
  width: 100%;
  min-height: 300px;
  display: block;
}
/* Chart IDR & USD pisah kolom */
.combo-chart-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}

.combo-chart-panel{
  min-height:330px;
}

.combo-chart-panel canvas{
  width:100%;
  height:280px;
  display:block;
}

@media(max-width:768px){
  .combo-chart-grid{
    grid-template-columns:1fr;
  }
}