:root{
  --ink:#07110f;
  --muted:#718079;
  --line:rgba(7,17,15,.09);
  --paper:#fff;
  --bg:#eef2ef;
  --soft:#f4f6f4;
  --green:#8ebca0;
  --green-dark:#49755d;
  --red:#b85c5c;
  --sidebar:250px
}

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

body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink)
}

button,input{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar);
  padding:28px 18px;
  background:var(--ink);
  color:white;
  z-index:1000;
  display:flex;
  flex-direction:column
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 10px;
  margin-bottom:55px
}

.brand-mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  font-size:10px;
  font-weight:800
}

.brand-name{font-size:13px;font-weight:750}
.brand-subtitle{
  margin-top:3px;
  color:rgba(255,255,255,.35);
  font-size:7px;
  letter-spacing:.22em
}

.nav-label{
  padding:0 12px;
  margin-bottom:9px;
  color:rgba(255,255,255,.32);
  font-size:8px;
  letter-spacing:.18em;
  text-transform:uppercase
}

.nav-section{margin-bottom:28px}

.nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  margin-bottom:4px;
  border-radius:9px;
  color:rgba(255,255,255,.55);
  font-size:11px;
  font-weight:600;
  transition:.2s
}

.nav-link:hover,
.nav-link.active{
  background:rgba(255,255,255,.09);
  color:white
}

.nav-icon{width:20px;text-align:center}

.support{
  margin-top:auto;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.04)
}

.support small{
  color:rgba(255,255,255,.35);
  font-size:8px;
  text-transform:uppercase
}

.support strong{
  display:block;
  margin:8px 0;
  font-size:11px
}

.support a{
  color:var(--green);
  font-size:9px
}

.main{
  margin-left:var(--sidebar);
  min-height:100vh
}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  height:78px;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(238,242,239,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:15px
}

.page-label{
  font-size:13px;
  font-weight:700
}

.mobile-menu{
  display:none;
  width:40px;
  height:40px;
  border:0;
  border-radius:9px;
  background:white
}

.profile{
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 12px 5px 5px;
  border-radius:30px;
  background:white;
  border:1px solid var(--line);
  font-size:10px
}

.avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--green);
  display:grid;
  place-items:center;
  font-size:9px;
  font-weight:800
}

.content{
  max-width:1550px;
  padding:42px
}

.heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:32px
}

.heading h1{
  font-size:clamp(3rem,6vw,5.8rem);
  line-height:.9;
  letter-spacing:-.07em;
  font-weight:450
}

.heading p{
  margin-top:14px;
  color:var(--muted);
  font-size:12px
}

.actions{display:flex;gap:9px}

.btn{
  min-height:46px;
  padding:0 18px;
  border-radius:9px;
  border:1px solid var(--line);
  background:white;
  color:var(--ink);
  font-size:10px;
  font-weight:750
}

.btn.primary{
  background:var(--ink);
  color:white;
  border-color:var(--ink)
}

.layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px
}

.panel{
  padding:28px;
  background:white;
  border:1px solid var(--line);
  border-radius:18px
}

.panel-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}

.panel-title h2{
  font-size:17px;
  letter-spacing:-.03em
}

.panel-title span{
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.1em
}

/* CARD VISUAL */

.card-stage{
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px
}

.bank-card{
  position:relative;
  width:min(470px,100%);
  aspect-ratio:1.586;
  padding:32px;
  border-radius:23px;
  color:white;
  background:
    radial-gradient(circle at 85% 15%,rgba(142,188,160,.45),transparent 30%),
    linear-gradient(135deg,#07110f,#1b3128);
  box-shadow:0 28px 60px rgba(7,17,15,.22);
  overflow:hidden;
  transition:.3s
}

.bank-card::before{
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  right:-90px;
  bottom:-100px
}

.card-brand{
  display:flex;
  justify-content:space-between;
  align-items:center
}

.card-brand strong{
  font-size:13px
}

.card-brand small{
  color:rgba(255,255,255,.45);
  font-size:7px;
  letter-spacing:.18em
}

.chip{
  width:45px;
  height:34px;
  margin-top:55px;
  border-radius:7px;
  background:linear-gradient(135deg,#d9d1a2,#817b55);
  position:relative
}

.chip::after{
  content:"";
  position:absolute;
  inset:7px 11px;
  border:1px solid rgba(0,0,0,.35);
  border-radius:4px
}

.card-number{
  margin-top:30px;
  font-size:21px;
  letter-spacing:.17em;
  font-family:monospace
}

.card-bottom{
  position:absolute;
  left:32px;
  right:32px;
  bottom:30px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end
}

.card-holder label,
.card-expiry label{
  display:block;
  color:rgba(255,255,255,.4);
  font-size:6px;
  letter-spacing:.15em;
  margin-bottom:5px
}

.card-holder strong,
.card-expiry strong{
  font-size:9px;
  letter-spacing:.12em
}

.contactless{
  font-size:23px;
  transform:rotate(90deg)
}

/* CARD SELECTOR */

.card-list{
  display:grid;
  gap:9px
}

.card-item{
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:11px;
  cursor:pointer;
  transition:.2s
}

.card-item:hover,
.card-item.selected{
  border-color:var(--ink);
  background:var(--soft)
}

.mini-card{
  width:54px;
  height:35px;
  border-radius:6px;
  background:var(--ink)
}

.card-item-info{
  flex:1
}

.card-item-info strong{
  display:block;
  font-size:10px
}

.card-item-info span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:8px
}

.status{
  padding:5px 8px;
  border-radius:20px;
  background:#e9f3ec;
  color:var(--green-dark);
  font-size:7px;
  font-weight:800;
  text-transform:uppercase
}

.status.frozen{
  background:#f5e7e7;
  color:var(--red)
}

/* CONTROLS */

.controls{
  margin-top:18px;
  display:grid;
  gap:10px
}

.control{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px;
  border-radius:12px;
  background:var(--soft)
}

.control-info strong{
  display:block;
  font-size:10px
}

.control-info span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:8px
}

.toggle{
  position:relative;
  width:42px;
  height:23px;
  border:0;
  border-radius:20px;
  background:#cbd1cd;
  transition:.2s
}

.toggle::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:17px;
  height:17px;
  border-radius:50%;
  background:white;
  transition:.2s
}

.toggle.on{
  background:var(--green-dark)
}

.toggle.on::after{
  transform:translateX(19px)
}

.freeze{
  width:100%;
  height:48px;
  margin-top:9px;
  border:1px solid #ead4d4;
  border-radius:9px;
  background:#fff7f7;
  color:var(--red);
  font-size:10px;
  font-weight:750
}

.freeze.active{
  background:var(--red);
  color:white
}

/* LIMIT */

.limit{
  margin-top:18px
}

.limit-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:10px
}

.limit-top span{
  font-size:9px
}

.limit-top strong{
  font-size:10px
}

.progress{
  height:8px;
  overflow:hidden;
  border-radius:20px;
  background:#e4e8e5
}

.progress-bar{
  width:42%;
  height:100%;
  border-radius:20px;
  background:var(--green-dark)
}

.limit small{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:7px
}

/* TRANSACTIONS */

.transactions{
  margin-top:18px
}

.transaction{
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--line)
}

.transaction:last-child{
  border-bottom:0
}

.transaction-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--soft)
}

.transaction-info strong{
  display:block;
  font-size:9px
}

.transaction-info span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:7px
}

.transaction-amount{
  font-size:9px;
  font-weight:750
}

/* MODAL */

.modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(7,17,15,.7);
  backdrop-filter:blur(12px)
}

.modal.show{
  display:flex
}

.modal-box{
  width:min(450px,100%);
  padding:30px;
  border-radius:18px;
  background:white
}

.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center
}

.modal-header h2{
  font-size:20px
}

.close{
  width:35px;
  height:35px;
  border:0;
  border-radius:50%;
  background:var(--soft);
  font-size:18px
}

.form{
  display:grid;
  gap:8px;
  margin-top:25px
}

.form label{
  margin-top:8px;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em
}

.form input{
  width:100%;
  height:48px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:8px;
  outline:0
}

.form button{
  height:48px;
  margin-top:12px;
  border:0;
  border-radius:8px;
  background:var(--ink);
  color:white;
  font-size:10px;
  font-weight:750
}

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

@media(max-width:800px){
  .sidebar{
    transform:translateX(-100%);
    transition:.25s
  }

  .sidebar.open{
    transform:translateX(0)
  }

  .main{
    margin-left:0
  }

  .mobile-menu{
    display:block
  }

  .topbar{
    padding:0 18px
  }

  .content{
    padding:28px 18px
  }

  .heading{
    display:block
  }

  .actions{
    margin-top:22px
  }
}

@media(max-width:550px){
  .actions{
    flex-direction:column
  }

  .actions .btn{
    width:100%
  }

  .bank-card{
    padding:22px
  }

  .card-number{
    font-size:15px
  }

  .card-bottom{
    left:22px;
    right:22px
  }
}

/* Migrated inline declarations — visual values preserved exactly. */
.inline-style-1{margin-top:18px}