:root{--cream:#E8D0B5;--sand:#DBB084;--wine:#800506;--wine2:#5e0304;--ink:#291817;--paper:#fffaf4;--blue:#1769aa;--red:#b42318;--muted:#78635c;--line:rgba(128,5,6,.15);--shadow:0 10px 28px rgba(75,27,18,.10)}*{box-sizing:border-box}html{background:#f6eadc}body{margin:0;color:var(--ink);font-family:Tahoma,"Segoe UI",sans-serif;background:radial-gradient(circle at top,#fff8ef 0,#f4e4d3 45%,#ead1b7 100%);min-height:100vh}a{color:var(--wine);text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:34px 0 90px}.topbar{height:68px;padding:0 max(24px,calc((100% - 1120px)/2));display:flex;align-items:center;gap:30px;background:rgba(255,250,244,.9);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:900}.brand img{width:36px;height:36px;border-radius:12px}.topbar nav{display:flex;gap:22px;flex:1}.ghost,.secondary,.primary{border:0;border-radius:13px;padding:11px 17px;font-weight:800}.primary{background:var(--wine);color:#fff;box-shadow:0 6px 15px rgba(128,5,6,.2)}.secondary{background:var(--cream);color:var(--wine);border:1px solid rgba(128,5,6,.14)}.ghost{background:transparent;color:var(--wine)}.button{display:inline-block}.home-brand{text-align:center;margin:-12px 0 20px}.home-brand h1{font-size:28px;margin:0 0 6px;color:var(--wine)}.home-brand img{width:66px;height:66px;border-radius:22px;filter:drop-shadow(0 7px 10px rgba(128,5,6,.16))}.hero-balance{background:linear-gradient(135deg,var(--wine),var(--wine2));color:#fff;border-radius:28px;padding:30px 32px;display:flex;align-items:end;justify-content:space-between;box-shadow:0 18px 38px rgba(128,5,6,.24);position:relative;overflow:hidden}.hero-balance:after{content:"";position:absolute;width:220px;height:220px;border:38px solid rgba(232,208,181,.10);border-radius:50%;left:-85px;top:-105px}.hero-balance span{display:block;color:#f0d9c1}.hero-balance strong{display:inline-block;font-size:42px;margin:10px 0 0;direction:ltr}.hero-balance small{margin-right:9px}.hero-stats{display:flex;gap:34px;z-index:1}.hero-stats p{margin:0}.hero-stats b{font-size:18px;direction:ltr;display:block;margin-top:7px}.ledger-home-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 30px}.ledger-home-grid .ledger-5{grid-column:1/-1}.account-card{background:rgba(255,250,244,.92);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px;min-width:0;transition:.2s transform}.account-card:hover{transform:translateY(-2px)}.account-card span{color:var(--muted);font-weight:700}.account-card strong{font-size:25px;direction:ltr;text-align:right;overflow-wrap:anywhere}.account-card small{color:var(--muted)}.account-card.creditor strong,.positive{color:var(--blue)!important}.account-card.debtor strong,.negative{color:var(--red)!important}.account-card.personal strong{color:var(--wine)}.account-card.bank{border-top:4px solid var(--sand)}.account-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.section-title,.page-head{display:flex;align-items:center;justify-content:space-between;margin:30px 0 14px}.section-title h2,.page-head h1{margin:0}.section-title span,.eyebrow{color:var(--muted)}.eyebrow{font-size:13px;margin:0 0 5px}.toast{position:fixed;z-index:100;top:86px;left:50%;transform:translateX(-50%);background:#205e45;color:#fff;border-radius:30px;padding:12px 20px;box-shadow:var(--shadow);animation:toast 3.2s both}@keyframes toast{0%{opacity:0;transform:translate(-50%,-12px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}.panel,.form-card,.filter-card,.person-card,.account-manage-card{background:rgba(255,250,244,.94);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}label{display:flex;flex-direction:column;gap:7px;font-weight:700;color:#553b35}input,select,textarea{width:100%;border:1px solid rgba(128,5,6,.20);background:#fffdfa;border-radius:12px;padding:12px;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--wine);box-shadow:0 0 0 3px rgba(128,5,6,.08)}.form-grid,.filter-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-card>section{margin:18px 0}.form-card>label{margin-top:18px}.common-fields{margin:22px 0}.operation-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.operation-picker label{cursor:pointer}.operation-picker input{position:absolute;opacity:0;pointer-events:none}.operation-picker span{min-height:62px;border:2px solid transparent;background:var(--cream);border-radius:15px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;color:var(--wine);font-weight:900}.operation-picker .major{grid-column:span 3}.operation-picker .major span{min-height:105px;font-size:21px;flex-direction:column;background:linear-gradient(145deg,#fff5e9,var(--sand))}.operation-picker .major b{font-size:30px}.operation-picker .major small{font-size:12px;color:var(--muted);margin-top:4px}.operation-picker label:not(.major){grid-column:span 2}.operation-picker input:checked+span{border-color:var(--wine);background:var(--wine);color:#fff;box-shadow:0 8px 18px rgba(128,5,6,.2)}.operation-picker input:checked+span small{color:var(--cream)}.party-field{display:grid;gap:12px}.hint,.created-at,.source-note{display:block;color:var(--muted);font-size:12px;margin-top:5px}.form-actions,.filter-actions,.inline-form{display:flex;align-items:end;gap:10px;margin-top:20px}.inline-form>*{flex:1}.inline-form button{flex:0 0 auto}.inline-person-add{margin:18px 0;padding:16px;background:rgba(219,176,132,.28);border-radius:16px}.jalali-field{position:relative;display:flex}.jalali-field input{padding-left:48px}.calendar-trigger{position:absolute;left:5px;top:5px;width:38px;height:38px;border:0;border-radius:9px;background:var(--cream);color:var(--wine)}.jalali-popover{position:absolute;z-index:50;top:calc(100% + 6px);right:0;width:292px;padding:12px;background:#fffaf4;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 35px rgba(50,20,15,.2)}.calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.calendar-head button{border:0;background:var(--cream);border-radius:8px;width:32px;height:32px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.calendar-grid button{border:0;background:transparent;border-radius:8px;padding:7px 2px}.calendar-grid button:hover,.calendar-grid .selected{background:var(--wine);color:#fff}.calendar-grid .today{outline:1px solid var(--wine)}.weekday{color:var(--muted);font-size:12px}.filter-card summary{font-weight:900;cursor:pointer;margin-bottom:18px}.filter-grid .wide{grid-column:1/-1}.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.summary-strip p{background:rgba(255,250,244,.85);border-radius:14px;padding:14px;margin:0}.summary-strip span{display:block;color:var(--muted);font-size:12px}.summary-strip b{display:block;margin-top:5px;direction:ltr;text-align:right}.table-wrap{overflow:auto;background:rgba(255,250,244,.94);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse}th,td{text-align:right;padding:15px;border-bottom:1px solid var(--line);vertical-align:middle}th{color:var(--muted);font-size:12px}.pill{display:inline-block;padding:6px 9px;border-radius:10px;background:var(--cream);white-space:nowrap}.pill.receipt{background:#dbeadf;color:#205e45}.pill.payment{background:#f5d8d2;color:#93251a}.actions{white-space:nowrap}.actions form{display:inline}.actions a,.link-danger{font-size:12px;border:0;background:none;padding:5px}.link-danger{color:var(--red)}.amount{direction:ltr;text-align:right}.two-col{display:grid;grid-template-columns:2fr 1fr;gap:18px}.account-manager,.people-grid{display:grid;gap:14px}.account-manage-card{box-shadow:none}.account-overview{display:flex;justify-content:space-between;margin-bottom:14px}.balance-state{display:block;margin-top:6px}.balance-state small{margin-right:6px}.balance-state.creditor{color:var(--blue)}.balance-state.debtor{color:var(--red)}.balance-edit-form,.account-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-top:10px}.kind-tag{height:min-content;background:var(--cream);padding:5px 8px;border-radius:8px;font-size:11px}.people-grid{grid-template-columns:repeat(2,1fr)}.person-card>a{display:flex;flex-direction:column;gap:5px}.person-card>a strong{font-size:24px;direction:ltr;text-align:right}.person-card.inactive{opacity:.55}.alert{padding:14px 16px;border-radius:14px;margin:14px 0}.alert.warning{background:#fff0c8}.alert.danger{background:#f7d8d3;color:#8d1811}.health-card,.backup-list article{display:flex;align-items:center;justify-content:space-between;background:var(--paper);border-radius:17px;padding:17px;margin:10px 0}.health-icon{font-size:24px}.stack{display:grid;gap:14px}.login-shell{min-height:75vh;display:grid;place-items:center}.login-card{width:min(420px,100%);background:var(--paper);padding:30px;border-radius:26px;box-shadow:var(--shadow);text-align:center}.login-logo{width:64px;height:64px;margin:auto;border-radius:20px;background:var(--wine);color:#fff;display:grid;place-items:center;font-size:32px}.empty{text-align:center;color:var(--muted);padding:30px}.mobile-nav{display:none}
@media(max-width:700px){.topbar{display:none}.container{width:min(100% - 22px,600px);padding:18px 0 calc(95px + env(safe-area-inset-bottom))}.home-brand{margin:0 0 12px}.home-brand h1{font-size:24px}.home-brand img{width:55px;height:55px}.hero-balance{padding:23px 20px;border-radius:23px;display:block}.hero-balance strong{font-size:32px}.hero-stats{margin-top:22px;justify-content:space-between}.ledger-home-grid{gap:10px}.account-card{padding:15px;border-radius:17px}.account-card strong{font-size:20px}.account-card small{font-size:11px}.account-grid{grid-template-columns:1fr 1fr}.page-head{margin:5px 0 16px}.page-head .button{font-size:12px;padding:10px}.operation-picker{gap:8px}.operation-picker .major span{min-height:95px}.form-card,.filter-card,.panel{padding:14px;border-radius:18px}.form-grid,.filter-grid,.two-col{grid-template-columns:1fr}.filter-grid .wide{grid-column:auto}.summary-strip{grid-template-columns:1fr 1fr}.people-grid{grid-template-columns:1fr}.balance-edit-form,.account-row{grid-template-columns:1fr}.table-wrap{background:none;border:0;box-shadow:none;overflow:visible}table,tbody,tr,td{display:block}thead{display:none}tr{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:13px;margin-bottom:10px;box-shadow:0 5px 15px rgba(75,27,18,.07)}td{border:0;padding:6px 0;display:grid;grid-template-columns:72px 1fr;gap:8px}td:before{content:attr(data-label);color:var(--muted);font-size:11px}.actions{display:flex;justify-content:flex-end!important}.actions:before{display:none}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);right:10px;left:10px;bottom:calc(8px + env(safe-area-inset-bottom));height:66px;padding:0 5px;background:rgba(255,250,244,.96);border:1px solid rgba(128,5,6,.22);border-radius:22px;box-shadow:0 12px 32px rgba(50,20,15,.24);z-index:90;backdrop-filter:blur(15px)}.mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 2px 8px;font-size:10px;color:var(--muted);position:relative}.mobile-nav i{font-style:normal;font-size:22px;height:31px;display:grid;place-items:center;transition:.2s}.mobile-nav .active i{width:49px;height:49px;border-radius:50%;background:var(--wine);color:#fff;border:4px solid var(--cream);font-size:27px;transform:translateY(-11px);box-shadow:0 5px 14px rgba(128,5,6,.28);animation:navpop .25s ease}.mobile-nav .active span{margin-top:-10px;color:var(--wine);font-weight:900}.mobile-nav .mobile-add i{font-size:28px}.mobile-nav .mobile-add:not(.active) i{width:42px;height:42px;border-radius:50%;background:var(--wine);color:#fff;transform:translateY(-6px)}@keyframes navpop{from{transform:translateY(-7px) scale(.9)}to{transform:translateY(-11px) scale(1)}}}

/* === UI POLISH: HOME === */
.home-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 0 14px;
  text-align:center;
}

.home-brand h1{
  margin:0;
  font-size:1.45rem;
  line-height:1;
  color:var(--wine-dark);
  font-weight:900;
}

.home-brand img{
  width:74px;
  height:74px;
  border-radius:20px;
  object-fit:cover;
  display:block;
  box-shadow:0 10px 24px rgba(128,5,6,.16);
}

.hero-balance{
  margin-top:0;
  padding:24px 26px;
  border-radius:20px;
}

.hero-balance strong{
  font-size:2.25rem;
}

.ledger-home-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:14px;
}

.ledger-home-grid .account-card{
  min-height:112px;
  padding:14px 15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.ledger-home-grid .account-card span{
  font-size:.82rem;
}

.ledger-home-grid .account-card strong{
  font-size:1.12rem;
  margin-top:7px;
}

.ledger-home-grid .account-card small{
  margin-top:4px;
  font-size:.75rem;
}

.ledger-home-grid .account-card.debtor strong,
.ledger-home-grid .account-card.debtor small{
  color:var(--red)!important;
}

.ledger-home-grid .account-card.creditor strong,
.ledger-home-grid .account-card.creditor small{
  color:var(--blue)!important;
}

.ledger-home-grid .account-card.personal{
  grid-column:1/-1;
  min-height:86px;
}

.section-title{
  margin:24px 0 10px;
}

.section-title h2{
  font-size:1rem;
}

.bank-grid{
  gap:10px;
}

.bank-grid .account-card{
  min-height:92px;
  padding:13px 14px;
}

.bank-grid .account-card strong{
  font-size:1.05rem;
}

@media(max-width:620px){
  .container{
    padding-top:14px;
  }

  .home-brand{
    margin-bottom:12px;
  }

  .home-brand h1{
    font-size:1.35rem;
  }

  .home-brand img{
    width:68px;
    height:68px;
    border-radius:18px;
  }

  .hero-balance{
    padding:21px 20px;
  }

  .hero-balance strong{
    font-size:1.95rem;
  }

  .ledger-home-grid{
    gap:10px;
  }

  .ledger-home-grid .account-card{
    min-height:102px;
    padding:12px 13px;
  }

  .ledger-home-grid .account-card.personal{
    min-height:78px;
  }

  .bank-grid .account-card{
    min-height:84px;
  }
}

/* === HOME TOP GRADIENT === */
.home-brand{
  position:relative;
  z-index:1;
}

.home-brand::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  height:230px;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(128,5,6,.20) 0%,
      rgba(219,176,132,.16) 38%,
      rgba(232,208,181,.09) 62%,
      transparent 82%
    );
  pointer-events:none;
}

@media(max-width:620px){
  .home-brand::before{
    top:-30px;
    height:210px;
  }
}

/* === MOBILE NAV FINAL POSITION FIX === */
@media(max-width:620px){

  body{
    padding-bottom:110px !important;
  }

  .mobile-nav{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;

    width:auto !important;
    height:74px !important;

    border-radius:22px !important;
    z-index:1000 !important;

    margin:0 !important;
    transform:none !important;
  }

  .mobile-nav a{
    position:relative;
    height:100%;
    justify-content:center;
  }

  .mobile-nav a.active{
    transform:none !important;
  }

  .mobile-nav a.active span{
    transform:translateY(-18px) scale(1.22);
  }

  .mobile-nav a.active{
    padding-top:9px;
  }

  .ledger-home-grid .account-card.personal{
    min-height:70px;
  }

  .home-brand{
    margin-bottom:7px;
  }

}

/* ==================================================
   MAHASEB HOME — MOCKUP FINAL
   ================================================== */

@media(max-width:620px){

  body{
    padding-bottom:115px !important;
  }

  .container{
    width:calc(100% - 28px) !important;
    padding-top:12px !important;
  }

  /* Brand */
  .home-brand{
    gap:6px !important;
    margin:0 0 10px !important;
  }

  .home-brand h1{
    font-size:1.55rem !important;
    font-weight:900 !important;
    color:var(--wine-dark) !important;
  }

  .home-brand img{
    width:66px !important;
    height:66px !important;
    border-radius:18px !important;
    box-shadow:0 8px 20px rgba(128,5,6,.18) !important;
  }

  .home-brand::before{
    top:-40px !important;
    height:220px !important;
    background:
      radial-gradient(
        ellipse at 50% 0%,
        rgba(128,5,6,.16) 0%,
        rgba(219,176,132,.13) 42%,
        rgba(232,208,181,.06) 68%,
        transparent 86%
      ) !important;
  }

  /* Main balance */
  .hero-balance{
    min-height:190px !important;
    padding:20px 22px !important;
    border-radius:24px !important;
    margin-top:8px !important;
    box-shadow:0 12px 26px rgba(128,5,6,.16) !important;
  }

  .hero-balance strong{
    font-size:2rem !important;
    line-height:1.15 !important;
  }

  .hero-balance small{
    font-size:.75rem !important;
  }

  .hero-stats{
    margin-top:20px !important;
    padding-top:14px !important;
  }

  /* Ledger cards */
  .ledger-home-grid{
    margin-top:12px !important;
    gap:10px !important;
  }

  .ledger-home-grid .account-card{
    min-height:100px !important;
    padding:13px 15px !important;
    border-radius:17px !important;
    box-shadow:0 5px 14px rgba(90,50,40,.045) !important;
  }

  .ledger-home-grid .account-card span{
    font-size:.88rem !important;
    font-weight:800 !important;
  }

  .ledger-home-grid .account-card strong{
    font-size:1.18rem !important;
    line-height:1.2 !important;
    margin-top:8px !important;
  }

  .ledger-home-grid .account-card small{
    font-size:.72rem !important;
    margin-top:6px !important;
  }

  .ledger-home-grid .account-card.personal{
    grid-column:1/-1 !important;
    min-height:82px !important;
  }

  /* Bank section */
  .section-title{
    margin:23px 0 9px !important;
  }

  .section-title h2{
    font-size:1.12rem !important;
  }

  .section-title a{
    font-size:.75rem !important;
  }

  .bank-grid{
    gap:10px !important;
  }

  .bank-grid .account-card{
    min-height:86px !important;
    padding:12px 14px !important;
    border-radius:17px !important;
  }

  .bank-grid .account-card strong{
    font-size:1rem !important;
  }

  /* Bottom nav */
  .mobile-nav{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    bottom:calc(8px + env(safe-area-inset-bottom)) !important;

    width:auto !important;
    height:76px !important;

    padding:0 5px !important;
    margin:0 !important;

    border:none !important;
    border-radius:24px !important;

    background:
      linear-gradient(
        110deg,
        #760304 0%,
        #9b0808 52%,
        #760304 100%
      ) !important;

    color:#f6e5d2 !important;

    box-shadow:
      0 10px 28px rgba(91,3,4,.22) !important;

    overflow:visible !important;
    z-index:1000 !important;
    transform:none !important;
  }

  .mobile-nav a{
    position:relative !important;
    height:100% !important;
    flex:1 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:4px !important;

    color:#f1dcca !important;
    font-size:.67rem !important;

    transform:none !important;
  }

  .mobile-nav a span{
    color:#f7e7d5 !important;
    font-size:1.25rem !important;
    line-height:1 !important;
    transition:.18s ease !important;
  }

  /* Active nav */
  .mobile-nav a.active{
    color:#fff4e8 !important;
    font-weight:900 !important;
  }

  .mobile-nav a.active span{
    width:54px !important;
    height:54px !important;

    display:grid !important;
    place-items:center !important;

    position:absolute !important;
    top:-18px !important;

    border-radius:50% !important;

    background:#980707 !important;
    border:4px solid #f0d2ad !important;

    color:white !important;
    font-size:1.55rem !important;

    box-shadow:0 8px 18px rgba(93,3,4,.25) !important;

    transform:none !important;
  }

  .mobile-nav a.active{
    padding-top:25px !important;
  }

  /* Center register button */
  .mobile-nav .mobile-add span{
    width:58px !important;
    height:58px !important;

    display:grid !important;
    place-items:center !important;

    position:absolute !important;
    top:-21px !important;

    border-radius:50% !important;

    background:#f6e2c7 !important;
    border:1px solid #ddb98c !important;

    color:#9a0707 !important;

    font-size:2rem !important;
    font-weight:400 !important;

    box-shadow:0 8px 18px rgba(93,3,4,.18) !important;
  }

  .mobile-nav .mobile-add{
    padding-top:27px !important;
  }

}

/* ==================================================
   MAHASEB MOBILE NAV — FINAL CLEAN OVERRIDE
   ================================================== */

@media(max-width:700px){

  .mobile-nav{
    position:fixed !important;
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;

    left:12px !important;
    right:12px !important;
    bottom:calc(8px + env(safe-area-inset-bottom)) !important;

    width:auto !important;
    height:72px !important;
    padding:0 5px !important;

    background:linear-gradient(
      110deg,
      #760304 0%,
      #9b0808 50%,
      #760304 100%
    ) !important;

    border:0 !important;
    border-radius:23px !important;

    box-shadow:0 10px 28px rgba(91,3,4,.25) !important;

    overflow:visible !important;
    z-index:1000 !important;
  }

  .mobile-nav a,
  .mobile-nav a.active,
  .mobile-nav .mobile-add{
    position:relative !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    align-items:center !important;

    height:72px !important;
    padding:0 2px 9px !important;

    color:#f3dfca !important;
    font-size:11px !important;
    font-weight:400 !important;

    transform:none !important;
  }

  /* ICON */
  .mobile-nav a i,
  .mobile-nav a.active i{
    position:static !important;

    display:grid !important;
    place-items:center !important;

    width:auto !important;
    height:30px !important;

    margin:0 !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    color:#f5e4d1 !important;

    font-style:normal !important;
    font-size:22px !important;
    line-height:1 !important;

    transform:none !important;
    animation:none !important;
  }

  /* TEXT */
  .mobile-nav a span,
  .mobile-nav a.active span{
    position:static !important;

    display:block !important;

    width:auto !important;
    height:auto !important;

    margin:2px 0 0 !important;
    padding:0 !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    color:inherit !important;

    font-size:11px !important;
    line-height:1.1 !important;

    transform:none !important;
  }

  /* ACTIVE PAGE ICON */
  .mobile-nav a.active i{
    position:absolute !important;
    top:-17px !important;

    width:52px !important;
    height:52px !important;

    background:#980707 !important;
    color:#fff !important;

    border:4px solid #efd1aa !important;
    border-radius:50% !important;

    box-shadow:
      0 7px 18px rgba(91,3,4,.30) !important;

    font-size:26px !important;
  }

  .mobile-nav a.active{
    padding-bottom:9px !important;
    color:#fff4e7 !important;
    font-weight:900 !important;
  }

  /* CENTER + BUTTON — ALWAYS RAISED */
  .mobile-nav .mobile-add i,
  .mobile-nav .mobile-add:not(.active) i{
    position:absolute !important;
    top:-18px !important;

    width:54px !important;
    height:54px !important;

    background:#f4dfc1 !important;
    color:#980707 !important;

    border:2px solid #dfb987 !important;
    border-radius:50% !important;

    box-shadow:
      0 7px 18px rgba(91,3,4,.22) !important;

    font-size:31px !important;

    transform:none !important;
  }

  /* REGISTER PAGE ACTIVE */
  .mobile-nav .mobile-add.active i{
    background:#980707 !important;
    color:#fff !important;
    border:4px solid #efd1aa !important;
  }

}

/* ==================================================
   REGISTER PAGE — MOCKUP POLISH
   ================================================== */

@media(max-width:700px){

  .page-head{
    justify-content:center !important;
    text-align:center !important;
    margin:4px 0 16px !important;
  }

  .page-head .eyebrow{
    display:none !important;
  }

  .page-head h1{
    font-size:1.55rem !important;
    color:var(--wine-dark) !important;
  }

  #event-form.form-card{
    padding:14px !important;
    border-radius:22px !important;
    box-shadow:0 8px 24px rgba(90,45,35,.07) !important;
  }

  .operation-picker{
    display:grid !important;
    grid-template-columns:repeat(6,1fr) !important;
    gap:9px !important;
    margin-bottom:18px !important;
  }

  .operation-picker label{
    margin:0 !important;
  }

  .operation-picker .major{
    grid-column:span 3 !important;
  }

  .operation-picker label:not(.major){
    grid-column:span 2 !important;
  }

  .operation-picker span{
    min-height:72px !important;
    padding:9px 5px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;

    gap:4px !important;

    background:#fffaf4 !important;
    border:1px solid rgba(128,5,6,.18) !important;
    border-radius:16px !important;

    color:var(--wine) !important;

    box-shadow:0 4px 12px rgba(90,45,35,.045) !important;
  }

  .operation-picker .major span{
    min-height:116px !important;

    background:
      linear-gradient(
        145deg,
        #fff9f1 0%,
        #f4dec4 100%
      ) !important;

    border:1px solid rgba(128,5,6,.16) !important;
  }

  .operation-picker span b{
    font-size:1.35rem !important;
    line-height:1 !important;
  }

  .operation-picker .major span b{
    font-size:2rem !important;
  }

  .operation-picker span strong{
    font-size:.78rem !important;
    font-weight:900 !important;
  }

  .operation-picker .major span strong{
    font-size:1.05rem !important;
  }

  .operation-picker span small{
    font-size:.67rem !important;
    color:var(--muted) !important;
  }

  .operation-picker input:checked + span{
    background:
      linear-gradient(
        145deg,
        #980707,
        #700304
      ) !important;

    border-color:#800506 !important;
    color:#fff !important;

    box-shadow:
      0 8px 18px rgba(128,5,6,.22) !important;
  }

  .operation-picker input:checked + span small{
    color:#efd8c1 !important;
  }

  /* fields */
  #event-form .form-grid{
    gap:11px !important;
    margin-bottom:12px !important;
  }

  #event-form label{
    gap:5px !important;
    font-size:.79rem !important;
  }

  #event-form input,
  #event-form select,
  #event-form textarea{
    min-height:43px !important;
    padding:9px 11px !important;
    border-radius:11px !important;
  }

  #event-form textarea{
    min-height:78px !important;
  }

  #event-form section{
    margin:12px 0 !important;
  }

  .party-field{
    gap:8px !important;
  }

  .hint{
    padding:9px 11px !important;
    margin:7px 0 0 !important;

    background:rgba(219,176,132,.18) !important;
    border-radius:10px !important;

    font-size:.68rem !important;
    line-height:1.7 !important;
  }

  .form-actions{
    display:grid !important;
    grid-template-columns:2fr 1fr !important;
    gap:9px !important;
    margin-top:16px !important;
  }

  .form-actions .primary{
    min-height:48px !important;
    border-radius:14px !important;
    font-size:.9rem !important;
  }

  .form-actions .secondary{
    min-height:48px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:14px !important;
  }

  .inline-person-add{
    margin:12px 0 0 !important;
    padding:12px !important;
    border-radius:14px !important;
  }

  .inline-person-add summary{
    font-size:.78rem !important;
    font-weight:900 !important;
    color:var(--wine) !important;
  }
}

/* === RELIABLE HIDDEN STATE === */
[hidden]{
  display:none !important;
}

/* ==================================================
   REPORT PAGE — MOBILE POLISH
   ================================================== */

@media(max-width:700px){

  /* header */
  .page-head{
    margin:4px 0 14px !important;
  }

  .page-head h1{
    font-size:1.5rem !important;
    color:var(--wine-dark) !important;
  }

  .page-head > .primary{
    min-height:38px !important;
    padding:8px 12px !important;
    border-radius:12px !important;
    font-size:.75rem !important;
  }

  /* filters */
  .filter-card{
    margin-bottom:12px !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .filter-card summary{
    margin:0 !important;
    padding:14px 16px !important;
    font-size:.85rem !important;
    color:var(--wine) !important;
    cursor:pointer !important;
    list-style:none !important;
  }

  .filter-card summary::-webkit-details-marker{
    display:none !important;
  }

  .filter-card summary::after{
    content:"⌄";
    float:left;
    font-size:1.1rem;
  }

  .filter-card[open] summary::after{
    content:"⌃";
  }

  .filter-card form{
    padding:0 13px 14px !important;
  }

  .filter-grid{
    gap:9px !important;
  }

  .filter-grid label{
    font-size:.73rem !important;
    gap:4px !important;
  }

  .filter-grid input,
  .filter-grid select{
    min-height:40px !important;
    padding:8px 10px !important;
    border-radius:10px !important;
  }

  .filter-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:5px !important;
  }

  .filter-actions button,
  .filter-actions a{
    min-height:42px !important;
    display:grid !important;
    place-items:center !important;
  }

  /* summary */
  .summary-strip{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin:11px 0 14px !important;
  }

  .summary-strip p{
    min-width:0 !important;
    padding:11px 12px !important;
    border:1px solid var(--line) !important;
    border-radius:14px !important;
    background:rgba(255,250,244,.94) !important;
    box-shadow:0 4px 12px rgba(75,27,18,.045) !important;
  }

  .summary-strip span{
    font-size:.67rem !important;
  }

  .summary-strip b{
    margin-top:4px !important;
    font-size:.95rem !important;
  }

  /* transaction cards */
  .table-wrap{
    margin-top:5px !important;
  }

  .table-wrap tr.tx-row{
    position:relative !important;
    padding:12px 14px !important;
    margin-bottom:10px !important;

    border-radius:17px !important;
    border:1px solid var(--line) !important;

    background:rgba(255,250,244,.96) !important;

    box-shadow:
      0 5px 15px rgba(75,27,18,.055) !important;

    overflow:hidden !important;
  }

  .table-wrap tr.tx-row.receipt{
    border-right:4px solid #2e7d61 !important;
  }

  .table-wrap tr.tx-row.payment{
    border-right:4px solid var(--red) !important;
  }

  .table-wrap tr.tx-row.ledger_entry{
    border-right:4px solid var(--blue) !important;
  }

  .table-wrap tr.tx-row.bank_transfer,
  .table-wrap tr.tx-row.ledger_transfer{
    border-right:4px solid var(--sand) !important;
  }

  .table-wrap td{
    grid-template-columns:68px 1fr !important;
    padding:5px 0 !important;
    gap:8px !important;
    align-items:start !important;
    font-size:.78rem !important;
  }

  .table-wrap td:before{
    font-size:.65rem !important;
    padding-top:2px !important;
  }

  .table-wrap td.amount{
    margin-top:5px !important;
    padding-top:9px !important;
    border-top:1px solid rgba(128,5,6,.10) !important;

    font-size:1.05rem !important;
    font-weight:900 !important;
  }

  .table-wrap .amount small{
    font-size:.62rem !important;
    font-weight:400 !important;
  }

  .table-wrap .created-at,
  .table-wrap .source-note{
    font-size:.62rem !important;
    margin-top:3px !important;
  }

  .table-wrap .pill{
    padding:4px 8px !important;
    border-radius:9px !important;
    font-size:.67rem !important;
  }

  .table-wrap .actions{
    margin-top:7px !important;
    padding-top:8px !important;
    border-top:1px solid rgba(128,5,6,.10) !important;
    gap:14px !important;
  }

  .table-wrap .actions a,
  .table-wrap .actions button{
    font-size:.7rem !important;
    padding:3px !important;
  }
}

/* ==================================================
   ACCOUNTS + PEOPLE — MOBILE POLISH
   ================================================== */

@media(max-width:700px){

  /* page title */
  .account-manager > .section-title{
    margin:0 0 10px !important;
  }

  .account-manager > .section-title span{
    display:none !important;
  }

  /* account management cards */
  .account-manage-card{
    padding:14px !important;
    border-radius:18px !important;
    background:rgba(255,250,244,.96) !important;
    border:1px solid var(--line) !important;
    box-shadow:0 5px 15px rgba(75,27,18,.05) !important;
  }

  .account-overview{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin-bottom:12px !important;
  }

  .account-overview > div{
    flex:1 !important;
  }

  .account-overview strong{
    display:block !important;
    font-size:.95rem !important;
    margin-bottom:4px !important;
  }

  .kind-tag{
    flex:0 0 auto !important;
    padding:5px 8px !important;
    border-radius:9px !important;
    background:#f4e1cc !important;
    color:var(--wine) !important;
    font-size:.65rem !important;
    font-weight:900 !important;
  }

  .balance-state{
    margin-top:2px !important;
    font-size:1.05rem !important;
    font-weight:900 !important;
    direction:ltr !important;
    text-align:right !important;
  }

  .balance-state small{
    display:block !important;
    direction:rtl !important;
    margin:4px 0 0 !important;
    font-size:.66rem !important;
    font-weight:500 !important;
    color:var(--muted) !important;
  }

  .balance-state.creditor{
    color:var(--blue) !important;
  }

  .balance-state.debtor{
    color:var(--red) !important;
  }

  /* rename + balance forms */
  .account-row.compact,
  .balance-edit-form{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-top:10px !important;
  }

  .account-row.compact label,
  .balance-edit-form label{
    font-size:.72rem !important;
  }

  .account-row.compact input,
  .balance-edit-form input,
  .balance-edit-form select{
    min-height:40px !important;
    padding:8px 10px !important;
  }

  .account-row.compact button,
  .balance-edit-form button{
    min-height:40px !important;
    width:100% !important;
  }

  .account-manage-card .hint{
    margin-top:9px !important;
    padding:8px 10px !important;
    font-size:.63rem !important;
    line-height:1.6 !important;
  }

  /* right-side panels become clean mobile cards */
  .two-col > div > .panel{
    margin-top:11px !important;
    padding:14px !important;
  }

  .two-col > div > .panel h2{
    margin:0 0 12px !important;
    font-size:.95rem !important;
  }

  /* people */
  .add-person{
    padding:14px !important;
    margin-bottom:12px !important;
  }

  .add-person h2{
    margin:0 0 10px !important;
    font-size:.95rem !important;
    color:var(--wine-dark) !important;
  }

  .add-person .inline-form{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:8px !important;
    margin:0 !important;
  }

  .add-person .inline-form input{
    min-height:42px !important;
  }

  .add-person .inline-form button{
    min-height:42px !important;
    padding:8px 14px !important;
  }

  .people-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .person-card{
    padding:14px !important;
    border-radius:18px !important;
    background:rgba(255,250,244,.96) !important;
    border:1px solid var(--line) !important;
    box-shadow:0 5px 15px rgba(75,27,18,.05) !important;
  }

  .person-card > a{
    padding-bottom:11px !important;
    margin-bottom:10px !important;
    border-bottom:1px solid rgba(128,5,6,.10) !important;
  }

  .person-card > a span{
    color:var(--ink) !important;
    font-size:.92rem !important;
    font-weight:900 !important;
  }

  .person-card > a strong{
    margin-top:5px !important;
    font-size:1.25rem !important;
  }

  .person-card > a small{
    margin-top:3px !important;
    color:var(--muted) !important;
    font-size:.67rem !important;
  }

  .person-card .inline-form,
  .person-card .balance-edit-form{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:7px !important;
    margin-top:8px !important;
  }

  .person-card .balance-edit-form{
    grid-template-columns:110px 1fr !important;
  }

  .person-card .balance-edit-form button{
    grid-column:1/-1 !important;
  }

  .person-card input,
  .person-card select{
    min-height:39px !important;
    padding:7px 9px !important;
  }

  .person-card button{
    min-height:39px !important;
  }

  .person-card > form:last-child{
    text-align:left !important;
    margin-top:5px !important;
  }

  .person-card > form:last-child button{
    min-height:auto !important;
    font-size:.68rem !important;
  }

  .person-card.inactive{
    opacity:.52 !important;
    filter:grayscale(.25) !important;
  }

}

/* Register button: icon first, label when active */
@media(max-width:700px){

  .mobile-nav .mobile-add span{
    opacity:0 !important;
    visibility:hidden !important;
  }

  .mobile-nav .mobile-add i{
    opacity:1 !important;
    visibility:visible !important;
  }

  .mobile-nav .mobile-add.active span{
    opacity:1 !important;
    visibility:visible !important;
  }

  .mobile-nav .mobile-add.active{
    padding-bottom:9px !important;
  }
}

/* ==================================================
   FAMILY VIEWER
   ================================================== */

.family-brand{
  text-align:center;
  margin:18px 0 24px;
}

.family-brand img{
  width:70px;
  height:70px;
  border-radius:20px;
  box-shadow:0 8px 22px rgba(128,5,6,.16);
}

.family-brand h1{
  margin:9px 0 3px;
  color:var(--wine);
}

.family-brand p{
  margin:0;
  color:var(--muted);
}

.family-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.family-account{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--shadow);
}

.family-account span,
.family-account small{
  display:block;
}

.family-account strong{
  display:block;
  margin:10px 0 5px;
  font-size:1.4rem;
  direction:ltr;
  text-align:right;
}

.family-account.creditor strong{color:var(--blue)}
.family-account.debtor strong{color:var(--red)}

.family-logout{
  margin:25px auto;
  text-align:center;
}

.family-report-head{
  margin:10px 0 20px;
}

.family-report-head > div{
  margin-top:15px;
  padding:20px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
}

.family-report-head span,
.family-report-head small{
  display:block;
}

.family-report-head strong{
  display:block;
  margin:8px 0;
  font-size:1.6rem;
  direction:ltr;
  text-align:right;
}

.family-transactions{
  display:grid;
  gap:10px;
}

.family-tx{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:17px;
  padding:14px;
}

.family-tx > div{
  display:flex;
  justify-content:space-between;
}

.family-tx > strong{
  display:block;
  margin-top:10px;
  font-size:1.1rem;
  direction:ltr;
  text-align:right;
}

.family-tx p{
  margin:9px 0 0;
  color:var(--muted);
}

@media(max-width:700px){
  .family-grid{
    grid-template-columns:1fr 1fr;
  }

  .family-grid .family-account:first-child{
    grid-column:1/-1;
  }

  .family-brand{
    margin-top:8px;
  }
}

/* Prevent iPhone auto-zoom only on transaction form */
@media(max-width:700px){
  #event-form input,
  #event-form select,
  #event-form textarea{
    font-size:16px !important;
  }
}

/* FAMILY REPORT — account effect colors */

.family-tx.family-positive{
  border-right:4px solid var(--blue);
}

.family-tx.family-negative{
  border-right:4px solid var(--red);
}

.family-tx.family-positive .family-tx-amount{
  color:var(--blue);
}

.family-tx.family-negative .family-tx-amount{
  color:var(--red);
}

.family-tx-amount{
  font-weight:900;
}

.family-tx-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Family report — running balance */

.family-balance-after{
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 10px;
  align-items:center;

  margin-top:11px;
  padding-top:10px;

  border-top:1px solid rgba(128,5,6,.10);
}

.family-balance-after span{
  font-size:.72rem;
  color:var(--muted);
}

.family-balance-after b{
  font-size:.95rem;
  direction:ltr;
}

.family-balance-after small{
  grid-column:1/-1;
  font-size:.65rem;
  color:var(--muted);
  text-align:left;
}

.ledger-mark{
  display:inline-block;
  margin-right:5px;
  padding:2px 6px;

  border-radius:7px;
  font-size:.65rem;
  font-weight:900;
}

.ledger-mark.positive{
  background:rgba(23,105,170,.10);
  color:var(--blue)!important;
}

.ledger-mark.negative{
  background:rgba(180,35,24,.10);
  color:var(--red)!important;
}

/* ==========================================
   FAMILY REPORT — FIXED BOTTOM BALANCE
   ========================================== */

.family-report-page{
  padding-bottom:110px;
}

.family-report-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:5px 0 18px;
}

.family-report-title h1{
  margin:0;
  font-size:1.35rem;
  color:var(--wine-dark);
}

.family-balance-after{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid rgba(128,5,6,.10);
}

.family-balance-after > span{
  font-size:.72rem;
  color:var(--muted);
}

.family-balance-value{
  display:flex;
  align-items:center;
  gap:7px;
}

.family-balance-value b{
  direction:ltr;
  font-size:.95rem;
}

.balance-short{
  display:inline-grid;
  place-items:center;
  min-width:27px;
  height:24px;
  padding:0 6px;
  border-radius:7px;
  font-size:.65rem;
  font-style:normal;
  font-weight:900;
}

.balance-short.positive{
  background:rgba(23,105,170,.11);
  color:var(--blue)!important;
}

.balance-short.negative{
  background:rgba(180,35,24,.11);
  color:var(--red)!important;
}

.balance-short.settled{
  background:rgba(120,99,92,.10);
  color:var(--muted)!important;
}

/* Fixed current balance */
.family-fixed-balance{
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(10px + env(safe-area-inset-bottom));

  z-index:900;

  display:flex;
  justify-content:space-between;
  align-items:center;

  min-height:76px;
  padding:13px 18px;

  background:linear-gradient(110deg,#760304,#9b0808);
  color:#fff;

  border-radius:22px;
  box-shadow:0 10px 28px rgba(91,3,4,.28);
}

.family-fixed-balance > span{
  font-size:.78rem;
  color:#efd5bd;
}

.family-fixed-balance > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.family-fixed-balance strong{
  direction:ltr;
  font-size:1.15rem;
}

.family-fixed-balance .positive{
  color:#9ccbf3!important;
}

.family-fixed-balance .negative{
  color:#ffb0aa!important;
}

.family-fixed-balance small{
  font-size:.65rem;
  color:#efd5bd;
}

@media(max-width:700px){
  .family-report-page{
    padding-bottom:115px;
  }
}

/* ADMIN REPORT — ACCOUNT EFFECT + RUNNING BALANCE */

.tx-row.tx-effect-positive{
  border-right-color:var(--blue)!important;
}

.tx-row.tx-effect-negative{
  border-right-color:var(--red)!important;
}

.tx-running-balance > div{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}

.tx-running-balance b{
  direction:ltr;
  font-weight:900;
}

@media(max-width:700px){

  .tx-running-balance{
    margin-top:5px!important;
    padding-top:9px!important;
    border-top:1px solid rgba(128,5,6,.10)!important;
  }

  .tx-running-balance > div{
    justify-content:flex-start;
  }

}

/* Family report — colored operation labels */
.family-tx.family-positive .family-tx-top > span{
  color:var(--blue);
  font-weight:900;
}

.family-tx.family-negative .family-tx-top > span{
  color:var(--red);
  font-weight:900;
}

.sms-list{
  display:grid;
  gap:12px;
}

.sms-card{
  padding:16px;
  border-radius:18px;
  background:var(--card,#fff);
  border:1px solid rgba(0,0,0,.08);
}

.sms-card > div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.sms-card.receipt > div strong{
  color:#1769aa;
}

.sms-card.payment > div strong{
  color:#a4161a;
}

.sms-card > div span{
  font-size:1.25rem;
  font-weight:900;
}


/* ==================================================
   BANK SMS INBOX
   ================================================== */

.sms-home-card{
  margin:24px 0 4px;
  padding:17px 18px;
  display:flex;
  align-items:center;
  gap:13px;
  background:rgba(255,250,244,.94);
  border:1px solid var(--line);
  border-radius:19px;
  box-shadow:0 6px 18px rgba(75,27,18,.07);
  color:var(--ink);
}

.sms-home-card.has-pending{
  border-color:rgba(128,5,6,.26);
}

.sms-home-icon{
  width:45px;
  height:45px;
  flex:0 0 45px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--cream);
  color:var(--wine);
  font-size:25px;
  font-weight:900;
}

.sms-home-copy{
  flex:1;
  min-width:0;
}

.sms-home-copy strong{
  display:block;
  color:var(--ink);
  font-size:.95rem;
}

.sms-home-copy span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.76rem;
}

.sms-home-badge{
  min-width:30px;
  height:30px;
  padding:0 8px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:var(--wine);
  color:#fff;
  font-size:.8rem;
}

.sms-home-arrow{
  color:var(--muted);
  font-size:1.7rem;
}

.sms-page-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:2px 0 18px;
}

.sms-page-head p{
  margin:0 0 4px;
  color:var(--muted);
  font-size:.76rem;
}

.sms-page-head h1{
  margin:0;
  color:var(--wine);
  font-size:1.55rem;
}

.sms-back{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,250,244,.94);
  border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(75,27,18,.06);
  font-size:2rem;
  line-height:1;
}

.sms-summary{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  gap:9px;
  margin-bottom:15px;
}

.sms-summary>div{
  padding:14px;
  background:rgba(255,250,244,.88);
  border:1px solid var(--line);
  border-radius:17px;
}

.sms-summary .sms-summary-main{
  background:linear-gradient(145deg,var(--wine),var(--wine2));
  border:0;
  color:#fff;
}

.sms-summary span{
  display:block;
  color:var(--muted);
  font-size:.7rem;
}

.sms-summary-main span{
  color:#efd5bb;
}

.sms-summary strong{
  display:block;
  margin-top:6px;
  font-size:1.35rem;
}

.sms-tabs{
  display:flex;
  gap:7px;
  overflow-x:auto;
  margin:0 0 14px;
  padding:2px 0;
  scrollbar-width:none;
}

.sms-tabs::-webkit-scrollbar{
  display:none;
}

.sms-tabs button{
  flex:0 0 auto;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,250,244,.82);
  color:var(--muted);
  font-size:.75rem;
  font-weight:800;
}

.sms-tabs button.active{
  background:var(--wine);
  border-color:var(--wine);
  color:#fff;
}

.sms-tabs button b{
  display:inline-grid;
  place-items:center;
  min-width:19px;
  height:19px;
  margin-right:4px;
  padding:0 5px;
  border-radius:10px;
  background:#fff;
  color:var(--wine);
  font-size:.65rem;
}

.sms-cards{
  display:grid;
  gap:11px;
}

.sms-transaction-card{
  position:relative;
  overflow:hidden;
  padding:17px;
  background:rgba(255,250,244,.96);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 6px 18px rgba(75,27,18,.065);
}

.sms-transaction-card::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:4px;
}

.sms-receipt::before{
  background:var(--blue);
}

.sms-payment::before{
  background:var(--red);
}

.sms-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.sms-type{
  display:flex;
  align-items:center;
  gap:10px;
}

.sms-type i{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:13px;
  font-style:normal;
  font-size:20px;
  font-weight:900;
}

.sms-receipt .sms-type i{
  color:var(--blue);
  background:rgba(23,105,170,.10);
}

.sms-payment .sms-type i{
  color:var(--red);
  background:rgba(180,35,24,.10);
}

.sms-type strong{
  display:block;
  font-size:.9rem;
}

.sms-receipt .sms-type strong{
  color:var(--blue);
}

.sms-payment .sms-type strong{
  color:var(--red);
}

.sms-type span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:.67rem;
}

.sms-amount{
  text-align:left;
}

.sms-amount strong{
  display:block;
  direction:ltr;
  font-size:1.2rem;
  line-height:1.15;
}

.sms-receipt .sms-amount strong{
  color:var(--blue);
}

.sms-payment .sms-amount strong{
  color:var(--red);
}

.sms-amount small{
  color:var(--muted);
  font-size:.66rem;
}

.sms-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:15px;
  padding-top:13px;
  border-top:1px solid var(--line);
}

.sms-meta>div{
  min-width:0;
}

.sms-meta span{
  display:block;
  color:var(--muted);
  font-size:.66rem;
}

.sms-meta b{
  display:block;
  margin-top:4px;
  font-size:.78rem;
  font-weight:800;
}

.sms-balance-row{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:end;
  padding-top:9px;
}

.sms-balance-row b{
  direction:ltr;
}

.sms-balance-row small{
  font-size:.65rem;
  color:var(--muted);
}

.sms-actions{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:8px;
  margin-top:15px;
}

.sms-actions form{
  margin:0;
}

.sms-confirm,
.sms-ignore{
  width:100%;
  min-height:43px;
  display:grid;
  place-items:center;
  border-radius:13px;
  font-size:.78rem;
  font-weight:900;
}

.sms-confirm{
  background:var(--wine);
  color:#fff;
  box-shadow:0 5px 12px rgba(128,5,6,.17);
}

.sms-ignore{
  border:1px solid var(--line);
  background:var(--cream);
  color:var(--wine);
}

.sms-done{
  opacity:.72;
}

.sms-empty{
  padding:50px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:rgba(255,250,244,.85);
  border:1px solid var(--line);
  border-radius:22px;
}

.sms-empty div{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin-bottom:12px;
  border-radius:50%;
  background:var(--cream);
  color:var(--wine);
  font-size:23px;
}

.sms-empty span{
  margin-top:6px;
  color:var(--muted);
  font-size:.75rem;
}


@media(max-width:700px){

  .sms-page-head{
    margin-top:2px;
  }

  .sms-summary>div{
    padding:12px 10px;
  }

  .sms-summary span{
    font-size:.64rem;
  }

  .sms-summary strong{
    font-size:1.2rem;
  }

  .sms-transaction-card{
    padding:15px;
    border-radius:18px;
  }

  .sms-amount strong{
    font-size:1.08rem;
  }

  .sms-meta{
    gap:10px 6px;
  }
}

/* === LOGIN LOGO === */
.login-logo{
  width:82px;
  height:82px;
  margin:0 auto 14px;
  padding:0;
  border-radius:24px;
  overflow:hidden;
  background:transparent;
  box-shadow:0 10px 24px rgba(128,5,6,.16);
}

.login-logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.login-card h1{
  margin:8px 0 6px;
  color:var(--wine);
}

.login-card p{
  margin:0 0 22px;
  color:var(--muted);
}