/* BillsEzySoft — Style.css  (MASTER stylesheet) */

/* Sign-in page */

:root {
  --emerald-900: #0b3a2e;
  --emerald-700: #0f6e56;
  --emerald-500: #1f8a66;
  --gold:        #b8843a;
  --ink:         #16221d;
  --muted:       #5d6b64;
  --line:        #dfe5e0;
  --cream:       #f6f3ec;
  --surface:     #ffffff;

  --font-ui:      'Hanken Grotesk', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius:    14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--cream);
}

/* ---- layout: 2 columns ---- */
.wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}

/* Sign-in: left brand panel */
.brand {
  background: linear-gradient(160deg, var(--emerald-900), #06281f);
  color: #f6f2e9;
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}
.logo .mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .12);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 21px;
}
.logo-img {
    width: 150px; /* apne logo ke hisab se adjust kar lena */
    height: auto;
    display: block;
}
.headline h1 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 16px;
}
.headline h1 em { color: var(--gold); font-style: italic; }
.headline p {
  font-size: 15.5px;
  color: rgba(246, 242, 233, .72);
  line-height: 1.6;
  max-width: 420px;
}

.feats { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.feat {
  display: flex; align-items: center; gap: 11px;
  font-size: 14.5px;
  color: rgba(246, 242, 233, .9);
}
.feat i { color: var(--gold); font-size: 19px; }

.copy { font-size: 12.5px; color: rgba(246, 242, 233, .5); }

/* Sign-in: right form panel */
.panel {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  background: var(--cream);
}
.card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 34px;
  box-shadow: 0 18px 50px rgba(11, 58, 46, .08);
}

/* steps: ek time pe ek hi dikhe */
.step { display: none; }
.step.active { display: block; }

.eyebrow {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--emerald-700);
  margin-bottom: 8px;
}
.card h2 {
  font-family: var(--font-display);
  font-size: 25px; font-weight: 600;
  margin-bottom: 8px;
}
.sub {
  font-size: 14px; color: var(--muted);
  line-height: 1.55;
  margin-bottom: 24px;
}

label {
  display: block;
  font-size: 13.5px; font-weight: 500;
  margin-bottom: 7px;
}
label .hint { color: var(--muted); font-weight: 400; }

/* phone input */
.phone {
  display: flex; align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .15s;
}
.phone:focus-within { border-color: var(--emerald-500); }
.phone .cc {
  display: flex; align-items: center; gap: 6px;
  padding: 0 13px;
  height: 50px;
  background: var(--cream);
  border-right: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
  white-space: nowrap;
}
.phone .cc i { font-size: 15px; }
.phone input {
  flex: 1; border: 0; outline: 0;
  height: 50px; padding: 0 14px;
  font-family: inherit; font-size: 15px;
  color: var(--ink);
}

/* generic text field */
.field { margin-top: 16px; }
.field input {
  width: 100%; height: 50px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-family: inherit; font-size: 15px;
  outline: 0;
  transition: border-color .15s;
}
.field input:focus { border-color: var(--emerald-500); }

/* buttons */
.btn {
  width: 100%; height: 50px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-top: 20px;
  transition: transform .1s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--emerald-900);
  color: #fff;
}
.btn-primary:hover { background: var(--emerald-700); }
.btn-google {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-google:hover { background: var(--cream); }
.gicon { width: 19px; height: 19px; }

/* divider */
.divider {
  display: flex; align-items: center;
  text-align: center;
  color: var(--muted); font-size: 13px;
  margin: 20px 0 4px;
}
.divider::before,
.divider::after {
  content: ""; flex: 1;
  height: 1px; background: var(--line);
}
.divider::before { margin-right: 14px; }
.divider::after  { margin-left: 14px; }

.legal {
  font-size: 12.5px; color: var(--muted);
  text-align: center;
  margin-top: 18px;
}
.legal a { color: var(--emerald-700); }

/* back button (step 2) */
.back {
  background: none; border: 0;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-family: inherit; font-size: 13.5px;
  cursor: pointer;
  margin-bottom: 18px;
  padding: 0;
}
.back:hover { color: var(--ink); }

/* OTP boxes */
.otp { display: flex; gap: 8px; margin-bottom: 8px; }
.otp input {
  flex: 1 1 0;
  width: 0; min-width: 0;
  aspect-ratio: 1 / 1.05;
  max-height: 58px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 600;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  outline: 0;
  background: var(--surface);
  -moz-appearance: textfield;
  transition: border-color .15s, box-shadow .15s;
}
.otp input::-webkit-outer-spin-button,
.otp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp input:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 4px rgba(31, 138, 102, .12);
}

.resend { font-size: 13.5px; color: var(--muted); margin: 6px 0; }
.resend a { color: var(--emerald-700); cursor: pointer; }
.note { font-size: 12.5px; color: var(--muted); margin-top: 16px; }

/* Sign-in: mobile */
@media (max-width: 860px) {
  .wrap { grid-template-columns: 1fr; }
  .brand { display: none; }
  .panel { padding: 28px 18px; }
  .card { box-shadow: none; padding: 28px 22px; }
}

/* OTP resend timer */
/* Resend timer */
.resend-timer{ color:#9aa39d; font-size:13px; font-family:'JetBrains Mono',monospace; }
#resend-link{ color:#0f6e56; cursor:pointer; font-weight:600; }
#resend-link.disabled{ color:#9aa39d; cursor:not-allowed; pointer-events:none; }
/* Business chooser popup */
.biz-ov{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(7,32,25,.58);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .28s ease;
}
.biz-ov.show{ opacity:1; }

.biz-box{
  width:100%; max-width:440px;
  background:#f6f3ec;
  border-radius:24px;
  overflow:hidden;                 /* box khud scroll NAHI karega */
  box-shadow:0 40px 90px rgba(7,32,25,.45);
  transform:translateY(18px) scale(.97);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  max-height:92vh;
  display:flex;                    /* header / list / footer stack */
  flex-direction:column;
}
.biz-ov.show .biz-box{ transform:none; }

/* gradient banner header — FIX */
.biz-banner{
  position:relative;
  flex:0 0 auto;
  background:linear-gradient(160deg,#0f6e56 0%,#0b3a2e 70%,#072019 100%);
  color:#f3efe6;
  padding:26px 24px 22px;
  text-align:center;
  overflow:hidden;
}
.biz-banner::after{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(184,132,58,.35),transparent 70%);
  top:-130px; right:-90px; pointer-events:none;
}
.biz-logo{
  position:relative; z-index:1;
  width:54px; height:54px; margin:0 auto 12px; border-radius:16px;
  background:rgba(255,255,255,.12); color:#e6cd96;
  display:flex; align-items:center; justify-content:center; font-size:28px;
  border:1px solid rgba(255,255,255,.14);
}
.biz-banner h3{
  position:relative; z-index:1;
  font-family:'Fraunces',Georgia,serif; font-size:23px; font-weight:600; margin:0 0 5px;
}
.biz-banner p{
  position:relative; z-index:1;
  font-size:13px; color:rgba(243,239,230,.72); margin:0 auto; max-width:300px; line-height:1.5;
}
.biz-who{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
  color:#dff0e8; font-size:12.5px; font-weight:600; padding:5px 13px; border-radius:999px;
}
.biz-who iconify-icon{ color:#5cc59e; font-size:15px; }

/* cards list — SIRF yahi scroll hoti hai */
.biz-list{
  display:flex; flex-direction:column; gap:11px;
  padding:20px;
  flex:1 1 auto;                   /* bachi hui jagah le le */
  min-height:0;                    /* flex me scroll ke liye zaroori */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#cbd6cf transparent;
}
.biz-list::-webkit-scrollbar{ width:7px; }
.biz-list::-webkit-scrollbar-track{ background:transparent; }
.biz-list::-webkit-scrollbar-thumb{ background:#cbd6cf; border-radius:999px; }
.biz-list::-webkit-scrollbar-thumb:hover{ background:#0f6e56; }

.biz-card{
  position:relative;
  display:flex; align-items:center; gap:13px;
  width:100%; text-align:left;
  background:#fff; border:1.5px solid #e6eae4; border-radius:16px;
  padding:14px 15px; cursor:pointer; font-family:inherit;
  flex:0 0 auto;
  transition:border-color .18s, transform .12s, box-shadow .18s;
}
.biz-card:hover{ border-color:#1f8a66; transform:translateY(-2px); box-shadow:0 14px 30px rgba(11,58,46,.12); }
.biz-card:active{ transform:translateY(0); }
.biz-card:hover .biz-arrow{ transform:translateX(3px); color:#0f6e56; }

.biz-av{
  width:48px; height:48px; flex:0 0 48px; border-radius:14px;
  background:linear-gradient(155deg,#1f8a66,#0b3a2e); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:20px; font-family:'Fraunces',serif;
  box-shadow:0 6px 16px rgba(11,58,46,.25);
}
.biz-info{ flex:1; min-width:0; }
.biz-info b{ display:block; font-size:15.5px; color:#16221d; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.biz-sub{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:#5d6b64; margin-top:3px; }
.biz-sub iconify-icon{ font-size:14px; color:#9aa39d; }

.biz-right{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.biz-plan{ font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap; letter-spacing:.02em; }
.biz-plan-f{ background:#eef0e9; color:#5d6b64; }
.biz-plan-g{ background:rgba(31,138,102,.14); color:#0f6e56; }
.biz-plan-b{ background:rgba(184,132,58,.18); color:#8a5f12; }
.biz-arrow{ color:#c2cbc4; font-size:19px; transition:transform .18s, color .18s; }

/* footer — FIX */
.biz-foot{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:14px 20px 20px; font-size:12px; color:#9aa39d;
}
.biz-foot iconify-icon{ font-size:14px; }

@media (max-width:480px){
  .biz-box{ border-radius:20px; max-height:88vh; }
  .biz-banner{ padding:22px 18px 18px; }
  .biz-banner h3{ font-size:20px; }
  .biz-logo{ width:48px; height:48px; font-size:24px; }
  .biz-list{ padding:16px; gap:9px; }
  .biz-card{ padding:12px; gap:11px; }
  .biz-av{ width:44px; height:44px; flex-basis:44px; font-size:18px; }
  .biz-plan{ font-size:10px; padding:3px 8px; }
}
/* Topbar */
/* Topbar — BillsEzySoft theme */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  height:64px; padding:0 20px;
  background:rgba(246,243,236,.85);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid #e6eae4;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
}
.topbar iconify-icon{ display:inline-flex; }

.topbar .menu-btn{
  display:none; width:40px; height:40px; flex:0 0 40px;
  border:1px solid #e6eae4; border-radius:11px; background:#fff;
  color:#0b3a2e; font-size:20px; align-items:center; justify-content:center; cursor:pointer;
}
.topbar .menu-btn:hover{ background:#eef0e9; }

.topbar .search{
  display:flex; align-items:center; gap:9px;
  flex:1 1 auto; max-width:440px; height:42px; padding:0 13px;
  background:#fff; border:1px solid #e6eae4; border-radius:12px; color:#9aa39d;
  transition:border-color .15s, box-shadow .15s;
}
.topbar .search:focus-within{ border-color:#1f8a66; box-shadow:0 0 0 4px rgba(31,138,102,.1); }
.topbar .search input{ flex:1; border:0; outline:0; background:none; font-family:inherit; font-size:14px; color:#16221d; }
.topbar .search input::placeholder{ color:#9aa39d; }
.topbar .search kbd{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  background:#eef0e9; color:#5d6b64; padding:3px 7px; border-radius:6px; border:1px solid #e0e4dd;
}

.topbar .spacer{ flex:1 1 auto; }

.topbar .new-btn{
  display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 16px;
  background:#0b3a2e; color:#fff; text-decoration:none;
  font-size:14px; font-weight:600; border-radius:12px; white-space:nowrap; transition:background .18s;
}
.topbar .new-btn:hover{ background:#0f6e56; }
.topbar .new-btn iconify-icon{ font-size:18px; }

.topbar .tb-rel{ position:relative; }
.topbar .tb-btn{
  position:relative; width:42px; height:42px; flex:0 0 42px;
  border:1px solid #e6eae4; border-radius:12px; background:#fff;
  color:#0b3a2e; font-size:19px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.topbar .tb-btn:hover{ background:#eef0e9; }
.topbar .tb-btn .dot{
  position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%;
  background:#c0563f; border:2px solid #fff;
}
.topbar .avatar{
  width:42px; height:42px; flex:0 0 42px; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(155deg,#1f8a66,#0b3a2e); color:#fff;
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:16px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(11,58,46,.22);
}
.topbar .avatar:hover{ filter:brightness(1.06); }

.topbar .drop{
  position:absolute; top:52px; right:0; width:300px;
  background:#fff; border:1px solid #e6eae4; border-radius:16px;
  box-shadow:0 24px 60px rgba(11,58,46,.16); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.topbar .drop.open{ opacity:1; visibility:visible; transform:none; }
.topbar .drop h4{
  font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:#9aa39d; font-weight:700; padding:9px 11px 6px; margin:0;
}

.topbar .note-i{
  display:flex; align-items:flex-start; gap:11px; padding:10px 11px; border-radius:11px;
  text-decoration:none; color:inherit; transition:background .15s;
}
.topbar .note-i:hover{ background:#f6f3ec; }
.topbar .note-i .ic{
  width:38px; height:38px; flex:0 0 38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.topbar .note-i p{ margin:0; font-size:13.5px; font-weight:600; color:#16221d; line-height:1.3; }
.topbar .note-i span{ font-size:12px; color:#5d6b64; }

.topbar .prof-name{ padding:11px 11px 12px; margin-bottom:4px; border-bottom:1px solid #eef0e9; }
.topbar .prof-name b{ display:block; font-size:14.5px; color:#16221d; }
.topbar .prof-name span{ font-size:12.5px; color:#5d6b64; }

.topbar .logout{
  display:flex; align-items:center; gap:9px; margin-top:4px; padding:11px;
  border-top:1px solid #eef0e9; text-decoration:none;
  color:#c0563f; font-size:14px; font-weight:600; border-radius:0 0 11px 11px;
}
.topbar .logout:hover{ background:rgba(192,86,63,.07); }
.topbar .logout iconify-icon{ font-size:18px; }

@media (max-width:768px){
  .topbar{ height:58px; padding:0 14px; gap:9px; }
  .topbar .menu-btn{ display:flex; }
  .topbar .search{ display:none; }
  .topbar .new-btn span{ display:none; }
  .topbar .new-btn{ padding:0; width:42px; justify-content:center; }
  .topbar .new-btn iconify-icon{ font-size:20px; }
  .topbar .drop{ width:280px; right:-4px; }
  .topbar .wallet-pill .wal-amt{ display:none; }
  .topbar .wallet-pill{ padding:0; width:42px; justify-content:center; }
  .wallet-drop{ width:248px !important; right:-4px; }
}
@media (max-width:480px){
  .topbar{ gap:6px; padding:0 10px; }
  .topbar .drop{ width:calc(100vw - 24px); right:-6px; }
  .wallet-drop{ width:calc(100vw - 24px) !important; }
  .wal-modal{ padding:24px 18px; border-radius:16px; }
  .wal-quick{ flex-wrap:wrap; }
  .wal-quick button{ flex:1 1 40%; }
}
/* Profile page (legacy) */
.pf-wrap{
  max-width:880px; margin:0 auto; padding:26px 20px 60px;
  font-family:'Hanken Grotesk',system-ui,sans-serif; color:#16221d;
}

/* head */
.pf-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.pf-head h1{ font-family:'Fraunces',Georgia,serif; font-size:30px; font-weight:600; color:#0b3a2e; margin:0 0 4px; }
.pf-head p{ font-size:14px; color:#5d6b64; margin:0; }
.pf-back{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  background:#fff; border:1px solid #e6eae4; color:#16221d;
  font-size:13.5px; font-weight:600; text-decoration:none;
  padding:9px 14px; border-radius:11px; transition:background .15s;
}
.pf-back:hover{ background:#eef0e9; }
.pf-back iconify-icon{ font-size:17px; }

/* tabs */
.pf-tabs{
  display:flex; gap:4px; padding:5px;
  background:#fff; border:1px solid #e6eae4; border-radius:14px;
  margin-bottom:18px; overflow-x:auto;
}
.pf-tab{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  border:0; background:none; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:600; color:#5d6b64;
  padding:11px 16px; border-radius:10px; transition:background .15s,color .15s;
}
.pf-tab iconify-icon{ font-size:18px; }
.pf-tab:hover{ background:#f6f3ec; }
.pf-tab.active{ background:#0b3a2e; color:#fff; }

/* saved banner */
.pf-ok{
  display:none; align-items:center; gap:8px;
  background:rgba(31,138,102,.1); color:#0f6e56;
  font-size:14px; font-weight:600; padding:12px 15px; border-radius:12px; margin-bottom:16px;
}
.pf-ok.show{ display:flex; }
.pf-ok iconify-icon{ font-size:19px; }

/* panes */
.pf-pane{ display:none; }
.pf-pane.active{ display:block; animation:pfFade .25s ease; }
@keyframes pfFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* card */
.pf-card{
  background:#fff; border:1px solid #e6eae4; border-radius:18px;
  padding:24px; box-shadow:0 14px 40px rgba(11,58,46,.06);
}
.pf-sec{
  font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:#9aa39d; font-weight:700; margin:6px 0 14px; padding-top:8px;
}
.pf-sec:first-child{ padding-top:0; }

/* grid + fields */
.pf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.fg{ display:flex; flex-direction:column; }
.fg.full{ grid-column:1 / -1; }
.fg label{ font-size:13px; font-weight:500; color:#16221d; margin-bottom:6px; }
.fg .req{ color:#c0563f; }
.fg input, .fg select, .fg textarea{
  width:100%; border:1.5px solid #e6eae4; border-radius:11px;
  padding:11px 13px; font-family:inherit; font-size:14px; color:#16221d;
  background:#fff; outline:0; transition:border-color .15s, box-shadow .15s; resize:vertical;
}
.fg input:focus, .fg select:focus, .fg textarea:focus{ border-color:#1f8a66; box-shadow:0 0 0 4px rgba(31,138,102,.1); }
.fg input[readonly]{ background:#f6f3ec; color:#5d6b64; }
.fg textarea{ min-height:74px; }

/* checkbox row */
.fg label.check{ flex-direction:row; align-items:center; gap:9px; font-weight:500; cursor:pointer; margin:0; }
.fg label.check input{ width:18px; height:18px; flex:0 0 18px; accent-color:#0f6e56; }

/* avatar row (user tab) */
.pf-avrow{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.pf-av{
  width:64px; height:64px; flex:0 0 64px; border-radius:50%;
  background:linear-gradient(155deg,#1f8a66,#0b3a2e); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600; font-size:26px;
  box-shadow:0 6px 16px rgba(11,58,46,.25);
}
.pf-upload{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:#fff; border:1px solid #e6eae4; color:#0b3a2e;
  font-size:13.5px; font-weight:600; padding:9px 14px; border-radius:10px;
}
.pf-upload:hover{ background:#eef0e9; }
.pf-upload.sm{ padding:11px 13px; justify-content:center; }
.pf-upload iconify-icon{ font-size:17px; }
.pf-hint{ font-size:12px; color:#9aa39d; margin:7px 0 0; }

/* save button */
.pf-save{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  background:#0b3a2e; color:#fff; border:0; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:700;
  padding:13px 22px; border-radius:12px; transition:background .18s;
}
.pf-save:hover{ background:#0f6e56; }
.pf-save iconify-icon{ font-size:18px; }

@media (max-width:640px){
  .pf-head h1{ font-size:25px; }
  .pf-grid{ grid-template-columns:1fr; }
  .pf-card{ padding:18px; }
  .pf-tab{ padding:10px 13px; font-size:13.5px; }
}
/* Sidebar */
.app{ display:flex; min-height:100vh; }
.app .main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.sidebar{
  width:262px; flex:0 0 262px;
  background:#0b3a2e; color:#cfe0d8;
  display:flex; flex-direction:column;
  height:100vh; position:sticky; top:0;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
}
.sidebar iconify-icon{ display:inline-flex; }

.sb-head{ display:flex; align-items:center; gap:10px; padding:18px 18px 14px; }
.sb-logo-img{ height:34px; width:auto; display:block; flex:1; object-fit:contain; object-position:left center; }
.sb-mark{
  width:36px; height:36px; border-radius:10px;
  background:rgba(255,255,255,.1); color:#e6cd96;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  border:1px solid rgba(255,255,255,.12);
}
.sb-name{ font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:600; color:#fff; flex:1; }
.sb-x{ display:none; background:none; border:0; color:#cfe0d8; font-size:23px; cursor:pointer; }

.sb-nav{ flex:1 1 auto; overflow-y:auto; padding:4px 12px 10px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
.sb-nav::-webkit-scrollbar{ width:6px; }
.sb-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:999px; }

.sb-sec{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(207,224,216,.45); font-weight:700; padding:14px 12px 6px;
}

.nav-i{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px; margin-bottom:2px;
  color:#cfe0d8; text-decoration:none; font-size:14px; font-weight:500;
  cursor:pointer; transition:background .15s, color .15s;
}
.nav-i > iconify-icon:first-child{ font-size:20px; flex:0 0 auto; }
.nav-i:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-i.active{ background:#0f6e56; color:#fff; }
.nav-i.active > iconify-icon:first-child{ color:#e6cd96; }

.sb-tag{
  font-size:10px; font-weight:700; margin-left:auto;
  background:#b8843a; color:#3a2a0e; padding:2px 7px; border-radius:999px;
}

.group .chev{ margin-left:auto; font-size:17px; transition:transform .2s; }
.group.open > .nav-i .chev{ transform:rotate(90deg); }
.group .sub{
  display:none; flex-direction:column;
  margin:2px 0 4px 16px; padding-left:12px;
  border-left:1px solid rgba(255,255,255,.12);
}
.group.open .sub{ display:flex; }
.sub-i{
  color:rgba(207,224,216,.8); text-decoration:none;
  font-size:13.5px; padding:8px 10px; border-radius:8px; margin-bottom:1px;
  transition:background .15s, color .15s;
}
.sub-i:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sub-i.active{ color:#fff; background:rgba(31,138,102,.5); font-weight:600; }

.sb-foot{ padding:12px 14px 16px; border-top:1px solid rgba(255,255,255,.08); }
.sb-foot .plan{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:13px; padding:13px 14px;
}
.sb-foot .plan b{ display:block; font-size:14px; color:#fff; }
.sb-foot .plan p{ margin:2px 0 9px; font-size:12px; color:#e6cd96; }
.sb-foot .plan a{
  display:block; text-align:center; text-decoration:none;
  background:#b8843a; color:#3a2a0e; font-size:13px; font-weight:700;
  padding:8px; border-radius:9px;
}
.sb-foot .plan a:hover{ background:#c9a24c; }
.sb-foot .plan .plan-dis{
  display:block; text-align:center; background:rgba(184,132,58,.25); color:rgba(58,42,14,.55);
  font-size:13px; font-weight:700; padding:8px; border-radius:9px; cursor:not-allowed; user-select:none;
}

.overlay{
  position:fixed; inset:0; background:rgba(7,32,25,.5);
  z-index:44; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}

@media (max-width:980px){
  .sidebar{
    position:fixed; top:0; left:0; z-index:46;
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 60px rgba(0,0,0,.4);
  }
  .sidebar.open{ transform:none; }
  .sb-x{ display:block; }
  .overlay.open{ opacity:1; visibility:visible; }
}
/* App shell (layout) */
/* App shell guarantees (sidebar top-se, topbar content ke upar) */
html,body{ margin:0; padding:0; }
.app{ display:flex; align-items:stretch; min-height:100vh; }
.app .main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.app .main .topbar{ position:sticky; top:0; z-index:40; }
.app .main .content{ flex:1 1 auto; padding:24px; }
/* sidebar full height + sirf nav scroll, footer stick (pakka) */
.sidebar{ height:100vh; position:sticky; top:0; display:flex; flex-direction:column; }
.sb-nav{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.sb-foot{ flex:0 0 auto; }

/* Settings / Upgrade / Subscription / Welcome / Toast */
/* Settings / Upgrade / Subscription — BillsEzy theme */
.set-wrap{ max-width:880px; margin:0 auto; font-family:'Hanken Grotesk',system-ui,sans-serif; color:#16221d; }
.set-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.set-head h1{ font-family:'Fraunces',Georgia,serif; font-size:28px; font-weight:600; color:#0b3a2e; margin:0 0 4px; }
.set-head p{ font-size:13.5px; color:#5d6b64; margin:0; }
.set-up{ display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; background:#b8843a; color:#3a2a0e; text-decoration:none; font-size:13.5px; font-weight:700; padding:10px 15px; border-radius:11px; }
.set-up:hover{ background:#c9a24c; }

.pl-badge{ font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; }
.pl-f{ background:#eef0e9; color:#5d6b64; } .pl-g{ background:rgba(31,138,102,.14); color:#0f6e56; } .pl-b{ background:rgba(184,132,58,.18); color:#8a5f12; }

.set-msg{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:12px 15px; border-radius:12px; margin-bottom:16px; }
.set-msg.ok{ background:rgba(31,138,102,.1); color:#0f6e56; } .set-msg.err{ background:rgba(192,86,63,.1); color:#a8341f; }

.set-tabs{ display:flex; gap:4px; padding:5px; background:#fff; border:1px solid #e6eae4; border-radius:14px; margin-bottom:18px; overflow-x:auto; }
.set-tab{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; border:0; background:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; color:#5d6b64; padding:11px 16px; border-radius:10px; transition:background .15s,color .15s; }
.set-tab iconify-icon{ font-size:18px; } .set-tab:hover{ background:#f6f3ec; } .set-tab.active{ background:#0b3a2e; color:#fff; }
.set-pane{ display:none; } .set-pane.active{ display:block; animation:setFade .25s ease; }
@keyframes setFade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.set-card{ background:#fff; border:1px solid #e6eae4; border-radius:18px; padding:22px; box-shadow:0 14px 40px rgba(11,58,46,.06); }
.set-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.set-card-head h3{ font-size:18px; font-weight:600; margin:0; } .set-card-head .muted{ color:#9aa39d; font-weight:500; font-size:14px; }
.lim{ font-size:13px; color:#5d6b64; margin:4px 0 0; } .lim b{ color:#0f6e56; }

.set-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.set-row{ display:flex; align-items:center; gap:13px; background:#faf9f5; border:1px solid #eef0e9; border-radius:13px; padding:12px 14px; }
.set-av{ width:42px; height:42px; flex:0 0 42px; border-radius:11px; background:linear-gradient(155deg,#1f8a66,#0b3a2e); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:18px; }
.set-av.wh{ background:#0f6e56; font-size:21px; }
.set-row-info{ flex:1; min-width:0; } .set-row-info b{ display:block; font-size:14.5px; } .set-row-info span{ font-size:12.5px; color:#5d6b64; }
.set-row-actions{ display:flex; gap:6px; flex:0 0 auto; }
.set-chip{ font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:999px; flex:0 0 auto; }
.set-chip.cur{ background:rgba(31,138,102,.14); color:#0f6e56; } .set-chip.primary{ background:rgba(184,132,58,.18); color:#8a5f12; margin-left:6px; } .set-chip.role{ background:#eef0e9; color:#5d6b64; }
.set-icon{ width:34px; height:34px; border:1px solid #e6eae4; background:#fff; border-radius:9px; cursor:pointer; color:#5d6b64; font-size:17px; display:inline-flex; align-items:center; justify-content:center; }
.set-icon:hover{ background:#eef0e9; color:#0f6e56; } .set-icon.del:hover{ color:#c0563f; border-color:#e8c4bb; }
.set-empty{ text-align:center; color:#9aa39d; font-size:13.5px; padding:18px; background:#faf9f5; border:1px dashed #e0e4dd; border-radius:12px; }

.set-add{ display:flex; gap:10px; }
.set-add input{ flex:1; border:1.5px solid #e6eae4; border-radius:11px; padding:11px 13px; font-family:inherit; font-size:14px; outline:0; }
.set-add input:focus{ border-color:#1f8a66; box-shadow:0 0 0 4px rgba(31,138,102,.1); }
.set-form{ border-top:1px solid #eef0e9; padding-top:16px; }
.set-grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px 14px; margin-bottom:14px; }
.set-grid .fg{ display:flex; flex-direction:column; } .set-grid .fg.full{ grid-column:1/-1; }
.set-grid label{ font-size:13px; font-weight:500; margin-bottom:6px; } .set-grid .req{ color:#c0563f; }
.set-grid input,.set-grid select,.set-grid textarea{ border:1.5px solid #e6eae4; border-radius:11px; padding:11px 13px; font-family:inherit; font-size:14px; outline:0; resize:vertical; }
.set-grid input:focus,.set-grid select:focus,.set-grid textarea:focus{ border-color:#1f8a66; box-shadow:0 0 0 4px rgba(31,138,102,.1); }
.fg label.check{ flex-direction:row; align-items:center; gap:9px; font-weight:500; cursor:pointer; } .fg label.check input{ width:18px;height:18px;accent-color:#0f6e56; }

.perm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin:6px 0 14px; }
.perm{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#16221d; cursor:pointer; }
.perm input{ width:18px; height:18px; accent-color:#0f6e56; }
.set-hint{ font-size:12px; color:#9aa39d; margin:10px 0 0; }

.set-btn{ display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; padding:11px 18px; border-radius:11px; text-decoration:none; }
.set-btn.solid{ background:#0b3a2e; color:#fff; } .set-btn.solid:hover{ background:#0f6e56; }
.set-btn.ghost{ background:#fff; color:#0b3a2e; border:1px solid #e6eae4; padding:8px 14px; font-size:13px; } .set-btn.ghost:hover{ background:#eef0e9; }
.set-btn.gold{ background:#b8843a; color:#3a2a0e; } .set-btn.gold:hover{ background:#c9a24c; }

.set-upgrade{ display:flex; align-items:center; gap:13px; background:rgba(184,132,58,.08); border:1px solid rgba(184,132,58,.25); border-radius:13px; padding:14px 16px; }
.set-upgrade > iconify-icon{ font-size:24px; color:#b8843a; } .set-upgrade div{ flex:1; } .set-upgrade b{ display:block; font-size:14px; color:#8a5f12; } .set-upgrade span{ font-size:12.5px; color:#5d6b64; }
.set-note{ display:flex; align-items:center; gap:8px; background:#faf9f5; border:1px solid #eef0e9; border-radius:12px; padding:12px 14px; font-size:13px; color:#5d6b64; } .set-note iconify-icon{ font-size:18px; color:#0f6e56; }

/* Upgrade page */
.up-toggle{ display:flex; justify-content:center; gap:4px; background:#fff; border:1px solid #e6eae4; padding:5px; border-radius:999px; width:max-content; margin:0 auto 22px; }
.up-cyc{ border:0; background:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; color:#5d6b64; padding:9px 18px; border-radius:999px; display:flex; align-items:center; gap:7px; }
.up-cyc.on{ background:#0b3a2e; color:#fff; }
.up-save{ font-size:10.5px; background:#b8843a; color:#3a2a0e; padding:2px 7px; border-radius:999px; font-weight:700; }
.up-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.up-card{ position:relative; background:#fff; border:1.5px solid #e6eae4; border-radius:20px; padding:26px 22px 24px; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.up-card:hover{ transform:translateY(-4px); box-shadow:0 20px 46px rgba(11,58,46,.13); }
.up-card.feat{ border-color:#0f6e56; border-width:2px; box-shadow:0 18px 46px rgba(15,110,86,.16); }
.up-card.cur{ background:linear-gradient(180deg,#f6faf8,#ffffff); }
.up-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#caa052,#b8843a); color:#fff; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 16px; border-radius:999px; box-shadow:0 7px 18px rgba(184,132,58,.42); }
.up-card h3{ font-family:'Fraunces',serif; font-size:24px; font-weight:600; margin:0; color:#0b3a2e; }
.up-tag{ font-size:13px; color:#8a948d; margin:3px 0 16px; }
.up-price{ display:flex; align-items:baseline; gap:2px; margin-bottom:4px; }
.up-cur{ font-family:'Fraunces',serif; font-size:20px; font-weight:600; align-self:flex-start; margin-top:7px; color:#0b3a2e; }
.up-amt{ font-family:'Fraunces',serif; font-size:44px; font-weight:600; line-height:1; color:#0b3a2e; }
.up-per{ font-size:13px; color:#8a948d; margin-left:3px; }
.up-feats{ list-style:none; padding:16px 0 0; margin:14px 0 20px; border-top:1px solid #eef0e9; display:flex; flex-direction:column; gap:11px; flex:1; }
.up-feats li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:#3c4a43; line-height:1.4; }
.up-feats iconify-icon{ color:#1f8a66; font-size:18px; margin-top:1px; flex:0 0 auto; }
.up-card .set-btn{ margin-top:auto; height:46px; border-radius:12px; font-size:14.5px; }
.up-cur-btn{ width:100%; height:46px; margin-top:auto; display:flex; align-items:center; justify-content:center; gap:7px; border:1.5px solid #cfe0d7; background:#eef6f1; color:#0f6e56; font-weight:700; font-size:14px; border-radius:12px; }

/* upgrade confirm popup */
.up-ov{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(7,32,25,.55); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.up-ov.show{ display:flex; }
.up-modal{ background:#fff; border-radius:20px; max-width:400px; width:100%; padding:26px; text-align:center; box-shadow:0 30px 80px rgba(7,32,25,.4); }
.up-ic{ width:60px; height:60px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:34px; }
.up-ic.up{ background:rgba(31,138,102,.12); color:#0f6e56; } .up-ic.dn{ background:rgba(184,132,58,.16); color:#8a5f12; }
.up-modal h3{ font-family:'Fraunces',serif; font-size:21px; font-weight:600; margin:0 0 8px; color:#0b3a2e; }
.up-modal p{ font-size:14px; color:#5d6b64; margin:0 0 20px; line-height:1.5; }
.up-actions{ display:flex; gap:10px; } .up-actions .set-btn{ flex:1; justify-content:center; }

/* Subscription table */
.sub-table{ width:100%; }
.sub-th,.sub-tr{ display:grid; grid-template-columns:.9fr .9fr .7fr .9fr .7fr 1fr .9fr .8fr; gap:10px; align-items:center; padding:11px 6px; }
.sub-th{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:#9aa39d; font-weight:700; border-bottom:1px solid #eef0e9; }
.sub-tr{ border-bottom:1px solid #f1f0ea; font-size:13.5px; }
.inv-dl{ color:#0f6e56; font-weight:700; text-decoration:none; font-size:12.5px; white-space:nowrap; }
.inv-dl:hover{ text-decoration:underline; }
.st-badge{ display:inline-block; font-size:11.5px; font-weight:700; padding:3px 11px; border-radius:999px; white-space:nowrap; }
.st-cu{ background:rgba(31,138,102,.14); color:#0f6e56; }
.st-up{ background:rgba(184,132,58,.16); color:#8a5f12; }
.st-ex{ background:rgba(120,120,120,.14); color:#717171; }
.sub-tr .mono{ font-family:'JetBrains Mono',monospace; font-weight:600; } .sub-tr .muted{ color:#5d6b64; font-size:12.5px; } .sub-tr .cap{ text-transform:capitalize; }
.ac-chip{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.ac-up{ background:rgba(31,138,102,.14); color:#0f6e56; } .ac-dn{ background:rgba(184,132,58,.18); color:#8a5f12; } .ac-st{ background:#eef0e9; color:#5d6b64; } .ac-rn{ background:rgba(55,138,221,.12); color:#185fa5; }

@media (max-width:760px){ .up-grid{ grid-template-columns:1fr; } .sub-th{ display:none; } .sub-tr{ grid-template-columns:1fr 1fr; gap:6px; padding:12px 6px; } }
@media (max-width:640px){ .set-grid,.perm-grid{ grid-template-columns:1fr; } .set-add{ flex-direction:column; } }

/* user status chips */
.set-chip.off{ background:rgba(192,86,63,.14); color:#a8341f; margin-left:6px; }
.set-chip.pend{ background:rgba(184,132,58,.16); color:#8a5f12; margin-left:6px; }
.set-row.is-inactive{ opacity:.62; }
.set-sub{ font-size:12.5px; color:#9aa39d; margin:-4px 0 12px; }

/* section subheading inside forms */
.set-sec{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#9aa39d; font-weight:700; margin:18px 0 12px; }
.set-sec:first-child{ margin-top:0; }
.up-logo{ display:flex; align-items:center; gap:9px; border:1.5px dashed #d8dcd3; border-radius:11px; padding:11px 13px; cursor:text; }
.up-logo iconify-icon{ font-size:20px; color:#0f6e56; }
.up-logo input{ border:0; outline:0; flex:1; font-family:inherit; font-size:14px; background:none; }
.up-logo span{ display:none; }

/* primary change flow */
.prim-flow{ display:flex; align-items:center; justify-content:center; gap:12px; margin:6px 0 14px; }
.prim-flow iconify-icon{ font-size:22px; color:#b8843a; }
.prim-old,.prim-new{ font-weight:700; font-size:14px; padding:8px 14px; border-radius:10px; }
.prim-old{ background:#eef0e9; color:#5d6b64; text-decoration:line-through; }
.prim-new{ background:rgba(31,138,102,.14); color:#0f6e56; }

/* toast */
.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); z-index:99999;
  background:#0b3a2e; color:#fff; font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:14px; font-weight:600;
  padding:13px 20px; border-radius:12px; box-shadow:0 14px 40px rgba(7,32,25,.35);
  opacity:0; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s; max-width:90vw; }
.toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.toast.err{ background:#a8341f; }

/* welcome popup */
.wel-ov{ position:fixed; inset:0; z-index:9998; display:none; align-items:center; justify-content:center; padding:18px;
  background:rgba(7,32,25,.55); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.wel-ov.show{ display:flex; }
.wel-box{ background:#fff; border-radius:22px; max-width:430px; width:100%; padding:30px 28px; text-align:center;
  box-shadow:0 30px 80px rgba(7,32,25,.4); font-family:'Hanken Grotesk',system-ui,sans-serif; }
.wel-ic{ width:66px; height:66px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(184,132,58,.15); color:#b8843a; font-size:36px; }
.wel-box h3{ font-family:'Fraunces',Georgia,serif; font-size:24px; font-weight:600; color:#0b3a2e; margin:0 0 8px; }
.wel-box p{ font-size:14.5px; color:#5d6b64; margin:0 0 22px; line-height:1.55; }
.wel-actions{ display:flex; gap:10px; }
.wel-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; border:0; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:700; padding:13px; border-radius:12px; text-decoration:none; }
.wel-btn.solid{ background:#0b3a2e; color:#fff; } .wel-btn.solid:hover{ background:#0f6e56; }
.wel-btn.ghost{ background:#eef0e9; color:#0b3a2e; } .wel-btn.ghost:hover{ background:#e2e6dd; }
.fg label .muted{ color:#9aa39d; font-weight:400; font-size:12px; }
input[readonly],input:disabled{ background:#f3f2ec !important; color:#8a948d; cursor:not-allowed; }

/* Integrations cards */
.intg-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.intg-card{ background:#faf9f5; border:1px solid #eef0e9; border-radius:15px; padding:16px; display:flex; flex-direction:column; }
.intg-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.intg-ic{ width:42px; height:42px; border-radius:11px; background:#fff; border:1px solid #e6eae4; display:flex; align-items:center; justify-content:center; font-size:23px; color:#0f6e56; }
.intg-card h4{ margin:0 0 3px; font-size:15px; font-weight:600; color:#16221d; }
.intg-card p{ margin:0 0 12px; font-size:12.5px; color:#5d6b64; flex:1; }
.intg-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.intg-status{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#9aa39d; }
.intg-status.ok{ color:#0f6e56; }
.intg-status iconify-icon{ font-size:15px; }
.intg-btn{ border:1px solid #0b3a2e; background:#fff; color:#0b3a2e; font-family:inherit; font-size:13px; font-weight:700; padding:7px 16px; border-radius:9px; cursor:pointer; }
.intg-btn:hover{ background:#0b3a2e; color:#fff; }

/* toggle switch */
.toggle{ width:44px; height:25px; border-radius:999px; border:0; background:#d2d8d0; position:relative; cursor:pointer; padding:0; transition:background .2s; }
.toggle .knob{ position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.toggle.on{ background:#1f8a66; }
.toggle.on .knob{ left:22px; }
.intg-tog-form{ margin:0; }

/* integration modal */
.intg-modal{ max-width:420px; text-align:left; position:relative; }
.intg-x{ position:absolute; top:14px; right:14px; border:0; background:none; cursor:pointer; color:#9aa39d; font-size:22px; }
.intg-form h3{ display:flex; align-items:center; gap:9px; font-family:'Fraunces',serif; font-size:20px; color:#0b3a2e; margin:0 0 16px; }
.intg-form h3 iconify-icon{ color:#0f6e56; }
.intg-form .fg{ display:flex; flex-direction:column; margin-bottom:12px; }
.intg-form .fg label{ font-size:13px; font-weight:500; margin-bottom:6px; }
.intg-form .fg input{ border:1.5px solid #e6eae4; border-radius:11px; padding:11px 13px; font-family:inherit; font-size:14px; outline:0; }
.intg-form .fg input:focus{ border-color:#1f8a66; box-shadow:0 0 0 4px rgba(31,138,102,.1); }

/* image upload field */
.img-up{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.img-prev{ width:64px; height:64px; flex:0 0 64px; border-radius:13px; overflow:hidden; background:#eef0e9; display:flex; align-items:center; justify-content:center; color:#9aa39d; font-size:28px; border:1px solid #e6eae4; }
.img-prev img{ width:100%; height:100%; object-fit:cover; }
.img-btn{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:#fff; border:1px solid #e6eae4; color:#0b3a2e; font-size:13.5px; font-weight:600; padding:10px 15px; border-radius:10px; }
.img-btn:hover{ background:#eef0e9; }
.img-hint{ font-size:12px; color:#9aa39d; flex-basis:100%; }

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

/* Topbar avatar image */
.topbar .avatar.has-img{ padding:0; overflow:hidden; }
.topbar .avatar.has-img img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* Plan expired screen */
.exp-wrap{ max-width:520px; margin:8vh auto; text-align:center; font-family:'Hanken Grotesk',system-ui,sans-serif; padding:0 20px; }
.exp-ic{ width:78px; height:78px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(192,86,63,.12); color:#c0563f; font-size:42px; }
.exp-wrap h1{ font-family:'Fraunces',Georgia,serif; font-size:28px; font-weight:600; color:#0b3a2e; margin:0 0 10px; }
.exp-wrap p{ font-size:15px; color:#5d6b64; margin:0 0 22px; line-height:1.55; }
.exp-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.exp-btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer; border:0; font-family:inherit; font-size:14.5px; font-weight:700; padding:13px 22px; border-radius:12px; }
.exp-btn.solid{ background:#b8843a; color:#3a2a0e; } .exp-btn.solid:hover{ background:#c9a24c; }
.exp-btn.ghost{ background:#eef0e9; color:#0b3a2e; } .exp-btn.ghost:hover{ background:#e2e6dd; }

/* Topbar notification empty */
.topbar .drop .note-empty{ padding:18px 12px; text-align:center; color:#9aa39d; font-size:13px; }

/* Plan expired BLOCKING popup */
.exp-ov{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; padding:18px;
  background:rgba(7,32,25,.72); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.exp-ov.show{ display:flex; }
.exp-pop{ background:#fff; border-radius:22px; max-width:440px; width:100%; padding:34px 30px; text-align:center;
  box-shadow:0 36px 90px rgba(7,32,25,.5); font-family:'Hanken Grotesk',system-ui,sans-serif;
  border-top:5px solid #c0563f; animation:expPop .25s ease; }
@keyframes expPop{ from{ transform:translateY(14px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
.exp-pop .exp-ic{ width:74px; height:74px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(192,86,63,.13); color:#c0563f; font-size:40px; }
.exp-pop h2{ font-family:'Fraunces',Georgia,serif; font-size:23px; font-weight:600; color:#0b3a2e; margin:0 0 10px; }
.exp-pop p{ font-size:14.5px; color:#5d6b64; line-height:1.6; margin:0 0 22px; }
.exp-pop .exp-actions{ display:flex; flex-direction:column; gap:10px; }
.exp-pop .exp-btn{ width:100%; justify-content:center; }

/* ==================== WALLET ==================== */
.wallet-pill{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; border-radius:11px;
  background:rgba(31,138,102,.1); border:1px solid rgba(31,138,102,.28); color:#0f6e56; font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-weight:700; font-size:13.5px; cursor:pointer; transition:.15s; }
.wallet-pill:hover{ background:rgba(31,138,102,.16); }
.wallet-pill iconify-icon{ font-size:18px; }
.wallet-pill.low{ background:rgba(192,86,63,.1); border-color:rgba(192,86,63,.32); color:#c0563f; }

.wallet-drop{ width:248px; padding:14px !important; }
.wallet-drop .wal-head{ display:flex; flex-direction:column; gap:2px; padding:4px 4px 12px; }
.wallet-drop .wal-head span{ font-size:11.5px; color:#8a948d; }
.wallet-drop .wal-head b{ font-size:22px; color:#0b3a2e; font-family:'Fraunces',Georgia,serif; }
.wallet-drop .wal-low-tag{ font-style:normal; font-size:11px; color:#c0563f; font-weight:700; }
.wal-add-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:6px; height:40px; border:none; cursor:pointer;
  background:#b8843a; color:#3a2a0e; font-weight:700; font-size:13.5px; border-radius:10px; }
.wal-add-btn:hover{ background:#a8762f; }
.wal-view{ display:block; text-align:center; margin-top:9px; font-size:12px; color:#0f6e56; text-decoration:none; font-weight:600; }

/* profile wallet */
.prof-wallet{ margin:4px 6px 8px; padding:12px; background:#f6f3ec; border:1px solid #e8e4d8; border-radius:12px; }
.prof-wallet .pw-top{ display:flex; align-items:center; justify-content:space-between; }
.prof-wallet .pw-top span{ font-size:11px; color:#8a948d; display:block; }
.prof-wallet .pw-top b{ font-size:19px; color:#0b3a2e; font-family:'Fraunces',Georgia,serif; }
.prof-wallet .pw-top b.low{ color:#c0563f; }
.pw-add{ display:inline-flex; align-items:center; gap:5px; background:#0b3a2e; color:#e6cd96; border:none; cursor:pointer;
  font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:9px; }
.pw-add:hover{ background:#0f4435; }
.pw-hist{ margin-top:11px; border-top:1px solid #e8e4d8; padding-top:9px; max-height:190px; overflow-y:auto; }
.pw-hist-h{ font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:#9aa39d; margin-bottom:7px; }
.pw-hist-empty{ font-size:12px; color:#9aa39d; padding:6px 0; }
.pw-row{ display:flex; align-items:center; gap:9px; padding:6px 0; }
.pw-row iconify-icon{ font-size:18px; }
.pw-row-mid{ flex:1; display:flex; flex-direction:column; }
.pw-row-mid b{ font-size:13px; color:#16221d; }
.pw-row-mid span{ font-size:10.5px; color:#9aa39d; }
.pw-stat{ font-size:11px; font-weight:700; text-transform:capitalize; }

/* add money modal */
.wal-ov{ position:fixed; inset:0; z-index:9000; display:none; align-items:center; justify-content:center; padding:16px;
  background:rgba(7,32,25,.6); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.wal-ov.show{ display:flex; }
.wal-modal{ position:relative; background:#fff; border-radius:20px; width:100%; max-width:400px; padding:28px 26px 24px;
  box-shadow:0 30px 80px rgba(7,32,25,.4); font-family:'Hanken Grotesk',system-ui,sans-serif; border-top:4px solid #b8843a; }
.wal-x{ position:absolute; top:14px; right:14px; width:30px; height:30px; border:none; background:#f1efe8; border-radius:8px; cursor:pointer; color:#5d6b64; font-size:17px; display:flex; align-items:center; justify-content:center; }
.wal-modal-ic{ width:54px; height:54px; border-radius:14px; background:rgba(184,132,58,.14); color:#b8843a; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:14px; }
.wal-modal h3{ font-family:'Fraunces',Georgia,serif; font-size:21px; color:#0b3a2e; margin:0 0 5px; }
.wal-modal p{ font-size:13px; color:#5d6b64; margin:0 0 18px; line-height:1.5; }
.wal-lbl{ display:block; font-size:12px; font-weight:700; color:#16221d; margin-bottom:7px; }
.wal-input{ display:flex; align-items:center; border:1.5px solid #d9ddd3; border-radius:11px; padding:0 14px; height:52px; transition:.15s; }
.wal-input:focus-within{ border-color:#0f6e56; box-shadow:0 0 0 3px rgba(15,110,86,.1); }
.wal-input span{ font-size:20px; color:#0b3a2e; font-weight:700; margin-right:6px; }
.wal-input input{ flex:1; border:none; outline:none; font-size:22px; font-weight:700; color:#0b3a2e; background:transparent; }
.wal-quick{ display:flex; gap:8px; margin-top:11px; }
.wal-quick button{ flex:1; padding:8px 0; border:1px solid #d9ddd3; background:#f7f5ef; border-radius:9px; cursor:pointer; font-size:12.5px; font-weight:700; color:#0b3a2e; }
.wal-quick button:hover{ background:#eef0e9; border-color:#0f6e56; }
.wal-calc{ margin-top:18px; background:#f7f5ef; border:1px solid #ebe7dc; border-radius:12px; padding:13px 16px; }
.wal-calc>div{ display:flex; justify-content:space-between; font-size:13px; color:#5d6b64; padding:4px 0; }
.wal-calc>div b{ color:#16221d; }
.wal-calc .wal-pay{ border-top:1px dashed #d9ddd3; margin-top:5px; padding-top:9px; }
.wal-calc .wal-pay span{ font-weight:700; color:#0b3a2e; }
.wal-calc .wal-pay b{ font-size:17px; color:#0f6e56; }
.wal-pay-btn{ width:100%; margin-top:18px; height:50px; border:none; cursor:pointer; background:#b8843a; color:#3a2a0e;
  font-weight:700; font-size:15px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:8px; }
.wal-pay-btn:hover:not(:disabled){ background:#a8762f; }
.wal-pay-btn:disabled{ background:#d9d4c6; color:#8a8576; cursor:not-allowed; }
.wal-msg{ text-align:center; margin-top:12px; font-size:13px; min-height:18px; }
.wal-msg .ok{ color:#0f6e56; font-weight:600; }
.wal-msg .err{ color:#c0563f; font-weight:600; }

/* Wallet history page */
.wh-bal{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:#fff; border:1px solid #e6eae4; border-radius:16px; padding:18px 20px; margin-bottom:16px; }
.wh-bal-left span{ display:block; font-size:12px; color:#8a948d; }
.wh-bal-left b{ font-family:'Fraunces',Georgia,serif; font-size:30px; color:#0b3a2e; }
.wh-bal-left b.low{ color:#c0563f; }
.wh-low{ display:block; font-style:normal; font-size:12px; color:#c0563f; font-weight:600; margin-top:2px; }
.wh-add{ display:inline-flex; align-items:center; gap:7px; background:#b8843a; color:#3a2a0e; border:none; cursor:pointer;
  font-weight:700; font-size:14px; padding:12px 20px; border-radius:11px; }
.wh-add:hover{ background:#a8762f; }
.wh-table .sub-th, .wh-table .sub-tr{ grid-template-columns:1.4fr .8fr .9fr .8fr .9fr .9fr 1.1fr; }
@media (max-width:760px){
  .wh-table .sub-th{ display:none; }
  .wh-table .sub-tr{ grid-template-columns:1fr 1fr; gap:6px 10px; padding:12px 8px; }
  .wh-table .sub-tr span:nth-child(7){ grid-column:1 / -1; }
}

/* ============================================================
   RESPONSIVE FIX (file ke END me — source order me last, isliye
   pichhle duplicate .sidebar rules ko override karega).
   Mobile/tablet par sidebar off-canvas + menu button visible.
   ============================================================ */
@media (max-width:980px){
  .sidebar{
    position:fixed !important; top:0; left:0; height:100vh; z-index:46;
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 60px rgba(0,0,0,.4);
  }
  .sidebar.open{ transform:none; }
  .sb-x{ display:block; }
  .overlay.open{ opacity:1; visibility:visible; }
  .topbar .menu-btn{ display:flex; }      /* sidebar off-canvas hai to menu btn zaroori */
  .app .main .content{ padding:18px 14px; }
}
@media (max-width:560px){
  .app .main .content{ padding:14px 12px; }
  .sub-head h1, .set-head h1, .pf-head h1{ font-size:22px; }
  .wh-bal{ flex-direction:column; align-items:stretch; }
  .wh-bal .wh-add{ justify-content:center; }
}

/* ==================================================================
   MASTER RESPONSIVE LAYER  (file ke END me — sab par jeetega)
   Breakpoints: 1080 laptop · 980 tablet · 768 small-tab · 600 phone · 400 mini
   ================================================================== */

/* ---- 1080px: laptop — plan cards 3->2 ---- */
@media (max-width:1080px){
  .up-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---- 980px: tablet — sidebar off-canvas + menu btn (already), tighten content ---- */
@media (max-width:980px){
  .sidebar{ position:fixed !important; top:0; left:0; height:100vh; z-index:46;
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.7,.2,1); box-shadow:0 0 60px rgba(0,0,0,.4); }
  .sidebar.open{ transform:none; }
  .sb-x{ display:block; }
  .overlay.open{ opacity:1; visibility:visible; }
  .topbar .menu-btn{ display:flex; }
  .app .main .content{ padding:18px 16px; }
  .topbar .search{ max-width:280px; }
}

/* ---- 860px: stack plan cards + 2-col forms -> 1 ---- */
@media (max-width:860px){
  .up-grid{ grid-template-columns:1fr; }
  .set-grid, .perm-grid, .pf-grid, .intg-grid{ grid-template-columns:1fr; }
}

/* ---- 768px: topbar compaction (search hide, icons only) ---- */
@media (max-width:768px){
  .topbar{ height:58px; padding:0 12px; gap:8px; }
  .topbar .search{ display:none; }
  .topbar .new-btn span{ display:none; }
  .topbar .new-btn{ padding:0; width:42px; justify-content:center; }
  .topbar .new-btn iconify-icon{ font-size:20px; }
  .topbar .wallet-pill .wal-amt{ display:none; }
  .topbar .wallet-pill{ padding:0; width:42px; justify-content:center; }
  .topbar .drop{ width:300px; right:-4px; }
  .wallet-drop{ width:260px !important; right:-4px; }
}

/* ---- 640px: headers stack, tables -> 2-col cards ---- */
@media (max-width:640px){
  .set-head, .sub-head, .set-card-head, .pf-head{
    flex-direction:column; align-items:stretch; gap:12px;
  }
  .set-head .set-up, .sub-head .set-up, .set-card-head .set-btn,
  .pf-head .pf-back{ width:100%; justify-content:center; }
  .sub-th{ display:none; }
  .sub-tr{ grid-template-columns:1fr 1fr !important; gap:6px 10px; padding:12px 10px; }
  .wh-table .sub-tr span:nth-child(7){ grid-column:1 / -1; }
  .set-add{ flex-direction:column; }
  .set-add .set-btn{ width:100%; justify-content:center; }
}

/* ---- 600px: full-width dropdowns + comfy content ---- */
@media (max-width:600px){
  .app .main .content{ padding:14px 12px; }
  .sub-head h1, .set-head h1, .pf-head h1{ font-size:22px; }
  .topbar .drop{ width:calc(100vw - 20px); right:-8px; max-height:78vh; overflow-y:auto; }
  .wallet-drop{ width:calc(100vw - 20px) !important; }
  .wh-bal{ flex-direction:column; align-items:stretch; }
  .wh-bal .wh-add{ justify-content:center; }
  /* popups / modals fit */
  .biz-box, .wel-box, .exp-pop, .wal-modal, .up-modal, .intg-modal{
    max-width:100% !important; width:100% !important; border-radius:16px;
  }
  .wal-modal, .up-modal, .intg-modal{ max-height:90vh; overflow-y:auto; }
  .up-modal .up-actions, .wel-actions{ flex-direction:column; }
  .up-modal .up-actions .set-btn, .wel-actions .wel-btn{ width:100%; justify-content:center; }
  /* buttons row in emails handled inline; nothing here */
}

/* ---- 400px: mini phones ---- */
@media (max-width:400px){
  .topbar{ gap:6px; padding:0 9px; }
  .topbar .tb-btn, .topbar .avatar, .topbar .new-btn, .topbar .wallet-pill, .topbar .menu-btn{
    width:38px; height:38px; flex-basis:38px;
  }
  .wal-quick{ flex-wrap:wrap; }
  .wal-quick button{ flex:1 1 42%; }
  .sub-tr{ grid-template-columns:1fr !important; }
  .wh-table .sub-tr span:nth-child(7){ grid-column:auto; }
}

/* ---- mobile: topbar dropdowns hamesha screen ke andar (fixed + margins) ---- */
@media (max-width:600px){
  .topbar .drop, .topbar .wallet-drop{
    position:fixed !important; top:64px; left:10px; right:10px; width:auto !important;
    max-height:80vh; overflow-y:auto;
  }
}