body.user-page{
  --brand:#1f7a4d;
  --brand-strong:#16643f;
  --brand-soft:#eef8f1;
  --text:#1e2930;
  --muted-text:#66737c;
  background:#f4f7f4;
  color:var(--text);
}
body.user-page a{color:var(--brand-strong)}
body.user-page a:hover{color:#0f5132}
body.user-page .nav-black{background:rgba(255,255,255,.96);border-bottom:1px solid #e7efe9;backdrop-filter:blur(14px)}
body.user-page .brand-link,body.user-page .nav-pills-soft .nav-link,body.user-page .nav-user,body.user-page .user-meta small{color:var(--text)!important}
body.user-page .brand-mini,body.user-page .brand-mark,body.user-page .user-avatar,body.user-page .stat-icon,body.user-page .quick-action-card .arrow{background:var(--brand);color:#fff}
body.user-page .brand-mark{width:54px;height:54px;border-radius:18px}
body.user-page .nav-pills-soft .nav-link{font-weight:700;color:#4c5b53!important}
body.user-page .nav-pills-soft .nav-link:hover,body.user-page .nav-pills-soft .nav-link.active{background:var(--brand-soft);color:var(--brand-strong)!important}
body.user-page .navbar-toggler{border-color:#dce7df}
body.user-page .navbar-toggler-icon{filter:none}
body.user-page .btn-dark,body.user-page .summary-card .btn-light,body.user-page .mobile-bottom-nav .create-pill{background:var(--brand);border-color:var(--brand);color:#fff}
body.user-page .btn-dark:hover,body.user-page .summary-card .btn-light:hover{background:var(--brand-strong);border-color:var(--brand-strong);color:#fff}
body.user-page .btn-outline-dark,body.user-page .btn-soft,body.user-page .btn-outline-light,body.user-page .btn-outline-danger{border-radius:14px}
body.user-page .btn-outline-dark{border-color:#ccd9d0;color:var(--brand-strong);background:#fff}
body.user-page .btn-outline-dark:hover{background:var(--brand-soft);border-color:#bdd1c3;color:var(--brand-strong)}
body.user-page .btn-outline-light{border-color:rgba(255,255,255,.3);color:#fff}
body.user-page .btn-light{color:var(--brand-strong)}
body.user-page .cardx,body.user-page .glass-card,body.user-page .entity-card,body.user-page .invoice-paper,body.user-page .info-box,body.user-page .totals-box,body.user-page .item-row,body.user-page .quick-action-card{background:#fff;border:1px solid #e2ebe5;box-shadow:0 12px 34px rgba(24,45,32,.05);border-radius:20px}
body.user-page .page-title,body.user-page .panel-title,body.user-page .entity-title{letter-spacing:-.03em}
body.user-page .eyebrow{color:var(--brand);letter-spacing:.12em}
body.user-page .text-muted{color:var(--muted-text)!important}
body.user-page .hero-card,body.user-page .auth-hero{background:linear-gradient(135deg,#f8fcf8 0%,#edf7ef 52%,#f7fbf8 100%);color:var(--text);border:1px solid #dfeadf;box-shadow:0 16px 44px rgba(28,57,41,.06)}
body.user-page .hero-card:before,body.user-page .hero-card:after,body.user-page .auth-hero:before{display:none}
body.user-page .hero-title,body.user-page .auth-hero .hero-title{line-height:1.02}
body.user-page .hero-subtitle,body.user-page .auth-feature{color:#55636b}
body.user-page .hero-chip{background:#fff;color:var(--brand-strong);border:1px solid #dce9df}
body.user-page .auth-feature span{background:var(--brand-soft);color:var(--brand-strong)}
body.user-page .stat-card:after{display:none}
body.user-page .summary-card{background:linear-gradient(180deg,#1d7a4b 0%,#17623d 100%);border-radius:24px;box-shadow:0 20px 45px rgba(23,98,61,.22)}
body.user-page .summary-row,body.user-page .summary-card .text-muted{color:rgba(255,255,255,.82)!important}
body.user-page .summary-total{border-top:1px solid rgba(255,255,255,.22)}
body.user-page .form-control,body.user-page .form-select{border:1px solid #d8e4dd;border-radius:14px;color:var(--text)}
body.user-page .form-control:focus,body.user-page .form-select:focus{border-color:#91b59d;box-shadow:0 0 0 .18rem rgba(31,122,77,.10)}
body.user-page .table thead th{color:#5f6b63;border-bottom:1px solid #dfe8e2;font-size:.76rem}
body.user-page .table td{border-color:#ecf2ee}
body.user-page .table-hover tbody tr:hover{background:#fafdfb}
body.user-page .status-paid{background:#edf8f0;color:#1f7a4d;border-color:#c9e4d1}
body.user-page .status-unpaid{background:#fff7e7;color:#9b6b0d;border-color:#f2dfa5}
body.user-page .status-draft{background:#f4f5f6;color:#59626a;border-color:#dfe4e7}
body.user-page .status-cancelled{background:#fff0f0;color:#b63a3a;border-color:#efc7c7}
body.user-page .mobile-bottom-nav{background:rgba(255,255,255,.97);border:1px solid #dfe8e2;box-shadow:0 12px 32px rgba(23,43,33,.12)}
body.user-page .mobile-bottom-nav a{color:#647169}
body.user-page .mobile-bottom-nav a.active{background:var(--brand-soft);color:var(--brand-strong)}
body.user-page .mobile-nav-icon{width:28px;height:28px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#f0f5f1;color:var(--brand-strong);font-size:.72rem;font-weight:800}
body.user-page .mobile-bottom-nav .create-pill{box-shadow:0 12px 30px rgba(31,122,77,.28)}
body.user-page .invoice-paper{padding:34px 36px}
body.user-page .invoice-paper-head{background:transparent;color:var(--text);margin:0 0 28px;padding:0 0 20px;border-radius:0;border-bottom:1px solid #dfe8e2}
body.user-page .invoice-header-grid{display:grid;grid-template-columns:1.15fr .8fr .9fr;gap:24px;align-items:start}
body.user-page .invoice-doc-title{font-size:2rem;font-weight:800;letter-spacing:.12em;margin:0}
body.user-page .invoice-accent-line{width:64px;height:3px;background:var(--brand);border-radius:999px;margin-top:10px}
body.user-page .invoice-company-box{text-align:center}
body.user-page .invoice-company-box h2{font-size:1.1rem}
body.user-page .invoice-meta-list{font-size:.92rem}
body.user-page .invoice-meta-list .meta-row,body.user-page .invoice-totals .meta-row{display:flex;justify-content:space-between;gap:14px;padding:.32rem 0}
body.user-page .invoice-meta-list .meta-row span:first-child,body.user-page .invoice-totals .meta-row span:first-child{color:var(--muted-text)}
body.user-page .section-label{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);margin-bottom:.55rem}
body.user-page .invoice-recipient strong{font-size:1.05rem}
body.user-page .invoice-table{border:1px solid #dfe8e2;border-radius:18px;overflow:hidden}
body.user-page .invoice-table .table{margin-bottom:0}
body.user-page .invoice-table .table thead th{background:#f7faf8;padding:.9rem .8rem}
body.user-page .invoice-table .table tbody td{padding:.95rem .8rem}
body.user-page .invoice-footer-note{color:var(--muted-text);font-size:.9rem}
body.user-page .invoice-totals{border-top:1px solid #dfe8e2;padding-top:14px}
body.user-page .invoice-totals .grand-total{border-top:1px solid #dfe8e2;margin-top:12px;padding-top:12px}
body.user-page .invoice-totals .grand-total strong:last-child{font-size:1.35rem;color:var(--brand-strong)}
body.user-page .signature-block{margin-top:38px;text-align:right}
body.user-page .signature-line{margin-top:30px;padding-top:8px;border-top:1px solid #adbdb3;display:inline-block;min-width:180px}
body.user-page .thanks-line{border-top:1px solid #dfe8e2;margin-top:24px;padding-top:16px;color:var(--brand-strong);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.88rem}
body.user-page .invoice-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:10px}
@media(max-width:991.98px){body.user-page .invoice-header-grid{grid-template-columns:1fr;gap:18px}body.user-page .invoice-company-box{text-align:left}}
@media(max-width:767.98px){body.user-page .invoice-paper{padding:22px}body.user-page .invoice-paper-head{padding-bottom:16px;margin-bottom:20px}body.user-page .invoice-doc-title{font-size:1.65rem}body.user-page .invoice-contact-grid{grid-template-columns:1fr;gap:14px}body.user-page .table-responsive.invoice-table .table{min-width:640px}body.user-page .hero-card,body.user-page .auth-hero{border-radius:24px}}
@media print{body.user-page{background:#fff}body.user-page .invoice-paper{padding:0;border:none;box-shadow:none}body.user-page .invoice-paper-head{border-bottom:1px solid #bfcfc5;margin-bottom:20px}body.user-page .invoice-table{border:1px solid #d8e3db}body.user-page .invoice-table .table thead th{background:#f5f7f6!important}}


/* =========================================================
   Mobile Bottom Navigation - Revised
   Fokus: lebih rapi, profesional, mudah ditekan di HP.
   Aman untuk invoice print karena .mobile-bottom-nav tetap no-print.
   ========================================================= */
@media(max-width:767.98px){
  body.user-page{
    padding-bottom:104px;
  }

  body.user-page .mobile-bottom-nav{
    position:fixed;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:1030;
    display:grid;
    grid-template-columns:1fr 1fr 66px 1fr 1fr;
    align-items:center;
    gap:6px;
    min-height:72px;
    padding:8px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(206,222,212,.95);
    border-radius:24px;
    box-shadow:
      0 18px 48px rgba(21,54,35,.16),
      0 4px 12px rgba(21,54,35,.06);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  body.user-page .mobile-bottom-nav a{
    position:relative;
    min-width:0;
    min-height:54px;
    padding:7px 5px 6px;
    border-radius:18px;
    color:#6c7a72;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-weight:750;
    transition:background .18s ease, color .18s ease, transform .18s ease;
    -webkit-tap-highlight-color:transparent;
  }

  body.user-page .mobile-bottom-nav a:active{
    transform:scale(.96);
  }

  body.user-page .mobile-bottom-nav a small{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.64rem;
    line-height:1;
    letter-spacing:-.01em;
  }

  body.user-page .mobile-bottom-nav a.active{
    background:#eef8f1;
    color:#16643f;
  }

  body.user-page .mobile-bottom-nav a.active .mobile-nav-icon{
    background:#1f7a4d;
    color:#fff;
    box-shadow:0 7px 16px rgba(31,122,77,.22);
  }

  body.user-page .mobile-nav-icon{
    width:30px;
    height:30px;
    border-radius:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#f3f7f4;
    color:#5b6d62;
    border:1px solid #e4eee7;
    font-size:0;
    flex:0 0 auto;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease;
  }

  body.user-page .mobile-nav-icon svg{
    width:17px;
    height:17px;
    display:block;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
  }

  body.user-page .mobile-bottom-nav .create-pill{
    width:62px;
    height:62px;
    min-height:62px;
    border-radius:22px;
    padding:0;
    justify-self:center;
    transform:translateY(-12px);
    background:linear-gradient(180deg,#248758 0%,#16643f 100%);
    color:#fff;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:
      0 18px 34px rgba(31,122,77,.35),
      inset 0 1px 0 rgba(255,255,255,.22);
  }

  body.user-page .mobile-bottom-nav .create-pill:active{
    transform:translateY(-12px) scale(.96);
  }

  body.user-page .mobile-bottom-nav .create-pill .plus-mark{
    width:26px;
    height:26px;
    display:block;
    position:relative;
  }

  body.user-page .mobile-bottom-nav .create-pill .plus-mark:before,
  body.user-page .mobile-bottom-nav .create-pill .plus-mark:after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:22px;
    height:3px;
    border-radius:999px;
    background:#fff;
    transform:translate(-50%,-50%);
  }

  body.user-page .mobile-bottom-nav .create-pill .plus-mark:after{
    transform:translate(-50%,-50%) rotate(90deg);
  }

  body.user-page .mobile-bottom-nav .create-pill small{
    display:none;
  }
}

@media(max-width:360px){
  body.user-page .mobile-bottom-nav{
    left:10px;
    right:10px;
    bottom:10px;
    gap:3px;
    grid-template-columns:1fr 1fr 58px 1fr 1fr;
  }

  body.user-page .mobile-bottom-nav a small{
    font-size:.58rem;
  }

  body.user-page .mobile-bottom-nav .create-pill{
    width:56px;
    height:56px;
    min-height:56px;
  }
}

@media print{
  .mobile-bottom-nav{
    display:none!important;
  }
}