:root{
--capital-purple:#7b1fa2;
--capital-dark-purple:#3B0764;
--capital-pink:#c2185b;
--capital-border:#e5e5e7;
--capital-text:#1d1d1f;
--capital-muted:#6e6e73;
--capital-bg:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:#fff!important;
  color:var(--capital-text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Arial,sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--capital-purple);color:#fff}
a{text-decoration:none!important;transition:.2s ease}
a:hover{color:var(--capital-purple)!important}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#f5f5f7}
::-webkit-scrollbar-thumb{background:var(--capital-purple);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--capital-dark-purple)}

/* ── LOGO BADGE ─────────────────────────────── */
.cp-order-badge-logo{display:flex;justify-content:center;margin-bottom:18px}
.cp-order-badge-logo img{height:70px;width:auto;display:block;object-fit:contain}
.cp-scene{transform:scale(1.3);transform-origin:center center}

/* ── NAVBAR ─────────────────────────────────── */
.navbar .container,
.navbar .container-fluid{
  width:100%;max-width:1440px;
  min-height:72px;padding:0 34px;margin:0 auto;
}
.navbar-header{min-height:72px;display:flex;align-items:center}
.navbar-brand{
  height:72px!important;
  display:flex!important;align-items:center!important;
  gap:12px;padding:0!important;
  color:var(--capital-dark-purple)!important;
}
.navbar-brand img{
  height:42px!important;width:auto!important;
  max-width:220px!important;object-fit:contain;
  display:block!important;transition:.3s ease;
}
.navbar-brand:hover img{transform:scale(1.06) rotate(-3deg)}
.navbar-brand::after{
  content:"CapitalPanel";
  font-size:27px;font-weight:900;
  font-family:"Syne",sans-serif;
  letter-spacing:-1.8px;color:#3B0764;white-space:nowrap;
}
.navbar-collapse{
  display:flex;justify-content:center;
  align-items:center;position:relative;
}
.navbar-center,
.navbar-center-block{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex!important;align-items:center;
  gap:4px;float:none!important;
}
.navbar-center>li{float:none!important;display:inline-block}
.navbar-center>li>a{padding:10px 16px!important;font-weight:700;font-size:14px;color:#111!important}
.navbar-nav>li>a{
  margin:16px 3px;padding:10px 15px!important;
  border-radius:999px;color:#1d1d1f!important;
  font-size:14px;font-weight:800;transition:.2s ease;
}
.navbar-nav>li>a:hover,
.navbar-nav>li.active>a,
.navbar-nav>li.active>a:hover{
  background:rgba(123,31,162,.09)!important;
  color:var(--capital-purple)!important;
}
.navbar-icon{margin-right:6px;color:var(--capital-purple)}
.navbar-toggle{
  margin-top:18px!important;
  border:1px solid #d2d2d7!important;
  border-radius:14px!important;
  background:#fff!important;
}
.navbar-toggle .icon-bar{background:var(--capital-purple)!important}
.navbar-right .badge{
  background:var(--capital-purple)!important;
  color:#fff!important;font-size:14px!important;
}

/* ── DROPDOWN ───────────────────────────────── */
.dropdown-menu{
  border:1px solid var(--capital-border)!important;
  border-radius:18px!important;padding:8px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.08)!important;
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  overflow:hidden;
}
.dropdown-menu>li>a{
  border-radius:12px;padding:10px 14px!important;
  color:#1d1d1f!important;font-weight:700;
}

/* ── LAYOUT ─────────────────────────────────── */
.container,.container-fluid{max-width:1280px}
main.capital-main{width:94%;max-width:1280px;margin:34px auto 72px;position:relative;z-index:2}

/* ── CARDS / PANELS ─────────────────────────── */
.panel,.well,.card,.modal-content{
  border-radius:28px!important;
  border:1px solid var(--capital-border)!important;
  background:#fff!important;
  box-shadow:0 18px 45px rgba(0,0,0,.05)!important;
  overflow:hidden;transition:.25s ease;
}
.panel:hover,.well:hover,.card:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 60px rgba(123,31,162,.08)!important;
}
.panel-heading{
  border-radius:28px 28px 0 0!important;
  background:rgba(123,31,162,.08)!important;
  border-bottom:1px solid var(--capital-border)!important;
  color:var(--capital-purple)!important;font-weight:900;
}
.panel-body{color:#424245}

/* ── TABLE ──────────────────────────────────── */
.table{
  border-radius:24px!important;overflow:hidden!important;
  border:1px solid var(--capital-border)!important;
  background:#fff!important;box-shadow:none!important;
}
.table>thead>tr>th{
  background:rgba(123,31,162,.08)!important;
  color:var(--capital-purple)!important;
  border-bottom:1px solid var(--capital-border)!important;
  font-weight:900;padding:15px!important;
}
.table>tbody>tr{transition:.2s ease}
.table>tbody>tr:hover{background:#faf7fd!important}
.table>tbody>tr>td{
  border-top:1px solid #f1f1f3!important;
  color:#424245;vertical-align:middle!important;padding:14px!important;
}

/* ── PAY ICON ───────────────────────────────── */
.cp-pay-icon{
  width:58px;height:58px;border-radius:18px;
  background:#fff;border:1px solid rgba(123,31,162,.15);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.cp-pay-icon img{width:42px;height:42px;object-fit:contain;display:block}

/* ── FORMS ──────────────────────────────────── */
.form-control{
  height:48px;border-radius:16px!important;
  border:1px solid #d2d2d7!important;background:#fff!important;
  box-shadow:none!important;color:#111!important;
  font-weight:600;transition:.25s ease!important;
}
textarea.form-control{height:auto!important;min-height:115px}
.form-control:hover{border-color:var(--capital-purple)!important}
.form-control:focus{
  border-color:var(--capital-purple)!important;
  box-shadow:0 0 0 4px rgba(123,31,162,.12)!important;
}

/* ── BUTTONS ────────────────────────────────── */
.btn,button,input[type="submit"]{
  border-radius:999px!important;font-weight:900!important;transition:.22s ease!important;
}
.btn:hover,button:hover,input[type="submit"]:hover{transform:translateY(-2px)}
.btn-primary,.btn-success,button[type="submit"],input[type="submit"]{
  border:1px solid var(--capital-purple)!important;
  color:#fff!important;background:var(--capital-purple)!important;
  box-shadow:0 12px 28px rgba(123,31,162,.18)!important;
}
.btn-primary:hover,.btn-success:hover,
button[type="submit"]:hover,input[type="submit"]:hover{
  background:var(--capital-dark-purple)!important;
  border-color:var(--capital-dark-purple)!important;color:#fff!important;
}
.btn-default{
  border:1px solid rgba(123,31,162,.28)!important;
  background:#fff!important;color:var(--capital-purple)!important;
}
.btn-default:hover{background:rgba(123,31,162,.08)!important;color:var(--capital-purple)!important}

/* ── BADGES / LABELS ────────────────────────── */
.badge,.label{border-radius:999px!important;font-weight:900!important;padding:7px 12px!important}

/* ── WALLET ─────────────────────────────────── */
.cp-wallet{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;
  background:#111;color:#fff;
  border:1px solid rgba(123,31,162,.25);transition:.25s ease;
}
.cp-wallet:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.cp-wallet-amount{font-size:18px;font-weight:900;color:var(--capital-pink)}

/* ── ALERTS ─────────────────────────────────── */
.alert{border-radius:18px!important;border:1px solid var(--capital-border)!important;box-shadow:none!important}
.alert-success{background:#f6effa!important;color:var(--capital-purple)!important;border-color:rgba(123,31,162,.22)!important}
.alert-danger{background:#fef2f2!important;color:#991b1b!important;border-color:#fecaca!important}

/* ── PAGINATION ─────────────────────────────── */
.pagination{display:flex;justify-content:center;gap:8px;padding:0;margin-top:26px}
.pagination>li>a,.pagination>li>span{
  border-radius:999px!important;border:1px solid var(--capital-border)!important;
  background:#fff!important;color:var(--capital-purple)!important;
  font-weight:900!important;min-width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
}
.pagination>.active>a,.pagination>.active>span,.pagination>li>a:hover{
  background:var(--capital-purple)!important;
  border-color:var(--capital-purple)!important;color:#fff!important;
}

/* ── NAV PILLS ──────────────────────────────── */
.nav-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.nav-pills>li>a{
  border-radius:999px!important;border:1px solid var(--capital-border)!important;
  background:#fff!important;color:var(--capital-purple)!important;
  font-weight:900!important;padding:10px 18px!important;
}
.nav-pills>li.active>a,.nav-pills>li>a:hover{
  background:var(--capital-purple)!important;
  border-color:var(--capital-purple)!important;color:#fff!important;
}

/* ── FLOATING BUTTONS ───────────────────────── */
#notify-wrapper{position:fixed;right:22px;bottom:96px;z-index:99999;max-width:360px}
.capital-floating{position:fixed;right:22px;bottom:22px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.capital-float-btn{
  min-width:130px;padding:12px 18px;border-radius:999px;
  color:#fff!important;font-weight:900;text-align:center;
  background:var(--capital-purple)!important;
  box-shadow:0 14px 35px rgba(123,31,162,.20);transition:.2s ease;
}
.capital-float-btn:hover{background:var(--capital-dark-purple)!important;color:#fff!important;transform:translateY(-2px)}

/* ── FOOTER ─────────────────────────────────── */
.capital-footer{
  width:94%;max-width:1280px;margin:0 auto 24px;
  padding:24px 28px;border-radius:28px;background:#fff;
  border:1px solid var(--capital-border);
  box-shadow:0 18px 45px rgba(0,0,0,.04);
  display:flex;justify-content:space-between;
  gap:20px;align-items:center;
  color:var(--capital-muted);font-size:14px;
}
.capital-footer strong{color:var(--capital-purple);font-size:17px}
.capital-status{display:flex;align-items:center;gap:8px;font-weight:900;color:var(--capital-purple)}
.capital-status span{
  width:9px;height:9px;background:var(--capital-purple);
  border-radius:50%;box-shadow:0 0 0 6px rgba(123,31,162,.12);
}

/* ══════════════════════════════════════════════
   MOBILE  ≤ 768px
══════════════════════════════════════════════ */
@media(max-width:768px){

  /* navbar shell */
  .navbar .container,
  .navbar .container-fluid{padding:0 16px}
  .navbar,
  .navbar-default{
    background:rgba(255,255,255,.92)!important;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(0,0,0,.05)!important;
    box-shadow:0 4px 20px rgba(0,0,0,.04)!important;
  }

  /* header row */
  .navbar-header{
    display:flex!important;align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;min-height:64px!important;padding:0!important;
  }

  /* brand */
  .navbar-brand{
    height:64px!important;gap:8px!important;flex-shrink:0;
    max-width:75%!important;
  }
  .navbar-brand img{height:34px!important;max-width:50px!important}
  .navbar-brand::after{font-size:18px!important;letter-spacing:-1px!important}

  /* toggle button */
  .navbar-toggle{
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;
    gap:5px!important;width:42px!important;height:42px!important;
    padding:0!important;margin:0!important;
    border-radius:14px!important;
    border:1.5px solid #e8d8f8!important;
    background:#faf7fd!important;flex-shrink:0;
  }
  .navbar-toggle .icon-bar{
    width:18px!important;height:2px!important;
    border-radius:999px!important;
    background:#7b1fa2!important;
    display:block!important;transition:all .2s ease!important;
  }

  /* collapsed menu panel */
  .navbar-collapse{
    display:block!important;
    width:100%!important;
    padding:14px 0 20px!important;
    position:static!important;
    transform:none!important;
    justify-content:flex-start!important;
    background:#fff!important;
    border-top:1px solid #ede8f5!important;
    box-shadow:none!important;
    overflow:visible!important;
    max-height:none!important;
  }

  /* all nav lists → vertical stack */
  .navbar-nav,
  .navbar-center,
  .navbar-center-block,
  .navbar-left-block,
  .navbar-right-block,
  .navbar-right{
    position:static!important;transform:none!important;
    float:none!important;display:flex!important;
    flex-direction:column!important;align-items:stretch!important;
    width:100%!important;margin:0!important;gap:4px!important;
  }

  /* nav items */
  .navbar-nav>li,
  .navbar-center>li{
    float:none!important;display:block!important;
    width:100%!important;text-align:center!important;
  }
  .navbar-nav>li>a,
  .navbar-center>li>a{
    display:block!important;width:100%!important;
    margin:0!important;padding:13px 16px!important;
    font-size:15px!important;font-weight:800!important;
    border-radius:14px!important;text-align:center!important;
    white-space:normal!important;line-height:1.3!important;
  }

  /* balance / currency dropdown */
  .navbar-right .dropdown,
  .dropdown-currencies{width:100%!important;text-align:center!important}
  .dropdown-toggle{
    display:flex!important;justify-content:center!important;
    align-items:center!important;gap:8px!important;
    width:100%!important;padding:13px 16px!important;border-radius:14px!important;
  }
  .navbar-right .badge{font-size:14px!important;padding:10px 20px!important}

  /* dropdown opens below, full width */
  .dropdown-menu{
    position:static!important;float:none!important;
    width:100%!important;box-shadow:none!important;
    border:1px solid #ede8f5!important;
    margin-top:6px!important;border-radius:16px!important;
  }

  /* panels */
  .panel,.well,.card,.modal-content{border-radius:24px!important}

  /* page layout */
  main.capital-main{width:92%;margin-top:20px;padding-bottom:130px}

  /* floating buttons */
  .capital-floating{right:12px!important;bottom:12px!important;gap:8px!important;z-index:9999!important}
  .capital-float-btn{
    min-width:auto!important;padding:11px 14px!important;
    font-size:13px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
  }

  /* footer */
  .capital-footer{flex-direction:column;align-items:flex-start;width:92%}

  /* inner page grids */
  .cp-order-grid,
  .cp-add-shell,
  .cp-api-shell{grid-template-columns:1fr!important;width:94%!important}
  .cp-order-head,.cp-order-form,.cp-order-side{padding:24px!important}
  .cp-order-head h1{font-size:32px!important}
  .cp-order-head p{font-size:15px!important;line-height:1.5!important}
}