/* PAGES */
    .page {
      display: none;
      width: 100%;
      box-sizing: border-box
    }

    .page.active {
      display: block;
      animation: pgIn .38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      transform-origin: top center;
    }

    @keyframes pgIn {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Keuangan Sub-panel Transitions */
    #keuPanelBudget, #keuPanelGoals, #keuPanelBills {
      animation: keuPanelFadeIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      will-change: transform, opacity;
      transform-origin: top center;
    }
    @keyframes keuPanelFadeIn {
      from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .ph {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: .9rem;
      gap: .8rem;
      flex-wrap: wrap
    }

    .ptitle {
      font-family: 'Inter', sans-serif;
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1;
      color: var(--ink)
    }

    .psub {
      font-size: .82rem;
      color: var(--ink3);
      margin-top: .32rem
    }

    /* CARDS */
    .card,
    .widget,
    .gc {
      background: var(--gs-1);
      backdrop-filter: blur(20px) saturate(130%);
      -webkit-backdrop-filter: blur(20px) saturate(130%);
      border: 1.5px solid var(--gs-border);
      border-radius: var(--r);
      box-shadow: var(--shd);
      padding: 1.4rem;
      transition: border-color .2s, background .3s;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      min-width: 0;
      overflow: hidden
    }

    .widget:hover {
      border-color: var(--gs-border-hi)
    }

    /* ── DASHBOARD TOP BAR ── */
    .dash-topbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: .7rem;
      position: relative;
      z-index: 2
    }

    .dash-topbar-right {
      display: flex;
      align-items: center;
      gap: .62rem;
      flex-shrink: 0
    }

    .dash-greeting {
      display: flex;
      flex-direction: column;
      gap: .07rem;
      text-align: right
    }

    .dash-greeting-time {
      font-family: 'JetBrains Mono', monospace;
      font-size: .58rem;
      font-weight: 500;
      color: var(--ink3);
      letter-spacing: .1em;
      text-transform: uppercase;
      line-height: 1
    }

    .dash-greeting-name {
      font-size: .95rem;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.022em;
      line-height: 1.15
    }

    .dash-profile-btn {
      display: flex;
      align-items: center;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      position: relative;
      flex-shrink: 0
    }

    .dash-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: visible;
      flex-shrink: 0;
      position: relative;
      transition: transform .2s
    }

    .dash-avatar-inner {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 0 0 4.5px rgba(37, 99, 235, .2), 0 6px 18px rgba(37, 99, 235, .22)
    }

    .dash-avatar-inner::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, .45);
      pointer-events: none;
      z-index: 2
    }

    .dash-avatar:hover {
      transform: scale(1.07)
    }

    .dash-avatar:hover .dash-avatar-inner {
      box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .92), 0 0 0 5.5px rgba(37, 99, 235, .32), 0 8px 24px rgba(37, 99, 235, .32)
    }

    .dash-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 50%
    }

    .dash-avatar-initials {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .92rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.02em;
      border-radius: 50%
    }

    .dash-avatar-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      background: rgba(15, 23, 42, .96);
      
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 11px;
      padding: .3rem;
      min-width: 168px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-6px);
      transition: opacity .18s, transform .18s;
      z-index: 9999;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
      width: max-content
    }

    .dash-avatar-dropdown.open {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0)
    }

    .dash-avatar-dropdown-item {
      display: flex;
      align-items: center;
      gap: .55rem;
      width: 100%;
      padding: .52rem .72rem;
      border: none;
      background: none;
      color: #fff;
      font-size: .78rem;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: .03em;
      cursor: pointer;
      border-radius: 8px;
      transition: background .14s;
      text-align: left;
      white-space: nowrap
    }

    .dash-avatar-dropdown-item:hover {
      background: rgba(255, 255, 255, .08)
    }

    .dash-avatar-dropdown-item.danger {
      color: #f87171
    }

    .dash-avatar-dropdown-item.danger:hover {
      background: rgba(248, 113, 113, .1)
    }

    .dash-avatar-dropdown-sep {
      height: 1px;
      background: rgba(255, 255, 255, .08);
      margin: .25rem .5rem
    }

    html[data-theme="dark"] .dash-avatar-dropdown {
      background: rgba(5, 10, 24, .97)
    }

    #avatarInput {
      display: none
    }

    @media(min-width:769px) {
      .dash-avatar {
        width: 48px;
        height: 48px
      }

      .dash-avatar-inner {
        width: 48px;
        height: 48px
      }

      .dash-greeting-name {
        font-size: 1rem
      }
    }

    /* HERO */
    .zone-hero {
      display: flex;
      flex-direction: column;
      gap: .7rem;
      margin-bottom: .7rem
    }

    .nw-card {
      width: 100%;
      padding: 1.2rem 1.5rem 1.15rem;
      background: linear-gradient(135deg, rgba(29, 78, 216, .95) 0%, rgba(14, 165, 233, .9) 60%, rgba(6, 182, 212, .85) 100%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 22px !important;
      border: 1.5px solid rgba(255, 255, 255, .28);
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 16px 56px rgba(37, 99, 235, .38), 0 4px 16px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .22)
    }

    .nw-card::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -5%;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .07);
      pointer-events: none
    }

    .nw-card::after {
      content: '';
      position: absolute;
      bottom: -55%;
      left: -8%;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .05);
      pointer-events: none
    }

    .nw-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: .58rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .42);
      margin-bottom: .38rem;
      position: relative;
      z-index: 1
    }

    .nw-val {
      font-family: 'Inter', sans-serif;
      font-size: clamp(1.7rem, 5.5vw, 2.8rem);
      font-weight: 800;
      letter-spacing: -.045em;
      color: #fff;
      line-height: 1;
      margin-bottom: .2rem;
      position: relative;
      z-index: 1;
      word-break: break-word
    }

    .nw-accs {
      font-family: 'JetBrains Mono', monospace;
      font-size: .6rem;
      color: rgba(255, 255, 255, .35);
      position: relative;
      z-index: 1;
      display: block;
      margin-bottom: .85rem
    }

    /* 2×2 inline stats grid */
    .nw-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .5rem .85rem;
      position: relative;
      z-index: 1;
      padding-top: .8rem;
      border-top: 1px solid rgba(255, 255, 255, .12)
    }

    .nw-item {
      display: flex;
      flex-direction: column;
      gap: .18rem
    }

    .nw-item-lbl {
      font-family: 'JetBrains Mono', monospace;
      font-size: .54rem;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      line-height: 1
    }

    .nw-item-val {
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: -.025em;
      line-height: 1.1;
      display: flex;
      align-items: baseline;
      gap: .26rem
    }

    .nw-item-val .sym {
      font-size: .73rem;
      font-weight: 500;
      opacity: .75
    }

    /* Growth badge baris kedua */
    .nw-item-growth {
      font-family: 'JetBrains Mono', monospace;
      font-size: .58rem;
      font-weight: 500;
      letter-spacing: .02em;
      margin-top: .06rem;
      line-height: 1;
      opacity: .82
    }

    .nw-item-growth.pos {
      color: #6ee7b7
    }

    .nw-item-growth.neg {
      color: #fca5a5
    }

    .nw-item-growth.neu {
      color: rgba(255, 255, 255, .38)
    }

    /* Colour tokens per item */
    .nw-item-inc .nw-item-val {
      color: #6ee7b7
    }

    .nw-item-exp .nw-item-val {
      color: #fca5a5
    }

    .nw-item-bud .nw-item-val {
      color: #bfdbfe
    }

    .nw-item-bill .nw-item-val {
      color: #fde68a
    }

    .nw-item-bill.has-overdue .nw-item-val {
      color: #fca5a5
    }

    @media(max-width:380px) {
      .nw-item-val {
        font-size: .8rem
      }

      .nw-grid {
        gap: .42rem .7rem
      }
    }

    .t-inc {
      color: var(--income)
    }

    .t-exp {
      color: var(--expense)
    }

    /* ACCOUNTS */
    .zone-accs {
      margin-bottom: .55rem;
      width: 100%
    }

    .zh {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .28rem
    }

    .zt {
      font-family: 'JetBrains Mono', monospace;
      font-size: .62rem;
      font-weight: 500;
      color: var(--ink3);
      letter-spacing: .12em;
      text-transform: uppercase
    }

    /* Mobile: horizontal scroll carousel */
    .accs-scroll {
      display: flex;
      gap: .9rem;
      overflow-x: auto;
      padding: .35rem .15rem .7rem;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      max-width: 100%;
      scroll-behavior: smooth
    }

    .accs-scroll::-webkit-scrollbar {
      display: none
    }

    /* Desktop: keep horizontal scroll, arrows control navigation */
    @media(min-width:1024px) {
      .accs-scroll {
        overflow-x: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x mandatory;
        padding: .3rem 0 .8rem
      }
    }

    /* Account nav arrows - desktop only */
    .accs-nav {
      display: none
    }

    @media(min-width:769px) {
      .accs-nav {
        display: flex;
        align-items: center;
        gap: .3rem
      }

      .accs-arr {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1.5px solid var(--gs-border);
        background: var(--gs-1);
        color: var(--ink2);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all .14s;
        flex-shrink: 0
      }

      .accs-arr:hover {
        background: var(--ink);
        color: #fff;
        border-color: var(--ink)
      }

      .accs-arr:disabled {
        opacity: .3;
        cursor: default;
        pointer-events: none
      }
    }

    /* DEBIT CARD */
    .dc {
      flex-shrink: 0;
      width: 295px;
      height: 175px;
      border-radius: 18px;
      padding: 1.2rem 1.35rem;
      position: relative;
      overflow: hidden;
      scroll-snap-align: start;
      cursor: pointer;
      transition: transform .25s, box-shadow .25s;
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }

    .dc:hover {
      transform: translateY(-4px) scale(1.015);
      box-shadow: 0 22px 48px rgba(0, 0, 0, .28)
    }

    .dc::before {
      content: '';
      position: absolute;
      top: -40%;
      left: -30%;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .07);
      pointer-events: none
    }

    .dc::after {
      content: '';
      position: absolute;
      bottom: -50%;
      right: -20%;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .1);
      pointer-events: none
    }

    .dc-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      z-index: 1
    }

    .dc-chip {
      width: 30px;
      height: 22px;
      border-radius: 4px;
      background: linear-gradient(135deg, #d4a843, #f0c060);
      position: relative;
      overflow: hidden;
      flex-shrink: 0
    }

    .dc-chip::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(0, 0, 0, .22);
      transform: translateY(-50%)
    }

    .dc-chip::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(0, 0, 0, .18)
    }

    .dc-logo-wrap {
      width: 92px;
      height: 50px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .95);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      box-shadow: 0 1px 8px rgba(0, 0, 0, .15)
    }

    @media(max-width:768px) {
      .dc-logo-wrap {
        width: 72px;
        height: 40px;
        border-radius: 6px;
      }
    }

    .dc-logo {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform: scale(1.85) !important;
      transform-origin: center center;
    }

    .dc-logo-fb {
      font-size: .6rem;
      font-weight: 900;
      color: #fff;
      text-align: center;
      line-height: 1.1;
      letter-spacing: .02em;
      display: none
    }

    .dc-mid {
      flex: 1;
      padding: .3rem 0;
      position: relative;
      z-index: 1
    }

    .dc-bal-lbl {
      font-family: 'JetBrains Mono', monospace;
      font-size: .55rem;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .45);
      margin-bottom: .18rem
    }

    .dc-bal {
      font-family: 'Inter', sans-serif;
      font-size: 1.15rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.03em;
      line-height: 1.15;
      word-break: break-word;
      max-width: 100%
    }

    .dc-bar-wrap {
      height: 2px;
      border-radius: 99px;
      background: rgba(255, 255, 255, .14);
      margin: .45rem 0 .28rem
    }

    .dc-bar {
      height: 100%;
      border-radius: 99px;
      background: rgba(255, 255, 255, .55);
      transition: width .6s ease
    }

    .dc-bot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      position: relative;
      z-index: 1
    }

    .dc-name {
      font-family: 'JetBrains Mono', monospace;
      font-size: .65rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .8);
      letter-spacing: .06em;
      text-transform: uppercase;
      max-width: 165px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .dc-delta {
      font-family: 'JetBrains Mono', monospace;
      font-size: .65rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .55)
    }

    .dc-pct {
      text-align: right;
      font-family: 'JetBrains Mono', monospace;
      font-size: .58rem;
      color: rgba(255, 255, 255, .35);
      line-height: 1.5
    }

    .dc-add {
      background: var(--card) !important;
      border: 1.5px dashed var(--border) !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      color: var(--ink3)
    }

    .dc-wallet-icon {
      width: 34px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: .85
    }

    .dc-add::before,
    .dc-add::after {
      display: none !important
    }

    .dc-add:hover {
      border-color: var(--ink) !important;
      color: var(--ink);
      background: var(--bg2) !important;
      transform: translateY(-3px)
    }

    .dc-add span {
      font-family: 'JetBrains Mono', monospace;
      font-size: .7rem;
      font-weight: 500
    }

    /* DASHBOARD GRID */
    .dgrid {
      display: grid;
      grid-template-columns: 1.55fr 1fr;
      gap: 1rem;
      margin-bottom: 1rem;
      width: 100%;
      min-width: 0
    }

    .dgrid-2 {
      grid-template-columns: 1fr 1fr
    }

    .dgrid>*,
    .dgrid-2>* {
      min-width: 0;
      overflow: hidden
    }

    @media(max-width:960px) {

      .dgrid,
      .dgrid-2 {
        grid-template-columns: 1fr
      }
    }

    .wh {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.1rem
    }

    .wt {
      font-family: 'JetBrains Mono', monospace;
      font-size: .65rem;
      font-weight: 500;
      color: var(--ink3);
      letter-spacing: .1em;
      text-transform: uppercase
    }

    /* TX LIST */
    .tx-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .3rem
    }

    .tx-item {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .52rem .65rem;
      border-radius: 9px;
      transition: background .13s
    }

    .tx-item:hover {
      background: var(--bg2)
    }

    .tx-ico {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .95rem;
      flex-shrink: 0
    }

    .tx-ico.inc {
      background: var(--income-dim)
    }

    .tx-ico.exp {
      background: var(--expense-dim)
    }

    .tx-ico.trf {
      background: rgba(28, 63, 255, .08)
    }

    .tx-info {
      flex: 1;
      min-width: 0
    }

    .tx-name {
      font-size: .8rem;
      font-weight: 500;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .tx-cat {
      font-size: .68rem;
      color: var(--ink3);
      margin-top: .08rem
    }

    .tx-amt {
      font-family: 'Inter', sans-serif;
      font-size: .9rem;
      font-weight: 700;
      flex-shrink: 0;
      letter-spacing: -.02em
    }

    .tx-amt.inc {
      color: var(--income)
    }

    .tx-amt.exp {
      color: var(--expense)
    }

    .tx-amt.trf {
      color: var(--accent2)
    }

    /* DONUT */
    .donut-wrap {
      display: flex;
      align-items: center;
      gap: 1rem;
      width: 100%;
      min-width: 0
    }

    .donut-wrap canvas {
      flex-shrink: 0;
      width: 140px !important;
      height: 140px !important;
      max-width: 140px;
      max-height: 140px
    }

    .legend {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .42rem;
      flex: 1;
      min-width: 0;
      overflow: hidden
    }

    .legend li {
      display: flex;
      align-items: center;
      gap: .42rem;
      font-size: .71rem;
      color: var(--ink2);
      overflow: hidden;
      min-width: 0
    }

    .ldot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0
    }

    @media(max-width:480px) {
      .donut-wrap {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
      }
      .legend {
        width: 100%;
      }
    }

    /* PROGRESS */
    .prog-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .8rem
    }

    .prog-hdr {
      display: flex;
      justify-content: space-between;
      margin-bottom: .3rem;
      font-size: .74rem
    }

    .ptrack {
      height: 6px;
      border-radius: 99px;
      background: var(--bg3);
      overflow: hidden;
      position: relative
    }

    .pfill {
      height: 100%;
      border-radius: 99px;
      transition: width .5s ease
    }

    .pfill.ok {
      background: linear-gradient(90deg, #10b981, #34d399)
    }

    .pfill.warn {
      background: linear-gradient(90deg, #f59e0b, #fbbf24)
    }

    .pfill.bad {
      background: linear-gradient(90deg, #ef4444, #f87171)
    }

    .pfill.over {
      background: linear-gradient(90deg, #dc2626, #ef4444);
      width: 100% !important;
      animation: overShake .4s ease
    }

    @keyframes overShake {

      0%,
      100% {
        transform: translateX(0)
      }

      25% {
        transform: translateX(-3px)
      }

      75% {
        transform: translateX(3px)
      }
    }

    /* BUTTONS */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .55rem 1.1rem;
      border-radius: 99px;
      border: none;
      background: var(--btn-bg, #1e293b);
      color: var(--btn-fg, #fff);
      font-family: 'Inter', inherit;
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .18s;
      white-space: nowrap
    }

    .btn:hover {
      background: #1a1a2a;
      transform: translateY(-1px);
      box-shadow: 0 5px 16px rgba(0, 0, 0, .2)
    }

    .btn:active {
      transform: translateY(0)
    }

    .btn.full {
      width: 100%;
      justify-content: center;
      border-radius: 10px
    }

    .btn2 {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .5rem .95rem;
      border-radius: 99px;
      border: 1.5px solid var(--border);
      background: transparent;
      color: var(--ink2);
      font-family: 'Inter', inherit;
      font-size: .8rem;
      font-weight: 500;
      cursor: pointer;
      transition: all .18s
    }

    .btn2:hover {
      background: var(--bg2);
      border-color: var(--border-hi);
      color: var(--ink)
    }

    .btn-sm {
      padding: .3rem .65rem;
      font-size: .73rem
    }

    .btn-danger {
      padding: .48rem .92rem;
      border-radius: 99px;
      border: 1.5px solid rgba(230, 60, 30, .25);
      background: rgba(230, 60, 30, .06);
      color: var(--expense);
      font-family: 'Inter', inherit;
      font-size: .8rem;
      font-weight: 500;
      cursor: pointer;
      transition: all .18s
    }

    .btn-danger:hover {
      background: rgba(230, 60, 30, .12)
    }

    .lbtn {
      background: none;
      border: none;
      color: var(--ink3);
      font-family: 'Inter', inherit;
      font-size: .74rem;
      cursor: pointer;
      transition: color .14s;
      padding: 0;
      display: inline-flex;
      align-items: center;
      gap: .26rem
    }

    .lbtn:hover {
      color: var(--ink)
    }

    .tgl-grp {
      display: flex;
      background: rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(0, 0, 0, 0.04);
      border-radius: 99px;
      padding: 3px;
      gap: 2px;
    }

    .tgl {
      padding: .3rem .8rem;
      border-radius: 99px;
      border: none;
      background: transparent;
      color: var(--ink3);
      font-family: inherit;
      font-size: .74rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .tgl.active {
      background: #fff;
      color: var(--accent);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    /* FILTER */
    .fsrch {
      position: relative;
      flex: 1;
      min-width: 150px
    }

    .fsrch-ico {
      position: absolute;
      left: .72rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--ink3);
      pointer-events: none
    }

    /* TABLE */
    .tbl-wrap {
      overflow-x: auto
    }

    .txcl {
      list-style: none;
      display: flex;
      flex-direction: column
    }

    .txcl-item {
      display: flex;
      align-items: center;
      gap: .8rem;
      padding: .82rem .92rem;
      border-radius: 11px;
      cursor: pointer;
      transition: background .13s;
      position: relative
    }

    .txcl-item:hover {
      background: var(--bg2)
    }

    .txcl-item+.txcl-item {
      border-top: 1px solid var(--gs-border)
    }

    /* Icon wrap with pip badge */
    .txcl-ico-wrap {
      position: relative;
      flex-shrink: 0
    }

    .txcl-ico {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem
    }

    .txcl-ico.inc {
      background: var(--income-dim)
    }

    .txcl-ico.exp {
      background: var(--expense-dim)
    }

    .txcl-ico.trf {
      background: rgba(28, 63, 255, .08)
    }

    /* Pip badge for scan source */
    .txcl-pip {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2563eb, #0ea5e9);
      border: 2px solid var(--bg);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .txcl-pip svg {
      display: block
    }

    .txcl-body {
      flex: 1;
      min-width: 0
    }

    .txcl-name {
      font-size: .84rem;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .txcl-meta {
      font-size: .7rem;
      color: var(--ink3);
      margin-top: .15rem;
      display: flex;
      gap: .42rem;
      align-items: center;
      flex-wrap: wrap
    }

    .txcl-cat {
      display: inline-flex;
      align-items: center;
      gap: .22rem;
      padding: .1rem .45rem;
      border-radius: 99px;
      font-size: .65rem;
      font-weight: 600
    }

    .txcl-cat.inc {
      background: var(--income-dim);
      color: var(--income)
    }

    .txcl-cat.exp {
      background: var(--expense-dim);
      color: var(--expense)
    }

    .txcl-cat.trf {
      background: rgba(28, 63, 255, .08);
      color: var(--accent2)
    }

    .txcl-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: .26rem;
      flex-shrink: 0
    }

    .txcl-amt {
      font-family: 'Inter', sans-serif;
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .txcl-amt.inc {
      color: var(--income)
    }

    .txcl-amt.exp {
      color: var(--expense)
    }

    .txcl-amt.trf {
      color: var(--accent2)
    }

    .txcl-time {
      font-family: 'JetBrains Mono', monospace;
      font-size: .64rem;
      color: var(--ink3)
    }

    .txcl-grp {
      padding: .55rem .92rem .2rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: .66rem;
      font-weight: 500;
      color: var(--ink3);
      letter-spacing: .1em;
      text-transform: uppercase;
      display: flex;
      justify-content: space-between
    }

    .txcl-grp-tot {
      font-size: .7rem
    }

    /* ── TX DETAIL BOTTOM SHEET ── */
    .tx-sheet-overlay {
      position: fixed;
      inset: 0;
      z-index: 8500;
      background: rgba(15, 23, 42, .4);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s ease
    }

    .tx-sheet-overlay.open {
      opacity: 1;
      pointer-events: all
    }

    .tx-sheet {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 8501;
      background: var(--gs-7);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border-radius: 26px 26px 0 0;
      border-top: 1.5px solid var(--gs-border-hi);
      box-shadow: 0 -20px 80px rgba(37, 99, 235, .18);
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform .34s cubic-bezier(.32, 1, .6, 1)
    }

    .tx-sheet.open {
      transform: translateY(0)
    }

    .tx-sheet-handle {
      width: 40px;
      height: 4px;
      border-radius: 99px;
      background: rgba(0, 0, 0, .1);
      margin: .85rem auto .5rem;
      flex-shrink: 0
    }

    .tx-sheet-body {
      padding: .2rem 1.25rem 1rem;
      overflow-y: auto;
      flex: 1
    }

    .tx-sheet-body::-webkit-scrollbar {
      width: 3px
    }

    .tx-detail-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .55rem 0;
      border-bottom: 1px solid var(--gs-border)
    }

    .tx-detail-row:last-child {
      border-bottom: none
    }

    .tx-detail-lbl {
      font-family: 'JetBrains Mono', monospace;
      font-size: .63rem;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--ink3)
    }

    .tx-detail-val {
      font-size: .82rem;
      font-weight: 600;
      color: var(--ink);
      text-align: right;
      max-width: 60%
    }

    .tx-sheet-foot {
      padding: .75rem 1.25rem 1.2rem;
      border-top: 1.5px solid var(--gs-border);
      display: flex;
      gap: .6rem;
      flex-shrink: 0
    }

    @media(min-width:769px) {
      .tx-sheet {
        max-width: 520px;
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(100%);
        border-radius: 22px;
        bottom: 2rem
      }

      .tx-sheet.open {
        transform: translateX(-50%) translateY(0)
      }
    }

    .tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: .8rem;
      table-layout: fixed
    }

    @media(max-width:768px) {
      .tbl {
        table-layout: auto;
        min-width: 550px;
      }
    }

    .tbl th {
      padding: .6rem .9rem;
      text-align: left;
      font-family: 'JetBrains Mono', monospace;
      font-size: .64rem;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink3);
      border-bottom: 1.5px solid var(--border);
      cursor: pointer;
      user-select: none;
      white-space: nowrap
    }

    .tbl td {
      padding: .7rem .9rem;
      border-bottom: 1px solid var(--bg3);
      color: var(--ink2);
      vertical-align: middle
    }

    .tbl tr:hover td {
      background: var(--bg2)
    }

    .tbl tr:last-child td {
      border-bottom: none
    }

    .badge {
      display: inline-block;
      padding: .18rem .52rem;
      border-radius: 99px;
      font-size: .68rem;
      font-weight: 600
    }

    .badge.inc {
      background: var(--income-dim);
      color: var(--income)
    }

    .badge.exp {
      background: var(--expense-dim);
      color: var(--expense)
    }

    .badge.trf {
      background: rgba(28, 63, 255, .08);
      color: var(--accent2)
    }

    .abtns {
      display: flex;
      gap: .32rem
    }

    .abtn {
      padding: .28rem .6rem;
      border-radius: 7px;
      border: 1.5px solid var(--border);
      background: transparent;
      color: var(--ink3);
      font-size: .68rem;
      cursor: pointer;
      font-family: 'Inter', inherit;
      transition: all .14s
    }

    .abtn:hover {
      background: var(--bg2);
      color: var(--ink)
    }

    .abtn.del:hover {
      border-color: rgba(230, 60, 30, .3);
      color: var(--expense);
      background: var(--expense-dim)
    }

    .pgn {
      display: flex;
      justify-content: center;
      gap: .35rem;
      margin-top: 1rem
    }

    .pgbtn {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      border: 1.5px solid var(--border);
      background: transparent;
      color: var(--ink2);
      font-family: 'JetBrains Mono', monospace;
      font-size: .76rem;
      cursor: pointer;
      transition: all .14s;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .pgbtn:hover:not(:disabled) {
      background: var(--bg2);
      color: var(--ink)
    }

    .pgbtn.active {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink)
    }

    .pgbtn:disabled {
      opacity: .3;
      cursor: default
    }

    /* BUDGET/GOALS */
    .keu-seg-wrap {
      padding: .2rem 0 .9rem;
      display: flex;
      justify-content: center;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }
    .keu-seg-wrap::-webkit-scrollbar { display: none }
    @media(max-width:768px) {
      .keu-seg-wrap {
        justify-content: flex-start;
        padding-left: 12px;
        padding-right: 12px;
      }
    }

    .keu-seg {
      display: inline-flex;
      flex-shrink: 0;
      background: rgba(0, 0, 0, 0.04);
      
      border: 1px solid rgba(0, 0, 0, 0.04);
      border-radius: 99px;
      padding: 4px;
      gap: 2px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    }

    .keu-tab {
      display: flex;
      align-items: center;
      gap: .35rem;
      padding: 6px 14px;
      border-radius: 99px;
      border: none;
      background: transparent;
      color: var(--ink3);
      font-family: inherit;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
    }

    .keu-tab.active {
      background: #fff;
      color: var(--accent);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .keu-tab:not(.active):hover {
      background: rgba(0, 0, 0, 0.02);
      color: var(--ink);
    }

    @media(max-width:768px) {
      .keu-tab {
        padding: 6px 10px;
        gap: 0;
        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .keu-tab.active {
        padding: 6px 14px;
      }
      .keu-tab span {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        margin-left: 0;
        transition: max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin-left 0.28s;
      }
      .keu-tab.active span {
        max-width: 80px;
        opacity: 1;
        margin-left: 6px;
      }
    }

    .bgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
      gap: 1rem
    }

    .ggrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
      gap: 1rem
    }

    @media(max-width:640px) {

      .bgrid,
      .ggrid {
        grid-template-columns: 1fr
      }
    }

    .bcard,
    .gcard {
      background: var(--card);
      border: 1.5px solid var(--border);
      border-radius: var(--r);
      padding: 1.25rem;
      transition: border-color .2s, transform .2s, box-shadow .2s
    }

    .bcard:hover,
    .gcard:hover {
      border-color: var(--border-hi);
      transform: translateY(-2px);
      box-shadow: var(--shd-lg)
    }

    .bcard-hdr {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: .7rem
    }

    .bcard-cat {
      font-size: .88rem;
      font-weight: 600;
      color: var(--ink)
    }

    .bcard-name {
      font-size: .72rem;
      color: var(--ink3);
      margin-top: .1rem
    }

    .bcard-pct {
      font-family: 'Inter', sans-serif;
      font-size: 1.75rem;
      font-weight: 800;
      letter-spacing: -.04em;
      margin-bottom: .28rem
    }

    .bcard-amts {
      display: flex;
      justify-content: space-between;
      font-size: .74rem;
      margin-bottom: .55rem
    }

    .bcard-spent {
      color: var(--ink);
      font-weight: 500
    }

    .bcard-lim {
      color: var(--ink3)
    }

    .gcard-hdr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .7rem
    }

    .gcard-name {
      font-size: .88rem;
      font-weight: 600;
      color: var(--ink)
    }

    .gcard-amts {
      display: flex;
      align-items: baseline;
      gap: .36rem;
      margin-bottom: .55rem
    }

    .gcard-cur {
      font-family: 'Inter', sans-serif;
      font-size: 1.35rem;
      font-weight: 800;
      letter-spacing: -.04em;
      color: var(--ink)
    }

    .gcard-tgt {
      font-size: .75rem;
      color: var(--ink3)
    }

    .gcard-dl {
      font-size: .72rem;
      color: var(--ink3);
      margin-top: .45rem
    }

    .gcard-acts {
      display: flex;
      gap: .42rem;
      margin-top: .9rem
    }

    /* RECEIPT */
    .rlayout {
      display: grid;
      grid-template-columns: 305px 1fr;
      gap: 1.35rem;
      align-items: start
    }

    @media(min-width:1280px) {
      .rlayout {
        grid-template-columns: 360px 1fr
      }
    }

    @media(max-width:880px) {
      .rlayout {
        grid-template-columns: 1fr
      }
    }

    .dropzone {
      border: 2px dashed var(--border);
      border-radius: 12px;
      padding: 1.6rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      cursor: pointer;
      transition: all .2s;
      min-height: 145px;
      text-align: center
    }

    .dropzone:hover,
    .dropzone.over {
      border-color: var(--ink);
      background: var(--bg2)
    }

    .dz-txt {
      font-size: .82rem;
      color: var(--ink2)
    }

    .dz-link {
      color: var(--accent);
      font-weight: 600
    }

    .dz-hint {
      font-family: 'JetBrains Mono', monospace;
      font-size: .66rem;
      color: var(--ink3)
    }

    .rprev-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .65rem;
      margin-top: .65rem
    }

    .rprev {
      width: 100%;
      max-height: 210px;
      object-fit: contain;
      border-radius: 9px;
      border: 1.5px solid var(--border)
    }

    .clr-btn {
      background: none;
      border: 1.5px solid var(--border);
      border-radius: 99px;
      color: var(--ink3);
      font-family: 'Inter', inherit;
      font-size: .72rem;
      padding: .28rem .72rem;
      cursor: pointer;
      transition: all .14s
    }

    .clr-btn:hover {
      border-color: var(--expense);
      color: var(--expense)
    }

    .sstat {
      display: flex;
      align-items: center;
      gap: .45rem;
      padding: .6rem .9rem;
      border-radius: 9px;
      font-size: .79rem;
      margin-top: .65rem
    }

    .sstat.loading {
      background: var(--gold-dim);
      border: 1.5px solid rgba(212, 146, 10, .2);
      color: var(--gold)
    }

    .sstat.success {
      background: var(--income-dim);
      border: 1.5px solid rgba(0, 168, 120, .2);
      color: var(--income)
    }

    .sstat.error {
      background: var(--expense-dim);
      border: 1.5px solid rgba(230, 60, 30, .2);
      color: var(--expense)
    }

    /* ── FAB BOTTOM SHEET ── */
    .fab-sheet-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.5);
      z-index: 998;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
    }
    .fab-sheet-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }
    .fab-sheet {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 999;
      background: var(--gs-8, rgba(20,25,40,.95));
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-top: 1px solid var(--gs-border-hi, rgba(255,255,255,.1));
      border-radius: 20px 20px 0 0;
      padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
      transform: translateY(100%);
      transition: transform .3s cubic-bezier(.4,0,.2,1);
    }
    .fab-sheet.open {
      transform: translateY(0);
    }
    .fab-sheet-handle {
      width: 36px;
      height: 4px;
      border-radius: 2px;
      background: var(--ink3, rgba(255,255,255,.25));
      margin: 0 auto 10px;
    }
    .fab-sheet-title {
      font-size: .82rem;
      font-weight: 700;
      color: var(--ink);
      margin: 0 0 14px;
      text-align: center;
      letter-spacing: .02em;
    }
    .fab-sheet-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .fab-sheet-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 12px 4px;
      background: transparent;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      transition: background .15s;
      color: var(--ink);
    }
    .fab-sheet-item:hover,
    .fab-sheet-item:active {
      background: var(--gs-4, rgba(255,255,255,.06));
    }
    .fab-sheet-item .fo-ico {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fab-sheet-item span {
      font-size: .68rem;
      font-weight: 600;
      text-align: center;
      line-height: 1.2;
      color: var(--ink2, rgba(255,255,255,.7));
    }

    /* ── FILTER BAR — frosted sticky ── */
    .fbar {
      display: flex;
      gap: .55rem;
      margin-bottom: .6rem;
      flex-wrap: wrap;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--gs-9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: .5rem .4rem;
      border-radius: 12px;
      border: 1.5px solid var(--gs-border)
    }

    .fsel {
      padding: .42rem .72rem;
      background: var(--gs-4);
      border: 1.5px solid var(--gs-border);
      border-radius: 99px;
      color: var(--ink);
      font-family: 'JetBrains Mono', monospace;
      font-size: .72rem;
      outline: none;
      cursor: pointer;
      transition: border-color .14s
    }

    .fsel:focus {
      border-color: var(--accent)
    }

    .finput {
      width: 100%;
      padding: .52rem .82rem;
      background: var(--gs-4);
      border: 1.5px solid var(--gs-border);
      border-radius: 99px;
      color: var(--ink);
      font-family: 'Inter', inherit;
      font-size: .8rem;
      outline: none;
      transition: border-color .15s;
      -webkit-appearance: none;
      appearance: none;
    }

    .finput.srch {
      padding-left: 2.1rem
    }

    .finput.mon {
      min-width: 130px;
      flex: none;
      width: auto
    }

    .finput:focus {
      border-color: var(--accent);
      background: var(--gs-4)
    }

    @media(max-width:640px) {
      .fbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: .5rem !important;
        padding: .65rem !important;
      }
      .fsrch {
        grid-column: span 2 !important;
        width: 100% !important;
        min-width: 0 !important;
      }
      .fsel {
        width: 100% !important;
        box-sizing: border-box !important;
      }
      .finput.mon {
        grid-column: span 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }
    }

    /* ── EMPTY STATES — frosted ── */
    .empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .65rem;
      padding: 2.5rem;
      text-align: center;
      color: var(--ink3);
      font-size: .82rem;
      background: var(--gs-5);
      
      border: 1.5px solid var(--gs-border);
      border-radius: 14px
    }

    .skeleton {
      background: linear-gradient(90deg, var(--gs-3) 25%, var(--gs-4) 50%, var(--gs-3) 75%);
      background-size: 200% 100%;
      animation: skeletonLoad 1.5s infinite ease-in-out;
      border-color: transparent !important;
      color: transparent !important;
      pointer-events: none
    }

    .skeleton * {
      visibility: hidden
    }

    @keyframes skeletonLoad {
      0% {
        background-position: 200% 0
      }

      100% {
        background-position: -200% 0
      }
    }

    html[data-theme="dark"] .skeleton {
      background: linear-gradient(90deg, var(--gs-3) 25%, var(--gs-4) 50%, var(--gs-3) 75%);
      background-size: 200% 100%
    }

    /* ── SCAN STRUK RESULT ── */
    /* Tab selector → segmented frosted */
    .rtabs {
      display: flex;
      background: var(--gs-3);
      
      border: 1.5px solid var(--gs-border);
      border-radius: 12px;
      padding: 3px;
      gap: 2px;
      margin-bottom: .9rem;
      width: fit-content
    }

    .rtab {
      padding: .28rem .82rem;
      border-radius: 9px;
      border: none;
      background: transparent;
      color: var(--ink3);
      font-family: 'JetBrains Mono', monospace;
      font-size: .68rem;
      font-weight: 500;
      cursor: pointer;
      transition: all .18s
    }

    .rtab.active {
      background: rgba(37, 99, 235, .13);
      color: var(--accent);
      font-weight: 700;
      border: 1px solid rgba(37, 99, 235, .22);
      box-shadow: 0 1px 4px rgba(37, 99, 235, .1)
    }

    .rtab-c {
      display: none
    }

    .rtab-c.active {
      display: block
    }

    /* Result header frosted */
    .rres-hdr {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 1rem;
      padding: .7rem .9rem;
      border-radius: 12px;
      background: var(--gs-2);
      
      border: 1.5px solid var(--gs-border)
    }

    .rres-store {
      font-weight: 700;
      font-size: .97rem;
      color: var(--ink)
    }

    .rres-meta {
      font-size: .72rem;
      color: var(--ink3);
      margin-top: .16rem
    }

    /* Confidence badge frosted */
    .rres-conf {
      font-family: 'JetBrains Mono', monospace;
      font-size: .66rem;
      padding: .22rem .6rem;
      border-radius: 99px;
      background: var(--gs-4);
      
      border: 1.5px solid var(--gs-border-hi);
      white-space: nowrap;
      font-weight: 600
    }

    /* Summary boxes frosted */
    .sgrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .55rem
    }

    .sbox {
      background: var(--gs-2);
      
      border: 1.5px solid var(--gs-border);
      border-radius: 12px;
      padding: .68rem .9rem;
      transition: border-color .14s
    }

    .sbox.total {
      grid-column: 1/-1;
      background: linear-gradient(135deg, rgba(29, 78, 216, .82), rgba(14, 165, 233, .75));
      
      border-color: rgba(255, 255, 255, .35)
    }

    .sbox.total .sbox-lbl {
      color: rgba(255, 255, 255, .5)
    }

    .sbox.total .sbox-val {
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 1.1rem;
      font-weight: 700
    }

    .sbox-lbl {
      font-family: 'JetBrains Mono', monospace;
      font-size: .64rem;
      color: var(--ink3);
      margin-bottom: .2rem
    }

    .sbox-val {
      font-size: .95rem;
      color: var(--ink);
      font-weight: 600
    }

    /* Items table frosted rows */
    .itbl {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 3px;
      font-size: .74rem
    }

    .itbl thead tr th {
      padding: .38rem .68rem;
      text-align: left;
      font-family: 'JetBrains Mono', monospace;
      font-size: .6rem;
      color: var(--ink3);
      text-transform: uppercase;
      letter-spacing: .07em;
      background: var(--gs-5);
      backdrop-filter: blur(6px)
    }

    .itbl thead tr th:first-child {
      border-radius: 8px 0 0 8px
    }

    .itbl thead tr th:last-child {
      border-radius: 0 8px 8px 0
    }

    .itbl tbody tr td {
      padding: .42rem .68rem;
      color: var(--ink2);
      background: var(--gs-2);
      border-top: 1.5px solid var(--gs-border);
      border-bottom: 1.5px solid var(--gs-border)
    }

    .itbl tbody tr td:first-child {
      border-left: 1.5px solid var(--gs-border);
      border-radius: 8px 0 0 8px
    }

    .itbl tbody tr td:last-child {
      border-right: 1.5px solid var(--gs-border);
      border-radius: 0 8px 8px 0
    }

    .iinput {
      background: transparent;
      border: none;
      color: var(--ink);
      font-family: 'Inter', inherit;
      font-size: .74rem;
      width: 100%;
      outline: none
    }

    .icat {
      font-family: 'JetBrains Mono', monospace;
      font-size: .62rem;
      padding: .16rem .46rem;
      background: var(--gs-4);
      border: 1.5px solid var(--gs-border-hi);
      border-radius: 99px;
      color: var(--ink3)
    }

    /* Raw text frosted */
    .rawtext {
      font-size: .72rem;
      color: var(--ink3);
      white-space: pre-wrap;
      word-break: break-word;
      line-height: 1.6;
      max-height: 260px;
      overflow-y: auto;
      background: var(--gs-3);
      
      border: 1.5px solid var(--gs-border);
      border-radius: 10px;
      padding: .7rem .85rem
    }

    /* Save mode radio options frosted */
    .smode-grp {
      display: flex;
      flex-direction: column;
      gap: .35rem
    }

    .smode-opt {
      display: flex;
      align-items: center;
      gap: .52rem;
      font-size: .79rem;
      color: var(--ink2);
      cursor: pointer;
      padding: .42rem .7rem;
      border-radius: 10px;
      background: var(--gs-2);
      
      border: 1.5px solid var(--gs-border);
      transition: border-color .14s, background .14s
    }

    .smode-opt:hover {
      background: var(--gs-4);
      border-color: var(--gs-border-hi)
    }

    .smode-opt input {
      accent-color: var(--accent)
    }

    .sprev {
      font-family: 'JetBrains Mono', monospace;
      font-size: .72rem;
      color: var(--accent);
      margin-bottom: .65rem;
      padding: .4rem .75rem;
      background: rgba(37, 99, 235, .06);
      border: 1.5px solid rgba(37, 99, 235, .15);
      border-radius: 8px
    }

    /* Scan history items frosted */
    .rhist {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .35rem
    }

    .rhist-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .62rem .8rem;
      border-radius: 11px;
      background: var(--gs-2);
      
      border: 1.5px solid var(--gs-border);
      transition: border-color .14s, background .14s
    }

    .rhist-item:hover {
      background: var(--gs-4);
      border-color: var(--gs-border-hi)
    }

    .rhist-item > div:first-child {
      min-width: 0;
      flex: 1;
      margin-right: .5rem;
    }

    .rhist-store {
      font-size: .8rem;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rhist-meta {
      font-size: .68rem;
      color: var(--ink3);
      margin-top: .08rem
    }

    .rhist-total {
      flex-shrink: 0;
      font-family: 'Inter', sans-serif;
      font-size: .8rem;
      font-weight: 700;
      color: var(--expense)
    }

    .ocrprog-bar {
      height: 4px;
      border-radius: 99px;
      background: var(--bg3);
      overflow: hidden;
      margin-bottom: .42rem
    }

    .ocrprog-fill {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      transition: width .3s ease
    }

    .ocrprog-lbl {
      font-family: 'JetBrains Mono', monospace;
      font-size: .68rem;
      color: var(--ink3)
    }

    .rph {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .65rem;
      min-height: 175px;
      color: var(--ink3);
      text-align: center
    }

    .rph p {
      font-size: .82rem
    }

    .rres-hdr {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 1rem;
      padding-bottom: .9rem;
      border-bottom: 1.5px solid var(--border)
    }

    .rres-store {
      font-weight: 700;
      font-size: .97rem;
      color: var(--ink)
    }

    .rres-meta {
      font-size: .72rem;
      color: var(--ink3);
      margin-top: .16rem
    }

    .rres-conf {
      font-family: 'JetBrains Mono', monospace;
      font-size: .66rem;
      padding: .2rem .52rem;
      border-radius: 99px;
      background: var(--bg2);
      border: 1.5px solid var(--border);
      white-space: nowrap
    }

    /* RECEIPT TABS & SUMMARY — defined above in frosted section */
    /* SETTINGS */
    .sgrid2 {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
      gap: 1rem
    }

    @media(max-width:640px) {
      .sgrid2 {
        grid-template-columns: 1fr
      }
    }

    .acc-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .42rem
    }

    .acc-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .6rem .72rem;
      border-radius: 9px;
      font-size: .8rem;
      color: var(--ink2);
      border-bottom: 1px solid var(--bg3)
    }

    .acc-item-bal {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      color: var(--ink)
    }

    .cat-chips {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: .42rem
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: .36rem;
      padding: .28rem .62rem;
      border-radius: 99px;
      border: 1.5px solid var(--border);
      background: var(--bg2);
      font-size: .75rem;
      color: var(--ink2)
    }

    .chip-del {
      background: none;
      border: none;
      color: var(--ink3);
      cursor: pointer;
      font-size: .68rem;
      padding: 0;
      margin-left: .1rem;
      transition: color .14s
    }

    .chip-del:hover {
      color: var(--expense)
    }

    .danger-zone {
      margin-top: 1.35rem;
      padding: .9rem;
      border-radius: 9px;
      border: 1.5px solid rgba(230, 60, 30, .15);
      background: rgba(230, 60, 30, .04)
    }

    .danger-zone h4 {
      font-family: 'JetBrains Mono', monospace;
      font-size: .68rem;
      color: var(--expense);
      margin-bottom: .65rem;
      font-weight: 500;
      letter-spacing: .07em;
      text-transform: uppercase
    }

    .theme-sel {
      display: flex;
      gap: .5rem;
      margin-top: .5rem;
      flex-wrap: wrap
    }

    .theme-opt {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .38rem;
      padding: .55rem .68rem;
      border-radius: 10px;
      border: 1.5px solid var(--border);
      background: var(--bg2);
      cursor: pointer;
      font-family: 'JetBrains Mono', monospace;
      font-size: .66rem;
      font-weight: 500;
      color: var(--ink3);
      transition: all .18s;
      flex: 1;
      min-width: 75px;
      font-family: inherit
    }

    .theme-opt:hover {
      border-color: var(--border-hi);
      color: var(--ink)
    }

    .theme-opt.active {
      border-color: var(--ink);
      color: var(--ink);
      background: var(--bg)
    }

    .tdot {
      width: 20px;
      height: 20px;
      border-radius: 50%
    }

    /* MODAL */
    .moverlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(15, 23, 42, .35);
      
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem
    }

    .moverlay.open {
      display: flex;
      animation: fadeIn .17s ease
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .modal {
      background: var(--modal-bg);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1.5px solid var(--gs-border-hi);
      border-radius: 20px;
      box-shadow: 0 24px 80px rgba(37, 99, 235, .18), 0 4px 16px rgba(0, 0, 0, .06);
      width: 100%;
      max-width: 445px;
      max-height: 90vh;
      overflow-y: auto;
      animation: slideUp .2s ease
    }

    @keyframes slideUp {
      from {
        transform: translateY(14px);
        opacity: 0
      }

      to {
        transform: translateY(0);
        opacity: 1
      }
    }

    .mhdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 1.4rem 0;
      margin-bottom: .65rem
    }

    .mtitle {
      font-family: 'Inter', sans-serif;
      font-size: .97rem;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.02em
    }

    .mclose {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      background: var(--bg2);
      color: var(--ink3);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: .8rem;
      transition: all .14s;
      line-height: 1
    }

    .mclose:hover {
      background: var(--bg3);
      color: var(--ink)
    }

    .mbody {
      padding: .4rem 1.4rem 1.4rem
    }

    .fg {
      margin-bottom: .9rem
    }

    .frow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .65rem
    }

    @media(max-width:480px) {
      .frow {
        grid-template-columns: 1fr
      }
    }

    .flbl {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: .66rem;
      font-weight: 500;
      color: var(--ink3);
      text-transform: uppercase;
      letter-spacing: .09em;
      margin-bottom: .35rem
    }

    .finp {
      width: 100%;
      padding: .58rem .82rem;
      background: var(--gs-4);
      
      border: 1.5px solid var(--gs-border);
      border-radius: 10px;
      color: var(--ink);
      font-family: 'Inter', inherit;
      font-size: .82rem;
      outline: none;
      transition: border-color .14s, background .14s;
      -webkit-appearance: none;
      appearance: none;
    }

    .finp:focus {
      border-color: var(--accent);
      background: var(--gs-4);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .08)
    }

    .finp option {
      background: var(--modal-bg)
    }

    .type-sel {
      display: flex;
      gap: .42rem;
      margin-bottom: 1.1rem
    }

    .tbtn {
      flex: 1;
      padding: .52rem .38rem;
      border-radius: 9px;
      border: 1.5px solid var(--border);
      background: var(--bg2);
      color: var(--ink3);
      font-family: 'Inter', inherit;
      font-size: .75rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .18s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .28rem;
      line-height: 1
    }

    .tbtn svg {
      opacity: .6;
      transition: opacity .18s
    }

    .tbtn.inc {
      background: var(--income-dim);
      border-color: rgba(0, 168, 120, .35);
      color: var(--income)
    }

    .tbtn.inc svg {
      opacity: 1
    }

    .tbtn.exp {
      background: var(--expense-dim);
      border-color: rgba(230, 60, 30, .35);
      color: var(--expense)
    }

    .tbtn.exp svg {
      opacity: 1
    }

    .tbtn.trf {
      background: rgba(28, 63, 255, .09);
      border-color: rgba(28, 63, 255, .3);
      color: var(--accent2)
    }

    .tbtn.trf svg {
      opacity: 1
    }

    .mfoot {
      display: flex;
      gap: .42rem;
      justify-content: flex-end;
      margin-top: 1.1rem;
      padding-top: .9rem;
      border-top: 1.5px solid var(--border)
    }

    @media(max-width:480px) {
      .mfoot {
        flex-direction: column-reverse;
        gap: .5rem;
      }
      .mfoot button,
      .mfoot .btn,
      .mfoot .btn2 {
        width: 100% !important;
        margin: 0 !important;
      }
    }

    .hint {
      font-family: 'JetBrains Mono', monospace;
      font-size: .66rem;
      color: var(--ink3)
    }

    /* ACCOUNT DETAIL BOTTOM SHEET */
    .acc-sheet-overlay {
      position: fixed;
      inset: 0;
      z-index: 8500;
      background: rgba(15, 23, 42, .4);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s ease
    }

    .acc-sheet-overlay.open {
      opacity: 1;
      pointer-events: all
    }

    .acc-sheet {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 8501;
      background: var(--gs-7);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border-radius: 26px 26px 0 0;
      border-top: 1.5px solid var(--gs-border-hi);
      box-shadow: 0 -20px 80px rgba(37, 99, 235, .22), 0 -2px 12px rgba(0, 0, 0, .06);
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform .34s cubic-bezier(.32, 1, .6, 1)
    }

    .acc-sheet.open {
      transform: translateY(0)
    }

    .acc-sheet-handle {
      width: 40px;
      height: 4px;
      border-radius: 99px;
      background: var(--gs-border-hi);
      margin: .85rem auto .15rem;
      flex-shrink: 0
    }

    /* Header gradient banner */
    .acc-sheet-banner {
      padding: 1.1rem 1.25rem .95rem;
      flex-shrink: 0;
      position: relative;
      overflow: hidden
    }

    .acc-sheet-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 0;
      z-index: 0
    }

    .acc-sheet-top {
      display: flex;
      align-items: center;
      gap: .8rem;
      margin-bottom: .95rem;
      position: relative;
      z-index: 1
    }

    .acc-sheet-ava {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: .82rem;
      color: #fff;
      flex-shrink: 0;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .22)
    }

    .acc-sheet-ava img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 14px
    }

    .acc-sheet-ava-fb {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: .82rem;
      color: #fff
    }

    .acc-sheet-name {
      font-size: .78rem;
      font-weight: 500;
      color: var(--ink3);
      letter-spacing: .01em;
      margin-bottom: .1rem
    }

    .acc-sheet-bal {
      font-size: 1.65rem;
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--ink)
    }

    .acc-sheet-bal.neg {
      color: var(--expense)
    }

    .acc-sheet-close {
      margin-left: auto;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1.5px solid var(--gs-border);
      background: var(--gs-3);
      
      color: var(--ink3);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: all .14s
    }

    .acc-sheet-close:hover {
      background: rgba(239, 68, 68, .1);
      color: var(--expense)
    }

    /* Stats row */
    .acc-group-card {
      background: rgba(37, 99, 235, .06);
      
      border: 1.5px solid rgba(37, 99, 235, .15);
      border-radius: 16px;
      padding: .75rem .9rem;
      display: flex;
      flex-direction: column;
      gap: .7rem
    }

    .acc-sheet-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .6rem;
      margin-bottom: 1rem;
      position: relative;
      z-index: 1
    }

    .acc-stat {
      background: var(--gs-4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1.5px solid var(--gs-border);
      border-radius: 14px;
      padding: .65rem .9rem;
      transition: border-color .15s
    }

    .acc-stat-lbl {
      font-size: .6rem;
      font-family: 'JetBrains Mono', monospace;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--ink3);
      margin-bottom: .22rem
    }

    .acc-stat-val {
      font-size: .98rem;
      font-weight: 700;
      letter-spacing: -.02em
    }

    /* Controls row */
    .acc-sheet-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .7rem;
      padding: 0 1.25rem .75rem;
      flex-shrink: 0
    }

    /* Segmented frosted control */
    .acc-seg {
      display: flex;
      background: var(--gs-2);
      
      border: 1.5px solid var(--gs-border);
      border-radius: 12px;
      padding: 3px;
      gap: 2px
    }

    .acc-tab {
      padding: .3rem .82rem;
      border-radius: 9px;
      border: none;
      background: transparent;
      color: var(--ink3);
      font-family: 'JetBrains Mono', monospace;
      font-size: .68rem;
      font-weight: 500;
      cursor: pointer;
      transition: all .18s;
      white-space: nowrap
    }

    .acc-tab.active {
      background: rgba(37, 99, 235, .13);
      color: var(--accent);
      font-weight: 700;
      border: 1px solid rgba(37, 99, 235, .22);
      box-shadow: 0 1px 4px rgba(37, 99, 235, .1)
    }

    /* Month select frosted */
    .acc-mon-sel {
      padding: .32rem .7rem;
      border-radius: 10px;
      border: 1.5px solid var(--gs-border);
      background: var(--gs-2);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: var(--ink);
      font-family: 'JetBrains Mono', monospace;
      font-size: .68rem;
      outline: none;
      cursor: pointer;
      transition: border-color .14s
    }

    .acc-mon-sel:focus {
      border-color: var(--accent)
    }

    /* Body */
    .acc-sheet-body {
      flex: 1;
      overflow-y: auto;
      padding: 0 1.25rem 1rem
    }

    .acc-sheet-body::-webkit-scrollbar {
      width: 3px
    }

    .acc-tx-group {
      margin-bottom: .85rem
    }

    .acc-tx-date {
      font-family: 'JetBrains Mono', monospace;
      font-size: .6rem;
      color: var(--ink3);
      text-transform: uppercase;
      letter-spacing: .1em;
      padding: .35rem .6rem;
      border-radius: 8px;
      background: var(--gs-3);
      margin-bottom: .35rem;
      display: inline-block
    }

    .acc-tx-item {
      display: flex;
      align-items: center;
      gap: .65rem;
      padding: .6rem .75rem;
      border-radius: 13px;
      background: var(--gs-2);
      
      border: 1.5px solid var(--gs-border);
      margin-bottom: .38rem;
      transition: border-color .14s
    }

    .acc-tx-item:hover {
      border-color: var(--gs-border-hi);
      background: var(--gs-4)
    }

    .acc-tx-ico {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .acc-tx-ico.inc {
      background: var(--income-dim);
      color: var(--income)
    }

    .acc-tx-ico.exp {
      background: var(--expense-dim);
      color: var(--expense)
    }

    .acc-tx-ico.trf {
      background: rgba(37, 99, 235, .08);
      color: var(--accent)
    }

    .acc-tx-info {
      flex: 1;
      min-width: 0
    }

    .acc-tx-name {
      font-size: .82rem;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .acc-tx-cat {
      font-size: .69rem;
      color: var(--ink3);
      margin-top: .06rem
    }

    .acc-tx-amt {
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: -.02em;
      flex-shrink: 0
    }

    .acc-tx-amt.inc {
      color: var(--income)
    }

    .acc-tx-amt.exp {
      color: var(--expense)
    }

    .acc-tx-amt.trf {
      color: var(--accent)
    }

    /* Footer */
    .acc-sheet-foot {
      padding: .8rem 1.25rem 1.2rem;
      border-top: 1.5px solid var(--gs-border);
      flex-shrink: 0;
      background: var(--gs-6);
      backdrop-filter: blur(20px)
    }

    @media(min-width:769px) {
      .acc-sheet {
        max-width: 540px;
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(100%);
        border-radius: 22px;
        bottom: 2rem
      }

      .acc-sheet.open {
        transform: translateX(-50%) translateY(0)
      }
    }

    .toasts {
      position: fixed;
      bottom: 5rem;
      right: 1.2rem;
      z-index: 20000;
      display: flex;
      flex-direction: column;
      gap: .42rem
    }

    @media(min-width:769px) {
      .toasts {
        bottom: 1.5rem
      }
    }

    .toast {
      display: flex;
      align-items: center;
      gap: .55rem;
      padding: .65rem 1rem;
      border-radius: 12px;
      font-size: .8rem;
      font-weight: 600;
      animation: toastIn .26s ease;
      box-shadow: 0 8px 32px rgba(37, 99, 235, .15);
      min-width: 195px;
      max-width: 310px;
      
      -webkit-backdrop-filter: blur(16px)
    }

    .toast.ok {
      background: var(--modal-bg);
      border: 1.5px solid rgba(16, 185, 129, .3);
      color: var(--income)
    }

    .toast.err {
      background: var(--modal-bg);
      border: 1.5px solid rgba(239, 68, 68, .3);
      color: var(--expense)
    }

    .toast.info {
      background: rgba(37, 99, 235, .9);
      border: 1.5px solid rgba(255, 255, 255, .2);
      color: rgba(255, 255, 255, .9)
    }

    @keyframes toastIn {
      from {
        transform: translateX(14px);
        opacity: 0
      }

      to {
        transform: translateX(0);
        opacity: 1
      }
    }

    @keyframes toastOut {
      from {
        opacity: 1
      }

      to {
        opacity: 0;
        transform: translateX(14px)
      }
    }

    /* MISC */
    .t-inc {
      color: var(--income)
    }

    .t-exp {
      color: var(--expense)
    }

    .t-gold {
      color: var(--gold)
    }

    .t-muted {
      color: var(--ink3)
    }

    .spinner {
      width: 14px;
      height: 14px;
      border: 2px solid rgba(212, 146, 10, .25);
      border-top-color: var(--gold);
      border-radius: 50%;
      animation: spin .62s linear infinite;
      flex-shrink: 0
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    ::-webkit-scrollbar {
      width: 4px;
      height: 4px
    }

    ::-webkit-scrollbar-track {
      background: transparent
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, .1);
      border-radius: 99px
    }

    .hide-mob {
      display: table-cell
    }

    /* ── CUSTOM DROPDOWN ── */
    .cdd {
      position: relative;
      width: 100%
    }

    .cdd-trigger {
      width: 100%;
      padding: .58rem .82rem;
      background: var(--bg2);
      border: 1.5px solid var(--border);
      border-radius: 9px;
      color: var(--ink);
      font-family: 'Inter', inherit;
      font-size: .82rem;
      outline: none;
      transition: border-color .14s;
      -webkit-appearance: none;
      appearance: none;
      display: flex;
      align-items: center;
      gap: .52rem;
      cursor: pointer;
      user-select: none;
      min-height: 38px
    }

    .cdd-trigger:focus,
    .cdd-trigger.open {
      border-color: var(--ink);
      box-shadow: 0 0 0 3px rgba(10, 10, 15, .06)
    }

    .cdd-trigger-ico {
      display: flex;
      align-items: center;
      flex-shrink: 0
    }

    .cdd-trigger-lbl {
      flex: 1;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .cdd-chevron {
      margin-left: auto;
      flex-shrink: 0;
      transition: transform .18s;
      opacity: .5
    }

    .cdd-trigger.open .cdd-chevron {
      transform: rotate(180deg)
    }

    .cdd-menu {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      z-index: 500;
      background: var(--modal-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1.5px solid var(--gs-border-hi);
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(37, 99, 235, .18), 0 2px 8px rgba(0, 0, 0, .08);
      max-height: 210px;
      overflow-y: auto;
      display: none;
      animation: ddIn .15s ease
    }

    @keyframes ddIn {
      from {
        opacity: 0;
        transform: translateY(-4px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .cdd-menu.open {
      display: block
    }

    .cdd-opt {
      display: flex;
      align-items: center;
      gap: .52rem;
      padding: .52rem .78rem;
      cursor: pointer;
      font-size: .82rem;
      color: var(--ink);
      transition: background .12s;
      border-radius: 0
    }

    .cdd-opt:first-child {
      border-radius: 10px 10px 0 0
    }

    .cdd-opt:last-child {
      border-radius: 0 0 10px 10px
    }

    .cdd-opt:only-child {
      border-radius: 10px
    }

    .cdd-opt:hover {
      background: rgba(37, 99, 235, .07)
    }

    .cdd-opt.selected {
      background: rgba(37, 99, 235, .1);
      font-weight: 600
    }

    .cdd-opt-ico {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .cdd-opt-lbl {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    /* Bank color badge */
    .bk-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0
    }

    /* Goal icon picker */
    .goal-icons {
      display: flex;
      flex-wrap: wrap;
      gap: .42rem;
      margin-top: .3rem
    }

    .goal-ico-btn {
      width: 38px;
      height: 38px;
      border-radius: 9px;
      border: 1.5px solid var(--border);
      background: var(--bg2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .14s;
      color: var(--ink3)
    }

    .goal-ico-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(37, 99, 235, .07)
    }

    .goal-ico-btn.selected {
      border-color: var(--accent);
      background: rgba(37, 99, 235, .12);
      color: var(--accent)
    }

    /* Goal card icon */
    .gcard-ico {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: rgba(37, 99, 235, .1);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    @media(max-width:640px) {
      .hide-mob {
        display: none
      }

      .ptitle {
        font-size: 1.65rem
      }

      .dc {
        width: 258px;
        height: 155px
      }

      .dc-bal {
        font-size: 1rem
      }

      .nw-card {
        padding: 1.15rem 1.35rem 1rem;
        border-radius: 20px !important
      }

      .nw-val {
        font-size: clamp(1.6rem, 7vw, 2.2rem)
      }

      .nw-item-val {
        font-size: .8rem
      }

      .cdd-menu {
        max-height: 180px
      }

      .nw-grid {
        gap: .45rem .7rem
      }
    }

    /* ── BILLS ── */
    .bill-grid {
      display: flex;
      flex-direction: column;
      gap: .65rem;
      margin-top: .2rem
    }


    /* Bill type chips */
    .bill-type-opts {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
      margin-top: .3rem
    }

    .bill-type-opt {
      padding: .3rem .75rem;
      border-radius: 99px;
      border: 1.5px solid var(--gs-border);
      background: var(--gs-2);
      color: var(--ink3);
      font-family: inherit;
      font-size: .76rem;
      font-weight: 500;
      cursor: pointer;
      transition: all .14s
    }

    .bill-type-opt.active {
      border-color: var(--accent);
      background: rgba(37, 99, 235, .1);
      color: var(--accent);
      font-weight: 700
    }

    /* Dashboard bill widget */
    .dash-bill-item {
      display: flex;
      align-items: center;
      gap: .65rem;
      padding: .6rem 0;
      border-bottom: 1px solid var(--gs-border)
    }

    .dash-bill-item:last-child {
      border-bottom: none
    }

    .dash-bill-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .dash-bill-info {
      flex: 1;
      min-width: 0
    }

    .dash-bill-name {
      font-size: .82rem;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .dash-bill-sub {
      font-size: .7rem;
      color: var(--ink3);
      margin-top: .08rem
    }

    .dash-bill-amt {
      font-size: .84rem;
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
      flex-shrink: 0
    }

    .dash-bill-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .55rem 0 0;
      margin-top: .1rem
    }

    html[data-theme="dark"] {
      --btn-bg: rgba(37, 99, 235, .85);
      --btn-fg: #fff
    }

    html[data-theme="dark"] .btn {
      background: var(--btn-bg);
      color: var(--btn-fg)
    }

    html[data-theme="dark"] .btn:hover {
      background: rgba(37, 99, 235, 1)
    }

    html[data-theme="dark"] .acc-group-card {
      background: rgba(37, 99, 235, .1);
      border-color: rgba(37, 99, 235, .2)
    }

    html[data-theme="dark"] .acc-stat-lbl {
      color: var(--ink3)
    }

    html[data-theme="dark"] .acc-stat-val:not(.t-inc):not(.t-exp):not(.t-trf) {
      color: var(--ink)
    }

    html[data-theme="dark"] .acc-tab {
      color: var(--ink3)
    }

    html[data-theme="dark"] .acc-tab.active {
      background: rgba(37, 99, 235, .2);
      color: var(--accent)
    }

    /* chart glass terang - pastikan plugin tooltip readable */
    .chartjs-tooltip {
      background: rgba(15, 23, 42, .88) !important;
      color: #fff !important
    }
  
    /* Bills Hero Dashboard */
    .bills-hero { display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
    .bills-hero-main {
      background: var(--gs-1);
      backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(255,255,255,.6); border-radius: 20px;
      padding: 1.25rem 1.4rem 1.1rem;
      box-shadow: 0 8px 32px rgba(99,120,200,.10), inset 0 1px 0 rgba(255,255,255,.7);
    }
    .bills-hero-label-sm { font-size:0.68rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--ink3); margin-bottom:4px; }
    .bills-hero-total { font-family:'Inter',sans-serif; font-size:2rem; font-weight:800; color:var(--ink); letter-spacing:-0.04em; line-height:1.1; }
    .bills-hero-sub { font-size:0.75rem; color:var(--ink3); margin-top:3px; margin-bottom:14px; }
    .bills-hero-segbar { display:flex; gap:3px; height:7px; border-radius:99px; overflow:hidden; margin-bottom:10px; }
    .bills-hero-segbar-seg { height:100%; border-radius:99px; }
    .bills-hero-legend { display:flex; align-items:center; }
    .bhl-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
    .bhl-txt { font-size:0.68rem; color:var(--ink3); margin-left:4px; }
    .bills-hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .bills-stat-card {
      background: var(--gs-1);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,.6); border-radius: 16px;
      padding: 14px 12px; text-align:center;
      box-shadow: 0 4px 16px rgba(99,120,200,.08), inset 0 1px 0 rgba(255,255,255,.7);
    }
    .bills-stat-icon { margin-bottom:6px; display:flex; justify-content:center; }
    .bills-stat-val { font-family:'Inter',sans-serif; font-size:1.5rem; font-weight:800; line-height:1; }
    .bills-stat-lbl { font-size:0.72rem; font-weight:600; color:var(--ink); margin-top:4px; }
    .bills-stat-sub { font-size:0.62rem; color:var(--ink3); margin-top:2px; }

    /* Swipe confirm modal overlay */
    .swipe-confirm-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(4px);
      z-index: 3000;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: env(safe-area-inset-bottom, 0);
      animation: fadeIn 0.18s ease;
    }
    .swipe-confirm-sheet {
      background: var(--surface, #fff);
      border-radius: 24px 24px 0 0;
      padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0));
      width: 100%;
      max-width: 480px;
      box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
      animation: slideUp 0.25s cubic-bezier(.34,1.1,.64,1);
    }
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .swipe-confirm-title { font-size: 0.8rem; color: var(--ink3); margin-bottom: 0.4rem; }
    .swipe-confirm-name { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 0.25rem; }
    .swipe-confirm-amt { font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; margin-bottom: 1.2rem; }
    .swipe-confirm-btns { display: flex; gap: 0.6rem; }
    .swipe-confirm-cancel { flex: 1; padding: 0.7rem; border-radius: 14px; border: 1.5px solid var(--gs-border); background: transparent; color: var(--ink); font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
    .swipe-confirm-ok { flex: 2; padding: 0.7rem; border-radius: 14px; border: none; background: linear-gradient(135deg, #22c578, #16a34a); color: #fff; font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(34,197,120,0.3); }



    /* Premium bill action buttons */
    .bill-btn-hist-new {
      width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:all 0.18s ease; flex-shrink:0;
      background:rgba(16,185,129,0.10); border:1px solid rgba(16,185,129,0.25); color:#34d399;
    }
    .bill-btn-hist-new:hover {
      background:rgba(16,185,129,0.20);
      border-color:rgba(16,185,129,0.50);
      transform:translateY(-1px);
    }
    .bill-btn-edit-new {
      width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:all 0.18s ease; flex-shrink:0;
      background:rgba(37,99,235,0.10); border:1px solid rgba(37,99,235,0.25); color:#60a5fa;
    }
    .bill-btn-edit-new:hover { background:rgba(37,99,235,0.22); border-color:rgba(37,99,235,0.45); color:#93c5fd; transform:translateY(-1px); }
    .bill-btn-del-new {
      width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:all 0.18s ease; flex-shrink:0;
      background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.22); color:#f87171;
    }
    .bill-btn-del-new:hover { background:rgba(239,68,68,0.20); border-color:rgba(239,68,68,0.45); color:#fca5a5; transform:translateY(-1px); }


    /* ── GLASS CARD UNIVERSAL ── */
    .glass-card {
      background: var(--gs-1);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,.6);
      border-radius: 20px;
      padding: 20px 22px;
      position: relative; overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 8px 32px rgba(99,120,200,.10), inset 0 1px 0 rgba(255,255,255,.8);
    }
    .glass-card::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 60%);
      border-radius: 20px; pointer-events: none;
    }
    .glass-card:hover { transform: translateY(-2px); box-shadow: var(--shd); }

    /* ── SUMMARY STRIP ── */
    .keu-summary-strip {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 10px; margin-bottom: 18px;
    }
    @media(max-width:640px) {
      .keu-summary-strip {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .keu-summary-card {
        padding: 10px 14px;
      }
      .keu-summary-value {
        font-size: 1.15rem;
      }
    }
    .keu-summary-card {
      background: var(--gs-1);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,.6); border-radius: 16px;
      padding: 14px 16px;
      box-shadow: 0 4px 16px rgba(99,120,200,.08), inset 0 1px 0 rgba(255,255,255,.7);
    }
    .keu-summary-label {
      font-size: 0.62rem; font-weight: 700; letter-spacing: .10em;
      text-transform: uppercase; color: var(--ink3); margin-bottom: 5px;
    }
    .keu-summary-value {
      font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 800;
      color: var(--ink); letter-spacing: -0.03em; line-height: 1.2;
    }
    .keu-summary-value.amber { color: var(--gold); }
    .keu-summary-value.green { color: var(--income); }
    .keu-summary-value.red   { color: var(--expense); }

    /* ── BUDGET GLASS CARD ── */
    .bcard-glass {
      background: var(--gs-1);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,.6); border-radius: 20px;
      padding: 18px 20px; position: relative; overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 8px 32px rgba(99,120,200,.10), inset 0 1px 0 rgba(255,255,255,.8);
    }
    .bcard-glass::after {
      display: none;
    }
    .bcard-glass:hover { transform: translateY(-2px); box-shadow: var(--shd); }
    .bcard-glass-hdr { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
    .bcard-glass-identity { display: flex; align-items: center; gap: 10px; }
    .bcard-glass-icon {
      width: 38px; height: 38px; border-radius: 11px; font-size: 17px;
      display: flex; align-items: center; justify-content: center;
      background: var(--gs-2); border: 1px solid var(--gs-border); flex-shrink: 0;
    }
    .bcard-glass-name { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
    .bcard-glass-sub  { font-size: 0.7rem; color: var(--ink3); margin-top: 1px; }
    .bcard-glass-close {
      width: 26px; height: 26px; border-radius: 50%;
      border: 1px solid var(--gs-border); background: var(--gs-2);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--ink3); transition: all 0.18s ease; flex-shrink: 0;
    }
    .bcard-glass-close:hover { background: var(--expense-dim); color: var(--expense); border-color: rgba(239,68,68,.3); }
    .bcard-glass-pct { font-family:'Inter',sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
    .bcard-glass-pct.warn   { color: var(--gold); }
    .bcard-glass-pct.danger { color: var(--expense); }
    .bcard-glass-amounts { text-align: right; }
    .bcard-glass-used  { font-size: 0.78rem; font-weight: 600; color: var(--ink2); }
    .bcard-glass-limit { font-size: 0.68rem; color: var(--ink3); margin-top: 1px; }
    .bcard-pct-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
    .bcard-glass-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--gs-border); padding-top: 10px; margin-top: 4px; }
    .bcard-glass-sisa-lbl { font-size: 0.7rem; color: var(--ink3); }
    .bcard-glass-sisa-val { font-size: 0.78rem; font-weight: 700; }
    .bcard-glass-sisa-val.ok     { color: var(--income); }
    .bcard-glass-sisa-val.warn   { color: var(--gold); }
    .bcard-glass-sisa-val.danger { color: var(--expense); }

    /* ── TARGET GLASS CARD ── */
    .gcard-glass {
      background: var(--gs-1);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,.6); border-radius: 20px;
      padding: 20px 22px; position: relative; overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 8px 32px rgba(99,120,200,.10), inset 0 1px 0 rgba(255,255,255,.8);
    }
    .gcard-glass:hover { transform: translateY(-2px); box-shadow: var(--shd); }
    .gcard-glass-hdr { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
    .gcard-glass-identity { display: flex; align-items: center; gap: 10px; }
    .gcard-glass-icon {
      width: 38px; height: 38px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      background: var(--gs-2); border: 1px solid var(--gs-border); flex-shrink: 0;
    }
    .gcard-glass-name { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
    .gcard-glass-close {
      width: 26px; height: 26px; border-radius: 50%;
      border: 1px solid var(--gs-border); background: var(--gs-2);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--ink3); transition: all 0.18s ease; flex-shrink: 0;
    }
    .gcard-glass-close:hover { background: var(--expense-dim); color: var(--expense); border-color: rgba(239,68,68,.3); }
    .gcard-glass-amounts { display: flex; align-items: baseline; gap: 7px; margin-bottom: 12px; }
    .gcard-glass-cur { font-family:'Inter',sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
    .gcard-glass-divider { font-size: 0.85rem; color: var(--ink3); }
    .gcard-glass-tgt { font-size: 0.85rem; color: var(--ink3); font-weight: 500; }
    .gcard-glass-progress-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .gcard-glass-pct-badge {
      font-size: 0.72rem; font-weight: 700; padding: 2px 9px;
      border-radius: 99px; border: 1px solid rgba(245,158,11,.3);
      background: rgba(245,158,11,.12); color: var(--gold);
    }
    .gcard-glass-pct-badge.green { background: rgba(34,197,120,.12); border-color: rgba(34,197,120,.3); color: var(--income); }
    .gcard-glass-shortage { font-size: 0.7rem; color: var(--ink3); }
    .gcard-glass-deadline { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--ink3); margin-bottom: 14px; margin-top: 4px; }
    .gcard-glass-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--gs-border); padding-top: 12px; margin-top: 0; }
    .gcard-glass-hint { font-size: 0.72rem; color: var(--ink3); line-height: 1.4; }
    .gcard-glass-hint strong { color: var(--income); font-weight: 700; }
    .btn-add-glass {
      display: flex; align-items: center; gap: 5px;
      padding: 8px 15px; border-radius: 99px;
      background: rgba(37,99,235,0.10); border: 1px solid rgba(37,99,235,0.25);
      color: #60a5fa; font-size: 0.75rem; font-weight: 600;
      font-family: inherit; cursor: pointer; transition: all 0.18s ease;
      white-space: nowrap; flex-shrink: 0;
      backdrop-filter: blur(12px);
    }
    .btn-add-glass:hover { background: rgba(37,99,235,0.22); border-color: rgba(37,99,235,.45); color: #93c5fd; transform: translateY(-1px); }

    /* Card grid layouts */
    .keu-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

    .card-wrap { border-radius: 20px; position: relative; margin-bottom: 14px; }
    .action-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(34,197,120,0.0) 0%, rgba(34,197,120,0.85) 100%); display: flex; align-items: center; justify-content: flex-end; padding-right: 28px; border-radius: 20px; opacity: 0; transition: opacity 0.1s; }
    .check-label { color: rgba(255,255,255,0.95); font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity 0.1s; }
    .check-circle { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.3); border: 2px solid rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; font-size: 16px; }
    .bill-card { background: var(--gs-1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--gs-border); border-radius: 20px; padding: 1.1rem 1.25rem 1rem; position: relative; cursor: grab; user-select: none; will-change: transform; transition: all 0.3s ease; }
    .bill-card.overdue { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); box-shadow: 0 8px 32px rgba(239, 68, 68, 0.15), 0 2px 8px rgba(239, 68, 68, 0.08); }
    .bill-card.due-soon { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.28); box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15), 0 2px 8px rgba(245, 158, 11, 0.08); }
    .bill-card.upcoming { background: var(--gs-1); border-color: var(--gs-border); }
    .bill-card.paid { opacity: 0.65; cursor: default; }
    .card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
    @media(max-width:640px) {
      .card-top {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
      }
      .card-top > div[style*="display:flex;gap:6px"],
      .card-top > div[style*="display: flex; gap: 6px;"],
      .card-top > div[style*="display:flex;gap:6px;align-items:center;"],
      .card-top > div[style*="display: flex; gap: 6px; align-items: center;"],
      .card-actions {
        display: flex;
        gap: 6px;
        align-items: center;
        justify-content: flex-end;
        align-self: flex-end;
      }
    }
    .card-left { display: flex; align-items: center; gap: 10px; }
    .bill-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
    .bill-dot.overdue { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); animation: pulse-red 1.8s infinite; }
    .bill-dot.due-soon { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
    .bill-dot.upcoming { background: #22c578; box-shadow: 0 0 0 3px rgba(34, 197, 120, 0.2); }
    .bill-dot.paid { background: var(--income); }
    @keyframes pulse-red { 0%,100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.08); } }
    .bill-name { font-size: 1rem; font-weight: 600; color: var(--ink); }
    .bill-meta { font-size: 0.75rem; color: var(--ink3); margin-top: 2px; }
    .bill-badge { font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 50px; white-space: nowrap; }
    .bill-badge.overdue { background: rgba(239, 68, 68, 0.12); color: var(--expense); border: 1px solid rgba(239, 68, 68, 0.25); }
    .bill-badge.due-soon { background: rgba(245, 158, 11, 0.15); color: var(--gold); border: 1px solid rgba(245, 158, 11, 0.25); }
    .bill-badge.upcoming { background: rgba(34, 197, 120, 0.12); color: var(--income); border: 1px solid rgba(34, 197, 120, 0.2); }
    .bill-badge.paid { background: rgba(16, 185, 129, 0.1); color: var(--income); border: 1px solid rgba(16, 185, 129, 0.2); }
    .bill-divider { height: 1px; background: var(--gs-border); margin: 0 0 12px; }
    .card-bottom { display: flex; align-items: center; justify-content: space-between; }
    .swipe-hint { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--ink3); pointer-events:none; }
    .arrows { display: flex; gap: 2px; align-items: center; pointer-events:none; }
    .arrows span { display: inline-block; width: 5px; height: 5px; border-top: 1.5px solid var(--ink3); border-right: 1.5px solid var(--ink3); transform: rotate(45deg); pointer-events:none; }
    .bill-amount { font-family: 'Inter', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; pointer-events:none; }
    /* E-Wallet Cards */
    .ew-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink3); margin-bottom: 10px; }
    .ecard { width: 220px; height: 130px; border-radius: 18px; padding: 14px 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; background: var(--gs-3); border: 1px solid var(--gs-border); }
    .ecard:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.22); }
    .ecard .blob { position: absolute; border-radius: 50%; background: white; pointer-events: none; }
    .ecard .b1 { width: 120px; height: 120px; opacity: 0.1; bottom: -40px; right: -22px; }
    .ecard .b2 { width: 64px; height: 64px; opacity: 0.07; top: -18px; right: 38px; }
    .ecard-top { display: flex; justify-content: flex-end; align-items: center; position: relative; z-index: 1; }
    .ecard-bottom { position: relative; z-index: 1; }
    .ecard-lbl { font-size: 9px; font-weight: 600; letter-spacing: 0.10em; color: rgba(255,255,255,0.65); margin-bottom: 3px; text-transform: uppercase; }
    .ecard-saldo { font-size: 18px; font-weight: 700; color: white; line-height: 1; letter-spacing: -0.02em; }
    .ecard-pct { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.18); border-radius: 5px; padding: 2px 7px; margin-top: 5px; display: inline-block; }
    .ecard .logo-box { height: 36px; display: flex; align-items: center; justify-content: flex-end; }
    .ecard.ec-ovo { background: #6247AA; }
    .ecard.ec-dana { background: #118EEA; }
    .ecard.ec-gopay { background: #00AED6; }
    .ecard.ec-linkaja { background: #E82529; }
    .ecard.ec-spay { background: #EE4D2D; }
    html[data-theme="dark"] .ecard.ec-ovo { background: #3B2875; }
    html[data-theme="dark"] .ecard.ec-dana { background: #0A5FA0; }
    html[data-theme="dark"] .ecard.ec-gopay { background: #007A99; }
    html[data-theme="dark"] .ecard.ec-linkaja { background: #9E1217; }
    html[data-theme="dark"] .ecard.ec-spay { background: #B3301B; }
    .ecard.ec-add { display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px dashed var(--gs-border); color: var(--ink2); flex-direction: column; gap: 6px; }
    .ecard.ec-add:hover { border-color: var(--accent); color: var(--accent); background: var(--gs-1); }
    .ecard.ec-add svg { opacity: 0.7; }

    /* ══════════════════════════════════════════
       SETTINGS — PROFIL PREMIUM
    ══════════════════════════════════════════ */

    /* Avatar Card */
    .profile-avatar-card {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.1rem;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--gs-1), var(--gs-2));
      border: 1.5px solid var(--gs-border-hi);
      margin-bottom: 1.2rem;
      
      box-shadow: var(--shd);
      transition: box-shadow .2s;
    }
    .profile-avatar-card:hover {
      box-shadow: var(--shd-lg);
    }
    .profile-avatar-circle {
      width: 52px;
      height: 52px;
      min-width: 52px;
      border-radius: 50%;
      background: var(--hero-grad);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.03em;
      box-shadow: 0 4px 16px rgba(37,99,235,.3);
      text-shadow: 0 1px 4px rgba(0,0,0,.2);
      user-select: none;
      transition: transform .18s;
    }
    .profile-avatar-card:hover .profile-avatar-circle {
      transform: scale(1.06);
    }
    .profile-avatar-info {
      flex: 1;
      min-width: 0;
    }
    .profile-avatar-info .pa-name {
      font-size: .92rem;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .profile-avatar-info .pa-sub {
      font-size: .72rem;
      color: var(--ink3);
      margin-top: .12rem;
    }

    /* Settings form rows */
    .settings-form-row {
      display: flex;
      flex-direction: column;
      gap: .22rem;
      margin-bottom: .85rem;
    }
    .settings-form-row .flbl {
      font-size: .73rem;
      font-weight: 600;
      color: var(--ink3);
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    /* ══════════════════════════════════════════
       SETTINGS — THEME GRID PREMIUM
    ══════════════════════════════════════════ */

    .theme-section-label {
      font-size: .73rem;
      font-weight: 700;
      color: var(--ink3);
      letter-spacing: .07em;
      text-transform: uppercase;
      margin-bottom: -.6rem;
    }
    .theme-grid-premium {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .7rem;
      margin-bottom: 1.2rem;
    }
    .theme-card-premium {
      position: relative;
      border-radius: 14px;
      padding: .85rem .85rem .7rem;
      border: 2px solid var(--gs-border);
      background: var(--gs-2);
      cursor: pointer;
      transition: all .18s cubic-bezier(.4,0,.2,1);
      display: flex;
      flex-direction: column;
      gap: .5rem;
      overflow: hidden;
      outline: none;
    }
    .theme-card-premium:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 18px rgba(37,99,235,.13);
      transform: translateY(-2px);
    }
    .theme-card-premium.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(37,99,235,.15), 0 4px 18px rgba(37,99,235,.18);
      background: var(--gs-1);
    }
    .theme-card-premium.active::after {
      content: '✓';
      position: absolute;
      top: .45rem;
      right: .55rem;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-size: .6rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 18px;
      text-align: center;
    }
    .theme-preview-colors {
      display: flex;
      gap: .32rem;
      height: 32px;
      border-radius: 8px;
      overflow: hidden;
    }
    .theme-preview-colors span {
      flex: 1;
      display: block;
      min-height: 32px;
      border-radius: 5px;
      transition: flex .25s;
    }
    .theme-card-premium:hover .theme-preview-colors span {
      flex: 1.2;
    }
    .theme-card-label {
      font-size: .78rem;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.01em;
    }
    .theme-card-desc {
      font-size: .67rem;
      color: var(--ink3);
      margin-top: -.35rem;
      line-height: 1.4;
    }

    /* dark override — theme cards */
    html[data-theme="dark"] .theme-card-premium {
      background: var(--gs-2);
      border-color: var(--gs-border);
    }
    html[data-theme="dark"] .theme-card-premium.active {
      border-color: #5e6ad2;
      box-shadow: 0 0 0 3px rgba(94,106,210,.2);
    }
    html[data-theme="dark"] .theme-card-premium.active::after {
      background: #5e6ad2;
    }
    html[data-theme="education"] .theme-card-premium {
      background: #ffffff;
      border: 2.5px solid #0f172a;
      box-shadow: 3px 3px 0px #0f172a;
    }
    html[data-theme="education"] .theme-card-premium.active {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16,185,129,.2), 4px 4px 0px #0f172a;
      background: #ffffff;
    }
    html[data-theme="education"] .theme-card-premium.active::after {
      background: #10b981;
    }

    /* ══════════════════════════════════════════
       MODERN MINIMALIST SETTINGS STYLES
       ══════════════════════════════════════════ */
    .settings-card {
      background: var(--card);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 1.2rem;
      box-shadow: var(--shd);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .sett-list-item {
      display: flex;
      align-items: center;
      padding: 0.85rem 1rem;
      gap: 0.85rem;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
    }
    
    .sett-list-item:last-child {
      border-bottom: none;
    }

    .sett-list-item:hover {
      background: rgba(255, 255, 255, 0.03);
    }
    
    .sett-list-item:active {
      background: rgba(255, 255, 255, 0.05);
    }

    .sett-item-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(37, 99, 235, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    html[data-theme="dark"] .sett-item-icon {
      background: rgba(255, 255, 255, 0.05);
    }

    .sett-acc-logo {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      border: 1px solid var(--border);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      background: #fff;
    }

    .sett-item-info {
      flex: 1;
      min-width: 0;
    }

    .sett-item-title {
      font-size: 0.84rem;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.01em;
    }

    .sett-item-sub {
      font-size: 0.7rem;
      color: var(--ink3);
      margin-top: 0.15rem;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .sett-item-val {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--ink2);
    }

    .sett-item-select {
      border: none;
      background: transparent;
      color: var(--ink2);
      font-family: inherit;
      font-size: 0.82rem;
      font-weight: 600;
      text-align: right;
      cursor: pointer;
      outline: none;
      padding-right: 0.1rem;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    .sett-item-action {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      color: var(--ink3);
    }

    .sett-btn-logout {
      width: 100%;
      padding: 0.72rem;
      border-radius: 14px;
      border: none;
      background: #fecaca; /* Soft pastel red */
      color: #991b1b; /* Dark red text */
      font-family: inherit;
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      margin-top: 1rem;
      box-shadow: 0 4px 14px rgba(239, 68, 68, 0.12);
    }

    html[data-theme="dark"] .sett-btn-logout {
      background: rgba(239, 68, 68, 0.15);
      color: #fca5a5;
      border: 1px solid rgba(239, 68, 68, 0.2);
      box-shadow: none;
    }

    .sett-btn-logout:hover {
      background: #fca5a5;
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(239, 68, 68, 0.2);
    }

    html[data-theme="dark"] .sett-btn-logout:hover {
      background: rgba(239, 68, 68, 0.22);
    }

    .sett-btn-logout:active {
      transform: translateY(0);
    }

    /* Education theme tweaks */
    html[data-theme="education"] .settings-card {
      border: 2.5px solid #0f172a;
      box-shadow: 4px 4px 0px #0f172a;
      background: #ffffff;
    }
    html[data-theme="education"] .sett-btn-logout {
      border: 2.5px solid #0f172a;
      box-shadow: 4px 4px 0px #0f172a;
      background: #f87171;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    html[data-theme="education"] .sett-btn-logout:hover {
      background: #ef4444;
      box-shadow: 6px 6px 0px #0f172a;
    }

    /* ── Reports Summary Card ── */
    .rep-sum-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .6rem;
    }
    .rep-sum-item {
      display: flex;
      flex-direction: column;
      gap: .15rem;
      padding: .5rem .6rem;
      border-radius: .5rem;
      background: var(--card-glass, rgba(255,255,255,.04));
      border: 1px solid var(--border, rgba(255,255,255,.06));
    }
    .rep-sum-lbl {
      font-size: .68rem;
      color: var(--ink3);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .03em;
    }
    .rep-sum-val {
      font-size: .95rem;
      font-weight: 700;
      color: var(--ink);
    }

/* ══════════════════════════════════════════
   AUTH TABS
   ══════════════════════════════════════════ */
.auth-tab {
  flex: 1;
  padding: .6rem .8rem;
  border: none;
  background: var(--gs-4, rgba(0,0,0,.03));
  color: var(--ink3, #64748b);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.auth-tab.active {
  background: var(--accent, #3b82f6);
  color: #fff;
}
.auth-tab:hover:not(.active) {
  background: var(--gs-border, rgba(0,0,0,.06));
}
html[data-theme="dark"] .auth-tab {
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.5);
}
.auth-error {
  font-size: 0.75rem;
  color: #ef4444;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  text-align: center;
}
.auth-error:empty {
  display: none !important;
}
.auth-forgot-info {
  margin-top: 1rem;
  padding: 12px;
  background: var(--bg2, rgba(0,0,0,.03));
  border-radius: 10px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink2, #666);
}
.auth-forgot-info p { margin: 0 0 6px; }
.btn-forgot-wa {
  display: inline-block;
  background: #25d366;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 4px;
}
html[data-theme="dark"] .auth-tab.active {
  background: var(--accent, #3b82f6);
  color: #fff;
}

/* ── UPGRADE MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s;
  overflow-y: auto;
}
.modal-overlay.show { opacity: 1; }
.modal-box.upgrade-box {
  background: var(--gs-bg, #fff);
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  border: 1px solid var(--gs-border, rgba(0,0,0,.08));
  margin: auto;
}

@media (min-width: 768px) {
  .modal-box.upgrade-box {
    max-width: 720px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: left;
    padding: 32px;
  }
  .upgrade-icon {
    grid-column: span 2;
    text-align: center;
    margin-bottom: 0;
  }
  .upgrade-box h3 {
    grid-column: span 2;
    text-align: center;
    font-size: 22px;
    margin: 0;
  }
  .upgrade-msg {
    grid-column: span 2;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .upgrade-pricing {
    grid-column: 1;
    margin-bottom: 0;
  }
  .coupon-section {
    grid-column: 1;
    margin-bottom: 0;
    margin-top: 10px;
  }
  .upgrade-qris {
    grid-column: 2;
    grid-row: 4 / 6;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .upgrade-contact {
    grid-column: 2;
    text-align: center;
    margin-top: 10px;
  }
  .upgrade-actions {
    grid-column: span 2;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
  }
}
.upgrade-icon {
  font-size: 40px;
  margin-bottom: 8px;
}
.upgrade-box h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.upgrade-msg {
  font-size: 13px;
  color: var(--ink2, #666);
  margin: 0 0 16px;
  line-height: 1.5;
}
.upgrade-info {
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(37,99,235,.08));
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.upgrade-info p {
  margin: 0;
  font-size: 13px;
  color: var(--ink, #1a1a1a);
}
.upgrade-pricing {
  margin-bottom: 16px;
}
.pricing-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2, #666);
  margin: 0 0 8px;
}
.pricing-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 2px solid var(--gs-border, rgba(0,0,0,.1));
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all .2s;
}
.pricing-option.selected {
  border-color: var(--accent, #3b82f6);
  background: rgba(59,130,246,.06);
}
.pricing-option input { display: none; }
.pricing-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}
.pricing-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #3b82f6);
}
.pricing-original {
  text-decoration: line-through;
  color: var(--ink3, #999);
  font-weight: 400;
  font-size: 11px;
  margin-right: 4px;
}
.pricing-discounted {
  color: #ef4444;
  font-weight: 700;
}
.coupon-section {
  margin-bottom: 14px;
}
.coupon-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.coupon-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--gs-border, rgba(0,0,0,.12));
  border-radius: 8px;
  font-size: 12px;
  background: var(--gs-bg, #fff);
  color: var(--ink, #1a1a1a);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.coupon-btn {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  background: var(--accent, #3b82f6);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.coupon-btn:disabled { opacity: .5; }
.coupon-status {
  font-size: 11px;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 6px;
}
.coupon-status.error { color: #ef4444; background: rgba(239,68,68,.06); }
.coupon-status.success { color: #22c55e; background: rgba(34,197,94,.06); }
.coupon-ok b { font-weight: 700; }
.upgrade-qris {
  margin-bottom: 16px;
  text-align: center;
}
.qris-image {
  max-width: 200px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--gs-border, rgba(0,0,0,.1));
}
.qris-placeholder {
  font-size: 12px;
  color: var(--ink3, #999);
  padding: 20px;
  border: 2px dashed var(--gs-border, rgba(0,0,0,.12));
  border-radius: 12px;
  margin: 0;
}
.upgrade-contact {
  margin-bottom: 16px;
}
.upgrade-contact p {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--ink2, #666);
}
.upgrade-email {
  background: var(--gs-card, rgba(0,0,0,.03));
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #3b82f6);
  margin-top: 8px;
}
.upgrade-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-upgrade-contact {
  background: linear-gradient(135deg, #6366f1, #2563eb);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn-upgrade-contact:active {
  transform: scale(0.97);
}
.btn-upgrade-close {
  background: transparent;
  color: var(--ink2, #666);
  border: none;
  padding: 10px;
  font-size: 13px;
  cursor: pointer;
}
html[data-theme="dark"] .modal-box.upgrade-box {
  background: rgba(20,22,35,.96);
  border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .upgrade-info {
  background: rgba(99,102,241,.12);
}
html[data-theme="dark"] .qris-placeholder {
  border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] .pricing-option {
  border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] .pricing-option.selected {
  border-color: var(--accent, #6366f1);
  background: rgba(99,102,241,.12);
}
html[data-theme="dark"] .pricing-name {
  color: #e5e7eb;
}
html[data-theme="dark"] .upgrade-email {
  background: rgba(255,255,255,.06);
}
html[data-theme="dark"] .plan-expiry {
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.2);
  color: #a5b4fc;
}

/* ── USAGE BADGE ── */
.usage-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(99,102,241,.1);
  color: var(--accent, #6366f1);
  margin-left: 6px;
  vertical-align: middle;
}
.usage-badge.usage-exhausted {
  background: rgba(239,68,68,.1);
  color: #ef4444;
}

/* ── PLAN BADGE ── */
.plan-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.plan-free {
  background: rgba(107,114,128,.1);
  color: #6b7280;
  cursor: pointer;
}
.plan-premium {
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(168,85,247,.15));
  color: #7c3aed;
}
.plan-expiry {
  font-size: 11px;
  color: var(--ink2, #666);
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(99,102,241,.05);
  border-radius: 8px;
  border: 1px solid rgba(99,102,241,.1);
}