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

body{
    font-family:Inter,Arial,sans-serif;
    background:#eef3fa;
    color:#111827;
}

.page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
}

.pay-card{
    width:100%;
    max-width:550px;
    background:#fff;
    border-radius:20px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.brand h1{
    font-size:32px;
    margin-bottom:8px;
}

.brand p{
    color:#64748b;
    margin-bottom:25px;
}

.form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.form label{
    font-weight:600;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.form input{
    width:100%;
    height:50px;
    border:1px solid #dbe3ef;
    border-radius:12px;
    padding:0 15px;
    font-size:15px;
}

.form input:focus{
    outline:none;
    border-color:#2563eb;
}

.primary-btn{
    height:52px;
    border:none;
    border-radius:12px;
    background:#2563eb;
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}

.primary-btn:hover{
    background:#1d4ed8;
}

.alert{
    padding:14px;
    border-radius:10px;
    margin-bottom:15px;
}

.alert.success{
    background:#dcfce7;
    color:#166534;
}

.alert.error{
    background:#fee2e2;
    color:#991b1b;
}

.secure-note{
    margin-top:20px;
    text-align:center;
}

.secure-note a{
    color:#2563eb;
    text-decoration:none;
}

.required{
    color:red;
}

.optional{
    color:#64748b;
    font-size:13px;
}



.dashboard-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:280px 1fr;
  background:#eef3fa;
}

.sidebar{
  background:#0f172a;
  color:#fff;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.side-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.side-logo{
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,#2563eb,#10b981);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:22px;
}

.side-brand h2{
  font-size:18px;
  margin:0;
}

.side-brand p{
  font-size:12px;
  color:#94a3b8;
  margin:3px 0 0;
}

.side-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.side-nav a,
.side-logout{
  color:#cbd5e1;
  text-decoration:none;
  padding:13px 14px;
  border-radius:14px;
  font-weight:800;
}

.side-nav a.active,
.side-nav a:hover{
  background:#1e293b;
  color:#fff;
}

.side-logout{
  margin-top:auto;
  background:#ef4444;
  color:#fff;
  text-align:center;
}

.dashboard-main{
  padding:32px;
  max-width:1280px;
  width:100%;
}

.dashboard-top{
  background:#fff;
  border:1px solid #e5eefc;
  border-radius:24px;
  padding:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  box-shadow:0 16px 40px rgba(15,23,42,.06);
}

.dashboard-top h1{
  margin:0;
  font-size:32px;
  font-weight:900;
}

.dashboard-top p{
  margin:6px 0 0;
  color:#64748b;
}

.merchant-profile-card{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:20px;
}

.merchant-profile-card div{
  background:#fff;
  border:1px solid #e5eefc;
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 26px rgba(15,23,42,.05);
}

.merchant-profile-card span{
  display:block;
  color:#64748b;
  font-size:13px;
  margin-bottom:6px;
}

.merchant-profile-card strong{
  font-size:14px;
  word-break:break-word;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:26px 0 14px;
}

.section-head h2{
  margin:0;
  font-size:22px;
  font-weight:900;
}

.section-head p{
  margin:5px 0 0;
  color:#64748b;
}

.section-head a{
  background:#2563eb;
  color:#fff;
  text-decoration:none;
  padding:12px 16px;
  border-radius:12px;
  font-weight:900;
}

.premium-table td small{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:12px;
}

.badge.approved{
  background:#dcfce7;
  color:#166534;
}

.badge.suspended{
  background:#fee2e2;
  color:#991b1b;
}

@media(max-width:900px){
  .dashboard-shell{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:relative;
  }

  .side-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .dashboard-main{
    padding:16px;
  }

  .dashboard-top,
  .section-head{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .merchant-profile-card{
    grid-template-columns:1fr;
  }
}


.premium-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin:22px 0;
}

.premium-stats div{
  background:#fff;
  border:1px solid #e5eefc;
  border-radius:18px;
  padding:20px;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
}

.premium-stats span{
  display:block;
  color:#64748b;
  font-size:14px;
  margin-bottom:8px;
}

.premium-stats b{
  display:block;
  font-size:26px;
  font-weight:900;
  color:#0f172a;
}

.premium-table-box{
  overflow:auto;
  background:#fff;
  border:1px solid #e5eefc;
  border-radius:22px;
  box-shadow:0 14px 35px rgba(15,23,42,.07);
}

.premium-table{
  width:100%;
  min-width:850px;
  border-collapse:collapse;
}

.premium-table th,
.premium-table td{
  padding:15px 16px;
  border-bottom:1px solid #eef2f7;
  text-align:left;
  font-size:14px;
  white-space:nowrap;
}

.premium-table th{
  background:#f8fbff;
  color:#334155;
  font-weight:900;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.04em;
}

.empty-row{
  text-align:center!important;
  padding:28px!important;
  color:#64748b;
}

.badge.pending{
  background:#fef3c7;
  color:#92400e;
  padding:7px 11px;
  border-radius:999px;
  font-weight:900;
}

.badge.approved{
  background:#dcfce7;
  color:#166534;
  padding:7px 11px;
  border-radius:999px;
  font-weight:900;
}

.badge.completed{
  background:#dcfce7;
  color:#166534;
  padding:7px 11px;
  border-radius:999px;
  font-weight:900;
}

.badge.failed,
.badge.suspended{
  background:#fee2e2;
  color:#991b1b;
  padding:7px 11px;
  border-radius:999px;
  font-weight:900;
}

@media(max-width:900px){
  .premium-stats{
    grid-template-columns:1fr;
  }
}


.api-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:22px;
}

.api-card{
  background:#fff;
  border:1px solid #e5eefc;
  border-radius:22px;
  padding:22px;
  box-shadow:0 14px 35px rgba(15,23,42,.07);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.api-card span{
  display:block;
  color:#64748b;
  font-size:14px;
  margin-bottom:8px;
}

.api-card strong{
  display:block;
  font-size:15px;
  word-break:break-all;
  color:#0f172a;
}

.api-card small{
  display:block;
  margin-top:8px;
  color:#ef4444;
  font-size:12px;
}

.api-card button{
  border:0;
  background:#2563eb;
  color:#fff;
  padding:11px 14px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
}

.api-card.secret{
  border-color:#fed7aa;
  background:#fffaf5;
}

.settings-card{
  background:#fff;
  border:1px solid #e5eefc;
  border-radius:22px;
  padding:24px;
  box-shadow:0 14px 35px rgba(15,23,42,.07);
  margin-bottom:22px;
}

.settings-card h2{
  margin:0;
  font-size:22px;
  font-weight:900;
}

.settings-card p{
  margin:6px 0 18px;
  color:#64748b;
}

.endpoint-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid #eef2f7;
}

.endpoint-row:last-child{
  border-bottom:0;
}

.endpoint-row span{
  font-weight:900;
  color:#334155;
}

.endpoint-row code{
  color:#2563eb;
  word-break:break-all;
}

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

  .endpoint-row{
    flex-direction:column;
  }
}

.api-card{
    background:#fff;
    border-radius:20px;
    padding:24px;
    border:1px solid #e5eefc;
    box-shadow:0 10px 25px rgba(15,23,42,.06);
}

.api-card strong{
    display:block;
    margin-top:8px;
    font-size:15px;
    line-height:1.6;
    word-break:break-all;
}

.api-card button{
    min-width:90px;
}

.settings-card{
    background:#fff;
    border-radius:20px;
    padding:24px;
    border:1px solid #e5eefc;
    box-shadow:0 10px 25px rgba(15,23,42,.06);
}

.settings-card form{
    margin-top:15px;
}

.settings-card input{
    width:100%;
    height:52px;
    border:1px solid #dbe3ef;
    border-radius:12px;
    padding:0 15px;
    margin-top:8px;
}

.endpoint-row{
    align-items:center;
}

.endpoint-row code{
    background:#f8fafc;
    padding:8px 12px;
    border-radius:10px;
    border:1px solid #e2e8f0;
}

select{
    width:100%;
    height:50px;
    border:1px solid #dbe3ef;
    border-radius:12px;
    padding:0 15px;
    background:#fff;
}


.mini-btn{
    border:none;
    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
    font-weight:700;
}

.mini-btn.approve{
    background:#16a34a;
    color:#fff;
}

.mini-btn.pending{
    background:#2563eb;
    color:#fff;
}

.mini-btn.suspend{
    background:#dc2626;
    color:#fff;
}

.inline-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}



.merchant-premium-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:280px 1fr;
    background:linear-gradient(135deg,#edf4ff,#f8fbff);
}

.merchant-premium-sidebar{
    background:linear-gradient(180deg,#07142f,#0f172a);
    color:#fff;
    padding:24px 18px;
    display:flex;
    flex-direction:column;
    gap:24px;
    position:sticky;
    top:0;
    height:100vh;
}

.merchant-premium-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px;
}

.merchant-premium-brand img{
    width:48px;
    height:48px;
    object-fit:contain;
    border-radius:14px;
    background:#fff;
    padding:5px;
}

.merchant-premium-brand h2{
    font-size:18px;
    margin:0;
    font-weight:900;
}

.merchant-premium-brand p{
    font-size:12px;
    color:#93a4bd;
    margin-top:4px;
}

.merchant-premium-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.merchant-premium-nav a{
    display:flex;
    align-items:center;
    gap:10px;
    color:#cbd5e1;
    text-decoration:none;
    padding:14px 15px;
    border-radius:16px;
    font-weight:900;
    transition:.2s;
}

.merchant-premium-nav a:hover,
.merchant-premium-nav a.active{
    color:#fff;
    background:rgba(255,255,255,.1);
    box-shadow:inset 4px 0 0 #38bdf8;
}

.merchant-premium-logout{
    margin-top:auto;
    display:block;
    text-align:center;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(135deg,#ef4444,#f97316);
    padding:14px;
    border-radius:16px;
    font-weight:900;
}

.merchant-premium-main{
    padding:32px;
    max-width:1500px;
    width:100%;
}

.merchant-hero{
    background:
      radial-gradient(circle at top right,rgba(37,99,235,.16),transparent 35%),
      linear-gradient(135deg,#ffffff,#f8fbff);
    border:1px solid #e5eefc;
    border-radius:28px;
    padding:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 18px 45px rgba(15,23,42,.08);
    margin-bottom:20px;
}

.eyebrow{
    color:#2563eb;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:12px;
    margin-bottom:8px;
}

.merchant-hero h1{
    font-size:36px;
    line-height:1.15;
    margin:0;
    font-weight:950;
    color:#07142f;
}

.muted{
    margin-top:8px;
    color:#64748b;
}

.merchant-info-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:20px;
}

.merchant-info-card,
.merchant-stat-card,
.merchant-panel-card{
    background:rgba(255,255,255,.92);
    border:1px solid #e5eefc;
    border-radius:24px;
    box-shadow:0 14px 35px rgba(15,23,42,.07);
}

.merchant-info-card{
    padding:18px;
}

.merchant-info-card span,
.merchant-stat-card span{
    display:block;
    color:#64748b;
    font-size:13px;
    font-weight:800;
    margin-bottom:8px;
}

.merchant-info-card strong{
    color:#0f172a;
    font-size:15px;
    word-break:break-word;
}

.merchant-stat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:22px;
}

.merchant-stat-card{
    padding:22px;
    position:relative;
    overflow:hidden;
}

.merchant-stat-card:before{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    right:-25px;
    top:-25px;
    background:rgba(37,99,235,.08);
    border-radius:50%;
}

.merchant-stat-card.primary{
    background:linear-gradient(135deg,#0f62fe,#06b6d4);
    color:#fff;
}

.merchant-stat-card.primary span,
.merchant-stat-card.primary small,
.merchant-stat-card.primary strong{
    color:#fff;
}

.merchant-stat-card.danger-soft{
    background:#fff7f7;
    border-color:#fecaca;
}

.merchant-stat-card strong{
    display:block;
    font-size:28px;
    font-weight:950;
    color:#07142f;
    margin-bottom:6px;
}

.merchant-stat-card small{
    color:#64748b;
    font-weight:700;
}

.merchant-dashboard-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:18px;
    margin-bottom:22px;
}

.merchant-panel-card{
    padding:24px;
}

.panel-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.panel-head h2{
    margin:0;
    font-size:22px;
    color:#07142f;
    font-weight:950;
}

.panel-head p{
    margin-top:5px;
    color:#64748b;
}

.panel-action{
    background:#2563eb;
    color:#fff;
    padding:12px 16px;
    border-radius:14px;
    text-decoration:none;
    font-weight:900;
}

.mini-chart{
    min-height:210px;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:12px;
    padding-top:20px;
}

.chart-item{
    flex:1;
    text-align:center;
}

.chart-bar-wrap{
    height:140px;
    display:flex;
    align-items:end;
    justify-content:center;
    background:#f1f5f9;
    border-radius:16px;
    padding:8px;
}

.chart-bar{
    width:100%;
    max-width:34px;
    border-radius:999px;
    background:linear-gradient(180deg,#2563eb,#06b6d4);
}

.chart-item strong{
    display:block;
    font-size:12px;
    margin-top:8px;
    color:#0f172a;
}

.chart-item span{
    display:block;
    font-size:12px;
    color:#64748b;
    margin-top:3px;
}

.quick-links{
    display:grid;
    gap:12px;
}

.quick-links a{
    display:block;
    background:#f8fbff;
    border:1px solid #e5eefc;
    color:#0f172a;
    padding:15px;
    border-radius:16px;
    text-decoration:none;
    font-weight:900;
}

.quick-links a:hover{
    border-color:#2563eb;
    color:#2563eb;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:999px;
    font-weight:950;
    font-size:12px;
    text-transform:uppercase;
}

.badge.approved,
.badge.completed{
    background:#dcfce7;
    color:#166534;
}

.badge.pending{
    background:#fef3c7;
    color:#92400e;
}

.badge.failed,
.badge.cancelled,
.badge.suspended{
    background:#fee2e2;
    color:#991b1b;
}

.premium-table-box{
    overflow:auto;
    border-radius:20px;
    border:1px solid #e5eefc;
    background:#fff;
}

.premium-table{
    width:100%;
    min-width:850px;
    border-collapse:collapse;
}

.premium-table th,
.premium-table td{
    padding:15px 16px;
    border-bottom:1px solid #eef2f7;
    text-align:left;
    font-size:14px;
    white-space:nowrap;
}

.premium-table th{
    background:#f8fbff;
    color:#334155;
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.premium-table td small{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:12px;
}

.empty-row{
    text-align:center!important;
    color:#64748b;
    padding:30px!important;
}

/* =========================================================
   Merchant Topbar + Drawer Responsive Layout
   ========================================================= */

.merchant-topbar,
.merchant-sidebar-overlay{
    display:none;
}

@media(min-width:701px){
    .merchant-premium-sidebar{
        transform:none!important;
    }
}

@media(max-width:1100px){
    .merchant-info-grid,
    .merchant-stat-grid,
    .merchant-dashboard-grid{
        grid-template-columns:1fr 1fr;
    }

    .api-grid,
    .api-premium-grid,
    .api-page-grid,
    .security-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){
    html,
    body{
        max-width:100%;
        overflow-x:hidden;
    }

    body.merchant-menu-open{
        overflow:hidden;
    }

    .merchant-premium-shell{
        display:block!important;
        min-height:100vh;
    }

    .merchant-topbar{
        display:flex;
        align-items:center;
        justify-content:space-between;
        position:fixed;
        top:0;
        left:0;
        right:0;
        height:68px;
        padding:10px 14px;
        background:rgba(255,255,255,.94);
        border-bottom:1px solid #e5eefc;
        backdrop-filter:blur(14px);
        z-index:100004;
        box-shadow:0 10px 35px rgba(15,23,42,.10);
    }

    .merchant-topbar-left{
        display:flex;
        align-items:center;
        gap:10px;
        min-width:0;
    }

    .merchant-topbar-menu-btn{
        width:44px;
        height:44px;
        border:1px solid #e2e8f0;
        border-radius:14px;
        background:#fff;
        color:#07142f;
        font-size:22px;
        font-weight:900;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:0 8px 22px rgba(15,23,42,.12);
        flex:0 0 auto;
    }

    .merchant-topbar-menu-btn:active{
        transform:scale(.97);
    }

    .merchant-topbar-brand{
        display:flex;
        align-items:center;
        gap:9px;
        min-width:0;
    }

    .merchant-topbar-brand img{
        width:36px;
        height:36px;
        object-fit:contain;
        border-radius:12px;
        background:#fff;
        padding:4px;
        box-shadow:0 6px 18px rgba(15,23,42,.12);
    }

    .merchant-topbar-brand div{
        min-width:0;
    }

.merchant-topbar-brand strong{
    display:block;
    max-width:190px;
    white-space:normal;
    line-height:1.2;
    font-size:14px;
    font-weight:950;
    color:#07142f;
}

    .merchant-topbar-brand span{
        display:block;
        max-width:145px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:11px;
        color:#64748b;
        margin-top:2px;
    }

    .merchant-topbar-right{
        display:flex;
        align-items:center;
        gap:8px;
        flex:0 0 auto;
    }

    .merchant-topbar-status{
        display:inline-flex;
        align-items:center;
        padding:7px 10px;
        border-radius:999px;
        background:#dcfce7;
        color:#166534;
        font-size:11px;
        font-weight:950;
        max-width:108px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .merchant-sidebar-overlay{
        display:block;
        position:fixed;
        inset:68px 0 0 0;
        background:rgba(15,23,42,.58);
        backdrop-filter:blur(3px);
        opacity:0;
        pointer-events:none;
        transition:.25s ease;
        z-index:100000;
    }

    .merchant-premium-sidebar{
        position:fixed!important;
        top:68px!important;
        left:0!important;
        width:82%;
        max-width:330px;
        height:calc(100vh - 68px)!important;
        min-height:calc(100vh - 68px)!important;
        padding:22px 18px;
        border-radius:0 26px 26px 0!important;
        transform:translateX(-105%);
        transition:transform .28s ease;
        z-index:100001;
        overflow-y:auto;
        gap:20px;
        box-shadow:24px 0 80px rgba(15,23,42,.32);
    }

    body.merchant-menu-open .merchant-premium-sidebar{
        transform:translateX(0);
    }

    body.merchant-menu-open .merchant-sidebar-overlay{
        opacity:1;
        pointer-events:auto;
    }

    .merchant-premium-main{
        padding:88px 14px 14px!important;
        max-width:100%!important;
    }

    .merchant-premium-brand{
        padding:6px 4px 16px;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .merchant-premium-brand img{
        width:48px;
        height:48px;
    }

    .merchant-premium-brand h2{
        font-size:18px;
    }

    .merchant-premium-brand p{
        font-size:12px;
    }

    .merchant-premium-nav{
        display:flex!important;
        flex-direction:column!important;
        gap:8px!important;
        overflow:visible!important;
        padding:0!important;
        margin:0!important;
    }

    .merchant-premium-nav a{
        width:100%;
        display:flex;
        align-items:center;
        gap:12px;
        padding:14px 15px!important;
        border-radius:16px!important;
        font-size:15px!important;
        white-space:normal!important;
        color:#cbd5e1;
        box-shadow:none!important;
    }

    .merchant-premium-nav a:hover,
    .merchant-premium-nav a.active{
        color:#fff;
        background:rgba(255,255,255,.1);
        box-shadow:inset 4px 0 0 #38bdf8!important;
    }

    .merchant-premium-logout{
        margin-top:auto!important;
        width:100%!important;
        max-width:none!important;
        padding:14px!important;
        border-radius:16px!important;
    }

    .merchant-hero{
        flex-direction:column;
        align-items:flex-start;
        padding:22px;
        border-radius:22px;
        overflow:hidden;
    }

    .merchant-hero h1{
        font-size:28px;
        line-height:1.2;
    }

    .merchant-info-grid,
    .merchant-stat-grid,
    .merchant-dashboard-grid,
    .api-page-grid,
    .api-grid,
    .api-premium-grid,
    .security-grid{
        grid-template-columns:1fr!important;
    }

    .merchant-info-card,
    .merchant-stat-card,
    .merchant-panel-card,
    .settings-card,
    .api-card,
    .api-key-card{
        border-radius:20px;
        min-width:0;
    }

    .premium-table-box{
        border-radius:18px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .premium-table{
        min-width:760px;
    }

    .panel-head,
    .section-head{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .panel-action,
    .section-head a,
    .primary-btn,
    .docs-btn{
        width:100%;
        text-align:center;
    }

    .mini-chart{
        overflow-x:auto;
        justify-content:flex-start;
        padding-bottom:8px;
        -webkit-overflow-scrolling:touch;
    }

    .chart-item{
        min-width:70px;
    }

    .endpoint-row,
    .endpoint-copy-row{
        grid-template-columns:1fr!important;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .endpoint-row code,
    .endpoint-copy-row code{
        width:100%;
        white-space:normal;
        word-break:break-all;
    }

    .api-actions{
        width:100%;
        display:flex;
        gap:8px;
        flex-wrap:wrap;
        justify-content:flex-start;
    }

    .api-btn,
    .api-card button{
        flex:1 1 120px;
        min-width:110px;
    }

    .key-value,
    .key-input{
        max-width:100%;
        font-size:13px;
        word-break:break-all;
        overflow-wrap:anywhere;
    }
}

@media(max-width:420px){
    .merchant-topbar{
        padding:10px 12px;
    }

    .merchant-topbar-brand strong,
    .merchant-topbar-brand span{
        max-width:125px;
    }

    .merchant-topbar-status{
        max-width:92px;
        padding:7px 9px;
        font-size:10px;
    }

    .merchant-premium-sidebar{
        width:86%;
    }

    .merchant-premium-main{
        padding-left:12px!important;
        padding-right:12px!important;
    }

    .merchant-hero h1{
        font-size:25px;
    }

    .merchant-stat-card strong{
        font-size:24px;
    }
}

/* =========================================================
   SecureNexPay Premium SaaS UI Final Upgrade
   Sidebar + Topbar + Mobile Drawer
   ========================================================= */

:root{
    --snp-bg:#eef4ff;
    --snp-surface:#ffffff;
    --snp-surface-soft:#f8fbff;
    --snp-border:#e5eefc;
    --snp-text:#07142f;
    --snp-muted:#64748b;
    --snp-primary:#2563eb;
    --snp-cyan:#06b6d4;
    --snp-navy:#07142f;
    --snp-navy-2:#0f172a;
    --snp-success:#16a34a;
    --snp-danger:#dc2626;
    --snp-warning:#f59e0b;
    --snp-shadow:0 18px 45px rgba(15,23,42,.08);
    --snp-shadow-lg:0 26px 70px rgba(15,23,42,.16);
}

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(circle at top left,rgba(37,99,235,.08),transparent 28%),
        linear-gradient(135deg,#edf4ff,#f8fbff);
    color:var(--snp-text);
}

/* Desktop layout */
.merchant-premium-shell{
    grid-template-columns:260px 1fr!important;
    background:transparent!important;
}

.merchant-premium-sidebar{
    background:
        radial-gradient(circle at top right,rgba(56,189,248,.13),transparent 28%),
        linear-gradient(180deg,#06132e,#0b1224 52%,#07111f)!important;
    border-right:1px solid rgba(255,255,255,.07);
    box-shadow:18px 0 60px rgba(15,23,42,.16);
    padding:22px 16px!important;
}

.merchant-premium-brand{
    padding:8px 10px 20px!important;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.merchant-premium-brand img{
    width:42px!important;
    height:42px!important;
    border-radius:14px!important;
    box-shadow:0 12px 26px rgba(6,182,212,.15);
}

.merchant-premium-brand h2{
    font-size:17px!important;
    letter-spacing:-.02em;
}

.merchant-premium-brand p{
    color:#8ea3c2!important;
    font-weight:700;
}

.merchant-premium-nav{
    gap:8px!important;
    margin:0!important;
    padding:0!important;
}

.merchant-premium-nav a{
    position:relative;
    padding:12px 13px!important;
    border-radius:16px!important;
    color:#b7c4d8!important;
    font-weight:850!important;
    letter-spacing:-.01em;
    transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease!important;
    overflow:hidden;
}

.merchant-premium-nav a:hover{
    transform:translateX(4px);
    color:#fff!important;
    background:rgba(255,255,255,.08)!important;
}

.merchant-premium-nav a.active{
    color:#fff!important;
    background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(6,182,212,.16))!important;
    box-shadow:
        inset 4px 0 0 #38bdf8,
        0 14px 32px rgba(6,182,212,.14)!important;
}

.merchant-premium-nav a.active:after{
    content:"";
    position:absolute;
    right:12px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#38bdf8;
    box-shadow:0 0 18px #38bdf8;
}

.merchant-nav-icon{
    width:34px;
    height:34px;
    min-width:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(255,255,255,.075);
    color:#94d8ff;
}

.merchant-nav-icon svg{
    width:18px;
    height:18px;
    fill:currentColor;
}

.merchant-premium-nav a.active .merchant-nav-icon,
.merchant-premium-nav a:hover .merchant-nav-icon{
    background:rgba(56,189,248,.16);
    color:#e0f7ff;
}

.merchant-sidebar-footer{
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.08);
}

.merchant-premium-logout{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    background:linear-gradient(135deg,#ef4444,#f97316)!important;
    box-shadow:0 16px 32px rgba(239,68,68,.20);
    transition:.25s ease;
}

.merchant-premium-logout:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 44px rgba(239,68,68,.30);
}

.merchant-premium-main{
    padding:30px!important;
}

.merchant-hero{
    position:relative;
    overflow:hidden;
    border:1px solid var(--snp-border)!important;
    box-shadow:var(--snp-shadow)!important;
}

.merchant-hero:after{
    content:"";
    position:absolute;
    right:-120px;
    top:-120px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(37,99,235,.065);
    pointer-events:none;
}

.merchant-info-card,
.merchant-stat-card,
.merchant-panel-card,
.settings-card,
.api-key-card,
.api-card{
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.merchant-info-card:hover,
.merchant-stat-card:hover,
.merchant-panel-card:hover,
.settings-card:hover,
.api-key-card:hover,
.api-card:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 50px rgba(15,23,42,.10)!important;
    border-color:#d7e6fb!important;
}

.premium-table-box{
    box-shadow:var(--snp-shadow);
}

/* Topbar default: hidden on desktop because sidebar desktop layout is primary */
.merchant-topbar,
.merchant-sidebar-overlay{
    display:none;
}

/* Topbar common styling */
.merchant-topbar{
    height:72px;
    padding:12px 16px;
    background:rgba(255,255,255,.92);
    border-bottom:1px solid var(--snp-border);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    align-items:center;
    justify-content:space-between;
    box-shadow:0 10px 35px rgba(15,23,42,.10);
}

.merchant-topbar-left,
.merchant-topbar-right{
    display:flex;
    align-items:center;
    min-width:0;
}

.merchant-topbar-left{
    gap:12px;
}

.merchant-topbar-right{
    gap:10px;
    flex:0 0 auto;
}

.merchant-topbar-menu-btn{
    width:44px;
    height:44px;
    border:1px solid #dbe7f7;
    border-radius:15px;
    background:linear-gradient(135deg,#fff,#f8fbff);
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    box-shadow:0 10px 26px rgba(15,23,42,.12);
    transition:.22s ease;
}

.merchant-topbar-menu-btn:hover{
    transform:translateY(-1px);
}

.merchant-topbar-menu-btn span{
    width:18px;
    height:2px;
    border-radius:999px;
    background:#07142f;
    display:block;
    transition:.22s ease;
}

body.merchant-menu-open .merchant-topbar-menu-btn span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

body.merchant-menu-open .merchant-topbar-menu-btn span:nth-child(2){
    opacity:0;
}

body.merchant-menu-open .merchant-topbar-menu-btn span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

.merchant-topbar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.merchant-topbar-brand img{
    width:38px!important;
    height:38px!important;
    object-fit:contain;
    border-radius:13px;
    background:#fff;
    padding:4px;
    box-shadow:0 8px 22px rgba(15,23,42,.12);
}

.merchant-topbar-brand div{
    min-width:0;
}

.merchant-topbar-brand strong{
    display:block;
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--snp-text);
    font-size:15px;
    line-height:1.15;
    font-weight:950;
    letter-spacing:-.02em;
}

.merchant-topbar-brand span{
    display:block;
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--snp-muted);
    font-size:11px;
    margin-top:2px;
    font-weight:700;
}

.merchant-topbar-notify{
    position:relative;
    width:40px;
    height:40px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
    color:#0f172a;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(15,23,42,.08);
}

.merchant-topbar-notify svg{
    width:18px;
    height:18px;
    fill:currentColor;
}

.merchant-topbar-notify i{
    position:absolute;
    right:9px;
    top:9px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ef4444;
    box-shadow:0 0 0 3px #fff;
}

.merchant-topbar-profile{
    width:40px;
    height:40px;
    border-radius:14px;
    background:linear-gradient(135deg,#2563eb,#06b6d4);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:950;
    font-size:12px;
    box-shadow:0 12px 26px rgba(37,99,235,.25);
}

.merchant-topbar-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px!important;
    border-radius:999px!important;
    background:#dcfce7;
    color:#166534;
    font-size:11px!important;
    font-weight:950!important;
    max-width:110px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Drawer mobile */
@media(min-width:701px){
    .merchant-premium-sidebar{
        transform:none!important;
    }
}

@media(max-width:1100px){
    .merchant-info-grid,
    .merchant-stat-grid,
    .merchant-dashboard-grid{
        grid-template-columns:1fr 1fr;
    }

    .api-grid,
    .api-premium-grid,
    .api-page-grid,
    .security-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){
    html,
    body{
        max-width:100%;
        overflow-x:hidden;
    }

    body.merchant-menu-open{
        overflow:hidden;
    }

    .merchant-topbar{
        display:flex!important;
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:100004;
    }

    .merchant-premium-shell{
        display:block!important;
        min-height:100vh;
    }

    .merchant-sidebar-overlay{
        display:block!important;
        position:fixed;
        inset:72px 0 0 0;
        background:rgba(15,23,42,.48);
        backdrop-filter:blur(7px);
        -webkit-backdrop-filter:blur(7px);
        opacity:0;
        pointer-events:none;
        transition:.25s ease;
        z-index:100000;
    }

    body.merchant-menu-open .merchant-sidebar-overlay{
        opacity:1;
        pointer-events:auto;
    }

    .merchant-premium-sidebar{
        position:fixed!important;
        top:72px!important;
        left:0!important;
        width:82%!important;
        max-width:290px!important;
        height:calc(100vh - 72px)!important;
        min-height:calc(100vh - 72px)!important;
        padding:20px 16px!important;
        border-radius:0 28px 28px 0!important;
        transform:translateX(-108%);
        transition:transform .30s cubic-bezier(.2,.8,.2,1)!important;
        z-index:100001;
        overflow-y:auto;
        gap:18px;
        box-shadow:24px 0 80px rgba(15,23,42,.35);
    }

    body.merchant-menu-open .merchant-premium-sidebar{
        transform:translateX(0);
    }

    .merchant-premium-main{
        padding:92px 14px 14px!important;
        max-width:100%!important;
    }

    .merchant-premium-brand{
        padding:6px 4px 16px!important;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .merchant-premium-brand img{
        width:46px!important;
        height:46px!important;
    }

    .merchant-premium-nav{
        display:flex!important;
        flex-direction:column!important;
        gap:8px!important;
        overflow:visible!important;
        padding:0!important;
        margin:0!important;
    }

    .merchant-premium-nav a{
        width:100%;
        font-size:14px!important;
        padding:13px 13px!important;
        white-space:normal!important;
        box-shadow:none!important;
    }

    .merchant-sidebar-footer{
        margin-top:auto;
    }

    .merchant-premium-logout{
        width:100%!important;
        max-width:none!important;
        padding:13px!important;
    }

    .merchant-hero{
        flex-direction:column;
        align-items:flex-start;
        padding:22px;
        border-radius:22px;
        overflow:hidden;
    }

    .merchant-hero h1{
        font-size:28px;
        line-height:1.2;
    }

    .merchant-info-grid,
    .merchant-stat-grid,
    .merchant-dashboard-grid,
    .api-page-grid,
    .api-grid,
    .api-premium-grid,
    .security-grid{
        grid-template-columns:1fr!important;
    }

    .merchant-info-card,
    .merchant-stat-card,
    .merchant-panel-card,
    .settings-card,
    .api-card,
    .api-key-card{
        border-radius:20px;
        min-width:0;
    }

    .panel-head,
    .section-head{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .panel-action,
    .section-head a,
    .primary-btn,
    .docs-btn{
        width:100%;
        text-align:center;
    }

    .premium-table-box{
        border-radius:18px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .premium-table{
        min-width:760px;
    }

    .mini-chart{
        overflow-x:auto;
        justify-content:flex-start;
        padding-bottom:8px;
        -webkit-overflow-scrolling:touch;
    }

    .chart-item{
        min-width:70px;
    }

    .endpoint-row,
    .endpoint-copy-row{
        grid-template-columns:1fr!important;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .endpoint-row code,
    .endpoint-copy-row code{
        width:100%;
        white-space:normal;
        word-break:break-all;
    }

    .api-actions{
        width:100%;
        display:flex;
        gap:8px;
        flex-wrap:wrap;
        justify-content:flex-start;
    }

    .api-btn,
    .api-card button{
        flex:1 1 120px;
        min-width:110px;
    }

    .key-value,
    .key-input{
        max-width:100%;
        font-size:13px;
        word-break:break-all;
        overflow-wrap:anywhere;
    }
}

@media(max-width:420px){
    .merchant-topbar{
        padding:10px 12px;
    }

    .merchant-topbar-brand strong,
    .merchant-topbar-brand span{
        max-width:120px;
    }

    .merchant-topbar-status{
        max-width:88px;
        padding:7px 9px!important;
        font-size:10px!important;
    }

    .merchant-topbar-notify,
    .merchant-topbar-profile{
        width:36px;
        height:36px;
        border-radius:13px;
    }

    .merchant-premium-sidebar{
        width:86%!important;
    }

    .merchant-premium-main{
        padding-left:12px!important;
        padding-right:12px!important;
    }

    .merchant-hero h1{
        font-size:25px;
    }

    .merchant-stat-card strong{
        font-size:24px;
    }
}

/* Premium scrollbar */
::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-track{
    background:#eef3fa;
}

::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:#94a3b8;
}

/* =========================================================
   SecureNexPay Topbar Final Fix
   Desktop + Mobile header, full merchant name, no status/profile
   ========================================================= */

.merchant-topbar{
    display:flex!important;
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:100004;
    height:72px;
    padding:12px 24px;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid var(--snp-border,#e5eefc);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    align-items:center;
    justify-content:space-between;
    box-shadow:0 10px 35px rgba(15,23,42,.08);
}

@media(min-width:701px){
    .merchant-premium-sidebar{
        top:72px!important;
        height:calc(100vh - 72px)!important;
    }

    .merchant-premium-main{
        padding-top:24px!important;
    }

    .merchant-sidebar-overlay{
        display:none!important;
    }
}

.merchant-topbar-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:1 1 auto;
}

.merchant-topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}

.merchant-topbar-menu-btn{
    width:44px;
    height:44px;
    border:1px solid #dbe7f7;
    border-radius:15px;
    background:linear-gradient(135deg,#ffffff,#f8fbff);
    cursor:pointer;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    box-shadow:0 10px 26px rgba(15,23,42,.10);
    transition:.22s ease;
    flex:0 0 auto;
}

.merchant-topbar-menu-btn:hover{
    transform:translateY(-1px);
}

.merchant-topbar-menu-btn span{
    width:18px;
    height:2px;
    border-radius:999px;
    background:#07142f;
    display:block;
    transition:.22s ease;
}

body.merchant-menu-open .merchant-topbar-menu-btn span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

body.merchant-menu-open .merchant-topbar-menu-btn span:nth-child(2){
    opacity:0;
}

body.merchant-menu-open .merchant-topbar-menu-btn span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

.merchant-topbar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
}

.merchant-topbar-brand img{
    width:38px!important;
    height:38px!important;
    object-fit:contain;
    border-radius:13px;
    background:#fff;
    padding:4px;
    box-shadow:0 8px 22px rgba(15,23,42,.12);
    flex:0 0 auto;
}

.merchant-topbar-brand div{
    min-width:0;
    flex:1 1 auto;
}

.merchant-topbar-brand strong{
    display:block!important;
    max-width:none!important;
    width:100%!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    color:var(--snp-text,#07142f);
    font-size:15px;
    line-height:1.15;
    font-weight:950;
    letter-spacing:-.02em;
}

.merchant-topbar-brand span{
    display:block!important;
    max-width:none!important;
    width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:var(--snp-muted,#64748b);
    font-size:11px;
    margin-top:2px;
    font-weight:700;
}

.merchant-topbar-notify,
.merchant-topbar-profile,
.merchant-topbar-status{
    display:none!important;
}

@media(max-width:700px){
    .merchant-topbar{
        position:fixed;
        height:72px;
        padding:10px 12px;
    }

    .merchant-sidebar-overlay{
        display:block!important;
        position:fixed;
        inset:72px 0 0 0;
        background:rgba(15,23,42,.48);
        backdrop-filter:blur(7px);
        -webkit-backdrop-filter:blur(7px);
        opacity:0;
        pointer-events:none;
        transition:.25s ease;
        z-index:100000;
    }

    body.merchant-menu-open .merchant-sidebar-overlay{
        opacity:1;
        pointer-events:auto;
    }

    .merchant-topbar-brand{
        gap:8px;
        max-width:calc(100vw - 86px);
    }

    .merchant-topbar-brand img{
        width:34px!important;
        height:34px!important;
        border-radius:12px;
    }

    .merchant-topbar-brand strong{
        font-size:13px!important;
        line-height:1.12;
        max-height:30px;
        overflow:hidden!important;
    }

    .merchant-topbar-brand span{
        font-size:10.5px!important;
    }

    .merchant-topbar-right{
        display:none!important;
    }

    .merchant-premium-main{
        padding-top:92px!important;
    }
}

@media(max-width:420px){
    .merchant-topbar-brand strong,
    .merchant-topbar-brand span{
        max-width:none!important;
    }

    .merchant-topbar-brand{
        max-width:calc(100vw - 84px)!important;
    }
}

/* =========================================================
   SecureNexPay Topbar Final Update
   Desktop: hide hamburger, show notification
   Mobile: show hamburger + notification, full brand visible
   ========================================================= */

.merchant-topbar{
    display:flex!important;
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:100004;
    height:72px;
    padding:12px 24px;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid var(--snp-border,#e5eefc);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    align-items:center;
    justify-content:space-between;
    box-shadow:0 10px 35px rgba(15,23,42,.08);
}

/* Desktop header */
@media(min-width:701px){
    .merchant-topbar-menu-btn{
        display:none!important;
    }

    .merchant-topbar-left{
        gap:12px;
    }

    .merchant-topbar-brand img{
        width:36px!important;
        height:36px!important;
    }

    .merchant-topbar-brand strong{
        font-size:15px!important;
        max-width:none!important;
        white-space:nowrap!important;
        overflow:visible!important;
        text-overflow:clip!important;
    }

    .merchant-premium-sidebar{
        top:72px!important;
        height:calc(100vh - 72px)!important;
    }

    .merchant-premium-main{
        padding-top:24px!important;
    }

    .merchant-sidebar-overlay{
        display:none!important;
    }
}

/* Brand name fix */
.merchant-topbar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
}

.merchant-topbar-brand img{
    object-fit:contain;
    border-radius:13px;
    background:#fff;
    padding:4px;
    box-shadow:0 8px 22px rgba(15,23,42,.12);
    flex:0 0 auto;
}

.merchant-topbar-brand div{
    min-width:0;
    flex:1 1 auto;
}

.merchant-topbar-brand strong{
    display:block!important;
    max-width:none!important;
    width:100%!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    color:var(--snp-text,#07142f);
    line-height:1.15;
    font-weight:950;
    letter-spacing:-.02em;
}

.merchant-topbar-brand span{
    display:block!important;
    max-width:none!important;
    width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:var(--snp-muted,#64748b);
    font-size:11px;
    margin-top:2px;
    font-weight:700;
}

/* Notification restored */
.merchant-topbar-notify{
    display:flex!important;
    position:relative;
    width:40px;
    height:40px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
    color:#0f172a;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(15,23,42,.08);
    transition:.22s ease;
}

.merchant-topbar-notify:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(15,23,42,.12);
}

.merchant-topbar-notify svg{
    width:18px;
    height:18px;
    fill:currentColor;
}

.merchant-topbar-notify i{
    position:absolute;
    right:9px;
    top:9px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ef4444;
    box-shadow:0 0 0 3px #fff;
}

.merchant-topbar-profile,
.merchant-topbar-status{
    display:none!important;
}

/* Mobile */
@media(max-width:700px){
    .merchant-topbar{
        position:fixed;
        height:72px;
        padding:10px 12px;
    }

    .merchant-topbar-menu-btn{
        display:flex!important;
        width:44px;
        height:44px;
        flex:0 0 auto;
    }

    .merchant-topbar-left{
        min-width:0;
        flex:1 1 auto;
        gap:8px;
    }

    .merchant-topbar-right{
        display:flex!important;
        flex:0 0 auto;
        margin-left:8px;
    }

    .merchant-topbar-brand{
        max-width:calc(100vw - 142px)!important;
        gap:8px;
    }

    .merchant-topbar-brand img{
        width:34px!important;
        height:34px!important;
        border-radius:12px;
    }

    .merchant-topbar-brand strong{
        font-size:13px!important;
        line-height:1.12;
        max-height:30px;
        overflow:hidden!important;
    }

    .merchant-topbar-brand span{
        font-size:10.5px!important;
    }

    .merchant-topbar-notify{
        width:38px;
        height:38px;
        border-radius:13px;
    }

    .merchant-sidebar-overlay{
        display:block!important;
        position:fixed;
        inset:72px 0 0 0;
        background:rgba(15,23,42,.48);
        backdrop-filter:blur(7px);
        -webkit-backdrop-filter:blur(7px);
        opacity:0;
        pointer-events:none;
        transition:.25s ease;
        z-index:100000;
    }

    body.merchant-menu-open .merchant-sidebar-overlay{
        opacity:1;
        pointer-events:auto;
    }

    .merchant-premium-main{
        padding-top:92px!important;
    }
}

@media(max-width:420px){
    .merchant-topbar-brand{
        max-width:calc(100vw - 138px)!important;
    }

    .merchant-topbar-brand strong,
    .merchant-topbar-brand span{
        max-width:none!important;
    }
}

/* =========================================================
   SecureNexPay Dashboard Final Responsive Polish
   Desktop + Mobile clean dashboard
   ========================================================= */

body{
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.055),transparent 34%),
        radial-gradient(circle at top left,rgba(6,182,212,.045),transparent 30%),
        #f5f8fc!important;
}

.merchant-premium-shell{
    background:transparent!important;
}

.merchant-premium-main{
    width:100%;
}

/* cleaner hero */
.dashboard-hero-clean,
.merchant-hero{
    background:
        linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,251,255,.96))!important;
    border:1px solid #e6effb!important;
    box-shadow:0 16px 42px rgba(15,23,42,.075)!important;
}

.dashboard-hero-clean:after,
.merchant-hero:after{
    opacity:.72;
}

.dashboard-hero-clean .eyebrow{
    color:#2563eb;
    letter-spacing:.09em;
}

.dashboard-hero-clean h1{
    letter-spacing:-.035em;
}

/* card polish */
.merchant-info-card,
.merchant-stat-card,
.merchant-panel-card{
    background:rgba(255,255,255,.95)!important;
    border:1px solid #e6effb!important;
    box-shadow:0 12px 30px rgba(15,23,42,.065)!important;
}

.merchant-stat-card.primary{
    background:linear-gradient(135deg,#0f62fe,#06b6d4)!important;
    border-color:transparent!important;
    box-shadow:0 18px 42px rgba(37,99,235,.20)!important;
}

.merchant-stat-card.primary:before{
    background:rgba(255,255,255,.10)!important;
}

.merchant-stat-card.danger-soft{
    background:linear-gradient(135deg,#fffafa,#fff7f7)!important;
    border-color:#fecaca!important;
}

.quick-links a{
    transition:.22s ease;
}

.quick-links a:hover{
    transform:translateY(-1px);
}

/* dashboard content spacing */
@media(min-width:701px){
    .merchant-premium-main{
        padding:28px 34px!important;
    }

    .merchant-hero{
        margin-bottom:22px!important;
    }

    .merchant-info-grid{
        margin-bottom:20px!important;
    }

    .merchant-stat-grid{
        gap:16px!important;
    }
}

/* Mobile dashboard redesign */
@media(max-width:700px){
    body{
        background:
            radial-gradient(circle at top,rgba(37,99,235,.10),transparent 26%),
            linear-gradient(180deg,#eef5ff,#f7fbff)!important;
    }

    .merchant-premium-main{
        padding:88px 14px 18px!important;
    }

    /* Hero should not feel too heavy on phone */
    .merchant-hero,
    .dashboard-hero-clean{
        padding:18px 18px!important;
        border-radius:22px!important;
        margin-bottom:14px!important;
        min-height:auto!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:flex-start!important;
        gap:10px!important;
        overflow:hidden!important;
    }

    .merchant-hero:after{
        width:155px!important;
        height:155px!important;
        right:-70px!important;
        top:-70px!important;
        opacity:.45!important;
    }

    .merchant-hero .eyebrow{
        font-size:10.5px!important;
        margin-bottom:5px!important;
    }

    .merchant-hero h1{
        font-size:23px!important;
        line-height:1.12!important;
        max-width:100%!important;
        word-break:break-word;
    }

    .merchant-hero .muted{
        margin-top:6px!important;
        font-size:13px!important;
        line-height:1.35!important;
    }

    .hero-status{
        margin-top:0!important;
    }

    .hero-status .badge{
        padding:7px 11px!important;
        font-size:10.5px!important;
    }

    .merchant-info-grid{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        margin-bottom:12px!important;
    }

    .merchant-info-card{
        padding:16px!important;
        border-radius:18px!important;
        min-height:74px;
    }

    .merchant-info-card span,
    .merchant-stat-card span{
        font-size:12px!important;
        margin-bottom:7px!important;
    }

    .merchant-info-card strong{
        font-size:14px!important;
        line-height:1.35!important;
        overflow-wrap:anywhere;
    }

    .merchant-stat-grid{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        margin-bottom:14px!important;
    }

    .merchant-stat-card{
        padding:18px!important;
        border-radius:20px!important;
        min-height:116px;
    }

    .merchant-stat-card:before{
        width:82px!important;
        height:82px!important;
        right:-24px!important;
        top:-24px!important;
    }

    .merchant-stat-card strong{
        font-size:25px!important;
        line-height:1.1!important;
        margin-bottom:7px!important;
    }

    .merchant-stat-card small{
        font-size:12px!important;
        line-height:1.3!important;
    }

    .merchant-dashboard-grid{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        margin-bottom:14px!important;
    }

    .merchant-panel-card{
        padding:18px!important;
        border-radius:20px!important;
    }

    .panel-head{
        margin-bottom:14px!important;
    }

    .panel-head h2{
        font-size:19px!important;
        line-height:1.2!important;
    }

    .panel-head p{
        font-size:13px!important;
        line-height:1.35!important;
    }

    .mini-chart{
        min-height:170px!important;
        gap:10px!important;
        overflow-x:auto!important;
        justify-content:flex-start!important;
        padding-bottom:8px!important;
        -webkit-overflow-scrolling:touch;
    }

    .chart-item{
        min-width:62px!important;
    }

    .chart-bar-wrap{
        height:112px!important;
        border-radius:14px!important;
    }

    .chart-bar{
        max-width:28px!important;
    }

    .chart-item strong{
        font-size:11px!important;
    }

    .chart-item span{
        font-size:11px!important;
    }

    .quick-links{
        gap:10px!important;
    }

    .quick-links a{
        padding:13px 14px!important;
        border-radius:14px!important;
        font-size:14px!important;
    }

    .premium-table-box{
        border-radius:18px!important;
        margin-top:4px!important;
    }

    .premium-table{
        min-width:720px!important;
    }

    .panel-action{
        width:100%!important;
        text-align:center!important;
    }
}

@media(max-width:420px){
    .merchant-premium-main{
        padding-left:12px!important;
        padding-right:12px!important;
    }

    .merchant-hero h1{
        font-size:22px!important;
    }

    .merchant-stat-card strong{
        font-size:24px!important;
    }

    .merchant-info-card,
    .merchant-stat-card,
    .merchant-panel-card{
        border-radius:18px!important;
    }
}

/* =========================================================
   SecureNexPay API Keys Final Premium Responsive UI
   Paste/replaced with this full CSS file.
   ========================================================= */

.api-keys-premium-main{
    padding-bottom:34px!important;
}

.api-keys-hero{
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.09),transparent 30%),
        linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,251,255,.96))!important;
    border:1px solid #e6effb!important;
    box-shadow:0 16px 42px rgba(15,23,42,.075)!important;
}

.api-keys-hero .eyebrow{
    color:#2563eb!important;
    letter-spacing:.09em!important;
}

.api-keys-hero h1{
    letter-spacing:-.035em!important;
}

.api-page-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:18px!important;
    margin-bottom:20px!important;
}

.api-key-card{
    min-width:0!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid #e6effb!important;
    border-radius:24px!important;
    padding:24px!important;
    box-shadow:0 14px 35px rgba(15,23,42,.07)!important;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease!important;
}

.api-key-card:hover{
    transform:translateY(-2px)!important;
    box-shadow:0 22px 52px rgba(15,23,42,.10)!important;
    border-color:#d7e6fb!important;
}

.api-key-card.secret{
    background:
        radial-gradient(circle at top right,rgba(245,158,11,.10),transparent 36%),
        linear-gradient(135deg,#fffaf5,#ffffff)!important;
    border-color:#fed7aa!important;
}

.api-card-header{
    min-width:0!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:16px!important;
}

.api-card-header > div:first-child{
    min-width:0!important;
}

.api-card-header span{
    display:block!important;
    color:#58708e!important;
    font-size:13px!important;
    font-weight:950!important;
    margin-bottom:8px!important;
}

.key-value,
.key-input{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    border:0!important;
    background:transparent!important;
    color:#07142f!important;
    font-size:15px!important;
    font-weight:950!important;
    line-height:1.65!important;
    word-break:break-all!important;
    overflow-wrap:anywhere!important;
    outline:0!important;
    font-family:Inter,Arial,sans-serif!important;
}

.key-input{
    padding:0!important;
    height:auto!important;
    margin:0!important;
}

.api-actions{
    display:flex!important;
    gap:8px!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
    flex:0 0 auto!important;
}

.api-btn{
    border:0!important;
    background:#2563eb!important;
    color:#fff!important;
    padding:11px 15px!important;
    border-radius:13px!important;
    font-weight:950!important;
    cursor:pointer!important;
    text-decoration:none!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
    min-height:42px!important;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease!important;
}

.api-btn:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 10px 22px rgba(37,99,235,.20)!important;
}

.api-btn.secondary{
    background:#07142f!important;
}

.api-btn.danger{
    background:#dc2626!important;
}

.api-btn.danger:hover{
    box-shadow:0 10px 22px rgba(220,38,38,.20)!important;
}

.api-note{
    margin-top:12px!important;
    color:#64748b!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.6!important;
}

.api-warning{
    margin-top:12px!important;
    color:#b45309!important;
    font-size:13px!important;
    font-weight:850!important;
    line-height:1.6!important;
}

.security-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
    margin-top:16px!important;
}

.security-box{
    background:#f8fbff!important;
    border:1px solid #e5eefc!important;
    border-radius:18px!important;
    padding:16px!important;
}

.security-box strong{
    display:block!important;
    color:#07142f!important;
    font-size:14px!important;
    margin-bottom:6px!important;
    font-weight:950!important;
}

.security-box p{
    margin:0!important;
    color:#64748b!important;
    font-size:13px!important;
    line-height:1.6!important;
}

.code-box{
    background:#07142f!important;
    color:#e5e7eb!important;
    border-radius:18px!important;
    padding:20px!important;
    overflow:auto!important;
    font-size:13px!important;
    line-height:1.75!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
}

.endpoint-copy-row{
    display:grid!important;
    grid-template-columns:180px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:14px!important;
    padding:15px 0!important;
    border-bottom:1px solid #eef2f7!important;
}

.endpoint-copy-row:last-child{
    border-bottom:0!important;
}

.endpoint-copy-row strong{
    color:#07142f!important;
    font-weight:950!important;
}

.endpoint-copy-row code{
    background:#f8fafc!important;
    border:1px solid #e2e8f0!important;
    color:#2563eb!important;
    padding:10px 12px!important;
    border-radius:12px!important;
    word-break:break-all!important;
    overflow-wrap:anywhere!important;
    font-size:13px!important;
}

.domain-pill{
    display:inline-flex!important;
    align-items:center!important;
    background:#ecfeff!important;
    color:#0e7490!important;
    padding:8px 12px!important;
    border-radius:999px!important;
    font-weight:950!important;
    font-size:12px!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
}

.docs-btn-wrap{
    margin-top:20px!important;
}

.docs-btn{
    width:100%!important;
    min-height:52px!important;
    border-radius:14px!important;
    background:linear-gradient(135deg,#2563eb,#06b6d4)!important;
    color:#fff!important;
    font-weight:950!important;
    text-decoration:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:14px!important;
    box-shadow:0 14px 32px rgba(37,99,235,.16)!important;
}

.toast-wrap{
    position:fixed!important;
    right:20px!important;
    bottom:20px!important;
    z-index:99999!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
}

.toast-item{
    background:#07142f!important;
    color:#fff!important;
    padding:13px 18px!important;
    border-radius:14px!important;
    font-weight:850!important;
    box-shadow:0 18px 40px rgba(15,23,42,.22)!important;
    animation:toastIn .2s ease-out!important;
}

.toast-item.success{
    background:#166534!important;
}

.toast-item.error{
    background:#991b1b!important;
}

@keyframes toastIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}

.modal-backdrop{
    position:fixed!important;
    inset:0!important;
    background:rgba(15,23,42,.58)!important;
    z-index:99998!important;
    display:none;
    align-items:center!important;
    justify-content:center!important;
    padding:18px!important;
    backdrop-filter:blur(7px)!important;
    -webkit-backdrop-filter:blur(7px)!important;
}

.modal-box{
    width:100%!important;
    max-width:440px!important;
    background:#fff!important;
    border-radius:24px!important;
    padding:24px!important;
    box-shadow:0 30px 80px rgba(0,0,0,.25)!important;
}

.modal-box h3{
    margin:0 0 8px!important;
    color:#07142f!important;
    font-size:22px!important;
}

.modal-box p{
    color:#64748b!important;
    line-height:1.7!important;
    margin:0 0 18px!important;
}

.modal-actions{
    display:flex!important;
    gap:10px!important;
    justify-content:flex-end!important;
}

/* API page mobile perfection */
@media(max-width:900px){
    .api-page-grid,
    .security-grid{
        grid-template-columns:1fr!important;
    }

    .endpoint-copy-row{
        grid-template-columns:1fr!important;
        align-items:flex-start!important;
    }

    .api-card-header{
        flex-direction:column!important;
    }

    .api-actions{
        width:100%!important;
        justify-content:flex-start!important;
    }

    .api-btn{
        flex:1 1 120px!important;
    }
}

@media(max-width:700px){
    .api-keys-premium-main{
        padding-top:92px!important;
    }

    .api-keys-hero{
        padding:18px!important;
        border-radius:22px!important;
        min-height:auto!important;
        margin-bottom:14px!important;
        flex-direction:column!important;
        align-items:flex-start!important;
        gap:10px!important;
        overflow:hidden!important;
    }

    .api-keys-hero:after{
        width:150px!important;
        height:150px!important;
        right:-70px!important;
        top:-70px!important;
        opacity:.48!important;
    }

    .api-keys-hero .eyebrow{
        font-size:10.5px!important;
        margin-bottom:5px!important;
    }

    .api-keys-hero h1{
        font-size:27px!important;
        line-height:1.1!important;
    }

    .api-keys-hero .muted{
        font-size:13px!important;
        line-height:1.4!important;
        max-width:260px!important;
    }

    .api-keys-hero .badge{
        padding:7px 11px!important;
        font-size:10.5px!important;
    }

    .api-page-grid{
        gap:12px!important;
        margin-bottom:12px!important;
    }

    .api-key-card{
        padding:18px!important;
        border-radius:20px!important;
    }

    .api-card-header span{
        font-size:12px!important;
    }

    .key-value,
    .key-input{
        font-size:13.5px!important;
        line-height:1.62!important;
    }

    .api-note,
    .api-warning{
        font-size:12.5px!important;
        line-height:1.55!important;
    }

    .api-actions{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
    }

    .api-actions .api-btn{
        width:100%!important;
        min-width:0!important;
        flex:none!important;
    }

    .api-actions .api-btn.danger{
        grid-column:1 / -1!important;
    }

    .merchant-info-grid{
        gap:12px!important;
        margin-bottom:12px!important;
    }

    .merchant-panel-card{
        padding:18px!important;
        border-radius:20px!important;
        margin-bottom:12px!important;
    }

    .panel-head{
        gap:10px!important;
        margin-bottom:15px!important;
    }

    .panel-head h2{
        font-size:20px!important;
    }

    .panel-head p{
        font-size:13px!important;
        line-height:1.4!important;
    }

    .domain-pill{
        font-size:11px!important;
        padding:7px 10px!important;
    }

    .form input{
        height:48px!important;
        font-size:13px!important;
        border-radius:13px!important;
    }

    .primary-btn{
        height:50px!important;
        border-radius:13px!important;
        font-size:14px!important;
    }

    .endpoint-copy-row{
        padding:14px 0!important;
        gap:9px!important;
    }

    .endpoint-copy-row code{
        width:100%!important;
        font-size:12px!important;
        line-height:1.55!important;
    }

    .endpoint-copy-row .api-btn{
        width:100%!important;
        flex:none!important;
    }

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

    .security-box{
        padding:14px!important;
        border-radius:16px!important;
    }

    .code-box{
        padding:16px!important;
        border-radius:16px!important;
        font-size:12px!important;
        max-height:360px!important;
    }

    .toast-wrap{
        left:14px!important;
        right:14px!important;
        bottom:14px!important;
    }

    .toast-item{
        width:100%!important;
        text-align:center!important;
    }

    .modal-actions{
        flex-direction:column-reverse!important;
    }

    .modal-actions .api-btn{
        width:100%!important;
    }
}

@media(max-width:420px){
    .api-keys-hero h1{
        font-size:25px!important;
    }

    .api-key-card,
    .merchant-panel-card{
        border-radius:18px!important;
    }

    .api-actions{
        grid-template-columns:1fr!important;
    }

    .api-actions .api-btn.danger{
        grid-column:auto!important;
    }
}